/* Турнирный модуль finargot.ru — общая оболочка, формы, таблицы.
   Палитра снята с сайта (нефритовый акцент, «чернильный» фон), но страница
   самостоятельная: её выводят на проектор и печатают, поэтому светлая тема
   здесь полноценная, а не инверсия тёмной. */

@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/onest-400-cyrillic.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/onest-400-latin.woff2) format("woff2")}
@font-face{font-family:Onest;font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/onest-500-cyrillic.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/onest-500-latin.woff2) format("woff2")}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/onest-600-cyrillic.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/onest-600-latin.woff2) format("woff2")}
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/onest-700-cyrillic.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/onest-700-latin.woff2) format("woff2")}

:root{
  color-scheme: light dark;
  accent-color: light-dark(#0e8f66, #34d399);

  --bg:        light-dark(#f4f7f5, #070b09);
  --bg-soft:   light-dark(#ffffff, #0c1310);
  --panel:     light-dark(#ffffff, #0e1613);
  --panel-2:   light-dark(#f7faf8, #121b18);
  --line:      light-dark(#dde5e0, #1e2a25);
  --line-hi:   light-dark(#c6d3cc, #2b3a34);
  --txt:       light-dark(#0e1a16, #dde5e1);
  --txt-dim:   light-dark(#5b6b64, #93a29c);
  --txt-mute:  light-dark(#7d8a85, #6e7c77);
  --acc:       light-dark(#0e8f66, #34d399);
  --acc-soft:  light-dark(#e6f6ef, #10241c);
  --acc-line:  light-dark(#9ad9bf, #1f6b4e);
  --warn:      light-dark(#b4620a, #f0a34a);
  --bad:       light-dark(#c03c62, #e0568f);
  --live:      light-dark(#0e8f66, #34d399);

  --r1: 4px; --r2: 8px; --r3: 14px;
  --shadow: 0 1px 2px light-dark(#0e1a1614, #00000055), 0 8px 28px light-dark(#0e1a160f, #00000040);

  --font: Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace;
}
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* .pane{display:grid} иначе перебивает атрибут */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:400 15px/1.5 var(--font);
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;                 /* сама страница по горизонтали не ездит */
  min-height:100dvh;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r1)}

/* ── шапка ───────────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-left));
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; color:var(--txt); font-weight:700; letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand svg{width:20px; height:20px; color:var(--acc)}
.brand span{color:var(--acc)}
.top-title{display:flex; align-items:baseline; gap:10px; min-width:0; flex:1}
.top-title h1{font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

/* ── атомы ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border:1px solid var(--line-hi); border-radius:var(--r2);
  background:var(--panel); color:var(--txt); font:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled){border-color:var(--acc); color:var(--acc)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--acc); border-color:var(--acc); color:light-dark(#fff,#04120c); font-weight:600}
.btn.primary:hover:not(:disabled){filter:brightness(1.08); color:light-dark(#fff,#04120c)}
.btn.danger{color:var(--bad); border-color:color-mix(in oklab, var(--bad) 40%, var(--line))}
.btn.danger:hover:not(:disabled){background:color-mix(in oklab, var(--bad) 12%, transparent); color:var(--bad)}
.btn.icon{padding:7px 9px}
.btn.sm{padding:4px 8px; font-size:12.5px}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600;
  border:1px solid var(--line-hi); color:var(--txt-dim); background:var(--panel-2);
}
.chip.acc{color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft)}
.chip.warn{color:var(--warn); border-color:color-mix(in oklab, var(--warn) 40%, var(--line))}
.chip.bad{color:var(--bad); border-color:color-mix(in oklab, var(--bad) 40%, var(--line))}

.dot{width:7px; height:7px; border-radius:99px; background:var(--live); flex:none}
.live .dot{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .live .dot{animation:none} *{transition-duration:.01ms !important} }

.mono{font-family:var(--mono); font-size:.92em; letter-spacing:-.01em}
.muted{color:var(--txt-mute)}
.dim{color:var(--txt-dim)}

input[type=text],input[type=password],input[type=number],select,textarea{
  padding:7px 10px; border:1px solid var(--line-hi); border-radius:var(--r2);
  background:var(--bg-soft); color:var(--txt); font:inherit; font-size:14px; width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--acc); outline:none}
label{display:block; font-size:12.5px; font-weight:600; color:var(--txt-dim); margin-bottom:4px}

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--shadow);
}
.panel > h2{
  padding:14px 16px; border-bottom:1px solid var(--line); font-size:15px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.panel > .body{padding:16px}
.grid{display:grid; gap:12px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-weight:600; color:var(--txt-dim); font-size:12px; text-transform:uppercase;
   letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--line); position:sticky; top:0;
   background:var(--panel); z-index:1}
td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:hover{background:var(--panel-2)}

/* ── уведомления ─────────────────────────────────────────────────────────── */
#toasts{position:fixed; z-index:90; right:16px; bottom:16px; display:flex; flex-direction:column;
        gap:8px; max-width:min(420px, calc(100vw - 32px))}
.toast{
  padding:11px 14px; border-radius:var(--r2); border:1px solid var(--line-hi);
  background:var(--panel); box-shadow:var(--shadow); font-size:13.5px; line-height:1.4;
}
.toast.ok{border-color:var(--acc-line); background:var(--acc-soft)}
.toast.err{border-color:color-mix(in oklab, var(--bad) 45%, var(--line))}

dialog{
  border:1px solid var(--line-hi); border-radius:var(--r3); background:var(--panel); color:var(--txt);
  padding:0; max-width:min(520px, calc(100vw - 32px)); box-shadow:var(--shadow);
}
dialog::backdrop{background:light-dark(#0e1a1655, #000000aa); backdrop-filter:blur(2px)}
dialog .body{padding:18px}
dialog h3{font-size:16px; margin-bottom:8px}
dialog p{margin:0 0 14px; color:var(--txt-dim); font-size:14px; line-height:1.55}

.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:99; padding:8px 12px; background:var(--panel);
            border:1px solid var(--acc); border-radius:var(--r2)}

/* ── телефон: шапка не должна съедать пол-экрана ─────────────────────────── */
@media (max-width:640px){
  .top{gap:8px; padding:8px 12px}
  .top .brand{font-size:14px}
  .top .brand svg{width:17px; height:17px}
  .top-title h1{font-size:14px}
  .btn{padding:6px 10px; font-size:13px}
  .btn.sm{padding:4px 7px; font-size:12px}
  .chip{padding:2px 8px; font-size:11.5px}
  #print{display:none}
  .panel > h2{padding:12px 13px}
  .panel > .body{padding:13px}
}

@media print{
  :root{color-scheme:light}
  .top,.no-print,#toasts,dialog{display:none !important}
  body{background:#fff}
}