:root {
  color-scheme: light;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#171a20;
  --muted:#7d838d;
  --line:#e8ebf0;
  --blue:#0071e3;
  --blue-2:#1684f7;
  --blue-soft:#edf5ff;
  --green:#16a05d;
  --green-soft:#e8f8ef;
  --orange:#bf6a02;
  --orange-soft:#fff3d7;
  --red:#d92d20;
  --red-soft:#fff1f0;
  --shadow:0 18px 48px rgba(18,31,56,.08);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(21,128,244,.12), transparent 320px),
    radial-gradient(circle at 88% 8%, rgba(22,160,93,.08), transparent 360px),
    linear-gradient(180deg,#fbfcff 0%,var(--bg) 100%);
}
button,input,select,textarea { font:inherit; }
button {
  border:0;
  min-height:44px;
  border-radius:999px;
  padding:0 22px;
  cursor:pointer;
  font-weight:850;
}
button:disabled { opacity:.55; cursor:not-allowed; }
.primary { color:#fff; background:linear-gradient(180deg,var(--blue-2),var(--blue)); box-shadow:0 14px 24px rgba(0,113,227,.18); }
.secondary { color:var(--blue); background:#fff; border:1px solid rgba(0,113,227,.18); }
.ghost { color:#5f6772; background:#eef1f5; }
.danger { color:var(--red); background:var(--red-soft); }
.wide { width:100%; }
.hidden { display:none !important; }
.app-shell { width:min(1500px,100%); min-height:100vh; margin:0 auto; padding:24px; }
.login-view { min-height:calc(100vh - 48px); display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,520px); gap:36px; align-items:center; }
.login-hero { padding:36px; }
.brand-mark { width:66px; height:66px; border-radius:20px; display:grid; place-items:center; background:#171d27; color:#fff; font-size:28px; font-weight:950; }
.brand-mark.small { width:44px; height:44px; border-radius:14px; font-size:20px; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-weight:900; }
.login-hero h1 { margin:14px 0 10px; font-size:68px; line-height:1; letter-spacing:-3px; }
.hero-copy,.muted,.message { color:var(--muted); line-height:1.65; }
.hero-copy { width:min(560px,100%); font-size:20px; }
.login-card,.card,.tool-card,.customer-card,.summary-hero,.sidebar,.modal-card {
  background:rgba(255,255,255,.94);
  border:1px solid rgba(17,24,39,.06);
  box-shadow:var(--shadow);
}
.login-card { border-radius:34px; padding:30px; }
.login-card h2 { margin:0 0 22px; font-size:30px; }
label { display:grid; gap:8px; color:#58606b; font-weight:780; }
label + label { margin-top:18px; }
input,select,textarea {
  width:100%;
  min-width:0;
  border:1px solid #dce1e8;
  border-radius:18px;
  background:#f8fafc;
  color:var(--text);
  outline:none;
}
input,select { height:48px; padding:0 14px; }
textarea { min-height:132px; padding:14px; resize:vertical; line-height:1.6; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); background:#fff; }
.login-card button { margin-top:24px; }
.workspace { display:grid; grid-template-columns:236px minmax(0,1fr); gap:20px; }
.sidebar { position:sticky; top:24px; min-height:calc(100vh - 48px); border-radius:34px; padding:18px; display:flex; flex-direction:column; }
.side-brand { display:flex; align-items:center; gap:12px; padding:6px 6px 20px; }
.side-brand strong,.side-brand span { display:block; }
.side-brand span { color:var(--muted); font-size:12px; margin-top:3px; }
.side-nav { display:grid; gap:10px; }
.nav-item { justify-content:flex-start; text-align:left; color:#69717d; background:transparent; box-shadow:none; }
.nav-item.active { color:var(--blue); background:var(--blue-soft); }
.side-status { margin-top:auto; display:grid; gap:8px; color:var(--muted); }
.side-status span { color:var(--text); font-weight:850; }
.main-view { min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:4px 0 18px; }
.topbar h1 { margin:0; font-size:52px; line-height:1; letter-spacing:-2px; }
.top-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.page { display:none; }
.active-page { display:block; }
.grid-2 { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }
.card { border-radius:30px; padding:22px; margin-bottom:16px; }
.date-card { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.date-big { font-size:38px; font-weight:950; letter-spacing:-1px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip { min-height:34px; padding:0 14px; color:#5f6772; background:#f0f2f5; box-shadow:none; }
.chip.active { color:#fff; background:#171d27; }
.quick-action { display:flex; align-items:center; gap:16px; width:100%; padding:20px; border-radius:26px; background:#fff; border:1px solid var(--line); box-shadow:none; text-align:left; color:var(--text); }
.quick-action .plus { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; background:var(--blue); font-size:32px; }
.quick-action strong { display:block; font-size:24px; }
.quick-action span { display:block; color:var(--muted); margin-top:4px; font-weight:650; }
.section-title { margin:0 0 12px; font-size:24px; }
.customer-list { display:grid; gap:12px; }
.customer-card { border-radius:26px; padding:18px; display:flex; align-items:center; gap:14px; cursor:pointer; box-shadow:0 10px 28px rgba(18,31,56,.05); }
.customer-card:hover { border-color:rgba(0,113,227,.3); }
.avatar { flex:none; width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); font-weight:950; font-size:20px; }
.customer-main { min-width:0; flex:1; }
.customer-title { font-size:22px; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.customer-sub { margin-top:4px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-pill { flex:none; padding:7px 11px; border-radius:999px; background:var(--orange-soft); color:var(--orange); font-size:13px; font-weight:900; }
.status-pill.done { background:var(--green-soft); color:var(--green); }
.status-pill.empty { background:#f0f2f5; color:#8a929d; }
.status-pill.blue { background:var(--blue-soft); color:var(--blue); }
.tool-grid { display:grid; gap:12px; }
.tool-card { border-radius:26px; padding:18px; display:grid; gap:14px; }
.tool-card h3 { margin:0; font-size:22px; }
.tool-card p { margin:0; color:var(--muted); }
.tool-actions { display:flex; gap:10px; flex-wrap:wrap; }
.sync-actions { justify-content:flex-end; max-width:520px; }
.sync-actions button { min-width:132px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:24px; padding:18px; }
.stat span { display:block; color:var(--muted); font-weight:760; }
.stat strong { display:block; margin-top:8px; font-size:30px; line-height:1; color:var(--blue); }
.summary-hero { border-radius:34px; padding:26px; margin-bottom:16px; color:#fff; background:linear-gradient(135deg,#171d27,#0071e3); }
.summary-hero span { opacity:.8; }
.summary-hero strong { display:block; margin-top:8px; font-size:48px; line-height:1; }
.summary-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.month-list { display:grid; gap:12px; }
.month-card { padding:18px; border:1px solid var(--line); border-radius:24px; display:flex; justify-content:space-between; align-items:center; }
.settings-list { display:grid; gap:12px; }
.setting-item { display:flex; justify-content:space-between; gap:16px; padding:18px; border-radius:24px; background:#fff; border:1px solid var(--line); }
.setting-item strong { font-size:18px; }
.setting-item p { margin:5px 0 0; color:var(--muted); }
.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; }
.modal-mask { position:absolute; inset:0; background:rgba(17,24,39,.45); backdrop-filter:blur(6px); }
.modal-card { position:relative; width:min(980px,100%); max-height:min(86vh,900px); overflow:hidden; border-radius:32px; display:flex; flex-direction:column; }
.modal-head { padding:22px 24px; display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:34px; }
.icon-btn { width:44px; padding:0; font-size:22px; }
.modal-body { padding:22px 24px; overflow:auto; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.full { grid-column:1/-1; }
.parse-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:22px; margin-top:16px; }
table { width:100%; min-width:860px; border-collapse:collapse; background:#fff; }
th,td { padding:10px 8px; border-bottom:1px solid #eef0f2; text-align:left; vertical-align:middle; }
th { position:sticky; top:0; z-index:1; background:#f8fafc; color:#717884; font-size:13px; }
.cell-input { height:38px; border-radius:12px; padding:0 10px; }
.num-input { text-align:right; }
.rate-13 { color:var(--blue); font-weight:900; }
.rate-11 { color:var(--orange); font-weight:900; }
.editor-footer { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.export-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.export-grid button {
  min-height:48px;
  color:var(--blue);
  background:#fff;
  border:1px solid rgba(0,113,227,.16);
  box-shadow:none;
}
.totals { display:flex; gap:16px; align-items:center; color:#4b5563; }
.totals strong { color:var(--blue); font-size:24px; }
.notice { padding:14px 16px; border-radius:20px; background:var(--blue-soft); color:#2463a7; line-height:1.6; }
.paste-zone {
  border:1px dashed rgba(0,113,227,.36);
  border-radius:22px;
  padding:16px 18px;
  background:linear-gradient(180deg,#f8fbff,#eef6ff);
  color:#2264aa;
}
.paste-zone strong {
  display:block;
  font-size:18px;
  color:var(--blue);
}
.paste-zone span {
  display:block;
  margin-top:5px;
  color:#5f7fa6;
  line-height:1.55;
}
.paste-zone.success {
  border-color:rgba(22,160,93,.42);
  background:var(--green-soft);
}
.paste-zone.success strong,.paste-zone.success span {
  color:var(--green);
}
.image-preview-wrap {
  display:grid;
  gap:16px;
}
.image-preview {
  display:block;
  width:min(520px,100%);
  max-height:68vh;
  margin:0 auto;
  object-fit:contain;
  border-radius:24px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 16px 42px rgba(18,31,56,.12);
}
.image-preview-actions {
  justify-content:center;
}
@media (max-width: 980px) {
  .app-shell { padding:14px; }
  .login-view,.workspace,.grid-2 { grid-template-columns:1fr; }
  .sidebar { position:relative; top:0; min-height:auto; }
  .side-nav { grid-template-columns:repeat(4,1fr); }
  .nav-item { text-align:center; justify-content:center; }
  .topbar { display:grid; }
  .topbar h1 { font-size:42px; }
  .summary-row,.stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .login-hero { padding:12px; }
  .login-hero h1 { font-size:52px; }
  .date-card,.summary-row,.stats-grid { grid-template-columns:1fr; }
  .side-nav { grid-template-columns:repeat(2,1fr); }
}