/* =========================================================
   业绩管理系统 · 统一设计系统 (app.css)
   高级 SaaS 仪表盘风格：深色侧边栏 + 浅色内容区
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* 主色与强调色 */
  --brand:#5b6cff;          /* 主蓝紫 */
  --brand-2:#7c4dff;        /* 渐变搭配 */
  --teal:#16c79a;
  --orange:#ff7a59;
  --pink:#ff5d8f;
  --amber:#ffb02e;
  --red:#ff5b5b;
  --green:#16c79a;
  --blue:#3a86ff;

  /* 中性色 */
  --bg:#f4f5fb;             /* 内容区背景 */
  --surface:#ffffff;        /* 卡片 */
  --surface-2:#f7f8fc;      /* 次级填充 */
  --line:#eceef5;           /* 描边 */
  --text:#1c2033;           /* 主文字 */
  --text-2:#6b7192;         /* 次文字 */
  --text-3:#9aa0bd;         /* 占位/弱化 */

  /* 侧边栏（深色） */
  --side:#171a2b;
  --side-2:#1f2336;
  --side-text:#aeb4d6;
  --side-active:#5b6cff;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(31,38,80,.06);
  --shadow-lg:0 18px 50px rgba(31,38,80,.12);
  --shadow-card:0 2px 8px rgba(31,38,80,.05);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#d7dbea;border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#c2c7dd;}

/* ---------- 布局骨架 ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;}
.sidebar{
  background:linear-gradient(180deg,var(--side) 0%,var(--side-2) 100%);
  color:var(--side-text);
  padding:22px 16px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:6px;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px;}
.brand .logo{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
  box-shadow:0 6px 18px rgba(91,108,255,.45);
}
.brand .name{color:#fff;font-weight:700;font-size:15px;line-height:1.2;}
.brand .name small{display:block;color:var(--side-text);font-weight:400;font-size:11px;}

.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#5c628a;padding:14px 10px 6px;}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:11px;cursor:pointer;
  color:var(--side-text);font-weight:500;font-size:13px;
  border:none;background:transparent;width:100%;text-align:left;
  transition:.15s;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-item.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 20px rgba(91,108,255,.35);}
.nav-item .ic{width:18px;text-align:center;font-size:15px;}
.sidebar .scroll{flex:1;overflow-y:auto;margin:4px -4px;padding:0 4px;}
.sidebar .scroll::-webkit-scrollbar-thumb{background:#3a3f5c;}

.archived-head{font-size:11px;color:#6b7099;display:flex;justify-content:space-between;align-items:center;
  padding:9px 10px;margin-top:8px;border-top:1px solid rgba(255,255,255,.06);cursor:pointer;}
.archived-item{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;margin:3px 0;
  background:rgba(255,255,255,.04);border-radius:9px;color:#8a90b5;font-size:12px;}
.archived-item .nm{text-decoration:line-through;opacity:.8;}

/* ---------- 顶栏 ---------- */
.main{padding:22px 26px 40px;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;}
.topbar h1{font-size:20px;}
.topbar .sub{color:var(--text-2);font-size:12.5px;margin-top:3px;}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ---------- 按钮 ---------- */
.btn{
  border:none;cursor:pointer;font-weight:600;font-size:12.5px;
  padding:9px 16px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);
  transition:.15s;font-family:inherit;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 20px rgba(91,108,255,.32);}
.btn-teal{background:linear-gradient(135deg,#16c79a,#0fb389);color:#fff;}
.btn-amber{background:linear-gradient(135deg,#ffb02e,#ff8a3d);color:#fff;}
.btn-danger{background:linear-gradient(135deg,#ff6b6b,#ff4d6d);color:#fff;}
.btn-ghost{background:var(--surface-2);color:var(--text-2);box-shadow:none;}
.btn-sm{padding:6px 12px;font-size:11.5px;border-radius:9px;}

/* ---------- 卡片 ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:18px;overflow:hidden;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);}
.card-head h3{font-size:14.5px;display:flex;align-items:center;gap:8px;}
.card-body{padding:20px;}
.card-body.flush{padding:0;}

/* ---------- KPI 渐变卡 ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:18px;}
.kpi{position:relative;border-radius:var(--radius);padding:20px 22px;color:#fff;overflow:hidden;box-shadow:var(--shadow);min-height:118px;display:flex;flex-direction:column;justify-content:space-between;}
.kpi .label{font-size:12.5px;opacity:.92;font-weight:500;display:flex;align-items:center;gap:8px;}
.kpi .val{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.kpi .delta{font-size:12px;font-weight:600;opacity:.95;}
.kpi .glow{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.16);}
.kpi.k-brand{background:linear-gradient(135deg,#6a7bff,#8a5dff);}
.kpi.k-teal{background:linear-gradient(135deg,#1fd1a5,#10b3a0);}
.kpi.k-orange{background:linear-gradient(135deg,#ff8a5b,#ff5d8f);}
.kpi.k-amber{background:linear-gradient(135deg,#ffc24b,#ff8a3d);}
.kpi.k-dark{background:linear-gradient(135deg,#2b3050,#1c2033);}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;}
table.tbl th{
  background:var(--surface-2);color:var(--text-2);font-weight:600;text-align:center;
  padding:11px 10px;white-space:nowrap;position:sticky;top:0;border-bottom:1px solid var(--line);
}
table.tbl th:first-child{text-align:left;padding-left:18px;}
table.tbl td{padding:11px 10px;text-align:center;border-bottom:1px solid var(--line);color:var(--text);}
table.tbl td:first-child{text-align:left;padding-left:18px;font-weight:600;}
table.tbl tbody tr:hover{background:var(--surface-2);}
table.tbl tbody tr:last-child td{border-bottom:none;}
.cell-today{background:#eef0ff;font-weight:700;color:var(--brand);}
.money{font-weight:700;color:var(--teal);}
.muted{color:var(--text-3);}

/* ---------- 输入 ---------- */
input,select{
  font-family:inherit;font-size:12.5px;color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;
  background:#fff;outline:none;transition:.15s;
}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,108,255,.13);}
.cell-input{text-align:center;padding:7px 6px;border-radius:8px;}
.cell-input.today{background:#f4f6ff;}

/* ---------- 徽章 ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;}
.badge-a{background:#eaf3ff;color:#2f6bff;}
.badge-b{background:#fff0e9;color:#ff6a3d;}
.badge-up{background:#e7faf2;color:#0fae82;}
.badge-down{background:#ffecec;color:#ff4d4d;}

/* ---------- 链接药丸 ---------- */
.link-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:#eef0ff;color:var(--brand);border-radius:99px;font-weight:600;font-size:11.5px;}

/* ---------- 结算区 ---------- */
.settle{display:grid;grid-template-columns:430px 1fr;gap:20px;}
.settle .panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;}
.field-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.field{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--text-2);font-weight:500;}
.field.col-2{grid-column:span 2;}
.field.col-3{grid-column:span 3;}
.result-box{margin-top:14px;padding:14px 16px;background:#fff;border-radius:12px;border-left:4px solid var(--brand);font-weight:600;line-height:1.7;box-shadow:var(--shadow-card);}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(20,24,46,.55);backdrop-filter:blur(4px);display:none;justify-content:center;align-items:center;z-index:1000;padding:24px;}
.modal-content{background:var(--bg);border-radius:22px;width:100%;max-width:1180px;height:90vh;overflow-y:auto;padding:24px 26px;box-shadow:var(--shadow-lg);}
.modal-content h2{font-size:18px;}
.chip-row{display:flex;gap:12px;flex-wrap:wrap;}
.chip{flex:1;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-card);}
.chip .t{color:var(--text-2);font-size:11.5px;}
.chip .v{font-size:19px;font-weight:800;margin-top:2px;}

.hidden{display:none !important;}
.chart{width:100%;height:320px;}

/* ---------- 成就徽章 ---------- */
.achv-wrap{display:flex;flex-wrap:wrap;gap:10px;}
.achv{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:13px;font-size:12.5px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);}
.achv .ic{font-size:19px;line-height:1;}
.achv .sub{display:block;color:var(--text-3);font-weight:400;font-size:10.5px;margin-top:1px;}
.achv.gold{background:linear-gradient(135deg,#fff6e0,#ffe7ad);border-color:#ffdf9e;color:#9a6400;}
.achv.gold .sub{color:#b07d1a;}
.achv.locked{opacity:.5;filter:grayscale(.7);}

/* ---------- 登录页 ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;}
.auth-hero{position:relative;background:linear-gradient(150deg,#5b6cff 0%,#7c4dff 55%,#9b5cff 100%);color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.auth-hero .blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.35;}
.auth-hero .b1{width:280px;height:280px;background:#fff;right:-80px;top:-60px;opacity:.12;}
.auth-hero .b2{width:200px;height:200px;background:#16c79a;left:-60px;bottom:40px;opacity:.18;}
.auth-hero h1{font-size:30px;line-height:1.25;max-width:420px;}
.auth-hero p{color:rgba(255,255,255,.85);max-width:380px;font-size:14px;}
.auth-stat{display:flex;gap:30px;}
.auth-stat .n{font-size:24px;font-weight:800;}
.auth-stat .l{font-size:12px;opacity:.85;}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg);}
.auth-card{width:100%;max-width:380px;background:var(--surface);border-radius:22px;padding:36px 34px;box-shadow:var(--shadow-lg);border:1px solid var(--line);}
.auth-card h2{font-size:22px;margin-bottom:6px;}
.auth-card .lead{color:var(--text-2);margin-bottom:24px;font-size:13px;}
.auth-field{margin-bottom:16px;}
.auth-field label{display:block;font-size:12px;color:var(--text-2);font-weight:600;margin-bottom:7px;}
.auth-card .btn{width:100%;justify-content:center;padding:12px;font-size:14px;margin-top:6px;}
.msg{font-size:12.5px;text-align:center;padding:10px;border-radius:10px;margin-bottom:14px;font-weight:600;}
.msg.error{background:#ffecec;color:#e5484d;}
.msg.success{background:#e7faf2;color:#12a878;}
.toggle-link{text-align:center;margin-top:18px;font-size:13px;color:var(--text-2);}

@media(max-width:1024px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;}
  .sidebar .scroll{display:flex;flex-wrap:wrap;width:100%;}
  .settle{grid-template-columns:1fr;}
  .auth-wrap{grid-template-columns:1fr;}
  .auth-hero{display:none;}
}