/* UI font: Selawik (SIL Open Font License) — an open, metric-compatible
   substitute for Segoe UI. Uses the visitor's locally installed Segoe UI if
   present, otherwise serves Selawik. No proprietary font is redistributed. */
@font-face { font-family:'Segoe UI'; src:local('Segoe UI'), url('/fonts/selawk.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI'; src:local('Segoe UI Semibold'), url('/fonts/selawksb.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI'; src:local('Segoe UI Bold'), url('/fonts/selawkb.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI'; src:local('Segoe UI Italic'), url('/fonts/selawk.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }

:root {
  /* Sella brand palette */
  --sella-blue-main:#3154E7; --sella-blue-deep:#0B2E9E; --sella-blue-dark:#071B63; --sella-blue-soft:#4F74FF;
  --sella-yellow:#F5B800; --sella-yellow-dark:#D99A00;
  --footer-bg:#111827; --footer-bg-dark:#080F1D; --footer-text:#CBD5E1; --footer-muted:#94A3B8;
  --footer-heading:#FFFFFF; --footer-border:rgba(255,255,255,0.10);
  --blue:#3154E7; --blue-d:#1237C4; --blue-100:#e8edfd;
  --amber:#F5B800; --amber-d:#D99A00; --amber-50:#fff7e0;
  --ink:#111827; --muted:#6B7280; --bg:#F4F7FB; --card:#FFFFFF; --line:#E5EAF5;
  --gold:#f5a623; --red:#e0533d; --green:#1f9d55;
  --radius:6px; --shadow:0 1px 3px rgba(20,30,40,.08),0 6px 18px rgba(20,30,40,.06);
  --font-main:"Inter","Segoe UI",Roboto,Arial,sans-serif;
}
* { box-sizing:border-box; }
/* Never let any stray wide element widen the page past the viewport — on mobile
   that overflow makes Safari zoom out to fit, leaving the header looking narrow
   and content spilling sideways. Guard on the root scroller so position:sticky
   (the topbar) is unaffected; `clip` (no scroll container) with a `hidden`
   fallback for older browsers. Inner scrollers (.adl-wrap, .strip) keep their
   own overflow-x and are unaffected. */
html { height:100%; overflow-x:hidden; overflow-x:clip; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-main); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* sticky footer: the content area grows to fill, footer always sits at the bottom */
main.wrap { flex:1 0 auto; }
.footer { flex-shrink:0; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 18px; width:100%; }
.muted { color:var(--muted); }
h1,h2,h3,h4 { letter-spacing:-.01em; }
::selection { background:var(--blue); color:#fff; }
/* ── Global input base ── (wrapped in :where() so its specificity is 0 and any
   component-level input style — .ifield, .inp, etc. — always wins) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
  width:100%; padding:11px 14px; font-size:14px; font-family:inherit; color:var(--ink);
  border:1px solid var(--line); border-radius:11px; background:var(--card);
  box-shadow:inset 0 1px 2px rgba(20,30,40,.04);
  transition:border-color .15s, box-shadow .15s, background .15s;
  appearance:none;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):focus, select:focus, textarea:focus) {
  outline:none; border-color:var(--blue); background:var(--card);
  box-shadow:0 0 0 3px rgba(49,84,231,.14), inset 0 1px 2px rgba(20,30,40,.02);
}
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.7; }
/* explicit .inp class — same style, explicit width unset so it sizes to its container */
.inp { display:block; width:100%; padding:11px 14px; font-size:14px; font-family:inherit; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(20,30,40,.04);
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none; appearance:none;
}
.inp:focus { outline:none; border-color:var(--blue); background:var(--card);
  box-shadow:0 0 0 3px rgba(49,84,231,.14), inset 0 1px 2px rgba(20,30,40,.02); }
.inp::placeholder { color:var(--muted); opacity:.7; }
/* select retains the chevron */
select { padding-right:34px !important; }

input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(49,84,231,.14); }
.btn, .card, .cat-main, .promo a, .strip .item { transition:all .15s ease; }
/* clean custom dropdown chevron on every <select> */
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:34px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px; }
select::-ms-expand { display:none; }
/* reusable inline line-icons (location / calendar / time). Coloured via currentColor → brand blue */
.svgico { display:inline-block; width:1.05em; height:1.05em; vertical-align:-.16em; flex-shrink:0;
  background-color:currentColor; color:var(--blue); -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.ic-pin { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ic-cal { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.ic-clock { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }
.ic-eye { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.btn:active { transform:translateY(1px); }

/* ===== top bar ===== */
.topbar { background:#1237C4; color:#fff; position:sticky; top:0; z-index:60; }
.topbar-inner { display:flex; align-items:center; gap:18px; height:64px; position:relative; }
.brand { font-size:25px; font-weight:800; color:#fff; letter-spacing:-.5px; padding-left:6px; display:inline-flex; align-items:center; }
.brand span { color:var(--amber); }
.brand .tld { color:#cdddff; font-weight:700; font-size:.66em; margin-left:1px; }
.brand-logo { height:26px; width:auto; display:block; }
.brand-text { margin-left:9px; font-size:15.5px; font-weight:800; color:#fff; white-space:nowrap; }
/* Meet Up / TV Handle minimal-nav "…" dropdown (Manage Profile + theme switch).
   Fully self-contained on purpose: it lives outside .topbar-nav AND must not reuse
   .acct-menu, whose mobile rules flatten it to position:static/display:block for
   the hamburger panel (that reuse once rendered this menu permanently open at the
   top of the page on phones). No mobile overrides exist for these classes, so the
   popover behaves identically at every viewport width. */
.minimal-dd { position:relative; }
.minimal-menu-toggle { width:38px; height:38px; flex-shrink:0; border-radius:9px; background:transparent; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; position:relative; transition:background .15s, transform .15s; }
.minimal-menu-toggle:hover { background:rgba(255,255,255,.14); transform:translateY(-1px); }
.minimal-menu-toggle svg { width:20px; height:20px; display:block; }
/* Logged-in: the toggle shows the user's profile photo (or their initial on a
   colored disc) in a circular frame instead of the dots icon. */
.mm-face { width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff;
  border:2px solid rgba(255,255,255,.4); }
.mm-face img { width:100%; height:100%; object-fit:cover; display:block; }
.minimal-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:80; min-width:200px;
  background:#2a1550; border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.45); }
.minimal-menu.open { display:block; }
.minimal-menu a, .minimal-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border-radius:9px; border:0; background:none; color:#fff; font-size:13.5px; font-weight:600; font-family:inherit;
  text-decoration:none; cursor:pointer; text-align:left; }
.minimal-menu a:hover, .minimal-menu button:hover { background:rgba(255,255,255,.1); }
.minimal-menu .ai { width:20px; display:inline-flex; justify-content:center; }
.minimal-menu form { width:100%; margin:0; }
.minimal-menu .ai svg { width:18px; height:18px; display:block; }
/* size only — visibility of .ic-sun/.ic-moon stays with the theme-switch rules below */
.minimal-menu .theme-toggle svg { width:18px; height:18px; }
.footer-brand .brand { padding-left:0; }
.footer-brand .brand-logo { height:30px; }
.topbar-search { flex:1; min-width:0; display:flex; align-items:center; max-width:680px; background:#fff; border-radius:12px; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:box-shadow .15s; gap:0; }
.topbar-search:focus-within { box-shadow:0 0 0 3px rgba(245,158,11,.5); }
/* override global input rule inside topbar (exclude the panel's filter field) */
.topbar-search > input, .topbar-search > select { border:0 !important; background:transparent !important; border-radius:0 !important; box-shadow:none !important; width:auto; min-width:0; }
.ts-loc { padding:7px 8px 7px 12px; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; white-space:nowrap; flex-shrink:0; min-width:90px; max-width:130px; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 4px center !important; background-size:13px !important; padding-right:20px !important; }
.ts-sep { width:1.5px; min-width:1.5px; background:#d1d5db; height:22px; flex-shrink:0; align-self:center; display:block; }
.ts-q { flex:1; padding:7px 10px; font-size:14px; outline:none; min-width:0; color:var(--ink); font-family:inherit; }
.ts-q::placeholder { color:#9ca3af; }
.ts-btn { border:0; background:var(--blue); color:#fff; padding:0 22px; height:34px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; font-weight:700; font-size:14px; font-family:inherit; white-space:nowrap; }
.ts-btn:hover { background:var(--blue-d); }
.topbar-nav { display:flex; align-items:center; gap:14px; font-size:14px; margin-left:auto; font-weight:600; }
.topbar-nav a { color:#eaf1ff; }
.topbar-nav a:not(.icon):not(.cta):hover { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.topbar-nav .who { color:#cfe0ff; font-weight:600; }
.topbar-nav .icon { width:38px; height:38px; flex-shrink:0; aspect-ratio:1; border-radius:9px; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; position:relative;
  transition:background .15s, transform .15s, opacity .15s; }
.topbar-nav .icon:hover { background:rgba(255,255,255,.14); transform:translateY(-1px); }
.topbar-nav .icon svg { width:20px; height:20px; display:block; }
.topbar-nav .lbl { display:none; }
/* Browse link lives only in the mobile dropdown; hidden on desktop to free space for the search bar */
.topbar-nav .mobile-only-link { display:none; }
.menu-toggle { display:none; border:0; background:transparent; color:#fff; width:42px; height:42px;
  border-radius:8px; font-size:24px; cursor:pointer; align-items:center; justify-content:center; }
.menu-toggle:hover { background:rgba(255,255,255,.14); }
/* categories menu button (left of logo) + dropdown */
.cat-toggle { border:0; background:transparent; color:#fff; width:40px; height:40px; border-radius:9px;
  font-size:22px; line-height:1; cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.cat-toggle:hover { background:rgba(255,255,255,.14); }
.cat-menu { position:absolute; top:calc(100% + 6px); left:8px; min-width:250px; max-width:88vw; max-height:78vh; overflow:auto;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 32px rgba(20,30,40,.24);
  padding:6px; display:none; z-index:75; }
.cat-menu.open { display:block; }
/* hide the scrollbar on the menu (still scrollable via touch/wheel) */
.cat-menu { scrollbar-width:none; -ms-overflow-style:none; }
.cat-menu::-webkit-scrollbar { width:0; height:0; display:none; }
/* dimmed backdrop while a menu is open — focuses attention + blocks clicks beneath */
.scrim { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:55; opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; }
.scrim.show { opacity:1; visibility:visible; }
/* file upload progress */
.upload-progress { margin:10px 0 4px; }
.upbar { height:9px; background:var(--line); border-radius:999px; overflow:hidden; }
.upbar-fill { height:100%; width:0; background:var(--blue); border-radius:999px; transition:width .15s ease; }
.upmsg { font-size:13px; color:var(--muted); margin-top:6px; }
.cat-menu-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; color:var(--ink); }
.cat-menu-item:hover { background:var(--blue-100); }
.cat-menu-item .cm-ic { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; background:var(--blue-100); border-radius:8px; }
.cat-menu-item .cm-text { flex:1; display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.cat-menu-item .cm-nm { font-weight:600; font-size:14px; }
.cat-menu-item small { color:var(--muted); font-weight:400; font-size:12px; }
.cat-menu-item .cm-chev { color:var(--muted); font-size:18px; }
.topbar-nav .icon .dot { position:absolute; top:-3px; right:-3px; background:var(--amber); color:#3a2a00;
  font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.cta { background:var(--amber); color:#3a2a00 !important; padding:9px 18px; border-radius:8px; font-weight:800; }
.cta:hover { background:var(--amber-d); }
/* friendly error / 404 page */
.err-page { max-width:560px; margin:0 auto; padding:54px 20px 70px; text-align:center; }
.err-code { font-size:72px; font-weight:800; line-height:1; color:var(--blue); letter-spacing:-2px; }
.err-page h1 { font-size:26px; margin:10px 0 6px; }
.err-msg { max-width:450px; margin:0 auto 20px; }
.err-search { display:flex; gap:8px; max-width:420px; margin:0 auto 16px; }
.err-search input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--card); color:var(--ink); }
.err-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.err-cats { font-size:14px; }
.err-cats a { display:inline-block; margin:4px 5px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink); text-decoration:none; }
.err-cats a:hover { background:var(--blue-100); border-color:transparent; }
button.link { background:none; border:0; color:#eaf1ff; cursor:pointer; font:inherit; padding:0; }

/* ===== County custom dropdown ===== */
.cd { position:relative; flex-shrink:0; }
.cd-trigger { display:flex; align-items:center; gap:6px; padding:7px 10px 7px 14px; background:transparent; border:0; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; border-radius:9px; transition:background .12s; line-height:1; text-align:left; }
.cd-trigger:hover { background:rgba(0,0,0,.04); }
.cd-chev { width:16px; height:16px; flex-shrink:0; color:#4B5563; display:block; transition:transform .2s; pointer-events:none; }
.cd[data-open] .cd-chev { transform:rotate(180deg); }
/* Panel — hidden by default via display, shown only when .cd has [data-open] */
.cd-panel { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:1300; width:220px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 32px rgba(20,30,40,.18), 0 2px 8px rgba(20,30,40,.1); overflow:hidden; text-align:left; }
.cd[data-open] .cd-panel { display:block; animation:cdSlide .15s ease; }
@keyframes cdSlide { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
/* Search inside panel */
.cd-search-wrap { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg); }
.cd-search-wrap svg { flex-shrink:0; color:var(--muted); }
.cd-search { border:0 !important; background:transparent !important; padding:0 !important; font-size:13px; outline:none; width:100%; color:var(--ink); box-shadow:none !important; border-radius:0 !important; }
.cd-search::placeholder { color:var(--muted); opacity:.7; }
/* List */
.cd-list { list-style:none; margin:0; padding:6px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; }
.cd-list::-webkit-scrollbar { width:4px; }
.cd-list::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.cd-opt { padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--ink); cursor:pointer; transition:background .1s; font-weight:500; }
.cd-opt:hover { background:var(--blue-100); color:var(--blue); }
.cd-opt.cd-active { background:var(--blue); color:#fff; font-weight:700; }
/* Inside hero-search: subtle separator via right border on the .cd wrapper */
.hero-search .cd { border-right:1px solid #eef1f6; }
.hero-search .cd-trigger { color:var(--muted); font-size:14px; font-weight:600; padding:11px 14px 11px 16px; }
.hero-search .cd-trigger .cd-label { color:var(--ink); }
.hero-search .cd-chev { width:14px; height:14px; color:#9ca3af; }
.hero-search .cd-panel { top:calc(100% + 8px); }
/* Inside topbar: tighter trigger */
.topbar-search .cd { display:flex; align-items:center; }
.topbar-search .cd-trigger { padding:6px 8px 6px 12px; font-size:13px; }
/* dark mode */
html[data-theme="dark"] .cd-panel { background:var(--card); border-color:var(--line); }
html[data-theme="dark"] .cd-search-wrap { background:var(--bg); }
html[data-theme="dark"] .cd-opt { color:var(--ink); }
html[data-theme="dark"] .cd-opt:hover { background:rgba(49,84,231,.18); color:#93b4ff; }

/* ===== hero ===== */
.hero { position:relative; overflow:visible; color:#fff; padding:26px 18px 32px; text-align:center;
  border-bottom:1px solid #1b2033;
  background:
    radial-gradient(circle at 8% 75%, rgba(255,255,255,0.14), transparent 26%),
    radial-gradient(circle at 92% 65%, rgba(255,255,255,0.08), transparent 28%),
    linear-gradient(135deg, #3154E7 0%, #1237C4 45%, #071B63 100%); }
.hero::before { content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px); background-size:18px 18px; opacity:0.22;
  -webkit-mask-image:linear-gradient(90deg, black 0%, transparent 28%, transparent 72%, black 100%);
  mask-image:linear-gradient(90deg, black 0%, transparent 28%, transparent 72%, black 100%); pointer-events:none; }
.hero > * { position:relative; z-index:1; }
.hero h1 { font-size:clamp(28px,5vw,42px); margin:0 0 14px; font-weight:800; letter-spacing:-.03em; line-height:1.12; }
/* hero search inputs must not inherit global .inp border/bg (exclude the panel's filter field) */
.hero-search > input, .hero-search > select { border:0 !important; background:#fff !important; border-radius:0 !important; box-shadow:none !important; width:auto; padding:0; }
.hero-search { display:flex; gap:0; max-width:680px; margin:0 auto; background:#fff; border-radius:14px; padding:5px; box-shadow:0 4px 24px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.1); }
.hero-search .loc { border:0; border-right:2px solid #e8edfd; padding:13px 10px 13px 16px; font-size:14px; font-weight:600; border-radius:10px 0 0 10px; color:var(--ink); background:#fff; min-width:130px; max-width:150px; flex-shrink:0; cursor:pointer; }
.hero-search .loc:focus { outline:none; background:#f4f7fb; }
.hero-search .q { flex:1; border:0; padding:13px 14px; font-size:15px; outline:none; min-width:0; color:var(--ink); background:#fff; font-family:inherit; box-shadow:none; border-radius:0; width:auto; }
.hero-search .q::placeholder { color:#9ca3af; }
.hero-search .go { border:0; background:var(--blue); color:#fff; padding:0 24px; border-radius:10px; font-weight:800; font-size:15px; cursor:pointer; white-space:nowrap; transition:background .15s; flex-shrink:0; letter-spacing:.01em; }
.hero-search .go:hover { background:var(--blue-d); }
.hero-search .cam { border:0; border-left:1px solid #e8edfd; background:#fff; color:var(--blue); display:flex; align-items:center; padding:0 12px; cursor:pointer; flex-shrink:0; }
.hero-search .cam:hover { color:var(--blue-d); background:#f4f7fb; }
.hero .hot { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; max-width:720px; margin:12px auto 0; }
.hero .hot-label { color:#dbe6ff; font-size:13px; }
.hero .hot a { background:rgba(255,255,255,.16); color:#fff; padding:4px 12px; border-radius:999px; font-size:13px; }
.hero .hot a:hover { background:rgba(255,255,255,.32); }
.hero-note { color:#cdddff; font-size:12.5px; margin:12px 0 0; }
.cam-note { margin:12px auto 0; max-width:560px; color:#fff; background:rgba(0,0,0,.18); padding:7px 13px; border-radius:8px; font-size:13px; }

/* ===== home layout ===== */
.home { display:grid; grid-template-columns:1fr 290px; gap:20px; margin:22px 0; align-items:start; }
.home.full { grid-template-columns:1fr; }   /* no sidebar → main content uses the whole width */
/* let the content columns shrink so the horizontal strip/grid can't blow out
   the layout and eat the right-hand page margin */
.home > div, .browse > div { min-width:0; }
@media (max-width:1100px){ .home{ grid-template-columns:1fr; } .home-right{ display:none; } }
.home-right { display:flex; flex-direction:column; gap:16px; }

/* side "fresh listings" column */
.side-listings h3 { margin:0 0 10px; font-size:15px; }
.side-item { display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line); align-items:center; }
.side-item:first-of-type { border-top:0; }
.side-thumb { width:56px; height:56px; border-radius:8px; background:#eef2f7 center/cover no-repeat; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#b8c2cc; }
.side-meta { min-width:0; display:flex; flex-direction:column; }
.side-meta .price { color:var(--green); font-weight:800; font-size:14px; }
.side-title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-meta .muted { font-size:12px; }
.side-more { display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  color:var(--blue); font-weight:600; font-size:13px; }

/* side categories list */
.side-cats { margin-bottom:16px; }
.side-cats h3 { margin:0 0 6px; font-size:15px; }
.side-cat { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); color:var(--ink); }
.side-cat:first-of-type { border-top:0; }
.side-cat:hover { color:var(--blue); }
.side-cat .sc-ic { width:30px; height:30px; flex-shrink:0; border-radius:8px; background:var(--blue-100);
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.side-cat .sc-name { flex:1; min-width:0; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-cat .sc-count { color:var(--muted); font-size:12px; font-weight:600; flex-shrink:0; }

/* announcement strip */
.announce { background:linear-gradient(90deg,var(--amber-50),#fff,var(--blue-100)); border:1px solid var(--line);
  border-radius:10px; padding:10px 16px; margin:16px 0 0; display:flex; align-items:center; gap:10px; font-size:14px; }
.announce a { color:var(--blue); font-weight:700; margin-left:auto; }
.announce-x { border:0; background:none; font-size:18px; color:var(--muted); cursor:pointer; padding:0 4px; }

/* account card (right column on home) */
.acct-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.acct-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.acct-avatar { width:48px; height:48px; border-radius:50%; background:var(--blue-100); color:var(--blue-d);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; flex-shrink:0; }
.acct-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.acct-links a { display:flex; align-items:center; gap:6px; padding:9px 10px; border:1px solid var(--line);
  border-radius:8px; font-size:13px; font-weight:600; }
.acct-links a:hover { background:var(--blue-100); }
.acct-links a b { background:var(--green); color:#fff; font-size:11px; border-radius:9px; padding:0 6px; margin-left:auto; }
.acct-why { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.9; }
.cat-sidebar { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cat-sidebar h3 { margin:0; padding:14px 16px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); border-bottom:1px solid var(--line); }
.cat-row { position:relative; border-bottom:1px solid var(--line); }
.cat-row:last-child { border-bottom:0; }
.cat-main { display:flex; align-items:center; gap:12px; padding:11px 16px; transition:background .12s; }
.cat-row:hover .cat-main { background:var(--blue-100); }
.cat-main .ic { width:34px; height:34px; border-radius:8px; background:var(--blue-100); display:flex; align-items:center; justify-content:center; font-size:18px; }
.cat-main .nm { flex:1; font-weight:600; font-size:14px; }
.cat-main .nm small { display:block; color:var(--muted); font-weight:400; font-size:12px; }
.cat-main .chev { color:var(--muted); }
/* hover flyout of subcategories */
.subflyout { display:none; position:absolute; top:0; left:100%; min-width:260px; max-width:300px;
  background:var(--card); border:1px solid var(--line); border-radius:0 10px 10px 0;
  box-shadow:var(--shadow); padding:8px 0; z-index:40; max-height:420px; overflow:auto; }
.cat-row:hover .subflyout { display:block; }
.subflyout a { display:block; padding:8px 16px; font-size:13.5px; }
.subflyout a:hover { background:var(--blue-100); color:var(--blue-d); }
/* slim, blended scrollbar for the category flyout (and the filter category list) */
.subflyout, .frail-cats { scrollbar-width:thin; scrollbar-color:rgba(140,150,170,.4) transparent; }
.subflyout::-webkit-scrollbar, .frail-cats::-webkit-scrollbar { width:9px; }
.subflyout::-webkit-scrollbar-track, .frail-cats::-webkit-scrollbar-track { background:transparent; }
.subflyout::-webkit-scrollbar-thumb, .frail-cats::-webkit-scrollbar-thumb { background:rgba(140,150,170,.4);
  border-radius:8px; border:3px solid transparent; background-clip:padding-box; }
.subflyout::-webkit-scrollbar-thumb:hover, .frail-cats::-webkit-scrollbar-thumb:hover { background:rgba(140,150,170,.65); background-clip:padding-box; }
html[data-theme="dark"] .subflyout, html[data-theme="dark"] .frail-cats { scrollbar-color:rgba(255,255,255,.18) transparent; }
html[data-theme="dark"] .subflyout::-webkit-scrollbar-thumb, html[data-theme="dark"] .frail-cats::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); background-clip:padding-box; }
html[data-theme="dark"] .subflyout::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] .frail-cats::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.32); background-clip:padding-box; }

/* promo tiles */
.promo { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.promo a { border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:8px; min-height:96px; justify-content:space-between; font-weight:700; transition:.15s; }
.promo a:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.promo .e { font-size:26px; }
.promo .t1 { background:var(--blue-100); color:var(--blue-d); }
.promo .t2 { background:var(--amber-50); color:var(--amber-d); }
.promo .t3 { background:#e7f6ee; color:var(--green); }
.promo .t4 { background:#f0eafc; color:#6d28d9; }

/* section heading */
.section-title { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:26px 0 14px; display:flex; align-items:center; justify-content:space-between; }
.section-title a { font-size:14px; color:var(--blue); font-weight:600; letter-spacing:0; }

/* popular categories strip */
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(92px,1fr); gap:12px; overflow-x:auto; padding-bottom:10px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
/* slim, rounded, themed scrollbar for the category strip */
.strip::-webkit-scrollbar { height:7px; }
.strip::-webkit-scrollbar-track { background:transparent; margin:0 6px; }
.strip::-webkit-scrollbar-thumb { background:var(--line); border-radius:999px; }
.strip::-webkit-scrollbar-thumb:hover { background:var(--muted); }
.strip::-webkit-scrollbar-button { width:0; height:0; display:none; }
html[data-theme="dark"] .strip::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); }
html[data-theme="dark"] .strip::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.32); }
/* popular categories: wrap into rows instead of a horizontal scroll — 10 per row on desktop (20 tiles = 2 rows) */
.cat-strip { grid-auto-flow:row; grid-template-columns:repeat(10, 1fr); grid-auto-columns:auto;
  overflow-x:visible; padding-bottom:0; gap:18px 6px; align-items:start; }
.cat-strip .item { min-width:0; }
.cat-strip .circle { width:50px; height:50px; border-radius:13px; margin-bottom:6px; }
.cat-strip .lbl { font-size:12px; line-height:1.2; }
.cat-strip .lbl small { font-size:10px; margin-top:1px; }
/* tablet: 5 per row */
@media (max-width:900px){ .cat-strip { grid-template-columns:repeat(5, 1fr); } }
/* mobile: tighten to 4 columns */
@media (max-width:640px){
  .cat-strip { grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-columns:auto; overflow-x:visible; gap:16px 6px; padding-bottom:0; align-items:start; }
  .cat-strip .item { min-width:0; }
  .cat-strip .circle { width:50px; height:50px; border-radius:13px; margin-bottom:6px; }
  .cat-strip .lbl { font-size:11px; line-height:1.18; }
  .cat-strip .lbl small { font-size:9.5px; margin-top:1px; }
}
.strip .item { text-align:center; }
.strip .circle { width:54px; height:54px; border-radius:14px; margin:0 auto 8px; background:var(--blue-100);
  display:flex; align-items:center; justify-content:center; font-size:26px; border:1px solid var(--line); }
.strip .lbl { font-size:13px; font-weight:600; }
.strip .lbl small { display:block; color:var(--muted); font-weight:400; }

/* ===== provider cards ===== */
.cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.cat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; transition:.15s; }
.cat:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.cat .ic { font-size:30px; } .cat .nm { margin-top:8px; font-weight:600; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
/* trending grid: larger, more pronounced cards like Alibaba (~5 columns) */
.home .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
/* Ordered masonry: cards read left-to-right, top-to-bottom (1 2 / 3 4 / 5 6) AND
   pack tightly with no vertical gaps. JS (footer) distributes the cards round-robin
   into these flex columns — column 1 gets cards 1,3,5; column 2 gets 2,4,6 — so the
   reading order holds while each column stacks gap-free. The plain CSS grid above
   is the no-JS fallback. */
.grid:not(.listview) { align-items:start; }
.grid.is-masonry { display:flex; align-items:flex-start; gap:16px; }
.grid.is-masonry .masonry-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; }
@media (max-width:600px){
  .grid:not(.listview), .home .grid:not(.listview) { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
  .grid.is-masonry, .grid.is-masonry .masonry-col { gap:10px; }
}
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.15s; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(20,30,40,.06), 0 5px 16px rgba(20,30,40,.07); }
.card:hover { box-shadow:0 6px 14px rgba(20,30,40,.10), 0 18px 38px rgba(20,30,40,.12); transform:translateY(-3px); }
/* natural-height image: shows the full photo (variable height), capped so very tall photos don't dominate */
.card .thumb { position:relative; overflow:hidden; background:#eef2f7; line-height:0; border-radius:var(--radius) var(--radius) 0 0; }
.card .thumb .thumb-img { display:block; width:100%; height:auto; max-height:400px; object-fit:cover; object-position:center top; }
.card .thumb .thumb-ico { display:flex; aspect-ratio:1/1; align-items:center; justify-content:center; font-size:42px; color:#b8c2cc; line-height:1; }
/* event posters keep a fixed portrait box (banner fills it; emoji centred when no banner) */
.card .thumb.poster-thumb { aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; line-height:1; }
.card .thumb .badge-featured { position:absolute; top:8px; left:8px; }
/* Trending ads — its own white card section with header/footer demarcation lines */
.trending-section { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px 22px;
  margin-top:26px; box-shadow:0 8px 24px rgba(14,24,44,.06); }
.trending-header { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.trending-header h2 { margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.see-all-link { font-size:15px; font-weight:700; color:var(--blue); white-space:nowrap; }
.see-all-link:hover { text-decoration:underline; }
/* Sponsored "Trending now" strip */
.trending-now { background:linear-gradient(135deg,rgba(255,122,24,.08),rgba(234,88,12,.04)); border:1px solid var(--line); border-radius:18px; padding:22px 20px 20px; margin-top:26px; box-shadow:0 8px 24px rgba(14,24,44,.06); }
html[data-theme="dark"] .trending-now { background:linear-gradient(135deg,rgba(255,122,24,.12),rgba(234,88,12,.05)); }
.trending-now .trending-header { border-bottom:none; padding-bottom:14px; margin-bottom:14px; }
.trending-now h2 { display:flex; align-items:center; gap:9px; }
.tn-tag { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:linear-gradient(135deg,#ff7a18,#ea580c); padding:4px 10px; border-radius:999px; }
.tn-fire { font-size:20px; }
.tn-scroller { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; }
.tn-scroller > .card { flex:0 0 auto; width:210px; scroll-snap-align:start; }
.tn-scroller::-webkit-scrollbar { height:8px; }
.tn-scroller::-webkit-scrollbar-thumb { background:rgba(234,88,12,.3); border-radius:999px; }
@media (max-width:560px){ .tn-scroller > .card { width:165px; } }
.trending-footer { display:flex; justify-content:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.load-more-btn { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:999px;
  padding:11px 24px; font-weight:700; transition:background .2s, border-color .2s; }
.load-more-btn:hover { background:var(--bg); border-color:#c8d3e3; }
@media (max-width:768px){
  .trending-section { padding:20px 14px 16px; border-radius:14px; }
  .trending-header { margin-bottom:16px; padding-bottom:12px; }
  .trending-header h2 { font-size:19px; }
}

.card .body { padding:14px; flex:1; display:flex; flex-direction:column; }
.card .cat-tag { font-size:12px; color:var(--blue); font-weight:600; }
.card h3 { margin:4px 0 2px; font-size:16px; }
.card .loc { color:var(--muted); font-size:13px; margin-top:auto; padding-top:8px; }
/* shared meta row (date | location) with a divider above — used by event + listing cards */
.card .card-meta { display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:10px;
  border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.card .card-meta .cmeta-i { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.card .card-meta .cmeta-i .svgico { flex-shrink:0; }
.card .card-meta .cmeta-loc { flex:1; }
.card .card-meta .cmeta-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .card-meta .cmeta-div { width:1px; align-self:stretch; min-height:15px; background:var(--line); flex-shrink:0; }
.card .price .price-from { color:var(--green); font-weight:600; font-size:.8em; margin-right:1px; }
/* property specs (bedrooms / bathrooms) on the card */
.card-specs { display:flex; flex-wrap:wrap; gap:6px; margin:5px 0 2px; }
.cspec { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:3px 8px; line-height:1; }
.cspec svg { width:15px; height:15px; color:var(--muted); flex-shrink:0; }
.card .rating { color:var(--gold); font-size:13px; margin-top:6px; }
.card .rating small { color:var(--muted); }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; }
.badge-featured { background:var(--amber-50); color:var(--amber-d); }
/* Sponsored pill badge + "On PPP TV" pill (card overlays) */
.sponsored-side-bar { position:absolute; top:8px; left:8px; width:auto; height:auto; z-index:4;
  background:#3542d7;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; padding:3px 7px; }
.sponsored-side-bar > span { transform:none; color:#fff; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.ppp-tv-pill { position:absolute; top:0; right:0; z-index:5; height:23px; padding:0 5px;
  background:rgb(200 61 162); color:#ffffff; border-radius:0 0 0 5px; display:none; align-items:center;
  gap:5px; font-size:9.5px; font-weight:900; box-shadow:0 5px 14px rgba(15,23,42,.15); line-height:1; }
.ppp-tv-pill .tv-icon { width:12px; height:12px; flex-shrink:0; display:inline-block; background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='11' rx='2' stroke='%23db2da4' stroke-width='2'/%3E%3Cpath d='M8 21h8M12 16v5' stroke='%23db2da4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* sponsored pill is over the image — no need to push sibling overlays right */
.sponsored-side-bar ~ .disc-tag, .sponsored-side-bar ~ .badge-featured { left:8px; } /* photo-count sits top-right, no shift needed */
.badge-premium { background:var(--blue-100); color:var(--blue-d); }
.badge-pending { background:var(--amber-50); color:var(--amber-d); }
.badge-approved { background:#e7f6ee; color:#177544; }
.badge-rejected,.badge-suspended { background:#fdeae7; color:#b23a26; }

/* ===== buttons ===== */
.btn { display:inline-block; padding:9px 15px; border-radius:8px; font-weight:700; letter-spacing:-.01em; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:14px; }
/* native <button>/<input> don't inherit the page font — make every control match */
button, input, select, textarea { font-family:inherit; }
.btn-primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover { background:var(--blue-d); }
.btn-cta { background:var(--amber); color:#3a2a00; border-color:var(--amber); }
.btn-cta:hover { background:var(--amber-d); }
.btn-sm { padding:5px 10px; font-size:13px; }
.btn-danger { background:var(--red); color:#fff; border-color:var(--red); }
.btn-ghost { background:transparent; }

/* flash */
.flash { display:flex; align-items:center; gap:11px; margin:16px 0; padding:12px 14px; border-radius:10px;
  font-size:14px; font-weight:500; border:1px solid transparent; box-shadow:0 4px 16px rgba(20,30,40,.08);
  animation:flashIn .26s cubic-bezier(.2,.8,.2,1); }
.flash-ic { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:800; color:#fff; line-height:1; }
.flash-msg { flex:1; min-width:0; }
.flash-x { flex-shrink:0; background:none; border:0; font-size:21px; line-height:1; color:inherit; opacity:.45;
  cursor:pointer; padding:0 2px; font-family:inherit; }
.flash-x:hover { opacity:1; }
.flash-success { background:#e7f6ee; color:#177544; border-color:#bfe6d0; }
.flash-success .flash-ic { background:#1aa563; }
.flash-error { background:#fdeae7; color:#b23a26; border-color:#f4c6bb; }
.flash-error .flash-ic { background:#e0533a; }
.flash-info { background:var(--blue-100); color:var(--blue-d); border-color:#cfe0fe; }
.flash-info .flash-ic { background:var(--blue); }
.flash.hiding { opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; }
@keyframes flashIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
/* email verification banner */
.verify-banner { background:#fff7ed; border-bottom:1px solid #fed7aa; color:#9a3412; font-size:13.5px; }
.verify-banner .vb-inner { display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; padding:9px 0; }
.verify-banner strong { font-weight:700; }
.verify-banner form { margin:0; }
.verify-banner button { background:#9a3412; color:#fff; border:0; border-radius:7px; padding:6px 13px; font-weight:700;
  font-size:12.5px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.verify-banner button:hover { background:#7c2d12; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .price-grid { grid-template-columns:1fr; } }

/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; background:var(--card); padding:14px; border:1px solid var(--line); border-radius:var(--radius); margin:18px 0; }
.filters input, .filters select { padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.filters input[name=q] { flex:1; min-width:180px; }

/* ===== account hub (profile rail + dropdown) ===== */
.acct-layout { display:grid; grid-template-columns:262px 1fr; gap:22px; align-items:start; margin:22px 0; }
/* let the content column shrink below its content's intrinsic width so wide tables
   scroll *inside* the column instead of pushing the whole page wider than the screen */
.acct-layout > section, .acct-layout > main { min-width:0; overflow-x:hidden; }
/* mobile-only "Dashboard menu" toggle that collapses the account sidebar */
.dash-menu-toggle { display:none; }
/* rail close bar is injected by JS for mobile — hide on desktop */
.rail-close-btn { display:none; }
.acct-card { position:relative; background:linear-gradient(145deg,var(--blue) 0%,#1e3a8a 100%); border:none; border-radius:18px; padding:28px 16px 20px; text-align:center; box-shadow:0 4px 20px rgba(49,84,231,.25); color:#fff; }
.acct-gear { position:absolute; top:12px; right:14px; color:rgba(255,255,255,.6); text-decoration:none; display:inline-flex; background:rgba(255,255,255,.15); border-radius:8px; padding:5px; transition:background .15s; }
.acct-gear svg { width:15px; height:15px; }
.acct-gear:hover { background:rgba(255,255,255,.28); color:#fff; }
.acct-avatar { width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:700; margin:0 auto 12px; border:3px solid rgba(255,255,255,.35); }
.acct-name { font-weight:800; font-size:16px; color:#fff; }
.acct-sub { color:rgba(255,255,255,.75); font-size:12.5px; text-decoration:none; display:inline-block; margin-top:3px; }
.acct-sub:hover { color:#fff; text-decoration:underline; }
.acct-nav { margin-top:12px; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.acct-nav a { display:flex; align-items:center; gap:12px; padding:12px 16px; color:var(--ink); border-top:1px solid var(--line); font-weight:600; font-size:14px; text-decoration:none; }
.acct-nav a:first-child { border-top:none; }
.acct-nav a:hover { background:var(--blue-100); }
.acct-nav a.on { background:var(--blue-100); color:var(--blue); box-shadow:inset 3px 0 0 var(--blue); }
.acct-nav .ai { width:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; }
.acct-nav .ai svg { width:17px; height:17px; }
.acct-nav a.on .ai { color:var(--blue); }
/* Logout link */
.acct-logout-form { border-top:1px solid var(--line); }
.acct-logout-link { display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; background:transparent; border:none; color:#dc2626; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; }
.acct-logout-link:hover { background:#fef2f2; }

/* avatars: show uploaded photo inside the circle, else a coloured initial */
[data-user-avatar] img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.acct-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.acct-face { width:38px; height:38px; flex-shrink:0; aspect-ratio:1; border-radius:11px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; font-weight:700; font-size:15px; color:#fff; background:rgba(255,255,255,.20); transition:background .15s; }
.acct-face img { border-radius:inherit !important; }
/* the account button is itself an .icon — make it transparent so the avatar square reads as one clean tile */
.topbar-nav .acct-toggle { background:transparent; padding:0; position:relative; }
.topbar-nav .acct-toggle:hover { background:transparent; transform:translateY(-1px); }
.topbar-nav .acct-toggle:hover .acct-face { background:rgba(255,255,255,.32); }
/* unread-notification badge over the avatar square */
.topbar-nav .acct-toggle .acct-dot { position:absolute; top:-4px; right:-4px; z-index:3; pointer-events:none;
  background:var(--amber); color:#3a2a00; font-size:10px; font-weight:800; min-width:17px; height:17px; line-height:1;
  border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 0 0 2px #1237C4; }
.seller-row { display:flex; align-items:center; gap:11px; margin:8px 0; }
.seller-av { width:46px; height:46px; flex-shrink:0; border-radius:50%; background:var(--blue-100); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; overflow:hidden; }
.seller-av img { width:100%; height:100%; object-fit:cover; }
.avatar-edit { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.avatar-preview { width:96px; height:96px; flex-shrink:0; border-radius:50%; background:var(--blue-100); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:38px; overflow:hidden; border:1px solid var(--line); }
.avatar-preview img { width:100%; height:100%; object-fit:cover; }
.avatar-actions { min-width:0; flex:1; }
.avatar-actions label.btn { position:relative; overflow:hidden; margin:0; cursor:pointer; }
.avatar-btns { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.avatar-btns .inline-form { display:inline-flex; align-items:center; gap:8px; margin:0; }
.avatar-name { display:block; margin-top:8px; font-size:12.5px; }
.avatar-name:empty { display:none; }
.avatar-hint { margin:8px 0 0; font-size:12.5px; }
.avatar-actions .upload-progress { max-width:320px; }
.is-hidden { display:none !important; }

/* header account dropdown */
.acct-dd { position:relative; }
.mobile-ai { display:none; }   /* the Browse leading icon is mobile-only */
/* profile header at the top of the account dropdown (desktop + mobile) */
.acct-menu a.nav-profile { display:flex; align-items:center; gap:11px; padding:10px 11px 12px;
  margin:-6px -6px 5px; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; }
.acct-menu a.nav-profile:hover { background:var(--blue-100); }
.nav-profile .np-av { width:42px; height:42px; flex-shrink:0; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px; background:var(--blue); }
.nav-profile .np-text { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.nav-profile .np-text strong { font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-profile .np-text small { color:var(--muted); font-size:12px; font-weight:500; }
.acct-toggle { border:0; cursor:pointer; font-family:inherit; }
.acct-ini { font-weight:700; }
.acct-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:246px; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 32px rgba(20,30,40,.24); padding:6px; display:none; z-index:80; }
.acct-menu.open { display:block; }
.acct-menu a, .acct-menu button { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border-radius:8px;
  color:var(--ink); font-size:14px; font-weight:600; background:none; border:0; text-align:left; cursor:pointer; font-family:inherit; text-decoration:none; }
.acct-menu a:hover, .acct-menu button:hover { background:var(--blue-100); }
.acct-menu .ai { width:20px; text-align:center; }
.acct-menu form { width:100%; margin:0; }
/* monochrome line icons in menu rows — same visual form as the Cart/Messages/Notifications .icon svgs */
.topbar-nav .ai { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.topbar-nav .ai svg { width:20px; height:20px; display:block; }
.topbar-nav .mobile-ai { display:none; }   /* Browse leading icon stays mobile-only on desktop */

/* ===== performance dashboard ===== */
.perf-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.perf-head h1 { margin:0; font-size:22px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg a { padding:7px 16px; color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; }
.seg a + a { border-left:1px solid var(--line); }
.seg a.on { background:var(--blue-100); color:var(--blue); }
.perf-sub { margin:12px 0 4px; font-weight:600; }
.perf-chart { width:100%; margin:6px 0 2px; }
.perf-chart svg { width:100%; height:auto; display:block; }
.perf-legend { display:flex; gap:18px; flex-wrap:wrap; margin:6px 0 18px; }
.leg { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; cursor:pointer; user-select:none; }
.leg-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.leg.off { opacity:.4; text-decoration:line-through; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.metric { display:flex; align-items:center; gap:10px; background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:13px 16px; }
.m-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.m-name { font-weight:600; }
.m-val { margin-left:auto; font-weight:700; font-size:17px; }
.perf-allh { margin:20px 0 10px; font-size:15px; }
.perf-foot { margin-top:14px; font-size:12.5px; }

/* ===== admin backoffice ===== */
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 8px; }
.admin-head h1 { margin:0; font-size:clamp(24px,4vw,30px); font-weight:900; letter-spacing:-.02em; }

/* ── prettier section nav (pills with icons) ── */
/* Mobile (default): the admin sections are a dropdown — a button shows the
   current section, tapping reveals the full list. (Desktop turns this into a
   fixed sidebar in the min-width:901px block below.) */
.admin-nav-wrap { position:relative; margin:14px 0 18px; }
.admin-nav-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 14px;
  font-family:inherit; font-weight:800; font-size:14.5px; color:var(--ink); box-shadow:var(--shadow); cursor:pointer; }
.admin-nav-toggle .ant-cur { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.admin-nav-toggle .ant-cur span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-nav-toggle .anav-ic { width:17px; height:17px; flex-shrink:0; color:var(--blue); }
.admin-nav-toggle .ant-chev { flex-shrink:0; transition:transform .18s; color:var(--muted); }
.admin-nav-wrap.open .admin-nav-toggle .ant-chev { transform:rotate(180deg); }
.admin-nav { display:none; flex-direction:column; gap:4px; position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:50; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 18px 40px rgba(15,23,42,.22); max-height:72vh; overflow-y:auto; }
.admin-nav-wrap.open .admin-nav { display:flex; }
.admin-nav .anav-item { width:100%; justify-content:flex-start; }
.anav-item { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px;
  font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none; white-space:nowrap; flex:0 0 auto;
  transition:background .14s, color .14s, box-shadow .14s; }
.anav-item .anav-ic { width:17px; height:17px; flex-shrink:0; opacity:.9; }
.anav-item:hover { background:var(--blue-100); color:var(--blue); }
.anav-item.on { background:linear-gradient(135deg,var(--blue) 0%,#1e3a8a 100%); color:#fff; box-shadow:0 6px 16px rgba(49,84,231,.28); }
.anav-item.on .anav-ic { opacity:1; }
.anav-pill { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--amber); color:#1a1206; font-size:11px; font-weight:800; }
.anav-item.on .anav-pill { background:#fff; color:var(--blue); }

/* ── side (vertical) admin nav on desktop ── */
@media (min-width:901px){
  body.admin-page main.wrap { max-width:none; margin:0; padding-left:calc(214px + 26px); padding-right:26px; }
  .admin-nav-wrap { display:contents; }   /* dissolve the mobile wrapper */
  .admin-nav-toggle { display:none; }      /* no dropdown button on desktop */
  .admin-nav { display:flex; position:fixed; top:64px; left:0; bottom:0; width:218px; z-index:40;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:0;
    margin:0; border:0; border-right:1px solid var(--line); border-radius:0;
    box-shadow:none; padding:0; background:var(--card); overflow:hidden; }
  /* No scroll: full height = screen minus the 64px navbar, and every item gets an equal share
     of that height (flex:1 1 0) so all sections — Overview through Categories — are always
     visible in one window, at any screen height. */
  .admin-nav .anav-item { width:100%; justify-content:flex-start; gap:12px; padding:6px 16px; font-size:13.5px;
    font-weight:600; color:var(--ink); border-radius:0; border-top:1px solid var(--line);
    flex:1 1 0; min-height:0; overflow:hidden; }
  .admin-nav .anav-item:first-child { border-top:none; }
  .admin-nav .anav-item:hover { background:var(--blue-100); color:var(--blue); box-shadow:none; }
  .admin-nav .anav-item.on { background:var(--blue-100); color:var(--blue); box-shadow:inset 3px 0 0 var(--blue); border-radius:0; }
  .admin-nav .anav-item .anav-ic { width:15px; height:15px; opacity:1; color:var(--muted); }
  .admin-nav .anav-item:hover .anav-ic, .admin-nav .anav-item.on .anav-ic { color:var(--blue); }
  .admin-nav .anav-pill { margin-left:auto; background:var(--blue-100); color:var(--blue-d); }
  body.admin-page .admin-head { margin-top:20px; }
}

/* ── admin listings: card rows ── */
.adl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; }
.adl-list { min-width:1040px; }
.adl-head, .adl-row {
  display:grid;
  grid-template-columns:minmax(200px,1.7fr) minmax(120px,.85fr) minmax(92px,.6fr) minmax(100px,.65fr) minmax(155px,1fr) 60px minmax(105px,.7fr) minmax(140px,.9fr);
  align-items:center; gap:12px;
}
/* pin the first (identity) column so it's never clipped on horizontal scroll */
.adl-row > :first-child { position:sticky; left:0; z-index:2; background:var(--card); }
.adl-head > :first-child { position:sticky; left:0; z-index:2; background:var(--bg); }
.adl-row.dim > :first-child { background:var(--card); }
.adl-head { padding:4px 16px 12px; color:var(--muted); font-size:12.5px; font-weight:800; }
.adl-row { padding:12px 16px; margin-bottom:10px; border:1px solid var(--line); border-radius:14px; background:var(--card);
  box-shadow:0 6px 16px rgba(16,24,40,.05); transition:transform .15s, box-shadow .15s, border-color .15s; }
.adl-row:hover { transform:translateY(-1px); border-color:var(--blue); box-shadow:0 14px 26px rgba(16,24,40,.10); }
.adl-check { display:flex; align-items:center; justify-content:center; }
.adl-check input { width:17px; height:17px; accent-color:var(--blue); }
.adl-title { display:flex; align-items:center; gap:12px; min-width:0; }
.adl-thumb { width:72px; height:60px; border-radius:10px; overflow:hidden; flex-shrink:0; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line); }
.adl-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.adl-noimg { font-size:20px; opacity:.5; }
.adl-meta { min-width:0; }
.adl-name { display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adl-sub { color:var(--muted); font-size:12px; font-weight:600; }
.adl-flag { color:#b86900; font-weight:800; }
.adl-cat, .adl-county { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:13px; font-weight:600; min-width:0; }
.adl-cat > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adl-mini { width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--blue-100,#eef2ff); font-size:14px; }
.adl-pin { opacity:.7; }
.adl-price { font-size:14px; font-weight:800; }
.adl-owner { display:flex; align-items:center; gap:10px; min-width:0; }
.adl-ava { width:34px; height:34px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:linear-gradient(135deg,#eef2ff,#dbe4ff); color:#1539d6; }
.adl-owner-meta { display:flex; flex-direction:column; min-width:0; }
.adl-owner-meta strong { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adl-owner-meta small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adl-score { min-width:42px; height:32px; padding:0 8px; border-radius:9px; display:inline-grid; place-items:center; font-size:14px; font-weight:800; }
.adl-score.good { background:#e8f8ee; color:#12813b; }
.adl-score.warn { background:#fff2d8; color:#c77700; }
.adl-score.bad  { background:#fde8e8; color:#c01919; }
.adl-status-stack { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.adl-status { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:800; text-transform:capitalize; white-space:nowrap; }
.adl-status.approved { background:#e8f8ee; color:#12813b; }
.adl-status.pending  { background:#fff4d8; color:#b86900; }
.adl-status.rejected { background:#fde8e8; color:#c01919; }
.adl-status.sold, .adl-status.hidden { background:#eef2f7; color:#475467; }
.adl-status.featured { background:#f4e9ff; color:#7c3aed; }
.adl-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.adl-form { margin:0; display:inline; }
.adl-btn { height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:#1539d6; font-size:12.5px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:filter .12s; }
.adl-btn:hover { filter:brightness(.97); }
.adl-ic { width:32px; padding:0; justify-content:center; font-size:14px; }
.adl-btn:disabled { opacity:.4; cursor:not-allowed; filter:none; }
.adl-btn:disabled:hover { filter:none; }
.adl-feature.adl-on { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.adl-review  { background:#f5f7ff; }
.adl-feature { background:#faf5ff; color:#7c3aed; border-color:#ecdcff; }
.adl-approve { background:#e8f8ee; color:#12813b; border-color:#bfe8cd; }
.adl-reject, .adl-delete { background:#fde8e8; color:#c01919; border-color:#f6cccc; }
.adl-icon { padding:0 10px; }
html[data-theme="dark"] .adl-review { background:rgba(255,255,255,.05); }
/* per-table column templates */
.adl-list.ev { min-width:1000px; }
.adl-list.ev .adl-head, .adl-list.ev .adl-row { grid-template-columns:minmax(200px,1.7fr) minmax(140px,.85fr) minmax(150px,1fr) minmax(155px,1fr) 60px minmax(105px,.7fr) minmax(130px,.85fr); }
.adl-list.pay { min-width:1080px; }
.adl-list.pay .adl-head, .adl-list.pay .adl-row { grid-template-columns:70px minmax(150px,.95fr) minmax(170px,1.1fr) minmax(120px,.8fr) minmax(140px,1fr) minmax(110px,.75fr) minmax(120px,.8fr) minmax(120px,.9fr); }
.adl-list.usr { min-width:980px; }
.adl-list.usr .adl-head, .adl-list.usr .adl-row { grid-template-columns:minmax(220px,1.7fr) minmax(140px,.9fr) 70px minmax(110px,.7fr) minmax(150px,1fr) minmax(110px,.7fr) minmax(150px,1fr); }
/* extra status tints + helpers */
.adl-status.success { background:#e8f8ee; color:#12813b; }
.adl-status.failed  { background:#fde8e8; color:#c01919; }
.adl-status.cancelled { background:#eef2f7; color:#475467; }
.adl-when { font-size:12.5px; color:var(--ink); font-weight:600; white-space:nowrap; }
.adl-id { font-size:13px; font-weight:800; color:var(--muted); }
.adl-receipt { font-size:12.5px; color:var(--muted); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adl-list.usr .adl-ava { font-size:11px; background:linear-gradient(135deg,#eef2ff,#dbe4ff); }
/* verifications / payouts / fraud */
.adl-list.ver { min-width:860px; }
.adl-list.ver .adl-head, .adl-list.ver .adl-row { grid-template-columns:minmax(220px,1.7fr) minmax(140px,.9fr) 80px minmax(150px,1fr) minmax(200px,1.2fr); }
.adl-list.wd { min-width:1080px; }
.adl-list.wd .adl-head, .adl-list.wd .adl-row { grid-template-columns:minmax(110px,.7fr) minmax(180px,1.1fr) minmax(110px,.7fr) minmax(200px,1.3fr) minmax(90px,.55fr) minmax(120px,.8fr) minmax(210px,1.2fr); }
.adl-list.frd { min-width:1140px; }
.adl-list.frd .adl-head, .adl-list.frd .adl-row { grid-template-columns:minmax(100px,.65fr) minmax(110px,.7fr) minmax(140px,.9fr) minmax(150px,1fr) minmax(220px,1.5fr) minmax(100px,.65fr) minmax(100px,.6fr) minmax(110px,.7fr); }
.adl-list.wa { min-width:1300px; }
.adl-list.wa .adl-head, .adl-list.wa .adl-row { grid-template-columns:minmax(100px,.6fr) minmax(160px,.95fr) minmax(110px,.7fr) minmax(200px,1.5fr) minmax(150px,1fr) minmax(100px,.7fr) minmax(90px,.55fr) minmax(190px,1.1fr); }
.adl-photos { display:flex; flex-wrap:wrap; }
.adl-list.song { min-width:1000px; }
.adl-list.song .adl-head, .adl-list.song .adl-row { grid-template-columns:minmax(100px,.6fr) minmax(150px,.9fr) minmax(160px,1fr) minmax(150px,.9fr) minmax(220px,1.6fr) minmax(140px,.85fr); }
.adl-list.uw { min-width:780px; }
.adl-list.uw .adl-head, .adl-list.uw .adl-row { grid-template-columns:minmax(160px,1fr) 100px minmax(200px,1.4fr) minmax(110px,.7fr) minmax(90px,.55fr); }
.adl-list.hdl { min-width:900px; }
.adl-list.hdl .adl-head, .adl-list.hdl .adl-row { grid-template-columns:minmax(140px,.9fr) minmax(180px,1.1fr) minmax(140px,.85fr) minmax(120px,.75fr) minmax(140px,.85fr) minmax(150px,.9fr); }
.adl-row.dim { opacity:.6; }
.adl-status.processing { background:#e0edff; color:#1d4ed8; }
.adl-status.paid { background:#e8f8ee; color:#12813b; }
.adl-status.verified { background:#e8f0ff; color:#1539d6; }
.adl-status.applied, .adl-status.open { background:#fff4d8; color:#b86900; }
.adl-status.reviewed { background:#e8f8ee; color:#12813b; }
.adl-dest { display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:600; min-width:0; }
.adl-dest small { font-weight:500; }
.adl-type { font-size:13px; font-weight:700; text-transform:capitalize; }
.adl-subj { min-width:0; font-size:13px; }
.adl-detail { font-size:12.5px; color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.adl-sev { display:inline-flex; align-items:center; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:800; text-transform:capitalize; white-space:nowrap; }
.adl-sev.high { background:#fde8e8; color:#c01919; }
.adl-sev.medium { background:#fff2d8; color:#c77700; }
.adl-sev.low { background:#eef2f7; color:#475467; }

/* "More like this" button on listing cards */
.card-similar { position:absolute; bottom:8px; left:8px; z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#475467; border:1px solid var(--line); display:grid; place-items:center;
  cursor:pointer; opacity:0; transition:opacity .15s, color .15s, background .15s; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.card-similar svg { width:15px; height:15px; }
.card:hover .card-similar, .card:focus-within .card-similar { opacity:1; }
.card-similar:hover { color:var(--blue); background:#fff; }
@media (hover:none) { .card-similar { opacity:1; } } /* always visible on touch devices */
html[data-theme="dark"] .card-similar { background:rgba(30,38,64,.92); color:#cbd5e1; }

/* image loading placeholder (shimmer until the photo paints in) */
.thumb, .poster-thumb, .ev-poster { background-color:#eceff3; }
@keyframes img-shimmer { from { background-position:160% 0; } to { background-position:-160% 0; } }
.thumb:not(.img-loaded), .poster-thumb:not(.img-loaded), .ev-poster:not(.img-loaded) {
  background-image:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  background-repeat:no-repeat; background-size:200% 100%; animation:img-shimmer 1.25s ease-in-out infinite;
}
.img-loaded { animation:none !important; background-image:none !important; }
/* Reserve a minimum height while the photo loads so cards don't collapse or jump
   (the shimmer above fills this space). Poster thumbs already reserve via aspect-ratio. */
.card .thumb:not(.poster-thumb):not(.img-loaded) { min-height:200px; }
.ev-poster:not(.img-loaded) { min-height:220px; }
@media (max-width:640px){ .card .thumb:not(.poster-thumb):not(.img-loaded) { min-height:150px; } }
html[data-theme="dark"] .thumb, html[data-theme="dark"] .poster-thumb, html[data-theme="dark"] .ev-poster { background-color:#1c2436; }
html[data-theme="dark"] .thumb:not(.img-loaded), html[data-theme="dark"] .poster-thumb:not(.img-loaded), html[data-theme="dark"] .ev-poster:not(.img-loaded) {
  background-image:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 70%);
}

/* admin photo-search gallery */
/* Masonry (CSS columns) — images keep their natural aspect ratio. */
.ps-gallery { column-width:180px; column-gap:14px; }
.ps-item { margin:0 0 14px; break-inside:avoid; -webkit-column-break-inside:avoid; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.ps-thumb { background:var(--bg); display:grid; place-items:center; min-height:80px; line-height:0; }
.ps-thumb img { width:100%; height:auto; display:block; }
.ps-noimg { font-size:26px; opacity:.5; }
.ps-item figcaption { padding:9px 11px; display:flex; flex-direction:column; gap:3px; }
.ps-results { font-size:12.5px; font-weight:800; }
.ps-results.hit { color:#12813b; }
.ps-results.miss { color:#b86900; }

/* search by photo */
.ts-cam { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; text-decoration:none; color:#667085; border-left:1px solid #e8edfd; }
.ts-cam svg { width:20px; height:20px; display:block; }
.ts-cam:hover { color:var(--blue); }
/* keep the top search bar within the viewport on phones */
@media (max-width:560px){
  .topbar-search { max-width:100%; }
  .topbar-search .cd { min-width:0; }
  .topbar-search .cd-trigger { max-width:96px; padding:6px 6px 6px 8px; font-size:12px; gap:3px; overflow:hidden; }
  .topbar-search .cd-trigger .cd-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ts-q { padding:7px 6px; }
  .ts-cam { width:30px; }
  .ts-btn { padding:0 13px; }
}
.photo-search-head { text-align:center; }
.photo-search-box { display:flex; flex-direction:column; gap:14px; max-width:560px; margin:0 auto; }
.ps-results { text-align:center; }
.ps-results .grid { text-align:left; }
.ps-drop { display:block; border:2px dashed var(--line); border-radius:16px; background:var(--card); padding:28px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.ps-drop:hover, .ps-drop.drag { border-color:var(--blue); background:var(--bg); }
.ps-drop-empty { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ps-cam { color:var(--blue); line-height:0; }
.ps-cam svg { width:42px; height:42px; }
.ps-drop img { max-width:100%; max-height:320px; border-radius:12px; }
.ps-drop.has-img { padding:14px; }
.ps-pick { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ps-pick-btn { display:inline-flex; align-items:center; gap:8px; }
.ps-pick-btn svg { width:18px; height:18px; flex-shrink:0; }
.ps-go { align-self:center; }

/* AI smart-reply chips in chat */
.smart-replies { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0; }
.smart-chips { display:flex; gap:6px; flex-wrap:wrap; }
.smart-chip { background:var(--card); border:1px solid var(--line); white-space:normal; text-align:left; max-width:100%; }
.ai-btn { white-space:nowrap; }

/* admin review modal (post images + text) */
.rev-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:flex-start; justify-content:center; z-index:200; padding:28px 16px; overflow:auto; }
.rev-overlay.open { display:flex; }
.rev-modal { background:var(--card); border-radius:16px; max-width:760px; width:100%; box-shadow:0 24px 64px rgba(0,0,0,.35); overflow:hidden; }
.rev-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.rev-body { padding:18px 20px; max-height:62vh; overflow:auto; }
.rev-imgs { display:flex; flex-wrap:wrap; gap:8px; }
.rev-imgs img { width:140px; height:140px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:zoom-in; background:var(--bg); }
.rev-foot { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:16px 20px; border-top:1px solid var(--line); background:var(--bg); }
.rev-foot form { margin:0; }

/* AI-moderation mode switch (segmented radios) */
.mod-switch { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card); margin:2px 0 10px; }
.mod-switch label { padding:7px 16px; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; border-right:1px solid var(--line); transition:background .12s, color .12s; user-select:none; }
.mod-switch label:last-child { border-right:0; }
.mod-switch label:hover { background:var(--bg); }
.mod-switch label.on { color:#fff; }
.mod-switch label.on[data-v="off"] { background:#667085; }
.mod-switch label.on[data-v="shadow"] { background:#d97706; }
.mod-switch label.on[data-v="enforce"] { background:#159447; }
.mod-switch input { position:absolute; opacity:0; width:0; height:0; }

.admin-attention { display:flex; align-items:center; gap:10px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  border-radius:14px; padding:12px 16px; margin:12px 0 4px; font-weight:600; font-size:14px; }
.admin-attention a { color:#9a3412; text-decoration:underline; }
.admin-attention .att-ic { font-size:18px; }

/* ── KPI cards with icons ── */
/* .kpi below needs its own min-width:0 (not just .kpi-body's) - as a CSS Grid item it
   defaults to min-width:auto, so a long label/sub-line inside it can force the whole grid
   track - and the page itself on mobile - wider than the viewport, no matter how narrow
   the .kpi-grid column is supposed to be. This caused a real page-wide horizontal overflow
   on the admin dashboard at mobile widths (reported live, screenshot showed content cut off
   at the right edge with the whole page scrolled). Same fix applied to every other grid-item
   card class below that was missing it (.panel, .sys-gauge, .rev-card, .guest-stats > div). */
.kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }
.kpi-grid-4 { grid-template-columns:repeat(4,1fr); }
.kpi { background:var(--card); border:1px solid var(--line); min-width:0;
  border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); transition:box-shadow .15s, transform .15s; }
.kpi:has(.kpi-ic) { display:flex; align-items:flex-start; gap:14px; }
.kpi:hover { box-shadow:0 10px 26px rgba(20,30,40,.1); transform:translateY(-2px); }
.kpi-ic { width:44px; height:44px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; }
.kpi-ic svg { width:22px; height:22px; }
.kpi-ic-blue { background:#e8edfd; color:var(--blue); }
.kpi-ic-green { background:#ecfdf3; color:#16a34a; }
.kpi-ic-amber { background:#fff8e1; color:#d97706; }
.kpi-ic-purple { background:#f3e8ff; color:#7c3aed; }
.kpi-ic-pink { background:#fdeef6; color:#db2777; }
.kpi-body { min-width:0; }
.kpi-n { font-size:25px; font-weight:900; line-height:1.05; letter-spacing:-.02em; }
.kpi-l { font-weight:700; margin-top:4px; font-size:14px; }
.kpi-sub { color:var(--muted); font-size:12.5px; margin-top:4px; }

/* admin server-status panel */
.sys-gauges { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
.sys-gauge { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:0; }
.sg-top { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:700; color:var(--muted); }
.sg-top strong { font-size:21px; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.sg-bar { height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin:9px 0 6px; }
.sg-bar span { display:block; height:100%; border-radius:999px; background:var(--blue); transition:width .4s ease; }
.sg-bar span.sg-warn { background:var(--amber); }
.sg-bar span.sg-bad { background:#d92d20; }
.sg-detail { font-size:11.5px; color:var(--muted); }
.sys-row { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); margin-bottom:10px; }
.sys-row b { color:var(--ink); }
.sys-services { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.sys-svc { font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:7px; }
.sys-svc.up { background:#dcfce7; color:#166534; }
.sys-svc.down { background:#fee2e2; color:#b91c1c; }
@media (max-width:600px){ .sys-gauges { grid-template-columns:1fr; } }

.admin-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; align-items:start; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.panel-head h3 { margin:0; font-size:16px; font-weight:800; }
.panel-head a { font-size:13px; font-weight:700; color:var(--blue); }
.spark { display:flex; align-items:flex-end; gap:5px; height:120px; padding-top:6px; }
.spark-bar { flex:1; height:100%; display:flex; align-items:flex-end; }
.spark-bar span { display:block; width:100%; background:linear-gradient(180deg,var(--blue),var(--blue-d)); border-radius:5px 5px 0 0; min-height:2px; transition:background .15s; }
.spark-bar:hover span { background:var(--amber); }
/* Draft-restore banner on the post-an-ad form (unfinished ad recovered). */
.draft-restore { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--blue-100);
  border:1px solid var(--blue); border-radius:12px; padding:11px 14px; margin:0 0 16px; }
.draft-restore .dr-ic { font-size:22px; line-height:1; }
.draft-restore .dr-text { flex:1; min-width:160px; display:flex; flex-direction:column; gap:1px; }
.draft-restore .dr-text strong { font-size:14.5px; color:var(--ink); }
.draft-restore .dr-text small { color:var(--muted); font-size:12.5px; }
.draft-restore .dr-actions { display:flex; gap:8px; flex-shrink:0; }
.draft-restore .dr-discard { background:var(--card); border:1px solid var(--line); color:var(--ink); }

/* AI-assist "confirm the deduction" modal (themed; replaces the native confirm). */
.ai-confirm-overlay { position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.ai-confirm-overlay[hidden] { display:none; }
.ai-confirm-card { background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.3); padding:24px 22px 20px; max-width:400px; width:100%; text-align:center; }
.ai-confirm-ic { width:50px; height:50px; margin:0 auto 12px; border-radius:50%; background:var(--blue-100); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:24px; }
.ai-confirm-card h3 { margin:0 0 8px; font-size:18px; font-weight:800; }
.ai-confirm-msg { margin:0 0 10px; color:var(--ink); font-size:14px; line-height:1.5; }
.ai-confirm-fine { margin:0 0 18px; color:var(--muted); font-size:12.5px; line-height:1.45; }
.ai-confirm-actions { display:flex; gap:10px; }
.ai-confirm-actions .btn { flex:1; padding:11px 16px; }
.ai-confirm-actions .ai-confirm-cancel { background:var(--card); border:1px solid var(--line); color:var(--ink); }

/* AI promo modal — encourages a NEW seller to use the AI-assist tools when posting an ad. */
.ai-promo-overlay { position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.ai-promo-overlay[hidden] { display:none; }
.ai-promo-card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.3); padding:28px 24px 22px; max-width:420px; width:100%; text-align:center;
  animation:aiPromoIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes aiPromoIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.ai-promo-x { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:0;
  background:var(--bg); color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.ai-promo-x:hover { background:var(--line); color:var(--ink); }
.ai-promo-ic { width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-100), var(--amber-50)); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:26px; }
.ai-promo-card h3 { margin:0 0 8px; font-size:19px; font-weight:800; color:var(--ink); }
.ai-promo-msg { margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.55; }
.ai-promo-list { list-style:none; margin:0 0 20px; padding:0; text-align:left; display:grid; gap:10px; }
.ai-promo-list li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink); line-height:1.4;
  background:var(--bg); border-radius:10px; padding:9px 12px; }
.ai-promo-emoji { flex-shrink:0; font-size:16px; line-height:1.3; }
.ai-promo-actions { display:flex; flex-direction:column; gap:10px; }
.ai-promo-actions .btn { width:100%; padding:12px 16px; font-weight:700; }
.ai-promo-later { background:none; border:0; color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; padding:4px; }
.ai-promo-later:hover { color:var(--ink); text-decoration:underline; }
.ai-btn.ai-promo-highlight { animation:aiPromoPulse 1.1s ease-in-out 2; border-radius:8px; }
@keyframes aiPromoPulse { 0%, 100% { box-shadow:0 0 0 4px var(--blue-100); } 50% { box-shadow:0 0 0 8px var(--blue-100); } }

/* Cookie consent — centered modal on a dim backdrop, above everything (incl. the
   mobile bottom bar) so the choices are never obscured. */
.cookie-consent { position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cookie-consent[hidden] { display:none; }
.cc-card { background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.3); padding:22px; max-width:440px; width:100%; }
.cc-text strong { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:16px; font-weight:800; margin-bottom:8px; }
.cc-ic { display:inline-flex; flex-shrink:0; color:var(--amber-d); }
.cc-ic svg { width:22px; height:22px; }
.cc-text span { display:block; font-size:13.5px; color:var(--muted); line-height:1.55; }
.cc-text a { color:var(--blue); text-decoration:underline; }
.cc-actions { display:flex; gap:10px; margin-top:18px; }
.cc-actions .btn { flex:1; padding:11px 16px; }
.cc-actions .cc-essential { background:var(--card); border:1px solid var(--line); color:var(--ink); }

/* Fixed layout so a long listing title can't push the status/date column off the
   right edge on narrow screens — the title wraps, the right column stays put. */
table.mini { width:100%; border-collapse:collapse; table-layout:fixed; }
table.mini td { padding:11px 4px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:top; }
table.mini td:first-child { overflow-wrap:anywhere; }
table.mini td:last-child { width:96px; white-space:nowrap; }
table.mini tr:first-child td { border-top:0; }
table.mini tr:hover td { background:var(--bg); }
.admin-search { display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; }
.admin-search input { flex:1; min-width:200px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; font-family:inherit; background:var(--card); }

/* ── admin data tables (polish the bare <table> used across admin) ── */
.admin-head ~ table, .table-toolbar + table { border:1px solid var(--line); }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 10px; }
.table-toolbar .muted { font-weight:600; }
/* status filter pills (admin payments) */
.status-filter { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 6px; }
.status-filter .sf { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:700; text-decoration:none;
  transition:border-color .12s, background .12s, color .12s; }
.status-filter .sf span { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--bg); color:var(--muted); font-size:11px; font-weight:800; }
.status-filter .sf:hover { border-color:var(--blue); color:var(--blue); }
.status-filter .sf.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.status-filter .sf.on span { background:rgba(255,255,255,.22); color:#fff; }
.status-filter .sf-success.on { background:#159447; border-color:#159447; }
.status-filter .sf-pending.on { background:#d97706; border-color:#d97706; }
.status-filter .sf-failed.on { background:#d92d20; border-color:#d92d20; }
@media (max-width:900px){
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .admin-cols { grid-template-columns:1fr; }
  .admin-nav { padding:5px; }
  .anav-item { padding:8px 11px; font-size:13px; }
}
@media (max-width:560px){
  .kpi-grid { grid-template-columns:1fr; }
}
html[data-theme="dark"] .admin-nav { background:var(--card); }
html[data-theme="dark"] .kpi-ic-blue { background:rgba(49,84,231,.18); }
html[data-theme="dark"] .kpi-ic-green { background:rgba(34,197,94,.16); }
html[data-theme="dark"] .kpi-ic-amber { background:rgba(217,119,6,.18); }
html[data-theme="dark"] .kpi-ic-purple { background:rgba(124,58,237,.2); }
html[data-theme="dark"] .kpi-ic-pink { background:rgba(219,39,119,.18); }

/* profile */
.profile { display:grid; grid-template-columns:1fr 320px; gap:22px; margin:22px 0; align-items:start; }
.profile > div { min-width:0; } /* let grid columns shrink — stops wide content (long words, spec values) overflowing the page on mobile */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gallery img { width:100%; height:120px; object-fit:cover; border-radius:8px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; min-width:0; }
.panel h2 { margin:0 0 6px; font-size:24px; }
.contact a, .contact button { display:block; width:100%; padding:11px; border:0; border-radius:8px;
  text-align:center; font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; margin-top:8px; }
.contact .call { background:var(--blue); color:#fff; }
.contact .wa { background:#25d366; color:#fff; }
#contactReveal { display:flex; flex-direction:column; }
.review { border-top:1px solid var(--line); padding:12px 0; }
.review .top { display:flex; justify-content:space-between; }
.review .stars { color:var(--gold); }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; letter-spacing:.04em; text-transform:uppercase; }
.field input, .field select, .field textarea { width:100%; }

/* auth */
.auth { max-width:440px; margin:36px auto; }
/* Polished auth (login) card */
.auth-wrap { max-width:460px; margin:30px auto; padding:0 6px; }
.auth-card { padding:26px 22px 22px; border-radius:18px; }
.auth-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.auth-badge { width:58px; height:58px; flex-shrink:0; border-radius:50%; background:var(--blue-100); color:var(--blue); display:grid; place-items:center; }
.auth-badge svg { width:28px; height:28px; }
.auth-head h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.1; }
.auth-head p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.auth-form { display:grid; gap:15px; }
.field-lg > label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:var(--ink); }
.ifield-wrap { height:50px; border:1px solid var(--line); border-radius:12px; background:var(--card); display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; padding:0 6px; transition:border-color .15s ease, box-shadow .15s ease; }
.ifield-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px rgba(49,84,231,.12); }
.ifield-wrap input { border:0; outline:0; background:transparent; height:46px; font-size:15px; color:var(--ink); width:100%; }
.ifw-ic { display:grid; place-items:center; color:var(--muted); }
.ifw-ic svg { width:20px; height:20px; }
.ifw-eye { width:38px; height:38px; border:0; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.ifw-eye svg { width:20px; height:20px; }
.ifw-eye.on { color:var(--blue); }
.auth-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13.5px; margin-top:-2px; }
.auth-remember { display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; cursor:pointer; }
.auth-remember input { width:16px; height:16px; accent-color:var(--blue); }
.auth-row > a { color:var(--blue); font-weight:600; }
.auth-submit { height:50px; margin-top:4px; font-size:15px; font-weight:700; border-radius:12px; }
.auth-card .or-divider { margin:20px 0 16px; }
.auth-card .btn-google, .auth-card .btn-facebook { height:48px; border-radius:12px; font-size:14px; font-weight:600; }
.auth-newhere { margin:18px 0 0; text-align:center; color:var(--muted); font-size:14px; }
.auth-newhere a { color:var(--blue); font-weight:700; }
.lbl-opt { color:var(--muted); font-weight:500; }
.auth-agree { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:flex-start; margin:2px 0; color:var(--ink); font-size:13px; line-height:1.45; cursor:pointer; }
.auth-agree input { width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--blue); }
.auth-agree a { color:var(--blue); font-weight:700; }
.auth-foot-links { margin:18px 0 0; text-align:center; display:grid; gap:6px; }
.auth-foot-links p { margin:0; color:var(--muted); font-size:14px; }
.auth-foot-links a { color:var(--blue); font-weight:700; }
.auth-card .auth-terms { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }
.or-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:16px 0; }
.or-divider::before, .or-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#fff; color:#3c4043; border:1px solid #dadce0; font-weight:600; }
.btn-google:hover { background:#f7f8f8; }
.btn-facebook { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#1877f2; color:#fff; border:0; font-weight:600; margin-top:9px; }
.btn-facebook:hover { background:#166fe0; }

/* theme toggle + language switch (in the blue top bar) */
.theme-toggle { background:rgba(255,255,255,.16); border:0; width:38px; height:38px; flex-shrink:0; border-radius:50%;
  cursor:pointer; font-size:15px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; font-family:inherit; line-height:1; }
.theme-toggle:hover { background:rgba(255,255,255,.32); }
.lang-switch { display:inline-flex; gap:2px; align-items:center; font-size:12.5px; font-weight:700; }
.lang-switch a { color:#cfe0ff; padding:3px 7px; border-radius:6px; }
.lang-switch a.on { background:rgba(255,255,255,.22); color:#fff; }
.lang-switch a:hover { color:#fff; }
/* language + region (currency) dropdown */
.region-dd { position:relative; }
.region-toggle { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.12); border:0; color:#fff;
  font-family:inherit; font-size:13px; font-weight:600; padding:10px 13px; border-radius:11px; cursor:pointer; white-space:nowrap; }
.region-toggle:hover { background:rgba(255,255,255,.24); }
.region-toggle .region-globe { width:18px; }
.region-toggle .region-globe svg { width:18px; height:18px; }
.region-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:268px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 32px rgba(20,30,40,.24); padding:16px; display:none; z-index:80; }
.region-menu.open { display:block; }
.region-menu .rm-title { font-weight:700; font-size:15px; }
.region-menu .rm-sub { color:var(--muted); font-size:12.5px; margin:4px 0 12px; }
.region-menu .rm-label { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:10px 0 5px; }
.region-menu select { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-family:inherit;
  font-size:14px; background:var(--card); color:var(--ink); }
.region-menu .rm-save { width:100%; margin-top:14px; }

/* theme selector (settings) */
.theme-opts { display:flex; gap:10px; flex-wrap:wrap; }
.theme-opts button { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; transition:.15s; }
.theme-opts button:hover { border-color:var(--blue); }
.theme-opts button.on { border-color:var(--blue); background:var(--blue-100); color:var(--blue); box-shadow:0 0 0 2px rgba(37,99,235,.15); }

/* ===== dark theme ===== */
html[data-theme="dark"] {
  --ink:#e7ebf1; --muted:#9aa6b3; --bg:#0f1623; --card:#19212f; --line:#2b3445;
  --blue-100:#1f2b45; --amber-50:#2a2410;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.4);
}
html[data-theme="dark"] .cat-menu,
html[data-theme="dark"] .acct-menu,
html[data-theme="dark"] .subflyout,
html[data-theme="dark"] .notif-list,
html[data-theme="dark"] .msg-list,
html[data-theme="dark"] table { background:var(--card); }
/* search bar: a subtle translucent field that sits on the dark top bar */
html[data-theme="dark"] .topbar-search { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); box-shadow:none; }
html[data-theme="dark"] .topbar-search input, html[data-theme="dark"] .topbar-search select { background:transparent !important; color:#fff; }
html[data-theme="dark"] .ts-q::placeholder { color:rgba(255,255,255,.5); }
html[data-theme="dark"] .ts-sep { background:rgba(255,255,255,.15); }
html[data-theme="dark"] .ts-loc { color:#e2e8f0; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#0f1623; color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .metric,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .avatar-preview { background:#121a27; }
html[data-theme="dark"] .side-thumb,
html[data-theme="dark"] .msg-thumb,
html[data-theme="dark"] .card .thumb,
html[data-theme="dark"] .gallery img { background-color:#222c3b; }
html[data-theme="dark"] .msg-thread { background:#0d1422; }
html[data-theme="dark"] .myad,
html[data-theme="dark"] .card { background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); }
html[data-theme="dark"] img[src*="favicon"] { filter:none; }
/* match the screenshot: dark top bar + hero instead of bright blue */
html[data-theme="dark"] .topbar { background:linear-gradient(90deg,#131c2e,#0e1626); box-shadow:0 2px 10px rgba(0,0,0,.5); }
/* remove the light pill on the language/region toggle in dark theme */
html[data-theme="dark"] .region-toggle { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
html[data-theme="dark"] .region-toggle:hover { background:rgba(255,255,255,.1); }
html[data-theme="dark"] .menu-toggle:hover,
html[data-theme="dark"] .topbar-nav .icon:hover,
html[data-theme="dark"] .cat-toggle:hover { background:rgba(255,255,255,.08); }
html[data-theme="dark"] .hero { background:linear-gradient(180deg,#172339,#0f1726); }
html[data-theme="dark"] .hero-search { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); box-shadow:none; }
html[data-theme="dark"] .hero-search .loc,
html[data-theme="dark"] .hero-search .q,
html[data-theme="dark"] .hero-search .cam { background:transparent; color:var(--ink); }
html[data-theme="dark"] .hero-search .loc { border-right-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .hero-search .cam { border-left-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .hero-search input::placeholder { color:var(--muted); }
/* promo tiles: dark cards with the accent colour kept */
html[data-theme="dark"] .promo .t1 { background:#16223c; color:#93b4ff; }
html[data-theme="dark"] .promo .t2 { background:#2b2410; color:#f5c45e; }
html[data-theme="dark"] .promo .t3 { background:#102619; color:#4ade80; }
html[data-theme="dark"] .promo .t4 { background:#1f1733; color:#b794f6; }
/* footer uses var(--ink) as its bg (dark in light mode); pin it dark in dark mode */
html[data-theme="dark"] .footer { background:linear-gradient(180deg,#111827 0%,#080F1D 100%); }
/* remaining hard-coded light surfaces → dark (full-page coverage) */
html[data-theme="dark"] .topbar-search button, html[data-theme="dark"] .ts-btn { color:#fff; }
html[data-theme="dark"] th,
html[data-theme="dark"] .specs th { background:#121a27; color:var(--muted); }
html[data-theme="dark"] .viewtoggle a,
html[data-theme="dark"] .results-bar select { background-color:var(--card); color:var(--ink); }
html[data-theme="dark"] .tag { background:#222c3b; color:#aeb9c6; }
html[data-theme="dark"] .carousel-main.noimg,
html[data-theme="dark"] .myad-thumb,
html[data-theme="dark"] .gallery img { background-color:#222c3b; }
html[data-theme="dark"] .carousel-nav:hover { background:rgba(255,255,255,.16); }
html[data-theme="dark"] .bubble.them { background:#222c3b; border-color:var(--line); }
html[data-theme="dark"] .notif:hover { background:#121a27; }
html[data-theme="dark"] .filter-rail.open { background:transparent; }
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] input:disabled { background:#0c1320 !important; color:var(--muted); }
html[data-theme="dark"] .flash-success { background:#0f2a1d; color:#7ee0ab; border-color:#1c4631; }
html[data-theme="dark"] .flash-error { background:#2e1715; color:#f3a99a; border-color:#5a2a23; }
html[data-theme="dark"] .flash-info { background:#142036; color:#9cc2ff; border-color:#23365a; }
html[data-theme="dark"] .verify-banner { background:#241a10; border-bottom-color:#4a3417; color:#f0b878; }
html[data-theme="dark"] .admin-attention { background:#241a10; border-color:#4a3417; color:#f0b878; }
html[data-theme="dark"] .admin-attention a, html[data-theme="dark"] .verify-banner strong { color:#ffd09a; }

/* tables (admin) */
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
th, td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
th { background:var(--bg); color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:800; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:var(--bg); }
tbody tr:last-child td { border-bottom:0; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.stat .n { font-size:30px; font-weight:800; } .stat .l { color:var(--muted); font-size:13px; }
.tabs { display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.tabs a { padding:7px 13px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; }
.tabs a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.inline { display:inline; }
.scroll-sentinel { text-align:center; padding:24px 0; color:var(--muted); min-height:44px; }
.pager { display:flex; gap:8px; justify-content:center; margin:22px 0; }
.pager a, .pager span { padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.pager .on { background:var(--blue); color:#fff; border-color:var(--blue); }

/* footer (brand-refresh: dark gradient + columns + newsletter) */
.footer { background:linear-gradient(180deg,#111827 0%,#080F1D 100%); color:var(--footer-text); margin-top:48px; padding:44px 0 22px; }
.footer .brand { color:#fff; }
.footer-top { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr 1fr 1.7fr; gap:28px; }
.footer-brand .brand { font-size:24px; padding-left:0; }
.footer-brand .brand span { color:var(--sella-yellow); }
.footer-brand .brand .tld { color:#fff; }
.footer-brand p { color:var(--footer-muted); font-size:14px; margin:12px 0 16px; max-width:240px; line-height:1.6; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid var(--footer-border);
  display:inline-flex; align-items:center; justify-content:center; color:var(--footer-text); transition:.15s; }
.footer-social a:hover { background:var(--sella-blue-main); border-color:var(--sella-blue-main); color:#fff; transform:translateY(-2px); }
.footer-social svg { width:17px; height:17px; }
.footer-col h4, .footer-news h4 { color:var(--footer-heading); font-size:14px; margin:0 0 12px; font-weight:700; }
.footer-col a { display:block; color:var(--footer-muted); font-size:14px; padding:5px 0; }
.footer-col a:hover { color:#fff; }
.footer-news p { color:var(--footer-muted); font-size:13.5px; margin:0 0 12px; line-height:1.6; }
.news-form { display:flex; gap:8px; }
.news-form input { flex:1; min-width:0; padding:10px 12px; border-radius:8px; border:1px solid var(--footer-border);
  background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:14px; }
.news-form input::placeholder { color:var(--footer-muted); }
.news-form input:focus { border-color:var(--sella-blue-soft); box-shadow:0 0 0 3px rgba(79,116,255,.2); }
.news-form .btn { white-space:nowrap; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:30px; padding-top:18px; border-top:1px solid var(--footer-border); color:var(--footer-muted); font-size:13px; }
.footer-legal a { color:var(--footer-muted); }
.footer-legal a:hover { color:#fff; }
.footer-legal > span { opacity:.5; margin:0 4px; }
.footer-version { color:var(--footer-muted); opacity:.7; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
/* hide the floating reCAPTCHA badge (disclosure shown below instead, per Google's terms) */
.grecaptcha-badge { visibility:hidden; }
.footer-protected { display:inline-flex; align-items:center; gap:6px; color:var(--footer-muted); font-size:12px; opacity:.85; }
.footer-protected svg { width:14px; height:14px; flex-shrink:0; }
.footer-protected a { color:var(--footer-muted); text-decoration:underline; }
.footer-protected a:hover { color:#fff; }
/* small inline disclosure on auth/post pages where the footer isn't shown */
.recaptcha-note { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:14px;
  color:var(--muted); font-size:11.5px; line-height:1.4; text-align:center; }
.recaptcha-note svg { width:13px; height:13px; flex-shrink:0; }
.recaptcha-note a { color:var(--muted); text-decoration:underline; }
@media (max-width:960px){ .footer-top { grid-template-columns:1fr 1fr 1fr; } .footer-brand, .footer-news { grid-column:span 3; } }
@media (max-width:560px){ .footer-top { grid-template-columns:1fr 1fr; } .footer-brand, .footer-news { grid-column:span 2; } .news-form { max-width:360px; } .footer-bottom { justify-content:flex-start; } }

/* ===== browse / category results (jiji-style) ===== */
.static-page { max-width:820px; margin:22px auto; }
.static-page h1 { margin:0 0 14px; }
.static-body h3 { margin:18px 0 4px; font-size:17px; }
.static-body p { margin:0 0 10px; }
/* scrollable Terms box — keeps long legal copy from dominating the page */
.terms-updated { color:var(--muted); font-size:13px; }
.terms-scroll { max-height:62vh; overflow-y:auto; overscroll-behavior:contain; margin:16px 0;
  padding:18px 22px; border:1px solid var(--line); border-radius:12px; background:var(--bg2,#f8fafc);
  box-shadow:inset 0 -14px 16px -16px rgba(0,0,0,.25); }
.terms-scroll:focus { outline:2px solid var(--blue); outline-offset:2px; }
.terms-scroll h3 { margin:22px 0 6px; font-size:16px; }
.terms-scroll h3:first-child { margin-top:0; }
.terms-scroll ul { margin:0 0 12px; padding-left:20px; line-height:1.8; }
.terms-scroll li { margin-bottom:5px; }
.terms-scroll p { margin:0 0 12px; line-height:1.65; }
.terms-scroll::-webkit-scrollbar { width:10px; }
.terms-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; border:2px solid var(--bg2,#f8fafc); }
.terms-scroll::-webkit-scrollbar-thumb:hover { background:var(--muted); }
.terms-foot { margin-top:14px; font-size:13px; }
html[data-theme="dark"] .terms-scroll { background:rgba(255,255,255,.03); }
.crumb { font-size:13px; color:var(--muted); margin:16px 0 12px; }
.crumb a { color:var(--blue); }
/* reusable breadcrumb-style "back" link (cart, profile, saved, messages, settings) */
.page-crumb { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.crumb-back { display:inline-flex; align-items:center; gap:5px; color:var(--blue); font-weight:600; }
.crumb-back svg { width:15px; height:15px; flex-shrink:0; }
.crumb-back:hover { text-decoration:underline; }
/* overlay variant: sits on top of a cover image, readable on any background */
.crumb-overlay { position:absolute; top:12px; left:16px; z-index:3; margin:0; }
.crumb-overlay .crumb-back { background:rgba(255,255,255,.92); color:var(--blue); padding:6px 13px 6px 10px;
  border-radius:999px; box-shadow:0 2px 10px rgba(15,23,42,.22); backdrop-filter:blur(3px); }
.crumb-overlay .crumb-back:hover { background:#fff; text-decoration:none; }
.browse { display:grid; grid-template-columns:250px 1fr; gap:20px; align-items:start; margin-bottom:24px; }
.filter-rail { display:flex; flex-direction:column; gap:14px; position:sticky; top:78px; }
.filter-toggle { display:none; }
.frail-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.frail-card h4 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.frail-card.head { background:var(--blue); }
.frail-card.head h4 { color:#fff; margin:0; }
.frail-card select, .frail-card input[type=text] { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.frail-cats { max-height:320px; overflow:auto; }
.frail-cats a { display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line); }
.frail-cats a:last-child { border-bottom:0; }
.frail-cats a.on { color:var(--blue); font-weight:700; }
.frail-cats a small { color:var(--muted); }
/* mobile subcategory landing: pick a subcategory before seeing listings */
.subcat-landing { display:none; }
.subcat-tiles { display:grid; grid-template-columns:1fr; gap:12px; }
.subcat-tile { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 12px; text-decoration:none; min-height:74px;
  box-shadow:0 8px 18px rgba(15,23,42,.045); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.subcat-tile:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(15,23,42,.09); border-color:var(--blue); }
.subcat-tile .sct-ic { width:44px; height:44px; border-radius:999px; background:var(--blue-100); display:grid; place-items:center; }
.subcat-tile .sct-ic svg { width:25px; height:25px; }
html[data-theme="dark"] .subcat-tile .sct-ic { background:rgba(49,84,231,.18); }
.subcat-tile strong { font-size:14px; line-height:1.25; font-weight:600; color:var(--ink); min-width:0; }
.subcat-tile em { justify-self:end; min-width:30px; height:30px; padding:0 8px; border-radius:999px; background:var(--bg); color:var(--muted);
  font-style:normal; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.subcat-tile.active, .subcat-tile[data-allsub] { border-color:var(--blue); box-shadow:0 10px 24px rgba(49,84,231,.13); }
.subcat-tile.active em, .subcat-tile[data-allsub] em { background:var(--blue); color:#fff; }
@media (max-width:900px){
  .subcat-landing { display:block; margin:8px 0 12px; }
  .sub-when-listing { display:none; }   /* on mobile, show subcategories first; listings appear after a pick */
}
.frail-opt { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:14px; cursor:pointer; }
/* checkboxes/radios inside a .field must not inherit .field input{width:100%} (which mis-stretches them) */
.frail-opt input[type=checkbox], .frail-opt input[type=radio] { width:auto; margin:0; flex-shrink:0; }
/* terms agreement on the sign-up form */
.agree-opt { align-items:flex-start; gap:9px; margin:4px 0 14px; font-size:13.5px; line-height:1.45; }
.agree-opt input { margin-top:2px; }
.auth-terms { margin-top:12px; text-align:center; font-size:12.5px; line-height:1.5; }
.social-terms-note { margin:12px 0 0; text-align:center; font-size:12.5px; line-height:1.5; color:var(--muted); }
/* /register/confirm — the post-OAuth "one last step" identity + agree card */
.confirm-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.confirm-identity { text-align:center; margin:0 0 20px; padding:16px; border-radius:14px; background:var(--bg); border:1px solid var(--line); }
.confirm-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.confirm-name { font-size:17px; font-weight:700; color:var(--ink); }
.confirm-email { font-size:13.5px; color:var(--muted); margin-top:2px; }
/* "Sell online" authorisation + terms acceptance box on the post-ad form */
.cart-terms-box { margin:2px 0 12px 26px; padding:11px 14px; border-left:3px solid var(--blue);
  background:rgba(37,99,235,.06); border-radius:0 8px 8px 0; font-size:13.5px; }
.cart-terms-box .frail-opt { align-items:flex-start; gap:9px; }
html[data-theme="dark"] .cart-terms-box { background:rgba(37,99,235,.14); }
.auth-gate { border:1px solid rgba(16,185,129,.4); background:rgba(16,185,129,.08); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
html[data-theme="dark"] .auth-gate { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.32); }
.auth-gate-head { font-size:13px; font-weight:800; color:#047857; margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
html[data-theme="dark"] .auth-gate-head { color:#6ee7b7; }
.auth-gate-req { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#b91c1c; background:#fee2e2; padding:2px 7px; border-radius:6px; }
html[data-theme="dark"] .auth-gate-req { color:#fca5a5; background:#3a1212; }
/* navbar light/dark theme toggle (visible to everyone) */
.topbar-nav .theme-toggle { color:#fff; }                    /* pure white solid icon on the blue bar (buttons don't inherit nav link colour) */
.topbar-nav .theme-toggle:hover { color:#fff; }
.theme-toggle .ic-sun { display:none; }
.theme-toggle .ic-moon { display:inline; }
html[data-theme="dark"] .theme-toggle .ic-sun { display:inline; }
html[data-theme="dark"] .theme-toggle .ic-moon { display:none; }
.theme-toggle svg { width:20px; height:20px; }
/* attribute selects: two per row to use the width */
#attrFields { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
#attrFields .field-wide { grid-column:1 / -1; }   /* multiselect spans full width */
@media (max-width:560px){ #attrFields { grid-template-columns:1fr; } }
/* multiselect checkboxes: neat left-aligned pills in compact rows */
.attr-checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:2px 18px; margin-top:4px; }
.attr-other { margin-top:8px; }
.attr-other[hidden] { display:none; }
.attr-checks .frail-opt { display:flex; align-items:center; gap:8px; padding:5px 0; }
.attr-checks .frail-opt input { width:auto; margin:0; flex-shrink:0; }   /* undo .field input width:100% */
@media (max-width:520px){ .attr-checks { grid-template-columns:1fr 1fr; } }
.results-head { font-size:22px; margin:0 0 4px; }
.results-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
.results-bar .count { color:var(--muted); font-size:14px; }
.results-bar .tools { display:flex; align-items:center; gap:10px; }
.results-bar label { font-size:13px; color:var(--muted); }
.results-bar label.sort-ic { display:inline-flex; align-items:center; justify-content:center; color:var(--muted); }
.results-bar label.sort-ic svg { width:18px; height:18px; display:block; }
.results-bar select { padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; background-color:#fff; }
.viewtoggle { display:flex; gap:4px; }
.viewtoggle a { padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted); line-height:1; }
.viewtoggle a.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.grid.listview { grid-template-columns:1fr; }
.grid.listview .card { flex-direction:row; }
.grid.listview .card .thumb { width:210px; height:160px; flex-shrink:0; border-radius:var(--radius) 0 0 var(--radius); }
.grid.listview .card .thumb .thumb-img { width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; }
.grid.listview .card .thumb .thumb-ico { width:100%; height:100%; aspect-ratio:auto; }
.grid.listview .card .body { flex:1; }

/* ===== ad cards / detail / tags ===== */
.card .price { font-size:16px; font-weight:800; color:var(--green); }
.card .price small { color:var(--muted); font-weight:600; font-size:11px; }
.rent-per { color:var(--muted); font-weight:600; font-size:.65em; }
.card h3 { margin:3px 0 4px; font-size:15px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tag { display:inline-flex; align-items:center; align-self:flex-start; width:fit-content; max-width:100%;
  margin-top:6px; margin-right:4px; padding:5px 11px; border-radius:7px; line-height:1;
  background:var(--bg); border:1px solid var(--line); color:var(--muted);
  font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:capitalize; }
.tag-ok { background:#e7f6ee; border-color:#bfe6cf; color:#177544; }
.taglist { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.price-lg { font-size:28px; font-weight:800; color:var(--green); margin-top:14px; }
.price-lg small { font-size:14px; color:var(--muted); font-weight:600; }
.sponsored { display:inline-block; background:var(--amber-50); color:var(--amber-d); font-size:11px; font-weight:800;
  padding:2px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
/* listing action buttons (call back / offer / report / post-like-this) */
.listing-actions { display:flex; flex-direction:column; gap:9px; }
.btn.lstact { width:100%; display:flex; align-items:center; justify-content:flex-start; gap:11px; text-align:left;
  background:var(--card); border:1px solid var(--line); color:var(--ink); font-weight:600; padding:11px 15px; }
.btn.lstact .lstact-ic { width:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.btn.lstact .lstact-ic svg { width:18px; height:18px; display:block; }
/* icons inside centered CTA buttons (Buy now / Send message / Share / Save / Show number) */
.btn-ico { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-ico svg { width:17px; height:17px; flex-shrink:0; }
.btn-sm.btn-ico svg { width:14px; height:14px; }
.contact .call, .contact .wa { display:flex; align-items:center; justify-content:center; gap:8px; }
.contact .call svg, .contact .wa svg { width:17px; height:17px; flex-shrink:0; }
.buy-form .lstact { justify-content:center; }   /* Add to cart stays centered to match Buy now */
.btn.lstact:hover { border-color:var(--blue); color:var(--blue); }
.btn.lstact.lstact-warn:hover { border-color:var(--red); color:var(--red); }
.reveal-form { display:flex; flex-direction:column; gap:8px; padding:4px 0 6px; }
.reveal-form[hidden] { display:none; }   /* the [hidden] attr must beat the display:flex above */
.reveal-form input, .reveal-form select, .reveal-form textarea { padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; font-family:inherit; font-size:14px; width:100%; background:var(--card); color:var(--ink); }
.show-more-ads { display:inline-block; margin-top:14px; background:var(--green); color:#fff; border:0; font-weight:700; padding:11px 20px; }
.show-more-ads:hover { filter:brightness(.95); color:#fff; }
.btn.lstact.lstact-go { background:var(--amber-50); border-color:var(--gold); color:var(--amber-d); }
.btn.lstact.lstact-go:hover { background:var(--gold); color:#fff; }
/* wholesale (MOQ / sample) */
.wholesale-info { display:flex; flex-wrap:wrap; gap:8px 18px; margin:8px 0 2px; font-size:13.5px; color:var(--muted); }
.wholesale-info strong { color:var(--ink); }
.wholesale-box { border:1px dashed var(--line); border-radius:10px; padding:11px 14px; margin:12px 0; }
.tier-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13px; color:var(--muted); }
.tier-row input { width:90px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; }
.tier-row input:last-child { flex:1; }

/* discount + price tiers (listing + cards) */
.was-price { font-size:15px; color:var(--muted); text-decoration:line-through; font-weight:600; margin-left:4px; white-space:nowrap; }
.disc-badge { font-size:12px; font-weight:800; color:#fff; background:var(--red); padding:2px 9px; border-radius:999px; vertical-align:middle; }
.disc-tag { position:absolute; top:0; left:0; background:var(--red); color:#fff; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:0 0 5px 0; z-index:3; letter-spacing:.02em; box-shadow:0 2px 6px rgba(0,0,0,.28); line-height:1.1; }
/* minimum-order (wholesale) badge — a proper pill, not a full-width bar */
.moq-badge { display:inline-flex; align-items:center; gap:6px; width:fit-content; max-width:100%; align-self:flex-start;
  margin-top:8px; padding:5px 10px; border-radius:7px; line-height:1;
  background:#f5f7fb; border:1px solid #e7eaf5;
  color:#000000; font-size:12px; font-weight:700; }
.moq-badge .moq-label { color:var(--muted); font-weight:600; letter-spacing:.01em; }
.moq-badge .moq-value { color:var(--blue); font-weight:800; }
html[data-theme="dark"] .moq-badge { background:rgba(49,84,231,.16); border-color:rgba(49,84,231,.32); }
html[data-theme="dark"] .moq-badge .moq-value { color:#bfdbfe; }
.price .was-price { font-size:13px; }
.tier-table { display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; margin:10px 0 4px; }
.tier-col { flex:1; min-width:90px; background:var(--card); padding:10px 12px; text-align:center; }
.tier-col .tier-price { font-weight:800; font-size:15px; }
.tier-col .tier-qty { color:var(--muted); font-size:12px; margin-top:2px; }

/* ===== cart + orders ===== */
.buy-panel { margin-bottom:16px; }
.buy-form { display:flex; flex-direction:column; gap:9px; }
.buy-qty { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; }
.buy-qty input { width:80px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; background:var(--card); color:var(--ink); }
.cart-item { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.cart-thumb { width:92px; height:92px; flex-shrink:0; border-radius:8px; background:#eef2f7 center/contain no-repeat; }
.cart-meta { flex:1; min-width:0; }
.cart-meta .cart-price { color:var(--green); font-weight:700; margin-top:3px; }
.cart-qty { text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.qtyf { display:flex; gap:6px; }
.qtyf input { width:64px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-family:inherit; background:var(--card); color:var(--ink); }
.cart-line { font-weight:800; }
.link-rm { background:none; border:0; color:var(--red); cursor:pointer; font-size:12.5px; font-family:inherit; padding:0; }
.sum-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
.sum-row.total { font-size:18px; font-weight:800; border-top:1px solid var(--line); margin-top:6px; padding-top:10px; }
.checkout-form { display:flex; flex-direction:column; gap:8px; }
.checkout-form input, .checkout-form textarea { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; background:var(--card); color:var(--ink); }
.order-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ostatus { font-size:12px; font-weight:800; padding:3px 11px; border-radius:999px; text-transform:capitalize; background:var(--blue-100); color:var(--blue-d); white-space:nowrap; }
.ostatus.s-confirmed { background:#e7f0ff; color:#1d4ed8; }
.ostatus.s-shipped { background:#fff6e6; color:var(--amber-d); }
.ostatus.s-delivered { background:#e7f6ee; color:var(--green); }
.ostatus.s-cancelled { background:#fdeae7; color:var(--red); }
.order-steps { display:flex; gap:6px; margin:18px 0; }
.order-steps .ostep { flex:1; text-align:center; font-size:12px; color:var(--muted); text-transform:capitalize; position:relative; }
.order-steps .odot { display:block; width:14px; height:14px; border-radius:50%; background:var(--line); margin:0 auto 6px; }
.order-steps .ostep.done .odot { background:var(--green); }
.order-steps .ostep.done { color:var(--ink); font-weight:600; }
.order-steps .ostep::before { content:""; position:absolute; top:6px; left:-50%; width:100%; height:2px; background:var(--line); z-index:-1; }
.order-steps .ostep:first-child::before { display:none; }
.order-steps .ostep.done::before { background:var(--green); }
.order-items { width:100%; border-collapse:collapse; margin-top:16px; }
.order-items td { padding:9px 0; border-top:1px solid var(--line); font-size:14px; }
.order-items .ot-total td { font-weight:800; }
.ostatus-form { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.ostatus-form select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; background-color:var(--card); color:var(--ink); }
html[data-theme="dark"] .cart-thumb { background-color:#222c3b; }

/* Alibaba-style Key attributes grid */
.key-attrs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:8px; }
.ka-cell { display:flex; background:var(--card); min-width:0; }
.ka-label { width:44%; flex-shrink:0; padding:11px 14px; background:var(--bg); color:var(--muted); font-size:13px; }
.ka-val { flex:1; min-width:0; padding:11px 14px; font-weight:600; font-size:13.5px; word-break:break-word; }
@media (max-width:600px){ .key-attrs{ grid-template-columns:1fr; } }

/* store reviews */
.rev-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rev-score { display:inline-flex; align-items:center; gap:8px; }
.rev-score .rev-num { font-size:26px; font-weight:800; line-height:1; }
.stars { color:var(--gold); letter-spacing:1px; }
.stars .off { color:var(--line); }
.stars.sm { font-size:13px; }
.rev-score-sm { font-size:13px; }
.rev-list { margin:14px 0 6px; display:flex; flex-direction:column; gap:14px; }
.rev-item { display:flex; gap:11px; }
.rev-av { width:38px; height:38px; flex-shrink:0; border-radius:50%; overflow:hidden; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; background:var(--blue); }
.rev-av img { width:100%; height:100%; object-fit:cover; }
.rev-body { min-width:0; }
.rev-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; }
.rev-body p { margin:4px 0 0; font-size:14px; line-height:1.5; }
.rev-form { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.rev-form-label { font-weight:600; margin-bottom:6px; }
.star-input { display:inline-flex; gap:2px; margin-bottom:8px; }
.star-input .star { background:none; border:0; font-size:28px; line-height:1; color:var(--gold); cursor:pointer; padding:0 1px; font-family:inherit; }
.rev-form textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; margin-bottom:8px; background:var(--card); color:var(--ink); }
/* photo carousel on the listing detail page */
.carousel { margin-bottom:6px; }
.carousel-main { position:relative; border-radius:10px; overflow:hidden; background:#0d1320; height:380px; }
.carousel-main img { width:100%; height:100%; object-fit:contain; display:block; }
.carousel-main.noimg { height:300px; display:flex; align-items:center; justify-content:center; font-size:84px; color:#cbd5e1; background:#eef2f7; }
/* ===== Listing detail — premium polish (scoped to .listing-detail) ===== */
.listing-detail .ad-gallery-card { padding:16px; }
.listing-detail .carousel-main { border-radius:8px; }
.listing-detail .sponsored-side-bar, .listing-detail .ppp-tv-pill { pointer-events:none; }
.listing-detail .carousel-nav { z-index:6; }
.listing-detail .sponsored-side-bar { width:auto; }
.listing-detail .sponsored-side-bar > span { font-size:10px; letter-spacing:.1em; }
.listing-detail .ppp-tv-pill { display:none; }
.listing-detail .ppp-tv-pill .tv-icon { width:13px; height:13px;
  background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='11' rx='2' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M8 21h8M12 16v5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.listing-detail .price-lg { font-size:25px; font-weight:800; letter-spacing:-.03em; margin-top:18px; }
.listing-detail h2 { font-size:25px; font-weight:700; letter-spacing:-.03em; margin:10px 0 8px; }
.listing-detail .tag-tv { background:#fff0fa; color:#db2da4; font-weight:800; }
html[data-theme="dark"] .listing-detail .tag-tv { background:rgba(219,45,164,.16); color:#f0a8d8; }
/* key attributes — bordered grid */
.listing-detail .key-attrs { border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(15,23,42,.04); }
.listing-detail .ka-label { width:46%; font-weight:700; }
.listing-detail .ka-val { font-weight:800; }
/* seller contact card */
.listing-detail .seller-av { width:52px; height:52px; }
.listing-detail .seller-link strong { color:var(--blue); font-size:16px; font-weight:700; }
.listing-detail .contact .call { min-height:46px; border-radius:11px; font-weight:700; font-size:15px; }
.carousel-nav { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0;
  border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.carousel-nav:hover { background:#fff; }
.carousel-nav.prev { left:12px; } .carousel-nav.next { right:12px; }
.carousel-count { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.6); color:#fff;
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
.carousel-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.carousel-thumbs img { width:74px; height:74px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; flex-shrink:0; }
.carousel-thumbs img.on { border-color:var(--blue); }
.carousel-thumbs img:hover { border-color:var(--blue-d); }
/* "more photos" badge on cards */
.photo-count { position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; gap:4px;
  background:rgba(15,23,42,.66); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); box-shadow:0 2px 6px rgba(0,0,0,.25); }
.photo-count svg { width:13px; height:13px; flex-shrink:0; }

/* PPP TV advertising */
.badge-tv { background:#ec1c93; color:#fff; }
.card .thumb .badge-tv { position:absolute; top:8px; right:8px; }
.btn-tv { background:#ec1c93; color:#fff; border-color:#ec1c93; }
.btn-tv:hover { filter:brightness(1.06); color:#fff; }
.ppptv-brand { display:flex; align-items:center; min-height:60px; }
.ppptv-brand img { max-height:66px; width:auto; }
.ppptv-text { font-weight:900; font-size:34px; color:#ec1c93; letter-spacing:-1px; }
.ppptv-text span { background:#29abe2; color:#fff; font-size:16px; padding:1px 7px; border-radius:6px; vertical-align:super; margin-left:5px; letter-spacing:0; }
.ppptv-banner { display:flex; align-items:center; gap:10px;
  background:linear-gradient(90deg,#E22BAE 0%,#9D28F0 45%,#2878F0 100%);
  color:#fff; border-radius:10px; padding:8px 14px; margin-top:14px; font-size:13.5px;
  box-shadow:0 4px 14px rgba(157,40,240,.28); white-space:nowrap; overflow:hidden; }
.ppptv-banner:hover { filter:brightness(1.04); }
.ppptv-banner-logo { height:24px; background:#fff; border-radius:6px; padding:3px 6px; flex-shrink:0; }
.ppptv-banner strong { font-weight:800; }
.ppptv-msg { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ppptv-short { display:none; }
.ppptv-cta { flex-shrink:0; background:rgba(255,255,255,.22); padding:4px 12px; border-radius:999px;
  font-weight:700; font-size:12.5px; white-space:nowrap; }
.safety ul { margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.8; }
/* Sidebar cards with icon headers (chat / safety) */
.side-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.side-card-head h3 { margin:0; font-size:18px; font-weight:900; color:var(--ink); }
.side-ic { width:42px; height:42px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; }
.side-ic svg { width:21px; height:21px; }
.side-ic-blue { background:var(--blue-100); color:var(--blue); }
.side-ic-green { background:#e7f6ee; color:#157a34; }
html[data-theme="dark"] .side-ic-green { background:rgba(34,197,94,.16); color:#86efac; }
.side-link { display:inline-block; color:var(--blue); font-weight:800; font-size:14px; }
.side-link:hover { text-decoration:underline; }
.safety-card { background:#f3faf5; border-color:#d8efe1; }
html[data-theme="dark"] .safety-card { background:rgba(34,197,94,.06); border-color:rgba(34,197,94,.2); }
.safety-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.safety-list li { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:14px; font-weight:600; }
.safety-list li svg { width:20px; height:20px; flex-shrink:0; color:#22a957; }
.safety-more { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--blue); }
.safety-more:hover { text-decoration:underline; }
/* Chat-with-seller message box */
.chat-input { width:100%; box-sizing:border-box; min-height:96px; resize:vertical;
  padding:13px 15px; font-size:14.5px; line-height:1.5; font-family:inherit; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(20,30,40,.04); transition:border-color .15s, box-shadow .15s, background .15s; }
.chat-input::placeholder { color:var(--muted); opacity:.75; }
.chat-input:focus { outline:none; border-color:var(--blue); background:var(--card);
  box-shadow:0 0 0 3px rgba(49,84,231,.14); }
#chatForm .field { margin-bottom:12px; }
html[data-theme="dark"] .chat-input { background:var(--card); }
.specs { width:100%; border-collapse:collapse; box-shadow:none; margin-top:6px; }
.specs th { width:40%; text-align:left; background:#f8fafc; color:var(--muted); font-weight:600; text-transform:none; letter-spacing:0; font-size:14px; }
.specs th, .specs td { padding:8px 12px; border:1px solid var(--line); }
.attr-checks { display:flex; flex-direction:column; gap:2px; }

/* my-ads rows */
/* ===== revenue / payouts (financial dashboard) ===== */
.rev-cards { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr 1fr; gap:14px; margin:16px 0 22px; }
.rev-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px; min-height:122px; position:relative; overflow:hidden; min-width:0; }
.rev-ic { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-100); color:var(--blue); flex-shrink:0; }
.rev-ic svg { width:20px; height:20px; }
.rev-ic-green { background:#dcfce7; color:#16a34a; }
.rev-ic-red { background:#fde8e1; color:var(--red); }
.rev-ic-grey { background:var(--bg); color:var(--muted); }
.rev-label { font-size:12.5px; color:var(--muted); font-weight:700; }
.rev-amount { font-size:25px; font-weight:850; letter-spacing:-.03em; margin-top:auto; }
.rev-amt-sm { font-size:22px; font-weight:850; letter-spacing:-.02em; margin-top:auto; }
.rev-neg { color:var(--red); }
.rev-pos { color:#16a34a; }
.rev-sub { font-size:12px; color:var(--muted); }
/* hero available-balance card */
.rev-card.rev-main { background:linear-gradient(135deg,var(--blue) 0%,#172bc9 100%); border-color:transparent; color:#fff;
  box-shadow:0 18px 38px rgba(49,84,231,.25); }
.rev-main .rev-top { display:flex; align-items:center; gap:11px; }
.rev-main .rev-ic { background:rgba(255,255,255,.18); color:#fff; }
.rev-main .rev-label, .rev-main .rev-sub { color:rgba(255,255,255,.82); }
.rev-main .rev-label { display:inline-flex; align-items:center; gap:5px; }
/* keep the hero the same height as the other cards by shrinking the type/spacing, not growing the box */
.rev-card.rev-main { gap:4px; }
.rev-main .rev-amount { color:#fff; font-size:19px; margin-top:3px; line-height:1.15; } /* smaller so it all fits */
.rev-main .rev-ready { margin-top:0; font-size:11.5px; }
.rev-info { width:13px; height:13px; opacity:.75; }
.rev-foot { margin-top:auto; }                          /* counts + divider pinned to the bottom */
/* On the blue balance card the footer text is white, so it must sit on the blue
   itself — reset the generic light .rev-foot background/border (which made the
   ticket/order counts invisible) and let the divider provide the separation. */
.rev-main .rev-foot { background:transparent; border-top:0; padding:0; }
.rev-divider { height:1px; background:rgba(255,255,255,.26); margin:0 0 6px; }
.rev-main .rev-foot .rev-sub { font-size:11.5px; color:rgba(255,255,255,.9); }

/* form panels — equal height (grid stretch), padded, icon headings */
.rev-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.rev-panel { display:flex; flex-direction:column; padding:24px; border-radius:18px; }
.rev-ph { display:flex; align-items:center; gap:11px; margin:0 0 18px; font-size:19px; font-weight:850; letter-spacing:-.02em; }
.rev-ph-ic { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-100); color:var(--blue); flex-shrink:0; }
.rev-ph-ic svg { width:20px; height:20px; }
.rev-ph-purple { background:#ede9fe; color:#7c3aed; }
.withdraw-options { display:grid; gap:8px; margin:6px 0 16px; }
.withdraw-option { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink);
  border:1px solid var(--line); border-radius:11px; padding:11px 13px; cursor:pointer; transition:border-color .15s, background .15s; }
.withdraw-option:hover { border-color:var(--blue); }
.withdraw-option input { width:auto; accent-color:var(--blue); }
.withdraw-option.is-disabled { opacity:.55; }
.rev-note { display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:11px 13px; background:var(--bg);
  border-radius:11px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.rev-note svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }

/* section headings + empty states */
.rev-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 12px; }
.rev-section-head h3 { display:flex; align-items:center; gap:9px; margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.rev-section-head h3 svg { width:18px; height:18px; color:var(--blue); }
.rev-viewall { color:var(--blue); font-weight:700; font-size:13.5px; }
.rev-empty { display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:22px 26px; box-shadow:var(--shadow); }
.rev-empty-ic { width:52px; height:52px; border-radius:50%; background:var(--blue-100); color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.rev-empty-ic svg { width:24px; height:24px; }
.rev-empty strong { font-size:15px; }
.rev-empty span { color:var(--muted); font-size:13.5px; }

.badge.wd-pending { background:var(--amber-50); color:var(--amber-d); }
.badge.wd-processing { background:var(--blue-100); color:var(--blue-d); }
.badge.wd-paid { background:#dcfce7; color:#166534; }
.badge.wd-rejected { background:#fee2e2; color:#b91c1c; }
/* installments */
.inst-bar { height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin:8px 0; }
.inst-bar.big { height:12px; }
/* listing "pay in installments" panel */
.inst-breakdown { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.inst-breakdown > div { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; }
.inst-breakdown .inst-total { border-top:1px solid var(--line); padding-top:7px; }
.inst-breakdown strong { font-weight:800; }
.inst-form { display:flex; flex-direction:column; gap:8px; }
.inst-form input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; background:var(--card); color:var(--ink); }
.inst-bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--blue),#16a34a); border-radius:999px; }
.inst-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:50px; margin-top:10px;
  border:1px solid var(--blue); background:var(--blue-100); color:var(--blue-d); border-radius:14px; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit; }
.inst-btn:hover:not(:disabled) { background:var(--blue); color:#fff; }
.inst-btn:disabled { opacity:.5; cursor:not-allowed; }
.badge.ins-pending_deposit { background:var(--amber-50); color:var(--amber-d); }
.badge.ins-active { background:var(--blue-100); color:var(--blue-d); }
.badge.ins-fully_paid, .badge.ins-released { background:#dcfce7; color:#166534; }
.badge.ins-cancelled, .badge.ins-expired { background:#fee2e2; color:#b91c1c; }
.installment-badge { display:inline-flex; align-items:center; gap:5px; background:#eef3ff; color:#3154e7;
  border:1px solid #cdd9fb; border-radius:999px; padding:3px 9px; font-size:11.5px; font-weight:800; }
.revenue-table { border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.revenue-table th, .revenue-table td { padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
.revenue-table th { background:var(--bg); color:var(--muted); font-weight:800; }
.revenue-table tr:last-child td { border-bottom:none; }
@media (max-width:1100px){ .rev-cards { grid-template-columns:1fr 1fr; } .rev-card.rev-main { grid-column:span 2; } .rev-grid2 { grid-template-columns:1fr; } }
@media (max-width:560px){ .rev-cards { grid-template-columns:1fr; } .rev-card.rev-main { grid-column:span 1; } }

.ad-ref { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:700; color:var(--muted);
  background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:2px 8px; letter-spacing:.02em; }
.nav-pill { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  background:var(--amber); color:#3a2a00; border-radius:999px; font-size:11px; font-weight:800; vertical-align:1px; margin-left:3px; }
.dash-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:0 0 22px; flex-wrap:wrap; }
.dash-head h1 { font-size:30px; font-weight:800; letter-spacing:-.03em; }
.dash-sub { margin:6px 0 0; color:var(--muted); font-size:15px; }
.dash-head-actions { display:flex; gap:12px; flex-shrink:0; }
/* Partner Program application form */
.pp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .pp-grid { grid-template-columns:1fr; } }
#applyForm label { display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--ink); }
#applyForm input, #applyForm select, #applyForm textarea { padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:400; background:var(--card); color:var(--ink); }
#applyForm textarea { resize:vertical; }
/* Stock / sold-out */
.soldout-box { padding:14px; text-align:center; background:var(--bg); border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:14px; }
.lowstock { background:#fff4e5; color:#9a3412; font-weight:700; font-size:13px; padding:6px 10px; border-radius:9px; margin-bottom:10px; text-align:center; }
.notify-stock { margin-top:12px; }
.notify-stock > label { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; text-align:center; }
.notify-stock-row { display:flex; gap:8px; }
.notify-stock-row input { flex:1; min-width:0; }
.notify-stock-row .btn { white-space:nowrap; }
.payout-locked { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--bg); }
.payout-locked .payout-num { font-weight:700; font-family:monospace; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.aff-box { border:1px solid var(--blue); background:var(--blue-100); margin-bottom:14px; }
.aff-row { display:flex; gap:8px; }
.aff-row input { flex:1; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-family:monospace; font-size:12.5px; }
.aff-row .btn { white-space:nowrap; }
.card-soldout { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.45); z-index:3; pointer-events:none; }
.card-soldout span { background:#b42318; color:#fff; font-weight:800; font-size:13px; padding:6px 14px; border-radius:8px; transform:rotate(-6deg); box-shadow:0 4px 12px rgba(0,0,0,.3); }

.myad-list { display:flex; flex-direction:column; gap:18px; column-count:initial; }
.myad { display:flex; gap:18px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); break-inside:avoid; width:100%; }
.myad-thumb { width:104px; height:104px; border-radius:10px; background:#eef2f7 center/cover no-repeat; display:flex;
  align-items:center; justify-content:center; font-size:32px; color:#b8c2cc; flex-shrink:0; }
/* mobile: thumb + details on one row, actions wrap to a full-width row below */
@media (max-width:600px){
  .myad { flex-wrap:wrap; gap:12px 14px; padding:14px; align-items:flex-start; }
  .myad-thumb { width:84px; height:84px; }
  .myad-body { flex:1 1 0; min-width:0; }
  .myad-body .price { font-size:16px; }
  .myad-title { font-size:15px; margin:2px 0 6px; }
  .myad-actions { flex-basis:100%; width:100%; justify-content:flex-start; gap:10px; }
}
.myad-body { flex:1; min-width:0; }
.myad-body .price { color:var(--green); font-weight:800; font-size:18px; }
.myad-title { display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; margin:3px 0 8px; line-height:1.3; }
.myad-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin-bottom:9px; }
.myad-meta .dot { opacity:.5; }
.myad-status { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; font-weight:800; font-size:12px; }
.myad-status::before { content:'\25CF'; font-size:8px; }
.myad-status-approved { background:#dcfce7; color:#166534; }
.myad-status-pending  { background:var(--amber-50); color:var(--amber-d); }
.myad-status-sold     { background:#eef2f7; color:#475569; }
.myad-status-rejected { background:#fee2e2; color:#b91c1c; }
.myad-status-hidden   { background:#e2e8f0; color:#475569; }
.myad-status-draft    { background:var(--blue-100); color:var(--blue); }

/* Post-an-ad action row: primary "Post ad" + optional "Save as draft". */
.post-actions { display:flex; gap:10px; }
.post-actions .btn { flex:1; }
.post-actions .btn-primary { flex:2; }
.post-draft-btn { background:var(--card); border:1px solid var(--line); color:var(--ink); }
.post-draft-btn:hover { background:var(--blue-100); }

/* compact icon actions with hover tooltips */
.myad-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:center; flex-shrink:0; }
.myad-actions form { margin:0; display:inline-flex; }
.icon-act { position:relative; width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit;
  transition:transform .15s, background .15s, color .15s, border-color .15s; }
.icon-act svg { width:19px; height:19px; }
.icon-act:hover { transform:translateY(-2px); }
.icon-act.act-edit:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.icon-act.act-promote:hover { background:var(--amber); color:#3a2a00; border-color:var(--amber); }
.icon-act.act-tv:hover { background:#d62ea6; color:#fff; border-color:#d62ea6; }
.icon-act.act-sponsor:hover { background:#ea580c; color:#fff; border-color:#ea580c; }
.icon-act.act-sold:hover { background:var(--green); color:#fff; border-color:var(--green); }
.icon-act.act-delete { color:var(--red); }
.icon-act.act-delete:hover { background:var(--red); color:#fff; border-color:var(--red); }
.icon-act:not([class*="act-"]):hover { background:var(--bg); border-color:#c8d3e3; }
/* tooltip */
.icon-act::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#111827; color:#fff; font-size:12px; font-weight:600; padding:5px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:6; }
.icon-act::before { content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#111827; opacity:0; transition:opacity .15s; z-index:6; }
.icon-act:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.icon-act:hover::before { opacity:1; }
.icon-act .mini-badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; background:var(--amber);
  color:#3a2a00; border:2px solid var(--card); border-radius:999px; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
@media (max-width:760px){
  .myad { flex-wrap:wrap; }
  .myad-actions { width:100%; justify-content:flex-start; }
}
/* themed confirmation modal (replaces window.confirm) */
.confirm-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .15s ease; }
.confirm-overlay.show { display:flex; opacity:1; }
.confirm-modal { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:18px;
  max-width:410px; width:100%; padding:28px 26px 22px; box-shadow:0 24px 60px rgba(15,23,42,.32); text-align:center;
  transform:translateY(10px) scale(.97); transition:transform .18s ease; }
.confirm-overlay.show .confirm-modal { transform:none; }
.confirm-icon { width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:var(--amber-50); color:var(--amber-d);
  display:flex; align-items:center; justify-content:center; }
.confirm-icon svg { width:26px; height:26px; }
.confirm-msg { margin:0 0 22px; font-size:15.5px; line-height:1.55; color:var(--ink); }
.confirm-actions { display:flex; gap:10px; }
.confirm-actions .btn { flex:1; height:46px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

/* masked PII (admin) — click to reveal */
.pii { opacity:.95; }
.badge-sold { background:#e9eefc; color:#3551b5; }
.badge-verified { background:#e7f6ee; color:#177544; }
/* verified badge over the photo on cards */
.card .thumb .vbadge { position:absolute; bottom:8px; right:8px; background:#1f9d55; color:#fff;
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* footer grid */
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.footer-grid h4 { color:#fff; font-size:14px; margin:0 0 10px; }
.footer-grid a { display:block; color:#9aa6b1; padding:4px 0; font-size:14px; }
.footer-grid a:hover { color:#fff; }
/* country flags row — markets we operate in */
.footer-countries { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid #2b3744; }
.footer-countries .fc-label { color:#9aa6b1; font-size:13px; }
.fc-flags { display:flex; gap:8px; }
.fc-flags .flag { width:26px; height:26px; flex-shrink:0; border-radius:50%; overflow:hidden; display:inline-flex;
  box-shadow:0 0 0 1px rgba(255,255,255,.18); transition:transform .15s; }
.fc-flags .flag:hover { transform:translateY(-2px) scale(1.06); }
.fc-flags .flag img { width:100%; height:100%; object-fit:cover; display:block; }
.fc-flags .flag.soon { opacity:.4; filter:grayscale(.7); }   /* not-yet-live markets */
.fc-flags .flag.soon:hover { opacity:.7; }
.footer-countries .fc-label strong { color:#cfe0ff; }
/* footer-copy already has a top border; drop it when the flags row sits above */
.footer-countries + .footer-copy { border-top:0; margin-top:14px; padding-top:0; }

/* ===== message centre ===== */
.msgs { display:grid; grid-template-columns:340px 1fr; gap:16px; margin:18px 0; height:calc(100vh - 170px); min-height:460px; }
.msg-list { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow-y:auto; }
.msg-list-head { padding:14px 16px; border-bottom:1px solid var(--line); }
.msg-list-head h2 { margin:0; font-size:18px; }
.msg-item { display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); align-items:center; }
.msg-item:hover, .msg-item.on { background:var(--blue-100); }
.msg-thumb { width:46px; height:46px; border-radius:8px; background:#eef2f7 center/cover no-repeat; flex-shrink:0; }
.msg-meta { flex:1; min-width:0; }
.msg-top { display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.msg-top .muted { font-size:12px; }
.msg-sub { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-last { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-item .dot { background:var(--green); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.msg-pane { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; }
.msg-pane.empty { align-items:center; justify-content:center; }
.msg-pane-head { padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.msg-thread { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; }
.bubble { max-width:72%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.4; position:relative; }
.bubble.them { background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.bubble.me { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.bubble .bt { display:block; font-size:10px; opacity:.65; margin-top:3px; }
.msg-compose { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.msg-compose input { flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; }

/* ----- messaging safety UI ----- */
.msg-head-right { display:flex; align-items:center; gap:10px; min-width:0; }
.msg-head-listing { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42vw; }
.msg-menu { position:relative; flex-shrink:0; }
.msg-menu-btn { background:transparent; border:0; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:8px; }
.msg-menu-btn:hover { background:var(--bg); color:var(--ink); }
.msg-menu-pop { display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:210px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px rgba(15,23,42,.18); padding:6px; }
.msg-menu-pop.open { display:block; }
.msg-menu-pop form { margin:0; }
.mm-item { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:0; text-align:left; padding:10px 12px;
  border-radius:8px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit; }
.mm-item:hover { background:var(--blue-100); }
.mm-item span { width:18px; text-align:center; }
.msg-safety { background:#fff7ed; border-bottom:1px solid #fed7aa; color:#9a3412; font-size:12.5px; line-height:1.45; padding:9px 16px; }
html[data-theme="dark"] .msg-safety { background:#241a10; border-color:#4a3417; color:#f0b878; }
.bubble.flagged { outline:2px solid var(--amber); outline-offset:1px; }
.bubble-warn { display:block; margin-top:5px; font-size:11px; font-weight:700; color:var(--amber-d); }
.bubble.me .bubble-warn { color:#ffe6b0; }
.bubble-img { display:block; max-width:220px; width:100%; border-radius:10px; margin-bottom:6px; }
.msg-attach { flex-shrink:0; width:40px; height:40px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.msg-attach:hover { background:var(--bg); color:var(--blue); }
.msg-attach svg { width:20px; height:20px; }
.msg-attach-preview { position:relative; display:inline-block; margin:8px 12px 0; }
.msg-attach-preview[hidden] { display:none; }
.msg-attach-preview img { max-height:84px; max-width:150px; border-radius:10px; border:1px solid var(--line); display:block; }
.msg-attach-rm { position:absolute; top:-7px; right:-7px; width:24px; height:24px; border:3px solid var(--card); border-radius:50%; background:#d9363e; color:#fff; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.msg-progress { display:flex; align-items:center; gap:10px; margin:8px 12px 0; }
.msg-progress[hidden] { display:none; }
.msg-progress-track { flex:1; height:6px; background:var(--line); border-radius:999px; overflow:hidden; }
.msg-progress-fill { height:100%; width:0; background:var(--blue); border-radius:999px; transition:width .12s ease; }
.msg-progress-txt { font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.msg-blocked { padding:14px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; text-align:center; }
.linkish { background:none; border:0; color:var(--blue); font-weight:700; cursor:pointer; font-family:inherit; padding:0; font-size:inherit; }
.report-overlay { position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.report-overlay[hidden] { display:none; }
.report-card { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.3); padding:22px; max-width:440px; width:100%; }
.report-card h3 { margin:0 0 4px; font-size:18px; font-weight:800; }
.rep-opt { display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; font-size:13.5px; cursor:pointer; }
.rep-opt input { margin-top:2px; }
.rep-opt:hover { background:var(--bg); }
.report-card textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; font-family:inherit; font-size:14px; margin-top:4px; resize:vertical; }
.rep-actions { display:flex; gap:10px; margin-top:14px; }
.rep-actions .btn { flex:1; }
.rep-actions .rep-cancel { background:var(--card); border:1px solid var(--line); color:var(--ink); }

/* admin reports list */
.rep-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.rep-row { display:flex; gap:14px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.rep-main { flex:1; min-width:240px; }
.rep-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.rep-reason { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:6px; background:#fee2e2; color:#b91c1c; }
.rep-reason.rep-auto { background:var(--amber-50); color:var(--amber-d); }
.rep-reason.rep-spam { background:#e2e8f0; color:#475569; }
.rep-status { font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--bg); color:var(--muted); text-transform:uppercase; }
.rep-status.st-open { background:var(--blue-100); color:var(--blue); }
.rep-status.st-actioned { background:#dcfce7; color:#166534; }
.rep-people { font-size:14px; }
.rep-details { font-size:13px; color:var(--ink); margin-top:4px; }
.rep-msg { font-size:13px; color:var(--muted); margin-top:6px; font-style:italic; }
.rep-msg-tag { font-style:normal; font-size:10.5px; font-weight:800; text-transform:uppercase; background:var(--bg); color:var(--muted); padding:1px 6px; border-radius:5px; margin-right:6px; }
.rep-acts { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; align-items:center; }
.rep-acts form { margin:0; }

/* ===== notifications ===== */
.notif-list { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.notif { display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:flex-start; }
.notif:last-child { border-bottom:0; }
.notif:hover { background:#f8fafc; }
.notif.unread { background:var(--blue-100); }
.notif-ic { width:40px; height:40px; flex-shrink:0; border-radius:11px; background:var(--blue-100); color:var(--blue); display:grid; place-items:center; }
.notif-ic svg { width:20px; height:20px; }
.notif-ic-listing, .notif-ic-offer { background:#fff7ed; color:#ea580c; }
.notif-ic-installment { background:#eef9f1; color:#15803d; }
.notif-ic-review { background:#fffaf0; color:#b8860b; }
html[data-theme="dark"] .notif-ic-listing, html[data-theme="dark"] .notif-ic-offer,
html[data-theme="dark"] .notif-ic-installment, html[data-theme="dark"] .notif-ic-review { background:rgba(49,84,231,.14); color:var(--blue); }
.notif-body { flex:1; }
.notif-time { font-size:12px; color:var(--muted); margin-top:3px; }

/* ===== polish ===== */
.topbar { box-shadow:0 2px 8px rgba(20,30,40,.12); }
.panel { box-shadow:0 1px 2px rgba(20,30,40,.05); }
.card { overflow:hidden; }
.card .thumb .thumb-img { transition:transform .25s ease; }
.card:hover .thumb .thumb-img { transform:scale(1.04); }
.card:hover { border-color:#d6deea; }
.btn-primary, .cta { box-shadow:0 1px 2px rgba(20,30,40,.12); }
.hero h1 { text-shadow:0 1px 2px rgba(0,0,0,.12); }

/* ===== responsive ===== */
@media (max-width:900px){
  .home{grid-template-columns:1fr;}
  .cat-sidebar{display:none;}            /* strip + tiles cover categories on mobile */
  .browse{grid-template-columns:1fr;}
  /* collapse the long filter rail so listings show first; reveal on tap */
  .filter-rail{position:static; display:none;}
  .filter-rail.open{display:flex;}
  .filter-toggle{display:block; width:100%; margin-bottom:14px;}
  .promo{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .profile{grid-template-columns:1fr;}
  .topbar-inner{position:relative; height:auto; min-height:56px; flex-wrap:wrap; gap:8px; padding-top:8px; padding-bottom:8px;}
  .brand{font-size:22px; margin-right:auto; min-width:0; flex-shrink:1;}
  .brand-logo{height:22px;}
  .brand-text{display:none;}
  .cta{padding:7px 12px; font-size:13.5px; white-space:nowrap; flex-shrink:0;}
  .menu-toggle{display:inline-flex; flex-shrink:0;}
  .cat-toggle{flex-shrink:0;}
  /* search always present as a full-width row under the logo/actions */
  .topbar-search{ order:6; flex-basis:100%; max-width:none; margin:2px 0 0; }
  /* Browse reappears as a row inside the mobile dropdown */
  .topbar-nav .mobile-only-link{ display:flex; }
  /* nav becomes a tap-to-open dropdown card */
  .topbar-nav{ position:absolute; top:calc(100% + 6px); right:8px; min-width:230px; max-width:82vw;
    flex-direction:column; align-items:stretch; gap:2px; margin-left:0; font-size:14px; font-weight:600;
    background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 30px rgba(20,30,40,.22); padding:6px; display:none; z-index:70; }
  .topbar-nav.open{ display:flex; }
  .topbar-nav a, .topbar-nav form button, .topbar-nav .theme-toggle{ color:var(--ink); display:flex; align-items:center; gap:10px;
    width:100%; padding:11px 12px; border-radius:8px; }
  .topbar-nav.open .theme-toggle{ color:var(--ink); }   /* beat the desktop #fff rule on the light mobile menu */
  .topbar-nav a:hover{ background:var(--blue-100); color:var(--ink); text-decoration:none; }
  .topbar-nav .icon{ background:none; width:auto; height:auto; border-radius:8px; font-size:14.5px; justify-content:flex-start; }
  .topbar-nav .icon .lbl{ font-size:14.5px; font-weight:600; }
  .topbar-nav .icon:hover{ transform:none; background:var(--blue-100); }
  .topbar-nav .lbl{ display:inline; }
  .topbar-nav .dot{ position:static; margin-left:auto; }
  .topbar-nav form{ width:100%; }
  .topbar-nav form button.link{ color:var(--red); width:100%; text-align:left; }
  .hero{padding:18px 14px 22px;}
  .hero h1{margin-bottom:10px;}   /* size handled by clamp() */
  .hero-search { padding:4px; border-radius:12px; }
  .hero-search .loc { min-width:100px; max-width:120px; padding:11px 8px 11px 12px; font-size:13px; }
  .hero-search .q { padding:11px 10px; font-size:14px; }
  .hero-search .cam { display:flex; padding:0 10px; }
  .hero-search .go { padding:0 16px; font-size:14px; border-radius:9px; }
  .hero .hot{gap:6px; margin-top:10px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  table{display:block; max-width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
  .grid.listview .card{flex-direction:column;}
  .grid.listview .card .thumb{width:100%; border-radius:var(--radius) var(--radius) 0 0;}
  .stat .n{font-size:24px;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .myad{flex-wrap:wrap;} .myad-actions{max-width:none; justify-content:flex-start;}
  .msgs{grid-template-columns:1fr; height:auto;}
  .msgs .msg-pane.empty{display:none;}
  .msgs.thread .msg-list{display:none;}
  .msg-thread{min-height:55vh;}
}
.backlink{display:none;}
@media (max-width:760px){ .backlink{display:inline;} }
@media (max-width:520px){
  .grid, .home .grid{grid-template-columns:1fr 1fr;}
  .card .thumb{font-size:30px;}   /* keep aspect-ratio from base rule */
  .card .body{padding:10px;}
  .card h3{font-size:14px;}
  .promo a{min-height:78px; padding:14px;}
  .brand{font-size:20px;}
}
/* account hub + performance: stack on small screens */
@media (max-width:900px){
  .acct-layout{ grid-template-columns:1fr; gap:14px; margin:14px 0; }
  .metrics{ grid-template-columns:1fr; }

  /* Rail: floating dropdown card (matches topbar nav style) */
  .acct-rail{
    position:fixed;
    top:70px; left:8px;
    width:min(290px,calc(100vw - 16px));
    max-height:calc(100dvh - 140px);
    z-index:1200;
    overflow-y:auto; overflow-x:hidden;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 12px 36px rgba(20,30,40,.25);
    padding:0 0 8px;
    /* animation: fade + subtle scale-up from top */
    opacity:0;
    transform:translateY(-8px) scale(.97);
    transform-origin:top left;
    transition:opacity .2s ease, transform .2s ease;
    pointer-events:none;
    visibility:hidden;
    display:block;
  }
  .acct-layout.rail-open .acct-rail{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    visibility:visible;
  }

  /* Close (×) button — absolute top-right corner of the card */
  .rail-close-btn{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 14px 10px;
    border-bottom:1px solid var(--line);
  }
  .rail-close-btn .rail-close-label{
    font-size:11px; font-weight:800; color:var(--muted);
    letter-spacing:.08em; text-transform:uppercase;
  }
  .rail-close-btn .rail-close-x{
    width:30px; height:30px; border-radius:50%;
    border:1px solid var(--line); background:var(--bg);
    display:grid; place-items:center; cursor:pointer; color:var(--ink);
    flex-shrink:0;
  }
  .rail-close-btn .rail-close-x svg{ width:14px; height:14px; }

  /* User card inside the floating dropdown */
  .acct-rail .acct-card{
    padding:14px 16px 12px; margin:0;
    border-radius:0; border:none;
    border-bottom:1px solid var(--line);
    box-shadow:none;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
    position:relative;
  }
  .acct-rail .acct-card .acct-gear{
    position:absolute; top:10px; right:10px;
  }
  .acct-rail .acct-avatar{ width:52px; height:52px; font-size:22px; border-radius:50%; }
  .acct-rail .acct-name{ font-size:15px; font-weight:800; }
  .acct-rail .acct-sub{ font-size:13px; }

  /* Nav items — larger touch targets, clean rows */
  .acct-rail .acct-nav{
    margin-top:0; border:none; border-radius:0; box-shadow:none;
    padding:6px;
  }
  .acct-rail .acct-nav a,
  .acct-rail .acct-nav .acct-logout-link{
    padding:12px 14px; font-size:14.5px; border-radius:10px;
    border-top:none; border-bottom:none;
  }
  .acct-rail .acct-nav a + a,
  .acct-rail .acct-nav a + form{ margin-top:1px; }
  .acct-rail .acct-nav .ai svg{ width:20px; height:20px; }
  .acct-rail .strength-card{ margin:8px; border-radius:12px; }

  /* Backdrop — lighter, no blur needed for a small dropdown */
  .rail-backdrop{
    display:none; position:fixed; inset:0; z-index:1199;
    background:rgba(0,0,0,.25);
  }
  .rail-backdrop.on{ display:block; }

  /* Toggle button — slim page-nav breadcrumb bar */
  .dash-menu-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; margin:0; padding:0 14px; height:46px; border:0;
    background:var(--card); color:var(--ink);
    border-radius:12px; border:1px solid var(--line);
    cursor:pointer; font-family:inherit;
    box-shadow:0 1px 4px rgba(20,30,40,.07);
  }
  .dmt-left{ display:flex; align-items:center; gap:10px; }
  .dmt-left svg{ color:var(--muted); flex-shrink:0; }
  .dmt-page{ font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100vw - 120px); display:inline-flex; align-items:center; gap:8px; }
  .dmt-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--blue-100); color:var(--blue); font-size:11px; font-weight:800; }
  .dmt-chev{ color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .acct-layout.rail-open .dash-menu-toggle{ border-color:var(--blue); color:var(--blue); }
  .acct-layout.rail-open .dmt-left svg,
  .acct-layout.rail-open .dmt-chev{ color:var(--blue); }
  .acct-layout.rail-open .dmt-page{ color:var(--blue); }
  .acct-layout.rail-open .dmt-chev{ transform:rotate(180deg); }
}
/* slim PPP TV banner on mobile — single tight line */
@media (max-width:760px){
  .ppptv-banner{ gap:8px; padding:7px 10px; font-size:12.5px; border-radius:9px; margin-top:10px; }
  .ppptv-banner-logo{ height:20px; padding:2px 5px; }
  .ppptv-full{ display:none; }
  .ppptv-short{ display:inline; }
  .ppptv-cta{ padding:4px 10px; font-size:11.5px; }
}
/* On mobile the header nav is a dropdown card. Flatten the account menu into
   inline rows, put the account section first, and align every row's icon. */
@media (max-width:760px){
  .topbar-nav .acct-toggle{ display:none; }              /* hide the redundant toggle */
  .acct-dd{ width:100%; order:-1; }                      /* account section first */
  .acct-menu{ position:static; display:block; min-width:0; padding:0; border:0; box-shadow:none;
    border-radius:0; border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:4px; }

  /* profile-header styling is shared — see the .acct-menu a.nav-profile base rule.
     On mobile, neutralise the negative margins used for the desktop full-bleed look. */
  .acct-menu a.nav-profile{ margin:0 0 4px; border-radius:0; padding:11px 12px; }

  /* one consistent icon column so all labels line up */
  .topbar-nav a, .topbar-nav form button{ padding:11px 12px; gap:13px; font-weight:600; font-size:14.5px; }
  .topbar-nav .ai{ width:22px; flex-shrink:0; text-align:center; font-size:16px; display:inline-flex; align-items:center; justify-content:center; }
  .topbar-nav .icon svg{ width:22px; height:22px; }
  .topbar-nav .mobile-ai{ display:inline-flex; }
  /* theme toggle + language switch become normal rows in the white dropdown */
  .topbar-nav .theme-toggle{ width:auto; height:auto; border-radius:8px; background:none; justify-content:flex-start;
    padding:11px 12px; font-size:18px; }
  .topbar-nav .theme-toggle:hover{ background:var(--blue-100); }
  .topbar-nav .lang-switch{ gap:6px; padding:8px 12px; }
  .topbar-nav .lang-switch a{ color:var(--blue); border:1px solid var(--line); padding:5px 12px; }
  .topbar-nav .lang-switch a.on{ background:var(--blue); color:#fff; border-color:var(--blue); }
  .topbar-nav .region-dd{ width:100%; }
  .topbar-nav .region-toggle{ width:100%; display:flex; align-items:center; gap:13px; text-align:left; background:none;
    color:var(--ink); padding:11px 12px; font-size:14.5px; border-radius:8px; }
  .topbar-nav .region-toggle:hover{ background:var(--blue-100); }
  .topbar-nav .region-toggle .region-globe{ width:22px; }
  .topbar-nav .region-toggle .region-globe svg{ width:22px; height:22px; }
  /* chevron that flips when the language panel is expanded */
  .topbar-nav .region-toggle::after{ content:''; margin-left:auto; width:8px; height:8px; border-right:2px solid currentColor;
    border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .18s; opacity:.5; }
  .topbar-nav .region-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg); }
  /* collapsed by default; the EN·KES button now reveals the language/currency form on tap */
  .topbar-nav .region-menu{ position:static; display:none; box-shadow:none; border:0; padding:6px 12px 12px; min-width:0; }
  .topbar-nav .region-menu.open{ display:block; }
}

/* ===== homepage: hero subtitle + amber emphasis ===== */
.hero-em { color:var(--amber); }
.hero-sub { color:rgba(255,255,255,.88); font-size:16px; font-weight:400; margin:0 auto 18px; max-width:580px; line-height:1.6; }

/* ===== homepage: trust badges ===== */
.trust-badges { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:900px; margin:22px auto 0; }
.tbadge { display:flex; align-items:center; gap:10px; text-align:left; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:11px 13px; backdrop-filter:blur(2px); }
.tbadge .tb-ic { font-size:22px; line-height:1; flex-shrink:0; }
.tbadge .tb-txt { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.tbadge .tb-txt strong { color:#fff; font-size:13.5px; }
.tbadge .tb-txt small { color:#cdddff; font-size:12px; }
@media (max-width:760px){
  .trust-badges { grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }
  .tbadge { padding:9px 11px; gap:8px; }
  .tbadge .tb-ic { font-size:19px; }
  .tbadge .tb-txt strong { font-size:12.5px; }
  .tbadge .tb-txt small { font-size:11px; }
  .hero-sub { font-size:13px; margin-bottom:14px; }
}

/* ===== homepage: "be the first to post" rich empty state ===== */
.be-first { text-align:center; padding:30px 20px; }
.be-first .bf-box { color:var(--blue); opacity:.85; margin-bottom:8px; }
.be-first h3 { margin:4px 0 14px; font-size:19px; }
.be-first .bf-list { list-style:none; padding:0; margin:0 0 18px; display:flex; gap:10px;
  flex-wrap:wrap; justify-content:center; }
.be-first .bf-list li { background:var(--blue-100); color:var(--blue-d); border-radius:999px;
  padding:7px 14px; font-size:13.5px; font-weight:600; }
@media (max-width:520px){ .be-first .bf-list { flex-direction:column; align-items:center; gap:7px; } }

/* ===== checkout: payment options + paid badge ===== */
.pay-opts { display:flex; flex-direction:column; gap:8px; margin:6px 0 12px; }
.pay-opt { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; cursor:pointer; transition:border-color .15s, background .15s; }
.pay-opt:hover { border-color:var(--blue); background:var(--blue-100); }
.pay-opt input { margin-top:3px; flex-shrink:0; accent-color:var(--blue); }
.pay-opt small { font-size:12px; }
.paid-badge { display:inline-block; background:#dcfce7; color:#166534; border:1px solid #bbf7d0;
  border-radius:999px; padding:6px 14px; font-weight:700; font-size:13.5px; }

/* ===== footer: app badges + tagline ===== */
.footer-app { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:22px; padding-top:18px; border-top:1px solid #2b3744; }
.footer-app .fa-text { display:flex; flex-direction:column; gap:2px; }
.footer-app .fa-text strong { color:#fff; font-size:15px; }
.footer-app .fa-text .muted { color:#9aa6b1; font-size:13px; }
.fa-badges { display:flex; gap:10px; flex-wrap:wrap; }
.store-badge { display:inline-flex; align-items:center; gap:9px; background:#0b1119; border:1px solid #2b3744;
  border-radius:10px; padding:7px 14px; color:#e8eef4; cursor:default; }
.store-badge .sb-ic { font-size:18px; line-height:1; }
.store-badge .sb-txt { display:flex; flex-direction:column; line-height:1.2; }
.store-badge .sb-txt small { font-size:10px; color:#9aa6b1; text-transform:uppercase; letter-spacing:.4px; }
.store-badge .sb-txt strong { font-size:14px; color:#fff; }
.footer-tagline { text-align:center; color:#cfe0ff; font-weight:700; letter-spacing:.4px; margin-top:18px;
  padding-top:16px; border-top:1px solid #2b3744; }
.footer-tagline + .footer-countries { border-top:0; margin-top:14px; padding-top:0; }
@media (max-width:760px){
  .footer-app { justify-content:center; text-align:center; }
  .footer-app .fa-text { align-items:center; }
}

/* dark theme tweaks for new components */
html[data-theme="dark"] .pay-badge,
html[data-theme="dark"] .paid-badge { background:rgba(34,197,94,.14); color:#86efac; border-color:rgba(34,197,94,.3); }
html[data-theme="dark"] .be-first .bf-list li { background:rgba(37,99,235,.16); color:#bfdbfe; }

/* ===== navbar quick language toggle ===== */
/* The lang pill is kept off the top bar so the logo + Post Ad + menu button
   always fit on one row, even on small phones. Language lives in the menu. */
.lang-quick { display:none; }
@media (max-width:760px){
  .lang-quick { display:none; }
  .topbar-inner .cta { order:4; }
  .topbar-inner .menu-toggle { order:5; }
  .topbar-search { order:7; }
}

/* ===== mobile side-menu: authoritative normalization (fixes stray gaps) ===== */
@media (max-width:760px){
  .topbar-nav.open { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:2px; height:auto; max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* every row is a uniform full-width item — no width:auto / auto-margins / flex-grow */
  .topbar-nav.open > a,
  .topbar-nav.open > .acct-dd,
  .topbar-nav.open > .region-dd,
  .topbar-nav.open > form { width:100%; margin:0; flex:0 0 auto; }
  /* CRITICAL: the desktop circular-icon style sets aspect-ratio:1; left on, a full-width
     row becomes a giant square. Reset it so icon rows are normal height. */
  .topbar-nav.open .icon { aspect-ratio:auto !important; width:100%; height:auto; min-height:0;
    border-radius:8px; justify-content:flex-start; flex:0 0 auto; }
  .topbar-nav.open .icon svg { width:22px; height:22px; flex:0 0 auto; }
  .topbar-nav.open a, .topbar-nav.open .acct-menu a, .topbar-nav.open form button { min-height:0; }
  /* language/region picker lives inside the toggled menu (off the top bar) */
  .topbar-nav .region-dd { display:block; width:100%; }
  .topbar-nav.open .region-dd .region-toggle { width:100%; justify-content:flex-start; }
}

/* ===== Account Settings page (mockup look) ===== */
.settings-hero { background:linear-gradient(120deg,var(--blue),var(--blue-d)); color:#fff; }
.settings-hero .sh-inner { display:flex; align-items:center; gap:16px; padding:22px 18px 26px; }
.sh-ic { width:54px; height:54px; flex-shrink:0; border-radius:14px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; }
.sh-ic svg { width:28px; height:28px; }
.settings-hero h1 { margin:0; font-size:26px; font-weight:800; }
.settings-hero p { margin:4px 0 0; color:#dbe6ff; font-size:14px; max-width:640px; }

.settings-wrap { padding-top:22px; }
.settings-layout { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }

/* left rail */
.srail-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 18px; text-align:center; }
.srail-avatar { width:84px; height:84px; margin:0 auto 12px; border-radius:50%; background:var(--blue-100);
  color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:34px;
  overflow:hidden; border:1px solid var(--line); }
.srail-name { font-weight:800; font-size:17px; }
.srail-badge { display:inline-flex; align-items:center; gap:6px; margin-top:7px; font-size:12.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; }
.srail-badge .vdot { width:8px; height:8px; border-radius:50%; }
.srail-badge.pending { background:var(--amber-50); color:var(--amber-d); }
.srail-badge.pending .vdot { background:var(--amber); }
.srail-badge.verified { background:#dcfce7; color:#166534; }
.srail-badge.verified .vdot { background:#16a34a; }
.srail-badge.get { background:var(--blue-100); color:var(--blue); }
.srail-badge.get .vdot { background:var(--blue); }
.srail-since { color:var(--muted); font-size:13px; margin-top:8px; }
.srail-public { display:inline-flex; align-items:center; gap:5px; margin-top:12px; padding-top:13px;
  border-top:1px solid var(--line); width:100%; justify-content:center; color:var(--blue); font-weight:600; font-size:13.5px; }
.srail-nav { margin-top:14px; }

.strength-card { margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; }
.str-head { display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; }
.str-tag { margin-left:auto; font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:999px; }
.str-tag.str-excellent, .str-tag.str-good { background:#dcfce7; color:#166534; }
.str-tag.str-fair { background:var(--amber-50); color:var(--amber-d); }
.str-tag.str-getting-started { background:#fee2e2; color:#b91c1c; }
.str-sub { color:var(--muted); font-size:12.5px; margin:6px 0 11px; }
.str-bar { height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.str-bar span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),#22c55e); }
.str-list { list-style:none; padding:0; margin:13px 0 0; }
.str-list li { display:flex; align-items:center; gap:8px; padding:7px 0; font-size:13.5px; color:var(--muted);
  border-top:1px solid var(--line); }
.str-list li:first-child { border-top:0; }
.str-list li .str-name { flex:1; }
.str-list li .str-mark { width:20px; height:20px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; }
.str-list li.done { color:var(--ink); }
.str-list li.done .str-mark { background:#16a34a; border-color:#16a34a; color:#fff; }
.str-ic { display:inline-flex; align-items:center; justify-content:center; color:var(--blue); }
.str-ic svg { width:16px; height:16px; }

/* main column cards */
.settings-main { display:flex; flex-direction:column; gap:18px; }
.scard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.scard-h { display:flex; align-items:center; gap:9px; margin:0; font-size:17px; }
.scard-ic { display:inline-flex; align-items:center; justify-content:center; color:var(--blue); }
.scard-ic svg { width:19px; height:19px; }
.theme-opts button svg { width:16px; height:16px; }
.pw-eye svg { width:17px; height:17px; display:block; }
.field-hint { color:var(--muted); font-size:12px; margin:5px 0 0; line-height:1.4; }
/* sidebar logout (matches .acct-nav links, danger-tinted) */
.acct-nav .acct-logout-form { margin:0; }
.acct-nav .acct-logout-link { display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px;
  border:0; border-top:1px solid var(--line); background:none; cursor:pointer; text-align:left;
  font-family:inherit; font-weight:600; font-size:14.5px; color:#dc2626; }
.acct-nav .acct-logout-link:hover { background:#fef2f2; }
.acct-nav .acct-logout-link .ai { width:22px; display:inline-flex; align-items:center; justify-content:center; color:#dc2626; }
.acct-nav .acct-logout-link .ai svg { width:18px; height:18px; }
html[data-theme="dark"] .acct-nav .acct-logout-link:hover { background:rgba(220,38,38,.12); }
.scard-sub { color:var(--muted); font-size:13.5px; margin:6px 0 14px; }
.scard-foot { color:var(--muted); font-size:12.5px; margin:12px 0 0; }
.settings-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }

.sec-sub { display:block; font-weight:700; font-size:14px; margin-bottom:10px; }
.pw-wrap { position:relative; }
.pw-wrap input { width:100%; padding:10px 40px 10px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; font-family:inherit; background:var(--card); color:var(--ink); }
.pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0;
  cursor:pointer; font-size:15px; opacity:.5; padding:4px 6px; line-height:1; }
.pw-eye:hover, .pw-eye.on { opacity:1; }
.sec-links { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.sec-links form { margin:0; margin-left:auto; }

@media (max-width:980px){
  .settings-layout { grid-template-columns:1fr; }
  .settings-cols { grid-template-columns:1fr; }
}
@media (max-width:760px){
  .settings-hero .sh-inner { padding:18px 0 20px; gap:12px; }
  .settings-hero h1 { font-size:21px; }
  .sh-ic { width:46px; height:46px; }
}
html[data-theme="dark"] .str-tag.str-excellent, html[data-theme="dark"] .str-tag.str-good { background:rgba(34,197,94,.15); color:#86efac; }
html[data-theme="dark"] .srail-badge.verified { background:rgba(34,197,94,.15); color:#86efac; }

/* ===== events & ticketing ===== */
.events-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:18px 0 4px; }
.ev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:16px; }
.ev-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.15s; }
.ev-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,30,40,.12); }
.ev-banner { height:130px; background:linear-gradient(135deg,var(--blue),var(--blue-d)); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; font-size:40px; }
.ev-body { display:flex; flex-direction:column; gap:4px; padding:13px 14px; }
.ev-date { color:var(--blue); font-weight:700; font-size:12.5px; }
.ev-title { font-size:15.5px; line-height:1.3; }
.ev-from { margin-top:4px; font-weight:700; font-size:13.5px; }

.ev-detail { display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; margin-top:16px; }
.ev-hero { height:260px; border-radius:var(--radius); background:linear-gradient(135deg,var(--blue),var(--blue-d));
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.ev-hero-emoji { font-size:64px; }
.ev-meta { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:14px; margin-bottom:14px; }
.ev-desc { white-space:pre-wrap; line-height:1.7; }
.ev-buy { position:sticky; top:16px; }
.tk-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.tk-row:first-of-type { border-top:0; }
.tk-info { display:flex; flex-direction:column; gap:1px; }
.tk-price { font-weight:700; }
.tk-row input { width:64px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit;
  background:var(--card); color:var(--ink); text-align:center; }
.tk-row.soldout { opacity:.5; }
.ev-buy input[name=name], .ev-buy input[name=email], .ev-buy input[name=phone] { width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; margin-top:8px; background:var(--card); color:var(--ink); }

.ev-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tt-edit { display:grid; grid-template-columns:1.8fr 1fr 1.3fr 1fr; gap:8px; margin-bottom:8px; }
.tt-edit input, .tt-edit select { width:100%; min-width:0; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; background:var(--card); color:var(--ink); }
.tt-expiry { grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--muted); margin-top:2px; }
.tt-expiry span { flex-shrink:0; }
.tt-expiry input { max-width:230px; }
.tcard-close { display:block; color:var(--blue); font-size:11.5px; }
.tcard-closed { display:block; color:var(--amber-d); font-weight:800; font-size:11.5px; }
/* event public/private chooser */
.vis-opts { display:grid; gap:10px; }
.vis-opt { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; }
.vis-opt:hover { border-color:var(--blue); }
.vis-opt input { margin-top:3px; flex-shrink:0; width:auto; }
.vis-opt > span { display:flex; flex-direction:column; gap:2px; }
.vis-opt strong { font-size:14.5px; }
.vis-opt small { color:var(--muted); font-size:12.5px; line-height:1.4; }
.vis-opt:has(input:checked) { border-color:var(--blue); box-shadow:0 0 0 3px rgba(49,84,231,.12); background:var(--blue-100); }
.ev-private-badge { display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--amber-d); background:var(--amber-50); padding:3px 10px; border-radius:7px; }
/* RSVP guest list */
.guest-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 18px; }
.guest-stats > div { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; min-width:0; }
.guest-stats strong { display:block; font-size:22px; font-weight:900; letter-spacing:-.02em; }
.guest-stats span { font-size:11.5px; color:var(--muted); }
.guest-forms { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:8px; align-items:start; }
.guest-card { border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.guest-card h3 { margin:0 0 10px; font-size:15px; }
.ga-grid { display:grid; grid-template-columns:96px 1fr; gap:8px 10px; margin-bottom:10px; align-items:end; }
.ga-grid > input[name=name], .ga-grid > input[name=email] { grid-column:1 / -1; }
.ga-num { position:relative; display:block; }
.ga-num > span { position:absolute; top:-7px; left:9px; font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); background:var(--card); padding:0 5px; pointer-events:none; }
.ga-num > input { width:100%; text-align:center; font-weight:700; }
/* Beautified CSV file picker */
.csv-template { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--blue); margin-bottom:10px; }
.csv-template span { font-size:14px; }
.file-drop { position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px dashed var(--line); border-radius:12px; background:var(--bg); cursor:pointer; transition:border-color .15s, background .15s; }
.file-drop:hover { border-color:var(--blue); }
.file-drop.drag { border-color:var(--blue); background:var(--blue-100); }
.file-drop.has-file { border-style:solid; border-color:var(--green, #16a34a); background:rgba(22,163,74,.06); }
.file-drop .fd-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.file-drop .fd-ic { font-size:24px; line-height:1; }
.file-drop .fd-text { display:flex; flex-direction:column; min-width:0; }
.file-drop .fd-text strong { font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-drop .fd-text small { font-size:11.5px; color:var(--muted); }
.reuse-card { margin-bottom:8px; }
.reuse-row { display:flex; gap:8px; flex-wrap:wrap; }
.reuse-row select { flex:1; min-width:180px; }
.cohost-card { margin-bottom:8px; }
.cohost-list { display:flex; flex-direction:column; gap:7px; margin-bottom:4px; }
.cohost-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:8px 12px; font-size:14px; flex-wrap:wrap; }
.cohost-who { min-width:0; }
.cohost-tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); background:var(--bg); padding:1px 7px; border-radius:6px; vertical-align:middle; }
.cohost-tag.ok { color:#166534; background:#dcfce7; }
/* Image crop modal (Cropper.js) */
.crop-overlay { position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.crop-overlay[hidden] { display:none; }
.crop-card { background:var(--card); border-radius:16px; padding:14px; width:min(560px,100%); max-height:90vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.crop-stage { background:#0b1119; border-radius:10px; overflow:hidden; max-height:60vh; }
.crop-stage img { max-width:100%; }
.crop-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.photo-cell .photo-crop { position:absolute; bottom:6px; right:6px; background:rgba(17,24,39,.78); color:#fff; border:0; border-radius:8px; font-size:11px; font-weight:700; padding:3px 7px; cursor:pointer; }
.ev-type-badge { display:inline-block; margin-left:6px; font-size:11px; font-weight:800; color:var(--blue); background:var(--blue-100); padding:1px 8px; border-radius:7px; vertical-align:middle; }
/* ===== My events — redesigned ===== */
.me-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; flex-wrap:wrap; }
.me-head-l { display:flex; align-items:center; gap:16px; }
.me-title-icon { width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,#eef0ff,#e1dcff); color:var(--blue); display:grid; place-items:center; box-shadow:0 5px 18px rgba(25,34,79,.08); flex-shrink:0; }
.me-title-icon svg { width:30px; height:30px; }
html[data-theme="dark"] .me-title-icon { background:linear-gradient(135deg,#1d214a,#2a1f5c); }
.me-h1 { margin:0; font-size:32px; font-weight:900; letter-spacing:-.03em; line-height:1; }
.me-sub { margin:7px 0 0; color:var(--muted); font-size:15px; font-weight:500; }
.me-create { height:54px; padding:0 24px; border-radius:13px; background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; font-weight:800; font-size:15px; display:inline-flex; align-items:center; gap:9px; box-shadow:0 12px 24px rgba(49,84,231,.28); transition:transform .18s ease, box-shadow .18s ease; }
.me-create:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(49,84,231,.36); color:#fff; }
.me-create svg { width:19px; height:19px; }

.me-list { display:flex; flex-direction:column; gap:16px; }
.me-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 35px rgba(25,34,79,.07); padding:20px; display:grid; grid-template-columns:150px 1fr; gap:22px; transition:border-color .15s ease, box-shadow .15s ease; }
.me-card:hover { border-color:rgba(49,84,231,.32); box-shadow:0 16px 42px rgba(25,34,79,.11); }
.me-poster { width:150px; height:150px; border-radius:14px; overflow:hidden; background:#0b1119 center/cover no-repeat; box-shadow:0 10px 24px rgba(15,20,50,.18); display:grid; place-items:center; color:#fff; text-align:center; padding:10px; flex-shrink:0; }
.me-poster.ph { background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.62)),linear-gradient(135deg,#1c2348,#05070f); }
.me-poster span { font-size:16px; font-weight:900; line-height:1.18; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.me-main { min-width:0; }
.me-title { margin:2px 0 10px; font-size:22px; font-weight:900; letter-spacing:-.02em; }
.me-title a { color:var(--ink); }
.me-title a:hover { color:var(--blue); }
.me-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:15px; font-weight:500; }
.me-meta > span { display:inline-flex; align-items:center; gap:6px; }
.me-meta svg { width:16px; height:16px; opacity:.65; }
.me-dot { color:#9aa1b8; font-weight:900; }
.me-stats { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:16px; color:var(--muted); font-size:15px; font-weight:500; }
.me-stats strong { color:var(--ink); font-weight:900; }
.me-status { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:800; }
.me-status.live { color:#067a52; background:#d7f8ea; }
.me-status.ended { color:#596174; background:#eef0f5; }
.me-status.draft { color:#374151; background:#eef0f5; }
.me-status.pending { color:#92400e; background:#fef3c7; }
.me-status.cancelled { color:#b91c1c; background:#fee2e2; }
.me-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.me-actions .inline { display:inline-flex; }
.me-btn { height:44px; border-radius:11px; padding:0 16px; font-size:14px; font-weight:800; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink); white-space:nowrap; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.me-btn:hover { transform:translateY(-1px); border-color:rgba(49,84,231,.32); background:var(--bg); color:var(--ink); }
.me-btn.primary { background:linear-gradient(135deg,var(--blue),var(--blue-d)); border-color:transparent; color:#fff; box-shadow:0 10px 22px rgba(49,84,231,.22); }
.me-btn.primary:hover { color:#fff; }
.me-btn.boost { background:linear-gradient(135deg,#7b2ff7,#4b35f4); border-color:transparent; color:#fff; }
.me-btn.boost:hover { color:#fff; }
.me-btn.boosted { background:linear-gradient(135deg,#f59e0b,#d97706); border-color:transparent; color:#fff; }
.me-btn.danger { color:#e32424; border-color:#ffb3b3; background:var(--card); }
.me-btn.danger:hover { background:#fff1f1; color:#e32424; }
html[data-theme="dark"] .me-btn.danger:hover { background:#3a1212; }

.me-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; color:var(--muted); font-size:14px; font-weight:500; flex-wrap:wrap; }
.me-pager { display:flex; align-items:center; gap:8px; }
.me-pg { min-width:40px; height:40px; padding:0 10px; border:1px solid var(--line); background:var(--card); border-radius:11px; display:grid; place-items:center; cursor:pointer; color:var(--muted); font-weight:800; font-size:14px; }
.me-pg:hover:not(:disabled) { border-color:rgba(49,84,231,.32); }
.me-pg.active { background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(49,84,231,.24); }
.me-pg:disabled { opacity:.45; cursor:default; }
.me-perpage { height:40px; border:1px solid var(--line); background:var(--card); border-radius:11px; padding:0 12px; color:var(--ink); font-weight:600; }

@media (max-width:900px){
  .me-h1 { font-size:27px; }
  .me-card { grid-template-columns:110px 1fr; gap:16px; padding:16px; }
  .me-poster { width:110px; height:110px; }
  .me-title { font-size:18px; }
  .me-meta, .me-stats { font-size:14px; }
  .me-btn { height:40px; padding:0 13px; font-size:13px; }
}
@media (max-width:600px){
  .me-head { flex-direction:column; align-items:stretch; }
  .me-create { width:100%; justify-content:center; }
  .me-card { grid-template-columns:1fr; }
  .me-poster { width:100%; height:190px; }
  .me-foot { flex-direction:column; align-items:stretch; }
  .me-pager { justify-content:center; }
  .me-perpage { width:100%; }
}
.import-preview { border:1px solid var(--amber); background:var(--amber-50); border-radius:14px; padding:14px 16px; margin:6px 0 16px; }
html[data-theme="dark"] .import-preview { background:#241a10; border-color:#4a3417; }
.import-errors { max-height:220px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:12.5px; }
.ie-row { padding:3px 0; border-bottom:1px solid var(--line); }
.ie-row:last-child { border-bottom:0; }
.ie-line { font-weight:700; color:var(--muted); margin-right:4px; }
.ie-err { color:#d92d20; font-weight:600; }
.guest-list { display:flex; flex-direction:column; gap:8px; }
.guest-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.gr-main { flex:1; min-width:150px; display:flex; flex-direction:column; }
.gr-sub { font-size:12.5px; }
.gr-status { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:7px; text-transform:capitalize; background:var(--bg); color:var(--muted); }
.gr-status.st-confirmed { background:#dcfce7; color:#166534; }
.gr-status.st-checked_in { background:var(--blue-100); color:var(--blue); }
.gr-status.st-declined { background:#fee2e2; color:#b91c1c; }
.gr-del { color:#d92d20; }
@media (max-width:600px){ .guest-stats{ grid-template-columns:1fr 1fr; } .guest-forms{ grid-template-columns:1fr; } }
/* Public RSVP page */
.rsvp-wrap { max-width:520px; margin:30px auto; padding:0 16px; }
.rsvp-card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 28px; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.rsvp-card h1 { font-size:24px; margin:.1em 0 .3em; letter-spacing:-.02em; }
.rsvp-icon { font-size:44px; line-height:1; margin-bottom:6px; }
.rsvp-eyebrow { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.rsvp-title { font-size:26px; margin:.15em 0 .5em; letter-spacing:-.02em; }
.rsvp-meta { display:inline-flex; flex-direction:column; gap:5px; text-align:left; font-size:14.5px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:13px 18px; margin-bottom:18px; }
.rsvp-greet { font-size:16px; margin:6px 0 14px; }
.rsvp-form, .rsvp-decline, .rsvp-otp { margin:0 0 10px; }
.rsvp-party { display:flex; flex-direction:column; gap:6px; text-align:left; margin-bottom:14px; }
.rsvp-party select { padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:var(--card); font-size:15px; }
.btn-block { display:block; width:100%; }
.rsvp-fine { font-size:12.5px; margin-top:12px; }
.rsvp-otp { display:flex; flex-direction:column; gap:12px; align-items:center; }
.rsvp-otp input { width:200px; text-align:center; font-size:28px; letter-spacing:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); font-weight:800; }
.rsvp-resend { margin-top:4px; }
.linkbtn { background:none; border:0; color:var(--blue); font-weight:600; cursor:pointer; font-size:14px; }
/* Submit-in-progress spinner (forms that send an email, etc.) */
.btn-spin { display:inline-block; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; margin-right:8px; animation:btnspin .6s linear infinite; }
@keyframes btnspin { to { transform:rotate(360deg); } }
.is-sending { opacity:.9; cursor:progress; pointer-events:none; }
.comp-tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.02em; color:#065f46; background:#d1fae5; padding:2px 8px; border-radius:7px; vertical-align:middle; }
html[data-theme="dark"] .comp-tag { color:#6ee7b7; background:#0c3a2c; }
/* RSVP builder templates */
.rsvp-templates { border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:18px;
  background:var(--bg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 5%, var(--card)), var(--card)); }
.rsvp-tpl-head { font-size:13.5px; font-weight:800; margin-bottom:12px; letter-spacing:-.01em; }
.rsvp-tpl-head small { font-weight:600; }
.rsvp-tpl-row { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.rsvp-tpl-row::-webkit-scrollbar { height:6px; }
.rsvp-tpl-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.rsvp-tpl-row::-webkit-scrollbar-track { background:transparent; }
.rsvp-tpl { position:relative; flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:96px; padding:14px 10px 12px; border:1.5px solid var(--line); border-radius:16px; background:var(--card); cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.rsvp-tpl:hover { transform:translateY(-3px); border-color:var(--blue); border-color:color-mix(in srgb, var(--blue) 45%, var(--line)); box-shadow:0 10px 22px rgba(16,24,40,.10); }
.rsvp-tpl:active { transform:translateY(-1px); }
.rsvp-tpl.on { border-color:var(--blue); color:var(--blue);
  background:var(--blue-100);
  background:color-mix(in srgb, var(--blue) 9%, var(--card));
  box-shadow:0 8px 20px rgba(49,84,231,.24);
  box-shadow:0 8px 20px color-mix(in srgb, var(--blue) 24%, transparent); }
.rsvp-tpl .rt-ic { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; font-size:24px; line-height:1;
  background:var(--bg); transition:transform .16s ease; }
.rsvp-tpl:hover .rt-ic { transform:scale(1.06); }
.rsvp-tpl.on::after { content:"✓"; position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(49,84,231,.4); }
.rsvp-tpl:nth-child(1) .rt-ic { background:rgba(236,72,153,.14); }
.rsvp-tpl:nth-child(2) .rt-ic { background:rgba(245,158,11,.16); }
.rsvp-tpl:nth-child(3) .rt-ic { background:rgba(20,184,166,.16); }
.rsvp-tpl:nth-child(4) .rt-ic { background:rgba(99,102,241,.15); }
.rsvp-tpl:nth-child(5) .rt-ic { background:rgba(139,92,246,.15); }
.rsvp-tpl:nth-child(6) .rt-ic { background:rgba(59,130,246,.15); }
.rsvp-tpl:nth-child(7) .rt-ic { background:rgba(34,197,94,.15); }
.rsvp-tpl:nth-child(8) .rt-ic { background:rgba(100,116,139,.15); }
.confirm-field { margin:2px 0 14px; }
.confirm-input { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:13.5px; color:var(--ink); }
.photo-cell.poster .photo-replace { position:absolute; left:8px; bottom:8px; font-size:11.5px; font-weight:700; color:#fff; background:rgba(17,24,39,.72); padding:4px 9px; border-radius:8px; pointer-events:none; }
/* Admin analytics */
.an-range { display:inline-flex; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:3px; }
.an-range a { padding:5px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); }
.an-range a.on { background:var(--blue); color:#fff; }
.an-bars { display:flex; flex-direction:column; gap:9px; }
.an-row { display:grid; grid-template-columns:minmax(120px,1.4fr) 3fr auto; align-items:center; gap:12px; }
.an-label { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-label svg, .an-label img { width:16px; height:16px; vertical-align:-3px; }
.an-bar-wrap { background:var(--bg); border-radius:99px; height:12px; overflow:hidden; }
.an-bar { height:100%; border-radius:99px; background:linear-gradient(90deg, var(--blue), var(--blue-d)); min-width:6px; }
.an-nums { text-align:right; font-size:12.5px; white-space:nowrap; }
.an-nums strong { font-size:14px; display:inline-block; margin-right:6px; }
.an-nums span { color:var(--muted); }
.an-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.an-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.an-table td { padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.an-table tr:last-child td { border-bottom:0; }
.an-rank { color:var(--muted); width:24px; font-weight:700; }
.an-td-num { text-align:right; font-weight:700; white-space:nowrap; }
@media (max-width:680px){ .an-grid { grid-template-columns:1fr; } .an-row { grid-template-columns:minmax(90px,1.2fr) 2fr auto; } }
/* Admin suspend control */
.usr-suspend { display:flex; flex-direction:column; gap:5px; }
.usr-suspend input, .usr-suspend select { font-size:12px; padding:5px 7px; }
.usr-susp-badge { display:inline-block; font-size:11px; font-weight:800; color:#b91c1c; background:#fee2e2; padding:2px 7px; border-radius:6px; }
.rsvp-alert { border-radius:11px; padding:10px 14px; margin-bottom:14px; font-size:14px; font-weight:600; background:var(--bg); border:1px solid var(--line); text-align:left; }
.rsvp-alert.ok { background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.rsvp-alert.err { background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
/* Door check-in */
.gate-search { display:flex; gap:8px; margin:6px 0 4px; }
.gate-search input { flex:1; }
.gate-admit { display:flex; gap:6px; align-items:center; }
.gate-admit input { width:64px; text-align:center; }
/* Complimentary tickets */
.comp-grid { display:grid; grid-template-columns:1.3fr 1.5fr auto 90px; gap:8px; margin-bottom:8px; }
.comp-note { width:100%; margin-bottom:10px; }
.comp-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.comp-flag { font-size:12.5px; font-weight:600; color:var(--muted); }
.comp-flag.ok { color:#166534; }
.comp-cta { border:1px dashed var(--line); border-radius:14px; padding:16px 18px; background:var(--bg); }
.comp-cta h3 { margin:0 0 4px; font-size:16px; }
@media (max-width:640px){ .comp-grid { grid-template-columns:1fr 1fr; } }

.myev-list { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.myev { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.myev-thumb { flex:0 0 72px; width:72px; aspect-ratio:3/4; border-radius:9px; overflow:hidden; display:flex;
  align-items:center; justify-content:center; font-size:26px; background:linear-gradient(135deg,#1a2350,#0b1430); color:#fff; }
.myev-main { flex:1; min-width:160px; }
.acct-nav .nav-count { margin-left:auto; background:var(--blue-100); color:var(--blue-d); font-size:12px; font-weight:800;
  border-radius:999px; padding:1px 9px; }
.myev-stats { display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; font-size:13.5px; color:var(--muted); }
.myev-actions { display:flex; gap:8px; flex-wrap:wrap; }

.ev-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.ev-kpis .kpi { text-align:center; }
.kpi-n { font-size:22px; font-weight:800; }
.kpi-l { color:var(--muted); font-size:12.5px; margin-top:3px; }
.ev-stats-table { width:100%; border-collapse:collapse; }
.ev-stats-table th, .ev-stats-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
.ev-stats-table th { color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; }

.scan-form { display:flex; gap:8px; margin-top:14px; }
.scan-form input { flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-family:inherit;
  font-size:16px; letter-spacing:1px; background:var(--card); color:var(--ink); }
.scan-result { display:flex; align-items:center; gap:14px; padding:16px; border-radius:12px; margin:14px 0; }
.scan-result.ok { background:#dcfce7; color:#166534; }
.scan-result.bad { background:#fee2e2; color:#b91c1c; }
.scan-ic { width:44px; height:44px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#fff; }
.scan-result.ok .scan-ic { background:#16a34a; }
.scan-result.bad .scan-ic { background:#dc2626; }

.ticket-poster { display:block; width:100%; border-radius:12px; margin:0 0 16px; object-fit:cover; max-height:280px; }
.ticket-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.ticket-stub { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px dashed var(--line);
  border-radius:12px; padding:14px 16px; background:var(--blue-100); }
.ticket-stub.used { opacity:.55; }
.ts-left { display:flex; flex-direction:column; }
.ts-type { font-weight:700; }
.ts-price { color:var(--muted); font-size:13px; }
.ts-code { text-align:right; display:flex; flex-direction:column; }
.ts-code-val { font-family:monospace; font-size:18px; font-weight:700; letter-spacing:1px; color:var(--blue-d); }

@media (max-width:860px){
  .ev-detail { grid-template-columns:1fr; }
  .ev-buy { position:static; }
  .ev-kpis { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .ev-form-grid { grid-template-columns:1fr; }
  .tt-edit { grid-template-columns:1fr 1fr; }
}
html[data-theme="dark"] .scan-result.ok { background:rgba(34,197,94,.15); color:#86efac; }
html[data-theme="dark"] .scan-result.bad { background:rgba(239,68,68,.15); color:#fca5a5; }

/* ===== events: Mookh-inspired listing & ticketing UI ===== */
:root { --ev-acc:#f3df4e; --ev-acc-d:#e3cb2c; --ev-soft:#fdf7c9; }
html[data-theme="dark"] { --ev-soft:#2b2710; }

.btn-amber { background:var(--ev-acc); color:#3a2a00 !important; border:1px solid var(--ev-acc-d); font-weight:800; box-shadow:0 3px 0 var(--ev-acc-d); }
.btn-amber:hover { background:var(--ev-acc-d); box-shadow:0 2px 0 var(--ev-acc-d); transform:translateY(1px); }
.btn-ghost { background:var(--card); color:var(--ink); border:1px solid var(--line); font-weight:700; }
.btn-ghost:hover { border-color:var(--ink); }

/* date badge (used on cards, hero, detail) */
/* calendar badge — default (hero, on white): white box, gold weekday TEXT */
.date-badge { display:inline-flex; flex-direction:column; align-items:center; flex-shrink:0; width:56px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px 0 7px; line-height:1; text-align:center; box-shadow:0 2px 8px rgba(20,30,40,.08); }
.date-badge .db-dow { font-size:11px; font-weight:800; color:#c69536; text-transform:capitalize; }
.date-badge .db-day { font-size:24px; font-weight:800; color:var(--ink); padding:3px 0 2px; }
.date-badge .db-mon { font-size:11px; font-weight:700; color:var(--muted); text-transform:capitalize; }
/* on a dark poster (event cards): tear-off style with a gold header BAR */
.date-badge.on-poster { position:absolute; top:12px; left:12px; z-index:3; width:54px; border:0; padding:0;
  align-items:stretch; overflow:hidden; border-radius:8px; box-shadow:0 3px 12px rgba(10,18,40,.28); }
.date-badge.on-poster .db-dow { background:#c69536; color:#fff; font-size:10px; letter-spacing:.07em; text-transform:uppercase; padding:3px 0; }
.date-badge.on-poster .db-day { padding:5px 0 1px; }
.date-badge.on-poster .db-mon { text-transform:uppercase; letter-spacing:.04em; padding:0 0 5px; }

/* hero carousel */
.ev-hero-wrap { position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; margin:18px 0; box-shadow:var(--shadow); }
.ev-hero-inner { position:relative; padding:24px 30px; }
.ev-hero-kicker { display:block; font-weight:700; color:var(--muted); font-size:14px; margin-bottom:16px; }
.ev-hero-track { position:relative; min-height:250px; }
.ev-hero-slide { display:none; grid-template-columns:1fr 300px; gap:30px; align-items:center; }
.ev-hero-slide.on { display:grid; }
.ev-hero-text { display:flex; flex-direction:column; }
.ev-hero-row { display:flex; align-items:flex-start; gap:16px; }
.ev-hero-row h2 { margin:0; font-size:30px; font-weight:800; line-height:1.12; }
.ev-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px 16px; color:var(--muted); font-size:14px; margin:14px 0 0; }
.ev-hero-desc { color:var(--ink); line-height:1.6; margin:12px 0 16px; max-width:560px; }
.ev-hero-rule { border:0; border-top:1px solid var(--line); margin:auto 0 16px; }
.ev-hero-cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ev-hero-price { display:flex; flex-direction:column; line-height:1.1; margin-right:4px; }
.ev-hero-price small { color:var(--muted); font-size:12px; font-weight:600; }
.ev-hero-price strong { color:var(--blue); font-size:20px; font-weight:800; }
.ev-hero-get, .btn-ghost { display:inline-flex; align-items:center; gap:8px; }
.ev-hero-poster { display:flex; align-items:center; justify-content:center; aspect-ratio:2/3; width:100%; max-width:300px;
  margin:0 auto; border-radius:11px; font-size:60px; box-shadow:0 8px 24px rgba(20,30,40,.16); }
.ev-hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; z-index:3; box-shadow:var(--shadow); }
.ev-hero-arrow.prev { left:-14px; } .ev-hero-arrow.next { right:-14px; }
.ev-hero-arrow:hover { background:var(--blue-100); }

/* ===== Featured "Top picks" staff-pick card (slimmer rewrite) ===== */
.events-featured-wrap { position:relative; max-width:1180px; margin:18px auto 28px; padding:0; }
.featured-track { position:relative; }
.featured-event-card { background:var(--card); border:1px solid var(--line); border-radius:16px; min-height:245px;
  padding:18px 26px; display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:30px; align-items:center;
  box-shadow:0 10px 28px rgba(15,23,42,.06); }
.featured-track .featured-slide { display:none; }
.featured-track .featured-slide.on { display:grid; animation:featuredFade .28s ease; }
@keyframes featuredFade { from { opacity:.35; } to { opacity:1; } }
.featured-event-copy { min-width:0; }
.featured-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; color:var(--muted); font-size:15px; font-weight:800; }
.featured-main-row { display:grid; grid-template-columns:58px minmax(0,1fr); gap:18px; align-items:start; }
.featured-date-badge { width:58px; height:70px; border:1px solid var(--line); border-radius:11px; background:var(--card);
  box-shadow:0 8px 18px rgba(15,23,42,.08); display:flex; flex-direction:column; justify-content:center; align-items:center; line-height:1; flex-shrink:0; }
.featured-day { color:#b67a00; font-size:11px; font-weight:900; text-transform:capitalize; }
.featured-date-badge strong { margin:3px 0 4px; color:var(--ink); font-size:25px; font-weight:900; letter-spacing:-.04em; }
.featured-month { color:var(--muted); font-size:12px; font-weight:700; text-transform:capitalize; }
.featured-info h2 { margin:0 0 12px; color:var(--ink); font-size:27px; line-height:1.12; font-weight:900; letter-spacing:-.04em; }
.featured-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; color:var(--muted); font-size:14px; font-weight:600; }
.featured-chip { display:inline-flex; align-items:center; height:24px; padding:0 12px; border-radius:999px; background:var(--ev-soft); color:#9a6500; font-size:12px; font-weight:800; }
.featured-description { height:52px; max-width:720px; margin:0 0 16px; overflow:hidden; color:var(--ink); font-size:15px; line-height:1.55; position:relative; }
.featured-description::after { content:""; position:absolute; left:0; right:0; bottom:0; height:22px; background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card)); }
.featured-actions { border-top:1px solid var(--line); padding-top:15px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.featured-price { min-width:106px; line-height:1; }
.featured-price span { display:block; margin-bottom:4px; color:var(--muted); font-size:13px; font-weight:700; }
.featured-price strong { color:var(--blue); font-size:23px; font-weight:900; letter-spacing:-.04em; }
.featured-btn { height:42px; padding:0 18px; border-radius:10px; border:1px solid var(--line); display:inline-flex; align-items:center;
  justify-content:center; gap:8px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:800; transition:.18s ease; white-space:nowrap;
  font-family:inherit; cursor:pointer; }
.featured-btn:hover { transform:translateY(-1px); }
.featured-btn-primary { background:var(--ev-acc); border-color:var(--ev-acc-d); color:#1a1206; box-shadow:0 8px 16px rgba(245,184,0,.16); }
.featured-btn-outline { background:var(--card); }
.featured-btn-outline:hover { background:var(--blue-100); }
.featured-poster { width:290px; height:210px; border-radius:14px; overflow:hidden; background:#101828; display:flex;
  align-items:center; justify-content:center; box-shadow:0 16px 34px rgba(15,23,42,.16); }
.featured-poster img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.featured-poster-emoji { font-size:58px; }
/* line icons replacing event emojis */
.evico { width:14px; height:14px; flex-shrink:0; vertical-align:-2px; }
.featured-meta > span { display:inline-flex; align-items:center; gap:6px; }
.featured-poster-emoji svg, .ev-poster-emoji svg { width:54px; height:54px; opacity:.55; }
.event-quick-chips a { display:inline-flex; align-items:center; gap:7px; }
.event-quick-chips a .evico { width:16px; height:16px; }
.ev-card-tags .etag { display:inline-flex; align-items:center; gap:5px; }
.featured-nav { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:24px; line-height:1; display:grid; place-items:center;
  cursor:pointer; z-index:5; box-shadow:0 8px 20px rgba(15,23,42,.12); }
.featured-nav-left { left:-6px; } .featured-nav-right { right:-6px; }
.featured-nav:hover { background:var(--blue-100); }
.featured-dots { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:14px; }
.featured-dot { width:6px; height:6px; padding:0; border:0; border-radius:999px; background:var(--line); cursor:pointer; transition:width .25s ease, background .25s ease; background-clip:content-box; }
.featured-dot.on { width:14px; background:var(--blue); }
@media (max-width:560px){ .featured-dots { gap:6px; } .featured-dot { padding:7px; box-sizing:content-box; } .featured-dot.on { width:13px; } }
.featured-dot:hover { background:var(--muted); }
.featured-description::after { background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card)); }
@media (max-width:900px){
  .featured-event-card { grid-template-columns:1fr; gap:20px; padding:20px; }
  .featured-poster { width:100%; height:240px; order:-1; }
  .featured-kicker { margin-bottom:16px; }
}
@media (max-width:560px){
  .events-featured-wrap { margin-top:12px; }
  .featured-event-card { border-radius:14px; padding:16px; min-height:auto; }
  .featured-main-row { grid-template-columns:52px minmax(0,1fr); gap:12px; }
  .featured-date-badge { width:52px; height:64px; }
  .featured-info h2 { font-size:21px; }
  .featured-meta { gap:7px; font-size:13px; }
  .featured-description { height:48px; font-size:14px; }
  .featured-actions { align-items:stretch; }
  .featured-price { width:100%; }
  .featured-btn { flex:1; padding:0 12px; }
  .featured-poster { height:220px; }
  .featured-nav { display:none; }
}

/* tabs + filter bar */
.ev-tabs { display:flex; gap:6px; margin-top:20px; }
.ev-tab { display:inline-flex; align-items:center; gap:7px; padding:11px 20px; font-weight:700; font-size:15px; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-bottom:0; border-radius:9px 9px 0 0; }
.ev-tab.on { background:var(--ev-acc); color:#3a2a00; border-color:var(--ev-acc-d); }
.ev-tab .evt-ic { width:17px; height:17px; }
/* events page hero header */
.events-page-hero { display:grid; grid-template-columns:minmax(0,1fr) 340px auto; align-items:center; gap:22px; margin:6px 0 20px; }
.events-kicker { display:inline-flex; color:var(--blue); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.events-page-hero h1 { margin:0; max-width:520px; font-size:32px; line-height:1.08; font-weight:900; letter-spacing:-.04em; color:var(--ink); }
.events-page-hero p { margin:10px 0 0; max-width:520px; color:var(--muted); font-size:16px; line-height:1.55; }
.events-hero-illustration { width:340px; max-width:100%; opacity:.92; }
.events-create-btn { height:44px; padding:0 20px; border-radius:10px; background:var(--ev-acc); color:#1a1206; font-size:14px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ev-acc-d); white-space:nowrap; }
.events-create-btn:hover { filter:brightness(.97); }
/* quick category chips */
.event-quick-chips { margin:16px 0 4px; display:flex; gap:9px; flex-wrap:wrap; }
.event-quick-chips a { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:9px 15px; font-size:13px; font-weight:800; text-decoration:none; transition:.15s; }
.event-quick-chips a:hover { border-color:var(--blue); }
.event-quick-chips a.active { background:var(--blue); border-color:var(--blue); color:#fff; }
/* Mobile slide-in side menu for event categories (desktop keeps the chip row) */
.ev-cat-toggle { display:none; }
.ev-cat-head { display:none; }
.ev-cat-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1190; }
@media (max-width:768px){
  .ev-cat-toggle { display:flex; align-items:center; gap:10px; width:100%; margin:16px 0 4px; padding:12px 16px;
    background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer; box-shadow:var(--shadow); }
  .ev-cat-toggle > svg { width:20px; height:20px; flex-shrink:0; color:var(--blue); }
  .ev-cat-toggle span { flex:1; text-align:left; font-weight:600; color:var(--muted); }
  .ev-cat-toggle span strong { color:var(--ink); font-weight:800; }
  .ev-cat-caret { width:18px; height:18px; color:var(--muted); }
  .event-quick-chips { position:fixed; top:0; left:0; bottom:0; z-index:1200; width:80%; max-width:300px;
    margin:0; flex-direction:column; flex-wrap:nowrap; gap:6px; padding:16px; background:var(--card);
    border-right:1px solid var(--line); box-shadow:8px 0 40px rgba(0,0,0,.25); overflow-y:auto;
    transform:translateX(-100%); transition:transform .25s ease; }
  .event-quick-chips.open { transform:none; }
  .event-quick-chips a { width:100%; text-align:left; border-radius:10px; padding:13px 15px; font-size:15px; }
  .ev-cat-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .ev-cat-head strong { font-size:16px; font-weight:900; color:var(--ink); }
  .ev-cat-close { width:34px; height:34px; border:none; border-radius:9px; background:var(--bg); color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
}
@media (max-width:900px){ .events-page-hero { grid-template-columns:1fr; } .events-hero-illustration { display:none; } .events-create-btn { width:fit-content; } }
@media (max-width:640px){ .events-page-hero h1 { font-size:25px; } .events-page-hero p { font-size:15px; } }
.ev-filter-label { display:flex; align-items:center; gap:8px; margin:20px 0 10px; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.ev-filter-label svg { width:19px; height:19px; color:var(--blue); flex-shrink:0; }
.ev-filter { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:14px 18px; box-shadow:var(--shadow); }
.evf-field { display:flex; flex-direction:column; gap:5px; flex:1; min-width:150px; }
.evf-field > label { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.evf-field select, .evf-field input { height:40px; padding:0 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; background-color:var(--card); color:var(--ink); }
.evf-range { display:flex; align-items:center; gap:6px; }
.evf-range input { flex:1; min-width:0; }
.evf-arrow { color:var(--muted); }
.evf-go, .evf-create { align-self:flex-end; height:40px; padding:0 20px; line-height:1; display:inline-flex; align-items:center; }
@media (max-width:760px){ .evf-field { flex-basis:100%; } .evf-go, .evf-create { flex:1; } }

/* event cards */
.ev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:18px; margin-top:2px; }
/* events list section heading + fine-tuning */
.events-list-header { margin:20px 0 12px; }
.events-list-header h2 { margin:0; font-size:22px; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.events-list-header span { color:var(--muted); font-size:14px; }
.featured-chip.installments { background:#eef3ff; color:#3154e7; }
#evSentinel { padding:8px 0 4px; }
.ev-card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:.15s; }
.ev-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,30,40,.14); }
/* standard 2:3 portrait poster frame (matches the enforced upload size) */
.ev-poster { position:relative; aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a2350,#0b1430); border-radius:10px 10px 0 0; }
@media (max-width:520px){ .ev-grid { grid-template-columns:1fr 1fr; gap:12px; } }
.ev-poster-emoji { font-size:52px; }
.ev-card-body { display:flex; flex-direction:column; gap:9px; padding:14px 16px 15px; flex:1; }
.ev-card-title { font-size:18px; font-weight:800; line-height:1.25; color:var(--ink);
  min-height:46px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ev-card-line { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.ev-card-line .evl-i { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.ev-card-line .evl-loc { flex:1 1 auto; min-width:0; }
.ev-card-line .evl-time { flex:0 0 auto; white-space:nowrap; }
.ev-card-line .evl-i .svgico { color:var(--blue); flex-shrink:0; }
.ev-card-line .evl-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-card-line .evl-div { width:1px; align-self:stretch; min-height:13px; background:var(--line); flex-shrink:0; }
.ev-card-tags { display:flex; gap:8px; flex-wrap:wrap; }
.ev-card-tags .etag, .ev-card-tags .installment-badge { font-size:12px; padding:5px 12px; }
.ev-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.ev-card-from { display:flex; flex-direction:column; line-height:1.15; }
.ev-card-from small { color:var(--muted); font-weight:600; font-size:12px; }
.ev-card-from strong { color:var(--blue); font-size:19px; font-weight:800; }
.ev-card-bm { width:40px; height:40px; border:1px solid var(--line); border-radius:11px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; transition:.15s; }
.ev-card-bm:hover { color:#e0245e; border-color:#f3b0c2; background:#fff5f8; }
.ev-card-bm.on { color:#e0245e; border-color:#f3b0c2; background:#fff5f8; }
.ev-card-bm.on svg { fill:#e0245e; }
.ev-card-bm:active { transform:scale(.9); }
.ev-card-bm { cursor:pointer; }

/* coloured event-type tag (mockup: Conference=green, Seminar=blue, Festival=orange) */
.etag { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:var(--blue-100); color:var(--blue-d); }
.etag-conference, .etag-seminar2 { background:#e8f7ef; color:#137a3d; }
.etag-seminar, .etag-networking, .etag-workshop { background:var(--blue-100); color:var(--blue-d); }
.etag-festival, .etag-concert, .etag-party { background:#fff4cf; color:#8a5a00; }
.etag-sports { background:#e0f2fe; color:#0369a1; }
.etag-comedy { background:#fce7f3; color:#be185d; }
.etag-religious { background:#ede9fe; color:#6d28d9; }

/* home events row: a single horizontally-scrollable strip between categories and trending */
.home-ev-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; margin-bottom:10px; }
.home-ev-row .ev-card { flex:0 0 188px; }
.home-ev-row .ev-poster { aspect-ratio:16/10; }

/* blurred fill: the FULL poster shown (contain) over a blurred backdrop — used on
   event detail, home trending cards, AND the events-page cards + hero. Portrait
   posters show in full; any gaps are filled by the blurred version of the image. */
.ev2-poster, .poster-thumb, .ev-poster, .ev-hero-poster { position:relative; overflow:hidden; background-color:var(--blue-d); }
.ev2-poster::before, .ev2-poster::after,
.poster-thumb::before, .poster-thumb::after,
.ev-poster::before, .ev-poster::after,
.ev-hero-poster::before, .ev-hero-poster::after {
  content:''; position:absolute; inset:0; background-image:var(--img); background-position:center; background-repeat:no-repeat; pointer-events:none; }
.ev2-poster::before, .poster-thumb::before, .ev-poster::before, .ev-hero-poster::before {
  background-size:cover; filter:blur(20px) brightness(.7); transform:scale(1.25); z-index:0; }
.ev2-poster::after, .poster-thumb::after, .ev-poster::after, .ev-hero-poster::after {
  background-size:100% auto; background-position:center top; z-index:1; }
.ev2-poster > *, .poster-thumb > *, .ev-poster > *, .ev-hero-poster > * { position:relative; z-index:2; }
/* When a real poster image is present, show it at its natural height (no fixed
   aspect-ratio box, no blurred letterbox bars) — fills width, full poster. */
.poster-img { display:block; width:100%; height:auto; }
.card .thumb.poster-thumb.has-poster, .ev-poster.has-poster, .ev2-poster.has-poster { aspect-ratio:auto; display:block; }
.poster-thumb.has-poster::before, .poster-thumb.has-poster::after,
.ev-poster.has-poster::before, .ev-poster.has-poster::after,
.ev2-poster.has-poster::before, .ev2-poster.has-poster::after { display:none; }

/* ===== public store / seller profile (white card over a blue cover) ===== */
.store-cover { position:relative; min-height:100px;
  background:
    radial-gradient(circle at 14% 70%, rgba(255,255,255,.12), transparent 26%),
    radial-gradient(circle at 86% 60%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(135deg, #3154e7 0%, #1739c7 48%, #071b63 100%); }
/* banner shown in full (no crop) — scales with viewport so the whole image is visible on mobile + desktop.
   A base strip below the image absorbs the white card's overlap so the banner is never covered. */
.store-cover.has-banner { background:var(--bg); min-height:0; padding-bottom:44px; }
/* banners are normalized server-side to a strict 1920×260 strip; enforce that ratio on display
   so every store looks uniform and there is no layout shift while the image loads */
.store-cover-img { display:block; width:100%; height:auto; aspect-ratio:1920 / 260; object-fit:cover; object-position:center; }
.store-cover::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size:18px 18px; }
.store-cover.has-banner::after { opacity:0; }
.store-cover-tools { position:absolute; top:12px; right:16px; display:flex; align-items:center; gap:8px; z-index:2; }
.store-cover-tools form { display:flex; margin:0; }
.store-cover-tools .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 13px;
  box-sizing:border-box; line-height:1; background:rgba(0,0,0,.45); color:#fff; border-color:rgba(255,255,255,.45); margin:0; }
.store-cover-tools .btn svg { width:15px; height:15px; flex-shrink:0; }
.store-cover-tools label.btn { cursor:pointer; }

/* white profile card overlapping the cover */
.store-card { position:relative; z-index:2; margin:-42px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:22px; padding:24px 30px; box-shadow:0 18px 45px rgba(15,23,42,.10);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.follow-notice { display:none !important; }   /* moved to the Follow button tooltip */
.store-av { width:96px; height:96px; flex-shrink:0; border-radius:50%; border:4px solid var(--card);
  background:linear-gradient(135deg,#5287af,#3154e7); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:40px; overflow:hidden; box-shadow:0 0 0 3px var(--blue-100), 0 10px 24px rgba(49,84,231,.18); }
.store-av img { width:100%; height:100%; object-fit:cover; }
.store-id { flex:1; min-width:220px; }
.store-id h1 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.15; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.store-verified { display:inline-flex; }
.store-verified svg { width:23px; height:23px; display:block; }
/* meta chips + subline */
.store-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.store-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:5px 11px; font-size:13px; font-weight:600; color:var(--ink); }
.store-chip svg { width:15px; height:15px; color:var(--muted); flex-shrink:0; }
.store-chip strong { font-weight:800; }
.store-subline { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; color:var(--muted); font-size:13.5px; }
.store-subline .sub-loc { display:inline-flex; align-items:center; gap:5px; }
.store-subline .sub-loc svg { width:15px; height:15px; }
.store-subline .dot-sep { opacity:.5; }
.store-subline .sub-rating { color:var(--amber-d); font-weight:700; }
.store-cta { display:flex; gap:10px; }
.store-cta .btn { height:46px; display:inline-flex; align-items:center; gap:8px; padding:0 20px; font-weight:800; }
.store-cta .btn svg { width:18px; height:18px; }
.subscribe-btn.on { background:var(--green); border-color:var(--green); }

/* empty listings state (illustration + CTA) */
.empty-listings { display:grid; grid-template-columns:1.05fr 1fr; gap:30px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 40px; box-shadow:var(--shadow); }
.el-art { display:flex; justify-content:center; }
.el-art svg { width:100%; max-width:400px; height:auto; }
.el-ic { display:inline-flex; width:46px; height:46px; border-radius:13px; background:var(--blue-100); color:var(--blue);
  align-items:center; justify-content:center; margin-bottom:16px; }
.el-ic svg { width:24px; height:24px; }
.el-body h3 { margin:0 0 10px; font-size:25px; font-weight:800; letter-spacing:-.02em; }
.el-body p { margin:0 0 20px; color:var(--muted); font-size:14.5px; line-height:1.55; max-width:440px; }
.el-cta { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; font-weight:800; }
.el-cta svg { width:18px; height:18px; }
@media (max-width:760px){
  .empty-listings { grid-template-columns:1fr; text-align:center; padding:26px 20px; gap:16px; }
  .el-art { order:-1; }
  .el-art svg { max-width:300px; }
  .el-body p { margin-left:auto; margin-right:auto; }
}

.follow-notice { margin:16px 0 0; padding:13px 18px; background:#fff8dc; color:#7c5a00;
  border:1px solid #f7df7e; border-radius:14px; font-size:14px; font-weight:600; }
.store-body { padding-top:22px; }
.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 10px; flex-wrap:wrap; }
.perpage-ctl { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:700; }
.perpage-ctl select { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:9px; padding:6px 10px; font-size:13px; font-weight:700; cursor:pointer; }
.date-range { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.date-range label { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:13px; font-weight:700; }
.date-range input[type=date] { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:9px; padding:6px 9px; font-size:13px; font-weight:600; width:auto; }
.admin-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0; }
.admin-pager .pager-info { color:var(--muted); font-size:13.5px; }
.admin-pager .is-disabled { opacity:.45; pointer-events:none; }

/* store tabs (Listings / Store reviews) */
.store-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:6px 0 22px; }
.store-tab { background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; padding:12px 20px;
  font-family:inherit; font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.store-tab:hover { color:var(--ink); }
.store-tab.on { color:var(--ink); border-bottom-color:var(--blue); }
.tab-count { font-size:13px; font-weight:700; color:var(--muted); background:var(--blue-100); border-radius:999px; padding:1px 9px; }
.store-tab.on .tab-count { color:var(--blue-d); }
.tab-badge { font-size:14px; font-weight:700; color:var(--gold); }
.store-tab-panel[hidden] { display:none; }
/* store listings grid: at least 4 columns on desktop */
.store-grid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important; }
@media (max-width:520px){ .store-grid { grid-template-columns:1fr 1fr !important; } }

/* reviews: full-width grid, each with the reviewed product on the side */
.rev-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:16px; }
.rev-card { display:flex; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.rev-main { flex:1; min-width:0; }
.rev-head { display:flex; gap:10px; align-items:flex-start; }
.rev-who { line-height:1.4; }
.rev-who .stars { color:var(--gold); font-weight:700; }
.rev-text { margin:10px 0 0; font-size:14px; line-height:1.55; color:var(--ink); }
.rev-av { width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--blue-100); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden; }
.rev-av img { width:100%; height:100%; object-fit:cover; }
/* listing-page review rows (.rev-item / .rev-body) */
.rev-item { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.rev-item:first-child { border-top:0; padding-top:0; }
.rev-body { min-width:0; }
.rev-body .stars { color:var(--gold); }
/* the reviewed product, shown on the side */
.rev-product { flex:0 0 110px; display:flex; flex-direction:column; gap:5px; border-left:1px solid var(--line); padding-left:16px; }
.rev-product-thumb { aspect-ratio:1/1; border-radius:10px; background:#eef2f7 center/contain no-repeat; border:1px solid var(--line); }
.rev-product-title { font-size:12.5px; font-weight:600; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rev-product-price { font-size:13px; font-weight:800; color:var(--green); }
.rev-product:hover .rev-product-title { color:var(--blue); }
@media (max-width:520px){ .rev-card { flex-direction:column; } .rev-product { flex-direction:row; align-items:center; border-left:0; border-top:1px solid var(--line); padding:12px 0 0; } .rev-product-thumb { width:60px; flex-shrink:0; } }
.seller-link strong { color:var(--blue); }
.seller-link:hover { text-decoration:underline; }
@media (max-width:960px){
  .store-card { gap:16px; }
  .store-cta { width:100%; }
  .store-cta .btn { flex:1; justify-content:center; }
}
@media (max-width:600px){
  .store-card { margin-top:-46px; padding:20px; border-radius:18px; }
  .store-av { width:82px; height:82px; border-radius:18px; font-size:34px; }
  .store-id h1 { font-size:24px; }
}

/* photo icons for popular categories */
.strip .circle { position:relative; overflow:hidden; }
.strip .circle .cat-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* search results: matched categories + events shown above listings */
.search-extra { margin:6px 0 18px; }
.se-title { font-size:16px; font-weight:800; letter-spacing:-.01em; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.se-all { margin-left:auto; font-size:13px; font-weight:600; color:var(--blue); }
.se-cats { display:flex; flex-wrap:wrap; gap:9px; }
.se-cat { display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font-weight:600; font-size:14px; box-shadow:var(--shadow); transition:.15s; }
.se-cat:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.se-cat .se-ic { font-size:17px; }
.se-cat small { color:var(--muted); font-weight:500; }

/* Post-Ad / Create-Event two-tab switcher */
.post-wrap { max-width:720px; margin:22px auto; }
.post-tabs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:7px; margin-bottom:16px; box-shadow:var(--shadow); }
.post-tab { min-height:56px; display:flex; align-items:center; justify-content:center; gap:9px; padding:8px 10px;
  font-weight:800; font-size:14px; line-height:1.2; color:var(--muted); border-radius:14px; text-align:center;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.post-tab:not(.on):hover { background:var(--bg); color:var(--ink); }
.post-tab.on { color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-d)); box-shadow:0 10px 20px rgba(49,84,231,.28); }
.post-tab .pt-ic { font-size:17px; line-height:1; }
.post-panel { margin:0 !important; max-width:none !important; width:100%; }
@media (max-width:390px){ .post-tabs { gap:6px; padding:6px; } .post-tab { font-size:12px; gap:5px; min-height:54px; } .post-tab .pt-ic { font-size:15px; } }

/* ===== Post-an-ad premium polish (blue brand) ===== */
/* dashed upload area + photo preview grid */
.photo-field { border:1.5px dashed var(--blue); background:var(--blue-100); border-radius:16px; padding:16px; }
html[data-theme="dark"] .photo-field { background:rgba(49,84,231,.08); border-color:rgba(120,150,255,.5); }
.photos-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.photos-head label { font-weight:800; }
.photo-count-lbl { color:var(--green); font-weight:700; font-size:13.5px; white-space:nowrap; }
.photo-grid { display:flex; flex-wrap:wrap; gap:12px; }
.photo-cell { position:relative; width:150px; height:150px; flex-shrink:0; }
.photo-cell img { width:100%; height:100%; object-fit:cover; border-radius:14px; border:1px solid var(--line); display:block; background:#fff; }
.photo-rm { position:absolute; top:-7px; right:-7px; width:26px; height:26px; border:3px solid var(--card); border-radius:50%;
  background:#d9363e; color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2); padding:0; }
.photo-rm:hover { background:#b91c1c; }
.photo-add { width:150px; height:150px; flex-shrink:0; border-radius:14px; border:1.5px dashed var(--blue); background:var(--card); color:var(--blue);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-weight:700; font-size:12px; cursor:pointer; text-align:center; line-height:1.2; font-family:inherit; }
.photo-add:hover { background:var(--blue-100); }
.photo-add .pa-plus { font-size:30px; line-height:1; }
.photo-cell.poster, .photo-add.poster { width:104px; height:156px; } /* event posters are portrait 2:3 */
.photo-add.poster small { color:var(--muted); font-size:10.5px; margin-top:4px; font-weight:500; }
.add-ticket-btn { border:1.5px dashed var(--blue); color:var(--blue); background:var(--card); border-radius:10px; font-weight:700; }
.add-ticket-btn:hover { background:var(--blue-100); }
/* per-photo AI background-removal button + processing overlay */
.photo-bg { position:absolute; left:6px; bottom:6px; display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border:0; border-radius:7px;
  background:rgba(49,84,231,.92); color:#fff; font-size:10px; font-weight:800; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.22); font-family:inherit; }
.photo-bg:hover { background:var(--blue-d); }
/* per-photo Beautify (colour grade) — bottom-centre, between ✨ and ✂ */
.photo-cell .photo-enhance { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:2px; border:0; border-radius:50%; background:rgba(139,92,246,.95); color:#fff;
  font-size:11px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.22); font-family:inherit; }
.photo-cell .photo-enhance:hover { background:rgba(124,58,237,1); }
/* per-photo Undo (restore original) — top-right so it clears the ✨/✂ bottom buttons */
.photo-cell .photo-undo { position:absolute; top:6px; right:6px; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; border:0; border-radius:7px; background:rgba(17,24,39,.78); color:#fff;
  font-size:14px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.22); font-family:inherit; }
.photo-cell .photo-undo:hover { background:rgba(17,24,39,.95); }
.photo-cell .photo-undo[hidden] { display:none; }
/* in the "add more photos" grid the outer top-right holds the remove ✕, so put Undo top-left */
#photoGrid .photo-cell .photo-undo { left:6px; right:auto; }
/* per-photo Delete — top-left corner */
.photo-cell .photo-del { position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:2px; border:0; border-radius:50%; background:rgba(220,38,38,.92); color:#fff;
  font-size:13px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.22); font-family:inherit; }
.photo-cell .photo-del:hover { background:#b91c1c; }
/* Reorder — vertical middle edges are the only free space left on the cell */
.photo-mv { position:absolute; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:0; border-radius:50%; background:rgba(17,24,39,.72); color:#fff;
  font-size:14px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.22); font-family:inherit; }
.photo-mv:hover { background:rgba(17,24,39,.92); }
.photo-mv[hidden] { display:none; }
.photo-mv-left { left:6px; }
.photo-mv-right { right:6px; }
/* First photo = the thumbnail shown on cards, search and the TV overlay */
.photo-thumb-badge { position:absolute; top:6px; left:50%; transform:translateX(-50%); background:rgba(18,55,196,.92); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.02em; padding:2px 7px; border-radius:999px; pointer-events:none; white-space:nowrap; }
.photo-busy { position:absolute; inset:0; border-radius:14px; background:rgba(255,255,255,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
html[data-theme="dark"] .photo-busy { background:rgba(25,33,47,.9); }
.pb-spin { width:22px; height:22px; border:3px solid var(--blue-100); border-top-color:var(--blue); border-radius:50%; animation:pbspin .7s linear infinite; }
.pb-txt { font-size:10px; font-weight:700; color:var(--ink); text-align:center; padding:0 4px; }
@keyframes pbspin { to { transform:rotate(360deg); } }

/* gradient primary action + premium draft button + active tab */
.post-tab.on { background:linear-gradient(135deg, var(--blue), var(--blue-d)); box-shadow:0 10px 20px rgba(49,84,231,.28); }
.post-actions .btn { height:52px; border-radius:13px; font-weight:800; font-size:15.5px; }
.post-actions .btn-primary { background:linear-gradient(135deg, var(--blue), var(--blue-d)); border-color:transparent; box-shadow:0 8px 20px rgba(49,84,231,.26); }
.post-actions .btn-primary:hover { filter:brightness(1.05); box-shadow:0 10px 24px rgba(49,84,231,.32); }
.post-draft-btn { border:2px solid var(--blue); color:var(--blue); font-weight:800; background:var(--card); }
/* premium, roomier inputs on the post/event forms */
.post-panel input:not([type=checkbox]):not([type=radio]), .post-panel select, .post-panel textarea { padding:14px 16px; border-radius:13px; font-size:15px; }
.post-panel input:focus, .post-panel select:focus, .post-panel textarea:focus { box-shadow:0 0 0 4px rgba(49,84,231,.12); }
/* bottom-align paired fields so the input boxes line up even when one label
   wraps to two lines (e.g. County vs "Specific area (optional)"). */
.post-panel .ev-form-grid, .post-panel div[style*="display:flex"]:has(> .field) { gap:14px; align-items:flex-end; }

/* the major option toggles become premium bordered cards */
.post-panel .frail-opt:has(#allowCart), .post-panel .frail-opt:has(#allowInst), .post-panel .wholesale-box > .frail-opt {
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--card); align-items:flex-start;
  font-weight:600; transition:border-color .15s, box-shadow .15s; }
.post-panel .frail-opt:has(#allowCart):hover, .post-panel .frail-opt:has(#allowInst):hover, .post-panel .wholesale-box > .frail-opt:hover {
  border-color:var(--blue); box-shadow:0 4px 14px rgba(49,84,231,.08); }

/* post-ad photo size guidance + per-file fit checker */
.photo-tip { font-size:12.5px; margin:10px 0 0; line-height:1.5; }
.edit-photos { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 12px; }
.edit-photos .ep-thumb { width:104px; height:104px; border-radius:10px; background:#eef2f7 center/cover no-repeat; border:1px solid var(--line); flex-shrink:0; }
.photo-checks { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.pc-row { font-size:12.5px; padding:7px 10px; border-radius:8px; border:1px solid var(--line); }
.pc-row.ok { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.pc-row.warn { background:var(--amber-50); color:var(--amber-d); border-color:#f7e2b0; }
html[data-theme="dark"] .pc-row.ok { background:rgba(34,197,94,.14); color:#86efac; border-color:rgba(34,197,94,.3); }
html[data-theme="dark"] .pc-row.warn { background:rgba(245,158,11,.14); color:#fcd34d; border-color:rgba(245,158,11,.3); }

/* ticket badge marking an event card inside the trending grid */
.badge-event { position:absolute; top:0; left:0; z-index:3; background:var(--ev-acc); color:#1a1206;
  font-weight:800; font-size:11px; letter-spacing:.09em; text-transform:uppercase; padding:5px 10px;
  border-radius:0 0 8px 0; box-shadow:0 2px 6px rgba(0,0,0,.22); }
/* boosted/featured event badge — top-right corner */
.badge-boosted { position:absolute; top:0; right:0; z-index:3; background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff;
  font-weight:800; font-size:11px; letter-spacing:.04em; padding:5px 10px; border-radius:0 0 0 8px; box-shadow:0 2px 6px rgba(124,58,237,.4); }
/* Boost buttons in My Events */
.btn-boost { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff !important; border:none; }
.btn-boost:hover { opacity:.92; }
.btn-boosted { background:#f3e8ff; color:#6d28d9 !important; border:1px solid #d8b4fe; }

/* detail page */
/* ===== event detail page (premium ticket layout) ===== */
.ev2-crumb { margin:16px 0 0; display:flex; align-items:center; gap:7px; }
.ev2-crumb .crumb-sep { color:var(--muted); }
.ev2-crumb .crumb-current { color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }
.ev2-crumb + .ev2-detail { margin-top:14px; }
.ev2-detail { display:grid; grid-template-columns:minmax(0,510px) minmax(0,1fr); gap:34px; align-items:start; margin:24px 0 40px; }
.ev2-poster { aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--blue),var(--blue-d));
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; box-shadow:0 24px 60px rgba(15,23,42,.16); }
.ev2-poster-emoji { font-size:72px; }
.ev2-about { margin-top:24px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:28px 30px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.ev2-about::after { content:""; position:absolute; right:-70px; bottom:-70px; width:200px; height:200px; background:radial-gradient(circle,rgba(49,84,231,.07),transparent 70%); }
.ev2-h { display:inline-block; position:relative; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px; padding-bottom:9px; }
.ev2-h::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--sella-yellow); border-radius:999px; }
.ev2-desc { white-space:pre-wrap; line-height:1.8; color:#374151; font-size:15.5px; position:relative; }

/* right ticket card */
.ev2-right { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:30px; box-shadow:0 24px 60px rgba(15,23,42,.10); position:sticky; top:90px; }
.ev2-head { display:flex; align-items:flex-start; gap:16px; }
.ev2-head h1 { margin:0; font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.04em; line-height:1.08; color:var(--ink); }
.ev2-date { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:66px; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); text-align:center; }
.ev2-date-top { width:100%; background:var(--blue); color:#fff; font-size:12px; font-weight:800; letter-spacing:.5px; padding:5px 0; }
.ev2-date-day { font-size:30px; font-weight:800; line-height:1; padding:9px 0 3px; color:var(--ink); }
.ev2-date-mon { font-size:12px; font-weight:800; color:var(--blue); padding-bottom:8px; }
.ev2-meta { display:flex; flex-direction:column; gap:12px; margin:20px 0 16px; }
.ev2-meta div { display:flex; align-items:center; gap:11px; color:#374151; font-size:15px; }
.ev2-meta svg { width:18px; height:18px; color:var(--blue); flex-shrink:0; }
.ev2-by { color:var(--muted); font-size:14px; }
.ev2-by a { color:var(--blue); font-weight:700; }
.ev2-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.ev2-act { display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px; border-radius:12px; background:var(--card);
  border:1px solid var(--line); color:var(--ink); font-weight:700; font-family:inherit; font-size:14px; cursor:pointer; box-shadow:var(--shadow); text-decoration:none; }
.ev2-act svg { width:17px; height:17px; }
.ev2-act:hover { border-color:var(--blue); color:var(--blue); }
.ev2-act.on { border-color:var(--red); color:var(--red); }
.ev2-act.on svg { fill:var(--red); }
.ev2-rule { border:0; height:1px; background:var(--line); margin:24px 0; }
.ev2-tickets-h { font-size:23px; font-weight:800; letter-spacing:-.02em; margin:0 0 18px; }

/* ticket rows with horizontal steppers */
.tcards { display:flex; flex-direction:column; gap:14px; }
.tcard { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--card); box-shadow:var(--shadow); }
.tcard-info { display:flex; flex-direction:column; gap:5px; min-width:0; }
.tcard-info strong { font-size:16px; font-weight:800; }
.tcard-price { font-weight:800; font-size:20px; color:var(--blue); letter-spacing:-.02em; }
.tcard .muted { font-size:12.5px; }
.tcard.soldout { opacity:.55; }
.stepper { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.st-plus, .st-minus { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; }
.st-plus:hover:not(:disabled), .st-minus:hover:not(:disabled) { background:var(--blue); color:#fff; border-color:var(--blue); }
.st-plus:disabled, .st-minus:disabled { opacity:.4; cursor:not-allowed; }
.st-count { min-width:26px; text-align:center; font-size:18px; font-weight:800; }

/* buyer fields with leading icons */
.buyer-box { display:flex; flex-direction:column; gap:13px; margin:18px 0 0; }
.ifield { position:relative; display:block; }
.ifield svg { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
.ifield input { width:100%; height:52px; padding:0 16px 0 44px; border:1px solid var(--line); border-radius:13px; background:var(--card); color:var(--ink); font-family:inherit; font-size:15px; }
.ifield input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(49,84,231,.12); outline:none; }

.subtotal-bar { display:flex; align-items:center; justify-content:space-between; margin:18px 0 14px; padding:18px 20px;
  border-radius:14px; font-size:17px; font-weight:700; color:var(--ink); background:linear-gradient(90deg,#fff8dc,#fff4ba); }
.subtotal-bar strong { font-size:24px; font-weight:800; }
.mpesa-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:56px; border:0; border-radius:14px;
  cursor:pointer; font-family:inherit; font-size:16px; font-weight:800; color:#111827;
  background:linear-gradient(135deg,#ffd400,#f5b800 52%,#e6a700); box-shadow:0 12px 30px rgba(245,184,0,.28); transition:transform .15s, box-shadow .15s; }
.mpesa-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 16px 38px rgba(245,184,0,.36); }
.mpesa-btn:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.mpesa-logo { background:#fff; border-radius:6px; padding:4px 8px; display:inline-flex; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.mpesa-logo img { height:18px; display:block; }
.pay-note { display:flex; align-items:center; gap:8px; margin:12px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5; }
.pay-note svg { width:16px; height:16px; flex-shrink:0; color:var(--green); }
@media (max-width:560px){ .tcard { flex-wrap:wrap; } }
/* dark theme: lift the low-contrast text + fix the light subtotal bar */
html[data-theme="dark"] .ev2-meta div,
html[data-theme="dark"] .ev2-desc { color:#cbd5e3; }
html[data-theme="dark"] .ev2-by { color:#9fb0c4; }
html[data-theme="dark"] .subtotal-bar { background:linear-gradient(90deg,#2b2613,#36301a);
  color:#f4ecc9; border:1px solid rgba(245,184,0,.30); }
html[data-theme="dark"] .subtotal-bar strong { color:#ffd84d; }
html[data-theme="dark"] .pay-note { color:#9fb0c4; }

@media (max-width:860px){
  .ev2-detail { grid-template-columns:1fr; }
  .ev2-right { position:static; padding:24px; }
  .ev2-poster { aspect-ratio:1/1; }
  .ev-hero-slide.on { grid-template-columns:1fr; }
  .ev-hero-poster { order:-1; aspect-ratio:2/3; max-width:240px; }
  .ev-hero-inner { padding:20px 16px; }
  .ev-hero-arrow.prev { left:4px; } .ev-hero-arrow.next { right:4px; }
  .ev-hero-row h2 { font-size:22px; }
  .ev-hero-rule { margin-top:14px; }
}

/* ===== PPP TV promotion checkout (redesign) ===== */
.ppp-promo .ppp-hero { margin:0 0 22px; }
.ppp-promo .page-kicker { display:inline-flex; margin-bottom:8px; color:var(--blue); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.ppp-promo .ppp-hero h1 { font-size:32px; line-height:1.1; font-weight:900; letter-spacing:-.04em; color:var(--ink); }
.ppp-promo .ppp-hero p { margin:10px 0 0; max-width:620px; color:var(--muted); font-size:12px; line-height:1.6; }
.ppp-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; }
.ppp-main-card, .ppp-summary-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.ppp-main-card { padding:24px; }
.ppp-brand-row { display:grid; grid-template-columns:1fr 1.5fr; gap:22px; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); }
.ppp-logo { width:200px; max-width:100%; max-height:80px; object-fit:contain; }
.ppp-brand-row h2 { margin:0 0 8px; font-size:22px; line-height:1.2; font-weight:900; letter-spacing:-.03em; color:var(--ink); }
.ppp-brand-row p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.ppp-brand-row strong { color:var(--blue); }
.listing-preview { margin-top:20px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--bg); display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:center; }
.listing-preview img, .listing-preview .lp-noimg { width:150px; height:90px; border-radius:12px; object-fit:cover; background:var(--blue-100); display:flex; align-items:center; justify-content:center; font-size:34px; }
.preview-label { display:block; color:var(--blue); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.listing-preview h3 { margin:0 0 5px; font-size:18px; font-weight:900; color:var(--ink); }
.listing-preview p { margin:0; color:var(--muted); font-size:14px; }
.benefits-grid { margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.benefit-card { border:1px solid var(--line); border-radius:14px; padding:15px; display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:center; }
.benefit-card img { width:48px; height:48px; }
.benefit-card strong { display:block; font-size:14px; font-weight:900; margin-bottom:4px; color:var(--ink); }
.benefit-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.benefit-blue { background:#f5f7ff; } .benefit-yellow { background:#fffaf0; } .benefit-pink { background:#fff5fb; }
html[data-theme="dark"] .benefit-blue { background:rgba(49,84,231,.1); }
html[data-theme="dark"] .benefit-yellow { background:rgba(244,215,47,.08); }
html[data-theme="dark"] .benefit-pink { background:rgba(236,72,153,.08); }
.payment-box { margin-top:20px; padding:20px; border-radius:16px; background:var(--bg); border:1px solid var(--line); }
.payment-title { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:16px; }
.payment-title h3 { margin:0; font-size:21px; font-weight:900; color:var(--ink); }
.payment-title p { margin:6px 0 0; color:var(--muted); font-size:14px; }
.payment-title > span { background:#fff3c7; color:#8a5a00; border-radius:999px; padding:8px 14px; font-size:14px; font-weight:900; white-space:nowrap; }
.payment-box label { display:block; color:var(--muted); font-size:13px; font-weight:800; margin-bottom:8px; }
.mpesa-input-wrap { height:48px; border:1px solid #b9e5c8; border-radius:12px; background:var(--card); display:grid; grid-template-columns:26px minmax(0,1fr) 22px; gap:8px; align-items:center; padding:0 12px; }
.mpesa-input-wrap svg { width:22px; height:22px; }
.mpesa-input-wrap input { border:0; outline:0; height:44px; font-size:15px; background:transparent; color:var(--ink); width:100%; }
.mpesa-input-wrap > span { color:#16a34a; font-weight:900; }
.pay-btn { width:100%; height:50px; margin-top:14px; border:none; border-radius:12px; background:var(--blue); color:#fff; font-size:15px; font-weight:900; cursor:pointer; box-shadow:0 12px 26px rgba(49,84,231,.22); }
.pay-btn:hover { background:var(--blue-d); }
.payment-note { margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.5; text-align:center; }
/* Payment CTA (replaces inline form on the main card) */
.payment-cta { margin-top:20px; padding:18px 20px; border-radius:16px; background:var(--bg); border:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.payment-cta-info { display:flex; flex-direction:column; }
.payment-cta-info strong { font-size:24px; font-weight:900; color:var(--ink); letter-spacing:-.03em; }
.payment-cta-info span { color:var(--muted); font-size:13px; font-weight:700; }
.payment-cta .pay-btn { width:auto; margin-top:0; min-width:190px; padding:0 26px; }
/* Terms acceptance inside pay modal */
.pay-terms { display:flex !important; gap:10px; align-items:flex-start; margin:14px 0 0; font-size:13px; font-weight:600 !important; color:var(--ink) !important; line-height:1.5; cursor:pointer; }
.pay-terms input { margin:2px 0 0; width:17px; height:17px; flex:0 0 auto; accent-color:var(--blue); cursor:pointer; }
.pay-terms a { color:var(--blue); font-weight:800; }
.pay-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
/* Pay modal */
.pay-modal[hidden] { display:none; }
.pay-modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:18px; }
.pay-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.pay-modal-card { position:relative; z-index:1; width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.35); padding:24px; max-height:92vh; overflow:auto; animation:payModalIn .18s ease; }
@keyframes payModalIn { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
.pay-modal-x { position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; border-radius:10px; background:var(--bg); color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.pay-modal-x:hover { background:var(--line); color:var(--ink); }
.pay-modal-card label { display:block; color:var(--muted); font-size:13px; font-weight:800; margin-bottom:8px; }
.ppp-summary-card { overflow:hidden; position:sticky; top:82px; }
.summary-head { padding:24px; display:flex; gap:15px; align-items:center; color:#fff; background:linear-gradient(135deg,#bc3aa1 0%,#3154e7 100%); }
.summary-icon { width:62px; height:62px; border-radius:18px; background:#fff; display:grid; place-items:center; flex-shrink:0; }
.summary-icon img { width:40px; height:40px; }
.summary-head h3 { margin:0 0 5px; font-size:21px; font-weight:900; }
.summary-head p { margin:0; color:rgba(255,255,255,.85); font-size:14px; }
.price-summary { padding:22px 24px 16px; }
.price-summary span { display:block; color:var(--muted); font-size:14px; font-weight:800; margin-bottom:8px; }
.price-summary strong { display:block; font-size:32px; color:var(--blue); font-weight:900; letter-spacing:-.04em; }
.summary-row { margin:0 24px; display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:15px 0; border-top:1px solid var(--line); font-size:14px; }
.summary-row > span { color:var(--muted); font-weight:800; }
.summary-row > strong { text-align:right; font-weight:800; color:var(--ink); word-break:break-word; }
.status-pill { justify-self:end; width:fit-content; background:#fff1df; color:#d9511e; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:800; }
.status-pill.is-live { background:#dcfce7; color:#166534; }
.status-pill.is-pending { background:#fff1df; color:#d9511e; }
.status-pill.is-failed { background:#fee2e2; color:#b91c1c; }
.summary-pay-btn { width:calc(100% - 48px); height:50px; margin:16px 24px 0; border:none; border-radius:12px; background:var(--ev-acc); color:#111827; font-size:15px; font-weight:900; cursor:pointer; box-shadow:0 12px 26px rgba(245,184,0,.18); }
.summary-pay-btn:hover { filter:brightness(.97); }
.secure-note { margin:14px 24px 20px; color:var(--muted); font-size:13px; text-align:center; line-height:1.5; }
.secure-note strong, .secure-note > span { display:block; }
.help-card { margin:0 24px 24px; padding:14px; background:#fffaf0; border:1px solid #f4d98d; border-radius:14px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:center; text-decoration:none; }
html[data-theme="dark"] .help-card { background:rgba(244,215,47,.08); border-color:rgba(244,215,47,.25); }
.help-card > span { width:34px; height:34px; display:grid; place-items:center; border-radius:999px; background:#f4d72f; font-weight:900; color:#111827; }
.help-card strong { display:block; margin-bottom:2px; font-weight:900; color:var(--ink); }
.help-card p { margin:0; color:var(--blue); font-weight:800; font-size:13px; }
.help-card em { font-style:normal; font-size:22px; color:var(--muted); }
/* live payment status under the CTA */
.pay-status { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.pay-status > span { color:var(--muted); font-size:13px; font-weight:800; }
/* Invoice card */
.ppp-invoice { padding:24px; }
.inv-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding-bottom:16px; margin-bottom:18px; border-bottom:2px solid var(--line); }
.inv-kicker { display:block; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:900; color:var(--blue); }
.inv-head h3 { margin:4px 0 0; font-size:21px; font-weight:900; color:var(--ink); }
.inv-logo { max-height:40px; max-width:120px; object-fit:contain; }
.inv-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:18px; }
.inv-meta span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; margin-bottom:3px; }
.inv-meta strong { font-size:14px; color:var(--ink); font-weight:800; word-break:break-word; }
.inv-table { width:100%; border-collapse:collapse; }
.inv-table td { padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink); }
.inv-table td:last-child { text-align:right; font-weight:800; white-space:nowrap; }
.inv-total td { border-top:2px solid var(--ink); border-bottom:none; font-size:19px; font-weight:900; padding-top:14px; }
.inv-total td:last-child { color:var(--blue); letter-spacing:-.02em; }
.inv-note { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.inv-download { width:100%; height:48px; margin-top:18px; border:1px solid var(--blue); border-radius:12px; background:var(--card); color:var(--blue); font-size:14px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:background .15s,color .15s; }
.inv-download svg { width:18px; height:18px; }
.inv-download:hover { background:var(--blue); color:#fff; }
.recaptcha-badge { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }
.recaptcha-badge svg { width:15px; height:15px; color:#1a73e8; }
/* Mobile bottom tab bar (phones only) */
.mobile-bottom-bar { display:none; }
@media (max-width:768px){
  body:not(.no-bottom-bar) { padding-bottom:82px; }
  .mobile-bottom-bar { display:block; position:fixed; left:0; right:0; bottom:0; z-index:1100; background:var(--card);
    border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(19,30,72,.08);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .mobile-bottom-bar .bottom-nav { display:grid; grid-template-columns:repeat(5,1fr); align-items:end; gap:4px; max-width:520px; margin:0 auto; position:relative; }
  .mobile-bottom-bar .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px;
    text-decoration:none; color:var(--muted); min-height:50px; font-size:11px; font-weight:600; position:relative;
    padding:5px 0; border-radius:13px; transition:color .18s ease, background .18s ease; }
  .mobile-bottom-bar .nav-item svg { width:23px; height:23px; }
  .mobile-bottom-bar .nav-item span { line-height:1; white-space:nowrap; }
  .mobile-bottom-bar .nav-item.active { color:var(--blue); background:var(--blue-100); }
  html[data-theme="dark"] .mobile-bottom-bar .nav-item.active { background:rgba(49,84,231,.18); }
  .mobile-bottom-bar .sell-slot { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:50px; }
  .mobile-bottom-bar .sell-fab { position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:54px; height:54px;
    border-radius:50%; border:4px solid var(--card); background:var(--blue); color:#fff; display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none; box-shadow:0 10px 24px rgba(49,84,231,.4); transition:transform .15s ease, box-shadow .15s ease; }
  .mobile-bottom-bar .sell-fab:active { transform:translateX(-50%) translateY(1px); }
  .mobile-bottom-bar .sell-fab svg { width:26px; height:26px; }
  .mobile-bottom-bar .sell-label { font-size:11px; font-weight:700; color:var(--blue); line-height:1; margin-bottom:5px; }
  .mobile-bottom-bar .nav-item.has-badge::after { content:attr(data-badge); position:absolute; top:0; right:22%; min-width:17px; height:17px;
    padding:0 4px; border-radius:999px; background:#ff5a5f; color:#fff; font-size:9.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--card); }
}
@media (max-width:380px){
  .mobile-bottom-bar .nav-item { font-size:10px; }
  .mobile-bottom-bar .nav-item svg { width:21px; height:21px; }
  .mobile-bottom-bar .sell-fab { width:50px; height:50px; top:-24px; }
}
/* Soft "continue with Google" nudge for long-browsing logged-out visitors */
.login-nudge { position:fixed; left:0; right:0; bottom:0; z-index:1150; background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -8px 28px rgba(15,23,42,.14); padding:14px 48px calc(14px + env(safe-area-inset-bottom)) 20px;
  display:flex; align-items:center; gap:14px; animation:nudgeUp .25s ease; }
.login-nudge[hidden] { display:none; }
@keyframes nudgeUp { from { transform:translateY(100%); } to { transform:none; } }
.login-nudge-ic { width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--blue-100); color:var(--blue); display:grid; place-items:center; }
.login-nudge-ic svg { width:22px; height:22px; }
.login-nudge-text { flex:1; min-width:0; }
.login-nudge-text strong { display:block; font-size:15px; font-weight:800; color:var(--ink); }
.login-nudge-text span { font-size:13px; color:var(--muted); line-height:1.4; }
.login-nudge-actions { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.login-nudge-alt { font-size:12px; color:var(--muted); white-space:nowrap; }
.login-nudge-alt:hover { color:var(--blue); }
.login-nudge-x { position:absolute; top:7px; right:10px; width:28px; height:28px; border:0; background:transparent; color:var(--muted); font-size:21px; line-height:1; cursor:pointer; }
@media (max-width:768px){
  .login-nudge { bottom:78px; flex-wrap:wrap; gap:10px 14px; padding:14px 16px; }
  .login-nudge-actions { width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
}
/* Payments / transaction log */
.paylog-summary { display:flex; gap:14px; margin:6px 0 18px; flex-wrap:wrap; }
.paylog-summary > div { flex:1 1 160px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.paylog-summary span { display:block; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.paylog-summary strong { font-size:22px; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.paylog-filters { display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.paylog-filters .pf-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--muted); font-size:13.5px; font-weight:800; }
.paylog-filters .pf-tab span { background:var(--bg); color:var(--ink); border-radius:999px; padding:1px 8px; font-size:12px; }
.paylog-filters .pf-tab.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.paylog-filters .pf-tab.on span { background:rgba(255,255,255,.25); color:#fff; }
.paylog { display:flex; flex-direction:column; gap:10px; }
.paylog-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.paylog-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--blue-100); color:var(--blue); }
.paylog-ic svg { width:21px; height:21px; }
.paylog-ppptv { background:#f5f7ff; color:#3154e7; } .paylog-boost { background:#fff5fb; color:#bc3aa1; }
.paylog-sponsored { background:#fff7ed; color:#ea580c; }
.paylog-ticket { background:#fffaf0; color:#b8860b; } .paylog-installment { background:#eef9f1; color:#15803d; }
.paylog-order { background:#eef6ff; color:#1d4ed8; } .paylog-verification { background:#f0f7ff; color:#0369a1; }
.paylog-plan { background:#f5f0ff; color:#7c3aed; } .paylog-wallet-topup { background:#ecfdf5; color:#059669; }
html[data-theme="dark"] .paylog-ppptv, html[data-theme="dark"] .paylog-boost, html[data-theme="dark"] .paylog-ticket,
html[data-theme="dark"] .paylog-installment, html[data-theme="dark"] .paylog-order, html[data-theme="dark"] .paylog-verification,
html[data-theme="dark"] .paylog-plan, html[data-theme="dark"] .paylog-wallet-topup { background:rgba(49,84,231,.14); color:var(--blue); }

/* ===== Boost Plans page ===== */
/* Nav highlight for Boost Plans */
.acct-nav a[href="/dashboard/plans"] { color:var(--blue); font-weight:800; }
.acct-nav a[href="/dashboard/plans"] .ai { background:var(--blue-100); border-radius:8px; }
.acct-nav a[href="/dashboard/plans"].on { background:var(--blue); color:#fff; }
.acct-nav a[href="/dashboard/plans"].on .ai { background:rgba(255,255,255,.18); border-radius:8px; }

/* Hero */
.bp-hero { text-align:center; padding:36px 0 28px; }
.bp-hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--blue-100); color:var(--blue); font-size:12px; font-weight:800; border-radius:20px; padding:4px 14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px; }
.bp-hero-title { font-size:clamp(26px,5vw,40px); font-weight:900; color:var(--ink); line-height:1.15; margin:0 0 12px; letter-spacing:-.02em; }
.bp-hero-sub { color:var(--muted); font-size:15.5px; max-width:480px; margin:0 auto 18px; line-height:1.6; }
.bp-active-pill { display:inline-flex; align-items:center; gap:7px; background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; border-radius:20px; padding:6px 16px; font-size:13px; font-weight:700; }
.bp-processing { display:inline-flex; align-items:center; gap:7px; background:#fffbeb; color:#92400e; border:1px solid #fde68a; border-radius:20px; padding:6px 16px; font-size:13px; font-weight:600; margin-top:8px; }

/* Duration toggle */
.bp-dur-wrap { width:100%; overflow-x:auto; margin:0 0 24px; padding:0 0 4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; text-align:center; }
.bp-dur-wrap::-webkit-scrollbar { display:none; }
.bp-dur-tabs { display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:4px; gap:2px; white-space:nowrap; }
.bp-dur-tab { padding:8px 16px; border-radius:9px; border:none; background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap; }
.bp-dur-tab.on { background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(20,30,40,.12); }
.bp-save-chip { display:inline-block; background:#dcfce7; color:#15803d; font-size:10px; font-weight:800; border-radius:6px; padding:1px 5px; margin-left:4px; vertical-align:middle; }
.bp-dur-tab.on .bp-save-chip { background:#bbf7d0; }

/* Grid — equal height cards */
.bp-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:40px; align-items:stretch; }

/* Card */
.bp-card { position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:24px 18px 20px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s, transform .2s; }
.bp-card:hover { box-shadow:0 8px 28px rgba(20,30,40,.12); transform:translateY(-2px); }
.bp-current { border-color:var(--blue); box-shadow:0 0 0 3px rgba(49,84,231,.1); }
.bp-featured { border-color:#7c3aed; box-shadow:0 4px 20px rgba(124,58,237,.15); }
.bp-vip_gold { border-color:#d97706; }
.bp-diamond { border:none; background:linear-gradient(160deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%); color:#fff; }
.bp-diamond .bp-plan-name, .bp-diamond .bp-price, .bp-diamond .bp-price-period { color:#fff; }
.bp-diamond .bp-multiplier { background:rgba(255,255,255,.15); color:#c7d2fe; }
.bp-diamond .bp-features li { color:rgba(255,255,255,.8); }
.bp-diamond .bp-features li::before { background:rgba(255,255,255,.15); color:#a5b4fc; }

/* Popular ribbon */
.bp-popular-ribbon { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#7c3aed,#6d28d9); color:#fff; font-size:11px; font-weight:800; border-radius:20px; padding:4px 14px; white-space:nowrap; letter-spacing:.03em; box-shadow:0 2px 8px rgba(124,58,237,.4); }

/* Current chip */
.bp-current-chip { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; background:var(--blue-100); color:var(--blue); font-size:11px; font-weight:800; border-radius:8px; padding:3px 9px; }
.bp-diamond .bp-current-chip { background:rgba(255,255,255,.15); color:#fff; }

/* Plan icon */
.bp-icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; }
.bp-icon svg { width:20px; height:20px; }
.bp-icon-basic    { background:#e8edfd; color:var(--blue); }
.bp-icon-premium  { background:#fef3c7; color:#d97706; }
.bp-icon-vip      { background:#f3e8ff; color:#7c3aed; }
.bp-icon-vip_gold { background:#fef3c7; color:#b45309; }
.bp-icon-diamond  { background:rgba(255,255,255,.15); color:#c7d2fe; }

/* Plan name & multiplier */
.bp-plan-name { font-size:18px; font-weight:900; color:var(--ink); letter-spacing:-.01em; }
.bp-multiplier { font-size:11.5px; font-weight:700; color:#7c3aed; background:#f3e8ff; border-radius:6px; padding:2px 8px; align-self:flex-start; }

/* Pricing */
.bp-price-wrap { display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; }
.bp-price { font-size:22px; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.bp-price-period { font-size:12px; color:var(--muted); font-weight:500; }

/* Feature list — takes remaining space so card footer always aligns at bottom */
.bp-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; flex:1; }
.bp-features li { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.bp-features li::before { content:'✓'; font-size:10px; font-weight:900; color:var(--blue); background:var(--blue-100); width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Card footer — pinned to bottom */
.bp-card-footer { margin-top:auto; padding-top:4px; }

/* Subscribe button */
.bp-subscribe-btn { width:100%; padding:11px; border-radius:12px; font-weight:800; font-size:13.5px; border:none; cursor:pointer; transition:opacity .15s, transform .1s; letter-spacing:.01em; }
.bp-subscribe-btn:hover { opacity:.9; transform:translateY(-1px); }
.bp-subscribe-btn:active { transform:translateY(0); }
.bp-btn-basic    { background:var(--blue); color:#fff; }
.bp-btn-premium  { background:linear-gradient(135deg,#d97706,#b45309); color:#fff; }
.bp-btn-vip      { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; }
.bp-btn-vip_gold { background:linear-gradient(135deg,#b45309,#92400e); color:#fff; }
.bp-btn-diamond  { background:linear-gradient(135deg,#f0abfc,#e879f9); color:#4a044e; }
.bp-unavail { font-size:13px; color:var(--muted); text-align:center; padding:8px 0; }

/* How it works */
.bp-how { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px 24px; margin-bottom:32px; }
.bp-how-title { font-size:18px; font-weight:900; color:var(--ink); margin:0 0 6px; }
.bp-how-guide { margin:0 0 20px; }
.bp-how-guide a { color:var(--blue); font-weight:700; font-size:14px; }
.bp-how-guide a:hover { text-decoration:underline; }
/* Promotions guide table (help centre page) */
.static-body .promo-table { width:100%; border-collapse:collapse; margin:14px 0 22px; font-size:14px; }
.static-body .promo-table th, .static-body .promo-table td { text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top; }
.static-body .promo-table thead th { background:var(--bg); font-weight:800; color:var(--ink); }
.static-body .promo-table tbody tr:nth-child(even) { background:rgba(49,84,231,.03); }
.static-body h2 { font-size:20px; margin:26px 0 10px; }
.bp-how-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.bp-how-step { display:flex; gap:14px; align-items:flex-start; }
.bp-how-num { width:32px; height:32px; border-radius:50%; background:var(--blue-100); color:var(--blue); font-size:14px; font-weight:900; display:grid; place-items:center; flex-shrink:0; }
.bp-how-step strong { display:block; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.bp-how-step span { font-size:13px; color:var(--muted); line-height:1.5; }

/* Responsive */
@media(max-width:1100px){
  .bp-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:720px){
  .bp-hero { padding:20px 0 16px; }
  .bp-hero-title { font-size:24px; }
  .bp-hero-sub { font-size:13.5px; max-width:100%; }
  .bp-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .bp-card { padding:14px 11px 13px; gap:7px; }
  .bp-price { font-size:16px; }
  .bp-plan-name { font-size:14px; }
  .bp-multiplier { font-size:10.5px; padding:2px 6px; }
  .bp-features li { font-size:11.5px; gap:5px; }
  .bp-features li::before { width:14px; height:14px; font-size:9px; }
  .bp-subscribe-btn { font-size:12.5px; padding:9px 6px; border-radius:10px; }
  .bp-how { padding:18px 16px; }
  .bp-how-grid { grid-template-columns:1fr; }
  .acct-nav a[href="/dashboard/plans"] .ai svg { width:18px; height:18px; }
}
@media(max-width:400px){
  .bp-grid { gap:8px; }
  .bp-card { padding:12px 10px; }
  .bp-icon { width:34px; height:34px; border-radius:9px; }
  .bp-icon svg { width:16px; height:16px; }
  .bp-price { font-size:15px; }
}

/* ===== Ticket QR verification ===== */
.tv-wrap { max-width:440px; margin:24px auto; padding:0 16px; }
.tv-card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:30px 24px; text-align:center; border-top:5px solid var(--line); }
.tv-state-valid { border-top-color:#16a34a; }
.tv-state-used { border-top-color:#d97706; }
.tv-state-unpaid, .tv-state-void, .tv-state-invalid { border-top-color:#dc2626; }
.tv-badge { width:72px; height:72px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.tv-badge svg { width:36px; height:36px; }
.tv-state-valid .tv-badge { background:linear-gradient(135deg,#22c55e,#08843c); box-shadow:0 10px 24px rgba(34,197,94,.3); }
.tv-state-used .tv-badge { background:linear-gradient(135deg,#f59e0b,#b45309); box-shadow:0 10px 24px rgba(245,158,11,.3); }
.tv-state-unpaid .tv-badge, .tv-state-void .tv-badge, .tv-state-invalid .tv-badge { background:linear-gradient(135deg,#ef4444,#b91c1c); box-shadow:0 10px 24px rgba(239,68,68,.3); }
.tv-status { font-size:24px; font-weight:900; margin:0 0 6px; letter-spacing:-.02em; }
.tv-sub { color:var(--muted); font-size:14px; margin:0 0 18px; }
.tv-meta { text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0 0 16px; }
.tv-event { font-size:16px; font-weight:800; color:var(--ink); }
.tv-when { font-size:13px; color:var(--muted); margin:2px 0 10px; }
.tv-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px; border-top:1px solid var(--line); }
.tv-row span { color:var(--muted); } .tv-row strong { color:var(--ink); }
.tv-code { font-family:monospace; letter-spacing:1px; color:var(--blue); }
.tv-result { border-radius:12px; padding:11px; font-weight:800; font-size:14.5px; margin:0 0 14px; }
.tv-result.ok { background:#ecfdf3; color:#08843c; border:1px solid #b7efc6; }
.tv-result.bad { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.tv-checkin { width:100%; font-size:16px; padding:14px; }
.tv-note { font-size:13px; color:var(--muted); margin:12px 0 0; }
.tv-public a { color:var(--blue); font-weight:700; }
.tv-scan-again { display:inline-block; margin-top:14px; color:var(--blue); font-weight:700; font-size:13.5px; }

/* ticket stub QR on the holder's ticket page */
.ts-qr { position:relative; flex-shrink:0; display:block; line-height:0; }
.ts-qr img { border:1px solid var(--line); border-radius:10px; background:#fff; padding:4px; box-sizing:border-box; }
.ts-qr-used { position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.78); color:#b45309; font-weight:900; font-size:15px; letter-spacing:2px; border-radius:10px; }

/* organizer agents */
.agent-add { display:flex; gap:10px; margin:14px 0 4px; }
.agent-add .inp { flex:1; }
.agent-list { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.agent-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.agent-info { display:flex; flex-direction:column; }
.agent-name { font-weight:800; color:var(--ink); font-size:14.5px; }
.agent-contact { font-size:12.5px; color:var(--muted); }
.scan-tip { margin-top:12px; background:var(--blue-100); color:var(--blue-d); border-radius:10px; padding:10px 13px; font-size:13px; line-height:1.5; }
.scan-tip a { color:var(--blue); font-weight:700; }
@media(max-width:480px){ .agent-add { flex-direction:column; } }

/* ===== Help Centre / FAQ ===== */
.faq-wrap { max-width:820px; margin:0 auto; }
.static-page .faq-wrap { padding:8px 0; }
.faq-intro { text-align:center; padding:8px 0 18px; }
.faq-h1 { font-size:clamp(24px,4vw,34px); font-weight:900; letter-spacing:-.02em; margin:0 0 8px; }
.faq-sub { color:var(--muted); font-size:15px; margin:0 auto 18px; max-width:520px; }
.faq-search { display:flex; align-items:center; gap:10px; max-width:520px; margin:0 auto; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:0 14px; box-shadow:var(--shadow); }
.faq-search svg { color:var(--muted); flex-shrink:0; }
.faq-search input { flex:1; border:0 !important; background:transparent !important; box-shadow:none !important; padding:13px 0 !important; font-size:15px; outline:none; border-radius:0 !important; }
/* topic chips */
.faq-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 22px; }
.faq-chip { display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:7px 13px; font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; transition:border-color .12s, background .12s; }
.faq-chip:hover { border-color:var(--blue); background:var(--blue-100); color:var(--blue); }
.faq-chip-ic { display:inline-flex; color:var(--blue); }
.faq-chip-ic svg { width:15px; height:15px; }
/* mobile jump dropdown — hidden on desktop */
.faq-jump-wrap { display:none; margin:0 0 22px; }
.faq-jump { width:100%; font-size:15px; font-weight:700; }
/* sections */
.faq-sec { margin-bottom:26px; scroll-margin-top:80px; }
.faq-sec-h { display:flex; align-items:center; gap:11px; font-size:18px; font-weight:900; letter-spacing:-.01em; margin:0 0 12px; }
.faq-sec-ic { width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--blue-100); color:var(--blue); display:grid; place-items:center; }
.faq-sec-ic svg { width:19px; height:19px; }
.faq-items { display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .15s, border-color .15s; }
.faq-item[open] { border-color:var(--blue); box-shadow:0 4px 16px rgba(20,30,40,.07); }
.faq-item summary { display:flex; align-items:center; gap:12px; justify-content:space-between; cursor:pointer; list-style:none; padding:15px 18px; font-size:15px; font-weight:700; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--blue); }
.faq-caret { width:18px; height:18px; flex-shrink:0; color:var(--muted); transition:transform .2s; }
.faq-item[open] .faq-caret { transform:rotate(180deg); color:var(--blue); }
.faq-a { padding:0 18px 17px; color:var(--muted); font-size:14.5px; line-height:1.65; }
.faq-a p { margin:0 0 10px; } .faq-a p:last-child { margin-bottom:0; }
.faq-a a { color:var(--blue); font-weight:600; }
.faq-a ul { margin:6px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.faq-a li { line-height:1.55; }
.faq-a strong { color:var(--ink); }
.faq-noresults { text-align:center; color:var(--muted); padding:24px; }
.faq-foot { margin:6px 0 30px; background:linear-gradient(135deg,#f8fbff,#fff); border:1px solid #cbdcff; border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.faq-foot strong { font-size:15px; color:#172554; }
.faq-foot span { font-size:14px; color:var(--muted); }
.faq-foot a { color:var(--blue); font-weight:600; }
html[data-theme="dark"] .faq-foot { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.25); }
html[data-theme="dark"] .faq-foot strong { color:#cfe0ff; }
@media(max-width:560px){
  .faq-item summary { padding:13px 15px; font-size:14.5px; }
  .faq-a { padding:0 15px 15px; }
  .faq-chips { display:none; }
  .faq-jump-wrap { display:block; }
}

/* ===== Get Verified page ===== */
.gv-hero { display:flex; align-items:center; gap:20px; margin:6px 0 22px; }
.gv-hero-badge { position:relative; width:104px; height:104px; flex-shrink:0; border-radius:30px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 40%), linear-gradient(150deg,#5965ff,#1f2bd8);
  color:#fff; display:grid; place-items:center; box-shadow:0 18px 36px rgba(39,48,216,.28); }
.gv-hero-badge svg { width:50px; height:50px; }
.gv-hero-badge::before { content:""; position:absolute; inset:-16px; border-radius:50%; background:rgba(49,84,231,.07); z-index:-1; }
.gv-spark { position:absolute; border-radius:2px; }
.gv-spark-1 { width:7px; height:7px; background:var(--amber); top:-6px; right:8px; transform:rotate(20deg); }
.gv-spark-2 { width:5px; height:5px; background:#a5b4fc; bottom:2px; left:-6px; }
.gv-spark-3 { width:6px; height:6px; background:var(--amber); bottom:14px; right:-8px; }
.gv-hero-text h1 { margin:0; font-size:clamp(26px,5vw,38px); font-weight:900; line-height:1.08; letter-spacing:-.03em; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gv-hero-text h1 span { color:var(--blue); }
.gv-tick { width:30px; height:30px; color:var(--blue); }
.gv-hero-text p { margin:10px 0 0; color:var(--muted); font-size:15px; line-height:1.5; }

.gv-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:22px; margin-bottom:18px; }
.gv-card-title { display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.gv-card-title h2 { margin:0; font-size:19px; font-weight:900; letter-spacing:-.01em; }
.gv-title-ic { width:50px; height:50px; flex-shrink:0; border-radius:50%; background:var(--blue-100); color:var(--blue); display:grid; place-items:center; }
.gv-title-ic svg { width:24px; height:24px; }

.gv-benefits { margin-top:6px; }
.gv-benefit { display:flex; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); }
.gv-benefit:last-child { border-bottom:none; }
.gv-bic { width:50px; min-width:50px; height:50px; border-radius:15px; display:grid; place-items:center; flex-shrink:0; }
.gv-bic svg { width:24px; height:24px; }
.gv-bic-green { background:#ecfdf3; color:#16a34a; }
.gv-bic-gold { background:#fff8e1; color:#d99a00; }
.gv-bic-purple { background:#f3edff; color:#7c3aed; }
.gv-benefit h3 { margin:0 0 5px; font-size:15.5px; font-weight:800; color:var(--ink); }
.gv-benefit p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

.gv-status-banner { margin-top:18px; border-radius:15px; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.gv-status-banner.gv-ok { background:linear-gradient(135deg,#ecfdf3,#f7fff9); border:1px solid #b7efc6; }
.gv-status-banner.gv-pending { background:#fffbeb; border:1px solid #fde68a; }
.gv-sb-ic { width:44px; height:44px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; color:#fff; }
.gv-ok .gv-sb-ic { background:linear-gradient(135deg,#22c55e,#08843c); box-shadow:0 8px 18px rgba(34,197,94,.28); }
.gv-pending .gv-sb-ic { background:linear-gradient(135deg,#f59e0b,#b45309); }
.gv-sb-ic svg { width:22px; height:22px; }
.gv-status-banner p { margin:0; font-size:14px; color:var(--ink); line-height:1.5; }
.gv-ok strong { color:#08843c; }
.gv-status-banner span { color:var(--muted); }
.gv-sb-check { width:22px; height:22px; margin-left:auto; color:#16a34a; flex-shrink:0; }

.gv-apply { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 16px; flex-wrap:wrap; }
.gv-apply-info { display:flex; flex-direction:column; }
.gv-apply-amt { font-size:22px; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.gv-apply-sub { font-size:12.5px; color:var(--muted); }
.gv-apply-btn { flex-shrink:0; }
.gv-apply-note { font-size:13px; color:var(--muted); margin:10px 0 0; }

.gv-status-card { display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
.gv-status-main h2 { margin:0 0 16px; font-size:19px; font-weight:900; }
.gv-status-row { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:800; }
.gv-status-dot { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.gv-status-dot svg { width:20px; height:20px; }
.gv-verified .gv-status-dot { background:#ecfdf3; color:#16a34a; } .gv-verified strong { color:#08843c; }
.gv-review .gv-status-dot { background:#fffbeb; color:#b45309; } .gv-review strong { color:#b45309; }
.gv-none .gv-status-dot { background:var(--bg); color:var(--muted); border:1px solid var(--line); } .gv-none strong { color:var(--muted); }
.gv-status-mark { color:rgba(34,197,94,.12); flex-shrink:0; }
.gv-status-mark svg { width:96px; height:96px; }

.gv-notice { display:flex; align-items:center; gap:14px; border:1px solid #cbdcff; background:linear-gradient(135deg,#f8fbff,#fff); border-radius:16px; padding:16px; margin-bottom:24px; }
.gv-notice-ic { width:46px; height:46px; flex-shrink:0; border-radius:13px; background:linear-gradient(135deg,#3b82f6,#2730d8); color:#fff; display:grid; place-items:center; }
.gv-notice-ic svg { width:22px; height:22px; }
.gv-notice h3 { margin:0; font-size:14px; font-weight:800; color:#172554; }
.gv-notice p { margin:5px 0 0; font-size:13px; color:var(--muted); }
@media(max-width:560px){
  .gv-hero { gap:14px; }
  .gv-hero-badge { width:84px; height:84px; border-radius:24px; }
  .gv-hero-badge svg { width:40px; height:40px; }
  .gv-status-mark svg { width:72px; height:72px; }
}
html[data-theme="dark"] .gv-notice { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.25); }
html[data-theme="dark"] .gv-notice h3 { color:#cfe0ff; }

/* ===== Settings: contact (email/phone) with verified change ===== */
.contact-block { margin-top:18px; border-top:1px solid var(--line); padding-top:6px; }
.contact-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.contact-row:last-of-type { border-bottom:none; }
.contact-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.contact-label { font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
.contact-val { font-size:14.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.contact-badge { font-size:11px; font-weight:800; border-radius:20px; padding:2px 8px; }
.contact-badge.verified { background:#ecfdf5; color:#059669; }
.contact-badge.unverified { background:#fef3c7; color:#92400e; }
.contact-change-btn { flex-shrink:0; }
.contact-change { margin:4px 0 14px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.contact-change.is-hidden { display:none; }

/* ===== Withdrawal confirmation (2-step OTP) ===== */
.wd-confirm { display:flex; justify-content:center; padding:10px 0 30px; }
.wd-confirm-card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); text-align:center; }
.wd-confirm-ic { width:54px; height:54px; margin:0 auto 14px; border-radius:15px; background:var(--blue-100); color:var(--blue); display:grid; place-items:center; }
.wd-confirm-ic svg { width:26px; height:26px; }
.wd-confirm-title { font-size:21px; font-weight:900; color:var(--ink); margin:0 0 8px; }
.wd-confirm-sub { font-size:14px; color:var(--muted); line-height:1.55; margin:0 0 20px; }
.wd-confirm-summary { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:18px; text-align:left; }
.wd-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:14px; }
.wd-row span { color:var(--muted); }
.wd-row strong { color:var(--ink); font-weight:800; }
.wd-code-input { text-align:center; font-size:26px !important; font-weight:800; letter-spacing:.4em; padding:12px !important; }
.wd-confirm-foot { margin-top:16px; display:flex; align-items:center; justify-content:center; gap:10px; }
.wd-link { background:none; border:0; color:var(--blue); font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; padding:0; text-decoration:none; }
.wd-link:hover { text-decoration:underline; }
.wd-dot { color:var(--line); }

/* ===== Wallet & Payments page ===== */
.wlt-header { margin-bottom:20px; }
.wlt-title { font-size:clamp(20px,4vw,26px); font-weight:900; color:var(--ink); margin:0 0 4px; }
.wlt-sub { font-size:14px; color:var(--muted); margin:0; }

/* Top row: balance + top-up — equal height */
.wlt-top { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px; align-items:stretch; }
@media(max-width:680px){ .wlt-top { grid-template-columns:1fr; } }

.wlt-bal-card { background:linear-gradient(135deg,#3542d7 0%,#1e3a8a 100%); color:#fff; border-radius:18px; padding:26px 24px 22px; display:flex; flex-direction:column; justify-content:space-between; min-height:180px; }
.wlt-bal-inner { display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.wlt-bal-ic { width:44px; height:44px; flex-shrink:0; background:rgba(255,255,255,.18); border-radius:13px; padding:10px; box-sizing:border-box; }
.wlt-bal-label { font-size:11px; font-weight:800; opacity:.7; letter-spacing:.07em; text-transform:uppercase; margin-bottom:5px; }
.wlt-bal-amount { font-size:34px; font-weight:900; letter-spacing:-.03em; line-height:1; }
.wlt-bal-note { font-size:11.5px; opacity:.55; margin-top:6px; }
/* mini txn list inside balance card */
.wlt-txn-mini { border-top:1px solid rgba(255,255,255,.16); padding-top:12px; display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.wlt-txn-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; gap:8px; }
.wlt-txn-desc { color:rgba(255,255,255,.7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wlt-cr { color:#86efac; font-weight:700; white-space:nowrap; }
.wlt-dr { color:#fca5a5; font-weight:700; white-space:nowrap; }

.wlt-topup-card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; }
.wlt-topup-form { display:flex; flex-direction:column; flex:1; }
.wlt-topup-btn { margin-top:auto; }
.wlt-topup-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--ink); margin:0 0 14px; }
.wlt-processing { display:flex; align-items:center; gap:7px; background:#fffbeb; color:#92400e; border:1px solid #fde68a; border-radius:9px; padding:8px 12px; font-size:13px; margin-bottom:12px; }
/* Quick-amount chips */
.wlt-topup-amounts { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.wlt-amt-chip { padding:6px 14px; border-radius:20px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-size:13px; font-weight:700; cursor:pointer; transition:background .12s, border-color .12s; }
.wlt-amt-chip:hover, .wlt-amt-chip.on { border-color:var(--blue); background:var(--blue-100); color:var(--blue); }
.wlt-field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
@media(max-width:420px){ .wlt-field-row { grid-template-columns:1fr; } }
.wlt-field label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px; letter-spacing:.02em; text-transform:uppercase; }
.wlt-topup-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.wlt-no-pay { font-size:13px; color:var(--muted); }

/* Payment history section */
.wlt-pay-section { }
.wlt-pay-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.wlt-pay-title { font-size:16px; font-weight:800; color:var(--ink); margin:0; }
.wlt-pay-total { font-size:13px; color:var(--muted); font-weight:600; }
.wlt-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 16px; color:var(--muted); text-align:center; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.wlt-empty svg { opacity:.35; }
.wlt-empty strong { color:var(--ink); font-size:15px; }
.wlt-empty span { font-size:13.5px; }

/* Filter tabs */
.wlt-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:4px; }
.wlt-tab { padding:7px 14px; border-radius:7px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; transition:background .12s, color .12s; }
.wlt-tab span { font-size:11px; background:var(--line); color:var(--muted); border-radius:10px; padding:1px 6px; margin-left:3px; font-weight:700; }
.wlt-tab.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(20,30,40,.1); }
.wlt-tab.on span { background:var(--blue-100); color:var(--blue); }

/* Payment rows */
.wlt-paylog { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px; }
.wlt-pay-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line); }
.wlt-pay-row:last-child { border-bottom:none; }
.wlt-pay-ic { width:40px; height:40px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; }
.wlt-pay-ic svg { width:18px; height:18px; }
.wlt-pay-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wlt-pay-info strong { font-size:14px; font-weight:800; color:var(--ink); }
.wlt-pay-ctx { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wlt-pay-receipt { font-size:12px; color:var(--muted); }
.wlt-pay-fail { font-size:12px; color:#dc2626; }
.wlt-pay-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.wlt-pay-amt { font-size:15px; font-weight:800; color:var(--ink); white-space:nowrap; }
.wlt-pay-date { font-size:12px; color:var(--muted); }
.wlt-vat-note { font-size:12.5px; color:var(--muted); margin-top:8px; }
.txn-credit { color:#059669; font-weight:700; }
.txn-debit  { color:#dc2626; font-weight:700; }
.paylog-main { min-width:0; }
.paylog-main strong { display:block; font-size:15px; font-weight:800; color:var(--ink); }
.paylog-desc { color:var(--muted); font-size:13px; margin-top:2px; word-break:break-word; }
.paylog-sub { color:var(--muted); font-size:12px; margin-top:3px; }
.paylog-fail { color:#b91c1c; }
.paylog-meta { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px; white-space:nowrap; }
.paylog-amt { font-size:16px; font-weight:900; color:var(--ink); letter-spacing:-.02em; }
.paylog-date { color:var(--muted); font-size:12px; }
.paylog .badge { font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.badge.pay-success { background:#dcfce7; color:#166534; }
.badge.pay-pending { background:#fff1df; color:#d9511e; }
.badge.pay-failed { background:#fee2e2; color:#b91c1c; }
html[data-theme="dark"] .badge.pay-success { background:rgba(34,197,94,.16); color:#86efac; }
html[data-theme="dark"] .badge.pay-pending { background:rgba(217,81,30,.18); color:#fdba74; }
html[data-theme="dark"] .badge.pay-failed { background:rgba(185,28,28,.2); color:#fca5a5; }
.paylog-note { margin:16px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5; }
@media (max-width:560px){
  .paylog-row { grid-template-columns:38px minmax(0,1fr); }
  .paylog-ic { width:38px; height:38px; }
  .paylog-meta { grid-column:1/3; flex-direction:row; align-items:center; justify-content:space-between; text-align:left; margin-top:2px; }
}
/* trust strip (decorated cards) */
.trust-strip { margin-top:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-strip .trust-item { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:2px 14px; align-items:center; padding:18px 18px 18px 16px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.trust-strip .trust-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#3154e7,#bc3aa1); }
.trust-strip .trust-item:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,23,42,.12); border-color:var(--blue); }
.trust-strip .trust-icon { width:44px; height:44px; grid-row:1/3; border-radius:13px; background:linear-gradient(135deg,var(--blue-100),#fff); color:var(--blue); display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .trust-strip .trust-icon { background:linear-gradient(135deg,rgba(49,84,231,.18),rgba(188,58,161,.12)); }
.trust-strip .trust-icon svg { width:21px; height:21px; }
.trust-strip strong { grid-column:2; align-self:end; color:var(--ink); font-size:14px; font-weight:900; }
.trust-strip .trust-sub { grid-column:2; align-self:start; color:var(--muted); font-size:12px; line-height:1.4; }
@media (max-width:900px){ .trust-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .trust-strip { grid-template-columns:1fr; } }
@media (max-width:1100px){ .ppp-layout { grid-template-columns:1fr; } .ppp-summary-card { position:static; } }
@media (max-width:700px){
  .ppp-promo .ppp-hero h1 { font-size:26px; }
  .ppp-main-card { padding:18px; }
  .ppp-brand-row { grid-template-columns:1fr; }
  .ppp-logo { width:170px; }
  .listing-preview { grid-template-columns:1fr; }
  .listing-preview img, .listing-preview .lp-noimg { width:100%; height:150px; }
  .benefits-grid { grid-template-columns:1fr; }
  .payment-title { align-items:flex-start; flex-direction:column; }
  .summary-row { grid-template-columns:1fr; }
  .summary-row > strong { text-align:left; }
}

/* ===== Influencer store (vanity URL storefront) ===== */
.inf-store-hero { display:flex; align-items:center; gap:18px; padding:22px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(135deg, var(--blue-100), #fff); }
.inf-store-ava { flex:none; width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; color:#fff; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.inf-store-ava img { width:100%; height:100%; object-fit:cover; }
.inf-store-meta h1 { margin:0 0 4px; font-size:26px; }
.inf-store-tag { display:inline-block; background:var(--blue); color:#fff; font-size:12.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; }
.grid-sm { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
@media (max-width:560px) {
  .inf-store-hero { gap:12px; padding:16px; }
  .inf-store-ava { width:60px; height:60px; font-size:24px; }
  .inf-store-meta h1 { font-size:21px; }
}

/* ===== Event QR code (links to the event page) ===== */
.ev2-qr { display:flex; align-items:center; gap:14px; margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.ev2-qr img { width:104px; height:104px; border-radius:10px; flex:none; border:1px solid var(--line); background:#fff; }
.ev2-qr-txt { display:flex; flex-direction:column; gap:3px; font-size:13px; color:var(--muted); }
.ev2-qr-txt strong { color:var(--ink); font-size:14px; }
.rsvp-btn { background:var(--blue) !important; }
.ev2-qr-dl { display:inline-block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--blue); text-decoration:none; }
.ev2-qr-dl:hover { text-decoration:underline; }
/* Free-event RSVP: no subtotal bar sits between the buyer box and the button,
   so add the spacing the subtotal bar used to provide. */
.buyer-box + .mpesa-btn { margin-top:14px; }
.admin-note-banner { margin-top:8px; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:9px 12px; font-size:13px; color:#7c2d12; line-height:1.5; }
.admin-note-banner a { display:inline-block; margin-top:4px; font-weight:700; color:var(--blue); }
/* Brand-kit item on the create-event form */
.brand-kit-item { display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft, #f4f7ff); text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.brand-kit-item:hover { border-color:var(--blue); transform:translateY(-1px); }
.brand-kit-item .bki-ic { font-size:22px; flex:none; }
.brand-kit-item .bki-txt { display:flex; flex-direction:column; min-width:0; }
.brand-kit-item .bki-txt strong { font-size:14px; }
.brand-kit-item .bki-txt small { color:var(--muted); font-size:12.5px; }
.brand-kit-item .bki-arrow { margin-left:auto; color:var(--blue); font-weight:800; flex:none; }
/* Sold listing banner (page stays live with a "see similar" CTA) */
.sold-banner { display:flex; flex-direction:column; gap:6px; align-items:flex-start; background:#fef2f2; border:1px solid #fecaca; }
.sold-banner strong { font-size:16px; color:#b91c1c; }
.sold-banner span { font-size:13px; color:#7f1d1d; }
.sold-banner .btn { margin-top:6px; }
/* Admin users — actions kebab menu (fixed popover, moved to body on open) */
.adl-actions .usr-menu-btn { width:36px; height:36px; border:1px solid var(--line); border-radius:9px; background:var(--card,#fff); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.adl-actions .usr-menu-btn:hover { background:var(--soft,#f4f7ff); border-color:var(--blue); }
.adl-actions .usr-menu-btn svg { width:18px; height:18px; }
.usr-menu-pop { position:fixed; z-index:1000; background:var(--card,#fff); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 38px rgba(15,23,42,.18); padding:8px; min-width:240px; max-width:300px; display:none; }
.usr-menu-pop.show { display:block; }
.usr-menu-pop form { margin:0; }
.usr-menu-item { display:block; width:100%; text-align:left; border:0; background:transparent; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--ink); }
.usr-menu-item:hover { background:var(--soft,#f4f7ff); }
.usr-menu-item.danger { color:#b91c1c; }
.usr-menu-item.danger:hover { background:#fef2f2; }
.usr-menu-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 10px 4px; font-weight:700; }
.usr-suspend-menu input, .usr-suspend-menu select { width:100%; margin:4px 0; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit; color:var(--ink); background:var(--card,#fff); }
.usr-menu-pop hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
/* RSVP guest SMS reminder card */
.reminder-card { display:flex; gap:14px; align-items:flex-start; margin:14px 0 4px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,var(--blue-100),#fff); }
.reminder-ic { font-size:26px; flex:none; }
.reminder-body { min-width:0; }
.reminder-body strong { font-size:15px; }
.reminder-body p { margin:4px 0 10px; font-size:13.5px; }
.reminder-meta { font-size:13px; color:var(--muted); margin-bottom:10px; }
.reminder-meta strong { color:var(--ink); }
/* Push opt-in banner */
.push-optin { display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,var(--blue-100),#fff); }
.push-optin.is-on { display:none; }
.push-optin-ic { font-size:24px; flex:none; }
.push-optin-txt { display:flex; flex-direction:column; min-width:0; }
.push-optin-txt strong { font-size:14.5px; }
.push-optin-txt span { font-size:13px; color:var(--muted); }
.push-optin .btn { margin-left:auto; flex:none; }