/* ============================================================
   Channel Partner Portal — warm editorial design system
   (sage · cream · gold · Fraunces + Outfit)
   Per-page injected brand vars: --accent --accent-d --ink --on-accent
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4efe4; --card:#ffffff; --cream:#f8f3ea; --cream-warm:#f3ece0; --faint:#f3ece0;
  --sage:#5e9a73; --sage-dark:#3f6e52; --sage-deep:#1d3a2a; --sage-haze:#e8f0ea;
  --gold:#b08a4a; --gold-light:#d4b889;
  --line:rgba(94,154,115,.18); --line-2:rgba(94,154,115,.34);
  --text:#1a1f1c; --ink-soft:#2d3530; --muted:#5a635d; --muted-2:#8a918c;
  --radius:16px; --radius-sm:11px; --radius-xs:9px; --r-pill:999px;
  --sh-1:0 2px 6px rgba(26,31,28,.05); --sh-pop:0 6px 20px rgba(26,31,28,.09);
  --sh-2:0 16px 40px rgba(26,31,28,.13);
  --font-ui:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-disp:'Fraunces',Georgia,'Times New Roman',serif;
  --side-w:248px;
  --ok-bg:#e8f0ea; --ok-fg:#2f5f42;
  --warn-bg:#f7edd6; --warn-fg:#8a6416;
  --err-bg:#fbe9e2; --err-fg:#9a3b2f;
  --accent:#5e9a73; --accent-d:#3f6e52; --ink:#1d3a2a; --on-accent:#f8f3ea;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--sage-dark);text-decoration:none}
img{max-width:100%;display:block}
::selection{background:color-mix(in srgb,var(--gold) 34%,#fff)}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d8d1c2;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#c8c0ae}
.tnum,.statc .n,.stat .s .n,td .amt,.amt{font-variant-numeric:tabular-nums}
.eyebrow{font:600 10px/1 var(--font-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--sage-dark);margin-bottom:8px}

/* ============================================================ APP SHELL */
.app{min-height:100vh;display:grid;grid-template-columns:var(--side-w) 1fr}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;color:var(--cream);z-index:40;
  background:var(--ink);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 90%,#000),var(--ink) 62%)}
.side-brand{display:flex;align-items:center;gap:11px;padding:calc(22px + var(--safe-t)) 18px 18px;border-bottom:1px solid rgba(248,243,234,.1)}
.side-brand .mk{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(176,138,74,.18);border:1px solid rgba(212,184,137,.42);color:var(--gold-light);
  font:600 15px/1 var(--font-disp)}
.side-brand .nm{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.side-brand .nm b{font:500 16px/1.1 var(--font-disp);color:var(--cream);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-brand .nm span{font:700 8px/1 var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-top:4px}
.side-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-nav .lbl{font:700 9px/1 var(--font-ui);letter-spacing:.22em;text-transform:uppercase;color:rgba(248,243,234,.4);padding:14px 12px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  font:500 13.5px/1 var(--font-ui);color:rgba(248,243,234,.78);position:relative;transition:.22s}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.9}
.nav-item:hover{background:rgba(248,243,234,.1);color:var(--cream)}
.nav-item.on{background:rgba(176,138,74,.18);color:var(--gold-light);font-weight:600}
.nav-item.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.nav-item.on svg{opacity:1}
.nav-item .count{margin-left:auto;background:var(--gold);color:var(--sage-deep);font:800 10.5px/1 var(--font-ui);
  min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.side-foot{margin-top:auto;padding:14px 12px;border-top:1px solid rgba(248,243,234,.1)}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 8px 10px}
.side-user .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold);color:var(--sage-deep);font:600 14px/1 var(--font-disp)}
.side-user .in{min-width:0}
.side-user .in b{display:block;font:500 12.5px/1.2 var(--font-ui);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .in span{font-size:11px;color:rgba(248,243,234,.5)}
.side-logout{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;
  font:500 12.5px/1 var(--font-ui);color:rgba(248,243,234,.55);transition:.22s}
.side-logout svg{width:16px;height:16px}
.side-logout:hover{background:rgba(229,90,77,.16);color:#ffb8af}

/* "Get Phone App" — hidden by default; layout.php adds .bigscreen to <html>
   when the device's smaller screen dimension is 600px+, i.e. tablets and
   desktops. A phone doesn't need a QR pointing at itself. */
.side-getapp{display:none;width:100%;align-items:center;gap:9px;padding:9px 12px;margin-bottom:2px;
  border:none;border-radius:9px;background:none;text-align:left;cursor:pointer;
  font:500 12.5px/1 var(--font-ui);color:rgba(248,243,234,.55);transition:.22s}
.side-getapp svg{width:16px;height:16px}
.side-getapp:hover{background:rgba(248,243,234,.09);color:var(--cream)}
.bigscreen .side-getapp{display:flex}

/* phone-install dialog */
.qrov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,25,18,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.qrov.on{opacity:1;visibility:visible}
.qrbox{position:relative;width:min(330px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:26px 26px 22px;text-align:center;box-shadow:0 22px 60px rgba(20,25,18,.3);
  transform:translateY(8px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.qrov.on .qrbox{transform:none}
.qrbox h3{font:400 20px/1.25 var(--font-disp);color:var(--ink);letter-spacing:-.01em}
.qrbox p{font-size:13px;color:var(--muted);line-height:1.55;margin-top:8px}
.qrbox .qrimg{margin:18px auto 14px;width:200px;height:200px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.qrbox .qrimg img{display:block;width:100%;height:100%}
.qrbox .qrurl{font:500 11.5px/1.4 var(--font-ui);color:var(--muted-2);word-break:break-all}
.qrbox .qrx{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:50%;
  background:var(--faint);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.18s}
.qrbox .qrx:hover{background:var(--line);color:var(--ink)}
.qrbox .qrx svg{width:15px;height:15px}

.main{min-width:0;display:flex;flex-direction:column}
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:64px;padding:var(--safe-t) 30px 0;box-sizing:content-box;min-height:64px;
  background:color-mix(in srgb,var(--bg) 84%,#fff);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--line)}
.appbar .menu-btn{display:none;background:none;border:none;padding:6px;border-radius:8px;color:var(--text);cursor:pointer}
.appbar .menu-btn svg{width:22px;height:22px}
.appbar .title{font:400 20px/1 var(--font-disp);letter-spacing:-.01em;color:var(--ink-soft)}
.appbar .spacer{flex:1}
.appbar .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);font:600 12.5px/1 var(--font-ui);box-shadow:var(--sh-1)}
.appbar .chip{white-space:nowrap}
.appbar .chip .bn-short{display:none}
.appbar .chip .bn-full{overflow:hidden;text-overflow:ellipsis;max-width:150px}
.appbar .chip .dot{width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font:800 10px/1 var(--font-ui);display:grid;place-items:center}
.content{padding:28px 30px 64px;max-width:1200px;width:100%}
.side-backdrop{display:none;position:fixed;inset:0;background:rgba(20,25,18,.45);z-index:35}
.banner{color:var(--cream);font:600 13px/1.4 var(--font-ui)}
.banner .wrap{max-width:none;padding:11px 30px;text-align:center;display:block}
.banner a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}

/* ============================================================ HEADINGS */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:28px 0 16px}
.head:first-child{margin-top:8px}
.head h1{font:400 26px/1.05 var(--font-disp);letter-spacing:-.015em;color:var(--ink-soft)}
.head h1 em{font-style:italic;color:var(--sage-dark)}
.head .sub{font:500 12px/1 var(--font-ui);color:var(--muted)}
.backlink{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);color:var(--muted);margin:2px 0 12px;transition:.2s}
.backlink:hover{color:var(--sage-deep)}

/* ============================================================ TABS / FILTER PILLS */
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 2px}
.tabs a{padding:9px 15px;border-radius:var(--r-pill);font:600 11.5px/1 var(--font-ui);letter-spacing:.03em;
  background:var(--card);border:1px solid var(--line);color:var(--muted);transition:.22s}
.tabs a:hover{border-color:var(--sage);color:var(--sage-deep)}
.tabs a.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ============================================================ STAT CARDS */
.stats,.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:6px 0 4px}
.statc,.stat .s{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px 14px;box-shadow:var(--sh-1);transition:.2s;overflow:hidden}
.statc:hover,.stat .s:hover{box-shadow:var(--sh-pop);transform:translateY(-1px)}
.statc .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:var(--sage-haze);color:var(--sage)}
.statc .ic svg{width:15px;height:15px}
.statc .n,.stat .s .n{font:400 25px/1 var(--font-disp);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.statc .l,.stat .s .l{font:600 9.5px/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:7px}
a.statc{cursor:pointer}
a.statc::after{content:"\2197";position:absolute;right:16px;top:14px;font:700 16px/1 var(--font-ui);color:var(--gold);opacity:.55}
.statc.hl{background:var(--ink);border-color:transparent}
.statc.hl .n{color:var(--gold-light)}
.statc.hl .l{color:rgba(248,243,234,.65)}
.statc.hl .ic{background:rgba(212,184,137,.2);color:var(--gold-light)}

/* ============================================================ PANELS / CARDS */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--sh-1)}
.panel h4{font:700 10px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
.panel p{font-size:14px;color:var(--ink-soft)}
.cols{display:grid;grid-template-columns:1fr;gap:18px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* project grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;padding-bottom:24px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.2s;box-shadow:var(--sh-1)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.pcard .ph{height:160px;background:var(--sage-haze) center/cover no-repeat;position:relative}
.pcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,25,18,.3))}
.pcard .ph .tag{position:absolute;top:12px;left:12px;z-index:1;background:rgba(29,58,42,.82);color:var(--cream);
  font:600 11px/1 var(--font-ui);padding:5px 11px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
.pcard .pb{padding:16px 18px 18px}
.pcard .pb h3{font:500 18px/1.1 var(--font-disp);color:var(--ink);margin-bottom:4px}
.pcard .pb .loc{font-size:12.5px;color:var(--muted);margin-bottom:13px;display:flex;align-items:center;gap:5px}
.pcard .pb .meta{display:flex;gap:20px;font:600 13.5px/1.2 var(--font-ui);color:var(--sage-deep)}
.pcard .pb .meta b{display:block;font:600 9.5px/1 var(--font-ui);color:var(--muted-2);text-transform:uppercase;letter-spacing:.12em;margin-bottom:3px}

/* detail hero */
.detail{padding-bottom:40px}
.hero{height:260px;border-radius:var(--radius);background:var(--sage-haze) center/cover no-repeat;margin:8px 0 20px;position:relative;overflow:hidden}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;color:var(--cream);background:linear-gradient(transparent,rgba(20,25,18,.8))}
.hero .cap h1{font:500 27px/1.1 var(--font-disp)}
.hero .cap p{font-size:13.5px;opacity:.92}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px}
.gal img{width:100%;height:104px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.pitch{background:#faf3e2;border:1px solid #ecdcb6;border-radius:12px;padding:18px}
.pitch .lbl{font:700 10px/1 var(--font-ui);color:var(--gold);text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:6px;margin-bottom:9px}
.actionbar{display:grid;grid-template-columns:1fr 1fr;gap:11px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 26%);padding:14px 0 18px;z-index:10}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--r-pill);
  font:600 12.5px/1 var(--font-ui);letter-spacing:.03em;border:1px solid transparent;cursor:pointer;
  transition:all .3s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-p{background:var(--ink);color:var(--cream)}
.btn-p:hover{background:var(--sage-deep);color:var(--cream);transform:translateY(-1px)}
.btn-o{background:var(--card);border-color:var(--line);color:var(--ink-soft)}
.btn-o:hover{border-color:var(--sage);color:var(--sage-deep)}
.btn-d{background:var(--gold);color:var(--sage-deep)}
.btn-d:hover{background:var(--gold-light);color:var(--sage-deep)}
.btn-danger{background:#c0533a;color:#fff}
.btn-danger:hover{background:#a63b38;color:#fff}
.cmodal-bg{position:fixed;inset:0;z-index:200;background:rgba(20,25,18,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;animation:cmfade .16s ease}
.cmodal{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);
  max-width:400px;width:100%;padding:26px 24px;animation:cmpop .2s cubic-bezier(.16,1,.3,1)}
.cmodal-msg{font:400 18px/1.4 var(--font-disp);color:var(--ink);margin-bottom:22px}
.cmodal-act{display:flex;gap:10px;justify-content:flex-end}
@keyframes cmfade{from{opacity:0}}
@keyframes cmpop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.btn:active{transform:translateY(0)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:11.5px}

/* ============================================================ FORMS */
label{display:block;font:600 10.5px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}
input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:400 14px/1.4 var(--font-ui);background:var(--card);color:var(--ink);transition:.25s}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 4px rgba(94,154,115,.12)}
textarea{min-height:92px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a635d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:38px}
.ok,.err,.warn{font:500 13px/1.5 var(--font-ui);padding:12px 16px;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.ok{background:var(--ok-bg);color:var(--ok-fg);border:1px solid rgba(94,154,115,.3)}
.err{background:var(--err-bg);color:var(--err-fg);border:1px solid #dbb1a6}
.warn{background:var(--warn-bg);color:var(--warn-fg);border:1px solid #e6d3a0}

/* ============================================================ TABLES */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-1)}
th,td{text-align:left;padding:14px 18px;font-size:13px;vertical-align:middle}
th{background:var(--cream-warm);font:700 10px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
td{border-bottom:1px solid var(--line);color:var(--ink-soft)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--sage-haze)}
td b{font-weight:600;color:var(--ink)}

/* ============================================================ PILLS / BADGES */
.pill{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--font-ui);letter-spacing:.05em;padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap;text-transform:capitalize}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.active{background:#e6f0e6;color:#2f6a3d}
.pill.contacted{background:#e6eef7;color:#2b62a0}
.pill.site_visit{background:#efe7f7;color:#6a3ea0}
.pill.negotiation{background:#f7edd6;color:#8a6416}
.pill.converted,.pill.confirmed,.pill.approved{background:#dfeef0;color:#1c6a72}
.pill.paid,.pill.registered{background:#e6f0e0;color:#3a6b16}
.pill.pending{background:#f7edd6;color:#8a6416}
.pill.expired,.pill.inactive{background:#ece8df;color:#6a6f66}
.pill.lost,.pill.cancelled{background:#fbe4de;color:#9a3b2f}
.badge{position:absolute;top:-8px;right:-12px;background:#c0533a;color:#fff;font:800 10px/1 var(--font-ui);min-width:17px;height:17px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.tag-new{display:inline-block;background:var(--gold);color:#fff;font:800 8.5px/1 var(--font-ui);
  letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px;vertical-align:middle;margin-left:2px}

/* ============================================================ TIMELINE */
.tl{border-left:2px solid var(--line);margin:10px 0 0 7px;padding-left:18px}
.tl .ev{position:relative;padding:8px 0}
.tl .ev::before{content:'';position:absolute;left:-25px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 3px var(--sage-haze)}
.tl .ev .t{font-size:13.5px;color:var(--ink-soft)}
.tl .ev .d{font-size:11px;color:var(--muted);margin-top:1px}

/* ============================================================ EMPTY */
.empty{background:var(--card);border:1px dashed var(--line-2);border-radius:var(--radius);padding:54px 24px;text-align:center;color:var(--muted);font-size:14px}
.empty .ttl{font:500 19px/1.2 var(--font-disp);color:var(--ink);margin-bottom:6px}

/* ============================================================ AUTH */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-brand{position:relative;overflow:hidden;color:var(--cream);padding:calc(48px + var(--safe-t)) 46px 48px;display:flex;flex-direction:column;
  background:var(--ink);background:linear-gradient(158deg,color-mix(in srgb,var(--ink) 88%,#000),var(--ink) 55%,color-mix(in srgb,var(--gold) 22%,var(--ink)))}
.auth-brand::before{content:"";position:absolute;top:-160px;right:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(212,184,137,.16),transparent 65%)}
.auth-brand::after{content:"";position:absolute;bottom:-180px;left:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(94,154,115,.18),transparent 65%)}
.auth-brand>*{position:relative;z-index:1}
.auth-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(176,138,74,.2);border:1px solid rgba(212,184,137,.45);color:var(--gold-light);font:600 20px/1 var(--font-disp)}
.auth-hero{font:400 40px/1.08 var(--font-disp);letter-spacing:-.01em;margin-top:auto}
.auth-hero em{font-style:italic;color:var(--gold-light)}
.auth-brand .sub{font-size:15px;color:rgba(248,243,234,.74);margin-top:15px;max-width:34ch}
.auth-points{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:12px}
.auth-points li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:rgba(248,243,234,.84)}
.auth-points li svg{width:18px;height:18px;flex:none;color:var(--gold-light)}
.auth-fine{margin-top:28px;font:600 10px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:rgba(248,243,234,.5)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:calc(40px + var(--safe-t)) 28px calc(40px + var(--safe-b));background:var(--bg)}
.auth-card{width:100%;max-width:376px}
.auth-card h2{font:400 27px/1.1 var(--font-disp);letter-spacing:-.01em;color:var(--ink)}
.auth-card h2 em{font-style:italic;color:var(--sage-dark)}
.auth-card .lead{font-size:13.5px;color:var(--muted);margin:8px 0 22px}
.auth-card .btn{margin-top:22px}
.auth-hint{margin-top:18px;font-size:12px;color:var(--muted-2);text-align:center}

.formcard{max-width:404px;margin:56px auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 30px;box-shadow:var(--sh-2)}
.formcard h1{font:500 22px/1.1 var(--font-disp);color:var(--ink);margin-bottom:6px}
.formcard .lead{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.mark-mini{width:40px;height:40px;border-radius:50%;background:rgba(176,138,74,.18);border:1px solid rgba(212,184,137,.4);color:var(--gold-light);font:600 17px/1 var(--font-disp);display:grid;place-items:center;margin-bottom:16px}

/* micro-site enquiry */
.enq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:34px;box-shadow:var(--sh-1)}
.enq h3{font:500 23px/1.1 var(--font-disp);margin-bottom:6px;color:var(--ink)}
.enq p{color:var(--muted);font-size:14px;margin-bottom:15px}
.enq input,.enq textarea{margin-bottom:11px}
.enq button{width:100%;background:var(--ink);color:var(--cream);font:600 14px/1 var(--font-ui);letter-spacing:.03em;border:none;padding:14px;border-radius:var(--r-pill);cursor:pointer;transition:.3s}
.enq button:hover{background:var(--sage-deep)}
.enq .done{background:var(--ok-bg);color:var(--ok-fg);padding:15px;border-radius:11px;font-size:14px;text-align:center}

/* brand switcher */
.brandsw{position:relative}
.brandsw>summary{list-style:none;cursor:pointer;user-select:none;transition:.2s}
.brandsw>summary::-webkit-details-marker{display:none}
.brandsw>summary:hover{border-color:var(--sage)}
.brandsw>summary .cx{width:14px;height:14px;margin-left:1px;opacity:.5;transition:.2s}
.brandsw[open]>summary .cx{transform:rotate(180deg)}
.brandsw-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);padding:7px;z-index:60}
.brandsw-menu .lbl{font:700 9.5px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:7px 9px 8px}
.brandsw-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font:600 13.5px/1 var(--font-ui);color:var(--ink-soft)}
.brandsw-menu a:hover,.brandsw-menu a.on{background:var(--sage-haze)}
.brandsw-menu a .d{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--font-ui);flex:none}
.brandsw-menu a .ck{width:16px;height:16px;margin-left:auto;color:var(--sage)}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============================================================ ASSET UPLOADER */
.dz{border:1.5px dashed var(--line-2);border-radius:14px;background:var(--faint);padding:16px;cursor:pointer;transition:.2s}
.dz:hover,.dz.drag{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 8%,#fff)}
.dz.busy{opacity:.6;pointer-events:none}
.dz-face{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 10px;text-align:center;color:var(--muted)}
.dz-face svg{width:26px;height:26px;color:var(--sage)}
.dz-t{font:600 13.5px/1 var(--font-ui);color:var(--ink-soft)}
.dz-s{font-size:11.5px;color:var(--muted-2)}
/* refused-file notice under a drop zone */
.dz-refused{display:none;margin-top:8px;padding:11px 13px;border-radius:9px;
  background:var(--warn-bg,#fbf3e9);border:1px solid #e6d3a0;color:var(--warn-fg,#8a6416);
  font:500 12.5px/1.5 var(--font-ui)}
.dz-refused.on{display:block}
.dz-refused span{display:block}
.dz-refused span + span{margin-top:5px}
.dz.has .dz-face{padding:8px 10px 4px}
.dz.has .dz-face svg{display:none}
.dz-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.dz-grid:empty{display:none}
.dz-item{position:relative;width:96px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dz-item img{width:96px;height:66px;object-fit:cover;display:block}
.dz-item .dz-ic{width:96px;height:66px;display:grid;place-items:center;font-size:26px;background:var(--sage-haze)}
.dz-item .dz-meta{padding:5px 6px;font-size:9.5px;color:var(--muted);line-height:1.3}
.dz-item .dz-meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-item .dz-meta b{color:var(--sage-dark);font-weight:700}
.dz-item .dz-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border:none;border-radius:50%;
  background:rgba(20,25,18,.7);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.dz-item .dz-x:hover{background:#c0533a}

/* existing assets already on the project */
.asset-grid{display:flex;flex-wrap:wrap;gap:11px;margin:4px 0 12px}
.asset{position:relative;width:120px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;transition:.2s}
.asset.hidden-a{opacity:.5}
.asset .th{width:120px;height:80px;object-fit:cover;display:block;background:var(--sage-haze)}
.asset .th-ic{width:120px;height:80px;display:grid;place-items:center;font-size:30px;background:var(--sage-haze);text-decoration:none}
.asset .bar{display:flex;align-items:center;gap:4px;padding:6px}
.asset .bar button{flex:1;border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 0;font:600 10px/1 var(--font-ui);cursor:pointer;color:var(--muted);transition:.15s}
.asset .bar button:hover{border-color:var(--sage);color:var(--sage-deep)}
.asset .bar button.on{background:var(--sage);border-color:var(--sage);color:#fff}
.asset .bar button.del:hover{background:#c0533a;border-color:#c0533a;color:#fff}
.asset .flag{position:absolute;top:6px;left:6px;font:800 8px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 6px;border-radius:999px;background:var(--sage);color:#fff}
.asset.hidden-a .flag{background:var(--muted-2)}
.asset.del-a{outline:2px solid #c0533a;opacity:.4}
.asset.del-a::after{content:'REMOVING';position:absolute;inset:0;display:grid;place-items:center;
  font:800 10px/1 var(--font-ui);color:#c0533a;letter-spacing:.1em;background:rgba(255,255,255,.5)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.field-2{grid-template-columns:1fr}}

/* ============================================================ CUSTOM SELECT */
.xselect{position:relative;width:100%}
.x-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.x-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  font:400 14px/1.4 var(--font-ui);color:var(--ink);cursor:pointer;text-align:left;transition:.2s}
.x-btn:hover{border-color:var(--sage)}
.xselect.open .x-btn{border-color:var(--sage);box-shadow:0 0 0 4px rgba(94,154,115,.12)}
.x-btn .x-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-btn .x-lab.x-ph{color:var(--muted-2)}
.x-btn .x-cx{width:15px;height:15px;opacity:.5;flex:none;transition:.2s}
.xselect.open .x-cx{transform:rotate(180deg)}
.xselect.x-off{opacity:.6}
.x-panel{position:fixed;z-index:80;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh-2);overflow:hidden}
.x-search{padding:9px 12px;border-bottom:1px solid var(--line)}
.x-search input{border:none;padding:2px 0;font-size:14px;background:none;box-shadow:none!important;width:100%}
.x-search input:focus{outline:none;border:none;box-shadow:none!important}
.x-list{max-height:288px;overflow-y:auto;padding:6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.x-grp{font:700 9.5px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  padding:12px 11px 6px;pointer-events:none}
.x-grp:first-child{padding-top:6px}
.x-opt.x-child{padding-left:20px}
.x-opt{padding:9px 11px;border-radius:9px;font:400 13.5px/1.35 var(--font-ui);color:var(--ink-soft);cursor:pointer}
.x-opt:hover{background:var(--sage-haze)}
.x-opt.x-sel{background:color-mix(in srgb,var(--accent) 14%,#fff);font-weight:600;color:var(--ink)}
.x-opt.x-dis{color:var(--muted-2);cursor:default}
.x-opt.x-dis:hover{background:none}

/* ============================================================ RESPONSIVE */
@media(min-width:860px){ .cols{grid-template-columns:1.6fr 1fr} }
@media(max-width:960px){
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:34px 28px}
  .auth-hero{font-size:32px;margin-top:22px}
  .auth-points{display:none}
}
@media(max-width:820px){
  :root{--side-w:0px}
  .app{grid-template-columns:1fr}
  /* The drawer must sit ABOVE the bottom tab bar (z-index 45), otherwise the
     tab bar paints over its footer and the account block, Get Phone App and
     Sign out are unreachable. The tabs duplicate the drawer's own links, so
     covering them while it's open loses nothing. dvh keeps the drawer honest
     when mobile browser chrome slides in and out. */
  .side{position:fixed;left:0;top:0;width:266px;z-index:60;
    height:100vh;height:100dvh;overflow:hidden;
    transform:translateX(-100%);transition:transform .25s ease}
  .side.open{transform:none;box-shadow:var(--sh-2)}
  .side-backdrop{z-index:55}                 /* over the tab bar, under the drawer */
  .side-backdrop.show{display:block}
  /* long nav lists scroll instead of pushing the footer off-screen */
  .side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* clear the home indicator on gesture-nav phones */
  .side-foot{flex:none;padding-bottom:calc(14px + var(--safe-b))}
  .appbar .menu-btn{display:inline-flex}
  .content{padding:22px 18px 60px}
  .appbar{padding:var(--safe-t) 18px 0}
  .banner .wrap{padding:11px 18px}
}
@media(max-width:520px){ .kv,.actionbar{grid-template-columns:1fr} .head{flex-wrap:wrap;gap:6px} }
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* login loading popup */
.load-ov{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(20,25,18,.5);backdrop-filter:blur(3px)}
.load-ov.on{display:flex}
.load-in{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 26px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-2);font:600 14px/1 var(--font-ui);color:var(--ink)}
.load-in .spin{width:22px;height:22px;border:3px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:ldspin .7s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}

/* ---- submitting.js — global "saving it" popup on every POST form ---- */
.subov{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,25,18,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.subov.on{opacity:1;visibility:visible}
.subox{width:min(300px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:19px 20px 0;box-shadow:0 18px 50px rgba(20,25,18,.28);overflow:hidden;
  transform:translateY(6px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.subov.on .subox{transform:none}
.subrow{display:flex;align-items:center;gap:14px}
.subspin{width:26px;height:26px;flex:none;border-radius:50%;
  border:3px solid var(--line-2);border-top-color:var(--accent);animation:subspin .7s linear infinite}
.subtxt{min-width:0}
.subttl{display:block;font:600 14.5px/1.3 var(--font-ui);color:var(--ink)}
.subsub{display:block;font:400 12px/1.45 var(--font-ui);color:var(--muted);margin-top:3px}
.subbar{display:block;height:3px;margin:17px -20px 0;background:var(--line-2);overflow:hidden;position:relative}
.subbar i{position:absolute;top:0;left:0;height:100%;width:40%;border-radius:3px;background:var(--accent);
  animation:subbar 1.15s cubic-bezier(.65,.05,.35,.95) infinite}
@keyframes subspin{to{transform:rotate(360deg)}}
@keyframes subbar{0%{left:-40%}100%{left:100%}}

/* Motion-sensitive users still need to see that something is happening,
   so keep a gentle opacity pulse instead of the spin and the sweep. */
@media(prefers-reduced-motion:reduce){
  .subspin{animation:subpulse 1.4s ease-in-out infinite!important;border-top-color:var(--accent)}
  .subbar i{animation:subpulse 1.4s ease-in-out infinite!important;width:100%;left:0}
}
@keyframes subpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* lead lock countdown */
.lock-card{display:flex;align-items:center;gap:14px;border-radius:14px;padding:14px 18px;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent) 9%,#fff);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.lock-card.warn{background:#fbeee2;border-color:#e6c79b}
.lock-card.expired{background:#f3ece0;border-color:var(--line-2)}
.lock-card .lock-ic{width:40px;height:40px;border-radius:11px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.lock-card.warn .lock-ic{background:#d98a2b}
.lock-card.expired .lock-ic{background:var(--muted-2)}
.lock-card .lock-ic svg{width:20px;height:20px}
.lock-cd{font:600 20px/1 var(--font-disp);color:var(--ink);font-variant-numeric:tabular-nums}
.lock-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
/* ============================================================
   v3 — APP-GRADE MOBILE + JOURNEY COMPONENTS
   ============================================================ */
:root{ --tabbar-h:60px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px); }

/* The UA rule [hidden]{display:none} is beaten by ANY author display rule
   (.btn{display:inline-flex}, .err{display:flex}, .cmodal-bg{display:grid}...),
   so the hidden attribute silently stops working. Make it authoritative. */
[hidden]{display:none!important}

body{-webkit-tap-highlight-color:transparent}
button,a,summary{-webkit-tap-highlight-color:transparent}

/* ---------- header profile menu ---------- */
.profw{position:relative}
.profw>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:5px 6px 5px 5px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);transition:.2s}
.profw>summary::-webkit-details-marker{display:none}
.profw>summary:hover{border-color:var(--sage)}
.profw[open]>summary{border-color:var(--sage);box-shadow:0 0 0 4px rgba(94,154,115,.1)}
.profw .pav{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--cream);font:700 12px/1 var(--font-ui)}
.profw .pnm{font:600 12.5px/1 var(--font-ui);color:var(--ink-soft);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profw .pcx{width:14px;height:14px;opacity:.45;margin-right:4px;transition:.2s}
.profw[open] .pcx{transform:rotate(180deg)}
.profm{position:absolute;top:calc(100% + 9px);right:0;z-index:90;width:262px;background:var(--card);
  border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh-2);padding:7px;animation:cmpop .18s cubic-bezier(.16,1,.3,1)}
.profm .phd{padding:11px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.profm .phd b{display:block;font:500 14.5px/1.25 var(--font-disp);color:var(--ink)}
.profm .phd span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.profm a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font:500 13.5px/1 var(--font-ui);color:var(--ink-soft);transition:.15s}
.profm a svg{width:16px;height:16px;opacity:.55;flex:none}
.profm a:hover{background:var(--sage-haze);color:var(--sage-deep)}
.profm a:hover svg{opacity:1}
.profm a.dang{color:#a3452f}
.profm a.dang:hover{background:#fbe9e2;color:#8a3527}
.profm .sep{height:1px;background:var(--line);margin:6px 4px}
.profm .tagr{margin-left:auto;font:700 9px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn-fg)}
.profm .tagr.ok{background:var(--ok-bg);color:var(--ok-fg)}

/* ---------- mobile bottom tab bar ---------- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px) saturate(1.5);
  border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;
  color:var(--muted-2);font:600 9.5px/1 var(--font-ui);letter-spacing:.02em;transition:color .18s}
.tabbar a svg{width:21px;height:21px;stroke-width:1.8}
.tabbar a.on{color:var(--ink)}
.tabbar a.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--accent)}
.tabbar a:active{transform:scale(.93)}
.tabbar .cnt{position:absolute;top:5px;left:calc(50% + 6px);min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:#c0533a;color:#fff;font:700 9px/15px var(--font-ui);text-align:center}

/* ---------- journey rail ---------- */
.rail{display:flex;flex-direction:column;gap:0}
.rstep{display:flex;gap:13px;position:relative;padding-bottom:18px}
.rstep:last-child{padding-bottom:0}
.rstep .dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:2px solid var(--line-2);background:var(--card);color:var(--muted-2);font:700 10px/1 var(--font-ui);z-index:2}
.rstep .dot svg{width:12px;height:12px;stroke-width:3}
.rstep::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line);z-index:1}
.rstep:last-child::before{display:none}
.rstep.done .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rstep.done::before{background:var(--accent)}
.rstep.now .dot{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 4px rgba(176,138,74,.14)}
.rstep .rb{padding-top:2px;min-width:0}
.rstep .rb b{display:block;font:600 13.5px/1.3 var(--font-ui);color:var(--ink)}
.rstep.pend .rb b{color:var(--muted-2);font-weight:500}
.rstep .rb span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- stage cards / data rows ---------- */
.drow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:none}
.drow .dk{font:600 10.5px/1.4 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);flex:none;padding-top:2px}
.drow .dv{font:500 13.5px/1.45 var(--font-ui);color:var(--ink);text-align:right;min-width:0;word-break:break-word}
.bignum{font:500 28px/1 var(--font-disp);color:var(--ink);letter-spacing:-.01em}
.bignum small{font:600 11px/1 var(--font-ui);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:7px}

/* ---------- custom calendar ---------- */
.cal{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;user-select:none}
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-hd b{font:500 15px/1 var(--font-disp);color:var(--ink)}
.cal-hd button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition:.15s;padding:0}
.cal-hd button:hover:not(:disabled){border-color:var(--sage);color:var(--sage-deep)}
.cal-hd button:disabled{opacity:.3;cursor:not-allowed}
.cal-hd button svg{width:15px;height:15px}
.cal-dow,.cal-gd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow span{text-align:center;font:700 9.5px/1 var(--font-ui);letter-spacing:.08em;color:var(--muted-2);padding:0 0 8px}
.cal-gd button{aspect-ratio:1;min-height:38px;border:none;border-radius:9px;background:none;cursor:pointer;
  font:500 13px/1 var(--font-ui);color:var(--ink-soft);transition:.12s;padding:0;position:relative}
.cal-gd button:hover:not(:disabled){background:var(--sage-haze)}
.cal-gd button:disabled{color:#cfcabd;cursor:not-allowed}
.cal-gd button.empty{visibility:hidden}
.cal-gd button.today{font-weight:800;color:var(--gold)}
.cal-gd button.today::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold)}
.cal-gd button.sel{background:var(--ink);color:var(--cream);font-weight:700}
.cal-gd button.sel.today{color:var(--cream)}
.cal-gd button.sel.today::after{background:var(--cream)}
.cal-pick{font:500 13px/1.4 var(--font-ui);color:var(--muted);text-align:center;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.cal-pick b{color:var(--ink);font-weight:700}

/* ---------- sheet / dialog ---------- */
.sheet-bg{position:fixed;inset:0;z-index:210;background:rgba(20,25,18,.5);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:20px;animation:cmfade .16s ease}
.sheet-bg.on{display:flex}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-2);
  width:100%;max-width:430px;max-height:88vh;display:flex;flex-direction:column;
  animation:cmpop .22s cubic-bezier(.16,1,.3,1)}
.sheet-hd{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line);flex:none}
.sheet-hd h3{font:400 19px/1.2 var(--font-disp);color:var(--ink);flex:1;letter-spacing:-.01em}
.sheet-hd .x{width:32px;height:32px;border-radius:50%;border:none;background:var(--faint);cursor:pointer;
  display:grid;place-items:center;color:var(--muted);transition:.15s;flex:none;padding:0}
.sheet-hd .x:hover{background:#eae2d2;color:var(--ink)}
.sheet-hd .x svg{width:15px;height:15px;stroke-width:2.4}
.sheet-bd{padding:18px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.sheet-bd label:first-child{margin-top:0}
.sheet-ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;flex:none;background:var(--card);border-radius:0 0 20px 20px}
.sheet-ft .btn{flex:1}
.grab{display:none}

/* ---------- responsive tables → cards ---------- */
@media(max-width:760px){
  table.rwd,table.rwd tbody,table.rwd tr,table.rwd td{display:block;width:100%}
  table.rwd{border:none;background:none;box-shadow:none;overflow:visible}
  table.rwd thead{display:none}
  table.rwd tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    margin-bottom:11px;padding:6px 4px;box-shadow:var(--sh-1)}
  table.rwd tbody tr:hover{background:var(--card)}
  table.rwd td{border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:flex-start;
    justify-content:space-between;gap:14px;text-align:right}
  table.rwd td:last-child{border-bottom:none}
  table.rwd td::before{content:attr(data-l);flex:none;text-align:left;
    font:700 9.5px/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  table.rwd td[data-l=""]::before,table.rwd td.full::before{display:none}
  table.rwd td.full{display:block;text-align:left}
}

/* ---------- mobile app shell ---------- */
@media(max-width:820px){
  .tabbar{display:grid}
  .content{padding:18px 16px calc(var(--tabbar-h) + var(--safe-b) + 26px)}
  .appbar{padding:var(--safe-t) 12px 0;height:58px;min-height:58px;gap:8px;box-sizing:content-box;background:rgba(248,243,234,.9);backdrop-filter:blur(14px) saturate(1.5)}
  .appbar .title{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
  .appbar .spacer{flex:1 1 0;min-width:6px}
  .appbar .chip{padding:6px 10px 6px 6px;font-size:12px;flex:none}
  .appbar .chip .bn-full{display:none}
  .appbar .chip .bn-short{display:inline}
  .appbar .chip .cx{width:13px;height:13px}
  .profw .pnm{display:none}
  .profm{width:250px;right:-4px}
  .actionbar{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + var(--safe-b));
    padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));margin:0;z-index:20;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .detail .actionbar{border-radius:0}
  .btn{padding:12px 20px;min-height:46px}
  .btn-sm{min-height:36px;padding:8px 14px}
  input,select,textarea{font-size:16px;padding:12px 14px}  /* 16px stops iOS zoom-on-focus */
  .panel{padding:18px 16px;border-radius:14px}
  .stats,.stat{grid-template-columns:repeat(2,1fr);gap:10px}
  .head h1{font-size:24px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -16px;padding:4px 16px 2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none}
  .hero{height:190px;border-radius:14px}
  .drow{flex-direction:column;gap:3px}
  .drow .dv{text-align:left}

  /* sheets slide up from the bottom like a native app */
  .sheet-bg{padding:0;align-items:flex-end}
  .sheet{max-width:none;border-radius:22px 22px 0 0;max-height:92vh;
    padding-bottom:env(safe-area-inset-bottom,0px);animation:sheetup .28s cubic-bezier(.16,1,.3,1)}
  .sheet-ft{border-radius:0}
  .grab{display:block;width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:9px auto 0}
  @keyframes sheetup{from{transform:translateY(100%)}}
}
@media(max-width:400px){
  .stats,.stat{grid-template-columns:1fr 1fr}
  .tabbar a{font-size:9px}
  .tabbar a svg{width:20px;height:20px}
}