/* Конвертер заявок CombatFlow — строгое тёмное оформление. Общий файл для index.html и login.html. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/cormorant-garamond-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/cormorant-garamond-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/cormorant-garamond-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/manrope-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/manrope-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #0a0c10; --surface: #12151c; --surface-2: #181c25; --field: #0e1117;
  --ink: #eceae4; --soft: #8e95a6; --faint: #5a6172;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --red: #dd091b; --red-hi: #ff3a47; --gold: #c9b27c;
  --warn: rgba(214, 168, 62, .13); --warn-edge: #d6a83e; --err: rgba(221, 9, 27, .15); --ok: #6fcf97;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 14.5px/1.6 var(--font-body); position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Обои: живые линии (рисует bg.js), мягкие цветные пятна и зерно */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(221, 9, 27, .16), transparent 70%),
    radial-gradient(50% 45% at 8% 92%, rgba(201, 178, 124, .09), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .6), transparent 60%);
  animation: breathe 14s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .7; transform: scale(1.04); } }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Полоса загрузки сверху */
.sweep { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 50; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--red-hi) 40%, var(--gold) 60%, transparent); transform: translateX(-100%); }
.sweep.run { opacity: 1; animation: sweep .9s var(--ease) forwards; }
@keyframes sweep { to { transform: translateX(100%); opacity: 0; } }

main { max-width: 1180px; margin: 0 auto; padding: 48px 20px 90px; }
main.wide { max-width: 1700px; }

/* Шапка */
.brand { margin-bottom: 36px; position: relative; }
.eyebrow { font: 600 .68rem/1 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold); transform-origin: left; animation: grow 1.1s var(--ease) .1s both; }
@keyframes grow { from { transform: scaleX(0); } }
h1 { font: 300 clamp(2.6rem, 6vw, 4.6rem)/.98 var(--font-display); letter-spacing: -.01em; margin: 0 0 22px; }
h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.belt { height: 1px; width: min(420px, 80%); background: linear-gradient(90deg, var(--red) 0%, var(--red) 18%, var(--line-2) 18%, transparent 100%); position: relative; overflow: hidden; }
.belt::after { content: ''; position: absolute; inset: -1px 0; width: 60px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .85; transform: translateX(-80px); animation: glint 6s ease-in-out 1.5s infinite; }
@keyframes glint { 0%, 55% { transform: translateX(-80px); } 100% { transform: translateX(480px); } }
.sub { color: var(--soft); margin: 22px 0 0; max-width: 58ch; font-size: .95rem; }
.logout { position: absolute; right: 0; top: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); text-decoration: none; padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; transition: color .2s, border-color .2s, background .2s; }
.logout:hover { color: var(--ink); border-color: var(--red); background: rgba(221, 9, 27, .1); }

/* Карточки: тонкая рамка, подсветка под курсором */
.card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; margin-bottom: 18px;
  animation: rise .8s var(--ease) both; transition: border-color .3s; }
.card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 58, 71, .55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card:hover::before { opacity: 1; }
.card:nth-of-type(2) { animation-delay: .1s; } .card:nth-of-type(3) { animation-delay: .2s; } .card:nth-of-type(4) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.card h2 { font: 400 1.55rem/1.1 var(--font-display); letter-spacing: 0; margin: 0 0 20px; display: flex; align-items: baseline; gap: 14px; }
.card h2 .n { font: 600 .68rem var(--font-body); letter-spacing: .2em; color: var(--red-hi); font-variant-numeric: tabular-nums; padding-right: 14px; border-right: 1px solid var(--line-2); }
.card h2 .n::before { content: '0'; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
label.f { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
input[type=text], select, input:not([type]), input[type=number], input[type=password] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s, background .2s; }
input:hover, select:hover { border-color: var(--line-2); }
input:focus, select:focus { outline: none; border-color: var(--red-hi); box-shadow: 0 0 0 3px rgba(221, 9, 27, .18); }
input::placeholder { color: var(--faint); }
select option { background: var(--surface); color: var(--ink); }

/* Зона загрузки */
.drop { position: relative; border-radius: 12px; padding: 54px 16px; text-align: center; color: var(--soft); cursor: pointer; overflow: hidden;
  background: radial-gradient(60% 120% at 50% 0%, rgba(255, 255, 255, .035), transparent 70%), var(--field);
  border: 1px dashed var(--line-2); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.drop::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .06) 50%, transparent 65%); transform: translateX(-120%); transition: none; }
.drop:hover::before { transform: translateX(120%); transition: transform 1.1s var(--ease); }
.drop::after { content: ''; position: absolute; left: 50%; bottom: 0; height: 2px; width: 0; background: var(--red-hi); transform: translateX(-50%); transition: width .5s var(--ease); }
.drop:hover::after, .drop.over::after { width: 70%; }
.drop b { display: block; color: var(--ink); font: 400 1.7rem/1.2 var(--font-display); margin: 14px 0 6px; }
.drop span { font-size: .85rem; }
.drop .ico { width: 40px; height: 40px; color: var(--gold); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.drop:hover, .drop.over { border-color: var(--red-hi); }
.drop.over { transform: scale(1.01); background: radial-gradient(60% 120% at 50% 0%, rgba(221, 9, 27, .16), transparent 70%), var(--field); }

/* Кнопки */
button { font: inherit; font-weight: 500; font-size: .88rem; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: transform .15s, border-color .2s, background .2s, box-shadow .25s; }
button:hover:not(:disabled) { border-color: var(--ink); background: rgba(255, 255, 255, .05); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:focus-visible, a:focus-visible, summary:focus-visible, .drop:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }
button.primary { background: var(--ink); color: #0a0c10; border-color: var(--ink); font-weight: 600; }
button.primary:hover:not(:disabled) { background: #fff; box-shadow: 0 8px 30px -10px rgba(255, 255, 255, .5); }
button.big { position: relative; overflow: hidden; padding: 14px 30px; background: var(--red); border-color: var(--red); color: #fff; font: 600 .78rem var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
button.big::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); }
button.big:hover:not(:disabled) { background: var(--red-hi); border-color: var(--red-hi); box-shadow: 0 12px 36px -10px rgba(221, 9, 27, .8); }
button.big:hover:not(:disabled)::after { transform: translateX(120%); transition: transform .8s var(--ease); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.sm { padding: 6px 12px; font-size: .78rem; }

.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 10px; font-size: .88rem; cursor: pointer; color: var(--soft); }
.chk:hover { color: var(--ink); }
input[type=checkbox] { accent-color: var(--red); width: 16px; height: 16px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.note { font-size: .78rem; color: var(--faint); }
.tag { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; color: var(--soft); border: 1px solid var(--line); }
[hidden] { display: none !important; }

details.sheet { border-top: 1px solid var(--line); padding: 12px 0; }
details.sheet:first-of-type { border-top: 0; }
details.sheet summary { cursor: pointer; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }

/* Статистика: крупные цифры, набегают при изменении */
.stats { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; width: fit-content; max-width: 100%; }
.stats span { padding: 12px 24px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.stats span:last-child { border-right: 0; }
.stats b { font: 300 2rem/1 var(--font-display); letter-spacing: 0; color: var(--ink); text-transform: none; font-variant-numeric: tabular-nums; }
.stats b.ok { color: var(--ok); }
.stats b.bad { color: var(--red-hi); }

#bulk { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
#bulk input, #bulk select { width: auto; padding: 7px 10px; }
details.report { margin: 10px 0 16px; font-size: .85rem; }
details.report summary { cursor: pointer; color: var(--soft); }
details.report summary:hover { color: var(--ink); }
details.report table { min-width: 0; width: auto; margin-top: 8px; }
details.report td, details.report th { padding: 3px 14px 3px 0; position: static; border: 0; }

/* Таблица */
.tablewrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 3px 4px; text-align: left; vertical-align: middle; }
th { font-size: .64rem; color: var(--faint); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; position: sticky; top: 0; z-index: 2; background: var(--surface-2); user-select: none; padding: 12px 8px; }
th[data-sort] { cursor: pointer; transition: color .2s; }
th[data-sort]:hover { color: var(--ink); }
th.sorted { color: var(--red-hi); }
td input[data-k], td select[data-k] { padding: 6px 8px; border-color: transparent; background: transparent; width: 100%; text-overflow: ellipsis; box-shadow: none; border-radius: 6px; }
td input[data-k]:hover, td select[data-k]:hover { border-color: var(--line-2); }
td input[data-k]:focus, td select[data-k]:focus { border-color: var(--red-hi); background: var(--surface); box-shadow: 0 0 0 3px rgba(221, 9, 27, .15); }
td input[data-k=last] { min-width: 150px; } td input[data-k=first] { min-width: 130px; }
td input[data-k=club] { min-width: 200px; } td input[data-k=weight] { min-width: 62px; }
td input[data-k=year] { min-width: 66px; } td select[data-k=gender] { min-width: 62px; }
td select[data-k=rank] { min-width: 235px; } td input[data-k=coach] { min-width: 230px; }
td input[data-k=phone] { min-width: 140px; }
td input[type=checkbox], th input[type=checkbox] { width: 16px; min-width: 0; }
td.msg { min-width: 240px; font-size: .74rem; color: var(--soft); }
td.src { font-size: .72rem; color: var(--faint); white-space: nowrap; }
td.rk { display: flex; align-items: center; gap: 4px; }
.belt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-left: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); transition: background .25s; }
tbody tr { transition: background .2s; }
tbody tr:hover td { background: rgba(255, 255, 255, .03); }
tr.warn td { background: var(--warn); }
tr.warn td:first-child { box-shadow: inset 3px 0 var(--warn-edge); }
tr.err td { background: var(--err); }
tr.err td:first-child { box-shadow: inset 3px 0 var(--red-hi); }
tr.enter { animation: rowin .55s var(--ease) both; }
@keyframes rowin { from { opacity: 0; transform: translateX(-18px); } }
.x { padding: 2px 8px; border-color: transparent; color: var(--faint); }
.x:hover:not(:disabled) { color: var(--red-hi); border-color: transparent; background: rgba(221, 9, 27, .12); }

/* Страница входа */
body.login { display: grid; place-items: center; padding: 20px; }
.login-card { position: relative; width: 100%; max-width: 440px; padding: 44px 40px 38px; background: rgba(18, 21, 28, .78); backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 18px; animation: rise 1s var(--ease) both; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); }
.login-card::before { content: ''; position: absolute; left: 40px; right: 40px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--red-hi), transparent); animation: grow 1.4s var(--ease) .3s both; }
.login-card h1 { font-size: 3rem; margin-bottom: 18px; }
.login-card p { margin: 20px 0 8px; color: var(--soft); font-size: .9rem; }
.login-card label { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 20px 0 6px; }
.login-card > * { animation: rise .9s var(--ease) both; }
.login-card > :nth-child(2) { animation-delay: .08s; } .login-card > :nth-child(3) { animation-delay: .16s; } .login-card > :nth-child(4) { animation-delay: .24s; }
.login-card > :nth-child(n+5) { animation-delay: .32s; }
.login-card button { width: 100%; margin-top: 28px; }
.err { color: var(--red-hi); font-size: .85rem; margin-top: 14px; animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

@media (max-width: 640px) { main { padding: 28px 14px 60px; } .card { padding: 18px 16px; } .logout { position: static; display: inline-block; margin-bottom: 18px; } .stats span { padding: 10px 14px; } .login-card { padding: 32px 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }