[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
/* Layout: top bar + horizontally scrolling kanban; deal opens in a right-side drawer (fields | chat), full screen on phones */
:root{
  --bg:#eef1f4; --surface:#ffffff; --surface-2:#f6f8fa; --line:#d9dfe6; --fg:#16202b; --muted:#5d6b7a;
  --accent:#d9822b; --accent-ink:#ffffff; --accent-soft:#fbead8;
  --wa:#1f9d55; --wa-soft:#dcf3e5; --tg:#2a8bd6; --tg-soft:#dcecf9;
  --out:#e4effa; --ai:#f3ecff; --ai-ink:#6b46c1; --warn:#c2410c;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f151c; --surface:#18212b; --surface-2:#1e2935; --line:#2c3a48; --fg:#e6edf3; --muted:#91a0b0;
  --accent:#e8964a; --accent-ink:#1a1006; --accent-soft:#3a2a1a;
  --wa:#3ccf7a; --wa-soft:#163a26; --tg:#5aaef0; --tg-soft:#16304a;
  --out:#1d3550; --ai:#2a2142; --ai-ink:#b9a2ff; --warn:#fb923c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f151c; --surface:#18212b; --surface-2:#1e2935; --line:#2c3a48; --fg:#e6edf3; --muted:#91a0b0;
  --accent:#e8964a; --accent-ink:#1a1006; --accent-soft:#3a2a1a;
  --wa:#3ccf7a; --wa-soft:#163a26; --tg:#5aaef0; --tg-soft:#16304a;
  --out:#1d3550; --ai:#2a2142; --ai-ink:#b9a2ff; --warn:#fb923c; color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);display:flex;flex-direction:column;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.brand i{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-block}
.sample{font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:99px}
.spacer{flex:1}
.search{min-width:0;flex:0 1 240px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:transparent;padding:6px 10px;cursor:pointer;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.board{flex:1;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{flex:0 0 260px;display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;max-height:100%}
.col.over{outline:2px dashed var(--accent);outline-offset:-2px}
.col-h{display:flex;align-items:baseline;gap:8px;padding:10px 12px 6px}
.col-h b{font-size:13px}
.col-h .n{font-size:12px;color:var(--muted)}
.col-h .sum{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cards{display:flex;flex-direction:column;gap:8px;padding:6px 8px 10px;overflow-y:auto;min-height:60px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left}
.card:hover{border-color:var(--muted)}
.card.dragging{opacity:.4}
.row{display:flex;align-items:center;gap:6px;min-width:0}
.name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;letter-spacing:.02em;flex:none}
.ch.wa{background:var(--wa-soft);color:var(--wa)} .ch.tg{background:var(--tg-soft);color:var(--tg)}
.unread{margin-left:auto;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;border-radius:99px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;flex:none}
.part{font-size:12px;color:var(--fg)}
.car{font-size:12px;color:var(--muted)}
.meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.last{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--line);padding-top:6px}
.late{color:var(--warn);font-weight:600}
/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,15,20,.4)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(920px,100%);background:var(--surface);display:flex;flex-direction:column;border-left:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.d-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.d-h h2{font-size:17px;margin:0}
.d-h .phone{font-family:var(--mono);font-size:12px;color:var(--muted)}
.x{margin-left:auto;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);width:32px;height:32px;cursor:pointer;font-size:18px;line-height:1}
.d-body{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0}
.fields{border-right:1px solid var(--line);overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.f input,.f select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);min-width:0}
.f input.mono{font-family:var(--mono);font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.pay .pl{display:flex;justify-content:space-between;font-size:13px}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.chat{display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.m{max-width:78%;padding:8px 11px;border-radius:10px;font-size:14px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.m.in{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.m.out{align-self:flex-end;background:var(--out)}
.m small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.day{align-self:center;font-size:11px;color:var(--muted)}
.compose{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.compose textarea{width:100%;box-sizing:border-box;min-height:64px;max-height:180px;resize:vertical;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.compose textarea.ai{background:var(--ai);border-color:var(--ai-ink)}
.c-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--muted);flex:1;min-width:140px}
.btn{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);padding:8px 12px;cursor:pointer;font-weight:500;font-size:13px}
.btn.aibtn{color:var(--ai-ink);border-color:var(--ai-ink);background:var(--ai)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:var(--r);font-size:13px}
.tabs{display:none}
@media (max-width:720px){
  .tabs{display:flex;flex-basis:100%}
  .tabs button{flex:1}
  .d-body{grid-template-columns:1fr}
  .d-body.show-chat .fields,.d-body.show-fields .chat{display:none}
  .fields{border-right:0}
  .col{flex-basis:78vw}
  .search{flex-basis:100%}
}
@media (prefers-reduced-motion:no-preference){.drawer{animation:slide .18s ease-out}@keyframes slide{from{transform:translateX(24px);opacity:.6}}}
/* app additions */
html,body{margin:0}
body{font-size:14px}
.top .btn{padding:6px 10px}
.empty{color:var(--muted);font-size:12px;text-align:center;padding:12px 4px}
.notice{margin:0;padding:8px 16px;background:var(--accent-soft);color:var(--fg);font-size:13px;border-bottom:1px solid var(--line)}
.m img{max-width:240px;border-radius:6px;display:block}
.m a{color:inherit}
.m.err{outline:1px solid var(--warn)}
.st{margin-left:4px}
.f textarea{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);min-height:60px;resize:vertical;font:inherit}
.ch.ig{background:var(--accent-soft);color:var(--accent)}
.col.lost{opacity:.75}
.login{display:grid;place-items:center;height:100%}
.login form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px;width:min(320px,calc(100% - 32px))}
.login input{padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.login .error{color:var(--warn);font-size:13px;min-height:1em}
.two>.f{min-width:0}
.f input,.f select,.f textarea{width:100%}
.drawer{overflow:hidden}
.mine{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.menu{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(100% - 4px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;min-width:200px;padding:4px}
.menu button{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:6px;cursor:pointer}
.menu button:hover{background:var(--surface-2)}
.who{font-size:11px;color:var(--muted)}
.panel{width:min(560px,100%)}
.p-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.users{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r)}
.u{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.u:first-child{border-top:0}
.u .grow{flex:1;min-width:140px}
.u .u-login{font-family:var(--mono);font-size:12px;color:var(--muted)}
.u.off{opacity:.55}
.role{font-size:11px;padding:2px 6px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line)}
.p-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.p-form h3{grid-column:1/-1;margin:0;font-size:14px}
.p-form .btn{grid-column:1/-1;justify-self:start}
.p-form .err{grid-column:1/-1;color:var(--warn);font-size:13px;min-height:1em}
@media (max-width:720px){.p-form{grid-template-columns:1fr}}
.avatar{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:700;display:grid;place-items:center}