/* SkinFlow — минималистичный интерфейс, тема берётся из Telegram */
:root, :root[data-theme="dark"] {
  --bg: #0e0e11;
  --bg2: #18181d;
  --text: #f1f1f3;
  --hint: #8b8b95;
  --accent: #6c8cff;
  --accent-text: #ffffff;
  --danger: #ff5a6a;
  --ok: #2fc27a;
  --warn: #f2a93b;
  --art-bg: #0e0e11;   /* фон под PNG/SVG — совпадает с темой */
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #f1f2f5;
  --text: #16161a;
  --hint: #7b7d87;
  --accent: #4566f5;
  --accent-text: #ffffff;
  --danger: #e2384b;
  --ok: #1fa565;
  --warn: #d98a12;
  --art-bg: #ffffff;
  color-scheme: light;
}
:root {
  --line: color-mix(in srgb, var(--text) 9%, transparent);
  --card: color-mix(in srgb, var(--bg2) 80%, var(--bg));
  --soft: color-mix(in srgb, var(--text) 6%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --r: 18px;
  --r-s: 12px;
  --gap: 12px;
  --sat: max(env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --sal: max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px));
  --sar: max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px));
  --app-h: 100dvh;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

svg[viewBox="0 0 24 24"] { width: 20px; height: 20px; flex-shrink: 0; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; }
body { font-size: 15px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
.hint { color: var(--hint); font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Каркас ─────────────────────────────────────────── */
#app {
  position: fixed; left: 0; right: 0; top: 0;
  height: var(--app-h);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  padding-left: var(--sal); padding-right: var(--sar);
}
#app.booting #nav, #app.booting #top { visibility: hidden; }
#top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--sat) + 10px) 16px 8px;
  min-height: 52px;
}
#top h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-l { min-width: 0; }
.top-r { display: flex; gap: 6px; flex-shrink: 0; }
#view { position: relative; min-height: 0; overflow: hidden; }
.page { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(24px);
  scrollbar-width: thin;
}
.wrap { max-width: 980px; margin: 0 auto; width: 100%; }

#nav {
  display: flex; justify-content: space-around; align-items: stretch;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 4px 6px calc(var(--sab) + 4px);
}
#nav button {
  flex: 1; max-width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border-radius: 12px;
  color: var(--hint); font-size: 11px; font-weight: 500;
  position: relative; transition: color .15s;
}
#nav button svg { width: 24px; height: 24px; }
#nav button.on { color: var(--accent); }
#nav .badge { position: absolute; top: 2px; left: calc(50% + 6px); }

/* Ландшафт на телефоне: навигация уходит в боковую колонку */
@media (orientation: landscape) and (max-height: 560px) {
  #app { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #nav {
    grid-column: 1; grid-row: 1 / 3; flex-direction: column; justify-content: center;
    border-top: 0; border-right: 1px solid var(--line);
    padding: calc(var(--sat) + 4px) 4px calc(var(--sab) + 4px);
    width: 76px;
  }
  #nav button { flex: 0 0 auto; padding: 8px 2px; }
  #top { grid-column: 2; padding-top: calc(var(--sat) + 6px); min-height: 44px; }
  #view { grid-column: 2; }
}

/* ── Элементы ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 14px;
  background: var(--soft); font-weight: 600; font-size: 15px;
  transition: transform .12s var(--ease), opacity .15s, background .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--danger); }
.btn.ok { background: var(--ok); color: #fff; }
.btn.block { width: 100%; }
.btn.sm { height: 34px; padding: 0 12px; border-radius: 11px; font-size: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--soft); color: var(--text);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.on { background: var(--accent-soft); color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 550; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}

.seg {
  display: flex; padding: 3px; gap: 3px; border-radius: 13px; background: var(--soft);
}
.seg button { flex: 1; height: 34px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--hint); white-space: nowrap; padding: 0 8px; }
.seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }

.section { margin: 18px 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.section h2 { font-size: 15px; font-weight: 650; }
.section .hint { font-size: 12px; }

.panel { background: var(--card); border-radius: var(--r); padding: 14px; }
.panel + .panel { margin-top: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--hint); }
.input {
  height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  padding: 0 12px; outline: none; width: 100%;
}
.input:focus { border-color: var(--accent); }
textarea.input { height: 120px; padding: 10px 12px; resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.switch { position: relative; width: 48px; height: 30px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 15px; background: var(--soft); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }

.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 32px 24px; color: var(--hint); min-height: 220px;
}
.empty svg { width: 56px; height: 56px; opacity: .5; }
.empty b { color: var(--text); font-size: 16px; }

/* ── Свайп-лента ────────────────────────────────────── */
.feed { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px 12px; gap: 12px; }
.feed-bar { display: flex; gap: 8px; align-items: center; min-width: 0; }
.feed-bar .chip { cursor: pointer; }
.deck { position: relative; flex: 1; min-height: 160px; width: 100%; max-width: 560px; margin: 0 auto; }
.card {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  background: var(--art-bg); box-shadow: 0 10px 40px rgb(0 0 0 / .25);
  touch-action: none; user-select: none; will-change: transform;
  transition: transform .35s var(--ease), opacity .3s;
}
.card.dragging { transition: none; }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--art-bg); }
.card .meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgb(0 0 0 / .78)); color: #fff;
}
.card .meta b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta span { font-size: 13px; opacity: .78; }
.stamp {
  position: absolute; top: 22px; padding: 6px 14px; border: 3px solid; border-radius: 12px;
  font-weight: 800; font-size: 22px; letter-spacing: .06em; opacity: 0; text-transform: uppercase;
  background: rgb(0 0 0 / .25);
}
.stamp.yes { left: 18px; color: var(--ok); transform: rotate(-12deg); }
.stamp.no { right: 18px; color: var(--danger); transform: rotate(12deg); }
.card.under { transform: scale(.95) translateY(10px); opacity: .7; pointer-events: none; }
.card.under2 { transform: scale(.9) translateY(20px); opacity: .35; pointer-events: none; }
.deck-actions { display: flex; justify-content: center; align-items: center; gap: 18px; padding-bottom: 2px; }
.round {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: 0 4px 16px rgb(0 0 0 / .12);
  transition: transform .12s var(--ease);
}
.round:active { transform: scale(.92); }
.round svg { width: 28px; height: 28px; }
.round.no { color: var(--danger); }
.round.yes { color: var(--ok); }
.round.small { width: 46px; height: 46px; }
.round.small svg { width: 20px; height: 20px; }
.round[disabled] { opacity: .35; pointer-events: none; }

@media (orientation: landscape) and (max-height: 560px) {
  .feed { flex-direction: row; align-items: stretch; padding-bottom: 8px; }
  .feed-bar { position: absolute; top: 0; left: 16px; right: 16px; z-index: 2; }
  .feed .deck { margin-top: 40px; }
  .deck-actions { flex-direction: column; justify-content: center; gap: 12px; padding-top: 40px; }
  .round { width: 54px; height: 54px; }
}

/* ── Карусели ───────────────────────────────────────── */
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 340px);
  gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 2px 16px 10px; scroll-padding: 0 16px;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; min-width: 0; }
.carousel.wide { grid-auto-columns: min(88%, 420px); }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .2s, background .2s; }
.dots i.on { width: 16px; background: var(--accent); }

.job {
  background: var(--card); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.job .pic { position: relative; aspect-ratio: 4 / 3; background: var(--art-bg); cursor: zoom-in; }
.job .pic > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.job .pic .tl { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; right: 60px; }
.job .pic .tr { position: absolute; top: 8px; right: 8px; }
.job .body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.job .body b { font-size: 15px; }
.job .acts { display: flex; gap: 8px; }
.job .acts .btn { flex: 1; }
.job.alert { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 60%, transparent); }
.job.big .pic { aspect-ratio: 1 / 1; }
.job .pic .chip { background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(6px); }
.job .pic .chip.accent { background: var(--accent); color: var(--accent-text); }

.ring { width: 46px; height: 46px; position: relative; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: rgb(255 255 255 / .25); }
.ring .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring span { font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; position: relative; }
.ring-wrap { background: rgb(0 0 0 / .55); border-radius: 50%; backdrop-filter: blur(6px); }
.ring.low .fg { stroke: var(--warn); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kpi { background: var(--card); border-radius: 14px; padding: 10px; min-width: 0; }
.kpi b { font-size: 20px; display: block; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11px; color: var(--hint); }

/* ── Плитки подборок ────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile {
  background: var(--card); border-radius: var(--r); padding: 14px; text-align: left;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  transition: transform .12s var(--ease);
}
.tile:active { transform: scale(.97); }
.tile .cover { aspect-ratio: 1; border-radius: 14px; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.tile .cover img { width: 62%; height: 62%; object-fit: contain; }
.tile b { font-size: 15px; display: block; }
.tile.add { align-items: center; justify-content: center; color: var(--accent); border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; min-height: 150px; }
.tile.add svg { width: 30px; height: 30px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--art-bg); box-shadow: inset 0 0 0 1px var(--line); }
.thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgb(0 0 0 / .75)); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .st { position: absolute; top: 6px; left: 6px; }
.thumb .st .chip { height: 22px; font-size: 11px; padding: 0 8px; background: rgb(0 0 0 / .55); color: #fff; }
.thumb .st .chip.ok { background: var(--ok); }
.thumb .st .chip.bad { background: var(--danger); }
.thumb .st .chip.accent { background: var(--accent); color: var(--accent-text); }
.thumb.sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.thumb .check { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 0 0 / .4); border: 2px solid #fff; }
.thumb.sel .check { background: var(--accent); }

/* ── Списки ─────────────────────────────────────────── */
.list { background: var(--card); border-radius: var(--r); overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; min-height: 56px; }
.item + .item { border-top: 1px solid var(--line); }
.ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; color: #fff; font-size: 15px; }
.item .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.item .tags .chip { height: 22px; font-size: 11px; padding: 0 8px; }

.mode {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; width: 100%; text-align: left;
  border-radius: 14px; background: var(--bg); border: 1.5px solid var(--line);
  transition: border-color .15s, background .15s;
}
.mode + .mode { margin-top: 8px; }
.mode .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--hint); flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; }
.mode.on { border-color: var(--accent); background: var(--accent-soft); }
.mode.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.mode .box svg { width: 14px; height: 14px; }
.mode.off { opacity: .4; }
.mode b { display: block; font-size: 15px; }
.mode span { font-size: 13px; color: var(--hint); }

.drop {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: var(--hint); background: color-mix(in srgb, var(--accent) 5%, transparent);
  width: 100%; transition: background .15s;
}
.drop.over { background: var(--accent-soft); }
.drop svg { width: 34px; height: 34px; color: var(--accent); }
.drop b { color: var(--text); }
.progress { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }

/* ── Слои: шторка, просмотр, тост ──────────────────── */
#layer > * { position: fixed; inset: 0; z-index: 50; }
.backdrop { background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .25s; }
.backdrop.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: min(88vh, calc(var(--app-h) - var(--sat) - 24px));
  background: var(--bg); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(105%); transition: transform .3s var(--ease);
  padding-bottom: var(--sab);
  max-width: 640px; margin: 0 auto;
}
.sheet.show { transform: none; }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 2px; flex-shrink: 0; }
.sheet .sh-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; gap: 10px; flex-shrink: 0; }
.sheet .sh-head h3 { font-size: 17px; }
.sheet .sh-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; min-height: 0; }
@media (orientation: landscape) and (max-height: 560px) {
  .sheet { max-height: calc(var(--app-h) - 12px); }
}

.viewer { background: var(--art-bg); display: flex; flex-direction: column; }
.viewer .vbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--sat) + 8px) 12px 8px; z-index: 2; background: linear-gradient(color-mix(in srgb, var(--bg) 80%, transparent), transparent); color: var(--text); gap: 12px; }
.viewer .vbar .icon-btn { background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.viewer .vimg { flex: 1; min-height: 0; overflow: hidden; touch-action: none; display: grid; place-items: center; }
.viewer .vimg img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; transition: transform .2s; }
.viewer .vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px calc(var(--sab) + 14px); background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent)); color: var(--text); z-index: 2; }

/* Водяной знак с именем смотрящего — сдерживает утечки скриншотами */
.wm { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; opacity: .5; z-index: 1; }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 84px); transform: translate(-50%, 20px);
  background: color-mix(in srgb, var(--text) 92%, transparent); color: var(--bg);
  padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 550;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease);
  z-index: 100; max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: var(--danger); color: #fff; }

.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--soft); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.gate { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.gate .logo { width: 64px; height: 64px; }
.gate .stack { width: min(360px, 100%); }

@media (min-width: 900px) {
  .scroll { padding-left: 24px; padding-right: 24px; }
  .carousel { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 160px)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Полноэкранная страница поверх (подборка) */
.full { background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s var(--ease); padding-left: var(--sal); padding-right: var(--sar); height: var(--app-h); }
.full.show { transform: none; }
.full .f-head { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 10px) 16px 10px; }
.full .f-head h2 { font-size: 19px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.full .f-head .cov { width: 32px; height: 32px; border-radius: 9px; background: var(--soft); display: grid; place-items: center; flex-shrink: 0; }
.full .f-head .cov img { width: 22px; height: 22px; }
.full .scroll { padding-bottom: calc(var(--sab) + 24px); }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.presets button { aspect-ratio: 1; border-radius: 12px; background: var(--soft); display: grid; place-items: center; border: 2px solid transparent; }
.presets button img { width: 60%; height: 60%; }
.presets button.on { border-color: var(--accent); }
.linkbox { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; background: var(--soft); padding: 10px 12px; border-radius: 12px; user-select: all; }
.banner { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); margin-bottom: 4px; }
.banner svg { width: 20px; height: 20px; color: var(--warn); flex-shrink: 0; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper b { min-width: 34px; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; }

.btn svg { width: 18px; height: 18px; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button svg { width: 16px; height: 16px; }
.card { box-shadow: 0 10px 40px rgb(0 0 0 / .25), inset 0 0 0 1px var(--line); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); pointer-events: none; }
.kpi span { display: block; line-height: 1.2; }
.card.under .meta, .card.under2 .meta, .card.under .stamp, .card.under2 .stamp { opacity: 0 !important; }

/* ── v2: тема, черновики, кадры ───────────────────── */
.card .meta .colm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; background: rgb(255 255 255 / .18); backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; }
.card .meta .colm svg { width: 13px; height: 13px; }
.thumb.png > img, .tab.png > img { object-fit: contain; }
.viewer .vnav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.viewer .vnav.l { left: 10px; }
.viewer .vnav.r { right: 10px; }
.viewer .vnav.r svg { transform: scaleX(-1); }

.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); margin: 4px 0 12px; font-size: 14px; }
.note svg { color: var(--accent); margin-top: 1px; }

.tabs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 3px 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: 0 0 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--art-bg); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.tab img { width: 100%; height: 100%; object-fit: cover; }
.tab span { position: absolute; left: 4px; bottom: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgb(0 0 0 / .6); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tab.on { box-shadow: 0 0 0 2.5px var(--accent); }
.tab.add { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); cursor: pointer; }
.tab.up { background: var(--soft); padding: 0 10px; }
.tab.up .progress { width: 100%; }
.tab.err { color: var(--danger); cursor: pointer; }
.draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: var(--card); border-radius: var(--r); padding: 12px; }
.dprev { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--art-bg); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.dprev img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (min-width: 640px), (orientation: landscape) and (max-height: 560px) {
  .draft { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { cursor: pointer; }
.chips .chip img { border-radius: 3px; }
.sendbar { position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(transparent, var(--bg) 35%); z-index: 2; }

.steps { margin: 0; padding-left: 20px; color: var(--hint); font-size: 13px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fileline { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 12px; background: var(--soft); font-size: 13px; }
.fileline svg { color: var(--accent); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 9px; }
.icon-btn.sm svg { width: 15px; height: 15px; }
.frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.frame { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--art-bg); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.frame img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.frame i { position: absolute; left: 3px; bottom: 3px; font-style: normal; font-size: 10px; font-weight: 700; background: rgb(0 0 0 / .55); color: #fff; border-radius: 6px; padding: 0 5px; }
.frame button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; display: grid; place-items: center; }
.frame button svg { width: 11px; height: 11px; }
.job.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px var(--accent); } }
:root[data-theme="light"] .card { box-shadow: 0 8px 30px rgb(0 0 0 / .10), inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .round { box-shadow: 0 4px 16px rgb(0 0 0 / .08), 0 0 0 1px var(--line); }
:root[data-theme="light"] .seg button.on { box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
:root[data-theme="light"] .panel, :root[data-theme="light"] .list, :root[data-theme="light"] .job, :root[data-theme="light"] .tile, :root[data-theme="light"] .kpi, :root[data-theme="light"] .draft { box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="light"] .card::after { box-shadow: none; }
#themeBtn svg { transition: transform .35s var(--ease); }
#themeBtn:active svg { transform: rotate(40deg); }
.gate-theme { position: absolute; top: calc(var(--sat) + 12px); right: 16px; }

/* ── v3: подборки на каждой карточке, фильтры, архив ── */
.filters { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 0 6px; scrollbar-width: none; min-width: 0; }
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex-shrink: 0; cursor: pointer; }
.colchip img { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; flex-shrink: 0; }
.colchip.accent img { background: rgb(255 255 255 / .6); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; margin-left: 2px; }
.chip.onpic { background: rgb(0 0 0 / .62) !important; color: #fff !important; backdrop-filter: blur(6px); font-weight: 650; }
.chip.mini { height: 22px; font-size: 11px; padding: 0 7px 0 4px; gap: 4px; background: rgb(0 0 0 / .55); color: #fff; }
.chip.mini img { width: 14px; height: 14px; }
.feed-bar { min-height: 36px; }
.feed-bar .filters { flex: 1; }
.card .meta .colm img { width: 16px; height: 16px; object-fit: contain; }
.tile.open { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent); }
.tile-tags { margin: 6px 0 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.tile-tags .chip { height: 24px; font-size: 11.5px; padding: 0 9px; }
.tile .cover img { width: 72%; height: 72%; }
.cap .capcov { width: 14px; height: 14px; vertical-align: -3px; margin-right: 4px; border-radius: 3px; background: rgb(255 255 255 / .7); }
.drop.disabled { opacity: .45; pointer-events: none; }
.item > svg:last-child { transform: scaleX(-1); color: var(--hint); width: 16px; height: 16px; }
.job .pic .tl { right: 64px; }
.thumb .st { right: 34px; }
@media (orientation: landscape) and (max-height: 560px) {
  .feed-bar { left: 16px; right: 92px; }
}

.job .pic .tl .chip, .thumb .st .chip { flex: 0 0 auto; max-width: 100%; }
.thumb .st { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── v3.1: единый вид чипа подборки (обложка в рамке + название с многоточием) ── */
.chip.colchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 4px; max-width: 100%; min-width: 0; line-height: 1; }
.chip.colchip > img { display: none; }
.colchip .cov { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; background: rgb(255 255 255 / .92); display: grid; place-items: center; overflow: hidden; font-style: normal; }
.colchip .cov img { width: 18px !important; height: 18px !important; object-fit: contain; display: block; position: static !important; }
.colchip .cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colchip .cc { flex: 0 0 auto; opacity: .7; font-weight: 500; }
.colchip .cc::before { content: "·"; margin-right: 6px; }
.chip.colchip.onpic { height: 28px; }
.card .meta .chip.colchip { margin-bottom: 8px; max-width: 80%; }
.job .pic .tl { align-items: center; }
.job .pic .tl .chip { height: 28px; }
.thumb .cap .capcov { width: 15px; height: 15px; padding: 1px; border-radius: 4px; background: rgb(255 255 255 / .92); object-fit: contain; vertical-align: -3px; }

/* «Хочу отрисовать» */
.wantbox { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; }
.wantbox.on { box-shadow: inset 0 0 0 1.5px var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--bg)); }
.wantbox.off { opacity: .5; cursor: default; }
.wantbox b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.wantbox b svg { width: 16px; height: 16px; color: var(--ok); }
.wantbox .hint { display: block; margin-top: 2px; }
.tab .want { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.tab .want svg { width: 12px; height: 12px; }
.thumb .st .chip.ok svg { width: 12px; height: 12px; }
.wantm { font-style: normal; display: inline-flex; align-items: center; gap: 3px; color: #7dffb8; font-weight: 600; }
.wantm svg { width: 12px; height: 12px; }