/* Duescope / visual system v4 — cohesive, accessible dashboard and studio polish. */
:root {
  --ink: #151e2e;
  --muted: #768292;
  --muted-dark: #516073;
  --bg: #f7f8fa;
  --white: #fff;
  --line: #e5e9ef;
  --green: #151f2f;
  --green-light: #edf2fc;
  --lime: #c4ff70;
  --shadow: 0 12px 40px rgba(23,38,66,.035);
}
body { color:var(--ink);background:var(--bg);font-size:14px; }
.shell { grid-template-columns:258px minmax(0,1fr);max-width:none; }
.sidebar { background:#111b2a;color:#f3f6fa;border:0;padding:27px 16px 19px; }
.brand-block { padding:0 12px 30px; }
.brand-mark { background:#c4ff70;color:#13202a;border-radius:12px;width:43px;height:43px; }
.brand-words { color:#fff;font-size:23px;letter-spacing:-1.3px; }
.brand-dot { color:#c4ff70; }
.brand-words small { color:#8293a6;letter-spacing:1.55px;font-size:8px; }
.workspace-tag { background:#1b2839;border-color:#2b3b4e;color:#a3b3c3;margin:0 8px 34px;padding:12px;font-size:9px; }
.pulse-dot { background:#b6f57a;box-shadow:0 0 0 4px #3a5638; }
.workspace-free { background:#2d3f3f;color:#c4ff70;border-radius:6px; }
.nav-caption { color:#708398;letter-spacing:1.7px; }
.nav-link { color:#a7b2c2;min-height:45px;font-size:12px;font-weight:700;letter-spacing:.01em;border-radius:10px; }
.nav-link:hover { background:#202e41;color:#fff; }
.nav-link.active { background:#c4ff70;color:#132235;box-shadow:0 7px 15px #0b101b33; }
.nav-link.active .nav-count,.nav-link.active .nav-shortcut { color:#35432d; }
.nav-count,.nav-shortcut { color:#69839a; }
.side-tip { background:#1a293c;border-color:#304159;border-radius:16px;padding:21px; }
.side-tip-icon { color:#b3ef75; }
.side-tip b { color:#f2f6ff;font-size:13px; }
.side-tip p { color:#91a4b5; }
.side-tip a { color:#c4ff70; }
.sidebar-foot { color:#61768e; }
.topbar { height:76px;background:#fff;border-bottom:1px solid #edf0f3;padding:0 clamp(22px,3vw,54px); }
.crumb { color:#8694a2; }
.crumb strong { color:#1a293c; }
.top-actions { gap:12px; }
.search-trigger { border-color:#e8edf2;background:#f9fafc;color:#8997a6;min-width:190px;border-radius:11px; }
.search-trigger kbd { background:#eaf0f6;color:#6a7b8d; }
.top-add,.btn { background:#172336;border-color:#172336;border-radius:10px;font-weight:750;padding:11px 16px;letter-spacing:-.01em; }
.top-add:hover,.btn:hover { background:#293f5e;border-color:#293f5e; }
.btn.secondary { color:#253b53;background:#fff;border:1px solid #dfe6ef; }
.btn.secondary:hover { background:#f4f8fd; }
.btn.ghost { color:#5b6e83;background:#fff;border-color:#e5eaf1; }
.btn.ghost:hover { background:#f5f7fa; }
.avatar { background:#e7f6dc;color:#1a3733;box-shadow:0 0 0 1px #d5ead1; }
.page { max-width:1670px;padding:32px clamp(22px,3vw,54px) 56px; }
.eyebrow { color:#718ca6;font-size:9px;letter-spacing:1.5px;font-weight:850; }
.page-header h1,.premium-page-title h1 { color:#172336;font-weight:800;letter-spacing:-.055em; }
.page-header p { color:#7a8794; }
.panel,.studio-templates,.studio-editor,.studio-preview-panel,.studio-saved-panel,.project-card,.settings-card,.stat-card { border-color:#e8edf3;border-radius:16px;box-shadow:var(--shadow); }
.data-table thead { background:#f8fafc; }
.data-table th { color:#90a0b1;font-size:9px;letter-spacing:1.1px; }
.data-table td { border-top:1px solid #eff2f6;color:#354356; }
.cell-primary { color:#172a3f; }
.cell-sub { color:#8f9eae; }
.data-table tbody tr:hover { background:#f8faff; }
.mini-action { border:1px solid #dce7f2;color:#2a526f;font-weight:800;border-radius:8px; }
.mini-action:hover { background:#eef6ff; }
.panel-head h3,.studio-section-head h3 { color:#18283d; }
.panel-head p,.studio-section-head p { color:#8191a2; }
.badge.overdue { color:#ad4350;background:#fff0f1; }
.badge.due { color:#a96e32;background:#fff5e8; }
.badge.paid { color:#24765b;background:#e4f8ed; }
.badge.open { color:#34637f;background:#e9f4fa; }
.section-tabs .tab.active { color:#1e3b52;background:#eaf3fb;border-color:#cfdfef; }
.help-banner { background:#f1f6fa;border-color:#dce8f2;color:#4f7088; }
.help-banner b { color:#294e68; }
.field input,.field select,.field textarea { border-color:#dae2eb;color:#22384d; }
.field>label { color:#41576f; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#678aba;box-shadow:0 0 0 3px #eaf2ff; }
.letter-panel { background:#172638; }
.letter-actions .btn { background:#c4ff70;color:#172638;border-color:#c4ff70; }
.letter-actions .btn.secondary { background:#2b4158;border-color:#506277;color:#fff; }
.footer { background:#fff;border-top-color:#e8edf3;color:#8491a0; }

/* The new overview is deliberately action-first, with real user data only. */
.premium-page { display:grid;gap:23px; }
.premium-page-title { display:flex;justify-content:space-between;gap:20px;align-items:center; }
.premium-page-title h1 { font-size:clamp(34px,3.5vw,51px);line-height:1.1;margin:7px 0 9px; }
.premium-page-title h1 .period { color:#5283e2; }
.premium-page-title p { font-size:13px;color:#8390a0; }
.premium-page-title-actions { display:flex;flex-wrap:wrap;gap:9px; }
.premium-hero { min-height:300px;position:relative;overflow:hidden;border-radius:23px;background:radial-gradient(circle at 80% 40%,#2b4b68 0%,transparent 41%),linear-gradient(115deg,#101c2b 0%,#1b3049 100%);color:#fff;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;padding:39px clamp(25px,4vw,57px);box-shadow:0 24px 47px #233b5930; }
.premium-hero:before { content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#d1edff05 1px,transparent 1px),linear-gradient(90deg,#d1edff05 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to right,transparent,black); }
.premium-hero-copy { position:relative;z-index:1;max-width:650px; }
.premium-live-marker { display:flex;align-items:center;gap:9px;color:#b2d7a0;letter-spacing:2px;font-size:9px;font-weight:900;margin-bottom:18px; }
.premium-live-marker span { width:7px;height:7px;border-radius:50%;background:#c4ff70;box-shadow:0 0 0 5px #c4ff7026; }
.premium-hero h2 { font-size:clamp(29px,3.3vw,47px);line-height:1.13;max-width:550px;font-weight:800;letter-spacing:-.055em; }
.premium-hero h2 em { color:#c4ff70;font-style:normal; }
.premium-hero p { margin-top:17px;color:#b8c7d9;max-width:485px;font-size:13px;line-height:1.7; }
.premium-hero-actions { display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:25px; }
.premium-hero .btn { background:#c4ff70;color:#122338;border-color:#c4ff70; }
.premium-hero .btn:hover { background:#e3ffad;border-color:#e3ffad; }
.premium-hero .btn.soft { background:#ffffff15;color:#ecf7ff;border:1px solid #ffffff29; }
.premium-hero .btn.soft:hover { background:#ffffff25; }
.premium-hero-side { display:grid;place-items:center;position:relative;z-index:1;min-height:210px; }
.premium-orbit { height:205px;width:205px;border:1px solid #d1eeff30;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 31px #e5f5ff08,0 0 0 68px #b9e7ff05,0 0 0 105px #e5f5ff04; }
.premium-orbit:before { content:'';position:absolute;height:242px;width:242px;border:1px dashed #abc8db38;border-radius:50%;transform:rotate(-18deg); }
.premium-orbit-core { display:grid;place-items:center;background:#c4ff70;color:#10202f;font:900 68px/1 Manrope,sans-serif;letter-spacing:-.07em;height:117px;width:117px;border-radius:32px;transform:rotate(-9deg);box-shadow:0 15px 40px #0c142a58; }
.premium-orbit-core span { color:#4a88a6; }
.premium-orbit-note { position:absolute;bottom:-16px;background:#f1f8f2;color:#4c6170;font-size:9px;font-weight:900;letter-spacing:1px;border-radius:20px;padding:11px 16px;box-shadow:0 10px 24px #05152650; }
.premium-orbit-note span { color:#4d8e79;padding:0 5px; }
.premium-context { margin-top:-10px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#8795a3;font-size:11px;font-weight:650; }
.premium-context span { display:flex;align-items:center;gap:7px; }
.premium-context svg { width:15px;height:15px; }
.premium-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.premium-metric { background:#fff;border:1px solid #e8edf3;border-radius:17px;min-height:150px;padding:21px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden; }
.premium-metric:after { content:'';height:4px;position:absolute;left:0;right:0;bottom:0;background:#d9e6f3; }
.premium-metric:first-child:after { background:#5c8be0; }
.premium-metric.is-risk:after { background:#f0a4a2; }
.metric-line { display:flex;align-items:center;justify-content:space-between;gap:8px;color:#718397;font-size:12px;font-weight:750; }
.metric-symbol { display:grid;place-items:center;height:36px;width:36px;border-radius:11px;background:#edf4fc;color:#537db2; }
.metric-symbol svg { width:18px;height:18px; }
.premium-metric strong { display:block;font:800 clamp(22px,2vw,31px)/1.28 Manrope,sans-serif;letter-spacing:-.05em;color:#192b41;margin:12px 0 4px;white-space:nowrap; }
.premium-metric small { color:#9ba8b7;font-size:11px; }
.premium-section-head { display:flex;justify-content:space-between; }
.premium-section-head h2,.premium-ledger-head h2,.premium-capabilities h2 { font-size:clamp(19px,2.2vw,26px);letter-spacing:-.04em;margin-top:5px;color:#1c3049; }
.premium-section-head p,.premium-ledger-head p { color:#8a99a8;font-size:12px;margin-top:5px; }
.premium-focus-grid { display:grid;grid-template-columns:1.05fr .95fr;gap:17px;margin-top:-10px; }
.premium-focus-card { border:1px solid #e6ebf1;background:#fff;border-radius:18px;padding:26px;display:flex;flex-direction:column;min-height:295px;box-shadow:var(--shadow); }
.premium-focus-top { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.premium-focus-icon { height:42px;width:42px;background:#ebf3ff;color:#4975af;border-radius:13px;display:grid;place-items:center; }
.premium-focus-icon.purple { color:#7f69b4;background:#f1edff; }
.premium-focus-card h3 { color:#1a2c40;font-size:19px;letter-spacing:-.035em; }
.premium-focus-card p { font-size:12px;color:#8495a7;line-height:1.65;margin-top:8px;max-width:490px; }
.premium-focus-card p b { color:#2c425a; }
.premium-focus-callout { display:flex;align-items:center;gap:7px;background:#f7f9fd;color:#677e9b;font-size:11px;font-weight:750;padding:12px 13px;border-radius:9px;margin-top:18px;max-width:max-content; }
.premium-focus-callout svg { height:15px;width:15px; }
.premium-card-actions { display:flex;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:21px; }
.premium-commitments { margin-top:16px;display:grid;gap:7px; }
.premium-commitment { display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;border:1px solid #edf1f5;border-radius:9px;padding:8px 10px; }
.premium-commitment b { font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.premium-commitment small { font-size:10px;color:#9aa8b6; }
.commitment-date { font-size:10px;color:#507d73;background:#e6f5ee;border-radius:18px;padding:4px 9px;white-space:nowrap;font-weight:800; }
.commitment-date.late,.promise-chip.late { color:#b45158;background:#fff1f1; }
.premium-promise-empty { display:flex;align-items:center;gap:8px;color:#92a1ae;font-size:11px;padding:21px 0; }
.premium-promise-empty svg { width:18px;height:18px;color:#719d83; }
.premium-ledger { overflow:hidden; }
.premium-ledger-head { padding:25px 27px 18px;display:flex;justify-content:space-between;align-items:center;gap:17px; }
.premium-ledger .data-table td,.premium-promise-workspace .data-table td { padding:19px 23px; }
.promise-chip { display:inline-block;background:#edf4fc;color:#527ba3;font-size:10px;font-weight:800;padding:6px 10px;border-radius:8px;white-space:nowrap; }
.muted-dash { color:#aeb8c3;font-size:11px; }
.premium-capabilities { background:#fff;border:1px solid #e7edf3;border-radius:17px;padding:28px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:23px;align-items:start; }
.premium-capabilities>div:first-child p { color:#8d9baa;font-size:11px;margin-top:9px;max-width:270px; }
.premium-capability { border-left:1px solid #e9edf2;padding-left:20px; }
.premium-capability>span { display:inline-grid;place-items:center;background:#edf4fb;color:#4f7baf;height:35px;width:35px;border-radius:11px;margin-bottom:12px; }
.premium-capability svg { width:17px;height:17px; }
.premium-capability b { display:block;font-size:12px;color:#284058; }
.premium-capability p { color:#93a0ae;font-size:11px;margin-top:5px;line-height:1.6; }
.premium-trust-note { font-size:10px;color:#a0adba;line-height:1.7; }
.premium-invoices-intro { margin-bottom:24px;padding:26px 32px;border-radius:16px;color:#fff;background:linear-gradient(115deg,#172638,#284562); }
.premium-invoices-intro .eyebrow { color:#b5d3fc; }
.premium-invoices-intro h2 { font-size:clamp(20px,2.2vw,29px);letter-spacing:-.04em;margin:8px 0; }
.premium-invoices-intro p { color:#c0ceda;font-size:12px;max-width:620px; }
.premium-promise-workspace { overflow:hidden;margin-top:25px; }
.premium-blank-commitments { padding:35px;color:#8a98a7;font-size:12px; }
.promise-actions { display:flex;gap:5px;align-items:center;flex-wrap:wrap; }
.promise-actions .btn { padding:8px 11px;font-size:10px; }

/* Invoice Studio: clear business choice, predictable templates, refined editing. */
.studio-start { display:grid;grid-template-columns:1fr minmax(250px,.85fr);gap:22px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:17px;padding:24px 28px;margin-bottom:17px; }
.studio-start h3 { font-size:22px;color:#182c42;letter-spacing:-.04em;margin:6px 0; }
.studio-start>div:first-child p { font-size:12px;color:#8392a2;max-width:385px; }
.studio-start .studio-business-choice { margin:0;background:#f6f9fc;border-color:#e6edf4; }
.studio-business-choice label { color:#4c6c88; }
.studio-business-choice select { color:#1e405d;border-color:#d9e4f0; }
.studio-business-choice p { color:#8194a5; }
.studio-hero { background:linear-gradient(115deg,#eaf1fb,#f9fbfd);border-color:#e1eaf4; }
.studio-hero h1 { color:#203650; }
.studio-hero h1 em { color:#4e7bb6; }
.studio-hero p { color:#788ea3; }
.studio-hero-card { border-color:#e2e9f2; }
.studio-view-switch button.active { background:#e8f0fa;color:#27567f; }
.studio-templates { padding:27px; }
.studio-section-head h3 { font-size:18px; }
.studio-template-grid { grid-template-columns:repeat(6,minmax(0,1fr));gap:13px; }
.template-tile { border-color:#e8edf3;border-radius:12px;padding:11px; }
.template-tile.selected { border-color:#5785c1;background:#f4f8ff;box-shadow:0 6px 22px #2d5c9c18; }
.template-tile.selected:after { background:#2f64a5; }
.template-mini { height:100px; }
.template-tile strong { font-size:11px;color:#29445d; }
.studio-filters button.active { background:#e9f2fd;color:#345f91;border-color:#cddff3; }
.studio-steps button.active { background:#e6f0fd;color:#2d619d; }
.studio-preview-panel { top:93px; }
.studio-paper-wrap { background:#eef2f7; }
.studio-field>span { color:#526d88; }
.studio-field input,.studio-field textarea,.studio-field select { background:#fbfcfe;border-color:#e1e8ef;color:#243e58; }
.studio-field input:focus,.studio-field textarea:focus,.studio-field select:focus { border-color:#7b9dce;box-shadow:0 0 0 3px #ebf3ff; }
.voice-copilot { background:linear-gradient(110deg,#f5f9fe,#fff);border-color:#dce7f3;box-shadow:0 10px 30px #234f7a0d; }
.voice-glyph { background:linear-gradient(140deg,#2d5c90,#68a9dc); }
.voice-heading h3 { color:#203b56; }
.voice-eyebrow { color:#6283a4; }
.voice-mic { background:#2b608f;border-color:#2b608f; }
.voice-input-row button { background:#e5effb;color:#376792; }
.voice-examples button:hover { border-color:#9ebcdb;color:#335f89; }
.voice-device-hint { margin-top:10px;padding:11px 13px;border:1px solid #d8e6f4;border-radius:10px;background:#f0f6fc;color:#395a79;font-size:11px;line-height:1.6; }
.voice-mic { transition:background .15s,transform .15s; }
.voice-mic:not(:disabled):hover { background:#234f75;transform:translateY(-1px); }
.voice-ai-row { color:#698097; }
.voice-ai-row span { font-size:11px;line-height:1.6; }

@media(max-width:1260px){
  .premium-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .premium-capabilities { grid-template-columns:1fr 1fr; }
  .premium-capabilities>div:nth-child(2) { border-left:0;padding-left:0; }
  .premium-hero { grid-template-columns:1.4fr .6fr; }
  .studio-template-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:800px){
  .shell { display:block; }
  .sidebar { width:272px; }
  .topbar { height:68px; }
  .premium-page-title { align-items:flex-start;flex-direction:column; }
  .premium-hero { padding:32px;grid-template-columns:1fr; }
  .premium-hero-side { display:none; }
  .premium-focus-grid { grid-template-columns:1fr; }
  .premium-capabilities { grid-template-columns:1fr 1fr; }
  .premium-capability { padding-left:0;border:0; }
  .studio-start { grid-template-columns:1fr; }
}
@media(max-width:600px){
  .page { padding:21px 14px 38px; }
  .premium-page { gap:17px; }
  .premium-page-title h1 { font-size:35px; }
  .premium-page-title-actions { width:100%; }
  .premium-page-title-actions .btn { flex:1; }
  .premium-hero { padding:29px 23px;border-radius:18px;min-height:auto; }
  .premium-hero h2 { font-size:33px; }
  .premium-hero p { font-size:12px; }
  .premium-hero-actions .btn { flex:1;white-space:normal;text-align:center; }
  .premium-context { font-size:10px;margin-top:-4px; }
  .premium-metrics { gap:9px; }
  .premium-metric { padding:17px 15px;min-height:125px;border-radius:13px; }
  .metric-line { font-size:10px; }
  .metric-symbol { width:28px;height:28px; }
  .metric-symbol svg { width:15px;height:15px; }
  .premium-metric strong { font-size:22px; }
  .premium-metric small { font-size:9px; }
  .premium-focus-card { padding:20px;min-height:255px; }
  .premium-focus-card h3 { font-size:18px; }
  .premium-card-actions .btn { flex:1; }
  .premium-ledger-head { padding:18px;align-items:flex-start;flex-direction:column; }
  .premium-ledger .data-table td { padding:15px 13px; }
  .premium-capabilities { grid-template-columns:1fr;gap:20px;padding:20px; }
  .premium-invoices-intro { padding:23px 21px; }
  .studio-start { padding:20px; }
  .studio-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .template-mini { height:78px; }
  .studio-preview-panel { position:static; }
  .premium-commitment { grid-template-columns:minmax(0,1fr) auto; }
  .premium-commitment .mini-action { grid-column:1/-1;justify-self:start; }
}
@media(max-width:420px){.studio-template-grid{grid-template-columns:repeat(2,1fr)} }
@media print { .premium-page,.premium-invoices-intro,.premium-promise-workspace { display:none!important; } }