/* ═══════════════════════════════════════════════════════════
   ApexBoost design system — tokens, components, animations
   ═══════════════════════════════════════════════════════════ */

:root {
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --primary: #2563eb;
  --primary-2: #0ea5e9;
  --primary-soft: rgba(37, 99, 235, 0.1);
  --accent: #10b981;
  /* --accent is a fill colour; at 2.4:1 on our backgrounds it fails AA as text.
     Anything that renders green *text* uses --accent-text instead. */
  --accent-text: #047857;
  --danger: #ef4444;
  /* Scrollbars are painted by the OS by default, so a dark page got a bright
     grey bar down the sidebar. These drive a thin, theme-aware one instead. */
  --scroll-thumb: rgba(15, 23, 42, 0.22);
  --scroll-thumb-hover: rgba(15, 23, 42, 0.4);
  /* Same split as --accent-text: --danger is a fill colour and only reaches
     3.76:1 as text on white. Red *text* (negative amounts, errors) uses this. */
  --danger-text: #b91c1c;
  --warning: #f59e0b;

  --bg: #f6f8fd;
  --surface: #ffffff;
  --surface-2: #eef2fa;
  --text: #0f172a;
  --text-soft: #55607a;
  --border: #e3e8f4;
  --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.24);

  --radius: 16px;
  --radius-sm: 10px;
  --grad: linear-gradient(120deg, #2563eb, #0ea5e9 55%, #10b981);
  --grad-btn: linear-gradient(120deg, #2563eb, #0ea5e9);
}

[data-theme="dark"] {
  --bg: #0a1020;
  --surface: #101a30;
  --surface-2: #16223c;
  --text: #ecf1fb;
  --text-soft: #93a0bd;
  --border: #223052;
  /* The light-theme blue only reaches 3.35:1 on these backgrounds, so links and
     accents get a lighter blue here (~6.8:1) to clear WCAG AA. --primary is
     text-only; the one place it backs white text sets its own colour. */
  --primary: #60a5fa;
  --primary-2: #38bdf8;
  --accent-text: #34d399;
  --danger-text: #fca5a5;
  --scroll-thumb: rgba(236, 241, 251, 0.2);
  --scroll-thumb-hover: rgba(236, 241, 251, 0.36);
  --primary-soft: rgba(56, 132, 255, 0.16);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The [hidden] attribute must always win over display rules (modals, panels, etc.) */
[hidden] { display: none !important; }

/* Grid/flex children default to min-width:auto (min-content), which lets wide
   tables or long unbreakable strings blow past the viewport. Force them to be
   shrinkable so inner .table-wrap scrolls instead of overflowing the page. */
.wallet-layout > *, .wallet-side, .wallet-side > *,
.order-layout > *, .settings-grid > *, .kpi-grid > *,
.tickets-list > *, .features-grid > *,
.showcase-grid > *, .steps > * { min-width: 0; }
.ticket-card, .ticket-msg, .ticket-meta, .ticket-head,
.ticket-card p, .ticket-card small, .ticket-card code { overflow-wrap: anywhere; word-break: break-word; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; vertical-align: middle; }
code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-size: 0.86em; word-break: break-all; }

/* Admin discoverability + Gemini OAuth consent. These use the same tokens as
   the public and dashboard surfaces, so dark mode remains consistent. */
.admin-console-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: .78rem; font-weight: 800; }
.admin-console-chip:hover { text-decoration: none; transform: translateY(-1px); }
.admin-console-chip svg { width: 16px; height: 16px; }
.admin-nav { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.admin-nav .pill { flex: 0 0 auto; scroll-snap-align: start; }

.oauth-consent-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(circle at 25% 5%, var(--primary-soft), transparent 34%), var(--bg); }
.oauth-consent-card { width: min(680px, 100%); padding: clamp(24px, 5vw, 44px); box-shadow: var(--shadow-lg); }
.oauth-consent-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.oauth-consent-brand > div { display: grid; gap: 3px; }
.oauth-consent-brand .eyebrow { color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.oauth-consent-card h1 { margin-bottom: 10px; font-size: clamp(1.65rem, 5vw, 2.35rem); }
.oauth-scope-list { display: grid; gap: 10px; margin: 24px 0; }
.oauth-scope-list > div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.oauth-scope-list > div > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); background: var(--surface); font-weight: 900; }
.oauth-scope-list p { display: grid; gap: 3px; }
.oauth-scope-list small { color: var(--text-soft); line-height: 1.45; }
.oauth-resource { display: grid; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--primary); background: var(--primary-soft); }
.oauth-resource span { color: var(--text-soft); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.oauth-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.oauth-consent-card .auth-fineprint { margin-top: 16px; text-align: left; }
.admin-integration-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); background: linear-gradient(135deg, var(--surface), var(--primary-soft)); }
.admin-integration-status { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-integration-status span { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-soft); font-size: .75rem; }
.admin-integration-status strong { color: var(--text); }
.admin-integration-endpoint { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.admin-integration-endpoint code { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-integration-card > .auth-fineprint { grid-column: 1 / -1; margin: 0; }

@media (max-width: 620px) {
  .admin-console-chip span { display: none; }
  .admin-console-chip { width: 38px; padding: 0; justify-content: center; }
  .oauth-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-integration-card { grid-template-columns: 1fr; }
  .admin-integration-status { justify-content: flex-start; }
  .admin-integration-endpoint { grid-column: auto; align-items: stretch; flex-direction: column; }
  .admin-integration-card > .auth-fineprint { grid-column: auto; }
}

/* ── Super Admin · Gemini MCP setup ── */
.gemini-admin-page { max-width: 1180px; }
.page-head.gemini-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.page-head.gemini-page-head > .btn { width: auto; justify-self: auto; }
.gemini-page-head p { max-width: 760px; margin-top: 8px; }
.gemini-guide-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 20px;
  margin-top: 20px; padding: clamp(22px, 4vw, 34px); border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 32%), linear-gradient(135deg, var(--surface), var(--primary-soft));
}
.gemini-guide-hero::after { content: ''; position: absolute; inset: -70% auto auto 50%; width: 42%; height: 240%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 10%, transparent), transparent); animation: gemini-sheen 7s ease-in-out infinite; pointer-events: none; }
@keyframes gemini-sheen { 0%, 72% { translate: -220% 0; } 100% { translate: 260% 0; } }
.gemini-orb { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 56%, var(--border)); border-radius: 20px; background: var(--primary-soft); box-shadow: 0 0 35px color-mix(in srgb, var(--primary) 22%, transparent); }
.gemini-orb span { color: var(--primary); font-size: 1.8rem; animation: gemini-orbit 3.8s ease-in-out infinite; }
@keyframes gemini-orbit { 0%, 100% { transform: rotate(-8deg) scale(.94); } 50% { transform: rotate(8deg) scale(1.08); } }
.gemini-guide-hero h2 { margin: 4px 0 8px; }
.gemini-guide-hero > .gemini-copy-field { grid-column: 1 / -1; }
.gemini-copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.gemini-copy-field > span { grid-column: 1 / -1; color: var(--text-soft); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gemini-copy-field code,
.gemini-copy-field .gemini-copy-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; padding: 0; color: var(--text); }
.gemini-copy-field .gemini-copy-value { width: 100%; border: 0; outline: 0; border-radius: 4px; font: .78rem/1.5 var(--font-mono); cursor: text; }
.gemini-copy-field code::selection,
.gemini-copy-field .gemini-copy-value::selection { color: #081006; background: var(--primary); }
.gemini-client-id.gemini-copy-field { padding: 0; border: 0; background: transparent; }
.copy-btn.is-copy-success { color: #081006; border-color: var(--primary); background: var(--primary); }
.copy-btn.is-copy-error { color: var(--text); border-color: var(--warning, #e0a928); background: color-mix(in srgb, var(--warning, #e0a928) 14%, var(--surface)); }
.gemini-copy-help { margin: 12px 0 0; color: var(--text-soft); font-size: .75rem; }
.gemini-copy-help kbd { padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; color: var(--text); background: var(--surface-2); font: 700 .68rem var(--font-mono); }
.gemini-step-list { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.gemini-step-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.gemini-step-list li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font: 800 .9rem/1 var(--font-head); }
.gemini-step-list p { color: var(--text-soft); margin-top: 3px; }
.gemini-requirements { margin-top: 16px; padding: 13px 15px; border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; background: var(--primary-soft); color: var(--text-soft); }
.gemini-secret-panel { display: grid; gap: 10px; margin: 18px 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--border)); border-radius: 16px; background: linear-gradient(135deg, var(--primary-soft), var(--surface)); box-shadow: 0 16px 42px -34px var(--primary); }
.gemini-secret-alert { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--primary); }
.gemini-secret-alert span { color: var(--text-soft); font-size: .82rem; }
.gemini-secret-field { border-color: color-mix(in srgb, var(--primary) 52%, var(--border)); }
.gemini-secret-empty { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 15px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface-2); }
.gemini-secret-empty > span { font-size: 1.35rem; }
.gemini-secret-empty p { color: var(--text-soft); font-size: .86rem; }
.gemini-client-form { display: grid; grid-template-columns: .85fr 1.35fr auto; gap: 12px; align-items: end; }
.gemini-client-form .field { margin: 0; }
.gemini-endpoint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gemini-client-list { display: grid; gap: 10px; }
.gemini-client-row { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr); gap: 8px 16px; padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.gemini-client-row > div:first-child { display: grid; }
.gemini-client-row small, .gemini-client-row p { color: var(--text-soft); font-size: .78rem; overflow-wrap: anywhere; }
.gemini-client-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gemini-client-id code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gemini-client-row > p { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .page-head.gemini-page-head { align-items: flex-start; flex-direction: column; }
  .gemini-client-form { grid-template-columns: 1fr; }
  .gemini-endpoint-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gemini-guide-hero { grid-template-columns: 1fr; }
  .gemini-guide-hero > .gemini-copy-field { grid-column: auto; }
  .gemini-copy-field { grid-template-columns: 1fr; }
  .gemini-copy-field > span { grid-column: auto; }
  .gemini-copy-field .btn { width: 100%; }
  .gemini-client-row { grid-template-columns: 1fr; }
  .gemini-client-id { align-items: stretch; flex-direction: column; }
  .gemini-client-row > p { grid-column: auto; }
}

.container { width: min(1160px, 100% - 40px); margin-inline: auto; }
.container-narrow { width: min(820px, 100% - 40px); }
.center { text-align: center; margin-top: 32px; }
.muted { color: var(--text-soft); }
.mt { margin-top: 28px; }
.mt-sm { margin-top: 12px; }
.pos { color: var(--accent-text); }
.neg { color: var(--danger-text); }
.refund { color: var(--accent-text); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Reveal-on-scroll animation ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  padding: 11px 22px; border-radius: 12px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.55); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 28px -8px rgba(37, 99, 235, 0.6); }
.btn-glow { position: relative; }
.btn-glow::after {
  content: ''; position: absolute; inset: -3px; border-radius: 15px; z-index: -1;
  background: var(--grad); filter: blur(14px); opacity: 0.45;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } }
.btn-outline { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-white { background: #fff; color: #1d4ed8; }
.btn-white:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px -10px rgba(0,0,0,0.35); }
.btn-success { background: #047857; color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-google { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-google:hover { border-color: var(--primary); }
.btn-sm { padding: 7px 14px; font-size: 0.85rem; border-radius: 10px; }
.btn-lg { padding: 14px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.scrolled { border-color: var(--border); box-shadow: 0 6px 24px -18px rgba(15, 23, 42, 0.35); }
.nav-inner { display: flex; align-items: center; gap: 26px; padding: 14px 0; min-width: 0; }
/* The wordmark is the only flexible part of the bar, so it absorbs the squeeze
   at any viewport width — without this the row overflows and the menu button
   ends up off-screen (body overflow-x:hidden hides it instead of scrolling). */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; color: var(--text); min-width: 0; }
.brand-mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; background: var(--grad-btn); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
}
.brand-text {
  font-family: var(--font-head); font-weight: 800; font-size: 1.2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-link {
  padding: 8px 13px; border-radius: 10px; color: var(--text-soft); font-weight: 500; font-size: 0.94rem;
  text-decoration: none !important; transition: color 0.15s, background 0.15s;
}
.nav-link:hover, .nav-link.active { color: var(--primary); background: var(--primary-soft); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-balance { font-weight: 700; font-family: var(--font-head); color: var(--accent-text); font-size: 0.95rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-soft); cursor: pointer; font-size: 1.1rem;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }
.nav-burger { display: none; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 860px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--surface); padding: 12px 20px 18px;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-burger { display: inline-flex; }
  .nav-balance { display: none; }
  /* .nav-links carries margin-right:auto to push the actions right on desktop,
     but it goes position:absolute here — so the actions need their own auto
     margin or the row overflows and the burger lands off-screen. */
  .nav-actions { margin-left: auto; }
}

/* ── Flash ── */
.flash { padding: 12px 0; font-weight: 500; animation: slideDown 0.35s ease; }
.flash .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.flash-success { background: rgba(16, 185, 129, 0.14); color: #047857; }
.flash-error { background: rgba(239, 68, 68, 0.13); color: #b91c1c; }
[data-theme="dark"] .flash-success { color: #6ee7b7; }
[data-theme="dark"] .flash-error { color: #fca5a5; }
.flash-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: inherit; line-height: 1; }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

.announce { background: var(--grad); color: #fff; text-align: center; padding: 9px 0; font-weight: 600; font-size: 0.92rem; }

/* ── Cards ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}

/* ── Hero ── */
.hero { position: relative; padding: 88px 0 100px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.blob-1 { width: 480px; height: 480px; background: #2563eb; top: -180px; left: -120px; animation: blobDrift 14s ease-in-out infinite alternate; }
.blob-2 { width: 420px; height: 420px; background: #0ea5e9; bottom: -200px; right: -80px; animation: blobDrift 18s ease-in-out infinite alternate-reverse; }
.blob-3 { width: 300px; height: 300px; background: #10b981; top: 30%; right: 28%; opacity: 0.3; animation: blobDrift 22s ease-in-out infinite alternate; }
[data-theme="dark"] .blob { opacity: 0.28; }
@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.15); }
}

.float-icon { position: absolute; z-index: 1; opacity: 0.9; animation: floatY var(--float-dur, 7s) ease-in-out infinite alternate; will-change: transform; }
/* Kept clear of the left-hand copy column so nothing overlaps the headline/badge. */
.fi-1 { top: 3%; right: 4%; --float-dur: 6.5s; }
.fi-2 { top: 84%; left: 2%; --float-dur: 8s; opacity: 0.5; }
.fi-3 { top: 30%; right: 2%; --float-dur: 7.2s; }
.fi-4 { top: 82%; right: 6%; --float-dur: 9s; }
.fi-5 { top: 8%; left: 52%; --float-dur: 10s; opacity: 0.5; }
.fi-6 { top: 92%; left: 60%; --float-dur: 7.8s; opacity: 0.55; }
@keyframes floatY {
  from { transform: translateY(-12px) rotate(-5deg); }
  to { transform: translateY(14px) rotate(6deg); }
}
@media (max-width: 700px) {
  .fi-1, .fi-2, .fi-3, .fi-5, .fi-6 { display: none; }
  .fi-4 { top: auto; bottom: 4%; opacity: 0.5; }
}
@media (max-width: 480px) {
  .nav-actions .btn-ghost { display: none; }
  .nav-inner { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding: 8px 12px; font-size: 0.84rem; }
  .lang-toggle { min-width: 30px; padding: 0 4px; }
}
@media (max-width: 400px) {
  /* Logo mark only: the wordmark is what pushes the menu button past the right
     edge here, and body{overflow-x:hidden} would hide it rather than scroll. */
  .brand-text { display: none; }
}

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; } .hero { padding: 56px 0 70px; } }

.hero-eyebrow {
  position: relative; z-index: 3;
  display: inline-block; padding: 7px 15px; border-radius: 999px;
  /* opaque tint so floating icons never bleed through the text */
  background: linear-gradient(var(--primary-soft), var(--primary-soft)), var(--surface);
  color: var(--primary); font-weight: 600; font-size: 0.86rem; margin-bottom: 18px;
}
.hero-title { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; }
.hero-sub { font-size: 1.12rem; color: var(--text-soft); max-width: 34rem; margin-bottom: 22px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip {
  padding: 7px 14px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); font-size: 0.86rem; font-weight: 500; box-shadow: var(--shadow);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.hero-proof { color: var(--text-soft); font-size: 0.92rem; }
.hero-proof strong { color: var(--text); font-family: var(--font-head); }

/* Phone mock card */
.hero-visual { position: relative; display: flex; justify-content: center; }
.phone-card {
  width: min(340px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 26px; padding: 24px; box-shadow: var(--shadow-lg);
  animation: floatY 8s ease-in-out infinite alternate;
}
.phone-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.phone-head strong { display: block; font-family: var(--font-head); }
.phone-head small { color: var(--text-soft); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%; background: var(--grad-btn);
  color: #fff; font-weight: 700; font-family: var(--font-head);
}
.avatar-c1 { background: linear-gradient(135deg, #f0648c, #c2338c); }
.avatar-c2 { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.avatar-c3 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.avatar-c4 { background: linear-gradient(135deg, #10b981, #0d9488); }
.avatar-c5 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.live-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 700; color: var(--accent-text);
  background: rgba(16, 185, 129, 0.12); padding: 4px 10px; border-radius: 999px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

.phone-stat { margin-bottom: 18px; }
.ps-label { display: block; color: var(--text-soft); font-size: 0.85rem; }
.ps-value { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; letter-spacing: -0.02em; }
.ps-delta { display: block; color: var(--accent-text); font-weight: 600; font-size: 0.88rem; }

.phone-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-bottom: 18px; }
.phone-bars span {
  flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px;
  background: var(--grad-btn); opacity: 0.85; transform-origin: bottom; animation: barGrow 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.phone-bars span:nth-child(1) { animation-delay: 0.15s; }
.phone-bars span:nth-child(2) { animation-delay: 0.25s; }
.phone-bars span:nth-child(3) { animation-delay: 0.35s; }
.phone-bars span:nth-child(4) { animation-delay: 0.45s; }
.phone-bars span:nth-child(5) { animation-delay: 0.55s; }
.phone-bars span:nth-child(6) { animation-delay: 0.65s; }
.phone-bars span:nth-child(7) { animation-delay: 0.75s; background: var(--grad); opacity: 1; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.phone-row { display: flex; gap: 10px; }
.mini-stat {
  flex: 1; text-align: center; background: var(--surface-2); border-radius: 12px;
  padding: 10px 6px; font-weight: 600; font-size: 0.88rem; font-family: var(--font-head);
}

.order-toast {
  position: absolute; bottom: -30px; left: max(0px, calc(50% - 230px));
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow-lg); animation: toastIn 0.8s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.order-toast strong { display: block; font-size: 0.88rem; font-family: var(--font-head); }
.order-toast small { color: var(--text-soft); font-size: 0.78rem; }
.ot-icon { font-size: 1.3rem; }
@keyframes toastIn { from { opacity: 0; transform: translateY(24px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── Platform badge ── */
.pbadge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--pb-size, 36px); height: var(--pb-size, 36px);
  border-radius: calc(var(--pb-size, 36px) * 0.28);
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.4);
}
.pbadge-text { font-family: var(--font-head); font-weight: 800; font-size: calc(var(--pb-size, 36px) * 0.42); }

/* ── Stats strip ── */
.stats-strip { padding: 10px 0 26px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow);
}
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; }
.stat-num {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { color: var(--text-soft); font-size: 0.92rem; font-weight: 500; }

/* ── Sections ── */
.section { padding: 84px 0; }
.section-alt { background: var(--surface-2); }
[data-theme="dark"] .section-alt { background: #0d1526; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: 0.82rem; margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; }
.section-sub { color: var(--text-soft); margin-top: 10px; }

/* ── Steps ── */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .steps-line { display: none; } }
.steps-line { position: absolute; top: -30px; left: 0; width: 100%; height: 40px; color: var(--primary); opacity: 0.5; }
.steps-line path { stroke-dashoffset: 0; }
.step { position: relative; text-align: center; padding-top: 38px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step-num {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--grad-btn); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.6);
}
.step-icon { font-size: 2.4rem; margin-bottom: 12px; }
.step h3 { margin-bottom: 8px; font-size: 1.15rem; }
.step p { color: var(--text-soft); font-size: 0.95rem; }

/* ── Features ── */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1020px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }
.feature { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.feature:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.feature-icon { font-size: 1.9rem; display: inline-block; margin-bottom: 12px; }
.feature h3 { font-size: 1.02rem; margin-bottom: 7px; }
.feature p { color: var(--text-soft); font-size: 0.9rem; }

/* ── Showcase ── */
.showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1020px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .showcase-grid { grid-template-columns: 1fr; } }
.showcase { display: flex; flex-direction: column; gap: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.showcase:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.showcase-top { display: flex; align-items: center; gap: 12px; }
.showcase-top h3 { font-size: 1.05rem; }
.showcase-name { color: var(--text-soft); font-size: 0.88rem; flex: 1; }
.showcase-price { display: flex; align-items: baseline; gap: 6px; }
.price { font-family: var(--font-head); font-weight: 800; color: var(--primary); }
.showcase-price .price { font-size: 1.5rem; }
.per { color: var(--text-soft); font-size: 0.85rem; }

/* ── Compare ── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; margin-inline: auto; }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare-col h3 { margin-bottom: 16px; font-size: 1.2rem; }
.compare-col ul { list-style: none; display: grid; gap: 11px; }
.compare-col li { padding-left: 4px; font-size: 0.97rem; }
.compare-them { opacity: 0.82; }
.compare-them li { color: var(--text-soft); }
.compare-us { border: 2px solid transparent; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  var(--grad) border-box; box-shadow: var(--shadow-lg); }

/* ── FAQ ── */
.faq-list { display: grid; gap: 14px; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 19px 24px; cursor: pointer; font-family: var(--font-head);
  font-weight: 600; list-style: none; user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-arrow { transition: transform 0.3s ease; color: var(--primary); flex-shrink: 0; }
.faq-item[open] .faq-arrow { transform: rotate(180deg); }
.faq-body { padding: 0 24px 20px; color: var(--text-soft); }
.faq-item[open] .faq-body { animation: faqOpen 0.3s ease; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── CTA band ── */
.cta-band { background: var(--grad); padding: 76px 0; color: #fff; }
.cta-inner { text-align: center; }
.cta-inner h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; margin-bottom: 12px; }
.cta-inner p { opacity: 0.92; margin-bottom: 26px; }

/* ── Footer ── */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 52px 0 26px; margin-top: 0; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 34px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 26px; } }
.footer-tag { color: var(--text-soft); font-size: 0.92rem; margin: 14px 0 18px; max-width: 30rem; }
.footer-col h4 { margin-bottom: 14px; font-size: 1rem; }
.footer-col a { display: block; color: var(--text-soft); padding: 4px 0; font-size: 0.93rem; }
.footer-col a:hover { color: var(--primary); text-decoration: none; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 20px; color: var(--text-soft); font-size: 0.84rem;
}
.pay-badges { display: flex; gap: 8px; }
.pay-badge {
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
  padding: 5px 12px; border-radius: 8px; color: #fff;
}
/* Brand colours darkened just enough that white text clears WCAG AA (4.5:1). */
.pay-badge.pay-gcash { background: #0064d0; }
.pay-badge.pay-maya { background: #0a7d33; }
.pay-badge.pay-bpi { background: #b01116; }

/* ── Pages / forms ── */
.page { padding: 44px 0 84px; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
.page-head p { color: var(--text-soft); margin-top: 6px; }
.page-error { padding: 110px 0; text-align: center; }
.err-code {
  font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-error p { color: var(--text-soft); margin: 12px 0 26px; }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 7px; }
.field small { color: var(--text-soft); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 15px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 0.97rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft);
}
.input-sm { padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; max-width: 130px; }
.input-xs { max-width: 76px; }

.auth-wrap { display: flex; justify-content: center; padding: 60px 20px 90px; }
.auth-card { width: min(440px, 100%); }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-sub { color: var(--text-soft); margin-bottom: 22px; }
.auth-links { margin-top: 18px; text-align: center; color: var(--text-soft); font-size: 0.92rem; }
.auth-fineprint { margin-top: 12px; color: var(--text-soft); font-size: 0.83rem; text-align: center; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-soft); font-size: 0.85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cf-turnstile { margin-bottom: 16px; }

/* ── Dashboard ── */
.dash-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pill {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-soft); font-weight: 500; font-size: 0.88rem;
  text-decoration: none !important; transition: all 0.15s ease;
}
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.active { background: var(--grad-btn); border-color: transparent; color: #fff; }
.pill small { opacity: 0.7; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
.kpi-grid-wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .kpi-grid, .kpi-grid-wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kpi-grid, .kpi-grid-wide { grid-template-columns: 1fr; } }
.kpi { padding: 20px 22px; }
.kpi-label { display: block; color: var(--text-soft); font-size: 0.85rem; font-weight: 500; }
.kpi-value { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.65rem; margin: 4px 0; }
.kpi-link { font-size: 0.85rem; font-weight: 600; }
.kpi-alert { border-color: var(--warning); }
.kpi-alert .kpi-value { color: var(--warning); }

.section-card { margin-bottom: 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-head h2 { font-size: 1.2rem; }
.card h2 { font-size: 1.15rem; margin-bottom: 14px; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; padding: 6px; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th {
  text-align: left; padding: 12px 14px; color: var(--text-soft);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--border); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; white-space: nowrap; }
.table-compact { font-size: 0.84rem; }
.table-compact td, .table-compact th { padding: 9px 10px; }
.svc-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.svc-name { display: block; font-weight: 500; }
.link-cell { font-size: 0.82rem; }
.row-banned { opacity: 0.55; }
.actions-cell { white-space: nowrap; }
.actions-cell form { margin: 2px 0; }

/* Orders stay readable at every width. Desktop keeps a stable, scrollable
   grid; compact screens turn each row into a labelled order card. */
.orders-table-wrap { overflow-x: auto; overflow-y: hidden; }
.orders-table { min-width: 1180px; }
.orders-table .order-date { min-width: 132px; white-space: nowrap; }
.orders-table .actions-cell {
  min-width: 248px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.orders-table .actions-cell form { margin: 0; }
.orders-table .order-refresh-btn span { display: none; }

@media (min-width: 1601px) {
  /* On genuinely wide screens the controls can stay visible while the data
     grid scrolls. Medium desktop widths keep every column in one flow so no
     status, date or financial value is hidden underneath a panel. */
  .orders-table .actions-cell {
    position: sticky;
    right: 0;
    z-index: 3;
    background: var(--surface);
    box-shadow: -10px 0 18px color-mix(in srgb, var(--bg) 72%, transparent);
  }
  .orders-table tbody tr:hover .actions-cell { background: var(--surface-2); }
}

.badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-pending { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.badge-in_progress, .badge-processing { background: var(--primary-soft); color: var(--primary); }
.badge-completed, .badge-approved { background: rgba(16, 185, 129, 0.15); color: #047857; }
.badge-partial { background: rgba(139, 92, 246, 0.15); color: #6d28d9; }
.badge-canceled { background: rgba(100, 116, 139, 0.15); color: #475569; }
.badge-failed, .badge-rejected { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
[data-theme="dark"] .badge-pending { color: #fbbf24; }
[data-theme="dark"] .badge-completed, [data-theme="dark"] .badge-approved { color: #6ee7b7; }
[data-theme="dark"] .badge-partial { color: #c4b5fd; }
[data-theme="dark"] .badge-canceled { color: #cbd5e1; }
[data-theme="dark"] .badge-failed, [data-theme="dark"] .badge-rejected { color: #fca5a5; }
.badge-tx-deposit { background: rgba(16,185,129,0.15); color: #047857; }
.badge-tx-order { background: var(--primary-soft); color: var(--primary); }
.badge-tx-refund { background: rgba(139,92,246,0.15); color: #6d28d9; }
.badge-tx-adjustment { background: rgba(245,158,11,0.16); color: #b45309; }
[data-theme="dark"] .badge-tx-deposit { color: #6ee7b7; }
[data-theme="dark"] .badge-tx-refund { color: #c4b5fd; }
[data-theme="dark"] .badge-tx-adjustment { color: #fbbf24; }

/* ── Filter bar / pagination ── */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 22px; }
.filter-platforms { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.filter-search { display: flex; gap: 8px; align-items: center; }
.filter-search input { padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); min-width: 200px; }
.filter-search input:focus { outline: none; border-color: var(--primary); }
.filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sync-pair { display: inline-flex; gap: 4px; align-items: center; }
.oprog { display: inline-block; width: 64px; height: 7px; background: var(--surface-2); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.oprog-fill { display: block; height: 100%; background: var(--grad-btn); border-radius: 5px; transition: width .3s; }
.ticket-link { display: block; text-decoration: none; color: inherit; }
.ticket-link:hover { border-color: var(--primary); }
.pill-platform { display: inline-flex; align-items: center; gap: 7px; }
.pill-platform .pbadge { box-shadow: none; }

/* Services pricelist */
.platform-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 20px; }
.platform-banner h2 { font-size: 1.3rem; }
.services-table td { vertical-align: middle; }
.services-table .svc-cell { min-width: 220px; }
.services-table .svc-name { font-size: 0.9rem; line-height: 1.35; }
.cat-row td {
  background: var(--surface-2); font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
  color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 14px;
}
.cat-row .cat-badge { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.cat-row .cat-badge .pbadge { box-shadow: none; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.page-btn { padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.88rem; text-decoration: none !important; }
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-info { color: var(--text-soft); font-size: 0.88rem; }
.empty-note { color: var(--text-soft); padding: 22px 4px; }

/* ── Order form ── */
.order-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 880px) { .order-layout { grid-template-columns: 1fr; } }
.of-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.of-meta span { background: var(--surface-2); padding: 6px 12px; border-radius: 8px; font-size: 0.84rem; font-weight: 500; }
.of-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-soft); border-radius: 12px; padding: 15px 18px; margin-bottom: 18px;
}
.of-total strong { font-family: var(--font-head); font-size: 1.35rem; color: var(--primary); }
/* Assistant guidance box on the order form */
.of-guidance {
  background: linear-gradient(var(--primary-soft), var(--primary-soft)), var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
  animation: faqOpen 0.3s ease;
}
.ofg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--font-head); }
.ofg-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-btn); display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.of-guidance ul { list-style: none; display: grid; gap: 8px; }
.of-guidance li { font-size: 0.88rem; color: var(--text-soft); line-height: 1.5; }
.of-guidance li strong { color: var(--text); }

/* Confirmation modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px); animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { width: min(440px, 100%); animation: chatIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-card h3 { font-size: 1.25rem; margin-bottom: 16px; }
.confirm-lines { display: grid; gap: 8px; margin-bottom: 14px; }
.confirm-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.confirm-lines span { color: var(--text-soft); font-size: 0.9rem; }
.confirm-lines strong { font-family: var(--font-head); text-align: right; }
.confirm-warn { background: rgba(245, 158, 11, 0.12); border-radius: 10px; padding: 11px 14px; font-size: 0.85rem; color: var(--text-soft); margin-bottom: 18px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 460px) { .confirm-actions { flex-direction: column-reverse; } .confirm-actions .btn { width: 100%; } }

.order-tips ul { list-style: none; display: grid; gap: 12px; }
.order-tips li { color: var(--text-soft); font-size: 0.92rem; padding-left: 22px; position: relative; }
.order-tips li::before { content: '→'; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

/* ── Wallet ── */
.wallet-page { --wallet-green: #8cf62d; --wallet-cyan: #33d6ae; }
.wallet-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; overflow: hidden; margin-bottom: 24px; padding: clamp(24px,4vw,42px); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 24px; background: radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--wallet-green) 15%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--surface) 93%, var(--primary) 7%), var(--surface)); box-shadow: var(--shadow-lg); }
.wallet-hero::before { content: ''; position: absolute; z-index: -1; width: 360px; height: 360px; left: -170px; bottom: -260px; border-radius: 50%; border: 60px solid color-mix(in srgb, var(--primary) 7%, transparent); }
.wallet-hero-copy { max-width: 700px; }
.wallet-eyebrow { display: block; margin-bottom: 6px; color: var(--primary); font: 800 .69rem/1.2 var(--font-head); letter-spacing: .14em; }
.wallet-hero h1 { max-width: 660px; font-size: clamp(1.7rem,3.8vw,3rem); letter-spacing: -.04em; }
.wallet-hero-copy > p { max-width: 620px; margin-top: 10px; color: var(--text-soft); font-size: .96rem; }
.wallet-trust-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; color: var(--text-soft); font-size: .78rem; font-weight: 650; }
.wallet-trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.wallet-trust-row i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #10210a; background: var(--wallet-green); font-style: normal; font-size: .65rem; font-weight: 900; }
.wallet-balance-card { position: relative; min-width: 250px; overflow: hidden; padding: 22px; border: 1px solid color-mix(in srgb, var(--wallet-green) 42%, var(--border)); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 75%, #07150e 25%), color-mix(in srgb, var(--surface) 88%, var(--wallet-green) 12%)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 50px -30px color-mix(in srgb, var(--wallet-green) 70%, transparent); }
.wallet-balance-card > *:not(.wallet-balance-orb) { position: relative; z-index: 1; }
.wallet-balance-card span, .wallet-balance-card small { display: block; color: var(--text-soft); font-size: .75rem; }
.wallet-balance-card strong { display: block; margin: 3px 0 10px; font: 800 clamp(1.8rem,4vw,2.45rem)/1.1 var(--font-head); letter-spacing: -.035em; }
.wallet-balance-card small { width: fit-content; padding: 4px 9px; border-radius: 999px; color: color-mix(in srgb, var(--wallet-green) 80%, var(--text)); background: color-mix(in srgb, var(--wallet-green) 10%, transparent); }
.wallet-balance-orb { position: absolute; right: -30px; bottom: -45px; width: 130px; height: 130px; border-radius: 50%; background: var(--wallet-green); filter: blur(42px); opacity: .18; animation: walletOrb 4s ease-in-out infinite alternate; }
@keyframes walletOrb { to { transform: translate(-18px,-16px) scale(1.15); opacity: .3; } }

.wallet-layout { display: grid; grid-template-columns: minmax(0,1.13fr) minmax(320px,.87fr); gap: 24px; align-items: start; }
.wallet-funding-card { position: sticky; top: 84px; overflow: hidden; padding: clamp(20px,3vw,34px); border-radius: 24px; }
.wallet-funding-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -100px; top: -100px; border-radius: 50%; background: var(--wallet-green); filter: blur(65px); opacity: .08; pointer-events: none; }
.wallet-card-head, .wallet-section-title { display: flex; align-items: flex-start; gap: 14px; }
.wallet-card-head { margin-bottom: 26px; }
.wallet-card-head h2, .wallet-section-title h2 { margin: 0; font-size: 1.18rem; }
.wallet-card-head p, .wallet-rewards-card > p { margin-top: 5px; color: var(--text-soft); font-size: .84rem; line-height: 1.55; }
.wallet-gateway-mark, .wallet-title-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--wallet-green) 45%, var(--border)); border-radius: 13px; color: #10210a; background: linear-gradient(135deg, #b7ff48, #62e832); box-shadow: 0 10px 25px -15px var(--wallet-green); font: 900 1rem var(--font-head); }
.wallet-title-icon { width: 38px; height: 38px; border-radius: 12px; font-size: .9rem; }
.paymongo-form { display: block; margin: 0; }
.wallet-amount-field { display: block; margin: 0 0 18px; }
.wallet-amount-field > span, .wallet-quick-label > span { display: block; margin-bottom: 8px; color: var(--text); font-size: .82rem; font-weight: 750; }
.wallet-amount-input { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 74px; padding: 0 18px; border: 1.5px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: 17px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); transition: border-color .2s, box-shadow .2s, transform .2s; }
.wallet-amount-input:focus-within { border-color: var(--wallet-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wallet-green) 12%, transparent), 0 16px 34px -28px var(--wallet-green); transform: translateY(-1px); }
.wallet-amount-input b { color: var(--wallet-green); font: 800 1.55rem var(--font-head); }
.wallet-amount-input input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: 800 clamp(1.7rem,4vw,2.25rem) var(--font-head); letter-spacing: -.03em; }
.wallet-amount-input small { color: var(--text-soft); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.wallet-quick-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-quick-label small { color: var(--text-soft); font-size: .71rem; }
.wallet-amount-chips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 16px; }
.wallet-amount-chips .qty-chip { min-width: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 86%, transparent); font-size: .84rem; }
.wallet-amount-chips .qty-chip:hover { transform: translateY(-2px); }
.wallet-amount-chips .qty-chip.active { color: color-mix(in srgb, var(--wallet-green) 86%, var(--text)); border-color: var(--wallet-green); background: color-mix(in srgb, var(--wallet-green) 12%, var(--surface)); box-shadow: 0 9px 24px -18px var(--wallet-green); }
.wallet-amount-chips .qty-chip em { font-size: .62rem; }
.wallet-bonus-preview { overflow: hidden; margin: 0 0 16px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.wallet-bonus-preview.is-earned { border-color: color-mix(in srgb, var(--wallet-green) 45%, var(--border)); background: color-mix(in srgb, var(--wallet-green) 8%, transparent); }
.wallet-bonus-copy { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; align-items: center; }
.wallet-bonus-copy p { min-width: 0; color: var(--text-soft); font-size: .78rem; line-height: 1.45; overflow-wrap: normal; word-break: normal; }
.wallet-bonus-copy strong { color: var(--text); }
.wallet-bonus-track { overflow: hidden; height: 4px; margin-top: 10px; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent); }
.wallet-bonus-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--wallet-green)); box-shadow: 0 0 12px var(--wallet-green); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.wallet-pay-button { width: 100%; min-height: 56px; justify-content: space-between; padding: 0 18px 0 22px; border: 0; border-radius: 15px; color: #10210a; background: linear-gradient(100deg,#b7ff42,#6ee82d); box-shadow: 0 15px 35px -20px var(--wallet-green); font-weight: 850; }
.wallet-pay-button:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px var(--wallet-green); }
.wallet-pay-button i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #10210a; font-style: normal; transition: transform .2s; }
.wallet-pay-button:hover i { transform: translateX(3px); }
.wallet-secure-note { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 11px; color: var(--text-soft); text-align: center; font-size: .67rem; line-height: 1.45; }
.wallet-secure-note span { color: var(--wallet-green); font-weight: 900; }
.paymongo-form.is-submitting { opacity: .24; pointer-events: none; filter: blur(1px); }
.wallet-loading { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); }
.wallet-loading-rings { position: relative; width: 82px; height: 82px; display: grid; place-items: center; margin-bottom: 18px; }
.wallet-loading-rings i { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--wallet-green); border-radius: 50%; animation: walletSpin 1.1s linear infinite; }
.wallet-loading-rings i:nth-child(2) { inset: 9px; border-top-color: var(--primary); animation-direction: reverse; animation-duration: .8s; }
.wallet-loading-rings b { color: var(--wallet-green); font: 850 1.45rem var(--font-head); }
@keyframes walletSpin { to { transform: rotate(1turn); } }
.wallet-loading strong { font: 800 1.15rem var(--font-head); }
.wallet-loading > span { color: var(--text-soft); font-size: .8rem; }
.wallet-loading-bar { overflow: hidden; width: 180px; height: 4px; margin-top: 16px; border-radius: 99px; background: var(--border); }
.wallet-loading-bar i { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--wallet-green); animation: walletLoad 1.2s ease-in-out infinite; }
@keyframes walletLoad { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
.wallet-side { display: grid; gap: 18px; }
.wallet-side .card { padding: 22px; border-radius: 20px; }
.wallet-section-title { margin-bottom: 14px; }
.wallet-reward-tiers { display: grid; gap: 8px; margin-top: 16px; }
.wallet-reward-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.wallet-reward-tier span { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: .76rem; }
.wallet-reward-tier i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: var(--text); background: var(--surface); font-style: normal; font-size: .66rem; font-weight: 800; }
.wallet-reward-tier strong { color: var(--wallet-green); font: 850 .9rem var(--font-head); }
.wallet-history-card .table-wrap { margin: 0 -8px -6px; }
.wallet-history-card .table { font-size: .75rem; }
.wallet-history-card .table th, .wallet-history-card .table td { padding: 10px 8px; }
.wallet-empty { display: grid; justify-items: center; padding: 18px 12px 6px; text-align: center; }
.wallet-empty > span { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 1rem; }
.wallet-empty strong { font: 750 .9rem var(--font-head); }
.wallet-empty p { margin-top: 3px; color: var(--text-soft); font-size: .73rem; }
.wallet-unavailable { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid color-mix(in srgb,var(--warning) 35%,var(--border)); border-radius: 14px; background: color-mix(in srgb,var(--warning) 8%,transparent); }
.wallet-unavailable > span { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; color: #fff; background: var(--warning); font-weight: 900; }
.wallet-unavailable p { color: var(--text-soft); font-size: .8rem; }

.wallet-success-open { overflow: hidden; }
.wallet-success-overlay { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3,10,7,.76); backdrop-filter: blur(18px); animation: walletFade .25s ease; }
.wallet-success-card { position: relative; isolation: isolate; width: min(430px,100%); overflow: hidden; padding: 38px 30px 30px; border: 1px solid color-mix(in srgb,var(--wallet-green) 48%,var(--border)); border-radius: 26px; text-align: center; background: radial-gradient(circle at 50% 0,color-mix(in srgb,var(--wallet-green) 16%,transparent),transparent 42%),var(--surface); box-shadow: 0 34px 100px -34px rgba(0,0,0,.75); animation: walletSuccessIn .55s cubic-bezier(.2,1.3,.35,1); }
@keyframes walletFade { from { opacity: 0; } }
@keyframes walletSuccessIn { from { opacity: 0; transform: translateY(22px) scale(.92); } }
.wallet-success-check { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: color-mix(in srgb,var(--wallet-green) 13%,var(--surface)); box-shadow: 0 0 0 10px color-mix(in srgb,var(--wallet-green) 5%,transparent); }
.wallet-success-check span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #10210a; background: var(--wallet-green); font-size: 1.55rem; font-weight: 950; animation: walletCheck .45s .28s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes walletCheck { from { transform: scale(0) rotate(-30deg); } }
.wallet-success-card h2 { margin: 4px 0 8px; font-size: 1.55rem; }
.wallet-success-card > p { color: var(--text-soft); font-size: .87rem; }
.wallet-success-amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.wallet-success-amount span { color: var(--text-soft); font-size: .76rem; }
.wallet-success-amount strong { color: var(--wallet-green); font: 850 1.05rem var(--font-head); }
.wallet-confetti { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.wallet-confetti i { --color: var(--wallet-green); position: absolute; left: var(--x); top: -12px; width: 7px; height: 12px; border-radius: 2px; background: var(--color); animation: walletConfetti 1.5s var(--delay) cubic-bezier(.2,.7,.4,1) both; }
.wallet-confetti i:nth-child(3n) { --color: #33d6ae; }
.wallet-confetti i:nth-child(3n + 1) { --color: #fff; }
@keyframes walletConfetti { to { transform: translateY(360px) rotate(var(--spin)); opacity: 0; } }

@media (max-width: 920px) {
  .wallet-layout { grid-template-columns: 1fr; }
  .wallet-funding-card { position: relative; top: auto; }
  .wallet-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wallet-side > :first-child:last-child, .wallet-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .wallet-page { padding-inline: 14px; }
  .wallet-hero { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 20px; }
  .wallet-balance-card { min-width: 0; width: 100%; }
  .wallet-trust-row { display: grid; grid-template-columns: 1fr 1fr; }
  .wallet-trust-row span:last-child { grid-column: 1 / -1; }
  .wallet-side { grid-template-columns: 1fr; }
  .wallet-side > * { grid-column: auto !important; }
  .wallet-amount-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wallet-amount-input { min-height: 68px; }
  .wallet-success-card { padding: 34px 20px 24px; }
}
@media (max-width: 370px) {
  .wallet-amount-chips .qty-chip { font-size: .77rem; }
  .wallet-amount-chips .qty-chip em { display: none; }
  .wallet-pay-button { padding-left: 16px; font-size: .83rem; }
}
.pay-methods { display: grid; gap: 14px; margin: 16px 0 8px; }
.pay-method { border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; }
.pay-method::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.pay-method.pay-gcash::before { background: #0064d0; }
.pay-method.pay-maya::before { background: #10ac47; }
.pay-method.pay-bpi::before { background: #b01116; }
.pm-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pm-head small { color: var(--text-soft); }
.pm-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.pm-number { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; }
.api-key { flex: 1; }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 880px) { .settings-grid { grid-template-columns: 1fr; } }

.prose h3 { margin: 20px 0 8px; }
.prose p { color: var(--text-soft); margin-bottom: 10px; }

/* ── Admin: maintenance / promos / tickets / report ── */
.maint-on { border-color: var(--warning); background: rgba(245, 158, 11, 0.06); }
.promo-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.promo-form .field { margin-bottom: 0; }
.promo-form > button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 720px) { .promo-form { grid-template-columns: 1fr; } }

.tickets-list { display: grid; gap: 14px; }
.ticket-card { padding: 18px 20px; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ticket-head strong { font-family: var(--font-head); }
.ticket-head .badge { margin-left: 8px; }
.ticket-meta { font-size: 0.86rem; margin: 6px 0; }
.ticket-msg { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; font-size: 0.92rem; margin: 8px 0; white-space: pre-wrap; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* Report dialog (top-layer <dialog>, works everywhere incl. mobile) */
.report-dialog { border: none; border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.report-dialog::backdrop { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
.report-dialog-form { display: grid; gap: 12px; padding: 20px; }
.report-dialog-head { display: flex; flex-direction: column; gap: 2px; }
.report-dialog-form label { display: grid; gap: 6px; font-size: 0.88rem; font-weight: 600; }
.report-dialog-form select, .report-dialog-form textarea { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 0.9rem; resize: vertical; max-width: 100%; }
.report-dialog-form select:focus, .report-dialog-form textarea:focus { outline: none; border-color: var(--primary); }
.report-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Chat widget ── */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 200; }
.chat-fab {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad-btn); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -8px rgba(37, 99, 235, 0.65);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: fabIn 0.5s 1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.chat-fab:hover { transform: scale(1.1) rotate(6deg); }
.chat-fab-avatar {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px;
  color: #071006; background: rgba(255,255,255,.7); font-family: var(--font-head);
  font-size: 1.25rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.chat-fab-online {
  position: absolute; right: 1px; bottom: 4px; width: 13px; height: 13px;
  border-radius: 50%; background: #22c55e; border: 3px solid var(--surface);
}
@keyframes fabIn { from { transform: scale(0); } to { transform: scale(1); } }
.chat-panel[hidden] { display: none !important; }
.chat-panel {
  position: absolute; right: 0; bottom: 72px;
  width: min(410px, calc(100vw - 44px)); height: 610px; max-height: calc(100vh - 110px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  animation: chatIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chatIn { from { opacity: 0; transform: translateY(18px) scale(0.95); } to { opacity: 1; transform: none; } }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--grad-btn); color: #071006;
}
.chat-head strong { font-family: var(--font-head); display: block; }
.chat-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-avatar { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:rgba(7,16,6,.12); font-size:1.15rem; }
.chat-status { font-size: 0.71rem; display: flex; align-items: center; gap: 5px; opacity: 0.78; line-height:1.3; }
.chat-status .dot { background: #15803d; width:7px; height:7px; }
.chat-head .icon-btn, .chat-head .chat-close { border: none; background: rgba(7,16,6,.12); color: #071006; width: 32px; height: 32px; font-size: 1.1rem; border-radius:10px; cursor:pointer; }
.chat-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.chat-tool { display:flex; align-items:center; justify-content:center; min-height:42px; padding:8px 5px; background:var(--surface); color:var(--text); text-align:center; font-size:.72rem; font-weight:700; text-decoration:none; }
.chat-tool:hover { color:var(--primary); background:var(--primary-soft); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem;
  animation: msgIn 0.25s ease; white-space: pre-wrap; word-wrap: break-word; display:flex; flex-direction:column; gap:5px;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-msg.bot { background: var(--surface-2); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.user { background: var(--grad-btn); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-msg.typing { color: var(--text-soft); font-style: italic; }
.chat-time { font-size:.65rem; opacity:.56; align-self:flex-end; line-height:1; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input input {
  flex: 1; padding: 10px 14px; border-radius: 11px; border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 0.9rem;
}
.chat-input input:focus { outline: none; border-color: var(--primary); }
.chat-input button:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; transform:none; }

/* Chat quick chips + report form */
.chat-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.chat-platforms { flex-wrap:nowrap; overflow-x:auto; padding:2px 1px 5px; scrollbar-width:thin; }
.chat-platforms .chat-chip { flex:0 0 auto; text-decoration:none; }
.chat-section-label { margin-top:2px; color:var(--text-soft); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.chat-chip {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.12s;
}
.chat-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.chat-link { color: #fff; text-decoration: underline; font-weight: 600; }
.chat-msg.bot .chat-link { color: var(--primary); }
.chat-report { display: grid; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 12px; margin-top: 4px; }
.chat-report-sel, .chat-report-msg {
  width: 100%; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 0.85rem; resize: vertical;
}
.chat-report-sel:focus, .chat-report-msg:focus { outline: none; border-color: var(--primary); }
.chat-report-submit { justify-self: start; }
.chat-file-label { display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 10px; border:1.5px dashed var(--border); border-radius:9px; color:var(--text); font-size:.8rem; font-weight:700; cursor:pointer; overflow:hidden; }
.chat-file-label:hover { border-color:var(--primary); color:var(--primary); }
.chat-report-file { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.chat-file-note { color:var(--text-soft); font-size:.7rem; }
.chat-history { display:grid; gap:7px; padding-top:2px; }
.chat-history-item { display:flex; flex-direction:column; gap:2px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; color:var(--text); text-decoration:none; background:var(--surface-2); }
.chat-history-item:hover { border-color:var(--primary); transform:translateY(-1px); }
.chat-history-item strong { font-size:.78rem; }
.chat-history-item small { color:var(--text-soft); font-size:.7rem; text-transform:capitalize; }

/* Premium support assistant v2 — dark glass shell with theme-aware content. */
.chat-fab { isolation:isolate; box-shadow:0 18px 42px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.chat-fab::before { content:""; position:absolute; inset:-5px; z-index:-1; border:1px solid color-mix(in srgb, var(--primary) 55%, transparent); border-radius:50%; animation:chatPulse 2.2s ease-out infinite; }
.chat-fab-label { position:absolute; right:68px; padding:8px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); font-size:.72rem; font-weight:800; white-space:nowrap; opacity:0; transform:translateX(6px); pointer-events:none; transition:.18s ease; }
.chat-fab:hover .chat-fab-label, .chat-fab:focus-visible .chat-fab-label { opacity:1; transform:none; }
@keyframes chatPulse { 0% { opacity:.72; transform:scale(.92); } 75%,100% { opacity:0; transform:scale(1.3); } }
.chat-panel { width:min(430px, calc(100vw - 44px)); height:650px; border-color:color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius:22px; box-shadow:0 28px 85px -28px rgba(0,0,0,.72), 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent); }
.chat-head { min-height:76px; padding:14px 15px; background:linear-gradient(135deg, #091208 0%, #10210d 58%, #162c10 100%); color:#f5fff0; border-bottom:1px solid rgba(167,255,57,.16); }
.chat-head strong { color:#f7fff4; font-size:.94rem; letter-spacing:-.015em; }
.chat-title-row { display:flex; align-items:center; gap:7px; min-width:0; }
.chat-model { max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 7px; border:1px solid rgba(167,255,57,.28); border-radius:999px; background:rgba(167,255,57,.1); color:#b5ff50; font:800 .58rem/1.2 var(--font-body); letter-spacing:.025em; }
.chat-avatar { position:relative; width:40px; height:40px; border-radius:14px; background:linear-gradient(145deg, #baff4b, #6ee72c); color:#071006; box-shadow:0 0 22px rgba(153,255,48,.26); }
.chat-avatar::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(181,255,80,.28); border-radius:17px; }
.chat-avatar i { font-style:normal; animation:chatOrb 3.2s ease-in-out infinite; }
@keyframes chatOrb { 0%,100% { transform:rotate(0) scale(1); } 50% { transform:rotate(18deg) scale(1.12); } }
.chat-status { color:#b5c2b0; opacity:1; margin-top:3px; }
.chat-status .dot { position:relative; background:#8ff238; box-shadow:0 0 0 3px rgba(143,242,56,.12); }
.chat-head-actions { display:flex; align-items:center; gap:6px; }
.chat-head .icon-btn, .chat-head .chat-close { display:grid; place-items:center; background:rgba(255,255,255,.055); color:#eaf7e5; border:1px solid rgba(255,255,255,.1); transition:.16s ease; }
.chat-head .icon-btn:hover, .chat-head .chat-close:hover { border-color:rgba(181,255,80,.45); color:#b5ff50; transform:translateY(-1px); }
.chat-head .icon-btn:disabled { opacity:.45; cursor:wait; }
.chat-presence { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 15px; background:color-mix(in srgb, var(--primary) 5%, var(--surface)); border-bottom:1px solid var(--border); color:var(--text-soft); font-size:.66rem; font-weight:700; }
.chat-presence > span { display:flex; align-items:center; gap:6px; }
.chat-presence-dot { width:7px; height:7px; border-radius:50%; background:#65d221; box-shadow:0 0 8px rgba(101,210,33,.55); }
.chat-tools { grid-template-columns:repeat(4,1fr); gap:0; }
.chat-tool { border:0; border-right:1px solid var(--border); min-height:54px; flex-direction:column; gap:4px; cursor:pointer; font-family:var(--font-body); font-size:.65rem; }
.chat-tool:last-child { border-right:0; }
.chat-tool > span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--primary-soft); color:var(--primary); font-size:.76rem; }
.chat-body { padding:15px; gap:10px; background:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 7%, transparent), transparent 34%), var(--surface); }
.chat-body > * { flex-shrink:0; }
.chat-msg { max-width:88%; padding:10px 12px; border:1px solid transparent; border-radius:15px; font-size:.84rem; line-height:1.45; }
.chat-msg.bot { border-color:var(--border); box-shadow:0 8px 24px -20px rgba(0,0,0,.7); }
.chat-msg.user { color:#071006; border-color:color-mix(in srgb, var(--primary) 70%, #fff); font-weight:600; }
.chat-msg.typing { min-width:58px; padding:13px 15px; font-style:normal; }
.chat-typing-dots { display:flex; align-items:center; gap:4px; min-height:8px; }
.chat-typing-dots i { width:6px; height:6px; border-radius:50%; background:var(--primary); animation:chatTyping 1.1s ease-in-out infinite; }
.chat-typing-dots i:nth-child(2) { animation-delay:.14s; }
.chat-typing-dots i:nth-child(3) { animation-delay:.28s; }
@keyframes chatTyping { 0%,60%,100% { opacity:.32; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } }
.chat-sync-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius:13px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface)); }
.chat-sync-card > div { display:grid; gap:2px; }
.chat-sync-card strong { font-size:.76rem; }
.chat-sync-card small { color:var(--text-soft); font-size:.65rem; line-height:1.35; }
.chat-sync-card a { flex:0 0 auto; padding:7px 10px; border-radius:8px; background:var(--primary); color:#071006; text-decoration:none; font-size:.68rem; font-weight:900; }
.chat-platforms { margin-inline:-2px; padding:2px 2px 6px; }
.chat-platforms .chat-chip { border-radius:12px; background:linear-gradient(150deg, var(--surface-2), var(--surface)); padding:9px 11px; font-size:.75rem; box-shadow:0 6px 18px -16px rgba(0,0,0,.8); }
.chat-chip:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.chat-input { align-items:center; padding:11px 12px max(11px, env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 96%, var(--primary)); box-shadow:0 -12px 26px -26px rgba(0,0,0,.8); }
.chat-input input { min-width:0; height:42px; padding-inline:12px; background:var(--surface-2); }
.chat-input #chat-send { width:42px; height:42px; flex:0 0 auto; padding:0; display:grid; place-items:center; border-radius:12px; color:#071006; }
.chat-attach { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--text); font-size:1.15rem; cursor:pointer; transition:.16s ease; }
.chat-attach:hover { color:var(--primary); border-color:var(--primary); transform:rotate(8deg); }
.chat-report { border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow:0 14px 32px -28px rgba(0,0,0,.7); }

@media (prefers-reduced-motion: reduce) {
  .chat-fab::before, .chat-avatar i, .chat-typing-dots i { animation:none !important; }
}

/* Notification bell + list */
.notif-bell { position: relative; }
.notif-dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-list { display: grid; gap: 12px; }
.notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.notif-item.notif-unread { border-color: var(--primary); background: var(--primary-soft); }
.notif-icon { font-size: 1.4rem; flex-shrink: 0; }
.notif-body { flex: 1; }
.notif-body strong { font-family: var(--font-head); display: block; }
.notif-body p { color: var(--text-soft); font-size: 0.92rem; margin: 4px 0; }

/* ── Growth: deposit bonus banner + referrals ── */
.bonus-banner {
  border: 1.5px dashed var(--primary); border-radius: 14px;
  background: var(--primary-soft); padding: 14px 16px; margin-bottom: 16px;
}
.bonus-banner strong { font-family: var(--font-head); display: block; margin-bottom: 8px; }
.bonus-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.bonus-tier {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 0.86rem; font-weight: 600; white-space: nowrap;
}
.bonus-tier em { font-style: normal; color: var(--primary); font-weight: 800; }

.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 720px) { .ref-stats { grid-template-columns: 1fr; } }
.stat-tile { text-align: center; padding: 20px 14px; min-width: 0; }
.stat-tile .stat-value {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; margin-top: 4px;
  overflow-wrap: anywhere;
}

.ref-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; margin-bottom: 24px; }
@media (max-width: 920px) { .ref-layout { grid-template-columns: 1fr; } }
.ref-layout > .card { min-width: 0; }
.ref-link-row { display: flex; gap: 10px; margin: 12px 0; }
.ref-link-input {
  flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 0.88rem; background: var(--surface-2); color: var(--text);
}
@media (max-width: 460px) { .ref-link-row { flex-direction: column; } .ref-link-row .btn { width: 100%; } }
.ref-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-soft); }
.ref-code {
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.08em;
  background: var(--primary-soft); color: var(--primary); border-radius: 8px; padding: 4px 10px;
}
.ref-invited {
  background: var(--primary-soft); border-radius: 10px; padding: 10px 14px;
  font-size: 0.9rem; margin-bottom: 14px;
}
.ref-invited code { font-weight: 700; }

/* ── Order page v10: platform grid + custom service picker ── */
.plat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px; margin-top: 8px;
}
.plat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px 10px; border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface); cursor: pointer; font: inherit; color: var(--text);
  font-size: 0.82rem; font-weight: 600; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.plat-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.plat-btn:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 4px 14px rgba(15,23,42,0.08)); }
.plat-btn.active {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Premium account store lives with the platform choices, but stays a link
   rather than pretending to be a provider platform. The custom crown/gem
   mark is inline SVG so it stays crisp at every zoom level. */
.premium-platform-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; padding: 9px 6px 8px;
  border: 1.5px solid rgba(236, 185, 67, .66); border-radius: 14px;
  color: #fff0b8; text-decoration: none;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 231, 147, .18), transparent 38%),
    linear-gradient(145deg, #3a2a0d, #1d160a 58%, #100d07);
  box-shadow: inset 0 1px rgba(255, 239, 184, .14), 0 10px 24px -20px rgba(238, 185, 62, .92);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.premium-platform-card::before {
  content: ""; position: absolute; z-index: -1; inset: -70% -35%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 238, 177, .2) 49%, transparent 58%);
  transform: translateX(-62%) rotate(8deg); animation: premiumCardShimmer 4.8s ease-in-out infinite;
}
.premium-platform-card::after {
  content: ""; position: absolute; top: 9px; right: 10px; width: 4px; height: 4px;
  border-radius: 50%; background: #fff2b7; box-shadow: 0 0 10px #ffd96c;
  animation: premiumSpark 2.4s ease-in-out infinite;
}
.premium-platform-card:hover,
.premium-platform-card:focus-visible {
  color: #fff7d9; border-color: #ffe08a; transform: translateY(-3px);
  box-shadow: inset 0 1px rgba(255, 247, 214, .2), 0 16px 28px -18px rgba(238, 185, 62, .92), 0 0 0 3px rgba(222, 164, 44, .12);
}
.premium-platform-card:focus-visible { outline: 2px solid #ffe08a; outline-offset: 3px; }
.premium-platform-logo {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 1px;
  border: 1px solid rgba(255, 240, 184, .74); border-radius: 11px;
  color: #251603; background: radial-gradient(circle at 28% 20%, #fff3b5, #eab94d 55%, #9b6518);
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 0 20px rgba(235, 180, 55, .28);
  animation: premiumMarkFloat 3.2s ease-in-out infinite;
}
.premium-logo-svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.premium-logo-gem { fill: #fff1a8; stroke: #6f460d; stroke-width: .65; }
.premium-platform-title { color: inherit; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.premium-platform-card small { color: #d8bc76; font: 750 .61rem/1.1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
@keyframes premiumCardShimmer { 0%, 58% { transform: translateX(-62%) rotate(8deg); } 82%, 100% { transform: translateX(62%) rotate(8deg); } }
@keyframes premiumMarkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes premiumSpark { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.35); } }

.svc-picker { position: relative; margin-top: 8px; }
.svc-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: left;
  transition: border-color 0.15s;
}
.svc-trigger:hover:not(:disabled), .svc-trigger[aria-expanded="true"] { border-color: var(--primary); }
.svc-trigger:disabled { cursor: not-allowed; opacity: 0.7; }
.svc-trigger-label { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.svc-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-weight: 600; font-size: 0.92rem; }
.svc-trigger-price { color: var(--primary); font-weight: 800; font-family: var(--font-head); white-space: nowrap; font-size: 0.9rem; }
.svc-chevron { flex-shrink: 0; color: var(--text-soft); transition: transform 0.2s; }
.svc-trigger[aria-expanded="true"] .svc-chevron { transform: rotate(180deg); }

.svc-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); overflow: hidden;
  animation: chatIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .svc-panel { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.svc-search {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); color: var(--text-soft);
}
.svc-search input {
  flex: 1; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 0.92rem; padding: 4px 0;
}
.svc-list { max-height: min(400px, 52vh); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.svc-group {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 14px 6px; background: var(--surface-2);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-soft); border-bottom: 1px solid var(--border);
}
.svc-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
}
.svc-row:hover { background: var(--primary-soft); }
.svc-row.selected { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.svc-row .pbadge { flex-shrink: 0; }
.svc-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.svc-row-name { font-weight: 600; font-size: 0.9rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.svc-row-sub { color: var(--text-soft); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-row-price { color: var(--primary); font-weight: 800; font-family: var(--font-head); white-space: nowrap; font-size: 0.92rem; flex-shrink: 0; }
.svc-row-price small { color: var(--text-soft); font-weight: 600; margin-left: 2px; }
.svc-empty { padding: 22px 16px; text-align: center; color: var(--text-soft); font-size: 0.9rem; }

@media (max-width: 560px) {
  .plat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .plat-btn, .premium-platform-card { padding: 10px 4px 8px; font-size: 0.76rem; }
  .svc-list { max-height: 46vh; }
  .svc-trigger-price { display: none; }
}

/* ── Quick chips (quantity + deposit amounts), link warning, bonus preview ── */
.qty-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.qty-chip {
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 700;
  padding: 6px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.qty-chip:hover { border-color: var(--primary); }
.qty-chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.qty-chip em { font-style: normal; color: var(--accent-text); font-weight: 800; margin-left: 2px; }

.link-warn {
  background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px; padding: 9px 13px; font-size: 0.85rem; color: var(--text);
  margin: -6px 0 16px; animation: fadeIn 0.2s ease;
}

.dep-preview {
  background: var(--primary-soft); border-radius: 10px; padding: 9px 13px;
  font-size: 0.86rem; margin: -6px 0 16px; animation: fadeIn 0.2s ease;
}

/* ── Security · Threat Radar ── */
.attack-banner {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff;
  border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
  animation: attackPulse 1.4s ease-in-out infinite;
}
.attack-banner strong { font-size: 1.1rem; letter-spacing: 0.02em; }
.attack-banner span { font-size: 0.9rem; opacity: 0.95; }
@keyframes attackPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.threat-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
.threat-critical { background: rgba(220,38,38,0.16); color: #dc2626; }
.threat-high { background: rgba(234,88,12,0.16); color: #ea580c; }
.threat-medium { background: rgba(245,158,11,0.16); color: #b45309; }
.threat-low { background: rgba(16,185,129,0.15); color: #047857; }
[data-theme="dark"] .threat-critical { color: #f87171; }
[data-theme="dark"] .threat-high { color: #fb923c; }
[data-theme="dark"] .threat-medium { color: #fbbf24; }
[data-theme="dark"] .threat-low { color: #6ee7b7; }

/* ── Admin orders: site code ↔ provider ref ── */
.order-idcell { white-space: nowrap; }
.order-code { font-size: 0.82rem; font-weight: 700; background: var(--primary-soft); color: var(--primary); border-radius: 6px; padding: 2px 7px; }
.order-ref-label { display: block; margin-bottom: 3px; color: var(--text-soft); font: 750 .55rem var(--font-head); letter-spacing: .09em; }
.prov-ref { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: .7rem; color: var(--text-soft); }
.prov-ref span { font: 750 .54rem var(--font-head); letter-spacing: .07em; }
.prov-ref strong { color: var(--primary); font-family: var(--font-head); }

/* ── Admin services · provider command center ── */
.admin-services-page { position: relative; }
.admin-services-page::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 18%, color-mix(in srgb,var(--primary) 8%,transparent), transparent 30%), linear-gradient(90deg,color-mix(in srgb,var(--border) 24%,transparent) 1px,transparent 1px), linear-gradient(color-mix(in srgb,var(--border) 24%,transparent) 1px,transparent 1px); background-size: auto,42px 42px,42px 42px; mask-image: linear-gradient(to bottom,#000,transparent 72%); }
.service-command-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(430px,.9fr); gap: 34px; align-items: end; margin-bottom: 22px; padding: 34px; border: 1px solid color-mix(in srgb,var(--primary) 32%,var(--border)); border-radius: 24px; background: linear-gradient(135deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--primary) 7%,var(--surface))); box-shadow: 0 26px 80px -56px var(--primary); }
.service-command-hero::after { content: ""; position: absolute; z-index: -1; right: -70px; top: -150px; width: 360px; aspect-ratio: 1; border: 1px solid color-mix(in srgb,var(--primary) 18%,transparent); border-radius: 50%; box-shadow: 0 0 0 42px color-mix(in srgb,var(--primary) 3%,transparent),0 0 0 84px color-mix(in srgb,var(--primary) 2%,transparent); animation: providerOrbit 9s linear infinite; }
@keyframes providerOrbit { to { transform: rotate(1turn); } }
.admin-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font: 800 .68rem var(--font-head); letter-spacing: .17em; }
.admin-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 14px var(--primary); animation: pulse 1.8s ease infinite; }
.service-command-copy h1 { margin: 10px 0 8px; font-size: clamp(2rem,4vw,3.25rem); line-height: .98; }
.service-command-copy p { max-width: 650px; color: var(--text-soft); font-size: .95rem; }
.service-command-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.service-command-metrics > div { min-width: 0; padding: 15px 13px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb,var(--surface-2) 83%,transparent); }
.service-command-metrics span { display: block; overflow: hidden; color: var(--text-soft); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.service-command-metrics strong { display: block; margin-top: 6px; color: var(--text); font: 850 1.15rem var(--font-head); }

.provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.provider-node { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb,var(--surface) 94%,transparent); box-shadow: 0 22px 60px -50px rgba(0,0,0,.75); transition: border-color .2s, transform .2s, box-shadow .2s; }
.provider-node:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--primary) 45%,var(--border)); box-shadow: 0 28px 70px -48px var(--primary); }
.provider-node.has-error { border-color: color-mix(in srgb,var(--danger) 45%,var(--border)); }
.provider-node header { display: flex; align-items: center; gap: 11px; }
.provider-node-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border: 1px solid color-mix(in srgb,var(--primary) 45%,var(--border)); border-radius: 13px; color: #132107; background: linear-gradient(135deg,var(--primary),var(--accent)); box-shadow: 0 10px 25px -16px var(--primary); font: 900 1rem var(--font-head); }
.provider-code { display: block; color: var(--text-soft); font: 750 .61rem var(--font-head); letter-spacing: .13em; text-transform: uppercase; }
.provider-node h2 { margin: 2px 0 0; font-size: 1rem; }
.provider-health { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); font: 800 .55rem var(--font-head); letter-spacing: .07em; white-space: nowrap; }
.provider-health i,.service-live-pill i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.provider-health.is-online { color: var(--primary); border-color: color-mix(in srgb,var(--primary) 35%,var(--border)); background: color-mix(in srgb,var(--primary) 8%,transparent); }
.provider-health.is-online i { box-shadow: 0 0 9px currentColor; }
.provider-node-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 18px 0 12px; }
.provider-node-stats div { min-width: 0; padding: 10px; border-radius: 11px; background: var(--surface-2); }
.provider-node-stats span { display: block; color: var(--text-soft); font-size: .61rem; }
.provider-node-stats strong { display: block; overflow: hidden; margin-top: 4px; font: 800 .78rem var(--font-head); text-overflow: ellipsis; white-space: nowrap; }
.provider-sync-time { display: flex; justify-content: space-between; gap: 10px; margin: 0; color: var(--text-soft); font-size: .65rem; }
.provider-sync-time strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.provider-error { margin: 12px 0 0; padding: 9px 10px; border-radius: 9px; color: var(--danger); background: color-mix(in srgb,var(--danger) 8%,transparent); font-size: .68rem; overflow-wrap: anywhere; }
.provider-node-actions { display: flex; align-items: stretch; gap: 7px; flex-wrap: wrap; margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--border); }
.provider-node-actions form { flex: 1 1 auto; }
.provider-node-actions .btn { width: 100%; }
.provider-unsync { color: var(--text-soft); }
.auto-sync-switch { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-2); cursor: pointer; }
.auto-sync-switch > span:last-child { display: flex; align-items: center; gap: 5px; }
.auto-sync-switch small { color: var(--text-soft); font-size: .6rem; }
.auto-sync-switch strong { font: 850 .64rem var(--font-head); }
.switch-track { width: 28px; height: 16px; flex: none; padding: 2px; border-radius: 999px; background: var(--border); transition: background .2s; }
.switch-track i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
.auto-sync-switch.is-on { border-color: color-mix(in srgb,var(--primary) 42%,var(--border)); background: color-mix(in srgb,var(--primary) 8%,var(--surface-2)); }
.auto-sync-switch.is-on .switch-track { background: var(--primary); }
.auto-sync-switch.is-on .switch-track i { transform: translateX(12px); }
.auto-sync-switch.is-on strong { color: var(--primary); }

.catalog-console { margin-top: 26px; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb,var(--surface) 95%,transparent); }
.catalog-console-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.catalog-console-head h2 { margin: 5px 0 0; font-size: 1.35rem; }
.catalog-search { min-width: min(100%,580px); display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.catalog-search > span { padding-left: 7px; color: var(--primary); font-size: 1.1rem; }
.catalog-search input { min-width: 0; flex: 1; border: 0; background: transparent; box-shadow: none; }
.catalog-search input:focus { box-shadow: none; }
.catalog-result-note { margin: -4px 0 14px; color: var(--text-soft); font-size: .76rem; }
.service-table-wrap { border: 0; border-radius: 14px; background: transparent; box-shadow: none; }
.service-command-table { min-width: 1100px; }
.service-command-table thead th { color: var(--text-soft); font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; }
.service-command-table tbody tr { transition: background .16s; }
.service-command-table tbody tr:hover { background: color-mix(in srgb,var(--primary) 4%,transparent); }
.service-local-id { color: var(--primary); background: var(--primary-soft); }
.provider-map-code { display: block; color: var(--text-soft); font: 750 .58rem var(--font-head); letter-spacing: .09em; text-transform: uppercase; }
.provider-map-code + code { display: inline-block; margin-top: 4px; color: var(--text); font-weight: 700; }
.money-soft { color: var(--text-soft); }
.service-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font: 800 .63rem var(--font-head); }
.service-live-pill.is-live { color: var(--primary); background: color-mix(in srgb,var(--primary) 9%,transparent); }
.service-live-pill.is-off { color: var(--text-soft); background: var(--surface-2); }
.service-actions { min-width: 260px; }
.markup-control input { width: 54px; }
.provider-empty,.catalog-empty-state { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 150px; padding: 28px; text-align: left; }
.provider-empty > span,.catalog-empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--primary) 35%,var(--border)); border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 1.3rem; }
.provider-empty p,.catalog-empty-state p { margin-top: 4px; color: var(--text-soft); font-size: .78rem; }
.catalog-empty-state { min-height: 220px; flex-direction: column; text-align: center; }

@media (max-width: 1120px) {
  .service-command-hero { grid-template-columns: 1fr; }
  .provider-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .service-command-hero { padding: 24px 20px; border-radius: 20px; }
  .service-command-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .provider-grid { grid-template-columns: 1fr; }
  .catalog-console { padding: 18px 14px; }
  .catalog-console-head { align-items: stretch; flex-direction: column; }
  .catalog-search { width: 100%; min-width: 0; flex-wrap: wrap; }
  .catalog-search input { flex: 1 1 calc(100% - 40px); }
  .catalog-search .btn { flex: 1 1 110px; }
  .provider-health { font-size: .5rem; }
}

/* ── Two-factor authentication ── */
.twofa-card.twofa-on { border-color: var(--accent); }
.twofa-key { background: var(--surface-2); border-radius: 12px; padding: 14px; margin: 12px 0; }
.twofa-key .api-key { font-size: 1.05rem; letter-spacing: 0.12em; }

/* ── Drip-feed order box ── */
.dripfeed-box { border: 1.5px dashed var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.drip-toggle { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 0.9rem; }
.drip-toggle input { margin-top: 3px; flex-shrink: 0; }
.drip-fields { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drip-fields .field { margin-bottom: 0; }
.drip-fields .drip-note { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; }
@media (max-width: 520px) { .drip-fields { grid-template-columns: 1fr; } }

/* ── Trusted IP row ── */
.trust-me { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }

/* ── Mobile audit fixes (chat safe-area + overflow) ── */
@media (max-width: 640px) {
  /* Leave room at the bottom so the floating chat button never covers the
     last form control / button on a page. */
  main.page, main.container.page { padding-bottom: 96px; }
  .chat-widget { right: 14px; bottom: 14px; }
  .chat-fab { width: 52px; height: 52px; }
  .chat-panel {
    position: fixed; left: 10px; right: 10px; bottom: 76px;
    width: auto; height: min(650px, calc(100dvh - 92px)); max-height: calc(100dvh - 92px);
    border-radius: 18px;
  }
  .chat-tools { position:sticky; top:0; z-index:1; }

  /* Inline admin forms (block IP, trust IP, markup, search…) wrap and their
     inputs go full-width instead of forcing horizontal scroll. */
  .inline-form { flex-wrap: wrap; }
  .filter-search { flex-wrap: wrap; }
  .filter-search input[type="search"], .filter-search input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .inline-form input[type="text"], .inline-form input[type="search"], .inline-form .input-sm { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .trust-me { width: 100%; }
  .trust-me .inline-form { width: 100%; }

  /* Admin Services: the Sync/Un-sync action row wraps instead of overflowing. */
  .filter-actions, .sync-pair { width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .sync-pair { display: flex; }
  .sync-pair .btn, .filter-actions .btn { flex: 1 1 130px; white-space: normal; }
  .filter-actions form { flex: 1 1 auto; }
}

/* ── Accessibility: visible keyboard focus (Phase 7) ── */
/* Only shows for keyboard users, never on mouse click — a clear ring on every
   interactive element so the site is navigable without a mouse. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Comfortable tap targets on touch devices (WCAG 2.5.5). */
@media (pointer: coarse) {
  .btn, .pill, .nav-links a, .chat-fab, [data-report], .actions-cell button, .actions-cell a {
    min-height: 40px;
  }
  .btn-sm { min-height: 38px; }
  /* Dense text links need the height too — they are otherwise ~16–31px tall. */
  .footer-col a, .kpi-link, .footer-bottom a,
  .order-code-link, .link-cell, .back-link {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .footer-col a { display: flex; }
  .btn-copy-inline { min-width: 40px; min-height: 40px; }
}

/* Keyboard users must be able to jump past the nav (WCAG 2.4.1). Visible only
   while focused. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  background: #1d4ed8; color: #fff; font-weight: 600;
  text-decoration: none !important; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ── Skeleton loading shimmer (for async/awaiting content) ── */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; color: transparent !important; }
.skeleton::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ── Language toggle chip ── */
.lang-toggle { font-size: .72rem; font-weight: 800; letter-spacing: .3px; text-decoration: none; padding: 0 6px; min-width: 34px; }

/* ═══════════════════════════════════════════════════════════
   Dashboard app shell — sidebar + topbar for the signed-in area
   ═══════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; background: var(--bg); }

/* ── Sidebar ── */
.app-sidebar {
  position: sticky; top: 0; align-self: flex-start;
  width: 264px; flex: none; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  z-index: 60; transition: width 0.18s ease;
}
.as-top { display: flex; align-items: center; gap: 8px; padding: 16px 14px 12px; }
.as-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--text); min-width: 0; flex: 1; }
.as-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.as-brand-text strong { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.2px; }
.as-brand-text small { color: var(--text-soft); font-size: 0.74rem; }
.as-collapse {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-soft);
}
.as-collapse:hover { color: var(--primary); border-color: var(--primary); }

.as-user {
  display: flex; align-items: center; gap: 10px; margin: 0 12px 14px;
  padding: 10px; border-radius: 12px; background: var(--surface-2);
  text-decoration: none !important; color: var(--text); min-width: 0;
}
.as-user:hover { background: var(--primary-soft); }
.as-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-btn); color: #fff; font-weight: 800; font-family: var(--font-head);
}
.as-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.as-user-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-user-text small { color: var(--text-soft); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-nav { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.as-group {
  padding: 12px 10px 6px; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-soft);
}
.as-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px; border-radius: 10px;
  color: var(--text-soft); font-weight: 600; font-size: 0.9rem;
  text-decoration: none !important; transition: background 0.14s, color 0.14s;
}
.as-link:hover { background: var(--surface-2); color: var(--text); }
.as-link.active { background: var(--text); color: var(--surface); }
.as-link.active .as-icon { color: inherit; }
.as-icon { display: inline-flex; flex: none; }
.as-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-badge {
  flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff; font-size: 0.68rem; font-weight: 800;
}
.as-link.active .as-badge { background: var(--surface); color: var(--danger); }

.as-foot { padding: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.as-foot-btn { width: 100%; justify-content: center; }
.as-logout { display: block; }

/* Collapsed (desktop): icons only */
.app-shell.collapsed .app-sidebar { width: 74px; }
.app-shell.collapsed .as-brand-text,
.app-shell.collapsed .as-user-text,
.app-shell.collapsed .as-label,
.app-shell.collapsed .as-group,
.app-shell.collapsed .as-lang,
.app-shell.collapsed .as-foot-btn span { display: none; }
.app-shell.collapsed .as-link { justify-content: center; padding: 11px 0; position: relative; }
.app-shell.collapsed .as-user { justify-content: center; }
.app-shell.collapsed .as-collapse { transform: rotate(180deg); }
/* The unread count has nowhere to sit on a 74px rail, but hiding it outright
   means an unread support reply becomes invisible. It shrinks to a dot on the
   icon instead — same signal, no number. */
.app-shell.collapsed .as-badge {
  position: absolute; top: 7px; right: 15px;
  min-width: 9px; width: 9px; height: 9px; padding: 0;
  font-size: 0; border: 2px solid var(--surface);
}
.app-shell.collapsed .as-foot { padding: 12px 10px; }
/* Icon-only buttons need a square-ish body, not the wide pill padding. */
.app-shell.collapsed .as-foot-btn { padding-left: 0; padding-right: 0; min-height: 38px; }
/* Side by side, the 36px logo and the 30px chevron do not fit a 74px rail —
   they were overlapping by 21px. Stacked, both stay centred and clickable. */
.app-shell.collapsed .as-top { flex-direction: column; gap: 10px; padding: 14px 10px 12px; }
.app-shell.collapsed .as-brand { flex: none; justify-content: center; }

/* ── Main column ── */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.app-burger { display: none; }
.app-crumb { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 0.86rem; font-weight: 600; min-width: 0; }
.app-crumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.app-balance {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 12px;
  background: var(--text); color: var(--surface);
  font-family: var(--font-head); font-weight: 800; font-size: 0.92rem;
  text-decoration: none !important; white-space: nowrap;
}
.app-balance:hover { opacity: 0.9; }

.app-page { padding: 26px 22px 90px; max-width: 1280px; width: 100%; }
.app-page > .page-head { margin-bottom: 22px; }
.app-page > .page-head h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* Mobile: sidebar becomes a drawer */
.app-scrim { position: fixed; inset: 0; background: rgba(8, 12, 24, 0.5); z-index: 55; border: 0; }
@media (max-width: 1000px) {
  .app-sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; width: 272px;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }
  .app-shell.nav-open .app-sidebar { transform: translateX(0); }
  .app-burger { display: inline-flex; }
  .as-collapse { display: none; }
  .app-topbar { padding: 10px 14px; }
  .app-page { padding: 18px 14px 90px; }
  /* Collapse must never apply on mobile — the drawer handles it. */
  .app-shell.collapsed .app-sidebar { width: 272px; }
  .app-shell.collapsed .as-brand-text,
  .app-shell.collapsed .as-user-text,
  .app-shell.collapsed .as-label,
  .app-shell.collapsed .as-group,
  .app-shell.collapsed .as-badge { display: initial; }
  .app-shell.collapsed .as-link { justify-content: flex-start; padding: 9px 11px; }
}
@media (min-width: 1001px) { .app-scrim { display: none; } }

@media (max-width: 560px) {
  .app-balance { padding: 8px 11px; font-size: 0.84rem; }
  .app-crumb { display: none; }
}

/* ── Sticky order summary bar ── */
.order-form { padding-bottom: 4px; }
/* Room to scroll the last field clear of the sticky action bar. */
.order-form > .order-bar { margin-bottom: 4px; }
.order-bar {
  position: sticky; bottom: 10px; z-index: 40;
  display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 14px;
  margin-top: 22px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.order-total {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--surface);
}
.order-total span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.75; }
.order-total strong { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; }
.order-bar .btn { justify-content: center; font-size: 1rem; }
@media (max-width: 620px) { .order-bar { grid-template-columns: 1fr; } }

/* ── Platform picker cards ── */
.plat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.plat-count { color: var(--text-soft); font-size: 0.84rem; font-weight: 600; white-space: nowrap; }

/* ── Order detail ── */
.back-link { display: inline-block; margin-bottom: 8px; font-size: 0.88rem; color: var(--text-soft); font-weight: 600; }
.order-code-link { display: inline-block; white-space: nowrap; text-decoration: none !important; }
.order-code-link:hover .order-code { color: var(--primary); }
.order-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.order-detail-grid > * { min-width: 0; }
@media (max-width: 900px) { .order-detail-grid { grid-template-columns: 1fr; } }
.od-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.od-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.od-head-text strong { overflow-wrap: anywhere; }
.od-progress { margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; }
.od-facts { display: grid; grid-template-columns: 1fr; gap: 0; }
.od-facts > div {
  display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border);
  align-items: baseline; flex-wrap: wrap;
}
.od-facts dt { color: var(--text-soft); font-size: 0.88rem; min-width: 120px; }
.od-facts dd { font-weight: 600; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.od-actions h2 { margin-bottom: 6px; }
.od-action { padding: 14px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.od-action:first-of-type { border-top: 0; }
.od-action small { line-height: 1.45; }
.od-note {
  background: var(--primary-soft); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 0.9rem; margin-bottom: 6px;
}
.od-tickets { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.od-tickets li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* The inline copy button sits next to a code string, so it stays visually
   small but keeps a usable hit area. */
.btn-copy-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-soft); cursor: pointer; font-size: 0.9rem;
}
.btn-copy-inline:hover { color: var(--primary); border-color: var(--primary); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PASS — measured on real Chromium at 320/360/375/390/414px.
   Everything below only applies to phones; the desktop layout is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Icon buttons must never be squeezed by a crowded flex row: at 320px the
   theme toggle was collapsing to 20px wide. */
.icon-btn { flex: none; }

@media (max-width: 768px) {
  /* ── Touch targets ──────────────────────────────────────────────────────
     A finger needs ~44px. Buttons measured 38px, chips 35px, small selects
     31px and checkboxes 13px. min-height keeps this true whatever the font
     metrics do, and padding stops the label from touching the edges. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 9px 14px; }
  .icon-btn { width: 44px; height: 44px; }
  .qty-chip { min-height: 44px; padding: 10px 16px; }
  .input-sm { min-height: 44px; padding: 9px 12px; }
  .btn-copy-inline { width: 36px; height: 36px; }
  /* 24px is the WCAG 2.5.8 AA minimum; the label next to it is clickable too,
     so the real hit area is the whole row. */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }

  /* ── iOS zoom ───────────────────────────────────────────────────────────
     Safari zooms the whole page when a focused field is under 16px and never
     zooms back out. Every field is pinned to 16px here — this is the single
     most noticeable mobile bug on the site. */
  input, select, textarea,
  .field input, .field select, .field textarea,
  .input-sm, .input-xs, .ref-link-input { font-size: 16px; }

  /* ── Minimum readable type ──────────────────────────────────────────────
     Nothing below 12px. `code` used a relative size, so nested inside a
     <small> it shrank to 9.3px; an absolute rem stops that compounding. */
  .badge { font-size: 0.78rem; }
  code { font-size: 0.8rem; }
  small, .kpi-link, .as-group, .lang-toggle { font-size: 0.78rem; }
  .as-group { letter-spacing: 0.07em; }
  .order-total span { font-size: 0.75rem; }
  .chart svg text, svg.chart text { font-size: 12px; }
}

/* Long CTA labels have to wrap instead of being clipped: "Get started — it's
   free" needed 273px inside a 270px button on every phone width. */
@media (max-width: 520px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { white-space: normal; }
}

/* Four full-width cards made the dashboard a scrolling column of mostly empty
   space. Two-up holds down to 400px; big money values shrink to fit. */
@media (max-width: 520px) {
  .kpi-grid, .kpi-grid-wide { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi { padding: 15px 16px; }
  /* Money has to fit a half-width card without breaking mid-number: the admin
     "wallet liabilities" figure was rendering as "₱100,008,0 / 46.63". The
     clamp shrinks long values instead, and the wrap stays only as a backstop. */
  .kpi-value { font-size: clamp(1rem, 4.2vw, 1.35rem); overflow-wrap: anywhere; }
  /* The admin grid carries far longer figures (wallet liabilities runs to
     ₱100,008,046.63) in the same half-width card, so it shrinks further. */
  .kpi-grid-wide .kpi-value { font-size: clamp(0.75rem, 3.6vw, 1.35rem); }
}
/* Only the very narrowest phones drop to a single column — two-up still reads
   comfortably at 360px and up. */
@media (max-width: 344px) {
  .kpi-grid, .kpi-grid-wide { grid-template-columns: 1fr; }
}

/* Top bar at 320-420px: burger + language + theme + bell + balance cannot all
   be 44px wide. The language switch moves into the drawer, where it has a
   full-width row, instead of every control being squeezed. */
@media (max-width: 420px) {
  .app-topbar { gap: 8px; padding: 10px 12px; }
  .app-topbar-actions { gap: 8px; }
  .app-topbar-actions .lang-toggle { display: none; }
}
/* Hidden by default and only revealed on the narrow widths where the top bar
   drops the language toggle. The base rule has to carry `display: none` — a
   plain `.as-lang` block placed after a min-width media query would win the
   cascade and leak the pill onto every desktop sidebar. */
.as-lang {
  display: none; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-bottom: 8px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-soft); font-weight: 700; font-size: 0.85rem;
  text-decoration: none !important;
}
.as-lang:hover { color: var(--primary); border-color: var(--primary); }
@media (max-width: 420px) { .as-lang { display: flex; } }

/* ── Scrollbars ────────────────────────────────────────────────────────────
   Every scrollable panel used the OS default, which paints a wide light-grey
   bar — glaring down the middle of a dark sidebar. The standard properties are
   applied everywhere; the -webkit rules stay scoped to the named panels so
   macOS overlay scrollbars elsewhere keep hiding themselves when idle. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }

.as-nav::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.chat-body::-webkit-scrollbar,
.svc-list::-webkit-scrollbar { width: 7px; height: 7px; }

.as-nav::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.chat-body::-webkit-scrollbar-track,
.svc-list::-webkit-scrollbar-track { background: transparent; }

.as-nav::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb,
.svc-list::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.as-nav::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.chat-body::-webkit-scrollbar-thumb:hover,
.svc-list::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }

.as-nav::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner { background: transparent; }

/* ── Scroll affordance ─────────────────────────────────────────────────────
   The sidebar nav cuts off mid-item when the list is longer than the drawer.
   A soft fade into the footer shows there is more below. Over the plain
   surface (nothing to scroll) the gradient is invisible, so it costs nothing. */
.as-foot { position: relative; }
.as-foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}

/* ── Native controls ───────────────────────────────────────────────────────
   Selects and file inputs were completely unstyled, so every browser painted
   its own grey OS widget — a raw "Choose File / No file chosen" sat in the
   middle of the deposit form. These match the rest of the form. */
.field select, select.input-sm, select.input-xs {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2355607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[data-theme="dark"] .field select,
[data-theme="dark"] select.input-sm,
[data-theme="dark"] select.input-xs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2393a0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.input-sm, select.input-xs { background-position: right 10px center; padding-right: 30px; }

.field input[type="file"] { padding: 8px 12px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font-family: var(--font-head); font-weight: 600; font-size: 0.85rem;
  margin-right: 12px; padding: 8px 14px; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text);
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--primary); color: var(--primary); }

/* ── 2FA recovery codes ────────────────────────────────────────────────────
   Shown once, meant to be copied or written down, so they are set in a mono
   face at a size that is comfortable to transcribe by hand. */
.recovery-box {
  border: 1.5px solid var(--warning); border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.08); padding: 14px 16px; margin-bottom: 18px;
}
.recovery-box h3 { font-size: 1rem; margin-bottom: 6px; }
.recovery-codes {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin: 12px 0;
}
.recovery-codes code {
  display: block; text-align: center; font-size: 0.95rem; letter-spacing: 0.5px; padding: 7px 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   NOIR EXCHANGE — dark-first professional marketplace skin
   The existing layout and accessibility behavior stay intact; this layer
   changes the visual language without changing application functionality.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --primary: #335f18;
  --primary-2: #1f7a4d;
  --primary-soft: rgba(86, 148, 43, 0.12);
  --accent: #54a82f;
  --accent-text: #2f731b;
  --bg: #f0f2ec;
  --surface: #fafbf7;
  --surface-2: #e8ece3;
  --text: #10150f;
  --text-soft: #596455;
  --border: #cfd6ca;
  --radius: 14px;
  --radius-sm: 9px;
  --grad: linear-gradient(120deg, #315f19, #16714b 62%, #4f8f26);
  --grad-btn: linear-gradient(135deg, #315f19, #16714b);
}

[data-theme="dark"] {
  color-scheme: dark;
  --primary: #b7ff3c;
  --primary-2: #5ee5a2;
  --primary-soft: rgba(183, 255, 60, 0.09);
  --accent: #8cff2e;
  --accent-text: #b7ff3c;
  --danger: #ff4d64;
  --danger-text: #ff8a9a;
  --warning: #f0ba30;
  --bg: #050706;
  --surface: #0b0e0c;
  --surface-2: #111612;
  --text: #eff6eb;
  --text-soft: #8d9a88;
  --border: #242c23;
  --scroll-thumb: rgba(183, 255, 60, 0.22);
  --scroll-thumb-hover: rgba(183, 255, 60, 0.42);
  --grad: linear-gradient(120deg, #b7ff3c, #5ee5a2 62%, #d6ff86);
  --grad-btn: linear-gradient(135deg, #b7ff3c, #83e936);
  --shadow: 0 18px 42px -24px rgba(0, 0, 0, 0.95);
  --shadow-lg: 0 30px 80px -34px rgba(0, 0, 0, 1);
}

body {
  background-image:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 30%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--primary-2) 7%, transparent), transparent 24%);
  background-attachment: fixed;
  letter-spacing: -0.005em;
}

[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(183,255,60,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,60,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

h1, h2, h3, h4 { letter-spacing: -0.035em; }
code, .eyebrow, .hero-eyebrow, .section-eyebrow, .page-kicker,
.as-group, .kpi-label, .table th, .badge, .app-crumb, .market-status {
  font-family: var(--font-mono);
}

.grad-text {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 20%, transparent));
}

.nav,
.app-topbar {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-color: var(--border);
}

.brand-mark {
  border-radius: 9px;
  background: var(--grad-btn);
  color: #071006;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 38%, transparent),
              0 0 28px color-mix(in srgb, var(--primary) 17%, transparent);
}

.brand-text,
.as-brand-text strong { text-transform: uppercase; letter-spacing: .035em; }
.as-brand-text small { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }

.market-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--primary-soft);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.market-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.btn {
  border-radius: 9px;
  letter-spacing: -.01em;
  box-shadow: none;
}
.btn-primary {
  background: var(--grad-btn);
  color: #071006;
  border-color: color-mix(in srgb, var(--primary) 72%, #fff);
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--primary) 70%, transparent);
}
.btn-primary:hover {
  box-shadow: 0 16px 36px -15px color-mix(in srgb, var(--primary) 62%, transparent);
}
.btn-outline, .btn-google, .icon-btn {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: var(--border);
}
.btn-outline:hover, .btn-google:hover, .icon-btn:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 8%, transparent);
}

.card,
.section-card,
.phone-card,
.order-bar,
.chat-panel,
.modal-card {
  position: relative;
  border-color: var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 96%, var(--primary) 4%),
    var(--surface));
  box-shadow: var(--shadow);
}
[data-theme="dark"] .card::before,
[data-theme="dark"] .section-card::before,
[data-theme="dark"] .phone-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(183,255,60,.28), transparent);
}
.card:hover { border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); }

.hero { min-height: min(820px, calc(100vh - 65px)); display: flex; align-items: center; }
.hero-eyebrow, .section-eyebrow, .page-kicker {
  color: var(--accent-text);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-eyebrow::before, .page-kicker::before { content: '// '; opacity: .55; }
.hero-title { max-width: 780px; }
.hero-sub { color: var(--text-soft); }
.hero-chips .chip {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-family: var(--font-mono);
  font-size: .72rem;
}
.phone-card { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.live-pill, .ps-delta { font-family: var(--font-mono); }

.stats-strip {
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.stat-num { color: var(--primary); letter-spacing: -.05em; }
.stat-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }

.app-sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--primary) 3%), var(--surface));
  border-color: var(--border);
}
.as-user {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.as-avatar { background: var(--grad-btn); color: #071006; border-radius: 9px; }
.as-link { border: 1px solid transparent; border-radius: 8px; }
.as-link:hover { border-color: var(--border); }
.as-link.active {
  color: #071006;
  background: var(--grad-btn);
  border-color: color-mix(in srgb, var(--primary) 78%, #fff);
  box-shadow: 0 8px 24px -15px color-mix(in srgb, var(--primary) 80%, transparent);
}
.as-link.active .as-badge { color: #071006; background: rgba(7,16,6,.16); }
.as-foot { background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%); }
.app-dot { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.app-balance { background: var(--grad-btn); color: #071006; border: 1px solid color-mix(in srgb, var(--primary) 75%, #fff); border-radius: 9px; }
.app-page { max-width: 1440px; }
.page-head { display: grid; gap: 6px; }
.page-head h1 { margin: 0; }
.page-head p { color: var(--text-soft); }

.kpi { overflow: hidden; }
.kpi::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  right: -34px;
  bottom: -42px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--primary) 3%, transparent);
}
.kpi-label { letter-spacing: .08em; text-transform: uppercase; }
.kpi-value { color: var(--text); letter-spacing: -.055em; }
.kpi-link { color: var(--accent-text); }

.table { border-collapse: separate; border-spacing: 0; }
.table th {
  color: var(--text-soft);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}
.table td { border-color: var(--border); }
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: var(--primary-soft); }

.field input, .field select, .field textarea,
.input-sm, .input-xs, .ref-link-input, .chat-input input {
  border-color: var(--border);
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--surface-2) 74%, transparent);
}
.field input:focus, .field select:focus, .field textarea:focus,
.input-sm:focus, .input-xs:focus, .ref-link-input:focus, .chat-input input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 24px color-mix(in srgb, var(--primary) 7%, transparent);
}

.badge { border-radius: 5px; letter-spacing: .045em; text-transform: uppercase; }
.pill { border-radius: 7px; }
.pill.active { color: #071006; background: var(--grad-btn); border-color: var(--primary); }
.announce { background: #10180d; color: #dfffad; border-bottom: 1px solid #26391d; font-family: var(--font-mono); }
.chat-fab { color: #071006; background: var(--grad-btn); border: 1px solid var(--primary); }

@media (max-width: 760px) {
  .market-status { display: none; }
  .hero { min-height: auto; }
}
/* SMTP login OTP */
.otp-auth-wrap { position: relative; isolation: isolate; }
.otp-card { overflow: hidden; text-align: center; }
.otp-card::after { content: ''; position: absolute; width: 230px; height: 230px; inset: -150px -100px auto auto; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 20%, transparent), transparent 68%); }
.otp-card .page-kicker { display: block; margin-bottom: 8px; }
.otp-card .auth-sub strong { color: var(--text); }
.otp-orbit { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 16px; background: var(--primary-soft); box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 12%, transparent); }
.otp-orbit span { width: 15px; height: 15px; border: 2px solid var(--primary); border-radius: 50%; }
.otp-orbit i { position: absolute; width: 34px; height: 34px; border: 1px dashed color-mix(in srgb, var(--primary) 52%, transparent); border-radius: 50%; animation: otpOrbit 4s linear infinite; }
@keyframes otpOrbit { to { transform: rotate(360deg); } }
.otp-inputs { display: grid; grid-template-columns: repeat(4, minmax(48px, 66px)); justify-content: center; gap: 12px; margin: 28px 0 22px; }
.otp-inputs.otp-inputs-six { grid-template-columns: repeat(6, minmax(40px, 58px)); gap: 9px; }
.otp-inputs input { width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: 15px; outline: 0; color: var(--text); background: color-mix(in srgb, var(--surface-2) 84%, transparent); text-align: center; font: 700 1.55rem/1 var(--font-head); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.otp-inputs input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft), 0 0 26px color-mix(in srgb, var(--primary) 12%, transparent); transform: translateY(-2px); }
.otp-inputs input.filled { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.otp-resend { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.otp-resend span, .otp-note { color: var(--text-soft); font-size: .76rem; }
.otp-note { margin: 18px 0 0; line-height: 1.55; }
@media (max-width: 480px) {
  .otp-inputs { grid-template-columns: repeat(4, minmax(42px, 1fr)); gap: 8px; }
  .otp-inputs.otp-inputs-six { grid-template-columns: repeat(6, minmax(34px, 1fr)); gap: 6px; }
}

/* ── Mass order · bulk fulfillment workspace ───────────────────────────── */
.mass-order-page { position: relative; max-width: 1380px; }
.mass-order-page::before {
  content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 20%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--border) 20%, transparent) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.mass-command-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); gap: 36px; align-items: end;
  margin-bottom: 22px; padding: 36px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--primary) 7%, var(--surface)));
  box-shadow: 0 30px 90px -66px var(--primary);
}
.mass-command-hero::after {
  content: ''; position: absolute; z-index: -1; width: 360px; aspect-ratio: 1; right: -95px; top: -205px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 50%;
  box-shadow: 0 0 0 45px color-mix(in srgb, var(--primary) 3%, transparent), 0 0 0 90px color-mix(in srgb, var(--primary) 2%, transparent);
  animation: massOrbit 12s linear infinite;
}
@keyframes massOrbit { to { transform: rotate(1turn); } }
.mass-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font: 800 .66rem var(--font-head); letter-spacing: .16em; }
.mass-eyebrow i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--primary); box-shadow: 0 0 14px var(--primary); animation: pulse 1.8s ease infinite; }
.mass-command-copy h1 { margin: 12px 0 10px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.02; letter-spacing: -.04em; }
.mass-command-copy p { max-width: 690px; color: var(--text-soft); font-size: .98rem; line-height: 1.65; }
.mass-command-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mass-command-metrics div { min-width: 0; padding: 16px 14px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); }
.mass-command-metrics span, .mass-command-metrics small { display: block; overflow: hidden; color: var(--text-soft); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.mass-command-metrics strong { display: block; margin: 5px 0 2px; font: 850 1.3rem var(--font-head); }

.mass-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); gap: 20px; align-items: start; }
.mass-builder { display: grid; gap: 16px; min-width: 0; }
.mass-step-card, .mass-summary-card, .mass-protocol-card {
  border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 24px 70px -58px rgba(0,0,0,.8);
}
.mass-step-card { position: relative; min-width: 0; padding: 24px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.mass-step-card:focus-within { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: 0 28px 78px -58px var(--primary); }
.mass-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; margin-bottom: 20px; }
.mass-step-number { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border)); border-radius: 13px; color: var(--primary); background: var(--primary-soft); font: 850 .78rem var(--font-head); }
.mass-step-head h2 { margin: 0; font-size: 1.04rem; }
.mass-step-head p { margin: 4px 0 0; color: var(--text-soft); font-size: .75rem; }
.mass-step-state { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--surface-2); font: 800 .57rem var(--font-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mass-step-state.is-done { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); }
.mass-step-state.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 36%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.mass-platform-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.mass-platform-grid .plat-btn { min-height: 78px; border-radius: 15px; background: color-mix(in srgb, var(--surface-2) 78%, transparent); }
.mass-platform-grid .plat-btn.active { color: var(--text); background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface)); }
.mass-service-picker .svc-trigger { min-height: 58px; padding: 13px 15px; border-radius: 14px; background: var(--surface-2); }
.mass-service-picker .svc-panel { top: calc(100% + 10px); z-index: 75; border-radius: 18px; }
.mass-service-picker .svc-search { padding: 13px 15px; }
.mass-service-picker .svc-search kbd { padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-soft); background: var(--surface-2); font: 700 .56rem var(--font-head); }
.mass-service-picker .svc-list { max-height: min(440px, 58vh); }
.mass-service-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; animation: massRise .24s ease both; }
.mass-service-facts div { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.mass-service-facts span { display: block; color: var(--text-soft); font-size: .61rem; }
.mass-service-facts strong { display: block; overflow: hidden; margin-top: 4px; font: 800 .75rem var(--font-head); text-overflow: ellipsis; white-space: nowrap; }
@keyframes massRise { from { opacity: 0; transform: translateY(5px); } }

.mass-links-field { display: block; overflow: hidden; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface-2); transition: border-color .16s, box-shadow .16s; }
.mass-links-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.mass-links-field textarea { width: 100%; min-height: 210px; display: block; padding: 16px; border: 0; outline: 0; resize: vertical; color: var(--text); background: transparent; font: 500 .86rem/1.65 var(--font-mono); }
.mass-paste-hint { display: block; padding: 9px 15px; border-top: 1px solid var(--border); color: var(--text-soft); background: color-mix(in srgb, var(--surface) 60%, transparent); font-size: .65rem; }
.mass-validation-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.mass-validation-row span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; color: var(--text-soft); background: var(--surface-2); font-size: .65rem; }
.mass-validation-row i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mass-validation-row .is-valid { color: var(--primary); }
.mass-validation-row .is-invalid { color: var(--danger); }
.mass-field-error { margin: 10px 0 0; padding: 9px 11px; border-radius: 9px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); font-size: .72rem; }
.mass-quantity-field { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(220px, 1fr); gap: 14px; align-items: center; }
.mass-quantity-field > span { font-weight: 700; font-size: .78rem; }
.mass-number-wrap { display: flex; align-items: center; overflow: hidden; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-2); transition: border-color .16s, box-shadow .16s; }
.mass-number-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.mass-number-wrap input { min-width: 0; flex: 1; padding: 13px 15px; border: 0; outline: 0; color: var(--text); background: transparent; font: 750 1rem var(--font-head); }
.mass-number-wrap small { padding: 0 14px; border-left: 1px solid var(--border); color: var(--text-soft); font-size: .67rem; white-space: nowrap; }
.mass-qty-chips { margin: 12px 0 0; }

.mass-sidebar { position: sticky; top: 76px; display: grid; gap: 15px; min-width: 0; }
.mass-summary-card { position: relative; overflow: hidden; padding: 24px; border-color: color-mix(in srgb, var(--primary) 36%, var(--border)); background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 97%, transparent), color-mix(in srgb, var(--primary) 5%, var(--surface))); }
.mass-summary-card::after { content: ''; position: absolute; z-index: 0; width: 170px; height: 170px; top: -110px; right: -75px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 9%, transparent); filter: blur(2px); }
.mass-summary-card > * { position: relative; z-index: 1; }
.mass-summary-card header h2 { margin: 8px 0 0; font-size: 1.25rem; }
.mass-selected-service { min-width: 0; display: flex; align-items: center; gap: 11px; margin: 20px 0 16px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.mass-selected-service .pbadge, .mass-summary-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: none; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.mass-selected-service div { min-width: 0; }
.mass-selected-service small { display: block; color: var(--text-soft); font-size: .6rem; }
.mass-selected-service strong { display: block; overflow: hidden; margin-top: 3px; font: 750 .72rem/1.35 var(--font-head); text-overflow: ellipsis; white-space: nowrap; }
.mass-summary-list { margin: 0; }
.mass-summary-list div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-top: 1px dashed var(--border); }
.mass-summary-list dt { color: var(--text-soft); font-size: .72rem; }
.mass-summary-list dd { margin: 0; font: 800 .76rem var(--font-head); }
.mass-total-panel { margin: 10px 0 14px; padding: 16px; border-radius: 15px; color: #ecffd3; background: linear-gradient(135deg, #14200e, #0b1208); box-shadow: inset 0 0 0 1px rgba(158,255,54,.16); }
.mass-total-panel span, .mass-total-panel small { display: block; color: #9bac91; font-size: .62rem; }
.mass-total-panel strong { display: block; margin: 4px 0; color: var(--primary); font: 900 clamp(1.55rem, 3vw, 2rem) var(--font-head); letter-spacing: -.03em; }
.mass-total-panel small.is-short { color: #ff8f8f; }
.mass-launch-button { min-height: 52px; display: flex; justify-content: space-between; gap: 12px; }
.mass-secure-note { margin: 10px 0 0; color: var(--text-soft); text-align: center; font-size: .6rem; }
.mass-protocol-card { padding: 20px; }
.mass-protocol-card h3 { margin: 0 0 13px; font-size: .88rem; }
.mass-protocol-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mass-protocol-card li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; }
.mass-protocol-card li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--primary); font: 800 .58rem var(--font-head); }
.mass-protocol-card p { margin: 0; color: var(--text-soft); font-size: .68rem; line-height: 1.5; }
.mass-protocol-card strong { color: var(--text); }

.mass-confirm-overlay { z-index: 180; }
.mass-confirm-card { width: min(520px, calc(100vw - 28px)); padding: 28px; text-align: left; }
.mass-confirm-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 15px; color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 12%, transparent); font: 900 1.2rem var(--font-head); }
.mass-confirm-card h2 { margin: 8px 0; }
.mass-confirm-card > p { color: var(--text-soft); font-size: .8rem; }
.mass-confirm-card .confirm-lines { margin: 18px 0; }
.mass-confirm-card .confirm-lines strong { max-width: 66%; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .mass-command-hero { grid-template-columns: 1fr; gap: 24px; }
  .mass-workspace { grid-template-columns: 1fr; }
  .mass-sidebar { position: static; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); }
}
@media (max-width: 720px) {
  .mass-command-hero { padding: 25px 21px; border-radius: 20px; }
  .mass-command-copy h1 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .mass-command-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mass-command-metrics div { padding: 12px 9px; }
  .mass-command-metrics small { display: none; }
  .mass-step-card { padding: 18px 15px; border-radius: 18px; }
  .mass-step-head { grid-template-columns: auto minmax(0, 1fr); }
  .mass-step-state { grid-column: 2; justify-self: start; margin-top: -8px; }
  .mass-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mass-platform-grid .plat-btn { min-height: 72px; }
  .mass-service-facts { grid-template-columns: 1fr; }
  .mass-quantity-field { grid-template-columns: 1fr; gap: 8px; }
  .mass-sidebar { grid-template-columns: 1fr; }
  .mass-summary-card { padding: 20px; }
  .mass-confirm-card .confirm-actions { display: grid; grid-template-columns: 1fr; }
  .mass-confirm-card .confirm-actions .btn { width: 100%; }
}
@media (max-width: 420px) {
  .mass-command-metrics strong { font-size: 1rem; }
  .mass-command-metrics span { font-size: .53rem; }
  .mass-step-number { width: 37px; height: 37px; }
  .mass-step-head h2 { font-size: .94rem; }
  .mass-step-head p { font-size: .68rem; }
  .mass-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mass-validation-row { gap: 5px; }
  .mass-validation-row span { padding: 5px 7px; font-size: .59rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mass-command-hero::after, .mass-eyebrow i { animation: none; }
  .mass-step-card, .mass-service-facts { transition: none; animation: none; }
}

/* ── 2026 workspace polish: accessible light mode + shared app surfaces ── */
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --primary: #315f1b;
  --primary-2: #14724b;
  --primary-soft: rgba(49, 95, 27, .09);
  --accent: #4b8f2a;
  --accent-text: #285b18;
  --bg: #f4f7f1;
  --surface: #ffffff;
  --surface-2: #edf2ea;
  --text: #121a11;
  --text-soft: #5b6957;
  --border: #d8e1d4;
  --shadow: 0 18px 48px -34px rgba(24, 45, 18, .34);
  --shadow-lg: 0 34px 90px -48px rgba(24, 45, 18, .38);
  --grad: linear-gradient(120deg, #315f1b, #14724b 62%, #4b8f2a);
  --grad-btn: linear-gradient(135deg, #315f1b, #14724b);
}
:root:not([data-theme="dark"]) body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 8% -5%, rgba(75,143,42,.13), transparent 28%),
    radial-gradient(circle at 94% 8%, rgba(20,114,75,.08), transparent 24%);
}
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .as-link.active,
:root:not([data-theme="dark"]) .app-balance,
:root:not([data-theme="dark"]) .pill.active,
:root:not([data-theme="dark"]) .as-avatar { color: #fff; }
:root:not([data-theme="dark"]) .as-link.active .as-badge { color: #fff; background: rgba(255,255,255,.2); }
:root:not([data-theme="dark"]) .mass-total-panel {
  color: var(--text);
  background: linear-gradient(135deg, #eef6e9, #e5f1e9);
  box-shadow: inset 0 0 0 1px var(--border);
}
:root:not([data-theme="dark"]) .mass-total-panel span,
:root:not([data-theme="dark"]) .mass-total-panel small { color: var(--text-soft); }
:root:not([data-theme="dark"]) .mass-total-panel strong { color: var(--accent-text); }

.nav-home-link,
.as-workspace {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font: 760 .82rem/1 var(--font-head);
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav-home-link { padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.nav-home-link:hover, .as-workspace:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }
.as-workspace { min-width: 0; overflow: hidden; }
.as-workspace svg { width: 18px; height: 18px; flex: none; }
.as-workspace span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell.collapsed .as-workspace span { display: none; }

.custom-comments-field {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--primary) 5%, var(--surface)));
}
.custom-comments-field textarea {
  min-height: 190px;
  resize: vertical;
  font-family: var(--font-body);
  line-height: 1.55;
}
.comments-counter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: .7rem;
}
.comments-counter strong { color: var(--accent-text); }

.provider-order-code {
  color: var(--accent-text);
  font-weight: 800;
  white-space: nowrap;
}
.local-order-ref {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font: 600 .62rem/1.2 var(--font-mono);
  white-space: nowrap;
}
.order-code-link { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; }

.admin-services-page .service-command-hero,
.container.page > .kpi-grid,
.app-page > .kpi-grid { isolation: isolate; }
.filter-bar,
.section-card { overflow: clip; }
.table-wrap.card { overflow-x: auto; overflow-y: hidden; }
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.table td, .table th { vertical-align: middle; }

@media (max-width: 880px) {
  .orders-table-wrap.card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .orders-table,
  .orders-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .orders-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .orders-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .orders-table tbody tr:hover { background: var(--surface); }
  .orders-table td,
  .orders-table td.num {
    display: grid;
    grid-template-columns: minmax(84px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 14px;
    border: 0;
    border-top: 1px solid var(--border);
    text-align: left;
    white-space: normal;
  }
  .orders-table td::before {
    content: attr(data-label);
    color: var(--text-soft);
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .orders-table td:nth-child(1),
  .orders-table td:nth-child(2),
  .orders-table td:nth-child(3),
  .orders-table td:nth-child(8),
  .orders-table td:nth-child(9),
  .orders-table td:last-child { grid-column: 1 / -1; }
  .orders-table td:first-child {
    border-top: 0;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  }
  .orders-table .svc-cell { min-width: 0; }
  .orders-table .svc-name,
  .orders-table .link-cell { overflow-wrap: anywhere; }
  .orders-table .order-date {
    min-width: 0;
    white-space: normal;
  }
  .orders-table .actions-cell {
    display: flex;
    min-width: 0;
    padding: 12px 14px;
    gap: 8px;
    background: var(--surface-2);
  }
  .orders-table .actions-cell::before { content: none; }
  .orders-table .actions-cell .btn,
  .orders-table .actions-cell form { flex: 1 1 auto; }
  .orders-table .actions-cell form .btn { width: 100%; }
  .orders-table .order-refresh-btn span { display: inline; }
}

@media (max-width: 540px) {
  .orders-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  .orders-table td { grid-column: 1 / -1; }
}

/* ── Premium accounts storefront ───────────────────────── */
.premium-page, .admin-premium-page { position: relative; }
.premium-page::before, .admin-premium-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 82% 8%, rgba(212, 162, 61, .14), transparent 32%), radial-gradient(circle at 18% 80%, rgba(184, 126, 27, .08), transparent 34%); }
.premium-hero, .premium-admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(224, 174, 70, .5); border-radius: 26px; background: linear-gradient(130deg, #171207 0%, #30220b 52%, #171207 100%); box-shadow: 0 26px 70px -42px rgba(231, 176, 62, .8), inset 0 1px rgba(255, 240, 191, .16); overflow: hidden; }
.premium-hero::after, .premium-admin-hero::after { content: ""; width: 170px; height: 170px; flex: none; border: 1px solid rgba(255, 218, 119, .25); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255, 214, 112, .05), 0 0 0 44px rgba(255, 214, 112, .035); animation: premiumOrbit 10s linear infinite; }
.premium-kicker { color: #e7b84e; font: 800 .66rem var(--font-head); letter-spacing: .18em; }
.premium-hero h1, .premium-admin-hero h1 { margin: 10px 0 8px; color: #fff6dc; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
.premium-hero h1 span, .premium-admin-hero h1 span { color: #e9b84e; }
.premium-hero p, .premium-admin-hero p { max-width: 600px; margin: 0; color: #cbbb91; }
.premium-hero-badge { display: grid; place-items: center; width: 96px; height: 96px; flex: none; border: 1px solid #f4cd6b; border-radius: 50%; color: #f8d37a; background: radial-gradient(circle at 30% 25%, #594419, #1c1406 68%); font: 900 1rem/1.1 var(--font-head); text-align: center; letter-spacing: .14em; box-shadow: 0 0 34px rgba(232, 177, 64, .3); animation: premiumPulse 3s ease-in-out infinite; }
.premium-hero-badge small { font-size: .52rem; letter-spacing: .2em; }
.premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.premium-product { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 280px; padding: 21px; border: 1px solid rgba(218, 168, 65, .45); border-radius: 20px; background: linear-gradient(155deg, #33250d 0%, #1d1609 50%, #100e09 100%); box-shadow: 0 20px 44px -30px rgba(236, 183, 69, .8), inset 0 1px rgba(255, 239, 183, .13); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.premium-product:hover { transform: translateY(-4px); border-color: #efc45d; box-shadow: 0 26px 56px -28px rgba(236, 183, 69, .9), inset 0 1px rgba(255, 239, 183, .2); }
.premium-product.is-sold-out { filter: saturate(.45); opacity: .76; }
.premium-product-top, .premium-product-bottom, .premium-section-head, .premium-admin-product-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.premium-product-badge { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 219, 120, .55); border-radius: 12px; color: #ffdb79; background: rgba(255, 204, 86, .1); font-size: 1.2rem; }
.premium-stock { display: inline-flex; align-items: center; gap: 6px; color: #c9ba97; font-size: .7rem; font-weight: 750; }
.premium-stock i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.premium-stock.in-stock { color: #9fd276; }.premium-stock.out-of-stock { color: #d79879; }
.premium-platform { margin-top: 24px; color: #d9aa48; font: 800 .67rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; }
.premium-product h2 { margin: 7px 0 8px; color: #fff5d9; font-size: 1.15rem; }
.premium-product p { min-height: 45px; margin: 0; color: #c1b38f; font-size: .82rem; line-height: 1.55; }
.premium-product-bottom { align-items: flex-end; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(231, 184, 78, .2); }
.premium-product-bottom small { display: block; color: #af9c72; font-size: .65rem; }.premium-product-bottom strong { display: block; margin-top: 3px; color: #f4ca65; font: 900 1.35rem var(--font-head); }
.premium-buy, .premium-admin-submit, .premium-spotlight-btn { color: #201504; border: 0; background: linear-gradient(135deg, #ffe08a, #c88b22); box-shadow: 0 10px 25px -15px #e8ad3e; }.premium-buy:hover, .premium-admin-submit:hover, .premium-spotlight-btn:hover { color: #201504; filter: brightness(1.08); transform: translateY(-1px); }
.premium-buy span, .premium-spotlight-btn span { margin-left: 7px; font-size: 1.1em; }
.premium-disabled { color: #bd9e68; font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.premium-empty { grid-column: 1 / -1; padding: 52px 20px; border: 1px dashed rgba(224, 174, 70, .4); border-radius: 20px; color: #cfbc8f; background: rgba(53, 37, 10, .45); text-align: center; }.premium-empty span { display: block; margin-bottom: 8px; color: #efc45d; font-size: 1.8rem; }.premium-empty strong { color: #fff1c6; }.premium-empty p { margin: 6px 0 0; }
.premium-purchases { margin-top: 34px; }.premium-section-head { margin-bottom: 13px; }.premium-section-head h2 { margin: 5px 0 0; color: var(--text); font-size: 1.25rem; }.premium-history-note, .premium-form-hint { color: var(--text-soft); font-size: .72rem; }
.premium-purchase-list { display: grid; gap: 12px; }.premium-purchase { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 17px; border: 1px solid rgba(224, 174, 70, .35); border-radius: 16px; background: linear-gradient(120deg, rgba(58, 42, 14, .78), rgba(25, 21, 13, .9)); }.premium-purchase-id { display: block; color: #e7b84e; font: 800 .65rem var(--font-head); letter-spacing: .1em; }.premium-purchase strong { display: block; margin-top: 6px; color: #fff0c2; }.premium-purchase small { display: block; margin-top: 5px; color: #bcae8a; }.premium-delivery { padding: 12px; border: 1px solid rgba(224, 174, 70, .2); border-radius: 12px; background: rgba(8, 7, 5, .35); }.premium-delivery span { color: #dcb45e; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.premium-delivery pre { margin: 7px 0 0; color: #f5eacb; font: .8rem/1.5 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.premium-spotlight { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -4px 0 22px; padding: 14px 18px; border: 1px solid rgba(224, 174, 70, .4); border-radius: 17px; background: linear-gradient(110deg, rgba(61, 44, 13, .8), rgba(29, 22, 10, .74)); }.premium-spotlight-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid rgba(255, 219, 120, .6); border-radius: 12px; color: #ffdb79; background: rgba(255, 204, 86, .12); font-size: 1.25rem; box-shadow: 0 0 20px rgba(232, 177, 64, .2); }.premium-spotlight h2 { margin: 5px 0 4px; color: #ffedbb; font-size: 1.05rem; }.premium-spotlight p { margin: 0; color: #c5b58d; font-size: .78rem; }
.premium-admin-hero { margin-bottom: 18px; }.premium-admin-stat { display: grid; place-items: center; min-width: 120px; padding: 15px; border: 1px solid rgba(240, 198, 99, .4); border-radius: 16px; color: #d6b15a; background: rgba(255, 204, 86, .08); text-align: center; }.premium-admin-stat strong { font: 900 2rem var(--font-head); }.premium-admin-stat span { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.premium-admin-layout { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }.premium-editor-card, .premium-inventory { min-width: 0; }.premium-editor-card { border-color: rgba(224, 174, 70, .34); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 84%, #4b350c), var(--surface)); }.premium-form { display: grid; gap: 11px; }.premium-form label { display: grid; gap: 6px; color: var(--text-soft); font-size: .72rem; font-weight: 750; }.premium-form input, .premium-form select, .premium-form textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-2); font: inherit; }.premium-form textarea { resize: vertical; }.premium-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.premium-check { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 8px !important; }.premium-check input { width: auto; }.premium-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 5px; }.premium-edit-actions form { display: inline-flex; }.premium-inventory { display: grid; gap: 12px; }.premium-admin-product { border-color: color-mix(in srgb, #d8a73f 28%, var(--border)); }.premium-admin-product.is-archived { opacity: .65; }.premium-admin-product-head { align-items: flex-start; }.premium-admin-product-head > div { min-width: 0; flex: 1; }.premium-admin-product-head strong { display: block; color: var(--text); }.premium-admin-product-head small { display: block; margin-top: 4px; color: var(--text-soft); }.premium-edit-form { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); }
@keyframes premiumOrbit { to { transform: rotate(360deg); } } @keyframes premiumPulse { 50% { box-shadow: 0 0 42px rgba(232, 177, 64, .48); } }
@media (max-width: 900px) { .premium-admin-layout { grid-template-columns: 1fr; }.premium-hero::after, .premium-admin-hero::after { display: none; } }
@media (max-width: 620px) { .premium-hero, .premium-admin-hero, .premium-spotlight { align-items: flex-start; flex-direction: column; }.premium-hero-badge, .premium-admin-stat { align-self: flex-end; }.premium-purchase { grid-template-columns: 1fr; }.premium-form-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .premium-hero::after, .premium-admin-hero::after, .premium-hero-badge, .premium-platform-card::before, .premium-platform-card::after, .premium-platform-logo { animation: none; }.premium-product, .premium-platform-card { transition: none; } }

@media (max-width: 720px) {
  .nav-home-link { padding: 8px 10px; font-size: .76rem; }
  .custom-comments-field { padding: 13px; }
  .comments-counter { flex-direction: column; gap: 3px; }
}