/* ============================================================
hub01.shop — design system v2
light grey-green base · translucent white cards · black controls
phosphor lime accents · portrait live commerce
============================================================ */
:root{
/* palette (brief §3) — legacy names kept so all pages re-theme */
--bg:#EEF1EA; --surface:#F7F8F4; --surface-soft:#E7EBDD;
--cream:var(--bg); --cream-2:var(--surface-soft);
--card:rgba(255,255,255,.78); --card-solid:#FFFFFF;
--ink:#10120F; --text:#10120F; --ink-soft:#3C4038; --muted:#6D746A;
--lime:#B7EB71; --lime-deep:#8CFF00; --accent:#B7EB71; --accent-strong:#8CFF00;
--accent-ink:#4F8A16; --lime-ink:#0E1A05; --black:#050505;
--live:#FF3B30; --live-soft:#ffe9e7;
--line:rgba(16,18,15,.08); --line-2:rgba(16,18,15,.14);
--r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:32px; --pill:999px;
--shadow:0 10px 34px rgba(16,18,15,.10);
--shadow-sm:0 3px 14px rgba(16,18,15,.07);
--shadow-lg:0 20px 50px rgba(16,18,15,.18);
--shell:480px; --nav-h:70px;
--ease:cubic-bezier(.22,.61,.36,1);
--font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
font-family:var(--font); color:var(--ink-soft); background:var(--surface-soft);
font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{color:var(--ink); font-weight:800; letter-spacing:-.022em; margin:0 0 .3em; line-height:1.14}
h1{font-size:26px} h2{font-size:21px} h3{font-size:17.5px} h4{font-size:15.5px}
p{margin:0 0 1em} a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
/* Tick boxes and radios in the brand green, not the browser's blue. */
input[type="checkbox"],input[type="radio"]{accent-color:#4F8A16}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* ---- Mobile shell ---- */
.shell{
position:relative; width:100%; max-width:var(--shell); min-height:100vh; min-height:100dvh;
margin:0 auto; background:var(--bg);
box-shadow:0 0 70px rgba(16,18,15,.14); display:flex; flex-direction:column; overflow:hidden;
}
.page{flex:1; padding:16px 16px calc(var(--nav-h) + 26px); animation:fadeUp .38s var(--ease) both}
.page.no-nav{padding-bottom:26px}
.page.flush{padding:0}
/* ---- Header ---- */
.appbar{
position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
gap:10px; padding:13px 16px;
background:rgba(238,241,234,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
}
.brand-logo{height:42px; width:auto; display:block}
.brand-logo.lg{height:52px}
.icon-btn{
width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line);
background:var(--card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
display:inline-flex;align-items:center;justify-content:center;
font-size:15px; position:relative; cursor:pointer; color:var(--ink); transition:transform .12s var(--ease);
}
.icon-btn:active{transform:scale(.92)}
.icon-btn .count{
position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
background:var(--black); color:var(--accent-strong); font-size:10px; font-weight:800; border-radius:var(--pill);
display:flex; align-items:center; justify-content:center; border:2px solid var(--bg);
}
/* ---- Bottom navigation ---- */
.bottom-nav{
position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:50;
width:100%; max-width:var(--shell); height:var(--nav-h);
padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
background:rgba(247,248,244,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
border-top:1px solid var(--line);
}
.bottom-nav a{
display:flex; flex-direction:column; align-items:center; gap:3px;
color:var(--muted); font-size:10.5px; font-weight:600; padding:6px 0; border-radius:14px;
transition:color .15s var(--ease);
}
.bottom-nav a i{font-size:17px}
.bottom-nav a.active{color:var(--ink)}
.bottom-nav a.active i{color:var(--ink)}
.bottom-nav .nav-center i{
width:46px;height:46px;border-radius:var(--pill); background:var(--black); color:var(--accent-strong);
display:flex;align-items:center;justify-content:center;font-size:18px;
box-shadow:0 8px 20px rgba(5,5,5,.35); margin-top:-24px; border:3px solid var(--bg);
}
/* ---- Cards ---- */
.card{
background:var(--card); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:16px;
border:1px solid rgba(255,255,255,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.card.flush{padding:0; overflow:hidden}
.card.solid{background:var(--card-solid)}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:22px 2px 12px}
.section-head:first-child{margin-top:6px}
.section-head h3{margin:0}
.section-head a{color:var(--accent-ink); font-weight:700; font-size:13px}
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
/* ---- Buttons ---- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:13px 20px; border-radius:var(--r-sm); border:1px solid var(--line-2);
font-weight:700; font-size:15px; cursor:pointer; transition:transform .12s var(--ease), box-shadow .15s;
background:var(--card-solid); color:var(--ink);
}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--accent); color:var(--black); border:none; box-shadow:0 8px 22px rgba(140,255,0,.28)}
.btn-lime:active{background:var(--accent-strong)}
.btn-dark{background:var(--black); color:#fff; border:none}
.btn-ghost{background:transparent; border:1px solid var(--line-2); color:var(--ink)}
.btn-glass{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.btn-block{display:flex; width:100%}
.btn-lg{padding:16px 22px; font-size:16px; border-radius:var(--r)}
.btn-sm{padding:9px 14px; font-size:13px; border-radius:var(--pill)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-row{display:flex; gap:10px}
.btn-row .btn{flex:1}
/* ---- Badges / chips ---- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--pill); font-size:11px; font-weight:700; background:var(--surface-soft); color:var(--ink-soft)}
.badge-live{background:var(--live); color:#fff}
.badge-lime{background:var(--accent); color:var(--black)}
.badge-dark{background:var(--black); color:var(--accent-strong)}
.badge-soft{background:var(--live-soft); color:var(--live)}
.pulse-dot{width:8px;height:8px;border-radius:50%; background:#fff; animation:pulse 1.6s infinite}
.lime-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:8px 15px; border-radius:var(--pill); background:var(--card-solid); border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all .15s var(--ease)}
.chip.active{background:var(--black); color:#fff; border-color:var(--black)}
.chip i{color:var(--accent-ink)}
.chip.active i{color:var(--accent-strong)}
/* ---- Skeleton ---- */
.skeleton{position:relative; overflow:hidden; background:var(--surface-soft); border-radius:var(--r)}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:shimmer 1.4s infinite}
.video-skeleton{aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); background:linear-gradient(135deg,var(--surface-soft),#dde3d2)}
.video-skeleton .spark{width:38px;height:38px;border-radius:50%; background:rgba(140,255,0,.18); display:flex; align-items:center; justify-content:center}
/* ---- Product cards (grid) ---- */
.product-card{
display:flex; flex-direction:column; background:var(--card-solid); border-radius:var(--r);
overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);
transition:transform .15s var(--ease);
}
.product-card:active{transform:scale(.97)}
.pc-img{position:relative; aspect-ratio:1; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden}
.pc-img img{width:100%; height:100%; object-fit:cover}
.pc-img.contain img{object-fit:contain; padding:8px}
.pc-rating{position:absolute; left:8px; bottom:8px; background:rgba(5,5,5,.72); color:#fff; font-size:10.5px; font-weight:700; padding:4px 8px; border-radius:var(--pill); display:inline-flex; gap:4px; align-items:center; backdrop-filter:blur(6px)}
.pc-rating i{color:var(--accent-strong); font-size:9px}
.fav{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; box-shadow:var(--shadow-sm); backdrop-filter:blur(6px)}
.fav:active{transform:scale(.88)}
.pc-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px}
.pc-cat{font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pc-title{font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em}
.row-tight{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px}
.quick-add{width:32px;height:32px;border-radius:var(--pill);border:none;background:var(--black);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex:0 0 auto}
.quick-add:active{transform:scale(.88)}
/* mini horizontal product */
.product-mini{width:150px}
.product-mini .thumb{aspect-ratio:1; border-radius:16px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative}
.product-mini .thumb img{width:100%;height:100%;object-fit:cover}
.product-mini .thumb.contain img{object-fit:contain; padding:8px}
.product-mini .nm{font-weight:700; font-size:13px; color:var(--ink); margin-top:8px; line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-mini .vend{font-size:10.5px; color:var(--muted); font-weight:600; margin-top:1px}
.price{font-weight:800; color:var(--ink)}
.price .old{color:var(--muted); font-weight:600; text-decoration:line-through; font-size:.8em; margin-left:6px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hscroll{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; margin:0 -16px; padding-left:16px; padding-right:16px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{flex:0 0 auto}
/* ---- Live cards (portrait) ---- */
.live-card{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); background:#101010; aspect-ratio:9/13; display:block}
.live-card .cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.live-card .scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,0) 55%)}
.live-card .top{position:absolute; top:8px; left:8px; right:8px; display:flex; justify-content:space-between; align-items:flex-start; z-index:2}
.live-card .meta{position:absolute; left:10px; right:10px; bottom:10px; color:#fff; z-index:2}
.live-card .meta .t{font-weight:700; font-size:13px; line-height:1.25}
.live-card .meta .v{font-size:11px; opacity:.8}
.view-count{background:rgba(0,0,0,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; padding:4px 8px; border-radius:var(--pill); font-size:10.5px; font-weight:700; display:inline-flex; gap:5px; align-items:center}
/* ---- Portrait live video shell (brief §8) ---- */
.live-video-shell{
aspect-ratio:9/16; width:100%; max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px);
border-radius:var(--r-xl); overflow:hidden; position:relative; background:#111;
}
.live-video-shell video{width:100%; height:100%; object-fit:cover; display:block}
/* ---- List rows ---- */
.list-row{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.prod-thumb{width:64px;height:64px;flex:0 0 auto;border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden}
.prod-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
/* ---- Stepper / forms ---- */
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--pill); overflow:hidden; background:var(--card-solid)}
.stepper button{width:34px;height:34px;border:none;background:transparent;font-size:16px;font-weight:700;cursor:pointer;color:var(--ink)}
.stepper span{min-width:28px;text-align:center;font-weight:700}
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px}
.input{width:100%; padding:13px 15px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--card-solid); font-size:15px; transition:border-color .15s}
.input:focus{border-color:var(--accent-ink); outline:none}
textarea.input{resize:vertical; min-height:80px}
.upload{border:1.5px dashed var(--line-2); border-radius:var(--r-sm); padding:22px; text-align:center; color:var(--muted); background:var(--card-solid)}
.upload i{font-size:22px; color:var(--accent-ink)}
/* ---- Onboarding ---- */
.ob-hero{border-radius:var(--r-lg); padding:26px 22px; background:var(--card); border:1px solid rgba(255,255,255,.65); box-shadow:var(--shadow); position:relative; overflow:hidden; backdrop-filter:blur(14px)}
.ob-illus{aspect-ratio:16/10; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:52px; color:var(--black); margin-bottom:18px; overflow:hidden; position:relative; background:linear-gradient(150deg,var(--accent),#e3f7c6)}
.ob-illus img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dots{display:flex; gap:7px; justify-content:center; margin:18px 0}
.dots i{width:7px;height:7px;border-radius:50%; background:var(--line-2); transition:all .2s}
.dots i.on{width:22px; background:var(--black); border-radius:var(--pill)}
.progress{height:6px; border-radius:var(--pill); background:var(--surface-soft); overflow:hidden; margin-bottom:20px}
.progress .bar{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-strong)); transition:width .35s var(--ease)}
.step-num{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
/* ---- Chat ---- */
.chat-scroll{display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding:6px 2px}
.bubble{max-width:78%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.35; word-wrap:break-word}
.bubble .who{font-size:11px; font-weight:800; margin-bottom:2px}
.bubble.them{align-self:flex-start; background:var(--surface-soft); color:var(--ink-soft); border-bottom-left-radius:5px}
.bubble.them .who{color:var(--accent-ink)}
.bubble.me{align-self:flex-end; background:var(--black); color:#fff; border-bottom-right-radius:5px}
.bubble.me .who{color:var(--accent-strong)}
.bubble .t{font-size:10px; opacity:.55; margin-top:3px}
.chat-input{display:flex; gap:8px; align-items:center; padding-top:8px; border-top:1px solid var(--line)}
.chat-input .input{border-radius:var(--pill)}
.chat-empty{text-align:center; color:var(--muted); padding:24px 10px; font-size:13px}
/* ---- Queue ---- */
.q-item{display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-sm); background:var(--card-solid); border:1px solid var(--line); margin-bottom:8px}
.q-avatar{width:40px;height:40px;border-radius:var(--pill); background:var(--black); color:var(--accent-strong); display:flex;align-items:center;justify-content:center;font-weight:800; flex:0 0 auto; font-size:14px}
.q-item .nm{font-weight:700; color:var(--ink); font-size:14px}
.q-item .st{font-size:11px; color:var(--muted); font-weight:600}
.q-chip{font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:var(--pill)}
.q-chip.waiting{background:var(--surface-soft); color:var(--ink-soft)}
.q-chip.called{background:var(--accent); color:var(--black)}
.q-chip.active{background:var(--black); color:var(--accent-strong)}
/* ---- Empty / notice / toast ---- */
.empty{text-align:center; padding:40px 20px; color:var(--muted)}
.empty i{font-size:34px; color:var(--line-2); margin-bottom:12px}
.empty h4{color:var(--ink)}
.notice{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface-soft); color:var(--ink-soft); font-size:12.5px; font-weight:600}
.notice i{color:var(--accent-ink); margin-top:2px}
#toast{position:fixed; left:50%; bottom:calc(var(--nav-h) + 16px); transform:translateX(-50%) translateY(20px);
background:var(--black); color:#fff; padding:12px 18px; border-radius:var(--pill); font-size:13.5px; font-weight:600;
box-shadow:var(--shadow-lg); z-index:300; opacity:0; pointer-events:none; transition:all .3s var(--ease); max-width:88%; text-align:center}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
/* ---- Splash / hero ---- */
.splash{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:space-between; padding:36px 24px calc(28px + env(safe-area-inset-bottom,0px)); background:radial-gradient(120% 60% at 50% 0%,var(--surface),var(--bg) 55%,var(--surface-soft))}
.hero-card{border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-lg); aspect-ratio:5/5.6; background:#0c0d0b; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff}
.hero-card .cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72}
.hero-card .scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.05) 60%)}
.hero-card .halo{position:absolute; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(140,255,0,.4),transparent 70%); top:-60px; right:-60px; filter:blur(8px)}
.concept{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0}
.concept .c{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--card-solid); border:1px solid var(--line); padding:8px 12px; border-radius:var(--pill)}
.concept .c i{color:var(--accent-ink)}
/* ---- Fullscreen live viewer ---- */
.live-view{position:relative; height:100vh; height:100dvh; background:#0a0b09; overflow:hidden}
.live-view .stage{position:absolute; inset:0}
.live-view .stage video{width:100%;height:100%;object-fit:cover}
.fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:22px; box-sizing:border-box;
background:radial-gradient(120% 100% at 50% 0%,#23261f,#0e100c); color:#fff}
.fallback .mark{font-weight:800; letter-spacing:-.02em; font-size:18px; opacity:.95; max-width:100%; overflow-wrap:break-word}
.fallback .msg{font-size:12.5px; color:rgba(255,255,255,.68); max-width:min(240px,86vw); overflow-wrap:break-word; line-height:1.4}
.fallback .brand-dot{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:rgba(255,255,255,.85); font-weight:700; max-width:86vw; overflow-wrap:break-word; flex-wrap:wrap; justify-content:center; text-align:center}
.lv-scrim-top{position:absolute; top:0;left:0;right:0; height:140px; background:linear-gradient(to bottom,rgba(0,0,0,.62),transparent); z-index:2; pointer-events:none}
.lv-scrim-bottom{position:absolute; bottom:0;left:0;right:0; height:330px; background:linear-gradient(to top,rgba(0,0,0,.82),transparent); z-index:2; pointer-events:none}
.lv-top{position:absolute; top:calc(env(safe-area-inset-top,0) + 14px); left:14px; right:14px; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:10px}
.glass-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:var(--pill); padding:6px 12px; color:#fff; font-size:12px; font-weight:700}
.lv-close{width:38px;height:38px;border-radius:50%; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex;align-items:center;justify-content:center; font-size:16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); flex:0 0 auto}
/* customer live chat drawer */
.lv-chat{position:absolute; left:14px; bottom:288px; z-index:5; width:74%; max-height:150px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; overflow:hidden; mask-image:linear-gradient(to top,#000 72%,transparent); transition:max-height .3s var(--ease)}
.lv-chat.expanded{max-height:320px; overflow-y:auto; background:rgba(0,0,0,.35); border-radius:var(--r); padding:10px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); mask-image:none; border:1px solid rgba(255,255,255,.12)}
.lv-chat .line{color:#fff; font-size:12.5px; background:rgba(20,24,16,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:6px 10px; border-radius:12px; width:fit-content; max-width:100%; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lv-chat .line b{color:var(--accent)}
.lv-chat .line.vendor b{color:var(--accent-strong)}
/* glass product + queue cards */
.lv-product{position:absolute; left:14px; right:14px; bottom:128px; z-index:6; display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:var(--r); padding:10px}
.lv-product .lp-thumb{width:52px;height:52px;border-radius:12px;flex:0 0 auto; background:#fff; display:flex;align-items:center;justify-content:center; overflow:hidden}
.lv-product .lp-thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.lv-product .lp-nm{color:#fff; font-weight:700; font-size:13px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lv-product .lp-pr{color:var(--accent); font-weight:800; font-size:13px}
/* queue bottom sheet */
.lv-queue{position:absolute; left:14px; right:14px; bottom:206px; z-index:6; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:var(--r); padding:14px; color:#fff; display:none; transform:translateY(14px); opacity:0; transition:all .3s var(--ease)}
.lv-queue.show{display:block; transform:none; opacity:1}
.lv-queue .qn{font-size:26px; font-weight:800; line-height:1.1}
.lv-queue.next{background:rgba(183,235,113,.94); color:var(--black); border-color:var(--accent); animation:pulseCard 1.8s infinite}
.lv-queue.next .qn{color:var(--black)}
.lv-queue.next .small{color:rgba(5,5,5,.7)}
.lv-input{position:absolute; left:14px; right:14px; bottom:calc(env(safe-area-inset-bottom,0) + 74px); z-index:6; display:flex; gap:8px}
.lv-input .input{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:var(--pill); padding:11px 16px}
.lv-input .input::placeholder{color:rgba(255,255,255,.6)}
.lv-actions{position:absolute; left:14px; right:14px; bottom:calc(env(safe-area-inset-bottom,0) + 18px); z-index:6; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.lv-actions .btn{height:46px}
/* ---- Demo tools accordion ---- */
.tools{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--card-solid)}
.tools summary{padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
.tools summary::-webkit-details-marker{display:none}
.tools .tools-body{padding:0 14px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tools .btn{font-size:12.5px; padding:10px 8px}
/* ---- Misc ---- */
.divider{height:1px; background:var(--line); margin:16px 0}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.muted{color:var(--muted)} .small{font-size:12.5px} .center{text-align:center}
.mt{margin-top:14px}.mt-l{margin-top:22px}.mb{margin-bottom:14px}
.stretch{display:flex; flex-direction:column; min-height:calc(100vh - 60px); min-height:calc(100dvh - 60px)}
.spacer{flex:1}
.success-check{width:88px;height:88px;border-radius:50%; background:var(--accent); color:var(--black); display:flex; align-items:center; justify-content:center; font-size:40px; margin:0 auto 18px; box-shadow:0 12px 32px rgba(140,255,0,.4); animation:pop .5s var(--ease) both}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.confetti i{position:absolute; width:8px;height:12px; opacity:.9; animation:fall linear forwards}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--accent-ink);animation:spin .8s linear infinite;display:inline-block}
.card-anim{animation:fadeUp .4s var(--ease) both}
/* ---- Animations ---- */
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(183,235,113,.6)}70%{box-shadow:0 0 0 9px rgba(183,235,113,0)}100%{box-shadow:0 0 0 0 rgba(183,235,113,0)}}
@keyframes pulseCard{0%,100%{box-shadow:0 0 0 0 rgba(140,255,0,.35)}50%{box-shadow:0 0 0 10px rgba(140,255,0,0)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bubbleIn{from{opacity:0; transform:translateY(6px) scale(.97)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}
/* ---- v3 additions ---- */
.modal-back{position:fixed; inset:0; z-index:400; background:rgba(10,12,9,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; animation:fadeUp .2s var(--ease) both}
.modal{width:100%; max-width:var(--shell); background:var(--surface); border-radius:24px 24px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom,0)); box-shadow:var(--shadow-lg); animation:sheetUp .3s var(--ease) both}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.cat-card{flex:0 0 auto; width:104px; padding:12px 10px; border-radius:var(--r); background:var(--card-solid); border:1.5px solid var(--line); text-align:center; cursor:pointer; transition:all .15s var(--ease)}
.cat-card i{width:38px;height:38px;border-radius:var(--pill); background:var(--surface-soft); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:7px}
.cat-card .cc-t{font-weight:700; font-size:12px; color:var(--ink); line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; overflow-wrap:break-word; word-break:break-word}
.cat-card .cc-n{font-size:10.5px; color:var(--muted); font-weight:600}
.cat-card.active{border-color:var(--accent-strong); background:linear-gradient(160deg,rgba(183,235,113,.28),rgba(255,255,255,.9))}
.cat-card.active i{background:var(--accent); color:var(--black)}
.sum-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sum-card{background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.sum-card .sc-v{font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.sum-card .sc-l{font-size:11px; font-weight:700; color:var(--muted); margin-top:2px}
.sum-card i{color:var(--accent-ink); font-size:14px}
.mgr-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.mgr{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:var(--r-sm); background:var(--card-solid); border:1px solid var(--line); font-size:10.5px; font-weight:700; color:var(--ink-soft); text-align:center; cursor:pointer}
.mgr i{width:36px;height:36px;border-radius:12px; background:var(--surface-soft); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:14px}
.timeline{position:relative; padding-left:22px}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line-2)}
.tl-step{position:relative; padding-bottom:16px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:""; position:absolute; left:-22px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--surface-soft); border:2.5px solid var(--line-2)}
.tl-step.done::before{background:var(--accent); border-color:var(--accent-ink)}
.tl-step.now::before{background:var(--accent-strong); border-color:var(--accent-ink); animation:pulse 1.6s infinite}
.tl-step .tl-t{font-weight:700; font-size:13.5px; color:var(--ink)}
.tl-step .tl-d{font-size:11.5px; color:var(--muted)}
.bars{display:flex; align-items:flex-end; gap:8px; height:80px; padding:6px 2px 0}
.bars .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px}
.bars .bar-v{width:100%; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,var(--accent),var(--accent-strong)); min-height:6px}
.bars .bar-l{font-size:9.5px; font-weight:700; color:var(--muted)}
.map-card{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.map-card .leaflet-container{height:220px; width:100%}
.switch{position:relative; width:46px; height:26px; flex:0 0 auto}
.switch input{opacity:0; width:0; height:0}
.switch .sl{position:absolute; inset:0; border-radius:var(--pill); background:var(--line-2); transition:.2s; cursor:pointer}
.switch .sl::before{content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.2s; box-shadow:var(--shadow-sm)}
.switch input:checked + .sl{background:var(--accent)}
.switch input:checked + .sl::before{transform:translateX(20px)}
.day-pill{width:38px; height:38px; border-radius:var(--pill); border:1.5px solid var(--line-2); background:var(--card-solid); font-size:11px; font-weight:800; color:var(--ink-soft); cursor:pointer}
.day-pill.on{background:var(--black); border-color:var(--black); color:var(--accent-strong)}
.thread-tab{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none}
.thread-tab::-webkit-scrollbar{display:none}
.thread-pill{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--pill); background:var(--card-solid); border:1.5px solid var(--line-2); font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer}
.thread-pill.active{border-color:var(--accent-strong); background:linear-gradient(160deg,rgba(183,235,113,.3),#fff); color:var(--ink)}
.thread-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-strong)}
.notif-row{display:flex; gap:12px; align-items:flex-start; padding:13px 12px; border-radius:var(--r-sm); background:var(--card-solid); border:1px solid var(--line); margin-bottom:8px; cursor:pointer}
.notif-row.unread{border-left:3px solid var(--accent-strong)}
.stage-blur{position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(40px) brightness(.42) saturate(1.1); transform:scale(1.15)}
.success-ring{width:88px;height:88px;border-radius:50%;margin:0 auto;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--black);box-shadow:0 0 0 12px rgba(183,235,113,.25);animation:pop .5s var(--ease) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* ---- v4: editorial type + vibrance + live layout + reels discovery ---- */
:root{ --font-display:var(--font); --soft-lime:rgba(183,235,113,.28); }
body{
background:
radial-gradient(circle at 20% 0%, rgba(183,235,113,.28), transparent 30%),
linear-gradient(180deg,#F8FAF5,#EEF1EA);
background-attachment:fixed;
}
h1, h2, .ob-hero h1, .section-head h3, .p-title, .hero-card h1, .hero-card h2{
font-family:var(--font-display); letter-spacing:-.022em; font-weight:800;
}
.section-head h3{font-size:19px}
/* new-item entrance — applied by JS only to genuinely new nodes */
.is-new{animation:itemEnter .22s ease-out both}
@keyframes itemEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* perfect-circle chat send */
.chat-send{
width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;
border-radius:999px;display:inline-grid;place-items:center;padding:0;aspect-ratio:1/1;
background:var(--accent);color:var(--black);border:none;font-size:15px;box-shadow:var(--shadow-sm);cursor:pointer;
}
.chat-send:active{transform:scale(.92)}
.chat-input .chat-send, .chat-input-row .chat-send{flex:0 0 44px}
/* ---- Search bar (the component was referenced by home/explore but never defined) ---- */
.search-row{position:relative; display:flex; align-items:center; gap:10px; width:100%}
.search{
flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px;
height:46px; padding:0 14px; border-radius:var(--pill);
background:var(--card-solid); border:1px solid var(--line);
box-shadow:0 1px 2px rgba(16,18,15,.03), 0 8px 22px -16px rgba(16,18,15,.24);
transition:border-color .16s ease, box-shadow .16s ease;
}
.search:focus-within{border-color:var(--accent-ink); box-shadow:0 0 0 4px rgba(183,235,113,.22)}
.search i{color:var(--muted); font-size:14px; flex:0 0 auto}
.search input{
flex:1 1 auto; min-width:0; width:100%;
border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--ink);
-webkit-appearance:none; appearance:none;
}
.search input::placeholder{color:var(--muted); font-size:14px}
.search-row .icon-btn{flex:0 0 46px; width:46px; height:46px}
/* status chips must never float into the search row and overlap the input */
.search-row .badge, .search-row .glass-badge{display:none}
/* customer live: layered bottom stack — chat is its own scroll layer, never covered */
.live-bottom-stack{position:absolute;left:14px;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0));display:grid;gap:10px;z-index:20}
.live-chat-drawer{max-height:30vh;overflow-y:auto;padding-bottom:4px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%)}
.live-chat-drawer::-webkit-scrollbar{display:none}
.lv-product.compact{padding:8px 10px}
.lv-product.compact .lp-thumb{width:38px;height:38px}
.lv-product.compact .lp-nm{font-size:12px}
.glass-panel{background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:var(--r)}
.stage-tint{position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,rgba(140,255,0,.14),transparent 46%),radial-gradient(circle at 85% 88%,rgba(183,235,113,.10),transparent 40%);pointer-events:none}
.offline-card{background:rgba(255,255,255,.12);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:16px;text-align:center;color:#fff}
/* reels-style live discovery */
.discover-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stream-tile{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:9/14;min-height:230px;background:#141712;box-shadow:var(--shadow-sm);display:block}
.stream-tile .st-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 9s ease-in-out infinite alternate;filter:saturate(1.08)}
.stream-tile.offline .st-bg{filter:saturate(.7) brightness(.8)}
.stream-tile .st-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,5,.35),transparent 32%,transparent 55%,rgba(6,8,5,.82))}
.stream-tile .st-shimmer{position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);background-size:260% 100%;animation:scanline 3.4s linear infinite;mix-blend-mode:screen}
.stream-tile .st-flicker{position:absolute;inset:0;background:rgba(255,255,255,.05);opacity:0;animation:flick 6s steps(2) infinite}
.stream-tile .st-meta{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;z-index:2}
.stream-tile .st-v{font-weight:800;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.stream-tile .st-t{font-size:11px;color:rgba(255,255,255,.82);line-height:1.3;margin-top:2px}
.stream-tile .st-p{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;font-weight:700;background:rgba(0,0,0,.42);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);padding:4px 8px;border-radius:var(--pill);color:var(--accent)}
.stream-tile .st-badge{position:absolute;top:10px;left:10px;z-index:2}
.stream-tile .st-eye{position:absolute;top:10px;right:10px;z-index:2}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(1.5%, -1.5%)}}
@keyframes scanline{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes flick{0%,92%,100%{opacity:0}94%{opacity:.5}96%{opacity:.12}}
/* auth landing */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-soft);border-radius:var(--pill);padding:4px;margin-bottom:14px}
.auth-tabs button{border:none;background:transparent;padding:10px;border-radius:var(--pill);font-weight:800;font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit}
.auth-tabs button.on{background:var(--black);color:var(--accent-strong);box-shadow:var(--shadow-sm)}
/* live bottom stack: neutralize legacy absolute placement + style drawer lines */
.live-bottom-stack .lv-queue, .live-bottom-stack .lv-product,
.live-bottom-stack .lv-input, .live-bottom-stack .lv-actions{position:static !important; left:auto; right:auto; bottom:auto}
.live-bottom-stack .lv-queue.show{transform:none; opacity:1}
.live-chat-drawer .line{color:#fff; font-size:12.5px; background:rgba(20,24,16,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:6px 10px; border-radius:12px; width:fit-content; max-width:92%; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.live-chat-drawer .line b{color:var(--accent-strong); font-weight:700}
.live-chat-drawer .line.vendor b{color:var(--accent)}
.live-chat-drawer.expanded{max-height:44vh}
/* vendor studio camera controls */
.cam-controls{position:absolute;bottom:12px;right:12px;display:flex;gap:8px;z-index:3}
.cam-ctl{width:42px;height:42px;min-width:42px;border-radius:999px;display:inline-grid;place-items:center;padding:0;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.28);background:rgba(20,24,16,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:15px;cursor:pointer;transition:transform .12s var(--ease),background .15s}
.cam-ctl:active{transform:scale(.9)}
.cam-ctl.off{background:rgba(255,59,48,.62);border-color:rgba(255,255,255,.4)}
.cam-ctl.busy{opacity:.55;pointer-events:none}
/* labelled camera control row (always visible under the studio preview) */
.cam-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cam-row .btn{padding:10px 6px;font-size:11.5px;font-weight:700;white-space:nowrap}
.cam-row .btn i{margin-right:4px}
/* studio preview matches the customer's portrait view */
.studio-shell{width:auto !important; height:56vh; height:56dvh; max-height:none !important; aspect-ratio:9/16; margin:0 auto}
/* paused-feed overlay (customer + vendor) */
.paused-overlay{position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; padding:22px;
background:radial-gradient(circle at 50% 40%, rgba(30,36,24,.72), rgba(6,8,5,.92)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.po-card{text-align:center; color:#fff; max-width:280px}
.po-icon{width:62px; height:62px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-size:22px;
background:rgba(183,235,113,.16); color:var(--accent); border:1px solid rgba(183,235,113,.34); animation:breathe 2.4s var(--ease) infinite}
.po-t{font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px}
.po-d{font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.76)}
.po-dots{display:flex; gap:6px; justify-content:center; margin-top:14px}
.po-dots span{width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.35; animation:dotPulse 1.4s infinite}
.po-dots span:nth-child(2){animation-delay:.2s} .po-dots span:nth-child(3){animation-delay:.4s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes dotPulse{0%,100%{opacity:.3}50%{opacity:1}}
/* in-app notification pop */
.notify-pop{position:fixed; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top,0)); z-index:600; display:flex; align-items:center; gap:12px;
padding:12px 14px; border-radius:var(--r); background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line);
box-shadow:var(--shadow-lg); transform:translateY(-130%); transition:transform .32s var(--ease); cursor:pointer; max-width:var(--shell); margin:0 auto}
.notify-pop.show{transform:none}
.np-icon{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--accent); color:var(--black); flex:0 0 38px}
.np-t{font-weight:800; font-size:13.5px; color:var(--ink)}
.np-d{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.np-go{color:var(--muted); font-size:12px}
.nav-badge{position:absolute; top:-5px; right:-8px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--live,#FF3B30); color:#fff;
font-size:9.5px; font-weight:800; display:grid; place-items:center}
/* =======================================================================
v9 — vibrance pass. Lighter surfaces, colour per category, richer cards.
===================================================================== */
body{
background:
radial-gradient(1200px 480px at 12% -6%, rgba(183,235,113,.34), transparent 60%),
radial-gradient(900px 420px at 96% 4%, rgba(124,196,255,.20), transparent 58%),
radial-gradient(700px 400px at 50% 100%, rgba(255,158,196,.12), transparent 60%),
linear-gradient(180deg,#FAFBF7,#EEF1EA);
background-attachment:fixed;
}
.card, .card.solid{border-color:rgba(16,18,15,.07)}
/* offer / deal cards */
.offer-card{position:relative; flex:0 0 auto; width:250px; border-radius:var(--r); padding:16px; overflow:hidden;
background:linear-gradient(135deg,var(--o1,#B7EB71),var(--o2,#8FE3C8)); color:var(--black); box-shadow:var(--shadow-sm); display:block}
.offer-card .oc-tag{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; text-transform:uppercase;
letter-spacing:.08em; background:rgba(5,5,5,.82); color:#fff; padding:4px 9px; border-radius:var(--pill)}
.offer-card .oc-t{font-family:var(--font-display); font-size:18px; font-weight:800; line-height:1.15; margin:9px 0 2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.offer-card .oc-p{font-size:13px; font-weight:800}
.offer-card .oc-p s{opacity:.5; font-weight:600; margin-left:6px}
.offer-card .oc-img{position:absolute; right:-12px; bottom:-10px; width:96px; height:96px; object-fit:contain;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.22)); transform:rotate(-6deg)}
.offer-card .oc-cta{margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800}
/* discount pill on product cards */
.save-pill{position:absolute; top:10px; left:10px; z-index:2; background:var(--live,#FF3B30); color:#fff;
font-size:10px; font-weight:800; padding:4px 8px; border-radius:var(--pill); box-shadow:var(--shadow-sm)}
/* featured spotlight */
.spotlight{position:relative; border-radius:var(--r-xl); overflow:hidden; padding:18px; display:flex; gap:14px; align-items:center;
background:linear-gradient(135deg,#0F1310,#1E2718); color:#fff; box-shadow:var(--shadow-md)}
.spotlight .sp-glow{position:absolute; inset:auto -30% -60% auto; width:220px; height:220px; border-radius:50%;
background:radial-gradient(circle,rgba(140,255,0,.45),transparent 65%)}
.spotlight img{width:88px; height:88px; object-fit:contain; border-radius:14px; background:rgba(255,255,255,.94); padding:8px; position:relative; z-index:2}
.spotlight .sp-k{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong)}
.spotlight .sp-t{font-family:var(--font-display); font-size:18px; font-weight:800; line-height:1.2; margin:3px 0 4px}
.spotlight .sp-p{font-size:14px; font-weight:800; color:var(--accent)}
/* colourful category cards */
.cat-card i{background:var(--tint,rgba(183,235,113,.3)); color:#10120F}
.cat-card{background:#fff}
.cat-card.active{border-color:var(--black); background:linear-gradient(160deg,var(--tint,rgba(183,235,113,.4)),#fff)}
/* softer, lighter summary/mgr tiles for the vendor */
.sum-card{background:linear-gradient(160deg,#fff,#F7F9F3)}
.mgr{background:linear-gradient(160deg,#fff,#F6F8F2)}
.mgr i{background:var(--tint,var(--surface-soft))}
/* =======================================================================
v10 — "App"y polish: iOS-grade touch feel, depth, motion.
===================================================================== */
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased}
.hscroll, .chat-scroll, .thread-tab, .live-chat-drawer{-webkit-overflow-scrolling:touch; scroll-behavior:smooth}
.hscroll{scroll-snap-type:x proximity; padding-inline:2px}
.hscroll > *{scroll-snap-align:start}
input, textarea, select{font-size:16px} /* stops iOS zoom-on-focus */
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 4px rgba(183,235,113,.22)}
/* springy press states — the single biggest "native app" tell */
.btn, .cat-card, .product-card, .product-mini, .offer-card, .mgr, .q-item, .list-row, .icon-btn, .chip, .stream-tile, .spotlight, .notif-row{
transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s ease, background .16s ease;
will-change:transform;
}
.btn:active, .icon-btn:active, .chip:active{transform:scale(.955)}
.cat-card:active, .product-card:active, .product-mini:active, .offer-card:active, .mgr:active, .list-row:active,
.stream-tile:active, .spotlight:active, .notif-row:active, .q-item:active{transform:scale(.975)}
.btn-lime:active{box-shadow:0 0 0 6px rgba(183,235,113,.2)}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
/* grabber on bottom sheets (iOS) */
.modal{position:relative; padding-top:26px}
.modal::before{content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
width:38px; height:5px; border-radius:99px; background:var(--line-2)}
/* iOS-style toast */
#toast{border-radius:16px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
/* depth: cards lift off the canvas */
.product-card{box-shadow:0 1px 2px rgba(16,18,15,.04), 0 8px 22px -12px rgba(16,18,15,.18)}
.card, .card.solid{box-shadow:0 1px 2px rgba(16,18,15,.03), 0 10px 30px -18px rgba(16,18,15,.22)}
/* bottom nav: frosted, floating, iOS-ish */
.bottom-nav{
background:rgba(247,248,244,.86); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
border-top:1px solid rgba(16,18,15,.06);
}
.bottom-nav a{transition:color .16s ease, transform .16s cubic-bezier(.2,.9,.3,1)}
.bottom-nav a:active{transform:scale(.9)}
.bottom-nav a.active i{transform:translateY(-1px)}
/* skeleton shimmer */
.skeleton, .video-skeleton{position:relative; overflow:hidden; background:var(--surface-soft)}
.skeleton::after, .video-skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent); animation:shimmer 1.5s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
/* sticky action bar (product page) */
.buy-bar{position:sticky; bottom:0; z-index:30; display:grid; grid-template-columns:1fr 1fr; gap:10px;
padding:12px 0 calc(12px + env(safe-area-inset-bottom,0));
background:linear-gradient(180deg,rgba(247,248,244,0),rgba(247,248,244,.94) 34%);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
/* clear-filter chip */
.clear-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--pill);
background:var(--black); color:var(--accent-strong); font-size:11.5px; font-weight:800; border:none; cursor:pointer}
/* section headers get a little colour accent */
.section-head h3{position:relative; padding-left:12px}
.section-head h3::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:4px; height:17px; border-radius:99px; background:linear-gradient(180deg,var(--accent-strong),var(--accent))}
/* live-stream cart chip (so the count is visible while shopping mid-stream) */
.lv-cart{position:relative; width:36px; height:36px; border-radius:var(--pill); display:grid; place-items:center;
background:rgba(0,0,0,.42); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.18); color:#fff; font-size:14px; flex:0 0 36px}
.lv-cart .count{position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
background:var(--accent-strong); color:var(--black); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
border:1.5px solid rgba(10,12,9,.55)}
/* badge pop — the count should feel like it lands */
.badge-pop{animation:badgePop .34s cubic-bezier(.2,1.4,.4,1) both}
@keyframes badgePop{0%{transform:scale(.5)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
/* live top bar now carries 4 items — keep them from crowding on small screens */
.lv-top{gap:8px}
.lv-top .glass-badge{min-width:0; padding:6px 10px; font-size:11.5px}
.lv-top #lv-vendor{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96px; display:inline-block; vertical-align:bottom}
.lv-top .lv-close{width:36px; height:36px; font-size:15px; flex:0 0 36px}
/* iOS-style segmented control */
.segmented{display:grid; grid-auto-flow:column; gap:4px; padding:4px; margin-top:12px;
background:var(--surface-soft); border-radius:var(--pill)}
.segmented button{border:0; background:transparent; padding:9px 12px; border-radius:var(--pill);
font-family:inherit; font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer;
transition:all .18s cubic-bezier(.2,.9,.3,1)}
.segmented button.on{background:var(--card-solid); color:var(--ink); box-shadow:0 1px 3px rgba(16,18,15,.12)}
.segmented button:active{transform:scale(.96)}
/* =======================================================================
v15 — design pass: tighter, brighter, more "product" and less "template"
===================================================================== */
/* Category cards: tinted glass tiles with a coloured halo behind the icon */
.cat-card{
position:relative; overflow:hidden; isolation:isolate;
width:100px; padding:14px 10px 12px; border:1px solid var(--line);
background:var(--card-solid); border-radius:20px;
}
.cat-card::before{
content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(170deg, var(--tint,#B7EB71), transparent 76%);
opacity:.30; pointer-events:none;
}
.cat-card > *, .cat-card i{position:relative; z-index:1}
.cat-card.active::before{opacity:.62}
.cat-card i{
position:relative; width:42px; height:42px; margin-bottom:9px; font-size:16px;
background:#fff; color:var(--ink);
box-shadow:0 6px 14px -8px rgba(16,18,15,.35), inset 0 0 0 1px rgba(16,18,15,.05);
}
.cat-card .cc-t{font-size:12px; font-weight:800; letter-spacing:-.01em}
.cat-card .cc-n{font-size:10px; opacity:.75}
.cat-card.active{border-color:var(--ink); box-shadow:0 10px 26px -14px rgba(16,18,15,.4)}
/* graceful fallback where color-mix is unsupported */
/* Hero: less letterboxed, richer light, cleaner type */
.hero-card{aspect-ratio:5/4.6; padding:20px; border-radius:26px}
.hero-card .cover{opacity:.82; transition:transform 8s ease-out}
.hero-card:active .cover{transform:scale(1.04)}
.hero-card .scrim{background:linear-gradient(to top, rgba(4,6,3,.88), rgba(4,6,3,.18) 55%, rgba(4,6,3,.35))}
.hero-card .halo{width:280px; height:280px; top:-90px; right:-80px; background:radial-gradient(circle, rgba(140,255,0,.5), transparent 68%)}
.hero-card h2{letter-spacing:-.02em}
/* Product cards: crisper corners, calmer chrome, image breathing room */
.product-card{border-radius:20px; border:1px solid var(--line); background:var(--card-solid)}
.product-card .pc-img{background:#fff; border-radius:18px 18px 0 0}
.product-card .pc-img img{padding:10px}
.pc-rating{background:rgba(255,255,255,.92); color:var(--ink); font-weight:800; box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.pc-title{letter-spacing:-.01em; font-weight:700}
.quick-add{box-shadow:0 6px 16px -8px rgba(16,18,15,.6)}
/* Section headers: smaller, tighter, more app-like */
.section-head{margin:22px 0 12px}
.section-head h3{font-size:18px; letter-spacing:-.015em}
.section-head a{font-size:12.5px; font-weight:800}
/* Stream cards on home: rounder + gradient floor */
.stream-card{border-radius:20px}
.stream-card .sc-scrim{background:linear-gradient(to top, rgba(4,6,3,.85), transparent 62%)}
/* =======================================================================
v16 — vendor console: vibrant stat tiles, product rows, timeline, switches
===================================================================== */
/* KPI strip */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px}
.stat-tile{
padding:12px 8px; border-radius:18px; text-align:center; border:1px solid var(--line);
background:var(--card-solid); /* an inline linear-gradient supplies the tint */
}
.stat-tile .st-v{font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.stat-tile .st-l{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:2px}
/* product / order rows */
.p-row{display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px;
background:var(--card-solid); border:1px solid var(--line); margin-bottom:8px;
box-shadow:0 1px 2px rgba(16,18,15,.03), 0 10px 26px -20px rgba(16,18,15,.35);
transition:transform .16s cubic-bezier(.2,.9,.3,1)}
.p-row:active{transform:scale(.985)}
.p-row .p-thumb{width:56px; height:56px; border-radius:14px; overflow:hidden; background:#fff;
border:1px solid var(--line); flex:0 0 56px; display:grid; place-items:center}
.p-row .p-thumb img{width:100%; height:100%; object-fit:contain; padding:5px}
.p-row .nm{font-weight:800; font-size:13.5px; color:var(--ink); display:flex; align-items:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.p-row .st{font-size:11.5px; color:var(--muted); margin-top:2px}
/* image picker */
.img-picker{position:relative; height:170px; border-radius:20px; overflow:hidden; cursor:pointer;
background:var(--surface-soft); border:1.5px dashed var(--line-2); display:grid; place-items:center}
.img-picker img{width:100%; height:100%; object-fit:contain; padding:12px; opacity:.25; transition:opacity .2s}
.img-picker.has-img{border-style:solid; background:#fff}
.img-picker.has-img img{opacity:1}
.img-picker.has-img .ip-overlay{opacity:0}
.img-picker:active{transform:scale(.99)}
.ip-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; color:var(--muted); font-size:12px; font-weight:700; transition:opacity .2s; pointer-events:none}
.ip-overlay i{font-size:22px; color:var(--accent-ink)}
/* price preview */
.price-preview{margin-top:10px; padding:10px 12px; border-radius:14px; background:var(--surface-soft);
font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.price-preview b{color:var(--ink); font-size:14px}
.price-preview s{opacity:.6}
.pp-tag{background:var(--live,#FF3B30); color:#fff; font-weight:800; font-size:10px; padding:3px 7px; border-radius:999px}
/* iOS switch */
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;
padding:12px; border-radius:16px; background:var(--surface-soft)}
.switch{position:relative; display:inline-block; width:50px; height:30px; flex:0 0 50px}
.switch input{opacity:0; width:0; height:0}
.switch .slider{position:absolute; inset:0; background:var(--line-2); border-radius:999px;
transition:background .22s cubic-bezier(.2,.9,.3,1); cursor:pointer}
.switch .slider::before{content:""; position:absolute; height:24px; width:24px; left:3px; top:3px;
background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.25);
transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.switch input:checked + .slider{background:var(--accent-strong)}
.switch input:checked + .slider::before{transform:translateX(20px)}
/* fulfilment timeline */
.timeline{display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin:6px 0 16px; position:relative}
.timeline::before{content:""; position:absolute; top:11px; left:12%; right:12%; height:2px; background:var(--line-2)}
.tl-step{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
.tl-dot{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:8px;
background:var(--surface-soft); color:var(--muted); border:2px solid var(--card-solid)}
.tl-step.done .tl-dot{background:var(--accent-strong); color:var(--black)}
.tl-l{font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:center; line-height:1.2}
.tl-step.done .tl-l{color:var(--ink)}
textarea.input{resize:vertical; min-height:70px; font-family:inherit}
/* vendor dashboard: revenue trend + best sellers */
.rev-row{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px}
.rev-l{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.rev-v{font-family:var(--font-display); font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-top:2px}
.bar-chart{display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:104px; padding-top:4px}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%}
.bar{width:100%; max-width:26px; border-radius:8px 8px 4px 4px;
background:linear-gradient(180deg, var(--accent-strong), var(--accent));
box-shadow:0 6px 14px -8px rgba(140,255,0,.8); animation:barGrow .5s cubic-bezier(.2,.9,.3,1) both}
.bar-v{font-size:9px; font-weight:800; color:var(--muted)}
.bar-l{font-size:9.5px; font-weight:800; color:var(--muted)}
@keyframes barGrow{from{transform:scaleY(.2); opacity:.4}to{transform:scaleY(1); opacity:1}}
.bar-col:nth-child(1) .bar{animation-delay:.02s} .bar-col:nth-child(2) .bar{animation-delay:.06s}
.bar-col:nth-child(3) .bar{animation-delay:.10s} .bar-col:nth-child(4) .bar{animation-delay:.14s}
.bar-col:nth-child(5) .bar{animation-delay:.18s} .bar-col:nth-child(6) .bar{animation-delay:.22s}
.bar-col:nth-child(7) .bar{animation-delay:.26s}
.rank{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:0 0 22px;
background:var(--accent); color:var(--black); font-size:11px; font-weight:800; margin-right:10px}
/* sold-out state */
.quick-add.is-out{background:var(--surface-soft); color:var(--muted); box-shadow:none}
/* =======================================================================
v20 — iOS / Safari correctness
===================================================================== */
/* 1. WHITE-ON-WHITE FIX.
These elements had a WHITE translucent background with WHITE text, which is
only legible if backdrop-filter blurs a dark video behind them. On iOS (and
whenever the feed is light or the blur is dropped) the text vanished.
They now sit on a DARK translucent base, which is readable in every case. */
.btn-glass{
background:rgba(18,22,15,.55); color:#fff;
border:1px solid rgba(255,255,255,.28);
}
.lv-queue{
background:rgba(14,17,11,.72); color:#fff;
border:1px solid rgba(255,255,255,.16);
}
.lv-input .input{
background:rgba(18,22,15,.6); color:#fff;
border:1px solid rgba(255,255,255,.26);
}
.lv-input .input::placeholder{color:rgba(255,255,255,.65)}
.offline-card{
background:rgba(14,17,11,.75); color:#fff;
border:1px solid rgba(255,255,255,.16);
}
/* Where blur is unavailable entirely, go fully opaque rather than translucent. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.btn-glass, .lv-queue, .lv-input .input, .offline-card,
.glass-badge, .lv-close, .lv-cart, .cam-ctl, .view-count, .pc-rating{
background:rgba(12,15,10,.92) !important;
}
.appbar{background:var(--bg) !important}
.bottom-nav{background:#F7F8F4 !important}
}
/* White text over imagery always gets a shadow, so it can never disappear. */
.live-card .meta, .lv-product .lp-nm, .stream-tile .st-meta, .po-card,
.hero-card h2, .hero-card .sub{text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* 2. SAFE AREAS — this is the "height eats the UI" problem.
The bottom nav was a flat 70px, so on any iPhone with a home indicator the
labels sat underneath it, and page content was clipped. */
.bottom-nav{
height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
padding-bottom:env(safe-area-inset-bottom, 0px);
box-sizing:border-box;
}
.page{
padding-bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom, 0px));
}
.page.no-nav{padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px))}
.appbar{
padding-top:calc(13px + env(safe-area-inset-top, 0px));
}
.buy-bar{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
/* 3. Live screen sheets must clear the home indicator too. */
.lv-queue, .lv-input, .lv-actions{margin-bottom:env(safe-area-inset-bottom, 0px)}
.lv-close, .lv-cart{margin-top:env(safe-area-inset-top, 0px)}
/* 4. iOS viewport height: 100vh includes the browser chrome, so the bottom of
the page is cut off. dvh fixes it on iOS 16+, fill-available covers older. */
.live-view{
height:100vh;
height:-webkit-fill-available;
height:100dvh;
}
.shell{
min-height:100vh;
min-height:-webkit-fill-available;
min-height:100dvh;
}
/* 5. Small phones (SE / 320-360px): stop the KPI strip and grids from overflowing. */
@media (max-width: 380px){
.stat-strip{grid-template-columns:repeat(2, 1fr)}
.cat-card{width:88px}
.stat-tile .st-v{font-size:15px}
.section-head h3{font-size:16px}
.btn{padding:11px 13px; font-size:12.5px}
.hero-card{aspect-ratio:5/5.2}
}
/* 6. Short screens (landscape / small viewports): let the live sheet scroll. */
@media (max-height: 680px){
.lv-queue{max-height:44vh; overflow-y:auto}
.hero-card{aspect-ratio:5/4}
}
/* Contrast-verified glass. Every white-on-glass element is legible even when the
blur is dropped AND the backdrop is pure white (measured >= 4.5:1, AA). */
.btn-glass{background:rgba(12,15,10,.68)}
.glass-badge{background:rgba(12,15,10,.68)}
.lv-close{background:rgba(12,15,10,.68)}
.lv-cart{background:rgba(12,15,10,.68)}
.cam-ctl{background:rgba(12,15,10,.68)}
.view-count{background:rgba(12,15,10,.68)}
.lv-chat .line, .live-chat-drawer .line{background:rgba(12,15,10,.68)}
.pc-rating{background:rgba(255,255,255,.94); color:var(--ink)}
/* Vendor nav now carries 6 tabs — tighten so nothing wraps on a 360px phone. */
.vendor-nav a{font-size:9px}
.vendor-nav a i{font-size:16px}
.vendor-nav a span:not(.nav-badge){letter-spacing:-.02em}
@media (max-width: 360px){
.vendor-nav a{font-size:8.5px}
.vendor-nav a i{font-size:15px}
}
/* Vendor inbox */
.thread-head{display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px;
background:var(--card-solid); border:1px solid var(--line); margin-bottom:12px}
.chat-scroll{min-height:44vh; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column;
gap:8px; padding:12px; border-radius:18px; background:var(--surface-soft); border:1px solid var(--line)}
.quick-replies{display:flex; gap:6px; overflow-x:auto; padding:10px 2px 4px; -webkit-overflow-scrolling:touch}
.quick-replies .chip{flex:0 0 auto; white-space:nowrap; font-size:11.5px}
.composer{display:flex; gap:8px; align-items:center; margin-top:6px;
padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
.composer .input{flex:1; min-width:0; height:46px}
.composer .send-btn{flex:0 0 46px; width:46px; height:46px; padding:0; border-radius:50%;
display:grid; place-items:center}
/* =======================================================================
AUTH SCREENS — landing, login, signup, store registration
===================================================================== */
.auth-hero{
background:linear-gradient(160deg,#0B0E09,#161C11 60%,#0B0E09);
padding:calc(34px + env(safe-area-inset-top,0px)) 22px 30px;
text-align:center; position:relative; overflow:hidden;
}
.auth-hero::after{
content:""; position:absolute; width:280px; height:280px; top:-120px; right:-90px;
background:radial-gradient(circle, rgba(140,255,0,.42), transparent 68%);
}
.auth-logo{width:min(300px, 74%); height:auto; display:block; margin:0 auto; position:relative; z-index:1}
.auth-tag{margin-top:12px; color:rgba(255,255,255,.82); font-size:13px; line-height:1.55; position:relative; z-index:1}
.auth-page{padding-top:18px}
.auth-card{padding:18px; border-radius:22px; background:var(--card-solid); border:1px solid var(--line);
box-shadow:0 1px 2px rgba(16,18,15,.03), 0 14px 34px -22px rgba(16,18,15,.3)}
.auth-h{font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.field{margin-bottom:12px}
.field label{display:block; font-size:11px; font-weight:800; text-transform:uppercase;
letter-spacing:.06em; color:var(--muted); margin-bottom:6px}
.input.bad{border-color:var(--live); box-shadow:0 0 0 4px rgba(255,59,48,.14)}
.form-error{margin-top:12px; padding:11px 13px; border-radius:14px; font-size:12.5px; font-weight:700;
background:rgba(255,59,48,.1); color:#B3261E; border:1px solid rgba(255,59,48,.25)}
.agree-row{display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px;
border-radius:16px; background:var(--surface-soft); font-size:12.5px; color:var(--ink); line-height:1.5}
.agree-row input{width:20px; height:20px; flex:0 0 20px; accent-color:var(--accent-strong); margin-top:1px}
.agree-row a{font-weight:800; text-decoration:underline}
/* category + day pickers */
.cat-picker{display:flex; flex-wrap:wrap; gap:8px}
.cat-pill{padding:9px 13px; border-radius:var(--pill); border:1px solid var(--line);
background:var(--card-solid); color:var(--ink); font-family:inherit; font-size:12px; font-weight:700;
cursor:pointer; transition:all .16s cubic-bezier(.2,.9,.3,1)}
.cat-pill:active{transform:scale(.95)}
.cat-pill.on{background:var(--black); color:var(--accent-strong); border-color:var(--black)}
.day-picker{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.day{padding:11px 0; border-radius:14px; border:1px solid var(--line); background:var(--card-solid);
color:var(--muted); font-family:inherit; font-size:11px; font-weight:800; cursor:pointer;
transition:all .16s cubic-bezier(.2,.9,.3,1)}
.day:active{transform:scale(.93)}
.day.on{background:var(--accent); color:var(--black); border-color:var(--accent-ink)}
.brand-logo.lg{height:auto; width:min(230px,62%)}
/* store logo picker (vendor onboarding) */
.logo-pick{display:flex; gap:12px; align-items:center}
.logo-prev{width:76px; height:76px; flex:0 0 76px; border-radius:20px; overflow:hidden;
border:1px dashed var(--line); background:var(--surface-soft);
display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:22px}
.logo-prev img{width:100%; height:100%; object-fit:cover; display:block}
/* product photo strip (up to 3) */
.shot-row{display:flex; gap:8px; margin-top:8px}
.shot{position:relative; width:62px; height:62px; flex:0 0 62px; border-radius:14px; overflow:hidden;
border:1px solid var(--line); background:var(--surface-soft)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot .x{position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
border:none; background:rgba(5,5,5,.72); color:#fff; font-size:10px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; padding:0}
.shot .cover{position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:8.5px;
font-weight:800; letter-spacing:.05em; text-transform:uppercase;
background:var(--accent); color:var(--black); padding:2px 0}
.shot.add{display:flex; align-items:center; justify-content:center; border-style:dashed;
color:var(--muted); cursor:pointer; font-size:16px}
/* Live-now / store cards. These carried only a border-radius, so the ![]()
inside laid
out at its natural size and a single product photo filled the whole screen. */
.stream-card{
position:relative; display:block;
width:172px; aspect-ratio:3/4;
border-radius:20px; overflow:hidden;
background:var(--surface-soft);
text-decoration:none; color:#fff;
box-shadow:0 6px 20px -12px rgba(6,10,4,.45);
}
.stream-card > img{
position:absolute; top:0; left:0; right:0; bottom:0;
width:100%; height:100%;
object-fit:cover; display:block;
}
.stream-card .sc-scrim{position:absolute; top:0; left:0; right:0; bottom:0}
.stream-card .sc-meta{
position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
}
.stream-card .sc-meta .v{
font-weight:800; font-size:13.5px; line-height:1.25; color:#fff;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stream-card .sc-meta .c{
font-size:11px; font-weight:600; color:rgba(255,255,255,.78);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Safari needs an explicit height when aspect-ratio is unsupported */
@supports not (aspect-ratio: 3/4){
.stream-card{height:229px}
}
/* .st-bg is an ![]()
in the markup, not a background div: it needs object-fit, or the
photo is stretched to the tile's shape. */
.stream-tile img.st-bg{width:100%; height:100%; object-fit:cover; display:block}
.stream-tile .st-v, .stream-tile .st-t{display:block}
/* The LIVE pill on a store tile / thread row. Used in three places, styled in none. */
.live-pill{
position:absolute; top:10px; left:10px; z-index:3;
display:inline-flex; align-items:center; gap:5px;
padding:4px 9px; border-radius:999px;
background:var(--live); color:#fff;
font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
box-shadow:0 2px 10px -2px rgba(255,59,48,.6);
}
.live-pill .pulse-dot{width:5px; height:5px; background:#fff}
/* Section headings on the auth pages. */
.display{font-family:var(--font-display); font-weight:800; letter-spacing:-.022em; line-height:1.15}
/* verification document rows (vendor onboarding) */
.doc-pick{display:flex; gap:12px; align-items:center; padding:14px;
border:1px solid var(--line); border-radius:16px; background:var(--surface-soft)}
.doc-ico{width:42px; height:42px; flex:0 0 42px; border-radius:12px;
background:#fff; border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:17px}
/* highlight a field the server rejected (registration / signup) */
.field-bad, input.field-bad, select.field-bad{
border-color:var(--live) !important;
box-shadow:0 0 0 3px rgba(255,59,48,.14) !important;
animation:field-shake .3s ease}
@keyframes field-shake{
0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}
/* ===== admin panel ===== */
.admin-tabs{display:flex; gap:4px; background:var(--surface-soft); border:1px solid var(--line);
border-radius:14px; padding:4px; margin:14px 0}
.atab{flex:1; border:none; background:transparent; padding:9px 6px; border-radius:10px;
font-family:var(--font); font-weight:800; font-size:13px; color:var(--muted); cursor:pointer}
.atab.on{background:#fff; color:var(--ink); box-shadow:0 2px 8px -4px rgba(6,10,4,.3)}
.atab-panel{animation:fade-in .2s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.admin-table-wrap{overflow-x:auto; max-width:100%; border:1px solid var(--line); border-radius:14px; background:#fff}
.admin-table{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
.admin-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
color:var(--muted); font-weight:800; padding:11px 12px; border-bottom:1px solid var(--line); background:var(--surface-soft)}
.admin-table td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink)}
.admin-table tr:last-child td{border-bottom:none}
.cell-sub{font-size:11px; color:var(--muted); margin-top:2px}
.role-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle}
.stat-chip{display:inline-block; padding:5px 11px; border-radius:999px; background:var(--surface-soft);
border:1px solid var(--line); font-size:12px; font-weight:700}
.mini-badge{display:inline-block; padding:1px 7px; border-radius:999px; background:var(--soft-lime);
color:var(--ink); font-size:10px; font-weight:800; vertical-align:middle}
.rev-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; font-size:13px; font-weight:600}
.rev-grid .small.muted{font-weight:700; margin-bottom:1px}
.admin-filter{display:flex; gap:4px; flex-wrap:wrap}
.efilt,.evfilt{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
padding:5px 12px; font-family:var(--font); font-weight:700; font-size:12px; cursor:pointer}
.efilt.on,.evfilt.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.log-row{border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#fff}
.log-head{display:flex; gap:8px; align-items:baseline}
.log-lvl{color:#fff; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
padding:2px 7px; border-radius:6px; flex:0 0 auto}
.log-msg{font-size:13px; font-weight:600; color:var(--ink); word-break:break-word}
.log-meta{font-size:11px; color:var(--muted); margin-top:6px; word-break:break-word}
.log-ua{font-size:10.5px; color:var(--muted); opacity:.75; margin-top:3px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,Menlo,monospace}
.log-ctx{font-family:ui-monospace,Menlo,monospace; font-size:11px; background:var(--surface-soft);
border-radius:8px; padding:8px; margin:8px 0 0; overflow-x:auto; color:#444; white-space:pre-wrap; word-break:break-word}
/* form validation (Add Product #11/#12, and reused elsewhere) */
.req{color:var(--live); font-weight:800}
.field-err{color:var(--live); font-size:12px; font-weight:700; margin-top:4px; min-height:0}
.field-err:empty{display:none}
.input-bad{border-color:var(--live) !important; box-shadow:0 0 0 3px rgba(255,59,48,.12) !important}
/* category picker container (vendor Categories page) */
.cat-chip-wrap{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
/* customers list (vendor Customers page) */
.cust-row{display:flex; align-items:center; gap:12px; padding:12px; background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px}
.cust-av{width:42px; height:42px; border-radius:50%; background:var(--soft-lime); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0}
.cust-row .nm{font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cust-row .st{font-size:12px; color:var(--muted); margin-top:2px}
/* promotions (vendor Promotions page) */
.seg-2{display:flex; gap:6px; background:var(--surface-soft); padding:4px; border-radius:var(--r-sm)}
.seg-btn{flex:1; padding:9px; border:none; background:transparent; border-radius:calc(var(--r-sm) - 4px); font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit; font-size:13px}
.seg-btn.on{background:var(--card-solid); color:var(--ink); box-shadow:var(--shadow-sm)}
.promo-row{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px}
.promo-code{font-weight:800; color:var(--ink); letter-spacing:.03em; font-family:ui-monospace,monospace}
.promo-row .st{font-size:12px; color:var(--muted); margin-top:3px}
/* checkout promo code input */
.promo-box{display:flex; gap:8px}
.promo-box .input{flex:1}
/* near-live poster frame in a Discovery tile (#3): no ken-burns (it refreshes on its own) */
.stream-tile img.st-poster{animation:posterFade .45s ease; transition:opacity .3s ease}
@keyframes posterFade{from{opacity:.55}to{opacity:1}}
/* a subtle breathing ring so a LIVE tile reads as alive in the grid */
.stream-tile.is-live::after{content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
box-shadow:0 0 0 2px rgba(255,59,48,.0); animation:liveRing 2.2s ease-in-out infinite; z-index:3}
@keyframes liveRing{
0%,100%{box-shadow:0 0 0 2px rgba(255,59,48,.35), 0 0 12px rgba(255,59,48,.12)}
50%{box-shadow:0 0 0 2px rgba(255,59,48,.75), 0 0 20px rgba(255,59,48,.28)}
}
@media (prefers-reduced-motion:reduce){
.stream-tile img.st-poster{animation:none}
.stream-tile.is-live::after{animation:none; box-shadow:0 0 0 2px rgba(255,59,48,.5)}
}
/* public live comments feed (customer live screen #5) */
.live-comments{display:flex; flex-direction:column; gap:5px; max-height:34vh; overflow-y:auto;
padding:8px 10px; margin-bottom:8px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);
mask-image:linear-gradient(180deg,transparent,#000 22%)}
.live-comments::-webkit-scrollbar{display:none}
.lc-line{font-size:13px; line-height:1.35; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
animation:lcIn .25s ease}
.lc-who{font-weight:800; color:var(--accent-strong); margin-right:5px}
.lc-line.seller .lc-who{color:#ffe08a}
.lc-line.mine .lc-who{color:#fff}
.lc-text{opacity:.96}
@keyframes lcIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
/* ============================================================
Messenger-style private-chat FAB + popup (our branding)
Used on the live screens for the private seller↔shopper chat.
============================================================ */
.chat-fab{
position:fixed; right:16px; bottom:calc(var(--nav-h, 70px) + 18px); z-index:60;
width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; touch-action:none;
background:var(--accent); /* #B7EB71 — same calm lime as .btn-lime */
color:var(--black); box-shadow:0 10px 26px rgba(183,235,113,.30), 0 4px 12px rgba(0,0,0,.28);
display:flex; align-items:center; justify-content:center; font-size:22px;
transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.chat-fab:active{transform:scale(.9); background:var(--accent-strong)}
.chat-fab:hover{box-shadow:0 12px 30px rgba(183,235,113,.42), 0 5px 14px rgba(0,0,0,.3)}
.chat-fab .fab-badge{
position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
border-radius:999px; background:var(--live); color:#fff; font-size:11px; font-weight:800;
display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.35);
border:2px solid #fff;
}
.chat-fab.has-unread .fab-badge{display:flex}
.chat-fab.hidden{display:none}
/* popup panel */
.chat-pop{
position:fixed; right:14px; bottom:calc(var(--nav-h, 70px) + 18px); z-index:61;
width:min(360px, calc(100vw - 28px)); max-height:min(70vh, 560px);
background:var(--card-solid); border-radius:var(--r-lg); overflow:hidden;
box-shadow:var(--shadow-lg); display:none; flex-direction:column;
transform:translateY(12px) scale(.98); opacity:0;
transition:transform .24s var(--ease), opacity .2s var(--ease);
border:1px solid var(--line);
}
.chat-pop.open{display:flex; transform:none; opacity:1}
.chat-pop-head{
display:flex; align-items:center; gap:10px; padding:13px 14px;
background:var(--black); color:#fff; flex:0 0 auto;
}
.chat-pop-head .cph-av{
width:34px; height:34px; border-radius:50%; background:var(--accent);
color:var(--black); display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:14px; flex:0 0 auto;
}
.chat-pop-head .cph-name{font-weight:800; font-size:14px; line-height:1.1}
.chat-pop-head .cph-sub{font-size:11px; color:rgba(255,255,255,.6); margin-top:1px}
.chat-pop-head .cph-x{
margin-left:auto; background:transparent; border:none; color:rgba(255,255,255,.8);
font-size:18px; cursor:pointer; width:30px; height:30px; border-radius:50%;
}
.chat-pop-head .cph-x:active{background:rgba(255,255,255,.12)}
.chat-pop-threads{display:flex; gap:6px; overflow-x:auto; padding:8px 10px 4px; flex:0 0 auto; background:var(--surface)}
.chat-pop-threads:empty{display:none}
.chat-pop-body{
flex:1 1 auto; overflow-y:auto; padding:12px 12px 8px;
display:flex; flex-direction:column; gap:7px; background:var(--surface);
}
.chat-pop-body .cbubble{
max-width:80%; padding:8px 12px; border-radius:16px; font-size:13.5px; line-height:1.35;
background:#fff; color:var(--ink); border:1px solid var(--line); align-self:flex-start;
word-wrap:break-word;
}
.chat-pop-body .cbubble.mine{
align-self:flex-end; background:linear-gradient(150deg,var(--accent),var(--accent-strong));
color:var(--black); border:none; font-weight:600;
}
.chat-pop-body .cbubble .cb-who{display:block; font-size:10.5px; font-weight:800; opacity:.6; margin-bottom:2px}
.chat-pop-empty{margin:auto; text-align:center; color:var(--muted); font-size:13px; padding:20px}
.chat-pop-input{display:flex; gap:8px; align-items:center; padding:10px; border-top:1px solid var(--line); background:var(--card-solid); flex:0 0 auto}
.chat-pop-input .input{flex:1; border-radius:var(--pill)}
.chat-pop-input .chat-send{flex:0 0 auto}
/* On the fullscreen customer live screen there is NO bottom nav, but there IS a tall bottom
stack (actions + comment input + product). Lift the FAB and popup clear of that stack. */
.chat-fab.chat-fab-live{ bottom:calc(env(safe-area-inset-bottom,0) + 190px); }
.chat-pop.chat-pop-live{ bottom:calc(env(safe-area-inset-bottom,0) + 190px); }
@media (max-height:680px){
.chat-fab.chat-fab-live{ bottom:calc(env(safe-area-inset-bottom,0) + 172px); }
.chat-pop.chat-pop-live{ bottom:calc(env(safe-area-inset-bottom,0) + 172px); max-height:min(60vh,440px); }
}
/* list loading skeletons (Customers / Promotions pages) */
.skel-row{display:flex; align-items:center; gap:12px; padding:12px; background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px}
.skel-av{width:42px; height:42px; border-radius:50%; flex:0 0 auto}
.skel-line{height:12px; border-radius:6px; margin:3px 0}
.skel-line.sm{height:10px; opacity:.7}
/* password show/hide toggle (login) */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:46px}
.pw-toggle{position:absolute; top:50%; right:6px; transform:translateY(-50%); width:36px; height:36px;
border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:var(--r-sm);
display:flex; align-items:center; justify-content:center; font-size:15px}
.pw-toggle:active{background:var(--surface-soft)}
.pw-toggle:hover{color:var(--ink)}
/* connecting-state shimmer bar (live viewer) — signals active loading, respects reduced-motion */
.connect-shimmer{width:140px; height:4px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; position:relative}
.connect-shimmer span{position:absolute; inset:0; width:40%; border-radius:999px;
background:linear-gradient(90deg,transparent,var(--accent-strong),transparent); animation:connectSlide 1.3s ease-in-out infinite}
@keyframes connectSlide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){ .connect-shimmer span{animation:none; width:100%; opacity:.5} }
/* optimistic comment states (live public feed) */
.lc-line.lc-pending{opacity:.55}
.lc-line.lc-failed{opacity:.8}
.lc-line.lc-failed .lc-text{color:#ffd7d2}
/* optimistic private-chat bubble */
.cbubble.cbubble-pending{opacity:.6}
/* fly-to-cart animation */
.fly-to-cart{position:fixed; width:44px; height:44px; border-radius:12px; z-index:9999;
background:var(--accent) center/cover no-repeat; box-shadow:0 6px 18px rgba(0,0,0,.28);
pointer-events:none; transition:transform .6s cubic-bezier(.5,-0.2,.4,1), opacity .6s ease}
/* typed toasts (success / error / info) — icon + subtle accent, still on the dark pill */
#toast.toast-success, #toast.toast-error, #toast.toast-info{display:inline-flex; align-items:center; gap:8px; text-align:left}
#toast.toast-success i{color:var(--accent-strong)}
#toast.toast-error i{color:#ff6b60}
#toast.toast-info i{color:#7fd0ff}
/* floating heart reactions (live viewer) */
.react-fab{position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0) + 258px); z-index:60;
width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
background:rgba(255,59,48,.16); color:#ff5b52; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 6px 18px rgba(0,0,0,.24);
transition:transform .18s var(--ease)}
.react-fab:active{transform:scale(.82)}
.react-fab.hidden{display:none}
.react-layer{position:fixed; right:0; bottom:0; width:180px; height:60vh; z-index:59; pointer-events:none; overflow:hidden}
.float-heart{position:absolute; bottom:0; opacity:0; animation:floatHeart 2.6s ease-out forwards; will-change:transform,opacity}
@keyframes floatHeart{
0%{opacity:0; transform:translateY(0) scale(.6)}
12%{opacity:1; transform:translateY(-14px) scale(1.1)}
100%{opacity:0; transform:translateY(-46vh) translateX(-18px) scale(.9)}
}
@media (prefers-reduced-motion:reduce){ .react-fab{display:none !important} }
/* queue "you're next" celebration pulse */
.queue-celebrate{animation:queueCelebrate .7s var(--ease)}
@keyframes queueCelebrate{
0%{box-shadow:0 0 0 0 rgba(140,255,0,.5)}
60%{box-shadow:0 0 0 12px rgba(140,255,0,0)}
100%{box-shadow:0 0 0 0 rgba(140,255,0,0)}
}
@media (prefers-reduced-motion:reduce){ .queue-celebrate{animation:none} }
/* ---- global multi-vendor chat helpers (new-messages pill, offline note, footer) ---- */
.chat-newpill{position:sticky; bottom:6px; align-self:center; border:none; cursor:pointer;
background:var(--black); color:#fff; font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:var(--pill);
box-shadow:0 4px 12px rgba(0,0,0,.25); display:inline-flex; align-items:center; gap:6px; z-index:2}
.chat-pop-offline{display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:12px; font-weight:600;
color:var(--muted); background:var(--surface); border-top:1px solid var(--line)}
.chat-pop-footer{display:block; text-align:center; padding:9px; font-size:12px; font-weight:700;
color:var(--accent-ink); background:var(--card-solid); border-top:1px solid var(--line); text-decoration:none; flex:0 0 auto}
.chat-pop-footer:active{background:var(--surface-soft)}
/* ---- chat header conversation switcher (disclosure menu) ---- */
.chat-pop-head{position:relative}
.cph-switch{flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:transparent; border:none;
color:#fff; cursor:pointer; text-align:left; padding:2px 4px; border-radius:10px; font-family:inherit}
.cph-switch:hover{background:rgba(255,255,255,.06)}
.cph-switch[aria-disabled="true"]:hover{background:transparent}
.cph-switch .cph-name{display:block; font-weight:800; font-size:14px; line-height:1.1; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cph-switch .cph-sub{display:block; font-size:11px; color:rgba(255,255,255,.6); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cph-caret{font-size:11px; color:rgba(255,255,255,.7); flex:0 0 auto; transition:transform .2s var(--ease)}
.cph-menu{position:absolute; top:calc(100% - 4px); left:10px; right:10px; z-index:5; margin:0; padding:6px; list-style:none;
background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); max-height:min(52vh,340px); overflow-y:auto}
.cph-mrow{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; cursor:pointer; color:var(--ink)}
.cph-mrow:hover,.cph-mrow:focus{background:var(--surface-soft); outline:none}
.cph-mrow.sel{background:var(--soft-lime)}
.cph-mrow .cm-av{width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--black);
display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:0 0 auto; position:relative}
.cph-mrow .cm-name{flex:1; min-width:0; font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cph-mrow .cm-live{font-size:9.5px; font-weight:800; letter-spacing:.04em; color:var(--live); border:1px solid var(--live); border-radius:999px; padding:1px 6px; flex:0 0 auto}
.cph-mrow .gt-unread{width:9px; height:9px; border-radius:50%; background:var(--live); flex:0 0 auto}
.cph-mrow .gt-live{position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--live); border:2px solid var(--card-solid)}
/* ---- simulated live-feed frames in Discovery (live store, no real camera poster yet) ---- */
.stream-tile img.st-simframe{transition:opacity .24s ease; animation:none}
.stream-tile .st-simcam{position:absolute;top:10px;left:10px;z-index:3;width:24px;height:24px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;
background:rgba(6,8,5,.5);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25)}
@media (prefers-reduced-motion: reduce){ .stream-tile img.st-simframe{transition:none} }
/* =======================================================================
SOFT LAUNCH — brand legibility
-----------------------------------------------------------------------
The new wordmark carries the Burj skyline and the "Live Shopping
Marketplace" line, so it holds far more detail than the old flat logotype
it replaced. At the sizes that mark was set at (24px in the appbar, 230px
in the hero) the detail collapses and the tagline is unreadable — the logo
was not shrunk, the artwork got denser. Sizing up to match.
===================================================================== */
.appbar{padding:11px 16px}
.brand-logo{height:54px}
.brand-logo.lg{height:auto; width:min(360px, 88%)}
.auth-logo{width:min(380px, 90%)}
/* One line of headroom in the hero, so the taller mark does not crowd the
tagline underneath it. */
.auth-hero{padding-bottom:26px}
.auth-tag{margin-top:14px}
/* Small phones: the appbar has to hold the mark plus two icon buttons, so it
gives a little rather than letting the row wrap. */
@media (max-width:360px){
.brand-logo{height:44px}
}
/* =======================================================================
GUIDED FLOW — one question at a time
-----------------------------------------------------------------------
Used by the store application and by each verification section. The
deterrent in a 40-field onboarding form is never the number of fields, it
is seeing them all at once; a single question with a progress bar reads as
quick even when the flow is long.
The steps are ALL in the DOM. `flow.js` hides all but one — so with
JavaScript off, or before the script loads, the page is simply the long
form it always was. That is the failure mode we want.
===================================================================== */
.flow{position:relative}
.no-js .flow-step{display:block !important}
.no-js .flow-top,.no-js [data-flow-next],.no-js [data-flow-back]{display:none}
.flow-top{position:sticky; top:0; z-index:20; padding:10px 0 12px;
background:linear-gradient(180deg,var(--bg) 70%,transparent);
display:flex; align-items:center; gap:12px}
.flow-top .progress{flex:1; margin:0}
.flow-back{width:34px;height:34px;flex:0 0 34px;border-radius:var(--pill);border:1px solid var(--line-2);
background:var(--card-solid); color:var(--ink); font-size:13px; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center}
.flow-count{flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted)}
.flow-step{display:none; animation:flowIn .32s var(--ease) both}
.flow-step.on{display:block}
@keyframes flowIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.flow-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--accent-ink); margin-bottom:6px}
.flow-q{font-size:23px; font-weight:800; letter-spacing:-.028em; color:var(--ink);
line-height:1.18; margin:0 0 6px}
.flow-help{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 18px}
.flow-step .field label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.flow-step .input{padding:15px 16px; font-size:16px} /* 16px: iOS will not zoom */
.flow-tip{display:flex; gap:9px; align-items:flex-start; margin:12px 0 0; padding:11px 13px;
border-radius:14px; background:var(--surface-soft); font-size:12.5px; line-height:1.5; color:var(--ink-soft)}
.flow-tip i{color:var(--accent-ink); margin-top:2px; flex:0 0 auto}
.flow-actions{display:flex; gap:10px; margin-top:20px}
.flow-actions .btn{flex:1}
/* A reassurance line under a step that asks for something personal. */
.flow-safe{display:flex; gap:7px; align-items:center; justify-content:center;
margin-top:14px; font-size:11.5px; color:var(--muted)}
.flow-safe i{color:var(--accent-ink)}
/* =======================================================================
POLICY SHEET — read the terms without losing the form
-----------------------------------------------------------------------
A link to /legal/terms from a half-filled registration form throws the
form away. The sheet loads the same page in an iframe over the top, so
going back costs nothing.
===================================================================== */
.psheet{position:fixed; inset:0; z-index:200; display:none}
.psheet.open{display:block}
.psheet-back{position:absolute; inset:0; background:rgba(10,12,9,.55);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fade .2s ease both}
.psheet-panel{position:absolute; left:50%; transform:translateX(-50%); bottom:0;
width:100%; max-width:var(--shell); height:88vh; height:88dvh;
background:var(--bg); border-radius:24px 24px 0 0; overflow:hidden;
display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
animation:sheetUp .3s var(--ease) both}
@keyframes sheetUp{from{transform:translate(-50%,100%)} to{transform:translate(-50%,0)}}
@keyframes fade{from{opacity:0} to{opacity:1}}
.psheet-head{display:flex; align-items:center; gap:10px; padding:14px 16px;
border-bottom:1px solid var(--line); background:var(--surface)}
.psheet-head strong{flex:1; font-size:14.5px; color:var(--ink); font-weight:800}
.psheet-grab{position:absolute; top:8px; left:50%; transform:translateX(-50%);
width:38px; height:5px; border-radius:99px; background:var(--line-2)}
.psheet iframe{flex:1; width:100%; border:0; background:var(--bg)}
.psheet-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);
background:var(--surface)}
/* =======================================================================
TEASER STAGE — the customer preview
-----------------------------------------------------------------------
Two earlier attempts were both wrong in opposite directions. Grey loading
skeletons read as "this page is fetching something", which is a lie when
the something is weeks away. Dashed wireframes were honest but made a
brand-new app look like a blueprint, which is not what you want somebody
to see thirty seconds after signing up.
So: the real layout, filled with real-looking content, visibly labelled a
preview and made physically inert. Same approach as the vendor Live Studio.
Nobody mistakes it for live — there is a chip on it saying so — and it
shows what HUB01 actually is rather than where its boxes will go.
===================================================================== */
.tz-stage{position:relative; isolation:isolate; margin-top:12px}
.tz-stage.inert{pointer-events:none; user-select:none}
/* A slow diagonal gloss. Six seconds, not one and a half: at loading-spinner
speed it reads as a progress indicator, at this speed it reads as sheen. */
.tz-stage::after{
content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
background-size:280% 100%; animation:tzSheen 6.5s ease-in-out infinite;
}
@keyframes tzSheen{0%{background-position:150% 0} 55%,100%{background-position:-150% 0}}
/* The content fades out down the page, so it reads as "and more of this"
rather than as a page that stops abruptly. */
.tz-fade{
-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);
mask-image:linear-gradient(to bottom,#000 62%,transparent);
}
.tz-chip{
position:absolute; top:-9px; right:6px; z-index:4;
background:var(--black); color:var(--accent-strong);
font-size:9.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
padding:5px 11px; border-radius:var(--pill); box-shadow:var(--shadow-sm);
}
.tz-cap{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--muted); margin:18px 2px 8px; display:flex; align-items:center; gap:7px}
.tz-cap .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-strong)}
/* Stand-in artwork. No photographs to ship, and a grey box would undo the
whole point, so each tile gets a generated gradient in the brand palette. */
.tz-art{position:absolute; inset:0; background-size:cover}
.tz-art.a{background:linear-gradient(150deg,#1B2413,#3E5A22 55%,#8CFF00)}
.tz-art.b{background:linear-gradient(150deg,#241B2B,#5A2244 60%,#FF7AC8)}
.tz-art.c{background:linear-gradient(150deg,#12202B,#1E5570 58%,#7CC4FF)}
.tz-art.d{background:linear-gradient(150deg,#2B2412,#6E5416 60%,#FFC94D)}
.tz-art.e{background:linear-gradient(150deg,#0F1F1B,#1D5C4A 58%,#5CE0B0)}
.tz-art.f{background:linear-gradient(150deg,#2A1414,#78261F 60%,#FF9478)}
.tz-art .ico{position:absolute; inset:0; display:grid; place-items:center;
font-size:30px; color:rgba(255,255,255,.5)}
/* Product tile for the teaser: real card, stand-in artwork inside. */
.tz-prod .pc-img{background:var(--surface-soft); position:relative; overflow:hidden}
/* Live tile, borrowing the discovery grid's kenburns so it feels alive. */
.tz-live{position:relative; border-radius:var(--r); overflow:hidden;
aspect-ratio:9/14; min-height:200px; background:#141712; display:block}
.tz-live .tz-art{animation:kenburns 11s ease-in-out infinite alternate}
.tz-live .shade{position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg,rgba(6,8,5,.38),transparent 34%,transparent 52%,rgba(6,8,5,.86))}
.tz-live .meta{position:absolute; left:10px; right:10px; bottom:10px; z-index:2; color:#fff}
.tz-live .nm{font-weight:800; font-size:12.5px; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tz-live .sub{font-size:10.5px; color:rgba(255,255,255,.8); margin-top:2px}
.tz-live .pill{position:absolute; top:9px; left:9px; z-index:2}
.tz-live .eye{position:absolute; top:9px; right:9px; z-index:2}
/* -----------------------------------------------------------------------
Teaser stage: greyed, and priced at nothing
-----------------------------------------------------------------------
The mock content was doing its job too well. A shopper seeing a full-colour
product grid with AED prices on it can reasonably believe those are real
listings at real prices, and "I saw it for 2,750 on your app" is a
complaint we would deserve.
So the whole stage is desaturated and dimmed. It still shows the layout and
the density, which is the point, and it cannot be read as a live catalogue.
Prices are not styled away, they are absent from the markup: a greyed price
is still a price.
-------------------------------------------------------------------- */
.tz-stage.inert{filter:grayscale(1) opacity(.5); transition:none}
.tz-stage.inert .badge-live{background:#6D746A}
/* A price-shaped blank, where the layout needs the row to balance. */
.tz-blank{display:inline-block; height:11px; width:52px; border-radius:99px;
background:var(--line-2); vertical-align:middle}
.tz-blank.w{width:74px}
.tz-blank.s{width:34px; height:9px}
/* =======================================================================
ID SCAN — what we read off the card
-----------------------------------------------------------------------
Appears under a document picker once the browser has read the card. Reads
as a result, not as a form: the merchant is confirming something, not
filling something in.
===================================================================== */
.idscan{margin-top:12px; padding:14px; border-radius:16px;
background:var(--surface-soft); border:1px solid var(--line);
animation:flowIn .3s var(--ease) both}
.idscan.good{background:var(--soft-lime); border-color:transparent}
.idscan.quiet{background:var(--card-solid)}
.idscan-head{display:flex; align-items:center; gap:9px; font-size:13.5px;
font-weight:800; color:var(--ink)}
.idscan.good .idscan-head i{color:var(--accent-ink)}
.idscan-sub{margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--muted)}
.idscan-rows{margin-top:11px; display:grid; gap:1px; background:var(--line);
border-radius:12px; overflow:hidden}
.idscan-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:9px 12px; background:var(--card-solid); font-size:12.5px}
.idscan-row span{color:var(--muted); font-weight:600}
.idscan-row strong{color:var(--ink); font-weight:800; text-align:right; word-break:break-word}
.idscan-warn{display:flex; gap:8px; align-items:flex-start; margin-top:9px;
padding:9px 11px; border-radius:12px; background:rgba(201,146,43,.13);
font-size:12px; line-height:1.5; color:var(--ink-soft)}
.idscan-warn i{color:#A8781F; margin-top:2px; flex:0 0 auto}
.idscan-note{display:flex; gap:8px; align-items:flex-start; margin-top:9px;
font-size:12px; line-height:1.5; color:var(--muted)}
.idscan-note i{color:var(--accent-ink); margin-top:2px}
.idscan-done{display:flex; gap:8px; align-items:flex-start; justify-content:flex-start;
text-align:left; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--accent-ink)}
.idscan-done > i{flex:0 0 auto; margin-top:2px}
.idscan-done > span{flex:1 1 auto}
.idscan-spin{width:15px; height:15px; flex:0 0 15px; border-radius:50%;
border:2px solid var(--line-2); border-top-color:var(--accent-ink);
animation:idspin .8s linear infinite}
@keyframes idspin{to{transform:rotate(360deg)}}
/* A field the scan filled, so the merchant can see what changed. */
.idscan-filled{border-color:var(--accent-ink) !important;
box-shadow:0 0 0 3px rgba(140,255,0,.18) !important;
animation:idflash .5s var(--ease)}
@keyframes idflash{0%{background:var(--soft-lime)} 100%{background:var(--card-solid)}}
/* ---- Deferring the paperwork ----------------------------------------------
Shown only when a required document is missing. Sand rather than red: not
having a trade licence photo on your phone at 4pm is a circumstance, not a
mistake, and the panel's job is to explain a trade-off rather than to tell
somebody off. */
.defer{margin-top:18px; padding:15px 16px; border-radius:var(--r-sm);
background:rgba(201,146,43,.10); border:1px solid rgba(201,146,43,.28)}
.defer-head{display:flex; gap:9px; align-items:center; font-size:14px; color:var(--ink)}
.defer-head i{color:#A8781F}
.defer-p{margin:9px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft)}
.defer-list{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px}
.defer-list li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px;
line-height:1.5; color:var(--ink-soft); font-weight:600}
.defer-list i{margin-top:3px; flex:0 0 13px; font-size:11px}
.defer-list .yes i{color:var(--accent-ink)}
.defer-list .no i{color:#A8781F}
.defer-list .no{color:var(--muted)}
.defer-agree{display:flex; gap:10px; align-items:flex-start; margin-top:14px;
padding:11px 12px; border-radius:12px; background:var(--card-solid);
border:1px solid var(--line-2); cursor:pointer; font-size:12.5px;
line-height:1.5; font-weight:600; color:var(--ink)}
.defer-agree input{margin-top:2px; flex:0 0 auto; accent-color:var(--accent-ink);
width:17px; height:17px; cursor:pointer}
/* `.input-bad` is red and `!important`, which is right for a field somebody
got wrong and wrong for this. Not having your trade licence to hand is a
circumstance; the panel is sand and so is its prompt. */
.defer-agree.input-bad{border-color:#C9922B !important;
box-shadow:0 0 0 3px rgba(201,146,43,.16) !important}
/* Where this store stands with shoppers. Same sand family as .defer so the
promise made at signup and the state shown afterwards read as one thing. */
.vis{margin-bottom:12px; padding:15px 16px; border-radius:var(--r-sm);
background:rgba(201,146,43,.10); border:1px solid rgba(201,146,43,.28)}
.vis-head{display:flex; gap:9px; align-items:center; font-size:14px; color:var(--ink)}
.vis-head i{color:#A8781F}
.vis-compact{display:flex; gap:10px; align-items:center; padding:12px 14px;
font-size:12.5px; line-height:1.5; font-weight:600; color:var(--ink-soft);
text-decoration:none}
.vis-compact strong{color:var(--ink)}
.vis-compact > i:first-child{color:#A8781F; flex:0 0 auto}
.vis-compact > i:last-child{color:var(--muted); margin-left:auto; flex:0 0 auto; font-size:11px}
.vis-compact span{min-width:0}