/* 皇家小虎品牌风格：品牌黄 #FFC400 × 虎纹黑 #17130A
   参考皇家小虎包装与门店视觉：大面积品牌黄 + 黑色撞色、粗体标题、圆润卡片 */
:root{
  --nav:#17130a;            /* 虎纹黑 */
  --brand:#ffc400;          /* 皇家小虎品牌黄 */
  --brand-deep:#f0b400;
  --brand-dark:#8a6a00;     /* 黄字深色（白底可读） */
  --ink:#1c1608;
  --bg:#f7f5ef;             /* 暖白底 */
  --muted:#8a7f66;
  --line:#e8e2d2;
  --yellow:#fff3b0;         /* 权限黄：可编辑 */
  --green:#d9ead3;          /* 权限绿：可向下修改 */
  --orange:#f4b183;         /* 权限橙：不可修改 */
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei UI","PingFang SC",Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}
.app{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:220px;background:linear-gradient(180deg,#241c08,var(--nav));padding:24px 16px;color:#fff;overflow:auto}
.brand{display:flex;gap:11px;align-items:center;margin:0 8px 26px}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#17130a;font-weight:900;font-size:18px;box-shadow:0 3px 0 #a87e00;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand b{display:block}.brand small{display:block;color:#c9b98a;font-size:9px;margin-top:3px;letter-spacing:1px}
.nav{display:flex;flex-direction:column;gap:5px}
.nav button{border:0;background:transparent;color:#b9ad8c;border-radius:8px;padding:11px 12px;text-align:left;font-weight:600}
.nav button:hover{background:#3a2f14;color:#ffe589}
.nav button.active{background:var(--brand);color:#17130a;font-weight:800}
.nav button span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:9px;border:1px solid #6b5d33;border-radius:6px}
.nav button.active span{border-color:#17130a44}
.main{margin-left:220px}
.top{height:84px;background:#fff;border-bottom:2px solid var(--brand);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:8}
.top h1{font-size:20px;margin:0 0 5px}.top p{font-size:11px;color:var(--muted);margin:0}
.top-actions{display:flex;align-items:center;gap:10px}
.top input,.top select{border:1px solid var(--line);border-radius:7px;padding:8px;background:#fff;font-size:10px}
.content{padding:22px 28px 48px;max-width:1500px;margin:auto}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px #6b5d3312;margin-bottom:13px}
.hero{padding:26px 32px;background:linear-gradient(110deg,#ffd94d,var(--brand) 60%,#f0b400);color:#17130a;border:0;border-bottom:3px solid #17130a}
.hero h2{font-size:25px;margin:8px 0;font-weight:900}
.hero p{color:#5c4c10;font-size:12px}
.hero small{font-weight:800;letter-spacing:1px}
.btn{border:1px solid transparent;border-radius:7px;padding:8px 14px;font-size:10px;font-weight:800}
.primary{background:#17130a;color:var(--brand);border-color:#17130a}
.primary:hover{background:#000}
.ghost{background:#fff;border-color:var(--line);color:#4a3f22}
.ghost:hover{border-color:var(--brand)}
.danger{color:#c0392b!important}.success{color:#16815f!important}
/* 小虎高级黄：系统内所有操作按钮统一（登录页除外） */
.app .btn.primary,.app .btn.ghost,.modal .btn.primary,.modal .btn.ghost{background:linear-gradient(180deg,#f6d960,#efc23e);color:#17130a;border:1px solid #d9ae32;box-shadow:0 2px 0 #b8952e}
.app .btn.primary:hover,.app .btn.ghost:hover,.modal .btn.primary:hover,.modal .btn.ghost:hover{background:linear-gradient(180deg,#f0cf4e,#e5b635);border-color:#c9a02c}
.app .btn.ghost.danger,.app .btn.ghost.success,.modal .btn.ghost.danger,.modal .btn.ghost.success{color:#17130a!important}
.app .text-btn{color:#8a6a00}
/* 小虎高级黄（取自绩效模板中心横幅渐变色 #f6d960→#e9bb3c） */
.btn-gold{background:linear-gradient(180deg,#f6d960,#efc23e);color:#17130a;border:1px solid #d9ae32;box-shadow:0 2px 0 #b8952e;font-weight:800}
.btn-gold:hover{background:linear-gradient(180deg,#f0cf4e,#e5b635);border-color:#c9a02c}
.app .fill{background:linear-gradient(180deg,#f6d960,#efc23e);color:#17130a}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}
.stat{padding:16px;border-top:3px solid var(--brand)}
.stat span,.stat small{display:block;color:var(--muted);font-size:9px}
.stat b{display:block;font-size:23px;margin:10px 0}
.head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.head h3{font-size:14px;margin:0 0 4px}.head p{font-size:9px;color:var(--muted);margin:0}
.head.target-head{flex-direction:column;align-items:stretch;gap:12px}
.target-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.target-actions>.btn,.target-actions>.prov-select{flex:none;white-space:nowrap;margin:0}
.target-actions>.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.table-wrap{overflow:auto}
.table-wrap table{width:100%;border-collapse:collapse;min-width:960px;font-size:9px}
th{background:#faf7ec;color:#6d6142;padding:10px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid #f0ebdb;white-space:nowrap}
td small{display:block;color:#a89b7d;font-size:7px;margin-top:3px}
.num{text-align:right}
.text-btn{border:0;background:transparent;color:var(--brand-dark);font-size:9px;font-weight:800}
.badge{display:inline-flex;padding:4px 8px;border-radius:20px;font-size:8px}
.ok{background:#e3f6ef;color:#08765a}.wait{background:#fff3d1;color:#8a6a00}.bad{background:#fde4e4;color:#b03a3a}.info{background:#fdf3d0;color:#7a5c00}
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar input,.toolbar select{border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:#fff;font-size:9px}
.toolbar .spacer{margin-left:auto}
.editable{border:1px solid #cfb936;background:#fffbe2;border-radius:4px;padding:5px;width:66px;text-align:right}
.target-amount{width:92px}
.editable.invalid{border-color:#c0392b;background:#fdecec;color:#9f2525;box-shadow:0 0 0 1px #c0392b}
.target-invalid-text{color:#c0392b;font-weight:800}
.legend{display:flex;align-items:center;gap:15px;padding:10px 17px;background:#fbf9f2;border-bottom:1px solid var(--line);font-size:9px}
.legend i{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:middle;margin-right:5px;border:1px solid #0001}
.legend .y{background:var(--yellow)}.legend .g{background:var(--green)}.legend .o{background:var(--orange)}
.performance{min-width:5200px}
.performance th.o,.performance td.o{background:var(--orange)}
.performance th.y,.performance td.y{background:var(--yellow)}
.performance th.g,.performance td.g{background:var(--green)}
.performance input{width:62px;border:1px solid #bdad48;border-radius:4px;padding:5px;background:#fffce4}
.performance tbody .perf-total-row td{background:#eee7d5;color:#4a3f22;font-weight:800;opacity:1;border-bottom:2px solid #c9b98a}
.performance td.g input{background:#f3fff0;border-color:#73a96c}
.performance td.o,.performance th.o{opacity:.92}
.fill{border:0;border-radius:4px;background:#43863c;color:#fff;padding:5px 8px}
.template-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:13px}
.template-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left}
.template-card.active{border:2px solid var(--brand);background:#fffbe8;box-shadow:0 4px 14px #ffc40033}
.template-card>span{display:grid;place-items:center;min-width:52px;height:40px;border-radius:8px;background:#17130a;color:var(--brand);font-size:10px;font-weight:900;padding:0 8px}
.template-card.non>span{background:#4a3c10;color:#ffe589}
.template-card b,.template-card small{display:block}
.template-card small{color:var(--muted);font-size:8px;margin-top:4px}
.binding{display:grid;grid-template-columns:220px 1fr;gap:15px;padding:14px 18px;border-bottom:1px solid var(--line)}
.binding h3{font-size:12px;margin:0 0 5px}.binding p{font-size:8px;color:var(--muted);margin:0}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:8px;cursor:pointer;background:#fff}
.checks label.checked{border-color:var(--brand);background:#fff6d6;color:#6b5300;font-weight:700}
.checks input{margin:0 5px 0 0}
.metric-table input,.metric-table select{border:1px solid var(--line);border-radius:5px;padding:6px;font-size:9px}
.region-incentive-table td{vertical-align:top}
.region-incentive-name{width:240px;max-width:100%}
.region-attachments{min-width:360px;white-space:normal}
.region-attachment-list{list-style:none;padding:0;margin:0 0 7px;display:grid;gap:7px}
.region-attachment-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 9px;background:#faf7ec;border:1px solid var(--line);border-radius:6px}
.region-attachment-name{flex:1;min-width:100px;overflow-wrap:anywhere;font-size:11px}
.region-attachment-size{white-space:nowrap;font-size:10px}
.region-attachment-empty{display:inline-block;margin-right:12px;font-size:10px}
.region-attachment-upload{display:inline-flex;align-items:center;cursor:pointer;margin-top:2px}
.region-attachment-upload.disabled{opacity:.5;cursor:not-allowed}
.region-attachments small{margin-top:7px;font-size:10px}
.region-attachment-help{margin:0;padding:12px 18px;background:#fbf9f2;color:#6d6142;font-size:11px;line-height:1.6}
.region-attachment-status{margin:12px 18px;padding:10px 14px;border:1px solid #d9c780;background:#fffbea;border-radius:7px;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.region-attachment-status p{margin:0 0 6px}
.region-attachment-status progress{width:min(420px,100%);height:10px;accent-color:#b29531}
.region-attachment-status ul{margin:7px 0 0;padding-left:18px;color:#a63228}
.region-incentive-error{margin:12px 18px;color:#a63228;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.region-attachment-preview{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;padding:4px;border-radius:5px}
.region-attachment-preview:hover{background:#eee5c8}
.region-attachment-preview svg{width:18px;height:18px;flex:none}
.region-image-preview{width:min(1100px,calc(100vw - 32px));max-height:92vh;padding:0;border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 20px 60px #17130a66;overflow:auto}
.region-image-preview::backdrop{background:#17130ab3}
.region-image-preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.region-image-preview-head h3{margin:0;font-size:17px}
.region-image-preview-head button{border:0;background:#f4efe2;border-radius:50%;width:32px;height:32px;font-size:22px;flex:none}
.region-image-preview-name{margin:0;padding:12px 20px;font-size:12px;overflow-wrap:anywhere;color:var(--muted)}
.region-image-preview-stage{display:grid;place-items:center;min-height:180px;max-height:65vh;overflow:auto;padding:12px;background:#f0eee7}
.region-image-preview-image{display:block;max-width:100%;max-height:calc(65vh - 24px);width:auto;height:auto;object-fit:contain}
.region-image-preview-image[hidden]{display:none}
.region-image-preview-stage.is-original{display:block}
.region-image-preview-stage.is-original .region-image-preview-image{max-width:none;max-height:none;margin:auto}
.region-image-preview-status{margin:28px 16px;text-align:center;font-size:13px;overflow-wrap:anywhere}
.region-image-preview-status.error{color:#a63228}
.region-image-preview-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.account-person{display:flex;align-items:center;gap:8px}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#17130a;color:var(--brand);font-weight:900}
.status{font-weight:800}
.status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.status.on{color:#08765a}.status.on:before{background:#18a17a}
.status.off{color:#8c95a5}.status.off:before{background:#a7afbb}
.modal-bg{display:none;position:fixed;inset:0;background:#17130a99;z-index:30;place-items:center;padding:20px}
.modal-bg.show{display:grid}
.modal{width:min(560px,100%);background:#fff;border-radius:14px;box-shadow:0 20px 60px #17130a66;border-top:4px solid var(--brand);max-height:88vh;overflow:auto}
.modal-head,.modal-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-foot{justify-content:flex-end;gap:8px;border:0;border-top:1px solid var(--line)}
.modal-head h3{margin:0;font-size:16px}
.modal-head button{border:0;background:#f4efe2;border-radius:50%;width:28px;height:28px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:20px}
.form label{font-size:9px;font-weight:800}
.form input,.form select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:6px;padding:9px}
.form .full{grid-column:1/-1}
.toast{display:none;position:fixed;right:22px;bottom:22px;background:#17130a;color:var(--brand);border-left:4px solid var(--brand);border-radius:10px;padding:13px 16px;font-size:10px;z-index:50;box-shadow:0 12px 35px #17130a55;max-width:420px;font-weight:700}
.toast.show{display:block}.toast.err{background:#6b1f1f;color:#ffd9d9;border-left-color:#c0392b}
.loading-bg{display:none;position:fixed;inset:0;background:#17130a66;z-index:60;place-items:center}
.loading-bg.show{display:grid}
.loading-box{background:#fff;border-radius:14px;padding:28px 40px;text-align:center;border-top:4px solid var(--brand);box-shadow:0 16px 50px #17130a66}
.loading-box p{margin:12px 0 0;font-size:12px;font-weight:800;color:#4a3f22}
.spinner{width:34px;height:34px;margin:auto;border-radius:50%;border:4px solid #f6d960;border-top-color:#17130a;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.summary{padding:20px 24px;background:linear-gradient(110deg,#241c08,#3a2e10);color:var(--brand);border-bottom:3px solid var(--brand)}
.summary h2{margin:6px 0;font-weight:900}
.muted{color:var(--muted)}
.login-bg{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(140deg,#ffd94d,var(--brand) 55%,#eab000);padding:20px}
.login-bg:before{content:"虎";position:fixed;right:-40px;bottom:-120px;font-size:420px;font-weight:900;color:#00000008;pointer-events:none}
.login-card{width:min(400px,100%);background:#fff;border-radius:18px;padding:34px 32px;box-shadow:0 24px 70px #6b530055;border-top:6px solid #17130a}
.login-card input{border:1px solid var(--line);border-radius:7px;padding:10px;width:100%;margin-top:6px}
.login-card input:focus{outline:2px solid var(--brand)}
.login-status{margin:0 0 16px;padding:11px 12px;border:1px solid #e8d795;border-radius:8px;background:#fff9e5;color:#685119;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.login-status.error{border-color:#edc3bc;background:#fff2ef;color:#9a3025}
.login-status.is-loading:before{content:"";display:inline-block;width:12px;height:12px;margin-right:7px;border:2px solid #d8c780;border-top-color:#806312;border-radius:50%;vertical-align:-2px;animation:spin .8s linear infinite}
.wecom-login{width:100%;padding:10px;margin-bottom:16px;font-size:13px}
.login-status[hidden],.wecom-login[hidden]{display:none}
.flow{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px;flex-wrap:wrap}
.flow .step{padding:8px 14px;border-radius:20px;background:#f4efe0;color:#8a7f66;font-size:10px;font-weight:700}
.flow .step.done{background:#e3f6ef;color:#08765a}
.flow .step.now{background:#17130a;color:var(--brand)}
.flow .arrow{color:#c9bd9a}
.todo-item{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #f0ebdb;font-size:11px}
.todo-item:last-child{border:0}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px;font-size:10px;padding:20px}
.kv b{color:#4a3f22}
.prov-select{border:1px solid var(--line);border-radius:7px;padding:8px 12px;background:#fff;font-size:10px;font-weight:800;color:#4a3f22;cursor:pointer;margin-right:6px}
.perf-wrap{max-height:72vh}
.performance th{text-align:center;vertical-align:middle;padding:6px 5px;border-right:1px solid #00000014}
.performance thead tr:nth-child(1) th{position:sticky;top:0;z-index:3;height:26px;font-size:10px}
.performance thead tr:nth-child(2) th{position:sticky;top:26px;z-index:3;height:26px}
.performance thead tr:nth-child(3) th{position:sticky;top:52px;z-index:3;height:24px;font-weight:400;color:#5e6a80cc}
/* 每项绩效指标的目标、达成、达成率、得分组成独立四列框线。 */
.performance .metric-cell{border-right:1px solid #d6c17c;border-bottom:1px solid #d6c17c}
.performance .metric-group{border-top:2px solid #ad8d35;border-bottom:1px solid #d6c17c}
.performance .metric-start{border-left:2px solid #ad8d35}
.performance .metric-end{border-right:2px solid #ad8d35}
.performance td.num{text-align:right}
.performance .sticky-select{position:sticky!important;left:0;z-index:6!important;min-width:36px;width:36px;background:#fff}
.performance .sticky-basic-group{position:sticky!important;left:36px;z-index:6!important;min-width:330px}
.performance .sticky-province{position:sticky!important;left:36px;z-index:6!important;min-width:76px;width:76px}
.performance .sticky-name{position:sticky!important;left:112px;z-index:6!important;min-width:104px;width:104px}
.performance .sticky-position{position:sticky!important;left:216px;z-index:6!important;min-width:150px;width:150px;box-shadow:3px 0 4px #0002}
.performance tbody .sticky-select,.performance tbody .sticky-province,
.performance tbody .sticky-name,.performance tbody .sticky-position{z-index:2!important}
@media(max-width:900px){.side{width:72px;padding:18px 9px}.brand div,.nav button{font-size:0}.brand{margin-left:8px}.nav button span{font-size:10px;margin:0}.main{margin-left:72px}.top{padding:12px 16px;height:auto}.content{padding:15px}.grid4{grid-template-columns:1fr 1fr}.template-tabs{grid-template-columns:1fr}.binding{grid-template-columns:1fr}}