/* ZizoCards reference: warm black glass, amber accents, restrained depth. */
:root {
  --bg: #0d0c09; --surface: #191711; --surface-2: #252117;
  --ink: #fdf6e8; --muted: #b7b09f; --accent: #ffc400;
  --accent-hover: #ffda55; --line: rgba(255,196,0,.14);
  --line-2: rgba(255,196,0,.24); --panel-glass: linear-gradient(135deg,rgba(37,32,21,.88),rgba(18,17,13,.94));
}
body { background: radial-gradient(ellipse at 95% 0%,rgba(255,196,0,.09),transparent 50%),radial-gradient(ellipse at 0% 100%,rgba(245,168,0,.05),transparent 45%),#0d0c09; }
.sidebar,.topbar,.admin-sidebar,.admin-topbar { background: rgba(18,16,11,.84); border-color: var(--line); backdrop-filter: blur(18px); }
.app,.admin-app,.content { background: transparent; }
.brand,.topbar-title,.admin-brand { color: var(--ink); }
.nav-label,.admin-nav > span { color: #94866a; }
.nav-link,.admin-nav a { color: #c2baa9; }
.nav-link.active,.admin-nav a.active { background: rgba(255,196,0,.1); border-color: rgba(255,196,0,.23); color: #ffe18a; box-shadow: inset 2px 0 #ffc400; }
.nav-link:hover,.admin-nav a:hover { background: rgba(255,196,0,.06); color: #fff1c4; }
.nav-link.active svg,.admin-nav a.active svg { color: #ffc400; }
.sidebar-foot,.admin-brand,.admin-user { border-color: var(--line); }
.side-balance,.balance,.profile-summary,.profile-pop,.admin-count { background: #201c13; border-color: var(--line); color: var(--ink); }
.profile-pop { box-shadow: 0 18px 55px #0009; }
.balance-icon,.balance-amt,.side-balance strong,.eyebrow,.crumbs a,.activity-title a,.card-price,.price,.admin-data-table .money { color: #ffd350; }
.balance-label,.user-line,.side-balance span { color: var(--muted); }
.avatar,.side-avatar,.admin-user > span { color: #181306; background: #eec44d; }
.glass-panel,.welcome,.dashboard-stats .stat,.quick-card,.activity-card,.product-list-wrap,.table-wrap,.toolbar,.buy-box,.product-img,.catalog-empty,.admin-data-table { background: var(--panel-glass); border: 1px solid var(--line); box-shadow: inset 0 1px rgba(255,245,210,.035),0 12px 32px rgba(0,0,0,.18); }
.welcome { min-height: 170px; }
.welcome-art { color: #ffc40070; }
.welcome-side { display: flex; align-items: center; gap: 18px; }
.tier-badge { display: flex; align-items: center; gap: 11px; min-width: 148px; padding: 11px 14px; border: 1px solid #ffc40030; border-radius: 14px; background: #0d0c09a8; box-shadow: inset 0 1px #fff1; }
.tier-badge > span,.tier-medal { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #9a8870; box-shadow: 0 0 0 5px #9a887018; }
.tier-badge div { display: grid; gap: 1px; }
.tier-badge small,.tier-badge em { color: var(--muted); font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.tier-badge strong { color: var(--ink); font-size: 15px; }
.tier-badge.tier-bronze > span,.tier-medal.tier-bronze,.admin-tier.tier-bronze::before { background: #c47b45; }.tier-badge.tier-silver > span,.tier-medal.tier-silver,.admin-tier.tier-silver::before { background: #c5cbd0; }.tier-badge.tier-gold > span,.tier-medal.tier-gold,.admin-tier.tier-gold::before { background: #ffc400; }.tier-badge.tier-platinum > span,.tier-medal.tier-platinum,.admin-tier.tier-platinum::before { background: #e4f2ff; }
.welcome h1,.stat-num,.quick-card b,.activity-title h2,.card-title { color: var(--ink); }
.welcome p,.stat-label,.stat-sub,.quick-card p,.quick-card i,.activity-row small,.activity-empty,.sub { color: var(--muted); }
.dashboard-stats .stat { --stat-color: #ffc400; border-radius: 16px; }
.dashboard-stats .stat::before { background: linear-gradient(90deg,#ffc40080,transparent); height: 1px; }
.dashboard-stats .stat:hover { background: var(--panel-glass); border-color: #ffc40040; }
.stat-icon,.stat-violet .stat-icon,.stat-green .stat-icon,.stat-cyan .stat-icon,.quick-icon,.quick-violet,.quick-green,.activity-mark { background: rgba(255,196,0,.09); color: #ffd350; border: 1px solid #ffc40017; }
.dashboard-stats .accent-value { color: #ffda67 !important; }
.tier-progress { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); align-items: center; gap: 30px; margin: 18px 0 32px; padding: 20px; border-color: #ffc4002d; }
.tier-progress-copy { display: flex; align-items: center; gap: 16px; }.tier-medal { width: 16px; height: 16px; box-shadow: 0 0 0 8px #ffc4000d; }
.tier-progress h2 { color: var(--ink); font-size: 16px; margin: 3px 0 4px; }.tier-progress p { color: var(--muted); font-size: 12px; margin: 0; }.tier-progress p strong { color: #ffda67; }
.tier-progress-label { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; margin-bottom: 8px; }.tier-progress-label strong { color: var(--ink); }
.tier-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #090806; border: 1px solid #ffc40018; }.tier-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d59100,#ffd94e); box-shadow: 0 0 16px #ffc4004a; }
.admin-tier { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }.admin-tier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9a8870; }
.tiers-hero { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 32px; overflow: hidden; position: relative; }
.tiers-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -150px; border: 1px solid #ffc40024; border-radius: 50%; box-shadow: 0 0 80px #ffc4000c; pointer-events: none; }
.tiers-hero-copy { max-width: 720px; }.tiers-hero h1 { color: var(--ink); font-size: clamp(28px,4vw,44px); margin: 5px 0 10px; }.tiers-hero-copy > p:last-child { color: var(--muted); max-width: 680px; }
.tiers-current { position: relative; z-index: 1; min-width: 210px; padding: 18px; display: flex; align-items: center; gap: 15px; border: 1px solid #ffc40035; border-radius: 16px; background: #0e0c08c9; }
.tiers-current-medal,.tier-card-medal { width: 18px; height: 18px; border-radius: 50%; background: #9a8870; box-shadow: 0 0 0 8px #9a887018; flex: none; }.tiers-current div { display: grid; gap: 2px; }.tiers-current small,.tiers-current em { color: var(--muted); font-size: 11px; font-style: normal; }.tiers-current strong { color: var(--ink); font-size: 19px; }
.tiers-status { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 36px; margin: 18px 0 38px; padding: 20px 24px; }.tiers-status-main { display: grid; }.tiers-status-main span { color: var(--muted); font-size: 12px; }.tiers-status-main strong { color: #ffda67; font-size: 26px; }.tiers-status-progress { min-width: 0; }
.tiers-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }.tiers-heading h2 { color: var(--ink); font-size: 21px; margin-top: 3px; }.tiers-heading > span { color: var(--muted); font-size: 12px; }
.tiers-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }.tier-card { position: relative; padding: 20px; min-height: 245px; overflow: hidden; }.tier-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -60px; top: -65px; border: 1px solid #ffffff0c; border-radius: 50%; }.tier-card.is-current { border-color: #ffc40074; box-shadow: inset 0 1px #fff1,0 0 0 1px #ffc40018,0 16px 40px #0004; }.tier-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }.tier-card-top b { color: #bdb29d; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.tier-card h3 { color: var(--ink); font-size: 18px; }.tier-discount { display: block; color: #ffda67; font-size: 38px; line-height: 1.1; margin-top: 8px; }.tier-discount-caption { color: var(--muted); font-size: 11px; }.tier-rule { position: absolute; left: 20px; right: 20px; bottom: 18px; padding-top: 12px; display: grid; border-top: 1px solid #ffffff0c; }.tier-rule span { color: var(--muted); font-size: 10px; }.tier-rule strong { color: var(--ink); font-size: 13px; }
.tier-card.tier-bronze .tier-card-medal,.tiers-current.tier-bronze .tiers-current-medal { background:#c47b45 }.tier-card.tier-silver .tier-card-medal,.tiers-current.tier-silver .tiers-current-medal { background:#c5cbd0 }.tier-card.tier-gold .tier-card-medal,.tiers-current.tier-gold .tiers-current-medal { background:#ffc400 }.tier-card.tier-platinum .tier-card-medal,.tiers-current.tier-platinum .tiers-current-medal { background:#e4f2ff }
.tiers-explainer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 24px; }.tiers-explainer article { display: flex; gap: 15px; padding: 20px; }.tiers-explainer article > span { color: #ffd350; font: 700 12px var(--mono); }.tiers-explainer h3 { color: var(--ink); font-size: 14px; margin-bottom: 5px; }.tiers-explainer p { color: var(--muted); font-size: 12px; }
.quick-card:hover { background: linear-gradient(135deg,#302719,#1c1912); border-color: #ffc40055; }
.activity-row,.profile-pop-head,.profile-pop-bal { border-color: rgba(255,230,170,.09); }
.card { background: var(--panel-glass); border-color: transparent; box-shadow: 0 8px 22px #0002; }
.card:hover { background: #272217; border-color: #88847b; }
.card::before { background: transparent; }
.card-meta { background: #0e0d0970; border-color: #ffffff08; color: #aaa28f; }
.card-meta b { color: #eee1c4; }
.table th,.product-list-table th,.admin-data-table th { background: #282216; color: #c6b991; border-color: var(--line); }
.table td,.product-list-table td,.admin-data-table td { border-color: #ffffff0b; color: var(--ink); }
.table tbody tr:hover,.product-list-table tbody tr:hover,.admin-data-table tbody tr:hover { background: #ffc40007; }
.field input,.field select,.table-input,.toolbar input,.toolbar select,.qty-placeholder { background: #100f0b; border-color: #54472a; color: var(--ink); }
.field input:focus,.field select:focus,.table-input:focus { border-color: var(--accent); }
.btn-primary { background: linear-gradient(145deg,#ffda54,#ffc400); border-color: #ffdc58; color: #211700; box-shadow: inset 0 1px #fff7,0 6px 20px #ffc40012; }
.btn-primary:hover { background: #ffda55; border-color: #ffe389; color: #211700; }
.btn-secondary,.btn-ghost,.admin-back { background: #201c13; color: #ead8a4; border-color: #61502c; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.admin-brand small { color: #ffd350; border-color: #806729; }
a:focus-visible,button:focus-visible,input:focus-visible { outline: 2px solid #ffd350; outline-offset: 3px; }
.purchase-qty { width: 80px; padding: 9px; border: 1px solid #5f5132; border-radius: 8px; background: #100f0b; color: var(--ink); }
.purchase-note { color: var(--muted); font-size: 12px; margin-top: 7px; }
@media(max-width:900px) { .tier-progress { grid-template-columns: 1fr; gap: 18px; }.tier-badge { display: none; } }
@media(max-width:1100px) { .tiers-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.tiers-explainer { grid-template-columns: 1fr; } }
@media(max-width:760px) { .tiers-hero { align-items: flex-start; padding: 23px; }.tiers-current { min-width: 150px; }.tiers-status { grid-template-columns: 1fr; gap: 16px; }.tiers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.tiers-heading > span { display: none; } }
@media(max-width:640px) { .welcome { padding: 22px; min-height: 145px; }.welcome-side { margin-left: auto; }.welcome-art { width: 75px; flex-shrink: 0; }.welcome h1 { font-size: 23px; }.dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-stats .stat { padding: 16px; flex-direction: column; }.stat-num { font-size: 24px; }.tier-progress { margin-top: 14px; padding: 17px; }.tier-progress-copy { align-items: flex-start; }.tier-progress h2 { font-size: 15px; } }
@media(max-width:640px) { .sidebar { width: 100%; flex-basis: auto; }.nav-links { width: 100%; }.dashboard-stats .stat { min-height: 160px; gap: 10px; }.dashboard-stats .stat-label { font-size: 10px; }.dashboard-stats .stat-sub { font-size: 11px; } }
@media(max-width:520px) { .tiers-hero { display: grid; }.tiers-current { width: 100%; }.tiers-grid { grid-template-columns: 1fr; }.tier-card { min-height: 220px; }.tiers-status-main strong { font-size: 23px; } }

/* Soft workspace pass: quiet contrast, rounded surfaces and anchored navigation. */
:root {
  --bg: #11130f;
  --surface: #181b16;
  --surface-2: #20241d;
  --surface-3: #282d24;
  --ink: #f1f0e9;
  --muted: #a6aa9e;
  --accent: #d8bd7a;
  --accent-hover: #e5cd91;
  --accent-soft: rgba(216,189,122,.1);
  --line: rgba(235,232,214,.075);
  --line-2: rgba(235,232,214,.12);
  --panel-glass: linear-gradient(145deg,rgba(29,32,26,.96),rgba(23,26,21,.96));
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
}
body {
  background: radial-gradient(900px 520px at 80% -10%,rgba(180,163,112,.07),transparent 68%),#11130f;
  color: var(--ink);
  font-size: 14px;
}
h1,h2,h3,.brand,.topbar-title { letter-spacing: -.025em; }
h1 { font-size: clamp(26px,3vw,34px); font-weight: 700; }
h2 { font-weight: 700; }
.app { display: block; min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 246px;
  height: 100vh;
  background: rgba(18,21,17,.96);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px);
}
.sidebar-brand { height: 72px; padding: 0 24px; border-bottom-color: transparent; }
.brand { gap: 11px; font-size: 19px; font-weight: 700; }
.brand img { width: 32px; height: 32px; }
.nav-links { padding: 16px 13px 18px; gap: 5px; }
.nav-label { padding: 7px 13px 5px; color: #777d70; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.nav-label-account { margin-top: 13px; }
.nav-link {
  min-height: 44px;
  padding: 10px 13px;
  border: 0;
  border-radius: 14px;
  color: #aeb2a7;
  font-weight: 550;
  transition: background .16s ease,color .16s ease;
}
.nav-link svg { color: #858b80; }
.nav-link:hover { background: rgba(255,255,255,.035); color: #e8e7df; }
.nav-link.active {
  border: 0;
  background: rgba(216,189,122,.105);
  color: #eee5ce;
  box-shadow: none;
}
.nav-link.active svg { color: #d8bd7a; }
.sidebar-foot { padding: 14px 16px 18px; border-top-color: var(--line); }
.side-balance { padding: 12px 13px; border: 0; border-radius: 14px; background: rgba(255,255,255,.035); }
.side-balance strong { color: #dcc487; }
.user-line { margin-top: 8px; padding: 10px 7px; }
.side-avatar,.avatar { background: #d8bd7a; color: #1a1811; }
.panel-main { width: calc(100% - 246px); min-height: 100vh; margin-left: 246px; }
.topbar {
  position: fixed;
  inset: 0 0 auto 246px;
  z-index: 35;
  height: 72px;
  padding: 0 32px;
  background: rgba(17,19,15,.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(110%);
}
.topbar-title { font-size: 19px; font-weight: 650; }
.balance,.profile-summary { border: 0; border-radius: 15px; background: rgba(255,255,255,.045); box-shadow: none; }
.balance { padding: 6px 12px 6px 7px; }
.balance-icon { border-radius: 11px; background: rgba(216,189,122,.13); color: #d8bd7a; }
.balance-label { color: #858a80; font-weight: 600; }
.balance-amt { color: #eee8d7; font-weight: 700; }
.profile-pop { border: 1px solid var(--line-2); border-radius: 18px; background: #20231d; box-shadow: 0 24px 60px rgba(0,0,0,.38); }
.content { max-width: 1460px; padding: 108px 42px 78px; }
.eyebrow { color: #bda76f; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.page-head { margin-bottom: 28px; }.page-head .sub,.section-heading p { color: var(--muted); }
.glass-panel,.welcome,.dashboard-stats .stat,.quick-card,.activity-card,.product-list-wrap,.table-wrap,.toolbar,.buy-box,.product-img,.catalog-empty {
  background: var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: none;
}
.welcome { min-height: 154px; margin: 0 0 20px; padding: 27px 30px; }
.welcome h1 { margin: 4px 0 5px; font-size: clamp(25px,3vw,32px); font-weight: 700; }
.welcome p { max-width: 620px; color: var(--muted); font-size: 13px; }
.welcome-art { width: 145px; color: rgba(216,189,122,.25); }
.tier-badge { border: 0; border-radius: 16px; background: rgba(255,255,255,.035); box-shadow: none; }
.dashboard-stats { gap: 12px; }
.dashboard-stats .stat { min-height: 116px; padding: 18px; gap: 12px; overflow: visible; }
.dashboard-stats .stat::before { display: none; }
.dashboard-stats .stat:hover { border-color: var(--line-2); background: var(--panel-glass); }
.stat-icon,.stat-violet .stat-icon,.stat-green .stat-icon,.stat-cyan .stat-icon,.quick-icon,.quick-violet,.quick-green,.activity-mark {
  width: 36px; height: 36px; border: 0; border-radius: 12px; background: rgba(216,189,122,.09); color: #d8bd7a;
}
.dashboard-stats .stat-label { color: #94998f; font-size: 9.5px; font-weight: 650; letter-spacing: .07em; }
.dashboard-stats .stat-num { margin-top: 7px; color: #f0efe7; font-size: 25px; font-weight: 700; }
.dashboard-stats .accent-value,.positive { color: #d8bd7a !important; }
.stat-sub { color: #81867d; font-size: 11px; }
.tier-progress { margin: 16px 0 32px; padding: 18px 21px; border-color: var(--line); border-radius: 20px; }
.tier-progress-track { height: 6px; border: 0; background: rgba(255,255,255,.055); }
.tier-progress-track i { background: #c7ad6c; box-shadow: none; }
.tier-progress p strong,.tiers-status-main strong,.tier-discount { color: #d8bd7a; }
.quick-section { margin-top: 28px; }.section-heading { margin-bottom: 14px; }
.section-heading h2 { font-size: 16px; }.section-heading p { font-size: 12px; }
.quick-grid { gap: 12px; }.quick-card { min-height: 142px; padding: 18px; }
.quick-card:hover { transform: translateY(-1px); border-color: var(--line-2); background: linear-gradient(145deg,#22261f,#1b1e19); }
.quick-card b { font-size: 14px; font-weight: 650; }.quick-card p { min-height: 36px; color: #979c92; }.quick-card i { color: #b8a66f; font-weight: 600; }
.activity-grid { gap: 12px; margin-top: 22px; }.activity-card { overflow: hidden; }
.activity-title { padding: 18px 20px 13px; }.activity-title h2 { font-size: 15px; }.activity-title a { color: #b8a66f; font-weight: 600; }
.activity-row { min-height: 62px; padding: 11px 20px; border-color: var(--line); }.activity-row b { font-weight: 600; }.activity-row small { color: #858b80; }
.activity-mark { width: 32px; height: 32px; }.activity-row strong { color: #d39b86; }.payment-mark { background: rgba(114,167,132,.1); color: #94bca0; }
.btn { min-height: 40px; border: 0; border-radius: 13px; background: rgba(255,255,255,.055); font-weight: 600; }
.btn:hover { border: 0; background: rgba(255,255,255,.085); }
.btn-primary { background: #d8bd7a; color: #1d1a12; box-shadow: none; }
.btn-primary:hover { background: #e3cc94; color: #1d1a12; }
.field input,.field select,.table-input,.toolbar input,.toolbar select,.qty-placeholder,.purchase-qty { border: 1px solid var(--line-2); border-radius: 13px; background: #141611; }
.field input:focus,.field select:focus,.table-input:focus,.purchase-qty:focus { border-color: rgba(216,189,122,.55); box-shadow: 0 0 0 3px rgba(216,189,122,.07); outline: 0; }
.cards { gap: 14px; }
.card { padding: 8px; border-radius: 20px; background: #1b1e19; box-shadow: 0 12px 30px rgba(0,0,0,.11); }
.card:hover { transform: translateY(-1px); border-color: rgba(190,194,184,.28); background: #20231d; }
.card-image { border-radius: 14px; }.card-body { padding: 13px 8px 3px; }.card-title { color: #eeede6; font-weight: 650; }
.card-meta { border: 0; border-radius: 12px; background: rgba(255,255,255,.035); color: #979c92; }.card-meta b { color: #dbdcd5; }
.product-list-wrap,.table-wrap { overflow: hidden; }.product-list-table th,.table th { background: rgba(255,255,255,.025); color: #999e94; border-color: var(--line); }
.product-list-table td,.table td { border-color: var(--line); }.product-list-table tbody tr:hover,.table tbody tr:hover { background: rgba(255,255,255,.018); }
.stock-yes { color: #9fc7a8; }.stock-pending { color: #a2a69e; }
.tiers-hero { padding: 30px; }.tiers-hero::after { border-color: rgba(216,189,122,.1); box-shadow: none; }.tiers-hero h1 { font-size: clamp(27px,3.5vw,38px); font-weight: 700; }
.tiers-current { border: 0; border-radius: 18px; background: rgba(255,255,255,.035); }
.tiers-status { border-radius: 20px; }.tiers-grid { gap: 12px; }.tier-card { min-height: 238px; padding: 20px; border-radius: 20px; }
.tier-card.is-current { border-color: rgba(216,189,122,.34); box-shadow: 0 14px 35px rgba(0,0,0,.13); }.tier-discount { font-size: 34px; }.tier-card-top b { font-weight: 600; }
.tier-discount-caption { background: transparent !important; color: var(--muted); }
.tiers-explainer article { border-radius: 20px; }.tiers-explainer article > span { color: #bda76f; }
a:focus-visible,button:focus-visible,input:focus-visible { outline-color: #d8bd7a; }

@media(max-width:920px) and (min-width:641px) {
  .content { padding: 100px 24px 58px; }
  .topbar { padding: 0 23px; }
}
@media(max-width:640px) {
  .app { display: flex; }
  .sidebar { position: relative; inset: auto; width: 100%; height: auto; background: #151813; backdrop-filter: none; }
  .panel-main { width: 100%; margin-left: 0; }
  .topbar { position: sticky; inset: 0 auto auto; height: 60px; padding: 0 16px; background: rgba(17,19,15,.94); }
  .content { padding: 24px 16px 48px; }
  .nav-links { padding: 6px 12px 12px; gap: 4px; }
  .nav-link { min-height: 40px; border-radius: 12px; }
  .welcome { padding: 22px; }
  .dashboard-stats .stat { min-height: 138px; }
  .quick-card { min-height: 132px; }
}

/* Black-blue workspace: layered navy cards over a quiet technical grid. */
:root {
  --bg: #06080e;
  --surface: #0c121d;
  --surface-2: #111a29;
  --surface-3: #162238;
  --ink: #eef5ff;
  --muted: #8c9bb2;
  --accent: #4f8cff;
  --accent-hover: #73a5ff;
  --accent-soft: rgba(79,140,255,.12);
  --line: rgba(112,153,218,.12);
  --line-2: rgba(125,169,238,.2);
  --panel-glass: linear-gradient(145deg,rgba(17,27,44,.96),rgba(9,14,24,.97));
}
body { background: #06080e; color: var(--ink); }
.app { position: relative; isolation: isolate; background: radial-gradient(900px 580px at 88% -8%,rgba(43,92,178,.16),transparent 65%),radial-gradient(720px 520px at 16% 105%,rgba(19,92,141,.1),transparent 66%),#06080e; }
.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(104,145,208,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(104,145,208,.045) 1px,transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.28) 72%,transparent);
}
.panel-main { position: relative; z-index: 1; }
.sidebar { background: rgba(5,9,16,.94); border-right-color: rgba(112,153,218,.11); }
.topbar { background: rgba(6,9,15,.82); border-bottom-color: rgba(112,153,218,.1); }
.brand,.topbar-title { color: #f2f7ff; }
.nav-label { color: #53647d; }
.nav-link { color: #8f9eb4; }.nav-link svg { color: #64758e; }
.nav-link:hover { background: rgba(79,140,255,.07); color: #dce9fb; }
.nav-link.active { background: linear-gradient(90deg,rgba(55,111,212,.19),rgba(55,111,212,.08)); color: #f0f6ff; box-shadow: inset 2px 0 #4f8cff; }
.nav-link.active svg { color: #70a3ff; }
.side-balance,.balance,.profile-summary { background: rgba(18,30,49,.72); border: 1px solid rgba(112,153,218,.1); }
.side-balance strong,.balance-amt { color: #8db5ff; }.balance-icon { background: rgba(79,140,255,.14); color: #78a8ff; }
.side-avatar,.avatar { background: linear-gradient(145deg,#6ea2ff,#3f74d8); color: #07101e; }
.profile-pop { background: #0f1827; border-color: rgba(125,169,238,.18); }
.eyebrow,.crumbs a,.activity-title a,.quick-card i { color: #75a6ff; }
.glass-panel,.welcome,.product-list-wrap,.table-wrap,.toolbar,.buy-box,.product-img,.catalog-empty {
  background: var(--panel-glass);
  border-color: rgba(112,153,218,.12);
  box-shadow: inset 0 1px rgba(214,230,255,.035),0 20px 55px rgba(0,0,0,.18);
}
.welcome { background: radial-gradient(460px 210px at 86% 25%,rgba(65,121,220,.16),transparent 70%),linear-gradient(140deg,#111c2e,#0a101b 64%); }
.welcome-art { color: rgba(100,156,255,.35); }.welcome p,.stat-label,.stat-sub,.quick-card p,.activity-row small,.sub { color: var(--muted); }
.tier-badge { background: rgba(10,19,33,.7); border: 1px solid rgba(112,153,218,.11); }
.dashboard-stats .stat { border-color: rgba(112,153,218,.11); box-shadow: inset 0 1px rgba(220,234,255,.025),0 14px 35px rgba(0,0,0,.15); }
.dashboard-stats .stat-blue { background: linear-gradient(145deg,#132744,#0b1422); }
.dashboard-stats .stat-violet { background: linear-gradient(145deg,#1a2143,#0d1428); }
.dashboard-stats .stat-green { background: linear-gradient(145deg,#10303d,#0a1722); }
.dashboard-stats .stat-cyan { background: linear-gradient(145deg,#102a43,#091522); }
.dashboard-stats .stat:hover { border-color: rgba(125,169,238,.24); }
.stat-blue .stat-icon { background: rgba(79,140,255,.15); color:#78a8ff; }.stat-violet .stat-icon { background:rgba(119,105,255,.15);color:#a79bff; }.stat-green .stat-icon { background:rgba(50,183,196,.14);color:#70d6df; }.stat-cyan .stat-icon { background:rgba(43,155,224,.14);color:#70c5f6; }
.dashboard-stats .accent-value,.positive { color: #7eabff !important; }
.tier-progress { background: linear-gradient(110deg,rgba(18,32,54,.96),rgba(9,16,28,.97)); }.tier-progress-track { background:rgba(86,118,169,.16); }.tier-progress-track i { background:linear-gradient(90deg,#316bd2,#68a1ff); }
.tier-progress p strong,.tiers-status-main strong,.tier-discount { color:#75a6ff; }
.quick-card { border-color:rgba(112,153,218,.11); }
.quick-card:nth-child(1) { background:linear-gradient(145deg,#112540,#0a1422); }.quick-card:nth-child(2) { background:linear-gradient(145deg,#191f3d,#0d1426); }.quick-card:nth-child(3) { background:linear-gradient(145deg,#0d2b38,#091720); }
.quick-card:nth-child(1) .quick-icon { background:rgba(79,140,255,.15);color:#76a7ff; }.quick-card:nth-child(2) .quick-icon { background:rgba(121,108,255,.14);color:#a89dff; }.quick-card:nth-child(3) .quick-icon { background:rgba(48,181,197,.13);color:#73d3dd; }
.quick-card:hover { background-position:100% 100%; border-color:rgba(129,173,241,.25); }
.activity-card:first-child { background:linear-gradient(145deg,#111c30,#0a111d); }.activity-card:last-child { background:linear-gradient(145deg,#0d2632,#09141d); }
.activity-row,.profile-pop-head,.profile-pop-bal { border-color:rgba(112,153,218,.1); }.activity-mark { background:rgba(79,140,255,.13);color:#78a8ff; }.payment-mark { background:rgba(51,183,196,.12);color:#73d1da; }
.btn-primary { background:linear-gradient(135deg,#5a98ff,#3978e7);color:#f7fbff;box-shadow:0 10px 28px rgba(42,105,218,.2); }.btn-primary:hover { background:linear-gradient(135deg,#70a7ff,#4a88f2);color:#fff; }
.btn,.btn-secondary,.btn-ghost { background:rgba(34,51,77,.62);color:#d5e2f4; }.btn:hover { background:rgba(47,69,103,.72); }
.field input,.field select,.table-input,.toolbar input,.toolbar select,.qty-placeholder,.purchase-qty { background:#080d16;border-color:rgba(112,153,218,.16);color:#eaf3ff; }
.field input:focus,.field select:focus,.table-input:focus,.purchase-qty:focus { border-color:rgba(79,140,255,.65);box-shadow:0 0 0 3px rgba(79,140,255,.09); }
.card { border-color:color-mix(in srgb,var(--card-edge) 18%,transparent); background:linear-gradient(150deg,color-mix(in srgb,var(--card-edge) 13%,#101827),#0a101a 58%); box-shadow:0 16px 38px rgba(0,0,0,.19); }
.card::after { content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(240px 120px at 86% 0%,color-mix(in srgb,var(--card-edge) 13%,transparent),transparent 72%); }
.card:hover { background:linear-gradient(150deg,color-mix(in srgb,var(--card-edge) 19%,#132037),#0d1522 62%);border-color:color-mix(in srgb,var(--card-edge) 38%,#617594); }
.card-image { position:relative;display:block;background:radial-gradient(circle at 50% 35%,#192b48,#070b12 72%); }.card-img { position:absolute;left:50%;top:50%;box-sizing:border-box;width:56%;height:56%;max-width:150px;max-height:82px;object-fit:contain;padding:0;transform:translate(-50%,-50%); }.card-meta { background:rgba(3,8,15,.48);border:1px solid rgba(112,153,218,.09);color:#8091a9; }.card-meta b { color:#d4e3f7; }
.product-list-wrap,.table-wrap { background:linear-gradient(145deg,#0f1929,#080e18); }.product-list-table th,.table th { background:rgba(36,57,88,.45);color:#91a5c2;border-color:rgba(112,153,218,.12); }.product-list-table td,.table td { border-color:rgba(112,153,218,.085); }.product-list-table tbody tr:hover,.table tbody tr:hover { background:rgba(65,111,181,.055); }
.stock-yes { color:#6bd2dc; }.stock-pending { color:#8392a7; }
.tiers-hero { background:radial-gradient(470px 240px at 90% 15%,rgba(62,115,213,.17),transparent 70%),linear-gradient(145deg,#121e32,#09101b); }.tiers-current { background:rgba(13,25,43,.72);border:1px solid rgba(112,153,218,.12); }.tiers-status { background:linear-gradient(125deg,#101d31,#09111d); }
.tier-card { border-color:rgba(112,153,218,.12); }
.tier-card.tier-start { background:linear-gradient(150deg,#131b29,#0a1019); }.tier-card.tier-bronze { background:linear-gradient(150deg,#17233b,#0b1221); }.tier-card.tier-silver { background:linear-gradient(150deg,#182b48,#0b1424); }.tier-card.tier-gold { background:linear-gradient(150deg,#113146,#091824); }.tier-card.tier-platinum { background:linear-gradient(150deg,#1d2b51,#0c1428); }
.tier-card.is-current { border-color:rgba(96,151,246,.42);box-shadow:0 18px 45px rgba(0,0,0,.2),inset 0 1px rgba(220,234,255,.05); }.tier-rule { border-color:rgba(112,153,218,.1); }
.tiers-explainer article:nth-child(1) { background:linear-gradient(145deg,#121f35,#0a111d); }.tiers-explainer article:nth-child(2) { background:linear-gradient(145deg,#171d3a,#0b1223); }.tiers-explainer article:nth-child(3) { background:linear-gradient(145deg,#0e2936,#09151e); }.tiers-explainer article>span { color:#72a3ff; }
.tier-discount-caption { background:transparent!important;color:#8192aa; }
a:focus-visible,button:focus-visible,input:focus-visible { outline-color:#5b94fa; }
@supports not (background:color-mix(in srgb,#fff 10%,#000)) { .card { background:linear-gradient(150deg,#14233a,#0a101a);border-color:#233958; }.card:hover { background:#14243a;border-color:#486891; } }
@media(max-width:920px) and (min-width:641px) {
  .sidebar { width:214px; }
  .panel-main { width:calc(100% - 214px);margin-left:214px; }
  .topbar { left:214px; }
  .tier-badge { display:flex;min-width:132px;padding:9px 11px; }
}
@media(max-width:640px) {
  .app { display:flex;flex-direction:column; }
  .app::before { background-size:28px 28px;opacity:.72; }
  .sidebar { background:#070b12; }
  .nav-links { flex-direction:row;overflow-x:auto;scrollbar-width:none; }
  .nav-links::-webkit-scrollbar { display:none; }
  .topbar { background:rgba(6,9,15,.94); }
  .tier-badge { display:none; }
  .table-wrap,.product-list-wrap { overflow-x:auto; }
}
@media(max-width:480px) { .cards { grid-template-columns:1fr; } }

/* Product management in the separate administration workspace. */
.admin-app { background:#0a0d13;color:#eaf1fb; }
.admin-sidebar,.admin-topbar { background:#10151e;border-color:#202c3d; }
.admin-brand small { border-color:#335f9e;color:#7daeff; }
.admin-nav a.active { background:#152238;border-color:#29456d;box-shadow:inset 3px 0 #4f8cff; }
.admin-content { max-width:1580px; }
.admin-product-filter { display:grid;grid-template-columns:minmax(260px,1fr) 220px auto auto;align-items:end;gap:10px;margin-bottom:18px;padding:15px;border:1px solid #202d40;border-radius:16px;background:#101722; }
.admin-product-filter label,.admin-product-fields label { display:grid;gap:6px;min-width:0; }
.admin-product-filter label>span,.admin-product-fields label>span:first-child { color:#8fa0b8;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; }
.admin-product-filter input,.admin-product-filter select,.admin-product-fields input { width:100%;height:42px;padding:0 12px;border:1px solid #27364b;border-radius:11px;background:#090e16;color:#edf4ff;font:inherit; }
.admin-product-filter input:focus,.admin-product-filter select:focus,.admin-product-fields input:focus { border-color:#4f8cff;outline:0;box-shadow:0 0 0 3px rgba(79,140,255,.1); }
.admin-alert { margin-bottom:14px;padding:11px 14px;border:1px solid;border-radius:12px;font-size:13px; }.admin-alert-error { border-color:rgba(239,113,128,.3);background:rgba(239,113,128,.08);color:#f29aa5; }.admin-alert-ok { border-color:rgba(70,201,154,.28);background:rgba(70,201,154,.08);color:#79dab5; }
.admin-product-list { display:grid;gap:11px; }.admin-product-card { overflow:hidden;border:1px solid #202d40;border-radius:17px;background:linear-gradient(145deg,#111a28,#0c121c); }.admin-product-card.is-disabled { opacity:.72; }
.admin-product-summary { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #1d2939; }.admin-product-summary>div { min-width:0; }.admin-product-summary strong,.admin-product-summary small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.admin-product-summary strong { color:#eff5ff;font-size:14px; }.admin-product-summary small { margin-top:3px;color:#7f90a8;font-size:11px; }.admin-product-id { display:grid;min-width:46px;height:30px;place-items:center;border-radius:9px;background:#17243a;color:#77a7fb;font:700 11px var(--mono); }
.admin-product-fields { display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(150px,.7fr) minmax(130px,.55fr) minmax(170px,.75fr) auto;align-items:end;gap:12px;padding:15px 16px 17px; }.admin-product-fields label>small { overflow:hidden;color:#65758c;font-size:10px;text-overflow:ellipsis;white-space:nowrap; }.admin-product-visible .switch-label { display:flex;align-items:center;gap:8px;height:42px;padding:0 11px;border:1px solid #27364b;border-radius:11px;background:#090e16; }.admin-product-visible input { width:15px;height:15px;accent-color:#4f8cff; }.admin-product-visible b { color:#c9d5e6;font-size:12px;font-weight:600; }
.admin-product-empty { border:1px solid #202d40;border-radius:16px;background:#101722; }.admin-pagination { display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px; }.admin-pagination span { color:#8fa0b8;font-size:12px; }.admin-pagination .btn:disabled { opacity:.35; }
@media(max-width:1120px) { .admin-product-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-product-fields>.btn { min-height:42px; }.admin-product-filter { grid-template-columns:minmax(220px,1fr) 190px auto auto; } }
@media(max-width:700px) { .admin-product-filter { grid-template-columns:1fr 1fr; }.admin-product-summary { grid-template-columns:auto minmax(0,1fr); }.admin-product-summary>.admin-badge { grid-column:2;justify-self:start; }.admin-product-fields { grid-template-columns:1fr; }.admin-product-fields>.btn { width:100%; }.admin-product-card { border-radius:15px; } }

/* Compact product rows: keep the full table width while fitting more items on screen. */
.product-list-table th { padding:11px 20px; }
.product-list-table td { padding:9px 20px; font-size:13px; line-height:1.25; }
.product-list-table td strong { font-size:13px; }
.product-list-table .purchase-qty { width:80px; height:34px; padding:5px 9px; border-radius:10px; }
.product-list-table .btn { min-height:34px; padding:6px 14px; border-radius:10px; }
.product-list-table .purchase-note { margin:3px 0 0; font-size:10px; line-height:1.2; }

/* Slightly stronger card hierarchy on the customer dashboard and tier page. */
.quick-card>b { font-size:15px; }
.activity-title h2 { font-size:16px; }
.tier-card h3 { font-size:17px; }
.tiers-explainer h3 { font-size:15px; }
.card-img[src*="/brands/minecraft.svg"],
.card-img[src*="/brands/nintendo.svg"] {
  width:67%;height:67%;max-width:180px;max-height:98px;
}