:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#f3f6f9;background:#080b0f;--panel:#11171e;--panel-2:#151d26;--line:#283544;--muted:#9ba9b7;--accent:#4d9cff;--accent-2:#2475d0;--gold:#ffd166}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#152234 0,#080b0f 42%);color:#f3f6f9}a{color:#b9d8ff;text-decoration:none}header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 5%;background:#0d1218e8;border-bottom:1px solid #22303d;backdrop-filter:blur(16px);box-shadow:0 8px 30px #0005}nav{display:flex;gap:18px;align-items:center}.brand{font-size:23px;font-weight:900;color:#fff;letter-spacing:.02em}.steam,.button,button{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0;border-radius:11px;padding:10px 16px;cursor:pointer;font-weight:800;transition:.2s transform,.2s filter,.2s box-shadow}.steam:hover,.button:hover,button:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 8px 25px #2475d044}.balance{background:#18222d;border:1px solid #2d4052;padding:9px 14px;border-radius:11px;color:var(--gold);font-weight:900}main{width:min(1320px,94%);margin:34px auto 70px}.store-heading{text-align:center;margin:18px auto 24px;max-width:760px}.store-heading h1{font-size:clamp(34px,5vw,58px);margin:0;letter-spacing:-.035em}.store-heading p{color:var(--muted);font-size:17px;margin:0}.eyebrow{letter-spacing:.18em;font-size:12px;color:#6eaff8;font-weight:900}.category-nav{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap;margin:28px auto 36px}.category-pill{position:relative;padding:11px 18px;border-radius:999px;background:#121a23;border:1px solid #2a3847;color:#c5d0da;font-weight:800;transition:.2s}.category-pill:hover{border-color:#4d9cff;color:#fff;transform:translateY(-2px)}.category-pill.active{color:#fff;border-color:#5ca8ff;background:linear-gradient(135deg,#2d7dd4,#175aa8);box-shadow:0 9px 28px #2475d044}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;align-items:stretch}.product-card{min-width:0;background:linear-gradient(180deg,#151c24,#10161d);border:1px solid #263442;border-radius:22px;overflow:hidden;box-shadow:0 18px 45px #0004;transition:.25s transform,.25s border-color,.25s box-shadow}.product-card:hover{transform:translateY(-6px);border-color:#4779a9;box-shadow:0 25px 65px #0008}.product-media{position:relative;height:220px;overflow:hidden;background:#0b1015;display:grid;place-items:center}.product-media img{max-width:75%;max-height:75%;width:auto;height:auto;object-fit:contain;transition:.35s transform}.product-card:hover .product-media img{transform:scale(1.045)}.product-content{padding:21px;display:flex;flex-direction:column;min-height:270px}.product-content h2{font-size:22px;margin:0 0 10px;text-align:center}.product-content>p{color:var(--muted);line-height:1.5;margin:0 0 20px;flex:1;text-align:center}.product-footer{padding-top:17px;border-top:1px solid #263341}.buy-form{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}.quantity-control{display:grid;grid-template-columns:36px 48px 36px;align-items:center;border:1px solid #344658;border-radius:12px;overflow:hidden;background:#0b1016}.qty{width:48px;height:40px;padding:0;border:0;border-left:1px solid #283746;border-right:1px solid #283746;border-radius:0;text-align:center;background:#0e151c;font-weight:900;-moz-appearance:textfield}.qty::-webkit-inner-spin-button,.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.qty-button{padding:0;width:36px;height:40px;border-radius:0;background:transparent;color:#dceafa;font-size:21px;box-shadow:none}.qty-button:hover{transform:none;background:#1c2b3a;box-shadow:none}.purchase-block{min-width:0}.price-caption{display:block;color:#8494a4;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.product-total{display:block;color:var(--gold);font-size:22px;white-space:nowrap}.buy-button{grid-column:1/-1;width:100%;padding:13px;font-size:15px}.guest-purchase{display:flex;justify-content:space-between;align-items:center;gap:12px}.guest-purchase strong{font-size:23px;color:var(--gold)}.image-placeholder{height:100%;display:grid;place-items:center;font-size:54px;font-weight:950;color:#34506a;background:radial-gradient(circle,#1a2b3c,#0b1117)}table{width:100%;border-collapse:collapse;background:#12171d;border-radius:14px;overflow:hidden}th,td{text-align:left;padding:14px;border-bottom:1px solid #27313b}th{background:#19212a}.panel{background:#12171d;border:1px solid #27313b;padding:20px;border-radius:14px;margin-bottom:20px;display:grid;gap:14px}input,textarea,select{width:100%;background:#0c1015;color:#eee;border:1px solid #35414d;border-radius:8px;padding:10px}textarea{min-height:90px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wide{grid-column:1/-1}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}.danger{background:#8b2d36}.inline{display:inline-flex;gap:6px}.small{width:110px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.stats div{background:#151b22;padding:24px;border-radius:12px;display:flex;flex-direction:column}.stats b{font-size:34px}.admin-links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.admin-links a{background:#18212b;padding:14px 18px;border-radius:10px}.alert{padding:14px;background:#173c2c;border:1px solid #256444;border-radius:10px;margin:15px 0}.error{background:#4a2025;border-color:#7b3039}.empty{grid-column:1/-1;padding:48px;text-align:center;background:#12171d;border:1px solid #263442;border-radius:18px;color:#9ba7b4}.title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.secondary{background:#222d38}.component-box{border:1px solid #303c48;border-radius:12px;padding:16px;background:#0e1318}.component-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.component-head small{display:block;color:#98a5b2;margin-top:4px}.component-row{display:grid;grid-template-columns:1fr 100px auto;gap:10px;margin-top:10px}.save-button{font-size:16px;padding:14px}label small{display:block;color:#8f9baa;margin:3px 0 7px}@media(max-width:760px){header{align-items:flex-start;gap:10px;padding:14px 4%}nav{flex-wrap:wrap;justify-content:flex-end;gap:10px}main{width:92%;margin-top:24px}.product-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}table{display:block;overflow-x:auto}.stats{grid-template-columns:1fr}.component-row{grid-template-columns:1fr 75px}.component-row button{grid-column:1/-1}.buy-form{grid-template-columns:1fr}.quantity-control{width:120px}.purchase-block{text-align:right}.buy-button{grid-column:auto}}

.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.preset-grid>h2{grid-column:1/-1;margin:4px 0 2px}.preset-section{border:1px solid #2d3d4d;border-radius:16px;padding:18px;background:linear-gradient(180deg,#101720,#0c1218);box-shadow:0 12px 30px #0003}.preset-section h3{margin:0 0 14px;font-size:20px;color:#d9e9fb}.preset-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.preset-section-grid.single-column{grid-template-columns:1fr}.preset-section textarea{min-height:110px}@media(max-width:760px){.preset-grid,.preset-section-grid{grid-template-columns:1fr}.preset-section-grid .wide{grid-column:auto}}

.server-switcher{display:flex;align-items:center;gap:8px;margin:0}.server-switcher label,.current-server{font-size:14px;opacity:.9}.server-switcher select{min-width:160px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#171717;color:#fff}.muted{opacity:.72}.server-form{display:grid;gap:14px}.server-form label{display:grid;gap:6px}.server-form input,.server-form select{width:100%;box-sizing:border-box}.server-form .checkbox{display:flex;align-items:center;gap:8px}.server-form .checkbox input{width:auto}.catalog-settings{display:grid;gap:18px}.toggle-row{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}.toggle-row input{width:20px;height:20px}.toggle-row span{display:grid;gap:3px}.toggle-row small{opacity:.65}.save-catalog{position:sticky;bottom:16px;padding:14px 20px}

/* Фіксоване брендування шапки */
.site-header{min-height:84px;padding-left:max(24px,3vw);padding-right:max(24px,3vw)}
.brand{display:inline-flex;align-items:center;gap:16px;min-width:0;text-decoration:none}
.brand-logo-box{width:60px;height:60px;min-width:60px;min-height:60px;max-width:60px;max-height:60px;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:#0b121b;flex:0 0 60px}
.brand-logo{display:block;width:60px;height:60px;min-width:60px;min-height:60px;max-width:60px;max-height:60px;object-fit:contain}
.brand-title{display:block;line-height:1.15;white-space:nowrap}
.button-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px}
.branding-settings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.branding-card{display:grid;gap:16px;padding:20px;border:1px solid #2b3948;border-radius:16px;background:#0e151c}
.branding-card h2{margin:0}
.branding-preview{display:grid;place-items:center;min-height:150px;border-radius:14px;background:radial-gradient(circle,#1b2b3c,#080d12);border:1px dashed #34475a}
.header-logo-preview img{width:60px;height:60px;object-fit:contain}
.favicon-preview img{width:64px;height:64px;object-fit:contain}
@media(max-width:760px){.site-header{padding-left:14px;padding-right:14px}.brand{gap:10px}.brand-title{white-space:normal;font-size:16px}.branding-settings{grid-template-columns:1fr}}


/* CS-style roulette */
.roulette-pill{background:linear-gradient(135deg,#6b2ee8,#3569ff);border-color:#8e69ff;color:#fff;box-shadow:0 8px 25px #5938db33}
.roulette-page{max-width:1180px;margin:0 auto;text-align:center}
.roulette-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.roulette-tabs a{padding:8px 14px;border:1px solid #2d3b4b;border-radius:9px;background:#111923}
.roulette-tabs a.active{border-color:#5f9fff;background:#1d4d88;color:#fff}
.roulette-stage{position:relative;padding:16px 0;margin:10px auto 24px;background:linear-gradient(180deg,#0a0f15,#101821);border:1px solid #243343;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 50px #000,0 18px 55px #0008}
.roulette-window{overflow:hidden;width:100%;padding:0 10px}
.roulette-track{display:flex;gap:4px;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.roulette-card{width:168px;min-width:168px;height:165px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:10px;border:1px solid #644c16;border-radius:8px;background:radial-gradient(circle at 50% 25%,#6b4a05,#2a210d 75%);box-shadow:inset 0 -30px 45px #0006}
.roulette-card-image{height:92px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;overflow:visible}
.roulette-card-image img{max-width:75%;max-height:75%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 7px 10px #000)}
.roulette-card strong{font-size:13px;line-height:1.2;color:#fff;min-height:30px}
.roulette-pointer{position:absolute;z-index:3;left:50%;top:2px;bottom:2px;width:2px;background:linear-gradient(#ffb400,#ffd35c,#ff9d00);box-shadow:0 0 12px #ffad00,0 0 30px #ff7b00;transform:translateX(-50%);pointer-events:none}
.roulette-pointer:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:12px solid transparent;border-right:12px solid transparent;border-top:17px solid #ffb21a;filter:drop-shadow(0 0 8px #ff9d00)}
.roulette-pointer span:after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:12px solid #ffb21a}
.roulette-action{display:flex;justify-content:center;margin:18px 0 8px}
.roulette-spin-button{min-width:310px;padding:15px 30px;border-radius:12px;font-size:20px;display:grid;gap:3px;background:linear-gradient(135deg,#2584ff,#165bca);box-shadow:0 12px 35px #1d6fea55}
.roulette-spin-button small{font-size:12px;font-weight:700;opacity:.82}
.roulette-spin-button.spinning{filter:saturate(.6);cursor:wait}
.roulette-status{min-height:24px;color:#a8b6c5}
.roulette-win-modal{position:fixed;inset:0;z-index:100;background:#05080dcf;backdrop-filter:blur(10px);display:grid;place-items:center;opacity:0;transition:.18s}
.roulette-win-modal.visible{opacity:1}.roulette-win-modal[hidden]{display:none}
.roulette-win-card{position:relative;width:min(430px,92vw);padding:36px;border:1px solid #7146bd;border-radius:22px;background:radial-gradient(circle at 50% 20%,#382052,#12151b 62%);box-shadow:0 0 60px #7d37d866;text-align:center;overflow:hidden}
.roulette-win-card h2{font-size:32px;margin:0 0 8px}.roulette-win-card h3{font-size:22px}.win-image{height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.win-image img{max-width:75%;max-height:75%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 25px #a64cff)}
.roulette-win-card button{width:100%;margin-top:10px}
.roulette-unclaimed{margin-top:32px}.unclaimed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.unclaimed-grid article{display:grid;gap:8px;justify-items:center;padding:14px;border:1px solid #293747;border-radius:12px;background:#0d141c}
.unclaimed-grid img{width:120px;height:80px;object-fit:contain}
.roulette-prize-admin{display:grid;gap:10px}.roulette-prize-row{display:grid;grid-template-columns:1fr 130px 130px;gap:14px;align-items:center;padding:12px;border:1px solid #293746;border-radius:12px;background:#0d141b}
.prize-select img{width:72px;height:52px;object-fit:contain}.prize-select span{font-weight:800}
@media(max-width:760px){.roulette-card{width:132px;min-width:132px;height:125px}.roulette-card-image{height:72px}.roulette-prize-row{grid-template-columns:1fr}.roulette-spin-button{min-width:min(310px,90vw)}}

/* Накопичувальна система безкоштовних прокруток */
.roulette-loyalty{width:min(720px,100%);margin:18px auto 4px;padding:14px 16px;border:1px solid #33475d;border-radius:14px;background:linear-gradient(180deg,#111b27,#0d141d);box-shadow:0 12px 30px #0004}
.loyalty-topline{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:10px;color:#c9d7e6}
.loyalty-topline strong{color:#fff}.loyalty-progress{height:12px;border-radius:999px;overflow:hidden;background:#071019;border:1px solid #26384a}
.loyalty-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c39ef,#3692ff);box-shadow:0 0 18px #4c75ff99;transition:width .45s ease}
.loyalty-admin-box{margin:18px 0}.admin-user-card{gap:16px}.admin-user-card h2{margin:0}.admin-balance-form{display:grid;grid-template-columns:120px 1fr auto}.loyalty-admin-list{display:grid;gap:10px}
.loyalty-user-row{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(130px,.8fr) minmax(170px,.8fr) auto;gap:12px;align-items:end;padding:12px;border:1px solid #293b4e;border-radius:12px;background:#0c131b}
.loyalty-user-row>div{display:grid;gap:4px}.loyalty-user-row small{color:#91a1b1}.loyalty-user-row label{display:grid;gap:5px;font-size:12px;color:#a9b8c7}.loyalty-earned{font-weight:900;border-color:#6b48b7;background:#281b3d}
@media(max-width:760px){.loyalty-topline{align-items:flex-start;flex-direction:column}.admin-balance-form,.loyalty-user-row{grid-template-columns:1fr}.loyalty-user-row button{width:100%}}

/* Рідкість призів рулетки — колір визначається реальним шансом випадіння */
.roulette-card{position:relative;isolation:isolate;transition:transform .18s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease}
.roulette-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;z-index:-1}
.roulette-card.rarity-common{border-color:#35c759;background:radial-gradient(circle at 50% 25%,#236b36,#102317 75%);box-shadow:inset 0 -30px 45px #0007,0 0 13px #35c75938}
.roulette-card.rarity-uncommon{border-color:#348cff;background:radial-gradient(circle at 50% 25%,#2057aa,#101d34 75%);box-shadow:inset 0 -30px 45px #0007,0 0 15px #348cff45}
.roulette-card.rarity-rare{border-color:#a34cff;background:radial-gradient(circle at 50% 25%,#6727a7,#21102f 75%);box-shadow:inset 0 -30px 45px #0007,0 0 17px #a34cff50}
.roulette-card.rarity-epic{border-color:#ed3b45;background:radial-gradient(circle at 50% 25%,#8d2029,#2b1014 75%);box-shadow:inset 0 -30px 45px #0007,0 0 20px #ed3b455c}
.roulette-card.rarity-legendary{border-color:#ffba24;background:radial-gradient(circle at 50% 25%,#8b6208,#2b210b 75%);box-shadow:inset 0 -30px 45px #0007,0 0 24px #ffb00070}
.roulette-card:hover,.roulette-card.pointer-active{transform:translateY(-3px) scale(1.035);filter:brightness(1.16)}
.roulette-card.pointer-active{z-index:2}
.roulette-card.rarity-common.pointer-active{box-shadow:inset 0 -30px 45px #0006,0 0 24px #35c759aa}
.roulette-card.rarity-uncommon.pointer-active{box-shadow:inset 0 -30px 45px #0006,0 0 28px #348cffbb}
.roulette-card.rarity-rare.pointer-active{box-shadow:inset 0 -30px 45px #0006,0 0 31px #a34cffc4}
.roulette-card.rarity-epic.pointer-active{box-shadow:inset 0 -30px 45px #0006,0 0 34px #ed3b45c9}
.roulette-card.rarity-legendary.pointer-active{box-shadow:inset 0 -30px 45px #0006,0 0 40px #ffb000e0;animation:none;background:radial-gradient(circle at 50% 20%,#234b30,#12151b 64%);box-shadow:0 0 62px #35c75972}
.roulette-win-card.rarity-uncommon{border-color:#348cff;background:radial-gradient(circle at 50% 20%,#203c68,#12151b 64%);box-shadow:0 0 66px #348cff78}
.roulette-win-card.rarity-rare{border-color:#a34cff;background:radial-gradient(circle at 50% 20%,#45235f,#12151b 64%);box-shadow:0 0 70px #a34cff82}
.roulette-win-card.rarity-epic{border-color:#ed3b45;background:radial-gradient(circle at 50% 20%,#5b2228,#12151b 64%);box-shadow:0 0 74px #ed3b458c}
.roulette-win-card.rarity-legendary{border-color:#ffba24;background:radial-gradient(circle at 50% 20%,#66501b,#12151b 64%);box-shadow:0 0 85px #ffb000a3;animation:rouletteWinLegendary 1.35s ease-in-out infinite alternate}
.roulette-win-card.rarity-common .win-image img{filter:drop-shadow(0 0 25px #35c759)}
.roulette-win-card.rarity-uncommon .win-image img{filter:drop-shadow(0 0 27px #348cff)}
.roulette-win-card.rarity-rare .win-image img{filter:drop-shadow(0 0 29px #a34cff)}
.roulette-win-card.rarity-epic .win-image img{filter:drop-shadow(0 0 31px #ed3b45)}
.roulette-win-card.rarity-legendary .win-image img{filter:drop-shadow(0 0 36px #ffba24)}
@keyframes rouletteWinLegendary{from{box-shadow:0 0 58px #ffb00078}to{box-shadow:0 0 100px #ffcf4bc0}}