/* Дикий Ролл — admin, grayscale */
:root{
  --g950:#09090b; --g925:#0e0e10; --g900:#121214; --g875:#17171a; --g850:#1b1b1f;
  --g800:#222227; --g750:#2a2a30; --g700:#35353d; --g600:#4b4b55; --g500:#6d6d78;
  --g400:#9c9ca6; --g300:#c6c6cd; --g200:#e4e4e7; --g100:#f0f0f2; --g50:#fafafa;
  --text:var(--g100); --muted:var(--g400); --faint:#74747f;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --surface:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),var(--g875);
  --radius:18px; --radius-sm:12px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.35);
  --topbar-h:64px; --bottomnav-h:68px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; color:var(--text);
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--g950);
}
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(720px 420px at 85% -10%,rgba(255,255,255,.09),transparent 60%),
    radial-gradient(640px 420px at -10% 0%,rgba(255,255,255,.055),transparent 55%),
    linear-gradient(180deg,#101012 0%,var(--g950) 340px);
}
::selection{background:var(--g200); color:#09090b}
a{color:var(--g100); text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.06);
  padding:.12rem .4rem; border-radius:7px; overflow-wrap:anywhere}
h1{font-size:clamp(1.55rem,1.1rem+2vw,2.1rem); line-height:1.12; letter-spacing:-.03em; margin:0; font-weight:750}
h2{font-size:1.02rem; letter-spacing:-.01em; margin:0; font-weight:700}
p{margin:0}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(16px,4vw,32px);
  background:rgba(14,14,16,.78); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:11px; color:var(--text); text-decoration:none; flex:none}
.brand-mark{width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(180deg,var(--g50),var(--g300)); color:#111113;
  box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(255,255,255,.35)}
.brand-mark svg{width:22px; height:22px}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-size:.98rem; letter-spacing:-.02em}
.brand-text small{color:var(--faint); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase}
.topnav{display:flex; gap:4px; margin-inline:auto; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid var(--border)}
.topnav a{padding:7px 14px; border-radius:999px; color:var(--g300); text-decoration:none; font-size:.88rem; font-weight:550; white-space:nowrap; transition:.18s}
.topnav a:hover{color:#fff; background:rgba(255,255,255,.07)}
.topnav a.is-active{background:var(--g100); color:#111113; box-shadow:0 2px 8px rgba(0,0,0,.35)}
.logout{display:flex; align-items:center; gap:7px; flex:none; padding:8px 13px; border-radius:999px;
  border:1px solid var(--border); color:var(--g300); text-decoration:none; font-size:.87rem; font-weight:550; transition:.18s}
.logout:hover{color:#fff; border-color:var(--border-strong); background:rgba(255,255,255,.05)}
.logout svg{width:17px; height:17px}

/* ---------- Layout ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:28px clamp(16px,4vw,32px) 48px}
.page-head{margin-bottom:22px}
.page-sub{color:var(--muted); margin-top:7px; max-width:62ch; font-size:.95rem}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:16px;
}
.card > h2{margin-bottom:6px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.card-head h2{margin:0}
.two-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.two-col > .card{margin-bottom:0}
.stack{display:grid; gap:16px}
.section-gap{margin-top:16px}

/* ---------- Flash / text ---------- */
.flash{display:flex; gap:10px; align-items:flex-start; padding:13px 16px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  border:1px solid var(--border-strong); font-size:.93rem}
.flash::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--g100); margin-top:.45em; flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.ok{color:var(--g100)}
.error{color:#f1f1f4; background:rgba(255,255,255,.06); border:1px solid var(--border-strong);
  padding:11px 14px; border-radius:12px; font-size:.92rem}
.muted{color:var(--muted); font-size:.9rem}
.hint{color:var(--faint); font-size:.84rem; margin-top:-6px; margin-bottom:14px}

/* ---------- Stats ---------- */
.grid.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px}
.stat{position:relative; overflow:hidden; padding:20px; margin:0; min-height:118px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px}
.stat::after{content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.stat .icon{position:absolute; top:16px; right:16px; width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--g300)}
.stat .icon svg{width:18px; height:18px}
.stat .num{font-size:2.15rem; font-weight:780; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.stat .lbl{color:var(--muted); font-size:.83rem; line-height:1.35; max-width:16ch}
.meta-bar{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:13px 16px; margin-bottom:16px; border:1px solid var(--border); border-radius:14px;
  background:rgba(255,255,255,.03); color:var(--muted); font-size:.88rem}
.meta-bar b{color:var(--g200); font-weight:650}

/* ---------- Buttons ---------- */
button,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 20px; border-radius:12px; border:1px solid transparent;
  background:linear-gradient(180deg,#fff,var(--g200)); color:#111113;
  font:inherit; font-size:.94rem; font-weight:650; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(255,255,255,.45),inset 0 1px 0 #fff;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s; -webkit-tap-highlight-color:transparent;
}
button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0) scale(.99)}
.btn.secondary,button.secondary{
  background:rgba(255,255,255,.055); color:var(--g100); border-color:var(--border-strong);
  box-shadow:none}
.btn.secondary:hover{background:rgba(255,255,255,.09)}
.btn.sm,.btn.small{min-height:38px; padding:7px 14px; font-size:.87rem; border-radius:10px}
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
button.link,.link-btn{
  min-height:auto; padding:6px 10px; border-radius:8px; background:transparent; border:none; box-shadow:none;
  color:var(--g300); font-size:.88rem; font-weight:550}
button.link:hover,.link-btn:hover{background:rgba(255,255,255,.07); color:#fff; transform:none}
button.link.danger{color:var(--g400)}
button.link.danger:hover{background:rgba(255,255,255,.07); color:#fff}

/* ---------- Forms ---------- */
form.card{margin-bottom:16px}
label{display:block; margin-bottom:15px; font-size:.88rem; font-weight:600; color:var(--g200)}
input,textarea,select{
  display:block; width:100%; margin-top:7px; padding:12px 14px; min-height:48px;
  border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,.32); color:var(--text);
  font:inherit; font-size:16px; font-weight:400; outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
textarea{min-height:auto; line-height:1.55; resize:vertical}
input::placeholder,textarea::placeholder{color:#5c5c66}
input:focus,textarea:focus,select:focus{border-color:rgba(255,255,255,.45); box-shadow:0 0 0 4px rgba(255,255,255,.09); background:rgba(0,0,0,.45)}
textarea.mono,input.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.9rem}
.check{display:flex; align-items:center; gap:11px; font-weight:550; cursor:pointer; padding:4px 0}
.check input{appearance:none; width:22px; height:22px; min-height:22px; margin:0; padding:0; flex:none;
  border-radius:7px; border:1px solid var(--border-strong); background:rgba(0,0,0,.35); display:grid; place-content:center; cursor:pointer}
.check input::before{content:""; width:11px; height:11px; border-radius:3px; background:transparent; transition:.15s}
.check input:checked{background:var(--g100); border-color:var(--g100)}
.check input:checked::before{background:#111113}
.form-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--border)}
form.inline{display:inline-flex}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,.22)}
.card .table-wrap{margin-top:12px}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
thead th{
  text-align:left; padding:11px 14px; color:var(--faint); font-size:.72rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; background:rgba(255,255,255,.035);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; color:var(--g200)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,255,255,.028)}
td.num,th.num{font-variant-numeric:tabular-nums}
.empty{padding:28px 16px; text-align:center; color:var(--faint)}
.row-actions{display:flex; gap:4px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.045); color:var(--g200);
  font-size:.83rem; font-weight:550; text-decoration:none; white-space:nowrap; transition:.15s}
.pill:hover{background:rgba(255,255,255,.09); color:#fff}

/* badges (grayscale) */
.badge{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  font-size:.78rem; font-weight:650; letter-spacing:.01em; white-space:nowrap; border:1px solid var(--border)}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.badge.pending{background:var(--g700); color:var(--g100)}
.badge.approved{background:var(--g100); color:#131315; border-color:var(--g100)}
.badge.rejected{background:transparent; color:var(--g400)}
.badge.active{background:var(--g100); color:#131315; border-color:var(--g100)}
.badge.inactive{background:transparent; color:var(--g500)}

/* ---------- Promo codes ---------- */
.code-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.code-chips .chip{padding:7px 12px; border-radius:10px; background:rgba(255,255,255,.055);
  border:1px solid var(--border); font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86rem; color:var(--g100)}
.chip .note{color:var(--faint); font-family:inherit; font-size:.78rem}

/* ---------- Segmented filter ---------- */
.segmented{display:flex; gap:6px; overflow-x:auto; padding:5px; margin:0 0 16px;
  border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.035);
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.segmented::-webkit-scrollbar{display:none}
.segmented a{padding:9px 16px; border-radius:999px; color:var(--g300); text-decoration:none;
  font-size:.88rem; font-weight:580; white-space:nowrap; transition:.15s}
.segmented a:hover{color:#fff}
.segmented a.is-active{background:var(--g100); color:#131315}

/* ---------- Login ---------- */
.wrap.login-wrap{min-height:calc(100dvh - var(--topbar-h)); display:grid; place-items:center; padding-top:20px}
.login-card{width:100%; max-width:400px; padding:30px 28px; text-align:left; margin:0}
.login-mark{width:52px; height:52px; display:grid; place-items:center; border-radius:15px; margin-bottom:18px;
  background:linear-gradient(180deg,var(--g50),var(--g300)); color:#111113; box-shadow:inset 0 1px 0 #fff}
.login-mark svg{width:29px; height:29px}
.login-card h2{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:6px}
.login-card button{width:100%}

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav{display:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .topnav{display:none}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
  .two-col > .card{margin-bottom:0}
  .two-col{gap:16px}
}
@media (max-width:680px){
  :root{--topbar-h:58px}
  body{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}
  .topbar{gap:10px; padding:0 16px}
  .brand-text small{display:none}
  .logout span{display:none}
  .logout{padding:9px; border-radius:11px}
  .wrap{padding:20px 14px 28px}
  .card{padding:18px 16px; border-radius:16px}
  .page-head{margin-bottom:16px}
  .stat{min-height:104px; padding:16px}
  .stat .num{font-size:1.8rem}
  .stat .icon{width:30px; height:30px; top:13px; right:13px}
  /* tables -> cards */
  .table-wrap{border:none; background:transparent; overflow:visible; border-radius:0}
  .card .table-wrap{margin-top:4px}
  table{display:block; min-width:0}
  thead{display:none}
  tbody{display:grid; gap:10px}
  tbody tr{display:block; padding:8px 14px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,.22)}
  tbody tr:hover{background:rgba(0,0,0,.22)}
  tbody td{display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,.055); text-align:right}
  tbody td:last-child{border-bottom:none}
  tbody td::before{content:attr(data-label); color:var(--faint); font-size:.74rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; text-align:left; flex:none}
  td.empty-cell{display:block; text-align:center}
  td.empty-cell::before{display:none}
  .row-actions{justify-content:flex-start}
  tbody td:has(.row-actions){justify-content:flex-end}
  tbody td:has(.row-actions)::before{display:none}
  .form-actions{position:sticky; bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 10px);
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
    border:1px solid var(--border); border-radius:14px; padding:12px; backdrop-filter:blur(12px)}
  .form-actions button,.form-actions .btn{flex:1}
  .actions .btn{flex:1}
  .bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding:6px 6px env(safe-area-inset-bottom);
    background:rgba(13,13,15,.86); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--border);
  }
  .bottomnav a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--faint); text-decoration:none; font-size:.64rem; font-weight:600; letter-spacing:.01em;
    border-radius:12px; -webkit-tap-highlight-color:transparent; transition:.15s}
  .bottomnav a svg{width:22px; height:22px}
  .bottomnav a.is-active{color:#fff; background:rgba(255,255,255,.08)}
  .bottomnav a:active{background:rgba(255,255,255,.1)}
  .wrap.login-wrap{min-height:calc(100dvh - var(--topbar-h)); padding-bottom:20px}
  body:has(.login-wrap){padding-bottom:0}
}
@media (max-width:380px){
  .grid.stats{gap:10px}
  .stat .lbl{font-size:.78rem}
  .bottomnav a span{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}