/* Design tokens. Dark is the default because the app is dark and the feed
   preview must sit on the same ground the phone does. */
:root {
  --bg: #0b0c0e;
  --surface: #141619;
  --surface-2: #1b1e22;
  --text: #f2f4f6;
  --muted: #8b929b;
  --divider: #24272c;
  --accent: #16c47f;
  --accent-ink: #04140d;
  --warn: #f0b429;
  --negative: #ff5d5d;
  --radius: 12px;
  --font: Manrope, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
.app[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #10131a;
  --muted: #626b78;
  --divider: #dfe3e9;
  --accent-ink: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
a { color: inherit; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--divider);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
}
.brand { font-weight: 800; font-size: 15px; padding: 0 10px 18px; letter-spacing: -.01em; }
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; margin-top: 2px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 13px; text-decoration: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent); color: var(--accent-ink); }
.nav-item .count { font-family: var(--mono); font-size: 11px; opacity: .8; }
.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--divider); }
.whoami { padding: 0 10px 10px; font-size: 12px; color: var(--muted); }
.whoami b { display: block; color: var(--text); font-size: 13px; }

.main { padding: 24px 28px 64px; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.spacer { flex: 1; }

/* ---------- controls ---------- */
button, .btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--divider);
  background: var(--surface); color: var(--text); cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--muted); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.danger { color: var(--negative); }
button[disabled] { opacity: .45; cursor: not-allowed; }
button.ghost { background: transparent; }

input, select, textarea {
  font-family: inherit; font-size: 13px; width: 100%;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--divider); background: var(--bg); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; line-height: 1.5; }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.hint { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

.seg { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 7px;
  color: var(--muted); font-size: 12px;
}
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.seg button[disabled] { opacity: .3; }

.toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.toggle input { display: none; }
.toggle .track {
  width: 42px; height: 25px; border-radius: 13px; background: var(--divider);
  position: relative; transition: background .15s;
}
.toggle .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(17px); }

/* ---------- table ---------- */
.card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--divider); font-weight: 700;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.row:hover { background: var(--surface-2); cursor: pointer; }
.thumb { width: 40px; height: 62px; border-radius: 7px; object-fit: cover; background: var(--surface-2); display: block; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.pill.published { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.pill.draft { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.pill.deleted { background: color-mix(in srgb, var(--negative) 16%, transparent); color: var(--negative); }
.pill.image { background: color-mix(in srgb, #6aa8ff 18%, transparent); color: #6aa8ff; }
.pill.video { background: color-mix(in srgb, #b98cff 18%, transparent); color: #b98cff; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters select, .filters input { width: auto; min-width: 130px; }
.empty { padding: 44px; text-align: center; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- feed preview ---------- */
.preview-wrap { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.phone {
  width: 390px; height: 844px; flex: none;
  background: #000; border-radius: 34px; border: 8px solid #1a1c20;
  overflow-y: auto; overflow-x: hidden; position: relative;
  scrollbar-width: none;
}
.phone::-webkit-scrollbar { display: none; }
.phone-inner { padding: 16px 0 40px; color: #fff; }
.ph-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 14px; }
.ph-greet { font-size: 12px; color: #8b929b; }
.ph-title { font-size: 21px; font-weight: 800; margin-top: 2px; }
.ph-points {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 20px; background: #1b1e22; font-weight: 700; font-size: 13px;
}
.ph-points .dot { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg,#f7b733,#fc4a1a); }
.ph-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 22px; }
.ph-card { border-radius: 14px; padding: 13px; min-height: 96px; display: flex; flex-direction: column; }
.ph-card.t2v { background: linear-gradient(140deg,#2b1d4d,#171a2e); }
.ph-card.i2v { background: linear-gradient(140deg,#4d3a12,#241d10); }
.ph-card b { font-size: 13px; }
.ph-card span { font-size: 10px; color: #9aa1ab; margin-top: 3px; line-height: 1.35; flex: 1; }
.ph-card em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.ph-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.ph-sec-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ph-all { font-size: 10px; font-weight: 700; color: #8b929b; border: 1px solid #2a2d33; border-radius: 20px; padding: 3px 9px; }
.ph-strip { display: flex; gap: 9px; overflow-x: auto; padding: 0 16px 22px; scrollbar-width: none; }
.ph-strip::-webkit-scrollbar { display: none; }
/* `columns` per row, growing downward — the For You layout. */
.ph-grid { display: grid; gap: 9px; padding: 0 16px 22px; }
.ph-tile { flex: none; position: relative; border-radius: 11px; overflow: hidden; background: #1b1e22; cursor: pointer; }
.ph-grid .ph-tile { flex: initial; width: 100%; }
.ph-tile video, .ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 7px;
  font-size: 11px; font-weight: 700;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.ph-tile .badge {
  position: absolute; top: 6px; left: 6px; width: 19px; height: 19px; border-radius: 6px;
  background: rgba(0,0,0,.55); display: grid; place-items: center; font-size: 10px;
}
.ph-tile .rank {
  position: absolute; top: 6px; right: 6px; min-width: 19px; height: 19px; border-radius: 6px;
  background: rgba(0,0,0,.55); display: grid; place-items: center; font-size: 10px; font-weight: 800;
}
.ph-tile .draft-ribbon {
  position: absolute; top: 11px; right: -26px; transform: rotate(45deg);
  background: var(--warn); color: #241d10; font-size: 8px; font-weight: 900;
  letter-spacing: .08em; padding: 2px 28px;
}
.ph-empty { color: #666; font-size: 12px; padding: 0 16px 22px; }

.inspector { flex: 1; min-width: 300px; position: sticky; top: 24px; }
.inspector pre {
  margin: 0; padding: 14px; font-family: var(--mono); font-size: 11px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-height: 720px; overflow: auto; color: var(--muted);
}
.preview-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.preview-bar input[type="number"] { width: 84px; }

/* ---------- editor ---------- */
.editor { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; }
.panel { padding: 18px; }
.panel h2 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drop {
  border: 1.5px dashed var(--divider); border-radius: var(--radius);
  padding: 16px; text-align: center; color: var(--muted); cursor: pointer;
  font-size: 12px; transition: border-color .12s, background .12s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--surface-2); }
.drop.filled { padding: 8px; border-style: solid; }
.drop video, .drop img { width: 100%; border-radius: 8px; display: block; max-height: 230px; object-fit: contain; background: #000; }
.progress { height: 3px; background: var(--divider); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.slots { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 10px; }
.counter { float: right; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.counter.over { color: var(--negative); font-weight: 700; }
.checklist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.checklist li { padding: 6px 0; display: flex; gap: 8px; cursor: pointer; border-bottom: 1px solid var(--divider); }
.checklist li:last-child { border-bottom: 0; }
.checklist li.ok { color: var(--muted); cursor: default; }
.checklist li.bad { color: var(--negative); }
.sticky-foot {
  position: sticky; bottom: 0; margin-top: 18px; padding: 14px 0 0;
  background: linear-gradient(transparent, var(--bg) 30%);
  display: flex; gap: 10px; align-items: center;
}

/* ---------- media grid + reorder ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; }
.media-cell { background: var(--surface); border: 1px solid var(--divider); border-radius: 10px; overflow: hidden; }
.media-cell video, .media-cell img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: #000; }
.media-cell .meta { padding: 8px; font-size: 10px; color: var(--muted); }
.media-cell .meta b { display: block; color: var(--text); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.order-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(132px,1fr)); gap: 12px; }
.order-cell {
  background: var(--surface); border: 1px solid var(--divider); border-radius: 10px;
  overflow: hidden; cursor: grab; position: relative;
}
.order-cell.dragging { opacity: .35; }
.order-cell.over { border-color: var(--accent); }
.order-cell img, .order-cell video { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: #000; }
.order-cell .lbl { padding: 7px 8px; font-size: 11px; font-weight: 600; }
.order-cell .pos {
  position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff;
  border-radius: 6px; font-size: 10px; font-weight: 800; padding: 2px 6px;
}
.dirty { color: var(--warn); font-size: 12px; font-weight: 600; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--divider); border-radius: 10px;
  padding: 11px 18px; font-size: 13px; font-weight: 600; z-index: 50;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.toast.err { border-color: var(--negative); color: var(--negative); }

/* ---------- app-like template preview (the "Preview" screens) ---------- */
.tp-wrap { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.tp-phone {
  width: 390px; height: 844px; flex: none; position: relative;
  background: #000; border-radius: 34px; border: 8px solid #1a1c20; overflow: hidden;
}
.tp-media { position: absolute; inset: 0; }
.tp-media video, .tp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 45%, rgba(0,0,0,.75) 100%);
}
.tp-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; color: #fff;
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
  padding: 44px 14px 10px; font-size: 14px; font-weight: 700;
}
.tp-nav .back { font-size: 19px; cursor: pointer; }
.tp-nav .title { text-align: center; }
.tp-status {
  position: absolute; top: 14px; left: 0; right: 0; z-index: 4; color: #fff;
  display: flex; justify-content: space-between; padding: 0 22px; font-size: 12px; font-weight: 600;
}
.tp-cta {
  position: absolute; left: 20px; right: 20px; bottom: 34px; z-index: 3;
  background: #fff; color: #10131a; border: 0; border-radius: 28px;
  padding: 15px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.tp-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #17191d; border-radius: 22px 22px 0 0; padding: 10px 16px 24px;
  box-shadow: 0 -18px 40px rgba(0,0,0,.5);
}
.tp-grabber { width: 36px; height: 4px; border-radius: 2px; background: #3a3f47; margin: 0 auto 12px; }
.tp-sheet h4 { margin: 0; text-align: center; color: #fff; font-size: 16px; font-weight: 700; }
.tp-sheet .sub { text-align: center; color: #8b929b; font-size: 11px; margin: 3px 0 16px; }
.tp-slots { display: grid; gap: 10px; }
.tp-slot {
  background: #23262b; border-radius: 14px; aspect-ratio: 1/1;
  display: grid; place-items: center; gap: 7px; cursor: pointer;
  color: #8b929b; font-size: 11px; position: relative; overflow: hidden;
  border: 1px solid transparent;
}
.tp-slot:hover { border-color: var(--accent); }
.tp-slot .ico { font-size: 21px; }
.tp-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-slot .acts {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: .03em;
}
.tp-slot .acts button {
  flex: 1; border: 0; padding: 6px 2px; font-family: inherit; font-size: 9px; font-weight: 700;
  background: rgba(0,0,0,.72); color: #fff; cursor: pointer; border-radius: 0;
}
.tp-slot .acts button.del { color: #ff5d5d; }
.tp-swap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: #10131a; font-size: 14px; font-weight: 700; font-family: inherit;
}
.tp-points {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #9aa1ab; font-size: 11px; margin: 16px 0 12px;
}
.tp-points .coin { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg,#f7b733,#fc4a1a); }
.tp-gen {
  width: 100%; border: 0; border-radius: 26px; padding: 14px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: #fff; color: #10131a;
}
.tp-gen[disabled] { background: #2b2f35; color: #6c737c; cursor: not-allowed; }
.tp-side { flex: 1; min-width: 300px; position: sticky; top: 24px; }
.tp-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.tp-result { position: absolute; inset: 0; z-index: 6; background: #000; }
.tp-result video { width: 100%; height: 100%; object-fit: contain; }
.tp-result-close {
  position: absolute; top: 44px; right: 14px; width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.tp-result img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Text-to-Video / Image-to-Video creation screens ---------- */
.sc-phone {
  width: 390px; height: 844px; flex: none; position: relative;
  background: #0b0c0e; border-radius: 34px; border: 8px solid #1a1c20;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.sc-phone::-webkit-scrollbar { display: none; }
.sc-inner { padding: 0 16px 28px; color: #fff; }
.sc-nav {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center;
  padding: 40px 0 18px; position: sticky; top: 0; background: #0b0c0e; z-index: 2;
}
.sc-nav .back { font-size: 18px; cursor: pointer; }
.sc-nav .title { text-align: center; font-size: 15px; font-weight: 700; }
.sc-coins {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px;
  border-radius: 20px; background: #1b1e22; font-weight: 700; font-size: 13px;
}
.sc-coins .coin {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#f7b733,#fc4a1a);
  display: grid; place-items: center; font-size: 11px;
}
.sc-h { font-size: 16px; font-weight: 700; margin: 6px 0 2px; }
.sc-sub { font-size: 11px; color: #8b929b; margin-bottom: 10px; }
.sc-box { background: #17191d; border-radius: 14px; padding: 12px; }
.sc-box textarea {
  width: 100%; background: transparent; border: 0; resize: none; color: #fff;
  font-family: inherit; font-size: 12px; line-height: 1.55; min-height: 92px; padding: 0;
}
.sc-box textarea:focus { outline: none; }
.sc-boxfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.sc-surprise {
  border: 0; border-radius: 20px; padding: 5px 11px; cursor: pointer;
  background: rgba(139,110,255,.18); color: #b79cff;
  font-family: inherit; font-size: 10px; font-weight: 700;
}
.sc-count { font-size: 10px; color: #8b929b; display: flex; align-items: center; gap: 5px; }
.sc-count.over { color: #ff5d5d; font-weight: 700; }
.sc-upload {
  border: 1.5px dashed #33373d; border-radius: 14px; padding: 26px 12px;
  display: grid; place-items: center; gap: 8px; cursor: pointer; position: relative;
  overflow: hidden; min-height: 118px;
}
.sc-upload:hover { border-color: var(--accent); }
.sc-upload .plus {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #10131a;
  display: grid; place-items: center; font-size: 19px; font-weight: 700;
}
.sc-upload b { font-size: 12px; font-weight: 600; }
.sc-upload span { font-size: 10px; color: #6c737c; }
.sc-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-upload .clear {
  position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff;
  font-family: inherit; font-size: 12px;
}
.sc-rows { background: #17191d; border-radius: 14px; overflow: hidden; }
.sc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px; border-bottom: 1px solid #21242a; font-size: 13px;
}
.sc-row:last-child { border-bottom: 0; }
.sc-row .val {
  display: inline-flex; align-items: center; gap: 6px;
  color: #cfd4da; font-size: 12px; cursor: pointer;
}
.sc-row select {
  background: transparent; border: 0; color: #cfd4da; font-family: inherit;
  font-size: 12px; text-align: right; padding: 0; width: auto; cursor: pointer;
}
.sc-row select:focus { outline: none; }
.sc-toggle { width: 44px; height: 26px; border-radius: 13px; background: #2b2f35; position: relative; cursor: pointer; border: 0; }
.sc-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.sc-toggle.on { background: #16c47f; }
.sc-toggle.on::after { transform: translateX(18px); }
.sc-cost {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #9aa1ab; font-size: 11px; margin: 22px 0 12px;
}
.sc-cost .coin { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg,#f7b733,#fc4a1a); }
.sc-generate {
  width: 100%; border: 0; border-radius: 26px; padding: 15px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: #fff; color: #10131a;
}
.sc-generate[disabled] { background: #2b2f35; color: #6c737c; cursor: not-allowed; }