/* HK Client Tracker: the HK Upload Desk look (dark warm glass, gold gradient, Instrument Serif + Manrope), phone first. */
:root{
  --bg:#0b0a09; --panel:rgba(26,23,20,.66); --panel2:rgba(38,33,28,.6); --line:rgba(222,196,152,.13); --line2:rgba(222,196,152,.22);
  --text:#f4efe6; --muted:#a39a8b; --faint:#7d7568; --gold:#d6b27a; --cream:#efdcb3; --bronze:#a9793f;
  --green:#9ccaa6; --amber:#e7b866; --red:#e38b7f; --blue:#9cb8e3; --violet:#c3a6e6;
  --r:20px; --grad:linear-gradient(120deg,#f6e6c3,#d6b27a 48%,#9d7444); --ink:#17130e;
  --shadow:0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px var(--line) inset;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  font-family:"Manrope",system-ui,-apple-system,sans-serif; color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overflow-x:hidden;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 700px at 85% -10%,rgba(214,178,122,.13),transparent 60%),
             radial-gradient(900px 600px at -10% 110%,rgba(169,121,63,.10),transparent 60%),var(--bg);background-attachment:fixed}
body.locked{overflow:hidden}
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:0;font-size:clamp(2.1rem,7.5vw,3.3rem);line-height:1.02}
h2{font-size:1.02rem}
h3{font-size:.92rem}
p{margin:0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.84rem}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;word-break:break-all}
.glass{background:var(--panel);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow);border-radius:var(--r)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;
  animation:shine 7s linear infinite;font-style:italic}
@keyframes shine{to{background-position:200% 0}}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);padding:.36rem .72rem;border-radius:99px;background:rgba(214,178,122,.1);box-shadow:0 0 0 1px rgba(214,178,122,.28) inset}
.link{color:var(--cream);font-weight:700;border-bottom:1px solid rgba(239,220,179,.35)}
input,select,textarea{font:500 16px "Manrope",system-ui,sans-serif;color:var(--text);background:rgba(255,255,255,.05);border:0;
  box-shadow:0 0 0 1px var(--line2) inset;border-radius:12px;padding:.7rem .8rem;width:100%;outline:none;min-height:44px}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 1.5px var(--gold) inset}
select{appearance:none;-webkit-appearance:none;padding-right:2rem;
  background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6b27a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .6rem center/16px no-repeat}
input[type=month],input[type=date]{min-width:0;color-scheme:dark}
textarea{resize:vertical;min-height:64px}
::placeholder{color:var(--faint)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;color:var(--text);
  font:700 .95rem "Manrope",system-ui,sans-serif;padding:.8rem 1.15rem;border-radius:14px;transition:transform .15s,background .25s;white-space:nowrap;min-height:44px}
.btn:active{transform:scale(.97)}
.btn.primary{color:var(--ink);background:var(--grad);background-size:180% 100%;box-shadow:0 10px 30px -8px rgba(214,178,122,.7)}
.btn.ghost{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line2) inset}
.btn.ghost:hover{background:rgba(255,255,255,.09)}
.btn.danger{background:rgba(227,139,127,.12);color:#f2b2a8;box-shadow:0 0 0 1px rgba(227,139,127,.35) inset}
.btn.small{padding:.55rem .9rem;font-size:.86rem;border-radius:12px;min-height:40px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* icons (CSS masks) */
[class^="i-"],[class*=" i-"]{display:inline-block;width:18px;height:18px;background:currentColor;flex:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-home{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 11l8-7 8 7v9a1 1 0 01-1 1h-4v-6h-6v6H5a1 1 0 01-1-1z%27/%3E%3C/svg%3E")}
.i-users{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%273.5%27/%3E%3Cpath d=%27M2.5 20a6.5 6.5 0 0113 0%27/%3E%3Cpath d=%27M16 4.5a3.5 3.5 0 010 7M18 14a5.5 5.5 0 013.5 6%27/%3E%3C/svg%3E")}
.i-clock{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 7v5l3 2%27/%3E%3C/svg%3E")}
.i-gear{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3Cpath d=%27M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1%27/%3E%3C/svg%3E")}
.i-plus{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 5v14M5 12h14%27/%3E%3C/svg%3E")}
.i-minus{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14%27/%3E%3C/svg%3E")}
.i-return{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 14l-5-5 5-5%27/%3E%3Cpath d=%27M4 9h10a6 6 0 010 12h-3%27/%3E%3C/svg%3E")}
.i-exit{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 4h3a2 2 0 012 2v12a2 2 0 01-2 2h-3%27/%3E%3Cpath d=%27M10 17l-5-5 5-5M5 12h11%27/%3E%3C/svg%3E")}
.i-pause{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 5v14M15 5v14%27/%3E%3C/svg%3E")}
.i-play{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 4l13 8-13 8z%27/%3E%3C/svg%3E")}
.i-up{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 19V5M6 11l6-6 6 6%27/%3E%3C/svg%3E")}
.i-down{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 5v14M6 13l6 6 6-6%27/%3E%3C/svg%3E")}
.i-swap{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 4L3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7%27/%3E%3C/svg%3E")}
.i-pen{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20h4L19 9l-4-4L4 16z%27/%3E%3C/svg%3E")}
.i-cal{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%275%27 width=%2717%27 height=%2715%27 rx=%273%27/%3E%3Cpath d=%27M3.5 10h17M8 3v4M16 3v4%27/%3E%3C/svg%3E")}
.i-dot{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3C/svg%3E")}
.i-eye{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3C/svg%3E")}
.i-eye-off{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 3l18 18%27/%3E%3Cpath d=%27M10.6 5.1A10 10 0 0112 5c6.5 0 10 7 10 7a17 17 0 01-3 3.9M6.6 6.6C3.7 8.4 2 12 2 12s3.5 7 10 7a9.6 9.6 0 004.4-1%27/%3E%3C/svg%3E")}
.i-arrow{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E")}
.i-search{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%277%27/%3E%3Cpath d=%27M20 20l-4-4%27/%3E%3C/svg%3E")}
.i-refresh{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 11a8 8 0 10-2.3 5.7%27/%3E%3Cpath d=%27M20 4v7h-7%27/%3E%3C/svg%3E")}
.i-lock{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%2710%27 width=%2716%27 height=%2711%27 rx=%273%27/%3E%3Cpath d=%27M8 10V7a4 4 0 018 0v3%27/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12l5 5L20 7%27/%3E%3C/svg%3E")}
.i-x{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 6l12 12M18 6L6 18%27/%3E%3C/svg%3E")}
.i-ig{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%273%27 width=%2718%27 height=%2718%27 rx=%275%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%274%27/%3E%3Ccircle cx=%2717.5%27 cy=%276.5%27 r=%27.6%27/%3E%3C/svg%3E")}
.i-send{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 3L10 14%27/%3E%3Cpath d=%27M21 3l-7 18-4-7-7-4z%27/%3E%3C/svg%3E")}

.i-film{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2716%27 rx=%273%27/%3E%3Cpath d=%27M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4%27/%3E%3C/svg%3E")}
.i-bolt{--m:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M13 2L4 14h7l-1 8 9-12h-7z%27/%3E%3C/svg%3E")}

/* frame */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + var(--safe-t)) 16px 10px;background:linear-gradient(180deg,rgba(11,10,9,.92),rgba(11,10,9,.72));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Instrument Serif",Georgia,serif;font-size:1.35rem;white-space:nowrap}
.brand img{border-radius:50%;box-shadow:0 0 20px rgba(214,178,122,.35)}
.brand b{font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tabs{display:none;gap:4px;background:rgba(255,255,255,.04);padding:4px;border-radius:14px;box-shadow:0 0 0 1px var(--line) inset}
.tabs a,.dock a{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.88rem;color:var(--muted);border-radius:10px;transition:color .2s,background .2s}
.tabs a{padding:.5rem .85rem}
.tabs a.on{color:var(--ink);background:var(--grad)}
.sync-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;color:var(--muted);padding:.42rem .7rem;
  border-radius:99px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;white-space:nowrap}
.sync-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.sync-pill.ok .dot{background:var(--green);box-shadow:0 0 10px var(--green)}
.sync-pill.bad{color:#f2b2a8}.sync-pill.bad .dot{background:var(--red);box-shadow:0 0 10px var(--red)}
.sync-pill.busy .dot,.btn.busy i{animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:6px 8px calc(6px + var(--safe-b));background:rgba(14,12,10,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line)}
.dock a{flex-direction:column;gap:3px;font-size:.68rem;padding:.4rem 0;justify-content:center}
.dock a i{width:22px;height:22px}
.dock a.on{color:var(--cream)}
.dock a.on i{background:var(--gold)}
.page{max-width:1100px;margin:0 auto;padding:14px 16px calc(96px + var(--safe-b))}
.boot{min-height:70vh;display:grid;place-items:center}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(214,178,122,.2);border-top-color:var(--gold);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero + kpis */
.hero{margin:14px 2px 18px}
.hero .eyebrow{color:var(--muted);font-size:.84rem;font-weight:600;margin-bottom:6px}
.hero.small{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 2px 14px}
.hero.small h1{font-size:2.2rem}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:14px 14px 13px;min-height:104px;transition:transform .15s}
.kpi:active{transform:scale(.98)}
.k-label{display:flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.k-label i{width:14px;height:14px}
.k-num{font-family:"Instrument Serif",Georgia,serif;font-size:2.35rem;line-height:1.05;color:var(--cream)}
.k-sub{font-size:.78rem;color:var(--muted)}
.wide-kpi{grid-column:1/-1;min-height:0}
.k-row{font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.25rem .45rem;align-items:baseline;margin-top:4px}
.k-row b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.7rem;margin-left:.4rem}
.k-row b:first-child{margin-left:0}
.up{color:var(--green)} .down{color:var(--red)} .gold{color:var(--gold)}
.money{transition:filter .25s}
.money.veiled{filter:blur(9px);user-select:none}
.nudge{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.nudge b{color:var(--cream)}
.nudge>i:first-child{color:var(--gold);width:22px;height:22px}
.nudge>i:last-child{color:var(--gold);margin-left:auto}

/* blocks + lists */
.block{margin-top:26px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.empty{padding:16px;color:var(--muted);font-size:.9rem}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;transition:transform .15s,background .2s}
.row:hover{background:var(--panel2)}
.row:active{transform:scale(.99)}
.ava{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.86rem;letter-spacing:.02em;
  color:var(--ink);background:var(--grad)}
.ava.ads{background:linear-gradient(135deg,#cfe0f7,#8fb0de 60%,#5c7fb3)}
.ava.big{width:56px;height:56px;font-size:1.05rem}
.who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.nm{font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;flex-wrap:wrap;gap:5px}
.sub{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-flex;align-items:center;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.18rem .48rem;border-radius:7px;background:rgba(255,255,255,.06);color:var(--muted);box-shadow:0 0 0 1px var(--line) inset}
.tag.smm{color:var(--cream);background:rgba(214,178,122,.1)}
.tag.ads{color:var(--blue);background:rgba(156,184,227,.1)}
.tag.pkg{color:var(--text)}
.tag.paused,.tag.st-paused{color:#f3d99a;background:rgba(231,184,102,.14)}
.tag.ended,.tag.st-ended{color:#f2b2a8;background:rgba(227,139,127,.12)}
.tag.st-active{color:var(--green);background:rgba(156,202,166,.12)}
.tag.new{color:var(--ink);background:var(--green)}
.tag.back{color:var(--violet);background:rgba(195,166,230,.12)}
.when{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:right}
.due{font-size:.78rem;font-weight:800;padding:.22rem .55rem;border-radius:99px;background:rgba(255,255,255,.06);color:var(--muted);white-space:nowrap}
.due.warm{color:#f3d99a;background:rgba(231,184,102,.15)}
.due.hot{color:var(--ink);background:var(--amber)}
.due-date{font-size:.74rem;color:var(--muted)}

/* clients filters */
.filters{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(58px + var(--safe-t));z-index:5;padding:6px 0 8px;
  background:linear-gradient(180deg,rgba(11,10,9,.94) 70%,rgba(11,10,9,0))}
.search{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:14px}
.search i{color:var(--muted)}
.search input{background:none;box-shadow:none;padding:.75rem 0}
.seg{display:flex;gap:3px;padding:3px;border-radius:13px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1;padding:.55rem .7rem;border-radius:10px;font-weight:700;font-size:.84rem;color:var(--muted);white-space:nowrap;text-align:center;min-height:38px}
.seg button b{font-weight:800;opacity:.7;margin-left:.15rem}
.seg button.on{color:var(--ink);background:var(--grad)}
.seg.big button{padding:.75rem .6rem;font-size:.9rem}
.seg.tiny{display:inline-flex;margin-top:4px}
.seg.tiny button{padding:.35rem .8rem;min-height:32px;font-size:.8rem}
.filter-row{display:flex;gap:8px;align-items:center}
.filter-row .seg{flex:1 1 auto;min-width:0}
@media (max-width:759px){.sort>span{display:none}.sort select{max-width:158px}}
.sort{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);flex:none}
.sort select{width:auto;min-height:40px;padding:.5rem 2rem .5rem .7rem;font-size:16px}
.count{margin:4px 2px 8px}

/* history */
.months{padding:14px 14px 10px}
.legend{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px}
.lg.j,.mb.j{background:var(--green)} .lg.l,.mb.l{background:var(--red)}
.mbars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:130px;align-items:end}
.mbar{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.mb-cols{flex:1;width:100%;display:flex;gap:4px;align-items:flex-end;justify-content:center}
.mb{width:40%;max-width:22px;min-height:3px;border-radius:5px 5px 2px 2px;position:relative;opacity:.85}
.mb b{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--muted)}
.mb-lab{font-size:.72rem;color:var(--muted);font-weight:700}
.chips{display:flex;gap:6px;overflow-x:auto;margin:16px 0 4px;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip-btn{flex:none;padding:.5rem .9rem;border-radius:99px;font-size:.84rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;min-height:38px}
.chip-btn.on{color:var(--ink);background:var(--grad)}
.day{font-size:.8rem;color:var(--muted);font-weight:700;margin:18px 4px 8px;letter-spacing:.02em}
.timeline{display:flex;flex-direction:column;padding:4px 0}
.ev{display:flex;gap:12px;padding:10px 14px;width:100%;align-items:flex-start}
.ev+.ev{border-top:1px solid var(--line)}
.ev-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.ev-ic i{width:16px;height:16px}
.ev-ic.up{color:var(--green);background:rgba(156,202,166,.12)}
.ev-ic.down{color:var(--red);background:rgba(227,139,127,.12)}
.ev-ic.gold{color:var(--gold);background:rgba(214,178,122,.14)}
.ev-ic.mid{color:var(--amber);background:rgba(231,184,102,.1)}
.ev-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-name{font-weight:700;font-size:.92rem;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ev-what{font-size:.86rem}
.ev-when{font-size:.74rem;color:var(--muted)}

/* settings */
.card{padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:12px}
.card .block-head{margin:0}
.card.inner{background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--line) inset;border-radius:16px;margin:14px 0 0}
.sync-box{padding:12px;border-radius:14px;background:rgba(156,202,166,.07);box-shadow:0 0 0 1px rgba(156,202,166,.18) inset;font-size:.86rem;display:flex;flex-direction:column;gap:6px}
.sync-box.bad{background:rgba(227,139,127,.08);box-shadow:0 0 0 1px rgba(227,139,127,.25) inset}
.prices{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.prices label,.edit-grid label,.note{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:700;color:var(--muted)}
.since-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.since-row{display:flex;align-items:center;gap:12px;padding:10px 12px}
.since-row input{width:auto;flex:none;max-width:170px}
@media (max-width:759px){.since-row{flex-wrap:wrap;row-gap:8px}.since-row .who{flex:1 1 calc(100% - 60px)}
  .since-row input{flex:1 1 auto;max-width:none;margin-left:54px}}
.saved{color:var(--green);opacity:0;transition:opacity .3s}
.saved.on{opacity:1}

/* client sheet */
.sheet-wrap{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:24px 24px 0 0;padding:18px 16px calc(24px + var(--safe-b));background:rgba(22,19,16,.97);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:12px}
.sheet::before{content:"";align-self:center;width:42px;height:5px;border-radius:9px;background:rgba(255,255,255,.18);margin:-8px 0 2px;flex:none}
.sheet-wrap.on .scrim{opacity:1}
.sheet-wrap.on .sheet{transform:none}
.sheet-head{display:flex;align-items:center;gap:12px}
.sh-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sh-title h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.8rem;line-height:1.05}
.x{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);align-self:flex-start}
.ig{justify-content:flex-start}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:0 0 0 1px var(--line) inset;min-width:0}
.f-label{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f-val{font-weight:700;font-size:.98rem}
.f-sub{font-size:.8rem;color:var(--muted)}
.f-sub .due{font-size:.72rem}
input.inline{min-height:36px;padding:.35rem .5rem;font-size:16px;margin-top:2px}
.dates{margin:-2px 2px 0}
.lock{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--line) inset}
.lock i{flex:none;margin-top:2px;color:var(--gold)}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.edit-grid .span2{grid-column:1/-1}
.acts{margin-top:4px}
.on-date{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);margin-left:auto}
.on-date input{width:auto;min-height:40px;padding:.4rem .5rem}
.sheetcols summary{cursor:pointer;font-weight:700;font-size:.88rem;color:var(--cream);padding:6px 2px}
.sheetcols dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 2px 0;font-size:.84rem}
.sheetcols dt{color:var(--muted)} .sheetcols dd{margin:0}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translate(-50%,20px);z-index:90;opacity:0;
  padding:.7rem 1.1rem;border-radius:14px;background:rgba(30,26,21,.96);box-shadow:var(--shadow);font-weight:700;font-size:.88rem;
  transition:opacity .3s,transform .3s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{color:#f2b2a8}

/* login */
.login-body{min-height:100vh;min-height:100dvh}
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:100%;max-width:420px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.login-logo{border-radius:50%;box-shadow:0 0 30px rgba(214,178,122,.35)}
.stack{display:flex;flex-direction:column;gap:10px;width:100%}
.msg{min-height:1.2em;font-size:.88rem;color:var(--cream)}
.keylogin{width:100%}
.keylogin summary{cursor:pointer;color:var(--muted);font-size:.86rem;font-weight:700;padding:6px 0}
.keylogin form{margin-top:8px}

/* wider screens: iPad, desktop */
@media (min-width:760px){
  .tabs{display:flex}
  .dock{display:none}
  .page{padding:20px 24px 48px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .wide-kpi{grid-column:1/-1}
  .list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .list>.empty{grid-column:1/-1}
  .filters{flex-direction:row;flex-wrap:wrap;top:calc(62px + var(--safe-t))}
  .filters .search{flex:1 1 280px}
  .filters>.seg{flex:0 1 auto}
  .filter-row{flex:1 1 100%}
  .toast{bottom:28px}
  .sheet-wrap .sheet{left:auto;top:0;bottom:0;width:min(520px,92vw);max-height:none;border-radius:24px 0 0 24px;transform:translateX(100%);padding:22px 22px 28px}
  .sheet::before{display:none}
  .sheet-wrap.on .sheet{transform:none}
}
@media (min-width:1100px){
  .kpis{grid-template-columns:repeat(4,1fr) 1.4fr}
  .wide-kpi{grid-column:auto}
  .list{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* uploads + ads (25 Oct 2026) */
.bar-right{display:flex;align-items:center;gap:8px}
.gear{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.gear.on{color:var(--ink);background:var(--grad)}
.kpis.two{grid-template-columns:1fr 1fr;margin-top:10px}
.kpis.three{grid-template-columns:repeat(3,1fr);margin:12px 0 4px}
.kpis.three .kpi{min-height:92px;padding:12px}
.k-num small{font-size:1.1rem;color:var(--muted);margin-left:2px}
.k-num.down{color:var(--red)}
.k-sub b{font-weight:800}
.lead-note{margin:-6px 2px 14px}
.week{padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.week .block-head{margin:0}
.wk-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:12px;text-align:center}
.wk.on{background:rgba(214,178,122,.12);box-shadow:0 0 0 1px rgba(214,178,122,.35) inset}
.wk-bar{width:16px;height:46px;border-radius:6px;background:rgba(255,255,255,.06);display:flex;align-items:flex-end;overflow:hidden}
.wk-bar span{display:block;width:100%;background:var(--green);border-radius:6px}
.wk-bar span.has-miss{background:linear-gradient(180deg,var(--amber),var(--green))}
.wk-num{font-size:.7rem;font-weight:800;color:var(--text)}
.wk-lab{font-size:.68rem;color:var(--muted);font-weight:700}
.wk.sun .wk-num{color:var(--faint)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;padding:.24rem .55rem;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.06);color:var(--muted)}
.pill.ok{color:var(--green);background:rgba(156,202,166,.13)}
.pill.sched{color:var(--blue);background:rgba(156,184,227,.13)}
.pill.warm{color:#f3d99a;background:rgba(231,184,102,.15)}
.pill.bad{color:#f6b9b0;background:rgba(227,139,127,.18)}
.pill.off{color:var(--faint)}
.pill-link{display:inline-flex}
.row.static{cursor:default}
.row.static:active{transform:none}
.link-sel{width:auto;max-width:46%;min-height:38px;font-size:16px;padding:.45rem 1.8rem .45rem .6rem;flex:none}
.card.inner .link-sel{max-width:100%;width:100%}
.dots{display:flex;gap:8px;flex-wrap:wrap}
.dot-day{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;font-weight:800;color:var(--muted)}
.dot-day i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.1)}
.dot-day.ok i{background:var(--green)} .dot-day.sched i{background:var(--blue)} .dot-day.bad i{background:var(--red)} .dot-day.warm i{background:var(--amber)}
.accts{display:flex;flex-direction:column;gap:6px}
.acct{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset}
.acct .faint{font-weight:500;font-size:.74rem}
.mini{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:1rem;line-height:1}
@media (max-width:759px){.dock a{font-size:.64rem}.kpis.three .k-num{font-size:1.9rem}}
@media (min-width:760px){.kpis.two{grid-template-columns:1fr 1fr}}

/* the month: lock + package progress (25 Oct 2026) */
.useg{margin:0 0 12px}
.pill i{width:12px;height:12px}
.pbar{position:relative;display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:visible;flex:1;min-width:60px}
.pbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#7fb58c,var(--green))}
.pbar .fill.behind{background:linear-gradient(90deg,#c9786d,var(--red))}
.pbar .mark{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--cream);opacity:.85}
.prow{display:grid;grid-template-columns:110px 56px 1fr;align-items:center;gap:4px 10px;padding:6px 0;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0}
.prow .pl{font-size:.84rem;font-weight:700}
.prow .pv{font-weight:800;font-size:.9rem}
.prow .pv.muted{font-weight:600;font-size:.8rem;grid-column:2/-1}
.prow .ps{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mline{display:flex;align-items:center;gap:8px;margin:2px 0}
.mrow .who{gap:4px}
.lockrow{padding:10px 12px;gap:10px}
.rowmain{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left}
.lockbtns{display:flex;flex-direction:column;gap:6px;flex:none}
.lockbtns .btn{min-height:34px;padding:.4rem .75rem;font-size:.8rem}
@media (min-width:760px){.lockbtns{flex-direction:row}}