/* ---- Brand colors: swap these 6 to match pizzaphone.ai exactly ---- */
:root{
  --bg:#fbf7f2;        /* page background (warm cream) */
  --card:#ffffff;
  --ink:#1c1714;       /* text + dark buttons */
  --muted:#7a6f66;
  --line:#ece4da;
  --brand:#e23b2e;     /* pizza red: wordmark, primary buttons */
  --order:#e23b2e; --resv:#7c4dff; --ai:#16a34a; --staff:#f59e0b; --other:#a8a29e;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
em{font-style:italic;color:var(--brand)}
.wordmark{font-weight:800;letter-spacing:-.02em;font-size:22px;text-decoration:none;color:var(--ink)}
.wordmark b{color:var(--brand);font-weight:800}
.wordmark span{color:var(--muted);font-weight:600}
.wordmark.logo{display:inline-block;line-height:0}
.wordmark.logo img{height:40px;width:auto;display:block}
.side .wordmark.logo img{height:36px}
.wordmark.logo-sm img{height:28px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 18px;font-weight:600;border:1.5px solid var(--ink);background:transparent;white-space:nowrap}
.btn:hover{background:var(--ink);color:#fff}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(.93);background:var(--brand)}
.muted{color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tag i{width:7px;height:7px;border-radius:50%;background:currentColor}
.t-order{color:var(--order);background:#fdecea}.t-resv{color:var(--resv);background:#f1ecff}
.t-ai{color:var(--ai);background:#e8f6ee}.t-staff{color:#b45309;background:#fef3e2}.t-other{color:#78716c;background:#f2efec}

/* Login */
#login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px 32px;width:100%;max-width:400px;box-shadow:0 20px 60px -30px rgba(60,30,10,.25)}
.login-card h1{font-size:30px;line-height:1.15;margin:22px 0 6px;letter-spacing:-.02em}
.login-card label{display:block;font-weight:600;font-size:14px;margin:22px 0 6px}
.login-card input{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.login-card input:focus{outline:none;border-color:var(--ink)}
.login-card .btn{width:100%;justify-content:center;margin-top:14px;padding:13px}
.code-row{display:flex;gap:8px}.code-row input{text-align:center;font-size:22px;font-weight:700;padding:10px 0}

/* Side menu */
.side{position:fixed;top:0;left:0;bottom:0;width:250px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;z-index:30;overflow-y:auto}
.side .wordmark{padding:4px 10px 18px}
.side-top{display:flex;align-items:flex-start;justify-content:space-between}
.side-x{display:none}
select{font:inherit;font-weight:600;font-size:14px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;color:var(--ink)}
.side select{width:100%;max-width:none;margin-bottom:18px}
.menu-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px}
.menu{display:flex;flex-direction:column;gap:2px}
.menu button{display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:10px 12px;border-radius:12px;font-weight:600;color:var(--ink)}
.menu button svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.menu button:hover{background:var(--bg)}
.menu button.on{background:var(--ink);color:#fff}
.menu button.on svg{color:#fff}
.menu .count{margin-left:auto;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted);padding:1px 8px;border-radius:99px}
.menu button.on .count{background:rgba(255,255,255,.15);color:#fff}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;gap:10px}
.side-foot .who{min-width:0;font-size:13px;line-height:1.3}
.side-foot .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who button{background:none;border:0;padding:0;color:var(--muted);font-size:13px;text-decoration:underline}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.topbar{display:none}
.side-scrim{display:none}
#app main{margin-left:250px}
.soon{max-width:560px}
.soon h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;line-height:1.1;margin:0 0 10px}
.soon ul{margin:14px 0 0;padding-left:20px;line-height:1.9}
.pill{display:inline-block;font-size:12px;font-weight:700;background:#fdecea;color:var(--brand);padding:3px 10px;border-radius:99px;margin-bottom:14px}
main{max-width:1160px;padding:28px 28px 60px}
@media (min-width:1500px){#app main{margin-left:calc(250px + (100vw - 250px - 1160px)/2)}}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.hero h1{font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0;font-weight:800}
.hero p{margin:8px 0 0}

/* Date picker (simplified) */
.range{display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:3px}
.range button{background:none;border:0;padding:7px 12px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted)}
.range button.on{background:var(--ink);color:#fff}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;text-align:left;transition:.15s}
.tile:hover{border-color:var(--ink)}
.tile.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tile .lbl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.tile .lbl i{width:9px;height:9px;border-radius:50%}
.tile .num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:6px}
.tile .sub{font-size:13px;color:var(--muted)}

.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h2{font-size:16px;margin:0 0 4px;font-weight:700}
.card .hint{font-size:13px;color:var(--muted);margin:0 0 16px}

/* Routing flow */
.flow{display:flex;flex-direction:column;gap:12px}
.flow-row{display:grid;grid-template-columns:150px minmax(0,1fr) 70px;align-items:center;gap:12px;font-size:14px}
.flow-row .name{font-weight:600}
.track{height:12px;background:#f4efe9;border-radius:99px;overflow:hidden}
.track div{height:100%;border-radius:99px}
.flow-row .pct{text-align:right;font-weight:700}
.flow-row .pct small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.stack{display:flex;height:16px;border-radius:99px;overflow:hidden;margin:4px 0 18px}

/* Hours chart */
.hours{display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:6px}
.hours .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.hours .col div{border-radius:5px 5px 2px 2px;background:var(--ink);min-height:2px}
.hours .col.peak div{background:var(--brand)}
.hours-x{display:flex;gap:4px;font-size:11px;color:var(--muted);margin-top:6px}
.hours-x span{flex:1;text-align:center}
.peak-note{font-size:13px;margin-top:12px}

/* Call log */
.log-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.search{font:inherit;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;width:220px;max-width:100%}
.calls{list-style:none;margin:0;padding:0}
.call{display:grid;grid-template-columns:110px 150px minmax(0,1fr) 70px 160px;align-items:center;gap:12px;padding:13px 6px;border-top:1px solid var(--line);cursor:pointer;border-radius:10px}
.call:hover{background:#fbf7f2}
.call .time{font-weight:600}
.call .time small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.call .num{font-variant-numeric:tabular-nums;font-weight:600}
.call .sum{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.call .dur{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}
.call .tag{justify-self:end}
.call.compact{grid-template-columns:90px minmax(0,1fr) auto}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ai)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ai);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.more{display:block;margin:14px auto 0}

/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(28,23,20,.35);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--bg);z-index:41;overflow:auto;box-shadow:-20px 0 60px -20px rgba(0,0,0,.3)}
.drawer-in{padding:22px 22px 40px}
.d-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.d-top h2{font-size:26px;margin:0;letter-spacing:-.02em}
.x{background:#fff;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:18px;line-height:1}
.path{list-style:none;margin:18px 0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.path li{position:relative;padding:0 0 16px 28px;font-size:14px}
.path li:last-child{padding-bottom:0}
.path li::before{content:"";position:absolute;left:5px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.path li:not(:last-child)::after{content:"";position:absolute;left:9px;top:18px;bottom:2px;width:2px;background:var(--line)}
.path li.end::before{background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.path b{display:block}
.path span{color:var(--muted);font-size:13px}
.d-sec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:12px}
.d-sec h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.player{display:flex;align-items:center;gap:12px}
.play{width:40px;height:40px;border-radius:50%;background:var(--brand);border:0;color:#fff;font-size:14px;flex:none}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:32px}
.wave span{flex:1;background:#e5ddd3;border-radius:2px}
.wave span.done{background:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.tx{display:flex;flex-direction:column;gap:8px}
.bub{max-width:85%;padding:9px 13px;border-radius:16px;font-size:14px}
.bub.ai{background:#f4efe9;align-self:flex-start;border-bottom-left-radius:4px}
.bub.c{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bub.sys{align-self:center;background:none;color:var(--muted);font-size:12px;padding:2px}
.linkbtn{background:none;border:0;color:var(--brand);font-weight:600;padding:0;margin-top:14px}

/* Callers */
.callers{width:100%;border-collapse:collapse;font-size:14px}
.callers th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:0 8px 10px}
.callers td{padding:12px 8px;border-top:1px solid var(--line)}
.callers tr.row{cursor:pointer}.callers tr.row:hover td{background:#fbf7f2}
.dots{display:flex;gap:3px}.dots i{width:8px;height:8px;border-radius:50%}
.badge{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:#f4efe9}
.badge.new{background:#e8f6ee;color:var(--ai)}.badge.reg{background:#fdecea;color:var(--brand)}

.note{margin-top:28px;font-size:13px;color:var(--muted);text-align:center}

@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles div.tile:hover{border-color:var(--line)}
@media (max-width:900px){
  .side{left:auto;right:0;border-right:0;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .2s;box-shadow:-20px 0 60px -20px rgba(0,0,0,.3)}
  body.menu-open .side{transform:none}
  body.menu-open .side-scrim{display:block;position:fixed;inset:0;background:rgba(28,23,20,.35);z-index:25}
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;background:rgba(251,247,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 16px}
  .burger{background:#fff;border:1px solid var(--line);border-radius:12px;width:42px;height:42px;display:grid;place-items:center}
  .burger svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
  .topbar .where{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
  #app main{margin-left:0;padding:22px 16px 60px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .call{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .call .time{grid-column:1}.call .tag{grid-column:2;grid-row:1}
  .call .num{grid-column:1}.call .dur{grid-column:2;grid-row:2;text-align:right}
  .call .sum{grid-column:1/-1}
  .call.compact{grid-template-columns:minmax(0,1fr) auto}
  .call.compact>div:nth-child(2){grid-column:1;grid-row:1}
  .call.compact .time{grid-row:2;font-size:13px;font-weight:500;color:var(--muted)}
  .call.compact .time small{display:inline;margin-left:6px}
  .call.compact .tag{grid-row:1}
  .hide-m{display:none}
}
@media (max-width:640px){
  .side{width:100%;border-left:0;box-shadow:none;padding:12px 16px 20px}
  .side .wordmark{font-size:19px;padding:8px 0 16px}
  .side-x{display:grid}
  .menu button{padding:14px 14px;font-size:17px}
  body.menu-open{overflow:hidden}
  .flow-row{grid-template-columns:110px minmax(0,1fr) 54px}
  .range{width:100%;overflow-x:auto}.range button{flex:1}
  .callers .hide-s{display:none}
}

/* ---- v3 additions ---- */
.pg-head{margin-bottom:22px}
.pg-head h1{font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.03em;margin:0;font-weight:800}
.pg-head p{margin:8px 0 0}
.see{white-space:nowrap;background:none;border:0;color:var(--brand);font-weight:700;padding:0;font-size:14px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.mini{background:var(--bg);border-radius:12px;padding:12px 14px}
.mini b{display:block;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.mini span{font-size:12px;color:var(--muted);font-weight:600}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.chip i{width:8px;height:8px;border-radius:50%}
.chip small{color:var(--muted);font-weight:600}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}.chip.on small{color:#d6cfc8}
.toolbar .search{margin-left:auto}
.day{margin-bottom:14px}
.day-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:4px 2px 10px}
.day-head h3{margin:0;font-size:17px;letter-spacing:-.01em}
.day-head .sumline{font-size:13px;color:var(--muted)}
.day-head .sumline b{color:var(--ink)}
.day .calls .call:first-child{border-top:0}

/* forms */
.form-card{margin-bottom:16px}
.form-card h2{font-size:18px;margin:0 0 2px}
.form-card .hint{margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.in,textarea.in{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.in:focus{outline:none;border-color:var(--ink)}
.in[readonly]{background:var(--bg)}
textarea.in{min-height:180px;resize:vertical;line-height:1.5}
.ainum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg);border-radius:14px;padding:14px 16px;margin-top:16px}
.ainum .n{font-size:24px;font-weight:800;letter-spacing:-.02em}
.ainum .lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.btn-sm{padding:7px 14px;font-size:14px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.switch{position:relative;width:54px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#d6cec5;border-radius:99px;transition:.2s;cursor:pointer}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--ai)}
.switch input:checked+span::after{transform:translateX(24px)}
.status-pill{font-size:13px;font-weight:700;padding:3px 10px;border-radius:99px}
.status-pill.on{background:#e8f6ee;color:var(--ai)}.status-pill.off{background:#fdecea;color:var(--brand)}
.hours-tbl{display:flex;flex-direction:column;gap:8px}
.hrow{display:grid;grid-template-columns:110px 90px minmax(0,1fr) 20px minmax(0,1fr);gap:10px;align-items:center}
.hrow .d{font-weight:600}
.hrow label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.hrow.closed .in{opacity:.35;pointer-events:none}
.list-row{display:grid;gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.list-row:first-child{border-top:0;padding-top:0}
.hol{grid-template-columns:170px minmax(0,1fr) 36px}
.faq{grid-template-columns:minmax(0,1fr) 36px}
.faq .qa{display:flex;flex-direction:column;gap:8px}
.faq textarea.in{min-height:64px}
.rm{background:#fff;border:1px solid var(--line);border-radius:10px;width:36px;height:42px;color:var(--muted);font-size:18px}
.rm:hover{color:var(--brand);border-color:var(--brand)}
.add{margin-top:12px}
.savebar{position:fixed;left:250px;right:0;bottom:0;z-index:35;background:var(--ink);color:#fff;padding:12px 28px;display:flex;align-items:center;gap:12px;transform:translateY(100%);transition:transform .2s}
.savebar.show{transform:none}
.savebar:not(.show){visibility:hidden}
.savebar .grow{flex:1;font-weight:600}
.savebar .btn{border-color:#fff;color:#fff;padding:8px 16px}
.savebar .btn:hover{background:#fff;color:var(--ink)}
.savebar .btn-primary{border-color:var(--brand)}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(28,23,20,.45);z-index:50;display:grid;place-items:center;padding:16px}
.modal{background:var(--bg);border-radius:22px;width:100%;max-width:560px;max-height:88vh;overflow:auto;padding:24px}
.modal h2{margin:0 0 4px;font-size:24px;letter-spacing:-.02em}
.modal .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.diff{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.diff li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px}
.diff b{display:block;margin-bottom:4px}
.diff .was{color:var(--muted);text-decoration:line-through;white-space:pre-wrap}
.diff .now{color:var(--ink);font-weight:600;white-space:pre-wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px);text-align:center}
.fake-pay{border:1.5px dashed var(--line);border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.fake-pay .in{background:var(--bg)}

/* billing */
.bill-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.plan-name{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.plan-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:14px}
.plan-meta div span{display:block;font-size:12px;color:var(--muted);font-weight:600}
.plan-meta div b{font-size:15px}
.callout{background:var(--bg);border-radius:14px;padding:12px 14px;font-size:14px;margin-top:16px}
.cc{border-radius:18px;padding:20px;color:#fff;background:linear-gradient(135deg,#2a211c,#57433a);aspect-ratio:1.7;max-width:330px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.cc .brand{font-weight:800;font-size:18px;letter-spacing:.04em;text-align:right}
.cc .digits{font-size:20px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.cc .row{display:flex;justify-content:space-between;font-size:12px;opacity:.85}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:0 8px 10px}
.tbl td{padding:12px 8px;border-top:1px solid var(--line);vertical-align:middle}
.tbl td.r,.tbl th.r{text-align:right}
.paid{color:var(--ai);font-weight:700}.failed{color:var(--brand);font-weight:700}
.receipt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:14px;font-size:14px}
.receipt .line{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line)}
.receipt .line:first-of-type{border-top:0}

@media (max-width:900px){
  .savebar{left:0;padding:12px 16px}
  .bill-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .hrow{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .hrow .in:first-of-type{grid-column:1}
  .hrow .to{display:none}
  .hrow input[type=time]{grid-column:span 1}
  .hol{grid-template-columns:minmax(0,1fr) 36px}.hol .note{grid-column:1/-1;grid-row:2}
  .minis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .toolbar .search{margin-left:0;width:100%}
  .tbl .hide-s{display:none}
  .savebar .grow{font-size:13px}
}

/* Date range picker */
.dr { position: relative; }
.dr-pill { display: inline-flex; align-items: stretch; background: var(--bg); border-radius: 99px; border: 1px solid transparent; }
.dr.open .dr-pill { border-color: var(--line); background: var(--card); }
.dr-step, .dr-toggle { font: inherit; background: none; border: 0; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; }
.dr-step { padding: 0 12px; border-radius: 99px; }
.dr-step:disabled { color: #c4c4c8; cursor: default; }
.dr-step:not(:disabled):hover, .dr-toggle:hover { background: rgba(0,0,0,.05); }
.dr-toggle { gap: 8px; padding: 9px 16px; border-left: 1px solid #dcdce0; border-right: 1px solid #dcdce0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-caret { transition: transform .15s; }
.dr.open .dr-caret { transform: rotate(180deg); }
.dr-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.12); padding: 20px; display: grid; grid-template-columns: 320px 170px; gap: 20px; }
.dr-cal { display: grid; gap: 0; border-right: 1px solid var(--line); padding-right: 20px; }
.dr-head { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 10px 8px; font-weight: 600; color: var(--muted); border-radius: 8px 8px 0 0; }
.dr-nav { font: inherit; font-size: 20px; line-height: 1; background: none; border: 0; cursor: pointer; padding: 2px 10px; border-radius: 8px; color: var(--ink); }
.dr-nav:hover:not(:disabled) { background: rgba(0,0,0,.06); }
.dr-nav:disabled { color: #c4c4c8; cursor: default; }
.dr-week, .dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dr-week { border-bottom: 1px solid var(--line); padding: 8px 0; }
.dr-week span { text-align: center; font-size: 13px; color: var(--muted); }
.dr-grid { padding: 6px 0 10px; row-gap: 4px; border-bottom: 1px solid var(--line); }
.dr-day { font: inherit; font-size: 14px; background: none; border: 0; height: 38px; cursor: pointer; padding: 0; position: relative; color: var(--ink); font-variant-numeric: tabular-nums; border-top: 1.5px solid transparent; border-bottom: 1.5px solid transparent; }
.dr-day span { position: relative; z-index: 1; }
.dr-day:hover:not(:disabled):not(.inr) span { text-decoration: underline; }
.dr-day.out { color: #c4c4c8; }
.dr-day.future { color: #d4d4d8; cursor: default; }
.dr-day.today span { font-weight: 700; }
.dr-day.inr { border-top-color: var(--ink); border-bottom-color: var(--ink); }
.dr-day.cap-l { border-left: 1.5px solid var(--ink); border-top-left-radius: 99px; border-bottom-left-radius: 99px; }
.dr-day.cap-r { border-right: 1.5px solid var(--ink); border-top-right-radius: 99px; border-bottom-right-radius: 99px; }
.dr-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; padding-top: 14px; }
.dr-inputs label { display: grid; gap: 6px; }
.dr-inputs label span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.dr-in { text-align: center; font-variant-numeric: tabular-nums; width: 100%; padding: 10px 8px; }
.dr-dash { color: var(--muted); padding-bottom: 10px; }
.dr-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.dr-presets { display: grid; gap: 10px; align-content: start; }
.dr-preset { font: inherit; font-weight: 500; color: var(--muted); background: var(--bg); border: 0; border-radius: 99px; padding: 11px 14px; cursor: pointer; white-space: nowrap; }
.dr-preset:hover { background: #e9e9ec; color: var(--ink); }
.dr-preset.active { background: #e4e4e7; color: var(--ink); }

@media (max-width: 860px) {
  .dr-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; grid-template-columns: 1fr; max-height: calc(100vh - 80px); overflow-y: auto; padding: 16px; }
  .dr-cal { border-right: 0; padding-right: 0; order: 2; }
  .dr-presets { order: 1; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .dr-preset { padding: 8px 14px; font-size: 14px; }
  .dr-toggle { padding: 8px 12px; font-size: 14px; }
  .dr-step { padding: 0 9px; }
}


/* ---- live app extras ---- */
.range-wrap{position:relative}
.range .dr-label{font-variant-numeric:tabular-nums}
.dr-panel{right:0}
.loading{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:linear-gradient(90deg,transparent,var(--brand),transparent);background-size:50% 100%;animation:load 1s linear infinite}
@keyframes load{from{background-position:-50% 0}to{background-position:150% 0}}
.err{color:var(--brand);font-size:14px;font-weight:600;margin:10px 0 0}
.empty{padding:22px 6px;color:var(--muted)}
.login-card .btn-link{background:none;border:0;color:var(--muted);width:100%;margin-top:10px;text-decoration:underline}
.code-in{letter-spacing:.4em;text-align:center;font-size:24px!important;font-weight:700}
audio{width:100%}
.tx .bub{white-space:pre-wrap}
.sel-one{font-weight:700;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;margin-bottom:18px;font-size:14px}
.ok{background:#e8f6ee;color:var(--ai);font-weight:600;border-radius:12px;padding:10px 14px;margin-top:12px;font-size:14px}
.meta-line{font-size:13px;color:var(--muted);margin:-8px 0 16px}
.range button{white-space:nowrap}
@media (max-width:640px){.range-wrap{width:100%}.range button{padding:7px 8px}}


/* ---- super admin ---- */
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg);cursor:pointer}
.alert:hover{background:#f4ede5}
.alert .dot{width:10px;height:10px;border-radius:50%}
.alert b{display:block;font-size:14px}
.alert span{font-size:13px;color:var(--muted)}
.alert .go{font-weight:700;font-size:13px;color:var(--brand);white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:3px;height:160px}
.bars div{flex:1;background:var(--ink);border-radius:4px 4px 1px 1px;min-height:2px}
.bars div.wk{background:#57433a}
.bars div.today{background:var(--brand)}
.bars-x{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.st{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap;display:inline-block}
.st.live{background:#e8f6ee;color:var(--ai)}.st.trial{background:#fef3e2;color:#b45309}.st.onb{background:#f1ecff;color:var(--resv)}
.st.due{background:#fdecea;color:var(--brand)}.st.cxl{background:#f2efec;color:#78716c}
.ctable td.nm b{display:block}.ctable td.nm small{color:var(--muted)}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px;width:84px}
.spark i{flex:1;background:#d6cec5;border-radius:1px}
.warnnum{color:var(--brand);font-weight:700}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.lane{background:#f4efe9;border-radius:var(--r);padding:12px}
.lane h3{margin:2px 4px 10px;font-size:14px;display:flex;justify-content:space-between}
.lane h3 small{color:var(--muted);font-weight:600}
.ocard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer;font-size:13px}
.ocard b{display:block;font-size:14px}
.ocard .late{color:var(--brand);font-weight:700}
.ocard .ok2{color:var(--ai);font-weight:600}
.todo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 4px;border-top:1px solid var(--line)}
.todo:first-child{border-top:0}
.todo .what{font-size:13px;color:var(--muted)}
.todo .what code{background:var(--bg);padding:1px 6px;border-radius:6px;font-family:inherit;color:var(--ink)}
.done-row{opacity:.45}
.imp{background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px;font-weight:600;flex-wrap:wrap}
.imp .btn{border-color:#fff;color:#fff;padding:7px 14px}
.kpi-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi-row .tile{cursor:pointer}
.up{color:var(--ai);font-weight:700}.down{color:var(--brand);font-weight:700}
@media (max-width:1200px){.kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pipe{grid-template-columns:minmax(0,1fr)}.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ctable .hide-s{display:none}}

/* ---- owner level, team, changelog ---- */
.loc-chip{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:1px 8px;border-radius:99px;vertical-align:middle;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.page.all-mode > :not(.pg-head):not(.need-loc){display:none!important}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.loc-btn{text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px}
.loc-btn:hover{border-color:var(--ink)}
.loc-btn b{display:block}.loc-btn span{font-size:13px;color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:8px;font-size:14px}
.checks label{display:flex;gap:8px;align-items:center;font-weight:500}
.tbl tr.row{cursor:pointer}.tbl tr.row:hover td{background:#fbf7f2}
.new-badge{background:var(--brand)!important;color:#fff!important}
.rel{margin-bottom:14px}
.rel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rel .ver{font-weight:800;font-size:18px;letter-spacing:-.01em}
.rel h2{font-size:17px;margin:0 0 10px}
.rel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rel-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start;font-size:15px}
.rel-list .tag{justify-content:center}
#viewas{margin-bottom:18px}
@media (max-width:640px){.rel-list li{grid-template-columns:minmax(0,1fr)}.rel-list .tag{justify-self:start}}

.tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.tiles.t4,.tiles.t5{grid-template-columns:repeat(2,minmax(0,1fr))}}
#client-lbl + select{margin:4px 0 10px}