:root {
  --bg: #f4f2ec; --surface: #ffffff; --ink: #19292a; --muted: #67766f; --line: #e2ded2;
  --brand: #0f4c4a; --brand-2: #176b67; --brand-ink: #ffffff; --side: #0c3a38; --side-ink: #d5e6e3;
  --accent: #e3a02f; --ok: #2e8b57; --err: #c0392b;
  --hot: #d2453b; --warm: #d98b12; --cold: #2f7fc1;
  --hot-bg: #fbe9e7; --warm-bg: #fdf1dc; --cold-bg: #e5f0fa;
  --radius: 14px; --shadow: 0 1px 2px rgba(20,40,40,.06), 0 8px 24px rgba(20,40,40,.05);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1919; --surface: #172525; --ink: #e6eeec; --muted: #90a39e; --line: #2a3d3b;
    --brand: #2a9d8f; --brand-2: #35b3a4; --brand-ink: #06201d; --side: #0a1f1e; --side-ink: #c4d8d4;
    --hot-bg: #3a1f1d; --warm-bg: #3a2c12; --cold-bg: #172e42; --shadow: none;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 1.08rem; } h3 { font-size: .95rem; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
small, .small-note { font-size: .82rem; }
.muted { color: var(--muted); } .strong { font-weight: 650; } .grow { flex: 1; }
.ic { width: 20px; height: 20px; flex: none; }


.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 1.15rem; padding: 4px 8px; }
.brand:hover { text-decoration: none; }
.logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #2b1d00; font-weight: 800; }
.logo.big { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 16px; margin: 0 auto 10px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a, .side-foot a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--side-ink); font-weight: 500; }
.side nav a:hover, .side-foot a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.side nav a.on { background: rgba(255,255,255,.13); color: #fff; }
.pill { margin-left: auto; background: var(--accent); color: #2b1d00; font-size: .72rem; border-radius: 99px; padding: 1px 8px; }
.side-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.who { padding: 0 12px 6px; font-size: .85rem; opacity: .75; }
.main { padding: 28px clamp(16px, 3vw, 40px) 60px; max-width: 1180px; width: 100%; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.top h1 { font-size: 1.7rem; }
.top-actions { display: flex; gap: 8px; }
.lead-in { margin: -6px 0 16px; color: var(--muted); }


.tabbar { display: none; }
.sheet { display: none; }
@media (max-width: 860px) {
  .shell { display: block; }
  .side { display: none; }
  .main { padding: 18px 16px 110px; }
  .top h1 { font-size: 1.4rem; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,.06); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .7rem; border-radius: 10px; cursor: pointer; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar .on { color: var(--brand-2); font-weight: 650; }
  .sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10,25,25,.5); }
  .sheet-body { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 20px 20px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sheet-body a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--bg); color: var(--ink); font-size: .8rem; text-align: center; }
  .sheet-body a:hover { text-decoration: none; }
}


.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h2 small { font-weight: 500; margin-left: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 14px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row form { margin: 0; }
.section-h { font-size: 1.05rem; margin: 22px 0 10px; }
.hint { color: var(--muted); font-size: .88rem; margin: 0; }
.empty { color: var(--muted); padding: 14px 4px; margin: 0; }
.summary-line { margin: 4px 0 12px; }
.danger-zone { margin-top: 24px; text-align: center; }
.callout { background: transparent; border-left: 4px solid var(--warm); padding: 12px 14px; border-radius: 0; margin-bottom: 16px; }
.reminder-line { margin: 0 0 12px; }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); padding: 11px 18px; border-radius: 11px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.btn:hover { background: var(--brand-2); border-color: var(--brand-2); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--brand-2); border-color: var(--line); }
.btn.ghost:hover { background: rgba(23,107,103,.08); border-color: var(--brand-2); }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.danger.ghost { background: transparent; color: var(--err); border-color: var(--line); }
.btn.small { padding: 6px 12px; min-height: 36px; font-size: .88rem; }
.btn.block { width: 100%; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; padding: 0; }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field.inline { display: flex; align-items: center; gap: 8px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=password], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; border-color: transparent; }
.readout { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
.check input { width: 18px; height: 18px; }
.line-row { display: flex; gap: 12px; align-items: center; }
.add-line { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

details.form-card > summary, details.policy > summary, details.quick > summary, details.report-block > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details.form-card > summary { color: var(--brand-2); }
details.form-card[open] > summary { margin-bottom: 14px; }
details.card.form-card > summary { padding: 2px 0; }
details.form-card:not(.card) { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
details.policy { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--bg); }
details.policy[open] > summary { margin-bottom: 12px; }
details.policy form + form { margin-top: 10px; }
details.quick { margin-top: 10px; }
details.quick > summary { font-size: .88rem; color: var(--brand-2); }
details.quick form { margin-top: 12px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; font-size: .92rem; }
.meta-grid small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; }


.flash { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; background: #e4f3ea; border: 1px solid #b9dcc7; color: #17482c; }
.flash.err { background: #fbe9e7; border-color: #f0c2bc; color: #7c231b; }
@media (prefers-color-scheme: dark) { .flash { background: #163325; border-color: #24533a; color: #bfe6cf; } .flash.err { background: #3a1f1d; border-color: #6b312c; color: #f3c7c2; } }


.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.stat-n { font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-l { color: var(--muted); font-size: .86rem; line-height: 1.3; } .stat-l small { color: var(--ink); font-weight: 600; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.heat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.heat-tile { display: flex; flex-direction: column; padding: 12px 16px; border-radius: var(--radius); color: var(--ink); border: 1px solid transparent; }
.heat-tile:hover { text-decoration: none; filter: brightness(.97); }
.heat-tile b { font-size: 1.6rem; font-variant-numeric: tabular-nums; } .heat-tile span { font-size: .82rem; font-weight: 600; }
.ht-hot { background: var(--hot-bg); border-color: var(--hot); } .ht-warm { background: var(--warm-bg); border-color: var(--warm); } .ht-cold { background: var(--cold-bg); border-color: var(--cold); }


.heat { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; color: #fff; vertical-align: middle; }
.heat-hot { background: var(--hot); } .heat-warm { background: var(--warm); } .heat-cold { background: var(--cold); }
.edge-hot { border-left: 4px solid var(--hot) !important; } .edge-warm { border-left: 4px solid var(--warm) !important; } .edge-cold { border-left: 4px solid var(--cold) !important; }
.heat-pick { display: flex; gap: 8px; }
.hp { flex: 1; cursor: pointer; }
.hp input { position: absolute; opacity: 0; pointer-events: none; }
.hp span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; font-weight: 700; font-size: .86rem; border: 2px solid var(--line); color: var(--muted); }
.hp-hot input:checked + span { background: var(--hot); border-color: var(--hot); color: #fff; }
.hp-warm input:checked + span { background: var(--warm); border-color: var(--warm); color: #fff; }
.hp-cold input:checked + span { background: var(--cold); border-color: var(--cold); color: #fff; }
.hp input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; }


.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.items.compact .item { background: transparent; }
.item-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.item-main { min-width: 0; flex: 1 1 200px; }
.item-title { font-weight: 650; color: var(--ink); } .item-title:hover { color: var(--brand-2); }
.item-sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.item-note { font-size: .88rem; margin-top: 4px; }
.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 520px) { .item-side { flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; } }
.contact { display: inline-flex; gap: 6px; }
.chip-btn { font-size: .78rem; font-weight: 650; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--brand-2); background: var(--surface); }
.chip-btn:hover { text-decoration: none; background: rgba(23,107,103,.1); }
.chip-btn.wa { color: #1f8f4e; }
.due { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.due-over { background: var(--hot-bg); color: var(--hot); } .due-today { background: var(--warm-bg); color: var(--warm); }
.due-soon { background: var(--cold-bg); color: var(--cold); } .due-later { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; vertical-align: middle; }
.tag-birthday { background: #fde7f1; color: #a2306a; } .tag-bonus { background: #e1f3e8; color: #1d6b3d; }
.tag-maturity { background: #fdf1dc; color: #94600a; } .tag-renewal { background: #e5f0fa; color: #1f5e92; }
@media (prefers-color-scheme: dark) { .tag-birthday { background: #3d1d2d; color: #f0a8cb; } .tag-bonus { background: #17331f; color: #8fd3a8; } .tag-maturity { background: #3a2c12; color: #efc27a; } .tag-renewal { background: #172e42; color: #8bc0ea; } }
.st { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.st-active, .st-closed { color: var(--ok); } .st-lost, .st-lapsed, .st-cancelled { color: var(--err); }


.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-form { align-items: flex-end; }
.chip { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 550; }
.chip:hover { text-decoration: none; border-color: var(--brand-2); }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip b { margin-left: 4px; opacity: .8; }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.inline-sel { margin: 0; } .inline-sel select { min-height: 38px; padding: 6px 10px; width: auto; border-radius: 99px; }
.searchbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; margin-bottom: 14px; color: var(--muted); }
.searchbar input { border: 0; background: transparent; outline: none !important; padding-left: 0; }


.tbl, .matrix { width: 100%; border-collapse: collapse; }
.tbl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--bg); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(23,107,103,.04); }
.notes-cell { color: var(--muted); font-size: .9rem; max-width: 320px; }
@media (max-width: 760px) {
  .tbl, .tbl tbody { display: block; border: 0; background: none; box-shadow: none; }
  .tbl thead { display: none; }
  .tbl tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 8px 14px; }
  .tbl td { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border: 0; text-align: right; }
  .tbl td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; text-align: left; flex: none; padding-top: 2px; }
  .notes-cell { max-width: none; }
}
.scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.matrix th, .matrix td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); font-weight: 600; }
.matrix thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.matrix .zero { color: var(--muted); opacity: .45; }
.matrix .tot, .matrix tfoot td, .matrix tfoot th { font-weight: 700; }
.matrix tfoot th, .matrix tfoot td { border-top: 2px solid var(--line); border-bottom: 0; }
.matrix .now { background: rgba(227,160,47,.14); }
.matrix tr.now th, .matrix tr.now td { background: rgba(227,160,47,.14); }
.barcol { min-width: 150px; width: 28%; } .bars { display: grid; gap: 2px; }
.bar { display: block; height: 6px; border-radius: 4px; min-width: 2px; }
.k-leads { background: var(--cold); } .k-fu { background: var(--accent); } .k-closed { background: var(--ok); }
.legend { font-size: .8rem; color: var(--muted); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.period-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.period-label { font-weight: 700; text-align: center; }
.report-block > summary { padding: 2px 0; } .report-block[open] > summary { margin-bottom: 8px; }


.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.tl-date { color: var(--muted); font-size: .85rem; font-weight: 600; } .tl-body p { margin: 0 0 4px; }


body.auth { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow); text-align: center; }
.auth-card h1 { font-size: 1.5rem; } .auth-card .stack { text-align: left; margin-top: 18px; } .auth-card p { margin: 6px 0 0; }

@media print {
  .side, .tabbar, .sheet, .top-actions, .filters, .period-bar a, details > summary + * ~ form { display: none !important; }
  body { background: #fff; color: #000; } .shell { display: block; } .main { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; } details.report-block { display: block; } details.report-block > * { display: block !important; }
}

.module-access{border:1px solid var(--line,#d9e2e1);border-radius:12px;padding:14px;margin:12px 0}.module-access legend{font-weight:700;padding:0 6px}.check{display:flex;align-items:center;gap:8px;padding:6px 0}.check input{width:auto}


:root {
  color-scheme: light dark;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --ink: #172b3a;
  --muted: #718096;
  --line: #e5eaf1;
  --brand: #246bce;
  --brand-2: #1858b5;
  --brand-ink: #ffffff;
  --side: #122238;
  --side-ink: #c8d5e5;
  --accent: #f4b544;
  --ok: #15966a;
  --err: #c83e4d;
  --hot: #d84b55;
  --warm: #d88a18;
  --cold: #397bd7;
  --hot-bg: #fff0f0;
  --warm-bg: #fff6e6;
  --cold-bg: #edf5ff;
  --radius: 16px;
  --shadow: 0 2px 5px rgba(24, 45, 75, .035), 0 12px 34px rgba(24, 45, 75, .055);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1420; --surface: #131f2e; --ink: #e7edf5; --muted: #9aabc0;
    --line: #263649; --brand: #5797f0; --brand-2: #80b1ff; --brand-ink: #071629;
    --side: #091321; --side-ink: #c8d5e5; --accent: #f4b544;
    --hot-bg: #3a2028; --warm-bg: #392d1c; --cold-bg: #192e49;
    --shadow: 0 10px 30px rgba(0,0,0,.16);
  }
}
body { letter-spacing: -.005em; }
a { transition: color .16s ease, background .16s ease, border-color .16s ease; }
.shell { grid-template-columns: 258px minmax(0, 1fr); }
.side {
  padding: 24px 15px 18px; gap: 24px; border-right: 1px solid rgba(255,255,255,.045);
  box-shadow: 8px 0 30px rgba(10,25,45,.045);
}
.brand { padding: 3px 9px 12px; font-size: 1.12rem; letter-spacing: -.025em; }
.logo { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg,#ffcf70,#f3aa2f); box-shadow: 0 5px 14px rgba(244,181,68,.18); }
.side nav { gap: 5px; }
.side nav a, .side-foot a { min-height: 44px; padding: 10px 13px; border-radius: 11px; gap: 12px; font-size: .92rem; color: var(--side-ink); }
.side nav a .ic, .side-foot a .ic { opacity: .84; }
.side nav a:hover, .side-foot a:hover { background: rgba(255,255,255,.085); color: #fff; }
.side nav a.on { background: linear-gradient(100deg,rgba(68,132,220,.30),rgba(68,132,220,.12)); color: #fff; box-shadow: inset 3px 0 #70a9ff; }
.side nav a.on .ic { opacity: 1; }
.side-foot { border-top-color: rgba(255,255,255,.1); padding-top: 16px; }
.who { color: #9eb0c6; font-size: .8rem; }
.main { max-width: 1500px; padding: 32px clamp(18px,3vw,46px) 64px; }
.top { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.top h1 { font-size: clamp(1.55rem,2vw,2rem); font-weight: 750; letter-spacing: -.045em; }
.lead-in { margin: -10px 0 24px; color: var(--muted); font-size: .97rem; }
.card { border-color: var(--line); border-radius: 18px; padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.card-h { margin-bottom: 16px; }
.card-h h2 { font-size: 1.02rem; font-weight: 750; letter-spacing: -.02em; }
.card-h a { font-size: .88rem; font-weight: 650; }
.two { gap: 20px; }
.stats { gap: 15px; margin-bottom: 18px; }
.stat { position: relative; overflow: hidden; min-height: 124px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.stat:after { content: ''; position: absolute; right: -18px; top: -23px; width: 78px; height: 78px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 9%, transparent); }
.stat-n { font-size: clamp(1.7rem,2.4vw,2.25rem); font-weight: 800; letter-spacing: -.06em; line-height: 1.05; color: var(--ink); }
.stat-l { color: var(--muted); font-size: .86rem; font-weight: 600; }
.stat-l small { font-size: .78rem; font-weight: 500; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.btn { border-radius: 11px; padding: 10px 16px; font-size: .91rem; font-weight: 700; box-shadow: 0 3px 8px rgba(36,107,206,.12); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(36,107,206,.17); }
.btn.ghost { box-shadow: none; background: var(--surface); }
.btn.ghost:hover { background: var(--cold-bg); }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=password], input[type=search], select, textarea { border-radius: 11px; background: var(--surface); border-color: var(--line); transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.field > span { font-size: .79rem; letter-spacing: .015em; }
table { border-collapse: separate; border-spacing: 0; }
th { color: var(--muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; }
td, th { border-bottom-color: var(--line); }
tr:hover td { background: color-mix(in srgb, var(--brand) 3%, var(--surface)); }
.items { gap: 0; }
.item { padding: 15px 0; border-color: var(--line); }
.item-title { font-weight: 750; letter-spacing: -.015em; }
.item-sub { color: var(--muted); font-size: .83rem; margin-top: 3px; }
.item-note { font-size: .86rem; }
.chip-btn { border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: .78rem; font-weight: 700; }
.chip-btn:hover { background: var(--cold-bg); text-decoration: none; }
.heat-tile { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 3px 10px rgba(20,40,60,.025); transition: transform .15s ease, box-shadow .15s ease; }
.heat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.flash { border-radius: 12px; padding: 13px 16px; }
.auth-card { border-radius: 22px; padding: 34px 28px; box-shadow: 0 20px 70px rgba(24,45,75,.12); }
.auth-card .logo.big { background: linear-gradient(145deg,#ffcf70,#f3aa2f); }
.pill { font-weight: 800; }
@media (max-width: 860px) {
  .shell { display: block; }
  .side { display: none; }
  .main { padding: 20px 15px calc(100px + env(safe-area-inset-bottom)); }
  .top { align-items: flex-start; padding-bottom: 15px; margin-bottom: 21px; }
  .top h1 { font-size: 1.48rem; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .card { padding: 17px; border-radius: 15px; }
  .stats { gap: 10px; }
  .stat { min-height: 108px; padding: 16px; border-radius: 14px; }
  .quick-actions .btn { flex: 1 1 calc(50% - 8px); }
  .tabbar { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top-color: var(--line); }
  .tabbar .on { background: var(--cold-bg); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }


:root{--bg:#f2f5fa;--surface:#fff;--ink:#20283c;--muted:#8490a5;--line:#e7ebf2;--brand:#4459e8;--brand-2:#354bd3;--brand-ink:#fff;--side:#172d50;--side-ink:#c8d4e8;--accent:#4459e8;--radius:11px;--shadow:0 2px 10px rgba(25,45,82,.045)}
@media(prefers-color-scheme:dark){:root{--bg:#101827;--surface:#182337;--ink:#e8eef9;--muted:#9ba9bf;--line:#2a3850;--brand:#7185ff;--brand-2:#8b9aff;--brand-ink:#101827;--side:#0c1d37;--side-ink:#d2def0;--accent:#7185ff;--shadow:none}}
body{background:var(--bg);font-size:14px;color:var(--ink)}
.shell{grid-template-columns:220px minmax(0,1fr);background:var(--bg)}
.side{background:var(--side);padding:22px 13px 16px;gap:25px;border-radius:0;box-shadow:none}
.brand{padding:3px 8px 18px;font-size:1.02rem;letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.09)}
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#28d5d7,#4b5ee8);color:white;font-size:.9rem}
.side nav{gap:5px}.side nav a,.side-foot a{min-height:40px;padding:10px 12px;border-radius:8px;font-size:.9rem;color:#d0d9e9;gap:11px}
.side nav a .ic,.side-foot a .ic{width:17px;height:17px;opacity:.9}.side nav a.on{background:#293f60;color:#fff;box-shadow:inset 3px 0 #6178ff}.side nav a:hover,.side-foot a:hover{background:rgba(255,255,255,.08)}
.side-foot{border-top-color:rgba(255,255,255,.1)}.who{font-size:.8rem;color:#aabbd4}
.main{max-width:none;padding:0;min-width:0;width:100%}
.top{height:70px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 clamp(20px,3vw,38px);margin:0;position:relative;z-index:3;gap:22px}
.top h1{display:none}.top-brand-mobile{display:none}.global-search{display:flex;align-items:center;gap:10px;width:min(360px,45%);background:var(--bg);border:1px solid #edf0f5;border-radius:8px;padding:0 12px;color:#a6afbf;height:36px}.global-search .ic{width:16px;height:16px}.global-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;min-height:0!important;height:32px;font-size:.82rem;color:var(--ink);outline:none!important}.global-search input::placeholder{color:#a6afbf}
.top-actions{align-items:center;gap:9px;margin-left:auto}.icon-action,.menu-action{width:31px;height:31px;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);font-weight:700}.icon-action .ic,.menu-action .ic{width:15px;height:15px}.top-add{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#4459e8;color:#fff}.top-add .ic{width:16px;height:16px}.top-add:hover{background:#354bd3;text-decoration:none}.menu-action{border-radius:7px;background:transparent}
.page-content{padding:22px clamp(20px,3vw,38px) 42px;max-width:1600px;margin:0 auto}.page-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}.page-heading h1{font-size:1.35rem;font-weight:700;letter-spacing:-.035em}.page-date{font-size:.78rem;color:var(--muted)}.lead-in{margin:0 0 20px;color:var(--muted);font-size:.86rem}.dashboard-greeting{margin-bottom:20px}.dashboard-greeting span{color:var(--muted)}
.quick-actions{margin-bottom:18px}.btn{border-radius:8px;font-size:.86rem;padding:9px 14px;min-height:38px}.btn.ghost{background:var(--surface)}
.dashboard-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.metric-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:17px 18px 13px;min-height:143px;box-shadow:var(--shadow)}.metric-top{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--muted)}.metric-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#eef0ff;color:#5868e9}.metric-icon .ic{width:16px;height:16px}.metric-value{font-size:1.65rem;line-height:1.2;font-weight:750;letter-spacing:-.04em;margin:10px 0 7px}.metric-foot{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:6px;position:relative;z-index:1}.metric-dot{width:6px;height:6px;border-radius:50%;background:#52c7b8}.metric-coral .metric-value{color:#f07868}.metric-purple .metric-value{color:#9b6bd3}.metric-blue{background:#37c6eb;border-color:#37c6eb;color:white}.metric-blue .metric-top,.metric-blue .metric-foot{color:rgba(255,255,255,.82)}.metric-blue .metric-value{color:#fff}.metric-blue .metric-icon{background:rgba(255,255,255,.2);color:white}.metric-blue .metric-dot{background:#fff}.spark{position:absolute;left:0;right:0;bottom:0;height:42px;opacity:.7;pointer-events:none}.spark svg{width:100%;height:100%;overflow:visible}.spark path{fill:none;stroke-width:2;stroke:currentColor;opacity:.65}.spark-coral{color:#f07868;background:linear-gradient(0deg,rgba(240,120,104,.12),transparent)}.spark-purple{color:#a675d8;background:linear-gradient(0deg,rgba(166,117,216,.13),transparent)}.spark-blue{color:#fff;background:linear-gradient(0deg,rgba(255,255,255,.12),transparent)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:stretch}.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:17px 18px;min-width:0;box-shadow:var(--shadow)}.dash-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:14px}.dash-card-head h2{font-size:.9rem;font-weight:700;letter-spacing:-.01em}.dash-card-head p{margin:4px 0 0;color:var(--muted);font-size:.73rem}.card-more{font-size:1.15rem;line-height:1;color:var(--muted);letter-spacing:2px}.period-pill{font-size:.7rem;border:1px solid var(--line);border-radius:6px;padding:5px 8px;color:var(--muted)}
.source-chart{min-height:176px;display:flex;align-items:center;justify-content:center;gap:30px;padding:4px 0 0}.donut-chart{width:138px;height:138px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#fa7b6b 0 33%,#f8c65e 33% 66%,#6d9df5 66% 100%);position:relative}.donut-chart:after{content:"";position:absolute;inset:20px;border-radius:50%;background:var(--surface)}.donut-hole{z-index:1;display:flex;flex-direction:column;align-items:center}.donut-hole strong{font-size:1.35rem}.donut-hole span{font-size:.68rem;color:var(--muted)}.chart-legend{display:grid;gap:13px;min-width:130px}.chart-legend>div{display:grid;grid-template-columns:9px 1fr auto;gap:8px;align-items:center;font-size:.76rem;color:var(--muted)}.chart-legend b{font-weight:650;color:var(--ink)}.chart-legend i,.stage-foot i,.chart-legend.inline i{display:inline-block;width:8px;height:8px;border-radius:2px}.legend-hot{background:#fa7b6b}.legend-warm{background:#f8c65e}.legend-cold{background:#6d9df5}.legend-blue{background:#48c9e8}.legend-coral{background:#fa7b6b}
.stage-bars{display:grid;gap:20px;padding:10px 0 12px}.stage-label{display:flex;justify-content:space-between;font-size:.76rem;margin-bottom:7px}.stage-label span{color:var(--muted)}.stage-label b{font-weight:650}.stage-track{height:10px;border-radius:20px;background:var(--bg);overflow:hidden}.stage-fill{height:100%;display:block;border-radius:20px}.stage-fill.hot{background:#fa7b6b}.stage-fill.warm{background:#f8c65e}.stage-fill.cold{background:#63cde9}.stage-foot{display:flex;gap:17px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px;font-size:.69rem;color:var(--muted)}.stage-foot span{display:flex;align-items:center;gap:6px}
.activity-chart{display:flex;gap:12px;height:148px;padding:2px 0 0}.y-labels{display:flex;flex-direction:column;justify-content:space-between;font-size:.65rem;color:var(--muted);padding:5px 0 23px}.activity-plot{position:relative;flex:1;min-width:0}.chart-gridlines{position:absolute;inset:4px 0 24px;display:flex;flex-direction:column;justify-content:space-between}.chart-gridlines i{border-top:1px solid var(--line);width:100%}.activity-plot svg{position:absolute;inset:4px 0 23px;width:100%;height:calc(100% - 27px);overflow:visible}.activity-plot svg path{fill:none;stroke-width:2.3;vector-effect:non-scaling-stroke}.line-a{stroke:#48c9e8}.line-b{stroke:#fa9c8f}.x-labels{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;font-size:.63rem;color:var(--muted)}.chart-legend.inline{display:flex;gap:17px;flex-wrap:wrap;margin-top:10px}.chart-legend.inline span{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted)}.chart-legend.inline b{color:var(--ink)}.text-link{font-size:.76rem;font-weight:600;color:var(--brand-2)}.chart-empty{min-height:155px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;color:var(--muted);font-size:.78rem}.chart-empty strong{color:var(--ink);font-size:.86rem}.empty-check{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e2f7ee;color:#26a477}.empty-check .ic{width:17px;height:17px}.dashboard-items{gap:8px}.dashboard-items .item{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 0;background:transparent}.dashboard-items .item:last-child{border-bottom:0}.dashboard-items .item-side{font-size:.7rem}.dashboard-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action-grid a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);min-width:0}.action-grid a:hover{background:var(--bg);text-decoration:none;border-color:#cbd3f7}.action-grid a>.ic{width:19px;height:19px;color:var(--brand-2);flex:none}.action-grid span{display:grid;gap:2px;min-width:0}.action-grid b{font-size:.77rem}.action-grid small{font-size:.67rem;color:var(--muted)}
@media(max-width:1050px){.shell{grid-template-columns:200px minmax(0,1fr)}.source-chart{gap:18px}.donut-chart{width:118px;height:118px}.donut-chart:after{inset:17px}}
@media(max-width:860px){.shell{display:block}.side{display:none}.main{padding:0}.top{height:60px;padding:0 16px}.top-brand-mobile{display:flex;align-items:center;gap:8px;font-size:.9rem}.top-brand-mobile .logo{width:28px;height:28px}.global-search{width:auto;flex:1;max-width:260px}.top-actions{gap:5px}.icon-action:first-child,.menu-action{display:none}.page-content{padding:18px 14px 100px}.page-heading h1{font-size:1.2rem}.dashboard-metrics{gap:10px}.metric-card{padding:13px;min-height:132px}.metric-value{font-size:1.45rem}.dashboard-grid,.dashboard-bottom-grid{gap:12px}.tabbar{background:var(--surface)}}
@media(max-width:620px){.global-search{max-width:none;width:auto;flex:1}.global-search input{width:100%;font-size:.75rem}.top-actions{gap:4px}.top-add{width:30px;height:30px}.dashboard-metrics{grid-template-columns:1fr 1fr}.metric-card:last-child{grid-column:1/-1}.dashboard-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.source-chart{justify-content:space-evenly;gap:14px}.donut-chart{width:120px;height:120px}.donut-chart:after{inset:17px}.chart-legend{min-width:125px}.stage-bars{gap:16px}.dash-card{padding:14px}.action-grid{gap:8px}.action-grid a{padding:10px}.page-date{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


:root{color-scheme:light;--bg:#f4f7fb;--surface:#fff;--ink:#252b3b;--muted:#8993a5;--line:#e8edf4;--brand:#465be8;--brand-2:#344bd6;--brand-ink:#fff;--side:#172d50;--side-ink:#d5dfef;--accent:#465be8;--radius:9px;--shadow:0 1px 5px rgba(22,39,69,.035)}
@media(prefers-color-scheme:dark){:root{color-scheme:light;--bg:#f4f7fb;--surface:#fff;--ink:#252b3b;--muted:#8993a5;--line:#e8edf4;--brand:#465be8;--brand-2:#344bd6;--brand-ink:#fff;--side:#172d50;--side-ink:#d5dfef;--accent:#465be8;--shadow:0 1px 5px rgba(22,39,69,.035)}}
html{min-height:100%;background:#424958}
body.app-page{background:#424958;color:#252b3b;min-height:100vh;padding:5.2vh 0;font-size:13px}
.app-page .shell{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:66px minmax(0,1fr);width:min(88vw,1500px);min-height:83vh;margin:0 auto;background:#f4f7fb;border-radius:27px;overflow:hidden;box-shadow:0 18px 65px rgba(10,19,35,.16)}
.app-page .side{grid-column:1;grid-row:2;position:relative;top:auto;height:auto;min-height:0;background:#172d50;padding:24px 13px 18px;gap:18px;border-radius:0 24px 0 0;box-shadow:none}
.app-page .side>.brand{display:none}
.app-page .side nav{gap:5px}
.app-page .side nav a,.app-page .side-foot a{min-height:39px;padding:9px 12px;border-radius:8px;font-size:.84rem;color:#d1dced;gap:11px}
.app-page .side nav a .ic,.app-page .side-foot a .ic{width:17px;height:17px;opacity:.92}
.app-page .side nav a.on{background:#293f60;color:#fff;box-shadow:none}
.app-page .side nav a:hover,.app-page .side-foot a:hover{background:rgba(255,255,255,.09)}
.app-page .side-foot{border-top-color:rgba(255,255,255,.1)}
.app-page .who{font-size:.76rem;color:#aabbd4}
.app-page .main{display:contents}
.app-page .top{grid-column:1/-1;grid-row:1;display:flex;height:66px;min-width:0;align-items:center;gap:28px;background:#fff;border:0;border-bottom:1px solid #edf0f5;padding:0 22px;margin:0;position:relative;z-index:3}
.app-page .top-brand-mobile{display:flex;align-items:center;gap:7px;flex:none;color:#273244;font-size:.9rem;letter-spacing:-.04em;text-decoration:none}
.app-page .top-brand-mobile strong{font-size:.88rem;font-weight:800;letter-spacing:-.045em}
.app-page .top-brand-mobile .logo{width:24px;height:24px;border-radius:0;background:transparent;color:#3b66df;font-size:1.05rem}
.app-page .brand-mark{background:linear-gradient(135deg,#29c7d0,#5364e8);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.35rem}
.app-page .global-search{width:min(330px,42%);height:34px;background:#f7f8fa;border-color:#edf0f5;border-radius:8px}
.app-page .top-actions{gap:9px;margin-left:auto;flex:none}
.app-page .icon-action,.app-page .menu-action{width:29px;height:29px;background:#f5f7fa;color:#a0a9b8}
.app-page .top-add{width:31px;height:31px;background:#465be8}
.app-page .page-content{grid-column:2;grid-row:2;min-width:0;max-width:none;width:100%;padding:18px 22px 28px;background:#f4f7fb}
.app-page .page-heading{margin:0 0 12px}
.app-page .page-heading h1{font-size:1.25rem;color:#20283c}
.app-page .page-date{font-size:.72rem}
.app-page .lead-in{font-size:.8rem}
.app-page .dashboard-greeting,.app-page.page-dashboard .page-heading{display:none}
.app-page .dashboard-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 16px}
.app-page .metric-card{min-height:122px;padding:15px 15px 11px;border:1px solid #e8edf4;border-radius:9px;background:#fff;box-shadow:none}
.app-page .metric-top{font-size:.7rem;color:#3d4659;font-weight:600}
.app-page .metric-icon{display:none}
.app-page .metric-value{font-size:1.35rem;margin:4px 0 3px;letter-spacing:-.035em}
.app-page .metric-foot{font-size:.65rem;color:#8b95a7}
.app-page .metric-dot{display:none}
.app-page .metric-coral .metric-value{color:#f07868}
.app-page .metric-purple .metric-value{color:#9c6bc9}
.app-page .metric-blue{background:#37c6eb;border-color:#37c6eb;color:#fff}
.app-page .metric-blue .metric-top,.app-page .metric-blue .metric-foot{color:rgba(255,255,255,.9)}
.app-page .spark{height:45px;opacity:.7}
.app-page .dashboard-grid,.app-page .dashboard-bottom-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.app-page .dash-card{min-width:0;padding:14px 15px;background:#fff;border:1px solid #edf0f5;border-radius:9px;box-shadow:none}
.app-page .dash-card-head{padding-bottom:10px;margin-bottom:11px;border-bottom:1px solid #edf0f5;align-items:center}
.app-page .dash-card-head h2{font-size:.8rem;font-weight:700;color:#252b3b}
.app-page .dash-card-head p{display:none}
.app-page .card-more{color:#5b6476;font-size:1rem;letter-spacing:1px}
.app-page .source-chart{min-height:155px;gap:25px;justify-content:center}
.app-page .donut-chart{width:128px;height:128px;flex:none}
.app-page .donut-chart:after{inset:20px;background:#fff}
.app-page .donut-hole strong{font-size:1.1rem;color:#3a4357}
.app-page .donut-hole span{font-size:.62rem}
.app-page .chart-legend{min-width:125px;gap:7px}
.app-page .chart-legend>div{font-size:.68rem;gap:7px}
.app-page .chart-legend b{font-weight:500;color:#7e8798}
.app-page .stage-bars{gap:13px;padding:7px 2px 0}
.app-page .stage-label{font-size:.67rem}
.app-page .stage-track{height:11px;background:#f2f4f8;border-radius:20px}
.app-page .stage-fill{border-radius:20px}
.app-page .stage-foot{font-size:.64rem;gap:10px;margin-top:16px}
.app-page .activity-chart{min-height:150px}
.app-page .activity-plot{height:140px}
.app-page .activity-plot svg{height:112px}
.app-page .x-labels,.app-page .y-labels{font-size:.62rem}
.app-page .chart-legend.inline{font-size:.65rem}
.app-page .sales-pipeline-card{min-height:230px}
.app-page .dashboard-items .item{padding:8px 0}
.app-page .dashboard-bottom-grid{margin-top:0}
@media(max-width:1100px){.app-page .shell{width:94vw}.app-page .page-content{padding:17px}.app-page .source-chart{gap:15px}.app-page .donut-chart{width:112px;height:112px}.app-page .donut-chart:after{inset:17px}}
@media(max-width:760px){body.app-page{padding:0;background:#f4f7fb}.app-page .shell{display:block;width:100%;min-height:100vh;margin:0;border-radius:0;overflow:visible;box-shadow:none}.app-page .side{display:none}.app-page .main{display:contents}.app-page .top{height:62px;padding:0 14px;gap:12px}.app-page .top-brand-mobile{display:flex}.app-page .top-brand-mobile strong{font-size:.75rem}.app-page .top-brand-mobile .logo{width:20px}.app-page .global-search{width:auto;max-width:none;flex:1;min-width:70px}.app-page .top-actions{gap:4px}.app-page .icon-action:first-child,.app-page .menu-action{display:none}.app-page .page-content{padding:16px 13px 100px}.app-page .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.app-page .metric-card:last-child{grid-column:1/-1}.app-page .dashboard-grid,.app-page .dashboard-bottom-grid{grid-template-columns:1fr;gap:11px}.app-page .source-chart{justify-content:space-evenly}.app-page .tabbar{background:#fff}.app-page .tabbar .on{color:#465be8}}
@media(max-width:420px){.app-page .top{gap:8px;padding:0 10px}.app-page .top-brand-mobile strong{max-width:68px;overflow:hidden;text-overflow:ellipsis}.app-page .metric-card{padding:12px}.app-page .metric-value{font-size:1.2rem}.app-page .dash-card{padding:12px}.app-page .source-chart{gap:10px}.app-page .donut-chart{width:105px;height:105px}.app-page .donut-chart:after{inset:16px}}


@media (min-width: 761px) {
  body.app-page { padding: 0; min-height: 100vh; }
  .app-page .shell { width: 100%; max-width: none; min-height: 100vh; height: 100vh; margin: 0; border-radius: 0; }
  .app-page .main { min-width: 0; min-height: 0; overflow-y: auto; max-width: none; }
  .app-page .side { height: 100vh; overflow-y: auto; }
}
@media (max-width: 760px) {
  .app-page .top { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; box-shadow: 0 4px 18px rgba(20,35,60,.08); }
  .app-page .page-content { padding-top: 78px; }
  .app-page .main { display: contents; }
  .app-page .compact-search { margin: 2px 0 8px; padding: 0 9px; }
  .app-page .compact-search input { min-height: 36px; font-size: .8rem; }
}
@media (max-height: 560px) and (orientation: landscape) {
  body.app-page { padding: 0; }
  .app-page .shell { width: 100%; min-height: 100vh; height: 100vh; margin: 0; border-radius: 0; overflow: hidden; }
  .app-page .side { height: 100vh; overflow-y: auto; }
  .app-page .top { position: sticky; top: 0; }
  .app-page .main { min-height: 0; overflow-y: auto; }
}
.pagination-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 20px; color:var(--muted); font-size:.8rem; }
.pagination-actions { display:flex; gap:8px; }
.pagination-controls .btn { min-height:34px; padding:5px 11px; }
.pagination-controls button:disabled { opacity:.4; cursor:not-allowed; }
.item-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; margin:0; list-style:none; }
.item-card-grid > .item { min-width:0; margin:0; padding:13px; background:#fff; border:1px solid #e8edf4; border-radius:10px; box-shadow:0 2px 8px rgba(20,39,70,.035); transition:transform .18s ease, box-shadow .18s ease; }
.item-card-grid > .item:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,39,70,.08); }
.item-card-grid .item-row { align-items:flex-start; }
@media(max-width:620px){ .item-card-grid{grid-template-columns:1fr;} }

.app-page .metric-card,.app-page .dash-card { animation: dashboard-enter .42s ease both; }
.app-page .metric-card:nth-child(2),.app-page .stage-card { animation-delay:.05s; }
.app-page .metric-card:nth-child(3),.app-page .performance-card { animation-delay:.1s; }
.app-page .sales-pipeline-card,.app-page .compact-reminders { animation-delay:.14s; }
@keyframes dashboard-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){.app-page .metric-card,.app-page .dash-card,.item-card-grid>.item{animation:none!important;transition:none!important}}


@media (min-width: 761px) {
  body.app-page { padding: 0; min-height: 100vh; overflow: hidden; }
  .app-page .shell { width: 100%; max-width: none; height: 100vh; min-height: 100vh; margin: 0; border-radius: 0; overflow: hidden; }
  .app-page .main { display: contents; }
  .app-page .page-content { height: calc(100vh - 66px); min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .app-page .side { height: calc(100vh - 66px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .app-page .top { position: relative; }
  .app-page .global-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 32vw); max-width: 360px; margin: 0; }
  .app-page .top-actions { margin-left: auto; }
}
.app-page .top-user { display:inline-flex; align-items:center; gap:8px; max-width:220px; min-width:0; color:#394256; font-size:.76rem; font-weight:650; white-space:nowrap; }
.app-page .top-user-avatar { display:inline-grid; place-items:center; flex:0 0 29px; width:29px; height:29px; border-radius:50%; background:#e9edff; color:#465be8; font-size:.78rem; font-weight:800; }
.app-page .top-user-name { display:block; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.app-page .side-foot .who { display:none; }
.app-page .spark path { stroke-dasharray:420; stroke-dashoffset:420; animation: spark-draw 1.25s ease-out .15s forwards; }
.app-page .activity-plot svg path { stroke-dasharray:900; stroke-dashoffset:900; animation: graph-draw 1.5s ease-out .2s forwards; }
.app-page .stage-fill { transform:scaleX(0); transform-origin:left center; animation: bar-grow .9s cubic-bezier(.2,.75,.25,1) .18s forwards; }
.app-page .donut-chart { animation: donut-pop .7s ease-out both; }
@keyframes spark-draw { to { stroke-dashoffset:0; } }
@keyframes graph-draw { to { stroke-dashoffset:0; } }
@keyframes bar-grow { to { transform:scaleX(1); } }
@keyframes donut-pop { from { opacity:.55; transform:scale(.88) rotate(-18deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@media (max-width: 760px) {
  body.app-page { overflow-x:hidden; overflow-y:auto; }
  .app-page .top { position:fixed; top:0; left:0; right:0; width:100%; box-sizing:border-box; display:flex; justify-content:space-between; }
  .app-page .global-search { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(40vw,250px); min-width:100px; max-width:250px; margin:0; }
  .app-page .top-actions { margin-left:auto; position:relative; z-index:2; }
  .app-page .top-user { gap:0; }
  .app-page .top-user-name { display:none; }
  .app-page .top-user-avatar { width:27px; height:27px; flex-basis:27px; }
  .app-page .page-content { height:auto; min-height:calc(100vh - 62px); overflow:visible; padding-top:78px; padding-bottom:105px; }
}
@media (max-width: 380px) {
  .app-page .top { padding-left:8px; padding-right:8px; gap:4px; }
  .app-page .top-brand-mobile strong { display:none; }
  .app-page .global-search { width:42vw; min-width:90px; }
  .app-page .top-actions { gap:3px; }
}
@media (max-height:560px) and (orientation:landscape) {
  body.app-page { overflow:hidden; }
  .app-page .shell { height:100dvh; min-height:100dvh; overflow:hidden; }
  .app-page .top { position:fixed; top:0; left:0; right:0; height:54px; z-index:100; }
  .app-page .side { height:calc(100dvh - 54px); margin-top:54px; }
  .app-page .page-content { height:calc(100dvh - 54px); min-height:0; padding-top:68px; padding-bottom:80px; overflow-y:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .app-page .spark path,.app-page .activity-plot svg path,.app-page .stage-fill,.app-page .donut-chart { animation:none!important; stroke-dashoffset:0!important; transform:none!important; }
}


.app-page .side,
.app-page .side nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app-page .side::-webkit-scrollbar,
.app-page .side nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.nav-toggle { display:none; border:0; width:32px; height:32px; flex:0 0 32px; align-items:center; justify-content:center; border-radius:8px; color:#33415b; background:#f1f4fa; cursor:pointer; }
.nav-toggle .ic { width:18px; height:18px; }
@media (max-width:760px) {
  .app-page .top { gap:8px; }
  .app-page .nav-toggle { display:inline-flex; position:relative; z-index:102; }
  .app-page .side {
    display:flex;
    position:fixed;
    z-index:101;
    left:0;
    top:62px;
    bottom:0;
    width:min(280px, 82vw);
    height:auto;
    max-height:calc(100dvh - 62px);
    min-height:0;
    margin:0;
    padding:16px 12px calc(18px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:0 16px 0 0;
    box-shadow:12px 0 35px rgba(12,25,50,.2);
    transform:translateX(-110%);
    visibility:hidden;
    transition:transform .22s ease, visibility .22s ease;
  }
  .app-page.nav-open .side { transform:translateX(0); visibility:visible; }
  .app-page.nav-open::after { content:""; position:fixed; inset:62px 0 0; background:rgba(13,24,43,.38); z-index:99; }
  .app-page .side>.brand { display:flex; margin-bottom:4px; }
  .app-page .side nav { min-height:0; }
  .app-page .global-search { width:min(36vw,220px); min-width:74px; }
  .app-page .top-brand-mobile strong { display:none; }
  .app-page .top-actions { gap:4px; }
}
@media (max-width:380px) {
  .app-page .global-search { width:34vw; min-width:68px; }
  .app-page .top { gap:5px; }
}

@media (max-height:560px) and (orientation:landscape) {
  body.app-page { overflow:hidden; }
  .app-page .shell { display:block; width:100%; height:100dvh; min-height:100dvh; overflow:hidden; border-radius:0; }
  .app-page .top { position:fixed; inset:0 0 auto 0; height:52px; padding:0 12px; gap:10px; }
  .app-page .nav-toggle { display:inline-flex; }
  .app-page .side { display:flex; position:fixed; z-index:101; left:0; top:52px; bottom:0; width:174px; height:auto; max-height:none; margin:0; padding:10px 8px 12px; overflow-y:auto; border-radius:0; transform:translateX(-110%); visibility:hidden; }
  .app-page.nav-open .side { transform:translateX(0); visibility:visible; }
  .app-page.nav-open::after { content:""; position:fixed; inset:52px 0 0; background:rgba(13,24,43,.38); z-index:99; }
  .app-page .side>.brand { display:flex; font-size:.8rem; margin-bottom:0; }
  .app-page .side nav a,.app-page .side-foot a { min-height:34px; padding:6px 8px; font-size:.75rem; }
  .app-page .page-content { position:absolute; top:52px; left:0; right:0; bottom:0; height:auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 12px 24px; }
  .app-page .global-search { width:min(38vw,250px); min-width:90px; }
  .app-page .top-brand-mobile strong { display:inline; max-width:80px; }
  .app-page .top-actions .top-user-name { display:none; }
  .app-page .dashboard-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .app-page .metric-card { min-height:98px; padding:10px; }
  .app-page .metric-value { font-size:1.1rem; }
  .app-page .spark { height:28px; }
  .app-page .dashboard-grid,.app-page .dashboard-bottom-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-page .dash-card { padding:10px; }
  .app-page .tabbar { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .app-page .side { transition:none!important; }
}


.app-page .nav-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--side) !important;
  padding: 0 !important;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.app-page .nav-toggle .ic {
  display:block;
  width: 22px;
  height: 22px;
  fill:none !important;
  stroke: var(--side) !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--side) !important;
  opacity:1 !important;
  visibility:visible !important;
}
@media (min-width: 761px) {
  .app-page .side { left: 0; top: -16px; height: calc(100% + 16px); }
}

/* Miliki CRM enquiry, client journey and task additions */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{width:100%;min-width:680px}
.table-wrap th,.table-wrap td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table-wrap td small{display:block;margin-top:3px;color:var(--muted);font-size:.76rem}
.status-pill{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--line);border-radius:99px;background:var(--bg);color:var(--muted);font-size:.74rem;font-weight:700;white-space:nowrap}
.inline-form{display:inline-flex;min-width:125px;margin:0}
.inline-form select{min-height:34px;padding:5px 8px;font-size:.78rem}
.timeline-item{padding:12px 0;border-bottom:1px solid var(--line)}
.timeline-item:last-child{border-bottom:0}
.timeline-item p{margin:5px 0;font-size:.9rem;white-space:pre-wrap}
.timeline-item small{color:var(--muted);font-size:.74rem}
pre{max-width:100%;overflow:auto;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;font-size:.78rem;white-space:pre-wrap;overflow-wrap:anywhere}
input[type=url],input[type=datetime-local]{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px;min-height:44px}
@media(max-width:760px){.table-wrap table{min-width:620px}.inline-form{min-width:115px}}