:root {
  /* psyrenne brand: ink, teal, pearl, blush, gold (same as psyrenne.com) */
  --bg: #f7f4ef;
  --panel: #ffffff;
  --ink: #1b1a2e;
  --muted: #6b6880;
  --line: #e6e1d8;
  --accent: #1f7a70;
  --accent-ink: #ffffff;
  --accent-soft: #e3f2f0;
  --yes: #2f7d4f;
  --yes-soft: #e3f2e8;
  --no-soft: #f1eee8;
  --danger: #b3261e;
  --blush: #e8b4b8;
  --blush-soft: #fbeef0;
  --gold: #c99a2e;
  /* Sidebar: white, with the active page in soft teal */
  --sidebar: #ffffff;
  --sidebar-ink: #1b1a2e;
  --sidebar-muted: #55536a;
  --sidebar-hover: #f5f2ec;
  --sidebar-active: #e3f2f0;
  /* Banner on Today */
  --hello-bg: linear-gradient(120deg, #fbeef0 0%, #f6efe3 55%, #e3f2f0 100%);
  /* Charts: one blue, dark step = settled, light step = pending (validated with the dataviz palette checker) */
  --chart-settled: #2a78d6;
  --chart-pending: #86b6ef;
  --chart-grid: #e3e9f0;
  /* Video age, newest darkest (validated as an ordinal blue ramp) */
  --age-0: #104281; --age-1: #256abf; --age-2: #5598e7; --age-3: #86b6ef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12111f; --panel: #1b1a2e; --ink: #f1eee8; --muted: #a9a6b8; --line: #2e2c45;
    --accent: #5cc8ba; --accent-ink: #0f1d1b; --accent-soft: #1d3a37;
    --yes: #7cc79a; --yes-soft: #1f3528; --no-soft: #24223a; --danger: #f08a82;
    --blush: #e8b4b8; --blush-soft: #3a2730; --gold: #e2bb5a;
    --sidebar: #17162a; --sidebar-ink: #f1eee8; --sidebar-muted: #b9b6c8;
    --sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active: #1d3a37;
    --hello-bg: linear-gradient(120deg, #33232c 0%, #2a2636 55%, #1d3a37 100%);
    --chart-settled: #5598e7; --chart-pending: #1c5cab; --chart-grid: #2a3442;
    --age-0: #86b6ef; --age-1: #3987e5; --age-2: #256abf; --age-3: #184f95;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; display: flex; min-height: 100vh;
  background: var(--bg); color: var(--ink);
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* Sidebar: icon menu with sections that fold away */
.sidebar { width: 228px; flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-ink); padding: 18px 12px; font-size: 14px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; text-decoration: none; color: var(--sidebar-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.logo img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
#nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; padding-bottom: 8px; }
#nav a, #nav summary { display: flex; align-items: center; gap: 10px; color: var(--sidebar-muted); text-decoration: none; padding: 6px 10px; border-radius: 10px; }
#nav a img, #nav summary img { width: 26px; height: 26px; flex-shrink: 0; }
#nav a.sub { padding: 4px 10px 4px 22px; font-size: 13.5px; }
#nav a.sub img { width: 22px; height: 22px; }
#nav a.top, #nav summary { color: var(--sidebar-ink); font-weight: 600; }
#nav summary { list-style: none; cursor: pointer; margin-top: 6px; }
#nav summary::-webkit-details-marker { display: none; }
#nav summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--sidebar-muted); border-bottom: 2px solid var(--sidebar-muted); transform: rotate(-45deg); transition: transform .15s; }
#nav details[open] > summary::after { transform: rotate(45deg); }
#nav a:hover, #nav summary:hover { color: var(--sidebar-ink); background: var(--sidebar-hover); }
#nav a.active { color: var(--accent); background: var(--sidebar-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
#nav .nav-bottom { margin-top: auto; }
#nav .soon { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a4b52; background: var(--blush-soft); border-radius: 999px; padding: 2px 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #nav .soon { color: var(--blush); } }
@media (prefers-reduced-motion: reduce) { #nav summary::after { transition: none; } }

/* Owner-only tools are hidden for invited creators (the server blocks them too). */
.not-owner #socoBtn, .not-owner .owner-only { display: none !important; }
.guest-only { display: none; }
.not-owner .guest-only { display: inline; }

/* Settings: AI allowance and invite links */
.allow-bar { height: 8px; border-radius: 999px; background: var(--no-soft); overflow: hidden; margin: 4px 0 8px; }
.allow-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.invite-link { width: 100%; max-width: 520px; margin: 6px 0; font-size: 13px; }

/* Signed-in creator, bottom of the menu (online only) */
.me { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 12px 8px 0; margin-top: 8px; font-size: 13px; }
.me-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--blush-soft); color: var(--ink); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-text span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-out { margin-left: auto; font-size: 12.5px; white-space: nowrap; }

/* Today: greeting banner */
.hello { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; background: var(--hello-bg); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; margin-bottom: 18px; min-height: 150px; }
.hello-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hello-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hello h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; letter-spacing: -.01em; }
.hello h1 .title-icon { width: 42px; height: 42px; flex-shrink: 0; }
.hello-line { margin: 0; color: var(--muted); font-size: 15px; max-width: 560px; }
.hello-line strong { color: var(--ink); }
.hello-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; font-weight: 600; }
.hello-links a { color: var(--accent); text-decoration: none; }
.hello-links a:hover { text-decoration: underline; }
.hello-art { width: 190px; height: auto; flex-shrink: 0; margin: -10px -6px -26px 0; align-self: flex-end; }

/* Main */
main { flex: 1; min-width: 0; padding: 20px 22px 48px; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 19px; margin: 0 0 14px; }
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head .count { color: var(--muted); }
.page-head h1 { display: flex; align-items: center; gap: 10px; }
.page-head h1 .title-icon { width: 38px; height: 38px; flex-shrink: 0; }
.spacer { flex: 1; }
.muted { color: var(--muted); }

button { cursor: pointer; border-radius: 6px; padding: 7px 14px; border: 1px solid var(--line); background: var(--panel); }
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { filter: brightness(1.07); }
button.secondary { background: transparent; }
button.danger { color: var(--danger); background: transparent; border-color: transparent; }
button.danger:hover { border-color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

/* Filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input[type=search] { flex: 1 1 240px; }
.chip { border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Table */
.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 6px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Long unbroken text (IDs, run-together words) wraps instead of pushing the table off the side. */
td.name, td.hook-cell, td.lib-text { overflow-wrap: anywhere; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; background: var(--panel); position: sticky; top: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg); }
tbody tr:last-child td { border-bottom: none; }
td.name { font-weight: 600; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

.toggle { border-radius: 999px; padding: 2px 10px; font-size: 13px; border: 1px solid transparent; min-width: 48px; }
.toggle.yes { background: var(--yes-soft); color: var(--yes); font-weight: 600; }
.toggle.no { background: var(--no-soft); color: var(--muted); }
.toggle.unknown { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.tag { display: inline-block; white-space: nowrap; border-radius: 4px; padding: 1px 7px; font-size: 12px; background: var(--no-soft); color: var(--muted); }
.tag.hot { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Dialogs */
dialog { border: none; border-radius: 12px; padding: 24px; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.wide { width: min(900px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(20,18,16,.45); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid textarea { min-height: 60px; resize: vertical; color: var(--ink); }
.form-grid input, .form-grid select { color: var(--ink); }
.form-error { color: var(--danger); min-height: 1.2em; margin: 10px 0 0; }
.dialog-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Import */
.dropzone { border: 2px dashed var(--line); border-radius: 10px; padding: 36px; text-align: center; color: var(--muted); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.map-table td { vertical-align: top; }
.map-table .sample { color: var(--muted); font-size: 13px; max-width: 320px; }
.result-box { background: var(--bg); border-radius: 8px; padding: 14px 18px; margin: 12px 0; }
.result-box ul { margin: 6px 0 0; padding-left: 20px; }
.notice { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* Placeholder screens */
.coming { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 32px; max-width: 560px; }

/* Phone width */
@media (max-width: 760px) {
  body { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .logo { padding: 0 4px 8px; }
  #nav { flex: none; }
  #nav .nav-bottom { margin-top: 0; }
  .hello { padding: 20px; }
  .hello-art { width: 120px; margin-bottom: -20px; }
  .hello h1 { font-size: 24px; }
  main { padding: 20px 16px 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}

/* Viral script transcript */
.transcript { background: var(--bg); border-radius: 8px; padding: 6px 16px; max-height: 50vh; overflow-y: auto; }
.transcript p { margin: 8px 0; }
.transcript p.flagged { background: var(--accent-soft); border-radius: 4px; padding: 2px 6px; margin-left: -6px; }

/* Rules and voices */
.intro { max-width: 760px; margin: -6px 0 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.card h2 { margin-bottom: 10px; }
.rule-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rule-row.off .rule-text { color: var(--muted); text-decoration: line-through; }
.rule-text { flex: 1; cursor: text; padding: 2px 4px; border-radius: 4px; }
.rule-text:hover { background: var(--bg); }
.rule-edit { flex: 1; }
.rule-edit textarea { width: 100%; min-height: 64px; resize: vertical; }
.rule-edit .dialog-actions { margin-top: 6px; justify-content: flex-end; }
.rule-tools { display: flex; gap: 2px; }
button.icon { padding: 2px 8px; background: transparent; border-color: transparent; color: var(--muted); }
button.icon:hover:not(:disabled) { border-color: var(--line); color: var(--ink); }
button.icon.danger:hover { color: var(--danger); border-color: var(--danger); }
.add-rule { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.add-rule input { flex: 1 1 240px; }
details.card summary { cursor: pointer; }
pre.prompt { white-space: pre-wrap; font: 13px/1.5 Consolas, monospace; background: var(--bg); border-radius: 8px; padding: 12px 14px; margin: 12px 0 0; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.voice-card { display: flex; flex-direction: column; margin: 0; }
.voice-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voice-card header h2 { margin: 0; }
.voice-card p { margin: 10px 0 0; }
.voice-card .examples { white-space: pre-line; font-style: italic; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.voice-card footer { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.voice-card.off { opacity: .6; }

/* Sales */
.tiles { display: grid; grid-template-columns: minmax(230px, 2fr) repeat(3, minmax(110px, 1fr)); gap: 12px; margin-bottom: 8px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tile.hero { grid-column: 1 / -1; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tile-label { font-size: 13px; color: var(--muted); }
.tile-value { font-size: 26px; font-weight: 600; }
.tile.hero .tile-value { font-size: 44px; line-height: 1.1; }
.tile-note { font-size: 13px; color: var(--muted); }
.small { font-size: 13px; }
.chart-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-head h2 { margin: 0; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin-left: auto; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart { position: relative; }
.chart svg { display: block; overflow: visible; }
.chart .tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .hit { cursor: default; }
.chart .hit.on { fill: var(--ink); fill-opacity: .04; }
.chart-tip { position: absolute; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; z-index: 2; }
table.mini { width: auto; margin-top: 8px; }
table.mini td, table.mini th { padding: 4px 12px; }
.table-wrap.flat { border: none; border-radius: 0; }
.table-wrap.flat tbody tr { cursor: default; }
.show-more { margin-top: 10px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.two-col .card { margin-bottom: 0; }
.link-btn { display: inline-block; margin-left: 6px; padding: 0 8px; font-size: 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Errors and the restart banner */
.error-card { max-width: 620px; border-color: var(--danger); }
.error-card h2 { color: var(--danger); }
#updateBar { position: fixed; top: 0; left: 164px; right: 0; z-index: 5; background: var(--accent); color: var(--accent-ink);
  padding: 10px 32px; font-weight: 600; font-size: 14px; }
#updateBar + main { padding-top: 64px; }
@media (max-width: 760px) { #updateBar { position: static; } #updateBar + main { padding-top: 20px; } }

/* Sortable column headings */
.sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; }
.sort-btn:hover, .sort-btn.on { color: var(--ink); }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sort-arrow { font-size: 10px; opacity: .55; }
.sort-btn.on .sort-arrow { opacity: 1; color: var(--accent); }
th.num .sort-btn { justify-content: flex-end; }

/* Product name that opens its videos */
.product-link { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.product-link:hover { text-decoration-color: currentColor; }
.product-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
tr.static { cursor: default; }
#salesProducts td:nth-child(1) { min-width: 100px; }
#salesProducts td:nth-child(2) { min-width: 200px; }

/* Custom date range on Sales */
.custom-dates { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.custom-dates[hidden] { display: none; }
.custom-dates label { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.custom-dates input { color: var(--ink); }
td.nowrap { white-space: nowrap; }

/* Videos posted vs sales */
.card h3 { font-size: 15px; margin: 18px 0 8px; }
.chart-head h3 { margin: 18px 0 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: auto; }
.seg button { border: none; border-radius: 0; padding: 4px 12px; font-size: 13px; background: transparent; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
#lagVerdict { margin: 10px 0 4px; }

/* Written guidance at the top of Sales */
.guidance { border-left: 4px solid var(--accent); }
.guidance ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 10px; max-width: 900px; }
.guidance li { line-height: 1.55; }

/* Video details pop-up */
.video-form { display: grid; gap: 14px; }
.video-form fieldset { border: none; padding: 0; margin: 0; }
.video-form legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.video-form label.block { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.video-form label.block[hidden] { display: none; }
.video-form textarea, .video-form input:not([type=radio]) { color: var(--ink); width: 100%; resize: vertical; }
.seg-lg { margin-left: 0; }
.seg-lg label { display: inline-flex; cursor: pointer; }
.seg-lg input { position: absolute; opacity: 0; pointer-events: none; }
.seg-lg span { padding: 6px 16px; font-size: 14px; color: var(--muted); }
.seg-lg label + label span { border-left: 1px solid var(--line); }
.seg-lg input:checked + span { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg-lg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.details-btn { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.details-btn:hover .tag { background: var(--accent-soft); color: var(--accent); }
.details-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Calendar */
.page-head .seg { margin-left: 8px; }
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-toolbar h2 { margin: 0 6px; min-width: 150px; text-align: center; }
.cal-toolbar.small { font-size: 13px; }
.icon-btn { padding: 4px 10px; }
.legend i.sw-posted, .legend i.sw-sold, .legend i.sw-suggested, .legend i.sw-planned, .legend i.sw-done { width: 12px; height: 12px; }
.sw-posted { background: var(--accent-soft); border: 1px solid var(--accent); }
.sw-sold { background: var(--chart-settled); }
.sw-suggested { background: transparent; border: 1px dashed var(--muted); }
.sw-planned { background: var(--accent-soft); border: 1px solid var(--accent); }
.sw-done { background: var(--yes-soft); border: 1px solid var(--yes); }

.hist-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .hist-layout { grid-template-columns: 1fr; } }
.hist-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hist-head { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); text-align: center; padding: 4px 0; }
.hist-day { min-height: 78px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; position: relative; }
.hist-day.other { opacity: .45; }
.hist-day.today { border-color: var(--accent); }
.hist-day.picked { outline: 2px solid var(--accent); outline-offset: -1px; }
.hist-num { font-size: 13px; font-weight: 600; }
.chip-posted, .chip-sold { font-size: 11px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.chip-posted { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip-sold { background: var(--chart-settled); color: #fff; }
.hist-note { position: absolute; top: 5px; right: 7px; font-size: 11px; color: var(--muted); }
.hist-form { display: grid; gap: 10px; margin: 0; }
.hist-form h3 { margin: 0; }
.hist-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.hist-form input { color: var(--ink); }

/* The calendar is as long as the day and scrolls with the page (no box of its own to scroll). */
.plan-wrap { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.plan-wrap.wide { overflow-x: auto; }   /* more than 7 custom days: scroll sideways (the day names then don't stay pinned) */
.plan-nav { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; margin: -8px 0 2px; }
.plan-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.plan-corner, .plan-dayhead { position: sticky; top: var(--plan-nav-h, 0px); background: var(--panel); z-index: 2; border-bottom: 1px solid var(--line); }
.plan-dayhead { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 0; text-transform: uppercase; letter-spacing: .3px; }
.plan-dayhead strong { font-size: 16px; color: var(--ink); }
.plan-dayhead.today strong { color: var(--accent); }
.plan-hour { font-size: 11px; color: var(--muted); text-align: right; padding: 4px 6px 0 0; border-top: 1px solid var(--line); }
.plan-cell { min-height: 40px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 2px; display: flex; flex-direction: column; gap: 2px; cursor: copy; }
.plan-cell.today { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.plan-cell.drop { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
.post-card { font-size: 12px; line-height: 1.3; border-radius: 6px; padding: 3px 6px; cursor: grab; display: flex; flex-direction: column;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); }
.post-card.suggested { background: var(--panel); border: 1px dashed var(--muted); }
.post-card.posted { background: var(--yes-soft); border-color: var(--yes); }
.post-card.dragging { opacity: .4; }
.post-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.post-time { font-weight: 600; font-size: 11px; color: var(--muted); }
.post-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.form-grid label.check { flex-direction: row; align-items: center; gap: 6px; padding-top: 22px; }

/* Plan: day view */
.plan-grid.day { grid-template-columns: 56px minmax(0, 1fr); min-width: 0; }
.plan-grid.day .plan-cell { flex-direction: row; flex-wrap: wrap; align-content: flex-start; padding: 4px; }
.plan-grid.day .post-card { flex: 0 1 260px; padding: 6px 10px; font-size: 13px; }
.plan-grid.day .post-name { -webkit-line-clamp: 3; }
.post-reason { font-size: 11px; color: var(--muted); margin-top: 2px; }
.plan-grid:not(.day) .plan-dayhead { cursor: pointer; }
.plan-grid:not(.day) .plan-dayhead:hover strong { color: var(--accent); text-decoration: underline; }

/* Plan: half-hour rows */
.plan-cell { min-height: 30px; }
.plan-cell.half, .plan-hour.half { border-top-style: dashed; border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
.plan-hour.half { color: color-mix(in srgb, var(--muted) 60%, transparent); font-size: 10px; }

/* My scripts */
a.button { display: inline-block; text-decoration: none; border-radius: 6px; padding: 7px 14px; }
a.button.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.hook-cell { max-width: 360px; }
.tag.warn { background: #fdf0d5; color: #8a5a00; }
.tag.ok { background: var(--yes-soft); color: var(--yes); }
.tag.status-posted { background: var(--yes-soft); color: var(--yes); }
.tag.status-drafted { background: var(--no-soft); color: var(--muted); }
.perf { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.perf > div { display: flex; flex-direction: column; gap: 2px; }
.perf strong { font-size: 20px; }
.script-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .script-layout { grid-template-columns: 1fr; } }
.script-layout textarea, .script-layout input:not([type=radio]) { width: 100%; color: var(--ink); resize: vertical; }
.script-layout #scriptText { font-size: 16px; line-height: 1.6; }
.script-layout [hidden] { display: none; }
.form-grid.one { grid-template-columns: 1fr; }
.script-check { display: grid; gap: 6px; }
.check-line { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; padding: 6px 8px; border-radius: 6px; }
.check-line.flagged { background: #fdf0d5; }
.role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding-top: 2px; }
.role-hook { color: var(--accent); }
.role-call-to-action { color: var(--chart-settled); }
.flag-note { display: block; font-size: 12px; color: #8a5a00; margin-top: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .check-line.flagged, :root:not([data-theme="light"]) .tag.warn { background: #3a2f17; }
  :root:not([data-theme="light"]) .flag-note, :root:not([data-theme="light"]) .tag.warn { color: #f0c36a; }
}

/* Generate */
.form-hint { font-size: 13px; color: #8a5a00; margin: -4px 0 0; }
.form-hint:empty { display: none; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.gen-card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gen-card h3 { margin: 0; }
.gen-card .tile-label { display: block; margin-top: 4px; }
.hook-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hook-pair p { margin: 2px 0 0; }
.text-hook { font-weight: 700; font-size: 16px; }
.teleprompter { font-size: 16px; line-height: 1.5; background: var(--bg); border-radius: 8px; padding: 6px 12px; }
.teleprompter p { margin: 8px 0; }
.teleprompter p.flagged { background: #fdf0d5; border-radius: 4px; padding: 2px 6px; margin-left: -6px; }
.overlays { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.overlays li span:first-child { margin-right: 6px; }
.beats td { vertical-align: top; }
.warn-text { color: #8a5a00; }
.ok-text { color: var(--yes); }
.dialog-actions.wrap { flex-wrap: wrap; align-items: center; margin-top: auto; }
/* Settings */
.settings-card { max-width: 760px; }
.key-row { display: flex; gap: 8px; flex-wrap: wrap; }
.key-row input { flex: 1 1 320px; color: var(--ink); font-family: Consolas, monospace; }
.radio-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .teleprompter p.flagged { background: #3a2f17; }
  :root:not([data-theme="light"]) .form-hint, :root:not([data-theme="light"]) .warn-text { color: #f0c36a; }
}

/* Settings: phone access */
.phone-on { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.qr { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; flex-shrink: 0; }
.qr svg { width: 100%; height: 100%; display: block; }
.phone-url { font: 600 17px Consolas, monospace; margin: 4px 0; word-break: break-all; }
.phone-pin { font: 700 24px Consolas, monospace; letter-spacing: 4px; }

/* Product URL */
.url-row { display: flex; gap: 8px; align-items: center; }
.url-row input { flex: 1; }

/* My scripts: compact list, rows open in place */
.ms-table tbody tr[data-script] { cursor: pointer; }
.ms-table tbody tr.open { background: var(--accent-soft); }
.ms-table tr.ms-detail > td { background: var(--bg); padding: 14px 16px 18px; cursor: default; }
.ms-open { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 18px; }
@media (max-width: 900px) { .ms-open { grid-template-columns: 1fr; } }
.ms-side p { margin: 0 0 10px; }
.ms-side .tile-label { display: block; }
.pre { white-space: pre-line; }

.ms-section { margin: 22px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.ms-section .count { font-size: 14px; font-weight: 400; }

/* Overlays and hooks */
.lib-table tbody tr { cursor: pointer; }
.lib-text { max-width: 420px; }
.form-grid [hidden] { display: none; }
/* Reports */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 8px; }
.report-btn { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.report-btn span { font-size: 13px; color: var(--muted); }
.report-btn:hover { border-color: var(--accent); }
.report-btn.on { border-color: var(--accent); background: var(--accent-soft); }
#reportOut { margin-top: 18px; }
.bar-cell { width: 28%; min-width: 80px; }
.bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--chart-settled); }

/* Platforms: which platforms a script is for, and the platform tags in lists. */
.platform-pick { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.platform-pick legend { font-size: 13px; padding: 0 4px; }
.form-grid .platform-pick label.check { padding-top: 0; font-weight: normal; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; width: auto; }
.platform-pick label.check input { width: auto; margin: 0; }
.tag.platform { background: rgba(20, 150, 160, .14); color: #12808a; }
#salesMonth { max-width: 140px; }

/* Calendar: a post's script, and the script pickers when adding a batch */
.post-script { display: block; font-size: 11px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script-picks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.script-picks label { display: flex; flex-direction: column; gap: 4px; }

/* Two fields side by side in the video details pop-up */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } }

/* The script you're looking at, in the list of videos made from the same script */
tr.current td { background: var(--accent-soft); }

/* Emoji names under an overlay: "💜 purple heart · 🫧 bubbles" */
.emoji-names { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Overlays and hooks: the text gets most of the width; long hooks show 3 lines (hover or open one for the rest). */
/* Four columns that always fit: text, source, product, results. */
.lib-table { table-layout: fixed; }
.lib-table th:nth-child(1) { width: 28%; } .lib-table th:nth-child(2) { width: 22%; } .lib-table th:nth-child(3) { width: 12%; } .lib-table th:nth-child(4) { width: 14%; }
.lib-table th:nth-child(5) { width: 7%; } .lib-table th:nth-child(6) { width: 10%; } .lib-table th:nth-child(7) { width: 7%; }
table.lib-table td.lib-cta { text-align: left; } .lib-table td.lib-cta .clamp2 { margin-bottom: 3px; }
table.lib-table th:nth-child(2) .sort-btn { justify-content: flex-start; } table.lib-table th:nth-child(2) { text-align: left; }
/* Less space between columns; everything after the text is centered under its heading. */
.lib-table th, .lib-table td { padding: 5px 5px; }
.lib-table th:nth-child(n+2), .lib-table td:nth-child(n+2) { text-align: center; }
.lib-table th:nth-child(n+2) .sort-btn { justify-content: center; }
.lib-table th .sort-btn { font-size: 11px; letter-spacing: .2px; }
.lib-table td.lib-text { overflow-wrap: break-word; }
.lib-table td.lib-text .clamp3 { margin-top: 3px; }
.lib-table td:nth-child(4) { font-size: 12.5px; overflow-wrap: break-word; }
.lib-table .lib-results { line-height: 1.5; }
.lib-table .tag.creator { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Products: one tidy line or two per product; long names show 2 lines (hover for the rest). */
.prod-table td { padding-top: 4px; padding-bottom: 4px; }
.prod-table td:nth-child(1) { width: 12%; font-size: 13px; }
.prod-table td.name { width: 30%; }
.prod-table td:nth-child(3), .prod-table td:nth-child(4) { min-width: 118px; }
.prod-table td:nth-child(n+3):nth-child(-n+6) { font-size: 12.5px; color: var(--muted); }
.prod-table .toggle { padding: 1px 7px; font-size: 12px; min-width: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Filter rows: smaller boxes so they fit on one or two lines */
.filters select, .filters input { font-size: 13px; padding: 5px 8px; }

/* Overlays and hooks: which kind each line is */
.tag.kind-hook { background: var(--accent-soft); color: var(--accent); }
.tag.kind-overlay { background: rgba(20, 150, 160, .14); color: #12808a; }
.lib-pair { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: start; }
.lib-pair label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Products: fixed column shares so the table always fits the window. */
.prod-table { table-layout: fixed; }
.prod-table th:nth-child(1) { width: 12%; } .prod-table th:nth-child(2) { width: 27%; } .prod-table th:nth-child(3) { width: 13%; }
.prod-table th:nth-child(4) { width: 13%; } .prod-table th:nth-child(5) { width: 10%; } .prod-table th:nth-child(6) { width: 11%; }
.prod-table th:nth-child(7) { width: 7%; } .prod-table th:nth-child(8) { width: 7%; }
.prod-table td { overflow-wrap: break-word; }
.prod-table td:nth-child(3), .prod-table td:nth-child(4) { min-width: 0; }
/* These tables always fit, so their box never needs a sideways scroll bar (not even for a rounding pixel). */
.table-wrap:has(> .prod-table), .table-wrap:has(> .lib-table) { overflow-x: hidden; }

/* Close button pinned to the top-right corner of every pop-up, so it's there however far you scroll. */
.dialog-x { position: sticky; top: -12px; float: right; z-index: 5; margin: -12px -12px 0 8px; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; font-size: 22px; line-height: 1; background: var(--panel); border: 1px solid var(--line); color: var(--muted); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.dialog-x:hover { color: var(--ink); background: var(--accent-soft); }
.table-wrap.fits { overflow-x: hidden; }

/* Time as hour : minutes AM/PM dropdowns */
.time-pick { display: inline-flex; align-items: center; gap: 4px; }
.time-pick select { width: auto; padding: 5px 6px; }
.time-colon { font-weight: 600; color: var(--muted); }
.date-time { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Product form: bundle contents, one row per product with its qty/size */
.bundle-head { font-size: 13px; color: var(--muted); margin-top: 4px; }
.bundle-row { display: grid; grid-template-columns: 22px minmax(0, 2fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.bundle-n { font-size: 12px; color: var(--muted); text-align: right; }

/* Checklist */
.ck h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-list { display: flex; flex-direction: column; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--line); }
.ck-row:first-child { border-top: none; }
.ck-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.ck-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ck-actions select { padding: 5px 7px; font-size: 13px; }
.ck-done { opacity: .5; }
button.link-like { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; }
button.link-like:hover { text-decoration: underline; }

.ck-more { flex: 1 1 100%; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ck-more textarea { font-size: 13px; padding: 6px 8px; min-height: 0; }
@media (max-width: 760px) { .ck-more { grid-template-columns: 1fr; } }

/* Overlays and hooks: watch the video */
.lib-table .watch { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.lib-table .watch:hover { text-decoration: underline; }

/* Overlays and hooks: a hook and its overlay edited together */
/* Full-width blocks inside a form grid (not just labels). */
.form-grid > .full { grid-column: 1 / -1; }
.lib-pair-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lib-pair-edit textarea { width: 100%; }
.lib-pair-meta select { width: 100%; min-width: 0; }
.lib-pair-edit fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 10px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lib-pair-edit legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.lib-pair-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lib-pair-meta label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.lib-partner { display: block; font-size: 12px; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 760px) { .lib-pair-edit, .lib-pair-meta { grid-template-columns: 1fr; } }

/* How long videos sell: each video's sales */
.life-head { margin-top: 18px; gap: 8px; }
.life-head .seg { margin-left: auto; }
.life-head select, .life-head input[type=date] { width: auto; padding: 4px 8px; font-size: 13px; }
.life-table tbody tr.life-row { cursor: pointer; }
.life-table tbody tr.life-row:hover, .life-table tbody tr.life-row.open { background: var(--accent-soft); }
.life-video { max-width: 340px; }
.life-video .link-btn { margin: 0 6px 0 0; text-decoration: none; white-space: nowrap; }
.life-prods { font-size: 13px; }
.spark { display: block; }
.life-detail td { background: var(--panel); padding: 12px 10px 16px; }
.life-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px; margin-bottom: 6px; }
.btn-link { display: inline-block; padding: 6px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }

.report-table td.tag-cell { white-space: normal; }
.report-table td.tag-cell .tag { display: inline-block; margin: 1px 0; }

.report-dates { gap: 8px; margin: 4px 0 10px; }
.report-dates select, .report-dates input[type=date] { width: auto; padding: 4px 8px; font-size: 13px; }
.report-table td.num { white-space: nowrap; }

/* Prompt library */
.prompt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.prompt-card h3 { margin: 0 0 6px; }
.prompt-body { white-space: pre-wrap; margin: 6px 0; }
mark.blank { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.prompt-panel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.prompt-blanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.form-grid .prompt-panel label.prompt-check { flex-direction: row; align-items: center; gap: 6px; font-weight: normal; }
.prompt-check input { width: auto; margin: 0; }
.prompt-results { margin: 8px 0 4px; padding-left: 22px; }
.prompt-results li { margin: 6px 0; }
.prompt-acts { white-space: nowrap; }
.prompt-acts .link-btn { margin-left: 6px; }

.tag.kind-cta { background: #e8f6ee; color: #1d7a45; }
.tag.kind-education { background: #f3ecfb; color: #6b3fa0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.kind-cta { background: #173526; color: #7fd6a3; } :root:not([data-theme="light"]) .tag.kind-education { background: #2c2140; color: #c6a6ef; } }

/* Winners */
.win-section { margin-bottom: 14px; }
.win-section h2 { margin: 0; }
.stars { color: #e3a008; letter-spacing: 1px; margin-right: 6px; white-space: nowrap; }
.stars-off { color: var(--line); }
.win-text .product-link { display: block; text-align: left; font-weight: 600; }
.win-text .muted { display: block; }
.win-table td { vertical-align: top; }
.win-key { line-height: 1.9; }
.win-table .watch { white-space: nowrap; }

/* Fill in from the web */
.research-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.research-bar select { width: auto; padding: 4px 8px; }
.research-log { max-height: 260px; overflow-y: auto; font-size: 13px; padding: 6px 12px; margin-bottom: 10px; border-left: 3px solid var(--accent); }
.research-log > div { padding: 3px 0; }
#factsSource pre { white-space: pre-wrap; font-size: 12px; margin: 4px 0 0; }

.report-table .pick { width: 28px; text-align: center; }
.report-table .pick input { width: 16px; height: 16px; margin: 0; }

/* Calendar post: write your own script, video details */
.post-script { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; margin: 2px 0 6px; }
.post-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; margin-top: 8px; }
.post-video .full { grid-column: 1 / -1; }
.post-video > label { min-width: 0; }
.post-video input, .post-video select { width: 100%; min-width: 0; box-sizing: border-box; }
.post-script input, .post-script textarea { width: 100%; box-sizing: border-box; }

/* Product type-to-find list */
.pick-list { position: absolute; z-index: 50; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 50, 90, .18); font-size: 14px; }
.pick-item { padding: 7px 10px; cursor: pointer; }
.pick-item:hover, .pick-item.on { background: var(--accent-soft); }
.pick-empty { padding: 8px 10px; font-size: 13px; }
.seg-wide { display: flex; margin: 0 0 12px; }
.seg-wide button { flex: 1; padding: 8px 12px; font-size: 14px; }
[hidden] { display: none !important; }

.post-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.post-row > label { min-width: 0; }
.post-row select { width: 100%; min-width: 0; }
.post-video .platform-pick { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.post-video .platform-pick .check { display: inline-flex; gap: 5px; align-items: center; font-weight: normal; }
.post-video .platform-pick input { width: auto; }

.report-opt { margin: 6px 0 8px; max-width: 560px; }
.report-table button.product-link[data-report-day] { text-decoration: underline; text-underline-offset: 3px; }

/* Videos posted: month view */
.vsummary { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 10px 14px; margin: 4px 0 12px; border-radius: 10px; background: var(--accent-soft); }
.vsummary > div { display: flex; flex-direction: column; }
.vsum-n { font-size: 22px; font-weight: 700; line-height: 1.2; }
.vsum-best { margin-left: auto; }
.vday { margin: 18px 0 6px; font-size: 15px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.vcard { display: grid; grid-template-columns: 70px minmax(0, 1fr) 110px 130px; gap: 6px 14px; align-items: start; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.vcard.sold { background: linear-gradient(90deg, rgba(42, 160, 90, .07), transparent 60%); }
.vcard-time { font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 2px; }
.vcard-product { font-weight: 600; }
.vcard-product .product-link { font-weight: 600; text-align: left; }
.vcard-words { font-size: 13px; margin-top: 2px; }
.vcard-overlay { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 2px; }
.vcard-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vchip { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--chip, rgba(31, 111, 197, .09)); color: var(--ink); white-space: nowrap; }
.vcard-money { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.vcard-money strong { font-size: 16px; }
.vcard-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.btn-small { font-size: 12.5px; padding: 3px 10px; border-radius: 6px; text-decoration: none; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); cursor: pointer; }
.btn-small.secondary { background: transparent; color: var(--accent); }
@media (max-width: 640px) {
  .vcard { grid-template-columns: 56px minmax(0, 1fr); }
  .vcard-money, .vcard-acts { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
}

/* Reports: headers and their numbers line up (centered); text columns stay left */
.report-table th.num, .report-table td.num { text-align: center; }
.report-table th.num .sort-btn { justify-content: center; }
.report-table th:not(.num), .report-table td:not(.num) { text-align: left; }
.report-table tr.row-open { cursor: pointer; }
.report-table tr.row-open:hover td { background: var(--accent-soft); }
.open-pill { all: unset; cursor: pointer; display: inline-block; min-width: 34px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.open-pill:hover, .open-pill:focus-visible { background: var(--accent); color: var(--accent-ink); }

/* Reports, final: numbers right-aligned under right-aligned headings so the digits line up */
.report-table th.num, .report-table td.num { text-align: right; padding-right: 14px; }
.report-table th.num .sort-btn { justify-content: flex-end; flex-direction: row-reverse; }
.report-table td.num { font-variant-numeric: tabular-nums; }

.vother { margin: 6px 0 4px 76px; font-size: 13px; }
.vother summary { cursor: pointer; color: var(--accent); padding: 4px 0; }
.vother table { width: 100%; margin-top: 4px; }
@media (max-width: 640px) { .vother { margin-left: 0; } }

/* Reports, final: headings and values centered on the same line. The sort arrow hangs to the right of the heading
   without taking up space, so the heading text sits exactly over its column. */
.report-table th.num, .report-table td.num { text-align: center; padding-left: 10px; padding-right: 10px; }
.report-table th .sort-btn { position: relative; flex-direction: row; justify-content: center; }
.report-table th:not(.num) .sort-btn { justify-content: flex-start; }
.report-table th .sort-arrow { position: absolute; left: 100%; margin-left: 3px; }
.report-table th { padding-right: 18px; }
.report-table th.num { padding-left: 18px; }
.report-table th.num, .report-table td.num { padding-left: 14px; padding-right: 14px; }

.ms-table tr.ms-bare td { background: rgba(31, 111, 197, .03); }
.ms-table tr.ms-bare .watch { margin-left: 6px; }

/* Products table: words left under left headings, numbers centered under their headings */
.prod-table th, .prod-table td { text-align: left; vertical-align: middle; }
.prod-table th.num, .prod-table td.num, .prod-table th.center, .prod-table td.center { text-align: center; }
.prod-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Columns: Brand, Product, Vertical, Sub-vertical, Product type, On hand, Comm. %, Sales */
.prod-table th:nth-child(1) { width: 12%; } .prod-table th:nth-child(2) { width: 28%; } .prod-table th:nth-child(3) { width: 13%; }
.prod-table th:nth-child(4) { width: 13%; } .prod-table th:nth-child(5) { width: 11%; } .prod-table th:nth-child(6) { width: 7%; }
.prod-table th:nth-child(7) { width: 7%; } .prod-table th:nth-child(8) { width: 9%; }
.prod-table td:nth-child(6) { font-size: inherit; color: inherit; }

/* Products: multi-level sort */
.psort-bar { gap: 6px 16px; margin-top: -4px; }
.psort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.psort select { width: auto; padding: 3px 6px; font-size: 13px; }
.psort .chip { padding: 2px 8px; font-size: 12px; }
.prod-table .sort-arrow.on { color: var(--accent); opacity: 1; font-size: 11px; }
.prod-table th.center .sort-btn, .prod-table th.num .sort-btn { justify-content: center; }

.viral-edit { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }

/* Calendar as a list (and printing it) */
.plan-list-day { margin: 14px 0 6px; }
.plan-list-day h3 { margin: 0 0 6px; font-size: 15px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.plan-list-table { width: 100%; }
.plan-list-table td, .plan-list-table th { text-align: left; }
.plan-list-row { cursor: pointer; }
.plan-list-row:hover td { background: var(--accent-soft); }
.print-only { display: none; }
@media print {
  .sidebar, #updateBar, .page-head, .plan-nav button, .plan-nav .seg, .cal-toolbar.small, #planNav .spacer, .notice, .muted.small:not(.plan-list-day .small), dialog { display: none !important; }
  body, main, #main { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; }
  .print-only { display: block; margin: 0 0 8px; }
  .plan-list-table th, .plan-list-table td { border-bottom: 1px solid #ccc; padding: 4px 6px; font-size: 11pt; color: #000; background: #fff !important; }
  .plan-list-day { break-inside: avoid; }
  .tag { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  .plan-list .muted { color: #444 !important; }
}
.plan-list-script { max-width: 340px; font-size: 13px; }
/* Same column widths every day, so the list reads straight down */
.plan-list-table { table-layout: fixed; width: 100%; }
.plan-list-table th:nth-child(1) { width: 9%; } .plan-list-table th:nth-child(2) { width: 33%; } .plan-list-table th:nth-child(3) { width: 9%; }
.plan-list-table th:nth-child(4) { width: 25%; } .plan-list-table th:nth-child(5) { width: 15%; } .plan-list-table th:nth-child(6) { width: 9%; }
.plan-list-table td { overflow-wrap: anywhere; }
.plan-list-table td.nowrap { white-space: normal; }
.plan-list-script { max-width: none; }

/* List columns: Time, Product, Video, Qty, Sales, Commission */
.plan-list-table th:nth-child(1) { width: 10%; } .plan-list-table th:nth-child(2) { width: 42%; } .plan-list-table th:nth-child(3) { width: 18%; }
.plan-list-table th:nth-child(4) { width: 8%; } .plan-list-table th:nth-child(5) { width: 11%; } .plan-list-table th:nth-child(6) { width: 11%; }
.plan-list-table th.num, .plan-list-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.plan-list-total td { font-weight: 700; border-top: 2px solid var(--line); }
.plan-list-grand { margin-top: 14px; }
.plan-list-grand thead { visibility: collapse; }
.plan-list-total.grand td { font-size: 15px; background: var(--accent-soft); }
@media print { .plan-list-total.grand td { background: #fff !important; } .plan-list > p.muted { display: block !important; color: #444 !important; } }

/* Today */
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.today-card h2 { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; margin: 0 0 8px; }
.today-card h2 a { font-weight: normal; }
.today-card.warn { border-left: 4px solid #d97706; }
.today-nums { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.today-nums > div { display: flex; flex-direction: column; }
.today-n { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.today-n.good { color: #1d7a45; } .today-n.bad { color: #b42318; }
.today-stat { margin: 10px 0 0; }
.today-list { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; }
.today-list li { margin: 4px 0; }
.today-plan td { padding: 3px 8px 3px 0; }
.money-nums { padding: 12px 16px; margin-bottom: 12px; }
.mini-bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--accent); }

/* Calendar list with views: Time, Product, Video, Views, Qty, Sales, Commission, Conv. % */
.plan-list-table th:nth-child(1) { width: 9%; } .plan-list-table th:nth-child(2) { width: 33%; } .plan-list-table th:nth-child(3) { width: 14%; }
.plan-list-table th:nth-child(4) { width: 8%; } .plan-list-table th:nth-child(5) { width: 6%; } .plan-list-table th:nth-child(6) { width: 10%; }
.plan-list-table th:nth-child(7) { width: 11%; } .plan-list-table th:nth-child(8) { width: 9%; }
.plan-day-views { font-weight: normal; margin-left: 4px; }

/* One video's sales history popup */
#videoDialog { width: min(860px, 94vw); }
.vs-title { margin: 0 32px 4px 0; }
.vs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); margin: 0 0 14px; }
.vs-meta .btn-link { margin-left: auto; }
.vs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.vs-tiles > div { display: flex; flex-direction: column; gap: 2px; background: var(--bg); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.vs-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#videoDialog .legend { margin: 0 0 6px; }
.earn-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.earn-link:hover { color: var(--accent); }
.vs-prods summary { cursor: pointer; }
@media print { .plan-list-table a.watch { display: none; } }
.ms-table th { white-space: nowrap; }
.ms-table .watch, .ms-table .link-btn { white-space: nowrap; }
.ai-guide { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.ai-guide li { line-height: 1.5; }
.ai-guide .tag { margin-right: 4px; }

/* AI credits box on Products > To fill in */
.credits-row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.credits-row > div:first-child { display: flex; flex-direction: column; min-width: 150px; }
.credits-n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.credits-n.bad { color: var(--danger); }
.credits-note { flex: 1 1 320px; min-width: 0; }
.credits-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.credits-set { display: inline-flex; gap: 6px; }
.credits-set input { width: 110px; }

/* Checklist: TikTok Shop monthly numbers */
.ttm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 10px; align-items: end; margin: 8px 0 12px; }
.ttm-form label { display: flex; flex-direction: column; font-size: 13px; gap: 3px; }

/* Script checker: your script on the left, the compliant version on the right */
.ck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ck-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ck-col h2 { margin: 0; }
.ck-col textarea { width: 100%; font-size: 15px; line-height: 1.5; }
.ck-col label { display: flex; flex-direction: column; gap: 4px; }
.ck-line { margin: 6px 0; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
.ck-problem { border-left: 3px solid var(--danger); padding: 4px 10px; margin: 8px 0; }
.ck-problem p { margin: 2px 0; }
.ck-quote { font-style: italic; }
@media (max-width: 860px) { .ck-grid { grid-template-columns: minmax(0, 1fr); } }