/* =====================================================================
   TorrentForge v2 — стили
   Темы: html.theme-dark / .theme-light
   Акценты: data-accent="green|blue|purple|orange|cyan|pink|amber|emerald|crimson|gradient|hologram"
   Скины:   data-skin="cyberpunk|retro|square|glass|brutal|synth"
   FX:      data-fx="on|off"
   Фон:     data-bgfx="grid|aurora|matrix|off"
===================================================================== */

* { box-sizing: border-box; }

:root {
  /* динамические переменные, остальное в скинах */
  --accent:        #00ff66;
  --accent-2:      #00ff66;          /* для градиентных режимов */
  --accent-soft:   rgba(0,255,102,0.18);
  --accent-glow:   rgba(0,255,102,0.55);

  --radius:   10px;
  --radius-s: 6px;
  --gap:      16px;

  --font-mono: Consolas, "JetBrains Mono", "Cascadia Code", "Courier New", monospace;
  --font-ui:   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", Roboto, sans-serif;

  --anim:     .18s;
}

/* === Тёмная база === */
html.theme-dark {
  --bg:          #0d0e12;
  --bg-elev:     #161920;
  --bg-elev-2:   #1c2030;
  --border:      #242936;
  --border-soft: #1c1f29;
  --text:        #d9dde6;
  --text-dim:    #7c8398;
  --text-mute:   #545a6e;
  --danger:      #ff4060;
  --warn:        #ffb020;
  --ok:          #2dd47b;
  --shadow-card: 0 4px 18px rgba(0,0,0,0.45);
  color-scheme: dark;
}

html.theme-light {
  --bg:          #eef0f4;
  --bg-elev:     #ffffff;
  --bg-elev-2:   #f6f7fa;
  --border:      #d6dae3;
  --border-soft: #e3e6ee;
  --text:        #1b1f27;
  --text-dim:    #5a6275;
  --text-mute:   #8a90a2;
  --danger:      #d6294a;
  --warn:        #c97a00;
  --ok:          #1c9a55;
  --shadow-card: 0 2px 10px rgba(20,30,60,0.08);
  color-scheme: light;
}

/* === Акценты (одиночные) === */
html[data-accent="green"]   { --accent:#00ff66; --accent-2:#00ff66; --accent-soft:rgba(0,255,102,.18);  --accent-glow:rgba(0,255,102,.55);  }
html[data-accent="blue"]    { --accent:#00d2ff; --accent-2:#00d2ff; --accent-soft:rgba(0,210,255,.18);  --accent-glow:rgba(0,210,255,.55);  }
html[data-accent="purple"]  { --accent:#bd00ff; --accent-2:#bd00ff; --accent-soft:rgba(189,0,255,.18);  --accent-glow:rgba(189,0,255,.55);  }
html[data-accent="orange"]  { --accent:#ff5500; --accent-2:#ff5500; --accent-soft:rgba(255,85,0,.18);   --accent-glow:rgba(255,85,0,.55);   }
html[data-accent="cyan"]    { --accent:#22ffe5; --accent-2:#22ffe5; --accent-soft:rgba(34,255,229,.18); --accent-glow:rgba(34,255,229,.55); }
html[data-accent="pink"]    { --accent:#ff3eb5; --accent-2:#ff3eb5; --accent-soft:rgba(255,62,181,.18); --accent-glow:rgba(255,62,181,.55); }
html[data-accent="amber"]   { --accent:#ffc83d; --accent-2:#ffc83d; --accent-soft:rgba(255,200,61,.18); --accent-glow:rgba(255,200,61,.55); }
html[data-accent="emerald"] { --accent:#0fbf6a; --accent-2:#0fbf6a; --accent-soft:rgba(15,191,106,.18); --accent-glow:rgba(15,191,106,.55); }
html[data-accent="crimson"] { --accent:#ff2a4d; --accent-2:#ff2a4d; --accent-soft:rgba(255,42,77,.18);  --accent-glow:rgba(255,42,77,.55);  }

/* Градиентные «акценты» — переливы */
html[data-accent="gradient"] { --accent:#00ff95; --accent-2:#00b2ff; --accent-soft:rgba(0,210,255,.18); --accent-glow:rgba(0,210,255,.5); }
html[data-accent="hologram"] { --accent:#ff3eb5; --accent-2:#22ffe5; --accent-soft:rgba(255,62,181,.18); --accent-glow:rgba(255,62,181,.5); }

/* Светлая тема — приглушённые акценты */
html.theme-light[data-accent="green"]   { --accent:#0aa84a; --accent-2:#0aa84a; }
html.theme-light[data-accent="blue"]    { --accent:#0094bf; --accent-2:#0094bf; }
html.theme-light[data-accent="purple"]  { --accent:#8a00bf; --accent-2:#8a00bf; }
html.theme-light[data-accent="orange"]  { --accent:#d44600; --accent-2:#d44600; }
html.theme-light[data-accent="cyan"]    { --accent:#0a9d8e; --accent-2:#0a9d8e; }
html.theme-light[data-accent="pink"]    { --accent:#c41a82; --accent-2:#c41a82; }
html.theme-light[data-accent="amber"]   { --accent:#a07000; --accent-2:#a07000; }
html.theme-light[data-accent="emerald"] { --accent:#0aa15a; --accent-2:#0aa15a; }
html.theme-light[data-accent="crimson"] { --accent:#bf1834; --accent-2:#bf1834; }
html.theme-light[data-accent="gradient"] { --accent:#0a9d8e; --accent-2:#0080bf; }
html.theme-light[data-accent="hologram"] { --accent:#bf1c8a; --accent-2:#0a9d8e; }

/* === СКИНЫ (мета-темы) === */
/* Cyberpunk = базовый, ничего не переопределяет */

/* Retro CRT */
html[data-skin="retro"] {
  --radius: 0px; --radius-s: 0px;
  --font-ui: "VT323", Consolas, "Courier New", monospace;
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);
}
html[data-skin="retro"].theme-dark { --bg:#020a02; --bg-elev:#0a160a; --bg-elev-2:#0e1f0e; --border:#1d3a1d; --text:#9affb0; --text-dim:#5aa56a; }
html[data-skin="retro"] body { text-shadow: 0 0 2px var(--accent); }
html[data-skin="retro"] .card { box-shadow: 0 0 0 1px var(--border), 0 0 22px var(--accent-soft) inset; }
html[data-skin="retro"] body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
}

/* Minimal Square */
html[data-skin="square"] {
  --radius: 2px; --radius-s: 2px;
}
html[data-skin="square"] .card { box-shadow: none; }
html[data-skin="square"] .primary-btn, html[data-skin="square"] .ghost-btn,
html[data-skin="square"] .ctrl-btn, html[data-skin="square"] .bb-btn { border-radius: 2px; }

/* Glass */
html[data-skin="glass"] {
  --radius: 14px; --radius-s: 8px;
}
html[data-skin="glass"].theme-dark { --bg:#0a0d18; --bg-elev: rgba(28,32,48,.55); --bg-elev-2: rgba(40,46,68,.45); --border: rgba(255,255,255,.08); }
html[data-skin="glass"].theme-light { --bg-elev: rgba(255,255,255,.55); --bg-elev-2: rgba(255,255,255,.35); --border: rgba(0,0,0,.08); }
html[data-skin="glass"] .card { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--border); }
html[data-skin="glass"] .app-header { backdrop-filter: blur(20px) saturate(140%); }

/* Brutalist */
html[data-skin="brutal"] {
  --radius: 0px; --radius-s: 0px;
}
html[data-skin="brutal"].theme-dark { --bg:#0a0a0a; --bg-elev:#101010; --bg-elev-2:#151515; --border:#444; }
html[data-skin="brutal"] .card { border: 2px solid var(--text); box-shadow: 6px 6px 0 var(--accent); }
html[data-skin="brutal"] .primary-btn { border: 2px solid var(--text); box-shadow: 3px 3px 0 var(--text); border-radius: 0; }
html[data-skin="brutal"] .ghost-btn, html[data-skin="brutal"] .ctrl-btn { border-width: 2px; border-radius: 0; }
html[data-skin="brutal"] .tab-btn.active { border-width: 2px; }

/* Synthwave */
html[data-skin="synth"] { --radius: 12px; --radius-s: 8px; }
html[data-skin="synth"].theme-dark { --bg:#160a2a; --bg-elev:#1f1140; --bg-elev-2:#2a1755; --border:#3a1f6a; --text:#f2e6ff; --text-dim:#b5a0d9; }
html[data-skin="synth"] body {
  background:
    linear-gradient(180deg, #160a2a 0%, #1a0a3a 40%, #2a0a4a 100%) !important;
}
html[data-skin="synth"] .card {
  box-shadow: 0 0 0 1px var(--border), 0 0 30px rgba(255,62,181,.15), inset 0 1px 0 rgba(255,255,255,.04);
}

/* === FX === */
html[data-fx="off"] *, html[data-fx="off"] *::before, html[data-fx="off"] *::after {
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-fx="off"] .bg-fx { display: none !important; }

/* ============== АНИМ. ФОН ============== */
.bg-fx {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none;
}
.bg-grad {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, var(--accent-soft), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.04), transparent 50%);
  filter: blur(40px);
  opacity: .9;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
#bgCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .4s;
}
html[data-bgfx="off"] .bg-grad,
html[data-bgfx="off"] .bg-grid { display: none; }
html[data-bgfx="aurora"] .bg-grad {
  inset: -30%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      var(--accent) 0deg,
      var(--accent-2) 90deg,
      transparent 180deg,
      var(--accent) 270deg,
      var(--accent-2) 360deg);
  opacity: .25;
  animation: auroraSpin 40s linear infinite;
}
html[data-bgfx="aurora"] .bg-grid { display: none; }
html[data-bgfx="matrix"] #bgCanvas { opacity: .55; }
html[data-bgfx="matrix"] .bg-grad,
html[data-bgfx="matrix"] .bg-grid { opacity: .1; }

@keyframes auroraSpin { to { transform: rotate(360deg); } }

/* ============== БАЗА ============== */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: var(--font-ui); cursor: pointer; }
h2, h3 { font-family: var(--font-display); }

/* ============== HEADER ============== */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--bg) 60%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); }
.logo-mark {
  color: var(--accent);
  font-weight: 700;
  border: 1px solid var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius-s);
  box-shadow: 0 0 14px var(--accent-glow);
  letter-spacing: 1px;
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-text { font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.logo-sub  { color: var(--text-mute); font-size: 12px; }

.header-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ctrl-btn {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-s);
  font-size: 13px;
  transition: all var(--anim) ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.ctrl-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.ctrl-btn.danger:hover { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 10px rgba(255,64,96,0.4); }
.ctrl-btn.small { padding: 4px 10px; font-size: 12px; }

/* === Палитра === */
.accent-picker {
  display: inline-flex; gap: 6px; padding: 4px 8px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px;
  flex-wrap: wrap;
}
.accent-picker.wide { padding: 8px; }
.accent-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--dot, #888);
  border: 2px solid transparent;
  padding: 0; cursor: pointer;
  transition: transform var(--anim), box-shadow var(--anim), border-color var(--anim);
  position: relative;
}
.accent-dot:hover { transform: scale(1.18); box-shadow: 0 0 12px var(--dot, var(--accent)); }
.accent-dot.active { border-color: var(--text); box-shadow: 0 0 14px var(--dot, var(--accent)); }
.accent-dot.grad {
  background: conic-gradient(from 0deg, #ff3eb5, #22ffe5, #ff3eb5);
  animation: dotSpin 6s linear infinite;
}
@keyframes dotSpin { to { transform: rotate(360deg); } }

/* === TABS === */
.tabs {
  max-width: 1400px; margin: 0 auto;
  padding: 0 24px;
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-bottom: none;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: all var(--anim);
  white-space: nowrap;
  position: relative; top: 1px;
}
.tab-btn:hover { color: var(--text); background: var(--bg-elev); }
.tab-btn.active {
  background: var(--bg-elev);
  color: var(--accent);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg-elev);
  box-shadow: 0 -2px 0 var(--accent) inset;
}

/* === MAIN === */
.app-main {
  max-width: 1400px; margin: 0 auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: var(--gap);
}
.tab-panel { display: none; flex-direction: column; gap: var(--gap); }
.tab-panel.active { display: flex; animation: fadeIn .25s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* === КАРТОЧКИ === */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 10px; flex-wrap: wrap;
}
.card-head h2 {
  margin: 0; font-size: 15px; font-weight: 700;
  letter-spacing: .3px;
}
.card-head h2::before {
  content:"▌"; color: var(--accent); margin-right: 8px;
  text-shadow: 0 0 6px var(--accent-glow);
}
.card-tag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 1px;
}
.hint { color: var(--text-dim); font-size: 12.5px; margin: 0 0 14px; }
.sub-h { font-size: 13px; color: var(--text-dim); margin: 16px 0 10px; text-transform: uppercase; letter-spacing: 1px; }
.sub-h::before { content: "› "; color: var(--accent); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* === Поля === */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span {
  font-size: 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .7px;
}
.field input, .field select, .field textarea,
.input-grp input, .input-grp select {
  width: 100%;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--font-ui);
  transition: all var(--anim);
  outline: none;
}
.field textarea { resize: vertical; min-height: 80px; font-family: var(--font-mono); font-size: 13px; }
.field input[type=color] { padding: 2px; height: 38px; cursor: pointer; }
.mono { font-family: var(--font-mono) !important; font-size: 12.5px !important; letter-spacing: .3px; }

.field input:focus, .field select:focus, .field textarea:focus,
.input-grp input:focus, .input-grp select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 12px var(--accent-glow);
}
.field input[readonly] { color: var(--text-dim); background: var(--bg); cursor: default; }
.field input[readonly]:focus { box-shadow: none; border-color: var(--border); }

.input-grp { display: flex; gap: 6px; }
.input-grp input  { flex: 1; }
.input-grp select { flex: 0 0 110px; }

/* === Конвертер === */
.conv-row { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: end; gap: 10px; }
.conv-eq { text-align: center; padding-bottom: 10px; color: var(--accent); font-size: 22px; text-shadow: 0 0 8px var(--accent-glow); }
.quick-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.ps-label { font-size: 12px; color: var(--text-mute); margin-right: 4px; }
.preset {
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
  font-family: var(--font-mono); transition: all var(--anim);
}
.preset:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .calc-row, .conv-row { grid-template-columns: 1fr; } .conv-eq { display:none; } }

.primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0a0a;
  border: 1px solid var(--accent);
  padding: 9px 18px;
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  transition: all var(--anim);
  display: inline-flex; align-items: center; gap: 6px;
}
html.theme-light .primary-btn { color: #fff; }
html[data-skin="synth"] .primary-btn { color: #fff; text-shadow: 0 0 8px rgba(0,0,0,.5); }
.primary-btn:hover { box-shadow: 0 0 18px var(--accent-glow); transform: translateY(-1px); }
.primary-btn:active { transform: translateY(0); }

.ghost-btn {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 16px; border-radius: var(--radius-s);
  font-size: 13px; transition: all var(--anim);
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.ghost-btn.danger:hover { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 10px rgba(255,64,96,.4); }

.calc-result {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-s);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  color: var(--text-dim);
  min-height: 50px;
}
.calc-result.ok   { border-color: var(--accent); color: var(--text); box-shadow: 0 0 14px var(--accent-soft) inset; }
.calc-result.warn { border-color: var(--warn); color: var(--warn); border-style: solid; }
.calc-result .big { display: block; color: var(--accent); font-size: 18px; margin-bottom: 6px; text-shadow: 0 0 8px var(--accent-glow); }
.calc-result .small { font-size: 12px; color: var(--text-mute); display:block; margin-top:6px; }

/* === Универсальный конвертер размеров === */
.base-switch {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 12.5px; color: var(--text-dim);
}
.seg {
  display: inline-flex; background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 3px; gap: 2px;
}
.seg-btn {
  background: transparent; color: var(--text-dim);
  border: none; padding: 6px 14px; border-radius: 4px;
  font-size: 12.5px; font-family: var(--font-mono);
  transition: all var(--anim);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: var(--accent); color: #0a0a0a;
  box-shadow: 0 0 10px var(--accent-glow);
}
html.theme-light .seg-btn.active { color: #fff; }
.base-hint { color: var(--text-mute); font-family: var(--font-mono); font-size: 11.5px; }

.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.size-cell {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  transition: all var(--anim);
}
.size-cell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.size-cell label { font-size: 11px; color: var(--text-mute); font-family: var(--font-mono); text-transform: uppercase; }
.size-cell input {
  width: 100%; background: transparent; border: none; color: var(--text);
  font-family: var(--font-mono); font-size: 13.5px; padding: 4px 0; outline: none;
}

/* === Справочные таблицы === */
.ref-grid { gap: 24px; }
.ref-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 12.5px;
}
.ref-table th, .ref-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  text-align: left;
}
.ref-table th { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.ref-table td.num { text-align: right; color: var(--text); }
.ref-table tr:hover td { background: var(--bg-elev-2); }

/* === Drop zone === */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  background: var(--bg-elev-2);
  transition: all .2s;
  position: relative;
}
.drop-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 30px var(--accent-glow) inset;
  transform: scale(1.005);
}
.drop-zone.dragover::after {
  content: "ОТПУСТИТЕ ФАЙЛ"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 24px; letter-spacing: 4px;
  color: var(--accent); text-shadow: 0 0 18px var(--accent-glow);
  pointer-events: none; background: var(--bg-elev-2); animation: pulse 1s infinite;
}
@keyframes pulse { 50% { opacity: .65; } }

.dz-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dz-icon  { font-size: 40px; color: var(--accent); text-shadow: 0 0 18px var(--accent-glow); }
.dz-title { font-size: 16px; }
.dz-or    { color: var(--text-mute); font-size: 12px; }
.file-pick { margin-top: 4px; cursor: pointer; }
.dz-status { margin-top: 10px; font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.dz-status.err { color: var(--danger); }
.dz-status.ok  { color: var(--accent); }

/* === Чекбокс === */
.checkbox-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--anim);
}
.checkbox-row:hover { border-color: var(--accent); }
.checkbox-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* === Действия === */
.action-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; position: relative; }
.action-row.wrap { flex-wrap: wrap; margin-top: 12px; }

.copy-tip {
  margin-left: auto;
  padding: 5px 12px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 12px;
  border-radius: var(--radius-s);
  font-weight: 700;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: all .25s;
  box-shadow: 0 0 12px var(--accent-glow);
}
html.theme-light .copy-tip { color: #fff; }
.copy-tip.show { opacity: 1; transform: translateY(0); }

/* ============== АУДИТ ============== */
.audit-summary {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin-bottom: 12px;
}
.audit-summary .as-cell {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 12px;
}
.audit-summary .as-cell .label {
  font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 1px;
}
.audit-summary .as-cell .value {
  font-family: var(--font-mono); font-size: 16px; color: var(--text);
  margin-top: 2px;
}
.audit-summary .as-cell.bad .value { color: var(--danger); }
.audit-summary .as-cell.ok  .value { color: var(--ok); }

.audit-keys { display: flex; flex-direction: column; gap: 8px; }
.audit-key {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  background: var(--bg-elev-2);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: center;
}
.audit-key.danger { border-left-color: var(--danger); }
.audit-key.ok     { border-left-color: var(--ok); }
.audit-key .kk-name {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent);
}
.audit-key .kk-val {
  font-family: var(--font-mono); color: var(--text); word-break: break-all;
}
.audit-key .kk-meta {
  font-size: 11px; color: var(--text-mute); margin-top: 4px; font-family: var(--font-mono);
}
.audit-key .kk-reveal {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: 6px 10px; border-radius: var(--radius-s);
  font-size: 12px; cursor: pointer; transition: all var(--anim);
}
.audit-key .kk-reveal:hover { border-color: var(--accent); color: var(--accent); }
.risk-badge { padding: 2px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.risk-low    { background: rgba(45,212,123,.15); color: var(--ok); border: 1px solid var(--ok); }
.risk-medium { background: rgba(255,176,32,.15); color: var(--warn); border: 1px solid var(--warn); }
.risk-high   { background: rgba(255,64,96,.15); color: var(--danger); border: 1px solid var(--danger); }

/* ============== BB-CODE РЕДАКТОР ============== */
.bb-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  align-items: center;
}
.bb-btn {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; font-size: 12.5px; border-radius: 3px;
  min-width: 32px; transition: all var(--anim); font-family: var(--font-mono);
}
.bb-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.bb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 6px; }

.bb-dd { position: relative; }
.bb-dd-menu {
  position: absolute; top: 100%; left: 0; z-index: 30;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 4px;
  display: none;
  flex-direction: column;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  margin-top: 4px;
}
.bb-dd:hover .bb-dd-menu { display: flex; }
.bb-dd-menu button {
  background: transparent; color: var(--text);
  border: none; text-align: left;
  padding: 6px 10px; font-size: 12.5px;
  border-radius: 3px; font-family: var(--font-mono); cursor: pointer;
}
.bb-dd-menu button:hover { background: var(--accent-soft); color: var(--accent); }

.bb-color {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 4px 8px; border-radius: 3px;
  font-size: 12px; font-family: var(--font-mono); cursor: pointer;
}
.bb-color input[type=color] { width: 22px; height: 22px; border: none; background: transparent; padding: 0; cursor: pointer; }

.bb-split {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  overflow: hidden;
  min-height: 420px;
  height: 50vh;
}
.bb-pane { display: flex; flex-direction: column; min-width: 120px; overflow: hidden; }
.bb-pane-left  { flex: 1 1 50%; border-right: 1px solid var(--border); }
.bb-pane-right { flex: 1 1 50%; }
.bb-pane-head {
  padding: 6px 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-mute);
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
}
.bb-splitter {
  flex: 0 0 6px;
  background: var(--bg-elev-2);
  cursor: col-resize;
  position: relative;
  transition: background var(--anim);
}
.bb-splitter::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 2px; height: 30px;
  background: var(--border); border-radius: 2px;
}
.bb-splitter:hover { background: var(--accent-soft); }
.bb-splitter:hover::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.bb-editor-wrap { display: flex; flex: 1; overflow: hidden; background: var(--bg-elev-2); }
.line-numbers {
  padding: 10px 8px 10px 12px;
  background: var(--bg);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.55;
  text-align: right; user-select: none;
  border-right: 1px solid var(--border);
  white-space: pre; overflow: hidden; min-width: 40px;
}
#bbInput {
  flex: 1; border: none;
  background: var(--bg-elev-2); color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  resize: none; outline: none;
}
#bbInput:focus { box-shadow: inset 2px 0 0 var(--accent); }

.bb-preview {
  flex: 1; overflow: auto;
  padding: 14px 18px;
  background: var(--bg);
  font-size: 14px; line-height: 1.6; word-break: break-word;
}
.bb-preview.compact { max-height: 520px; }
.bb-preview img { max-width: 100%; border-radius: 4px; border: 1px solid var(--border); }
.bb-preview blockquote {
  margin: 6px 0; padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elev-2); color: var(--text-dim);
}
.bb-preview pre {
  margin: 6px 0; padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--font-mono); font-size: 12.5px; overflow-x: auto;
}
.bb-preview hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.bb-preview a { color: var(--accent); }
.bb-preview ul { padding-left: 24px; }

/* Спойлеры в превью */
.spoiler-wrapper {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg-elev); overflow: hidden;
}
.spoiler-trigger {
  display: block; width: 100%; text-align: left;
  background: var(--bg-elev-2);
  color: var(--accent);
  border: none; padding: 8px 12px;
  font-family: var(--font-mono); font-size: 12.5px;
  cursor: pointer; border-bottom: 1px solid transparent;
  transition: all var(--anim);
}
.spoiler-trigger:hover { background: var(--accent-soft); }
.spoiler-trigger.open { border-bottom-color: var(--border); }
.spoiler-content { padding: 10px 14px; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }

/* === Шаблоны === */
.tpl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 900px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .tpl-grid { grid-template-columns: 1fr; } }

.tpl-slot {
  background: var(--bg-elev-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-s);
  padding: 10px;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 110px;
}
.tpl-slot.filled { border-style: solid; border-color: var(--border); }
.tpl-slot-head { font-family: var(--font-mono); color: var(--text-mute); font-size: 11px; text-transform: uppercase; display: flex; justify-content: space-between; }
.tpl-slot-head .tpl-num { color: var(--accent); }
.tpl-preview {
  flex: 1; color: var(--text-dim); font-family: var(--font-mono);
  font-size: 11px; overflow: hidden; max-height: 50px;
  white-space: pre-wrap; word-break: break-all;
}
.tpl-actions { display: flex; gap: 4px; }
.tpl-actions button {
  flex: 1; background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); padding: 4px 6px; font-size: 11px;
  border-radius: 3px; cursor: pointer; transition: all var(--anim);
}
.tpl-actions button:hover { border-color: var(--accent); color: var(--accent); }
.tpl-actions button.del:hover { border-color: var(--danger); color: var(--danger); }

/* === КОНСТРУКТОР === */
.builder-modes { margin-top: 8px; }
.form-cols {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) { .form-cols { grid-template-columns: 1fr; } }
.form-cols .field { margin-bottom: 0; }

.auto-controls {
  display: grid; grid-template-columns: 2fr 2fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
@media (max-width: 700px) { .auto-controls { grid-template-columns: 1fr; } }
.auto-controls .field { margin-bottom: 0; }

.auto-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .auto-fields { grid-template-columns: 1fr; } }

.auto-field {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.auto-field .af-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.auto-field .af-name {
  font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--font-mono);
}
.auto-field input, .auto-field textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 7px 9px;
  font-family: var(--font-ui); font-size: 13px; outline: none;
  transition: border-color var(--anim);
}
.auto-field input:focus, .auto-field textarea:focus { border-color: var(--accent); }
.auto-field textarea { font-family: var(--font-mono); font-size: 12.5px; min-height: 60px; resize: vertical; }
.auto-field .af-del {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-mute); padding: 2px 8px; border-radius: 3px;
  cursor: pointer; font-size: 11px;
}
.auto-field .af-del:hover { color: var(--danger); border-color: var(--danger); }

/* === МОДАЛЬНОЕ === */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: 92%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 30px var(--accent-soft);
}
.modal-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
.modal-fields .field { margin-bottom: 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* === ПАНЕЛЬ НАСТРОЕК === */
.settings-panel {
  position: fixed; top: 0; right: 0;
  width: 380px; max-width: 100vw;
  height: 100vh;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(0,0,0,.4);
  z-index: 150;
  padding: 18px;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform .25s ease;
}
.settings-panel.hidden { transform: translateX(105%); }
.sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sp-head h3 { margin: 0; font-size: 16px; }
.sp-section { margin-bottom: 22px; }
.sp-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.sp-foot { color: var(--text-mute); font-size: 11px; border-top: 1px solid var(--border); padding-top: 12px; }

.sp-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 140;
  opacity: 1; transition: opacity .25s;
}
.sp-backdrop.hidden { opacity: 0; pointer-events: none; }

.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skin-card {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: all var(--anim);
  color: var(--text); font-size: 11.5px;
  align-items: center;
}
.skin-card:hover { border-color: var(--accent); }
.skin-card.active { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.sk-preview { width: 100%; height: 36px; border-radius: 4px; border: 1px solid var(--border); }
.sk-cyberpunk { background: linear-gradient(135deg, #0d0e12 0%, #1c2030 50%, #00ff66 200%); }
.sk-retro     { background: #020a02; box-shadow: inset 0 0 0 1px #1d3a1d; background-image: repeating-linear-gradient(0deg, #050a05 0 2px, transparent 2px 4px), linear-gradient(135deg, #020a02, #0a160a); }
.sk-square    { background: #f6f7fa; border-color: #444; }
.sk-glass     { background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.02)); backdrop-filter: blur(4px); }
.sk-brutal    { background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 #ff5500; }
.sk-synth     { background: linear-gradient(180deg, #160a2a, #ff3eb5); }

/* === FOOTER === */
.app-footer {
  max-width: 1400px; margin: 0 auto;
  padding: 16px 24px 24px;
  display: flex; justify-content: space-between;
  color: var(--text-mute);
  font-size: 12px;
  font-family: var(--font-mono);
  flex-wrap: wrap; gap: 8px;
}

/* === Скроллбары === */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* === Selection === */
::selection { background: var(--accent); color: #0a0a0a; }
html.theme-light ::selection { color: #fff; }

/* === Mobile pad === */
@media (max-width: 600px) {
  .app-main { padding: 14px; }
  .header-inner { padding: 12px 14px; }
  .tabs { padding: 0 14px; }
  .card { padding: 14px; }
}

/* =====================================================================
   Улучшения v2.1: больше тем, фонов, постер справа, миниатюры скринов
===================================================================== */

.image-options,
.image-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}
.image-options .field,
.image-controls-grid .field { margin-bottom: 0; }
.auto-image-controls {
  margin: 4px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, var(--bg-elev-2), transparent);
}
.auto-image-controls .hint { margin: 8px 0 0; }
.input-grp input + input { margin-left: 0; }

.bb-preview .bb-float {
  max-width: min(42%, 380px);
  margin: 0 0 12px 16px;
  position: relative;
  z-index: 1;
}
.bb-preview .bb-float-left {
  float: left;
  margin: 0 16px 12px 0;
}
.bb-preview .bb-float-right { float: right; }
.bb-preview .bb-float img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(0,0,0,.28);
}
.bb-preview::after { content: ""; display: table; clear: both; }

/* --- Дополнительные скины --- */
html[data-skin="terminal"] { --radius: 4px; --radius-s: 3px; --font-ui: Consolas, "Courier New", monospace; --font-display: var(--font-ui); }
html[data-skin="terminal"].theme-dark { --bg:#030806; --bg-elev:#07120d; --bg-elev-2:#0b1d14; --border:#17452c; --text:#ccffe0; --text-dim:#78c99a; }
html[data-skin="terminal"] .card { box-shadow: inset 0 0 30px rgba(0,255,102,.06), 0 0 0 1px var(--border); }

html[data-skin="midnight"].theme-dark { --bg:#070b18; --bg-elev:#0d1428; --bg-elev-2:#121b34; --border:#26345f; --text:#e3e9ff; --text-dim:#91a0cb; }
html[data-skin="midnight"] .card { box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04); }

html[data-skin="neon"].theme-dark { --bg:#090014; --bg-elev:#140126; --bg-elev-2:#21023a; --border:#3a0a68; --text:#f8eaff; --text-dim:#c993e8; }
html[data-skin="neon"] .card, html[data-skin="neon"] .ctrl-btn:hover { box-shadow: 0 0 20px var(--accent-soft), 0 0 50px rgba(255,62,181,.08); }

html[data-skin="amoled"].theme-dark { --bg:#000; --bg-elev:#050505; --bg-elev-2:#0b0b0b; --border:#1c1c1c; --text:#f2f2f2; --text-dim:#a2a2a2; --shadow-card:none; }
html[data-skin="amoled"] .card { border-color:#222; }

html[data-skin="solar"].theme-light { --bg:#fff7df; --bg-elev:#fffdf4; --bg-elev-2:#fff1c2; --border:#e2c36b; --text:#332715; --text-dim:#795f2c; }
html[data-skin="solar"].theme-dark { --bg:#1a1204; --bg-elev:#241908; --bg-elev-2:#33240d; --border:#5d4318; --text:#ffe8b0; --text-dim:#c99f52; }

html[data-skin="paper"] { --radius: 7px; --radius-s: 5px; }
html[data-skin="paper"].theme-light { --bg:#eee8d8; --bg-elev:#fbf6e8; --bg-elev-2:#f2ead7; --border:#d2c3a5; --text:#2b2418; --text-dim:#6d604c; }
html[data-skin="paper"] .card { box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 12px 40px rgba(75,55,20,.08); }

html[data-skin="ocean"].theme-dark { --bg:#02131c; --bg-elev:#062232; --bg-elev-2:#0b3146; --border:#13516c; --text:#d7f6ff; --text-dim:#83c2d6; }
html[data-skin="forest"].theme-dark { --bg:#06100a; --bg-elev:#0b1c10; --bg-elev-2:#122b18; --border:#245b32; --text:#e1ffe7; --text-dim:#88c896; }
html[data-skin="lava"].theme-dark { --bg:#160503; --bg-elev:#240906; --bg-elev-2:#35100b; --border:#681d13; --text:#ffe4dc; --text-dim:#e29482; }
html[data-skin="ice"].theme-dark { --bg:#06131a; --bg-elev:#0d2230; --bg-elev-2:#143449; --border:#2b6687; --text:#e9fbff; --text-dim:#9ed6e8; }
html[data-skin="violet"].theme-dark { --bg:#10071e; --bg-elev:#1a0e31; --bg-elev-2:#251447; --border:#42236f; --text:#f1e7ff; --text-dim:#bda4e6; }
html[data-skin="gold"].theme-dark { --bg:#080704; --bg-elev:#11100a; --bg-elev-2:#1c180d; --border:#4d3e13; --text:#fff0bf; --text-dim:#c7a94d; }
html[data-skin="matrix"].theme-dark { --bg:#000700; --bg-elev:#031003; --bg-elev-2:#071a07; --border:#0d3e14; --text:#c8ffd0; --text-dim:#62b56f; --font-ui: Consolas, "Courier New", monospace; }
html[data-skin="mono"].theme-dark { --bg:#111; --bg-elev:#191919; --bg-elev-2:#222; --border:#444; --text:#eee; --text-dim:#aaa; }
html[data-skin="mono"] { filter: saturate(.18); }

/* Превью скинов в панели */
.sk-terminal { background: #031006; background-image: linear-gradient(#0f2, #0f2); background-size: 60% 2px; background-repeat:no-repeat; background-position:10px 18px; }
.sk-midnight { background: linear-gradient(135deg,#070b18,#26345f); }
.sk-neon { background: radial-gradient(circle,#ff3eb5 0 12%,#090014 35%,#22ffe5 140%); }
.sk-amoled { background:#000; box-shadow: inset 0 0 0 1px #333; }
.sk-solar { background: linear-gradient(135deg,#fff7df,#ffc83d); }
.sk-paper { background: linear-gradient(135deg,#fbf6e8,#d2c3a5); }
.sk-ocean { background: linear-gradient(135deg,#02131c,#00d2ff); }
.sk-forest { background: linear-gradient(135deg,#06100a,#0fbf6a); }
.sk-lava { background: linear-gradient(135deg,#160503,#ff5500); }
.sk-ice { background: linear-gradient(135deg,#06131a,#aeefff); }
.sk-violet { background: linear-gradient(135deg,#10071e,#bd00ff); }
.sk-gold { background: linear-gradient(135deg,#080704,#ffd700); }
.sk-matrix { background:#000700; background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,255,102,.5) 8px 10px); }
.sk-mono { background: linear-gradient(135deg,#111,#eee); }

/* --- 20 режимов фона --- */
@keyframes fxMove { to { background-position: 200px 200px; } }
@keyframes fxPulse { 50% { opacity:.45; transform: scale(1.05); } }
@keyframes fxDrift { to { transform: translate3d(40px,-40px,0) rotate(8deg); } }

html[data-bgfx="stars"] .bg-grid {
  background-image: radial-gradient(circle, var(--accent) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.5px);
  background-size: 90px 90px, 140px 140px; opacity:.45; animation: fxMove 18s linear infinite;
}
html[data-bgfx="orbs"] .bg-grad { background: radial-gradient(circle at 20% 20%, var(--accent-glow), transparent 24%), radial-gradient(circle at 75% 65%, var(--accent-soft), transparent 28%), radial-gradient(circle at 55% 35%, rgba(255,255,255,.08), transparent 22%); animation: fxPulse 7s ease-in-out infinite; }
html[data-bgfx="plasma"] .bg-grad { background: conic-gradient(from 90deg, var(--accent), var(--accent-2), #0000, var(--accent)); opacity:.28; animation: auroraSpin 18s linear infinite; }
html[data-bgfx="circuit"] .bg-grid { background-image: linear-gradient(var(--accent-soft) 2px, transparent 2px), linear-gradient(90deg,var(--accent-soft) 2px, transparent 2px), linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg,var(--border) 1px, transparent 1px); background-size: 120px 120px,120px 120px,24px 24px,24px 24px; opacity:.5; }
html[data-bgfx="scan"] .bg-grid { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px); background-size:auto; opacity:.55; animation: fxMove 12s linear infinite; }
html[data-bgfx="diagonal"] .bg-grid { background-image: repeating-linear-gradient(135deg, var(--border) 0 1px, transparent 1px 18px); background-size:auto; opacity:.45; animation: fxMove 16s linear infinite; }
html[data-bgfx="dots"] .bg-grid { background-image: radial-gradient(circle, var(--border) 0 2px, transparent 2px); background-size: 26px 26px; opacity:.55; }
html[data-bgfx="waves"] .bg-grid { background-image: repeating-radial-gradient(ellipse at center, transparent 0 20px, var(--border) 21px 22px); background-size: 180px 80px; opacity:.35; animation: fxMove 22s linear infinite; }
html[data-bgfx="nebula"] .bg-grad { background: radial-gradient(circle at 30% 20%, var(--accent-glow), transparent 30%), radial-gradient(circle at 70% 70%, var(--accent-2), transparent 30%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 45%); filter: blur(55px); opacity:.45; animation: fxDrift 12s ease-in-out infinite alternate; }
html[data-bgfx="tunnel"] .bg-grid { background-image: repeating-radial-gradient(circle at center, var(--border) 0 1px, transparent 2px 28px); background-size:auto; opacity:.45; animation: fxPulse 5s ease-in-out infinite; }
html[data-bgfx="rain"] .bg-grid { background-image: repeating-linear-gradient(100deg, transparent 0 24px, var(--accent-soft) 24px 26px, transparent 26px 48px); opacity:.4; animation: fxMove 4s linear infinite; }
html[data-bgfx="hex"] .bg-grid { background-image: linear-gradient(30deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)), linear-gradient(150deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)), linear-gradient(30deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)), linear-gradient(150deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)); background-size: 80px 140px; opacity:.35; }
html[data-bgfx="sunrise"] .bg-grad { background: radial-gradient(circle at 50% 120%, var(--accent-glow), transparent 35%), linear-gradient(180deg, transparent, rgba(255,122,0,.16)); opacity:.75; }
html[data-bgfx="frost"] .bg-grad { background: radial-gradient(circle at 30% 30%, rgba(174,239,255,.22), transparent 35%), radial-gradient(circle at 75% 60%, var(--accent-soft), transparent 30%); filter: blur(28px); }
html[data-bgfx="lava"] .bg-grad { background: radial-gradient(circle at 25% 75%, rgba(255,85,0,.32), transparent 28%), radial-gradient(circle at 70% 30%, rgba(255,42,77,.24), transparent 30%); filter: blur(35px); animation: fxPulse 6s ease infinite; }
html[data-bgfx="noise"] .bg-grid { background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 1px), radial-gradient(circle at 80% 10%, var(--accent-soft) 0 1px, transparent 1px); background-size: 7px 7px, 11px 11px; opacity:.45; }

@media (max-width: 700px) {
  .bb-preview .bb-float,
  .bb-preview .bb-float-left,
  .bb-preview .bb-float-right {
    float: none;
    max-width: 100%;
    margin: 0 0 12px 0;
  }
}

/* Панель с 20 вариантами фона должна переноситься, а не ломать ширину */
.settings-panel .seg { flex-wrap: wrap; align-items: center; }
.settings-panel .seg .seg-btn { flex: 1 1 auto; }
.skin-grid { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); }
.accent-picker.wide { max-height: none; }