/* Фабрика-2 — тема «Киберпанк»: кислотно-жёлтый на чёрном, неоновые голубой и малиновый,
   срезанные углы, скобки-прицелы на карточках, моноширинные подписи капсом, скан-линии.
   Подключается ПОСЛЕ index.css и переопределяет токены и форму компонентов.
   Вернуть прежний вид — убрать строку с cyberpunk.css из templates/base.html.
   Смысл цветов статусов прежний: голубой — в работе, фиолетовый — в очереди,
   красный — ошибка, зелёный — готово. Жёлтый — главные действия и акценты. */

:root {
  --abyss: #030306;
  --midnight: #07070c;
  --slate: #0f0f18;
  --carbon: #0a0a12;
  --plum: #1d1a2e;

  --border: rgba(0, 240, 255, 0.28);
  --border-2: rgba(0, 240, 255, 0.14);
  --steel: rgba(0, 240, 255, 0.42);

  --bone: #f2f3ee;
  --ash: #b9c6cc;
  --smoke: #7d8b92;

  --yellow: #fcee0a;
  --blue: #00f0ff;     /* в работе */
  --violet: #c13cff;   /* в очереди / ждёт */
  --coral: #ff2a4f;    /* ошибка / брак */
  --lime: #00ff9c;     /* готово */

  --cta: #fcee0a;
  --alpine: linear-gradient(120deg, #ff2a4f 0%, #c13cff 45%, #00f0ff 100%);

  --font-display: 'Tektur', 'Russo One', 'Exo 2', sans-serif;
  --font-ui: 'Exo 2', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --r-sm: 0;
  --r-card: 0;
  --r-lg: 0;
  --r-panel: 0;
  --r-pill: 0;

  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --cut-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --glow-y: 0 0 18px rgba(252, 238, 10, 0.35);
  --glow-c: 0 0 22px rgba(0, 240, 255, 0.18);

  /* Скобки-прицелы по углам: жёлтая сверху слева, голубая снизу справа */
  --brackets:
    linear-gradient(var(--yellow), var(--yellow)) left top / 16px 2px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) left top / 2px 16px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 16px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 2px 16px no-repeat;
}

/* ── Фон: сетка, неоновые засветы, скан-линии ── */
html, body { background-color: var(--midnight); }
body {
  font-family: var(--font-ui);
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(193, 60, 255, 0.2), transparent 62%),
    radial-gradient(820px 480px at 4% 0%, rgba(0, 240, 255, 0.13), transparent 60%),
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;                /* над страницей, под модальными окнами и уведомлениями */
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px);
  opacity: 0.45;
}
::selection { background: var(--yellow); color: #000; }
* { scrollbar-color: var(--yellow) var(--carbon); scrollbar-width: thin; }

/* ── Горизонт: неоновый ночной город вместо гор ── */
.horizon svg { display: none; }
.horizon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='e' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2300f0ff'/%3E%3Cstop offset='.5' stop-color='%23c13cff'/%3E%3Cstop offset='1' stop-color='%23fcee0a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 220V150H60V120H110V140H150V90H200V100H230V60H250V40H256V60H280V110H330V130H380V80H440V105H480V70H520V50H560V95H600V125H650V85H700V30H712V10H716V30H730V75H780V115H830V60H880V100H920V135H970V90H1010V55H1060V110H1100V80H1150V120H1190V45H1204V25H1208V45H1230V95H1280V130H1330V70H1380V105H1430V85H1480V125H1530V100H1600V220Z' fill='%23110d1f'/%3E%3Cpath d='M0 150H60V120H110V140H150V90H200V100H230V60H250V40H256V60H280V110H330V130H380V80H440V105H480V70H520V50H560V95H600V125H650V85H700V30H712V10H716V30H730V75H780V115H830V60H880V100H920V135H970V90H1010V55H1060V110H1100V80H1150V120H1190V45H1204V25H1208V45H1230V95H1280V130H1330V70H1380V105H1430V85H1480V125H1530V100H1600' fill='none' stroke='url(%23e)' stroke-width='2'/%3E%3Cg fill='%23fcee0a' opacity='.6'%3E%3Crect x='162' y='104' width='6' height='4'/%3E%3Crect x='176' y='118' width='6' height='4'/%3E%3Crect x='396' y='96' width='6' height='4'/%3E%3Crect x='532' y='70' width='6' height='4'/%3E%3Crect x='546' y='86' width='6' height='4'/%3E%3Crect x='706' y='52' width='4' height='4'/%3E%3Crect x='842' y='78' width='6' height='4'/%3E%3Crect x='1022' y='72' width='6' height='4'/%3E%3Crect x='1196' y='64' width='4' height='4'/%3E%3Crect x='1344' y='88' width='6' height='4'/%3E%3C/g%3E%3Cg fill='%2300f0ff' opacity='.55'%3E%3Crect x='214' y='114' width='6' height='4'/%3E%3Crect x='452' y='118' width='6' height='4'/%3E%3Crect x='664' y='104' width='6' height='4'/%3E%3Crect x='720' y='92' width='4' height='4'/%3E%3Crect x='984' y='108' width='6' height='4'/%3E%3Crect x='1112' y='98' width='6' height='4'/%3E%3Crect x='1440' y='102' width='6' height='4'/%3E%3C/g%3E%3Cg fill='%23ff2a4f' opacity='.7'%3E%3Crect x='252' y='36' width='4' height='4'/%3E%3Crect x='713' y='6' width='3' height='4'/%3E%3Crect x='1204' y='20' width='4' height='4'/%3E%3C/g%3E%3Cpath d='M0 220V185H90V170H170V190H260V160H340V182H430V168H520V188H610V158H700V180H790V165H880V190H970V170H1060V185H1150V160H1240V178H1330V168H1420V188H1510V172H1600V220Z' fill='%2307070c'/%3E%3C/svg%3E")
    center bottom / max(1600px, 100%) 150px no-repeat;
}
.horizon::before { background: var(--alpine); opacity: 0.32; filter: blur(80px); }
.horizon::after { height: 36px; }

/* ── Заголовки ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
h1 {
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--yellow);
  text-shadow: 2px 0 rgba(255, 42, 79, 0.75), -2px 0 rgba(0, 240, 255, 0.6), 0 0 26px rgba(252, 238, 10, 0.25);
  animation: flicker 8s infinite;
}
h2 { font-size: 21px; letter-spacing: 0.05em; }
h3 { font-size: 15px; letter-spacing: 0.05em; }
.lead { color: var(--ash); }
@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.72; }
  97% { opacity: 1; }
  98.5% { opacity: 0.85; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(252, 238, 10, 0.08);
  border: 1px solid rgba(252, 238, 10, 0.45);
  clip-path: var(--cut-sm);
  padding: 5px 12px;
}
.eyebrow::before { content: "//"; color: var(--coral); font-weight: 700; }

/* ── Навигация (без clip-path: он обрезал бы выпадающие меню) ── */
.nav { height: 52px; background: var(--brackets), rgba(7, 7, 12, 0.9); border-color: rgba(252, 238, 10, 0.4); box-shadow: var(--glow-c); }
.brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--yellow); }
.brand svg { filter: drop-shadow(0 0 6px rgba(252, 238, 10, 0.7)); }
.nav-trigger, .nav-link { height: 34px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.nav-trigger:hover, .nav-group.open .nav-trigger, .nav-link:hover { color: var(--blue); }
.nav-trigger.active, .nav-link.active { color: #000; background: var(--yellow); }
.nav-menu, .nav-sheet { background: var(--brackets), #09090f; border-color: var(--border); box-shadow: var(--glow-c); }
.nav-menu a, .nav-sheet a, .menu-item { border-left: 2px solid transparent; border-radius: 0; }
.nav-menu a:hover, .nav-sheet a:hover, .menu-item:hover { background: rgba(252, 238, 10, 0.07); border-left-color: var(--yellow); }
.nav-menu a.active, .nav-sheet a.active { background: rgba(0, 240, 255, 0.1); border-left-color: var(--blue); }
.nav-menu a b, .nav-sheet a b, .menu-item b { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.sheet-group { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); }
.user-dot { border-radius: 0; background: var(--yellow); color: #000; font-family: var(--font-display); clip-path: var(--cut-sm); }
.nav-trigger.active .user-dot { background: #000; color: var(--yellow); }

/* ── Кнопки: срезанные углы ── */
.btn {
  clip-path: var(--cut-sm);
  border-color: var(--steel);
  background: rgba(0, 240, 255, 0.04);
  color: var(--blue);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn:hover { color: #000; background: var(--blue); border-color: var(--blue); }
.btn:disabled:hover { color: var(--blue); background: rgba(0, 240, 255, 0.04); }
.btn.strong { color: var(--yellow); border-color: rgba(252, 238, 10, 0.6); background: rgba(252, 238, 10, 0.08); }
.btn.strong:hover { color: #000; background: var(--yellow); }
.btn-cta, .btn-cta:hover {
  clip-path: var(--cut);
  background: var(--yellow);
  color: #000;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.btn-cta:hover { background: #fff45c; filter: none; animation: glitch 0.35s steps(2) 1; }
@keyframes glitch {
  0%   { transform: translate(0); text-shadow: 2px 0 var(--coral), -2px 0 var(--blue); }
  33%  { transform: translate(-2px, 1px); }
  66%  { transform: translate(2px, -1px); text-shadow: -2px 0 var(--coral), 2px 0 var(--blue); }
  100% { transform: translate(0); text-shadow: none; }
}

/* ── Поверхности со скобками ── */
.card, .stat, .window, .dialog, .clip, .login-card, .up-row, .dropzone { background: var(--brackets), var(--slate); border-color: var(--border); }
.empty, .table-wrap, .checklist { background: var(--brackets), var(--carbon); border-color: var(--border-2); }
.feature:hover, a.stat:hover { border-color: var(--yellow); box-shadow: var(--glow-y); }
.clip:hover { border-color: var(--yellow); }
.clip.selected { border-color: var(--blue); box-shadow: var(--glow-c); }
.dialog { box-shadow: var(--glow-c); }
.dialog-head h2 { color: var(--yellow); }
.modal { background: rgba(0, 0, 0, 0.84); }
.empty h3 { color: var(--yellow); }

.stat b { font-family: var(--font-display); font-size: 34px; color: var(--blue); text-shadow: 0 0 14px rgba(0, 240, 255, 0.45); }
.stat > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.feature .count { font-family: var(--font-display); color: var(--yellow); text-shadow: var(--glow-y); }

/* ── Метки и точки ── */
.dot { border-radius: 0; box-shadow: 0 0 8px var(--c, transparent); }
.tag { padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); background: rgba(255, 255, 255, 0.03); }
.tag[class*="is-"] { color: var(--c); background: color-mix(in oklab, var(--c) 10%, transparent); border-color: color-mix(in oklab, var(--c) 60%, transparent); }
.clip-thumb .corner .tag { background: rgba(0, 0, 0, 0.8); }

/* ── Таблицы ── */
.table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); background: #0b0b14; border-bottom-color: var(--border); }
.table td { border-bottom-color: var(--border-2); }
.table tbody tr:hover { background: rgba(252, 238, 10, 0.05); box-shadow: inset 3px 0 0 var(--yellow); }

/* ── Поля ввода ── */
.input, .select, .textarea { background-color: #06060b; border-color: rgba(0, 240, 255, 0.3); font-family: var(--font-ui); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--yellow);
  background-color: #08080e;
  box-shadow: 0 0 0 1px var(--yellow), 0 0 14px rgba(252, 238, 10, 0.2);
}
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300f0ff' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); }
.field > label, .range-row label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.input.invalid { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--yellow); }
input[type="file"]::file-selector-button { border-radius: 0; border-color: var(--steel); color: var(--blue); background: #0b0b14; text-transform: uppercase; letter-spacing: 0.06em; }
code { color: var(--yellow); font-family: var(--font-mono); background: #06060b; border-color: var(--border-2); }

.segmented { padding: 2px; background: #06060b; border-color: var(--border); }
.segmented button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.segmented button:hover { color: var(--yellow); }
.segmented button.active, .segmented button.active:hover { background: var(--yellow); color: #000; }
.segmented button.active .count { color: #000; }

/* ── Нарезки, превью, окна ── */
.clip-thumb .dur { font-family: var(--font-mono); color: var(--yellow); background: rgba(0, 0, 0, 0.82); }
.clip-thumb .play { border-radius: 0; background: var(--yellow); clip-path: var(--cut-sm); }
.clip-thumb .play svg path { fill: #000; }
.window-bar { background: #0b0b14; border-bottom-color: var(--border); }
.window-bar i { border-radius: 0; }
.window-bar i:nth-child(1) { background: var(--coral); }
.window-bar i:nth-child(2) { background: var(--yellow); }
.window-bar i:nth-child(3) { background: var(--blue); }
.window-bar span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.person-photo .initials { font-family: var(--font-display); color: rgba(252, 238, 10, 0.35); }
.mini .person-photo { border-radius: 0; }
.step .num { border-radius: 0; font-family: var(--font-mono); }
.meter i, .progress i { border-radius: 0; box-shadow: 0 0 10px var(--c, var(--blue)); }
.frame-box { border-color: var(--border); }
.frame-busy { font-family: var(--font-mono); color: var(--yellow); border-color: var(--yellow); text-transform: uppercase; }

/* ── Загрузка нарезок ── */
.dropzone { border: 1px dashed rgba(252, 238, 10, 0.55); }
.dropzone b { font-family: var(--font-display); text-transform: uppercase; color: var(--yellow); }
.dropzone svg { color: var(--yellow); filter: drop-shadow(0 0 8px rgba(252, 238, 10, 0.6)); }
.dropzone:hover, .dropzone.over {
  border-color: var(--yellow);
  background: var(--brackets), repeating-linear-gradient(-45deg, rgba(252, 238, 10, 0.07) 0 12px, transparent 12px 24px), var(--carbon);
}

/* ── Календарь ── */
.cal { background: var(--border-2); border-color: var(--border); }
.cal-head { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); background: #0b0b14; }
.day { background: #09090f; }
.day.empty-day { background: #050508; }
.day-num { font-family: var(--font-mono); }
.day.today .day-num { background: var(--yellow); color: #000; }
.chip { background: #0f0f18; border-color: var(--border-2); border-left: 2px solid var(--blue); }

/* ── Вход, уведомления ── */
.login-card { box-shadow: 0 0 60px rgba(252, 238, 10, 0.07), var(--glow-c); }
.login-error { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; border-color: var(--coral); }
.toast { background: #09090f; border-color: var(--yellow); clip-path: var(--cut-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }

@media (max-width: 640px) {
  h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  h1, .btn-cta:hover { animation: none; }
}

/* ── Правки по скриншотам 15.09 ── */
/* Город ниже и ниже ростом: стоит за рядом показателей и карточками, не режет подводку */
.horizon { height: 420px; background-size: max(1600px, 100%) 110px; }
.page-head .lead { text-shadow: 0 1px 0 #000, 0 0 12px #000; }
/* Непрозрачные кнопки: сквозь полупрозрачные просвечивал город */
.btn { background: linear-gradient(rgba(0, 240, 255, 0.07), rgba(0, 240, 255, 0.07)), #07070c; }
.btn.strong { background: linear-gradient(rgba(252, 238, 10, 0.1), rgba(252, 238, 10, 0.1)), #07070c; }
.btn:disabled:hover { color: var(--blue); background: linear-gradient(rgba(0, 240, 255, 0.07), rgba(0, 240, 255, 0.07)), #07070c; }
/* Скругление из базового .segmented.wrap ломало срезанный стиль */
.segmented.wrap { border-radius: 0; }
/* Моноширинный капс с широкой разрядкой читался по буквам */
.stat > span, .eyebrow, .tag, .table th, .field > label, .range-row label, .nav-trigger, .nav-link,
.segmented button, .cal-head, .sheet-group, .window-bar span, .toast { letter-spacing: 0.04em; }
/* Главная кнопка — жёлтая. Правило .btn выше в файле перебивало .btn-cta при равной специфичности */
.btn.btn-cta { background: var(--yellow); color: #000; border: 0; }
.btn.btn-cta:hover { background: #fff45c; color: #000; }

/* ── Фабрики: переключатель в шапке и страница фабрик (общие для обеих тем) ── */
.ws-trigger { gap: 8px; }
.ws-code {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  background: var(--yellow);
  clip-path: var(--cut-sm);
}
.ws-name { color: var(--bone); }
.menu-item.active { background: rgba(0, 240, 255, 0.1); border-left-color: var(--blue); }
@media (max-width: 1180px) { .ws-name { display: none; } }
/* На телефоне переключатель — в меню («Фабрика» первой группой): в шапке он выталкивал «Создать ролик» за экран */
@media (max-width: 560px) { .nav .ws-switch { display: none; } }

.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ws-card.current { border-color: var(--yellow); box-shadow: var(--glow-y); }
.ws-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ws-card-head > div { flex: 1; min-width: 0; }
.ws-card-head .ws-code { font-size: 15px; padding: 8px 11px; }
.ws-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ws-counts b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--blue); }
.ws-counts span { font-family: var(--font-mono); font-size: 11px; color: var(--smoke); text-transform: uppercase; }
.ws-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ws-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ws-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-2);
  background: var(--carbon);
  cursor: pointer;
}
.ws-option:has(input:checked) { border-color: var(--yellow); box-shadow: var(--glow-y); }
.ws-option b { display: block; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.ws-option small { display: block; margin-top: 3px; font-size: 12px; color: var(--smoke); }
.ws-pic { flex: none; position: relative; width: 36px; height: 64px; border: 1px solid var(--steel); background: #05050a; overflow: hidden; }
.ws-pic.theme-nightcity { width: 64px; height: 42px; background: linear-gradient(135deg, #fcee0a 0 38%, #00f0ff 38% 64%, #030306 64%); }
.ws-pic.theme-netrunner { width: 64px; height: 42px; background: linear-gradient(135deg, #ff2bd6 0 38%, #5ef0ff 38% 64%, #0a0418 64%); }
.ws-pic.layout-corner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 240, 255, 0.4), rgba(193, 60, 255, 0.4)); }
.ws-pic.layout-corner::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 14px; height: 20px; background: var(--yellow); }
.ws-pic.layout-stack::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(160deg, rgba(0, 240, 255, 0.5), rgba(193, 60, 255, 0.5)); }
.ws-pic.layout-stack::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 24px; background: var(--yellow); border-radius: 9px 9px 0 0; }