:root {
  --bg: #0f1012;
  --panel: #17191c;
  --panel-2: #1f2226;
  --line: #2b2f35;
  --text: #ecebe7;
  --muted: #9a9ea6;
  --gold: #c8a24a;
  --gold-ink: #1a1405;
  --green: #4caf7d;
  --red: #e0605a;
  --amber: #e2a33b;
  --blue: #5b9bd5;
  --radius: 12px;
  --nav-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--gold); text-decoration: none; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.hidden { display: none !important; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout */
.app { display: grid; grid-template-columns: 230px 1fr; min-height: 100%; }
.side { background: var(--panel); border-right: 1px solid var(--line); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; font-weight: 700; letter-spacing: .02em; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.side a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; color: var(--text); margin-bottom: 2px; }
.side a:hover { background: var(--panel-2); }
.side a.active { background: rgba(200,162,74,.14); color: var(--gold); }
.side a .badge { margin-left: auto; }
.main { padding: 22px 26px 40px; max-width: 1200px; width: 100%; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topbar h1 { flex: 1; min-width: 0; }
.bottomnav { display: none; }
.offline-bar { background: var(--amber); color: #201300; text-align: center; font-size: 13px; padding: 4px; }

@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .main { padding: 14px 14px calc(var(--nav-h) + 24px); }
  .bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--line); z-index: 20;
  }
  .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; position: relative; }
  .bottomnav a.active { color: var(--gold); }
  .bottomnav a .badge { position: absolute; top: 6px; left: 55%; }
  h1 { font-size: 19px; }
}

.icon { width: 20px; height: 20px; flex: none; }

/* Cards & lists */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card.tight { padding: 0; overflow: hidden; }
.grid { display: grid; gap: 14px; }
.grid.k4 { grid-template-columns: repeat(4, 1fr); }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid.k4 { grid-template-columns: 1fr 1fr; } .grid.c3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid.c2, .grid.c3 { grid-template-columns: 1fr; } }
.kpi .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.kpi .value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.list > .item { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--text); }
.list > .item:first-child { border-top: 0; }
a.item:hover, .item.click:hover { background: var(--panel-2); cursor: pointer; }
.item .title { font-weight: 600; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); }

.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.gold { background: rgba(200,162,74,.16); color: var(--gold); border-color: transparent; }
.badge.green { background: rgba(76,175,125,.15); color: var(--green); border-color: transparent; }
.badge.red { background: rgba(224,96,90,.15); color: var(--red); border-color: transparent; }
.badge.amber { background: rgba(226,163,59,.15); color: var(--amber); border-color: transparent; }
.badge.blue { background: rgba(91,155,213,.15); color: var(--blue); border-color: transparent; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--text); }
.alert:first-child { border-top: 0; }
.alert .dot { margin-top: 6px; }
.alert.danger .dot { background: var(--red); } .alert.warn .dot { background: var(--amber); } .alert.info .dot { background: var(--blue); }

/* Forms */
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
input, select, textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 11px; font: inherit; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 80px; resize: vertical; }
input[type=checkbox] { width: auto; accent-color: var(--gold); }
.field { margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; margin: 0 0 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); border-radius: 9px; padding: 9px 14px; font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap; min-height: 40px;
}
.btn:hover { border-color: #3a3f46; }
.btn.primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn .icon { width: 17px; height: 17px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tabs button { background: none; border: 0; color: var(--muted); padding: 10px 12px; font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--gold); border-color: var(--gold); }

/* Tables (line items) */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); }
td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.items td input { padding: 8px; }
.items .col-qty { width: 80px; } .items .col-price { width: 130px; } .items .col-total { width: 120px; text-align: right; padding-top: 14px; } .items .col-x { width: 40px; }
@media (max-width: 640px) {
  .items thead { display: none; }
  .items tr { display: grid; grid-template-columns: 70px 1fr 90px 36px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .items td { border: 0; padding: 0; width: auto !important; }
  .items td.col-desc { grid-column: 1 / -1; }
  .items .col-total { padding-top: 10px; }
}
.totals { margin-left: auto; width: min(320px, 100%); }
.totals .row { justify-content: space-between; padding: 4px 0; }
.totals .grand { font-size: 18px; font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }

/* Pipeline */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 10px; }
.deal { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.deal select { margin-top: 8px; padding: 6px; font-size: 13px; }

/* Schedule */
.day { margin-bottom: 16px; }
.day-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; font-weight: 700; }
.day-head.today { color: var(--gold); }
.visit { display: flex; gap: 12px; padding: 12px; border-left: 4px solid var(--gold); background: var(--panel); border-radius: 10px; margin-bottom: 8px; cursor: pointer; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visit.estimate { border-left-color: var(--blue); } .visit.follow_up { border-left-color: var(--amber); }
.visit.done { opacity: .55; } .visit.cancelled { opacity: .4; text-decoration: line-through; }
.visit .time { width: 92px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.crew-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.chip { font-size: 11px; padding: 2px 7px; border-radius: 99px; color: #111; font-weight: 600; }

/* Timeline */
.tl { position: relative; }
.tl-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.tl-item:first-child { border-top: 0; }
.tl-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--muted); }
.tl-icon .icon { width: 15px; height: 15px; }
.tl-item.note .tl-icon { color: var(--gold); } .tl-item.call .tl-icon { color: var(--green); } .tl-item.sms .tl-icon { color: var(--blue); }

/* Chart */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 10px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.bars .bar span { width: 100%; max-width: 46px; background: var(--gold); border-radius: 5px 5px 0 0; min-height: 2px; }
.bars .bar small { color: var(--muted); font-size: 11px; }
.hbar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-top: 4px; }
.hbar span { display: block; height: 100%; background: var(--gold); }

/* Coach */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: rgba(200,162,74,.18); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: 4px; }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; }

/* Dialog */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog .dh { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
dialog .db { padding: 16px 18px; overflow: auto; max-height: calc(100vh - 170px); }
dialog .df { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translateX(-50%); background: #2a2e34; color: var(--text); padding: 11px 16px; border-radius: 10px; z-index: 100; box-shadow: 0 6px 24px rgba(0,0,0,.4); max-width: calc(100vw - 32px); }
.toast.error { background: #4a1e1c; }

/* Auth */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth .card { width: min(400px, 100%); }
.auth .logo { width: 72px; height: 72px; border-radius: 16px; display: block; margin: 0 auto 12px; }

/* Receptionist settings */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: .15s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--gold); }
.switch input:checked + span::before { transform: translateX(20px); }
.toggle-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { margin: 0; }
.seg input { display: none; }
.seg span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); cursor: pointer; font-weight: 600; font-size: 14px; }
.seg input:checked + span { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.day-row { display: grid; grid-template-columns: 46px 64px minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; }
.day-row input[type=time] { max-width: none !important; padding: 8px 6px; }
.day-row strong { width: auto !important; font-size: 14px; }
.callrow { border-top: 1px solid var(--line); padding: 10px 0; }
.callrow summary { cursor: pointer; }
.savebar { position: sticky; bottom: calc(var(--nav-h) + 8px); display: flex; justify-content: flex-end; padding: 8px 0; z-index: 5; }
@media (min-width: 821px) { .savebar { bottom: 12px; } }
.savebar .btn { box-shadow: 0 6px 20px rgba(0,0,0,.4); padding: 12px 28px; }
.visit-notes { margin-top: 4px; color: var(--text); opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Cut planner editor */
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cut-table { min-width: 860px; }
.cut-table td { padding: 4px; }
.cut-table input, .cut-table select { padding: 7px 6px; }
.cut-table .c-letter { width: 48px; text-align: center; font-weight: 700; }
.cut-table .c-color { width: 40px; height: 36px; padding: 2px; }
.cut-table .c-name { min-width: 120px; }
.cut-table .c-m { width: 88px; }
.cut-table .c-n { width: 62px; }
.cut-table input.bad { border-color: var(--red); background: rgba(224,96,90,.12); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #0004; vertical-align: -1px; margin-right: 6px; }