:root {
    --bg: #07140f;
    --card: rgba(19, 45, 34, .72);
    --line: rgba(255, 255, 255, .10);
    --text: #f4fff8;
    --muted: #a7bdb0;
    --accent: #70e6a2;
    --accent-dark: #173f2c;
}
* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh; color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: #06130e url('/assets/store-background-clean.jpg') center top / cover no-repeat fixed;
    background-attachment: fixed;
    overflow-x: hidden;
}
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        linear-gradient(to bottom, rgba(2,12,8,.40), rgba(3,15,10,.74) 42%, rgba(3,14,10,.88)),
        radial-gradient(ellipse at top, rgba(112,230,162,.10), transparent 55%);
}
body::after {
    content: ""; position: fixed; width: 70vw; height: 70vw; max-width: 620px; max-height: 620px;
    right: -28vw; top: 20vh; pointer-events: none; z-index: 0; border-radius: 50%;
    border: 1px solid rgba(112,230,162,.08); box-shadow: 0 0 90px rgba(112,230,162,.06), inset 0 0 90px rgba(112,230,162,.04);
}
.glow { position: fixed; width: 280px; height: 280px; border-radius: 50%; filter: blur(82px); opacity: .30; pointer-events: none; z-index: 0; animation: glow-drift 9s ease-in-out infinite alternate; }
.glow-one { background: #38e98a; top: -120px; right: -95px; }
.glow-two { background: #d5a64e; bottom: 55px; left: -155px; animation-delay: -4s; }
main { position: relative; z-index: 1; width: min(760px, 100%); margin: auto; padding: 22px 16px 110px; }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.eyebrow { color: var(--accent); letter-spacing: .18em; font-size: 11px; font-weight: 800; margin: 0 0 3px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 25px; margin-bottom: 0; }
h2 { font-size: 23px; }
.avatar, .profile-icon { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--accent), #d7ffbe); color: #092016; font-weight: 900; }
.avatar { width: 44px; height: 44px; }
.glass { background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.22); backdrop-filter: blur(18px); border-radius: 22px; }
.hero { padding: 23px; margin-bottom: 14px; }
.hero span { color: var(--accent); font-weight: 700; font-size: 13px; }
.hero h2 { margin: 6px 0; }
.hero p, .muted { color: var(--muted); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; margin-bottom: 17px; }
select { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #102a1f; color: var(--text); padding: 13px 10px; font-size: 14px; }
.cards { display: grid; gap: 13px; }
.product, .order { padding: 17px; }
.product-top { display: flex; justify-content: space-between; gap: 12px; }
.product h3 { margin: 0 0 5px; font-size: 19px; }
.product p { color: var(--muted); font-size: 14px; }
.badge { color: var(--accent); background: var(--accent-dark); padding: 7px 10px; height: fit-content; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.variants { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.variant { color: var(--text); text-align: left; border: 1px solid var(--line); background: rgba(0,0,0,.17); padding: 10px 12px; border-radius: 14px; }
.variant strong { display: block; color: var(--accent); margin-top: 3px; }
.variant small { display: block; color: var(--muted); margin-top: 6px; }
.checkout { padding: 23px; }
.back-button { border: 0; color: var(--accent); background: transparent; padding: 6px 0 15px; font-size: 14px; }
.total { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.total strong { color: var(--accent); font-size: 24px; }
.warning { padding: 14px; border-radius: 15px; color: #ffd2a8; background: rgba(156,81,18,.22); line-height: 1.5; }
.pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-options button, .primary, .payment-value button { border: 1px solid var(--line); border-radius: 15px; color: #072015; background: var(--accent); padding: 14px 10px; font-weight: 800; }
.pay-options small { opacity: .7; }
.payment-value { margin: 13px 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.18); }
.payment-value span, .payment-value b, .payment-value code { display: block; margin-bottom: 9px; overflow-wrap: anywhere; }
.payment-value b { color: var(--accent); font-size: 21px; }
.payment-value button { padding: 8px 11px; font-size: 12px; }
.primary { width: 100%; font-size: 15px; }
.primary:disabled { opacity: .6; }
.countdown { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; padding: 13px 15px; border-radius: 15px; background: rgba(0,0,0,.2); }
.countdown span { color: var(--muted); }
.countdown b { color: var(--accent); font-size: 23px; font-variant-numeric: tabular-nums; }
.success-mark { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 15px; border-radius: 50%; background: var(--accent); color: #062014; font-size: 38px; }
.instruction { padding: 17px; border-radius: 16px; background: rgba(0,0,0,.2); }
.instruction span, .instruction b { display: block; margin-bottom: 7px; }
.instruction b { color: var(--accent); }
.txid { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(430px, calc(100% - 32px)); padding: 13px 16px; border-radius: 14px; background: #d8ffe5; color: #092016; text-align: center; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.toast-error { background: #ffd2c8; color: #53160b; }
.page { display: none; }
.page.active { display: block; animation: appear .25s ease; }
.profile-card { padding: 28px 22px; text-align: center; }
.profile-icon { width: 78px; height: 78px; font-size: 31px; margin: auto auto 13px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.stats div { padding: 17px; border-radius: 17px; background: rgba(0,0,0,.18); }
.stats strong { display: block; font-size: 26px; color: var(--accent); }
.stats span { color: var(--muted); font-size: 12px; }
.progress { height: 9px; background: rgba(255,255,255,.08); border-radius: 9px; overflow: hidden; }
#progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #d7ff89); border-radius: inherit; }
.order h3 { margin-bottom: 8px; }
.order p { margin-bottom: 5px; color: var(--muted); }
.order small { display: block; color: var(--accent); margin-top: 9px; }
.active-order { border-color: rgba(112,230,162,.45); cursor: pointer; }
nav { position: fixed; z-index: 5; bottom: 12px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); padding: 9px; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(10,25,18,.92); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(18px); }
nav.has-admin { grid-template-columns: repeat(4,1fr); }
nav button { border: 0; background: transparent; color: var(--muted); padding: 8px; font-size: 20px; }
nav button span { display: block; font-size: 11px; margin-top: 3px; }
nav button.active { color: var(--accent); }
.center { text-align: center; padding: 40px 20px; }
.loader { width: 32px; height: 32px; margin: 0 auto 14px; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-screen { position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at 50% 35%,#204d38 0,#081810 48%,#030a07 100%);transition:opacity .45s ease,visibility .45s ease; }
.loading-screen.loading-done { opacity:0;visibility:hidden; }
.loading-screen p { color:#dff9e8;font-weight:700;letter-spacing:.04em;margin:2px 0 0; }
.loading-portrait { position:relative;width:min(68vw,300px);aspect-ratio:1;border-radius:28px;overflow:hidden;margin-bottom:24px;border:1px solid rgba(255,255,255,.22);box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 0 6px rgba(112,230,162,.06); }
.loading-portrait img { width:100%;height:100%;display:block;object-fit:cover; }
.loading-shine { position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.18) 46%,transparent 65%);transform:translateX(-130%);animation:portrait-shine 2.2s ease-in-out infinite; }
.loading-screen .loader { width:30px;height:30px;margin-bottom:13px;border-color:rgba(255,255,255,.18);border-top-color:#70e6a2; }
.error { color: #ffb3b3; padding: 20px; }
.hidden { display: none !important; }
.admin-head { display:flex;align-items:center;justify-content:space-between;padding:18px;margin-bottom:12px; }
.admin-head h2 { margin:0; }
.admin-tabs { display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px; }
.admin-tabs button,.row-actions button,.small-primary { border:1px solid var(--line);background:#102a1f;color:var(--text);border-radius:12px;padding:9px 11px;white-space:nowrap; }
.admin-tabs button.active,.small-primary { background:var(--accent);color:#072015;font-weight:800; }
.admin-stats { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px; }
.metric { padding:15px; }.metric span{display:block;color:var(--muted);font-size:12px}.metric b{display:block;color:var(--accent);font-size:19px;margin-top:5px}
.admin-card { padding:17px;margin-bottom:12px; }.admin-card h3{margin:0 0 13px}.admin-card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.admin-card-title h3{margin:0}
.table-wrap { overflow-x:auto; } table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--accent)}
.admin-list{display:grid;gap:9px}.admin-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.17)}.admin-row b,.admin-row small{display:block}.admin-row small{color:var(--muted);margin-top:4px}.admin-row p{margin:8px 0 0;color:var(--muted);white-space:pre-wrap}.row-actions{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.row-actions button{font-size:11px;padding:7px}.danger{color:#ffb3a7!important;border-color:rgba(255,100,80,.35)!important}
.admin-card label{display:block;color:var(--muted);margin-bottom:12px}.admin-card input,.admin-card textarea{width:100%;margin-top:7px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#102a1f;color:var(--text);font:inherit}.admin-card textarea{resize:vertical;min-height:120px}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.form-actions{display:flex;gap:8px}.form-actions .primary{flex:1}.form-actions>button:not(.primary){border:1px solid var(--line);border-radius:15px;background:#102a1f;color:var(--text);padding:12px 16px}.instruction-editor{border-color:rgba(112,230,162,.35)}
.form-hint{font-size:13px;line-height:1.45;margin:-2px 0 13px}
.catalog-editor{border-color:rgba(213,166,78,.45);box-shadow:0 20px 55px rgba(0,0,0,.32)}
.variant-product-block{border-left:3px solid rgba(112,230,162,.48)}
.instruction-folders{display:grid;gap:9px}.instruction-folder{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:15px;background:rgba(0,0,0,.18);color:var(--text);padding:14px}.instruction-folder span b,.instruction-folder span small{display:block}.instruction-folder span small{color:var(--muted);margin-top:4px}.instruction-folder strong{display:grid;place-items:center;min-width:36px;height:30px;padding:0 9px;border-radius:999px;background:var(--accent-dark);color:var(--accent)}.instruction-folder i{font-style:normal;font-size:25px;color:var(--accent)}.instruction-back{border:0;background:transparent;color:var(--accent);padding:0 0 7px;font-weight:700}.stock-total{color:var(--accent);background:var(--accent-dark);border-radius:999px;padding:7px 10px;white-space:nowrap}.admin-card-title>div h3{margin-bottom:3px}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } }
@keyframes glow-drift { from { transform: translate3d(-8px,-10px,0) scale(.96); } to { transform: translate3d(14px,18px,0) scale(1.08); } }
@keyframes portrait-shine { 0%,35% { transform:translateX(-130%); } 70%,100% { transform:translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } }
@media (min-width: 650px) { #catalog { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){.admin-row{display:block}.row-actions{justify-content:flex-start;margin-top:10px}.admin-stats,.admin-form-grid{grid-template-columns:1fr}}