/* =========================================================================
   DESIGN TOKENS — three-layer system (primitive → semantic → component)
   Фирменный стиль «Legend FM»: золото — primary/CTA/бренд, зелёное поле —
   отдельный success-токен (бейджи «одобрено»/VIP) и буквально цвет травы
   на тактическом поле, бирюзовое свечение прожекторов — атмосферный акцент
   на лендинге, красный — danger. Легаси-переменные (--bg, --surface, --text
   и т.п.) сохранены как алиасы — на них есть прямые ссылки из инлайн-стилей
   в HTML (admin.html, dashboard.html).
   ========================================================================= */
@font-face{font-family:'Oswald';font-weight:700;font-style:normal;font-display:swap;
  src:url(/fonts/Oswald_700_cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Oswald';font-weight:700;font-style:normal;font-display:swap;
  src:url(/fonts/Oswald_700_latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rubik';font-weight:400;font-style:normal;font-display:swap;
  src:url(/fonts/Rubik_400_cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Rubik';font-weight:400;font-style:normal;font-display:swap;
  src:url(/fonts/Rubik_400_latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rubik';font-weight:600;font-style:normal;font-display:swap;
  src:url(/fonts/Rubik_600_cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Rubik';font-weight:600;font-style:normal;font-display:swap;
  src:url(/fonts/Rubik_600_latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* ---- Primitive: neutrals ---- */
  --gray-950:#050810; --gray-900:#0a0f1c; --gray-850:#0e1526; --gray-800:#121b2e;
  --gray-750:#161f35; --gray-700:#182140; --gray-650:#1c2748; --gray-600:#22304f;
  --gray-500:#34426b; --gray-400:#5c6683; --gray-300:#8b93a7; --gray-100:#edeff3;

  /* ---- Primitive: brand green (pitch) ---- */
  --green-800:#163a26; --green-700:#215e3d; --green-600:#2f8a4f; --green-500:#3ba55c;
  --green-400:#45bd68; --green-300:#6fd08c;

  /* ---- Primitive: gold (accent / admin) ---- */
  --gold-700:#a9812a; --gold-600:#c2952f; --gold-500:#d4a73c; --gold-400:#e0bc5f; --gold-300:#e9cf8c;

  /* ---- Primitive: red (danger) ---- */
  --red-600:#b53c3c; --red-500:#d64545; --red-400:#e26a6a; --red-300:#f08a8a;

  /* ---- Primitive: teal (прожекторы — атмосферный акцент лендинга) ---- */
  --teal-600:#0d9488; --teal-500:#14b8a6; --teal-300:#5eead4; --teal-100:#eafbf8;

  /* ---- Primitive: typography ---- */
  --font-display:'Oswald','Rubik',sans-serif;
  --font-body:'Rubik',system-ui,-apple-system,sans-serif;
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.8125rem; --text-base:.875rem;
  --text-md:.9375rem; --text-lg:1rem; --text-xl:1.0625rem; --text-2xl:1.375rem;
  --text-3xl:1.75rem; --text-5xl:3rem;
  --leading-tight:1.1; --leading-snug:1.4; --leading-normal:1.6;

  /* ---- Primitive: spacing (4px base) ---- */
  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px;
  --space-3:12px; --space-3-5:14px; --space-4:16px; --space-4-5:18px; --space-5:20px;
  --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px;
  --space-16:64px; --space-20:80px;

  /* ---- Primitive: radius / shadow / motion ---- */
  --radius-xs:3px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-full:999px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.28); --shadow-sm:0 2px 6px rgba(0,0,0,.28);
  --shadow-md:0 6px 16px rgba(0,0,0,.32); --shadow-lg:0 16px 40px rgba(0,0,0,.4);
  --duration-fast:.12s; --duration-base:.18s; --ease:cubic-bezier(.4,0,.2,1);

  /* ---- Semantic ---- */
  --color-bg:var(--gray-900); --color-bg-elevated:var(--gray-850);
  --color-surface:var(--gray-800); --color-surface-hover:var(--gray-750);
  --color-surface-2:var(--gray-700); --color-surface-2-hover:var(--gray-650);
  --color-border:var(--gray-600); --color-border-strong:var(--gray-500);
  --color-text:var(--gray-100); --color-text-muted:var(--gray-300); --color-text-dim:var(--gray-400);
  --color-text-inverse:#08150c;

  /* Primary/CTA/бренд — золото (см. решение по редизайну: логотип LEGEND FM,
     прожекторы). Зелёное поле — больше не primary, а отдельный success. */
  --color-primary:var(--gold-500); --color-primary-hover:var(--gold-400);
  --color-primary-active:var(--gold-600); --color-primary-subtle:rgba(212,167,60,.15);

  --color-accent:var(--gold-500); --color-accent-subtle:rgba(212,167,60,.15);

  --color-success:var(--green-500); --color-success-hover:var(--green-400);
  --color-success-subtle:rgba(59,165,92,.14);

  --color-danger:var(--red-500); --color-danger-hover:var(--red-400);
  --color-danger-subtle:rgba(214,69,69,.12);

  --color-focus-ring:0 0 0 3px rgba(212,167,60,.35);

  /* Прожекторы — атмосферное свечение фона на лендинге (морская волна) */
  --glow-1:rgba(20,184,166,.24); --glow-2:rgba(110,231,214,.16);

  --container-max:1250px; --container-narrow-max:440px;

  /* ---- Legacy aliases (backward-compat, referenced inline in HTML) ---- */
  --bg:var(--color-bg); --surface:var(--color-surface); --surface2:var(--color-surface-2);
  --pitch:var(--green-700); --pitch-light:var(--color-success); --gold:var(--color-accent);
  --text:var(--color-text); --text-muted:var(--color-text-muted); --text-dim:var(--color-text-dim);
  --red:var(--color-danger); --border:var(--color-border);

  /* ---- Component: button ---- */
  --button-radius:var(--radius-xs); --button-font-size:var(--text-base);
  --button-padding-y:var(--space-2-5); --button-padding-x:var(--space-4-5);
  --button-padding-y-sm:var(--space-1-5); --button-padding-x-sm:var(--space-3); --button-font-size-sm:var(--text-xs);
  --button-bg:var(--color-surface-2); --button-fg:var(--color-text); --button-border:var(--color-border);
  --button-hover-bg:var(--color-surface-2-hover); --button-hover-border:var(--color-primary);
  --button-primary-bg:var(--color-primary); --button-primary-fg:var(--color-text-inverse);
  --button-primary-hover-bg:var(--color-primary-hover);
  --button-danger-bg:var(--color-danger); --button-danger-fg:#fff; --button-danger-hover-bg:var(--color-danger-hover);

  /* ---- Component: input ---- */
  --input-bg:var(--color-surface-2); --input-fg:var(--color-text); --input-border:var(--color-border);
  --input-radius:var(--radius-md); --input-padding-y:var(--space-2-5); --input-padding-x:var(--space-3);
  --input-focus-border:var(--color-primary); --input-placeholder:var(--color-text-dim);

  /* ---- Component: card ---- */
  --card-bg:var(--color-surface); --card-border:var(--color-border);
  --card-radius:var(--radius-lg); --card-padding:var(--space-6); --card-shadow:var(--shadow-sm);

  /* ---- Component: badge ---- */
  --badge-radius:var(--radius-full); --badge-padding-y:var(--space-0-5); --badge-padding-x:var(--space-2-5);
  --badge-font-size:var(--text-2xs); --badge-font-weight:700;

  /* ---- Component: table ---- */
  --table-header-fg:var(--color-text-dim); --table-border:var(--color-border);
  --table-cell-padding-y:var(--space-2-5); --table-cell-padding-x:var(--space-2-5); --table-row-hover-bg:var(--color-surface-hover);

  /* ---- Component: admin sidebar ---- */
  --sidebar-width:220px; --sidebar-item-hover-bg:var(--color-surface-2);
  --sidebar-item-active-bg:var(--color-primary-subtle); --sidebar-item-active-fg:var(--color-primary);
}

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

/* =========================================================================
   BASE
   ========================================================================= */
*{box-sizing:border-box;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:var(--text-lg); line-height:var(--leading-normal);
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display); letter-spacing:.5px; font-weight:400; line-height:var(--leading-tight); margin:0 0 var(--space-3);}
a{color:var(--color-primary); text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:var(--color-primary); color:var(--color-text-inverse);}

:focus-visible{outline:none; box-shadow:var(--color-focus-ring); border-radius:var(--radius-sm);}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3-5) var(--space-6); border-bottom:1px solid var(--color-border); background:var(--color-bg-elevated);
  position:sticky; top:0; z-index:10;
}
.nav-logo{
  font-family:var(--font-display); font-size:var(--text-2xl); letter-spacing:.03em; text-transform:uppercase;
  color:var(--color-text); text-decoration:none; display:inline-flex; align-items:center; gap:var(--space-2);
}
.nav-logo:hover{text-decoration:none;}
.fm-chip{
  display:inline-block; background:var(--color-primary); color:var(--color-text-inverse);
  padding:2px var(--space-2) 3px; font-size:.88em; clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);
}
.nav-links{display:flex; gap:var(--space-2-5); align-items:center;}

.container{max-width:var(--container-max); margin:0 auto; padding:var(--space-8) var(--space-5);}
.container-narrow{max-width:var(--container-narrow-max); margin:0 auto; padding:var(--space-12) var(--space-5);}

/* =========================================================================
   COMPONENTS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1-5);
  padding:var(--button-padding-y) var(--button-padding-x); border-radius:var(--button-radius);
  border:1px solid var(--button-border); background:var(--button-bg); color:var(--button-fg);
  font-size:var(--button-font-size); font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; text-decoration:none;
  transition:border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.btn:hover{border-color:var(--button-hover-border); background:var(--button-hover-bg); text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--button-primary-bg); border-color:var(--button-primary-bg); color:var(--button-primary-fg); font-weight:800;}
.btn-primary:hover{background:var(--button-primary-hover-bg); border-color:var(--button-primary-hover-bg); box-shadow:0 0 0 3px rgba(212,167,60,.28); transform:translateY(-1px);}
.btn-ghost{background:transparent;}
.btn-ghost:hover{background:var(--color-surface-2);}
.btn-danger{background:var(--button-danger-bg); border-color:var(--button-danger-bg); color:var(--button-danger-fg);}
.btn-danger:hover{background:var(--button-danger-hover-bg); border-color:var(--button-danger-hover-bg);}
.btn-sm{padding:var(--button-padding-y-sm) var(--button-padding-x-sm); font-size:var(--button-font-size-sm);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

.card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius);
  padding:var(--card-padding); box-shadow:var(--card-shadow);
}

/* Полноширинная секция-подложка (прожекторы/линии разметки тянутся во весь
   экран); .hero внутри — читаемая колонка по центру, без привязки к
   --container-max сайта. */
.hero-band{position:relative; width:100%; overflow:hidden; background:var(--color-bg);}
/* На десктопе лендинга растягиваем hero под тактическую доску — 3/4
   высоты экрана, контент центрируется по вертикали внутри. Не трогаем
   .hero-band-club (кабинет/страница клуба) — тот вариант короче по
   контенту и не должен раздуваться. */
body.page-landing .hero-band{display:flex; flex-direction:column; justify-content:center;}
@media(min-width:900px){ body.page-landing .hero-band{min-height:75vh;} }
.hero{position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; padding:var(--space-16) var(--space-5) var(--space-10);}
.hero h1{font-size:var(--text-5xl); margin:0 0 var(--space-3); text-transform:uppercase;}
.hero p{color:var(--color-text-muted); font-size:var(--text-md); max-width:560px; margin:0 auto var(--space-7); line-height:var(--leading-normal);}
.hero-actions{display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap;}
.hero-eyebrow{
  font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-300); margin-bottom:var(--space-3);
}

/* ---- Прожекторы: атмосферное свечение фона (только hero лендинга) ---- */
.hero-beam{
  position:absolute; top:-40%; width:38%; height:150%; pointer-events:none; z-index:0;
  background:conic-gradient(from 180deg at 50% 0%, transparent, var(--club-glow-1, var(--glow-1)), transparent 60%);
  animation:heroBeamPulse 7s ease-in-out infinite;
}
.hero-beam.left{left:-4%; transform:rotate(18deg);}
.hero-beam.right{right:-4%; transform:rotate(-18deg); animation-delay:1.4s; background:conic-gradient(from 180deg at 50% 0%, transparent, var(--club-glow-2, var(--glow-2)), transparent 60%);}
@keyframes heroBeamPulse{0%,100%{opacity:.55;} 50%{opacity:1;}}
.hero-pitchlines{
  position:absolute; left:0; right:0; bottom:0; height:220px; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 120px);
  mask-image:linear-gradient(0deg, black, transparent);
}

/* ---- Тактическая доска: анимированная разметка на canvas (только hero
   лендинга) — держим её тише прожекторов/пятен (z-index 1, между фоновыми
   слоями и текстом), чтобы не отвлекать от заголовка/CTA, как уже просил
   пользователь про декоративный фон раньше. */
.hero-tactics-board{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.32;}
@media(max-width:640px){ .hero-tactics-board{opacity:.20;} }

/* ---- Декоративная геометрия/тактика — фон лендинга на всю длину страницы ---- */
body.page-landing{
  background-image:url('/img/geo-pattern.svg');
  background-repeat:repeat; background-position:0 0; background-size:1300px 1500px;
}

/* Тот же декоративный фон — на страницах кабинета/клуба (dashboard.html,
   club.html), но перекрашенный под цвет текущего клуба вместо фиксированного
   золото+бирюза лендинга. Отдельный реальный элемент .page-cabinet-bg —
   первый потомок body, position:fixed;z-index:-1 (стандартный паттерн
   «слой фона позади контента», не псевдоэлемент — так надёжнее, не зависит
   от особенностей стекинг-контекста самого body). filter применяется
   ТОЛЬКО к этому слою, не ко всей странице. --club-hue-shift выставляется
   JS (applyClubPattern() в clubGlow.js) — 0deg по умолчанию, пока цвет
   клуба ещё не загружен (пользователь без клуба) — тогда просто исходные
   золото/бирюза, как на лендинге. */
.page-cabinet-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('/img/geo-pattern.svg');
  background-repeat:repeat; background-position:0 0; background-size:1300px 1500px;
  filter:hue-rotate(var(--club-hue-shift, 0deg));
}

.stat-strip{position:relative; z-index:2; display:flex; justify-content:center; flex-wrap:wrap; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-10);}
.stat{flex:1; min-width:110px; max-width:150px; text-align:center; padding:var(--space-4) var(--space-2); border-right:1px solid var(--color-border); font-variant-numeric:tabular-nums;}
.stat:last-child{border-right:none;}
.stat b{display:block; font-family:var(--font-display); font-size:var(--text-3xl); color:var(--teal-100);}
.stat span{font-size:var(--text-2xs); color:var(--color-text-dim); text-transform:uppercase; letter-spacing:.06em;}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); margin:var(--space-10) 0;}
.feature-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius); padding:var(--space-5);
  transition:border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.feature-card:hover{border-color:var(--teal-300); transform:translateY(-2px);}
.feature-card .icon{font-size:26px; margin-bottom:var(--space-2); line-height:0;}
.feature-card h3{margin:0 0 var(--space-1-5); font-size:var(--text-xl); color:var(--color-text);}
.feature-card p{margin:0; color:var(--color-text-muted); font-size:var(--text-sm); line-height:var(--leading-normal);}

.form-group{margin-bottom:var(--space-4);}
.form-group label{display:block; font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); margin-bottom:var(--space-1-5);}
.form-group input, .form-group select{
  width:100%; padding:var(--input-padding-y) var(--input-padding-x); border-radius:var(--input-radius);
  border:1px solid var(--input-border); background:var(--input-bg); color:var(--input-fg); font-size:var(--text-base);
  transition:border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.form-group input::placeholder{color:var(--input-placeholder);}
.form-group input:focus, .form-group select:focus{outline:none; border-color:var(--input-focus-border); box-shadow:var(--color-focus-ring);}

.error-box{
  background:var(--color-danger-subtle); border:1px solid var(--color-danger); color:var(--red-300);
  padding:var(--space-2-5) var(--space-3-5); border-radius:var(--radius-md); font-size:var(--text-sm); margin-bottom:var(--space-4); display:none;
}
.error-box.visible{display:block;}
.success-box{
  background:var(--color-success-subtle); border:1px solid var(--color-success); color:var(--color-success);
  padding:var(--space-2-5) var(--space-3-5); border-radius:var(--radius-md); font-size:var(--text-sm); margin-bottom:var(--space-4); display:none;
}
.success-box.visible{display:block;}

.badge{display:inline-flex; align-items:center; gap:var(--space-1-5); padding:var(--badge-padding-y) var(--badge-padding-x); border-radius:var(--badge-radius); font-size:var(--badge-font-size); font-weight:var(--badge-font-weight);}
.badge-pending{background:var(--color-accent-subtle); color:var(--color-accent);}
.badge-approved{background:var(--color-success-subtle); color:var(--color-success);}
.badge-rejected{background:var(--color-danger-subtle); color:var(--red-300);}
.badge-admin{background:rgba(212,167,60,.2); color:var(--color-accent);}
.badge-player{background:rgba(139,147,167,.2); color:var(--color-text-muted);}
.badge-vip{background:var(--color-success-subtle); color:var(--color-success);}
.badge-claimed{background:rgba(92,102,131,.3); color:var(--color-text-dim);}
.badge-open{background:var(--color-success-subtle); color:var(--color-success);}

.club-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-2-5); margin-top:var(--space-4);}
.club-tile{
  display:flex; align-items:center; gap:var(--space-2-5); padding:var(--space-3); border-radius:var(--radius-md);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  transition:border-color var(--duration-base) var(--ease);
}
.club-tile-dot{width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); flex-shrink:0;}
.club-tile-name{flex:1; font-size:var(--text-sm); font-weight:600;}

table{width:100%; border-collapse:collapse; font-size:var(--text-sm);}
th{text-align:left; color:var(--table-header-fg); font-weight:600; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.4px; padding:var(--table-cell-padding-y) var(--table-cell-padding-x); border-bottom:1px solid var(--table-border);}
td{padding:var(--table-cell-padding-x); border-bottom:1px solid var(--table-border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background var(--duration-fast) var(--ease);}
tbody tr:hover{background:var(--table-row-hover-bg);}

.tabs{display:flex; gap:var(--space-1-5); margin-bottom:var(--space-4-5); border-bottom:1px solid var(--color-border);}
.tab-btn{
  padding:var(--space-2-5) var(--space-4); background:none; border:none; color:var(--color-text-muted); font-size:var(--text-sm); font-weight:600;
  cursor:pointer; border-bottom:2px solid transparent; transition:color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.tab-btn:hover{color:var(--color-text);}
.tab-btn.active{color:var(--color-text); border-bottom-color:var(--color-primary);}

/* ---- Админка: боковое меню ---- */
.admin-layout{display:flex; gap:var(--space-6); align-items:flex-start;}
.admin-sidebar{
  flex:0 0 var(--sidebar-width); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--card-radius);
  padding:var(--space-2-5); position:sticky; top:76px;
}
.admin-nav-item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-2-5) var(--space-3); border-radius:var(--radius-md); cursor:pointer; font-size:var(--text-md); font-weight:600;
  color:var(--color-text-muted); margin-bottom:var(--space-0-5); user-select:none;
  transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.admin-nav-item:hover{background:var(--sidebar-item-hover-bg); color:var(--color-text);}
.admin-nav-item.active{background:var(--sidebar-item-active-bg); color:var(--sidebar-item-active-fg);}
.admin-nav-caret{font-size:10px; transition:transform var(--duration-base) var(--ease); opacity:.6;}
.admin-nav-caret.open{transform:rotate(90deg);}
.admin-nav-children{margin-left:var(--space-2-5); padding-left:var(--space-2-5); border-left:1px solid var(--color-border); display:none;}
.admin-nav-children.open{display:block;}
.admin-nav-child{
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); cursor:pointer; font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-0-5);
  transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.admin-nav-child:hover{background:var(--sidebar-item-hover-bg); color:var(--color-text);}
.admin-nav-child.active{background:var(--sidebar-item-active-bg); color:var(--sidebar-item-active-fg);}
.admin-content{flex:1; min-width:0;}
.badge-wip{background:var(--color-accent-subtle); color:var(--color-accent); font-size:10px; padding:var(--space-0-5) 7px; border-radius:var(--badge-radius); font-weight:800; letter-spacing:.3px;}
.wip-panel{text-align:center; padding:var(--space-14) var(--space-5); color:var(--color-text-dim);}
.wip-panel .icon{font-size:34px; margin-bottom:var(--space-2-5);}

/* ---- Сортируемые заголовки таблиц ---- */
th.sortable{cursor:pointer; user-select:none; transition:color var(--duration-fast) var(--ease);}
th.sortable:hover{color:var(--color-text);}
th.sortable .sort-arrow{margin-left:var(--space-1); opacity:.5; font-size:9px;}
th.sortable.sort-active .sort-arrow{opacity:1; color:var(--color-primary);}

@media(max-width:720px){
  .admin-layout{flex-direction:column;}
  .admin-sidebar{flex:1 1 auto; width:100%; position:static; display:flex; flex-wrap:wrap; gap:var(--space-1);}
  .admin-nav-children{margin-left:0; padding-left:0; border-left:none; display:flex; flex-wrap:wrap; gap:var(--space-1);}
}

@media(max-width:640px){
  .nav{padding:var(--space-3) var(--space-4); flex-wrap:wrap; row-gap:var(--space-2);}
  .nav-links{flex-wrap:wrap; gap:var(--space-2);}
  .nav-logo{font-size:var(--text-xl);}
  .hero{padding:var(--space-10) var(--space-4) var(--space-8);}
  .hero h1{font-size:clamp(26px, 8vw, 38px);}
  .hero-beam{width:80%;}
  .stat-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2-5); border:none; padding:0 var(--space-4); margin-bottom:var(--space-8);}
  .stat{max-width:none; border-right:none; background:rgba(255,255,255,.03); border-radius:var(--radius-md); padding:var(--space-3);}
  .club-hero{flex-direction:column; text-align:center;}
}

/* ---- Личный кабинет: hero-блок клуба ----
   .hero-band-club — контейнерный (не на всю ширину экрана, как у лендинга)
   вариант .hero-band: те же анимированные прожекторы, но встроен в обычный
   поток .container, со скруглением и рамкой, как у карточек. Цвет
   прожекторов синхронизирован с фирменным цветом клуба через
   --club-glow-1/--club-glow-2 (проставляются инлайн в renderClubView(),
   dashboard.html) — без переопределения .hero-beam использует дефолтные
   --glow-1/--glow-2 (см. правило выше), поэтому на лендинге ничего не
   меняется. */
.hero-band-club{
  border:1px solid var(--card-border); border-radius:var(--card-radius); margin-bottom:var(--space-6);
}
.club-hero{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:var(--space-5); padding:var(--space-6);
}
.club-hero-badge{flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.club-crest{display:block; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.club-hero-name{margin:0 0 var(--space-1); font-size:var(--text-3xl);}
.club-hero-meta{margin:0; color:var(--color-text-muted); font-size:var(--text-sm);}

/* ---- Состав/тактика (портировано из engine/football-manager-mvp.html,
   на токенах дизайн-системы; без командного стиля/интенсивности/матча) ---- */
.squad-select{
  background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text);
  padding:var(--space-2-5) var(--space-3); border-radius:var(--radius-md); font-family:var(--font-body);
  font-size:var(--text-base); font-weight:600;
}
.pos-tag{font-family:'JetBrains Mono',monospace; font-size:var(--text-2xs); font-weight:700; padding:2px var(--space-1-5); border-radius:var(--radius-sm);}
.pos-GK{background:var(--color-accent-subtle); color:var(--color-accent);}
.pos-DF{background:rgba(68,114,202,0.18); color:#7fa4ee;}
.pos-MF{background:var(--color-success-subtle); color:var(--color-success);}
.pos-FW{background:var(--color-danger-subtle); color:var(--red-300);}
.role-tag{
  font-family:'JetBrains Mono',monospace; font-size:var(--text-2xs); font-weight:700; padding:2px var(--space-1-5);
  border-radius:var(--radius-sm); background:var(--color-surface-2); border:1px solid var(--color-border);
  color:var(--color-text-muted); white-space:nowrap;
}
.player-row{cursor:pointer; transition:background var(--duration-fast) var(--ease);}
.player-row:hover{background:var(--color-surface-2);}
.squad-hint{color:var(--color-text-dim); font-size:var(--text-2xs); margin-top:var(--space-3); text-align:center;}
.squad-section-title{
  font-family:var(--font-display); letter-spacing:.5px; font-size:var(--text-xl); color:var(--color-text);
  margin-bottom:var(--space-2); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border);
}
.talent-icon-mini{margin-left:var(--space-1-5); font-size:14px; cursor:help;}
.num{font-family:'JetBrains Mono',monospace; text-align:center;}

.tactics-controls{display:flex; gap:var(--space-2-5); margin-bottom:var(--space-4); flex-wrap:wrap; align-items:center;}
.formation-tag{
  font-size:var(--text-xs); color:var(--color-text-muted); margin-bottom:var(--space-3);
  padding:var(--space-1-5) var(--space-2-5); border-radius:var(--radius-md);
  background:var(--color-surface-2); border:1px solid var(--color-border);
}
.formation-tag b{color:var(--color-primary);}

.pitch-wrap{width:100%; max-width:420px; margin:0 auto; position:relative;}
.pitch{
  position:relative; width:100%; padding-bottom:150%;
  background:
    linear-gradient(180deg, rgba(59,165,92,0.10), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 12%, rgba(255,255,255,0) 12% 24%),
    var(--pitch);
  border:2px solid rgba(255,255,255,0.18); border-radius:var(--radius-md); overflow:visible; touch-action:none;
}
.pitch-line{position:absolute; left:0; right:0; height:2px; background:rgba(255,255,255,0.25);}
.pitch-halfway{top:50%;}
.pitch-circle{
  position:absolute; left:50%; top:50%; width:22%; padding-bottom:22%;
  border:2px solid rgba(255,255,255,0.25); border-radius:var(--radius-full); transform:translate(-50%,-50%);
}
.pitch-box{position:absolute; left:50%; width:46%; padding-bottom:16%; border:2px solid rgba(255,255,255,0.25); transform:translateX(-50%);}
.pitch-box-top{top:0; border-top:none;}
.pitch-box-bottom{bottom:0; border-bottom:none;}
.pitch-slot{
  position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center;
  width:15%; padding-bottom:15%; border-radius:var(--radius-full);
  transition:background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.pitch-slot.dropzone-hover{background:rgba(59,165,92,0.28); box-shadow:0 0 0 2px var(--color-primary);}
.pitch-chip-mini{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:rgba(10,15,28,0.78); border:1px solid rgba(255,255,255,0.2);
  cursor:grab; touch-action:none;
}
.pitch-chip-empty{
  position:absolute; inset:14%; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full); border:1.5px dashed rgba(255,255,255,0.3); color:rgba(255,255,255,0.35);
  font-family:'JetBrains Mono',monospace; font-size:var(--text-2xs); font-weight:700;
}
.pitch-chip-ovr{font-family:'JetBrains Mono',monospace; font-weight:800; font-size:11px; color:var(--color-primary); line-height:1.1;}
.pitch-chip-name{font-size:10.5px; font-weight:700; color:var(--color-text); white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; line-height:1.1;}
.pitch-chip-role{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--color-text-dim); line-height:1.1; letter-spacing:.2px;}
.pitch-chip-flag{
  position:absolute; left:-4px; bottom:-4px; width:15px; height:11px; object-fit:cover;
  border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.5);
  transform:rotate(-18deg); filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Усталость игрока (0-100) — зелёная/жёлтая/красная шкала, тот же порог
   (70%), с которого сервер начинает штрафовать attack/defense в матче. */
.fatigue-bar{position:relative; height:3px; border-radius:var(--radius-full); background:rgba(255,255,255,0.12); overflow:hidden;}
.fatigue-bar-fill{height:100%; border-radius:var(--radius-full); transition:width var(--duration-fast) var(--ease);}
.fatigue-low{background:var(--color-success);}
.fatigue-mid{background:var(--gold-500);}
.fatigue-high{background:var(--color-danger);}
.fatigue-bar-pitch{position:absolute; left:14%; right:14%; bottom:3px; width:72%;}
.fatigue-bar-bench{margin:3px var(--space-1-5) 0;}

/* Установка интенсивности на клетку (портировано из движка, раздел 16
   библии) — 5 кружочков вверху карточки игрока на поле (не на скамейке —
   установка привязана к клетке, не к игроку). Полный градиент по всем 5
   уровням (не просто «пассивно/агрессивно» на двоих): холодный тёмно-синий
   (очень пассивно) → светло-синий (пассивно) → серый (нейтрально) →
   оранжевый (агрессивно) → красный (очень агрессивно) — активный уровень
   заливается цветом, остальные — приглушённая версия того же цвета, чтобы
   градиент был виден целиком даже до выбора. Кружки и клик-зона увеличены
   (было 5px — курсором было не попасть); .pitch-chip-intensity даёт
   дополнительный вертикальный отступ под клик поверх padding самих точек. */
.pitch-chip-intensity{
  position:absolute; top:1px; left:50%; transform:translateX(-50%);
  display:flex; gap:3px; z-index:2; padding:3px 4px;
}
.intensity-dot{
  width:9px; height:9px; border-radius:var(--radius-full); box-sizing:content-box;
  padding:2px; background-clip:content-box;
  background-color:rgba(255,255,255,0.16); cursor:pointer; transition:transform var(--duration-fast) var(--ease);
}
.intensity-dot:hover{transform:scale(1.3);}
.intensity-dot.lv-n2{background-color:rgba(47,90,168,0.35);}
.intensity-dot.lv-n1{background-color:rgba(127,164,238,0.35);}
.intensity-dot.lv-0{background-color:rgba(255,255,255,0.16);}
.intensity-dot.lv-p1{background-color:rgba(224,140,58,0.35);}
.intensity-dot.lv-p2{background-color:rgba(214,69,69,0.35);}
.intensity-dot.active.lv-n2{background-color:#2f5aa8;}
.intensity-dot.active.lv-n1{background-color:#7fa4ee;}
.intensity-dot.active.lv-0{background-color:var(--color-text-dim);}
.intensity-dot.active.lv-p1{background-color:#e08c3a;}
.intensity-dot.active.lv-p2{background-color:var(--color-danger);}

/* Название клуба как ссылка на club.html — везде, где отображается текстом
   (таблица, расписание, списки в админке). Не выглядит как «обычная»
   синяя ссылка (наследует цвет текста), подсвечивается только при hover —
   чтобы не отвлекать от плотных таблиц, но оставаться узнаваемо кликабельным. */
.club-link{color:inherit; text-decoration:none; transition:color var(--duration-fast) var(--ease);}
.club-link:hover{color:var(--color-primary); text-decoration:underline;}

.intensity-legend{display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-5); margin-bottom:var(--space-2);}
.intensity-legend-row{display:flex; align-items:center; gap:var(--space-1-5); font-size:var(--text-sm); color:var(--color-text-muted);}
.intensity-legend-row .intensity-dot{cursor:default;}
.intensity-legend-row .intensity-dot:hover{transform:none;}

.bench-panel{margin-top:var(--space-5); border-top:1px solid var(--color-border); padding-top:var(--space-3-5); border-radius:var(--radius-md); transition:background var(--duration-fast) var(--ease);}
.bench-panel.dropzone-hover{background:rgba(59,165,92,0.06);}
.bench-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:var(--space-2-5); min-height:40px;}
.bench-tile{
  display:flex; flex-direction:column; border-radius:var(--radius-md);
  background:var(--color-surface-2); border:1px solid var(--color-border); cursor:grab; touch-action:none; user-select:none;
  transition:border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.bench-tile:hover{border-color:var(--color-primary);}
.bench-tile:active{transform:scale(.97);}
.bench-tile-photo{
  border-radius:var(--radius-md) var(--radius-md) 0 0; overflow:hidden; position:relative; width:100%; padding-bottom:100%;
  display:flex; align-items:center; justify-content:center;
}
.bench-tile-initials{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:26px; letter-spacing:.5px; color:rgba(255,255,255,0.92);
  text-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.pos-bg-GK{background:linear-gradient(150deg,#8a6a1f,#5c4712);}
.pos-bg-DF{background:linear-gradient(150deg,#3a5b96,#22355a);}
.pos-bg-MF{background:linear-gradient(150deg,#2f7a4a,#1c4a2c);}
.pos-bg-FW{background:linear-gradient(150deg,#a13f3f,#5e2323);}
.bench-tile-ovr{
  position:absolute; bottom:4px; right:4px; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:12px;
  color:#fff; background:rgba(0,0,0,0.45); border-radius:var(--radius-sm); padding:1px 5px;
}
.bench-tile-flag{
  position:absolute; left:-3px; bottom:-3px; width:20px; height:15px; object-fit:cover;
  border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.5);
  transform:rotate(-18deg); filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.bench-tile-name{font-size:10.5px; font-weight:700; padding:var(--space-1-5) var(--space-1-5) 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bench-tile-meta{display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 var(--space-1-5) 7px;}

.drag-ghost{
  position:fixed; top:0; left:0; transform:translate(-50%,-50%); z-index:200; pointer-events:none;
  padding:var(--space-1-5) var(--space-3); border-radius:var(--radius-md); background:rgba(18,27,46,0.95);
  border:1.5px solid var(--color-primary); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px;
  color:var(--color-text); box-shadow:var(--shadow-md);
}
.drag-ghost.pos-GK{border-color:var(--color-accent);}

.skill-tooltip{
  display:none; position:fixed; z-index:300; width:220px; max-height:min(340px, 70vh); overflow-y:auto;
  background:rgba(13,19,34,0.98); border:1px solid var(--color-primary); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-3-5); box-shadow:var(--shadow-lg);
}
.skill-tooltip-head{
  display:flex; align-items:center; gap:var(--space-1-5); flex-wrap:wrap; font-size:var(--text-xs); font-weight:700;
  margin-bottom:var(--space-2-5); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border); padding-right:20px;
}
.skill-tooltip-close{
  position:absolute; top:8px; right:8px; background:none; border:none; color:var(--color-text-muted);
  font-size:15px; line-height:1; cursor:pointer; padding:4px;
}
.skill-tooltip-close:hover{color:var(--color-text);}
.instr-line{font-size:var(--text-2xs); color:var(--color-text-muted); margin-bottom:var(--space-2-5);}
.role-sig-line{
  font-size:var(--text-2xs); color:var(--color-text-muted); line-height:var(--leading-snug);
  background:var(--color-surface-2); border-left:3px solid var(--color-primary);
  padding:var(--space-1-5) var(--space-2-5); border-radius:var(--radius-sm); margin-bottom:var(--space-2-5);
}

.talent-block{
  margin:0 0 var(--space-3-5); padding:var(--space-3) var(--space-3-5); border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(212,167,60,0.14), rgba(212,167,60,0.03)); border:1px solid var(--color-accent);
}
.talent-badge{display:flex; align-items:center; gap:var(--space-2); font-weight:800; font-size:var(--text-sm); color:var(--color-accent); margin-bottom:4px;}
.talent-icon{font-size:16px;}
.talent-desc{font-size:var(--text-2xs); color:var(--color-text-muted); line-height:var(--leading-normal);}

.skill-group{margin-bottom:var(--space-4-5);}
.skill-group:last-child{margin-bottom:0;}
.skill-group-title{font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.6px; font-weight:700; color:var(--color-text-dim); margin-bottom:var(--space-2-5);}
.skill-row{margin-bottom:var(--space-2-5);}
.skill-row:last-child{margin-bottom:0;}
.skill-row-top{display:flex; justify-content:space-between; font-size:var(--text-xs); margin-bottom:4px;}
.skill-val{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--color-text);}
.skill-bar{height:6px; border-radius:var(--radius-sm); background:var(--color-surface-2); overflow:hidden;}
.skill-bar-fill{height:100%; border-radius:var(--radius-sm);}

/* ---- Турнир: таблица + расписание (кабинет и админка) ---- */
.standings-own{background:var(--color-primary-subtle);}
.fixture-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
  padding:var(--space-3) var(--space-3-5); border:1px solid var(--color-border); border-radius:var(--radius-md);
  margin-top:var(--space-2); transition:border-color var(--duration-fast) var(--ease);
}
.fixture-row.own{border-color:var(--color-primary); background:var(--color-primary-subtle);}
.fixture-row[onclick]{cursor:pointer;}
.fixture-row[onclick]:hover{border-color:var(--color-border-strong);}
.fixture-clubs{display:flex; align-items:center; gap:var(--space-3); flex:1 1 auto; min-width:260px;}
.fixture-club{display:flex; align-items:center; gap:var(--space-2); flex:1; font-size:var(--text-sm); font-weight:600;}
.fixture-club-away{flex-direction:row-reverse; text-align:right;}
.fixture-meta{display:flex; align-items:center; gap:var(--space-2-5); flex-wrap:wrap;}
.fixture-events{padding:var(--space-2) var(--space-3-5) var(--space-2) calc(var(--space-3-5) + var(--space-3)); margin-top:-4px;}

.match-banner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
  background:var(--color-primary-subtle); border:1px solid var(--color-primary); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-3-5); margin-bottom:var(--space-4); font-size:var(--text-sm);
}

.role-legend{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:var(--space-4); margin-top:var(--space-2-5);}
.role-legend-group-title{font-size:var(--text-2xs); font-weight:800; text-transform:uppercase; letter-spacing:.4px; margin-bottom:var(--space-2);}
.role-legend-row{display:flex; align-items:center; gap:var(--space-2); padding:3px 0; font-size:var(--text-xs); color:var(--color-text-muted);}

/* ---- Hover-подсказка с расшифровкой роли (значимость + плюсы/минусы) ---- */
.legend-tag-wrap{position:relative; cursor:help;}
.role-tag-hover{position:relative; display:inline-flex; cursor:help;}
.role-tag-hover:hover .legend-tooltip, .legend-tag-wrap:hover .legend-tooltip{display:block;}
.role-tag-hover .legend-tooltip{left:auto; right:0;}
.legend-tooltip{
  display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:250; width:250px;
  background:rgba(13,19,34,0.98); border:1px solid var(--color-primary); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-3-5); box-shadow:var(--shadow-lg); cursor:default; text-align:left;
}
.legend-tooltip-title{font-size:var(--text-sm); font-weight:800; color:var(--color-text); margin-bottom:var(--space-1-5); display:flex; align-items:center; gap:var(--space-1-5);}
.legend-tooltip-sig{font-size:var(--text-xs); color:var(--color-text-muted); line-height:var(--leading-snug); margin-bottom:var(--space-2);}
.legend-tooltip-pros{font-size:var(--text-xs); color:var(--color-success); line-height:1.6;}
.legend-tooltip-cons{font-size:var(--text-xs); color:var(--red-300); line-height:1.6; margin-top:2px;}

/* ---- Новости (лендинг) ---- */
.news-section{margin:var(--space-10) 0;}
.news-section h2{text-align:center; margin-bottom:var(--space-6);}
.news-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-4);}
.news-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--card-radius); padding:var(--space-5);}
.news-card-date{font-size:var(--text-2xs); color:var(--color-text-dim); text-transform:uppercase; letter-spacing:.4px; margin-bottom:var(--space-2);}
.news-card h3{margin:0 0 var(--space-1-5); font-size:var(--text-lg); color:var(--color-text);}
.news-card p{margin:0; color:var(--color-text-muted); font-size:var(--text-sm); line-height:var(--leading-normal);}

.hint{color:var(--color-text-dim); font-size:var(--text-xs); line-height:var(--leading-normal);}
.center{text-align:center;}
.mt{margin-top:var(--space-5);}
.flex-between{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2-5);}