/* Blaze Activity CRM — Blaze Orange #F04416, Charcoal #242424, Warm White #F7F5F1, Mountain Gray #A6A6A6 */
:root { --orange:#F04416; --char:#242424; --warm:#F7F5F1; --gray:#A6A6A6; --mid:#5E5E5E; --line:#E4E0D8; --r:14px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--warm); color:var(--char); font:16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
a { color:var(--orange); text-decoration:none; }
h1 { font-size:1.6rem; margin:0; font-weight:800; letter-spacing:-.01em; }
h2 { font-size:1.25rem; margin:0 0 .25rem; font-weight:800; }
h3 { font-size:1rem; margin:1.6rem 0 .6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--mid); }
h4 { margin:.5rem 0 0; }
.muted { color:var(--mid); margin:.2rem 0; } .small { font-size:.85rem; } .warn { color:var(--orange); } .ok-txt { color:#2e7d32 !important; }

/* Header + nav */
header.top { position:sticky; top:0; z-index:5; background:var(--char); display:flex; align-items:center; justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom:3px solid var(--orange); }
.brand img { height:38px; display:block; }
.me { width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-weight:800; }
main { max-width:720px; margin:0 auto; padding:16px; }
nav.bottom { position:fixed; bottom:0; left:0; right:0; z-index:5; background:var(--char); display:flex; padding-bottom:env(safe-area-inset-bottom); }
nav.bottom a { flex:1; text-align:center; color:#cfcfcf; padding:14px 4px; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-top:3px solid transparent; }
nav.bottom a.on { color:#fff; border-top-color:var(--orange); }

/* Cards, lists */
.card { background:#fff; border-radius:var(--r); padding:16px; margin:12px 0; box-shadow:0 1px 0 var(--line); }
.list { display:flex; flex-direction:column; gap:8px; }
.row-card { background:#fff; border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:10px; color:var(--char); box-shadow:0 1px 0 var(--line); }
.row-card.wrap { flex-wrap:wrap; }
.grow { flex:1; min-width:0; color:inherit; }
.sub { display:block; color:var(--mid); font-size:.86rem; margin-top:2px; overflow-wrap:anywhere; }
.pill { display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:99px; vertical-align:middle; }
.pill.orange { background:var(--orange); color:#fff; } .pill.gray { background:#ECE9E3; color:var(--mid); }
.empty { text-align:center; color:var(--mid); }

/* Buttons + forms */
.btn { display:inline-block; border:2px solid var(--char); background:#fff; color:var(--char); font:inherit; font-weight:800; padding:11px 16px; border-radius:12px; cursor:pointer; text-align:center; }
.btn.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.btn.full { display:block; width:100%; margin:12px 0; }
.btn.small { padding:6px 10px; font-size:.85rem; border-radius:9px; }
.icon-btn { background:none; border:0; font-size:1.6rem; line-height:1; color:var(--gray); cursor:pointer; padding:4px 8px; }
label { display:block; font-weight:700; font-size:.88rem; color:var(--mid); }
input, select, textarea { width:100%; font:inherit; font-size:16px; color:var(--char); background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:11px 12px; margin-top:4px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--orange); }
label.check { display:flex; align-items:center; gap:8px; font-weight:600; }
label.check input { width:auto; margin:0; }
.stack > * + * { margin-top:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.inline-form { display:flex; gap:8px; align-items:center; } .inline-form input { margin:0; flex:1; }
.inline-btns { display:flex; gap:6px; }
.btn-row { margin-top:12px; }
.search { display:flex; gap:8px; } .search input { flex:2; } .search select { flex:1; }
.flash { padding:12px 14px; border-radius:12px; margin-bottom:12px; font-weight:700; background:#fff; border-left:5px solid #2e7d32; }
.flash.err { border-left-color:var(--orange); color:var(--orange); }

/* Today */
.hello { display:flex; justify-content:space-between; align-items:center; margin:4px 0 14px; }
.streak { background:var(--char); color:#fff; border-radius:12px; padding:8px 12px; text-align:center; }
.streak b { display:block; font-size:1.4rem; color:var(--orange); line-height:1; } .streak span { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }
.banner { background:var(--orange); color:#fff; font-weight:800; padding:12px 14px; border-radius:12px; margin-bottom:12px; text-align:center; }
.goals { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.goal { background:#fff; border:0; border-radius:var(--r); padding:14px 6px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font:inherit; color:var(--char); box-shadow:0 1px 0 var(--line); }
.ring { --p:0; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--orange) calc(var(--p)*1%), #ECE9E3 0); }
.ring::before { content:""; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.ring b, .ring small { position:relative; } .ring b { font-size:1.6rem; font-weight:900; } .ring small { color:var(--mid); font-weight:700; margin-left:1px; }
.ring { grid-auto-flow:column; align-items:center; }
.goal.met .ring::before { background:var(--char); } .goal.met .ring b { color:#fff; } .goal.met .ring small { color:var(--gray); }
.goal-label { font-weight:800; text-transform:uppercase; font-size:.82rem; letter-spacing:.05em; }
.goal-add { font-size:.78rem; color:var(--orange); font-weight:800; }
.week { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.week b { display:block; font-size:1.3rem; } .week span { font-size:.75rem; color:var(--mid); text-transform:uppercase; }
.week p { grid-column:1/-1; margin:8px 0 0; }

/* Quick buttons */
.quick { display:flex; gap:6px; flex-shrink:0; }
.qbtn { min-width:40px; height:40px; padding:0 10px; display:grid; place-items:center; border-radius:10px; background:var(--warm); border:0; color:var(--char); font:inherit; font-weight:800; font-size:1rem; cursor:pointer; }
.qbtn.log { background:var(--orange); color:#fff; font-size:.85rem; }
.btn-row .quick .qbtn { flex:1; height:46px; }
.btn-row .quick { width:100%; }

/* Team */
.tabs { display:flex; background:#fff; border-radius:12px; padding:4px; gap:4px; }
.tabs a { flex:1; text-align:center; padding:9px; border-radius:9px; color:var(--mid); font-weight:800; font-size:.88rem; }
.tabs a.on { background:var(--char); color:#fff; }
.team-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rank { width:28px; height:28px; border-radius:50%; background:var(--char); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.team-card:first-child .rank { background:var(--orange); }
.total { margin-left:auto; font-weight:800; color:var(--mid); font-size:.9rem; }
.mini-stats { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:12px; text-align:center; }
.mini-stats b { display:block; font-size:1.15rem; } .mini-stats span { font-size:.66rem; color:var(--mid); text-transform:uppercase; letter-spacing:.03em; }
.mini-stats .under b { color:var(--orange); }
@media (max-width:420px) { .mini-stats { grid-template-columns:repeat(3,1fr); row-gap:10px; } }

/* Admin */
.user-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.user-row select { width:auto; margin:0; } .user-row input[type=password] { flex:1; min-width:180px; margin:0; }
.add-user { padding-top:8px; }
details summary { cursor:pointer; color:var(--orange); }

/* Log sheet */
.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; display:flex; align-items:flex-end; justify-content:center; }
.sheet-bg[hidden] { display:none; }
.sheet { background:var(--warm); width:100%; max-width:560px; max-height:92vh; overflow:auto; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet > * + * { margin-top:12px; }
.sheet-head { display:flex; justify-content:space-between; align-items:center; } .sheet-head h3 { margin:0; }
.types { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.types label { margin:0; } .types input { position:absolute; opacity:0; width:0; height:0; }
.types span { display:block; text-align:center; background:#fff; border:2px solid var(--line); border-radius:10px; padding:9px 4px; font-size:.8rem; color:var(--char); font-weight:800; cursor:pointer; }
.types input:checked + span { background:var(--orange); border-color:var(--orange); color:#fff; }
.types input:focus-visible + span { outline:2px solid var(--char); }
.agent-hint { margin:4px 0 0 !important; min-height:1em; }
.meet { background:#fff; border-radius:10px; padding:10px 12px; } .meet label { margin-top:10px; }

/* Auth */
body.auth { display:grid; place-items:center; min-height:100vh; padding:20px; background:var(--char); }
.auth-card { background:#fff; width:100%; max-width:400px; border-radius:18px; padding:28px 24px; border-top:5px solid var(--orange); }
.auth-card > * + * { margin-top:12px; }
.auth-logo { width:220px; display:block; margin:0 auto 6px; }
.auth-card h1 { text-align:center; font-size:1.3rem; } .auth-card > .muted { text-align:center; margin-top:2px; }

/* Daily task list */
.list-note { margin:10px 2px 0; }
a.goal { text-decoration:none; }
.task-sec { scroll-margin-top:80px; }
.task-sec h3 { margin:0; }
.task-head { display:flex; justify-content:space-between; align-items:center; margin:1.4rem 0 .6rem; }
.task { background:#fff; border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 0 var(--line); }
.check { width:30px; height:30px; flex-shrink:0; border-radius:50%; border:2.5px solid var(--gray); background:#fff; color:#fff; font-weight:900; font-size:1rem; cursor:pointer; display:grid; place-items:center; padding:0; }
.task.done { background:#FBFAF7; }
.task.done .check { background:var(--orange); border-color:var(--orange); cursor:default; }
.task.done b { color:var(--mid); }
.task-btns { display:flex; flex-direction:column; align-items:center; gap:2px; }
.task-btns form { margin:0; }
.qbtn.go { background:var(--orange); color:#fff; }
.swap { background:none; border:0; color:var(--mid); font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; padding:2px; text-decoration:underline; }
.states-in { width:150px !important; margin:0 !important; }

.center { text-align:center; }
.task form { margin:0; }

/* Greeting card */
.hero { position:relative; background:var(--char); color:#fff; border-radius:18px; padding:16px 18px 14px; overflow:hidden; margin:2px 0 14px; border-bottom:4px solid var(--orange); }
.hero > *:not(.hero-art) { position:relative; }
.hero-art { position:absolute; right:0; bottom:0; width:58%; height:100%; }
.hero-top { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; font-weight:700; color:#cfcfcf; text-transform:uppercase; letter-spacing:.05em; }
.hero-streak { background:var(--orange); color:#fff; padding:3px 9px; border-radius:99px; }
.hero-greet { font-family:'Orbitron', 'Eurostile', 'Arial Black', sans-serif; font-weight:800; font-size:1.45rem; line-height:1.15; letter-spacing:.04em; text-transform:uppercase; margin:12px 0 8px; }
.hero-greet span { color:var(--orange); }
.hero-msg { margin:0 0 12px; max-width:72%; font-size:.98rem; line-height:1.35; color:#F7F5F1; }
.hero-bar { height:7px; background:rgba(255,255,255,.14); border-radius:9px; overflow:hidden; max-width:72%; }
.hero-bar div { height:100%; background:var(--orange); border-radius:9px; }
.hero-count { margin:6px 0 0; font-size:.75rem; color:#bdbdbd; font-weight:700; }
.hero-done .hero-msg { font-weight:700; }

/* ===== v2 app ===== */

/* greeting hero */
.hero { position:relative; background:var(--char); color:#fff; border-radius:18px; padding:16px 18px 14px; overflow:hidden; margin:2px 0 14px; border-bottom:4px solid var(--orange); }
.hero > *:not(.hero-art) { position:relative; }
.hero-art { position:absolute; right:0; bottom:0; width:58%; height:100%; }
.hero-top { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; font-weight:700; color:#cfcfcf; text-transform:uppercase; letter-spacing:.05em; }
.hero-streak { background:var(--orange); color:#fff; padding:3px 9px; border-radius:99px; }
.hero-greet { font-family:'Orbitron', 'Eurostile', 'Arial Black', sans-serif; font-weight:800; font-size:1.45rem; line-height:1.15; letter-spacing:.04em; text-transform:uppercase; margin:12px 0 8px; }
.hero-greet span { color:var(--orange); }
.hero-msg { margin:0 0 12px; max-width:72%; font-size:.98rem; line-height:1.35; color:#F7F5F1; }
.hero-bar { height:7px; background:rgba(255,255,255,.14); border-radius:9px; overflow:hidden; max-width:72%; }
.hero-bar div { height:100%; background:var(--orange); border-radius:9px; transition:width .4s; }
.hero-count { margin:6px 0 0; font-size:.75rem; color:#bdbdbd; font-weight:700; }
.hero-done .hero-msg { font-weight:700; }
/* daily task list */
.list-note { margin:10px 2px 0; }
.task-sec h3 { margin:0; }
.task-head { display:flex; justify-content:space-between; align-items:center; margin:1.4rem 0 .6rem; }
.task { background:#fff; border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 0 var(--line); }
.task .grow { cursor:pointer; } .center { text-align:center; }
.check { width:30px; height:30px; flex-shrink:0; border-radius:50%; border:2.5px solid var(--gray); background:#fff; color:#fff; font-weight:900; font-size:1rem; cursor:pointer; display:grid; place-items:center; padding:0; }
.task.done { background:#FBFAF7; }
.task.done .check { background:var(--orange); border-color:var(--orange); }
.task.done b { color:var(--mid); }
.task-btns { display:flex; flex-direction:column; align-items:center; gap:2px; }
.qbtn.go { background:var(--orange); color:#fff; }
.swap { background:none; border:0; color:var(--mid); font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; padding:2px; text-decoration:underline; }
/* header bell + notifications */
.hdr-r { display:flex; align-items:center; gap:10px; }
.bell { position:relative; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:0; display:grid; place-items:center; cursor:pointer; }
.badge { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--orange); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--char); }
.badge[hidden] { display:none; }
.note-item { display:flex; gap:10px; width:100%; text-align:left; background:#fff; border:0; border-radius:12px; padding:12px; font:inherit; color:var(--char); cursor:pointer; box-shadow:0 1px 0 var(--line); }
.note-item + .note-item { margin-top:8px; }
.ni-dot { width:9px; height:9px; border-radius:50%; background:var(--orange); margin-top:6px; flex-shrink:0; }
.empty-note { background:#fff; border-radius:12px; padding:18px; text-align:center; font-weight:700; color:#2e7d32; }
.page-h { font-size:1.3rem; margin:4px 0 4px; }
/* review tab */
.seg { margin-bottom:12px; }
.day-nav { display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:14px; padding:6px 8px; box-shadow:0 1px 0 var(--line); }
.day-nav div { text-align:center; } .day-nav b { display:block; font-size:1.05rem; } .day-nav span { font-size:.8rem; color:var(--mid); }
.day-nav .icon-btn { font-size:2rem; color:var(--char); padding:0 12px; } .day-nav .icon-btn:disabled { color:#d6d2ca; }
.snap { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 4px; }
.snap div { background:var(--char); color:#fff; border-radius:12px; padding:10px 6px; text-align:center; }
.snap div.all { background:var(--orange); }
.snap b { display:block; font-size:1.4rem; line-height:1.1; } .snap b small { font-size:.8rem; color:#bbb; } .snap div.all b small { color:#ffd9cc; }
.snap span { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#cfcfcf; } .snap div.all span { color:#fff; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.lo-card { padding:14px; } .lo-card summary { list-style:none; cursor:pointer; color:var(--char); } .lo-card summary::-webkit-details-marker { display:none; }
.lo-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .lo-top .pill { margin-left:auto; }
.pill.okp { background:#E5F3E6; color:#2e7d32; }
.mbar { display:grid; grid-template-columns:52px 1fr 40px; align-items:center; gap:8px; font-size:.8rem; margin:5px 0; color:var(--mid); font-weight:700; }
.mbar b { text-align:right; color:var(--char); } .mbar b.u { color:var(--orange); }
.mtrack { height:8px; background:#ECE9E3; border-radius:8px; overflow:hidden; } .mtrack div { height:100%; background:#F7A487; border-radius:8px; } .mtrack div.full { background:var(--orange); }
.lo-foot { display:flex; gap:14px; font-size:.8rem; color:var(--mid); margin-top:8px; } .lo-foot b { color:var(--char); } .lo-foot .more { margin-left:auto; color:var(--orange); font-weight:700; }
.lo-card[open] .more { visibility:hidden; }
.act-log { list-style:none; margin:12px 0 0; padding:10px 0 0; border-top:1px solid var(--line); font-size:.85rem; }
.act-log li { padding:6px 0; border-bottom:1px dashed var(--line); } .act-log li:last-child { border-bottom:0; }
.act-log .t { color:var(--mid); font-size:.75rem; display:inline-block; width:58px; } .act-log em { color:var(--mid); font-style:normal; }
.act-log .n { color:var(--mid); margin:2px 0 0 58px; }
.hl-card { align-items:flex-start; } .hl-card .dot { margin-top:6px; }
.trend-head { display:flex; justify-content:space-between; align-items:center; margin-top:4px; } .trend-head h3 { margin:0; }
.tabs.mini { padding:3px; } .tabs.mini a { padding:5px 10px; font-size:.78rem; white-space:nowrap; }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.kpi { background:#fff; border-radius:12px; padding:12px; box-shadow:0 1px 0 var(--line); }
.kpi span { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mid); font-weight:700; }
.kpi b { display:block; font-size:1.6rem; margin:2px 0; } .kpi em { font-style:normal; font-size:.75rem; font-weight:700; color:var(--mid); }
.kpi em.up { color:#2e7d32; } .kpi em.down { color:#b8360f; } .kpi small { display:block; color:var(--gray); font-size:.7rem; margin-top:2px; }
.chart-card h4 { margin:0; font-size:1rem; } .chart-card > p { margin:2px 0 8px; }
.chart { width:100%; height:auto; display:block; touch-action:pan-y; } .chart .ax { font-size:9.5px; fill:#8a8a8a; font-family:inherit; }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--char); font-weight:700; margin-bottom:4px; }
.legend i, .tooltip i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.tooltip { position:absolute; z-index:60; background:#fff; color:var(--char); border-radius:10px; padding:8px 10px; font-size:.78rem; box-shadow:0 6px 24px rgba(0,0,0,.18); width:170px; pointer-events:none; }
.tooltip[hidden] { display:none; } .tooltip b { display:block; margin-bottom:4px; }
.tooltip div { display:flex; align-items:center; } .tooltip span { margin-left:auto; font-weight:800; } .tooltip .tt-total { border-top:1px solid var(--line); margin-top:4px; padding-top:4px; font-weight:700; }
.tbl summary { font-size:.78rem; color:var(--mid); margin-top:6px; } .tbl table { width:100%; border-collapse:collapse; font-size:.78rem; margin-top:6px; }
.tbl th, .tbl td { padding:4px 6px; text-align:right; border-bottom:1px solid var(--line); } .tbl th:first-child, .tbl td:first-child { text-align:left; }
.u { color:var(--orange); }
/* daily review */
/* calendars */
label.cb { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--char); font-size:.92rem; }
label.cb input { width:18px; height:18px; margin:0; accent-color:var(--orange); flex-shrink:0; }
.cal-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.cal-opts { background:#fff; border-radius:10px; padding:10px 12px; } .cal-opts label + label { margin-top:8px; }
.cal-hint { margin:4px 0 0 !important; }
.g-mock h2 { font-size:1.05rem; } .g-logo { font-size:1.6rem; letter-spacing:-.02em; }
/* v3: call flow, network touches */
.check.locked { border-style:dashed; border-color:#cfcac0; background:#F4F2EE; color:#bbb; font-size:.8rem; }
.check.ready { border-color:var(--orange); box-shadow:0 0 0 4px rgba(240,68,22,.15); }
.task.called { box-shadow:0 0 0 2px rgba(240,68,22,.35); }
.slot-empty { border:2px dashed #d8d3ca; background:transparent; box-shadow:none; color:var(--mid); cursor:pointer; font-weight:700; }
.slot-empty .check { border-style:dashed; border-color:#cfcac0; background:transparent; color:#bdb7ad; font-size:1.2rem; }
.resp { display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:99px; margin-left:4px; vertical-align:middle; }
.resp.yes { background:#E5F3E6; color:#2e7d32; } .resp.wait { background:#ECE9E3; color:var(--mid); } .resp.no { background:#FCE6DF; color:#b8360f; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:30; display:flex; align-items:flex-end; justify-content:center; max-width:430px; margin:0 auto; }
.modal-bg.center { align-items:center; padding:20px; }
.modal-bg[hidden] { display:none; }
.modal { background:var(--warm); width:100%; max-height:92vh; overflow:auto; border-radius:18px 18px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); }
.modal-bg.center .modal { border-radius:18px; max-width:340px; text-align:center; }
.modal > * + * { margin-top:12px; }
.modal h2 { margin:0; }
.agent-card { background:#fff; border-radius:14px; padding:4px 14px; }
.agent-card .row { display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.agent-card .row:last-child { border-bottom:0; }
.agent-card .row span:first-child { color:var(--mid); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.agent-card .row b, .agent-card .row a { text-align:right; overflow-wrap:anywhere; }
.call-big { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--orange); color:#fff; border:0; border-radius:14px; padding:15px; font:inherit; font-weight:800; font-size:1.1rem; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips label { margin:0; } .chips input { position:absolute; opacity:0; width:0; height:0; }
.chips span { display:block; background:#fff; border:2px solid var(--line); border-radius:99px; padding:7px 13px; font-size:.85rem; color:var(--char); font-weight:800; cursor:pointer; }
.chips input:checked + span { background:var(--orange); border-color:var(--orange); color:#fff; }
.field-label { font-weight:700; font-size:.88rem; color:var(--mid); margin-bottom:6px; }
.btn-pair { display:flex; gap:10px; } .btn-pair .btn { flex:1; }
.big-num { font-size:1.35rem; font-weight:900; letter-spacing:.02em; margin:4px 0 0 !important; }
.choose { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.choose button { background:#fff; border:2px solid var(--line); border-radius:14px; padding:14px 8px; font:inherit; font-weight:800; cursor:pointer; color:var(--char); }
.choose button small { display:block; font-weight:600; color:var(--mid); font-size:.75rem; margin-top:2px; }

/* ===== production shell ===== */
.app { max-width:720px; margin:0 auto; }
main { max-width:640px; }
nav.bottom { padding-bottom:max(env(safe-area-inset-bottom), 0px); }
nav.bottom a { padding:13px 2px; font-size:.76rem; }
.toast { position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--char); color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; font-size:.9rem; z-index:70; box-shadow:0 6px 20px rgba(0,0,0,.25); width:max-content; max-width:min(380px, 92vw); text-align:center; pointer-events:none; }
.toast[hidden] { display:none; }
.callout { background:#fff; border-left:4px solid var(--orange); border-radius:10px; padding:10px 12px; font-size:.85rem; margin:10px 0; }
.modal-bg { max-width:none; }
.modal { max-width:560px; margin:0 auto; }
header.top { padding-top:calc(10px + env(safe-area-inset-top)); }
.loading { opacity:.55; pointer-events:none; }
.copy-row { display:flex; gap:8px; } .copy-row input { margin:0; font-size:.8rem; }
/* desktop: keep the bottom bar the same width as the app */
@media (min-width: 760px) {
  nav.bottom { left:50%; right:auto; width:720px; transform:translateX(-50%); border-radius:14px 14px 0 0; }
  .modal-bg { align-items:center; } .modal { border-radius:18px; }
}

/* ===== desktop layout (1024px+): sidebar nav, full-width content, multi-column views ===== */
@media (min-width: 1024px) {
  body { padding-bottom:0; }
  .app { background:linear-gradient(to right, var(--char) 232px, transparent 232px); max-width:none; margin:0; display:grid; grid-template-columns:232px minmax(0,1fr); grid-template-rows:auto 1fr; min-height:100vh; }
  header.top { grid-column:1 / -1; padding:12px 28px; }
  .brand img { height:42px; }

  /* bottom tab bar becomes a left sidebar */
  nav.bottom { position:sticky; top:67px; grid-column:1; grid-row:2; align-self:start; height:calc(100vh - 67px);
    left:auto; right:auto; bottom:auto; width:auto; transform:none; border-radius:0; flex-direction:column; gap:4px; padding:20px 12px; }
  nav.bottom a { flex:0 0 auto; text-align:left; padding:12px 16px; font-size:.9rem; letter-spacing:.03em; border-top:0; border-left:3px solid transparent; border-radius:10px; }
  nav.bottom a:hover { background:rgba(255,255,255,.06); color:#fff; }
  nav.bottom a.on { border-top:0; border-left-color:var(--orange); background:rgba(255,255,255,.08); }

  main { grid-column:2; grid-row:2; max-width:1320px; width:100%; margin:0; padding:28px 40px 48px; }
  h3 { margin-top:1.2rem; }

  /* Today: hero + goal rings across the top, the three task lists side by side */
  main:has(> .goals) { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:24px; align-items:start; }
  main:has(> .goals) > * { grid-column:1 / -1; }
  main:has(> .goals) > .task-sec { grid-column:auto; }
  main:has(> .goals) > .task-sec .task-head { min-height:2.2rem; }
  main:has(> .goals) > .btn.full { max-width:360px; }
  .hero { padding:22px 26px 18px; } .hero-art { width:42%; }

  /* Review > Daily: loan officer cards in columns */
  #daily .list:has(> .lo-card) { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:16px; align-items:start; }
  #daily .list > .lo-card { margin:0; }
  .snap b { font-size:1.6rem; }

  /* Review > Trending: KPIs in one row, charts two-up */
  #trends { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:20px; align-items:start; }
  #trends > * { grid-column:1 / -1; }
  #trends > .chart-card { grid-column:auto; }
  .kpis { grid-template-columns:repeat(4,1fr); gap:12px; }

  /* Team leaderboard and other card lists */
  .list:has(> .team-card) { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:14px; }
  .list:has(> .team-card) > .team-card { margin:0; }

  /* Settings / Admin: two columns of cards */
  main:has(> .page-h) { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:20px; align-items:start; }
  main:has(> .page-h) > .page-h { grid-column:1 / -1; }

  /* centered dialogs instead of bottom sheets */
  .modal-bg { align-items:center; padding:24px; }
  .modal { border-radius:18px; max-width:600px; padding:22px 24px; }
  .toast { bottom:28px; left:calc(50% + 116px); }
  .tabs { max-width:520px; }
}