/* Layout: app shell. Fixed sidebar (desktop) / bottom tab bar (phone), top bar, one scrolling work area.
   Defaults are the LoonStack brand (navy #0A2131, sky #499FCF, red #DB352B; Poppins display, Inter body: round3/brand/BRAND-KIT.md).
   A person's color theme (themes.css, data-palette) overrides the colors; "loonstack" is the default palette. */
:root{
  --bg:#f3f6f9; --surface:#ffffff; --sunk:#e9eff4; --ink:#0a2131; --muted:#4b5f70; --line:#d6e0e8;
  --lake:#1b6a9c; --lake-ink:#ffffff; --lake-soft:#e2eff8; --eye:#c22d23; --eye-soft:#fdecea;
  --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa;
  --shadow:0 1px 2px rgba(10,33,49,.06),0 8px 24px rgba(10,33,49,.08);
  --f-display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:10px; --side:236px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#05121c; --surface:#0a2131; --sunk:#071a28; --ink:#e9f2f8; --muted:#9db3c4; --line:#1b3549;
  --lake:#499fcf; --lake-ink:#05121c; --lake-soft:#0d2638; --eye:#ff8a7f; --eye-soft:#3a1d1a;
  --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#05121c; --surface:#0a2131; --sunk:#071a28; --ink:#e9f2f8; --muted:#9db3c4; --line:#1b3549;
  --lake:#499fcf; --lake-ink:#05121c; --lake-soft:#0d2638; --eye:#ff8a7f; --eye-soft:#3a1d1a;
  --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:.875rem;line-height:1.5;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
/* Text follows the person's text size: every size is in rem, and on iPhone and iPad the root size comes from the
   system's Larger Text setting (17px at the default size, like body text in native apps). */
@supports (font:-apple-system-body){@media (pointer:coarse){html{font:-apple-system-body}}}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--lake);outline-offset:2px;border-radius:6px}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.625rem;font-weight:750}
h2{font-size:1.0625rem;font-weight:650}
h3{font-size:.875rem;font-weight:650}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}

/* shell */
.demo-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--ink);color:var(--bg);font-size:.7813rem;padding:7px 16px;text-align:center}
.demo-bar b{font-weight:700}
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;padding-left:env(safe-area-inset-left,0px)}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 12px}
.brand svg{flex:none}
.brand .bn{display:flex;align-items:center;gap:7px;line-height:1}
.brand .wm{display:block;height:19px;width:auto}
.brand .wm-dk{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .wm-lt{display:none}:root:not([data-theme="light"]) .brand .wm-dk{display:block}}
:root[data-theme="dark"] .brand .wm-lt{display:none}:root[data-theme="dark"] .brand .wm-dk{display:block}
.brand .bn-crm{font-family:var(--f-display);font-weight:600;font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.brand .bs{margin-top:5px}
.ls-tile rect:first-child{stroke:var(--line);stroke-width:1.5}
.brand .bs{font-size:.75rem;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px 16px}
.nav .grp{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;padding:14px 10px 4px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;text-align:left;color:var(--ink);font-weight:500}
.nav button:hover{background:var(--sunk)}
.nav button[aria-current="page"]{background:var(--lake-soft);color:var(--lake);font-weight:650}
.nav button .ct{margin-left:auto;font-family:var(--f-mono);font-size:.75rem;background:var(--eye-soft);color:var(--eye);padding:0 7px;border-radius:99px}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto;padding:12px 14px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:10px;padding:10px max(20px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--surface)}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:7px 11px;color:var(--muted)}
.search{min-width:0}
.search input{border:0;background:none;outline:none;flex:1;min-width:0;width:100%;color:var(--ink)}
.kbd{font-family:var(--f-mono);font-size:.75rem;border:1px solid var(--line);border-radius:5px;padding:0 5px;color:var(--muted)}
.top .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;font-weight:600;font-size:.8125rem;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--lake);border-color:var(--lake);color:var(--lake-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.ai{background:var(--violet-soft);color:var(--violet);border-color:transparent}
.btn.sm{padding:4px 9px;font-size:.75rem}
.btn.ghost{border-color:transparent;background:none}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;color:var(--ink)}
.who{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 3px;background:var(--surface)}
.who select{border:0;background:none;font-weight:600;font-size:.7813rem;outline:none;max-width:150px}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.75rem;color:#fff;flex:none}
.work{flex:1;overflow-y:auto;padding:22px max(24px,env(safe-area-inset-right,0px)) 40px max(24px,env(safe-area-inset-left,0px));min-height:0}
.view{display:flex;flex-direction:column;gap:18px;max-width:1280px;margin:0 auto}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vhead p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.vhead .acts{display:flex;gap:8px;flex-wrap:wrap}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card h2{margin-bottom:10px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.kpi .v{font-family:var(--f-display);font-size:1.625rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:.75rem;color:var(--muted)}
.kpi .d b{font-weight:600}
.up{color:var(--good)} .down{color:var(--eye)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.p-lake{background:var(--lake-soft);color:var(--lake)} .p-eye{background:var(--eye-soft);color:var(--eye)}
.p-amb{background:var(--amber-soft);color:var(--amber)} .p-good{background:var(--good-soft);color:var(--good)}
.p-vio{background:var(--violet-soft);color:var(--violet)} .p-mut{background:var(--sunk);color:var(--muted)}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);min-width:0}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:.7813rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--muted);background:none;flex:none;display:grid;place-items:center;padding:0}
.check.done{background:var(--good);border-color:var(--good)}
.check.done::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.row.done .t{text-decoration:line-through;color:var(--muted)}

/* AI brief */
.brief{background:linear-gradient(135deg,var(--violet-soft),var(--lake-soft));border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.brief ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.brief .acts{display:flex;flex-direction:column;gap:8px}

/* tables */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--sunk)}
.namecell{display:flex;align-items:center;gap:10px;font-weight:600}
.r{text-align:right}

/* pipeline */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:340px}
.col.over{outline:2px dashed var(--lake);outline-offset:-4px}
.colh{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 4px 6px}
.colh .sum{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 11px;cursor:grab;display:flex;flex-direction:column;gap:6px}
.deal:hover{border-color:var(--lake)}
.deal .dn{font-weight:650}
.deal .dm{display:flex;justify-content:space-between;align-items:center;font-size:.7813rem;color:var(--muted);gap:6px}
.deal .amt{font-family:var(--f-mono);color:var(--ink);font-weight:500}
.stale{box-shadow:inset 3px 0 0 var(--eye)}

/* drawer & modal */
.scrim{position:fixed;inset:0;background:rgba(8,16,15,.42);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);z-index:41;display:flex;flex-direction:column;box-shadow:var(--shadow);border-left:1px solid var(--line)}
.dhead{padding:16px max(18px,env(safe-area-inset-right,0px)) 16px max(18px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;padding-top:calc(16px + env(safe-area-inset-top,0px))}
.dbody{flex:1;overflow-y:auto;padding:16px max(18px,env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}
.modal{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(100% - 48px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line)}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.mbody{padding:18px}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:7px 12px;font-size:.8125rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.tl{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:6px}
.tl .ev{position:relative;padding:0 0 14px 16px}
.tl .ev::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--lake)}
.tl .ev .when{font-size:.75rem;color:var(--muted)}
.ai-box{background:var(--violet-soft);border-radius:9px;padding:12px 14px;font-size:.8438rem}
.ai-box .eyebrow{color:var(--violet)}

/* inbox */
.inbox{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-height:540px;overflow:hidden}
.threads{border-right:1px solid var(--line);overflow-y:auto;max-height:640px}
.th{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.th:hover{background:var(--sunk)}
.th[aria-selected="true"],.th[aria-current="true"]{background:var(--lake-soft)}
.th .grow{flex:1;min-width:0}
.th .t{font-weight:650;display:flex;justify-content:space-between;gap:6px}
.th .s{font-size:.7813rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread .t::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--eye);flex:none;align-self:center}
.convo{display:flex;flex-direction:column;min-width:0}
.convo .ch{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:440px}
.msg{max-width:78%;padding:9px 12px;border-radius:12px;font-size:.8438rem;overflow-wrap:anywhere}
.msg.in{background:var(--sunk);align-self:flex-start;border-bottom-left-radius:4px}
.msg.out{background:var(--lake);color:var(--lake-ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg .meta{font-size:.75rem;opacity:.75;margin-top:3px}
.composer{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.composer textarea{width:100%;min-height:64px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface)}
.composer .cr{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
.chan{display:flex;gap:4px;background:var(--sunk);padding:3px;border-radius:8px}
.chan button{border:0;background:none;padding:4px 10px;border-radius:6px;font-size:.7813rem;font-weight:600;color:var(--muted)}
.chan button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* quote builder */
.qb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
.tiers{display:flex;gap:6px;flex-wrap:wrap}
.tiers button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-weight:600}
.tiers button[aria-pressed="true"]{border-color:var(--lake);background:var(--lake-soft);color:var(--lake)}
.lines{display:flex;flex-direction:column;gap:8px}
.line{display:grid;grid-template-columns:minmax(0,1fr) 64px 96px 30px;gap:8px;align-items:center}
.line input{border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--surface);min-width:0;width:100%}
.line input.n{text-align:right;font-family:var(--f-mono)}
.totals{display:flex;flex-direction:column;gap:4px;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.totals div{display:flex;justify-content:space-between}
.totals .big{font-family:var(--f-display);font-size:1.25rem;font-weight:700}
.toggle{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 0}
.sw{width:38px;height:22px;border-radius:99px;background:var(--line);border:0;position:relative;flex:none;padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s}
.sw[aria-checked="true"]{background:var(--lake)}
.sw[aria-checked="true"]::after{transform:translateX(16px)}
.paper{background:#fff;color:#1b2422;border-radius:10px;border:1px solid var(--line);padding:20px;font-size:.8125rem}
.paper h3{font-size:1.125rem;color:#1b2422}
.paper .pl{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #e6ebe9;gap:10px}
.paper .opt{border:1.5px solid #dfe5e2;border-radius:9px;padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;background:#fff;width:100%;text-align:left;color:#1b2422}
.paper .opt[aria-pressed="true"]{border-color:#0d6b66;background:#e2f0ee}
.paper input{border:1px solid #cfd8d5;border-radius:7px;padding:8px 10px;width:100%;background:#fff;color:#1b2422;font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.25rem}
.paper .pbtn{background:#0d6b66;color:#fff;border:0;border-radius:8px;padding:10px 14px;font-weight:700;width:100%}
.paper .pbtn:disabled{opacity:.45;cursor:not-allowed}

/* calendar */
.cal{display:grid;grid-template-columns:52px repeat(5,minmax(120px,1fr));border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;min-width:700px}
.calwrap{overflow-x:auto}
.cal .hd{padding:8px;border-bottom:1px solid var(--line);font-weight:650;font-size:.7813rem;background:var(--sunk)}
.cal .hd.today{color:var(--lake)}
.cal .hr{font-size:.75rem;color:var(--muted);padding:4px 6px;border-top:1px solid var(--line);height:48px;font-family:var(--f-mono)}
.cal .cell{border-top:1px solid var(--line);border-left:1px solid var(--line);height:48px;position:relative}
.job{position:absolute;left:4px;right:4px;border-radius:7px;padding:5px 7px;font-size:.75rem;line-height:1.3;overflow:hidden;z-index:1;cursor:pointer;border-left:3px solid}
.job b{display:block;font-size:.75rem}
.j-lake{background:var(--lake-soft);border-color:var(--lake);color:var(--ink)}
.j-amb{background:var(--amber-soft);border-color:var(--amber);color:var(--ink)}
.j-vio{background:var(--violet-soft);border-color:var(--violet);color:var(--ink)}
.j-good{background:var(--good-soft);border-color:var(--good);color:var(--ink)}

/* templates */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:.7813rem;font-weight:600}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips button[aria-pressed="true"] .muted{color:inherit;opacity:.85}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tpl{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0}
.tpl:hover{border-color:var(--lake)}
.thumb{aspect-ratio:4/3;max-width:100%;background:var(--sunk);padding:12px;display:flex;justify-content:center}
.mini{width:78%;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:7px;display:flex;flex-direction:column;gap:4px}
.mini i{display:block;height:5px;border-radius:2px;background:#dfe5e2}
.mini .hero{height:30px;border-radius:3px}
.mini .cta{height:8px;width:40%;border-radius:3px;align-self:center}
.tpl .tm{padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.tpl .tm b{font-weight:650}
.email{max-width:560px;margin:0 auto;background:#fff;color:#1d2725;border-radius:10px;overflow:hidden;border:1px solid #e1e6e4;font-size:.875rem}
.email .eh{padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.email .ehero{padding:26px 24px;color:#fff}
.email .ehero h3{font-size:1.5rem;color:#fff;font-family:var(--f-display)}
.email .eb{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.email .ecta{display:inline-block;padding:11px 18px;border-radius:8px;color:#fff;font-weight:700;align-self:flex-start}
.email .ef{padding:14px 24px;font-size:.75rem;color:#6b7774;background:#f4f6f5}

/* automations */
.flow{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.step{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--surface);display:flex;gap:10px;align-items:center;min-width:min(380px,100%)}
.step .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.arrow{width:2px;height:18px;background:var(--line);margin-left:22px}

/* charts */
.chart svg{width:100%;height:auto;display:block}
.bar{fill:var(--lake)} .bar.alt{fill:var(--lake-soft)}
.axis{fill:var(--muted);font-size:.75rem;font-family:var(--f-mono)}
.gridl{stroke:var(--line);stroke-width:1}
.hbar{display:flex;flex-direction:column;gap:9px}
.hbar .hr2{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:.8125rem}
.hbar .trk{height:10px;background:var(--sunk);border-radius:99px;overflow:hidden}
.hbar .fl{height:100%;background:var(--lake);border-radius:99px}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.plan{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:10px}
.plan.feat{border:2px solid var(--lake)}
.plan .price{font-family:var(--f-display);font-size:2.125rem;font-weight:750;letter-spacing:-.02em}
.plan ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:.8438rem}
.bundle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.yes{color:var(--good);font-weight:700} .no{color:var(--muted)}

/* stars */
.stars{color:#d79a17;letter-spacing:1px}

/* toast */
.toast{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));margin-inline:auto;width:fit-content;bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:9px;font-weight:600;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px)}

/* AI chat */
.aichat{display:flex;flex-direction:column;gap:10px}
.aichat .sugg{display:flex;gap:6px;flex-wrap:wrap}
.aichat .sugg button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 11px;font-size:.7813rem}
.aiout{display:flex;flex-direction:column;gap:10px;max-height:52vh;max-height:52dvh;overflow-y:auto}
.aiq{align-self:flex-end;background:var(--lake);color:var(--lake-ink);padding:8px 12px;border-radius:12px;max-width:85%}
.aia{background:var(--violet-soft);padding:10px 13px;border-radius:12px;max-width:95%}
.aia ul{margin:6px 0 0;padding-left:18px}
.ai-recs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:.8125rem}
.ai-recs .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:4px 10px;font-size:.8125rem;cursor:pointer}
.ai-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-foot p{font-size:.75rem;margin:0}
.ai-ls{margin-bottom:14px}
.aiin{display:flex;gap:8px}
.aiin input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--surface)}

/* mobile tab bar */
.tabbar{display:none}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.plans{grid-template-columns:1fr}.qb{grid-template-columns:1fr}}
@media (max-width:860px){
  .demo-bar .hide-s{display:none}
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .g3,.g2,.g21,.bundle{grid-template-columns:1fr}
  .top{padding:8px 16px}
  .top .hide-s{display:none}
  .top{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .work{padding:16px max(16px,env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .inbox{grid-template-columns:1fr}
  .inbox.open .threads{display:none}
  .inbox:not(.open) .convo{display:none}
  .brief{grid-template-columns:1fr}
  .brief .acts{flex-direction:row;flex-wrap:wrap}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:4px max(6px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .tabbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.75rem;font-weight:600;color:var(--muted);padding:4px 0;min-height:48px;position:relative}
  .tab-dot{position:absolute;top:6px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--eye)}
  body.typing .tabbar{display:none}
  .tabbar button[aria-current="page"]{color:var(--lake)}
  .who select{max-width:78px}
  .top{gap:8px}
  .who{flex:none}
  .line{grid-template-columns:minmax(0,1fr) 52px 84px 28px}
  .kv{grid-template-columns:100px minmax(0,1fr)}
}
/* iPad portrait and Split View (700 to 860px): an icon sidebar instead of the phone tab bar. */
@media (min-width:700px) and (max-width:860px) and (min-height:600px){
  .shell{grid-template-columns:76px minmax(0,1fr)}
  .side{display:flex}
  .tabbar{display:none}
  .work{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  .brand{justify-content:center;padding:14px 0 10px}
  .brand>div,.side-foot,.nav .grp{display:none}
  .nav{padding:6px 8px 16px;gap:4px}
  .nav button{justify-content:center;padding:0;min-height:48px;position:relative}
  .nav button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav button .ico{width:22px;height:22px}
}
@media (max-width:480px){.g4{grid-template-columns:1fr 1fr}.kpi .v{font-size:1.3125rem}h1{font-size:1.375rem}}
/* Small phones: the header search is a 44px magnifier that opens into a field when tapped (its label focuses the field). */
@media (max-width:480px){
  .top .search{flex:0 0 44px;max-width:44px;padding:0;justify-content:center;background:none;border-color:transparent;color:var(--ink)}
  .top .search input{flex:0 0 0;width:0;padding:0;opacity:0}
  .top .search:focus-within{flex:1 1 auto;max-width:none;padding:0 11px;justify-content:flex-start;background:var(--sunk);border-color:var(--line);color:var(--muted)}
  .top .search:focus-within input{flex:1 1 auto;width:100%;opacity:1}
}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--surface);border-radius:16px 16px 0 0;padding:8px max(14px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:8px;max-height:80%;max-height:80dvh}
.sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.sheet-grid button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.75rem;font-weight:600;position:relative;min-height:64px}
.sheet .ct{position:absolute;top:6px;right:8px;font-family:var(--f-mono);font-size:.75rem;background:var(--eye-soft);color:var(--eye);padding:0 6px;border-radius:99px}
.sheet-head{display:flex;align-items:center;gap:8px;padding-top:14px;position:relative}
.sheet-head h2{flex:1;font-size:1.0625rem}
.sheet-head .btn{min-height:44px;padding:0 14px;font-size:.875rem}
.sheet-grab{position:absolute;top:0;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:99px;background:var(--line)}
.sheet-hint{margin:0;font-size:.8125rem;display:none}
.sheet.editing .sheet-hint{display:block}
.sheet.editing [data-go][aria-pressed="true"]{border-color:var(--lake);background:var(--lake-soft);color:var(--lake)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- app additions ---- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:.7813rem;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea,.input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
.field textarea{min-height:90px;resize:vertical}
.field .hint{font-size:.75rem;color:var(--muted)}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formgrid .full{grid-column:1/-1}
@media (max-width:640px){.formgrid{grid-template-columns:minmax(0,1fr)}}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:28px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.empty h3{color:var(--ink)}
.btn.danger{color:var(--eye);border-color:var(--eye-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.center-screen{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.field select{max-width:100%}
/* WebKit counts a select's longest option toward the page width, so a long option made the sign-up page scroll sideways. */
select{contain:paint}
.authcard{width:min(460px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--lake);border-bottom-color:var(--lake)}
/* Phones: no tab hidden behind sideways scrolling. Up to 4 tabs wrap; 5 or more become a picker (LS.tabs). */
.tabs-pick{display:none}
@media (max-width:640px){
  .tabs.has-pick{display:none}
  .tabs-pick{display:block}
  .tabs-pick select{width:100%;font-weight:600}
  .tabs{flex-wrap:wrap;overflow-x:visible}
}
.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--lake);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--sunk),var(--line),var(--sunk));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
.confirm-box{display:flex;flex-direction:column;gap:14px}
.mono{font-family:var(--f-mono)}
.right{text-align:right}
.badge-count{font-family:var(--f-mono);font-size:.75rem;background:var(--eye-soft);color:var(--eye);padding:0 7px;border-radius:99px}