:root{
    --bg:#ffffff; --side:#f7f7f8; --ink:#0f1419; --muted:#6b7280; --faint:#9aa3ad; --line:#e7e9ee;
    --accent:#1d9bf0; --accentink:#0b7fd1;
    --A:#1d9bf0; --Abg:#eaf5fe; --B:#7c5cff; --Bbg:#f0edff; --C:#e08a00; --Cbg:#fff5e6;
    --pink:#e6469b;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{background:var(--bg);color:var(--ink);
    font:15px/1.55 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
  a{color:var(--accentink)}
  .app{display:flex;height:100vh;overflow:hidden}

  /* SIDEBAR */
  .sidebar{width:220px;flex:none;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh}
  .side-top{padding:18px 14px 12px}
  /* The wordmark gets its own band: a hairline under it, and real air before the
     first control. Everything below is one rhythm — 10px between groups. */
  .brandrow{display:flex;align-items:center;gap:11px;padding:0 2px 15px;margin-bottom:15px;
            border-bottom:1px solid rgba(23,20,50,.07)}
  .logo{width:32px;height:32px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--pink),#b23df0);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}
  .brandrow .t{font-weight:800;font-size:14.5px;letter-spacing:-.015em;line-height:1.2}
  .brandrow .s{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.12em;font-weight:700;line-height:1.4}
  /* equal cells whatever the label — "X" and "Instagram" get the same box */
  .pswitch{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:3px;
           background:#eceef1;border-radius:10px;padding:3px;margin-top:6px}
  .pbtn{border:0;background:transparent;border-radius:8px;padding:7px 4px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;
        min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .pbtn:hover:not(.on){color:var(--ink)}
  .pbtn.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

  /* Top-level sections: Content / Paid / Media */
  /* ONE SECTION PER ROW. Two to a row made a grid you had to read in both directions
     to find where you are. */
  /* ONE LIST, ONE LANGUAGE. Sections used to sit in a grey segmented-control box
     while their children floated in a separate list below — two competing systems
     stacked on each other, which is most of why this read as dated. Sections are
     now plain rows that own the rows beneath them. */
  .sectabs{display:flex;flex-direction:column;gap:1px;margin:0;background:transparent;border-radius:0;padding:0}
  .sectab{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:7px;
    padding:7px 9px;font:inherit;font-size:13.5px;font-weight:500;color:#5b6472;cursor:pointer;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:left;
    transition:background .1s ease,color .1s ease}
  .sectab:hover:not(.active){color:var(--ink)}
  .sectab:hover{background:rgba(23,20,50,.045);color:var(--ink)}
  /* WHERE AM I. The active section was bold-but-grey, which reads as emphasis rather
     than as position — the same weight the app uses for plain headings. Colour it. */
  /* THE SECTION GOES PURPLE, THE ROW CARRIES THE PILL. Two filled pills stacked read
     as two selections, so the heading takes the colour and the weight only. */
  .sectab.active{background:transparent;color:var(--accentink);font-weight:700}
  .sectab.active .nic{color:var(--accentink);opacity:1}
  .sectab .fic{width:16px;height:16px;flex:none;opacity:.6}
  .sectab.active .fic{opacity:1;color:var(--accent)}
  .navlist{padding:2px 0 4px;display:flex;flex-direction:column;gap:1px}
  /* children of the open section: indented under it, one notch quieter */
  .navitem{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:7px;
    padding:6px 9px 6px 30px;font:inherit;font-size:13px;color:#5b6472;cursor:pointer;text-align:left;
    transition:background .1s ease,color .1s ease}
  .navitem:hover{background:#eceef1}
  .navitem:hover{background:rgba(23,20,50,.045);color:var(--ink)}
  .navitem.active{background:rgba(109,92,255,.10);color:var(--accentink);font-weight:600}
  .navitem .fic{width:15px;height:15px;flex:none;opacity:.55}
  .navitem.active .fic{opacity:1}
  .navitem .ic{width:18px;text-align:center}
  /* Recent chats history */
  .side-bottom{border-top:1px solid var(--line);padding:10px}
  .setbtn{width:100%;border:0;background:transparent;border-radius:10px;padding:9px 10px;font:inherit;cursor:pointer;display:flex;align-items:center;gap:9px;color:var(--muted)}
  .setbtn:hover{background:#eceef1;color:var(--ink)}
  .kdot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;flex:none}
  .kdot.on{background:#22c55e}

  /* MAIN */
  .main{flex:1;display:flex;flex-direction:column;height:100vh;position:relative;min-width:0}
  .scrollarea{flex:1;overflow-y:auto}
  .wrap{max-width:820px;margin:0 auto;padding:28px 22px 150px}
  /* with the Social Network bar sitting above it, the page title does not need the
     full top gap as well */
  .pswitch:not([hidden])~.wrap{padding-top:8px}
  /* Remixed-from source block */
  /* per-chat on/off panel — layers over saved settings, resets on New chat */
  .fchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;cursor:pointer;
    font-size:11.5px;color:#334;font:inherit;font-size:11.5px;transition:.12s;max-width:280px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}

  /* The actions used to be position:absolute on top of this row, so a long subtopic
     ran straight underneath them. They're in the flow now — nothing can overlap. */
  /* Editable in place. It has to LOOK editable or nobody will try. */
  .body{white-space:pre-wrap;font-size:16px;line-height:1.6;font-weight:480;
        border:1px solid transparent;border-radius:9px;margin:0 -8px;padding:6px 8px;transition:.12s}
  .body[contenteditable]{cursor:text}
  .body[contenteditable]:hover{border-color:var(--line);background:#fcfcfd}
  .body[contenteditable]:focus{outline:0;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.10)}
  .tbtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--muted)}
  .tbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}   /* a toggle that's on should look on */
  .tbtn:hover{color:var(--ink);border-color:#cfd6df}
  @keyframes blink{50%{opacity:0}}
  .think{display:inline-flex;gap:5px;align-items:center;color:var(--muted);font-size:13.5px}
  .think .b{width:6px;height:6px;border-radius:50%;background:#c7d0da;animation:bl 1s infinite}
  .think .b:nth-child(2){animation-delay:.15s}.think .b:nth-child(3){animation-delay:.3s}
  @keyframes bl{0%,80%,100%{opacity:.3}40%{opacity:1}}
  .err{color:#c0392b;font-size:13.5px;background:#fdecea;border:1px solid #f6c9c4;border-radius:10px;padding:10px 12px}

  /* ANALYTICS */
  .an-wrap{padding:30px 0 60px}
  .an-wrap h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
  .an-sub{color:var(--muted);margin:0 0 22px;max-width:640px}
  .drop{border:2px dashed #d6dbe2;border-radius:16px;padding:40px 24px;text-align:center;background:#fcfcfd;transition:.15s}
  .drop.over{border-color:var(--accent);background:var(--Abg)}
  .drop .big{font-size:16px;font-weight:600;margin-bottom:8px}
  .linkbtn{border:0;background:transparent;color:var(--accentink);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
  .steps{margin-top:18px;font-size:12.5px;color:var(--faint);line-height:1.7}
  .rangebar{display:flex;gap:6px;align-items:center;margin:2px 0 14px;flex-wrap:wrap}
  .rbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .anrange-dates{display:inline-flex;align-items:center;gap:7px;margin-left:4px}
  .anrange-dates input[type=date]{border:1px solid var(--line);border-radius:9px;padding:4px 9px;
    font:inherit;font-size:12.5px;color:var(--ink);background:#fff}
  .anrange-dates input[type=date]:focus{outline:none;border-color:var(--accent)}
  .anrange-dates[hidden]{display:none}
  .mcard .n{font-size:24px;font-weight:800}
  .mcard .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
  .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px}
  .card h3{margin:0 0 12px;font-size:15px}
  .atable th.num,.atable td.num{text-align:right}
  .best-post .top{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
  .best-post .txt{font-size:14.5px;line-height:1.5}
  .rec{border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:12px;padding:11px 14px;margin-bottom:9px;background:#fff}
  .rec.up{border-left-color:#12864e;background:#f4fbf7}
  .rec.down{border-left-color:#c0392b;background:#fdf5f4}
  .learned{background:#f7f8fa;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;font-family:inherit;color:#334;margin:0}
  /* This week */
  /* Schedule board */
  .sch-fill.done{background:#12864e}
  /* One row of day-columns. Never wraps — a week that breaks onto a second line
     isn't a week, and Sunday landing under Monday reads as a different day. */
  .sch-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;align-items:start}
  .sch-day{min-width:0;display:flex;flex-direction:column}
  .sch-dh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:0 2px 7px;display:flex;justify-content:space-between;align-items:baseline;gap:4px}
  .sch-dh .dnum{color:var(--ink);font-size:13px}
  .sch-dh .drat{font-weight:700;font-size:10px}
  /* Fixed height, so slot 3 on Tuesday sits level with slot 3 on Friday. Variable
     card heights make every column drift and the whole grid stops being readable. */
  /* EVERY CARD THE SAME SIZE. A long post used to stretch its own card, so the
     columns stopped lining up; the text is clamped instead and the full post is one
     click away. */
  .slot{border:1px solid var(--line);border-radius:11px;background:#fff;padding:8px;margin-bottom:7px;height:190px;display:flex;flex-direction:column;gap:4px;cursor:grab;overflow:hidden;transition:border-color .12s,box-shadow .12s}
  .slot:hover{border-color:#cfd5dd}
  .slot.empty{background:#fbfcfd;border-style:dashed}
  .slot.drag{opacity:.4}
  .slot.over{border-color:var(--accent);box-shadow:0 0 0 2px rgba(99,102,241,.18)}
  .slot .s-time{font-size:10.5px;color:var(--faint);font-weight:600;letter-spacing:.02em}
  .slot .s-fmt{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;align-self:flex-start;line-height:1.4;white-space:nowrap}
  /* TWO ROWS OF CHIPS, EVERY LABEL WHOLE. One nowrap row shrank each chip to fit
     and ellipsised all of them; the height is fixed at exactly two rows so cards
     still line up across a day column. */
  .slot .s-chips{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-start;align-content:flex-start;
    overflow:hidden;flex:none;height:37px}
  .slot .s-chips .s-fmt{align-self:auto;flex:0 0 auto;max-width:none}
  .slot .s-topic{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* A WHOLE NUMBER OF LINES, ALWAYS. The text box is exactly 3 × line-height tall,
     so the card can never clip a line through the middle — it ends on a line break
     or on the clamp's ellipsis. Cards are 25% taller than they were, and ALL of the
     extra height went to the text: 3 lines → 5 (4 on the shorter past cards). */
  .slot .s-text{font-size:11.5px;line-height:16px;height:80px;flex:none;color:var(--ink);white-space:pre-wrap;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;word-break:break-word}
  .slot .s-hint{font-size:11px;color:#c3c8d0;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;font-weight:600}
  .slot.empty{cursor:default}
  .slot.empty:hover{border-color:var(--line)}   /* nothing happens on click — don't advertise one */
  .slot.unused{background:#fcfcfd}
  .slot.past{height:174px}
  .slot.past .s-text{height:64px;-webkit-line-clamp:4}
  .slot .s-x{align-self:flex-end;border:0;background:transparent;color:var(--faint);font-size:13px;line-height:1;cursor:pointer;padding:1px 3px;border-radius:5px;opacity:0}
  .slot:hover .s-x{opacity:1}
  .slot .s-x:hover{color:#c0392b;background:#fbe9e7}
  .sch-empty{border:1px dashed var(--line);border-radius:14px;padding:30px;text-align:center;color:var(--muted)}
  .bc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
  .bc-tot{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}
  .bc-chip{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:normal}
  /* a tag you didn't use is still shown — just quiet enough to read past */
  .bc-chip.bc-zero{background:#f4f5f7;color:#b6bcc5}
  /* CHIPS ARE CONTROLS NOW — they have to look pressable, and the pressed one has
     to be obvious without changing its own colour (the colour IS the type). */
  button.bc-chip{border:0;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:box-shadow .12s,transform .08s}
  button.bc-chip:hover{box-shadow:0 0 0 2px rgba(23,20,50,.14)}
  button.bc-chip:active{transform:translateY(.5px)}
  button.bc-chip.bc-on{box-shadow:0 0 0 2px var(--ink);font-weight:800}
  /* the chips a highlighted post came from — the answer to "and what were they?" */
  button.bc-chip.bc-hl-top{background:#dcfce7 !important;color:#065f46 !important;box-shadow:0 0 0 2px #00a862;font-weight:800}
  button.bc-chip.bc-hl-bot{background:#ffe4e6 !important;color:#9f1239 !important;box-shadow:0 0 0 2px #e11d48;font-weight:800}
  button.bc-chip.bc-hl-both{background:linear-gradient(100deg,#dcfce7 50%,#ffe4e6 50%) !important;color:#3f3f46 !important;
    box-shadow:0 0 0 2px #7c5cff;font-weight:800}
  /* the selected slice's numbers, sitting under the chips that opened them */
  .cs-band{border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:12px;
    background:#fbfbfd;padding:11px 13px 12px;margin:0 0 12px}
  .cs-hd{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:9px}
  .cs-hd b{font-size:14px}
  .cs-x{margin-left:auto;font-size:11.5px;padding:3px 9px}
  .cs-band .mini-post{margin-bottom:0}
  /* PERFORMANCE — ranked bars. One grid so the four columns line up down the whole
     chart; the bar is volume, the last column is the number you act on. */
  .pf-card{padding:16px 18px;margin-bottom:14px}
  .pf-head,.pf-row{display:grid;grid-template-columns:minmax(120px,1.15fr) 3fr 48px 68px;gap:10px;align-items:center}
  .pf-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:6px 0 4px;border-bottom:1px solid var(--line);margin-bottom:2px}
  .pf-head div:nth-child(2){padding-left:2px}
  .pf-head div:nth-child(3),.pf-head div:nth-child(4){text-align:right}
  .pf-row{padding:5px 0;border-bottom:1px solid #f4f5f7}
  .pf-row:last-child{border-bottom:0}
  .pf-name{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pf-track{position:relative;height:20px;background:#f4f5f7;border-radius:6px;overflow:hidden;display:flex;align-items:center}
  .pf-fill{height:100%;border-radius:6px;min-width:3px;transition:width .3s cubic-bezier(.21,.9,.35,1)}
  .pf-val{position:absolute;right:8px;font-size:11px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:0 0 3px #fff,0 0 3px #fff}
  .pf-n{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
  .pf-rel{font-size:13.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
  /* WHAT CHANGED — one row, reads left to right, colour carries the direction */
  .wc-wrap{margin:0 0 12px}
  .wc-sum{display:inline-flex;align-items:center;gap:7px;background:#f7f8fa;border:1px solid var(--line);
    border-radius:99px;padding:4px 12px 4px 9px;font:inherit;cursor:pointer;transition:box-shadow .12s}
  .wc-sum:hover{box-shadow:0 0 0 2px rgba(23,20,50,.10)}
  .wc-sum.on{background:#fff;box-shadow:0 0 0 2px var(--ink)}
  .wc-caret{font-size:10px;color:var(--faint);width:9px}
  .wc-count{background:#eef2ff;color:#4f46e5}
  .wc-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px}
  .wc-lbl{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}
  .wc{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .wc b{font-weight:800}
  .wc-up{background:#e6f6ef;color:#0e7d57}
  .wc-dn{background:#fdeaea;color:#c0392b}
  .wc-new{background:#eef2ff;color:#4f46e5}
  .wc-out{background:#f2f3f7;color:#6b7280}
  .wc-flat{background:#f4f5f7;color:#9aa1ab;font-weight:600}
  .wc-rec{background:#fde68a;color:#92400e;font-weight:800}
  .bc-chip b{font-weight:800}
  .bc-chip.topic{background:#f0f1f4;color:#3a3f4a}
  .sec-hd{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;flex-wrap:wrap}
  .sec-hd h3{margin:0;font-size:18px;letter-spacing:-.015em}
  .slot.past{cursor:default;background:#fafbfc;border-style:solid;opacity:.92}
  .slot.past:hover{border-color:var(--line)}
  .slot.past.openable{cursor:pointer}
  .slot.past.openable:hover{border-color:#cfd5dd;box-shadow:0 1px 6px rgba(15,23,42,.07)}
  .slot.past.upcoming{background:#fff;border-style:dashed;opacity:1}
  .slot .s-impr{float:right;color:var(--muted);font-weight:700}
  /* subscribers the post's CTA brought, on the same line as its views */
  .slot .s-subs{float:right;margin-left:6px;font-weight:800;color:#0e7d57;letter-spacing:0}
  .slot .s-subs.none{color:#b6bcc5;font-weight:700}
  /* suggestions */
  .sug-none{border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin-bottom:20px;font-size:13px;color:var(--muted);background:#fafbfc}
  /* like / dislike */
  .card-actions .dislike.on{filter:none;opacity:1}
  .v-h.up{color:#12864e;margin-top:4px}
  .v-h.down{color:#c0392b}
  .drawer-bg.show{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);background:#fff;z-index:45;
          box-shadow:-14px 0 44px rgba(15,23,42,.14);display:flex;flex-direction:column;
          transform:translateX(102%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
  .drawer.show{transform:translateX(0)}
  .dr-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
  /* guided formats — the ones AI can't fake */
  #slotWrite.guided{background:#6d3fd4;color:#fff;border-color:#6d3fd4}
  .g-msg.ai{background:#f2f3f7;color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px}
  .g-msg.user{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
  .g-msg.typing{min-width:52px}
  /* audit */
  .aud-sev{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px}
  .aud-sev.high{background:#fdecea;color:#c0392b}
  .aud-sev.medium{background:#fdf3e3;color:#a86a12}
  .aud-sev.low{background:#f0f1f4;color:var(--muted)}
  .aud-reason.time{border-left-color:#c9d3e0}
  /* Slot detail modal — what kind of post is this */
  #slotMeta{margin:2px 0 12px}
  .sm-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
  .sm-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    padding:4px 10px;border-radius:99px;background:#f2f3f5;color:var(--muted)}
  .sm-chip.strong{background:var(--ink);color:#fff}
  .sm-code{font-size:10.5px;font-weight:700;opacity:.7;background:rgba(255,255,255,.22);padding:1px 6px;border-radius:99px}
  .sm-desc{font-size:12.5px;color:#556;line-height:1.5;margin:9px 0 0;padding:9px 11px;
    background:#fafbfc;border:1px solid var(--line);border-radius:9px}
  .sm-risk{margin:0 0 11px;padding:10px 12px;border-radius:10px;border:1px solid #f0c7c2;background:#fdf5f4}
  .sm-risk.medium{border-color:#f0d6b0;background:#fffbf3}
  .sm-risk.low{border-color:#dfe0e4;background:#fafbfc}
  .sm-risk-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
  .sm-risk-h .muted{font-size:11.5px}
  .sm-risk-r{font-size:13px;color:#43301f;line-height:1.5}
  .sm-win{margin:0 0 11px;padding:10px 12px;border-radius:10px;border:1px solid #a6e3c2;background:#f2fbf6}
  .sm-winbadge{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0e7d57;background:#dcf5e9;padding:2px 6px;border-radius:5px}
  .sm-win-r{font-size:13px;color:#14532d;line-height:1.5}
  .slot.risk-high{border-color:#e8b4ad;background:#fefaf9}
  .slot.risk-medium{border-color:#f0d6b0;background:#fffdf9}
  .slot.risk-low{border-color:#dfe0e4;background:#fbfbfc}
  .slot.win{border-color:#a6e3c2;background:#f2fbf6}
  /* HIGHLIGHTED POSTS SHOUT. A pale tint was invisible on a board of 20 white cards —
     these are bright, thick-bordered and ringed so you spot them without reading. */
  /* THE BADGE IS AN EXTRA ROW, SO IT NEEDS EXTRA CARD. Without this it ate the line
     below it and got sliced through the middle by the card's own overflow clip. */
  /* a chip-selected post: the same loudness, in a colour that can't be mistaken for
     top (green) or bottom (red) */
  .slot.hl-sel{height:190px;border:2px solid #4f46e5;background:#eef2ff;box-shadow:0 0 0 3px rgba(79,70,229,.20)}
  .slot.past.hl-sel{height:174px}
  .slot.hl-sel:hover{border-color:#4f46e5}
  .slot.hl-top,.slot.hl-bot{height:214px}
  .slot.past.hl-top,.slot.past.hl-bot{height:202px}
  .slot.hl-top{border:2px solid #00a862;background:#dcfce7;box-shadow:0 0 0 3px rgba(0,168,98,.22)}
  .slot.hl-bot{border:2px solid #e11d48;background:#ffe4e6;box-shadow:0 0 0 3px rgba(225,29,72,.20)}
  .slot.hl-top:hover{border-color:#00a862}
  .slot.hl-bot:hover{border-color:#e11d48}
  .slot .s-hl{font-size:10px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;line-height:1.3;
    padding:2px 6px;border-radius:5px;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slot .s-hl.top{background:#00a862;color:#fff}
  .slot .s-hl.bot{background:#e11d48;color:#fff}
  .slot.b2b{border-color:#e8b4ad;background:#fdf3f2;border-style:solid}
  .slot .s-b2b{font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#c0392b;line-height:1.3}
  .slot .s-risk{font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#c0392b;line-height:1.3}
  .slot .s-risk.medium{color:#a86a12}
  .slot .s-risk.low{color:#6b7280}
  .slot .s-win{font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0e7d57;line-height:1.3}
  .s-ran{align-self:flex-end;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#12864e}
  .s-q{align-self:flex-end;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6d3fd4}
  .bx.skip{border-left-color:#cbd0d8;background:#fafbfc}
  .bx-v.skip{background:#f0f1f4;color:var(--faint)}
  .bx-rel.skip{color:var(--faint)}
  /* Brain — the bets and their verdicts */
  .bx.good{border-left-color:#12864e;background:#f7fdfa}
  .bx.bad{border-left-color:#c0392b;background:#fdf7f6}
  .bx.run{border-left-color:#6d3fd4;background:#fcfbff}
  .bx-v.good{background:#e7f6ee;color:#12864e}
  .bx-v.bad{background:#fdecea;color:#c0392b}
  .bx-v.run{background:#efe9fd;color:#6d3fd4}
  .bx-rel.good{color:#12864e} .bx-rel.bad{color:#c0392b}
  .bx-line.good{border-color:#a6e3c2} .bx-line.bad{border-color:#f0c7c2}
  /* flops */
  .flop{border:1px solid var(--line);border-left:3px solid #c0392b;border-radius:11px;background:#fff;padding:11px 13px;margin-bottom:9px}
  .chg-b.new{background:#e7f6ee;color:#12864e}
  .chg-b.dropped{background:#fdecea;color:#c0392b}
  .chg-b.up{background:#e7f6ee;color:#12864e}
  .chg-b.down{background:#fdecea;color:#c0392b}
  .chg-b.same{background:#f0f1f4;color:var(--muted)}
  /* The board needs room. Give the Schedule page the whole window, not the
     820px reading column the text views use. */
  #scheduleView .an-wrap{max-width:1500px;margin:0 auto}
  #scheduleView{max-width:none;padding-left:28px;padding-right:28px}
  @media(max-width:1080px){
    .sch-days{overflow-x:auto;padding-bottom:8px}
    .sch-day{min-width:132px}
  }
  /* THE WEEK BAND, ON THE WEEK IT DESCRIBES. These ran big when they were their own
     screen-recorded tab; here they sit above a board you're trying to read, so they
     shrink: three numbers on one short row, not three billboards. */
  .xw-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .xw-stat{flex:1;min-width:150px;background:#f7f9fb;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
  .xw .bc-chip{font-size:13.5px;padding:4px 12px}
  .xw .mini-post .mp-txt{font-size:15.5px}
  .xw .mini-post .mp-metrics{font-size:13.5px}
  .xs-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
  .xs-big{font-size:20px;font-weight:800;line-height:1.15;margin-top:1px}
  .xs-sub{font-size:12px;color:var(--muted);margin-top:2px}
  /* both reference points on one line: are you moving, and how far off your record */
  .wm-deltas{display:flex;gap:9px;flex-wrap:wrap;margin-top:3px}
  .wm-d{font-size:10.5px;font-weight:800;white-space:nowrap}
  .wm-d.muted{color:var(--faint)}
  .xw-r.good{color:#12864e}.xw-r.bad{color:#c0392b}
  /* Predictions — audit accountability */
  .pd{border:1px solid var(--line);border-left-width:3px;border-radius:10px;background:#fff;padding:11px 14px;margin-bottom:9px}
  .pd.good{border-left-color:#12864e}.pd.bad{border-left-color:#c0392b}.pd.mid{border-left-color:#c9ccd2}
  .pd-dir.flop{background:#fdecea;color:#c0392b}
  .pd-dir.hit{background:#dcf5e9;color:#0e7d57}
  .pd-dir.views{background:#eaf0f8;color:#2657a8}
  .eng-vs .side{flex:1;border:1px solid var(--line);border-radius:11px;padding:10px 13px;background:#fff}
  .eng-vs .side.v2{border-color:#d8c9f4;background:#fbf9fe}
  .eng-vs .side:hover{border-color:var(--accent)}
  .eng-vs .side.on{box-shadow:0 0 0 2px rgba(99,102,241,.35)}
  .eng-vs .side .t{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a90a0}
  .eng-vs .side.v2 .t{color:#6d3fc4}
  .eng-vs .side .v{font-size:19px;font-weight:800;margin-top:2px}
  .eng-vs .side .s{font-size:11.5px;color:var(--muted)}
  .mcard.filt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  /* FILTER BAR. One row that reads left to right — one control per attribute, sort
     held apart on the right because sort is not a filter. Options carry their counts,
     so twenty chips don't have to sit on screen to tell you how many of each there
     are. What's actually ON shows underneath as removable chips: the one thing that
     must never be hidden is why the list looks the way it does. */
  /* Profile CTAs: a comparison table, because the question is "which one do I rewrite". */
  .pt-head{display:flex;gap:34px;flex-wrap:wrap;margin:2px 0 14px}
  .pt-big{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
  .pt-lbl{font-size:12px;color:var(--faint);margin-top:2px}
  .ptab{width:100%;border-collapse:collapse;font-size:13px}
  .ptab th,.ptab td{padding:10px 14px;text-align:right;white-space:nowrap}
  .ptab thead th{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:var(--faint);border-bottom:1px solid var(--line);cursor:default}
  .ptab thead th[title]{cursor:help;text-decoration:underline dotted rgba(23,20,50,.25);text-underline-offset:3px}
  .ptab tbody tr+tr th,.ptab tbody tr+tr td{border-top:1px solid #f1f2f5}
  .ptab th:first-child,.ptab thead th:first-child{text-align:left}
  .ptab tbody th{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px;color:var(--ink)}
  .ptab .pt-best{background:#eefaf3;font-weight:700}
  .pt-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;background:#eef0f4;
    border:1px solid rgba(23,20,50,.08)}
  .pt-notes{margin-top:12px;display:flex;flex-direction:column;gap:7px}
  .pt-notes div{font-size:13px;line-height:1.5;color:var(--ink);background:#fff8ec;
    border:1px solid #f2e3c6;border-radius:9px;padding:9px 12px}
  .pt-miss{margin-top:10px;font-size:12.5px;color:var(--faint)}
  .fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
  .fsel{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:#fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' fill='none' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 9px center;background-size:12px;border-radius:9px;padding:7px 28px 7px 11px;
    font:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;max-width:230px;
    text-overflow:ellipsis}
  .fsel:hover{border-color:#c7cbd6}
  .fsel.set{border-color:var(--ink);font-weight:600}
  .fbar-sp{flex:1;min-width:8px}
  .fsort{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint);font-weight:600}
  .fchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
  .fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f7f8fa;
    border-radius:7px;padding:4px 6px 4px 9px;font-size:12px;font-weight:600;color:var(--ink)}
  .fchip i{font-style:normal;color:var(--faint);font-weight:500}
  .fchip button{border:0;background:none;cursor:pointer;color:var(--faint);font:inherit;font-size:13px;
    line-height:1;padding:0 2px;border-radius:4px}
  .fchip button:hover{color:var(--ink);background:rgba(23,20,50,.07)}
  .fclear{border:0;background:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
    color:var(--faint);text-decoration:underline;padding:2px 4px}
  .fclear:hover{color:var(--ink)}
  .pf-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
  .pf-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted);transition:.12s}
  .pf-chip:hover{border-color:var(--accent);color:var(--ink)}
  .pf-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .pd-badge.good{color:#12864e}.pd-badge.bad{color:#c0392b}
  /* Analytics sub-tabs */
  .subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .subtab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
    padding:9px 14px;margin-bottom:-1px;font:inherit;font-size:14px;font-weight:600;
    color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .subtab:hover{color:var(--ink)}
  .subtab.active{color:var(--ink);border-bottom-color:var(--ink)}
  .subtab .ic{font-size:14px}
  /* Insights — categories then formats. Bar-driven so it scans at a glance. */
  .ib-cat{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
  .ib-head{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer}
  .ib-head:hover{background:#fafbfc}
  .ib-head .caret{color:var(--faint);transition:transform .15s;flex:0 0 auto}
  .ib-head.open .caret{transform:rotate(90deg)}
  .ib-badge{font-size:12px;font-weight:800;letter-spacing:.02em;padding:3px 10px;border-radius:99px;flex:0 0 auto}
  .ib-stat{font-size:12px;flex:0 0 auto}
  .ib-head .ib-spacer{flex:1}
  /* the shared bar. tick marks 1.0x = "par with your typical week" */
  .ibar-wrap{flex:0 0 var(--barw,150px);width:var(--barw,150px)}
  .ibar{position:relative;height:9px;background:#eef0f2;border-radius:5px}
  .ibar-fill{position:absolute;left:0;top:0;height:100%;border-radius:5px;min-width:3px}
  .ibar-tick{position:absolute;top:-2.5px;height:14px;width:1px;background:#c2c7cf}
  .ib-num{flex:0 0 52px;width:52px;text-align:right;font-weight:800}
  .ib-bo{flex:0 0 128px;width:128px;text-align:right;font-size:11.5px;color:#556}
  /* sort pills (also act as column labels) */
  .sortlbl{font-size:11.5px;margin-left:6px}
  .sbtn{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--muted)}
  .sbtn:hover{background:#f6f8fa}
  .sbtn.on{background:#0e7d57;border-color:#0e7d57;color:#fff;font-weight:700}
  /* column labels above the cards, aligned to the numeric columns on the right */
  .ib-colhead{display:flex;align-items:center;gap:12px;padding:2px 4px 7px;font-size:10.5px;
    font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
  .ib-colhead .ib-spacer{flex:1}
  .ib-colhead .ch-bar{flex:0 0 var(--barw,150px);width:var(--barw,150px);text-align:left}
  .ib-colhead .ch-num{flex:0 0 52px;width:52px;text-align:right}
  .ib-colhead .ch-bo{flex:0 0 128px;width:128px;text-align:right}
  .ib-colhead .on{color:#0e7d57}
  .ib-head .ib-num{font-size:15px}
  .ib-formats{border-top:1px solid var(--line);padding:8px 15px 12px}
  .ib-fmt{display:flex;align-items:center;gap:12px;padding:9px 2px;font-size:13px}
  .ib-fmt-row{cursor:pointer;border-radius:7px}
  .ib-fmt-row:hover{background:#f6f8fa}
  .ib-fmt-wrap{border-bottom:1px solid #f2f3f5}
  .ib-fmt-wrap:last-child{border-bottom:0}
  .ib-fname{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
  .ib-fn{flex:0 0 auto;font-size:11.5px}
  .fcaret{display:inline-block;transition:transform .15s;color:var(--faint);font-size:10px}
  .ib-fmt-row.open .fcaret{transform:rotate(90deg)}
  .ib-posts{padding:2px 2px 8px 22px}
  .ib-post{display:flex;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid #f1f2f4}
  .ib-post:last-child{border-bottom:0}
  .ib-post-txt{flex:1;min-width:0;font-size:12.5px;color:#445;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ib-post .ibar-wrap{--barw:110px}
  .ib-post .ib-num{flex:0 0 46px;width:46px;font-size:12.5px}
  /* Insights: the seam between "this week" and "change the brief" */
  /* Topics — the name gets its own full line. It's the thing you're reading. */
  .tp-row .tw{width:44px;border:1px solid var(--line);background:#fff;font:inherit;font-size:12px;color:var(--ink);
              text-align:center;padding:3px 4px;border-radius:7px;-moz-appearance:textfield}
  .tp-row .tw::-webkit-outer-spin-button,.tp-row .tw::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .tp-row .tw:focus{outline:0;border-color:var(--accent)}
  /* Collabs */
  .cl-card{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start;transition:.12s}
  .cl-card.done{opacity:.55;background:#fafbfc}
  .cl-main{flex:1;min-width:0}
  .cl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .cl-why{font-size:11.5px;color:var(--faint);margin-top:3px}
  .cl-contact.on{background:#0e7d57;border-color:#0e7d57;color:#fff;font-weight:700}
  .cl-del{border:0;background:none;cursor:pointer;color:var(--faint);font-size:15px}
  .cl-del:hover{color:#c0392b}
  /* Material (borrowed-proof queue) */
  .mat-item.used{opacity:.45}
  /* Topic row v2: name + stats + acts on one line, subtopics below */
  .fchip.sub{font-size:11px;padding:3px 9px}
  /* Archive */
  .arc-stat .v{font-size:19px;font-weight:700;letter-spacing:-.01em}
  .arc-stat .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
  .arc-verdict.good{background:#f2fbf6;border:1px solid #a6e3c2}
  .arc-verdict.bad{background:#fdf5f4;border:1px solid #f0c7c2}
  /* Remix */
  .rx-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px 16px;margin-bottom:12px}
  .rx-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;margin-bottom:9px}
  .rx-stat{font-weight:700;color:var(--ink)}
  .rx-auth{margin-left:auto;color:var(--muted)}
  .rx-auth a{color:var(--accentink);text-decoration:none}
  .rx-text{font-size:14.5px;line-height:1.55;white-space:pre-wrap;border-left:3px solid #eabfdd;padding-left:11px;color:#334}
  /* TWO LINES IS THE PREVIEW. Remix is a list you scan for something worth stealing,
     and a 400-character tweet turned each row into a wall you had to scroll past to
     reach the next one. The rest of the post is one click away, on X. */
  .rx-text.rx-2l{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    line-clamp:2;overflow:hidden;max-height:calc(2 * 1.55 * 14.5px)}
  .rx-foot{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
  .trend-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px 16px;margin-bottom:12px}
  .trend-card .t-title{font-weight:700;font-size:15.5px;margin-bottom:4px}
  .trend-card .t-why{color:var(--muted);font-size:13.5px;line-height:1.5}
  .trend-card .t-angle{margin-top:8px;font-size:14.5px;font-weight:600;color:var(--ink);background:#f4f8ff;border:1px solid #e0e9ff;border-radius:10px;padding:9px 11px;line-height:1.45}
  .trend-card .t-foot{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px}
  .trend-card .t-foot a{color:var(--accentink);text-decoration:none}
  .trend-card .t-foot a:hover{text-decoration:underline}
  .atable tr.frow .caret, .atable tr.trow2 .caret{display:inline-block;width:12px;color:var(--faint);transition:transform .15s}
  .atable tr.frow.open .caret, .atable tr.trow2.open .caret{transform:rotate(90deg)}
  .mini-post{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px;margin:8px 0}
  .mini-post .mp-txt{font-size:13.5px;line-height:1.5;white-space:pre-wrap}
  .mini-post .mp-metrics{margin-top:6px;font-size:11.5px;color:var(--muted)}
  .detail-hint{font-size:11.5px;color:var(--faint);margin:0 0 8px}
  .rule-row .rx{color:#c0392b;background:transparent;border:0;cursor:pointer;font-size:17px;line-height:1;opacity:.55}
  .rule-row .rx:hover{opacity:1}
  .type-row .caret{color:var(--faint);font-size:12px;width:12px;flex:none;transition:transform .15s}
  .type-row.open .caret{transform:rotate(90deg)}
  .type-row.off{opacity:.6;background:#fafbfc}
  .type-toggle.on{background:#e7f7ee;border-color:#a6e3c2;color:#12864e}

  #loginView{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(160deg,#fafbff,#f2f4f9);z-index:60;padding:20px}
  .login-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 34px;max-width:400px;width:100%;text-align:center;box-shadow:0 18px 50px rgba(15,23,42,.10)}
  .login-logo{width:52px;height:52px;border-radius:15px;margin:0 auto 16px;background:linear-gradient(135deg,var(--pink),#b23df0);display:grid;place-items:center;color:#fff;font-size:26px;font-weight:800}
  .login-card h1{font-size:24px;margin:0 0 6px;letter-spacing:-.02em}
  .login-card p{color:var(--muted);margin:0 0 22px;font-size:14.5px}
  .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;transition:.15s}
  .gbtn:hover{border-color:#cfd6df;box-shadow:0 2px 10px rgba(15,23,42,.06)}
  .login-note{margin:16px 0 0 !important;font-size:12.5px;color:var(--faint)}
  .userchip{display:flex;align-items:center;gap:8px;padding:8px 10px 2px;font-size:12px;color:var(--faint)}
  .userchip .uc-email{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userchip .uc-out{border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:12px;text-decoration:underline}
  .userchip .uc-out:hover{color:var(--ink)}
  .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.35);display:none;z-index:40;align-items:center;justify-content:center;padding:18px}
  .modal-bg.show{display:flex}
  .modal{background:#fff;border-radius:18px;max-width:460px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(15,23,42,.3);max-height:90vh;overflow:auto}
  .modal h3{margin:0 0 4px}
  .modal p.s{color:var(--muted);font-size:13px;margin:0 0 8px}
  .field{margin:12px 0}
  .field label{display:block;font-size:12.5px;font-weight:600;color:#334;margin-bottom:5px}
  .field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
  .field input:focus,.field select:focus{outline:0;border-color:var(--accent)}
  .sec-divider{border:0;border-top:1px solid var(--line);margin:18px 0 6px}
  .sec-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
  .save{width:100%;margin-top:12px;border:0;background:var(--ink);color:#fff;border-radius:12px;padding:11px;font-size:14.5px;font-weight:600;cursor:pointer}
  .muted{color:var(--muted);font-size:12px}
  .note{background:#fff8e8;border:1px solid #f3e2ba;border-radius:10px;padding:9px 11px;font-size:12px;color:#8a6d1e;margin-top:6px}
  .close{float:right;border:0;background:transparent;font-size:20px;color:var(--faint);cursor:pointer;line-height:1}