/* ============================================================
   Thumbnail Studio - design system
   Dark, editorial, gradient-accented. Inter for UI, Sora for headings.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0c13;
  --surface: #121522;
  --surface-2: #1a1e2e;
  --surface-3: #232941;
  --field: #0e1120;
  --line: #262c40;
  --line-2: #333a55;
  --text: #eef1fa;
  --muted: #98a1ba;
  --faint: #6a7390;
  --accent: #ff3d68;
  --accent-2: #ff8a3d;
  --grad: linear-gradient(120deg, #ff3d68 0%, #ff8a3d 100%);
  --blue: #4dc3ff;
  --ok: #3ddc85;
  --warn: #ffc247;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 10px;
  --shadow: 0 10px 34px rgba(0, 0, 0, .38);
  --glow: 0 8px 26px rgba(255, 61, 104, .32);
}

html { accent-color: var(--accent); }

body {
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(255, 61, 104, .07), transparent 60%),
    radial-gradient(900px 480px at -8% 8%, rgba(77, 195, 255, .05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
}

::selection { background: rgba(255, 61, 104, .35); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3047; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #39415f; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: #ff7a7a; margin-top: 12px; font-size: 14px; }
.req {
  color: var(--accent-2); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-left: 6px;
}

/* ---------------- brand ---------------- */

.logo-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; font-size: 18px;
  background: var(--grad); box-shadow: var(--glow);
}
.logo-tile.big {
  width: 58px; height: 58px; border-radius: 16px; font-size: 30px;
  margin: 0 auto 18px;
}
.wordmark {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: -.01em;
}

/* ---------------- login ---------------- */

.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.login-card {
  background: rgba(18, 21, 34, .88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 22px; padding: 44px 40px; width: 380px; text-align: center;
  box-shadow: var(--shadow);
}
.login-card h1 {
  font-family: "Sora", sans-serif; font-size: 24px; font-weight: 700;
  margin-bottom: 4px; letter-spacing: -.02em;
}
.login-card p { margin-bottom: 26px; font-size: 14px; }
.login-card input { width: 100%; margin-bottom: 12px; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ---------------- inputs ---------------- */

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], select, textarea {
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 14.5px;
  width: 100%;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 104, .16);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398a1ba' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
textarea { resize: vertical; }

input[type="file"] {
  color: var(--muted); font-size: 13px; padding: 6px 0; width: 100%;
}
input[type="file"]::file-selector-button {
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 13px; margin-right: 10px; font-size: 13px;
  font-family: inherit; cursor: pointer; transition: border-color .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); }

.field-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--muted); margin: 16px 0 7px;
  letter-spacing: .02em;
}

input[type="range"] { padding: 0; height: 28px; border: none; background: none; box-shadow: none; }

/* ---------------- buttons ---------------- */

.btn {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 11px 18px; font-size: 14.5px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s, filter .15s;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: var(--grad); border: none; color: #fff; font-weight: 600;
  box-shadow: var(--glow);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.big {
  width: 100%; padding: 16px; font-size: 16px; margin-top: 26px;
  font-family: "Sora", sans-serif; font-weight: 600; letter-spacing: .01em;
  border-radius: 13px;
}
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 13px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: wait; transform: none; }

/* ---------------- header ---------------- */

#appView header {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 28px;
  background: rgba(10, 12, 19, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
.badge {
  background: var(--warn); color: #1a1400; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; border-radius: 6px; padding: 3px 8px; margin-left: 4px;
}
.header-right { display: flex; gap: 8px; align-items: center; }
.nav-pill {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 999px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-pill:hover { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.user-chip {
  color: var(--muted); font-size: 13px; padding: 7px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px;
}
.user-chip:empty { display: none; }

/* ---------------- layout ---------------- */

main { max-width: 1520px; margin: 0 auto; padding: 30px 26px 60px; }

main h2 {
  font-family: "Sora", sans-serif; font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; margin: 10px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
main h2::before {
  content: ""; width: 18px; height: 3px; border-radius: 2px;
  background: var(--grad); flex-shrink: 0;
}

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px;
}
.create-card { max-width: 940px; margin: 0 auto 30px; padding: 30px 34px; }

.row { display: flex; gap: 14px; align-items: flex-end; }
.row.wrap { flex-wrap: wrap; }
.col { flex: 1; min-width: 140px; }
.col.grow, .grow { flex: 3; }

/* ---------------- create-flow steps ---------------- */

.step { padding: 6px 0 22px; }
.step + .step { border-top: 1px solid var(--line); padding-top: 24px; }
.step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); color: #fff;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px;
}
.step-title {
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 15.5px;
  letter-spacing: -.01em;
}
.step-sub { color: var(--faint); font-size: 12.5px; margin-top: 1px; }

.preset-manager {
  margin: 14px 0; padding: 18px; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface-2);
}

.ref-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px;
}
@media (max-width: 860px) { .ref-grid { grid-template-columns: 1fr; } }
.subcard {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px 18px;
}
.subcard-h {
  font-family: "Sora", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.subcard .field-label { margin-top: 14px; }
.subcard .field-label:first-of-type { margin-top: 12px; }

/* ---------------- media grids & chips ---------------- */

.person-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin-top: 10px;
}
.person-grid:empty { display: none; }
.person-grid img {
  width: 100%; height: 68px; object-fit: cover; border-radius: 8px;
  cursor: pointer; border: 2px solid transparent; display: block;
  transition: border-color .12s, transform .12s;
}
.person-grid img:hover { border-color: var(--accent-2); transform: scale(1.03); }
.person-grid img.picked { border-color: var(--accent); }

.persona-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.persona-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  background: var(--surface-3); border: 2px solid var(--line-2);
  border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: border-color .15s, transform .12s;
}
.persona-chip:hover { transform: translateY(-1px); }
.persona-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.persona-chip.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 61, 104, .15); }
.persona-chip .px { margin-left: 4px; opacity: .5; cursor: pointer; font-weight: 700; }
.persona-chip .px:hover { opacity: 1; color: var(--accent); }

.ref-previews { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ref-previews:empty { display: none; }
.ref-thumb { position: relative; }
.ref-thumb img {
  height: 76px; border-radius: 10px; border: 1px solid var(--line-2);
  display: block; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.ref-thumb .tag {
  position: absolute; bottom: 5px; left: 5px; background: rgba(6, 8, 14, .82);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 5px;
}
.ref-thumb .ref-mode {
  position: absolute; top: 5px; left: 5px; background: rgba(6, 8, 14, .82);
  border: 1px solid var(--line-2); color: var(--text); font: inherit;
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; cursor: pointer;
}
.ref-thumb .ref-mode:hover { border-color: var(--accent); }
.ref-thumb .rm {
  position: absolute; top: -7px; right: -7px; background: var(--accent);
  border: none; color: #fff; width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; font-size: 12px; line-height: 1;
}

/* ---------------- switches ---------------- */

.toggles { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.toggles label, .checks label {
  font-size: 13.5px; color: var(--muted); display: flex; gap: 10px;
  align-items: center; cursor: pointer; transition: color .15s;
}
.toggles label:hover, .checks label:hover { color: var(--text); }

.toggles input[type="checkbox"], .checks input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-3); border: 1px solid var(--line-2);
  position: relative; cursor: pointer; transition: background .18s, border-color .18s;
  margin: 0;
}
.toggles input[type="checkbox"]::after, .checks input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: left .18s, background .18s;
}
.toggles input[type="checkbox"]:checked, .checks input[type="checkbox"]:checked {
  background: var(--grad); border-color: transparent;
}
.toggles input[type="checkbox"]:checked::after, .checks input[type="checkbox"]:checked::after {
  left: 19px; background: #fff;
}
.checks { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }

/* ---------------- status ---------------- */

#genStatus { margin-top: 14px; font-size: 14px; }

.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- results ---------------- */

.results-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; }
@media (max-width: 1000px) { .results-grid { grid-template-columns: 1fr; } }

.overlay-controls { padding: 18px 20px; }
.overlay-controls .field-label { margin-top: 10px; }

.thumb-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; margin-bottom: 24px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.thumb-card:hover {
  transform: translateY(-2px); border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.thumb-card canvas {
  width: 100%; border-radius: 10px; display: block; cursor: pointer;
}
.thumb-card .bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; gap: 8px; flex-wrap: wrap;
}

.readability {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 194, 71, .1); border: 1px solid rgba(255, 194, 71, .3);
  color: var(--warn); font-size: 12.5px;
}

.score-panel {
  margin-top: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2);
}
.score-head { display: flex; align-items: baseline; gap: 9px; }
.score-num {
  font-family: "Sora", sans-serif; font-size: 32px; font-weight: 800;
  line-height: 1;
  background: var(--grad); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.score-dims { display: flex; gap: 6px; flex-wrap: wrap; margin: 11px 0; }
.score-dim {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 9px; font-size: 12px; color: var(--muted);
  cursor: help;
}
.score-dim b { color: var(--text); }
.score-weak { margin-bottom: 11px; line-height: 1.45; }

.edit-row { display: flex; gap: 8px; margin-top: 9px; }
.edit-row input { flex: 1; font-size: 13px; padding: 9px 12px; }
.edit-hist { margin-top: 7px; font-style: italic; }

.chips { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.chips:empty { display: none; }
.chip {
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer; color: var(--muted);
  transition: color .15s, border-color .15s;
}
.chip:hover { color: var(--text); border-color: var(--accent); }

.swatches { display: flex; gap: 7px; padding: 2px 0; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .12); cursor: pointer;
  transition: transform .12s;
  padding: 0;
}
.swatch:hover { transform: scale(1.12); }
.swatch.selected { border-color: #fff; outline: 2px solid var(--accent); }
.swatch.same {
  background: var(--surface-3); color: var(--muted); font-weight: 700;
  font-size: 13px; line-height: 20px; text-align: center;
  border-color: var(--line-2);
}
.swatch-line { display: flex; align-items: center; gap: 9px; margin: 4px 0; }
.swatch-lbl { font-size: 11px; color: var(--faint); width: 40px; flex-shrink: 0; }

/* ---------------- packaging column ---------------- */

.pkg-col .panel { padding: 16px 18px; }
.pkg-col > p { margin-bottom: 10px; }

.title-option {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px;
  border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1.45;
  transition: background .12s;
}
.title-option:hover { background: var(--surface-2); }
.title-option input { width: auto; margin-top: 3px; }
.title-option .copy {
  margin-left: auto; opacity: .55; font-size: 12px; cursor: pointer;
  flex-shrink: 0; transition: opacity .12s;
}
.title-option .copy:hover { opacity: 1; color: var(--accent-2); }

#descBox {
  margin-bottom: 12px; font-size: 13px; line-height: 1.55;
  border: none; background: transparent; padding: 2px;
}
#descBox:focus { box-shadow: none; }
#tagsBox { margin-bottom: 12px; line-height: 1.9; }

/* ---------------- history ---------------- */

.history-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}
.history-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.history-card:hover {
  transform: translateY(-3px); border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.history-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.history-card .hc-body { padding: 12px 14px 13px; }
.history-card .hc-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.history-card .hc-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
}

/* ---------------- log ---------------- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th {
  color: var(--faint); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
}
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }

/* ---------------- modal ---------------- */

.modal {
  position: fixed; inset: 0; background: rgba(6, 8, 14, .72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 16px;
}
.modal-box {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 26px;
  width: min(560px, 94vw); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.yt-mock { display: flex; gap: 12px; margin: 8px 0 20px; }
.search-mock img { width: min(320px, 60vw); border-radius: 12px; }
.side-mock img { width: 168px; border-radius: 8px; }
.yt-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.yt-title.small-title { font-size: 13px; }
.yt-meta { flex: 1; }

/* ---------------- responsive ---------------- */

@media (max-width: 720px) {
  main { padding: 18px 14px 50px; }
  .create-card { padding: 22px 18px; }
  .row { flex-wrap: wrap; }
  header { padding: 10px 14px; }
  .wordmark { font-size: 15px; }
}

.viewing-banner {
  display: block; margin: -4px 0 14px; padding: 9px 14px; border-radius: 9px;
  background: rgba(77,195,255,.1); border: 1px solid rgba(77,195,255,.32);
  color: #9bd9ff; font-size: 13px;
}
.viewing-banner b { color: #fff; }
.role-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px;
  border-radius: 5px; background: var(--surface-3); color: var(--muted);
}
.role-tag.admin { background: var(--grad); color: #fff; }
/* admin sits between the two: it reads everything and writes nothing */
.role-tag.lead { background: rgba(124,140,255,.18); color: #aab4ff; }
#usersTable td .btn { margin-right: 6px; }
/* the promote / demote button sits under the role tag, on its own line, so the
   role column stays readable and the action column keeps its own buttons */
#usersTable td .role-btn { display: block; margin: 6px 0 0; white-space: nowrap; }

.auth-toggle { margin-top: 16px; font-size: 13.5px; }
.auth-toggle a { color: var(--accent-2); text-decoration: none; }
.auth-toggle a:hover { text-decoration: underline; }
.notice {
  margin-top: 14px; padding: 11px 14px; border-radius: 9px; font-size: 13.5px;
  background: rgba(61,220,133,.1); border: 1px solid rgba(61,220,133,.32);
  color: #8ef0b8; text-align: left;
}
.status-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px;
  border-radius: 5px; background: rgba(61,220,133,.16); color: var(--ok);
}
.status-tag.pending { background: rgba(255,194,71,.16); color: var(--warn); }

.status-tag.paused { background: rgba(255,122,122,.16); color: #ff7a7a; }

.pending-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 999px; background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.pending-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-md);
  background: rgba(255,194,71,.1); border: 1px solid rgba(255,194,71,.35);
  color: #ffd98a; font-size: 14px;
}
.pending-banner b { color: #fff; }
.pending-banner .btn { margin-left: auto; }

.share-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-list:empty { display: none; }
.share-person {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: 999px; font-size: 13px; cursor: pointer;
}
.share-person input { width: auto; margin: 0; }
.share-person.on { border-color: var(--accent); }
.share-note {
  margin-top: 12px; padding: 9px 13px; border-radius: 8px; font-size: 13px;
  background: rgba(77,195,255,.1); border: 1px solid rgba(77,195,255,.3);
  color: #9bd9ff;
}

/* ============================================================
   Public landing page
   ============================================================ */

.grad-text {
  background: var(--grad); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}

.lp-nav {
  position: relative; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 30px;
  background: rgba(10, 12, 19, .78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lp-nav-links { display: flex; align-items: center; gap: 22px; }
.lp-nav-links a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color .15s;
}
.lp-nav-links a:hover { color: var(--text); }

.lp-hero {
  max-width: 1180px; margin: 0 auto; padding: 66px 28px 34px;
  text-align: center;
}
.lp-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px;
}
.lp-hero h1 {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 54px;
  line-height: 1.07; letter-spacing: -.03em; margin-bottom: 20px;
}
.lp-lede {
  color: var(--muted); font-size: 17px; line-height: 1.6;
  max-width: 660px; margin: 0 auto;
}
.lp-cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.lp-cta-row .btn { text-decoration: none; display: inline-flex; align-items: center; }
.lp-note { margin-top: 18px; color: var(--faint); font-size: 13px; }
.lp-made { margin-top: 6px; color: var(--faint); font-size: 12.5px; font-style: italic; }

/* wall of real thumbnails */
.lp-collage {
  max-width: 1240px; margin: 0 auto; padding: 8px 28px 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px;
}
/* Column counts must divide the number of samples (16) or the last row is
   left with dead space: 4x4, 2x8 all come out square. */
@media (max-width: 1080px) { .lp-collage { grid-template-columns: repeat(2, 1fr); } }
.lp-collage img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 10px 26px rgba(0,0,0,.42);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-collage img:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--accent); box-shadow: 0 16px 36px rgba(0,0,0,.55);
}

.lp-section { max-width: 1180px; margin: 0 auto; padding: 62px 28px; }
.lp-section, .lp-hero, [id] { scroll-margin-top: 18px; }
html { scroll-behavior: smooth; }
.lp-h2 {
  font-family: "Sora", sans-serif; font-size: 32px; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 10px;
}
.lp-sub { color: var(--muted); font-size: 16px; margin-bottom: 34px; }

.lp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px;
}
.lp-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.lp-card:hover {
  transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow);
}
.lp-ico { font-size: 26px; margin-bottom: 14px; }
.lp-card h3 {
  font-family: "Sora", sans-serif; font-size: 17px; font-weight: 600;
  margin-bottom: 9px; letter-spacing: -.01em;
}
.lp-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.lp-step {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
}
.lp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad);
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 15px;
  color: #fff; margin-bottom: 14px;
}
.lp-step h3 { font-family: "Sora", sans-serif; font-size: 17px; margin-bottom: 8px; }
.lp-step p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.lp-faq { max-width: 820px; }
.lp-faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 4px 20px; margin-bottom: 10px;
}
.lp-faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; color: var(--accent); font-size: 22px; font-weight: 400;
  line-height: 1; transition: transform .2s;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p {
  color: var(--muted); font-size: 14.5px; line-height: 1.65; padding: 0 0 18px;
}

/* Tutorials. A card per guide, grouped by section. The video is a picture
   until somebody clicks it: no third-party frame loads on a page nobody
   asked to watch, which is what the public page promises about trackers. */
.tut-section { margin: 30px 0 12px; font-family: "Sora", sans-serif;
               font-size: 18px; font-weight: 600; }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 16px; }
.tut-card { background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--r-lg); overflow: hidden; display: flex;
            flex-direction: column; }
.tut-shot { position: relative; cursor: pointer; background: #000;
            aspect-ratio: 16 / 9; }
.tut-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tut-play { position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; }
.tut-play span { width: 58px; height: 58px; border-radius: 50%;
                 background: rgba(10,12,19,.72); border: 1px solid var(--line-2);
                 color: var(--text); font-size: 20px; display: flex;
                 align-items: center; justify-content: center; }
.tut-shot:hover .tut-play span { border-color: var(--accent); }
.tut-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.tut-body { padding: 18px 20px 20px; }
.tut-body h3 { font-family: "Sora", sans-serif; font-size: 16px; font-weight: 600;
               margin-bottom: 6px; }
.tut-body .tut-sum { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }
.tut-body ol { margin: 0 0 0 18px; padding: 0; }
.tut-body li { color: var(--muted); font-size: 13.5px; line-height: 1.6;
               margin-bottom: 6px; }
.tut-tools { display: flex; gap: 8px; margin-top: 12px; }

/* Help. Fixed to the corner, because the moment somebody needs it is not a
   moment they want to go looking for where help lives. */
.help-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 18px; cursor: pointer; box-shadow: var(--shadow);
}
.help-fab:hover { border-color: var(--accent); transform: translateY(-1px); }
.help-panel {
  position: fixed; right: 20px; bottom: 74px; z-index: 61;
  width: min(390px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 16px 12px;
}
.help-head { display: flex; align-items: center; justify-content: space-between;
             margin-bottom: 10px; }
.help-title { font-family: "Sora", sans-serif; font-weight: 600; }
.help-thread { flex: 1 1 auto; overflow-y: auto; min-height: 90px;
               display: flex; flex-direction: column; gap: 10px; }
.help-msg { border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
            line-height: 1.55; white-space: pre-wrap; }
.help-msg.them { background: var(--surface-2); border: 1px solid var(--line); }
.help-msg.me { background: rgba(255,61,104,.12); border: 1px solid rgba(255,61,104,.3);
               align-self: flex-end; max-width: 86%; }
.help-ask { display: flex; gap: 8px; margin-top: 12px; }
.help-ask input { flex: 1 1 auto; margin: 0; }
.help-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.help-foot { margin-top: 8px; }
.linklike { background: none; border: 0; padding: 0; font: inherit;
            color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Pricing. The cards are drawn from the API, so the only thing here is the
   shape they sit in. The recommended plan is lifted rather than coloured in,
   so it reads as a suggestion and not as a sale. */
.pc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.pc-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
}
.pc-tab {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 14px; padding: 8px 18px; border-radius: 999px;
}
.pc-tab.on { background: var(--surface); color: var(--text); font-weight: 600; }
.pc-save {
  display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2);
}
.pc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.pc-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 22px;
}
.pc-card.best { border-color: var(--line-2); box-shadow: var(--shadow); }
.pc-tag {
  align-self: flex-start; margin-bottom: 10px; padding: 3px 9px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid var(--accent-2);
}
.pc-name { font-family: "Sora", sans-serif; font-size: 17px; font-weight: 600; }
.pc-price { font-family: "Sora", sans-serif; font-size: 34px; font-weight: 700;
            letter-spacing: -.02em; margin: 10px 0 2px; }
.pc-price span { font-size: 14px; font-weight: 400; color: var(--muted); }
.pc-per { color: var(--faint); font-size: 12.5px; min-height: 18px; }
.pc-thumbs { margin: 16px 0 4px; font-size: 15px; font-weight: 600; }
.pc-credits { color: var(--muted); font-size: 13px; }
.pc-card .btn { margin-top: 18px; width: 100%; justify-content: center; }
.pc-note { margin-top: 18px; max-width: 760px; line-height: 1.6; }
.pc-h3 {
  font-family: "Sora", sans-serif; font-size: 20px; font-weight: 600;
  margin: 46px 0 8px;
}
.pc-costs { width: 100%; max-width: 560px; margin-top: 16px; border-collapse: collapse; }
.pc-costs th, .pc-costs td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.pc-costs th { color: var(--faint); font-size: 11.5px; letter-spacing: .05em;
               text-transform: uppercase; font-weight: 700; }
.pc-costs td:last-child, .pc-costs th:last-child { text-align: right; width: 108px; }
.pc-costs tr.pc-unit td { font-weight: 700; }
.pc-costs tr.pc-free td:last-child { color: var(--accent-2); font-weight: 700; }

.lp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.lp-contact-copy { padding-top: 6px; }
.lp-form { margin-bottom: 0; }
.lp-form .field-label:first-child { margin-top: 0; }
.notice {
  margin-top: 14px; padding: 10px 14px; border-radius: 9px; font-size: 13.5px;
  background: rgba(61,220,133,.1); border: 1px solid rgba(61,220,133,.32);
  color: #8ef0bb;
}
.notice.bad {
  background: rgba(255,122,122,.1); border-color: rgba(255,122,122,.35);
  color: #ffb3b3;
}

.lp-footer {
  max-width: 1180px; margin: 0 auto; padding: 34px 28px 60px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.lp-footer a { color: var(--muted); }

.auth-toggle { margin-top: 16px; font-size: 13.5px; }
.auth-toggle a { color: var(--accent-2); text-decoration: none; }
.auth-toggle a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .lp-hero { padding: 40px 18px 24px; }
  .lp-hero h1 { font-size: 38px; }
  .lp-collage { grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 6px 16px 46px; }
  .lp-contact { grid-template-columns: 1fr; gap: 24px; }
  .lp-nav { padding: 12px 16px; }
  .lp-nav-links { gap: 14px; font-size: 13px; }
  .lp-nav-links a { font-size: 13px; }
  .lp-section { padding: 44px 18px; }
  .lp-h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .lp-nav-links a:not(:last-child) { display: none; }
}

.msg-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 10px; background: var(--surface-2);
}
.msg-item.unread { border-color: var(--accent); }
.msg-head { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.msg-meta { color: var(--faint); font-weight: 400; font-size: 12px; }
.msg-body { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 8px 0 12px; white-space: pre-wrap; }

.score-btn { border-color: var(--accent); color: var(--text); }
.score-panel { animation: scoreIn .25s ease-out; }
@keyframes scoreIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.onboard {
  max-width: 940px; margin: 0 auto 22px; padding: 24px 28px;
  background: linear-gradient(150deg, rgba(255,61,104,.09), rgba(255,138,61,.05)), var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.onboard-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.onboard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 20px; }
@media (max-width: 800px) { .onboard-steps { grid-template-columns: 1fr; } }
.onboard-step h3 { font-family: "Sora", sans-serif; font-size: 15px; margin: 10px 0 6px; }
.onboard-step p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.thumb-card.is-winner {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.winner-tag {
  background: var(--grad); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; margin-right: auto;
}

/* ---------------- landing: inside the studio ---------------- */
.studio-demo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .studio-demo { grid-template-columns: 1fr; } }
.demo-card {
  background: var(--surface); border: 1px solid var(--accent); border-radius: 16px;
  padding: 12px; box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.demo-card img { width: 100%; border-radius: 10px; display: block; }
.demo-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.demo-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-btn {
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 9px; padding: 6px 11px; font-size: 12.5px; display: inline-block;
}
.demo-btn.primary { background: var(--grad); border: none; color: #fff; font-weight: 600; }
.demo-score {
  margin-top: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2);
}
.demo-score .score-weak { margin: 10px 0 12px; }
.demo-edit {
  margin-top: 9px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 9px; color: var(--faint); font-size: 12.5px; background: var(--field);
}
.demo-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px;
}
.demo-panel-h {
  font-family: "Sora", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.demo-titles { list-style: none; }
.demo-titles li {
  font-size: 13.5px; line-height: 1.45; padding: 7px 0;
  border-bottom: 1px solid var(--line); color: var(--text);
}
.demo-titles li:last-child { border-bottom: none; }
.demo-desc { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.arrow-controls { padding: 16px 20px; }
.arrow-controls .field-label { margin-top: 0; }

/* Chapter labels from a supplied script - shown under the SEO description. */
.chapter-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.chapter-list { margin: 8px 0 0; padding-left: 20px; }
.chapter-list li { font-size: 14px; line-height: 1.7; color: var(--text); }

/* Outlier results: the multiplier and its denominator travel together, because
   a number without its baseline means nothing. */
.outlier-grid {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.outlier-grid:empty { display: none; }
.outlier-card { position: relative; }
.outlier-card img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 8px; cursor: pointer; display: block;
  border: 2px solid transparent;
}
.outlier-card img:hover { border-color: var(--accent); }
.outlier-card img.picked { opacity: 0.5; border-color: var(--accent); }
.outlier-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(10, 12, 20, 0.85); color: #d8dcf0;
  font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
}
.outlier-badge.hot { background: #1f7a4d; color: #eafff2; }
.outlier-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.outlier-meta .ot {
  font-size: 12px; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.outlier-meta .oc { font-size: 11px; color: var(--muted); }
/* the second lens's figure, under the first line and quieter than it */
.outlier-meta .och { display: block; opacity: 0.85; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

/* Watchlist chips: the channel, its baseline, and how sure we are of it. */
.watch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.watch-chips:empty { display: none; }
.watch-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px;
}
.watch-chip .wc-sub { color: var(--muted); font-size: 11px; }
.watch-chip .wc-low { color: var(--warn); font-size: 11px; }
.watch-chip button {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px;
}
.watch-chip button:hover { color: #ff6b6b; }

/* Version pills: an edit adds a version, it never replaces one. */
.version-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.version-pill {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px;
  padding: 3px 11px; font-size: 12px; cursor: pointer;
}
.version-pill:hover { border-color: var(--line-2); color: var(--text); }
.version-pill.on {
  background: var(--surface-3); border-color: var(--accent);
  color: var(--text); font-weight: 600;
}

/* A typo outranks the score - it is the one defect that blocks publishing. */
.spell-warn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  background: #3a1d1d; border: 1px solid #7a3030; color: #ffd9d9;
  border-radius: var(--r-md); padding: 8px 10px; margin: 8px 0;
  font-size: 13px; font-weight: 600;
}
.spell-warn .btn { background: #7a3030; border-color: #a04242; color: #fff; }
.spell-warn .btn:hover { background: #a04242; }

/* Ask for one sentence by default; the rest is there when it is wanted. */
.more-detail { margin-top: 14px; }
.more-detail > summary {
  cursor: pointer; color: var(--muted); font-size: 13px;
  padding: 6px 0; list-style: none; user-select: none;
}
.more-detail > summary::-webkit-details-marker { display: none; }
.more-detail > summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
.more-detail[open] > summary::before { content: "- "; }
.more-detail > summary:hover { color: var(--text); }
.btn-cost { opacity: 0.75; font-size: 0.82em; margin-left: 8px; font-weight: 500; }

/* The browser's default file control was the only unstyled thing in the app,
   and there are four of them. Same shell, drag-and-drop, and a preview of
   what was picked. */
.file-drop {
  display: flex; align-items: center; gap: 10px;
  background: var(--field); border: 1px dashed var(--line-2);
  border-radius: var(--r-md); padding: 10px 12px; cursor: pointer;
  color: var(--muted); font-size: 13px; transition: border-color .15s, background .15s;
  min-height: 46px;
}
.file-drop:hover, .file-drop.over { border-color: var(--accent); background: var(--surface-2); }
.file-drop.over { border-style: solid; }
.file-drop input[type="file"] { display: none; }
.file-drop .fd-icon {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; line-height: 1;
  background: var(--surface-3); color: var(--accent);
}
.file-drop .fd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop.has-file { border-style: solid; border-color: var(--line-2); color: var(--text); }
.file-drop .fd-thumb {
  margin-left: auto; height: 30px; width: 53px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--line);
}

/* The form is long; the one action you came for should never be out of reach. */
.sticky-bar { display: none; }
.sticky-bar.show {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  z-index: 40; display: flex; align-items: center; gap: 14px;
  background: rgba(18, 21, 34, 0.94); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 8px 8px 8px 20px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px); max-width: min(92vw, 620px);
  display: flex;
}
.sticky-bar .sb-title {
  color: var(--muted); font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sticky-bar .btn { white-space: nowrap; }
@media (max-width: 560px) { .sticky-bar .sb-title { display: none; } }

/* The People-library name field sits in a .row beside a drop zone; without a
   flex basis the zone's nowrap label took 267 of 397px and squeezed the name
   input down to 30px. */
.row > .file-drop { flex: 1 1 200px; min-width: 0; }
.file-drop .fd-text { min-width: 0; }

/* ---- left rail -------------------------------------------------------------
   The app grew from one form into research plus creation plus a library, and
   the two research tools were buried four screens down inside an "optional"
   step. They are destinations now. Fixed rather than in-flow so no existing
   markup had to move. */
.rail {
  position: fixed; top: 64px; left: 0; bottom: 0; width: 210px; z-index: 30;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 18px 12px; overflow-y: auto;
}
.rail-group {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 6px 10px;
}
.rail-group:first-child { margin-top: 0; }
.rail-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--muted);
  padding: 9px 12px; border-radius: var(--r-md); cursor: pointer;
  font-size: 14px; font-family: inherit;
}
.rail-item:hover { background: var(--surface-2); color: var(--text); }
.rail-item.on { background: var(--surface-3); color: var(--text); font-weight: 600; }
#appView main { padding-left: 226px; }
.view-head { margin: 0 0 16px; }
.view-head h2 { margin: 0 0 4px; font-size: 22px; }
.view-head p { margin: 0; font-size: 14px; }
@media (max-width: 860px) {
  .rail {
    position: static; width: auto; height: auto; bottom: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
  }
  .rail nav { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .rail-group { display: none; }
  .rail-item { width: auto; padding: 7px 12px; }
  #appView main { padding-left: 0; padding-right: 0; }
  .toast-area { top: auto; bottom: 12px; right: 12px; left: 12px; max-width: none; }
}

/* Save sits on the thumbnail itself - the decision is made looking at the
   image, not after reading the metadata below it. */
.outlier-save {
  position: absolute; top: 6px; right: 6px;
  background: rgba(10, 12, 20, 0.82); color: #dfe4f5;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 11px; padding: 3px 9px; cursor: pointer; font-family: inherit;
}
.outlier-save:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.outlier-save.on { background: #1f7a4d; border-color: #2c9c65; color: #eafff2; }
.saved-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.saved-bar .btn.on { border-color: #2c9c65; color: #8ff0bd; }

/* Your own channels: wins and underperformers, per channel. */
.chan-block { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.chan-block:first-child { border-top: 0; margin-top: 0; }
.chan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.chan-head strong { font-size: 15px; }
.chan-sub {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 6px;
}
.chan-sub.weak { color: var(--warn); }
.gen-count { align-items: center; gap: 10px; margin-bottom: 10px; }
.gen-count .field-label { margin: 0; }
.gen-count select { width: auto; }

/* Messages used to live inside the generate form, which every research view
   hides - so an error on the Outliers page was written into a hidden node and
   the user saw nothing happen at all. */
.toast-area {
  position: fixed; top: 74px; right: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(92vw, 420px); pointer-events: none;
}
.toast-area p {
  margin: 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-2);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45); font-size: 13px;
  pointer-events: auto;
}
.toast-area #genError { border-color: #7a3030; background: #3a1d1d; color: #ffd9d9; }

/* Niches: the source you research from, and the queries it derived. */
.niche-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.niche-head h3 { margin: 0 0 4px; font-size: 17px; }
.niche-actions { display: flex; align-items: center; gap: 10px; }
.query-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.query-chips span {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 2px 10px; font-size: 11px;
}
.watch-chip.on { border-color: var(--accent); background: var(--surface-3); color: var(--text); }
.watch-chip .wc-type {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px;
}

/* Outlier filters. A small channel breaking out recently is a format you can
   copy today; a giant's all-time hit is not, which is what these separate. */
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0; }
.filter-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}
.filter-row select { min-width: 140px; }

/* What wins here: the read, not the raw list. */
.patterns {
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 16px 18px; margin: 14px 0;
}
.patterns h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.patterns ul { margin: 0 0 14px; padding-left: 18px; }
.patterns li { font-size: 13px; line-height: 1.6; margin-bottom: 5px; }
.patterns .copy li { color: var(--ok); }
.patterns .avoid li { color: var(--warn); }
.patterns .pat-foot { font-size: 11px; color: var(--faint); margin: 0; }

/* seen / used marking on research cards */
.outlier-card { position: relative; }
.outlier-card.seen { opacity: 0.62; }
.outlier-card.used { opacity: 1; outline: 2px solid var(--accent, #2f80ed); }
.seen-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 10px;
  background: rgba(0,0,0,0.72); color: #fff; letter-spacing: 0.02em;
}
.outlier-card.used .seen-badge { background: var(--accent, #2f80ed); }
/* a finding's examples on the study grid: its own class, so cards marked
   used keep their outline once the examples are cleared */
.outlier-card.example { outline: 2px solid #4ade80; }

/* momentum from the nightly snapshots */
.outlier-meta .om { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.outlier-meta .om .up { color: #4ade80; font-weight: 600; }
.outlier-meta .om .chg { color: #fbbf24; font-weight: 600; }
.momentum-line:empty { display: none; }

/* the idea check */
.idea-bar { gap: 10px; margin-bottom: 6px; }
.idea-verdict { border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: 10px; padding: 12px 14px; margin: 12px 0 8px; }
.idea-verdict.idea-good { border-left-color: #35c07a; }
.idea-verdict.idea-maybe { border-left-color: #e0a33a; }
.idea-verdict.idea-unknown { border-left-color: #7a7f8a; }
.idea-band { margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.idea-label { margin: 0 0 8px; color: var(--muted); }
.idea-part { margin: 3px 0; }
.idea-why { margin: 6px 0; }
.idea-facts { margin: 0 0 10px; }
.idea-h { margin: 16px 0 4px; }
.idea-card { align-items: flex-start; }
.idea-link { display: block; text-decoration: none; color: inherit; }
.idea-subject { margin: 8px 0 2px; }
.idea-owner { margin: 2px 0; font-size: 13px; }
.idea-actions { gap: 8px; margin-top: 14px; align-items: center; }
.idea-past { margin-top: 18px; }
.idea-past-row { margin: 3px 0; }

/* a topic row: the video it is modelled on, and its outline */
.dg-thumb-link { display: block; flex: 0 0 auto; }
.tp-watch { display: block; font-size: 12px; color: var(--accent); text-decoration: none;
  margin-top: 2px; }
.tp-watch:hover { text-decoration: underline; }
/* the outline sits under its row, as its own block: inside the row's flex
   line it either squeezed the row or wrapped the buttons onto a second line */
.tp-outline { border-left: 2px solid var(--line); margin: 2px 8px 10px 84px;
  padding: 2px 0 2px 12px; }
.tp-outline.hidden { display: none; }
.tp-o-head { margin: 0 0 4px; font-weight: 600; }
.tp-o-angle { margin: 0 0 6px; }
.tp-o-sub { margin: 8px 0 2px; font-weight: 600; font-size: 13px; }
.tp-o-list { margin: 0; padding-left: 18px; font-size: 13px; }
.tp-o-list li { margin: 2px 0; }
.tp-o-foot { gap: 8px; margin-top: 10px; align-items: center; }

/* what each niche search finds, and the phrases its breakouts suggest */
.niche-phrases { margin-top: 10px; }
.niche-phrases .np-row { margin: 2px 0; }
.niche-phrases .np-dead { opacity: 0.55; }
.niche-phrases .np-change { margin: 6px 0; }
.niche-phrases .np-offer { border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0; }
.niche-phrases .np-q { margin: 0 0 4px; font-weight: 600; }
.niche-phrases .np-ex { margin: 2px 0; }
.niche-phrases .np-actions { gap: 8px; margin-top: 6px; }

/* shared thumbnail + title rows (topics, findings, gaps, niche checks) */
.dg-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dg-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 6px 8px; border-radius: var(--r-sm, 8px);
}
.dg-row:hover { background: var(--surface); }
.dg-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; background: #000; }
.dg-body { display: flex; flex-direction: column; min-width: 0; }
.dg-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-sub { font-size: 12px; color: var(--muted); }
.dg-gain { color: #4ade80; }
.dg-flag { color: #fbbf24; }

/* channel read: the free scorecard, the cached analysis and the topic rows */
.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.scorecard:empty { display: none; }
.sc-tile { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm, 8px); padding: 8px 10px; }
.sc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sc-num { font-size: 18px; font-weight: 600; }
.sc-sub { font-size: 12px; color: var(--muted); }
.sc-num.up { color: #4ade80; } .sc-num.down { color: #fbbf24; }
.scorecard .sc-note { grid-column: 1 / -1; margin: 0; }
.analysed-at:empty { display: none; }
.patterns .verdict { font-size: 15px; line-height: 1.5; margin: 0 0 12px; }
.patterns .an-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.patterns .an-move { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.patterns .an-fix { cursor: pointer; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.patterns .an-fix:hover { text-decoration: underline; }
.patterns .an-actions { margin-top: 12px; }
.patterns .an-empty { font-size: 12px; color: var(--faint); margin: 0 0 12px; }
.patterns details { margin: 0 0 12px; }
.patterns details summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.patterns details .dg-row { margin-top: 6px; }
.patterns .dg-row + .dg-row { margin-top: 6px; }
.dg-row.fd { cursor: pointer; } .dg-row.fd .dg-title { white-space: normal; }
.dg-thumb.blank { background: var(--surface-3, #000); }
.era-wrap { overflow-x: auto; }
.era-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.era-table td, .era-table th { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--line-2); }
.dg-row.tp { align-items: flex-start; cursor: default; }
.dg-row.tp .dg-title { white-space: normal; }
.tp-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
.tp-why { font-size: 12px; color: var(--muted); white-space: normal; }
.tp-type { font-size: 11px; color: var(--faint); }
.tp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.tp-foot .pat-foot { flex: 1; }
.saved-h { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* overflow menu: a details element, so it opens without script and closes on
   an outside click through one document listener */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm, 8px); padding: 6px; z-index: 30; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.menu-item:hover { background: var(--surface); }

/* the wordmark is the way back to the front door, so it has to look clickable */
.brand-home {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-decoration: none; cursor: pointer;
  border-radius: 8px;
}
.brand-home:hover .wordmark { color: var(--accent, #2f80ed); }
.brand-home:focus-visible { outline: 2px solid var(--accent, #2f80ed); outline-offset: 3px; }

/* ---- channel read v2: curves, niche strips and gap rows ---- */
.bar-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 12px 0 5px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 3px; }
.bar-label { width: 120px; flex: none; color: var(--muted); }
.bar-track { flex: 1; height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent, #2f80ed); }
.bar-num { width: 74px; flex: none; text-align: right; color: var(--muted); }
.bar-row.thin { opacity: .55; }
.bar-row.best .bar-fill { background: #4ade80; }
.bar-row.best .bar-num { color: var(--text); }
.patterns .an-line { font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
.patterns .an-niche { font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
.linklike { background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent, #2f80ed); cursor: pointer; text-decoration: underline; }
.linklike:hover { color: var(--accent-2, #2f80ed); }
.niche-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; }
.ns-card { width: 150px; flex: none; cursor: pointer; }
.ns-card img { width: 100%; border-radius: 6px; display: block; }
.ns-t { font-size: 12px; line-height: 1.35; margin-top: 4px; }
.ns-c { font-size: 11px; color: var(--muted); }
.dg-row.gap-row { align-items: flex-start; }
.gap-row .dg-title { white-space: normal; }
.gap-row a.tp-why { color: var(--muted); text-decoration: none; }
.gap-row a.tp-why:hover { color: var(--text); text-decoration: underline; }
.dg-row.fd.rd { cursor: default; }

/* who else is in this niche: one competing channel per row, its Track button
   on the right, and the searches-tried receipt when nothing survived */
.dg-row.nc-row { align-items: flex-start; cursor: pointer; }
.nc-row .dg-title { white-space: normal; }
.dg-row.nc-row.rd { cursor: default; }
.dg-row.nc-check { align-items: flex-start; cursor: default; }
.nc-check .dg-title { white-space: normal; }
.nc-check:hover { background: none; }

.filter-note { margin: 2px 0 0; color: var(--warn, #fbbf24); }
.filter-note:empty { display: none; }

/* the Studio's inline sample grid: same cards, smaller, so the form stays usable */
.outlier-grid.compact { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-top: 8px; }
.outlier-grid.compact .outlier-meta { font-size: 11px; }
.outlier-grid.compact .outlier-save { padding: 2px 6px; font-size: 10px; }

/* Watch: opening the real video, without stealing the thumbnail click that
   designs against it. */
.outlier-watch {
  position: absolute; top: 6px; left: 6px;
  background: rgba(10, 12, 20, 0.82); color: #dfe4f5;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 11px; padding: 3px 9px; cursor: pointer; text-decoration: none;
  opacity: 0; transition: opacity .12s ease;
}
.outlier-card:hover .outlier-watch, .outlier-watch:focus-visible { opacity: 1; }
.outlier-watch:hover { background: #c4302b; border-color: #c4302b; color: #fff; }
a.ot { text-decoration: none; }
a.ot:hover { color: var(--accent, #2f80ed); text-decoration: underline; }

/* ---- Outliers feed: search row and status line ---- */
.feed-search { align-items: center; flex-wrap: wrap; }
.feed-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.feed-status #feedNote { flex: 1 1 240px; margin: 0; }

/* ---- Channels grid: niche outliers or the channel's own videos ---- */
.chan-mode-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%;
  background: var(--field); border: 1px solid var(--line); border-radius: 999px; }
.seg-btn { background: transparent; border: 0; border-radius: 999px; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.chan-niche-line { margin: 4px 0 10px; }
.chan-niche-bar { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.chan-niche-bar .chan-niche-line { flex: 1 1 240px; }
.niche-edit { flex: 1 1 100%; margin: 0 0 10px; }
.niche-edit > summary { cursor: pointer; color: var(--accent, #2f80ed); font-size: 13px;
  width: max-content; max-width: 100%; }
.niche-edit[open] > summary { margin-bottom: 6px; }
.niche-edit-body textarea { width: 100%; box-sizing: border-box; font-size: 13px; }
.niche-edit-actions { align-items: center; flex-wrap: wrap; margin-top: 6px; }
.niche-checked:empty { display: none; }
.niche-checked { margin-top: 8px; }
.chan-niche-line:empty, .topics-wait:empty { display: none; }
.outlier-grid .grid-note { grid-column: 1 / -1; }
.feed-more-row { display: flex; justify-content: center; margin-top: 16px; }
.tp-mix { margin-top: 4px; }

/* ---- breakout words: chips over the Outliers grid ---- */
.feed-words { margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: 12px; background: var(--surface-2); }
.fw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fw-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.fw-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.fw-chip { padding: 4px 11px; color: var(--text); }
.fw-chip .fw-stat { color: var(--muted); font-weight: 400; }
.fw-chip.active { border-color: var(--accent); background: var(--surface-3); }
#fwWorse .fw-chip { color: var(--muted); }
.feed-words:not(.open) .fw-extra,
.feed-words:not(.open) #fwWorseBox,
.feed-words:not(.open) #fwNote { display: none; }
.word-pill { margin: 4px 0 8px; font-size: 13px; }
.word-pill .linklike { margin-left: 8px; }

/* ---- check a thumbnail you already have, and text ideas on a scored card ---- */
.check-box { margin: 0 0 18px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; }
.check-box summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.check-box[open] summary { margin-bottom: 8px; }
.check-box .row { margin-top: 8px; }
.hook-ideas:empty { display: none; }
.hook-ideas { margin-top: 8px; }
.hook-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hook-idea { color: var(--text); font-weight: 700; letter-spacing: .02em; }
.hook-evidence { margin-top: 4px; }
/* Apply top fix and Text ideas sit side by side in the score panel */
.score-panel > .btn { margin: 0 8px 6px 0; }

/* ---- Channels: creating topics is the main action, above the outliers ---- */
.topics-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--accent);
  border-radius: 12px; background: var(--surface-2); }
.topics-bar-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; }
.topics-bar-text b { font-size: 15px; }
.topics-bar .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; }
/* what a topics click scrolls to clears the sticky header */
#chanTopics, #chanTopics .tp-batch { scroll-margin-top: 84px; }
.chan-analysis-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 8px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.chan-analysis-head h3 { margin: 0; font-size: 16px; }


/* the chat on one idea check */
.idea-chat { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.idea-chat-log { max-height: 320px; overflow-y: auto; display: flex;
                 flex-direction: column; gap: 8px; }
.idea-msg { max-width: 82%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; }
.idea-msg p { margin: 0; white-space: pre-wrap; }
.idea-msg.mine { align-self: flex-end; background: var(--surface-3); }
.idea-msg.theirs { align-self: flex-start; background: rgba(124,140,255,.1); }
.idea-msg .btn { margin-top: 8px; }
.idea-chat-bar { margin-top: 10px; gap: 8px; }
.idea-chat-note { margin: 6px 0 0; }

/* a refused action in the owner's record: a run of these is the point */
#auditTable { font-size: 12.5px; }
#auditTable td { vertical-align: top; }
.audit-no td { color: #ff9a9a; }

/* Plan and credits. The balance chip turns warm when it is nearly gone, which
   is the only warning anyone reliably reads. */
#creditChip.low { border-color: var(--acc); color: var(--acc); font-weight: 700; }
.plan-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.plan-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.plan-name { font-weight: 700; min-width: 86px; }
.plan-price { color: var(--ink); min-width: 74px; }
.plan-what { color: var(--mut); font-size: 13px; flex: 1 1 200px; }