/* BR MODS workspace — shared components for admin, reseller and public pages.
   Motion is limited to short transform/opacity transitions. No ambient loops. */
html:root {
    --sidebar-width: 224px;
    --topbar-height: 60px;
    --bg-dark: #10141c;
    --bg-deep: #10141c;
    --bg-surface: #171d28;
    --bg-card: #171d28;
    --bg-card-hover: #1c2431;
    --bg-input: #111722;
    --border-color: #2a3342;
    --border-highlight: #435066;
    --text-main: #edf2fa;
    --text-title: #edf2fa;
    --text-body: #ced7e5;
    --text-muted: #a0aec2;
    --text-dim: #8898b0;
    --lm-text: #edf2fa;
    --lm-muted: #a0aec2;
    --lm-dim: #8898b0;
    --lm-ink: 237, 242, 250;
    --lm-surface: 23, 29, 40;
    --lm-surface-solid: #171d28;
    --lm-well: 4, 9, 17;
    --lm-well-k: .7;
    --lm-shadow: 0, 0, 0;
    --lm-shadow-k: .22;
    --card-glass: #171d28;
    --card-border: #2a3342;
    --success: #6ed7ae;
    --warning: #efc26e;
    --danger: #ff8e9d;
    --gold: #efc26e;
    --lm-success-ink: #6ed7ae;
    --lm-warning-ink: #efc26e;
    --lm-danger-ink: #ff8e9d;
    --lm-gold-ink: #efc26e;
    --lm-violet-ink: #bda7f7;
    --lm-silver-ink: #a0aec2;
    --card-shadow: 0 2px 5px #0000000a;
    --btn-3d-shadow: none;
    --glass-blur: none;
    --border-radius: 16px;
    --border-radius-sm: 9px;
    --chart-gap: #171d28;
    --chart-tip-bg: #202938;
    --chart-tip-title: #edf2fa;
    --chart-tip-body: #a0aec2;
    --chart-tip-border: #435066;
    --ease-ui: cubic-bezier(.2,.7,.2,1);
    --focus-ring: 0 0 0 3px rgba(var(--primary-rgb),.24);
    color-scheme: dark;
}
html[data-mode="light"] {
    --bg-dark: #f4f6fa; --bg-deep: #f4f6fa;
    --bg-surface: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f8fafc;
    --bg-input: #f5f7fb; --border-color: #dde3ec; --border-highlight: #b5c2d3;
    --text-main: #1d293d; --text-title: #1d293d; --text-body: #35465e;
    --text-muted: #52657f; --text-dim: #63738a;
    --lm-text: #1d293d; --lm-muted: #52657f; --lm-dim: #63738a;
    --lm-ink: 29, 41, 61; --lm-surface: 255, 255, 255;
    --lm-surface-solid: #ffffff; --lm-well: 71, 92, 125; --lm-well-k: .18;
    --lm-shadow: 35, 51, 78; --lm-shadow-k: .1;
    --card-glass: #fff; --card-border: #dde3ec;
    --success: #147c58; --warning: #99600d; --danger: #c63852; --gold: #99600d;
    --lm-success-ink: #147c58; --lm-warning-ink: #99600d;
    --lm-danger-ink: #c63852; --lm-gold-ink: #99600d; --lm-violet-ink: #7550bb;
    --chart-gap: #ffffff; --chart-tip-bg: #ffffff; --chart-tip-title: #1d293d;
    --chart-tip-body: #52657f; --chart-tip-border: #dde3ec;
    --card-shadow: 0 2px 5px #25334e05;
    --glass-blur: none; --btn-3d-shadow: none;
    color-scheme: light;
}
html[data-theme="cyan"] { --primary: #70d9c4; --primary-rgb: 112,217,196; --accent: #91aafb; --accent-rgb: 145,170,251; }
html[data-theme="purple"] { --primary: #bea7f6; --primary-rgb: 190,167,246; --accent: #d7a6d1; --accent-rgb: 215,166,209; }
html[data-theme="emerald"] { --primary: #80d4aa; --primary-rgb: 128,212,170; --accent: #82bbef; --accent-rgb: 130,187,239; }
html[data-theme="gold"] { --primary: #e9c580; --primary-rgb: 233,197,128; --accent: #efa98e; --accent-rgb: 239,169,142; }
html[data-mode="light"][data-theme="cyan"] { --primary: #107d71; --primary-rgb: 16,125,113; --accent: #4e63c9; --accent-rgb: 78,99,201; }
html[data-mode="light"][data-theme="purple"] { --primary: #7550bb; --primary-rgb: 117,80,187; --accent: #a1418e; --accent-rgb: 161,65,142; }
html[data-mode="light"][data-theme="emerald"] { --primary: #237c53; --primary-rgb: 35,124,83; --accent: #286eaf; --accent-rgb: 40,110,175; }
html[data-mode="light"][data-theme="gold"] { --primary: #93610c; --primary-rgb: 147,97,12; --accent: #a95030; --accent-rgb: 169,80,48; }
html[data-theme] {
    --lm-primary-ink: var(--primary); --lm-accent-ink: var(--accent);
    --primary-dim: rgba(var(--primary-rgb),.1);
    --primary-glow: transparent; --accent-glow: transparent;
    --success-glow: transparent; --warning-glow: transparent;
    --danger-glow: transparent; --gold-glow: transparent;
    --neon-cyan: var(--primary); --neon-purple: var(--accent);
}
html body { background: var(--bg-dark) !important; color: var(--text-main); font-family: 'Outfit',system-ui,sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-padding-top: 100px; }
html body *, html body *::before, html body *::after {
    /* Inherited legacy transition:all made a mode switch animate every surface. */
    transition-property: transform, opacity !important;
    transition-duration: 160ms !important;
    transition-timing-function: var(--ease-ui) !important;
    text-shadow: none !important;
}
html body :is(.ambient-glow,.ambient-orb,.cyber-grid,.cyber-grid-overlay,#spotlightGlow,.card-glass-layer,.stat-glow,.logo-pulse,.card-laser-line,.emblem-radar-ring,.btn-shine-effect,.titanium-card-glare) { display: none !important; }
html body :is(.progress-fill,.stat-card,.metric-card,.key-pro-card,.reseller-pro-card,.brand-logo,.pulse-dot,.pulse-indicator,.pulse-node-online,.status-dot,.pulse-dot-emerald)::before,
html body :is(.progress-fill,.stat-card,.metric-card,.key-pro-card,.reseller-pro-card)::after { display: none !important; }
html body :is(.pulse-dot,.pulse-dot-emerald,.status-dot,.pulse-node-online,.pulse-indicator,.brand-logo,.emblem-core,.nfc-wave) { animation: none !important; box-shadow: none !important; }
html body :is(.brand-br,.brand-mods) { color: var(--text-main) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html body .brand-mods { color: var(--primary) !important; }
html body :is(.sidebar-brand-img,.emblem-logo-img,.navbar-logo-img,.portal-logo-img) { filter: none !important; transform: none !important; }
html body :is(h1,h2,h3,h4) { letter-spacing: -.025em; }
html body :is(.page-title-group h1,.hud-title-text h2,.portal-title,.vault-title-section h2) { color: var(--text-main) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html body :is(.sidebar,.topbar,.mobile-bottom-nav,.cyber-navbar,.card-3d,.panel-card,.key-pro-card,.reseller-pro-card,.reseller-card,.modal-card,.luxury-card,.luxury-portal-card,.portal-card,.panel-hud-glass-card,.feature-card,.pricing-card,.faq-item,.card-action-dropdown) {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body :is(.card-3d,.panel-card,.key-pro-card,.reseller-pro-card,.luxury-card,.feature-card,.pricing-card) { border-radius: 16px !important; }
html body :is(.card-3d,.panel-card,.stat-card,.metric-card,.key-pro-card,.reseller-pro-card):hover { transform: none !important; border-color: var(--border-highlight) !important; }
html body :is(.panel-header,.studio-header,.key-pro-card-header,.reseller-card-header,.modal-header) { border-color: var(--border-color) !important; background: transparent !important; }
html body .panel-header { padding: 13px 16px; }
html body .panel-header h3 { font-size: 16px; font-weight: 600; }
html body .panel-body { padding: 16px; }
html body .sidebar { width: var(--sidebar-width); box-shadow: none !important; }
html body .brand-container { padding: 0 18px; gap: 10px; flex-shrink: 0; }
html body .brand-logo { width: 37px; height: 37px; background: transparent; border: 0; }
html body .brand-text h2 { font-size: 20px; letter-spacing: -.8px; }
html body .sidebar-app-card { margin: 8px 12px; flex-shrink: 0; }
html body .app-card-inner { padding: 8px 10px; border-radius: 10px !important; background: var(--bg-input) !important; }
html body .app-icon-wrap { width: 32px; height: 32px; font-size: 14px; box-shadow: none; border: 0; }
html body .app-title { font-size: 12px; }
html body .app-label { font-size: 10px; }
html body .nav-menu { padding: 0 10px; overflow-y: auto; gap: 2px; min-height: 0; scrollbar-gutter: stable; }
html body .nav-section-title { color: var(--text-dim); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; padding: 12px 10px 5px; }
html body .nav-item { gap: 8px; padding: 7px 10px; min-height: 34px; margin-bottom: 0; flex-shrink: 0; border-radius: 9px; color: var(--text-muted); font-size: 12px; font-weight: 500; border: 1px solid transparent; }
html body .nav-item i { width: 16px; font-size: 13px; color: inherit !important; }
html body .nav-item.active { background: var(--primary-dim); color: var(--primary); border-color: transparent; box-shadow: none; }
html body .nav-item:hover { background: var(--bg-input); color: var(--text-main); transform: none; }
html body .nav-item.active:hover { background: var(--primary-dim); color: var(--primary); }
html body .nav-item::after, html body .nav-item::before { display: none; }
html body .theme-picker-widget { margin: 8px 12px; padding: 8px 10px; flex-shrink: 0; border-radius: 10px; background: var(--bg-input); }
html body .theme-label { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); }
html body .theme-dot { width: 18px; height: 18px; box-shadow: none; }
html body .theme-dot.active { outline: 2px solid var(--text-main); outline-offset: 3px; }
html body .theme-dot { display: inline-block; cursor: pointer; flex-shrink: 0; }
html body .dot-cyan { background: #70d9c4; }
html body .dot-purple { background: #bea7f6; }
html body .dot-emerald { background: #80d4aa; }
html body .dot-gold { background: #e9c580; }
html body .sidebar-footer { padding: 8px 10px; flex-shrink: 0; }
html body .user-profile-card { padding: 8px; gap: 8px; }
html body .user-avatar { width: 33px; height: 33px; font-size: 14px; border-radius: 10px; box-shadow: none; background: var(--primary-dim); }
html body .user-name { font-size: 12px; }
html body .user-status { font-size: 10px; }
html body .main-content { min-width: 0; }
html body .topbar { padding: 0 20px; box-shadow: none !important; gap: 20px; }
html body .page-title-group h1 { font-size: 17px; font-weight: 600; }
html body .page-title-group .subtitle { font-size: 11px; margin-top: 4px; }
html body .topbar-right { gap: 8px; }
html body .content-body { padding: 18px 20px 32px; max-width: 1800px; width: 100%; margin-inline: auto; }
.workspace-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.workspace-eyebrow { display: block; color: var(--primary); font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 7px; }
.workspace-intro h2 { font-size: clamp(20px,2vw,24px); line-height: 1.2; font-weight: 600; margin: 0 0 7px; }
.workspace-intro p { color: var(--text-muted); font-size: 13px; margin: 0; }
.workspace-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
html body .quick-shortcuts-bar { padding: 9px 12px; border-radius: 10px !important; gap: 10px; margin-bottom: 14px; }
html body .shortcut-label { font-size: 11px; color: var(--text-muted); }
html body .stats-grid { gap: 12px; margin-bottom: 14px; }
html body .stat-card { padding: 14px; min-height: 126px; }
html body .stat-title { font-size: 10px; letter-spacing: .8px; color: var(--text-muted); font-weight: 500; }
html body .stat-icon-wrapper { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; box-shadow: none !important; transform: none !important; }
html body .stat-value { font-size: 29px; font-weight: 600; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
html body .stat-main { margin: 7px 0; }
html body .stat-progress-bar { height: 3px; background: var(--bg-input); margin-bottom: 10px; }
html body .progress-fill { box-shadow: none; }
html body .stat-meta { font-size: 10px; color: var(--text-muted) !important; }
html body .stat-ratio-badge { background: var(--primary-dim); color: var(--primary); border: 0; box-shadow: none; font-size: 10px; }
html body .analytics-row { gap: 14px; }
html body :is(.metric-card,.analytics-card) { padding: 14px; }
html body .metric-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
html body .metric-icon-box { box-shadow: none; transform: none !important; border-radius: 10px; }
html body .chart-container-wrap { padding: 6px 0; gap: 16px; }
html body .metric-val { font-size: 23px; }
html body .metric-lbl { font-size: 11px; color: var(--text-muted); }
html body :is(.btn,.btn-3d,.btn-icon,.btn-primary,.btn-secondary,.btn-danger,.btn-success,.btn-purple,.btn-gold) {
    border-radius: 9px; box-shadow: none !important; font-family: inherit; font-weight: 500; letter-spacing: 0; filter: none !important;
}
html body .btn { min-height: 32px; padding: 7px 11px; font-size: 12px; }
html body .btn-sm { min-height: 32px; padding: 7px 10px; font-size: 11px; }
html body .btn-icon { width: 32px; min-width: 32px; padding: 0; }
html body .btn-primary, html body .btn-portal-submit, html body .luxury-mint-btn { background: var(--primary) !important; color: #101f24 !important; border: 1px solid transparent; box-shadow: none !important; }
html[data-mode="light"] body :is(.btn-primary,.btn-portal-submit,.luxury-mint-btn) { color: #fff !important; }
html body .btn-secondary { color: var(--text-main); background: var(--bg-surface); border: 1px solid var(--border-color); }
html body .btn-danger { background: rgba(200,55,80,.12); color: var(--danger); border: 1px solid rgba(200,55,80,.24); }
html[data-mode="light"] body .btn-danger { color: var(--danger) !important; }
html body .btn-success { background: rgba(30,160,110,.12); color: var(--success); border: 1px solid rgba(30,160,110,.24); }
html[data-mode="light"] body .btn-success { color: var(--success) !important; }
html body :is(.btn,.btn-3d,.btn-portal-submit):hover:not(:disabled) { transform: translateY(-1px); }
html body :is(.btn,.btn-3d,.btn-portal-submit):active:not(:disabled) { transform: translateY(0) scale(.98); }
html body :is(button,a):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html body :is(input,select,textarea),
html body :is(input,select,textarea):focus,
html body :is(input,select,textarea):focus-visible { outline: none !important; }
html body :is(.form-control,.form-input,.luxury-input,.search-input,.filter-select,.sync-select,textarea) { background: var(--bg-input) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; border-radius: 9px; box-shadow: none; }
html body :is(input,textarea)::placeholder { color: var(--text-dim) !important; }
html body :is(input,select,textarea) { accent-color: var(--primary); }
html body select option { color: var(--text-main); background: var(--bg-surface); }
html body :is(.smart-chip,.preset-chip,.filter-chip,.page-pill-btn,.view-toggle-btn,.luxury-dur-btn,.type-pill) { box-shadow: none !important; border-radius: 8px !important; }
html body :is(.smart-chip,.filter-chip,.page-pill-btn).active { background: var(--primary-dim) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
html body .keys-cards-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)) !important; gap: 16px !important; }
html body .key-pro-card { padding: 13px !important; }
/* Skip offscreen card contents. Open menus opt out so popovers are never clipped. */
@supports (content-visibility: auto) {
    html body .key-pro-card { content-visibility: auto; contain-intrinsic-size: auto 270px; }
    html body .key-pro-card.menu-open, html body .key-pro-card:focus-within { content-visibility: visible; }
}
html body .key-pro-title { font-size: 12px !important; border: 0 !important; background: var(--bg-input) !important; padding: 7px 9px !important; letter-spacing: 0 !important; box-shadow: none !important; }
html body :is(.key-status-pill,.badge,.card-menu-btn,.card-action-dropdown,.key-pro-card-footer) { box-shadow: none !important; }
html body .key-status-pill { padding: 5px 8px !important; font-size: 9px !important; }
html body .card-action-dropdown { border: 1px solid var(--border-highlight) !important; border-radius: 12px !important; box-shadow: 0 10px 30px #0003 !important; }
html body :is(.key-pro-card-body,.key-pro-card-footer,.key-pro-stat-box,.luxury-tx-ticket,.studio-output-stream-wrap) { background: var(--bg-input) !important; border-color: var(--border-color) !important; box-shadow: none !important; }
html body :is(table,.resellers-premium-table) { background: var(--bg-surface); border-collapse: collapse; }
html body table th { background: var(--bg-input) !important; color: var(--text-muted) !important; font-weight: 500; font-size: 10px; letter-spacing: .6px; }
html body table td { color: var(--text-main); font-size: 12px; }
html body :is(table th,table td) { padding: 10px 12px; border-color: var(--border-color) !important; }
html body tbody tr:hover td { background: var(--bg-input) !important; }
html body :is(.modal-backdrop,.sidebar-backdrop) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #070d19aa !important; }
html body .modal-card { border-radius: 18px !important; max-height: calc(100dvh - 32px); overflow-y: auto; }
html body .modal-header { padding: 20px 24px; }
html body .modal-header h3 { font-size: 17px; }
html body .modal-body { padding: 24px; }
html body .modal-footer { border-color: var(--border-color); background: var(--bg-input); }
html body :is(.luxury-type-switcher,.luxury-duration-bar,.luxury-qty-stepper) { background: var(--bg-input); border-color: var(--border-color); }
html body .studio-header { padding: 18px; }
html body .studio-main-title { font-size: 18px; }
html body .studio-form-body { padding: 18px; }
html body .pricing-inputs-grid > div { border-radius: 12px; }
html body .pricing-inputs-grid .input-group { background: var(--bg-input) !important; border-color: var(--border-color) !important; }
html body .pricing-inputs-grid .form-control { background: transparent !important; }
html body .titanium-card-mockup { background: linear-gradient(120deg,#25354a,#162432); border: 1px solid #4a6075; box-shadow: none; transform: none; }
html body .titanium-card-mockup :is(.brand-br,.brand-mods,.card-holder-name,.card-validity-val,.card-key-embossed,.pin-val) { color: #f1f5fa !important; }
/* The toggle gives immediate state feedback. It never covers or blocks the page. */
html body .daynight-toggle { height: 38px; padding: 0 8px; background: var(--bg-input); border: 1px solid var(--border-color); gap: 7px; font: 500 11px 'Outfit',sans-serif; letter-spacing: 0; text-transform: none; }
html body .daynight-toggle-track { width: 40px; height: 24px; background: var(--border-color) !important; box-shadow: none !important; }
html body .daynight-toggle-thumb { width: 18px; height: 18px; top: 3px; left: 3px; background: var(--text-main) !important; color: var(--bg-dark) !important; box-shadow: none; font-size: 10px; }
html[data-mode="light"] body .daynight-toggle-thumb { transform: translateX(16px); }
html body .daynight-toggle-track::before { display: none; }
html body .daynight-toggle--floating { top: 20px; right: 20px; }
.workspace-search { display: flex; width: 100%; align-items: center; gap: 9px; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-color); padding: 8px 10px; border-radius: 8px; cursor: pointer; font: 11px 'Outfit',sans-serif; }
.workspace-tools { padding: 2px 12px 6px; flex-shrink: 0; }
.workspace-search kbd { margin-left: auto; font: 9px system-ui,sans-serif; padding: 2px 4px; border: 1px solid var(--border-color); border-radius: 4px; }
.workspace-density { cursor: pointer; border: 0; background: transparent; color: var(--text-muted); font: 11px 'Outfit',sans-serif; padding: 5px 0 0; }
.workspace-palette { margin: 15vh auto auto; width: min(540px,calc(100% - 32px)); max-height: 70dvh; border: 1px solid var(--border-highlight); border-radius: 18px; background: var(--bg-surface); color: var(--text-main); padding: 0; box-shadow: 0 24px 80px #0005; }
.workspace-palette::backdrop { background: #070d1999; }
.palette-header { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--border-color); padding: 18px; }
.palette-header input,
.palette-header input:focus,
.palette-header input:focus-visible { width: 100%; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; color: var(--text-main); font: 15px 'Outfit',sans-serif; }
.palette-close { padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-input); color: var(--text-muted); cursor: pointer; }
.palette-results { padding: 8px; max-height: 45dvh; overflow-y: auto; }
.palette-result { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px; border: 0; border-radius: 8px; background: transparent; color: var(--text-main); font: 13px 'Outfit',sans-serif; cursor: pointer; text-align: left; }
.palette-result i { color: var(--primary); width: 20px; }
.palette-result:hover,.palette-result:focus { background: var(--primary-dim); outline: none; }
.palette-empty { color: var(--text-muted); padding: 20px; font-size: 13px; }
.palette-footer { padding: 12px 18px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 11px; }
html[data-density="compact"] body .content-body { padding-top: 20px; }
html[data-density="compact"] body :is(.stat-card,.metric-card,.key-pro-card) { padding: 13px !important; min-height: 0; }
html[data-density="compact"] body :is(table th,table td) { padding: 9px 12px; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 100000; transform: translateY(-150%); background: var(--primary); color: var(--bg-dark); padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { transform: none; }
/* Public website and account entry */
html body .cyber-navbar { width: min(1200px,calc(100% - 48px)); left: 50%; right: auto; transform: translateX(-50%); height: auto; min-height: 72px; top: 20px; border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 22px; }
html body .brand-titles h1 span { display: inline; font: inherit; }
html body .nav-actions-group { display: flex; align-items: center; gap: 10px; }
html body :is(.btn-portal-launch,.btn-portal-hero,.btn-discord-hero,.btn-discord-nav) { box-shadow: none; border-radius: 9px; font-weight: 500; }
html body .btn-portal-launch { background: var(--primary); color: var(--bg-dark); }
html[data-mode="light"] body .btn-portal-launch { color: #fff !important; }
html body .hero-showcase { padding: 160px 0 80px; }
html body .hero-title-main { font-size: clamp(38px,4.5vw,65px); line-height: 1.08; letter-spacing: -2.5px; font-weight: 600; }
html body .hero-title-main .gradient-cyan { background: none; color: var(--primary); -webkit-text-fill-color: currentColor; }
html body .hero-lead-text { font-size: 16px; line-height: 1.8; color: var(--text-muted); max-width: 560px; }
html body .guarantee-badges-cluster { gap: 7px; }
html body .badge-pill-item { font-size: 9px; border: 1px solid var(--border-color); box-shadow: none; padding: 6px 9px; background: var(--bg-input); }
html body .panel-hud-glass-card { transform: none !important; border-radius: 20px; padding: 28px; }
html body .panel-hud-glass-card::before { display: none; }
html body .features-checklist-grid { gap: 18px; }
html body .section-wrapper { padding-block: 55px; }
html body .section-heading-lg { font-size: clamp(28px,3vw,40px); font-weight: 600; letter-spacing: -1px; }
html body :is(.feature-card,.pricing-card) { padding: 28px; }
html body .feature-card:hover { transform: translateY(-3px); }
html body :is(.feature-icon-box,.pricing-icon-box) { box-shadow: none; border-radius: 12px; }
html body .faq-item { border-radius: 12px; margin-bottom: 10px; }
html body :is(.feature-box-glass,.pricing-card-box,.faq-card-box,.notification-flyout-menu,.dealer-podium-card,.contender-card,.vault-card) { background: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: none !important; }
html body :is(.feature-icon-wrapper,.brand-logo-box) { box-shadow: none; background: var(--primary-dim); color: var(--primary); border-color: var(--border-color); }
html body .pricing-card-box.featured-tier { border-color: var(--primary) !important; }
html body .pricing-card-box:hover { transform: translateY(-3px); }
html body .faq-question-btn { color: var(--text-main); font-weight: 500; }
html body .faq-answer-body { color: var(--text-muted); }
html body .login-container { width: 100%; max-width: 1100px; padding: 80px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin: auto; perspective: none; }
.login-story { padding: 24px 0; }
.login-story h2 { font-size: clamp(36px,4.3vw,59px); font-weight: 600; line-height: 1.08; letter-spacing: -2px; margin: 18px 0 24px; }
.login-story h2 span { color: var(--primary); }
.login-story p { color: var(--text-muted); font-size: 16px; line-height: 1.8; max-width: 370px; }
.login-story-points { margin: 35px 0; display: grid; gap: 19px; }
.login-story-points div { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--text-body); }
.login-story-points i { display: grid; place-items: center; color: var(--primary); background: var(--primary-dim); width: 34px; height: 34px; border-radius: 10px; }
.login-back { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.login-back:hover { color: var(--primary); }
html body .luxury-portal-card { width: 100%; padding: 32px; border-radius: 20px; transform: none !important; }
html body .portal-emblem-wrap { margin-bottom: 20px; }
html body .emblem-core { width: 64px; height: 64px; border-radius: 16px; background: var(--bg-input); border: 1px solid var(--border-color); }
html body .emblem-logo-img { width: 48px; height: 48px; }
html body .brand-name { font-size: 26px; }
html body .badge-pro { font-size: 8px; letter-spacing: 1px; border-radius: 5px; }
html body .brand-tagline { font-size: 12px; color: var(--text-muted); letter-spacing: 0; }
html body .luxury-input-capsule { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); box-shadow: none; }
html body .portal-input { color: var(--text-main); background: transparent; font-size: 14px; }
html body .luxury-input-capsule:focus-within { border-color: var(--primary); box-shadow: var(--focus-ring); }
html body .luxury-input-capsule .portal-input:focus-visible { outline: none; box-shadow: none; }
html body :is(.holo-shimmer,.vault-rotating-ring,.vault-inner-ring) { display: none !important; }
html body :is(.floating-crown-badge,.vault-lock-orb,.notification-badge-dot) { animation: none !important; box-shadow: none !important; }
html body :is(.podium-column,.contender-row,.contenders-section,.cyber-vault-lockout-container,.leaderboard-hud-header,.vault-notice-terminal) { background: var(--bg-surface) !important; box-shadow: none !important; border-color: var(--border-color) !important; backdrop-filter: none !important; }
html body .titanium-card-mockup :is(.card-sub-lbl,.pin-lbl) { color: #aebdd1 !important; }
html body .btn-portal-submit { min-height: 49px; border-radius: 10px; font-size: 12px; letter-spacing: .5px; }
html body .cloudflare-turnstile-box { border-radius: 10px; border-color: var(--border-color); box-shadow: none; }
html body .portal-security-strip { border-color: var(--border-color); font-size: 10px; }
html body .portal-footer { font-size: 9px; color: var(--text-muted); }
html body .portal-card { border: 1px solid var(--border-color); border-radius: 20px; padding: 32px; }
html body .portal-container { padding: 80px 20px 40px; }
/* Quiet, short entrances keep feedback without continuous rendering. */
html body .tab-content.active { animation: workspace-enter 180ms var(--ease-ui); }
html body .tab-content.active :is(.stats-grid,.analytics-row,.reseller-analytics-grid) > *,
html body .tab-content.active > :is(.card-3d,.panel-card,.quick-shortcuts-bar) { animation: none; }
@keyframes workspace-enter { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (min-width: 993px) { html body .main-content { margin-left: var(--sidebar-width); } }
@media (max-width: 1280px) {
    html body .topbar { padding-inline: 22px; }
    html body .content-body { padding-inline: 22px; }
    html body .topbar-right .clock-display { display: none; }
    html body .daynight-toggle-label { display: none; }
    html body .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 992px) {
    html body .sidebar { left: 0 !important; width: 260px !important; transform: translateX(-100%) !important; z-index: 100000 !important; }
    html body .sidebar.open { transform: translateX(0) !important; }
    html body .main-content { margin-left: 0 !important; width: 100%; padding: 0 !important; }
    html body .mobile-toggle { display: grid !important; place-items: center; width: 38px; height: 38px; flex-shrink: 0; }
    html body .topbar { min-height: 70px !important; max-height: none !important; height: auto !important; padding: 14px 20px !important; flex-wrap: wrap !important; }
    html body .page-title-group h1 { font-size: 18px !important; font-weight: 600 !important; }
    html body .workspace-date { display: none; }
    html body .login-container { gap: 32px; }
}
@media (max-width: 640px) {
    html body .content-body { padding: 20px 14px 100px !important; }
    html body .topbar { position: sticky !important; padding: 11px 14px !important; gap: 10px !important; }
    html body .topbar-left { width: 100% !important; flex: 1 0 100% !important; gap: 8px; }
    html body .topbar-right { width: 100% !important; justify-content: flex-end; gap: 8px !important; padding: 0 !important; }
    html body .topbar-right .daynight-toggle { margin-right: auto; }
    html body .auto-sync-box { margin-right: auto; }
    html body .topbar-right .btn { height: 34px; min-height: 34px; }
    html body .topbar-right .clock-display { display: none !important; }
    html body .topbar-right #topCreateKeyBtn { display: inline-flex !important; }
    html body .workspace-intro { margin-bottom: 18px; }
    html body .workspace-intro h2 { font-size: 24px; }
    html body .workspace-intro p { font-size: 12px; }
    html body .quick-shortcuts-bar { align-items: flex-start; padding: 12px; }
    html body .shortcut-buttons { gap: 7px; }
    html body .stats-grid { gap: 10px; }
    html body .stat-card { padding: 14px !important; min-height: 155px; }
    html body .stat-title { font-size: 9px; letter-spacing: .1px; }
    html body .stat-card-header { gap: 6px; }
    html body .stat-icon-wrapper { width: 25px; height: 25px; font-size: 11px; flex-shrink: 0; }
    html body .stat-value { font-size: 29px; }
    html body .stat-meta { font-size: 9px; }
    html body :is(.analytics-row,.reseller-create-grid,.luxury-studio-grid) { grid-template-columns: minmax(0,1fr); }
    html body .panel-header { flex-wrap: wrap; padding: 16px; gap: 12px; }
    html body .panel-body { padding: 16px; }
    html body .mobile-bottom-nav { background: var(--bg-surface) !important; padding-bottom: max(8px,env(safe-area-inset-bottom)); box-shadow: none !important; border-top: 1px solid var(--border-color); }
    html body .mobile-nav-item { min-height: 54px; color: var(--text-muted); }
    html body .mobile-nav-item.active { color: var(--primary); background: var(--primary-dim); }
    html body .cyber-navbar { top: 10px; width: calc(100% - 24px); padding: 12px; border-radius: 12px; flex-wrap: wrap; gap: 14px; }
    html body .cyber-navbar .brand-titles > span { display: none; }
    html body .cyber-navbar .brand-titles h1 { font-size: 15px; white-space: nowrap; }
    html body .cyber-navbar .brand-link { gap: 7px; }
    html body .btn-portal-launch { font-size: 10px; padding: 10px; }
    html body .cyber-navbar .brand-logo-box { width: 32px; height: 32px; }
    html body .cyber-navbar .navbar-logo-img { width: 29px !important; height: 29px !important; }
    html body .nav-actions-group { gap: 6px; }
    html body .btn-discord-nav { display: none; }
    html body .nav-links-list { display: flex; order: 3; width: 100%; justify-content: center; gap: 18px; }
    html body .nav-links-list a { font-size: 11px; }
    html body .hero-showcase { padding-top: 180px; padding-bottom: 36px; }
    html body .hero-title-main { letter-spacing: -1.4px; }
    html body .hero-grid { gap: 32px; }
    html body .section-wrapper { padding-block: 35px; }
    html body .login-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 440px !important; padding: 12px 0 !important; margin: auto !important; }
    html body .login-story { display: none !important; }
    html body .luxury-portal-card { width: 100% !important; max-width: 420px !important; padding: 28px 20px !important; margin: 0 auto !important; border-radius: 20px !important; }
    html body .portal-card { padding: 25px 20px; }
    html body .modal-card { max-width: calc(100vw - 24px) !important; margin: 12px; }
    html body .modal-body { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html body *,html body *::before,html body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Compact workspace proportions at native browser zoom. */
html body .sidebar .nav-section-title { flex-shrink: 0; line-height: 1.3; }
html body .sidebar .nav-item > span:not(.badge) { min-width: 0; line-height: 1.35; }
html body .sidebar .nav-item .badge { flex-shrink: 0; font-size: 9px; padding: 2px 5px; line-height: 1.3; margin-left: auto; }
html body .sidebar :is([data-tab="leaderboard"],[data-tab="broadcast-pricing"],[data-tab="reseller-leaderboard"],[data-tab="reseller-owner-key"],[data-tab="reseller-hwid-unlock"],[data-tab="reseller-api"]) .badge { display: none; }
html body .sidebar .theme-picker-widget { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body .sidebar .theme-label { margin: 0; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
html body .sidebar .theme-dots { gap: 7px; }
html body .sidebar .theme-dot { width: 14px; height: 14px; border-width: 1px; }
html body .sidebar .theme-dot.active { outline-width: 1px; outline-offset: 2px; }
html body .sidebar .user-avatar { width: 28px; height: 28px; }
html body .sidebar .btn-logout-mini { width: 27px; height: 27px; font-size: 11px; }
html body .sidebar .app-label { font-size: 9px; line-height: 1.3; }
html body .sidebar .app-title { font-size: 11px; line-height: 1.4; }
html body .sidebar .app-icon-wrap { height: 28px; width: 28px; flex-shrink: 0; }
html body .chart-canvas-box { height: 98px; width: 98px; flex-shrink: 0; }
html body .chart-legend-box { gap: 8px; }
html body .legend-item { font-size: 11px; }
html body .analytics-card .panel-header { padding: 0 0 10px !important; }
html body .analytics-card .panel-header > span { font-size: 11px; }
html body .hwid-insights-content { padding: 19px 0 12px; gap: 8px; }
html body .metric-lbl { line-height: 1.4; }
html body .stat-card-header { gap: 8px; }
html body .stat-icon-wrapper { width: 27px; height: 27px; font-size: 12px; }
html body .stat-meta { line-height: 1.4; }
html body .smart-filters-bar { padding: 8px 10px; gap: 8px; }
html body .smart-chip { padding: 5px 8px; font-size: 10px; }
html body .keys-cards-grid { gap: 12px !important; }
html body .key-pro-card-header { margin-bottom: 9px !important; padding-bottom: 9px !important; }
html body .key-pro-card-body { padding: 10px !important; }
html body .key-pro-fields { gap: 7px !important; }
html body :is(.form-group,.studio-field-group) { margin-bottom: 14px; }
html body .studio-subtitle { font-size: 12px; }
html body .workspace-overview-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
html body #workspaceSyncStatus { color: var(--text-muted); font-size: 10px; }
html body #workspaceSyncStatus[data-state="error"] { color: var(--danger); }
html body .workspace-intro p { font-size: 12px; }
@media (min-width: 993px) {
    html body .topbar { height: var(--topbar-height); min-height: var(--topbar-height); }
    html body .topbar-right :is(.btn,.btn-icon,.daynight-toggle,.auto-sync-box,.clock-display) { height: 32px; min-height: 32px; }
    html body .topbar-right .btn-icon { width: 32px; min-width: 32px; }
    html body .topbar-right .clock-display { font-size: 10px; padding: 5px 9px; }
    html body .page-title-group .subtitle { font-size: 10px; margin-top: 2px; }
    html body .workspace-intro { margin-bottom: 14px; }
    html body .workspace-intro h2 { font-size: 22px; margin-bottom: 3px; }
    html body .analytics-row.mb-4 { margin-bottom: 14px !important; }
    html body .stat-card { min-height: 124px; }
    html body .panel-title-wrap h3 { font-size: 14px; }
    html body :is(.form-control,.form-input,.luxury-input) { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
    html body .topbar-right .clock-display { display: none; }
}
@media (min-width: 1100px) {
    html body .stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (min-width: 993px) and (max-height: 740px) {
    html body .sidebar-app-card { display: none; }
    html body .sidebar .nav-item { min-height: 32px; padding-block: 6px; }
    html body .sidebar .nav-section-title { padding-top: 9px; }
}
@media (max-width: 992px) {
    html body .sidebar .nav-item { min-height: 40px; padding-block: 9px; }
    html body .workspace-overview-actions { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 640px) {
    html body .workspace-intro { flex-direction: column; align-items: flex-start; gap: 12px; }
    html body .workspace-overview-actions { width: 100%; justify-content: space-between; }
    html body .workspace-intro h2 { font-size: 22px; }
    html body .stat-card { min-height: 132px; }
    html body .stats-grid { gap: 10px !important; }
    html body .chart-canvas-box { width: 88px; height: 88px; }
}

/* ==========================================================================
   ELIMINATE NESTED INNER BORDERS & FOCUS OUTLINE BOXES IN ALL TEXTBOXES
   ========================================================================== */
html body :is(input, select, textarea) {
    outline: none !important;
}
html body :is(input, select, textarea):focus,
html body :is(input, select, textarea):focus-visible {
    outline: none !important;
}

/* Any input inside any container wrapper must NEVER have a nested inner border or box */
html body :is(.hwid-input-container, .palette-header, .luxury-input-capsule, .luxury-input-wrap, .search-input-box, .search-input-group, .input-group) :is(input, .form-control, .hwid-input-field, .portal-input, .luxury-input, [type="text"], [type="search"], [type="password"]) {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body :is(.hwid-input-container, .palette-header, .luxury-input-capsule, .luxury-input-wrap, .search-input-box, .search-input-group, .input-group) :is(input, .form-control, .hwid-input-field, .portal-input, .luxury-input, [type="text"], [type="search"], [type="password"]):focus,
html body :is(.hwid-input-container, .palette-header, .luxury-input-capsule, .luxury-input-wrap, .search-input-box, .search-input-group, .input-group) :is(input, .form-control, .hwid-input-field, .portal-input, .luxury-input, [type="text"], [type="search"], [type="password"]):focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}