/* ===== assets/tokens.css ===== */
:root {
    --bg-app: #080b0f;
    --bg-surface-primary: #0f141c;
    --bg-surface-secondary: #161b22;
    --bg-surface-hover: #1f2633;
    --border-subtle: rgba(255, 255, 255, .05);
    --border-medium: rgba(255, 255, 255, .12);
    --border-accent: rgba(0, 210, 255, .3);
    --accent-cyan: #00d2ff;
    --accent-blue: #0072ff;
    --accent-purple: #7928ca;
    --accent-gradient: linear-gradient(135deg, #00d2ff 0%, #0072ff 100%);
    --accent-glow: 0 0 20px rgba(0, 210, 255, .35);
    --accent-glow-strong: 0 0 40px rgba(0, 210, 255, .6);
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-tertiary: #484f58;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 9999px;
    --glass-blur: blur(16px);
    --transition-fast: all .2s cubic-bezier(.4, 0, .2, 1);
    --transition-smooth: all .35s cubic-bezier(.16, 1, .3, 1);
}

/* ===== assets/style.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
.account-profile-grid {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.account-profile-avatar {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    color: var(--color-accent, #00aeff);
    background: rgba(0,174,255,.12);
    font-size: 38px;
}
.account-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.account-profile-grid h2 {
    margin: .2rem 0;
}
.account-2fa-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}
.account-2fa-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: min(90vh, 720px);
    overflow: auto;
    padding: 22px 24px 24px;
    border: 1px solid var(--nav-border, rgba(157, 198, 232, .16));
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(18, 31, 49, .96), rgba(9, 16, 27, .98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    color: #fff;
    box-sizing: border-box;
}
.account-2fa-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #9ca3af;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.account-2fa-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.account-2fa-body { text-align: center; }
.account-2fa-title {
    margin: 0 2rem .25rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}
.account-2fa-subtitle {
    margin: 0 0 1.5rem;
    color: #9ca3af;
    font-size: .875rem;
}
.account-2fa-modal-qr {
    position: relative;
    display: block;
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 16px;
    padding: 8px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(157, 198, 232, .16);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
}
.account-2fa-modal-qr-wrap {
    position: relative;
    display: inline-block;
    width: 220px;
    margin: 0 auto 1rem;
    padding: .75rem;
    overflow: hidden;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.3);
    box-sizing: border-box;
}
.account-2fa-modal-qr-wrap::after {
    content: "";
    position: absolute;
    inset: 10px;
    height: 2px;
    background: #00d2ff;
    box-shadow: 0 0 12px #00d2ff;
    animation: account-2fa-laser 2.4s ease-in-out infinite;
}
.account-2fa-key-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: .5rem;
    border: 1px solid #1f2937;
    border-radius: .5rem;
    background: #161b22;
    text-align: left;
}
.account-2fa-modal-secret {
    min-width: 0;
    overflow: hidden;
    color: #e5e7eb;
    font-size: .8rem;
    word-break: break-all;
}
.account-2fa-copy {
    flex: 0 0 auto;
    margin: 0;
    padding: .375rem .75rem;
    border: 0;
    border-radius: .375rem;
    background: rgba(0, 210, 255, .1);
    color: #00d2ff;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
}
.account-2fa-copy:hover { background: rgba(0, 210, 255, .2); }
.account-2fa-code-inputs { display: flex; justify-content: center; gap: .5rem; margin: 0 0 1.5rem; }
.account-2fa-digit {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid #374151;
    border-radius: .75rem;
    outline: none;
    background: #161b22;
    color: #fff;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
}
.account-2fa-digit:focus { border-color: #00d2ff; box-shadow: 0 0 0 1px #00d2ff; }
.account-2fa-enable {
    width: 100%;
    padding: .875rem 1rem;
    border: 0;
    border-radius: .75rem;
    background: #00d2ff;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 210, 255, .4);
    transition: background .2s ease, transform .2s ease;
}
.account-2fa-enable:hover { background: #00b8e6; }
.account-2fa-enable:disabled { cursor: wait; opacity: .7; }
.account-2fa-modal-error { min-height: 1.25rem; margin: 0 0 .75rem; color: #fca5a5; font-size: .875rem; }
.account-2fa-success-copy { max-width: 410px; margin: 0 auto 1rem; color: #a9bdd0; font-size: .8rem; line-height: 1.5; }
.account-2fa-backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 1rem; padding: 14px 16px; border: 1px solid rgba(0, 210, 255, .16); border-radius: 12px; background: rgba(22, 34, 52, .72); color: #f0f6fc; text-align: left; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; letter-spacing: .1em; line-height: 1.5; }
.account-2fa-backup-codes.is-masked { filter: blur(5px); user-select: none; }
.account-2fa-backup-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.account-2fa-backup-actions .btn { margin: 0; }
.account-2fa-backup-actions .btn,
.account-2fa-close-done { min-height: 42px; padding: 0 16px; border: 1px solid rgba(0, 210, 255, .45); border-radius: 10px; background: rgba(0, 210, 255, .14); color: #53d9ff; font-size: .75rem; font-weight: 800; cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.account-2fa-backup-actions .btn:hover { border-color: rgba(0, 210, 255, .8); background: rgba(0, 210, 255, .24); transform: translateY(-1px); }
.account-2fa-close-done { width: 100%; background: linear-gradient(135deg, #00d2ff, #008cff); color: #06111c; box-shadow: 0 10px 24px rgba(0, 210, 255, .16); }
.account-2fa-confirm {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    border: 1px solid rgba(0, 210, 255, .38);
    border-radius: 10px;
    background: linear-gradient(135deg, #00d2ff, #008cff);
    color: #06111c;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 210, 255, .16);
    cursor: pointer;
}
.account-2fa-confirm:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 520px) {
    .account-2fa-backup-codes { grid-template-columns: 1fr; }
    .account-2fa-backup-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
.btn-loading, .btn-success, .btn-error { position: relative; }
.btn-loading { cursor: wait !important; }
.btn-loading::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: account-2fa-spin .7s linear infinite; vertical-align: -2px; }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: #fff !important; }
.btn-success::after { content: "вњ“"; margin-left: 8px; animation: account-2fa-success .25s ease both; }
.btn-error { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; color: #fff !important; }
.account-2fa-digit.is-error { border-color: #ef4444; box-shadow: 0 0 15px rgba(239,68,68,.4); }
.account-2fa-digit.is-error { animation: shake .42s ease-in-out; }
.account-2fa-modal { animation: account-2fa-fade-in .2s ease both; }
.account-2fa-dialog { animation: account-2fa-dialog-in .22s ease both; }
.account-2fa-spinner { width: 34px; height: 34px; margin: 2rem auto 1rem; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--color-accent, #00aeff); border-radius: 50%; animation: account-2fa-spin .8s linear infinite; }
.account-2fa-shake { animation: account-2fa-shake .42s ease-in-out; }
.account-2fa-toast { position: fixed; z-index: 1100; right: 1rem; bottom: 1rem; max-width: 360px; }
@keyframes account-2fa-spin { to { transform: rotate(360deg); } }
@keyframes account-2fa-laser { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(198px); opacity: 1; } }
@keyframes account-2fa-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes account-2fa-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes account-2fa-dialog-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes account-2fa-success { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 600px) {
    .account-2fa-modal { align-items: flex-end; padding: 0; }
    .account-2fa-dialog { max-height: 92vh; border-radius: 1rem 1rem 0 0; animation-name: account-2fa-sheet-in; }
}
@keyframes account-2fa-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.account-2fa-regenerate { margin: 0 .5rem .75rem 0; }

/*
 * Noxis Cyber-Dark design tokens and shared primitives.
 * The final layout rules live in navigation.css, which is loaded last so
 * legacy component styles cannot reintroduce horizontal offsets.
 */
:root {
    --noxis-bg: #080B0F;
    --noxis-panel: #161B22;
    --noxis-panel-hover: #1C2128;
    --noxis-border: 1px solid rgba(255, 255, 255, 0.08);
    --noxis-cyan: #00D2FF;
    --noxis-blue: #0072FF;
    --noxis-purple: #7928CA;
    --noxis-glow: 0 0 20px rgba(0, 210, 255, 0.3);
    --noxis-text: #F0F6FC;
    --noxis-muted: #8B949E;
    --noxis-radius-card: 16px;
    --noxis-radius-control: 11px;
    --noxis-font: 'Inter', system-ui, -apple-system, sans-serif;
    --noxis-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

html {
    background: var(--noxis-bg);
}

body.app-shell {
    min-width: 320px;
    margin: 0;
    background: var(--noxis-bg);
    color: var(--noxis-text);
    font-family: var(--noxis-font);
}

body.app-shell *,
body.app-shell *::before,
body.app-shell *::after {
    box-sizing: border-box;
}

body.app-shell :where(button, input, select, textarea) {
    font: inherit;
}

body.app-shell :where(.hero-banner, .stat-card, .item-id, .auth-card, .account-card, .orders-panel, .support-app, .mint-card, .wiki-card) {
    border: var(--noxis-border);
    border-radius: var(--noxis-radius-card);
    background: rgba(22, 27, 34, .9);
    backdrop-filter: blur(16px);
}

body.app-shell :where(input, select, textarea) {
    border: var(--noxis-border);
    border-radius: var(--noxis-radius-control);
    background: rgba(8, 11, 15, .72);
    color: var(--noxis-text);
}

body.app-shell :where(button, .btn, .orders-primary-action, .product-buy, .auth-submit) {
    border-radius: var(--noxis-radius-control);
}
@keyframes account-2fa-skeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

:root {
    --bg-main: #07111d;
    --bg-card: #0e1c2d;
    --bg-card-hover: #122438;
    --bg-header: #0b1b2b;
    --border-color: rgba(142, 168, 189, 0.16);
    --border-hover: rgba(var(--color-accent-rgb), 0.35);
    --text-primary: #eef8ff;
    --text-secondary: #8ea8bd;
    --color-accent: #35c8ff;
    --color-accent-rgb: 53, 200, 255;
    --color-success: #45d99a;
    --shadow-glow: 0 0 40px rgba(var(--color-accent-rgb), 0.25);
    --transition-speed: 0.4s;
    --card-glow: rgba(var(--color-accent-rgb), 0.15);
}

* {
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.admin-image-preview { display:block; width:100%; max-width:420px; height:120px; margin:10px 0 6px; object-fit:cover; border:1px solid var(--border-color); border-radius:12px; background:#08111e; }
.admin-image-preview-small { width:120px; height:120px; object-fit:contain; }
.admin-image-status { display:block; min-height:18px; margin-bottom:12px; font-size:12px; color:var(--text-secondary); }
.admin-image-status.is-ok { color:#72e0a3; }
.admin-image-status.is-error { color:#ff8d9f; }

html {
    background-color: var(--bg-main) !important;
    min-height: 100%;
}

body {
    min-height: 100vh;
    width: 100%;
    background-color: var(--bg-main) !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.03) 0%, transparent 40%) !important;
    background-attachment: fixed !important;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-top: 120px;
}

/* Dynamic Ambient Glow Spots in Background */
body::before, body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    filter: blur(140px);
    opacity: 0.15;
    animation: pulseGlow 12s infinite alternate;
}

body::before {
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 80%);
    top: -200px;
    left: 20%;
}

body::after {
    background: radial-gradient(circle, #a855f7 0%, transparent 80%);
    bottom: -200px;
    right: 10%;
    animation-delay: 6s;
}

@keyframes pulseGlow {
    0% { transform: scale(1) translate(0, 0); opacity: 0.12; }
    50% { transform: scale(1.15) translate(40px, 30px); opacity: 0.18; }
    100% { transform: scale(0.9) translate(-20px, -40px); opacity: 0.12; }
}

/* Global motion and depth layer */
body {
    background-size: 140% 140%;
    animation: ambientShift 18s ease-in-out infinite alternate;
}

@keyframes ambientShift {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

.header {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    animation: headerDrop 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes headerDrop {
    from { opacity: 0; transform: translate(-50%, -18px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.hero-banner {
    isolation: isolate;
    border-color: rgba(var(--color-accent-rgb), 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 70px rgba(var(--color-accent-rgb), 0.08);
    animation: heroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-banner::after {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -1;
    background: conic-gradient(from 120deg, transparent, rgba(var(--color-accent-rgb), 0.1), transparent 30%);
    animation: heroSweep 12s linear infinite;
}

@keyframes heroReveal {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroSweep {
    to { transform: rotate(360deg); }
}

.hero-title {
    text-shadow: 0 0 35px rgba(var(--color-accent-rgb), 0.2);
}

.tabs .tab-links > li > a,
.btn,
.method-card,
.payment-id.window {
    position: relative;
    overflow: hidden;
}

.tabs .tab-links > li > a::after,
.btn::after,
.method-card::before,
.payment-id.window::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.16), transparent 75%);
    transform: translateX(-125%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.tabs .tab-links > li > a:hover::after,
.btn:hover::after,
.method-card:hover::before,
.payment-id.window:hover::after {
    transform: translateX(125%);
}

.stat-card,
.item-id,
.payment-id.window {
    animation: cardEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent-rgb), 0.4);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

.container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 24px;
}
.shop-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 22px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:rgba(10,18,30,.72);box-shadow:0 12px 30px rgba(0,0,0,.16)}
.shop-control{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.045);color:var(--text-secondary);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.shop-control:focus-within{border-color:var(--color-accent);background:rgba(var(--color-accent-rgb),.06);box-shadow:0 0 0 3px rgba(var(--color-accent-rgb),.1)}
.shop-control input,.shop-control select{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text-primary);font:inherit}
.shop-control input::placeholder{color:var(--text-secondary)}
.shop-control select{cursor:pointer;appearance:none;padding-right:20px}
.shop-control select option{background:#101a29;color:#fff}
.shop-search{width:280px}.shop-sort{width:205px;position:relative}.shop-sort select{display:none}.shop-sort-toggle{width:100%;padding:0 18px 0 0;border:0;background:transparent;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}.shop-sort:after{content:"\f078";font-family:"FontAwesome";font-size:10px;pointer-events:none;color:var(--color-accent);transition:transform .2s ease}.shop-sort.is-open:after{transform:rotate(180deg)}.shop-sort-menu{display:none;position:absolute;z-index:20;top:calc(100% + 7px);right:0;width:100%;padding:6px;border:1px solid rgba(var(--color-accent-rgb),.35);border-radius:11px;background:#0b1421;box-shadow:0 16px 32px rgba(2,5,11,.8)}.shop-sort.is-open .shop-sort-menu{display:grid;animation:fadeIn .16s ease}.shop-sort-menu button{padding:10px 11px;border:0;border-radius:7px;background:transparent;color:#dcecff;font:inherit;text-align:left;cursor:pointer}.shop-sort-menu button:hover,.shop-sort-menu button[aria-selected="true"]{background:rgba(var(--color-accent-rgb),.16);color:var(--color-accent)}
.choice-picker{position:relative}.choice-picker select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.choice-picker-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;padding:0 16px;border:1px solid #3a5069;border-radius:12px;background:#09111d;color:#fff;font:inherit;font-weight:400;text-align:left;cursor:pointer}.choice-picker-toggle:hover,.choice-picker.is-open .choice-picker-toggle{border-color:#35c8ff;background:#102238;box-shadow:0 0 0 3px rgba(53,200,255,.1)}.choice-picker-toggle i{color:#35c8ff;font-size:11px;transition:transform .2s}.choice-picker.is-open .choice-picker-toggle i{transform:rotate(180deg)}.choice-picker-menu{display:none;position:absolute;z-index:50;top:calc(100% + 7px);left:0;right:0;padding:6px;border:1px solid rgba(53,200,255,.35);border-radius:12px;background:#0b1421;box-shadow:0 16px 32px #02050bcc}.choice-picker.is-open .choice-picker-menu{display:grid}.choice-picker-menu button{padding:12px 11px;border:0;border-radius:8px;background:transparent;color:#dcecff;font:inherit;font-weight:400;text-align:left;cursor:pointer}.choice-picker-menu button:hover,.choice-picker-menu button.is-selected{background:rgba(53,200,255,.16);color:#35c8ff}
.support-form .choice-picker{margin:0 0 14px}.support-form .choice-picker select{display:block;margin:0}
.product-badge{display:inline-flex;padding:4px 9px;border-radius:99px;background:rgba(var(--color-accent-rgb),.15);color:var(--color-accent);font-size:11px;font-weight:800}.account-tabs{margin:24px 0}.account-tabs .nav-tabs{display:flex;gap:8px;list-style:none;flex-wrap:wrap}.account-tabs .nav-tabs a{display:block;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.04)}.account-tabs .nav-tabs .active a{background:var(--color-accent);color:#00131d}.account-tabs .tab-pane{display:none;padding:20px 0}.account-tabs .tab-pane.active{display:block}.account-history{display:grid;gap:8px}.account-history div{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border-color);border-radius:10px}.account-history span{color:var(--text-secondary)}@media(max-width:620px){.shop-toolbar{display:grid;grid-template-columns:1fr;padding:8px}.shop-search,.shop-sort{width:auto}}
.account-progress{margin:24px 0 4px;padding:20px;border:1px solid rgba(var(--color-accent-rgb),.24);border-radius:18px;background:linear-gradient(135deg,rgba(var(--color-accent-rgb),.11),rgba(255,255,255,.025));box-shadow:0 16px 36px rgba(0,0,0,.18)}.account-progress-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.account-progress-kicker{color:var(--color-accent);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.account-progress h2{margin:5px 0 2px;font-size:22px}.account-progress p{margin:0;color:var(--text-secondary);font-size:12px}.account-progress-head>strong{color:var(--color-accent);font-size:20px;white-space:nowrap}.account-progress-track{height:10px;margin-top:18px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}.account-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-accent),#8be7ff);box-shadow:0 0 18px rgba(var(--color-accent-rgb),.5);transition:width .5s ease}.account-progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:var(--text-secondary);font-size:11px}@media(max-width:620px){.account-progress-head,.account-progress-meta{display:grid;gap:6px}.account-progress-head>strong{font-size:18px}}
.account-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 4px}.account-overview a{display:grid;gap:4px;padding:14px;border:1px solid var(--border-color);border-radius:14px;background:rgba(255,255,255,.025);transition:border-color .2s ease,transform .2s ease,background .2s ease}.account-overview a:hover{transform:translateY(-2px);border-color:var(--border-hover);background:rgba(var(--color-accent-rgb),.07)}.account-overview span{color:var(--text-secondary);font-size:11px;font-weight:700}.account-overview span i{margin-right:5px;color:var(--color-accent)}.account-overview strong{font-size:22px;color:var(--text-primary)}.account-overview small{color:var(--text-secondary);font-size:10px}@media(max-width:760px){.account-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.account-overview{grid-template-columns:1fr}}
.account-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}.account-section-heading h2{margin:5px 0 0}.account-section-heading>span{padding:5px 9px;border-radius:99px;background:rgba(var(--color-accent-rgb),.12);color:var(--color-accent);font-size:11px}.account-activity-list{display:grid;gap:8px}.account-activity-item{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--border-color);border-radius:12px;background:rgba(255,255,255,.025)}.account-activity-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(var(--color-accent-rgb),.12);color:var(--color-accent)}.account-activity-icon.is-negative{background:rgba(237,102,128,.12);color:#ed6680}.account-activity-item>div{display:grid;gap:2px;flex:1}.account-activity-item small{color:var(--text-secondary);font-size:11px}.account-activity-item b{font-size:13px}.account-activity-item b.is-positive{color:#72e0a3}.account-activity-item b.is-negative{color:#ed6680}

/* Header & Floating Navigation */
.header {
    background-color: var(--bg-header);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 1100px;
    z-index: 1000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.03);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 28px;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.logo-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-accent);
}

.logo span {
    color: var(--color-accent);
}

.navbar-wrapper ul {
    display: flex;
    list-style: none;
    gap: 32px;
}
.navbar-wrapper { display: flex; align-items: center; min-width: 0; }
.navbar-wrapper ul { flex: 1 1 auto; min-width: 0; }

.navbar-wrapper ul li a {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    position: relative;
    padding: 8px 0;
    transition: color var(--transition-speed);
}

.navbar-wrapper ul li a:hover,
.navbar-wrapper ul li.active a {
    color: var(--text-primary);
}

.navbar-wrapper ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.navbar-wrapper ul li a:hover::after,
.navbar-wrapper ul li.active a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-vk {
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-speed);
}

.btn-vk:hover {
    background: var(--color-accent);
    color: #000;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}
.balance-nav { color: var(--color-accent) !important; }
.balance-nav:hover { color: #06111c !important; }

.public-nav-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 150px;
    margin-right: 8px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: var(--text-secondary);
}
.public-nav-search:focus-within { border-color: var(--border-hover); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .08); }
.public-nav-search input { width: 100%; min-height: 34px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 11px; }
.public-nav-search kbd { padding: 2px 5px; border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-secondary); font-size: 9px; }
.public-nav-results { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; padding: 5px; border: 1px solid var(--border-color); border-radius: 12px; background: rgba(8,14,25,.98); box-shadow: 0 16px 35px rgba(0,0,0,.3); }
.public-nav-results[hidden] { display: none; }
.public-nav-results a { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border-radius: 7px; color: var(--text-secondary); font-size: 11px; }
.public-nav-results a:hover { background: rgba(var(--color-accent-rgb), .1); color: var(--text-primary); }
.public-nav-results i { color: var(--color-accent); }

.navbar-mobile {
    display: none;
    color: var(--text-primary);
    font-size: 20px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    transition: transform .25s ease, background .25s ease;
}
.navbar-mobile:hover { background: rgba(var(--color-accent-rgb), .15); transform: rotate(8deg); }

/* Account navigation and authentication pages */
.auth-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.auth-link:hover,
.auth-account:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: rgba(var(--color-accent-rgb), 0.08);
}

.auth-link-primary {
    color: #000;
    border-color: var(--color-accent);
    background: var(--color-accent);
}
.notification-nav { position: relative; min-width: 40px; justify-content: center; padding-inline: 10px; }
.notification-nav b { position: absolute; top: -5px; right: -5px; min-width: 17px; padding: 1px 4px; border-radius: 9px; background: #ff6a85; color: #fff; font-size: 9px; line-height: 15px; text-align: center; }

.auth-link-primary:hover {
    color: #000;
    box-shadow: var(--shadow-glow);
}

.auth-logout-form {
    margin: 0;
}

.auth-logout {
    font: inherit;
}

.auth-page {
    min-height: calc(100vh - 210px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 40px;
}

.auth-shell {
    width: 100%;
    max-width: 620px;
    padding: 0 24px;
}

.auth-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 44px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.17);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--color-accent-rgb), 0.1), rgba(255,255,255,0.018) 48%), var(--bg-card);
    box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-card::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    top: -110px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: .08;
    filter: blur(2px);
    pointer-events: none;
}

.auth-card-wide {
    max-width: 560px;
}

.email-confirm-card {
    max-width: 620px;
    padding: 38px 44px 42px;
    text-align: left;
}

.email-confirm-card.is-success {
    border-color: rgba(53, 211, 154, .28);
}

.email-confirm-card.is-error {
    border-color: rgba(255, 107, 134, .28);
}

.email-confirm-topline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.email-confirm-icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    font-size: 20px;
}

.email-confirm-card.is-success .email-confirm-icon {
    color: #63e6ad;
    background: rgba(53, 211, 154, .14);
    box-shadow: 0 0 32px rgba(53, 211, 154, .14);
}

.email-confirm-card.is-error .email-confirm-icon {
    color: #ff9eb3;
    background: rgba(255, 107, 134, .14);
}

.email-confirm-status {
    margin: 28px 0 0;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.email-confirm-card.is-success .email-confirm-status {
    color: #63e6ad;
}

.email-confirm-card.is-error .email-confirm-status {
    color: #ff9eb3;
}

.email-confirm-secondary-link {
    display: block;
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.email-confirm-secondary-link:hover {
    color: var(--color-accent);
}

.email-confirm-help {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 107, 134, .16);
    border-radius: 12px;
    color: var(--text-secondary);
    background: rgba(255, 107, 134, .055);
    font-size: 12px;
    line-height: 1.5;
}

.email-confirm-help i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #ff9eb3;
}

.mint-card-subtitle {
    margin: -8px 0 22px;
    color: var(--text-secondary);
    font-size: 13px;
}

.mint-deck {
    position: relative;
    display: block;
    width: min(220px, 72%);
    height: 230px;
    margin: 28px auto 30px;
    border: 0;
    background: transparent;
    cursor: pointer;
    perspective: 900px;
}

.mint-deck:disabled {
    cursor: not-allowed;
    filter: grayscale(.55);
    opacity: .55;
}

.mint-deck-card,
.mint-deck-back {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(var(--color-accent-rgb), .45);
    border-radius: 20px;
    background: linear-gradient(145deg, #123b59, #071523 70%);
    box-shadow: 0 18px 35px rgba(0, 174, 255, .16), inset 0 1px 0 rgba(255,255,255,.1);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.mint-deck-back::before,
.mint-deck-card-main::before {
    content: 'вњ¦';
    position: absolute;
    inset: 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(94,231,255,.28);
    border-radius: 14px;
    color: #5ee7ff;
    font-size: 46px;
    text-shadow: 0 0 22px rgba(94,231,255,.8);
}

.mint-deck-back {
    transform: translate(16px, 13px) rotate(7deg);
    opacity: .6;
}

.mint-deck-card-a {
    transform: translate(9px, 8px) rotate(3deg);
    opacity: .78;
}

.mint-deck-card-b {
    transform: translate(-8px, 5px) rotate(-4deg);
    opacity: .7;
}

.mint-deck-card-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #f4fbff;
    background: radial-gradient(circle at 50% 35%, rgba(94,231,255,.3), transparent 38%), linear-gradient(145deg, #124f72, #081625 72%);
    z-index: 2;
}

.mint-deck-card-main i {
    position: relative;
    color: #ffd166;
    font-size: 42px;
    text-shadow: 0 0 24px rgba(255,209,102,.65);
    z-index: 1;
}

.mint-deck-card-main strong,
.mint-deck-card-main small {
    position: relative;
    z-index: 1;
}

.mint-deck-card-main strong {
    letter-spacing: .2em;
    font-size: 16px;
}

.mint-deck-card-main small {
    color: #8edff3;
    font-size: 9px;
    letter-spacing: .18em;
}

.mint-deck-card-a::after,
.mint-deck-card-b::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(94, 231, 255, .58);
    font-size: 42px;
    text-shadow: 0 0 20px rgba(94, 231, 255, .55);
}

.mint-deck-card-a::after {
    content: 'вњ§';
    transform: rotate(-14deg);
}

.mint-deck-card-b::after {
    content: 'в—‡';
    color: rgba(255, 209, 102, .52);
    font-size: 48px;
    text-shadow: 0 0 20px rgba(255, 209, 102, .42);
    transform: rotate(14deg);
}

.mint-deck:hover:not(:disabled) .mint-deck-card-main {
    transform: translateY(-8px) rotateX(5deg) rotateY(-5deg);
    box-shadow: 0 25px 48px rgba(0, 174, 255, .3), inset 0 1px 0 rgba(255,255,255,.15);
}

.mint-deck.is-opening .mint-deck-card-main {
    transform: translateY(-18px) rotateY(90deg) scale(1.04);
}

.mint-deck.is-opening .mint-deck-card-a {
    transform: translate(-80px, 2px) rotate(-14deg);
}

.mint-deck.is-opening .mint-deck-card-b {
    transform: translate(80px, 4px) rotate(14deg);
}

.mint-deck.is-opened {
    display: none;
}

.mint-choice-grid.is-hidden {
    display: none;
}

.mint-choice-grid.is-revealing {
    animation: mint-deck-reveal .72s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mint-deck-reveal {
    from { opacity: 0; transform: translateY(18px) scale(.92) rotateX(12deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

.mint-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.mint-choice-card {
    position: relative;
    min-height: 142px;
    padding: 17px 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-accent-rgb), .16);
    border-radius: 18px;
    color: var(--text-primary);
    background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .14), rgba(255,255,255,.025));
    cursor: pointer;
    text-align: center;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.mint-choice-card::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    right: -35px;
    top: -35px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: .12;
    filter: blur(2px);
}

.mint-choice-card:hover:not(:disabled) {
    transform: translateY(-4px);
    border-color: rgba(var(--color-accent-rgb), .55);
    box-shadow: 0 14px 30px rgba(0, 174, 255, .16);
}

.mint-choice-card.is-selected {
    border-color: var(--color-accent);
    background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .3), rgba(255,255,255,.05));
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .16), 0 16px 34px rgba(0, 174, 255, .2);
}

.mint-choice-grid.is-shuffling .mint-choice-card {
    animation: mint-card-shuffle .18s ease-in-out var(--shuffle-delay, 0ms) both;
    pointer-events: none;
}

.mint-choice-grid.is-shuffling .mint-choice-card:nth-child(3n + 1) {
    transform: rotate(-3deg) translateY(-4px);
}

.mint-choice-grid.is-shuffling .mint-choice-card:nth-child(3n + 2) {
    transform: rotate(2deg) translateY(4px);
}

.mint-choice-grid.is-shuffling .mint-choice-card:nth-child(3n) {
    transform: rotate(-1deg) translateY(2px);
}

.mint-choice-card.is-winner {
    border-color: #ffd166;
    background: linear-gradient(145deg, rgba(255, 209, 102, .25), rgba(255,255,255,.06));
    box-shadow: 0 0 0 2px rgba(255, 209, 102, .2), 0 0 34px rgba(255, 209, 102, .28);
    animation: mint-card-winner .65s ease both;
}

.mint-choice-card.is-winner .mint-choice-symbol {
    color: #ffd166;
    border-color: rgba(255, 209, 102, .55);
    background: rgba(255, 209, 102, .18);
}

@keyframes mint-card-shuffle {
    0% { opacity: .72; transform: scale(.96) rotate(0); }
    55% { opacity: 1; transform: scale(1.04) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes mint-card-winner {
    0% { transform: scale(.92); }
    55% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.mint-choice-card:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.mint-choice-number {
    position: absolute;
    top: 10px;
    left: 12px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.mint-choice-symbol {
    display: grid;
    width: 46px;
    height: 46px;
    margin: 5px auto 10px;
    place-items: center;
    border: 1px solid rgba(var(--color-accent-rgb), .3);
    border-radius: 14px;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), .12);
    font-size: 19px;
}

.mint-choice-card strong,
.mint-choice-card small {
    display: block;
}

.mint-choice-card strong {
    font-size: 11px;
    letter-spacing: .08em;
}

.mint-choice-card small {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 10px;
}

@media (max-width: 560px) {
    .mint-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mint deck presentation overrides. Keep the deck and card stages visually separate. */
.mint-page .mint-new-console {
    min-height: 690px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(94, 231, 255, .2);
    background:
        radial-gradient(circle at 50% 35%, rgba(0, 174, 255, .1), transparent 18rem),
        linear-gradient(150deg, rgba(13, 37, 59, .98), rgba(5, 15, 27, .98));
}

.mint-page .mint-console-head {
    align-items: flex-start;
    margin-bottom: 8px;
}

.mint-page .mint-console-head h2 {
    margin-top: 7px;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.05em;
}

.mint-page .mint-card-subtitle {
    max-width: 620px;
    margin: 0 auto;
    color: #a9c0d1;
    text-align: center;
    line-height: 1.6;
}

.mint-page .mint-deck {
    width: 190px;
    height: 260px;
    margin: 34px auto 28px;
}

.mint-page .mint-deck-card,
.mint-page .mint-deck-back {
    border-radius: 24px;
}

.mint-page .mint-deck-card-main {
    background:
        linear-gradient(135deg, rgba(94, 231, 255, .18), transparent 44%),
        linear-gradient(155deg, #173f61, #071321 72%);
}

.mint-page .mint-choice-grid {
    width: min(590px, 100%);
    margin: 28px auto 24px;
    gap: 14px;
}

.mint-page .mint-choice-grid.is-hidden {
    display: none !important;
}

.mint-page .mint-choice-card {
    min-height: 138px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(25, 76, 108, .8), rgba(5, 18, 31, .96));
}

.mint-page .mint-choice-card strong {
    color: #edfaff;
}

.mint-page .mint-choice-card small {
    color: #8faabb;
}

.mint-page .mint-open-button {
    width: min(420px, 100%);
    margin: 0 auto;
    border-radius: 15px;
    font-weight: 900;
    letter-spacing: .04em;
}

.mint-page .mint-countdown {
    width: min(420px, 100%);
    margin: 18px auto 0;
}

.mint-page .mint-result {
    width: min(590px, 100%);
    margin: 24px auto 0;
    min-height: 142px;
    border-color: rgba(255, 209, 102, .2);
    background: linear-gradient(145deg, rgba(255, 209, 102, .07), rgba(4, 16, 29, .82));
}

.mint-page .mint-result strong {
    color: #ffd166;
    text-shadow: 0 0 24px rgba(255, 209, 102, .45);
}

.mint-page .mint-new-status {
    width: min(590px, 100%);
    margin: 12px auto 0;
    text-align: center;
}

@media (max-width: 560px) {
    .mint-page .mint-new-console {
        min-height: 620px;
        padding: 22px 16px;
    }

    .mint-page .mint-deck {
        width: 160px;
        height: 218px;
    }

    .mint-page .mint-choice-grid {
        gap: 9px;
    }

    .mint-page .mint-choice-card {
        min-height: 118px;
        padding: 12px 8px;
    }
}

@media (max-width: 560px) {
    .email-confirm-card {
        padding: 30px 24px 32px;
    }

    .email-confirm-card h1 {
        font-size: clamp(26px, 8vw, 34px);
    }
}

.account-shell {
    max-width: 1180px;
}

.account-card {
    max-width: none;
    padding: 46px 52px;
}

.auth-eyebrow {
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.auth-card h1 {
    margin: 12px 0 8px;
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.15;
}

.auth-lead {
    margin: 0 0 28px;
    color: var(--text-secondary);
    font-size: 14px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.auth-form label {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.auth-input {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.auth-input:focus-within {
    border-color: var(--color-accent);
    background: rgba(255,255,255,.045);
    box-shadow: 0 0 24px rgba(var(--color-accent-rgb), .14);
}

.auth-input > i {
    width: 22px;
    color: var(--color-accent);
    font-size: 15px;
}

.auth-input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    border: 0;
    border-radius: 14px;
    background: var(--color-accent);
    color: #000;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(var(--color-accent-rgb), .23);
}

.auth-submit:hover {
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(var(--color-accent-rgb), .38);
}

.auth-secondary {
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 800;
    cursor: pointer;
}

.auth-secondary:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.auth-switch {
    margin: 24px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.auth-switch a {
    color: var(--color-accent);
    font-weight: 800;
}

.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 13px;
}

.auth-alert-error {
    border: 1px solid rgba(239,68,68,.25);
    background: rgba(239,68,68,.09);
    color: #fca5a5;
}

.auth-alert-success {
    border: 1px solid rgba(16,185,129,.25);
    background: rgba(16,185,129,.09);
    color: #6ee7b7;
}

.account-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0;
}

.account-details > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.account-details span {
    color: var(--text-secondary);
    font-size: 12px;
}

.account-details strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    text-overflow: ellipsis;
}

.account-actions {
    display: flex;
    gap: 12px;
}

.account-actions .auth-submit {
    width: auto;
    flex: 1;
    margin-top: 0;
}

.account-actions form {
    display: flex;
}

@media (max-width: 768px) {
    .account-shell {
        padding: 0 14px;
    }

    .account-card {
        padding: 30px 22px;
    }

    .account-details {
        grid-template-columns: 1fr;
    }
}

.support-shell { max-width: 1080px; }
.support-card { max-width: none; overflow: hidden; }
.support-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 4px 2px 0; }
.support-hero-copy { min-width: 0; }
.support-hero h1 { margin: 10px 0 7px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; }
.support-hero .auth-lead { max-width: 620px; margin-bottom: 0; }
.support-hero-status { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; min-width: 174px; padding: 12px 14px; border: 1px solid rgba(114,224,163,.24); border-radius: 14px; background: rgba(16,185,129,.08); }
.support-hero-status strong { color: #9bf0c7; font-size: 12px; }
.support-hero-status small { grid-column: 2; color: var(--text-secondary); font-size: 10px; }
.support-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #72e0a3; box-shadow: 0 0 0 5px rgba(114,224,163,.12); }
.support-info-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; padding: 12px; border: 1px solid var(--border-color); border-radius: 16px; background: rgba(255,255,255,.025); }
.support-info-strip > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 8px; }
.support-info-strip strong, .support-info-strip small { display: block; }
.support-info-strip strong { color: var(--text-primary); font-size: 11px; }
.support-info-strip small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; line-height: 1.35; }
.support-info-icon { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; color: var(--color-accent); background: rgba(var(--color-accent-rgb),.1); }
.support-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; margin-top: 24px; align-items: start; }
.support-section, .support-thread { padding: 20px; border: 1px solid var(--border-color); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: 0 18px 36px rgba(0,0,0,.12); }
.support-section-head, .support-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-section h2, .support-thread h2 { margin: 0; font-size: 18px; }
.support-section-head > span { min-width: 28px; padding: 3px 8px; border-radius: 99px; background: rgba(var(--color-accent-rgb),.15); color: var(--color-accent); text-align: center; font-weight: 800; }
.support-list-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: var(--text-secondary); font-size: 11px; }
.support-list-summary i { color: #72e0a3; font-size: 8px; }
.support-ticket-list { display: grid; gap: 8px; margin-top: 16px; }
.support-ticket { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: rgba(0,0,0,.16); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.support-ticket:hover, .support-ticket.is-selected { border-color: var(--border-hover); background: rgba(var(--color-accent-rgb),.08); }
.support-ticket:hover { transform: translateX(2px); }
.support-ticket-icon { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--color-accent); background: rgba(var(--color-accent-rgb),.1); }
.support-ticket-copy { min-width: 0; flex: 1; }
.support-ticket strong { display: block; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.support-ticket small, .support-message-meta small, .support-kicker { color: var(--text-secondary); font-size: 11px; }
.support-ticket small .fa { color: var(--color-success); font-size: 8px; }
.support-ticket small b { color: var(--text-secondary); font-weight: 400; }
.support-ticket-arrow { color: var(--text-secondary); }
.support-count { min-width: 28px !important; }
.support-empty { display: grid; justify-items: center; gap: 6px; padding: 32px 14px 18px; text-align: center; }
.support-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 15px; color: var(--color-accent); background: rgba(var(--color-accent-rgb),.1); font-size: 18px; }
.support-empty strong { color: var(--text-primary); }
.support-empty p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.support-empty-link { margin-top: 6px; color: var(--color-accent); font-size: 12px; font-weight: 800; }
.support-thread { grid-column: 1 / -1; }
.support-thread-head { margin-bottom: 18px; }
.support-kicker { display: block; margin-bottom: 4px; color: var(--color-accent); }
.support-status { padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--text-secondary); font-size: 11px; font-weight: 800; }
.support-status.is-open { background: rgba(16,185,129,.12); color: #72e0a3; }
.support-message { margin: 10px 0; padding: 14px; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(0,0,0,.15); }
.support-message-meta { display: flex; justify-content: space-between; gap: 10px; }
.support-message p { margin: 9px 0 0; white-space: normal; }
.support-kicker { text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.support-compose-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--color-accent); background: rgba(var(--color-accent-rgb), .12); }
.support-form { margin-top: 18px; }
.support-form label { display: flex; align-items: center; gap: 6px; }
.support-form label i { color: var(--color-accent); }
.support-form .auth-input { margin-bottom: 6px; }
.support-form select { display: block; width: 100%; height: 48px; margin: 0 0 14px; padding: 0 42px 0 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: #111923; color: var(--text-primary); font: inherit; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%), linear-gradient(135deg, var(--color-accent) 50%, transparent 50%); background-position: calc(100% - 21px) 20px, calc(100% - 15px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.support-form select:focus { border-color: var(--color-accent); background-color: #162433; box-shadow: 0 0 24px rgba(var(--color-accent-rgb), .14); outline: 0; }
.support-form select option { background: #111923; color: var(--text-primary); }
.support-form textarea { display: block; width: 100%; min-height: 142px; margin: 0; padding: 15px 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background-color: #111923; background-image: linear-gradient(145deg, rgba(var(--color-accent-rgb),.06), rgba(255,255,255,.015)); color: var(--text-primary); font: inherit; font-size: 13px; line-height: 1.6; box-sizing: border-box; appearance: none; resize: vertical; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.support-form textarea::placeholder, .support-form input::placeholder { color: rgba(148,153,171,.7); }
.support-form textarea:focus { border-color: var(--color-accent); background: rgba(255,255,255,.045); box-shadow: 0 0 24px rgba(var(--color-accent-rgb), .14); outline: 0; }
.support-form-hint { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; margin-top: 8px; color: var(--text-secondary); font-size: 11px; }
.support-form-hint span:last-child { padding: 3px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 99px; color: var(--text-secondary); white-space: nowrap; }
.support-form-hint i { color: #72e0a3; }
.support-form .auth-submit { margin-top: 16px; }
.admin-support-page { min-height: calc(100vh - 170px); padding: 40px 20px 70px; }
.admin-support-wrap { max-width: 1120px; margin: 0 auto; }
.admin-support-back { display: inline-flex; gap: 8px; align-items: center; color: var(--text-secondary); margin-bottom: 28px; }
.admin-support-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 24px; }
.admin-support-kicker { color: var(--color-accent); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 800; }
.admin-support-head h1 { margin: 8px 0 5px; font-size: clamp(28px, 4vw, 42px); }
.admin-support-head p { margin: 0; color: var(--text-secondary); }
.admin-support-count { padding: 10px 14px; border: 1px solid rgba(var(--color-accent-rgb),.25); border-radius: 99px; color: var(--color-accent); white-space: nowrap; }
.admin-support-flash { margin-bottom: 18px; padding: 12px 15px; border-radius: 12px; background: rgba(16,185,129,.12); color: #72e0a3; }
.admin-support-filters { display: flex; align-items: flex-end; gap: 12px; padding: 15px; margin-bottom: 18px; border: 1px solid var(--border-color); border-radius: 16px; background: rgba(255,255,255,.03); }
.admin-support-filters label { flex: 1; margin: 0; }
.admin-support-filters select,.admin-ticket-controls select,.admin-ticket-controls input { margin-top: 6px; }
.admin-support-filters button,.admin-ticket-controls button,.admin-ticket-reply button { height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: var(--color-accent); color: #03111b; font-weight: 800; cursor: pointer; }
.admin-ticket-list { display: grid; gap: 16px; }
.admin-ticket { padding: 22px; border: 1px solid var(--border-color); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); }
.admin-ticket-top { display: flex; justify-content: space-between; gap: 18px; }
.admin-ticket-id,.admin-support-head p,.admin-ticket-top p { color: var(--text-secondary); font-size: 12px; }
.admin-ticket h2 { margin: 4px 0; font-size: 20px; }
.admin-ticket-top p { margin: 0; }
.admin-ticket-status { padding: 6px 11px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--text-secondary); font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-ticket-status.is-open { background: rgba(16,185,129,.14); color: #72e0a3; }
.admin-ticket-controls { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 9px; margin-top: 18px; }
.admin-ticket-controls select,.admin-ticket-controls input { margin-top: 0; }
.admin-ticket-controls button { height: auto; }
.admin-ticket-messages { display: grid; gap: 8px; margin-top: 15px; }
.admin-ticket-messages > div { padding: 13px 15px; border-radius: 13px; background: rgba(0,0,0,.18); }
.admin-ticket-messages small { float: right; color: var(--text-secondary); font-size: 11px; }
.admin-ticket-messages p { margin: 8px 0 0; white-space: pre-wrap; }
.admin-ticket-reply { display: flex; gap: 10px; margin-top: 15px; }
.admin-ticket-reply textarea { min-height: 72px; flex: 1; }
.admin-ticket-reply button { align-self: stretch; }
@media (max-width: 650px) { .admin-support-head { align-items: flex-start; flex-direction: column; } .admin-support-filters,.admin-ticket-reply { display: grid; grid-template-columns: 1fr; } .admin-ticket-controls { grid-template-columns: 1fr; } .admin-ticket-controls button,.admin-ticket-reply button { min-height: 44px; } }
@media (max-width: 700px) { .support-layout { grid-template-columns: 1fr; } .support-thread { grid-column: auto; } .support-section, .support-thread { padding: 16px; } }
@media (max-width: 430px) { .support-form-hint { align-items: flex-start; flex-direction: column; } }

/* Support workspace refresh */
.support-shell { max-width: 1120px; }
.support-card { position: relative; overflow: hidden; padding: 30px; border: 1px solid rgba(var(--color-accent-rgb), .16); background: linear-gradient(145deg, rgba(14, 25, 42, .94), rgba(7, 14, 26, .96)); box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.support-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent), #8b7cff, transparent); opacity: .8; }
.support-card > .auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(var(--color-accent-rgb), .2); border-radius: 999px; background: rgba(var(--color-accent-rgb), .08); }
.support-card > h1 { margin-top: 16px; letter-spacing: -.045em; }
.support-layout { gap: 16px; margin-top: 28px; }
.support-section, .support-thread { border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.028); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.support-section { padding: 20px; }
.support-section-head { align-items: center; }
.support-section-head h2 { letter-spacing: -.035em; }
.support-section-head > span:last-child { min-width: 28px; padding: 4px 8px; border: 1px solid rgba(var(--color-accent-rgb), .2); border-radius: 999px; color: var(--color-accent); background: rgba(var(--color-accent-rgb), .08); text-align: center; }
.support-ticket { position: relative; gap: 7px; padding: 15px; border-color: rgba(255,255,255,.06); background: rgba(3,10,20,.34); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.support-ticket::after { content: '›'; position: absolute; right: 14px; top: 50%; color: var(--text-secondary); font-size: 20px; transform: translateY(-50%); }
.support-ticket strong { padding-right: 20px; }
.support-ticket:hover, .support-ticket.is-selected { border-color: rgba(var(--color-accent-rgb), .42); background: linear-gradient(100deg, rgba(var(--color-accent-rgb), .12), rgba(var(--color-accent-rgb), .035)); transform: translateX(3px); }
.support-ticket small .fa { color: var(--color-success); }
.support-new { background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .08), rgba(255,255,255,.025)); }
.support-compose-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(var(--color-accent-rgb), .25); border-radius: 12px; color: var(--color-accent); background: rgba(var(--color-accent-rgb), .1); }
.support-form { margin-top: 20px; }
.support-form label { margin-top: 14px; color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.support-form label:first-of-type { margin-top: 0; }
.support-form .auth-input, .support-form select, .support-form textarea { border-radius: 12px; }
.support-form .auth-input { margin-top: 7px; }
.support-form textarea { min-height: 132px; }
.support-form .auth-submit { width: 100%; min-height: 48px; border-radius: 12px; }
.support-thread { grid-column: 1 / -1; padding: 22px; }
.support-thread-head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.support-thread-head h2 { margin-top: 4px; letter-spacing: -.035em; }
.support-message { margin-top: 10px; padding: 15px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.035); }
.support-message:first-of-type { border-color: rgba(var(--color-accent-rgb), .2); }
.support-message-meta { display: flex; justify-content: space-between; gap: 10px; }
.support-message p { margin-top: 8px; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.support-thread > .auth-form { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.support-thread > .auth-form textarea { min-height: 110px; border-radius: 12px; }
.support-thread > .auth-form .auth-submit { width: 100%; }

/* Ticket center refresh */
.support-card {
    background: linear-gradient(145deg, #111a29, #0d1522);
    border-color: #24364b;
    box-shadow: 0 18px 55px rgba(2, 5, 11, .4);
}
.support-layout {
    gap: 20px;
}
.support-section, .support-thread {
    border-color: #24364b;
    border-radius: 16px;
    background: linear-gradient(145deg, #0e1b2b, #0b1421);
    box-shadow: 0 12px 28px rgba(2, 5, 11, .25);
}
.support-ticket {
    padding: 14px 15px;
    border: 1px solid #24364b;
    background: #09111d;
}
.support-ticket:hover, .support-ticket.is-selected {
    border-color: rgba(53, 200, 255, .55);
    background: #102238;
}
.support-ticket small {
    color: #8fa4ba;
}
.support-message {
    border-color: #24364b;
    background: #09111d;
}
.support-message-meta strong {
    color: #eff9ff;
}
.support-message p {
    color: #b5c7da;
}

.auth-footer {
    margin-top: 20px;
}

.orders-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.orders-filters { display:grid; grid-template-columns:1fr 190px auto; gap:10px; margin:22px 0; }
.orders-filters input,.orders-filters select { min-height:46px; border:1px solid var(--border-color); border-radius:12px; background:rgba(255,255,255,.03); color:var(--text-primary); padding:0 14px; }
.orders-list { display:grid; gap:10px; }
.customer-order { display:flex; justify-content:space-between; gap:18px; padding:16px; border:1px solid var(--border-color); border-radius:16px; background:rgba(255,255,255,.025); }
.customer-order-main,.customer-order-meta { display:flex; align-items:center; gap:12px; }
.customer-order-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--color-accent); background:rgba(var(--color-accent-rgb),.1); }
.customer-order h2 { margin:0 0 5px; font-size:15px; }
.customer-order p { margin:0; color:var(--text-secondary); font-size:11px; }
.customer-order-meta { flex-wrap:wrap; justify-content:flex-end; }
.customer-order-meta > strong { white-space:nowrap; }
.order-status { padding:5px 9px; border-radius:99px; font-size:10px; font-weight:800; white-space:nowrap; }
.order-status-pending { color:#f7c86b; background:rgba(245,158,11,.13); }
.order-status-fulfilled { color:#72e0a3; background:rgba(16,185,129,.13); }
.order-status-error { color:#ff9d9d; background:rgba(239,68,68,.13); }
.order-error { flex-basis:100%; color:#ff9d9d; text-align:right; max-width:280px; }
.customer-order-actions { display:flex; gap:10px; flex-basis:100%; justify-content:flex-end; font-size:12px; }
.customer-order-actions a { color:var(--color-accent); }
.orders-empty { display:grid; place-items:center; gap:8px; padding:54px 20px; color:var(--text-secondary); text-align:center; }
.orders-empty i { font-size:30px; color:var(--color-accent); }
.orders-empty strong { color:var(--text-primary); }
.account-security-form { max-width: 520px; margin: 18px 0 22px; }
.account-security-form .auth-submit { width: auto; }
@media (max-width:700px) { .orders-heading,.customer-order { flex-direction:column; } .orders-filters { grid-template-columns:1fr; } .customer-order-meta { justify-content:flex-start; } .order-error { text-align:left; } .customer-order-actions { justify-content:flex-start; } }
@media print { .header,.footer,.orders-filters,.orders-heading .btn { display:none !important; } .auth-page { padding:0; } .customer-order:not(.is-receipt) { display:none; } }

/* Orders 2.0 */
.orders-page { padding-top: 38px; }
.orders-shell { width: min(1120px, 100%); margin: 0 auto; }
.orders-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; padding:30px; border:1px solid rgba(var(--color-accent-rgb),.18); border-radius:24px; background: radial-gradient(circle at 92% 0%, rgba(var(--color-accent-rgb),.18), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }
.orders-overline { display:inline-flex; align-items:center; gap:8px; color:var(--color-accent); font-size:10px; font-weight:800; letter-spacing:.14em; }
.orders-hero h1 { margin:10px 0 8px; font-size:clamp(30px,5vw,48px); letter-spacing:-.06em; }
.orders-hero p { max-width:540px; margin:0; color:var(--text-secondary); }
.orders-primary-action,.orders-filter-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid rgba(var(--color-accent-rgb),.4); border-radius:12px; background:var(--color-accent); color:#04101a; font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }
.orders-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.orders-stat { position:relative; min-height:92px; padding:18px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }
.orders-stat span { display:block; color:var(--text-secondary); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.orders-stat strong { display:block; margin-top:10px; font-size:24px; letter-spacing:-.05em; }
.orders-stat > i { position:absolute; top:18px; right:18px; color:var(--color-accent); opacity:.7; }
.orders-stat-success > i { color:#6de0a0; }.orders-stat-pending > i { color:#f5c46b; }.orders-stat-spent > i { color:#bd9bff; }
.orders-panel { padding:24px; border:1px solid var(--line); border-radius:22px; background:rgba(5,14,25,.72); box-shadow:0 18px 50px rgba(0,0,0,.12); }
.orders-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.orders-panel-head h2 { margin:0 0 5px; font-size:20px; letter-spacing:-.04em; }.orders-panel-head span { color:var(--text-secondary); font-size:12px; }
.orders-clear { color:var(--text-secondary); font-size:12px; text-decoration:none; }.orders-clear:hover { color:var(--color-accent); }
.orders-toolbar { display:grid; grid-template-columns:1fr 180px auto; gap:10px; margin:20px 0; }
.orders-toolbar input,.orders-toolbar select { width:100%; min-height:44px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.045); color:var(--text-primary); padding:0 13px; }
.orders-search { position:relative; display:flex; align-items:center; }.orders-search i { position:absolute; left:14px; color:var(--text-secondary); pointer-events:none; }.orders-search input { padding-left:38px !important; }
.orders-filter-button { border:0; cursor:pointer; }
.orders-feed { display:grid; gap:10px; }.order-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:start; padding:17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); transition:.2s ease; }.order-row:hover,.order-row.is-receipt { border-color:rgba(var(--color-accent-rgb),.5); background:rgba(var(--color-accent-rgb),.045); }
.order-row-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:var(--color-accent); background:rgba(var(--color-accent-rgb),.1); }.order-row-fulfilled .order-row-icon { color:#6de0a0; background:rgba(16,185,129,.12); }.order-row-error .order-row-icon { color:#ff9c9c; background:rgba(239,68,68,.12); }.order-row-pending .order-row-icon { color:#f5c46b; background:rgba(245,158,11,.12); }
.order-row-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.order-row-title h3 { margin:0; font-size:15px; }.order-row-status { padding:5px 9px; border-radius:999px; color:var(--color-accent); background:rgba(var(--color-accent-rgb),.1); font-size:10px; font-weight:800; }.order-row-fulfilled .order-row-status { color:#6de0a0; background:rgba(16,185,129,.1); }.order-row-error .order-row-status { color:#ff9c9c; background:rgba(239,68,68,.1); }
.order-row-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; color:var(--text-secondary); font-size:11px; }.order-row-meta i { margin-right:4px; color:var(--color-accent); }.order-row-description { margin:8px 0 0; color:var(--text-secondary); font-size:11px; }.order-row-error { margin-top:9px; color:#ff9c9c; font-size:11px; }
.order-row-side { display:flex; flex-direction:column; align-items:flex-end; gap:14px; }.order-row-side > strong { font-size:16px; white-space:nowrap; }.order-row-actions { display:flex; gap:5px; }.order-row-actions a { padding:6px 8px; border:1px solid transparent; border-radius:8px; color:var(--color-accent); font-size:11px; text-decoration:none; white-space:nowrap; }.order-row-actions a:hover { border-color:var(--line); background:rgba(255,255,255,.05); }
.orders-empty-new { display:grid; justify-items:center; gap:8px; padding:62px 20px 44px; text-align:center; }.orders-empty-icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:8px; border-radius:20px; color:var(--color-accent); background:rgba(var(--color-accent-rgb),.1); font-size:25px; }.orders-empty-new h3 { margin:0; font-size:18px; }.orders-empty-new p { margin:0 0 12px; color:var(--text-secondary); font-size:12px; }
@media (max-width:800px) { .orders-stats { grid-template-columns:repeat(2,1fr); }.orders-hero { align-items:flex-start; flex-direction:column; }.orders-toolbar { grid-template-columns:1fr 1fr; }.orders-toolbar .orders-search { grid-column:1/-1; }.orders-filter-button { grid-column:2; } }
@media (max-width:600px) { .orders-page { padding-top:20px; }.orders-hero,.orders-panel { padding:18px; border-radius:18px; }.orders-stats { gap:8px; }.orders-stat { min-height:78px; padding:13px; }.orders-stat strong { font-size:18px; }.orders-stat > i { top:14px; right:13px; }.order-row { grid-template-columns:38px minmax(0,1fr); padding:13px; }.order-row-icon { width:38px; height:38px; }.order-row-side { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; }.order-row-actions { flex-wrap:wrap; }.orders-toolbar { grid-template-columns:1fr; }.orders-toolbar .orders-search,.orders-filter-button { grid-column:auto; }.orders-filter-button { width:100%; } }
@media print { .orders-hero,.orders-stats,.orders-toolbar,.orders-panel-head { display:none !important; }.orders-panel { border:0; padding:0; }.order-row:not(.is-receipt) { display:none; } }
.receipt-card { width:min(680px,100%); margin:20px auto; padding:28px; border:1px solid rgba(var(--color-accent-rgb),.24); border-radius:24px; background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.receipt-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:30px; }.receipt-back,.receipt-print { display:inline-flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:12px; text-decoration:none; }.receipt-back:hover { color:var(--color-accent); }.receipt-print { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.04); color:var(--color-accent); cursor:pointer; }
.receipt-brand { display:flex; align-items:center; gap:12px; padding-bottom:24px; border-bottom:1px dashed var(--line); }.receipt-brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#06151a; background:var(--color-accent); }.receipt-brand span:not(.receipt-brand-mark) { display:block; color:var(--text-secondary); font-size:9px; font-weight:800; letter-spacing:.14em; }.receipt-brand strong { display:block; margin-top:3px; color:var(--text-primary); font-size:18px; }
.receipt-success { display:flex; align-items:center; gap:12px; margin:24px 0; padding:14px; border-radius:13px; background:rgba(16,185,129,.09); color:#71e0a0; }.receipt-success > i { font-size:22px; }.receipt-success strong,.receipt-success span { display:block; }.receipt-success strong { font-size:14px; }.receipt-success span { margin-top:3px; color:var(--text-secondary); font-size:11px; }
.receipt-product,.receipt-total { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }.receipt-product { padding:18px 0; border-bottom:1px solid var(--line); }.receipt-product span,.receipt-total span { display:block; color:var(--text-secondary); font-size:11px; }.receipt-product strong { font-size:17px; }.receipt-product > strong { white-space:nowrap; }.receipt-details { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; }.receipt-details div { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }.receipt-details dt { color:var(--text-secondary); font-size:10px; }.receipt-details dd { margin:5px 0 0; color:var(--text-primary); font-size:12px; overflow-wrap:anywhere; }.receipt-total { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }.receipt-total strong { color:var(--color-accent); font-size:24px; letter-spacing:-.05em; }.receipt-error { display:flex; gap:10px; margin-top:16px; padding:12px; border:1px solid rgba(239,68,68,.2); border-radius:10px; background:rgba(239,68,68,.08); color:#ff9d9d; font-size:11px; }.receipt-error strong,.receipt-error span { display:block; }.receipt-error span { margin-top:3px; color:#ffb8b8; }.receipt-footer { margin-top:26px; padding-top:18px; border-top:1px dashed var(--line); color:var(--text-secondary); font-size:10px; line-height:1.6; text-align:center; }
.orders-page.has-receipt > .orders-shell > section:not(.receipt-card) { display:none; }
@media (max-width:600px) { .receipt-card { margin-top:8px; padding:18px; border-radius:18px; }.receipt-topbar { margin-bottom:22px; }.receipt-details { grid-template-columns:1fr; }.receipt-product strong { font-size:15px; }.receipt-total strong { font-size:20px; } }
@media print { body { background:#fff !important; }.orders-page.has-receipt { padding:0 !important; }.orders-page.has-receipt .orders-shell { width:100%; }.orders-page.has-receipt .receipt-card { width:100%; max-width:680px; margin:0 auto; padding:20px; border:0; box-shadow:none; background:#fff; color:#111; }.orders-page.has-receipt .receipt-topbar { display:none; }.orders-page.has-receipt .receipt-brand strong,.orders-page.has-receipt .receipt-product strong,.orders-page.has-receipt .receipt-details dd,.orders-page.has-receipt .receipt-total strong { color:#111; }.orders-page.has-receipt .receipt-brand span:not(.receipt-brand-mark),.orders-page.has-receipt .receipt-success span,.orders-page.has-receipt .receipt-product span,.orders-page.has-receipt .receipt-total span,.orders-page.has-receipt .receipt-details dt,.orders-page.has-receipt .receipt-footer { color:#555; }.orders-page.has-receipt .receipt-details div,.orders-page.has-receipt .receipt-product,.orders-page.has-receipt .receipt-total { border-color:#ddd; }.orders-page.has-receipt .receipt-success { background:#eefaf2; }.orders-page.has-receipt .receipt-error { background:#fff1f1; border-color:#f0cccc; color:#a22; } }

/* Mobile system: compact touch layout for every public page. */
@media (max-width: 767px) {
    html, body { width:100%; min-width:0; overflow-x:hidden; }
    body { padding-top:86px; }
    .header { top:10px; left:10px; right:10px; width:auto; margin:0; border-radius:17px; }
    .header > .container, .header .navbar { width:100%; }
    .header .navbar { height:64px; padding:0 14px; gap:10px; }
    .header .logo { min-width:0; max-width:calc(100% - 104px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:18px; }
    .header .logo-text { overflow:hidden; text-overflow:ellipsis; }
    .header .nav-actions { margin-left:auto; gap:7px; }
    .header .balance-nav { display:none; }
    .header .public-theme-toggle { display:none !important; }
    .header .navbar-mobile { display:grid !important; place-items:center; width:42px; height:42px; border:1px solid var(--border-color); border-radius:12px; background:rgba(255,255,255,.045); color:var(--text-primary); }
    .header .navbar-wrapper { top:0; left:0; right:auto; bottom:0; width:min(320px,88vw); min-height:100vh; padding:86px 16px 24px; border:0; border-right:1px solid rgba(145,190,222,.18); border-radius:0 22px 22px 0; background:linear-gradient(180deg,#0d1b2b,#06101c); box-shadow:22px 0 60px rgba(0,0,0,.36); overflow-y:auto; }
    .header .navbar-wrapper ul { display:grid !important; gap:5px; width:100%; }
    .header .navbar-wrapper ul li, .header .navbar-wrapper ul li a { width:100%; min-width:0; }
    .header .navbar-wrapper ul li a { display:flex; align-items:center; min-height:50px; gap:12px; padding:0 14px; border-radius:12px; font-size:14px; white-space:normal; }
    .header .navbar-wrapper ul li a span { display:block !important; overflow-wrap:anywhere; }
    .header .navbar-wrapper ul li a i { flex:0 0 20px; text-align:center; }
    .header .navbar-wrapper ul li.active a { color:#06131d; background:var(--color-accent); }
    .header .navbar-wrapper ul li a::after { display:none; }
    .public-nav-kicker { margin:0 12px 10px; font-size:10px; }
    .drawer-account { display:grid !important; gap:6px; margin-top:20px; padding-top:18px; }
    .drawer-account .auth-link, .drawer-account .auth-logout { min-height:48px; width:100%; }
    .container, .main-content, .auth-shell, .orders-shell, .support-shell, .account-shell { width:100%; max-width:none; padding-left:14px; padding-right:14px; }
    .hero-section, .main-content, .stats-section, .auth-page, .orders-page, .support-shell { padding-top:18px; }
    h1 { font-size:clamp(26px,8vw,36px); line-height:1.05; }
    .hero-content, .hero-section, .section-header, .orders-hero, .support-hero { min-width:0; }
    .hero-content { padding:24px 0; }
    .items, .product-grid, .catalog-grid { grid-template-columns:1fr !important; gap:12px; }
    .item-id, .product-card { min-width:0; width:100%; }
    .shop-toolbar, .catalog-toolbar, .orders-toolbar, .support-toolbar, .checkout-grid { grid-template-columns:1fr !important; width:100%; }
    .shop-search, .shop-sort, .shop-control, .choice-picker, .orders-search { width:100%; min-width:0; }
    .shop-sort, .shop-control, select, input, textarea, button { max-width:100%; }
    .tabs-wrapper, .account-overview, .orders-stats { grid-template-columns:1fr 1fr !important; }
    .tabs-wrapper > *, .account-overview > * { min-width:0; }
    .account-progress-head { display:grid; gap:8px; }
    .account-history div, .customer-order, .order-row { min-width:0; }
    .table-wrap, .orders-table-wrap, .log-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .footer-grid { grid-template-columns:1fr; gap:20px; }
    .footer { padding:32px 0 24px; }
}
@media (max-width: 420px) {
    .container, .main-content, .auth-shell, .orders-shell, .support-shell, .account-shell { padding-left:10px; padding-right:10px; }
    .header { left:7px; right:7px; }
    .header .navbar { padding-inline:10px; }
    .tabs-wrapper, .account-overview, .orders-stats { grid-template-columns:1fr !important; }
    .auth-card, .orders-panel, .orders-hero, .receipt-card { padding:15px; border-radius:16px; }
    .btn, .auth-submit, .orders-primary-action { width:100%; min-height:46px; }
}

/* Final mobile composition. The public shell becomes a top bar below 900px,
   so tablets do not accidentally receive the desktop left rail. */
@media (max-width: 900px) {
    html, body { min-width: 0 !important; width: 100% !important; overflow-x: hidden !important; }
    body { padding: 88px 0 0 !important; }
    body > .header {
        position: fixed !important;
        inset: 10px 12px auto !important;
        width: auto !important;
        height: 66px !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 18px !important;
        z-index: 1000 !important;
    }

    /* Unified cyber-glass motion layer */
    :root {
        --nx-purple: #b64cff;
        --nx-pink: #ff4fd8;
        --nx-cyan: #55e7ff;
        --nx-glow: 0 0 28px rgba(182, 76, 255, .26);
    }

    body.app-shell {
        background:
            radial-gradient(circle at 12% 8%, rgba(145, 33, 255, .2), transparent 31rem),
            radial-gradient(circle at 88% 18%, rgba(0, 179, 255, .12), transparent 28rem),
            linear-gradient(135deg, #090516 0%, #120728 48%, #050913 100%);
        background-attachment: fixed;
    }

    body.app-shell::before {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        content: '';
        opacity: .22;
        background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: linear-gradient(to bottom, #000, transparent 82%);
        animation: nx-grid-drift 22s linear infinite;
    }

    .app-sidebar,
    .app-topbar,
    .noxis-dashboard > *,
    .auth-card,
    .orders-panel,
    .support-panel,
    .wiki-card,
    .item-id,
    .product-card,
    .noxis-command-dialog {
        border-color: rgba(182, 76, 255, .28) !important;
        box-shadow: var(--nx-glow), inset 0 1px rgba(255,255,255,.08);
    }

    .app-sidebar {
        background: linear-gradient(180deg, rgba(27, 11, 53, .92), rgba(8, 7, 24, .94)) !important;
        backdrop-filter: blur(22px);
    }

    .app-topbar {
        background: rgba(13, 7, 31, .78) !important;
        backdrop-filter: blur(18px);
    }

    .app-nav a,
    .btn,
    .auth-submit,
    .product-buy,
    .hero-actions a {
        transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
    }

    .app-nav a:hover,
    .btn:hover,
    .auth-submit:hover,
    .product-buy:hover,
    .hero-actions a:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(182, 76, 255, .3), 0 0 0 1px rgba(255, 79, 216, .25);
    }

    .app-brand-mark,
    .noxis-eyebrow,
    .hero-badge,
    .noxis-live-badge {
        animation: nx-neon-breathe 3s ease-in-out infinite;
    }

    .hero-banner,
    .noxis-command-card,
    .orders-hero,
    .support-hero {
        position: relative;
        overflow: hidden;
    }

    .hero-banner::after,
    .noxis-command-card::after,
    .orders-hero::after,
    .support-hero::after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: '';
        opacity: .5;
        background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.1) 48%, transparent 62%);
        transform: translateX(-120%);
        animation: nx-scanline 8s ease-in-out infinite;
    }

    .item-id,
    .product-card,
    .noxis-server-card,
    .noxis-balance-card,
    .noxis-chart-card,
    .noxis-node-map,
    .orders-summary-card {
        transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease !important;
        animation: nx-card-in .7s both;
    }

    .item-id:hover,
    .product-card:hover,
    .noxis-server-card:hover,
    .noxis-balance-card:hover,
    .noxis-chart-card:hover,
    .noxis-node-map:hover,
    .orders-summary-card:hover {
        border-color: rgba(255, 79, 216, .65) !important;
        box-shadow: 0 18px 48px rgba(90, 21, 155, .34), 0 0 22px rgba(182, 76, 255, .2) !important;
    }

    @keyframes nx-grid-drift {
        from { background-position: 0 0, 0 0; }
        to { background-position: 0 54px, 54px 0; }
    }

    @keyframes nx-neon-breathe {
        0%, 100% { filter: drop-shadow(0 0 0 rgba(182,76,255,0)); }
        50% { filter: drop-shadow(0 0 12px rgba(182,76,255,.75)); }
    }

    @keyframes nx-scanline {
        0%, 22% { transform: translateX(-120%); }
        58%, 100% { transform: translateX(120%); }
    }

    @keyframes nx-card-in {
        from { opacity: 0; transform: translateY(18px) scale(.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        body.app-shell::before,
        .app-brand-mark,
        .noxis-eyebrow,
        .hero-badge,
        .noxis-live-badge,
        .hero-banner::after,
        .noxis-command-card::after,
        .orders-hero::after,
        .support-hero::after,
        .item-id,
        .product-card,
        .noxis-server-card,
        .noxis-balance-card,
        .noxis-chart-card,
        .noxis-node-map,
        .orders-summary-card { animation: none !important; }
    }
    body > .header > .container,
    body > .header .navbar { width: 100% !important; height: 100% !important; }
    body > .header .navbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 14px !important;
    }
    body > .header .logo {
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: calc(100% - 62px) !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
    body > .header .logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body > .header .nav-actions { display:flex !important; margin-left:auto !important; padding:0 !important; border:0 !important; }
    body > .header .balance-nav,
    body > .header .public-theme-toggle { display:none !important; }
    body > .header .navbar-mobile { display:grid !important; }
    body > .header .navbar-wrapper {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(350px, 88vw) !important;
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 94px 18px 26px !important;
        border: 0 !important;
        border-right: 1px solid rgba(145,190,222,.2) !important;
        border-radius: 0 22px 22px 0 !important;
        background: linear-gradient(180deg,#0b1728,#06101c) !important;
        transform: translateX(-110%) !important;
        transition: transform .25s ease !important;
        pointer-events: none !important;
        overflow-y: auto !important;
    }
    body > .header .navbar.active .navbar-wrapper {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
    body > .header .navbar-wrapper ul { display:grid !important; gap:6px !important; width:100% !important; }
    body > .header .navbar-wrapper li,
    body > .header .navbar-wrapper li a { width:100% !important; min-width:0 !important; }
    body > .header .navbar-wrapper li a {
        display:flex !important;
        align-items:center !important;
        min-height:52px !important;
        gap:12px !important;
        padding:0 14px !important;
        border-radius:12px !important;
        font-size:14px !important;
        white-space:normal !important;
    }
    body > .header .navbar-wrapper li a span { display:block !important; overflow-wrap:anywhere !important; }
    body > .header .navbar-wrapper li a i { flex:0 0 20px !important; margin:0 !important; text-align:center; }
    body > .header .navbar-wrapper li.active a { color:#06131d !important; background:var(--color-accent) !important; }
    body > .header .navbar-wrapper li a::after { display:none !important; }
    body > .header .drawer-account { display:grid !important; }
    body > .public-drawer-backdrop { z-index:999 !important; }
    body > .hero-section,
    body > .main-content,
    body > .stats-section,
    body > .mint-page,
    body > .auth-page,
    body > .account-shell,
    body > .orders-shell,
    body > .support-shell {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }
    body > .hero-section { padding-top: 14px !important; }
    body .hero-banner {
        width:100% !important;
        min-height:0 !important;
        padding:24px 16px !important;
        border-radius:20px !important;
    }
    body .hero-header-row { display:flex !important; align-items:stretch !important; gap:10px !important; }
    body .hero-badge, body .online-pill { width:100% !important; max-width:none !important; justify-content:center !important; text-align:center !important; }
    body .hero-title { margin:28px 0 12px !important; font-size:clamp(42px,12vw,70px) !important; line-height:.98 !important; }
    body .hero-subtitle { max-width:100% !important; font-size:13px !important; line-height:1.65 !important; }
    body .hero-features { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:20px !important; }
    body .hero-features > * { width:100% !important; min-height:48px !important; justify-content:flex-start !important; }
    body .hero-actions { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin-top:22px !important; }
    body .hero-actions .btn { width:100% !important; min-height:54px !important; }
    body .hero-character { display:none !important; }
    body .modal > .wrapper { width:calc(100% - 20px) !important; max-width:none !important; max-height:calc(100vh - 20px) !important; overflow-y:auto !important; }
    body .modal-split, body .modal-left, body .modal-right { display:block !important; width:100% !important; min-width:0 !important; }
    body .purchase-period { grid-template-columns:26px minmax(0,1fr) !important; }
    body .purchase-period .cashback { grid-column:2; text-align:left; }
}

.orders-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}
.orders-summary-card {
    position: relative;
    min-height: 82px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.orders-summary-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.orders-summary-card strong {
    display: block;
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 21px;
    letter-spacing: -.04em;
}
.orders-summary-card > i {
    position: absolute;
    top: 16px;
    right: 15px;
    color: var(--color-accent);
    opacity: .75;
}
.orders-summary-success > i { color: #72e0a3; }
.orders-summary-pending > i { color: #f7c86b; }
.orders-summary-spent > i { color: #b99cff; }
.orders-search {
    position: relative;
    display: flex;
    align-items: center;
}
.orders-search > i {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    pointer-events: none;
}
.orders-search input { width: 100%; padding-left: 38px !important; }
.orders-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: none;
}
.orders-reset:hover { color: var(--color-accent); }
.customer-order {
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.customer-order:hover {
    border-color: rgba(var(--color-accent-rgb), .35);
    background: rgba(var(--color-accent-rgb), .045);
    transform: translateY(-1px);
}
.customer-order p i { color: var(--color-accent); opacity: .8; }
.customer-order p span { color: var(--text-secondary); opacity: .5; }
.customer-order-amount { font-size: 16px; }
.customer-order-description {
    display: block;
    max-width: 410px;
    margin-top: 9px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}
.customer-order-pending .customer-order-icon { color: #f7c86b; background: rgba(245,158,11,.12); }
.customer-order-fulfilled .customer-order-icon { color: #72e0a3; background: rgba(16,185,129,.12); }
.customer-order-error .customer-order-icon { color: #ff9d9d; background: rgba(239,68,68,.12); }
.customer-order-error { border-color: rgba(239,68,68,.18); }
.customer-order.is-receipt {
    border-color: rgba(var(--color-accent-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .08);
}
.order-status i { margin-right: 3px; }
.customer-order-actions a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
}
.customer-order-actions a:hover {
    border-color: var(--line);
    background: rgba(255,255,255,.05);
}
@media (max-width: 900px) {
    .orders-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .orders-summary { gap: 8px; }
    .orders-summary-card { min-height: 74px; padding: 12px; }
    .orders-summary-card strong { font-size: 18px; }
    .orders-summary-card > i { top: 13px; right: 12px; }
    .orders-reset { min-height: 42px; }

/* Mobile performance & accessibility overrides: reduce motion, remove heavy blurs/filters,
   increase touch targets and simplify rendering on phones/tablets for smoother UX */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    /* Disable costly background glows and hero sweeps on small screens */
    body::before, body::after, .hero-banner::after { display: none !important; }

    /* Prevent fixed background which can cause jank on mobile */
    body { background-attachment: scroll !important; }

    /* Remove heavy blur / backdrop filters for better rendering */
    .header, .hero-banner, .receipt-card, .orders-summary-card, .account-progress {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Turn off transient UI animations to save battery and avoid layout shifts */
    * { transition: none !important; animation: none !important; }

    /* Increase tappable areas and unify button sizing */
    .btn, .auth-submit, .orders-primary-action, .navbar-mobile, .header .navbar-wrapper li a,
    .customer-order-actions a, .choice-picker-toggle { min-height: 48px !important; padding: 12px 14px !important; font-size: 15px !important; }

    /* Improve tap behavior */
    button, a, .btn { -webkit-tap-highlight-color: rgba(0,0,0,0.06); touch-action: manipulation; }

    /* Make scrollable tables flicker-free */
    .table-wrap, .orders-table-wrap, .log-table-wrap { -webkit-overflow-scrolling: touch; }

    /* Hide decorative heavy elements on smaller screens */
    .hero-character, .hero-banner .hero-visual, .interactive-background { display: none !important; }

    /* Ensure modals fill viewport without content overflow */
    .modal > .wrapper { max-height: calc(100vh - 24px) !important; overflow-y: auto !important; }

    /* Improve readability */
    html { font-size: 15px; }
    h1 { font-size: clamp(22px,6.5vw,32px) !important; }
}

/* Respect reduced motion explicitly */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

}

@media (max-width: 768px) {
    .auth-nav {
        gap: 4px;
    }

    .auth-link {
        min-height: 36px;
        padding: 0 9px;
        font-size: 11px;
    }

    .auth-account {
        max-width: 112px;
        overflow: hidden;
    }

    .auth-account i {
        flex: 0 0 auto;
    }

    .auth-account {
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .auth-card {
        padding: 32px 24px;
    }

    .account-actions {
        flex-direction: column;
    }

    .account-actions .auth-submit {
        width: 100%;
    }
}

/* Immersive AAA Hero Banner */
.hero-banner {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.08) 0%, rgba(20, 10, 40, 0.15) 100%), var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 32px;
    padding: 64px 56px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 75% 75%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 5;
}

.hero-badge {
    background: rgba(var(--color-accent-rgb), 0.06);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.online-pill {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 6px 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .3s ease, border-color .3s ease;
}
.online-pill.is-offline { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .24); }
.online-pill.is-offline .pulse-dot { background: #f59e0b; animation: none; }
.online-pill.is-offline .online-count { color: #fbbf24; }

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.online-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-success);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-title {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 16px;
    position: relative;
    z-index: 5;
    background: linear-gradient(135deg, #ffffff 40%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 550px;
    margin-bottom: 40px;
    position: relative;
    z-index: 5;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -20px 0 32px;
    position: relative;
    z-index: 5;
}

.hero-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: #c9ccda;
    font-size: 11px;
    font-weight: 700;
}

.hero-features i {
    color: var(--color-accent);
}

/* Centered hero adjustments (Wiki / Support) */
.hero-banner[style*="text-align: center"] .hero-badge {
    display: inline-flex;
    margin: 0 auto 20px auto;
}

.hero-banner[style*="text-align: center"] .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 5;
}

.btn {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    border-radius: 16px;
    transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.btn-hero {
    height: 52px;
    padding: 0 32px;
    background: var(--color-accent);
    color: #000;
    border: none;
    font-size: 15px;
    box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.3);
    gap: 12px;
    border-radius: 100px;
}

.btn-hero-primary {
    background: transparent;
    border: 1px solid rgba(var(--color-accent-rgb), 0.55);
    color: var(--text-primary);
}

.btn-hero-primary:hover {
    background: rgba(var(--color-accent-rgb), 0.12);
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(var(--color-accent-rgb), 0.5);
    filter: brightness(1.05);
}

.server-btn:not(.active):hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-1px);
}

/* Widescreen Hero Image character with blending gradient */
.hero-character {
    position: absolute;
    right: 48px;
    bottom: -1px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 2;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    filter: drop-shadow(0 24px 32px rgba(var(--color-accent-rgb), 0.18));
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

.hero-character img {
    height: 92%;
    max-height: 310px;
    object-fit: contain;
    animation: floatCharacter 6s ease-in-out infinite;
    transform-style: preserve-3d;
    will-change: transform;
}

@keyframes floatCharacter {
    0%, 100% { transform: translate3d(0, 0, 0) rotateY(-3deg) rotateZ(0deg); }
    50% { transform: translate3d(0, -14px, 24px) rotateY(4deg) rotateZ(1deg); }
}

.hero-character::before,
.hero-character::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(68deg);
    animation: characterOrbit 9s linear infinite;
    pointer-events: none;
}

.hero-character::after {
    width: 240px;
    height: 240px;
    border-color: rgba(255, 255, 255, 0.1);
    animation-duration: 13s;
    animation-direction: reverse;
}

@keyframes characterOrbit {
    to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
}

/* Stats Row */
.stats-section {
    margin-top: 40px;
    margin-bottom: 64px;
    position: relative;
    z-index: 5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.stat-card {
    background: rgba(18, 20, 32, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-speed), border-color var(--transition-speed);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-accent-rgb), 0.25);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(var(--color-accent-rgb), 0.06);
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-number {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Tab Links redesign */
.tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 24px;
    margin-bottom: 40px;
}

.tabs .tab-links {
    display: flex;
    gap: 10px;
    list-style: none;
    flex-wrap: wrap;
}

.tabs .tab-links > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.01);
    transition: all var(--transition-speed);
}

.tabs .tab-links > li.active > a {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.1);
}

.tabs .tab-links > li > a:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.tabs-wrapper .block-right .btn {
    font-size: 13px;
    height: 44px;
    padding: 0 20px;
    border-radius: 14px;
}

.tabs-wrapper .block-right .btn:hover {
    border-color: var(--border-hover);
}

/* Category description text */
.tab-list > .tab-id {
    display: none;
}

.tab-list > .tab-id.active {
    display: block;
}

.category-text {
    margin-bottom: 36px;
}

.category-text .panel {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    padding: 18px 24px;
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Ultra-Premium AAA Item Cards */
.items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

.item-id {
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--color-accent-rgb), 0.13), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 48%, rgba(0, 0, 0, 0.2)),
        var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    min-height: 318px;
    padding: 30px 22px 24px;
    text-align: center;
    position: relative;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* Card diagonal sheen/shine transition */
.item-id::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: 0.75s;
    pointer-events: none;
}

.item-id:hover::before {
    left: 150%;
}

.item-id:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-10px);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 35px var(--card-glow);
}

.item-id .image {
    width: 82px;
    height: 82px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
    transition: transform var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
}

.item-id:hover .image {
    transform: scale(1.12) rotate(2deg) translateY(-4px);
}

.item-id .title {
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
    text-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.28);
}

.item-id .description {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    max-width: 190px;
    min-height: 56px;
    margin-bottom: 18px;
    padding: 9px 12px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 12px;
    background: rgba(var(--color-accent-rgb), 0.06);
}

.item-id .price {
    font-size: 14px;
    font-weight: 800;
    color: #000;
    background: var(--color-accent);
    padding: 10px 25px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    border: none;
    box-shadow: 0 7px 20px rgba(var(--color-accent-rgb), 0.28);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.item-id:hover .price {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(var(--color-accent-rgb), 0.6);
}

.item-id .price i {
    font-size: 11px;
    color: #000;
}

.item-id .discount {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 100px;
    animation: discountPulse 2s infinite alternate;
}

@keyframes discountPulse {
    0% { transform: scale(1); box-shadow: none; }
    100% { transform: scale(1.03); box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
}

/* Recent Purchases Section */
.payments {
    margin-top: 72px;
    border-top: 1px solid var(--border-color);
    padding-top: 48px;
}

.blockname {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 28px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
}

.payment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.payment-id.window {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.payment-id.window .image {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.payment-id.window .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-id.window .player {
    font-size: 12px;
    color: var(--text-secondary);
}

.payment-id.window .amount {
    background: rgba(255, 255, 255, 0.05);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
}

/* Checkout Modal UI */
.modal {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(3, 4, 7, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal > .wrapper {
    display: flex;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    align-items: center;
    height: 100%;
}

.modal > .wrapper > .modal-content {
    background-color: #0d0e15;
    border: 1px solid var(--border-color);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    padding: 36px;
    width: 100%;
    border-radius: 32px;
    transform: translateY(24px) scale(0.94) rotateX(4deg);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.modal.active > .wrapper > .modal-content {
    transform: translateY(0) scale(1) rotateX(0);
    opacity: 1;
    animation: modalGlow 0.7s ease-out both;
}

@keyframes modalGlow {
    0% { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.8), 0 0 0 rgba(var(--color-accent-rgb), 0); }
    55% { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.8), 0 0 42px rgba(var(--color-accent-rgb), 0.18); }
    100% { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.8), 0 0 24px rgba(var(--color-accent-rgb), 0.08); }
}

.modal-header {
    font-size: 20px;
    font-weight: 800;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.modal-body {
    padding: 28px 0 0 0;
}

.modal-split {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .modal-split {
        flex-direction: column;
    }
}

.modal-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-right {
    flex: 1;
    border-left: 1px solid var(--border-color);
    padding-left: 32px;
}

@media (max-width: 768px) {
    .modal-right {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-left: 0;
        padding-top: 28px;
    }
}

/* Forms input elements */
.input-block {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-block label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.input-block input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 100%;
    height: 50px;
    border-radius: 14px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--transition-speed);
    outline: none;
}

.input-block input:focus {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.15);
}

.player-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    margin: -2px 0 20px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.14);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(var(--color-accent-rgb), 0.08), rgba(255, 255, 255, 0.02));
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.player-preview.is-loading {
    animation: previewPulse 1s ease-in-out infinite alternate;
}

.player-preview.is-ready {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
}

.player-preview-frame {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.25), transparent 70%);
}

.player-preview-frame img {
    width: 54px;
    height: 54px;
    image-rendering: pixelated;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.45));
    animation: previewFloat 3s ease-in-out infinite;
}

.player-preview strong,
.player-preview span {
    display: block;
}

.player-preview strong {
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 3px;
}

.player-preview span {
    color: var(--text-secondary);
    font-size: 11px;
}

@keyframes previewFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes previewPulse {
    from { opacity: 0.65; }
    to { opacity: 1; }
}

.payment-selection {
    display: flex;
    flex-direction: column;
}

.payment-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-method {
    display: block;
    cursor: pointer;
    transform: translateX(0);
    transition: transform 0.25s ease;
}

.payment-method:hover {
    transform: translateX(5px);
}

.payment-method input[type="radio"] {
    display: none;
}

.method-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 14px 18px;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-speed);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    position: relative;
    overflow: hidden;
}

.method-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.12), transparent 80%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

.payment-method:hover .method-card::after,
.payment-method input[type="radio"]:checked + .method-card::after {
    transform: translateX(120%);
}

.payment-method input[type="radio"]:checked + .method-card {
    background: rgba(var(--color-accent-rgb), 0.06);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.15);
    transform: scale(1.025);
}

/* Modal Buttons in Footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
}

.modal-footer button {
    height: 48px;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 14px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.modal-footer #submitBtn {
    background: var(--color-accent);
    color: #000;
    border: none;
    box-shadow: 0 8px 20px rgba(var(--color-accent-rgb), 0.25);
}

.modal-footer #submitBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--color-accent-rgb), 0.45);
}
.modal-footer #submitBtn:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: none; }

.modal-footer .btn-clear {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.modal-footer .btn-clear:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.02);
}

/* Accordion FAQ UI */
.faq-section {
    margin-top: 72px;
    border-top: 1px solid var(--border-color);
    padding-top: 48px;
    margin-bottom: 40px;
}

.faq-section .blockname {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 28px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 750px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color var(--transition-speed);
}

.faq-item:hover {
    border-color: var(--border-hover);
}

.faq-question {
    width: 100%;
    padding: 20px 28px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
}

.faq-question i {
    color: var(--color-accent);
    font-size: 13px;
    transition: transform var(--transition-speed);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer p {
    padding: 0 28px 20px 28px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Floating background items */
#interactive-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1; /* Float items behind text and content */
    overflow: hidden;
}

.bg-item {
    position: absolute;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    /* Rotation and movement are animated in JS + CSS */
}

/* Centered Promo Countdown pill */
.promo-timer {
    display: inline-flex;
    align-items: center;
    background: rgba(var(--color-accent-rgb), 0.05);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    padding: 8px 20px;
    border-radius: 100px;
    margin-bottom: 28px;
    gap: 14px;
}

.promo-text {
    font-weight: 800;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timer-countdown {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.time-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.time-box span {
    font-variant-numeric: tabular-nums;
}

.time-box small {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Toast purchases alerts */
.purchase-toast {
    position: fixed;
    bottom: 24px;
    left: 24px;
    background: rgba(13, 14, 21, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    max-width: 320px;
}

.purchase-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.purchase-toast .avatar {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.purchase-toast-info .toast-title {
    font-size: 11px;
    color: var(--text-secondary);
}

.purchase-toast-info .toast-desc {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Widescreen Footer */
.footer {
    border-top: 1px solid var(--border-color);
    padding: 56px 0;
    margin-top: 96px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer-brand .logo {
    justify-content: center;
    margin-bottom: 12px;
}

.footer-copy {
    max-width: 650px;
    line-height: 1.8;
}

.footer-contacts {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.contact-value {
    color: var(--text-primary);
    font-weight: 600;
    transition: color var(--transition-speed);
}

.contact-value:hover {
    color: var(--color-accent);
}

/* =========================================================================
   WINTER HOLIDAY THEME OVERLAYS & EFFECTS
   ========================================================================= */
body.new-year {
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 100% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 50% 0%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 50%);
}

/* Santa Hat on First Letter of Logo / Title */
body.new-year .hat-letter {
    position: relative;
    display: inline-block;
}

body.new-year .logo .hat-letter {
    color: var(--color-accent) !important;
    -webkit-text-fill-color: var(--color-accent) !important;
}

body.new-year .hero-title .hat-letter {
    background: linear-gradient(to bottom, #ffffff 60%, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.new-year .hat-letter::before {
    content: '';
    position: absolute;
    background-image: url('../img/head.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}

/* Adjust hat sizes and positions for different sections */
body.new-year .logo .hat-letter::before {
    top: -8px; /* Perfectly sits on E */
    left: 1px; /* Centered on E */
    width: 22px;
    height: 18px;
    transform: rotate(-12deg); /* Slightly less tilted for a cuter look */
}

body.new-year .hero-title .hat-letter::before {
    top: -20px; /* Perfectly adjusted height */
    left: -2px; /* Centered on E, moved away from N */
    width: 48px; /* Slightly smaller to prevent overlapping N */
    height: 38px;
    transform: rotate(-14deg); /* Beautiful cozy tilt */
}

/* Festive Glowing Christmas Garlands */
.garland-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-around;
    z-index: 10;
    pointer-events: none;
}

.lightbulb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}

.lightbulb:nth-child(5n+1) { background: #ef4444; animation-name: flash-red; }
.lightbulb:nth-child(5n+2) { background: #10b981; animation-name: flash-green; }
.lightbulb:nth-child(5n+3) { background: #3b82f6; animation-name: flash-blue; }
.lightbulb:nth-child(5n+4) { background: #eab308; animation-name: flash-gold; }
.lightbulb:nth-child(5n+5) { background: #a855f7; animation-name: flash-purple; }

@keyframes flash-red {
    0%, 100% { background: #ef4444; box-shadow: none; }
    50% { background: #ff7f7f; box-shadow: 0 0 12px #ef4444, 0 0 24px #ef4444; }
}

@keyframes flash-green {
    0%, 100% { background: #10b981; box-shadow: none; }
    50% { background: #6ee7b7; box-shadow: 0 0 12px #10b981, 0 0 24px #10b981; }
}

@keyframes flash-blue {
    0%, 100% { background: #3b82f6; box-shadow: none; }
    50% { background: #93c5fd; box-shadow: 0 0 12px #3b82f6, 0 0 24px #3b82f6; }
}

@keyframes flash-gold {
    0%, 100% { background: #eab308; box-shadow: none; }
    50% { background: #fef08a; box-shadow: 0 0 12px #eab308, 0 0 24px #eab308; }
}

@keyframes flash-purple {
    0%, 100% { background: #a855f7; box-shadow: none; }
    50% { background: #d8b4fe; box-shadow: 0 0 12px #a855f7, 0 0 24px #a855f7; }
}

/* Festive cards adjustments in Winter */
body.new-year .item-id:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5), 
        0 0 35px rgba(var(--color-accent-rgb), 0.15);
}

/* Snowflake falling effect container */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    color: #fff;
    font-size: 1.2rem;
    pointer-events: none;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(105vh) rotate(360deg); opacity: 0.2; }
}

/* Responsive viewport settings */
@media (max-width: 992px) {
    .hero-title { font-size: 42px; }
    .hero-character { display: none; }
}

@media (max-width: 768px) {
    .header { width: calc(100% - 24px); top: 12px; }
    .navbar { height: 60px; padding: 0 16px; }
    .navbar-wrapper { display: none; }
    .header .btn-vk { display: none; }
    .navbar-mobile { display: block; }
    .hero-banner { padding: 48px 24px; text-align: center; }
    .hero-subtitle { margin: 0 auto 32px auto; }
    .hero-badge { margin: 0 auto 16px auto; }
    .hero-header-row { justify-content: center; }
    .tabs-wrapper { flex-direction: column; align-items: stretch; }
    .tabs-wrapper .block-right { display: none; }
    .tabs .tab-links { justify-content: center; }
}

/* Interactive motion system */
.hero-banner,
.stat-card,
.item-id,
.faq-item,
.payment-id {
    will-change: transform;
}

.hero-banner {
    background:
        linear-gradient(115deg, rgba(var(--color-accent-rgb), 0.13), transparent 34%),
        radial-gradient(circle at 88% 72%, rgba(168, 85, 247, 0.15), transparent 34%),
        var(--bg-card);
}

.hero-banner::before {
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,0.035) 50%, transparent 52%),
        radial-gradient(circle at 75% 75%, rgba(var(--color-accent-rgb), 0.16), transparent 46%);
    animation: heroGridMove 16s linear infinite;
}

@keyframes heroGridMove {
    from { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
    to { transform: translate3d(4%, 2%, 0) rotate(2deg); }
}

.server-btn {
    position: relative;
    overflow: hidden;
}

.server-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.3), transparent 75%);
    transform: translateX(-130%);
    transition: transform .55s ease;
}

.server-btn:hover::after,
.server-btn.is-clicked::after {
    transform: translateX(130%);
}

.tabs .tab-links > li.active > a {
    animation: tabSelected .5s cubic-bezier(.2,.8,.2,1);
}

@keyframes tabSelected {
    0% { transform: scale(.94); box-shadow: 0 0 0 rgba(var(--color-accent-rgb), 0); }
    55% { transform: scale(1.05); box-shadow: 0 0 28px rgba(var(--color-accent-rgb), .28); }
    100% { transform: scale(1); }
}

.tab-id.tab-switching {
    animation: tabContentIn .5s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes tabContentIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.item-id {
    animation: productAppear .65s cubic-bezier(.2,.8,.2,1) both;
}

.item-id:nth-child(2) { animation-delay: .06s; }
.item-id:nth-child(3) { animation-delay: .12s; }
.item-id:nth-child(4) { animation-delay: .18s; }
.item-id:nth-child(5) { animation-delay: .24s; }

@keyframes productAppear {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.item-id .image {
    transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}

.item-id:hover .image {
    transform: translateY(-8px) scale(1.12) rotate(-4deg);
    filter: drop-shadow(0 12px 15px rgba(var(--color-accent-rgb), .35));
}

.stat-card:hover .stat-icon {
    animation: iconPop .55s cubic-bezier(.2,.8,.2,1);
}

@keyframes iconPop {
    45% { transform: rotate(-8deg) scale(1.16); }
    100% { transform: rotate(0) scale(1); }
}

.modal.active > .wrapper > .modal-content {
    animation: modalSpring .5s cubic-bezier(.2,.9,.25,1.2) both;
}

@keyframes modalSpring {
    from { opacity: 0; transform: translateY(28px) scale(.92) rotateX(8deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

.faq-item.active {
    animation: faqOpen .35s ease both;
}

@keyframes faqOpen {
    from { transform: scale(.985); }
    to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner::before,
    .item-id,
    .modal.active > .wrapper > .modal-content,
    .faq-item.active,
    .tabs .tab-links > li.active > a {
        animation: none !important;
    }

}

/* v2 storefront surface: quiet chrome, clear hierarchy, touch-first controls. */
    :root {
        --surface-0: #070b13;
        --surface-1: rgba(15, 24, 39, .88);
        --surface-2: rgba(21, 34, 54, .72);
        --line-soft: rgba(157, 198, 232, .14);
        --text-soft: #8ea8bd;
        --accent-soft: rgba(57, 208, 255, .12);
    }
    body {
        background:
            radial-gradient(circle at 12% -8%, rgba(57, 208, 255, .12), transparent 28rem),
            radial-gradient(circle at 90% 4%, rgba(107, 140, 255, .10), transparent 26rem),
            var(--surface-0);
    }
    .header {
        background: rgba(7, 11, 19, .76);
        border-bottom: 1px solid var(--line-soft);
        box-shadow: 0 12px 35px rgba(0, 0, 0, .16);
        backdrop-filter: blur(18px);
    }
    .navbar {
        min-height: 76px;
        gap: 22px;
    }
    .logo {
        flex: 0 0 auto;
        letter-spacing: .12em;
    }
    .logo-dot {
        width: 11px;
        height: 11px;
        box-shadow: 0 0 0 5px rgba(57, 208, 255, .1), 0 0 22px rgba(57, 208, 255, .75);
    }
    .navbar-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }
    .navbar-wrapper > ul {
        gap: 4px;
    }
    .navbar-wrapper > ul a {
        min-height: 40px;
        padding: 0 11px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: var(--text-soft);
        font-weight: 700;
    }
    .navbar-wrapper > ul a:hover,
    .navbar-wrapper > ul li.active a {
        border-color: rgba(57, 208, 255, .18);
        background: var(--accent-soft);
        color: #eaf8ff;
    }
    .public-nav-search {
        max-width: 210px;
        border-color: var(--line-soft);
        background: rgba(3, 10, 18, .55);
    }
    .nav-actions {
        flex: 0 0 auto;
        gap: 8px;
    }
    .public-theme-toggle,
    .navbar-mobile,
    .notification-nav {
        width: 40px;
        height: 40px;
        border: 1px solid var(--line-soft);
        border-radius: 11px;
        background: rgba(255,255,255,.04);
    }
    .balance-nav {
        min-height: 40px;
        padding-inline: 13px;
        border-radius: 11px;
        font-size: 11px;
    }
    .hero-section {
        padding: clamp(28px, 6vw, 76px) 0 28px;
    }
    .hero-banner {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(134, 194, 232, .18);
        border-radius: 28px;
        background:
            linear-gradient(135deg, rgba(20, 43, 70, .96), rgba(9, 17, 30, .96) 65%),
            radial-gradient(circle at 80% 20%, rgba(57,208,255,.2), transparent 30%);
        box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    }
    .hero-banner::after {
        content: '';
        position: absolute;
        inset: auto -12% -55% 38%;
        height: 90%;
        border-radius: 50%;
        background: rgba(57, 208, 255, .08);
        filter: blur(35px);
        pointer-events: none;
    }
    .hero-title {
        max-width: 760px;
        margin-top: 20px;
        font-size: clamp(42px, 8vw, 88px);
        line-height: .94;
        letter-spacing: -.06em;
    }
    .hero-subtitle {
        max-width: 610px;
        color: #afc4d5;
        font-size: clamp(14px, 1.5vw, 17px);
        line-height: 1.7;
    }
    .hero-features span {
        padding: 9px 12px;
        border: 1px solid var(--line-soft);
        border-radius: 99px;
        background: rgba(255,255,255,.035);
    }
    .hero-actions {
        gap: 10px;
    }
    .hero-actions .btn {
        min-height: 50px;
        padding-inline: 20px;
    }
    .shop-toolbar {
        border: 1px solid var(--line-soft);
        background: var(--surface-1);
        backdrop-filter: blur(14px);
    }
    .product-card,
    .donate-card,
    .catalog-card {
        border: 1px solid var(--line-soft);
        background: linear-gradient(160deg, rgba(20, 34, 53, .9), rgba(10, 17, 28, .94));
        box-shadow: 0 18px 42px rgba(0,0,0,.16);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .product-card:hover,
    .donate-card:hover,
    .catalog-card:hover {
        border-color: rgba(57, 208, 255, .42);
        box-shadow: 0 24px 52px rgba(0,0,0,.26);
        transform: translateY(-4px);
    }
    @media (max-width: 1180px) {
        .public-nav-search { max-width: 170px; }
        .navbar-wrapper > ul a { padding-inline: 8px; }
        .navbar-wrapper > ul a i { display: none; }
    }
    @media (max-width: 760px) {
        .navbar { min-height: 64px; }
        .navbar-wrapper { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; }
        .public-nav-search { max-width: none; }
        .balance-nav { display: none; }
        .hero-banner { border-radius: 20px; }
        .hero-title { font-size: clamp(42px, 16vw, 70px); }
        .hero-actions { display: grid; grid-template-columns: 1fr; }
        .hero-actions .btn { width: 100%; }
    }

    /* Final support page overrides */
    .support-card { border-color: rgba(var(--color-accent-rgb), .2) !important; }
    .support-section, .support-thread { border-color: rgba(255,255,255,.1) !important; }
    .support-ticket.is-selected { box-shadow: inset 3px 0 var(--color-accent), 0 8px 24px rgba(var(--color-accent-rgb), .08); }
    .support-form .auth-submit, .support-thread .auth-submit { background: linear-gradient(100deg, #31c7f5, #6c91ff); color: #061421; font-weight: 800; }
    .support-form .auth-submit:hover, .support-thread .auth-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .support-message-meta small { white-space: nowrap; }
    @media (max-width: 700px) {
        .support-card { padding: 20px 14px !important; }
        .support-thread { padding: 16px !important; }
        .support-message-meta { display: block; }
        .support-message-meta small { display: block; margin-top: 4px; }
    }

    /* Keep the support composer readable on wide and narrow screens. */
    .support-shell { width: min(100% - 32px, 1120px); }
    .support-card { width: 100%; }
    .support-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .support-section, .support-thread { min-width: 0; }
    .support-form input, .support-form select, .support-form textarea,
    .support-thread textarea { max-width: 100%; }
    @media (max-width: 860px) {
        .support-layout { grid-template-columns: 1fr; }
        .support-thread { grid-column: auto; }
    }

.rewards-teaser-icon, .coin-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}
.rewards-teaser-icon { width: 42px; height: 42px; border-radius: 13px; background: rgba(var(--color-accent-rgb), .15); font-size: 20px; }
.rewards-card { margin: 26px 0; padding: 24px; border: 1px solid rgba(var(--color-accent-rgb), .25); border-radius: 20px; background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .11), rgba(16, 20, 34, .7)); }
.mint-page { min-height: calc(100vh - 170px); padding: 54px 20px 80px; background: radial-gradient(circle at 50% 18%, rgba(0, 183, 255, .1), transparent 32%); }.mint-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }.mint-hero h1 { margin:8px 0 10px; font-size:clamp(30px, 4vw, 48px); }.mint-hero p { max-width:600px; margin:0; color:var(--text-secondary); }.mint-live { padding:9px 13px; border:1px solid rgba(114,224,163,.3); border-radius:999px; color:#72e0a3; font-size:12px; white-space:nowrap; }.mint-live span { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#72e0a3; box-shadow:0 0 12px #72e0a3; }.mint-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr); gap:18px; }.mint-card { padding:26px; border:1px solid rgba(var(--color-accent-rgb), .25); border-radius:24px; background:linear-gradient(145deg, rgba(16,31,48,.92), rgba(7,13,23,.95)); box-shadow:0 18px 55px rgba(0,0,0,.22); }.mint-console { min-height:470px; text-align:center; }.mint-console-head,.mint-section-head,.mint-energy-line { display:flex; justify-content:space-between; align-items:center; gap:15px; }.mint-console h2,.mint-section-head h2 { margin:5px 0 0; }.mint-kicker { color:var(--color-accent); font-size:11px; font-weight:800; letter-spacing:.12em; }.mint-level,.mint-section-head > span { color:var(--text-secondary); font-size:11px; }.mint-orb-wrap { position:relative; display:grid; place-items:center; min-height:290px; }.mint-ring { position:absolute; width:245px; height:245px; border:1px solid rgba(94,231,255,.22); border-radius:50%; box-shadow:0 0 80px rgba(94,231,255,.18), inset 0 0 45px rgba(124,58,237,.12); animation:mint-ring 5s linear infinite; }.mint-orb { position:relative; width:168px; height:168px; border:7px solid rgba(255,255,255,.18); border-radius:50%; background:radial-gradient(circle at 35% 25%, #fff, #5ee7ff 18%, #7c3aed 70%, #14142f); box-shadow:0 0 35px rgba(94,231,255,.55), inset 0 -20px 30px rgba(0,0,0,.25); cursor:pointer; transition:transform .2s ease; }.mint-orb:hover { transform:scale(1.04); }.mint-orb span { font-size:70px; }.mint-action-hint { color:var(--text-secondary); }.mint-energy-line { margin-top:25px; color:var(--text-secondary); font-size:12px; }.mint-energy-line b { color:#fff; }.mint-energy-bar { height:8px; margin-top:9px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }.mint-energy-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7c3aed,#5ee7ff); transition:width .3s ease; }.mint-side { display:grid; gap:18px; align-content:start; }.mint-balance { display:flex; flex-direction:column; gap:5px; }.mint-balance b { color:#ffd166; font-size:44px; line-height:1.1; }.mint-balance > span:not(.mint-kicker) { color:var(--text-secondary); font-size:12px; }.mint-balance small { margin-top:15px; color:#72e0a3; }.mint-shop { display:grid; gap:10px; }.mint-item { display:grid; grid-template-columns:42px 1fr auto 15px; align-items:center; gap:10px; padding:13px; border:1px solid var(--border-color); border-radius:14px; color:inherit; background:rgba(255,255,255,.03); text-align:left; cursor:pointer; }.mint-item:hover { border-color:var(--color-accent); background:rgba(0,183,255,.08); }.mint-item > span { font-size:25px; }.mint-item b,.mint-item small { display:block; }.mint-item small { color:var(--text-secondary); font-size:11px; }.mint-item i { color:var(--color-accent); }.mint-inventory-card { margin-top:18px; }.mint-inventory { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }.mint-inventory-item { padding:16px; border:1px solid var(--border-color); border-radius:14px; background:rgba(255,255,255,.025); }.mint-inventory-item > span { display:block; margin-bottom:10px; font-size:27px; }.mint-inventory-item strong,.mint-inventory-item small { display:block; }.mint-inventory-item small { margin-top:4px; color:var(--text-secondary); font-size:11px; }.mint-inventory p { grid-column:1/-1; color:var(--text-secondary); }@keyframes mint-ring { to { transform:rotate(360deg); } }
@media (max-width: 700px) { .mint-page { padding:30px 14px 55px; }.mint-hero { display:block; }.mint-live { display:inline-block; margin-top:18px; }.mint-layout { grid-template-columns:1fr; }.mint-console { min-height:420px; }.mint-inventory { grid-template-columns:repeat(2,1fr); }.mint-card { padding:20px; }.mint-orb-wrap { min-height:250px; }.mint-ring { width:215px; height:215px; } }
@media (max-width: 420px) { .mint-inventory { grid-template-columns:1fr; }.mint-inventory-item { display:grid; grid-template-columns:36px 1fr; }.mint-inventory-item > span { grid-row:span 2; }.mint-inventory-item small { margin-top:0; } }

/* Full visual refresh: unified premium storefront language. */
:root {
    --color-accent: #62e6ff;
    --color-accent-rgb: 98, 230, 255;
    --color-violet: #9a8cff;
    --bg-main: #050911;
    --bg-card: rgba(12, 24, 42, .82);
    --bg-card-hover: rgba(18, 37, 61, .94);
    --border-color: rgba(150, 205, 238, .16);
    --border-hover: rgba(98, 230, 255, .46);
    --text-primary: #f4f9ff;
    --text-secondary: #93aabe;
    --shadow-card: 0 22px 60px rgba(0, 0, 0, .22);
    --radius-lg: 20px;
}
html { background: var(--bg-main); }
body {
    background:
        linear-gradient(180deg, rgba(5, 9, 17, .15), rgba(5, 9, 17, .92)),
        radial-gradient(circle at 8% 0, rgba(98,230,255,.16), transparent 32rem),
        radial-gradient(circle at 90% 8%, rgba(154,140,255,.14), transparent 30rem),
        var(--bg-main) !important;
    animation: none;
}
.header {
    background: rgba(5, 9, 17, .72) !important;
    border-bottom: 1px solid rgba(150,205,238,.14);
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    backdrop-filter: blur(20px);
}
.navbar { min-height: 74px; }
.logo-text { font-weight: 800; letter-spacing: -.03em; }
.navbar-wrapper ul { gap: 5px; }
.navbar-wrapper li a {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #a9bfd0;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.navbar-wrapper li a:hover,
.navbar-wrapper li.active a {
    border-color: rgba(98,230,255,.2);
    background: rgba(98,230,255,.1);
    color: #f4fbff;
    transform: translateY(-1px);
}
.navbar-wrapper li a i { color: var(--color-accent); }
.public-nav-search {
    border-color: rgba(150,205,238,.18);
    border-radius: 12px;
    background: rgba(4,12,22,.68);
}
.hero-section { padding-top: clamp(30px, 7vw, 82px); }
.hero-banner {
    min-height: 470px;
    padding: clamp(30px, 6vw, 72px);
    border: 1px solid rgba(98,230,255,.24);
    border-radius: 30px;
    background:
        linear-gradient(125deg, rgba(17,42,68,.98), rgba(7,15,28,.96) 68%),
        radial-gradient(circle at 80% 20%, rgba(98,230,255,.22), transparent 28rem);
    box-shadow: 0 34px 100px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-banner::before { opacity: .75; }
.hero-title {
    max-width: 760px;
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: -.075em;
    line-height: .9;
}
.hero-subtitle { max-width: 650px; color: #b8cada; font-size: 15px; line-height: 1.75; }
.hero-features { gap: 8px; }
.hero-features span {
    padding: 9px 13px;
    border: 1px solid rgba(150,205,238,.16);
    border-radius: 99px;
    background: rgba(255,255,255,.045);
}
.hero-actions .btn { min-height: 52px; border-radius: 14px; }
.panel,
.card,
.auth-card,
.support-section,
.support-thread,
.method-card,
.stat-card,
.shop-toolbar,
.content-banner {
    border-color: rgba(150,205,238,.16) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(16,31,50,.86), rgba(8,16,28,.92)) !important;
    box-shadow: var(--shadow-card);
}
.item-id,
.product-card,
.donate-card,
.catalog-card {
    border-color: rgba(150,205,238,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18,35,57,.9), rgba(8,16,28,.94));
    box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.item-id:hover,
.product-card:hover,
.donate-card:hover,
.catalog-card:hover,
.method-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 24px 58px rgba(0,0,0,.28), 0 0 28px rgba(98,230,255,.08);
    transform: translateY(-4px);
}
.footer {
    margin-top: 64px;
    border-top: 1px solid rgba(150,205,238,.14);
    background: rgba(4,9,16,.7);
}
@media (max-width: 760px) {
    body { padding-top: 92px; }
    .hero-banner { min-height: 0; padding: 34px 20px 28px; border-radius: 22px; }
    .hero-title { font-size: clamp(45px, 17vw, 76px); }
    .hero-features { display: grid; grid-template-columns: 1fr; }
    .hero-features span { text-align: center; }
    .panel, .card, .auth-card, .support-section, .support-thread { border-radius: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .navbar-wrapper li a,
    .item-id, .product-card, .donate-card, .catalog-card, .method-card { transition: none; }
}
.mint-new-hero { max-width:1080px; margin:0 auto 30px; padding:18px 0 8px; }
.mint-art-hero { position:relative; height:300px; max-width:1080px; margin:0 auto 28px; overflow:hidden; border:1px solid rgba(94,231,255,.28); border-radius:28px; background:#08111e; box-shadow:0 24px 70px rgba(0,0,0,.3); }
.mint-art-hero img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 46%; }
.mint-art-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,10,19,.9) 0%,rgba(4,10,19,.48) 45%,rgba(4,10,19,.12) 100%),linear-gradient(0deg,rgba(4,10,19,.35),transparent 50%); }
.mint-art-fallback { background:radial-gradient(circle at 70% 40%,rgba(124,58,237,.35),transparent 38%),linear-gradient(135deg,#07111e,#132f50); }
.mint-art-copy { position:absolute; left:34px; bottom:32px; max-width:420px; }
.mint-art-copy h2 { margin:8px 0 7px; color:#fff; font-size:clamp(25px,4vw,42px); letter-spacing:-.04em; }
.mint-art-copy p { margin:0; color:#c5d8e6; font-size:14px; }
.mint-new-hero h1 { max-width:680px; letter-spacing:-.04em; }
.mint-new-hero p { max-width:580px; font-size:15px; line-height:1.7; }
.mint-hero-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.mint-hero-pills span { padding:8px 12px; border:1px solid rgba(94,231,255,.18); border-radius:999px; color:#a7c8d7; background:rgba(94,231,255,.05); font-size:11px; }
.mint-hero-pills i { margin-right:5px; color:#72e0a3; }
.mint-new-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); gap:18px; max-width:1080px; margin:0 auto; }
.mint-new-console { min-height:540px; overflow:hidden; }
.mint-new-orb-wrap { min-height:340px; }
.mint-orb-glow { position:absolute; width:270px; height:270px; border-radius:50%; background:rgba(94,231,255,.12); filter:blur(35px); }
.mint-new-console .mint-orb { width:190px; height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-color:rgba(255,255,255,.38); box-shadow:0 0 55px rgba(94,231,255,.55), inset 0 -24px 34px rgba(0,0,0,.25); }
.mint-new-console .mint-orb span { font-size:76px; line-height:1; }
.mint-new-console .mint-orb img { width:118px; height:118px; display:block; transition:transform .2s ease; }
.mint-new-console .mint-icon-fallback:before { content:'в—†'; color:#5ee7ff; font-size:72px; text-shadow:0 0 28px #5ee7ff; }
.mint-new-console .mint-orb:hover img { transform:scale(1.06); }
.mint-new-console .mint-orb em { color:#fff; font:800 10px/1 inherit; letter-spacing:.18em; font-style:normal; opacity:.85; }
.mint-new-console .mint-orb:disabled { opacity:.55; cursor:not-allowed; filter:saturate(.65); }
.mint-new-status { min-height:22px; font-size:13px; line-height:1.5; color:#8da6bd; }
.mint-drop-range { display:flex; align-items:center; gap:12px; max-width:430px; margin:28px auto 0; color:var(--text-secondary); font-size:10px; text-align:left; }
.mint-drop-range span { display:flex; flex-direction:column; gap:4px; white-space:nowrap; }
.mint-drop-range strong { color:#ffd166; font-size:13px; }
.mint-drop-range i { height:4px; flex:1; border-radius:99px; background:linear-gradient(90deg,#72e0a3,#ffd166); }
.mint-new-side { display:grid; align-content:start; gap:18px; }
.mint-wallet-card { padding:30px; }
.mint-wallet-card b { font-size:40px; letter-spacing:-.04em; }
.mint-wallet-card small { margin-top:15px; color:#72e0a3; }
.mint-wallet-card a { margin-top:22px; color:#9deaff; font-size:12px; text-decoration:none; }
.mint-wallet-card a i { margin-left:6px; }
.mint-rules-card { display:grid; gap:14px; padding:30px; }
.mint-rule { display:flex; align-items:center; gap:13px; color:#d9e7ef; font-size:13px; }
.mint-rule b { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:#5ee7ff; background:rgba(94,231,255,.1); font-size:11px; }
.mint-odds-card { display:grid; gap:10px; padding:24px 26px; }
.mint-odds-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:4px; }
.mint-odds-head > span:last-child { color:var(--text-secondary); font-size:10px; }
.mint-odd { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:8px; font-size:12px; }
.mint-odd i { width:8px; height:8px; border-radius:50%; background:#72e0a3; }
.mint-odd b { font-size:11px; }
.mint-odd small { grid-column:2/-1; margin-top:-5px; color:var(--text-secondary); font-size:10px; }
.mint-odd.uncommon i { background:#5ee7ff; }
.mint-odd.rare i { background:#b892ff; }
.mint-odd.legendary i { background:#ffd166; box-shadow:0 0 10px #ffd166; }
.mint-result.rarity-uncommon strong { color:#5ee7ff; }
.mint-result.rarity-rare strong { color:#b892ff; }
.mint-result.rarity-legendary strong { color:#ffd166; text-shadow:0 0 18px rgba(255,209,102,.7); }
.mint-hero-pills { display:flex !important; flex-wrap:wrap !important; align-items:center; gap:9px !important; }
.mint-hero-pills span { display:inline-flex !important; align-items:center; white-space:nowrap; }
.mint-hero-pills span + span { margin-left:0 !important; }
.mint-prize-track { display:flex !important; align-items:center !important; gap:12px !important; }
.mint-prize-track .mint-prize { white-space:nowrap; }
.mint-drop-range { display:flex !important; align-items:center !important; gap:12px !important; }
.mint-drop-range span + span { margin-left:0 !important; }
.user-mint-reset { grid-column:1/-1; margin-top:8px; }
.mint-prize-track { display:flex; align-items:center; gap:12px; max-width:390px; margin:28px auto 0; }
.mint-prize-track i { height:5px; flex:1; border-radius:99px; background:linear-gradient(90deg,#72e0a3,#ffd166,#ff7b7b); box-shadow:0 0 18px rgba(255,209,102,.3); }
.mint-prize { color:var(--text-secondary); font-size:11px; font-weight:700; }
.mint-prize.high { color:#ffd166; }
.mint-result { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:120px; margin-top:12px; padding:18px 14px 16px; border:1px solid rgba(0,210,255,.12); border-radius:16px; background:rgba(12,22,34,.42); opacity:.72; }
.mint-result strong { color:#ffd166; font-size:clamp(32px, 4vw, 56px); line-height:1; letter-spacing:-.04em; }
.mint-result span { color:var(--text-secondary); font-size:14px; line-height:1.5; text-align:center; }
.mint-result.is-won { opacity:1; animation:mint-result-in .5s ease; }
.mint-capsule.is-opening { animation:mint-open 1s ease-in-out infinite; }
.mint-capsule.is-opening span { animation:mint-symbol-spin .75s ease-in-out infinite; }
.mint-capsule.is-opening em { opacity:.35; }
.mint-capsule.is-opening:after { content:''; position:absolute; inset:-18px; border:2px solid rgba(255,209,102,.7); border-radius:50%; animation:mint-charge 1s ease-in-out infinite; pointer-events:none; }
.mint-capsule.is-hit { animation:mint-case-pop .65s cubic-bezier(.2,.8,.2,1); }
.mint-capsule.is-hit:before { content:''; position:absolute; inset:-42px; border-radius:50%; background:radial-gradient(circle,rgba(255,209,102,.42),transparent 62%); animation:mint-burst .7s ease-out forwards; pointer-events:none; }
@keyframes mint-open { 50% { transform:scale(1.08) rotate(4deg); filter:brightness(1.25); } }
@keyframes mint-symbol-spin { 50% { transform:scale(1.16) rotate(12deg); } }
@keyframes mint-charge { 0% { transform:scale(.8); opacity:.1; } 50% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1.3); opacity:0; } }
@keyframes mint-case-pop { 35% { transform:scale(1.22) rotate(-5deg); filter:brightness(1.65); } 100% { transform:scale(1); } }
@keyframes mint-burst { from { transform:scale(.35); opacity:1; } to { transform:scale(1.25); opacity:0; } }
@keyframes mint-result-in { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media (max-width:700px) { .mint-new-hero { padding-top:8px; }.mint-new-grid { grid-template-columns:1fr; }.mint-new-console { min-height:470px; }.mint-new-orb-wrap { min-height:280px; }.mint-new-console .mint-orb { width:165px; height:165px; }.mint-new-console .mint-orb span { font-size:64px; }.mint-wallet-card,.mint-rules-card { padding:22px; } }
@media (max-width:700px) { .mint-art-hero { height:230px; margin-bottom:22px; border-radius:20px; }.mint-art-hero img { object-position:58% center; }.mint-art-copy { left:20px; right:20px; bottom:22px; }.mint-art-copy p { font-size:12px; } }
.mint-page .mint-orb { width:168px; height:168px; border:7px solid rgba(255,255,255,.18); background:radial-gradient(circle at 35% 25%, #fff, #5ee7ff 18%, #7c3aed 70%, #14142f); box-shadow:0 0 35px rgba(94,231,255,.55), inset 0 -20px 30px rgba(0,0,0,.25); }
.mint-page .mint-shop { max-width:none; margin:0; }
.mint-page .mint-button { width:auto; min-width:0; }
.mint-page .mint-button:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.5); }
.mint-shop-hint { margin:4px 0 0; color:var(--text-secondary); font-size:11px; }
.mint-page .mint-inventory-item { position:relative; min-height:150px; padding:18px; border:1px solid rgba(94,231,255,.14); border-radius:16px; background:linear-gradient(145deg,rgba(23,39,59,.9),rgba(10,19,32,.9)); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }.mint-page .mint-inventory-item:hover { transform:translateY(-3px); border-color:rgba(94,231,255,.42); box-shadow:0 12px 28px rgba(0,0,0,.2); }.mint-page .mint-inventory-item > span { display:grid; place-items:center; width:48px; height:48px; margin-bottom:14px; border-radius:14px; background:rgba(94,231,255,.1); font-size:27px; }.mint-page .mint-inventory-item strong { font-size:15px; }.mint-page .mint-inventory-item small { margin-top:5px; color:var(--text-secondary); font-size:11px; }.mint-page .mint-redeem { display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; min-height:32px !important; margin-top:14px !important; padding:7px 11px !important; border:1px solid rgba(114,224,163,.4) !important; border-radius:9px !important; color:#72e0a3 !important; background:rgba(114,224,163,.08) !important; font:600 11px/1 inherit !important; cursor:pointer !important; transition:background .2s ease,transform .2s ease; }.mint-page .mint-redeem:hover { transform:translateY(-1px); background:rgba(114,224,163,.16) !important; }.mint-page .mint-redeem:disabled { opacity:.5; cursor:wait !important; }
.mint-stats { display: flex; justify-content: center; gap: 18px; margin: 28px 0; }.mint-stats div { min-width: 130px; padding: 15px; border: 1px solid var(--border-color); border-radius: 14px; }.mint-stats b, .mint-stats span { display: block; }.mint-stats b { color: #ffd166; font-size: 28px; }.mint-stats span, .mint-inventory small { color: var(--text-secondary); font-size: 11px; }.mint-orb { width: 150px; height: 150px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #5ee7ff 20%, #7c3aed 70%); box-shadow: 0 0 45px rgba(94,231,255,.5); cursor: pointer; }.mint-orb span { font-size: 64px; }.mint-orb.is-hit { animation: mint-hit .35s ease; }.mint-shop { display: grid; gap: 10px; margin: 30px auto; max-width: 420px; }.mint-shop h2, .mint-card > h2 { grid-column: 1 / -1; }.mint-button { margin: 0; }.mint-inventory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; text-align: left; }.mint-inventory div { padding: 13px; border: 1px solid var(--border-color); border-radius: 12px; }.mint-inventory strong, .mint-inventory small { display: block; }.mint-inventory p { grid-column: 1 / -1; color: var(--text-secondary); }@keyframes mint-hit { 50% { transform: scale(1.12) rotate(3deg); } }
.rewards-heading, .reward-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.rewards-heading h2 { margin: 4px 0 0; font-size: 26px; }
.coin-balance { flex-direction: column; align-items: flex-end; }
.coin-balance strong { color: #ffd166; font-size: 30px; line-height: 1; }
.coin-balance span, .reward-action p { color: var(--text-secondary); font-size: 12px; margin: 5px 0 0; }
.reward-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.reward-action { padding: 15px; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(0,0,0,.16); }
.reward-action > div { min-width: 0; flex: 1 1 auto; }
.reward-button { width: auto; min-width: 94px; margin: 0; white-space: nowrap; }
.reward-button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.reward-status { min-height: 22px; margin: 14px 0 0; color: #72e0a3; }
.reward-status.is-error { color: #ff9da8; }
.reward-game { position: relative; min-height: 190px; margin-top: 14px; overflow: hidden; border: 1px dashed rgba(var(--color-accent-rgb), .45); border-radius: 14px; background: radial-gradient(circle, rgba(var(--color-accent-rgb), .12), transparent 60%); }
.game-progress { position: absolute; left: 12px; top: 10px; z-index: 2; color: var(--color-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.game-timer { position: absolute; right: 12px; top: 10px; color: var(--text-secondary); }
.bush-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 48px auto 0; padding: 0 22px 20px; }
.bush-button { min-height: 108px; padding: 18px; border: 1px solid rgba(88, 190, 108, .45); border-radius: 18px; background: linear-gradient(160deg, rgba(38, 104, 61, .8), rgba(17, 47, 37, .95)); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .16), 0 10px 20px rgba(0, 0, 0, .18); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.bush-button:hover:not(:disabled) { transform: translateY(-5px); border-color: #72e0a3; }
.bush-button:disabled { cursor: default; }
.bush-icon, .bush-result { display: block; font-size: 48px; line-height: 1; }
.bush-button.is-open { transform: scale(.97); }
.bush-button.is-safe { border-color: #72e0a3; background: rgba(38, 126, 81, .9); }
.bush-button.is-creeper { border-color: #ff6878; background: rgba(126, 38, 49, .9); }
.bush-button.is-safe { animation: bush-safe-flash .55s ease; }
.bush-button.is-creeper { animation: bush-creeper-hit .45s ease; }
.steve-marker { position: absolute; z-index: 3; left: 50%; top: 54%; font-size: 24px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); transition: left .25s ease, top .25s ease; }
@keyframes bush-safe-flash { 0%, 100% { box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .16), 0 10px 20px rgba(0, 0, 0, .18); } 50% { box-shadow: 0 0 28px rgba(114, 224, 163, .9); } }
@keyframes bush-creeper-hit { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-6px) rotate(-2deg); } 60% { transform: translateX(6px) rotate(2deg); } }
@media (max-width: 900px) {
    .reward-actions { grid-template-columns: 1fr; }
    .rewards-card { padding: 18px; }
}
@media (max-width: 768px) {
    .navbar.active .navbar-wrapper {
        display: block;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        background: rgba(9, 12, 20, .96);
        box-shadow: 0 22px 45px rgba(0,0,0,.45);
        backdrop-filter: blur(18px);
    }
    .navbar.active .navbar-wrapper ul { display: grid; gap: 4px; }
    .navbar.active .navbar-wrapper li a { display: flex; padding: 12px 14px; border-radius: 10px; }
    .navbar.active .navbar-wrapper li a:hover,
    .navbar.active .navbar-wrapper li.active a { background: rgba(var(--color-accent-rgb), .12); }
    .rewards-heading { align-items: flex-start; }
    .reward-actions { grid-template-columns: minmax(0, 1fr); }
    .reward-action { min-width: 0; align-items: stretch; flex-direction: column; }
    .reward-action > div { width: 100%; }
    .reward-button { width: 100%; min-width: 0; }
    .rewards-card { overflow: hidden; }
}
@media (max-width: 430px) {
    .rewards-heading h2 { font-size: 22px; }
    .coin-balance strong { font-size: 26px; }
    .rewards-card { padding: 16px; }
}

/* Public design system: shared navigation, forms and feedback states. */
:root {
    --surface-1: #111827;
    --surface-2: #172338;
    --text-muted: #9aa8bd;
    --success: #35d39a;
    --warning: #f5c451;
    --danger: #ff6b86;
    --radius-card: 18px;
    --shadow-card: 0 20px 55px rgba(0, 0, 0, .28);
}

.container { width: min(1180px, calc(100% - 40px)); }
.header {
    position: fixed;
    top: 16px;
    left: 50%;
    width: min(1180px, calc(100% - 32px));
    z-index: 100;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(10, 16, 29, .86);
    backdrop-filter: blur(18px);
}
.navbar-wrapper li a { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.navbar-wrapper li a i { color: var(--color-accent); margin-right: 5px; }
.navbar-wrapper li.active a,
.navbar-wrapper li a:hover { color: var(--text-primary); }
.auth-nav { display: flex; align-items: center; gap: 8px; }
.auth-link { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; }
.auth-link-primary { border-radius: 10px; }
.auth-logout-form { margin: 0; }
.navbar-mobile { min-width: 42px; min-height: 42px; }

.auth-page { min-height: calc(100vh - 90px); padding: 36px 20px 72px; }
.auth-shell { width: min(560px, 100%); margin: 0 auto; }
.auth-shell.auth-card-wide, .auth-card-wide { width: min(920px, 100%); }
.auth-card {
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-card);
    background: linear-gradient(145deg, rgba(23,35,56,.92), rgba(12,19,33,.92));
    box-shadow: var(--shadow-card);
}
.auth-card h1 { letter-spacing: -.035em; }
.auth-eyebrow, .support-kicker, .account-progress-kicker {
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.auth-form { gap: 10px; }
.auth-form label { color: #d6deec; font-size: 13px; font-weight: 700; }
.auth-input { min-height: 50px; border-radius: 12px; }
.auth-input:focus-within, .auth-form textarea:focus, .auth-form select:focus,
.auth-form input:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .16); outline: 0; }
.auth-form input, .auth-form textarea, .auth-form select { color: var(--text-primary); }
.auth-submit { min-height: 48px; border-radius: 12px; }
.auth-submit:disabled, .btn:disabled, button[disabled] { cursor: not-allowed; opacity: .55; filter: grayscale(.25); transform: none; }
.auth-submit.is-loading, .btn.is-loading { pointer-events: none; }
.auth-submit.is-loading::before, .btn.is-loading::before {
    content: ''; width: 15px; height: 15px; margin-right: 8px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: publicSpin .7s linear infinite;
}
@keyframes publicSpin { to { transform: rotate(360deg); } }
.auth-alert, .alert {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.11);
    padding: 13px 15px;
}
.auth-alert-error, .alert-danger { color: #ffd4dc; background: rgba(255,107,134,.1); border-color: rgba(255,107,134,.3); }
.auth-alert-success, .alert-success { color: #b9f8dc; background: rgba(53,211,154,.1); border-color: rgba(53,211,154,.3); }
.empty-state, .loading-state, .error-state {
    padding: 34px 20px; text-align: center; border: 1px dashed rgba(255,255,255,.14);
    border-radius: 14px; color: var(--text-muted);
}
.empty-state i, .error-state i { display: block; margin-bottom: 10px; font-size: 26px; color: var(--color-accent); }
.loading-state { position: relative; }
.loading-state::before { content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 9px; vertical-align: -6px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--color-accent); border-radius: 50%; animation: publicSpin .7s linear infinite; }
.support-layout { gap: 20px; }
.support-ticket, .account-overview > a, .account-activity-item {
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.support-ticket:hover, .account-overview > a:hover { border-color: rgba(var(--color-accent-rgb), .45); transform: translateY(-2px); }
.support-status.is-open { color: var(--success); }
.support-status:not(.is-open) { color: var(--text-muted); }
.footer { border-top: 1px solid rgba(255,255,255,.08); }
.public-theme-toggle {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.public-theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); }
.public-light {
    --bg-main: #edf4f8;
    --bg-card: rgba(255,255,255,.86);
    --bg-card-hover: #fff;
    --bg-header: rgba(255,255,255,.9);
    --border-color: rgba(18,53,78,.14);
    --text-primary: #13283a;
    --text-secondary: #557085;
    --shadow-card: 0 18px 45px rgba(25,56,78,.14);
}
.public-light body { background-image: radial-gradient(circle at 50% 0%, rgba(var(--color-accent-rgb), .12), transparent 48%) !important; }
.public-light .header, .public-light .auth-card, .public-light .support-section, .public-light .support-thread,
.public-light .account-card, .public-light .shop-toolbar, .public-light .method-card { background-color: rgba(255,255,255,.9); }
.public-light .navbar-wrapper, .public-light .shop-sort-menu, .public-light .choice-picker-menu { background: #fff; }
.public-light .public-nav-search { background: rgba(18,53,78,.04); border-color: rgba(18,53,78,.14); }
.public-light .public-nav-results { background: #fff; border-color: rgba(18,53,78,.14); }
.public-light .navbar-wrapper a, .public-light .choice-picker-toggle, .public-light .shop-control,
.public-light input, .public-light select, .public-light textarea { color: var(--text-primary); }
.public-light .public-theme-toggle { border-color: rgba(18,53,78,.18); background: rgba(18,53,78,.06); }
.public-light .auth-alert, .public-light .alert, .public-light .empty-state, .public-light .loading-state, .public-light .error-state { color: var(--text-primary); }
.public-light .navbar-mobile { color: var(--text-primary); }

/* Spacious desktop navigation */
@media (min-width: 981px) {
    .header {
        width: min(1240px, calc(100% - 56px));
        top: 20px;
        border-radius: 22px;
    }
    .navbar {
        min-height: 76px;
        height: auto;
        padding: 0 24px;
        gap: 22px;
    }
    .logo { flex: 0 0 auto; min-width: 118px; }
    .navbar-wrapper { flex: 1 1 auto; min-width: 0; }
    .navbar-wrapper ul { justify-content: center; gap: clamp(14px, 2.2vw, 30px); }
    .navbar-wrapper ul li a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; white-space: nowrap; }
    .navbar-wrapper ul li a i { color: var(--color-accent); font-size: 12px; }
    .nav-actions { flex: 0 0 auto; gap: 8px; }
    .auth-nav { gap: 7px; }
    .auth-link { min-height: 42px; padding-inline: 12px; white-space: nowrap; }
    .balance-nav { min-height: 42px; padding-inline: 14px; white-space: nowrap; }
    .public-theme-toggle { width: 42px; height: 42px; flex: 0 0 42px; }
}

@media (max-width: 720px) {
    body { padding-top: 94px; }
    .header { top: 8px; width: calc(100% - 16px); }
    .container { width: min(100% - 28px, 1180px); }
    .navbar-wrapper { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(10,16,29,.97); box-shadow: var(--shadow-card); }
    .navbar-wrapper ul { display: none; }
    .navbar.active .navbar-wrapper ul { display: grid; gap: 3px; }
    .navbar-wrapper li a { min-height: 42px; padding: 10px 12px; }
    .nav-actions .auth-nav, .nav-actions > .balance-nav { display: none; }
    .nav-actions > .public-theme-toggle { display: inline-grid; }
    .navbar.active .nav-actions .auth-nav { display: flex; }
    .navbar.active .nav-actions > .balance-nav { display: inline-flex; }
    .auth-page { padding: 20px 10px 52px; }
    .auth-card { padding: 24px 18px; }
    .account-details, .account-actions { grid-template-columns: 1fr; }
    .support-layout { grid-template-columns: 1fr; }
}

/* Prevent desktop navigation from colliding when all account actions are visible. */
@media (min-width: 721px) {
    .header .navbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }
    .header .logo { min-width: 104px; }
    .header .navbar-wrapper { min-width: 0; overflow: hidden; }
    .header .navbar-wrapper ul {
        min-width: 0;
        gap: 0;
        justify-content: center;
    }
    .header .navbar-wrapper ul li { min-width: 0; }
    .header .navbar-wrapper ul li a {
        max-width: 100%;
        padding-inline: clamp(4px, .55vw, 9px);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header .navbar-wrapper ul li a i { flex: 0 0 auto; }
    .header .navbar-wrapper ul li a { font-size: clamp(10px, .78vw, 12px); }
    .header .nav-actions {
        min-width: 0;
        gap: 4px;
        white-space: nowrap;
    }
    .header .auth-nav { gap: 4px; }
    .header .auth-link { padding-inline: 8px; }
    .header .auth-account { max-width: 88px; overflow: hidden; }
    .header .auth-account span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header .balance-nav {
        max-width: 136px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Noxis interface v4: a clean, product-first visual system. */
:root {
    --v4-bg: #060b14;
    --v4-panel: #0b1524;
    --v4-panel-2: #101f32;
    --v4-line: rgba(142, 190, 222, .16);
    --v4-line-strong: rgba(53, 200, 255, .42);
    --v4-cyan: #35c8ff;
    --v4-blue: #6d86ff;
    --v4-text: #edf8ff;
    --v4-muted: #8ba4b7;
}
html, body { background: var(--v4-bg) !important; }
body {
    color: var(--v4-text);
    background-image:
        radial-gradient(900px 520px at 72% -10%, rgba(53,200,255,.12), transparent 70%),
        radial-gradient(700px 620px at 100% 80%, rgba(109,134,255,.09), transparent 72%) !important;
}
body > .header {
    background: linear-gradient(180deg, #0b1728, #081321) !important;
    border-right-color: var(--v4-line) !important;
    box-shadow: 18px 0 48px rgba(0,0,0,.24) !important;
}
body > .header .logo {
    border-bottom-color: var(--v4-line) !important;
}
body > .header .navbar-wrapper li a {
    color: var(--v4-muted) !important;
}
body > .header .navbar-wrapper li a:hover,
body > .header .navbar-wrapper li.active a {
    border-color: var(--v4-line-strong) !important;
    background: linear-gradient(90deg, rgba(53,200,255,.18), rgba(109,134,255,.08)) !important;
    color: var(--v4-text) !important;
}
body > .header .navbar-wrapper li.active a { box-shadow: inset 3px 0 var(--v4-cyan), 0 10px 25px rgba(53,200,255,.08) !important; }
.hero-banner {
    border-color: var(--v4-line-strong) !important;
    background:
        linear-gradient(120deg, rgba(13,35,56,.98), rgba(8,19,33,.96)),
        radial-gradient(circle at 86% 15%, rgba(53,200,255,.18), transparent 35%) !important;
}
.hero-title { letter-spacing: -.07em; }
.hero-subtitle { max-width: 560px; color: #a5bdcc; }
.stats-grid { gap: 16px !important; }
.stat-card {
    min-height: 104px;
    border-color: var(--v4-line) !important;
    background: linear-gradient(145deg, rgba(15,33,53,.95), rgba(8,18,31,.95)) !important;
}
.tabs-wrapper, .shop-toolbar, .orders-filters {
    border-color: var(--v4-line) !important;
    background: rgba(11,24,40,.78) !important;
}
.item-id, .auth-card, .support-app, .customer-order, .faq-item, .mint-card {
    border-color: var(--v4-line) !important;
    background: linear-gradient(145deg, rgba(15,31,50,.94), rgba(8,17,29,.94)) !important;
}
.item-id:hover, .customer-order:hover, .mint-card:hover { border-color: var(--v4-line-strong) !important; }
.btn, .btn-vk {
    border-radius: 12px !important;
    font-weight: 800;
}
.btn-hero-primary, .purchase-modal-footer #submitBtn {
    background: linear-gradient(135deg, var(--v4-cyan), var(--v4-blue)) !important;
    box-shadow: 0 12px 28px rgba(53,200,255,.2) !important;
}
.modal {
    background: rgba(2,7,14,.84) !important;
}
.modal > .wrapper { max-width: 1040px !important; }
.modal > .wrapper > .modal-content {
    overflow: hidden;
    padding: 0 !important;
    border-color: var(--v4-line-strong) !important;
    border-radius: 22px !important;
    background: #0a1320 !important;
}
.purchase-modal-head { padding: 22px 28px !important; }
.modal-split { gap: 0 !important; }
.modal-left { border-right: 1px solid var(--v4-line); }
.modal-right { padding: 28px !important; border-left: 0 !important; background: rgba(16,31,50,.42); }
.purchase-period { min-height: 78px; border-radius: 13px !important; }
.purchase-period-meta { text-align: left; }
.purchase-product-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
@media (max-width: 700px) {
    .modal { padding: 10px !important; }
    .modal > .wrapper { max-width: 100% !important; }
    .modal-left { border-right: 0; }
    .modal-right { padding: 20px 18px !important; }
    .purchase-modal-head { padding: 18px !important; }
}

/* Compact Noxis navigation */
.header {
    top: 30px;
    width: min(1100px, calc(100% - 32px));
    border-radius: 22px;
}
.navbar {
    min-height: 76px;
    height: auto;
    gap: 16px;
    padding: 0 22px;
}
.logo { flex: 0 0 auto; color: var(--accent); }
.logo-text { font-size: 20px; }
.navbar-wrapper { flex: 1 1 auto; min-width: 0; }
.navbar-wrapper ul {
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.navbar-wrapper ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}
.navbar-wrapper ul li a::after { display: none; }
.navbar-wrapper ul li.active a {
    color: #041521;
    background: var(--accent);
    box-shadow: 0 8px 22px rgba(57, 208, 255, .2);
}
.navbar-wrapper ul li.active a i { color: #041521; }
.navbar-wrapper ul li:not(.active) a:hover { background: rgba(57, 208, 255, .08); }
.navbar-wrapper ul li a i { margin-right: 6px; }
.nav-actions { gap: 6px; }
.auth-nav { gap: 5px; }
.auth-link {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.auth-link:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(57,208,255,.08); }
.auth-link-primary.auth-admin {
    border-color: transparent;
    background: var(--accent);
    color: #041521;
}
.auth-link-primary.auth-admin:hover { background: #73dcff; color: #041521; }
.auth-admin i, .auth-account i, .auth-logout i { color: var(--accent); }
.auth-admin i { color: #041521; }
.auth-logout-form { display: contents; }
.balance-nav { min-height: 42px; padding-inline: 13px; border-color: rgba(57,208,255,.2); background: rgba(57,208,255,.07); font-size: 11px; }
.public-theme-toggle { width: 42px; height: 42px; flex: 0 0 42px; }

@media (max-width: 1080px) and (min-width: 721px) {
    .navbar { padding-inline: 14px; gap: 8px; }
    .navbar-wrapper ul { gap: 0; }
    .navbar-wrapper ul li a { padding-inline: 7px; font-size: 11px; }
    .auth-link { padding-inline: 8px; }
    .auth-link span, .balance-nav { display: none; }
}
@media (max-width: 720px) {
    .header { top: 8px; width: calc(100% - 16px); border-radius: 17px; }
    .navbar { min-height: 62px; padding: 0 12px 0 16px; }
    .navbar-wrapper { flex-basis: 100%; }
    .navbar-wrapper { display: none; }
    .navbar.active .navbar-wrapper { display: block; }
    .public-nav-search { min-width: 0; margin: 8px 0 4px; }
    .public-nav-search input { min-height: 38px; }
    .navbar-wrapper ul { justify-content: stretch; }
    .navbar-wrapper ul li a { justify-content: flex-start; min-height: 44px; }
    .navbar-wrapper ul li.active a { color: var(--ink); background: rgba(57,208,255,.12); box-shadow: none; }
    .navbar-wrapper ul li.active a i { color: var(--accent); }
    .nav-actions { gap: 5px; }
    .nav-actions .auth-nav, .nav-actions > .balance-nav { display: none; }
    .navbar.active .nav-actions .auth-nav,
    .navbar.active .nav-actions > .balance-nav { display: flex; flex-wrap: wrap; }
    .auth-nav { position: absolute; left: 12px; right: 12px; top: calc(100% + 68px); padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,17,31,.97); box-shadow: var(--shadow-card); }
    .navbar.active .auth-nav { top: calc(100% + 8px); }
    .auth-link { flex: 1 1 auto; justify-content: center; }
    .navbar.active .navbar-wrapper { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit.is-loading::before, .btn.is-loading::before, .loading-state::before { animation: none; }
}

/* Unified header v2 */
.header {
    width: min(1240px, calc(100% - 40px));
    top: 16px;
    border: 1px solid rgba(119, 153, 190, .2);
    border-radius: 22px;
    background: rgba(7, 13, 24, .92);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.header > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.navbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 76px;
    height: auto;
    padding: 0 18px 0 24px;
}

.logo {
    min-width: 108px;
    gap: 9px;
    font-size: 20px;
    letter-spacing: .2px;
}

.logo-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
}

.navbar-wrapper {
    min-width: 0;
    overflow: visible;
}

.navbar-wrapper ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 1.2vw, 18px);
}

.navbar-wrapper ul li {
    min-width: 0;
}

.navbar-wrapper ul li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 0;
    color: #8d99ad;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.navbar-wrapper ul li a i {
    margin: 0;
    color: var(--color-accent);
    font-size: 12px;
}

.navbar-wrapper ul li.active a {
    color: #f1f7ff;
}

.navbar-wrapper ul li a::after {
    bottom: 0;
    height: 2px;
    border-radius: 2px;
}

.nav-actions {
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.auth-nav {
    gap: 6px;
}

.auth-link,
.balance-nav {
    min-height: 42px;
    border: 1px solid rgba(119, 153, 190, .14);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.auth-link {
    padding: 0 11px;
}

.auth-link-primary {
    color: #04131c;
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.auth-link-primary:hover {
    color: #04131c;
    background: #28b9ff;
}

.auth-account {
    color: #aab6c8;
}

.auth-logout {
    color: #8f9bae;
}

.balance-nav {
    padding: 0 14px;
    color: var(--color-accent) !important;
}

.balance-nav:hover {
    color: #04131c !important;
}

.public-theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: #aab6c8;
}

.public-nav-search {
    flex: 0 0 142px;
    min-width: 0;
}

@media (max-width: 1180px) and (min-width: 721px) {
    .header { width: calc(100% - 28px); }
    .navbar { gap: 10px; padding-inline: 14px; }
    .logo { min-width: 92px; }
    .logo-text { font-size: 18px; }
    .public-nav-search { flex-basis: 118px; }
    .navbar-wrapper ul { gap: 2px; }
    .navbar-wrapper ul li a { gap: 4px; padding-inline: 6px; font-size: 11px; }
    .auth-link { padding-inline: 7px; }
    .balance-nav { max-width: 132px; padding-inline: 8px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 1080px) and (min-width: 721px) {
    .navbar {
        gap: 12px;
        padding-inline: 16px;
    }
    .navbar-wrapper ul {
        gap: 10px;
    }
    .auth-link,
    .balance-nav {
        padding-inline: 9px;
    }
    .auth-account {
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 720px) {
    .header {
        width: calc(100% - 16px);
        top: 8px;
        border-radius: 17px;
    }
    .navbar {
        grid-template-columns: 1fr auto;
        min-height: 62px;
        padding: 0 12px 0 16px;
    }
    .logo {
        min-width: 0;
    }
    .navbar-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        position: static;
        display: none;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .nav-actions {
        grid-column: 2;
        grid-row: 1;
    }
    .nav-actions .auth-nav,
    .nav-actions > .balance-nav {
        display: none;
    }
    .navbar-mobile {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
    }
    .navbar-wrapper ul {
        display: grid;
        justify-content: stretch;
    }
    .navbar:not(.active) .navbar-wrapper ul {
        display: none;
    }
    .navbar.active .navbar-wrapper {
        position: static;
        display: block;
        padding: 8px 0 4px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .navbar.active .navbar-wrapper ul {
        display: grid;
        gap: 2px;
    }
    .navbar-wrapper li a {
        width: 100%;
    }
    .navbar.active .nav-actions .auth-nav,
    .navbar.active .nav-actions > .balance-nav {
        display: inline-flex;
    }
}

/* Noxis interface system 2026. A single visual language for shop, account and support. */
:root {
    --surface-0: #07111f;
    --surface-1: #0c1a2b;
    --surface-2: #102238;
    --surface-3: #162d46;
    --line: rgba(148, 190, 224, .18);
    --line-strong: rgba(61, 205, 255, .42);
    --ink: #f2f8ff;
    --ink-soft: #a4b6c9;
    --accent: #39d0ff;
    --accent-2: #8b7dff;
    --ok: #55dea2;
    --warning: #ffd16b;
    --danger: #ff7e9b;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-card: 0 18px 50px rgba(0, 0, 0, .24);
    --content-width: 1180px;
}

html { background: var(--surface-0); }
body {
    background:
        radial-gradient(900px 500px at 10% -10%, rgba(57, 208, 255, .11), transparent 68%),
        radial-gradient(800px 480px at 95% 20%, rgba(139, 125, 255, .10), transparent 68%),
        var(--surface-0) !important;
    color: var(--ink);
    animation: none !important;
}
body::before, body::after { display: none; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--accent); }
.skip-link {
    position: fixed; z-index: 2000; top: 8px; left: 8px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--accent); color: #03121d; font-weight: 800;
    transform: translateY(-150%); transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(100% - 32px, var(--content-width)); padding: 0; }
.header {
    width: min(100% - 32px, var(--content-width));
    background: rgba(7, 17, 31, .88);
    border: 1px solid var(--line);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .30);
}
.navbar-wrapper ul li a { color: var(--ink-soft); }
.navbar-wrapper ul li.active a, .navbar-wrapper ul li a:hover { color: var(--ink); }
.navbar-wrapper ul li.active a::after { background: var(--accent); }
.public-theme-toggle, .navbar-mobile {
    border: 1px solid var(--line) !important;
    background: rgba(255,255,255,.04) !important;
}
.public-theme-toggle:hover, .navbar-mobile:hover { border-color: var(--line-strong) !important; color: var(--accent) !important; }
.btn, .auth-submit {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), #5da3ff);
    color: #041521 !important;
    box-shadow: 0 10px 24px rgba(57, 208, 255, .18);
    font-weight: 800;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover, .auth-submit:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 14px 28px rgba(57, 208, 255, .28); }
.btn:focus-visible, .auth-submit:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(57,208,255,.42); outline-offset: 2px; }
.btn-clear, .auth-secondary { border-color: var(--line); background: rgba(255,255,255,.05); color: var(--ink) !important; box-shadow: none; }
.btn-clear:hover, .auth-secondary:hover { border-color: var(--line-strong); background: rgba(57,208,255,.10); }
.hero-section, .main-content, .stats-section, .mint-page, .auth-page { position: relative; z-index: 1; }
.hero-section { padding-top: 18px; }
.hero-banner {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(16,34,56,.95), rgba(7,17,31,.92));
    box-shadow: var(--shadow-card);
}
.hero-title { letter-spacing: -.045em; }
.hero-subtitle, .auth-lead, .subtitle { color: var(--ink-soft); }
.hero-badge, .online-pill, .product-badge, .support-status, .mint-level {
    border: 1px solid rgba(57,208,255,.22);
    border-radius: 999px;
    background: rgba(57,208,255,.10);
    color: var(--accent);
}
.stats-grid { gap: 14px; }
.stat-card, .item-id, .payment-id, .faq-item, .hero-banner, .auth-card,
.support-section, .support-thread, .mint-card, .mint-hero {
    border-color: var(--line);
    background: linear-gradient(145deg, rgba(16,34,56,.90), rgba(9,22,37,.86));
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.stat-card { border-radius: var(--radius-md); }
.stat-card:hover, .item-id:hover, .payment-id:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.stat-icon { color: var(--accent); }
.items { gap: 14px; }
.item-id { position: relative; min-height: 260px; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.item-id .image { min-height: 118px; background-size: cover; background-position: center; border-radius: 12px; }
.item-id .title { color: var(--ink); font-size: 16px; font-weight: 800; }
.item-id .description { color: var(--ink-soft); }
.item-id .price { color: var(--accent); font-size: 18px; font-weight: 800; }
.item-id .discount { color: var(--warning); }
.tabs-wrapper, .shop-toolbar { border-color: var(--line); }
.tab-links { gap: 8px; }
.tab-links > li > a { border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); }
.tab-links > li.active > a, .tab-links > li > a:hover { border-color: var(--line-strong); background: rgba(57,208,255,.12); color: var(--ink); }
.shop-control, .choice-picker-toggle { border-color: var(--line); background: rgba(7,17,31,.66); color: var(--ink); }
.shop-control input, .shop-control select, .choice-picker select { color: var(--ink); }
.panel, .payment-list, .faq-answer { border-color: var(--line); background: rgba(7,17,31,.42); }
.faq-question { color: var(--ink); }
.modal { background: rgba(2, 8, 17, .78); backdrop-filter: blur(8px); }
.modal-content { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: 0 28px 80px rgba(0,0,0,.48); }
.modal-header { border-bottom-color: var(--line); color: var(--ink); }
.modal-footer { border-top-color: var(--line); }
.input-block label, .auth-form label { color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.input-block input, .input-block select, .input-block textarea, .auth-input, .auth-form textarea,
.auth-form input, .auth-form select {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: rgba(3, 12, 23, .62); color: var(--ink);
}
.auth-form input, .auth-form textarea, .auth-form select { min-height: 46px; }
.auth-page { padding: 18px 0 64px; }
.auth-shell { width: min(100% - 32px, 760px); }
.auth-card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.auth-card h1 { letter-spacing: -.04em; }
.auth-eyebrow, .support-kicker, .mint-kicker { color: var(--accent); font-weight: 800; letter-spacing: .12em; }
.auth-alert { border-radius: var(--radius-sm); border-width: 1px; }
.auth-alert-error { border-color: rgba(255,126,155,.38); background: rgba(255,126,155,.10); color: #ffb6c7; }
.auth-alert-success { border-color: rgba(85,222,162,.38); background: rgba(85,222,162,.10); color: #9bf0c7; }
.auth-switch a { color: var(--accent); font-weight: 800; }
.account-shell, .support-shell { width: min(100% - 32px, 980px); }
.account-card, .support-card { max-width: none; }
.account-details, .account-overview { gap: 12px; }
.account-details > div, .account-overview a, .account-history > div, .account-activity-item,
.support-ticket, .support-message { border-color: var(--line); background: rgba(255,255,255,.035); }
.account-details span, .account-history span, .account-activity-item small, .support-ticket small, .support-message small { color: var(--ink-soft); }
.account-overview a:hover, .support-ticket:hover, .support-ticket.is-selected { border-color: var(--line-strong); background: rgba(57,208,255,.08); }
.support-layout { gap: 14px; }
.support-ticket-list { gap: 8px; }
.support-section-head, .support-thread-head { border-bottom-color: var(--line); }
.support-status.is-open { background: rgba(85,222,162,.12); color: var(--ok); }
.mint-page { padding: 28px 0 72px; }
.mint-art-hero { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.mint-hero { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.mint-new-grid { gap: 16px; }
.mint-card { border-radius: var(--radius-md); }
.mint-new-console { min-height: 520px; }
.mint-orb { border-color: var(--line-strong); box-shadow: 0 0 0 10px rgba(57,208,255,.06), 0 0 70px rgba(57,208,255,.25); }
.mint-orb:not(:disabled):hover { transform: scale(1.04); }
.mint-orb:disabled { filter: grayscale(.35); opacity: .58; cursor: not-allowed; }
.mint-result { border-color: rgba(0,210,255,.12); background: rgba(255,255,255,.02); }
.mint-odd { border-bottom-color: var(--line); }
.mint-odd b, .mint-balance b { color: var(--accent); }
.footer { border-top: 1px solid var(--line); background: rgba(4,12,22,.75); }
.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--accent); }
.auth-footer { padding: 26px 0; }

/* Accessible light theme shared by every public page. */
.public-light {
    --surface-0: #f1f6fb; --surface-1: #fff; --surface-2: #edf5fb; --surface-3: #dcecf7;
    --line: rgba(30, 78, 112, .16); --line-strong: rgba(0, 137, 195, .42);
    --ink: #122638; --ink-soft: #587187; --accent: #007eaf;
    background: #f1f6fb !important; color: var(--ink);
}
.public-light .header { background: rgba(255,255,255,.92); }
.public-light .hero-banner, .public-light .stat-card, .public-light .item-id, .public-light .payment-id,
.public-light .faq-item, .public-light .auth-card, .public-light .support-section,
.public-light .support-thread, .public-light .mint-card, .public-light .mint-hero { background: #fff; }
.public-light .input-block input, .public-light .auth-form input, .public-light .auth-form textarea,
.public-light .auth-form select, .public-light .shop-control, .public-light .choice-picker-toggle { background: #f8fbfd; color: var(--ink); }
.public-light .footer { background: #e8f1f7; }

.status-page-card { max-width: 760px; }
.status-service {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.035);
}
.status-service > div { min-width: 0; flex: 1; }
.status-service strong, .status-service small { display: block; }
.status-service small { margin-top: 3px; color: var(--ink-soft); }
.status-service > b { color: var(--ok); }
.status-service.is-error > b { color: var(--danger); }
.status-service-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px var(--ok); }
.status-service.is-error .status-service-dot { background: var(--danger); box-shadow: 0 0 14px var(--danger); }
.status-updated { margin-top: 18px; }

/* Mint hero alignment and safe spacing */
.mint-page {
    padding-top: 34px;
}

.mint-art-hero {
    margin-bottom: 20px;
}

.mint-new-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 246px;
    padding: 28px 30px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(57, 208, 255, .12), transparent 38%),
        linear-gradient(135deg, rgba(12, 35, 56, .96), rgba(7, 17, 31, .96));
    box-shadow: 0 20px 55px rgba(0, 0, 0, .2);
}

.mint-new-hero > div:first-child {
    min-width: 0;
}

.mint-hero-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.mint-new-hero .auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.mint-new-hero h1 {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
}

.mint-new-hero p {
    margin: 18px 0 0;
}

.mint-hero-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.mint-hero-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    white-space: nowrap;
}

/* Final navigation overrides: keep the new header consistent with legacy rules above. */
.header {
    width: min(1400px, calc(100% - 32px));
    border-radius: 16px;
}
.header .container { width: 100%; }
.header .navbar { height: auto; min-height: 64px; padding: 12px 20px; gap: 16px; }
.header .logo { flex: 0 0 auto; }
.header .navbar-wrapper { flex: 1 1 auto; min-width: 0; }
.header .public-nav-search { display: none !important; }
.header .navbar-wrapper ul { display: flex; justify-content: center; gap: 5px; min-width: 0; }
.header .navbar-wrapper ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}
.header .navbar-wrapper ul li a::after { display: none; }
.header .navbar-wrapper ul li.active a {
    color: #041521;
    background: var(--accent);
    box-shadow: 0 8px 22px rgba(57, 208, 255, .2);
}
.header .navbar-wrapper ul li.active a i { color: #041521; }
.header .navbar-wrapper ul li:not(.active) a:hover { background: rgba(57, 208, 255, .08); }
.header .auth-link {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}
.header .auth-link:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(57,208,255,.08); }
.header .nav-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; }
.header .auth-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.header .public-theme-toggle,
.header .navbar-mobile {
    display: inline-grid;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}
.header .navbar-mobile { display: none; }
.header .auth-link-primary.auth-admin { border-color: transparent; background: var(--accent); color: #041521; }
.header .auth-link-primary.auth-admin i { color: #041521; }
.header .auth-logout-form { display: contents; }
.header .balance-nav { min-height: 42px; padding-inline: 13px; border-color: rgba(57,208,255,.2); background: rgba(57,208,255,.07); }
@media (max-width: 1199px) and (min-width: 768px) {
    .header .navbar-wrapper ul { gap: 8px; }
    .header .navbar-wrapper ul li a {
        position: relative;
        width: 42px;
        justify-content: center;
        padding: 0;
        font-size: 0;
    }
    .header .navbar-wrapper ul li a i { margin: 0; font-size: 14px; }
    .header .navbar-wrapper ul li a span { display: none; }
    .header .navbar-wrapper ul li a::before { content: attr(title); }
    .header .navbar-wrapper ul li a::before {
        position: absolute;
        z-index: 5;
        bottom: -34px;
        display: none;
        padding: 6px 8px;
        border: 1px solid rgba(150,205,238,.18);
        border-radius: 7px;
        color: #eaf8ff;
        background: #0a1626;
        font-size: 10px;
        white-space: nowrap;
        pointer-events: none;
    }
    .header .navbar-wrapper ul li a:hover::before { display: block; }
    .header .auth-link { padding-inline: 10px; }
    .header .auth-link span { display: none; }
    .header .balance-nav { max-width: 44px; overflow: hidden; padding-inline: 12px; white-space: nowrap; }
}
@media (max-width: 767px) {
    .header .navbar-mobile { display: inline-grid; place-items: center; }
    .header .navbar-wrapper {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: none;
        padding: 8px;
        border: 1px solid rgba(150,205,238,.18);
        border-radius: 16px;
        background: rgba(7,15,28,.98);
        box-shadow: 0 24px 55px rgba(0,0,0,.3);
    }
    .header .navbar.active .navbar-wrapper { display: block; }
    .header .navbar-wrapper ul { display: grid; gap: 3px; }
    .header .navbar-wrapper ul li a { justify-content: flex-start; min-height: 44px; width: 100%; }
    .header .navbar-wrapper ul li.active a { color: var(--ink); background: rgba(57,208,255,.12); box-shadow: none; }
    .header .navbar-wrapper ul li.active a i { color: var(--accent); }
    .header .navbar .auth-nav,
    .header .public-theme-toggle { display: none; }
    .header .balance-nav { display: inline-flex; max-width: 128px; min-height: 40px; overflow: hidden; padding-inline: 11px; white-space: nowrap; }
    .header .balance-nav::first-letter { color: #62e6ff; }
}

.mint-hero-pills span strong {
    color: inherit;
    font-size: inherit;
    font-weight: 700;
}

.mint-hero-pills i {
    margin: 0;
    flex: 0 0 auto;
}

/* Purchase modal: structured checkout inspired by modern game stores. */
.purchase-step-heading { margin-bottom: 16px; }
.purchase-step-heading strong { display: block; color: #f4f9ff; font-size: 22px; letter-spacing: -.03em; }
.purchase-step-heading span { display: block; margin-top: 2px; color: #8fa9bc; font-size: 13px; }
.purchase-periods { display: grid; gap: 10px; margin-bottom: 24px; }
.purchase-period { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(98,230,255,.2); border-radius: 14px; background: rgba(98,230,255,.045); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.purchase-period:hover { border-color: rgba(98,230,255,.6); transform: translateY(-1px); }
.purchase-period.is-selected { border: 2px solid #4aa9ff; background: rgba(74,169,255,.18); }
.purchase-period input { position: absolute; opacity: 0; pointer-events: none; }
.purchase-radio { width: 23px; height: 23px; border: 2px solid #55b7ff; border-radius: 50%; }
.purchase-period.is-selected .purchase-radio { box-shadow: inset 0 0 0 5px #4aa9ff; background: #4aa9ff; }
.purchase-period-copy b, .purchase-period-copy small, .purchase-cashback b, .purchase-cashback small { display: block; }
.purchase-period-copy b { color: #eaf7ff; font-size: 15px; }
.purchase-period-copy small, .purchase-cashback small { color: #88a9bf; font-size: 10px; }
.purchase-cashback { min-width: 120px; padding: 7px 9px; border-radius: 8px; background: rgba(82,177,255,.2); text-align: center; }
.purchase-cashback b { color: #c9eaff; font-size: 11px; }
.purchase-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px 17px;
    border-bottom: 1px solid rgba(150,205,238,.14);
    background: linear-gradient(135deg, rgba(22,47,76,.92), rgba(10,20,36,.88));
}
.purchase-kicker {
    display: block;
    margin-bottom: 6px;
    color: #62e6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.purchase-modal-head .modal-header {
    padding: 0;
    border: 0;
    color: #f4f9ff;
    font-size: 24px;
    text-align: left;
}
.purchase-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(150,205,238,.2);
    border-radius: 12px;
    color: #9bb4c8;
    background: rgba(255,255,255,.04);
    cursor: pointer;
}
.purchase-close:hover { border-color: #62e6ff; color: #62e6ff; background: rgba(98,230,255,.1); }
.purchase-form-panel {
    padding: 24px 28px 28px !important;
    background: rgba(7,15,27,.42);
}
.purchase-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #718ba1;
    font-size: 11px;
    font-weight: 700;
}
.purchase-steps span { display: inline-flex; align-items: center; gap: 7px; }
.purchase-steps span.is-active { color: #eaf8ff; }
.purchase-steps b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #071521;
    background: #62e6ff;
}
.purchase-steps i { color: #536d82; }
.purchase-form-panel .input-block { margin-bottom: 16px; }
.purchase-form-panel .input-block label { display: flex; justify-content: space-between; color: #c7d7e4; }
.purchase-form-panel .input-block label span { color: #718ba1; font-size: 10px; font-weight: 500; }
.purchase-form-panel input {
    min-height: 50px;
    border-color: rgba(150,205,238,.18);
    border-radius: 13px;
    background: rgba(4,11,20,.72);
}
.purchase-product-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(98,230,255,.25);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(98,230,255,.13), rgba(154,140,255,.12));
}
.purchase-product-art {
    display: grid;
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(98,230,255,.55);
    border-radius: 18px;
    background: rgba(4,11,20,.72);
}
.purchase-product-art img { width: 100%; height: 100%; object-fit: cover; }
.purchase-product-copy { min-width: 0; }
.purchase-product-copy h2 { margin: 0 0 6px; color: #f4f9ff; font-size: 22px; letter-spacing: -.04em; }
.purchaseProductPeriod { color: #79caff; font-size: 15px; }
.purchase-product-copy p { margin: 0; color: #b4c7d7; font-size: 12px; line-height: 1.55; }
.purchase-current-price {
    display: inline-block;
    margin-top: 10px;
    color: #f7c85f;
    font-size: 18px;
    letter-spacing: -.02em;
}

/* Noxis storefront 2026: a clean commerce shell layered over legacy markup. */
:root {
    --store-bg: #07111d;
    --store-panel: #0c1929;
    --store-panel-2: #10243a;
    --store-line: rgba(149, 192, 230, .16);
    --store-muted: #8ca4ba;
    --store-bright: #edf7ff;
    --store-blue: #46c8ff;
    --store-violet: #8d8bff;
    --store-yellow: #ffc85b;
    --store-radius: 18px;
}
body {
    background:
        radial-gradient(900px 500px at 72% -10%, rgba(70, 200, 255, .12), transparent 70%),
        radial-gradient(760px 500px at -10% 45%, rgba(141, 139, 255, .08), transparent 68%),
        var(--store-bg) !important;
    color: var(--store-bright);
}
.header {
    top: 14px;
    width: min(1180px, calc(100% - 32px));
    border: 1px solid var(--store-line);
    border-radius: 18px;
    background: rgba(7, 17, 29, .82);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .26);
    backdrop-filter: blur(22px);
}
.header .container { max-width: none; padding-inline: 18px; }
.navbar { min-height: 66px; }
.logo-text { letter-spacing: -.06em; }
.navbar-wrapper ul { gap: 4px; }
.navbar-wrapper li a {
    min-height: 40px;
    border-radius: 11px;
    color: var(--store-muted);
    font-size: 12px;
}
.navbar-wrapper li.active a,
.navbar-wrapper li a:hover {
    color: var(--store-bright);
    background: rgba(70, 200, 255, .1);
}
.balance-nav {
    min-height: 40px;
    border: 1px solid rgba(255, 200, 91, .25);
    border-radius: 11px;
    color: var(--store-yellow);
    background: rgba(255, 200, 91, .08);
}
.hero-section { padding-top: 28px; }
.hero-banner {
    min-height: 390px;
    padding: clamp(30px, 5vw, 68px);
    overflow: hidden;
    border: 1px solid rgba(70, 200, 255, .2);
    border-radius: 28px;
    background:
        linear-gradient(112deg, rgba(13, 36, 58, .96), rgba(10, 21, 37, .86)),
        radial-gradient(circle at 85% 25%, rgba(70, 200, 255, .18), transparent 35%);
}
.hero-title { max-width: 680px; font-size: clamp(48px, 8vw, 94px); line-height: .95; }
.hero-subtitle { max-width: 610px; color: #b1c4d5; font-size: 15px; }
.hero-features { gap: 9px; }
.hero-features span {
    border: 1px solid var(--store-line);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
}
.btn-hero-primary {
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--store-blue), #6e8cff);
    box-shadow: 0 13px 30px rgba(70, 200, 255, .2);
}
.stats-section { padding-block: 26px; }
.stats-grid { gap: 12px; }
.stat-card {
    border: 1px solid var(--store-line);
    border-radius: 16px;
    background: rgba(12, 25, 41, .76);
    box-shadow: none;
}
.main-content { padding-top: 10px; }
.server-selector-container { text-align: left !important; }
.server-buttons { background: rgba(12, 25, 41, .78) !important; border-color: var(--store-line) !important; border-radius: 14px !important; }
.tabs .tab-links > li > a,
.tab-links a { border-radius: 11px; }
.shop-toolbar { border-color: var(--store-line); background: rgba(12, 25, 41, .78); }
.item-id {
    border: 1px solid var(--store-line);
    border-radius: var(--store-radius);
    background: linear-gradient(145deg, rgba(16, 36, 58, .9), rgba(8, 19, 32, .92));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
.item-id:hover { border-color: rgba(70, 200, 255, .55); transform: translateY(-4px); }
.items { align-items: stretch; }
.items .item-id {
    display: grid;
    grid-template-rows: 156px auto auto 1fr auto;
    min-height: 340px;
    padding: 14px;
}
.items .item-id .image {
    width: 100%;
    min-height: 156px;
    border-radius: 14px;
    background-color: rgba(2, 10, 19, .5);
    background-size: contain;
}
.items .item-id .title { margin-top: 13px; font-size: 17px; letter-spacing: -.03em; }
.items .item-id .description { min-height: 42px; color: var(--store-muted); font-size: 11px; line-height: 1.5; }
.items .item-id .price { align-self: end; margin-top: 14px; }
.item-id .price { color: var(--store-yellow); font-size: 20px; }
.faq-item, .payment-id.window { border-color: var(--store-line); background: rgba(12, 25, 41, .72); }
.modal {
    background: rgba(2, 8, 15, .78);
    backdrop-filter: blur(12px);
}
.modal .wrapper {
    width: min(920px, calc(100% - 28px));
    max-height: min(850px, calc(100vh - 28px));
}
.modal-content {
    overflow: hidden;
    border: 1px solid rgba(70, 200, 255, .25);
    border-radius: 22px;
    background: #091522;
    box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.purchase-modal-head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--store-line);
    background: linear-gradient(100deg, rgba(16, 39, 64, .96), rgba(11, 24, 40, .96));
}
.purchase-modal-head .modal-header { font-size: 20px; }
.modal-split { gap: 0; padding: 0; }
.modal-left { padding: 28px 24px; background: #081421; }
.modal-right { padding: 24px; background: #0d1724; }
.purchase-step-heading { margin-bottom: 16px; }
.purchase-step-heading strong { color: var(--store-blue); font-size: 13px; }
.purchase-step-heading span { color: var(--store-muted); }
.purchase-periods { gap: 10px; }
.purchase-period {
    min-height: 64px;
    border: 1px solid var(--store-line);
    border-radius: 13px;
    background: rgba(14, 32, 51, .7);
}
.purchase-period:hover, .purchase-period.is-selected {
    border-color: var(--store-blue);
    background: linear-gradient(100deg, rgba(28, 76, 111, .74), rgba(20, 42, 70, .82));
    box-shadow: 0 0 0 3px rgba(70, 200, 255, .12);
}
.purchase-period-copy b { color: var(--store-bright); }
.purchase-period-copy small { color: var(--store-muted); }
.purchase-period-meta { color: var(--store-yellow); }
.input-block label, .payment-label { color: #bcd0df; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.input-block input, .payment-methods .method-card, #promo {
    min-height: 48px;
    border: 1px solid var(--store-line);
    border-radius: 12px;
    background: #07111c;
    color: var(--store-bright);
}
.input-block input:focus, #promo:focus { border-color: var(--store-blue); box-shadow: 0 0 0 3px rgba(70, 200, 255, .12); }
.player-preview { border-color: var(--store-line); border-radius: 13px; background: rgba(16, 36, 58, .65); }
.purchase-product-card {
    border: 1px solid rgba(70, 200, 255, .3);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(29, 55, 81, .9), rgba(25, 31, 57, .9));
}
.purchase-product-art { border-radius: 13px; }
.purchase-product-copy h2 { font-size: 20px; }
.purchase-current-price { color: var(--store-yellow); font-size: 20px; }
.purchase-benefits { border-color: var(--store-line); border-radius: 14px; background: rgba(255,255,255,.035); }
.purchase-summary {
    display: grid;
    gap: 1px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--store-line);
    border-radius: 14px;
    background: var(--store-line);
}
.purchase-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 13px;
    background: rgba(8, 19, 32, .92);
    color: var(--store-muted);
    font-size: 11px;
}
.purchase-summary strong { color: var(--store-bright); }
.purchase-summary .purchase-summary-total { padding-block: 14px; background: rgba(20, 50, 76, .88); }
.purchase-summary-total strong { color: var(--store-yellow); font-size: 17px; }
.purchase-trust-row span { border-color: var(--store-line); background: rgba(255,255,255,.03); }
.method-card { border-color: var(--store-line) !important; background: rgba(12, 27, 44, .72) !important; }
.purchase-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--store-line);
    background: #091522;
}
.purchase-modal-footer #submitBtn { min-width: 210px; border-radius: 12px; background: linear-gradient(135deg, var(--store-blue), #7186ff); }
.purchase-modal-footer .btn-clear { border: 1px solid var(--store-line); border-radius: 12px; color: var(--store-muted); background: transparent; }
@media (max-width: 760px) {
    body { padding-top: 96px; }
    .header { top: 8px; width: calc(100% - 16px); }
    .hero-banner { min-height: 0; padding: 28px 22px; border-radius: 20px; }
    .hero-title { font-size: clamp(42px, 16vw, 72px); }
    .modal .wrapper { width: calc(100% - 14px); max-height: calc(100vh - 14px); }
    .modal-split { display: block; }
    .modal-left, .modal-right { padding: 20px 16px; }
    .purchase-product-card { margin-top: 0; }
    .purchase-modal-footer { position: sticky; bottom: 0; z-index: 2; padding: 12px 16px; }
    .purchase-modal-footer #submitBtn { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.purchase-benefits { margin-top: 16px; padding: 15px; border: 1px solid rgba(98,230,255,.16); border-radius: 14px; background: rgba(255,255,255,.025); color: #abc2d2; font-size: 11px; }
.purchase-benefits strong { color: #d8effb; }
.purchase-benefits strong i { margin-right: 6px; color: #62e6ff; }
.purchase-benefits ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 18px; }
.purchase-benefits li::marker { color: #62e6ff; }
.purchase-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 13px 0 22px;
    color: #92aabe;
    font-size: 10px;
}
.purchase-trust-row span { padding: 7px 9px; border: 1px solid rgba(150,205,238,.13); border-radius: 99px; background: rgba(255,255,255,.03); }
.purchase-trust-row i { margin-right: 4px; color: #62e6ff; }
.purchase-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px 24px !important; }
.purchase-modal-footer #submitBtn { min-width: 180px; }
@media (max-width: 700px) {
    .purchase-modal-head { padding: 20px 18px 15px; }
    .purchase-modal-head .modal-header { font-size: 20px; }
    .purchase-form-panel { padding: 20px 18px !important; }
    .purchase-modal-footer { display: grid; grid-template-columns: 1fr; padding: 15px 18px 20px !important; }
    .purchase-modal-footer #submitBtn { width: 100%; }
    .purchase-product-card { padding: 15px; }
    .purchase-period { grid-template-columns: 23px minmax(0,1fr); align-items: start; }
    .purchase-period-copy { min-width: 0; padding-top: 2px; }
    .purchase-period-copy b, .purchase-period-copy small { overflow-wrap: anywhere; }
    .purchase-cashback { grid-column: 2; justify-self: start; min-width: 0; max-width: 100%; margin-top: 4px; }
}

.mint-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    align-self: flex-end;
}

.mint-live span {
    margin: 0;
    flex: 0 0 7px;
}

.mint-live strong {
    font-size: inherit;
    font-weight: 800;
    letter-spacing: .04em;
}

/* Platform UI kit: consistent navy surfaces, focus states and fluid spacing. */
:root {
    --ui-navy-950: #0d1117;
    --ui-navy-900: #161b22;
    --ui-blue: #00c8ff;
    --ui-blue-strong: #2563eb;
    --ui-green: #22c55e;
    --ui-red: #ef4444;
    --ui-yellow: #f59e0b;
    --ui-radius: 14px;
    --ui-shadow: 0 18px 50px rgba(0,0,0,.22);
}
body {
    overflow-x: hidden;
    color: #f2f7fb;
}
button, a, input, select, textarea, .card, .panel, .item-id, .method-card, .purchase-period {
    transition: all .2s ease-in-out;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(0,200,255,.42);
    outline-offset: 2px;
}
input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: rgba(239,68,68,.8) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.ui-status-success { color: var(--ui-green) !important; }
.ui-status-danger { color: #ff8490 !important; }
.ui-status-warning { color: #ffd166 !important; }
.modal {
    background: rgba(1,7,15,.78);
    backdrop-filter: blur(8px);
}
.modal > .wrapper { width: min(940px, calc(100% - 28px)); }
.modal-content { border: 1px solid rgba(0,200,255,.2); border-radius: 18px; box-shadow: var(--ui-shadow); }
.modal-body.modal-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.86fr); gap: 0; }
.modal-left, .modal-right { min-width: 0; }
.modal-right { padding: 24px 28px 28px; background: rgba(22,27,34,.55); }
.orders-table-wrap, .log-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.orders-table, .log-table { min-width: 720px; }
.account-overview, .account-details { min-width: 0; }
@media (max-width: 767px) {
    .modal > .wrapper { width: min(100% - 18px, 560px); }
    .modal-body.modal-split { grid-template-columns: 1fr; }
    .modal-right { padding: 20px 18px 22px; }
    .purchase-product-card { order: -1; }
    .orders-table, .log-table { min-width: 650px; }
    .account-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 420px) {
    .account-overview { grid-template-columns: 1fr; }
    .modal-footer.purchase-modal-footer { padding-inline: 18px !important; }
}

.checkout-result-page {
    display: grid;
    min-height: min(640px, calc(100vh - 132px));
    place-items: center;
    padding: 44px 18px 56px;
}
.checkout-result-card {
    width: min(100%, 610px);
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 6vw, 58px);
    border: 1px solid rgba(98, 230, 255, .22);
    border-radius: 26px;
    background:
        radial-gradient(400px 220px at 50% 0, rgba(98, 230, 255, .12), transparent 75%),
        linear-gradient(145deg, rgba(17, 40, 64, .96), rgba(8, 19, 33, .98));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
    text-align: center;
}
.checkout-result-card::after {
    position: absolute;
    inset: auto 12% 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(98, 230, 255, .45), transparent);
}
.checkout-result-card.checkout-result-error { border-color: rgba(255, 143, 164, .25); }
.checkout-result-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid rgba(98, 230, 255, .38);
    border-radius: 22px;
    color: #071521;
    background: linear-gradient(135deg, #62e6ff, #8f8cff);
    box-shadow: 0 14px 36px rgba(98, 230, 255, .2);
    font-size: 28px;
}
.checkout-result-error .checkout-result-icon {
    border-color: rgba(255, 143, 164, .35);
    color: #fff;
    background: linear-gradient(135deg, #ff7897, #c56cff);
    box-shadow: 0 14px 36px rgba(255, 120, 151, .18);
}
.checkout-result-kicker {
    color: #62e6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.checkout-result-error .checkout-result-kicker { color: #ff9eb5; }
.checkout-result-card h1 {
    margin: 10px 0 9px;
    color: #f2f8ff;
    font-size: clamp(25px, 5vw, 38px);
    letter-spacing: -.05em;
}
.checkout-result-card p {
    max-width: 460px;
    margin: 0 auto;
    color: #9bb2c6;
    font-size: 14px;
    line-height: 1.7;
}
.checkout-result-order {
    display: grid;
    gap: 6px;
    margin: 22px auto 0;
    padding: 13px 15px;
    border: 1px solid rgba(98, 230, 255, .16);
    border-radius: 10px;
    color: #9bb2c6;
    font-size: 11px;
    text-align: left;
}
.checkout-result-order span {
    color: #7691a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.checkout-result-order code { color: #62e6ff; overflow-wrap: anywhere; }
.checkout-result-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: #91a9bd;
    font-size: 11px;
    line-height: 1.5;
}
.checkout-result-note i { color: #62e6ff; }
.checkout-result-error .checkout-result-note i { color: #ff9eb5; }
.checkout-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 28px;
}
.checkout-result-actions .btn { min-height: 46px; }
.checkout-result-support {
    display: inline-block;
    margin-top: 24px;
    color: #8ca4ba;
    font-size: 11px;
    text-decoration: none;
}
.checkout-result-support:hover { color: #62e6ff; }
@media (max-width: 600px) {
    .checkout-result-page { min-height: calc(100vh - 110px); padding: 24px 12px 38px; }
    .checkout-result-card { padding: 30px 19px; border-radius: 20px; }
    .checkout-result-actions { display: grid; }
    .checkout-result-actions .btn { width: 100%; }
    .checkout-result-note { align-items: flex-start; text-align: left; }
}

/* Storefront refresh: clearer hierarchy, quieter controls and stronger cards. */
.catalog-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 18px;
    padding: 28px 28px 24px;
    border: 1px solid rgba(53, 200, 255, .22);
    border-radius: 26px;
    background:
        radial-gradient(circle at 12% 18%, rgba(53, 200, 255, .18), transparent 26%),
        radial-gradient(circle at 88% 22%, rgba(65, 120, 255, .18), transparent 28%),
        linear-gradient(180deg, rgba(16, 26, 40, .98), rgba(9, 17, 28, .96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 50px rgba(1, 6, 16, .24);
    overflow: hidden;
}
.catalog-intro::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgba(53,200,255,0), rgba(53,200,255,.96), rgba(65,120,255,.96), rgba(53,200,255,0));
    box-shadow: 0 0 18px rgba(53,200,255,.4);
}
.catalog-intro::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -58px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 200, 255, .26), transparent 62%);
    pointer-events: none;
}
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.section-kicker i {
    font-size: 12px;
}
.catalog-intro h2 {
    margin: 12px 0 10px;
    color: var(--text-primary);
    font-size: clamp(30px, 3.6vw, 58px);
    line-height: .95;
    letter-spacing: -.07em;
    text-shadow: 0 14px 28px rgba(53,200,255,.12);
}
.catalog-intro p {
    margin: 0;
    max-width: 760px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}
.catalog-intro-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    padding: 13px 16px;
    border: 1px solid rgba(53, 200, 255, .18);
    border-radius: 16px;
    background: rgba(12, 21, 34, .84);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.18);
}
.catalog-intro-meta > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: rgba(53, 200, 255, .1);
    color: var(--color-accent);
    font-size: 16px;
    box-shadow: inset 0 0 0 1px rgba(53,200,255,.18);
}
.catalog-intro-meta span {
    display: block;
    line-height: 1.35;
}
.catalog-intro-meta small {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
}
.server-selector-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px !important;
    padding: 12px 14px;
    border: 1px solid rgba(160, 178, 205, .16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(17, 28, 39, .9), rgba(9, 17, 28, .9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.server-selector-label { display: grid; gap: 3px; padding-left: 6px; }
.server-selector-label span { color: var(--text-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.server-selector-label strong { color: var(--text-primary); font-size: 14px; }
.server-buttons {
    display: inline-flex !important;
    gap: 6px !important;
    padding: 4px !important;
    border: 1px solid rgba(160, 178, 205, .12);
    border-radius: 14px;
    background: rgba(8, 15, 25, .7);
}
.server-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.server-btn:hover {
    color: var(--text-primary);
    border-color: rgba(53,200,255,.26);
    background: rgba(53,200,255,.06);
    transform: translateY(-1px);
}
.server-btn.active {
    color: #00131d;
    background: linear-gradient(135deg, #7fe7ff, var(--color-accent));
    box-shadow: 0 10px 24px rgba(var(--color-accent-rgb), .22);
}
.server-btn i { font-size: 11px; }
.shop-toolbar { justify-content: space-between; }
.shop-toolbar::before { content: "Найди подходящую привилегию"; color: var(--text-secondary); font-size: 11px; margin-right: auto; }
.item-id {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(160,178,205,.14);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.item-id::after {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0;
    transition: opacity .2s ease;
}
.item-id:hover::after { opacity: 1; }
.item-id .image { transition: transform .35s ease; }
.item-id:hover .image { transform: scale(1.04); }
@media (max-width: 700px) {
    .catalog-intro {
        display: grid;
        align-items: stretch;
        gap: 18px;
        margin-top: 24px;
        padding: 18px 18px 16px;
    }
    .server-selector-container { align-items: stretch; flex-direction: column; }
    .catalog-intro-meta {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }
    .server-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-btn { justify-content: center; }
    .shop-toolbar::before { display: none; }
}

@media (max-width: 700px) {
    .mint-page {
        padding-top: 20px;
    }
    .mint-new-hero {
        display: block;
        min-height: 0;
        padding: 24px 20px;
    }
    .mint-new-hero h1 {
        font-size: clamp(30px, 9vw, 40px);
    }
    .mint-live {
        display: inline-block;
        margin-top: 22px;
    }
    .mint-live {
        display: inline-flex;
    }
}

@media (max-width: 720px) {
    .container, .auth-shell, .account-shell, .support-shell { width: min(100% - 24px, var(--content-width)); }
    body { padding-top: 88px; }
    .hero-section { padding-top: 8px; }
    .hero-banner { padding: 28px 18px; }
    .hero-title { font-size: clamp(32px, 12vw, 58px); }
    .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-bar { align-items: flex-start; flex-direction: column; }
    .mint-new-grid { grid-template-columns: 1fr; }
    .mint-new-console { min-height: 0; }
}
@media (max-width: 480px) {
    .items { grid-template-columns: 1fr; }
    .auth-card, .support-card, .account-card { padding: 20px 16px; }
    .account-actions { display: grid; grid-template-columns: 1fr; }
    .support-layout { grid-template-columns: 1fr; }
    .support-hero { display: block; }
    .support-hero-status { margin-top: 18px; }
    .support-info-strip { grid-template-columns: 1fr; gap: 4px; }
    .support-info-strip > div { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Helpdesk workspace refresh. */
.support-card { padding: clamp(22px, 4vw, 42px); }
.support-hero h1 { font-size: clamp(34px, 5vw, 54px); }
.support-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.support-stats > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(255,255,255,.025); }
.support-stats b, .support-stats small { display: block; }
.support-stats b { color: var(--text-primary); font-size: 19px; line-height: 1; }
.support-stats small { margin-top: 5px; color: var(--text-secondary); font-size: 10px; }
.support-stat-icon { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: var(--color-accent); background: rgba(var(--color-accent-rgb),.12); }
.support-stat-icon.is-green { color: #72e0a3; background: rgba(114,224,163,.11); }
.support-stat-icon.is-purple { color: #b7a6ff; background: rgba(183,166,255,.11); }
.support-form-intro { margin: 12px 0 -2px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.support-quick-replies { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 2px; }
.support-quick-replies button { padding: 7px 10px; border: 1px solid rgba(53,200,255,.2); border-radius: 8px; color: #9fc9df; background: rgba(53,200,255,.06); cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.support-quick-replies button:hover, .support-quick-replies button:focus-visible { border-color: rgba(53,200,255,.55); color: #d9f5ff; background: rgba(53,200,255,.13); outline: 0; }
.support-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support-form-grid label { margin-top: 0; }
.support-thread-note { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 10px 12px; border: 1px solid rgba(var(--color-accent-rgb),.16); border-radius: 10px; color: var(--text-secondary); background: rgba(var(--color-accent-rgb),.06); font-size: 11px; line-height: 1.45; }
.support-thread-note i { color: var(--color-accent); margin-top: 2px; }
@media (max-width: 700px) {
    .support-stats { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .support-card { padding: 22px 16px; }
    .support-form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Unified interface layer: shared surfaces and page rhythm across the site. */
:root {
    --surface-0: #080d16;
    --surface-1: #0d1623;
    --surface-2: #121f30;
    --line-soft: rgba(156, 204, 235, .15);
    --text-muted: #8fa6b9;
    --accent-soft: rgba(0, 200, 255, .12);
    --radius-lg: 20px;
}
.header {
    border: 1px solid rgba(156,204,235,.12);
    border-top: 0;
    background: rgba(8,13,22,.86);
    backdrop-filter: blur(22px);
}
.navbar { min-height: 68px; }
.logo { letter-spacing: -.04em; }
.logo-dot { box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb),.1), 0 0 24px rgba(var(--color-accent-rgb),.55); }
.navbar-wrapper ul { gap: 6px; }
.navbar-wrapper a, .auth-link, .public-theme-toggle, .navbar-mobile {
    border: 1px solid transparent;
    border-radius: 11px;
}
.navbar-wrapper a { min-height: 40px; padding-inline: 12px; }
.navbar-wrapper li.active a, .navbar-wrapper a:hover, .auth-link:hover {
    border-color: rgba(var(--color-accent-rgb),.22);
    background: rgba(var(--color-accent-rgb),.09);
}
.auth-link-primary, .auth-admin { box-shadow: 0 8px 22px rgba(var(--color-accent-rgb),.12); }
.balance-nav { border: 1px solid rgba(var(--color-accent-rgb),.25); border-radius: 11px; background: linear-gradient(135deg,rgba(var(--color-accent-rgb),.13),rgba(130,148,255,.1)); }
.footer { border-top: 1px solid var(--line-soft); background: rgba(5,10,18,.72); }
.auth-page { padding-block: 36px 72px; }
.auth-shell { width: min(1120px, calc(100% - 32px)); }
.auth-card, .support-card, .customer-orders-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(18,31,48,.92), rgba(8,15,25,.96));
    box-shadow: 0 24px 70px rgba(0,0,0,.26);
}
.auth-card h1, .customer-orders-card h1, .support-hero h1 { letter-spacing: -.055em; }
.auth-eyebrow, .account-progress-kicker {
    color: var(--color-accent);
    letter-spacing: .14em;
}
.auth-lead, .auth-subtitle { color: var(--text-muted); }
.auth-input, .orders-filters input, .orders-filters select, .support-filter, .support-create input, .support-create select, .support-create textarea {
    border-color: var(--line-soft);
    border-radius: 12px;
    background: rgba(4,11,20,.68);
}
.auth-input:focus-within, .orders-filters input:focus, .orders-filters select:focus, .support-create input:focus, .support-create select:focus, .support-create textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb),.1);
}
.account-details, .account-overview, .account-progress, .account-tabs, .account-section, .orders-list, .support-layout, .support-stats {
    border-color: var(--line-soft);
}
.account-details > div, .account-overview > a, .account-progress, .account-tabs, .account-history > div, .account-activity-item, .customer-order, .support-section, .support-thread {
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}
.account-overview > a:hover, .customer-order:hover { border-color: rgba(var(--color-accent-rgb),.45); transform: translateY(-2px); }
.nav-tabs { gap: 5px; padding: 6px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(4,11,20,.5); }
.nav-tabs li a { border-radius: 9px; }
.nav-tabs li.active a, .nav-tabs li a:hover { background: var(--accent-soft); color: var(--color-accent); }
.btn, .auth-submit { border-radius: 11px; }
.btn:hover { transform: translateY(-2px); }
.hero-section, .mint-page { padding-bottom: 56px; }
.items { gap: 16px; }
.item-id, .payment-id.window, .stat-card, .faq-item, .mint-card {
    border-color: var(--line-soft);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(18,31,48,.86), rgba(8,15,25,.95));
    box-shadow: 0 15px 35px rgba(0,0,0,.16);
}
.item-id:hover, .payment-id.window:hover, .stat-card:hover, .mint-card:hover { border-color: rgba(var(--color-accent-rgb),.4); box-shadow: 0 20px 46px rgba(0,0,0,.24); }
.orders-filters { display: grid; grid-template-columns: minmax(0,1fr) 190px auto; gap: 10px; }
.customer-order { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.order-status { border-radius: 99px; }
.support-layout { gap: 16px; }
.support-sidebar, .support-section { border-color: var(--line-soft); border-radius: 16px; }
.wiki-card, .wiki-section, .privilege-card { border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(18,31,48,.7); }
@media (max-width: 900px) {
    .navbar-wrapper a { padding-inline: 9px; }
    .orders-filters { grid-template-columns: 1fr 1fr; }
    .orders-filters .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .navbar { min-height: 60px; }
    .auth-page { padding-top: 20px; }
    .orders-filters { grid-template-columns: 1fr; }
    .orders-filters .btn { grid-column: auto; width: 100%; }
    .support-layout { grid-template-columns: 1fr; }
}

/* Conversation window refresh. */
.support-thread { padding: 0; overflow: hidden; background: #0a1421; }
.support-thread-head { align-items: flex-start; margin: 0; padding: 20px 22px; background: linear-gradient(120deg, #12263a, #0c1828); border-bottom: 1px solid #24364b; }
.support-thread-title { min-width: 0; }
.support-thread-title h2 { overflow: hidden; max-width: 720px; text-overflow: ellipsis; white-space: nowrap; }
.support-thread-title > small { display: block; margin-top: 7px; color: #8fa4ba; font-size: 11px; }
.support-thread-title > small i { color: #35c8ff; }
.support-thread-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; color: #8fa4ba; font-size: 11px; }
.support-thread-back:hover { color: #35c8ff; }
.support-thread-head .support-status { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-top: 2px; }
.support-conversation { display: grid; gap: 12px; max-height: 520px; padding: 20px 22px; overflow-y: auto; background: radial-gradient(circle at 20% 0%, rgba(53,200,255,.06), transparent 38%), #09111d; }
.support-message { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; margin: 0; padding: 0; border: 0; background: transparent; }
.support-message.is-mine { justify-self: end; flex-direction: row-reverse; }
.support-avatar { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 2px; border: 1px solid #2c5770; border-radius: 10px; color: #7bdfff; background: #10283a; font-size: 12px; }
.support-message.is-mine .support-avatar { border-color: rgba(114,224,163,.35); color: #9bf0c7; background: rgba(16,185,129,.12); }
.support-message-body { min-width: 0; padding: 11px 13px; border: 1px solid #24364b; border-radius: 5px 14px 14px 14px; background: #111e2d; }
.support-message.is-mine .support-message-body { border-color: rgba(53,200,255,.28); border-radius: 14px 5px 14px 14px; background: linear-gradient(145deg, #12334a, #10253a); }
.support-message-meta { align-items: baseline; }
.support-message-meta strong { font-size: 12px; }
.support-message-meta > div { display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.support-message-meta strong { display: inline-block; overflow: hidden; max-width: 190px; text-overflow: ellipsis; white-space: nowrap; }
.support-message-role { display: inline-flex !important; align-items: center; flex: 0 0 auto; margin-left: 4px !important; padding: 4px 9px; border: 1px solid rgba(137,177,255,.3); border-radius: 999px; color: #c3d7ff; background: linear-gradient(135deg, rgba(91,137,255,.36), rgba(63,94,177,.24)); font-size: 9px; font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.support-message.is-staff .support-message-role { color: #a8c5ff; background: rgba(78,134,255,.22); }
.support-message.is-staff .support-avatar { border-color: rgba(255,106,106,.55); color: #ffb0b0; background: rgba(255,86,86,.18); }
.support-message.is-staff .support-message-body { border-left: 3px solid #ff6262; }
.support-message-meta small { font-size: 10px; white-space: nowrap; }
.support-message p { margin: 7px 0 0; color: #d9e6f0; font-size: 13px; line-height: 1.55; }
.support-thread-note { margin: 0; border: 0; border-bottom: 1px solid #1b2d40; border-radius: 0; background: #0d1a29; }
.support-reply-composer { display: grid; gap: 10px; margin: 0 !important; padding: 17px 22px 20px !important; border-top: 1px solid #24364b !important; background: #0d1927; }
.support-reply-label { display: flex; justify-content: space-between; gap: 10px; color: #8fa4ba; font-size: 11px; }
.support-reply-label span:first-child { color: #d9e6f0; font-weight: 700; }
.support-reply-label i { margin-right: 5px; color: #35c8ff; }
.support-reply-composer textarea { min-height: 86px !important; border-color: #29435a; background: #09131f; }
.support-reply-composer .auth-submit { width: auto !important; justify-self: end; min-width: 170px; }
.support-closed-note { display: flex; align-items: center; gap: 9px; margin: 0; padding: 17px 22px 20px; border-top: 1px solid #24364b; color: #8fa4ba; background: #0d1927; font-size: 12px; }
.support-closed-note i { color: #72e0a3; font-size: 17px; }

/* Refined ticket visual hierarchy. */
.support-thread {
    border: 1px solid rgba(78, 134, 180, .42);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.04);
}
.support-thread-head {
    position: relative;
    padding: 24px 26px 21px;
    background: radial-gradient(circle at 100% 0, rgba(53,200,255,.14), transparent 40%), linear-gradient(135deg, #142b42, #0b1727);
}
.support-thread-title h2 { margin-top: 7px; color: #f4f9ff; font-size: clamp(20px, 3vw, 25px); }
.support-thread-back { opacity: .85; }
.support-thread-head .support-status {
    padding: 7px 12px;
    border: 1px solid rgba(114,224,163,.28);
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(16,185,129,.12);
}
.support-thread-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 26px;
    color: #9eb1c5;
    font-size: 11px;
}
.support-thread-note i { color: #35c8ff; }
.support-conversation {
    gap: 16px;
    min-height: 170px;
    padding: 24px 26px;
    background: radial-gradient(circle at 15% 0, rgba(53,200,255,.1), transparent 32%), linear-gradient(180deg, #0a1624, #08121f);
}
.support-message { max-width: min(88%, 680px); gap: 11px; }
.support-message-body {
    padding: 13px 15px 14px;
    border-radius: 8px 18px 18px 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.support-message-meta {
    min-height: 20px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(151,181,211,.14);
}
.support-message-meta small {
    color: #91a7bc;
    font-variant-numeric: tabular-nums;
}
.support-message p {
    margin-top: 11px;
    color: #e5eef7;
    letter-spacing: .005em;
}
.support-message.is-mine .support-message-body {
    border-radius: 18px 8px 18px 18px;
    box-shadow: 0 8px 24px rgba(25,126,177,.18);
}
.support-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    box-shadow: 0 5px 13px rgba(0,0,0,.18);
}
.support-message-role { letter-spacing: .02em; }
.support-reply-composer {
    padding: 20px 26px 24px !important;
    background: linear-gradient(180deg, #0c1928, #0a1522);
}
.support-reply-label { font-size: 12px; }
.support-reply-composer textarea {
    min-height: 96px !important;
    padding: 14px 15px;
    border-radius: 14px;
    box-shadow: inset 0 1px 12px rgba(0,0,0,.16);
}
.support-reply-composer .auth-submit {
    min-height: 46px;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(49,199,245,.18);
}
@media (max-width: 600px) {
    .support-thread-head { padding: 17px 16px; }
    .support-conversation { max-height: none; padding: 16px; }
    .support-message { max-width: 96%; }
    .support-reply-composer { padding: 15px 16px 17px !important; }
    .support-reply-composer .auth-submit { width: 100% !important; justify-self: stretch; }
    .support-thread-head .support-status { margin-top: 30px; }
}

/* Final desktop header fit correction. */
@media (min-width: 1200px) {
    .header { width: min(1400px, calc(100% - 32px)); }
    .header .navbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; }
    .header .navbar-wrapper { overflow: visible; }
    .header .navbar-wrapper ul { gap: 6px; }
    .header .navbar-wrapper ul li { flex: 0 0 auto; }
    .header .navbar-wrapper ul li a {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        padding-inline: 11px;
        font-size: 12px;
    }
    .header .nav-actions { gap: 7px; }
    .header .auth-account { max-width: 150px; }
    .header .auth-account span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
    .header .balance-nav { max-width: 170px; overflow: visible; text-overflow: clip; color: var(--accent) !important; }
}

    /* Public navigation drawer: a calmer alternative to the crowded horizontal bar. */
    .public-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 990;
        display: none;
        background: rgba(1,7,15,.68);
        backdrop-filter: blur(5px);
    }
    .drawer-account { display: none; }
    @media (min-width: 768px) {
        .header .navbar-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: auto;
            bottom: 0;
            z-index: 1001;
            display: flex;
            width: min(370px, 88vw);
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            padding: 96px 24px 28px;
            border-right: 1px solid rgba(156,204,235,.18);
            background: linear-gradient(160deg, #101f31, #07111e 72%);
            box-shadow: 24px 0 70px rgba(0,0,0,.36);
            transform: translateX(-105%);
            transition: transform .25s ease;
            overflow-y: auto;
            pointer-events: none;
        }
        .header .navbar.active .navbar-wrapper {
            transform: translateX(0);
            pointer-events: auto;
        }
        .header .navbar-wrapper ul {
            display: grid;
            justify-content: stretch;
            gap: 7px;
        }
        .header .navbar-wrapper ul li a {
            display: flex;
            width: 100%;
            min-height: 48px;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding: 0 14px;
            font-size: 14px;
        }
        .header .navbar-wrapper ul li a span { display: inline; }
        .header .navbar-wrapper ul li a i { width: 20px; text-align: center; }
        .header .navbar-wrapper ul li.active a { color: #041521; }
        .drawer-account {
            display: grid;
            gap: 7px;
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid rgba(156,204,235,.16);
        }
        .drawer-account .auth-link,
        .drawer-account .auth-logout-form,
        .drawer-account .auth-logout {
            width: 100%;
        }
        .drawer-account .auth-link,
        .drawer-account .auth-logout {
            display: flex;
            min-height: 46px;
            align-items: center;
            gap: 10px;
            padding: 0 14px;
        }
        .drawer-account .auth-link span { display: inline; }
        .header .nav-actions .public-theme-toggle { display: inline-grid; }
        .header .nav-actions .navbar-mobile { display: inline-grid; }
        body.public-drawer-open .public-drawer-backdrop { display: block; }
    }
    @media (max-width: 767px) {
        .header .navbar-wrapper {
            position: fixed;
            z-index: 1001;
            border-radius: 0 18px 18px 0;
            top: -12px;
            left: -12px;
            right: auto;
            width: min(330px, 88vw);
            min-height: calc(100vh + 24px);
            padding: 90px 18px 28px;
            transform: translateX(-105%);
            transition: transform .25s ease;
        }
        .header .navbar.active .navbar-wrapper { transform: translateX(0); }
        .header .navbar-wrapper ul { display: grid; }
        .header .navbar-wrapper ul li a { min-height: 48px; }
        .header .drawer-account { display: grid; }
        body.public-drawer-open .public-drawer-backdrop { display: block; }
        .header .nav-actions .public-theme-toggle { display: none; }
    }
    body.public-drawer-open { overflow: hidden; }
    .public-light .header .navbar-wrapper {
        background: linear-gradient(160deg, #f8fcff, #e9f3f9 72%);
        border-color: rgba(18,53,78,.16);
    }
    @media (prefers-reduced-motion: reduce) {
        .header .navbar-wrapper, .public-drawer-backdrop { transition: none; }
    }

    /* v3 shell: permanent desktop sidebar, drawer only on compact screens. */
    @media (min-width: 768px) {
        body { padding-top: 32px; padding-left: 280px; }
        .header {
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 1000;
            width: 260px;
            height: 100vh;
            margin: 0;
            border: 0;
            border-right: 1px solid rgba(145, 190, 222, .14);
            border-radius: 0;
            background: linear-gradient(180deg, rgba(8, 17, 30, .98), rgba(5, 11, 20, .98));
            box-shadow: 18px 0 50px rgba(0, 0, 0, .22);
            transform: none;
        }
        .header > .container {
            width: 100%;
            height: 100%;
            max-width: none;
            padding: 0;
        }
        .header .navbar {
            display: flex;
            width: 100%;
            height: 100%;
            min-height: 0;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 26px 16px 18px;
        }
        .header .logo {
            min-width: 0;
            min-height: 52px;
            padding: 0 12px;
            border-bottom: 1px solid rgba(145, 190, 222, .12);
        }
        .header .navbar-wrapper {
            position: static;
            display: flex;
            width: 100%;
            min-width: 0;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 14px;
            padding: 24px 0;
            overflow: visible;
            transform: none;
            pointer-events: auto;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        .header .navbar-wrapper > ul {
            display: grid;
            gap: 6px;
            justify-content: stretch;
        }
        .public-nav-kicker {
            padding: 0 13px 8px;
            color: #6d8ba1;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .header .navbar-wrapper ul li a {
            min-height: 46px;
            justify-content: flex-start;
            padding: 0 13px;
            border: 1px solid transparent;
            border-radius: 13px;
            color: #8da8ba;
            font-size: 13px;
            font-weight: 700;
        }
        .header .navbar-wrapper ul li a i {
            width: 20px;
            margin: 0;
            color: #4bcfff;
            text-align: center;
        }
        .header .navbar-wrapper ul li a:hover,
        .header .navbar-wrapper ul li.active a {
            border-color: rgba(57, 208, 255, .2);
            background: linear-gradient(90deg, rgba(57, 208, 255, .18), rgba(57, 208, 255, .05));
            color: #eefbff;
        }
        .header .drawer-account {
            display: grid;
            gap: 6px;
            margin-top: auto;
            padding-top: 18px;
            border-top: 1px solid rgba(145, 190, 222, .12);
        }
        .header .drawer-account .auth-link,
        .header .drawer-account .auth-logout {
            display: flex;
            width: 100%;
            min-height: 42px;
            align-items: center;
            gap: 10px;
            padding: 0 13px;
            border-radius: 11px;
            color: #a9c0cf;
        }
        .header .drawer-account .auth-link:hover,
        .header .drawer-account .auth-logout:hover {
            background: rgba(255,255,255,.05);
            color: #fff;
        }
        .header .nav-actions {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 7px;
            align-items: center;
            padding-top: 16px;
            border-top: 1px solid rgba(145, 190, 222, .12);
        }
        .header .balance-nav {
            min-width: 0;
            justify-content: center;
            padding: 0 10px;
            overflow: hidden;
            font-size: 11px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .header .navbar-mobile { display: none; }
        .header .public-theme-toggle { display: inline-grid; }
    }
    @media (max-width: 767px) {
        body { padding-top: 94px; padding-left: 0; }
        .header {
            position: fixed;
            inset: 8px 8px auto;
            width: auto;
            height: 60px;
            border-radius: 16px;
            transform: none;
        }
        .header > .container { width: 100%; height: 100%; padding: 0; }
        .header .navbar {
            min-height: 60px;
            height: 60px;
            padding: 0 12px;
        }
        .header .logo { min-width: 0; }
        .header .navbar-wrapper {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: auto;
            width: min(330px, 88vw);
            min-height: 100vh;
            padding: 92px 18px 28px;
            border: 0;
            border-right: 1px solid rgba(145, 190, 222, .16);
            border-radius: 0 20px 20px 0;
            background: linear-gradient(180deg, #0b1b2b, #07111d);
            transform: translateX(-105%);
            transition: transform .25s ease;
        }
        .header .navbar.active .navbar-wrapper { transform: translateX(0); }
        .header .navbar-wrapper ul { display: grid; }
        .header .navbar-wrapper ul li a { min-height: 48px; }
        .public-nav-kicker { display: block; }
        .header .nav-actions {
            display: flex;
            margin-left: auto;
            gap: 6px;
            padding: 0;
            border: 0;
        }
        .header .balance-nav {
            display: inline-flex;
            max-width: 145px;
            min-height: 40px;
            padding: 0 10px;
            overflow: hidden;
            font-size: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .header .public-theme-toggle { display: inline-grid; }
        .header .navbar-mobile { display: inline-grid; }
    }

    /* Maximum visual pass: stronger hierarchy and polished interactive surfaces. */
    .hero-banner {
        min-height: 360px;
        padding: clamp(28px, 5vw, 64px);
        border-radius: 24px;
        background:
            linear-gradient(120deg, rgba(12,31,52,.96), rgba(7,15,27,.94)),
            radial-gradient(circle at 80% 20%, rgba(57,208,255,.18), transparent 30%);
    }
    .hero-title { font-size: clamp(42px, 7vw, 86px); }
    .hero-features span, .mint-hero-pills span, .support-status {
        border: 1px solid rgba(57,208,255,.2);
        border-radius: 999px;
        background: rgba(57,208,255,.07);
    }
    .items { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .item-id {
        min-height: 285px;
        padding: 12px;
        border-radius: 19px;
    }
    .item-id .image { min-height: 142px; border-radius: 14px; }
    .item-id .title { margin-top: 12px; font-size: 17px; }
    .item-id .description { min-height: 38px; font-size: 12px; }
    .item-id .price { font-size: 21px; }
    .tabs-wrapper { padding: 8px; border-radius: 16px; background: rgba(9,18,30,.64); }
    .tab-links > li > a { min-height: 42px; padding-inline: 15px; }
    .auth-card, .customer-orders-card, .support-card { position: relative; overflow: hidden; }
    .auth-card::before, .customer-orders-card::before, .support-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: .8;
    }
    .account-progress-track { height: 10px; border-radius: 99px; background: #071321; }
    .account-progress-track span { border-radius: inherit; background: linear-gradient(90deg, var(--accent), #8b7dff); box-shadow: 0 0 18px rgba(57,208,255,.35); }
    .orders-filters { padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: rgba(7,17,31,.55); }
    .customer-order { padding: 16px; }
    .customer-order-icon { border: 1px solid rgba(57,208,255,.25); border-radius: 13px; background: rgba(57,208,255,.1); }
    .support-sidebar, .support-section { box-shadow: 0 15px 38px rgba(0,0,0,.14); }
    .faq-question { min-height: 58px; }
    @media (max-width: 720px) {
        .hero-banner { min-height: 0; padding: 28px 18px; }
        .hero-title { font-size: clamp(38px, 15vw, 62px); }
        .items { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
        .item-id { min-height: 250px; padding: 9px; }
        .item-id .image { min-height: 108px; }
    }
    @media (max-width: 420px) {
        .items { grid-template-columns: 1fr; }
        .item-id .image { min-height: 145px; }
    }

/* Full helpdesk workspace. */
.support-app { overflow: hidden; border: 1px solid #24364b; border-radius: 22px; background: #091321; box-shadow: 0 24px 70px rgba(2,5,11,.38); }
.support-shell, .support-app, .support-app-body, .support-main-panel, .support-thread { max-width: 100%; box-sizing: border-box; }
.support-app-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 30px; border-bottom: 1px solid #24364b; background: linear-gradient(120deg,#12263a,#0b1726); }
.support-app-head h1 { margin: 8px 0 4px; font-size: clamp(30px,4vw,44px); letter-spacing: -.05em; }
.support-app-head p { margin: 0; color: #8fa4ba; font-size: 13px; }
.support-online { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; min-width: 170px; padding: 12px 14px; border: 1px solid rgba(114,224,163,.25); border-radius: 13px; background: rgba(16,185,129,.08); }
.support-online > span { grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #72e0a3; box-shadow: 0 0 0 5px rgba(114,224,163,.12); }
.support-online strong { color: #9bf0c7; font-size: 12px; }
.support-online small { color: #8fa4ba; font-size: 10px; }
.support-app-body { display: grid; grid-template-columns: 285px minmax(0,1fr); min-height: 650px; }
.support-sidebar { display: flex; min-width: 0; flex-direction: column; padding: 20px 14px 14px; border-right: 1px solid #24364b; background: #0d1927; }
.support-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 6px; }
.support-sidebar-head h2 { margin: 4px 0 0; font-size: 19px; }
.support-sidebar-head b { min-width: 26px; padding: 4px 7px; border-radius: 99px; color: #35c8ff; background: rgba(53,200,255,.11); text-align: center; font-size: 11px; }
.support-new-link { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 2px 12px; padding: 10px; border-radius: 10px; color: #061421; background: #35c8ff; font-size: 12px; font-weight: 800; }
.support-new-link:hover { color: #061421; filter: brightness(1.08); transform: translateY(-1px); }
.support-filter { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding: 0 7px 0 10px; border: 1px solid #24364b; border-radius: 9px; background: #09111d; transition: border-color .2s ease, box-shadow .2s ease; }
.support-filter:focus-within { border-color: rgba(53,200,255,.55); box-shadow: 0 0 0 3px rgba(53,200,255,.08); }
.support-filter i { color: #6b849b; font-size: 11px; }
.support-filter input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; color: #d9e6f0; background: transparent; font: inherit; font-size: 11px; }
.support-filter button { display: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; color: #8fa4ba; background: transparent; cursor: pointer; }
.support-filter button.is-visible { display: inline-flex; align-items: center; justify-content: center; }
.support-filter button:hover { color: #35c8ff; background: rgba(53,200,255,.1); }
.support-sidebar .support-ticket-list { margin-top: 0; overflow-y: auto; }
.support-sidebar .support-ticket { padding: 10px 8px; border-color: transparent; background: transparent; }
.support-sidebar .support-ticket:hover, .support-sidebar .support-ticket.is-selected { border-color: rgba(53,200,255,.28); background: #102238; transform: none; }
.support-sidebar .support-ticket-icon { flex-basis: 27px; width: 27px; height: 27px; }
.support-sidebar .support-ticket strong { font-size: 11px; }
.support-sidebar .support-ticket small { font-size: 9px; }
.support-sidebar-empty { display: grid; justify-items: center; gap: 8px; padding: 42px 10px; color: #6b849b; font-size: 11px; text-align: center; }
.support-sidebar-empty i { color: #35c8ff; font-size: 25px; }
.support-search-empty { display: none; justify-items: center; gap: 5px; padding: 28px 10px; color: #6b849b; text-align: center; }
.support-search-empty.is-visible { display: grid; }
.support-search-empty i { margin-bottom: 3px; color: #35c8ff; font-size: 18px; }
.support-search-empty span { color: #d9e6f0; font-size: 11px; }
.support-search-empty small { font-size: 10px; }
.support-sidebar-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: auto; padding: 13px 6px 0; border-top: 1px solid #1b2d40; color: #6b849b; font-size: 9px; }
.support-sidebar-foot i { color: #72e0a3; }
.support-main-panel { min-width: 0; padding: 20px; background: radial-gradient(circle at 100% 0,rgba(53,200,255,.05),transparent 35%), #091321; }
.support-main-panel > .support-thread { min-height: 600px; }
.support-main-panel > .support-thread .support-conversation { scrollbar-color: #2b5872 #09111d; scrollbar-width: thin; }
.support-main-panel > .support-thread .support-conversation::-webkit-scrollbar { width: 7px; }
.support-main-panel > .support-thread .support-conversation::-webkit-scrollbar-thumb { border-radius: 99px; background: #2b5872; }
.support-main-panel > .support-thread .support-conversation::-webkit-scrollbar-track { background: #09111d; }
.support-create { border-color: #24364b; background: linear-gradient(145deg,#0e1e30,#0a1523); }
.support-welcome { display: grid; justify-items: center; min-height: 330px; padding: 65px 24px 50px; border: 1px solid #24364b; border-radius: 16px; background: linear-gradient(145deg,#0e1e30,#0a1523); text-align: center; }
.support-welcome-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 18px; border: 1px solid rgba(53,200,255,.25); border-radius: 20px; color: #35c8ff; background: rgba(53,200,255,.1); font-size: 25px; }
.support-welcome h2 { margin: 7px 0; font-size: 25px; }
.support-welcome p { max-width: 410px; margin: 0 0 20px; color: #8fa4ba; font-size: 12px; line-height: 1.6; }
.support-welcome .auth-submit { width: auto; padding: 0 20px; }

/* Final visual system: consistent controls across every public page. */
:root {
    --control-height: 46px;
    --control-radius: 12px;
    --control-shadow: 0 10px 24px rgba(3, 12, 25, .2);
}
button, .btn, .auth-submit, .btn-vk, .choice-picker-toggle {
    -webkit-tap-highlight-color: transparent;
}
.btn, .auth-submit, .btn-vk {
    min-height: var(--control-height);
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    padding: 0 18px;
    background: linear-gradient(135deg, #39d0ff 0%, #6b8cff 100%);
    color: #041521 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 8px 20px rgba(57, 208, 255, .16);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.btn:hover, .auth-submit:hover, .btn-vk:hover {
    transform: translateY(-2px);
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 14px 30px rgba(57, 208, 255, .25);
}
.btn:active, .auth-submit:active, .btn-vk:active { transform: translateY(0) scale(.98); }
.btn:focus-visible, .auth-submit:focus-visible, .btn-vk:focus-visible,
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(57, 208, 255, .36);
    outline-offset: 2px;
}
.btn-clear, .auth-secondary, .btn-vk.btn-clear {
    border-color: var(--line);
    background: rgba(255, 255, 255, .055);
    color: var(--ink) !important;
    box-shadow: none;
}
.btn-clear:hover, .auth-secondary:hover, .btn-vk.btn-clear:hover {
    border-color: var(--line-strong);
    background: rgba(57, 208, 255, .1);
    box-shadow: 0 10px 24px rgba(3, 12, 25, .18);
}
.btn-danger, .button-danger {
    border-color: rgba(255, 126, 155, .35);
    background: rgba(255, 126, 155, .1);
    color: #ff9eb5 !important;
    box-shadow: none;
}
.btn-danger:hover, .button-danger:hover { border-color: rgba(255, 126, 155, .7); background: rgba(255, 126, 155, .18); }
.btn:disabled, .auth-submit:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.btn.is-loading, .auth-submit.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after, .auth-submit.is-loading::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(4, 21, 33, .28);
    border-top-color: #041521;
    border-radius: 50%;
    animation: controlSpin .65s linear infinite;
}
@keyframes controlSpin { to { transform: rotate(360deg); } }
input, select, textarea, .choice-picker-toggle {
    min-height: var(--control-height);
    border-radius: var(--control-radius);
    border-color: var(--line);
    background: rgba(4, 13, 24, .62);
    color: var(--ink);
}
textarea { min-height: 110px; padding-top: 12px; }
.card, .auth-card, .support-section, .account-card, .method-card, .shop-toolbar {
    border-color: rgba(148, 190, 224, .16);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
@media (max-width: 520px) {
    .btn, .auth-submit, .btn-vk { min-height: 44px; padding-inline: 14px; }
    .btn:not(.btn-inline), .auth-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .auth-submit, .btn-vk { transition: none; }
    .btn.is-loading::after, .auth-submit.is-loading::after { animation: none; }
}
.support-create { margin-top: 20px; }
@media (max-width: 980px) {
    .support-app-body { grid-template-columns: 1fr; }
    .support-sidebar { border-right: 0; border-bottom: 1px solid #24364b; }
    .support-sidebar .support-ticket-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 250px; overflow-y: auto; overflow-x: hidden; }
    .support-sidebar .support-ticket { width: auto; min-width: 0; }
    .support-sidebar-foot { display: none; }
}
@media (max-width: 600px) {
    .support-app-head { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
    .support-online { width: 100%; box-sizing: border-box; }
    .support-sidebar { padding: 16px 10px 12px; }
    .support-main-panel { padding: 10px; }
    .support-sidebar .support-ticket-list { grid-template-columns: 1fr; max-height: 220px; }
    .support-sidebar .support-ticket { padding: 10px; }
    .support-sidebar .support-ticket-copy strong { font-size: 12px; }
    .support-sidebar .support-ticket-copy small { font-size: 10px; }
    .support-thread-head { gap: 10px; }
    .support-thread-title h2 { max-width: calc(100vw - 120px); font-size: 18px; }
    .support-thread-title > small { font-size: 10px; }
}
/* Shared content-manager and catalogue affordances. */
.content-banners { display: grid; gap: 16px; margin: 24px auto; }
.content-banner { display: flex; align-items: center; gap: 20px; padding: 20px; }
.content-banner img { width: 120px; max-height: 90px; object-fit: cover; border-radius: 12px; }
.content-banner h2 { margin: 0 0 6px; }
.content-banner p { margin: 0 0 10px; color: var(--text-secondary); }
.product-favorite-form { position: absolute; top: 12px; right: 12px; z-index: 2; }
.product-favorite { border: 0; background: transparent; color: var(--color-accent); font-size: 22px; cursor: pointer; }
.product-limit { display: block; color: var(--text-secondary); margin-top: 6px; font-size: 11px; }

/* Final layout lock: keep the rewritten shell from inheriting legacy header rules. */
@media (min-width: 768px) {
    body { padding-top: 32px !important; padding-left: 300px !important; }
    body > .header {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 276px !important;
        max-width: none !important;
        height: 100vh !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }
    body > .header > .container {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        padding: 0 !important;
    }
    body > .header .navbar {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 26px 16px 18px !important;
    }
    body > .header .navbar-wrapper {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        overflow: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    body > .header .navbar-wrapper ul {
        display: grid !important;
        width: 100% !important;
        gap: 6px !important;
    }
    body > .header .navbar-wrapper li,
    body > .header .navbar-wrapper li a {
        width: 100% !important;
        max-width: none !important;
    }
    body > .header .navbar-wrapper li a {
        display: flex !important;
        justify-content: flex-start !important;
        white-space: nowrap !important;
    }
    body > .header .navbar-wrapper li a span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body > .header .nav-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        width: 100% !important;
    }
    body > .header .navbar-mobile { display: none !important; }
}
@media (max-width: 767px) {
    body { padding-left: 0 !important; }
    body > .header {
        width: auto !important;
        max-width: none !important;
        height: 60px !important;
        right: 8px !important;
        left: 8px !important;
        bottom: auto !important;
    }
    body > .header .navbar-wrapper {
        position: fixed !important;
        width: min(330px, 88vw) !important;
        max-width: none !important;
        min-height: 100vh !important;
        transform: translateX(-105%) !important;
    }
    body > .header .navbar.active .navbar-wrapper {
        transform: translateX(0) !important;
    }
    body > .header .navbar-wrapper li a span {
        display: inline !important;
        visibility: visible !important;
    }
}

/* Refined shell polish: consistent rhythm, readable navigation and calmer surfaces. */
@media (min-width: 768px) {
    body:not(.app-shell) { padding-left: 292px !important; }
    body > .header { width: 268px !important; }
    body > .header .navbar { padding: 30px 18px 20px !important; }
    body > .header .logo {
        min-height: 58px !important;
        padding: 0 14px !important;
    }
    body > .header .logo-text {
        font-size: 17px;
        font-weight: 800;
    }
    body > .header .navbar-wrapper { padding: 28px 0 18px !important; }
    body > .header .public-nav-kicker {
        margin-bottom: 5px;
        padding-inline: 14px;
        color: #5f8199;
    }
    body > .header .navbar-wrapper ul { gap: 8px !important; }
    body > .header .navbar-wrapper li a {
        min-height: 50px !important;
        padding-inline: 14px !important;
        border-radius: 14px !important;
        letter-spacing: -.01em;
    }
    body > .header .navbar-wrapper li.active a {
        box-shadow: inset 3px 0 0 #42d4ff, 0 8px 22px rgba(0, 174, 255, .08);
    }
    body > .header .nav-actions {
        gap: 8px !important;
        padding-top: 18px !important;
    }
    body > .header .balance-nav {
        min-height: 44px;
        border: 1px solid rgba(57,208,255,.2);
        border-radius: 12px;
        background: rgba(57,208,255,.07);
    }
    body > .header .public-theme-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    body > .hero-section,
    body > .main-content,
    body > .stats-section,
    body > .mint-page,
    body > .auth-page,
    body > .footer {
        max-width: 1320px;
        margin-inline: auto;
    }
    body > .hero-section { padding-top: 24px; }
    body > .footer { margin-top: 44px; }
}
.hero-banner {
    border: 1px solid rgba(77, 205, 255, .22);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.04);
}
.stat-card {
    border: 1px solid rgba(122, 183, 216, .17);
    background: linear-gradient(145deg, rgba(16,31,49,.92), rgba(8,17,29,.84));
}
.stat-card .stat-icon {
    border-color: rgba(57,208,255,.2);
    background: rgba(57,208,255,.08);
}
.btn, .btn-vk, .public-theme-toggle, .navbar-mobile {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover, .btn-vk:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn-vk:hover { transform: none; }
}

/* UI improvement specification: unified surfaces and safe responsive rhythm. */
:root {
    --ui-content-max: 1240px;
    --ui-space-1: 8px;
    --ui-space-2: 12px;
    --ui-space-3: 16px;
    --ui-space-4: 24px;
    --ui-space-5: 32px;
    --ui-radius-control: 12px;
    --ui-radius-card: 16px;
}
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(53, 200, 255, .55);
    outline-offset: 3px;
}
.hero-section, .main-content, .stats-section, .mint-page, .auth-page, .account-shell, .orders-shell, .support-shell {
    width: min(calc(100% - 40px), var(--ui-content-max));
    margin-inline: auto;
}
.hero-section { padding-bottom: var(--ui-space-5); }
.hero-banner, .stat-card, .item-id, .auth-card, .support-app, .customer-order, .faq-item, .mint-card {
    border-radius: var(--ui-radius-card);
}
.stat-card, .item-id, .customer-order, .faq-item, .mint-card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}
.stat-card:hover, .item-id:hover, .customer-order:hover, .mint-card:hover {
    transform: translateY(-3px);
}
.items { align-items: stretch; }
.item-id { display: flex; flex-direction: column; }
.item-id .description { flex: 1 1 auto; }
.item-id .buy, .item-id .item-buy, .item-id .btn { margin-top: auto; }
.orders-filters { gap: var(--ui-space-2); }
.orders-table-wrap { max-width: 100%; overflow-x: auto; border-radius: var(--ui-radius-card); }
@media (max-width: 767px) {
    .hero-section, .main-content, .stats-section, .mint-page, .auth-page, .account-shell, .orders-shell, .support-shell {
        width: min(calc(100% - 24px), var(--ui-content-max));
    }
    .hero-banner { overflow: hidden; }
    .hero-header-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .hero-character { opacity: .42; transform: scale(.8); transform-origin: right bottom; }
    .hero-actions { flex-wrap: wrap; }
    .hero-actions .btn { flex: 1 1 180px; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .items { grid-template-columns: 1fr !important; }
    .orders-filters { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
    .stat-card:hover, .item-id:hover, .customer-order:hover, .mint-card:hover { transform: none; }
}

/* Fluid screen fit: switch to a drawer before the desktop sidebar becomes cramped. */
@media (min-width: 768px) and (max-width: 1099px) {
    body {
        padding-top: 92px !important;
        padding-left: 0 !important;
    }
    body > .header {
        position: fixed !important;
        inset: 10px 16px auto !important;
        width: auto !important;
        height: 66px !important;
        border: 1px solid var(--v4-line) !important;
        border-radius: 17px !important;
    }
    body > .header > .container,
    body > .header .navbar {
        height: 100% !important;
    }
    body > .header .navbar {
        display: flex !important;
        min-height: 66px !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 0 16px !important;
    }
    body > .header .logo { min-height: 0 !important; border: 0 !important; }
    body > .header .navbar-wrapper {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(350px, 84vw) !important;
        min-height: 100vh !important;
        padding: 92px 18px 28px !important;
        border-right: 1px solid var(--v4-line) !important;
        background: linear-gradient(180deg, #0b1728, #07111e) !important;
        transform: translateX(-105%) !important;
        transition: transform .25s ease !important;
        pointer-events: none !important;
    }
    body > .header .navbar.active .navbar-wrapper {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
    body > .header .public-nav-kicker { display: block; }
    body > .header .nav-actions {
        display: flex !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }
    body > .header .navbar-mobile { display: inline-grid !important; }
    body > .header .public-theme-toggle { display: inline-grid !important; }
    body > .header .balance-nav { max-width: 180px; }
    .hero-section, .main-content, .stats-section, .mint-page, .auth-page, .account-shell, .orders-shell, .support-shell {
        width: min(calc(100% - 48px), var(--ui-content-max));
    }
    .hero-banner { padding: clamp(28px, 5vw, 52px); }
    .hero-title { font-size: clamp(48px, 8vw, 78px); }
    .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .modal > .wrapper { max-width: min(920px, calc(100vw - 44px)) !important; }
}
@media (min-width: 1100px) {
    .hero-section, .main-content, .stats-section, .mint-page, .auth-page, .account-shell, .orders-shell, .support-shell {
        width: min(calc(100% - 64px), var(--ui-content-max));
    }
}
@media (max-width: 767px) {
    .hero-section, .main-content, .stats-section, .mint-page, .auth-page, .account-shell, .orders-shell, .support-shell {
        width: calc(100% - 24px);
    }
    .hero-banner { padding: clamp(22px, 7vw, 32px) 18px !important; }
    .hero-title { font-size: clamp(38px, 15vw, 62px) !important; }
    .hero-subtitle { font-size: 12px; }
    .stat-card { min-height: 88px; }
    .modal-split { min-width: 0; }
    .modal-right, .modal-left { min-width: 0; }
}

/* Checkout v2: stable period cards with a dedicated cashback column. */
.purchase-periods { gap: 12px; margin-bottom: 26px; }
.purchase-period {
    grid-template-columns: 26px minmax(0, 1fr) minmax(112px, 132px);
    min-height: 82px;
    padding: 13px 14px;
    border-color: rgba(98,230,255,.22);
    background: linear-gradient(135deg, rgba(18,38,59,.78), rgba(8,18,31,.82));
}
.purchase-period.is-selected {
    border-width: 2px;
    padding: 12px 13px;
    border-color: #4aa9ff;
    background: linear-gradient(135deg, rgba(47,118,184,.34), rgba(24,45,75,.72));
    box-shadow: 0 12px 28px rgba(40,143,230,.14);
}
.purchase-period-copy { min-width: 0; }
.purchase-period-copy b { font-size: 16px; line-height: 1.25; }
.purchase-period-copy small {
    max-width: 170px;
    margin-top: 5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.purchase-period-meta {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(73,164,231,.18);
    text-align: right;
}
.purchase-cashback-label {
    color: #8eb6d0;
    font-size: 10px;
    line-height: 1;
}
.purchase-period-meta strong {
    color: #e0f5ff;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.purchase-period:focus-within { outline: 3px solid rgba(53,200,255,.34); outline-offset: 2px; }
.purchase-modal-footer #submitBtn {
    min-height: 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, #35c8ff, #6488ff);
    box-shadow: 0 10px 24px rgba(53,200,255,.18);
}
@media (max-width: 700px) {
    .purchase-period {
        grid-template-columns: 24px minmax(0, 1fr);
        min-height: 0;
        padding: 13px;
    }
    .purchase-period.is-selected { padding: 12px; }
    .purchase-period-meta {
        grid-column: 2;
        width: fit-content;
        min-width: 128px;
        margin-top: 3px;
        text-align: left;
    }
}

/* Checkout redesign: predictable two-column shell and touch-safe mobile flow. */
.modal[data-id="paymodal"] {
    display: none;
    padding: 18px;
    background:
        radial-gradient(700px 460px at 50% 0, rgba(53, 200, 255, .12), transparent 70%),
        rgba(2, 7, 14, .9);
}
.modal[data-id="paymodal"].active { display: block; }
.modal[data-id="paymodal"] > .wrapper {
    display: flex;
    width: min(1040px, calc(100vw - 36px));
    height: min(780px, calc(100vh - 36px));
    max-height: none;
    margin: auto;
    align-items: stretch;
}
.modal[data-id="paymodal"] .modal-content {
    display: flex;
    min-height: 0;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(98, 230, 255, .28);
    border-radius: 20px;
    background: #091522;
}
.modal[data-id="paymodal"] .purchase-modal-head {
    min-height: 76px;
    flex: 0 0 auto;
    align-items: center;
    padding: 17px 24px;
}
.modal[data-id="paymodal"] .purchase-modal-head .modal-header {
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.2;
}
.modal[data-id="paymodal"] .modal-body.modal-split {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.04fr) minmax(330px, .96fr);
    overflow: hidden;
}
.modal[data-id="paymodal"] .modal-left,
.modal[data-id="paymodal"] .modal-right {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.modal[data-id="paymodal"] .modal-left {
    padding: 25px 24px 32px;
    border-right: 1px solid var(--store-line);
    background: linear-gradient(180deg, rgba(6, 18, 31, .98), rgba(8, 20, 34, .94));
}
.modal[data-id="paymodal"] .modal-right {
    padding: 25px 24px 32px;
    background: linear-gradient(180deg, rgba(15, 28, 45, .98), rgba(11, 20, 33, .98));
}
.modal[data-id="paymodal"] .purchase-step-heading strong {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.modal[data-id="paymodal"] .purchase-step-heading span {
    margin-top: 5px;
    font-size: 12px;
}
.modal[data-id="paymodal"] .purchase-periods {
    gap: 9px;
    margin-bottom: 22px;
}
.modal[data-id="paymodal"] .purchase-period {
    grid-template-columns: 24px minmax(0, 1fr) minmax(108px, 126px);
    min-height: 70px;
    padding: 11px 12px;
}
.modal[data-id="paymodal"] .purchase-period.is-selected { padding: 10px 11px; }
.modal[data-id="paymodal"] .purchase-period-copy b { font-size: 14px; }
.modal[data-id="paymodal"] .purchase-period-copy small { margin-top: 3px; font-size: 10px; }
.modal[data-id="paymodal"] .purchase-period-meta {
    padding: 7px 8px;
    border-radius: 9px;
}
.modal[data-id="paymodal"] .purchase-steps {
    margin: 2px 0 21px;
}
.modal[data-id="paymodal"] .purchase-form-panel .input-block { margin-bottom: 13px; }
.modal[data-id="paymodal"] .purchase-form-panel input,
.modal[data-id="paymodal"] .purchase-form-panel select,
.modal[data-id="paymodal"] #promo { min-height: 46px; }
.modal[data-id="paymodal"] #amountVariants {
    width: 100%;
    min-height: 48px;
    padding: 0 42px 0 15px;
    border: 1px solid rgba(56,189,248,.55);
    border-radius: 12px;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: #0b1728;
    background-image: linear-gradient(45deg, transparent 50%, #7dd3fc 50%), linear-gradient(135deg, #7dd3fc 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.modal[data-id="paymodal"] #amountVariants:hover { border-color: rgba(103,232,249,.9); background-color: #10213a; }
.modal[data-id="paymodal"] #amountVariants:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.16), 0 8px 24px rgba(2,132,199,.12); }
.modal[data-id="paymodal"] #amountVariants option { padding: 10px 14px; background: #0b1728; color: #f8fafc; font-weight: 600; }
.modal[data-id="paymodal"] #amountVariants option:checked { background: #155e75; color: #ecfeff; }
.modal[data-id="paymodal"] #amountVariantButtons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
.modal[data-id="paymodal"] #amountVariantButtons[hidden] { display: none !important; }
.modal[data-id="paymodal"] #amountVariantButtons .amount-variant {
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid rgba(71, 98, 125, .8);
    border-radius: 10px;
    outline: 0;
    background: linear-gradient(145deg, #102238, #0b1728);
    color: #a9bfd3;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.modal[data-id="paymodal"] #amountVariantButtons .amount-variant:hover,
.modal[data-id="paymodal"] #amountVariantButtons .amount-variant:focus-visible {
    border-color: #22d3ee;
    color: #ecfeff;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
    transform: translateY(-1px);
}
.modal[data-id="paymodal"] #amountVariantButtons .amount-variant.is-selected {
    border-color: #22d3ee;
    background: linear-gradient(135deg, #0e7490, #155e75);
    color: #fff;
    box-shadow: 0 8px 18px rgba(8, 145, 178, .22);
}
@media (max-width: 420px) {
    .modal[data-id="paymodal"] #amountVariantButtons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.modal[data-id="paymodal"] #amounted { margin-top: 2px; }
.modal[data-id="paymodal"] #amounted[hidden] { display: none !important; }
.modal[data-id="paymodal"] #amounted > br,
.modal[data-id="paymodal"] .purchase-form-panel > br { display: none; }
.modal[data-id="paymodal"] .player-preview { min-height: 68px; margin: 0 0 16px; }
.modal[data-id="paymodal"] .player-preview-frame { width: 50px; height: 50px; flex-basis: 50px; }
.modal[data-id="paymodal"] .player-preview-frame img { width: 48px; height: 48px; }
.modal[data-id="paymodal"] .purchase-product-card {
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
}
.modal[data-id="paymodal"] .purchase-product-art {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
    border-radius: 14px;
}
.modal[data-id="paymodal"] .purchase-product-copy h2 { font-size: 19px; }
.modal[data-id="paymodal"] .purchase-current-price {
    margin-top: 7px;
    font-size: 18px;
}
.modal[data-id="paymodal"] .purchase-product-copy p {
    max-width: 330px;
    font-size: 11px;
}
.modal[data-id="paymodal"] .purchase-benefits {
    margin-top: 14px;
    padding: 13px;
}
.modal[data-id="paymodal"] .purchase-benefits ul { gap: 5px; margin-top: 8px; }
.modal[data-id="paymodal"] .purchase-trust-row { margin: 11px 0 17px; }
.modal[data-id="paymodal"] .payment-selection { margin-top: 0; }
.modal[data-id="paymodal"] .payment-label { display: block; margin-bottom: 8px; }
.modal[data-id="paymodal"] .payment-methods .method-card {
    min-height: 60px;
    padding: 12px;
}
.modal[data-id="paymodal"] .purchase-modal-footer {
    position: relative;
    z-index: 2;
    min-height: 76px;
    flex: 0 0 auto;
    align-items: center;
    padding: 13px 24px !important;
    background: #081421;
}
.modal[data-id="paymodal"] .purchase-modal-footer #submitBtn {
    min-width: 220px;
    min-height: 48px;
    font-size: 12px;
}
.modal[data-id="paymodal"] .purchase-modal-footer .btn-clear {
    min-height: 48px;
}

@media (max-width: 760px) {
    .modal[data-id="paymodal"] { padding: 8px; }
    .modal[data-id="paymodal"] > .wrapper {
        width: 100%;
        height: calc(100vh - 16px);
    }
    .modal[data-id="paymodal"] .purchase-modal-head {
        min-height: 66px;
        padding: 14px 16px;
    }
    .modal[data-id="paymodal"] .modal-body.modal-split {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .modal[data-id="paymodal"] .modal-left,
    .modal[data-id="paymodal"] .modal-right {
        overflow: visible;
        padding: 20px 16px;
    }
    .modal[data-id="paymodal"] .modal-left {
        border-right: 0;
        border-bottom: 1px solid var(--store-line);
    }
    .modal[data-id="paymodal"] .purchase-period {
        grid-template-columns: 23px minmax(0, 1fr);
        min-height: 0;
    }
    .modal[data-id="paymodal"] .purchase-period-meta {
        grid-column: 2;
        width: fit-content;
        min-width: 126px;
        margin-top: 3px;
        text-align: left;
    }
    .modal[data-id="paymodal"] .purchase-product-card { margin-top: 0; }
    .modal[data-id="paymodal"] .purchase-modal-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
        gap: 8px;
        padding: 10px 14px !important;
    }
    .modal[data-id="paymodal"] .purchase-modal-footer #submitBtn {
        min-width: 0;
        width: 100%;
    }
    .modal[data-id="paymodal"] .purchase-modal-footer .btn-clear {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .modal[data-id="paymodal"] .purchase-modal-head .modal-header { font-size: 17px; }
    .modal[data-id="paymodal"] .purchase-product-art {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }
    .modal[data-id="paymodal"] .purchase-product-copy h2 { font-size: 17px; }
    .modal[data-id="paymodal"] .purchase-modal-footer {
        grid-template-columns: 1fr;
    }
}
:root {
    --noxis-bg: #0D1117;
    --noxis-card: #161B22;
    --noxis-accent: #00D2FF;
    --noxis-neon-shadow: 0 0 20px rgba(0, 210, 255, .3);
}

.noxis-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(12px);
}

.noxis-modal {
    position: relative;
    width: min(100%, 520px);
    max-height: min(90vh, 760px);
    overflow: auto;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: var(--noxis-card);
    box-shadow: var(--noxis-neon-shadow);
}

.noxis-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: box-shadow .2s ease, opacity .2s ease;
}

.noxis-button:hover:not(:disabled) { box-shadow: var(--noxis-neon-shadow); }
.noxis-button:disabled { cursor: wait; opacity: .65; }
.noxis-button-loading {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: noxis-spin .7s linear infinite;
}
@keyframes noxis-spin { to { transform: rotate(360deg); } }

/* Helpdesk redesign: calmer layout, stronger hierarchy, and denser conversation space. */
.support-page .auth-page {
    padding-top: 28px;
    background: radial-gradient(circle at 50% 0, rgba(38, 129, 190, .12), transparent 34%);
}
.support-shell { width: min(1180px, calc(100% - 40px)); }
.support-app {
    border-color: rgba(77, 143, 191, .32);
    border-radius: 24px;
    background: #081321;
    box-shadow: 0 28px 90px rgba(0,0,0,.34);
}
.support-app-head {
    min-height: 132px;
    padding: 28px 34px;
    background: radial-gradient(circle at 90% 0, rgba(56, 199, 255, .13), transparent 30%), linear-gradient(135deg, #112b43 0%, #0b1727 62%, #091321 100%);
}
.support-app-head h1 { font-size: clamp(34px, 4vw, 48px); }
.support-app-head p { max-width: 520px; font-size: 12px; }
.support-online {
    min-width: 150px;
    padding: 13px 15px;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(16,185,129,.08);
}
.support-app-body {
    grid-template-columns: 310px minmax(0,1fr);
    min-height: 720px;
}
.support-sidebar {
    padding: 25px 18px 17px;
    border-right-color: rgba(78, 134, 180, .28);
    background: linear-gradient(180deg, #0c1b2c, #091624);
}
.support-sidebar-head { padding: 0 8px; }
.support-sidebar-head h2 { font-size: 21px; letter-spacing: -.03em; }
.support-sidebar-head b { min-width: 28px; padding: 5px 8px; }
.support-new-link {
    margin: 21px 3px 15px;
    min-height: 44px;
    border-radius: 12px;
    box-shadow: 0 9px 24px rgba(53,200,255,.17);
}
.support-filter {
    margin: 0 3px 15px;
    min-height: 40px;
    border-radius: 11px;
    background: #08121f;
}
.support-sidebar .support-ticket-list { display: grid; gap: 5px; }
.support-sidebar .support-ticket {
    padding: 12px 10px;
    border-radius: 13px;
}
.support-sidebar .support-ticket.is-selected {
    border-color: rgba(53,200,255,.5);
    background: linear-gradient(100deg, rgba(25,71,107,.72), rgba(16,39,61,.7));
    box-shadow: inset 3px 0 #35c8ff, 0 8px 20px rgba(0,0,0,.14);
}
.support-sidebar .support-ticket-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
}
.support-sidebar .support-ticket strong { font-size: 12px; }
.support-sidebar .support-ticket small { font-size: 10px; }
.support-main-panel {
    padding: 18px;
    background: radial-gradient(circle at 100% 0, rgba(53,200,255,.08), transparent 32%), #081321;
}
.support-main-panel > .support-thread {
    min-height: 650px;
    border-radius: 19px;
}
.support-thread-head { padding: 21px 24px 18px; }
.support-thread-title h2 { font-size: 23px; }
.support-thread-note { padding: 10px 24px; }
.support-conversation {
    min-height: 205px;
    max-height: 390px;
    padding: 22px 24px;
}
.support-message { max-width: min(92%, 720px); }
.support-reply-composer { padding: 18px 24px 20px !important; }
.support-reply-composer textarea { min-height: 82px !important; }
.support-reply-composer .auth-submit { min-width: 150px; }
.support-create {
    margin-top: 18px;
    border-radius: 18px;
    background: linear-gradient(145deg, #10253a, #0a1725);
}
@media (max-width: 760px) {
    .support-shell { width: min(100% - 20px, 620px); }
    .support-app-head { padding: 24px 22px; }
    .support-app-body { min-height: 0;     }
}

/* Premium helpdesk pass: focused workspace with a quieter, editorial hierarchy. */
.support-page .auth-page {
        padding-block: 32px 72px;
        background:
            radial-gradient(900px 420px at 50% -10%, rgba(48, 170, 230, .16), transparent 68%),
            linear-gradient(180deg, #07111e 0%, #091522 48%, #07111c 100%);
    }
.support-shell { width: min(1240px, calc(100% - 48px)); }
.support-app {
        border: 1px solid rgba(123, 180, 220, .24);
        border-radius: 28px;
        background: rgba(7, 17, 29, .92);
        box-shadow: 0 32px 100px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02);
    }
.support-app-head {
        position: relative;
        min-height: 154px;
        padding: 32px 38px;
        overflow: hidden;
        background:
            radial-gradient(500px 220px at 88% -30%, rgba(57, 208, 255, .2), transparent 70%),
            linear-gradient(135deg, #122c45 0%, #0b1929 55%, #08121e 100%);
    }
.support-app-head::after {
        position: absolute;
        right: 9%;
        bottom: -62px;
        width: 230px;
        height: 130px;
        border: 1px solid rgba(93, 207, 255, .16);
        border-radius: 50%;
        content: "";
        transform: rotate(-12deg);
    }
.support-app-head > * { position: relative; z-index: 1; }
.support-app-head .auth-eyebrow { font-size: 11px; }
.support-app-head h1 { margin-top: 11px; font-size: clamp(38px, 5vw, 56px); }
.support-app-head p { color: #9ab0c3; font-size: 13px; }
.support-online {
        min-width: 178px;
        padding: 15px 17px;
        border-color: rgba(114,224,163,.3);
        border-radius: 16px;
        background: rgba(9, 47, 48, .5);
    }
.support-app-body { grid-template-columns: 326px minmax(0, 1fr); min-height: 760px; }
.support-sidebar {
        padding: 28px 19px 18px;
        background: linear-gradient(180deg, #0d1d2f, #091625);
    }
.support-sidebar-head { padding-inline: 9px; }
.support-sidebar-head .support-kicker { font-size: 10px; }
.support-sidebar-head h2 { margin-top: 7px; font-size: 24px; }
.support-sidebar-head b {
        min-width: 30px;
        padding: 6px 9px;
        border: 1px solid rgba(53,200,255,.2);
        background: rgba(53,200,255,.12);
    }
.support-new-link {
        min-height: 48px;
        margin: 23px 4px 16px;
        border-radius: 14px;
        background: linear-gradient(135deg, #38cdf7, #5b91ff);
        box-shadow: 0 12px 28px rgba(53,200,255,.2);
    }
.support-filter {
        min-height: 43px;
        margin-inline: 4px;
        border-radius: 12px;
    }
.support-sidebar .support-ticket-list { gap: 7px; }
.support-sidebar .support-ticket {
        padding: 13px 11px;
        border-radius: 14px;
    }
.support-sidebar .support-ticket.is-selected {
        border-color: rgba(64, 204, 255, .48);
        background: linear-gradient(105deg, rgba(27,76,114,.78), rgba(17,44,70,.58));
        box-shadow: inset 3px 0 #42d2ff, 0 9px 24px rgba(0,0,0,.18);
    }
.support-sidebar .support-ticket-copy strong { font-size: 12px; }
.support-sidebar .support-ticket-copy small { margin-top: 5px; }
.support-sidebar-foot {
        padding-top: 16px;
        color: #7c95aa;
        font-size: 10px;
    }
.support-main-panel {
        padding: 20px;
        background: radial-gradient(circle at 100% 0, rgba(48,180,235,.1), transparent 38%), #081421;
    }
.support-main-panel > .support-thread {
        min-height: 670px;
        border-color: rgba(95, 163, 207, .3);
        border-radius: 21px;
        background: #091522;
    }
.support-thread-head {
        padding: 23px 27px 20px;
        background: linear-gradient(135deg, #142d46, #0d1b2b 74%);
    }
.support-thread-title h2 { margin-top: 8px; font-size: 25px; }
.support-thread-title > small { margin-top: 9px; }
.support-thread-note {
        padding: 11px 27px;
        background: rgba(13, 31, 48, .9);
    }
.support-conversation {
        min-height: 235px;
        max-height: 420px;
        gap: 18px;
        padding: 27px;
        background:
            radial-gradient(circle at 8% 0, rgba(57,208,255,.09), transparent 30%),
            linear-gradient(180deg, #091725, #07111e);
    }
.support-message { max-width: min(90%, 740px); }
.support-message-body {
        padding: 14px 16px 15px;
        border-color: rgba(102, 145, 178, .35);
        border-radius: 9px 18px 18px 18px;
        background: linear-gradient(145deg, #14283b, #102031);
    }
.support-message.is-mine .support-message-body {
        border-color: rgba(53,200,255,.42);
        background: linear-gradient(145deg, #123d59, #103049);
    }
.support-message-meta strong { color: #f3f8fc; font-size: 13px; }
.support-message-role { padding: 4px 9px; }
.support-message p { font-size: 13px; line-height: 1.65; }
.support-reply-composer {
        gap: 12px;
        padding: 20px 27px 23px !important;
        background: linear-gradient(180deg, #0d1b2a, #0a1623);
    }
.support-reply-label { font-size: 12px; }
.support-reply-composer textarea {
        min-height: 92px !important;
        border-color: rgba(112, 156, 191, .38);
        background: #08121e;
    }
.support-form-hint { min-height: 24px; }
.support-reply-composer .auth-submit {
        min-width: 158px;
        min-height: 48px;
        border-radius: 14px;
    }
.support-create {
        margin-top: 20px;
        border-color: rgba(95, 163, 207, .3);
        border-radius: 20px;
    }
@media (max-width: 760px) {
        .support-page .auth-page { padding-block: 16px 42px; }
        .support-shell { width: min(100% - 18px, 620px); }
        .support-app { border-radius: 20px; }
        .support-app-head { min-height: 0; padding: 25px 22px; }
        .support-app-head h1 { font-size: 38px; }
        .support-app-body { min-height: 0; }
        .support-sidebar { padding: 20px 12px 14px; }
        .support-main-panel { padding: 9px; }
        .support-thread-head { padding: 19px 17px 17px; }
        .support-thread-note { padding-inline: 17px; }
        .support-conversation { padding: 19px 17px; }
        .support-reply-composer { padding: 17px !important; }
}
.support-ticket-status { display: inline-flex; align-items: center; gap: 4px; }
.support-ticket-status.is-waiting { color: #fbbf24; }
.support-ticket-status.is-answered { color: #72e0a3; }
.support-thread-head .support-status.is-waiting { background: rgba(251,191,36,.12); color: #fbbf24; }
.support-thread-head .support-status.is-answered { background: rgba(16,185,129,.12); color: #72e0a3; }

/* Final Mint deck theme overrides. */
html body.app-shell .mint-page .mint-new-console {
    min-height: 690px !important;
    padding: clamp(24px, 4vw, 42px) !important;
    border: 1px solid rgba(94,231,255,.24) !important;
    background: radial-gradient(circle at 50% 34%, rgba(0,174,255,.12), transparent 19rem), linear-gradient(150deg, #102a43, #071321 76%) !important;
}
html body.app-shell .mint-page .mint-card-subtitle {
    max-width: 620px;
    margin: 0 auto;
    color: #aac1d2;
    text-align: center;
    line-height: 1.6;
}
html body.app-shell .mint-page .mint-deck {
    width: 190px !important;
    height: 260px !important;
    margin: 36px auto 30px !important;
}
html body.app-shell .mint-page .mint-choice-grid.is-hidden {
    display: none !important;
}
html body.app-shell .mint-page .mint-choice-grid {
    width: min(590px, 100%);
    margin: 28px auto 24px;
    gap: 14px;
}
html body.app-shell .mint-page .mint-choice-card {
    min-height: 138px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(25,76,108,.84), rgba(5,18,31,.98));
}
html body.app-shell .mint-page .mint-open-button,
html body.app-shell .mint-page .mint-countdown {
    width: min(420px, 100%);
    margin-inline: auto;
}
html body.app-shell .mint-page .mint-result {
    width: min(590px, 100%);
    min-height: 142px;
    margin: 24px auto 0;
    border-color: rgba(255,209,102,.24);
    background: linear-gradient(145deg, rgba(255,209,102,.08), rgba(4,16,29,.86));
}
html body.app-shell .mint-page .mint-result strong {
    color: #ffd166;
    text-shadow: 0 0 24px rgba(255,209,102,.5);
}
html body.app-shell .mint-page .mint-countdown {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(680px, 100%) !important;
    min-height: 118px;
    gap: 7px;
    margin: 24px auto 16px !important;
    padding: 20px 24px 18px !important;
    overflow: hidden;
    border: 1px solid rgba(94,231,255,.28) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(115deg, rgba(94,231,255,.08), transparent 34%, rgba(124,58,237,.1)),
        rgba(5, 20, 34, .82) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08), 0 0 35px rgba(0,174,255,.08);
}
html body.app-shell .mint-page .mint-countdown::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .34;
    background-image: linear-gradient(rgba(94,231,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(94,231,255,.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 90%);
}
html body.app-shell .mint-page .mint-countdown::after {
    content: '';
    position: absolute;
    top: -55px;
    left: 50%;
    width: 180px;
    height: 100px;
    border-radius: 50%;
    background: #5ee7ff;
    opacity: .08;
    filter: blur(28px);
    transform: translateX(-50%);
}
html body.app-shell .mint-page .mint-countdown span {
    position: relative;
    color: #7ec5dc !important;
    font-size: 10px !important;
    letter-spacing: .2em !important;
}
html body.app-shell .mint-page .mint-countdown strong {
    position: relative;
    color: #f3fdff !important;
    font-family: 'Plus Jakarta Sans', ui-monospace, monospace !important;
    font-size: clamp(38px, 5vw, 60px) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(94,231,255,.7), 0 0 28px rgba(0,174,255,.4) !important;
}
html body.app-shell .mint-page .mint-countdown.is-ready {
    border-color: rgba(114,224,163,.38) !important;
    background: linear-gradient(115deg, rgba(114,224,163,.12), rgba(5,20,34,.84)) !important;
}
html body.app-shell .mint-page .mint-countdown.is-ready strong {
    color: #9bf0c7 !important;
    text-shadow: 0 0 18px rgba(114,224,163,.55) !important;
}
html body.app-shell .mint-page .mint-countdown.is-ready {
    min-height: 106px;
    padding-block: 16px !important;
    border-color: rgba(114,224,163,.48) !important;
    background:
        radial-gradient(circle at 50% 100%, rgba(114,224,163,.18), transparent 55%),
        linear-gradient(135deg, rgba(21,72,67,.72), rgba(7,27,38,.9)) !important;
    box-shadow: 0 16px 38px rgba(25,185,137,.11), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html body.app-shell .mint-page .mint-countdown.is-ready span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #91e9c1 !important;
}
html body.app-shell .mint-page .mint-countdown.is-ready span::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #72e0a3;
    box-shadow: 0 0 12px #72e0a3;
}
html body.app-shell .mint-page .mint-result {
    position: relative;
    overflow: hidden;
    border-radius: 22px !important;
    border-color: rgba(255,209,102,.2) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(255,209,102,.13), transparent 48%),
        linear-gradient(145deg, rgba(18,35,49,.96), rgba(7,17,29,.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.14);
}
html body.app-shell .mint-page .mint-result::before {
    content: 'YOUR REWARD';
    position: absolute;
    top: 13px;
    left: 50%;
    color: rgba(255,209,102,.5);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
    transform: translateX(-50%);
}
html body.app-shell .mint-page .mint-result strong {
    margin-top: 9px;
}
html body.app-shell .mint-page .mint-result span {
    color: #92a9ba;
}
html body.app-shell .mint-page .mint-open-button {
    position: relative;
    width: min(680px, 100%) !important;
    min-height: 60px !important;
    margin: 8px auto 20px !important;
    overflow: hidden;
    border: 1px solid rgba(94,231,255,.7) !important;
    border-radius: 17px !important;
    color: #031521 !important;
    background: linear-gradient(105deg, #19dff5 0%, #0ab9f2 48%, #2878ff 100%) !important;
    box-shadow: 0 14px 32px rgba(0,174,255,.28), inset 0 1px 0 rgba(255,255,255,.42) !important;
    font-size: 14px;
    letter-spacing: .04em;
}
html body.app-shell .mint-page .mint-open-button::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.34) 48%, transparent 72%);
    transform: translateX(-120%);
    transition: transform .65s ease;
}
html body.app-shell .mint-page .mint-open-button:hover:not(:disabled)::before {
    transform: translateX(120%);
}
html body.app-shell .mint-page .mint-open-button:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 18px 42px rgba(0,174,255,.44), 0 0 24px rgba(94,231,255,.22) !important;
}
html body.app-shell .mint-page .mint-open-button:active:not(:disabled) {
    transform: translateY(0) scale(.98);
}
html body.app-shell .mint-page .mint-open-button:disabled {
    color: #88a8bd !important;
    border-color: rgba(125,211,252,.18) !important;
    background: linear-gradient(105deg, #17374d, #12273d) !important;
    box-shadow: none !important;
}
html body.app-shell .mint-page .mint-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
    width: min(640px, 100%);
    margin: 34px auto 26px;
    perspective: 900px;
}
html body.app-shell .mint-page .mint-choice-card {
    min-height: 192px;
    padding: 18px 12px 16px;
    border: 1px solid rgba(94,231,255,.32);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.1), transparent 18%),
        radial-gradient(circle at 50% 28%, rgba(94,231,255,.2), transparent 42%),
        linear-gradient(145deg, #164c6b, #081928 72%);
    box-shadow: 0 15px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.16);
    transform-style: preserve-3d;
}
html body.app-shell .mint-page .mint-choice-card::after {
    content: 'вњ¦  NOXIS  вњ¦';
    position: absolute;
    inset: 9px;
    padding-top: 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    color: rgba(255,255,255,.22);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
    pointer-events: none;
}
html body.app-shell .mint-page .mint-choice-card:nth-child(1),
html body.app-shell .mint-page .mint-choice-card:nth-child(4) { transform: rotate(-2deg); }
html body.app-shell .mint-page .mint-choice-card:nth-child(3),
html body.app-shell .mint-page .mint-choice-card:nth-child(6) { transform: rotate(2deg); }
html body.app-shell .mint-page .mint-choice-card:hover:not(:disabled) {
    transform: translateY(-8px) rotate(0deg) !important;
}
html body.app-shell .mint-page .mint-choice-card.is-selected {
    transform: translateY(-8px) rotate(0deg) !important;
    border-color: #ffd166;
    box-shadow: 0 0 0 3px rgba(255,209,102,.2), 0 20px 38px rgba(255,209,102,.22), inset 0 1px 0 rgba(255,255,255,.2);
}
html body.app-shell .mint-page .mint-choice-card.is-winner {
    animation: mint-card-winner .65s ease both;
}
html body.app-shell .mint-page .mint-choice-card .mint-choice-symbol {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    margin: 28px auto 12px;
    border: 0;
    color: #ffd166;
    background: transparent;
    font-size: 34px;
    text-shadow: 0 0 18px rgba(255,209,102,.55);
}
html body.app-shell .mint-page .mint-choice-grid.is-dealing .mint-choice-card {
    opacity: 0;
    pointer-events: none;
    transform: translateY(34px) rotateY(88deg) scale(.8);
}
html body.app-shell .mint-page .mint-choice-grid.is-dealing .mint-choice-card.is-dealt {
    animation: mint-card-deal .72s cubic-bezier(.18,.82,.22,1) both;
    pointer-events: auto;
}
html body.app-shell .mint-page .mint-choice-grid.is-dealing .mint-choice-card.is-dealt::before {
    animation: mint-card-glint 1.1s ease .28s both;
}
@keyframes mint-card-deal {
    0% {
        opacity: 0;
        transform: translateY(34px) rotateY(88deg) rotateZ(-8deg) scale(.8);
    }
    58% {
        opacity: 1;
        transform: translateY(-8px) rotateY(-12deg) rotateZ(2deg) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateY(0) rotateZ(0) scale(1);
    }
}
@keyframes mint-card-glint {
    0% { opacity: .12; transform: translateX(-70px) translateY(-40px); }
    45% { opacity: .42; }
    100% { opacity: .12; transform: translateX(55px) translateY(30px); }
}
html body.app-shell .mint-page .mint-choice-card strong,
html body.app-shell .mint-page .mint-choice-card small,
html body.app-shell .mint-page .mint-choice-card .mint-choice-number {
    position: relative;
    z-index: 1;
}
@media (max-width:560px) {
    html body.app-shell .mint-page .mint-new-console { min-height: 620px !important; padding: 22px 16px !important; }
    html body.app-shell .mint-page .mint-deck { width: 160px !important; height: 218px !important; }
}

/* ===== assets/style-responsive.css ===== */
@media (max-width: 1199px) {
	.payments > .payment-list {
		grid-template-columns: repeat(4, calc(25% - (20px * 3 / 4)));
	}

	.payments > .payment-list > .payment-id:nth-child(n+5){
		display: none !important;
	}
}

@media (max-width: 991px) {
	.payments > .payment-list {
		grid-template-columns: repeat(3, calc((100% / 3) - (20px * 2 / 3)));
	}

	.payments > .payment-list > .payment-id:nth-child(n+4){
		display: none !important;
	}

	.tabs-wrapper > .block-right {
		height: 100%;
	}

	.tabs-wrapper > .block-right > .btn {
		height: 100%;
	}

	body > .container > .tabs > .tabs-wrapper .tab-links > li > a:after {
		background-size: 100% 17px;
	}
}

@media (max-width: 679px) {
	.payments > .payment-list {
		grid-template-columns: repeat(2, calc(50% - (20px / 2)));
	}

	.payments > .payment-list > .payment-id:nth-child(n+3){
		display: none !important;
	}
}

@media (max-width: 479px) {
	.items {
		grid-template-columns: 1fr;
	}

	.item-id {
		min-height: 290px;
	}

	.tabs-wrapper {
		grid-template-columns: 100%;
	}

	.payments > .payment-list {
		grid-template-columns: 100%;
	}

	.payments > .payment-list > .payment-id:nth-child(n+2){
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}
/* ===== assets/ui-shell.css ===== */
:root {
    --bg-app: #07111d;
    --bg-sidebar: #0b1b2b;
    --bg-card: #0e1c2d;
    --bg-raised: #122438;
    --color-accent: #35c8ff;
    --color-accent-rgb: 53, 200, 255;
    --color-accent-2: #7188ff;
    --color-success: #45d99a;
    --color-warning: #f4c95d;
    --color-danger: #ff7185;
    --text-primary: #eef8ff;
    --text-secondary: #8ea8bd;
    --line: rgba(142, 168, 189, .16);
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --space: 4px;
    --sidebar-width: 280px;
    --topbar-height: 64px;
    --shadow-card: 0 18px 44px rgba(0, 0, 0, .22);
    --focus: 0 0 0 3px rgba(53, 200, 255, .35);
}

body.app-shell {
    padding-top: 0 !important;
    min-width: 320px;
    background-color: var(--bg-app) !important;
    color: var(--text-primary);
}

body.app-shell::before,
body.app-shell::after {
    opacity: .1;
}

.app-frame {
    min-height: 100vh;
}

.app-shell .noxis-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(12px);
}

.app-shell .noxis-modal {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: #161B22;
    box-shadow: 0 0 20px rgba(0, 210, 255, .3);
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    display: flex;
    width: var(--sidebar-width);
    min-width: 268px;
    flex-direction: column;
    padding: 22px 14px max(16px, env(safe-area-inset-bottom));
    overflow: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(53, 200, 255, .06), transparent 28%), var(--bg-sidebar);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0 8px 22px;
    color: var(--text-primary);
    text-decoration: none;
}

.app-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: #041521;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    box-shadow: 0 10px 24px rgba(53, 200, 255, .28);
    font-weight: 800;
}

.app-brand strong,
.app-brand small {
    display: block;
}

.app-brand strong {
    font-size: 16px;
    letter-spacing: -.02em;
}

.app-brand small {
    color: var(--text-secondary);
    font-size: 11px;
}

.app-nav-kicker,
.app-sidebar-label {
    padding: 0 12px 8px;
    color: #6f8aa0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-nav {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-nav a i {
    width: 18px;
    color: var(--color-accent);
    text-align: center;
}

.app-nav a:hover {
    border-color: rgba(53, 200, 255, .18);
    background: rgba(53, 200, 255, .08);
    color: var(--text-primary);
}

.app-nav li.active a,
.app-nav a[aria-current="page"] {
    border-color: rgba(53, 200, 255, .28);
    background: rgba(53, 200, 255, .12);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.app-sidebar-foot {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    flex-shrink: 0;
}

.app-sidebar-foot .auth-link,
.app-sidebar-foot .balance-nav,
.app-sidebar-foot .public-theme-toggle,
.app-sidebar-foot .auth-logout,
.app-sidebar-foot .notification-nav {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(14, 28, 45, .72);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.app-sidebar-foot .auth-link-primary {
    border-color: rgba(53, 200, 255, .35);
    background: linear-gradient(135deg, var(--color-accent), #4f7dff);
    color: #041521;
}

.app-sidebar-foot .notification-nav b {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    text-align: center;
}

.app-sidebar-foot .balance-nav {
    color: var(--color-accent) !important;
}

.app-topbar {
    display: none;
}

.app-content {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    padding-bottom: 0;
}

body.app-shell .container {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
}

body.app-shell .app-content > .hero-section > .container,
body.app-shell .app-content > .content-banners.container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

body.app-shell .footer {
    margin-top: 48px;
    padding: 28px 0 36px;
    border-top: 1px solid var(--line);
    background: transparent;
}

.public-drawer-backdrop {
    display: none;
}

body.app-shell .hero-section {
    padding: 28px 0 12px;
}

body.app-shell .hero-banner {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(53, 200, 255, .22);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(14, 28, 45, .92), rgba(7, 17, 29, .88)),
        radial-gradient(circle at 88% 18%, rgba(53, 200, 255, .18), transparent 28%);
    animation: none;
}

body.app-shell .hero-banner::before,
body.app-shell .hero-banner::after {
    display: none;
}

body.app-shell .hero-character {
    right: 2%;
    bottom: 0;
    max-width: min(340px, 34%);
    pointer-events: none;
    opacity: .88;
}

body.app-shell .hero-character img {
    max-height: 320px;
    object-fit: contain;
}

body.app-shell .hero-title {
    max-width: 14ch;
    margin: 12px 0 10px;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

body.app-shell .hero-subtitle {
    max-width: 640px;
    color: var(--text-secondary);
    font-size: 16px;
}

body.app-shell .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

body.app-shell .btn,
body.app-shell .btn-hero {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-weight: 800;
}

body.app-shell .btn-hero-primary,
body.app-shell .btn.auth-submit,
body.app-shell #submitBtn {
    border: 0;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    color: #041521;
    box-shadow: 0 12px 28px rgba(53, 200, 255, .22);
}

body.app-shell .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body.app-shell .stat-card {
    display: flex;
    min-height: 108px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    animation: none;
}

body.app-shell .catalog-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 18px;
    padding: 26px 26px 22px;
    border: 1px solid rgba(53, 200, 255, .2);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(17, 31, 48, .94), rgba(9, 18, 30, .94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 34px rgba(2,6,23,.18);
    overflow: hidden;
}

body.app-shell .catalog-intro::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(53,200,255,0), rgba(53,200,255,.9), rgba(53,200,255,0));
}

body.app-shell .catalog-intro h2 {
    margin: 12px 0 10px;
    font-size: clamp(28px, 3.6vw, 56px);
    line-height: .96;
    letter-spacing: -.06em;
}

body.app-shell .shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.app-shell .shop-search,
body.app-shell .shop-sort {
    min-width: min(100%, 220px);
    flex: 1 1 220px;
}

body.app-shell .items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.app-shell .item-id {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    animation: none;
}

body.app-shell .item-id .title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
}

body.app-shell .item-id .image {
    height: 132px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

body.app-shell .product-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

body.app-shell .product-buy {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: rgba(53, 200, 255, .16);
    color: var(--color-accent);
    cursor: pointer;
    font-weight: 800;
}

body.app-shell .modal .wrapper {
    max-width: min(980px, calc(100% - 24px));
}

body.app-shell .modal-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 18px;
}

body.app-shell .purchase-period {
    min-height: 64px;
}

body.app-shell .a-alert {
    z-index: 1200;
}

:focus-visible {
    outline: 3px solid rgba(53, 200, 255, .7);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--color-accent);
    color: #041521;
    font-weight: 800;
}

.skip-link:focus {
    top: 12px;
}

@media (max-width: 1199px) {
    body.app-shell .items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    :root { --sidebar-width: 0px; }
    .app-sidebar {
        width: min(360px, 88vw);
        min-width: 320px;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 24px 0 60px rgba(0, 0, 0, .35);
    }
    body.public-drawer-open .app-sidebar {
        transform: translateX(0);
    }
    .app-topbar {
        position: sticky;
        top: 0;
        z-index: 70;
        display: flex;
        min-height: var(--topbar-height);
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
        background: rgba(7, 17, 29, .92);
        backdrop-filter: blur(16px);
    }
    .app-content { margin-left: 0; }
    .app-topbar .logo,
    .app-topbar .nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .navbar-mobile,
    .public-theme-toggle {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--bg-raised);
        color: var(--text-primary);
        cursor: pointer;
    }
    .public-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 75;
        display: none;
        background: rgba(2, 8, 16, .62);
    }
    body.public-drawer-open .public-drawer-backdrop { display: block; }
    body.public-drawer-open { overflow: hidden; }
}

@media (max-width: 767px) {
    :root { --sidebar-width: 0px; }
    .app-frame,
    .app-container {
        display: block;
        width: 100%;
        max-width: none;
        min-height: auto;
        margin: 0;
        padding: 0;
    }
    .app-sidebar {
        width: min(330px, 88vw);
        min-width: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
    }
    body.public-drawer-open .app-sidebar { transform: translateX(0); }
    .app-topbar {
        position: sticky;
        top: 0;
        z-index: 70;
        display: flex;
        min-height: var(--topbar-height);
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--line);
        background: rgba(7, 17, 29, .94);
    }
    .app-content {
        display: block;
        width: 100%;
        margin-left: 0;
        padding: 0 12px 28px;
        box-sizing: border-box;
    }
    .navbar-mobile,
    .public-theme-toggle,
    .app-topbar .balance-nav {
        min-height: 44px;
        min-width: 44px;
    }
    .app-topbar .balance-nav {
        max-width: 46vw;
        overflow-wrap: anywhere;
        padding: 0 10px;
        font-size: 12px;
    }
    .public-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 75;
        display: none;
        background: rgba(2, 8, 16, .66);
    }
    body.public-drawer-open .public-drawer-backdrop { display: block; }
    body.public-drawer-open { overflow: hidden; }
    body.app-shell .hero-character { display: none; }
    body.app-shell .hero-title { max-width: none; font-size: clamp(34px, 11vw, 48px); }
    body.app-shell .hero-header-row,
    body.app-shell .hero-features,
    body.app-shell .stats-grid,
    body.app-shell .catalog-intro,
    body.app-shell .shop-toolbar,
    body.app-shell .modal-split,
    body.app-shell .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body.app-shell .hero-features span,
    body.app-shell .hero-actions > *,
    body.app-shell .shop-toolbar > * {
        width: 100%;
    }
    body.app-shell .items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.app-shell .item-id {
        min-height: 290px;
    }
    body.app-shell .product-card-foot {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    body.app-shell .product-buy,
    body.app-shell .product-favorite {
        width: 100%;
    }
    body.app-shell .stat-card { min-height: 96px; }
    body.app-shell .container {
        width: min(100%, calc(100% - 20px));
    }
}

@media (max-width: 479px) {
    body.app-shell .items { grid-template-columns: 1fr; }
}

body.public-light.app-shell {
    --bg-app: #eef5fb;
    --bg-sidebar: #f7fbff;
    --bg-card: #ffffff;
    --bg-raised: #ffffff;
    --text-primary: #102132;
    --text-secondary: #4d6478;
    --line: rgba(16, 33, 50, .12);
    background-color: #eef5fb !important;
    color: #102132;
}

body.public-light.app-shell .app-sidebar,
body.public-light.app-shell .app-topbar {
    background: #f7fbff;
}

body.app-shell .auth-page,
body.app-shell .support-app,
body.app-shell .orders-page,
body.app-shell .wiki-page,
body.app-shell .mint-page {
    padding: 28px 0 40px;
}

body.app-shell .auth-card,
body.app-shell .mint-card,
body.app-shell .support-app,
body.app-shell .customer-order {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

body.app-shell .auth-submit.is-loading,
body.app-shell .btn.is-loading,
body.app-shell button[aria-busy="true"] {
    opacity: .72;
    pointer-events: none;
}

@media (max-width: 1199px) {
    body.app-shell .app-topbar .navbar-mobile,
    body.app-shell .app-topbar .public-theme-toggle {
        display: grid;
    }
}

/* NOXIS game UI: final theme direction from the product specification. */
:root {
    --bg-app: #070911;
    --bg-sidebar: #0c1020;
    --bg-card: #111729;
    --bg-raised: #182038;
    --color-accent: #8b5cf6;
    --color-accent-rgb: 139, 92, 246;
    --color-accent-2: #22d3ee;
    --color-success: #22d3a3;
    --color-warning: #fbbf24;
    --color-danger: #fb7185;
    --text-primary: #f7f8ff;
    --text-secondary: #8f9ab7;
    --line: rgba(154, 170, 219, .16);
    --shadow-card: 0 22px 55px rgba(0, 0, 0, .32);
    --focus: 0 0 0 3px rgba(139, 92, 246, .35);
}

body.app-shell {
    background:
        radial-gradient(circle at 88% -10%, rgba(139, 92, 246, .19), transparent 30rem),
        radial-gradient(circle at 8% 40%, rgba(34, 211, 238, .1), transparent 28rem),
        #070911 !important;
    color: var(--text-primary);
}

body.app-shell .app-sidebar {
    background: rgba(10, 14, 29, .95);
    border-right-color: rgba(139, 92, 246, .18);
    box-shadow: 14px 0 48px rgba(0, 0, 0, .28);
}

body.app-shell .app-brand-mark {
    background: linear-gradient(135deg, #8b5cf6, #22d3ee);
    color: #fff;
    box-shadow: 0 10px 28px rgba(139, 92, 246, .3);
}

body.app-shell .app-brand strong,
body.app-shell .app-nav a,
body.app-shell .app-sidebar-foot .auth-link,
body.app-shell .app-sidebar-foot .balance-nav,
body.app-shell .app-sidebar-foot .public-theme-toggle,
body.app-shell .app-sidebar-foot .auth-logout,
body.app-shell .app-sidebar-foot .notification-nav {
    color: #d9ddf2;
}

body.app-shell .app-brand small,
body.app-shell .app-nav-kicker,
body.app-shell .app-sidebar-label {
    color: #697493;
}

body.app-shell .app-nav a i,
body.app-shell .app-nav a:hover i,
body.app-shell .app-nav li.active a i {
    color: #22d3ee;
}

body.app-shell .app-nav a:hover,
body.app-shell .app-sidebar-foot .auth-link:hover,
body.app-shell .app-sidebar-foot .balance-nav:hover {
    background: rgba(139, 92, 246, .12);
    color: #fff;
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(139, 92, 246, .38);
    background: linear-gradient(90deg, rgba(139, 92, 246, .2), rgba(34, 211, 238, .07));
    color: #fff;
    box-shadow: inset 3px 0 #8b5cf6, 0 0 24px rgba(139, 92, 246, .08);
}

body.app-shell .app-sidebar-foot .auth-link,
body.app-shell .app-sidebar-foot .balance-nav,
body.app-shell .app-sidebar-foot .public-theme-toggle,
body.app-shell .app-sidebar-foot .auth-logout,
body.app-shell .app-sidebar-foot .notification-nav {
    border-color: var(--line);
    background: rgba(17, 23, 41, .76);
}

body.app-shell .app-sidebar-foot .balance-nav,
body.app-shell .app-sidebar-foot .balance-nav *,
body.app-shell .app-sidebar-foot .auth-link,
body.app-shell .app-sidebar-foot .auth-link *,
body.app-shell .app-sidebar-foot .auth-logout,
body.app-shell .app-sidebar-foot .auth-logout *,
body.app-shell .app-sidebar-foot .public-theme-toggle,
body.app-shell .app-sidebar-foot .public-theme-toggle * {
    color: #d9ddf2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none;
}

body.app-shell .app-sidebar-foot .balance-nav i {
    color: #22d3ee !important;
}

/* Final Noxis navigation surface: keep the menu readable above legacy theme rules. */
body.app-shell .app-sidebar {
    padding: 22px 14px max(18px, env(safe-area-inset-bottom));
    border-right: 1px solid rgba(82, 91, 128, .28);
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 210, 255, .1), transparent 15rem),
        linear-gradient(180deg, rgba(13, 17, 31, .98), rgba(8, 11, 21, .98));
    box-shadow: 18px 0 50px rgba(0, 0, 0, .24);
}

body.app-shell .app-brand {
    min-height: 56px;
    margin: 0 8px 28px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: rgba(22, 27, 38, .72);
}

body.app-shell .app-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #00d2ff, #7065ff);
    box-shadow: 0 0 24px rgba(0, 210, 255, .28);
}

body.app-shell .app-nav {
    gap: 6px;
}

body.app-shell .app-nav a {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #aab4c9 !important;
    background: transparent;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

body.app-shell .app-nav a i {
    color: #22d3ee !important;
    font-size: 14px;
}

body.app-shell .app-nav a:hover {
    transform: translateX(3px);
    border-color: rgba(0, 210, 255, .2);
    background: linear-gradient(90deg, rgba(0, 210, 255, .13), rgba(112, 101, 255, .08));
    color: #fff !important;
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(0, 210, 255, .34);
    background: linear-gradient(90deg, rgba(0, 210, 255, .2), rgba(112, 101, 255, .15));
    color: #fff !important;
    box-shadow: inset 3px 0 #00d2ff, 0 0 20px rgba(0, 210, 255, .08);
}

body.app-shell .app-sidebar-foot {
    gap: 8px;
    margin-top: auto;
    padding: 18px 0 0;
    border-top: 1px solid rgba(82, 91, 128, .24);
}

body.app-shell .app-sidebar-foot .auth-link,
body.app-shell .app-sidebar-foot .balance-nav,
body.app-shell .app-sidebar-foot .public-theme-toggle,
body.app-shell .app-sidebar-foot .auth-logout,
body.app-shell .app-sidebar-foot .notification-nav {
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(82, 91, 128, .28) !important;
    border-radius: 12px;
    background: rgba(22, 27, 38, .82) !important;
    color: #d9ddf2 !important;
    box-shadow: none;
}

body.app-shell .app-sidebar-foot .auth-link:hover,
body.app-shell .app-sidebar-foot .balance-nav:hover,
body.app-shell .app-sidebar-foot .public-theme-toggle:hover,
body.app-shell .app-sidebar-foot .auth-logout:hover {
    border-color: rgba(0, 210, 255, .38) !important;
    background: rgba(0, 210, 255, .1) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(0, 210, 255, .12);
}

body.app-shell .app-sidebar-foot .auth-link-primary {
    border-color: transparent !important;
    background: linear-gradient(135deg, #00d2ff, #7065ff) !important;
    color: #06111c !important;
    box-shadow: 0 0 22px rgba(0, 210, 255, .2);
}

body.app-shell .app-sidebar-foot .auth-link-primary * {
    color: #06111c !important;
}

body.app-shell .app-topbar {
    border-bottom-color: rgba(82, 91, 128, .3);
    background: rgba(10, 14, 29, .94);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

body.app-shell .navbar-mobile,
body.app-shell .app-topbar .public-theme-toggle {
    border-color: rgba(82, 91, 128, .35);
    border-radius: 12px;
    background: #161b26;
    color: #d9ddf2;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

body.app-shell .navbar-mobile:hover,
body.app-shell .app-topbar .public-theme-toggle:hover {
    border-color: rgba(0, 210, 255, .45);
    color: #00d2ff;
    box-shadow: 0 0 18px rgba(0, 210, 255, .14);
}

/* Motion navigation layer: transform/opacity only for smooth 60 FPS transitions. */
body.app-shell .app-topbar {
    position: sticky;
    top: 12px;
    z-index: 70;
    margin: 12px 18px 0;
    border: 1px solid rgba(0, 210, 255, .15);
    border-radius: 18px;
    background: rgba(22, 27, 34, .75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.app-shell .app-topbar .logo,
body.app-shell .app-brand {
    transition: transform .25s ease, filter .25s ease;
    will-change: transform;
}

body.app-shell .app-topbar .logo:hover,
body.app-shell .app-brand:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 12px rgba(0, 210, 255, .42));
}

body.app-shell .app-nav {
    position: relative;
}

body.app-shell .app-nav a {
    position: relative;
    transform: translateZ(0);
    will-change: transform, color;
}

body.app-shell .app-nav a::after {
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #00d2ff, #7065ff);
    box-shadow: 0 0 12px rgba(0, 210, 255, .75);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}

body.app-shell .app-nav a:hover,
body.app-shell .app-nav li.active a {
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(0, 210, 255, .5);
}

body.app-shell .app-nav a:hover::after,
body.app-shell .app-nav li.active a::after,
body.app-shell .app-nav a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

body.app-shell .app-nav a i,
body.app-shell .app-sidebar-foot i,
body.app-shell .navbar-mobile i {
    transition: transform .25s ease, color .25s ease;
    will-change: transform;
}

body.app-shell .app-nav a:hover i {
    transform: translateY(-2px) rotate(-8deg);
}

body.app-shell .balance-nav {
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
    will-change: transform, box-shadow;
}

body.app-shell .balance-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 210, 255, .24);
}

body.app-shell .balance-nav.balance-updated {
    animation: noxis-balance-pulse .7s ease-out;
}

@keyframes noxis-balance-pulse {
    0% { box-shadow: 0 0 0 rgba(0, 210, 255, 0); }
    35% { box-shadow: 0 0 24px rgba(0, 210, 255, .65); }
    100% { box-shadow: 0 0 0 rgba(0, 210, 255, 0); }
}

body.app-shell .profile-menu {
    position: relative;
}

body.app-shell .profile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(82, 91, 128, .35);
    border-radius: 12px;
    background: rgba(22, 27, 38, .8);
    color: #d9ddf2;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

body.app-shell .profile-menu-toggle:hover,
body.app-shell .profile-menu.is-open .profile-menu-toggle {
    border-color: rgba(0, 210, 255, .42);
    box-shadow: 0 0 18px rgba(0, 210, 255, .14);
    transform: translateY(-2px);
}

body.app-shell .profile-avatar {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(0, 210, 255, .45);
    border-radius: 9px;
    background: rgba(0, 210, 255, .12);
    color: #00d2ff;
}
body.app-shell .profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

body.app-shell .profile-menu-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .profile-menu-chevron {
    font-size: 10px;
    transition: transform .25s ease;
}

body.app-shell .profile-menu.is-open .profile-menu-chevron {
    transform: rotate(180deg);
}

body.app-shell .profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: 220px;
    padding: 7px;
    border: 1px solid rgba(0, 210, 255, .22);
    border-radius: 14px;
    background: rgba(13, 17, 23, .97);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .38), 0 0 22px rgba(0, 210, 255, .1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.95);
    transform-origin: top right;
    transition: opacity .2s ease, transform .2s ease;
    will-change: opacity, transform;
}

body.app-shell .profile-menu.is-open .profile-menu-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

body.app-shell .profile-menu-dropdown a,
body.app-shell .profile-menu-dropdown form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #b8c3d5;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

body.app-shell .profile-menu-dropdown a:hover,
body.app-shell .profile-menu-dropdown form button:hover {
    background: rgba(0, 210, 255, .1);
    color: #fff;
}

body.app-shell .profile-menu-dropdown i {
    width: 16px;
    color: #00d2ff;
    text-align: center;
}

@media (max-width: 767px) {
    body.app-shell .app-sidebar {
        right: 0;
        left: auto;
        transform: translateX(105%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
    }

    body.app-shell.public-drawer-open .app-sidebar {
        transform: translateX(0);
    }

    body.app-shell .app-sidebar .app-nav li,
    body.app-shell .app-sidebar .app-sidebar-foot > * {
        opacity: 0;
        transform: translateX(18px);
    }

    body.app-shell.public-drawer-open .app-sidebar .app-nav li,
    body.app-shell.public-drawer-open .app-sidebar .app-sidebar-foot > * {
        opacity: 1;
        transform: translateX(0);
        transition: opacity .25s ease, transform .25s ease;
    }

    body.app-shell.public-drawer-open .app-sidebar .app-nav li:nth-child(1) { transition-delay: .05s; }
    body.app-shell.public-drawer-open .app-sidebar .app-nav li:nth-child(2) { transition-delay: .09s; }
    body.app-shell.public-drawer-open .app-sidebar .app-nav li:nth-child(3) { transition-delay: .13s; }
    body.app-shell.public-drawer-open .app-sidebar .app-nav li:nth-child(4) { transition-delay: .17s; }
    body.app-shell.public-drawer-open .app-sidebar .app-nav li:nth-child(5) { transition-delay: .21s; }

    body.app-shell .app-topbar {
        margin: 8px 10px 0;
    }

    body.app-shell .profile-menu-name {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    body.app-shell *::before,
    body.app-shell *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Store pages should use the workspace from the sidebar edge, not leave a
   large empty gutter created by centering a narrow max-width container. */
body.app-shell .main-content,
body.app-shell .main-content.container {
    width: auto;
    max-width: none;
    margin-left: 28px;
    margin-right: 28px;
}

@media (max-width: 767px) {
    body.app-shell .main-content,
    body.app-shell .main-content.container {
        margin-left: 14px;
        margin-right: 14px;
    }
}

/* Account and orders must align to the content column immediately after the
   fixed sidebar. Do not center a second max-width container inside it. */
body.app-shell .app-content > .auth-page {
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
}

body.app-shell .app-content > .auth-page > .account-shell,
body.app-shell .app-content > .auth-page > .orders-shell {
    display: block;
    width: calc(100% - 24px) !important;
    max-width: 1240px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

body.app-shell .orders-page > .orders-shell,
body.app-shell .auth-page > .account-shell {
    position: relative;
    left: 0 !important;
}

/* Storefront refresh: stronger hierarchy and product-first shopping flow. */
body.app-shell .hero-section {
    padding-top: 28px;
}

body.app-shell .hero-banner {
    min-height: 360px;
    padding: clamp(28px, 5vw, 58px);
    border-color: rgba(0, 210, 255, .28);
    background:
        linear-gradient(120deg, rgba(8, 19, 32, .97), rgba(13, 17, 23, .82)),
        radial-gradient(circle at 85% 20%, rgba(0, 210, 255, .2), transparent 30%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .06);
}

body.app-shell .hero-title {
    max-width: 12ch;
    margin-top: 18px;
    font-size: clamp(38px, 6vw, 68px);
    text-shadow: 0 0 34px rgba(0, 210, 255, .22);
}

body.app-shell .hero-subtitle {
    max-width: 560px;
    color: #a8b8ca;
}

body.app-shell .hero-features span {
    border-color: rgba(0, 210, 255, .16);
    border-radius: 999px;
    background: rgba(0, 210, 255, .07);
    color: #b9c9dc;
}

body.app-shell .main-content {
    padding-top: 34px;
}

body.app-shell .catalog-intro {
    align-items: end;
    margin-bottom: 16px;
}

body.app-shell .catalog-intro h2 {
    margin-top: 8px;
    color: #f5f9ff;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.055em;
}

body.app-shell .catalog-intro-meta {
    border-color: rgba(0, 210, 255, .2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 38, .78));
    box-shadow: 0 0 22px rgba(0, 210, 255, .08);
}

body.app-shell .server-selector-container,
body.app-shell .tabs {
    border-color: rgba(82, 91, 128, .28);
    border-radius: 16px;
    background: rgba(13, 20, 32, .78);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}

body.app-shell .server-selector-container {
    padding: 14px 16px;
}

body.app-shell .server-buttons .server-btn {
    border-radius: 11px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.app-shell .server-buttons .server-btn:hover,
body.app-shell .server-buttons .server-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(0, 210, 255, .16);
}

body.app-shell .shop-toolbar {
    justify-content: stretch;
    margin-bottom: 12px;
    border-color: rgba(82, 91, 128, .28);
    background: rgba(13, 20, 32, .78);
}

body.app-shell .shop-search {
    flex: 1 1 320px;
    width: auto;
}

body.app-shell .tabs-wrapper {
    align-items: center;
    margin-bottom: 16px;
    padding: 10px;
    border-color: rgba(82, 91, 128, .28);
    border-radius: 16px;
    background: rgba(13, 20, 32, .78);
}

body.app-shell .tabs .tab-links {
    gap: 7px;
}

body.app-shell .tabs .tab-links > li > a {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #94a6bb;
    transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}

body.app-shell .tabs .tab-links > li > a:hover,
body.app-shell .tabs .tab-links > li.active > a {
    border-color: rgba(0, 210, 255, .28);
    background: rgba(0, 210, 255, .12);
    color: #fff;
    transform: translateY(-2px);
}

body.app-shell .tab-list .tab-id > .category-text .panel {
    border-color: rgba(0, 210, 255, .18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 38, .68));
    color: #b9c9dc;
}

body.app-shell .items {
    gap: 14px;
}

body.app-shell .item-id {
    display: flex;
    min-height: 352px;
    flex-direction: column;
    padding: 10px;
    border: 1px solid rgba(82, 91, 128, .32);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(22, 34, 51, .98), rgba(9, 18, 30, .96));
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body.app-shell .item-id:hover {
    border-color: rgba(0, 210, 255, .42);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28), 0 0 22px rgba(0, 210, 255, .1);
    transform: translateY(-5px);
}

body.app-shell .item-id .image {
    min-height: 150px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 11px;
    background-color: #1a2638;
    background-size: contain;
}

body.app-shell .item-id .title {
    margin-top: 14px;
    color: #f5f9ff;
    font-size: 15px;
    letter-spacing: .04em;
}

body.app-shell .item-id .description {
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    color: #879ab0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.app-shell .item-id .product-card-foot {
    margin-top: auto;
    padding-top: 14px;
}

body.app-shell .item-id .price {
    color: #00d2ff;
    font-size: 18px;
    text-shadow: 0 0 14px rgba(0, 210, 255, .22);
}

body.app-shell .item-id .product-buy {
    border-color: rgba(0, 210, 255, .28);
    border-radius: 9px;
    background: rgba(0, 210, 255, .1);
    color: #72e5ff;
    transition: background .2s ease, box-shadow .2s ease;
}

body.app-shell .item-id .product-buy:hover {
    background: #00d2ff;
    color: #06111c;
    box-shadow: 0 0 18px rgba(0, 210, 255, .3);
}

/* Keep an incomplete final row centered instead of leaving it stuck to the left. */
body.app-shell .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

body.app-shell .items .item-id {
    flex: 0 1 calc(20% - 12px);
    width: calc(20% - 12px);
}

@media (max-width: 767px) {
    body.app-shell .app-content > .auth-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.app-shell .hero-banner {
        min-height: 300px;
        padding: 26px 20px;
    }

    body.app-shell .hero-title {
        font-size: clamp(34px, 12vw, 52px);
    }

    body.app-shell .tabs-wrapper {
        overflow-x: auto;
    }

    body.app-shell .tabs .tab-links {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    body.app-shell .items .item-id {
        flex-basis: calc(50% - 7px);
        width: calc(50% - 7px);
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    body.app-shell .items .item-id {
        flex-basis: calc(33.333% - 10px);
        width: calc(33.333% - 10px);
    }
}

/* Account profile hierarchy and actions. */
body.app-shell .account-profile-grid {
    align-items: center;
    gap: 18px;
    margin: 8px 0 24px;
    padding: 20px;
    border: 1px solid rgba(0, 210, 255, .16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 38, .72) 48%, rgba(112, 101, 255, .08));
}

body.app-shell .account-profile-avatar {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border: 1px solid rgba(0, 210, 255, .4);
    border-radius: 24px;
    background: radial-gradient(circle at 30% 20%, rgba(0, 210, 255, .25), rgba(22, 27, 38, .95));
    color: #00d2ff;
    box-shadow: 0 0 24px rgba(0, 210, 255, .22), inset 0 0 18px rgba(0, 210, 255, .08);
}

body.app-shell .account-profile-copy {
    min-width: 0;
}

body.app-shell .account-profile-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.app-shell .account-profile-name h2 {
    margin: 4px 0 2px;
    color: #fff;
    font-size: clamp(24px, 4vw, 32px);
    letter-spacing: -.045em;
}

body.app-shell .account-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid rgba(0, 210, 255, .28);
    border-radius: 999px;
    background: rgba(0, 210, 255, .1);
    color: #72e5ff;
    font-size: 11px;
    font-weight: 800;
}

body.app-shell .account-profile-separator {
    color: rgba(142, 168, 189, .45);
}

body.app-shell .account-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

body.app-shell .account-details .account-metric {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(82, 91, 128, .34);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(22, 27, 38, .96), rgba(16, 23, 36, .78));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .14);
}

body.app-shell .account-details .account-metric::after {
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(0, 210, 255, .08);
    content: "";
    filter: blur(2px);
}

body.app-shell .account-details .account-metric > span {
    color: #aab4c9;
    font-size: 12px;
    font-weight: 700;
}

body.app-shell .account-details .account-metric > span i {
    width: 18px;
    margin-right: 5px;
    color: #00d2ff;
    text-align: center;
}

body.app-shell .account-details .account-metric > strong {
    color: #f3f8ff;
    font-size: clamp(23px, 3vw, 30px);
    letter-spacing: -.04em;
}

body.app-shell .account-details .account-metric-balance {
    border-color: rgba(0, 210, 255, .34);
}

body.app-shell .account-details .account-metric-balance > strong {
    color: #00d2ff;
}

body.app-shell .account-details .account-metric > small {
    color: #71849b;
    font-size: 11px;
}

body.app-shell .account-tabs {
    min-width: 0;
}

body.app-shell .account-tabs .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid rgba(82, 91, 128, .28);
    border-radius: 14px;
    background: rgba(10, 14, 25, .64);
    scrollbar-width: thin;
}

body.app-shell .account-tabs .nav-tabs li {
    flex: 0 0 auto;
}

body.app-shell .account-tabs .nav-tabs a {
    position: relative;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #9eabc0;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

body.app-shell .account-tabs .nav-tabs a:hover {
    border-color: rgba(0, 210, 255, .18);
    background: rgba(0, 210, 255, .08);
    color: #fff;
}

body.app-shell .account-tabs .nav-tabs .active a {
    border-color: rgba(0, 210, 255, .3);
    background: rgba(0, 210, 255, .13);
    color: #fff;
    box-shadow: inset 0 -2px #00d2ff, 0 0 16px rgba(0, 210, 255, .08);
}

body.app-shell .account-actions {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(82, 91, 128, .24);
}

body.app-shell .account-actions form {
    margin: 0;
}

body.app-shell .account-actions .btn {
    min-height: 44px;
    border-radius: 12px;
    white-space: nowrap;
}

body.app-shell .account-action-mint {
    border-color: rgba(0, 210, 255, .3) !important;
    background: rgba(0, 210, 255, .08) !important;
    color: #72e5ff !important;
}

body.app-shell .account-action-catalog {
    box-shadow: 0 0 22px rgba(0, 210, 255, .25);
}

body.app-shell .account-action-support,
body.app-shell .account-action-logout {
    padding-inline: 16px;
}

@media (max-width: 700px) {
    body.app-shell .account-details {
        grid-template-columns: 1fr;
    }

    body.app-shell .account-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell .account-action-catalog {
        order: -1;
    }

    body.app-shell .account-actions .btn,
    body.app-shell .account-actions form,
    body.app-shell .account-actions form .btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    body.app-shell .account-profile-grid {
        align-items: flex-start;
        padding: 16px;
    }

    body.app-shell .account-profile-avatar {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    body.app-shell .account-actions {
        grid-template-columns: 1fr;
    }
}

body.app-shell .app-sidebar-foot .auth-link-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #8b5cf6, #6d5dfc);
    color: #fff;
}

body.app-shell .hero-banner {
    border-color: rgba(139, 92, 246, .38);
    background:
        linear-gradient(100deg, rgba(10, 13, 26, .98) 0%, rgba(12, 17, 34, .88) 54%, rgba(12, 17, 34, .38) 100%),
        url("../img/Hero.webp") right center / auto 100% no-repeat,
        #0d1325;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 70px rgba(139, 92, 246, .08);
}

body.app-shell .hero-banner::before {
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    box-shadow: 0 0 34px rgba(139, 92, 246, .7);
}

body.app-shell .hero-badge,
body.app-shell .section-kicker {
    color: #22d3ee;
}

body.app-shell .online-pill {
    border-color: rgba(34, 211, 238, .2);
    background: rgba(7, 9, 17, .68);
    color: #d9ddf2;
}

body.app-shell .hero-title {
    color: #fff;
    text-shadow: 0 0 34px rgba(139, 92, 246, .18);
}

body.app-shell .hero-title .hat-letter {
    color: #a78bfa;
}

body.app-shell .hero-subtitle,
body.app-shell .catalog-intro p {
    color: #9aa6c2;
}

body.app-shell .hero-features span {
    border-color: rgba(154, 170, 219, .16);
    background: rgba(255, 255, 255, .045);
    color: #cbd2e8;
}

body.app-shell .hero-features i {
    color: #22d3ee;
}

body.app-shell .btn-hero-primary,
body.app-shell .btn.auth-submit,
body.app-shell #submitBtn {
    background: linear-gradient(135deg, #8b5cf6, #6d5dfc);
    color: #fff;
    box-shadow: 0 14px 30px rgba(139, 92, 246, .3);
}

body.app-shell .btn-hero:not(.btn-hero-primary) {
    border-color: var(--line);
    background: rgba(255, 255, 255, .055);
    color: #f7f8ff;
}

body.app-shell .stat-card,
body.app-shell .server-selector-container,
body.app-shell .shop-toolbar,
body.app-shell .item-id,
body.app-shell .faq-item,
body.app-shell .payment-id.window,
body.app-shell .panel,
body.app-shell .auth-card,
body.app-shell .mint-card,
body.app-shell .support-app,
body.app-shell .customer-order {
    border-color: var(--line);
    background: rgba(17, 23, 41, .86);
    box-shadow: var(--shadow-card);
}

body.app-shell .stat-icon {
    border-color: rgba(34, 211, 238, .2);
    background: rgba(34, 211, 238, .09);
    color: #22d3ee;
}

body.app-shell .stat-number,
body.app-shell .item-id .title,
body.app-shell .blockname,
body.app-shell .faq-question {
    color: #f7f8ff;
}

body.app-shell .server-selector-label span,
body.app-shell .shop-control,
body.app-shell .item-id .description,
body.app-shell .faq-answer {
    color: #8f9ab7;
}

body.app-shell .server-btn {
    border-color: var(--line);
    color: #8f9ab7;
}

body.app-shell .server-btn.active,
body.app-shell .server-btn:hover,
body.app-shell .tabs .tab-links > li.active > a,
body.app-shell .tabs .tab-links > li > a:hover {
    border-color: rgba(34, 211, 238, .3);
    background: rgba(34, 211, 238, .1);
    color: #22d3ee;
}

body.app-shell .shop-control,
body.app-shell input,
body.app-shell select,
body.app-shell textarea {
    border-color: var(--line);
    background: rgba(8, 12, 24, .72);
    color: #f7f8ff;
}

body.app-shell .item-id {
    background:
        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .14), transparent 52%),
        rgba(17, 23, 41, .92);
}

body.app-shell .item-id:hover {
    border-color: rgba(139, 92, 246, .5);
    background:
        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .22), transparent 55%),
        #151d35;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .36), 0 0 28px rgba(139, 92, 246, .12);
}

body.app-shell .item-id .image {
    background-color: #18213a;
}

body.app-shell .item-id .price,
body.app-shell .item-id .price i {
    color: #a78bfa;
}

body.app-shell .product-buy {
    border-color: rgba(139, 92, 246, .36);
    background: rgba(139, 92, 246, .16);
    color: #c4b5fd;
}

body.app-shell .product-buy:hover {
    background: #8b5cf6;
    color: #fff;
}

body.app-shell :where(.product-badge, .badge, .status-badge) {
    background: rgba(34, 211, 238, .12);
    color: #67e8f9;
}

body.app-shell .discount {
    border-color: rgba(251, 113, 133, .3);
    background: rgba(251, 113, 133, .12);
    color: #fb7185;
}

body.app-shell .footer {
    border-top-color: var(--line);
}

body.app-shell .modal > .wrapper > .modal-content {
    border-color: rgba(139, 92, 246, .3);
    background: #111729;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .5), 0 0 40px rgba(139, 92, 246, .1);
}

body.app-shell .purchase-product-card,
body.app-shell .purchase-benefits,
body.app-shell .purchase-summary,
body.app-shell .purchase-trust-row span,
body.app-shell .method-card {
    border-color: var(--line);
    background: rgba(255, 255, 255, .04);
}

body.app-shell .empty-state {
    border-color: rgba(139, 92, 246, .28);
    background: rgba(17, 23, 41, .7);
    color: #8f9ab7;
}

body.app-shell .empty-state > i {
    background: rgba(139, 92, 246, .14);
    color: #a78bfa;
}

body.app-shell .empty-state strong {
    color: #f7f8ff;
}

body.app-shell :where(th, td) {
    border-bottom-color: var(--line);
}

body.app-shell :where(th) {
    color: #22d3ee;
}

body.app-shell :where(.pagination a, .pagination button, .pager a, .pager button) {
    border-color: var(--line);
    background: #111729;
    color: #8f9ab7;
}

body.app-shell :where(.pagination .active, .pagination a:hover, .pagination button:hover, .pager .active, .pager a:hover, .pager button:hover) {
    border-color: rgba(139, 92, 246, .35);
    background: rgba(139, 92, 246, .16);
    color: #c4b5fd;
}

body.app-shell .toast {
    border-color: rgba(139, 92, 246, .28);
    background: #111729;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .36);
    color: #f7f8ff;
}

@media (max-width: 767px) {
    body.app-shell .app-topbar {
        background: rgba(10, 14, 29, .92);
        border-bottom-color: rgba(139, 92, 246, .2);
    }

    body.app-shell .hero-banner {
        background:
            linear-gradient(180deg, rgba(10, 13, 26, .88) 0%, rgba(10, 13, 26, .98) 66%),
            url("../img/Hero.webp") center bottom / auto 52% no-repeat,
            #0d1325;
    }
}

/* Component states and accessibility primitives from the product specification. */
body.app-shell :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(12, 165, 159, .35);
    outline-offset: 3px;
}

body.app-shell :where(button, .btn, .product-buy, .server-btn, .public-theme-toggle, .navbar-mobile) {
    min-height: 42px;
}

body.app-shell :where(button, .btn, .product-buy)[disabled],
body.app-shell :where(button, .btn, .product-buy).is-disabled,
body.app-shell :where(button, .btn, .product-buy)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
}

body.app-shell :where(.is-loading, [aria-busy="true"]) {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

body.app-shell :where(.is-loading, [aria-busy="true"])::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #0ca59f;
    content: "";
    animation: summer-spin .7s linear infinite;
}

@keyframes summer-spin {
    to { transform: rotate(360deg); }
}

body.app-shell :where(.alert, .a-alert, .auth-alert, .flash) {
    border: 1px solid rgba(12, 165, 159, .18);
    border-radius: 12px;
    background: #f1fbf8;
    color: #176a60;
}

body.app-shell :where(.alert-danger, .auth-alert-error, .is-error) {
    border-color: rgba(239, 111, 115, .24);
    background: #fff3f2;
    color: #a4494d;
}

body.app-shell :where(.alert-warning, .is-warning) {
    border-color: rgba(245, 185, 66, .28);
    background: #fff9e9;
    color: #876324;
}

body.app-shell .empty-state {
    display: grid;
    min-height: 220px;
    place-items: center;
    gap: 8px;
    padding: 28px;
    border: 1px dashed rgba(18, 72, 96, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .58);
    color: #70909f;
    text-align: center;
}

body.app-shell .empty-state > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: rgba(24, 184, 144, .1);
    color: #0ca59f;
    font-size: 20px;
}

body.app-shell .empty-state strong {
    color: #123047;
    font-size: 15px;
}

body.app-shell :where(.table-wrap, .orders-table-wrap, .log-table-wrap) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.app-shell :where(table) {
    width: 100%;
    border-collapse: collapse;
}

body.app-shell :where(th, td) {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(18, 72, 96, .08);
    text-align: left;
    vertical-align: middle;
}

body.app-shell :where(th) {
    color: #0ca59f;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app-shell :where(.badge, .status-badge, .product-badge) {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(24, 184, 144, .1);
    color: #0b938d;
    font-size: 10px;
    font-weight: 800;
}

body.app-shell :where(.pagination, .pager) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

body.app-shell :where(.pagination a, .pagination button, .pager a, .pager button) {
    display: inline-grid;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    padding: 0 10px;
    border: 1px solid rgba(18, 72, 96, .12);
    border-radius: 9px;
    background: #fff;
    color: #638093;
}

body.app-shell :where(.pagination .active, .pagination a:hover, .pagination button:hover, .pager .active, .pager a:hover, .pager button:hover) {
    border-color: rgba(24, 184, 144, .25);
    background: rgba(24, 184, 144, .1);
    color: #0ca59f;
}

body.app-shell .toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2200;
    display: grid;
    gap: 8px;
    width: min(360px, calc(100% - 28px));
}

body.app-shell .toast {
    padding: 14px 16px;
    border: 1px solid rgba(18, 72, 96, .12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(33, 103, 125, .18);
    color: #123047;
}

@media (max-width: 767px) {
    body.app-shell .toast-stack {
        right: 14px;
        bottom: 14px;
    }

    body.app-shell :where(th, td) {
        padding: 11px 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .public-drawer-backdrop {
        transition: none !important;
    }
}

/* Summer visual direction: sea-blue surfaces, sun-yellow actions and coral highlights. */
:root {
    --bg-app: #edf9fb;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-raised: #f5fcfc;
    --color-accent: #f5b942;
    --color-accent-rgb: 245, 185, 66;
    --color-accent-2: #ff8f70;
    --color-success: #18b890;
    --color-warning: #f5b942;
    --color-danger: #ef6f73;
    --text-primary: #123047;
    --text-secondary: #638093;
    --line: rgba(18, 72, 96, .12);
    --shadow-card: 0 18px 48px rgba(33, 103, 125, .12);
    --focus: 0 0 0 3px rgba(245, 185, 66, .24);
}

body.app-shell {
    background:
        radial-gradient(circle at 88% 0%, rgba(245, 185, 66, .22), transparent 24rem),
        radial-gradient(circle at 0% 32%, rgba(58, 198, 207, .18), transparent 28rem),
        linear-gradient(180deg, #f7ffff 0%, #edf9fb 48%, #e8f6f7 100%) !important;
    color: var(--text-primary);
}

.app-sidebar {
    background: rgba(255, 255, 255, .9);
    border-right-color: rgba(18, 72, 96, .1);
    box-shadow: 12px 0 40px rgba(30, 106, 126, .08);
}

.app-brand-mark {
    background: linear-gradient(135deg, #ffd166, #ff9a76);
    color: #713c18;
    box-shadow: 0 9px 24px rgba(245, 185, 66, .28);
}

.app-brand strong,
.app-nav a,
.app-sidebar-foot .auth-link,
.app-sidebar-foot .balance-nav,
.app-sidebar-foot .public-theme-toggle,
.app-sidebar-foot .auth-logout,
.app-sidebar-foot .notification-nav {
    color: #173b52;
}

.app-brand small,
.app-nav-kicker,
.app-sidebar-label {
    color: #7c9aa6;
}

.app-nav a i,
.app-nav a:hover i,
.app-nav li.active a i {
    color: #20b3b3;
}

.app-nav a:hover {
    background: #eaf9f8;
    color: #0f3148;
}

.app-nav li.active a,
.app-nav a[aria-current="page"] {
    border-color: rgba(24, 184, 144, .22);
    background: linear-gradient(90deg, rgba(24, 184, 144, .13), rgba(245, 185, 66, .08));
    color: #123047;
    box-shadow: inset 3px 0 0 #18b890;
}

.app-sidebar-foot .auth-link,
.app-sidebar-foot .balance-nav,
.app-sidebar-foot .public-theme-toggle,
.app-sidebar-foot .auth-logout,
.app-sidebar-foot .notification-nav {
    border-color: rgba(18, 72, 96, .1);
    background: #f7fcfc;
}

.app-sidebar-foot .auth-link-primary {
    background: linear-gradient(135deg, #ffd166, #ff9a76);
    color: #713c18;
}

body.app-shell .hero-banner {
    border-color: rgba(24, 184, 144, .2);
    background:
        linear-gradient(100deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .78) 54%, rgba(255, 255, 255, .2) 100%),
        url("../img/Hero.webp") right center / auto 100% no-repeat,
        linear-gradient(135deg, #bcefeb, #fff0c2);
    box-shadow: 0 30px 80px rgba(33, 103, 125, .14);
}

body.app-shell .hero-banner::before {
    background: linear-gradient(90deg, #f5b942, #ff8f70);
    box-shadow: 0 0 30px rgba(245, 185, 66, .45);
}

body.app-shell .hero-badge,
body.app-shell .section-kicker {
    color: #0ca59f;
}

body.app-shell .online-pill {
    border-color: rgba(18, 72, 96, .12);
    background: rgba(255, 255, 255, .74);
    color: #31566b;
}

body.app-shell .hero-title {
    color: #123047;
}

body.app-shell .hero-title .hat-letter {
    color: #f09b28;
}

body.app-shell .hero-subtitle,
body.app-shell .catalog-intro p {
    color: #638093;
}

body.app-shell .hero-features span {
    border-color: rgba(18, 72, 96, .1);
    background: rgba(255, 255, 255, .66);
    color: #3e6274;
}

body.app-shell .hero-features i {
    color: #18b890;
}

body.app-shell .btn-hero-primary,
body.app-shell .btn.auth-submit,
body.app-shell #submitBtn {
    background: linear-gradient(135deg, #ffd166, #ff9a76);
    color: #713c18;
    box-shadow: 0 12px 25px rgba(245, 185, 66, .22);
}

body.app-shell .btn-hero:not(.btn-hero-primary) {
    border-color: rgba(18, 72, 96, .12);
    background: rgba(255, 255, 255, .66);
    color: #173b52;
}

body.app-shell .stat-card,
body.app-shell .server-selector-container,
body.app-shell .shop-toolbar,
body.app-shell .item-id,
body.app-shell .faq-item,
body.app-shell .payment-id.window,
body.app-shell .panel,
body.app-shell .auth-card,
body.app-shell .mint-card,
body.app-shell .support-app,
body.app-shell .customer-order {
    border-color: rgba(18, 72, 96, .1);
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--shadow-card);
}

body.app-shell .stat-icon {
    border-color: rgba(24, 184, 144, .16);
    background: rgba(24, 184, 144, .1);
    color: #0ca59f;
}

body.app-shell .stat-number,
body.app-shell .item-id .title,
body.app-shell .blockname,
body.app-shell .faq-question {
    color: #123047;
}

body.app-shell .server-selector-label span,
body.app-shell .shop-control,
body.app-shell .item-id .description,
body.app-shell .faq-answer {
    color: #70909f;
}

body.app-shell .server-btn {
    border-color: rgba(18, 72, 96, .1);
    color: #638093;
}

body.app-shell .server-btn.active,
body.app-shell .server-btn:hover,
body.app-shell .tabs .tab-links > li.active > a,
body.app-shell .tabs .tab-links > li > a:hover {
    border-color: rgba(24, 184, 144, .24);
    background: rgba(24, 184, 144, .1);
    color: #0ca59f;
}

body.app-shell .shop-control,
body.app-shell input,
body.app-shell select,
body.app-shell textarea {
    border-color: rgba(18, 72, 96, .1);
    background: rgba(244, 252, 252, .86);
    color: #173b52;
}

body.app-shell .item-id:hover {
    border-color: rgba(24, 184, 144, .35);
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(33, 103, 125, .16);
}

body.app-shell .item-id .image {
    background-color: #e9f8f6;
}

body.app-shell .item-id .price,
body.app-shell .item-id .price i,
body.app-shell .product-buy {
    color: #0ca59f;
}

body.app-shell .product-buy {
    border-color: rgba(24, 184, 144, .25);
    background: rgba(24, 184, 144, .1);
}

body.app-shell .product-buy:hover {
    background: #18b890;
    color: #fff;
}

body.app-shell .footer {
    border-top-color: rgba(18, 72, 96, .1);
}

body.app-shell .modal > .wrapper > .modal-content {
    border-color: rgba(18, 72, 96, .12);
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(33, 103, 125, .22);
}

@media (max-width: 767px) {
    .app-topbar {
        background: rgba(255, 255, 255, .9);
        border-bottom-color: rgba(18, 72, 96, .1);
    }

    body.app-shell .hero-banner {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .96) 66%),
            url("../img/Hero.webp") center bottom / auto 52% no-repeat,
            #bcefeb;
    }
}

/*
 * Product UI refresh
 * Keep the existing page contracts, but give every public screen one visual
 * language: quiet graphite surfaces, mint actions and compact editorial spacing.
 */
:root {
    --bg-app: #0b0d12;
    --bg-sidebar: #10131a;
    --bg-card: #151922;
    --bg-raised: #1b202b;
    --color-accent: #b8f36b;
    --color-accent-rgb: 184, 243, 107;
    --color-accent-2: #8fe35f;
    --color-success: #9be66e;
    --color-warning: #ffc766;
    --color-danger: #ff7f8d;
    --text-primary: #f6f7f2;
    --text-secondary: #9299a8;
    --line: rgba(255, 255, 255, .09);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --sidebar-width: 248px;
    --topbar-height: 68px;
    --shadow-card: 0 18px 45px rgba(0, 0, 0, .22);
    --focus: 0 0 0 3px rgba(184, 243, 107, .24);
}

body.app-shell {
    background:
        radial-gradient(circle at 80% -10%, rgba(184, 243, 107, .08), transparent 30rem),
        radial-gradient(circle at 10% 50%, rgba(98, 114, 255, .07), transparent 32rem),
        var(--bg-app) !important;
    color: var(--text-primary);
    font-size: 14px;
}

body.app-shell::before,
body.app-shell::after,
body.app-shell #interactive-background {
    opacity: 0 !important;
    animation: none !important;
}

.app-sidebar {
    padding: 24px 14px max(18px, env(safe-area-inset-bottom));
    background: rgba(16, 19, 26, .94);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .12);
    backdrop-filter: blur(18px);
}

.app-brand {
    min-height: 52px;
    margin: 0 8px 34px;
}

.app-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--color-accent);
    color: #12170d;
    box-shadow: 0 8px 22px rgba(184, 243, 107, .16);
}

.app-brand strong {
    font-size: 15px;
    letter-spacing: .04em;
}

.app-brand small {
    margin-top: 2px;
    color: #6f7787;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-nav-kicker,
.app-sidebar-label {
    padding: 0 12px 10px;
    color: #656d7d;
    letter-spacing: .16em;
}

.app-nav {
    gap: 5px;
}

.app-nav a {
    min-height: 44px;
    border-radius: 11px;
    color: #9da5b5;
    font-size: 13px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.app-nav a i {
    color: #7c8494;
    transition: color .2s ease;
}

.app-nav a:hover {
    border-color: transparent;
    background: #191e28;
    color: var(--text-primary);
    transform: translateX(2px);
}

.app-nav a:hover i,
.app-nav li.active a i {
    color: var(--color-accent);
}

.app-nav li.active a,
.app-nav a[aria-current="page"] {
    border-color: rgba(184, 243, 107, .18);
    background: rgba(184, 243, 107, .10);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.app-sidebar-foot {
    gap: 7px;
    flex-shrink: 0;
}

.app-sidebar-foot .auth-link,
.app-sidebar-foot .balance-nav,
.app-sidebar-foot .public-theme-toggle,
.app-sidebar-foot .auth-logout,
.app-sidebar-foot .notification-nav {
    min-height: 42px;
    border-color: var(--line);
    border-radius: 11px;
    background: #151922;
    color: #dce0e8;
    font-size: 12px;
}

.app-sidebar-foot .auth-link-primary {
    border-color: transparent;
    background: var(--color-accent);
    color: #10150c;
}

.app-content {
    background: transparent;
}

body.app-shell .container {
    width: min(1160px, calc(100% - 64px));
    max-width: 1160px;
}

body.app-shell .hero-section {
    padding: 42px 0 20px;
}

body.app-shell .hero-banner {
    min-height: 430px;
    padding: clamp(32px, 6vw, 72px);
    border: 1px solid rgba(184, 243, 107, .22);
    border-radius: 28px;
    background:
        linear-gradient(100deg, rgba(21, 25, 34, .98) 0%, rgba(21, 25, 34, .78) 56%, rgba(21, 25, 34, .32) 100%),
        url("../img/Hero.webp") right center / auto 100% no-repeat,
        #151922;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
    animation: none;
}

body.app-shell .hero-banner::before,
body.app-shell .hero-banner::after {
    display: block;
    opacity: .45;
}

body.app-shell .hero-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 130px;
    height: 4px;
    background: var(--color-accent);
    box-shadow: 0 0 30px rgba(184, 243, 107, .5);
}

body.app-shell .hero-header-row {
    position: relative;
    z-index: 1;
}

body.app-shell .hero-badge {
    color: var(--color-accent);
    letter-spacing: .12em;
    font-size: 10px;
}

body.app-shell .online-pill {
    border-color: var(--line);
    background: rgba(11, 13, 18, .64);
    color: #d5d9e1;
}

body.app-shell .hero-title {
    position: relative;
    z-index: 1;
    max-width: 11ch;
    margin: 28px 0 14px;
    color: #fff;
    font-size: clamp(42px, 7vw, 78px);
    line-height: .98;
    letter-spacing: -.07em;
    text-transform: uppercase;
    text-shadow: none;
}

body.app-shell .hero-title .hat-letter {
    color: var(--color-accent);
}

body.app-shell .hero-subtitle {
    position: relative;
    z-index: 1;
    max-width: 520px;
    color: #a5acba;
    font-size: 15px;
    line-height: 1.7;
}

body.app-shell .hero-features {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

body.app-shell .hero-features span {
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #c6cbd5;
    font-size: 11px;
}

body.app-shell .hero-features i {
    color: var(--color-accent);
}

body.app-shell .hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 28px;
}

body.app-shell .btn,
body.app-shell .btn-hero {
    min-height: 46px;
    border-radius: 11px;
    font-size: 12px;
    letter-spacing: .02em;
}

body.app-shell .btn-hero-primary,
body.app-shell .btn.auth-submit,
body.app-shell #submitBtn {
    background: var(--color-accent);
    color: #12170d;
    box-shadow: 0 12px 25px rgba(184, 243, 107, .16);
}

body.app-shell .btn-hero:not(.btn-hero-primary) {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .06);
    color: var(--text-primary);
}

body.app-shell .stats-section {
    margin: 26px 0 64px;
}

body.app-shell .stats-grid {
    gap: 12px;
}

body.app-shell .stat-card {
    min-height: 96px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: rgba(21, 25, 34, .78);
    box-shadow: none;
}

body.app-shell .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border-color: rgba(184, 243, 107, .14);
    background: rgba(184, 243, 107, .08);
    color: var(--color-accent);
}

body.app-shell .stat-number {
    font-size: 22px;
}

body.app-shell .catalog-intro {
    align-items: flex-end;
    margin-bottom: 24px;
}

body.app-shell .section-kicker {
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.app-shell .catalog-intro h2 {
    margin: 8px 0 6px;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.055em;
}

body.app-shell .catalog-intro p {
    color: var(--text-secondary);
}

body.app-shell .catalog-intro-meta {
    color: var(--color-accent);
    font-size: 12px;
}

body.app-shell .catalog-intro-meta small {
    color: var(--text-secondary);
}

body.app-shell .server-selector-container,
body.app-shell .shop-toolbar {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(21, 25, 34, .72);
    box-shadow: none;
}

body.app-shell .server-selector-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 14px 16px;
}

body.app-shell .server-selector-label span {
    display: block;
    color: #737b8b;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.app-shell .server-selector-label strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

body.app-shell .server-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.app-shell .server-btn {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 11px;
}

body.app-shell .server-btn.active,
body.app-shell .server-btn:hover {
    border-color: rgba(184, 243, 107, .42);
    background: rgba(184, 243, 107, .1);
    color: var(--color-accent);
}

body.app-shell .shop-toolbar {
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 7px;
}

body.app-shell .shop-control {
    height: 42px;
    border-color: transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
}

body.app-shell .shop-control:focus-within {
    border-color: rgba(184, 243, 107, .4);
    box-shadow: var(--focus);
}

body.app-shell .tabs-wrapper {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom-color: var(--line);
}

body.app-shell .tabs .tab-links {
    gap: 6px;
}

body.app-shell .tabs .tab-links > li > a {
    height: 38px;
    padding: 0 13px;
    border-color: transparent;
    border-radius: 9px;
    background: transparent;
    color: #858d9d;
    font-size: 11px;
}

body.app-shell .tabs .tab-links > li.active > a,
body.app-shell .tabs .tab-links > li > a:hover {
    border-color: rgba(184, 243, 107, .2);
    background: rgba(184, 243, 107, .1);
    color: var(--color-accent);
    box-shadow: none;
}

body.app-shell .tabs-wrapper .block-right .btn {
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--color-accent);
}

body.app-shell .items {
    gap: 12px;
}

body.app-shell .item-id {
    min-height: 300px;
    padding: 12px;
    border-color: var(--line);
    border-radius: var(--radius-md);
    background: #151922;
    box-shadow: none;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

body.app-shell .item-id:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 243, 107, .38);
    background: #1a202b;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .22);
}

body.app-shell .item-id .image {
    width: 100%;
    height: 142px;
    margin-bottom: 14px;
    border-radius: 11px;
    background-color: #1d2330;
    background-size: contain;
    filter: none;
}

body.app-shell .item-id .title {
    margin-bottom: 7px;
    color: #f4f6f0;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: none;
    text-shadow: none;
}

body.app-shell .item-id .description {
    max-width: none;
    min-height: 0;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #858d9d;
    font-size: 11px;
}

body.app-shell .item-id .price {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-accent);
    font-size: 16px;
}

body.app-shell .item-id .price i {
    color: var(--color-accent);
}

body.app-shell .product-buy {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(184, 243, 107, .25);
    border-radius: 9px;
    background: rgba(184, 243, 107, .1);
    color: var(--color-accent);
    font-size: 11px;
}

body.app-shell .product-buy:hover {
    background: var(--color-accent);
    color: #12170d;
}

body.app-shell .faq-section,
body.app-shell .payments {
    margin-top: 56px;
    padding-top: 0;
    border-top: 0;
}

body.app-shell .blockname {
    margin-bottom: 16px;
    color: var(--text-primary);
    font-size: 20px;
    letter-spacing: -.03em;
    text-align: left;
    text-transform: none;
}

body.app-shell .faq-item,
body.app-shell .payment-id.window,
body.app-shell .panel,
body.app-shell .auth-card,
body.app-shell .mint-card,
body.app-shell .support-app,
body.app-shell .customer-order {
    border-color: var(--line);
    border-radius: var(--radius-md);
    background: #151922;
    box-shadow: none;
}

body.app-shell .payment-id.window {
    padding: 12px 14px;
}

body.app-shell .footer {
    margin-top: 80px;
    padding: 26px 0 32px;
    border-top-color: var(--line);
    color: #727a89;
}

body.app-shell .footer a:hover {
    color: var(--color-accent);
}

body.app-shell .modal {
    background: rgba(5, 7, 10, .78);
    backdrop-filter: blur(14px);
}

body.app-shell .modal > .wrapper > .modal-content {
    border-color: var(--line);
    border-radius: 20px;
    background: #151922;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

body.app-shell .purchase-product-card,
body.app-shell .purchase-benefits,
body.app-shell .purchase-summary,
body.app-shell .purchase-trust-row span,
body.app-shell .method-card {
    border-color: var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

body.public-light.app-shell {
    --bg-app: #f4f5f0;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-raised: #eef1e9;
    --text-primary: #172016;
    --text-secondary: #687166;
    --line: rgba(23, 32, 22, .12);
    background: #f4f5f0 !important;
}

body.public-light.app-shell .app-sidebar,
body.public-light.app-shell .app-topbar,
body.public-light.app-shell .item-id,
body.public-light.app-shell .stat-card,
body.public-light.app-shell .faq-item,
body.public-light.app-shell .payment-id.window,
body.public-light.app-shell .panel,
body.public-light.app-shell .auth-card,
body.public-light.app-shell .mint-card,
body.public-light.app-shell .support-app,
body.public-light.app-shell .customer-order {
    background: #fff;
}

@media (max-width: 767px) {
    body.app-shell .container {
        width: min(100% - 28px, 620px);
    }

    body.app-shell .hero-section {
        padding-top: 20px;
    }

    body.app-shell .hero-banner {
        min-height: 480px;
        padding: 28px 22px;
        background:
            linear-gradient(180deg, rgba(21, 25, 34, .9) 0%, rgba(21, 25, 34, .98) 65%),
            url("../img/Hero.webp") center bottom / auto 52% no-repeat,
            #151922;
    }

    body.app-shell .hero-title {
        margin-top: 34px;
        font-size: clamp(40px, 14vw, 62px);
    }

    body.app-shell .server-selector-container {
        align-items: flex-start;
        flex-direction: column;
    }

    body.app-shell .shop-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    body.app-shell .shop-search,
    body.app-shell .shop-sort {
        width: 100%;
    }

    body.app-shell .tabs-wrapper {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    body.app-shell .tabs-wrapper .block-right .btn {
        width: 100%;
    }
}

/* Final responsive contract: one layout rhythm from phones to ultrawide. */
body.app-shell {
    --content-gutter: clamp(14px, 4vw, 48px);
}

body.app-shell .app-content > * {
    min-width: 0;
}

body.app-shell .content-banners {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

body.app-shell .content-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 16px;
}

body.app-shell .content-banner h2 {
    margin: 0 0 5px;
    font-size: 18px;
    letter-spacing: -.03em;
}

body.app-shell .content-banner p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
}

body.app-shell .content-banner img {
    width: 140px;
    height: 90px;
    border-radius: 11px;
}

body.app-shell .faq-accordion {
    display: grid;
    gap: 8px;
}

body.app-shell .faq-item {
    overflow: hidden;
}

body.app-shell .faq-question {
    min-height: 56px;
    padding: 16px 18px;
    color: var(--text-primary);
    font-size: 13px;
}

body.app-shell .faq-answer {
    padding: 0 18px 16px;
    color: var(--text-secondary);
    font-size: 12px;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea {
    border-radius: 10px;
    border-color: var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text-primary);
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: rgba(184, 243, 107, .52);
    box-shadow: var(--focus);
}

body.app-shell .form-grid,
body.app-shell .account-grid,
body.app-shell .support-grid,
body.app-shell .orders-grid {
    min-width: 0;
}

body.app-shell .auth-page,
body.app-shell .support-app,
body.app-shell .orders-page,
body.app-shell .wiki-page,
body.app-shell .mint-page {
    padding: clamp(20px, 5vw, 54px) 0;
}

body.app-shell .auth-card,
body.app-shell .support-app,
body.app-shell .customer-order,
body.app-shell .mint-card {
    padding: clamp(18px, 3vw, 30px);
}

body.app-shell .auth-card h1,
body.app-shell .mint-card h1,
body.app-shell .support-app h1,
body.app-shell .orders-page h1,
body.app-shell .wiki-page h1 {
    letter-spacing: -.055em;
}

@media (min-width: 1440px) {
    body.app-shell .container {
        width: min(1240px, calc(100% - 96px));
        max-width: 1240px;
    }

    body.app-shell .hero-banner {
        min-height: 500px;
    }

    body.app-shell .items {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    body.app-shell .container {
        width: min(100% - 44px, 900px);
    }

    body.app-shell .app-sidebar {
        width: 220px;
        min-width: 220px;
    }

    body.app-shell .app-content {
        margin-left: 220px;
    }

    body.app-shell .items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-shell .hero-banner {
        min-height: 410px;
    }
}

@media (max-width: 767px) {
    body.app-shell .container {
        width: calc(100% - 28px);
    }

    body.app-shell .hero-header-row {
        display: grid;
        gap: 10px;
    }

    body.app-shell .online-pill {
        justify-self: start;
    }

    body.app-shell .hero-actions .btn {
        width: 100%;
    }

    body.app-shell .stats-grid {
        gap: 8px;
    }

    body.app-shell .stat-card {
        min-height: 88px;
        padding: 14px;
    }

    body.app-shell .stat-number {
        font-size: 18px;
    }

    body.app-shell .stat-label {
        font-size: 11px;
    }

    body.app-shell .catalog-intro-meta {
        display: none;
    }

    body.app-shell .items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.app-shell .item-id {
        min-height: 270px;
        padding: 9px;
    }

    body.app-shell .item-id .image {
        height: 112px;
    }

    body.app-shell .item-id .title {
        font-size: 12px;
    }

    body.app-shell .item-id .description {
        font-size: 10px;
    }

    body.app-shell .product-card-foot {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    body.app-shell .product-buy {
        width: 100%;
    }

    body.app-shell .content-banner {
        grid-template-columns: 1fr;
    }

    body.app-shell .content-banner img {
        width: 100%;
        height: 130px;
    }

    body.app-shell .footer-grid {
        gap: 16px;
    }
}

@media (max-width: 380px) {
    body.app-shell .items {
        grid-template-columns: 1fr;
    }

    body.app-shell .item-id {
        min-height: 292px;
    }

    body.app-shell .hero-banner {
        min-height: 500px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    body.app-shell *::before,
    body.app-shell *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===== assets/layout.css ===== */
/*
 * Noxis layout system.
 * This file is loaded last so legacy component rules cannot reintroduce
 * horizontal offsets or a second competing container system.
 */
:root {
    --bg-main: var(--bg-app);
    --bg-card: var(--bg-surface-secondary);
    --bg-card-hover: var(--bg-surface-hover);
    --border-color: var(--border-medium);
    --accent-glow-rgb: 0, 210, 255;
    --layout-sidebar: 260px;
    --layout-gap: 32px;
    --layout-max: 1480px;
    --nav-surface: rgba(15, 20, 28, .9);
}

body.app-shell {
    background: var(--bg-app) !important;
    color: var(--text-primary);
    font-family: var(--font-main);
}

/* Shared public/admin-v2 shell primitives. */
body.app-shell .app-topbar {
    min-height: 72px;
    padding: 16px 28px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background: rgba(11, 15, 25, .88);
    box-shadow: 0 12px 32px rgba(2, 6, 23, .16);
    backdrop-filter: blur(14px);
}

body.app-shell .public-topbar-context {
    display: grid;
    gap: 3px;
}

body.app-shell .public-topbar-context span {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.app-shell .public-topbar-context strong {
    color: #f8fafc;
    font-size: 17px;
    letter-spacing: -.02em;
}

body.app-shell .public-topbar-site {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #263247;
    border-radius: 8px;
    color: #cbd5e1;
    background: #111827;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

body.app-shell .public-topbar-site:hover {
    border-color: rgba(56, 189, 248, .45);
    color: #f8fafc;
    transform: translateY(-1px);
}

body.app-shell .app-topbar .nav-actions {
    gap: 8px;
}

body.app-shell .app-topbar .balance-nav {
    min-height: 34px;
    border: 1px solid rgba(52, 211, 153, .25);
    border-radius: 8px;
    background: rgba(16, 185, 129, .1);
    color: #34d399;
    font-size: 11px;
    font-weight: 700;
}

body.app-shell .app-nav-heading {
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

body.app-shell .app-nav a,
body.app-shell .sidebar-profile,
body.app-shell .sidebar-staff-button,
body.app-shell .auth-link {
    box-shadow: none;
}

body.app-shell .app-content > .container,
body.app-shell .app-content > .main-content,
body.app-shell .app-content > .hero-section {
    max-width: 1500px;
}

body.app-shell .app-content .panel,
body.app-shell .app-content .auth-card,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app,
body.app-shell .app-content .item-id {
    border-color: #263247;
    border-radius: 14px;
    background: rgba(17, 24, 39, .88);
    box-shadow: 0 16px 40px rgba(2, 6, 23, .18);
}

body.app-shell .app-content input,
body.app-shell .app-content select,
body.app-shell .app-content textarea {
    border-color: #334155;
    border-radius: 8px;
    background: #0b0f19;
    color: #e2e8f0;
}

body.app-shell .app-content input:focus,
body.app-shell .app-content select:focus,
body.app-shell .app-content textarea:focus {
    border-color: rgba(56, 189, 248, .65);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .1);
    outline: none;
}

body.app-shell .app-content table th {
    background: rgba(30, 41, 59, .55);
    color: #94a3b8;
}

body.app-shell .app-content table td {
    border-top-color: rgba(51, 65, 85, .55);
}

@media (max-width: 700px) {
    body.app-shell .app-topbar {
        min-height: 64px;
        padding: 10px 14px;
    }
    body.app-shell .public-topbar-context strong {
        font-size: 14px;
    }
    body.app-shell .public-topbar-site {
        display: none;
    }
}

body.app-shell .app-frame,
body.app-shell .app-container {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    width: min(1480px, 100%);
    max-width: 1480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

body.app-shell .app-content,
body.app-shell .main-content {
    min-width: 0;
    width: 100%;
    max-width: none;
}

body.app-shell .app-content > .mint-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px 0 56px;
}

@media (min-width: 1024px) {
    body.app-shell .app-frame {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }

    /* Final storefront polish: consistent rhythm, depth and readable controls. */
    body.app-shell .app-content {
        background:
            radial-gradient(700px 420px at 82% 0, rgba(0, 210, 255, .055), transparent 70%),
            linear-gradient(180deg, rgba(7, 17, 29, .35), transparent 42%),
            var(--bg-main);
    }

    body.app-shell .app-content > .hero-section {
        padding-top: clamp(14px, 2.5vw, 30px);
    }

    body.app-shell .hero-section .hero-banner {
        position: relative;
        overflow: hidden;
        min-height: 290px;
        border-color: rgba(53, 200, 255, .25);
        border-radius: 22px;
        background:
            radial-gradient(480px 240px at 90% 12%, rgba(113, 136, 255, .16), transparent 70%),
            linear-gradient(135deg, rgba(18, 42, 66, .96), rgba(8, 18, 32, .97));
        box-shadow: 0 24px 60px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .05);
    }

    body.app-shell .hero-section .hero-banner::before {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: "";
        background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .035) 50%, transparent 75%);
    }

    body.app-shell .hero-section .hero-title {
        max-width: 680px;
        font-weight: 800;
        text-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    }

    body.app-shell .hero-section .hero-actions .btn {
        min-height: 44px;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    }

    body.app-shell .stats-section {
        padding: 22px 0 28px;
    }

    body.app-shell .stats-section .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.app-shell .stats-section .stat-card {
        position: relative;
        overflow: hidden;
        border-color: rgba(53, 200, 255, .16);
        background: linear-gradient(145deg, rgba(18, 36, 56, .92), rgba(9, 18, 30, .94));
    }

    body.app-shell .stats-section .stat-card::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        content: "";
        background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
        opacity: .45;
    }

    body.app-shell #donate-catalog {
        padding-top: 16px;
    }

    body.app-shell #donate-catalog .catalog-intro,
    body.app-shell #donate-catalog .server-selector-container {
        border-color: rgba(53, 200, 255, .17);
        background: linear-gradient(145deg, rgba(18, 36, 56, .82), rgba(9, 18, 30, .94));
        box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
    }

    body.app-shell #donate-catalog .catalog-intro-meta {
        border-color: rgba(53, 200, 255, .2);
        background: rgba(53, 200, 255, .08);
    }

    body.app-shell #donate-catalog .server-selector-container {
        padding: 9px 12px;
    }

    body.app-shell #donate-catalog .server-btn.active {
        color: #031522;
        background: linear-gradient(135deg, #35c8ff, #7188ff);
    }

    body.app-shell #donate-catalog .shop-toolbar {
        border-color: rgba(53, 200, 255, .16);
        border-radius: 14px;
        background: rgba(14, 28, 45, .78);
    }

    body.app-shell #donate-catalog .item-id {
        border-color: rgba(53, 200, 255, .14);
        background: linear-gradient(160deg, rgba(18, 36, 56, .84), rgba(9, 18, 30, .96));
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    body.app-shell #donate-catalog .item-id:hover {
        border-color: rgba(53, 200, 255, .38);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .25), 0 0 22px rgba(53, 200, 255, .07);
        transform: translateY(-4px);
    }

    @media (max-width: 760px) {
        body.app-shell .stats-section .stats-grid {
            grid-template-columns: 1fr;
        }
        body.app-shell .hero-section .hero-banner {
            min-height: 0;
        }
    }

    body.app-shell .app-sidebar {
        left: max(0px, calc((100vw - 1440px) / 2));
        width: 260px;
        min-width: 260px;
    }

    /* Public navigation refresh. */
    body.app-shell .app-sidebar {
        padding: 18px 12px max(14px, env(safe-area-inset-bottom));
        border-right-color: rgba(53, 200, 255, .2);
        background:
            radial-gradient(280px 220px at 0 0, rgba(53, 200, 255, .13), transparent 72%),
            linear-gradient(180deg, #0d1c2d 0%, #091522 52%, #07101c 100%);
        box-shadow: 18px 0 50px rgba(0, 0, 0, .25), inset -1px 0 rgba(255, 255, 255, .025);
    }

    body.app-shell .app-brand {
        position: relative;
        gap: 10px;
        min-height: 58px;
        margin: 0 2px 24px;
        padding: 9px 10px;
        border-color: rgba(125, 211, 252, .17);
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(30, 58, 88, .72), rgba(15, 23, 42, .55));
        box-shadow: 0 12px 28px rgba(2, 6, 23, .22), inset 0 1px rgba(255, 255, 255, .05);
    }

    body.app-shell .app-brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        box-shadow: 0 8px 22px rgba(53, 200, 255, .3);
    }

    body.app-shell .app-brand-copy {
        min-width: 0;
        flex: 1;
    }

    body.app-shell .app-brand-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-shell .online-status {
        padding: 4px 7px;
        border: 1px solid rgba(69, 217, 154, .22);
        border-radius: 999px;
        background: rgba(69, 217, 154, .1);
        color: #45d99a;
        font-size: 8px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    body.app-shell .app-nav-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 9px;
    }

    body.app-shell .app-nav-heading .app-nav-kicker {
        padding: 0;
    }

    body.app-shell .app-nav-count {
        color: #4f6880;
        font-size: 9px;
        font-weight: 700;
    }

    body.app-shell .app-nav {
        gap: 5px;
    }

    body.app-shell .app-nav a {
        min-height: 44px;
        padding: 0 12px;
        border-color: transparent;
        border-radius: 12px;
        background: rgba(15, 32, 49, .2);
        transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    body.app-shell .app-nav a i {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 9px;
        background: rgba(53, 200, 255, .07);
    }

    body.app-shell .app-nav li.active a,
    body.app-shell .app-nav a[aria-current="page"] {
        border-color: rgba(53, 200, 255, .48);
        background: linear-gradient(100deg, rgba(14, 165, 233, .27), rgba(37, 99, 235, .14));
        box-shadow: 0 8px 22px rgba(14, 165, 233, .13), inset 0 1px rgba(255, 255, 255, .05);
    }

    body.app-shell .app-nav li.active a::before {
        width: 3px;
        border-radius: 0 4px 4px 0;
        background: #35c8ff;
        box-shadow: 0 0 12px rgba(53, 200, 255, .8);
    }

    body.app-shell .app-sidebar-foot {
        gap: 9px;
        padding-top: 14px;
        border-top-color: rgba(125, 211, 252, .12);
    }

    body.app-shell .sidebar-guest-note {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 2px;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, .12);
        border-radius: 12px;
        color: #71879b;
        background: rgba(15, 23, 42, .45);
        font-size: 10px;
        line-height: 1.45;
    }

    body.app-shell .sidebar-guest-note i {
        margin-top: 1px;
        color: #35c8ff;
    }

    body.app-shell .auth-link {
        min-height: 40px;
        border-radius: 11px;
        transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

    body.app-shell .auth-link-primary {
        border-color: rgba(53, 200, 255, .24);
        background: linear-gradient(135deg, #35c8ff, #7188ff);
        color: #041521;
        box-shadow: 0 10px 24px rgba(53, 200, 255, .18);
    }

    body.app-shell .auth-link:hover {
        transform: translateY(-1px);
    }

    @media (max-width: 1023px) {
        body.app-shell .app-sidebar {
            padding-top: 16px;
            box-shadow: 24px 0 60px rgba(0, 0, 0, .42);
        }
    }

    body.app-shell .app-content {
        box-sizing: border-box;
        width: calc(100% - 260px);
        margin-left: 260px;
        padding-right: 24px;
        padding-left: 24px;
    }
}

body.app-shell .mint-page > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.app-shell .mint-page .mint-art-hero,
body.app-shell .mint-page .mint-new-hero,
body.app-shell .mint-page .mint-new-grid {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

body.app-shell .app-sidebar-foot .balance-nav,
body.app-shell .app-sidebar-foot .notification-nav {
    display: none !important;
}

body.app-shell .sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(22, 27, 34, .8);
}

body.app-shell .sidebar-profile-link {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

body.app-shell .sidebar-profile-link:hover .sidebar-profile-avatar {
    box-shadow: 0 0 18px rgba(0, 210, 255, .38);
    transform: translateY(-1px);
}

body.app-shell .sidebar-profile-details {
    min-width: 0;
    flex: 1;
}

body.app-shell .sidebar-profile-logout {
    margin-left: auto;
}

body.app-shell .sidebar-profile-logout button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

body.app-shell .sidebar-profile-logout button:hover {
    border-color: rgba(0, 210, 255, .4);
    color: var(--accent-cyan);
}

body.app-shell .sidebar-profile-avatar {
    display: grid;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
    overflow: hidden;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--accent-cyan), #7188ff);
    color: #06111c;
}
body.app-shell .sidebar-profile-avatar img,
body.app-shell .profile-avatar img,
body.app-shell .account-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
body.app-shell .sidebar-profile-avatar img {
    max-width: 100%;
    max-height: 100%;
}

body.app-shell .sidebar-profile strong,
body.app-shell .sidebar-profile small {
    display: block;
}

body.app-shell .sidebar-profile strong {
    color: var(--text-primary);
    font-size: 12px;
}

body.app-shell .sidebar-profile small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10px;
}

body.app-shell .mint-page .mint-art-hero,
body.app-shell .mint-page .mint-hero,
body.app-shell .mint-page .mint-card {
    border-color: rgba(0, 210, 255, .18);
    border-radius: 18px;
    background-color: #161b22;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}

body.app-shell .mint-page .mint-art-hero {
    min-height: 260px;
}

body.app-shell .mint-page .mint-art-overlay {
    background: linear-gradient(90deg, #161b22 0%, rgba(22, 27, 34, .86) 40%, transparent 100%);
}

body.app-shell .mint-page .mint-art-copy {
    max-width: 620px;
}

body.app-shell .mint-page .mint-kicker {
    color: var(--accent-cyan);
}

body.app-shell .mint-page .mint-new-grid {
    gap: 18px;
}

body.app-shell .mint-page .mint-new-console {
    min-height: 560px;
    background:
        radial-gradient(circle at 50% 53%, rgba(0, 210, 255, .1), transparent 28%),
        #161b22;
}

body.app-shell .mint-page .mint-orb-glow {
    box-shadow: 0 0 40px rgba(0, 210, 255, .25);
}

body.app-shell .mint-page .mint-capsule {
    border-color: rgba(0, 210, 255, .45);
    box-shadow: 0 0 40px rgba(0, 210, 255, .25);
    animation: noxis-mint-float 3s ease-in-out infinite;
}

body.app-shell .mint-page .mint-capsule:hover:not(:disabled) {
    transform: scale(1.03);
}

body.app-shell .mint-page .mint-capsule em {
    color: #fff;
    font-weight: 900;
}

@keyframes noxis-mint-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

body.app-shell .mint-page .mint-new-hero {
    padding-top: 0;
}

body.app-shell .mint-page .mint-art-copy h2 {
    font-size: clamp(30px, 4vw, 48px);
}

body.app-shell .mint-page .mint-wallet-card b {
    color: #65e6ae;
    text-shadow: 0 0 18px rgba(101, 230, 174, .2);
}

@media (max-width: 1023px) {
    body.app-shell .app-content > .mint-page {
        padding-top: 20px;
    }

    body.app-shell .mint-page > .container {
        padding: 0;
    }
}

html {
    overflow-x: hidden;
}

body.app-shell {
    min-width: 0;
    overflow-x: hidden;
    background: var(--bg-main) !important;
    color: var(--text-primary);
}

body.app-shell .app-frame {
    isolation: isolate;
}

body.app-shell .app-sidebar {
    border-right: 1px solid rgba(0, 210, 255, .12);
    background:
        radial-gradient(circle at 0 0, rgba(0, 210, 255, .12), transparent 34%),
        linear-gradient(180deg, #0c1828 0%, #090f1b 58%, #080d16 100%);
    box-shadow: 16px 0 48px rgba(0, 0, 0, .2);
}

body.app-shell .app-brand {
    margin: 0 6px 30px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: rgba(22, 27, 34, .58);
}

body.app-shell .app-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    box-shadow: 0 0 22px rgba(0, 210, 255, .3);
}

body.app-shell .app-brand strong {
    letter-spacing: .04em;
}

body.app-shell .app-nav-kicker {
    padding: 0 14px 10px;
    color: #5f7890;
    font-size: 10px;
    letter-spacing: .18em;
}

body.app-shell .app-nav {
    gap: 7px;
}

body.app-shell .app-nav li {
    position: relative;
}

body.app-shell .app-nav a {
    min-height: 45px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #8fa5b9;
    font-size: 13px;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

body.app-shell .app-nav a i {
    color: #00c9f5;
    font-size: 14px;
    transition: transform .2s ease, filter .2s ease;
}

body.app-shell .app-nav a:hover {
    border-color: rgba(0, 210, 255, .2);
    background: rgba(0, 210, 255, .08);
    color: #f0f6fc;
    transform: translateX(3px);
}

body.app-shell .app-nav a:hover i {
    filter: drop-shadow(0 0 7px rgba(0, 210, 255, .65));
    transform: scale(1.12);
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(0, 210, 255, .42);
    background: linear-gradient(90deg, rgba(0, 210, 255, .2), rgba(0, 210, 255, .06));
    color: #fff;
    box-shadow: inset 3px 0 #00d2ff, 0 0 18px rgba(0, 210, 255, .1);
}

body.app-shell .app-nav li.active a i,
body.app-shell .app-nav a[aria-current="page"] i {
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, .8));
}

body.app-shell .app-sidebar-foot {
    gap: 8px;
    margin: auto 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

body.app-shell .sidebar-profile {
    min-height: 54px;
    margin: 0;
    padding: 8px 9px;
    border-color: rgba(0, 210, 255, .16);
    background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 34, .72));
}

body.app-shell .sidebar-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

body.app-shell .sidebar-profile-logout button,
body.app-shell .public-theme-toggle {
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

body.app-shell .sidebar-profile-logout button:hover,
body.app-shell .public-theme-toggle:hover {
    background: rgba(0, 210, 255, .1);
    transform: translateY(-1px);
}

body.app-shell .public-theme-toggle {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    padding: 0 12px;
    border-color: rgba(255, 255, 255, .08);
    border-radius: 11px;
    background: rgba(22, 27, 34, .62);
    color: #9db0c0;
}

body.app-shell .public-theme-toggle i {
    color: #00d2ff;
}

body.app-shell .app-topbar {
    border-bottom: 1px solid rgba(0, 210, 255, .14);
    background: rgba(8, 14, 24, .86);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
}

body.app-shell .app-content {
    background:
        radial-gradient(circle at 90% 0, rgba(0, 210, 255, .045), transparent 32%),
        var(--bg-main);
}

body.app-shell .app-frame {
    width: min(100%, var(--layout-max));
    min-height: 100vh;
    margin: 0 auto;
}

/* Desktop: one predictable sidebar-to-content relationship. */
@media (min-width: 1024px) {
    body.app-shell .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: max(0px, calc((100vw - var(--layout-max)) / 2));
        width: var(--layout-sidebar);
        min-width: var(--layout-sidebar);
    }

    body.app-shell .app-content {
        width: calc(100% - var(--layout-sidebar));
        min-width: 0;
        margin-left: var(--layout-sidebar);
        padding: 0 var(--layout-gap) 40px;
    }

    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .main-content,
    body.app-shell .app-content > .stats-section,
    body.app-shell .app-content > .content-banners,
    body.app-shell .app-content > .footer {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.app-shell .app-content > .auth-page > .account-shell,
    body.app-shell .app-content > .auth-page > .orders-shell,
    body.app-shell .app-content > .auth-page > .support-shell {
        width: 100%;
        max-width: 1240px;
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 1023px) {
    body.app-shell .app-content {
        background:
            radial-gradient(520px 320px at 90% 0, rgba(0, 210, 255, .06), transparent 70%),
            var(--bg-main);
    }
    body.app-shell .hero-section .hero-banner {
        min-height: 0;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
    }
    body.app-shell .stats-section .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.app-shell #donate-catalog .catalog-intro,
    body.app-shell #donate-catalog .server-selector-container {
        border-color: rgba(53, 200, 255, .17);
        background: linear-gradient(145deg, rgba(18, 36, 56, .82), rgba(9, 18, 30, .94));
    }
}

/* Public pages share the admin-v2 geometry and visual language. */
body.app-shell .app-frame {
    display: grid !important;
    grid-template-columns: 16rem minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.app-shell .app-sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 16rem !important;
    min-width: 16rem !important;
    height: 100vh !important;
    align-self: start !important;
    z-index: 60;
}

body.app-shell .app-content {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body.app-shell .app-frame {
    background: transparent !important;
}

body.app-shell .app-topbar {
    min-height: 78px;
    padding: 18px clamp(18px, 3vw, 42px);
    background: #0b0f19;
    border-bottom-color: rgba(148, 163, 184, .12);
}

body.app-shell .app-content > #page-content,
body.app-shell .app-content > .hero-section,
body.app-shell .app-content > .auth-page,
body.app-shell .app-content > .wiki-page,
body.app-shell .app-content > .mint-page {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 22px clamp(18px, 3vw, 42px) 64px !important;
    box-sizing: border-box;
}

body.app-shell .app-content > .hero-section {
    padding-top: 22px !important;
}

body.app-shell .app-content > .hero-section > .container,
body.app-shell .app-content > .auth-page > .account-shell,
body.app-shell .app-content > .auth-page > .orders-shell,
body.app-shell .app-content > .auth-page > .support-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* The catalog wrapper is only a layout container. Its children own the
   visible surfaces, so the large surrounding panel must stay transparent. */
body.app-shell #donate-catalog {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.app-shell .app-content .card,
body.app-shell .app-content .panel,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app,
body.app-shell .app-content .wiki-section,
body.app-shell .app-content .wiki-info-card,
body.app-shell .app-content .mint-card,
body.app-shell .app-content .auth-card {
    border-color: #263247;
    border-radius: 14px;
    background: rgba(17, 24, 39, .88);
    box-shadow: 0 16px 40px rgba(2, 6, 23, .18);
}

body.app-shell .app-content .btn,
body.app-shell .app-content button,
body.app-shell .app-content input[type="submit"] {
    border-radius: 8px;
}

body.app-shell .app-content .btn-primary,
body.app-shell .app-content .auth-submit {
    border-color: rgba(56, 189, 248, .45);
    background: linear-gradient(135deg, #2563eb, #0891b2);
    box-shadow: 0 8px 22px rgba(14, 165, 233, .18);
}

body.app-shell .app-content table {
    border-color: #263247;
}

@media (max-width: 1023px) {
    body.app-shell .app-frame {
        display: block !important;
    }
    body.app-shell .app-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: min(320px, 88vw) !important;
        min-width: 0 !important;
        transform: translateX(-105%);
        transition: transform .25s ease;
    }
    body.app-shell .app-sidebar.is-open {
        transform: translateX(0);
    }
    body.app-shell .app-content > #page-content,
    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .wiki-page,
    body.app-shell .app-content > .mint-page {
        padding: 18px 20px 48px !important;
    }
}

@media (max-width: 560px) {
    body.app-shell .app-topbar {
        min-height: 64px;
        padding: 14px 12px;
    }
    body.app-shell .app-content > #page-content,
    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .wiki-page,
    body.app-shell .app-content > .mint-page {
        padding: 14px 12px 36px !important;
    }
}

@media (max-width: 600px) {
    body.app-shell .stats-section .stats-grid {
        grid-template-columns: 1fr;
    }
    body.app-shell .hero-section .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    body.app-shell .hero-section .hero-actions .btn {
        width: 100%;
    }
    body.app-shell #donate-catalog .catalog-intro,
    body.app-shell #donate-catalog .server-selector-container {
        border-radius: 14px;
    }
}

/* Shared surfaces and typography. */
body.app-shell h1,
body.app-shell h2,
body.app-shell h3 {
    color: var(--text-primary);
}

body.app-shell .auth-card,
body.app-shell .orders-hero,
body.app-shell .orders-panel,
body.app-shell .account-card,
body.app-shell .support-app,
body.app-shell .panel,
body.app-shell .stat-card,
body.app-shell .item-id,
body.app-shell .account-metric,
body.app-shell .orders-stat {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: rgba(22, 27, 34, .88);
    backdrop-filter: blur(12px);
}

body.app-shell .btn,
body.app-shell .btn-hero,
body.app-shell .orders-primary-action,
body.app-shell .auth-submit {
    border-radius: 10px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.app-shell .btn:hover,
body.app-shell .btn-hero:hover,
body.app-shell .orders-primary-action:hover,
body.app-shell .auth-submit:hover {
    box-shadow: 0 0 15px var(--accent-glow);
    transform: translateY(-1px);
}

body.app-shell .account-details,
body.app-shell .account-overview,
body.app-shell .orders-stats {
    min-width: 0;
}

body.app-shell .account-details > div,
body.app-shell .account-overview > a,
body.app-shell .account-history > div,
body.app-shell .order-row,
body.app-shell .account-activity-item {
    min-width: 0;
    border-color: var(--border-color);
    background: rgba(22, 27, 34, .68);
}

body.app-shell .account-details > div:hover,
body.app-shell .account-overview > a:hover,
body.app-shell .account-history > div:hover,
body.app-shell .order-row:hover,
body.app-shell .account-activity-item:hover {
    border-color: rgba(0, 210, 255, .3);
    background: var(--bg-card-hover);
}

/* Mobile: the existing drawer behavior remains intact, content becomes full width. */
@media (max-width: 1023px) {
    body.app-shell .app-content {
        width: 100%;
        margin-left: 0;
        padding: 0 16px 32px;
    }

    body.app-shell .app-content > * {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.app-shell .app-content > .auth-page > .account-shell,
    body.app-shell .app-content > .auth-page > .orders-shell,
    body.app-shell .app-content > .auth-page > .support-shell {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    body.app-shell .app-content {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.app-shell .account-details,
    body.app-shell .orders-stats {
        grid-template-columns: 1fr;
    }

    body.app-shell .orders-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Public menu redesign. */
body.app-shell {
    --public-nav-width: 286px;
    --public-menu-bg: #0b1727;
    --public-menu-line: rgba(148, 163, 184, .14);
    --public-menu-muted: #7890a6;
}

body.app-shell .app-sidebar {
    width: var(--public-nav-width);
    min-width: var(--public-nav-width);
    padding: 22px 16px 16px;
    border-right: 1px solid var(--public-menu-line);
    background:
        radial-gradient(300px 280px at 20% -5%, rgba(53, 200, 255, .18), transparent 70%),
        linear-gradient(180deg, #102237 0%, var(--public-menu-bg) 48%, #07101c 100%);
    box-shadow: 22px 0 70px rgba(0, 0, 0, .3), inset -1px 0 rgba(255, 255, 255, .025);
}

body.app-shell .app-brand {
    gap: 12px;
    min-height: 64px;
    margin: 0 0 28px;
    padding: 11px 12px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(35, 73, 109, .62), rgba(9, 23, 39, .78));
    box-shadow: 0 16px 32px rgba(2, 6, 23, .28), inset 0 1px rgba(255, 255, 255, .06);
}

body.app-shell .app-brand-mark {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, #35d5ff, #397bff 72%);
    box-shadow: 0 10px 25px rgba(53, 200, 255, .35);
}

body.app-shell .app-brand-copy strong {
    font-size: 15px;
    letter-spacing: .08em;
}

body.app-shell .app-brand-copy small {
    margin-top: 4px;
    color: #87a0b7;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.app-shell .online-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid rgba(69, 217, 154, .25);
    border-radius: 999px;
    background: rgba(69, 217, 154, .1);
    color: #55e7a7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.app-shell .online-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #45d99a;
    box-shadow: 0 0 9px #45d99a;
}

body.app-shell .app-nav-heading {
    padding: 0 10px 10px;
}

body.app-shell .app-nav-heading .app-nav-kicker {
    color: #8aa4bb;
    font-size: 10px;
    letter-spacing: .16em;
}

body.app-shell .app-nav-count {
    color: #58728a;
    font-size: 9px;
}

body.app-shell .app-nav {
    gap: 6px;
}

body.app-shell .app-nav a {
    position: relative;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #91a6ba;
    font-size: 13px;
    font-weight: 700;
}

body.app-shell .app-nav a i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    color: #38cfff;
    background: rgba(56, 207, 255, .08);
}

body.app-shell .app-nav a:hover {
    border-color: rgba(56, 207, 255, .2);
    background: linear-gradient(90deg, rgba(56, 207, 255, .1), rgba(56, 207, 255, .025));
    color: #f3faff;
    transform: translateX(4px);
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(56, 207, 255, .48);
    background: linear-gradient(100deg, rgba(14, 165, 233, .3), rgba(37, 99, 235, .12));
    color: #fff;
    box-shadow: 0 10px 25px rgba(14, 165, 233, .15), inset 0 1px rgba(255, 255, 255, .07);
}

body.app-shell .app-nav li.active a::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #35d5ff;
    box-shadow: 0 0 14px rgba(53, 213, 255, .9);
    content: "";
}

body.app-shell .app-nav li.active a i,
body.app-shell .app-nav a[aria-current="page"] i {
    color: #fff;
    background: rgba(53, 213, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(53, 213, 255, .16);
}

body.app-shell .app-sidebar-foot {
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--public-menu-line);
}

body.app-shell .sidebar-profile {
    min-height: 58px;
    padding: 9px 10px;
    border-color: rgba(53, 200, 255, .2);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(53, 200, 255, .12), rgba(15, 23, 42, .7));
}

body.app-shell .sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(53, 200, 255, .2);
}

body.app-shell .sidebar-profile strong {
    font-size: 12px;
}

body.app-shell .sidebar-profile small {
    color: #7890a6;
}

body.app-shell .sidebar-profile-logout button {
    width: 32px;
    height: 32px;
    border-color: rgba(148, 163, 184, .16);
    border-radius: 10px;
}

body.app-shell .sidebar-staff-button {
    min-height: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

body.app-shell .sidebar-guest-note {
    border-color: rgba(148, 163, 184, .14);
    border-radius: 13px;
    background: rgba(15, 23, 42, .5);
}

@media (min-width: 1024px) {
    body.app-shell .app-sidebar {
        width: var(--public-nav-width);
        min-width: var(--public-nav-width);
    }
    body.app-shell .app-content {
        width: calc(100% - var(--public-nav-width));
        margin-left: var(--public-nav-width);
    }
}

@media (max-width: 1023px) {
    body.app-shell .app-sidebar {
        width: min(326px, 89vw);
        min-width: 0;
    }
}

/* Public menu aligned with the admin-v2 visual language. */
body.app-shell {
    --public-admin-bg: #0b0f19;
    --public-admin-panel: #111827;
    --public-admin-line: #263247;
    --public-admin-muted: #94a3b8;
    --public-admin-accent: #38bdf8;
}

body.app-shell .app-sidebar {
    width: 256px;
    min-width: 256px;
    padding: 16px 10px 12px;
    border-right: 1px solid rgba(71, 85, 105, .55);
    border-radius: 0;
    background: linear-gradient(180deg, #0d1422 0%, #0a111d 100%);
    box-shadow: 12px 0 32px rgba(2, 6, 23, .22);
}

body.app-shell .app-brand {
    min-height: 54px;
    margin: 0 0 18px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(17, 31, 52, .96), rgba(15, 23, 42, .78));
    box-shadow: 0 12px 24px rgba(2, 6, 23, .18), inset 0 1px rgba(255, 255, 255, .03);
}

body.app-shell .app-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0ea5e9, #4f46e5);
    box-shadow: 0 8px 22px rgba(14, 165, 233, .22);
}

body.app-shell .app-brand-copy strong {
    font-size: 16px;
    letter-spacing: -.01em;
}

body.app-shell .app-brand-copy small {
    margin-top: 2px;
    color: #64748b;
    font-size: 9px;
    letter-spacing: .08em;
}

body.app-shell .online-status {
    padding: 4px 6px;
    border: 1px solid rgba(52, 211, 153, .2);
    border-radius: 999px;
    background: rgba(16, 185, 129, .1);
    color: #34d399;
    font-size: 8px;
}

body.app-shell .app-nav-heading {
    padding: 0 10px 8px;
}

body.app-shell .app-nav-heading .app-nav-kicker {
    color: #64748b;
    font-size: 10px;
    letter-spacing: .1em;
}

body.app-shell .app-nav-count {
    color: #475569;
}

body.app-shell .app-nav {
    gap: 4px;
}

body.app-shell .app-nav a {
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--public-admin-muted);
    font-size: 12.5px;
    font-weight: 600;
}

body.app-shell .app-nav a i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--public-admin-accent);
    background: rgba(56, 189, 248, .07);
    font-size: 12px;
}

body.app-shell .app-nav a:hover {
    border-color: rgba(71, 85, 105, .5);
    background: rgba(30, 41, 59, .58);
    color: #f1f5f9;
    transform: translateX(2px);
}

body.app-shell .app-nav a:hover i {
    background: rgba(56, 189, 248, .14);
    color: #7dd3fc;
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(59, 130, 246, .34);
    background: linear-gradient(90deg, rgba(37, 99, 235, .2), rgba(30, 64, 175, .08));
    color: #e0f2fe;
    box-shadow: 0 7px 18px rgba(30, 64, 175, .16);
}

body.app-shell .app-nav li.active a::before {
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, .75);
}

body.app-shell .app-nav li.active a i,
body.app-shell .app-nav a[aria-current="page"] i {
    color: #7dd3fc;
    background: rgba(56, 189, 248, .16);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .14);
}

body.app-shell .app-sidebar-foot {
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}

body.app-shell .sidebar-profile {
    min-height: 52px;
    padding: 8px 9px;
    border: 1px solid #263247;
    border-radius: 10px;
    background: rgba(17, 24, 39, .82);
}

body.app-shell .sidebar-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0ea5e9, #4f46e5);
}

body.app-shell .sidebar-profile strong {
    font-size: 11px;
}

body.app-shell .sidebar-profile small {
    color: #64748b;
    font-size: 9px;
}

body.app-shell .sidebar-profile-logout button {
    width: 30px;
    height: 30px;
    border-color: #263247;
    border-radius: 8px;
    background: rgba(15, 23, 42, .6);
}

body.app-shell .sidebar-staff-button {
    min-height: 36px;
    padding: 7px 10px;
    border-color: rgba(139, 92, 246, .36);
    border-radius: 9px;
    background: rgba(139, 92, 246, .13);
    font-size: 11px;
}

body.app-shell .sidebar-guest-note {
    padding: 9px 10px;
    border-color: #263247;
    border-radius: 9px;
    background: rgba(17, 24, 39, .7);
    color: #64748b;
}

@media (min-width: 1024px) {
    body.app-shell .app-sidebar {
        width: 256px;
        min-width: 256px;
    }
    body.app-shell .app-content {
        width: calc(100% - 256px);
        margin-left: 256px;
    }
}

@media (max-width: 1023px) {
    body.app-shell .app-sidebar {
        width: min(300px, 88vw);
        min-width: 0;
    }
}

/* Public shell: match the admin-v2 reference layout. */
body.app-shell {
    --public-v2-sidebar: 220px;
    --public-v2-bg: #07111d;
    --public-v2-panel: #0e1d30;
    --public-v2-line: #20334b;
    --public-v2-text: #f1f5f9;
    --public-v2-muted: #8195aa;
    --public-v2-cyan: #19c9f4;
    --public-v2-violet: #8b5cf6;
}

body.app-shell .app-frame {
    width: 100%;
    max-width: 1440px;
    padding: 0;
}

body.app-shell .app-sidebar {
    width: var(--public-v2-sidebar);
    min-width: var(--public-v2-sidebar);
    padding: 16px 12px 12px;
    border-right: 1px solid rgba(71, 85, 105, .56);
    background:
        linear-gradient(180deg, rgba(16, 40, 66, .28), transparent 24%),
        linear-gradient(180deg, #0a1b2d 0%, #071422 100%);
    box-shadow: 12px 0 32px rgba(2, 6, 23, .3);
}

body.app-shell .app-brand {
    min-height: 44px;
    margin: 0 4px 22px;
    padding: 8px 9px;
    border: 1px solid rgba(56, 189, 248, .22);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(24, 59, 91, .9), rgba(11, 31, 52, .76));
    box-shadow: 0 8px 20px rgba(2, 6, 23, .2);
}

body.app-shell .app-brand-mark {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #31d6ff, #5575ff);
    box-shadow: 0 7px 16px rgba(31, 199, 244, .28);
}

body.app-shell .app-brand-copy strong {
    font-size: 14px;
    letter-spacing: 0;
}

body.app-shell .app-brand-copy small {
    margin-top: 1px;
    color: #738ba1;
    font-size: 8px;
    letter-spacing: .08em;
}

body.app-shell .online-status {
    padding: 3px 5px;
    border-color: rgba(52, 211, 153, .22);
    background: rgba(16, 185, 129, .09);
    font-size: 7px;
}

body.app-shell .app-nav-heading {
    padding: 0 9px 8px;
    border: 0;
}

body.app-shell .app-nav-heading .app-nav-kicker {
    color: #7890a7;
    font-size: 9px;
    letter-spacing: .12em;
}

body.app-shell .app-nav-count {
    display: none;
}

body.app-shell .app-nav {
    gap: 2px;
}

body.app-shell .app-nav a {
    min-height: 38px;
    padding: 5px 9px;
    border-radius: 9px;
    color: #8397ac;
    font-size: 11px;
    font-weight: 600;
}

body.app-shell .app-nav a i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #27c9f2;
    background: transparent;
    font-size: 11px;
}

body.app-shell .app-nav a:hover {
    border-color: rgba(25, 201, 244, .25);
    background: rgba(30, 64, 92, .5);
    color: #f8fafc;
    transform: none;
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(25, 201, 244, .46);
    background: linear-gradient(90deg, rgba(25, 201, 244, .22), rgba(66, 92, 173, .17));
    color: #f8fafc;
    box-shadow: 0 0 18px rgba(25, 201, 244, .1), inset 0 1px rgba(255, 255, 255, .04);
}

body.app-shell .app-nav li.active a::before {
    top: 6px;
    bottom: 6px;
    left: -1px;
    width: 3px;
    background: #20d2f6;
    box-shadow: 0 0 11px rgba(32, 210, 246, .85);
}

body.app-shell .app-sidebar-foot {
    gap: 7px;
    padding-top: 10px;
    border-top-color: rgba(71, 85, 105, .48);
}

body.app-shell .sidebar-staff-button {
    min-height: 30px;
    padding: 5px 8px;
    border-color: rgba(139, 92, 246, .5);
    border-radius: 7px;
    background: rgba(91, 33, 182, .24);
    font-size: 9px;
}

body.app-shell .sidebar-profile {
    min-height: 44px;
    padding: 6px 7px;
    border-color: rgba(56, 189, 248, .2);
    border-radius: 9px;
    background: rgba(14, 29, 48, .9);
}

body.app-shell .sidebar-profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

body.app-shell .sidebar-profile strong {
    font-size: 10px;
}

body.app-shell .sidebar-profile small {
    font-size: 8px;
}

body.app-shell .sidebar-profile-logout button {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

body.app-shell .app-topbar {
    min-height: 58px;
    padding: 12px 22px;
    border-bottom: 1px solid rgba(71, 85, 105, .48);
    background: rgba(7, 17, 29, .82);
}

body.app-shell .public-topbar-context span {
    font-size: 9px;
}

body.app-shell .public-topbar-context strong {
    font-size: 15px;
}

body.app-shell .public-topbar-site {
    min-height: 30px;
    padding: 5px 9px;
    border-color: var(--public-v2-line);
    border-radius: 7px;
    background: rgba(14, 29, 48, .9);
    font-size: 10px;
}

@media (min-width: 1024px) {
    body.app-shell .app-sidebar {
        width: var(--public-v2-sidebar);
        min-width: var(--public-v2-sidebar);
    }
    body.app-shell .app-content {
        width: calc(100% - var(--public-v2-sidebar));
        margin-left: var(--public-v2-sidebar);
        padding: 0 18px 32px;
    }
}

@media (max-width: 1023px) {
    body.app-shell .app-sidebar {
        width: min(280px, 88vw);
    }
}

/* Keep the public canvas blue-black like admin-v2 instead of pure black. */
html:has(body.app-shell),
body.app-shell {
    background: #0b0f19 !important;
}

body.app-shell .app-content,
body.app-shell .app-frame {
    background-color: #0b0f19 !important;
}

body.app-shell .app-content {
    background: #0b0f19 !important;
}

/* Final admin-v2 parity layer; keep this after all legacy public rules. */
body.app-shell .app-frame {
    display: grid !important;
    grid-template-columns: 16rem minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.app-shell .app-sidebar {
    position: sticky !important;
    inset: 0 auto auto auto !important;
    width: 16rem !important;
    min-width: 16rem !important;
    height: 100vh !important;
    align-self: start !important;
}
body.app-shell .app-content {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b0f19 !important;
}
body.app-shell .app-content > #page-content,
body.app-shell .app-content > .hero-section,
body.app-shell .app-content > .auth-page,
body.app-shell .app-content > .wiki-page,
body.app-shell .app-content > .mint-page {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 22px clamp(18px, 3vw, 42px) 64px !important;
    box-sizing: border-box !important;
}
body.app-shell .app-content > .hero-section > .container,
body.app-shell .app-content > .auth-page > .account-shell,
body.app-shell .app-content > .auth-page > .orders-shell,
body.app-shell .app-content > .auth-page > .support-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
@media (max-width: 1023px) {
    body.app-shell .app-frame { display: block !important; }
    body.app-shell .app-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(320px, 88vw) !important;
        min-width: 0 !important;
        transform: translateX(-105%);
        transition: transform .25s ease;
    }
    body.app-shell .app-sidebar.is-open { transform: translateX(0); }
    body.app-shell .app-content > #page-content,
    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .wiki-page,
    body.app-shell .app-content > .mint-page {
        padding: 18px 20px 48px !important;
    }
}
@media (max-width: 560px) {
    body.app-shell .app-content > #page-content,
    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .wiki-page,
    body.app-shell .app-content > .mint-page {
        padding: 14px 12px 36px !important;
    }
}

/* ===== assets/navigation.css ===== */
/* Unified public navigation. Loaded after legacy styles. */
:root {
    --nav-width: 260px;
    --nav-gap: 24px;
    --nav-cyan: #00d2ff;
    --nav-surface: rgba(22, 27, 34, .9);
    --nav-border: rgba(255, 255, 255, .08);
}

/* Public visual polish: one consistent surface language across every tab. */
body.app-shell {
    color: var(--text-primary);
    background:
        radial-gradient(circle at 82% 0%, rgba(0, 210, 255, .09), transparent 30rem),
        radial-gradient(circle at 10% 70%, rgba(121, 40, 202, .07), transparent 28rem),
        var(--bg-app);
}

body.app-shell .app-sidebar {
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(8, 15, 27, .93));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
}

body.app-shell .app-brand {
    padding: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

body.app-shell .app-brand-mark,
body.app-shell .profile-avatar,
body.app-shell .sidebar-profile-avatar {
    box-shadow: 0 0 0 5px rgba(0, 210, 255, .08), 0 10px 24px rgba(0, 114, 255, .22);
}

body.app-shell .app-nav {
    gap: 6px;
    padding: 12px;
}

body.app-shell .app-nav-group {
    margin: 6px 0 12px;
}

body.app-shell .app-nav-group + .app-nav-group {
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, .1);
}

body.app-shell .app-nav-group-label {
    display: block;
    padding: 0 16px 5px;
    color: #5f7890;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.app-shell .app-nav li a {
    position: relative;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.app-shell .app-nav li a:hover {
    border-color: rgba(0, 210, 255, .2);
    background: rgba(0, 210, 255, .08);
    transform: translateX(2px);
}

body.app-shell .app-nav li.active a {
    border-color: rgba(0, 210, 255, .28);
    background: linear-gradient(100deg, rgba(0, 210, 255, .16), rgba(0, 114, 255, .08));
    box-shadow: inset 3px 0 0 var(--accent-cyan);
}

body.app-shell .app-nav li.active a i {
    color: #65e7ff;
    text-shadow: 0 0 14px rgba(0, 210, 255, .6);
}

body.app-shell .app-nav-active-dot {
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: #65e7ff;
    box-shadow: 0 0 10px #00d2ff;
}

body.app-shell .app-topbar .public-topbar-context {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.app-shell .app-topbar .public-topbar-context span {
    padding: 5px 9px;
    border: 1px solid rgba(0, 210, 255, .2);
    border-radius: 999px;
    color: #65e7ff;
    background: rgba(0, 210, 255, .08);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app-shell .app-topbar .public-topbar-context strong {
    color: #f3f8ff;
}

body.app-shell .nav-actions {
    gap: 8px;
}

body.app-shell .nav-actions > a,
body.app-shell .nav-actions > button,
body.app-shell .nav-actions .profile-menu-toggle {
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 10px;
    background: rgba(16, 29, 46, .72);
}

body.app-shell .nav-actions > a:hover,
body.app-shell .nav-actions > button:hover,
body.app-shell .nav-actions .profile-menu-toggle:hover {
    border-color: rgba(0, 210, 255, .42);
    background: rgba(0, 210, 255, .1);
}

@media (max-width: 760px) {
    body.app-shell .app-nav-group-label {
        padding-left: 12px;
    }

    body.app-shell .app-nav {
        padding: 8px;
    }
}

body.app-shell .app-topbar {
    min-height: 72px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 18px;
    background: rgba(10, 18, 31, .74);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
    backdrop-filter: blur(18px);
}

body.app-shell .public-topbar-context strong {
    letter-spacing: -.025em;
}

body.app-shell .app-content > * {
    animation: public-content-in .35s ease both;
}

body.app-shell .hero-actions .server-address-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 238px;
    padding: 8px 13px 8px 9px;
    border: 1px solid rgba(148, 163, 184, .22);
    color: #d9e8f5;
    background: linear-gradient(135deg, rgba(22, 42, 63, .9), rgba(12, 26, 43, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .16);
    text-align: left;
}

body.app-shell .catalog-server-address .server-address-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 238px;
    padding: 8px 13px 8px 9px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
    color: #d9e8f5;
    background: linear-gradient(135deg, rgba(22, 42, 63, .9), rgba(12, 26, 43, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .16);
    text-align: left;
}

body.app-shell .catalog-server-address .server-address-button:hover {
    border-color: rgba(0, 210, 255, .52);
    background: linear-gradient(135deg, rgba(23, 57, 82, .96), rgba(11, 35, 58, .92));
}

body.app-shell .hero-actions .server-address-button:hover {
    border-color: rgba(0, 210, 255, .52);
    background: linear-gradient(135deg, rgba(23, 57, 82, .96), rgba(11, 35, 58, .92));
}

body.app-shell .hero-actions .btn-hero-primary {
    display: inline-flex !important;
    min-height: 52px;
    padding: 0 21px;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 12px !important;
    color: #d9e8f5 !important;
    background: linear-gradient(135deg, rgba(22, 42, 63, .9), rgba(12, 26, 43, .86)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .16) !important;
    text-align: left;
}

body.app-shell .hero-actions .btn-hero-primary:hover {
    border-color: rgba(0, 210, 255, .52) !important;
    background: linear-gradient(135deg, rgba(23, 57, 82, .96), rgba(11, 35, 58, .92)) !important;
    box-shadow: 0 15px 32px rgba(0, 114, 255, .26) !important;
}

body.app-shell .hero-actions .btn-hero-primary i {
    color: var(--accent-cyan) !important;
}

body.app-shell .server-address-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(0, 210, 255, .25);
    border-radius: 10px;
    color: var(--accent-cyan);
    background: rgba(0, 210, 255, .1);
}

body.app-shell .server-address-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body.app-shell .server-address-copy small {
    color: #7891a8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

body.app-shell .server-address-copy strong {
    max-width: 155px;
    overflow: hidden;
    color: #eff8ff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .server-address-button .copy-icon {
    margin-left: auto;
    color: #8fa8bd;
    font-size: 13px;
}

body.app-shell .server-address-button:hover .copy-icon {
    color: var(--accent-cyan);
}

body.app-shell .app-content input:not([type="checkbox"]):not([type="radio"]),
body.app-shell .app-content textarea,
body.app-shell .app-content select {
    border-color: rgba(148, 163, 184, .22);
    border-radius: 11px;
    background: rgba(7, 14, 25, .72);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.app-shell .app-content input:focus,
body.app-shell .app-content textarea:focus,
body.app-shell .app-content select:focus {
    border-color: rgba(0, 210, 255, .72);
    background: rgba(7, 19, 34, .9);
    box-shadow: 0 0 0 4px rgba(0, 210, 255, .11);
    outline: 0;
}

body.app-shell .app-content .tabs,
body.app-shell .app-content .tab-links,
body.app-shell .app-content .support-tabs {
    border-bottom-color: rgba(148, 163, 184, .16);
}

body.app-shell .app-content table thead th {
    color: #9fb3c8;
    background: rgba(0, 210, 255, .05);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.app-shell .app-content table tbody tr {
    transition: background .2s ease;
}

body.app-shell .app-content table tbody tr:hover {
    background: rgba(0, 210, 255, .055);
}

body.app-shell .footer {
    margin-top: 28px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: rgba(7, 13, 24, .52);
}

body.app-shell .footer-links a {
    transition: color .2s ease, transform .2s ease;
}

body.app-shell .footer-links a:hover {
    color: var(--accent-cyan);
    transform: translateY(-1px);
}

body.app-shell .support-reply-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 13px 17px;
    border: 1px solid rgba(52, 211, 153, .34);
    border-radius: 14px;
    color: #b9f8dc;
    background: rgba(7, 25, 25, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28), 0 0 0 4px rgba(52, 211, 153, .07);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease;
}

body.app-shell .support-reply-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.app-shell .support-reply-toast > i {
    color: #5ee6ae;
    font-size: 17px;
}

body.app-shell .support-reply-toast.is-error {
    border-color: rgba(255, 126, 155, .38);
    color: #ffd4dc;
    background: rgba(39, 13, 24, .95);
}

body.app-shell .support-reply-toast.is-error > i {
    color: #ff7e9b;
}

@media (max-width: 560px) {
    body.app-shell .support-reply-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}

/* Finance center: separate top-up and transfer actions into two distinct
   surfaces with the same compact form rhythm as the rest of the account. */
html body.app-shell #account-finance {
    padding: 20px !important;
    border: 1px solid #1d354a !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #101f31, #091522) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .16) !important;
}

html body.app-shell #account-finance .account-section-heading {
    margin-bottom: 18px !important;
}

html body.app-shell #account-finance .topup-card {
    margin: 0 0 17px !important;
    padding: 18px !important;
    border: 1px solid rgba(98, 230, 255, .17) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #151f2d, #111925) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html body.app-shell #account-finance .topup-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 17px !important;
}

html body.app-shell #account-finance .topup-icon {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border: 1px solid rgba(0, 210, 255, .38) !important;
    border-radius: 12px !important;
    color: #00d2ff !important;
    background: rgba(0, 210, 255, .1) !important;
}

html body.app-shell #account-finance .topup-subtitle {
    display: block !important;
    margin-bottom: 5px !important;
    color: #00d2ff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}

html body.app-shell #account-finance .topup-title {
    margin: 0 !important;
    color: #edf5fb !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}

html body.app-shell #account-finance .topup-desc {
    margin: 6px 0 0 !important;
    color: #8da2b4 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

html body.app-shell #account-finance .topup-input-group {
    display: grid !important;
    gap: 7px !important;
}

html body.app-shell #account-finance .topup-input-group label {
    color: #aebfd0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

html body.app-shell #account-finance .topup-input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(157, 198, 232, .2) !important;
    border-radius: 11px !important;
    background: #08121e !important;
    color: #edf7ff !important;
    box-sizing: border-box !important;
}

html body.app-shell #account-finance .topup-input:focus {
    border-color: #00d2ff !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, .12) !important;
}

html body.app-shell #account-finance .topup-btn {
    height: 48px !important;
    margin-top: 13px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #00d2ff, #008cff) !important;
    font-size: 13px !important;
    box-shadow: 0 9px 20px rgba(0, 156, 255, .17) !important;
}

html body.app-shell #account-finance .topup-footer {
    margin-top: 16px !important;
    padding-top: 13px !important;
    border-top-color: rgba(255, 255, 255, .08) !important;
    font-size: 10px !important;
}

html body.app-shell #account-finance > .auth-lead {
    margin: 0 0 10px !important;
    color: #8ea8bd !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

html body.app-shell #account-finance > .auth-form {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 9px 14px !important;
    margin: 0 0 24px !important;
    padding: 15px !important;
    border: 1px solid #1d354a !important;
    border-radius: 13px !important;
    background: rgba(7, 17, 29, .65) !important;
}

html body.app-shell #account-finance > .auth-form label {
    align-self: center !important;
    color: #aebfd0 !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
}

html body.app-shell #account-finance > .auth-form input {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    background: #111f31 !important;
}

html body.app-shell #account-finance > .auth-form button {
    min-height: 46px !important;
    margin-top: 5px !important;
    border-radius: 11px !important;
}

html body.app-shell #account-finance > h3 {
    margin: 0 0 10px !important;
    color: #edf5fb !important;
    font-size: 15px !important;
}

@media (max-width: 680px) {
    html body.app-shell #account-finance {
        padding: 14px !important;
    }

    html body.app-shell #account-finance .topup-card {
        padding: 15px !important;
    }

    html body.app-shell #account-finance > .auth-form {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    html body.app-shell #account-finance > .auth-form label,
    html body.app-shell #account-finance > .auth-form input,
    html body.app-shell #account-finance > .auth-form button {
        grid-column: 1 !important;
    }
}

/* Account navigation: compact pill tabs with a clean second row for the
   less frequently used sections. */
html body.app-shell .account-card > .account-tabs .nav-tabs {
    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 92px !important;
    margin: 0 0 14px !important;
    padding: 5px !important;
    border: 1px solid #1d354a !important;
    border-radius: 15px !important;
    background: #0b1725 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html body.app-shell .account-card > .account-tabs .nav-tabs > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

html body.app-shell .account-card > .account-tabs .nav-tabs > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #91a0b2 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease !important;
}

html body.app-shell .account-card > .account-tabs .nav-tabs > li > a:hover {
    border-color: rgba(0, 207, 255, .22) !important;
    background: rgba(0, 207, 255, .08) !important;
    color: #dff6ff !important;
    transform: translateY(-1px) !important;
}

html body.app-shell .account-card > .account-tabs .nav-tabs > li.active > a {
    border-color: rgba(0, 207, 255, .65) !important;
    background: linear-gradient(135deg, #00cfff, #00aee8) !important;
    color: #061521 !important;
    box-shadow: 0 7px 16px rgba(0, 207, 255, .22) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
    html body.app-shell .account-card > .account-tabs .nav-tabs {
        min-height: 0 !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

    html body.app-shell .account-card > .account-tabs .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    html body.app-shell .account-card > .account-tabs .nav-tabs > li > a {
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
    }
}

/* Final category switcher implementation. */
html body.app-shell #donate-catalog .catalog-category-switcher {
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 14px !important;
    border: 1px solid #263c53 !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #111f31, #0a1524) !important;
    box-shadow: 0 16px 36px rgba(1, 8, 18, .22) !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__main {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__main::before {
    display: none !important;
    content: none !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__label {
    margin: 0 0 10px 2px;
    color: #8ca8c1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

html body.app-shell #donate-catalog .catalog-category-switcher__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__item {
    min-width: 0 !important;
    margin: 0 !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #2b4259 !important;
    border-radius: 11px !important;
    background: #0c1a2b !important;
    color: #9db1c4 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: .2s ease !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__icon {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    border-radius: 8px !important;
    background: rgba(0, 210, 255, .1) !important;
    color: #00d2ff !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__title {
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__button:hover,
html body.app-shell #donate-catalog .catalog-category-switcher__item.active .catalog-category-switcher__button {
    border-color: #00d2ff !important;
    background: linear-gradient(135deg, rgba(0, 210, 255, .2), rgba(0, 114, 255, .14)) !important;
    color: #f1fbff !important;
    box-shadow: 0 8px 20px rgba(0, 114, 255, .16) !important;
    transform: translateY(-1px) !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__button:focus-visible {
    outline: 2px solid #7dd3fc !important;
    outline-offset: 2px !important;
}

@media (max-width: 560px) {
    html body.app-shell #donate-catalog .catalog-category-switcher {
        padding: 12px !important;
    }

    html body.app-shell #donate-catalog .catalog-category-switcher__list {
        grid-template-columns: 1fr !important;
    }

    html body.app-shell #donate-catalog .catalog-category-switcher__button {
        justify-content: flex-start !important;
    }
}

/* Rebuilt public category switcher: labels remain visible on every viewport. */
html body.app-shell #donate-catalog .tabs-wrapper {
    display: block !important;
    margin: 0 0 22px !important;
    padding: 16px !important;
    border: 1px solid rgba(65, 89, 116, .72) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(15, 29, 46, .98), rgba(8, 18, 31, .98)) !important;
    box-shadow: 0 18px 45px rgba(1, 8, 18, .24), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html body.app-shell #donate-catalog .tabs-wrapper > .block-left {
    display: block !important;
    width: 100% !important;
}

html body.app-shell #donate-catalog .tabs-wrapper > .block-left::before {
    display: block;
    margin: 0 0 11px 2px;
    color: #8ba4bb;
    content: "КАТЕГОРИИ";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

html body.app-shell #donate-catalog .tabs .tab-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li {
    min-width: 0 !important;
    margin: 0 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(65, 89, 116, .65) !important;
    border-radius: 12px !important;
    background: rgba(10, 22, 37, .88) !important;
    color: #a9bacb !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a > .block-left {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(0, 210, 255, .1) !important;
    color: #00d2ff !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a > .block-right {
    display: inline !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a:hover,
html body.app-shell #donate-catalog .tabs .tab-links > li.active > a {
    border-color: rgba(0, 210, 255, .72) !important;
    background: linear-gradient(135deg, rgba(0, 210, 255, .2), rgba(0, 114, 255, .14)) !important;
    color: #f1fbff !important;
    box-shadow: 0 8px 22px rgba(0, 114, 255, .16) !important;
    transform: translateY(-1px) !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li.active > a > .block-left,
html body.app-shell #donate-catalog .tabs .tab-links > li > a:hover > .block-left {
    background: rgba(0, 210, 255, .2) !important;
    color: #8df0ff !important;
}

@media (max-width: 560px) {
    html body.app-shell #donate-catalog .tabs-wrapper {
        padding: 12px !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links > li > a {
        justify-content: flex-start !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        text-align: left !important;
    }
}

/* Payment method card: keep the title and helper text as two readable rows
   instead of letting the long notice stretch the modal horizontally. */
html body.app-shell .modal[data-id="paymodal"] .payment-selection {
    margin-top: 15px !important;
}

html body.app-shell .modal[data-id="paymodal"] .payment-label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #bcd0df !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

html body.app-shell .modal[data-id="paymodal"] .payment-methods {
    display: block !important;
}

html body.app-shell .modal[data-id="paymodal"] .balance-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    border: 1px solid rgba(98, 230, 255, .2) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #132b40, #0d1b2b) !important;
    color: #dceefa !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    box-sizing: border-box !important;
}

html body.app-shell #donate-catalog .balance-card:hover,
html body.app-shell .modal[data-id="paymodal"] .balance-card:hover {
    border-color: rgba(98, 230, 255, .4) !important;
}

html body.app-shell .modal[data-id="paymodal"] .balance-card .card-title {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #e3f3fb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

html body.app-shell .modal[data-id="paymodal"] .balance-card .card-title i {
    flex: 0 0 auto !important;
    color: #62e6ff !important;
    font-size: 13px !important;
}

html body.app-shell .modal[data-id="paymodal"] .balance-card small {
    display: block !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    color: #9db2c2 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
}

@media (max-width: 560px) {
    html body.app-shell .modal[data-id="paymodal"] .balance-card {
        padding: 12px !important;
    }

    html body.app-shell .modal[data-id="paymodal"] .balance-card .card-title {
        font-size: 11px !important;
    }

    html body.app-shell .modal[data-id="paymodal"] .balance-card small {
        padding-left: 19px !important;
    }
}

/* Checkout summary polish: clear visual separation between the product,
   included benefits and the final amount. */
html body.app-shell .modal[data-id="paymodal"] .purchase-product-card {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 104px !important;
    padding: 14px !important;
    border: 1px solid rgba(98, 230, 255, .2) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #172537, #101d2c) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-product-art {
    width: 70px !important;
    height: 70px !important;
    border: 1px solid rgba(0, 210, 255, .55) !important;
    border-radius: 14px !important;
    background: #091523 !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-product-art img {
    object-fit: cover !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-product-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-kicker {
    color: #62e6ff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-product-copy h2 {
    margin: 0 !important;
    overflow: hidden !important;
    color: #f1f7fb !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchaseProductPeriod {
    color: #62d9ff !important;
    font-size: 14px !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-current-price {
    margin: 2px 0 0 !important;
    color: #ffc34d !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-product-copy p {
    margin: 1px 0 0 !important;
    overflow: hidden !important;
    color: #9bb0c1 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-benefits {
    margin-top: 13px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(98, 230, 255, .16) !important;
    border-radius: 13px !important;
    background: #142235 !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-benefits strong {
    color: #d9eff8 !important;
    font-size: 11px !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-benefits ul {
    gap: 6px !important;
    margin: 10px 0 0 !important;
    padding-left: 17px !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-benefits li {
    color: #a7bac9 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-summary {
    margin-top: 13px !important;
    border: 1px solid rgba(98, 170, 214, .2) !important;
    border-radius: 13px !important;
    background: rgba(7, 17, 29, .8) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-summary > div {
    min-height: 42px !important;
    padding: 10px 13px !important;
    color: #8ea6b8 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-summary > div + div {
    border-top: 1px solid rgba(98, 170, 214, .1) !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-summary > div strong {
    color: #e5f2fb !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-summary .purchase-summary-total {
    min-height: 56px !important;
    padding-block: 13px !important;
    border-top-color: rgba(98, 230, 255, .16) !important;
    background: linear-gradient(100deg, #143550, #173c59) !important;
}

html body.app-shell .modal[data-id="paymodal"] .purchase-summary-total strong {
    color: #ffc34d !important;
    font-size: 19px !important;
    letter-spacing: -.02em !important;
}

@media (max-width: 560px) {
    html body.app-shell .modal[data-id="paymodal"] .purchase-product-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        min-height: 88px !important;
        padding: 11px !important;
    }

    html body.app-shell .modal[data-id="paymodal"] .purchase-product-art {
        width: 58px !important;
        height: 58px !important;
    }

    html body.app-shell .modal[data-id="paymodal"] .purchase-product-copy h2 {
        font-size: 16px !important;
    }

    html body.app-shell .modal[data-id="paymodal"] .purchase-current-price {
        font-size: 15px !important;
    }
}

/* Repair legacy flex sizing: the catalog grid must not inherit the old
   percentage flex-basis, which can collapse cards into narrow columns. */
html body.app-shell #donate-catalog .tab-list .items {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body.app-shell #donate-catalog .tab-list .items > .item-id {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

@media (max-width: 1100px) {
    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

body.app-shell :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
}

@keyframes public-content-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1023px) {
    body.app-shell .app-sidebar {
        border-radius: 0 22px 22px 0;
    }

    body.app-shell .app-topbar {
        border-radius: 14px;
    }

    body.app-shell .app-content > * {
        animation: none;
    }
}

@media (max-width: 560px) {
    body.app-shell .app-topbar {
        min-height: 58px;
        border-radius: 12px;
    }

    body.app-shell .public-topbar-site,
    body.app-shell .profile-menu-name {
        display: none;
    }

    body.app-shell .app-content .card,
    body.app-shell .app-content .panel,
    body.app-shell .app-content .account-card,
    body.app-shell .app-content .orders-panel,
    body.app-shell .app-content .support-app,
    body.app-shell .app-content .wiki-section,
    body.app-shell .app-content .mint-card,
    body.app-shell .app-content .auth-card {
        border-radius: 14px;
    }

    body.app-shell .hero-actions .server-address-button {
        width: 100%;
        min-width: 0;
    }

    body.app-shell .hero-actions .btn-hero-primary {
        width: 100%;
    }

    body.app-shell .catalog-server-address .server-address-button {
        width: 100%;
        min-width: 0;
    }
}

html,
body.app-shell {
    overflow-x: hidden;
}

body.app-shell .app-frame {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    gap: 32px;
    width: min(1480px, 100%);
    max-width: 1480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

body.app-shell .app-container {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    gap: 32px;
    width: min(1480px, 100%);
    max-width: 1480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    body.app-shell .app-sidebar {
        position: sticky;
        inset: auto;
        z-index: 80;
        width: var(--nav-width);
        min-width: var(--nav-width);
        height: calc(100vh - 48px);
        top: 24px;
        flex-shrink: 0;
        box-sizing: border-box;
        border-right: 1px solid var(--nav-border);
        background: var(--nav-surface);
        backdrop-filter: blur(12px);
    }

    body.app-shell .app-content {
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        margin-left: 0;
        padding: 0 0 40px;
    }

    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .main-content,
    body.app-shell .app-content > .mint-page,
    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .container {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.app-shell .app-content > .main-content,
    body.app-shell .app-content > .container.main-content {
        margin-top: 0 !important;
        padding-top: 28px;
        padding-bottom: 48px;
    }

    body.app-shell .app-content > .hero-section {
        padding-top: 28px;
    }

    body.app-shell .app-content > .hero-section > .container {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.app-shell .app-content > .mint-page {
        padding-top: 28px;
    }

    body.app-shell .app-content > .auth-page {
        padding-top: 28px;
        padding-bottom: 48px;
    }

    body.app-shell .account-shell,
    body.app-shell .orders-shell,
    body.app-shell .support-shell {
        width: 100% !important;
        max-width: 1240px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    body.app-shell .support-app,
    body.app-shell .orders-hero,
    body.app-shell .orders-panel,
    body.app-shell .account-card {
        border: 1px solid var(--nav-border);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(22, 27, 34, .94), rgba(10, 18, 29, .88));
        box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
    }

    body.app-shell .support-app-body {
        min-width: 0;
    }

    body.app-shell .hero-section {
        padding-top: 22px;
    }

    body.app-shell .hero-section .hero-banner {
        padding: 30px 34px;
        border: 1px solid rgba(0, 210, 255, .24);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(18, 31, 49, .9), rgba(9, 16, 27, .94));
        box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    }

    body.app-shell .hero-section .hero-character {
        display: block !important;
        right: 4% !important;
        bottom: -8px !important;
        z-index: 1;
        max-width: min(300px, 30%) !important;
        opacity: .9 !important;
    }

    body.app-shell .hero-section .hero-character img {
        display: block;
        width: 100%;
        max-height: 285px;
    }

    body.app-shell .hero-section .hero-title,
    body.app-shell .hero-section .hero-subtitle,
    body.app-shell .hero-section .hero-features,
    body.app-shell .hero-section .hero-actions {
        position: relative;
        z-index: 2;
        max-width: 62%;
    }

    body.app-shell .hero-section .hero-title {
        margin: 22px 0 8px;
        font-size: clamp(34px, 5vw, 58px);
        letter-spacing: -.055em;
    }

    body.app-shell .hero-section .hero-subtitle {
        max-width: 620px;
        color: #91a5b8;
    }

    body.app-shell .hero-section .hero-features span,
    body.app-shell .hero-section .online-pill {
        border-color: rgba(0, 210, 255, .18);
        background: rgba(0, 210, 255, .07);
    }

    body.app-shell .stats-section {
        padding: 20px 0 34px;
    }

    body.app-shell .payments .payment-id .amount {
        margin-left: auto;
        color: #5ee6ae;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }

    body.app-shell .stats-section .stats-grid {
        gap: 12px;
    }

    body.app-shell .stats-section .stat-card {
        min-height: 78px;
        padding: 16px;
        border: 1px solid rgba(82, 91, 128, .3);
        border-radius: 15px;
        background: linear-gradient(145deg, rgba(18, 31, 49, .78), rgba(9, 16, 27, .9));
        box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    }

    body.app-shell .stats-section .stat-number {
        color: #00d2ff;
    }

    body.app-shell #donate-catalog {
        padding-top: 22px;
    }

    body.app-shell #donate-catalog .catalog-intro,
    body.app-shell #donate-catalog .server-selector-container {
        padding: 22px 24px;
        border: 1px solid rgba(82, 91, 128, .3);
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(18, 31, 49, .78), rgba(9, 16, 27, .9));
        box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    }

    body.app-shell #donate-catalog .catalog-intro {
        margin-bottom: 14px;
    }

    body.app-shell #donate-catalog .catalog-intro h2 {
        margin: 7px 0 5px;
        color: #eff6fc;
        font-size: clamp(24px, 3vw, 32px);
        letter-spacing: -.04em;
    }

    body.app-shell #donate-catalog .catalog-intro p {
        color: #8499ae;
    }

    body.app-shell #donate-catalog .server-selector-container {
        margin-bottom: 18px;
    }

    @media (max-width: 600px) {
        body.app-shell .hero-section .hero-banner {
            padding: 24px 18px;
        }

        body.app-shell #donate-catalog .catalog-intro,
        body.app-shell #donate-catalog .server-selector-container {
            padding: 18px 14px;
        }

        body.app-shell .hero-section .hero-character {
            display: none !important;
        }

        body.app-shell .hero-section .hero-title,
        body.app-shell .hero-section .hero-subtitle,
        body.app-shell .hero-section .hero-features,
        body.app-shell .hero-section .hero-actions {
            max-width: none;
        }
    }

    body.app-shell .support-ticket,
    body.app-shell .order-row {
        border-color: var(--nav-border);
        border-radius: 13px;
        background: rgba(255, 255, 255, .025);
        transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    body.app-shell .support-ticket:hover,
    body.app-shell .order-row:hover {
        border-color: rgba(0, 210, 255, .32);
        background: rgba(0, 210, 255, .07);
        transform: translateY(-1px);
    }

    body.app-shell .support-sidebar,
    body.app-shell .support-main-panel {
        min-width: 0;
    }

    body.app-shell .wiki-page .hero-banner,
    body.app-shell .main-content > .hero-banner {
        border-color: rgba(0, 210, 255, .2);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 34, .9));
    }

    body.app-shell .main-content > .stats-grid,
    body.app-shell .main-content > .items {
        gap: 16px;
    }

    body.app-shell .main-content > .stats-grid .stat-card,
    body.app-shell .main-content > .items .item-id {
        border-color: rgba(126, 150, 180, .28);
        border-radius: 16px;
        background: transparent;
        box-shadow: none;
    }

    body.app-shell .app-content > * {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.app-shell .app-content > .auth-page {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }

    body.app-shell .app-content > .auth-page > .account-shell,
    body.app-shell .app-content > .auth-page > .orders-shell,
    body.app-shell .app-content > .auth-page > .support-shell {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
    }
}

html body.app-shell .app-content > .hero-section > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
 * Public shell v2: the navigation is anchored to the viewport, not to a
 * centered wrapper. This prevents legacy max-width rules from moving it.
 */
@media (min-width: 1024px) {
    html body.app-shell .app-frame {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.app-shell .app-sidebar {
        position: fixed !important;
        inset: 24px auto 24px 0 !important;
        z-index: 100 !important;
        display: flex !important;
        width: 260px !important;
        min-width: 260px !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto;
    }

    html body.app-shell .hero-section .hero-character {
        display: block !important;
        right: 5% !important;
        bottom: -112px !important;
        width: 250px !important;
        max-width: 250px !important;
        opacity: .88 !important;
    }

    html body.app-shell .hero-section .hero-character img {
        display: block !important;
        width: 250px !important;
        height: auto !important;
        max-width: 250px !important;
        max-height: none !important;
    }

    html body.app-shell .app-content {
        display: block !important;
        width: calc(100% - 288px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 0 0 288px !important;
        padding: 24px 24px 40px 0 !important;
        transform: none !important;
    }

    html body.app-shell .app-content > * {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

body.app-shell .app-brand {
    position: relative;
    border-color: var(--nav-border);
    background: rgba(255, 255, 255, .035);
}

body.app-shell .app-brand::after {
    display: block;
    margin: 5px 0 0 54px;
    color: #62e6a8;
    content: "● Онлайн";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app-shell .app-nav {
    gap: 6px;
}

body.app-shell .app-nav a {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.app-shell .app-nav a:hover {
    transform: translateX(3px);
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(0, 210, 255, .4);
    background: linear-gradient(90deg, rgba(0, 210, 255, .2), rgba(0, 210, 255, .05));
    box-shadow: 0 0 15px rgba(0, 210, 255, .3), inset 3px 0 var(--nav-cyan);
}

body.app-shell .app-sidebar-foot {
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--nav-border);
}

body.app-shell .sidebar-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(0, 210, 255, .16);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 34, .8));
}

body.app-shell .sidebar-profile-details {
    min-width: 0;
    flex: 1;
}

body.app-shell .sidebar-profile-details strong,
body.app-shell .sidebar-profile-details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .sidebar-profile-details strong {
    color: #f0f6fc;
    font-size: 12px;
}

body.app-shell .sidebar-profile-details small {
    margin-top: 2px;
    color: #8b949e;
    font-size: 10px;
}

body.app-shell .sidebar-profile-logout {
    margin-left: auto;
}

body.app-shell .sidebar-profile-logout button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--nav-border);
    border-radius: 9px;
    background: transparent;
    color: #8b949e;
    cursor: pointer;
}

body.app-shell .sidebar-profile-logout button::after {
    content: 'Выйти';
    margin-left: 8px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

body.app-shell .sidebar-profile-logout button {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 30px;
    padding: 0 9px;
}

body.app-shell .sidebar-profile-logout button:hover {
    border-color: rgba(255, 113, 133, .45);
    background: rgba(255, 113, 133, .1);
    color: #ff7185;
}

body.app-shell .app-sidebar-foot > .public-theme-toggle {
    display: none;
}

body.app-shell .app-topbar {
    border-bottom: 1px solid rgba(0, 210, 255, .14);
    background: rgba(8, 14, 24, .9);
    backdrop-filter: blur(16px);
}

body.app-shell .profile-menu-dropdown {
    border: 1px solid rgba(0, 210, 255, .2);
    border-radius: 14px;
    background: #111b29;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

body.app-shell .profile-menu-dropdown a,
body.app-shell .profile-menu-dropdown form button {
    border-radius: 9px;
}

body.app-shell .profile-menu-meta {
    display: grid;
    gap: 3px;
    margin: 2px 4px 8px;
    padding: 4px 8px 10px;
    border-bottom: 1px solid var(--nav-border);
}

body.app-shell .profile-menu-meta strong {
    color: #f0f6fc;
    font-size: 13px;
}

body.app-shell .profile-menu-meta small {
    overflow: hidden;
    color: #8b949e;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-shell .profile-menu-dropdown .profile-menu-admin {
    color: var(--nav-cyan);
}

body.app-shell .profile-menu-dropdown form button:hover {
    background: rgba(255, 113, 133, .12);
    color: #ff7185;
}

body.app-shell .profile-menu-dropdown form {
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid var(--nav-border);
}

body.app-shell .account-tabs .nav-tabs,
body.app-shell .tabs-alt .nav-tabs {
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    background: rgba(10, 15, 24, .72);
}

body.app-shell .account-tabs .nav-tabs a,
body.app-shell .tabs-alt .nav-tabs a {
    border-radius: 10px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

body.app-shell .account-tabs .nav-tabs .active a,
body.app-shell .tabs-alt .nav-tabs .active a {
    background: var(--nav-cyan);
    color: #06111c;
    box-shadow: 0 0 15px rgba(0, 210, 255, .25);
    transform: translateY(-1px);
}

body.app-shell #account-finance {
    padding: 22px 24px 24px;
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(18, 31, 49, .78), rgba(9, 16, 27, .9));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

body.app-shell #account-finance .account-section-heading {
    margin-bottom: 8px;
}

body.app-shell #account-finance .account-section-heading > span {
    padding: 7px 10px;
    border: 1px solid rgba(0, 210, 255, .2);
    border-radius: 999px;
    background: rgba(0, 210, 255, .08);
    color: var(--nav-cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

body.app-shell #account-finance > .auth-lead {
    max-width: 680px;
    margin: 0 0 20px;
    color: #8ea8bd;
    font-size: 13px;
}

body.app-shell #account-finance > .auth-form {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 24px;
    padding: 18px 16px 16px;
    border: 1px solid var(--nav-border);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(10, 20, 34, .86), rgba(7, 14, 24, .72));
}

body.app-shell #account-finance > .auth-form label {
    grid-column: 1;
    align-self: center;
    margin: 0;
    color: #a9bdd0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app-shell #account-finance > .auth-form label:nth-of-type(3) + input {
    grid-column: 2;
}

body.app-shell #account-finance > .auth-form input {
    width: 100%;
    min-height: 44px;
    margin-top: 7px;
    box-sizing: border-box;
    border: 1px solid rgba(157, 198, 232, .16);
    border-radius: 10px;
    background: rgba(22, 34, 52, .76);
    color: #f0f6fc;
    outline: none;
    font-size: 13px;
    padding: 0 13px;
}

body.app-shell #account-finance > .auth-form input:focus {
    border-color: var(--nav-cyan);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, .12);
}

body.app-shell #account-finance > .auth-form button {
    grid-column: 1 / -1;
    min-height: 44px;
    margin-top: 2px;
    border: 1px solid rgba(0, 210, 255, .38);
    border-radius: 10px;
    background: linear-gradient(135deg, #00d2ff, #008cff);
    color: #06111c;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 210, 255, .16);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

body.app-shell #account-finance > .auth-form button:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(0, 210, 255, .28);
    transform: translateY(-1px);
}

body.app-shell #account-finance > h3 {
    margin: 0 0 10px;
    color: #f0f6fc;
    font-size: 15px;
}

body.app-shell #account-finance .account-history {
    gap: 8px;
}

body.app-shell #account-finance .account-history > div {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(22, 34, 52, .52);
}

body.app-shell #account-finance .account-receipt-link {
    color: var(--nav-cyan);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

body.app-shell #account-finance .account-receipt-link:hover {
    color: #f0f6fc;
}

@media (max-width: 680px) {
    body.app-shell #account-finance {
        padding: 18px 14px;
    }

    body.app-shell #account-finance > .auth-form {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    body.app-shell #account-finance > .auth-form label,
    body.app-shell #account-finance > .auth-form label:nth-of-type(3) + input,
    body.app-shell #account-finance > .auth-form button {
        grid-column: 1;
    }

    body.app-shell #account-finance .account-history > div {
        grid-template-columns: 1fr auto;
    }

    body.app-shell #account-finance .account-history > div > span {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 1023px) {
    body.app-shell .app-content {
        width: 100%;
        margin-left: 0;
        padding: 0 16px 32px;
    }

    body.app-shell .app-content > * {
        width: 100%;
        max-width: none;
    }

    body.app-shell .account-shell,
    body.app-shell .orders-shell,
    body.app-shell .support-shell {
        max-width: none !important;
    }
}

@media (max-width: 600px) {
    body.app-shell .app-content {
        padding-right: 12px;
        padding-left: 12px;
    }
}

body.app-shell .support-app-body {
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, .66fr);
    min-width: 0;
}

body.app-shell .support-app {
    padding: 22px 24px 24px;
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(18, 31, 49, .78), rgba(9, 16, 27, .9));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

body.app-shell .support-app-head {
    margin: -22px -24px 18px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(82, 91, 128, .28);
    background: linear-gradient(135deg, rgba(0, 210, 255, .06), transparent 55%);
}

body.app-shell .support-app-head h1 {
    margin: 7px 0 5px;
    color: #eff6fc;
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -.045em;
}

body.app-shell .support-app-head p {
    margin: 0;
    color: #8499ae;
    font-size: 12px;
}

body.app-shell .support-sidebar,
body.app-shell .support-main-panel {
    border-color: rgba(82, 91, 128, .3);
    background: rgba(9, 16, 27, .42);
}

body.app-shell .support-sidebar {
    border-radius: 14px 0 0 14px;
}

body.app-shell .support-main-panel {
    border-radius: 0 14px 14px 0;
}

body.app-shell .sidebar-staff-actions {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
}

body.app-shell .sidebar-staff-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 210, 255, .32);
    border-radius: 10px;
    background: rgba(0, 210, 255, .1);
    color: #dff8ff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.app-shell .sidebar-staff-button:hover {
    border-color: rgba(0, 210, 255, .8);
    background: rgba(0, 210, 255, .2);
    transform: translateY(-1px);
}

body.app-shell .sidebar-staff-button-admin {
    border-color: rgba(168, 85, 247, .45);
    background: rgba(168, 85, 247, .14);
}

body.app-shell .sidebar-staff-button-help {
    border-color: rgba(16, 185, 129, .42);
    background: rgba(16, 185, 129, .12);
}

body.app-shell .support-sidebar,
body.app-shell .support-main-panel,
body.app-shell .mint-new-console,
body.app-shell .mint-new-side,
body.app-shell .account-shell,
body.app-shell .orders-shell {
    min-width: 0;
}

body.app-shell .mint-new-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 18px;
}

body.app-shell .mint-new-console {
    min-height: 560px;
}

body.app-shell .mint-capsule {
    box-shadow: 0 0 50px rgba(0, 210, 255, .3);
}

body.app-shell .orders-shell,
body.app-shell .account-shell {
    max-width: 1240px;
    margin-right: auto;
}

@media (max-width: 840px) {
    body.app-shell .support-app-body,
    body.app-shell .mint-new-grid {
        grid-template-columns: 1fr;
    }

    body.app-shell .support-sidebar {
        max-height: 360px;
    }
}

@media (max-width: 600px) {
    body.app-shell .support-app {
        padding: 18px 14px;
    }

    body.app-shell .support-app-head {
        margin: -18px -14px 14px;
        padding: 18px 14px;
    }

    body.app-shell .support-sidebar,
    body.app-shell .support-main-panel {
        border-radius: 14px;
    }
}

@media (max-width: 560px) {
    body.app-shell .support-app-head,
    body.app-shell .orders-hero,
    body.app-shell .account-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    body.app-shell .account-2fa-code-inputs {
        gap: 5px;
    }

    body.app-shell .account-2fa-digit {
        width: 42px;
        height: 48px;
    }
}

@media (max-width: 1023px) {
    body.app-shell .app-frame,
    body.app-shell .app-container {
        display: block;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }

    body.app-shell .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        height: 100vh;
        width: min(320px, 88vw);
        min-width: 0;
        transform: translateX(-105%);
        transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    }

    body.app-shell.public-drawer-open .app-sidebar {
        transform: translateX(0);
    }

    body.app-shell .app-topbar {
        position: sticky;
        top: 0;
        z-index: 70;
        display: flex;
        min-height: 64px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border-subtle);
        background: rgba(8, 11, 15, .88);
        backdrop-filter: var(--glass-blur);
    }

    body.app-shell .navbar-mobile {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid var(--border-medium);
        border-radius: var(--radius-md);
        background: var(--bg-surface-secondary);
        color: var(--text-primary);
    }

    body.app-shell .public-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 75;
        display: none;
        background: rgba(8, 11, 15, .66);
        backdrop-filter: blur(4px);
    }

    body.app-shell.public-drawer-open .public-drawer-backdrop {
        display: block;
    }

    body.app-shell .app-content {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        padding: 0 16px 32px;
    }
}

@media (max-width: 600px) {
    body.app-shell .app-content {
        padding-right: 12px;
        padding-left: 12px;
    }
}

body.app-shell .profile-menu-dropdown {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    visibility: hidden;
}

body.app-shell .profile-menu.is-open .profile-menu-dropdown,
body.app-shell .profile-menu:focus-within .profile-menu-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

body.app-shell :where(.hero-banner, .item-id, .account-card, .orders-panel, .support-app, .mint-card, .wiki-card) {
    border-color: var(--border-medium);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(22, 27, 34, .94), rgba(15, 20, 28, .9));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

body.app-shell :where(.btn, .product-buy, .orders-primary-action, .mint-capsule) {
    transition: var(--transition-smooth);
}

body.app-shell :where(.btn-primary, .product-buy:hover, .orders-primary-action:hover) {
    background-image: var(--accent-gradient);
    box-shadow: var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    body.app-shell *::before,
    body.app-shell *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    /*
     * Final public shell contract.
     * Keep the sidebar and content as grid siblings: no fixed content offsets,
     * percentage translations or compensating margins are allowed here.
     */
    body.app-shell .app-frame,
    body.app-shell .app-layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 28px;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        padding: 24px 24px 24px 0;
        box-sizing: border-box;
    }

    body.app-shell .app-content,
    body.app-shell .main-content {
        min-width: 0;
        width: 100%;
        margin-left: 0 !important;
        transform: none !important;
    }

    body.app-shell .app-sidebar {
        position: sticky;
        top: 24px;
        left: auto;
        width: 260px;
        min-width: 260px;
        height: calc(100vh - 48px);
        max-height: calc(100vh - 48px);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        background: rgba(22, 27, 34, .9);
        backdrop-filter: blur(16px);
    }

    body.app-shell .app-frame > .app-sidebar,
    body.app-shell .app-layout > .app-sidebar {
        grid-column: 1;
        grid-row: 1;
    }

    body.app-shell .app-frame > .app-content,
    body.app-shell .app-layout > .app-content {
        grid-column: 2;
        grid-row: 1;
    }

    body.app-shell .app-content > :where(.hero-section, .main-content, .auth-page, .mint-page, .content-banners, .stats-section, .footer) {
        width: 100%;
        max-width: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.app-shell .app-content > .main-content,
    body.app-shell .app-content > .auth-page,
    body.app-shell .app-content > .mint-page {
        padding-top: 0;
    }

    /* Keep the public page rhythm compact below the hero. */
    body.app-shell .stats-section {
        margin-top: 26px;
        margin-bottom: 28px;
    }

    body.app-shell #interactive-background {
        display: none !important;
    }

    body.app-shell .app-nav a[aria-current="page"],
    body.app-shell .app-nav li.active a {
        border-color: rgba(0, 210, 255, .42);
        background: rgba(0, 210, 255, .14);
        box-shadow: 0 0 20px rgba(0, 210, 255, .18), inset 3px 0 var(--noxis-cyan);
    }

    body.app-shell .app-sidebar-foot {
        margin-top: auto;
    }

    @media (max-width: 1023px) {
        body.app-shell .app-frame,
        body.app-shell .app-layout {
            display: block;
            width: 100%;
            max-width: none;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }

        body.app-shell .app-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 80;
            width: min(320px, 88vw);
            min-width: 0;
            height: 100vh;
            max-height: none;
            border-radius: 0 16px 16px 0;
            transform: translateX(-105%);
            transition: transform .3s cubic-bezier(.16, 1, .3, 1);
        }

        body.app-shell.public-drawer-open .app-sidebar {
            transform: translateX(0);
        }

        body.app-shell .app-content {
            width: 100%;
            min-width: 0;
            margin-left: 0 !important;
            padding: 0 16px 32px;
        }

        body.app-shell .app-topbar {
            position: sticky;
            top: 0;
            z-index: 70;
            display: flex;
        }
    }

    /* Public layout override: intentionally outside any media query. */
    html body.app-shell .app-frame {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) !important;
        gap: 28px !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        margin: 0 !important;
        padding: 24px 24px 24px 0 !important;
        box-sizing: border-box;
    }

    html body.app-shell .app-sidebar {
        position: sticky !important;
        top: 24px !important;
        left: auto !important;
        width: 260px !important;
        min-width: 260px !important;
        height: calc(100vh - 48px) !important;
        margin: 0 !important;
    }

    html body.app-shell .app-content {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 40px !important;
        transform: none !important;
    }

    @media (max-width: 1023px) {
        html body.app-shell .app-frame {
            display: block !important;
            padding: 0 !important;
        }

        html body.app-shell .app-sidebar {
            position: fixed !important;
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            width: min(320px, 88vw) !important;
            min-width: 0 !important;
            height: 100vh !important;
        }

        html body.app-shell .app-content {
            width: 100% !important;
            padding: 0 16px 32px !important;
        }
    }

    @media (max-width: 600px) {
        body.app-shell .app-content {
            padding-right: 12px;
            padding-left: 12px;
        }
    }
}

/* Final public shell override, outside reduced-motion media rules. */
@media (min-width: 1024px) {
    html body.app-shell .app-frame {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) !important;
        gap: 28px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 24px 24px 24px 0 !important;
    }

    html body.app-shell .app-sidebar {
        position: sticky !important;
        top: 24px !important;
        left: auto !important;
        width: 260px !important;
        min-width: 260px !important;
        height: calc(100vh - 48px) !important;
    }

    html body.app-shell .app-content {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 40px !important;
    }
}

/* Final viewport-anchored public shell. */
@media (min-width: 1024px) {
    html body.app-shell .app-frame {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.app-shell .app-sidebar {
        position: fixed !important;
        inset: 24px auto 24px 0 !important;
        z-index: 100 !important;
        display: flex !important;
        width: 260px !important;
        min-width: 260px !important;
        height: auto !important;
        max-height: none !important;
    }

    html body.app-shell .app-content {
        display: block !important;
        width: calc(100% - 288px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 0 0 288px !important;
        padding: 24px 24px 40px 0 !important;
        transform: none !important;
    }
}

html body.app-shell .app-brand {
    min-width: 0;
}

html body.app-shell .app-brand-mark {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
}

html body.app-shell .app-brand > span:last-child {
    min-width: 0;
}

html body.app-shell .app-content > .mint-page {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.app-shell .mint-page > .container,
html body.app-shell .mint-page .mint-art-hero,
html body.app-shell .mint-page .mint-new-hero,
html body.app-shell .mint-page .mint-new-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.app-shell .hero-section > .container,
html body.app-shell .content-banners,
html body.app-shell .stats-section > .container,
html body.app-shell .main-content {
    box-sizing: border-box;
}

html body.app-shell .hero-banner {
    isolation: isolate;
}

html body.app-shell .catalog-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 18px;
    padding: 26px 26px 22px;
    border: 1px solid rgba(53, 200, 255, .2);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(17, 31, 48, .94), rgba(9, 18, 30, .94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 34px rgba(2,6,23,.18);
    overflow: hidden;
}

html body.app-shell .catalog-intro::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(53,200,255,0), rgba(53,200,255,.9), rgba(53,200,255,0));
}

html body.app-shell .catalog-intro h2 {
    margin: 12px 0 10px;
    letter-spacing: -.06em;
}

html body.app-shell .catalog-intro-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 220px;
    padding: 12px 14px;
    border: 1px solid rgba(53, 200, 255, .18);
    border-radius: 14px;
    background: rgba(16, 26, 40, .8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

html body.app-shell .server-selector-container,
html body.app-shell .shop-toolbar {
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

html body.app-shell .items .item-id {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html body.app-shell .items .item-id:hover {
    border-color: rgba(184, 243, 107, .34);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}

@media (max-width: 700px) {
    html body.app-shell .catalog-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    html body.app-shell .catalog-intro-meta {
        min-width: 0;
    }
}

/* Keep every public page anchored to the content column, without centered gaps. */
html body.app-shell .app-content > * {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.app-shell .app-content .container,
html body.app-shell .app-content .auth-shell,
html body.app-shell .app-content .account-shell,
html body.app-shell .app-content .orders-shell,
html body.app-shell .app-content .support-shell,
html body.app-shell .app-content .wiki-page {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.app-shell .app-content .auth-shell {
    padding-left: 0;
    padding-right: 0;
}

html body.app-shell .app-frame {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.app-shell .app-content {
    width: calc(100% - 288px) !important;
    max-width: none !important;
    margin: 0 0 0 288px !important;
    padding: 24px 24px 40px 0 !important;
}

html body.app-shell {
    padding-left: 0 !important;
}

/* Brand header: keep identity and online state in one predictable row. */
html body.app-shell .app-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 64px !important;
    margin: 0 0 22px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(142, 168, 189, .16) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

html body.app-shell .app-brand::after {
    display: none !important;
    content: none !important;
}

html body.app-shell .app-brand-mark {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #00d2ff 0%, #0072ff 100%) !important;
    box-shadow: 0 0 16px rgba(0, 210, 255, .4) !important;
}

html body.app-shell .app-brand-copy {
    display: grid !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 3px !important;
}

html body.app-shell .app-brand-copy strong {
    overflow: hidden;
    color: #f0f6fc !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.app-shell .app-brand-copy small {
    overflow: hidden;
    color: #8b949e !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    text-transform: uppercase !important;
    white-space: nowrap;
}

html body.app-shell .online-status {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(16, 185, 129, .2) !important;
    border-radius: 20px !important;
    background: rgba(16, 185, 129, .1) !important;
}

html body.app-shell .online-status i {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, .6) !important;
    animation: brand-online-pulse 2s infinite !important;
}

html body.app-shell .online-status b {
    color: #10b981 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

html body.app-shell .app-sidebar {
    border-right-color: rgba(82, 91, 128, .28) !important;
    background: linear-gradient(180deg, rgba(18, 31, 49, .92), rgba(12, 18, 29, .98)) !important;
}

html body.app-shell .app-nav-kicker {
    margin-bottom: 3px;
    color: #6f8aa0 !important;
}

html body.app-shell .app-nav {
    gap: 8px !important;
}

html body.app-shell .app-nav a {
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    color: #aab4c9 !important;
}

html body.app-shell .app-nav a i {
    color: #00d2ff !important;
}

html body.app-shell .app-nav a:hover {
    border-color: rgba(0, 210, 255, .24) !important;
    background: rgba(0, 210, 255, .08) !important;
    color: #f0f6fc !important;
}

html body.app-shell .app-nav li.active a,
html body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(0, 210, 255, .54) !important;
    background: linear-gradient(90deg, rgba(0, 210, 255, .2), rgba(0, 210, 255, .05)) !important;
    color: #f0f6fc !important;
    box-shadow: 0 0 16px rgba(0, 210, 255, .2), inset 3px 0 #00d2ff !important;
}

html body.app-shell .app-sidebar-foot {
    padding-top: 16px !important;
    border-top-color: rgba(82, 91, 128, .28) !important;
}

html body.app-shell .sidebar-profile {
    min-height: 58px !important;
    padding: 8px !important;
    border-color: rgba(0, 210, 255, .2) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(0, 210, 255, .1), rgba(22, 27, 34, .8)) !important;
}

html body.app-shell .sidebar-profile-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(135deg, #00d2ff, #0072ff);
    color: #06111c;
}

@keyframes brand-online-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.82); }
}

/* Final layout contract: the sidebar participates in the grid. */
html body.app-shell .app-frame,
html body.app-shell .app-container {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 28px !important;
    width: min(1440px, 100%) !important;
    max-width: 1440px !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

html body.app-shell .app-sidebar {
    grid-column: 1;
    grid-row: 1 / span 2;
}

html body.app-shell .app-content {
    grid-column: 2;
    grid-row: 2;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 40px !important;
}

html body.app-shell > .app-frame > .footer {
    grid-column: 2;
    grid-row: 3;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 28px 0 0 !important;
    padding: 26px 0 32px !important;
}

html body.app-shell .app-topbar {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    z-index: 70;
    pointer-events: auto;
}

html body.app-shell .app-content {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

html body.app-shell .app-content a,
html body.app-shell .app-content button,
html body.app-shell .app-content input,
html body.app-shell .app-content select,
html body.app-shell .app-content textarea,
html body.app-shell .app-topbar a,
html body.app-shell .app-topbar button {
    pointer-events: auto;
}

html body.app-shell .public-drawer-backdrop {
    pointer-events: none;
}

html body.app-shell.public-drawer-open .public-drawer-backdrop {
    pointer-events: auto;
}

@media (max-width: 1023px) {
    html body.app-shell .app-frame,
    html body.app-shell .app-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.app-shell .app-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px 32px !important;
    }

    html body.app-shell > .app-frame > .footer {
        grid-column: auto;
        grid-row: auto;
        width: 100% !important;
        margin: 0 !important;
        padding: 26px 16px 32px !important;
    }

    html body.app-shell .app-topbar {
        position: relative;
        top: auto;
    }
}

@media (max-width: 420px) {
    html body.app-shell .app-brand {
        gap: 8px !important;
        padding-inline: 10px !important;
    }

    html body.app-shell .online-status {
        padding-inline: 6px !important;
    }
}

/* Final public mobile contract. This file is loaded last, so these rules
   resolve the legacy layout overrides from style, ui-shell and layout CSS. */
@media (max-width: 1023px) {
    html body.app-shell {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    html body.app-shell .app-frame,
    html body.app-shell .app-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.app-shell .app-sidebar {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        z-index: 1000 !important;
        width: min(320px, 88vw) !important;
        min-width: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(105%) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    html body.app-shell.public-drawer-open .app-sidebar {
        transform: translateX(0) !important;
    }

    html body.app-shell .app-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    html body.app-shell .app-content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 16px 32px !important;
        box-sizing: border-box !important;
    }

    html body.app-shell .app-content > #page-content,
    html body.app-shell .app-content > .hero-section,
    html body.app-shell .app-content > .auth-page,
    html body.app-shell .app-content > .wiki-page,
    html body.app-shell .app-content > .mint-page {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 18px 0 42px !important;
        box-sizing: border-box !important;
    }

    html body.app-shell.support-page .app-content > .auth-page {
        padding-top: 12px !important;
    }

    html body.app-shell.support-page .support-shell,
    html body.app-shell.support-page .support-app {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body.app-shell.support-page .support-app-body {
        display: block !important;
        min-width: 0 !important;
    }

    html body.app-shell.support-page .support-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(123, 180, 220, .2) !important;
    }

    html body.app-shell.support-page .support-main-panel {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    html body.app-shell.support-page .support-thread,
    html body.app-shell.support-page .support-create {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 560px) {
    html body.app-shell .app-content {
        padding-inline: 10px !important;
    }

    html body.app-shell .app-topbar {
        min-height: 60px !important;
        padding: 9px 10px !important;
    }

    html body.app-shell .app-content > #page-content,
    html body.app-shell .app-content > .hero-section,
    html body.app-shell .app-content > .auth-page,
    html body.app-shell .app-content > .wiki-page,
    html body.app-shell .app-content > .mint-page {
        padding-top: 12px !important;
        padding-bottom: 30px !important;
    }

    html body.app-shell.support-page .support-app-head {
        padding: 22px 18px !important;
    }

    html body.app-shell.support-page .support-app-head h1 {
        font-size: 34px !important;
    }

    html body.app-shell.support-page .support-online {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body.app-shell.support-page .support-sidebar {
        padding: 17px 10px 12px !important;
    }

    html body.app-shell.support-page .support-sidebar .support-ticket-list {
        grid-template-columns: 1fr !important;
        max-height: 240px !important;
    }

    html body.app-shell.support-page .support-thread-head {
        padding: 17px 15px !important;
    }

    html body.app-shell.support-page .support-conversation {
        max-height: none !important;
        padding: 17px 14px !important;
    }

    html body.app-shell.support-page .support-message {
        max-width: 100% !important;
    }

    html body.app-shell.support-page .support-reply-composer {
        padding: 16px 14px 18px !important;
    }

    html body.app-shell.support-page .support-reply-composer .auth-submit {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 680px) {
    html body.app-shell .app-content > .orders-page {
        width: 100% !important;
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body.app-shell .app-content > .orders-page > .orders-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body.app-shell .orders-page .orders-panel,
    html body.app-shell .orders-page .orders-hero {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.app-shell.support-page .app-content > .auth-page {
        width: 100% !important;
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body.app-shell.support-page .app-content > .auth-page > .support-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body.app-shell.support-page .support-app,
    html body.app-shell.support-page .support-hero {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.app-shell.account-page .app-content {
        width: 100% !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body.app-shell.account-page .account-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body.app-shell.account-page .account-card {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* Mint daily drop redesign. */
html body.app-shell .mint-new-console {
    position: relative;
    min-height: 540px;
    padding: 20px 22px 18px;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 52%, rgba(0, 210, 255, .12), transparent 32%), linear-gradient(145deg, #0d2238, #08111f);
}

html body.app-shell .mint-new-orb-wrap {
    min-height: 250px;
    margin: 4px 0 0;
}

html body.app-shell .mint-new-console .mint-orb {
    animation: mint-float 4s ease-in-out infinite;
    background: radial-gradient(circle at 30% 20%, #fff, #00d2ff 24%, #0072ff 62%, #713cff 100%);
    box-shadow: 0 0 50px rgba(0, 210, 255, .55), inset 0 -25px 35px rgba(0, 0, 0, .3);
    border-width: 5px;
}

html body.app-shell .mint-new-console .mint-orb:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 75px rgba(0, 210, 255, .8), inset 0 -25px 35px rgba(0, 0, 0, .3);
}

html body.app-shell .mint-open-button,
html body.app-shell .mint-topup-button,
html body.app-shell .mint-win-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    color: #041521;
    background: linear-gradient(135deg, #00d2ff, #0072ff);
    box-shadow: 0 12px 30px rgba(0, 114, 255, .28);
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Final Mint state layer: keep the daily action compact and unambiguous. */
html body.app-shell .mint-new-console {
    min-height: 0;
    padding: 18px 22px 16px;
}

html body.app-shell .mint-new-orb-wrap {
    min-height: 202px;
}

html body.app-shell .mint-new-console .mint-orb {
    width: 154px;
    height: 154px;
}

html body.app-shell .mint-open-button {
    position: relative;
    overflow: hidden;
    min-height: 52px;
}

html body.app-shell .mint-open-button:disabled {
    border: 1px solid rgba(125, 211, 252, .16);
    color: #9ab1c4;
    background: linear-gradient(135deg, #19364d, #132a40);
    box-shadow: none;
    filter: none;
    opacity: 1;
}

html body.app-shell .mint-open-button:disabled i {
    color: #8aa4b8;
}

html body.app-shell .mint-countdown {
    padding: 11px 16px;
    margin-bottom: 8px;
}

html body.app-shell .mint-countdown strong {
    font-size: clamp(32px, 2.2vw, 48px);
}

html body.app-shell .mint-result {
    min-height: 78px;
    margin-top: 8px;
    padding: 10px 14px;
}

html body.app-shell .mint-result strong {
    font-size: clamp(30px, 3.5vw, 48px);
}

html body.app-shell .mint-result span {
    font-size: 12px;
}

html body.app-shell .mint-new-status {
    margin: 6px 0 0;
    color: #8da6bd;
    font-size: 12px;
}

html body.app-shell .mint-roulette-wrap {
    min-height: 202px;
    margin-top: 2px;
    margin-bottom: 0;
}

html body.app-shell .mint-roulette-viewport {
    padding: 12px 0;
}

html body.app-shell .mint-roulette-item {
    height: 138px;
}

html body.app-shell .mint-console-head h2 {
    margin-top: 3px;
}

html body.app-shell .mint-prize-track {
    margin-top: 11px;
}

html body.app-shell .mint-countdown strong {
    letter-spacing: .06em;
}

@media (max-width: 700px) {
    html body.app-shell .mint-new-orb-wrap {
        min-height: 210px;
    }

    html body.app-shell .mint-new-console .mint-orb {
        width: 142px;
        height: 142px;
    }
}

/* CS-style case roulette. The server still decides the reward; the client only
   animates the matching rarity after the claim response is received. */
html body.app-shell .mint-roulette-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 224px;
    margin: 8px -22px 4px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(4, 11, 20, .28), rgba(4, 11, 20, .72)),
        radial-gradient(circle at 50% 50%, rgba(0, 210, 255, .12), transparent 48%);
}

html body.app-shell .mint-roulette-viewport {
    width: 100%;
    overflow: hidden;
    padding: 18px 0;
}

html body.app-shell .mint-roulette-track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

html body.app-shell .mint-roulette-item {
    position: relative;
    display: grid;
    align-content: end;
    flex: 0 0 136px;
    height: 154px;
    padding: 14px 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-bottom: 4px solid #4b86b4;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .15), transparent 42%),
        linear-gradient(160deg, rgba(24, 45, 69, .96), rgba(7, 14, 26, .98));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 12px 22px rgba(0, 0, 0, .18);
}

html body.app-shell .mint-roulette-item::before {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    height: 66px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor, transparent 68%);
    content: "";
    opacity: .16;
}

html body.app-shell .mint-roulette-item span,
html body.app-shell .mint-roulette-item small {
    position: relative;
    z-index: 1;
}

html body.app-shell .mint-roulette-item span {
    color: #f1f7ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
}

html body.app-shell .mint-roulette-item small {
    margin-top: 4px;
    overflow: hidden;
    color: #91a9bf;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.app-shell .mint-roulette-item.rarity-blue { color: #55a9e8; border-bottom-color: #55a9e8; }
html body.app-shell .mint-roulette-item.rarity-purple { color: #9b72e8; border-bottom-color: #9b72e8; }
html body.app-shell .mint-roulette-item.rarity-pink { color: #e86cae; border-bottom-color: #e86cae; }
html body.app-shell .mint-roulette-item.rarity-red { color: #e94f5f; border-bottom-color: #e94f5f; }
html body.app-shell .mint-roulette-item.rarity-gold { color: #f6c957; border-bottom-color: #f6c957; }

html body.app-shell .mint-roulette-pointer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 4;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent 0, #f7d774 12%, #f7d774 88%, transparent 100%);
    box-shadow: 0 0 16px rgba(247, 215, 116, .9);
    pointer-events: none;
}

html body.app-shell .mint-roulette-pointer::before,
html body.app-shell .mint-roulette-pointer::after {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    content: "";
}

html body.app-shell .mint-roulette-pointer::before {
    top: 0;
    border-top: 10px solid #f7d774;
}

html body.app-shell .mint-roulette-pointer::after {
    bottom: 0;
    border-bottom: 10px solid #f7d774;
}

html body.app-shell .mint-roulette-wrap .mint-orb {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 700px) {
    html body.app-shell .mint-roulette-wrap {
        margin-right: -20px;
        margin-left: -20px;
    }

    html body.app-shell .mint-roulette-item {
        flex-basis: 118px;
        height: 138px;
    }
}

html body.app-shell .mint-open-button {
    width: min(100%, 440px);
    min-height: 56px;
    margin: 0 auto 16px;
    letter-spacing: .02em;
}

html body.app-shell .mint-open-button:hover:not(:disabled),
html body.app-shell .mint-topup-button:hover,
html body.app-shell .mint-win-claim:hover {
    transform: translateY(-1px) scale(1.01);
    filter: brightness(1.1);
    box-shadow: 0 16px 38px rgba(0, 210, 255, .42);
}

html body.app-shell .mint-open-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

html body.app-shell .mint-countdown {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: min(100%, 440px);
    margin: 8px auto 14px;
    padding: 14px 18px;
    border: 1px solid rgba(0, 210, 255, .12);
    border-radius: 14px;
    background: rgba(0, 210, 255, .045);
}

html body.app-shell .mint-countdown span {
    color: #78a9c4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

html body.app-shell .mint-countdown strong {
    color: #effbff;
    font: 900 clamp(34px, 2.4vw, 54px)/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .08em;
    text-shadow: 0 0 18px rgba(0, 210, 255, .5);
}

html body.app-shell .mint-countdown.is-ready strong {
    color: #72e0a3;
}

html body.app-shell .mint-prize-track {
    max-width: 520px;
    margin: 16px auto 0;
    padding: 0 8px;
}

html body.app-shell .mint-console-head {
    padding-bottom: 4px;
}

html body.app-shell .mint-console-head h2 {
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.03em;
}

html body.app-shell .mint-level {
    padding: 6px 10px;
    border: 1px solid rgba(0, 210, 255, .28);
    border-radius: 999px;
    background: rgba(0, 210, 255, .08);
    color: #65e6ff;
}

html body.app-shell .mint-prize-track i {
    height: 9px;
    background: linear-gradient(90deg, #00d2ff, #0072ff 48%, #b892ff 78%, #ffd166);
    box-shadow: 0 0 18px rgba(0, 210, 255, .38);
}

html body.app-shell .mint-wallet-card b {
    display: block;
    color: #effbff;
    font-size: clamp(34px, 4vw, 48px);
}

html body.app-shell .mint-wallet-card b i {
    color: #72e0a3;
    font-size: .6em;
}

html body.app-shell .mint-topup-button {
    width: 100%;
    margin-top: 20px;
    text-decoration: none;
}

html body.app-shell .mint-rule b {
    color: #00d2ff;
}

html body.app-shell .mint-odd {
    position: relative;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(142, 168, 189, .12);
}

html body.app-shell .mint-odd em {
    grid-column: 2 / -1;
    display: block;
    width: var(--weight);
    height: 4px;
    margin-top: 3px;
    border-radius: 99px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

html body.app-shell .mint-odd.common { color: #7dbbd5; }
html body.app-shell .mint-odd.uncommon { color: #45d99a; }
html body.app-shell .mint-odd.rare { color: #b892ff; }
html body.app-shell .mint-odd.legendary { color: #ffd166; }

html body.app-shell .mint-win-modal[hidden] {
    display: none;
}

html body.app-shell .mint-win-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
}

html body.app-shell .mint-win-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 18, .8);
    backdrop-filter: blur(10px);
}

html body.app-shell .mint-win-card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(420px, 100%);
    padding: 38px 28px 30px;
    border: 1px solid rgba(0, 210, 255, .35);
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0, rgba(0, 210, 255, .2), transparent 45%), #0e1c2d;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .5), 0 0 55px rgba(0, 210, 255, .2);
    text-align: center;
    animation: mint-modal-in .35s ease both;
}

html body.app-shell .mint-win-close {
    position: absolute;
    top: 12px;
    right: 14px;
    border: 0;
    color: #8ea8bd;
    background: transparent;
    cursor: pointer;
}

html body.app-shell .mint-win-spark {
    margin: 12px 0 4px;
    color: #ffd166;
    font-size: 54px;
    text-shadow: 0 0 30px #ffd166;
}

html body.app-shell .mint-win-card h2 {
    margin: 0 0 8px;
    color: #fff;
}

html body.app-shell .mint-win-card > strong {
    color: #72e0a3;
    font-size: 42px;
    text-shadow: 0 0 22px rgba(114, 224, 163, .5);
}

html body.app-shell .mint-win-card p {
    color: #9db4c5;
    font-size: 12px;
}

html body.app-shell .mint-win-claim {
    width: 100%;
    margin-top: 14px;
}



@keyframes mint-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes mint-modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Final sidebar skin: keep the shared visual language after all legacy rules. */
html body.app-shell .app-sidebar {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(17, 34, 54, .98), rgba(7, 17, 29, .98)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

html body.app-shell .app-brand {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 64px !important;
    margin: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(22, 42, 63, .9), rgba(12, 26, 43, .86)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .16) !important;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html body.app-shell .app-brand:hover {
    border-color: rgba(0, 210, 255, .52) !important;
    background: linear-gradient(135deg, rgba(23, 57, 82, .96), rgba(11, 35, 58, .92)) !important;
    box-shadow: 0 15px 32px rgba(0, 114, 255, .26) !important;
}

html body.app-shell .app-brand::before {
    position: absolute;
    z-index: -1;
    top: -45px;
    left: -26px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(0, 210, 255, .13);
    content: "";
    filter: blur(12px);
}

html body.app-shell .app-brand::after {
    position: absolute;
    top: 0;
    right: 18%;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    content: "";
}

html body.app-shell .app-nav {
    padding: 10px !important;
}

html body.app-shell .app-nav li a {
    min-height: 42px !important;
    margin: 3px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html body.app-shell .app-brand-mark {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(0, 210, 255, .25) !important;
    border-radius: 10px !important;
    color: #f4fbff !important;
    background: linear-gradient(135deg, #00d2ff, #0072ff) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, .07), 0 8px 18px rgba(0, 114, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

html body.app-shell .app-brand-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.app-shell .app-brand-copy strong,
html body.app-shell .app-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.app-shell .app-brand-copy strong {
    color: #edf7ff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    line-height: 1.1 !important;
}

html body.app-shell .app-brand-copy small {
    color: #89a0b4 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

html body.app-shell .online-status {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    min-height: 22px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(16, 185, 129, .3) !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, .1) !important;
    box-shadow: none !important;
}

html body.app-shell .online-status b {
    color: #45dca0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

html body.app-shell .online-status i {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-radius: 50% !important;
    background: #35e6a0 !important;
    box-shadow: 0 0 10px rgba(32, 215, 146, .95) !important;
    animation: brand-online-pulse 2s ease-in-out infinite !important;
}

/* Keep the compact brand header readable on the narrow sidebar. */
html body.app-shell .app-brand {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

html body.app-shell .app-brand-copy {
    width: auto !important;
    overflow: hidden !important;
}

html body.app-shell .app-brand-copy strong,
html body.app-shell .app-brand-copy small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell .app-brand-copy strong {
    font-size: 15px !important;
    letter-spacing: 0 !important;
}

html body.app-shell .app-brand-copy small {
    font-size: 9px !important;
    letter-spacing: .08em !important;
}

html body.app-shell .online-status {
    gap: 5px !important;
    min-height: 21px !important;
    padding: 0 8px !important;
}

html body.app-shell .online-status b {
    font-size: 9px !important;
}

html body.app-shell .app-nav li a:hover {
    border-color: rgba(0, 210, 255, .28) !important;
    background: rgba(0, 210, 255, .08) !important;
    transform: translateX(2px);
}

html body.app-shell .app-nav li.active a {
    border-color: rgba(0, 210, 255, .65) !important;
    background: linear-gradient(100deg, rgba(0, 210, 255, .2), rgba(0, 114, 255, .1)) !important;
    box-shadow: inset 3px 0 0 var(--accent-cyan), 0 8px 20px rgba(0, 114, 255, .12) !important;
}

html body.app-shell .app-sidebar-foot {
    margin: 10px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .16) !important;
}

html body.app-shell .sidebar-staff-button {
    min-height: 40px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, rgba(22, 42, 63, .9), rgba(12, 26, 43, .86)) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
}

html body.app-shell .sidebar-staff-button:hover {
    border-color: rgba(0, 210, 255, .52) !important;
    background: linear-gradient(135deg, rgba(23, 57, 82, .96), rgba(11, 35, 58, .92)) !important;
}

html body.app-shell .sidebar-profile {
    margin-top: 10px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(22, 42, 63, .72), rgba(10, 24, 40, .86)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html body.app-shell .sidebar-profile-link:hover,
html body.app-shell .sidebar-profile-logout button:hover {
    background: rgba(0, 210, 255, .08) !important;
}

/* Keep the account card readable: the profile remains the primary action,
   while logout is an explicit secondary button instead of an unlabeled icon. */
html body.app-shell .sidebar-profile {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(18, 39, 60, .96), rgba(8, 21, 36, .98)) !important;
}

html body.app-shell .sidebar-profile-link {
    min-height: 42px !important;
    padding: 4px 7px !important;
    gap: 9px !important;
    border-radius: 11px !important;
    transition: background .2s ease !important;
}

html body.app-shell .sidebar-profile-avatar {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(119, 230, 255, .45) !important;
}

html body.app-shell .sidebar-profile-details strong {
    display: block !important;
    overflow: hidden !important;
    color: #f3f9ff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell .sidebar-profile-details small {
    display: block !important;
    margin-top: 3px !important;
    color: #8fa8bc !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

html body.app-shell .sidebar-profile-logout {
    margin: 0 !important;
}

html body.app-shell .sidebar-profile-logout button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 62px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 10px !important;
    background: rgba(8, 19, 32, .72) !important;
    color: #b5c7d6 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease !important;
}

html body.app-shell .sidebar-profile-logout button::after {
    content: none !important;
    display: none !important;
}

html body.app-shell .sidebar-profile-logout button:hover {
    border-color: rgba(255, 126, 163, .55) !important;
    background: rgba(126, 29, 65, .22) !important;
    color: #ffd6e3 !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 420px) {
    html body.app-shell .sidebar-profile-logout button {
        min-width: 38px !important;
        width: 38px !important;
        padding: 0 !important;
    }

    html body.app-shell .sidebar-profile-logout button span {
        display: none !important;
    }
}

/* Storefront rhythm: the metrics should follow the hero, not float in a
   second vertical section with the legacy desktop spacing. */
html body.app-shell .hero-section + .stats-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 12px 0 18px !important;
}

html body.app-shell .hero-section + .stats-section .stats-grid {
    gap: 14px !important;
}

html body.app-shell .hero-section + .stats-section .stat-card {
    min-height: 88px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(14, 32, 50, .96), rgba(8, 19, 32, .98)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

html body.app-shell .hero-section + .stats-section .stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(53, 200, 255, .1) !important;
}

html body.app-shell .hero-section + .stats-section .stat-number {
    font-size: 25px !important;
    line-height: 1 !important;
}

html body.app-shell .hero-section + .stats-section .stat-label {
    margin-top: 5px !important;
    font-size: 11px !important;
}

html body.app-shell .hero-section + .stats-section + #donate-catalog {
    padding-top: 4px !important;
}

/* Server switcher uses the same treatment as the primary purchase action. */
html body.app-shell #donate-catalog .server-buttons {
    gap: 8px !important;
    padding: 0 !important;
}

html body.app-shell #donate-catalog .server-btn {
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(148, 163, 184, .2) !important;
    border-radius: 12px !important;
    color: #aab7c7 !important;
    background: linear-gradient(135deg, rgba(22, 42, 63, .9), rgba(12, 26, 43, .86)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 18px rgba(0, 0, 0, .12) !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html body.app-shell #donate-catalog .server-btn:hover,
html body.app-shell #donate-catalog .server-btn.active {
    border-color: rgba(0, 210, 255, .52) !important;
    color: #061521 !important;
    background: linear-gradient(135deg, #35c8ff, #7188ff) !important;
    box-shadow: 0 12px 26px rgba(0, 114, 255, .26) !important;
    transform: translateY(-1px);
}

html body.app-shell #donate-catalog .server-btn i {
    color: currentColor !important;
}

@media (max-width: 760px) {
    html body.app-shell #donate-catalog .server-selector-container {
        align-items: stretch !important;
    }

    html body.app-shell #donate-catalog .server-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body.app-shell #donate-catalog .server-btn {
        justify-content: center !important;
        min-width: 0 !important;
    }
}

/* Product cards: separate media, content and purchase actions into stable
   zones so every card keeps the same rhythm as the reference layout. */
html body.app-shell #donate-catalog .tab-list .items {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id {
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 332px !important;
    padding: 10px !important;
    border: 1px solid #1d354a !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #102235 0%, #091523 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 10px 24px rgba(0, 0, 0, .14) !important;
    text-align: left !important;
}

html body.app-shell #donate-catalog .tab-list .item-id:hover {
    border-color: rgba(0, 207, 255, .5) !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .22), 0 0 18px rgba(0, 207, 255, .08) !important;
    transform: translateY(-3px) !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .image {
    flex: 0 0 150px !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    margin: 0 0 16px !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 10px !important;
    background-color: #1b2434 !important;
    background-size: contain !important;
    background-position: center !important;
    box-shadow: none !important;
    filter: none !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .image:hover {
    transform: none !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .title {
    min-height: 20px !important;
    margin: 0 4px 7px !important;
    overflow: hidden !important;
    color: #edf5fb !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .description {
    display: -webkit-box !important;
    min-height: 35px !important;
    max-width: none !important;
    margin: 0 4px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: #8799ab !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 14px 4px 2px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .price {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #00cfff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-buy {
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(0, 207, 255, .42) !important;
    border-radius: 9px !important;
    color: #00cfff !important;
    background: rgba(0, 159, 213, .12) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-buy:hover {
    color: #061521 !important;
    background: #00cfff !important;
    box-shadow: 0 7px 16px rgba(0, 207, 255, .2) !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-badge {
    align-self: flex-start !important;
    margin: 0 4px 6px !important;
    padding: 3px 7px !important;
    border: 1px solid rgba(0, 207, 255, .25) !important;
    border-radius: 999px !important;
    color: #00d6c5 !important;
    background: rgba(0, 207, 255, .08) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-favorite {
    top: 28px !important;
    right: 17px !important;
    z-index: 2 !important;
    color: #00cfff !important;
}

@media (max-width: 1100px) {
    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id {
        min-height: 286px !important;
        padding: 8px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id .image {
        flex-basis: 112px !important;
        height: 112px !important;
        min-height: 112px !important;
        margin-bottom: 12px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id .title {
        font-size: 12px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id .product-buy {
        padding: 0 9px !important;
    }
}

/* Refined lower storefront sections: balanced purchase cards and quieter
   section rhythm so empty FAQ content does not leave a broken-looking gap. */
html body.app-shell #donate-catalog ~ .faq-section,
html body.app-shell #donate-catalog ~ .payments {
    margin-top: 34px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

html body.app-shell #donate-catalog ~ .faq-section .blockname,
html body.app-shell #donate-catalog ~ .payments .blockname {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    color: #edf4fb !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: none !important;
}

html body.app-shell #donate-catalog ~ .faq-section .blockname::before,
html body.app-shell #donate-catalog ~ .payments .blockname::before {
    width: 4px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #00cfff !important;
    box-shadow: 0 0 12px rgba(0, 207, 255, .4) !important;
    content: "" !important;
}

html body.app-shell #donate-catalog ~ .faq-section .faq-accordion {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: none !important;
    margin: 0 !important;
}

html body.app-shell #donate-catalog ~ .faq-section .faq-item {
    border: 1px solid rgba(29, 53, 74, .9) !important;
    border-radius: 12px !important;
    background: #0d1c2b !important;
}

html body.app-shell #donate-catalog ~ .faq-section .faq-question {
    min-height: 52px !important;
    padding: 14px 16px !important;
    color: #dceaf6 !important;
    font-size: 13px !important;
}

html body.app-shell #donate-catalog ~ .faq-section .faq-question i {
    color: #00cfff !important;
}

html body.app-shell #donate-catalog ~ .faq-section .faq-answer p {
    padding: 0 16px 15px !important;
    color: #8ea2b5 !important;
    font-size: 12px !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-id.window {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 0 !important;
    min-width: 0 !important;
    min-height: 272px !important;
    padding: 12px 14px 13px !important;
    border: 1px solid #1d354a !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #102235, #091523) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    box-sizing: border-box !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-id.window:hover {
    border-color: rgba(0, 207, 255, .42) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18) !important;
    transform: translateY(-2px) !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-id.window .image {
    width: 100% !important;
    height: 150px !important;
    margin: 0 0 18px !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 10px !important;
    background-color: #1b2434 !important;
    background-size: cover !important;
    background-position: center !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-id.window .title {
    overflow: hidden !important;
    color: #e6f0f7 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-id.window .player {
    margin-top: 15px !important;
    overflow: hidden !important;
    color: #8b9aac !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog ~ .payments .payment-id.window .amount {
    justify-self: end !important;
    margin: 14px 0 0 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    color: #4be7b1 !important;
    background: #142333 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    html body.app-shell #donate-catalog ~ .payments .payment-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body.app-shell #donate-catalog ~ .faq-section .faq-accordion {
        grid-template-columns: 1fr !important;
    }

    html body.app-shell #donate-catalog ~ .payments .payment-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body.app-shell #donate-catalog ~ .payments .payment-id.window {
        min-height: 218px !important;
        padding: 9px !important;
    }

    html body.app-shell #donate-catalog ~ .payments .payment-id.window .image {
        height: 108px !important;
        margin-bottom: 12px !important;
    }
}

/* Compact server address chip matching the reference control. */
html body.app-shell .catalog-server-address .server-address-button,
html body.app-shell .hero-actions .server-address-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 238px !important;
    min-width: 238px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 3px 9px 3px 5px !important;
    border: 1px solid #1d354a !important;
    border-radius: 11px !important;
    background: #0d1c2b !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 18px rgba(0, 0, 0, .16) !important;
    box-sizing: border-box !important;
}

html body.app-shell .catalog-server-address .server-address-icon,
html body.app-shell .hero-actions .server-address-icon {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border: 1px solid rgba(0, 210, 255, .45) !important;
    border-radius: 9px !important;
    color: #00cfff !important;
    background: #092b42 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

html body.app-shell .catalog-server-address .server-address-copy,
html body.app-shell .hero-actions .server-address-copy {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
    text-align: left !important;
}

html body.app-shell .catalog-server-address .server-address-copy small,
html body.app-shell .hero-actions .server-address-copy small {
    overflow: hidden !important;
    color: #7891a8 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html body.app-shell .catalog-server-address .server-address-copy strong,
html body.app-shell .hero-actions .server-address-copy strong {
    display: block !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #e7f2fc !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.app-shell .catalog-server-address .server-address-button .copy-icon,
html body.app-shell .hero-actions .server-address-button .copy-icon {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    color: #8299ad !important;
    font-size: 13px !important;
}

html body.app-shell .catalog-server-address .server-address-button:hover,
html body.app-shell .hero-actions .server-address-button:hover {
    border-color: rgba(0, 210, 255, .48) !important;
    background: #10263a !important;
}

html body.app-shell .catalog-server-address .server-address-button:hover .copy-icon,
html body.app-shell .hero-actions .server-address-button:hover .copy-icon {
    color: #00cfff !important;
}

/* Compact category switcher matching the public navigation controls. */
html body.app-shell #donate-catalog .tabs-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    margin: 0 0 18px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(22, 46, 67, .9) !important;
    border-radius: 10px !important;
    background: #0b1725 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}

html body.app-shell #donate-catalog .tabs-wrapper > .block-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.app-shell #donate-catalog .tabs .tab-links {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li {
    margin: 0 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    height: 42px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #7f8998 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a > .block-left {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    color: #778393 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a i {
    margin: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li.active > a,
html body.app-shell #donate-catalog .tabs .tab-links > li > a:hover {
    border-color: rgba(184, 243, 107, .34) !important;
    background: rgba(184, 243, 107, .08) !important;
    color: #00cfff !important;
    box-shadow: none !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li.active > a > .block-left,
html body.app-shell #donate-catalog .tabs .tab-links > li > a:hover > .block-left {
    color: #00cfff !important;
}

html body.app-shell #donate-catalog .tabs-wrapper .catalog-server-address {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

html body.app-shell #donate-catalog .tabs-wrapper .server-address-button {
    min-height: 42px !important;
}

@media (max-width: 760px) {
    html body.app-shell #donate-catalog .tabs-wrapper {
        align-items: stretch !important;
        padding: 8px !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links {
        justify-content: stretch !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links > li {
        flex: 1 1 0 !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links > li > a {
        width: 100% !important;
        padding: 0 8px !important;
    }

    html body.app-shell #donate-catalog .tabs-wrapper .catalog-server-address {
        display: none !important;
    }
}

@media (max-width: 760px) {
    html body.app-shell .hero-section + .stats-section {
        padding: 10px 0 14px !important;
    }

    html body.app-shell .hero-section + .stats-section .stats-grid {
        gap: 10px !important;
    }
}

/* Search and sorting controls share the purchase button surface language. */
html body.app-shell #donate-catalog .shop-toolbar {
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 58px !important;
    margin-bottom: 16px !important;
    padding: 6px !important;
    border: 1px solid rgba(0, 210, 255, .2) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(18, 38, 59, .96), rgba(8, 20, 34, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 32px rgba(0, 0, 0, .2) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html body.app-shell #donate-catalog .shop-toolbar::before {
    display: none !important;
    content: none !important;
}

html body.app-shell #donate-catalog .shop-control {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 42px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 10px !important;
    background: rgba(7, 18, 31, .68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html body.app-shell #donate-catalog .shop-control:focus-within {
    border-color: rgba(0, 210, 255, .52) !important;
    background: rgba(7, 22, 38, .86) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, .1) !important;
}

html body.app-shell #donate-catalog .shop-control > i {
    color: var(--accent-cyan) !important;
}

html body.app-shell #donate-catalog .shop-control input,
html body.app-shell #donate-catalog .shop-sort-toggle {
    color: #d9e8f5 !important;
}

html body.app-shell #donate-catalog .shop-control input::placeholder {
    color: #7f93a7 !important;
}

html body.app-shell #donate-catalog .shop-search {
    width: auto !important;
    min-width: 0 !important;
}

html body.app-shell #donate-catalog .shop-sort {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    html body.app-shell #donate-catalog .shop-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

html body.app-shell #donate-catalog .shop-sort::after {
    color: var(--accent-cyan) !important;
}

html body.app-shell #donate-catalog .shop-sort-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 100 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    border-color: rgba(0, 210, 255, .35) !important;
    border-radius: 11px !important;
    background: #0b1421 !important;
    box-shadow: 0 16px 32px rgba(2, 5, 11, .8) !important;
}

html body.app-shell #donate-catalog .tabs-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

html body.app-shell #donate-catalog .shop-sort-menu button:hover,
html body.app-shell #donate-catalog .shop-sort-menu button[aria-selected="true"] {
    background: rgba(0, 210, 255, .16) !important;
    color: var(--accent-cyan) !important;
}

@media (max-width: 700px) {
    html body.app-shell #donate-catalog .shop-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    html body.app-shell #donate-catalog .shop-search,
    html body.app-shell #donate-catalog .shop-sort {
        width: auto !important;
        margin-right: 0 !important;
    }
}

/* Clean catalog controls: one surface, two balanced fields, no nested
   backgrounds or inherited offsets from the legacy shop styles. */
html body.app-shell #donate-catalog .shop-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr) !important;
    align-items: start !important;
    gap: 18px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.app-shell #donate-catalog .shop-control-field {
    min-width: 0 !important;
}

html body.app-shell #donate-catalog .shop-control-label {
    display: block !important;
    margin: 0 0 8px 2px !important;
    color: #a9b8c8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html body.app-shell #donate-catalog .shop-control {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 13px !important;
    background: rgba(7, 18, 31, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 22px rgba(0, 0, 0, .1) !important;
}

html body.app-shell #donate-catalog .shop-control:focus-within {
    border-color: rgba(0, 210, 255, .55) !important;
    background: rgba(6, 22, 38, .94) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, .1) !important;
}

html body.app-shell #donate-catalog .shop-control > i {
    flex: 0 0 auto !important;
    margin-right: 10px !important;
    color: #00d2ff !important;
    font-size: 14px !important;
}

html body.app-shell #donate-catalog .shop-control input,
html body.app-shell #donate-catalog .shop-sort-toggle {
    min-width: 0 !important;
    color: #d9e8f5 !important;
    font-size: 13px !important;
}

html body.app-shell #donate-catalog .shop-search,
html body.app-shell #donate-catalog .shop-sort {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
}

html body.app-shell #donate-catalog .shop-search input {
    flex: 1 1 auto !important;
}

html body.app-shell #donate-catalog .shop-sort {
    position: relative !important;
    justify-content: flex-start !important;
}

html body.app-shell #donate-catalog .shop-sort-toggle {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 20px 0 0 !important;
    text-align: left !important;
}

html body.app-shell #donate-catalog .shop-sort::after {
    right: 14px !important;
    color: #00d2ff !important;
}

html body.app-shell #donate-catalog .shop-sort-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    html body.app-shell #donate-catalog .shop-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    html body.app-shell #donate-catalog .shop-control {
        width: 100% !important;
    }
}

/* Final category bar override: keep the tabs flat and compact like the
   reference, without the server chip changing their spacing. */
html body.app-shell #donate-catalog .tabs-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 60px !important;
    margin: 0 0 18px !important;
    padding: 7px 10px !important;
    border-top: 1px solid #1d354a !important;
    border-right: 1px solid #1d354a !important;
    border-bottom: 1px solid #1d354a !important;
    border-left: 1px solid #1d354a !important;
    border-radius: 9px !important;
    background: #0b1725 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

html body.app-shell #donate-catalog .tabs-wrapper > .block-left {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.app-shell #donate-catalog .tabs .tab-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li {
    flex: 0 0 auto !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a {
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #7f8998 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li.active > a {
    border-color: rgba(184, 243, 107, .48) !important;
    background: rgba(184, 243, 107, .08) !important;
    color: #00cfff !important;
}

html body.app-shell #donate-catalog .tabs .tab-links > li > a:hover {
    border-color: rgba(184, 243, 107, .3) !important;
    background: rgba(184, 243, 107, .06) !important;
    color: #00cfff !important;
}

html body.app-shell #donate-catalog .tabs-wrapper > .catalog-server-address {
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

@media (max-width: 760px) {
    html body.app-shell #donate-catalog .tabs-wrapper {
        min-height: 0 !important;
        padding: 7px !important;
    }

    html body.app-shell #donate-catalog .tabs-wrapper > .catalog-server-address {
        display: none !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links {
        gap: 4px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links::-webkit-scrollbar {
        display: none !important;
    }

    html body.app-shell #donate-catalog .tabs .tab-links > li > a {
        padding: 0 11px !important;
    }
}

/* ===== assets/minigame.css ===== */
.noxis-minigame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 32px;
    align-items: center;
    margin-top: 28px;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid rgba(0, 210, 255, .2);
    border-radius: 24px;
    background: radial-gradient(circle at 82% 50%, rgba(0, 210, 255, .16), transparent 33%), linear-gradient(135deg, rgba(16, 35, 57, .96), rgba(10, 18, 31, .96));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
}
.noxis-minigame::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    pointer-events: none;
}
.minigame-copy, .minigame-stage { position: relative; z-index: 1; }
.minigame-copy h2 { margin: 10px 0 8px; color: #f0f8ff; font-size: clamp(24px, 3vw, 34px); }
.minigame-copy p { max-width: 480px; margin: 0; color: #9fb6c9; line-height: 1.6; }
.minigame-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 26px; }
.minigame-stats div { display: grid; gap: 2px; }
.minigame-stats strong { color: #62dcff; font-size: 22px; }
.minigame-stats span { color: #7891a8; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.minigame-stage { display: grid; justify-items: center; min-height: 260px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: rgba(4, 12, 23, .38); }
.minigame-chest { position: relative; width: 180px; height: 128px; margin: 12px 0 2px; filter: drop-shadow(0 20px 20px rgba(0,0,0,.42)); perspective: 520px; transform: translateY(0); transition: transform .2s ease; }
.minigame-chest::after { position: absolute; bottom: -18px; left: 10%; width: 80%; height: 22px; border-radius: 50%; background: rgba(0, 210, 255, .25); filter: blur(12px); content: ""; }
.minigame-chest-body { position: absolute; right: 0; bottom: 0; left: 0; height: 76px; border: 4px solid #5a2d11; border-radius: 5px 5px 9px 9px; background: #9c561d url('minecraft/chest.png') -512px 0 / 1024px 1024px no-repeat; image-rendering: pixelated; box-shadow: inset 0 5px 0 rgba(255,205,84,.3), inset 0 -9px 0 rgba(34,10,2,.35), 0 0 0 2px rgba(244,164,48,.22); }
.minigame-chest-lid { position: absolute; top: 20px; right: 0; left: 0; z-index: 2; height: 58px; border: 4px solid #5a2d11; border-radius: 9px 9px 4px 4px; background: #b86b24 url('minecraft/chest.png') -256px 0 / 1024px 1024px no-repeat; image-rendering: pixelated; transform-origin: 50% 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 5px 0 rgba(255,205,84,.3), 0 3px 0 rgba(47,18,5,.55), 0 0 0 2px rgba(244,164,48,.22); }
.minigame-chest-lid::before, .minigame-chest-body::before { position: absolute; top: -5px; bottom: -5px; left: 23px; width: 14px; border-right: 4px solid #f5bd4e; border-left: 4px solid #a65e18; content: ""; }
.minigame-chest-lock { position: absolute; top: 67px; left: calc(50% - 13px); z-index: 3; display: grid; width: 26px; height: 30px; place-items: center; border: 3px solid #ffd45c; border-radius: 3px; background: linear-gradient(90deg, #8b4b18 0 22%, #d8932e 22% 78%, #8b4b18 78%); color: #5e280a; font-size: 13px; box-shadow: 0 2px 0 #4d220b; }
.minigame-stage.is-opening .minigame-chest { animation: minigame-bounce .7s ease; }
.minigame-stage.is-open .minigame-chest-lid { transform: rotateX(-105deg) translateY(-4px); }
.minigame-result { min-height: 22px; margin: 18px 0 12px; color: #eaf8ff; font-size: 14px; font-weight: 700; text-align: center; }
.minigame-result.is-win { color: #72f1b2; }
.minigame-button { min-width: 190px; min-height: 44px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #00d2ff, #0072ff); color: #03121e; font-weight: 800; box-shadow: 0 10px 25px rgba(0, 145, 255, .25); cursor: pointer; }
.minigame-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.minigame-button:disabled { cursor: wait; opacity: .7; }
@keyframes minigame-bounce { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-12px) rotate(-2deg); } 70% { transform: translateY(2px) rotate(1deg); } }
@keyframes item-selected { 0% { transform: scale(.92); opacity: .5; } 65% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 700px) {
    .noxis-minigame { grid-template-columns: 1fr; gap: 18px; }
    .minigame-stage { min-height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
    .minigame-chest, .minigame-chest-lid, .minigame-button { transition: none; }
}
@media (max-width: 760px) {
    .inventory-summary { grid-template-columns: 1fr; }
    .inventory-filters { grid-template-columns: 1fr 1fr; }
    .inventory-filters input, .inventory-filters .game-open-button { grid-column: 1 / -1; }
    .inventory-custom-select { width: 100%; }
}
@media (max-width: 480px) {
    .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 12px; }
    .inventory-summary, .inventory-filters, .inventory-bulk-actions { margin-left: 12px; margin-right: 12px; }
    .inventory-item { padding-left: 7px; padding-right: 7px; }
    .inventory-shell { padding-top: 12px; }
    .inventory-shell .catalog-heading { margin: 28px 14px 20px; }
    .inventory-shell .catalog-heading h1 { font-size: 36px; }
    .inventory-shell .catalog-heading p { font-size: 11px; line-height: 1.45; }
    .inventory-filters { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
    .inventory-filters input, .inventory-filters .game-open-button { grid-column: auto; width: 100%; }
    .inventory-bulk-actions { align-items: stretch; flex-direction: column; }
    .inventory-bulk-actions .game-open-button { width: 100%; }
    .inventory-item .item-icon { width: 62px; height: 62px; }
}
@media (hover: none) {
    .inventory-item:hover { transform: none; border-color: rgba(255,255,255,.13); box-shadow: none; }
    .inventory-item:active { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .inventory-item, .inventory-custom-options { animation: none; transition: none; }
}

.game-page { min-height: 100vh; }
.game-screen { position: relative; width: 100%; color: #fff; }
.game-feed { position: relative; max-width: 1240px; min-height: 820px; margin: 0 auto; padding: 0 0 48px; overflow: hidden; border: 1px solid rgba(148,163,184,.2); border-radius: 24px; background: linear-gradient(180deg, rgba(39,57,62,.55), rgba(6,10,15,.98) 78%); box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.game-backdrop { position: absolute; inset: 0 0 auto; height: 470px; opacity: .7; background: url('../img/Hero.webp') center 30% / cover no-repeat; filter: saturate(.82) contrast(1.05); transform: scale(1.03); }
.game-feed::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(4,10,16,.08) 0%, rgba(6,10,15,.18) 26%, rgba(6,10,15,.72) 52%, #06090e 78%); content: ""; }
.game-feed > *:not(.game-backdrop) { position: relative; z-index: 1; }
.case-back-link { position: relative; z-index: 5 !important; display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0 22px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(8,16,25,.68); color: #eff8ff; font-size: 11px; font-weight: 800; text-decoration: none; text-transform: uppercase; pointer-events: auto; }
.case-hero { position: relative; display: grid; height: 390px; place-items: center; margin-top: -38px; overflow: hidden; background: linear-gradient(180deg, transparent 0%, rgba(3,9,14,.02) 42%, rgba(3,9,14,.78) 100%); }
.case-hero-glow { position: absolute; width: 620px; height: 250px; border-radius: 50%; background: rgba(207,120,45,.34); filter: blur(48px); }
.case-hero .game-chest-large { z-index: 2; transform: scale(1.82); }
.case-hero .game-chest-large { animation: case-idle 3.2s ease-in-out infinite; }
.case-hero .minigame-chest-body, .case-hero .minigame-chest-lid { box-shadow: 0 0 0 2px rgba(255,183,52,.28), 0 32px 65px rgba(0,0,0,.65), inset 0 8px 0 rgba(255,190,70,.4); }
.case-notice { display: grid; justify-items: center; gap: 8px; margin: -16px 0 0; padding: 20px; border: 1px solid rgba(255,173,35,.7); background: radial-gradient(circle at 50% 0, rgba(255,157,24,.18), transparent 65%), rgba(45,36,20,.88); text-align: center; }
.case-notice strong { color: #ffc04b; font-size: 15px; }.case-notice span { color: #e6e0d2; font-size: 11px; }.case-notice a { margin-top: 4px; padding: 11px 18px; border: 1px solid #f1a91f; color: #ffc04b; font-size: 11px; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.case-notice a:hover { background: rgba(255,173,35,.15); }
.game-title { display: grid; gap: 8px; margin: 26px auto 16px; color: rgba(255,255,255,.8); text-align: center; text-shadow: 0 2px 4px #000; }
.game-title strong { color: #f0f8ff; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; text-transform: uppercase; }
.game-title span { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; }
.game-chest-card { position: relative; width: min(100%, 470px); height: 220px; margin: 0 auto; padding-top: 25px; border: 1px solid rgba(112,225,255,.24); border-radius: 18px; background: linear-gradient(145deg, rgba(240,245,245,.14), rgba(9,25,39,.44)); box-shadow: inset 0 0 40px rgba(83,211,255,.07), 0 18px 45px rgba(0,0,0,.3); text-align: center; }
.game-chest-card::before { position: absolute; inset: 18% 24%; border-radius: 50%; background: rgba(0,210,255,.12); filter: blur(30px); content: ""; opacity: .5; transition: opacity .4s ease, transform .4s ease; }
.game-chest-large { position: relative; z-index: 1; width: 230px; height: 125px; margin: 0 auto; transform: scale(.92); }
.game-chest-large.has-case-image { background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 0 24px rgba(105,238,255,.35)); }
.game-chest-large.has-case-image .minecraft-chest-lid, .game-chest-large.has-case-image .minecraft-chest-body, .game-chest-large.has-case-image .minecraft-chest-lock { visibility: hidden; }
.minecraft-chest { width: 290px; height: 190px; filter: drop-shadow(0 25px 22px rgba(0,0,0,.6)); transform-style: preserve-3d; }
.minecraft-chest::before { position: absolute; right: 8%; bottom: -10px; left: 8%; height: 24px; border-radius: 50%; background: rgba(255,183,50,.32); filter: blur(13px); content: ""; }
.minecraft-chest-body, .minecraft-chest-lid { position: absolute; right: 0; left: 0; overflow: hidden; border: 7px solid #4d250e; background-color: #9b5018; image-rendering: pixelated; box-shadow: inset 0 0 0 3px #d17b27, inset 0 -15px 0 rgba(52,18,3,.38), 0 0 0 2px rgba(255,190,63,.18); }
.minecraft-chest-body { bottom: 5px; height: 105px; border-radius: 7px 7px 15px 15px; background-image: repeating-linear-gradient(0deg, rgba(75,27,5,.25) 0 5px, transparent 5px 16px), linear-gradient(90deg, #7d3b12 0 8%, #b96620 8% 42%, #c47729 42% 58%, #b96620 58% 92%, #7d3b12 92%); }
.minecraft-chest-lid { top: 24px; height: 76px; z-index: 2; border-radius: 14px 14px 6px 6px; background-image: repeating-linear-gradient(0deg, rgba(75,27,5,.23) 0 5px, transparent 5px 15px), linear-gradient(90deg, #884311 0 8%, #bd6f23 8% 42%, #cf812c 42% 58%, #bd6f23 58% 92%, #884311 92%); transform-origin: 50% 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.15,1); }
.minecraft-chest-band { position: absolute; top: -7px; bottom: -7px; left: calc(50% - 10px); width: 20px; border-right: 3px solid #7b3c10; border-left: 3px solid #f0a940; background: rgba(205,119,30,.8); box-shadow: 0 0 7px rgba(255,194,69,.25); }
.minecraft-chest-lock { position: absolute; top: 87px; left: calc(50% - 20px); z-index: 4; display: grid; width: 40px; height: 43px; place-items: center; border: 4px solid #ffcf62; border-radius: 5px; background: linear-gradient(90deg, #a95b16, #df8c28 50%, #a95b16); color: #5b2808; font-size: 17px; box-shadow: 0 3px 0 #522006, 0 0 15px rgba(255,193,61,.45); }
.game-feed.is-charging::before, .game-feed.is-opening::before { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 27%, rgba(105,238,255,.22), transparent 17%), rgba(1,8,15,.18); content: ""; pointer-events: none; animation: game-energy-pulse 1s ease-in-out infinite; }
.game-feed.is-opening::after { z-index: 2; background: linear-gradient(180deg, rgba(120,135,137,.2), rgba(6,10,15,.82) 52%, #06090e 83%), radial-gradient(circle at 50% 31%, rgba(255,217,97,.22), transparent 20%); animation: game-flash 3.2s ease both; }
.game-chest-large .minigame-chest-body { height: 65px; }
.game-chest-large .minigame-chest-lid { top: 18px; height: 50px; }
.game-chest-large .minigame-chest-lock { top: 58px; }
.game-chest-large::after { bottom: -12px; transition: opacity .4s ease, transform .4s ease; }
.game-feed.is-charging .game-chest-card::before { opacity: 1; transform: scale(1.5); animation: chest-glow 1s ease-in-out infinite; }
.game-feed.is-charging .game-chest-large { animation: chest-charge .52s ease-in-out infinite alternate; }
.game-feed.is-opening .game-chest-card::before { opacity: 1; transform: scale(1.8); }
.game-feed.is-opening .game-chest-large { animation: chest-open-shake 1.1s ease-in-out infinite; }
.game-feed.is-opening .game-chest-large .minecraft-chest-lid { animation: chest-lid-rattle 1.1s ease-in-out infinite; }
.game-feed.is-open .game-chest-card::before { opacity: .95; transform: scale(1.35); }
.game-feed.is-open .minecraft-chest-lid { transform: rotateX(-112deg) translateY(-12px); }
.game-progress { width: 84%; height: 2px; margin: -2px auto 7px; background: rgba(255,255,255,.22); }
.game-preparing { color: rgba(255,255,255,.72); font-size: 11px; }
.game-result { min-height: 20px; margin: 14px 0 12px; color: #fff; font-size: 13px; font-weight: 800; text-align: center; }
.game-result.is-win { color: #8bffca; }
.game-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 2px auto 22px; }
.game-result-actions button, .game-result-actions a { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 42px; padding: 0 16px; border-radius: 9px; font-size: 11px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .2s ease, filter .2s ease, background .2s ease; }
.game-result-actions button:hover, .game-result-actions a:hover { transform: translateY(-2px); filter: brightness(1.12); }
.game-action-sell { border: 1px solid rgba(255,201,78,.65); background: linear-gradient(135deg, rgba(255,177,34,.28), rgba(154,74,12,.34)); color: #ffd66d; }
.game-action-open { border: 1px solid rgba(83,217,255,.55); background: linear-gradient(135deg, rgba(0,210,255,.24), rgba(0,114,255,.3)); color: #eafaff; }
.game-result-actions button:disabled { cursor: default; opacity: .75; transform: none; }
.game-open-button { display: block; width: min(100%, 290px); min-height: 46px; margin: 0 auto 24px; border: 1px solid rgba(83,217,255,.45); border-radius: 12px; background: linear-gradient(135deg, rgba(0,210,255,.2), rgba(0,114,255,.25)); color: #eafaff; font-size: 13px; font-weight: 800; box-shadow: 0 8px 25px rgba(0,135,255,.18); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.game-open-button:hover { background: linear-gradient(135deg, rgba(0,210,255,.35), rgba(0,114,255,.4)); box-shadow: 0 12px 32px rgba(0,135,255,.32); transform: translateY(-2px); }.game-open-link { display: block; padding: 14px 18px; color: #eafaff; text-align: center; text-decoration: none; }
.game-open-button:disabled { cursor: wait; opacity: .7; transform: none; }
.game-roulette { position: relative; max-width: 1060px; margin: 18px auto 28px; padding: 18px 0 16px; border: 1px solid rgba(0,210,255,.25); border-radius: 5px; background: linear-gradient(180deg, rgba(34,42,47,.94), rgba(7,12,17,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 40px rgba(0,210,255,.08), 0 16px 35px rgba(0,0,0,.3); }
.game-roulette::before { position: absolute; top: 0; right: 6%; left: 6%; height: 2px; background: linear-gradient(90deg, transparent, #42dfff, transparent); box-shadow: 0 0 16px #00d2ff; content: ""; }
.game-roulette-window { position: relative; margin: 0 10px; overflow: hidden; border-radius: 2px; }
.game-roulette-window::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,9,14,.98), rgba(5,9,14,.6) 7%, transparent 22%, transparent 78%, rgba(5,9,14,.6) 93%, rgba(5,9,14,.98)); content: ""; pointer-events: none; }
.game-roulette-pointer { position: absolute; top: 5px; bottom: 5px; left: 50%; z-index: 3; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,210,255,.8), 0 0 18px #00d2ff; }
.game-roulette-pointer::before { position: absolute; top: -5px; left: -7px; border: 7px solid transparent; border-top-color: #fff; content: ""; }
.game-roulette-pointer::after { position: absolute; bottom: -5px; left: -7px; border: 7px solid transparent; border-bottom-color: #fff; content: ""; }
.game-roulette-track { display: flex; gap: 8px; width: max-content; padding: 5px; transition: transform 20.5s cubic-bezier(.12,.68,.08,1); will-change: transform; }
.game-roulette-track:not(.is-spinning) { animation: roulette-loop 18s linear infinite; }
.game-roulette-track.is-spinning { animation: none !important; }
.roulette-item { display: grid; width: 132px; height: 112px; flex: 0 0 132px; place-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 2px; background: linear-gradient(145deg, rgba(91,96,98,.96), rgba(42,46,48,.96)); text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.16); }
.roulette-item .item-icon { width: 58px; height: 58px; margin: 0; border-radius: 0; }
.roulette-item[style*="--reward-image"] .item-icon, .game-items > div[style*="--reward-image"] .item-icon { width: min(var(--reward-size, 64px), 100%); height: min(var(--reward-size, 64px), 64px); background-image: var(--reward-image) !important; background-position: center; background-repeat: no-repeat; background-size: contain; }
.roulette-item.item-ore .item-icon { background: url('minecraft/deepslate.png') center / cover; }
.roulette-item.item-blue .item-icon { background: url('minecraft/diamond_block.png') center / cover; }
.roulette-item.item-stone .item-icon { background: url('minecraft/basalt.png') center / cover; }
.roulette-item.item-dark .item-icon { background: url('minecraft/deepslate.png') center / cover; }
.roulette-item.item-sand .item-icon { background: url('minecraft/sand.png') center / cover; }
.roulette-item.item-dirt .item-icon { background: url('minecraft/dirt.png') center / cover; }
.roulette-item.item-wood .item-icon { background: url('minecraft/birch_planks.png') center / cover; }
.roulette-item.item-cobble .item-icon { background: url('minecraft/cobblestone.png') center / cover; }
.roulette-item.item-diamond .item-icon, .item-diamond { background: url('minecraft/item-diamond.png') center / cover; }
.roulette-item.item-emerald .item-icon, .item-emerald { background: url('minecraft/item-emerald.png') center / cover; }
.roulette-item.item-gold .item-icon, .item-gold { background: url('minecraft/item-gold-ingot.png') center / cover; }
.roulette-item.item-iron .item-icon, .item-iron { background: url('minecraft/item-iron-ingot.png') center / cover; }
.roulette-item.item-netherite .item-icon, .item-netherite { background: url('minecraft/item-netherite-ingot.png') center / cover; }
.roulette-item.item-apple .item-icon, .item-apple { background: url('minecraft/item-apple.png') center / cover; }
.roulette-item.item-pearl .item-icon, .item-pearl { background: url('minecraft/item-ender-pearl.png') center / cover; }
.roulette-item.item-amethyst .item-icon, .item-amethyst { background: url('minecraft/item-amethyst.png') center / cover; }
.roulette-item.item-xp .item-icon, .item-xp { background: url('minecraft/item-xp.png') center / cover; }
.roulette-item b { overflow: hidden; width: 100%; color: #b9cad6; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.roulette-item small { overflow: hidden; width: 100%; color: #8495a4; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.roulette-item em, .game-items em { color: var(--case-accent, #73e8ff); font-size: 8px; font-style: normal; font-weight: 800; }.roulette-item.rarity-rare { border-color: rgba(53,214,255,.45); }.roulette-item.rarity-epic { border-color: rgba(182,60,255,.5); }.roulette-item.rarity-red { border-color: rgba(255,63,92,.65); box-shadow: 0 0 14px rgba(255,63,92,.2); }.roulette-item.rarity-legendary { border-color: rgba(255,181,46,.65); box-shadow: 0 0 14px rgba(255,181,46,.22); }
.roulette-item { position: relative; width: 160px; height: 148px; flex-basis: 160px; gap: 4px; padding: 10px 9px 12px; background: linear-gradient(145deg, rgba(52,64,70,.98), rgba(18,24,29,.98)); }
.roulette-item::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: #55d98b; content: ""; }
.roulette-item.rarity-rare::after { background: #35d6ff; }.roulette-item.rarity-epic::after { background: #b63cff; }.roulette-item.rarity-red::after { background: #ff3f5c; }.roulette-item.rarity-legendary::after { background: #ffb52e; }
.roulette-item .item-icon { width: 76px; height: 76px; margin: 0 auto; filter: drop-shadow(0 5px 7px rgba(0,0,0,.6)); }
.roulette-item[style*="--reward-image"] .item-icon { width: 76px; height: 76px; }
.roulette-item b { display: block; line-height: 1.15; font-size: 10px; }
.roulette-item small { display: block; line-height: 1.15; font-size: 9px; }
.roulette-item em { display: block; overflow: hidden; width: 100%; line-height: 1.15; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.roulette-item.is-winning { z-index: 2; border-color: #fff2a1; box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(0,210,255,.8), 0 0 45px rgba(255,190,70,.7); animation: winning-item 1.1s ease-in-out infinite; }
.game-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; max-width: 1120px; margin: 22px auto 0; padding: 0 22px; }
.game-items > div { position: relative; min-width: 0; min-height: 132px; padding: 12px 7px 13px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(37,43,49,.9), rgba(11,16,22,.98)); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.game-items > div::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: #b63cff; content: ""; }
.game-items > div.is-selected { border-color: #c7f8ff; background: linear-gradient(180deg, rgba(40,95,112,.9), rgba(7,27,38,.95)); box-shadow: 0 0 18px rgba(0,210,255,.75), inset 0 0 14px rgba(0,210,255,.28); animation: item-selected .8s ease both; }
.game-items .item-icon { width: 58px; height: 58px; margin: 0 auto 7px; }
.game-items small { display: block; overflow: hidden; color: #d5dbe0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.game-items > div::after { background: #55d98b; }.game-items > div.rarity-rare::after { background: #35d6ff; }.game-items > div.rarity-epic::after { background: #b63cff; }.game-items > div.rarity-red::after { background: #ff3f5c; }.game-items > div.rarity-legendary::after { background: #ffb52e; }
.game-items > div.rarity-legendary { order: 1; }.game-items > div.rarity-red { order: 2; }.game-items > div.rarity-epic { order: 3; }.game-items > div.rarity-rare { order: 4; }.game-items > div.rarity-common { order: 5; }
.game-items > div > em { display: block; margin-top: 4px; color: #55d98b; font-size: 7px; font-style: normal; font-weight: 800; text-transform: uppercase; }.game-items > div.rarity-rare > em { color: #35d6ff; }.game-items > div.rarity-epic > em { color: #d26bff; }.game-items > div.rarity-red > em { color: #ff5d73; }.game-items > div.rarity-legendary > em { color: #ffbd42; }.game-items > div > b { display: block; margin-top: 3px; color: #f3fff8; font-size: 8px; font-weight: 800; }
.case-picker { position: relative; max-width: 1060px; margin: 18px auto 0; padding: 24px 22px 30px; background: radial-gradient(circle at 50% 0, rgba(111,206,255,.09), transparent 42%), linear-gradient(180deg, rgba(14,27,36,.84), rgba(7,14,21,.86)); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(77,234,157,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 45px rgba(0,0,0,.24); }
.case-picker-heading { display: flex; align-items: baseline; gap: 12px; margin: 0 0 17px; color: #f2f7f8; }.case-picker-heading span { font-size: 23px; font-weight: 900; letter-spacing: -.04em; }.case-picker-heading small { color: #91a4ae; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.case-picker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.case-catalog-group + .case-catalog-group { margin-top: 34px; }.case-catalog-group > header { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }.case-catalog-group > header h2 { margin: 0; color: #f1f7fa; font-size: 18px; letter-spacing: -.02em; }.case-catalog-group > header span { color: #8499a5; font-size: 8px; font-weight: 700; letter-spacing: .12em; }.case-picker-copy em { display: block; margin-top: 5px; color: var(--case-accent, #69e7ff); font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.limited-counter { display: inline-block; margin-top: 8px; padding: 5px 9px; border: 1px solid rgba(255,94,190,.55); border-radius: 999px; background: rgba(153,37,111,.25); color: #ff9cdb; font-size: 10px; letter-spacing: .05em; }
.cases-page { min-height: 100vh; }.cases-catalog { max-width: 1120px; margin: 0 auto; padding: 24px 0 50px; }.catalog-heading { margin: 42px 22px 24px; text-align: center; }.catalog-heading h1 { margin: 10px 0 8px; color: #f4fbff; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.05em; }.catalog-heading p { margin: 0 auto; max-width: 560px; color: #8fa5b2; font-size: 13px; line-height: 1.6; }.case-picker-catalog { margin-top: 0; border-radius: 16px; }
.inventory-shell { max-width: 1120px; margin: 0 auto; padding: 24px 0 60px; }.inventory-empty { display: grid; justify-items: center; gap: 12px; margin: 30px 22px; padding: 70px 20px; border: 1px solid rgba(107,224,255,.2); border-radius: 18px; background: rgba(9,19,29,.82); color: #dcebf4; text-align: center; }.inventory-empty span { color: #8da4b2; font-size: 12px; }.inventory-empty .game-open-button { margin: 10px 0 0; }
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 22px; }.inventory-item { display: grid; justify-items: center; gap: 7px; min-width: 0; padding: 18px 10px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: linear-gradient(180deg, rgba(37,49,57,.9), rgba(9,17,24,.96)); text-align: center; }.inventory-item .item-icon { width: 72px; height: 72px; margin-bottom: 5px; }.inventory-item b { overflow: hidden; width: 100%; color: #eef8fb; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.inventory-item small { color: #8bffca; font-size: 9px; }.inventory-item button { width: 100%; padding: 8px 5px; border: 1px solid rgba(98,225,176,.5); border-radius: 7px; background: rgba(42,181,130,.16); color: #8bffca; font-size: 9px; font-weight: 800; cursor: pointer; }.inventory-item button:hover { background: rgba(42,181,130,.3); }.inventory-item button:disabled { opacity: .5; cursor: wait; }
.inventory-history { margin: 34px 22px 0; padding: 22px; border: 1px solid rgba(148,163,184,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(16,29,43,.86), rgba(7,14,23,.9)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.18); }
.inventory-history-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.inventory-history-heading .section-kicker { display: block; margin-bottom: 5px; color: #54ddff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.inventory-history-heading h2 { margin: 0; color: #f4f8fc; font-size: 20px; }
.inventory-history-count { padding: 6px 10px; border: 1px solid rgba(0,210,255,.2); border-radius: 999px; color: #8aa4b9; background: rgba(0,210,255,.07); font-size: 10px; font-weight: 800; }
.inventory-history-list { display: grid; gap: 8px; }
.inventory-history-entry { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.1); border-radius: 12px; background: rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.inventory-history-entry:hover { transform: translateX(3px); border-color: rgba(0,210,255,.28); background: rgba(0,210,255,.06); }
.inventory-history-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #ff8190; background: rgba(255,63,92,.12); }
.inventory-history-entry.is-open .inventory-history-icon { color: #65e7ff; background: rgba(0,210,255,.12); }
.inventory-history-copy { display: grid; min-width: 0; gap: 3px; }
.inventory-history-copy strong { color: #eaf4fb; font-size: 11px; }
.inventory-history-copy span { overflow: hidden; color: #8ea4b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-history-value { display: grid; justify-items: end; gap: 3px; }
.inventory-history-value b { color: #ff8d9c; font-size: 12px; white-space: nowrap; }
.inventory-history-entry.is-open .inventory-history-value b { color: #65e7ff; }
.inventory-history-value small { color: #62788d; font-size: 9px; white-space: nowrap; }
.inventory-history-link { display: flex; align-items: center; gap: 13px; margin: 28px 22px 0; padding: 14px 16px; border: 1px solid rgba(0,210,255,.2); border-radius: 13px; color: #65e7ff; background: linear-gradient(100deg, rgba(0,210,255,.1), rgba(0,114,255,.06)); text-decoration: none; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.inventory-history-link:hover { transform: translateY(-2px); border-color: rgba(0,210,255,.55); background: rgba(0,210,255,.14); }
.inventory-history-link > i:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(0,210,255,.13); }
.inventory-history-link span { display: grid; flex: 1; gap: 3px; }
.inventory-history-link strong { color: #eaf7ff; font-size: 11px; }
.inventory-history-link small { color: #8ca6ba; font-size: 9px; }
.inventory-history-link > i:last-child { color: #7995aa; }
.history-page-panel { max-width: 860px; margin: 0 auto; }
.inventory-item { position: relative; overflow: hidden; }.inventory-item::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: #55d98b; content: ""; }.inventory-item.rarity-rare::after { background: #35d6ff; }.inventory-item.rarity-epic::after { background: #b63cff; }.inventory-item.rarity-red::after { background: #ff3f5c; }.inventory-item.rarity-legendary::after { background: #ffb52e; }.inventory-item em { color: #55d98b; font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }.inventory-item.rarity-rare em { color: #35d6ff; }.inventory-item.rarity-epic em { color: #d26bff; }.inventory-item.rarity-red em { color: #ff5d73; }.inventory-item.rarity-legendary em { color: #ffbd42; }
.inventory-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 22px 22px; }
.inventory-summary > div { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 15px; border: 1px solid rgba(73,201,255,.18); border-radius: 14px; background: linear-gradient(135deg, rgba(16,43,61,.82), rgba(8,17,28,.9)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 25px rgba(0,0,0,.14); }
.inventory-summary > div > i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: rgba(0,210,255,.12); color: #65ddff; }
.inventory-summary span { display: grid; gap: 3px; min-width: 0; }
.inventory-summary b { overflow: hidden; color: #f0f8ff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-summary small { color: #87a2b5; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.inventory-filters { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(135px, 1fr) minmax(150px, 1fr) auto; align-items: center; gap: 9px; margin: 0 22px 22px; padding: 12px; border: 1px solid rgba(95,169,204,.16); border-radius: 15px; background: rgba(8,18,29,.74); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.inventory-filters input, .inventory-filters select { min-width: 0; height: 40px; padding: 0 12px; border: 1px solid rgba(120,164,190,.24); border-radius: 9px; background-color: #0b1724; color: #dcecf5; outline: none; }
.inventory-filters select { padding-right: 34px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #72dfff 50%), linear-gradient(135deg, #72dfff 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; cursor: pointer; }
.inventory-filters select option { background: #101d2c; color: #eaf7ff; }
.inventory-custom-select { position: relative; min-width: 0; }
.inventory-custom-select > button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 12px; border: 1px solid rgba(120,164,190,.24); border-radius: 9px; background: #0b1724; color: #dcecf5; font: inherit; text-align: left; cursor: pointer; }
.inventory-custom-select > button::after { width: 7px; height: 7px; border-right: 1px solid #72dfff; border-bottom: 1px solid #72dfff; content: ""; transform: rotate(45deg) translateY(-2px); }
.inventory-custom-select.is-open > button, .inventory-custom-select > button:focus { border-color: #3bcaff; box-shadow: 0 0 0 3px rgba(59,202,255,.1); outline: none; }
.inventory-custom-options { position: absolute; top: calc(100% + 5px); right: 0; left: 0; z-index: 20; display: grid; visibility: hidden; max-height: 0; padding: 5px; border: 1px solid rgba(82,211,255,.42); border-radius: 10px; background: #101d2c; box-shadow: 0 14px 30px rgba(0,0,0,.5); opacity: 0; overflow: hidden; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .16s ease, transform .16s ease, max-height .2s ease, visibility .2s; }
.inventory-custom-select.is-open .inventory-custom-options { visibility: visible; max-height: 260px; opacity: 1; transform: translateY(0) scale(1); }
.inventory-custom-options button { width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #dcecf5; font: inherit; text-align: left; cursor: pointer; }
.inventory-custom-options button:hover, .inventory-custom-options button.is-selected { background: #1764bf; color: #fff; }
.inventory-filters input:focus, .inventory-filters select:focus { border-color: #3bcaff; box-shadow: 0 0 0 3px rgba(59,202,255,.1); }
.inventory-filters .game-open-button { min-height: 40px; margin: 0; padding: 0 18px; }
.inventory-bulk-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 22px 14px; padding: 11px 13px; border: 1px solid rgba(76,218,174,.16); border-radius: 12px; background: rgba(8,29,29,.45); }
.inventory-bulk-actions .game-open-button { min-height: 38px; margin: 0; }
#inventory-selection-status { color: #8bffca; font-size: 10px; font-weight: 700; }
.inventory-select { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(112,210,244,.42); border-radius: 7px; background: rgba(4,12,20,.82); box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer; }
.inventory-select input { position: absolute; width: 1px; height: 1px; opacity: 0; cursor: pointer; }
.inventory-select::after { width: 8px; height: 4px; border-bottom: 2px solid #06131d; border-left: 2px solid #06131d; opacity: 0; content: ""; transform: translateY(-1px) rotate(-45deg); }
.inventory-select:has(input:checked) { border-color: #52e2ff; background: #52e2ff; box-shadow: 0 0 0 3px rgba(82,226,255,.14), 0 0 16px rgba(82,226,255,.42); }
.inventory-select:has(input:checked)::after { opacity: 1; }
.inventory-select:focus-within { outline: 2px solid rgba(82,226,255,.7); outline-offset: 2px; }
.inventory-item:has(.inventory-select input:checked) { border-color: #52e2ff; box-shadow: 0 0 0 1px rgba(82,226,255,.35), 0 15px 30px rgba(0,0,0,.3), 0 0 24px rgba(0,210,255,.18); }
.inventory-item:hover { transform: translateY(-4px); border-color: rgba(93,219,255,.6); box-shadow: 0 15px 30px rgba(0,0,0,.3), 0 0 20px rgba(0,210,255,.1); }
.inventory-item { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.inventory-item { animation: inventory-card-in .42s cubic-bezier(.2,.75,.25,1) both; }
.inventory-item.is-removing { opacity: 0; transform: scale(.9) translateY(10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.inventory-item > small:last-of-type { color: #8bffca; font-size: 12px; font-weight: 900; }
@keyframes inventory-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.case-picker-card { position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: linear-gradient(180deg, rgba(91,105,111,.58), rgba(16,26,32,.98) 68%); color: #dceaf3; text-decoration: none; box-shadow: 0 8px 16px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12); transition: border-color .25s ease, transform .25s ease, filter .25s ease, box-shadow .25s ease; }
.case-picker-card:hover { z-index: 2; transform: translateY(-6px) scale(1.015); border-color: var(--case-accent, #69e7ff); filter: brightness(1.12); box-shadow: 0 16px 28px rgba(0,0,0,.42), 0 0 24px color-mix(in srgb, var(--case-accent, #69e7ff) 28%, transparent); }
.case-picker-card.is-active { border-color: var(--case-accent, #69e7ff); box-shadow: 0 0 0 1px var(--case-accent, #69e7ff), 0 0 22px color-mix(in srgb, var(--case-accent, #69e7ff) 38%, transparent); }
.case-card-badge { position: absolute; top: 0; left: 0; z-index: 2; padding: 4px 7px; background: var(--case-accent, #39d7ff); color: #07151c; font-size: 8px; font-weight: 900; }
.case-picker-image { position: relative; display: grid; min-height: 140px; place-items: center; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--case-accent, #69e7ff) 38%, transparent), transparent 59%), linear-gradient(145deg, rgba(255,255,255,.13), rgba(10,17,23,.3)); }
.case-picker-image::before { position: absolute; width: 70%; height: 58%; border: 3px solid color-mix(in srgb, var(--case-accent, #69e7ff) 65%, #18242b); border-radius: 10px 10px 13px 13px; background: linear-gradient(90deg, transparent 0 18%, color-mix(in srgb, var(--case-accent, #69e7ff) 70%, #27343b) 18% 24%, transparent 24% 76%, color-mix(in srgb, var(--case-accent, #69e7ff) 70%, #27343b) 76% 82%, transparent 82%), linear-gradient(180deg, color-mix(in srgb, var(--case-accent, #69e7ff) 60%, #849197), color-mix(in srgb, var(--case-accent, #69e7ff) 35%, #151e24)); box-shadow: inset 0 9px 0 rgba(255,255,255,.18), inset 0 -12px 0 rgba(0,0,0,.25), 0 15px 18px rgba(0,0,0,.55), 0 0 24px color-mix(in srgb, var(--case-accent, #69e7ff) 35%, transparent); content: ""; filter: drop-shadow(0 12px 12px rgba(0,0,0,.55)); transition: transform .25s ease; }
.case-picker-image::after { position: absolute; top: 30%; width: 70%; height: 20%; border: 3px solid color-mix(in srgb, var(--case-accent, #69e7ff) 70%, #18242b); border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--case-accent, #69e7ff) 70%, #9aa4a6), color-mix(in srgb, var(--case-accent, #69e7ff) 40%, #202b31)); box-shadow: inset 0 5px 0 rgba(255,255,255,.18); content: ""; transform: translateY(-35%); }
.case-picker-image.has-custom-image { background-position: center; background-size: cover; background-repeat: no-repeat; }
.case-picker-image.has-custom-image::before, .case-picker-image.has-custom-image::after, .case-picker-image.has-custom-image .case-picker-icon { display: none; }
.case-picker-card:hover .case-picker-image::before { transform: scale(1.08) rotate(-1deg); }
.case-picker-card > strong .limited-stock { display: block; margin-top: 3px; color: #ff9cdb; font-size: 8px; font-weight: 700; }
.case-picker-icon { position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--case-accent, #39d7ff) 78%, #08121a); color: #06131e; opacity: .8; }
.case-picker-copy { display: block; padding: 10px 11px 0; }.case-picker-card b, .case-picker-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.case-picker-card b { color: #f0f4f4; font-size: 12px; font-weight: 800; }.case-picker-card small { margin-top: 4px; color: #a3b0b5; font-size: 8px; }.case-picker-card > strong { display: block; padding: 8px 11px 12px; color: var(--case-accent, #f6f9f8); font-size: 14px; white-space: nowrap; text-shadow: 0 0 12px color-mix(in srgb, var(--case-accent, #69e7ff) 45%, transparent); }
.case-theme-starter { --case-accent: #55d98b; --case-hue: 80deg; }.case-theme-crimson { --case-accent: #ff6b7f; --case-hue: 310deg; }.case-theme-nether { --case-accent: #ff9b43; --case-hue: 15deg; }.case-theme-legendary { --case-accent: #d9a7ff; --case-hue: 245deg; }.case-theme-ocean { --case-accent: #4bd9ff; --case-hue: 165deg; }.case-theme-end { --case-accent: #bc82ff; --case-hue: 260deg; }.case-theme-mythic { --case-accent: #ff4fd8; --case-hue: 290deg; }.case-theme-jackpot { --case-accent: #ffd45c; --case-hue: 35deg; }.case-theme-forest { --case-accent: #7be36e; --case-hue: 92deg; }.case-theme-frost { --case-accent: #9beaff; --case-hue: 175deg; }.case-theme-tech { --case-accent: #00f0ff; --case-hue: 195deg; }.case-theme-ancient { --case-accent: #e8b45b; --case-hue: 25deg; }.case-theme-limited-red { --case-accent: #ff557d; --case-hue: 320deg; }.case-theme-limited-gold { --case-accent: #ffd45c; --case-hue: 30deg; }.case-theme-limited-void { --case-accent: #a872ff; --case-hue: 260deg; }.case-theme-desert { --case-accent: #f2c166; --case-hue: 35deg; }.case-theme-redstone { --case-accent: #ff4f62; --case-hue: 350deg; }.case-theme-sky { --case-accent: #73d9ff; --case-hue: 190deg; }.case-theme-swamp { --case-accent: #a2e35f; --case-hue: 95deg; }.case-theme-pirate { --case-accent: #d6a34a; --case-hue: 45deg; }.case-theme-minion { --case-accent: #ffd84d; --case-hue: 52deg; }.case-theme-input-lag { --case-accent: #57d9ff; --case-hue: 195deg; }.case-theme-rainy-evening { --case-accent: #7da7d9; --case-hue: 215deg; }.case-theme-spider { --case-accent: #e45c82; --case-hue: 335deg; }.case-theme-whisper-autumn { --case-accent: #e5a15a; --case-hue: 28deg; }.case-theme-burgundy { --case-accent: #b84d69; --case-hue: 345deg; }.case-theme-gta-vi { --case-accent: #ff6f9c; --case-hue: 325deg; }.case-theme-six-seven { --case-accent: #b58cff; --case-hue: 265deg; }.case-theme-golden-hour { --case-accent: #ffd15c; --case-hue: 42deg; }.case-theme-midnight-signal { --case-accent: #727cff; --case-hue: 245deg; }.case-theme-neon-static { --case-accent: #48f1d0; --case-hue: 170deg; }
.game-feed.case-theme-starter .case-hero-glow { background: rgba(61,220,140,.3); }.game-feed.case-theme-nether .case-hero-glow { background: rgba(255,101,40,.34); }.game-feed.case-theme-legendary .case-hero-glow { background: rgba(184,104,255,.38); }
.game-feed.case-theme-ocean .case-hero-glow { background: rgba(38,190,255,.34); }.game-feed.case-theme-end .case-hero-glow { background: rgba(169,91,255,.34); }.game-feed.case-theme-mythic .case-hero-glow { background: rgba(255,59,202,.38); }.game-feed.case-theme-jackpot .case-hero-glow { background: rgba(255,190,43,.42); }
.game-feed.case-theme-starter .game-open-button { border-color: rgba(85,217,139,.6); background: linear-gradient(135deg, rgba(40,196,125,.32), rgba(20,111,79,.35)); }
.game-feed.case-theme-nether .game-open-button { border-color: rgba(255,155,67,.65); background: linear-gradient(135deg, rgba(255,110,38,.34), rgba(129,45,16,.4)); }
.game-feed.case-theme-legendary .game-open-button { border-color: rgba(217,167,255,.65); background: linear-gradient(135deg, rgba(148,82,255,.34), rgba(65,30,120,.42)); }
.game-feed.case-theme-ocean .game-open-button { border-color: rgba(75,217,255,.65); background: linear-gradient(135deg, rgba(24,177,225,.34), rgba(17,80,130,.42)); }.game-feed.case-theme-end .game-open-button { border-color: rgba(188,130,255,.65); background: linear-gradient(135deg, rgba(133,71,235,.34), rgba(58,31,111,.42)); }.game-feed.case-theme-mythic .game-open-button { border-color: rgba(255,79,216,.65); background: linear-gradient(135deg, rgba(220,51,174,.34), rgba(91,25,84,.42)); }.game-feed.case-theme-jackpot .game-open-button { border-color: rgba(255,212,92,.8); background: linear-gradient(135deg, rgba(222,153,28,.4), rgba(107,61,11,.46)); }
.item-icon { display: block; width: 38px; height: 38px; margin: 0 auto 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: #222b2f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 10px #000; transform: rotate(-2deg); }
.item-ore { background: url('minecraft/deepslate.png') center / cover; }.item-blue { background: url('minecraft/diamond_block.png') center / cover; }.item-stone { background: url('minecraft/basalt.png') center / cover; }.item-dark { background: url('minecraft/deepslate.png') center / cover; }.item-sand { background: url('minecraft/sand.png') center / cover; }.item-dirt { background: url('minecraft/dirt.png') center / cover; }.item-wood { background: url('minecraft/birch_planks.png') center / cover; }.item-cobble { background: url('minecraft/cobblestone.png') center / cover; }
.item-icon.item-diamond, .item-diamond { background: url('minecraft/item-diamond.png') center / cover; }.item-icon.item-emerald, .item-emerald { background: url('minecraft/item-emerald.png') center / cover; }.item-icon.item-gold, .item-gold { background: url('minecraft/item-gold-ingot.png') center / cover; }.item-icon.item-iron, .item-iron { background: url('minecraft/item-iron-ingot.png') center / cover; }.item-icon.item-netherite, .item-netherite { background: url('minecraft/item-netherite-ingot.png') center / cover; }.item-icon.item-apple, .item-apple { background: url('minecraft/item-apple.png') center / cover; }.item-icon.item-pearl, .item-pearl { background: url('minecraft/item-ender-pearl.png') center / cover; }.item-icon.item-amethyst, .item-amethyst { background: url('minecraft/item-amethyst.png') center / cover; }.item-icon.item-blaze, .item-blaze { background: url('minecraft/item-blaze-rod.png') center / cover; }
.item-icon[style*="--reward-image"] { background-image: var(--reward-image) !important; background-position: center; background-repeat: no-repeat; background-size: contain; }
.item-icon.item-ore, .item-ore { background: url('minecraft/deepslate.png') center / cover; }.item-icon.item-blue, .item-blue { background: url('minecraft/diamond_block.png') center / cover; }.item-icon.item-stone, .item-stone { background: url('minecraft/basalt.png') center / cover; }.item-icon.item-dark, .item-dark { background: url('minecraft/deepslate.png') center / cover; }.item-icon.item-sand, .item-sand { background: url('minecraft/sand.png') center / cover; }.item-icon.item-dirt, .item-dirt { background: url('minecraft/dirt.png') center / cover; }.item-icon.item-wood, .item-wood { background: url('minecraft/birch_planks.png') center / cover; }.item-icon.item-cobble, .item-cobble { background: url('minecraft/cobblestone.png') center / cover; }
.item-blaze { background: url('minecraft/item-blaze-rod.png') center / cover; }
/* CS2 rewards use remote artwork because they are not Minecraft sprite assets. */
.item-icon[class*="item-cs2-"] {
    background-color: #18232d;
    background-image: linear-gradient(145deg, rgba(17, 31, 45, .18), rgba(5, 10, 17, .72)), url('/assets/game-items/cs2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.item-icon[class*="item-cs2-"][class*="knife"],
.item-icon[class*="item-cs2-"][class*="glove"],
.item-icon[class*="item-cs2-"][class*="butterfly"],
.item-icon[class*="item-cs2-"][class*="karambit"],
.item-icon[class*="item-cs2-"][class*="bayonet"],
.item-icon[class*="item-cs2-"][class*="m9"],
.item-icon[class*="item-cs2-"][class*="daggers"] {
    background-image: linear-gradient(145deg, rgba(79, 35, 18, .08), rgba(18, 7, 4, .65)), url('/assets/game-items/cs2-rare.jpg');
}
.item-icon[class*="item-cs2-"][class*="ak"],
.item-icon[class*="item-cs2-"][class*="m4"],
.item-icon[class*="item-cs2-"][class*="awp"],
.item-icon[class*="item-cs2-"][class*="usp"],
.item-icon[class*="item-cs2-"][class*="glock"] {
    background-image: linear-gradient(145deg, rgba(33, 72, 91, .08), rgba(6, 18, 25, .65)), url('/assets/game-items/cs2.jpg');
}
/* Keep every non-Minecraft reward visible when a remote image is unavailable. */
.item-icon[class*="item-cs2-"],
.item-icon[class*="item-rust-"],
.item-icon[class*="item-dota-"] {
    background-image:
        linear-gradient(145deg, rgba(22, 56, 76, .18), rgba(4, 10, 16, .7)),
        url('/assets/game-items/cs2.jpg'),
        url('minecraft/diamond_block.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.item-icon[class*="item-rust-"] {
    background-image:
        linear-gradient(145deg, rgba(67, 48, 24, .18), rgba(16, 9, 4, .72)),
        url('/assets/game-items/rust.jpg'),
        url('minecraft/item-iron-ingot.png');
}
.item-icon[class*="item-dota-"] {
    background-image:
        linear-gradient(145deg, rgba(93, 35, 95, .18), rgba(15, 5, 20, .72)),
        url('/assets/game-items/dota.jpg'),
        url('minecraft/item-amethyst.png');
}
.game-feed.is-open .game-chest-large { filter: drop-shadow(0 0 24px rgba(105,238,255,.8)); }
.game-case-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; color: #7891a8; font-size: 11px; font-weight: 700; }
.game-case-footer i { margin-right: 5px; color: #4ddcff; }
@keyframes chest-charge { from { transform: scale(.9) translateY(0); } to { transform: scale(.98) translateY(-5px); } }
@keyframes chest-glow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes chest-open-shake { 0%,100% { transform: scale(.94) rotate(0); } 25% { transform: scale(.96) rotate(-1.5deg); } 75% { transform: scale(.96) rotate(1.5deg); } }
@keyframes chest-lid-rattle { 0%,100% { transform: rotateX(0) rotateZ(0); } 25% { transform: rotateX(-8deg) rotateZ(-1deg); } 75% { transform: rotateX(3deg) rotateZ(1deg); } }
@keyframes game-energy-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes game-flash { 0%,58% { opacity: .2; } 65% { opacity: .95; } 76%,100% { opacity: 0; } }
@keyframes winning-item { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.06); } }
@keyframes case-idle { 0%,100% { transform: scale(1.45) translateY(0) rotate(0); filter: drop-shadow(0 0 12px rgba(255,168,50,.28)); } 50% { transform: scale(1.47) translateY(-8px) rotate(-1deg); filter: drop-shadow(0 0 28px rgba(255,190,70,.62)); } }
@keyframes roulette-loop { from { transform: translateX(0); } to { transform: translateX(-420px); } }
@media (max-width: 900px) { .case-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .inventory-grid { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } }
@media (max-width: 600px) {
    .game-roulette-track { gap: 6px; transition-duration: 20.5s; }
    .game-feed.is-opening .game-chest-large { animation-duration: .8s; }
    .game-feed.is-opening .game-chest-large .minecraft-chest-lid { animation-duration: .8s; }
}
@media (max-width: 700px) { .game-feed { min-height: 640px; padding-bottom: 28px; border-radius: 18px; }.game-backdrop { height: 350px; }.case-hero { height: 280px; }.case-hero .game-chest-large { transform: scale(1.2); }.case-picker { padding: 16px 10px 20px; }.case-picker-heading { display: block; }.case-picker-heading small { display: block; margin-top: 4px; }.case-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.case-picker-image { min-height: 100px; }.game-items { gap: 3px; padding: 0 10px; }.game-items small { font-size: 7px; }.game-title strong { font-size: 30px; } }
@media (max-width: 700px) { .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 12px; } .inventory-history { margin: 28px 12px 0; padding: 15px; } .inventory-history-entry { grid-template-columns: 32px minmax(0,1fr); gap: 9px; padding: 10px; } .inventory-history-value { grid-column: 2; justify-items: start; } .inventory-history-heading { align-items: start; flex-direction: column; gap: 8px; } }

/* ===== assets/purple-theme.css ===== */
/*
 * Unified purple visual language.
 * Loaded after page-specific styles so every public page shares the same
 * surfaces, controls and navigation without changing page behavior.
 */
:root {
    --bg-app: #09070d;
    --bg-sidebar: #15131a;
    --bg-card: #1b1821;
    --bg-raised: #24172d;
    --bg-surface-primary: #0d0b11;
    --bg-surface-secondary: #17141c;
    --bg-surface-hover: #241d2b;
    --color-accent: #a855f7;
    --color-accent-rgb: 168, 85, 247;
    --color-accent-2: #6d28d9;
    --accent-cyan: #c084fc;
    --accent-blue: #7c3aed;
    --accent-purple: #a855f7;
    --nav-cyan: #d946ef;
    --accent-gradient: linear-gradient(135deg, #c026ff 0%, #7c3aed 52%, #45145e 100%);
    --accent-glow: 0 0 24px rgba(168, 85, 247, .38);
    --accent-glow-strong: 0 0 44px rgba(168, 85, 247, .65);
    --text-primary: #faf5ff;
    --text-secondary: #b9a6d1;
    --text-tertiary: #806a9a;
    --line: rgba(216, 180, 254, .14);
    --border-subtle: rgba(216, 180, 254, .09);
    --border-medium: rgba(216, 180, 254, .18);
    --border-accent: rgba(192, 132, 252, .42);
    --focus: 0 0 0 3px rgba(168, 85, 247, .28);
}

html { background: #09070d; }

body.app-shell {
    background:
        radial-gradient(800px 520px at 78% -8%, rgba(168, 85, 247, .19), transparent 68%),
        radial-gradient(650px 460px at 12% 72%, rgba(76, 29, 149, .18), transparent 72%),
        #09070d !important;
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body.app-shell::before {
    background-image: radial-gradient(rgba(216, 180, 254, .22) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .12;
}

body.app-shell .app-frame {
    max-width: none;
    gap: 0;
    padding: 0;
}

body.app-shell .app-sidebar {
    border: 0;
    border-right: 1px solid rgba(216, 180, 254, .12);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(112, 35, 173, .22), transparent 30%),
        rgba(20, 17, 27, .96);
    box-shadow: 12px 0 40px rgba(4, 0, 15, .18), inset 0 1px rgba(255,255,255,.03);
    backdrop-filter: blur(22px);
}

body.app-shell .app-brand {
    margin: 0 10px 18px;
    padding: 8px 6px 18px;
    border-bottom: 1px solid rgba(216, 180, 254, .12);
}

body.app-shell .app-brand-mark {
    border-radius: 13px;
    color: #fff;
    background: var(--accent-gradient);
    box-shadow: 0 0 24px rgba(168, 85, 247, .55);
}

body.app-shell .app-brand small,
body.app-shell .app-nav-kicker,
body.app-shell .app-sidebar-label,
body.app-shell .app-nav-group-label {
    color: #9d80ba;
}

body.app-shell .app-nav {
    gap: 5px;
}

body.app-shell .app-nav li a {
    min-height: 42px;
    border-radius: 11px;
    color: #c6afd9;
}

body.app-shell .app-nav li a i { color: #c084fc; }

body.app-shell .app-nav li a:hover {
    border-color: rgba(192, 132, 252, .24);
    background: rgba(168, 85, 247, .12);
    color: #fff;
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(216, 180, 254, .28);
    background: linear-gradient(100deg, rgba(168, 85, 247, .3), rgba(76, 29, 149, .18));
    box-shadow: inset 3px 0 #c026ff, 0 8px 24px rgba(88, 28, 135, .18);
    color: #fff;
}

body.app-shell .app-nav li.active a i,
body.app-shell .app-nav-active-dot { color: #e9d5ff; }
body.app-shell .app-nav-active-dot {
    background: #d946ef;
    box-shadow: 0 0 12px #d946ef;
}

body.app-shell .app-topbar {
    border: 1px solid rgba(216, 180, 254, .14);
    border-radius: 16px;
    background: rgba(20, 8, 42, .72);
    box-shadow: 0 16px 42px rgba(4, 0, 15, .2);
    backdrop-filter: blur(20px);
}

body.app-shell .public-topbar-context span { color: #a78bba; }
body.app-shell .public-topbar-context strong { color: #faf5ff; }

body.app-shell .nav-actions > a,
body.app-shell .nav-actions > button,
body.app-shell .nav-actions .profile-menu-toggle {
    border-color: rgba(216, 180, 254, .18);
    border-radius: 10px;
    background: rgba(49, 20, 78, .65);
    color: #f3e8ff;
}

body.app-shell .nav-actions > a:hover,
body.app-shell .nav-actions > button:hover,
body.app-shell .nav-actions .profile-menu-toggle:hover {
    border-color: rgba(216, 180, 254, .48);
    background: rgba(168, 85, 247, .2);
}

body.app-shell .app-content {
    background:
        radial-gradient(760px 420px at 70% 0, rgba(168, 85, 247, .1), transparent 70%),
        transparent;
}

body.home-dashboard-page .hero-section > div.container:not(.hostinger-dashboard),
body.home-dashboard-page .stats-section,
body.home-dashboard-page .main-content,
body.home-dashboard-page .content-banners {
    display: none !important;
}

body.app-shell .hostinger-dashboard {
    display: grid;
    gap: 18px;
    max-width: 900px;
    padding-top: clamp(35px, 5vw, 72px);
    padding-bottom: 40px;
}

body.app-shell .hostinger-dashboard-heading {
    text-align: center;
}

body.app-shell .hostinger-dashboard-heading h1 {
    margin: 8px 0 8px;
    font-size: clamp(24px, 2.8vw, 34px);
    letter-spacing: -.045em;
}

body.app-shell .hostinger-dashboard-heading p {
    margin: 0;
    color: #a994bd;
    font-size: 13px;
}

body.app-shell .hostinger-eyebrow {
    color: #d946ef;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.app-shell .hostinger-ai-card {
    max-width: 650px;
    width: 100%;
    margin: 4px auto 10px;
    padding: 12px;
    border: 1px solid rgba(192, 132, 252, .4);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(38, 13, 54, .88), rgba(14, 10, 18, .96));
    box-shadow: 0 0 0 1px rgba(217, 70, 239, .08), 0 20px 55px rgba(75, 20, 110, .3), 0 0 38px rgba(168, 85, 247, .18);
}

body.app-shell .hostinger-ai-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 10px 0 15px;
    border: 1px solid rgba(216, 180, 254, .18);
    border-radius: 12px;
    background: rgba(10, 3, 24, .72);
    color: #a994bd;
    font-size: 12px;
}

body.app-shell .hostinger-ai-input > i { color: #d946ef; }

body.app-shell .hostinger-ai-input button {
    display: grid;
    width: 30px;
    height: 30px;
    margin-left: auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    cursor: pointer;
}

body.app-shell .hostinger-ai-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    padding: 12px 3px 2px;
}

body.app-shell .hostinger-ai-actions a,
body.app-shell .hostinger-business-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(216, 180, 254, .16);
    border-radius: 8px;
    background: rgba(168, 85, 247, .12);
    color: #e9d5ff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

body.app-shell .hostinger-ai-actions a:hover {
    border-color: rgba(216, 180, 254, .42);
    background: rgba(168, 85, 247, .24);
}

body.app-shell .hostinger-business-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    max-width: 900px;
    width: 100%;
    margin: 2px auto 0;
}

body.app-shell .hostinger-business-head h2 {
    margin: 4px 0 0;
    font-size: 19px;
}

body.app-shell .hostinger-business-head > a {
    color: #d8b4fe;
    font-size: 11px;
    font-weight: 800;
}

body.app-shell .hostinger-business-list {
    display: grid;
    gap: 8px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

body.app-shell .hostinger-business-card {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto auto;
    align-items: center;
    gap: 13px;
    min-height: 66px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 180, 254, .24);
    border-radius: 13px;
    background: linear-gradient(100deg, rgba(34, 22, 39, .94), rgba(20, 17, 25, .96));
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

body.app-shell .hostinger-business-card:hover {
    border-color: rgba(217, 70, 239, .62);
    transform: translateY(-1px);
}

body.app-shell .hostinger-business-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(216, 180, 254, .2);
    border-radius: 9px;
    background: rgba(168, 85, 247, .18);
    color: #d8b4fe;
}

body.app-shell .hostinger-business-copy {
    display: grid;
    gap: 4px;
}

body.app-shell .hostinger-business-copy strong { color: #faf5ff; font-size: 12px; }
body.app-shell .hostinger-business-copy small { color: #9d80ba; font-size: 9px; }
body.app-shell .hostinger-business-copy small i { color: #4ade80; }

body.app-shell .hostinger-business-tags {
    display: flex;
    gap: 5px;
}

body.app-shell .hostinger-business-tags span {
    padding: 5px 7px;
    color: #bda7d2;
    font-size: 8px;
}

body.app-shell .hostinger-business-button {
    padding: 9px 13px;
    border-radius: 8px;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 700px) {
    body.app-shell .hostinger-business-card {
        grid-template-columns: auto 1fr auto;
    }

    @media (min-width: 900px) and (max-width: 1100px) {
        body.app-shell .app-frame {
            grid-template-columns: 240px minmax(0, 1fr);
            padding: 12px;
        }

        @media (min-width: 900px) {
            body.app-shell .app-frame {
                grid-template-columns: clamp(145px, 14vw, 192px) minmax(0, 1fr) !important;
                width: 100% !important;
                max-width: none !important;
                gap: 0 !important;
                padding: 0 !important;
            }
            body.app-shell .app-sidebar {
                position: relative !important;
                inset: auto !important;
                width: auto !important;
                min-width: 0 !important;
                height: 100vh !important;
                transform: none !important;
                visibility: visible !important;
                display: flex !important;
            }
            body.app-shell .app-brand {
                margin: 0 8px 14px;
                padding: 14px 4px;
            }
            body.app-shell .app-brand-copy strong { font-size: 12px; }
            body.app-shell .app-brand-copy small { font-size: 8px; }
            body.app-shell .app-nav { gap: 1px; }
            body.app-shell .app-nav li a {
                min-height: 34px;
                padding: 0 8px;
                gap: 8px;
                font-size: 10px;
            }
            body.app-shell .app-nav-group-label,
            body.app-shell .app-nav-kicker,
            body.app-shell .app-nav-count { font-size: 8px; }
            body.app-shell .app-topbar {
                min-height: 54px;
                padding: 10px 18px;
                border: 0;
                border-bottom: 1px solid rgba(216, 180, 254, .12);
                border-radius: 0;
                background: rgba(9, 7, 13, .9);
            }
        }

        body.home-dashboard-page .app-content {
            min-height: 100vh;
            background:
                radial-gradient(640px 420px at 62% 4%, rgba(110, 20, 150, .25), transparent 72%),
                #09070d;
        }

        body.home-dashboard-page .hostinger-dashboard {
            min-height: calc(100vh - 54px);
            box-sizing: border-box;
        }

        /* Storefront reference skin: keep the existing markup and interactions, but
           make every public page use the same compact navy/cyan visual system. */
        :root {
            --bg-app: #080d17;
            --bg-sidebar: #0d1b2b;
            --bg-card: #0d1c2b;
            --bg-raised: #13283b;
            --bg-surface-primary: #0a1421;
            --bg-surface-secondary: #0e1e30;
            --bg-surface-hover: #17324a;
            --color-accent: #00c8ff;
            --color-accent-rgb: 0, 200, 255;
            --color-accent-2: #7275ff;
            --accent-cyan: #00c8ff;
            --accent-blue: #5d83ff;
            --accent-purple: #a855f7;
            --nav-cyan: #00c8ff;
            --accent-gradient: linear-gradient(135deg, #00c8ff 0%, #5d83ff 100%);
            --text-primary: #edf7ff;
            --text-secondary: #8ca4b9;
            --text-tertiary: #587189;
            --line: rgba(116, 170, 207, .16);
            --border-subtle: rgba(116, 170, 207, .12);
            --border-medium: rgba(116, 170, 207, .2);
            --border-accent: rgba(0, 200, 255, .42);
        }

        html { background: #080d17; }

        body.app-shell {
            background:
                radial-gradient(700px 460px at 70% 0, rgba(0, 103, 153, .1), transparent 70%),
                #080d17 !important;
            color: var(--text-primary);
        }

        body.app-shell .app-frame {
            width: min(1500px, calc(100% - 52px)) !important;
            max-width: 1500px !important;
            grid-template-columns: 212px minmax(0, 1fr) !important;
            gap: 24px !important;
            padding: 12px 0 24px !important;
        }

        body.app-shell .app-sidebar {
            position: relative !important;
            inset: auto !important;
            width: 212px !important;
            min-width: 212px !important;
            height: calc(100vh - 24px) !important;
            border: 1px solid rgba(111, 170, 211, .18);
            border-radius: 18px;
            background:
                linear-gradient(180deg, rgba(19, 55, 82, .5), transparent 28%),
                #0c1b2b;
            box-shadow: 0 18px 50px rgba(1, 7, 14, .4), inset 0 1px rgba(255,255,255,.04);
            transform: none !important;
        }

        body.app-shell .app-brand {
            margin: 0 12px 16px;
            padding: 12px 4px 16px;
            border-bottom: 1px solid rgba(116, 170, 207, .14);
        }

        body.app-shell .app-brand-mark {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            background: linear-gradient(135deg, #00c8ff, #5577ff);
            box-shadow: 0 8px 20px rgba(0, 200, 255, .25);
        }

        body.app-shell .app-brand-copy strong { font-size: 14px; }
        body.app-shell .app-brand-copy small { font-size: 9px; color: #7590a5; }
        body.app-shell .app-nav-heading { padding: 0 12px 6px; }
        body.app-shell .app-nav-kicker,
        body.app-shell .app-nav-group-label { color: #7892a8; font-size: 9px; }
        body.app-shell .app-nav { gap: 3px; }
        body.app-shell .app-nav li a {
            min-height: 38px;
            padding: 0 11px;
            border-radius: 10px;
            color: #a7bdce;
            font-size: 11px;
        }
        body.app-shell .app-nav li a i { color: #00bdf2; }
        body.app-shell .app-nav li a:hover {
            border-color: rgba(0, 200, 255, .22);
            background: rgba(0, 200, 255, .08);
        }
        body.app-shell .app-nav li.active a,
        body.app-shell .app-nav a[aria-current="page"] {
            border-color: rgba(0, 200, 255, .62);
            background: linear-gradient(100deg, rgba(0, 200, 255, .16), rgba(76, 70, 229, .12));
            box-shadow: inset 3px 0 #00c8ff, 0 0 18px rgba(0, 200, 255, .15);
        }

        body.app-shell .app-topbar {
            min-height: 54px;
            padding: 10px 16px;
            border: 1px solid rgba(116, 170, 207, .16);
            border-radius: 14px;
            background: rgba(9, 20, 33, .82);
        }

        body.app-shell .app-content {
            min-width: 0;
            background: transparent;
        }

        body.app-shell .app-content > .hero-section,
        body.app-shell .app-content > .container,
        body.app-shell .app-content > .stats-section {
            max-width: 900px;
            margin-right: auto;
            margin-left: auto;
        }

        body.app-shell .hero-section .hero-banner {
            border: 1px solid rgba(0, 200, 255, .24) !important;
            border-radius: 18px;
            background:
                radial-gradient(420px 220px at 85% 10%, rgba(83, 98, 255, .18), transparent 70%),
                linear-gradient(145deg, #10253a, #091522) !important;
            box-shadow: 0 22px 55px rgba(0, 8, 18, .32);
        }

        body.app-shell .stats-section .stats-grid {
            gap: 10px;
        }
        body.app-shell .stats-section .stat-card,
        body.app-shell .app-content .panel,
        body.app-shell .app-content .item-id,
        body.app-shell .app-content .account-card,
        body.app-shell .app-content .orders-panel,
        body.app-shell .app-content .support-app {
            border: 1px solid rgba(116, 170, 207, .2);
            border-radius: 13px;
            background: linear-gradient(145deg, rgba(14, 31, 48, .96), rgba(9, 20, 33, .96));
            box-shadow: inset 0 1px rgba(255,255,255,.03), 0 14px 32px rgba(0, 8, 18, .18);
        }

        body.app-shell .stat-number,
        body.app-shell .section-kicker,
        body.app-shell .catalog-intro .section-kicker { color: #00c8ff; }
        body.app-shell .stat-icon {
            border: 1px solid rgba(0, 200, 255, .24);
            background: rgba(0, 200, 255, .1);
            color: #00c8ff;
        }

        body.app-shell .catalog-intro {
            padding: 22px;
            border: 1px solid rgba(0, 200, 255, .22);
            border-radius: 14px;
            background: linear-gradient(145deg, #10253a, #0a1726);
        }
        body.app-shell .catalog-intro h2,
        body.app-shell .catalog-intro p { color: #edf7ff; }
        body.app-shell .catalog-intro p { color: #8ca4b9; }

        body.app-shell .server-selector-container,
        body.app-shell .shop-toolbar,
        body.app-shell .categories,
        body.app-shell .empty-state {
            border-color: rgba(116, 170, 207, .18);
            border-radius: 13px;
            background: rgba(10, 25, 40, .9);
        }

        body.app-shell .shop-control,
        body.app-shell .app-content input,
        body.app-shell .app-content select,
        body.app-shell .app-content textarea {
            border-color: rgba(116, 170, 207, .22);
            border-radius: 10px;
            background: #081522;
            color: #edf7ff;
        }

        body.app-shell .shop-control:focus-within,
        body.app-shell .app-content input:focus,
        body.app-shell .app-content select:focus,
        body.app-shell .app-content textarea:focus {
            border-color: rgba(0, 200, 255, .7);
            box-shadow: 0 0 0 3px rgba(0, 200, 255, .12);
        }

        body.app-shell .btn,
        body.app-shell .server-btn.active,
        body.app-shell .auth-link-primary {
            border-color: rgba(0, 200, 255, .34);
            border-radius: 10px;
            background: var(--accent-gradient);
            color: #041521;
            box-shadow: 0 8px 22px rgba(0, 150, 255, .18);
        }

        body.app-shell .item-id:hover {
            border-color: rgba(0, 200, 255, .48);
            transform: translateY(-2px);
        }

        body.app-shell .app-sidebar-foot .auth-link,
        body.app-shell .app-sidebar-foot .balance-nav,
        body.app-shell .app-sidebar-foot .public-theme-toggle,
        body.app-shell .app-sidebar-foot .auth-logout,
        body.app-shell .app-sidebar-foot .notification-nav {
            border-color: rgba(116, 170, 207, .18);
            background: rgba(14, 35, 54, .78);
        }

        @media (max-width: 1100px) {
            body.app-shell .app-frame {
                width: calc(100% - 24px) !important;
                grid-template-columns: 212px minmax(0, 1fr) !important;
                gap: 16px !important;
            }
        }

        @media (max-width: 760px) {
            body.app-shell .app-frame { width: 100% !important; padding: 8px !important; }
            body.app-shell .app-sidebar { width: 260px !important; min-width: 260px !important; }
        }

        /* Desktop storefront overrides kept outside legacy media blocks. */
        @media (min-width: 761px) {
            :root {
                --bg-app: #080d17;
                --bg-sidebar: #0d1b2b;
                --bg-card: #0d1c2b;
                --bg-raised: #13283b;
                --color-accent: #00c8ff;
                --color-accent-rgb: 0, 200, 255;
                --color-accent-2: #5d83ff;
                --accent-cyan: #00c8ff;
                --nav-cyan: #00c8ff;
                --text-primary: #edf7ff;
                --text-secondary: #8ca4b9;
                --line: rgba(116, 170, 207, .16);
            }
            body.app-shell {
                background: radial-gradient(700px 460px at 70% 0, rgba(0, 103, 153, .1), transparent 70%), #080d17 !important;
            }
            body.app-shell .app-frame {
                width: min(1500px, calc(100% - 52px)) !important;
                max-width: 1500px !important;
                grid-template-columns: 212px minmax(0, 1fr) !important;
                gap: 24px !important;
                padding: 12px 0 24px !important;
            }
            body.app-shell .app-sidebar {
                position: relative !important;
                inset: auto !important;
                width: 212px !important;
                min-width: 212px !important;
                height: calc(100vh - 24px) !important;
                border: 1px solid rgba(111, 170, 211, .18) !important;
                border-radius: 18px !important;
                background: linear-gradient(180deg, rgba(19, 55, 82, .5), transparent 28%), #0c1b2b !important;
                transform: none !important;
            }
            body.app-shell .app-nav li a {
                min-height: 38px;
                color: #a7bdce;
                font-size: 11px;
            }
            body.app-shell .app-nav li a i { color: #00bdf2; }
            body.app-shell .app-nav li.active a,
            body.app-shell .app-nav a[aria-current="page"] {
                border-color: rgba(0, 200, 255, .62);
                background: linear-gradient(100deg, rgba(0, 200, 255, .16), rgba(76, 70, 229, .12));
                box-shadow: inset 3px 0 #00c8ff, 0 0 18px rgba(0, 200, 255, .15);
            }
            body.app-shell .app-content > .hero-section,
            body.app-shell .app-content > .container,
            body.app-shell .app-content > .stats-section {
                max-width: 900px;
                margin-right: auto;
                margin-left: auto;
            }
        }

        /* Final reference geometry: compact Hostinger-style rail and uninterrupted
           dashboard canvas. These rules intentionally win over legacy shell layers. */
        @media (min-width: 900px) {
            body.app-shell .app-frame {
                grid-template-columns: clamp(145px, 14vw, 192px) minmax(0, 1fr) !important;
                width: 100% !important;
                max-width: none !important;
            }
            body.app-shell .app-sidebar {
                position: relative !important;
                inset: auto !important;
                width: auto !important;
                min-width: 0 !important;
                height: 100vh !important;
                transform: none !important;
                visibility: visible !important;
                display: flex !important;
            }
            body.app-shell .app-brand {
                margin: 0 8px 14px;
                padding: 14px 4px;
            }
            body.app-shell .app-brand-copy strong { font-size: 12px; }
            body.app-shell .app-brand-copy small { font-size: 8px; }
            body.app-shell .online-status b { font-size: 8px; }
            body.app-shell .app-nav { gap: 1px; }
            body.app-shell .app-nav li a {
                min-height: 34px;
                padding: 0 8px;
                gap: 8px;
                font-size: 10px;
            }
            body.app-shell .app-nav-group-label,
            body.app-shell .app-nav-kicker,
            body.app-shell .app-nav-count { font-size: 8px; }
            body.app-shell .app-topbar {
                min-height: 54px;
                padding: 10px 18px;
                border: 0;
                border-bottom: 1px solid rgba(216, 180, 254, .12);
                border-radius: 0;
                background: rgba(9, 7, 13, .9);
            }
        }

        body.home-dashboard-page .app-content {
            min-height: 100vh;
            background:
                radial-gradient(640px 420px at 62% 4%, rgba(110, 20, 150, .25), transparent 72%),
                #09070d;
        }

        body.home-dashboard-page .hostinger-dashboard {
            min-height: calc(100vh - 54px);
            box-sizing: border-box;
        }

        body.home-dashboard-page .hostinger-ai-card::before {
            position: absolute;
            inset: -90px -220px;
            z-index: -1;
            background-image: radial-gradient(rgba(202, 117, 255, .4) 1px, transparent 1px);
            background-size: 28px 28px;
            opacity: .18;
            content: "";
            mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
        }

        body.home-dashboard-page .hostinger-business-card {
            min-height: 70px;
        }

        @media (max-width: 899px) {
            body.home-dashboard-page .hostinger-dashboard {
                padding-right: 18px;
                padding-left: 18px;
            }
        }
        body.app-shell .app-sidebar {
            position: relative;
            inset: auto;
            width: 240px;
            min-width: 240px;
            display: flex !important;
            visibility: visible !important;
            transform: translate3d(0, 0, 0) !important;
        }
        body.app-shell .navbar-mobile { display: none; }
    }
    body.app-shell .hostinger-business-tags { display: none; }
    body.app-shell .hostinger-business-head { align-items: start; flex-direction: column; }
}

body.app-shell .app-content .panel,
body.app-shell .app-content .auth-card,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app,
body.app-shell .app-content .item-id,
body.app-shell .app-content .card {
    border-color: rgba(216, 180, 254, .18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(40, 17, 70, .88), rgba(23, 10, 46, .9));
    box-shadow: 0 18px 44px rgba(4, 0, 15, .28), inset 0 1px rgba(255,255,255,.035);
}

body.app-shell .app-content input,
body.app-shell .app-content select,
body.app-shell .app-content textarea {
    border-color: rgba(216, 180, 254, .2);
    border-radius: 10px;
    background: rgba(12, 4, 27, .72);
    color: #faf5ff;
}

body.app-shell .app-content input:focus,
body.app-shell .app-content select:focus,
body.app-shell .app-content textarea:focus {
    border-color: #c084fc;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .18), 0 0 20px rgba(168, 85, 247, .12);
}

body.app-shell .btn,
body.app-shell button,
body.app-shell .auth-link-primary {
    border-color: rgba(216, 180, 254, .24);
    border-radius: 10px;
}

body.app-shell .btn-primary,
body.app-shell .btn-vk,
body.app-shell .auth-link-primary,
body.app-shell .hero-actions .btn-hero-primary {
    border-color: rgba(233, 213, 255, .3) !important;
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(126, 34, 206, .3), inset 0 1px rgba(255,255,255,.2) !important;
}

body.app-shell .btn-primary:hover,
body.app-shell .btn-vk:hover,
body.app-shell .auth-link-primary:hover,
body.app-shell .hero-actions .btn-hero-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

body.app-shell .hero-section .hero-banner {
    border-color: rgba(216, 180, 254, .25) !important;
    border-radius: 24px;
    background:
        radial-gradient(520px 260px at 88% 15%, rgba(217, 70, 239, .2), transparent 70%),
        linear-gradient(135deg, rgba(52, 18, 87, .96), rgba(17, 5, 36, .98)) !important;
    box-shadow: 0 26px 70px rgba(4, 0, 15, .4), 0 0 45px rgba(126, 34, 206, .12);
}

body.app-shell .wiki-hero {
    border-color: rgba(216, 180, 254, .25) !important;
    background:
        radial-gradient(circle at 85% 10%, rgba(217, 70, 239, .2), transparent 32%),
        radial-gradient(circle at 5% 90%, rgba(124, 58, 237, .16), transparent 35%),
        linear-gradient(145deg, rgba(52, 18, 87, .92), rgba(17, 5, 36, .96)) !important;
}

body.app-shell .hero-section .hero-title,
body.app-shell .section-title,
body.app-shell h1,
body.app-shell h2 { color: #faf5ff; }

body.app-shell .hero-section .hero-subtitle,
body.app-shell .muted,
body.app-shell .text-muted { color: #b9a6d1; }

body.app-shell .app-sidebar-foot .auth-link,
body.app-shell .app-sidebar-foot .balance-nav,
body.app-shell .app-sidebar-foot .public-theme-toggle,
body.app-shell .app-sidebar-foot .auth-logout,
body.app-shell .app-sidebar-foot .notification-nav {
    border-color: rgba(216, 180, 254, .16);
    background: rgba(49, 20, 78, .58);
}

body.app-shell .app-sidebar-foot .auth-link-primary {
    background: var(--accent-gradient);
}

@media (max-width: 760px) {
    body.app-shell .app-frame { padding: 10px; }
    body.app-shell .app-sidebar { border-radius: 16px; }
    body.app-shell .app-topbar { border-radius: 14px; }
}

@media (min-width: 900px) and (max-width: 1100px) {
    body.app-shell .app-frame {
        grid-template-columns: 145px minmax(0, 1fr) !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    body.app-shell .app-sidebar {
        position: relative;
        inset: auto;
        width: 145px;
        min-width: 145px;
        display: flex !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
    }
    body.app-shell .navbar-mobile { display: none; }
}

/* ===== assets/storefront-final.css ===== */
:root {
    --bg-app: #080d17;
    --bg-sidebar: #0d1b2b;
    --bg-card: #0d1c2b;
    --bg-raised: #13283b;
    --color-accent: #00c8ff;
    --color-accent-rgb: 0, 200, 255;
    --color-accent-2: #5d83ff;
    --accent-cyan: #00c8ff;
    --nav-cyan: #00c8ff;
    --text-primary: #edf7ff;
    --text-secondary: #8ca4b9;
    --line: rgba(116, 170, 207, .16);
}

html { background: #080d17; }
body.app-shell {
    background: radial-gradient(700px 460px at 70% 0, rgba(0, 103, 153, .1), transparent 70%), #080d17 !important;
}

@media (min-width: 761px) {
    body.app-shell .app-frame.app-layout {
        width: min(1500px, calc(100% - 52px)) !important;
        max-width: 1500px !important;
        grid-template-columns: 212px minmax(0, 1fr) !important;
        gap: 24px !important;
        padding: 12px 0 24px !important;
    }
    body.app-shell .app-frame.app-layout .app-sidebar {
        position: relative !important;
        inset: auto !important;
        width: 212px !important;
        min-width: 212px !important;
        height: calc(100vh - 24px) !important;
        border: 1px solid rgba(111, 170, 211, .18) !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(19, 55, 82, .5), transparent 28%), #0c1b2b !important;
        transform: none !important;
    }
    body.app-shell .app-nav li a {
        min-height: 38px;
        color: #a7bdce;
        font-size: 11px;
    }
    body.app-shell .app-nav li a i { color: #00bdf2; }
    body.app-shell .app-nav li.active a,
    body.app-shell .app-nav a[aria-current="page"] {
        border-color: rgba(0, 200, 255, .62);
        background: linear-gradient(100deg, rgba(0, 200, 255, .16), rgba(76, 70, 229, .12));
        box-shadow: inset 3px 0 #00c8ff, 0 0 18px rgba(0, 200, 255, .15);
    }
    body.app-shell .app-content > .hero-section,
    body.app-shell .app-content > .container,
    body.app-shell .app-content > .stats-section {
        max-width: 900px;
        margin-right: auto;
        margin-left: auto;
    }
}

body.app-shell .stats-section .stat-card,
body.app-shell .app-content .panel,
body.app-shell .app-content .item-id,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app {
    border: 1px solid rgba(116, 170, 207, .2);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(14, 31, 48, .96), rgba(9, 20, 33, .96));
    box-shadow: inset 0 1px rgba(255,255,255,.03), 0 14px 32px rgba(0, 8, 18, .18);
}

body.app-shell .catalog-intro {
    border: 1px solid rgba(0, 200, 255, .22);
    border-radius: 14px;
    background: linear-gradient(145deg, #10253a, #0a1726);
}
body.app-shell .catalog-intro .section-kicker,
body.app-shell .stat-number { color: #00c8ff; }
body.app-shell .stat-icon {
    border-color: rgba(0, 200, 255, .24);
    background: rgba(0, 200, 255, .1);
    color: #00c8ff;
}
body.app-shell .shop-control,
body.app-shell .app-content input,
body.app-shell .app-content select,
body.app-shell .app-content textarea {
    border-color: rgba(116, 170, 207, .22);
    border-radius: 10px;
    background: #081522;
    color: #edf7ff;
}
body.app-shell .btn,
body.app-shell .server-btn.active,
body.app-shell .auth-link-primary {
    border-color: rgba(0, 200, 255, .34);
    border-radius: 10px;
    background: linear-gradient(135deg, #00c8ff, #5d83ff);
    color: #041521;
}
body.app-shell .item-id:hover {
    border-color: rgba(0, 200, 255, .48);
    transform: translateY(-2px);
}

/* Dashboard home: a compact command center inspired by modern hosting panels. */
body.home-dashboard-page .hero-section > .container:not(.noxis-dashboard) {
    padding-top: 0;
}

body.home-dashboard-page .hero-section > div.container {
    display: block !important;
}

body.home-dashboard-page .hero-section > div.container .hero-banner {
    display: none;
}

body.home-dashboard-page .content-banners,
body.home-dashboard-page .stats-section,
body.home-dashboard-page .main-content {
    display: block !important;
}

body.home-dashboard-page .noxis-dashboard {
    display: grid;
    gap: 18px;
    max-width: 980px;
    padding: 34px 0 18px;
}

body.home-dashboard-page .noxis-dashboard-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

body.home-dashboard-page .noxis-eyebrow {
    color: #d18cff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.home-dashboard-page .noxis-dashboard-heading h1 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: -.05em;
}

body.home-dashboard-page .noxis-dashboard-heading p {
    margin: 0;
    color: #a993ba;
    font-size: 13px;
}

body.home-dashboard-page .noxis-dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(74, 222, 128, .25);
    border-radius: 999px;
    color: #86efac;
    background: rgba(34, 197, 94, .08);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

body.home-dashboard-page .noxis-dashboard-status.is-offline {
    border-color: rgba(248, 113, 113, .28);
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
}

body.home-dashboard-page .noxis-dashboard-status .pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

body.home-dashboard-page .noxis-command-card,
body.home-dashboard-page .noxis-server-card,
body.home-dashboard-page .noxis-balance-card {
    border: 1px solid rgba(213, 148, 255, .2);
    background: linear-gradient(145deg, rgba(39, 14, 57, .9), rgba(18, 9, 30, .94));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 48px rgba(24, 0, 44, .24);
}

body.home-dashboard-page .noxis-command-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    overflow: hidden;
    border-radius: 20px;
}

body.home-dashboard-page .noxis-command-card::after {
    position: absolute;
    top: -100px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(159, 0, 255, .32), transparent 68%);
    pointer-events: none;
}

body.home-dashboard-page .noxis-command-copy,
body.home-dashboard-page .noxis-server-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.home-dashboard-page .noxis-command-icon,
body.home-dashboard-page .noxis-server-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(213, 148, 255, .28);
    border-radius: 12px;
    color: #e5b9ff;
    background: rgba(159, 0, 255, .18);
    box-shadow: 0 0 24px rgba(159, 0, 255, .2);
}

body.home-dashboard-page .noxis-command-copy strong,
body.home-dashboard-page .noxis-server-main strong {
    display: block;
    color: #fff;
    font-size: 13px;
}

body.home-dashboard-page .noxis-command-copy small,
body.home-dashboard-page .noxis-server-main small {
    display: block;
    margin-top: 4px;
    color: #a993ba;
    font-size: 10px;
}

body.home-dashboard-page .noxis-command-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.home-dashboard-page .noxis-command-actions a,
body.home-dashboard-page .noxis-copy-server {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(213, 148, 255, .2);
    border-radius: 9px;
    color: #dbc5e9;
    background: rgba(159, 0, 255, .1);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

body.home-dashboard-page .noxis-command-actions a:hover,
body.home-dashboard-page .noxis-copy-server:hover {
    border-color: rgba(213, 148, 255, .55);
    background: rgba(159, 0, 255, .22);
    color: #fff;
}

body.home-dashboard-page .noxis-command-actions .noxis-action-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #9f00ff, #5c009f);
    box-shadow: 0 8px 22px rgba(159, 0, 255, .28);
}

body.home-dashboard-page .noxis-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
    gap: 12px;
}

body.home-dashboard-page .noxis-server-card,
body.home-dashboard-page .noxis-balance-card {
    padding: 16px;
    border-radius: 16px;
}

body.home-dashboard-page .noxis-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #9d80ba;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body.home-dashboard-page .noxis-card-topline i { color: #d18cff; }
body.home-dashboard-page .noxis-server-main { margin-bottom: 16px; }
body.home-dashboard-page .noxis-live-badge {
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 7px;
    color: #86efac;
    background: rgba(34, 197, 94, .1);
    font-size: 8px;
    font-weight: 900;
}
body.home-dashboard-page .noxis-live-badge i { margin-right: 3px; font-size: 6px; }
body.home-dashboard-page .noxis-server-metrics {
    display: flex;
    gap: 28px;
    margin-bottom: 13px;
}
body.home-dashboard-page .noxis-server-metrics span { display: grid; gap: 4px; }
body.home-dashboard-page .noxis-server-metrics small { color: #8f79a4; font-size: 9px; }
body.home-dashboard-page .noxis-server-metrics strong { color: #f5eaff; font-size: 14px; }
body.home-dashboard-page .noxis-server-metrics em { color: #9d80ba; font-size: 10px; font-style: normal; }
body.home-dashboard-page .noxis-copy-server { width: 100%; justify-content: center; }
body.home-dashboard-page .noxis-balance-card {
    background:
        radial-gradient(250px 180px at 100% 0, rgba(159, 0, 255, .3), transparent 72%),
        linear-gradient(145deg, rgba(48, 15, 70, .94), rgba(23, 10, 38, .95));
}
body.home-dashboard-page .noxis-balance-value {
    display: block;
    margin: 20px 0 7px;
    color: #fff;
    font-size: 28px;
    letter-spacing: -.04em;
}
body.home-dashboard-page .noxis-balance-value small { color: #d18cff; font-size: 14px; }
body.home-dashboard-page .noxis-balance-card p { min-height: 34px; margin: 0 0 16px; color: #bba8cf; font-size: 10px; line-height: 1.5; }
body.home-dashboard-page .noxis-balance-card > a { color: #e4baff; font-size: 10px; font-weight: 800; text-decoration: none; }
body.home-dashboard-page .noxis-balance-card > a i { margin-left: 6px; }

@media (max-width: 700px) {
    body.home-dashboard-page .noxis-dashboard { padding: 20px 0 12px; }
    body.home-dashboard-page .noxis-dashboard-heading { align-items: start; flex-direction: column; }
    body.home-dashboard-page .noxis-overview-grid { grid-template-columns: 1fr; }
}

/* Noxis violet glass redesign. Kept in the final stylesheet so legacy
   storefront rules remain functional while the public shell gets one visual
   language across desktop and mobile. */
:root {
    --bg-app: #08030f;
    --bg-sidebar: #120822;
    --bg-card: #17102a;
    --bg-raised: #21113b;
    --color-accent: #9f00ff;
    --color-accent-rgb: 159, 0, 255;
    --color-accent-2: #5c009f;
    --accent-cyan: #c36bff;
    --nav-cyan: #c36bff;
    --text-primary: #fbf6ff;
    --text-secondary: #bba8cf;
    --line: rgba(221, 169, 255, .16);
}

html,
body.app-shell {
    background: #08030f !important;
}

body.app-shell {
    background:
        radial-gradient(900px 620px at 78% -10%, rgba(159, 0, 255, .2), transparent 68%),
        radial-gradient(700px 520px at 12% 92%, rgba(92, 0, 159, .22), transparent 70%),
        #08030f !important;
    color: var(--text-primary);
}

body.app-shell::before {
    background-image: radial-gradient(rgba(218, 173, 255, .24) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .13;
}

body.app-shell .app-frame.app-layout {
    width: min(1480px, calc(100% - 40px)) !important;
    max-width: 1480px !important;
    grid-template-columns: 224px minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 20px 0 28px !important;
}

body.app-shell .app-sidebar {
    width: 224px !important;
    min-width: 224px !important;
    height: calc(100vh - 48px) !important;
    border: 1px solid rgba(213, 148, 255, .2) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(159, 0, 255, .18), transparent 25%),
        rgba(18, 8, 34, .9) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
}

body.app-shell .app-brand {
    margin: 0 6px 18px;
    padding: 8px 6px 18px;
    border-bottom: 1px solid rgba(221, 169, 255, .13);
}

body.app-shell .app-brand-mark {
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #9f00ff, #5c009f);
    box-shadow: 0 0 28px rgba(159, 0, 255, .6);
}

body.app-shell .app-brand strong { color: #fff; letter-spacing: .04em; }
body.app-shell .app-brand small,
body.app-shell .app-nav-kicker,
body.app-shell .app-nav-group-label,
body.app-shell .app-nav-count { color: #9b7ab2; }

body.app-shell .app-nav {
    gap: 5px;
}

body.app-shell .app-nav li a {
    min-height: 40px;
    border-radius: 12px;
    color: #c4aed2;
    font-size: 11px;
}

body.app-shell .app-nav li a i { color: #c36bff; }

body.app-shell .app-nav li a:hover {
    border-color: rgba(195, 107, 255, .26);
    background: rgba(159, 0, 255, .12);
    color: #fff;
    transform: translateX(2px);
}

body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: rgba(195, 107, 255, .42);
    background: linear-gradient(100deg, rgba(159, 0, 255, .28), rgba(92, 0, 159, .16));
    box-shadow: inset 3px 0 #c36bff, 0 8px 24px rgba(92, 0, 159, .2);
    color: #fff;
}

body.app-shell .app-nav li.active a i,
body.app-shell .app-nav-active-dot { color: #e6bfff; }
body.app-shell .app-nav-active-dot {
    background: #c36bff;
    box-shadow: 0 0 12px #9f00ff;
}

body.app-shell .app-content {
    min-width: 0;
    background:
        radial-gradient(720px 430px at 72% 0, rgba(159, 0, 255, .09), transparent 70%),
        transparent;
}

body.app-shell .app-topbar {
    min-height: 58px;
    padding: 10px 16px;
    border: 1px solid rgba(213, 148, 255, .18);
    border-radius: 16px;
    background: rgba(22, 8, 41, .72);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    backdrop-filter: blur(20px);
}

body.app-shell .public-topbar-context span {
    border-color: rgba(195, 107, 255, .28);
    color: #d9a8ff;
    background: rgba(159, 0, 255, .12);
}

body.app-shell .nav-actions > a,
body.app-shell .nav-actions > button,
body.app-shell .nav-actions .profile-menu-toggle {
    border-color: rgba(213, 148, 255, .2);
    border-radius: 10px;
    background: rgba(51, 18, 78, .55);
    color: #f5eaff;
}

body.app-shell .nav-actions > a:hover,
body.app-shell .nav-actions > button:hover,
body.app-shell .nav-actions .profile-menu-toggle:hover {
    border-color: rgba(213, 148, 255, .5);
    background: rgba(159, 0, 255, .2);
}

body.app-shell .hero-section {
    padding-top: 12px;
}

body.app-shell .hero-section .hero-banner {
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(195, 107, 255, .38);
    border-radius: 24px;
    background:
        radial-gradient(520px 300px at 88% 14%, rgba(159, 0, 255, .38), transparent 70%),
        radial-gradient(420px 300px at 10% 100%, rgba(92, 0, 159, .3), transparent 72%),
        linear-gradient(135deg, rgba(37, 10, 61, .98), rgba(12, 5, 24, .98));
    box-shadow: 0 28px 70px rgba(32, 0, 55, .38), inset 0 1px rgba(255,255,255,.08);
}

body.app-shell .hero-section .hero-banner::before {
    background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .06) 50%, transparent 76%);
}

body.app-shell .hero-title {
    color: #fff;
    text-shadow: 0 0 28px rgba(195, 107, 255, .34);
}

body.app-shell .hero-title .hat-letter,
body.app-shell .hero-features i,
body.app-shell .section-kicker,
body.app-shell .stat-number {
    color: #c36bff;
}

body.app-shell .hero-subtitle { color: #c1a8d1; }

body.app-shell .hero-badge,
body.app-shell .online-pill {
    border-color: rgba(213, 148, 255, .26);
    background: rgba(159, 0, 255, .13);
    color: #e1baff;
}

body.app-shell .btn,
body.app-shell .server-btn.active,
body.app-shell .auth-link-primary {
    border-color: rgba(213, 148, 255, .35);
    background: linear-gradient(135deg, #9f00ff, #5c009f);
    color: #fff;
    box-shadow: 0 10px 26px rgba(159, 0, 255, .24);
}

body.app-shell .btn:hover,
body.app-shell .server-btn.active:hover,
body.app-shell .auth-link-primary:hover {
    background: linear-gradient(135deg, #b52dff, #7200c4);
    box-shadow: 0 14px 32px rgba(159, 0, 255, .38);
}

body.app-shell .stats-section .stat-card,
body.app-shell .app-content .panel,
body.app-shell .app-content .item-id,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app,
body.app-shell .catalog-intro {
    border-color: rgba(213, 148, 255, .2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(33, 15, 54, .94), rgba(16, 8, 28, .96));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 42px rgba(0, 0, 0, .22);
}

body.app-shell .stat-icon {
    border-color: rgba(195, 107, 255, .3);
    background: rgba(159, 0, 255, .13);
    color: #c36bff;
}

body.app-shell .shop-control,
body.app-shell .app-content input,
body.app-shell .app-content select,
body.app-shell .app-content textarea {
    border-color: rgba(213, 148, 255, .2);
    background: #11071d;
    color: #fbf6ff;
}

body.app-shell .app-content input:focus,
body.app-shell .app-content select:focus,
body.app-shell .app-content textarea:focus {
    border-color: rgba(195, 107, 255, .7);
    box-shadow: 0 0 0 3px rgba(159, 0, 255, .16);
}

@media (max-width: 760px) {
    body.app-shell .app-frame.app-layout {
        width: 100% !important;
        padding: 10px 12px 22px !important;
    }

    body.app-shell .app-sidebar {
        width: min(292px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
    }

    body.app-shell .hero-section .hero-banner {
        min-height: 420px;
        border-radius: 18px;
    }
}

/* ===== assets/noxis-purple-glass.css ===== */
/*
 * NOXIS Purple Glass
 * Final public visual layer.  It intentionally contains presentation only:
 * routes, forms, data attributes and all JavaScript hooks remain unchanged.
 */
:root {
    --bg-app: #090711;
    --bg-sidebar: #100b1b;
    --bg-card: rgba(29, 20, 48, .9);
    --bg-raised: rgba(53, 30, 82, .8);
    --bg-surface-primary: #0d0815;
    --bg-surface-secondary: #1d1430;
    --bg-surface-hover: #342052;
    --color-accent: #b56cff;
    --color-accent-rgb: 181, 108, 255;
    --color-accent-2: #7447e8;
    --accent-cyan: #d9a8ff;
    --accent-blue: #8854ed;
    --accent-purple: #b56cff;
    --nav-cyan: #d9a8ff;
    --accent-gradient: linear-gradient(135deg, #d38cff 0%, #8854ed 55%, #5430bb 100%);
    --accent-glow: 0 0 24px rgba(181, 108, 255, .38);
    --accent-glow-strong: 0 0 44px rgba(181, 108, 255, .6);
    --text-primary: #faf7ff;
    --text-secondary: #b6a8c9;
    --text-tertiary: #827395;
    --border-subtle: rgba(209, 178, 255, .1);
    --border-medium: rgba(209, 178, 255, .18);
    --border-accent: rgba(200, 147, 255, .42);
    --noxis-bg: #090711;
    --noxis-bg-deep: #06040d;
    --noxis-surface: rgba(24, 17, 39, .74);
    --noxis-surface-strong: rgba(29, 20, 48, .9);
    --noxis-surface-soft: rgba(48, 28, 76, .48);
    --noxis-border: rgba(209, 178, 255, .16);
    --noxis-border-strong: rgba(200, 147, 255, .34);
    --noxis-purple: #b56cff;
    --noxis-purple-bright: #d9a8ff;
    --noxis-violet: #7447e8;
    --noxis-pink: #ed78d8;
    --noxis-green: #6fe2ac;
    --noxis-text: #faf7ff;
    --noxis-muted: #b6a8c9;
    --noxis-dim: #827395;
    --noxis-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    --noxis-glass: blur(22px) saturate(125%);
    --noxis-radius: 18px;
    --noxis-gradient: linear-gradient(135deg, #d38cff 0%, #8854ed 55%, #5430bb 100%);
}

html { background: var(--noxis-bg-deep) !important; }

body.app-shell {
    min-width: 320px;
    color: var(--noxis-text) !important;
    background:
        radial-gradient(900px 620px at 83% -12%, rgba(152, 73, 255, .24), transparent 68%),
        radial-gradient(780px 520px at 4% 92%, rgba(101, 39, 186, .18), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25% 50%, rgba(255,255,255,.012) 50% 75%, transparent 75%) 0 0 / 84px 84px,
        var(--noxis-bg-deep) !important;
    font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif !important;
}

body.app-shell::before {
    background-image: radial-gradient(rgba(221, 192, 255, .18) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    opacity: .1 !important;
}

body.app-shell .app-frame.app-layout {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    gap: 22px !important;
    width: min(1540px, calc(100% - 40px)) !important;
    max-width: 1540px !important;
    min-height: 100vh;
    padding: 20px 0 36px !important;
}

body.app-shell .app-sidebar {
    position: sticky !important;
    top: 20px !important;
    z-index: 20;
    width: auto !important;
    min-width: 0 !important;
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1px solid var(--noxis-border) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(110, 50, 173, .22), transparent 32%),
        rgba(16, 11, 27, .86) !important;
    box-shadow: var(--noxis-shadow), inset 0 1px rgba(255,255,255,.06) !important;
    backdrop-filter: var(--noxis-glass);
}

body.app-shell .app-brand {
    margin: 0 !important;
    padding: 21px 18px 18px !important;
    border-bottom: 1px solid var(--noxis-border) !important;
}

body.app-shell .app-brand-mark {
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: 14px !important;
    background: var(--noxis-gradient) !important;
    box-shadow: 0 0 28px rgba(181,108,255,.5), inset 0 1px rgba(255,255,255,.35) !important;
}

body.app-shell .app-brand-copy strong { color: #fff !important; letter-spacing: .04em; }
body.app-shell .app-brand-copy small,
body.app-shell .app-nav-kicker,
body.app-shell .app-nav-group-label { color: var(--noxis-dim) !important; }
body.app-shell .online-status { color: var(--noxis-green) !important; }
body.app-shell .online-status i { box-shadow: 0 0 12px var(--noxis-green) !important; }

body.app-shell .app-nav-heading {
    padding: 17px 18px 7px !important;
    border-bottom: 0 !important;
}
body.app-shell .app-nav-count { color: var(--noxis-dim) !important; }
body.app-shell .app-nav-group { margin: 5px 0 10px !important; }
body.app-shell .app-nav-group + .app-nav-group {
    padding-top: 10px !important;
    border-top-color: var(--noxis-border) !important;
}
body.app-shell .app-nav { padding: 6px 10px !important; gap: 4px !important; }
body.app-shell .app-nav li a {
    min-height: 43px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: var(--noxis-muted) !important;
}
body.app-shell .app-nav li a i { color: #b47cff !important; }
body.app-shell .app-nav li a:hover {
    border-color: var(--noxis-border) !important;
    background: rgba(181,108,255,.12) !important;
    color: #fff !important;
    transform: translateX(2px);
}
body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: var(--noxis-border-strong) !important;
    background: linear-gradient(100deg, rgba(181,108,255,.26), rgba(116,71,232,.12)) !important;
    box-shadow: inset 3px 0 var(--noxis-purple-bright), 0 8px 24px rgba(100,48,167,.2) !important;
    color: #fff !important;
}
body.app-shell .app-nav li.active a i { color: var(--noxis-purple-bright) !important; text-shadow: 0 0 14px rgba(213,168,255,.75); }
body.app-shell .app-nav-active-dot { background: var(--noxis-pink) !important; box-shadow: 0 0 12px var(--noxis-pink) !important; }

body.app-shell .app-sidebar-foot {
    border-top-color: var(--noxis-border) !important;
    background: rgba(8, 5, 15, .22);
}
body.app-shell .sidebar-profile,
body.app-shell .sidebar-guest-note,
body.app-shell .sidebar-staff-button,
body.app-shell .auth-link {
    border-color: var(--noxis-border) !important;
    border-radius: 12px !important;
    background: rgba(52, 29, 78, .4) !important;
    color: var(--noxis-muted) !important;
}
body.app-shell .auth-link-primary,
body.app-shell .sidebar-staff-button-admin { background: var(--noxis-gradient) !important; color: #170b26 !important; }
body.app-shell .sidebar-profile-avatar,
body.app-shell .profile-avatar {
    border-color: rgba(215,174,255,.44) !important;
    background: rgba(181,108,255,.2) !important;
}

body.app-shell .app-topbar {
    position: sticky;
    top: 20px;
    z-index: 15;
    min-height: 68px !important;
    padding: 13px 18px !important;
    border: 1px solid var(--noxis-border) !important;
    border-radius: 18px !important;
    background: rgba(20, 12, 34, .72) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.2) !important;
    backdrop-filter: var(--noxis-glass);
}
body.app-shell .public-topbar-context span {
    border-color: rgba(181,108,255,.28) !important;
    color: var(--noxis-purple-bright) !important;
    background: rgba(181,108,255,.12) !important;
}
body.app-shell .public-topbar-context strong { color: #fff !important; }
body.app-shell .nav-actions > a,
body.app-shell .nav-actions > button,
body.app-shell .nav-actions .profile-menu-toggle {
    border-color: var(--noxis-border) !important;
    border-radius: 11px !important;
    background: rgba(58, 32, 87, .48) !important;
    color: #f3e9ff !important;
}
body.app-shell .nav-actions > a:hover,
body.app-shell .nav-actions > button:hover,
body.app-shell .nav-actions .profile-menu-toggle:hover {
    border-color: var(--noxis-border-strong) !important;
    background: rgba(181,108,255,.18) !important;
}
body.app-shell .balance-nav { color: var(--noxis-green) !important; border-color: rgba(111,226,172,.3) !important; background: rgba(48,157,112,.14) !important; }
body.app-shell .profile-menu-dropdown {
    border-color: var(--noxis-border-strong) !important;
    border-radius: 15px !important;
    background: rgba(26, 15, 43, .96) !important;
    box-shadow: var(--noxis-shadow) !important;
    backdrop-filter: blur(24px);
}
body.app-shell .profile-menu-dropdown a,
body.app-shell .profile-menu-dropdown button { color: var(--noxis-muted) !important; }
body.app-shell .profile-menu-dropdown a:hover,
body.app-shell .profile-menu-dropdown button:hover { background: rgba(181,108,255,.13) !important; color: #fff !important; }

body.app-shell .app-content {
    min-width: 0;
    background: radial-gradient(700px 400px at 80% 0, rgba(181,108,255,.1), transparent 70%) !important;
}
body.app-shell .app-content > * { animation: noxis-fade-in .35s ease both; }
@keyframes noxis-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Shared glass surfaces across catalog, account, support, legal and status. */
body.app-shell .panel,
body.app-shell .account-card,
body.app-shell .orders-panel,
body.app-shell .support-app,
body.app-shell .support-shell,
body.app-shell .status-card,
body.app-shell .legal-card,
body.app-shell .receipt-card,
body.app-shell .auth-card,
body.app-shell .item-id,
body.app-shell .stat-card,
body.app-shell .wiki-section,
body.app-shell .wiki-info-card,
body.app-shell .wiki-step,
body.app-shell .wiki-privilege,
body.app-shell .wiki-security-grid > div {
    border: 1px solid var(--noxis-border) !important;
    border-radius: var(--noxis-radius) !important;
    background: linear-gradient(145deg, rgba(35,22,56,.76), rgba(14,9,24,.82)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045), var(--noxis-shadow) !important;
    backdrop-filter: blur(14px);
}
body.app-shell .panel:hover,
body.app-shell .account-card:hover,
body.app-shell .item-id:hover { border-color: var(--noxis-border-strong) !important; }

body.app-shell .app-content h1,
body.app-shell .app-content h2,
body.app-shell .app-content h3,
body.app-shell .app-content h4 { color: var(--noxis-text) !important; }
body.app-shell .app-content p,
body.app-shell .app-content label,
body.app-shell .muted,
body.app-shell .text-muted { color: var(--noxis-muted) !important; }
body.app-shell .section-kicker,
body.app-shell .catalog-intro .section-kicker,
body.app-shell .noxis-eyebrow,
body.app-shell .auth-eyebrow { color: var(--noxis-purple-bright) !important; }

body.app-shell .app-content input,
body.app-shell .app-content select,
body.app-shell .app-content textarea,
body.app-shell .shop-control,
body.app-shell .auth-input {
    border: 1px solid rgba(209,178,255,.18) !important;
    border-radius: 11px !important;
    background: rgba(9, 5, 17, .7) !important;
    color: var(--noxis-text) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
body.app-shell .app-content input:focus,
body.app-shell .app-content select:focus,
body.app-shell .app-content textarea:focus {
    border-color: var(--noxis-purple) !important;
    box-shadow: 0 0 0 3px rgba(181,108,255,.18), 0 0 24px rgba(181,108,255,.1) !important;
    outline: none !important;
}
body.app-shell .btn,
body.app-shell button.btn,
body.app-shell .auth-submit,
body.app-shell .minigame-button,
body.app-shell .game-open-button,
body.app-shell .noxis-action-primary {
    border: 1px solid rgba(225,194,255,.35) !important;
    border-radius: 11px !important;
    background: var(--noxis-gradient) !important;
    color: #190b29 !important;
    box-shadow: 0 10px 26px rgba(113,59,190,.25), inset 0 1px rgba(255,255,255,.3) !important;
    font-weight: 800;
}
body.app-shell .btn:hover,
body.app-shell button.btn:hover,
body.app-shell .auth-submit:hover,
body.app-shell .minigame-button:hover,
body.app-shell .game-open-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
body.app-shell .btn-secondary,
body.app-shell .auth-secondary,
body.app-shell .auth-link:not(.auth-link-primary) {
    border-color: var(--noxis-border) !important;
    background: rgba(54,31,82,.5) !important;
    color: var(--noxis-purple-bright) !important;
}

body.app-shell .catalog-intro,
body.app-shell .hero-banner,
body.app-shell .noxis-command-card,
body.app-shell .noxis-server-card,
body.app-shell .noxis-balance-card,
body.app-shell .noxis-minigame,
body.app-shell .wiki-hero,
body.app-shell .wiki-footer-card,
body.app-shell .game-feed {
    border: 1px solid var(--noxis-border-strong) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(500px 240px at 90% 0, rgba(213,128,255,.2), transparent 70%),
        linear-gradient(140deg, rgba(55,27,83,.86), rgba(14,8,25,.9)) !important;
    box-shadow: 0 25px 70px rgba(35, 9, 71, .3), inset 0 1px rgba(255,255,255,.08) !important;
}
body.app-shell .catalog-intro { padding: 28px !important; }
body.app-shell .catalog-intro h2 { color: #fff !important; }
body.app-shell .stat-number,
body.app-shell .noxis-server-main strong,
body.app-shell .noxis-balance-main strong { color: var(--noxis-purple-bright) !important; }
body.app-shell .stat-icon,
body.app-shell .noxis-command-icon,
body.app-shell .server-address-icon {
    border-color: rgba(213,168,255,.35) !important;
    background: rgba(181,108,255,.15) !important;
    color: var(--noxis-purple-bright) !important;
}
body.app-shell .product-buy,
body.app-shell .buy-button,
body.app-shell .checkout-button { background: var(--noxis-gradient) !important; color: #190b29 !important; }
body.app-shell .item-id .item-price,
body.app-shell .product-price { color: var(--noxis-purple-bright) !important; }

/* Authentication and account pages. */
body.app-shell .auth-page {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
    padding: 42px 18px 70px !important;
}
body.app-shell .auth-shell { width: min(100%, 530px); }
body.app-shell .auth-card {
    padding: clamp(25px, 5vw, 44px) !important;
    background:
        radial-gradient(350px 220px at 100% 0, rgba(196,113,255,.18), transparent 72%),
        linear-gradient(145deg, rgba(38,23,59,.88), rgba(15,9,26,.92)) !important;
}
body.app-shell .auth-card h1 { letter-spacing: -.04em; }
body.app-shell .auth-input { display: flex; align-items: center; gap: 10px; padding: 0 13px; }
body.app-shell .auth-input input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.app-shell .auth-input > i { color: var(--noxis-purple) !important; }
body.app-shell .auth-alert { border-radius: 11px !important; border-color: var(--noxis-border) !important; background: rgba(181,108,255,.1) !important; }
body.app-shell .account-shell,
body.app-shell .orders-shell,
body.app-shell .support-shell,
body.app-shell .status-shell,
body.app-shell .receipt-shell { width: min(1120px, 100%); margin: 0 auto; padding: 34px 0 65px; }
body.app-shell .account-tabs .nav-tabs,
body.app-shell .tabs-alt > .nav-tabs,
body.app-shell .wiki-jump {
    border: 1px solid var(--noxis-border) !important;
    border-radius: 13px !important;
    background: rgba(23,13,37,.58) !important;
}
body.app-shell .account-tabs .nav-tabs a,
body.app-shell .tabs-alt > .nav-tabs a,
body.app-shell .wiki-jump a { color: var(--noxis-muted) !important; }
body.app-shell .account-tabs .nav-tabs li.active a,
body.app-shell .tabs-alt > .nav-tabs li.active a,
body.app-shell .wiki-jump a:hover { color: #fff !important; background: rgba(181,108,255,.18) !important; }

/* Tables, tickets and operational states. */
body.app-shell .app-content table { border-color: var(--noxis-border) !important; background: rgba(16,9,27,.35); }
body.app-shell .app-content table th { background: rgba(181,108,255,.12) !important; color: var(--noxis-purple-bright) !important; }
body.app-shell .app-content table td { border-top-color: var(--noxis-border) !important; color: var(--noxis-muted); }
body.app-shell .support-ticket,
body.app-shell .support-message,
body.app-shell .ticket-card,
body.app-shell .status-item,
body.app-shell .order-card,
body.app-shell .history-item { border-color: var(--noxis-border) !important; background: rgba(28,17,45,.65) !important; border-radius: 14px !important; }
body.app-shell .status-online,
body.app-shell .is-online { color: var(--noxis-green) !important; }
body.app-shell .alert-success { border-color: rgba(111,226,172,.28) !important; background: rgba(53,177,123,.12) !important; }
body.app-shell .alert-danger,
body.app-shell .auth-alert-error { border-color: rgba(255,117,153,.3) !important; background: rgba(190,47,94,.12) !important; }

body.app-shell .wiki-page { width: min(1120px, 100%); margin: 0 auto; padding: 34px 0 70px; }
body.app-shell .wiki-hero h1 strong { color: var(--noxis-purple-bright) !important; }
body.app-shell .wiki-section-heading > span,
body.app-shell .wiki-privilege h3 { color: var(--noxis-purple-bright) !important; }
body.app-shell .wiki-note { border-color: var(--noxis-border) !important; background: rgba(181,108,255,.08) !important; }
body.app-shell .wiki-note i,
body.app-shell .wiki-info-card > i,
body.app-shell .wiki-security-grid > div > i { color: var(--noxis-purple-bright) !important; background: rgba(181,108,255,.12) !important; }

body.app-shell .footer {
    margin-top: 18px;
    border-top: 1px solid var(--noxis-border) !important;
    background: rgba(11,6,19,.55) !important;
}
body.app-shell .footer a { color: var(--noxis-muted) !important; }
body.app-shell .footer a:hover { color: var(--noxis-purple-bright) !important; }

@media (max-width: 1100px) {
    body.app-shell .app-frame.app-layout { width: min(100% - 24px, 900px) !important; grid-template-columns: 218px minmax(0,1fr) !important; gap: 14px !important; }
    body.app-shell .app-sidebar { border-radius: 20px !important; }
    body.app-shell .account-shell, body.app-shell .orders-shell, body.app-shell .support-shell, body.app-shell .status-shell, body.app-shell .receipt-shell, body.app-shell .wiki-page { padding-right: 4px; padding-left: 4px; }
}

@media (max-width: 760px) {
    body.app-shell .app-frame.app-layout {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    body.app-shell .app-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 100;
        width: min(300px, 86vw) !important;
        height: 100vh !important;
        max-height: none !important;
        border-width: 0 1px 0 0 !important;
        border-radius: 0 22px 22px 0 !important;
        transform: translateX(-105%) !important;
        transition: transform .28s ease !important;
    }
    body.app-shell.public-drawer-open .app-sidebar { transform: translateX(0) !important; }
    body.app-shell .public-drawer-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 90;
        display: block !important;
        background: rgba(4,2,9,.68) !important;
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(4px);
        transition: opacity .28s ease;
    }
    body.app-shell.public-drawer-open .public-drawer-backdrop { opacity: 1; pointer-events: auto; }
    body.app-shell .app-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 80;
        margin: 0 !important;
        border-width: 0 0 1px !important;
        border-radius: 0 !important;
        padding: 11px 14px !important;
    }
    body.app-shell .app-content { padding: 0 14px; }
    body.app-shell .public-topbar-context { min-width: 0; }
    body.app-shell .public-topbar-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.app-shell .profile-menu-name { display: none; }
    body.app-shell .public-topbar-site { display: none !important; }
    body.app-shell .nav-actions { gap: 5px !important; }
    body.app-shell .app-content > .container,
    body.app-shell .app-content > .hero-section,
    body.app-shell .wiki-page { width: 100% !important; }
    body.app-shell .auth-page { padding: 28px 0 48px !important; }
    body.app-shell .account-shell, body.app-shell .orders-shell, body.app-shell .support-shell, body.app-shell .status-shell, body.app-shell .receipt-shell { padding-top: 25px; }
}

@media (max-width: 560px) {
    body.app-shell .app-content { padding: 0 10px; }
    body.app-shell .noxis-dashboard-heading { align-items: flex-start !important; flex-direction: column !important; }
    body.app-shell .noxis-dashboard,
    body.app-shell .wiki-page { padding-top: 24px !important; }
    body.app-shell .catalog-intro,
    body.app-shell .auth-card,
    body.app-shell .wiki-hero { padding: 22px 17px !important; }
    body.app-shell .wiki-section { padding: 18px 14px !important; }
    body.app-shell .wiki-steps,
    body.app-shell .wiki-card-grid,
    body.app-shell .wiki-privileges,
    body.app-shell .wiki-security-grid,
    body.app-shell .noxis-server-grid,
    body.app-shell .inventory-summary { grid-template-columns: 1fr !important; }
    body.app-shell .footer-grid { grid-template-columns: 1fr !important; gap: 16px; }
    body.app-shell .auth-card-wide { padding: 20px 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell .app-content > * { animation: none !important; }
}

/* ===== assets/noxis-redesign.css ===== */
/*
 * NOXIS UI — the final presentation layer.
 * This file is deliberately loaded last. It owns presentation only; PHP
 * routes, forms, data attributes and existing behaviour stay untouched.
 */
:root {
    --nx-purple: #9F00FF;
    --nx-violet: #5C009F;
    --nx-purple-rgb: 159, 0, 255;
    --nx-bg: #08050f;
    --nx-surface: #110a1c;
    --nx-surface-2: #191027;
    --nx-surface-3: #24133a;
    --nx-text: #faf7ff;
    --nx-muted: #ad9aba;
    --nx-dim: #776484;
    --nx-line: rgba(215, 171, 255, .14);
    --nx-line-strong: rgba(191, 107, 255, .42);
    --nx-success: #63e6a7;
    --nx-danger: #ff7798;
    --nx-gradient: linear-gradient(135deg, #9F00FF 0%, #5C009F 100%);
    --nx-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    --nx-radius: 18px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--nx-bg) !important; scroll-behavior: smooth; }
body.app-shell {
    min-width: 320px;
    margin: 0;
    color: var(--nx-text) !important;
    background:
        radial-gradient(900px 620px at 82% -10%, rgba(159, 0, 255, .21), transparent 68%),
        radial-gradient(760px 540px at 5% 88%, rgba(92, 0, 159, .2), transparent 70%),
        var(--nx-bg) !important;
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
}
body.app-shell::before { opacity: .08 !important; background-size: 44px 44px !important; }
body.app-shell a { color: inherit; }
body.app-shell button,
body.app-shell input,
body.app-shell select,
body.app-shell textarea { font: inherit; }
body.app-shell button { cursor: pointer; }

body.app-shell .app-frame.app-layout {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    gap: 22px !important;
    width: min(1540px, calc(100% - 40px)) !important;
    max-width: 1540px !important;
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px 0 40px !important;
}
body.app-shell .app-sidebar {
    position: sticky !important;
    top: 20px !important;
    z-index: 50;
    display: flex;
    width: auto !important;
    min-width: 0 !important;
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px);
    overflow: auto;
    flex-direction: column;
    border: 1px solid var(--nx-line) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(159, 0, 255, .16), transparent 30%), rgba(17, 10, 28, .92) !important;
    box-shadow: var(--nx-shadow), inset 0 1px rgba(255,255,255,.06) !important;
    backdrop-filter: blur(22px);
}
body.app-shell .app-brand {
    min-height: 74px;
    margin: 0 !important;
    padding: 17px 18px !important;
    border-bottom: 1px solid var(--nx-line) !important;
}
body.app-shell .app-brand-mark {
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: var(--nx-gradient) !important;
    box-shadow: 0 0 28px rgba(159,0,255,.5) !important;
}
body.app-shell .app-brand-copy strong { color: #fff !important; letter-spacing: .06em; }
body.app-shell .app-brand-copy small,
body.app-shell .app-nav-kicker,
body.app-shell .app-nav-group-label,
body.app-shell .app-nav-count { color: var(--nx-dim) !important; }
body.app-shell .online-status { color: var(--nx-success) !important; }
body.app-shell .online-status i { box-shadow: 0 0 12px var(--nx-success) !important; }
body.app-shell .app-nav-heading { padding: 19px 18px 8px !important; }
body.app-shell .app-nav-group { margin: 5px 0 10px !important; }
body.app-shell .app-nav-group + .app-nav-group { border-top-color: var(--nx-line) !important; }
body.app-shell .app-nav { gap: 4px !important; padding: 5px 10px !important; }
body.app-shell .app-nav li a {
    min-height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: var(--nx-muted) !important;
}
body.app-shell .app-nav li a i { color: #c066ff !important; }
body.app-shell .app-nav li a:hover {
    border-color: var(--nx-line-strong) !important;
    background: rgba(159,0,255,.12) !important;
    color: #fff !important;
    transform: translateX(2px);
}
body.app-shell .app-nav li.active a,
body.app-shell .app-nav a[aria-current="page"] {
    border-color: var(--nx-line-strong) !important;
    background: linear-gradient(100deg, rgba(159,0,255,.28), rgba(92,0,159,.16)) !important;
    box-shadow: inset 3px 0 #c45dff, 0 8px 24px rgba(92,0,159,.24) !important;
    color: #fff !important;
}
body.app-shell .app-nav-active-dot { background: #e475ff !important; box-shadow: 0 0 12px #e475ff !important; }
body.app-shell .app-sidebar-foot { border-top-color: var(--nx-line) !important; background: rgba(4,2,8,.18); }
body.app-shell .sidebar-profile,
body.app-shell .sidebar-guest-note,
body.app-shell .sidebar-staff-button,
body.app-shell .auth-link {
    border-color: var(--nx-line) !important;
    border-radius: 12px !important;
    background: rgba(55, 21, 82, .45) !important;
    color: var(--nx-muted) !important;
}
body.app-shell .auth-link-primary,
body.app-shell .sidebar-staff-button-admin { border-color: transparent !important; background: var(--nx-gradient) !important; color: #fff !important; }
body.app-shell .sidebar-profile-avatar,
body.app-shell .profile-avatar { border-color: rgba(207, 138, 255, .5) !important; background: rgba(159,0,255,.2) !important; }

body.app-shell .app-content { min-width: 0; }
body.app-shell .app-topbar {
    position: sticky;
    top: 20px;
    z-index: 40;
    display: flex !important;
    min-height: 68px !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px !important;
    border: 1px solid var(--nx-line) !important;
    border-radius: 18px !important;
    background: rgba(20, 10, 33, .78) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(20px);
}
body.app-shell .public-topbar-context { display: flex; align-items: center; gap: 10px; }
body.app-shell .public-topbar-context span {
    padding: 6px 10px;
    border: 1px solid rgba(159,0,255,.35) !important;
    border-radius: 999px;
    color: #d7a2ff !important;
    background: rgba(159,0,255,.12) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body.app-shell .public-topbar-context strong { color: #fff !important; font-size: 16px; }
body.app-shell .nav-actions { gap: 8px; }
body.app-shell .nav-actions > a,
body.app-shell .nav-actions > button,
body.app-shell .nav-actions .profile-menu-toggle {
    min-height: 40px !important;
    border: 1px solid var(--nx-line) !important;
    border-radius: 11px !important;
    background: rgba(57, 22, 83, .48) !important;
    color: #f7edff !important;
}
body.app-shell .nav-actions > a:hover,
body.app-shell .nav-actions > button:hover,
body.app-shell .nav-actions .profile-menu-toggle:hover { border-color: var(--nx-line-strong) !important; background: rgba(159,0,255,.19) !important; }
body.app-shell .noxis-agent-button {
    position: relative;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid #C252FF !important;
    border-radius: 11px;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(159,0,255,.55), rgba(92,0,159,.65)) !important;
    box-shadow: 0 0 18px rgba(159,0,255,.34);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    animation: noxis-agent-pulse 2.4s ease-in-out infinite;
}
body.app-shell .noxis-agent-button:hover {
    background: var(--nx-gradient) !important;
    text-shadow: 0 0 8px #fff;
    box-shadow: 0 0 28px rgba(194,82,255,.72);
}
body.app-shell .balance-nav { border-color: rgba(99,230,167,.3) !important; color: var(--nx-success) !important; }
body.app-shell .profile-menu { position: relative; }
body.app-shell .profile-menu-dropdown {
    border: 1px solid var(--nx-line-strong) !important;
    border-radius: 14px !important;
    background: rgba(23, 11, 37, .98) !important;
    box-shadow: var(--nx-shadow) !important;
}
body.app-shell .profile-menu-dropdown a,
body.app-shell .profile-menu-dropdown button { color: var(--nx-muted) !important; }
body.app-shell .profile-menu-dropdown a:hover,
body.app-shell .profile-menu-dropdown button:hover { background: rgba(159,0,255,.16) !important; color: #fff !important; }
body.app-shell .navbar-mobile { display: none; }

body.app-shell .container { width: min(1180px, calc(100% - 40px)); max-width: 1180px; }
body.app-shell .hero-section { padding: 28px 0 14px !important; }
body.app-shell .noxis-dashboard { padding-top: 8px; }
body.app-shell .noxis-dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 22px; }
body.app-shell .noxis-eyebrow,
body.app-shell .hero-badge,
body.app-shell .purchase-kicker,
body.app-shell .auth-eyebrow {
    color: #d28cff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}
body.app-shell .noxis-dashboard-heading h1 { margin: 9px 0 7px; color: #fff !important; font-size: clamp(27px, 4vw, 42px); letter-spacing: -.045em; }
body.app-shell .noxis-dashboard-heading p { margin: 0; color: var(--nx-muted) !important; }
body.app-shell .noxis-dashboard-status,
body.app-shell .online-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(99,230,167,.3) !important;
    border-radius: 999px;
    color: var(--nx-success) !important;
    background: rgba(99,230,167,.08) !important;
    font-size: 11px;
    font-weight: 800;
}
body.app-shell .noxis-dashboard-status.is-offline,
body.app-shell .online-pill.is-offline { border-color: rgba(255,119,152,.34) !important; color: var(--nx-danger) !important; background: rgba(255,119,152,.08) !important; }
body.app-shell .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
body.app-shell .noxis-command-card,
body.app-shell .noxis-server-card,
body.app-shell .noxis-balance-card,
body.app-shell .panel,
body.app-shell .payments,
body.app-shell .faq-section,
body.app-shell .shop-toolbar,
body.app-shell .catalog-category-switcher {
    border: 1px solid var(--nx-line) !important;
    border-radius: var(--nx-radius) !important;
    background: linear-gradient(145deg, rgba(35,17,56,.8), rgba(16,8,26,.86)) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.2) !important;
}
body.app-shell .noxis-command-card { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 18px 20px; }
body.app-shell .noxis-command-copy { display: flex; align-items: center; gap: 12px; }
body.app-shell .noxis-command-icon,
body.app-shell .noxis-server-icon {
    display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto;
    border-radius: 13px; color: #fff; background: var(--nx-gradient); box-shadow: 0 8px 24px rgba(159,0,255,.28);
}
body.app-shell .noxis-command-copy strong,
body.app-shell .noxis-command-copy small { display: block; }
body.app-shell .noxis-command-copy small { margin-top: 3px; color: var(--nx-muted); }
body.app-shell .noxis-ai-search {
    position: relative;
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    color: var(--nx-muted);
    background: rgba(7, 3, 12, .68);
    isolation: isolate;
}
body.app-shell .noxis-ai-search::before {
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    content: "";
    background: conic-gradient(from 90deg, transparent, #9F00FF, #D888FF, transparent 45%);
    opacity: 0;
    animation: noxis-border-spin 2.2s linear infinite;
    transition: opacity .2s ease;
}
body.app-shell .noxis-ai-search:focus-within {
    border-color: transparent;
    box-shadow: 0 0 25px rgba(159,0,255,.6);
}
body.app-shell .noxis-ai-search:focus-within::before { opacity: 1; }
body.app-shell .noxis-ai-search > i { color: #C252FF; }
body.app-shell .noxis-ai-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}
body.app-shell .noxis-ai-search input::placeholder { color: #887596; }
body.app-shell .noxis-ai-hint {
    padding: 4px 6px;
    border: 1px solid var(--nx-line);
    border-radius: 5px;
    color: var(--nx-dim);
    font-size: 9px;
    white-space: nowrap;
}
body.app-shell .noxis-command-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.app-shell .noxis-command-actions a,
body.app-shell .noxis-action-primary,
body.app-shell .btn-hero-primary,
body.app-shell .auth-submit {
    display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px;
    padding: 0 15px; border: 1px solid rgba(199,119,255,.3) !important; border-radius: 11px;
    color: #fff !important; background: rgba(159,0,255,.16) !important; font-weight: 800; text-decoration: none;
}
body.app-shell .noxis-command-actions a:hover,
body.app-shell .noxis-action-primary:hover,
body.app-shell .btn-hero-primary:hover,
body.app-shell .auth-submit:hover { background: var(--nx-gradient) !important; transform: translateY(-2px); }
body.app-shell .noxis-overview-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-bottom: 22px; }
body.app-shell .noxis-server-card,
body.app-shell .noxis-balance-card { min-width: 0; padding: 20px; }
body.app-shell .noxis-card-topline { display: flex; justify-content: space-between; color: var(--nx-dim); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.app-shell .noxis-server-main { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
body.app-shell .noxis-server-main strong,
body.app-shell .noxis-server-main small { display: block; }
body.app-shell .noxis-server-main small { margin-top: 3px; color: var(--nx-muted); }
body.app-shell .noxis-live-badge { margin-left: auto; color: var(--nx-success); font-size: 10px; font-weight: 900; }
body.app-shell .noxis-server-metrics { display: flex; gap: 36px; padding: 14px 0; border-top: 1px solid var(--nx-line); }
body.app-shell .noxis-server-metrics small,
body.app-shell .noxis-server-metrics strong { display: block; }
body.app-shell .noxis-server-metrics small { color: var(--nx-dim); font-size: 11px; }
body.app-shell .noxis-server-metrics strong { margin-top: 4px; font-size: 17px; }
body.app-shell .noxis-server-metrics em { color: var(--nx-muted); font-size: 12px; font-style: normal; }
body.app-shell .noxis-copy-server { width: 100%; min-height: 40px; border: 1px solid var(--nx-line); border-radius: 10px; color: var(--nx-muted); background: rgba(255,255,255,.03); }
body.app-shell .noxis-balance-value { display: block; margin: 26px 0 8px; color: #fff; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.06em; }
body.app-shell .noxis-balance-value small { color: #d28cff; font-size: .45em; letter-spacing: 0; }
body.app-shell .noxis-balance-card p { min-height: 42px; color: var(--nx-muted); line-height: 1.55; }
body.app-shell .noxis-balance-card a { color: #d28cff; font-weight: 800; text-decoration: none; }
body.app-shell .noxis-iso-server {
    display: grid;
    width: 58px;
    height: 44px;
    margin-left: auto;
    place-items: center;
    border: 1px solid rgba(216,136,255,.38);
    border-radius: 10px;
    color: #D888FF;
    background: linear-gradient(145deg, rgba(159,0,255,.42), rgba(92,0,159,.2));
    box-shadow: 0 0 22px rgba(159,0,255,.35);
    transform: skewY(-8deg) rotate(4deg);
    animation: noxis-levitate 3.5s ease-in-out infinite;
}
body.app-shell .noxis-server-card:hover .noxis-iso-server { transform: skewY(-8deg) rotate(15deg) scale(1.08); filter: drop-shadow(0 0 12px #C252FF); }
body.app-shell .noxis-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
    gap: 16px;
    margin-top: 16px;
}
body.app-shell .noxis-data-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--nx-line) !important;
    border-radius: var(--nx-radius);
    background: rgba(19,13,30,.78);
    box-shadow: 0 18px 48px rgba(0,0,0,.2);
    backdrop-filter: blur(16px);
}
body.app-shell .noxis-widget-heading { display: grid; gap: 5px; margin-top: 18px; }
body.app-shell .noxis-widget-heading strong { color: #fff; font-size: 15px; }
body.app-shell .noxis-widget-heading small { color: var(--nx-muted); font-size: 10px; }
body.app-shell .noxis-widget-live,
body.app-shell .noxis-chart-change { color: #63e6a7; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
body.app-shell .noxis-widget-live i { font-size: 6px; }
body.app-shell .noxis-node-map { position: relative; min-height: 190px; margin-top: 6px; }
body.app-shell .noxis-node-map svg { width: 100%; height: 190px; overflow: visible; }
body.app-shell .noxis-node-links { fill: none; stroke: rgba(194,82,255,.35); stroke-dasharray: 5 7; animation: noxis-link-flow 3s linear infinite; }
body.app-shell .noxis-node,
body.app-shell .noxis-node-core { fill: #D888FF; stroke: #9F00FF; stroke-width: 3; filter: drop-shadow(0 0 8px #C252FF); animation: noxis-node-pulse 2s ease-in-out infinite; }
body.app-shell .noxis-node:nth-child(3n) { animation-delay: -.7s; }
body.app-shell .noxis-node-core { fill: #9F00FF; stroke: #D888FF; stroke-width: 4; }
body.app-shell .noxis-node-caption { position: absolute; top: 72px; left: 50%; display: grid; gap: 1px; transform: translateX(-50%); text-align: center; pointer-events: none; }
body.app-shell .noxis-node-caption strong { color: #fff; font-size: 20px; }
body.app-shell .noxis-node-caption span { color: var(--nx-muted); font-size: 9px; white-space: nowrap; }
body.app-shell .noxis-area-chart { width: 100%; height: 180px; margin-top: 12px; overflow: visible; }
body.app-shell .noxis-chart-area { fill: url(#noxis-chart-fill); }
body.app-shell .noxis-chart-line { fill: none; stroke: #C252FF; stroke-width: 3; filter: drop-shadow(0 0 8px #9F00FF); stroke-dasharray: 900; stroke-dashoffset: 900; animation: noxis-chart-draw 2.2s ease forwards; }
body.app-shell .noxis-chart-labels { display: flex; justify-content: space-between; color: var(--nx-dim); font-size: 9px; }
body.app-shell .noxis-matrix { position: absolute; top: 0; bottom: 0; width: 90px; opacity: .13; background: repeating-linear-gradient(180deg, #5C009F 0 2px, transparent 2px 18px); background-size: 100% 70px; animation: noxis-matrix-fall 5s linear infinite; }
body.app-shell .noxis-matrix-left { left: 0; }
body.app-shell .noxis-matrix-right { right: 0; animation-delay: -2.5s; }

body.app-shell .hero-banner { overflow: hidden; min-height: 350px; padding: clamp(28px, 5vw, 56px) !important; border: 1px solid var(--nx-line-strong) !important; border-radius: 24px !important; background: radial-gradient(circle at 80% 20%, rgba(159,0,255,.24), transparent 33%), linear-gradient(135deg, rgba(38,15,61,.96), rgba(10,5,17,.98)) !important; box-shadow: var(--nx-shadow) !important; }
body.app-shell .hero-banner .hero-title { color: #fff !important; font-size: clamp(42px, 8vw, 84px) !important; letter-spacing: -.08em !important; }
body.app-shell .hero-banner .hero-subtitle { max-width: 620px; color: var(--nx-muted) !important; }
body.app-shell .hero-features { color: #e0c7ef !important; }
body.app-shell .hero-character { opacity: .75; filter: drop-shadow(0 20px 38px rgba(159,0,255,.25)); }
body.app-shell .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.app-shell .server-address-button { border: 1px solid var(--nx-line) !important; border-radius: 11px !important; color: #fff !important; background: rgba(255,255,255,.05) !important; }

body.app-shell .shop-toolbar { display: flex; gap: 14px; margin: 18px 0; padding: 14px; }
body.app-shell .shop-control-field { min-width: 0; flex: 1; }
body.app-shell .shop-control-label,
body.app-shell .catalog-category-switcher__label { display: block; margin: 0 0 7px; color: var(--nx-dim); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.app-shell .shop-control,
body.app-shell .input-block input,
body.app-shell .input-block select,
body.app-shell .input-block textarea {
    display: flex; align-items: center; width: 100%; min-height: 44px; gap: 8px; padding: 0 13px;
    border: 1px solid var(--nx-line) !important; border-radius: 11px !important; color: #fff !important; background: rgba(9,4,16,.6) !important;
}
body.app-shell .shop-control input,
body.app-shell .shop-control select { min-width: 0; width: 100%; border: 0; outline: 0; color: inherit; background: transparent; }
body.app-shell .shop-control:focus-within,
body.app-shell .input-block input:focus,
body.app-shell .input-block select:focus,
body.app-shell .input-block textarea:focus { border-color: var(--nx-purple) !important; box-shadow: 0 0 0 3px rgba(159,0,255,.16) !important; outline: 0; }
body.app-shell .catalog-category-switcher { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 16px 0; padding: 16px; }
body.app-shell .catalog-category-switcher__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.app-shell .catalog-category-switcher__button { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--nx-line); border-radius: 10px; color: var(--nx-muted) !important; background: rgba(255,255,255,.025); text-decoration: none; }
body.app-shell .catalog-category-switcher__item.active .catalog-category-switcher__button,
body.app-shell .catalog-category-switcher__button:hover { border-color: var(--nx-line-strong); color: #fff !important; background: rgba(159,0,255,.18); }
body.app-shell .items { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px !important; }
body.app-shell .item-id {
    min-width: 0; overflow: hidden; border: 1px solid var(--nx-line) !important; border-radius: 16px !important;
    color: var(--nx-text); background: linear-gradient(160deg, rgba(38,18,60,.88), rgba(15,7,24,.92)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.2); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.app-shell .item-id:hover { border-color: var(--nx-line-strong) !important; box-shadow: 0 20px 48px rgba(92,0,159,.28); transform: translateY(-4px); }
body.app-shell .item-id .title,
body.app-shell .item-id .price,
body.app-shell .item-id .item-title { color: #fff !important; }
body.app-shell .item-id .description,
body.app-shell .item-id .item-description { color: var(--nx-muted) !important; }
body.app-shell .item-id .btn,
body.app-shell .item-id button { border-radius: 10px; }
body.app-shell .tab-id { padding-top: 4px; }

body.app-shell .auth-page { min-height: calc(100vh - 90px); display: grid; place-items: center; padding: 42px 0 60px; }
body.app-shell .auth-shell { width: min(100%, 560px); }
body.app-shell .auth-card {
    padding: clamp(24px, 5vw, 42px) !important; border: 1px solid var(--nx-line-strong) !important; border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(38,18,60,.9), rgba(13,6,21,.96)) !important; box-shadow: var(--nx-shadow) !important;
}
body.app-shell .auth-card h1 { margin: 12px 0 8px; color: #fff !important; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.06em; }
body.app-shell .auth-lead { margin: 0 0 24px; color: var(--nx-muted) !important; line-height: 1.6; }
body.app-shell .auth-form { display: grid; gap: 11px; }
body.app-shell .auth-form > label { margin-top: 4px; color: #e7d8f4 !important; font-size: 12px; font-weight: 800; }
body.app-shell .auth-input { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--nx-line) !important; border-radius: 12px !important; background: rgba(7,3,12,.6) !important; }
body.app-shell .auth-input:focus-within { border-color: var(--nx-purple) !important; box-shadow: 0 0 0 3px rgba(159,0,255,.16) !important; }
body.app-shell .auth-input i { width: 18px; color: #c45dff !important; text-align: center; }
body.app-shell .auth-input input { width: 100%; min-width: 0; border: 0; outline: 0; color: #fff !important; background: transparent !important; }
body.app-shell .auth-submit { width: 100%; min-height: 50px; margin-top: 9px; border: 0 !important; background: var(--nx-gradient) !important; }
body.app-shell .auth-alert { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: 11px; color: #f7efff; background: rgba(159,0,255,.12); }
body.app-shell .auth-alert-error { border-color: rgba(255,119,152,.35); background: rgba(255,119,152,.1); }
body.app-shell .auth-alert-success { border-color: rgba(99,230,167,.35); background: rgba(99,230,167,.1); }
body.app-shell .auth-switch { margin: 20px 0 0; color: var(--nx-muted) !important; text-align: center; }
body.app-shell .auth-switch a { color: #d28cff !important; font-weight: 800; }

body.app-shell table { width: 100%; border-collapse: collapse; }
body.app-shell th { color: var(--nx-dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
body.app-shell th, body.app-shell td { padding: 13px 14px; border-bottom: 1px solid var(--nx-line); text-align: left; }
body.app-shell td { color: var(--nx-muted); }
body.app-shell tbody tr:hover { background: rgba(159,0,255,.07); }
body.app-shell .modal,
body.app-shell .noxis-overlay { background: rgba(4,1,8,.82) !important; backdrop-filter: blur(14px); }
body.app-shell .modal .wrapper,
body.app-shell .modal-content,
body.app-shell .noxis-modal {
    border: 1px solid var(--nx-line-strong) !important; border-radius: 22px !important;
    color: var(--nx-text) !important; background: linear-gradient(145deg, rgba(38,18,60,.98), rgba(13,6,22,.99)) !important; box-shadow: var(--nx-shadow) !important;
}
body.app-shell .modal input,
body.app-shell .modal select,
body.app-shell .modal textarea { color: #fff !important; background: rgba(7,3,12,.7) !important; border-color: var(--nx-line) !important; }
body.app-shell .purchase-close { color: var(--nx-muted) !important; }
body.app-shell .purchase-period.is-selected,
body.app-shell .purchase-period:hover { border-color: var(--nx-purple) !important; background: rgba(159,0,255,.15) !important; }
body.app-shell .footer { margin-top: 42px; border-top: 1px solid var(--nx-line) !important; background: transparent !important; }
body.app-shell .footer-copy,
body.app-shell .footer-links a { color: var(--nx-dim) !important; }
body.app-shell .footer-links a:hover { color: #d28cff !important; }
body.app-shell .a-alert { z-index: 10000; }
body.app-shell .a-alert .alert { border: 1px solid var(--nx-line-strong); border-radius: 12px; color: #fff; background: var(--nx-surface-2); box-shadow: var(--nx-shadow); }
body.app-shell .a-alert .alert-success { border-color: rgba(99,230,167,.4); }
body.app-shell .a-alert .alert-danger { border-color: rgba(255,119,152,.4); }
body.app-shell .is-loading { opacity: .7; pointer-events: none; }
body.app-shell .is-copied { color: var(--nx-success) !important; }
body.noxis-light { --nx-bg: #f8f4fc; --nx-surface: #fff; --nx-surface-2: #fff; --nx-text: #1d1228; --nx-muted: #665773; --nx-dim: #806d91; --nx-line: rgba(92,0,159,.15); }
body.noxis-light.app-shell { background: radial-gradient(900px 620px at 82% -10%, rgba(159,0,255,.12), transparent 68%), #f8f4fc !important; }
body.noxis-light.app-shell .app-sidebar,
body.noxis-light.app-shell .app-topbar,
body.noxis-light.app-shell .auth-card,
body.noxis-light.app-shell .panel,
body.noxis-light.app-shell .item-id { background: rgba(255,255,255,.9) !important; color: var(--nx-text) !important; }

@media (max-width: 980px) {
    body.app-shell .app-frame.app-layout { grid-template-columns: 1fr !important; width: min(100% - 24px, 760px) !important; padding-top: 12px !important; }
    body.app-shell .app-sidebar { position: fixed !important; inset: 0 auto 0 0; width: min(310px, 88vw) !important; height: 100vh !important; max-height: none; border-radius: 0 22px 22px 0 !important; transform: translateX(-105%); transition: transform .24s ease; }
    body.app-shell.public-drawer-open .app-sidebar { transform: translateX(0); }
    body.app-shell .app-topbar {
        top: 12px;
        align-self: start;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    body.app-shell .navbar-mobile { display: inline-grid !important; width: 40px; place-items: center; }
    body.app-shell .public-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(3,1,7,.66); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
    body.app-shell.public-drawer-open .public-drawer-backdrop { opacity: 1; pointer-events: auto; }
    body.app-shell .noxis-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body.app-shell .app-frame.app-layout { width: calc(100% - 20px) !important; }
    body.app-shell .public-topbar-context span { display: none; }
    body.app-shell .public-topbar-context strong { font-size: 14px; }
    body.app-shell .public-topbar-site { display: none !important; }
    body.app-shell .noxis-dashboard-heading,
    body.app-shell .noxis-command-card,
    body.app-shell .catalog-category-switcher { align-items: stretch; flex-direction: column; }
    body.app-shell .noxis-command-card { display: grid; grid-template-columns: 1fr; }
    body.app-shell .noxis-ai-search { width: 100%; }
    body.app-shell .noxis-agent-button span { display: none; }
    body.app-shell .noxis-analytics-grid { grid-template-columns: 1fr; }
    body.app-shell .noxis-data-card { padding: 16px; }
    body.app-shell .noxis-dashboard-status { align-self: flex-start; }
    body.app-shell .noxis-command-actions { display: grid; grid-template-columns: 1fr; }
    body.app-shell .shop-toolbar { flex-direction: column; }
    body.app-shell .items {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
    body.app-shell .item-id {
        width: 100%;
        min-height: 0 !important;
        border-radius: 15px !important;
    }
    body.app-shell .item-id .image,
    body.app-shell .item-id .product-card-image {
        min-height: 140px;
    }
    body.app-shell .item-id .product-card-foot,
    body.app-shell .item-id .product-buy {
        width: 100%;
    }
    body.app-shell .hero-character { max-width: 45%; opacity: .42; }
    body.app-shell .hero-banner .hero-title { font-size: 48px !important; }
    body.app-shell th, body.app-shell td { padding: 10px 8px; font-size: 12px; }
}
@media (max-width: 700px) {
    body.app-shell .items {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
@media (max-width: 400px) {
    body.app-shell .nav-actions .profile-menu-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Cyberpunk motion layer. */
body.app-shell {
    --cyber-purple: #9F00FF;
    --cyber-violet: #5C009F;
    --cyber-glow: #C252FF;
    isolation: isolate;
}
body.app-shell .noxis-atmosphere {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(rgba(194, 82, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(194, 82, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: noxis-grid-drift 16s linear infinite;
}
body.app-shell .noxis-atmosphere::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, transparent 0%, rgba(159, 0, 255, .04) 50%, transparent 100%);
    background-size: 100% 260px;
    animation: noxis-scanline 8s linear infinite;
}
body.app-shell #noxis-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .78;
}
body.app-shell .noxis-orb {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .24;
    animation: noxis-orb-breathe 8s ease-in-out infinite;
}
body.app-shell .noxis-orb-a { top: 4%; left: 27%; background: #9F00FF; }
body.app-shell .noxis-orb-b { right: -90px; bottom: 12%; background: #5C009F; animation-delay: -3s; }
body.app-shell .noxis-orb-c { top: 45%; left: 40%; width: 220px; height: 220px; background: #C252FF; opacity: .12; animation-delay: -5s; }
body.app-shell .app-sidebar {
    transition: width .35s cubic-bezier(.4, 0, .2, 1), transform .35s cubic-bezier(.4, 0, .2, 1);
}
body.app-shell .app-sidebar::after {
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, transparent, #C252FF, transparent);
    opacity: .8;
}
body.app-shell .app-nav li a i {
    transition: transform .25s ease, color .25s ease, filter .25s ease;
}
body.app-shell .app-nav li a:hover i { transform: translateY(-2px) rotate(-8deg) scale(1.08); filter: drop-shadow(0 0 8px #C252FF); }
body.app-shell .app-nav li.active a::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 3px;
    border-radius: 4px;
    content: "";
    background: #D888FF;
    box-shadow: 0 0 14px #C252FF;
    animation: noxis-active-pulse 2s ease-in-out infinite;
}
body.app-shell .noxis-command-card,
body.app-shell .noxis-server-card,
body.app-shell .noxis-balance-card,
body.app-shell .item-id,
body.app-shell .panel {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}
body.app-shell .noxis-command-card::before,
body.app-shell .noxis-server-card::before,
body.app-shell .noxis-balance-card::before,
body.app-shell .item-id::before,
body.app-shell .panel::before {
    position: absolute;
    top: -80%;
    left: -45%;
    width: 34%;
    height: 260%;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(216, 136, 255, .18), transparent);
    transform: rotate(24deg);
    animation: noxis-shimmer 6s ease-in-out infinite;
}
body.app-shell .noxis-command-card:focus-within,
body.app-shell .shop-control:focus-within,
body.app-shell .auth-input:focus-within {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px #C252FF, 0 0 25px rgba(159, 0, 255, .6) !important;
}
body.app-shell .shop-control,
body.app-shell .auth-input {
    position: relative;
    isolation: isolate;
}
body.app-shell .shop-control::before,
body.app-shell .auth-input::before {
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    content: "";
    background: conic-gradient(from 90deg, transparent, #9F00FF, #D888FF, transparent 45%);
    opacity: 0;
    animation: noxis-border-spin 2.2s linear infinite;
    transition: opacity .2s ease;
}
body.app-shell .shop-control:focus-within::before,
body.app-shell .auth-input:focus-within::before { opacity: 1; }
body.app-shell .noxis-command-actions a,
body.app-shell .noxis-action-primary,
body.app-shell .btn,
body.app-shell .auth-submit,
body.app-shell .product-buy {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.app-shell .noxis-command-actions a:hover,
body.app-shell .noxis-action-primary:hover,
body.app-shell .btn:hover,
body.app-shell .auth-submit:hover,
body.app-shell .product-buy:hover {
    box-shadow: 0 0 24px rgba(159, 0, 255, .55);
    text-shadow: 0 0 8px #fff;
}
body.app-shell .noxis-command-actions a::after,
body.app-shell .btn::after,
body.app-shell .product-buy::after {
    top: var(--ripple-y, 50%);
    left: var(--ripple-x, 50%);
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: "";
    background: rgba(255,255,255,.55);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}
body.app-shell .noxis-ripple::after { animation: noxis-ripple .6s ease-out; }
body.app-shell .noxis-collapse-toggle {
    position: absolute;
    top: 14px;
    right: 12px;
    z-index: 2;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    color: var(--nx-muted);
    background: rgba(159, 0, 255, .12);
}
body.app-shell .noxis-collapse-toggle:hover { color: #fff; background: rgba(159, 0, 255, .3); }
@media (min-width: 981px) {
    body.app-shell.noxis-sidebar-collapsed .app-frame.app-layout { grid-template-columns: 76px minmax(0, 1fr) !important; }
    body.app-shell.noxis-sidebar-collapsed .app-sidebar { overflow: visible; }
    body.app-shell.noxis-sidebar-collapsed .app-brand-copy,
    body.app-shell.noxis-sidebar-collapsed .online-status,
    body.app-shell.noxis-sidebar-collapsed .app-nav-heading,
    body.app-shell.noxis-sidebar-collapsed .app-nav-group-label,
    body.app-shell.noxis-sidebar-collapsed .app-nav li a span,
    body.app-shell.noxis-sidebar-collapsed .app-sidebar-foot { display: none !important; }
    body.app-shell.noxis-sidebar-collapsed .app-brand { justify-content: center; padding-inline: 10px !important; }
    body.app-shell.noxis-sidebar-collapsed .app-nav li a { justify-content: center; padding-inline: 0; }
    body.app-shell.noxis-sidebar-collapsed .noxis-collapse-toggle i { transform: rotate(180deg); }
}
@keyframes noxis-grid-drift { to { background-position: 0 48px, 48px 0; } }
@keyframes noxis-scanline { from { transform: translateY(-260px); } to { transform: translateY(100vh); } }
@keyframes noxis-orb-breathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(.9); } 50% { transform: translate3d(30px, -22px, 0) scale(1.18); } }
@keyframes noxis-active-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; box-shadow: 0 0 22px #C252FF; } }
@keyframes noxis-shimmer { 0%, 58%, 100% { transform: translateX(-160%) rotate(24deg); } 78% { transform: translateX(500%) rotate(24deg); } }
@keyframes noxis-border-spin { to { transform: rotate(360deg); } }
@keyframes noxis-ripple { 0% { transform: scale(0); opacity: .65; } 100% { transform: scale(24); opacity: 0; } }
@keyframes noxis-agent-pulse { 0%, 100% { box-shadow: 0 0 14px rgba(159,0,255,.28); } 50% { box-shadow: 0 0 28px rgba(194,82,255,.7); } }
@keyframes noxis-levitate { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 6px; } }
@keyframes noxis-node-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes noxis-link-flow { to { stroke-dashoffset: -24; } }
@keyframes noxis-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes noxis-matrix-fall { to { background-position-y: 70px; } }
@media (prefers-reduced-motion: reduce) {
    body.app-shell .noxis-atmosphere,
    body.app-shell .noxis-orb,
    body.app-shell .noxis-atmosphere::after,
    body.app-shell .app-nav li.active a::before { animation: none !important; }
}

/*
 * Public component pass
 * ---------------------
 * The shared shell is deliberately the last stylesheet on every public
 * route. These rules normalize legacy page-specific components without
 * changing their markup, forms, data attributes or JavaScript contracts.
 */
body.app-shell {
    --nx-purple: #9F00FF;
    --nx-violet: #5C009F;
    --nx-purple-soft: rgba(159, 0, 255, .16);
    --nx-glass: rgba(20, 10, 34, .76);
    --nx-glass-strong: rgba(31, 16, 49, .92);
    --nx-line: rgba(220, 190, 255, .15);
    --nx-line-strong: rgba(194, 82, 255, .5);
    --nx-text: #fbf8ff;
    --nx-muted: #b7a7c7;
    --nx-dim: #877596;
    --nx-green: #69e8ad;
    color-scheme: dark;
}
body.app-shell .app-content > #page-content {
    width: min(1180px, 100%);
    margin-inline: auto;
}
body.app-shell .container,
body.app-shell .main-content { width: min(1180px, 100%); }
body.app-shell h1,
body.app-shell h2,
body.app-shell h3,
body.app-shell h4 { color: var(--nx-text); }
body.app-shell p,
body.app-shell .section-note,
body.app-shell .auth-subtitle { color: var(--nx-muted); }
body.app-shell .section-kicker,
body.app-shell .auth-eyebrow,
body.app-shell .orders-overline,
body.app-shell .mint-kicker {
    color: #d696ff !important;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
body.app-shell .btn,
body.app-shell .game-open-button,
body.app-shell .orders-primary-action,
body.app-shell .orders-filter-button,
body.app-shell .mint-open-button,
body.app-shell .mint-topup-button,
body.app-shell .mint-win-claim,
body.app-shell .support-new-link,
body.app-shell .btn-hero-primary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    padding: 10px 16px;
    color: #fff !important;
    background: var(--nx-gradient) !important;
    box-shadow: 0 10px 26px rgba(92, 0, 159, .28);
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.app-shell .btn:hover,
body.app-shell .game-open-button:hover,
body.app-shell .orders-primary-action:hover,
body.app-shell .orders-filter-button:hover,
body.app-shell .mint-open-button:hover,
body.app-shell .mint-topup-button:hover,
body.app-shell .mint-win-claim:hover,
body.app-shell .support-new-link:hover,
body.app-shell .btn-hero-primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 28px rgba(159, 0, 255, .54);
    transform: translateY(-2px);
}
body.app-shell .btn.auth-secondary,
body.app-shell .btn-clear,
body.app-shell .receipt-print,
body.app-shell .receipt-back {
    border: 1px solid var(--nx-line) !important;
    color: #eadcff !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none;
}
body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.app-shell .orders-toolbar select,
body.app-shell .inventory-filters input,
body.app-shell .inventory-filters select {
    min-height: 44px;
    border: 1px solid var(--nx-line) !important;
    border-radius: 11px !important;
    color: var(--nx-text) !important;
    background: rgba(7, 3, 14, .72) !important;
    outline: 0;
}
body.app-shell input::placeholder,
body.app-shell textarea::placeholder { color: #776686; }
body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: var(--nx-purple) !important;
    box-shadow: 0 0 0 3px rgba(159,0,255,.15), 0 0 22px rgba(159,0,255,.16) !important;
}
body.app-shell .panel,
body.app-shell .topup-card,
body.app-shell .account-section,
body.app-shell .account-security-card,
body.app-shell .support-app,
body.app-shell .history-page-panel {
    border: 1px solid var(--nx-line) !important;
    border-radius: var(--nx-radius) !important;
    background: linear-gradient(145deg, rgba(35,17,54,.9), rgba(12,6,20,.94)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
}
body.app-shell .nx-motion-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease var(--nx-motion-delay, 0ms), transform .55s cubic-bezier(.2,.8,.2,1) var(--nx-motion-delay, 0ms);
}
body.app-shell .nx-motion-card.nx-motion-visible { opacity: 1; transform: none; }

/* Auth, legal and service pages. */
body.app-shell .auth-page {
    width: 100% !important;
    min-height: calc(100vh - 150px);
    align-items: start;
    padding: clamp(28px, 5vw, 70px) 0 60px !important;
}
body.app-shell .auth-shell { width: min(100%, 720px); }
body.app-shell .auth-card,
body.app-shell .auth-card-wide .auth-card {
    border: 1px solid var(--nx-line-strong) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(38,18,60,.92), rgba(11,5,18,.97)) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06) !important;
}
body.app-shell .auth-card-wide { width: min(100%, 760px); }
body.app-shell .auth-card h1 { color: #fff !important; }
body.app-shell .auth-card .auth-input input,
body.app-shell .auth-card .auth-input textarea { background: transparent !important; }
body.app-shell .auth-alert,
body.app-shell .alert,
body.app-shell .a-alert .alert {
    border: 1px solid var(--nx-line) !important;
    border-radius: 12px !important;
    color: #f9f2ff !important;
    background: rgba(159,0,255,.12) !important;
}
body.app-shell .auth-alert-error,
body.app-shell .auth-alert-danger,
body.app-shell .alert-danger { border-color: rgba(255,119,152,.42) !important; background: rgba(255,70,120,.1) !important; }
body.app-shell .auth-alert-success,
body.app-shell .alert-success { border-color: rgba(105,232,173,.4) !important; background: rgba(40,185,120,.1) !important; }
body.app-shell .main-content > .item-id {
    max-width: 860px !important;
    border: 1px solid var(--nx-line-strong) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(38,18,60,.92), rgba(11,5,18,.97)) !important;
    box-shadow: var(--nx-shadow) !important;
}
body.app-shell .main-content .hero-title { color: #fff !important; }
body.app-shell .wiki-content { color: var(--nx-muted) !important; }
body.app-shell .wiki-content p { margin: 0; }
body.app-shell .wiki-content strong { color: #e0b6ff; }
body.app-shell .legal,
body.app-shell .legal-content,
body.app-shell .legal-card {
    color: var(--nx-muted);
    line-height: 1.8;
}
body.app-shell .legal h1,
body.app-shell .legal h2,
body.app-shell .legal-content h1,
body.app-shell .legal-content h2 { color: #fff; }
body.app-shell .table-wrap,
body.app-shell .table-card,
body.app-shell .tables {
    overflow-x: auto;
    border: 1px solid var(--nx-line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}
body.app-shell .table-wrap table,
body.app-shell .table-card table,
body.app-shell .tables table { min-width: 560px; }
body.app-shell .alerts,
body.app-shell .alert-stack { display: grid; gap: 10px; }
body.app-shell .status-page-card { display: grid; gap: 12px; }
body.app-shell .status-service {
    display: grid;
    grid-template-columns: 10px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--nx-line);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}
body.app-shell .status-service strong,
body.app-shell .status-service b { color: #fff; }
body.app-shell .status-service small { display: block; margin-top: 3px; color: var(--nx-muted); }
body.app-shell .status-service-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nx-green); box-shadow: 0 0 14px var(--nx-green); }
body.app-shell .status-service.is-error .status-service-dot { background: #ff6e97; box-shadow: 0 0 14px #ff6e97; }
body.app-shell .email-confirm-secondary-link { color: #d59bff !important; }

/* Account and finance. */
body.app-shell .account-shell { max-width: 1180px; }
body.app-shell .account-card {
    display: block;
    padding: clamp(20px, 3vw, 34px) !important;
    border: 1px solid var(--nx-line-strong) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(38,18,60,.92), rgba(11,5,18,.97)) !important;
}
body.app-shell .account-card > .auth-eyebrow { margin-bottom: 10px; }
body.app-shell .account-card > h1 { margin: 0 0 8px; }
body.app-shell .account-details,
body.app-shell .account-overview,
body.app-shell .account-profile-grid,
body.app-shell .account-metric-grid,
body.app-shell .account-progress,
body.app-shell .account-section,
body.app-shell .account-security-grid {
    border-color: var(--nx-line) !important;
    border-radius: 16px !important;
}
body.app-shell .account-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 20px 0; }
body.app-shell .account-details > div,
body.app-shell .account-metric,
body.app-shell .account-overview > div {
    border: 1px solid var(--nx-line);
    border-radius: 13px;
    background: rgba(159,0,255,.07);
}
body.app-shell .account-progress,
body.app-shell .account-section { margin-top: 16px; padding: 20px; background: rgba(255,255,255,.025); }
body.app-shell .account-progress-track { height: 9px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
body.app-shell .account-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--nx-gradient); box-shadow: 0 0 16px #9F00FF; }
body.app-shell .account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
body.app-shell .account-section-heading h2 { margin: 4px 0; }
body.app-shell .account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--nx-line); }
body.app-shell .account-actions .btn { flex: 1 1 180px; }
body.app-shell .account-security-card { padding: 16px; background: rgba(255,255,255,.025) !important; }
body.app-shell .account-security-card-head { display: flex; gap: 12px; align-items: flex-start; }
body.app-shell .account-security-card h3 { margin: 0 0 4px; }
body.app-shell .account-security-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #d79aff; background: rgba(159,0,255,.17); }
body.app-shell .topup-card { padding: 22px; }
body.app-shell .topup-icon { border-color: rgba(159,0,255,.32); color: #da9cff; background: rgba(159,0,255,.13); }
body.app-shell .topup-input,
body.app-shell .topup-btn { border-radius: 11px !important; }
body.app-shell .topup-btn { color: #fff; background: var(--nx-gradient); }

/* Cases, inventory, history and game surfaces. */
body.app-shell .game-page,
body.app-shell .inventory-shell,
body.app-shell .cases-page { width: 100%; }
body.app-shell .catalog-heading { padding: 28px 0 18px; }
body.app-shell .catalog-heading h1 { margin: 8px 0; color: #fff; font-size: clamp(32px, 5vw, 58px); letter-spacing: -.06em; }
body.app-shell .catalog-heading p { max-width: 680px; color: var(--nx-muted); }
body.app-shell .case-back-link {
    border-color: var(--nx-line) !important;
    color: #dfb6ff !important;
    background: rgba(20,8,31,.75) !important;
    transition: transform .2s ease, border-color .2s ease;
}
body.app-shell .case-back-link:hover { border-color: var(--nx-line-strong) !important; transform: translateX(-3px); }
body.app-shell .case-catalog-group,
body.app-shell .inventory-history-panel,
body.app-shell .history-page-panel {
    margin-top: 18px;
    padding: clamp(16px, 3vw, 26px);
    border: 1px solid var(--nx-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(31,15,50,.8), rgba(10,5,17,.9)) !important;
}
body.app-shell .case-catalog-group h2 { color: #fff; }
body.app-shell .inventory-summary,
body.app-shell .inventory-filters { border-color: var(--nx-line) !important; border-radius: 16px !important; background: rgba(24,10,38,.78) !important; }
body.app-shell .inventory-summary > div { border-right-color: var(--nx-line) !important; }
body.app-shell .inventory-summary i,
body.app-shell .inventory-summary b { color: #d18aff !important; }
body.app-shell .inventory-grid { gap: 14px; }
body.app-shell .inventory-item {
    border: 1px solid var(--nx-line) !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg, rgba(42,19,65,.9), rgba(12,6,20,.95)) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
body.app-shell .inventory-item:hover { border-color: var(--nx-line-strong) !important; box-shadow: 0 0 28px rgba(159,0,255,.23); }
body.app-shell .inventory-item .item-icon { filter: drop-shadow(0 0 12px rgba(159,0,255,.32)); }
body.app-shell .inventory-item button { border: 1px solid var(--nx-line) !important; border-radius: 9px; color: #fff; background: rgba(159,0,255,.16); }
body.app-shell .inventory-empty { border: 1px solid var(--nx-line) !important; border-radius: 18px !important; background: rgba(24,10,38,.72) !important; }
body.app-shell .inventory-history-entry {
    border-color: var(--nx-line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.03) !important;
}
body.app-shell .inventory-history-icon { color: #d494ff !important; background: rgba(159,0,255,.16) !important; }
body.app-shell .inventory-history-value b { color: var(--nx-green) !important; }
body.app-shell .game-feed {
    border-color: var(--nx-line-strong) !important;
    background: linear-gradient(180deg, rgba(38,18,60,.8), rgba(7,3,12,.98) 78%) !important;
}
body.app-shell .minigame-button,
body.app-shell .game-open-button { color: #fff; background: var(--nx-gradient); }
body.app-shell .noxis-minigame { border-color: var(--nx-line-strong); background: radial-gradient(circle at 82% 50%, rgba(159,0,255,.2), transparent 35%), linear-gradient(135deg, rgba(38,18,60,.95), rgba(9,4,16,.97)); }
body.app-shell .minigame-stage,
body.app-shell .game-case-panel { border-color: var(--nx-line) !important; background: rgba(7,3,14,.5) !important; }

/* Mint, support and knowledge base. */
body.app-shell .mint-page,
body.app-shell .support-shell,
body.app-shell .wiki-page { color: var(--nx-text); }
body.app-shell .mint-art-hero,
body.app-shell .mint-hero,
body.app-shell .mint-card,
body.app-shell .support-app,
body.app-shell .wiki-hero,
body.app-shell .wiki-section,
body.app-shell .wiki-footer-card {
    border-color: var(--nx-line-strong) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(38,18,60,.88), rgba(10,5,17,.95)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.3);
}
body.app-shell .mint-page .mint-hero,
body.app-shell .mint-page .mint-card { border-color: var(--nx-line) !important; }
body.app-shell .mint-hero-pills span,
body.app-shell .mint-rule,
body.app-shell .mint-odds-card .mint-odd { border-color: var(--nx-line) !important; background: rgba(255,255,255,.035) !important; }
body.app-shell .mint-live span { background: var(--nx-green) !important; box-shadow: 0 0 12px var(--nx-green); }
body.app-shell .mint-deck,
body.app-shell .mint-choice-card { border-color: var(--nx-line-strong) !important; }
body.app-shell .mint-choice-card.is-selected,
body.app-shell .mint-choice-card:hover { border-color: #d28aff !important; box-shadow: 0 0 24px rgba(159,0,255,.4); }
body.app-shell .support-app { padding: clamp(14px, 3vw, 28px); }
body.app-shell .support-app-head,
body.app-shell .support-ticket-list,
body.app-shell .support-main-panel { border-color: var(--nx-line) !important; }
body.app-shell .support-ticket,
body.app-shell .support-message,
body.app-shell .support-welcome { border-color: var(--nx-line) !important; border-radius: 13px !important; background: rgba(255,255,255,.035) !important; }
body.app-shell .support-ticket.is-active { border-color: var(--nx-line-strong) !important; background: rgba(159,0,255,.14) !important; }
body.app-shell .support-online strong { color: var(--nx-green) !important; }
body.app-shell .wiki-page { padding-top: 34px; }
body.app-shell .wiki-hero,
body.app-shell .wiki-section,
body.app-shell .wiki-footer-card { border-color: var(--nx-line) !important; }
body.app-shell .wiki-hero-actions .btn.auth-secondary { color: #eadcff !important; }
body.app-shell .wiki-jump,
body.app-shell .wiki-step,
body.app-shell .wiki-info-card,
body.app-shell .wiki-privilege,
body.app-shell .wiki-security-grid > div,
body.app-shell .wiki-faq details { border-color: var(--nx-line) !important; background: rgba(255,255,255,.035) !important; }
body.app-shell .wiki-jump a:hover { background: rgba(159,0,255,.16) !important; }
body.app-shell .wiki-eyebrow,
body.app-shell .wiki-section-heading > span,
body.app-shell .wiki-privilege h3 { color: #d696ff !important; }
body.app-shell .wiki-step > b,
body.app-shell .wiki-info-card > i,
body.app-shell .wiki-security-grid > div > i { color: #d696ff !important; background: rgba(159,0,255,.14) !important; }
body.app-shell .wiki-note { border-color: rgba(159,0,255,.3) !important; background: rgba(159,0,255,.1) !important; color: #d9c5e8 !important; }

/* Orders and checkout. */
body.app-shell .orders-shell { width: min(100%, 1080px); }
body.app-shell .orders-hero,
body.app-shell .orders-panel,
body.app-shell .orders-stat,
body.app-shell .receipt-card,
body.app-shell .checkout-result-card {
    border: 1px solid var(--nx-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(38,18,60,.9), rgba(11,5,18,.96)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.3);
}
body.app-shell .orders-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(22px,4vw,36px); }
body.app-shell .orders-hero h1 { margin: 8px 0; }
body.app-shell .orders-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 14px 0; }
body.app-shell .orders-stat { position: relative; padding: 18px; }
body.app-shell .orders-stat span,
body.app-shell .orders-stat i { color: var(--nx-muted); }
body.app-shell .orders-stat strong { display: block; margin-top: 7px; color: #fff; font-size: 24px; }
body.app-shell .orders-panel { padding: clamp(16px, 3vw, 26px); }
body.app-shell .orders-panel-head,
body.app-shell .orders-toolbar,
body.app-shell .order-row-title,
body.app-shell .receipt-topbar,
body.app-shell .receipt-product,
body.app-shell .receipt-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
body.app-shell .orders-toolbar { margin: 16px 0; }
body.app-shell .orders-search { display: flex; flex: 1; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border: 1px solid var(--nx-line); border-radius: 11px; background: rgba(7,3,14,.72); }
body.app-shell .orders-search input { width: 100%; min-height: 40px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.app-shell .order-row { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; margin-top: 10px; padding: 16px; border: 1px solid var(--nx-line); border-radius: 14px; background: rgba(255,255,255,.03); transition: transform .2s ease, border-color .2s ease; }
body.app-shell .order-row:hover { border-color: var(--nx-line-strong); transform: translateY(-2px); }
body.app-shell .order-row-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #d89aff; background: rgba(159,0,255,.15); }
body.app-shell .order-row-title h3 { margin: 0; color: #fff; font-size: 15px; }
body.app-shell .order-row-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; color: var(--nx-dim); font-size: 11px; }
body.app-shell .order-row-description { margin: 9px 0 0; font-size: 12px; }
body.app-shell .order-row-status { color: var(--nx-green); font-size: 11px; font-weight: 800; }
body.app-shell .orders-empty-new { padding: 38px 16px; text-align: center; }
body.app-shell .receipt-card { padding: clamp(20px,4vw,36px); margin-bottom: 18px; }
body.app-shell .receipt-brand { display: flex; gap: 12px; align-items: center; margin: 24px 0; }
body.app-shell .receipt-brand-mark,
body.app-shell .checkout-result-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: var(--nx-gradient); box-shadow: 0 0 24px rgba(159,0,255,.4); }
body.app-shell .receipt-brand strong,
body.app-shell .receipt-brand span { display: block; }
body.app-shell .receipt-brand span,
body.app-shell .receipt-details dt,
body.app-shell .receipt-footer { color: var(--nx-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
body.app-shell .receipt-brand strong { margin-top: 3px; color: #fff; }
body.app-shell .receipt-success,
body.app-shell .receipt-error { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--nx-line); border-radius: 12px; background: rgba(105,232,173,.08); }
body.app-shell .receipt-success i { color: var(--nx-green); }
body.app-shell .receipt-error { background: rgba(255,70,120,.08); }
body.app-shell .receipt-details { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 18px 0; padding: 18px 0; border-block: 1px solid var(--nx-line); }
body.app-shell .receipt-details dd { margin: 5px 0 0; color: #fff; font-size: 13px; overflow-wrap: anywhere; }
body.app-shell .checkout-result-page { display: grid; min-height: calc(100vh - 170px); place-items: center; padding: 48px 0 72px; }
body.app-shell .checkout-result-card { width: min(100%, 640px); padding: clamp(24px,5vw,50px); text-align: center; }
body.app-shell .checkout-result-icon { width: 64px; height: 64px; margin: 0 auto 18px; font-size: 24px; }
body.app-shell .checkout-result-card h1 { margin: 10px 0; color: #fff; }
body.app-shell .checkout-result-card p { line-height: 1.7; }
body.app-shell .checkout-result-note,
body.app-shell .checkout-result-order { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 18px 0; padding: 13px; border: 1px solid var(--nx-line); border-radius: 11px; color: var(--nx-muted); background: rgba(255,255,255,.035); }
body.app-shell .checkout-result-order code { color: #e1a7ff; }
body.app-shell .checkout-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; }
body.app-shell .checkout-result-support { display: inline-block; margin-top: 24px; color: #d59bff !important; }

@media (max-width: 980px) {
    body.app-shell .app-frame.app-layout { width: min(100% - 24px, 760px) !important; }
    body.app-shell .orders-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    body.app-shell .account-card { padding: 20px !important; }
}
@media (max-width: 680px) {
    body.app-shell .app-frame.app-layout { width: calc(100% - 20px) !important; }
    body.app-shell .account-details,
    body.app-shell .receipt-details,
    body.app-shell .orders-stats { grid-template-columns: 1fr; }
    body.app-shell .orders-hero,
    body.app-shell .orders-toolbar,
    body.app-shell .orders-panel-head { align-items: stretch; flex-direction: column; }
    body.app-shell .orders-toolbar .orders-filter-button { width: 100%; }
    body.app-shell .order-row-title,
    body.app-shell .receipt-product { align-items: flex-start; flex-direction: column; }
    body.app-shell .support-app { padding: 12px; }
    body.app-shell .checkout-result-page { padding-top: 22px; }
}
@media (max-width: 480px) {
    body.app-shell .auth-page { padding-top: 22px !important; }
    body.app-shell .auth-card,
    body.app-shell .main-content > .item-id { border-radius: 18px !important; }
    body.app-shell .account-card { padding: 16px !important; }
    body.app-shell .account-actions .btn,
    body.app-shell .checkout-result-actions .btn { width: 100%; }
    body.app-shell .receipt-card,
    body.app-shell .checkout-result-card { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.app-shell *,
    body.app-shell *::before,
    body.app-shell *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body.app-shell .noxis-toast-stack {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 12000;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
body.app-shell .noxis-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid rgba(194,82,255,.42);
    border-radius: 13px;
    color: #fff;
    background: rgba(19,13,30,.94);
    box-shadow: 0 16px 36px rgba(0,0,0,.34), 0 0 22px rgba(159,0,255,.18);
    backdrop-filter: blur(18px);
    animation: noxis-toast-in .22s ease both;
}
body.app-shell .noxis-toast i { color: #d888ff; }
body.app-shell .noxis-toast-success { border-color: rgba(105,232,173,.45); }
body.app-shell .noxis-toast-success i { color: #69e8ad; }
body.app-shell .noxis-toast.is-hiding { animation: noxis-toast-out .22s ease both; }
body.app-shell .noxis-catalog-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 30px 16px;
    border: 1px dashed rgba(194,82,255,.4);
    border-radius: 14px;
    color: var(--nx-muted);
    text-align: center;
}
body.app-shell .shop-sort-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
body.app-shell .noxis-node-map,
body.app-shell .noxis-chart-card { position: relative; overflow: hidden; }
body.app-shell .noxis-node-map::after,
body.app-shell .noxis-chart-card::after {
    position: absolute;
    top: var(--widget-light-y, 50%);
    left: var(--widget-light-x, 50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(194,82,255,.14);
    content: "";
    filter: blur(34px);
    opacity: .7;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: top .25s ease, left .25s ease;
}
body.app-shell .noxis-live-pulse { animation: noxis-live-pulse .7s ease; }
@keyframes noxis-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes noxis-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes noxis-live-pulse { 50% { filter: brightness(1.7); transform: scale(1.04); } }

body.app-shell:not(.noxis-loaded) .app-frame { opacity: 0; transform: translateY(10px); }
body.app-shell .app-frame { transition: opacity .45s ease, transform .45s ease; }
body.app-shell .noxis-command-palette {
    position: fixed;
    z-index: 20000;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: min(15vh, 120px) 16px 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
}
body.app-shell .noxis-command-palette.is-open { visibility: visible; opacity: 1; }
body.app-shell .noxis-command-backdrop { position: absolute; inset: 0; background: rgba(3,1,7,.72); backdrop-filter: blur(9px); }
body.app-shell .noxis-command-dialog {
    position: relative;
    width: min(560px, 100%);
    overflow: hidden;
    border: 1px solid var(--nx-line-strong);
    border-radius: 18px;
    background: rgba(18,8,30,.97);
    box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 40px rgba(159,0,255,.25);
    transform: translateY(-10px) scale(.98);
    transition: transform .2s ease;
}
body.app-shell .noxis-command-palette.is-open .noxis-command-dialog { transform: none; }
body.app-shell .noxis-command-head,
body.app-shell .noxis-command-input { display: flex; align-items: center; gap: 12px; }
body.app-shell .noxis-command-head { justify-content: space-between; padding: 17px 18px 12px; }
body.app-shell .noxis-command-head button { border: 0; color: var(--nx-muted); background: transparent; }
body.app-shell .noxis-command-input { margin: 0 14px 12px; padding: 0 12px; border: 1px solid var(--nx-line); border-radius: 11px; color: #d888ff; background: rgba(5,2,10,.72); }
body.app-shell .noxis-command-input input { width: 100%; min-height: 44px; border: 0; outline: 0; color: #fff; background: transparent; }
body.app-shell .noxis-command-results { display: grid; gap: 3px; max-height: 300px; overflow: auto; padding: 0 8px 8px; }
body.app-shell .noxis-command-result { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 11px; border-radius: 9px; color: var(--nx-muted); text-decoration: none; }
body.app-shell .noxis-command-result:hover,
body.app-shell .noxis-command-result.is-selected { color: #fff; background: rgba(159,0,255,.18); }
body.app-shell .noxis-command-result i { width: 18px; color: #d888ff; text-align: center; }
body.app-shell .noxis-command-result kbd { margin-left: auto; color: var(--nx-dim); }
body.app-shell .noxis-command-foot { display: block; padding: 10px 18px 14px; border-top: 1px solid var(--nx-line); color: var(--nx-dim); }
body.app-shell .noxis-mobile-bar { display: none; }
@media (max-width: 680px) {
    body.app-shell .noxis-mobile-bar {
        position: fixed;
        z-index: 100;
        right: 10px;
        bottom: 10px;
        left: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 6px;
        border: 1px solid var(--nx-line-strong);
        border-radius: 16px;
        background: rgba(18,8,30,.92);
        box-shadow: 0 15px 40px rgba(0,0,0,.4);
        backdrop-filter: blur(18px);
    }
    body.app-shell .noxis-mobile-bar a { display: grid; gap: 3px; min-width: 0; padding: 7px 3px; border-radius: 10px; color: var(--nx-muted); font-size: 9px; text-align: center; text-decoration: none; }
    body.app-shell .noxis-mobile-bar a i { color: #c252ff; font-size: 15px; }
    body.app-shell .noxis-mobile-bar a.is-active { color: #fff; background: rgba(159,0,255,.24); }
    body.app-shell .app-content { padding-bottom: 74px; }
}

/* Final visual system override. Keep this block last so legacy component
   declarations cannot undo the unified site appearance. */
body.app-shell {
    background: #070611 !important;
    background-image: radial-gradient(circle at 12% 0%, rgba(174, 52, 255, .2), transparent 30rem), radial-gradient(circle at 96% 18%, rgba(32, 187, 255, .14), transparent 30rem) !important;
}

body.app-shell .app-frame {
    background: transparent !important;
}

body.app-shell .app-sidebar {
    border: 1px solid rgba(180, 86, 255, .4) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(31, 15, 63, .97), rgba(8, 8, 24, .96)) !important;
    box-shadow: 18px 28px 70px rgba(0,0,0,.4), 0 0 32px rgba(160, 63, 255, .18) !important;
}

body.app-shell .app-topbar {
    border: 1px solid rgba(180, 86, 255, .38) !important;
    border-radius: 18px !important;
    background: rgba(17, 10, 39, .84) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.08) !important;
}

body.app-shell .app-nav a {
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #b8abcf !important;
}

body.app-shell .app-nav a:hover,
body.app-shell .app-nav li.active a {
    border-color: rgba(255, 89, 220, .52) !important;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(145, 51, 255, .42), rgba(255, 78, 216, .12)) !important;
    box-shadow: 0 0 24px rgba(160, 53, 255, .22) !important;
}

body.app-shell .hero-banner,
body.app-shell .noxis-command-card,
body.app-shell .auth-card,
body.app-shell .account-card,
body.app-shell .orders-panel,
body.app-shell .orders-hero,
body.app-shell .support-panel,
body.app-shell .support-hero,
body.app-shell .wiki-card,
body.app-shell .item-id,
body.app-shell .payment-id.window,
body.app-shell .faq-item,
body.app-shell .checkout-result-card {
    border: 1px solid rgba(180, 86, 255, .38) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(29, 20, 58, .93), rgba(9, 9, 27, .94)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07) !important;
}

body.app-shell .hero-banner {
    min-height: 410px !important;
    background: linear-gradient(120deg, rgba(47, 20, 92, .9), rgba(11, 10, 31, .94)) !important;
}

body.app-shell .hero-title {
    color: #fff !important;
    text-shadow: 0 0 36px rgba(203, 83, 255, .4) !important;
}

body.app-shell .item-id:hover,
body.app-shell .product-card:hover,
body.app-shell .noxis-server-card:hover,
body.app-shell .noxis-balance-card:hover,
body.app-shell .orders-summary-card:hover {
    border-color: rgba(255, 91, 224, .72) !important;
    box-shadow: 0 26px 64px rgba(80, 20, 130, .46), 0 0 30px rgba(194, 61, 255, .2) !important;
    transform: translateY(-5px) !important;
}

body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit,
body.app-shell .hero-actions .btn {
    border: 1px solid rgba(255, 102, 225, .65) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #9337f3, #d84ff1 55%, #ff58ca) !important;
    box-shadow: 0 13px 32px rgba(169, 50, 255, .32) !important;
}

body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .auth-submit:hover,
body.app-shell .hero-actions .btn:hover {
    background: linear-gradient(135deg, #b45bff, #f264e8 55%, #ff7bd5) !important;
    box-shadow: 0 17px 40px rgba(195, 62, 255, .48), 0 0 22px rgba(255, 83, 216, .28) !important;
    transform: translateY(-3px) !important;
}

body.app-shell .catalog-toolbar,
body.app-shell .shop-toolbar,
body.app-shell .orders-toolbar,
body.app-shell .support-toolbar {
    border: 1px solid rgba(180, 86, 255, .28) !important;
    border-radius: 18px !important;
    background: rgba(20, 13, 43, .78) !important;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.app-shell .shop-control,
body.app-shell .shop-search {
    border-color: rgba(180, 86, 255, .34) !important;
    border-radius: 12px !important;
    background: rgba(7, 7, 23, .82) !important;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: #df67ff !important;
    box-shadow: 0 0 0 3px rgba(213, 83, 255, .16), 0 0 24px rgba(171, 54, 255, .22) !important;
}

body.app-shell .footer {
    border-top-color: rgba(180, 86, 255, .24) !important;
}

@media (max-width: 900px) {
    body.app-shell .app-frame {
        width: calc(100% - 20px) !important;
    }
    body.app-shell .hero-banner {
        min-height: 340px !important;
    }
}

/* Visual overhaul: one consistent product surface across every public page. */
body.app-shell {
    --nx-surface: rgba(15, 13, 35, .78);
    --nx-surface-strong: rgba(22, 17, 49, .9);
    --nx-stroke: rgba(173, 95, 255, .25);
    --nx-text: #f7f4ff;
    --nx-muted: #a69abf;
    color: var(--nx-text);
    background:
        radial-gradient(circle at 16% 0%, rgba(169, 54, 255, .2), transparent 30rem),
        radial-gradient(circle at 100% 18%, rgba(25, 178, 255, .14), transparent 32rem),
        #070611;
}

body.app-shell .app-frame {
    width: min(1500px, calc(100% - 40px));
    gap: 18px;
}

body.app-shell .app-sidebar {
    border: 1px solid var(--nx-stroke) !important;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(27, 13, 57, .95), rgba(10, 9, 26, .92)) !important;
    box-shadow: 16px 24px 70px rgba(0, 0, 0, .34), 0 0 32px rgba(147, 58, 255, .1);
}

body.app-shell .app-brand {
    min-height: 86px;
    padding: 18px;
    border-bottom-color: rgba(255,255,255,.1);
}

body.app-shell .app-brand-mark {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 117, 239, .7);
    border-radius: 15px;
    background: linear-gradient(135deg, #9e3cff, #fa4ed7);
    box-shadow: 0 0 26px rgba(202, 64, 255, .5);
}

body.app-shell .app-nav-heading,
body.app-shell .app-nav-group-label {
    color: #8d7ca8;
}

body.app-shell .app-nav a {
    min-height: 46px;
    margin: 3px 10px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #b7aacd;
}

body.app-shell .app-nav a:hover {
    border-color: rgba(198, 104, 255, .3);
    color: #fff;
    background: rgba(163, 61, 255, .17);
    box-shadow: inset 0 0 22px rgba(166, 70, 255, .1);
}

body.app-shell .app-nav li.active a {
    border-color: rgba(255, 87, 221, .52);
    color: #fff;
    background: linear-gradient(90deg, rgba(155, 55, 255, .42), rgba(255, 79, 216, .12));
    box-shadow: 0 0 24px rgba(168, 55, 255, .2), inset 0 0 18px rgba(255, 79, 216, .08);
}

body.app-shell .app-topbar {
    min-height: 66px;
    border: 1px solid var(--nx-stroke) !important;
    border-radius: 18px;
    background: rgba(15, 10, 34, .75) !important;
}

body.app-shell .app-content {
    min-width: 0;
    padding-top: 10px;
}

body.app-shell .hero-banner,
body.app-shell .noxis-command-card,
body.app-shell .auth-card,
body.app-shell .account-card,
body.app-shell .orders-panel,
body.app-shell .orders-hero,
body.app-shell .support-panel,
body.app-shell .support-hero,
body.app-shell .wiki-card,
body.app-shell .item-id,
body.app-shell .payment-id.window,
body.app-shell .faq-item,
body.app-shell .checkout-result-card {
    border: 1px solid var(--nx-stroke) !important;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(28, 20, 57, .88), rgba(10, 10, 27, .9)) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.07);
}

body.app-shell .hero-banner {
    min-height: 410px;
    padding: clamp(30px, 5vw, 68px);
    background:
        linear-gradient(120deg, rgba(40, 18, 80, .8), rgba(12, 12, 33, .88)),
        radial-gradient(circle at 80% 10%, rgba(255, 75, 218, .22), transparent 25rem) !important;
}

body.app-shell .hero-title {
    max-width: 740px;
    color: #fff;
    font-size: clamp(42px, 7vw, 86px);
    letter-spacing: -.07em;
    text-shadow: 0 0 34px rgba(188, 73, 255, .28);
}

body.app-shell .hero-subtitle,
body.app-shell .noxis-command-copy small,
body.app-shell .item-id .description,
body.app-shell .payment-id.window .player {
    color: var(--nx-muted);
}

body.app-shell .hero-actions .btn,
body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit {
    border: 1px solid rgba(255, 94, 225, .5);
    border-radius: 13px;
    background: linear-gradient(135deg, #9e3cff, #d84fff 55%, #ff55c8);
    box-shadow: 0 12px 28px rgba(169, 50, 255, .24);
}

body.app-shell .hero-actions .btn:hover,
body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .auth-submit:hover {
    background: linear-gradient(135deg, #b85aff, #f35fe4 55%, #ff75d2);
    box-shadow: 0 16px 36px rgba(195, 62, 255, .42), 0 0 20px rgba(255, 83, 216, .25);
}

body.app-shell .catalog-toolbar,
body.app-shell .shop-toolbar,
body.app-shell .orders-toolbar,
body.app-shell .support-toolbar {
    padding: 12px;
    border: 1px solid rgba(173, 95, 255, .2);
    border-radius: 18px;
    background: rgba(20, 14, 42, .64);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.app-shell .shop-control,
body.app-shell .shop-search {
    border-color: rgba(173, 95, 255, .28) !important;
    border-radius: 12px;
    color: #fff;
    background: rgba(8, 8, 23, .72);
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: #df67ff !important;
    box-shadow: 0 0 0 3px rgba(213, 83, 255, .14), 0 0 24px rgba(171, 54, 255, .15);
}

body.app-shell .item-id {
    overflow: hidden;
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}

body.app-shell .item-id:hover {
    border-color: rgba(255, 91, 224, .65) !important;
    box-shadow: 0 24px 55px rgba(72, 20, 113, .4), 0 0 28px rgba(194, 61, 255, .16);
}

body.app-shell .item-id .image,
body.app-shell .product-image {
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.2);
}

body.app-shell .footer {
    margin-top: 34px;
    border-top: 1px solid rgba(173, 95, 255, .18);
    color: #8e81a9;
}

@media (max-width: 900px) {
    body.app-shell .app-frame {
        width: calc(100% - 20px);
        gap: 10px;
    }
    body.app-shell .app-sidebar {
        border-radius: 0 22px 22px 0;
    }
    body.app-shell .hero-banner {
        min-height: 340px;
        padding: 28px 20px;
    }
}