:root{
    --bg:#F7F5F1;
    --panel:#FFFFFF;
    --panel-2:#FCFBF9;
    --line:#EAE6DF;
    --gold:#C9A227;
    --gold-soft:#A9861A;
    --gold-deep:#A9861A;
    --gold-wash:#FBF6E9;
    --text:#1A1A1A;
    --muted:#6B6B6B;
    --dim:#9A9A9A;
    --shadow:0 1px 2px rgba(26,26,26,.04), 0 10px 30px rgba(26,26,26,.05);
    --shadow-lift:0 4px 14px rgba(201,162,39,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Josefin Sans',sans-serif;
    font-weight:300;
    min-height:100vh;
    letter-spacing:.02em;
  }
  ::selection{background:var(--gold);color:#0b0b0d}

  /* header styles are defined above (.site-head) */
  .banner{display:none}
  .poster-wrap{max-width:720px;margin:48px auto 0;padding:0 20px}
  .poster{width:100%;display:block;border-radius:12px;border:1px solid var(--line)}
  .eyebrow{
    font-size:11px;letter-spacing:.35em;text-transform:uppercase;
    color:var(--gold);margin-bottom:14px;
  }
  h1{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;font-size:clamp(30px,5vw,46px);
    line-height:1.1;
  }
  h1 em{font-style:italic;color:var(--gold-soft)}
  .sub{color:var(--muted);font-size:14px;margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6}
  .tagline{
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--gold-soft);margin-top:14px;
  }

  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* hero */
  .hero{padding:52px 0 36px;text-align:center}
  .hero-logo{margin:0 auto 20px;max-width:120px}
  .hero-logo img{max-width:120px;max-height:80px;object-fit:contain}
  .hero .eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px;font-weight:500}
  .hero h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(32px,5.5vw,54px);line-height:1.06;margin:0 auto 16px;max-width:15ch;letter-spacing:.01em;color:var(--text)}
  .hero h2 em{font-style:italic;color:var(--gold-deep)}
  .hero .sub{font-size:17px;color:var(--muted);max-width:52ch;margin:0 auto;font-weight:300}

  /* section label */
  .section-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:6px 0 14px;font-weight:500}

  /* profile card */
  .pmark{width:40px;height:40px;border-radius:10px;background:var(--gold-wash);color:var(--gold-deep);display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:16px;flex:none}
  .pinfo{min-width:0}
  .pname{font-size:15px;font-weight:400;color:var(--text)}
  .pline{font-size:13px;color:var(--muted);font-weight:300}
  .pbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
  .lang-select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-family:'Josefin Sans',sans-serif;font-size:13px;padding:9px 12px;border-radius:9px;outline:none;cursor:pointer}

  .site-head{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
  .head-wrap{max-width:1080px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .brand-lock .wordmark{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:23px;letter-spacing:.06em;line-height:1;margin:0;position:relative;display:inline-block;padding-bottom:7px;color:var(--text)}
  .brand-lock .wordmark .ai{color:var(--gold-deep)}
  .brand-lock .wordmark::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;background:var(--gold)}
  .brand-lock .by{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px}
  .head-nav{display:flex;gap:20px;align-items:center}
  .wrap{max-width:1060px;margin:0 auto;padding:0 20px 24px}

  /* ---------- brand profile bar ---------- */
  .profile-bar{
    display:flex;flex-wrap:wrap;gap:16px;align-items:center;
    background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
    border-radius:14px;padding:16px 20px;margin:0 0 30px;
  }
  .profile-bar label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-right:4px}
  .profile-bar select, .profile-bar input[type="text"]{
    background:var(--panel-2);border:1px solid var(--line);color:var(--text);
    font-family:'Josefin Sans',sans-serif;font-size:13px;font-weight:300;
    padding:8px 10px;border-radius:6px;outline:none;min-width:150px;
  }
  .profile-bar select:focus,.profile-bar input:focus{border-color:var(--gold)}
  .btn{
    background:var(--gold);border:1px solid var(--gold);color:#1A1A1A;
    font-family:'Josefin Sans',sans-serif;font-size:12px;letter-spacing:.15em;
    text-transform:uppercase;padding:10px 18px;border-radius:9px;cursor:pointer;
    transition:all .18s;font-weight:500;box-shadow:var(--shadow-lift);
  }
  .btn:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
  .btn:hover,.btn:focus-visible{background:var(--gold);color:#0b0b0d;outline:none}
  .btn:disabled{opacity:.45;cursor:wait}
  .btn:disabled:hover{background:transparent;color:var(--gold)}
  .result-box{display:none;margin-top:6px}
  .result-full{background:var(--gold-wash);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;max-width:100%;box-sizing:border-box}
  /* BUG FIX: this table used to force min-width:820px (plus a 420px-min
     "wide" column on top of that), so on any window narrower than that —
     completely normal, not just small screens — the table forced the whole
     result box into horizontal overflow and needed a slide/scroll just to
     read it, even though every cell already wraps text fine. Dropped the
     forced minimums entirely: the table now always fits the actual column
     width, wrapping cell text instead of forcing overflow. overflow-x:auto
     stays only as a safety net for pathological cases (e.g. many columns on
     a very narrow phone), not as the everyday experience. */
  .result-full table{border-collapse:collapse;width:100%;font-size:13.5px}
  .result-full th,.result-full td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;line-height:1.55;word-break:normal;overflow-wrap:break-word}
  .result-full th{background:var(--panel-2);color:var(--gold-deep);font-weight:600;position:sticky;top:0}
  .result-full table{table-layout:auto;width:100%}
  .result-full td,.result-full th{overflow-wrap:break-word;word-break:normal;vertical-align:top}
  .result-full td:first-child,.result-full th:first-child{width:40px;min-width:40px;max-width:40px}
  /* long outline column gets generous room, but no longer an unconditional
     min-width — min() lets it shrink below 260px on a genuinely narrow
     column instead of forcing overflow, while still growing wide when room
     allows. */
  .result-full td.col-wide,.result-full th.col-wide{min-width:min(260px,100%);max-width:none;width:auto}
  .result-full td.col-narrow,.result-full th.col-narrow{min-width:min(70px,100%);max-width:130px;white-space:normal}
  .result-full td:not(.col-wide),.result-full th:not(.col-wide){max-width:180px}
  .result-full td.row-actions,.md td.row-actions{white-space:normal;width:1%;max-width:none;vertical-align:top;padding:12px}
  .row-actions-inner{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:172px}
  .row-actions-type{display:inline-block;align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--os-purple,#6C5CE7);background:var(--os-purple-wash,#F1EEFF);border-radius:6px;padding:3px 8px}
  .row-actions-inner button.tbl-copy{width:100%;box-sizing:border-box;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;font-size:10.5px;letter-spacing:.08em;border-radius:8px}
  .result-box.show{display:block}
  .result-box pre{
    white-space:pre-wrap;font-family:'Josefin Sans',sans-serif;font-weight:300;
    font-size:13px;color:var(--text);line-height:1.75;
    background:var(--gold-wash);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  }
  .btn.ghost{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:none}
  .btn.ghost:hover{background:var(--panel);border-color:var(--gold);color:var(--gold-deep)}
  .btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
  a.btn{text-decoration:none;display:inline-block;line-height:1}
  .ai-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}
  .ai-links .lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .hint{font-size:12px;color:var(--dim);margin:6px 4px 0}

  /* ---------- pipeline nav ---------- */
  .pipeline{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;margin:0 0 40px;
  }
  .step-tab{
    background:var(--panel);
    border:1px solid var(--line);border-radius:14px;
    padding:16px 14px;cursor:pointer;text-align:left;
    position:relative;overflow:hidden;
    font-family:'Josefin Sans',sans-serif;color:var(--text);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  .step-tab:hover{border-color:var(--gold);box-shadow:var(--shadow)}
  .step-tab .num{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--gold-deep);font-weight:600;margin-bottom:4px}
  .step-tab .name{font-size:14px;font-weight:400;color:var(--text);line-height:1.3}
  .step-tab::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:0;transition:opacity .18s ease;
  }
  .step-tab:hover{transform:translateY(-2px);border-color:#4a4436;box-shadow:0 8px 20px rgba(0,0,0,.5)}
  .step-tab:hover::before{opacity:.55}
  .step-tab.active{
    border-color:var(--gold);
    background:var(--gold-wash);
    box-shadow:0 0 0 1px rgba(201,162,39,.20),0 8px 22px rgba(201,162,39,.08);
  }
  .step-tab.active::after{content:"";position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .step-tab.active::before{opacity:1}
  .step-tab .num{
    font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1;font-style:italic;
    background:linear-gradient(135deg,#7d6a26,#e6c96a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    opacity:.55;transition:opacity .18s ease;
  }
  .step-tab.active .num,.step-tab:hover .num{opacity:1}
  .step-tab .name{font-size:12.5px;letter-spacing:.06em;margin-top:8px;color:var(--muted);font-weight:400}
  .step-tab.active .name{color:var(--text)}
  .step-tab .tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;color:var(--dim)}
  .step-tab.active .tag{color:var(--gold)}
  .step-tab .done{
    position:absolute;top:11px;right:12px;width:7px;height:7px;border-radius:50%;
    background:var(--gold-soft);box-shadow:0 0 8px rgba(230,201,106,.8);
  }
  .step-tab.soon{opacity:.55}
  .step-tab.path-dim{opacity:.5}
  .step-tab.path-dim:hover{opacity:.85}
  .msl-item.path-dim{opacity:.5}
  .msl-item .path-hint{margin-top:1px}
  .path-hint{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-top:3px;font-weight:500}
  .step-tab.soon:hover{opacity:.8}

  .field-note-important{font-size:12.5px;color:var(--gold-deep);background:var(--gold-wash);border:1px solid #EFE4C4;border-radius:9px;padding:9px 12px;margin:2px 0 12px;line-height:1.5}

  .text-choice{margin:0 0 18px}
  .text-choice-row{display:flex;gap:10px;margin-top:8px}
  .text-choice-btn{flex:1;border:1.5px solid var(--line);background:var(--panel);border-radius:11px;padding:12px;font-size:13px;cursor:pointer;font-family:'Josefin Sans',sans-serif;color:var(--text);transition:all .15s}
  .text-choice-btn:hover{border-color:var(--gold)}
  .text-choice-btn.on{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-deep);font-weight:500}
  .s2-carry{background:var(--gold-wash);border:1px solid #EFE4C4;border-radius:12px;padding:14px 16px;margin:0 0 18px}
  .s2-carry-head{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:10px}
  .s2-carry-chips{display:flex;flex-wrap:wrap;gap:8px}
  .s2-chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 14px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:'Josefin Sans',sans-serif}
  .s2-chip:hover{border-color:var(--gold)}
  .s2-chip.applied{background:var(--gold);color:#1a1a1a;border-color:var(--gold)}
  .s2-chip .s2-lbl{color:var(--gold-deep);font-weight:500}
  .s2-chip.applied .s2-lbl{color:#1a1a1a}
  .make-image{background:var(--gold-wash) !important;border-color:var(--gold) !important;color:var(--gold-deep) !important}
  .make-video{background:var(--os-purple-wash,#F1EEFF) !important;border-color:var(--os-purple,#6D5DF6) !important;color:var(--os-purple,#6D5DF6) !important}
  .shot-create-video-btn{background:var(--os-purple-wash,#F1EEFF) !important;border-color:var(--os-purple,#6D5DF6) !important;color:var(--os-purple,#6D5DF6) !important;font-weight:700 !important}
  .img-gallery{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
  .gallery-head{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--text);margin-bottom:12px}
  .gallery-count{display:inline-block;background:var(--gold);color:#1a1a1a;font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:middle}
  .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .gallery-cell{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1}
  .gallery-thumb{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
  .gallery-del,.gallery-restore{position:absolute;top:6px;right:6px;border:none;background:rgba(17,17,17,0.7);color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
  .gallery-del:hover{background:#c0392b}
  .gallery-restore{background:rgba(201,162,39,0.9)}
  .gallery-cell.trashed .gallery-thumb{opacity:.6;filter:grayscale(.5)}
  .gallery-bulkbar{display:flex;gap:8px;margin-bottom:10px}
  .gallery-cell-chk{position:absolute;top:6px;left:6px;z-index:2;width:20px;height:20px;cursor:pointer}
  .gallery-cell-picked{box-shadow:0 0 0 3px var(--os-purple,#6D5DF6)}
  .gallery-cell-picked .gallery-thumb{opacity:.75}
  .trash-details{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
  .trash-details summary{font-size:13px;color:var(--muted);cursor:pointer;font-weight:500;margin-bottom:10px}
  .ai-reminder{display:block;width:100%;font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;font-style:italic}
  .menu-btn{background:var(--panel);border:1.5px solid var(--line);color:var(--text);border-radius:10px;
    padding:9px 16px;font-family:'Josefin Sans',sans-serif;font-size:14px;cursor:pointer;transition:all .15s}
  .menu-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
  .menu-overlay{position:fixed;inset:0;background:rgba(20,18,14,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
  .menu-modal{background:var(--panel);border:1px solid var(--gold);border-radius:16px;width:100%;max-width:860px;height:82vh;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden}
  .menu-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
  .menu-head h3{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--text);margin:0}
  .menu-body{flex:1;display:flex;overflow:hidden}
  .menu-sidebar{width:200px;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:var(--panel-2)}
  .menu-navitem{text-align:left;background:none;border:none;border-radius:9px;padding:12px 14px;font-family:'Josefin Sans',sans-serif;font-size:14px;color:var(--text);cursor:pointer;transition:all .12s}
  .menu-navitem:hover{background:var(--gold-wash)}
  .menu-navitem.on{background:var(--gold-wash);color:var(--gold-deep);font-weight:500}
  .menu-page{flex:1;overflow:auto;padding:22px 26px}
  .menu-empty,.menu-lead{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:18px}
  .hist-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
  .hist-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
  .hist-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--text)}
  .hist-when{font-size:12px;color:var(--muted)}
  .hist-acts{display:flex;gap:8px;flex-wrap:wrap}
  .soon-row{border-left:2px solid var(--gold);padding:10px 0 10px 16px;margin-bottom:16px}
  .soon-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--text);margin-bottom:3px}
  .soon-desc{font-size:13.5px;color:var(--muted);line-height:1.5}
  @media(max-width:640px){ .menu-body{flex-direction:column} .menu-sidebar{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line)} }
  .uploads-sec{margin:20px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
  .uploads-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:2px 0 12px}
  .ref-upload{margin-bottom:14px}
  .ref-label{font-family:'Josefin Sans',sans-serif;font-size:13px;color:var(--text);margin-bottom:6px}
  .ref-hint{color:var(--muted);font-size:11.5px}
  .ref-row{display:flex;align-items:center;gap:10px}
  .ref-prev{position:relative;width:56px;height:56px;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--panel-2);flex-shrink:0}
  .ref-prev img{width:100%;height:100%;object-fit:cover}
  .ref-empty{font-size:10px;color:var(--muted);text-align:center}
  .ref-btn{font-size:12px !important;padding:7px 12px !important;cursor:pointer}
  /* Small "×" badge on the preview thumbnail's own corner, replacing the
     separate "Remove" text button — per explicit request, saves real
     width now that these sit 2-up in .ref-upload-grid. Only shown when
     there's actually an image to remove (toggled in showPrev()). */
  .ref-remove-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
    background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15);padding:0}
  .ref-remove-x:hover{color:#c0392b;border-color:#c0392b}
  /* Person/Dress/Product/Location, 2x2 instead of one long vertical stack
     — per explicit request. .ref-upload keeps its own margin-bottom
     outside this grid (Storyboard's own uploads still stack normally),
     zeroed only inside it since the grid gap handles spacing instead. */
  .ref-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
  .ref-upload-grid .ref-upload{margin-bottom:0}
  @media(max-width:640px){ .ref-upload-grid{grid-template-columns:1fr} }
  /* refImageAttachRow() — the "download these to attach in Google Flow"
     row next to a copyable video prompt. Thumbnails a bit bigger than
     .ref-prev's 56px since these are meant to be looked at and downloaded,
     not just confirmed as "uploaded". */
  .ref-attach-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
  .ref-attach-cell{display:flex;flex-direction:column;align-items:center;gap:6px;width:96px}
  .ref-attach-cell img{width:96px;height:96px;object-fit:cover;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
  /* BUG FIX: white-space:nowrap with no width limit let a long label like
     "Download (Product)" spill past its own 96px cell and overlap the
     next one. Constrained to the cell's own width and allowed to wrap
     onto a second line instead of running into the neighbor. */
  .ref-attach-dl{font-size:11px !important;padding:6px 8px !important;white-space:normal;text-align:center;line-height:1.3;width:100%;box-sizing:border-box;cursor:pointer}
  .big-describe{min-height:240px !important}
  .pl-describe-wrap{position:relative}
  .amend-box{margin-top:22px;padding:16px;border:1px solid var(--gold);border-radius:12px;background:var(--gold-wash)}
  .fb-caption-box{margin-top:18px;padding:14px 16px;border:1px solid var(--os-line,#E5E9F2);border-radius:12px;background:#F8F9FC}
  .fb-caption-text{white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--os-ink,#17171F);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#fff;border:1px solid var(--os-line,#E5E9F2);border-radius:9px;padding:12px 14px;margin-top:6px}
  /* Storyboard's inline Shot List result — per feedback, uses the app's
     established warm "AI Result" look (same border/wash .amend-box and
     .output-box textarea already use) instead of the plain white
     .fb-caption-text it started as. */
  .shotlist-inline-box{font-size:13.5px;line-height:1.6;color:var(--text);font-family:'Josefin Sans',sans-serif;background:var(--gold-wash);border:1px solid var(--gold);border-radius:9px;padding:12px 14px;margin-top:6px}
  .cal-post-thumb{width:100%;max-width:280px;border-radius:12px;display:block;margin:10px auto;box-shadow:0 2px 10px rgba(23,32,51,.08)}
  .cal-post-copy-box{white-space:pre-wrap;font-size:12.5px;line-height:1.55;background:#F8F9FC;border:1px solid var(--os-line,#E5E9F2);border-radius:8px;padding:10px 12px;margin:6px 0;max-height:120px;overflow:auto}
  .cal-post-copy-wrap{margin-top:8px}
  .cal-post-copy-platform{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--os-purple,#6D5DF6)}
  .cal-uns-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0}
  .prompt-lib{margin-top:18px;border:1px solid var(--os-line,#E5E9F2);border-radius:12px;overflow:hidden;background:#fff}
  .prompt-lib > summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:13.5px;list-style:none;background:#F8F9FC;color:var(--os-ink,#17171F)}
  .prompt-lib > summary::-webkit-details-marker{display:none}
  .prompt-lib > summary::before{content:"▸ ";color:var(--os-purple,#6D5DF6)}
  .prompt-lib[open] > summary::before{content:"▾ "}
  .prompt-lib-inner{padding:14px 16px 16px}
  .pl-highlight{border:none;border-radius:16px;box-shadow:0 12px 30px rgba(109,93,246,.25)}
  .pl-highlight > summary{padding:0;background:none;display:block}
  .pl-highlight > summary::before{content:none}
  .pl-highlight > summary::marker{content:none}
  .pl-highlight > summary{
    display:flex;align-items:center;gap:14px;padding:18px 20px;
    background:linear-gradient(135deg,var(--os-purple),var(--os-purple-2));color:#fff;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .pl-highlight > summary:hover{transform:translateY(-1px)}
  .pls-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .pls-icon svg{width:100%;height:100%}
  .pls-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .pls-title{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.01em}
  .pls-sub{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600}
  .pls-chevron{font-size:16px;flex-shrink:0;transition:transform .2s ease}
  .pl-highlight[open] .pls-chevron{transform:rotate(180deg)}
  .pl-highlight > .prompt-lib-inner{background:#fff}
  .pl-locked{opacity:.6;cursor:not-allowed;background:linear-gradient(135deg,var(--os-purple),var(--os-purple-2))}
  .pl-locked .pls-locked-row{display:flex;align-items:center;gap:14px;padding:18px 20px;color:#fff}
  .pl-locked .pls-sub{color:rgba(255,255,255,.85)}
  .prompt-lib-search{width:100%;border:1px solid var(--os-line,#E5E9F2);border-radius:9px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;margin:8px 0;box-sizing:border-box}
  .prompt-lib-search:focus{border-color:var(--os-purple,#6D5DF6)}
  .prompt-lib-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
  .prompt-lib-count{font-size:11.5px;color:var(--muted);margin:2px 0 8px}
  .prompt-lib-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-height:480px;overflow-y:auto;padding:2px}
  .prompt-lib-list-page{max-height:none;overflow:visible}
  .pls-link-btn{
    width:100%;cursor:pointer;text-align:left;font:inherit;
    display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;
    background:#F5F4FF;border:1.5px solid #E5E0FF;color:var(--os-purple,#6D5DF6);
    transition:transform .15s ease,background .15s ease;
  }
  /* Deliberately NOT a solid purple fill like Generate/primary buttons —
     this is a navigation link (browse the library), not the primary action
     on this screen, and sharing the exact same solid purple as "Generate
     Image" was causing real mis-taps (reported live). A light wash keeps
     it on-brand and recognisable without competing with the real CTA. */
  .pls-link-btn:hover{transform:translateY(-1px);background:#EDEBFF}
  .pls-link-btn .pls-icon{color:var(--os-purple,#6D5DF6)}
  .pls-link-btn .pls-title{color:var(--os-purple,#6D5DF6)}
  .pls-link-btn .pls-sub{color:#6B6B85}
  .pls-link-btn .pls-chevron{font-size:22px;color:var(--os-purple,#6D5DF6)}
  .prompt-lib-card{--plc-accent:var(--os-purple);border:1px solid var(--os-line,#E5E9F2);border-top:3px solid var(--plc-accent);border-radius:10px;padding:12px;background:#FAFAFC;display:flex;flex-direction:column;gap:6px;transition:transform .15s ease,box-shadow .15s ease}
  .prompt-lib-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(23,23,31,.1)}
  .plc-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;margin:-2px 0 2px;background:#EEE}
  .plc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .plc-name{font-weight:700;font-size:13px;color:var(--os-ink,#17171F)}
  .plc-ratio{font-size:10.5px;color:var(--os-purple,#6D5DF6);background:var(--os-purple-wash,#F1EEFF);padding:2px 7px;border-radius:999px;flex-shrink:0;white-space:nowrap}
  .plc-cat{font-size:10.5px;font-weight:700;color:var(--plc-accent);align-self:flex-start}
  .plc-cat-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .plc-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
  .plc-type{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;flex-shrink:0}
  .plc-type-portrait{background:#FFF0E0;color:#B36B00}
  .plc-type-product{background:#E3F5EA;color:#1B8A4B}
  .plc-type-service{background:#E6F0FF;color:#1D5FBF}
  .plc-type-food{background:#FFE8E0;color:#C0392B}
  .plc-tags{display:flex;flex-wrap:wrap;gap:4px}
  .plc-tag{font-size:10px;background:#EFEDFF;color:var(--os-purple,#6D5DF6);padding:2px 7px;border-radius:999px}
  .pl-mode-toggle{display:flex;gap:8px;margin:14px 0 6px}
  .pl-mode-btn{padding:9px 18px;border-radius:10px;border:1.5px solid var(--os-line,#E5E9F2);background:var(--panel);color:var(--text);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
  .pl-mode-btn.on{border-color:var(--os-purple,#6D5DF6);background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6)}
  .vpl-card{border:1px solid var(--os-line,#E5E9F2);border-top:3px solid var(--plc-accent,var(--os-purple));border-radius:10px;padding:14px;background:#FAFAFC;display:flex;flex-direction:column;gap:6px}
  .vpl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .vpl-slash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:#fff;background:var(--plc-accent,#6D5DF6);padding:2px 8px;border-radius:6px;flex-shrink:0}
  .vpl-name{font-weight:700;font-size:13.5px;color:var(--os-ink,#17171F)}
  .vpl-cat{font-size:10.5px;font-weight:700;color:var(--plc-accent,#6D5DF6)}
  .vpl-desc{font-size:12px;color:var(--muted);line-height:1.4}
  .vpl-copy{margin-top:auto}
  .vpl-copy.done{background:#1B8A4B!important}
  .plc-bestfor{font-size:11px;color:var(--muted);line-height:1.4}
  /* BUG FIX: CSS Grid already stretches every card in a row to the same
     height, but the button's fixed margin-top meant it sat wherever the
     text above it happened to end — a card with a two-line title and a
     long "Best for" ran its button lower than a card with a one-liner,
     even though the cards themselves were the same height. margin-top:
     auto pins it to the bottom of the flex column every time. */
  .plc-use{margin-top:auto;font-size:13.5px!important;font-weight:800!important;padding:12px 16px!important;width:100%;border-radius:10px!important;box-shadow:0 6px 16px rgba(109,93,246,.28);transition:transform .15s ease,box-shadow .15s ease}
  .plc-use:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(109,93,246,.38)}
  .plan-research-list{display:flex;flex-direction:column;gap:6px;margin-top:2px}
  .plan-research-row{display:flex;align-items:center;gap:8px;border:1px solid var(--os-line,#E5E9F2);border-radius:8px;padding:7px 10px;background:#FAFAFC;font-size:12.5px}
  .prr-icon{flex-shrink:0}
  .prr-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--os-ink,#17171F)}
  .prr-remove{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;flex-shrink:0}
  .prr-remove:hover{color:#E0453C}
  .cal-postchip .cpc-img{margin-right:2px}
  .script-editor{min-height:340px !important;width:100%;font-size:15px;line-height:1.7;padding:16px 18px;font-family:'Josefin Sans',sans-serif}
  .cw-copy-row{margin:12px 0 4px}
  .cw-copy-btn{font-size:12px !important;padding:8px 16px !important;cursor:pointer}
  .video-cta{margin-top:16px;padding:18px 20px;border:1px solid var(--os-line,#E5E9F2);border-radius:18px;background:linear-gradient(135deg,var(--os-purple-wash,#F1EEFF),#fff);box-shadow:var(--os-shadow,0 18px 55px rgba(37,43,72,.10))}
  .video-cta-label{font-family:'Josefin Sans',sans-serif;font-size:15px;font-weight:600;color:var(--os-ink,#172033);margin:0 0 4px}
  .video-cta-hint{font-size:12.5px;color:var(--os-muted,#737C91);margin:0 0 14px;line-height:1.5}
  .video-cta-row{display:flex;flex-wrap:wrap;gap:8px}
  .video-tool-btn{font-size:12.5px !important;padding:9px 16px !important;cursor:pointer;border-radius:999px !important;border:1.5px solid var(--os-purple,#6C5CE7) !important;color:var(--os-purple,#6C5CE7) !important;background:#fff !important;font-weight:600 !important;transition:background .15s,color .15s}
  .video-tool-btn:hover{background:var(--os-purple,#6C5CE7) !important;color:#fff !important}
  .editor-overlay{position:fixed;inset:0;z-index:9999;background:rgba(10,10,12,.9);display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
  .editor-modal{background:var(--panel);border:1px solid var(--gold);border-radius:14px;width:96vw;max-width:1200px;height:94vh;display:flex;flex-direction:column;overflow:hidden;position:relative}
  .modal-x-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
    background:var(--panel);border:1px solid var(--gold);color:var(--text);font-size:14px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);
    padding:0;line-height:1;z-index:5}
  .modal-x-close:hover{color:var(--gold);border-color:var(--gold)}
  /* Joslene's "your result is ready, tap the ✕" nudge (see
     joslenseRemindCloseForNext) — a brief pulsing ring around the real
     close button instead of just text saying to close it. */
  @keyframes joslenePointPulse{
    0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 0 rgba(109,93,246,.55)}
    50%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 8px rgba(109,93,246,0)}
  }
  .joslene-point-pulse{animation:joslenePointPulse 1s ease-out 3}
  .editor-head{display:flex;align-items:center;justify-content:space-between;padding:14px 52px 14px 18px;border-bottom:1px solid var(--line)}
  .editor-title{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold-soft)}
  .editor-body{flex:1;display:flex;min-height:0}
  .editor-tools{width:200px;flex-shrink:0;border-right:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
  .editor-tool-btn{font-size:13px !important;padding:10px 12px !important;cursor:pointer;text-align:center}
  .editor-tool-sep{height:1px;background:var(--line);margin:6px 0}
  .editor-ctrls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .editor-ctrl-label{font-family:'Josefin Sans',sans-serif;font-size:12px;color:var(--gold);width:100%}
  .editor-sz{font-size:13px !important;padding:6px 10px !important;cursor:pointer;min-width:34px}
  .editor-del{color:#E23B3B !important}
  .editor-color{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
  .editor-hint{font-size:11.5px;color:var(--muted);line-height:1.5}
  .editor-stage-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;background:#1a1a1e;min-width:0}
  .editor-stage{max-width:100%;max-height:100%;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:move;touch-action:none}
  .editor-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--line)}
  .editor-saved{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1a1a;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500}
  @media(max-width:640px){ .editor-body{flex-direction:column} .editor-tools{width:auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line)} }
  .editor-font-sel{font-size:12px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);max-width:150px}
  /* mobile wizard — hidden on desktop */
  .mobile-wizard{display:none}
  .mobile-step-list{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--panel);border:1px solid var(--os-line,#E5E9F2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.15);z-index:60;overflow:hidden}
  .msl-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:13px 16px;font-family:inherit;font-size:15px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--os-line,#E5E9F2)}
  .msl-item .step-icon{flex:none;display:flex;color:var(--os-muted,#8a8f9c)}
  .msl-item.on .step-icon{color:var(--os-purple,#6D5DF6)}
  .msl-item .step-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
  .msl-item:last-child{border-bottom:0}
  .msl-item.on{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6);font-weight:600}
  .msl-num{width:24px;height:24px;border-radius:50%;background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
  .studio-gallery-picker{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:250;display:flex;align-items:center;justify-content:center;padding:20px}
  .sgp-box{background:var(--panel);border-radius:16px;max-width:720px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
  .sgp-head{padding:16px 20px;font-weight:700;font-size:16px;color:var(--text);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--os-line,#E5E9F2)}
  .sgp-close{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}
  .sgp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:20px;overflow:auto}
  .sgp-cell{border:2px solid var(--os-line,#E5E9F2);border-radius:10px;overflow:hidden;cursor:pointer;background:none;padding:0;aspect-ratio:1;transition:border-color .12s}
  .sgp-cell:hover{border-color:var(--os-purple,#6D5DF6)}
  .sgp-cell img{width:100%;height:100%;object-fit:cover;display:block}
.joslene-welcome-ov{position:fixed;inset:0;background:rgba(20,16,40,.72);z-index:350;display:flex;align-items:center;justify-content:center;padding:20px}
.joslene-welcome-box{background:var(--panel);border-radius:20px;max-width:420px;width:100%;padding:32px 28px 26px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.jw-avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:30px;
  background:linear-gradient(135deg,var(--os-purple),var(--os-purple-2));box-shadow:0 14px 30px rgba(var(--os-purple-rgb),.4)}
.jw-greet{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:19px;color:var(--text);margin-bottom:8px}
.jw-msg{font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:22px}
.jw-actions{display:flex;flex-direction:column;gap:10px}
.jw-actions .btn{width:100%}
  .prev-result-picker{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:250;display:flex;align-items:center;justify-content:center;padding:20px}
  .prp-box{background:var(--panel);border-radius:16px;max-width:640px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
  .prp-head{padding:16px 20px;font-weight:700;font-size:16px;color:var(--text);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--os-line,#E5E9F2)}
  .prp-close{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}
  .prp-list{overflow:auto;padding:8px 0}
  .prp-item{padding:16px 20px;border-bottom:1px solid var(--os-line,#F0F0F0);display:flex;flex-direction:column;gap:8px}
  .prp-item:last-child{border-bottom:0}
  .prp-item-title{font-weight:800;font-size:14.5px;color:var(--text);line-height:1.4}
  .prp-item-body{font-size:12.5px;color:var(--muted);line-height:1.3;background:var(--os-bg,#F7F8FB);border-radius:10px;padding:10px 12px}
  .prp-item-line{padding:3px 0}
  .prp-item-line strong{color:var(--text);font-weight:700}
  .prp-item-btns{display:flex;gap:8px;margin-top:2px}
  .prp-item-btns .btn{font-size:12.5px;padding:7px 16px}
  .prp-use{flex-shrink:0}
  .field-browse-btn{margin-top:8px;font-size:12.5px;padding:8px 14px}
  .comp-lookup-row{display:flex;align-items:center;gap:8px;margin:-6px 0 14px}
  .comp-lookup-btn{font-size:12.5px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px}
  .comp-lookup-stale{font-size:11.5px;color:var(--os-muted,#737C91)}
  .comp-research-box{margin:-6px 0 14px;padding:12px 14px;background:var(--os-purple-wash,#F1EEFF);border:1px solid var(--os-line,#E5E9F2);border-radius:12px}
  .comp-research-badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--os-purple,#6D5DF6);margin-bottom:6px}
  .comp-research-text{font-size:13.5px;line-height:1.55;color:var(--text);white-space:pre-line;margin:0 0 8px}
  .comp-research-sources{display:flex;flex-wrap:wrap;gap:8px}
  .comp-research-sources a{font-size:11.5px;color:var(--os-purple,#6D5DF6);text-decoration:underline;word-break:break-all}
  .comp-research-err{font-size:13px;color:#B23B3B}
  .mobile-wizard{display:none}
  .contact-toggle{display:flex;align-items:flex-start;gap:9px;margin:14px 0;padding:12px 14px;background:var(--os-purple-wash,#F1EEFF);border-radius:10px;cursor:pointer;font-size:13.5px;color:var(--text);line-height:1.4}
  .contact-toggle input{margin-top:2px;width:17px;height:17px;flex-shrink:0;cursor:pointer}
  .field-info-btn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:0;background:var(--os-purple,#6D5DF6);color:#fff;font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:pointer;vertical-align:middle;line-height:1;padding:0}
  .field-info-btn:hover{background:var(--os-ink,#17171F)}
  .field-info-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:260;display:flex;align-items:center;justify-content:center;padding:20px}
  .field-info-box{background:var(--panel);border-radius:16px;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.3)}
  .fi-head{padding:16px 20px;font-weight:700;font-size:16px;color:var(--text);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--os-line,#E5E9F2)}
  .fi-close{background:none;border:0;font-size:19px;cursor:pointer;color:var(--muted)}
  .fi-list{overflow:auto;padding:8px 0}
  .fi-row{padding:11px 20px;border-bottom:1px solid var(--os-line,#F0F0F0)}
  .fi-row:last-child{border-bottom:0}
  .fi-group-head{padding:12px 20px 6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--os-muted,#737C91);background:#FAFAFC;border-bottom:1px solid var(--os-line,#F0F0F0);position:sticky;top:0}
  .fi-group-head:first-child{padding-top:14px}
  .fi-name{font-weight:700;font-size:14px;color:var(--os-purple,#6D5DF6);margin-bottom:3px}
  .fi-desc{font-size:13.5px;color:var(--text);line-height:1.5}
  .cal-page-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:22px}
  .cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .cal-card{text-align:left;background:var(--panel);border:1px solid var(--os-line,#E5E9F2);border-radius:16px;padding:18px;cursor:pointer;transition:all .16s;display:flex;flex-direction:column;gap:4px;min-height:172px;font-family:inherit;position:relative}
  .cal-card:hover{border-color:var(--os-purple-2,#8D7CF5);box-shadow:0 12px 30px rgba(var(--os-purple-rgb),.13);transform:translateY(-3px)}
  .cal-card.is-ready{border-color:var(--os-purple,#6C5CE7);box-shadow:0 0 0 3px rgba(var(--os-purple-rgb),.1),0 12px 30px rgba(var(--os-purple-rgb),.14);background:linear-gradient(180deg,#FBFAFF,#fff)}
  .cal-card.is-done{border-color:#B9B9C3;background:linear-gradient(180deg,#FAFAFC,#fff);opacity:.85}
  .cal-pill{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:10px}
  .cal-planned{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6C5CE7)}
  .cal-cta{margin-top:auto;align-self:flex-start;background:var(--os-purple,#6C5CE7);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .12s;box-shadow:0 4px 12px rgba(var(--os-purple-rgb),.3)}
  .cal-cta:hover{background:#5847d6;transform:translateY(-1px)}
  .cal-ready{background:#E3F5EA;color:#1B8A4B}
  .cal-active{background:#FFF3D6;color:#B8860B}
  .cal-done{background:#E8E8ED;color:#555}
  .cal-month{font-size:20px;font-weight:800;color:var(--os-ink,#172033);letter-spacing:-.01em}
  .cal-theme{font-size:14px;font-weight:700;color:var(--os-ink,#172033);margin-top:1px}
  .cal-desc{font-size:12.5px;color:var(--os-muted,#737C91);line-height:1.45;margin-top:6px}
  .cal-progress{margin-top:auto;padding-top:10px;font-size:11.5px;font-weight:700;color:#16A578}
  .cal-progress.cal-pending{color:#B8860B}
  .cal-daygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:14px 0}
  .cal-dayname{text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 0 10px}
  .cal-daycell{background:var(--panel);border:1px solid var(--os-line,#E5E9F2);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:8px 7px;font-family:inherit;transition:all .12s;position:relative;min-height:88px;overflow:hidden}
  .cal-daycell:hover{border-color:var(--os-purple,#6D5DF6);box-shadow:0 4px 14px rgba(var(--os-purple-rgb),.1)}
  .cal-daycell.cal-blank{background:none;border:0;cursor:default;box-shadow:none}
  .cal-daycell.cal-today{border-color:var(--os-purple,#6C5CE7);box-shadow:0 0 0 2px rgba(var(--os-purple-rgb),.15)}
  .cal-daynum{font-size:13px;font-weight:700;color:var(--os-ink,#17171F)}
  .cal-festival-badge{display:block;width:100%;text-align:left;font-size:9.5px;font-weight:700;line-height:1.3;color:#8a5a00;background:#FFF3D6;border:1px solid #F5DFA0;border-radius:6px;padding:2px 5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .cal-festival-badge:hover{background:#FFE9B3}
  .cal-festival-badge-copy{color:#5b4a9e;background:#EFEBFF;border-color:#D9D0F5}
  .cal-festival-badge-copy:hover{background:#E1D9FF}
  .cal-postchip{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;line-height:1.3;color:var(--os-ink,#33384A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
  .cal-postchip .cpc-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--os-purple,#6D5DF6)}
  .cal-postchip.done{color:var(--muted);text-decoration:line-through}
  .cal-postchip.done .cpc-dot{background:#8FBFA0}
  .cal-postchip.type-video .cpc-dot{background:#3AAFA9}
  .cal-postmore{font-size:9.5px;font-weight:700;color:var(--muted);text-align:left;margin-top:1px}
  .cal-daycell.has-pending{border-color:#E3DDF9}
  .cal-daycell.has-done{border-color:#D6ECDD}
  .cal-daycell.has-note::after{content:"📝";position:absolute;top:4px;right:5px;font-size:9px;opacity:.8}
  .daypop-note-label{font-size:12px;font-weight:700;color:var(--muted);margin:14px 0 6px}
  .daypop-note-input{width:100%;min-height:64px;resize:vertical;border:1px solid var(--os-line,#E5E9F2);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:13.5px;color:var(--os-ink,#33384A);background:var(--panel)}
  .daypop-note-input:focus{outline:none;border-color:var(--os-purple,#6D5DF6)}

  /* ---- Dashboard ---- */
  .dash-resume{margin-bottom:16px}
  .os-command-actions .dash-lang-select{background:#fff;color:var(--os-purple);border:0;border-radius:12px;padding:11px 15px;font-family:inherit;font-weight:750;cursor:pointer;font-size:13px}
  .os-command-actions .dash-lang-select option{color:#1a1a1a}
  .dash-metrics{margin-bottom:16px}
  .dash-reset-card{max-width:480px;margin:0 auto;padding:26px 28px;text-align:center}
  .dash-reset-card h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--os-ink,#172033)}
  .dash-reset-card .step-desc{margin:0 0 18px}
  .dash-caltile{border:0;cursor:pointer;font-family:inherit;text-align:left;width:100%}
  .dash-caltile:hover{border-color:#CFC7FF}
  .dash-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start;max-width:1380px;margin:0 auto}
  @media (max-width:820px){ .dash-cols{grid-template-columns:1fr} }
  .dash-card{background:#fff;border:1px solid var(--os-line,#E5E9F2);border-radius:18px;box-shadow:var(--os-shadow,0 18px 55px rgba(37,43,72,.10))}
  .dash-card-head{padding:16px 18px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .dash-card-head h3{margin:0;font-size:14px;font-weight:800;color:var(--os-ink,#172033);letter-spacing:-.01em}
  .dash-card-head .cap{font-size:11.5px;color:var(--os-muted,#737C91);font-weight:600}
  .dash-empty{margin:0 18px 18px;font-size:12.5px;color:var(--os-muted,#737C91);line-height:1.5}
  .dash-log{list-style:none;margin:0;padding:0 18px 14px}
  .dash-row{display:grid;grid-template-columns:30px 1fr auto;gap:11px;align-items:center;padding:10px 0;border-top:1px solid var(--os-line,#E5E9F2);cursor:pointer}
  .dash-row:first-child{border-top:none}
  .dash-row:hover .title{color:var(--os-purple,#6C5CE7)}
  .dash-row .title{font-size:13px;font-weight:650;color:var(--os-ink,#172033);transition:color .12s}
  .dash-row-delbtn{background:none;border:0;font-size:13px;padding:2px 4px;border-radius:6px;cursor:pointer;opacity:.55;transition:opacity .12s,background .12s;line-height:1}
  .dash-row-delbtn:hover{opacity:1;background:rgba(220,60,60,.1)}
  .pub-icon-btn{position:relative;width:28px;height:28px;flex:0 0 28px;border-radius:50%;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
  .pub-icon-btn:hover{transform:scale(1.08)}
  .pub-icon-btn:disabled{opacity:.5;cursor:default;transform:none}
  .pub-icon-btn.published{opacity:.55}
  .pub-icon-fb{background:#1877F2}
  .pub-icon-ig{background:linear-gradient(45deg,#FFDC80,#FCAF45,#E1306C,#C13584,#833AB4)}
  .pub-icon-wa{background:#25D366}
  .pub-icon-check{position:absolute;bottom:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#2ecc71;color:#fff;font-size:9px;line-height:14px;text-align:center;box-shadow:0 0 0 2px #fff}
  .pub-icon-row{display:flex;gap:6px;align-items:center}
  .dash-daychip{width:30px;height:30px;border-radius:9px;background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6C5CE7);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .status{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
  .status.done{color:#16A578;background:#E4F7EF}
  .status.pending{color:#B8860B;background:#FBF3DF}
  .dash-upnext{list-style:none;margin:0;padding:0 18px 16px;display:flex;flex-direction:column;gap:10px}
  .dash-gallery-card{margin-top:18px}
  .dash-gallery-card .gallery-grid{margin:0 18px 18px}
  .dash-gallery-viewall{background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
  .dash-gallery-viewall:hover{color:var(--os-purple,#6C5CE7)}
  .dash-upnext li{display:flex;align-items:center;gap:11px;cursor:pointer}
  .dash-upnext .day{width:38px;height:38px;border-radius:11px;background:#F8F9FC;border:1px solid var(--os-line,#E5E9F2);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
  .dash-upnext .day b{font-size:13px;line-height:1;color:var(--os-ink,#172033)}
  .dash-upnext .day span{font-size:8.5px;color:var(--os-muted,#737C91);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
  .dash-upnext .txt{font-size:12.5px;font-weight:650;color:var(--os-ink,#172033);line-height:1.35}
  .dash-upnext .txt small{display:block;font-weight:600;color:var(--os-muted,#737C91);font-size:11px;margin-top:1px}
  .daypop-overlay{position:fixed;inset:0;background:rgba(23,32,51,.5);backdrop-filter:blur(4px);z-index:260;display:flex;align-items:center;justify-content:center;padding:18px}
  .daypop-box{background:var(--panel);border-radius:20px;max-width:500px;width:100%;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px rgba(23,32,51,.35);border:1px solid var(--os-line,#E5E9F2)}
  .daypop-head{padding:20px 22px 18px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--os-line,#E5E9F2)}
  .daypop-headtxt{display:flex;flex-direction:column;gap:3px}
  .daypop-kick{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--os-purple,#6C5CE7)}
  .daypop-date{font-weight:800;font-size:20px;color:var(--os-ink,#172033);letter-spacing:-.01em}
  .daypop-close{background:var(--os-purple-wash,#F1EEFF);border:0;width:32px;height:32px;border-radius:9px;font-size:15px;cursor:pointer;color:var(--os-purple,#6C5CE7);flex-shrink:0;transition:all .12s}
  .daypop-close:hover{background:var(--os-purple,#6C5CE7);color:#fff}
  .daypop-body{overflow:auto;padding:18px 22px 22px;display:flex;flex-direction:column;gap:14px}
  .daypop-empty{font-size:13.5px;color:var(--os-muted,#737C91);text-align:center;padding:18px;background:var(--os-bg,#F3F5FA);border-radius:12px}
  .daypop-post{border:1px solid var(--os-line,#E5E9F2);border-radius:14px;padding:16px;background:var(--os-card,#fff);box-shadow:0 2px 8px rgba(37,43,72,.04);margin-bottom:12px}
  .daypop-title-input{width:100%;padding:2px 0;border:0;background:none;color:var(--os-ink,#172033);font-size:16px;font-weight:800;font-family:inherit;box-sizing:border-box}
  .daypop-title-input:focus{outline:none}
  .daypop-title-input::placeholder{color:var(--os-muted,#A7ADBE);font-weight:700}
  .daypop-content-input{width:100%;padding:8px 0 0;border:0;background:none;color:var(--text);font-size:13.5px;line-height:1.55;font-family:inherit;resize:vertical;min-height:52px;box-sizing:border-box}
  .daypop-content-input:focus{outline:none}
  .daypop-remove-link{display:block;margin-top:10px;background:none;border:0;color:var(--os-muted,#A7ADBE);font-size:12px;font-weight:700;cursor:pointer;padding:0;font-family:inherit}
  .daypop-remove-link:hover{color:var(--os-purple,#6C5CE7)}
  .shared-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#F7F8FB;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
  .shared-view-box{max-width:480px;width:100%;background:#fff;border-radius:16px;padding:28px 26px;box-shadow:0 20px 50px rgba(23,32,51,.08)}
  .shared-view-title{font-size:19px;font-weight:800;color:#17171F;margin-bottom:14px;line-height:1.35}
  .shared-view-copy{font-size:14px;line-height:1.6;color:#33384A;white-space:pre-wrap;margin-bottom:18px}
  .shared-view-note{font-size:11.5px;color:#A7ADBE;border-top:1px solid #EEE;padding-top:14px}
  .daypop-add{width:100%;padding:13px;border-radius:12px;border:1.5px dashed var(--os-purple-2,#8D7CF5);background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6C5CE7);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s}
  .daypop-add:hover{background:var(--os-purple,#6C5CE7);color:#fff;border-color:var(--os-purple,#6C5CE7)}
  .cal-uns-head{font-size:15px;font-weight:800;color:#B8860B;margin:20px 0 4px}
  .cal-day-select{border:1px solid var(--os-line,#E5E9F2);border-radius:8px;padding:6px 8px;font-size:13px;font-family:inherit;background:var(--panel);color:var(--text);flex-shrink:0}
  .cal-day-detail{margin:14px 0;padding:16px;background:var(--os-purple-wash,#F1EEFF);border-radius:12px}
  .cal-day-title{font-size:15px;font-weight:800;color:var(--os-ink,#17171F);margin-bottom:10px}
  .cal-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0}
  .cal-status-lbl{font-size:14px;font-weight:800;color:var(--muted)}
  .cal-status-btn{padding:10px 20px;border-radius:22px;border:2px solid var(--os-line,#E5E9F2);background:var(--panel);color:var(--text);font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px}
  .cal-status-btn:hover{border-color:var(--os-purple,#6D5DF6);transform:translateY(-1px)}
  .cal-status-btn .cal-status-check{display:none;font-weight:900}
  .cal-status-btn.on{border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .cal-status-btn.on .cal-status-check{display:inline}
  .cal-status-btn.on.cal-planned{background:var(--os-purple,#6D5DF6)}
  .cal-status-btn.on.cal-ready{background:#1B8A4B}
  .cal-status-btn.on.cal-active{background:#B8860B}
  .cal-status-btn.on.cal-done{background:#3A3A42}
  .cal-status-banner{margin:4px 0 16px;padding:14px 16px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.5;display:flex;align-items:center;gap:10px}
  .cal-status-banner .icon{font-size:20px;flex-shrink:0}
  .cal-status-banner.cal-planned{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6)}
  .cal-status-banner.cal-ready{background:#E3F5EA;color:#1B8A4B}
  .cal-status-banner.cal-active{background:#FFF3D6;color:#8a660d}
  .cal-status-banner.cal-done{background:#ECECF0;color:#3A3A42}
  .cal-gen-wrap{margin:16px 0}
  .cal-track-head{font-size:16px;font-weight:800;color:var(--os-ink,#17171F);margin:24px 0 4px}
  .cal-unsched-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
  .cal-unsched-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid var(--os-line,#E5E9F2);border-radius:10px;background:#FAFAFC}
  .cal-unsched-title{font-size:13.5px;font-weight:600;color:var(--os-ink,#17171F);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cal-unsched-daypick{flex-shrink:0;padding:6px 10px;border-radius:8px;border:1px solid var(--os-line,#E5E9F2);font-family:inherit;font-size:13px;background:#fff;color:var(--os-ink,#17171F)}
  .cal-post-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
  .cal-post-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--os-line,#E5E9F2);border-radius:10px}
  .cal-post-row.done{background:#F3FBF6;border-color:#C8E9D5}
  .cal-post-row.done .cal-post-text{text-decoration:line-through;color:var(--muted)}
  .cal-post-row input[type=checkbox]{width:19px;height:19px;flex-shrink:0;cursor:pointer;accent-color:#1B8A4B}
  .cal-post-text{flex:1;border:0;background:none;font-size:14px;color:var(--text);font-family:inherit;padding:2px}
  .cal-post-text:focus{outline:none}
  .cal-post-del{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;flex-shrink:0;padding:2px 6px}
  .cal-post-del:hover{color:#c0392b}
  .cal-track-summary{margin-top:12px;font-size:13px;font-weight:700;color:#1B8A4B}
  .cal-track-summary.pending{color:#B8860B}
  .cal-detail-title{font-size:22px;font-weight:800;color:var(--os-ink,#17171F);margin:14px 0 4px}
  @media(max-width:900px){ .cal-grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:520px){ .cal-grid{grid-template-columns:1fr} }
  .studio-wrap{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px}
  .studio-stage-col{flex:1 1 300px;min-width:280px}
  .studio-stage-box{background:var(--os-purple-wash,#F1EEFF);border:1px solid var(--os-line,#E5E9F2);border-radius:16px;padding:16px;display:flex;justify-content:center;align-items:flex-start}
  .studio-canvas{border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);cursor:move;touch-action:none;max-width:100%}
  .studio-hint{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}
  .studio-controls{flex:1 1 280px;min-width:260px;display:flex;flex-direction:column;gap:6px}
  .studio-section-lbl{font-size:12px;font-weight:800;color:var(--os-ink,#172033);margin:12px 0 4px;letter-spacing:.02em}
  .studio-btn-row{display:flex;gap:8px;flex-wrap:wrap}
  .studio-pill{padding:9px 16px;border-radius:22px;border:1px solid var(--os-line,#E5E9F2);background:var(--panel);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
  .studio-pill.on{background:var(--os-ink,#17171F);color:#fff;border-color:var(--os-ink,#17171F)}
  .studio-upload-btn{width:100%;padding:12px;border-radius:12px;border:0;background:var(--os-purple,#6D5DF6);color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;font-family:inherit}
  .studio-upload-btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--os-line,#E5E9F2)}
  .studio-field-lbl{font-size:11px;color:var(--muted);margin:8px 0 3px;display:block}
  .studio-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--os-line,#E5E9F2);background:var(--panel);color:var(--text);font-size:14px;font-family:inherit;box-sizing:border-box;resize:vertical}
  .studio-color-row{display:flex;align-items:center;gap:12px}
  .studio-color{width:56px;height:40px;border:1px solid var(--os-line,#E5E9F2);border-radius:8px;cursor:pointer;background:none}
  .studio-hex{font-size:13px;color:var(--muted);font-family:monospace}
  .studio-export{width:100%;padding:15px;border-radius:12px;border:0;background:var(--os-ink,#17171F);color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:16px;font-family:inherit}
  .studio-ctx-row{display:flex;gap:6px;margin-top:6px}
  .studio-ctx-btn{flex:1;padding:8px;border-radius:9px;border:1px solid var(--os-line,#E5E9F2);background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .studio-ctx-btn:hover{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6)}
  .studio-ctx-btn:disabled{opacity:.5;cursor:not-allowed}
  .studio-shadow-row{margin-top:8px;padding:8px 10px;border-radius:9px;border:1px solid var(--os-line,#E5E9F2);background:var(--panel)}
  .studio-shadow-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
  .studio-shadow-toggle input{margin:0;cursor:pointer}
  .studio-shadow-op{display:flex;align-items:center;gap:8px;margin-top:8px}
  .studio-shadow-op span{font-size:11px;color:var(--muted);white-space:nowrap}
  .studio-shadow-op input[type="range"]{flex:1}
  .studio-export:hover{opacity:.9}
  .gen-image-wrap{text-align:center;padding:8px}
  .gen-image{max-width:100%;max-height:70vh;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line)}
  .route-guide{background:var(--gold-wash);border:1px solid #EFE4C4;border-radius:11px;padding:12px 16px;margin:0 0 22px;font-size:13.5px;line-height:1.55;color:#6a5518}
  .route-guide strong{color:var(--gold-deep)}

  /* ---------- video director shot cards ---------- */
  .shot-cards{display:flex;flex-direction:column;gap:14px;margin:14px 0}
  .shot-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
  .shot-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 16px;background:var(--gold-wash);border-bottom:1px solid var(--line)}
  .shot-no{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:17px;color:var(--gold-deep)}
  .shot-copy-btn{font-size:11.5px;padding:6px 14px;flex-shrink:0}
  /* When placed inline in the card body (Video Ideas, right under Pain
     Point) instead of up in the header — needs its own spacing since it's
     no longer inside .shot-card-head's flex/padding. */
  .shot-card > .shot-copy-btn{display:block;margin:12px 16px}
  .shot-row{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .shot-row:last-child{border-bottom:none}
  .shot-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;padding-top:2px}
  .shot-val{font-size:14px;color:var(--text);line-height:1.6}
  @media(max-width:600px){ .shot-row{grid-template-columns:1fr;gap:4px} }
  /* Monthly Plan's per-card Create Image/Create Video buttons — moved in
     from the table's own row-actions cell (see shotCardsFromTable), so
     they need a plain flex row instead of the label/value grid every other
     .shot-row uses. */
  .shot-card-actions{display:flex;flex-wrap:wrap;gap:8px;grid-template-columns:unset}
  .shot-type-badge{margin-left:auto}

  /* ---------- production planner ---------- */
  .focus-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 26px}
  .focus-card{
    border:1.5px solid var(--line);border-radius:14px;padding:20px 14px;cursor:pointer;
    background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:8px;
    transition:all .16s;font-family:'Josefin Sans',sans-serif;
  }
  .focus-card:hover{border-color:var(--gold)}
  .focus-card.on{border-color:var(--gold);background:var(--gold-wash);box-shadow:0 0 0 1px rgba(201,162,39,.2)}
  .fc-emoji{font-size:26px}
  .fc-label{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
  .fc-desc{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:2px;text-align:center}
  .focus-card.on .fc-label{color:var(--gold-deep);font-weight:800}
  /* "How do you want to create it?" mode picker (Quick/Custom/Storyboard/
     Studio) and Monthly Plan's "What are you creating this month?" picker
     (Photo/Video/Photo & Video) — larger, and the same purple as the app's
     primary buttons (--os-purple, e.g. "Generate Image"), distinct from the
     gold used everywhere else (Campaign Focus cards etc.), scoped to these
     two toggles only. */
  .design-mode-toggle .fc-label, .content-mode-toggle .fc-label{font-size:19px}
  .design-mode-toggle .focus-card:hover, .content-mode-toggle .focus-card:hover{border-color:var(--os-purple,#6C5CE7)}
  .design-mode-toggle .focus-card.on, .content-mode-toggle .focus-card.on{border-color:var(--os-purple,#6C5CE7);background:var(--os-purple,#6C5CE7);box-shadow:0 0 0 1px rgba(108,92,231,.2)}
  .design-mode-toggle .focus-card.on .fc-label, .content-mode-toggle .focus-card.on .fc-label, .design-mode-toggle .focus-card.on .fc-desc, .content-mode-toggle .focus-card.on .fc-desc{color:#fff}

  .prod-section{border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;transition:opacity .2s}
  .prod-section.dimmed{opacity:.4;pointer-events:none;filter:grayscale(.4)}
  .prod-head{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:8px}
  .prod-head .pe{font-size:20px}
  .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .prod-fine{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
  .prod-fine summary{font-size:12.5px;letter-spacing:.06em;color:var(--gold-deep);cursor:pointer;font-weight:500;list-style:none;padding:4px 0}
  .prod-fine summary::-webkit-details-marker{display:none}
  .prod-fine summary::before{content:"▸ ";color:var(--gold)}
  .prod-fine[open] summary::before{content:"▾ "}
  .prod-fine .prod-grid{margin-top:12px}
  @media(max-width:640px){ .prod-grid{grid-template-columns:1fr} .focus-toggle{grid-template-columns:1fr} }

  /* Storyboard's Talent Look / Language / 4 include-exclude toggles — per
     explicit request, all 6 in one grid, all the same size. Scoped
     separately from .prod-grid (Monthly Plan's fine-tune grid, which
     already looks right as plain selects with no height-forcing) so this
     doesn't change anything there.
     UPDATE (per explicit feedback: "too big now", wanted as thin as the
     Generate Image button): the earlier 80px min-height was way overbuilt.
     Dropped the forced min-height entirely — the select's own padding is
     tightened instead so its natural height (label + slim input) is close
     to the toggle boxes' own (now also tightened) natural height, without
     forcing either one taller than its content needs. */
  .ugc-opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;margin-bottom:18px}
  .ugc-opts-grid > .field{margin-bottom:0}
  .ugc-opts-grid > .field label{margin-bottom:4px}
  .ugc-opts-grid > .field select{padding:8px 10px}
  .ugc-opts-grid > .contact-toggle{margin:0;padding:8px 12px;gap:12px;align-items:center}
  .ugc-opts-grid > .contact-toggle span{margin-left:2px}
  @media(max-width:640px){ .ugc-opts-grid{grid-template-columns:1fr} }

  /* ---------- copywriter studio ---------- */
  .cw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px;margin:14px 0 4px}
  .cw-plat{
    border:1px solid var(--line);border-radius:12px;padding:13px;cursor:pointer;
    background:var(--panel-2);transition:border-color .15s, background .15s;position:relative;user-select:none;
  }
  .cw-plat:hover{border-color:var(--gold)}
  .cw-plat.on{border-color:var(--gold);background:rgba(201,162,39,.08)}
  .cw-plat.on::after{
    content:"\2713";position:absolute;top:10px;right:11px;width:18px;height:18px;border-radius:50%;
    background:var(--gold);color:#141414;font-size:11px;display:grid;place-items:center;font-weight:600;
  }
  .cw-plat .pname{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:17px;color:var(--gold-soft)}
  .cw-plat .ptag{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:4px}
  .cw-board{display:none;border:1px solid var(--line);border-radius:12px;margin-top:16px;overflow:hidden}
  .cw-board.live{display:block}
  .cw-board-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel-2);
    border-bottom:1px solid var(--line);flex-wrap:wrap}
  .cw-board-head .ttl{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--gold-soft)}
  .cw-board-head .nt{font-size:11.5px;color:var(--muted)}
  .cw-timer{margin-left:auto;font-size:13px;color:var(--gold);letter-spacing:.08em;min-width:44px;text-align:right}
  .cw-lane{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line)}
  .cw-lane:last-child{border-bottom:none}
  .cw-lane .lname{font-size:13px;color:var(--text);width:104px;flex:none}
  .cw-track{flex:1;min-width:100px}
  .cw-stage{font-size:11.5px;color:var(--muted);margin-bottom:5px;min-height:16px}
  .cw-bar{height:4px;background:var(--panel-2);border-radius:99px;overflow:hidden}
  .cw-fill{height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .6s ease}
  .cw-lane.done .cw-fill{background:#3f9d6b}
  .cw-lane.fail .cw-fill{background:#b04a4a}
  .cw-status{font-size:11px;color:var(--muted);width:84px;text-align:right;flex:none}
  .cw-lane.done .cw-status{color:#6fc493}
  .cw-lane.fail .cw-status{color:#d98080}
  .cw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:20px;overflow-x:auto}
  .cw-tab{
    font-family:'Josefin Sans',sans-serif;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
    padding:11px 14px;border:none;background:none;cursor:pointer;color:var(--muted);
    border-bottom:2px solid transparent;white-space:nowrap;
  }
  .cw-tab.on{color:var(--gold);border-bottom-color:var(--gold)}
  .cw-out{border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;padding:18px}
  .cw-remix{display:flex;gap:6px;flex-wrap:wrap;padding-top:14px;margin-top:16px;
    border-top:1px dashed var(--line);align-items:center}
  .cw-remix .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:4px}

  /* ---------- result popup ---------- */
  .res-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
  .res-overlay[hidden]{display:none}
  .res-modal{
    background:var(--panel);border:1px solid var(--gold);border-radius:14px;
    width:96vw;max-width:1400px;height:92vh;display:flex;flex-direction:column;
    box-shadow:0 30px 90px rgba(0,0,0,.65);position:relative;
  }
  .res-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 52px 16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .res-head h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;color:var(--gold-soft)}
  .res-body{flex:1;overflow:auto;padding:20px 22px}
  /* clean document reading view — like Print Preview, inside the app */
  .res-modal.res-doc{max-width:1040px;height:94vh}
  .res-modal.res-doc .res-body{background:#fff;padding:0}
  .res-modal.res-doc .res-body #resText{max-width:960px;margin:0 auto;padding:44px 40px;
    font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.7;color:#1a1a1a}
  .res-modal.res-doc #resText h1,.res-modal.res-doc #resText h2,.res-modal.res-doc #resText h3{
    font-family:'Cormorant Garamond',Georgia,serif;color:#1a1a1a;margin-top:1.2em}
  /* table reads like the printed sheet: black text, roomy rows, sensible column widths */
  .res-modal.res-doc #resText .tbl-wrap{overflow-x:visible}
  .res-modal.res-doc #resText table{border-collapse:collapse;width:100%;min-width:0;margin:18px 0;
    font-family:Georgia,'Times New Roman',serif;font-size:14.5px;table-layout:auto}
  .res-modal.res-doc #resText th,.res-modal.res-doc #resText td{border:1px solid #d8d8d8;
    padding:11px 14px;text-align:left;vertical-align:top;line-height:1.6;color:#1a1a1a;
    letter-spacing:normal;position:static;word-break:normal;overflow-wrap:break-word;hyphens:none}
  .res-modal.res-doc #resText th{background:#f4f5f7;font-family:Georgia,serif;font-weight:700;
    color:#1a1a1a;white-space:nowrap}
  .res-modal.res-doc #resText tbody tr:nth-child(even){background:#fafafa}
  /* wide content column gets the room; short meta columns stay compact */
  .res-modal.res-doc #resText td.col-wide,.res-modal.res-doc #resText th.col-wide{min-width:340px}
  .res-modal.res-doc #resText td.col-narrow,.res-modal.res-doc #resText th.col-narrow{
    min-width:70px;max-width:200px;white-space:normal}
  .res-modal.res-doc #resText p{margin:0.7em 0}
  .res-modal.res-doc .shot-card{margin-bottom:16px}
  .res-body pre{white-space:pre-wrap;font-family:'Josefin Sans',sans-serif;font-weight:300;
    font-size:14px;line-height:1.85;color:var(--text)}
  .md{font-family:'Josefin Sans',sans-serif;font-weight:300;font-size:14px;line-height:1.8;color:var(--text)}
  .md h1,.md h2,.md h3{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--gold-soft);
    margin:22px 0 10px;line-height:1.25}
  .md h1{font-size:24px} .md h2{font-size:21px} .md h3{font-size:18px}
  .md p{margin:0 0 12px}
  .md strong{color:var(--gold-soft);font-weight:500}
  .md em{font-style:italic}
  .md ul,.md ol{margin:0 0 14px 20px} .md li{margin:0 0 6px}
  .md hr{border:none;border-top:1px solid var(--line);margin:20px 0}
  .md blockquote{border-left:2px solid var(--gold);padding:8px 14px;margin:0 0 14px;
    background:var(--panel-2);border-radius:0 8px 8px 0;color:var(--muted)}
  .md code{background:var(--panel-2);padding:2px 6px;border-radius:4px;font-size:13px}
  .res-modal.max{max-width:100%;width:100%;height:100vh;border-radius:0}
  .md .tbl-wrap{overflow-x:auto;margin:0 0 18px;position:relative}
  .tbl-block{margin:0 0 18px}
  .tbl-tools{display:flex;gap:8px;margin:0 0 6px}
  .tbl-copy{
    border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
    font-family:'Josefin Sans',sans-serif;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;padding:5px 10px;border-radius:6px;cursor:pointer;
    transition:border-color .15s,color .15s;
  }
  .tbl-copy:hover{border-color:var(--gold);color:var(--gold)}
  .md{overflow-x:auto}
  /* BUG FIX: this is the rule that was ACTUALLY winning over the .result-full
     table{} tweaks above — .result-full elements always carry the .md class
     too (see resPre.className="md result-full" in the JS), and .md table{}
     has the same specificity but comes later in the stylesheet, so its old
     min-width:900px (plus 320px/180px per-column minimums below) is what
     was really forcing every markdown table — the Campaign Planner result
     included — into horizontal overflow on any column narrower than ~900px.
     Same fix as above: no forced minimums, table shrinks to fit and cell
     text wraps instead. overflow-x:auto above stays only as a safety net. */
  .md table{border-collapse:collapse;width:100%;font-size:14px;table-layout:auto}
  .md th,.md td{border:1px solid var(--line);padding:11px 15px;text-align:left;vertical-align:top;line-height:1.6}
  .md td{word-break:normal;overflow-wrap:break-word;hyphens:none;min-width:min(90px,100%)}
  .md td:not(.col-wide):not(.col-narrow){min-width:min(120px,100%)}
  /* give the wide content columns much more room so text reads in normal lines;
     narrow label columns (day/type/etc) shrink to fit instead of stretching evenly */
  .md td.col-wide,.md th.col-wide{min-width:min(220px,100%);width:auto}
  .md td.col-narrow,.md th.col-narrow{min-width:min(70px,100%);max-width:200px;white-space:normal}
  .md th{background:var(--panel-2);color:var(--gold);font-weight:500;letter-spacing:.04em;
    position:sticky;top:0}
  .md tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
  .res-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
  .spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
    border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:-2px;margin-right:8px}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---------- company modal ---------- */
  .logo-label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin:4px 0 8px}
  .logo-upload{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .logo-prev{width:72px;height:72px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);display:grid;place-items:center;overflow:visible;flex:none;font-size:11px;color:var(--dim);text-align:center;padding:6px;position:relative}
  .logo-prev img{width:100%;height:100%;object-fit:contain}
  .logo-rem-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
  .logo-rem-x:hover{color:var(--gold-deep);border-color:var(--gold)}
  .logo-rem-x[hidden]{display:none}
  .logo-btns{display:flex;gap:8px;flex-wrap:wrap}
  .modal-overlay{
    /* BUG FIX: was z-index:60 - lower than the Calendar day popup (260) and
       the Designer result popup (200), so a modal opened on top of either
       of those (e.g. the Publish-to-Facebook caption editor) rendered
       BEHIND them instead - invisible until the popup underneath was
       closed. Now sits above every other overlay in the app except the
       9999 toast layer. */
    position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:700;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay[hidden]{display:none}
  .modal{
    /* BUG FIX: no position was set here, so .modal-x-close (position:
       absolute) anchored to the nearest POSITIONED ancestor instead -
       .modal-overlay (position:fixed, fills the whole screen) - putting
       the close button near the viewport's corner instead of the card's
       own corner. Affects every modal using this shared class. */
    position:relative;
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
    max-width:680px;width:100%;max-height:90vh;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 30px 90px rgba(26,26,26,.25);
  }
  .modal > h3, .modal > .m-sub{padding:0 clamp(18px,3vw,32px)}
  .modal > h3{padding-top:26px}
  #companyFields{flex:1;overflow-y:auto;padding:14px clamp(18px,3vw,32px) 8px;position:relative}
  /* BUG FIX (reported live, 2026-09-26): was position:absolute inside the
     scrolling field list, which pins it to one spot IN the content (it sat
     on top of the Currency field and scrolled away with it) instead of the
     bottom edge of the visible area. Sticky keeps it at the bottom edge;
     the negative margin stops it adding empty space. The pill itself is
     now clickable (scrolls the form down); the fade stays click-through. */
  .scroll-more-hint{
    position:sticky;left:0;right:0;bottom:-8px;height:38px;margin-top:-38px;pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,0), var(--panel) 65%);
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
    transition:opacity .18s;
  }
  .scroll-more-hint span{
    font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--gold-deep);
    background:var(--panel);border:1px solid var(--line);padding:3px 12px;border-radius:20px;
    box-shadow:0 2px 8px rgba(26,26,26,.08);
    pointer-events:auto;cursor:pointer;
  }
  .scroll-more-hint.is-done{opacity:0}
  .scroll-more-hint.is-done span{pointer-events:none}
  .modal-actions{
    display:flex;gap:12px;flex-wrap:wrap;align-items:center;
    padding:16px clamp(18px,3vw,32px);border-top:1px solid var(--line);
    background:var(--panel);position:sticky;bottom:0;
  }
  /* Account modal (2026-09-19, explicit request): square-ish instead of a
     wide banner, matching the app's own sans-serif OS theme instead of the
     landing page's gold italic serif (the generic .modal h3/.modal h3 span
     rules elsewhere apparently weren't winning here — these are scoped
     directly to #accountModal so there's no cascade ambiguity), and
     everything centered instead of the default left-label/right-button
     rows.
  */
  #accountModal .modal{max-width:400px;text-align:center}
  #accountModal h3, #accountModal h3 span{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-style:normal;font-weight:800;letter-spacing:-.02em;color:var(--os-purple,#6D5DF6);
  }
  #accountModal #accountRow,
  #accountModal #fbConnectRow{
    flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;
  }
  #accountModal .modal-actions{justify-content:center}
  .danger-zone{
    padding:14px clamp(18px,3vw,32px) 18px;border-top:1px dashed #e7cccc;background:var(--panel);
  }
  .danger-zone-label{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b23b3b;margin-bottom:6px}
  .danger-zone-note{font-size:12.5px;color:var(--dim);margin:0 0 10px;line-height:1.5;max-width:480px}
  .btn.danger-btn{
    background:transparent;border:1px solid #e7cccc;color:#b23b3b;
    /* Literally 50% smaller (not just less padding) — scale shrinks the
       actual clickable hit-target along with it, not just how it looks,
       so it's genuinely harder to land a stray tap/click on, not merely
       visually smaller while still full-size underneath. */
    transform:scale(.5);transform-origin:left center;
  }
  .btn.danger-btn:hover{background:#fbf1f1;border-color:#b23b3b}
  .modal h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px}
  .modal h3 span{color:var(--gold);font-style:italic}
  .modal .m-sub{color:var(--muted);font-size:13px;margin:6px 0 20px}
  .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .m-span{grid-column:1 / -1}
  @media (max-width:560px){ .m-grid{grid-template-columns:1fr} }

  /* ---------- quick guide ---------- */
  .guide{margin:0 0 24px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .guide summary{
    cursor:pointer;padding:12px 16px;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);background:var(--panel);
    list-style:none;user-select:none;
  }
  .guide summary::before{content:"\25B8  "}
  .guide[open] summary::before{content:"\25BE  "}
  .guide .g-body{
    padding:16px 18px;color:var(--muted);font-size:13.5px;line-height:1.9;
    background:var(--panel);border-top:1px solid var(--line);
  }
  .guide .g-body strong{color:var(--gold-soft);font-weight:500}

  /* ---------- main panel ---------- */
  .panel{
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
    box-shadow:var(--shadow);overflow:hidden;
    padding:0;
  }
  .panel-inner{padding:26px clamp(18px,4vw,32px) 32px}
  .panel-head-band{padding:24px clamp(18px,4vw,32px) 20px;border-bottom:1px solid var(--line)}
  .panel-eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin-bottom:8px;display:block}
  .panel h2{
    font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;margin:0;
  }
  .panel h2 span{color:var(--gold-deep)}
  .panel h2 span{color:var(--gold);font-style:italic}
  .step-desc{color:var(--muted);font-size:15px;line-height:1.7;margin:8px 0 0;max-width:680px}

  .field{margin-bottom:18px}
  .field label{
    display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);margin-bottom:7px;font-weight:400;
  }
  .field .note{color:var(--dim);text-transform:none;letter-spacing:.03em;font-size:11px;margin-left:8px}
  .field input[type="text"], .field input[type="month"], .field textarea, .field select{
    width:100%;background:var(--panel-2);border:1px solid var(--line);
    color:var(--text);font-family:'Josefin Sans',sans-serif;font-weight:300;
    font-size:14px;padding:12px 14px;border-radius:8px;outline:none;line-height:1.6;
    transition:border-color .2s;
  }
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
  .field textarea{resize:vertical;min-height:80px}
  /* "What is this content about?" (Write Captions step) — was the same generic
     80px as every other textarea, too cramped for describing a full video or
     poster plus an offer and contact details all in one go. */
  #f_adContext{min-height:170px}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{
    border:1px solid var(--line);border-radius:20px;padding:8px 14px;
    font-family:'Josefin Sans',sans-serif;font-size:12.5px;font-weight:300;
    color:var(--muted);cursor:pointer;background:var(--panel-2);
    transition:border-color .15s,color .15s,background .15s;
  }
  .chip.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.10)}

  details.script-view{
    margin:8px 0 24px;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  }
  details.script-view summary{
    cursor:pointer;padding:12px 16px;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);background:var(--panel-2);
    list-style:none;user-select:none;
  }
  details.script-view summary::before{content:"▸ ";color:var(--gold)}
  details.script-view[open] summary::before{content:"▾ "}
  details.script-view pre{
    white-space:pre-wrap;font-family:'Josefin Sans',sans-serif;font-size:13px;
    color:var(--muted);padding:16px 18px;line-height:1.7;border-top:1px solid var(--line);
  }

  .assemble-row{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
  /* Real visual gap between Storyboard's own "Generate AI"/"Regenerate
     Shot List" buttons and the step's main "Generate Image" button right
     below them — see the mis-click bug fix at genImageBtn's own creation
     site. */
  .gen-image-divider{border:none;border-top:1px solid var(--line);margin:28px 0 22px}
  .img-field-del{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);color:#b23b3b;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0;font-family:Arial,sans-serif}
  .output-box{
    display:none;
  }
  .output-box.show{display:block}
  .output-box textarea{
    width:100%;min-height:260px;background:var(--panel-2);border:1px solid var(--gold);
    border-radius:8px;color:var(--text);font-family:'Josefin Sans',sans-serif;
    font-weight:300;font-size:13px;padding:16px;line-height:1.7;resize:vertical;outline:none;
  }
  .output-label{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
    margin:20px 0 8px;
  }
  .copied-toast{
    display:inline-block;color:var(--gold-soft);font-size:13px;margin-left:6px;
    opacity:0;transition:opacity .3s;
  }
  .copied-toast.show{opacity:1}

  .field-error-flash{
    animation:field-error-pulse 2.2s ease;
    border-color:#D64545 !important;
    box-shadow:0 0 0 3px rgba(214,69,69,.18) !important;
  }
  @keyframes field-error-pulse{
    0%,100%{ border-color:#D64545; box-shadow:0 0 0 3px rgba(214,69,69,.18); }
    50%{ border-color:#D64545; box-shadow:0 0 0 5px rgba(214,69,69,.28); }
  }

  .flow-note{
    border-left:2px solid var(--gold);padding:10px 16px;margin:24px 0 0;
    color:var(--muted);font-size:13px;line-height:1.7;background:var(--panel-2);
    border-radius:0 8px 8px 0;
  }
  .flow-note strong{color:var(--gold-soft);font-weight:500}

  .footer-banner{display:none}
  .build{color:var(--dim);font-size:10px;letter-spacing:.25em;text-transform:uppercase;margin-top:10px}
  footer{
    text-align:center;padding:48px 20px 60px;border-top:1px solid var(--line);margin-top:40px;
  }
  .foot-logo{height:130px;width:auto;object-fit:contain}
  .foot-by{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:12px}
  .build{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);margin-top:14px}
  footer .mark{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;
    color:var(--gold);letter-spacing:.08em;text-transform:none;margin-bottom:8px}

  /* ---------- contact sheet ---------- */
  .sheet-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:8px}
  .sheet-meta{color:var(--muted);font-size:13px;line-height:1.6}
  .sheet-block{
    border:1px solid var(--line);border-radius:10px;margin:18px 0;overflow:hidden;
  }
  .sheet-block .sb-title{
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    background:var(--panel-2);padding:12px 16px;border-bottom:1px solid var(--line);
  }
  .sheet-block .sb-title h3{
    font-family:'Cormorant Garamond',serif;font-weight:500;font-size:19px;color:var(--gold-soft);
  }
  .sheet-block .sb-title .when{font-size:14px;color:var(--dim);letter-spacing:.05em}
  .sb-goal{margin:10px 16px 0;font-size:12.5px;color:var(--muted)}
  .sb-step-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 16px 4px}
  .sb-step-chip{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
  .sb-step-chip.done{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-wash)}
  /* Compact square History tiles (photo-grid style) - each tile IS the
     square (not just its thumbnail), with info overlaid on the photo
     instead of stacked below it, so more fit on screen at once. Renamed
     away from "hist-card" to "histsnap-*" - that name is a different,
     unrelated feature elsewhere (see the note near .prod-section above). */
  .hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:18px 0}
  .histsnap-tile{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--panel-2);cursor:pointer;transition:transform .12s}
  .histsnap-tile:hover{transform:scale(1.03)}
  .hist-card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .hist-card-photo-empty{display:flex;align-items:center;justify-content:center;font-size:48px;opacity:.35}
  .hist-card-badges{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:1}
  .hist-card-badge{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .hist-card-badge svg{width:13px;height:13px}
  .hist-card-stepsbadge{position:absolute;top:10px;left:10px;z-index:1;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:3px 9px;border-radius:999px;letter-spacing:.02em}
  .hist-card-scrim{position:absolute;left:0;right:0;bottom:0;padding:36px 10px 10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;display:flex;align-items:flex-end;gap:8px}
  .histsnap-textwrap{flex:1;min-width:0}
  .histsnap-title{font-size:15px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .histsnap-when{font-size:12px;opacity:.85;margin-top:2px}
  .histsnap-delbtn{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;margin-bottom:1px}
  .histsnap-delbtn:hover{background:rgba(220,60,60,.6)}
  /* Detail modal versions - same info, normal (dark-on-light) styling since
     these sit inside a plain white modal, not overlaid on a photo. */
  .hist-card-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:18px;color:var(--gold-soft);margin:0}
  .hist-card-when{font-size:12px;color:var(--dim);letter-spacing:.04em}
  .hist-card-steps{margin:6px 0 0;font-size:12px;color:var(--muted)}
  .sheet-block pre{
    white-space:pre-wrap;font-family:'Josefin Sans',sans-serif;font-weight:300;
    font-size:13px;color:var(--text);padding:16px 18px;line-height:1.75;
  }
  .sheet-empty{
    color:var(--dim);font-size:13px;border:1px dashed var(--line);border-radius:10px;
    padding:22px;text-align:center;margin:18px 0;
  }

  @media print{
    body{background:#fff;color:#000}
    header,.profile-bar,.hint,.pipeline,footer,.no-print{display:none !important}
    .wrap{padding:0;max-width:100%}
    .panel{border:none;background:#fff;padding:0;color:#000}
    .panel h2{color:#000}
    .panel h2 span{color:#000}
    .step-desc,.sheet-meta{color:#333}
    .sheet-block{border:1px solid #999;break-inside:avoid;page-break-inside:avoid;background:#fff}
    .sheet-block .sb-title{background:#f2f2f2;border-bottom:1px solid #999}
    .sheet-block .sb-title h3{color:#000}
    .sheet-block .sb-title .when{color:#555}
    .sheet-block pre{color:#000}
  }

  @media (max-width:820px){
    .pipeline{grid-template-columns:repeat(3,1fr)}
    .two-col{grid-template-columns:1fr}
  }
  @media (max-width:480px){
    .pipeline{grid-template-columns:repeat(3,1fr)}
    .step-tab{padding:10px 8px}
    .step-tab .name{font-size:11px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
  }


/* ============================================================
   AI EMPLOYEE OS — FRONTEND LAYOUT OVERRIDE
   Presentation layer only. Existing IDs, JavaScript and backend
   integration remain unchanged.
   ============================================================ */
:root{
  --os-bg:#F3F5FA;
  --os-card:#FFFFFF;
  --os-ink:#172033;
  --os-muted:#737C91;
  --os-line:#E5E9F2;
  --os-purple:#6C5CE7;
  --os-purple-2:#8D7CF5;
  --os-purple-wash:#F1EEFF;
  --os-purple-rgb:108,92,231;
  --os-purple-hover:#5949D5;
  --os-green:#16A578;
  --os-shadow:0 18px 55px rgba(37,43,72,.10);
  --os-radius:20px;
}
/* User-selectable color theme (see themeSwitch in the sidebar + applyColorTheme()
   near the bottom of the script). Overrides both this newer "os-" token set
   AND the older gold/serif token set (:root at the very top of this file) so
   the whole app re-colors consistently, not just the dashboard shell.
   html[data-color-theme] beats a bare :root on specificity, so this always
   wins regardless of source order. */
body{
  background:
    radial-gradient(circle at 82% 0%,rgba(var(--os-purple-rgb),.10),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(22,165,120,.07),transparent 24%),
    var(--os-bg);
  color:var(--os-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:0;
}
/* Top nav (2026-09-17): Home/Dashboard/New Campaign/Calendar/History/
   Gallery/Prompt Library moved out of the sidebar into one horizontal
   row spanning the full page width, so the sidebar goes back to being
   purely "where am I in this campaign" instead of 14 stacked rows.
   Fixed at all widths (mirrors .site-head's own fixed sidebar), so
   .site-head/.wrap/footer below all get pushed down by --topbar-h. */
:root{ --topbar-h:68px; }
.app-topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:120;
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--os-line);
  transition:transform .18s ease;
}
/* Brand zone matches the sidebar's own 252px width exactly, so the
   wordmark sits directly above it — a clean vertical seam instead of the
   nav row starting flush against the logo. */
.app-topbar-brand{width:252px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;border-right:1px solid var(--os-line)}
.topbar-logo{height:52px;width:auto;max-width:100%;object-fit:contain}
/* Home (2026-09-19): lives in the brand column next to the logo, its own
   compact icon-only button — same hover/active treatment as a nav-util
   tab (.app-topbar .nav-utils .nav-util below) so it still reads as part
   of the same navigation system, just relocated. */
.topbar-home-btn{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;background:none;border:0;border-radius:10px;
  color:var(--os-muted);cursor:pointer;transition:all .12s;
}
.topbar-home-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.topbar-home-btn:hover,.topbar-home-btn.active{background:var(--os-purple-wash);color:var(--os-purple)}
/* Center zone is everything right of the brand strip — i.e. exactly the
   same width as the content/hero area below it — so centering the nav
   row here lines it up with the hero, not the page as a whole. */
.app-topbar-center{flex:1;display:flex;align-items:center;justify-content:center;padding:0 20px;overflow-x:auto;min-width:0}
.app-topbar .nav-utils{display:flex;flex-direction:row;gap:6px;margin:0;padding:0;flex:none}
.app-topbar .nav-utils .nav-util{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  white-space:nowrap;background:none;border:0;border-radius:12px;
  padding:7px 15px;font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.02em;color:var(--os-muted);cursor:pointer;transition:all .12s;
}
.app-topbar .nav-utils .nav-util svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.app-topbar .nav-utils .nav-util:hover{background:var(--os-purple-wash);color:var(--os-purple)}
.app-topbar .nav-utils .nav-util.active{background:var(--os-purple-wash);color:var(--os-purple)}
/* Hide alongside the sidebar during fullscreen editor/calendar focus
   modes (body.ss-fs/.cal-fs — see .site-head's own peek rules below) so
   the top bar doesn't eat vertical space while those views are trying to
   remove chrome, and bring it back together with the sidebar's own peek. */
body.ss-fs .app-topbar,body.cal-fs .app-topbar{transform:translateY(-100%)}
body.ss-fs.ss-fs-peek .app-topbar,body.cal-fs.cal-fs-peek .app-topbar{transform:translateY(0)}
.site-head{
  position:fixed;inset:0 auto 0 0;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));width:252px;z-index:100;
  border:0;border-right:1px solid var(--os-line);
  background:rgba(255,255,255,.88);backdrop-filter:blur(20px);
  box-shadow:none;
  /* BUG FIX: a fixed-position element with backdrop-filter is a known
     Chromium repaint glitch during scroll — the browser sometimes fails to
     composite it on its own GPU layer, causing a visible split/flash where
     the sidebar briefly appears to redraw mid-scroll (reported as the
     calendar and sidebar "quick flipping" while scrolling). Forcing its own
     compositing layer fixes it. */
  transform:translateZ(0);
  will-change:transform;
}
.head-wrap{
  height:100%;padding:26px 18px;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;gap:22px;
}
.brand-lock{padding:2px 8px 20px;border-bottom:1px solid var(--os-line)}
.brand-lock .wordmark{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em;padding:0;color:var(--os-ink)}
.brand-lock .wordmark::after{display:none}
.brand-lock .wordmark .ai{color:var(--os-purple)}
.brand-lock .by{margin-top:7px;font-size:10px;letter-spacing:.12em;color:var(--os-muted)}
.brand-lock::after{content:'Marketing Studio';display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--os-ink)}
/* Pinned to the bottom of the sidebar (head-wrap is a flex column;
   margin-top:auto pushes this section down regardless of how many
   pipeline steps are listed above it) instead of crowding the logo. */
.sidebar-theme{margin-top:auto;padding-top:14px;border-top:1px solid var(--os-line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.sidebar-theme-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--os-muted)}
.theme-switch{display:flex;gap:6px}
.theme-swatch{width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;position:relative;box-shadow:0 0 0 1px var(--os-line) inset}
.theme-swatch[data-theme="default"]{background:linear-gradient(135deg,#6C5CE7,#8D7CF5)}
.theme-swatch[data-theme="midnight"]{background:radial-gradient(circle at 70% 25%,#6A55F0,#141425 62%,#0B0B11)}
.theme-swatch.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--os-purple)}
.nav-utils{display:flex;flex-direction:column;gap:7px;margin:12px 0 18px;padding:0}
.site-head .nav-utils .nav-util{display:block;text-align:center;background:var(--os-purple-wash);border:0;border-radius:12px;padding:11px 18px;font-family:'Josefin Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--os-purple);cursor:pointer;transition:all .12s;width:100%;box-shadow:none}
.site-head .nav-utils .nav-util:hover{background:var(--os-purple);color:#fff}
.site-head .nav-utils .nav-util.active{background:var(--os-purple);color:#fff}
.nav-util-lbl{display:inline}
.nav-steps-label{margin:2px 4px 10px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--os-muted)}
.head-nav{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}
.head-nav .btn,.head-nav button,.menu-btn{
  width:100%;text-align:left;border:0!important;box-shadow:none!important;
  border-radius:13px!important;padding:12px 14px!important;background:transparent!important;
  color:var(--os-muted)!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;
  font-size:13px!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important;
}
.head-nav .btn:hover,.head-nav button:hover,.menu-btn:hover{background:var(--os-purple-wash)!important;color:var(--os-purple)!important}
.wrap{max-width:none;margin:0 0 0 252px;padding:calc(28px + var(--topbar-h)) 30px 40px;min-width:0;overflow-x:hidden;box-sizing:border-box}
.os-command{
  max-width:1380px;margin:0 auto 22px;padding:28px;border-radius:26px;color:#fff;
  background:linear-gradient(135deg,var(--os-purple),var(--os-purple-2));box-shadow:0 22px 60px rgba(var(--os-purple-rgb),.24);
  position:relative;overflow:hidden;
}
.os-command::after{content:'';position:absolute;width:260px;height:260px;border:42px solid rgba(255,255,255,.10);border-radius:50%;right:-70px;bottom:-120px}
.os-command-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:relative;z-index:1}
.os-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:9px}
.os-command h2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:clamp(25px,3vw,38px);letter-spacing:-.035em;margin:0 0 10px;line-height:1.08}
.os-command p{max-width:700px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.82);margin:0}
.os-live{white-space:nowrap;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.13);border-radius:999px;padding:9px 13px;font-size:12px;font-weight:750}
.os-live::before{content:'●';color:#7DF2C5;margin-right:7px}
.os-command-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:1}
.os-command-actions button{border:0;border-radius:12px;padding:11px 15px;font-weight:750;cursor:pointer}
.os-command-actions .os-primary{background:#fff;color:var(--os-purple)}
.os-command-actions .os-secondary{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.22)}
.os-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;max-width:1380px;margin:0 auto 22px}
.os-metric{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:17px 18px;box-shadow:var(--os-shadow);display:flex;align-items:center;justify-content:space-between;gap:12px}
.os-metric strong{font-size:26px;letter-spacing:-.04em;display:block}
.os-metric span{font-size:12px;color:var(--os-muted)}
.os-metric i{font-style:normal;width:43px;height:43px;border-radius:14px;background:var(--os-purple-wash);display:grid;place-items:center;font-size:20px}
.dash-profile-strip{max-width:1380px;margin:-8px auto 22px;padding:11px 14px 11px 18px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--os-line);border-radius:16px;box-shadow:var(--os-shadow);flex-wrap:wrap}
.dash-profile-strip .pmark{width:32px;height:32px;font-size:12px;border-radius:10px}
.dash-profile-strip .pname{font-size:13.5px}
.dash-profile-cb{margin-left:auto;border:0;border-radius:10px;background:var(--os-purple-wash);color:var(--os-purple);font-family:inherit;font-weight:750;font-size:12px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.dash-profile-cb:hover{background:#E5E0FF}
/* BUG FIX (2026-09-16): margin-left:auto on .dash-profile-cb correctly
   pushed the ONE original button (Company Brain) away from the business
   name, but now that a second button (Account) shares the same class,
   each one independently claims "push me right", splitting them apart
   with a big gap instead of sitting together as one group. Only the
   FIRST .dash-profile-cb in the strip should carry the auto-margin —
   any that immediately follow another one sit flush next to it instead. */
.dash-profile-cb + .dash-profile-cb{margin-left:0}
.dash-profile-lang-select{border:1px solid var(--os-line);border-radius:10px;background:#F8F9FC;color:var(--os-ink);font-family:inherit;font-weight:700;font-size:12px;padding:9px 12px;cursor:pointer}
.hero{max-width:1380px;margin:0 auto 20px;padding:22px 24px;text-align:left;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:var(--os-shadow)}
.hero-logo{margin:0 0 12px}
.hero .eyebrow{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--os-purple);font-size:10px;font-weight:800;letter-spacing:.15em;margin-bottom:8px}
.hero h2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.035em;max-width:none;margin:0 0 8px;color:var(--os-ink)}
.hero h2 em{color:var(--os-purple);font-style:normal}
.hero .sub{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14px;max-width:780px;margin:0;color:var(--os-muted)}
.profile-bar{max-width:1380px;margin:0 auto 20px;border:1px solid rgba(255,255,255,.95);border-radius:18px;padding:16px 18px;background:rgba(255,255,255,.88);box-shadow:var(--os-shadow)}
.pmark{background:var(--os-purple-wash);color:var(--os-purple);border-radius:13px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.pname{font-weight:750}.pline{color:var(--os-muted)}
.lang-select,.profile-bar select,.profile-bar input[type=text]{border-color:var(--os-line);background:#F8F9FC;border-radius:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.btn{background:var(--os-purple);border-color:var(--os-purple);color:#fff;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:750;font-size:12px;letter-spacing:0;text-transform:none;box-shadow:none;padding:10px 15px}
.btn:hover,.btn:focus-visible{background:var(--os-purple-hover);color:#fff;border-color:var(--os-purple-hover)}
.btn.ghost{background:#F5F4FF;border-color:#E5E0FF;color:var(--os-purple)}
.btn.ghost:hover{background:var(--os-purple-wash);border-color:#D7D0FF;color:var(--os-purple)}
.section-label{max-width:1380px;margin:5px auto 12px;font-size:11px;color:var(--os-muted);font-weight:800;letter-spacing:.13em}
.pipeline{max-width:1380px;margin:0 auto 22px;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step-tab{border:1px solid var(--os-line);border-radius:17px;padding:15px;background:rgba(255,255,255,.9);box-shadow:0 8px 28px rgba(37,43,72,.06);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;min-height:104px}
.step-tab:hover{border-color:#CFC7FF;box-shadow:0 13px 32px rgba(37,43,72,.10);transform:translateY(-2px)}
.step-tab.active{background:linear-gradient(145deg,#F5F2FF,#FFFFFF);border-color:var(--os-purple);box-shadow:0 0 0 3px rgba(var(--os-purple-rgb),.08),0 14px 34px rgba(37,43,72,.09)}
.step-tab::before{height:3px;background:linear-gradient(90deg,var(--os-purple),var(--os-purple-2))}
.step-tab.active::after{background:var(--os-green)}
.step-tab .num{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:none;color:var(--os-purple);font-size:12px;font-style:normal;font-weight:850;opacity:1;letter-spacing:.08em}
.step-tab .name{font-size:13px;font-weight:750;color:var(--os-ink);letter-spacing:0;margin-top:10px}
.step-tab .tag,.path-hint{font-size:9px;color:var(--os-muted);letter-spacing:.08em}
.guide{max-width:1380px;margin:0 auto 20px;border:1px solid var(--os-line);border-radius:16px;background:rgba(255,255,255,.8)}
.guide summary{background:transparent;color:var(--os-purple);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:750;letter-spacing:0;text-transform:none;font-size:13px;padding:14px 17px}
.guide .g-body{background:#FAFAFD;border-color:var(--os-line);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--os-muted)}
.guide .g-body strong{color:var(--os-ink)}
.panel{max-width:1380px;margin:0 auto;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:var(--os-shadow)}
.panel-head-band{padding:24px 28px 20px;border-color:var(--os-line);background:linear-gradient(180deg,#FFFFFF,#FCFCFE)}
.panel-eyebrow{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--os-purple);font-weight:800;letter-spacing:.12em}
.panel h2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.panel h2 span{color:var(--os-purple);font-style:normal}
.step-desc{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--os-muted);font-size:14px}
.panel-inner{padding:25px 28px 32px}
.field label{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#4E5870;font-size:10px;font-weight:800;letter-spacing:.11em}
.field input[type=text],.field input[type=month],.field textarea,.field select,.script-editor{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#F8F9FC;border-color:var(--os-line);border-radius:12px;color:var(--os-ink)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--os-purple);box-shadow:0 0 0 4px rgba(var(--os-purple-rgb),.08)}
.chip{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;border-color:var(--os-line);background:#F8F9FC;border-radius:999px;color:var(--os-muted)}
.chip.on{border-color:#CFC7FF;background:var(--os-purple-wash);color:var(--os-purple)}
.route-guide,.field-note-important,.s2-carry,.amend-box{background:#F5F2FF;border-color:#DED8FF;color:#5F50A8}
.prod-section,.shot-card,.cw-board,.sheet-block,.hist-card{border-color:var(--os-line);border-radius:16px;background:#fff}
/* .hist-card above is a pre-existing, unrelated feature's class (a
   different snapshot-picker elsewhere) - the History page's own tiles
   below use .histsnap-tile specifically so a redesign here never touches
   that other feature's look. */
.prod-head,.gallery-head,.shot-no,.cw-plat .pname,.cw-board-head .ttl,.hist-title,.soon-name{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--os-ink);font-weight:800}
.focus-card,.cw-plat,.text-choice-btn{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;border-color:var(--os-line);border-radius:15px;background:#FAFAFC}
.focus-card.on,.cw-plat.on,.text-choice-btn.on{border-color:var(--os-purple);background:var(--os-purple-wash);color:var(--os-purple)}
.shot-card-head,.cw-board-head{background:#F7F6FF;border-color:var(--os-line)}
.cw-fill{background:var(--os-purple)}
.result-box pre,.output-box textarea,.content-box{background:#F8F9FC;border-color:var(--os-line);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.modal-overlay,.res-overlay,.menu-overlay{backdrop-filter:blur(7px)}
.modal,.res-modal,.menu-modal{border-color:var(--os-line);border-radius:22px;box-shadow:0 35px 100px rgba(20,24,42,.28)}
.modal h3,.res-head h3,.menu-head h3{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:-.02em}
.modal h3 span,.md strong{color:var(--os-purple)}
/* BUG FIX (confirmed via real screenshots): AI result TITLES (Monthly
   Plan, Audience Research, etc. — anything rendered via mdToHtmlResult()
   into a plain .md box) were rendering in purple/blue, while Storyboard's
   own inline Shot List box (a DIFFERENT container, .shotlist-inline-box,
   which was never .md-classed and so never picked up this rule at all)
   rendered its title in dark/near-black (var(--text), inherited from that
   box's own base color). Per explicit request: every AI result title
   should look the same as Shot List's already did — dark, not purple.
   Was one shared rule with .md strong/.modal h3 span above; split out so
   only the heading color changes, leaving inline emphasis text and modal
   headers on their existing purple accent. */
.md h1,.md h2,.md h3{color:var(--text)}
.res-head,.menu-head,.modal-actions,.res-foot{border-color:var(--os-line);background:#fff}
.menu-sidebar{background:#F8F9FC;border-color:var(--os-line)}
.menu-navitem{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.menu-navitem.on{background:var(--os-purple-wash);color:var(--os-purple)}
footer{margin-left:252px;border:0;padding:32px 20px 44px;color:var(--os-muted)}
.foot-mark{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.foot-mark span,.foot-meaning{color:var(--os-purple)}
@media(max-width:1100px){
 .os-metrics{grid-template-columns:repeat(2,1fr)}
 .pipeline{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
 /* .app-topbar stays position:fixed at every width (see its own rule
    above) but .site-head drops out of fixed positioning below — nothing
    then reserves space for the fixed topbar in normal flow, so push the
    whole in-flow chrome down by its height here instead. */
 body:not(.landing-mode){padding-top:var(--topbar-h)}
 .app-topbar-brand{width:auto;padding:0 16px;border-right:0}
 .app-topbar-center{padding:0 10px 0 0;justify-content:flex-start}
 .topbar-logo{height:39px}
 .foot-logo{height:88px}
 .app-topbar .nav-utils .nav-util{padding:6px 10px;font-size:10px}
 .app-topbar .nav-utils .nav-util svg{width:17px;height:17px}
 .site-head{position:sticky;inset:auto;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--os-line)}
 .head-wrap{height:auto;padding:14px 16px;flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
 .brand-lock{padding:0;border:0}.brand-lock::after{display:none}
 .head-nav{width:auto;flex-direction:row;overflow-x:auto}.head-nav .btn,.head-nav button,.menu-btn{width:auto;white-space:nowrap;padding:9px 11px!important}
 .sidebar-theme{order:4;margin-top:0;padding-top:0;border-top:0;width:auto}
 .wrap{margin-left:0;padding:18px 16px 30px}.os-command-top{flex-direction:column}.os-live{align-self:flex-start}
 footer{margin-left:0}
  .site-head .brand-lock{flex:1;min-width:0}
  .nav-steps-label{display:none!important}
  .nav-utils{flex-direction:row!important;gap:8px!important;margin:10px 0 12px!important}
  .site-head .nav-utils .nav-util{font-size:11px!important;padding:10px 17px!important}
  /* keep the pipeline container visible so nav-utils (New Campaign/History/Images/Calendar) show, but hide the step tabs (the wizard replaces them) */
  .pipeline{display:block!important;overflow:visible!important}
  .pipeline .step-tab{display:none!important}
  .nav-steps-label{display:none!important}
  .site-head .nav-utils{display:flex!important;flex-wrap:wrap!important;flex-direction:row!important;gap:8px!important;margin:10px 0 4px!important;height:auto!important}
  .site-head .nav-utils .nav-util{flex:0 0 auto!important;width:auto!important}
  .mobile-wizard{display:block;position:sticky;top:0;z-index:40;background:var(--panel);border:1px solid var(--os-line,#E5E9F2);border-radius:14px;padding:12px 14px;margin:0 0 16px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
  .mw-info{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:10px}
  .mw-prog{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--os-purple,#6D5DF6);background:var(--os-purple-wash,#F1EEFF);padding:3px 9px;border-radius:20px}
  .mw-name{font-size:16px;font-weight:700;color:var(--os-ink,#172033);flex:1}
  .mw-chev{color:var(--muted);font-size:13px}
  .mw-btns{display:flex;gap:10px}
  .mw-btn{flex:1;padding:13px;border-radius:11px;border:0;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
  .mw-back{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6)}
  .mw-next{background:var(--os-ink,#17171F);color:#fff}
  .mw-btn:disabled{opacity:.35;cursor:default}
  .mw-list{display:none;flex-direction:column;gap:2px;margin-top:10px;border-top:1px solid var(--os-line,#E5E9F2);padding-top:10px}
  .mw-list.open{display:flex}
  .mw-list-item{text-align:left;background:none;border:0;padding:11px 12px;border-radius:9px;font-size:14px;color:var(--text);cursor:pointer;font-family:inherit}
  .mw-list-item.on{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6);font-weight:600}
  .pipeline .step-tab{flex:0 0 auto!important;min-height:auto!important;min-width:0!important;flex-direction:row!important;align-items:center;gap:7px;padding:8px 12px!important;white-space:nowrap;display:flex!important}
  .pipeline .step-tab .name{font-size:12px!important}
  .pipeline .step-tab .tag,.pipeline .step-tab .path-hint{display:none!important}
  /* On mobile use the wizard bar instead of the step strip (this rule wins over the .pipeline/.step-tab
     rules above, since it comes later in the cascade at equal specificity) */
  .pipeline .step-tab{display:none!important}
  .mobile-wizard{display:flex!important;align-items:stretch;gap:8px;position:relative;margin:0 0 18px;background:var(--panel);border:1px solid var(--os-line,#E5E9F2);border-radius:14px;padding:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
  .mw-btn{flex:0 0 auto;border:0;background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6D5DF6);border-radius:10px;padding:0 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
  .mw-btn:disabled{opacity:.35;cursor:default}
  .mw-mid{flex:1;border:0;background:none;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px}
  .mw-count{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .mw-name{font-size:15px;font-weight:700;color:var(--os-purple,#6D5DF6)}
  .mw-next{background:var(--os-purple,#6D5DF6);color:#fff}
}
@media(max-width:560px){
 .os-command{padding:22px}.os-metrics{grid-template-columns:1fr 1fr}.os-metric{padding:14px}.os-metric strong{font-size:22px}
 .pipeline{grid-template-columns:1fr 1fr}.profile-bar{align-items:flex-start}.pbar-actions{width:100%;margin-left:0}
 .lang-select{flex:1}.panel-head-band,.panel-inner{padding-left:18px;padding-right:18px}
}

/* ---------- campaign departments inside OS sidebar ---------- */
.site-head{overflow:hidden}
.head-wrap{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#D9D4F6 transparent}
.sidebar-steps-label{
  margin:2px 9px 2px;font-size:10px;font-weight:850;letter-spacing:.13em;
  text-transform:uppercase;color:var(--os-muted)
}
.site-head .sidebar-pipeline{
  display:flex;flex-direction:column;gap:7px;width:100%;margin:0;padding:0;
  max-width:none;grid-template-columns:none
}
.site-head .sidebar-pipeline .step-tab{
  min-height:0;width:100%;padding:11px 12px;border-radius:13px;box-shadow:none;
  display:grid;grid-template-columns:31px minmax(0,1fr) 9px;column-gap:8px;
  align-items:center;text-align:left;background:transparent;border:1px solid transparent
}
.site-head .sidebar-pipeline .step-tab:hover{
  transform:none;background:var(--os-purple-wash);border-color:#E3DEFF;box-shadow:none
}
.site-head .sidebar-pipeline .step-tab.active{
  background:linear-gradient(135deg,#F1EEFF,#F8F7FF);border-color:#D6CEFF;
  box-shadow:inset 3px 0 0 var(--os-purple)
}
.site-head .sidebar-pipeline .step-tab::before{display:none}
.site-head .sidebar-pipeline .step-tab::after{
  position:static;grid-column:3;grid-row:1 / span 3;width:7px;height:7px;
  align-self:center;justify-self:end;background:var(--os-green)
}
.site-head .sidebar-pipeline .step-tab .num{
  grid-column:1;grid-row:1 / span 3;width:29px;height:29px;border-radius:10px;
  background:#EEEAFE;display:grid;place-items:center;color:var(--os-purple);
  font-size:10px;margin:0
}
.site-head .sidebar-pipeline .step-tab.active .num{background:var(--os-purple);color:#fff}
.site-head .sidebar-pipeline .step-tab .name{
  grid-column:2;grid-row:1;margin:0;font-size:12px;line-height:1.25;font-weight:760;
  display:flex;align-items:center;gap:6px
}
.site-head .sidebar-pipeline .step-tab .step-icon{flex:none;display:flex;color:var(--os-purple)}
.site-head .sidebar-pipeline .step-tab .step-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.site-head .sidebar-pipeline .step-tab:not(.active) .step-icon{color:var(--os-muted)}
.site-head .sidebar-pipeline .step-tab .tag,
.site-head .sidebar-pipeline .step-tab .path-hint{
  grid-column:2;margin:2px 0 0;font-size:8px;line-height:1.2;letter-spacing:.06em
}
.site-head .sidebar-pipeline .step-tab .done{top:9px;right:9px}
.site-head .sidebar-pipeline .step-tab.soon{opacity:.55}

@media(max-width:820px){
  .site-head{overflow:visible}
  .head-wrap{overflow:visible;flex-wrap:wrap}
  .sidebar-steps-label{display:none}
  .site-head .sidebar-pipeline{
    order:3;flex-direction:row;overflow-x:auto;width:100%;padding:3px 0 1px;gap:8px;
    scrollbar-width:none
  }
  .site-head .sidebar-pipeline::-webkit-scrollbar{display:none}
  .site-head .sidebar-pipeline .step-tab{
    flex:0 0 154px;display:grid;min-height:62px;padding:9px 10px
  }
  .site-head .sidebar-pipeline .step-tab .tag,
  .site-head .sidebar-pipeline .step-tab .path-hint{display:none}
  .site-head .sidebar-pipeline .step-tab .num{width:27px;height:27px}
}

/* ============================================================
   SCRIPT STUDIO (Step 6) — manual video editor, v3 (full editor pass).
   Matches SCRIPT AI's look (gold accent, Josefin Sans, light cards).
   No emoji anywhere — every glyph is inline SVG. Adds: media library,
   waveforms, snapping, timeline zoom, multi-select, undo/redo, and a
   fixed-height scrolling properties panel so editing text never
   pushes the timeline out of view.

   Preview still plays the whole timeline LIVE (ONE <video> + floating
   overlays + parallel <audio>); the server bakes everything into the
   MP4 on export, including the export-only Overlay (PIP) track.
   ss-prefixed; uses the app's own CSS vars.
   ============================================================ */
.ss-wrap{padding:20px clamp(14px,4vw,30px) 40px}
.ss-app{
  /* BUG FIX: the whole editor below was still built on the app's OLD
     gold/cream palette (--gold, --panel-2, --line, etc.) from before the
     rest of the app moved to the purple "os-" theme (Company Brain,
     Calendar, the dashboard header all use it now) — that's why the editor
     looked visually disconnected from everything else. Every .ss-* rule
     already reads its colours through these same variable names, so
     overriding them once here, scoped to just this container, re-themes
     the entire editor to match without touching a single other rule (or
     any other part of the app that still intentionally uses the old vars).
  */
  /* Reads the live theme's own tokens (var(--os-purple) etc, which the
     data-color-theme override on <html> already recolors) instead of a
     fixed purple hex — otherwise this editor stayed purple even when the
     rest of the app was switched to Citrus. */
  --gold:var(--os-purple);
  --gold-soft:var(--os-purple-2);
  --gold-deep:var(--os-purple-hover);
  --gold-wash:var(--os-purple-wash);
  --panel:#FFFFFF;
  --panel-2:#F8F9FC;
  --line:#E5E9F2;
  --text:#172033;
  --muted:#737C91;
  --dim:#9AA3B5;
  --shadow:0 1px 2px rgba(23,32,51,.05), 0 10px 26px rgba(37,43,72,.08);
  --shadow-lift:0 6px 16px rgba(var(--os-purple-rgb),.28);
  --ss-accent:var(--gold);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow);margin-top:18px;
  -webkit-user-select:none;user-select:none;
  font-family:'Josefin Sans',sans-serif;
}

/* ---- Top toolbar ---- */
.ss-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ss-bar .ss-sp{flex:1 1 auto}
.ss-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 15px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);border-radius:9px;font-family:'Josefin Sans',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .16s;line-height:1;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.ss-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.ss-btn:active{transform:scale(.97)}
.ss-btn:disabled{opacity:.45;cursor:default;transform:none}
.ss-btn svg{width:15px;height:15px;flex:0 0 auto}
.ss-btn.on{background:var(--gold-wash);border-color:var(--gold);color:var(--gold-deep)}
.ss-btn.ss-primary{background:var(--gold);border-color:var(--gold);color:#1A1A1A;box-shadow:var(--shadow-lift);font-weight:600}
.ss-btn.ss-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.ss-btn.ss-round{width:40px;height:40px;padding:0;border-radius:50%}
.ss-btn.ss-round svg{width:17px;height:17px}
.ss-btn.ss-round.ss-sm{width:32px;height:32px}
.ss-btn.ss-round.ss-sm svg{width:14px;height:14px}
.ss-flip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px}
.ss-flip-deg{font-size:11px;font-weight:700;color:var(--gold-deep);letter-spacing:.02em}
.ss-ratio-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ss-ratio-seg button{min-height:40px;padding:0 13px;border:0;background:var(--panel);color:var(--muted);font-family:'Josefin Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;cursor:pointer;touch-action:manipulation}
.ss-ratio-seg button+button{border-left:1px solid var(--line)}
.ss-ratio-seg button.on{background:var(--gold-wash);color:var(--gold-deep);font-weight:600}

.ss-ratio-dd{position:relative}
#ssRatioBtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px}
.ss-ratio-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 30px rgba(0,0,0,.18);overflow:hidden;min-width:110px}
.ss-ratio-menu.hidden{display:none}
.ss-ratio-menu button{display:flex;align-items:center;gap:7px;width:100%;min-height:38px;padding:0 12px;border:0;background:var(--panel);color:var(--text);font-family:'Josefin Sans',sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;text-align:left}
.ss-ratio-menu button:hover{background:var(--panel-2)}
.ss-ratio-menu button+button{border-top:1px solid var(--line)}
.ss-ratio-check{width:13px;flex:0 0 auto;opacity:0;color:var(--gold-deep);font-size:11px}
.ss-ratio-menu button.on .ss-ratio-check{opacity:1}
.ss-ratio-menu button.on{color:var(--gold-deep);font-weight:600}

/* ---- Body grid: media rail | stage | properties ---- */
.ss-body{display:grid;grid-template-columns:minmax(328px,364px) 1fr minmax(260px,300px);gap:0;align-items:stretch}

/* Media rail + library (left) */
.ss-rail{border-right:1px solid var(--line);background:var(--panel-2);padding:14px 12px;display:flex;flex-direction:column;gap:8px;min-width:0;max-height:560px;overflow-y:auto}
.ss-rail-h{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.ss-rail-h svg{width:12px;height:12px}
.ss-add{
  display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:0 12px;
  border:1px dashed var(--line);background:var(--panel);border-radius:9px;cursor:pointer;
  font-family:'Josefin Sans',sans-serif;font-size:12px;color:var(--text);transition:all .16s;text-align:left;
}
.ss-add:hover{border-color:var(--gold);border-style:solid;color:var(--gold-deep)}
.ss-add svg{width:16px;height:16px;flex:0 0 auto;color:var(--gold-deep)}
.ss-add-grid{display:flex;flex-wrap:wrap;gap:6px}
.ss-add-ic{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;
  border:1px dashed var(--line);background:var(--panel);border-radius:9px;cursor:pointer;transition:all .16s;padding:0}
.ss-add-ic:hover{border-color:var(--gold);border-style:solid;color:var(--gold-deep)}
.ss-add-ic svg{width:17px;height:17px;color:var(--gold-deep)}
.ss-add-ic[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#1a1a1a;color:#fff;font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:500;
  padding:5px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .12s;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.ss-add-ic[data-tip]:hover::after{opacity:1}
.ss-lib-list{display:flex;flex-direction:column;gap:8px}
.ss-lib-empty{font-size:11.5px;color:var(--dim);padding:6px 2px}
.ss-rail-h-row{justify-content:space-between}
/* Big-thumbnail card grid — filename below the card, duration/play/add/
   remove sitting right on the thumbnail (matches the reference layout the
   user asked for), replacing the old thin single-row list. --ss-lib-cols
   is set inline per-render from SS.libCols — fixed, no size slider (removed:
   the whole point of a compact default is not needing to fiddle with one). */
.ss-lib-grid{display:grid;grid-template-columns:repeat(var(--ss-lib-cols,2),minmax(0,1fr));gap:10px}
.ss-lib-import-tile{width:100%;min-width:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--line);border-radius:12px;background:var(--panel);color:var(--gold-deep);cursor:pointer;padding:4px}
.ss-lib-import-tile:hover{border-color:var(--gold);background:var(--gold-wash)}
.ss-lib-import-tile svg{width:22px;height:22px}
.ss-lib-card{display:flex;flex-direction:column;gap:5px;cursor:default;min-width:0}
.ss-lib-card-thumb{position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#0d0d0f;border:1px solid var(--line)}
.ss-lib-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ss-lib-card-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim)}
.ss-lib-card-ic svg{width:26px;height:26px}
.ss-lib-card-dur{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.68);color:#fff;font-size:9px;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:6px;pointer-events:none}
.ss-lib-card-play{position:absolute;bottom:6px;left:6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;pointer-events:none}
.ss-lib-card-play svg{width:9px;height:9px}
.ss-lib-card-add,.ss-lib-card-del{position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.3);padding:0;font-family:Arial,sans-serif;z-index:2}
.ss-lib-card-add{bottom:6px;right:6px;color:var(--gold-deep);font-weight:700}
.ss-lib-card-del{top:6px;right:6px;color:#b23b3b;font-weight:700}
.ss-lib-card-add:hover{background:var(--gold-wash)}
.ss-lib-card-del:hover{background:#fbf1f1}
.ss-lib-card-name{font-size:10.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 1px}

/* Stage (centre) */
.ss-stage-col{padding:18px;background:var(--panel-2);display:flex;flex-direction:column;gap:14px;min-width:0}
.ss-stage{position:relative;margin:0 auto;background:#D6D8DD;border-radius:12px;overflow:hidden;width:100%;box-shadow:0 8px 26px rgba(0,0,0,.18)}
.ss-stage.r169{aspect-ratio:16/9;max-width:600px}
.ss-lib-preview{position:absolute;inset:0;z-index:20;background:#000;display:flex;flex-direction:column}
.ss-lib-preview.hidden{display:none}
.ss-lib-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;background:rgba(0,0,0,.6);color:#fff}
.ss-lib-preview-title{font-size:11.5px;font-weight:700;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ss-lib-preview-title span{opacity:.65;font-weight:600;margin-right:5px}
.ss-lib-preview-actions{display:flex;gap:7px;flex:none}
.ss-lib-preview-actions button{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:7px;padding:6px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Josefin Sans',sans-serif;white-space:nowrap}
.ss-lib-preview-actions button.primary{background:var(--gold);color:#1a1a1a;border-color:var(--gold)}
.ss-lib-preview video{flex:1;width:100%;min-height:0;object-fit:contain;background:#000}
.ss-lib-card-thumb{cursor:pointer}
.ss-stage.r916{aspect-ratio:9/16;max-width:290px}
.ss-stage.r11{aspect-ratio:1/1;max-width:420px}
.ss-stage>video#ssVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#D6D8DD;pointer-events:none}
.ss-stage>video#ssVideo::-webkit-media-controls,.ss-stage>video#ssVideo::-webkit-media-controls-panel,.ss-stage>video#ssVideo::-webkit-media-controls-start-playback-button,.ss-stage>video#ssVideo::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
/* Transition-preview overlay: a second, purely decorative video element that
   only appears during the last transitionDuration seconds before a clip
   boundary, showing the incoming clip fade/slide/wipe/circle in on top of
   the main #ssVideo (left completely untouched — this is additive only, so
   none of the existing seek/drift/stall logic on #ssVideo needs to change).
   z-index above #ssVideo but still below the timeline UI. */
.ss-stage>video#ssVideo2{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none;opacity:0;z-index:2;will-change:opacity,transform,clip-path}
.ss-stage>video#ssVideo2::-webkit-media-controls,.ss-stage>video#ssVideo2::-webkit-media-controls-panel,.ss-stage>video#ssVideo2::-webkit-media-controls-start-playback-button,.ss-stage>video#ssVideo2::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.ss-stage-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#6b6d75;font-size:13px;text-align:center;padding:20px;pointer-events:none}
.ss-stage-empty svg{width:40px;height:40px;opacity:.55}
.ss-crop-layer{position:absolute;inset:0;display:none;z-index:5}
.ss-crop-layer.on{display:block}
.ss-crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);touch-action:none;cursor:move}
.ss-crop-handle{position:absolute;width:18px;height:18px;margin:-9px;background:#fff;border:2px solid var(--gold);border-radius:50%;touch-action:none}
.ss-crop-handle.tl{top:0;left:0;cursor:nwse-resize}
.ss-crop-handle.tr{top:0;left:100%;cursor:nesw-resize}
.ss-crop-handle.bl{top:100%;left:0;cursor:nesw-resize}
.ss-crop-handle.br{top:100%;left:100%;cursor:nwse-resize}
.ss-crop-bar{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:8px;z-index:6}
.ss-crop-bar button{background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Josefin Sans',sans-serif}
.ss-crop-ratio-dd select{background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Josefin Sans',sans-serif}
.ss-crop-ratio-dd select option{background:#1a1a1a;color:#fff}
.ss-ov-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ss-ov-text{position:absolute;transform:translate(-50%,-50%);text-align:center;font-weight:800;line-height:1.15;padding:0 6%;width:100%;white-space:pre-wrap;text-shadow:0 2px 6px rgba(0,0,0,.6);font-family:'Josefin Sans',sans-serif}
.ss-ov-text .ss-hl{color:var(--ss-accent)}
@keyframes ssTextFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ssTextSlideUp{from{opacity:0;transform:translate(-50%,-50%) translateY(24px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}
@keyframes ssTextSlideDown{from{opacity:0;transform:translate(-50%,-50%) translateY(-24px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}
.ss-ov-img{position:absolute;transform:translate(-50%,-50%);cursor:grab}
.ss-ov-del{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);color:#b23b3b;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:5;padding:0;font-family:Arial,sans-serif}
.ss-ov-resize{position:absolute;bottom:-9px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:nwse-resize;z-index:5}
.ss-ov-img img{display:block;width:100%;height:auto;pointer-events:none}
.ss-ov-text{cursor:grab}
.ss-ov-pip{cursor:grab}
.ss-ov-pip{position:absolute;transform:translate(-50%,-50%);border:2px solid var(--gold);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.ss-pip-badge{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);color:#fff;font-size:8.5px;line-height:1.3;padding:3px 5px;text-align:center;font-family:'Josefin Sans',sans-serif}

/* Transport */
.ss-transport{display:flex;align-items:center;gap:12px;justify-content:center}
.ss-time{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);min-width:104px;text-align:center;letter-spacing:.02em}
.ss-scrub{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--line);outline:none;cursor:pointer}
.ss-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ss-scrub::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--gold);cursor:pointer}

/* Properties panel (right) with tabs — FIXED HEIGHT + own scroll so
   editing a caption never pushes the timeline out of view. */
.ss-props{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-width:0;max-height:560px}
.ss-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line);flex:0 0 auto}
.ss-tab{flex:0 0 auto;padding:8px 9px;border:0;background:transparent;color:var(--muted);font-family:'Josefin Sans',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.ss-tab.on{color:var(--gold-deep);border-bottom-color:var(--gold)}
.ss-panel-body{padding:16px;overflow-y:auto;flex:1 1 auto;min-height:0}
.ss-trans-h{display:block;font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.02em;margin-bottom:8px}
.ss-trans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.ss-seam-btn{position:absolute;top:50%;margin-top:-10px;width:20px;height:20px;border-radius:50%;z-index:4;
  border:1.5px solid var(--gold);background:var(--panel);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ss-seam-btn svg{width:11px;height:11px}
.ss-seam-btn.on{background:var(--gold);color:#1A1A1A}
/* BUG FIX: was a fairly opaque diagonal fill (.28/.14 alpha) that, layered
   over a busy thumbnail, read as a solid block hiding exactly the footage
   you're trying to line the transition up against. Lightened it and moved
   most of the "this zone is a transition" signal onto the top/bottom
   border instead of the fill, so the thumbnail stays clearly visible
   underneath while dragging. */
.ss-seam-translen{position:absolute;top:0;bottom:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(212,175,55,.14) 0 6px, rgba(212,175,55,.05) 6px 12px);
  border-left:2px solid var(--gold-deep);border-right:2px solid var(--gold-deep);
  border-top:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ss-seam-translen-lbl{font-size:9.5px;font-weight:700;color:var(--gold-deep);background:var(--panel);
  padding:1px 4px;border-radius:4px;margin-bottom:2px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ss-seam-translen-handle{position:absolute;left:0;top:0;bottom:0;width:10px;margin-left:-5px;
  cursor:ew-resize;pointer-events:auto;touch-action:none;z-index:4}
.ss-seam-translen-handle::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:4px;height:70%;border-radius:2px;background:var(--gold-deep);opacity:.9;box-shadow:0 0 0 2px var(--panel)}
.ss-seam-translen-handle:hover::before{opacity:1;background:var(--gold)}
.ss-seam-picker{position:fixed;z-index:600;display:flex;flex-direction:column;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.28);padding:8px;width:230px}
.ss-seam-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ss-seam-picker .ss-field{margin:0}
.ss-trans-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);cursor:pointer;font-family:'Josefin Sans',sans-serif}
.ss-trans-tile:hover{border-color:var(--gold-deep)}
.ss-trans-tile.on{background:var(--gold-wash);border-color:var(--gold);color:var(--gold-deep)}
.ss-trans-ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.ss-trans-ic svg{width:100%;height:100%}
.ss-trans-lbl{font-size:9.5px;font-weight:600;text-align:center;line-height:1.25}
.ss-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ss-preset-tile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:transparent;cursor:pointer;font-family:'Josefin Sans',sans-serif}
.ss-preset-swatch{display:block;width:100%;aspect-ratio:1;border-radius:9px;background:#0d0d0f no-repeat center/cover;border:2px solid var(--line)}
.ss-preset-tile.on .ss-preset-swatch{border-color:var(--gold)}
.ss-preset-tile:hover .ss-preset-swatch{border-color:var(--gold-deep)}
.ss-preset-lbl{font-size:10px;font-weight:600;color:var(--muted)}
.ss-preset-tile.on .ss-preset-lbl{color:var(--gold-deep)}

/* Timeline */
.ss-tl-wrap{border-top:1px solid var(--line);background:var(--panel-2);padding:10px 14px 12px}
.ss-tl-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ss-tl-div{width:1px;align-self:stretch;background:var(--line);margin:2px 2px}
.ss-tl-hint{font-size:11px;color:var(--gold-deep);font-weight:600}
.ss-tl-scroll{overflow-x:auto;overflow-y:hidden}
.ss-tl{display:flex;flex-direction:column;gap:7px;min-width:100%}
.ss-ruler{display:flex;align-items:stretch;gap:9px;height:22px;margin-bottom:4px}
.ss-ruler-spacer{flex:0 0 78px}
.ss-ruler-track{position:relative;flex:1 1 auto;border-bottom:1px solid var(--line);cursor:pointer}
.ss-ruler-tick{position:absolute;bottom:0;top:6px;border-left:1px solid var(--line);padding-left:4px;font-size:9.5px;color:var(--muted);white-space:nowrap;pointer-events:none}
.ss-track{display:flex;align-items:stretch;gap:9px;margin-bottom:6px}
.ss-track-lbl{flex:0 0 78px;position:sticky;left:0;background:var(--panel-2);z-index:2;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px 4px;border-radius:8px}
.ss-track-lbl-h{display:flex;align-items:center;gap:5px}
.ss-track-lbl-h>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-track-lbl svg{width:13px;height:13px;color:var(--gold-deep);flex-shrink:0}
.ss-track-btns{display:flex;gap:4px}
.ss-track-tbtn{flex:0 0 auto;width:18px;height:18px;border:0;border-radius:5px;background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ss-track-tbtn svg{width:10px;height:10px}
.ss-track-tbtn.on{background:#b23b3b;color:#fff}
.ss-track-hidden .ss-track-lbl{opacity:.5}
.ss-track-tbtn.ss-track-rm{background:var(--panel);color:var(--muted);font-size:12px;line-height:1}
.ss-track-tbtn.ss-track-rm:hover{background:#b23b3b;color:#fff}
.ss-track-lanes{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ss-track-lane{position:relative;height:46px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.ss-track-hidden .ss-track-lane{opacity:.45}
.ss-tl-add-slot{position:relative;margin-top:8px}
.ss-track-add-row{position:relative;display:flex;margin-top:2px}
.ss-track-add-btn{display:flex;align-items:center;gap:5px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:600;padding:6px 10px;cursor:pointer}
.ss-track-add-btn svg{width:12px;height:12px}
.ss-track-add-btn:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
/* Opens UPWARD (bottom-anchored), not down — .ss-app has its own
   overflow:hidden for the rounded-corner card look, and this button sits
   right at the bottom edge of the editor, so a downward menu had nowhere
   to actually paint: it opened with correct geometry but was invisibly
   clipped by .ss-app's own bottom edge. There's always room above it
   (the timeline), so opening upward is also just more reliable, not only
   a workaround. */
.ss-track-add-menu{position:absolute;bottom:calc(100% + 4px);top:auto;left:0;z-index:8;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lift,0 6px 20px rgba(0,0,0,.3));padding:5px;min-width:170px;display:flex;flex-direction:column;gap:2px}
.ss-track-add-menu.hidden{display:none}
.ss-track-add-menu button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--text);font-size:12px;font-weight:600;padding:7px 8px;border-radius:7px;cursor:pointer;text-align:left}
.ss-track-add-menu button svg{width:13px;height:13px;color:var(--gold-deep);flex-shrink:0}
.ss-track-add-menu button:hover:not(:disabled){background:var(--panel)}
.ss-track-add-menu button:disabled{opacity:.45;cursor:not-allowed}
.ss-track-add-soon{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ss-seg.ss-vo{background:#3F8B9B}
.ss-move-bar-btn{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--gold-deep);font-size:11px;font-weight:600;padding:6px 9px;cursor:pointer;margin:6px 0 2px;width:100%}
.ss-move-bar-btn svg{width:11px;height:11px}
.ss-move-bar-btn:hover{border-color:var(--gold-deep)}

/* Fullscreen editor mode — the campaign-steps sidebar (.site-head, fixed
   252px) slides off-screen to the left instead of just being covered, so
   its own fixed positioning can't peek through anything; a thin invisible
   strip at the very edge brings it back on hover/touch. .ss-wrap escapes
   .wrap's 252px margin-left via position:fixed, so it fills the space the
   sidebar left behind.
   BUG FIX: this used to animate via transform:translateX(-100%) — for
   reasons never fully pinned down (possibly this element's own
   backdrop-filter interacting with the engine's transform handling),
   transform silently had NO effect at all on .site-head specifically, not
   even as an inline !important override, while every other property
   changed normally. .site-head is already position:fixed with an explicit
   left:0 (via its `inset` shorthand), so animating `left` instead sidesteps
   the mystery entirely and is equally cheap to animate on a fixed element. */
body.ss-fs{overflow:hidden}
body.ss-fs .site-head{left:-260px;transition:left .18s ease;z-index:400}
body.ss-fs.ss-fs-peek .site-head{left:0}
.ss-fs-edge{display:none;position:fixed;top:0;left:0;width:14px;height:100vh;z-index:350}
body.ss-fs .ss-fs-edge{display:block}
body.ss-fs .ss-wrap{position:fixed;inset:0;z-index:300;overflow-y:auto;background:var(--os-bg);margin:0;padding:16px clamp(14px,4vw,30px) 40px}
body.ss-fs .ss-app{margin-top:0}
#ssEditorFs.on{background:var(--gold-wash);color:var(--gold-deep);border-color:var(--gold)}

/* Calendar fullscreen — same pattern as the video editor's own fullscreen
   mode above (hide the sidebar, hover the left edge to peek it back). */
body.cal-fs{overflow:hidden}
body.cal-fs .site-head{left:-260px;transition:left .18s ease;z-index:400}
body.cal-fs.cal-fs-peek .site-head{left:0}
.cal-fs-edge{display:none;position:fixed;top:0;left:0;width:14px;height:100vh;z-index:350}
body.cal-fs .cal-fs-edge{display:block}
body.cal-fs .wrap{margin-left:0}
body.cal-fs .panel{max-width:none}
.cal-fs-btn.on{background:var(--os-purple-wash,#F1EEFF);color:var(--os-purple,#6C5CE7);border-color:#CFC7FF}
.ss-seg-locked{cursor:not-allowed!important}
.ss-seg-locked .ss-seg-handle{display:none}
.ss-seg{position:absolute;top:4px;bottom:4px;border-radius:6px;overflow:hidden;cursor:grab;display:flex;align-items:center;padding:0 9px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2);touch-action:none}
.ss-seg.sel{outline:2px solid var(--gold);outline-offset:1px;z-index:3}
.ss-seg.ss-vid{background:#3B6EA5}
.ss-seg.ss-pip{background:#6C5FA8}
.ss-seg.ss-txt{background:#8A6FB0}
.ss-seg.ss-logo{background:var(--gold-soft)}
.ss-seg.ss-stk{background:#C2637A}
.ss-seg.ss-mus{background:#3F9B7A}
.ss-seg-lbl{overflow:hidden;text-overflow:ellipsis;pointer-events:none;position:relative;z-index:1}
.ss-seg-speed{position:absolute;top:3px;right:19px;z-index:3;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;line-height:1;padding:2px 5px;border-radius:6px;pointer-events:none;letter-spacing:.02em}
.ss-seg-mute{position:absolute;top:3px;right:3px;z-index:4;width:14px;height:14px;border:0;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ss-seg-mute svg{width:9px;height:9px}
.ss-seg-mute.on{background:#b23b3b}
.ss-thumbstrip{position:absolute;inset:0;display:flex;pointer-events:none;z-index:0;background:#000}
.ss-img-thumb{position:absolute;inset:0;pointer-events:none;z-index:0;background:#000 no-repeat center/cover;opacity:.75}
.ss-thumbstrip img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;display:block;opacity:.9}
.ss-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.ss-vol-line{position:absolute;left:0;right:0;height:14px;margin-top:-7px;pointer-events:auto;cursor:ns-resize;z-index:3;touch-action:none;display:flex;align-items:center}
.ss-vol-line::before{content:"";display:block;width:100%;height:2px;background:var(--gold);opacity:.85}
.ss-vol-handle{position:absolute;left:4px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(13,13,15,.5);pointer-events:none}
.ss-seg-handle{position:absolute;top:0;bottom:0;width:15px;cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center;z-index:2}
.ss-seg-handle::before{content:"";width:3px;height:44%;background:rgba(255,255,255,.75);border-radius:2px}
.ss-seg-handle.l{left:0}.ss-seg-handle.r{right:0}
.ss-playhead{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--gold);pointer-events:none;z-index:5;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.ss-marquee{position:absolute;background:rgba(201,162,39,.18);border:1px solid var(--gold);pointer-events:none;z-index:10}
.ss-lane-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px;pointer-events:none;letter-spacing:.03em}
.ss-track-lane.ss-lane-dragover{background:var(--gold-wash);outline:2px dashed var(--gold);outline-offset:-2px}

/* Properties: fields */
.ss-side-h{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:2px 0 10px}
.ss-adjust-reset{width:100%;justify-content:center;margin-bottom:12px}
.ss-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ss-field label{font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.ss-field input[type=text],.ss-field textarea,.ss-field select{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;
  font-family:'Josefin Sans',sans-serif;font-size:13px;color:var(--text);background:var(--panel);outline:none;min-height:42px
}
.ss-field textarea{min-height:64px;resize:vertical;line-height:1.4}
.ss-field input:focus,.ss-field textarea:focus,.ss-field select:focus{border-color:var(--gold)}
.ss-num-row{display:flex;align-items:center;gap:10px}
.ss-num-row .ss-range{flex:1}
.ss-num-box{flex:0 0 62px;border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center;font-size:12.5px;color:var(--text);background:var(--panel-2);font-variant-numeric:tabular-nums}
.ss-range{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--line);outline:none;cursor:pointer;width:100%}
.ss-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ss-range::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--gold);cursor:pointer}
.ss-rowhead{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.ss-swatch-row{display:flex;align-items:center;gap:10px}
.ss-swatch-row input[type=color]{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px;cursor:pointer}
.ss-empty-detail{font-size:12.5px;color:var(--dim);line-height:1.55;text-align:center;padding:22px 8px}
.ss-clip-name{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text);font-size:13px;margin-bottom:14px;word-break:break-all}
.ss-clip-name svg{width:15px;height:15px;flex:0 0 auto;color:var(--gold-deep)}
.ss-del-btn{color:#b23b3b;border-color:#e7cccc;width:100%;margin-top:4px}
.ss-del-btn:hover{border-color:#b23b3b;color:#b23b3b}
.ss-danger-ghost{color:#b23b3b;border-color:#e7cccc}
.ss-danger-ghost:hover{border-color:#b23b3b;color:#b23b3b}
.ss-soon-note{font-size:12px;color:var(--dim);line-height:1.55;padding:6px 0;border-top:1px dashed var(--line);margin-top:6px}

/* Right-click / long-press context menu */
.ss-ctx{position:fixed;z-index:500;min-width:170px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 34px rgba(26,26,26,.18);padding:6px;font-family:'Josefin Sans',sans-serif}
.ss-ctx button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:9px 11px;border-radius:7px;font-size:12.5px;color:var(--text);cursor:pointer;text-align:left;font-family:'Josefin Sans',sans-serif}
.ss-ctx button:hover{background:var(--gold-wash);color:var(--gold-deep)}
.ss-ctx button svg{width:15px;height:15px;flex:0 0 auto;opacity:.75}
.ss-ctx button.danger{color:#b23b3b}
.ss-ctx button.danger:hover{background:#fbf1f1}
.ss-ctx-sep{height:1px;background:var(--line);margin:5px 4px}

/* Progress overlay */
.ss-progress{position:absolute;inset:0;background:rgba(255,255,255,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:40;border-radius:12px;text-align:center;padding:24px}
.ss-progress.hidden{display:none}
.ss-spin{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:ssSpin .8s linear infinite}
@keyframes ssSpin{to{transform:rotate(360deg)}}
.ss-progress-note{font-size:13.5px;color:var(--text);font-weight:500;max-width:280px;line-height:1.5}

/* Toast */
.ss-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:#1A1A1A;color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:600;opacity:0;transition:all .25s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:88vw;text-align:center;font-family:'Josefin Sans',sans-serif}
.ss-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* App-wide toast (not scoped to Video Studio) — used for surfacing real
   background-save failures (see __calSave) that would otherwise fail
   silently. Sits above everything else in the app, including .modal-overlay
   (z-index:700), since a save can fail while a modal/popup is open. */
.app-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:#B3261E;color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:600;z-index:9999;opacity:0;transition:all .25s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:90vw;text-align:center;font-family:'Josefin Sans',sans-serif}
.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.ss-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ============================================================
   Responsive — collapse to phone. Media rail becomes a row on top;
   properties panel drops below the stage; timeline stays full width
   and scrolls horizontally when zoomed. No min-width, no overflow
   lock anywhere. Big touch targets throughout.
   ============================================================ */
@media(max-width:680px){
  /* BUG FIX: this used to trigger at 980px, which is well within normal
     "not-maximized laptop window" territory — before Fullscreen mode
     existed, the editor only ever showed embedded in the page's normal
     scroll, so a stacked layout at that width was an acceptable mobile
     fallback. In Fullscreen mode the editor IS the whole window, so
     hitting this breakpoint at a completely ordinary desktop width
     collapsed the 3-column layout to one stacked column — the "rail
     looks too small", "thumbnails too big" (grid cards scale to the FULL
     stacked width, not a slim sidebar), and "can't reach the timeline/Add
     track" (it's now far down the stacked page) reports were all this
     one thing. 680px is genuinely small-tablet/phone territory instead.
  */
  .ss-body{grid-template-columns:1fr}
  .ss-rail{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line);max-height:none}
  .ss-rail-h{flex-basis:100%}
  .ss-add{flex:1 1 40%;min-width:130px}
  .ss-lib-list{flex-basis:100%}
  .ss-props{border-left:none;border-top:1px solid var(--line);max-height:420px}
  .ss-stage.r916{max-width:250px}
}
@media(max-width:520px){
  .ss-wrap{padding:14px 10px 30px}
  .ss-bar{gap:6px;padding:9px}
  .ss-btn{padding:0 12px}
  .ss-bar .ss-sp{flex-basis:100%;height:0;order:99}
  .ss-add{flex-basis:100%}
  .ss-track-lbl{flex-basis:58px;font-size:9px}
  .ss-stage.r916{max-width:210px}
}

/* ============================================================
   JOSLENE — AI Chief Operating Officer / floating helper chat
   ============================================================ */
.assistant-fab{
  position:fixed;right:22px;bottom:22px;z-index:300;
  height:60px;padding:0 20px 0 15px;border-radius:999px;border:0;
  background:linear-gradient(135deg,var(--os-purple),var(--os-purple-2));color:#fff;
  display:flex;align-items:center;gap:9px;cursor:pointer;
  box-shadow:0 14px 34px rgba(var(--os-purple-rgb),.48);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.assistant-fab-icon{font-size:27px;line-height:1}
.assistant-fab-label{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:14.5px;white-space:nowrap;letter-spacing:.01em}
.assistant-fab:hover{background:linear-gradient(135deg,var(--os-purple-hover),var(--os-purple));transform:translateY(-2px);box-shadow:0 18px 40px rgba(var(--os-purple-rgb),.58)}
.assistant-fab.open{transform:scale(.94)}
.assistant-fab.dragging{transition:none;cursor:grabbing;opacity:.9}
.assistant-fab.dragging:hover{transform:none;box-shadow:0 14px 34px rgba(var(--os-purple-rgb),.48)}
@keyframes assistantBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.assistant-fab.breathing{animation:assistantBreathe 2.4s ease-in-out infinite}
.assistant-fab.breathing:hover{animation:none}
@media(max-width:460px){
  .assistant-fab{padding:0;width:58px;height:58px;justify-content:center}
  .assistant-fab-label{display:none}
}

.assistant-step-tip{
  position:fixed;right:22px;bottom:90px;z-index:299;
  width:280px;max-width:calc(100vw - 24px);
  background:var(--panel,#fff);border:1px solid var(--os-line,#E5E9F2);border-radius:14px;
  box-shadow:0 20px 50px rgba(20,24,42,.3);padding:12px 14px;cursor:pointer;
  animation:assistantTipIn .25s ease;
}
.assistant-step-tip.fade-out{animation:assistantTipOut .35s ease forwards}
@keyframes assistantTipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes assistantTipOut{to{opacity:0;transform:translateY(8px)}}
.ast-head{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:12.5px;color:var(--os-purple,#6D5DF6);margin-bottom:4px}
.ast-body{font-size:12.5px;line-height:1.5;color:var(--os-ink,#17171F)}
@media(max-width:460px){ .assistant-step-tip{right:12px;bottom:86px} }

.assistant-panel{
  position:fixed;right:22px;bottom:90px;z-index:300;
  width:360px;max-width:calc(100vw - 24px);max-height:70vh;
  background:var(--panel,#fff);border:1px solid var(--os-line,#E5E9F2);border-radius:18px;
  box-shadow:0 24px 70px rgba(20,24,42,.28);
  display:flex;flex-direction:column;overflow:hidden;
}
.assistant-panel[hidden]{display:none}

.assistant-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--os-line,#E5E9F2);
  background:linear-gradient(180deg,#fff,#FCFCFE);flex-shrink:0;
}
.assistant-head-titles{display:flex;flex-direction:column;gap:1px;min-width:0}
.assistant-head-title{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:14px;color:var(--os-ink,#17171F)}
.assistant-head-sub{font-size:10.5px;color:var(--os-muted,#737C91);font-weight:600}
.assistant-head-btns{display:flex;align-items:center;gap:2px;flex-shrink:0}
.assistant-gear{background:none;border:0;font-size:16px;color:var(--muted,#6B6B6B);cursor:pointer;padding:4px;line-height:1;border-radius:6px}
.assistant-gear:hover{color:var(--os-ink,#17171F);background:var(--os-purple-wash,#F1EEFF)}
.assistant-close{background:none;border:0;font-size:18px;color:var(--muted,#6B6B6B);cursor:pointer;line-height:1;padding:4px}
.assistant-close:hover{color:var(--os-ink,#17171F)}

.assistant-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:140px}
.assistant-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.55;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;word-wrap:break-word}
.assistant-msg.user{align-self:flex-end;background:var(--os-purple-wash,#F1EEFF);color:var(--os-ink,#17171F);border-bottom-right-radius:4px}
.assistant-msg.bot{align-self:flex-start;background:#F5F5F7;color:var(--text,#1A1A1A);border-bottom-left-radius:4px}
.assistant-msg.bot.typing{color:var(--muted,#6B6B6B);font-style:italic}
.assistant-msg p{margin:0 0 6px}
.assistant-msg p:last-child{margin-bottom:0}
.assistant-msg ul,.assistant-msg ol{margin:4px 0 6px 18px;padding:0}

.assistant-suggest{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;flex-shrink:0}
.assistant-chip{
  border:1px solid var(--os-line,#E5E9F2);background:#FAFAFC;color:var(--os-purple,#6D5DF6);
  border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  cursor:pointer;text-align:left;
}
.assistant-chip:hover{background:var(--os-purple-wash,#F1EEFF);border-color:#CFC7FF}
.assistant-chip.next{background:var(--os-purple,#6D5DF6);color:#fff;border-color:var(--os-purple,#6D5DF6)}

.assistant-inputrow{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--os-line,#E5E9F2);flex-shrink:0}
.assistant-input{
  flex:1;border:1px solid var(--os-line,#E5E9F2);background:#F8F9FC;border-radius:10px;
  padding:10px 12px;font-size:13.5px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--os-ink,#17171F);outline:none;min-width:0;
}
.assistant-input:focus{border-color:var(--os-purple,#6D5DF6)}
.assistant-send{
  border:0;background:var(--os-purple,#6D5DF6);color:#fff;border-radius:10px;
  padding:0 16px;font-weight:700;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;cursor:pointer;flex-shrink:0;
}
.assistant-send:hover{background:var(--os-purple-hover)}
.assistant-send:disabled{opacity:.5;cursor:not-allowed}

.assistant-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#FF5A5F;border:2px solid #fff;pointer-events:none}

.assistant-settings{padding:10px 16px 14px;overflow-y:auto;flex:1;display:flex;flex-direction:column}
.js-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--os-line,#E5E9F2)}
.js-row:last-child{border-bottom:0}
.js-row-label{font-size:13px;font-weight:600;color:var(--os-ink,#17171F);display:flex;align-items:center;gap:7px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.js-row-soon{font-size:9.5px;color:var(--os-muted,#737C91);background:#F1EEFF;padding:2px 7px;border-radius:999px;margin-left:2px;font-weight:700;letter-spacing:.02em}
.js-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.js-switch input{opacity:0;width:0;height:0}
.js-slider{position:absolute;cursor:pointer;inset:0;background:#D9D9E3;border-radius:999px;transition:.15s}
.js-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.js-switch input:checked + .js-slider{background:var(--os-purple,#6D5DF6)}
.js-switch input:checked + .js-slider::before{transform:translateX(16px)}
.js-switch input:disabled + .js-slider{opacity:.4;cursor:not-allowed}

@media(max-width:600px){
  .assistant-panel{left:12px;right:12px;width:auto;bottom:78px;max-height:65vh}
  .assistant-fab{right:16px;bottom:16px}
}

/* ---- Supabase auth gate ---- */
.auth-gate-overlay{position:fixed;inset:0;z-index:99999;background:var(--bg,#fff);display:flex;align-items:center;justify-content:center;padding:20px}
/* BUG FIX (confirmed via DevTools — the actual root cause of every
   "stuck on Loading..." report this session): initAuthGate() was working
   correctly the whole time and DID set the hidden attribute once signed
   in, but the .auth-gate-overlay rule above's own `display:flex` beats
   the browser's built-in `[hidden]{display:none}` (same specificity,
   author stylesheet wins over the UA one) — so the overlay stayed
   visually on screen, invisibly "hidden" underneath, forever. Every
   sign-in in this session actually succeeded; nobody could ever see it. */
.auth-gate-overlay[hidden]{display:none}
/* SECURITY: Facebook/Instagram publishing currently posts to Jonyehsi
   Studio's OWN connected accounts (no per-merchant Meta OAuth exists
   yet) — restricted to admin accounts until that's built. body.no-social-
   publish is set once in initAuthGate() based on isAdminAccount(); the
   !important here deliberately overrides every inline
   style.display="inline-flex" the many result-render call sites set on
   these buttons, the same "author stylesheet beats inline JS" trick as
   the auth-gate-overlay rule above, so a single toggle here is enough
   without touching every call site.
   BUG FIX (external review): this used to hide only the two specific
   #resPublishFb/#resPublishIg elements — but pubIconBtn("fb"/"ig", ...)
   creates several MORE Facebook/Instagram publish buttons with no id at
   all (Dashboard's "Ready to publish" card, the Calendar's per-post row,
   and others), all calling the exact same admin-only
   publishImageToFacebook()/publishImageToInstagram() functions. The
   backend already rejects a non-admin's call outright (see
   _is_admin_request() in script_ai_backend.py) so nothing could actually
   be posted — but a merchant could still see and click a button that
   would only ever fail for them, a confusing dead end. Hiding by CLASS
   now covers every one of them in one place, present or future, without
   touching each call site — .pub-icon-wa (WhatsApp share) is deliberately
   NOT included here, since that one has no admin restriction at all. */
body.no-social-publish #resPublishFb,
body.no-social-publish #resPublishIg,
body.no-social-publish .pub-icon-fb,
body.no-social-publish .pub-icon-ig{display:none!important}
.auth-gate-card{position:relative;width:100%;max-width:400px;padding:32px 28px;border:1px solid var(--line,#e5e0d8);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.auth-gate-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border:none;background:none;font-size:22px;line-height:1;color:var(--dim,#9A9A9A);cursor:pointer;padding:0}
.auth-gate-close:hover{color:var(--text,#1A1A1A)}
.auth-gate-card h2{margin:0 0 6px;font-size:22px}
.auth-gate-logo{display:block;height:36px;width:auto;margin:0 auto 14px;object-fit:contain}
.auth-gate-sub{margin:0 0 20px;color:var(--muted,#6b6558);font-size:14px;line-height:1.5}
.auth-gate-card label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted,#6b6558);text-transform:uppercase;margin:14px 0 6px}
.auth-gate-card input{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid var(--line,#e5e0d8);font-family:inherit;font-size:14px}
.auth-gate-card .btn{width:100%;margin-top:18px}
.auth-gate-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted,#6b6558)}
.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#3c4043;border:1px solid var(--line,#e5e0d8);font-family:inherit;font-weight:600;font-size:14px;padding:11px 12px;border-radius:10px;cursor:pointer}
.auth-google-btn:hover{background:#f7f7f8}
.auth-google-btn:disabled{opacity:.6;cursor:default}
.auth-gate-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--dim,#9A9A9A);font-size:12px}
.auth-gate-divider::before,.auth-gate-divider::after{content:"";flex:1;height:1px;background:var(--line,#e5e0d8)}
.auth-gate-error{margin:14px 0 0;font-size:13px;color:#c0392b}
.auth-voucher-toggle{display:block;background:none;border:0;padding:10px 0 0;margin:0;font-size:12.5px;color:var(--os-purple,#6D5DF6);font-weight:600;cursor:pointer;text-align:left}
#authVoucherWrap{margin-top:8px}
/* BUG FIX (reported live, 2026-09-26): the consent line inherited the
   card's generic form rules — every label uppercased and every input
   stretched to 100% width — so the checkbox floated alone in the middle
   and "I AGREE TO THE TERMS..." ran in capitals in a narrow column right
   under the voucher link, reading as one confusing block. Restores a
   normal sentence with a small box on its left, and a clear gap above it.
   Covers both the sign-in form and the phone/terms gate (same class). */
.auth-gate-card label.auth-terms-row{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--line,#e5e0d8);text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;line-height:1.5;color:var(--ink,#3a3a3a)}
.auth-gate-card label.auth-terms-row input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;padding:0;accent-color:var(--os-purple,#6D5DF6);cursor:pointer}
.auth-gate-card label.auth-terms-row a{color:var(--os-purple,#6D5DF6);font-weight:600}
.auth-gate-loading{text-align:center;color:var(--muted,#6b6558);font-size:14px}

/* ===== Marketing landing page (signed-out visitors) ===== */
/* The app shell (header/sidebar + main .wrap + the Joslene chat fab/panel
   + its welcome popup) used to stay visually blocked by the old
   full-screen #authGate overlay while signed out — that overlay is now
   hidden instead so the landing page (a normal in-flow div, not an
   overlay) can show, so the app shell needs its own explicit hide here
   or it renders behind/through the landing page. Toggled by
   initAuthGate() via body.landing-mode. */
body.landing-mode .site-head,
body.landing-mode .app-topbar,
body.landing-mode .wrap,
body.landing-mode > footer,
body.landing-mode #assistantFab,
body.landing-mode #assistantPanel,
body.landing-mode .joslene-welcome-ov{display:none!important}
/* Premium redesign (v2) — adapted from a design the user supplied.
   Everything is scoped under #landingPage with its own --lp-* custom
   properties instead of the app's real --bg/--text/--muted/etc — the
   source file defined a bare :root{} and reused bare `.btn`, `.wrap`,
   `.hero`, `.chip`, `section`, `footer` selectors that would otherwise
   silently collide with (and in the case of `.wrap`, get hidden
   alongside) the actual app shell's own identical class names. */
#landingPage{
  --lp-bg:#f5f5f7; --lp-text:#111114; --lp-muted:#6e6e73; --lp-line:rgba(0,0,0,.08);
  --lp-card:#fff; --lp-purple:#6c47ff; --lp-blue:#1689ff; --lp-pink:#ff4fa3;
  --lp-dark:#0d0d12; --lp-radius:32px; --lp-shadow:0 30px 80px rgba(21,20,40,.12);
  background:var(--lp-bg); color:var(--lp-text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  overflow-x:hidden;
}
#landingPage a{text-decoration:none;color:inherit}
#landingPage button{font:inherit}
#landingPage .lp-home-float{position:fixed;right:24px;bottom:24px;z-index:190;display:flex;align-items:center;gap:8px;background:#111;color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 12px 30px rgba(20,20,40,.22);transition:transform .15s ease}
#landingPage .lp-home-float:hover{transform:translateY(-2px)}
#landingPage .lp-nav{position:fixed;inset:0 0 auto 0;z-index:200;height:64px;display:flex;align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(245,245,247,.78);border-bottom:1px solid rgba(0,0,0,.055)}
#landingPage .lp-nav-inner{width:min(1180px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
#landingPage .lp-brand{height:32px;width:auto;object-fit:contain}
#landingPage .lp-brand span{background:linear-gradient(90deg,var(--lp-purple),var(--lp-blue),var(--lp-pink));-webkit-background-clip:text;background-clip:text;color:transparent}
#landingPage .lp-nav-links{display:flex;gap:28px;color:#444;font-size:14px}
#landingPage .lp-nav-actions{display:flex;align-items:center;gap:12px}
#landingPage .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 19px;font-weight:700;font-size:14px;transition:.25s ease;border:1px solid transparent;cursor:pointer}
#landingPage .lp-btn-primary{background:#111;color:#fff}
#landingPage .lp-btn-primary:hover{transform:translateY(-1px);background:#292929}
#landingPage .lp-btn-ghost{border-color:var(--lp-line);background:rgba(255,255,255,.72);color:var(--lp-text)}
#landingPage .lp-btn-light{background:#fff;color:#111}
#landingPage .lp-hero{min-height:100vh;padding:150px 24px 70px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative}
#landingPage .lp-hero::before{content:"";position:absolute;width:900px;height:520px;top:60px;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(108,71,255,.22) 0%,rgba(22,137,255,.12) 35%,rgba(255,79,163,.06) 55%,transparent 72%);filter:blur(25px);pointer-events:none}
#landingPage .lp-hero-inner{width:min(1180px,100%);position:relative;z-index:1}
#landingPage .lp-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--lp-line);font-size:13px;font-weight:700;color:#4a4a4f;box-shadow:0 8px 30px rgba(0,0,0,.04)}
#landingPage .lp-dot{width:8px;height:8px;border-radius:50%;background:#35c969;box-shadow:0 0 0 5px rgba(53,201,105,.12)}
#landingPage .lp-hero h1{margin:24px auto 20px;font-size:clamp(48px,8vw,100px);line-height:.94;letter-spacing:-.06em;max-width:1050px;font-weight:850;color:var(--lp-text)}
#landingPage .lp-gradient-text{background:linear-gradient(100deg,#111 0%,#5f3cff 32%,#138cff 58%,#e83e98 86%);-webkit-background-clip:text;background-clip:text;color:transparent}
#landingPage .lp-hero-copy{max-width:760px;margin:0 auto;color:var(--lp-muted);font-size:clamp(19px,2vw,25px);line-height:1.45;letter-spacing:-.02em}
#landingPage .lp-hero-actions{margin-top:34px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
#landingPage .lp-hero-actions .lp-btn{padding:15px 24px;font-size:16px}
#landingPage .lp-hero-note{margin-top:14px;color:#86868b;font-size:13px}
#landingPage .lp-stage{width:min(1180px,calc(100% - 28px));margin:35px auto 0;position:relative;perspective:1800px}
#landingPage .lp-app-frame{background:#e4e1f5;border-radius:34px;padding:10px;box-shadow:0 50px 120px rgba(17,17,30,.24),0 10px 30px rgba(0,0,0,.08);transform:rotateX(2deg);transform-origin:center top}
#landingPage .lp-app-window{overflow:hidden;border-radius:25px;background:#f6f5fc;min-height:460px;display:grid;grid-template-columns:210px 1fr}
#landingPage .lp-sidebar{background:#fff;color:#1a1a1a;padding:24px 17px;border-right:1px solid var(--lp-line)}
#landingPage .lp-mini-logo{font-size:15px;font-weight:800;margin-bottom:30px;color:#1a1a1a}
#landingPage .lp-side-group{font-size:10px;text-transform:uppercase;color:#9a97ac;letter-spacing:.12em;margin:18px 8px 10px}
#landingPage .lp-side-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;color:#5b5866;font-size:12px;margin:2px 0}
#landingPage .lp-side-item.active{background:linear-gradient(90deg,#6d4cff,#3f79ff);color:#fff}
#landingPage .lp-side-num{width:20px;height:20px;border-radius:7px;background:rgba(109,76,255,.1);display:grid;place-items:center;font-size:10px}
#landingPage .lp-side-item.active .lp-side-num{background:rgba(255,255,255,.2)}
#landingPage .lp-workspace{padding:28px}
#landingPage .lp-workspace-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
#landingPage .lp-workspace-title{font-size:25px;font-weight:800;letter-spacing:-.04em;color:#1a1a1a}
#landingPage .lp-workspace-pill{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--lp-line);font-size:11px;color:#555}
#landingPage .lp-hero-banner{background:linear-gradient(135deg,#6d4cff,#3f79ff);border-radius:20px;padding:22px 24px;color:#fff;position:relative;overflow:hidden}
#landingPage .lp-hero-banner::after{content:"";position:absolute;width:180px;height:180px;right:-50px;top:-60px;border-radius:50%;background:rgba(255,255,255,.12)}
#landingPage .lp-hero-banner .lp-kicker2{font-size:10.5px;letter-spacing:.08em;opacity:.85;margin-bottom:8px;text-transform:uppercase}
#landingPage .lp-hero-banner h4{font-size:21px;margin:0 0 8px;font-weight:800;letter-spacing:-.02em}
#landingPage .lp-hero-banner p{font-size:12.5px;opacity:.92;margin:0 0 14px;max-width:340px;line-height:1.5}
#landingPage .lp-hero-banner button{background:#fff;color:#4a3ad1;border:0;border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:700;cursor:default}
#landingPage .lp-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
#landingPage .lp-metric{background:#fff;border:1px solid var(--lp-line);border-radius:16px;padding:16px 18px}
#landingPage .lp-metric strong{display:block;font-size:24px;font-weight:800;color:#1a1a1a;letter-spacing:-.03em}
#landingPage .lp-metric strong small{font-size:13px;font-weight:600;color:#9a97ac}
#landingPage .lp-metric span{display:block;font-size:11.5px;color:#888;margin-top:4px}
#landingPage .lp-float-card{position:absolute;background:rgba(255,255,255,.88);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.8);border-radius:20px;padding:15px 18px;box-shadow:0 20px 50px rgba(40,38,80,.16);font-size:13px;font-weight:700}
#landingPage .lp-float-a{left:-20px;top:130px}
#landingPage .lp-float-b{right:-20px;bottom:90px}
#landingPage .lp-float-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#111;color:#fff;margin-right:8px}
#landingPage .lp-section{padding:120px 24px}
#landingPage .lp-wrap{width:min(1180px,100%);margin:auto}
#landingPage .lp-kicker{font-size:15px;font-weight:800;color:#6a48ff;margin-bottom:15px}
#landingPage .lp-section-title{font-size:clamp(40px,6vw,76px);line-height:.98;letter-spacing:-.05em;margin:0;max-width:930px;color:var(--lp-text)}
#landingPage .lp-section-copy{color:var(--lp-muted);font-size:20px;line-height:1.5;max-width:760px;margin-top:24px}
#landingPage .lp-dark{background:#09090d;color:#fff;position:relative;overflow:hidden}
#landingPage .lp-dark::before{content:"";position:absolute;width:850px;height:850px;right:-300px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(89,64,255,.35),transparent 66%);filter:blur(20px)}
#landingPage .lp-dark .lp-section-copy{color:#a9a9b4}
#landingPage .lp-dark .lp-section-title{color:#fff}
#landingPage .lp-steps{margin-top:68px;display:grid;grid-template-columns:repeat(7,minmax(185px,1fr));gap:14px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
#landingPage .lp-steps::-webkit-scrollbar{display:none}
#landingPage .lp-step-card{min-height:330px;padding:22px;border-radius:25px;background:linear-gradient(160deg,#17171f,#0f0f14);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between}
#landingPage .lp-step-no{font-size:13px;color:#77778a}
#landingPage .lp-step-icon{font-size:31px}
#landingPage .lp-step-card h3{font-size:20px;letter-spacing:-.03em;margin:12px 0 8px;color:#fff}
#landingPage .lp-step-card p{font-size:13px;line-height:1.55;color:#9c9ca9;margin:0}
#landingPage .lp-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:60px}
#landingPage .lp-bento-card{background:#fff;border-radius:var(--lp-radius);padding:34px;border:1px solid var(--lp-line);min-height:350px;overflow:hidden;position:relative}
#landingPage .lp-span7{grid-column:span 7}
#landingPage .lp-span5{grid-column:span 5}
#landingPage .lp-span4{grid-column:span 4}
#landingPage .lp-span8{grid-column:span 8}
#landingPage .lp-bento-card h3{font-size:31px;letter-spacing:-.045em;margin:0 0 12px;color:var(--lp-text)}
#landingPage .lp-bento-card p{color:var(--lp-muted);font-size:16px;line-height:1.5;max-width:510px}
#landingPage .lp-brain-wrap{position:relative;width:250px;height:250px;margin:25px auto 0}
#landingPage .lp-brain-orb{width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0%,#cdbfff 12%,#7854ff 35%,#287dff 65%,#09205a 100%);box-shadow:0 40px 90px rgba(78,72,255,.35),inset -25px -30px 60px rgba(0,0,0,.22)}
#landingPage .lp-brain-tag{position:absolute;background:#fff;border:1px solid var(--lp-line);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--lp-text);box-shadow:0 8px 20px rgba(20,20,40,.08)}
#landingPage .lp-brain-tag:nth-of-type(1){top:-8px;left:-10px}
#landingPage .lp-brain-tag:nth-of-type(2){top:20px;right:-30px}
#landingPage .lp-brain-tag:nth-of-type(3){bottom:20px;left:-30px}
#landingPage .lp-brain-tag:nth-of-type(4){bottom:-8px;right:-4px}
#landingPage .lp-mini-calendar{margin-top:28px}
#landingPage .lp-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:7px}
#landingPage .lp-cal-dow span{text-align:center;font-size:10px;font-weight:700;color:#9a97ac;text-transform:uppercase}
#landingPage .lp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
#landingPage .lp-cal-grid div{aspect-ratio:1;border-radius:10px;background:#f0f0f3}
#landingPage .lp-cal-grid div.on{background:linear-gradient(135deg,#6d4cff,#3b8dff)}
#landingPage .lp-mini-calendar-note{margin-top:14px;font-size:12.5px;color:var(--lp-muted)}
#landingPage .lp-video-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:25px}
#landingPage .lp-video-strip div{position:relative;height:160px;border-radius:18px;background:linear-gradient(150deg,#13131b,#5a40d7,#e85aa9);display:flex;align-items:flex-end;justify-content:space-between;padding:10px;box-sizing:border-box}
#landingPage .lp-video-strip div:nth-child(2){background:linear-gradient(150deg,#0d2835,#2e748d,#a9e3e4)}
#landingPage .lp-video-strip div:nth-child(3){background:linear-gradient(150deg,#37120e,#c75936,#ffd489)}
#landingPage .lp-video-strip div:nth-child(4){background:linear-gradient(150deg,#25142f,#8052ac,#d1a5ff)}
#landingPage .lp-video-play{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px}
#landingPage .lp-video-dur{color:#fff;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.3);padding:2px 6px;border-radius:6px}
#landingPage .lp-copy-mock{margin-top:30px;background:#f7f7f9;border:1px solid var(--lp-line);border-radius:16px;padding:16px 18px}
#landingPage .lp-copy-mock p{font-size:13px;line-height:1.6;color:var(--lp-text);margin:0 0 10px}
#landingPage .lp-copy-platforms{display:flex;gap:8px}
#landingPage .lp-copy-platforms span{font-size:10.5px;font-weight:700;color:#6a48ff;background:#efe9ff;padding:4px 10px;border-radius:999px}
#landingPage .lp-result{background:#fff;padding-top:140px;padding-bottom:140px;text-align:center}
#landingPage .lp-result .lp-section-title{margin:auto}
#landingPage .lp-result .lp-section-copy{margin:24px auto 0}
#landingPage .lp-stats{width:min(980px,100%);margin:70px auto 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)}
#landingPage .lp-stat{padding:40px 22px}
#landingPage .lp-stat+.lp-stat{border-left:1px solid var(--lp-line)}
#landingPage .lp-stat strong{display:block;font-size:48px;letter-spacing:-.06em}
#landingPage .lp-stat span{color:var(--lp-muted);font-size:14px}
#landingPage .lp-audience{background:#ececf1}
#landingPage .lp-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
#landingPage .lp-chip{background:#fff;border:1px solid var(--lp-line);padding:13px 16px;border-radius:999px;font-weight:650;font-size:14px}
#landingPage .lp-examples{background:#fff}
#landingPage .lp-example-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
#landingPage .lp-example-tab{border:1px solid var(--lp-line);background:var(--lp-bg);color:var(--lp-text);font:inherit;font-size:14px;font-weight:600;padding:9px 22px;border-radius:999px;cursor:pointer}
#landingPage .lp-example-tab.active{background:var(--lp-text);color:#fff;border-color:var(--lp-text)}
#landingPage .lp-example-tab:focus-visible{outline:2px solid var(--lp-purple);outline-offset:2px}
#landingPage .lp-examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
#landingPage .lp-examples-grid[hidden]{display:none}
#landingPage .lp-example-card{background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);overflow:hidden;box-shadow:var(--lp-shadow)}
#landingPage .lp-example-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#f0f0f3}
#landingPage .lp-example-card p{padding:18px 20px;font-size:14px;color:var(--lp-muted);line-height:1.5}
#landingPage .lp-promptlib{background:#fafafc}
#landingPage .lp-plib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
#landingPage .lp-plib-card{background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);overflow:hidden;box-shadow:var(--lp-shadow);transition:transform .18s ease,box-shadow .18s ease}
#landingPage .lp-plib-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(20,20,30,.1)}
#landingPage .lp-plib-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f0f0f3}
#landingPage .lp-plib-meta{padding:14px 16px 16px}
#landingPage .lp-plib-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-purple);background:rgba(108,71,255,.1);padding:3px 9px;border-radius:999px;margin-bottom:8px}
#landingPage .lp-plib-meta p{margin:0;font-size:14px;font-weight:650;color:var(--lp-text)}
#landingPage .lp-pricing{background:#fff}
#landingPage .lp-price-card{max-width:400px;margin:56px auto 0;background:linear-gradient(160deg,#17171f,#0f0f14);color:#fff;border-radius:var(--lp-radius);padding:40px 34px;text-align:center;box-shadow:var(--lp-shadow);border:1px solid rgba(255,255,255,.08)}
#landingPage .lp-price-badge{display:inline-block;background:linear-gradient(90deg,var(--lp-purple),var(--lp-blue));color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:6px 14px;margin-bottom:18px}
#landingPage .lp-price-amount{font-size:48px;font-weight:850;letter-spacing:-.05em}
#landingPage .lp-price-amount span{font-size:16px;font-weight:500;color:#9c9ca9}
#landingPage .lp-price-was{font-size:13px;color:#77778a;text-decoration:line-through;margin-top:6px;margin-bottom:20px}
#landingPage .lp-price-list{list-style:none;text-align:left;margin:20px 0 30px;padding:0}
#landingPage .lp-price-list li{font-size:14px;line-height:1.85;color:#d5d5dd;padding-left:24px;position:relative}
#landingPage .lp-price-list li::before{content:"✓";position:absolute;left:0;color:#8b7bff;font-weight:700}
#landingPage .lp-faq{background:#fff}
#landingPage .lp-faq-list{max-width:700px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px}
#landingPage .lp-faq-list details{background:#f7f7f9;border:1px solid var(--lp-line);border-radius:16px;padding:18px 22px}
#landingPage .lp-faq-list summary{cursor:pointer;font-size:16px;font-weight:700;color:var(--lp-text);list-style:none;letter-spacing:-.01em}
#landingPage .lp-faq-list summary::-webkit-details-marker{display:none}
#landingPage .lp-faq-list summary::after{content:"+";float:right;color:#6a48ff;font-weight:700}
#landingPage .lp-faq-list details[open] summary::after{content:"–"}
#landingPage .lp-faq-list p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--lp-muted)}
#landingPage .lp-cta{padding:120px 24px 70px;background:#09090d;color:#fff;text-align:center;position:relative;overflow:hidden}
#landingPage .lp-cta::before{content:"";position:absolute;width:800px;height:500px;left:50%;bottom:-270px;transform:translateX(-50%);background:radial-gradient(circle,#6444ff 0%,#167fff 30%,rgba(255,79,163,.35) 52%,transparent 70%);filter:blur(40px)}
#landingPage .lp-cta-inner{width:min(980px,100%);margin:auto;position:relative;z-index:1}
#landingPage .lp-cta h2{font-size:clamp(46px,7vw,84px);line-height:.95;letter-spacing:-.06em;margin:0}
#landingPage .lp-cta p{color:#aaaab5;font-size:20px;max-width:670px;margin:24px auto 34px;line-height:1.5}
#landingPage .lp-footer{margin:0;background:#09090d;color:#858590;padding:34px 24px 46px;border-top:1px solid rgba(255,255,255,.08)}
#landingPage .lp-footer-inner{width:min(1180px,100%);margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px}
#landingPage .lp-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
#landingPage .lp-reveal.lp-show{opacity:1;transform:none}
@media(max-width:900px){
  #landingPage .lp-nav-links{display:none}
  #landingPage .lp-app-window{grid-template-columns:1fr;min-height:auto}
  #landingPage .lp-sidebar{display:none}
  #landingPage .lp-workspace{padding:18px}
  #landingPage .lp-dashboard-grid{grid-template-columns:1fr}
  #landingPage .lp-stage{width:calc(100% - 16px)}
  #landingPage .lp-float-card{display:none}
  #landingPage .lp-span7,#landingPage .lp-span5,#landingPage .lp-span4,#landingPage .lp-span8{grid-column:span 12}
  #landingPage .lp-section{padding:90px 20px}
  #landingPage .lp-bento-card{min-height:300px;padding:26px}
  #landingPage .lp-examples-grid{grid-template-columns:1fr}
  #landingPage .lp-plib-grid{grid-template-columns:1fr 1fr;gap:12px}
  #landingPage .lp-stats{grid-template-columns:1fr}
  #landingPage .lp-stat+.lp-stat{border-left:0;border-top:1px solid var(--lp-line)}
}
@media(max-width:600px){
  #landingPage .lp-home-float{right:16px;bottom:16px;padding:12px;border-radius:50%}
  #landingPage .lp-home-float span{display:none}
  #landingPage .lp-nav-inner{width:calc(100% - 24px)}
  #landingPage .lp-brand{height:24px}
  #landingPage .lp-nav-actions .lp-btn-ghost{display:none}
  #landingPage .lp-hero{padding:120px 16px 55px;min-height:auto}
  #landingPage .lp-hero h1{font-size:50px}
  #landingPage .lp-hero-copy{font-size:18px}
  #landingPage .lp-hero-actions{flex-direction:column;align-items:stretch;padding:0 10px}
  #landingPage .lp-app-frame{border-radius:23px;padding:6px}
  #landingPage .lp-app-window{border-radius:18px}
  #landingPage .lp-workspace-top{align-items:flex-start;gap:10px}
  #landingPage .lp-workspace-title{font-size:20px}
  #landingPage .lp-asset-row{grid-template-columns:1fr 1fr}
  #landingPage .lp-asset-row .lp-asset:last-child{display:none}
  #landingPage .lp-section-title{font-size:44px}
  #landingPage .lp-section-copy{font-size:17px}
  #landingPage .lp-video-strip{grid-template-columns:1fr 1fr}
  #landingPage .lp-video-strip div{height:120px}
  #landingPage .lp-footer-inner{flex-direction:column;text-align:center}
}


/* ===== Members page (studio admin only, 2026-09-26) ===== */
.mem-page{display:flex;flex-direction:column;gap:14px}
.mem-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mem-tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.mem-tile-n{font-size:26px;font-weight:700;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.mem-tile-k{font-size:12px;color:var(--muted);margin-top:4px}
.mem-bar{display:flex;gap:8px;flex-wrap:wrap}
.mem-search{flex:1 1 240px;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:14px}
.mem-chips{display:flex;gap:6px;flex-wrap:wrap}
.mem-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.mem-table{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
.mem-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:11px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
.mem-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text)}
.mem-table tbody tr:last-child td{border-bottom:0}
.mem-table a{color:var(--os-purple);text-decoration:none;white-space:nowrap}
.mem-email{font-weight:600;overflow-wrap:anywhere}
.mem-table td:first-child{min-width:220px}
.mem-table td:nth-child(3){min-width:118px}
.mem-biz{font-size:12px;color:var(--muted);margin-top:2px}
.mem-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.mem-st{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.mem-st-paid{background:#e3f5ea;color:#1f7a45}
.mem-st-trial{background:var(--os-purple-wash,#efe9ff);color:var(--os-purple)}
.mem-st-finished{background:#f0efec;color:#6b6b6b}
.mem-st-voucher{background:#fff3dc;color:#9a5b00}
.mem-st-refused{background:#fdeaea;color:#b23b3b}
.mem-st-studio{background:#2a2a2a;color:#fff}
.mem-due{display:inline-block;margin-left:4px;font-size:11px;font-weight:700;color:#b23b3b}
.mem-pay-btn{padding:7px 12px;font-size:12.5px;white-space:nowrap}
.mem-modal{max-width:440px}
.mem-modal h3{margin:22px 0 2px}
.mem-form{display:flex;flex-direction:column;gap:6px;padding:8px clamp(18px,3vw,32px) 4px}
.mem-form label{font-size:12px;font-weight:600;color:var(--muted);margin-top:6px}
.mem-form input[type=number],.mem-form input[type=text],.mem-form select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:14px}
.mem-form label.mem-check{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--text);font-size:13px}
.mem-form label.mem-check input{width:16px;height:16px;margin:0}
.mem-preview{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--text)}
.mem-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px clamp(18px,3vw,32px) 20px}
.mem-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.mem-hist-modal{max-width:520px}
.mem-hist-list{display:flex;flex-direction:column;gap:10px;padding:8px clamp(18px,3vw,32px) 4px;overflow-y:auto;max-height:60vh}
.mem-pay-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.mem-pay-item.is-void{opacity:.75;background:var(--panel-2)}
.mem-pay-item.is-void .mem-pay-amt{text-decoration:line-through}
.mem-pay-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mem-pay-amt{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}
.mem-pay-cancel{margin-top:8px}
.mem-cancel-btn{padding:6px 12px;font-size:12.5px}
.mem-warn{margin:0 0 8px;font-size:13px;color:var(--text)}
.mem-reason{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:13px}
.mem-confirm-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.btn.mem-danger{background:#b23b3b;border-color:#b23b3b;color:#fff}
/* Admin monitoring (2026-09-26): money summary, needs-attention list, member details */
.mem-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.mem-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mem-card-head h3{margin:0;font-size:16px;color:var(--text)}
.mem-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.mem-money{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:720px){.mem-money{grid-template-columns:1fr}}
.mem-ledger{margin:0;display:flex;flex-direction:column}
.mem-ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.mem-ledger-row dt{color:var(--text)}
.mem-ledger-row dt .mem-biz{display:inline;margin-left:4px}
.mem-ledger-row dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.mem-ledger-row.is-minus dd{color:var(--muted)}
.mem-ledger-row.is-total{border-bottom:0;border-top:2px solid var(--text);margin-top:2px;padding-top:9px;font-weight:700;font-size:15px}
.mem-ledger-row.is-total.is-bad dd{color:#b23b3b}
.mem-money-side{display:flex;flex-direction:column;gap:12px}
.mem-kv{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--panel-2)}
.mem-kv > span:first-child{font-size:12px;color:var(--muted)}
.mem-kv strong{font-size:20px;font-variant-numeric:tabular-nums;color:var(--text)}
.mem-kv strong.is-good{color:#1f7a45}
.mem-kv strong.is-bad{color:#b23b3b}
.mem-attn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mem-attn li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.mem-attn li:first-child{border-top:0;padding-top:2px}
.mem-attn-main{min-width:0;flex:1 1 280px;font-size:13px}
.mem-attn-main .mem-st{margin-right:4px}
.mem-small-btn{padding:6px 11px;font-size:12.5px;white-space:nowrap;text-decoration:none}
.mem-detail-modal{max-width:560px}
.mem-detail-body{padding:6px clamp(18px,3vw,32px) 4px;overflow-y:auto;max-height:62vh;display:flex;flex-direction:column;gap:8px}
.mem-detail-body > *{flex-shrink:0}
.mem-detail-modal .mem-actions{flex-wrap:wrap}
.mem-detail-modal .mem-actions .btn{text-decoration:none}
.mem-detail-body h4{margin:10px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mem-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 16px}
.mem-facts dt{font-size:11.5px;color:var(--muted)}
.mem-facts dd{margin:1px 0 0;font-size:13.5px;color:var(--text);overflow-wrap:anywhere}
.mem-meter{height:8px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.mem-meter span{display:block;height:100%;background:var(--os-purple)}
.mem-meter.is-high span{background:#b23b3b}
.mem-mini-wrap{overflow-x:auto}
.mem-mini{width:100%;border-collapse:collapse;font-size:13px}
.mem-mini th{text-align:left;font-size:11px;font-weight:700;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.mem-mini td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--text)}
.mem-mini th:not(:first-child),.mem-mini td:not(:first-child){text-align:right}
.mem-recent{list-style:none;margin:0;padding:0;font-size:12.5px}
.mem-recent li{display:grid;grid-template-columns:minmax(110px,auto) 1fr auto;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);color:var(--text)}
.mem-recent li span:first-child{color:var(--muted)}
.mem-steps{display:flex;flex-wrap:wrap;gap:6px}
button.mem-email{display:block;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--os-purple);text-align:left;cursor:pointer}
button.mem-email:hover{text-decoration:underline}
button.mem-email:focus-visible{outline:2px solid var(--os-purple);outline-offset:2px;border-radius:4px}
.mem-step{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--text)}
/* Business hours picker (2026-09-26) */
.hours-picker{display:flex;flex-direction:column;gap:8px}
.hours-rows{display:flex;flex-direction:column;gap:8px}
.hours-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.hours-row select{flex:1 1 0;min-width:0}
.hours-row select:first-child{flex:1.2 1 0}
.hours-mode{max-width:340px}
.hours-to{font-size:12.5px;color:var(--muted)}
.hours-x{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:17px;flex:0 0 34px}
.hours-add{align-self:flex-start;background:none;border:0;padding:2px 0;color:var(--os-purple);font-weight:600;font-size:12.5px;cursor:pointer}
#companyFields label.hours-ph{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);text-transform:none;letter-spacing:0;font-weight:400;margin:0}
#companyFields label.hours-ph input{width:16px;height:16px;margin:0;flex:0 0 16px}
.hours-legacy{font-size:12px;color:var(--muted)}
/* Pricing: three plans (2026-09-26) */
#landingPage .lp-price-sub{max-width:560px;margin:18px auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--lp-muted)}
#landingPage .lp-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;max-width:980px;margin:48px auto 0;align-items:stretch}
#landingPage .lp-price-grid .lp-price-card{max-width:none;margin:0;display:flex;flex-direction:column;align-items:center;padding:32px 26px}
#landingPage .lp-price-grid .lp-price-card .lp-btn{margin-top:auto;width:100%}
#landingPage .lp-price-light{background:#fff;color:var(--lp-text);border:1px solid var(--lp-line);box-shadow:none}
#landingPage .lp-price-light .lp-price-amount span{color:var(--lp-muted)}
#landingPage .lp-price-name{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;opacity:.75}
#landingPage .lp-price-grid .lp-price-amount{font-size:40px}
#landingPage .lp-price-note{font-size:13px;margin:8px 0 24px;color:var(--lp-muted)}
#landingPage .lp-price-best .lp-price-note{color:#b9b9c8}
#landingPage .lp-price-note s{opacity:.8}
#landingPage .lp-price-includes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;max-width:980px;margin:28px auto 0}
#landingPage .lp-price-includes li{color:var(--lp-text)}
/* Upgrade screen plan picker (2026-09-26) */
.pay-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 20px;text-align:left}
.pay-plan{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font:inherit;text-align:left}
.pay-plan:hover{border-color:var(--os-purple)}
.pay-plan.on{border-color:var(--os-purple);box-shadow:0 0 0 3px var(--os-purple-wash,#efe9ff)}
.pay-plan:focus-visible{outline:2px solid var(--os-purple);outline-offset:2px}
.pay-plan-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pay-plan-price{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.pay-plan-price small{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px}
.pay-plan-note{font-size:12px;color:var(--muted)}
#landingPage .lp-price-grid .lp-price-best{position:relative;overflow:visible}
#landingPage .lp-price-grid .lp-price-best .lp-price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
/* Monthly AI allowance meter (2026-09-26) */
.ai-meter{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px 16px;margin:4px 0 18px;max-width:560px}
.ai-meter-top{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.ai-meter-label{font-weight:700;color:var(--text)}
.ai-meter-pct{font-weight:700;color:var(--os-purple);font-variant-numeric:tabular-nums}
.ai-meter-bar{height:8px;border-radius:99px;background:var(--panel-2);margin:8px 0;overflow:hidden}
.ai-meter-bar span{display:block;height:100%;border-radius:99px;background:var(--os-purple)}
.ai-meter.is-high .ai-meter-pct{color:#b23b3b}
.ai-meter.is-high .ai-meter-bar span{background:#b23b3b}
.ai-meter-note{font-size:12px;color:var(--muted)}
#landingPage .lp-price-fine{max-width:620px;margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--lp-muted)}

/* Admin charts (2026-09-27) — colours shared by bars, rings and legend dots */
.ch-ai{background:var(--os-purple);fill:var(--os-purple);stroke:var(--os-purple)}
.ch-trial{background:#2a9d9f;fill:#2a9d9f;stroke:#2a9d9f}
.ch-studio{background:#b3aca2;fill:#b3aca2;stroke:#b3aca2}
.ch-running{background:#4f86d9;fill:#4f86d9;stroke:#4f86d9}
.ch-profit{background:#2e9e5b;fill:#2e9e5b;stroke:#2e9e5b}
.ch-lapsed{background:#6f655d;fill:#6f655d;stroke:#6f655d}
.ch-refused{background:#c94c4c;fill:#c94c4c;stroke:#c94c4c}
.ch-stack{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.ch-seg{display:block;height:100%}
.ch-seg + .ch-seg{box-shadow:inset 2px 0 0 var(--panel)}
.ch-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.ch-key{display:inline-flex;align-items:center;gap:6px}
.ch-key b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ch-dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.ch-warn{color:#b23b3b}
.mem-chart-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ch-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ch-donut{width:140px;height:140px;flex:0 0 auto}
.ch-track{fill:none;stroke:var(--panel-2);stroke-width:18}
.ch-arc{fill:none;stroke-width:18}
.ch-donut-n{font-size:28px;font-weight:700;fill:var(--text)}
.ch-donut-k{font-size:11px;fill:var(--muted)}
.ch-donut-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text);flex:1 1 140px}
.ch-donut-legend li{display:flex;align-items:center;gap:8px}
.ch-donut-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.ch-growth{width:100%;height:auto;display:block}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-axis{font-size:10px;fill:var(--muted)}
.ch-hbars{display:flex;flex-direction:column;gap:8px}
.ch-hrow{display:grid;grid-template-columns:minmax(90px,180px) 1fr 96px;align-items:center;gap:10px}
.ch-hrow .ch-hname{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ch-htrack{position:relative;height:12px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.ch-hfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.ch-cap{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--text);opacity:.55}
.ch-hval{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
@media (max-width:520px){.ch-hrow{grid-template-columns:1fr auto}.ch-htrack{grid-column:1 / -1;order:3}}
.ch-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px;align-items:end}
.ch-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ch-col-v{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.ch-col-bar{height:80px;width:100%;max-width:34px;display:flex;align-items:flex-end;background:var(--panel-2);border-radius:6px;overflow:hidden}
.ch-col-bar span{display:block;width:100%;border-radius:6px 6px 0 0}
.ch-col-k{font-size:11px;color:var(--muted)}

/* Member dashboard charts (2026-09-27) */
.dash-charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:14px;max-width:1380px;margin:0 auto 14px}
@media (max-width:820px){.dash-charts{grid-template-columns:1fr}}
.dash-chart{display:flex;flex-direction:column;min-width:0}
.dash-chart-body{padding:0 18px 12px;display:flex;flex-direction:column;gap:10px}
.dash-chart-note{margin:0;padding:0 18px 16px;font-size:12.5px;color:var(--os-muted,#737C91)}
.dash-chart-note b{color:var(--os-ink,#172033)}
.dash-prog{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.dash-ring{width:120px;height:120px;flex:0 0 auto}
.dash-ring .ch-arc,.dash-ring .ch-track{stroke-width:14}
.dash-ring-off{fill:none;stroke:#E9ECF3}
.dash-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1 1 150px;min-width:0}
.dash-step{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:3px 4px;border-radius:8px;font:inherit;font-size:12.5px;color:var(--os-muted,#737C91);text-align:left;cursor:pointer}
.dash-step:hover{background:#F4F5FA}
.dash-step i{font-style:normal;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:1px solid var(--os-line,#E5E9F2);flex:0 0 auto}
.dash-step.is-done{color:var(--os-ink,#172033)}
.dash-step.is-done i{background:var(--os-purple);border-color:var(--os-purple);color:#fff}
.dash-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.dash-mcol{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;font:inherit;cursor:pointer;min-width:0}
.dash-mval{font-size:11px;font-weight:600;color:var(--os-ink,#172033);min-height:14px;font-variant-numeric:tabular-nums}
.dash-mbar{height:170px;width:100%;max-width:26px;display:flex;align-items:flex-end;background:#F1F3F8;border-radius:6px;overflow:hidden}
.dash-mplan{display:flex;align-items:flex-end;width:100%;background:color-mix(in srgb, var(--os-purple) 30%, #fff);border-radius:6px 6px 0 0;overflow:hidden}
.dash-mplan > span{display:block;width:100%}
.dash-plan-dot{background:color-mix(in srgb, var(--os-purple) 30%, #fff)}
.dash-mlbl{font-size:10.5px;color:var(--os-muted,#737C91)}
.dash-mcol.is-now .dash-mlbl{color:var(--os-purple);font-weight:700}
.dash-mcol:focus-visible,.dash-day:focus-visible,.dash-step:focus-visible{outline:2px solid var(--os-purple);outline-offset:2px}
.dash-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dash-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;border-radius:10px;border:1px solid var(--os-line,#E5E9F2);background:#F6F7FB;font:inherit;cursor:pointer;color:var(--os-muted,#737C91)}
.dash-day.is-plan{background:var(--os-purple);border-color:var(--os-purple);color:#fff}
.dash-day.is-out{background:#2e9e5b;border-color:#2e9e5b;color:#fff}
.dash-day.is-today{box-shadow:0 0 0 2px var(--os-ink,#172033) inset}
.dash-dow{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.85;min-height:11px}
.dash-dnum{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dash-dcount{position:absolute;bottom:2px;right:5px;font-size:9.5px;font-weight:700}
.dash-empty-dot{background:#F6F7FB;border:1px solid var(--os-line,#E5E9F2)}
@media (max-width:820px){.dash-mbar{height:120px}}

/* Photo Auto-fix (2026-09-27) */
.af-modal{max-width:560px}
.af-modal h3{margin:22px 0 2px}
.af-compare{position:relative;margin:10px clamp(18px,3vw,32px) 0;border-radius:12px;overflow:hidden;background:#EEF0F5;touch-action:none;cursor:ew-resize;user-select:none;line-height:0}
.af-compare img{display:block;width:100%;max-height:52vh;object-fit:contain;pointer-events:none}
.af-after-clip{position:absolute;inset:0}
.af-after-clip img{width:100%;height:100%;object-fit:contain}
.af-handle{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.af-handle span{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.af-tag{position:absolute;top:8px;font-size:11px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.af-tag-l{left:8px}
.af-tag-r{right:8px}
.af-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.7);font-size:13px;font-weight:600;color:var(--text);line-height:1.3;text-align:center;padding:0 16px}
.af-busy[hidden]{display:none}
.af-slider{display:block;width:calc(100% - 2 * clamp(18px,3vw,32px));margin:10px auto 0;accent-color:var(--os-purple)}
.af-levels{display:flex;gap:6px;margin:10px clamp(18px,3vw,32px) 0}
.af-level{flex:1;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.af-level.on{background:var(--os-purple);border-color:var(--os-purple);color:#fff}
.af-level:focus-visible{outline:2px solid var(--os-purple);outline-offset:2px}
.ref-fix-btn[hidden]{display:none}

/* AI allowance visibility (2026-09-27) */
.app-topbar-right{flex:none;display:flex;align-items:center;padding:0 16px 0 6px}
.app-topbar-right:empty{display:none}
.aiu-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--os-line,#E5E9F2);background:var(--panel,#fff);color:var(--os-ink,#172033);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.aiu-pill:hover{border-color:var(--os-purple)}
.aiu-pill:focus-visible{outline:2px solid var(--os-purple);outline-offset:2px}
.aiu-pill-bar{width:34px;height:6px;border-radius:999px;background:#E9ECF3;overflow:hidden;display:inline-block}
.aiu-pill-bar > span{display:block;height:100%;background:var(--os-purple)}
.aiu-pill.is-high{border-color:#e0a13a;color:#9a5b00}
.aiu-pill.is-high .aiu-pill-bar > span{background:#e0a13a}
.aiu-pill.is-full{border-color:#c94c4c;color:#b23b3b}
.aiu-pill.is-full .aiu-pill-bar > span{background:#c94c4c}
.aiu-pop{position:fixed;z-index:3000;width:min(320px,calc(100vw - 16px));background:var(--panel,#fff);border:1px solid var(--os-line,#E5E9F2);border-radius:14px;box-shadow:0 18px 50px rgba(23,32,51,.18);padding:14px 16px;display:flex;flex-direction:column;gap:8px;color:var(--os-ink,#172033)}
.aiu-pop-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.aiu-pop-top span{font-weight:700;font-variant-numeric:tabular-nums}
.aiu-pop .ai-meter-bar{margin:0}
.aiu-pop .ai-meter-bar.is-high span{background:#e0a13a}
.aiu-pop .ai-meter-bar.is-full span{background:#c94c4c}
.aiu-sub{margin:0;font-size:12px;color:var(--os-muted,#737C91)}
.aiu-sub-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--os-muted,#737C91);margin-top:4px}
.aiu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aiu-list li{display:grid;grid-template-columns:1fr 70px 38px;align-items:center;gap:8px;font-size:12.5px}
.aiu-list b{text-align:right;font-variant-numeric:tabular-nums}
.aiu-mini{height:6px;border-radius:999px;background:#E9ECF3;overflow:hidden}
.aiu-mini > span{display:block;height:100%;background:var(--os-purple)}
.aiu-empty{margin:0;font-size:12.5px;color:var(--os-muted,#737C91)}
.aiu-foot{margin:4px 0 0;font-size:11.5px;color:var(--os-muted,#737C91);border-top:1px solid var(--os-line,#E5E9F2);padding-top:8px}
.aiu-notice{max-width:1380px;margin:0 auto 12px;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.45;background:#FFF6E5;border:1px solid #F1D39B;color:#6b4300}
.aiu-notice.is-full{background:#FDECEC;border-color:#F0B8B8;color:#8a2626}
.aiu-notice[hidden]{display:none}
.ai-meter-split{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--os-muted,#737C91)}
.ai-meter-split b{color:var(--os-ink,#172033);font-variant-numeric:tabular-nums}
.trial-list{max-width:1380px;margin:0 auto 14px;background:var(--panel,#fff);border:1px solid var(--os-line,#E5E9F2);border-radius:18px;padding:14px 18px}
.trial-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--os-ink,#172033)}
.trial-list-head span{font-size:12px;font-weight:600;color:var(--os-purple)}
.trial-list ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 18px}
.trial-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--os-ink,#172033)}
.trial-list li i{font-style:normal;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:1px solid var(--os-line,#E5E9F2);color:var(--os-purple);flex:0 0 auto}
.trial-list li.is-used{color:var(--os-muted,#737C91)}
.trial-list li.is-used i{background:#E9ECF3;color:var(--os-muted,#737C91)}
.trial-list li span{margin-left:auto;font-size:11.5px;color:var(--os-muted,#737C91)}
.trial-list li.is-free span{color:#1f7a45;font-weight:600}
.trial-list p{margin:10px 0 0;font-size:12px;color:var(--os-muted,#737C91)}
@media (max-width:820px){.app-topbar-right{padding:0 10px 0 0}.aiu-pill-bar{display:none}}

/* ===== Midnight theme (2026-09-27, explicit request) =====
   Dark look taken from the landing page's "Brief the team once" section:
   near-black ground, a soft indigo glow top-right, dark cards with a thin
   light border, white type, the brand purple as the accent. Replaces the
   old Citrus and Pink themes (a saved Citrus/Pink choice falls back to the
   default purple-and-white). Tokens first, then the handful of rules that
   hard-code white or dark-text colours. The landing page keeps its own
   design; the "paper" result view (.res-doc) deliberately stays white. */
html[data-color-theme="midnight"]{
  color-scheme:dark;
  --os-bg:#0B0B11; --os-card:#15151D; --os-ink:#F3F3F7; --os-muted:#9C9CB0; --os-line:#262634;
  --os-purple:#7B6CF6; --os-purple-2:#9D8CFF; --os-purple-wash:#1E1B33; --os-green:#2FBF8A;
  --os-purple-rgb:123,108,246; --os-purple-hover:#8E80FF; --os-shadow:0 18px 55px rgba(0,0,0,.45);
  --bg:#0B0B11; --panel:#15151D; --panel-2:#1C1C27; --line:#262634;
  --gold:#9D8CFF; --gold-soft:#9D8CFF; --gold-deep:#B3A6FF; --gold-wash:#1A1830;
  --text:#F3F3F7; --muted:#9C9CB0; --dim:#6E6E84;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); --shadow-lift:0 4px 14px rgba(123,108,246,.25);
}
html[data-color-theme="midnight"] body{
  background:
    radial-gradient(circle at 88% 0%,rgba(98,76,255,.30),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(98,76,255,.10),transparent 32%),
    #0B0B11;
  color:var(--text);
}
:where(html[data-color-theme="midnight"]) .app-topbar,:where(html[data-color-theme="midnight"]) .site-head,:where(html[data-color-theme="midnight"]) .panel,:where(html[data-color-theme="midnight"]) .os-metric,:where(html[data-color-theme="midnight"]) .hero,:where(html[data-color-theme="midnight"]) .profile-bar,:where(html[data-color-theme="midnight"]) .step-tab,:where(html[data-color-theme="midnight"]) .guide,:where(html[data-color-theme="midnight"]) .guide .g-body,:where(html[data-color-theme="midnight"]) .dash-card,:where(html[data-color-theme="midnight"]) .dash-profile-strip,:where(html[data-color-theme="midnight"]) .sheet-block,:where(html[data-color-theme="midnight"]) .prod-section,:where(html[data-color-theme="midnight"]) .shot-card,:where(html[data-color-theme="midnight"]) .cw-board,:where(html[data-color-theme="midnight"]) .hist-card,:where(html[data-color-theme="midnight"]) .focus-card,:where(html[data-color-theme="midnight"]) .cw-plat,:where(html[data-color-theme="midnight"]) .text-choice-btn,:where(html[data-color-theme="midnight"]) .result-box pre,:where(html[data-color-theme="midnight"]) .output-box textarea,:where(html[data-color-theme="midnight"]) .content-box,:where(html[data-color-theme="midnight"]) .res-head,:where(html[data-color-theme="midnight"]) .menu-head,:where(html[data-color-theme="midnight"]) .modal-actions,:where(html[data-color-theme="midnight"]) .res-foot,:where(html[data-color-theme="midnight"]) .menu-sidebar,:where(html[data-color-theme="midnight"]) .fb-caption-box,:where(html[data-color-theme="midnight"]) .cal-post-copy-box,:where(html[data-color-theme="midnight"]) .prompt-lib,:where(html[data-color-theme="midnight"]) .prompt-lib > summary,:where(html[data-color-theme="midnight"]) .prompt-lib-card,:where(html[data-color-theme="midnight"]) .vpl-card,:where(html[data-color-theme="midnight"]) .plan-research-row,:where(html[data-color-theme="midnight"]) .video-tool-btn,:where(html[data-color-theme="midnight"]) .shared-view-box,:where(html[data-color-theme="midnight"]) .cal-unsched-row,:where(html[data-color-theme="midnight"]) .assistant-msg.bot,:where(html[data-color-theme="midnight"]) .assistant-input,:where(html[data-color-theme="midnight"]) .auth-google-btn,:where(html[data-color-theme="midnight"]) .chip,:where(html[data-color-theme="midnight"]) .field input[type=text],:where(html[data-color-theme="midnight"]) .field input[type=month],:where(html[data-color-theme="midnight"]) .field textarea,:where(html[data-color-theme="midnight"]) .field select,:where(html[data-color-theme="midnight"]) .lang-select,:where(html[data-color-theme="midnight"]) .profile-bar select,:where(html[data-color-theme="midnight"]) .profile-bar input[type=text],:where(html[data-color-theme="midnight"]) .os-command-actions .dash-lang-select,:where(html[data-color-theme="midnight"]) .dash-profile-lang-select,:where(html[data-color-theme="midnight"]) .ss-progress{background:var(--panel);color:var(--text);border-color:var(--line)}
:where(html[data-color-theme="midnight"]) .fb-caption-text,:where(html[data-color-theme="midnight"]) .pl-highlight > .prompt-lib-inner,:where(html[data-color-theme="midnight"]) .plc-tag,:where(html[data-color-theme="midnight"]) .fi-group-head,:where(html[data-color-theme="midnight"]) .shot-card-head,:where(html[data-color-theme="midnight"]) .cw-board-head,:where(html[data-color-theme="midnight"]) .sheet-block .sb-title,:where(html[data-color-theme="midnight"]) .route-guide,:where(html[data-color-theme="midnight"]) .field-note-important,:where(html[data-color-theme="midnight"]) .s2-carry,:where(html[data-color-theme="midnight"]) .amend-box,:where(html[data-color-theme="midnight"]) .dash-upnext .day,:where(html[data-color-theme="midnight"]) .cal-unsched-daypick,:where(html[data-color-theme="midnight"]) .img-field-del,:where(html[data-color-theme="midnight"]) .ss-lib-card-add,:where(html[data-color-theme="midnight"]) .ss-lib-card-del,:where(html[data-color-theme="midnight"]) .assistant-chip,:where(html[data-color-theme="midnight"]) .assistant-badge,:where(html[data-color-theme="midnight"]) .js-row-soon,:where(html[data-color-theme="midnight"]) .dash-step:hover,:where(html[data-color-theme="midnight"]) .dash-mbar,:where(html[data-color-theme="midnight"]) .dash-day,:where(html[data-color-theme="midnight"]) .dash-empty-dot,:where(html[data-color-theme="midnight"]) .af-compare,:where(html[data-color-theme="midnight"]) .aiu-pill-bar,:where(html[data-color-theme="midnight"]) .aiu-mini,:where(html[data-color-theme="midnight"]) .trial-list li.is-used i,:where(html[data-color-theme="midnight"]) .site-head .sidebar-pipeline .step-tab .num,:where(html[data-color-theme="midnight"]) .pls-link-btn,:where(html[data-color-theme="midnight"]) .shared-view{background:var(--panel-2);color:var(--text);border-color:var(--line)}
:where(html[data-color-theme="midnight"]) .app-topbar,:where(html[data-color-theme="midnight"]) .site-head{background:rgba(13,13,20,.92);backdrop-filter:blur(12px)}
:where(html[data-color-theme="midnight"]) .panel{border-color:rgba(255,255,255,.06)}
:where(html[data-color-theme="midnight"]) .btn.ghost{background:var(--os-purple-wash);border-color:#2E2A4D;color:#C9C0FF}
:where(html[data-color-theme="midnight"]) .btn.ghost:hover{background:#27234A}
:where(html[data-color-theme="midnight"]) .dash-card{box-shadow:var(--os-shadow)}
:where(html[data-color-theme="midnight"]) .dash-card-head h3,:where(html[data-color-theme="midnight"]) .os-metric strong,:where(html[data-color-theme="midnight"]) .dash-chart-note b,:where(html[data-color-theme="midnight"]) .dash-mval,:where(html[data-color-theme="midnight"]) .dash-step.is-done,:where(html[data-color-theme="midnight"]) .trial-list li{color:var(--text)}
:where(html[data-color-theme="midnight"]) .ch-donut-n{fill:var(--text)}
:where(html[data-color-theme="midnight"]) .ch-track{stroke:#23232F}
:where(html[data-color-theme="midnight"]) .dash-ring-off{stroke:#23232F}
:where(html[data-color-theme="midnight"]) .dash-mplan,:where(html[data-color-theme="midnight"]) .dash-plan-dot{background:rgba(123,108,246,.35)}
:where(html[data-color-theme="midnight"]) .dash-day{color:#8A8AA0}
:where(html[data-color-theme="midnight"]) .dash-day.is-today{box-shadow:0 0 0 2px #fff inset}
:where(html[data-color-theme="midnight"]) .editor-saved,:where(html[data-color-theme="midnight"]) .gallery-count,:where(html[data-color-theme="midnight"]) .cal-track-summary,:where(html[data-color-theme="midnight"]) .cal-progress,:where(html[data-color-theme="midnight"]) .shared-view-title,:where(html[data-color-theme="midnight"]) .shared-view-copy{color:var(--text)}
:where(html[data-color-theme="midnight"]) .aiu-notice{background:rgba(224,161,58,.12);border-color:rgba(224,161,58,.35);color:#F4D9A6}
:where(html[data-color-theme="midnight"]) .aiu-notice.is-full{background:rgba(201,76,76,.14);border-color:rgba(201,76,76,.4);color:#F5C2C2}
:where(html[data-color-theme="midnight"]) .aiu-pill{background:var(--panel);color:var(--text)}
:where(html[data-color-theme="midnight"]) .af-busy{background:rgba(11,11,17,.7);color:var(--text)}
:where(html[data-color-theme="midnight"]) .af-handle,:where(html[data-color-theme="midnight"]) .af-handle span{background:#fff}
:where(html[data-color-theme="midnight"]) .modal,:where(html[data-color-theme="midnight"]) .daypop-box,:where(html[data-color-theme="midnight"]) .aiu-pop{background:var(--panel);color:var(--text);border-color:var(--line)}
:where(html[data-color-theme="midnight"]) .modal-overlay{background:rgba(0,0,0,.6)}
:where(html[data-color-theme="midnight"]) .mem-table th{background:var(--panel-2)}
:where(html[data-color-theme="midnight"]) .strat-card,:where(html[data-color-theme="midnight"]) .strat-work,:where(html[data-color-theme="midnight"]) .mem-card,:where(html[data-color-theme="midnight"]) .trial-list{background:var(--panel)}
:where(html[data-color-theme="midnight"]) .result-full{background:var(--gold-wash);color:var(--text)}
:where(html[data-color-theme="midnight"]) .result-full th{background:#23203D;color:#D6CFFF}
:where(html[data-color-theme="midnight"]) ::selection{background:var(--os-purple);color:#fff}
:where(html[data-color-theme="midnight"]) .theme-swatch.on{box-shadow:0 0 0 2px #0B0B11, 0 0 0 4px var(--os-purple)}
:where(html[data-color-theme="midnight"]) .topbar-logo{content:url(/images/logo-primary-light.png)}
:where(html[data-color-theme="midnight"]) .foot-logo{content:url(/images/logo-tagline-light.png)}
:where(html[data-color-theme="midnight"]) .os-command{background:radial-gradient(circle at 85% 20%,rgba(157,140,255,.35),transparent 45%),linear-gradient(135deg,#231B5E 0%,#3B2DAE 55%,#5A45E6 100%);border:1px solid rgba(157,140,255,.25)}
:where(html[data-color-theme="midnight"]) .os-command::after{border-color:rgba(255,255,255,.06)}
:where(html[data-color-theme="midnight"]) .os-command-actions .os-primary{background:#fff;color:#231B5E}
/* Midnight: parts whose light look came from gradients, and buttons that
   used the ink colour as their fill (ink is near-white in this theme). */
:where(html[data-color-theme="midnight"]) .panel-head-band{background:linear-gradient(180deg,#191924,#15151D);border-color:var(--line)}
:where(html[data-color-theme="midnight"]) .step-tab.active,:where(html[data-color-theme="midnight"]) .site-head .sidebar-pipeline .step-tab.active{background:linear-gradient(135deg,#221E42,#1A1830);border-color:#3A3170}
:where(html[data-color-theme="midnight"]) .studio-pill.on,:where(html[data-color-theme="midnight"]) .studio-export,:where(html[data-color-theme="midnight"]) .mw-next,:where(html[data-color-theme="midnight"]) .field-info-btn:hover{background:var(--os-purple);border-color:var(--os-purple);color:#fff}
:where(html[data-color-theme="midnight"]) .ch-cap{background:#fff}
:where(html[data-color-theme="midnight"]) .assistant-head{background:linear-gradient(135deg,#231B5E,#3B2DAE)}
:where(html[data-color-theme="midnight"]) .cal-card.is-ready,:where(html[data-color-theme="midnight"]) .cal-card.is-done{background:var(--panel-2)}
:where(html[data-color-theme="midnight"]) .video-cta{background:linear-gradient(135deg,#1E1B33,#15151D)}
#landingPage [data-landing-cta][hidden]{display:none !important}
/* Midnight: Video Studio defines its own colour tokens on .ss-app, so give
   it the dark set too (same values as the rest of the Midnight theme). */
:where(html[data-color-theme="midnight"]) .ss-app{
  --panel:#15151D; --panel-2:#1C1C27; --line:#262634;
  --text:#F3F3F7; --muted:#9C9CB0; --dim:#6E6E84;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.35);
}
:where(html[data-color-theme="midnight"]) .ss-progress{background:rgba(11,11,17,.9)}

/* Step 1 -> Monthly Plan hand-off and Calendar snapshot (2026-09-27) */
.survey-focus,.cal-snapshot{margin:16px 0 4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--os-purple-wash,#F1EEFF);display:flex;flex-direction:column;gap:8px;color:var(--text)}
.survey-focus strong,.cal-snapshot-head strong{font-size:14px}
.survey-focus p,.cal-snapshot-focus{margin:0;font-size:13px;line-height:1.5;color:var(--text)}
.survey-focus-row{display:flex;gap:8px;flex-wrap:wrap}
.cal-snapshot{background:var(--panel)}
.cal-snapshot-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cal-snapshot-head span{font-size:12px;color:var(--muted)}
.cal-snapshot-body{margin-top:6px}
.cal-snapshot-body[hidden]{display:none}

/* Photos used by Video Ideas / Shot List (2026-09-28) */
.vref-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.vref-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;font-size:12px;color:var(--text)}
.vref-item img{width:92px;height:92px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.vref-item.off img{opacity:.35;filter:grayscale(1)}
.vref-item.off span{text-decoration:line-through;color:var(--muted)}
.vref-btn{padding:4px 10px;font-size:12px}

/* Commercial storyboard: the closing notes card is not a scene (2026-10-02) */
.shot-card-closing{border-style:dashed}
.shot-card-closing .shot-label{color:var(--muted)}

/* Video Studio end card (2026-10-02) */
.endcard-modal{max-width:600px}
.endcard-modal h3{margin:22px 0 2px}
.endcard-modal .ec-row{display:flex;align-items:center;gap:8px;margin:12px clamp(18px,3vw,32px) 0;font-weight:600}
.endcard-modal .ec-field{display:flex;flex-direction:column;gap:4px;margin:10px clamp(18px,3vw,32px) 0;font-size:13px;color:var(--muted)}
.endcard-modal .ec-field input,.endcard-modal .ec-field select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;color:var(--text);background:var(--panel)}
.endcard-modal .ec-preview{display:flex;justify-content:center;margin:14px clamp(18px,3vw,32px) 0}
.endcard-modal .ec-preview canvas{border-radius:10px;max-width:100%;height:auto;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.endcard-modal .ec-warn{color:#b45309}
#ssEndCard.on{border-color:#d4af37}