/* V2 White Glass. Layered after the V1 layout; never loaded by V1 stores. */
:root {
    color-scheme: light;
    --text-primary: #202c40;
    --text-secondary: #536176;
    --text-muted: #637086;
    --shadow: 0 12px 42px rgba(49, 69, 104, .08);
    --border: rgba(94, 118, 154, .18);
    --border-hover: rgba(70, 99, 146, .36);
    --danger: #be3450;
    --danger-hover: #a32640;
    --success: #23744e;
    --warning: #946314;
    --radius: 20px;
    --radius-lg: 28px;
    --glass-surface: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
}
[hidden] { display: none !important; }
html { scrollbar-width: none; scroll-padding-top: 110px; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { isolation: isolate; background: var(--bg-primary); -ms-overflow-style: none; }
button, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
a:hover { color: var(--accent); }
.store-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 50% 35%,#e8eef5 0,transparent 68%),var(--bg-primary); }
.store-backdrop-blur,.store-backdrop-focus { position: absolute; top: -4%; bottom: auto; left: 50%; right: auto; width: 108%; height: 108%; object-fit: cover; object-position: 50% 50%; transform: translateX(-50%); }
.store-backdrop-blur { opacity: .4; filter: blur(30px) saturate(.78); transform: translateX(-50%) scale(1.04); }
.store-backdrop-focus { opacity: .96; filter: saturate(.88) contrast(.94); -webkit-mask-image: linear-gradient(90deg,transparent 0%,transparent 2%,rgba(0,0,0,.18) 14%,#000 31%,#000 69%,rgba(0,0,0,.18) 86%,transparent 98%,transparent 100%); mask-image: linear-gradient(90deg,transparent 0%,transparent 2%,rgba(0,0,0,.18) 14%,#000 31%,#000 69%,rgba(0,0,0,.18) 86%,transparent 98%,transparent 100%); }
.store-backdrop.background-mode-center::before,.store-backdrop.background-mode-center::after { content:''; position:absolute; top:0; bottom:0; z-index:1; width:40%; pointer-events:none; }
.store-backdrop.background-mode-center::before { left:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 25%,rgba(255,255,255,.7) 45%,rgba(255,255,255,.28) 72%,rgba(255,255,255,.08) 86%,transparent 100%); }
.store-backdrop.background-mode-center::after { right:0; background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.92) 25%,rgba(255,255,255,.7) 45%,rgba(255,255,255,.28) 72%,rgba(255,255,255,.08) 86%,transparent 100%); }
.store-backdrop-side { position:absolute; top:0; width:max(0px,calc((100vw - 1260px) / 2 + 120px)); height:100%; object-fit:fill; object-position:center; opacity:.9; filter:saturate(.88) contrast(.94); }
.store-backdrop-side-left { left:0; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.06) 84%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.06) 84%,transparent 100%); }
.store-backdrop-side-right { right:0; -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 38%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.06) 84%,transparent 100%); mask-image:linear-gradient(270deg,#000 0%,#000 38%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.06) 84%,transparent 100%); }
.main-content { padding-top: 112px; padding-bottom: 36px; }
.container { max-width: 1260px; }
.navbar { top: 16px; left: max(20px, calc((100% - 1220px) / 2)); right: auto; width: min(calc(100% - 40px), 1220px); height: 72px; padding: 0 16px; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 6px 30px rgba(54,75,108,.07); }
.navbar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--bg-navbar); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); pointer-events: none; }
.nav-container { padding: 0 14px; gap: 20px; }
.nav-logo { font-size: 1.12rem; letter-spacing: -.03em; min-width: 0; }
.nav-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logo i { background: #fff; border-radius: 12px; padding: 10px; font-size: 1.1rem; box-shadow: 0 3px 10px #2942600c; filter: none; }
.nav-link { min-height: 42px; font-size: .82rem; border-radius: 12px; padding: 10px 13px; }
.nav-link.active, .nav-link:hover { color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.nav-auth, .nav-auth.active, .nav-auth:hover { background: #24344d !important; color: #fff !important; padding: 11px 20px; border-radius: 14px; }
.nav-profile-dropdown { background: rgba(255,255,255,.97); box-shadow: var(--shadow); border-color: var(--border); }
.nav-avatar, .profile-dropdown-avatar { background: linear-gradient(140deg, var(--accent), var(--accent2)); }
.profile-dropdown-item:hover { background: #edf2f9; color: var(--accent); }
.nav-toggle { flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.85); }
.nav-toggle span { background: var(--text-primary); }
.nav-toggle { align-items: center; justify-content: center; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop { position: fixed; inset: 0; z-index: 990; border: 0; background: rgba(33,48,70,.2); cursor: pointer; }
.nav-menu::before { display: none; }
.site-footer { background: rgba(255,255,255,.42); border-color: rgba(255,255,255,.8); color: var(--text-muted); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.site-footer .footer-content p { color:#fff; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.98),0 0 9px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.72),0 0 34px rgba(0,0,0,.48); }

/* White mist surfaces keep text readable over high-detail photographs. */
.stats-banner, .auth-card, .settings-card, .admin-card, .stat-card, .dashboard-section, .table-wrapper, .topup-card, .contact-card, .gacha-info-bar, .gacha-game-card, .gacha-item-card, .empty-state, .product-detail-info, .product-card, .category-card, .bank-info-card {
    background: var(--glass-surface); border: 1px solid rgba(255,255,255,.94); box-shadow: var(--shadow), 0 0 0 1px rgba(76,99,134,.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.stats-banner { border:0 !important; border-radius:0; overflow:visible; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.stats-banner::before { display:none; }
.stats-banner-bg { background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.24)); border:1px solid rgba(255,255,255,.72); box-shadow:0 14px 44px rgba(38,55,82,.1),inset 0 1px rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(145%); -webkit-backdrop-filter:blur(18px) saturate(145%); }
.stats-banner-bg::before { display:block; content:''; position:absolute; inset:0; padding:0; border-radius:inherit; pointer-events:none; background:linear-gradient(112deg,rgba(255,255,255,.34),transparent 38%,rgba(255,255,255,.12) 68%,rgba(255,255,255,.3)); animation:none; -webkit-mask:none; mask:none; }
.stats-banner-bg::after, .stats-banner-particles { display:none; }
.stats-banner-inner { position:relative; z-index:2; }
.stats-banner .stat-item:hover { background:rgba(255,255,255,.2); }
.stat-item-value, .revenue-value, .offset-value { color: var(--text-primary); text-shadow: none; }
.stat-stock .stat-item-icon { color: #2c6b9c; background: #e7f2fb; }
.stat-sold .stat-item-icon { color: #267453; background: #e5f5ed; }
.stat-topup .stat-item-icon { color: #ac5674; background: #fbeaf0; }
.stat-item-trend.up { color: #267453; }
.stat-icon-ring, .stat-particle { animation: none; }
.section-header { background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 16px 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.home-section-header, .store-section-header { background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.24)); border-color:rgba(255,255,255,.72); box-shadow:0 14px 44px rgba(38,55,82,.1),inset 0 1px rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(145%); -webkit-backdrop-filter:blur(18px) saturate(145%); }
.section-header h2 { color: var(--text-primary); font-size: 1.12rem; }
.section-header .view-all { color: var(--accent); }
.empty-state { margin: 28px 0; padding: 64px 24px; border-radius: 26px; }
.empty-state i { color: var(--accent); opacity: .5; }
.empty-state h3, .page-title, .admin-header h1 { color: var(--text-primary); }
.admin-header { padding: 22px 26px; border-radius: 22px; background: rgba(255,255,255,.87); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.product-card { position:relative; aspect-ratio:3/4; display:block; padding:0; border-radius:24px; }
.product-card-img { position:absolute; inset:-1px; width:calc(100% + 2px); max-width:none; height:calc(100% + 2px); aspect-ratio:auto; border-radius:inherit; object-fit:contain; background:#090a10; }
.product-card-body { position:absolute; left:-1px; right:-1px; bottom:-1px; min-height:54%; display:flex; flex-direction:column; justify-content:flex-end; padding:76px 17px 17px; margin:0; border-radius:0 0 23px 23px; background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.3) 70%,transparent 100%); gap:3px; }
.product-card-title, .product-price { color:#fff; text-shadow:0 2px 10px rgba(25,36,54,.46); }
.product-card-category { display:none; }
.product-card-footer { margin-top: auto; padding-top: 12px; gap: 10px; flex-wrap: wrap; }
.product-price,.product-stock.in-stock { color:#9cffc7; text-shadow:0 0 6px rgba(91,255,157,.9),0 0 16px rgba(71,238,139,.58); }
.product-price { font-size:1.06rem; }
.product-stock { font-size: .72rem; }
.product-stock.in-stock { font-weight:600; }
.category-card .category-overlay { padding:54px 18px 16px; background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.66) 42%,rgba(0,0,0,.22) 76%,transparent 100%); backdrop-filter:none; -webkit-backdrop-filter:none; border-top:0; }
.category-card .category-name { color: #fff; text-shadow: 0 2px 10px rgba(25,36,54,.42); }
.product-detail-info { border-radius: 24px; padding: 28px; }
.product-detail-price { color: var(--accent); }
.form-control { min-height: 48px; background-color: rgba(255,255,255,.92); border-color: #d8e0ed; border-radius: 12px; color: var(--text-primary); font-size: .9rem; }
.form-control:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.1); }
.btn { border-radius: 12px; min-height: 44px; }
.btn-primary, .btn-buy { color: #fff; background: var(--accent); box-shadow: 0 5px 16px rgba(var(--accent-rgb),.14); }
.btn-primary:hover, .btn-buy:hover { background: var(--accent); filter: brightness(.94); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-card h1 { color: var(--text-primary); }
.swal-dark-popup { background: #fff !important; color: var(--text-primary) !important; border: 1px solid #e1e7f0; border-radius: 24px; box-shadow: var(--shadow); }
.swal-dark-popup .swal2-title, .swal-dark-popup .swal2-html-container { color: var(--text-primary); }
.swal2-cancel { color: var(--text-primary) !important; }
.revenue-card, .offset-card, .slip-mode-toggle, .slip-upload-zone, .slip-preview img, .gacha-spin-container, .gacha-spin-item, .gacha-item-code, .card-reward-code { background: #f5f8fc; }
.offset-input { background: #fff !important; color: var(--text-primary) !important; }
.revenue-amount, .offset-value.highlight { color: var(--text-primary); text-shadow: none; }
.csgo-spin-item-name { background: rgba(255,255,255,.84); color: var(--text-primary); }
.btn-save-offset:hover { color: var(--accent) !important; }
.gacha-card-back { background: linear-gradient(140deg,#fff,#e2ecfa); border-color: #cbd9ec; box-shadow: var(--shadow); }
.gacha-card-front:is(.rarity-common,.rarity-uncommon,.rarity-rare,.rarity-epic,.rarity-legendary) { background: linear-gradient(140deg,#fff,#edf2fa); box-shadow: var(--shadow); }
.gacha-card-front-name { color: var(--text-primary); }
.gacha-card-front-rarity { background: #ffffffd9; }
.rarity-text-common, .gacha-rarity-badge-common { color: #566176; }
.rarity-text-uncommon, .gacha-rarity-badge-uncommon { color: #23744e; }
.rarity-text-rare, .gacha-rarity-badge-rare { color: #2865ac; }
.rarity-text-epic, .gacha-rarity-badge-epic { color: #7b459f; }
.rarity-text-legendary, .gacha-rarity-badge-legendary { color: #946314; }
.store-intro { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; padding: 42px 48px; margin-bottom: 28px; border: 1px solid #ffffffeb; border-radius: 28px; background: linear-gradient(120deg,#ffffffeb,#ffffff85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); overflow: hidden; }
.store-intro h1 { font-size: clamp(2rem,4vw,3.2rem); font-weight: 600; line-height: 1.35; letter-spacing: -.04em; margin: 14px 0; }.store-intro h1 span { color: var(--accent); }.store-intro p { color: var(--text-secondary); font-size: .9rem; margin-bottom: 22px; }.store-intro .btn { width: auto; padding: 12px 24px; font-size: .83rem; }
.intro-art { position: relative; width: 230px; height: 210px; justify-self: center; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; border-radius: 52px; border: 1px solid #fff; background: linear-gradient(135deg,#eef8ffbd,#e1e4f5b3); box-shadow: 20px 24px 60px #5c79a61a,inset 1px 1px #fff; transform: rotate(-8deg); color: #7c98bd; }.intro-art i { font-size: 5rem; }.intro-art small { font-size: .55rem; letter-spacing: .16em; }.intro-art > span { position: absolute; top: -24px; right: -26px; font-size: 50px; color: #b3c4df; }
.store-intro-copy h1 { margin:0 0 28px; }
.intro-brand { width:260px; height:210px; justify-self:center; display:grid; place-items:center; padding:24px; }
.intro-brand img { display:block; width:auto; max-width:100%; height:auto; max-height:170px; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(39,58,88,.16)); }
.intro-brand > span { width:150px; height:130px; display:grid; place-items:center; border:1px solid #fff; border-radius:38px; color:var(--accent); background:linear-gradient(135deg,#eef8ffbd,#e1e4f5b3); box-shadow:20px 24px 60px #5c79a61a,inset 1px 1px #fff; }
.intro-brand > span i { font-size:4.5rem; }
.bank-info-value { overflow-wrap: anywhere; }
.theme-help { margin: 10px 0 14px; font-size: .78rem; line-height: 1.8; color: var(--text-muted); }
.theme-preset-grid { grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); }
.theme-preview-panel { background-image: linear-gradient(#ffffff59, #ffffff59), var(--preview-image, none); background-size: cover; background-position: center; }
.theme-preview-nav, .theme-preview-content h2, .theme-preview-card strong { color: var(--text-primary); }
.theme-preview-content h2 { line-height: 1.3; }
.theme-preview-content h2 em { text-shadow: none; }
.theme-preview-content > p, .theme-preview-card span, .theme-preview-nav span { color: var(--text-secondary); }
.theme-preview-card button { color: #fff; background: var(--preview-accent); }
.theme-preset-option:focus-within, .theme-effect-toggle:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-logo-preview { width: fit-content; margin: -4px 0 20px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.8); }
.site-logo-preview img { display: block; max-width: 240px; height: 42px; object-fit: contain; }
.site-background-card { overflow: hidden; }
.background-setting-copy p { max-width: 760px; margin: 8px 0 20px; color: var(--text-secondary); line-height: 1.75; }
.site-background-preview { position: relative; min-height: 250px; margin-bottom: 24px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.95); border-radius: 22px; background:linear-gradient(135deg,#e1edf7,#f3e8ef); box-shadow: inset 0 0 48px #fff,0 12px 34px rgba(45,67,98,.08); }
.site-background-preview::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 24%,transparent 76%,rgba(255,255,255,.28)); pointer-events:none; }
.site-background-preview > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.background-preview-center { -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent); mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent); }
.background-preview-side { width:30% !important; object-fit:fill !important; object-position:center; }
.background-preview-side.is-left { right:auto; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,rgba(0,0,0,.6) 62%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 34%,rgba(0,0,0,.6) 62%,transparent 100%); }
.background-preview-side.is-right { left:auto; -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 34%,rgba(0,0,0,.6) 62%,transparent 100%); mask-image:linear-gradient(270deg,#000 0%,#000 34%,rgba(0,0,0,.6) 62%,transparent 100%); }
.site-background-preview span { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; padding: 11px 16px; border: 1px solid #fff; border-radius: 999px; background: rgba(255,255,255,.78); backdrop-filter: blur(14px); color: var(--text-primary); }
.background-layout-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.background-layout-option { position:relative; display:flex; align-items:center; gap:12px; min-height:82px; padding:14px; border:1px solid var(--border); border-radius:15px; background:var(--bg-input); cursor:pointer; transition:var(--transition); }
.background-layout-option:hover,.background-layout-option.is-selected { border-color:var(--accent); box-shadow:0 10px 26px rgba(var(--accent-rgb),.10); }
.background-layout-option > input { position:absolute; opacity:0; pointer-events:none; }
.background-layout-icon { display:grid; flex:0 0 40px; width:40px; height:40px; place-items:center; border-radius:12px; color:var(--accent); background:rgba(var(--accent-rgb),.10); }
.background-layout-option strong,.background-layout-option small { display:block; }
.background-layout-option small { margin-top:3px; color:var(--text-muted); line-height:1.35; }
.background-layout-check { margin-left:auto; color:var(--accent); opacity:0; }
.background-layout-option.is-selected .background-layout-check { opacity:1; }
.background-fields[hidden] { display:none !important; }
.background-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.background-input-grid small { display: block; margin-top: 7px; color: var(--text-muted); line-height: 1.6; }
.background-url-field { max-width: 820px; }
.background-url-field small { display: block; margin-top: 7px; color: var(--text-muted); line-height: 1.6; }
.background-setting-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.background-setting-actions .btn { width: auto; }
@media (max-width: 700px) { .background-layout-options,.background-input-grid { grid-template-columns: 1fr; }.site-background-preview { min-height: 190px; }.store-backdrop-focus { -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }.store-backdrop.background-mode-center::before,.store-backdrop.background-mode-center::after { width:28%; }.store-backdrop.background-mode-center::before { background:linear-gradient(90deg,rgba(255,255,255,.82),transparent); }.store-backdrop.background-mode-center::after { background:linear-gradient(270deg,rgba(255,255,255,.82),transparent); } }
@media (max-width: 1260px) { .store-backdrop-side { display:none; } }

/* Admin-managed welcome popup. */
.popup-enabled-toggle { max-width: 420px; margin-bottom: 22px; }
.popup-image-list { display:grid; gap:12px; margin-bottom:14px; }
.popup-image-row { display:grid; grid-template-columns:40px minmax(0,1fr) 48px; gap:12px; align-items:end; padding:14px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.48); }
.popup-image-row .form-group { margin:0; }
.popup-image-number { width:34px; height:34px; align-self:center; display:grid; place-items:center; border-radius:50%; color:var(--accent); background:rgba(var(--accent-rgb),.09); font-weight:600; }
.popup-remove-image { width:48px; padding:0; color:var(--danger); }
.popup-add-image { width:auto; margin:0 8px 14px 0; }
.site-popup-overlay { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:24px; overflow:auto; background:rgba(28,39,58,.28); backdrop-filter:blur(14px) saturate(115%); -webkit-backdrop-filter:blur(14px) saturate(115%); opacity:0; transition:opacity .22s ease; }
.site-popup-overlay.is-visible { opacity:1; }
body.popup-open { overflow:hidden; }
.site-popup-dialog { position:relative; width:min(760px,100%); max-height:calc(100vh - 48px); overflow:hidden; border:1px solid rgba(255,255,255,.94); border-radius:28px; background:rgba(255,255,255,.78); box-shadow:0 28px 90px rgba(25,39,62,.28),inset 0 1px #fff; transform:translateY(14px) scale(.98); transition:transform .22s ease; }
.site-popup-overlay.is-visible .site-popup-dialog { transform:none; }
.site-popup-close { position:absolute; top:14px; right:14px; z-index:4; width:40px; height:40px; border:1px solid rgba(255,255,255,.9); border-radius:50%; color:var(--text-primary); background:rgba(255,255,255,.82); backdrop-filter:blur(12px); box-shadow:0 5px 18px rgba(32,44,64,.12); cursor:pointer; }
.site-popup-stage { position:relative; min-height:260px; display:grid; place-items:center; overflow:hidden; border-radius:inherit; background:rgba(235,241,248,.64); }
.site-popup-slide { width:100%; margin:0; display:grid; place-items:center; }
.site-popup-slide img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100vh - 150px); object-fit:contain; }
.site-popup-arrow { position:absolute; top:50%; z-index:3; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.9); border-radius:50%; color:var(--text-primary); background:rgba(255,255,255,.76); backdrop-filter:blur(12px); box-shadow:0 5px 18px rgba(32,44,64,.12); cursor:pointer; transform:translateY(-50%); }
.site-popup-arrow.is-prev { left:14px; }.site-popup-arrow.is-next { right:14px; }
.site-popup-dots { position:absolute; z-index:3; left:50%; bottom:14px; display:flex; gap:7px; padding:7px 9px; border-radius:99px; background:rgba(255,255,255,.7); backdrop-filter:blur(10px); transform:translateX(-50%); }
.site-popup-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#9ba8ba; cursor:pointer; transition:width .18s ease,background .18s ease; }
.site-popup-dots button.is-active { width:20px; border-radius:9px; background:var(--accent); }
.site-popup-snooze { position:absolute; right:14px; bottom:14px; z-index:3; display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid rgba(255,255,255,.76); border-radius:12px; color:var(--text-primary); font-size:.78rem; cursor:pointer; background:rgba(255,255,255,.58); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); box-shadow:0 5px 18px rgba(32,44,64,.1); }
.site-popup-snooze input { width:17px; height:17px; accent-color:var(--accent); }
@media (max-width:700px) { .popup-image-row{grid-template-columns:32px minmax(0,1fr) 44px;padding:10px;gap:8px}.popup-image-number{width:30px;height:30px}.popup-remove-image{width:44px}.site-popup-overlay{padding:14px}.site-popup-dialog{max-height:calc(100vh - 28px);border-radius:22px}.site-popup-stage{min-height:210px}.site-popup-slide img{max-height:calc(100vh - 90px)}.site-popup-arrow{width:38px;height:38px}.site-popup-arrow.is-prev{left:9px}.site-popup-arrow.is-next{right:9px}.site-popup-snooze{right:10px;bottom:10px;padding:8px 10px}.site-popup-dots{bottom:58px} }
@media (prefers-reduced-motion:reduce) { .site-popup-overlay,.site-popup-dialog{transition:none} }

/* A single member space with progressive-enhancement tabs. */
.auth-shell { max-width: 1060px; width: calc(100% - 48px); margin: 30px auto 46px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #fff; border-radius: 32px; box-shadow: 0 24px 80px #334b7014; background: rgba(255,255,255,.84); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow: hidden; }
.auth-story { position: relative; padding: 34px 40px 24px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(ellipse at 10% 90%, #d0e3f3 0, transparent 65%), radial-gradient(ellipse at 100% 15%, #e4ddf3 0, transparent 60%), #eef5fa; border-right: 1px solid #fff; }
.auth-brand-story { position:relative; display:block; min-height:580px; padding:0; }
.auth-brand-showcase { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:48px; display:grid; grid-auto-flow:row; grid-auto-rows:max-content; align-content:center; align-items:center; justify-items:center; gap:22px; text-align:center; }
.auth-brand-logo { display:block; width:auto; max-width:min(280px,82%); height:auto; max-height:190px; margin:0 auto; object-fit:contain; filter:drop-shadow(0 14px 28px rgba(39,58,88,.14)); }
.auth-brand-fallback { width:104px; height:104px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.94); border-radius:30px; color:var(--accent); background:rgba(255,255,255,.7); box-shadow:0 16px 38px rgba(45,67,98,.12),inset 0 1px #fff; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.auth-brand-fallback i { font-size:3.1rem; }
.auth-brand-name { max-width:100%; color:var(--text-primary); font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:600; line-height:1.45; overflow-wrap:anywhere; }
.auth-back { display: inline-flex; align-items: center; gap: 9px; font-size: .77rem; color: var(--text-secondary); align-self: flex-start; }
.auth-story-copy { margin-top: 44px; }
.glass-eyebrow { font-size: .62rem; font-weight: 600; letter-spacing: .19em; color: var(--accent); display: inline-block; }
.auth-story h1 { font-size: clamp(2rem,3vw,2.8rem); line-height: 1.42; letter-spacing: -.045em; font-weight: 600; margin: 16px 0; color: #273750; }
.auth-story h1 span { display: block; color: var(--accent); }
.auth-story-copy > p { font-size: .86rem; color: #56657c; line-height: 1.9; }
.auth-story-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid #ffffffa3; font-size: .65rem; color: #65758c; }
.auth-story-foot span:last-child { font-size: .52rem; letter-spacing: .12em; }
.auth-art { position: relative; height: 210px; margin: 18px 0 20px; display: grid; place-items: center; }
.art-tile { width: 156px; height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; transform: rotate(-10deg); background: linear-gradient(135deg,#ffffffed,#ffffff65); backdrop-filter: blur(12px); border: 1px solid #fff; border-radius: 30px; box-shadow: 12px 22px 44px #4363921c, inset 1px 1px 0 #fff; color: #7897bd; }
.art-tile i { font-size: 3.2rem; }
.art-tile span { font-size: .43rem; letter-spacing: .14em; }
.art-orbit { position: absolute; width: 270px; height: 100px; border: 1px solid #ffffffb3; border-radius: 50%; transform: rotate(-28deg); }
.orbit-two { transform: rotate(33deg); width: 240px; height: 125px; }
.art-spark { position: absolute; color: #8eabd0; }
.spark-one { right: 12%; top: 18px; font-size: 30px; }.spark-two { left: 10%; bottom: 22px; font-size: 21px; }
.art-caption { position: absolute; bottom: 4px; right: 5%; padding: 10px 18px; border-radius: 12px; background: #ffffffc4; border: 1px solid #fff; box-shadow: 0 5px 20px #6683a80f; font-size: .67rem; color: #506583; transform: rotate(4deg); }
.art-dot { display: inline-block; width: 6px; height: 6px; background: #609585; border-radius: 50%; margin-right: 5px; }
.auth-panel { padding: 48px 46px 32px; align-self: center; min-width: 0; }
.auth-welcome h2 { font-size: 1.85rem; letter-spacing: -.03em; font-weight: 600; margin: 8px 0; }
.auth-welcome p { color: var(--text-muted); font-size: .84rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin: 28px 0; border-radius: 14px; background: #edf1f7; border: 1px solid #e7ecf4; }
.auth-tabs a { text-align: center; border-radius: 10px; padding: 11px 8px; font-size: .87rem; color: var(--text-muted); }
.auth-tabs a { transition:color .22s ease,background-color .28s ease,box-shadow .28s ease; }
.auth-tabs a[aria-selected=true] { background: #fff; color: var(--accent); box-shadow: 0 2px 8px #30466a0c; font-weight: 600; }
.auth-panel-stack { position:relative; transition:height .32s cubic-bezier(.22,.61,.36,1); }
.auth-panel-stack.is-switching { overflow:hidden; }
.auth-panel-stack.is-switching > .auth-tab-panel { position:absolute; top:0; left:0; width:100%; }
.auth-panel-motion { will-change:opacity,transform; transition:opacity .22s ease,transform .32s cubic-bezier(.22,.61,.36,1); }
.auth-panel-enter-next { opacity:0; transform:translateX(20px); }
.auth-panel-enter-prev { opacity:0; transform:translateX(-20px); }
.auth-panel-enter.is-shown { opacity:1; transform:translateX(0); }
.auth-panel-leave-next.is-hidden { opacity:0; transform:translateX(-14px); }
.auth-panel-leave-prev.is-hidden { opacity:0; transform:translateX(14px); }
.glass-auth-form .form-group { margin-bottom: 18px; }
.glass-auth-form label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: 8px; }
.glass-auth-form .form-control { min-height: 50px; font-size: .86rem; }
.glass-auth-form .btn-primary { min-height: 50px; font-size: .86rem; justify-content: space-between; padding: 12px 20px; margin-top: 5px; }
.password-field { position: relative; }.password-field input { padding-right: 50px; }
.password-field button { position: absolute; right: 4px; top: 4px; height: calc(100% - 8px); width: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; }
.password-field button:hover { color: var(--accent); background: #edf2f8; }
.auth-bottom-note { font-size: .69rem; color: var(--text-muted); text-align: center; margin-top: 26px; }.auth-bottom-note i { margin-right: 5px; }
.auth-message { padding: 12px 14px; border-radius: 12px; font-size: .8rem; line-height: 1.8; margin: -8px 0 20px; }
.auth-message.is-error { color: #97354a; background: #fff0f2; border: 1px solid #f1d1d8; }.auth-message.is-success { color: #276444; background: #eef8f1; border: 1px solid #cfe7d7; }

/* Admin navigation shared by every management page. */
.admin-shell-v2 { width: 100%; max-width: 1440px; padding: 0 16px 40px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 22px; align-items: start; box-sizing: border-box; }
.admin-sidebar-v2 { position: sticky; top: 106px; display: flex; flex-direction: column; max-height: calc(100dvh - 126px); padding: 20px 14px 14px; border: 1px solid rgba(255,255,255,.95); border-radius: 24px; background: rgba(255,255,255,.86); box-shadow: var(--shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); overflow: hidden; }
.admin-sidebar-head { display: flex; align-items: center; gap: 11px; padding: 0 8px 17px; border-bottom: 1px solid var(--border); }.admin-sidebar-head > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }.admin-sidebar-head strong { font-size: .92rem; }.admin-sidebar-head small { color: var(--text-muted); font-size: .49rem; letter-spacing: .14em; }
.admin-sidebar-mark { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 12px; color: #fff; background: linear-gradient(140deg,var(--accent),var(--accent2)); box-shadow: 0 6px 18px rgba(var(--accent-rgb),.18); }
.admin-sidebar-nav { padding: 10px 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }.admin-nav-group + .admin-nav-group { margin-top: 4px; }.admin-nav-label { display: block; padding: 9px 10px 5px; color: #8792a3; font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.admin-side-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 11px; border-radius: 11px; color: var(--text-secondary); font-size: .76rem; white-space: nowrap; transform: none; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; }.admin-side-link i { width: 18px; color: #8796ab; text-align: center; transition: color .18s ease; }.admin-side-link:hover { color: var(--accent); background: #f1f5fb; transform: none; }.admin-side-link.active { color: #fff; background: linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 76%,var(--accent2))); box-shadow: 0 7px 20px rgba(var(--accent-rgb),.17); }.admin-side-link.active i { color: #fff; }
.admin-store-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 13px; color: var(--text-secondary); font-size: .72rem; }
.admin-workspace-v2 { min-width: 0; }.admin-workspace-v2 > .container { width: 100%; max-width: none; margin: 0; padding: 0; }.admin-workspace-v2 .admin-header { margin-bottom: 22px; }.admin-grid-landing-v2 { grid-template-columns: repeat(3,minmax(0,1fr)); }.admin-grid-landing-v2 .admin-card { min-width: 0; }

@media (max-width: 1100px) { .nav-container { padding: 0; gap: 10px; }.nav-link { padding: 9px; font-size: .77rem; } }
@media (max-width: 900px) {
    .navbar { left: 18px; right: auto; top: 12px; width: calc(100% - 36px); height: 64px; padding: 0 16px; border-radius: 18px; }
    .main-content { padding-top: 98px; }
    .nav-toggle { display: flex; position: relative; z-index: 1100; }
    .nav-menu { position: fixed; top: 0; bottom: 0; left: auto; right: 0; width: min(340px,85vw); max-width: 85vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 100px 24px 30px; gap: 6px; background: rgba(255,255,255,.93); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-left: 1px solid #fff; border-radius: 24px 0 0 24px; box-shadow: -16px 0 60px #3447651a; transform: translateX(110%); transition: transform .3s ease; overflow-y: auto; overflow-x: hidden; z-index: 1050; visibility: hidden; }
    .nav-menu.active { transform: translateX(0); visibility: visible; }
    .nav-menu > li { width: 100%; opacity: 1; transform: none; transition: none; }
    .nav-menu .nav-link { width: 100%; padding: 14px; font-size: .88rem; white-space: normal; }
    .nav-menu .nav-auth { margin-top: 12px; justify-content: center; }
    .nav-profile-wrapper { padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--border); }
    .nav-profile-btn { width: 100%; padding: 10px; border-radius: 12px; }
    .nav-profile-dropdown { position: static; width: 100%; transform: none; box-shadow: none; max-height: 0; opacity: 0; visibility: hidden; border: 0; }
    .nav-profile-dropdown.show { max-height: 440px; opacity: 1; visibility: visible; margin-top: 10px; }
    body.nav-open { overflow: hidden; }
    .auth-shell { margin-top: 16px; }.auth-story { padding: 28px; }.auth-panel { padding: 36px 28px; }
    .admin-shell-v2 { width: calc(100% - 36px); display: block; }.admin-sidebar-v2 { position: sticky; top: 88px; z-index: 20; max-height: none; margin-bottom: 18px; padding: 10px; border-radius: 18px; overflow-x: auto; }.admin-sidebar-head, .admin-nav-label, .admin-store-link { display: none; }.admin-sidebar-nav { display: flex; gap: 6px; padding: 0; overflow: visible; }.admin-nav-group { display: contents; }.admin-nav-group + .admin-nav-group { margin: 0; }.admin-side-link { flex: 0 0 auto; min-height: 40px; padding: 9px 13px; }.admin-side-link:hover { transform: none; }.admin-grid-landing-v2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .store-intro { grid-template-columns: 1fr; padding: 30px 26px; text-align:center; }.intro-art { display: none; }.store-intro h1 { font-size: 2rem; }.store-intro .glass-eyebrow { font-size: .52rem; }.intro-brand { width:180px; height:130px; padding:12px; }.intro-brand img { max-height:105px; }.intro-brand > span { width:96px; height:86px; border-radius:26px; }.intro-brand > span i { font-size:2.8rem; }
    .container { padding-left: 18px; padding-right: 18px; }.nav-logo { font-size: 1rem; }.nav-logo i { padding: 8px; }
    .auth-shell { width: calc(100% - 32px); grid-template-columns: 1fr; border-radius: 24px; margin: 12px auto 28px; }
    .auth-story { padding: 22px 26px; border-right: 0; border-bottom: 1px solid #fff; }
    .auth-brand-story { min-height:220px; padding:0; }
    .auth-brand-showcase { padding:28px 22px; gap:14px; }
    .auth-brand-logo { max-width:200px; max-height:105px; }
    .auth-brand-fallback { width:74px; height:74px; border-radius:22px; }
    .auth-brand-fallback i { font-size:2.15rem; }
    .auth-story-copy { margin-top: 18px; }.auth-story h1 { font-size: 1.55rem; margin: 10px 0 0; line-height: 1.4; }.auth-story h1 br { display: none; }.auth-story h1 span { display: inline; }
    .auth-story h1 span { white-space: nowrap; }
    .auth-story-copy > p, .auth-art, .auth-story-foot { display: none; }
    .auth-panel { padding: 28px 24px; }.auth-welcome h2 { font-size: 1.55rem; }.auth-tabs { margin: 22px 0; }
    .auth-back { min-height: 28px; }.auth-bottom-note { font-size: .64rem; }
    .product-card { border-radius:18px; padding:0; }.product-card-body { min-height:58%; padding:64px 12px 12px; border-radius:0 0 17px 17px; }.products-grid { gap:14px; }
    .product-detail-info { padding: 20px; }.section-header { padding: 14px; }.section-header h2 { font-size: 1rem; }
    .theme-section-title { align-items: flex-start; flex-direction: column; gap: 8px; }
    .admin-shell-v2 { width: calc(100% - 28px); }.admin-side-link i { width: 20px; font-size: .9rem; }.admin-side-link { padding: 8px 11px; }.admin-grid-landing-v2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .navbar::before, .nav-menu, .auth-shell { background: #fff; } }