/* ============================================================
   Social Market KH — Feng Shui White & Gold (Kua 6 Metal)
   mmohengheng.com design language: clean bright metallic gold,
   Google Sans type scale, elevated cards (gold hairline borders +
   soft layered shadows), MD3 pill controls with ripple state layer,
   modern rounded inputs, fintech-grade contrast.
   Light theme + Metal-Night dark ([data-theme=dark] AND
   prefers-color-scheme:dark both fully supported).
   Every selector and :root token name from the previous file kept.
   ============================================================ */
:root{
  /* brighter, cleaner metallic gold (was muddy olive #c9a227) */
  --primary:#d4af37; --primary-light:#faf3d9; --gold-ink:#7a5d0e;
  --gold-hi:#f2dc8a; --gold-deep:#a8851a;
  --secondary:#34a853; --error:#d93025; --error-bg:#fce8e6; --warn-bg:#fef7e0;
  /* warm pearl neutrals (Earth feeds Metal) */
  --surface:#ffffff; --surface-var:#f3f1ea; --surface-cont:#e9e6dc;
  --on-surface:#1c1d21; --on-surf-var:#5c5f66; --outline:#ddd8ca; --outline-var:#ebe8de;
  /* soft warm-tinted layered elevation */
  --shadow-1:0 1px 2px rgba(101,84,22,.08),0 2px 10px rgba(101,84,22,.06);
  --shadow-2:0 2px 4px rgba(101,84,22,.10),0 10px 28px rgba(101,84,22,.12);
  --shadow-3:0 2px 6px rgba(60,50,10,.08),0 14px 36px rgba(60,50,10,.16);
  --ring:0 0 0 3px rgba(212,175,55,.18);
  --gold-grad:linear-gradient(135deg,#f2dc8a,#d4af37 55%,#b8922a);
  --shape-sm:8px; --shape-md:12px; --shape-lg:16px; --shape-xl:24px;
  /* semantic status tokens + unified gold hairline */
  --success:#1e7e34; --success-bg:#e6f4ea; --warn-ink:#8a6d0f;
  --gold-line:rgba(201,162,39,.24);
}
/* ===== Metal-Night dark mode (matches mmohengheng.com) ===== */
:root[data-theme="dark"]{
  --surface:#171a21; --surface-var:#0e1015; --surface-cont:#232732;
  --on-surface:#eef1f6; --on-surf-var:#9aa3b2; --outline:#333a47; --outline-var:#262b35;
  --primary:#eecb52; --primary-light:#31290f; --gold-ink:#eecb52;
  --gold-hi:#ffe28a; --gold-deep:#c9a227;
  --error:#ff6b5e; --error-bg:#3a1f1d; --warn-bg:#3a2f12;
  --shadow-1:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);
  --shadow-2:0 4px 10px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.55);
  --shadow-3:0 2px 6px rgba(0,0,0,.45),0 16px 42px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(238,203,82,.22);
  --gold-grad:linear-gradient(135deg,#ffe28a,#eecb52 55%,#c9a227);
  --success:#8fd6a3; --success-bg:#1e3a24; --warn-ink:#ffe28a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#171a21; --surface-var:#0e1015; --surface-cont:#232732;
    --on-surface:#eef1f6; --on-surf-var:#9aa3b2; --outline:#333a47; --outline-var:#262b35;
    --primary:#eecb52; --primary-light:#31290f; --gold-ink:#eecb52;
    --gold-hi:#ffe28a; --gold-deep:#c9a227;
    --error:#ff6b5e; --error-bg:#3a1f1d; --warn-bg:#3a2f12;
    --shadow-1:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);
    --shadow-2:0 4px 10px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.55);
    --shadow-3:0 2px 6px rgba(0,0,0,.45),0 16px 42px rgba(0,0,0,.6);
    --ring:0 0 0 3px rgba(238,203,82,.22);
    --gold-grad:linear-gradient(135deg,#ffe28a,#eecb52 55%,#c9a227);
    --success:#8fd6a3; --success-bg:#1e3a24; --warn-ink:#ffe28a;
  }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* warm pearl page bg + faint gold coin-dot texture + top gold wash */
body{font-family:'Google Sans','Roboto',system-ui,sans-serif;color:var(--on-surface);min-height:100vh;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    linear-gradient(180deg,rgba(212,175,55,.06),rgba(212,175,55,0) 320px),
    radial-gradient(circle at 12px 12px, rgba(201,162,39,.05) 2px, transparent 2.6px) 0 0/46px 46px,
    #f7f4ec;}
:root[data-theme="dark"] body{background:
    linear-gradient(180deg,rgba(238,203,82,.05),rgba(238,203,82,0) 320px),
    radial-gradient(circle at 12px 12px, rgba(230,195,77,.06) 2px, transparent 2.6px) 0 0/46px 46px,
    var(--surface-var);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background:
    linear-gradient(180deg,rgba(238,203,82,.05),rgba(238,203,82,0) 320px),
    radial-gradient(circle at 12px 12px, rgba(230,195,77,.06) 2px, transparent 2.6px) 0 0/46px 46px,
    var(--surface-var);}}
a{color:inherit;text-decoration:none}
::selection{background:rgba(212,175,55,.32);color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* slim premium scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(160,140,70,.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(180,150,60,.55);border:2px solid transparent;background-clip:padding-box}

/* ── Top App Bar — gold sheen underline ─────────────────── */
.app-bar{position:sticky;top:0;z-index:100;background:var(--surface);box-shadow:var(--shadow-1);height:62px;padding:0 16px;display:flex;align-items:center;gap:14px;
  border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--gold-deep),var(--gold-hi),var(--gold-deep)) 1;}
.app-bar__logo{display:flex;align-items:center;gap:9px;font-family:'Google Sans',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.2px;cursor:pointer}
.app-bar__logo .dot{width:26px;height:26px;border-radius:7px;background:var(--gold-grad);display:inline-block;box-shadow:0 2px 6px rgba(201,162,39,.4)}
.app-bar__logoimg{width:34px;height:34px;border-radius:8px;object-fit:cover;display:inline-block;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.brand-gold{background:linear-gradient(90deg,var(--gold-hi),var(--primary),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.spacer{flex:1}
.nav-link{position:relative;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--on-surf-var);cursor:pointer;transition:background .15s,color .15s}
.nav-link:hover{background:var(--primary-light);color:var(--gold-ink)}

/* ── Buttons — MD3 pills with ripple state layer ────────── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.2px;cursor:pointer;border:none;transition:box-shadow .18s,filter .18s,transform .12s,border-color .18s;white-space:nowrap;text-decoration:none}
.btn::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;border-radius:inherit;pointer-events:none}
.btn:hover::before{opacity:.07}
.btn:active::before{opacity:.14}
.btn:active{transform:translateY(1px)}
.btn-filled{background:var(--gold-grad);color:#1a1400;box-shadow:0 1px 2px rgba(31,27,10,.15),0 4px 14px rgba(201,162,39,.35)}
.btn-filled:hover{filter:brightness(1.04);box-shadow:0 2px 4px rgba(31,27,10,.15),0 8px 22px rgba(201,162,39,.45)}
.btn-tonal{background:var(--primary-light);color:var(--gold-ink)}
.btn-tonal:hover{box-shadow:var(--shadow-1)}
.btn-outlined{background:transparent;color:var(--gold-ink);border:1.5px solid rgba(201,162,39,.5)}
.btn-outlined:hover{border-color:var(--primary);background:var(--primary-light)}
.btn-sm{height:34px;padding:0 14px;font-size:13px}
.btn-danger{background:var(--error);color:#fff;box-shadow:var(--shadow-1)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ── Layout ─────────────────────────────────────────────── */
.container{max-width:1140px;margin:0 auto;padding:24px 16px 44px}
/* section header — gold accent bar + lucky-coin ring (Metal = wealth) */
.section-title{font-family:'Google Sans',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.section-title::before{content:'';width:4px;height:20px;border-radius:3px;background:var(--gold-grad);flex:0 0 auto;box-shadow:0 1px 4px rgba(201,162,39,.4)}
.section-title::after{content:'';width:12px;height:12px;margin-left:2px;border-radius:50%;border:2px solid var(--primary);opacity:.6;flex:0 0 auto}
.section-title svg{animation:cardBob 3.2s ease-in-out infinite}
.plat-logo{width:30px;height:30px;flex-shrink:0}
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.market-grid{grid-template-columns:1fr}}
.market-single{width:100%}

/* ── Segmented platform switch — pill filters ───────────── */
.seg-wrap{display:flex;justify-content:center;margin:14px 0 28px}
.seg{display:inline-flex;gap:8px;background:var(--surface);border:1px solid rgba(201,162,39,.28);border-radius:999px;padding:8px;box-shadow:var(--shadow-1);max-width:100%}
.seg-btn{display:flex;align-items:center;gap:12px;border:none;background:transparent;color:var(--on-surf-var);font-family:'Google Sans',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.2px;padding:16px 38px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap}
.seg-btn:hover{background:var(--primary-light);color:var(--gold-ink)}
.seg-btn.active{background:var(--gold-grad);color:#2a2300;box-shadow:0 5px 18px rgba(201,162,39,.45)}
.seg-ico{display:inline-flex}.seg-ico svg{display:block;width:26px;height:26px}
.search-in{flex:1;min-width:150px}
@media(max-width:560px){.seg{width:100%;gap:4px;padding:5px}.seg-btn{flex:1;justify-content:center;padding:14px 6px;font-size:15px;gap:8px}.seg-ico svg{width:22px;height:22px}}

/* ── Panels — gold hairline card surface ────────────────── */
.panel{background:var(--surface);border:1px solid var(--gold-line);border-radius:var(--shape-lg);box-shadow:var(--shadow-1);padding:20px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 14px}

/* ── Inputs — modern rounded, soft gold focus ring ──────── */
select,input,textarea{font-family:inherit;font-size:14px;color:var(--on-surface);background:var(--surface);border:1px solid var(--outline);border-radius:10px;padding:10px 13px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
:root[data-theme="dark"] select,:root[data-theme="dark"] input,:root[data-theme="dark"] textarea{background:var(--surface-cont)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) select,:root:not([data-theme="light"]) input,:root:not([data-theme="light"]) textarea{background:var(--surface-cont)}}
select:hover:not(:focus),input:hover:not(:focus),textarea:hover:not(:focus){border-color:rgba(201,162,39,.5)}
select:focus,input:focus,textarea:focus{border-color:var(--primary);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--on-surf-var);opacity:.8}
/* iOS: >=16px controls stop the focus-zoom; bespoke large inputs (e.g. #fee-price) keep their size via id/class specificity */
@media(max-width:760px){select,input,textarea{font-size:16px}}

/* ── Data tables — airy rows, uppercase heads ───────────── */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
thead th{padding:13px 16px;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--on-surf-var);text-align:left;border-bottom:1px solid var(--outline-var);background:var(--surface-var);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--outline-var);transition:background .12s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(201,162,39,.05)}
tbody td{padding:13px 16px;font-size:14px;vertical-align:middle}
:root[data-theme="dark"] tbody tr:hover{background:rgba(230,195,77,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) tbody tr:hover{background:rgba(230,195,77,.06)}}

/* ── Listing / product cards ────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
@media(max-width:400px){.cards{grid-template-columns:1fr 1fr;gap:10px}}
.card{background:var(--surface);border:1px solid var(--gold-line);border-radius:var(--shape-md);padding:16px;text-align:center;cursor:pointer;box-shadow:var(--shadow-1);transition:box-shadow .18s,transform .14s,border-color .18s}
.card:hover{box-shadow:var(--shadow-2),0 6px 20px rgba(201,162,39,.14);transform:translateY(-3px);border-color:rgba(201,162,39,.5)}
/* animated platform logo — gentle bob + pop on hover */
.card .logo{width:56px;height:56px;margin:2px auto 10px;display:block;animation:cardBob 3s ease-in-out infinite;transform-origin:50% 50%}
.card:nth-child(2n) .logo{animation-delay:.5s}
.card:nth-child(3n) .logo{animation-delay:1s}
.card:hover .logo{animation:cardPop .5s ease}
@keyframes cardBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes cardPop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)}}
.card .card-title{font-weight:700;font-size:14px;line-height:1.3;margin-bottom:3px;color:var(--on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* shimmering gold price */
.card .price{font-family:'Google Sans',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.3px;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi),var(--gold-deep));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:priceShimmer 2.6s linear infinite}
:root[data-theme="dark"] .card .price{background:linear-gradient(90deg,#eecb52,#fff0b8,#eecb52);background-size:200% auto;-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card .price{background:linear-gradient(90deg,#eecb52,#fff0b8,#eecb52);background-size:200% auto;-webkit-background-clip:text;background-clip:text}}
@keyframes priceShimmer{to{background-position:200% center}}
/* type badge with a periodic shine sweep */
.card .type{position:relative;overflow:hidden;display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;background:var(--primary-light);color:var(--gold-ink)}
.card .type::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:typeShine 3.6s ease-in-out infinite}
@keyframes typeShine{0%{left:-70%}45%,100%{left:140%}}
.card .type.mon{background:var(--success-bg);color:var(--success);animation:monGlow 2.2s ease-in-out infinite}
@keyframes monGlow{0%,100%{box-shadow:0 0 0 rgba(52,168,83,0)}50%{box-shadow:0 0 11px rgba(52,168,83,.55)}}
.card .count{margin-top:9px;font-size:13px;color:var(--on-surf-var)}
@media (prefers-reduced-motion:reduce){.card .logo,.card .price,.card .type::after,.card .type.mon{animation:none}}

/* ── Chips / small text ─────────────────────────────────── */
.chip{display:inline-block;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--surface-var);color:var(--on-surf-var);border:1px solid var(--outline-var)}
.muted{color:var(--on-surf-var);font-size:13px}
/* ── Status badge (promoted to app.css; admin's inline .badge still wins locally) ── */
.badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1.4;padding:3px 9px;border-radius:var(--shape-sm);border:1px solid transparent;white-space:nowrap}
.badge-ok{background:var(--success-bg);color:var(--success);border-color:rgba(52,168,83,.3)}
.badge-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:rgba(201,162,39,.3)}
.badge-wait{background:var(--surface-var);color:var(--on-surf-var);border-color:var(--outline-var)}
.badge-danger{background:var(--error-bg);color:var(--error);border-color:rgba(217,48,37,.25)}

/* ── Messages ───────────────────────────────────────────── */
.msg{border-radius:var(--shape-sm);padding:11px 14px;font-size:14px;font-weight:500;margin-top:12px;border:1px solid transparent}
.msg-err{background:var(--error-bg);color:var(--error);border-color:rgba(217,48,37,.25)}
.msg-ok{background:var(--success-bg);color:var(--success);border-color:rgba(52,168,83,.25)}
.msg-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:rgba(201,162,39,.3)}
/* dark keeps only the border deltas; bg/ink now flow from the semantic tokens */
:root[data-theme="dark"] .msg-ok{border-color:rgba(52,168,83,.35)}
:root[data-theme="dark"] .msg-warn{border-color:rgba(238,203,82,.3)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .msg-ok{border-color:rgba(52,168,83,.35)}
  :root:not([data-theme="light"]) .msg-warn{border-color:rgba(238,203,82,.3)}
}

/* ── Form fields ────────────────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--on-surf-var);margin-bottom:6px;font-weight:700;letter-spacing:.3px}
.field input,.field select,.field textarea{width:100%}

/* ── Modal ──────────────────────────────────────────────── */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:300;padding:16px}
.modal-back.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--gold-line);border-radius:var(--shape-lg);box-shadow:var(--shadow-3);max-width:440px;width:100%;padding:24px;max-height:90vh;overflow:auto}
.stars{color:var(--primary);letter-spacing:2px}
.online-dot{width:9px;height:9px;border-radius:50%;background:#9aa0a6;display:inline-block}
.online-dot.on{background:var(--success);box-shadow:0 0 0 3px rgba(52,168,83,.18)}

/* ===== Feng Shui animated footer (Metal / Kua 6 wealth objects) ===== */
.fs-footer{margin-top:48px;padding:30px 16px 40px;border-top:1px solid rgba(201,162,39,.3);text-align:center;color:var(--primary);background:linear-gradient(180deg,rgba(201,162,39,.05),transparent)}
.fs-footer__objects{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:18px}
.fo-item{display:flex;flex-direction:column;align-items:center;gap:7px;width:96px}
.fo-item span{font-size:11px;color:var(--on-surf-var);letter-spacing:.2px}
.fo{width:50px;height:62px;color:var(--primary);filter:drop-shadow(0 2px 5px rgba(201,162,39,.35))}
.fo-coin{transform-style:preserve-3d;animation:foSpin 6s linear infinite}
@keyframes foSpin{to{transform:rotateY(360deg)}}
.fo-chime{transform-origin:50% 8%;animation:foSway 3.6s ease-in-out infinite}
@keyframes foSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.fo-ingot{animation:foFloat 2.8s ease-in-out infinite}
@keyframes foFloat{0%,100%{opacity:.8;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.fo-tree{transform-origin:50% 92%;animation:foSway2 4.4s ease-in-out infinite}
@keyframes foSway2{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.fo-chime-btn:active .fo-chime{transform:scale(1.12)}
.fs-footer__cap{font-family:'Google Sans',sans-serif;font-size:13px;font-weight:700;color:var(--gold-ink);margin-bottom:6px;letter-spacing:.2px}
.fs-footer__sub{font-size:12px;color:var(--on-surf-var)}
.fs-footer__sub a{color:var(--gold-ink)}
@media (prefers-reduced-motion:reduce){.fo-coin,.fo-chime,.fo-ingot,.fo-tree{animation:none}}
/* floating night-mode toggle (round Metal shape) */
.fs-theme-toggle{position:fixed;left:18px;bottom:18px;z-index:400;width:48px;height:48px;border-radius:50%;border:1px solid rgba(201,162,39,.55);background:var(--surface);color:var(--primary);cursor:pointer;box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;transition:transform .15s,background .2s,color .2s,box-shadow .2s}
.fs-theme-toggle:hover{transform:translateY(-2px) rotate(-8deg);box-shadow:var(--shadow-2),0 0 0 4px rgba(201,162,39,.15)}
.fs-theme-toggle svg{width:22px;height:22px;fill:currentColor}
.fs-theme-toggle .fs-moon{display:none}
:root[data-theme="dark"] .fs-theme-toggle .fs-sun{display:none}
:root[data-theme="dark"] .fs-theme-toggle .fs-moon{display:block}
/* mobile: FAB is redundant (theme toggles via #mode-ind in the hamburger menu) */
@media(max-width:760px){.fs-theme-toggle{display:none}}

/* ── Service Fee Calculator ─────────────────────────────── */
.fee-hero{text-align:center;margin:16px 0 22px}
.fee-hero h1{font-family:'Google Sans',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.fee-card{background:var(--surface);border:1px solid var(--gold-line);border-radius:var(--shape-lg);padding:22px;box-shadow:var(--shadow-1)}
.fee-label{display:block;font-weight:700;margin-bottom:8px}
.fee-input-wrap{display:flex;align-items:center;border:2px solid var(--outline-var);border-radius:12px;padding:2px 14px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.fee-input-wrap:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.fee-cur{font-size:24px;font-weight:800;color:var(--gold-ink);margin-right:6px}
#fee-price{border:none;outline:none;background:transparent;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;width:100%;padding:10px 0;color:inherit;box-shadow:none}
.fee-result{margin-top:18px;border-top:1px dashed var(--outline);padding-top:12px}
.fee-row{display:flex;justify-content:space-between;padding:7px 0;font-size:15px;font-variant-numeric:tabular-nums}
.fee-rate{color:var(--on-surf-var);font-weight:500;font-size:13px}
.fee-total{border-top:1px solid var(--outline-var);margin-top:6px;padding-top:12px;font-size:20px;font-weight:800}
.fee-total>span:last-child{color:var(--gold-ink)}
.fee-tiers{margin-top:18px;background:var(--surface);border:1px solid var(--outline-var);border-radius:var(--shape-lg);padding:14px 20px}
.fee-tiers__head{font-weight:800;margin-bottom:6px}
.fee-tiers .fee-row{font-size:14px;color:var(--on-surf-var);padding:5px 0}

/* ── Notifications + Chat nav ───────────────────────────── */
.nav-badge{position:absolute;top:2px;right:0;transform:translate(40%,-30%);background:var(--error);color:#fff;font-size:10px;font-weight:800;line-height:1;padding:2px 5px;border-radius:9px;min-width:16px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.nav-bell{display:inline-flex;align-items:center;position:relative}
.notif-wrap{position:relative;display:inline-flex}
.notif-dd{position:absolute;top:46px;right:0;width:300px;max-height:60vh;overflow-y:auto;background:var(--surface);border:1px solid var(--gold-line);border-radius:var(--shape-lg);box-shadow:var(--shadow-3);z-index:200;padding:6px}
.notif-item{display:block;padding:10px 12px;border-radius:9px;border-bottom:1px solid var(--outline-var);transition:background .12s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--surface-var)}
.ni-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ni-badge{background:var(--error);color:#fff;border-radius:9px;font-size:10px;font-weight:800;padding:1px 6px}
.ni-title{font-size:12px;color:var(--gold-ink);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-last{font-size:12px;color:var(--on-surf-var);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-empty{padding:16px;text-align:center;font-size:13px}

/* ── Chat message flair (Binance rainbow + link chips) ──── */
@keyframes rainbowShift{to{background-position:300% center}}
@keyframes bncPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.msg-link{display:inline-flex;align-items:center;gap:5px;background:var(--primary-light);color:var(--gold-ink);padding:3px 10px;border-radius:999px;font-weight:700;font-size:12px;margin-top:4px;text-decoration:none}
.msg-link.fb{background:#e7f0ff;color:#1877F2}
.cbub-bnc{background:#0b0e11 !important;border-color:#0b0e11 !important}
.cbub-bnc .cwho{color:#F0B90B !important;opacity:1}
.bnc-body{background:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#38ff6a,#00c2ff,#a56bff,#ff004c);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;animation:rainbowShift 3s linear infinite}
.bnc-ico{display:inline-block;color:#F0B90B;-webkit-text-fill-color:#F0B90B;margin-right:5px;font-weight:800;animation:bncPulse 1.3s ease-in-out infinite}

/* ── Chat bubbles (base — pages may refine) ─────────────── */
.cbub{max-width:80%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.5;background:var(--surface);border:1px solid var(--outline-var);align-self:flex-start;word-break:break-word;box-shadow:0 1px 2px rgba(31,27,10,.05)}
.cbub.mine{align-self:flex-end;background:var(--primary-light);color:var(--gold-ink);border-color:rgba(201,162,39,.3)}
.cbub.adm{border-color:var(--primary)}
.cbub .cwho{font-size:10px;font-weight:700;opacity:.7;margin-bottom:2px;letter-spacing:.3px}

/* ── Order invoice / summary box ────────────────────────── */
.invoice{background:var(--surface-var);border:1px solid var(--outline-var);border-radius:var(--shape-md);padding:4px 16px}
.invoice__head{font-family:'Google Sans',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.2px;padding:12px 0 6px}
.invoice__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--outline-var);font-variant-numeric:tabular-nums}
.invoice__row>span:first-child{color:var(--on-surf-var)}
.invoice__row>span:last-child{font-weight:600}
.invoice__row:last-child{border-bottom:none}
.invoice__hr{border:none;border-top:1px dashed var(--outline);margin:4px 0}
.invoice__total{border-bottom:none;padding:12px 0;font-size:17px;font-weight:800}
.invoice__total>span:last-child{color:var(--gold-ink);font-size:19px}
.invoice__prod{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}

/* ── Payment card (KHQR-style — stays white in both themes) ── */
.pay-row{margin:14px 0}
.pay-left{display:flex;flex-direction:column;gap:12px}
.pay-row.split{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
@media(max-width:620px){.pay-row.split{grid-template-columns:1fr;align-items:stretch}}
.pay-card{background:#fff;border-radius:16px;box-shadow:0 6px 28px rgba(0,0,0,.2);width:280px;max-width:100%;margin:0 auto;overflow:hidden;border:1px solid #e4e2da}
.pay-card__header{height:70px;display:flex;align-items:center;justify-content:center}
.pay-card__amount{font-family:'Google Sans',sans-serif;font-size:28px;font-weight:800;color:#111;margin-bottom:14px;line-height:1.2;font-variant-numeric:tabular-nums}
.pay-card__amount span{font-size:14px;font-weight:500;color:#666;margin-left:4px}
.pay-card__qr{display:flex;justify-content:center}
.pay-card__qr img{display:block;margin:0 auto}
.countdown-display{font-family:'Google Sans',sans-serif;font-size:34px;font-weight:800;color:var(--gold-ink);letter-spacing:2px;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.paid-box{margin-top:10px;text-align:center;background:var(--primary-light);border:1px solid rgba(201,162,39,.35);border-radius:12px;padding:14px}
.paid-badge{font-weight:800;color:var(--gold-ink);font-size:15px;letter-spacing:.2px}
.paid-timer{font-size:20px;font-weight:800;margin-top:4px;font-family:'Google Sans',sans-serif;color:var(--on-surface);font-variant-numeric:tabular-nums}

/* ── Sell form widgets (base — pages may refine) ────────── */
.dropzone{border:2px dashed rgba(201,162,39,.45);border-radius:12px;padding:24px 16px;text-align:center;color:var(--on-surf-var);cursor:pointer;background:rgba(201,162,39,.03);transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-light);color:var(--gold-ink)}
.img-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px}
.img-thumb{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--outline-var);aspect-ratio:1;box-shadow:var(--shadow-1)}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bank-chip{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--outline);border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;background:var(--surface);transition:border-color .15s,background .15s,box-shadow .15s}
.bank-chip:hover{border-color:var(--primary)}
.bank-chip.sel{border-color:var(--primary);box-shadow:var(--ring);background:var(--primary-light);color:var(--gold-ink)}
.bank-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ── Shared empty state (lists, search results, inbox, etc.) ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:44px 20px;color:var(--on-surf-var)}
.empty-state__icon{width:56px;height:56px;color:var(--primary);opacity:.5}
.empty-state__icon svg{display:block;width:100%;height:100%}
.empty-state__title{font-family:'Google Sans',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--on-surface)}
.empty-state__text{font-size:13.5px;line-height:1.5;max-width:340px}

/* ── Stat cards (promoted from admin.html so the dashboard can reuse them) ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.stat-card{background:var(--surface);border:1px solid rgba(201,162,39,.22);border-radius:var(--shape-lg);padding:18px;box-shadow:var(--shadow-1)}
.stat-val{font-size:28px;font-weight:800;color:var(--gold-ink)}
.stat-lbl{font-size:12px;color:var(--on-surf-var);margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.stat-sub{font-size:11px;color:var(--on-surf-var);margin-top:6px}
.stat-rev{background:linear-gradient(135deg,var(--primary-light),var(--surface));border-color:rgba(201,162,39,.45)}
/* Clickable stat card (e.g. "Owed to you" jumps to #owed) */
.stat-link{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s}
.stat-link:hover{box-shadow:var(--shadow-2);border-color:rgba(201,162,39,.5);transform:translateY(-2px)}

/* ── Support chat widget (dashboard.html seller-side card) ── */
.support-card{display:flex;flex-direction:column;gap:14px}
.support-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.support-msgs{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:14px;border-radius:var(--shape-md);background:var(--surface-var);border:1px solid var(--outline-var)}
.support-bubble{max-width:78%;padding:9px 12px;border-radius:16px;font-size:14px;box-shadow:var(--shadow-1);word-break:break-word}
.support-bubble--user{align-self:flex-end;background:var(--primary-light);color:var(--gold-ink);border-bottom-right-radius:5px}
.support-bubble--admin{align-self:flex-start;background:var(--surface);color:var(--on-surface);border:1px solid var(--outline-var);border-bottom-left-radius:5px}
.support-bubble--system{align-self:center;background:transparent;color:var(--on-surf-var);font-size:12px;box-shadow:none;text-align:center}
.support-bubble img{max-width:220px;border-radius:10px;margin-top:6px;cursor:zoom-in;display:block}
.support-bubble time{display:block;font-size:11px;color:var(--on-surf-var);margin-top:4px;opacity:.8}
.support-composer{display:flex;flex-direction:column;gap:10px}
.support-drop{border:1.5px dashed var(--outline-var);border-radius:12px;padding:14px;text-align:center;color:var(--on-surf-var);transition:border-color .15s,background .15s,color .15s}
.support-drop.dragover{border-color:var(--primary);background:var(--primary-light);color:var(--gold-ink)}
.support-preview{display:inline-flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--outline-var);border-radius:12px;background:var(--surface)}
.support-preview img{max-width:90px;max-height:90px;border-radius:8px;display:block}
.support-preview__x{border:none;background:var(--surface-var);color:var(--on-surface);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;flex:0 0 auto}
.support-preview__x:hover{background:var(--error);color:#fff}
.support-inputrow{display:flex;align-items:flex-end;gap:10px}
.support-inputrow textarea{flex:1;resize:none;max-height:140px}
.linkbtn{border:none;background:transparent;color:var(--gold-ink);font-weight:700;cursor:pointer;padding:0;font-size:inherit;text-decoration:underline}
.linkbtn:hover{opacity:.8}
.empty-state__cta{margin-top:6px}
/* ── accepted-payments strip (home + /p2p) ───────────────────────── */
@keyframes payShine{0%{left:-70%}55%,100%{left:130%}}
@keyframes payFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes payDot{0%,100%{box-shadow:0 0 0 0 rgba(27,138,63,.55)}50%{box-shadow:0 0 0 6px rgba(27,138,63,0)}}
.pay-strip{max-width:720px;margin:28px auto 4px;text-align:center}
.pay-strip__head{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--on-surf-var);margin-bottom:18px}
.pay-strip__dot{width:10px;height:10px;border-radius:50%;background:#1b8a3f;flex:0 0 auto;animation:payDot 1.8s ease-in-out infinite}
.pay-strip__logos{display:flex;justify-content:center;align-items:stretch;gap:18px;flex-wrap:wrap}
.pay-logo{position:relative;overflow:hidden;border-radius:16px;background:var(--surface);border:1px solid var(--outline-var);box-shadow:var(--shadow-1);padding:16px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .2s,box-shadow .2s;animation:payFloat 3.4s ease-in-out infinite}
.pay-logo:nth-child(2){animation-delay:.7s}
.pay-logo:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pay-logo img{height:62px;width:auto;display:block;border-radius:9px}
.pay-logo__cap{font-size:12.5px;font-weight:600;color:var(--on-surf-var)}
@media(max-width:560px){.pay-strip__head{font-size:12.5px}.pay-logo{padding:13px 18px}.pay-logo img{height:50px}}
.pay-logo::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-20deg);background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);animation:payShine 3.6s ease-in-out infinite;pointer-events:none}
.pay-logo:nth-child(2)::after{animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.pay-strip__dot,.pay-logo,.pay-logo::after{animation:none}}

/* ── brand: new silver mark + animated dark-silver wordmark ───────── */
.app-bar__logomark{width:34px;height:34px;display:inline-block;flex:0 0 auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));transition:transform .18s}
.app-bar__logo:hover .app-bar__logomark{transform:translateY(-1px) scale(1.04)}
.brand-silver{
  background:linear-gradient(100deg,#767c85 0%,#c3c8cf 18%,#f2f5f8 30%,#9297a0 46%,#767c85 62%,#c3c8cf 82%,#767c85 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:brandShimmer 4.5s linear infinite}
@keyframes brandShimmer{to{background-position:-200% center}}
@media (prefers-reduced-motion:reduce){.brand-silver{animation:none}.app-bar__logo:hover .app-bar__logomark{transform:none}}