/* Mizzy Sales | shared customer-page design. Dashboard palette is the source of truth.
   This is deliberately loaded after older page styles; original page logic is unchanged. */
:root {
  --gold: #00b4f8;
  --gold2: #0084d6;
  --gold3: #a9eaff;
  --accent: #00b4f8;
  --blue: #00b4f8;
  --bg: #0b0f19;
  --bg2: #101827;
  --bg3: #172237;
  --bg4: #1c2a40;
  --card: #131b2e;
  --card2: #19253a;
  --border: #29394f;
  --border2: #35475e;
  --t1: #f0f6fc;
  --t2: #a6b5cb;
  --t3: #8293ae;
  --r8: 8px;
  --r12: 8px;
  --r16: 8px;
  --r24: 8px;
  --sh: 0 12px 32px rgba(2, 12, 28, .22);
  --sh2: 0 4px 16px rgba(2, 12, 28, .12);
  --market-accent: #00b4f8;
  --kls-r-lg: 8px;
  --kls-r-md: 8px;
  --app-radius: 8px;
}
html[data-theme="light"] {
  --gold: #0084d6;
  --gold2: #0066ae;
  --gold3: #d0f2fe;
  --accent: #0084d6;
  --blue: #0084d6;
  --bg: #f4f8fc;
  --bg2: #ffffff;
  --bg3: #edf5fb;
  --bg4: #e6f0f8;
  --card: #ffffff;
  --card2: #f5faff;
  --border: #dce8f2;
  --border2: #c8dbea;
  --t1: #0e1726;
  --t2: #536680;
  --t3: #657c96;
  --sh: 0 12px 32px rgba(24, 70, 110, .08);
  --sh2: 0 3px 12px rgba(24, 70, 110, .06);
}
/* The optional accessibility theme remains neutral, while keeping its blue actions. */
html[data-theme="off"] { --gold: #0084d6; --gold2: #0066ae; --accent: #0084d6; }
html { font-size: 11px; }
@media (max-width: 420px) { html { font-size: 11px; } }
@media (min-width: 1100px) { html { font-size: 11px; } }
body { background: var(--bg); color: var(--t1); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.55; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: 'Sora','Plus Jakarta Sans',sans-serif; letter-spacing: 0; line-height: 1.22; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }
.navbar { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
html[data-theme="light"] .navbar, html[data-theme="off"] .navbar { background: color-mix(in srgb, var(--card) 94%, transparent); }
.nav-inner { max-width: 1200px; }
.brand-ksl { color: var(--gold); letter-spacing: 0; }
.brand-icon, .dbfl-crown-svg { background: linear-gradient(135deg, #00d2ff, #0084d6); box-shadow: 0 4px 16px rgba(0, 180, 248, .22); }
.nav-link, .bottom-tabbar a { transition: background-color .16s, color .16s; }
.nav-link:hover, .nav-link.active { color: var(--gold); background: var(--bg3); }
.page.active, .app-page, main:not(#app) { max-width: 1200px; }
.page-hero, .dep-page-hero { padding-block: 24px 20px; }
.page-hero h1, .dep-page-hero h1 { color: var(--t1); }
.page-hero p, .dep-page-hero p { color: var(--t2); }
:where(.card,.prod-card,.product-card,.app-tiles a,.dep-method-card,.wallet-card,.mkt-toolbar,.kls-card,.stat-card,.setting-card,.panel,.modal-box,.app-bal) {
  border-radius: 8px;
  border-color: var(--border);
  box-shadow: var(--sh2);
}
:where(.card,.prod-card,.product-card,.app-tiles a,.dep-method-card,.mkt-toolbar,.kls-card,.stat-card,.setting-card,.panel,.modal-box) { background-color: var(--card); }
:where(.card,.prod-card,.product-card,.app-tiles a,.dep-method-card,.mkt-toolbar,.kls-card,.stat-card,.setting-card,.panel) { transition: border-color .18s, box-shadow .18s, transform .18s; }
:where(.prod-card,.product-card,.app-tiles a,.dep-method-card):hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(0, 132, 214, .14); }
:where(button,.btn,.btn-primary,.btn-gold,.mkt-chip,.kls-btn) { font-family: inherit; letter-spacing: 0; }
:where(.btn-primary,.btn-gold,.kls-btn-primary,.prod-select-btn) { background: var(--gold); color: #fff; border-color: var(--gold); border-radius: 8px; font-weight: 700; }
:where(.btn-primary,.btn-gold,.kls-btn-primary,.prod-select-btn):hover { background: var(--gold2); border-color: var(--gold2); color: #fff; }
:where(.mkt-chip,.mkt-toolbar input,.mkt-toolbar select,.cat-dropdown-btn) { border-radius: 8px; }
:where(input,textarea,select,.input-field) { background: var(--bg3); color: var(--t1); border-color: var(--border2); border-radius: 8px; }
:where(input,textarea,select,.input-field):focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
:where(a,button,input,textarea,select,[role="button"]):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
:where(.sec-label,.dep-chip,.app-tile-ico) { color: var(--gold); }
:where(.bottom-tabbar,.site-footer) { border-color: var(--border); }
@media (max-width: 640px) {
  body { font-size: 14px; }
  .page.active, .app-page { padding-inline: 16px; }
  .page-hero, .dep-page-hero { padding-block: 18px 16px; }
  .mkt-toolbar { padding: 12px; }
  :where(input,textarea,select,.input-field) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.nav-link,.prod-card,.product-card,.app-tiles a,.dep-method-card,.card) { transition: none; }
}