:root {
  color-scheme: dark;
  --accent-rgb: 143, 199, 140;
  --amber-rgb: 212, 163, 94;
  --danger-rgb: 204, 113, 103;
  --line-rgb: 151, 185, 151;
  --bg-0: #070907;
  --bg-1: #0b0f0c;
  --panel: rgba(15, 21, 17, .82);
  --panel-2: rgba(20, 27, 22, .92);
  --panel-3: rgba(25, 33, 27, .72);
  --line: rgba(var(--line-rgb), .14);
  --line-strong: rgba(var(--line-rgb), .27);
  --text: #d9e3d8;
  --text-strong: #d5dfd4;
  --text-soft: #b9c5b9;
  --text-muted: #859486;
  --text-dim: #67786a;
  --muted: var(--text-muted);
  --green: #8fc78c;
  --green-dim: #5e8f61;
  --amber: #d4a35e;
  --amber-dim: #8c6a3a;
  --amber-text: #d8c09d;
  --accent-text-strong: #cde8ca;
  --danger: #cc7167;
  --st-new: #d4a35e;
  --st-review: #7fa9d6;
  --st-approved: #8fc78c;
  --st-progress: #6fb7c9;
  --st-done: #7ecb8a;
  --st-rejected: #cc7167;
  --glow-green: rgba(var(--accent-rgb), .16);
  --glow-amber: rgba(var(--amber-rgb), .14);
  --bar-bg: rgba(7, 10, 8, .82);
  --bar-bg-solid: rgba(7, 10, 8, .96);
  --input-bg: rgba(9, 13, 10, .82);
  --input-bg-focus: rgba(12, 18, 14, .94);
  --surface-low: rgba(8, 12, 9, .45);
  --inset-bg: rgba(0, 0, 0, .12);
  --tile-bg: rgba(10, 14, 11, .75);
  --table-head: #151d17;
  --hover-bg: rgba(255, 255, 255, .02);
  --hover-bg-strong: rgba(255, 255, 255, .035);
  --card-gradient: linear-gradient(160deg, rgba(28, 37, 30, .72), rgba(11, 15, 12, .88));
  --stat-gradient: linear-gradient(180deg, rgba(21, 28, 23, .75), rgba(10, 14, 11, .7));
  --hero-gradient: linear-gradient(115deg, rgba(26, 34, 27, .82), rgba(9, 12, 10, .92) 62%);
  --radius: 14px;
  --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
  --sans: "Segoe UI", "Inter", Roboto, Arial, sans-serif;
}

/* ── Темы оформления ────────────────────────────────────────────────────── */
html[data-theme="blue"] {
  color-scheme: dark;
  --accent-rgb: 110, 168, 232;
  --amber-rgb: 216, 171, 104;
  --danger-rgb: 224, 122, 122;
  --line-rgb: 125, 165, 215;
  --bg-0: #060a11;
  --bg-1: #0a111c;
  --panel: rgba(12, 20, 32, .84);
  --panel-2: rgba(16, 26, 40, .94);
  --panel-3: rgba(17, 28, 43, .74);
  --text: #dce8f5;
  --text-strong: #e4eefb;
  --text-soft: #b3c6da;
  --text-muted: #8199b3;
  --text-dim: #637b96;
  --green: #6ea8e8;
  --green-dim: #4f7fae;
  --amber: #d8ab68;
  --amber-dim: #92703c;
  --amber-text: #e5cda6;
  --accent-text-strong: #cfe6ff;
  --danger: #e07a7a;
  --bar-bg: rgba(6, 10, 17, .84);
  --bar-bg-solid: rgba(6, 10, 17, .97);
  --input-bg: rgba(8, 14, 23, .86);
  --input-bg-focus: rgba(11, 19, 31, .96);
  --surface-low: rgba(8, 14, 23, .5);
  --inset-bg: rgba(2, 6, 12, .22);
  --tile-bg: rgba(9, 16, 26, .8);
  --table-head: #101b29;
  --hover-bg: rgba(150, 190, 240, .04);
  --hover-bg-strong: rgba(150, 190, 240, .07);
  --card-gradient: linear-gradient(160deg, rgba(21, 35, 53, .78), rgba(8, 15, 25, .9));
  --stat-gradient: linear-gradient(180deg, rgba(18, 30, 46, .8), rgba(8, 14, 23, .74));
  --hero-gradient: linear-gradient(115deg, rgba(20, 33, 50, .84), rgba(7, 12, 20, .94) 62%);
}
html[data-theme="white"] {
  color-scheme: light;
  --accent-rgb: 47, 122, 68;
  --amber-rgb: 154, 106, 36;
  --danger-rgb: 176, 62, 54;
  --line-rgb: 52, 82, 60;
  --bg-0: #eef1ec;
  --bg-1: #e3e9e1;
  --panel: rgba(255, 255, 255, .82);
  --panel-2: rgba(255, 255, 255, .94);
  --panel-3: rgba(250, 252, 249, .8);
  --line: rgba(var(--line-rgb), .18);
  --line-strong: rgba(var(--line-rgb), .32);
  --text: #1c2a20;
  --text-strong: #142019;
  --text-soft: #3d4e42;
  --text-muted: #617166;
  --text-dim: #6f8074;
  --green: #2f7a44;
  --green-dim: #3f6b4c;
  --amber: #996823;
  --amber-dim: #7c5520;
  --amber-text: #6d4b18;
  --accent-text-strong: #1f5c32;
  --danger: #b03e36;
  --st-new: #96661f;
  --st-review: #356fa8;
  --st-approved: #2f7a44;
  --st-progress: #2a7c90;
  --st-done: #2f7a44;
  --st-rejected: #b03e36;
  --bar-bg: rgba(248, 250, 247, .9);
  --bar-bg-solid: rgba(248, 250, 247, .98);
  --input-bg: rgba(255, 255, 255, .9);
  --input-bg-focus: #ffffff;
  --surface-low: rgba(255, 255, 255, .68);
  --inset-bg: rgba(37, 66, 45, .045);
  --tile-bg: rgba(255, 255, 255, .9);
  --table-head: #e6ece4;
  --hover-bg: rgba(37, 66, 45, .045);
  --hover-bg-strong: rgba(37, 66, 45, .075);
  --card-gradient: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(243, 247, 242, .96));
  --stat-gradient: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 245, 239, .92));
  --hero-gradient: linear-gradient(115deg, rgba(255, 255, 255, .96), rgba(236, 242, 234, .94) 62%);
}
html[data-theme="pink"] {
  color-scheme: dark;
  --accent-rgb: 229, 138, 181;
  --amber-rgb: 219, 170, 111;
  --danger-rgb: 232, 118, 118;
  --line-rgb: 214, 150, 184;
  --bg-0: #0d070d;
  --bg-1: #150b13;
  --panel: rgba(28, 15, 25, .84);
  --panel-2: rgba(35, 19, 31, .94);
  --panel-3: rgba(38, 21, 34, .74);
  --text: #f2dfea;
  --text-strong: #f8eaf2;
  --text-soft: #d6bccb;
  --text-muted: #ab8b9c;
  --text-dim: #846777;
  --green: #e58ab5;
  --green-dim: #a96187;
  --amber: #dbaa6f;
  --amber-dim: #987347;
  --amber-text: #e8cda8;
  --accent-text-strong: #ffd8ea;
  --danger: #e87676;
  --bar-bg: rgba(13, 7, 13, .85);
  --bar-bg-solid: rgba(13, 7, 13, .97);
  --input-bg: rgba(21, 11, 19, .86);
  --input-bg-focus: rgba(27, 14, 24, .96);
  --surface-low: rgba(22, 12, 20, .52);
  --inset-bg: rgba(0, 0, 0, .2);
  --tile-bg: rgba(24, 13, 21, .8);
  --table-head: #24131f;
  --hover-bg: rgba(255, 205, 230, .04);
  --hover-bg-strong: rgba(255, 205, 230, .075);
  --card-gradient: linear-gradient(160deg, rgba(42, 23, 37, .78), rgba(17, 9, 16, .9));
  --stat-gradient: linear-gradient(180deg, rgba(37, 20, 32, .8), rgba(17, 9, 16, .74));
  --hero-gradient: linear-gradient(115deg, rgba(40, 22, 35, .84), rgba(14, 8, 13, .94) 62%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg-0); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background: var(--bg-0);
  font: 15px/1.55 var(--sans);
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
::selection { background: rgba(var(--amber-rgb), .3); color: #fff; }
a { color: var(--green); }
button, input, select { font: inherit; }

/* ── Atmosphere ─────────────────────────────────────────────────────────── */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-0);
}
.bg-room {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(680px 460px at 18% 22%, rgba(92, 128, 93, .13), transparent 65%),
    radial-gradient(520px 400px at 82% 14%, rgba(var(--amber-rgb), .09), transparent 68%),
    radial-gradient(900px 620px at 50% 105%, rgba(22, 38, 29, .6), transparent 70%),
    linear-gradient(180deg, #0b100c 0%, #080b09 50%, #050706 100%);
}
.bg-room::before {
  content: "";
  position: absolute;
  left: -5%; right: -5%; bottom: 4%;
  height: 36%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(2, 4, 3, .55) 35%, rgba(2, 4, 3, .9) 100%),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(120, 150, 120, .035) 78px 80px, transparent 80px 160px);
  transform: perspective(700px) rotateX(58deg);
  transform-origin: bottom;
  filter: blur(.4px);
}
.bg-room::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, transparent 12%, transparent 88%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse at 50% 30%, transparent 25%, rgba(0,0,0,.34) 100%);
}
.bg-grid {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 35%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 15%, transparent 72%);
}
.bg-fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .5;
  will-change: transform;
}
.bg-fog-a {
  width: 70vw; height: 32vw;
  left: -18vw; top: 22%;
  background: radial-gradient(ellipse, rgba(93, 132, 100, .14), transparent 70%);
  animation: fogDrift 34s ease-in-out infinite alternate;
}
.bg-fog-b {
  width: 62vw; height: 28vw;
  right: -16vw; top: 6%;
  background: radial-gradient(ellipse, rgba(var(--amber-rgb), .09), transparent 70%);
  animation: fogDrift 46s ease-in-out infinite alternate-reverse;
}
.bg-light {
  position: absolute;
  width: 52vw; height: 52vw;
  right: -10vw; top: -28vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--amber-rgb), .12), transparent 62%);
  filter: blur(28px);
  animation: lightPulse 14s ease-in-out infinite;
}
.bg-monitor {
  position: absolute;
  border: 1px solid rgba(var(--accent-rgb), .1);
  border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb), .05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(20, 40, 26, .24), rgba(5, 8, 6, .08));
  box-shadow: 0 0 28px rgba(var(--accent-rgb), .045), inset 0 0 26px rgba(var(--accent-rgb), .035);
  animation: monitorFlicker 11s steps(1, end) infinite;
}
.monitor-a { width: 18vw; height: 10vw; left: 3vw; top: 16%; transform: rotate(-2deg); }
.monitor-b { width: 13vw; height: 8vw; right: 5vw; top: 30%; transform: rotate(2deg); animation-delay: -4s; }
.bg-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 28vh;
  top: -30vh;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .025), transparent);
  animation: scanDown 18s linear infinite;
}
.bg-particles { position: absolute; inset: 0; }
.bg-particles span {
  position: absolute;
  width: var(--size, 2px);
  height: var(--size, 2px);
  left: var(--x, 50%);
  top: 105%;
  border-radius: 50%;
  background: rgba(194, 220, 193, var(--alpha, .25));
  box-shadow: 0 0 6px rgba(var(--accent-rgb), .35);
  animation: dustFloat var(--duration, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: .0;
}
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, .55) 100%);
}

/* Цветовые варианты фоновой сцены */
html[data-theme="white"] .bg-scene { background: #eef1ec; }
html[data-theme="white"] .bg-room {
  background:
    radial-gradient(680px 460px at 18% 22%, rgba(80, 140, 95, .1), transparent 65%),
    radial-gradient(520px 400px at 82% 14%, rgba(190, 140, 60, .09), transparent 68%),
    radial-gradient(900px 620px at 50% 105%, rgba(190, 205, 190, .4), transparent 70%),
    linear-gradient(180deg, #f7f9f5 0%, #ebf0e8 52%, #e2e8df 100%);
}
html[data-theme="white"] .bg-room::before { opacity: .22; }
html[data-theme="white"] .bg-room::after {
  background:
    linear-gradient(90deg, rgba(214, 221, 212, .55) 0%, transparent 12%, transparent 88%, rgba(214, 221, 212, .55) 100%),
    radial-gradient(ellipse at 50% 30%, transparent 32%, rgba(232, 237, 229, .4) 100%);
}
html[data-theme="white"] .bg-grid {
  opacity: .75;
  background-image:
    linear-gradient(rgba(52, 82, 60, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 82, 60, .055) 1px, transparent 1px);
}
html[data-theme="white"] .bg-fog-a {
  background: radial-gradient(ellipse, rgba(80, 140, 95, .1), transparent 70%);
}
html[data-theme="white"] .bg-fog-b {
  background: radial-gradient(ellipse, rgba(190, 140, 60, .08), transparent 70%);
}
html[data-theme="white"] .bg-light {
  background: radial-gradient(circle, rgba(200, 150, 60, .14), transparent 62%);
}
html[data-theme="white"] .bg-monitor { display: none; }
html[data-theme="white"] .bg-scanline { opacity: .35; }
html[data-theme="white"] .bg-particles span {
  background: rgba(74, 104, 78, var(--alpha, .22));
  box-shadow: 0 0 6px rgba(74, 104, 78, .18);
}
html[data-theme="white"] .bg-vignette {
  background: radial-gradient(ellipse at 50% 40%, transparent 48%, rgba(176, 188, 174, .3) 100%);
}
html[data-theme="blue"] .bg-fog-a {
  background: radial-gradient(ellipse, rgba(80, 130, 200, .16), transparent 70%);
}
html[data-theme="blue"] .bg-room {
  background:
    radial-gradient(680px 460px at 18% 22%, rgba(70, 120, 190, .14), transparent 65%),
    radial-gradient(520px 400px at 82% 14%, rgba(216, 171, 104, .08), transparent 68%),
    radial-gradient(900px 620px at 50% 105%, rgba(18, 32, 50, .62), transparent 70%),
    linear-gradient(180deg, #0a111c 0%, #070c14 50%, #04070c 100%);
}
html[data-theme="blue"] .bg-particles span { background: rgba(190, 215, 245, var(--alpha, .25)); }
html[data-theme="pink"] .bg-fog-a {
  background: radial-gradient(ellipse, rgba(200, 100, 150, .16), transparent 70%);
}
html[data-theme="pink"] .bg-room {
  background:
    radial-gradient(680px 460px at 18% 22%, rgba(180, 90, 140, .14), transparent 65%),
    radial-gradient(520px 400px at 82% 14%, rgba(219, 170, 111, .08), transparent 68%),
    radial-gradient(900px 620px at 50% 105%, rgba(45, 20, 38, .6), transparent 70%),
    linear-gradient(180deg, #150b13 0%, #0f070e 50%, #090408 100%);
}
html[data-theme="pink"] .bg-particles span { background: rgba(245, 205, 226, var(--alpha, .25)); }

/* ── Top bar and navigation ─────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(14px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background: var(--bar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .28), transparent);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(var(--accent-rgb), .26);
  border-radius: 12px;
  color: var(--green);
  background: linear-gradient(145deg, rgba(28, 43, 32, .85), rgba(10, 15, 12, .9));
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .06), 0 0 24px rgba(var(--accent-rgb), .04);
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand h1 { margin: 0; font-size: 19px; letter-spacing: .16em; font-weight: 650; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: statusPulse 3.5s ease-in-out infinite;
}
.status-text {
  font: 10px/1 var(--mono);
  letter-spacing: .15em;
  color: var(--green-dim);
}
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 480px;
  max-width: 760px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--input-bg);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.search:focus-within {
  border-color: rgba(var(--accent-rgb), .42);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .06), 0 0 24px rgba(var(--accent-rgb), .05);
}
.search-icon { width: 17px; height: 17px; color: var(--green-dim); flex: 0 0 auto; }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  letter-spacing: .01em;
}
.search input::placeholder { color: var(--text-dim); }
.search button {
  display: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 21px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.search.has-value button { display: block; }
.tabs {
  position: sticky;
  top: var(--topbar-h, 74px);
  z-index: 25;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px clamp(14px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  background: var(--bar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .28) transparent;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .22); border-radius: 4px; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s, transform .12s;
}
.tab:hover { color: var(--text); border-color: var(--line); background: var(--hover-bg); }
.tab.active {
  color: var(--green);
  border-color: rgba(var(--accent-rgb), .26);
  background: rgba(var(--accent-rgb), .07);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), .18);
}
.tab:active { transform: scale(.97); }
.tab .icon { width: 15px; height: 15px; opacity: .85; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.app {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: 22px clamp(14px, 3vw, 30px) 80px;
  min-height: 70vh;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 6px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  animation: fadeUp .35s both;
}
.section-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
}
.section-head h2 .icon { color: var(--green); width: 20px; height: 20px; }
.section-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px;
  color: var(--text-muted);
  font: 10.5px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.section-head .section-count {
  margin-left: auto;
  font: 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--green-dim);
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 13px;
}
.card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    var(--card-gradient);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
  transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
  animation: cardIn .38s both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .22), transparent);
  opacity: .7;
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24), 0 0 30px rgba(var(--accent-rgb), .035);
}
.card:active { transform: translateY(0) scale(.995); }
.card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}
.card h3 .icon { color: var(--green); width: 18px; height: 18px; flex: 0 0 auto; }
.card h4 {
  margin: 14px 0 6px;
  color: var(--green-dim);
  font: 10.5px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card .sub { color: var(--muted); font-size: 11.5px; margin-bottom: 9px; }
.card p { margin: 7px 0; color: var(--text-soft); font-size: 13.5px; overflow-wrap: anywhere; }
.card .description { color: var(--muted); font-size: 12.5px; }
.card-top { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px; }
.card-top > .card-title { min-width: 0; flex: 1; }
.card-title h3 { margin: 0 0 2px; }
.record {
  font: 10px/1.2 var(--mono);
  letter-spacing: .08em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--green);
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), .12), transparent 70%),
    var(--tile-bg);
  box-shadow: inset 0 0 16px rgba(var(--accent-rgb), .035);
}
.icon-tile .icon { width: 22px; height: 22px; }
.icon-tile.amber { color: var(--amber); background: radial-gradient(circle at 30% 20%, rgba(var(--amber-rgb), .13), transparent 70%), var(--tile-bg); }
.icon-tile.danger { color: var(--danger); background: radial-gradient(circle at 30% 20%, rgba(var(--danger-rgb), .12), transparent 70%), var(--tile-bg); }
.icon-tile.muted { color: var(--text-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.chip {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-muted);
  background: var(--hover-bg);
  font: 10.5px/1.35 var(--mono);
  letter-spacing: .02em;
}
.chip.good { color: var(--green); border-color: rgba(var(--accent-rgb), .22); background: rgba(var(--accent-rgb), .05); }
.chip.warn { color: var(--amber); border-color: rgba(var(--amber-rgb), .24); background: rgba(var(--amber-rgb), .05); }
.chip.danger { color: var(--danger); border-color: rgba(var(--danger-rgb), .22); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 11px 0; }
.stat { padding-top: 6px; border-top: 1px dashed rgba(var(--line-rgb), .11); }
.stat b {
  display: block;
  margin-bottom: 1px;
  color: var(--text-dim);
  font: 9.5px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
.stat span { font-size: 13.5px; color: var(--text-strong); }

/* ── Overview ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(160px, .55fr);
  gap: 20px;
  align-items: center;
  overflow: hidden;
  padding: clamp(22px, 4vw, 40px);
  margin: 4px 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    var(--hero-gradient),
    radial-gradient(420px 260px at 88% 8%, rgba(var(--amber-rgb), .11), transparent 70%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .18), 0 18px 50px rgba(0, 0, 0, .16);
  animation: fadeUp .45s both;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(var(--accent-rgb), .4);
  border-style: solid;
  pointer-events: none;
}
.hero::before { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
.hero::after { right: 9px; bottom: 9px; border-width: 0 1px 1px 0; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  color: var(--green-dim);
  font: 10px/1.3 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero h2 { margin: 9px 0 10px; font-size: clamp(25px, 4vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.hero p { max-width: 760px; margin: 0; color: var(--text-soft); font-size: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.hero-actions button, .quick-link, .to-top {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  color: var(--text);
  background: var(--hover-bg);
  cursor: pointer;
  font-size: 12.5px;
  transition: border-color .18s, color .18s, background .18s, transform .12s;
}
.hero-actions button:active, .quick-link:active, .to-top:active { transform: scale(.97); }
.hero-actions .primary {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .09));
  border-color: rgba(var(--accent-rgb), .35);
  color: var(--accent-text-strong);
  font-weight: 600;
}
.hero-actions .primary:hover { background: rgba(var(--accent-rgb), .22); }
.hero-actions .secondary:hover, .quick-link:hover { border-color: var(--line-strong); background: var(--hover-bg-strong); }
.hero-emblem {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(30vw, 190px);
  aspect-ratio: 1;
}
.emblem-ring, .emblem-ring::before, .emblem-ring::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .2);
}
.emblem-ring::before { content: ""; inset: 12%; border-style: dashed; opacity: .6; animation: ringSpin 30s linear infinite; }
.emblem-ring::after { content: ""; inset: 26%; border-color: rgba(var(--amber-rgb), .22); }
.emblem-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 50%;
  color: var(--green);
  font-size: clamp(28px, 5vw, 46px);
  background: radial-gradient(circle, rgba(var(--accent-rgb), .1), transparent 70%);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .12);
  animation: emblemPulse 7s ease-in-out infinite;
}
.overview-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 0 0 24px; animation: fadeUp .45s both; }
.stat-card {
  position: relative;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--stat-gradient);
  text-align: left;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  right: 9px; top: 9px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--green-dim);
  box-shadow: 0 0 7px var(--green-dim);
}
.stat-card b { display: block; color: var(--green); font: 24px/1.05 var(--mono); }
.stat-card span { display: block; margin-top: 4px; color: var(--text-muted); font: 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 9px; }
.quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border-radius: 9px;
  padding: 13px 14px;
  background: var(--panel-3);
}
.quick-link .icon { color: var(--green); width: 17px; height: 17px; }
.quick-link span { margin-left: auto; color: var(--amber); font-family: var(--mono); }

/* ── Filters, tables, details ───────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-3);
  animation: fadeUp .3s both;
}
.filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font: 10.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.filters select {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 12.5px;
  outline: 0;
}
.filters select:focus { border-color: rgba(var(--accent-rgb), .4); }
.table-wrap {
  overflow: auto;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-low);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .24) transparent;
}
.table-wrap::-webkit-scrollbar { height: 6px; width: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .2); border-radius: 6px; }
.table-wrap table.compact { min-width: 0; }
.source-box {
  margin: 3px 0 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-low);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 12.5px; }
th, td { padding: 8px 10px; border-bottom: 1px solid rgba(var(--line-rgb), .09); text-align: left; vertical-align: top; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-head);
  color: var(--text-muted);
  font: 9.5px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
tr:nth-child(even) td { background: var(--hover-bg); }
tr:hover td { background: rgba(var(--accent-rgb), .035); }
td { color: var(--text-soft); }
td b { color: var(--text); }
details {
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--inset-bg);
}
details[open] { border-color: var(--line-strong); }
details[open] > *:not(summary) { animation: fadeIn .25s both; }
summary {
  position: relative;
  padding-left: 15px;
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  position: absolute;
  left: 0; top: 0;
  color: var(--amber);
  font-family: var(--mono);
}
details[open] summary::before { content: "−"; }
details p { margin: 7px 0; color: var(--text-soft); font-size: 13px; }
details img { max-width: 100%; border-radius: 8px; margin-top: 8px; }
.list { margin: 6px 0; padding-left: 17px; }
.list li { margin: 3px 0; }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }
.warn-box {
  border: 1px solid rgba(var(--amber-rgb), .3);
  background: rgba(var(--amber-rgb), .06);
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--amber-text);
}

/* ── Search ─────────────────────────────────────────────────────────────── */
.search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(var(--line-rgb), .1);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  animation: fadeUp .3s both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover { color: var(--green); }
.search-result .icon { margin-top: 2px; color: var(--green); width: 17px; height: 17px; flex: 0 0 auto; }
.search-result .kind {
  display: block;
  color: var(--amber-dim);
  font: 9.5px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.search-result b { display: block; font-size: 13.5px; }
.search-result .muted { font-size: 11.5px; }

/* ── Loading / footer ───────────────────────────────────────────────────── */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  color: var(--green-dim);
  text-align: center;
}
.loader-ring {
  position: relative;
  width: 46px; height: 46px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 50%;
}
.loader-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid transparent;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: ringSpin 1.2s linear infinite;
}
.loader-ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
  animation: statusPulse 1.8s ease-in-out infinite;
}
.loader-title { font: 11px/1.2 var(--mono); letter-spacing: .16em; }
.loader-sub { margin-top: 4px; color: var(--text-dim); font-size: 11px; }
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 30px) 28px;
  color: var(--text-muted);
  font: 10px/1.4 var(--mono);
  letter-spacing: .04em;
}
.footer-code { color: var(--green-dim); }
.footer-note { opacity: 1; }
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--bar-bg-solid);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s, border-color .2s;
  font-family: var(--mono);
  color: var(--green);
}
.to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { border-color: var(--green-dim); }

/* ── Icons ──────────────────────────────────────────────────────────────── */
.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.15em;
}
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 26px; height: 26px; }
.icon-fill { fill: currentColor; stroke: none; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-emblem { display: none; }
  .overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 14px; }
  .topbar { gap: 9px; padding-top: 10px; padding-bottom: 10px; }
  .topbar, .tabs { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bar-bg-solid); }
  .search { flex-basis: 100%; max-width: none; }
  .tabs { top: var(--topbar-h, 116px); padding-top: 8px; padding-bottom: 8px; }
  .app { padding-top: 16px; }
  .hero { padding: 20px; border-radius: 14px; }
  .hero h2 { font-size: 26px; }
  .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .section-head h2 { font-size: 19px; }
  table { min-width: 500px; }
  .footer { font-size: 9px; padding-bottom: 20px; }
  .footer-note { display: none; }
  .to-top { right: 12px; bottom: 12px; }
  .bg-monitor { display: none; }
  .bg-fog { filter: blur(44px); opacity: .38; }
  .bg-particles span:nth-child(n + 11) { display: none; }
}
@media (max-width: 420px) {
  .brand p { display: none; }
  .brand h1 { font-size: 17px; }
  .status-text { display: none; }
  .overview-stats { grid-template-columns: 1fr 1fr; }
  .tab { padding: 6px 9px; font-size: 11.5px; }
  .tab .icon { width: 13px; height: 13px; }
}

/* ── Motion preferences ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bg-fog, .bg-light, .bg-monitor, .bg-scanline, .bg-particles, .emblem-ring::before, .emblem-core, .status-dot {
    animation: none !important;
  }
  .bg-particles { display: none; }
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(9px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes statusPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes fogDrift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to { transform: translate3d(5%, 2%, 0) scale(1.06); }
}
@keyframes lightPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.04); }
}
@keyframes monitorFlicker {
  0%, 100% { opacity: .5; }
  41% { opacity: .52; }
  42% { opacity: .28; }
  43% { opacity: .5; }
  71% { opacity: .5; }
  72% { opacity: .34; }
  73% { opacity: .5; }
}
@keyframes scanDown {
  from { transform: translateY(0); }
  to { transform: translateY(150vh); }
}
@keyframes dustFloat {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: var(--alpha, .25); }
  55% { opacity: var(--alpha, .25); }
  100% { transform: translate3d(var(--drift, 20px), -115vh, 0); opacity: 0; }
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes emblemPulse {
  0%, 100% { box-shadow: 0 0 36px rgba(var(--accent-rgb), .1); }
  50% { box-shadow: 0 0 54px rgba(var(--accent-rgb), .18); }
}


/* Верхняя панель: действия и иконки */
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .12s;
}
.icon-button:hover { color: var(--green); border-color: var(--line-strong); background: var(--hover-bg); }
.icon-button:active { transform: scale(.94); }
.icon-button .icon { width: 18px; height: 18px; }
.icon-button .badge-dot {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--amber);
  color: #1a1208;
  font: 700 9px/15px var(--mono);
  text-align: center;
  box-shadow: 0 0 8px rgba(var(--amber-rgb), .5);
}
.header-popover-wrap { position: relative; }
.popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(370px, calc(100vw - 26px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: popIn .2s ease both;
}
.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.popover-head b { font: 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green-dim); }
.popover-head button {
  border: 0; background: transparent; color: var(--text-muted);
  font: 10.5px/1 var(--mono); cursor: pointer; padding: 3px 5px;
}
.popover-head button:hover { color: var(--green); }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-low);
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, background .18s, transform .12s;
}
.theme-option:hover { border-color: var(--line-strong); background: var(--hover-bg); }
.theme-option:active { transform: scale(.98); }
.theme-option.active { border-color: rgba(var(--accent-rgb), .5); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .18); }
.theme-swatch {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.theme-swatch.black { background: linear-gradient(135deg, #121712, #8fc78c); }
.theme-swatch.white { background: linear-gradient(135deg, #ffffff, #2f7a44); }
.theme-swatch.blue { background: linear-gradient(135deg, #0a111c, #6ea8e8); }
.theme-swatch.pink { background: linear-gradient(135deg, #1a0d17, #e58ab5); }
.theme-option b { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.theme-option span { display: block; font: 9px/1.3 var(--mono); letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; }
.notification-list { display: flex; flex-direction: column; gap: 2px; }
.notification-item {
  display: block;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .18s;
}
.notification-item:hover { background: var(--hover-bg); }
.notification-item.unread { border-left: 2px solid var(--amber); padding-left: 10px; }
.notification-item b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.notification-item span { display: block; color: var(--text-muted); font-size: 11.5px; }
.notification-item time { display: block; margin-top: 3px; color: var(--text-dim); font: 9.5px/1.2 var(--mono); }
.popover-empty { padding: 16px 8px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* Кнопки интерфейса */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--hover-bg);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s, transform .12s, box-shadow .18s;
}
.btn:hover { border-color: var(--line-strong); background: var(--hover-bg-strong); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .1));
  border-color: rgba(var(--accent-rgb), .4);
  color: var(--accent-text-strong);
  font-weight: 600;
}
.btn.primary:hover { background: rgba(var(--accent-rgb), .24); box-shadow: 0 0 24px rgba(var(--accent-rgb), .08); }
.btn.amber { color: var(--amber); border-color: rgba(var(--amber-rgb), .35); background: rgba(var(--amber-rgb), .07); }
.btn.danger { color: var(--danger); border-color: rgba(var(--danger-rgb), .3); background: rgba(var(--danger-rgb), .07); }
.btn.small { padding: 5px 8px; font-size: 11px; border-radius: 6px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .icon { width: 15px; height: 15px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { color: var(--text-muted); font: 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.field input, .field select, .field textarea, .community-search input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  outline: 0;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input:focus, .field select:focus, .field textarea:focus, .community-search input:focus {
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .07);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field .hint { color: var(--text-dim); font-size: 10.5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-error { margin: 8px 0 0; padding: 8px 10px; border: 1px solid rgba(var(--danger-rgb), .35); border-radius: 7px; background: rgba(var(--danger-rgb), .08); color: var(--danger); font-size: 12px; }
.form-note { margin: 6px 0 0; color: var(--text-dim); font-size: 11px; }

/* Сообщество: вводный блок */
.community-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 38px);
  margin: 4px 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    var(--hero-gradient),
    radial-gradient(420px 260px at 90% 6%, rgba(var(--accent-rgb), .12), transparent 70%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .14), 0 18px 50px rgba(0, 0, 0, .14);
  animation: fadeUp .4s both;
}
.community-hero::before, .community-hero::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border-color: rgba(var(--accent-rgb), .38);
  border-style: solid;
  pointer-events: none;
}
.community-hero::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.community-hero::after { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }
.community-hero h2 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 5vw, 50px);
  line-height: 1.02;
  letter-spacing: .015em;
  font-weight: 700;
}
.community-hero p { max-width: 780px; margin: 0; color: var(--text-soft); font-size: 14px; }
.community-hero .hero-actions { margin-top: 16px; }
.community-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 0 18px; animation: fadeUp .45s both; }
.community-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--stat-gradient);
}
.community-stat b { color: var(--green); font: 26px/1 var(--mono); }
.community-stat span { color: var(--text-muted); font: 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.community-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-low);
  animation: fadeUp .3s both;
}
.community-filters { display: flex; gap: 5px; overflow-x: auto; flex: 1 1 620px; padding-bottom: 2px; scrollbar-width: none; }
.community-filters::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, transform .12s;
}
.filter-pill:hover { color: var(--text); background: var(--hover-bg); border-color: var(--line); }
.filter-pill.active { color: var(--green); border-color: rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .08); }
.filter-pill:active { transform: scale(.97); }
.community-search { position: relative; flex: 0 1 330px; min-width: 190px; max-width: 360px; }
.community-search input { padding-left: 32px; }
.community-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-dim); }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.idea-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card-gradient);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  animation: cardIn .36s both;
  animation-delay: calc(var(--i, 0) * 26ms);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.idea-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .2); }
.idea-card.pinned { border-color: rgba(var(--amber-rgb), .4); }
.idea-card.pinned::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--amber), transparent);
}
.idea-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.idea-title { margin: 0; font-size: 16.5px; line-height: 1.3; font-weight: 600; }
.idea-title a { color: var(--text); text-decoration: none; }
.idea-title a:hover { color: var(--green); }
.idea-short { margin: 0; color: var(--text-soft); font-size: 12.8px; overflow-wrap: anywhere; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-muted); font: 10.5px/1.4 var(--mono); }
.idea-meta .icon { width: 12px; height: 12px; vertical-align: -.2em; }
.idea-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.vote-group { display: flex; align-items: center; gap: 5px; }
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--hover-bg);
  color: var(--text-muted);
  font: 11px/1 var(--mono);
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s, transform .1s;
}
.vote-btn .icon { width: 13px; height: 13px; }
.vote-btn:hover { color: var(--text); border-color: var(--line-strong); }
.vote-btn:active { transform: scale(.94); }
.vote-btn.up.active { color: var(--green); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .1); }
.vote-btn.down.active { color: var(--danger); border-color: rgba(var(--danger-rgb), .4); background: rgba(var(--danger-rgb), .08); }
.vote-btn:disabled { opacity: .45; cursor: not-allowed; }
.idea-comments { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font: 10.5px/1 var(--mono); }
.idea-comments .icon { width: 13px; height: 13px; }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font: 9.5px/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-badge.new { color: var(--st-new); background: rgba(212, 163, 94, .09); }
.status-badge.review { color: var(--st-review); background: rgba(127, 169, 214, .1); }
.status-badge.approved { color: var(--st-approved); background: rgba(143, 199, 140, .09); }
.status-badge.in_progress { color: var(--st-progress); background: rgba(111, 183, 201, .1); }
.status-badge.implemented { color: var(--st-done); background: rgba(126, 203, 138, .1); }
.status-badge.rejected { color: var(--st-rejected); background: rgba(204, 113, 103, .09); }
.category-chip {
  display: inline-flex;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--hover-bg);
  color: var(--text-muted);
  font: 9.5px/1.3 var(--mono);
  letter-spacing: .04em;
}
.pin-mark { color: var(--amber); font: 10px/1 var(--mono); letter-spacing: .08em; }
.community-empty {
  padding: 36px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--text-muted);
  text-align: center;
  font-size: 13px;
}
.community-login-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  gap: 16px;
  align-items: center;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .05);
}
.community-login-card h3 { margin: 0 0 4px; font-size: 15px; }
.community-login-card p { margin: 0; color: var(--text-muted); font-size: 12.5px; }
.community-userbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; color: var(--text-muted); font: 11px/1.2 var(--mono); }
.community-userbar b { color: var(--green); font-weight: 600; }
.admin-toggle { border-color: rgba(var(--amber-rgb), .35); color: var(--amber); }

/* Страница идеи */
.idea-page { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; animation: fadeUp .35s both; }
.idea-main, .idea-side-card, .admin-box {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card-gradient);
}
.idea-detail-title { margin: 8px 0 10px; font-size: clamp(24px, 4vw, 36px); line-height: 1.12; letter-spacing: -.01em; }
.idea-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 12px; color: var(--text-muted); font: 10.5px/1.4 var(--mono); }
.idea-detail-body { color: var(--text-soft); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-detail-image { display: block; max-width: 100%; max-height: 420px; object-fit: contain; margin: 12px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-low); }
.idea-vote-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.idea-side-card h4, .admin-box h4, .comments-card h4 {
  margin: 0 0 9px;
  color: var(--green-dim);
  font: 10px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.idea-side-card { display: flex; flex-direction: column; gap: 10px; }
.side-list { display: flex; flex-direction: column; gap: 7px; }
.side-list div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-soft); }
.side-list span { color: var(--text-muted); font: 10px/1.4 var(--mono); }
.history-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.history-item { padding: 6px 8px; border-left: 2px solid var(--line-strong); background: var(--hover-bg); font-size: 11px; color: var(--text-muted); }
.history-item b { color: var(--text-soft); font-weight: 600; }
.history-item time { display: block; margin-top: 2px; font: 9.5px/1.2 var(--mono); color: var(--text-dim); }
.official-response {
  margin: 14px 0;
  padding: 12px 13px;
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 9px;
  background: rgba(var(--accent-rgb), .06);
}
.official-response b { display: block; margin-bottom: 5px; color: var(--green); font: 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.official-response p { margin: 0; color: var(--text-soft); font-size: 13px; white-space: pre-wrap; }
.official-response time { display: block; margin-top: 6px; color: var(--text-dim); font: 9.5px/1.2 var(--mono); }
.comments-card { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--card-gradient); }
.comment { padding: 10px 0; border-top: 1px solid var(--line); }
.comment.pinned { border-left: 2px solid var(--amber); padding-left: 10px; background: rgba(var(--amber-rgb), .04); }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
.comment-head b { font-size: 12.5px; }
.comment-head .official-mark { color: var(--amber); font: 9px/1 var(--mono); letter-spacing: .08em; }
.comment-head time { color: var(--text-dim); font: 9.5px/1 var(--mono); }
.comment-body { margin: 5px 0 0; color: var(--text-soft); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-reply-ref { color: var(--text-dim); font-size: 10.5px; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.comment-form { margin-top: 12px; }
.comment-form textarea { min-height: 78px; }
.reply-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 5px 8px; border: 1px solid rgba(var(--amber-rgb), .3); border-radius: 6px; background: rgba(var(--amber-rgb), .06); color: var(--amber); font-size: 11px; }
.reply-banner button { border: 0; background: transparent; color: inherit; cursor: pointer; font: 14px/1 var(--mono); }
.login-prompt { padding: 14px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--text-muted); font-size: 12.5px; text-align: center; }

/* Админ-панель */
.admin-panel { margin-top: 16px; }
.admin-panel summary {
  padding: 12px 14px;
  border: 1px solid rgba(var(--amber-rgb), .3);
  border-radius: 10px;
  background: rgba(var(--amber-rgb), .05);
  color: var(--amber);
  font-size: 12.5px;
}
.admin-list { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.admin-item { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-low); }
.admin-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 6px; }
.admin-item-head a { color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.admin-item-head a:hover { color: var(--green); }
.admin-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.admin-controls select, .admin-controls input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 11.5px;
  outline: 0;
}
.admin-response { display: flex; gap: 6px; margin-top: 7px; }
.admin-response input { flex: 1; }
.admin-note { color: var(--text-dim); font-size: 10.5px; }

/* Дорожная карта */
.roadmap-hero { margin-bottom: 16px; }
.roadmap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.roadmap-column { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-low); }
.roadmap-column h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 9px; font-size: 13px; letter-spacing: .04em; }
.roadmap-column h3 span { color: var(--text-dim); font: 10px/1 var(--mono); }
.roadmap-column.status-in_progress { border-color: rgba(var(--accent-rgb), .35); }
.roadmap-column.status-done { border-color: rgba(var(--accent-rgb), .2); }
.roadmap-column.status-postponed { opacity: .82; }
.roadmap-card {
  padding: 11px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card-gradient);
  animation: cardIn .32s both;
}
.roadmap-card:last-child { margin-bottom: 0; }
.roadmap-card h4 { margin: 0 0 4px; font-size: 13.5px; }
.roadmap-card p { margin: 0 0 7px; color: var(--text-muted); font-size: 12px; white-space: pre-wrap; }
.roadmap-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; color: var(--text-dim); font: 9.5px/1.3 var(--mono); }
.roadmap-meta a { color: var(--green); }
.roadmap-admin { margin-top: 14px; }
.roadmap-empty { padding: 14px 8px; color: var(--text-muted); font-size: 11.5px; text-align: center; }

/* Модальные окна */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 4, 3, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s both;
}
.modal {
  width: min(620px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  background: var(--panel-2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
  animation: modalIn .26s cubic-bezier(.2, .8, .3, 1) both;
}
.modal.wide { width: min(780px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.modal-close {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .18s, border-color .18s, transform .12s;
}
.modal-close:hover { color: var(--danger); border-color: rgba(var(--danger-rgb), .4); }
.modal-close:active { transform: scale(.94); }
.modal-close .icon { width: 15px; height: 15px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.image-preview { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.image-preview img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: 7px; }
.image-preview button { border: 0; background: transparent; color: var(--danger); font-size: 11px; cursor: pointer; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 120;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 28px));
  padding: 10px 14px;
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .4);
  animation: toastIn .25s both;
}
.toast.error { border-color: rgba(var(--danger-rgb), .45); color: var(--danger); }
.loading-inline { display: flex; align-items: center; gap: 9px; padding: 22px; color: var(--text-muted); font: 10.5px/1.2 var(--mono); letter-spacing: .1em; }
.spinner {
  width: 16px; height: 16px;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: ringSpin .9s linear infinite;
}

/* Адаптивность для узких экранов */
@media (max-width: 900px) {
  .idea-page { grid-template-columns: 1fr; }
  .community-login-card { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar-actions { order: 2; margin-left: auto; }
  .brand { order: 1; }
  .search { order: 3; }
  .community-hero { padding: 20px 16px; border-radius: 14px; }
  .community-hero h2 { font-size: 30px; }
  .community-stats { grid-template-columns: 1fr; }
  .community-stat { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .community-stat b { font-size: 21px; }
  .idea-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .popover { position: fixed; top: 66px; right: 12px; left: 12px; width: auto; }
  .community-toolbar { padding: 7px; }
  .modal-backdrop { padding: 10px; }
  .modal { padding: 14px; border-radius: 12px; }
}
@media (max-width: 420px) {
  .theme-options { grid-template-columns: 1fr; }
  .idea-footer { flex-wrap: wrap; }
  .community-userbar { width: 100%; justify-content: space-between; }
}

/* Уменьшенная анимация */
@media (prefers-reduced-motion: reduce) {
  .popover, .modal, .modal-backdrop, .toast, .idea-card, .roadmap-card, .community-hero, .community-toolbar {
    animation: none !important;
  }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}


/* Широкие экраны */
@media (min-width: 1120px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
  .community-filters { flex-wrap: wrap; overflow: visible; }
}