*{box-sizing:border-box}
:root{
  --bg:#202632;
  --bg2:#171c25;
  --panel:rgba(45,54,68,.92);
  --panel2:rgba(35,42,54,.96);
  --panel3:rgba(53,63,78,.96);
  --blue:#2d75b8;
  --blue2:#1e5d99;
  --blue3:#4aa7ff;
  --text:#f4f7fb;
  --muted:#a8b2c0;
  --line:rgba(255,255,255,.09);
  --line2:rgba(74,167,255,.28);
  --shadow:0 18px 42px rgba(0,0,0,.34);
  --shadow2:0 12px 28px rgba(22,70,120,.18);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(48,122,190,.26), transparent 36%),
    linear-gradient(180deg, rgba(23,28,37,.18), rgba(23,28,37,.7)),
    var(--bg) url('background.png') center top/cover fixed no-repeat;
  color:var(--text);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(90deg, rgba(21,26,34,.7), rgba(21,26,34,.38) 50%, rgba(21,26,34,.7));
  pointer-events:none;
  z-index:-1;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.45;
  pointer-events:none;
  z-index:-1;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1220px;margin:0 auto;padding:34px 22px 58px}
.topbar{height:39px;background:linear-gradient(90deg,#23649f,#3181c8,#23649f);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 24px rgba(0,0,0,.18)}
.header{background:rgba(42,50,63,.9);border-bottom:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.header-inner{max-width:1220px;margin:0 auto;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:7px 14px 7px 16px;
  border:2px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  border-radius:8px;
  box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 0 0 1px rgba(74,167,255,.22);
  font-size:25px;
  font-weight:950;
  font-style:italic;
  letter-spacing:-1px;
  text-transform:uppercase;
  transform:skew(-7deg);
}
.logo:after{content:"";position:absolute;right:10px;bottom:6px;width:46px;height:3px;background:var(--blue3);box-shadow:0 0 12px rgba(74,167,255,.8)}
.logo span{color:#65c0ff;text-shadow:0 0 12px rgba(74,167,255,.55)}
.menu{display:flex;gap:26px;align-items:center;color:#b5bdc9;font-size:13px;text-transform:uppercase;font-weight:800;letter-spacing:.3px}
.menu a{position:relative;padding:26px 0}.menu a:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--blue3);transform:scaleX(0);transition:.18s}.menu a:hover{color:#fff}.menu a:hover:after{transform:scaleX(1)}
.admin-btn,.btn,button{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#3a8cd4,#2169a9);
  color:#fff;
  padding:11px 18px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  transition:.16s ease;
  border-radius:0;
  box-shadow:0 9px 20px rgba(38,111,181,.22),inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow:0 1px 0 rgba(0,0,0,.22);
}
.admin-btn:hover,.btn:hover,button:hover{background:linear-gradient(180deg,#49a2ee,#2878bd);transform:translateY(-1px);box-shadow:0 13px 24px rgba(38,111,181,.32)}
.danger{background:linear-gradient(180deg,#c75149,#94322f)!important}.danger:hover{background:linear-gradient(180deg,#d85f56,#a83a35)!important}
.section{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:24px;backdrop-filter:blur(8px)}
.section-title{
  position:relative;
  background:linear-gradient(90deg,#2c75b8,#2467a6 58%,#20598d);
  padding:15px 20px;
  font-size:19px;
  font-weight:950;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.13);
  letter-spacing:.2px;
}
.section-title:after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:24px}
.card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(49,58,72,.96),rgba(40,48,61,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:.18s ease;
}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0%,rgba(74,167,255,.15),transparent 35%);pointer-events:none}.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 22px 48px rgba(0,0,0,.42),var(--shadow2)}
.card-body{position:relative;padding:20px}.card h2{margin:0 0 10px;font-size:22px;font-weight:950}.muted{color:var(--muted)}.price{display:inline-flex;align-items:center;gap:8px;font-weight:950;margin:15px 0;color:#74c5ff;font-size:17px}.price:before{content:"";width:8px;height:8px;background:#74c5ff;box-shadow:0 0 12px #74c5ff}
.items{display:flex;gap:10px;overflow:hidden;margin:18px 0;padding:2px 0 5px}.item{min-width:104px;background:linear-gradient(180deg,rgba(59,70,86,.88),rgba(43,51,64,.96));border:1px solid var(--line);padding:10px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.item img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.22))}.item-name{font-size:12px;font-weight:800;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.common{border-bottom:3px solid #aab1bd}.rare{border-bottom:3px solid #3fa6ff}.epic{border-bottom:3px solid #985cff}.legendary{border-bottom:3px solid #ffbd42}
.roulette-box{margin-top:18px;background:rgba(31,38,49,.86);border:1px solid var(--line);padding:17px;box-shadow:inset 0 1px 16px rgba(0,0,0,.17)}
.strip{height:146px;background:linear-gradient(180deg,#202735,#1a202a);border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative;display:flex;align-items:center;box-shadow:inset 0 0 28px rgba(0,0,0,.28)}
.strip:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;z-index:3;box-shadow:0 0 0 1px rgba(74,167,255,.4),0 0 22px rgba(74,167,255,.95)}
.strip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,32,42,.98),transparent 25%,transparent 75%,rgba(26,32,42,.98));z-index:2;pointer-events:none}
.track{display:flex;gap:12px;transition:transform 4s cubic-bezier(.12,.75,.16,1);padding-left:50%}
.spin-item{width:124px;height:106px;background:linear-gradient(180deg,rgba(65,77,94,.96),rgba(43,51,65,.96));display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 124px;border:1px solid var(--line);font-size:12px;font-weight:800;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.spin-item img{width:54px;height:54px;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}.result{margin-top:14px;font-size:21px;font-weight:950;color:#fff;text-shadow:0 0 14px rgba(74,167,255,.45)}
.panel{background:var(--panel);border:1px solid var(--line);padding:21px;margin-bottom:20px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
input,select,textarea{width:100%;padding:13px;background:rgba(28,34,44,.94);border:1px solid rgba(255,255,255,.12);color:#fff;margin:6px 0 14px;outline:none;transition:.15s;border-radius:0}input:focus,select:focus,textarea:focus{border-color:#4aa7ff;box-shadow:0 0 0 3px rgba(74,167,255,.12)}
.table{width:100%;border-collapse:collapse;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.table th{background:linear-gradient(90deg,#2c75b8,#2467a6);font-weight:950}.table th,.table td{padding:13px;border-bottom:1px solid var(--line);text-align:left}.table tr:hover td{background:rgba(255,255,255,.025)}
.nav{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.small{font-size:12px;color:var(--muted)}.notice{padding:12px 14px;background:rgba(24,84,45,.55);border:1px solid rgba(47,190,96,.62);margin-bottom:15px}.error{padding:12px 14px;background:rgba(92,28,28,.55);border:1px solid rgba(226,75,75,.7);margin-bottom:15px}.login-box{max-width:440px;margin:76px auto}.preview-img{width:46px;height:46px;object-fit:contain;background:#202735;border:1px solid var(--line);vertical-align:middle;margin-right:8px}.alert{margin-top:12px;padding:12px 14px;background:rgba(37,99,166,.2);border:1px solid rgba(74,167,255,.62);color:#dbeafe;font-weight:800}
@media(max-width:740px){.menu{display:none}.header-inner{height:64px}.logo{font-size:20px}.grid{grid-template-columns:1fr}.wrap{padding:18px 12px}.table{font-size:12px}.table th,.table td{padding:9px}.topbar{height:34px}.card-body{padding:15px}.spin-item{width:110px;flex-basis:110px}.strip{height:132px}}