/* ============================================================
   Thynk Detailer App — design system (v12, premium polish)
   Client surfaces (customer + owner + landing) = LIGHT, each
   detailer's own accent. Detailer login = light+amber. HQ = dark.
   ============================================================ */

:root{
  --brand:#0b1f3a; --accent:#039BE5; --accent-ink:#ffffff;
  --amber:#FFBC00; --amber-ink:#111111; --ember:#EB5B0E;
  --ink:#0e1319; --ink2:#565f6c; --ink3:#8a94a1;
  --bg:#f4f5f7; --card:#ffffff; --line:#e8ebef; --line2:#eff1f4;
  --ok:#12a150; --warn:#e0821a; --danger:#e0453f;
  --radius:20px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(14,19,25,.05),0 12px 30px -14px rgba(14,19,25,.20);
  --shadow-lg:0 30px 70px -22px rgba(14,19,25,.40);
  --tabbar-h:66px; --maxw:520px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:'Montserrat',var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.45;overscroll-behavior-y:none}
img{max-width:100%;display:block}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.02em}
a{color:var(--accent)}
.boot{min-height:70vh;display:grid;place-items:center;color:var(--ink3);font-size:15px}

/* ---------- buttons ---------- */
.btn{appearance:none;border:0;border-radius:14px;padding:14px 20px;font-family:var(--head);font-size:15px;font-weight:800;
  letter-spacing:-.01em;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;line-height:1;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--accent) 60%, transparent)}
.btn-accent:hover{filter:brightness(1.04);box-shadow:0 16px 32px -8px color-mix(in srgb,var(--accent) 68%, transparent)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 12px 26px -10px color-mix(in srgb,var(--brand) 70%, transparent)}
.btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 12px 26px -8px rgba(255,188,0,.5)}
.btn-amber:hover{filter:brightness(1.03);box-shadow:0 16px 34px -8px rgba(255,188,0,.6)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost2{background:#fff;color:var(--ink);border:1.5px solid var(--line);font-weight:700}
.btn-ghost2:hover{border-color:#d7dbe1}
.btn-danger{background:var(--danger);color:#fff;box-shadow:0 12px 26px -10px color-mix(in srgb,var(--danger) 65%, transparent)}
.btn-soft{background:color-mix(in srgb,var(--accent) 12%, #fff);color:var(--brand);font-weight:800}
.btn-block{width:100%}
.btn-sm{padding:10px 15px;font-size:13.5px;border-radius:11px}
.btn-mini{padding:9px 14px;font-size:13px;border-radius:11px;background:color-mix(in srgb,var(--accent) 13%, #fff);color:var(--brand);font-family:var(--head);font-weight:800}
.btn-mini:disabled{opacity:.5}
.ic{border:0;background:transparent;color:var(--ink3);width:38px;height:38px;border-radius:11px;cursor:pointer;flex:none;
  display:grid;place-items:center;transition:background .12s,color .12s}
.ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic:hover{background:color-mix(in srgb,var(--danger) 10%, #fff);color:var(--danger)}
.ic:active{transform:scale(.92)}

/* ============================================================
   APP SHELL (tabbed) — customer app + owner app
   ============================================================ */
.appwrap{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background:
    radial-gradient(130% 60% at 50% -8%, color-mix(in srgb,var(--accent) 9%, transparent), transparent 60%),
    var(--bg)}

.appbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.5) blur(16px);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 11px) 16px 11px;display:flex;align-items:center;gap:12px;min-height:58px}
.appbar .ab-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;min-width:0}
.appbar .ab-logo{height:32px;width:32px;border-radius:9px;object-fit:cover;background:#fff;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.appbar .ab-dot{height:32px;width:32px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:none;
  box-shadow:0 6px 14px -5px color-mix(in srgb,var(--accent) 70%, transparent)}
.appbar .ab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--head);font-weight:800}
.appbar .ab-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.appbar .ab-link{color:var(--ink2);font-size:13px;font-weight:800;font-family:var(--head);text-decoration:none;cursor:pointer;
  padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%, #fff)}
.appbar .ab-link:active{transform:scale(.96)}

.appmain{padding:18px 16px 26px}
.appmain > .block + .block{margin-top:24px}

/* bottom tab bar */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--maxw);z-index:30;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);
  border-top:1px solid var(--line);display:flex;height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -10px 30px -20px rgba(14,19,25,.3)}
.tab{flex:1;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--ink3);font-size:10.5px;font-weight:700;padding:9px 2px 8px}
.tab .ti{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:background .18s ease}
.tab svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--accent)}
.tab.on .ti{background:color-mix(in srgb,var(--accent) 15%, transparent)}
.tab.on svg{stroke:var(--accent)}
.tab:active .ti{transform:scale(.9)}

/* ---------- section blocks ---------- */
.block-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 3px 12px}
.block-h h2{font-family:var(--head);font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink3);font-weight:800}
.block-h .add{padding:8px 14px;font-family:var(--head);font-size:12.5px;font-weight:800;border-radius:999px;background:var(--accent);
  color:var(--accent-ink);border:0;cursor:pointer;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 65%, transparent)}
.block-h .add:active{transform:scale(.95)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.card + .card{margin-top:12px}

/* list rows */
.row{display:flex;align-items:center;gap:13px;padding:16px;cursor:pointer;text-align:left;width:100%;background:transparent;border:0}
.card > .row + .row{border-top:1px solid var(--line2)}
.row:active{background:color-mix(in srgb,var(--accent) 4%, #fff)}
.row[style*="cursor:default"]:active{background:transparent}
.row-main{flex:1;min-width:0}
.row-title{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:7px;letter-spacing:-.01em}
.row-title .off{font-family:var(--sans);font-size:10px;font-weight:800;color:var(--ink3);background:var(--bg);padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.row-sub{color:var(--ink2);font-size:13px;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.row-right{display:flex;align-items:center;gap:9px;flex:none}
.chev{color:var(--ink3);flex:none;display:grid;place-items:center}
.chev svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:14px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 22%, #fff),color-mix(in srgb,var(--accent) 10%, #fff));
  color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%, transparent)}
.avatar svg{width:20px;height:20px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.avatar img.ab-logo,.avatar .ab-dot{width:44px;height:44px;border-radius:13px;box-shadow:none}
.empty{color:var(--ink2);font-size:14px;line-height:1.55;padding:26px 20px;text-align:center}
.empty b{color:var(--ink)}

/* stat tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 17px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat.hero{grid-column:1/-1;color:#fff;border:0;
  background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 70%, #000 30%));
  box-shadow:0 20px 44px -18px color-mix(in srgb,var(--brand) 80%, transparent)}
.stat.hero::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%, transparent),transparent 70%)}
.stat .s-num{font-family:var(--head);font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;position:relative}
.stat.hero .s-num{font-size:36px}
.stat .s-num span{font-size:14px;font-weight:700;opacity:.65;letter-spacing:0}
.stat .s-lbl{margin-top:7px;font-size:12px;color:var(--ink2);font-weight:600;position:relative}
.stat.hero .s-lbl{color:rgba(255,255,255,.85)}

/* pills / badges */
.pill{font-family:var(--head);font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap;letter-spacing:.01em;cursor:pointer}
.pill.ok{background:color-mix(in srgb,var(--ok) 14%, #fff);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 16%, #fff);color:var(--warn)}
.pill.mut{background:var(--bg);color:var(--ink2)}
.pts{background:color-mix(in srgb,var(--accent) 13%, #fff);color:var(--brand);font-family:var(--head);font-weight:800;font-size:12.5px;
  padding:6px 11px;border-radius:999px;white-space:nowrap}

/* quick actions */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qa-btn{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 15px;
  display:flex;flex-direction:column;gap:11px;cursor:pointer;text-align:left;box-shadow:var(--shadow);transition:transform .1s,box-shadow .18s}
.qa-btn:active{transform:scale(.97)}
.qa-btn .qa-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--accent-ink);
  background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 72%, #000 28%));
  box-shadow:0 10px 20px -8px color-mix(in srgb,var(--accent) 65%, transparent)}
.qa-btn .qa-ic svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qa-btn .qa-t{font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:-.01em}
.qa-btn .qa-s{font-size:12px;color:var(--ink2);margin-top:-5px}

/* ============================================================
   PUBLIC LANDING
   ============================================================ */
.land{max-width:var(--maxw);margin:0 auto;min-height:100vh}
.land-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.land-top .brandmark{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:16px}
.land-top .brandmark .ab-logo,.land-top .brandmark .ab-dot{height:32px;width:32px}
.land-hero{color:#fff;padding:44px 22px 50px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--brand),color-mix(in srgb,var(--brand) 64%, #000 36%))}
.land-hero:after{content:"";position:absolute;right:-70px;top:-70px;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 62%, transparent),transparent 70%)}
.land-hero h1{font-size:36px;line-height:1.05;font-weight:800}
.land-hero p{margin-top:13px;font-size:16px;opacity:.9;max-width:32ch;line-height:1.55}
.land-cta{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;position:relative;z-index:1}
.land-sec{padding:28px 18px}
.land-sec h2{font-family:var(--head);font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink3);font-weight:800;margin:0 3px 13px}

/* membership marquee card */
.memcard{color:#fff;border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 96%, #000 4%),var(--brand));
  box-shadow:0 26px 60px -24px color-mix(in srgb,var(--brand) 90%, transparent)}
.memcard::after{content:"";position:absolute;right:-50px;top:-60px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 50%, transparent),transparent 70%)}
.memcard > *{position:relative}
.memcard .tag{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:var(--head);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:999px}
.memcard h3{font-size:24px;font-weight:800;margin:14px 0 3px}
.memcard .price{font-size:15px;opacity:.9}
.memcard .price b{font-size:29px;font-family:var(--head);font-weight:800}
.memcard ul{list-style:none;margin:16px 0 6px;display:grid;gap:10px}
.memcard li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;opacity:.97}
.memcard li:before{content:"";width:20px;height:20px;flex:none;margin-top:1px;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.memcard .btn{margin-top:18px}

/* service list */
.svc-group{padding:16px}
.card > .svc-group + .svc-group{border-top:1px solid var(--line2)}
.svc-group h4{font-family:var(--head);font-size:15.5px;font-weight:800;margin-bottom:2px;letter-spacing:-.01em}
.svc-desc{color:var(--ink2);font-size:12.5px;margin-bottom:7px}
.svc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0}
.svc-row + .svc-row{border-top:1px dashed var(--line)}
.svc-row .v{font-size:14px;font-weight:600;color:var(--ink)}
.svc-row .v small{display:block;color:var(--ink2);font-weight:500;font-size:12px}
.svc-row .p{font-family:var(--head);font-size:15px;font-weight:800;white-space:nowrap;color:var(--brand)}

/* rewards + points activity */
.reward{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px}
.card > .reward + .reward{border-top:1px solid var(--line2)}
.reward .r-name{font-family:var(--head);font-weight:700;font-size:14.5px}
.reward .r-name small{display:block;color:var(--ink2);font-weight:500;font-size:12.5px;margin-top:2px;font-family:var(--sans)}
.hist{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:14px}
.card > .hist + .hist{border-top:1px solid var(--line2)}
.hist .h-when{display:block;color:var(--ink3);font-size:11.5px;font-weight:500;margin-top:1px}
.hist b.pos{color:var(--ok);font-family:var(--head)}
.hist b.neg{color:var(--danger);font-family:var(--head)}

/* coverage areas */
.area-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px}
.card > .area-row + .area-row{border-top:1px solid var(--line2)}
.area-row .a-name{font-family:var(--head);font-weight:700;font-size:14.5px}
.area-row .a-name small{display:block;color:var(--ink2);font-weight:500;font-size:12.5px;margin-top:2px;font-family:var(--sans)}
.area-row .a-days{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:none;max-width:54%}
.area-row .a-days span{background:color-mix(in srgb,var(--accent) 13%, #fff);color:var(--brand);font-weight:700;font-size:11px;padding:3px 8px;border-radius:999px}

/* customer home hero */
.chero{color:#fff;border-radius:var(--radius);padding:26px 24px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 68%, #000 32%));
  box-shadow:0 26px 60px -24px color-mix(in srgb,var(--brand) 88%, transparent)}
.chero:after{content:"";position:absolute;right:-50px;bottom:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 58%, transparent),transparent 70%)}
.chero .hi{font-size:15px;opacity:.86;font-weight:600;position:relative}
.chero .pts-big{margin-top:6px;font-weight:700;font-size:16px;opacity:.85;position:relative}
.chero .pts-big span{font-family:var(--head);font-size:56px;display:block;line-height:1;letter-spacing:-.03em}
.mem-badge{display:inline-flex;align-items:center;gap:7px;margin-top:18px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--head);font-weight:800;font-size:13px;padding:10px 16px;border-radius:999px;position:relative;cursor:pointer;border:0;
  box-shadow:0 10px 22px -8px color-mix(in srgb,var(--accent) 60%, transparent)}
.mem-badge svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mem-badge .chev-inline{width:16px;height:16px;opacity:.85}
.progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:11px 0 2px}
.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%, #fff))}

/* ============================================================
   MODALS / SHEETS
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(10,15,22,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:grid;place-items:end center;z-index:100;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);width:100%;max-width:var(--maxw);border-radius:24px 24px 0 0;
  padding:22px 20px calc(26px + env(safe-area-inset-bottom));animation:up .26s cubic-bezier(.2,.9,.3,1);
  max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
@keyframes up{from{transform:translateY(30px)}to{transform:translateY(0)}}
.sheet:before{content:"";display:block;width:40px;height:4px;border-radius:999px;background:var(--line);margin:-6px auto 16px}
.sheet h3{font-size:21px;font-weight:800;margin-bottom:6px}
.sheet p{color:var(--ink2);font-size:14.5px;margin-bottom:16px;line-height:1.5}
.sheet .btn-block + .btn-block{margin-top:9px}

/* forms */
.in{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:#fafbfc;color:var(--ink);font-family:inherit}
.in:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%, transparent)}
.in.code{letter-spacing:.4em;font-size:22px;text-align:center;font-weight:800;font-family:var(--head);padding-left:14px}
.incolor{height:46px;padding:4px;cursor:pointer}
.ta{min-height:100px;resize:vertical;line-height:1.5;padding:12px 14px}
.fl{display:block;font-family:var(--head);font-size:11.5px;font-weight:800;color:var(--ink2);margin-bottom:13px;text-transform:uppercase;letter-spacing:.05em}
.fl .in{margin-top:6px;text-transform:none;font-weight:500;color:var(--ink);font-family:var(--sans)}
.fl-lbl{font-family:var(--head);font-size:11.5px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;margin:2px 0 9px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.a-err{color:var(--danger);font-size:13px;min-height:16px;margin:2px 0 10px;font-weight:600}
.a-alt{text-align:center;color:var(--ink2);font-size:13.5px;margin-top:16px}
.a-alt a{color:var(--accent);font-weight:700;text-decoration:none;cursor:pointer}
.logo-prev{max-height:38px;width:auto;border-radius:8px;vertical-align:middle;margin-left:8px;background:#fff;padding:2px 5px;border:1px solid var(--line)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.chip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--accent) 14%, #fff);color:var(--brand);
  font-family:var(--head);font-weight:700;font-size:13.5px;padding:7px 9px 7px 13px;border-radius:999px}
.chip button{border:0;background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer;opacity:.55;padding:0 2px}
.chip button:hover{opacity:1}
.chip.sm{font-size:12px;padding:5px 11px;font-weight:700}
.chip-empty{color:var(--ink2);font-size:13.5px}
.chip-add{display:flex;gap:8px;margin-bottom:6px}
.chip-add .in{margin-bottom:0}
.chip-add .btn{flex:none}

/* range / freq / grid editors */
.rng-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.rng-row .in{margin-bottom:0}
.rng-row .rng-lbl{flex:1;font-size:14px;font-weight:600}
.rng-price{width:96px;flex:none}
.freq-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.freq-row .in{margin-bottom:0}
.freq-row .freq-pm{width:120px;flex:none}
.grid-group{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.grid-freq{font-family:var(--head);font-size:13.5px;font-weight:800;color:var(--brand);margin-bottom:8px}

/* segmented selectors */
.segs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.seg{flex:1;min-width:88px;border:1.5px solid var(--line);background:#fafbfc;color:var(--ink);border-radius:12px;
  padding:11px 10px;font-family:var(--head);font-size:14.5px;font-weight:700;cursor:pointer;text-align:center;transition:border-color .12s,background .12s,box-shadow .12s}
.seg small{display:block;font-family:var(--sans);font-weight:500;font-size:11.5px;color:var(--ink2);margin-top:2px}
.seg.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 11%, #fff);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 55%, transparent)}
.seg.on small{color:var(--brand)}
.segs.days .seg{flex:0 0 auto;min-width:52px;padding:9px 8px;font-size:13px}

/* membership picker sheet */
.mp-price{color:#fff;border-radius:16px;padding:22px;text-align:center;margin:4px 0 16px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 70%, #000 30%))}
.mp-price::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%, transparent),transparent 70%)}
.mp-amt{font-family:var(--head);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1;position:relative}
.mp-amt span{font-size:16px;font-weight:700;opacity:.85;letter-spacing:0}
.mp-pv{margin-top:9px;font-family:var(--head);font-size:14px;font-weight:800;color:var(--accent-ink);background:var(--accent);display:inline-block;padding:4px 13px;border-radius:999px;position:relative}
.mp-billed{margin-top:10px;font-size:12px;opacity:.8;position:relative}
.mp-perks ul{list-style:none;display:grid;gap:9px;margin-top:6px}
.mp-perks li{display:flex;gap:10px;font-size:14px;align-items:flex-start}
.mp-perks li:before{content:"";width:19px;height:19px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%, #fff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;background:var(--accent)}

/* toggle switch */
.switch{position:relative;display:inline-block;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.18s;cursor:pointer}
.switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(20px)}
.swatches{display:inline-flex;gap:6px;flex:none}
.swatches i{width:24px;height:24px;border-radius:8px;border:1px solid var(--line);display:block}

.foot{text-align:center;color:var(--ink3);font-size:12px;padding:26px 0 34px}

/* ============================================================
   THYNK-OWNED AUTH (light+amber) + wizard
   ============================================================ */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(130% 90% at 50% -10%, color-mix(in srgb,var(--amber) 26%, #fbfaf6), #f4f5f4 58%)}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 28px 30px;width:100%;max-width:404px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--amber),var(--ember))}
.auth-brand{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:17px;margin-bottom:22px;color:var(--ink)}
.auth-brand .dot{width:38px;height:38px;border-radius:11px;background:var(--amber);display:grid;place-items:center;
  color:var(--amber-ink);font-size:13px;font-weight:900;box-shadow:0 10px 22px -8px rgba(255,188,0,.6)}
.auth-card h1{font-size:25px;font-weight:800;letter-spacing:-.02em}
.auth-card .kicker{font-family:var(--head);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ember);margin-bottom:7px}
.auth-card p{color:var(--ink2);font-size:14px;margin:7px 0 18px;line-height:1.5}
.auth-card .a-err{margin:2px 0 10px}
.auth-card .in{margin-bottom:12px}

/* wizard */
.wiz-steps{display:flex;gap:6px;margin-bottom:18px}
.wiz-dot{flex:1;height:5px;border-radius:999px;background:var(--line)}
.wiz-dot.on{background:var(--amber)}
.wiz-dot.done{background:color-mix(in srgb,var(--amber) 55%, var(--line))}
.wiz-slug-preview{font-size:12.5px;color:var(--ink2);margin:-6px 0 6px;word-break:break-all}
.wiz-slug-preview b{color:var(--ink);font-weight:800}
.wiz-slug-status{font-size:12.5px;margin:0 0 12px;min-height:16px;font-weight:600}
.wiz-slug-status.ok{color:var(--ok)}
.wiz-slug-status.taken{color:var(--danger)}
.wiz-slug-status.checking{color:var(--ink2)}
.wiz-preview{margin-bottom:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wiz-pv-sec{padding:13px 15px}
.wiz-pv-sec + .wiz-pv-sec{border-top:1px solid var(--line2)}
.wiz-pv-h{font-family:var(--head);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin-bottom:8px}
.wiz-pv-row{display:flex;flex-direction:column;gap:1px;padding:5px 0}
.wiz-pv-row b{font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink)}
.wiz-pv-row small{color:var(--ink2);font-size:12.5px}
.center-brand{justify-content:center}
.state-screen{text-align:center}
.state-screen h1{font-size:22px}

/* ============================================================
   HQ — DARK COMMAND CENTER
   ============================================================ */
.hq{--hbg:#0b0e13;--hpanel:#151a22;--hpanel2:#1c222c;--hline:#262d38;--htext:#e9edf2;--hmut:#8a94a3;
  min-height:100vh;background:var(--hbg);color:var(--htext);max-width:960px;margin:0 auto;
  padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.hq a{color:var(--amber)}
.hq-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 15px) 18px 15px;background:rgba(11,14,19,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hline)}
.hq-bar .hb-brand{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:16px;color:#fff}
.hq-bar .hb-brand .dot{width:34px;height:34px;border-radius:10px;background:var(--amber);color:var(--amber-ink);
  display:grid;place-items:center;font-size:12px;font-weight:900;box-shadow:0 10px 22px -8px rgba(255,188,0,.55)}
.hq-bar .hb-brand small{display:block;font-family:var(--sans);font-size:10px;font-weight:700;color:var(--hmut);letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.hq-bar .hb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.hq-bar .hb-link{color:var(--hmut);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.hq-bar .hb-back{display:inline-flex;align-items:center;gap:6px;color:var(--htext);font-family:var(--head);font-weight:700;font-size:14px;cursor:pointer;background:transparent;border:0}
.hq-bar .hb-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hq-main{padding:22px 18px}
.hq-main > * + *{margin-top:24px}
.hq-h{font-family:var(--head);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--hmut);font-weight:800;margin:0 2px 12px}
.hq-title{font-family:var(--head);font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em}
.hq-title small{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--hmut);margin-top:5px;letter-spacing:0}

.hq-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hq-tile{background:var(--hpanel);border:1px solid var(--hline);border-radius:16px;padding:18px;position:relative;overflow:hidden}
.hq-tile.amber{border:0;color:var(--amber-ink);background:linear-gradient(145deg,var(--amber),#f0a800);
  box-shadow:0 18px 40px -16px rgba(255,188,0,.5)}
.hq-tile .h-num{font-family:var(--head);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.hq-tile.amber .h-num{color:var(--amber-ink)}
.hq-tile .h-num span{font-size:14px;font-weight:700;opacity:.6;letter-spacing:0}
.hq-tile .h-lbl{margin-top:8px;font-size:12px;color:var(--hmut);font-weight:600}
.hq-tile .h-lbl b{color:var(--htext)}
.hq-tile.amber .h-lbl{color:rgba(17,17,17,.72)}
.hq-tile .h-spark{display:flex;gap:12px;margin-top:9px;font-size:11.5px;color:var(--hmut)}
.hq-tile .h-spark b{color:var(--htext)}

/* search + sort */
.hq-controls{display:flex;gap:9px;align-items:center;margin-bottom:12px}
.hq-search{flex:1;position:relative}
.hq-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--hmut);stroke-width:2;fill:none}
.hq-search input{width:100%;padding:12px 12px 12px 37px;border-radius:12px;border:1px solid var(--hline);background:var(--hpanel);color:var(--htext);font-size:14px;font-family:inherit}
.hq-search input:focus{outline:none;border-color:var(--amber)}
.hq-search input::placeholder{color:var(--hmut)}
.hq-sort{padding:12px;border-radius:12px;border:1px solid var(--hline);background:var(--hpanel);color:var(--htext);font-size:13px;font-weight:700;font-family:inherit}

/* detailer rows */
.hq-list{background:var(--hpanel);border:1px solid var(--hline);border-radius:16px;overflow:hidden}
.hq-row{display:flex;align-items:center;gap:13px;padding:15px 16px;cursor:pointer;background:transparent;border:0;width:100%;text-align:left;color:var(--htext)}
.hq-row + .hq-row{border-top:1px solid var(--hline)}
.hq-row:active{background:var(--hpanel2)}
.hq-row .dot{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--head);font-size:14px;font-weight:800;flex:none;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.hq-row .r-main{flex:1;min-width:0}
.hq-row .r-name{font-family:var(--head);font-weight:800;font-size:15px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-row .r-sub{font-size:12.5px;color:var(--hmut);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hq-row .r-fee{font-family:var(--head);font-weight:800;font-size:15px;color:#fff;flex:none;text-align:right}
.hq-row .r-fee small{display:block;font-size:11px;font-weight:600;color:var(--hmut);font-family:var(--sans)}
.hq-row .chev svg{stroke:var(--hmut)}
.dot-status{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}
.dot-status.ok{background:#3ddc84}
.dot-status.susp{background:var(--danger)}
.dot-status.other{background:var(--hmut)}
.hq-empty{padding:26px 18px;text-align:center;color:var(--hmut);font-size:14px}

/* leads */
.lead-row{display:flex;align-items:flex-start;gap:12px;padding:15px 16px}
.hq-list .lead-row + .lead-row{border-top:1px solid var(--hline)}
.lead-row .l-main{flex:1;min-width:0}
.lead-row .l-name{font-family:var(--head);font-weight:800;font-size:14.5px;color:#fff}
.lead-row .l-sub{font-size:12.5px;color:var(--hmut);margin-top:2px}
.lead-row .l-when{font-size:11.5px;color:var(--hmut);white-space:nowrap;flex:none}
.lead-row a.l-mail{color:var(--amber);font-size:12.5px;font-weight:700;text-decoration:none}

/* drill-in detail */
.hq-det-head{background:var(--hpanel);border:1px solid var(--hline);border-radius:16px;padding:20px;display:flex;align-items:center;gap:15px}
.hq-det-head .dot{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:#fff;font-family:var(--head);font-size:19px;font-weight:800;flex:none;box-shadow:0 10px 22px -8px rgba(0,0,0,.6)}
.hq-det-head .d-name{font-family:var(--head);font-size:21px;font-weight:800;color:#fff}
.hq-det-head .d-sub{font-size:13px;color:var(--hmut);margin-top:3px}
.hq-det-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hq-abtn{background:var(--hpanel);border:1px solid var(--hline);border-radius:14px;padding:15px;color:var(--htext);
  font-family:var(--head);font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.hq-abtn:active{background:var(--hpanel2);transform:translateY(1px)}
.hq-abtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hq-abtn.amber{background:var(--amber);color:var(--amber-ink);border:0;font-weight:800;box-shadow:0 12px 26px -10px rgba(255,188,0,.5)}
.hq-abtn.danger{color:#ff8983;border-color:color-mix(in srgb,var(--danger) 45%, var(--hline))}
.hq-abtn.full{grid-column:1/-1}
.hq-kv{background:var(--hpanel);border:1px solid var(--hline);border-radius:16px;overflow:hidden}
.hq-kv .kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:14px}
.hq-kv .kv + .kv{border-top:1px solid var(--hline)}
.hq-kv .kv .k{color:var(--hmut)}
.hq-kv .kv .v{font-family:var(--head);font-weight:700;color:#fff;text-align:right}

/* HQ dark sheet override (literal colors — #modal-root sits outside .hq scope) */
.scrim.dark .sheet{background:#151a22;color:#e9edf2}
.scrim.dark .sheet:before{background:#2b333f}
.scrim.dark .sheet h3{color:#fff}
.scrim.dark .sheet p{color:#8a94a3}
.scrim.dark .sheet .in{background:#1c222c;border-color:#2b333f;color:#e9edf2}
.scrim.dark .sheet .in:focus{border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%, transparent)}
.scrim.dark .sheet .fl{color:#8a94a3}
.scrim.dark .sheet .btn-ghost2{background:transparent;color:#c2cad4;border-color:#2b333f}

/* icons inside avatars / badges */
.chev-inline{width:16px;height:16px}
.hq-abtn svg,.qa-btn .qa-ic svg{flex:none}

/* HQ dark page background */
html.hq-mode,html.hq-mode body{background:#0b0e13}

/* super-admin "viewing a shop as HQ" banner */
.hq-preview-bar{background:#111;color:#fff;font-family:var(--head);font-size:12.5px;font-weight:700;text-align:center;padding:10px 14px}
.hq-preview-bar b{color:var(--amber)}
.hq-preview-bar a{color:var(--amber);font-weight:800;text-decoration:none}

@media (max-width:380px){
  .tiles,.qa,.hq-tiles,.hq-det-actions{gap:10px}
  .land-hero h1{font-size:31px}
}