/* ============================================================
   АДМИНКА — стиль SMT Diamond, продолжение колеса

   Материалы те же три, что в эфире: ЧЁРНОЕ СТЕКЛО (панели),
   ПЛАТИНА (заголовки и обводки), НЕОН РЕДКОСТИ (единственный цвет,
   и тот приходит из данных рулетки). Шрифты только системные,
   картинок нет: и фон, и фактура рисуются кодом — обращений в чужую
   сеть отсюда быть не может (CSP сервера это же и запрещает).

   Экран владельца — часто телефон 375 px в руке, поэтому базовая
   вёрстка одноколоночная, а две колонки появляются от 1000 px.
   ============================================================ */
:root{
  color-scheme: dark;

  --bg:#04050a;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(196,214,240,.14);
  --line-2:rgba(206,224,248,.28);
  --text:#eef3fa;
  --muted:#93a2b6;
  --metal:#d6dee9;

  --ice:#8fd8ff;
  --ok:#34d399;
  --warn:#f59e0b;
  --err:#fb7185;

  --r-sm:9px; --r-md:13px; --r-lg:18px;

  --font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-num:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* высота зоны нажатия: палец на телефоне промахивается по мелочи */
  --tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
/* студийный фон — тот же холодный туман, что за колесом */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120vw 70vh at 50% -10%, rgba(150,182,220,.10), transparent 62%),
    radial-gradient(90vw 60vh at 8% 96%, rgba(96,124,164,.07), transparent 64%),
    radial-gradient(130vw 100vh at 50% 45%, rgba(12,16,24,.75), rgba(2,3,6,.99) 74%);
}
[hidden]{display:none !important}

/* ---------- платиновая типографика ---------- */
h1,h2,h3{
  margin:0; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(180deg,#ffffff 0%,#dfe8f4 42%,#a9b8cb 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1{font-size:19px}
h2{font-size:15px}
h3{font-size:13px; letter-spacing:.10em}
.muted{color:var(--muted)}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.tiny{font-size:12.5px; line-height:1.45}

/* ---------- панели ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px;
  backdrop-filter:blur(8px);
}
.panel + .panel{margin-top:14px}
.panel-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px;
}
.panel-head .grow{flex:1 1 auto}

/* ---------- кнопки ---------- */
button, .btn{
  font:inherit; font-size:14px; font-weight:550;
  min-height:var(--tap); padding:10px 15px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color:var(--text); text-decoration:none;
  transition:border-color .16s, background .16s, transform .08s;
}
button:hover, .btn:hover{border-color:rgba(143,216,255,.55); background:rgba(143,216,255,.10)}
button:active, .btn:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:default; transform:none}
:focus-visible{outline:2px solid var(--ice); outline-offset:2px}

.btn-main{
  border-color:rgba(143,216,255,.5);
  background:linear-gradient(180deg, rgba(143,216,255,.22), rgba(143,216,255,.08));
  color:#eaf7ff;
}
.btn-danger{border-color:rgba(251,113,133,.45); color:#ffd9df}
.btn-danger:hover{border-color:var(--err); background:rgba(251,113,133,.14)}
.btn-small{min-height:36px; padding:6px 11px; font-size:13px}
/* квадратная кнопка-иконка: стрелки порядка, удаление строки */
.btn-icon{min-height:var(--tap); width:var(--tap); padding:0; font-size:16px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- поля ---------- */
input, select, textarea{
  font:inherit; font-size:15px; width:100%;
  min-height:var(--tap); padding:9px 12px;
  color:var(--text); background:rgba(4,6,12,.75);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .16s, box-shadow .16s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:rgba(143,216,255,.6);
  box-shadow:0 0 0 3px rgba(143,216,255,.14);
}
input[type=color]{padding:3px; min-width:52px; cursor:pointer}
/* цвет в панели темы — квадратная плитка, а не поле во всю строку:
   растянутый input[type=color] читался как пустое белое поле */
#paramAccent{width:64px; min-width:64px}
textarea{min-height:76px; resize:vertical; line-height:1.45}
label{display:block; font-size:12.5px; letter-spacing:.05em; color:var(--muted); margin:0 0 5px}
.field{margin-bottom:12px}
.field-row{display:flex; gap:10px; flex-wrap:wrap}
.field-row > .field{flex:1 1 180px; margin-bottom:0}
/* поле в момент сохранения / после него */
.saving{border-color:rgba(143,216,255,.55) !important}
.saved{border-color:rgba(52,211,153,.65) !important}
.failed{border-color:var(--err) !important}

/* переключатель «в игре / выключен» */
.toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  min-height:var(--tap); user-select:none;
}
.toggle input{width:auto; min-height:0; margin:0; accent-color:#8fd8ff; width:20px; height:20px}

/* ---------- вход ---------- */
#login{
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
}
#login .panel{width:min(400px,100%); padding:26px 24px; text-align:center}
#login .lead{margin:6px 0 20px; color:var(--muted); font-size:14px}
.err-line{color:var(--err); font-size:13.5px; margin:10px 0 0; min-height:20px}

/* ---------- шапка ---------- */
#topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  background:rgba(4,5,10,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
#topbar .grow{flex:1 1 auto; min-width:0}
#crumbTitle{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:520px){
  #crumbTitle{font-size:15px}
  #topbar{gap:8px; padding:9px 12px}
  main{padding:12px}
  .panel{padding:14px}
}
#crumb{
  display:block; font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
main{padding:16px; max-width:1500px; margin:0 auto}

/* ---------- список рулеток ---------- */
.wheel-grid{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:760px){ .wheel-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))} }
.wheel-card .sign{
  font-size:13px; color:var(--ice); letter-spacing:.08em; text-transform:uppercase;
  margin:2px 0 10px;
}
.wheel-card .stats{
  display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted);
  padding:10px 0; margin:0 0 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.wheel-card .stats span{white-space:nowrap}   /* «призов 9 из 9» не рвётся пополам */
.wheel-card .stats b{color:var(--text); font-family:var(--font-num)}
.wheel-card .stats .last{flex:1 1 100%; font-size:12.5px}
.group-label{
  margin:14px 0 7px; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
}
@media (min-width:760px){ .wheel-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))} }

/* ---------- сигнатура: круг, развёрнутый в линию ----------
   Каждый приз занимает ровно свою долю ширины в цвете своей редкости.
   Это тот же расклад, что уедет в эфир: расхождение видно глазом, не
   заглядывая в предпросмотр. */
.ring-bar{
  display:flex; height:12px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  margin:0 0 6px;
}
.ring-bar i{display:block; min-width:1px; transition:flex-grow .25s ease}
.ring-legend{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); margin:0 0 14px;
}
.total{font-family:var(--font-num); font-size:15px; font-weight:650}
.total.ok{color:var(--ok)}
.total.bad{color:var(--warn)}

/* ---------- таблица призов ----------
   На широком экране — таблица, на телефоне — карточки: подписи полей
   подставляются из data-label, горизонтальной прокрутки нет вовсе. */
.prizes{width:100%; border-collapse:collapse}
.prizes th{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  text-align:left; font-weight:600; padding:0 8px 8px;
}
.prizes td{padding:6px 8px; vertical-align:middle; border-top:1px solid var(--line)}
.prizes tr.off{opacity:.5}
.prizes .c-icon{width:74px}
.prizes .c-name{min-width:210px}
.prizes .f-note{margin-top:5px; font-size:13px; min-height:36px; color:var(--muted)}
.prizes .c-tier{width:150px}
.prizes .c-pct{width:104px}
.prizes .c-stock{width:120px}
.prizes .c-on{width:70px; text-align:center}
.prizes .c-ord{width:104px}
.cell-note{width:100%}
.icon-btn{
  font-size:22px; line-height:1; min-height:var(--tap); width:100%;
  background:rgba(4,6,12,.75); border:1px solid var(--line); border-radius:var(--r-sm);
}
.pct-input{font-family:var(--font-num); text-align:right}
.tier-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:7px; vertical-align:middle;
}

@media (max-width:899px){
  .prizes, .prizes tbody, .prizes tr, .prizes td{display:block; width:auto}
  /* ширины колонок — только для настоящей таблицы: в карточке они бы
     сжали поля до нечитаемых квадратиков */
  .prizes .c-icon, .prizes .c-name, .prizes .c-tier,
  .prizes .c-pct, .prizes .c-stock, .prizes .c-on, .prizes .c-ord{width:auto; min-width:0}
  .prizes thead{display:none}
  .prizes tr{
    border:1px solid var(--line); border-radius:var(--r-md);
    padding:12px; margin:0 0 12px; background:rgba(255,255,255,.02);
  }
  .prizes td{
    border:0; padding:6px 0;
    display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center;
  }
  .prizes td::before{
    content:attr(data-label); font-size:12px; color:var(--muted); letter-spacing:.04em;
  }
  .prizes td.wide{grid-template-columns:1fr}
  .prizes td.wide::before{margin-bottom:4px}
  /* значок и переключатель прижаты влево: растянутые на всю ширину они
     выглядели бы как поле ввода, которым не являются */
  .prizes .c-icon .icon-btn{width:64px}
  .prizes .c-on .toggle{justify-content:flex-start}
  .prizes .c-ord .btn-row{justify-content:flex-start}
}

/* ---------- редкости ---------- */
.tier-row{
  display:grid; grid-template-columns:1fr 92px 56px 56px; gap:8px; align-items:center;
  padding:7px 0; border-top:1px solid var(--line);
}
.tier-row:first-of-type{border-top:0}
@media (max-width:520px){
  .tier-row{grid-template-columns:1fr 84px 48px 48px; gap:6px}
}

/* ---------- журнал ---------- */
.drops{width:100%; border-collapse:collapse; font-size:14px}
.drops th{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  text-align:left; font-weight:600; padding:0 8px 8px;
}
.drops td{padding:8px; border-top:1px solid var(--line); vertical-align:middle}
.drops .c-when{width:150px; color:var(--muted); font-family:var(--font-num); font-size:13px}
.drops .c-del{width:56px; text-align:right}
.tier-chip{
  display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px;
  border:1px solid currentColor; opacity:.9;
}
@media (max-width:640px){
  .drops .c-when{width:auto}
  .drops thead{display:none}
  .drops tr{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-top:1px solid var(--line)}
  .drops td{display:block; padding:0; border:0}
  .drops .c-del{grid-column:2; grid-row:1 / span 3; align-self:center}
}

/* ---------- участники (колесо участников) ----------
   Сотни имён — сеткой коротких строк в прокрутке, а не простынёй на
   весь экран: блоки ниже (тема, журнал) остаются рядом. */
.people-count{font-family:var(--font-num); font-size:13px; color:var(--muted)}
.add-one{display:flex; gap:8px; align-items:flex-end; margin:14px 0 12px}
.add-one .field{flex:1 1 auto; margin-bottom:0}
.add-one button{min-height:var(--tap)}
.people{
  list-style:none; margin:0 0 4px; padding:0;
  display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  max-height:360px; overflow:auto; overscroll-behavior:contain;
}
.people li{
  display:flex; align-items:center; gap:6px; min-width:0;
  padding:3px 3px 3px 11px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.025);
}
.people .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
.people .when{flex:0 0 auto; font-family:var(--font-num); font-size:11.5px; color:var(--muted)}
.people .btn-icon{min-height:34px; width:34px; font-size:13px}
.people .act-return{min-height:34px; padding:4px 9px; font-size:12.5px}
.people.winners{grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); max-height:260px}
.people.winners li{border-color:rgba(255,196,81,.28); background:rgba(255,196,81,.05)}
/* у колеса участников «кто» и «что» — одно и то же: оставляем одну колонку */
.drops.people-mode .c-who{display:none}

/* ---------- конкурс в Telegram ----------
   Светофор бота — цветом И словом (дальтоник прочтёт по слову), окно
   сбора — рамкой: пока идёт сбор, блок зелёный и точка пульсирует. */
.tg-badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px;
  font-size:12.5px; white-space:nowrap; color:var(--muted); border:1px solid var(--line-2);
}
.tg-badge::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.tg-badge[data-level="ok"]{color:var(--ok); border-color:rgba(52,211,153,.45)}
.tg-badge[data-level="warn"]{color:var(--warn); border-color:rgba(245,158,11,.45)}
.tg-badge[data-level="err"]{color:var(--err); border-color:rgba(251,113,133,.5)}
.tg-line{margin:0 0 14px; font-size:14px; color:#cdd8e6}
.tg-bind{display:flex; gap:8px; align-items:stretch}
.tg-bind select{flex:1 1 auto; min-width:0}
.tg-bind button{flex:0 0 auto; min-height:var(--tap)}
@media (max-width:640px){ .tg-bind{flex-direction:column} }
.contest-box{
  margin-top:4px; padding:14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:rgba(255,255,255,.025);
  transition:border-color .2s ease, background .2s ease;
}
.contest-box[data-on="1"]{border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.06)}
.contest-state{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; font-size:15px}
.contest-dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--muted)}
.contest-box[data-on="1"] .contest-dot{background:var(--ok); animation:beat 1.6s ease-out infinite}
@keyframes beat{
  from{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  to{box-shadow:0 0 0 10px rgba(52,211,153,0)}
}
.contest-state .grow{flex:1 1 auto}
.contest-count{font-size:13px; color:var(--muted); white-space:nowrap}
.contest-count b{font-family:var(--font-num); font-size:20px; color:var(--text); margin-right:2px}
#contestWhen{margin:-4px 0 10px}
.contest-box .btn-row button{flex:1 1 160px; min-height:var(--tap)}

/* ---------- предпросмотр ---------- */
.preview-frame{
  position:relative; width:100%; aspect-ratio:16 / 9;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:#04050a;
}
/* рамка показывает НАСТОЯЩИЙ кадр эфира 1280×720, уменьшенный целиком:
   иначе сцена свёрсталась бы под ширину рамки и врала бы про эфир */
.preview-frame iframe{
  position:absolute; top:0; left:0; border:0;
  width:1280px; height:720px;
  transform-origin:0 0;
  transform:scale(var(--pv-scale, .3));
}
.layout{display:grid; gap:14px; grid-template-columns:1fr; align-items:start}
@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 420px}
  .layout .col-side{position:sticky; top:74px}
  /* на широком экране предпросмотр всегда развёрнут */
  #previewBox{display:block}
  #previewToggle{display:none}
}
/* на телефоне предпросмотр свёрнут: колесо в рамке — тяжёлая сцена,
   а владельцу с телефона чаще нужны цифры, а не картинка */
@media (max-width:999px){
  #previewToggle:not([open]) ~ #previewBox{display:none}
}
details.fold > summary{
  cursor:pointer; min-height:var(--tap); display:flex; align-items:center; gap:8px;
  font-size:14px; list-style:none;
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"▸"; color:var(--ice); transition:transform .18s}
details.fold[open] > summary::before{transform:rotate(90deg)}

/* ---------- ключ рулетки ---------- */
.keyline{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-num); font-size:13px; color:var(--muted);
  word-break:break-all;
}

/* ---------- уведомления ---------- */
/* ---------- панель «Тема» ---------- */
.theme-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
/* Карточка = картинка + имя + подпись. Выбор — обычная радиокнопка:
   работает с клавиатуры и читается экранным диктором, а сама кнопка
   спрятана — её роль играет рамка карточки. */
.theme-card{
  position:relative;
  display:flex; flex-direction:column; gap:4px;
  padding:8px; border-radius:var(--r-md); cursor:pointer;
  /* карточка — это <label>, а глобальный label приглушён: имя темы
     обязано читаться как заголовок, а не как подпись к полю */
  color:var(--text); font-size:14px; letter-spacing:normal; margin:0;
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.theme-card:hover{border-color:var(--line-2); background:var(--panel-2)}
.theme-card input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.theme-card img{
  width:100%; height:auto; display:block; border-radius:var(--r-sm);
  background:#05070c;
}
.theme-card b{font-size:14px; font-weight:650; margin-top:2px}
.theme-card.on{
  border-color:var(--ice);
  background:rgba(143,216,255,.10);
  box-shadow:0 0 0 1px rgba(143,216,255,.45), 0 0 26px rgba(143,216,255,.12);
}
.theme-card:focus-within{outline:2px solid var(--ice); outline-offset:2px}

/* палитра фона: цвета берутся из самой темы, произвольного цвета тут нет */
.swatch-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; min-height:var(--tap)}
.swatch{
  width:36px; height:36px; min-height:36px; padding:0; border-radius:50%;
  border:1px solid var(--line-2); cursor:pointer;
}
.swatch.on{box-shadow:0 0 0 2px var(--ice); border-color:transparent}
input[type=range]{
  width:100%; min-height:var(--tap); accent-color:#8fd8ff; padding:0;
  background:transparent; border:none;
}

#toasts{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center;
  width:min(520px, calc(100vw - 24px)); pointer-events:none;
}
.toast{
  width:100%; padding:11px 15px; border-radius:var(--r-md); font-size:14px;
  background:rgba(10,14,22,.96); border:1px solid var(--line-2);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:rise .2s ease both;
}
.toast.ok{border-color:rgba(52,211,153,.5)}
.toast.err{border-color:rgba(251,113,133,.55)}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- подтверждение опасного действия ---------- */
dialog{
  width:min(440px, calc(100vw - 32px));
  padding:22px; border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:#080a10; color:var(--text);
}
dialog::backdrop{background:rgba(2,3,6,.72)}
dialog p{margin:10px 0 0; font-size:14.5px; color:#cdd8e6}
dialog .why{
  margin-top:12px; padding:11px 13px; border-radius:var(--r-sm);
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.32);
  font-size:13.5px; color:#ffe4b5;
}
dialog .btn-row{margin-top:18px; justify-content:flex-end}

/* ---------- сетка эмодзи ---------- */
.emoji-pop{
  position:absolute; z-index:50; width:min(288px, calc(100vw - 24px));
  padding:10px; border-radius:var(--r-md);
  background:#080a10; border:1px solid var(--line-2); box-shadow:0 14px 36px rgba(0,0,0,.6);
  display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
}
.emoji-pop button{font-size:21px; min-height:40px; padding:0; border-color:transparent; background:transparent}
.emoji-pop button:hover{background:rgba(143,216,255,.12)}

.empty{padding:26px 12px; text-align:center; color:var(--muted); font-size:14px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}