/* Ad Engine — components. Uses tokens.css only. Breakpoints: 1100px (split layouts stack), 760px (mobile). */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:var(--fw-regular) var(--fs-base)/var(--lh) var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:none} a:hover{color:var(--text);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
svg{flex:none}
[hidden]{display:none!important}
.num{font-family:var(--font-num);font-weight:var(--fw-semibold)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.spacer{flex:1}
.grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(var(--min,180px),1fr))}
.scroll-x{display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-2);scroll-snap-type:x mandatory}
.scroll-x>*{flex:none;scroll-snap-align:start}

/* ---------- App shell ---------- */
.app{height:100vh;display:grid;grid-template-rows:var(--appbar-h) auto 1fr;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-areas:"bar bar" "mnav mnav" "side main"}
.appbar{grid-area:bar;display:flex;align-items:center;gap:var(--s-5);padding:0 14px 0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none} .brand:hover{text-decoration:none;color:var(--text)}
.brand-name{font:var(--fw-bold) 16px/1 var(--font);letter-spacing:-.04em}
.brand-sub{display:block;font:var(--fw-medium) 8.5px/1 var(--font);color:var(--faint);margin-top:3px;letter-spacing:0}
.nav{display:flex;align-self:stretch;gap:2px}
.nav-item{position:relative;display:flex;align-items:center}
.nav-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 10px;border:0;background:none;color:var(--muted);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.nav-btn:hover{color:var(--text)}
.nav-item.active .nav-btn{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.nav-btn svg{transition:transform var(--t-fast)} .nav-item.open .nav-btn svg{transform:rotate(180deg)}
.nav-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:40;min-width:260px;padding:6px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
.nav-item.open .nav-menu{display:flex;flex-direction:column;gap:2px;animation:in var(--t) var(--ease)}
.nav-menu a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius);color:var(--text);text-decoration:none}
.nav-menu a:hover,.nav-menu a.active{background:var(--subtle)}
.nav-menu b{display:block;font-size:13px;font-weight:var(--fw-semibold)} .nav-menu small{display:block;font-size:12px;color:var(--faint)}
.nav-art{position:relative;width:44px;height:40px;flex:none}
.nav-art i{position:absolute;top:3px;width:24px;height:34px;border-radius:var(--radius-sm);box-shadow:0 0 0 2px var(--surface)}
.nav-art i:first-child{left:0;transform:rotate(-6deg)} .nav-art i:last-child{left:16px;transform:rotate(5deg)}
.appbar-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.credits{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);font:var(--fw-semibold) 12px var(--font-num);cursor:pointer}
.credits::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.credits.low{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)} .credits.low::before{background:var(--danger);animation:pulse 1.4s infinite}
.icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--subtle);color:var(--text)} .icon-btn.label{width:auto;padding:0 8px;font-size:13px;font-weight:var(--fw-medium)}
.mobile-nav{grid-area:mnav;display:none;gap:var(--s-2);padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.mobile-nav .select-wrap{flex:1} .mobile-nav select{height:40px;font-weight:var(--fw-semibold);font-size:14px}
.main{grid-area:main;min-width:0;overflow:auto}
.content{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5)}
.content.narrow{max-width:820px} .content.center{max-width:720px;margin:var(--s-6) auto 0;width:100%}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);flex-wrap:wrap}
.page-title{font:var(--fw-bold) var(--fs-2xl)/1.2 var(--font);letter-spacing:var(--tracking-tight)}
.page-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* ---------- Sidebar ---------- */
.sidebar{grid-area:side;display:flex;flex-direction:column;min-height:0;background:var(--surface);border-right:1px solid var(--line)}
.sidebar-top{display:flex;gap:6px;padding:12px}
.sidebar-scroll{flex:1;min-height:0;overflow:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:14px}
.sidebar-label{display:flex;align-items:center;gap:6px;padding:6px 8px;border:0;background:none;font:var(--fw-semibold) var(--fs-2xs) var(--font);letter-spacing:.06em;color:var(--faint);text-transform:uppercase;text-align:left;cursor:default}
button.sidebar-label{cursor:pointer} .sidebar-label svg{transition:transform var(--t)} .done-list.open .sidebar-label svg{transform:rotate(90deg)}
.done-list .ad-item{display:none} .done-list.open .ad-item{display:flex}
.ad-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius);cursor:pointer;color:var(--text);text-decoration:none}
.ad-item:hover{background:var(--subtle);text-decoration:none;color:var(--text)} .ad-item.active{background:var(--subtle)}
.ad-thumb{width:24px;height:42px;flex:none;border-radius:var(--radius-sm);background:var(--tone,#C7AE97)}
.done-list .ad-thumb{width:18px;height:32px;opacity:.8}
.ad-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ad-name{font-size:12.5px;font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-status{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:var(--fw-medium)}
.ad-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ad-status.making{color:var(--accent-text)} .ad-status.making::before{width:9px;height:9px;background:none;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.ad-status.ready{color:var(--ok)} .ad-status.done{color:var(--faint)}
.ad-status span{color:var(--faint)}
.check{width:16px;height:16px;flex:none;border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);background:var(--surface);display:none;align-items:center;justify-content:center}
.check.on{border-color:var(--primary);background:var(--primary)} .check.on::after{content:"";width:8px;height:4px;border:2px solid var(--primary-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.sidebar.select-mode .check{display:flex}
.queue{border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.queue-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:var(--fw-semibold)}
.queue-head .status{height:auto;padding:0;background:none}
.queue-bar{display:flex;gap:3px} .queue-bar i{flex:1;height:4px;border-radius:2px;background:var(--subtle-2)}
.queue-bar i.done{background:var(--ok)} .queue-bar i.running{background:var(--accent);animation:pulse 1.2s infinite}
.queue-row{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)} .queue-row span:last-child{color:var(--faint)}
.bulk-bar{display:none;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--line);background:var(--subtle)}
.sidebar.select-mode .bulk-bar{display:flex} .bulk-bar b{flex:1;font-size:12px}
.sidebar-foot{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px 12px;border-top:1px solid var(--line)}
.sidebar-foot a{height:28px;display:flex;align-items:center;padding:0 8px;border-radius:var(--radius-sm);color:var(--faint);font-size:12.5px;font-weight:var(--fw-medium);text-decoration:none}
.sidebar-foot a:hover,.sidebar-foot a.active{background:var(--subtle);color:var(--text)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:var(--fw-medium);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--t-fast),border-color var(--t-fast)}
.btn:hover{background:var(--subtle);text-decoration:none;color:var(--text)}
.btn:focus-visible{outline:0;box-shadow:var(--focus)}
.btn.primary{border:0;background:var(--primary);color:var(--primary-ink);font-weight:var(--fw-semibold)} .btn.primary:hover{background:var(--primary-hover);color:var(--primary-ink)}
.btn.accent{border:0;background:var(--accent);color:var(--accent-ink);font-weight:var(--fw-semibold)} .btn.accent:hover{background:var(--accent-hover)}
.btn.dark{border:0;background:var(--text);color:var(--bg);font-weight:var(--fw-semibold)} .btn.dark:hover{opacity:.9;color:var(--bg)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)} .btn.ghost:hover{background:var(--subtle);color:var(--text)}
.btn.danger{border:0;background:var(--danger);color:var(--danger-ink);font-weight:var(--fw-semibold)} .btn.danger:hover{opacity:.9}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:var(--radius-sm)}
.btn.lg{height:46px;padding:0 16px;font-size:15px;border-radius:var(--radius-lg)}
.btn.block{display:flex;width:100%} .btn.split{justify-content:space-between}
.btn .cost{font:var(--fw-semibold) 12px var(--font-num);padding:3px 7px;border-radius:var(--radius-sm);background:var(--subtle);color:var(--muted)}
.btn.primary .cost,.btn.danger .cost,.btn.dark .cost{background:rgba(255,255,255,.16);color:inherit}
.btn.accent .cost{background:rgba(14,14,16,.12);color:inherit}
.btn:has(.cost){padding-right:5px}
.btn[disabled],.btn.disabled{background:var(--subtle-2);color:var(--faint);border-color:transparent;cursor:not-allowed}
.btn.loading{cursor:progress;opacity:.85}
.spinner{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.spinner.sm{width:10px;height:10px;border-width:1.5px}

/* ---------- Form controls ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:var(--fw-medium);color:var(--muted)}
.label .faint{font-weight:var(--fw-regular)}
.hint{font-size:11.5px;color:var(--faint)}
.error-text{font-size:11.5px;font-weight:var(--fw-medium);color:var(--danger)}
.input,.select,.textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:13.5px;outline:0;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input,.select{height:36px;padding:0 12px}
.textarea{padding:10px 12px;line-height:1.5;resize:vertical;min-height:80px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:var(--focus)}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.field.error .input,.field.error .textarea{border-color:var(--danger)}
.input:disabled{background:var(--subtle);color:var(--faint)}
.input.masked{letter-spacing:.04em}
.select-wrap{position:relative} .select{appearance:none;padding-right:32px;cursor:pointer}
.select-wrap svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--subtle);border:1px solid var(--line);border-radius:var(--radius);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1;height:28px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--muted);font-size:12.5px;font-weight:var(--fw-semibold);white-space:nowrap;cursor:pointer}
.seg button:hover{color:var(--text)} .seg button.active{background:var(--surface);color:var(--text)}
.seg.block{display:flex}
.toggle{position:relative;width:34px;height:20px;flex:none;border:0;border-radius:var(--radius-full);background:var(--subtle-2);cursor:pointer;transition:background var(--t)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left var(--t) var(--ease)}
.toggle.on{background:var(--accent)} .toggle.on::after{left:16px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.toggle-row b{display:block;font-weight:var(--fw-medium)} .toggle-row small{display:block;font-size:12px;color:var(--faint)}
.radio{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center}
.radio.on{border-color:var(--accent)} .radio.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{display:flex;align-items:center;gap:6px;padding:10px 0;border:0;background:none;color:var(--muted);font-size:13.5px;font-weight:var(--fw-medium);white-space:nowrap;cursor:pointer;text-decoration:none}
.tab:hover{color:var(--text);text-decoration:none} .tab.active{color:var(--text);font-weight:var(--fw-semibold);box-shadow:inset 0 -2px 0 var(--accent)}
.tab .count{font:var(--fw-medium) 11px var(--font-num);color:var(--faint)}

/* ---------- Status, tags, pills ---------- */
.status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-full);font-size:11.5px;font-weight:var(--fw-medium);white-space:nowrap;background:var(--subtle);color:var(--muted)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.idle::before{background:var(--faint)}
.status.running{background:var(--accent-soft);color:var(--accent-text)} .status.running::before{width:10px;height:10px;background:none;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.status.done{background:var(--ok-soft);color:var(--ok)}
.status.error{background:var(--danger-soft);color:var(--danger)}
.status.stale{background:none;border:1px dashed var(--line-strong);color:var(--stale)} .status.stale::before{background:var(--warn)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-sm);font-size:10.5px;font-weight:var(--fw-semibold);background:var(--subtle);color:var(--muted)}
.tag.broll{background:var(--info-soft);color:var(--info)} .tag.clinical{background:var(--ok-soft);color:var(--ok)} .tag.hook{background:var(--text);color:var(--bg)}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--radius-full);border:1px solid var(--line);font-size:11.5px;font-weight:var(--fw-medium);color:var(--muted)}
.pill.accent{border-color:transparent;background:var(--accent-soft);color:var(--accent-text)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card-title{font-size:14px;font-weight:var(--fw-semibold)}
.card-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.card-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;background:var(--bg)}
.card.inset{background:var(--bg)}
.sticky{position:sticky;top:16px}

/* ---------- Banners & toasts ---------- */
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--radius-lg);background:var(--subtle);font-size:13px;font-weight:var(--fw-medium)}
.banner::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.banner p{flex:1;min-width:200px}
.banner.warn{background:var(--warn-soft)} .banner.warn::before{background:var(--warn)}
.banner.danger{background:var(--danger-soft)} .banner.danger::before{background:var(--danger);animation:pulse 1.4s infinite}
.banner.info{background:var(--info-soft)} .banner.info::before{background:var(--info)}
.banner.flush{border-radius:0;border-bottom:1px solid var(--line)}
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-lg);background:var(--text);color:var(--bg);animation:in var(--t) var(--ease)}
.toast-icon{width:18px;height:18px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ok);color:#0E0E10;font-size:11px;font-weight:700}
.toast.error{background:var(--surface);color:var(--text);box-shadow:var(--shadow-float)} .toast.error .toast-icon{background:var(--danger);color:var(--danger-ink)}
.toast b{display:block;font-size:13px} .toast small{display:block;font:12px var(--font-num);opacity:.7}
.toast-action{border:0;background:none;color:var(--accent);font-weight:var(--fw-semibold);font-size:12.5px;cursor:pointer}
.toast.error .toast-action{color:var(--accent-text)}

/* ---------- Modals ---------- */
.modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:min(6vh,56px) 12px 24px;background:var(--overlay);overflow:auto}
.modal-overlay.entry{background:var(--bg)}
.modal{width:100%;max-width:620px;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-float);overflow:hidden;animation:in var(--t) var(--ease)}
.modal.sm{max-width:400px} .modal.lg{max-width:680px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-title{font:var(--fw-bold) 19px/1.25 var(--font);letter-spacing:-.02em}
.modal-sub{font-size:13px;color:var(--muted);margin-top:4px}
.modal-close{border:0;background:none;color:var(--faint);font-size:20px;line-height:1;cursor:pointer;padding:0}
.modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:var(--bg)}
.wizard-dots{display:flex;gap:4px} .wizard-dots i{flex:1;height:3px;border-radius:2px;background:var(--subtle-2)} .wizard-dots i.on{background:var(--accent)}
.steps{display:flex;gap:6px} .steps button{flex:1;display:flex;flex-direction:column;gap:6px;padding:0 0 12px;border:0;background:none;text-align:left;font-size:12px;font-weight:var(--fw-semibold);color:var(--faint);cursor:pointer}
.steps button::before{content:"";height:3px;border-radius:2px;background:var(--subtle-2)} .steps button.done::before,.steps button.active::before{background:var(--accent)} .steps button.active{color:var(--text)}
.numbered{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:13px;color:var(--muted)}
.numbered i{width:20px;height:20px;border-radius:50%;background:var(--subtle);display:flex;align-items:center;justify-content:center;font:normal 600 10.5px var(--font);color:var(--text)}

/* ---------- Empty, skeleton, progress ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-xl)}
.empty b{font-size:16px} .empty p{font-size:13px;color:var(--muted);max-width:380px}
.empty-icon{width:44px;height:44px;border-radius:var(--radius-xl);background:var(--subtle);display:flex;align-items:center;justify-content:center}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;text-align:center;border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--bg)}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.skeleton{border-radius:var(--radius);background:linear-gradient(90deg,var(--subtle) 0,var(--subtle-2) 40%,var(--subtle) 80%) 0 0/800px 100%;animation:shimmer 1.4s linear infinite}
.progress{height:6px;border-radius:var(--radius-full);background:var(--subtle-2);overflow:hidden}
.progress>span{display:block;height:100%;width:var(--value,0%);border-radius:inherit;background:var(--accent);transition:width var(--t-slow)}
.progress.indeterminate>span{width:40%;animation:indet 1.1s var(--ease) infinite}
.progress-label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:var(--fw-medium);margin-bottom:6px}

/* ---------- Media (9:16 etc.) ---------- */
.media{position:relative;aspect-ratio:9/16;border-radius:var(--radius-lg);background:var(--tone,var(--subtle-2));overflow:hidden}
.media.r-4-5{aspect-ratio:4/5} .media.r-1-1{aspect-ratio:1} .media.r-16-9{aspect-ratio:16/9}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media-tl,.media-tr,.media-br{position:absolute;display:flex;gap:6px;align-items:center}
.media-tl{top:8px;left:8px} .media-tr{top:8px;right:8px} .media-br{right:8px;bottom:8px}
.badge-dark{font-size:10.5px;font-weight:var(--fw-semibold);padding:3px 6px;border-radius:var(--radius-sm);background:rgba(14,14,16,.6);color:#fff}
.media-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.media-play span{width:40px;height:40px;border-radius:50%;background:rgba(14,14,16,.5);display:flex;align-items:center;justify-content:center}
.media.generating::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.2) 40%,transparent 80%) 0 0/800px 100%;animation:shimmer 1.4s linear infinite}
.media.stale{filter:grayscale(1);opacity:.75}
.media-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;color:#fff;background:rgba(14,14,16,.55);font-size:12px;font-weight:var(--fw-semibold)}
.media-error i{width:24px;height:24px;border-radius:50%;background:var(--danger);display:flex;align-items:center;justify-content:center;font-style:normal}
.media-progress{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;color:#fff;font-size:10.5px;font-weight:var(--fw-semibold)}
.media-progress i{height:3px;border-radius:2px;background:rgba(255,255,255,.3)} .media-progress i b{display:block;height:100%;width:var(--value,0%);background:#fff;border-radius:inherit}

/* ---------- Shots ---------- */
.shot-layout{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.shot-board{flex:999 1 420px;min-width:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));align-items:start}
.shot{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;transition:border-color var(--t-fast)}
.shot:hover{border-color:var(--line-strong)} .shot.open{border-color:var(--text);box-shadow:0 0 0 1px var(--text)} .shot.error{border-color:var(--danger)}
.shot .media{border-radius:0}
.shot-body{display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px}
.shot-line{font-size:12.5px;font-weight:var(--fw-medium);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shot-steps{display:flex;gap:6px;flex-wrap:nowrap;min-width:0}
.step{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:var(--fw-medium);white-space:nowrap;color:var(--faint)}
.step::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.step.ok{color:var(--ok)} .step.ok::before{background:var(--ok);box-shadow:none}
.step.err{color:var(--danger)} .step.err::before{background:var(--danger);box-shadow:none}
.step.stale{color:var(--warn)} .step.stale::before{background:var(--warn);box-shadow:none}
.step.run{color:var(--accent-text)} .step.run::before{width:9px;height:9px;box-shadow:none;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.shot .check{position:absolute;display:flex;border-color:#fff;background:rgba(14,14,16,.35)}
.fix-panel{flex:1 1 340px;max-width:var(--panel-w);position:sticky;top:110px;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-float);overflow:hidden;animation:in var(--t) var(--ease)}
.fix-panel .modal-body{max-height:calc(100vh - 180px);overflow:auto}
.fix-preview{display:flex;gap:12px;align-items:flex-start} .fix-preview .media{width:120px;flex:none}
.fix-status{display:flex;flex-direction:column;gap:6px} .fix-status .step{font-size:12px} .fix-status .step span{margin-left:auto}
.fix-group{display:flex;flex-direction:column;gap:6px}
.fix-group-title{font-size:11.5px;font-weight:var(--fw-semibold);color:var(--faint);letter-spacing:.04em}
.fix-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fix-btn{display:flex;justify-content:space-between;align-items:center;gap:4px;height:34px;padding:0 8px 0 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);font-size:12.5px;font-weight:var(--fw-medium);text-align:left;cursor:pointer}
.fix-btn:hover{background:var(--subtle)} .fix-btn span{font:var(--fw-semibold) 11px var(--font-num);color:var(--faint)}
.suggest{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);background:var(--accent-soft);font-size:12.5px}
.photo-pick{display:flex;gap:6px} .photo-pick i{width:40px;height:40px;border-radius:var(--radius);background:var(--tone);box-shadow:inset 0 0 0 1px var(--line)} .photo-pick i.on{box-shadow:0 0 0 2px var(--accent)}
.bulk-dark{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--radius-lg);background:var(--text);color:var(--bg)}
.bulk-dark .btn{background:none;color:inherit;border-color:rgba(255,255,255,.2)} .bulk-dark .btn .cost{background:rgba(255,255,255,.14);color:inherit}

/* ---------- Script ---------- */
.hook-cards{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px;overflow-x:auto}
.hook-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:none;text-align:left;cursor:pointer}
.hook-card:hover{border-color:var(--line-strong)} .hook-card.active{border-color:var(--text);background:var(--surface)}
.hook-card b{display:flex;justify-content:space-between;font-size:13px} .hook-card b small{font-weight:var(--fw-medium);font-size:11px;color:var(--faint)}
.hook-card p{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.script{padding:8px 0}
.script-divider{display:flex;align-items:center;gap:12px;padding:14px 20px 6px;font-size:11.5px;font-weight:var(--fw-semibold);color:var(--faint)} .script-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.script-row{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:9px 20px}
.script-row:hover{background:var(--subtle)}
.script-row .n{font-size:12px;font-weight:var(--fw-semibold);color:var(--faint)}
.script-row .line{font-size:14.5px} .script-row.lead .line{font-weight:var(--fw-semibold);font-size:15px} .script-row.broll .line{font-style:italic;color:var(--muted)}
.script-row .desc{font-size:12.5px;color:var(--faint)}
.script-row .input{height:34px}

/* ---------- Generate ---------- */
.gen-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.gen-steps{flex:999 1 520px;min-width:0;max-width:820px;display:flex;flex-direction:column;gap:12px}
.gen-step{padding:18px;display:flex;flex-direction:column;gap:14px} .gen-step.locked{opacity:.55} .gen-step.locked .btn{cursor:not-allowed}
.gen-step-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.gen-step-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:var(--fw-semibold)}
.thumb-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .thumb-strip i{flex:none;width:120px;aspect-ratio:9/16;border-radius:var(--radius-sm);border:1px dashed var(--line-strong)}
.thumb-strip i.filled{border:0;background:var(--tone)} .thumb-strip i.loading{border:0}
.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mini-stat{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg)}
.mini-stat small{font-size:12px;color:var(--faint)} .mini-stat b{font:var(--fw-bold) 17px var(--font-num)}
.cost-card{flex:1 1 280px;max-width:340px;padding:18px;display:flex;flex-direction:column;gap:18px}
.cost-total{font:var(--fw-black) var(--fs-4xl)/1 var(--font-num);letter-spacing:-.035em}
.stack-bar{display:flex;height:10px;gap:2px;border-radius:var(--radius-full);overflow:hidden} .stack-bar i{background:var(--c)}
.legend-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)} .legend-row::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)} .legend-row span{flex:1} .legend-row b{font:var(--fw-semibold) 13px var(--font-num);color:var(--text)}

/* ---------- Brief ---------- */
.format-card{width:150px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;padding:0}
.format-card .media{border-radius:0} .format-card b{font-size:12.5px;padding:9px 10px 0} .format-card small{font-size:11px;color:var(--muted);padding:3px 10px 10px}
.format-card.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.creator-card{width:160px;display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;text-align:left;cursor:pointer}
.creator-card .media{aspect-ratio:4/5} .creator-card.active .media{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.creator-card b{font-size:12.5px} .creator-card small{font-size:11px;color:var(--faint);margin-top:-4px}

/* ---------- Export ---------- */
.versions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:840px}
.version{display:flex;flex-direction:column;gap:8px}
.version p{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.version-actions{display:flex;gap:6px} .version-actions .btn{flex:1}
.file-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg)}
.file-icon{width:40px;height:40px;flex:none;border-radius:var(--radius-xl);background:var(--subtle);display:flex;align-items:center;justify-content:center}
.file-icon.premiere{background:#00005B;color:#9999FF;box-shadow:inset 0 0 0 1.5px #9999FF;font-weight:600;font-size:17px}
.file-row b{display:block;font-size:13px} .file-row small{display:block;font-size:12px;color:var(--faint)} .file-row>div{flex:1;min-width:0}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:24px} .wave i{flex:1;height:var(--h);border-radius:1px;background:var(--line-strong)} .wave i.played{background:var(--accent)}
.player{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius);background:var(--subtle)}
.play-btn{width:30px;height:30px;flex:none;border:0;border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ---------- Generators (form + results) ---------- */
.split{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.split-form{flex:1 1 320px;max-width:var(--form-w);padding:18px;display:flex;flex-direction:column;gap:18px}
.split-main{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ref-box{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg)}
.ref-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ref-thumbs i{position:relative;aspect-ratio:1;border-radius:var(--radius);background:var(--tone)}
.ref-thumbs i button{position:absolute;top:4px;right:4px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:rgba(14,14,16,.55);color:#fff;font-size:11px;line-height:18px;cursor:pointer}
.results{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(max(200px,calc(33.33% - 11px)),1fr))}
.result{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl)}
.result.error{border-color:var(--danger)} .result.error .media{background:var(--danger-soft)}
.result-actions{display:flex;gap:4px} .result-actions .btn{flex:1}
.result .gen-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:var(--fw-medium)}

/* ---------- Voice picker ---------- */
.voice-layout{display:flex;flex-wrap:wrap}
.voice-photo{flex:1 1 180px;max-width:220px;padding:18px 0 18px 22px}
.voice-list{flex:999 1 320px;min-width:0;padding:12px 16px;display:flex;flex-direction:column;gap:4px;max-height:420px;overflow:auto}
.voice-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer}
.voice-row:hover{background:var(--subtle)} .voice-row.selected{border-color:var(--accent);background:var(--accent-soft)}
.voice-row div{flex:1;min-width:120px} .voice-row b{display:block;font-size:13.5px} .voice-row small{display:block;font-size:12px;color:var(--faint)}

/* ---------- Home, competitor, library, costs, lists ---------- */
.checklist .check-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line)}
.check-row:last-child{border-bottom:0}
.check-dot{width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--faint)}
.check-dot.done{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.check-row div{flex:1;min-width:200px} .check-row b{display:block;font-size:14px} .check-row small{display:block;font-size:12.5px;color:var(--muted)}
.check-row.done b{color:var(--muted)}
.concept{display:flex;gap:14px;flex-wrap:wrap;padding:14px}
.concept .media{width:92px;flex:none} .concept>div{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.concept-hook{font-size:15px;font-weight:var(--fw-semibold);line-height:1.35}
.beats{display:flex;height:22px;gap:2px;border-radius:var(--radius);overflow:hidden}
.beats i{flex:var(--w);background:var(--c);display:flex;align-items:center;padding:0 6px;font:normal 600 10.5px var(--font);color:#0E0E10;white-space:nowrap;overflow:hidden}
.side-help{flex:1 1 260px;max-width:340px;padding:16px;border-radius:var(--radius-xl);background:var(--subtle);display:flex;flex-direction:column;gap:12px}
.rule{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);background:var(--subtle);font-size:13px} .rule::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)} .rule span{flex:1}
.lib-item{display:flex;flex-direction:column;gap:6px} .lib-item b{font-size:12.5px} .lib-badge{position:absolute;left:6px;top:6px;font-size:9.5px;font-weight:600;padding:2px 5px;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink)}
.stat{padding:16px;display:flex;flex-direction:column;gap:6px} .stat small{font-size:12.5px;color:var(--muted)} .stat b{font:var(--fw-bold) 30px/1 var(--font-num);letter-spacing:-.03em} .stat span{font-size:12px;color:var(--faint)}
.bar-row{display:flex;flex-direction:column;gap:5px} .bar-row div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:var(--fw-medium)} .bar-row b{font-family:var(--font-num)}
.bar-track{height:8px;border-radius:var(--radius-full);background:var(--subtle);overflow:hidden} .bar-track i{display:block;height:100%;width:var(--value);background:var(--c,var(--accent));border-radius:inherit}
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden}
.list-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0} .list-row:hover{background:var(--subtle)}
.list-row .media{width:44px;height:56px;aspect-ratio:auto;border-radius:var(--radius-sm)}
.list-row p{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-row small{display:block;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-row{padding:14px;display:flex;flex-direction:column;gap:12px} .video-row .media{width:96px}
.conn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.conn-row:last-child{border-bottom:0} .conn-row::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)} .conn-row span{flex:1;font-weight:var(--fw-medium)} .conn-row small{font-size:12px;color:var(--ok)}
.conn-row.ok{background:var(--ok-soft)} .conn-row.fail{background:var(--danger-soft)} .conn-row.fail::before,.conn-row.missing::before{background:var(--danger)} .conn-row.fail small,.conn-row.missing small{color:var(--danger)}

/* ---------- Animations ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.versions{grid-template-columns:repeat(2,minmax(0,1fr))}.fix-panel,.cost-card,.split-form,.side-help{max-width:none}.sticky,.fix-panel{position:static}}
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-areas:"bar" "mnav" "main"}
  .sidebar,.nav,.icon-btn.label span{display:none}
  .mobile-nav{display:flex}
  .app.show-ads .sidebar{display:flex;grid-area:main} .app.show-ads .main{display:none}
  .content{padding:16px}
  .page-title{font-size:20px}
  .hook-cards{grid-template-columns:repeat(5,150px)}
  .script-row{grid-template-columns:24px minmax(0,1fr) auto} .script-row .desc{grid-column:2/4;margin-top:-6px}
  .versions{grid-template-columns:1fr 1fr;gap:10px}
  .shot-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toast-stack{left:12px;right:12px;bottom:12px;max-width:none}
  .modal-overlay{padding:12px} .voice-photo{display:none}
  .fix-grid{grid-template-columns:1fr}
}