/* AI Studio brand pass (2026-11-05): one light look across every studio page,
 * site brand = logo red #e3242b + black, orange #ff6300 only on buttons.
 * Loaded last on studio views via ai-landing/partials/studio-brand.blade.php. */

/* 1. The old "SF / AI Studio" mini header: the site nav already sits above it. */
.fs-mast, .fpc-masthead, .fps-masthead { display:none !important; }

/* 2. Brand tokens (light). `body main:is(.fs,.psx)[class]` outranks .fs-v2 / .vm.fs-v2 skins. */
body main:is(.fs,.psx)[class], body main.fpc[class], body main.fps[class] {
  --paper:#f6f6f7; --panel:#ffffff; --panel-2:#f1f1f3; --ink:#111114; --muted:#5d5d68; --line:#e4e4e8;
  --accent:#e3242b; --yellow:#e3242b; --accent-ink:#ffffff; --red:#e3242b; --sfg-orange:#ff6300;
  background:var(--paper); color:var(--ink);
}
body main:is(.fs,.psx)[class] .fs-eyebrow, body main:is(.fs,.psx)[class] .fs-comparison-label { color:var(--red); }
body main:is(.fs,.psx)[class] h1 em, body main:is(.fs,.psx)[class] .fs-h1-key { color:var(--red); }

/* Category tabs: clean pills, active = black with red underline. */
body main:is(.fs,.psx)[class] .sfg-studio-categories, body main.fpc[class] .sfg-studio-categories, body main.fps[class] .sfg-studio-categories { border-bottom:1px solid var(--line, #e4e4e8); color:var(--muted, #5d5d68); gap:8px; padding:16px 0 12px; }
body main .sfg-studio-categories a { border-radius:999px !important; border:1px solid #e4e4e8 !important; background:#fff !important; color:#33333a !important; font-weight:600; text-decoration:none !important; }
body main .sfg-studio-categories a:hover { border-color:#111114 !important; color:#111114 !important; }
body main .sfg-studio-categories a[aria-current="page"] { background:#111114 !important; border-color:#111114 !important; color:#fff !important; box-shadow:inset 0 -3px 0 #e3242b; }

/* Buttons: primary = orange, everything else = neutral outline. */
body main:is(.fs,.psx)[class] .fs-button { background:#fff; color:#111114; border:1px solid #d6d6dc; border-radius:12px; }
body main:is(.fs,.psx)[class] .fs-button:hover:not(:disabled) { border-color:#111114; background:#fff; }
body main:is(.fs,.psx)[class] .fs-button.fs-primary, body main:is(.fs,.psx)[class] .fs-primary, body main:is(.fs,.psx)[class] .fs-card .fs-button, body main:is(.fs,.psx)[class] .vm-detail .fs-button.fs-primary {
  background:#ff6300 !important; border-color:#ff6300 !important; color:#fff !important; box-shadow:0 6px 18px rgba(255,99,0,.25);
}
body main:is(.fs,.psx)[class] .fs-button.fs-primary:hover:not(:disabled), body main:is(.fs,.psx)[class] .fs-card .fs-button:hover:not(:disabled) { background:#ff7a24 !important; border-color:#ff7a24 !important; }
body main:is(.fs,.psx)[class] .fs-collection { border-color:#d6d6dc; color:#33333a; background:#fff; }
body main:is(.fs,.psx)[class] .fs-collection[aria-pressed="true"] { background:#111114; border-color:#111114; color:#fff; }

/* Cards and panels on light paper. */
body main:is(.fs,.psx)[class] .fs-card, body main:is(.fs,.psx)[class] .fs-empty, body main:is(.fs,.psx)[class] .fs-output, body main:is(.fs,.psx)[class] .fs-job,
body main:is(.fs,.psx)[class] .vm-offer, body main:is(.fs,.psx)[class] .vm-proof, body main:is(.fs,.psx)[class] .fs-video-proof, body main:is(.fs,.psx)[class] .fs-growth {
  background:#fff; border-color:#e4e4e8; color:var(--ink);
}
body main:is(.fs,.psx)[class] .fs-growth { background:linear-gradient(135deg,#fff5f5,#ffffff); border-color:#f4c7c9; }
body main:is(.fs,.psx)[class] input[type=file], body main:is(.fs,.psx)[class] textarea, body main:is(.fs,.psx)[class] select { background:#fff; color:#111114; border:1px solid #d6d6dc; }
body main:is(.fs,.psx)[class] input[type=file]::file-selector-button { background:#111114; color:#fff; }
body main:is(.fs,.psx)[class] .fs-chip { border-color:#d6d6dc; background:#fff; color:#111114; }
body main:is(.fs,.psx)[class] .fs-chip[aria-checked="true"] { background:#111114; border-color:#111114; color:#fff; }
body main:is(.fs,.psx)[class] .fs-chip[aria-checked="true"] span { color:rgba(255,255,255,.78); }
body main:is(.fs,.psx)[class] .fs-nav .fs-nav-studio { border-color:#d6d6dc; }

/* Prompt composer (was dark). */
body main:is(.fs,.psx)[class] .fsc, .fs-v2.fsc { background:#fff !important; border:1px solid #e4e4e8 !important; color:#111114 !important; box-shadow:0 10px 30px rgba(17,17,20,.06); }
body main:is(.fs,.psx)[class] .fsc-head p, body main:is(.fs,.psx)[class] .fsc-wallet, body main:is(.fs,.psx)[class] .fsc-consent, body main:is(.fs,.psx)[class] .fsc-boost { color:#5d5d68 !important; }
body main:is(.fs,.psx)[class] .fsc-prompt, body main:is(.fs,.psx)[class] .fsc-select, body main:is(.fs,.psx)[class] .fsc-stepper, body main:is(.fs,.psx)[class] .fsc-result img { background:#fff !important; color:#111114 !important; border-color:#d6d6dc !important; }
body main:is(.fs,.psx)[class] .fsc-opt-label, body main:is(.fs,.psx)[class] .fsc-photo-remove { color:#76767f !important; }
body main:is(.fs,.psx)[class] .fsc-photo-text { color:#e3242b !important; border-color:rgba(227,36,43,.5) !important; }
body main:is(.fs,.psx)[class] .fsc-notice { color:#c41d23 !important; }
body main:is(.fs,.psx)[class] .fsc-results { border-top-color:#e4e4e8 !important; }
body main:is(.fs,.psx)[class] .fsc-error { background:#fff1f1 !important; color:#a3161b !important; }
body main:is(.fs,.psx)[class] .fsc-confirm { background:#fff !important; color:#111114 !important; border-color:#e4e4e8 !important; }

/* Video template detail page (was maroon/navy). */
body main.fs.vm[class] .vm-detail-head .fs-eyebrow, body main.fs.vm[class] .vm-input { border-color:#e3242b; }
body main.fs.vm[class] .vm-input { background:#fff; }

/* 3. Result action panel ------------------------------------------------- */
.sfg-ra-hidden, .sfg-ra-on > .fsc-boost, .sfg-ra-on > button.fs-button { display:none !important; }
.fsc-result.is-picked img { outline:3px solid #e3242b; outline-offset:2px; }
.sfg-ra { margin:18px 0 8px; padding:20px; border-radius:18px; background:#fff; border:1px solid #e4e4e8; box-shadow:0 14px 40px rgba(17,17,20,.08); color:#111114; font-family:inherit; text-align:left; }
.sfg-ra-head { margin-bottom:14px; }
.sfg-ra-eyebrow, .sfg-vs-eyebrow { display:inline-flex; align-items:center; gap:6px; font:700 11px/1.4 inherit; letter-spacing:.12em; text-transform:uppercase; color:#e3242b; }
.sfg-ra-eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:#e3242b; box-shadow:0 0 0 4px rgba(227,36,43,.15); }
.sfg-ra-head h4 { margin:4px 0 0; font-size:22px; line-height:1.2; font-weight:800; color:#111114; letter-spacing:-.01em; }
.sfg-ra-main { display:grid; grid-template-columns:1.2fr 1.2fr 1fr; gap:10px; }
.sfg-ra-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 16px; border-radius:12px; border:1px solid #d6d6dc; background:#fff; color:#111114; font:700 15px/1.2 inherit; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.sfg-ra-btn svg { width:19px; height:19px; flex:none; }
.sfg-ra-btn:hover:not(:disabled) { transform:translateY(-1px); border-color:#111114; }
.sfg-ra-btn:disabled { opacity:.6; cursor:progress; }
.sfg-ra-btn.is-primary { background:#ff6300; border-color:#ff6300; color:#fff; box-shadow:0 8px 20px rgba(255,99,0,.28); }
.sfg-ra-btn.is-primary:hover:not(:disabled) { background:#ff7a24; border-color:#ff7a24; }
.sfg-ra-btn.is-red { background:#111114; border-color:#111114; color:#fff; }
.sfg-ra-btn.is-red svg { color:#ff4a50; }
.sfg-ra-btn.is-red:hover:not(:disabled) { background:#000; }
.sfg-ra-btn.is-ghost { background:#fff; }
.sfg-ra-post { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #efeff2; }
.sfg-ra-label { font-weight:700; font-size:14px; color:#33333a; margin-right:2px; }
.sfg-ra-btn.is-chip { min-height:38px; padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600; }
.sfg-ra-btn.is-chip.is-best { border-color:#e3242b; color:#e3242b; box-shadow:0 0 0 3px rgba(227,36,43,.12); }
.sfg-ra-btn.is-chip.is-best::after { content:"Best fit"; font-size:11px; font-weight:700; background:#e3242b; color:#fff; padding:2px 7px; border-radius:999px; margin-left:4px; }
.sfg-ra-boost { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:14px 16px; border-radius:14px; background:#fff5f5; border:1px solid #f6d3d4; }
.sfg-ra-boost-copy { display:flex; align-items:center; gap:10px; flex:1 1 260px; }
.sfg-ra-boost-copy svg { width:24px; height:24px; color:#e3242b; flex:none; }
.sfg-ra-boost-copy p { margin:0; font-size:14px; line-height:1.45; color:#33333a; }
.sfg-ra-boost-links { display:flex; flex-wrap:wrap; gap:8px; }
.sfg-ra-link { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:10px; background:#ff6300; color:#fff !important; font-weight:700; font-size:14px; text-decoration:none !important; }
.sfg-ra-link:hover { background:#ff7a24; }
.sfg-ra-toast { position:fixed; left:50%; bottom:24px; z-index:9999; transform:translate(-50%,20px); opacity:0; pointer-events:none; max-width:min(92vw,520px); padding:12px 18px; border-radius:12px; background:#111114; color:#fff; font-size:14px; line-height:1.4; box-shadow:0 12px 30px rgba(0,0,0,.25); transition:opacity .2s, transform .2s; }
.sfg-ra-toast.is-on { opacity:1; transform:translate(-50%,0); }

/* Viral check result */
.sfg-vs { margin-top:16px; padding:18px; border-radius:16px; background:#fafafb; border:1px solid #ececf0; }
.sfg-vs-loading { display:flex; align-items:center; gap:10px; color:#5d5d68; font-size:14px; }
.sfg-vs-loading::before { content:""; width:18px; height:18px; border-radius:50%; border:3px solid #f2c4c6; border-top-color:#e3242b; animation:sfgspin .8s linear infinite; }
@keyframes sfgspin { to { transform:rotate(360deg); } }
.sfg-vs-error { margin:0; color:#a3161b; font-size:14px; }
.sfg-vs-top { display:flex; align-items:center; gap:16px; }
.sfg-vs-ring { --p:0; position:relative; flex:none; width:96px; height:96px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(closest-side,#fff 78%,transparent 79% 100%),conic-gradient(#e3242b calc(var(--p)*1%),#ececf0 0); }
.sfg-vs-ring strong { font-size:30px; line-height:1; font-weight:800; color:#111114; }
.sfg-vs-ring span { font-size:11px; color:#76767f; }
.sfg-vs-words h4 { margin:4px 0 2px; font-size:19px; line-height:1.25; font-weight:800; color:#111114; }
.sfg-vs-words p { margin:0; font-size:13px; color:#5d5d68; }
.sfg-vs-bars { display:grid; gap:7px; margin:16px 0 4px; }
.sfg-vs-bar { display:grid; grid-template-columns:130px 1fr 42px; align-items:center; gap:10px; font-size:13px; color:#33333a; }
.sfg-vs-bar i { display:block; height:8px; border-radius:99px; background:#ececf0; overflow:hidden; }
.sfg-vs-bar b { display:block; height:100%; border-radius:99px; background:#111114; }
.sfg-vs-bar em { font-style:normal; font-weight:700; text-align:right; }
.sfg-vs-cols { display:grid; grid-template-columns:1fr 1.3fr; gap:16px; margin-top:14px; }
.sfg-vs h5 { margin:0 0 6px; font-size:14px; font-weight:800; color:#111114; }
.sfg-vs ul, .sfg-vs ol { margin:0; padding-left:20px; font-size:14px; line-height:1.5; color:#33333a; }
.sfg-vs li { margin-bottom:4px; }
.sfg-vs-good li::marker { content:"✓  "; color:#1f9d55; font-weight:700; }
.sfg-vs-fix li::marker { color:#e3242b; font-weight:800; }
.sfg-vs-caption { margin-top:14px; padding:14px; border-radius:12px; background:#fff; border:1px dashed #d6d6dc; }
.sfg-vs-hook { margin:0 0 6px; font-size:13px; color:#e3242b; font-weight:600; }
.sfg-vs-text { margin:0 0 10px; white-space:pre-wrap; font-size:14px; line-height:1.5; color:#111114; }
.sfg-vs-caption .sfg-ra-btn { min-height:38px; font-size:14px; }
.sfg-vs-note { margin:12px 0 0; font-size:12px; color:#8a8a93; }
@media (max-width:640px) {
  .sfg-ra { padding:16px; }
  .sfg-ra-main { grid-template-columns:1fr 1fr; }
  .sfg-ra-main .is-primary { grid-column:1 / -1; }
  .sfg-vs-cols { grid-template-columns:1fr; }
  .sfg-vs-bar { grid-template-columns:110px 1fr 38px; }
}

/* 4. Fixes after dev review + result sheet */
body main:is(.fs,.psx)[class] .fs-proof-action .fs-button { background:#ff6300 !important; border-color:#ff6300 !important; color:#fff !important; }
body main:is(.fs,.psx)[class] .vm img, body main:is(.fs,.psx)[class] .vm video, body main:is(.fs,.psx)[class] .fs-video-proof img { background-color:#f1f1f3; }
.fs-composer .sfg-ra, .sfg-sheet-side .sfg-ra { padding:16px; }
.fs-composer .sfg-ra-main, .sfg-sheet-side .sfg-ra-main { grid-template-columns:1fr 1fr; }
.fs-composer .sfg-ra-main .is-primary, .sfg-sheet-side .sfg-ra-main .is-primary { grid-column:1 / -1; }
.sfg-ra-btn { min-width:0; }
.fs-composer .sfg-vs-cols { grid-template-columns:1fr; }
.fs-composer .sfg-vs-bar { grid-template-columns:104px 1fr 36px; }
html.sfg-sheet-open { overflow:hidden; }
.sfg-sheet { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:24px; background:rgba(17,17,20,.62); backdrop-filter:blur(3px); animation:sfgfade .18s ease; }
@keyframes sfgfade { from { opacity:0; } }
.sfg-sheet-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); width:min(1060px,100%); max-height:calc(100vh - 48px); border-radius:22px; background:#fff; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.sfg-sheet-media { margin:0; display:grid; place-items:center; background:#f1f1f3; min-height:320px; }
.sfg-sheet-media img, .sfg-sheet-media video { display:block; max-width:100%; max-height:calc(100vh - 48px); object-fit:contain; }
.sfg-sheet-side { overflow-y:auto; max-height:calc(100vh - 48px); }
.sfg-sheet-side .sfg-ra { margin:0; border:0; box-shadow:none; border-radius:0; padding:28px 24px; }
.sfg-sheet-x { position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.95); color:#111114; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.sfg-sheet-side .sfg-vs-cols { grid-template-columns:1fr; }
@media (max-width:800px) {
  .sfg-sheet { padding:0; place-items:end center; }
  .sfg-sheet-card { grid-template-columns:1fr; max-height:100vh; border-radius:20px 20px 0 0; overflow-y:auto; }
  .sfg-sheet-media { min-height:0; max-height:52vh; }
  .sfg-sheet-media img, .sfg-sheet-media video { max-height:52vh; }
  .sfg-sheet-side { max-height:none; overflow:visible; }
  .sfg-sheet-side .sfg-ra { padding:18px 16px 28px; }
}

/* 5. Poster studio + composer inner tokens (2026-11-05) */
body main:is(.fs,.psx)[class] :is(.fs-v2,.fsc) { --paper:#f6f6f7; --panel:#ffffff; --panel-2:#f1f1f3; --ink:#111114; --muted:#5d5d68; --line:#e4e4e8; --accent:#e3242b; --yellow:#e3242b; --red:#e3242b; }
body main:is(.fs,.psx)[class] .fsc-title, body main:is(.fs,.psx)[class] .fsc h3 { color:#111114 !important; }
body main:is(.fs,.psx)[class] .fsc .fs-small, body main:is(.fs,.psx)[class] .fsc figcaption, body main:is(.fs,.psx)[class] .fsc span:not([class*="badge"]) { color:#5d5d68; }
body main:is(.fs,.psx)[class] :is(.psx-kicker,.fsc-kicker) { color:#e3242b !important; }
body main:is(.fs,.psx)[class] .fsc-link { color:#e3242b !important; }
body main:is(.fs,.psx)[class] .fsc-step { color:#111114 !important; background:#fff !important; }
body main:is(.fs,.psx)[class] .psx-trust strong { color:#111114 !important; }
body main:is(.fs,.psx)[class] .psx-btn:not(.psx-btn-primary) { background:#fff !important; color:#111114 !important; border:1px solid #d6d6dc !important; }
body main:is(.fs,.psx)[class] .psx-btn-primary { background:#ff6300 !important; border-color:#ff6300 !important; color:#fff !important; }
body main:is(.fs,.psx)[class] .psx-starter { background:#fff !important; color:#111114 !important; border:1px solid #d6d6dc !important; }
body main:is(.fs,.psx)[class] .psx-starter:hover, body main:is(.fs,.psx)[class] .psx-starter[aria-pressed="true"] { background:#111114 !important; color:#fff !important; border-color:#111114 !important; }
body main:is(.fs,.psx)[class] .fs-funds-bar { background:#ececf0 !important; }
body main:is(.fs,.psx)[class] .fs-chip[aria-checked="true"] span { color:rgba(255,255,255,.78) !important; }