*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }

:root {
    --bg: #0e0f13;
    --bg-2: #121317;
    --surface: #16181d;
    --surface-2: #1b1e24;
    --white: #16181d;
    --text: #f4f5f7;
    --muted: #9297a1;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-light: rgba(139,92,246,0.14);
    --accent-glow: rgba(139,92,246,0.20);
    --green: #9bd58c;
    --green-light: rgba(155,213,140,0.14);
    --red: #f87171;
    --orange: #fbbf24;
    --gradient: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 55%, #a855f7 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.28);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.24);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.28);
    --shadow-xl: 0 16px 36px rgba(0,0,0,0.36);
    --r: 12px;
    --r-sm: 8px;
    --glass: linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045)), rgba(22,20,34,0.64);
    --glass-strong: linear-gradient(rgba(255,255,255,0.065), rgba(255,255,255,0.065)), rgba(22,20,34,0.70);
    --glass-border: rgba(210,196,255,0.16);
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
body::before {
    content: '';
    position: fixed;
    inset: -24px 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.065) 1px, transparent 1px);
    background-size: 22px 22px;
    transform: translate3d(0, var(--bg-parallax, 0px), 0);
    will-change: transform;
}

/* -- Header -- */
.header { position: sticky; top: 0; z-index: 50; padding: .85rem 1.5rem .85rem; background: linear-gradient(180deg, rgba(7,13,30,0.82) 55%, transparent 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header-top { max-width: 780px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 800; cursor: pointer; font-size: 1.15rem; letter-spacing: -0.02em; }
.logo-img { display: block; height: 56px; width: auto; object-fit: contain; }
.logo-icon { width: 36px; height: 36px; background: var(--gradient); border-radius: 11px; display: none; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; color: #fff; box-shadow: 0 4px 14px rgba(56,189,248,0.35); }
.logo-text {
    display: inline;
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.05rem;
    letter-spacing: .04em;
}
.nav-float { max-width: 540px; margin: 0 auto; background: var(--glass-strong); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-border); border-top-color: rgba(220,240,255,.28); border-radius: 50px; padding: 5px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 8px 30px rgba(56,189,248,0.12), 0 16px 48px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,.08); }
.nav { display: flex; gap: .25rem; justify-content: center; }
.nav-item { padding: .55rem 1.1rem; border-radius: 50px; font-size: .84rem; font-weight: 500; color: var(--muted); cursor: pointer; text-decoration: none; transition: all .25s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav-item:hover { color: var(--text); background: rgba(120,160,255,0.10); }
.nav-item.active { color: #fff; background: var(--gradient); font-weight: 600; box-shadow: 0 4px 14px rgba(56,189,248,0.35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-item.nav-raffle { color: #7c2d12; background: linear-gradient(135deg, #fde68a, #fb923c); font-weight: 700; box-shadow: 0 3px 14px rgba(249,115,22,.28); animation: raffleNavPulse 2.4s ease-in-out infinite; }
.nav-item.nav-raffle:hover, .nav-item.nav-raffle.active { color: #fff; background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 4px 18px rgba(236,72,153,.35); }
@keyframes raffleNavPulse { 0%,100% { box-shadow: 0 3px 14px rgba(249,115,22,.24); } 50% { box-shadow: 0 4px 22px rgba(249,115,22,.5); } }
.btn-auth { padding: .55rem 1.35rem; background: var(--gradient); color: #fff; border: none; border-radius: 50px; font-size: .86rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(56,189,248,0.35); transition: all .2s ease; letter-spacing: 0.01em; }
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(56,189,248,0.45); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.lang-switch { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 50px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: var(--text); font-size: .8rem; font-weight: 700; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.lang-btn:hover { border-color: var(--accent); }
.lang-btn svg { width: 15px; height: 15px; display: block; color: var(--accent); }
.lang-menu { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 60; min-width: 150px; display: flex; flex-direction: column; padding: .35rem; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-strong); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 12px 36px rgba(0,0,0,.4); }
.lang-option { padding: .45rem .7rem; border: none; border-radius: 9px; background: none; color: var(--text); font-size: .82rem; font-weight: 500; text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; }
.lang-option:hover { background: rgba(120,160,255,.12); }
.lang-option.active { color: var(--accent); font-weight: 700; }

/* -- Layout -- */
.container { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem; }
.container > * { max-width: 100%; min-width: 0; }
.container, .footer { position: relative; z-index: 1; }
.page.hidden { display: none; }

.bonus-balance-display {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
}

.bonus-balance-display strong {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.bonus-balance-display small {
    font-size: .8rem;
    opacity: .8;
}

.bonus-balance-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.25rem;
    background: var(--bg);
    border-radius: var(--r-sm);
    margin: 1rem 0;
    text-align: center;
}

.bonus-balance-card strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
}

.bonus-withdraw-help {
    margin-top: .9rem;
    padding: .95rem 1rem;
    text-align: left;
    background: linear-gradient(180deg, rgba(167, 139, 250, .08), rgba(255, 255, 255, .03));
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.bonus-withdraw-help strong {
    display: block;
    margin-bottom: .35rem;
    font-size: .92rem;
    color: var(--text);
}

.bonus-withdraw-help .field-help {
    margin: 0;
    line-height: 1.45;
}

.bonus-buckets { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; width:100%; margin-top:.65rem; }
.bonus-buckets span { padding:.7rem .8rem; color:var(--muted); background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:8px; font-size:.72rem; }
.bonus-buckets b { display:block; margin-top:.2rem; color:var(--text); font-size:.86rem; }

/* --- Loyalty program (levels + per-level wheel) --- */
.loyalty-strip { margin-bottom: 1rem; }
.loyalty-head { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; justify-content:space-between; margin-bottom:.6rem; }
.loyalty-head strong { font-size:1.02rem; color:var(--text); }
.loyalty-total { color:var(--muted); font-size:.82rem; }
.loyalty-progress { height:10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); overflow:hidden; }
.loyalty-progress-bar { height:100%; border-radius:999px; background:linear-gradient(90deg,#7c3aed,var(--accent)); transition:width .6s ease; }
.loyalty-progress-note { margin:.45rem 0 0; }
.loyalty-levels { display:flex; flex-direction:column; gap:.45rem; margin:.85rem 0; }
.loyalty-level { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .75rem; padding:.65rem .8rem; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:10px; opacity:.62; }
.loyalty-level.is-unlocked { opacity:1; border-color:rgba(155,213,140,.35); background:var(--green-light); }
.loyalty-level-mark { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.68rem; font-weight:800; color:#fff; background:rgba(255,255,255,.14); flex:none; }
.loyalty-level.is-unlocked .loyalty-level-mark { background:var(--green); }
.loyalty-level-name { font-weight:700; font-size:.88rem; }
.loyalty-level-range { color:var(--muted); font-size:.76rem; }
.loyalty-level-wheel { margin-left:auto; color:var(--accent); font-size:.78rem; font-weight:700; }
.wheel-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:clamp(14px,4vw,44px); background:rgba(8,9,12,.84); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); overflow:auto; animation:wheelFadeIn .24s ease both; }
.wheel-modal.hidden { display:none !important; }
body.wheel-modal-open { overflow:hidden; }
.wheel-modal-orb { position:fixed; width:38vw; height:38vw; border-radius:50%; pointer-events:none; filter:blur(100px); opacity:.18; }
.wheel-modal-orb-one { top:-16vw; right:-8vw; background:var(--accent); }
.wheel-modal-orb-two { bottom:-20vw; left:-8vw; background:#7c3aed; }
.wheel-dialog { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(330px,.92fr) minmax(320px,1.08fr); align-items:center; width:min(920px,100%); min-height:540px; padding:42px; overflow:hidden; background:linear-gradient(145deg,rgba(27,30,36,.99),rgba(14,15,19,.99) 58%,rgba(22,24,29,.99)); border:1px solid var(--glass-border); border-radius:30px; box-shadow:0 40px 120px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12); animation:wheelDialogIn .4s cubic-bezier(.2,.8,.2,1) both; }
.wheel-dialog::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 20% 50%,rgba(124,58,237,.2),transparent 40%),linear-gradient(110deg,rgba(255,255,255,.035),transparent 40%); }
.wheel-close { position:absolute; z-index:8; top:20px; right:20px; display:grid; place-items:center; width:42px; height:42px; padding:0; color:#c9c3d7; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:50%; cursor:pointer; transition:.2s ease; }
.wheel-close:hover { color:#fff; background:rgba(255,255,255,.14); transform:rotate(5deg); }
.wheel-close svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.wheel-visual { position:relative; display:flex; flex-direction:column; align-items:center; gap:22px; }
.wheel-badge { display:inline-flex; align-items:center; padding:7px 12px; color:#e9dcff; background:rgba(139,92,246,.16); border:1px solid rgba(196,181,253,.25); border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.03em; box-shadow:0 8px 30px rgba(93,45,190,.14); }
.wheel-stage { position:relative; width:340px; height:340px; margin:auto; filter:drop-shadow(0 22px 32px rgba(0,0,0,.42)); }
.wheel-halo { position:absolute; inset:-15px; border-radius:50%; background:conic-gradient(from 30deg,rgba(167,139,250,.58),transparent 17%,rgba(124,58,237,.48),transparent 48%,rgba(139,92,246,.48),transparent 77%,rgba(196,181,253,.52)); filter:blur(14px); opacity:.65; animation:wheelHalo 6s linear infinite; }
.fortune-wheel { position:absolute; inset:7px; border:8px solid #211a35; border-radius:50%; background:conic-gradient(from 0deg,#6d28d9 0 30deg,#a78bfa 30deg 60deg,#7c3aed 60deg 90deg,#8b5cf6 90deg 120deg,#5b21b6 120deg 150deg,#c4b5fd 150deg 180deg,#6d28d9 180deg 210deg,#a78bfa 210deg 240deg,#7c3aed 240deg 270deg,#8b5cf6 270deg 300deg,#5b21b6 300deg 330deg,#c4b5fd 330deg 360deg); box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 0 9px rgba(109,40,217,.14),inset 0 0 30px rgba(0,0,0,.22); transition:transform 4.5s cubic-bezier(.12,.72,.12,1); }
.fortune-wheel::before { content:''; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 30deg),radial-gradient(circle,transparent 55%,rgba(255,255,255,.08)); pointer-events:none; }
.fortune-wheel::after { content:''; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.14); border-radius:50%; pointer-events:none; }
.wheel-label { position:absolute; z-index:1; left:50%; top:50%; width:48px; margin:-8px 0 0 -24px; color:#fff; font-size:.69rem; font-weight:850; line-height:1; text-align:center; text-shadow:0 2px 4px rgba(0,0,0,.55); transform:rotate(calc(var(--i) * 30deg + 15deg)) translateY(-133px) rotate(calc(var(--i) * -30deg - 15deg)); }
.wheel-center { position:absolute; z-index:2; inset:50% auto auto 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; width:88px; height:88px; transform:translate(-50%,-50%); color:#fff; background:radial-gradient(circle at 36% 28%,#443066,#171220 72%); border:5px solid rgba(255,255,255,.17); border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 5px rgba(255,255,255,.18); }
.wheel-center small { color:#bca8d7; font-size:.48rem; font-weight:800; letter-spacing:.12em; }
.wheel-center strong { margin-top:1px; font-size:1.35rem; line-height:1; }
.wheel-pointer { position:absolute; z-index:5; top:-4px; left:50%; width:38px; height:46px; transform:translateX(-50%); filter:drop-shadow(0 6px 6px rgba(0,0,0,.4)); }
.wheel-pointer::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#fff,#d8c8ff); clip-path:polygon(50% 100%,0 0,100% 0); border-radius:8px 8px 16px 16px; }
.wheel-pointer span { position:absolute; z-index:1; top:7px; left:50%; width:9px; height:9px; transform:translateX(-50%); background:#7c3aed; border-radius:50%; }
.wheel-copy { padding:22px 24px 14px 50px; }
.wheel-copy .eyebrow { display:flex; align-items:center; gap:9px; color:#bfa5ff; font-size:.69rem; font-weight:850; letter-spacing:.17em; }
.wheel-copy .eyebrow span { width:18px; height:2px; background:linear-gradient(90deg,#7c3aed,var(--accent)); border-radius:9px; }
.wheel-copy h2 { margin:.65rem 0 .7rem; color:#fff; font-size:clamp(2rem,4vw,3rem); line-height:1.02; letter-spacing:-.045em; }
.wheel-description { max-width:420px; color:#aaa4b8; font-size:.98rem; line-height:1.65; }
.wheel-info { display:flex; align-items:flex-start; gap:10px; margin:20px 0 0; padding:12px 14px; color:#aaa4b8; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-radius:13px; font-size:.76rem; line-height:1.5; }
.wheel-info-icon { flex:0 0 auto; display:grid; place-items:center; width:19px; height:19px; color:#d9cbff; border:1px solid rgba(216,203,255,.45); border-radius:50%; font-size:.68rem; font-weight:800; }
.wheel-status { min-height:2.8em; margin:18px 0 12px; color:#d8c8ff; font-size:.86rem; font-weight:700; line-height:1.45; }
.wheel-spin-btn { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; padding:0 20px; overflow:hidden; color:#fff; background:var(--gradient); border:0; border-radius:14px; box-shadow:0 12px 30px rgba(126,34,206,.36),inset 0 1px 0 rgba(255,255,255,.2); font:700 .95rem/1 'Inter',sans-serif; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.wheel-spin-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.2) 46%,transparent 66%); transform:translateX(-120%); transition:transform .65s ease; }
.wheel-spin-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 16px 35px rgba(126,34,206,.48); filter:saturate(1.12); }
.wheel-spin-btn:hover:not(:disabled)::before { transform:translateX(120%); }
.wheel-spin-btn:disabled { cursor:not-allowed; opacity:.7; }
.wheel-spin-icon { font-size:1.35rem; line-height:1; }
.wheel-later { display:block; margin:12px auto 0; padding:5px; color:#827d8d; background:none; border:0; font:500 .76rem/1 'Inter',sans-serif; cursor:pointer; transition:color .2s; }
.wheel-later:hover { color:#c9c3d7; }
@keyframes wheelFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes wheelDialogIn { from { opacity:0; transform:translateY(22px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes wheelHalo { to { transform:rotate(360deg); } }
@media (max-width:780px) { .bonus-buckets { grid-template-columns:1fr; } .wheel-dialog { grid-template-columns:1fr; width:min(510px,100%); padding:54px 24px 28px; } .wheel-visual { gap:13px; } .wheel-stage { width:290px; height:290px; } .wheel-label { transform:rotate(calc(var(--i) * 30deg + 15deg)) translateY(-112px) rotate(calc(var(--i) * -30deg - 15deg)); } .wheel-copy { padding:26px 8px 0; text-align:center; } .wheel-copy .eyebrow { justify-content:center; } .wheel-description { margin:auto; } .wheel-copy h2 { font-size:2rem; } .wheel-info { text-align:left; } }
@media (max-width:400px) { .wheel-modal { padding:8px; } .wheel-dialog { padding:48px 16px 22px; border-radius:22px; } .wheel-close { top:12px; right:12px; width:36px; height:36px; } .wheel-stage { width:250px; height:250px; } .wheel-label { font-size:.6rem; transform:rotate(calc(var(--i) * 30deg + 15deg)) translateY(-95px) rotate(calc(var(--i) * -30deg - 15deg)); } .wheel-center { width:72px; height:72px; } .wheel-copy { padding-top:20px; } .wheel-info { margin-top:14px; } .wheel-status { margin:13px 0 8px; } }
@media (prefers-reduced-motion:reduce) { .wheel-modal,.wheel-dialog,.wheel-halo { animation:none; } }


/* Service-focused shell: restrained, compact and task-first. */
.header { padding:.55rem 1.25rem; background:rgba(14,15,19,.94); border-bottom:1px solid var(--border); }
.header-top { max-width:980px; margin-bottom:.35rem; }
.logo-img { height:38px; }
.header-trust { font-size:.72rem; }
.nav-float { max-width:980px; margin:0 auto; background:transparent; box-shadow:none; border:0; padding:0; border-radius:0; }
.nav { justify-content:flex-start; gap:.15rem; }
.nav-item { padding:.42rem .72rem; border-radius:7px; font-size:.8rem; }
.nav-item.active { box-shadow:none; }
.container { max-width:880px; padding:1.25rem; }
.page-h1 { font-size:1.25rem; margin:0 0 .75rem; }
.card { padding:1.25rem; border-radius:10px; animation:none; }
.card:hover { transform:none; }
@media (max-width:620px) { .header { padding:.55rem .75rem; } .header-top { margin-bottom:.25rem; } .header-trust { display:none; } .nav-float { overflow-x:auto; } .nav { width:max-content; } }

/* -- Card -- */
.card { position: relative; isolation: isolate; background: var(--glass); border-radius: var(--r); padding: 2rem; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.07); border: 1px solid var(--glass-border); border-top-color: rgba(220,240,255,.24); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; animation: glassRise .7s ease both; }
.card:hover { transform: translateY(-2px); border-color: rgba(160,210,255,.28); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09); }
@keyframes glassRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* -- SEO content and FAQ -- */
.seo-block { margin-top: 1.25rem; }
.page-h1 { margin: .25rem 0 1rem; font-size: 1.55rem; line-height: 1.25; font-weight: 700; }
.seo-block .seo-title { position: relative; margin-bottom: .9rem; padding-top: 1.5rem; font-size: 1.5rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.seo-block .seo-title::before { content: 'ИНСТРУКЦИЯ'; position: absolute; top: 0; left: 0; font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.seo-block p { color: var(--muted); font-size: .94rem; line-height: 1.75; }
.seo-block h3 { position: relative; margin: 1.85rem 0 .55rem; padding-left: .9rem; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.seo-block h3::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 3px; background: var(--gradient); }
.seo-steps { counter-reset: step; list-style: none; margin: 1.35rem 0 .35rem; padding: 0; display: grid; gap: .6rem; }
.seo-steps li { counter-increment: step; position: relative; margin: 0; padding: .8rem .95rem .8rem 3.1rem; color: var(--text); font-size: .9rem; line-height: 1.5; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; transition: border-color .25s ease, background .25s ease; }
.seo-steps li:hover { border-color: var(--glass-border); background: rgba(255,255,255,.06); }
.seo-steps li::before { content: counter(step); position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; color: #fff; background: var(--gradient); border-radius: 9px; box-shadow: 0 3px 10px rgba(124,58,237,.4); }
.seo-links { margin-top: 1.6rem; font-size: .9rem; }
.seo-facts { margin: 1rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.seo-facts li { position: relative; padding-left: 1.25rem; margin-bottom: .5rem; }
.seo-facts li::before { content: '•'; position: absolute; left: .25rem; color: var(--accent); font-weight: 700; }
.seo-faq-title { position: relative; margin-top: 2.1rem; margin-bottom: .9rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.seo-block a, .seo-links a, .legal a, .faq a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.seo-block a:hover, .seo-links a:hover, .legal a:hover, .faq a:hover { color: var(--accent-hover); }
.faq { margin-top: .5rem; display: grid; gap: .6rem; }
.faq details { padding: 0; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .25s ease, background .25s ease; }
.faq details:hover { border-color: var(--glass-border); }
.faq details[open] { border-color: var(--glass-border); background: rgba(255,255,255,.05); }
.faq summary { position: relative; padding: .95rem 3rem .95rem 1.1rem; cursor: pointer; font-weight: 600; font-size: .94rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.55rem; height: 1.55rem; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.15rem; line-height: 1; background: var(--accent-light); border-radius: 8px; transition: background .25s ease, color .25s ease; }
.faq details[open] summary::after { content: '−'; background: var(--gradient); color: #fff; }
.faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--muted); font-size: .89rem; line-height: 1.7; }

/* -- Utilities -- */
.hidden { display: none !important; }
.w-full { width: 100%; }
.mt-sm { margin-top: .5rem; }
.mt-md { margin-top: 1rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.text-muted { color: var(--muted); font-size: .87rem; }
.text-sm { font-size: .8rem; }
.text-green { color: var(--green); }
.row { display: flex; }
.gap-sm { gap: .5rem; }
.gap-lg { gap: 1.25rem; }
.col { flex: 1; min-width: 0; }

/* -- Inputs -- */
.label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.input-group { display: flex; align-items: center; border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; transition: all .25s ease; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.input { border: none; outline: none; padding: .85rem 1rem; font-size: 1.1rem; font-weight: 600; font-family: inherit; color: var(--text); background: none; width: 100%; }
.input-lg { font-size: 1.6rem; padding: 1.1rem 1rem; }
.input-suffix { padding-right: 1rem; font-size: 1.05rem; color: var(--muted); font-weight: 700; }
.input::placeholder { color: rgba(147,164,200,0.5); font-weight: 400; }
.input.w-full { border: 2px solid var(--border); border-radius: var(--r-sm); padding: .75rem 1rem; transition: all .2s ease; }
.input.w-full:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

/* -- «Итоговая цена» стикер на поле «Ты платишь» -- */
.pay-input-wrap { position: relative; }
.final-price-tag { position: absolute; top: -11px; right: 10px; z-index: 2; padding: .26rem .6rem; border-radius: 9px 9px 9px 3px; background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: nowrap; transform: rotate(3deg); transform-origin: bottom right; box-shadow: 0 5px 14px rgba(34,197,94,.4), inset 0 1px 0 rgba(255,255,255,.25); animation: finalTagPop .5s cubic-bezier(.2,.9,.3,1.4) .3s both; pointer-events: none; }
@keyframes finalTagPop { from { opacity: 0; transform: rotate(3deg) translateY(8px) scale(.7); } to { opacity: 1; transform: rotate(3deg) translateY(0) scale(1); } }

/* -- СБП с 0% комиссией: зелёная подсветка карточки, растянута на всю ширину -- */
.pay-method-sbp { grid-column: span 2; }
.pay-method-zero { border-color: rgba(34,197,94,.5); background: linear-gradient(145deg, rgba(34,197,94,.13), rgba(34,197,94,.03)); }
.pay-method-zero:hover { border-color: #22c55e; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34,197,94,.16); }
.pay-method-zero.active { border-color: #22c55e; background: linear-gradient(145deg, rgba(34,197,94,.2), rgba(34,197,94,.06)); color: #16a34a; box-shadow: 0 0 0 3px rgba(34,197,94,.28), 0 8px 20px rgba(0,0,0,.12); }
.zero-fee-badge { display: inline-block; margin-left: .25rem; padding: .1rem .4rem; border-radius: 999px; background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; box-shadow: 0 3px 8px rgba(34,197,94,.35); }

/* -- Chips -- */
.chips { display: flex; gap: .4rem; margin-top: .5rem; }
.chip { padding: .35rem .75rem; border: 2px solid var(--border); background: var(--glass); border-radius: 50px; font-size: .8rem; font-weight: 600; color: var(--accent); cursor: pointer; transition: all .25s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.chip:hover { background: var(--accent-light); border-color: var(--accent); transform: translateY(-1px); }
.chip-accent { background: var(--accent-light); border-color: var(--accent); }

/* -- Captions -- */
.delivery-caption { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .45rem; letter-spacing: .04em; }

/* -- Delivery Tabs -- */
.delivery-tabs { display: flex; gap: .45rem; margin-bottom: 1rem; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); border-top-color: rgba(220,240,255,.22); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); }
.delivery-tab { flex: 1; padding: .65rem .9rem; border: 2px solid transparent; border-radius: 999px; background: none; font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .2s ease; font-family: inherit; }
.delivery-tab:hover { color: var(--text); background: var(--accent-light); }
.delivery-tab.active { background: var(--gradient); color: #fff; box-shadow: 0 4px 14px rgba(56,189,248,0.32); }

/* -- Buttons -- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.5rem; border: none; border-radius: var(--r-sm); font-size: .92rem; font-weight: 600; cursor: pointer; transition: all .25s ease; font-family: inherit; text-decoration: none; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%); pointer-events: none; }
.btn-xl { padding: 1.1rem 2rem; font-size: 1.1rem; border-radius: var(--r); letter-spacing: 0.01em; }
.btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 4px 14px rgba(56,189,248,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(56,189,248,0.4); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(56,189,248,0.3); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-accent { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,0.3); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245,158,11,0.4); }
.btn-accent:active { transform: translateY(0); }
.btn-outline { background: var(--glass); border: 2px solid var(--border); color: var(--text); font-size: .85rem; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-icon { width: 38px; height: 38px; border: 2px solid var(--border); background: var(--glass); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; color: var(--muted); transition: all .2s ease; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-icon:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* -- Steps -- */
.step.hidden { display: none !important; }
.step-top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.step-top h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.hint { font-size: .82rem; color: var(--muted); text-align: center; }

/* -- User Preview -- */
.user-found { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: rgba(52,211,153,0.10); border-radius: var(--r-sm); border: 1px solid rgba(52,211,153,0.28); }
.user-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.user-check { width: 18px; height: 18px; background: var(--green); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: .4rem; vertical-align: middle; box-shadow: 0 2px 6px rgba(16,185,129,0.3); }
.user-check::after { content: '\2713'; color: #fff; font-size: .6rem; font-weight: 800; }
.user-name { font-weight: 600; }

.place-id-lookup{margin-top:1rem;margin-bottom:1rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:24px;background:rgba(255,255,255,.025)}
.place-id-row{display:flex;gap:.5rem;align-items:center}.place-id-row .input{border-radius:18px}.place-id-row .input{min-width:0;flex:1}.place-id-row .btn{flex:0 0 auto;white-space:nowrap}.place-id-lookup .field-help{min-height:1.2em;margin-top:.45rem}
.place-search-loading{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:110px;padding:1rem;color:var(--muted);border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.025);animation:placeSearchPulse 1.1s ease-in-out infinite alternate}.place-search-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:placeSearchSpin .7s linear infinite}.btn.is-loading{display:inline-flex;align-items:center;gap:.45rem}.place-search-result{animation:placeSearchIn .35s ease both}.place-search-success{color:var(--green)}.place-search-error{padding:.8rem 1rem;color:#fca5a5;border:1px solid rgba(248,113,113,.25);border-radius:14px;background:rgba(248,113,113,.08);text-align:center;animation:placeSearchIn .25s ease both}.place-search-error-text{color:#fca5a5}@keyframes placeSearchSpin{to{transform:rotate(360deg)}}@keyframes placeSearchPulse{to{opacity:.58}}@keyframes placeSearchIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
/* -- Places -- */
.places-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.place-item { border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; transition: all .25s ease; position: relative; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.place-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.place-item.selected { border-color: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.place-item.selected::after { content: '\2713'; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: var(--green); border-radius: 50%; color: #fff; font-size: .65rem; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 2px 6px rgba(16,185,129,0.3); }
.place-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg); }
.place-label { padding: .4rem .6rem; font-size: .74rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* -- Game Pass -- */
.gp-guide-frame { width: 100%; height: 359px; background: #EAEEF0; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.gp-guide-frame iframe { width: 100%; height: 359px; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.gp-label { margin-bottom: .5rem; font-size: .85rem; }
.gp-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.gp-not-found { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(248,113,113,0.3); background: rgba(248,113,113,0.10); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.gp-not-found p { font-size: .86rem; line-height: 1.55; color: #fca5a5; font-weight: 500; }

/* -- Summary -- */
.summary { background: var(--glass); border-radius: var(--r-sm); padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.summary-row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .9rem; }
.summary-total { border-top: 2px solid var(--border); margin-top: .5rem; padding-top: .7rem; font-weight: 700; font-size: 1.05rem; }

/* -- Payment -- */
.currency-select { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .85rem; }
.currency-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 50px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: var(--text); font-size: .8rem; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.currency-chip .cur-sym { font-size: .92rem; font-weight: 800; color: var(--accent); }
.currency-chip svg { width: 16px; height: 16px; display: block; }
.currency-chip:hover { border-color: var(--accent); }
.currency-chip.active { border-color: var(--accent); background: linear-gradient(145deg, var(--accent-light), rgba(56,189,248,.08)); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
@media (max-width: 430px) { .currency-select { gap: .35rem; } .currency-chip { padding: .45rem .65rem; font-size: .74rem; } }
.pay-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: .75rem; }
.pay-method { min-height: 66px; display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pay-method:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.pay-method.active { border-color: var(--accent); background: linear-gradient(145deg, var(--accent-light), rgba(56,189,248,.08)); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow), 0 8px 20px rgba(0,0,0,.12); }
.pay-method:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.pay-method-icon { width: 31px; height: 31px; flex: 0 0 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(56,189,248,.13); color: var(--accent); font-size: 1.05rem; font-weight: 800; }
.pay-method-icon svg { width: 31px; height: 31px; display: block; }
.pay-method-copy { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.pay-method-copy strong { font-size: .82rem; line-height: 1.15; white-space: nowrap; }
.pay-method-copy small { color: var(--muted); font-size: .68rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payment-fallback-note { margin: 0 0 1.25rem; padding: .7rem .8rem; border: 1px solid rgba(251,191,36,.25); border-radius: 10px; background: rgba(251,191,36,.08); color: #fcd34d; font-size: .76rem; line-height: 1.45; }
@media (max-width: 430px) { .pay-methods { grid-template-columns: 1fr; } .pay-method-sbp { grid-column: auto; } }

/* -- Tasks -- */
.task-list { display: grid; gap: .6rem; }
.task-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--glass); transition: all .25s ease; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.task-item:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.task-item strong { font-size: .92rem; }
.reward { background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(99,102,241,0.18)); color: var(--accent); font-weight: 700; font-size: .82rem; padding: .35rem .75rem; border-radius: 50px; white-space: nowrap; }

/* -- Orders -- */
.order-item { padding: 1rem; margin-bottom: .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); font-size: .9rem; }
.order-item:last-child { margin-bottom: 0; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .85rem; }
.order-head > div { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.order-head > div > strong { font-size: 1.08rem; }
.order-id { max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.order-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
.order-details > div { display: flex; justify-content: space-between; gap: .75rem; padding-bottom: .35rem; border-bottom: 1px dashed rgba(255,255,255,.07); }
.order-details span { color: var(--muted); font-size: .76rem; }
.order-details strong { min-width: 0; overflow-wrap: anywhere; text-align: right; font-size: .78rem; }
.order-alerts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.order-note { margin-top: .7rem; padding: .65rem .75rem; border-radius: 8px; background: rgba(56,189,248,.1); color: #7dd3fc; font-size: .78rem; font-weight: 600; }
.order-note.is-error { background: rgba(248,113,113,.13); color: #fca5a5; }
.order-status { font-size: .76rem; padding: .25rem .6rem; border-radius: 50px; font-weight: 600; }
.order-status.pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
.order-status.done { background: rgba(52,211,153,0.15); color: #34d399; }
.order-status.cancelled { background: rgba(248,113,113,0.15); color: #f87171; }
.order-status.awaiting { background: rgba(56,189,248,0.15); color: #38bdf8; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }

/* -- Raffle -- */
.raffle-hero { display: flex; align-items: center; gap: 1.25rem; color: #fff; background: var(--gradient); overflow: hidden; position: relative; }
.raffle-hero::after { content: 'R$'; position: absolute; right: 1.5rem; bottom: -1.2rem; font-size: 7rem; font-weight: 800; opacity: .12; }
.raffle-emoji { font-size: 3rem; }
.raffle-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .82; font-weight: 700; }
.raffle-hero .raffle-prize { margin: .2rem 0; font-size: 2rem; font-weight: 800; }
.raffle-hero p:last-child { opacity: .9; }
.raffle-info, .raffle-me { margin-top: 1rem; }
.raffle-info p { color: var(--muted); font-size: .88rem; margin-top: .45rem; }
.raffle-free-notice { display: grid; gap: .25rem; margin: .8rem 0 .75rem; padding: .85rem 1rem; border: 1px solid rgba(34, 197, 94, .3); border-left: 4px solid #22c55e; border-radius: 8px; background: rgba(34, 197, 94, .08); }
.raffle-free-notice strong { color: var(--text); font-size: .94rem; }
.raffle-free-notice span { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.raffle-info .raffle-terms-note { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--border); font-size: .8rem; line-height: 1.45; }
.raffle-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.raffle-me-stats { display: flex; align-items: baseline; gap: .5rem; margin: .85rem 0 .35rem; }
.raffle-me-stats strong { color: var(--accent); font-size: 1.5rem; }
.raffle-me-stats span { color: var(--muted); font-size: .8rem; margin-right: .75rem; }
.raffle-me-rank { font-size: .9rem; margin-top: .2rem; }
.raffle-me-rank strong { color: var(--accent); }
.raffle-table-wrap { overflow-x: auto; }
.raffle-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.raffle-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; text-align: left; padding: .6rem; border-bottom: 1px solid var(--border); }
.raffle-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--border); }
.raffle-table tr:last-child td { border-bottom: none; }
.raffle-rank { color: var(--muted); font-weight: 700; width: 2rem; }
.raffle-user { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.raffle-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--accent-light); }
.raffle-disabled { text-align: center; }

/* -- Toast -- */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(60px); padding: .75rem 1.5rem; border-radius: 50px; font-size: .87rem; font-weight: 500; box-shadow: var(--shadow-xl); opacity: 0; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; color: #fff; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.ok { background: var(--green); }
.toast.err { background: var(--red); }

/* -- Footer -- */
.footer { max-width: 720px; margin: 2.5rem auto 0; padding: 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--muted); }
.footer-links { display: flex; gap: 1.25rem; }
.footer-company { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.footer-company-details { color:var(--muted); font-size:.72rem; line-height:1.4; max-width:460px; }
.footer-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--accent); }

/* -- Loading -- */
.spinner { display: flex; justify-content: center; padding: 1.5rem; }
.spinner::after { content: ''; width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spinner { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: .4rem; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
.btn.is-loading { opacity: .85; cursor: progress; }
.delivery-box { padding: .7rem .8rem .75rem; border: 1px solid rgba(167,139,250,.35); border-radius: 14px; background: rgba(167,139,250,.07); }
.delivery-box .delivery-tabs { margin-bottom: .5rem; }
.delivery-box .delivery-caption { color: var(--accent); font-size: .82rem; text-transform: uppercase; }
.delivery-note { display: block; width: 100%; padding: .42rem .65rem; border: 1px solid rgba(74,222,128,.3); border-radius: 9px; background: rgba(74,222,128,.1); color: #86efac; font-size: .72rem; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; word-break: normal; overflow-wrap: normal; }
.delivery-note.slow { border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.12); color: #fcd34d; }
.delivery-note b { font-weight: 800; }
.order-eta { display: inline-block; font-size: .74rem; font-weight: 600; color: #fbbf24; background: rgba(251,191,36,0.15); padding: .28rem .5rem; border-radius: 6px; }
.order-warn { display: inline-block; font-size: .74rem; font-weight: 600; color: #fca5a5; background: rgba(248,113,113,0.15); padding: .28rem .5rem; border-radius: 6px; }
.pending-timer { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: .85rem; padding: 1rem; border: 1px solid rgba(167,139,250,.22); border-radius: 10px; background: rgba(139,92,246,.07); text-align: center; }
.pending-timer-title { color: var(--accent); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pending-ring { position: relative; width: 132px; height: 132px; flex: 0 0 132px; border-radius: 50%; background: conic-gradient(var(--accent) var(--progress), rgba(255,255,255,.09) 0); display: grid; place-items: center; }
.pending-ring::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #15171c; }
.pending-ring-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.pending-ring-center strong { font-size: 1.05rem; color: var(--text); }
.pending-ring-center span { margin-top: .3rem; color: var(--muted); font-size: .66rem; }
.pending-timer-copy { display: flex; flex-direction: column; align-items: center; max-width: 420px; gap: .3rem; }
.pending-timer-copy strong { font-size: .88rem; }
.pending-timer-copy span { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.pending-timer.finished .pending-ring { background: conic-gradient(#34d399 100%, #34d399 0); }
.savings-note { margin: .15rem 0 1.1rem; text-align: center; font-size: 1.02rem; font-weight: 600; color: #fecaca; background: rgba(248,113,113,0.12); border: 2px solid rgba(248,113,113,0.45); padding: .85rem 1rem; border-radius: 12px; box-shadow: 0 4px 16px rgba(248,113,113,0.18); animation: savingsPulse 1.8s ease-in-out infinite; }
.savings-note::before { content: '⚠️ '; }
.savings-note b { color: #fca5a5; font-size: 1.12rem; }
@keyframes savingsPulse { 0%,100% { box-shadow: 0 4px 16px rgba(220,38,38,.18); } 50% { box-shadow: 0 4px 22px rgba(220,38,38,.42); } }

/* -- Modal -- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.hidden { display: none !important; }
.modal { background: var(--glass-strong); border: 1px solid var(--glass-border); border-top-color: rgba(220,240,255,.25); border-radius: 18px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); animation: modalIn .25s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-tabs { display: flex; gap: .25rem; margin-bottom: 1.5rem; background: var(--bg); padding: 4px; border-radius: var(--r-sm); }
.modal-tab { flex: 1; padding: .5rem; border: none; background: none; border-radius: 8px; font-size: .87rem; font-weight: 500; cursor: pointer; color: var(--muted); transition: .2s; font-family: inherit; }
.modal-tab.active { background: var(--surface-2); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.form-error { color: var(--red); font-size: .82rem; margin-bottom: .5rem; min-height: 1.2em; }
.instant-login-modal { max-width: 520px; }
.instant-login-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.55rem; }
.instant-login-head h3 { margin-top:.35rem; font-size:1.25rem; }
.instant-login-content { min-height:150px; display:grid; place-items:center; margin:1rem 0; }
.instant-login-form { width:100%; display:grid; gap:.85rem; }
.instant-login-prompt { padding:.8rem; border-radius:10px; background:rgba(139,92,246,.09); color:var(--text); font-size:.86rem; line-height:1.5; }
.instant-login-help { color:var(--muted); font-size:.8rem; line-height:1.5; margin-top:-.4rem; }
.instant-login-image { display:block; width:100%; max-height:280px; object-fit:contain; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.18); }
.instant-code-input { text-align:center; font-size:1.25rem; letter-spacing:.14em; font-weight:700; }
.instant-choice-list { display:grid; gap:.6rem; width:100%; max-height:300px; overflow:auto; }
.instant-choice { display:flex; align-items:flex-start; gap:.7rem; padding:.8rem; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.025); cursor:pointer; }
.instant-choice:has(input:checked) { border-color:var(--accent); background:var(--accent-light); }
.instant-choice input { margin-top:.15rem; accent-color:var(--accent); }
.instant-choice span { display:grid; gap:.2rem; }
.instant-choice strong { font-size:.87rem; }
.instant-choice small { color:var(--muted); font-size:.72rem; line-height:1.4; }
.instant-security-note { display:grid; gap:.25rem; padding:.75rem; border-radius:10px; border:1px solid rgba(34,197,94,.2); background:rgba(34,197,94,.055); }
.instant-security-note strong { color:#86efac; font-size:.76rem; }
.instant-security-note span { color:var(--muted); font-size:.68rem; line-height:1.45; }
.instant-login-wait,.instant-login-result { width:100%; display:grid; justify-items:center; gap:.7rem; text-align:center; padding:1rem .5rem; }
.instant-login-wait p,.instant-login-result p { color:var(--muted); font-size:.8rem; line-height:1.5; }
.instant-login-result>span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; font-size:1.6rem; font-weight:800; }
.instant-login-result.is-success>span { background:var(--green-light); color:var(--green); }
.instant-login-result.is-error>span { background:rgba(248,113,113,.13); color:var(--red); }

/* -- User menu -- */
.user-menu { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.user-name-btn { display: flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border: 2px solid var(--border); background: var(--glass); border-radius: 50px; font-size: .84rem; font-weight: 600; color: var(--text); cursor: pointer; transition: all .2s ease; font-family: inherit; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.user-name-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.user-avatar-sm { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.btn-logout { padding: .4rem .7rem; border: 2px solid var(--border); background: var(--glass); border-radius: var(--r-sm); font-size: .78rem; color: var(--muted); cursor: pointer; font-family: inherit; transition: all .2s ease; font-weight: 500; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-logout:hover { border-color: var(--red); color: var(--red); background: rgba(248,113,113,0.12); }

/* -- Slider -- */
.slider-wrap { padding: 0 .25rem; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent-light), var(--accent)); outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #e9f0ff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(56,189,248,0.3); cursor: pointer; transition: all .2s ease; }
.slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(56,189,248,0.4); }
.slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #e9f0ff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(56,189,248,0.3); cursor: pointer; }
.slider-labels { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: .4rem; font-weight: 500; }

/* -- Advantages -- */
.advantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-top: 1.25rem; }
.adv-item { position: relative; background: var(--glass); border-radius: var(--r); padding: 1.25rem .85rem; text-align: center; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.06); border: 1px solid var(--glass-border); border-top-color: rgba(220,240,255,.22); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); }
.adv-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.adv-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: 0 auto .6rem; font-size: 1.5rem; background: var(--accent-light); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.adv-title { font-size: .87rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
.adv-desc { font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* -- Support Widget -- */
.support-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; }
.support-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--gradient); color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(56,189,248,0.4); display: flex; align-items: center; justify-content: center; transition: all .25s ease; }
.support-btn:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(56,189,248,0.5); }
.support-panel { position: absolute; bottom: 70px; right: 0; width: min(390px, calc(100vw - 2rem)); max-height: min(650px, calc(100vh - 7rem)); background: var(--glass-strong); border: 1px solid var(--glass-border); border-top-color: rgba(220,240,255,.25); border-radius: 18px; box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); animation: modalIn .2s ease; }
.support-panel.hidden { display: none; }
.support-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-size: .92rem; }
.support-close { background: none; border: none; font-size: 1.4rem; color: var(--muted); cursor: pointer; line-height: 1; transition: color .2s; }
.support-close:hover { color: var(--text); }
.support-body { padding: 1.1rem; overflow:auto; max-height:calc(min(650px, 100vh - 7rem) - 55px); }
.support-body p { font-size: .9rem; color: var(--muted); margin-bottom: .85rem; }
.support-choice { display:grid; gap:.65rem; }
.support-choice p { margin-bottom:.15rem; }
.support-tg { gap: .5rem; display:flex; justify-content:center; }
.support-site-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.support-back,.support-new,.support-chat-head button { padding:0; border:0; background:none; color:var(--accent); font:inherit; font-size:.8rem; cursor:pointer; }
.support-ticket-list { display:grid; gap:.5rem; }
.support-ticket-row { position:relative; width:100%; display:flex; align-items:center; gap:.5rem; padding:.75rem; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.025); color:var(--text); text-align:left; cursor:pointer; }
.support-ticket-row:hover { border-color:var(--accent); }
.support-ticket-row > span { min-width:0; flex:1; display:grid; gap:.2rem; }
.support-ticket-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.support-ticket-row small,.support-chat-head small { color:var(--muted); font-size:.68rem; }
.support-status { padding:.2rem .4rem; border-radius:999px; background:var(--accent-light); color:var(--accent); font-size:.62rem; font-style:normal; white-space:nowrap; }
.support-status.status-closed { color:var(--muted); background:rgba(148,163,184,.12); }
.support-unread { min-width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:white; font-size:.62rem; }
.support-form { display:grid; gap:.7rem; }
.support-form label { display:grid; gap:.3rem; color:var(--text); font-size:.75rem; font-weight:600; }
.support-form label span { color:var(--muted); font-weight:400; }
.support-form textarea,.support-reply textarea { min-height:40px; max-height:140px; resize:none; overflow-y:auto; font-family:inherit; }
.support-file { padding:.65rem .75rem; border:1px dashed var(--border); border-radius:9px; color:var(--accent)!important; cursor:pointer; }
.support-file > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-file input,.support-reply-file input { display:none; }
.support-image-preview { position:relative; width:max-content; max-width:100%; padding:0; border:0; border-radius:10px; background:transparent; }
.support-image-preview.hidden { display:none; }
.support-image-preview img { display:block; width:88px; height:88px; border-radius:10px; object-fit:cover; }
.support-image-preview button { position:absolute; top:-7px; right:-7px; width:24px; height:24px; padding:0; border:2px solid var(--bg); border-radius:50%; background:#334155; color:#fff; font-size:1rem; line-height:18px; cursor:pointer; }
.support-image-preview.compact { margin:.45rem 0 0; }
.support-photo { display:block; max-width:100%; max-height:220px; margin-bottom:.45rem; border-radius:9px; object-fit:contain; }
.support-chat-head { display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.7rem; }
.support-chat-head div { display:grid; gap:.15rem; min-width:0; }
.support-chat-head strong { font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-messages { height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:.55rem; padding:.25rem .1rem .6rem; }
.support-message { max-width:86%; display:grid; gap:.2rem; align-self:flex-start; }
.support-message.mine { align-self:flex-end; }
.support-message span { padding:.6rem .7rem; border-radius:12px 12px 12px 4px; background:rgba(148,163,184,.13); font-size:.78rem; line-height:1.4; overflow-wrap:anywhere; }
.support-message.mine span { border-radius:12px 12px 4px 12px; background:var(--gradient); color:#fff; }
.support-message small { color:var(--muted); font-size:.6rem; }
.support-message.mine small { text-align:right; }
.support-reply { display:grid; grid-template-columns:1fr auto auto; gap:.45rem; align-items:end; padding-top:.65rem; border-top:1px solid var(--border); }
.support-reply-file { min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; cursor:pointer; }
.support-reply textarea { min-height:40px; }
.support-loading,.support-error,.support-closed { padding:1.5rem .5rem; color:var(--muted); text-align:center; font-size:.8rem; }
.support-hours { margin-top: .85rem; font-size: .78rem; color: var(--muted); text-align: center; }
.support-hours span { color: var(--green); font-weight: 600; }

/* Mobile support is a real full-screen chat, not a tiny floating card. */
@media (max-width: 768px) {
    .support-widget:has(.support-panel:not(.hidden)) { inset: 0; z-index: 1000; }
    .support-widget:has(.support-panel:not(.hidden)) .support-btn { display: none; }
    .support-panel {
        position: fixed;
        inset: 0;
        width: 100vw !important;
        max-width: none;
        max-height: none;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        background: var(--bg) !important;
    }
    .support-header {
        min-height: 58px;
        padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .75rem;
        background: var(--glass-strong);
    }
    .support-header strong { font-size: 1rem; }
    .support-close { width: 42px; height: 42px; font-size: 1.8rem; }
    .support-body {
        min-height: 0;
        max-height: none;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        overflow: auto;
    }
    .support-site { min-height: 0; flex: 1; display: flex; flex-direction: column; }
    .support-site.hidden { display: none; }
    .support-site-top { flex: 0 0 auto; min-height: 38px; }
    #supportContent { min-height: 0; flex: 1; display: flex; flex-direction: column; }
    .support-chat-head { flex: 0 0 auto; padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
    .support-messages { min-height: 0; height: auto; flex: 1; padding: .8rem .15rem; }
    .support-message { max-width: 88%; }
    .support-message span { padding: .75rem .85rem; font-size: .88rem; }
    .support-reply {
        position: sticky;
        bottom: 0;
        flex: 0 0 auto;
        margin: 0 -1rem calc(-1rem - env(safe-area-inset-bottom, 0px));
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--bg);
        grid-template-columns: minmax(0, 1fr) 44px auto;
    }
    .support-reply textarea { min-height: 48px; max-height: 100px; font-size: 16px; resize: none; }
    .support-reply .btn { min-height: 44px; padding: .65rem .85rem; }
    .support-reply-file { width: 44px; height: 44px; }
    .support-form { flex: 1; grid-template-rows: auto auto auto; align-content: start; }
    .support-form textarea { min-height: 32vh; font-size: 16px; }
    .support-ticket-list { overflow-y: auto; }
    .support-hours { flex: 0 0 auto; }
}

/* -- Legal pages -- */
.legal h2 { margin-bottom: .75rem; }
.legal h3 { font-size: .97rem; margin-top: 1.5rem; margin-bottom: .4rem; color: var(--text); }
.legal p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin-bottom: .6rem; }
.legal ul { font-size: .9rem; color: var(--muted); line-height: 1.7; padding-left: 1.5rem; margin-bottom: .6rem; }
.legal li { margin-bottom: .3rem; }

/* -- Desktop Enhancements -- */
@media (min-width: 1024px) {
    .header-top,
    .container,
    .footer {
        max-width: 920px;
    }

    .container {
        padding: 2.5rem 1.5rem;
    }

    .card {
        padding: 2.5rem;
        border-radius: 18px;
    }

    .nav-float {
        max-width: 620px;
        width: max-content;
        max-width: min(100%, max-content);
    }

    .row.gap-lg {
        gap: 1.5rem;
    }

    .label {
        font-size: .86rem;
        margin-bottom: .65rem;
    }

    .input-lg {
        font-size: 1.8rem;
        padding: 1.25rem 1rem;
    }

    .input-suffix {
        font-size: 1.12rem;
    }

    .chips {
        gap: .5rem;
        margin-top: .7rem;
    }

    .chip {
        padding: .42rem .9rem;
        font-size: .85rem;
    }

    .delivery-caption {
        font-size: .84rem;
        margin-bottom: .55rem;
    }

    .delivery-tabs {
        margin-bottom: 1.25rem;
        padding: 6px;
    }

    .delivery-tab {
        padding: .8rem 1rem;
        font-size: .9rem;
    }

    .step-top {
        margin-bottom: 1.2rem;
    }

    .step-top h2 {
        font-size: 1.35rem;
    }

    .gp-guide-frame,
    .gp-guide-frame iframe {
        height: 400px;
    }

    .gp-not-found {
        padding: 1.15rem 1.25rem;
    }

    .summary {
        padding: 1.25rem 1.4rem;
    }

    .summary-row {
        font-size: .98rem;
        padding: .5rem 0;
    }

    .summary-total {
        font-size: 1.1rem;
    }

.pay-methods {
        gap: .7rem;
        margin-bottom: 1.4rem;
    }

    .pay-method {
        padding: .95rem .75rem;
        font-size: .92rem;
    }

    .advantages {
        margin-top: 1.5rem;
        gap: 1rem;
    }

    .adv-item {
        padding: 1.4rem 1rem;
    }

    .adv-icon {
        font-size: 1.9rem;
    }

    .adv-title {
        font-size: .95rem;
    }

    .adv-desc {
        font-size: .8rem;
    }
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .header { padding: .6rem .75rem .6rem; }
    .header-top { min-width: 0; gap: .5rem; margin-bottom: .5rem; }
    .logo { min-width: 0; font-size: 1rem; gap: .4rem; }
    .logo-img { height: 46px; }
    .logo-icon { width: 30px; height: 30px; }
    .nav-float { max-width: 100%; padding: 4px; border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-float::-webkit-scrollbar { display: none; }
    .nav { width: 100%; min-width: 0; gap: .15rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .nav::-webkit-scrollbar { display: none; }
    .nav-item { padding: .4rem .65rem; font-size: .76rem; border-radius: 12px; white-space: nowrap; flex-shrink: 0; }
    .btn-auth { padding: .4rem 1rem; font-size: .8rem; }
    .user-menu { min-width: 0; gap: .35rem; }
    .user-name-btn { max-width: 34vw; overflow: hidden; padding: .3rem .6rem; font-size: .78rem; white-space: nowrap; }
    .user-avatar-sm { width: 20px; height: 20px; }
    .btn-logout { padding: .3rem .5rem; font-size: .72rem; }

    .container { padding: 1rem .75rem; }
    .card { padding: 1.25rem; border-radius: 12px; }
    .row.gap-lg { flex-direction: column; }
    .input-lg { font-size: 1.3rem; padding: .85rem .75rem; }
    .input-suffix { font-size: .9rem; }
    .chips { flex-wrap: wrap; }
    .chip { font-size: .72rem; padding: .3rem .55rem; }
    .delivery-tabs { gap: .3rem; padding: 4px; margin-bottom: .85rem; }
    .delivery-tab { min-width: 0; padding: .5rem .65rem; font-size: .76rem; }
    .delivery-note { padding: .5rem .55rem; font-size: .74rem; line-height: 1.4; }
    .btn-xl { padding: .85rem 1.25rem; font-size: .95rem; }
    .slider-labels { font-size: .68rem; }

    .gp-guide-frame { height: 280px; }
    .gp-guide-frame iframe { height: 280px; }

    .places-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .advantages { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .adv-item { padding: 1rem .65rem; }
    .adv-icon { font-size: 1.4rem; }
    .adv-title { font-size: .8rem; }
    .adv-desc { font-size: .68rem; }

    .pay-methods { gap: .35rem; }
    .pay-method { padding: .6rem .35rem; font-size: .78rem; border-radius: 8px; }
    .order-item { padding: .85rem; }
    .order-details { grid-template-columns: 1fr; }
    .order-id { max-width: 115px; }
    .pending-timer { gap: .7rem; padding: .9rem .75rem; }
    .pending-ring { width: 118px; height: 118px; flex-basis: 118px; }
    .summary { padding: .75rem; }
    .summary-row { font-size: .84rem; }

    .task-item { padding: .75rem; }
    .task-item strong { font-size: .85rem; }
    .reward { font-size: .75rem; padding: .25rem .55rem; }

    .gp-step span { font-size: .82rem; }
    .gp-num { width: 24px; height: 24px; font-size: .65rem; }
    .gp-actions { gap: .35rem; }
    .gp-actions .chip { font-size: .72rem; }
    .gp-actions .btn-outline { font-size: .78rem; padding: .5rem .75rem; }

    .footer { flex-direction: column; gap: .5rem; text-align: center; padding: 1rem .75rem; }

    .modal { padding: 1.5rem; max-width: 340px; }
    .support-panel { width: 260px; }
    .support-btn { width: 48px; height: 48px; }
    .support-widget { bottom: 1rem; right: 1rem; }
}

@media (max-width: 400px) {
    .nav { overflow: visible; }
    .nav-item { padding: .3rem .25rem; font-size: .66rem; }
    .advantages { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .adv-item { padding: .8rem .5rem; }
    .input-lg { font-size: 1.1rem; }
    .header { padding: .5rem .5rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .card { animation: none; }
    .card:hover, .adv-item:hover, .task-item:hover, .pay-method:hover { transform: none; }
}

/* ===== 2026 visual refresh: foreground controls over a quiet void ===== */
:root {
    --bg: #07080d;
    --bg-2: #0c0e15;
    --surface: #11141d;
    --surface-2: #171b27;
    --text: #f7f8fc;
    --muted: #9299ac;
    --border: rgba(255,255,255,.09);
    --border-strong: rgba(255,255,255,.17);
    --accent: #a78bfa;
    --accent-hover: #d7c8ff;
    --accent-light: rgba(167,139,250,.13);
    --accent-glow: rgba(167,139,250,.22);
    --gradient: linear-gradient(135deg,#6d4aff 0%,#aa68ff 48%,#ff9f68 100%);
    --glass: linear-gradient(145deg,rgba(24,27,39,.9),rgba(12,14,21,.84));
    --glass-strong: rgba(13,16,24,.92);
    --glass-border: rgba(205,195,255,.18);
    --shadow-md: 0 14px 34px rgba(0,0,0,.28);
    --shadow-lg: 0 24px 70px rgba(0,0,0,.42);
    --shadow-xl: 0 30px 90px rgba(0,0,0,.56);
}
html { background: var(--bg); }
body {
    position: relative;
    background: radial-gradient(ellipse at 50% -18%, rgba(115,83,255,.18), transparent 42%), radial-gradient(ellipse at 8% 65%, rgba(43,157,255,.08), transparent 30%), var(--bg);
}
body::before {
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.64), transparent 78%);
    opacity: .22;
}
body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, transparent 0 28%, rgba(0,0,0,.28) 75%); }
.header { background: linear-gradient(180deg, rgba(7,8,13,.96), rgba(7,8,13,.72) 68%, transparent); border-bottom: 1px solid rgba(255,255,255,.045); }
.header-top, .nav-float { max-width: 1060px; }
.nav-float { background: rgba(16,19,29,.78); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.nav-item { transition: color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.nav-item:hover { transform: translateY(-1px); }
.nav-item.active { box-shadow: 0 8px 24px rgba(112,76,255,.34), inset 0 1px 0 rgba(255,255,255,.24); }
.btn, .btn-auth, .chip, .delivery-tab, .currency-chip, .pay-method, .place-item, .task-item { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease, filter .3s ease; }
.btn::after, .btn-auth::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 48%, transparent 70%); transform: translateX(-125%); transition: transform .7s ease; pointer-events: none; }
.btn:hover::after, .btn-auth:hover::after { transform: translateX(125%); }
.btn-primary, .btn-auth { box-shadow: 0 12px 28px rgba(116,77,255,.3), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover, .btn-auth:hover { filter: saturate(1.14); box-shadow: 0 18px 38px rgba(116,77,255,.42), inset 0 1px 0 rgba(255,255,255,.28); }
.container { max-width: 920px; padding-top: 2.7rem; }
#page-buy .buy-intro { margin-bottom: 2rem; }
#page-buy .buy-eyebrow { color: #c9baff; text-shadow: 0 0 24px rgba(167,139,250,.4); }
#page-buy .buy-intro .page-h1 { font-size: clamp(2rem, 5vw, 3.3rem); text-shadow: 0 10px 38px rgba(0,0,0,.45); }
#page-buy .buy-subtitle { color: #a7aec0; }
.card { border-radius: 22px; border-color: rgba(207,198,255,.16); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.09); animation: cardArrive .7s cubic-bezier(.2,.8,.2,1) both; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.12); }
@keyframes cardArrive { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
#page-buy .purchase-card { position: relative; overflow: hidden; padding: clamp(1.1rem, 3vw, 2rem); border-radius: 26px; box-shadow: 0 24px 80px rgba(0,0,0,.42), 0 0 80px rgba(103,75,255,.08), inset 0 1px 0 rgba(255,255,255,.1); }
#page-buy .purchase-card::before { content: ''; position: absolute; width: 420px; height: 420px; top: -260px; right: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(168,105,255,.22), transparent 67%); filter: blur(8px); pointer-events: none; animation: voidDrift 9s ease-in-out infinite alternate; }
#page-buy .purchase-card::after { content: ''; position: absolute; width: 280px; height: 280px; bottom: -210px; left: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(48,161,255,.12), transparent 68%); pointer-events: none; animation: voidDrift 11s ease-in-out infinite alternate-reverse; }
@keyframes voidDrift { to { transform: translate3d(-24px, 18px, 0) scale(1.12); } }
#page-buy .delivery-box { position: relative; z-index: 1; }
#page-buy .delivery-tab { min-height: 62px; border-radius: 14px; background: rgba(255,255,255,.035); }
#page-buy .delivery-tab:hover { transform: translateY(-2px); background: rgba(255,255,255,.07); }
#page-buy .delivery-tab.active { box-shadow: 0 0 0 1px var(--accent), 0 12px 24px rgba(113,75,255,.16), inset 0 1px 0 rgba(255,255,255,.1); }
#page-buy .purchase-card .input-group { border-radius: 14px; background: rgba(3,5,10,.42); border-color: rgba(255,255,255,.12); }
#page-buy .purchase-card .input-group:focus-within { box-shadow: 0 0 0 4px var(--accent-glow), 0 12px 28px rgba(108,72,255,.14); }
#page-buy .purchase-card .chip { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
#page-buy .purchase-card .chip:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
#page-buy .purchase-card .btn-primary { min-height: 62px; border-radius: 15px; animation: buttonBreath 3.6s ease-in-out infinite; }
@keyframes buttonBreath { 0%,100% { box-shadow: 0 12px 28px rgba(116,77,255,.3), inset 0 1px 0 rgba(255,255,255,.22); } 50% { box-shadow: 0 16px 40px rgba(116,77,255,.48), 0 0 24px rgba(255,150,100,.12), inset 0 1px 0 rgba(255,255,255,.28); } }
#page-buy .advantages { gap: .7rem; margin-top: 1.2rem; }
#page-buy .adv-item { padding: 1rem; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: rgba(11,14,22,.48); transition: transform .35s ease, border-color .35s ease, background .35s ease; }
#page-buy .adv-item:hover { transform: translateY(-3px); border-color: rgba(167,139,250,.28); background: rgba(23,25,39,.7); }
.footer { max-width: 920px; }
@media (max-width: 768px) {
    .container { padding-top: 1.45rem; }
    #page-buy .buy-intro { margin-bottom: 1.25rem; }
    #page-buy .buy-intro .page-h1 { font-size: clamp(1.8rem, 8vw, 2.45rem); }
    #page-buy .purchase-card { border-radius: 20px; }
    #page-buy .advantages { gap: .45rem; }
    #page-buy .adv-item { padding: .8rem .55rem; }
}
@media (prefers-reduced-motion: reduce) {
    #page-buy .purchase-card::before, #page-buy .purchase-card::after, #page-buy .purchase-card .btn-primary { animation: none; }
}

/* -- Compact buy page -----------------------------------------------------
   Keep the first action visually flat: page -> purchase panel -> controls.
   Delivery no longer sits inside multiple decorative containers. */
#page-buy .buy-intro {
    margin: .25rem 0 1.25rem;
    text-align: center;
}
#page-buy .buy-eyebrow {
    margin-bottom: .45rem;
    color: var(--accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .17em;
}
#page-buy .buy-intro .page-h1 {
    margin: 0;
    font-size: clamp(1.65rem, 5vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}
#page-buy .buy-subtitle {
    max-width: 520px;
    margin: .55rem auto 0;
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.55;
}
#page-buy .purchase-card {
    padding: 1.35rem;
    border-radius: 16px;
}
#page-buy .purchase-card:hover {
    transform: none;
}
#page-buy .delivery-box {
    margin: 0 0 1.35rem;
    padding: 0 0 1.25rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
#page-buy .delivery-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .65rem;
}
#page-buy .delivery-box .delivery-caption {
    margin: 0;
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
#page-buy .delivery-note,
#page-buy .delivery-note.slow {
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: right;
}
#page-buy .delivery-box .delivery-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#page-buy .delivery-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 54px;
    padding: .7rem .85rem;
    color: var(--text);
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: left;
}
#page-buy .delivery-tab[data-delivery="gift-card"] { grid-column: 1 / -1; }
#page-buy .delivery-tab[data-delivery="instant"] { grid-column: 1 / -1; order: -1; border-color: rgba(34,197,94,.35); background: linear-gradient(135deg,rgba(34,197,94,.09),rgba(124,58,237,.08)); }
#page-buy .delivery-tab[data-delivery="instant"] .delivery-tab-meta { color: #16a34a; font-weight: 900; letter-spacing: .08em; }
#page-buy .delivery-tab[data-delivery="instant"]:hover { background: var(--accent-gradient,linear-gradient(135deg,#6d28d9,#8b5cf6)); border-color: #8b5cf6; }
#page-buy .delivery-tab[data-delivery="instant"].active { background: linear-gradient(135deg,#6d28d9,#8b5cf6); border-color:#a78bfa; }
#page-buy .delivery-tab[data-delivery="instant"].active .delivery-tab-meta { color: #bbf7d0; }
.instant-consent { display:flex; gap:.7rem; align-items:flex-start; margin-top:1rem; padding:.9rem; border:1px solid rgba(34,197,94,.28); border-radius:14px; background:rgba(34,197,94,.07); font-size:.82rem; line-height:1.4; cursor:pointer; }
.instant-consent input { width:18px; height:18px; margin-top:1px; accent-color:#16a34a; flex:0 0 auto; }
#page-buy .delivery-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,.05);
    border-color: var(--border-strong);
}
#page-buy .delivery-tab.active {
    color: var(--text);
    background: rgba(139,92,246,.12);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
#page-buy .delivery-tab-title {
    font-size: .94rem;
    font-weight: 750;
}
#page-buy .delivery-tab-meta {
    padding: .2rem .45rem;
    color: var(--muted);
    background: rgba(255,255,255,.05);
    border-radius: 5px;
    font-size: .67rem;
    font-weight: 650;
}

/* Fixed-price product cards: calm, premium and clearly selectable. */
.gift-cards-panel { margin:1.25rem 0 1.35rem; }
.gift-cards-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.gift-cards-heading .label { margin:0 0 .28rem; font-size:.76rem; letter-spacing:.085em; }
.gift-cards-heading p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.45; }
.gift-cards-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.gift-card-option { position:relative; isolation:isolate; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:.9rem; width:100%; min-width:0; min-height:118px; padding:1.05rem; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); color:var(--text); text-align:left; cursor:pointer; font-family:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.12); transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.gift-card-option::before { content:""; position:absolute; z-index:-1; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,transparent,#8b5cf6,transparent); opacity:0; transition:opacity .18s ease; }
.gift-card-option::after { content:""; position:absolute; z-index:-2; width:150px; height:150px; left:-80px; bottom:-105px; border-radius:50%; background:rgba(124,58,237,.11); filter:blur(8px); }
.gift-card-option:hover { transform:translateY(-2px); border-color:rgba(167,139,250,.42); background:linear-gradient(145deg,rgba(139,92,246,.11),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 32px rgba(0,0,0,.2); }
.gift-card-option:hover::before,.gift-card-option.selected::before { opacity:1; }
.gift-card-option.selected { border-color:rgba(167,139,250,.78); background:linear-gradient(145deg,rgba(124,58,237,.2),rgba(79,70,229,.08) 70%,rgba(255,255,255,.035)); box-shadow:inset 0 0 0 1px rgba(167,139,250,.22),0 14px 34px rgba(76,29,149,.18); }
.gift-card-option.unavailable { color:var(--muted); cursor:not-allowed; opacity:.64; filter:saturate(.45); }
.gift-card-option.unavailable:hover { transform:none; border-color:rgba(255,255,255,.09); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.12); }
.gift-card-icon { position:relative; display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(196,181,253,.36); border-radius:17px; background:linear-gradient(145deg,#8b5cf6,#5b3bd6 58%,#4338ca); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px rgba(76,29,149,.3); font-size:.88rem; font-weight:850; letter-spacing:-.02em; }
.gift-card-icon::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.13); border-radius:11px; }
.gift-card-icon::after { content:""; position:absolute; width:16px; height:5px; right:8px; bottom:8px; border:solid rgba(255,255,255,.48); border-width:0 0 2px 2px; border-radius:0 0 0 3px; }
.gift-card-icon i { display:none; }
.gift-card-main { min-width:0; display:flex; flex-direction:column; align-items:flex-start; row-gap:.18rem; }
.gift-card-option small { overflow:hidden; max-width:100%; color:#a9a4b5; font-size:.63rem; font-weight:750; letter-spacing:.075em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.gift-card-option strong { margin:.08rem 0 .22rem; color:#f8f7fb; font-size:1.22rem; font-weight:820; letter-spacing:-.035em; line-height:1.05; }
.gift-stock { display:inline-flex; align-items:center; min-height:21px; padding:.18rem .48rem; border-radius:999px; font-style:normal; font-size:.64rem; font-weight:720; line-height:1; }
.gift-stock.in-stock { color:#86efac; background:rgba(34,197,94,.1); border:1px solid rgba(74,222,128,.14); }
.gift-stock.out-of-stock { color:#fca5a5; background:rgba(239,68,68,.09); border:1px solid rgba(248,113,113,.14); }
.gift-card-side { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.gift-card-price { color:#fff; font-size:1.1rem; font-weight:830; letter-spacing:-.025em; white-space:nowrap; }
.gift-card-action { display:inline-flex; align-items:center; justify-content:center; min-height:27px; padding:.28rem .62rem; border:1px solid rgba(167,139,250,.25); border-radius:999px; background:rgba(139,92,246,.08); color:#c4b5fd; font-size:.65rem; font-weight:750; line-height:1; white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.gift-card-option:hover .gift-card-action { border-color:rgba(167,139,250,.5); background:rgba(139,92,246,.16); color:#ddd6fe; }
.gift-card-option.selected .gift-card-action { border-color:rgba(74,222,128,.22); background:rgba(34,197,94,.1); color:#86efac; }
.gift-card-option.unavailable .gift-card-icon { border-color:var(--border); background:rgba(255,255,255,.04); color:var(--muted); box-shadow:none; }
.gift-card-option.unavailable .gift-card-price,.gift-card-option.unavailable .gift-card-action { color:var(--muted); }
.gift-card-code { display:flex; flex-direction:column; gap:.35rem; margin-top:.7rem; }
.gift-card-code span { color:var(--muted); font-size:.74rem; font-weight:650; }
.gift-card-code code { width:max-content; max-width:100%; padding:.5rem .65rem; overflow-wrap:anywhere; border:1px dashed rgba(167,139,250,.55); border-radius:7px; background:rgba(139,92,246,.12); color:#e9d5ff; font-size:.9rem; font-weight:750; letter-spacing:.04em; }
.gift-card-guide { color:var(--muted); font-size:.72rem; line-height:1.45; }
.gift-card-guide a { color:var(--accent-hover); }
@media (max-width:720px) { .gift-cards-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .gift-cards-heading { align-items:flex-start; } .gift-card-option { grid-template-columns:50px minmax(0,1fr) auto; gap:.7rem; min-height:100px; padding:.82rem; border-radius:15px; } .gift-card-icon { width:50px; height:50px; border-radius:14px; font-size:.76rem; } .gift-card-option strong { font-size:1.08rem; } .gift-card-price { font-size:1rem; } .gift-card-action { min-height:24px; padding:.24rem .5rem; font-size:.6rem; } }
#page-buy .delivery-tab.active .delivery-tab-meta {
    color: var(--accent-hover);
    background: rgba(139,92,246,.16);
}
#page-buy .purchase-card .input-group {
    background: rgba(0,0,0,.12);
    border-width: 1px;
    box-shadow: none;
}
#page-buy .purchase-card .chip {
    background: transparent;
    border-width: 1px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#page-buy .purchase-card .btn-primary {
    min-height: 54px;
    border-radius: 10px;
}
#page-buy .advantages {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: .85rem auto 0;
    padding: 0 .35rem;
}
#page-buy .adv-item {
    display: grid;
    grid-template-columns: 24px auto;
    grid-template-rows: auto auto;
    column-gap: .5rem;
    flex: 1;
    padding: .6rem .85rem;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#page-buy .adv-item:last-child { border-right: 0; }
#page-buy .adv-item:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}
#page-buy .adv-icon {
    grid-row: 1 / 3;
    width: 24px;
    height: 24px;
    margin: 1px 0 0;
    color: var(--accent-hover);
    background: transparent;
    border: 1px solid rgba(167,139,250,.35);
    border-radius: 50%;
    box-shadow: none;
    font-size: .72rem;
    font-weight: 800;
}
#page-buy .adv-title {
    margin: 0;
    font-size: .78rem;
}
#page-buy .adv-desc {
    margin-top: .15rem;
    font-size: .67rem;
    line-height: 1.35;
}

@media (max-width: 768px) {
    #page-buy .buy-intro { margin-top: 0; }
    #page-buy .buy-subtitle { font-size: .84rem; }
    #page-buy .purchase-card { padding: 1rem; }
    #page-buy .delivery-heading {
        display: block;
        margin-bottom: .65rem;
    }
    #page-buy .delivery-note,
    #page-buy .delivery-note.slow {
        margin-top: .25rem;
        text-align: left;
    }
    #page-buy .delivery-tab {
        min-height: 50px;
        padding: .6rem .7rem;
    }
    #page-buy .delivery-tab-meta { display: none; }
    #page-buy .advantages {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }
    #page-buy .adv-item {
        display: block;
        padding: .45rem .35rem;
        text-align: center;
    }
    #page-buy .adv-icon { margin: 0 auto .35rem; }
    #page-buy .adv-title { font-size: .7rem; }
    #page-buy .adv-desc { display: none; }
}

@media (max-width: 768px) {
    .nav-float,
    .card,
    .adv-item,
    .delivery-tabs,
    .input-group,
    .place-item,
    .summary,
    .pay-method,
    .task-item,
    .modal,
    .support-panel {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
    }
}

@media (max-width: 768px) {
    .nav-float,
    .card,
    .adv-item,
    .delivery-tabs,
    .input-group,
    .place-item,
    .summary,
    .pay-method,
    .task-item,
    .modal,
    .support-panel {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
    }
}

/* -- Jupiter-inspired flat dark theme -- */
.header {
    background: var(--bg);
    border-bottom: 1px solid rgba(255,255,255,.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.header-top {
    position: relative;
    min-height: 42px;
}
.header-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 0 auto;
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .01em;
    white-space: nowrap;
}
.header-trust span + span::before {
    content: '·';
    color: rgba(167,139,250,.65);
    margin-right: .45rem;
}
.nav-float {
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.nav-item {
    border-radius: 7px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.nav-item:hover {
    background: #20232a;
    color: var(--text);
}
.nav-item.active {
    background: var(--gradient);
    color: #fff;
    box-shadow: none;
}
.nav-item.nav-raffle {
    color: var(--accent);
    background: transparent;
    border: 1px solid rgba(167,139,250,.42);
    box-shadow: none;
    animation: none;
}
.nav-item.nav-raffle:hover,
.nav-item.nav-raffle.active {
    color: #fff;
    background: var(--gradient);
    border-color: var(--accent);
    box-shadow: none;
}
.btn-auth,
.btn-primary,
.btn-accent {
    background: var(--gradient);
    color: #fff;
    box-shadow: none;
}
.btn-auth:hover,
.btn-primary:hover,
.btn-accent:hover {
    background: var(--accent-hover);
    box-shadow: none;
    transform: translateY(-1px);
}
.btn::before { display: none; }
.card,
.adv-item,
.delivery-tabs,
.input-group,
.place-item,
.summary,
.pay-method,
.task-item,
.modal,
.support-panel,
.user-name-btn,
.btn-logout,
.chip,
.btn-outline,
.btn-icon {
    background: var(--glass);
    border-color: var(--glass-border);
    box-shadow: 0 6px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.card {
    border-radius: 12px;
    border-top-color: rgba(220,210,255,.22);
    animation: none;
}
.card:hover,
.adv-item:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    box-shadow: 0 5px 14px rgba(0,0,0,.2);
}
.delivery-tabs {
    border-radius: 9px;
}
.delivery-tab:hover {
    background: #20232a;
}
.delivery-tab.active {
    background: var(--gradient);
    color: #fff;
    box-shadow: none;
}
.input-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(139,92,246,.18);
}
.chip:hover,
.chip-accent {
    background: rgba(139,92,246,.14);
    border-color: var(--accent);
}
.btn-outline:hover,
.btn-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: none;
}
.summary-total {
    border-top-style: dashed;
}
.seo-block {
    border-top: 1px dashed var(--border);
    padding-top: 1.25rem;
}
.seo-facts li::before,
.seo-block a,
.seo-links a,
.legal a,
.faq a {
    color: var(--accent);
}
.seo-block a:hover,
.seo-links a:hover,
.legal a:hover,
.faq a:hover {
    color: var(--accent-hover);
}
.reward {
    background: rgba(139,92,246,.14);
    color: var(--accent);
}
.raffle-hero {
    background: var(--surface-2);
    border-color: rgba(167,139,250,.28);
    color: var(--text);
}
.raffle-hero .raffle-prize,
.raffle-me-stats strong,
.raffle-me-rank strong {
    color: var(--accent);
}
.place-item:hover,
.pay-method:hover,
.task-item:hover {
    border-color: var(--border-strong);
    box-shadow: none;
}
.pay-method.active {
    border-color: var(--accent);
    background: rgba(139,92,246,.12);
    color: var(--accent);
    box-shadow: none;
}
.slider {
    background: linear-gradient(90deg, rgba(139,92,246,.22), var(--accent));
}
.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: none;
}
.support-btn {
    background: var(--gradient);
    color: #fff;
    box-shadow: none;
}
.support-btn:hover {
    box-shadow: none;
}
.modal-overlay {
    background: rgba(0,0,0,.72);
    backdrop-filter: none;
}
.modal-tabs {
    background: var(--bg);
}
.modal-tab.active {
    background: var(--surface-2);
    box-shadow: none;
}
.support-header {
    border-bottom-style: dashed;
}
.footer {
    border-top-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
    .btn-auth:hover,
    .btn-primary:hover,
    .btn-accent:hover,
    .card:hover,
    .adv-item:hover {
        transform: none;
    }
}

@media (max-width: 768px) {
    .header-trust {
        display: none;
    }
    .nav-float,
    .card,
    .adv-item,
    .delivery-tabs,
    .input-group,
    .place-item,
    .summary,
    .pay-method,
    .task-item,
    .modal,
    .support-panel {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
    }
}

/* -- Mobile navigation: bottom tab bar instead of a cramped top row -- */
.nav-short { display: none; }

@media (max-width: 768px) {
    .nav-float {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: .25rem .3rem calc(.25rem + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .07);
        border-radius: 0;
        background: rgba(9, 13, 26, .97);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .45);
        overflow: visible;
    }
    .nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: .1rem;
        width: 100%;
        overflow: visible;
    }
    .nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        min-height: 52px;
        padding: .3rem .1rem;
        border-radius: 12px;
        font-size: .62rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav .nav-item::before {
        content: attr(data-icon);
        font-size: 1.15rem;
        line-height: 1;
    }
    .nav .nav-full { display: none; }
    .nav .nav-short { display: block; }
    .nav .nav-item.nav-raffle { border-color: transparent; }
    .nav .nav-item.nav-raffle:not(.active) { color: var(--accent); }

    /* Keep the fixed bar from covering the end of the page and the chat button. */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    .support-widget { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); right: .75rem; }
    .support-panel { bottom: 62px; }

    /* Comfortable tap targets. */
    .chip { min-height: 36px; padding: .45rem .8rem; font-size: .78rem; display: inline-flex; align-items: center; }
    .btn-auth { min-height: 36px; }
    .slider-wrap { padding: .4rem .25rem; }
    .footer .nav-item { padding: .5rem .35rem; }
}

@media (max-width: 400px) {
    .nav .nav-item { font-size: .58rem; padding: .3rem .05rem; }
    .nav .nav-item::before { font-size: 1.05rem; }
}

/* ===== Final interaction and mobile layout pass ===== */
@keyframes controlPress {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    32% { transform: translateY(1px) scale(.965); filter: brightness(1.16); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes buyButtonPress {
    0% { transform: translateY(0) scale(1); box-shadow: 0 18px 36px rgba(112, 76, 255, .28); }
    30% { transform: translateY(2px) scale(.96); box-shadow: 0 8px 18px rgba(112, 76, 255, .2); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 18px 36px rgba(112, 76, 255, .28); }
}

.is-pressing { animation: controlPress .36s cubic-bezier(.2,.8,.2,1); }
#page-buy .purchase-card .btn-primary.is-pressing { animation: buyButtonPress .42s cubic-bezier(.2,.8,.2,1); }

/* Keep the buy form readable when the viewport becomes narrow. */
#page-buy .buy-intro .page-h1 { font-size: 3rem; }
#page-buy .amountFields .row { align-items: stretch; }
#page-buy .purchase-card .input { min-width: 0; }
#page-buy .tg-stars-form { min-width: 0; }

@media (max-width: 768px) {
    body { overflow-x: hidden; }
    .container { width: 100%; max-width: none; padding-inline: 1rem; padding-bottom: 7rem; }
    #page-buy { padding-bottom: 5.5rem; }
    #page-buy .buy-intro { margin-top: .25rem; margin-bottom: 1.15rem; }
    #page-buy .buy-intro .page-h1 { font-size: 2rem; line-height: 1.12; }
    #page-buy .buy-subtitle { max-width: 34rem; line-height: 1.45; }
    #page-buy .purchase-card { width: 100%; padding: 1rem; border-radius: 18px; }
    #page-buy .amountFields .row,
    #page-buy .tg-stars-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    #page-buy .amountFields .col { min-width: 0; }
    #page-buy .delivery-heading { align-items: flex-start; gap: .35rem; }
    #page-buy .delivery-note,
    #page-buy .delivery-note.slow { max-width: 100%; text-align: left; }
    #page-buy .delivery-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; }
    #page-buy .delivery-tab { min-width: 0; min-height: 54px; padding: .7rem .55rem; }
    #page-buy .delivery-tab-title { min-width: 0; overflow-wrap: anywhere; }
    #page-buy .delivery-tab-meta { display: block; font-size: .62rem; }
    #page-buy .delivery-tab[data-delivery="instant"],
    #page-buy .delivery-tab[data-delivery="gift-card"] { grid-column: 1 / -1; }
    #page-buy .purchase-card .btn-primary { min-height: 56px; width: 100%; }
    #page-buy .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
    #page-buy .chip { flex: 1 1 30%; min-width: 0; justify-content: center; }
    #page-buy .advantages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-buy .adv-item { min-width: 0; }
    .support-widget { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 520px) {
    .container { padding-inline: .75rem; }
    #page-buy { padding-bottom: 6.5rem; }
    #page-buy .buy-intro .page-h1 { font-size: 1.75rem; }
    #page-buy .buy-eyebrow { font-size: .68rem; }
    #page-buy .delivery-tabs { grid-template-columns: minmax(0, 1fr); }
    #page-buy .delivery-tab,
    #page-buy .delivery-tab[data-delivery="instant"],
    #page-buy .delivery-tab[data-delivery="gift-card"] { grid-column: 1; }
    #page-buy .delivery-tab-meta { display: none; }
    #page-buy .advantages { gap: .35rem; }
    #page-buy .adv-item { padding: .7rem .35rem; }
    #page-buy .adv-title { font-size: .68rem; }
    #page-buy .chip { flex-basis: 45%; }
    .footer-links { gap: .55rem .8rem; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .is-pressing,
    #page-buy .purchase-card .btn-primary.is-pressing { animation: none; }
}

/* The first paint stays usable while live rates and catalog data arrive. */
.data-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #aaa3ff;
    font-size: .78rem;
    white-space: nowrap;
    transition: opacity .25s ease, transform .25s ease;
}
.data-loading-indicator::before {
    content: '';
    width: .55rem;
    height: .55rem;
    border: 2px solid rgba(170,163,255,.3);
    border-top-color: #b78cff;
    border-radius: 50%;
    animation: dataSpinner .8s linear infinite;
}
.data-loading-indicator.is-done {
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
}
@keyframes dataSpinner { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
    .data-loading-indicator { display: flex; margin-top: .45rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .data-loading-indicator::before { animation: none; }
}

/* Narrow phones: one unambiguous track for delivery choices and quick sums. */
@media (max-width: 520px) {
    #page-buy .delivery-box #deliveryTabs.delivery-tabs {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
    }
    #page-buy .delivery-box #deliveryTabs .delivery-tab {
        grid-column: 1 / -1 !important;
        width: 100%;
        flex: none;
    }
    #page-buy .chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
    }
    #page-buy .chips .chip {
        width: 100%;
        min-width: 0;
        flex: none;
        padding-inline: .35rem;
    }
}

@media (max-width: 768px) {
    /* Card headers with a right-side action: stack them so headings don't wrap
       into the button. */
    .raffle-heading,
    .page .card > .row[style*="space-between"] {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }
    .raffle-heading .btn,
    .page .card > .row[style*="space-between"] .btn {
        align-self: flex-start;
    }
}

/* -- Compact header + lighter mobile page -- */
.bonus-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .22rem .5rem;
    border: 1px solid rgba(167, 139, 250, .35);
    border-radius: 999px;
    color: var(--accent);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.seo-toggle { display: none; }

@media (max-width: 768px) {
    /* Breathing room at the screen edges. */
    .header { padding: .65rem 1.05rem; }
    .container { padding: 1rem 1.05rem; }
    .footer { padding: 1rem 1.05rem; }

    /* Logo left, account block right — the bonus balance can no longer
       collide with the logo. */
    .header-top {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        align-items: center;
        gap: .5rem;
    }
    #authArea { justify-self: end; min-width: 0; max-width: 100%; }
    .logo-img { height: 40px; }
    .logo-text { font-size: .95rem; }
    .user-menu { flex-wrap: nowrap; gap: .3rem; max-width: 100%; }
    .bonus-pill { flex-shrink: 1; min-width: 0; overflow: hidden; font-size: .7rem; padding: .2rem .4rem; }
    .user-name-btn { max-width: 26vw; }

    /* Less to read on the first screens: long copy hides behind a toggle. */
    .seo-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin-top: 1.1rem;
        padding: .55rem 1rem;
        border: 1px solid var(--glass-border);
        border-radius: 10px;
        background: var(--glass);
        color: var(--accent);
        font-family: inherit;
        font-size: .85rem;
        font-weight: 600;
        cursor: pointer;
    }
    .seo-more { display: none; }
    .seo-more.open { display: block; }
    .seo-block .seo-title { font-size: 1.25rem; }
    .seo-block h3 { margin: 1.35rem 0 .45rem; font-size: 1rem; }
    .seo-block p { font-size: .88rem; line-height: 1.6; }
    .seo-faq-title { margin-top: 1.5rem; font-size: 1.15rem; }
    .page-h1 { font-size: 1.5rem; line-height: 1.2; }
    .advantages { margin-top: 1rem; }
    .adv-item { padding: .85rem .6rem; }
    .adv-desc { font-size: .66rem; }
}

@media (max-width: 768px) {
    /* Logged-in header: the logo mark alone leaves room for balance + name. */
    .header-top:has(.user-menu) .logo-text { display: none; }
    .logo-img { height: 36px; }
    .user-menu { gap: .35rem; }
    .bonus-pill { flex-shrink: 0; overflow: visible; font-size: .72rem; }
    .user-name-btn { max-width: 26vw; min-height: 32px; flex-shrink: 1; display: inline-flex; align-items: center; gap: .3rem; }
    .user-name-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn-logout { min-height: 32px; flex-shrink: 0; }
}

/* ===== Reviews (отзывы покупателей) ===== */
.recent-purchases-section { margin-top: 1.25rem; overflow: hidden; }
.recent-purchases-head { margin-bottom:1rem; }
.recent-purchases-head h2 { margin:0; font-size:1.35rem; letter-spacing:-.02em; }
.recent-purchases-track { display:flex; gap:.8rem; overflow-x:auto; padding:.15rem .1rem .65rem; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.recent-purchases-track::-webkit-scrollbar { height:5px; }
.recent-purchases-track::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
.recent-purchase { position:relative; flex:0 0 174px; min-width:0; display:flex; align-items:center; gap:.7rem; overflow:hidden; padding:.7rem .75rem; border:1px solid rgba(196,181,253,.2); border-radius:16px; background:linear-gradient(135deg,rgba(167,139,250,.11),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); scroll-snap-align:start; transition:transform .2s ease,border-color .2s ease; }
.recent-purchase:hover { transform:translateY(-2px); border-color:rgba(196,181,253,.42); }
.recent-purchase-avatar { position:relative; z-index:1; width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,var(--accent-light),rgba(56,189,248,.12)); border:1px solid rgba(196,181,253,.35); box-shadow:0 7px 18px rgba(0,0,0,.18); }
.recent-purchase-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.recent-purchase-avatar span { display:none; color:var(--accent-hover); font-size:.85rem; font-weight:800; }
.recent-purchase-avatar.avatar-error span { display:block; }
.recent-purchase-copy { position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.recent-purchase-copy > span { overflow:hidden; color:var(--muted); font-size:.72rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.recent-purchase strong { color:var(--text); font-size:.94rem; letter-spacing:-.01em; white-space:nowrap; }
.recent-purchase-mark { position:absolute; right:-.25rem; bottom:-.55rem; color:rgba(196,181,253,.07); font-size:2.35rem; font-weight:900; transform:rotate(-9deg); }
.recent-purchase-skeleton { flex:0 0 174px; height:76px; border-radius:16px; background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.09),rgba(255,255,255,.035)); background-size:220% 100%; animation:recentSkeleton 1.35s ease-in-out infinite; }
.recent-purchases-empty { width:100%; margin:.7rem 0; color:var(--muted); font-size:.88rem; text-align:center; }
@keyframes recentSkeleton { to { background-position:-220% 0; } }
@media (max-width:560px) {
    .recent-purchase { flex-basis:164px; }
}
@media (prefers-reduced-motion:reduce) {
    .recent-purchase-skeleton { animation:none; }
}

.reviews-section { margin-top: 1.25rem; }
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.reviews-title-wrap { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.reviews-title-wrap h2 { margin: 0; }
.reviews-count { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--accent-light); border: 1px solid var(--border); font-size: .85rem; color: var(--text); white-space: nowrap; }
.reviews-count b { color: var(--accent-hover); }
.reviews-count-star { color: var(--orange); font-size: .95rem; }
.reviews-count-sep { color: var(--muted); }
.review-form { display: flex; flex-direction: column; gap: .65rem; padding: 1rem; margin-bottom: 1rem; border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--bg-2); }
.review-form-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.review-form-row .input { flex: 1 1 200px; }
.review-rating-input { display: inline-flex; gap: .15rem; }
.review-rating-input .review-star { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--border-strong); cursor: pointer; padding: .1rem .15rem; transition: color .12s, transform .12s; }
.review-rating-input .review-star:hover { transform: scale(1.15); }
.review-rating-input .review-star.active { color: var(--orange); }
.review-form textarea.input { resize: vertical; min-height: 74px; }
.review-form-actions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.review-form-actions .field-help { margin: 0; }
.reviews-carousel { display: flex; align-items: center; gap: .5rem; }
.reviews-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .1rem .9rem; flex: 1; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.reviews-track::-webkit-scrollbar { height: 6px; }
.reviews-track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.review-card { flex: 0 0 min(320px, 86%); scroll-snap-align: start; display: flex; flex-direction: column; gap: .55rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem; }
.review-stars { color: var(--orange); font-size: .95rem; letter-spacing: .12em; }
.review-stars .review-star-off { color: var(--border-strong); }
.review-text { font-size: .9rem; line-height: 1.5; color: var(--text); margin: 0; flex: 1; overflow-wrap: anywhere; }
.review-meta { display: flex; align-items: center; gap: .6rem; }
.review-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent-hover); font-weight: 700; font-size: .95rem; text-transform: uppercase; }
.review-name { font-weight: 600; font-size: .87rem; overflow-wrap: anywhere; }
.review-date { display: block; color: var(--muted); font-size: .75rem; }
.reviews-empty { color: var(--muted); font-size: .9rem; padding: .75rem .25rem; }
.reviews-arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.reviews-arrow:hover { background: var(--accent-light); border-color: var(--accent); }
@media (max-width: 640px) {
    .reviews-arrow { display: none; }
    .review-card { flex-basis: 88%; }
}

/* ===== Header 2026: taller, calmer, more premium ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: .9rem 1.5rem 1rem;
    background: linear-gradient(180deg, rgba(14,15,19,.98) 0%, rgba(14,15,19,.92) 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(167,139,250,.55) 30%, rgba(236,72,153,.45) 70%, transparent 100%);
    opacity: .7;
    pointer-events: none;
}
.header-top, .nav-float { max-width: 1060px; }
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    margin-bottom: .85rem;
}
.logo { gap: .7rem; }
.logo-img { height: 62px; filter: drop-shadow(0 6px 18px rgba(124,58,237,.35)); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.logo:hover .logo-img { transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 10px 24px rgba(124,58,237,.5)); }
.logo-text { font-size: 1.3rem; letter-spacing: .05em; }

.header-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 auto;
    font-size: .76rem;
    font-weight: 600;
    color: #c2c7d3;
    white-space: nowrap;
}
.header-trust span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.header-trust span:hover { border-color: rgba(167,139,250,.4); background: rgba(139,92,246,.1); transform: translateY(-1px); }
.header-trust span + span::before { content: none; margin: 0; }
.trust-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 6px;
    background: var(--accent-light);
    color: var(--accent);
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.header-actions { gap: .6rem; }
.lang-btn { padding: .6rem .9rem; font-size: .84rem; border-radius: 999px; }
.btn-auth { padding: .7rem 1.6rem; font-size: .92rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-auth:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.28); }

.nav-float {
    margin: 0 auto;
    padding: 6px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), rgba(18,19,26,.85);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 12px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.nav { display: flex; gap: .3rem; justify-content: center; }
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .72rem 1.35rem;
    border-radius: 11px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--muted);
    transition: color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.nav-item::before { content: attr(data-icon); font-size: 1rem; line-height: 1; opacity: .85; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.nav-item:hover::before { transform: translateY(-1px) scale(1.08); }
.nav-item.active { color: #fff; background: var(--gradient); box-shadow: 0 8px 22px rgba(124,58,237,.38), inset 0 1px 0 rgba(255,255,255,.22); }
.nav-item.active::before { opacity: 1; }
.nav-item.nav-raffle { color: #fcd34d; border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.nav-item.nav-raffle:hover { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.6); }
.nav-item.nav-raffle.active { color: #fff; background: linear-gradient(135deg, #f59e0b, #ec4899); border-color: transparent; box-shadow: 0 8px 22px rgba(236,72,153,.4), inset 0 1px 0 rgba(255,255,255,.22); }

@media (max-width: 1100px) {
    .header-trust { display: none; }
}
@media (max-width: 768px) {
    /* backdrop-filter would become the containing block for the fixed bottom tab bar. */
    .header { padding: .7rem 1.05rem .75rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14,15,19,.98); }
    .header::after { display: none; }
    .header-top { min-height: 48px; margin-bottom: 0; }
    .logo-img { height: 42px; }
    .logo-text { font-size: 1rem; }
    .btn-auth { padding: .55rem 1.1rem; font-size: .84rem; }
    .lang-btn { padding: .5rem .7rem; }
    /* Bottom tab bar keeps its own layout; undo the desktop pill sizing. */
    .nav .nav-item { padding: .3rem .1rem; border-radius: 12px; font-size: .62rem; gap: .15rem; transform: none; }
    .nav .nav-item::before { font-size: 1.15rem; opacity: 1; }
    .nav .nav-item.active { box-shadow: none; }
    .nav .nav-item.nav-raffle { border-color: transparent; background: transparent; }
}

/* ===== Motion polish: pages, steps and cards ===== */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page:not(.hidden) { animation: pageIn .45s cubic-bezier(.2,.8,.2,1) both; }
.step:not(.hidden) { animation: stepIn .45s cubic-bezier(.2,.8,.2,1) both; }
/* `both` fill kept the entry keyframe's transform pinned, so :hover lifts never applied. */
.card { animation: cardArrive .6s cubic-bezier(.2,.8,.2,1) backwards; }
.card:hover { transform: translateY(-3px); }
.card:has(input:focus), .card:has(textarea:focus) { transform: none; }
.step .card, .card.step { animation: none; }
#page-buy .delivery-tab, .chip, .btn, .btn-outline, .pay-method, .place-item, .input-group, .faq details, .reviews-arrow, .lang-option, .user-name-btn, .btn-logout {
    transition-timing-function: cubic-bezier(.2,.8,.2,1);
}
#page-buy .delivery-tab { transition-duration: .3s; }
.btn:active, .chip:active, .nav-item:active, .delivery-tab:active { transform: translateY(0) scale(.98); }
#promoResult p, #coPromoResult p { animation: fadeUp .35s cubic-bezier(.2,.8,.2,1) both; }
.toast { animation-timing-function: cubic-bezier(.2,.8,.2,1); }
.faq details p { animation: fadeUp .3s ease both; }
.user-menu { animation: fadeUp .35s cubic-bezier(.2,.8,.2,1) both; }
.lang-menu:not(.hidden) { animation: fadeUp .22s cubic-bezier(.2,.8,.2,1) both; transform-origin: top right; }
.spinner { animation-timing-function: linear; }

/* Promo surfaces */
.promo-active {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(167,139,250,.35);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(236,72,153,.06));
    animation: fadeUp .4s cubic-bezier(.2,.8,.2,1) both;
}
.promo-active.hidden { display: none; }
.promo-active-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; background: var(--gradient); color: #fff; font-weight: 700; letter-spacing: .04em; font-size: .9rem; box-shadow: 0 8px 20px rgba(124,58,237,.35); }
.promo-active-text { flex: 1 1 200px; color: var(--text); font-size: .92rem; }
.promo-active-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.promo-badge {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .9rem 0 .1rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(167,139,250,.35);
    border-radius: 12px;
    background: rgba(139,92,246,.1);
    color: var(--text);
    font-size: .86rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    animation: fadeUp .4s cubic-bezier(.2,.8,.2,1) both;
}
.promo-badge.hidden { display: none; }
.promo-badge-icon { font-size: 1rem; }
.promo-badge-text { flex: 1; min-width: 0; }
.promo-badge-remove { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.promo-badge-remove:hover { color: #fff; border-color: var(--accent); background: rgba(139,92,246,.2); }

@media (prefers-reduced-motion: reduce) {
    .page:not(.hidden), .step:not(.hidden), .promo-active, .promo-badge, .user-menu, .lang-menu:not(.hidden), #promoResult p, #coPromoResult p, .faq details p { animation: none; }
    .nav-item:hover, .logo:hover .logo-img, .header-trust span:hover { transform: none; }
}

/* Keep the sticky header geometry stable while scrolling. Changing its height
   at a scroll threshold makes browsers re-anchor the sticky element, which
   looks like a shake when scrolling back up (especially on mobile). */
.header { transition: box-shadow .2s ease; }

/* Nav icons as SVG masks (no dependency on an emoji font). */
.nav-item::before {
    content: '';
    width: 1.05em; height: 1.05em;
    background: currentColor;
    -webkit-mask: var(--nav-ico) center / contain no-repeat;
    mask: var(--nav-ico) center / contain no-repeat;
}
.nav-item[data-page="buy"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.5'/%3E%3Ccircle cx='19' cy='21' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h8.7a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E"); }
.nav-item[data-page="orders"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.nav-item[data-page="raffle"], .nav-item[data-page="free"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='5' rx='1'/%3E%3Cpath d='M5 13v8h14v-8M12 8v13'/%3E%3Cpath d='M12 8c-1.5-3-5-3.5-5-1s3 1.5 5 1c2 .5 5 1.5 5-1s-3.5-2-5 1z'/%3E%3C/svg%3E"); }
.nav-item[data-page="promo"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
.nav-item[data-page="free"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 2.9 6.3 6.8.8-5 4.7 1.3 6.8L12 17.3 6 20.6l1.3-6.8-5-4.7 6.8-.8z'/%3E%3C/svg%3E"); }
.header-trust .trust-dot { font-family: system-ui, sans-serif; }
.trust-dot svg { width: 12px; height: 12px; }

/* ===== Loading skeletons: user lookup & places ===== */
@keyframes skelShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes lookupIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes checkPop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
.skel { position: relative; overflow: hidden; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: skelShimmer 1.4s ease-in-out infinite; }
.user-skeleton { pointer-events: none; }
.user-skeleton .user-avatar { display: block; }
.skel-line { display: inline-block; height: 14px; width: 140px; border-radius: 999px; }
.user-found:not(.user-skeleton), .lookup-msg { animation: lookupIn .4s cubic-bezier(.2,.8,.2,1) both; }
.user-found img.user-avatar:not(.is-loaded) { opacity: 0; }
.user-found .user-avatar { transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.user-found .user-avatar.is-loaded { opacity: 1; }
.user-found:not(.user-skeleton) .user-check { animation: checkPop .45s cubic-bezier(.2,.8,.2,1) .15s both; }
.places-skeleton .place-item { pointer-events: none; border-color: transparent; }
.place-skel .place-img { aspect-ratio: 1 / 1; min-height: 100px; border-radius: 0; }
.place-skel .place-label { padding: .6rem; }
.place-skel .skel-line { width: 70%; height: 12px; }
.places-grid:not(.places-skeleton) .place-item { animation: lookupIn .45s cubic-bezier(.2,.8,.2,1) both; }
.place-img { transition: opacity .35s ease; }
img.place-img:not(.is-loaded) { opacity: 0; }
.place-item.selected::after { animation: checkPop .4s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; background: rgba(255,255,255,.08); } .user-found, .lookup-msg, .places-grid .place-item, .place-item.selected::after, .user-check { animation: none !important; } .place-img, .user-avatar { opacity: 1 !important; } }

/* ===== Support widget polish ===== */
@keyframes supportMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.support-chat-head > button { white-space:nowrap; flex-shrink:0; }
.support-head-left { display:flex; align-items:center; gap:.55rem; min-width:0; }
.support-head-meta { display:flex; align-items:center; gap:.4rem; min-width:0; }
.support-head-meta small { color:var(--muted); font-size:.68rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-tg-note { font-size:.72rem; text-align:center; margin:-.1rem 0 0 !important; }
.support-hint { font-size:.66rem; color:var(--muted); margin:.35rem 0 0 !important; }
.support-file { display:flex; align-items:center; gap:.45rem; }
.support-clip { width:16px; height:16px; flex-shrink:0; }
.support-attach { min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; color:var(--muted); cursor:pointer; transition:color .2s ease, border-color .2s ease; }
.support-attach:hover { color:var(--accent); border-color:var(--accent); }
.support-attach.selected { color:var(--accent); border-color:var(--accent); }
.support-attach input { display:none; }
.support-send { width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; border:none; border-radius:50%; background:var(--gradient); color:#fff; cursor:pointer; box-shadow:0 4px 14px rgba(139,92,246,.4); transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease; }
.support-send:hover:not(:disabled) { transform:scale(1.08); box-shadow:0 6px 18px rgba(139,92,246,.5); }
.support-send:disabled { opacity:.5; cursor:default; }
.support-send svg { width:17px; height:17px; }
.support-day { display:flex; align-items:center; justify-content:center; margin:.3rem 0; }
.support-day span { padding:.15rem .6rem; border-radius:999px; background:rgba(148,163,184,.1); color:var(--muted); font-size:.62rem; }
.support-message { animation:supportMsgIn .25s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .support-message { animation:none; } }

/* ===== Bonus task: YouTube ===== */
.bonus-task-icon.is-red { color:#fca5a5; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.32); }
.bonus-task.is-claimed .bonus-reward { color:#a7f3d0; }
.user-found.user-skeleton { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); box-shadow: none; }

/* ===== Bonuses page ===== */
.header-social-link { color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 700; }
.header-social-link:hover { color: var(--text); }
.header-socials { margin: 0 0 0 auto; justify-content: flex-end; gap: .45rem; }
.header-social-link { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .55rem; border-radius: 10px; color: var(--muted); transition: color .2s ease, background .2s ease; }
.header-social-link:hover { background: rgba(255,255,255,.06); color: var(--text); }
.header-social-link svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 1100px) { .header-socials { display: flex; } }
@media (max-width: 620px) { .header-social-link span { display: none; } .header-social-link { padding: .42rem; } }
.bonus-page { display: flex; flex-direction: column; gap: 1rem; }
.bonus-hero { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.35rem; border-radius: 22px; border: 1px solid rgba(167,139,250,.28); background: linear-gradient(160deg, rgba(139,92,246,.22) 0%, rgba(20,20,28,.96) 45%, rgba(236,72,153,.10) 100%); box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.bonus-hero-glow { position: absolute; inset: auto -20% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,.35), transparent 65%); filter: blur(30px); pointer-events: none; }
.bonus-hero-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bonus-hero-top h2 { margin: .35rem 0 .2rem; font-size: 1.75rem; letter-spacing: -.02em; }
.bonus-hero-top .text-muted { margin: 0; }
.bonus-eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(167,139,250,.3); }
.bonus-eyebrow svg { width: 13px; height: 13px; }
.bonus-refresh { flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; transition: background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.bonus-refresh svg { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bonus-refresh:hover { background: rgba(255,255,255,.1); border-color: rgba(167,139,250,.5); }
.bonus-refresh:hover svg { transform: rotate(180deg); }
.bonus-refresh:active { transform: scale(.94); }
.bonus-hero .bonus-balance-card { position: relative; margin-top: 1.25rem; padding: 0; background: transparent; border: 0; box-shadow: none; }
.bonus-hero .bonus-buckets { margin: 0; gap: .75rem; }
.bonus-bucket { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem !important; border-radius: 16px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.bonus-bucket small { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bonus-bucket b { margin: 0 !important; font-size: 1.7rem !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--text); }
.bonus-bucket-total b { background: linear-gradient(90deg, #c4b5fd, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bonus-bucket-free { border-color: rgba(16,185,129,.3) !important; background: rgba(16,185,129,.07) !important; }
.bonus-bucket-free b { color: #6ee7b7; }
.bonus-withdraw-btn { position: relative; margin-top: 1rem; padding: .95rem 1.2rem; font-size: 1rem; }
.bonus-hero .bonus-withdraw-help { position: relative; margin-top: .9rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.bonus-hero .bonus-withdraw-help strong { font-size: .84rem; }
.bonus-hero .bonus-withdraw-help .field-help { margin: .3rem 0 0; }
.bonus-section-title { margin: .5rem 0 -.25rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.bonus-tasks { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.bonus-task { padding: 1.2rem 1.25rem; border-radius: 18px; background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }
.bonus-task:nth-child(2) { animation-delay: .06s; } .bonus-task:nth-child(3) { animation-delay: .12s; }
.bonus-task:hover { border-color: rgba(167,139,250,.4); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.bonus-task-head { display: flex; align-items: flex-start; gap: .9rem; }
.bonus-task-title { flex: 1; min-width: 0; }
.bonus-task-title h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.bonus-task-title .text-muted { margin: 0; font-size: .86rem; line-height: 1.45; }
.bonus-task-icon { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; }
.bonus-task-icon svg { width: 22px; height: 22px; }
.bonus-task-icon.is-gold { color: #fcd34d; background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.3); }
.bonus-task-icon.is-violet { color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(167,139,250,.32); }
.bonus-task-icon.is-sky { color: #7dd3fc; background: rgba(56,189,248,.13); border: 1px solid rgba(56,189,248,.3); }
.bonus-reward { flex: none; align-self: flex-start; padding: .35rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #6ee7b7; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); white-space: nowrap; }
.bonus-task-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.bonus-task-actions .btn { padding: .7rem 1.05rem; font-size: .86rem; }
.bonus-task .field-help { margin: .8rem 0 0; }
.bonus-status:empty { display: none; }
.bonus-ref-code { display: flex; gap: .55rem; margin-top: 1rem; }
.bonus-ref-code .input { flex: 1; min-width: 0; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bonus-task-meta { margin-top: .75rem; }
.bonus-earned { margin: .35rem 0 0; font-size: .86rem; font-weight: 600; color: #c4b5fd; }
.bonus-loyalty { padding: 1.2rem 1.25rem; border-radius: 18px; border: 1px solid rgba(251,191,36,.22); background: linear-gradient(160deg, rgba(251,191,36,.07), rgba(20,20,28,.9) 60%); }
.bonus-loyalty h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.bonus-loyalty > .text-muted { font-size: .86rem; line-height: 1.45; margin-bottom: .75rem; }
.bonus-loyalty .loyalty-level { border-radius: 12px; padding: .75rem .9rem; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.bonus-loyalty .loyalty-level:hover { opacity: 1; transform: translateX(3px); }
@media (min-width: 720px) {
    .bonus-tasks { grid-template-columns: 1fr 1fr; }
    .bonus-task:first-child:not(.hidden) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .bonus-hero { padding: 1.15rem 1rem 1.1rem; border-radius: 18px; }
    .bonus-hero-top h2 { font-size: 1.4rem; }
    .bonus-bucket b { font-size: 1.35rem !important; }
    .bonus-ref-code { flex-direction: column; }
    .bonus-task-actions .btn { flex: 1 1 auto; }
    .bonus-task { padding: 1rem; }
    .bonus-task-head { flex-wrap: wrap; gap: .7rem; }
    .bonus-task-icon { width: 40px; height: 40px; }
    .bonus-task-title { flex: 1 1 calc(100% - 40px - .7rem); }
    .bonus-reward { order: 3; margin-left: calc(40px + .7rem); }
}

/* Highlighted partner buttons in the footer link row */
.footer-links { align-items: center; flex-wrap: wrap; }
.footer-links .footer-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .95rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; color: #fff; text-decoration: none;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.footer-links .footer-cta svg { flex: none; }
.footer-links .footer-cta-primary {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 6px 18px rgba(139,92,246,.35);
}
.footer-links .footer-cta-tg {
    background: rgba(36,161,222,.16);
    border-color: rgba(36,161,222,.55);
    color: #6cc4f5;
}
.footer-links .footer-cta:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.footer-links .footer-cta-primary:hover { box-shadow: 0 10px 26px rgba(139,92,246,.5); }
.footer-links .footer-cta-tg:hover { background: rgba(36,161,222,.3); }
@media (max-width: 600px) {
    .footer-links .footer-cta { padding: .6rem 1.1rem; font-size: .84rem; }
    .footer-links .footer-cta-primary { order: 10; }
    .footer-links .footer-cta-tg { order: 11; }
}
.footer { flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.footer-links { justify-content: center; gap: .6rem 1.1rem; }
@media (max-width: 600px) { .footer { padding-bottom: 5rem; } }

/* Плашка о задержках выдачи (включается в админке) */
.delay-banner { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 12px; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4); color: #fde68a; font-size: .85rem; line-height: 1.5; font-weight: 500; }
.delay-banner strong { color: #fbbf24; }