:root {
  --bg: #0b0c0f;
  --bg-2: #111318;
  --panel: #15171d;
  --panel-2: #1b1e25;
  --line: #262a33;
  --line-2: #323744;
  --text: #e8eaef;
  --muted: #8b91a0;
  --faint: #5c6270;
  --accent: #8b7cff;
  --accent-2: #6c5cf5;
  --accent-soft: rgba(139, 124, 255, .14);
  --ok: #3ecf8e;
  --warn: #f5b041;
  --err: #f0616d;
  --radius: 12px;
  --radius-sm: 8px;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--mono); }
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; }

.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #4fd1c5); font-size: 17px;
}
.brand-name { font-weight: 700; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--faint); }

.search { padding: 0 12px 10px; }
.search input {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line); outline: none;
}
.search input:focus { border-color: var(--accent); }

.model-nav { flex: 1; overflow: auto; padding: 4px 8px; }
.nav-group { margin: 10px 0 4px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 8px 10px; border-radius: var(--radius-sm); border: 0; background: none; cursor: pointer;
  color: var(--muted);
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--text); }
.nav-item .dot { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--panel-2); font-size: 13px; flex: none; }
.nav-item.active .dot { background: var(--accent); }
.nav-item .nav-name { font-weight: 500; line-height: 1.2; }
.nav-item .nav-sub { font-size: 11px; color: var(--faint); }
.nav-empty { padding: 12px 10px; color: var(--faint); font-size: 13px; }
.nav-soon { margin: 14px 8px 0; padding: 10px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); color: var(--faint); font-size: 12px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.credits {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line);
}
.credits-label { color: var(--muted); font-size: 12px; }
.credits-value { font-family: var(--mono); font-weight: 500; }

.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 18px 28px 16px; border-bottom: 1px solid var(--line);
}
.crumbs { font-size: 12px; color: var(--faint); }
.crumbs .sep { margin: 0 6px; }
.topbar h1 { margin: 2px 0 2px; font-size: 22px; letter-spacing: -.02em; }
.topbar p { margin: 0; max-width: 680px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.model-id { font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); color: var(--muted); }

.panes { flex: 1; display: grid; grid-template-columns: minmax(400px, 500px) 1fr; min-height: 0; }

/* ---------- composer ---------- */
.composer { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.composer form { flex: 1; overflow: auto; padding: 0 20px 20px; }
.tabs[hidden] + form { padding-top: 18px; }
.composer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg-2);
}

.tabs { display: flex; gap: 4px; flex-wrap: wrap; row-gap: 6px; padding: 16px 20px 12px; }
.tab {
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer;
  color: var(--muted); font-size: 12.5px; white-space: nowrap;
}
.tab:hover { color: var(--text); border-color: var(--line-2); }
.tab.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 500; }

.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 16px; }
.label { font-size: 13px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.label .req { color: var(--accent); margin-left: 3px; }
.label .count { font-weight: 400; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.hint { font-size: 12px; color: var(--faint); }

input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 9px 11px; border-radius: var(--radius-sm); outline: none;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field.invalid textarea, .field.invalid .dropzone { border-color: var(--err); }

/* media */
.dropzone {
  border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--panel);
  padding: 14px; display: grid; gap: 10px; transition: border-color .15s, background .15s;
}
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.drop-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drop-cta .muted { font-size: 13px; }
.url-row { display: flex; gap: 6px; }
.url-row input { font-size: 13px; padding: 7px 10px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center;
}
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb .file-ico { font-size: 11px; color: var(--muted); padding: 6px; text-align: center; word-break: break-all; }
.thumb .tag { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-family: var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); }
.thumb .rm { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); cursor: pointer; font-size: 12px; line-height: 1; }
.thumb .rm:hover { background: var(--err); }
.thumb .overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); font-size: 11px; }
.thumb.error { border-color: var(--err); }

/* settings */
.settings { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 4px; margin-bottom: 12px; background: var(--bg-2); }
.settings summary { cursor: pointer; padding: 10px 14px; font-weight: 500; font-size: 13px; list-style: none; display: flex; justify-content: space-between; }
.settings summary::after { content: '+'; color: var(--faint); }
.settings[open] summary::after { content: '–'; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 4px 14px 2px; }
.settings-grid .field { margin-bottom: 12px; }
.payload { margin: 0; padding: 12px 14px; font-size: 12px; color: var(--muted); overflow: auto; max-height: 260px; border-top: 1px solid var(--line); }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.toggle input { display: none; }
.switch { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + .switch { background: var(--accent); }
.toggle input:checked + .switch::after { transform: translateX(14px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; text-decoration: none; font-weight: 500; font-size: 13px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-2); background: var(--panel-2); }
.btn.ghost { background: transparent; }
.btn.full { width: 100%; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; padding: 10px 18px; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.disabled { opacity: .55; pointer-events: none; }
.btn kbd { font-size: 11px; opacity: .7; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.15); }

/* ---------- results ---------- */
.results { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.results-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 12px; }
.results-head h2 { margin: 0; font-size: 15px; }
.seg { display: flex; padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button.active { background: var(--panel-2); color: var(--text); }

.results-grid {
  flex: 1; overflow: auto; padding: 0 24px 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: max-content; gap: 16px; align-content: start;
}
.empty {
  grid-column: 1 / -1; border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 48px 24px; text-align: center; color: var(--muted);
}
.empty .big { font-size: 28px; margin-bottom: 6px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card > *, .asset > * { flex-shrink: 0; }
.card-media { aspect-ratio: 16/9; background: #07080a; display: grid; place-items: center; position: relative; }
.card-media video, .card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-body { padding: 12px 14px; display: grid; gap: 8px; }
.card-prompt { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; font-family: var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.card-err { font-size: 12px; color: var(--err); background: rgba(240,97,109,.08); border: 1px solid rgba(240,97,109,.25); padding: 8px 10px; border-radius: var(--radius-sm); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.success { color: var(--ok); }
.status.fail { color: var(--err); }
.status.pending { color: var(--warn); }
.status.pending::before { animation: pulse 1.2s infinite; }

.pending-art { display: grid; place-items: center; gap: 10px; color: var(--muted); font-size: 12px; width: 100%; height: 100%;
  background: linear-gradient(110deg, #0e0f13 30%, #1a1c24 50%, #0e0f13 70%); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- checks / estimate ---------- */
.checks { list-style: none; margin: 0; padding: 10px 20px; display: grid; gap: 5px; border-top: 1px solid var(--line); max-height: 150px; overflow: auto; background: var(--bg-2); }
.checks li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.checks li::before { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; margin-top: 1px; }
.checks li.error { color: #f7a1a8; }
.checks li.error::before { content: '!'; background: rgba(240,97,109,.2); color: var(--err); }
.checks li.warn { color: #f3cf8f; }
.checks li.warn::before { content: 'i'; background: rgba(245,176,65,.18); color: var(--warn); }

.foot-info { display: grid; gap: 2px; min-width: 0; }
.estimate { font-size: 13px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.estimate b { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.estimate .sub { font-size: 11.5px; color: var(--faint); }
.estimate.over b { color: var(--err); }
.estimate.none { color: var(--faint); font-size: 12px; }

.thumb .bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.thumb .bar > i { display: block; height: 100%; background: var(--accent); transition: width .15s; }
.thumb .bar.indeterminate > i { width: 35% !important; animation: slide 1.1s ease-in-out infinite; }
.thumb .overlay { align-content: center; gap: 4px; }
.thumb .tag ~ .meta { top: 4px; left: 4px; right: auto; bottom: auto; }
.thumb .meta { position: absolute; right: 4px; bottom: 4px; font-size: 10px; font-family: var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); }
.thumb.warn { border-color: var(--warn); }
.thumb .flag { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--err); color: #fff; }
.thumb.warn .flag { background: var(--warn); color: #000; }
.thumb .checking { position: absolute; top: 5px; left: 5px; width: 14px; height: 14px; border-width: 2px; }

.chip.saved { color: var(--ok); border-color: rgba(62,207,142,.35); }
.chip.sent { color: #9fd8f7; border-color: rgba(42,171,238,.45); }
.chip.expired { color: var(--warn); border-color: rgba(245,176,65,.35); }
.folder-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.folder-path { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); }
.dialog .field + .field { margin-top: 6px; }

/* ---------- uploads page ---------- */
.uploads-page { flex: 1; display: grid; grid-template-columns: minmax(340px, 420px) 1fr; min-height: 0; }
.upload-intake { border-right: 1px solid var(--line); padding: 20px; overflow: auto; display: grid; gap: 18px; align-content: start; }
.bigdrop {
  border: 1.5px dashed var(--line-2); border-radius: 16px; padding: 34px 20px; text-align: center;
  display: grid; gap: 8px; justify-items: center; background: var(--bg-2); transition: border-color .15s, background .15s;
}
.bigdrop.drag { border-color: var(--accent); background: var(--accent-soft); }
.bigdrop-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.bigdrop-title { font-weight: 600; font-size: 15px; }
.bigdrop .btn { margin-top: 8px; }
.import-url { display: grid; gap: 8px; }

.queue { display: grid; gap: 8px; }
.queue:empty { display: none; }
.queue .q-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-state { font-size: 12px; color: var(--muted); }
.q-state.ok { color: var(--ok); }
.q-state.err { color: var(--err); }
.q-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.q-bar > i { display: block; height: 100%; background: var(--accent); transition: width .15s; }
.q-bar.indeterminate > i { width: 35% !important; animation: slide 1.1s ease-in-out infinite; }
.q-msg { grid-column: 1 / -1; font-size: 12px; color: var(--err); }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

.library { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.library .results-head { flex-wrap: wrap; gap: 10px; }
.library-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.library-tools input[type=search] { width: 180px; padding: 6px 10px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.library-tools input[type=search]:focus { border-color: var(--accent); }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); }

.library-grid, .picker-grid {
  grid-auto-rows: max-content;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-content: start;
}
.library-grid { flex: 1; overflow: auto; padding: 0 24px 24px; }
.asset { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.asset.expired { opacity: .45; }
.asset-media { aspect-ratio: 4/3; background: #07080a; display: grid; place-items: center; overflow: hidden; }
.asset-media img, .asset-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-media .big-ico { font-size: 30px; }
.asset-media audio { width: 90%; }
.asset-body { padding: 9px 11px; display: grid; gap: 4px; }
.asset-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.asset-meta .exp.soon { color: var(--warn); }
.asset-meta .exp.gone { color: var(--err); }
.asset-actions { display: flex; gap: 4px; padding: 0 11px 10px; }
.asset-actions .btn { padding: 4px 8px; font-size: 11.5px; }
.asset-actions .btn:last-child { margin-left: auto; }

.picker-grid { max-height: 60vh; overflow: auto; padding: 2px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picker-grid .asset { cursor: pointer; }
.picker-grid .asset:hover { border-color: var(--line-2); }
.picker-grid .asset.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.picker-grid .asset .pick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(0,0,0,.4); display: grid; place-items: center; font-size: 12px; }
.picker-grid .asset.selected .pick { background: var(--accent); border-color: var(--accent); }
.picker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.picker-head h3 { margin: 0 0 2px; }
.dialog.wide { width: min(860px, 94vw); }
.drop-cta .cta-btns { display: flex; gap: 6px; }

.nav-item .nav-badge { margin-left: auto; font-size: 11px; font-family: var(--mono); color: var(--faint); }

/* ---------- video editor ---------- */
.ve-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ve-head h3 { margin: 0; }
.ve-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.dialog.ve-dialog { width: min(860px, 96vw); padding: 0; }
.ve-body { padding: 14px 18px; display: grid; gap: 12px; }
.ve-stage { position: relative; height: min(52vh, 480px); background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.ve-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ve-crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none; border-radius: 2px; }
.ve-loading { position: absolute; inset: 0; display: flex; gap: 10px; align-items: center; justify-content: center; background: rgba(0,0,0,.6); font-size: 13px; color: var(--muted); }
.ve-loading .spinner { width: 20px; height: 20px; border-width: 2px; }
.ve-controls { display: flex; align-items: center; gap: 8px; }
.ve-time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ve-track { position: relative; height: 40px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; user-select: none; touch-action: none; }
.ve-range { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.ve-range.too-long { background: rgba(240,97,109,.15); border-color: var(--err); }
.ve-handle { position: absolute; top: -3px; bottom: -3px; width: 12px; margin-left: -6px; border-radius: 4px; background: var(--accent); cursor: ew-resize; z-index: 2; }
.ve-handle::after { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; background: rgba(255,255,255,.7); }
.ve-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; pointer-events: none; z-index: 1; }
.ve-fields { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ve-fields input { width: 76px; padding: 5px 8px; font-size: 12.5px; margin-left: 4px; }
.ve-length { font-family: var(--mono); font-size: 12.5px; }
.ve-length.bad { color: var(--err); }

.post-recreate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--accent-2), #d6249f); box-shadow: 0 6px 20px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .15s, transform .15s;
}
.post:hover .post-recreate, .post-recreate:focus-visible { opacity: 1; }
.post-recreate:hover { transform: translate(-50%, -50%) scale(1.05); }
.thumb .trim { position: absolute; top: 4px; right: 28px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; }
.thumb .trim:hover { background: var(--accent); }

/* ---------- telegram ---------- */
#telegramView h1 { display: flex; align-items: center; gap: 10px; }
.tg-logo { width: 26px; height: 26px; border-radius: 50%; background: #2aabee; color: #fff; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.tg-page { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(380px, 620px) 1fr; }
.tg-body { padding: 20px 24px; display: grid; gap: 14px; align-content: start; overflow: auto; border-right: 1px solid var(--line); }
.tg-step { display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.tg-log { padding: 20px 24px; overflow: auto; min-width: 0; }
.tg-log-list { display: grid; gap: 8px; }
.tg-log-item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.tg-log-item .ico { font-size: 14px; }
.tg-log-item .main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-log-item .when { font-size: 11.5px; color: var(--faint); }
.tg-log-item .sub { grid-column: 2 / -1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-log-item.fail { border-color: rgba(240,97,109,.35); }
.tg-log-item.fail .sub { color: #f7a1a8; white-space: normal; }
@media (max-width: 1000px) { .tg-page { grid-template-columns: 1fr; overflow: auto; } .tg-body { border-right: 0; overflow: visible; } .tg-log { overflow: visible; } }
.tg-step.disabled { opacity: .45; pointer-events: none; }
.hint.bad, #backupStatus.bad { color: #f3cf8f; }
.tg-step-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tg-step-title b { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: #cfc8ff; font-size: 11px; display: grid; place-items: center; }
.tg-howto { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.tg-connected { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 11px; border-radius: 9px; background: var(--bg-2); border: 1px solid rgba(62,207,142,.35); font-size: 13px; }
.tg-connected > span { flex: 1; }
.tg-chats { display: grid; gap: 6px; }
.tg-chats:empty { display: none; }
.tg-chat { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.tg-chat .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-chat .k { font-size: 11px; color: var(--faint); font-family: var(--mono); }
.tg-chat.default { border-color: rgba(42,171,238,.55); }
.tg-find { display: grid; gap: 8px; }
.tg-find .btn { justify-self: start; }
.btn.tg { border-color: rgba(42,171,238,.45); color: #9fd8f7; }
.btn.tg:hover { background: rgba(42,171,238,.15); border-color: #2aabee; }
.btn.tg.sent { color: var(--ok); border-color: rgba(62,207,142,.45); }
.btn.va { border-color: rgba(245,176,65,.45); color: #f8cf86; }
.btn.va:hover { background: rgba(245,176,65,.14); border-color: var(--warn); }
.chip.va-sent { color: #f8cf86; border-color: rgba(245,176,65,.45); }
.btn.sp { border-color: rgba(139,124,255,.45); color: #cfc8ff; }
.btn.sp:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- templates ---------- */
.tpl-preview { font-size: 12.5px; line-height: 1.5; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; white-space: pre-wrap; max-height: 180px; overflow: auto; }
.tpl-preview mark { background: rgba(245,176,65,.2); color: var(--warn); border-radius: 3px; padding: 0 2px; }
.tpl-preview:empty { display: none; }
.dialog.tpl-dialog { width: min(820px, 96vw); padding: 0; }
.tpl-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 420px; }
.tpl-list { border-right: 1px solid var(--line); padding: 12px; display: grid; gap: 6px; align-content: start; max-height: 70vh; overflow: auto; }
.tpl-item { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; display: grid; gap: 2px; }
.tpl-item:hover { background: var(--panel-2); }
.tpl-item.active { background: var(--accent-soft); border-color: rgba(139,124,255,.4); }
.tpl-item b { font-size: 13px; font-weight: 600; }
.tpl-item span { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-edit { padding: 14px 18px; }
.tpl-edit textarea { min-height: 150px; }
.tpl-models { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-models label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.tpl-models label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tpl-models input { accent-color: var(--accent); }
.tpl-btn { font-weight: 500; font-size: 12px; padding: 3px 9px; }

/* ---------- recreate ---------- */
.dialog.rc-dialog { width: min(980px, 96vw); padding: 0; }
.rc-layout { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; max-height: 74vh; }
.rc-video { position: relative; background: #000; display: grid; place-items: center; min-height: 420px; }
.rc-video video { max-width: 100%; max-height: 74vh; display: block; }
.rc-side { padding: 14px 18px; overflow: auto; display: grid; gap: 4px; align-content: start; }
.rc-side .field { margin-bottom: 12px; }
.rc-source { margin-bottom: 6px; }
.rc-clip { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.rc-clip.bad { border-color: rgba(240,97,109,.5); color: #f7a1a8; }
.rc-clip.ok { border-color: rgba(62,207,142,.4); }
.rc-models { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-outfit { display: grid; gap: 10px; padding: 8px; border-radius: 10px; background: var(--bg-2); border: 1px dashed var(--line-2); }
.rc-outfit.has { border-style: solid; border-color: rgba(139,124,255,.45); }
.rc-outfit.drag { border-color: var(--accent); background: var(--accent-soft); }
.rc-outfit-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-outfit-item { position: relative; width: 58px; height: 72px; flex: none; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; font-size: 22px; }
.rc-outfit-item img { width: 100%; height: 100%; object-fit: cover; }
.rc-outfit-item .overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); font-size: 10px; color: #fff; }
.rc-outfit-item .ref { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; text-align: center; font-family: var(--mono); font-size: 9.5px; color: #fff; background: rgba(0,0,0,.6); }
.rc-outfit-item .rm { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; line-height: 1; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.rc-outfit-item:hover .rm, .rc-outfit-item .rm:focus-visible { opacity: 1; }
.rc-outfit-item .rm:hover { background: var(--err); }
.rc-outfit-item.empty .rm, .rc-outfit-item.empty .ref { display: none; }
.rc-outfit-main { min-width: 0; display: grid; gap: 6px; }
.rc-outfit-name { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-outfit.has .rc-outfit-name { color: var(--text); }
.rc-outfit-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-models .preset-chip.none { padding-left: 10px; }
.rc-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#rcFields .field { margin: 8px 0 0; }
@media (max-width: 760px) { .rc-layout, .tpl-layout { grid-template-columns: 1fr; } .rc-video { min-height: 240px; } }

/* ---------- generations ---------- */
.gen-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.gen-toolbar input[type=search] { width: 240px; padding: 7px 11px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.gen-toolbar input[type=search]:focus { border-color: var(--accent); }
.gen-toolbar select { width: auto; padding: 6px 28px 6px 10px; font-size: 12.5px; }
#genCount { margin-left: auto; }
.gen-grid {
  flex: 1; overflow: auto; padding: 18px 24px 32px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: max-content; gap: 16px; align-content: start;
}
.gen-grid .card-actions { flex-wrap: wrap; }
.card-media { position: relative; overflow: hidden; }
/* Pin media to the frame so tall (9:16) videos can't stretch the card. */
.card-media > video, .card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gen-grid .card-media { aspect-ratio: 4 / 5; }
.card-expand {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 15px; display: grid; place-items: center; opacity: 0; transition: opacity .15s;
}
.card:hover .card-expand, .card-expand:focus-visible { opacity: 1; }
.card-expand:hover { background: rgba(0,0,0,.85); }
.chip.model { color: var(--text); border-color: var(--line-2); }
.gen-day { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.gen-day:first-child { margin-top: 0; }

.lightbox { width: min(1280px, 96vw); height: min(860px, 92vh); padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: #050506; color: var(--text); overflow: hidden; }
.lightbox[open] { display: grid; grid-template-columns: 1fr 340px; }
.lightbox::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(3px); }
.lb-media { display: grid; place-items: center; min-width: 0; min-height: 0; background: #000; }
.lb-media video, .lb-media img { max-width: 100%; max-height: min(860px, 92vh); object-fit: contain; display: block; }
.lb-side { border-left: 1px solid var(--line); background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.lb-head { display: flex; justify-content: space-between; align-items: center; }
.lb-model { font-size: 17px; font-weight: 600; }
.lb-prompt { font-size: 13px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; max-height: 40vh; overflow: auto; }
.lb-prompt:empty { display: none; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
@media (max-width: 860px) { .lightbox[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .lb-side { border-left: 0; border-top: 1px solid var(--line); max-height: 40vh; } }

/* ---------- my models ---------- */
.mm-grid { flex: 1; overflow: auto; padding: 20px 24px 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: max-content; gap: 16px; align-content: start; }
.mm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.mm-card > * { flex-shrink: 0; }
.mm-cover { position: relative; aspect-ratio: 4 / 5; background: var(--bg-2); cursor: pointer; overflow: hidden; }
.mm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.mm-card:hover .mm-cover img { transform: scale(1.02); }
.mm-cover .empty-cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--faint); font-size: 12px; text-align: center; }
.mm-cover .empty-cover b { font-size: 28px; font-weight: 400; }
.mm-strip { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.mm-strip img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 1.5px solid rgba(255,255,255,.8); }
.mm-strip .more { width: 30px; height: 30px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; display: grid; place-items: center; }
.mm-body { padding: 11px 12px 6px; display: grid; gap: 4px; }
.mm-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-prompt { font-size: 12px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.mm-actions { display: flex; gap: 6px; padding: 6px 12px 12px; }
.mm-actions .btn { flex: 1; }
.mm-new { border: 1.5px dashed var(--line-2); border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 6px; min-height: 280px; color: var(--muted); cursor: pointer; background: none; font-size: 13px; }
.mm-new:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.mm-new b { font-size: 30px; font-weight: 300; }

.dialog.mm-dialog { width: min(620px, 94vw); padding: 0; max-height: 92vh; }
.mm-dialog[open] { display: flex; flex-direction: column; }
.mm-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mm-dialog-head h3 { margin: 0; }
.mm-dialog-body { padding: 18px 20px 4px; overflow: auto; }
.mm-dialog-body textarea { min-height: 110px; }
.mm-dialog-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.btn.danger { color: #f7a1a8; }
.btn.danger:hover { background: rgba(240,97,109,.12); border-color: rgba(240,97,109,.4); }
.mm-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mm-images:empty { display: none; }
.mm-img { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1.5px solid var(--line); background: var(--panel-2); }
.mm-img.cover { border-color: var(--warn); }
.mm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-img .star, .mm-img .del { position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 12px; display: grid; place-items: center; }
.mm-img .star { left: 4px; }
.mm-img .del { right: 4px; }
.mm-img.cover .star { color: var(--warn); }
.mm-img .del:hover { background: var(--err); }
.mm-img .dims { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-family: var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); }
.mm-img.warn { border-color: var(--err); }
.mm-img .overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); font-size: 11px; }

/* preset strip inside model forms */
.presets { display: flex; align-items: center; gap: 6px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: thin; }
.tabs[hidden] + .presets { padding-top: 16px; }
.presets .presets-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); flex: none; margin-right: 2px; }
.preset-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--muted); position: relative;
}
.preset-chip:hover { color: var(--text); border-color: var(--line-2); }
.preset-chip img, .preset-chip .av-fallback { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.preset-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.preset-chip.loading { opacity: .7; pointer-events: none; }
.preset-chip .x { margin-left: 2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(255,255,255,.1); }
.preset-chip .x:hover { background: var(--err); color: #fff; }
.preset-add { flex: none; font-size: 12px; color: var(--faint); background: none; border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.preset-add:hover { color: var(--text); border-color: var(--accent); }
.tabs[hidden] + .presets[hidden] + form { padding-top: 18px; }

/* ---------- inspo ---------- */
.ig-glyph {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-block; position: relative;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.ig-glyph::before { content: ''; position: absolute; inset: 24%; border: 2px solid #fff; border-radius: 30%; }
.ig-glyph::after { content: ''; position: absolute; width: 3px; height: 3px; top: 20%; right: 20%; background: #fff; border-radius: 50%; }
.ig-glyph.sm { width: 16px; height: 16px; border-radius: 5px; }
.ig-glyph.sm::before { border-width: 1.5px; }
.ig-glyph.sm::after { width: 2px; height: 2px; }
.btn-count { font-family: var(--mono); font-size: 11px; opacity: .75; }
.btn.spinning svg { animation: spin .9s linear infinite; }

.inspo-toolbar { display: grid; gap: 10px; padding: 14px 24px 10px; border-bottom: 1px solid var(--line); }
.source-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.source-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 12.5px; color: var(--muted);
}
.source-chip:hover { color: var(--text); border-color: var(--line-2); }
.source-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.source-chip.all { padding-left: 11px; }
.source-chip img, .source-chip .av-fallback { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.source-chip .n { font-family: var(--mono); font-size: 10.5px; opacity: .6; }
.source-chip.error { border-color: rgba(240,97,109,.5); }
.inspo-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inspo-filters .sort { display: inline-flex; align-items: center; gap: 6px; }
.inspo-filters select { width: auto; padding: 5px 28px 5px 10px; font-size: 12.5px; }
#inspoCount { margin-left: auto; }

.inspo-grid {
  flex: 1; overflow: auto; padding: 16px 24px 90px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: max-content; gap: 14px; align-content: start;
}
.post { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.post > * { flex-shrink: 0; }
.post.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.post.hidden-post { opacity: .55; }
.post-media { position: relative; aspect-ratio: 4 / 5; background: #07080a; cursor: pointer; overflow: hidden; }
.post-media.reel { aspect-ratio: 9 / 16; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.post:hover .post-media img { transform: scale(1.02); }
.post-media .no-thumb { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.post-media .img-missing { position: absolute; inset: 0; }
img.img-failed { display: none !important; }
.img-missing:not(.av-fallback) { display: grid; place-items: center; width: 100%; height: 100%; min-height: 60px; color: var(--faint); font-size: 12px; background: var(--bg-2); }
.post-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 28%, transparent 70%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.post-check { position: absolute; top: 8px; left: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); display: grid; place-items: center; cursor: pointer; }
.post-check input { display: none; }
.post.selected .post-check { background: var(--accent); border-color: var(--accent); }
.post.selected .post-check::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; }
.post-badges { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; }
.pbadge { font-size: 10.5px; font-family: var(--mono); padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; }
.pbadge.outlier { background: rgba(245,176,65,.9); color: #1a1200; font-weight: 700; }
.pbadge.outlier.hot { background: linear-gradient(135deg, #ff7a45, #f5286e); color: #fff; }
.post-bottom { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.post-metric { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); display: inline-flex; gap: 4px; align-items: center; }
.post-dl { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(62,207,142,.9); color: #03140c; font-weight: 600; }
.post-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: rgba(255,255,255,.15); }
.post-progress > i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.post-progress.indeterminate > i { width: 35% !important; animation: slide 1.1s ease-in-out infinite; }
.post-state { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.5); font-size: 12px; color: #fff; }

.post-body { padding: 9px 11px 6px; display: grid; gap: 5px; }
.post-head { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.post-head img, .post-head .av-fallback { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; }
.post-head .user { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-head .when { color: var(--faint); margin-left: auto; flex: none; }
.post-stats { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.post-caption { font-size: 12px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.post-actions { display: flex; align-items: center; gap: 2px; padding: 2px 6px 8px; }
.icon-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 7px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; text-decoration: none; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn.on { color: var(--warn); }
.post-actions .btn { margin-left: auto; padding: 4px 9px; font-size: 11.5px; }

.selection-bar {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 13px; animation: rise .15s ease-out;
}
#inspoView { position: relative; }

.inspo-empty { grid-column: 1 / -1; border: 1px dashed var(--line-2); border-radius: 16px; padding: 56px 24px; text-align: center; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.inspo-empty h3 { margin: 4px 0 0; color: var(--text); font-size: 17px; }
.inspo-empty .ig-glyph { width: 46px; height: 46px; border-radius: 13px; }
.inspo-empty .btn { margin-top: 6px; }

/* feed settings: provider switch */
#feedSettingsDialog { width: min(520px, 94vw); max-height: 90vh; }
.provider-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.provider-card { display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.provider-card:hover { border-color: var(--line-2); }
.provider-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.provider-card input { accent-color: var(--accent); margin-top: 3px; }
.pc-body { display: grid; gap: 3px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.pc-body b { color: var(--text); font-size: 13px; }
.provider-panel { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.provider-panel .field { margin-bottom: 0; }
.provider-panel .hint a { color: var(--err); }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.status-row b.ok { color: var(--ok); }
.status-row b.bad { color: var(--warn); }
.status-row b.warn { color: var(--warn); }
.provider-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); margin-left: 6px; vertical-align: 1px; }

.ig-account { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); min-height: 64px; }
.ig-account .acc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-2); display: grid; place-items: center; }
.ig-account .acc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ig-account .acc-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ig-account .acc-sub { font-size: 12px; color: var(--faint); line-height: 1.4; }
.ig-account .acc-sub.bad { color: var(--warn); }
.ig-account .acc-actions { display: flex; gap: 6px; flex: none; }
.ig-account .dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ig-account .dot-bad { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.btn.ig-login { background: linear-gradient(90deg, #f58529, #dd2a7b 45%, #8134af 80%); border: 0; color: #fff; padding: 9px 14px; }
.btn.ig-login:hover { filter: brightness(1.08); }
.manual-session summary { cursor: pointer; font-size: 12px; color: var(--faint); padding: 2px 0; }
.manual-session summary:hover { color: var(--muted); }
.manual-session[open] summary { margin-bottom: 8px; }

/* sources dialog */
.dialog.sources { width: min(560px, 94vw); padding: 0; overflow: hidden; }
.sources-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sources-head h3 { margin: 0; flex: 1; font-size: 17px; }
.sources-body { padding: 20px 22px; display: grid; gap: 10px; }
.sources-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.eyebrow-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.eyebrow-count { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.source-input-row input { width: 100%; padding: 11px 13px; font-size: 14px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 9px; outline: none; }
.source-input-row input:focus { border-color: var(--accent); }
.sources-body .hint { margin: 0; line-height: 1.5; }
.source-error { font-size: 12.5px; color: #f7a1a8; background: rgba(240,97,109,.08); border: 1px solid rgba(240,97,109,.25); padding: 8px 10px; border-radius: 8px; }
.source-error.warn { color: #f3cf8f; background: rgba(245,176,65,.08); border-color: rgba(245,176,65,.3); }
.sources-items { display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.sources-empty { color: var(--faint); font-size: 13px; padding: 4px 0; }
.source-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); }
.source-row img, .source-row .av-fallback { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; }
.source-row .meta { flex: 1; min-width: 0; }
.source-row .h { font-weight: 600; font-size: 13px; }
.source-row .s { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-row .s.err { color: var(--err); }
.av-fallback { display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }

.profile-card { display: flex; gap: 20px; align-items: center; }
.pv-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; border: 2px solid var(--line-2); }
.pv-handle { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.verified { width: 16px; height: 16px; border-radius: 50%; background: #3897f0; color: #fff; font-size: 10px; display: inline-grid; place-items: center; }
.pv-name { color: var(--muted); margin: 2px 0 8px; }
.pv-stats { display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pv-stats b { color: var(--text); }
.pv-bio { white-space: pre-wrap; font-size: 13px; line-height: 1.5; padding: 14px 16px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); min-height: 64px; max-height: 180px; overflow: auto; margin-top: 8px; }
.pv-bio:empty::before { content: 'No bio'; color: var(--faint); }
.pv-live { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); margin-top: 4px; }
.btn.add { background: #1f7a5c; border-color: #1f7a5c; color: #fff; padding: 9px 16px; }
.btn.add:hover { background: #25916d; border-color: #25916d; }
.loading-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding: 6px 0; }
.loading-line .spinner { width: 16px; height: 16px; border-width: 2px; }
.menu-empty { padding: 8px 10px; font-size: 12.5px; color: var(--faint); }

/* ---------- popover menu ---------- */
.btn.accent { border-color: rgba(139,124,255,.45); color: #cfc8ff; background: var(--accent-soft); }
.btn.accent:hover { border-color: var(--accent); background: rgba(139,124,255,.22); }
.menu {
  position: fixed; z-index: 40; min-width: 250px; max-height: 60vh; overflow: auto; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: rise .12s ease-out;
}
.menu-title { padding: 6px 10px 4px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.menu-group { padding: 8px 10px 3px; font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.menu-tag { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: #cfc8ff; }
.menu-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 7px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 13px; text-align: left;
}
.menu-item:hover:not(:disabled) { background: var(--accent-soft); }
.menu-item:disabled { opacity: .4; cursor: not-allowed; }
.menu-meta { font-size: 11px; font-family: var(--mono); color: var(--faint); }

.field.flash .dropzone { border-color: var(--accent); background: var(--accent-soft); transition: none; }

/* ---------- dialog / toasts ---------- */
.dialog { border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--text); padding: 22px; width: min(440px, 92vw); }
.dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.dialog h3 { margin: 0 0 16px; }
.confirm-dialog { width: min(400px, 92vw); }
.confirm-dialog h3 { margin: 0 0 8px; font-size: 15px; }
.confirm-dialog p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.restart-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(720px, 94vw); padding: 9px 8px 9px 16px; border-radius: 10px; background: #3a2c10; border: 1px solid rgba(245,176,65,.55); color: #f6dfb2; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.restart-banner code { color: #fff; }
.restart-banner .icon-btn { color: #f6dfb2; flex: none; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 50; }
.toast { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 13px; max-width: 380px; animation: rise .2s ease-out; }
.toast.error { border-color: rgba(240,97,109,.5); }
.toast.success { border-color: rgba(62,207,142,.5); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* ---------- spoof dialog ---------- */
.dialog.sp-dialog { width: min(780px, 96vw); padding: 0; max-height: 92vh; }
.dialog.sp-dialog[open] { display: flex; flex-direction: column; }
.sp-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sp-head h3 { margin: 0 0 3px; font-size: 15px; }
.sp-head > div:first-child { flex: 1; min-width: 0; }
.sp-body { padding: 16px 18px; display: grid; gap: 14px; overflow: auto; }
.sp-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg-2); border-radius: 0 0 14px 14px; }

.sp-count { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.sp-count-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sp-count-value { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--accent); }
.sp-count input[type=range] { width: 100%; accent-color: var(--accent); }

.sp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-row .label { flex: none; }
.sp-row .muted { flex: 1; min-width: 160px; }

.sp-adv { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.sp-adv summary { padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--muted); }
.sp-adv summary:hover { color: var(--text); }
.sp-adv[open] summary { border-bottom: 1px solid var(--line); }
.sp-copy { display: grid; gap: 10px; padding: 12px 14px; }
.sp-copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-copy-row input[type=text] { flex: 1; min-width: 170px; }
.sp-copy textarea { width: 100%; resize: vertical; font: inherit; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.sp-copy textarea:focus { border-color: var(--accent); }
.sp-preview { width: 180px; border-radius: 10px; border: 1px solid var(--line-2); align-self: start; }
.sp-captions { display: grid; gap: 6px; }
.sp-caption { display: flex; gap: 6px; align-items: flex-start; }
.sp-caption textarea { flex: 1; font-size: 12.5px; }
.sp-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px; }
.sp-adv-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.sp-adv-grid input, .sp-adv-grid select { width: 100%; }
.sp-adv-checks { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 14px 12px; }

.sp-status:empty { display: none; }
.sp-status { display: grid; gap: 8px; }
.sp-bar { height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line); }
.sp-bar > i { display: block; height: 100%; background: var(--accent); transition: width .25s; }
#spErrors { display: grid; gap: 3px; }

.sp-dialog .results-head { padding: 4px 0 0; }
.sp-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sp-results:empty { display: none; }
.sp-variant { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; }
.sp-variant video { width: 100%; aspect-ratio: 9/16; max-height: 260px; object-fit: contain; background: #000; display: block; }
.sp-variant-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px 0; }
.sp-variant-meta b { font-family: var(--mono); font-size: 12px; }
.sp-variant-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 10px; margin-top: auto; }
.chip.ok { color: var(--ok); border-color: rgba(62,207,142,.35); }
.chip.warn { color: var(--warn); border-color: rgba(245,176,65,.35); }
.chip.bad { color: var(--err); border-color: rgba(240,97,109,.35); }

@media (max-width: 620px) {
  .sp-adv-grid { grid-template-columns: 1fr 1fr; }
}

.post-recreate.queue {
  top: calc(50% + 26px); padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.22);
}
.post-recreate.queue:hover { background: rgba(0,0,0,.85); }
/* ---------- recreate queue ---------- */
.q-list { flex: 1; overflow: auto; padding: 0 24px 24px; display: grid; gap: 8px; align-content: start; }
.q-list .empty { padding: 48px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); }
/* Scoped to .q-list: the File Upload page has its own .q-item rows (see .queue above). */
.q-list .q-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.q-list .q-item.running { border-color: rgba(139,124,255,.45); }
.q-list .q-item.done { opacity: .72; }
.q-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.q-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-actions { display: flex; gap: 2px; }
.q-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.q-field input[type=number] { width: 92px; }
.q-field select { width: auto; }

/* ---------- spoof tool (bring your own video) ---------- */
.sv-media { aspect-ratio: 3/4; position: relative; }
.sv-kind {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.72); color: #d8d4ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-jobs { display: grid; gap: 8px; }
.sv-jobs:empty { display: none; }
.sv-job { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.sv-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-job-state { font-size: 12px; color: var(--muted); }
.sv-job-state.ok { color: var(--ok); }
.sv-job-state.err { color: var(--err); }
.sv-job .q-bar { grid-column: 1 / -1; }
.sv-job-msg { grid-column: 1 / -1; font-size: 12px; color: var(--err); }
.sv-note { display: grid; gap: 4px; padding-top: 2px; border-top: 1px solid var(--line); }
.sv-note p { margin: 4px 0 0; line-height: 1.5; }

/* ---------- spoofed library ---------- */
.spd-list { flex: 1; overflow: auto; padding: 0 24px 24px; display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; }
.spd-list .empty { padding: 48px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.spd-run { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.spd-run-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.spd-run-title { flex: 1; min-width: 0; }
.spd-run-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spd-run-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.spd-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 14px; }
.spd-variant { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; }
.spd-variant.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.spd-pick { position: absolute; top: 7px; left: 7px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; background: rgba(0,0,0,.6); display: grid; place-items: center; cursor: pointer; }
.spd-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.spd-run-actions .check { margin-right: 4px; }
.spd-selbar { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 3px 4px 3px 12px; border-radius: 9px; background: var(--accent-soft); border: 1px solid rgba(139,124,255,.4); font-size: 12.5px; }
.spd-variant video { width: 100%; aspect-ratio: 9/16; max-height: 260px; object-fit: contain; background: #000; display: block; }
.spd-variant-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px 0; }
.spd-variant-meta b { font-family: var(--mono); font-size: 12px; }
.spd-variant-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 10px; margin-top: auto; }

/* ---------- Send to VA: generations with their spoofs, tap to pick ---------- */
.sv-list { flex: 1; overflow: auto; padding: 0 24px 24px; display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; }
.sv-list .empty { padding: 48px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.sv-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.sv-group-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.sv-group-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sv-group-title b { font-size: 13.5px; }
.sv-group-title .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 12px 14px 14px; }
.sv-tile { position: relative; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: #000; border: 2px solid transparent; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.sv-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sv-tile:focus-visible { border-color: var(--line-2); }
.sv-tile.picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sv-tile.sent { cursor: default; }
.sv-tile.sent video { opacity: .4; }
.sv-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 6px; font: 600 10.5px/1.3 var(--mono); background: rgba(0,0,0,.65); color: #fff; }
.sv-badge.orig { background: rgba(139,124,255,.9); }
.sv-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.sv-tile.picked .sv-check { background: var(--accent); border-color: var(--accent); }
.sv-tile.picked .sv-check::after { content: '✓'; }
.sv-sent { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(0,0,0,.75); color: #f8cf86; font-size: 11px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-hook { position: absolute; left: 7px; right: 42px; bottom: 12px; font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-play { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; padding: 0 0 0 2px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.sv-play:hover { background: rgba(0,0,0,.85); }
.sv-tile.sent .sv-play { bottom: 32px; }
.sv-bar { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 24px 16px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid rgba(139,124,255,.45); box-shadow: 0 12px 32px rgba(0,0,0,.45); font-size: 13px; }
#svSelCount { margin-right: auto; font-weight: 600; }
.menu.va-menu { z-index: 50; } /* above the floating send bars on phones */

/* Description sheet before sending reels to VAs */
.dialog.cap-dialog { width: min(720px, 96vw); padding: 0; max-height: 92vh; }
.cap-dialog[open] { display: flex; flex-direction: column; }
.cap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cap-head h3 { margin: 0 0 4px; }
.cap-head p { margin: 0; }
.cap-body { padding: 14px 20px; overflow: auto; display: grid; gap: 14px; }
.cap-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.cap-thumb { position: relative; display: block; width: 64px; aspect-ratio: 9/16; border-radius: 8px; overflow: hidden; background: #000; }
.cap-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-thumb b { position: absolute; top: 4px; left: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; font: 600 10px/1.3 var(--mono); }
.cap-main { display: grid; gap: 6px; min-width: 0; }
.cap-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.cap-main textarea { min-height: 84px; resize: vertical; font-size: 13px; line-height: 1.45; }
.cap-count { text-align: right; }
.cap-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.cap-grow { flex: 1; }

/* ---------- Analytics ---------- */
.an-body { flex: 1; overflow: auto; padding: 4px 24px 32px; display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; }
.an-empty { padding: 48px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.an-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.an-card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.an-form { margin: 0 24px 4px; }
.an-add { display: grid; grid-template-columns: minmax(0, 1fr) 160px 150px auto; gap: 8px; }
.an-settings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-settings select { width: auto; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; }
#anReader { margin-top: 4px; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.an-kpi { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.an-kpi-label { font-size: 12px; color: var(--muted); }
.an-kpi b { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.an-trouble { border-color: rgba(245,176,65,.35); }
.an-trouble-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.chip.bad { color: var(--err); border-color: rgba(240,97,109,.4); }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.an-table th { text-align: right; font-weight: 500; font-size: 12px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.an-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.an-table th:first-child, .an-table td:first-child { text-align: left; }
.an-table tr:last-child td { border-bottom: 0; }
.an-linkish { border: 0; background: none; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.an-linkish:hover { color: var(--accent); }
.an-top { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.an-top-item { display: grid; gap: 2px; justify-items: start; border: 0; background: none; padding: 0; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.an-top-item .small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-thumb { position: relative; width: 44px; aspect-ratio: 9/16; border-radius: 6px; overflow: hidden; background: var(--panel-2); flex: none; display: block; }
.an-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-thumb.lg { width: 100%; border-radius: 9px; margin-bottom: 4px; }
.an-thumb i { position: absolute; top: 5px; left: 5px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; font: 600 10.5px/1.3 var(--mono); font-style: normal; }
.an-reels, .an-accs { display: grid; gap: 8px; }
.an-reel { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.an-reel:hover { border-color: var(--line-2); }
.an-reel.open { border-color: rgba(139,124,255,.5); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.an-rank { font: 600 12px var(--mono); color: var(--faint); text-align: right; }
.an-reel-main { display: grid; gap: 3px; min-width: 0; font-size: 13px; }
.an-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-nums { display: grid; grid-template-columns: repeat(5, 72px); text-align: right; font-variant-numeric: tabular-nums; }
.an-nums div { display: grid; }
.an-nums b { font-size: 14px; }
.an-nums span { font-size: 11px; color: var(--faint); }
.an-detail { padding: 14px 16px; border: 1px solid rgba(139,124,255,.5); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg-2); display: grid; gap: 10px; margin-top: -8px; min-width: 0; }
.an-acc .an-detail { grid-column: 1 / -1; flex-basis: 100%; margin: 4px 0 0; border: 1px solid var(--line); border-radius: 9px; }
.an-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-fullcap { margin: 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.an-more { text-align: center; }
.an-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.an-acc-who { flex: 1; min-width: 220px; display: grid; gap: 3px; font-size: 13px; }
.an-acc-who a { color: var(--text); text-decoration: none; }
.an-acc-who a:hover b { color: var(--accent); }
.an-acc select { width: auto; padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
.an-err { color: var(--warn); }
.an-chart-title { font-size: 13px; font-weight: 600; }
.an-chart { position: relative; width: 100%; outline: none; border-radius: 6px; }
.an-chart:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
.an-chart svg { display: block; touch-action: pan-y; }
.an-grid { stroke: var(--line); stroke-width: 1; }
.an-axis { fill: var(--faint); font-size: 11px; font-family: Inter, system-ui, sans-serif; }
.an-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-dot { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.an-cross { stroke: var(--line-2); stroke-width: 1; }
.an-hover { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.an-tip { position: absolute; pointer-events: none; display: grid; gap: 1px; padding: 6px 9px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 8px 20px rgba(0,0,0,.4); white-space: nowrap; }
.an-tip b { font-size: 13px; color: var(--text); }
.an-tip span { font-size: 11px; color: var(--muted); }
.an-readings summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.an-readings table { margin-top: 6px; font-size: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.an-readings td { padding: 2px 14px 2px 0; color: var(--muted); }
.an-nums i { font-style: normal; }
/* Analytics → VAs */
.an-vacards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.an-vacard { display: grid; gap: 8px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); cursor: pointer; font: inherit; }
.an-vacard:hover { border-color: rgba(139,124,255,.5); }
.an-vacard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
.an-vacard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.an-vacard-stats div { display: grid; }
.an-vacard-stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.an-vacard-stats span { font-size: 11px; color: var(--faint); }
.an-vahead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.an-vahead h3 { margin-bottom: 4px; }
.an-kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.an-kpis-6 .an-kpi b { font-size: 22px; }
@media (max-width: 1200px) { .an-kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.an-cols { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.an-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; outline: none; border-radius: 4px 4px 0 0; }
.an-col:hover, .an-col:focus-visible { background: var(--panel-2); }
.an-col-bar { display: block; width: 100%; max-width: 24px; background: var(--accent); border-radius: 4px 4px 0 0; }
.an-col-bar.zero { height: 0; }
.an-col-n { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.an-col-tip { z-index: 2; font-size: 12px; color: var(--text); }
.an-cols-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.an-sent { display: grid; gap: 8px; }
.an-sent-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.an-sent-row .an-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-sent-main { display: grid; gap: 3px; min-width: 0; font-size: 13px; }
.an-sent-main a, .an-feed a { color: var(--text); }
.an-feed { display: grid; gap: 2px; }
.an-feed-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.an-feed-row:last-child { border-bottom: 0; }
.an-settings .check { color: inherit; font-size: inherit; }
.an-bars { display: grid; gap: 6px; }
.an-bar-row { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; padding: 1px 4px; border-radius: 6px; }
.an-bar-row:hover { background: var(--panel-2); }
.an-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.an-bar-label i { font-style: normal; margin-right: 6px; }
.an-bar-track { height: 12px; display: block; }
.an-bar { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.an-bar-value { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; text-align: right; min-width: 44px; }
.an-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.an-shot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.an-shot-img { display: block; aspect-ratio: 9/16; border-radius: 6px; overflow: hidden; background: var(--panel-2); }
.an-shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.an-shot-info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.an-shot-top { color: var(--muted); overflow-wrap: anywhere; }
.an-shot-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.an-sm { display: none; }
.va-hist { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; padding-top: 6px; }
.va-hist-item { display: grid; gap: 3px; color: inherit; text-decoration: none; min-width: 0; }
.va-hist-item .small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-hist-thumb { position: relative; aspect-ratio: 9/16; border-radius: 7px; overflow: hidden; background: #000; display: grid; place-items: center; font-size: 11px; color: var(--faint); }
.va-hist-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.va-hist-thumb b { position: absolute; top: 4px; left: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; font: 600 10px/1.3 var(--mono); }
.va-hist-item.gone .va-hist-thumb { background: var(--panel-2); border: 1px dashed var(--line-2); }
.btn.on { background: var(--panel-2); color: var(--text); border-color: var(--line-2); }

@media (max-width: 1100px) {
  .panes, .uploads-page { grid-template-columns: 1fr; overflow: auto; }
  .upload-intake { border-right: 0; border-bottom: 1px solid var(--line); }
  .library-grid { overflow: visible; }
  .composer { border-right: 0; border-bottom: 1px solid var(--line); }
  .composer form { overflow: visible; }
  .results-grid { overflow: visible; }
}
/* Phone layout lives at the end of this file ("Phones"). */
.sp-warn:not([hidden]) { display: block; color: var(--warn); margin: 2px 0 6px; }

/* Gmails */
.gm-body { padding: 18px 24px 40px; display: grid; gap: 22px; }
.gm-h { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.gm-setup { padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gm-setup p { margin: 0; }
.gm-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.gm-product { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.gm-p-main { display: grid; gap: 2px; min-width: 0; }
.gm-p-buy { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-list { display: grid; gap: 8px; }
.gm-order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.gm-order.watching { border-color: rgba(62,207,142,.35); }
.gm-o-main { display: grid; gap: 3px; min-width: 0; }
.gm-email { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.gm-email code { font-size: 13px; overflow-wrap: anywhere; }
.gm-codes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
.gm-code { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.gm-code.latest { color: var(--text); border-color: var(--line-2); font-size: 14px; }
@media (max-width: 760px) {
  .gm-order { grid-template-columns: minmax(0, 1fr); }
  .gm-codes { justify-content: flex-start; max-width: none; }
  .gm-body { padding: 14px 16px 32px; }
}

/* Employee bot */
.st-list { display: grid; gap: 6px; }
.st-list:empty { display: none; }
.st-list h4 { margin: 4px 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.st-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.st-row.pending { border-color: rgba(245,176,65,.35); }
.st-row.blocked { opacity: .6; }
.st-who { flex: 1; min-width: 160px; display: grid; gap: 2px; }
.st-row input[type=text] { width: 140px; padding: 5px 8px; }
.gm-by { color: #cfc8ff; }
.gm-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.gm-filter:empty { display: none; }

/* Employee website page */
body.emp { min-height: 100vh; background: var(--bg); }
.emp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.emp-brand { display: flex; align-items: center; gap: 8px; }
.emp-logo { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); }
.emp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.emp-who .muted { overflow-wrap: anywhere; }
.emp-main { max-width: 860px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 14px; }
.emp-buy { padding: 14px 16px; }

/* Website access (Settings) */
.wu-list { display: grid; gap: 6px; }
.wu-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.wu-row .wu-email { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.wu-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
@media (max-width: 520px) { .wu-add { grid-template-columns: minmax(0, 1fr); } }
.wu-row select { width: auto; flex: none; padding-top: 4px; padding-bottom: 4px; }
.wu-row .icon-btn { flex: none; }
.wu-add select { width: auto; }
.wu-add input { min-width: 0; }

/* Website sign-in */
body.login-page { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: radial-gradient(1200px 600px at 50% -10%, rgba(124,108,255,.14), transparent 60%), var(--bg); }
.login-card { width: min(380px, 100%); padding: 28px 26px 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand h1 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.login-brand p { margin: 2px 0 0; }
.login-logo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: var(--accent-soft); border: 1px solid rgba(124,108,255,.35); }
.login-card form .field { margin-bottom: 14px; }
.login-card .card-err { margin: 0 0 12px; }
.login-go { width: 100%; justify-content: center; padding: 11px 14px; font-size: 14px; }
.login-foot { text-align: center; margin: 16px 0 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.wu-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.wu-row input[type=password] { flex: 1; min-width: 140px; padding: 5px 8px; }


/* ---------- Phones ----------
   The page scrolls as a whole (no fixed-height panes), the sidebar becomes a drawer behind the ☰
   button in a sticky top bar, and dialogs fill the screen. */
.m-bar, .nav-backdrop { display: none; }
@media (max-width: 760px) {
  html, body { height: auto; }
  body { overflow-x: hidden; }
  .app { display: block; height: auto; min-height: 100dvh; }

  .m-bar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 12px 0 6px; padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .m-menu { width: 44px; height: 44px; display: grid; place-content: center; gap: 4px; background: none; border: 0; cursor: pointer; border-radius: 10px; }
  .m-menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
  body.nav-open .m-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .m-menu span:nth-child(2) { opacity: 0; }
  body.nav-open .m-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .m-title { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }

  .sidebar {
    display: flex; position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
    width: min(300px, 84vw); transform: translateX(-102%); transition: transform .22s ease;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 8px 0 40px rgba(0,0,0,.5);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open { overflow: hidden; }
  .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); }
  .nav-item { padding: 10px; }

  /* Every page: natural height, one scroll for the whole page. */
  .workspace { display: block; min-height: calc(100dvh - 52px); }
  .workspace > * { min-height: 0; }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 12px; }
  .topbar h1 { font-size: 20px; }
  .topbar-actions { flex-wrap: wrap; flex: 1 1 auto; }
  .crumbs { display: none; }
  .gen-toolbar { padding: 10px 16px; }

  /* Dialogs: full screen width, scroll inside, actions reachable. */
  dialog.dialog { width: calc(100vw - 16px) !important; max-width: none; max-height: calc(100dvh - 16px); margin: auto; overflow: auto; }
  .dialog-actions { position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 10px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); z-index: 2; }
  .tpl-dialog .dialog-actions { bottom: 0; margin: 0; padding-left: 14px; padding-right: 14px; } /* that dialog has no padding of its own */

  /* Comfortable tap targets. */
  .btn { min-height: 38px; }
  .btn.sm { min-height: 34px; }
  .icon-btn { min-width: 34px; min-height: 34px; }
  input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], select, textarea { font-size: 16px; } /* stops iOS zooming in on focus */

  /* Inspo: two reels a row, filters on one swipeable line, selection bar pinned to the screen. */
  .inspo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 10px 96px; }
  .inspo-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .inspo-filters::-webkit-scrollbar { display: none; }
  .inspo-filters > * { flex: none; }
  .post-body { padding: 7px 8px 4px; gap: 4px; }
  .post-head { font-size: 11.5px; }
  .post-stats { gap: 6px; font-size: 10.5px; flex-wrap: wrap; }
  .post-caption { font-size: 11.5px; min-height: 0; }
  .post-actions { padding: 2px 4px 6px; flex-wrap: wrap; }
  .post-actions .btn { min-height: 30px; }
  .selection-bar { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center; }

  /* Card grids: tighter edges; two a row where the cards are images or vertical videos. */
  .results-grid { padding: 0 12px 20px; }
  .gen-grid { padding: 12px 12px 28px; gap: 12px; }
  .mm-grid { padding: 12px 12px 28px; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sp-results, .spd-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .spd-variants { padding: 10px; }
  .q-list { padding: 0 12px 20px; }
  .q-list .q-item { flex-wrap: wrap; }

  /* Big dialogs (Recreate, Trim & crop, Spoof…): the whole dialog scrolls, the footer stays at the
     bottom with its note on its own line and buttons sharing the width. */
  .rc-layout { max-height: none; }
  .rc-video { min-height: 0; }
  .rc-video video { max-height: 46dvh; }
  .rc-side { overflow: visible; padding: 12px 14px; }
  .rc-settings { grid-template-columns: minmax(0, 1fr); }
  .ve-head { padding: 12px 14px; position: sticky; top: 0; z-index: 2; background: var(--panel); }
  .ve-body { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .ve-stage { height: min(46dvh, 420px); }
  .ve-controls { flex-wrap: wrap; }
  .ve-foot { flex-wrap: wrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; z-index: 2; background: var(--panel); }
  .ve-foot > .muted, .ve-foot > .small { flex: 1 0 100%; order: -1; }
  .ve-foot > span[style*="flex:1"], .ve-foot > span[style*="flex: 1"] { display: none; }
  .ve-foot > .btn { flex: 1 1 auto; justify-content: center; }
}
/* Touch screens have no hover: keep Recreate / Queue visible, sized for a small card. */
@media (hover: none) {
  /* Recreate / Queue as two small round buttons in the reel's corner, so the thumbnail stays visible. */
  .post-recreate { opacity: 1; left: auto; top: auto; right: 8px; bottom: 32px; transform: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; }
  .post-recreate::before { content: '✨'; font-size: 17px; }
  .post-recreate.queue { left: auto; top: auto; right: 52px; bottom: 32px; transform: none; width: 38px; height: 38px; padding: 0; font-size: 0; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.22); }
  .post-recreate.queue::before { content: '📥'; font-size: 15px; }
  .post-recreate:hover { transform: none; }
  /* Tap a result's picture to open it large (the hover-only ⤢ button becomes the whole picture). */
  .card-expand { inset: 0; width: auto; height: auto; border-radius: 0; background: transparent; font-size: 0; opacity: 0; }
  kbd { display: none; }
}

/* Mac-only buttons (they open Finder on the Mac) — hidden when the panel is used through mune.media. */
body.remote :is(#genOpenFolder, #svOpenFolder, #spdOpenFolder, #openDownloads, #backupReveal, #spOpenFolder,
  [data-act="reveal"], [data-act="folder"], [data-act="folder-run"], [data-sp-reveal]) { display: none !important; }

/* ---------- Phones, app layout ----------
   Bottom tab bar for the main places, one-line page headers, filters in one swipeable row, results
   as a compact list, and the Generate bar pinned above the tabs. */
.m-tabs { display: none; }
@media (max-width: 760px) {
  .m-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .m-tabs button { display: grid; justify-items: center; gap: 4px; padding: 5px 0 3px; background: none; border: 0; border-radius: 10px; color: var(--faint); font: 500 10.5px/1 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .m-tabs button.active { color: var(--text); }
  .m-tabs button.active svg { stroke: var(--accent); }
  body.nav-open .m-tabs { visibility: hidden; }
  .workspace { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }

  /* Page header: the title is already in the top bar, so just a one-line summary and a row of actions. */
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar h1, #telegramView .topbar h1 { display: none; }
  .tg-page { grid-template-columns: minmax(0, 1fr); }
  .tg-body, .tg-log { padding: 12px 14px; min-width: 0; }
  .topbar p { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions > * { flex: none; }
  .topbar-actions .btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }
  .topbar-actions:not(:has(> :not([hidden]):not(#genOpenFolder):not(#svOpenFolder):not(#spdOpenFolder))) { display: none; }

  /* Filter bars: one row you swipe sideways. */
  .gen-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 14px; gap: 8px; }
  .gen-toolbar::-webkit-scrollbar { display: none; }
  .gen-toolbar > * { flex: none; }
  .gen-toolbar input[type=search] { width: 160px; font-size: 16px; padding: 7px 11px; }
  .gen-toolbar select { font-size: 14px; }
  #queueView .gen-toolbar { flex-wrap: wrap; overflow: visible; row-gap: 10px; } /* settings, not filters: let them wrap */
  /* Spoofed selection: a floating bar above the tabs instead of the end of the swipe row. */
  #spdSelBar:not([hidden]) { position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 44; margin: 0; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--panel-2); box-shadow: 0 12px 32px rgba(0,0,0,.55); }
  #spdSelCount { grid-area: 1 / 1; padding-left: 4px; align-self: center; }
  #spdSelClear { grid-area: 1 / 2; justify-self: end; }
  #spdSendSel { grid-area: 2 / 1; }
  #spdVaSel { grid-area: 2 / 2; }
  #spoofedView:has(#spdSelBar:not([hidden])) { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  body:has(#spoofedView:not([hidden]) #spdSelBar:not([hidden])) .toasts { bottom: calc(180px + env(safe-area-inset-bottom)); }
  /* Analytics: stacked form, 2×2 numbers, reel rows wrap their numbers under the text. */
  .an-body { padding: 10px 12px 28px; gap: 12px; }
  .an-form { margin: 0 12px 4px; padding: 12px; }
  .an-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .an-add #anNew { grid-column: 1 / -1; font-size: 16px; }
  .an-add #anAdd { grid-column: 1 / -1; }
  .an-kpis, .an-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-vacards { grid-template-columns: minmax(0, 1fr); }
  .an-cols { height: 110px; gap: 2px; }
  .an-kpi { padding: 12px; }
  .an-kpi b { font-size: 22px; }
  .an-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-reel { grid-template-columns: 22px 44px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .an-nums { grid-column: 2 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: left; }
  .an-nums b { font-size: 13px; }
  .an-nums span { font-size: 10px; }
  .an-acc-who { min-width: 100%; }
  #anReader { white-space: normal; overflow: visible; }
  .an-hide-sm { display: none; }
  .an-table th, .an-table td { padding: 7px 6px; }
  .an-lg { display: none; }
  .an-bar-row { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 8px; }
  dialog.cap-dialog { overflow: hidden; } /* the list scrolls; the Send row stays put */
  .cap-head, .cap-body { padding-left: 14px; padding-right: 14px; }
  .cap-row { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .cap-thumb { width: 52px; }
  .cap-main textarea { font-size: 16px; }
  .cap-foot { flex-wrap: wrap; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .cap-foot #capFill { width: 100%; }
  .cap-grow { display: none; }
  .cap-foot [data-cap-close], .cap-foot #capSend { flex: 1; }
  .an-shots { grid-template-columns: minmax(0, 1fr); }
  .an-sm { display: inline; }
  .an-card { padding: 12px; }
  /* Send to VA: three tiles a row; the send bar floats above the tabs like Spoofed's. */
  .sv-list { padding: 12px 12px 24px; gap: 12px; }
  .sv-list .empty { padding: 32px 16px; }
  .sv-group-head { padding: 10px 12px; flex-wrap: wrap; row-gap: 6px; }
  .sv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .sv-bar:not([hidden]) { position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 44; margin: 0; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #svSelCount { grid-area: 1 / 1; padding-left: 4px; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #svClear { grid-area: 1 / 2; justify-self: end; }
  #svSend { grid-area: 2 / 1; }
  #svSplit { grid-area: 2 / 2; }
  .sv-bar.busy #svSelCount { grid-column: 1 / -1; }
  .sv-bar.busy #svClear { display: none; }
  #sendVaView:has(.sv-bar:not([hidden])) { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  body:has(#sendVaView:not([hidden]) .sv-bar:not([hidden])) .toasts { bottom: calc(180px + env(safe-area-inset-bottom)); }

  /* Results (Generations page and under the form): a list — picture left, details and actions right. */
  .gen-grid, .results-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gen-grid .card, .results-grid .card { display: grid; grid-template-columns: 118px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .gen-grid .card-media, .results-grid .card-media { grid-row: 1 / span 2; aspect-ratio: auto; width: 118px; min-height: 196px; align-self: stretch; }
  .gen-grid .card-media > video, .results-grid .card-media > video, .gen-grid .card-media > img, .results-grid .card-media > img { object-fit: cover; }
  .card-body { padding: 9px 11px 6px; gap: 6px; }
  .card-body > div:first-child .muted { font-size: 11px; }
  .card-prompt { font-size: 12.5px; line-height: 1.4; }
  .card-meta { gap: 4px; }
  .card-meta .chip { font-size: 10.5px; padding: 1px 6px; }
  .card-actions { padding: 0 11px 10px; gap: 5px; align-content: end; }
  .card-actions .btn { min-height: 30px; padding: 4px 9px; font-size: 12px; }
  .gen-day { margin: 6px 2px 0; }

  /* Model form: Generate stays pinned above the tab bar while you fill it in. */
  .panes, .uploads-page { overflow: visible; grid-template-columns: minmax(0, 1fr); }
  .composer { min-width: 0; }
  .composer-foot { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 20; padding: 10px 14px; box-shadow: 0 -10px 24px rgba(0,0,0,.35); }
  .composer form { padding: 0 14px 16px; }
  .tabs { padding: 12px 14px 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: none; }
  .topbar .model-id { display: none; }
  /* Result thumbnails: no tiny player controls — tap the picture to open it large. */
  .gen-grid .card-media video::-webkit-media-controls, .results-grid .card-media video::-webkit-media-controls { display: none !important; }
  .gen-grid .card-media video::-webkit-media-controls-enclosure, .results-grid .card-media video::-webkit-media-controls-enclosure { display: none !important; }
  .gen-grid .card-expand::before, .results-grid .card-expand::before { content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding-left: 3px; box-sizing: border-box; font-size: 13px; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); }
  .gen-grid .card-actions [data-open], .results-grid .card-actions [data-open] { display: none; }
  .gen-grid .card-expand, .results-grid .card-expand { opacity: 1; } /* transparent layer over the picture; shows the ▶ badge */

  /* Spoof / File Upload: no drag-and-drop on a phone — the drop box shrinks to its button. */
  .upload-intake { padding: 12px 14px; gap: 12px; }
  .bigdrop { padding: 12px; min-height: 0; border-style: solid; gap: 0; }
  .bigdrop-icon, .bigdrop-title, .bigdrop > .muted { display: none; }
  .bigdrop .btn { width: 100%; justify-content: center; min-height: 44px; font-size: 15px; }
  .sv-note p { display: none; }
  .spd-list { padding: 12px 12px 24px; gap: 12px; }
  .spd-list .empty { padding: 32px 16px; }
  .import-url .label .count { display: none; }

  /* Result viewer: full screen, the video stays in the top part, close button always on top. */
  .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .lightbox[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lb-media { position: relative; overflow: hidden; }
  .lb-media video, .lb-media img { position: absolute; inset: env(safe-area-inset-top) 0 0 0; width: 100%; height: calc(100% - env(safe-area-inset-top)); max-height: none; object-fit: contain; }
  .lb-side { max-height: 44dvh; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .lb-prompt { max-height: 16dvh; }
  #lbClose { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 16px; }
  .results-head { padding-left: 14px; padding-right: 14px; }
  input[type=search] { font-size: 16px; }
}