/* Артефакты — «тёмное стекло» для веба.
   Язык взят из скила wpf-glass: почти чёрный фон с большими пятнами, полупрозрачные карточки r=24,
   градиентная обводка цветом акцента, цветная тень, крупный полужирный гротеск.
   Кнопки/поля/вкладки r=8, чипы r=6, никаких капсул. */

/* ---------- Токены ---------- */
:root {
  color-scheme: dark;
  --font: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card: 24px;
  --r-ctl: 8px;
  --r-chip: 6px;
  --ctl-h: 2.5rem;

  /* акцент: a1 — основной, a2/a3 — соседи для пятен фона */
  --a1: #8B5CF6; --a2: #EC4899; --a3: #3B82F6;
  --accent: var(--a1);

  /* тёмная схема */
  --bg: #07070C;
  --bg-2: #0B0B12;
  --bg-3: #0A0813;
  --text: #F4F6FB;
  --text-2: #A8B0C2;
  --muted: #8089A0;
  --divider: rgba(255, 255, 255, .10);
  --glass-1: rgba(255, 255, 255, .13);
  --glass-2: rgba(255, 255, 255, .045);
  --card-base: rgba(12, 13, 20, .60);
  --field: rgba(255, 255, 255, .06);
  --field-stroke: rgba(255, 255, 255, .15);
  --hover: rgba(255, 255, 255, .09);
  --hover-2: rgba(255, 255, 255, .14);
  --bar-bg: rgba(9, 9, 14, .66);
  --pop-bg: rgba(20, 21, 31, .94);
  --dlg-bg: rgba(15, 16, 24, .90);
  --scrim: rgba(3, 3, 8, .62);
  --shadow-c: rgba(0, 0, 0, .48);
  --blob-o: .42;
  --acc: var(--accent);
  --acc-text: color-mix(in srgb, var(--acc) 52%, #fff);
  --acc-on: #fff;
  --danger: #FB7185;
  --danger-text: #FDA4AF;
  --ok: #4ADE80;
  --ph-k: 70%;
  --ph-base: #05050A;
  --dome: rgba(255, 255, 255, .055);
  --overlay-btn: rgba(8, 8, 14, .62);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5FA;
  --bg-2: #FBFBFE;
  --bg-3: #EDEEF6;
  --text: #12141C;
  --text-2: #4B5366;
  --muted: #626A7C;
  --divider: rgba(18, 20, 28, .11);
  --glass-1: rgba(255, 255, 255, .92);
  --glass-2: rgba(255, 255, 255, .62);
  --card-base: rgba(255, 255, 255, .20);
  --field: rgba(255, 255, 255, .78);
  --field-stroke: rgba(18, 20, 28, .17);
  --hover: rgba(18, 20, 28, .06);
  --hover-2: rgba(18, 20, 28, .10);
  --bar-bg: rgba(244, 245, 250, .74);
  --pop-bg: rgba(255, 255, 255, .96);
  --dlg-bg: rgba(250, 250, 254, .94);
  --scrim: rgba(30, 34, 52, .34);
  --shadow-c: rgba(42, 48, 69, .16);
  --blob-o: .34;
  --acc: color-mix(in srgb, var(--accent) 84%, #20243a);
  --acc-text: color-mix(in srgb, var(--accent) 58%, #000);
  --danger: #DC2626;
  --danger-text: #B91C1C;
  --ok: #0F9D58;
  --ph-k: 78%;
  --ph-base: #fff;
  --dome: color-mix(in srgb, var(--acc) 9%, transparent);
}

html[data-accent="ember"]    { --a1: #FF6B45; --a2: #EC4899; --a3: #F59E0B; }
html[data-accent="cobalt"]   { --a1: #3B82F6; --a2: #8B5CF6; --a3: #22D3EE; }
html[data-accent="emerald"]  { --a1: #10A37F; --a2: #22D3EE; --a3: #84CC16; }
html[data-accent="violet"]   { --a1: #8B5CF6; --a2: #EC4899; --a3: #3B82F6; }
html[data-accent="cyan"]     { --a1: #22D3EE; --a2: #3B82F6; --a3: #10A37F; }
html[data-accent="magenta"]  { --a1: #EC4899; --a2: #8B5CF6; --a3: #FF6B45; }
html[data-accent="amber"]    { --a1: #F59E0B; --a2: #FF6B45; --a3: #84CC16; }
html[data-accent="lime"]     { --a1: #84CC16; --a2: #10A37F; --a3: #F59E0B; }
html[data-accent="rose"]     { --a1: #FB7185; --a2: #EC4899; --a3: #FF6B45; }
html[data-accent="graphite"] { --a1: #8E98AC; --a2: #3B82F6; --a3: #8B5CF6; }

/* производные от акцента (считаются на <html>, где лежат и тема, и акцент) */
:root {
  --acc-stroke: color-mix(in srgb, var(--acc) 62%, transparent);
  --acc-line: color-mix(in srgb, var(--acc) 34%, transparent);
  --acc-wash: color-mix(in srgb, var(--acc) 14%, transparent);
  --acc-glow: color-mix(in srgb, var(--acc) 26%, transparent);
  --acc-glow-2: color-mix(in srgb, var(--acc) 46%, transparent);
  --acc-btn-1: color-mix(in srgb, var(--acc) 64%, #000);
  --acc-btn-2: color-mix(in srgb, var(--acc) 44%, #000);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: 16px;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent;
}
@media (min-width: 2200px) { html { font-size: 18px; } }
@media (min-width: 3000px) { html { font-size: 20px; } }
@media (max-width: 700px), (pointer: coarse) { :root { --ctl-h: 2.75rem; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  background: transparent;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
svg { display: block; flex: none; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--acc) 40%, transparent); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 38%, transparent); background-clip: content-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Фон: пятна ---------- */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 55%, var(--bg-3) 100%);
}
.bg i {
  position: absolute; display: block; border-radius: 50%;
  width: 72vmax; height: 72vmax; opacity: var(--blob-o);
  will-change: transform;
  animation: drift 48s ease-in-out infinite alternate;
}
.bg i:nth-child(1) { left: -24vmax; top: -30vmax; background: radial-gradient(closest-side, var(--a1), transparent); }
.bg i:nth-child(2) { right: -28vmax; top: -16vmax; background: radial-gradient(closest-side, var(--a2), transparent); animation-duration: 58s; animation-delay: -12s; }
.bg i:nth-child(3) { left: 8%; bottom: -44vmax; background: radial-gradient(closest-side, var(--a3), transparent); animation-duration: 66s; animation-delay: -30s; }
.bg i:nth-child(4) { right: -22vmax; bottom: -38vmax; width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 55%, var(--a3)), transparent); animation-duration: 52s; animation-delay: -5s; opacity: calc(var(--blob-o) * .8); }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bg i { animation: none; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Стекло ---------- */
.glass {
  position: relative;
  border-radius: var(--r-card);
  background:
    linear-gradient(135deg, var(--glass-1) 0%, var(--glass-2) 60%, transparent 100%),
    linear-gradient(135deg, var(--acc-wash), transparent 72%),
    var(--card-base);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 14px 44px var(--shadow-c), 0 6px 34px var(--acc-glow);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, var(--acc-stroke) 0%, var(--acc-line) 48%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- Кнопки, поля ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--ctl-h); min-width: var(--ctl-h); padding: 0 .95rem;
  border-radius: var(--r-ctl);
  border: 1px solid var(--field-stroke);
  background: var(--field);
  color: var(--text);
  font-size: .9rem; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.btn:hover { background: var(--hover-2); border-color: var(--acc-stroke); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn.icon { padding: 0; width: var(--ctl-h); }
.btn svg { width: 1.2rem; height: 1.2rem; }
.btn.icon svg { width: 1.3rem; height: 1.3rem; }
.btn.sm { height: 2.1rem; min-width: 2.1rem; padding: 0 .7rem; font-size: .82rem; }
.btn.sm.icon { width: 2.1rem; padding: 0; }
@media (max-width: 700px), (pointer: coarse) { .btn.sm { height: 2.75rem; min-width: 2.75rem; } .btn.sm.icon { width: 2.75rem; } }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--hover); border-color: transparent; }
.btn.primary {
  color: var(--acc-on); border-color: var(--acc-stroke);
  background: linear-gradient(135deg, var(--acc-btn-1), var(--acc-btn-2));
  box-shadow: 0 6px 24px var(--acc-glow);
}
.btn.primary:hover { filter: brightness(1.12); border-color: var(--acc-stroke); background: linear-gradient(135deg, var(--acc-btn-1), var(--acc-btn-2)); }
.btn.danger {
  color: #fff; border-color: color-mix(in srgb, #EF4444 70%, transparent);
  background: linear-gradient(135deg, #B91C1C, #7F1D1D);
  box-shadow: 0 6px 24px rgba(239, 68, 68, .28);
}
.btn.danger:hover { filter: brightness(1.12); background: linear-gradient(135deg, #B91C1C, #7F1D1D); border-color: #F87171; }
.btn.lg { height: 3rem; font-size: 1rem; }
.btn.toggle[aria-pressed="true"] { background: var(--acc-wash); border-color: var(--acc-stroke); color: var(--acc-text); }
.btn.ov { background: var(--overlay-btn); border-color: rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.ov:hover { background: rgba(8, 8, 14, .85); border-color: var(--acc-stroke); }
.btn .swatch { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 40%, transparent), 0 0 14px var(--acc-glow-2); }

.theme-sun, .theme-moon { display: none; }
html:not([data-theme="light"]) .theme-sun { display: block; }
html[data-theme="light"] .theme-moon { display: block; }

.input, .textarea {
  width: 100%; height: var(--ctl-h); padding: 0 .85rem;
  border-radius: var(--r-ctl);
  border: 1px solid var(--field-stroke); background: var(--field); color: var(--text);
  font-size: 1rem; line-height: 1.3;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.textarea { height: auto; min-height: 5.5rem; padding: .65rem .85rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .textarea:hover { border-color: var(--acc-line); }
.input:focus, .textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-wash); }
.lbl { display: block; margin: 0 0 .35rem; font-size: .82rem; font-weight: 600; color: var(--text-2); }

.chip {
  display: inline-flex; align-items: center; gap: .3rem; height: 1.5rem; padding: 0 .5rem;
  border-radius: var(--r-chip); font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--acc-text); background: var(--acc-wash); border: 1px solid var(--acc-line);
}
.chip svg { width: .85rem; height: .85rem; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-ctl); border: 1px solid var(--field-stroke); background: var(--field); }
.seg-b {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--ctl-h) - 8px); width: calc(var(--ctl-h) - 4px);
  border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-2); cursor: pointer;
}
.seg-b:hover { background: var(--hover); color: var(--text); }
.seg-b[aria-pressed="true"] { background: var(--acc-wash); border-color: var(--acc-stroke); color: var(--acc-text); }
.seg-b svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 700px), (pointer: coarse) {
  .seg { padding: 0; border: 0; background: none; gap: .35rem; }
  .seg-b { width: var(--ctl-h); height: var(--ctl-h); border-radius: var(--r-ctl); border-color: var(--field-stroke); background: var(--field); }
  .seg-b[aria-pressed="true"] { background: var(--acc-wash); border-color: var(--acc-stroke); }
}

/* ---------- Шапка галереи ---------- */
.wrap { width: 100%; max-width: 140rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.25rem); }
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bar-bg); border-bottom: 1px solid var(--divider);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; order: 0; }
.brand-ico { width: 2.1rem; height: 2.1rem; color: var(--acc-text); }
.brand-ico svg { width: 100%; height: 100%; }
.brand h1 { font-size: 1.55rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.1; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 28rem; order: 1; min-width: 0; }
.tools { display: flex; align-items: center; gap: .5rem; order: 2; margin-left: auto; }
@media (max-width: 1180px) {
  .tools { order: 1; }
  .toolbar { order: 2; flex: 1 1 100%; }
}

.search { position: relative; flex: 1 1 14rem; min-width: 0; max-width: 34rem; display: block; }
.search .input { padding-left: 2.6rem; padding-right: 2.8rem; }
.search .s-ico { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .s-ico svg { width: 1.2rem; height: 1.2rem; }
.kbd {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-chip); border: 1px solid var(--field-stroke); color: var(--muted);
  font: 600 .75rem/1 var(--mono); pointer-events: none;
}
.search input::-webkit-search-cancel-button { display: none; }

.show-m { display: none !important; }
@media (max-width: 700px) {
  .hide-m { display: none !important; }
  .show-m { display: inline-flex !important; }
  .brand h1 { font-size: 1.35rem; }
  .brand .c-t { display: none; }
  .kbd { display: none; }
  .search { max-width: none; flex-basis: 100%; }
  #sort-btn { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
  #sort-btn .lbl-t { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .brand-ico { display: none; }
  #prev-btn .lbl-t { display: none; }
  #prev-btn { width: var(--ctl-h); padding: 0; }
}
@media (pointer: coarse) { .kbd { display: none; } }

/* ---------- Основная область ---------- */
.main { padding-top: 1.5rem; padding-bottom: 4rem; }
.sec + .sec { margin-top: 2.25rem; }
.sec-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem .15rem; }
.sec-head h2 { font-size: 1.1rem; font-weight: 700; color: var(--text-2); letter-spacing: .01em; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* ---------- Плитка ---------- */
.tile {
  --p1: #8B5CF6; --p2: #EC4899;
  display: flex; flex-direction: column; min-width: 0;
  transition: transform .2s ease, box-shadow .25s ease;
}
.tile:hover, .tile:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px var(--shadow-c), 0 10px 56px var(--acc-glow-2);
}
.t-domes {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle var(--dr, 5.5rem) at calc(100% - var(--dx, 3rem)) calc(100% + var(--dy, 2.5rem)), var(--dome) 0 98%, transparent 100%),
    radial-gradient(circle at calc(100% + 1rem) calc(100% + 1rem), var(--acc-glow) 0, transparent 14rem);
}
.thumb {
  position: relative; z-index: 1; flex: none; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; border-radius: 23px 23px 0 0;
  border-bottom: 1px solid var(--divider);
  --s: .25;
}
.ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .14), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--p1) var(--ph-k), var(--ph-base)), color-mix(in srgb, var(--p2) var(--ph-k), var(--ph-base)));
}
.ph span { font-size: 4.5rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .94); text-shadow: 0 4px 24px rgba(0, 0, 0, .28); letter-spacing: -.02em; }
.frame { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .35s ease; background: #fff; }
.frame.ready { opacity: 1; }
.frame iframe {
  position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; display: block;
  transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; background: #fff;
}

.t-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: 1rem 1.2rem 1.15rem; min-width: 0; }
.t-head { min-width: 0; }
.t-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere;
}
.t-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); z-index: 1; }
.t-title a:focus-visible { outline: none; }
.t-title a:focus-visible::after { outline: 2px solid var(--acc); outline-offset: 3px; }
.t-pin { display: inline-block; vertical-align: -.15em; margin-right: .35rem; color: var(--acc-text); }
.t-pin svg { width: 1.05rem; height: 1.05rem; fill: currentColor; fill-opacity: .25; }
.t-slug { display: none; font: .78rem/1.3 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: .92rem; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere;
}
.t-desc:empty { display: none; }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: .35rem; font-size: .8rem; color: var(--muted); }
.t-meta span + span::before { content: "·"; margin: 0 .45em; }
.m-ver { font-weight: 700; color: var(--acc-text); }

.t-actions { position: absolute; z-index: 3; top: .65rem; right: .65rem; display: flex; gap: .35rem; opacity: 0; transition: opacity .15s; }
.tile:hover .t-actions, .tile:focus-within .t-actions, .t-actions.open { opacity: 1; }
@media (hover: none), (max-width: 700px) { .t-actions { opacity: 1; } }

/* ---------- Список ---------- */
[data-view="list"] .grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
[data-view="list"] .tile {
  display: grid; align-items: center; gap: .9rem; padding: .6rem .9rem; border-radius: 16px;
  grid-template-columns: 2.75rem minmax(0, 1.5fr) minmax(0, 2.4fr) 3rem 8.5rem 5rem 3.5rem auto;
}
[data-view="list"] .tile:hover, [data-view="list"] .tile:focus-within { transform: none; }
[data-view="list"] .glass::before, [data-view="list"] .tile::before { border-radius: 16px; }
[data-view="list"] .t-title a::after { border-radius: 16px; }
[data-view="list"] .t-domes { display: none; }
[data-view="list"] .thumb { width: 2.75rem; aspect-ratio: 1; border-radius: 10px; border: 0; }
[data-view="list"] .ph span { font-size: 1.35rem; text-shadow: none; }
[data-view="list"] .frame { display: none; }
[data-view="list"] .t-body, [data-view="list"] .t-meta { display: contents; }
[data-view="list"] .t-title, [data-view="list"] .t-desc { -webkit-line-clamp: 1; }
[data-view="list"] .t-title { font-size: 1rem; }
[data-view="list"] .t-slug { display: block; }
[data-view="list"] .t-desc:empty { display: block; }
[data-view="list"] .t-meta span + span::before { content: none; }
[data-view="list"] .t-meta span { font-size: .85rem; white-space: nowrap; }
[data-view="list"] .t-actions { position: static; }
[data-view="list"] .t-actions .btn.ov { background: var(--field); border-color: var(--field-stroke); color: var(--text); }
[data-view="list"] .t-actions .btn.ov:hover { background: var(--hover-2); border-color: var(--acc-stroke); }
@media (max-width: 1100px) {
  [data-view="list"] .tile { grid-template-columns: 2.75rem minmax(0, 1.4fr) minmax(0, 2fr) 3rem 8rem auto; }
  [data-view="list"] .m-size, [data-view="list"] .m-by { display: none; }
}
@media (max-width: 700px) {
  [data-view="list"] .tile {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas: "th head act" "th meta meta";
    row-gap: .15rem; padding: .7rem .8rem;
  }
  [data-view="list"] .thumb { grid-area: th; align-self: start; }
  [data-view="list"] .t-head { grid-area: head; }
  [data-view="list"] .t-actions { grid-area: act; }
  [data-view="list"] .t-meta { grid-area: meta; display: flex; flex-wrap: wrap; }
  [data-view="list"] .t-meta span + span::before { content: "·"; margin: 0 .4em; }
  [data-view="list"] .m-size, [data-view="list"] .m-by { display: inline; }
  [data-view="list"] .t-desc { display: none; }
  [data-view="list"] .btn.open-btn, [data-view="list"] .btn.copy-btn { display: none; }
}

/* ---------- Состояния ---------- */
.skeletons { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.skel { aspect-ratio: 4 / 3.3; border-radius: var(--r-card); background: linear-gradient(110deg, var(--glass-2) 30%, var(--glass-1) 50%, var(--glass-2) 70%) 0 0 / 220% 100%; border: 1px solid var(--divider); animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.state { max-width: 48rem; margin: 3rem auto 0; padding: 2rem clamp(1.1rem, 4vw, 2rem); text-align: center; overflow: hidden; }
.state > * { position: relative; z-index: 1; }
.state-ico { display: inline-flex; width: 3.6rem; height: 3.6rem; align-items: center; justify-content: center; margin-bottom: .8rem; border-radius: 16px; color: var(--acc-text); background: var(--acc-wash); border: 1px solid var(--acc-line); }
.state-ico svg { width: 1.9rem; height: 1.9rem; }
.state h2 { font-size: 1.7rem; font-weight: 750; line-height: 1.2; }
.state p { margin-top: .5rem; color: var(--text-2); }
.state .actions { margin-top: 1.25rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.state .howto-slot { text-align: left; margin-top: 1.5rem; }

/* ---------- Команды деплоя ---------- */
.howto { display: grid; gap: .75rem; }
.howto .note { font-size: .9rem; color: var(--text-2); }
.cmd {
  position: relative; display: flex; align-items: flex-start; gap: .5rem;
  padding: .7rem .6rem .7rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--divider);
}
.cmd pre { flex: 1; min-width: 0; margin: 0; font: .84rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.cmd .btn { flex: none; }
.cmd .c-dim { color: var(--muted); }

/* ---------- Меню-поповер ---------- */
.popmenu {
  position: fixed; z-index: 2000; min-width: 13rem; max-width: min(22rem, calc(100vw - 16px)); padding: 6px;
  border-radius: 14px; background: var(--pop-bg);
  border: 1px solid var(--acc-line);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 18px 56px var(--shadow-c), 0 6px 30px var(--acc-glow);
  animation: pop .14s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.mi {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: var(--ctl-h); padding: 0 .75rem;
  border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--text);
  font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer;
}
.mi:hover, .mi:focus-visible { background: var(--hover-2); outline: none; }
.mi:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); }
.mi .mi-ico { color: var(--text-2); }
.mi .mi-ico svg { width: 1.15rem; height: 1.15rem; }
.mi .mi-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi .mi-hint { color: var(--muted); font-size: .8rem; font-weight: 500; }
.mi .mi-check { color: var(--acc-text); width: 1.1rem; }
.mi .mi-check svg { width: 1.1rem; height: 1.1rem; }
.mi.danger, .mi.danger .mi-ico { color: var(--danger-text); }
.mi-sep { height: 1px; margin: 5px 4px; background: var(--divider); }
.sw-grid { display: grid; grid-template-columns: repeat(5, 2.9rem); gap: 2px; padding: 4px; justify-content: center; }
.sw-title { padding: .45rem .6rem .25rem; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.sw-b { display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: var(--r-ctl); background: transparent; cursor: pointer; color: #fff; }
.sw-b:hover { background: var(--hover-2); }
.sw-b i { display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 3px 12px color-mix(in srgb, var(--c) 55%, transparent); }
.sw-b[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--pop-bg), 0 0 0 4px var(--c), 0 3px 14px color-mix(in srgb, var(--c) 60%, transparent); }
.sw-b svg { width: 1rem; height: 1rem; stroke-width: 3; opacity: 0; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.sw-b[aria-pressed="true"] svg { opacity: 1; }

/* ---------- Диалоги ---------- */
dialog.dlg {
  width: 100%; max-width: min(34rem, calc(100vw - 1.5rem)); padding: 0; margin: auto; border: 0; background: transparent;
  color: var(--text); overflow: visible;
}
dialog.dlg.wide { max-width: min(54rem, calc(100vw - 1.5rem)); }
dialog.dlg::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.dlg[open] { animation: dlg-in .18s ease-out; }
dialog.dlg[open]::backdrop { animation: fade-in .18s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
.dlg-card {
  max-height: calc(100dvh - 1.5rem); overflow: auto; padding: 1.4rem 1.5rem 1.3rem;
  background: linear-gradient(135deg, var(--glass-1) 0%, var(--glass-2) 60%, transparent 100%), linear-gradient(135deg, var(--acc-wash), transparent 70%), var(--dlg-bg);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 10px 70px var(--acc-glow-2);
}
@media (max-width: 480px) { .dlg-card { padding: 1.1rem 1rem 1rem; } }
.dlg-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.dlg-head h2 { flex: 1; min-width: 0; font-size: 1.35rem; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.dlg-body { display: grid; gap: .9rem; }
.dlg-body p { color: var(--text-2); overflow-wrap: anywhere; }
.dlg-body p b { color: var(--text); }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; }
@media (max-width: 480px) { .dlg-actions .btn { flex: 1 1 auto; } }
.empty-line { padding: 1.2rem; text-align: center; color: var(--muted); }

/* версии */
.vtable { display: grid; gap: .4rem; }
.vrow, .vhead {
  display: grid; align-items: center; gap: .15rem .8rem;
  grid-template-columns: 7.6rem 9.6rem 3.6rem 4.6rem 4.6rem minmax(0, 1fr);
  grid-template-areas: "n date by size files act" "note note note note note note";
}
.vrow { padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--divider); background: color-mix(in srgb, var(--text) 4%, transparent); }
.vrow.cur { border-color: var(--acc-stroke); background: var(--acc-wash); }
.vhead { padding: 0 .8rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); grid-template-areas: "n date by size files act"; }
.v-n { grid-area: n; display: flex; align-items: center; gap: .4rem; font-weight: 800; }
.v-meta { display: contents; }
.v-date { grid-area: date; } .v-by { grid-area: by; } .v-size { grid-area: size; } .v-files { grid-area: files; }
.v-date, .v-by, .v-size, .v-files { font-size: .88rem; color: var(--text-2); white-space: nowrap; }
.v-act { grid-area: act; display: flex; justify-content: flex-end; gap: .35rem; flex-wrap: wrap; }
.v-note { grid-area: note; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.v-note:empty { display: none; }
@media (max-width: 700px) {
  .vhead { display: none; }
  .vrow { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n act" "meta meta" "note note"; row-gap: .4rem; }
  .v-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
}

/* ---------- Тосты ---------- */
.toasts {
  position: fixed; inset: auto 1.25rem 1.25rem auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; width: max-content; max-width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 12px;
  background: var(--pop-bg); color: var(--text); font-size: .92rem; font-weight: 600;
  border: 1px solid var(--acc-stroke); box-shadow: 0 14px 44px var(--shadow-c), 0 4px 26px var(--acc-glow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: toast-in .22s ease-out; pointer-events: auto;
}
.toast.err { border-color: color-mix(in srgb, #EF4444 70%, transparent); }
.toast.err svg { color: var(--danger); }
.toast.ok svg { color: var(--ok); }
.toast svg { width: 1.2rem; height: 1.2rem; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 700px) {
  .toasts { inset: auto 1rem 1rem 1rem; width: auto; max-width: none; align-items: center; }
}

/* ---------- Вход ---------- */
.corner { position: fixed; top: .75rem; right: .75rem; display: flex; gap: .5rem; z-index: 5; }
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 5rem 1rem 2rem; }
.login-card { width: 100%; max-width: 25rem; padding: 2.1rem 1.8rem 1.8rem; display: grid; gap: 1rem; overflow: hidden; }
.login-card > :not(.t-domes) { position: relative; z-index: 1; }
.login-logo { width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--acc-text); background: var(--acc-wash); border: 1px solid var(--acc-line); box-shadow: 0 8px 32px var(--acc-glow); }
.login-logo svg { width: 1.8rem; height: 1.8rem; }
.login-card h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.login-card .sub { margin-top: -.55rem; color: var(--text-2); }
.form-err { padding: .6rem .8rem; border-radius: var(--r-ctl); color: var(--danger-text); background: color-mix(in srgb, #EF4444 14%, transparent); border: 1px solid color-mix(in srgb, #EF4444 45%, transparent); font-size: .92rem; font-weight: 600; }
.login-card .btn.primary { margin-top: .3rem; width: 100%; }

/* ---------- Просмотрщик ---------- */
body.viewer { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; --ctl-h: 2.25rem; }
@media (max-width: 700px), (pointer: coarse) { body.viewer { --ctl-h: 2.75rem; } }
.vbar {
  flex: none; height: 3rem; min-height: 48px; display: flex; align-items: center; gap: .4rem; padding: 0 .5rem; position: relative; z-index: 20;
  background: var(--bar-bg); border-bottom: 1px solid var(--acc-line);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
.v-title { flex: 1 1 auto; min-width: 0; padding: 0 .5rem; font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-tools { display: flex; align-items: center; gap: .3rem; }
.vbar .btn { min-width: var(--ctl-h); }
#ver-btn { padding: 0 .7rem; gap: .35rem; font-variant-numeric: tabular-nums; }
#ver-btn svg { width: 1rem; height: 1rem; }
.vnote {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; padding: .5rem .75rem;
  background: color-mix(in srgb, var(--acc) 22%, var(--bar-bg)); border-bottom: 1px solid var(--acc-stroke);
  font-weight: 600; z-index: 15;
}
.vnote .sp { flex: 1; }
.stage { flex: 1 1 auto; min-height: 0; position: relative; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.stage .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fs-exit { position: fixed; top: .6rem; right: .6rem; z-index: 30; opacity: .45; transition: opacity .2s; }
.fs-exit:hover, .fs-exit:focus-visible { opacity: 1; }
body.fs .vbar, body.fs .vnote { display: none; }
body.nf #reload-btn, body.nf #copy-btn, body.nf #fs-btn { display: none; }
body.viewer .state { margin-top: 15vh; }

.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }