/* ============================================================
   Rograde — оформление админки.
   Подключается ПОСЛЕ style.css и только на /admin, поэтому игровую часть
   сайта не задевает. Откат: убрать одну строку <link> из admin.html.

   Замысел: это не витрина, а пультовая. Поэтому нейтральные тона уведены
   в холодный синеватый, цифры набраны моноширинными знаками и выровнены по
   разряду, а жёлтый оставлен ровно за действием — им не красят фон.
   ============================================================ */

:root{
  --adm-ground:#0A0B0F;
  --adm-card:#14161D;
  --adm-card-2:#181A22;
  --adm-raise:#1E212B;
  --adm-line:rgba(150,168,210,.11);
  --adm-line-2:rgba(150,168,210,.2);
  --adm-ink:#E8EAF1;
  --adm-mute:#8B93A7;
  --adm-dim:#5B6273;
  --ok:#3BD16F;
  --warn:#FFB020;
  --bad:#FF5A4E;
  --info:#5B8CFF;
}

body{background:var(--adm-ground);color:var(--adm-ink)}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(880px 420px at 50% -8%,rgba(255,210,0,.05),transparent 68%),
    radial-gradient(720px 480px at 92% 8%,rgba(91,140,255,.05),transparent 70%);
}

/* ---------- шапка ---------- */
.hdr{background:linear-gradient(180deg,rgba(20,22,29,.94),rgba(14,15,20,.9));
  backdrop-filter:blur(12px);border-bottom:1px solid var(--adm-line)}
.hdr-in::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,210,0,.35),transparent)}
.hdr-in{position:relative}

/* ---------- вход ---------- */
#loginPane .box{background:linear-gradient(180deg,var(--adm-card-2),var(--adm-card));
  border:1px solid var(--adm-line);border-radius:16px;padding:26px 24px 22px;
  box-shadow:0 40px 90px -50px #000,inset 0 1px 0 rgba(255,255,255,.05);position:relative}
#loginPane .box::before{
  content:"R";position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--yellow-grad);color:#141417;
  font-family:var(--display);font-weight:700;font-size:22px;line-height:1;
  box-shadow:0 14px 30px -12px rgba(255,210,0,.6)}
#loginPane h3{margin:12px 0 4px;text-align:center;font-size:14px;letter-spacing:.1em}
#loginPane .lbl{display:block;margin:14px 0 6px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--adm-dim)}
#loginPane .inp{width:100%;height:42px;border-radius:9px;padding:0 12px;font-size:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--adm-line-2);outline:none;
  transition:border-color .16s,box-shadow .16s,background .16s}
#loginPane .inp:focus{border-color:var(--yellow);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,210,0,.13)}
#loginPane .note{margin:14px 0 0;font-size:11.5px;line-height:1.55;color:var(--adm-dim);
  border-left:2px solid rgba(255,210,0,.35);padding-left:10px}

/* ---------- карточки сводки ---------- */
.cards{gap:10px}
.card{position:relative;overflow:hidden;padding:15px 16px 14px;
  background:linear-gradient(180deg,var(--adm-card-2),var(--adm-card));
  border:1px solid var(--adm-line);border-radius:13px;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),border-color .16s,box-shadow .16s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--yellow),transparent);opacity:.55}
.card:hover{transform:translateY(-2px);border-color:var(--adm-line-2);
  box-shadow:0 18px 34px -26px #000}
.card b{font-family:var(--display);font-size:23px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.15;color:#fff}
.card span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--adm-dim)}

/* ---------- вкладки ---------- */
.adm-tabs{background:rgba(150,168,210,.05);border:1px solid var(--adm-line);
  border-radius:11px;padding:4px;gap:2px}
.adm-tabs button{color:var(--adm-mute);letter-spacing:.02em;
  transition:background .15s,color .15s,box-shadow .15s}
.adm-tabs button:hover{color:var(--adm-ink);background:rgba(150,168,210,.07)}
.adm-tabs button[aria-pressed=true]{background:var(--adm-raise);color:#fff;
  box-shadow:inset 0 0 0 1px var(--adm-line-2),0 6px 16px -10px #000}
.adm-tabs button[aria-pressed=true]::after{content:"";display:block;height:2px;margin:6px -6px -4px;
  border-radius:2px;background:var(--yellow-grad)}

/* ---------- таблицы ---------- */
.tbl-wrap{background:var(--adm-card);border:1px solid var(--adm-line);border-radius:14px;
  box-shadow:0 24px 46px -38px #000}
table{font-size:12.5px}
thead th{position:sticky;top:0;z-index:2;background:rgba(18,20,26,.96);backdrop-filter:blur(6px);
  color:var(--adm-dim);border-bottom:1px solid var(--adm-line);padding:10px}
td{border-bottom:1px solid rgba(150,168,210,.06);color:var(--adm-ink);padding:10px}
tbody tr{transition:background .13s}
tbody tr:hover td{background:rgba(150,168,210,.045)}
tbody tr:last-child td{border-bottom:0}
td.num,td:has(> .num){font-variant-numeric:tabular-nums}
.u img{width:28px;height:28px;border-radius:8px;border:1px solid var(--adm-line)}

/* ---------- мелкие кнопки в строках ---------- */
.mini{height:27px;border-radius:7px;background:rgba(150,168,210,.08);
  border:1px solid transparent;color:var(--adm-mute);
  transition:background .14s,color .14s,border-color .14s,transform .14s}
.mini:hover{background:var(--yellow);border-color:var(--yellow);color:#141417;transform:translateY(-1px)}
.mini.danger:hover{background:var(--bad);border-color:var(--bad);color:#fff}

/* ---------- блоки настроек ---------- */
.box{background:linear-gradient(180deg,var(--adm-card-2),var(--adm-card));
  border:1px solid var(--adm-line);border-radius:14px;padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.box h3{color:var(--adm-ink);padding-bottom:10px;border-bottom:1px solid var(--adm-line)}
.frow{border-bottom:1px solid rgba(150,168,210,.05);padding:9px 0;color:var(--adm-mute)}
.frow:last-child{border-bottom:0}
.frow input[type=number],.frow input[type=text]{height:34px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--adm-line-2);color:var(--adm-ink);
  font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.frow input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,210,0,.12)}

/* ---------- значки состояния ---------- */
.pill{border:1px solid transparent;letter-spacing:.06em;text-transform:uppercase}
.pill.paid,.pill.done,.pill.win{background:rgba(59,209,111,.13);color:var(--ok);border-color:rgba(59,209,111,.28)}
.pill.pending{background:rgba(255,176,32,.13);color:var(--warn);border-color:rgba(255,176,32,.3)}
.pill.rejected,.pill.lose{background:rgba(255,90,78,.13);color:var(--bad);border-color:rgba(255,90,78,.3)}

/* ---------- поиск и кнопки-призраки ---------- */
.filters .field.search input{background:rgba(255,255,255,.04);border:1px solid var(--adm-line-2);
  border-radius:9px;height:36px;padding:0 12px;color:var(--adm-ink);outline:none}
.filters .field.search input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,210,0,.1)}
.btn-ghost{border:1px solid var(--adm-line);transition:border-color .15s,background .15s,color .15s}
.btn-ghost:hover{border-color:var(--adm-line-2);background:rgba(150,168,210,.06);color:var(--adm-ink)}

/* ---------- у кого выключена анимация ---------- */
@media (prefers-reduced-motion:reduce){
  .card:hover,.mini:hover{transform:none}
}