/* ============================================================
   STAR WARS: SUPREME — official portal
   Design language: dark navy / electric blue / corner brackets / hex
   ============================================================ */

/* ----- FONTS ----- */
@font-face {
  font-family: 'Acrom';
  src: url('/fonts/acrom-thin.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acrom';
  src: url('/fonts/acrom-light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acrom';
  src: url('/fonts/acrom-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acrom';
  src: url('/fonts/acrom-medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acrom';
  src: url('/fonts/acrom-bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acrom';
  src: url('/fonts/acrom-extrabold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Wadik';
  src: url('/fonts/wadik.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Aurebesh';
  src: url('/fonts/aurebeshbold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Aurebesh Condensed';
  src: url('/fonts/aurebeshcondensed.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Aurebesh Droid';
  src: url('/fonts/aurebeshdroidregular-mnwe.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

/* ----- TOKENS ----- */
:root {
  --bg-0:   #060914;
  --bg-1:   #0a1024;
  --bg-2:   #0f1832;
  --bg-3:   #14224a;
  --line-1: #1d2a55;
  --line-2: #2a3d75;
  --ink-0:  #ffffff;
  --ink-1:  #cdd5ee;
  --ink-2:  #8a96bc;
  --ink-3:  #5b6794;
  --acc:    #5680c8;
  --acc-2:  #80a5e6;
  --acc-glow: rgba(86, 128, 200, 0.55);
  --hl-red:    #e85a5a;
  --hl-orange: #f39556;
  --hl-green:  #6dd58c;
  --hl-blue:   #5ea1f0;
  --paper:     #d8c397;
  --paper-2:   #a87d3f;
  --paper-ink: #2c1e0d;
  --shadow:    0 30px 80px -20px rgba(0,0,0,0.75);
  --radius-card: 6px;
  --t-fast: 120ms cubic-bezier(.2,.6,.2,1);
  --t-mid:  280ms cubic-bezier(.2,.6,.2,1);
  --t-slow: 600ms cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Acrom', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  color: var(--ink-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  line-height: 1.55;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Sticky footer pattern: brand-strip уезжает к низу когда контент короткий.
   Без явного width:100% флекс-айтемы (main, footer, header) автосжимаются
   в горизонтали — баг flexbox с min-width: auto. */
body > header,
body > main,
body > .brand-strip { width: 100%; }
body > main { flex: 1 0 auto; }
body > .brand-strip { flex: 0 0 auto; margin-top: auto; }

/* ----- ATMOSPHERIC BACKGROUND ----- */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(86,128,200,0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(40, 60, 130, 0.18), transparent 70%),
    linear-gradient(180deg, #060914 0%, #0a1024 60%, #060914 100%);
}
.bg-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/decor/topography.png');
  background-size: 720px;
  background-repeat: repeat;
  opacity: 0.10;
  mix-blend-mode: screen;
}
/* Global dark background — back_menu.png at native scale, tinted dark */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(6,9,20,0.78) 0%, rgba(6,9,20,0.92) 100%),
    url('/img/decor/back_menu.png') center / cover no-repeat;
  pointer-events: none;
}
.bg-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.bg-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 28% 67%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 47% 38%, rgba(180,200,240,0.7), transparent 50%),
    radial-gradient(1px 1px at 64% 81%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 78% 15%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 90% 55%, rgba(140,180,240,0.6), transparent 50%),
    radial-gradient(1px 1px at 5% 82%, rgba(255,255,255,0.45), transparent 50%);
  background-size: 100% 100%;
  /* drift animation removed — was repainting fixed-position layer at 60fps and
     accounted for ~50% of idle GPU usage. Stars look identical when static. */
}

.bg-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ----- HEADER / NAV ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* No backdrop-filter — sticky+blur on a full-width element re-rasterises
     everything behind it on EVERY scroll frame. We get the same look with a
     denser opaque gradient. */
  background: linear-gradient(180deg, rgba(6,9,20,0.96), rgba(6,9,20,0.85));
  border-bottom: 1px solid var(--line-1);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--acc) 30%, var(--acc) 70%, transparent 100%);
  opacity: .5;
}
.nav {
  max-width: 1620px;
  margin: 0 auto;
  height: 78px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink-0);
  white-space: nowrap;
}
/* Single brand image — combined SUPREME / SEASON 01 visual at native ratio */
.brand__logo {
  display: block;
  height: 32px;
  width: auto;
  filter: drop-shadow(0 0 8px var(--acc-glow));
}

.nav__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav__arrow {
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 22px;
  cursor: pointer;
  width: 28px; height: 28px;
  transition: color var(--t-fast);
}
.nav__arrow:hover { color: var(--acc-2); }
.nav__tab {
  position: relative;
  padding: 10px 22px;
  font-family: 'Acrom';
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--ink-2);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast);
}
.nav__tab:hover { color: var(--ink-0); }
.nav__tab.active { color: var(--ink-0); }
.nav__tab.active::before, .nav__tab.active::after {
  content: ''; position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--acc);
}
.nav__tab.active::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.nav__tab.active::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.nav__tab.active .nav__tab-bar {
  position: absolute;
  bottom: -3px; left: 22px; right: 22px;
  height: 2px;
  background: var(--acc);
  box-shadow: 0 0 12px var(--acc-glow);
}

.nav__user {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Acrom'; font-size: 13px; font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--ink-1);
  white-space: nowrap;
}
/* Small 1:1 avatar — native game icon */
.nav__avatar {
  width: 36px; height: 36px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}
.nav__user-id { color: var(--acc-2); font-weight: 700; }
.nav__user-stat {
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 6px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
}
.nav__user-stat .num { color: var(--acc-2); margin-left: 6px; }

/* ----- COMMON CONTAINERS ----- */
.wrap {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ----- BRACKET FRAME (recurring component) ----- */
.bracket {
  position: relative;
}
.bracket::before, .bracket::after {
  content: ''; position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--acc);
  pointer-events: none;
  transition: all var(--t-mid);
}
.bracket::before {
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
}
.bracket::after {
  bottom: -2px; right: -2px;
  border-left: none; border-top: none;
}
.bracket:hover::before, .bracket:hover::after {
  width: 34px; height: 34px;
  border-color: var(--acc-2);
  box-shadow: 0 0 18px var(--acc-glow);
}

.bracket-full {
  position: relative;
}
.bracket-full > .b-c { position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--acc); pointer-events: none; }
.bracket-full > .b-c.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.bracket-full > .b-c.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.bracket-full > .b-c.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.bracket-full > .b-c.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ----- DIAGONAL CUT CARD (used widely) ----- */
.diacut {
  --cut: 18px;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

/* ----- BUTTONS ----- */
/* Buttons — backed by real button.png panel (9-slice via border-image) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-0);
  background: url('/img/ui/button.png') center/100% 100% no-repeat;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: filter var(--t-fast), transform var(--t-fast);
  min-height: 42px;
  min-width: 180px;
}
.btn:hover {
  filter: brightness(1.18) drop-shadow(0 0 18px var(--acc-glow));
  transform: translateY(-1px);
}
.btn--accent {
  background: url('/img/hud/btn_panel.png') center/100% 100% no-repeat;
  color: #fff;
  text-shadow: 0 0 12px var(--acc-2);
  filter: drop-shadow(0 0 10px var(--acc-glow));
}
.btn--accent:hover {
  filter: brightness(1.15) drop-shadow(0 0 24px var(--acc-glow));
}
.btn--ghost {
  background: rgba(86,128,200,0.06);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover {
  background: rgba(86,128,200,0.16);
  border-color: var(--acc);
  filter: drop-shadow(0 0 10px var(--acc-glow));
}
.btn--sm {
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 2px;
  min-height: 32px;
  min-width: auto;
}
/* Inline icon inside a button (e.g. scroll on CTA) */
.btn .btn__icon {
  font-size: 22px;
  background: currentColor;
  margin-right: 4px;
}

/* ----- SECTION HEADERS ----- */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.sec-head__title {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 5px;
  color: var(--ink-2);
  text-transform: uppercase;
  position: relative;
  padding-left: 16px;
}
.sec-head__title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  background: var(--acc);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 8px var(--acc-glow);
}
.sec-head__more {
  font-family: 'Acrom'; font-size: 12px; letter-spacing: 3px;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ----- HOMEPAGE ----- */
.hero {
  position: relative;
  padding-top: 60px;
  padding-bottom: 80px;
  overflow: visible;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0;
  align-items: center;
  min-height: 580px;
  position: relative;
}
.hero__text {
  padding-left: clamp(40px, 8vw, 110px);
  position: relative;
  z-index: 3;
}
/* Right column — clones photo with brackets banner overlaid centered */
.hero__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -10%;
  margin-top: 160px;
}
.hero__clones-img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  filter: drop-shadow(0 0 80px rgba(86,128,200,0.35)) drop-shadow(0 0 28px rgba(0,0,0,0.55));
}
.hero__brackets {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 660px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 0 28px var(--acc-glow));
  pointer-events: none;
}
.hero__title {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: clamp(48px, 8vw, 116px);
  line-height: 0.92;
  letter-spacing: -2px;
  color: var(--ink-0);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.hero__title .gem {
  display: inline-block;
  color: var(--acc-2);
  text-shadow: 0 0 28px var(--acc-glow);
}
.hero__title .stripe {
  position: relative;
  display: inline-block;
  padding-right: 20px;
}
.hero__sub {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Acrom'; font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--acc-2);
  font-size: 14px;
  margin-bottom: 30px;
}
.hero__sub::before, .hero__sub::after {
  content: ''; height: 1px; background: var(--acc); flex: 1; max-width: 60px;
  box-shadow: 0 0 8px var(--acc-glow);
}
.hero__lead {
  font-size: 18px;
  color: var(--ink-1);
  max-width: 580px;
  margin: 0 0 36px;
}
.hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(180deg, transparent 25%, rgba(6,9,20,0.55) 70%, rgba(6,9,20,0.95) 100%),
    url('/img/decor/clones_arc.png') center 30%/cover no-repeat,
    linear-gradient(180deg, var(--bg-3), var(--bg-1));
  border: 1px solid var(--line-2);
  --cut: 30px;
}
.hero__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(86,128,200,0.25), transparent 60%);
}
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid var(--acc);
  pointer-events: none;
  --cut: 22px;
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  opacity: .35;
}
.hero__hex {
  position: absolute;
  bottom: 24px; left: 24px;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Acrom'; font-weight: 700; letter-spacing: 4px;
  font-size: 11px;
  color: var(--ink-1);
  text-transform: uppercase;
}
.hero__hex .h {
  width: 22px; height: 22px;
  background: var(--acc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.hero__hex .h .icon { width: 14px; height: 14px; }
.hero__visual-id {
  position: absolute;
  top: 24px; right: 24px;
  font-family: 'Aurebesh'; font-weight: 700;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--acc-2);
  opacity: .85;
}

.hero__corners > i {
  position: absolute;
  width: 60px; height: 60px;
  border: 2px solid var(--acc);
  pointer-events: none;
  filter: drop-shadow(0 0 8px var(--acc-glow));
}
.hero__corners > i.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.hero__corners > i.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.hero__corners > i.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.hero__corners > i.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ----- HERO STAT STRIP ----- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  margin: 60px 0;
}
.stat-strip__cell {
  background: var(--bg-1);
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.stat-strip__num {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 36px;
  color: var(--acc-2);
  line-height: 1;
  letter-spacing: -1px;
}
.stat-strip__lab {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.stat-strip__hex {
  margin-top: auto;
  width: 30px; height: 30px;
  background: linear-gradient(180deg, var(--acc), transparent);
  opacity: .25;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ----- HOME LAYOUT ----- */
.home-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  margin-bottom: 80px;
}

/* ----- AUDIT SECTION (decorations) ----- */
.audit-section { position: relative; }
.audit-section__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.audit-section__contour-l,
.audit-section__contour-r {
  position: absolute;
  height: 200px;
  width: auto;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px var(--acc-glow));
}
.audit-section__contour-l {
  top: 30px;
  left: -60px;
  transform: scaleX(-1);
}
.audit-section__contour-r {
  bottom: 60px;
  right: -60px;
}
.audit-section .home-grid { position: relative; z-index: 1; }

.audit-col { position: relative; }

/* ----- AUDIT FEED (statute updates) ----- */
.audit-feed {
  display: flex; flex-direction: column; gap: 14px;
}
.audit-card {
  position: relative;
  padding: 22px 26px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-1);
  --cut: 16px;
  transition: all var(--t-mid);
  display: flex;
  align-items: flex-start;
  gap: 22px;
  cursor: default;
  overflow: hidden;
}
.audit-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc-glow);
  z-index: 2;
}
.audit-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 130px; height: 105px;
  background: var(--acc-2);
  -webkit-mask: url('/img/ui/element.png') bottom left / 110px 88px no-repeat;
  mask: url('/img/ui/element.png') bottom left / 110px 88px no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--t-mid);
  filter: drop-shadow(0 0 6px var(--acc-glow));
}
.audit-card:hover::after { opacity: 0.85; }
.audit-card > * { position: relative; z-index: 1; }
.audit-card:hover {
  border-color: var(--acc);
  transform: translateX(4px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.audit-card__date {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  padding-top: 4px;
  min-width: 110px;
}
.audit-card__date b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--acc-2);
  letter-spacing: 0;
  line-height: 1;
}
.audit-card__body { flex: 1; }
.audit-card__tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bg-0);
  background: var(--acc-2);
  margin-bottom: 8px;
}
.audit-card__tag.tag-tutorial { background: var(--hl-green); }
.audit-card__tag.tag-doc { background: var(--hl-orange); }
.audit-card__tag.tag-release { background: var(--acc-2); }
.audit-card__tag.tag-fix { background: var(--hl-red); color: #fff; }
.audit-card__title {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 16px;
  color: var(--ink-0);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.audit-card__sum {
  font-size: 13px;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.55;
}
.audit-card__author {
  display: block;
  margin-top: 8px;
  font-family: 'Acrom'; font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ----- HOME RIGHT RAIL ----- */
.rail {
  display: flex; flex-direction: column; gap: 24px;
}
.rail-card {
  position: relative;
  padding: 26px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-1);
  overflow: hidden;
}
.rail-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 90px; height: 72px;
  background: url('/img/ui/element.png') bottom left / contain no-repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.rail-card > * { position: relative; z-index: 1; }
.rail-card__head {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-0);
  margin: 0 0 16px;
}
.rail-card__head .accent { color: var(--acc-2); }
.rail-card__body { font-size: 14px; color: var(--ink-1); margin: 0 0 18px; line-height: 1.6; }
.rail-card__hex {
  position: absolute;
  right: -30px; top: -30px;
  width: 130px; height: 130px;
  background: var(--acc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: .08;
}

.quick-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.quick-tile {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  text-decoration: none;
  color: var(--ink-1);
  transition: all var(--t-fast);
  position: relative;
  overflow: hidden;
}
.quick-tile:hover {
  background: var(--bg-3);
  border-color: var(--acc);
  transform: translateY(-3px);
  color: var(--ink-0);
}
.quick-tile::before { content: none; }
.quick-tile::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 90px; height: 70px;
  background: var(--acc-2);
  -webkit-mask: url('/img/decor/contour.png') bottom right / contain no-repeat;
  mask: url('/img/decor/contour.png') bottom right / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--t-fast);
  filter: drop-shadow(0 0 4px var(--acc-glow));
}
.quick-tile:hover::after { opacity: 0.85; }
.quick-tile > * { position: relative; z-index: 1; }
.quick-tile__ico {
  width: 38px; height: 38px;
  background: var(--acc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  filter: drop-shadow(0 0 8px var(--acc-glow));
}
.quick-tile__ico .png-icon, .quick-tile__ico .icon { font-size: 20px; color: #fff; }
.quick-tile__lab {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase;
}
.quick-tile__sub {
  font-size: 11px; color: var(--ink-3);
}

/* ----- TUTORIALS LIST PAGE ----- */
.tut-page {
  padding-top: 60px;
  padding-bottom: 100px;
}
.page-head {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end;
  margin-bottom: 48px;
}
.page-head__kicker {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px; letter-spacing: 6px;
  color: var(--acc-2); text-transform: uppercase;
  margin-bottom: 14px;
}
.page-head__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -1px;
  color: var(--ink-0);
  margin: 0;
  text-transform: uppercase;
}
.page-head__lead {
  font-size: 16px;
  color: var(--ink-1);
  max-width: 460px;
  margin: 0;
  line-height: 1.6;
}

.tut-search {
  position: relative;
  margin-bottom: 32px;
  max-width: 720px;
}
.tut-search input {
  width: 100%;
  padding: 16px 22px 16px 56px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  font-family: 'Acrom'; font-weight: 500;
  font-size: 15px;
  color: var(--ink-0);
  letter-spacing: 0.5px;
  transition: all var(--t-fast);
}
.tut-search input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 0 24px var(--acc-glow);
}
.tut-search input::placeholder { color: var(--ink-3); }
.tut-search::before {
  content: '';
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: var(--acc-2);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.tut-cats {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.tut-cat {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
.tut-cat:hover { color: var(--ink-0); border-color: var(--acc); }
.tut-cat.active {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
  box-shadow: 0 0 18px var(--acc-glow);
}

.tut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.tut-card {
  position: relative;
  padding: 26px;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-1);
  text-decoration: none;
  color: var(--ink-1);
  transition: all var(--t-mid);
  --cut: 18px;
  overflow: hidden;
  min-height: 220px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.tut-card::before { content: none; }
.tut-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 130px; height: 100px;
  background: var(--acc-2);
  -webkit-mask: url('/img/decor/contour.png') bottom right / 110px 88px no-repeat;
  mask: url('/img/decor/contour.png') bottom right / 110px 88px no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--t-mid);
  filter: drop-shadow(0 0 6px var(--acc-glow));
}
.tut-card:hover::after { opacity: 0.85; }
.tut-card:hover {
  border-color: var(--acc);
  transform: translateY(-4px);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  box-shadow: var(--shadow);
  color: var(--ink-0);
}
.tut-card:hover::after { opacity: .8; }
.tut-card__no {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 36px;
  color: var(--acc-2);
  line-height: 1;
  letter-spacing: -1px;
  opacity: .7;
}
.tut-card__cat {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.tut-card__cat::before {
  content: ''; width: 6px; height: 6px;
  background: var(--acc); transform: rotate(45deg);
}
.tut-card__title {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 22px;
  color: var(--ink-0);
  margin: 0;
  letter-spacing: 0.3px;
}
.tut-card__lead {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.tut-card__arrow {
  align-self: flex-end;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}

/* ----- TUTORIAL ARTICLE ----- */
.article {
  padding: 40px 0 100px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
}
/* When breadcrumbs sit ABOVE article inside .article-page, .article doesn't need padding */
.article-page > .article { padding: 0; }

.breadcrumbs {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
/* Article-page wraps both breadcrumbs (full-width) and the .article grid */
.article-page { padding-top: 28px; padding-bottom: 100px; }
.article-page .breadcrumbs { margin-bottom: 24px; }
.article-page .article { padding: 0; }
.breadcrumbs a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-fast);
}
.breadcrumbs a:hover { color: var(--acc-2); }
.breadcrumbs .sep { color: var(--ink-3); }
.breadcrumbs .now { color: var(--ink-0); }

.article-side {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
}
.article-side::-webkit-scrollbar { width: 4px; }
.article-side::-webkit-scrollbar-thumb { background: var(--line-2); }

.article-side h4 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.article-side ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.article-side li a {
  display: block;
  padding: 10px 14px;
  font-family: 'Acrom'; font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--line-1);
  transition: all var(--t-fast);
}
.article-side li a:hover {
  border-left-color: var(--acc);
  color: var(--ink-0);
  background: rgba(86, 128, 200, 0.05);
}
.article-side .toc-sub { margin: 3px 0 5px; gap: 2px; }
.article-side .toc-sub li a { padding: 6px 12px 6px 24px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); border-left-color: transparent; }
.article-side .toc-sub li a:hover { color: var(--ink-0); border-left-color: var(--acc); }
.article-side .toc-sub li a.active { color: var(--ink-0); border-left-color: var(--acc); background: rgba(86,128,200,0.08); }
.article-side li a.active {
  border-left-color: var(--acc);
  color: var(--ink-0);
  background: rgba(86, 128, 200, 0.1);
  font-weight: 700;
}

.article-main {
  max-width: 880px;
}

.article-hero {
  position: relative;
  padding: 38px 42px;
  background:
    linear-gradient(90deg, rgba(15,24,50,0.92) 0%, rgba(15,24,50,0.6) 60%, rgba(86,128,200,0.18) 100%),
    url('/img/decor/announce_blue.png') right center / auto 100% no-repeat,
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-3) 100%);
  border: 1px solid var(--line-2);
  margin-bottom: 38px;
  overflow: hidden;
  --cut: 24px;
}
.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.article-hero__cat {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px; letter-spacing: 5px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.article-hero__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--ink-0);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.article-hero__lead {
  font-size: 17px;
  color: var(--ink-1);
  margin: 0;
  max-width: 720px;
}
.article-hero__deco {
  position: absolute;
  right: -40px; bottom: -40px;
  width: 200px; height: 200px;
  background: url('/img/ui/hex.png') center/contain no-repeat;
  opacity: .06;
}

/* ----- TUTORIAL BLOCKS (rich content) ----- */
.tb { margin: 0 0 22px; }
.tb-h1 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 38px;
  color: var(--ink-0);
  margin: 38px 0 18px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
.tb-h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 28px;
  color: var(--ink-0);
  margin: 32px 0 14px;
  position: relative;
  padding-left: 18px;
  line-height: 1.2;
}
.tb-h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 24px;
  background: var(--acc);
  transform: translateY(-50%);
  box-shadow: 0 0 12px var(--acc-glow);
}
.tb-h3 {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 22px;
  color: var(--ink-0);
  margin: 28px 0 12px;
}
.tb-p {
  font-size: 16px;
  color: var(--ink-1);
  margin: 0 0 18px;
  line-height: 1.7;
}
.tb-p b, .tb-p strong { color: var(--ink-0); font-weight: 700; }
.tb-p i, .tb-p em { color: var(--ink-1); font-style: italic; }
.tb-ul, .tb-ol {
  padding-left: 0;
  list-style: none;
  margin: 0 0 22px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.tb-ul li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  color: var(--ink-1);
  line-height: 1.65;
}
.tb-ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 2px;
  background: var(--acc);
  box-shadow: 0 0 6px var(--acc-glow);
}
.tb-ol {
  counter-reset: ol;
}
.tb-ol li {
  counter-increment: ol;
  position: relative;
  padding-left: 44px;
  font-size: 16px;
  color: var(--ink-1);
  line-height: 1.65;
  min-height: 28px;
}
.tb-ol li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px;
  color: var(--acc-2);
  letter-spacing: 1px;
  width: 32px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
}

/* alignment */
.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }

/* font flavors */
.fnt-aurebesh { font-family: 'Aurebesh'; letter-spacing: 2px; }
.fnt-wadik { font-family: 'Wadik'; }

/* color highlights from PDF legend */
.hl { font-weight: 700; }
.hl-red    { color: var(--hl-red); }
.hl-orange { color: var(--hl-orange); }
.hl-green  { color: var(--hl-green); }
.hl-blue   { color: var(--hl-blue); }

/* underscored mark */
.tb-u { text-decoration: underline; text-decoration-color: var(--acc-2); text-underline-offset: 4px; }

/* inline code */
code, .tb-p code, .tb-ul code, .tb-ol code {
  font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  background: rgba(86, 128, 200, 0.12);
  border: 1px solid var(--line-2);
  padding: 2px 7px;
  font-size: 0.92em;
  color: var(--acc-2);
  border-radius: 2px;
}
.tb-code {
  font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  padding: 18px 22px;
  font-size: 14px;
  color: var(--ink-1);
  margin: 0 0 22px;
  position: relative;
  overflow-x: auto;
  --cut: 12px;
}
.tb-code::before {
  content: 'CODE';
  position: absolute;
  top: 8px; right: 14px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 3px;
  color: var(--ink-3);
}

/* keyboard / kbd  */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 10px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-0);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--acc);
  border-bottom-width: 3px;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(86,128,200,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  margin: 0 2px;
  position: relative;
  top: -1px;
}

/* button block (like ingame) */
.tb-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-0);
  background: linear-gradient(180deg, rgba(86,128,200,0.18), rgba(86,128,200,0.05));
  border: 1px solid var(--acc);
  text-decoration: none;
  margin: 12px 0 24px;
  position: relative;
  transition: all var(--t-fast);
}
.tb-button::before, .tb-button::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--acc);
}
.tb-button::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.tb-button::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.tb-button:hover {
  background: linear-gradient(180deg, rgba(86,128,200,0.35), rgba(86,128,200,0.15));
  box-shadow: 0 0 24px var(--acc-glow);
  transform: translateY(-2px);
}

/* separator: legacy "gem" + 3 PNG variants (left / center / right).
   block-level + clear:both so adjacent separators stack and never overlap.
   user-select:none + caret guards keep them atomic in the editor. */
.tb-sep {
  display: block;
  height: 30px;
  position: relative;
  margin: 36px 0;
  clear: both;
}
.editor-area .tb-sep {
  /* Make the entire separator a focusable, selectable atomic element in the editor */
  outline: 1px solid transparent;
  cursor: pointer;
}
.editor-area .tb-sep:hover { outline-color: var(--line-2); }
.editor-area .tb-sep:focus,
.editor-area .tb-sep.is-selected { outline-color: var(--acc); }
.tb-sep--gem::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--acc) 30%, var(--acc) 70%, transparent 100%);
  opacity: .5;
}
.tb-sep--gem::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 14px; height: 14px;
  background: var(--bg-0);
  border: 1px solid var(--acc);
  box-shadow: 0 0 12px var(--acc-glow);
}
/* PNG line variants — rendered as <img>: native aspect, no stretch */
img.tb-sep {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 36px 0;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px var(--acc-glow));
  -webkit-user-drag: none;
  user-select: none;
}
img.tb-sep--left   { margin-left: 0;    margin-right: auto; }
img.tb-sep--center { margin-left: auto; margin-right: auto; }
img.tb-sep--right  { margin-left: auto; margin-right: 0; }

/* callout */
.tb-callout {
  position: relative;
  padding: 22px 26px 22px 60px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  margin: 0 0 24px;
  --cut: 14px;
}
/* Callout marker — single icon per kind via mask + solid colour (alpha 255) */
.tb-callout::before {
  content: '';
  position: absolute;
  left: 18px; top: 18px;
  width: 30px; height: 30px;
  background: var(--acc);
  background-image: none;
  -webkit-mask: url('/img/icons/info.png') center / contain no-repeat;
  mask: url('/img/icons/info.png') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(86,128,200,0.5));
}
.tb-callout.kind-warning::before {
  background: var(--hl-orange);
  -webkit-mask: url('/img/hud/halt.png') center / contain no-repeat;
  mask: url('/img/hud/halt.png') center / contain no-repeat;
}
.tb-callout.kind-danger::before {
  background: var(--hl-red);
  -webkit-mask: url('/img/icons/cross_mark.png') center / contain no-repeat;
  mask: url('/img/icons/cross_mark.png') center / contain no-repeat;
}
.tb-callout.kind-success::before {
  background: var(--hl-green);
  -webkit-mask: url('/img/icons/diamond.png') center / contain no-repeat;
  mask: url('/img/icons/diamond.png') center / contain no-repeat;
}
.tb-callout__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 13px; letter-spacing: 3px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center;
}
.tb-callout p, .tb-callout > div { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-1); }
.tb-callout.kind-warning { border-color: var(--hl-orange); background: linear-gradient(180deg, rgba(243,149,86,0.08), var(--bg-1)); }
.tb-callout.kind-warning::before { background: var(--hl-orange); }
.tb-callout.kind-warning .tb-callout__title { color: var(--hl-orange); }
.tb-callout.kind-danger { border-color: var(--hl-red); background: linear-gradient(180deg, rgba(232,90,90,0.08), var(--bg-1)); }
.tb-callout.kind-danger::before { background: var(--hl-red); }
.tb-callout.kind-danger .tb-callout__title { color: var(--hl-red); }
.tb-callout.kind-success { border-color: var(--hl-green); background: linear-gradient(180deg, rgba(109,213,140,0.08), var(--bg-1)); }
.tb-callout.kind-success::before { background: var(--hl-green); }
.tb-callout.kind-success .tb-callout__title { color: var(--hl-green); }

/* doc-card — карточка-ссылка на устав */
.tb-doccard {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 20px;
  margin: 0 0 24px;
  background: linear-gradient(180deg, rgba(86,128,200,0.07), var(--bg-1));
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--acc);
  text-decoration: none; color: inherit;
  position: relative;
  transition: border-color .18s, box-shadow .18s;
}
.tb-doccard:hover {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 8px 26px rgba(0,0,0,0.28);
}
.tb-doccard__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  color: var(--acc-2);
}
.tb-doccard__icon svg { width: 23px; height: 23px; fill: currentColor; }
.tb-doccard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-doccard__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--acc-2);
}
.tb-doccard__title {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 16px; color: var(--ink-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-doccard__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-doccard__go {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--acc-2);
}
.tb-doccard__go svg { width: 16px; height: 16px; fill: currentColor; transition: transform .18s; }
.tb-doccard:hover .tb-doccard__go svg { transform: translateX(4px); }

/* inline doc link */
.tb-doclink {
  color: var(--acc-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(86,128,200,0.45);
  font-weight: 600;
  transition: color .15s, border-color .15s;
}
.tb-doclink:hover { color: var(--acc); border-bottom-color: var(--acc); }

/* doc-attach picker — переключатель вида (карточка / ссылка) */
.doc-attach-variant { display: inline-flex; border: 1px solid var(--line-2); }
.doc-attach-variant button {
  background: transparent; border: none; cursor: pointer;
  padding: 6px 14px; font-size: 12px; color: var(--ink-3);
  font-family: 'Acrom'; font-weight: 700; letter-spacing: 1px;
}
.doc-attach-variant button.is-active { background: var(--acc); color: #fff; }

/* classified */
.classified, .tb-classified {
  display: inline-block;
  background: #000;
  color: #000;
  padding: 0 8px;
  border-radius: 1px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #1a1a1a;
  transition: color var(--t-mid);
  position: relative;
}
.classified::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,0,0,0.4) 4px 5px);
  pointer-events: none;
}
.classified:hover { color: var(--hl-red); }
.tb-classified {
  display: block;
  background: #000;
  color: rgba(255,255,255,0.05);
  padding: 18px 22px;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 15px;
  margin: 0 0 22px;
  position: relative;
  border-color: #2a0000;
  cursor: pointer;
}
.tb-classified::after {
  content: 'CLASSIFIED';
  position: absolute;
  top: 8px; right: 16px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--hl-red);
  opacity: .9;
}
.tb-classified:hover { color: var(--ink-1); background: var(--bg-0); border-color: var(--hl-red); }
.tb-classified:hover::after { display: none; }

/* ============================================================
   Accordion — раскрывающийся блок. Стиль выровнен с audit-card
   на главной: акцентная полоса слева + topography-текстура в углу
   + плавная анимация шеврона + glow при открытии.
   ============================================================ */
.tb-accordion {
  margin: 0 0 22px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}
/* Акцентная полоса слева — как в audit-card на главной. */
.tb-accordion::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc-glow);
  opacity: 0.55;
  z-index: 2;
  transition: opacity var(--t-mid);
}
.tb-accordion:hover::before { opacity: 0.85; }
.tb-accordion[data-open="1"]::before { opacity: 1; }
/* Угловая topography-декорация прикреплена к ГОЛОВЕ, а не ко всему
   аккордеону: иначе при раскрытии она «уезжала» вниз вместе с растущим
   body. Здесь — статично в правом верхнем углу головы, не сдвигается. */
.tb-accordion__head::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 130px; height: 100px;
  background: var(--acc-2);
  -webkit-mask: url('/img/ui/element.png') bottom left / 110px 88px no-repeat;
  mask: url('/img/ui/element.png') bottom left / 110px 88px no-repeat;
  /* element.png рисован под нижний-левый угол. Разворачиваем на 180°,
     чтобы кривая «смотрела внутрь» из верхнего-правого. */
  transform: rotate(180deg);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 6px var(--acc-glow));
  transition: opacity var(--t-mid);
}
.tb-accordion:hover .tb-accordion__head::after { opacity: 0.35; }
.tb-accordion[data-open="1"] > .tb-accordion__head::after { opacity: 0.5; }
.tb-accordion:hover { border-color: var(--acc); }
.tb-accordion[data-open="1"] {
  border-color: var(--acc);
  box-shadow: 0 0 24px rgba(86,128,200,0.12);
}
.tb-accordion > * { position: relative; z-index: 1; }

.tb-accordion__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  background-color: rgba(86,128,200,0.05);
  position: relative;
  transition: background-color var(--t-fast), border-color var(--t-mid);
}
/* Topography-текстура на голове — нижний слой, не блокирует клики. */
.tb-accordion__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/decor/topography.png') center / 520px repeat;
  opacity: 0.08;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity var(--t-mid);
}
.tb-accordion__head:hover { background-color: rgba(86,128,200,0.12); }
.tb-accordion__head:hover::before { opacity: 0.14; }
.tb-accordion[data-open="1"] > .tb-accordion__head {
  background-color: rgba(86,128,200,0.16);
  border-bottom-color: var(--acc);
}
.tb-accordion[data-open="1"] > .tb-accordion__head::before { opacity: 0.18; }
.tb-accordion__head > * { position: relative; z-index: 1; }

.tb-accordion__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--acc-2);
  cursor: pointer;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1),
              color var(--t-fast),
              filter var(--t-mid);
  outline: none;
}
.tb-accordion__chev svg {
  width: 18px; height: 18px;
  display: block;
  fill: currentColor;
}
.tb-accordion__chev:hover {
  color: var(--acc);
  filter: drop-shadow(0 0 6px var(--acc-glow));
}
.tb-accordion__chev:focus-visible {
  box-shadow: 0 0 0 2px var(--acc);
  border-radius: 3px;
}
.tb-accordion[data-open="1"] > .tb-accordion__head > .tb-accordion__chev {
  transform: rotate(90deg);
  color: var(--acc);
  filter: drop-shadow(0 0 8px var(--acc-glow));
}

.tb-accordion__title {
  flex: 1;
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--ink-0);
  min-width: 0;
  word-break: break-word;
  text-transform: uppercase;
}
.tb-accordion[data-open="1"] > .tb-accordion__head > .tb-accordion__title {
  color: var(--acc-2);
}

.tb-accordion__body {
  padding: 0 22px 0 36px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1),
              padding .3s ease;
  position: relative;
}
/* Вертикальная пунктирная линия слева от контента — присутствует и в
   редакторе, и в публикации. Через ::after с абсолютным позиционированием,
   чтобы не сдвигать контент. Видна только когда body раскрыт (когда свёрнут,
   max-height: 0 + overflow: hidden скрывают и линию). */
.tb-accordion__body::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 12px; bottom: 8px;
  border-left: 1px dashed rgba(86, 128, 200, 0.5);
  pointer-events: none;
}
.tb-accordion[data-open="1"] > .tb-accordion__body {
  /* max-height: none через JS невозможно анимировать, потому используем
     достаточно большой потолок; контент любой высоты раскрывается полностью. */
  max-height: 9999px;
  padding: 18px 22px 8px 36px;
}
.tb-accordion__body > *:last-child { margin-bottom: 0; }

/* В режиме редактирования body всегда раскрыто — иначе не отредактировать
   вложенное содержимое. Шеврон при этом меняет data-open и при сохранении
   состояние пишется в данные. */
.editor-area .tb-accordion__body {
  max-height: none !important;
  padding: 18px 22px 8px 36px !important;
}
.editor-area .tb-accordion__head { cursor: text; }
.editor-area .tb-accordion__chev { cursor: pointer; }
/* Визуальный hint в редакторе: закрытое-по-умолчанию body слегка приглушено.
   Пунктирная линия теперь живёт в общем правиле .tb-accordion__body::after. */
.editor-area .tb-accordion[data-open="0"] > .tb-accordion__body { opacity: 0.78; }

/* table */
.tb-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  font-size: 14px;
}
.tb-table th, .tb-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
}
.tb-table th {
  background: var(--bg-2);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--acc);
}
.tb-table tr:last-child td { border-bottom: none; }
.tb-table tr:hover td { background: rgba(86,128,200,0.05); }

/* quote */
.tb-quote {
  position: relative;
  padding: 24px 30px 24px 50px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-left: 4px solid var(--acc);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-0);
  margin: 0 0 24px;
}
.tb-quote::before {
  content: '';
  position: absolute;
  left: 14px; top: 14px;
  width: 24px; height: 24px;
  background: var(--acc);
  -webkit-mask: url(/img/icons/scroll_tied.png) center/contain no-repeat;
  mask: url(/img/icons/scroll_tied.png) center/contain no-repeat;
}
.tb-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px; letter-spacing: 3px;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* image with diagonal cut corners + lightbox + decorative frame */
.tb-image {
  margin: 0 0 28px;
  display: block;
  position: relative;
}
.tb-image figure {
  margin: 0;
  position: relative;
}
.tb-image__frame {
  position: relative;
  cursor: zoom-in;
  background: var(--bg-1);
  display: block;
  --cut: 26px;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  overflow: hidden;
}
.tb-image__frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--t-mid);
}
.tb-image__frame:hover img {
  transform: scale(1.03);
}
.tb-image__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 1;
}
.tb-image__frame::after {
  content: 'ZOOM';
  position: absolute;
  bottom: 14px; right: 28px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 4px;
  color: var(--ink-0);
  background: rgba(86,128,200,0.85);
  padding: 6px 14px;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--t-mid);
}
.tb-image__frame:hover::after { opacity: 1; transform: translateY(0); }
.tb-image figcaption {
  margin-top: 14px;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.tb-image figcaption::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--acc);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* freeform layout: free-position images + text. Fixed width = same in admin & reader */
.tb-freeform {
  position: relative;
  width: 760px;
  max-width: 100%;
  margin: 18px auto 32px;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
}
.tb-freeform .ff-item {
  position: absolute;
  display: block;
  transform-origin: center center;
}
.tb-freeform .ff-item--image img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}
.tb-freeform .ff-item--text {
  font-family: 'Acrom';
  color: var(--ink-0);
  background: rgba(15,24,50,0.65);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  backdrop-filter: blur(2px);
}
/* Shape types */
.ff-item--rect svg, .ff-item--arrow svg, .ff-item--path svg { display:block; width:100%; height:100%; overflow: visible; }
.ff-item--arrow, .ff-item--path { background: transparent; border: 0; }

/* Editor mode: highlight + interactive handles + block resize/collapse */
.editor-area .tb-freeform {
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(86,128,200,0.10) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(86,128,200,0.10) 39px 40px);
  outline: 1px solid var(--acc);
}
/* Block-level resize handle (bottom-right) and collapse button (top-right) */
.editor-area .tb-freeform > .ff-block-resize {
  position: absolute;
  right: -8px; bottom: -8px;
  width: 16px; height: 16px;
  background: var(--acc-2);
  border: 1px solid #fff;
  cursor: nwse-resize;
  z-index: 50;
}
.editor-area .tb-freeform > .ff-block-bar {
  position: absolute;
  top: -28px; right: 0;
  display: flex;
  gap: 6px;
  z-index: 50;
}
.editor-area .tb-freeform > .ff-block-bar button {
  background: var(--bg-2);
  color: var(--ink-1);
  border: 1px solid var(--acc);
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 1px;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.editor-area .tb-freeform > .ff-block-bar button:hover { background: var(--acc); color: #fff; }
/* Свёрнутый (frame-hidden) free-form: рамка/сетка/handle спрятаны,
   контейнер не резервирует вертикальное место в потоке документа,
   а объекты остаются на своих абсолютных координатах и «парят» поверх
   соседнего контента. Сам toolbar остаётся доступен — это единственный
   способ снова показать рамку. */
.tb-freeform.collapsed {
  min-height: 0 !important;
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  outline: none !important;
  overflow: visible !important;
}
.tb-freeform.collapsed > .ff-block-resize { display: none !important; }
.editor-area .tb-freeform.collapsed > .ff-block-bar { opacity: 0.55; }
.editor-area .tb-freeform.collapsed > .ff-block-bar:hover { opacity: 1; }
.editor-area .tb-freeform.draw-mode {
  cursor: crosshair !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(232,90,90,0.10) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(232,90,90,0.10) 39px 40px);
  outline-color: var(--hl-red);
}
.editor-area .ff-item { cursor: move; outline: 1px dashed transparent; }
.editor-area .ff-item:hover { outline-color: var(--acc-2); }
.editor-area .ff-item.selected { outline: 1px solid var(--acc-2); box-shadow: 0 0 0 2px rgba(86,128,200,0.3); }
.editor-area .ff-item--arrow { outline: 0 !important; }
.editor-area .ff-item--arrow.selected svg { filter: drop-shadow(0 0 6px var(--acc-glow)); }
.editor-area .ff-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--acc-2);
  border: 1px solid #fff;
  border-radius: 2px;
  z-index: 1000;
}
.editor-area .ff-handle.h-resize { right: -6px; bottom: -6px; cursor: nwse-resize; }
.editor-area .ff-handle.h-rot    { left: 50%; top: -28px; transform: translateX(-50%); cursor: grab; border-radius: 50%; background: var(--hl-orange); }
.editor-area .ff-handle.h-arrow-start { left: -6px; top: -6px; background: var(--hl-green); border-radius: 50%; cursor: move; }
.editor-area .ff-handle.h-arrow-end   { right: -6px; bottom: -6px; background: var(--hl-red);   border-radius: 50%; cursor: move; }
.editor-area .ff-handle.h-arrow-arc   { left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--hl-orange); border-radius: 50%; cursor: ns-resize; }

/* ----- SAVE-CONFIRM MODAL (3 buttons) ----- */
.save-confirm {
  position: fixed; inset: 0;
  z-index: 260;
  background: rgba(0,4,12,0.92);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.save-confirm.show { display: flex; }
.save-confirm__inner {
  background: var(--bg-1);
  border: 1px solid var(--acc);
  width: 100%; max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(86,128,200,0.2);
  --cut: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.save-confirm h3 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-0);
  margin: 0 0 6px;
  text-shadow: 0 0 12px var(--acc-glow);
}
.save-confirm__lead {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 22px;
  letter-spacing: 0.5px;
}
.save-confirm__diff-form { display: none; margin-bottom: 18px; }
.save-confirm__diff-form[data-show="true"] { display: block; }
.save-confirm__diff-preview { display: none; margin-bottom: 18px; }
.save-confirm__diff-preview[data-show="true"] { display: block; }
.save-confirm__buttons {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-1);
}
.save-confirm__buttons .btn { min-width: auto; }

/* ----- DIFF DISPLAY (GitHub-style with our palette) ----- */
.diff-stats {
  display: inline-flex; gap: 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-weight: 700; font-size: 12px;
}
.diff-stats .diff-add { color: var(--hl-green); }
.diff-stats .diff-rm  { color: var(--hl-red); }
.diff-body {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 12px 0;
  max-height: 360px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-1);
  margin-top: 8px;
}
.diff-line {
  padding: 2px 14px 2px 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-left: 3px solid transparent;
}
.diff-line.diff-ctx {
  color: var(--ink-2);
  background: transparent;
}
.diff-line.diff-add {
  background: rgba(109,213,140,0.12);
  border-left-color: var(--hl-green);
  color: #c8f5d6;
}
.diff-line.diff-rm  {
  background: rgba(232,90,90,0.12);
  border-left-color: var(--hl-red);
  color: #ffd0d0;
}
.diff-line.diff-gap {
  text-align: center;
  color: var(--ink-3);
  border-left: 0;
  padding: 6px 0;
  background: rgba(86,128,200,0.04);
}
.diff-empty {
  padding: 14px;
  font-family: 'Acrom';
  font-size: 12px; letter-spacing: 2px;
  color: var(--ink-3);
  text-align: center;
  text-transform: uppercase;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
}

/* Audit-card diff <details> */
.audit-diff {
  margin-top: 10px;
  border: 1px solid var(--line-2);
  background: rgba(86,128,200,0.05);
}
.audit-diff > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 12px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.audit-diff > summary::-webkit-details-marker { display: none; }
.audit-diff__icon {
  width: 12px; height: 12px;
  background: var(--acc-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform var(--t-fast);
}
.audit-diff[open] .audit-diff__icon { transform: rotate(90deg); }
.audit-diff__label { flex: 1; }
.audit-diff > .diff-body { margin: 0; border-top: 1px solid var(--line-2); border-left: 0; border-right: 0; border-bottom: 0; max-height: 320px; }

/* Media picker modal */
.media-picker {
  position: fixed; inset: 0;
  z-index: 250;
  background: rgba(0,4,12,0.92);
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 40px;
  backdrop-filter: blur(10px);
}
.media-picker.show { display: flex; }
.media-picker__inner {
  background: var(--bg-1);
  border: 1px solid var(--acc);
  width: 100%; max-width: 1100px;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(86,128,200,0.2);
  overflow: hidden;
}
.media-picker__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-2);
}
.media-picker__head h3 {
  margin: 0;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-0);
}
.media-picker__close {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  width: 30px; height: 30px;
  cursor: pointer;
  font-family: 'Acrom'; font-size: 14px;
}
.media-picker__filter {
  padding: 12px 22px;
  border-bottom: 1px solid var(--line-1);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.media-picker__chip {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: 'Acrom'; font-weight: 600; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
.media-picker__chip:hover { color: var(--ink-0); border-color: var(--acc); }
.media-picker__chip.active { background: var(--acc); color: #fff; border-color: var(--acc); }
.media-picker__search input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 13px;
}
.media-picker__grid {
  flex: 1;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  background: var(--bg-0);
}
.media-picker__cell {
  position: relative;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex; flex-direction: column; gap: 4px;
}
.media-picker__cell:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.media-picker__cell img {
  width: 100%;
  height: 90px;
  object-fit: contain;
  background: rgba(0,0,0,0.3);
  display: block;
}
.media-picker__cell-name {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 9px; letter-spacing: 1px;
  color: var(--ink-3);
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* video */
.tb-video {
  margin: 0 0 24px;
  position: relative;
  --cut: 22px;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  background: #000;
  aspect-ratio: 16 / 9;
}
.tb-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ----- LIGHTBOX ----- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 4, 12, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px;
  animation: fadeIn var(--t-mid);
}
.lightbox.show { display: flex; }
.lightbox__inner {
  position: relative;
  max-width: 92vw; max-height: 86vh;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  --cut: 30px;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  animation: zoomIn 400ms cubic-bezier(.2,.6,.2,1);
}
.lightbox__cap {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 13px; letter-spacing: 3px;
  color: var(--ink-1);
  text-transform: uppercase;
  text-align: center;
  max-width: 700px;
}
.lightbox__close {
  position: absolute;
  top: -50px; right: 0;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--acc);
  color: var(--ink-0);
  font-size: 20px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.lightbox__close:hover {
  background: var(--acc);
  color: #fff;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 34, 74, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.lightbox__nav:hover { background: var(--acc); border-color: var(--acc); }
.lightbox__nav.prev { left: -70px; }
.lightbox__nav.next { right: -70px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ----- DOCS PAGE (parchment folders) ----- */
.docs-page {
  padding-top: 60px;
  padding-bottom: 100px;
}
.docs-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
}

.folder-list {
  display: flex; flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
/* обёртки промо/табов — прозрачны для лэйаута, чтобы карточки оставались
   прямыми flex-детьми .folder-list (иначе ломается отступ/размеры) */
#structPromo, #folderTabs { display: contents; }
/* тонкий тематический скролл вместо дефолтного «жирного» */
.folder-list { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.folder-list::-webkit-scrollbar { width: 8px; }
.folder-list::-webkit-scrollbar-track { background: transparent; }
.folder-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.folder-list::-webkit-scrollbar-thumb:hover { background: var(--acc); background-clip: padding-box; }

.folder-tab {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-1);
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: left;
  font-family: 'Acrom';
  color: var(--ink-1);
  --cut: 12px;
}
.folder-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--folder-color, var(--acc));
  opacity: 0;
  transition: opacity var(--t-fast);
}
.folder-tab:hover { background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); border-color: var(--folder-color, var(--acc)); color: var(--ink-0); }
.folder-tab:hover::before { opacity: 1; }
.folder-tab.active {
  border-color: var(--folder-color, var(--acc));
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  box-shadow: 0 0 26px rgba(86,128,200,0.18);
}
.folder-tab.active::before { opacity: 1; }
.folder-tab__name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink-0);
}
.folder-tab__count {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}

.folder-stage {
  position: relative;
  min-height: 600px;
}

/* document cards on stage (landscape, decoration.png mask) */
.doc-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  padding: 8px;
}

/* DOC-CARD: decoration.png as solid blue silhouette, no chrome, no stamps */
.doc-card {
  position: relative;
  aspect-ratio: 513 / 332;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.2,.6,.2,1);
  text-decoration: none;
  color: var(--ink-0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14% 16%;
  font-family: 'Acrom';
  text-align: center;
  overflow: visible;
  transform-origin: center center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Background: decoration.png recoloured to acc, preserves original aspect.
   No drop-shadow on this masked layer — it produces sub-pixel artefacts at the
   left edge during scale. Glow is moved to a separate underlay (::after on hover). */
.doc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--acc);
  -webkit-mask: url('/img/decor/decoration.png') center / 100% 100% no-repeat;
  mask: url('/img/decor/decoration.png') center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);  /* lift to its own composite layer */
  -webkit-mask-clip: border-box;
  mask-clip: border-box;
}
/* Dark radial backdrop ONLY behind text (separate pseudo) */
.doc-card::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  top: 18%; bottom: 18%;
  background: radial-gradient(ellipse at center, rgba(0,8,22,0.85) 0%, rgba(0,8,22,0.55) 45%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}
/* Smooth grow on hover */
.doc-card:hover { transform: scale(1.06); }
/* One-shot white flash through ::before when entering hover.
   Glow is rendered on the parent via box-shadow (no mask-related artefacts). */
.doc-card:hover::before { animation: docFlash 420ms ease-out forwards; }
@keyframes docFlash {
  0%   { background: var(--acc); }
  30%  { background: #ffffff; }
  60%  { background: var(--acc-2); }
  100% { background: var(--acc); }
}

.doc-card__head {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 18px rgba(86,128,200,0.5);
}
.doc-card__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 16px;
  line-height: 1.18;
  color: var(--ink-0);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 8px rgba(0,0,0,0.95),
    0 0 16px rgba(0,0,0,0.85),
    0 0 24px rgba(86,128,200,0.55);
}
.doc-card__sub {
  font-family: 'Acrom'; font-weight: 500;
  font-size: 11.5px;
  color: var(--ink-1);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.7);
}
/* No stamps / seals / barcodes for the test */
.doc-card__stamp,
.doc-card__seal,
.doc-card__lines { display: none; }

.folder-empty {
  padding: 80px 40px;
  text-align: center;
  color: var(--ink-3);
  font-family: 'Acrom';
  font-size: 13px;
  letter-spacing: 2px;
  border: 1px dashed var(--line-2);
}

/* ----- DOCS SEARCH RESULTS ----- */
.docs-results__count {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.docs-results__list {
  display: flex; flex-direction: column;
  gap: 12px;
}
.docs-result {
  position: relative;
  display: grid; gap: 6px;
  padding: 18px 24px 18px 28px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-1);
  text-decoration: none;
  color: var(--ink-1);
  transition: all var(--t-fast);
  --cut: 12px;
}
.docs-result::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--folder-color, var(--acc));
  opacity: 0.55;
  transition: opacity var(--t-fast);
}
.docs-result:hover {
  border-color: var(--folder-color, var(--acc));
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  box-shadow: 0 0 26px rgba(86,128,200,0.14);
}
.docs-result:hover::before { opacity: 1; }
.docs-result__folder {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--folder-color, var(--acc-2));
}
.docs-result__title {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 17px; letter-spacing: 0.3px;
  color: var(--ink-0);
}
.docs-result__sub {
  font-family: 'Acrom'; font-style: italic;
  font-size: 13px; color: var(--ink-2);
}
.docs-result__snippet {
  font-size: 13px; color: var(--ink-2);
  line-height: 1.6; margin-top: 2px;
}
.docs-result mark {
  background: rgba(86,128,200,0.28);
  color: var(--ink-0);
  padding: 0 2px;
  border-radius: 2px;
}

/* ----- DOCUMENT VIEW (single, parchment) ----- */
.doc-view {
  padding-top: 40px;
  padding-bottom: 100px;
}
/* Document layout: sticky TOC sidebar (left) + parchment (right), mirrors .article */
.doc-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
.doc-main { min-width: 0; }
/* Left-align the parchment within its column so it sits next to the TOC */
.doc-main .parchment { margin: 0; }
/* Bottom prev/next bar is now the primary doc nav — always visible */
.doc-main .doc-mobile-nav { display: flex; margin-top: 40px; }
/* Anchor offset so chapter headings clear the sticky header on TOC jump */
.parchment-body .tb-h2 { scroll-margin-top: 100px; }
/* DATAPAD full-screen view (replacing parchment) */
.parchment {
  position: relative;
  margin: 0 auto;
  max-width: 980px;
  background:
    linear-gradient(180deg, rgba(15,24,50,0.97) 0%, rgba(10,16,36,0.97) 50%, rgba(15,24,50,0.97) 100%);
  padding: 60px 70px 70px;
  color: var(--ink-1);
  font-family: 'Acrom';
  border: 1px solid var(--acc);
  box-shadow:
    0 0 0 1px rgba(86,128,200,0.15),
    0 30px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(86,128,200,0.18),
    inset 0 0 80px rgba(86,128,200,0.05);
  --cut: 32px;
}
/* Scanlines + holographic grid */
.parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, transparent 0 100px, rgba(86,128,200,0.04) 100px 102px),
    repeating-linear-gradient(90deg, transparent 0 100px, rgba(86,128,200,0.025) 100px 102px),
    radial-gradient(circle at 50% 0%, rgba(86,128,200,0.20), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Top + bottom energy edges */
.parchment::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--acc-2) 30%, var(--acc-2) 70%, transparent 100%);
  box-shadow: 0 0 18px var(--acc-glow);
  z-index: 2;
}

.parchment-head {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.parchment-head__pretitle {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 0 8px var(--acc-glow);
}
.parchment-head__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.05;
  color: var(--ink-0);
  text-shadow: 0 0 22px rgba(86,128,200,0.35);
}
.parchment-head__sub {
  font-family: 'Acrom'; font-weight: 500;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  max-width: 700px;
  margin: 0 auto 24px;
}
.parchment-head__seal {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 220px; height: 100px;
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(86,128,200,0.32) 0%, rgba(86,128,200,0.10) 55%, transparent 80%);
}
/* cornered4.png recoloured to the accent and used as a frame */
.parchment-head__seal::before {
  content: '';
  position: absolute;
  inset: 4px 0;
  background: var(--acc);
  -webkit-mask: url('/img/datapad/cornered4.png') center / contain no-repeat;
  mask: url('/img/datapad/cornered4.png') center / contain no-repeat;
  filter: drop-shadow(0 0 14px var(--acc-glow));
  pointer-events: none;
}
.parchment-head__seal::after {
  content: attr(data-stamp);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px;
  letter-spacing: 3px;
  color: #ffffff;
  text-shadow: 0 0 12px var(--acc-2), 0 0 4px rgba(0,0,0,0.6);
  z-index: 1;
  white-space: nowrap;
  padding: 0 24px;
}

.parchment-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 28px 0;
  position: relative; z-index: 1;
}
.parchment-divider::before, .parchment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
}
.parchment-divider .gem {
  width: 64px; height: 64px;
  margin: 0 18px;
  background: url('/img/decor/lines_bg.png') center / contain no-repeat;
  opacity: 0.78;
  box-shadow: 0 0 10px var(--acc-glow);
  border-radius: 50%;
  flex-shrink: 0;
  /* Rotation removed — even with GPU layer, a 64×64 background-image rotation
     sustained at 60fps cost ~15-20% GPU on its own. Static gem still looks
     decorative, just doesn't spin. */
}
@keyframes parchmentGemSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.parchment-body { position: relative; z-index: 1; }
.parchment-body .tb-h1, .parchment-body .tb-h2, .parchment-body .tb-h3 {
  font-family: 'Acrom'; color: var(--ink-0);
}
.parchment-body .tb-h2::before { background: var(--acc); box-shadow: 0 0 12px var(--acc-glow); }
.parchment-body .tb-p, .parchment-body .tb-ul li, .parchment-body .tb-ol li {
  color: var(--ink-1);
}
.parchment-body .tb-ul li::before { background: var(--acc); box-shadow: 0 0 6px var(--acc-glow); }
.parchment-body .tb-ol li::before { color: var(--acc-2); border-color: var(--line-2); }
.parchment-body .tb-callout {
  background: var(--bg-2);
  border-color: var(--line-2);
  color: var(--ink-1);
}
.parchment-body .tb-callout p, .parchment-body .tb-callout > div { color: var(--ink-1); }
.parchment-body code {
  background: rgba(86,128,200,0.12);
  border-color: var(--line-2);
  color: var(--acc-2);
}
.parchment-body kbd, .parchment-body .kbd {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-color: var(--acc);
  color: var(--ink-0);
  box-shadow: 0 0 10px rgba(86,128,200,0.25);
}
.parchment-body .tb-image__frame {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.parchment-body .hl-red    { color: var(--hl-red); }
.parchment-body .hl-orange { color: var(--hl-orange); }
.parchment-body .hl-green  { color: var(--hl-green); }
.parchment-body .hl-blue   { color: var(--hl-blue); }

.parchment-foot {
  margin-top: 50px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink-3);
  text-transform: uppercase;
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-2);
  padding-top: 24px;
}
.parchment-foot__sig {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--acc-2);
  text-transform: uppercase;
  border: 1px solid var(--acc);
  padding: 8px 18px;
  border-bottom-width: 2px;
  background: rgba(86,128,200,0.08);
  text-shadow: 0 0 8px var(--acc-glow);
}

/* document open animation: cards fade-in once on enter, then transform is FREE for :hover. */
.doc-card.in {
  animation: docIn 600ms cubic-bezier(.2,.6,.2,1);
}
@keyframes docIn {
  from { opacity: 0; transform: translateY(40px) rotateX(-10deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ---------- "Tablet to face" — datapad zoom on click ---------- */
.doc-zoom-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(7, 16, 38, 0.55) 0%, rgba(2, 5, 12, 0.92) 75%);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.36s cubic-bezier(.22,.85,.18,1);
  backdrop-filter: blur(0px);
}
.doc-zoom-overlay.show {
  opacity: 1;
  backdrop-filter: blur(6px);
}
.doc-card-flying {
  /* JS sets initial position+size; we just provide the transition curve. */
  pointer-events: none;
  z-index: 9100;
  transform-origin: 0 0;
  will-change: transform, filter;
  transition:
    transform 0.42s cubic-bezier(.22,.85,.18,1),
    filter   0.42s cubic-bezier(.22,.85,.18,1);
  filter: drop-shadow(0 0 30px rgba(86, 128, 200, 0.5));
}
.doc-card-flying.lifted {
  /* On the second RAF we toggle this class with the target transform applied inline */
  filter: drop-shadow(0 0 60px rgba(86, 128, 200, 0.85)) brightness(1.04);
}

/* ----- ADMIN PAGE ----- */
.admin-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}
.admin-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line-1);
  padding: 26px 22px;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 15px; letter-spacing: 3px;
  color: var(--ink-0);
  margin-bottom: 30px;
}
.admin-brand small { color: var(--acc-2); font-size: 11px; letter-spacing: 4px; }
.admin-nav {
  display: flex; flex-direction: column; gap: 4px;
}
.admin-nav button {
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid var(--line-1);
  color: var(--ink-2);
  padding: 10px 14px;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
.admin-nav button:hover { color: var(--ink-0); border-left-color: var(--acc); background: rgba(86,128,200,0.05); }
.admin-nav button.active {
  color: var(--ink-0);
  border-left-color: var(--acc);
  background: rgba(86,128,200,0.12);
}

.admin-main {
  padding: 30px 40px 80px;
}
.admin-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-1);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.admin-head h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 22px; letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-0);
}

.admin-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.admin-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  font-family: 'Acrom';
  font-size: 14px;
  color: var(--ink-1);
}
.admin-row__title { flex: 1; font-weight: 600; color: var(--ink-0); }
.admin-row__cat {
  font-size: 11px; letter-spacing: 2px;
  color: var(--acc-2); text-transform: uppercase;
}
.admin-row__actions { display: flex; gap: 6px; }

/* Folder block wraps a folder header + its documents */
.folder-block { display: flex; flex-direction: column; }
.folder-children { display: flex; flex-direction: column; padding-left: 32px; }
.folder-children:empty { display: none; }

/* Drag handle */
.admin-row__drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--ink-3);
  flex-shrink: 0;
  opacity: 0.55;
  cursor: grab;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  border-radius: 2px;
}
.admin-row__drag .ed-ic {
  width: 14px; height: 14px;
  fill: currentColor;
}
/* The folder-handle uses an "expand vertical" feel; rotate the up-arrow icon inside */
.js-folder-handle .ed-ic { transform: rotate(0deg); }
.admin-row__drag:active { cursor: grabbing; }
.admin-row:hover .admin-row__drag {
  opacity: 1;
  color: var(--acc-2);
  background: rgba(86,128,200,0.12);
}

/* SortableJS classes */
.sortable-ghost {
  opacity: 0.35;
  background: rgba(86,128,200,0.12) !important;
  border: 1px dashed var(--acc) !important;
  box-shadow: inset 0 0 0 1px var(--acc);
}
.sortable-chosen {
  /* Element user grabbed but not yet dragging — subtle accent */
  border-color: var(--acc) !important;
  box-shadow: 0 0 18px rgba(86,128,200,0.35);
}
.sortable-drag {
  /* Floating element being dragged */
  opacity: 0.95 !important;
  background: var(--bg-2) !important;
  border-color: var(--acc) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 24px rgba(86,128,200,0.5) !important;
  transform: rotate(0.5deg);
}
/* Hide the drag handle hint while actively dragging — reduces visual noise */
.sortable-drag .admin-row__drag { opacity: 1; color: var(--acc); }

/* Highlight a folder-children container as a valid drop zone when something is being dragged */
.folder-children.sortable-drop-active {
  outline: 1px dashed rgba(86,128,200,0.4);
  outline-offset: -4px;
}

.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.field label {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 3px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  color: var(--ink-0);
  font-family: 'Acrom'; font-size: 14px;
  letter-spacing: 0.3px;
  transition: border var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc);
}
.field textarea { resize: vertical; min-height: 80px; font-family: inherit; }

/* editor */
.editor-toolbar {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Pinned: float across viewport — survives scroll outside the editor */
.editor-toolbar.sticky-pinned {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  border: 0;
  border-bottom: 1px solid var(--acc);
  box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(86,128,200,0.18);
  background: rgba(10,16,36,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 18px;
  border-radius: 0;
  max-width: none;
}
.editor-toolbar.sticky-pinned + .editor-area { margin-top: 70px; }
.tbtn-pin {
  position: relative;
  flex-shrink: 0;
}
.tbtn-pin .ed-ic { transition: transform var(--t-fast); }
.editor-toolbar.sticky-pinned .tbtn-pin {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}
.editor-toolbar.sticky-pinned .tbtn-pin .ed-ic {
  transform: rotate(45deg);
}

/* Phosphor inline-SVG icon inside toolbar buttons */
.ed-ic {
  width: 18px; height: 18px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}
.tbtn .ed-ic + .tbtn-lab { margin-left: 6px; font-size: 10px; letter-spacing: 1.5px; }

.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  padding: 6px 10px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--t-fast);
  letter-spacing: 1px;
  min-width: 32px;
  min-height: 30px;
  justify-content: center;
}
.tbtn:hover { background: var(--bg-2); color: var(--ink-0); }
.tbtn.active { background: var(--acc); color: #fff; }
.tbtn--lg { padding: 6px 14px; }
.tbtn-sep { width: 1px; background: var(--line-1); margin: 4px 6px; }
.tbtn-sel {
  background: var(--bg-2);
  color: var(--ink-0);
  border: 1px solid var(--line-2);
  padding: 5px 8px;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 11px; letter-spacing: 1px;
  margin: 0 2px;
  cursor: pointer;
}
.tbtn-color {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  color: var(--ink-0);
}
.tbtn-color input[type="color"] {
  width: 22px; height: 18px;
  border: 0; padding: 0; background: transparent; cursor: pointer;
}

.editor-area {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 22px 26px;
  min-height: 420px;
  font-family: 'Acrom';
  font-size: 16px;
  color: var(--ink-1);
  line-height: 1.6;
  outline: none;
  max-width: 880px;
  margin: 0;
}
.editor-area:focus { border-color: var(--acc); }
.editor-area * { max-width: 100%; }
.editor-area .tb-image__frame { cursor: default; }

/* login */
.login-box {
  max-width: 440px;
  margin: 14vh auto;
  padding: 50px 50px 40px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  position: relative;
  --cut: 22px;
}
.login-box__head {
  text-align: center;
  margin-bottom: 28px;
}
.login-box__head .icon {
  width: 64px; height: 64px;
  background: url('/img/ui/sup_icon.png') center/contain no-repeat;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 12px var(--acc-glow));
}
.login-box__head h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-0);
  margin: 0 0 6px;
}
.login-box__head p {
  font-family: 'Acrom';
  font-size: 11px; letter-spacing: 4px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin: 0;
}
.login-error {
  background: rgba(232,90,90,0.12);
  border: 1px solid var(--hl-red);
  color: var(--hl-red);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
.login-error.show { display: block; }

/* ── Login destination toggle (Stage 3 admin-panel migration) ── */
.login-dest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.login-dest__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: 'Acrom';
  text-align: left;
  cursor: pointer;
  transition: border var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.login-dest__opt:hover {
  border-color: var(--acc-2);
  color: var(--ink-0);
}
.login-dest__opt.is-active {
  border-color: var(--acc);
  background: linear-gradient(180deg, rgba(125, 195, 255, 0.10), rgba(125, 195, 255, 0.02));
  box-shadow: 0 0 0 1px var(--acc) inset;
  color: var(--ink-0);
}
.login-dest__lbl {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.login-dest__opt.is-active .login-dest__lbl { color: var(--acc); }
.login-dest__sub {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  line-height: 1.35;
}

@media (max-width: 480px) {
  .login-dest { grid-template-columns: 1fr; }
  .login-dest__opt { padding: 9px 11px; }
}

/* ----- BRAND STRIP (above footer): plain text only, no chrome ----- */
.brand-strip {
  padding: 26px 32px 8px;
  background: transparent;
  border: 0;
}
.brand-strip .site-foot__brand,
.site-foot__brand { background: transparent; border: 0; }

/* ----- FOOTER (disclaimer image only) ----- */
.site-foot {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  min-height: 120px;
  border: 0;
  background: var(--bg-0);
}
.site-foot__disclaimer {
  display: block;
  position: absolute;
  left: 50%; top: 30px;
  transform: translateX(-50%);
  width: min(1700px, calc(100% - 64px));
  height: auto;
  aspect-ratio: 1700 / 95;
  pointer-events: none;
  opacity: 0.9;
  object-fit: contain;
  z-index: 1;
}
.site-foot .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.site-foot__brand {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px; letter-spacing: 6px;
  color: var(--ink-0);
}
.site-foot__brand small {
  display: block;
  font-family: 'Aurebesh'; font-weight: 400;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  margin-top: 4px;
}
.site-foot__legal {
  font-family: 'Acrom';
  font-size: 11px; letter-spacing: 1px;
  color: var(--ink-3);
  max-width: 720px;
  line-height: 1.5;
  text-align: right;
}

/* ----- SEASON 01 spotlight — single photo, no chrome ----- */
.season-spot {
  margin: 50px auto 30px;
  display: flex;
  justify-content: center;
}
.season-spot__img {
  display: block;
  max-width: 460px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 50px rgba(86,128,200,0.35));
}

/* ----- SFX mute toggle button in nav ----- */
.sfx-toggle {
  position: relative;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sfx-toggle:hover { border-color: var(--acc); background: rgba(86,128,200,0.10); }
.sfx-toggle::before, .sfx-toggle::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Speaker icon (drawn in CSS) */
.sfx-toggle::before {
  left: 7px; top: 10px;
  width: 7px; height: 12px;
  background: var(--acc-2);
  clip-path: polygon(0 30%, 50% 30%, 100% 0, 100% 100%, 50% 70%, 0 70%);
}
/* Sound waves */
.sfx-toggle::after {
  right: 6px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border: 1.5px solid var(--acc-2);
  border-left: 0;
  border-radius: 0 50% 50% 0 / 0 50% 50% 0;
}
.sfx-toggle.muted::after {
  width: 12px; height: 1.5px;
  background: var(--hl-red);
  border: 0;
  transform: translateY(-50%) rotate(-30deg);
  right: 4px;
  border-radius: 0;
}
.sfx-toggle.muted::before { background: var(--ink-3); }

/* ----- ICON SYSTEM (no text glyphs anywhere) ----- */
/* SVG sprite icons (ui chrome) */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  flex-shrink: 0;
}
.icon-lg { width: 1.4em; height: 1.4em; }
/* Mask-based PNG icons (recolorable game icons) */
.png-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.png-icon--helmet     { -webkit-mask-image: url(/img/icons/helmet.png); mask-image: url(/img/icons/helmet.png); }
.png-icon--inventory  { -webkit-mask-image: url(/img/icons/inventory.png); mask-image: url(/img/icons/inventory.png); }
.png-icon--starfighter{ -webkit-mask-image: url(/img/icons/starfighter.png); mask-image: url(/img/icons/starfighter.png); }
.png-icon--medkit     { -webkit-mask-image: url(/img/icons/medkit.png); mask-image: url(/img/icons/medkit.png); }
.png-icon--scroll     { -webkit-mask-image: url(/img/icons/scroll.png); mask-image: url(/img/icons/scroll.png); }
.png-icon--id         { -webkit-mask-image: url(/img/icons/id_card.png); mask-image: url(/img/icons/id_card.png); }
.png-icon--arrow      { -webkit-mask-image: url(/img/icons/arrow.png); mask-image: url(/img/icons/arrow.png); }
.png-icon--expand     { -webkit-mask-image: url(/img/icons/expand.png); mask-image: url(/img/icons/expand.png); }
.png-icon--info       { -webkit-mask-image: url(/img/icons/info.png); mask-image: url(/img/icons/info.png); }
.png-icon--cross      { -webkit-mask-image: url(/img/icons/cross_mark.png); mask-image: url(/img/icons/cross_mark.png); }
.png-icon--diamond    { -webkit-mask-image: url(/img/icons/diamond.png); mask-image: url(/img/icons/diamond.png); }
.png-icon--star       { -webkit-mask-image: url(/img/hud/star.png); mask-image: url(/img/hud/star.png); }
.png-icon--crosshair  { -webkit-mask-image: url(/img/hud/crosshair.png); mask-image: url(/img/hud/crosshair.png); }
.png-icon--shield     { -webkit-mask-image: url(/img/hud/shield.png); mask-image: url(/img/hud/shield.png); }
.png-icon--heartbeat  { -webkit-mask-image: url(/img/hud/heartbeat.png); mask-image: url(/img/hud/heartbeat.png); }

/* ZOOM indicator for tb-image (no glyph, just a chip) */
.tb-image__frame::after {
  content: 'ZOOM';
  background: rgba(86,128,200,0.85);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  padding: 6px 14px;
}
/* Override: kill ⤢ glyph from earlier rule (now plain 'ZOOM' set above) */

/* Lightbox controls — remove text glyphs, use SVG icons */
.lightbox__close, .lightbox__nav { font-size: 0; }
.lightbox__close .icon, .lightbox__nav .icon { font-size: 22px; }

/* Quote glyph: replaced with svg in HTML; remove the css-injected " */
.tb-quote::before { content: ''; }

/* (callout markers defined above with mask + solid colour) */

/* ----- HELPER / UTILITIES ----- */
.hidden { display: none !important; }

/* ============================================================
   RESPONSIVE — desktop ► tablet ► mobile ► extra-small
   ============================================================ */

/* Tablet (≤1100px) — keep prior single-column collapses */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .folder-list { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .folder-tab { flex: 1 1 240px; }
  .article { grid-template-columns: 1fr; }
  .article-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .doc-layout { grid-template-columns: 1fr; gap: 24px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .page-head { grid-template-columns: 1fr; }
  .lightbox__nav.prev { left: 8px; }
  .lightbox__nav.next { right: 8px; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .hero__photo { margin-left: 0; margin-top: 60px; }
  .hero__brackets { max-width: 480px; width: 80%; }
}

/* ===== Mobile (≤768px) — comprehensive ===== */
@media (max-width: 768px) {
  /* Containers */
  .wrap { padding: 0 14px; max-width: 100%; }

  /* === HEADER / NAV === */
  .site-header { backdrop-filter: blur(10px); }
  .nav {
    padding: 10px 14px;
    height: auto;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .brand { gap: 8px; flex-shrink: 1; min-width: 0; }
  .brand__logo { height: 24px; max-width: 70vw; }
  .nav__tabs {
    order: 3;
    flex: 1 0 100%;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 6px;
    margin: -2px 0 0;
    justify-content: flex-start;
  }
  .nav__tabs::-webkit-scrollbar { display: none; }
  .nav__tab {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav__tab.active::before, .nav__tab.active::after { width: 8px; height: 8px; }
  .nav__user { gap: 8px; margin-left: auto; }
  .nav__user-stat, .nav__user-id { display: none; }
  /* keep .sfx-toggle visible */

  /* === HERO === */
  .hero { padding-top: 30px; padding-bottom: 30px; }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
  }
  .hero__text { padding-left: 0; }
  .hero__sub { font-size: 11px; letter-spacing: 4px; margin-bottom: 14px; }
  .hero__sub::before, .hero__sub::after { max-width: 30px; }
  .hero__title { font-size: clamp(40px, 13vw, 64px); line-height: 0.96; }
  .hero__lead { font-size: 14px; line-height: 1.55; margin-bottom: 22px; max-width: 100%; }
  .hero__cta-row { flex-direction: column; gap: 10px; }
  .hero__cta-row .btn { width: 100%; justify-content: center; min-width: auto; }
  .hero__photo { margin-left: 0; margin-top: 8px; justify-content: center; }
  .hero__clones-img { width: 100%; max-width: 460px; }
  .hero__brackets { width: 95%; max-width: 360px; }

  /* === PAGE HEAD (tutorials/docs) === */
  .page-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .page-head__kicker { font-size: 10px; letter-spacing: 4px; }
  .page-head__title { font-size: clamp(34px, 10vw, 56px); }
  .page-head__lead { font-size: 14px; max-width: 100%; }

  /* === HOME GRID === */
  .home-grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 50px; }

  /* === AUDIT CARDS === */
  .audit-card { padding: 14px 16px 14px 20px; flex-direction: column; gap: 8px; align-items: stretch; }
  .audit-card__date { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; padding-top: 0; font-size: 10px; }
  .audit-card__date b { display: inline; font-size: 18px; }
  .audit-card__tag { font-size: 9px; }
  .audit-card__title { font-size: 14px; line-height: 1.3; }
  .audit-card__sum { font-size: 12px; line-height: 1.5; }
  .audit-card__author { font-size: 10px; }
  .audit-card::after { width: 80px; height: 60px; }

  /* === RAIL CARDS === */
  .rail-card { padding: 18px; }
  .rail-card__head { font-size: 12px; letter-spacing: 3px; }
  .rail-card__body { font-size: 13px; }
  .quick-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-tile { padding: 14px 12px; }
  .quick-tile__ico { width: 32px; height: 32px; }
  .quick-tile__ico .png-icon, .quick-tile__ico .icon { font-size: 16px; }
  .quick-tile__lab { font-size: 10px; letter-spacing: 1.5px; }
  .quick-tile__sub { font-size: 9px; }

  /* === SQUAD STRIP (homepage) === */
  .squad-strip { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .squad-pill { padding: 10px 6px; }
  .squad-pill__hex { width: 38px; height: 38px; }
  .squad-pill__hex img { width: 22px; height: 22px; }
  .squad-pill__lab { font-size: 9px; letter-spacing: 1px; }

  /* === SEC-HEAD === */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .sec-head__title { font-size: 12px; letter-spacing: 4px; }
  .sec-head__more { font-size: 10px; letter-spacing: 2px; }

  /* === TUTORIAL LIST === */
  .tut-page { padding-top: 28px; padding-bottom: 50px; }
  .tut-search input { padding: 12px 16px 12px 46px; font-size: 14px; }
  .tut-search::before { left: 16px; width: 14px; height: 14px; }
  .tut-cats { gap: 6px; margin-bottom: 24px; }
  .tut-cat { padding: 8px 12px; font-size: 10px; letter-spacing: 1.5px; }
  .tut-grid { grid-template-columns: 1fr; gap: 12px; }
  .tut-card { padding: 20px; min-height: 160px; }
  .tut-card__no { font-size: 28px; }
  .tut-card__title { font-size: 18px; }
  .tut-card__lead { font-size: 12px; }

  /* === ARTICLE (tutorial detail) === */
  .article-page { padding-top: 16px; padding-bottom: 50px; }
  .article { padding: 0; gap: 18px; }
  .article-side { position: static; max-height: none; overflow: visible; padding: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-1); }
  .article-side h4 { font-size: 10px; margin-bottom: 8px; }
  .article-side li a { padding: 8px 12px; font-size: 12px; }
  .article-main { max-width: 100%; }
  .article-hero { padding: 22px 18px; margin-bottom: 26px; }
  .article-hero__cat { font-size: 10px; letter-spacing: 4px; }
  .article-hero__title { font-size: clamp(26px, 8vw, 40px); line-height: 1.05; }
  .article-hero__lead { font-size: 14px; }
  .breadcrumbs { flex-wrap: wrap; font-size: 10px; letter-spacing: 1.5px; gap: 6px; }
  .article-nav { flex-direction: column; gap: 10px; align-items: stretch; }
  .article-nav .btn { width: 100%; justify-content: center; }

  /* === TUTORIAL BLOCKS === */
  .tb-h1 { font-size: 26px; margin: 28px 0 14px; }
  .tb-h2 { font-size: 22px; padding-left: 14px; margin: 24px 0 12px; }
  .tb-h2::before { width: 5px; height: 20px; }
  .tb-h3 { font-size: 18px; margin: 22px 0 10px; }
  .tb-p, .tb-ul li, .tb-ol li { font-size: 15px; line-height: 1.6; }
  .tb-ol li { padding-left: 38px; }
  .tb-ol li::before { width: 26px; }
  .tb-callout { padding: 16px 18px 16px 54px; }
  .tb-callout::before { left: 14px; top: 16px; width: 26px; height: 26px; }
  .tb-callout__title { font-size: 12px; letter-spacing: 2px; }
  .tb-image { margin-bottom: 22px; }
  .tb-image figcaption { font-size: 10px; letter-spacing: 1.5px; }
  .tb-table { font-size: 12px; }
  .tb-table th, .tb-table td { padding: 8px 10px; }
  kbd, .kbd { font-size: 11px; min-width: 28px; height: 26px; padding: 0 8px; }

  /* === DOCS LIST === */
  .docs-page { padding-top: 28px; padding-bottom: 50px; }
  .docs-grid { grid-template-columns: 1fr; gap: 18px; }
  .folder-list { position: static; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
  .folder-list::-webkit-scrollbar { display: none; }
  .folder-tab { flex: 0 0 220px; min-width: 220px; padding: 14px 16px; }
  .folder-tab__name { font-size: 12px; }
  .folder-tab__count { font-size: 9px; }
  .doc-shelf { grid-template-columns: 1fr; gap: 22px; }
  .doc-card { aspect-ratio: 513 / 332; }
  .doc-card__title { font-size: 14px; }
  .doc-card__sub { font-size: 10px; }
  .doc-card__head { font-size: 8px; }

  /* === DOC PARCHMENT (single doc) === */
  .doc-view { padding-top: 16px; padding-bottom: 50px; }
  .parchment { padding: 30px 18px 44px; --cut: 22px; }
  .parchment-head__pretitle { font-size: 9px; letter-spacing: 4px; }
  .parchment-head__title { font-size: clamp(22px, 7vw, 32px); }
  .parchment-head__sub { font-size: 13px; }
  .parchment-head__seal { width: 180px; height: 82px; }
  .parchment-head__seal::after { font-size: 12px; padding: 0 18px; }
  .parchment-foot { flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 18px; margin-top: 30px; }
  .parchment-foot__sig { font-size: 10px; padding: 6px 12px; }

  /* === BUTTONS === */
  .btn { padding: 12px 20px; font-size: 11px; letter-spacing: 2px; min-width: auto; min-height: 40px; }
  .btn--sm { padding: 8px 14px; font-size: 10px; min-height: 32px; }

  /* === FOOTER === */
  .brand-strip { padding: 16px 14px 4px; }
  .site-foot__brand { font-size: 12px; letter-spacing: 4px; }
  .site-foot__brand small { font-size: 9px; letter-spacing: 2px; }
  .site-foot { padding-top: 14px; padding-bottom: 16px; min-height: 80px; }
  .site-foot__disclaimer { width: calc(100% - 24px); top: 12px; opacity: 0.85; }

  /* === LIGHTBOX === */
  .lightbox { padding: 30px 14px; }
  .lightbox__inner { max-width: 100vw; }
  .lightbox__img { max-width: calc(100vw - 28px); --cut: 18px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav.prev { left: 4px; }
  .lightbox__nav.next { right: 4px; }
  .lightbox__close { top: -38px; right: 0; width: 32px; height: 32px; }
  .lightbox__cap { font-size: 11px; letter-spacing: 2px; }

  /* === MEDIA PICKER === */
  .media-picker { padding: 14px 6px; }
  .media-picker__inner { max-width: none; max-height: 100vh; }
  .media-picker__head { padding: 14px 16px; }
  .media-picker__head h3 { font-size: 12px; letter-spacing: 3px; }
  .media-picker__filter { padding: 10px 14px; gap: 4px; }
  .media-picker__chip { padding: 5px 10px; font-size: 9px; letter-spacing: 1.5px; }
  .media-picker__grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); padding: 12px 14px; gap: 6px; max-height: calc(100vh - 220px); }
  .media-picker__cell { padding: 4px; }
  .media-picker__cell img { height: 64px; }
  .media-picker__cell-name { font-size: 8px; }

  /* === SAVE-CONFIRM MODAL === */
  .save-confirm { padding: 14px 8px; }
  .save-confirm__inner { padding: 20px 16px; max-width: none; max-height: 96vh; --cut: 16px; }
  .save-confirm h3 { font-size: 14px; letter-spacing: 3px; }
  .save-confirm__lead { font-size: 12px; }
  .save-confirm__buttons { flex-direction: column; gap: 8px; }
  .save-confirm__buttons .btn { width: 100%; }

  /* Diff body monospace gets smaller */
  .diff-body { font-size: 10px; padding: 8px 0; max-height: 260px; }
  .diff-line { padding: 1px 8px; }

  /* === ADMIN === */
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line-1); }
  .admin-brand { font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .admin-nav button {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    text-align: center;
    border-left: 0;
    border-bottom: 2px solid var(--line-1);
    padding: 8px 6px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  .admin-nav button.active { border-left: 0; border-bottom-color: var(--acc); }
  .admin-main { padding: 18px 12px 60px; }
  .admin-head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 12px; margin-bottom: 18px; }
  .admin-head h2 { font-size: 16px; letter-spacing: 2px; }
  .admin-row { flex-wrap: wrap; gap: 8px; padding: 12px 14px; align-items: flex-start; }
  .admin-row__title { flex-basis: 100%; font-size: 13px; order: 0; }
  .admin-row__cat { font-size: 9px; }
  .admin-row__actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }

  /* Editor area & toolbar */
  .editor-area { max-width: none; padding: 14px 12px; font-size: 14px; }
  .editor-toolbar { padding: 6px; gap: 2px; }
  .tbtn { padding: 5px 8px; font-size: 10px; min-width: 24px; }
  .tbtn--lg { padding: 5px 10px; }
  .tbtn-sel, .tbtn-color { font-size: 10px; padding: 4px 6px; }
  .field input, .field select, .field textarea { font-size: 13px; padding: 8px 10px; }
  .field label { font-size: 10px; }

  /* Login */
  .login-box { margin: 6vh 14px; padding: 28px 22px; max-width: none; }
  .login-box__head h2 { font-size: 16px; letter-spacing: 3px; }

  /* Freeform: warn admins, allow horizontal scroll if too wide */
  .editor-area .tb-freeform {
    width: 100% !important;
    max-width: 100% !important;
  }
  .editor-area .tb-freeform > .ff-block-bar { top: -34px; gap: 4px; flex-wrap: wrap; }
  .editor-area .tb-freeform > .ff-block-bar button { padding: 3px 6px; font-size: 9px; letter-spacing: 0; }
  .editor-area .tb-freeform::after {
    content: 'FREEFORM лучше редактировать с десктопа';
    position: absolute; left: 0; right: 0; bottom: -22px;
    text-align: center;
    font-family: 'Acrom'; font-weight: 700;
    font-size: 9px; letter-spacing: 1.5px;
    color: var(--hl-orange);
    text-transform: uppercase;
    pointer-events: none;
  }

  /* === 404 === */
  main[class*="wrap"] > div[style*="font-size:240px"] { font-size: 140px !important; letter-spacing: -4px !important; }
}

/* ===== Extra-small (≤420px) — phones in portrait ===== */
@media (max-width: 420px) {
  .nav { padding: 8px 12px; gap: 8px; }
  .brand__logo { height: 22px; max-width: 60vw; }
  .nav__tab { padding: 6px 10px; font-size: 9px; letter-spacing: 1px; }
  .sfx-toggle { width: 28px; height: 28px; }

  .hero__title { font-size: clamp(32px, 11vw, 46px); }
  .hero__sub { font-size: 10px; letter-spacing: 3px; }
  .hero__lead { font-size: 13px; }

  .quick-tiles { grid-template-columns: 1fr; }
  .squad-strip { grid-template-columns: repeat(3, 1fr) !important; }

  .audit-card { padding: 12px 14px 12px 18px; }
  .audit-card__title { font-size: 13px; }

  .folder-tab { flex: 0 0 180px; min-width: 180px; }
  .doc-card { padding: 18% 14% 14%; }
  .doc-card__title { font-size: 13px; }
  .doc-card__head { font-size: 7px; }

  .article-hero { padding: 18px 14px; }
  .article-hero__title { font-size: clamp(22px, 7vw, 32px); }
  .tb-h1 { font-size: 22px; }
  .tb-h2 { font-size: 19px; }
  .tb-h3 { font-size: 16px; }
  .tb-p, .tb-ul li, .tb-ol li { font-size: 14px; }

  .parchment { padding: 24px 14px 36px; }
  .parchment-head__title { font-size: clamp(20px, 7vw, 28px); }

  .save-confirm__inner { padding: 18px 14px; }
  .admin-nav button { font-size: 9px; padding: 7px 4px; }
  .editor-area { padding: 12px 8px; }
}

/* Touch / no-hover devices: kill hover transforms, keep only native */
@media (hover: none) {
  .audit-card:hover { transform: none; }
  .doc-card:hover { transform: none; }
  .quick-tile:hover { transform: none; }
  .tut-card:hover { transform: none; }
  .rail-card:hover { transform: none; }
  .folder-tab:hover { transform: none; }
  .nav__tab:hover { color: var(--ink-2); }
  .nav__tab.active:hover { color: var(--ink-0); }
  .btn:hover { filter: none; transform: none; }
  .btn--accent:hover { filter: none; }
  .btn--ghost:hover { filter: none; background: rgba(86,128,200,0.06); }
  /* Keep tap-highlight subtle */
  * { -webkit-tap-highlight-color: rgba(86, 128, 200, 0.18); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Pause infinite animations when the tab is hidden — shaves a lot of idle GPU. */
html.is-hidden .bg-stars,
html.is-hidden .parchment-divider .gem,
html.is-hidden [data-aurebesh] { animation-play-state: paused !important; }

/* ============================================================ */
/* SITE HEADER REDESIGN — icon-first, hover-expand, socials      */
/* ============================================================ */
.site-header .nav__tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Подписи всегда видны; у каждого раздела свой цвет (--tab) — больше не
   путаемся в похожих «документных» иконках. */
.nav__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 12px 0 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.nav__btn:hover {
  color: var(--ink-0);
  background: color-mix(in srgb, var(--tab, var(--acc)) 14%, transparent);
  border-color: color-mix(in srgb, var(--tab, var(--acc)) 45%, transparent);
}
.nav__btn.is-active {
  color: var(--ink-0);
  background: color-mix(in srgb, var(--tab, var(--acc)) 18%, transparent);
  border-color: var(--tab, var(--acc));
}
/* Правила — акцентный пункт: подсвечен даже когда не активен */
.nav__btn--accent {
  color: var(--tab, var(--acc));
  border-color: color-mix(in srgb, var(--tab, var(--acc)) 40%, transparent);
}
.nav__btn--accent:hover { color: var(--ink-0); }
.nav__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 38px;
  flex-shrink: 0;
  color: var(--tab, var(--acc-2));
  opacity: 0.85;
}
.nav__btn:hover .nav__btn-icon,
.nav__btn.is-active .nav__btn-icon { opacity: 1; }
.nav__btn-icon svg { width: 18px; height: 18px; }
.nav__btn-label { padding-right: 2px; }
/* Командный пункт — только иконка (подпись в title-подсказке) */
.nav__btn--icononly { padding: 0; }
.nav__btn--icononly .nav__btn-label { display: none; }
.nav__btn--icononly .nav__btn-icon { width: 40px; }
.nav__btn--icononly .nav__btn-bar { left: 8px; right: 8px; }
.nav__btn-bar {
  position: absolute;
  left: 10px; right: 10px; bottom: 3px;
  height: 2px;
  background: var(--tab, var(--acc));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tab, var(--acc)) 60%, transparent);
}

/* Бургер (мобайл) */
.nav__burger {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink-1);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav__burger.is-x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-x span:nth-child(2) { opacity: 0; }
.nav__burger.is-x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильная выезжающая панель */
.navm { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.navm.is-open { visibility: visible; }
.navm__backdrop {
  position: absolute; inset: 0;
  background: rgba(4,7,16,0.66);
  opacity: 0; transition: opacity 0.24s ease;
}
.navm.is-open .navm__backdrop { opacity: 1; }
.navm__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: linear-gradient(180deg, #0a0f1f, #070a16);
  border-left: 1px solid var(--tab, var(--acc));
  box-shadow: -16px 0 40px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  padding: 18px 0 22px;
  overflow-y: auto;
}
.navm.is-open .navm__panel { transform: translateX(0); }
.navm__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 22px 16px;
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 8px;
}
.navm__title {
  font-family: 'Wadik', monospace; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--ink-3);
}
.navm__x {
  background: transparent; border: none; color: var(--ink-2);
  font-size: 20px; cursor: pointer; width: 36px; height: 36px;
}
.navm__x:hover { color: var(--hl-red, #e8603a); }
.navm__list { display: flex; flex-direction: column; }
.navm__item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  text-decoration: none;
  color: var(--ink-1);
  border-left: 4px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.navm__item:hover, .navm__item.is-active {
  background: color-mix(in srgb, var(--tab, var(--acc)) 16%, transparent);
  border-left-color: var(--tab, var(--acc));
  color: var(--ink-0);
}
.navm__item--accent { border-left-color: color-mix(in srgb, var(--tab, var(--acc)) 55%, transparent); }
.navm__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--tab, var(--acc-2));
}
.navm__ico svg { width: 22px; height: 22px; }
.navm__label {
  flex: 1;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 19px; letter-spacing: 1px; text-transform: uppercase;
}
.navm__chev { color: var(--ink-3); font-size: 16px; }
.navm__item.is-active .navm__chev,
.navm__item:hover .navm__chev { color: var(--tab, var(--acc)); }
.navm__socials {
  display: flex; gap: 6px; justify-content: center;
  margin-top: auto; padding: 18px 22px 4px;
  border-top: 1px solid var(--line-1);
}

/* Анимированный топо-фон (Canvas 2D, низкий FPS) */
#supTopo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}
/* Сценка-дуэль (только главная) — над топо, под контентом, средняя
   заметность. В DOM добавляется после #supTopo → рисуется поверх него. */
#supDuel {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}

.nav__socials {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.nav__social {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--ink-3);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  border: 1px solid transparent;
}
.nav__social svg { width: 18px; height: 18px; }
.nav__social:hover {
  color: var(--ink-0);
  background: rgba(86,128,200,0.10);
  border-color: var(--line-2);
  transform: translateY(-1px);
}
.nav__social--vk:hover { color: #4680c2; }
.nav__social--yt:hover { color: #ff3232; }
.nav__social--tg:hover { color: #29a6e1; }
.nav__social--steam:hover { color: #5cb6e1; }

@media (max-width: 1100px) {
  .nav__btn-label { display: none; }
  .nav__btn:hover, .nav__btn.is-active { max-width: 38px; }
}
@media (max-width: 720px) {
  .nav__socials { display: none; }
  .site-header .nav__tabs { gap: 2px; }
}

/* ============================================================ */
/* RULES PAGE — same parchment look as a single tutorial         */
/* ============================================================ */
.rules-page { padding-top: 32px; padding-bottom: 100px; }
.rules-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
}
.rule-pen {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-family: 'Acrom';
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hl-red);
  background: rgba(232, 90, 90, 0.10);
  border: 1px solid var(--hl-red);
}

/* ============================================================ */
/* ADMIN — RBAC: users / roles / permissions / audit            */
/* ============================================================ */
.role-chip {
  display: inline-block; padding: 1px 7px; margin-right: 4px;
  background: rgba(86,128,200,0.16);
  border: 1px solid var(--line-2);
  font-family: 'Acrom'; font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--acc-2);
}
.perm-chip {
  display: inline-block; padding: 1px 6px; margin: 0 4px 4px 0;
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--ink-2);
}
.role-check-list {
  display: grid; gap: 6px;
  padding: 12px; background: var(--bg-2); border: 1px solid var(--line-2);
}
.role-check {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Acrom'; font-size: 12px;
  padding: 4px 6px; cursor: pointer;
}
.role-check input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--line-2);
  background: var(--bg-1); position: relative; flex-shrink: 0;
}
.role-check input[type="checkbox"]:checked {
  background: var(--acc); border-color: var(--acc);
}
.role-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 1px; left: 5px;
  width: 4px; height: 9px; border: solid var(--bg-0);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.role-check input:disabled { opacity: 0.4; }

.perm-check-list {
  display: grid; gap: 12px;
  padding: 14px; background: var(--bg-2); border: 1px solid var(--line-2);
}
.perm-group {
  border: 1px solid var(--line-2); padding: 10px 14px;
  background: var(--bg-1); margin: 0;
}
.perm-group legend {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--acc-2); padding: 0 8px;
}
.perm-check {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; font-size: 12px; cursor: pointer;
}
.perm-check input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  flex-shrink: 0; margin-top: 2px; position: relative;
}
.perm-check input[type="checkbox"]:checked {
  background: var(--acc); border-color: var(--acc);
}
.perm-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 1px; left: 5px;
  width: 4px; height: 9px; border: solid var(--bg-0);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.perm-check code {
  background: rgba(86,128,200,0.12);
  padding: 1px 5px; font-size: 11px;
  color: var(--acc-2); margin-right: 6px;
}

/* Admin audit log */
.admin-audit-list { display: flex; flex-direction: column; gap: 6px; }
.audit-entry {
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-left: 3px solid var(--acc);
  padding: 10px 14px;
  font-family: 'Acrom'; font-size: 12px;
}
.audit-entry__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.audit-entry__time {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--ink-3);
}
.audit-entry__user {
  font-weight: 800; color: var(--ink-0);
  letter-spacing: 1px;
}
.audit-entry__action {
  background: rgba(86,128,200,0.12);
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--acc-2);
}
.audit-entry__target {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--ink-3);
}
.audit-entry__meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--ink-3); margin-top: 4px;
}
.audit-entry__detail summary {
  cursor: pointer; padding: 4px 0; font-size: 11px;
  color: var(--ink-3); margin-top: 4px;
}
.audit-entry__detail pre {
  background: var(--bg-2); padding: 10px;
  font-size: 10.5px; max-height: 240px; overflow: auto;
  border: 1px solid var(--line-1); margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-1);
}
.audit-entry--denied { border-left-color: var(--hl-red); background: rgba(232,90,90,0.04); }
.audit-entry--reverted { opacity: 0.55; }
.audit-entry__reverted {
  margin-top: 6px; font-size: 11px; color: var(--ink-3); font-style: italic;
}
.audit-entry__revert { margin-top: 8px; }

/* === audit overhaul: filter bar, tones, diff === */
.audit-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.audit-bar__search, .audit-bar__sel, .audit-bar__date {
  background: var(--bg-1); border:1px solid var(--line-2); color: var(--ink-0);
  font-family:'Acrom'; font-size:12px; padding:6px 10px;
}
.audit-bar__search { min-width:200px; flex:1 1 220px; }
.audit-bar__sel { max-width:240px; }
.audit-bar__dl { display:flex; align-items:center; gap:6px; color:var(--ink-2); font-size:11px; letter-spacing:1px; }
.audit-bar__date { color-scheme: dark; }

.audit-entry { margin-bottom:8px; }
.audit-entry--create  { border-left-color: var(--hl-green); }
.audit-entry--delete  { border-left-color: var(--hl-red); }
.audit-entry--content { border-left-color: var(--acc); }
.audit-entry--warn    { border-left-color: #e0a85a; }
.audit-entry--info    { border-left-color: var(--hl-blue); }
.audit-entry--muted   { border-left-color: var(--line-2); }
.audit-entry__label { font-weight:800; color:var(--ink-0); letter-spacing:.5px; font-size:12.5px; }
.audit-entry--create .audit-entry__label { color: var(--hl-green); }
.audit-entry--delete .audit-entry__label { color: var(--hl-red); }
.audit-entry--warn   .audit-entry__label { color: #e6b76a; }
.audit-entry__user { font-weight:700; color:var(--ink-1); letter-spacing:.5px; }
.audit-entry__usermeta { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3); }
.audit-entry__time { margin-left:auto; }
.audit-entry__foot { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.audit-entry__rawtag { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3); background:rgba(86,128,200,0.08); padding:1px 6px; }
.audit-entry__nodiff { font-size:11px; color:var(--ink-3); font-style:italic; margin-top:6px; }

.audit-entry__diffwrap { margin-top:8px; }
.audit-diff { display:flex; flex-direction:column; gap:3px; }
.audit-diff__f { display:flex; gap:8px; align-items:baseline; font-size:11.5px; flex-wrap:wrap; }
.audit-diff__f--block { flex-direction:column; gap:3px; }
.audit-diff__k { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--acc-2); min-width:90px; }
.audit-diff__add { color:var(--hl-green); }
.audit-diff__del { color:var(--hl-red); }
.audit-diff__chg { color:var(--ink-1); }
.audit-diff__old { color:var(--hl-red); text-decoration:line-through; opacity:.8; }
.audit-diff__new { color:var(--hl-green); }
.audit-diff__lines { font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--bg-2); border:1px solid var(--line-1); max-height:260px; overflow:auto; width:100%; }
.audit-dl { white-space:pre-wrap; padding:0 8px; }
.audit-dl--add { color:var(--hl-green); background:rgba(109,213,140,0.08); }
.audit-dl--del { color:var(--hl-red); background:rgba(232,90,90,0.08); }
.audit-dl--ctx { color:var(--ink-3); }

/* per-document (уставы) diff */
.audit-docdiff { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.audit-docdiff__item { border-left:2px solid var(--line-2); padding-left:10px; }
.audit-docdiff__t { font-size:12px; font-weight:700; margin-bottom:4px; }
.audit-docdiff__t--add { color:var(--hl-green); }
.audit-docdiff__t--del { color:var(--hl-red); }
.audit-docdiff__t--chg { color:var(--ink-0); }
.audit-docdiff__moved { font-weight:400; color:var(--ink-3); font-size:11px; }
.audit-docdiff__prev { font-size:11px; color:var(--ink-2); white-space:pre-wrap; max-height:140px; overflow:auto; background:var(--bg-2); border:1px solid var(--line-1); padding:6px 8px; }
.audit-docdiff__prev--add { border-left:2px solid var(--hl-green); }
.audit-docdiff__prev--del { border-left:2px solid var(--hl-red); opacity:.85; }
.audit-entry__gh { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--hl-blue); text-decoration:none; border:1px solid var(--line-2); padding:1px 6px; }
.audit-entry__gh:hover { background:rgba(94,161,240,0.12); }

/* content version history panel */
.audit-versions { margin-bottom:14px; background:var(--bg-1); border:1px solid var(--line-2); padding:8px 12px; }
.audit-versions > summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--ink-1); letter-spacing:.5px; }
.audit-versions__bar { display:flex; gap:8px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.audit-versions__bar select { background:var(--bg-0); border:1px solid var(--line-2); color:var(--ink-0); font-family:'Acrom'; font-size:12px; padding:6px 10px; }
.audit-versions__list { display:flex; flex-direction:column; gap:4px; }
.cv-item { display:flex; align-items:center; gap:12px; font-size:11.5px; padding:6px 8px; background:var(--bg-2); border:1px solid var(--line-1); flex-wrap:wrap; }
.cv-item__date { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-3); }
.cv-item__author { font-weight:700; color:var(--ink-1); }
.cv-item__msg { color:var(--ink-2); flex:1 1 160px; }
.cv-item__cur { color:var(--hl-green); font-size:10px; letter-spacing:1px; }
.cv-item__restore { margin-left:auto; }

/* No-access page */
.no-access-card {
  max-width: 540px; margin: 0 auto;
  padding: 40px 36px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--hl-red);
  text-align: center;
  --cut: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 30px rgba(232,90,90,0.25);
}
.no-access-card__seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 90px; height: 90px;
  margin-bottom: 18px;
  background: var(--hl-red);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px; letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,0.7);
  box-shadow: 0 0 24px rgba(232,90,90,0.45);
}
.no-access-card__seal::after { content: attr(data-stamp); }
.no-access-card__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 4px;
  color: var(--hl-red); text-transform: uppercase;
  margin-bottom: 10px;
}
.no-access-card__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: clamp(36px, 5vw, 64px); line-height: 0.95;
  margin: 0 0 16px;
  color: var(--ink-0);
  text-shadow: 0 0 24px rgba(232,90,90,0.5);
}
.no-access-card__lead {
  color: var(--ink-1); font-size: 14px; line-height: 1.5;
  margin: 0 0 12px;
}
.no-access-card__details {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-2);
  background: var(--bg-2); padding: 8px 12px;
  border-left: 2px solid var(--hl-red);
  text-align: left; margin-top: 10px;
}
.no-access-card__details code {
  background: rgba(86,128,200,0.14); padding: 1px 5px;
  color: var(--acc-2);
}

/* ============================================================ */
/* FACTIONS — list page                                          */
/* ============================================================ */
.factions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.faction-card {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--ink-1);
  --cut: 18px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: all var(--t-fast);
  overflow: hidden;
  min-height: 220px;
}
.faction-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--card-acc, var(--acc));
  box-shadow: 0 0 18px var(--card-acc, var(--acc));
}
.faction-card:hover {
  border-color: var(--card-acc, var(--acc));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-acc, var(--acc)) 12%, var(--bg-2)), var(--bg-1));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, var(--card-acc, var(--acc)) 30%, transparent);
}
.faction-card__short {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 36px;
  letter-spacing: 2px;
  color: var(--card-acc, var(--acc));
  background: rgba(0,0,0,0.3);
  border-right: 1px solid var(--line-2);
  text-shadow: 0 0 28px var(--card-acc, var(--acc));
}
.faction-card__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 22px;
}
.faction-card__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 3.5px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.faction-card__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 16px; letter-spacing: 1px;
  color: var(--ink-0);
  margin: 0; line-height: 1.25;
}
.faction-card__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
  margin-top: 6px;
}
.faction-card__stat { display: flex; flex-direction: column; }
.faction-card__stat-lab {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.faction-card__stat-val {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; color: var(--ink-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.faction-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-1);
}
.faction-card__money {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  color: var(--card-acc, var(--acc-2));
  font-variant-numeric: tabular-nums;
}
.faction-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px;
  color: var(--ink-1);
  text-transform: uppercase;
}
.faction-card__cta .icon { width: 12px; height: 12px; fill: currentColor; }
.faction-card:hover .faction-card__cta { color: var(--card-acc, var(--acc-2)); }

@media (max-width: 768px) {
  .factions-grid { grid-template-columns: 1fr; }
  .faction-card { grid-template-columns: 80px 1fr; min-height: 180px; }
  .faction-card__short { font-size: 28px; }
}

/* ============================================================ */
/* FACTION — detail page                                         */
/* ============================================================ */
.faction-page {
  padding-top: 28px;
  padding-bottom: 100px;
  --faction-acc: var(--acc);
}
.faction-head {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line-1);
  margin-top: 24px;
}
.faction-head__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 4.5px;
  color: var(--faction-acc);
  text-transform: uppercase;
}
.faction-head__title {
  font-family: 'Acrom'; font-weight: 900;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: 1px;
  margin: 0;
  color: var(--ink-0);
  text-shadow: 0 0 28px color-mix(in srgb, var(--faction-acc) 50%, transparent);
}
.faction-head__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.faction-stat {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--faction-acc);
  display: flex; flex-direction: column;
}
.faction-stat__lab {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 9px; letter-spacing: 2.5px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.faction-stat__val {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 17px; color: var(--ink-0);
  margin-top: 4px;
}

.faction-leadership {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.leadership-card {
  padding: 18px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.leadership-card:hover {
  border-color: var(--faction-acc);
  background: color-mix(in srgb, var(--faction-acc) 6%, var(--bg-1));
}
.leadership-card--leader { border-left: 4px solid var(--faction-acc); }
.leadership-card__role {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.leadership-card__name {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px;
  color: var(--ink-0);
}
.leadership-card__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  margin-left: 4px;
}
.leadership-card__sub {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--faction-acc);
  margin-top: 4px;
  text-transform: uppercase;
}
.leadership-card__empty {
  font-style: italic;
  color: var(--hl-red);
  font-size: 13px;
}
.deputy-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--line-1);
  font-size: 13px;
}
.deputy-row:first-of-type { border-top: 0; }
.deputy-row__rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faction-acc);
}

/* Members table */
.faction-members { margin-top: 36px; }
.faction-members__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap; gap: 14px;
}
.faction-members__head h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 22px; letter-spacing: 2px;
  color: var(--ink-0);
  margin: 0;
}
.faction-members__filter {
  display: flex; align-items: center; gap: 10px;
}
.faction-members__filter input {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  color: var(--ink-0);
  font-family: 'Acrom';
  width: 280px;
}
.faction-members__filter input:focus { outline: none; border-color: var(--faction-acc); }
.faction-members__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.faction-members__count .fm-count-active { color: var(--hl-green); }
/* «Онлайн за 2 недели» — переключатель активности в ростере */
.fm-active-toggle {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: 'Acrom';
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.fm-active-toggle:hover { border-color: var(--faction-acc); color: var(--ink-0); }
.fm-active-toggle.is-on {
  border-color: var(--hl-green);
  color: var(--hl-green);
  background: color-mix(in srgb, var(--hl-green) 12%, transparent);
}
.seen-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.seen-dot--on  { background: var(--hl-green); box-shadow: 0 0 5px var(--hl-green); }
.seen-dot--off { background: var(--ink-3); opacity: .5; }
.faction-table tr.row-off14 .col-name b,
.faction-table tr.row-off14 .col-last { opacity: .55; }
.pt2w-acc { font-size: 9px; color: var(--ink-3); letter-spacing: .03em; white-space: nowrap; }
.pt2w-na { color: var(--ink-3); }

/* ── Публичная «Структура» (/structure) ── */
.struct-loading, .struct-empty { color: var(--ink-3); padding: 40px 0; text-align: center; font-family: 'Acrom'; line-height: 1.7; }
.struct-empty a { color: var(--acc); }
.struct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.struct-card { display: block; padding: 18px 20px; background: var(--bg-1); border: 1px solid var(--line-2); text-decoration: none; transition: border-color .15s, transform .12s, box-shadow .15s; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.struct-card:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.struct-card__name { font-family: 'Acrom'; font-weight: 800; color: var(--ink-0); font-size: 15px; letter-spacing: 1px; }
.struct-card__meta { font-size: 11px; color: var(--ink-3); margin-top: 7px; font-family: 'JetBrains Mono', monospace; }
.struct-vhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.struct-back { color: var(--ink-2); text-decoration: none; font-size: 12px; font-family: 'Acrom'; letter-spacing: 1px; border: 1px solid var(--line-2); padding: 7px 12px; transition: border-color .15s, color .15s; }
.struct-back:hover { border-color: var(--acc); color: var(--ink-0); }
.struct-title { font-family: 'Acrom'; font-weight: 800; color: var(--ink-0); font-size: 22px; letter-spacing: 2px; margin: 0; text-transform: uppercase; }
.struct-stage { position: relative; width: 100%; height: calc(100vh - 250px); min-height: 460px; margin-top: 14px; background: var(--bg-1); border: 1px solid var(--line-2); overflow: hidden; cursor: grab; touch-action: none; }
.struct-stage.grabbing { cursor: grabbing; }
.struct-stage > svg { width: 100%; height: 100%; display: block; }
.struct-hint { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--ink-3); pointer-events: none; font-family: 'JetBrains Mono', monospace; opacity: .8; }
.struct-fs-btn { position: absolute; right: 12px; top: 12px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-1); width: 34px; height: 34px; font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
.struct-fs-btn:hover { border-color: var(--acc); color: var(--ink-0); }
body.struct-noselect { user-select: none; }
body.struct-fs .struct-stage { position: fixed; inset: 0; height: 100vh; min-height: 0; margin: 0; z-index: 1000; border: 0; }
/* read-only узлы: кликабельны (открывают карточку в модалке) — подсветка на ховер */
.bc-node--ro { cursor: pointer; }
.bc-node--ro .bnode { transition: border-color .14s ease, box-shadow .14s ease, filter .14s ease; }
.bc-node--ro:hover .bnode { border-color: var(--c, var(--acc)); box-shadow: 0 0 0 2px var(--c, var(--acc)), 0 0 24px rgba(86,128,200,.45); filter: brightness(1.07); }
.bc-node--ro .bnode__chip { cursor: pointer; }
/* высокие карточки клампятся — заголовок всегда виден, низ затухает + подсказка */
/* (карточки больше не клампятся целиком — тело режется по строкам в .bnode__desc,
   заголовок всегда виден; полный текст — в модалке) */

/* модалка полной карточки узла */
.struct-node-modal .sup-modal { border-color: var(--c, var(--acc)); }
.struct-node-modal .sup-modal__close { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); width: 32px; height: 32px; cursor: pointer; font-size: 14px; line-height: 1; transition: border-color .15s, color .15s; }
.struct-node-modal .sup-modal__close:hover { border-color: var(--hl-red); color: var(--hl-red); }
.snm-kicker { font-family: 'Acrom'; font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.snm-sub { color: var(--ink-2); font-size: 13px; margin-bottom: 12px; }
.snm-img { margin-bottom: 12px; }
.snm-img img { max-width: 100%; border: 1px solid var(--line-2); border-radius: 8px; display: block; }
.snm-body { color: var(--ink-1); font-size: 14px; line-height: 1.6; word-break: break-word; }
.snm-body .md-h1 { font-size: 1.4em; font-weight: 800; margin: .35em 0 .15em; }
.snm-body .md-h2 { font-size: 1.2em; font-weight: 800; margin: .3em 0 .15em; }
.snm-body .md-h3 { font-size: 1.08em; font-weight: 700; margin: .25em 0 .1em; }
.snm-body .md-q { border-left: 3px solid var(--acc); padding: .1em .7em; margin: .35em 0; opacity: .92; font-style: italic; }
.snm-body .md-ul, .snm-body .md-ol { margin: .25em 0; padding-left: 1.4em; }
.snm-body .md-sp { height: .6em; }
.snm-body strong { font-weight: 800; } .snm-body em { font-style: italic; }
.snm-body code { background: rgba(255,255,255,.1); padding: 0 .3em; border-radius: 4px; font-family: monospace; }
.snm-empty { color: var(--ink-3); }
.snm-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.snm-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 12px; border: 1px solid var(--line-2); color: var(--ink-1); font-size: 12.5px; transition: border-color .12s, color .12s; }
.snm-link:hover { border-color: var(--acc); color: var(--ink-0); }
/* тематический скролл в модалках карточки */
.struct-node-modal .sup-modal__body { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.struct-node-modal .sup-modal__body::-webkit-scrollbar { width: 8px; }
.struct-node-modal .sup-modal__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.struct-node-modal .sup-modal__body::-webkit-scrollbar-thumb:hover { background: var(--acc); background-clip: padding-box; }

/* ── Блок «Структура» в сайдбаре Уставов ── */
.struct-promo { display: block; text-decoration: none; padding: 14px 16px; margin-bottom: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 24%, var(--bg-1)), var(--bg-1)); border: 1px solid var(--acc); border-radius: 10px; box-shadow: 0 0 0 1px rgba(86,128,200,.15), 0 8px 22px rgba(0,0,0,.35); transition: transform .12s, box-shadow .15s; }
.struct-promo:hover { border-color: var(--acc-2, #6f9bff); box-shadow: 0 0 0 1px var(--acc), 0 0 22px rgba(86,128,200,.35), 0 10px 28px rgba(0,0,0,.45); }
.struct-promo__head { font-family: 'Acrom'; font-weight: 800; color: var(--ink-0); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.struct-promo__ic { color: var(--acc-2); font-size: 16px; line-height: 1; }
.struct-promo__sub { font-size: 11px; color: var(--ink-2); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.struct-promo__list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.struct-promo__item, .struct-promo__more { display: block; text-decoration: none; padding: 7px 12px; color: var(--ink-1); font-size: 12.5px; border-left: 2px solid var(--line-2); transition: border-color .12s, color .12s, background .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.struct-promo__item:hover, .struct-promo__more:hover { border-left-color: var(--acc); color: var(--ink-0); background: rgba(86,128,200,.08); }
.struct-promo__more { color: var(--acc-2); }
.faction-table-wrap {
  overflow-x: auto;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.faction-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Acrom';
  font-size: 12.5px;
}
.faction-table th {
  text-align: left;
  padding: 12px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.faction-table th.sortable { cursor: pointer; user-select: none; transition: color .12s; }
.faction-table th.sortable:hover { color: var(--ink-1); }
.faction-table th.sortable::after { content: ' ⇅'; opacity: .35; font-size: 11px; letter-spacing: 0; }
.faction-table th.is-sort-asc, .faction-table th.is-sort-desc { color: var(--acc-2); }
.faction-table th.is-sort-asc::after  { content: ' ▲'; opacity: 1; }
.faction-table th.is-sort-desc::after { content: ' ▼'; opacity: 1; }
.faction-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-1);
  vertical-align: middle;
}
.faction-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast);
}
.faction-table tbody tr:hover {
  background: color-mix(in srgb, var(--faction-acc) 8%, transparent);
}
.faction-table .col-num,
.faction-table .col-lvl,
.faction-table .col-time { font-family: 'JetBrains Mono', monospace; color: var(--ink-2); white-space: nowrap; }
.faction-table .col-rank2 { white-space: nowrap; }
.rank-name { color: var(--ink-0); font-weight: 700; font-size: 12px; }
.rank-short {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: rgba(86,128,200,0.16);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--faction-acc);
  border: 1px solid var(--line-2);
}
.faction-table .col-name b { color: var(--ink-0); }
.faction-table .col-last { font-size: 11px; color: var(--ink-2); }
.faction-table .col-last .online { color: var(--hl-green); font-weight: 700; }
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.role-badge--leader {
  background: var(--faction-acc);
  color: var(--bg-0);
  box-shadow: 0 0 12px var(--faction-acc);
}
.role-badge--deputy {
  background: rgba(86,128,200,0.14);
  border: 1px solid var(--faction-acc);
  color: var(--faction-acc);
}
.warn-chip {
  display: inline-block;
  padding: 2px 8px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase;
}
.warn-chip--active { background: rgba(232,90,90,0.18); color: var(--hl-red); border: 1px solid var(--hl-red); }
.warn-chip--clean { background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line-2); }

/* Faction logs */
.faction-logs { margin-top: 36px; }
.faction-logs h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 22px; letter-spacing: 2px;
  color: var(--ink-0);
  margin: 0 0 16px;
}
.faction-logs__list {
  list-style: none; margin: 0; padding: 0;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.log-row {
  display: grid;
  grid-template-columns: 160px 200px 100px 1fr;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-1);
  font-family: 'Acrom'; font-size: 12px;
  align-items: center;
}
.log-row:last-child { border-bottom: 0; }
.log-row__time { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.log-row__action {
  color: var(--ink-0);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 12.5px;
  text-transform: none;
}
.log-row__amount { font-family: 'JetBrains Mono', monospace; text-align: right; font-weight: 700; font-size: 12px; }
.log-row__amount.pos { color: var(--hl-green); }
.log-row__amount.neg { color: var(--hl-red); }
.log-row__amount--idle { color: var(--ink-3); font-weight: 400; }
.log-row__actor { color: var(--ink-2); font-size: 11px; letter-spacing: 0.5px; }
.log-row__system {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(86,128,200,0.10);
  border: 1px solid var(--line-2);
  font-family: 'Acrom';
  font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.log-row__extra { grid-column: 1/-1; color: var(--ink-3); font-size: 11px; padding-left: 0; margin-top: 2px; font-style: italic; }

@media (max-width: 1100px) {
  .faction-leadership { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Member modal */
.member-modal { max-width: 720px; }
.member-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.member-stat {
  display: flex; flex-direction: column;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(86,128,200,0.07), var(--bg-2));
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--acc);
  transition: border-left-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.member-stat:hover {
  border-left-color: var(--acc-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.member-stat__lab {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 2px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.member-stat__val {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; color: var(--ink-0);
  margin-top: 3px;
  word-break: break-word;
}
.member-section {
  margin-bottom: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line-1);
}
.member-section h4 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acc-2);
  margin: 0 0 10px;
}
.warn-list, .note-list { list-style: none; margin: 0 0 12px; padding: 0; }
.warn-row, .note-row {
  padding: 8px 12px;
  background: var(--bg-2);
  border-left: 3px solid var(--line-2);
  margin-bottom: 6px;
}
.warn-row--active { border-left-color: var(--hl-red); }
.warn-row--removed { opacity: 0.55; }
.warn-row__head, .note-row__head {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--ink-3);
  margin-bottom: 4px;
}
.warn-row__by, .note-row__by { color: var(--acc-2); font-weight: 700; letter-spacing: 1px; }
.warn-row__date, .note-row__date { font-family: 'JetBrains Mono', monospace; }
.warn-row__head button, .note-row__head button { margin-left: auto; }
.warn-row__reason, .note-row__text { font-size: 13px; line-height: 1.4; color: var(--ink-1); }
.warn-row__rm { font-size: 11px; color: var(--ink-3); margin-top: 4px; font-style: italic; }
.warn-form, .note-form {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px;
}
.warn-form input, .note-form textarea, .note-form input {
  background: var(--bg-1); border: 1px solid var(--line-2);
  padding: 8px 12px;
  color: var(--ink-0);
  font-family: 'Acrom'; font-size: 13px;
}
.note-form textarea { min-height: 60px; resize: vertical; }
.member-section .empty {
  padding: 12px; color: var(--ink-3); font-style: italic; font-size: 12px;
}

/* ============================================================ */
/* ORDERS — public list + admin chips                            */
/* ============================================================ */
.orders-page {
  padding-top: 60px;
  padding-bottom: 100px;
}
.orders-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin-top: 40px;
}
@media (max-width: 768px) {
  .orders-page { padding-top: 28px; padding-bottom: 50px; }
  .orders-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
}

/* Standalone order card — distinct from doc-card. */
.order-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--ink-1);
  --cut: 16px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: all var(--t-fast);
  overflow: hidden;
  min-height: 180px;
}
.order-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc-glow);
  transition: width 0.25s cubic-bezier(.22,.61,.36,1);
}
.order-card:hover {
  border-color: var(--acc);
  background: linear-gradient(180deg, rgba(86,128,200,0.12), var(--bg-1));
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.5), 0 0 24px rgba(86,128,200,0.25);
}
.order-card:hover::before { width: 5px; }

.order-card__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.order-card__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink-0);
  margin: 0;
  text-shadow: 0 0 14px rgba(86,128,200,0.35);
}
.order-card__sub {
  font-family: 'Acrom'; font-weight: 500;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-2);
  margin: -2px 0 0;
  line-height: 1.45;
}
.order-card__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-1);
  margin-top: auto;
}
.order-card__arrow {
  position: absolute;
  right: 18px; top: 22px;
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  background: var(--acc);
  color: var(--bg-0);
  transition: all var(--t-fast);
}
.order-card:hover .order-card__arrow {
  background: var(--acc-2);
  transform: translate(2px, -2px);
  box-shadow: 0 0 14px var(--acc-glow);
}
.order-card__arrow .icon { width: 13px; height: 13px; fill: currentColor; }

.order-author {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-0);
  text-transform: uppercase;
}
.order-date {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  color: var(--ink-2);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
}
.order-time {
  margin-left: 6px;
  color: var(--acc-2);
}
.order-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.order-chip {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(86,128,200,0.14);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.order-chip-mini {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(86,128,200,0.14);
  color: var(--acc-2);
  font-family: 'Acrom';
  font-size: 10px;
  letter-spacing: 1px;
  margin-right: 4px;
  text-transform: uppercase;
}
.order-aud-chip {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(86,128,200,0.18);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.order-audiences {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  max-width: 60%;   /* leave room for the signature on the right */
}

/* Audience picker modal */
.aud-modal { max-width: 540px; }
.aud-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.aud-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.aud-item:hover { border-color: var(--acc); background: rgba(86,128,200,0.10); }
.aud-item input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.aud-item input[type="checkbox"]:checked {
  background: var(--acc);
  border-color: var(--acc);
}
.aud-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 6px;
  width: 4px; height: 9px;
  border: solid var(--bg-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.aud-item__label {
  flex: 1;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: 1px;
  color: var(--ink-0);
}
.aud-item__chan {
  font-family: 'Acrom'; font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Admin nav: hidden role-restricted buttons */
.admin-nav button.hidden { display: none; }

/* ============================================================ */
/* SIGNATURE MODAL (admin) — opens after confirm-save           */
/* ============================================================ */
.sup-modal__backdrop {
  position: fixed; inset: 0;
  z-index: 280;
  background: rgba(0,4,12,0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
}
.sup-modal__backdrop.show {
  opacity: 1;
  visibility: visible;
}
/* Старый паттерн модалки (faction.html + потенциально другие страницы):
   .sup-modal__backdrop > .sup-modal. Селекторы СКОУПлены родителем, чтобы
   НЕ конфликтовать с newer SUP.modal.alert/confirm — там `.sup-modal` сам
   является fullscreen-оверлеем, см. блок ~5910. Без скоупа newer-правило
   с `opacity:0; position:fixed` делает faction-modal невидимой. */
.sup-modal__backdrop > .sup-modal {
  background: var(--bg-1);
  border: 1px solid var(--acc);
  width: 100%; max-width: 640px;
  max-height: 92vh;
  max-height: calc(100dvh - 56px);   /* учитываем padding бэкдропа; dvh — для мобильного UI */
  margin: auto;                       /* центрируем при скролле бэкдропа (safety-net) */
  overflow: hidden;                   /* скроллит ТОЛЬКО body — шапка/футер закреплены */
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(86,128,200,0.2);
  --cut: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  display: flex;
  flex-direction: column;
  /* Перебиваем глобальное правило `.sup-modal { ... }` ниже по файлу: */
  position: static;
  top: auto; left: auto;
  height: auto;
  opacity: 1;
  backdrop-filter: none;
  padding: 0;
  z-index: auto;
}
.sup-modal__backdrop .sup-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--line-2);
  flex: 0 0 auto;   /* закреплён сверху, не уезжает при скролле тела */
  background: linear-gradient(180deg, rgba(86,128,200,0.10), transparent);
}
.sup-modal__backdrop .sup-modal__title {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 16px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-0);
  text-shadow: 0 0 12px var(--acc-glow);
  margin-bottom: 0;
}
.sup-modal__backdrop .sup-modal__title .ed-ic {
  width: 18px; height: 18px;
  fill: var(--acc-2);
}
.sup-modal__backdrop .sup-modal__close {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.sup-modal__backdrop .sup-modal__close:hover {
  border-color: var(--hl-red);
  color: var(--hl-red);
}
.sup-modal__backdrop .sup-modal__close .ed-ic { width: 14px; height: 14px; fill: currentColor; }
.sup-modal__backdrop .sup-modal__body {
  padding: 22px 28px;
  flex: 1 1 auto;
  min-height: 0;          /* критично для скролла внутри flex-колонки */
  overflow-y: auto;       /* скроллится тело, а не вся модалка */
  overscroll-behavior: contain;
}
.sup-modal__backdrop .sup-modal__foot {
  display: flex; gap: 10px;
  padding: 16px 28px 22px;
  border-top: 1px solid var(--line-1);
  justify-content: flex-end;
  flex: 0 0 auto;   /* закреплён снизу */
}
.sup-modal__backdrop .sup-modal__foot .btn--accent {
  display: inline-flex; align-items: center; gap: 8px;
}

/* Sign pad inside the modal */
.sig-modal__hint {
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 16px;
  letter-spacing: 0.4px;
  line-height: 1.55;
}
.sig-modal__pad-wrap {
  position: relative;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  height: 200px;
  margin-bottom: 10px;
  overflow: hidden;
  --cut: 12px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.sig-modal__pad {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.sig-modal__placeholder {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Acrom';
  font-size: 13px; letter-spacing: 4px;
  color: var(--ink-3);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.5;
}
.sig-modal__baseline {
  position: absolute;
  left: 16px; right: 16px;
  bottom: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(86,128,200,0.45), transparent);
  pointer-events: none;
}
.sig-modal__pad-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
  align-items: center;
}
.sig-modal__pad-actions .btn--sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
}
.sig-modal__pad-actions .btn--sm .ed-ic {
  width: 14px; height: 14px;
  fill: currentColor;
}
.sig-modal__sep {
  display: inline-block;
  width: 1px; height: 18px;
  background: var(--line-2);
  margin: 0 4px;
}

.sig-modal__label {
  display: block;
  font-family: 'Acrom';
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.sig-modal__name {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.5px;
  outline: none;
  transition: border-color var(--t-fast);
}
.sig-modal__name:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 0 12px var(--acc-glow);
}
.sig-modal__error {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hl-red);
  background: rgba(232, 90, 90, 0.10);
  color: var(--hl-red);
  font-size: 12px;
  letter-spacing: 0.4px;
}
.sig-modal__error--shake {
  animation: sig-shake 0.4s;
}
@keyframes sig-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ============================================================ */
/* DOC SIGNATURE — fills the bottom-right slot of the parchment */
/* ============================================================ */
/* Footer variant with signature: kill the divider line and align top */
.parchment-foot--with-sig {
  border-top: 0;
  align-items: flex-start;
  margin-top: 60px;
  padding-top: 0;
  gap: 24px;
}
.parchment-foot--with-sig .parchment-foot__archive {
  align-self: flex-end;
  padding-bottom: 6px;
  flex: 1 1 0;          /* shrink-fit so the signature on the right always stays visible */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Override the legacy hex-stamp look — turn it into a flexible signature container */
.parchment-foot--with-sig .parchment-foot__sig {
  border: 0;
  background: none;
  padding: 0;
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: inherit;
  color: inherit;
  width: 280px;
  max-width: 60%;
  text-align: right;
  position: relative;
  display: block;
}
.doc-signature__svg {
  display: block;
  width: 100%;
  height: 96px;
  margin-left: auto;
  filter: drop-shadow(0 0 6px rgba(128, 165, 230, 0.35));
}
.doc-signature__line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-2) 30%, var(--acc-2));
  margin: 4px 0 8px;
  opacity: 0.55;
}
.doc-signature__name {
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--ink-0);
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--acc-glow);
}
.doc-signature__date {
  margin-top: 4px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
}
.doc-signature__time {
  color: var(--acc-2);
  margin-left: 6px;
}
.doc-signature__empty {
  font-family: 'Acrom';
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-3);
  font-style: italic;
}

/* ============================================================ */
/* DOC PREV/NEXT NAVIGATION                                     */
/* Tabs sliding out from under the parchment.                   */
/* — desktop: thin sliver attached to doc edge, expands on hover */
/* — mobile (≤1280px): bottom row of tutorial-style buttons      */
/* ============================================================ */
.doc-stage {
  position: relative;
}
/* Bring parchment above the nav slivers so they look "tucked under" it */
.doc-stage > .parchment {
  position: relative;
  z-index: 10;
}
.doc-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  text-decoration: none;
  font-family: 'Acrom';
  letter-spacing: 1.5px;
  font-size: 11px;
  text-transform: uppercase;
  height: 110px;
  width: 38px;        /* sliver width when idle */
  overflow: hidden;
  z-index: 5;          /* below the parchment (z:10) — peeks from underneath */
  /* Slow, smooth expansion */
  transition:
    width 0.34s cubic-bezier(.22,.61,.36,1),
    border-color 0.2s ease,
    box-shadow 0.3s ease,
    z-index 0s 0.34s;  /* delay z-index change so it doesn't jump while collapsing */
}
.doc-nav:hover {
  width: 250px;
  border-color: var(--acc);
  box-shadow: 0 0 28px rgba(86,128,200,0.4);
  z-index: 50;        /* on hover lift above the parchment */
  transition:
    width 0.34s cubic-bezier(.22,.61,.36,1),
    border-color 0.2s ease,
    box-shadow 0.3s ease,
    z-index 0s 0s;
}
.doc-nav.hidden { display: none; }

/* PREV: anchored to the right edge — pinned just under the doc's left edge.
   The sliver visibly pokes out by ~22px to the left of the parchment.
   On hover it grows to 250px, expanding leftward (right edge stays fixed). */
.doc-nav--prev {
  right: calc(50% + 472px);   /* parchment max-width 980px → 490px from center, minus a 18px overlap so the right edge is tucked under the doc */
  border-right: 0;
  flex-direction: row;
}
.doc-nav--next {
  left: calc(50% + 472px);
  border-left: 0;
  flex-direction: row-reverse;
}

.doc-nav__arrow {
  display: inline-flex;
  width: 38px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: var(--acc);
  color: var(--bg-0);
  transition: background 0.2s ease;
}
.doc-nav:hover .doc-nav__arrow {
  background: var(--acc-2);
}
.doc-nav__arrow .icon {
  width: 16px; height: 16px;
  fill: currentColor;
}
.doc-nav__lab {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  flex: 1;
  min-width: 0;
  /* Keep label visible during expansion: don't fade in, just let overflow do its thing */
  overflow: hidden;
  white-space: nowrap;
}
.doc-nav--prev .doc-nav__lab { text-align: right; }
.doc-nav--next .doc-nav__lab { text-align: left; }
.doc-nav__hint {
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 2px;
  font-weight: 600;
}
.doc-nav__name {
  color: var(--ink-0);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-shadow: 0 0 6px var(--acc-glow);
}

/* Mobile/tablet: hide sticky side-nav, show bottom row */
.doc-mobile-nav {
  display: none;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-1);
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.doc-mobile-nav .btn {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(50% - 6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-mobile-nav .btn .icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.doc-mobile-nav .btn span { overflow: hidden; text-overflow: ellipsis; }
.doc-mobile-nav .btn.hidden { display: none; }

@media (max-width: 1280px) {
  .doc-nav { display: none !important; }
  .doc-mobile-nav { display: flex; }
}
@media (max-width: 768px) {
  .doc-signature {
    width: 100%;
    margin-top: 40px;
  }
  .parchment-foot--with-sig { flex-direction: column; align-items: stretch; gap: 18px; }
  .parchment-foot--with-sig .parchment-foot__sig { width: 100%; max-width: none; }
  .parchment-foot--with-sig .parchment-foot__archive { align-self: flex-start; }
  .doc-signature__svg { height: 80px; }
  .sup-modal__backdrop > .sup-modal {
    max-width: 100%;
    --cut: 14px;
  }
  .sup-modal__backdrop .sup-modal__head,
  .sup-modal__backdrop .sup-modal__body,
  .sup-modal__backdrop .sup-modal__foot {
    padding-left: 18px; padding-right: 18px;
  }
  .sig-modal__pad-wrap { height: 160px; }
  .doc-mobile-nav .btn { max-width: 100%; flex: 1 1 100%; }
}

/* ============================================================
   "В разработке" — баннер для скрытых разделов (dev.html).
   Стилистика повторяет .no-access-card но в orange/yellow ключе.
   ============================================================ */
.dev-card {
  position: relative;
  max-width: 580px; margin: 0 auto;
  padding: 44px 36px 36px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--hl-orange);
  text-align: center;
  --cut: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 30px rgba(243,149,86,0.22);
}
.dev-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(243,149,86,0.06) 0 12px, transparent 12px 24px);
  clip-path: inherit;
  pointer-events: none;
  opacity: 0.55;
}
.dev-card__seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  margin-bottom: 22px;
  background: var(--hl-orange);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 16px; letter-spacing: 3px;
  color: #1a1108;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
  box-shadow: 0 0 28px rgba(243,149,86,0.5);
  position: relative; z-index: 1;
}
.dev-card__seal::after { content: attr(data-stamp); }
.dev-card__kicker {
  position: relative; z-index: 1;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 4px;
  color: var(--hl-orange); text-transform: uppercase;
  margin-bottom: 12px;
}
.dev-card__title {
  position: relative; z-index: 1;
  font-family: 'Acrom'; font-weight: 800;
  font-size: clamp(36px, 5vw, 60px); line-height: 0.95;
  margin: 0 0 18px;
  color: var(--ink-0);
  text-shadow: 0 0 22px rgba(243,149,86,0.45);
  letter-spacing: 1px;
}
.dev-card__lead {
  position: relative; z-index: 1;
  color: var(--ink-1); font-size: 14px; line-height: 1.55;
  margin: 0 0 18px;
}
.dev-card__beams {
  position: relative; z-index: 1;
  display: flex; gap: 6px; justify-content: center;
  margin: 4px auto 0;
}
.dev-card__beams span {
  display: block; width: 36px; height: 3px;
  background: var(--hl-orange);
  opacity: 0.35;
  animation: dev-beam 1.6s ease-in-out infinite;
}
.dev-card__beams span:nth-child(2) { animation-delay: 0.2s; }
.dev-card__beams span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dev-beam {
  0%, 100% { opacity: 0.18; transform: scaleX(0.7); }
  50%      { opacity: 0.85; transform: scaleX(1.2); }
}

/* ============================================================
   Settings → Видимость страниц (admin)
   ============================================================ */
.page-vis-list {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 18px;
}
.page-vis-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.page-vis-row__name {
  flex: 1;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: 1.5px;
  color: var(--ink-0); text-transform: uppercase;
}
.page-vis-row__hint {
  font-family: 'Acrom'; font-weight: 600;
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
}
.page-vis-row__hint.is-visible { color: var(--hl-green); }
.page-vis-row__hint.is-hidden  { color: var(--hl-orange); }
.page-vis-toggle {
  position: relative;
  width: 44px; height: 22px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.page-vis-toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--ink-3);
  transition: left 0.18s, background 0.18s;
}
.page-vis-toggle.is-on {
  background: rgba(109,213,140,0.18);
  border-color: var(--hl-green);
}
.page-vis-toggle.is-on::after {
  left: 24px; background: var(--hl-green);
  box-shadow: 0 0 8px rgba(109,213,140,0.6);
}

/* ============================================================
   Floating controls для редактирования таблиц в richtext-editor.
   ============================================================ */
.tbl-ctrl {
  position: absolute;
  z-index: 1000;
  display: flex; gap: 6px; align-items: center;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--acc);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 12px var(--acc-glow);
  font-family: 'Acrom';
  user-select: none;
}
/* HTML hidden-атрибут перекрывался display:flex выше — явно скрываем. */
.tbl-ctrl[hidden] { display: none !important; }

/* ROW-SELECTED — таблица в редакторе подсвечивает целиком выделенные строки
   (selection полностью охватывает все ячейки). Backspace/Delete удалит их.
   Текстовое выделение внутри одной ячейки или частичное выделение через
   ячейки сохраняет родное браузерное поведение. */
.tb-table tr.tbl-row-selected > td,
.tb-table tr.tbl-row-selected > th {
  background: rgba(86, 128, 200, 0.22);
  position: relative;
}
.tb-table tr.tbl-row-selected > td:first-child,
.tb-table tr.tbl-row-selected > th:first-child {
  box-shadow: inset 3px 0 0 var(--acc);
}
.tb-table tr.tbl-row-selected > td:last-child::after,
.tb-table tr.tbl-row-selected > th:last-child::after {
  content: 'BACKSPACE → УДАЛИТЬ';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 2px;
  color: var(--acc);
  background: var(--bg-1);
  padding: 2px 6px;
  border: 1px solid var(--acc);
  pointer-events: none;
  opacity: 0.85;
  white-space: nowrap;
}
.tbl-ctrl__dim {
  padding-right: 8px;
  margin-right: 2px;
  color: var(--acc-2);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  border-right: 1px solid var(--line-2);
}
.tbl-ctrl__sep {
  width: 1px;
  height: 16px;
  background: var(--line-2);
  margin: 0 2px;
}
.tbl-ctrl button {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tbl-ctrl button:hover {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}
.tbl-ctrl button:active {
  transform: translateY(1px);
}
.tbl-ctrl__close {
  padding: 4px 8px !important;
  min-width: 24px;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  line-height: 1;
}
.tbl-ctrl__close:hover {
  background: var(--hl-red) !important;
  border-color: var(--hl-red) !important;
  color: #fff !important;
}

/* ============================================================
   /me — личный профиль игрока (Phase 1 skeleton).
   ============================================================ */
.me-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  gap: 16px;
  color: var(--ink-2);
}
.me-loader__pulse {
  width: 56px; height: 56px;
  border: 2px solid var(--line-2);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: me-spin 1s linear infinite;
}
@keyframes me-spin { to { transform: rotate(360deg); } }
.me-loader__text {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 4px;
  color: var(--ink-3);
}

.me-banner {
  margin: 0 auto 28px;
  max-width: 1100px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--acc);
  box-shadow: 0 0 24px var(--acc-glow);
  position: relative;
  overflow: hidden;
}
.me-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--acc);
  box-shadow: 0 0 16px var(--acc-glow);
}
.me-banner__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 14px 28px;
}
.me-banner__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--hl-green);
  text-transform: uppercase;
  white-space: nowrap;
}
.me-banner--demo { border-color: var(--hl-orange); box-shadow: 0 0 24px rgba(243, 149, 86, 0.4); }
.me-banner--demo::before { background: var(--hl-orange); box-shadow: 0 0 16px rgba(243, 149, 86, 0.5); }
.me-banner--demo .me-banner__kicker { color: var(--hl-orange); }
.me-banner--lateral { border-color: var(--ink-2); box-shadow: 0 0 24px rgba(138, 150, 188, 0.3); }
.me-banner--lateral::before { background: var(--ink-2); box-shadow: 0 0 16px rgba(138, 150, 188, 0.4); }
.me-banner--lateral .me-banner__kicker { color: var(--ink-2); }
.me-banner--faction { border-color: var(--hl-blue); box-shadow: 0 0 24px rgba(94, 161, 240, 0.4); }
.me-banner--faction::before { background: var(--hl-blue); box-shadow: 0 0 16px rgba(94, 161, 240, 0.5); }
.me-banner--faction .me-banner__kicker { color: var(--hl-blue); }
.me-banner__text {
  flex: 1;
  font-family: 'Acrom';
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1.5;
}
.me-banner__close {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  width: 26px; height: 26px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all var(--t-fast);
}
.me-banner__close:hover { color: var(--ink-0); border-color: var(--acc); }

/* ----- Профиль ----- */
.me-profile {
  display: flex;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 32px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.me-profile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc-glow);
  z-index: 2;
}
.me-profile::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 180px; height: 140px;
  background: var(--acc-2);
  -webkit-mask: url('/img/ui/element.png') bottom right / 150px 110px no-repeat;
  mask: url('/img/ui/element.png') bottom right / 150px 110px no-repeat;
  transform: scaleX(-1);
  opacity: 0.20;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 6px var(--acc-glow));
}
.me-profile > * { position: relative; z-index: 1; }
.me-profile__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.me-profile__avatar {
  width: 156px; height: 156px;
  object-fit: cover;
  border: 2px solid var(--acc);
  box-shadow: 0 0 24px var(--acc-glow), inset 0 0 0 1px var(--bg-0);
  background: var(--bg-0);
}
.me-profile__steam-id {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.5px;
  user-select: all;
  word-break: break-all;
  text-align: center;
  max-width: 156px;
}
.me-profile__right { flex: 1; min-width: 0; }
.me-profile__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 4px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.me-profile__nick {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 32px;
  color: var(--ink-0);
  letter-spacing: 1px;
  margin: 6px 0 14px;
  line-height: 1.1;
  word-break: break-word;
}
.me-profile__chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.me-chip {
  display: inline-block;
  padding: 6px 12px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--acc);
  background: rgba(86, 128, 200, 0.12);
  color: var(--acc-2);
}
.me-chip--rank {
  border-color: var(--hl-green);
  background: rgba(109, 213, 140, 0.10);
  color: var(--hl-green);
}
.me-chip--empty {
  border-color: var(--hl-orange);
  background: rgba(243, 149, 86, 0.10);
  color: var(--hl-orange);
}
.me-profile__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 24px;
}
.me-profile__meta > div { font-size: 13px; color: var(--ink-1); }
.me-meta__label {
  display: block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.me-profile__actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
}
.me-profile__actions .btn.disabled,
.me-profile__actions .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* ----- Сводка-числа ----- */
.me-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 32px;
}
.me-stat {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-mid);
}
.me-stat:hover { border-color: var(--acc); }
.me-stat__num {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 38px;
  color: var(--ink-0);
  line-height: 1;
}
.me-stat__lbl {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 3px;
  color: var(--ink-3);
  margin-top: 8px;
  text-transform: uppercase;
}
.me-stat--pending .me-stat__num { color: var(--hl-orange); }
.me-stat--accepted .me-stat__num { color: var(--hl-green); }
.me-stat--rejected .me-stat__num { color: var(--hl-red); }
.me-stat--total .me-stat__num { color: var(--acc-2); }

/* ----- Прогресс ----- */
.me-progress {
  max-width: 1100px;
  margin: 0 auto 32px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-2);
}
.me-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--acc);
  background: rgba(86, 128, 200, 0.06);
}
.me-progress__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.me-progress__rank {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: 2px;
  color: var(--ink-0);
}
.me-progress__body { padding: 22px; }
.me-progress__empty {
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 12px;
}
.me-prog-row {
  display: grid;
  grid-template-columns: 1fr 280px auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-1);
}
.me-prog-row:last-child { border-bottom: 0; }
.me-prog-row__name {
  font-size: 13px;
  color: var(--ink-1);
  font-weight: 600;
}
.me-prog-row__bar {
  height: 6px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.me-prog-row__fill {
  position: absolute;
  inset: 0;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc-glow);
  transition: width .4s cubic-bezier(.2,.6,.2,1);
}
.me-prog-row--done .me-prog-row__fill { background: var(--hl-green); box-shadow: 0 0 8px rgba(109,213,140,0.5); }
.me-prog-row--done .me-prog-row__name { color: var(--hl-green); }
.me-prog-row__count {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 12px; letter-spacing: 1px;
  color: var(--ink-1);
  min-width: 50px;
  text-align: right;
}
.me-prog-row--done .me-prog-row__count { color: var(--hl-green); }
@media (max-width: 600px) {
  .me-prog-row { grid-template-columns: 1fr auto; }
  .me-prog-row__bar { grid-column: 1 / -1; order: 3; }
}

/* ----- Графики ----- */
.me-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 32px;
}
.me-chart {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 22px;
  min-height: 280px;
}
.me-chart__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.me-chart__placeholder {
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 60px 12px;
}
.me-line-svg {
  width: 100%;
  height: 220px;
  display: block;
}
.me-pie-wrap {
  display: flex; gap: 18px; align-items: center;
}
.me-pie-svg {
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--acc-glow));
}
.me-pie-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
}
.me-pie-legend__row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-1);
  cursor: help;
}
.me-pie-legend__row:hover { background: rgba(86,128,200,0.06); }
.me-pie-legend__row:last-child { border-bottom: 0; }
.me-pie-legend__swatch {
  width: 12px; height: 12px;
  display: inline-block;
  border: 1px solid var(--bg-0);
  margin-top: 4px;
  flex-shrink: 0;
}
.me-pie-legend__name {
  color: var(--ink-1);
  word-break: break-word;
  line-height: 1.4;
}
.me-pie-legend__count {
  font-family: 'Acrom'; font-weight: 800;
  color: var(--ink-0);
  font-size: 13px;
}
.me-pie-legend__pct {
  color: var(--ink-3);
  font-size: 11px;
  min-width: 36px;
  text-align: right;
}
@media (max-width: 600px) {
  .me-pie-wrap { flex-direction: column; align-items: stretch; }
  .me-pie-svg { margin: 0 auto; }
}

/* ----- Нет фракции ----- */
.me-noaccess-card {
  max-width: 700px;
  margin: 16px auto 32px;
  padding: 28px 32px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--hl-orange);
  text-align: center;
  position: relative;
}
.me-noaccess-card__seal {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--hl-orange);
  color: var(--bg-0);
  padding: 4px 14px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
}
.me-noaccess-card__seal::before { content: attr(data-stamp); }
.me-noaccess-card__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--hl-orange);
  text-transform: uppercase;
  margin: 10px 0 6px;
}
.me-noaccess-card__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 22px; letter-spacing: 2px;
  color: var(--ink-0);
  margin: 0 0 12px;
}
.me-noaccess-card__lead {
  font-size: 13px; color: var(--ink-1); line-height: 1.55;
  margin: 0;
}

/* ----- Mobile ----- */
@media (max-width: 760px) {
  .me-profile {
    flex-direction: column;
    padding: 22px;
    gap: 20px;
  }
  .me-profile__left { align-items: flex-start; }
  .me-profile__avatar { width: 120px; height: 120px; }
  .me-profile__steam-id { text-align: left; max-width: none; }
  .me-profile__nick { font-size: 24px; }
  .me-profile__meta { grid-template-columns: 1fr; }
  .me-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .me-stat { padding: 16px; }
  .me-stat__num { font-size: 28px; }
  .me-charts { grid-template-columns: 1fr; }
  .me-banner__inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .me-banner__close { align-self: flex-end; }
}

/* ============================================================
   ADMIN: REPORTS TAB (Phase 2 — form builder)
   ============================================================ */
.rep-faction-picker {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.rep-faction-picker__lbl {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.rep-faction-picker__select {
  background: var(--bg-0);
  border: 1px solid var(--acc);
  color: var(--ink-0);
  padding: 8px 14px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px; letter-spacing: 1px;
  min-width: 280px;
  cursor: pointer;
}
.rep-faction-picker__hint {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  flex-basis: 100%;
}
.rep-faction-picker__hint:empty { display: none; }

/* ----- Form editor (inline panel) ----- */
.rep-form-editor {
  margin-top: 18px;
  background: var(--bg-1);
  border: 1px solid var(--acc);
  box-shadow: 0 0 24px rgba(86,128,200,0.10);
}
.rep-form-editor__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 22px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--acc);
}
.rep-form-editor__title {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px; letter-spacing: 1px;
  padding: 4px 0 6px;
  outline: none;
}
.rep-form-editor__title:focus { border-bottom-color: var(--acc); }
.rep-form-editor__desc {
  width: 100%;
  margin-top: 6px;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-size: 12px;
  padding: 4px 0;
  outline: none;
}
.rep-form-editor__version {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.rep-form-editor__head-actions {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.rep-form-editor__body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  min-height: 400px;
}
.rep-form-editor__canvas {
  padding: 22px;
  border-right: 1px solid var(--line-2);
  overflow-y: auto;
  max-height: 70vh;
}
.rep-form-editor__palette {
  padding: 18px;
  background: var(--bg-2);
}
.rep-palette__group { margin-bottom: 22px; }
.rep-palette__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--acc-2);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.rep-palette__btn {
  display: block;
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  padding: 9px 12px;
  margin-bottom: 6px;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
}
.rep-palette__btn:hover {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}

.rep-form-blocks { display: flex; flex-direction: column; gap: 12px; }
.rep-form-blocks__empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
  border: 1px dashed var(--line-2);
}

.rep-block {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast);
}
.rep-block:hover { border-color: var(--acc); }
.rep-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-2);
}
.rep-block__type {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--acc-2);
}
.rep-block__actions { display: flex; gap: 4px; }
.rep-block__btn {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  width: 26px; height: 26px;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--t-fast);
  padding: 0;
}
.rep-block__btn:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.rep-block__btn--del:hover { background: var(--hl-red); border-color: var(--hl-red); }
.rep-block__btn-add {
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--ink-3);
  padding: 6px 14px;
  font-family: 'Acrom'; font-weight: 600;
  font-size: 11px; letter-spacing: 1px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}
.rep-block__btn-add:hover {
  border-color: var(--acc);
  color: var(--acc-2);
}
.rep-block__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rep-block__input,
.rep-block__textarea,
.rep-block__select {
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  color: var(--ink-1);
  padding: 8px 10px;
  font-family: 'Acrom';
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color var(--t-fast);
}
.rep-block__input:focus,
.rep-block__textarea:focus,
.rep-block__select:focus { border-color: var(--acc); }
.rep-block__textarea { font-family: inherit; resize: vertical; min-height: 60px; }
.rep-block__row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
}
.rep-block__row-2 {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2);
}
.rep-block__check {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.rep-block__hint {
  font-size: 11px; color: var(--ink-3);
  font-style: italic;
}
.rep-block__opt-row {
  display: flex; gap: 6px; align-items: center;
}
.rep-block__input--opt { flex: 1; min-width: 0; }

.rep-form-editor__msg {
  padding: 10px 22px 16px;
  font-size: 12px;
  color: var(--ink-3);
}

/* Mobile */
@media (max-width: 760px) {
  .rep-form-editor__body { grid-template-columns: 1fr; }
  .rep-form-editor__canvas { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .rep-form-editor__head { flex-direction: column; }
  .rep-form-editor__head-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   SUP.modal — кастомные alert/confirm/prompt поверх браузерных
   ============================================================ */
/* Host прозрачен для layout (display:contents) — иначе position:fixed на
   модалке мог цепляться за родительский flex-контейнер body и центровка
   ломалась на широких экранах. */
.sup-modal-host { display: contents; }
.sup-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 400;
  background: rgba(0, 4, 12, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity .18s ease;
}
.sup-modal--shown { opacity: 1; }
.sup-modal__box {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--acc);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 24px var(--acc-glow);
  padding: 24px 26px;
  width: 100%;
  max-width: 480px;
  position: relative;
  transform: translateY(8px);
  transition: transform .22s cubic-bezier(.2,.6,.2,1);
}
.sup-modal--shown .sup-modal__box { transform: translateY(0); }
.sup-modal__box::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc-glow);
}
.sup-modal__box--danger { border-color: var(--hl-red); box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 24px rgba(232,90,90,0.45); }
.sup-modal__box--danger::before { background: var(--hl-red); box-shadow: 0 0 14px rgba(232,90,90,0.6); }

.sup-modal__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 12px; letter-spacing: 3px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sup-modal__box--danger .sup-modal__title { color: var(--hl-red); }
.sup-modal__message {
  font-size: 14px;
  color: var(--ink-0);
  line-height: 1.5;
  margin-bottom: 18px;
  white-space: pre-wrap;
}
.sup-modal__input {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 10px 14px;
  font-family: 'Acrom';
  font-size: 14px;
  margin-bottom: 18px;
  outline: none;
  transition: border-color var(--t-fast);
}
.sup-modal__input:focus { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
textarea.sup-modal__input { resize: vertical; min-height: 80px; font-family: inherit; }
.sup-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.sup-modal__ok,
.sup-modal__cancel {
  background: var(--bg-2);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  min-width: 90px;
  transition: all var(--t-fast);
}
.sup-modal__ok {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}
.sup-modal__ok:hover {
  background: var(--acc-2);
  border-color: var(--acc-2);
  box-shadow: 0 0 12px var(--acc-glow);
}
.sup-modal__ok--danger {
  background: var(--hl-red);
  border-color: var(--hl-red);
}
.sup-modal__ok--danger:hover {
  background: #ff7373;
  border-color: #ff7373;
  box-shadow: 0 0 12px rgba(232,90,90,0.5);
}
.sup-modal__cancel:hover {
  border-color: var(--acc);
  color: var(--ink-0);
}

@media (max-width: 540px) {
  .sup-modal { padding: 16px; }
  .sup-modal__box { padding: 20px; }
  .sup-modal__actions { flex-direction: column-reverse; }
  .sup-modal__ok, .sup-modal__cancel { width: 100%; }
}

/* ============================================================
   QUIZ — пометки правильных ответов в form-блоках
   ============================================================ */
.rep-block__quiz-section {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(109, 213, 140, 0.05);
  border: 1px dashed rgba(109, 213, 140, 0.35);
}
.rep-block__quiz-title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 2px;
  color: var(--hl-green);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.rep-block__quiz-title small {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: none;
}
.rep-block__quiz-pattern {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 4px;
}
.rep-block__quiz-mode {
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  color: var(--ink-1);
  font-size: 11px;
  padding: 7px 8px;
  font-family: 'Acrom';
  flex-shrink: 0;
  width: 110px;
}
.rep-block__quiz-mode:focus { outline: none; border-color: var(--hl-green); }
.rep-block__opt-correct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
  position: relative;
}
.rep-block__opt-correct:hover { border-color: var(--hl-green); }
.rep-block__opt-correct[data-checked="true"] {
  background: var(--hl-green);
  border-color: var(--hl-green);
}
.rep-block__opt-correct[data-checked="true"]::after {
  content: '✓';
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}

/* ============================================================
   REPORTS: RANKS + REQUIREMENTS TREE (Phase 3)
   ============================================================ */
.rep-autosave-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  color: var(--ink-3);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.rep-autosave-badge[data-state="pending"] { color: var(--hl-orange); border-color: var(--hl-orange); }
.rep-autosave-badge[data-state="saving"]  { color: var(--acc-2);     border-color: var(--acc); background: rgba(86,128,200,0.08); }
.rep-autosave-badge[data-state="saved"]   { color: var(--hl-green); border-color: var(--hl-green); background: rgba(109,213,140,0.08); }
.rep-autosave-badge[data-state="error"]   { color: var(--hl-red);   border-color: var(--hl-red);   background: rgba(232,90,90,0.08); }

.rep-rank-card {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-2);
  margin-bottom: 12px;
  transition: border-color var(--t-fast);
}
.rep-rank-card:hover { border-color: var(--acc); }
.rep-rank-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(86,128,200,0.08), transparent);
  border-bottom: 1px solid var(--line-2);
}
.rep-rank-card__ord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--acc);
  color: #fff;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--acc-glow);
}
.rep-rank-card__name {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 16px; letter-spacing: 1px;
  color: var(--ink-0);
  text-transform: uppercase;
  line-height: 1.1;
}
.rep-rank-card__nextlbl {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.rep-rank-card__actions {
  display: flex; gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.rep-rank-card__body { padding: 16px 18px; }

.rep-rank-card__alias-row {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rep-rank-card__alias-label {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 6px;
  max-width: 220px;
}
.rep-rank-card__aliases {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1;
  min-width: 0;
}
.rep-alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-0);
  border: 1px solid var(--acc);
  color: var(--acc-2);
  padding: 5px 10px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
}
.rep-alias-chip__del {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  width: 14px;
  height: 14px;
}
.rep-alias-chip__del:hover { color: var(--hl-red); }
.rep-alias-add {
  width: auto !important;
  padding: 5px 12px !important;
  margin-top: 0 !important;
}

.rep-rank-card__req-title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--hl-green);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ----- Requirements tree ----- */
.rep-req-tree {
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  padding: 12px;
}
.rep-req-node--group {
  background: rgba(86,128,200,0.04);
  border: 1px solid var(--line-2);
  padding: 8px 10px;
}
.rep-req-node--group + .rep-req-node--group { margin-top: 6px; }
.rep-req-node--root {
  background: transparent;
  border: 0;
  padding: 0;
}
.rep-req-node__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rep-req-node__op {
  background: var(--bg-2);
  border: 1px solid var(--acc);
  color: var(--acc-2);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 1.5px;
  padding: 6px 10px;
  cursor: pointer;
}
.rep-req-node__op:focus { outline: none; }
.rep-req-node__add-group {
  display: flex; gap: 6px; align-items: center;
}
.rep-req-add-form {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  font-size: 11px;
  padding: 5px 8px;
  font-family: 'Acrom';
  cursor: pointer;
}
.rep-req-add-form:focus { border-color: var(--acc); outline: none; }
.rep-req-node__children {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px dashed var(--line-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rep-req-node--root > .rep-req-node__children {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
.rep-req-node--form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 8px 12px;
}
.rep-req-node__icon {
  font-size: 14px;
  opacity: 0.7;
}
.rep-req-node__form-name {
  flex: 1;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px;
  color: var(--ink-0);
  letter-spacing: 0.5px;
}
.rep-req-node__count {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
}
.rep-req-node__count input {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 4px 6px;
  text-align: center;
}
.rep-req-node__count input:focus { outline: none; border-color: var(--acc); }
.rep-req-node__empty {
  font-style: italic;
  font-size: 11px;
  color: var(--ink-3);
  padding: 6px 4px;
}

/* ============================================================
   PLAYER REPORTS PAGE (/me/reports + /me/reports/:formId)
   ============================================================ */
.rep-page__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line-2);
}
.rep-page__title { flex: 1; min-width: 0; }
.rep-page__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 4px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.rep-page__h1 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 28px;
  color: var(--ink-0);
  letter-spacing: 1px;
  margin: 4px 0 8px;
  line-height: 1.1;
  word-break: break-word;
}
.rep-page__rank {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}

.rep-section {
  max-width: 1100px;
  margin: 0 auto 36px;
}
.rep-section__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px; letter-spacing: 4px;
  color: var(--ink-0);
  text-transform: uppercase;
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
}
.rep-section__icon { color: var(--hl-orange); font-size: 18px; }
.rep-section__hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 16px;
}

/* ----- Folder ----- */
.rep-folder { margin-bottom: 28px; }
.rep-folder__title {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: 3px;
  color: var(--acc-2);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line-2);
  display: flex; align-items: center; gap: 8px;
}
.rep-folder__shared-icon { color: var(--hl-orange); }
.rep-folder__shared-lbl {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 2px;
  color: var(--hl-orange);
  background: rgba(243,149,86,0.1);
  border: 1px solid var(--hl-orange);
  padding: 2px 8px;
  text-transform: lowercase;
  margin-left: 6px;
}

/* ----- Form card grid ----- */
.rep-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.rep-card {
  display: block;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: all var(--t-mid);
}
.rep-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--line-2);
  transition: background var(--t-mid), box-shadow var(--t-mid);
}
.rep-card:hover {
  border-color: var(--acc);
  transform: translateX(4px);
}
.rep-card:hover::before {
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc-glow);
}
.rep-card--recommended {
  border-color: var(--hl-orange);
  background: linear-gradient(180deg, rgba(243,149,86,0.08), var(--bg-2));
}
.rep-card--recommended::before {
  background: var(--hl-orange);
  box-shadow: 0 0 12px rgba(243,149,86,0.5);
}
.rep-card__badge {
  display: inline-block;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 2px;
  color: var(--bg-0);
  background: var(--hl-orange);
  padding: 3px 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.rep-card__title {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 15px;
  color: var(--ink-0);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  line-height: 1.3;
}
.rep-card__desc {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rep-card__statuses {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 8px;
}
.rep-card__stat {
  display: inline-block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 1.5px;
  padding: 2px 6px;
  text-transform: uppercase;
  border: 1px solid;
}
.rep-card__stat--accepted { color: var(--hl-green); border-color: var(--hl-green); background: rgba(109,213,140,0.08); }
.rep-card__stat--pending  { color: var(--hl-orange); border-color: var(--hl-orange); background: rgba(243,149,86,0.08); }
.rep-card__stat--rejected { color: var(--hl-red); border-color: var(--hl-red); background: rgba(232,90,90,0.08); }
.rep-card__stat--draft    { color: var(--acc-2); border-color: var(--acc-2); background: rgba(86,128,200,0.08); }
.rep-card__stat--stale    { color: var(--ink-3); border-color: var(--ink-3); background: rgba(138,150,188,0.06); }
.rep-card__stat--empty    { color: var(--ink-3); border-color: var(--line-2); }
.rep-card__meta {
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.rep-card__cta {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 2px;
  color: var(--acc-2);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ============================================================
   PLAYER FORM FILL (/me/reports/:formId)
   ============================================================ */
.rep-form-fill {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rep-form-fill__status {
  align-self: flex-start;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 5px 10px;
  text-transform: uppercase;
}
.rep-fb {
  padding: 16px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.rep-fb--header {
  background: transparent;
  border: 0;
  padding: 8px 0 0;
}
.rep-fb--header h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px; letter-spacing: 2px;
  color: var(--ink-0);
  margin: 0;
  text-transform: uppercase;
}
.rep-fb--text {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink-1);
  font-size: 13px;
  line-height: 1.6;
}
.rep-fb--image { background: transparent; border: 0; padding: 0; text-align: center; }
.rep-fb--image img { max-width: 100%; }
.rep-fb--image figcaption { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.rep-fb--sep {
  border: 0;
  height: 1px;
  background: var(--line-2);
  margin: 8px 0;
}
.rep-fb__label {
  display: block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px;
  color: var(--ink-0);
  margin-bottom: 8px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}
.rep-fb__req {
  color: var(--hl-red);
  font-size: 14px;
  margin-left: 2px;
}
.rep-fb__input,
.rep-fb__textarea {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 10px 12px;
  font-family: 'Acrom';
  font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast);
}
.rep-fb__textarea { font-family: inherit; resize: vertical; min-height: 90px; line-height: 1.5; }
.rep-fb__input:focus,
.rep-fb__textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.rep-fb__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-1);
  border-bottom: 1px dashed var(--line-1);
}
.rep-fb__opt:last-child { border-bottom: 0; }
.rep-fb__opt:hover { color: var(--ink-0); }
.rep-fb__opt input { flex-shrink: 0; }

.rep-fb--signature .rep-fb__sig-info {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
}
.rep-fb__sig-ok { color: var(--hl-green); font-size: 13px; font-weight: 600; flex: 1; }
.rep-fb__sig-empty { color: var(--ink-3); font-size: 12px; font-style: italic; flex: 1; }
.rep-fb__sig-preview { width: 200px; height: 60px; background: var(--bg-1); }

/* ----- Attachments block (player side) ----- */
.rep-fb--attachments .rep-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.rep-fb--attachments .rep-att-grid:empty { display: none; }
.rep-att {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.rep-att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-att__del {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  background: rgba(15,20,30,0.85);
  color: var(--hl-red);
  border: 1px solid var(--hl-red);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rep-att__del:hover { background: var(--hl-red); color: #fff; }
.rep-att__del:disabled { opacity: 0.4; cursor: wait; }
.rep-att-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rep-att-drop:hover { background: var(--bg-1); border-color: var(--acc); }
.rep-att-drop--hover { background: var(--bg-1); border-color: var(--acc); border-style: solid; }
.rep-att-drop--full {
  cursor: default;
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
  justify-content: center;
  border-style: solid;
}
.rep-att-drop__icon { font-size: 28px; }
.rep-att-drop__text { color: var(--ink-1); font-size: 13px; }
.rep-att-drop__text small { color: var(--ink-3); font-size: 11px; }
.rep-att-msg { margin-top: 8px; font-size: 12px; }

/* ----- Datetime block (player side) ----- */
.rep-fb__input--datetime {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  background: var(--bg-0);
  color: var(--ink-0);
  border: 1px solid var(--line-2);
  padding: 10px 12px;
  font-size: 14px;
  color-scheme: dark;
  letter-spacing: 0.5px;
}
.rep-fb__input--datetime:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc);
}

/* ----- Players picker (player side) ----- */
.rep-fb--players { display: flex; flex-direction: column; gap: 10px; }
.rep-players-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
  min-height: 44px;
  align-items: center;
}
.rep-players-empty { font-size: 12px; color: var(--ink-3); font-style: italic; padding: 4px 8px; }
.rep-players-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom'; font-size: 12px;
  letter-spacing: 0.3px;
}
.rep-players-chip__name { font-weight: 600; }
.rep-players-chip__del {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  width: 22px; height: 22px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: color 0.15s, background 0.15s;
}
.rep-players-chip__del:hover { color: var(--hl-red); background: rgba(232,90,90,0.12); }
.rep-players-open { align-self: flex-start; }

/* Picker modal */
.rep-picker-modal__box {
  max-width: 600px !important;
  width: 92vw;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.rep-picker-modal__head {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 12px;
}
.rep-picker-modal__search {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 13px;
  padding: 9px 12px;
  width: 100%;
}
.rep-picker-modal__search:focus { outline: none; border-color: var(--acc); }
.rep-picker-modal__count {
  font-family: 'Acrom'; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--acc-2);
  margin-bottom: 8px;
}
.rep-picker-modal__list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  min-height: 200px;
}
.rep-picker-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background 0.12s;
}
.rep-picker-row:hover { background: var(--bg-1); }
.rep-picker-row:last-child { border-bottom: 0; }
.rep-picker-row input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--acc);
  flex-shrink: 0;
}
.rep-picker-row--on { background: rgba(86,128,200,0.12); }
.rep-picker-row--on:hover { background: rgba(86,128,200,0.18); }
.rep-picker-row__name { flex: 1; font-family: 'Acrom'; font-size: 13px; color: var(--ink-0); }
.rep-picker-row__idn { color: var(--ink-3); font-size: 11px; }
.rep-picker-row__me {
  display: inline-block;
  background: var(--acc);
  color: #fff;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 4px;
}
.rep-picker-row__id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.5px;
}
.rep-picker-row--me .rep-picker-row__name { color: var(--acc-2); }
.rep-picker-modal__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
}
.rep-picker-modal__foot {
  display: flex; gap: 8px; align-items: center;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--line-2);
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .rep-picker-modal__foot .btn { padding: 6px 10px; font-size: 10px; }
}

/* ============================================================ */
/* 3D-модели — free-form блок (tb-model) + faction card           */
/* ============================================================ */

/* Placeholder до hydration (видится в админ-редакторе) */
.tb-model {
  margin: 22px 0;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  min-height: 120px;
}
.tb-model__placeholder {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
}
.tb-model__placeholder-icon { font-size: 36px; opacity: 0.6; }
.tb-model__placeholder-txt b {
  display: block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: 0.5px;
  color: var(--ink-0);
  margin-bottom: 2px;
}
.tb-model__placeholder-txt small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
}

/* После hydration */
.tb-model--hydrated { padding: 0; }
.tb-model__inner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
  align-items: stretch;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
  min-height: 420px;
}
.tb-model__head {
  grid-column: 1 / -1;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
}
.tb-model__name {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acc-2);
}
.tb-model__viewer {
  position: relative;
  min-height: 400px;
}
.tb-model__viewer model-viewer {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 60%, rgba(86,128,200,0.10), transparent 70%);
  --poster-color: transparent;
}
.tb-model__side {
  padding: 16px 18px;
  border-left: 1px solid var(--line-2);
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: 10px;
}
.tb-model__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.tb-model__ranks {
  display: flex; flex-direction: column; gap: 4px;
}
.tb-model__rank {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  font-family: 'Acrom'; font-weight: 600;
  font-size: 12px; letter-spacing: 0.5px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.tb-model__rank:hover { border-color: var(--acc); color: var(--ink-0); }
.tb-model__rank.is-active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  font-weight: 800;
}
.tb-model__err {
  padding: 20px;
  color: var(--hl-red);
  font-style: italic;
  text-align: center;
}

/* ====================================================================
   HOLOGRAM STYLE — применяется когда у блока tb-model стоит data-style="holo".
   Также включается на live-preview в админ-пикере (контейнер .mdl-manual__viewer).
   Состоит из: тёмный фон с лёгким glow, сканлайны, виньетка-радиал, лёгкий
   horizontal-shift flicker. Сам материал модели меняется через
   _supApplyHoloMaterials в JS — здесь только overlay-эффекты.
   ==================================================================== */
.tb-model[data-style="holo"] .tb-model__viewer,
.mdl-manual__viewer[data-style="holo"] {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(86,128,200,0.18), transparent 65%),
    linear-gradient(180deg, #06080d 0%, #0a1019 100%);
  isolation: isolate; /* mix-blend-mode только внутри */
  overflow: hidden;
}
.tb-model[data-style="holo"] .tb-model__viewer model-viewer,
.mdl-manual__viewer[data-style="holo"] model-viewer {
  background: transparent;
}
/* Сканлайны — repeating-gradient. mix-blend-mode: screen чтобы синие линии
   светились поверх голограммы, а не плотно её закрывали. Анимация смещения
   делает «бегущие» полосы как на CRT. */
.tb-model[data-style="holo"] .tb-model__viewer::before,
.mdl-manual__viewer[data-style="holo"]::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(86,128,200,0.10) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: screen;
  animation: holo-scan 6s linear infinite;
}
/* Виньетка + flicker. Делает края темнее, центр светлее — модель «парит» в свечении.
   opacity-анимация — нерегулярные мерцания. */
.tb-model[data-style="holo"] .tb-model__viewer::after,
.mdl-manual__viewer[data-style="holo"]::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(6,10,18,0.55) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(86,128,200,0.08) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: holo-flicker 5.5s ease-in-out infinite;
}
@keyframes holo-scan {
  from { background-position-y: 0; }
  to   { background-position-y: 32px; }
}
@keyframes holo-flicker {
  0%, 100% { opacity: 0.85; }
  47%, 53% { opacity: 0.95; }
  8%, 9%   { opacity: 0.55; }
  72%, 74% { opacity: 0.6;  }
}
/* Слегка подкрашиваем правую панель и заголовок чтобы блок выглядел цельно */
.tb-model[data-style="holo"] .tb-model__inner {
  background: linear-gradient(180deg, #060810, #0a1019);
  border: 1px solid rgba(86,128,200,0.25);
  box-shadow: 0 0 32px rgba(86,128,200,0.12) inset;
}
.tb-model[data-style="holo"] .tb-model__side {
  background: rgba(6,10,18,0.55);
  border-left: 1px solid rgba(86,128,200,0.18);
}
.tb-model[data-style="holo"] .tb-model__kicker {
  color: var(--acc-2);
  text-shadow: 0 0 8px rgba(86,128,200,0.5);
}
.tb-model[data-style="holo"] .tb-model__name {
  text-shadow: 0 0 8px rgba(86,128,200,0.5);
}
.tb-model[data-style="holo"] .tb-model__rank {
  background: rgba(6,10,18,0.6);
  border-color: rgba(86,128,200,0.25);
}
.tb-model[data-style="holo"] .tb-model__rank.is-active {
  background: rgba(86,128,200,0.85);
  border-color: var(--acc-2);
  box-shadow: 0 0 12px rgba(86,128,200,0.6);
}

/* Toggle "Голограмма" — общий стиль чекбокса в обеих пикер-модалях */
.mdl-holo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.mdl-holo-toggle:hover { border-color: var(--acc); }
.mdl-holo-toggle input { width: 14px; height: 14px; accent-color: var(--acc); margin: 0; cursor: pointer; }
.mdl-holo-toggle__lab {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-1);
}
.mdl-holo-toggle:has(input:checked) {
  background: rgba(86,128,200,0.15);
  border-color: var(--acc-2);
}
.mdl-holo-toggle:has(input:checked) .mdl-holo-toggle__lab {
  color: var(--acc-2);
  text-shadow: 0 0 6px rgba(86,128,200,0.4);
}

@media (max-width: 760px) {
  .tb-model__inner { grid-template-columns: 1fr; }
  .tb-model__viewer { min-height: 320px; }
  .tb-model__side { border-left: 0; border-top: 1px solid var(--line-2); }
  .tb-model__ranks { flex-direction: row; flex-wrap: wrap; }
  .tb-model__rank { flex: 1 1 calc(50% - 4px); }
}

/* === Faction card — модель вместо short label === */
.faction-card--has-model .faction-card__short--model {
  background: radial-gradient(circle at 50% 60%, rgba(86,128,200,0.18), transparent 70%) !important;
  padding: 0;
  overflow: hidden;
  position: relative;
}
/* Реальный зум — через ЯВНЫЙ camera-orbit radius в JS (см. factions.js).
   width/height 100% чтобы model-viewer ровно в ячейке (центр совпадает),
   WebGL рендерит в native резолюции × devicePixelRatio → чёткое изображение. */
.faction-card__short--model model-viewer {
  --poster-color: transparent;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Manual-pose picker (для блока «+ 3D-поза» в richtext редакторе) */
.mdl-manual__cols {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  flex: 1;
  min-height: 400px;
}
.mdl-manual__viewer {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  position: relative;
  min-height: 400px;
}
.mdl-manual__viewer model-viewer { width: 100%; height: 100%; }
.mdl-manual__groups {
  overflow-y: auto;
  max-height: 70vh;
  padding-right: 4px;
}
.mdl-manual__group {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.mdl-manual__group:last-child { border-bottom: 0; }
.mdl-manual__group-label {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acc-2);
  margin-bottom: 6px;
}
.mdl-manual__opts {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.mdl-manual__opt {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  font-family: 'Acrom'; font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.mdl-manual__opt:hover { border-color: var(--acc); color: var(--ink-0); }
.mdl-manual__opt.is-active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  font-weight: 700;
}
@media (max-width: 760px) {
  .mdl-manual__cols { grid-template-columns: 1fr; }
  .mdl-manual__viewer { min-height: 280px; }
}

/* === Admin: tab «Модели» === */
.mdl-pane { padding: 30px 40px 80px; }
.mdl-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 16px;
}
.mdl-row__thumb {
  width: 72px; height: 72px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mdl-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mdl-row__thumb-empty {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px; letter-spacing: 2px;
  color: var(--acc-2);
}
.mdl-row__name { display: flex; align-items: center; gap: 8px; }
.mdl-row__name b { font-family: 'Acrom'; font-size: 14px; color: var(--ink-0); }
.mdl-row__faction {
  font-size: 10px; padding: 2px 7px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.mdl-row__meta {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
}
.mdl-row__meta span { font-size: 11px; color: var(--ink-3); }

/* Editor */
.mdl-editor {
  margin-top: 20px;
  background: var(--bg-1);
  border: 1px solid var(--acc);
}
.mdl-editor__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.mdl-editor__title {
  flex: 1;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom'; font-weight: 700;
  font-size: 14px; padding: 8px 12px;
}
.mdl-editor__head-actions { display: flex; gap: 6px; }
.mdl-editor__body {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 600px;
}
.mdl-editor__main {
  padding: 18px 20px;
  overflow-y: auto;
  border-right: 1px solid var(--line-2);
}
.mdl-editor__preview {
  display: flex; flex-direction: column;
  background: var(--bg-0);
}
.mdl-editor__preview-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 2px;
  color: var(--acc-2);
  text-transform: uppercase;
}
.mdl-editor__preview-viewer {
  flex: 1;
  min-height: 400px;
}
.mdl-editor__preview-viewer model-viewer { width: 100%; height: 100%; }
.mdl-editor__preview-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: var(--ink-3);
  font-style: italic;
  font-size: 12px;
  text-align: center;
  padding: 20px;
}
.mdl-editor__section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.mdl-editor__section-title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--acc-2);
  margin: 0 0 6px;
}
.mdl-editor__hint {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Group editor */
.mdl-group {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mdl-group__head {
  display: grid;
  grid-template-columns: 24px 140px 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mdl-group__key {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--acc-2);
  padding: 6px 8px;
  font-size: 11px;
}
.mdl-group__label {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 6px 8px;
  font-family: 'Acrom'; font-size: 12px;
}
.mdl-group__toggle,
.mdl-option__toggle {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.mdl-group__toggle:hover,
.mdl-option__toggle:hover { background: var(--bg-2); color: var(--ink-0); }
.mdl-group__optcount,
.mdl-option__meshcount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  padding: 0 8px;
  white-space: nowrap;
}
.mdl-group__options { padding-left: 10px; border-left: 2px solid var(--line-2); }
.mdl-group--collapsed .mdl-group__options { display: none; }
.mdl-group--collapsed { margin-bottom: 4px; padding: 6px 12px; }
.mdl-group--collapsed .mdl-group__head { margin-bottom: 0; }
.mdl-option {
  margin: 6px 0;
  padding: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.mdl-option__head { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 8px; margin-bottom: 6px; }
.mdl-option__label {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 5px 8px;
  font-family: 'Acrom'; font-size: 12px;
}
.mdl-option__meshes {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
  max-height: 160px;
  overflow-y: auto;
}
.mdl-option--collapsed .mdl-option__meshes { display: none; }
.mdl-option--collapsed { padding: 6px 8px; }
.mdl-option--collapsed .mdl-option__head { margin-bottom: 0; }
.mdl-mesh-row {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.mdl-mesh-row:hover { background: var(--bg-2); }
.mdl-mesh-row.is-on { background: rgba(86,128,200,0.15); border-color: var(--acc); color: var(--acc-2); }
.mdl-mesh-row input { width: 12px; height: 12px; accent-color: var(--acc); }

/* Presets editor */
.mdl-preset {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mdl-preset__head { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }
.mdl-preset__label {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 6px 8px;
  font-family: 'Acrom'; font-weight: 700; font-size: 13px;
}
.mdl-preset__groups { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; border-left: 2px solid var(--line-2); }
.mdl-preset__row {
  display: grid;
  grid-template-columns: 1fr 200px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.mdl-preset__group-name { color: var(--ink-2); }
.mdl-preset__row select {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  padding: 5px 8px;
  font-family: 'Acrom'; font-size: 11px;
}

@media (max-width: 1100px) {
  .mdl-editor__body { grid-template-columns: 1fr; }
  .mdl-editor__main { border-right: 0; border-bottom: 1px solid var(--line-2); }
}

/* ============================================================ */
/* /me — расширения: свитч чара, варны, история, лидерборд        */
/* ============================================================ */

.me-profile__nick-row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}
.me-char-switch {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 6px 10px;
}
.me-char-switch__lbl {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.me-char-switch__select {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom'; font-size: 12px;
  padding: 5px 8px;
  min-width: 180px;
  max-width: 320px;
}

.me-stat--accept-rate .me-stat__num { color: var(--hl-green); }
.me-stat--avg-time .me-stat__num { color: var(--acc-2); font-family: 'Acrom'; font-size: 28px; }

/* Warns */
.me-warns {
  margin: 24px 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(232,90,90,0.08), rgba(232,90,90,0.02));
  border: 1px solid var(--hl-red);
  border-left: 3px solid var(--hl-red);
}
.me-warns__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.me-warns__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hl-red);
}
.me-warns__count {
  background: var(--hl-red);
  color: #fff;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; padding: 2px 8px;
}
.me-warns__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.me-warn {
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.me-warn__head {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 11px;
}
.me-warn__by { font-family: 'Acrom'; font-weight: 700; color: var(--ink-0); letter-spacing: 0.3px; }
.me-warn__date { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.me-warn__char { color: var(--acc-2); font-family: 'Acrom'; font-size: 10px; letter-spacing: 0.5px; }
.me-warn__reason { color: var(--ink-1); font-size: 13px; line-height: 1.5; }

/* Section heads (общий стиль для leaderboard + history) */
.me-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-1);
}
.me-section-head__kicker {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--acc-2);
}
.me-section-head__sub {
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}

/* Leaderboard */
.me-leaderboard__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.me-lb-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  font-family: 'Acrom';
}
.me-lb-row__pos {
  font-weight: 800; font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink-3);
  text-align: right;
}
.me-lb-row:nth-child(1) .me-lb-row__pos { color: #e8a93a; } /* gold */
.me-lb-row:nth-child(2) .me-lb-row__pos { color: #b8c1d6; } /* silver */
.me-lb-row:nth-child(3) .me-lb-row__pos { color: #c8814a; } /* bronze */
.me-lb-row__name {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.me-lb-row__name b { font-weight: 700; color: var(--ink-0); font-size: 13px; }
.me-lb-row__idn { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--acc-2); }
.me-lb-row__me-mark {
  background: var(--acc); color: #fff;
  font-size: 9px; letter-spacing: 1px;
  padding: 1px 5px;
}
.me-lb-row__count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 16px;
  color: var(--acc-2);
}
.me-lb-row--me {
  border-left: 3px solid var(--acc);
  background: linear-gradient(90deg, rgba(86,128,200,0.12), var(--bg-1));
}
.me-leaderboard__self {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  font-size: 12px;
  color: var(--ink-2);
  text-align: center;
}

/* History */
.me-history__filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.me-history__filter {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: 'Acrom';
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .15s;
}
.me-history__filter:hover { color: var(--ink-0); border-color: var(--acc); }
.me-history__filter.is-active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}
.me-history__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.me-history__empty {
  text-align: center; padding: 30px 20px;
  color: var(--ink-3);
  font-style: italic;
  font-size: 13px;
}
.me-hist {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--ink-3);
}
.me-hist--pending { border-left-color: var(--hl-orange, #e8a93a); }
.me-hist--accepted { border-left-color: var(--hl-green); }
.me-hist--rejected { border-left-color: var(--hl-red); }
.me-hist--stale { border-left-color: var(--ink-3); opacity: 0.7; }
.me-hist__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-0);
  font-family: 'Acrom';
  text-align: left;
  transition: background 0.15s;
}
.me-hist__head:hover { background: var(--bg-0); }
.me-hist__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.me-hist__title b { font-size: 13px; font-weight: 700; }
.me-hist__folder { font-size: 10px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
.me-hist__meta {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.me-hist__status {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
}
.me-hist__status--pending  { background: rgba(232,169,58,0.15); color: var(--hl-orange, #e8a93a); border: 1px solid var(--hl-orange, #e8a93a); }
.me-hist__status--accepted { background: rgba(95,168,108,0.15); color: var(--hl-green); border: 1px solid var(--hl-green); }
.me-hist__status--rejected { background: rgba(232,90,90,0.15); color: var(--hl-red); border: 1px solid var(--hl-red); }
.me-hist__status--stale    { background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line-2); }
.me-hist__date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
}
.me-hist__chev {
  color: var(--ink-3);
  transition: transform 0.2s;
  font-size: 14px;
}
.me-hist--open .me-hist__chev { transform: rotate(180deg); color: var(--acc-2); }
.me-hist__comment {
  margin: 0 14px 10px;
  padding: 10px 12px;
  background: var(--bg-0);
  border-left: 2px solid;
  font-size: 13px;
  color: var(--ink-1);
}
.me-hist__comment--rejected { border-left-color: var(--hl-red); }
.me-hist__comment--accepted { border-left-color: var(--hl-green); }
.me-hist__comment-lbl {
  display: block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.me-hist__comment-txt { line-height: 1.55; }
.me-hist__body {
  padding: 10px 14px 14px;
  border-top: 1px dashed var(--line-2);
}
.me-hist__a {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-2);
}
.me-hist__a:last-child { border-bottom: 0; }
.me-hist__a-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-hist__a-v {
  font-size: 13px; color: var(--ink-1);
  line-height: 1.5;
  word-break: break-word;
}
.me-hist__a--sig .me-hist__a-v svg { max-width: 180px; max-height: 60px; background: var(--bg-0); padding: 4px; }
@media (max-width: 680px) {
  .me-hist__a { grid-template-columns: 1fr; }
  .me-hist__meta { flex-wrap: wrap; }
}

/* ----- Link block (player side) ----- */
.rep-fb--link {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(86,128,200,0.08), rgba(86,128,200,0.02));
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--acc);
}
.rep-fb--link .rep-fb__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink-0);
  margin: 0;
}
.rep-link-btn {
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center; gap: 8px;
  text-decoration: none;
}
.rep-link-btn__icon {
  font-size: 14px;
  font-weight: 800;
  display: inline-block;
  transition: transform .2s;
}
.rep-link-btn:hover .rep-link-btn__icon { transform: translate(2px, -2px); }
.rep-fb--link-empty {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
}

/* Admin: doc picker для link block */
.rep-doc-picker__search {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 13px;
  padding: 9px 12px;
  margin: 12px 0;
}
.rep-doc-picker__search:focus { outline: none; border-color: var(--acc); }
.rep-doc-picker__list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  min-height: 200px;
}
.rep-doc-picker__row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  font-family: 'Acrom';
  color: var(--ink-1);
}
.rep-doc-picker__row:last-child { border-bottom: 0; }
.rep-doc-picker__row:hover { background: var(--bg-1); }
.rep-doc-picker__color {
  width: 14px; height: 14px;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.rep-doc-picker__txt {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.rep-doc-picker__txt b {
  color: var(--ink-0);
  font-weight: 600;
  font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-doc-picker__txt small {
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* ----- Docpick block (admin + player) ----- */
/* Admin: chip-список разрешённых документов в карточке редактора */
.rep-docpick-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
  min-height: 40px;
  align-items: center;
}
.rep-docpick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom'; font-size: 12px;
  letter-spacing: 0.3px;
}
.rep-docpick-chip__name {
  font-weight: 600;
  color: var(--ink-0);
  text-decoration: none;
  max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.rep-docpick-chip__name { color: var(--acc-2); }
a.rep-docpick-chip__name:hover { text-decoration: underline; }
.rep-docpick-chip__del {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  width: 22px; height: 22px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: color 0.15s, background 0.15s;
}
.rep-docpick-chip__del:hover { color: var(--hl-red); background: rgba(232,90,90,0.12); }

/* Player side */
.rep-fb--docpick { display: flex; flex-direction: column; gap: 10px; }
.rep-docpick-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
  min-height: 44px;
  align-items: center;
}
.rep-docpick-open { align-self: flex-start; }

/* Admin: link block — превью выбранного документа в карточке редактора */
.rep-link-doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
}
.rep-link-doc-row__current { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Review modal — player chips (с РП-инфой) */
.rep-rev-players-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-rev-player-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--acc);
  font-family: 'Acrom';
  font-size: 12px;
  color: var(--ink-0);
}
.rep-rev-player-chip__name { font-weight: 700; letter-spacing: 0.3px; color: var(--ink-0); }
.rep-rev-player-chip__idn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--acc-2);
  letter-spacing: 0.5px;
}
.rep-rev-player-chip__rank {
  font-size: 11px;
  color: var(--ink-2);
  font-style: italic;
}
.rep-rev-player-chip__id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
}
.rep-rev-player-chip--unknown { border-left-color: var(--ink-3); opacity: 0.7; }

/* Editable players block in commander review */
.rep-rev-player-chip--edit { padding-right: 4px; }
.rep-rev-player-chip__rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 2px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 12px; line-height: 1;
  transition: color .12s, background .12s;
}
.rep-rev-player-chip__rm:hover { color: var(--hl-red); background: rgba(232,90,90,0.12); }
.rep-rev-pedit__empty { color: var(--ink-3); font-style: italic; font-size: 12px; }
.rep-rev-pedit__badge {
  margin-left: 8px; padding: 1px 7px;
  font-family: 'Acrom'; font-weight: 800; font-size: 9px;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--hl-orange); border: 1px solid var(--hl-orange);
  background: rgba(243,149,86,0.10);
}
.rep-rev-pedit__bar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rep-rev-pedit__btn { font-size: 11px; padding: 6px 12px; }
.rep-rev-pedit__btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ----- Attachments thumbnails (admin review) ----- */
.rep-rev-atts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.rep-rev-att {
  display: block;
  aspect-ratio: 4/3;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.rep-rev-att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-rev-att:hover { border-color: var(--acc); transform: scale(1.02); }
.rep-rev-att-count { color: var(--ink-3); font-weight: 400; font-size: 11px; }

.rep-form-fill__footer {
  max-width: 800px;
  margin: 24px auto 0;
  padding: 20px;
  background: var(--bg-1);
  border-top: 2px solid var(--acc);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rep-form-fill__autosave {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.rep-form-fill__validation {
  max-width: 800px;
  margin: 12px auto 0;
  font-size: 12px;
  text-align: center;
}

/* ----- Signature canvas ----- */
.rep-sig-canvas-wrap {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 4px;
  margin-bottom: 14px;
}
#repSigCanvas {
  display: block;
  width: 100%;
  height: 180px;
  cursor: crosshair;
  touch-action: none;
}
.rep-sig-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Override .hidden for sup-modal */
.sup-modal.hidden { display: none !important; }

/* Mobile */
@media (max-width: 760px) {
  .rep-page__head { flex-direction: column; gap: 12px; }
  .rep-page__h1 { font-size: 22px; }
  .rep-form-grid { grid-template-columns: 1fr; }
  .rep-form-fill__footer { flex-direction: column; align-items: stretch; }
  .rep-form-fill__footer .btn { width: 100%; }
  #repSigCanvas { height: 140px; }
}

/* ============================================================
   ADMIN: REVIEW QUEUE + FLY-OUT REVIEW PANEL (Phase 5)
   ============================================================ */
.rep-queue-badge {
  display: inline-block;
  background: var(--hl-orange);
  color: var(--bg-0);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 1px;
  padding: 1px 6px;
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
}
.rep-queue-toolbar {
  margin: 18px 0 16px;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.rep-queue-filters {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
}
.rep-queue-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.rep-queue-filter > span {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.rep-queue-filter select,
.rep-queue-filter input {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  padding: 7px 10px;
  font-family: 'Acrom';
  font-size: 12px;
  outline: none;
}
.rep-queue-filter select:focus,
.rep-queue-filter input:focus { border-color: var(--acc); }

.rep-queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rep-queue-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.rep-queue-card:hover {
  border-color: var(--acc);
  transform: translateX(4px);
}
.rep-queue-card__avatar {
  width: 56px; height: 56px;
  object-fit: cover;
  border: 1px solid var(--acc);
}
.rep-queue-card__avatar--empty {
  background: var(--bg-0);
  border: 1px dashed var(--line-2);
}
.rep-queue-card__main { min-width: 0; }
.rep-queue-card__top {
  display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rep-queue-card__nick {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px;
  color: var(--ink-0);
  letter-spacing: 0.5px;
}
.rep-queue-card__rank {
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', Consolas, monospace;
}
.rep-queue-card__form {
  font-size: 13px;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.rep-queue-card__meta {
  font-size: 11px;
  color: var(--ink-3);
}
.rep-queue-card__right {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}

.rep-queue-status {
  display: inline-block;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 2px;
  padding: 3px 8px;
  border: 1px solid;
  text-transform: uppercase;
}
.rep-queue-status--pending { color: var(--hl-orange); border-color: var(--hl-orange); background: rgba(243,149,86,0.10); }
.rep-queue-status--accepted { color: var(--hl-green); border-color: var(--hl-green); background: rgba(109,213,140,0.10); }
.rep-queue-status--rejected { color: var(--hl-red); border-color: var(--hl-red); background: rgba(232,90,90,0.10); }
.rep-queue-status--stale { color: var(--ink-3); border-color: var(--ink-3); }
.rep-queue-status--draft { color: var(--acc-2); border-color: var(--acc-2); }

/* ----- Fly-out review panel ----- */
.rep-review {
  position: fixed; inset: 0;
  z-index: 350;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.rep-review--shown { opacity: 1; pointer-events: auto; }
.rep-review__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 4, 12, 0.85);
  backdrop-filter: blur(6px);
}
.rep-review__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 720px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border-left: 2px solid var(--acc);
  box-shadow: -20px 0 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.rep-review--shown .rep-review__panel { transform: translateX(0); }
.rep-review__head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
  flex-shrink: 0;
}
.rep-review__close {
  position: absolute;
  top: 14px; right: 18px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 14px;
}
.rep-review__close:hover { color: #fff; background: var(--hl-red); border-color: var(--hl-red); }
.rep-review__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px; letter-spacing: 1px;
  color: var(--ink-0);
  margin: 0 36px 6px 0;
  line-height: 1.2;
}
.rep-review__subtitle {
  font-size: 12px;
  color: var(--ink-3);
  display: flex; align-items: center;
}
.rep-review__body {
  padding: 22px 26px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.rep-review__footer {
  padding: 18px 26px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
  flex-shrink: 0;
}
.rep-review__info {
  font-size: 13px;
  color: var(--ink-2);
}
.rep-review__target-hint {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  margin-bottom: 12px;
}
.rep-review__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.rep-review__reject:hover {
  border-color: var(--hl-red);
  color: var(--hl-red);
}

/* Player header inside review */
.rep-rev-player {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-1);
}
.rep-rev-player__avatar {
  width: 64px; height: 64px;
  object-fit: cover;
  border: 1px solid var(--acc);
  background: var(--bg-0);
}
.rep-rev-player__nick {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 18px;
  color: var(--ink-0);
}
.rep-rev-player__meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', Consolas, monospace;
  margin-top: 4px;
}

.rep-rev-section {
  margin-bottom: 22px;
}
.rep-rev-section__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Progress mini */
.rep-rev-prog {
  display: grid;
  grid-template-columns: 1fr 160px auto auto;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.rep-rev-prog__name {
  font-size: 12px;
  color: var(--ink-1);
}
.rep-rev-prog--current .rep-rev-prog__name { color: var(--acc-2); font-weight: 700; }
.rep-rev-prog--done .rep-rev-prog__name { color: var(--hl-green); }
.rep-rev-prog__bar {
  display: block;
  height: 6px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.rep-rev-prog__fill {
  display: block;
  height: 100%;
  background: var(--acc);
}
.rep-rev-prog--done .rep-rev-prog__fill { background: var(--hl-green); }
.rep-rev-prog__count {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px;
  color: var(--ink-1);
}

/* Бэйджи статуса требования в модалке игрока (Состав/Stats) */
.rep-rev-prog__badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-family: 'Acrom'; font-weight: 800;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  color: var(--ink-2);
  white-space: nowrap;
  justify-self: end;
}
.rep-rev-prog__badge--done {
  border-color: var(--hl-green);
  color: var(--hl-green);
  background: rgba(76, 209, 119, 0.08);
}
.rep-rev-prog__badge--pending {
  border-color: var(--hl-orange);
  color: var(--hl-orange);
  background: rgba(243, 149, 86, 0.08);
}
.rep-rev-prog__badge--partial {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(57, 178, 220, 0.08);
}
.rep-rev-prog__badge--miss {
  border-color: var(--line-2);
  color: var(--ink-3);
  background: transparent;
}

/* Answers */
.rep-rev-answers { display: flex; flex-direction: column; gap: 14px; }
.rep-rev-answer__header {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px; letter-spacing: 1px;
  color: var(--ink-0);
  margin: 6px 0;
  text-transform: uppercase;
}
.rep-rev-answer__text { color: var(--ink-1); font-size: 13px; }
.rep-rev-answer {
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
}
.rep-rev-answer__q {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 12px; color: var(--acc-2);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.rep-rev-answer__a {
  font-size: 13px;
  color: var(--ink-0);
  white-space: pre-wrap;
}
.rep-rev-answer__a--text {
  background: var(--bg-1);
  padding: 8px 10px;
  border-left: 2px solid var(--acc);
}
.rep-rev-opt {
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
}
/* Дефолт: chosen-без-quiz подсвечивается акцентным синим (нейтрально,
   не «правильный/неправильный»). */
.rep-rev-opt--chosen { color: var(--acc-2); font-weight: 700; }
/* В quiz-режиме correct/wrong перекрывают синий. */
.rep-rev-opt--correct { color: var(--hl-green); }
.rep-rev-opt--wrong { color: var(--hl-red); }
.rep-rev-quiz-marker {
  font-size: 9px; letter-spacing: 1px;
  background: var(--hl-green);
  color: var(--bg-0);
  padding: 1px 5px;
  margin-left: 6px;
}
.rep-rev-quiz-badge {
  display: inline-block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 1.5px;
  padding: 2px 6px;
  margin-left: 6px;
}
.rep-rev-quiz-badge--match { background: var(--hl-green); color: var(--bg-0); }
.rep-rev-quiz-badge--miss { background: var(--hl-red); color: #fff; }

.rep-rev-signature {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 14px;
}
.rep-rev-signature svg {
  display: block;
  width: 100%;
  height: 140px;
}

.rep-rev-hist {
  display: flex; flex-direction: column; gap: 4px;
}
.rep-rev-hist-row {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 8px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  font-size: 12px;
}
.rep-rev-hist-row__form { flex: 1; color: var(--ink-1); }
.rep-rev-hist-row__date { color: var(--ink-3); font-size: 11px; }
.rep-rev-empty { color: var(--ink-3); font-style: italic; }

@media (max-width: 760px) {
  .rep-queue-card { grid-template-columns: 48px 1fr; gap: 10px; }
  .rep-queue-card__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .rep-review__panel { max-width: 100%; }
  .rep-review__actions { flex-direction: column; }
  .rep-review__actions .btn { width: 100%; }
  .rep-rev-prog { grid-template-columns: 1fr auto; }
  .rep-rev-prog__bar { grid-column: 1 / -1; order: 3; }
  .rep-rev-prog__badge { grid-column: 1 / -1; justify-self: start; order: 4; }
}

/* ============================================================
   STATS TAB + PLAYER DETAIL MODAL (Phase 6.5)
   ============================================================ */
.rep-stats-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  padding: 12px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.rep-stats-toolbar__lbl {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 11px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.rep-stats-toolbar__range {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  padding: 7px 10px;
  font-family: 'Acrom';
  font-size: 12px;
}

.rep-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.rep-stats-card {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 16px;
  text-align: center;
}
.rep-stats-card__num {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 26px;
  color: var(--ink-0);
  line-height: 1.1;
}
.rep-stats-card__lbl {
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink-3);
  margin-top: 6px;
  text-transform: uppercase;
}
.rep-stats-card--pending .rep-stats-card__num { color: var(--hl-orange); }
.rep-stats-card--accepted .rep-stats-card__num { color: var(--hl-green); }
.rep-stats-card--rejected .rep-stats-card__num { color: var(--hl-red); }

.rep-stats-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.rep-stats-chart {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 16px;
  min-width: 0;
}
.rep-stats-chart__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--acc-2);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.rep-stats-line-svg {
  width: 100%;
  height: 240px;
  display: block;
}
.rep-stats-pie-wrap {
  display: flex; gap: 12px; align-items: flex-start;
  flex-wrap: wrap;
}

.rep-stats-section { margin: 18px 0; }
.rep-stats-section__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 12px; letter-spacing: 3px;
  color: var(--acc-2);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.rep-stats-table {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.rep-stats-table__row {
  display: grid;
  grid-template-columns: 36px 2fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
  align-items: center;
  font-size: 13px;
  color: var(--ink-1);
}
.rep-stats-table__row:last-child { border-bottom: 0; }
.rep-stats-table__row--head {
  background: var(--bg-2);
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.rep-stats-table__row--byform {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
}
.rep-stats-table__row--commanders {
  grid-template-columns: 1.5fr 0.8fr 0.6fr 0.6fr 0.8fr 1.4fr 1fr;
}
.rep-stats-table__row--inactive {
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
}
.rep-stats-row--clickable { cursor: pointer; transition: background var(--t-fast); }
.rep-stats-row--clickable:hover { background: rgba(86, 128, 200, 0.08); }
.rep-stats-table__rank {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 14px;
  color: var(--acc-2);
}
.rep-stats-table__player {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.rep-stats-table__player strong {
  display: block;
  color: var(--ink-0);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rep-stats-table__player small {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
  font-family: 'JetBrains Mono', Consolas, monospace;
}
.rep-stats-table__avatar {
  width: 32px; height: 32px;
  object-fit: cover;
  border: 1px solid var(--line-2);
  flex-shrink: 0;
}
.rep-stats-table__avatar--empty { background: var(--bg-0); }
.rep-stats-breakdown {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 4px;
}
.rep-stats-tag {
  display: inline-block;
  font-family: 'Acrom'; font-weight: 700;
  font-size: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  padding: 1px 5px;
}

/* Player modal */
.rep-player-modal {
  position: fixed; inset: 0;
  z-index: 360;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.rep-player-modal--shown { opacity: 1; pointer-events: auto; }
.rep-player-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 4, 12, 0.85);
  backdrop-filter: blur(6px);
}
.rep-player-modal__box {
  position: absolute;
  top: 5%; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: calc(100% - 32px);
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--acc);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 24px var(--acc-glow);
  padding: 28px 30px;
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.rep-player-modal--shown .rep-player-modal__box {
  transform: translateX(-50%) translateY(0);
}

/* GMod-данные в player modal */
.rep-player-gmod {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 14px;
}
.rep-player-gmod__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-1);
  font-size: 12px;
}
.rep-player-gmod__row:last-child,
.rep-player-gmod__row:nth-last-child(-n+2):not(:nth-child(odd)) { border-bottom: 0; }
.rep-player-gmod__row > span {
  color: var(--ink-3);
  font-family: 'Acrom'; font-weight: 700;
  font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase;
}
.rep-player-gmod__row > strong {
  color: var(--ink-0);
  font-weight: 700;
  font-size: 13px;
  text-align: right;
}

.rep-player-chars {
  display: flex; flex-direction: column; gap: 6px;
}
.rep-player-char {
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
}
.rep-player-char--active { border-color: var(--acc); }
.rep-player-char__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.rep-player-char__head strong {
  color: var(--ink-0);
  font-size: 13px;
}
.rep-player-char__active {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 1.5px;
  background: var(--acc);
  color: #fff;
  padding: 1px 6px;
  text-transform: uppercase;
}
.rep-player-char__meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .rep-stats-charts { grid-template-columns: 1fr; }
  .rep-stats-table__row { grid-template-columns: 1fr 1fr; font-size: 12px; }
  .rep-stats-table__row--byform { grid-template-columns: 1fr 1fr; }
  .rep-stats-table__row--commanders { grid-template-columns: 1fr 1fr; }
  .rep-stats-table__row > span { word-break: break-word; }
  .rep-stats-table__row--head { display: none; }
}

/* ============================================================ */
/* Driver.js tour — override default theme to match cyber-dark UI */
/* ============================================================ */
.driver-popover {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  border: 1px solid var(--acc) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 24px var(--acc-glow) !important;
  color: var(--ink-0) !important;
  font-family: 'Acrom', sans-serif !important;
  border-radius: 0 !important;
  max-width: 380px !important;
  padding: 18px 20px 16px !important;
}
.driver-popover-title {
  color: var(--acc-2) !important;
  font-family: 'Acrom', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--line-2) !important;
}
.driver-popover-description {
  color: var(--ink-1) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.driver-popover-description p { margin: 0 0 4px 0; }
.driver-popover-description b { color: var(--acc-2); }
.driver-popover-description code {
  background: var(--bg-0);
  color: var(--hl-green);
  padding: 1px 5px;
  font-family: 'Iosevka', monospace;
  font-size: 11px;
  border: 1px solid var(--line-2);
}
.driver-popover-footer {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--line-2) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}
.driver-popover-progress-text {
  color: var(--ink-3) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  font-family: 'Acrom' !important;
}
.driver-popover-navigation-btns {
  display: flex !important;
  gap: 8px !important;
}
.driver-popover-prev-btn,
.driver-popover-next-btn,
.driver-popover-close-btn {
  background: var(--bg-0) !important;
  color: var(--ink-0) !important;
  border: 1px solid var(--line-2) !important;
  padding: 7px 14px !important;
  font-family: 'Acrom', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.driver-popover-next-btn {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: var(--bg-0) !important;
}
.driver-popover-prev-btn:hover,
.driver-popover-close-btn:hover {
  border-color: var(--acc) !important;
  color: var(--acc-2) !important;
}
.driver-popover-next-btn:hover {
  background: var(--acc-2) !important;
  border-color: var(--acc-2) !important;
}
.driver-popover-close-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  padding: 2px 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  font-size: 18px !important;
}
.driver-popover-close-btn:hover { color: var(--hl-red) !important; background: transparent !important; }
.driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-color: var(--acc) transparent !important;
}
.driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--acc) !important; }
.driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--acc) !important; }
.driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--acc) !important; }
.driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--acc) !important; }
.driver-overlay {
  fill: rgba(8, 12, 22, 0.78) !important;
}
.driver-active-element {
  position: relative !important;
}
.driver-active-element::after {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  border: 1px solid var(--acc);
  box-shadow: 0 0 18px var(--acc-glow);
  animation: tour-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 14px var(--acc-glow); }
  50%      { box-shadow: 0 0 22px var(--acc-glow), 0 0 36px var(--acc-glow); }
}

/* ============================================================ */
/* ЛОР — admin canvas + player viewer                            */
/* ============================================================ */

/* === Admin pane === */
.lore-pane { padding: 0 !important; }
.lore-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: calc(100vh - 80px);
  min-height: 600px;
  position: relative;
  overflow: hidden; /* editor абсолютный — режем по краю shell'а на случай узких экранов */
}

/* Fullscreen mode для ЛОР — прячем admin-side, разворачиваем pane на весь viewport.
   :has() — гарантия что эффект применяется ТОЛЬКО когда ЛОР-pane сейчас активен.
   Если пользователь перешёл на другую вкладку (или зашёл сразу не на ЛОР), сайдбар
   останется видимым — не запрёт навигацию. */
body.lore-fullscreen:has([data-pane="lore"]:not(.hidden)) .admin-side { display: none; }
body.lore-fullscreen:has([data-pane="lore"]:not(.hidden)) .admin-shell { grid-template-columns: 1fr; }
body.lore-fullscreen:has([data-pane="lore"]:not(.hidden)) [data-pane="lore"] { padding: 0; }
body.lore-fullscreen:has([data-pane="lore"]:not(.hidden)) .lore-shell { height: 100vh; }
body.lore-fullscreen:has([data-pane="lore"]:not(.hidden)) .admin-main { padding: 0; }

.lore-canvas-toolbar__sep {
  width: 1px;
  height: 22px;
  background: var(--line-2);
  margin: 0 4px;
}
.lore-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line-2);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.lore-side__head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-2); }
.lore-side__title {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--acc-2);
  margin: 0 0 10px;
}
.lore-side__palette { padding: 14px 14px 18px; border-bottom: 1px solid var(--line-2); }
.lore-kit {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  cursor: grab;
  margin-bottom: 8px;
  transition: background .15s, border-color .15s, transform .15s;
  text-align: left;
}
.lore-kit:hover { background: var(--bg-2); border-color: var(--acc); transform: translateX(2px); }
.lore-kit:active { cursor: grabbing; }
.lore-kit__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.lore-kit--campaign .lore-kit__dot { background: #d4513a; color: #d4513a; }
.lore-kit--event .lore-kit__dot    { background: #e8a93a; color: #e8a93a; }
.lore-kit--sub_event .lore-kit__dot{ background: #5fa86c; color: #5fa86c; }
.lore-kit--note .lore-kit__dot     { background: #8a96bc; color: #8a96bc; }
.lore-kit__lab { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.lore-kit__lab b { font-weight: 800; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; }
.lore-kit__lab small { color: var(--ink-3); font-size: 10px; letter-spacing: 0.5px; }

.lore-side__list-head { padding: 14px 18px 6px; }
.lore-search {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 12px;
  padding: 8px 10px;
}
.lore-side__list { padding: 8px 12px 18px; flex: 1; overflow-y: auto; }
.lore-side__item {
  display: flex; gap: 10px; align-items: center;
  width: 100%; padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-1);
  cursor: pointer;
  font-family: 'Acrom';
  text-align: left;
  margin-bottom: 2px;
}
.lore-side__item:hover { background: var(--bg-0); border-color: var(--line-2); color: var(--ink-0); }
.lore-side__item-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.lore-side__item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lore-side__item-txt b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lore-side__item-txt small { font-size: 10px; color: var(--ink-3); letter-spacing: 0.5px; }

/* === Canvas (admin) === */
.lore-canvas-wrap {
  display: flex; flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(86, 128, 200, 0.08), transparent 70%),
    var(--bg-0);
}
.lore-canvas-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-2);
}
.lore-canvas {
  position: relative; flex: 1;
  overflow: hidden;
  cursor: grab;
  background-image:
    linear-gradient(0deg, rgba(86,128,200,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,128,200,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.lore-canvas--panning { cursor: grabbing; }
.lore-svg { width: 100%; height: 100%; display: block; user-select: none; }
.lore-empty-hint {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-family: 'Acrom';
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
}

/* === Nodes (admin canvas SVG) === */
.lore-node { cursor: pointer; }
.lore-node__body {
  filter: drop-shadow(0 0 12px currentColor);
  transition: filter .2s;
}
.lore-node__short {
  fill: rgba(0,0,0,0.55);
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  pointer-events: none;
  user-select: none;
}
.lore-node__title {
  fill: var(--ink-0);
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.lore-node__ring {
  opacity: 0;
  transition: opacity .2s;
}
.lore-node:hover .lore-node__ring { opacity: 0.9; cursor: crosshair; }
.lore-node__halo { cursor: crosshair; }
.lore-node__glow {
  opacity: 0;
  transition: opacity .25s;
}
.lore-node:hover .lore-node__glow { opacity: 0.6; animation: lore-glow-pulse 1.8s ease-in-out infinite; }
.lore-node--selected .lore-node__glow { opacity: 1; }
.lore-node--selected .lore-node__ring { opacity: 1; stroke-dasharray: 0; }
@keyframes lore-glow-pulse {
  0%, 100% { stroke-width: 1; opacity: 0.5; }
  50%      { stroke-width: 3; opacity: 0.9; }
}

/* === Edges (admin) === */
.lore-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity .15s, stroke-width .15s;
}
.lore-edge:hover { opacity: 1; stroke-width: 2.4; }
.lore-edge--temp { stroke-dasharray: 6 4; opacity: 0.6; pointer-events: none; }
.lore-edge__label {
  fill: var(--ink-1);
  font-family: 'Acrom';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--bg-0);
  stroke-width: 4;
  pointer-events: none;
}

/* === Editor slide-out === */
.lore-editor {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 540px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border-left: 1px solid var(--acc);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
  z-index: 5;
  transform: translateX(0);
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.lore-editor.hidden { transform: translateX(110%); display: flex !important; }
.lore-editor__head {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
}
.lore-editor__head-row {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.lore-editor__chip {
  display: inline-flex; align-items: center;
  background: var(--acc);
  color: #fff;
  padding: 4px 10px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.lore-editor__title {
  flex: 1;
  min-width: 0; /* flexbox: позволяем сжиматься ниже content size */
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom'; font-weight: 700;
  font-size: 14px; letter-spacing: 0.5px;
  padding: 8px 12px;
}
.lore-editor__head-actions {
  display: flex; gap: 6px;
  align-items: center;
}
.lore-editor__meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.lore-editor__field {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Acrom';
}
.lore-editor__field > span {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lore-editor__field input,
.lore-editor__field select {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 12px;
  padding: 6px 10px;
}
.lore-editor__field input[type=color] {
  padding: 2px;
  width: 60px;
  height: 32px;
  cursor: pointer;
}
.lore-editor__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex; flex-direction: column;
}
.lore-editor__body .editor-area {
  flex: 1;
  min-height: 240px;
  background: var(--bg-0);
}
.lore-editor__msg {
  padding: 8px 18px;
  font-size: 12px;
  border-top: 1px solid var(--line-2);
}

@media (max-width: 1100px) {
  .lore-editor { width: 100%; }
}

/* === Player viewer === */
.lore-page-head { margin: 12px 0 26px; max-width: 720px; }
.lore-page-title { margin: 0; }
.lore-page-lead {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
}
.lore-viewer-wrap {
  position: relative;
  height: 76vh;
  min-height: 540px;
  /* Многослойный фон:
   *  1) тонкая сетка-grid (small) — основа
   *  2) крупная сетка с акцентом — каждые 5 ячеек жирнее
   *  3) диагональные «координатные» линии для эффекта голограммы
   *  4) центральный радиальный glow
   *  5) виньетка от краёв
   *  6) базовый тёмный цвет
   */
  background:
    radial-gradient(circle at 50% 50%, rgba(86, 128, 200, 0.18), transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(0deg,  rgba(86,128,200,0.10) 1px, transparent 1px) 0 0 / 240px 240px,
    linear-gradient(90deg, rgba(86,128,200,0.10) 1px, transparent 1px) 0 0 / 240px 240px,
    linear-gradient(0deg,  rgba(86,128,200,0.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(86,128,200,0.05) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg-0);
  border: 1px solid var(--acc);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  cursor: grab;
  --cut: 16px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* Декоративный слой: тонкие сканлайны + углы-рамки */
.lore-viewer-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(86,128,200,0.025) 3px 4px);
  mix-blend-mode: screen;
  z-index: 1;
}
.lore-viewer-wrap::after {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(86, 128, 200, 0.18);
  z-index: 2;
  /* угловые скобки через mask чтобы оставалась только рамка-фрагменты по углам */
  -webkit-mask:
    linear-gradient(#000 0 0) top left / 60px 1px no-repeat,
    linear-gradient(#000 0 0) top left / 1px 60px no-repeat,
    linear-gradient(#000 0 0) top right / 60px 1px no-repeat,
    linear-gradient(#000 0 0) top right / 1px 60px no-repeat,
    linear-gradient(#000 0 0) bottom left / 60px 1px no-repeat,
    linear-gradient(#000 0 0) bottom left / 1px 60px no-repeat,
    linear-gradient(#000 0 0) bottom right / 60px 1px no-repeat,
    linear-gradient(#000 0 0) bottom right / 1px 60px no-repeat;
          mask:
    linear-gradient(#000 0 0) top left / 60px 1px no-repeat,
    linear-gradient(#000 0 0) top left / 1px 60px no-repeat,
    linear-gradient(#000 0 0) top right / 60px 1px no-repeat,
    linear-gradient(#000 0 0) top right / 1px 60px no-repeat,
    linear-gradient(#000 0 0) bottom left / 60px 1px no-repeat,
    linear-gradient(#000 0 0) bottom left / 1px 60px no-repeat,
    linear-gradient(#000 0 0) bottom right / 60px 1px no-repeat,
    linear-gradient(#000 0 0) bottom right / 1px 60px no-repeat;
}
.lore-viewer-svg, .lore-viewer-legend, .lore-viewer-help, .lore-viewer-empty {
  position: relative;
  z-index: 3;
}
.lore-viewer-wrap--pan { cursor: grabbing; }
.lore-viewer-svg { width: 100%; height: 100%; display: block; user-select: none; }
.lore-viewer-legend {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 8px;
  flex-wrap: wrap;
  z-index: 5;
  pointer-events: none;
}
.lore-vlg {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  padding: 4px 9px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(15, 20, 30, 0.7);
  border: 1px solid currentColor;
  backdrop-filter: blur(4px);
}
.lore-vlg::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.lore-vlg--campaign  { color: #d4513a; }
.lore-vlg--event     { color: #e8a93a; }
.lore-vlg--sub_event { color: #5fa86c; }
.lore-vlg--note      { color: #8a96bc; }
.lore-viewer-help {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Acrom';
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  background: rgba(15,20,30,0.85);
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  pointer-events: none;
  text-transform: uppercase;
  z-index: 5;
}
.lore-viewer-help kbd {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-1);
  color: var(--acc-2);
  padding: 1px 5px;
  border: 1px solid var(--acc);
  font-size: 9px;
  text-transform: none;
  margin: 0 2px;
}
.lore-viewer-help__mobile { display: none; }
@media (hover: none), (max-width: 760px) {
  .lore-viewer-help__desktop { display: none; }
  .lore-viewer-help__mobile { display: inline; }
}

/* ── Поиск по ЛОР ── */
.lore-search {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; max-width: 560px;
}
.lore-search__input {
  flex: 1;
  background: rgba(15,20,30,0.7);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-family: 'Acrom';
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 12px;
  outline: none;
}
.lore-search__input:focus { border-color: var(--acc); }
.lore-search__input::placeholder { color: var(--ink-3); }
.lore-search__clear {
  background: rgba(15,20,30,0.7);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
  padding: 8px 10px;
}
.lore-search__clear:hover { color: var(--hl-red); border-color: var(--hl-red); }
.lore-search__count {
  font-family: 'Wadik', monospace;
  font-size: 12px;
  color: var(--acc-2);
  white-space: nowrap;
  min-width: 92px;
}
/* Подсветка/затемнение узлов при поиске. !important — чтобы перебить
   animation-fill-mode:both у .lv-reveal (иначе dim не применится). */
.lv-node.lv-dim { opacity: 0.1 !important; transition: opacity .2s; pointer-events: none; }
.lv-node.lv-hit { opacity: 1 !important; }
.lv-node.lv-hit .lv-halo { opacity: 0.55 !important; }

/* ── Панель «Последние ивенты» (оверлей на полотне) ── */
/* Инфо-блок «Последние ивенты» — под картой событий, на всю ширину. */
.lore-recent {
  display: block;
  margin-top: 22px;
  background: rgba(13,18,28,0.55);
  border: 1px solid var(--line-2);
  font-family: 'Acrom';
}
.lore-recent__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: rgba(86,128,200,0.10);
  border: none; border-bottom: 1px solid var(--line-2);
  color: var(--ink-1);
  font-family: 'Wadik', monospace;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 18px; cursor: pointer;
}
.lore-recent__toggle:hover { color: var(--ink-0); }
.lore-recent__chev { transition: transform .18s; font-style: normal; }
.lore-recent.is-collapsed .lore-recent__chev { transform: rotate(-90deg); }
.lore-recent.is-collapsed .lore-recent__body { display: none; }
/* Две колонки (Проведён | Планируется) на всю ширину */
.lore-recent__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 18px;
}
.lore-recent__grp { min-width: 0; }
.lore-recent__grp-h {
  font-family: 'Wadik', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 6px 10px; margin-bottom: 12px;
  border-left: 3px solid var(--ink-3);
  color: var(--ink-2);
}
.lore-recent__grp-h--done    { border-left-color: var(--hl-green, #4cd177); color: var(--hl-green, #4cd177); }
.lore-recent__grp-h--planned { border-left-color: var(--hl-orange, #f3a14a); color: var(--hl-orange, #f3a14a); }
.lore-recent__item {
  display: block; width: 100%; text-align: left;
  background: rgba(86,128,200,0.05);
  border: 1px solid var(--line-1);
  color: var(--ink-1); cursor: pointer;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.lore-recent__item:last-child { margin-bottom: 0; }
.lore-recent__item:hover { background: rgba(86,128,200,0.12); border-color: var(--acc); }
.lore-recent__item.is-nolink { cursor: default; }
.lore-recent__item.is-nolink:hover { background: rgba(86,128,200,0.05); border-color: var(--line-1); }
.lore-recent__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lore-recent__name {
  font-family: 'Acrom', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lore-recent__date {
  font-family: 'Wadik', monospace; font-size: 12px;
  color: var(--ink-3); white-space: nowrap;
}
.lore-recent__time {
  display: block; font-family: 'Wadik', monospace; font-size: 11px;
  color: var(--acc-2); margin-top: 2px; letter-spacing: 0.3px;
}
.lore-recent__camp {
  display: block; font-family: 'Acrom', sans-serif; font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.4px; margin-top: 3px;
}
.lore-recent__win {
  margin-top: 8px;
  font-family: 'Acrom', sans-serif; font-weight: 800;
  font-size: 22px; letter-spacing: 0.5px; line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink-0);
}
.lore-recent__win-lbl {
  font-family: 'Wadik', monospace;
  font-size: 11px; font-weight: 400;
  letter-spacing: 1.4px;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-right: 6px;
}
.lore-recent__win--rep   { color: #5aa9ff; }
.lore-recent__win--cis   { color: #e8603a; }
.lore-recent__win--other { color: var(--acc-2); }
@media (max-width: 760px) {
  .lore-recent__body { grid-template-columns: 1fr; gap: 18px; padding: 14px; }
  .lore-recent__win { font-size: 18px; }
}
.lore-viewer-empty {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-3);
  text-align: center;
  pointer-events: none;
}
.lore-viewer-empty h2 {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 20px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.lore-viewer-empty p { font-size: 13px; margin: 0; max-width: 360px; }

/* Player node visuals */
.lv-node { cursor: pointer; transition: filter .25s; }
.lv-body { transition: r .25s, filter .25s; }
.lv-node:hover .lv-body { filter: url(#lv-glow) brightness(1.25); }
.lv-halo {
  transition: opacity .25s, r .25s;
}
.lv-node:hover .lv-halo { opacity: 0.5 !important; r: 60; }
.lv-short {
  fill: rgba(0,0,0,0.55);
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  pointer-events: none;
  user-select: none;
}
.lv-title {
  fill: var(--ink-0);
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.lv-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.55;
  transition: opacity .15s, stroke-width .15s;
}
.lv-node:hover ~ .lv-edge { opacity: 1; }

/* Date-group «капля» вокруг свободных ивентов (сгруппированы по дате) */
.lv-blob {
  fill: rgba(232, 169, 58, 0.055);
  stroke: rgba(232, 169, 58, 0.42);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  pointer-events: none;
  paint-order: stroke;
  filter: drop-shadow(0 0 6px rgba(232, 169, 58, 0.12));
  animation: lv-blob-in 0.7s ease-out both, lv-blob-march 2.6s linear infinite;
}
/* Пунктир «ползёт» по контуру. Сдвиг кратен периоду штриха (7+6=13) —
   шов незаметен, цикл бесшовный. */
@keyframes lv-blob-march {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -13; }
}
.lv-blob-label {
  fill: #e8a93a;
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: rgba(4, 7, 14, 0.85);
  stroke-width: 3px;
  animation: lv-blob-in 0.7s ease-out both;
}
@keyframes lv-blob-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* Скрываем «капли» пока идёт поэтапное появление узлов */
.lv-blobs-pre { opacity: 0; pointer-events: none; }
#lvBlobs { transition: opacity 0.6s ease-out; }

/* === Reveal animation === */
/* Узлы: lv-pre — невидимые. lv-reveal — fade-in + glow pulse через halo. */
.lv-node.lv-pre { opacity: 0; pointer-events: none; }
.lv-node.lv-reveal {
  opacity: 1;
  animation: lv-node-fade-in 0.5s cubic-bezier(.34,1.4,.55,1) both;
}
.lv-node.lv-reveal .lv-halo {
  animation: lv-halo-burst 0.7s ease-out both;
}
@keyframes lv-node-fade-in {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes lv-halo-burst {
  0%   { opacity: 0; stroke-width: 1; }
  40%  { opacity: 0.85; stroke-width: 4; }
  100% { opacity: 0.18; stroke-width: 1; }
}

/* Рёбра: pre = невидимые. drawing = пунктир + рост вдоль кривой (JS-ведёт offset).
   flash = вспышка белым. После flash JS снимает dasharray → сплошные. */
.lv-edge.lv-pre { opacity: 0; transition: none; pointer-events: none; }
.lv-edge.lv-drawing {
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px currentColor);
}
.lv-edge.lv-flash {
  animation: lv-edge-flash 0.38s ease-out;
}
@keyframes lv-edge-flash {
  0%   { stroke: currentColor; filter: drop-shadow(0 0 4px currentColor); stroke-width: 1.6; }
  30%  { stroke: #ffffff;       filter: drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 32px currentColor); stroke-width: 3; }
  100% { stroke: currentColor; filter: drop-shadow(0 0 0 currentColor); stroke-width: 1.6; }
}

/* ============================================================ */
/* Мобильная вёрстка для просмотра ЛОР                          */
/* /lore (граф) + /lore/:id (деталь)                            */
/* ============================================================ */
@media (max-width: 760px) {
  /* /lore — главная карта */
  .lore-page-head { margin: 8px 0 16px; }
  .lore-page-title { font-size: 32px; line-height: 1.05; }
  .lore-page-lead { font-size: 13px; line-height: 1.55; margin-top: 12px; }

  .lore-viewer-wrap {
    height: 70vh;
    min-height: 420px;
    --cut: 10px;
  }
  .lore-viewer-wrap::after { inset: 8px; }

  /* Легенда — компактные чипы, переносится */
  .lore-viewer-legend {
    top: 10px; left: 10px;
    gap: 4px;
  }
  .lore-vlg {
    font-size: 8px;
    letter-spacing: 1.4px;
    padding: 3px 6px;
  }
  .lore-vlg::before { width: 6px; height: 6px; }

  /* Помощь снизу — на мобиле меняем смысл: жестами */
  .lore-viewer-help {
    bottom: 8px;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 5px 10px;
    max-width: calc(100% - 32px);
    text-align: center;
  }
  .lore-viewer-help kbd { font-size: 8px; padding: 1px 4px; }

  /* Подписи узлов чуть мельче на мобиле */
  .lv-title { font-size: 11px; }
  .lv-short { font-size: 9px; }

  /* Empty state */
  .lore-viewer-empty h2 { font-size: 16px; letter-spacing: 3px; }
  .lore-viewer-empty p { font-size: 12px; max-width: 280px; padding: 0 18px; }

  /* /lore/:id — деталь в стиле туториала.
     Скрываем сайдбар (TOC + соседи), оставляем только основной контент.
     Сторонние стили .article-side уже имеют responsive в общем CSS, но проверим. */
  /* Если общий .article responsive уже спрятал aside — этого достаточно. */
}

/* Тачпады/телефоны без hover */
@media (hover: none) {
  /* На тач-устройстве hover-репульсия и магнит-эффект не нужны,
     но JS уже trigger'ит их через mouseenter/move. Тач не вызывает mouseenter
     до tap, поэтому эффект не запускается случайно. Просто на всякий случай
     минимизируем «прыжки» — снизим интенсивность glow при отсутствии hover. */
  .lv-node:hover .lv-body { filter: url(#lv-glow); }
  .lv-node:hover .lv-halo { opacity: 0.18 !important; }
}

/* ════════════════════════════════════════════════════════
   LORE NODE — campaign tree in "Связано" sidebar
   ════════════════════════════════════════════════════════ */
#loreNeighbors {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Acrom';
}
.lnt-root, .lnt-chaps, .lnt-evs, .lnt-notes,
.lnt-chap-notes, .lnt-root-notes {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lnt-camp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-0);
  text-decoration: none;
  border-left: 3px solid #d4513a;
  background: rgba(212, 81, 58, 0.06);
}
.lnt-camp-row.is-here {
  background: rgba(212, 81, 58, 0.15);
  box-shadow: inset 0 0 0 1px #d4513a;
}
.lnt-camp-row:hover { color: var(--acc-2); }
.lnt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.lnt-dot--camp { background: #d4513a; color: #d4513a; }
.lnt-dot--note { background: #8a96bc; color: #8a96bc; }

.lnt-chaps { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; }
.lnt-chap {
  border-left: 2px solid var(--line-2);
  padding-left: 10px;
}
.lnt-chap-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 4px 0;
}
.lnt-chap-title {
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-1);
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lnt-badge {
  display: inline-block;
  padding: 2px 7px;
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 1.5px;
  border-radius: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 1px solid currentColor;
}
.lnt-badge--chap {
  color: var(--acc-2);
  background: rgba(86,128,200, 0.12);
}
.lnt-badge--evt {
  color: #e8a93a;
  background: rgba(232,169,58, 0.08);
}

.lnt-evs { display: flex; flex-direction: column; gap: 3px; padding-left: 6px; }
.lnt-evt { font-size: 11px; }
.lnt-evt .lnt-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  text-decoration: none;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  transition: all var(--t-fast);
}
.lnt-evt .lnt-row:hover {
  color: var(--ink-0);
  background: rgba(86,128,200, 0.06);
  border-left-color: var(--acc);
}
.lnt-evt.is-here .lnt-row {
  color: var(--ink-0);
  background: rgba(86,128,200, 0.15);
  border-left-color: var(--acc-2);
  font-weight: 700;
}
.lnt-evt.is-done .lnt-evt__title { opacity: 0.65; text-decoration: line-through; }
.lnt-evt__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.lnt-evt__date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--ink-3);
}

.lnt-notes, .lnt-chap-notes, .lnt-root-notes {
  margin-left: 14px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lnt-note {
  font-size: 10px;
  color: var(--ink-3);
}
.lnt-note a, .lnt-note > span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  text-decoration: none;
  color: var(--ink-3);
  border-left: 1px dashed var(--line-2);
}
.lnt-note a:hover { color: var(--acc-2); border-left-color: var(--acc-2); }
.lnt-note.is-here a, .lnt-note.is-here > span {
  color: var(--ink-0);
  background: rgba(86,128,200, 0.10);
  border-left-style: solid;
  border-left-color: var(--acc);
}
.lnt-note em {
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-style: normal;
  margin-right: 2px;
}
.lnt-empty {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  padding: 4px 8px;
}
.lnt-root-notes { margin-left: 8px; margin-top: 4px; }

/* ── Chapter-context block on event LORE detail pages ──────────── */
.lore-chap-ctx {
  position: relative;
  margin: 0 0 22px;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, rgba(86,128,200, 0.08), rgba(86,128,200, 0.02));
  border-left: 3px solid var(--acc);
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.lore-chap-ctx__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lore-chap-ctx__title {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-0);
  text-transform: uppercase;
}
.lore-chap-ctx__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}


/* ═════════════════════════════════════════════════════════════════════
   FACTIONS · ONLINE CHART
   Линейный график "онлайн по подразделениям" на /factions
   ═════════════════════════════════════════════════════════════════════ */

.fol-chart {
  position: relative;
  margin: 32px 0 24px;
  padding: 22px 26px 18px;
  background: linear-gradient(180deg, rgba(11,16,36,0.85), rgba(7,11,28,0.75));
  border: 1px solid var(--line-2);
  backdrop-filter: blur(4px);
}

.fol-chart__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
}

.fol-chart__kicker {
  font-family: 'wadik', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.fol-chart__title {
  margin: 0;
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--ink-0);
  text-shadow: 0 0 12px rgba(86, 128, 200, 0.18);
}

.fol-chart__range {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fol-range-btn {
  padding: 8px 12px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  color: var(--ink-2);
  font-family: 'wadik', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.fol-range-btn:hover {
  border-color: var(--acc);
  color: var(--ink-0);
}
.fol-range-btn.is-active {
  background: var(--acc);
  color: white;
  border-color: var(--acc);
  box-shadow: 0 0 12px rgba(86, 128, 200, 0.4);
}
.fol-range-btn--week {
  border-color: var(--acc-2);
  color: var(--acc-2);
}
.fol-range-btn--week.is-active {
  background: var(--acc-2);
  color: #0a0e1c;
}

/* ── Legend chips (per faction) ───────────────────────────────────── */
.fol-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-1);
}

/* Сводка: сейчас онлайн + пик за период */
.fol-chart__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.fol-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  background: var(--bg-1, rgba(86,128,200,0.06));
  border: 1px solid var(--line-2, rgba(86,128,200,0.18));
  border-left: 3px solid rgba(86,128,200,0.55);
}
.fol-stat--now { border-left-color: #4bd262; }
.fol-stat__lbl {
  font-family: 'wadik', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205,213,238,0.6);
}
.fol-stat__val {
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-0, #eaf0ff);
}
.fol-stat--now .fol-stat__val { color: #6dd58c; }
.fol-stat__sub {
  margin-top: 3px;
  font-family: 'wadik', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(205,213,238,0.5);
}

/* Тултип: строка общего онлайна за час */
.fol-tooltip__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line-1, rgba(86,128,200,0.18));
  font-family: 'wadik', monospace;
  font-size: 12px;
  color: rgba(205,213,238,0.7);
}
.fol-tooltip__total span {
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 15px;
  color: #8fb4ff;
}

/* Топ-3 фракции по онлайну */
.fol-top3 { margin-top: 18px; }
.fol-top3:empty { display: none; }
.fol-top3__title {
  font-family: 'wadik', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(205,213,238,0.55);
  margin-bottom: 10px;
}
.fol-top3__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fol-top3__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-1, rgba(86,128,200,0.06));
  border: 1px solid var(--line-2, rgba(86,128,200,0.18));
  border-left: 3px solid var(--col, #5680c8);
}
.fol-top3__rank {
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 18px;
  color: var(--col, #5680c8);
}
.fol-top3__dot {
  width: 10px; height: 10px; flex: none;
  background: var(--col, #5680c8);
  box-shadow: 0 0 8px var(--col, #5680c8);
}
.fol-top3__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fol-top3__txt b {
  font-family: 'acrom-bold', sans-serif;
  font-size: 14px;
  color: var(--ink-0, #eaf0ff);
}
.fol-top3__txt small {
  font-size: 11px;
  color: rgba(205,213,238,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fol-top3__peak {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 20px;
  color: var(--col, #8fb4ff);
}
.fol-top3__peak small {
  font-family: 'wadik', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(205,213,238,0.5);
}
@media (max-width: 640px) {
  .fol-top3__row { grid-template-columns: 1fr; }
}

.fol-legend-chip {
  --col: #5680c8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--col) 8%, var(--bg-0));
  border: 1px solid color-mix(in srgb, var(--col) 38%, transparent);
  border-left: 3px solid var(--col);
  font-family: 'wadik', monospace;
  font-size: 11px;
  color: var(--ink-1);
  line-height: 1.3;
}
.fol-legend-chip b {
  font-family: 'acrom-bold', sans-serif;
  font-size: 12px;
  color: var(--col);
  letter-spacing: 0.06em;
}
.fol-legend-chip small {
  color: var(--ink-3);
  font-size: 10px;
}
.fol-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--col);
  box-shadow: 0 0 10px color-mix(in srgb, var(--col) 60%, transparent);
  display: inline-block;
}

/* ── Canvas + SVG chart ──────────────────────────────────────────── */
.fol-chart__canvas {
  position: relative;
  background: rgba(6, 9, 20, 0.55);
  border: 1px solid var(--line-1);
  padding: 6px;
  min-height: 360px;
}

.fol-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  cursor: crosshair;
}

.fol-chart__skeleton {
  padding: 60px 20px;
  text-align: center;
  font-family: 'wadik', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fol-chart__err {
  padding: 30px;
  text-align: center;
  color: var(--hl-red);
  font-family: 'wadik', monospace;
  font-size: 12px;
}

.fol-chart__empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  font-size: 13px;
  line-height: 1.65;
}

/* ── Tooltip (positioned by JS) ──────────────────────────────────── */
.fol-chart__tooltip {
  position: absolute;
  top: 14px;
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  background: rgba(10, 14, 32, 0.96);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--acc-2);
  backdrop-filter: blur(8px);
  font-family: 'wadik', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-1);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.fol-tooltip__t {
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-0);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-1);
}
.fol-tooltip__msk {
  font-family: 'wadik', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-left: 2px;
}
.fol-tooltip__local {
  display: block;
  margin-top: 3px;
  font-family: 'wadik', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--acc-2);
  text-transform: none;
}
.fol-tooltip__row {
  --c: #5680c8;
  display: grid;
  grid-template-columns: 10px auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}
.fol-tooltip__row b {
  font-family: 'acrom-bold', sans-serif;
  color: var(--c);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.fol-tooltip__row small {
  color: var(--ink-3);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fol-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.fol-tooltip__v {
  font-family: 'acrom-extrabold', sans-serif;
  color: var(--ink-0);
  font-size: 13px;
}
.fol-tooltip__empty {
  color: var(--ink-3);
  font-style: italic;
  padding: 4px 0;
}

/* ── Footer (last update timestamp) ─────────────────────────────── */
.fol-chart__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-1);
  font-family: 'wadik', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.fol-chart__updated {
  font-family: 'wadik', monospace;
}

.png-icon-mini {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  vertical-align: middle;
  margin-right: 4px;
}
.png-icon-mini--info  { -webkit-mask-image: url(/img/icons/info.png); mask-image: url(/img/icons/info.png); }
.png-icon-mini--clock { -webkit-mask-image: url(/img/icons/info.png); mask-image: url(/img/icons/info.png); }

@media (max-width: 800px) {
  .fol-chart { padding: 18px 16px 14px; }
  .fol-chart__title { font-size: 20px; }
  .fol-range-btn { padding: 6px 9px; font-size: 10px; }
  .fol-chart__canvas { min-height: 260px; }
}

/* ─────────────────────────────────────────────────────────
   FORMS / RANKS — hidden + level + credit-form helpers
   ───────────────────────────────────────────────────────── */

.rep-form-editor__hidden-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-0);
  font-family: 'wadik', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.rep-form-editor__hidden-toggle:hover {
  border-color: var(--acc-2);
  color: var(--ink-0);
}
.rep-form-editor__hidden-toggle input { accent-color: var(--hl-orange); }

.rep-form-hidden-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--hl-orange) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl-orange) 45%, transparent);
  color: var(--hl-orange);
  font-family: 'wadik', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-row--form-hidden { opacity: 0.85; }

.rep-req-node--level {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: color-mix(in srgb, #fbbf24 10%, var(--bg-0));
  border-left: 3px solid #fbbf24;
  border-top: 1px solid var(--line-1);
  border-right: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 4px;
}
.rep-req-node--level .rep-req-node__icon { color: #fbbf24; }

.rep-fb__hint--credit {
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, #fbbf24 12%, transparent);
  border-left: 3px solid #fbbf24;
  font-size: 12px !important;
  color: var(--ink-1) !important;
}

.me-prog-row--level .me-prog-row__name { color: #fbbf24; }
.me-prog-row--level .me-prog-row__fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

/* ─────────────────────────────────────────────────────────
   REPORTS · ROSTER — faction member list with promotion progress
   ───────────────────────────────────────────────────────── */
.rep-roster-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.4fr) 60px minmax(180px, 1.2fr) 120px 14px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-left: 3px solid var(--line-2);
  cursor: pointer;
  transition: border-left-color .15s, background .15s, transform .15s;
  margin-bottom: 6px;
}
.rep-roster-row:hover {
  border-left-color: var(--acc-2);
  background: var(--bg-2);
}
.rep-roster-row--leader { border-left-color: #fbbf24; }
.rep-roster-row--leader:hover { border-left-color: #fcd34d; }
.rep-roster-row--deputy { border-left-color: #cbd5e1; }

.rep-roster-row__rank-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 36px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  font-family: 'acrom-extrabold', sans-serif;
  font-size: 16px;
  color: var(--acc-2);
}
.rep-roster-row__rank-num { line-height: 1; }
.rep-roster-row--leader .rep-roster-row__rank-pill { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.rep-roster-row--deputy .rep-roster-row__rank-pill { color: #e2e8f0; border-color: rgba(203,213,225,0.4); }

.rep-roster-row__name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.rep-roster-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'acrom-bold', sans-serif;
  font-size: 14px;
  color: var(--ink-0);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-roster-row__sub {
  font-family: 'wadik', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-roster-role {
  display: inline-block;
  padding: 1px 7px;
  font-family: 'wadik', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
}
.rep-roster-role--leader {
  background: rgba(251,191,36,0.18);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.45);
}
.rep-roster-role--deputy {
  background: rgba(203,213,225,0.14);
  color: #e2e8f0;
  border: 1px solid rgba(203,213,225,0.4);
}

.rep-roster-row__level {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: 'wadik', monospace;
  line-height: 1.1;
  color: var(--ink-1);
}
.rep-roster-row__level small {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rep-roster-row__level b {
  font-family: 'acrom-bold', sans-serif;
  font-size: 18px;
  color: var(--ink-0);
  margin-top: 2px;
}

.rep-roster-row__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rep-roster-row__next {
  font-family: 'wadik', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rep-roster-prog {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rep-roster-prog__bar {
  flex: 1;
  height: 6px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  overflow: hidden;
}
.rep-roster-prog__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc), var(--acc-2));
  transition: width .25s;
}
.rep-roster-prog__count {
  font-family: 'wadik', monospace;
  font-size: 11px;
  color: var(--ink-2);
  min-width: 36px;
  text-align: right;
}
.rep-roster-prog--complete {
  font-family: 'acrom-bold', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--hl-green);
  background: color-mix(in srgb, var(--hl-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl-green) 45%, transparent);
  padding: 3px 9px;
  text-transform: uppercase;
}
.rep-roster-prog--none {
  font-family: 'wadik', monospace;
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.rep-roster-prog--max {
  font-family: 'acrom-bold', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.4);
  padding: 3px 9px;
  text-transform: uppercase;
}

.rep-roster-row__seen {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-family: 'wadik', monospace;
  line-height: 1.2;
  color: var(--ink-2);
  font-size: 11px;
}
.rep-roster-row__seen small {
  color: var(--ink-3);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rep-roster-row__chev {
  font-family: 'acrom-bold', sans-serif;
  font-size: 22px;
  color: var(--ink-3);
  transition: transform .15s, color .15s;
}
.rep-roster-row:hover .rep-roster-row__chev {
  color: var(--acc-2);
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .rep-roster-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "rank name level"
      "rank prog  prog"
      "rank seen  chev";
    gap: 4px 10px;
  }
  .rep-roster-row__rank-pill { grid-area: rank; height: 100%; }
  .rep-roster-row__name      { grid-area: name; }
  .rep-roster-row__level     { grid-area: level; flex-direction: row; gap: 4px; }
  .rep-roster-row__progress  { grid-area: prog; }
  .rep-roster-row__seen      { grid-area: seen; flex-direction: row; gap: 4px; text-align: left; }
  .rep-roster-row__chev      { grid-area: chev; }
}

/* ============================================================
   HEADER RESPONSIVE — бургер вместо ряда вкладок на узких экранах.
   В конце файла → перекрывает старые мобильные правила .nav__tabs
   (8 подписей всегда видимы не влезают ниже ~1080px).
   ============================================================ */
@media (max-width: 1080px) {
  .site-header .nav__tabs { display: none !important; }
  .nav__socials { display: none; }
  .nav__burger { display: flex; }
  .nav { gap: 12px; height: 60px; padding: 0 16px; flex-wrap: nowrap; }
  .brand__logo { height: 26px; }
}
@media (min-width: 1081px) {
  .navm { display: none; }
}
@media (min-width: 1081px) and (max-width: 1400px) {
  .nav { gap: 16px; padding: 0 18px; }
  .nav__btn { font-size: 10px; letter-spacing: 1px; padding: 0 9px 0 2px; }
  .nav__btn-icon { width: 28px; }
  .nav__btn-icon svg { width: 16px; height: 16px; }
  .nav__tabs { gap: 2px; }
}

/* ════════════════════════════════════════════════════════════════════
   Faction transfers — /me/transfers
   ═══════════════════════════════════════════════════════════════════ */
.btn--transfer {
  background: linear-gradient(135deg,
    color-mix(in srgb, #a584ff 22%, transparent) 0%,
    color-mix(in srgb, #4f8ff0 18%, transparent) 100%);
  border: 1px solid color-mix(in srgb, #a584ff 50%, var(--line-1));
  color: #d9d6ff;
  letter-spacing: 0.04em;
}
.btn--transfer:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, #a584ff 35%, transparent) 0%,
    color-mix(in srgb, #4f8ff0 30%, transparent) 100%);
  border-color: #a584ff; color: #fff;
}

.tf-hero { margin-bottom: 22px; }
.tf-page__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 16px 0 24px;
}
.tf-mechip {
  --fcol: #5680c8;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--fcol) 60%, var(--line-1));
  border-left: 3px solid var(--fcol);
  background: color-mix(in srgb, var(--fcol) 10%, var(--bg-0));
  color: var(--ink-1);
  font-size: 13px; letter-spacing: 0.05em;
}
.tf-mechip b { color: #fff; margin-right: 6px; }
.tf-section__h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-3); font-weight: 700;
  margin: 32px 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
}

.tf-note {
  padding: 18px 22px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  margin-bottom: 18px;
}
.tf-note h3 { font-size: 18px; margin: 0 0 6px; color: var(--ink-0); }
.tf-note p { margin: 0; color: var(--ink-2); }
.tf-note--warn { border-left: 3px solid var(--hl-orange, #e8843a); }
.tf-note--cool { border-left: 3px solid var(--acc, #5680c8); }

/* ── Cards grid ─────────────────────────────────────────────────── */
.tf-cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.tf-card {
  --fcol: #5680c8;
  position: relative; overflow: hidden;
  padding: 26px 24px 24px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--fcol) 18%, var(--bg-0)) 0%,
    var(--bg-0) 70%);
  border: 1px solid color-mix(in srgb, var(--fcol) 35%, var(--line-2));
  border-left: 3px solid var(--fcol);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  min-height: 320px;
  display: flex; flex-direction: column;
}
.tf-card:hover, .tf-card:focus-visible {
  outline: 0;
  transform: translateY(-3px);
  border-color: var(--fcol);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--fcol) 80%, transparent),
              0 0 0 1px color-mix(in srgb, var(--fcol) 50%, transparent);
}
.tf-card__hex {
  position: absolute; right: -20px; top: -20px; width: 150px; height: 150px;
  background: url('/img/ui/hex.png') center/contain no-repeat;
  opacity: .08; pointer-events: none;
  filter: drop-shadow(0 0 12px var(--fcol));
}
.tf-card__bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 18px,
      color-mix(in srgb, var(--fcol) 6%, transparent) 18px,
      color-mix(in srgb, var(--fcol) 6%, transparent) 19px);
  pointer-events: none; opacity: .55;
}
.tf-card > * { position: relative; z-index: 1; }
.tf-card__head { margin-bottom: 14px; }
.tf-card__kicker {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fcol) 80%, var(--ink-3));
  margin-bottom: 4px;
}
.tf-card__name {
  font-size: 22px; font-weight: 800; line-height: 1.15;
  color: var(--ink-0); margin: 0;
  letter-spacing: 0.02em;
}
.tf-card__qualities {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--fcol) 70%, var(--ink-2));
  padding: 6px 0; margin-bottom: 12px;
  border-top: 1px solid color-mix(in srgb, var(--fcol) 25%, var(--line-2));
  border-bottom: 1px solid color-mix(in srgb, var(--fcol) 25%, var(--line-2));
}
.tf-card__desc {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  margin: 0 0 14px; flex: 1;
}
.tf-card__req {
  font-size: 12px; color: var(--ink-3);
  padding: 6px 10px; background: var(--bg-1); border: 1px dashed var(--line-2);
  margin-bottom: 12px;
}
.tf-card__req b { color: var(--ink-1); }
.tf-card__cta { text-align: right; }
.tf-card__btn {
  font-size: 13px; color: var(--fcol); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .15s ease;
}
.tf-card:hover .tf-card__btn { color: #fff; }
.tf-card--closed { cursor: not-allowed; opacity: .55; }
.tf-card--closed:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.tf-card__closed {
  font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ── Pending status flow ─────────────────────────────────────────── */
.tf-pending {
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  padding: 22px 24px;
  position: relative; overflow: hidden;
  margin-bottom: 18px;
}
.tf-pending::before {
  content: ''; position: absolute; inset: 0;
  background: url('/img/ui/hex.png') right 24px center/110px no-repeat;
  opacity: .05; pointer-events: none;
}
.tf-pending__title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--hl-orange, #e8843a); font-weight: 700; margin-bottom: 14px;
}
.tf-flow {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: stretch;
}
@media (max-width: 720px) { .tf-flow { grid-template-columns: 1fr; } }
.tf-flow__card {
  --fcol: #5680c8;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--fcol) 40%, var(--line-2));
  border-left: 3px solid var(--fcol);
  background: color-mix(in srgb, var(--fcol) 8%, var(--bg-0));
}
.tf-flow__kicker {
  font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase;
}
.tf-flow__name { font-size: 16px; font-weight: 700; color: var(--ink-0); margin: 4px 0 8px; }
.tf-dec {
  display: inline-block; font-size: 11px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 99px;
}
.tf-dec--wait { background: color-mix(in srgb, var(--hl-orange, #e8843a) 20%, transparent); color: var(--hl-orange, #e8843a); }
.tf-dec--ok   { background: color-mix(in srgb, #5ec47b 20%, transparent); color: #5ec47b; }
.tf-dec--bad  { background: color-mix(in srgb, var(--hl-red, #e85a5a) 20%, transparent); color: var(--hl-red, #e85a5a); }
.tf-flow__arrow {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 0 8px;
}
.tf-flow__arrow span {
  width: 8px; height: 8px; background: var(--acc, #5680c8);
  clip-path: polygon(0 0, 70% 50%, 0 100%);
  animation: tfArrow 1.4s ease-in-out infinite;
}
.tf-flow__arrow span:nth-child(2) { animation-delay: .2s; }
.tf-flow__arrow span:nth-child(3) { animation-delay: .4s; }
@keyframes tfArrow { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 720px) { .tf-flow__arrow { transform: rotate(90deg); padding: 8px 0; } }
.tf-pending__hint {
  margin-top: 14px; padding: 10px 14px;
  background: color-mix(in srgb, var(--acc, #5680c8) 12%, transparent);
  border-left: 2px solid var(--acc, #5680c8);
  font-size: 13px; color: var(--ink-1);
}
.tf-pending__meta { margin-top: 12px; font-size: 12px; color: var(--ink-3); }

/* ── History ──────────────────────────────────────────────────────── */
.tf-hist {
  padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--line-2); background: var(--bg-0);
  border-left: 3px solid var(--line-2);
}
.tf-hist--ok  { border-left-color: #5ec47b; }
.tf-hist--bad { border-left-color: var(--hl-red, #e85a5a); }
.tf-hist__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.tf-hist__chip {
  --fcol: #5680c8;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--fcol) 40%, var(--line-2));
  border-left: 2px solid var(--fcol);
  background: color-mix(in srgb, var(--fcol) 10%, transparent);
  color: var(--ink-1); font-size: 12px;
}
.tf-hist__arr { color: var(--ink-3); }
.tf-hist__badge {
  font-size: 10px; padding: 2px 8px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.tf-hist--ok .tf-hist__badge  { background: color-mix(in srgb, #5ec47b 25%, transparent); color: #5ec47b; }
.tf-hist--bad .tf-hist__badge { background: color-mix(in srgb, var(--hl-red, #e85a5a) 25%, transparent); color: var(--hl-red, #e85a5a); }
.tf-hist__when { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.tf-hist__reason { margin-top: 6px; font-size: 12px; color: var(--ink-2); padding-left: 4px; }
.tf-hist__reason b { color: var(--ink-1); }

/* ── Modal: form ─────────────────────────────────────────────────── */
.tf-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 20px;
}
.tf-modal.hidden { display: none; }
.tf-modal__backdrop {
  position: absolute; inset: 0; background: rgba(2,4,8,.78); backdrop-filter: blur(6px);
}
.tf-modal__box {
  position: relative; width: min(820px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--bg-1); border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.tf-modal__close {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  background: transparent; border: 0; color: var(--ink-3); font-size: 28px;
  cursor: pointer; line-height: 1; padding: 4px 8px;
}
.tf-modal__close:hover { color: var(--ink-0); }
.tf-modal__body { padding: 0 0 24px; }
.tf-modal__hero { --fcol: #5680c8; margin: 0 0 18px; border-top: 3px solid var(--fcol); }

.tf-form { padding: 0 28px; display: flex; flex-direction: column; gap: 14px; }
.tf-form__h { font-size: 15px; color: var(--ink-0); margin: 12px 0 0; letter-spacing: 0.04em; }
.tf-form__p { color: var(--ink-2); font-size: 13px; margin: 0; }
.tf-form__sep { border-top: 1px solid var(--line-2); margin: 8px 0; }
.tf-form__field { display: flex; flex-direction: column; gap: 6px; }
.tf-form__field > span {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.tf-form__field input, .tf-form__field textarea, .tf-form__field select {
  background: var(--bg-0); border: 1px solid var(--line-2);
  color: var(--ink-0); padding: 10px 12px; font: inherit;
}
.tf-form__field input:focus, .tf-form__field textarea:focus, .tf-form__field select:focus {
  outline: 0; border-color: var(--acc, #5680c8);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc, #5680c8) 25%, transparent);
}
.tf-form__check { display: flex; align-items: center; gap: 8px; color: var(--ink-1); font-size: 13px; }
.tf-form__footer {
  padding: 18px 28px 0; display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--line-2); margin-top: 16px;
}
.tf-form__note {
  padding: 0 28px; margin: 12px 0 0; font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ── Admin: transfers tab (Рапорты → Переводы) ─────────────────── */
.tr-set__list { display: flex; flex-direction: column; gap: 8px; }
.tr-set { border: 1px solid var(--line-2); background: var(--bg-1); }
.tr-set summary {
  list-style: none; cursor: pointer;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.tr-set summary::-webkit-details-marker { display: none; }
.tr-set summary::before {
  content: '▸'; color: var(--ink-3); transition: transform .15s; display: inline-block;
}
.tr-set[open] summary::before { transform: rotate(90deg); }
.tr-set__pill {
  margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--hl-red, #e85a5a) 18%, transparent);
  color: var(--hl-red, #e85a5a); text-transform: uppercase; letter-spacing: 0.08em;
}
.tr-set__pill--ok { background: color-mix(in srgb, #5ec47b 22%, transparent); color: #5ec47b; }
.tr-set__body { padding: 12px 14px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.tr-set__row { display: flex; flex-direction: column; gap: 6px; }
.tr-set__row > span { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
.tr-set__row input, .tr-set__row textarea {
  background: var(--bg-0); border: 1px solid var(--line-2); color: var(--ink-0);
  padding: 8px 10px; font: inherit;
}
.tr-set__row--inline { display: flex; flex-direction: row; gap: 12px; }
.tr-set__row--inline > label { display: flex; flex-direction: column; gap: 6px; }
.tr-set__check { display: flex; align-items: center; gap: 8px; color: var(--ink-1); font-size: 13px; }

.tr-q { border: 1px solid var(--line-2); background: var(--bg-1); margin-bottom: 8px; }
.tr-q summary {
  list-style: none; cursor: pointer;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.tr-q summary::-webkit-details-marker { display: none; }
.tr-q summary::before { content: '▸'; color: var(--ink-3); transition: transform .15s; }
.tr-q[open] summary::before { transform: rotate(90deg); }
.tr-q__badge {
  font-size: 10px; padding: 2px 8px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.tr-q__badge--ok   { background: color-mix(in srgb, #5ec47b 22%, transparent); color: #5ec47b; }
.tr-q__badge--bad  { background: color-mix(in srgb, var(--hl-red, #e85a5a) 22%, transparent); color: var(--hl-red, #e85a5a); }
.tr-q__badge--wait { background: color-mix(in srgb, var(--hl-orange, #e8843a) 22%, transparent); color: var(--hl-orange, #e8843a); }
.tr-q__body { padding: 10px 14px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.tr-q__sides { display: flex; flex-direction: column; gap: 4px; }
.tr-q__answers pre { margin: 6px 0 0; background: var(--bg-0); padding: 8px; font-size: 12px; white-space: pre-wrap; }
.tr-q__actions { display: flex; gap: 8px; }

/* ── Form builder (admin) ──────────────────────────────────────── */
.tr-fb {
  border: 1px solid var(--line-2); background: var(--bg-0); padding: 10px;
}
.tr-fb__bar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-2);
}
.tr-fb__bar-lbl {
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em;
  text-transform: uppercase; margin-right: 4px;
}
.tr-fb__bar-sep {
  display: inline-block; width: 1px; height: 22px;
  background: var(--line-2); margin: 0 4px;
}
.tr-fb__add, .tr-fb__tmpl {
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--ink-1);
  padding: 5px 10px; font: 11px/1.4 inherit; cursor: pointer;
  letter-spacing: 0.04em;
}
.tr-fb__add:hover, .tr-fb__tmpl:hover {
  border-color: var(--acc, #5680c8); color: #fff;
  background: color-mix(in srgb, var(--acc, #5680c8) 15%, var(--bg-1));
}
.tr-fb__tmpl { margin-left: auto; color: var(--ink-3); }
.tr-fb__blocks { display: flex; flex-direction: column; gap: 8px; }
.tr-fb__empty {
  padding: 18px; text-align: center; font-size: 12px; color: var(--ink-3);
  border: 1px dashed var(--line-2); background: var(--bg-1);
}
.tr-fb__block {
  border: 1px solid var(--line-2); background: var(--bg-1);
  border-left: 3px solid var(--ink-3);
}
.tr-fb__block--header    { border-left-color: var(--acc, #5680c8); }
.tr-fb__block--text      { border-left-color: var(--ink-3); }
.tr-fb__block--separator { border-left-color: var(--line-1, var(--line-2)); border-left-style: dashed; }
.tr-fb__block--input     { border-left-color: #5ec47b; }
.tr-fb__block--textarea  { border-left-color: #5ec47b; }
.tr-fb__block--select    { border-left-color: #a584ff; }
.tr-fb__block--checkbox  { border-left-color: var(--hl-orange, #e8843a); }
.tr-fb__bh {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-0) 60%, transparent);
}
.tr-fb__type {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-1); font-weight: 700;
}
.tr-fb__bh-acts { margin-left: auto; display: flex; gap: 4px; }
.tr-fb__bb {
  background: var(--bg-0); border: 1px solid var(--line-2); color: var(--ink-2);
  width: 26px; height: 22px; font: 12px/1 inherit; cursor: pointer;
}
.tr-fb__bb:disabled { opacity: .35; cursor: not-allowed; }
.tr-fb__bb:hover:not(:disabled) { border-color: var(--acc, #5680c8); color: #fff; }
.tr-fb__bb--del:hover:not(:disabled) {
  border-color: var(--hl-red, #e85a5a); color: var(--hl-red, #e85a5a);
}
.tr-fb__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tr-fb__f { display: flex; flex-direction: column; gap: 4px; }
.tr-fb__f > span {
  font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3);
  text-transform: uppercase;
}
.tr-fb__f input, .tr-fb__f textarea, .tr-fb__opt input {
  background: var(--bg-0); border: 1px solid var(--line-2); color: var(--ink-0);
  padding: 6px 8px; font: inherit;
}
.tr-fb__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 720px) { .tr-fb__row2 { grid-template-columns: 1fr; } }
.tr-fb__chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-1); }
.tr-fb__opts {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border: 1px dashed var(--line-2); background: var(--bg-0);
}
.tr-fb__opt { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; }
.tr-fb__addopt {
  align-self: flex-start;
  background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2);
  padding: 4px 10px; font: 11px/1.3 inherit; cursor: pointer;
}
.tr-fb__addopt:hover { border-color: var(--acc, #5680c8); color: #fff; }

/* ── Admin queue: clickable player + human answer rows ─────────── */
.tr-q__player {
  background: transparent; border: 1px dashed var(--line-2);
  color: var(--ink-1); font-weight: 700; padding: 3px 10px;
  cursor: pointer; font: inherit; font-weight: 700;
}
.tr-q__player:hover { color: var(--acc, #5680c8); border-color: var(--acc, #5680c8); border-style: solid; }
.tr-q__answers {
  margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--line-2); background: var(--bg-0);
}
.tr-q__answers-h {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px; font-weight: 700;
}
.tr-q__answers--empty { color: var(--ink-3); font-style: italic; font-size: 12px; padding: 8px 12px; }
.tr-ans { padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line-2) 60%, transparent); }
.tr-ans:last-child { border-bottom: 0; }
.tr-ans__q { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 2px; }
.tr-ans__a { color: var(--ink-1); font-size: 13px; word-wrap: break-word; }
.tr-ans--long .tr-ans__a { white-space: pre-wrap; line-height: 1.5; padding: 4px 0; }

/* ── Player card: per-faction cooldown look ───────────────────── */
.tf-card--cooldown {
  cursor: not-allowed; opacity: .55;
}
.tf-card--cooldown:hover { transform: none; box-shadow: none; border-color: var(--line-2); }

/* ════════════════════════════════════════════════════════════════
   ДУРАК — карточная игра
   ════════════════════════════════════════════════════════════════ */
.dk-body { overflow-x: hidden; }
.dk-main { padding: 20px 14px 70px; min-height: 60vh; }
.dk-screen { animation: dkFade .3s ease; }
@keyframes dkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Загрузка ─────────────────────────────────────────────────── */
.dk-boot { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; min-height: 56vh; }
.dk-boot__cards, .dk-login__cards, .dk-over__cards { position: relative; width: 120px; height: 92px; }
.dk-boot__cards i, .dk-login__cards i, .dk-over__cards i {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 76px; margin: -38px 0 0 -26px;
  border-radius: 5px; border: 1px solid var(--line-2);
  background: linear-gradient(165deg, #1a2747, #0a1024);
  box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 8px 18px -6px rgba(0,0,0,.7);
}
.dk-boot__cards i:nth-child(1) { animation: dkFloatA 2.4s ease-in-out infinite; }
.dk-boot__cards i:nth-child(2) { animation: dkFloatB 2.4s ease-in-out infinite; }
.dk-boot__cards i:nth-child(3) { animation: dkFloatC 2.4s ease-in-out infinite; }
@keyframes dkFloatA { 0%,100% { transform: rotate(-16deg) translateY(0); } 50% { transform: rotate(-20deg) translateY(-10px); } }
@keyframes dkFloatB { 0%,100% { transform: rotate(2deg) translateY(-4px); } 50% { transform: rotate(-2deg) translateY(-16px); } }
@keyframes dkFloatC { 0%,100% { transform: rotate(18deg) translateY(0); } 50% { transform: rotate(22deg) translateY(-10px); } }
.dk-boot__txt { font-family: 'Acrom'; letter-spacing: 2px; color: var(--ink-2); font-size: 13px; text-transform: uppercase; }

/* ── Кнопки ───────────────────────────────────────────────────── */
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Acrom'; font-weight: 700; font-size: 14px; letter-spacing: .5px;
  padding: 13px 24px; border-radius: 7px; cursor: pointer;
  color: var(--ink-0); border: 1px solid var(--acc);
  background: linear-gradient(180deg, var(--acc), #3a5da0);
  box-shadow: 0 8px 22px -10px var(--acc-glow); transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); }
.dk-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px var(--acc-glow); filter: brightness(1.1); }
.dk-btn:active { transform: translateY(0); }
.dk-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.dk-btn--ghost { background: rgba(20,34,74,.5); border-color: var(--line-2); box-shadow: none; color: var(--ink-1); }
.dk-btn--ghost:hover { background: rgba(28,45,95,.7); }
.dk-btn--sm { padding: 8px 16px; font-size: 12px; }
.dk-btn--big { padding: 16px 30px; font-size: 16px; width: 100%; }
.dk-btn--danger { background: linear-gradient(180deg, var(--hl-red), #b23f3f); border-color: var(--hl-red); box-shadow: none; }
.dk-btn--steam { background: linear-gradient(180deg, #2a3d75, #1a2747); border-color: var(--line-2); }
.dk-link { background: none; border: none; color: var(--acc-2); cursor: pointer; font-family: 'Acrom'; font-size: 12px; }
.dk-link:hover { color: var(--ink-0); }

/* ── Вход ─────────────────────────────────────────────────────── */
.dk-login { max-width: 460px; margin: 6vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dk-login__cards { margin-bottom: 8px; }
.dk-login__title { font-family: 'Acrom'; font-size: 54px; letter-spacing: 8px; color: var(--ink-0);
  text-shadow: 0 0 30px var(--acc-glow); margin: 0; }
.dk-login__sub { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; }
.dk-login__note { color: var(--ink-3); font-size: 13px; margin: 6px 0; }
.dk-login .dk-btn { min-width: 240px; }

/* ── Хаб ──────────────────────────────────────────────────────── */
.dk-hub { max-width: 780px; margin: 0 auto; }
.dk-hub__head { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line-1); border-radius: 10px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }
.dk-prof { display: flex; align-items: center; gap: 12px; }
.dk-prof__av, .dk-seat-card__av, .dk-lead-row__av { width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line-2); flex: none; background: var(--bg-3);
  display: flex; align-items: center; justify-content: center; }
.dk-prof__av img, .dk-seat-card__av img, .dk-lead-row__av img, .dk-seat__av img { width: 100%; height: 100%; object-fit: cover; }
.dk-av-ph { font-family: 'Acrom'; font-weight: 700; color: var(--ink-2); font-size: 18px; }
.dk-av-bot { width: 22px; height: 22px; border-radius: 4px; background: var(--ink-3);
  clip-path: polygon(20% 0,80% 0,100% 30%,100% 100%,0 100%,0 30%); }
.dk-prof__name { font-family: 'Acrom'; font-weight: 700; color: var(--ink-0); font-size: 16px; }
.dk-prof__league { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.dk-hub__stats { display: flex; gap: 8px; }
.dk-pill { text-align: center; padding: 6px 12px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line-1); }
.dk-pill b { display: block; font-family: 'Acrom'; font-size: 17px; color: var(--ink-0); }
.dk-pill span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }

.dk-hub__title { display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: 'Acrom'; font-size: 32px; letter-spacing: 7px; color: var(--ink-0);
  margin: 26px 0 18px; text-shadow: 0 0 22px var(--acc-glow); }
.dk-hub__title-deco { width: 50px; height: 2px; background: linear-gradient(90deg, transparent, var(--acc)); }
.dk-hub__title-deco:last-child { background: linear-gradient(90deg, var(--acc), transparent); }

.dk-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.dk-action { position: relative; padding: 22px 16px; border-radius: 10px; cursor: pointer; text-align: center;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); overflow: hidden; }
.dk-action:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: 0 16px 34px -16px var(--acc-glow); }
.dk-action__icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 9px;
  background: linear-gradient(160deg, var(--acc), #2c4a86); box-shadow: 0 0 18px var(--acc-glow);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.dk-action--create .dk-action__icon { background: linear-gradient(160deg, var(--hl-orange), #b6612e); box-shadow: 0 0 18px rgba(243,149,86,.4); }
.dk-action--solo .dk-action__icon { background: linear-gradient(160deg, var(--ink-3), #2a3556); box-shadow: none; }
.dk-action__title { font-family: 'Acrom'; font-weight: 700; color: var(--ink-0); font-size: 15px; }
.dk-action__sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

.dk-join-code { display: flex; gap: 8px; margin: 14px 0 22px; }
.dk-join-code input { flex: 1; padding: 12px 14px; border-radius: 7px; background: var(--bg-1);
  border: 1px solid var(--line-2); color: var(--ink-0); font-family: 'Acrom'; letter-spacing: 4px;
  font-size: 15px; text-transform: uppercase; }
.dk-join-code input:focus { outline: none; border-color: var(--acc); }

.dk-lobbies__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dk-lobbies__head h3 { font-family: 'Acrom'; color: var(--ink-1); font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: 1px; }
.dk-lobbies__list { display: flex; flex-direction: column; gap: 8px; }
.dk-lobby-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-1);
  background: var(--bg-2); transition: border-color var(--t-fast); }
.dk-lobby-row:hover { border-color: var(--line-2); }
.dk-lobby-row__title { font-family: 'Acrom'; font-weight: 700; color: var(--ink-0); font-size: 14px; }
.dk-lobby-row__meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.dk-lobby-row__meta b { color: var(--acc-2); }
.dk-empty { text-align: center; padding: 26px; color: var(--ink-3); font-size: 13px; }
.dk-empty--game { padding: 60px 20px; }
.dk-hub__foot { display: flex; gap: 10px; margin-top: 22px; }
.dk-hub__foot .dk-btn { flex: 1; }

/* ── Лобби ────────────────────────────────────────────────────── */
.dk-lobby { max-width: 620px; margin: 0 auto; }
.dk-back { background: none; border: none; color: var(--ink-2); cursor: pointer; font-family: 'Acrom';
  font-size: 13px; padding: 6px 0; margin-bottom: 8px; }
.dk-back:hover { color: var(--ink-0); }
.dk-lobby__title { font-family: 'Acrom'; color: var(--ink-0); font-size: 24px; margin: 0 0 4px; }
.dk-lobby__meta { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; }
.dk-code-box { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px;
  background: var(--bg-2); border: 1px dashed var(--line-2); margin-bottom: 18px; }
.dk-code-box span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; }
.dk-code-box b { font-family: 'Acrom'; font-size: 22px; letter-spacing: 6px; color: var(--acc-2); }
.dk-code-box .dk-link { margin-left: auto; }
.dk-seats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 18px; }
.dk-seat-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--bg-2); position: relative; }
.dk-seat-card--empty { justify-content: center; border-style: dashed; color: var(--ink-3); font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px; }
.dk-seat-card--bot { border-color: var(--line-1); }
.dk-seat-card__name { font-family: 'Acrom'; font-weight: 700; color: var(--ink-0); font-size: 13px; }
.dk-host-badge, .dk-bot-badge { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; vertical-align: middle; }
.dk-host-badge { background: var(--acc); color: #fff; }
.dk-bot-badge { background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line-2); }
.dk-seat-card__kick { position: absolute; top: 6px; right: 6px; background: none; border: none;
  color: var(--ink-3); cursor: pointer; font-size: 10px; }
.dk-seat-card__kick:hover { color: var(--hl-red); }
.dk-lobby__host { display: flex; flex-direction: column; gap: 12px; }
.dk-bot-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-bot-add span { font-size: 12px; color: var(--ink-3); }
.dk-lobby__wait { text-align: center; padding: 16px; color: var(--ink-2); font-size: 13px;
  border: 1px dashed var(--line-2); border-radius: 8px; }

/* ── Игра: каркас ─────────────────────────────────────────────── */
.dk-screen--game { animation: none; }
.dk-game { --dk-card-w: 112px; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column;
  min-height: calc(100dvh - 130px); position: relative; }
.dk-game__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 10px; }
.dk-game__exit { background: rgba(20,34,74,.6); border: 1px solid var(--line-2); color: var(--ink-1);
  font-family: 'Acrom'; font-size: 12px; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.dk-game__exit:hover { border-color: var(--hl-red); color: var(--hl-red); }
.dk-game__info { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; justify-content: center; }
.dk-info-dot { color: var(--ink-3); }
.dk-trump-mini { color: var(--ink-1); font-weight: 700; }
.dk-suit { font-size: 15px; vertical-align: -1px; }
.dk-suit--red { color: #e8736e; }
.dk-game__emote { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--bg-2); cursor: pointer; position: relative; }
.dk-game__emote::before { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 14px;
  border: 2px solid var(--acc-2); border-radius: 8px 8px 8px 2px; }
.dk-game__emote:hover { border-color: var(--acc); }

/* ── Арена ────────────────────────────────────────────────────── */
.dk-arena { position: relative; flex: 1; min-height: 380px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: inset 0 0 60px rgba(0,0,0,.7); }
.dk-arena__felt { position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #1a3358, #0c1730 72%, #060c1c);
}
.dk-arena__felt::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(60deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px);
}
.dk-seats { position: absolute; inset: 0; pointer-events: none; }
.dk-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: auto; transition: filter var(--t-mid); }
.dk-seat--top { top: 12px; left: 50%; transform: translateX(-50%); }
.dk-seat--tl { top: 12px; left: 12%; }
.dk-seat--tr { top: 12px; right: 12%; }
.dk-seat--left { top: 44%; left: 14px; transform: translateY(-50%); }
.dk-seat--right { top: 44%; right: 14px; transform: translateY(-50%); }
.dk-seat.is-finished { filter: grayscale(.7) opacity(.5); }
.dk-seat.is-disconnected { filter: saturate(.4) opacity(.6); }
.dk-seat__av { position: relative; width: 54px; height: 54px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--bg-3);
  display: flex; align-items: center; justify-content: center; }
.dk-seat__av img { border-radius: 9px; }
.dk-seat.is-active .dk-seat__av { border-color: var(--acc-2); box-shadow: 0 0 16px var(--acc-glow); }
.dk-seat__ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
.dk-seat__ring circle { fill: none; stroke: var(--acc-2); stroke-width: 5;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .25s linear;
  filter: drop-shadow(0 0 4px var(--acc-glow)); }
.dk-seat__name { font-family: 'Acrom'; font-weight: 700; font-size: 12px; color: var(--ink-1);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-mini-bot { display: inline-block; width: 9px; height: 9px; margin-left: 4px; background: var(--ink-3);
  clip-path: polygon(20% 0,80% 0,100% 30%,100% 100%,0 100%,0 30%); vertical-align: middle; }
.dk-seat__role { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-3); min-height: 12px; }
.dk-seat.is-active .dk-seat__role { color: var(--acc-2); }
.dk-seat__fan { position: relative; display: flex; height: 42px; align-items: flex-start; padding-top: 2px; }
.dk-seat__count { position: absolute; right: -16px; top: 6px; font-family: 'Acrom'; font-size: 12px;
  color: var(--ink-2); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 1px 6px; }

/* ── Центр: колода (слева) / сброс (справа) ──────────────────── */
.dk-center { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.dk-discard-zone { position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: calc(var(--dk-card-w) * .8); height: calc(var(--dk-card-w) * .8 * 1.52);
  display: flex; align-items: center; justify-content: center; }
.dk-deck { position: relative; width: calc(var(--dk-card-w) * .8); height: calc(var(--dk-card-w) * .8 * 1.52); }
.dk-deck--empty { display: flex; align-items: center; justify-content: center;
  font-size: 30px; opacity: .35; border: 1px dashed var(--line-1); border-radius: 6px; }
/* .dk-card вынесён выше базового правила — поэтому усиливаем специфичность */
.dk-card.dk-card--trump-under { position: absolute; left: 58%; top: 8px; transform: rotate(90deg);
  width: calc(var(--dk-card-w) * .8); }
.dk-deck__stack { position: absolute; inset: 0; }
.dk-card.dk-card--deck { position: absolute; width: calc(var(--dk-card-w) * .8);
  left: calc(var(--i) * 1.5px); top: calc(var(--i) * -1.5px); }
.dk-deck__count { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-family: 'Acrom'; font-size: 12px; color: var(--ink-0); background: var(--acc);
  border-radius: 9px; padding: 1px 8px; z-index: 5; }
.dk-discard__pile { position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(160deg, rgba(17,24,48,.6), rgba(10,15,32,.6)); border: 1px dashed var(--line-1);
  transform: rotate(-7deg); }
.dk-discard__count { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-family: 'Acrom'; font-size: 11px; color: var(--ink-3); }

/* ── Карты на столе ───────────────────────────────────────────── */
.dk-table-cards { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%);
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center;
  max-width: 68%; }
.dk-tslot { position: relative; width: calc(var(--dk-card-w) * .82); height: calc(var(--dk-card-w) * .82 * 1.52 + 22px); }
.dk-tslot .dk-card { position: absolute; width: calc(var(--dk-card-w) * .82); }
.dk-card--defend { left: 14px; top: 22px; }
.dk-card--defend .dk-card__inner { transform: rotate(7deg); }

/* ── Карта ────────────────────────────────────────────────────── */
.dk-card { width: var(--dk-card-w); aspect-ratio: 152/231; position: relative; flex: none; }
.dk-card__inner { width: 100%; height: 100%; position: relative; transform-origin: 50% 90%;
  transform: translateY(var(--fan-y,0)) rotate(var(--fan-rot,0deg));
  transition: transform .16s ease; }
.dk-card__face { width: 100%; height: 100%; border-radius: 5px; background-size: cover; background-position: center;
  box-shadow: 0 5px 14px -4px rgba(0,0,0,.8); border: 1px solid rgba(0,0,0,.25); }
.dk-hand .dk-card { margin: 0 calc(var(--dk-card-w) * -0.28); }
.dk-hand .dk-card.is-playable { cursor: pointer; }
.dk-hand .dk-card.is-playable:hover { z-index: 90 !important; }
.dk-hand .dk-card.is-playable:hover .dk-card__inner,
.dk-hand .dk-card.is-selected .dk-card__inner {
  transform: translateY(calc(var(--fan-y,0) - 34px)) rotate(var(--fan-rot,0deg)); }
.dk-card.is-playable .dk-card__face { box-shadow: 0 6px 16px -4px rgba(0,0,0,.8), 0 0 0 2px var(--hl-green); }
.dk-card.is-defend .dk-card__face { box-shadow: 0 6px 16px -4px rgba(0,0,0,.8), 0 0 0 2px var(--acc-2); }
.dk-card.is-transfer .dk-card__face { box-shadow: 0 6px 16px -4px rgba(0,0,0,.8), 0 0 0 2px var(--hl-orange); }
.dk-card.is-selected { z-index: 95 !important; }
.dk-card.is-selected .dk-card__face { box-shadow: 0 10px 22px -4px rgba(0,0,0,.85), 0 0 0 3px var(--acc-2), 0 0 22px var(--acc-glow); }
.dk-card.is-target .dk-card__face { animation: dkTarget 1.1s ease-in-out infinite; }
@keyframes dkTarget { 0%,100% { box-shadow: 0 5px 14px -4px rgba(0,0,0,.8), 0 0 0 2px var(--hl-orange); }
  50% { box-shadow: 0 5px 14px -4px rgba(0,0,0,.8), 0 0 0 3px var(--hl-orange), 0 0 16px rgba(243,149,86,.6); } }

/* рубашка карты — гексагон + брекеты SUPREME */
.dk-card--back .dk-card__inner { transition: none; }
.dk-card__back { width: 100%; height: 100%; position: relative; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(var(--acc),var(--acc)) 4px 4px/13px 2px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 4px 4px/2px 13px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right 4px top 4px/13px 2px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right 4px top 4px/2px 13px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 4px bottom 4px/13px 2px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 4px bottom 4px/2px 13px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right 4px bottom 4px/13px 2px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right 4px bottom 4px/2px 13px no-repeat,
    repeating-linear-gradient(45deg, rgba(86,128,200,.07) 0 5px, transparent 5px 11px),
    linear-gradient(165deg, #1c2c50, #0a1024 72%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.dk-card__back::before { content: ''; position: absolute; left: 50%; top: 50%;
  width: 56%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: conic-gradient(from 90deg, #2c4a86, var(--acc-2), #2c4a86, var(--acc), #2c4a86);
  clip-path: polygon(50% 1%,93% 26%,93% 74%,50% 99%,7% 74%,7% 26%);
  box-shadow: 0 0 14px var(--acc-glow); }
.dk-card__back::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: 40%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background-image: url(/img/ui/sup_icon.png), linear-gradient(165deg,#0c1326,#070b18);
  background-size: 62%, cover; background-position: center, center; background-repeat: no-repeat;
  clip-path: polygon(50% 1%,93% 26%,93% 74%,50% 99%,7% 74%,7% 26%); }
.dk-card--mini { width: 30px; margin: 0 -14px; }
.dk-card--mini:first-child { margin-left: 0; }

/* ── Моя зона ─────────────────────────────────────────────────── */
.dk-myzone { padding: 12px 0 4px; }
.dk-actions-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 50px; }
.dk-turn-status { font-family: 'Acrom'; font-size: 13px; color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dk-turn-status.is-mine { color: var(--acc-2); font-weight: 700; }
.dk-turn-status__txt { text-transform: uppercase; letter-spacing: 1px; }
.dk-mytimer { width: 180px; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.dk-mytimer__bar { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--hl-red), var(--acc-2)); transition: width .25s linear; }
.dk-act-btns { display: flex; gap: 10px; }
.dk-act { font-family: 'Acrom'; font-weight: 700; font-size: 13px; padding: 10px 22px; border-radius: 7px;
  cursor: pointer; color: var(--ink-0); border: 1px solid; transition: transform var(--t-fast), filter var(--t-fast); }
.dk-act:hover { transform: translateY(-2px); filter: brightness(1.12); }
.dk-act--take { background: linear-gradient(180deg, var(--hl-red), #b23f3f); border-color: var(--hl-red); }
.dk-act--pass { background: linear-gradient(180deg, var(--hl-green), #3f9d5c); border-color: var(--hl-green); }
.dk-act--transfer { background: linear-gradient(180deg, var(--hl-orange), #b6612e); border-color: var(--hl-orange); }
/* блокировка на время отправки хода — клик строго один */
.dk-actions-bar.is-loading, .dk-hand.is-loading { pointer-events: none; }
.dk-hand.is-loading { opacity: .55; filter: saturate(.6); }
.dk-actions-bar.is-loading .dk-act-btns { opacity: .3; }
.dk-actions-bar.is-loading { position: relative; }
.dk-actions-bar.is-loading::after { content: ''; position: absolute; left: 50%; bottom: 6px;
  width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--acc-2);
  animation: dkBtnSpin .6s linear infinite; }
@keyframes dkBtnSpin { to { transform: rotate(360deg); } }
.dk-hand { display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--dk-card-w) * 1.52 + 36px);
  padding-top: 30px; }

/* ── Эмоции ───────────────────────────────────────────────────── */
.dk-emotes-layer { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.dk-emote-bubble { position: absolute; transform: translate(-50%,-100%);
  background: var(--ink-0); color: var(--bg-0); font-family: 'Acrom'; font-weight: 700; font-size: 12px;
  padding: 7px 12px; border-radius: 9px; white-space: nowrap; box-shadow: 0 6px 16px -4px rgba(0,0,0,.7);
  animation: dkBubIn .25s ease; }
.dk-emote-bubble--me { transform: translate(-50%,0); }
.dk-emote-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: var(--ink-0); }
.dk-emote-bubble--me::after { bottom: auto; top: -5px; }
.dk-emote-bubble.is-out { opacity: 0; transition: opacity .4s; }
@keyframes dkBubIn { from { opacity: 0; transform: translate(-50%,-100%) scale(.7); } }
.dk-emote-pop { position: absolute; right: 8px; top: 52px; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.8); }
.dk-emote-opt { font-family: 'Acrom'; font-size: 11px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line-1); color: var(--ink-1); white-space: nowrap; }
.dk-emote-opt:hover { border-color: var(--acc); color: var(--ink-0); }

/* ── Конец игры ───────────────────────────────────────────────── */
.dk-over { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,20,.86); backdrop-filter: blur(4px); animation: dkFade .3s ease; }
.dk-over__box { text-align: center; max-width: 420px; padding: 30px 26px; border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dk-over__cards { margin-bottom: 4px; }
.dk-over--win .dk-over__cards i, .dk-over--pogon .dk-over__cards i { border-color: var(--acc); box-shadow: 0 0 18px var(--acc-glow); }
.dk-over--lose .dk-over__cards i { border-color: var(--hl-red); }
.dk-over__title { font-family: 'Acrom'; font-size: 34px; letter-spacing: 3px; margin: 0; color: var(--ink-0); }
.dk-over--win .dk-over__title { color: var(--hl-green); text-shadow: 0 0 24px rgba(109,213,140,.5); }
.dk-over--pogon .dk-over__title { color: var(--hl-orange); text-shadow: 0 0 24px rgba(243,149,86,.5); }
.dk-over--lose .dk-over__title { color: var(--hl-red); text-shadow: 0 0 24px rgba(232,90,90,.4); }
.dk-over__sub { color: var(--ink-1); font-size: 15px; }
.dk-elo-d { font-weight: 700; }
.dk-elo-d.up { color: var(--hl-green); }
.dk-elo-d.down { color: var(--hl-red); }
.dk-over__ach { width: 100%; }
.dk-over__ach-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); margin: 8px 0 6px; }
.dk-ach-toast { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 7px; margin-bottom: 5px;
  background: var(--bg-3); border: 1px solid var(--acc); }
.dk-ach-toast b { font-family: 'Acrom'; color: var(--ink-0); font-size: 13px; }
.dk-ach-toast span { font-size: 11px; color: var(--ink-2); }
.dk-over__btns { display: flex; gap: 10px; margin-top: 6px; }

/* ── Модалка ──────────────────────────────────────────────────── */
.dk-modal-wrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; }
/* атрибут hidden должен побеждать display из правил выше */
.dk-modal-wrap[hidden], .dk-emote-pop[hidden], .dk-over[hidden], .dk-screen[hidden] { display: none !important; }
.dk-modal-backdrop { position: absolute; inset: 0; background: rgba(6,9,20,.8); backdrop-filter: blur(3px); }
.dk-modal { position: relative; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  padding: 24px; border-radius: 12px; background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: dkModalIn .25s ease; }
.dk-modal--wide { max-width: 560px; }
@keyframes dkModalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.dk-modal__x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--ink-3);
  font-size: 24px; cursor: pointer; line-height: 1; }
.dk-modal__x:hover { color: var(--ink-0); }
.dk-modal__title { font-family: 'Acrom'; color: var(--ink-0); font-size: 19px; margin: 0 0 16px; }
.dk-modal__note { font-size: 12px; color: var(--ink-3); margin: 12px 0; line-height: 1.5; }
.dk-modal__foot { display: flex; gap: 10px; margin-top: 18px; }
.dk-modal__foot .dk-btn { flex: 1; }
.dk-form { display: flex; flex-direction: column; gap: 14px; }
.dk-field { display: flex; flex-direction: column; gap: 6px; }
.dk-field > span { font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; }
.dk-field input { padding: 11px 13px; border-radius: 7px; background: var(--bg-1); border: 1px solid var(--line-2);
  color: var(--ink-0); font-family: 'Acrom'; font-size: 13px; }
.dk-field input:focus { outline: none; border-color: var(--acc); }
.dk-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-opt { flex: 1; min-width: 56px; padding: 9px 8px; border-radius: 7px; cursor: pointer;
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--ink-2);
  font-family: 'Acrom'; font-size: 12px; font-weight: 700; transition: all var(--t-fast); }
.dk-opt:hover { color: var(--ink-0); }
.dk-opt.is-on { background: linear-gradient(180deg, var(--acc), #3a5da0); border-color: var(--acc); color: #fff; }

/* ── Тосты ────────────────────────────────────────────────────── */
.dk-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1100;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.dk-toast { font-family: 'Acrom'; font-size: 13px; padding: 11px 18px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink-1);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.8); animation: dkToastIn .25s ease; }
.dk-toast--err { border-color: var(--hl-red); color: #f3b6b6; }
.dk-toast.is-out { opacity: 0; transform: translateY(8px); transition: all .4s; }
@keyframes dkToastIn { from { opacity: 0; transform: translateY(12px); } }

/* ── Таблица лидеров / статистика ─────────────────────────────── */
.dk-lead { display: flex; flex-direction: column; gap: 5px; }
.dk-lead-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  background: var(--bg-2); border: 1px solid var(--line-1); }
.dk-lead-row.is-me { border-color: var(--acc); background: rgba(86,128,200,.1); }
.dk-lead-row__rank { font-family: 'Acrom'; font-weight: 700; color: var(--ink-3); width: 24px; text-align: center; }
.dk-lead-row__av { width: 34px; height: 34px; }
.dk-lead-row__name { flex: 1; font-family: 'Acrom'; font-weight: 700; color: var(--ink-0); font-size: 13px;
  display: flex; flex-direction: column; gap: 2px; }
.dk-league-tag { font-size: 9px; font-weight: 500; font-style: normal; color: var(--ink-3); }
.dk-lead-row__wr { font-size: 12px; color: var(--ink-2); }
.dk-lead-row__elo { font-family: 'Acrom'; font-weight: 700; color: var(--acc-2); width: 50px; text-align: right; }
.dk-league--legenda { color: var(--hl-orange); } .dk-league--elita { color: var(--acc-2); }
.dk-league--veteran { color: var(--hl-green); } .dk-league--boec { color: var(--ink-1); }
.dk-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }
.dk-bigstat { text-align: center; padding: 12px 6px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line-1); }
.dk-bigstat b { display: block; font-family: 'Acrom'; font-size: 18px; color: var(--ink-0); }
.dk-bigstat span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; }
.dk-ach-h { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-2); margin: 4px 0 10px; }
.dk-ach-grid { display: flex; flex-direction: column; gap: 7px; }
.dk-ach { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line-1); opacity: .5; }
.dk-ach.is-on { opacity: 1; border-color: var(--acc); }
.dk-ach__icon { width: 34px; height: 34px; flex: none; border-radius: 7px; background: var(--bg-3);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.dk-ach.is-on .dk-ach__icon { background: linear-gradient(160deg, var(--acc-2), var(--acc)); box-shadow: 0 0 12px var(--acc-glow); }
.dk-ach__body b { display: block; font-family: 'Acrom'; color: var(--ink-0); font-size: 13px; }
.dk-ach__body span { font-size: 11px; color: var(--ink-3); }

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .dk-game { --dk-card-w: 76px; min-height: calc(100dvh - 96px); }
  .dk-actions { grid-template-columns: 1fr; }
  .dk-hub__title { font-size: 24px; letter-spacing: 4px; }
  .dk-login__title { font-size: 40px; }
  .dk-seats-grid { grid-template-columns: 1fr; }
  .dk-seat--tl { left: 4px; } .dk-seat--tr { right: 4px; }
  .dk-seat--left { left: 2px; } .dk-seat--right { right: 2px; }
  .dk-seat__av { width: 42px; height: 42px; }
  .dk-seat__name { font-size: 10px; max-width: 76px; }
  .dk-center { left: 6px; }
  .dk-discard-zone { right: 6px; }
  .dk-table-cards { max-width: 58%; }
  .dk-hub__head { justify-content: center; }
  .dk-arena { min-height: 340px; border-radius: 12px; }
  .dk-statgrid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 420px) {
  .dk-game { --dk-card-w: 64px; }
  .dk-hand .dk-card { margin: 0 calc(var(--dk-card-w) * -0.34); }
}

/* ── Промо-кнопка дурака на главной ───────────────────────────── */
.dk-promo { display: block; text-decoration: none; position: relative;
  padding-top: 94px; text-align: center; overflow: visible;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.dk-promo:hover { transform: translateY(-3px); border-color: var(--acc);
  box-shadow: 0 20px 44px -20px var(--acc-glow); }
.dk-promo__cards { position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 134px; }
.dk-promo__cards::before { content: ''; position: absolute; left: 50%; top: 54%;
  width: 156px; height: 74px; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse, var(--acc-glow), transparent 70%); opacity: .55; }
.dk-promo__card { position: absolute; left: 50%; top: 6px; width: 86px; height: 130px; margin-left: -43px; }
.dk-promo__card--l { z-index: 1; animation: dkBob 3.4s ease-in-out infinite; }
.dk-promo__card--c { z-index: 3; animation: dkBob 3.4s ease-in-out -1.15s infinite; }
.dk-promo__card--r { z-index: 2; animation: dkBob 3.4s ease-in-out -2.25s infinite; }
@keyframes dkBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.dk-promo__card i { display: block; width: 100%; height: 100%; border-radius: 7px;
  background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 16px 28px -12px rgba(0,0,0,.85);
  transition: transform .45s cubic-bezier(.2,.85,.3,1); }
.dk-promo__card--l i { background-image: url(/img/durak/cards/hearts_K.png); transform: rotate(-17deg) translateX(-32px); }
.dk-promo__card--c i { background-image: url(/img/durak/cards/spades_A.png); transform: translateY(-10px); }
.dk-promo__card--r i { background-image: url(/img/durak/cards/diamonds_Q.png); transform: rotate(17deg) translateX(32px); }
.dk-promo:hover .dk-promo__card--l i { transform: rotate(-25deg) translate(-52px,-4px); }
.dk-promo:hover .dk-promo__card--c i { transform: translateY(-22px) scale(1.06); }
.dk-promo:hover .dk-promo__card--r i { transform: rotate(25deg) translate(52px,-4px); }
.dk-promo__cta { display: inline-block; margin-top: 2px; font-family: 'Acrom'; font-weight: 700;
  font-size: 13px; letter-spacing: .5px; color: var(--ink-0); padding: 10px 22px; border-radius: 7px;
  background: linear-gradient(180deg, var(--acc), #3a5da0); border: 1px solid var(--acc);
  box-shadow: 0 8px 20px -10px var(--acc-glow); transition: filter var(--t-fast); }
.dk-promo:hover .dk-promo__cta { filter: brightness(1.12); }

/* ── Блок дурака в личном деле /me ─────────────────────────────── */
.me-durak { max-width: 1100px; margin: 32px auto; }
.me-durak__play { font-family: 'Acrom'; color: var(--acc-2); text-decoration: none; font-size: 13px; font-weight: 700; }
.me-durak__play:hover { color: var(--ink-0); }
.me-durak__top { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.me-durak__badge { display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 14px 24px; border-radius: 10px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); min-width: 132px; }
.me-durak__elo { font-family: 'Acrom'; font-size: 36px; font-weight: 700; color: var(--ink-0); line-height: 1; }
.me-durak__league { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.me-durak__badge.dk-league--elita .me-durak__elo { color: var(--acc-2); }
.me-durak__badge.dk-league--legenda .me-durak__elo { color: var(--hl-orange); }
.me-durak__badge.dk-league--veteran .me-durak__elo { color: var(--hl-green); }
.me-durak__quick { flex: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; min-width: 260px; }
.me-durak__q { text-align: center; padding: 12px 6px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-1);
  display: flex; flex-direction: column; justify-content: center; }
.me-durak__q b { display: block; font-family: 'Acrom'; font-size: 23px; color: var(--ink-0); }
.me-durak__q span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.me-durak__ach-head { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 8px; }
.me-durak__ach { display: flex; flex-wrap: wrap; gap: 6px; }
.me-durak-ach { font-size: 11px; padding: 5px 10px; border-radius: 6px; background: var(--bg-2);
  border: 1px solid var(--line-1); color: var(--ink-3); }
.me-durak-ach.is-on { color: var(--ink-0); border-color: var(--acc); background: rgba(86,128,200,.12); }
@media (max-width: 560px) { .me-durak__quick { grid-template-columns: repeat(2,1fr); } }

/* ════════════════════════════════════════════════════════════════
   GALAXY MAP — /galaxy (public, read-only war map)
   Reuses the lore holotable viewer look (.lore-viewer-wrap) and adds
   side info panels + a planet-detail flyout. Holotable theme cohesive.
   ════════════════════════════════════════════════════════════════ */

/* Раскладка: левая панель · карта · правая панель */
.gm-stage {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 232px;
  gap: 16px;
  align-items: stretch;
}
.gm-viewer-wrap { cursor: grab; height: 72vh; min-height: 500px; touch-action: none; }

/* ── Информационные панели по бокам ── */
.gm-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-content: start;
}
.gm-info__card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-1);
  padding: 14px 14px 16px;
  --cut: 10px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.gm-info__h {
  margin: 0 0 12px;
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Контроль секторов */
.gm-control { display: flex; flex-direction: column; gap: 9px; }
.gm-ctrl-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
}
.gm-ctrl-dot { grid-row: 1; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.gm-ctrl-name { grid-row: 1; font-size: 12px; color: var(--ink-1); }
.gm-ctrl-num { grid-row: 1; font-family: 'Acrom'; font-weight: 800; font-size: 15px; color: var(--ink-0); }
.gm-ctrl-bar {
  grid-column: 1 / -1; grid-row: 2;
  height: 4px; background: var(--bg-0); border-radius: 2px; overflow: hidden; margin-top: 2px;
}
.gm-ctrl-bar i { display: block; height: 100%; border-radius: 2px; transition: width .4s var(--t-mid); }

/* Ресурсы */
.gm-res { display: flex; flex-direction: column; gap: 8px; }
.gm-res-row { display: flex; justify-content: space-between; align-items: baseline; }
.gm-res-lbl { font-size: 12px; color: var(--ink-2); }
.gm-res-val { font-family: 'Acrom'; font-weight: 800; font-size: 16px; color: var(--ink-0); }

/* Эскалация */
.gm-esc-pips { display: flex; gap: 6px; margin-bottom: 8px; }
.gm-esc-pip {
  flex: 1; height: 8px; border-radius: 2px;
  background: var(--bg-0); border: 1px solid var(--line-1);
}
.gm-esc-pip.is-on { background: var(--hl-orange); border-color: var(--hl-orange); box-shadow: 0 0 8px rgba(243,149,86,.5); }
.gm-esc-lbl { font-size: 11px; color: var(--ink-3); }

/* Тикеты / подкрепления */
.gm-tix-row { display: flex; align-items: baseline; gap: 4px; }
.gm-tix-cur { font-family: 'Acrom'; font-weight: 800; font-size: 22px; color: var(--ink-0); }
.gm-tix-sep, .gm-tix-max { font-family: 'Acrom'; font-size: 14px; color: var(--ink-3); }
.gm-tix-bar { height: 5px; background: var(--bg-0); border-radius: 3px; overflow: hidden; margin: 8px 0 6px; }
.gm-tix-bar i { display: block; height: 100%; background: var(--acc); transition: width .4s var(--t-mid); }
.gm-tix-mode { font-size: 11px; color: var(--ink-3); }

/* Задача штаба */
.gm-hq-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-1); }

/* Бои */
.gm-battles { display: flex; flex-direction: column; gap: 10px; }
.gm-battle {
  padding: 10px 11px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  border-left: 2px solid var(--line-2);
  border-radius: 4px;
}
.gm-battle--active { border-left-color: var(--hl-red); }
.gm-battle--scheduled { border-left-color: var(--hl-orange); }
.gm-battle__planet { font-family: 'Acrom'; font-weight: 700; font-size: 13px; color: var(--ink-0); margin-bottom: 4px; }
.gm-battle__sides { font-size: 12px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.gm-battle__vs { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.gm-battle__status { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); margin-top: 5px; }
.gm-battle--active .gm-battle__status { color: var(--hl-red); }

/* Новости */
.gm-news { display: flex; flex-direction: column; gap: 9px; max-height: 280px; overflow-y: auto; }
.gm-news-item { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.4; }
.gm-news-date { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); min-width: 42px; }
.gm-news-text { color: var(--ink-1); }
.gm-news::-webkit-scrollbar { width: 6px; }
.gm-news::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* ── Легенда фракций на карте ── */
.gm-legend {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 8px; flex-wrap: wrap;
  z-index: 5;
  pointer-events: none;
}
.gm-vlg {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  padding: 4px 9px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(15, 20, 30, 0.7);
  border: 1px solid currentColor;
  backdrop-filter: blur(4px);
}
.gm-vlg::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}

/* ── Планеты на полотне ── */
.gm-planet { cursor: pointer; transition: filter .25s; }
.gm-body { transition: r .2s, filter .25s; }
.gm-planet:hover .gm-body { filter: url(#gm-glow) brightness(1.28); }
.gm-halo { transition: transform .18s ease, opacity .18s ease; }
.gm-planet:hover .gm-halo { opacity: 0.55 !important; transform: scale(1.35); transform-box: fill-box; transform-origin: center; }
.gm-planet.is-active .gm-halo { opacity: 0.7 !important; }
.gm-ring { opacity: 0.85; }
.gm-bang {
  fill: var(--ink-0);
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 14px;
  pointer-events: none;
}
.gm-label {
  fill: var(--ink-0);
  font-family: 'Acrom';
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
  paint-order: stroke fill;
  stroke: rgba(4,7,14,0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.gm-icon { pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.gm-icon.is-loaded { opacity: 1; }
.gm-ringedge {
  pointer-events: none;
  stroke-width: 2.5;
  opacity: 0.9;
  transition: stroke-width .25s, opacity .25s;
}
.gm-planet:hover .gm-ringedge { stroke-width: 3.5; opacity: 1; }
.gm-planet.is-active .gm-ringedge { stroke-width: 3.5; opacity: 1; }

/* ── Сектора (фон) — соприкасающиеся ячейки Вороного с волнистой границей ── */
.gm-sector {
  fill-opacity: 0.1;
  stroke-opacity: 0.55;
  stroke-width: 2.6;
  stroke-linejoin: round;
  pointer-events: none;
}
.gm-sector-label {
  font-family: 'Acrom';
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill-opacity: 0.5;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: rgba(4,7,14,0.85);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* ── Гиперлинии ── */
.gm-edge {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.3;
  opacity: 0.4;
  filter: url(#gm-lane-glow);
  transition: opacity .15s, stroke-width .15s;
}
.gm-edge--minor { opacity: 0.28; }
/* Межсекторные линии — тоньше и бледнее, чтобы карта читалась чище */
.gm-edge--inter { opacity: 0.22; stroke-width: 1; }
/* Hover flow: «бегущий» поток от наведённой планеты к соседям */
.gm-edge--flow {
  opacity: 0.95;
  stroke-width: 2.2;
  stroke-dasharray: 4 14;
  animation: gm-lane-flow 1.1s linear infinite;
}
.gm-edge--flow.gm-edge--flow-rev { animation-name: gm-lane-flow-rev; }
@keyframes gm-lane-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -18; }
}
@keyframes gm-lane-flow-rev {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 18; }
}

/* ── Боковая панель детали планеты ── */
.gm-detail-scrim {
  position: fixed; inset: 0;
  background: rgba(4, 7, 14, 0.55);
  backdrop-filter: blur(2px);
  z-index: 80;
}
.gm-detail {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 92vw;
  z-index: 81;
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4,.2,.2,1);
  padding: 18px;
  display: flex;
}
.gm-detail.is-open { transform: translateX(0); }
.gm-detail__inner {
  position: relative;
  flex: 1;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--acc);
  box-shadow: var(--shadow);
  padding: 26px 22px 22px;
  overflow-y: auto;
}
.gm-detail__inner::-webkit-scrollbar { width: 7px; }
.gm-detail__inner::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.gm-detail__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  transition: all var(--t-fast);
  z-index: 2;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.gm-detail__close:hover { color: var(--ink-0); border-color: var(--acc); box-shadow: 0 0 12px var(--acc-glow); }

.gm-detail__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding-right: 30px; }
.gm-detail__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.gm-detail__name {
  margin: 0;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 22px; letter-spacing: 1px;
  color: var(--ink-0);
}
.gm-detail__ctrl {
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 16px;
}

.gm-detail__prog { margin-bottom: 16px; }
.gm-detail__prog-lbl {
  display: flex; justify-content: space-between;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3);
  margin-bottom: 5px;
}
.gm-detail__prog-lbl span { color: var(--ink-0); font-family: 'Acrom'; font-weight: 800; }
.gm-detail__prog-bar { height: 7px; background: var(--bg-0); border: 1px solid var(--line-1); border-radius: 4px; overflow: hidden; }
.gm-detail__prog-bar i { display: block; height: 100%; transition: width .4s var(--t-mid); }

.gm-detail__meta {
  margin: 0 0 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.gm-detail__meta div { min-width: 0; }
.gm-detail__meta dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-3); margin-bottom: 2px;
}
.gm-detail__meta dd { margin: 0; font-size: 13px; color: var(--ink-1); }

.gm-detail__sec { margin-bottom: 16px; }
.gm-detail__sec h4 {
  margin: 0 0 8px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-1);
  padding-bottom: 6px;
}
.gm-detail__bonus, .gm-detail__desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-1); }
.gm-detail__bonus { color: var(--acc-2); }
.gm-detail__none { margin: 0; font-size: 12px; color: var(--ink-3); font-style: italic; }

.gm-bld-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gm-bld, .gm-q {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  border-radius: 4px;
}
.gm-bld__ico { width: 22px; height: 22px; object-fit: contain; flex: none; }
.gm-bld__name { font-size: 13px; color: var(--ink-1); flex: 1; min-width: 0; }
.gm-bld__lvl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.gm-q { border-left: 2px solid var(--hl-orange); }
.gm-q__time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--hl-orange); flex: none; }
.gm-q.is-done { border-left-color: var(--hl-green); }
.gm-q.is-done .gm-q__time { color: var(--hl-green); }

/* ── Строительство (командиры) ── */
.gm-build__slots {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-3); margin-bottom: 8px;
}
.gm-build__msg {
  font-size: 12px; line-height: 1.45; color: var(--acc-2);
  margin-bottom: 8px; padding: 7px 9px;
  background: var(--bg-0); border: 1px solid var(--line-1); border-radius: 4px;
}
.gm-build__msg.is-error { color: var(--hl-red); border-color: var(--hl-red); }
.gm-build__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gm-build__item {
  padding: 9px 10px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  border-radius: 4px;
}
.gm-build__item.is-disabled { opacity: 0.6; }
.gm-build__head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.gm-build__meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11px; color: var(--ink-3); margin-bottom: 4px;
}
.gm-build__cost { color: var(--acc-2); }
.gm-build__time { font-family: 'JetBrains Mono', monospace; color: var(--hl-orange); }
.gm-build__note { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin-bottom: 7px; }
.gm-build__btn {
  display: inline-block; width: 100%; box-sizing: border-box;
  padding: 7px 10px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center; text-decoration: none;
  color: var(--ink-0);
  background: var(--bg-1);
  border: 1px solid var(--acc);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.gm-build__btn:hover:not(:disabled) { border-color: var(--acc-2); box-shadow: 0 0 12px var(--acc-glow); color: var(--ink-0); }
.gm-build__btn:disabled { cursor: not-allowed; color: var(--ink-3); border-color: var(--line-1); background: var(--bg-0); }
.gm-build__login { width: auto; }
.gm-build__cancel {
  flex: none; margin-left: auto;
  padding: 4px 9px;
  font-family: 'Acrom'; font-weight: 800;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--hl-red);
  background: transparent;
  border: 1px solid var(--hl-red);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.gm-build__cancel:hover { background: var(--hl-red); color: var(--bg-0); }

/* ── Адаптив ── */
@media (max-width: 1100px) {
  .gm-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "map" "left" "right";
  }
  .gm-viewer-wrap { grid-area: map; }
  .gm-info--left { grid-area: left; }
  .gm-info--right { grid-area: right; }
  .gm-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }
}
@media (max-width: 760px) {
  .gm-viewer-wrap { height: 64vh; min-height: 380px; --cut: 10px; }
  .gm-label { font-size: 11px; }
  .gm-legend { top: 10px; left: 10px; gap: 4px; }
  .gm-vlg { font-size: 8px; letter-spacing: 1.4px; padding: 3px 6px; }
  .gm-vlg::before { width: 6px; height: 6px; }
  .gm-detail { width: 100%; max-width: 100%; padding: 0; }
  .gm-detail__inner { border-left: none; border-right: none; }
  .gm-info { grid-template-columns: 1fr; }
}
@media (hover: none) {
  .gm-planet:hover .gm-body { filter: url(#gm-glow); }
  .gm-planet:hover .gm-halo { opacity: 0.2 !important; }
}


/* ══════════ Голо-сводка операции (лор-ивент с привязкой к ГК) ══════════ */
.gwb{position:relative;display:grid;grid-template-columns:320px 1fr;gap:24px;
  background:
    linear-gradient(90deg, rgba(15,24,50,0.92) 0%, rgba(15,24,50,0.6) 60%, rgba(86,128,200,0.18) 100%),
    url('/img/decor/announce_blue.png') right center / auto 100% no-repeat,
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-3) 100%);
  border:1px solid var(--line-2);border-radius:14px;padding:24px 26px;margin:0 0 22px;overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.4)}
.gwb::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 12px)}
.gwb::after{content:'';position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;pointer-events:none;z-index:0;
  background:url('/img/ui/hex.png') center/contain no-repeat;opacity:.06}
.gwb-planet,.gwb-info{position:relative;z-index:1}
.gwb-planet{position:relative;width:288px;height:288px;display:flex;align-items:center;justify-content:center;align-self:center;flex:none}
.gwb-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.gwb-sphere{position:relative;width:224px;height:224px;border-radius:50%;overflow:hidden}
.gwb-sphere img{width:100%;height:100%;object-fit:cover;display:block;animation:gwbspin 95s linear infinite;transform-origin:50% 50%}
@keyframes gwbspin{from{transform:scale(1.16) rotate(0deg)}to{transform:scale(1.16) rotate(360deg)}}
.gwb-shadow{display:none}
.gwb-spec{display:none}
.gwb-pulse{position:absolute;width:252px;height:252px;border-radius:50%;box-shadow:0 0 0 2px rgba(225,64,64,.5);animation:gwbpulse 2.4s ease-out infinite}
@keyframes gwbpulse{0%{box-shadow:0 0 0 0 rgba(225,64,64,.55);opacity:.9}100%{box-shadow:0 0 0 32px rgba(225,64,64,0);opacity:0}}
.gwb-pname{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#e7ecf7;font-weight:700;text-shadow:0 2px 8px #000}
.gwb-info{display:flex;flex-direction:column;gap:13px;min-width:0}
.gwb-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:1px solid #44506e;color:#cdd6ee;background:rgba(255,255,255,.04)}
.gwb-pill--live{border-color:#E14040;color:#ffd2d2;background:rgba(225,64,64,.12)}
.gwb-pill--done{border-color:#C2A13A;color:#f0e0a8;background:rgba(194,161,58,.1)}
.gwb-pill .gwb-dot{width:8px;height:8px;border-radius:50%;background:#E14040;animation:gwbblink 1.2s infinite}
@keyframes gwbblink{50%{opacity:.25}}
.gwb-title{font-size:25px;font-weight:800;margin:0;line-height:1.1;color:#e7ecf7}
.gwb-where{color:#9aa6c0;font-size:13px;margin:2px 0 0}
.gwb-factions{display:flex;align-items:center;gap:12px}
.gwb-fchip{flex:1;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;background:rgba(255,255,255,.02)}
.gwb-role{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#5b6480}
.gwb-fname{font-size:14px;font-weight:700;margin-top:2px;display:flex;align-items:center;gap:7px;color:#e7ecf7}
.gwb-fdot{width:10px;height:10px;border-radius:50%;flex:none}
.gwb-vs{color:#9aa6c0;flex:none}
.gwb-front-lbl{display:flex;justify-content:space-between;font-size:11px;color:#9aa6c0;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.gwb-frontbar{height:16px;border-radius:8px;overflow:hidden;display:flex;border:1px solid rgba(255,255,255,.1)}
.gwb-frontbar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);min-width:0}
.gwb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gwb-stat{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.02)}
.gwb-k{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#5b6480}
.gwb-v{font-size:15px;font-weight:700;margin-top:3px;color:#e7ecf7}
.gwb-cap{height:7px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:7px;overflow:hidden}
.gwb-cap>i{display:block;height:100%}
.gwb-timeline{display:flex;align-items:center;margin-top:6px}
.gwb-tstep{flex:1;text-align:center;position:relative;font-size:10px;color:#5b6480;text-transform:uppercase}
.gwb-tstep::before{content:'';display:block;width:11px;height:11px;border-radius:50%;background:#2a3350;margin:0 auto 5px;border:2px solid #1a2236}
.gwb-tstep.done::before{background:#E14040;border-color:#E14040}
.gwb-tstep.now::before{background:#fff;border-color:#E14040;box-shadow:0 0 0 4px rgba(225,64,64,.25)}
.gwb-tline{position:absolute;top:5px;left:50%;width:100%;height:2px;background:#1a2236;z-index:-1}
.gwb-tstep.done .gwb-tline{background:#E14040}
.gwb-obj{position:relative;border:1px solid rgba(194,161,58,.34);border-radius:12px;padding:14px 18px 13px;background:linear-gradient(135deg,rgba(194,161,58,.1),rgba(194,161,58,.015) 60%)}
.gwb-obj::before,.gwb-obj::after{content:'';position:absolute;width:13px;height:13px;border:2px solid #C2A13A;opacity:.65}
.gwb-obj::before{left:8px;top:8px;border-right:0;border-bottom:0}
.gwb-obj::after{right:8px;bottom:8px;border-left:0;border-top:0}
.gwb-obj-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#C2A13A;margin-bottom:7px}
.gwb-obj-text{margin:0;font-size:13px;line-height:1.55;color:#e7ecf7}
.gwb-result{font-size:13px;color:#e7ecf7;border-left:2px solid #C2A13A;padding-left:12px}
.gwb-result b{color:#C2A13A}
.gwb-links{display:flex;gap:10px;flex-wrap:wrap}
.gwb-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#7da2e6;text-decoration:none;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 12px;background:rgba(86,128,200,.08)}
.gwb-btn:hover{background:rgba(86,128,200,.18)}
.gwb-ico{width:1em;height:1em;flex:none;vertical-align:middle}
.gwb-obj-tag .gwb-ico{width:13px;height:13px}
.gwb-vs .gwb-ico{width:22px;height:22px}
.gwb-btn .gwb-ico{width:13px;height:13px}
@media (max-width:760px){
  .gwb{grid-template-columns:1fr;gap:16px;padding:18px}
  .gwb-planet{width:240px;height:240px;margin:0 auto}
  .gwb-sphere{width:188px;height:188px}
  .gwb-grid2{grid-template-columns:1fr}
}

/* ── Кликабельная планета (есть бой) + кнопка запуска ── */
.gwb-planet--battle .gwb-sphere{cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.gwb-planet--battle .gwb-sphere::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);opacity:0;transition:opacity .3s;pointer-events:none}
.gwb-planet--battle .gwb-sphere:hover{transform:scale(1.04);box-shadow:0 0 40px -6px var(--gwb-acc,#6fa8ff)}
.gwb-planet--battle .gwb-sphere:hover::after{opacity:1}
.gwb-launch{position:absolute;bottom:-44px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;cursor:pointer;white-space:nowrap;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(225,64,64,.9),rgba(150,30,30,.85));box-shadow:0 6px 20px -8px rgba(225,64,64,.7);transition:transform .2s,box-shadow .2s,filter .2s}
.gwb-launch:hover{transform:translateX(-50%) translateY(-2px);filter:brightness(1.12);box-shadow:0 10px 26px -8px rgba(225,64,64,.85)}
.gwb-launch .gwb-ico{width:14px;height:14px}
@media (max-width:760px){.gwb-launch{position:static;transform:none;margin:14px auto 0}.gwb-launch:hover{transform:translateY(-2px)}}

/* ── Орбитальная боевая сцена (оверлей three.js) ── */
body.gwb-battle-open{overflow:hidden}
.gwb-battle{position:fixed;inset:0;z-index:4000;background:transparent;opacity:0;transition:opacity .35s ease;overflow:hidden}
.gwb-battle.is-in{opacity:1}
/* тёмная "космическая" подложка — fade-in во время перехода (UI сайта уходит за неё) */
.gwb-battle__veil{position:absolute;inset:0;opacity:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,#0a1024 0%,#070a16 45%,#04060e 100%)}
.gwb-battle__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
/* слой всплывающих "−N тикет" */
.gwb-battle__cbt{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.gwb-cbt-item{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-size:16px;font-weight:900;letter-spacing:.5px;text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 14px currentColor;will-change:top,opacity}
/* метка зоны миссии (голо-маркер) */
.gwb-zone-label{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;text-align:center;padding-bottom:13px;will-change:left,top,opacity}
.gwb-zone-label::after{content:'';position:absolute;left:50%;bottom:0;width:1px;height:11px;transform:translateX(-50%);background:linear-gradient(#ffd23a,rgba(255,210,58,0))}
.gwb-zone-tag{display:block;font-size:11px;font-weight:800;letter-spacing:2.5px;color:#ffd23a;text-shadow:0 0 12px rgba(255,210,58,.75),0 2px 6px #000}
.gwb-zone-name{display:block;font-size:13px;font-weight:700;color:#fff;text-shadow:0 2px 6px #000}

/* ── planet-режим: слой маркеров построек ── */
.gwb-battle__markers{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.gwb-bld-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:default;will-change:left,top,opacity}
/* при наведении поднимаем маркер над соседними — иначе их иконки перекрывают тултип
   (each marker is its own stacking context из-за will-change, поэтому нужен z-index на :hover) */
.gwb-bld-marker:hover{z-index:40}
.gwb-bld-marker__ico{display:block;width:76px;height:76px;border-radius:11px;object-fit:cover;
  border:3px solid #7fe0ff;background:rgba(10,16,28,.7);box-shadow:0 0 20px -2px #7fe0ff,0 2px 10px rgba(0,0,0,.6)}
.gwb-bld-marker.is-building .gwb-bld-marker__ico{border-color:#ffd23a;box-shadow:0 0 14px -2px #ffd23a,0 2px 8px rgba(0,0,0,.6);animation:gwbBldPulse 1.4s ease-in-out infinite}
@keyframes gwbBldPulse{50%{box-shadow:0 0 22px 1px #ffd23a,0 2px 8px rgba(0,0,0,.6)}}
.gwb-bld-marker__dot{display:block;width:28px;height:28px;border-radius:50%;background:#7fe0ff;box-shadow:0 0 16px #7fe0ff}
.gwb-bld-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);min-width:150px;max-width:230px;
  background:rgba(10,14,24,.94);border:1px solid rgba(127,224,255,.35);border-radius:10px;padding:9px 12px;
  opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none;z-index:5;box-shadow:0 8px 24px -8px rgba(0,0,0,.8)}
.gwb-bld-marker:hover .gwb-bld-tip{opacity:1;visibility:visible}
.gwb-bld-tip__name{font-size:13px;font-weight:800;color:#eef2fb;margin-bottom:3px}
.gwb-bld-tip__state{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.gwb-bld-tip__state--built{color:#7fe0ff}
.gwb-bld-tip__state--wip{color:#ffd23a}
.gwb-bld-tip__gives{font-size:12px;line-height:1.4;color:#aeb9da}

/* ── planet-режим: панель сводки ── */
.gwb-sum{position:absolute;left:30px;bottom:54px;width:300px;max-width:36vw;z-index:4;pointer-events:auto;
  background:rgba(8,12,22,.82);border:1px solid rgba(127,170,230,.22);border-radius:14px;padding:16px 18px;
  backdrop-filter:blur(8px);box-shadow:0 12px 40px -16px rgba(0,0,0,.8);opacity:0;transition:opacity .4s;max-height:60vh;overflow-y:auto}
.gwb-sum__head{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7da2e6;margin-bottom:8px}
.gwb-sum__self{font-size:13px;line-height:1.5;color:#e7ecf7;margin:0 0 12px}
.gwb-sum__self.gwb-sum__none,.gwb-sum__none{color:#8893b4;font-style:italic}
.gwb-sum__subh{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5b6480;margin:0 0 7px}
.gwb-sum__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gwb-sum__row{display:grid;grid-template-columns:30px 1fr;gap:2px 9px;align-items:center}
.gwb-sum__ico{grid-row:1/3;width:30px;height:30px;border-radius:6px;object-fit:cover;background:rgba(255,255,255,.05)}
.gwb-sum__name{font-size:13px;font-weight:700;color:#e7ecf7;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gwb-sum__gives{font-size:11px;color:#9aa6c0;line-height:1.35;grid-column:2}
.gwb-sum__badge{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:5px}
.gwb-sum__badge--built{color:#7fe0ff;background:rgba(127,224,255,.12)}
.gwb-sum__badge--wip{color:#ffd23a;background:rgba(255,210,58,.12)}
@media (max-width:760px){.gwb-sum{left:12px;right:12px;width:auto;max-width:none;bottom:48px}}

/* ── planet-режим: меню командира + размещение построек ── */
.gwb-bld-tip{bottom:100%}
.gwb-bld-marker:hover .gwb-bld-tip,.gwb-bld-tip:hover{opacity:1;visibility:visible;pointer-events:auto}
.gwb-cmd{position:absolute;right:30px;top:104px;width:284px;max-width:34vw;z-index:5;pointer-events:auto;
  background:rgba(8,12,22,.86);border:1px solid rgba(127,170,230,.24);border-radius:14px;padding:14px 16px;
  backdrop-filter:blur(8px);box-shadow:0 12px 40px -16px rgba(0,0,0,.8);max-height:64vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.gwb-cmd__info{min-width:0}
.gwb-cmd.is-placing{opacity:.35;pointer-events:none}
.gwb-cmd__head{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7da2e6;margin-bottom:6px}
.gwb-cmd__res{font-size:12px;color:#aeb9da;margin-bottom:8px}
.gwb-cmd__res b{color:#eef2fb}
.gwb-cmd__msg{font-size:12px;color:#7fe0ff;margin-bottom:8px;padding:6px 9px;border-radius:8px;background:rgba(127,224,255,.1)}
.gwb-cmd__msg.is-error{color:#ffb0b0;background:rgba(225,64,64,.12)}
.gwb-cmd__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gwb-cmd__none{color:#8893b4;font-style:italic;font-size:13px}
.gwb-cmd__item{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:7px 9px;background:rgba(255,255,255,.02)}
.gwb-cmd__item.is-poor{opacity:.55}
.gwb-cmd__ico{width:34px;height:34px;border-radius:6px;object-fit:cover;background:rgba(255,255,255,.05);display:block}
.gwb-cmd__name{font-size:13px;font-weight:700;color:#e7ecf7;line-height:1.2;overflow-wrap:anywhere;word-break:break-word}
.gwb-cmd__cost{font-size:11px;color:#9aa6c0}
.gwb-cmd__gives{font-size:11px;color:#8fd0a8;line-height:1.3;margin-top:3px}
.gwb-cmd__place{font-size:11px;font-weight:700;color:#0a0f1c;background:#7da2e6;border:0;border-radius:7px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.gwb-cmd__place:hover{filter:brightness(1.1)}
.gwb-cmd__place:disabled{background:#3a4760;color:#8893b4;cursor:not-allowed}
.gwb-place-banner{position:absolute;top:104px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:rgba(8,12,22,.92);border:1px solid rgba(127,224,255,.4);border-radius:999px;padding:10px 20px;
  font-size:13px;color:#dfe7f6;box-shadow:0 8px 28px -10px rgba(0,0,0,.8)}
.gwb-place-banner b{color:#7fe0ff}
.gwb-bld-marker--preview{opacity:.75;pointer-events:none;filter:drop-shadow(0 0 8px #7fe0ff)}
.gwb-bld-marker--preview .gwb-bld-marker__ico{border-style:dashed}
.gwb-bld-tip__cancel{margin-top:7px;width:100%;font-size:11px;font-weight:700;color:#ffb0b0;background:rgba(225,64,64,.14);
  border:1px solid rgba(225,64,64,.4);border-radius:7px;padding:5px 8px;cursor:pointer}
.gwb-bld-tip__cancel:hover{background:rgba(225,64,64,.26)}
@media (max-width:760px){.gwb-cmd{right:12px;left:12px;width:auto;max-width:none;top:auto;bottom:60px}}
.gwb-battle__ui{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s ease .25s;z-index:4}
.gwb-battle__ui.is-in{opacity:1}
.gwb-battle__top{position:absolute;top:30px;left:40px;max-width:70vw}
.gwb-battle__title{font-size:30px;font-weight:800;color:#eef2fb;letter-spacing:.5px;text-shadow:0 3px 18px rgba(0,0,0,.7);line-height:1.05}
.gwb-battle__sides{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:14px;font-weight:700;color:#d4ddf2;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.gwb-battle__side{display:inline-flex;align-items:center;gap:8px}
.gwb-battle__side i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 10px currentColor}
.gwb-battle__vs{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#8893b4}
.gwb-battle__hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#7e8aac;text-shadow:0 2px 8px #000}
.gwb-battle__close{position:absolute;top:26px;right:30px;width:46px;height:46px;border-radius:50%;cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;color:#dde4f5;
  border:1px solid rgba(255,255,255,.18);background:rgba(12,16,28,.55);backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.gwb-battle__close:hover{background:rgba(225,64,64,.35);transform:rotate(90deg)}
.gwb-battle__close svg{width:22px;height:22px}
@media (max-width:760px){
  .gwb-battle__top{top:18px;left:18px}
  .gwb-battle__title{font-size:21px}
  .gwb-battle__close{top:16px;right:16px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .gwb-battle,.gwb-battle__ui{transition-duration:.01ms}
}

/* ════════════ «В РОЗЫСКЕ» — розыскной блок СБ на странице фракций ════════════ */
/* отступ сверху (от списка фракций) = отступ снизу (его задаёт margin-top телеметрии 32px) */
.wanted-board{margin:32px 0 0}
.wanted-board__inner{background:linear-gradient(180deg,rgba(16,22,38,.72),rgba(10,13,22,.9));border-left:1px solid rgba(86,128,200,.28);border-right:1px solid rgba(86,128,200,.28);padding:18px 22px 20px}
.wanted-board__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.wanted-board__kicker{font:700 10px/1 system-ui;letter-spacing:2px;text-transform:uppercase;color:#7faae6}
.wanted-board__title{margin:5px 0 0;font:900 28px/1 'Acrom',sans-serif;letter-spacing:5px;color:#fff;text-shadow:0 2px 14px rgba(86,128,200,.45)}
.wanted-board__add{padding:9px 16px;border-radius:8px;border:1px solid #5680c8;background:rgba(86,128,200,.2);color:#cfe0ff;font:700 13px system-ui;cursor:pointer;transition:background .15s}
.wanted-board__add:hover{background:rgba(86,128,200,.34)}
/* police-line: синяя лента с бегущими полосами (верх и низ — одно направление) */
.wanted-line{position:relative;height:20px;overflow:hidden;border-top:2px solid rgba(7,12,24,.6);border-bottom:2px solid rgba(7,12,24,.6)}
/* непрерывный градиент на широком псевдоэлементе + сдвиг ровно на один период (40·√2) → бесшовный цикл */
.wanted-line::before{content:'';position:absolute;top:0;bottom:0;left:-50%;right:-50%;background:repeating-linear-gradient(45deg,#4a78c8 0 20px,#0e1626 20px 40px);will-change:transform;animation:wanted-stripes 1.3s linear infinite}
@keyframes wanted-stripes{from{transform:translateX(0)}to{transform:translateX(56.5685px)}}
.wanted-empty{color:#9aa6c0;font-style:italic;padding:16px 4px}
.wanted-carousel{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity}
.wanted-carousel::-webkit-scrollbar{height:8px}
.wanted-carousel::-webkit-scrollbar-thumb{background:rgba(86,128,200,.35);border-radius:8px}
.wanted-card{position:relative;scroll-snap-align:start;flex:0 0 264px;background:linear-gradient(180deg,rgba(18,24,40,.92),rgba(11,14,22,.96));border:1px solid var(--w-acc,#5680c8);border-radius:14px;overflow:hidden;box-shadow:0 12px 34px -16px #000;display:flex;flex-direction:column}
.wanted-card__stamp{position:absolute;top:9px;left:0;right:0;text-align:center;font:900 13px/1 'Acrom',sans-serif;letter-spacing:4px;color:#7faae6;z-index:2;text-shadow:0 2px 7px #000;pointer-events:none}
.wanted-card__model{height:228px;background:radial-gradient(ellipse at 50% 32%,rgba(46,70,120,.3),transparent 70%)}
.wanted-card__model--none{display:flex;align-items:center;justify-content:center;font:900 38px/1 'Acrom',sans-serif;color:var(--w-acc,#5680c8);opacity:.8}
.wanted-card__model model-viewer{width:100%;height:100%;background:transparent}
.wanted-card__body{padding:11px 14px 13px;display:flex;flex-direction:column;gap:7px}
.wanted-card__name{font:800 16px/1.1 'Acrom',sans-serif;color:#fff}
.wanted-card__idn{font-size:12px;color:#9aa6c0;font-weight:600}
.wanted-card__metarow{font-size:12px;color:#b9c2da}
.wanted-card__reason{font-size:13px;color:#eef2fb;line-height:1.4;background:rgba(86,128,200,.12);border-left:3px solid var(--w-acc,#5680c8);padding:6px 9px;border-radius:0 7px 7px 0}
.wanted-card__reason-lab{display:block;font:700 9px/1 system-ui;letter-spacing:1.5px;text-transform:uppercase;color:var(--w-acc,#7faae6);margin-bottom:3px}
.wanted-card__hist{font-size:12px;color:#9aa6c0}
.wanted-card__hist summary{cursor:pointer;outline:none}
.wanted-card__hist--empty{font-style:italic;opacity:.65}
.wanted-hist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:11.5px}
.wanted-hist__warn{color:#ffb37a}
.wanted-hist__note{color:#cdd8f0}
.wanted-hist span{color:#7e8aac}
.wanted-card__sig{margin-top:2px;text-align:right;border-top:1px dashed rgba(255,255,255,.15);padding-top:7px}
.wanted-card__sig-pos{display:block;font-size:10px;color:#9aa6c0}
.wanted-card__sig-name{font:700 15px/1 'Acrom',sans-serif;color:#e2e9f8;font-style:italic}
.wanted-card__btn{margin-top:5px;padding:7px;border-radius:8px;cursor:pointer;font:700 12px system-ui}
.wanted-card__found{background:rgba(60,170,90,.25);color:#bff5cf;border:1px solid rgba(80,200,120,.5)}
.wanted-card__del{background:rgba(120,130,160,.16);color:#aab4cf;border:1px solid rgba(140,150,180,.4)}
/* НАЙДЕН: карточка затемнена, перечёркнута крестом, причина крупным штампом */
.wanted-card.is-found{filter:grayscale(.7) brightness(.5)}
.wanted-card.is-found::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(45deg,transparent 47.3%,rgba(226,59,59,.9) 47.6% 52.4%,transparent 52.7%),linear-gradient(-45deg,transparent 47.3%,rgba(226,59,59,.9) 47.6% 52.4%,transparent 52.7%)}
.wanted-card__foundmark{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.wanted-card__foundtxt{font:900 24px/1 'Acrom',sans-serif;letter-spacing:2px;color:#fff;background:rgba(180,28,28,.9);padding:7px 16px;transform:rotate(-9deg);border:2px solid #fff;box-shadow:0 6px 22px #000;text-align:center;max-width:90%}
.wanted-card__foundby{margin-top:9px;font:700 11px/1 system-ui;color:#ffe;transform:rotate(-9deg)}
.wanted-card.is-found .wanted-card__del{position:relative;z-index:5;pointer-events:auto;filter:grayscale(0) brightness(2)}
/* модалка «объявить в розыск» */
.wanted-modal__back{position:fixed;inset:0;z-index:1000;background:rgba(4,6,12,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.wanted-modal{width:430px;max-width:100%;max-height:90vh;overflow:auto;background:linear-gradient(180deg,#161b27,#0f131c);border:1px solid rgba(127,170,230,.22);border-radius:16px;box-shadow:0 24px 70px -20px #000}
.wanted-modal__head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid rgba(127,170,230,.18)}
.wanted-modal__head h3{margin:0;font:800 18px/1 'Acrom',sans-serif;color:#fff}
.wanted-modal__x{background:transparent;border:0;color:#9aa6c0;font-size:17px;cursor:pointer}
.wanted-modal__body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.wanted-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#b9c2da}
.wanted-field>span{font:600 11px/1 system-ui;letter-spacing:.5px;text-transform:uppercase;color:#8fa0c4}
.wanted-field select,.wanted-field input,.wanted-field textarea{background:rgba(10,14,24,.7);border:1px solid rgba(127,170,230,.22);border-radius:8px;color:#e7ecf7;padding:8px 10px;font:400 13px system-ui;width:100%;box-sizing:border-box}
.wanted-field__sub{font:700 11px/1 system-ui;letter-spacing:1px;text-transform:uppercase;color:#7faae6;margin-top:4px}
.wanted-modal__sig{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wanted-modal__err{color:#ffb0b0;font-size:12px;background:rgba(225,64,64,.12);border-radius:8px;padding:7px 10px}
.wanted-modal__foot{display:flex;gap:10px;padding:14px 20px;border-top:1px solid rgba(127,170,230,.18)}
.wanted-modal__submit{flex:1;padding:10px;border-radius:9px;border:1px solid #5680c8;background:rgba(86,128,200,.26);color:#d3e3ff;font:700 14px system-ui;cursor:pointer}
.wanted-modal__cancel{padding:10px 16px;border-radius:9px;border:1px solid rgba(127,170,230,.22);background:transparent;color:#9aa6c0;cursor:pointer}
/* /me — баннер «вы в розыске» */
.me-wanted-banner{margin:14px 0;border:1px solid #e23b3b;border-radius:12px;background:linear-gradient(180deg,rgba(60,16,16,.65),rgba(30,12,14,.8));padding:14px 18px;position:relative;overflow:hidden}
.me-wanted-banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:repeating-linear-gradient(-45deg,#f5c518 0 8px,#14110a 8px 16px)}
.me-wanted-banner__title{font:900 16px/1 'Acrom',sans-serif;letter-spacing:2px;color:#ff6b6b;margin:0 0 6px}
.me-wanted-banner__txt{font-size:13px;color:#f3e3e3;line-height:1.5}
.me-wanted-banner__txt b{color:#fff}

/* ── Личное дело (карцер) в модалке бойца ───────────────────── */
.brig-section .brig-tag{display:inline-block;margin-left:6px;font:700 10px/1.4 'Acrom',sans-serif;letter-spacing:1px;text-transform:uppercase;color:#cfe0ff;background:rgba(86,128,200,.3);border:1px solid rgba(86,128,200,.5);border-radius:4px;padding:2px 6px;vertical-align:middle}
.brig-hint{font-size:12px;color:#9aa6c0;margin:2px 0 10px;line-height:1.45}
.brig-records{margin-top:4px}
.brig-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.brig-rec{border:1px solid rgba(86,128,200,.28);border-left:3px solid #5680c8;border-radius:8px;background:linear-gradient(180deg,rgba(18,24,40,.5),rgba(12,15,24,.62));padding:9px 12px}
.brig-rec__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.brig-rec__date{font:700 12px/1.3 'Acrom',sans-serif;color:#9fc0ee;letter-spacing:.4px}
.brig-rec__dur{font-size:11px;color:#8fa6cf;white-space:nowrap}
.brig-rec__reason{font-size:13px;color:#eef2fb;line-height:1.5;margin:2px 0}
.brig-rec__meta{font-size:11px;color:#9aa6c0;margin-top:4px}
.brig-rec__meta b{color:#cdd6ea}

/* ── /me · СБ: доступ к рапортам подразделений ─────────────────── */
.sb-access{margin:18px auto 6px;max-width:1100px;border:1px solid rgba(235,64,52,.32);border-left:3px solid #eb4034;border-radius:14px;background:linear-gradient(180deg,rgba(28,16,18,.6),rgba(14,15,22,.7));padding:16px 20px}
.sb-access__head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.sb-access__kicker{font:800 11px/1 'Acrom',sans-serif;letter-spacing:2px;color:#ff7a6e}
.sb-access__hint{font-size:12px;color:#9aa6c0;line-height:1.45}
.sb-access__req{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sb-access__select{flex:0 1 280px;background:rgba(10,14,24,.7);border:1px solid rgba(127,170,230,.24);border-radius:8px;color:#e7ecf7;padding:8px 10px;font:400 13px system-ui}
.sb-access__msg{font-size:12px;color:#9aa6c0}
.sb-access__msg--ok{color:#9ff0bd}
.sb-access__msg--no{color:#ffb0b0}
.sb-access__empty{font-size:13px;color:#9aa6c0;font-style:italic;padding:8px 2px}
.sb-access__grants{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.sb-grant{flex:0 1 280px;border:1px solid rgba(86,128,200,.32);border-radius:11px;background:linear-gradient(180deg,rgba(18,24,40,.7),rgba(11,14,22,.85));padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.sb-grant__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-grant__name{font:800 15px/1 'Acrom',sans-serif;color:#fff}
.sb-grant__timer{font:700 11px/1 system-ui;color:#9ff0bd;white-space:nowrap}
.sb-access__reqs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.sb-req{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#b9c2da;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.03)}
.sb-req--pending{background:rgba(245,197,24,.08)}
.sb-req__fac{font-weight:700;color:#e2e9f8}
.sb-req__st{color:#cdd8f0}
.sb-req__st--no{color:#ffb0b0}
.sb-req__st--exp{color:#9aa6c0}
.sb-req__exp{margin-left:auto;font-size:11px;color:#8090ac}
.sb-access__hist{margin-top:8px}
.sb-access__hist summary{cursor:pointer;color:#9aa6c0;font-size:12px}
/* read-only просмотрщик рапортов (модалка) */
.sbv-back{position:fixed;inset:0;z-index:1100;background:rgba(4,6,12,.74);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:18px}
.sbv-back.show{display:flex}
.sbv{width:760px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#141b27,#0e131c);border:1px solid rgba(127,170,230,.22);border-radius:16px;box-shadow:0 26px 80px -20px #000;overflow:hidden}
.sbv__head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(127,170,230,.16)}
.sbv__kicker{font:800 10px/1 'Acrom',sans-serif;letter-spacing:2px;color:#ff7a6e}
.sbv__title{margin:4px 0 0;font:800 19px/1 'Acrom',sans-serif;color:#fff}
.sbv__x{background:transparent;border:0;color:#9aa6c0;font-size:22px;line-height:1;cursor:pointer}
.sbv__tabs{display:flex;gap:4px;padding:10px 16px 0;border-bottom:1px solid rgba(127,170,230,.14)}
.sbv__tab{background:transparent;border:0;border-bottom:2px solid transparent;color:#9aa6c0;font:700 13px system-ui;padding:8px 14px;cursor:pointer}
.sbv__tab.is-active{color:#fff;border-bottom-color:#5680c8}
.sbv__body{padding:16px 20px;overflow:auto}
.sbv-loading,.sbv-empty,.sbv-err{color:#9aa6c0;font-style:italic;padding:16px 2px}
.sbv-err{color:#ffb0b0}
.sbv-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sbv-filters{display:flex;gap:5px;flex-wrap:wrap}
.sbv-fbtn{background:rgba(255,255,255,.05);border:1px solid rgba(127,170,230,.18);color:#b9c2da;border-radius:7px;padding:5px 10px;font:600 12px system-ui;cursor:pointer}
.sbv-fbtn.is-active{background:rgba(86,128,200,.28);color:#fff;border-color:#5680c8}
.sbv-left{font-size:11px;color:#9ff0bd}
.sbv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sbv-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid rgba(127,170,230,.16);border-radius:9px;background:rgba(255,255,255,.03);cursor:pointer;transition:background .12s,border-color .12s}
.sbv-q:hover{background:rgba(86,128,200,.12);border-color:rgba(86,128,200,.4)}
.sbv-q__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sbv-q__form{font:700 14px/1.2 'Acrom',sans-serif;color:#eef2fb}
.sbv-q__who{font-size:12px;color:#9aa6c0}
.sbv-q__side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.sbv-q__date{font-size:11px;color:#8090ac}
.sbv-badge{font:700 10px/1 system-ui;letter-spacing:.4px;padding:4px 8px;border-radius:5px;text-transform:uppercase}
.sbv-badge.is-pending{background:rgba(245,197,24,.16);color:#f5d56a}
.sbv-badge.is-accepted{background:rgba(60,170,90,.2);color:#9ff0bd}
.sbv-badge.is-rejected{background:rgba(226,59,59,.18);color:#ffb0b0}
.sbv-badge.is-stale{background:rgba(140,150,180,.18);color:#aab4cf}
/* detail */
.sbv-d__back{background:transparent;border:0;color:#7faae6;font:600 13px system-ui;cursor:pointer;padding:0 0 10px}
.sbv-d__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.sbv-d__form{font:800 17px/1.2 'Acrom',sans-serif;color:#fff}
.sbv-d__who{font-size:13px;color:#9aa6c0;margin-top:2px}
.sbv-d__meta{font-size:11px;color:#8090ac;margin-bottom:10px}
.sbv-d__review{font-size:13px;color:#dfe6f5;background:rgba(86,128,200,.1);border-left:3px solid #5680c8;border-radius:0 7px 7px 0;padding:8px 11px;margin-bottom:12px}
.sbv-d__review--no{background:rgba(226,59,59,.1);border-left-color:#e23b3b}
.sbv-d__answers{display:flex;flex-direction:column;gap:10px}
.sbv-d__field{display:flex;flex-direction:column;gap:3px}
.sbv-d__lab{font:700 11px/1.2 system-ui;letter-spacing:.4px;text-transform:uppercase;color:#8fa0c4}
.sbv-d__val{font-size:14px;color:#eef2fb;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.sbv-d__empty{color:#7e8aac;font-style:italic}
.sbv-d__note{font-size:13px;color:#aab4cf;border-left:2px solid rgba(127,170,230,.3);padding-left:9px}
.sbv-d__pre{margin:0;font:400 12px/1.4 monospace;color:#cdd6ea;background:rgba(10,14,24,.6);padding:8px;border-radius:7px;overflow:auto}
.sbv-d__sig{background:#fff;border-radius:8px;padding:6px;max-width:280px}
.sbv-d__sig svg{max-width:100%;height:auto}
/* forms */
.sbv-fold{margin-bottom:14px}
.sbv-fold__name{font:800 13px/1 'Acrom',sans-serif;letter-spacing:1px;color:#7faae6;margin-bottom:7px}
.sbv-fold__forms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sbv-form{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border:1px solid rgba(127,170,230,.14);border-radius:8px;background:rgba(255,255,255,.03)}
.sbv-form__title{font:700 14px/1.2 'Acrom',sans-serif;color:#eef2fb}
.sbv-form__desc{font-size:12px;color:#9aa6c0}
/* stats */
.sbv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.sbv-stat{border:1px solid rgba(127,170,230,.16);border-radius:10px;background:rgba(255,255,255,.03);padding:11px;text-align:center}
.sbv-stat__n{font:900 24px/1 'Acrom',sans-serif;color:#fff}
.sbv-stat__l{font-size:11px;color:#9aa6c0;margin-top:4px}
.sbv-toph{font:700 12px/1 system-ui;letter-spacing:.5px;text-transform:uppercase;color:#8fa0c4;margin-bottom:8px}
.sbv-tops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.sbv-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#cdd6ea;padding:6px 10px;border-radius:7px;background:rgba(255,255,255,.03)}
.sbv-top b{color:#7faae6}
@media(max-width:560px){.sbv-stats{grid-template-columns:repeat(2,1fr)}}

/* админка · панель одобрения запросов доступа СБ (вверху очереди рапортов) */
.sb-areq{margin:0 0 14px;border:1px solid rgba(235,64,52,.3);border-left:3px solid #eb4034;border-radius:11px;background:linear-gradient(180deg,rgba(40,18,20,.5),rgba(20,16,20,.6));padding:12px 14px}
.sb-areq:empty{display:none}
.sb-areq__head{font:800 12px/1 'Acrom',sans-serif;letter-spacing:1px;color:#ff8a7e;margin-bottom:9px}
.sb-areq__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);margin-bottom:6px}
.sb-areq__row--active{background:rgba(60,170,90,.08)}
.sb-areq__info{font-size:13px;color:#cdd6ea}
.sb-areq__fac{font-weight:800;color:#fff}
.sb-areq__exp{display:block;font-size:11px;color:#8fa0c4;margin-top:2px}
.sb-areq__acts{display:flex;gap:8px}

/* ============================================================
   СТРУКТУРА — board builder (org-chart / workflow constructor)
   ============================================================ */
.boards-pane { padding: 0 !important; }
.boards-root { font-family: 'Acrom'; }
.bc-wrap {
  position: relative;
  display: grid; grid-template-columns: 232px 1fr; gap: 14px;
  height: calc(100vh - 168px); min-height: 540px;
}
/* ---- left sidebar: boards + presets ---- */
.bc-side {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line-1); padding: 14px; overflow-y: auto;
}
.bc-side__head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2); }
.bc-side__sub, .bc-preset__grp { margin-top: 12px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.bc-side__empty { font-size: 12px; color: var(--ink-3); font-style: italic; padding: 8px 4px; }
.bc-boardlist { display: flex; flex-direction: column; gap: 5px; }
.bc-boarditem { display: flex; align-items: center; gap: 9px; padding: 9px 10px; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-1); cursor: pointer; text-align: left; transition: all .15s; font-family: 'Acrom'; font-size: 13px; }
.bc-boarditem:hover { border-color: var(--acc); color: var(--ink-0); }
.bc-boarditem.active { border-color: var(--acc); background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); box-shadow: 0 0 18px rgba(86,128,200,.18); color: var(--ink-0); }
.bc-boarditem__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-boarditem__kind { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; background: var(--acc); }
.bc-k-workflow { background: #c8a44f; } .bc-k-freeform { background: #4fc88a; } .bc-k-orgchart { background: #4f7ec8; }
.bc-presets { display: flex; flex-direction: column; gap: 5px; }
.bc-preset { position: relative; padding: 8px 10px; background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--ink-2); cursor: pointer; text-align: left; font-family: 'Acrom'; font-size: 12px; transition: all .15s; }
.bc-preset:hover { border-color: var(--acc-2); color: var(--ink-0); border-style: solid; }
.bc-preset__del { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 11px; }
.bc-preset__del:hover { color: var(--hl-red); }

/* ---- main: toolbar + stage ---- */
.bc-main { display: flex; flex-direction: column; min-width: 0; }
.bc-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line-1); border-bottom: 0; }
.bc-toolbar__title { font-weight: 800; font-size: 15px; color: var(--ink-0); letter-spacing: .5px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-toolbar__sp { flex: 1; }
.bc-tb-group { display: flex; gap: 4px; flex-wrap: wrap; }
.bc-tb-group .btn { padding: 6px 9px; }
.bc-presence { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.bc-ava { position: relative; display: inline-flex; margin-left: -6px; }
.bc-ava__ini { position: relative; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #0a1024; background: var(--c, #888); border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--c); }
.bc-ava.me .bc-ava__ini { box-shadow: 0 0 0 2px #fff; }
.bc-ava__name { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 26px; box-sizing: border-box; display: flex; align-items: center; padding: 0 30px 0 0; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; background: #0e1630; color: #eef2ff; border: 2px solid var(--c, #888); border-radius: 13px; font-size: 11px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.45); transition: max-width .32s cubic-bezier(.34,1.3,.5,1), opacity .22s ease, padding-left .32s ease; z-index: 1; pointer-events: none; }
.bc-ava:hover { z-index: 30; }
.bc-ava:hover .bc-ava__name { max-width: 240px; opacity: 1; padding-left: 13px; }
.bc-presence__lbl { font-size: 10px; color: var(--ink-3); margin-left: 6px; letter-spacing: 1px; text-transform: uppercase; }

.bc-stage { position: relative; flex: 1; border: 1px solid var(--line-1); overflow: hidden; background:
  radial-gradient(circle at 50% 0%, rgba(86,128,200,.10), transparent 60%),
  repeating-linear-gradient(0deg, transparent 0 31px, rgba(86,128,200,.05) 31px 32px),
  repeating-linear-gradient(90deg, transparent 0 31px, rgba(86,128,200,.05) 31px 32px),
  linear-gradient(180deg, #0b1228, #0a1020); }
.bc-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.bc-svg.grabbing { cursor: grabbing; }
.bc-status { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--acc-2); letter-spacing: 1px; pointer-events: none; }
.bc-hint { position: absolute; right: 12px; bottom: 10px; font-size: 10.5px; color: var(--ink-3); pointer-events: none; max-width: 60%; text-align: right; }
.bc-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-3); font-size: 14px; line-height: 1.8; }
.bc-empty small { color: var(--ink-3); opacity: .7; font-size: 12px; }

/* ---- nodes ---- */
.bc-node { cursor: grab; }
.bc-node .bnode {
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; gap: 8px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2), #0c1430);
  border: 1px solid var(--line-2); border-left: 4px solid var(--c, var(--acc));
  border-radius: 9px; padding: 9px 11px;
  font-family: 'Acrom'; color: var(--ink-1);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.bc-node.sel .bnode { border-color: var(--c, var(--acc)); box-shadow: 0 0 0 2px var(--c, var(--acc)), 0 0 26px rgba(86,128,200,.4); }
.bc-node.drop .bnode { border-color: #4fc88a; box-shadow: 0 0 0 2px #4fc88a, 0 0 26px rgba(79,200,138,.45); }
.bnode__img { width: 42px; height: 42px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: var(--bg-0); border: 1px solid var(--line-2); }
.bnode__img img { width: 100%; height: 100%; object-fit: cover; }
.bnode__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bnode__type { font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c, var(--acc-2)); font-weight: 800; }
/* тип/заголовок/подзаголовок НЕ сжимаются (иначе при уменьшении блока режется заголовок);
   сжимается и обрезается только тело .bnode__desc */
.bnode__type, .bnode__title, .bnode__sub { flex: 0 0 auto; }
.bnode__title { font-size: 14px; font-weight: 800; color: var(--ink-0); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bnode__ph { color: var(--ink-3); font-style: italic; font-weight: 500; }
.bnode__sub { font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bnode__desc { flex: 1 1 auto; min-height: 0; font-size: 11px; color: var(--ink-2); line-height: 1.4; word-break: break-word; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.bnode__links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.bnode__chip { font-size: 9.5px; padding: 2px 6px; background: rgba(86,128,200,.16); border: 1px solid var(--line-2); border-radius: 20px; color: var(--ink-1); cursor: pointer; text-decoration: none; white-space: nowrap; }
.bnode__chip:hover { background: var(--acc); color: #fff; }
.bc-port { fill: var(--bg-0); stroke: var(--acc); stroke-width: 2; cursor: crosshair; opacity: .55; transition: opacity .15s; }
.bc-node:hover .bc-port, .bc-node.sel .bc-port { opacity: 1; }
.bc-port:hover { fill: var(--acc); r: 9; }
.bc-resize { fill: var(--acc); opacity: 0; cursor: nwse-resize; }
.bc-node.sel .bc-resize { opacity: .8; }

/* ---- edges ---- */
.bc-edge__path { fill: none; stroke: var(--acc); stroke-width: 2.2; }
.bc-edge__hit { fill: none; stroke: transparent; stroke-width: 24; cursor: pointer; }
.bc-edge:hover .bc-edge__path { stroke-width: 3.2; filter: drop-shadow(0 0 5px var(--acc-glow)); }
.bc-edge__del { opacity: 0; pointer-events: none; transition: opacity .14s; cursor: pointer; }
.bc-edge:hover .bc-edge__del { opacity: 1; pointer-events: auto; }
.bc-edge__del-bg { fill: #b23a48; stroke: #fff; stroke-width: 1.5; }
.bc-edge__del:hover .bc-edge__del-bg { fill: #d8556a; }
.bc-edge__del-x { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.bc-edge__lbl { fill: var(--ink-1); font-family: 'Acrom'; font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #0a1024; stroke-width: 4px; }
.bc-edge__temp { fill: none; stroke: #4fc88a; stroke-width: 2.4; stroke-dasharray: 6 5; pointer-events: none; }
.bc-cursor-lbl { font-family: 'Acrom'; font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #0a1024; stroke-width: 3px; }

/* ---- inspector ---- */
.bc-inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 330px; z-index: 30;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border: 1px solid var(--acc);
  box-shadow: -14px 0 40px rgba(0,0,0,.5); padding: 16px; overflow-y: auto; }
.bc-ins__head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; color: var(--ink-2); margin-bottom: 12px; }
.bc-ins__x { background: none; border: 0; color: var(--ink-3); font-size: 16px; cursor: pointer; }
.bc-ins__x:hover { color: var(--ink-0); }
.bc-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.bc-f > span { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.bc-f input, .bc-f textarea, .bc-f select { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-0); font-family: 'Acrom'; font-size: 13px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.bc-f input:focus, .bc-f textarea:focus, .bc-f select:focus { border-color: var(--acc); outline: none; }
.bc-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-sw { width: 24px; height: 24px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; }
.bc-sw.on { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,.4); }
.bc-sw--clear { background: var(--bg-3); color: var(--ink-3); font-size: 9px; width: auto; padding: 0 8px; }
.bc-links { display: flex; flex-direction: column; gap: 4px; }
.bc-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 12px; color: var(--ink-1); }
.bc-link button { background: none; border: 0; color: var(--ink-3); cursor: pointer; }
.bc-link button:hover { color: var(--hl-red); }
.bc-link__empty { font-size: 11px; color: var(--ink-3); font-style: italic; }
.bc-ins__del { width: 100%; margin-top: 8px; color: var(--hl-red); border-color: var(--hl-red); }

/* ---- popmenu ---- */
.bc-pop { position: fixed; z-index: 9999; background: var(--bg-1); border: 1px solid var(--acc); box-shadow: 0 14px 40px rgba(0,0,0,.6); padding: 5px; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.bc-pop__i { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: none; border: 0; color: var(--ink-1); font-family: 'Acrom'; font-size: 13px; text-align: left; cursor: pointer; }
.bc-pop__i:hover { background: rgba(86,128,200,.18); color: var(--ink-0); }
.bc-pop__i.danger:hover { background: rgba(200,79,79,.2); color: var(--hl-red); }
.bc-pop__sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* ---- modal ---- */
.bc-modal-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(4,8,20,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.bc-modal { position: relative; width: min(560px, 92vw); max-height: 86vh; overflow-y: auto; background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border: 1px solid var(--acc); box-shadow: 0 30px 80px rgba(0,0,0,.7); padding: 24px; --cut: 18px; }
.bc-modal__x { position: absolute; right: 14px; top: 12px; background: none; border: 0; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.bc-modal__x:hover { color: var(--ink-0); }
.bc-modal__h { font-family: 'Acrom'; font-weight: 800; font-size: 18px; color: var(--ink-0); margin: 0 0 10px; }
.bc-modal__p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; }
.bc-modal__ta { width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-0); font-family: 'JetBrains Mono','Consolas',monospace; font-size: 13px; padding: 12px; line-height: 1.6; resize: vertical; }
.bc-modal__chk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin: 12px 0; }
.bc-modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.bc-modal__search, .bc-lp__url input { width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-0); font-family: 'Acrom'; font-size: 13px; padding: 10px 12px; margin-bottom: 12px; }
.bc-lp__list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.bc-lp__grp { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 3px; }
.bc-lp__item { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-1); font-family: 'Acrom'; font-size: 13px; text-align: left; cursor: pointer; }
.bc-lp__item:hover { border-color: var(--acc); color: var(--ink-0); }
.bc-lp__url { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.bc-lp__url input { margin-bottom: 0; }

@media (max-width: 980px) {
  .bc-wrap { grid-template-columns: 1fr; height: auto; }
  .bc-side { flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
  .bc-stage { height: 64vh; }
  .bc-inspector { width: 100%; }
}

/* ---- free-form tools toolbar group ---- */
.bc-tb-tools { display: flex; gap: 3px; align-items: center; padding: 0 8px; margin-left: 4px; border-left: 1px solid var(--line-1); }
.bc-tb-tools button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-1); font-family: 'Acrom'; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 6px; transition: all var(--t-fast); }
.bc-tb-tools button:hover { border-color: var(--acc); color: var(--ink-0); }
.bc-tb-tools button.on { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 0 12px var(--acc-glow); }

/* ---- free-form items ---- */
.bc-item { cursor: move; }
.bc-item__hit { stroke: transparent; stroke-width: 18; cursor: move; }
.bc-item--image image { filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.bc-item.sel image, .bc-item.sel rect, .bc-item.sel .bc-ftext { outline: none; }
.bc-ftext { width: 100%; height: 100%; box-sizing: border-box; font-family: 'Acrom'; color: #fff; padding: 6px 8px; line-height: 1.3; white-space: normal; word-break: break-word; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* мини-markdown в тексте объектов и заметках */
.bc-ftext .md-h1, .bnode__desc .md-h1 { font-size: 1.5em; font-weight: 800; margin: .12em 0; line-height: 1.2; }
.bc-ftext .md-h2, .bnode__desc .md-h2 { font-size: 1.28em; font-weight: 800; margin: .1em 0; line-height: 1.2; }
.bc-ftext .md-h3, .bnode__desc .md-h3 { font-size: 1.12em; font-weight: 700; margin: .08em 0; line-height: 1.2; }
.bc-ftext .md-q, .bnode__desc .md-q { margin: .15em 0; padding: .08em .55em; border-left: 3px solid var(--acc, #6f9bff); opacity: .9; font-style: italic; }
.bc-ftext .md-ul, .bc-ftext .md-ol, .bnode__desc .md-ul, .bnode__desc .md-ol { margin: .1em 0; padding-left: 1.3em; }
.bc-ftext .md-sp, .bnode__desc .md-sp { height: .5em; }
.bc-ftext code, .bnode__desc code { background: rgba(255,255,255,.12); padding: 0 .3em; border-radius: 4px; font-family: monospace; font-size: .92em; }
.bc-ftext strong, .bnode__desc strong { font-weight: 800; }
.bc-ftext em, .bnode__desc em { font-style: italic; }
.bc-md-hint { font-size: 10px; color: var(--ink-3); line-height: 1.4; margin: -2px 0 4px; opacity: .82; }
.bc-pen-preview { opacity: .9; pointer-events: none; }

/* ---- item selection handles ---- */
.bc-selbox { stroke: var(--acc-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bc-rotline { stroke: var(--acc-2); stroke-width: 1.5; opacity: .6; }
.bc-h { stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.bc-h-resize { fill: var(--acc-2); cursor: nwse-resize; }
.bc-h-rot { fill: var(--hl-orange); cursor: grab; }
.bc-h-start { fill: var(--hl-green); cursor: move; }
.bc-h-end { fill: var(--hl-red); cursor: move; }
.bc-h-arc { fill: var(--hl-orange); cursor: ns-resize; }

/* ---- item inspector extras ---- */
.bc-layerbtns { display: flex; gap: 6px; }
.bc-layerbtns .btn { flex: 1; }
.bc-f input[type="color"] { height: 34px; padding: 2px; cursor: pointer; }
.bc-f input[type="range"] { width: 100%; accent-color: var(--acc); }
.bc-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); margin-left: 8px; }

/* ---- asset library modal ---- */
.bc-lib-tabs { display: flex; gap: 5px; margin-bottom: 14px; }
.bc-lib-tabs button { flex: 1; padding: 9px; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-2); font-family: 'Acrom'; font-size: 12px; font-weight: 700; cursor: pointer; }
.bc-lib-tabs button.on { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border-color: var(--acc); color: var(--ink-0); }
.bc-lib-body { min-height: 200px; max-height: 56vh; overflow-y: auto; }
.bc-lib-up { padding: 24px; text-align: center; border: 1px dashed var(--line-2); }
.bc-lib-up input[type="file"] { color: var(--ink-1); font-family: 'Acrom'; margin-bottom: 12px; }
.bc-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bc-lib-cell { position: relative; aspect-ratio: 1; background: var(--bg-2); border: 1px solid var(--line-1); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bc-lib-cell:hover { border-color: var(--acc); box-shadow: 0 0 14px var(--acc-glow); }
.bc-lib-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bc-lib-cell--lbl { flex-direction: column; }
.bc-lib-cell--lbl span { font-size: 9px; color: var(--ink-2); margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Board builder — paint palette, icons, fullscreen (overhaul)
   ============================================================ */
.bc-ic { width: 16px; height: 16px; fill: currentColor; display: inline-block; vertical-align: middle; flex-shrink: 0; pointer-events: none; }
.btn .bc-ic, .bc-preset .bc-ic, .bc-lib-tabs .bc-ic, .bc-layerbtns .bc-ic, .bc-ins__del .bc-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.bc-side__head .bc-ic { margin-right: 2px; }

/* 3-column layout: boards | canvas | right palette+inspector */
.bc-wrap { grid-template-columns: 224px 1fr 236px; }
.bc-right { display: block; overflow-y: auto; border: 1px solid var(--line-1); background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); }
.bc-right .bc-inspector { position: static; width: auto; height: auto; box-shadow: none; border: 0; border-top: 1px solid var(--line-2); z-index: auto; padding: 14px; }
.bc-palette { padding: 12px; }

/* icon toolbar buttons */
.bc-tbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-1); cursor: pointer; border-radius: 6px; transition: all var(--t-fast); }
.bc-tbtn:hover { border-color: var(--acc); color: var(--ink-0); background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); }
.bc-tbtn--danger:hover { border-color: var(--hl-red); color: var(--hl-red); }
.bc-tbtn--pub.is-on { border-color: var(--hl-green); color: var(--hl-green); background: color-mix(in srgb, var(--hl-green) 14%, var(--bg-2)); }
.bc-boarditem__pub { margin-left: auto; color: var(--hl-green); font-size: 9px; line-height: 1; flex: 0 0 auto; }
.bc-tbtn .bc-ic { width: 17px; height: 17px; }

/* palette */
.bc-pal-grp { margin-bottom: 15px; }
.bc-pal-h { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.bc-pal-h em { font-style: normal; font-size: 8.5px; color: var(--acc-2); opacity: .8; text-transform: none; letter-spacing: 0; }
.bc-pal-row { display: flex; gap: 6px; }
.bc-pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bc-pal-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 5px; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-1); font-family: 'Acrom'; font-size: 10px; cursor: pointer; border-radius: 7px; transition: all var(--t-fast); text-align: center; line-height: 1.1; }
.bc-pal-row .bc-pal-btn { flex: 1; }
.bc-pal-btn .bc-ic, .bc-pal-btn .bc-pal-ic .bc-ic { width: 19px; height: 19px; }
.bc-pal-ic { display: inline-flex; }
.bc-pal-btn:hover { border-color: var(--acc); color: var(--ink-0); background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); }
.bc-pal-btn.on { border-color: var(--acc); background: var(--acc); color: #fff; box-shadow: 0 0 12px var(--acc-glow); }
.bc-pal-btn.on .bc-pal-ic { color: #fff !important; }
.bc-pal-make { cursor: grab; }
.bc-pal-make:active { cursor: grabbing; }

/* drag ghost (palette → canvas) */
.bc-drag-ghost { position: fixed; z-index: 10001; pointer-events: none; background: var(--acc); color: #fff; font-family: 'Acrom'; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.55); opacity: .94; }

/* icon library (search) */
.bc-modal__cnt { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.bc-ico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 10px; }
.bc-ico-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; background: var(--bg-2); border: 1px solid var(--line-1); cursor: pointer; border-radius: 7px; transition: all var(--t-fast); }
.bc-ico-cell:hover { border-color: var(--acc); box-shadow: 0 0 12px var(--acc-glow); }
.bc-ico-pre { width: 26px; height: 26px; fill: var(--ink-0); color: var(--ink-0); }
.bc-ico-cell span { font-size: 8.5px; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
img.bc-ico-pre { object-fit: contain; }
.bc-ico-sets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; max-height: 76px; overflow-y: auto; }
.bc-chip { font: inherit; font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-1); color: var(--ink-2); cursor: pointer; transition: all var(--t-fast); white-space: nowrap; }
.bc-chip:hover { border-color: var(--acc); color: var(--ink-0); }
.bc-chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }

/* опции пера (цвет + недавние + толщина) */
.bc-pen-opts { margin-top: 9px; padding: 9px; background: rgba(10,16,36,.5); border: 1px solid var(--line-1); border-radius: 9px; }
.bc-pen-row { display: flex; align-items: center; gap: 9px; }
.bc-pen-color { position: relative; width: 34px; height: 30px; border-radius: 8px; overflow: hidden; border: 2px solid var(--line-2); cursor: pointer; flex: 0 0 auto; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
.bc-pen-color input[type=color] { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border: 0; padding: 0; background: none; cursor: pointer; }
.bc-pen-recent { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.bc-pen-sw { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transition: transform var(--t-fast); }
.bc-pen-sw:hover { transform: scale(1.14); }
.bc-pen-sw.on { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 8px rgba(255,255,255,.5); }
.bc-pen-w { display: block; margin-top: 9px; font-size: 11px; color: var(--ink-2); }
.bc-pen-w span { display: block; margin-bottom: 3px; }
.bc-pen-w input[type=range] { width: 100%; }

/* перетаскивание файла на холст */
#bcStage.bc-dragover { outline: 3px dashed var(--acc, #6f9bff); outline-offset: -10px; box-shadow: inset 0 0 0 9999px rgba(40,70,140,.14); }

/* предупреждение для мелких экранов */
.bc-mobile-warn { display: none; }
body.bc-mwarn-dismissed .bc-mobile-warn { display: none !important; }
@media (max-width: 860px) {
  body:has([data-pane="boards"]:not(.hidden)) .bc-mobile-warn { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; background: rgba(6,10,24,.97); padding: 24px; }
}
.bc-mobile-warn__card { max-width: 430px; text-align: center; background: #0e1630; border: 1px solid var(--line-2, #2a3a63); border-radius: 16px; padding: 30px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.bc-mobile-warn__ic { margin-bottom: 12px; }
.bc-mobile-warn__ic .bc-ic { width: 52px; height: 52px; color: var(--acc, #6f9bff); }
.bc-mobile-warn h2 { font-size: 18px; color: #eef2ff; margin: 0 0 10px; }
.bc-mobile-warn p { font-size: 13.5px; line-height: 1.55; color: #c4cee8; margin: 0 0 18px; }
.bc-ai-hint { border-left: 2px solid var(--acc, #6f9bff); padding-left: 10px; background: rgba(86,128,200,.08); border-radius: 0 6px 6px 0; }

/* интерактивный тур */
.bc-tut-ring { position: fixed; z-index: 1800; border: 2px solid #6f9bff; border-radius: 12px; box-shadow: 0 0 0 4px rgba(111,155,255,.28), 0 0 22px rgba(111,155,255,.55); pointer-events: none; transition: all .25s cubic-bezier(.4,1,.4,1); animation: bcTutPulse 1.6s ease-in-out infinite; }
@keyframes bcTutPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(111,155,255,.28), 0 0 18px rgba(111,155,255,.45); } 50% { box-shadow: 0 0 0 7px rgba(111,155,255,.16), 0 0 30px rgba(111,155,255,.7); } }
.bc-tut-card { position: fixed; right: 22px; bottom: 22px; z-index: 1850; width: 320px; background: #0e1630; border: 1px solid var(--line-2, #2a3a63); border-radius: 14px; padding: 16px 17px; box-shadow: 0 20px 56px rgba(0,0,0,.6); animation: bcTutIn .26s ease; }
@keyframes bcTutIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bc-tut-top { display: flex; align-items: center; justify-content: space-between; }
.bc-tut-step { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8fa0c8; font-weight: 700; }
.bc-tut-x { background: none; border: 0; color: #8fa0c8; cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; }
.bc-tut-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.bc-tut-x .bc-ic { width: 15px; height: 15px; }
.bc-tut-dots { display: flex; gap: 5px; margin: 9px 0 11px; }
.bc-tut-dots span { width: 100%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.1); transition: background .2s; }
.bc-tut-dots span.now { background: #6f9bff; }
.bc-tut-dots span.ok { background: #46c489; }
.bc-tut-h { margin: 0 0 7px; font-size: 15px; color: #eef2ff; }
.bc-tut-p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #c4cee8; }
.bc-tut-p b { color: #eef2ff; }
.bc-tut-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.bc-tut-state { font-size: 11px; color: #8fa0c8; }
.bc-tut-state.ok { color: #46c489; font-weight: 700; }
.bc-ins__x .bc-ic, .bc-modal__x .bc-ic { width: 16px; height: 16px; }
.bc-link button .bc-ic, .bc-preset__del .bc-ic { width: 12px; height: 12px; }

/* fullscreen mode — board pane covers the viewport */
body.bc-fullscreen .boards-pane { position: fixed; inset: 0; z-index: 300; background: var(--bg-0); padding: 12px; margin: 0; overflow: hidden; }
body.bc-fullscreen .bc-wrap { height: calc(100vh - 24px); min-height: 0; grid-template-columns: 1fr 264px; }
/* во весь экран — как на странице ЛОР: прячем левый сайдбар (доски/пресеты);
   сама панель уже fixed inset:0 поверх админ-навигации */
body.bc-fullscreen .bc-side { display: none; }

@media (max-width: 980px) {
  .bc-wrap { grid-template-columns: 1fr; }
  .bc-right { flex-direction: column; }
}

/* 3D-model board item */
.bc-fmodel { width: 100%; height: 100%; box-sizing: border-box; background: radial-gradient(circle at 50% 35%, rgba(86,128,200,.14), rgba(10,16,36,.88)); border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.bc-fmodel--free { background: transparent; border: 0; }
.bc-fmodel model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.bc-lib-cube { display: flex; align-items: center; justify-content: center; }
.bc-lib-cube .bc-ic { width: 30px; height: 30px; color: var(--acc-2); }

/* множественное выделение рамкой */
.bc-marquee { fill: rgba(111,155,255,.12); stroke: #6f9bff; stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; vector-effect: non-scaling-stroke; }
.bc-node.multi .bnode { box-shadow: 0 0 0 2px #6f9bff, 0 0 16px rgba(111,155,255,.45) !important; }
.bc-item.multi { filter: drop-shadow(0 0 2px #6f9bff) drop-shadow(0 0 4px rgba(111,155,255,.6)); }

/* кастомные попапы (prompt/confirm/alert) + тосты */
.bc-pop-catch { position: fixed; inset: 0; z-index: 400; }
.bc-pop-catch .bc-pop { position: fixed; min-width: 244px; max-width: 340px; background: #0e1630; border: 1px solid var(--line-2, #2a3a63); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 16px; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .14s ease, transform .14s ease; }
.bc-pop-catch .bc-pop.on { opacity: 1; transform: translateY(0) scale(1); }
.bc-pop-catch .bc-pop--wide { max-width: 560px; }
.bc-pop-catch .bc-pop--center { left: 50% !important; top: 50% !important; transform: translate(-50%, -48%) scale(.98); }
.bc-pop-catch .bc-pop--center.on { transform: translate(-50%, -50%) scale(1); }
.bc-pop__h { font-weight: 800; font-size: 13px; letter-spacing: .02em; color: #eef2ff; margin-bottom: 10px; text-transform: uppercase; }
.bc-pop__b { font-size: 13px; color: #c4cee8; line-height: 1.5; margin-bottom: 4px; }
.bc-pop__lbl { font-size: 11px; color: #8fa0c8; margin: 9px 0 4px; }
.bc-pop__input { width: 100%; box-sizing: border-box; background: #0a1024; border: 1px solid var(--line-2, #2a3a63); border-radius: 8px; color: #eef2ff; padding: 9px 11px; font: inherit; font-size: 13px; }
.bc-pop__input:focus { outline: none; border-color: var(--acc-2, #6f9bff); box-shadow: 0 0 0 2px rgba(111,155,255,.2); }
textarea.bc-pop__input { resize: vertical; line-height: 1.45; }
.bc-pop__row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.bc-btn-danger { background: #b23a48 !important; border-color: #d8556a !important; color: #fff !important; }
.bc-btn-danger:hover { filter: brightness(1.12); }
.bc-toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.bc-toast { background: #0e1630; border: 1px solid var(--line-2, #2a3a63); border-left: 3px solid var(--acc-2, #6f9bff); border-radius: 9px; padding: 10px 16px; font-size: 12.5px; color: #eef2ff; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; max-width: 460px; }
.bc-toast.on { opacity: 1; transform: translateY(0); }
.bc-toast--err { border-left-color: #e0556a; }
.bc-toast--warn { border-left-color: #e0a23a; }
.bc-toast--ok { border-left-color: #46c489; }

/* ============================================================
   СБ «Оперативный реестр» — делопроизводство (me-sb / sb-hq)
   ============================================================ */
.btn--sb { background: linear-gradient(180deg, #e0463a, #b8241b); border: 1px solid #eb4034; color: #fff; box-shadow: 0 0 16px rgba(235,64,52,0.28); }
.btn--sb:hover { background: linear-gradient(180deg, #ee5347, #cf2a20); box-shadow: 0 0 22px rgba(235,64,52,0.45); }

.sbc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-bottom: 18px; }
.sbc-head > :first-child { justify-self: start; }
.sbc-head > :last-child { justify-self: end; }
.sbc-head__title { min-width: 0; text-align: center; }
.sbc-kicker { display: block; font-family: 'Acrom'; font-weight: 800; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #eb6a60; }
.sbc-h1 { margin: 2px 0 0; font-family: 'Acrom'; font-weight: 800; font-size: 24px; color: var(--ink-0); letter-spacing: 1px; }

.sbc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sbc-tab { background: var(--bg-1); border: 1px solid var(--line-2); color: var(--ink-3); padding: 7px 16px; font-family: 'Acrom'; font-weight: 700; font-size: 12px; letter-spacing: 1px; cursor: pointer; }
.sbc-tab.is-active { background: #b8241b; border-color: #eb4034; color: #fff; }

.sbc-list { display: flex; flex-direction: column; gap: 8px; }
.sbc-row { display: flex; align-items: center; gap: 16px; padding: 13px 18px; background: var(--bg-1); border: 1px solid var(--line-2); border-left: 3px solid #b8241b; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sbc-row:hover { border-color: #eb4034; box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
.sbc-row__no { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 700; color: #eb6a60; min-width: 54px; }
.sbc-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbc-row__main b { color: var(--ink-0); font-family: 'Acrom'; font-weight: 700; font-size: 15px; }
.sbc-row__main small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-row__date { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.sbc-badge { font-family: 'Acrom'; font-weight: 800; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.sbc-badge--lg { font-size: 12px; padding: 7px 14px; }
.sbc-badge.is-inv { background: rgba(243,149,86,0.12); border-color: var(--hl-orange); color: var(--hl-orange); }
.sbc-badge.is-hq { background: rgba(82,119,198,0.14); border-color: var(--acc); color: var(--acc-2); }
.sbc-badge.is-closed { background: rgba(109,213,140,0.12); border-color: var(--hl-green); color: var(--hl-green); }

.sbc-empty, .sbc-muted { color: var(--ink-3); font-size: 13px; padding: 10px 0; }
.sbc-muted { padding: 0; }
.sbc-err { color: var(--hl-red); padding: 16px; }

.sbc-form { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.sbc-field { display: flex; flex-direction: column; gap: 8px; }
.sbc-lab { font-family: 'Acrom'; font-weight: 800; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #eb6a60; }
.sbc-input { background: var(--bg-0); border: 1px solid var(--line-2); color: var(--ink-0); padding: 10px 12px; font-size: 14px; font-family: inherit; }
.sbc-input:focus { outline: none; border-color: #eb4034; }
.sbc-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.sbc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .sbc-cols { grid-template-columns: 1fr; } }
.sbc-radio, .sbc-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-1); line-height: 1.4; cursor: pointer; padding: 5px 0; }
.sbc-radio input { margin-top: 2px; accent-color: #eb4034; }
/* кастомный toggle-слайдер для обстоятельств (вместо стандартного чекбокса) */
.sbc-chk input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 36px; height: 20px; border-radius: 11px; margin: 1px 0 0;
  background: var(--bg-1); border: 1px solid var(--line-2); position: relative; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.sbc-chk input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-3); transition: transform .16s, background .16s, box-shadow .16s;
}
.sbc-chk input[type="checkbox"]:hover { border-color: #eb4034; }
.sbc-chk input[type="checkbox"]:checked { background: rgba(235,64,52,0.20); border-color: #eb4034; }
.sbc-chk input[type="checkbox"]:checked::before { transform: translateX(16px); background: #eb4034; box-shadow: 0 0 8px rgba(235,64,52,0.6); }
.sbc-chk input[type="checkbox"]:focus-visible { outline: 2px solid #eb4034; outline-offset: 2px; }
.sbc-chk:has(input:checked) { color: var(--ink-0); }
.sbc-circ { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; padding: 8px 10px; background: var(--bg-0); border: 1px solid var(--line-2); scrollbar-width: thin; scrollbar-color: rgba(235,64,52,0.45) transparent; }
.sbc-circ::-webkit-scrollbar { width: 8px; }
.sbc-circ::-webkit-scrollbar-track { background: transparent; }
.sbc-circ::-webkit-scrollbar-thumb { background: rgba(235,64,52,0.4); border-radius: 4px; }
.sbc-circ::-webkit-scrollbar-thumb:hover { background: rgba(235,64,52,0.65); }
.sbc-article-info { font-size: 12.5px; color: var(--ink-2); }
.sbc-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.sbc-msg { font-size: 12px; color: var(--ink-3); }
.sbc-msg--ok { color: var(--hl-green); }
.sbc-msg--no { color: var(--hl-red); }

.sbc-vio-results { display: flex; flex-direction: column; gap: 4px; }
.sbc-vio { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--bg-1); border: 1px solid var(--line-2); color: inherit; padding: 8px 12px; cursor: pointer; text-align: left; }
.sbc-vio:hover { border-color: #eb4034; }
.sbc-vio b { font-size: 14px; color: var(--ink-0); }
.sbc-vio small { font-size: 11px; color: var(--ink-3); }
.sbc-vio-card { background: var(--bg-0); border: 1px solid #b8241b; padding: 12px 14px; }
.sbc-vio-card__main { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sbc-vio-card__main b { font-size: 16px; color: var(--ink-0); font-family: 'Acrom'; font-weight: 700; }
.sbc-vio-card__main small { font-size: 12px; color: var(--ink-2); }
.sbc-vio-card__main code { font-size: 10px; color: var(--ink-3); font-family: 'JetBrains Mono', Consolas, monospace; }
.sbc-vio-hist { border-top: 1px solid var(--line-1); padding-top: 8px; }
.sbc-hist-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.sbc-hist-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-1); padding: 3px 0; text-decoration: none; }
a.sbc-hist-row:hover { color: var(--acc-2); }
.sbc-hist-clean { font-size: 12.5px; color: var(--hl-green); }
.sbc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sbc-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-1); border: 1px solid var(--line-2); padding: 4px 10px; font-size: 12px; color: var(--ink-1); }
.sbc-chip button { background: none; border: none; color: var(--hl-red); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.sbc-chip--ro { border-color: var(--line-1); }

.sbc-detail { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.sbc-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 820px; margin: 0 auto 14px; }
.sbc-dgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; background: var(--bg-1); border: 1px solid var(--line-2); padding: 16px 18px; }
@media (max-width: 640px) { .sbc-dgrid { grid-template-columns: 1fr 1fr; } }
.sbc-dgrid > div, .sbc-block { display: flex; flex-direction: column; gap: 3px; }
.sbc-dl { font-family: 'Acrom'; font-weight: 800; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.sbc-dv { font-size: 14px; color: var(--ink-0); }
.sbc-block { background: var(--bg-1); border: 1px solid var(--line-2); padding: 14px 18px; }
.sbc-pre { white-space: pre-wrap; line-height: 1.6; color: var(--ink-1); }
.sbc-cat { font-size: 11px; color: var(--acc-2); border: 1px solid var(--line-2); padding: 1px 6px; }
.sbc-pun { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.sbc-circ-view { margin: 0; padding-left: 18px; color: var(--ink-1); font-size: 13px; line-height: 1.6; }
.sbc-circ-view.is-agg li { color: var(--hl-orange); }
.sbc-circ-view.is-mit li { color: var(--hl-green); }
.sbc-hq { background: var(--bg-0); border: 1px solid var(--line-2); border-left: 3px solid var(--acc); padding: 14px 18px; }
.sbc-hq--filled { border-left-color: var(--hl-green); }
.sbc-hq__lab { font-family: 'Acrom'; font-weight: 800; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--acc-2); margin-bottom: 6px; }
.sbc-hq__txt { font-size: 14px; color: var(--ink-0); white-space: pre-wrap; line-height: 1.6; }
.sbc-hq__by { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.sbc-detail--hq { max-width: 100%; margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.sbc-row--hq { cursor: pointer; }
.sbc-admin-note { max-width: 820px; margin: 0 auto 16px; padding: 10px 16px; background: rgba(235,64,52,0.08); border: 1px solid #b8241b; border-left: 3px solid #eb4034; font-size: 12.5px; color: var(--ink-2); }
.sbc-admin-note a { color: #eb6a60; font-weight: 700; text-decoration: none; }
.sbc-admin-note a:hover { text-decoration: underline; }
.sbc-wanted { margin-top: 4px; }
/* СБ-дела в модалке Фракции («Личное дело») */
.brig-subtitle { font-family: 'Acrom'; font-weight: 800; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
.brig-cases + .brig-subtitle, .brig-cases ~ .brig-subtitle { margin-top: 16px; }
.brig-rec--case { border-left: 2px solid #eb4034; padding-left: 10px; }
/* Личное дело игрока — модалка in-place на /me/sb */
.sbc-detail-actions { display: flex; justify-content: center; }
.sbc-dossier__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.sbc-dossier__x { background: none; border: none; color: var(--ink-3); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sbc-dossier__x:hover { color: var(--hl-red); }
.sbc-dossier__body { overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(235,64,52,0.45) transparent; }
.sbc-dossier__body::-webkit-scrollbar { width: 8px; }
.sbc-dossier__body::-webkit-scrollbar-thumb { background: rgba(235,64,52,0.4); border-radius: 4px; }
.sbc-dossier__sec { margin-top: 14px; }
.sbc-dossier__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sbc-dossier__list li { background: var(--bg-0); border: 1px solid var(--line-1); padding: 8px 12px; font-size: 13px; color: var(--ink-1); line-height: 1.45; }
.sbc-dossier__meta { font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }
.sbc-dossier__warn { border-left: 2px solid var(--hl-orange); }
.sbc-dossier__case { display: block; text-decoration: none; color: var(--ink-1); }
.sbc-dossier__case:hover { color: var(--acc-2); }
.sbc-head__r { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Доказательная база дела */
.sbc-ev-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sbc-ev { position: relative; }
.sbc-ev--img { width: 128px; }
.sbc-ev--img img { width: 128px; height: 92px; object-fit: cover; border: 1px solid var(--line-2); display: block; background: var(--bg-0); }
.sbc-ev--img:hover img { border-color: #eb4034; }
.sbc-ev__cap { font-size: 10px; color: var(--ink-3); margin-top: 3px; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbc-ev--link { display: flex; align-items: center; background: var(--bg-0); border: 1px solid var(--line-2); padding: 8px 12px; font-size: 13px; max-width: 100%; }
.sbc-ev--link a { color: var(--acc-2); text-decoration: none; word-break: break-all; }
.sbc-ev--link a:hover { color: #eb6a60; }
.sbc-ev__del { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--hl-red); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.sbc-ev--link .sbc-ev__del { position: static; margin-left: 10px; border: none; background: none; }
.sbc-ev__del:hover { background: var(--hl-red); color: #fff; }
.sbc-ev-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sbc-ev-url { flex: 1 1 200px; min-width: 160px; }
.sbc-ev-cap { width: 160px; }