@font-face {
    font-family: "Gowardo";
    src: url("../fonts/Gowardo.woff2") format("woff2");
}

:root {
    --bg-0: #07111f;
    --bg-1: #0b1b30;
    --bg-2: #112a48;
    --panel: rgba(10, 24, 43, 0.9);
    --panel-strong: rgba(6, 14, 26, 0.95);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-strong: rgba(255, 255, 255, 0.09);
    --line: rgba(144, 220, 255, 0.14);
    --line-strong: rgba(93, 195, 255, 0.4);
    --text: #eef7ff;
    --muted: #b6cde2;
    --wolf-blue: #58bfff;
    --wolf-blue-strong: #2a82ff;
    --wolf-cyan: #79ecff;
    --ice: #dff7ff;
    --steel: #8da6c6;
    --danger: #ff8ea1;
    --success: #7ee7d0;
    --admin: #b992ff;
    --vip: #ffd76f;
    --creator: #7effd8;
    --moderator: #8fd0ff;
    --member: #9eb8d5;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
    --radius-panel: 28px;
    --radius-card: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
    font-family: "Gowardo", Tahoma, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(88, 191, 255, 0.22), transparent 26%),
        radial-gradient(circle at bottom left, rgba(121, 236, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #132742 0%, #0b1730 38%, #07111f 100%);
    overflow-x: hidden;
    position: relative;
}
body::before, body::after {
    content: ""; position: fixed; width: 26rem; height: 26rem; pointer-events: none;
    filter: blur(120px); z-index: 0; animation: blobFloat 16s ease-in-out infinite alternate;
}
body::before { top: -9rem; right: -8rem; background: rgba(88, 191, 255, 0.18); }
body::after { left: -8rem; bottom: -9rem; background: rgba(42, 130, 255, 0.16); animation-duration: 19s; }
body::selection { background: rgba(88, 191, 255, 0.28); }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }

select, select option {
    background: #0d1f36;
    color: #eef7ff;
}

textarea { resize: vertical; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: radial-gradient(circle at top right, rgba(88, 191, 255, 0.22), transparent 26%), radial-gradient(circle at bottom left, rgba(121, 236, 255, 0.18), transparent 28%), linear-gradient(180deg, #132742 0%, #0b1730 38%, #07111f 100%);}
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--wolf-cyan), var(--wolf-blue-strong)); border-radius: 999px; }

.grid-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 34px 34px; opacity: 0.26;
    mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}

.site-shell { position: relative; z-index: 1; width: min(1320px, calc(100% - 32px)); margin: 18px auto; }
.payment-shell { min-height: calc(100vh - 36px); display: grid; place-items: center; }

.glass-panel {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(11, 27, 48, 0.96), rgba(6, 14, 26, 0.96));
    border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow);
}
.glass-panel::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(121,236,255,0.32), transparent 34%, rgba(42,130,255,0.24));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.section-chip {
    display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 16px;
    border-radius: 12px; border: 1px solid rgba(121,236,255,0.28); background: rgba(88,191,255,0.12); color: #e4fbff; font-size: 14px;
}
.section-chip::before { display: none; }
.section-chip i { font-size: 16px; }
.section-chip-blue { background: rgba(42,130,255,0.16); border-color: rgba(88,191,255,0.28); }
.panel-chip { margin-bottom: 10px; }

.page-title, .panel-title { margin-top: 18px; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; }
.page-text, .muted-text { color: var(--muted); line-height: 1.9; }
.fade-in-up { animation: fadeInUp 0.8s ease both; }
.hide { display: none !important; }

.btn-primary, .btn-secondary, .tab-button, .action-link, .ghost-link, .remove-btn {
    min-height: 52px; border: 1px solid transparent; cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn-primary {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 18px; border-radius: 16px; color: #031019; font-weight: 700;
    background: linear-gradient(180deg, #d9fbff 0%, #7fe5ff 45%, #2a82ff 100%);
    box-shadow: 0 10px 0 #0d4ea4, 0 18px 32px rgba(0,0,0,0.24);
}
.btn-primary:hover, .tab-button:hover, .action-link:hover, .ghost-link:hover, .remove-btn:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 6px 0 #0d4ea4, 0 8px 18px rgba(0,0,0,0.18); }
.btn-secondary, .tab-button, .action-link, .ghost-link {
    border-radius: 14px; color: var(--muted); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.06);
}
.tab-button.is-active, .action-link.is-active, .ghost-link:hover, .tab-button:hover, .action-link:hover {
    color: var(--text); border-color: var(--line-strong); background: rgba(88,191,255,0.14); box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.ghost-link { width: 100%; background: transparent; }
.block-action { background: rgba(255, 174, 0, 0.12); border-color: rgba(255,174,0,0.16); }
.delete-action { background: rgba(255, 142, 161, 0.12); border-color: rgba(255,142,161,0.16); color: #ffe3ea; padding: 15px 20px 10px 20px; }

.form-field { display: grid; gap: 8px; }
.form-field label { color: #ebf8ff; font-size: 15px; }
.input-control {
    width: 100%; min-height: 56px; padding: 0 16px; border-radius: 16px;
    border: 1px solid rgba(144,220,255,0.16); background: rgba(255,255,255,0.05); color: var(--text);
    outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.input-control::placeholder { color: #98b9d4; }
.input-control:focus { transform: translateY(-1px); border-color: rgba(121,236,255,0.72); box-shadow: 0 0 0 4px rgba(88,191,255,0.12); }
.dark-select { appearance: none; }
.textarea-control { min-height: 118px; padding: 14px 16px; }
.file-control { padding-top: 14px; }

.auth-shell { min-height: calc(100vh - 36px); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr); gap: 24px; align-items: stretch; }
.auth-hero, .auth-panel { padding: 30px; }
.auth-hero { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hero-copy .page-title { max-width: 12ch; }
.auth-visual {
    position: relative; min-height: 390px; border-radius: 26px; border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(101,198,255,0.26) 0%, rgba(101,198,255,0.08) 30%, rgba(15,31,54,0.12) 30%), linear-gradient(180deg, #68bfff 0%, #caeeff 30%, #16304f 30%, #102339 62%, #0a1829 100%);
    overflow: hidden; transform-style: preserve-3d; transition: transform 0.2s ease;
}
.voxel-moon { position: absolute; top: 34px; right: 56px; width: 82px; height: 82px; border-radius: 18px; background: linear-gradient(180deg, #effcff, #a8ecff); box-shadow: 0 0 34px rgba(121,236,255,0.45); animation: floatThing 6s ease-in-out infinite; }
.voxel-cloud { position: absolute; height: 28px; background: rgba(230,248,255,0.78); box-shadow: 28px 0 0 rgba(230,248,255,0.78), 56px 0 0 rgba(230,248,255,0.78), 14px -14px 0 rgba(230,248,255,0.78), 42px -14px 0 rgba(230,248,255,0.78), 70px -14px 0 rgba(230,248,255,0.78); width: 14px; opacity: 0.75; }
.cloud-a { top: 68px; left: 44px; animation: cloudSlide 18s linear infinite; }
.cloud-b { top: 126px; left: 210px; transform: scale(0.85); animation: cloudSlide 24s linear infinite reverse; }
.terrain { position: absolute; right: 0; left: 0; image-rendering: pixelated; }
.terrain-back { bottom: 112px; height: 110px; background: linear-gradient(90deg, transparent 0 6%, #348fe9 6% 18%, transparent 18% 23%, #4aa5ff 23% 38%, transparent 38% 45%, #3e8be3 45% 60%, transparent 60% 68%, #54b1ff 68% 84%, transparent 84% 100%), linear-gradient(180deg, #7fd8ff 0 22%, #0d335f 22% 100%); clip-path: polygon(0 62%, 12% 44%, 24% 54%, 34% 28%, 48% 48%, 60% 16%, 73% 42%, 84% 26%, 100% 48%, 100% 100%, 0 100%); opacity: 0.94; }
.terrain-front { bottom: 0; height: 160px; background: linear-gradient(180deg, #9be7ff 0 20%, #0f3d70 20% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 18px, transparent 18px 36px); clip-path: polygon(0 38%, 8% 34%, 16% 52%, 28% 44%, 40% 58%, 52% 32%, 64% 50%, 76% 28%, 88% 44%, 100% 30%, 100% 100%, 0 100%); }
.crystal { position: absolute; bottom: 120px; width: 54px; height: 90px; background: linear-gradient(180deg, rgba(223,247,255,0.95), rgba(88,191,255,0.95)); clip-path: polygon(50% 0%, 90% 24%, 100% 70%, 58% 100%, 14% 72%, 0% 28%); filter: drop-shadow(0 0 18px rgba(121,236,255,0.35)); }
.crystal-a { left: 82px; animation: floatTag 7s ease-in-out infinite; }
.crystal-b { right: 112px; transform: scale(0.82); animation: floatTag 6s ease-in-out infinite reverse; }
.wolf-logo-card, .floating-card, .pixel-preview {
    position: absolute; background: rgba(8,18,34,0.78); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; box-shadow: 0 18px 28px rgba(0,0,0,0.22); backdrop-filter: blur(8px);
}
.wolf-logo-card { left: 30px; bottom: 112px; display: flex; align-items: center; gap: 14px; padding: 16px; }
.wolf-logo { width: 74px; height: 74px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25)); }
.wolf-logo-card small, .floating-card small { color: var(--wolf-cyan); }
.wolf-logo-card strong, .floating-card strong { display: block; margin-top: 4px; font-size: 15px; }
.floating-card { padding: 12px 14px; animation: floatTag 7s ease-in-out infinite; }
.floating-card-top { top: 28px; left: 28px; }
.floating-card-bottom { right: 24px; bottom: 132px; animation-delay: 0.8s; }
.pixel-preview { right: 26px; bottom: 24px; width: min(46%, 240px); padding: 16px; display: grid; gap: 10px; }
.pixel-preview-bar { position: relative; display: block; height: 14px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; }
.pixel-preview-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bar-fill, 70%); background: linear-gradient(90deg, var(--wolf-cyan), var(--wolf-blue-strong)); animation: pulseBar 4.2s ease-in-out infinite; }

.auth-highlights, .auth-footer-cards, .dashboard-stats, .store-grid, .admin-grid, .admin-hero-grid, .admin-user-grid, .account-grid, .payment-meta-grid { display: grid; gap: 16px; }
.auth-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-highlights article, .mini-stat, .store-card, .admin-card, .summary-card, .cart-card, .topup-card, .admin-user-card, .payment-meta-item {
    padding: 18px; border-radius: var(--radius-card); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
}
.auth-highlights strong, .mini-stat strong, .summary-card strong { display: block; margin-bottom: 6px; }
.auth-panel { display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
.auth-panel-top, .page-header, .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.wolf-header { background: radial-gradient(circle at top right, rgba(88,191,255,0.16), transparent 28%), linear-gradient(180deg, rgba(12,30,52,0.96), rgba(7,17,31,0.96)); }
.compact-header { padding-bottom: 20px; }
.auth-dashboard-link { min-width: 110px; justify-content: center; display: inline-flex; align-items: center; padding: 0 16px; }
.auth-subtitle { margin-top: -4px; }
.auth-mode-switcher, .dashboard-tabs, .page-actions, .admin-header-actions, .role-showcase, .admin-actions-row, .admin-user-badges, .admin-user-meta, .info-list, .payment-actions, .header-pills {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.auth-mode-switcher .tab-button, .dashboard-tabs .tab-button, .page-actions > *, .admin-header-actions > * { padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; }
.compact-tabs .tab-button { gap: 8px; }
.inline-counter { min-width: 24px; min-height: 24px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(121,236,255,0.18); }
.auth-stage-grid { position: relative; min-height: 356px; }
.auth-section { position: absolute; inset: 0; display: grid; gap: 14px; opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.98); transition: opacity 0.28s ease, transform 0.28s ease; }
.auth-form-stack { display: grid; align-content: start; }
.auth-panel[data-auth-mode="register"] .auth-section[data-mode-section="register"], .auth-panel[data-auth-mode="login"] .auth-section[data-mode-section="login"], .auth-panel[data-auth-mode="reset"] .auth-section[data-mode-section="reset"] { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.auth-section [data-mode-step] { display: none; gap: 14px; }
.auth-panel[data-auth-mode="register"][data-step="credentials"] .auth-section[data-mode-section="register"] [data-mode-step="credentials"], .auth-panel[data-auth-mode="register"][data-step="verify"] .auth-section[data-mode-section="register"] [data-mode-step="verify"], .auth-panel[data-auth-mode="reset"][data-step="request"] .auth-section[data-mode-section="reset"] [data-mode-step="request"], .auth-panel[data-auth-mode="reset"][data-step="verify"] .auth-section[data-mode-section="reset"] [data-mode-step="verify"] { display: grid; }
.auth-panel[data-auth-mode="login"] .auth-section[data-mode-section="login"] { position: relative; }
.verify-summary, .admin-inline-note { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(88,191,255,0.1); border: 1px solid rgba(88,191,255,0.16); color: #e9fbff; }
.otp-timer { min-height: 22px; text-align: center; color: #c8f4ff; font-size: 14px; }
.otp-timer.is-expired { color: #ffd1db; }
.auth-footer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-body .site-shell, .admin-body .site-shell { padding-bottom: 20px; }
.page-header { padding: 24px 28px; margin-bottom: 16px; }
.page-brand { display: grid; gap: 10px; }
.page-brand h1 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
.stat-pill {
    min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px;
    border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
}
.role-pill { border-color: rgba(255,255,255,0.12); }
.role-pill.role-admin, .role-admin { background: rgba(185,146,255,0.22); color: #f3e8ff; }
.role-pill.role-member, .role-member { background: rgba(158,184,213,0.18); color: #ecf5ff; }
.role-pill.role-vip, .role-vip { background: rgba(255,215,111,0.2); color: #fff7d7; }
.role-pill.role-creator, .role-creator { background: rgba(126,255,216,0.18); color: #e5fff7; }
.role-pill.role-moderator, .role-moderator { background: rgba(143,208,255,0.18); color: #e8f6ff; }
.dashboard-panel { display: none; padding: 26px; margin-top: 15px; }
.dashboard-panel.is-active { display: block; animation: fadeInUp 0.45s ease both; }
.panel-head h2 { font-size: clamp(1.35rem, 2vw, 2rem); }
.compact-head { margin-bottom: 18px; }
.store-grid, .admin-grid, .admin-user-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.compact-cards { gap: 18px; }
.roomy-grid { gap: 20px; }
.store-card, .admin-card, .summary-card, .admin-user-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.lift-card:hover, .store-card:hover, .admin-card:hover, .summary-card:hover, .admin-user-card:hover { transform: translateY(-5px); border-color: rgba(121,236,255,0.18); box-shadow: 0 18px 28px rgba(0,0,0,0.18); }
.wolf-card { background: radial-gradient(circle at top right, rgba(88,191,255,0.08), transparent 32%), rgba(255,255,255,0.05); }
.store-card { display: flex; flex-direction: column; gap: 12px; }
.store-icon {
    width: 66px; height: 66px; display: grid; place-items: center; border-radius: 16px; font-size: 2rem;
    background: linear-gradient(180deg, rgba(121,236,255,0.18), rgba(42,130,255,0.18)); border: 1px solid rgba(121,236,255,0.14);
}
.store-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.price-tag { color: #cbf8ff; }
.empty-state { padding: 24px 18px; text-align: center; color: var(--muted); border-radius: 18px; border: 1px dashed rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.cart-layout, .topup-layout, .admin-content-layout, .account-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 20px; }
.balanced-layout { align-items: start; }
.cart-card, .topup-card, .summary-card, .admin-card { padding: 20px; }
.spaced-card { padding: 22px; }
.glow-card { background: radial-gradient(circle at top right, rgba(121,236,255,0.16), transparent 28%), rgba(255,255,255,0.05); }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.1rem; }
.info-list { flex-direction: column; gap: 12px; color: var(--muted); }
.info-list span { display: inline-flex; align-items: center; gap: 10px; }
.spaced-top { margin-top: 16px; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 14px 10px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.06); }
.remove-btn { min-height: 40px; min-width: 40px; padding: 0 10px; border-radius: 14px; background: rgba(255,142,161,0.12); border-color: rgba(255,142,161,0.18); color: #ffe3ea; }
.stack-form, .admin-form { display: grid; gap: 14px; }
.checkout-form { margin-top: 18px; }
.dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.tighter-grid { gap: 14px; }
.stat-card { padding: 20px; }
.summary-card strong { font-size: 1.8rem; }
.auth-alert, .auth-success, .site-toast {
    border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.auth-alert, .site-toast.is-error { border: 1px solid rgba(255,142,161,0.18); background: rgba(255,142,161,0.12); color: #ffe2e8; }
.auth-success, .site-toast.is-success { border: 1px solid rgba(121,236,255,0.18); background: rgba(121,236,255,0.1); color: #e7fbff; }
.site-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(30px);
    min-width: min(92vw, 320px); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.admin-hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.admin-spotlight { background: radial-gradient(circle at top right, rgba(121,236,255,0.18), transparent 30%), rgba(255,255,255,0.05); }
.role-showcase { margin-bottom: 18px; }
.role-badge, .status-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px;
    font-size: 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05);
}
.status-badge.is-blocked { background: rgba(255,142,161,0.14); color: #ffe3ea; }
.status-badge.is-active { background: rgba(126,231,208,0.14); }
.admin-user-card { background: radial-gradient(circle at top right, rgba(88,191,255,0.12), transparent 30%), rgba(255,255,255,0.05); }
.admin-user-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.admin-user-head h3 { font-size: 1.25rem; margin-bottom: 4px; }
.admin-user-meta { margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.admin-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-actions-row { align-items: center; }
.admin-actions-row-compact form { flex: 1 1 180px; margin-top: 10px; }
.admin-actions-row-compact .action-link { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.compact-store-card .store-meta form { width: auto; }
.payment-result-card { width: min(100%, 760px); padding: 34px; display: grid; gap: 18px; text-align: center; }
.payment-result-card.is-success { box-shadow: 0 18px 40px rgba(121,236,255,0.12); }
.payment-result-card.is-error { box-shadow: 0 18px 40px rgba(255,142,161,0.12); }
.payment-result-icon { width: 92px; height: 92px; border-radius: 28px; margin: 0 auto; display: grid; place-items: center; background: rgba(255,255,255,0.06); font-size: 46px; }
.payment-result-card.is-success .payment-result-icon { color: var(--success); }
.payment-result-card.is-error .payment-result-icon { color: var(--danger); }
.payment-subtitle { max-width: 58ch; margin: 0 auto; }
.payment-message { font-size: 1.02rem; line-height: 1.9; color: var(--text); }
.payment-meta-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.payment-meta-item { background: rgba(255,255,255,0.04); }
.payment-actions { justify-content: center; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px);} to { opacity: 1; transform: translateY(0);} }
@keyframes blobFloat { from { transform: translate3d(0,0,0);} to { transform: translate3d(24px,34px,0);} }
@keyframes floatThing { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@keyframes floatTag { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-9px);} }
@keyframes pulseBar { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.22);} }
@keyframes cloudSlide { from { transform: translateX(0);} to { transform: translateX(42px);} }

@media (max-width: 1120px) {
    .auth-shell, .cart-layout, .topup-layout, .admin-content-layout, .account-grid { grid-template-columns: 1fr; }
    .auth-highlights, .dashboard-stats, .auth-footer-cards, .admin-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-stage-grid { min-height: 400px; }
}

@media (max-width: 760px) {
    .site-shell { width: min(100% - 18px, 1320px); margin: 10px auto; }
    .auth-hero, .auth-panel, .dashboard-panel, .page-header, .payment-result-card { padding: 18px; }
    .page-header, .page-actions, .panel-head, .auth-panel-top, .auth-mode-switcher, .dashboard-tabs, .admin-header-actions, .role-showcase, .admin-user-meta, .admin-actions-row, .payment-actions { align-items: stretch; flex-direction: column; }
    .auth-mode-switcher .tab-button, .dashboard-tabs .tab-button, .page-actions > *, .admin-header-actions > *, .auth-dashboard-link, .admin-actions-row-compact form, .admin-actions-row-compact .action-link { width: 100%; }
    .auth-visual { min-height: 320px; }
    .wolf-logo-card { left: 18px; right: 18px; bottom: 104px; }
    .floating-card-bottom { right: 18px; bottom: 176px; }
    .pixel-preview { right: 18px; left: 18px; width: auto; }
    .dashboard-stats, .auth-highlights, .auth-footer-cards, .store-grid, .admin-grid, .admin-hero-grid, .admin-user-grid, .admin-edit-grid, .payment-meta-grid { grid-template-columns: 1fr; }
    .cart-table th, .cart-table td { padding: 12px 6px; font-size: 14px; }
}
#glass-warning {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(15px);
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    animation: fadeIn 0.4s ease;
}

.glass-box {
    width: 400px;
    padding: 40px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.2);
    text-align: center;
    color: #fff;
    font-family: Vazirmatn, sans-serif;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.glass-box img {
    width: 90px;
    margin-bottom: 20px;
}

.glass-box h2 {
    margin-bottom: 10px;
    color: #ff4d4d;
}

.glass-box span {
    display: block;
    margin-top: 15px;
    font-size: 13px;
    opacity: 0.7;
}

@keyframes fadeIn {
    from {opacity:0}
    to {opacity:1}
}

select.input-control,
select.dark-select,
select.input-control option,
select.dark-select option {
    background: #10243d;
    color: var(--text);
}

.feature-stat {
    position: relative;
    overflow: hidden;
}

.feature-stat::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% auto;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(121, 236, 255, 0.24), transparent 68%);
}

.skin-pill {
    padding: 6px;
}

.mini-skin-preview {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.product-card {
    gap: 14px;
}

.store-visual {
    position: relative;
    min-height: 210px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(121, 236, 255, 0.12), rgba(10, 21, 37, 0.92));
}

.compact-visual {
    min-height: 170px;
}

.product-image {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.product-fallback {
    width: 100%;
    min-height: inherit;
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: #d8f6ff;
    background: radial-gradient(circle at top, rgba(121, 236, 255, 0.35), transparent 55%), linear-gradient(180deg, rgba(27, 61, 98, 0.85), rgba(10, 21, 37, 0.98));
}

.type-chip,
.owned-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(7, 17, 31, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.owned-chip {
    color: #dbfff3;
}

.wallet-message-card {
    background: radial-gradient(circle at top right, rgba(121, 236, 255, 0.18), transparent 32%), rgba(255, 255, 255, 0.05);
}

.account-grid-extended {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-overview-card {
    grid-column: span 2;
}

.account-overview {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.skin-preview-frame {
    min-height: 220px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(121, 236, 255, 0.14), rgba(10, 21, 37, 0.96));
}

.skin-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skin-empty-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    gap: 10px;
    color: var(--muted);
    text-align: center;
}

.skin-empty-state i {
    font-size: 2rem;
    color: var(--wolf-cyan);
}

.compact-note {
    gap: 10px;
}

.role-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.role-showcase-card {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--role-color);
    display: grid;
    gap: 10px;
    color: var(--role-text);
}

.role-badge-strong {
    width: fit-content;
}

.permission-inline-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.permission-chip {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 12px;
}

.permission-chip.is-empty {
    color: var(--muted);
}

.spaced-top-sm {
    margin-top: 8px;
    margin-bottom: 14px;
}

.cart-item-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-thumb {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
}

.cart-thumb-fallback {
    display: inline-grid;
    place-items: center;
    color: var(--muted);
}

@media (max-width: 1120px) {
    .account-grid-extended,
    .account-overview {
        grid-template-columns: 1fr;
    }

    .account-overview-card {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .store-visual {
        min-height: 180px;
    }

    .cart-item-cell {
        align-items: flex-start;
    }
}