@font-face{font-family:AppMono;src:url('/web-assets/RobotoMono-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:dark;--bg:#141414;--panel:#211d25;--control:#2e2633;--line:#403847;--cream:#e8e4d2;--blue:#91b0e3;--muted:#b6aebd;--label:#a69daf;--green:#a2cdb6;--red:#edabab;font-family:'Segoe UI',Arial,sans-serif;color:var(--cream);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}h1,h2,h3,p,figure{margin:0}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--blue);outline-offset:4px}::selection{background:var(--blue);color:var(--bg)}button{color:inherit}html{scroll-behavior:smooth;scroll-padding-top:30px}p{line-height:1.65}button,a,input,select{ -webkit-tap-highlight-color:transparent}
.skip{position:fixed;top:10px;left:15px;z-index:1000;padding:14px;background:var(--cream);color:var(--bg);clip-path:inset(50%)}.skip:focus{clip-path:none}
.eyebrow{font:600 9px/1.6 AppMono,monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}.muted{color:var(--muted)}.tiny{font-size:11px;color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:43px;padding:12px 19px;border:1px solid var(--blue);border-radius:7px;background:var(--blue);color:#141414;font-size:12px;font-weight:650;white-space:nowrap}.button:hover{filter:brightness(1.12)}.button.secondary{background:transparent;border-color:#62566b;color:var(--cream)}.button.cream{background:var(--cream);border-color:var(--cream)}.button.small{padding:9px 13px;min-height:36px;font-size:11px}.text-btn{border:0;background:none;padding:5px 0;color:var(--blue);font-size:12px;text-decoration:underline;text-underline-offset:4px}.icon-btn{border:1px solid var(--line);border-radius:7px;background:var(--control);width:36px;height:36px;display:grid;place-items:center;font-size:20px}.badge{font-size:10px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}.badge.active{color:var(--green)}.badge.active::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.avatar{width:34px;height:34px;display:grid;place-items:center;background:var(--control);border:1px solid #695a73;border-radius:50%;font-size:11px;flex:none}.brand img{width:135px;height:auto}.brand{display:inline-block;flex:none}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:0 44px}.topbar .top-links{display:flex;align-items:center;gap:26px;font-size:12px;color:var(--muted)}.topbar .top-links .current{color:var(--cream)}.top-actions{display:flex;align-items:center;gap:18px}.top-user{display:flex;align-items:center;gap:11px;font-size:12px}.top-user small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.page{max-width:1290px;margin:auto;padding:44px 44px 120px}.heading{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:32px}.heading h1{font-size:43px;line-height:1.1;letter-spacing:-1.8px;font-weight:600;margin:10px 0 12px}.heading p{font-size:14px;color:var(--muted)}.heading em{font-family:Georgia,serif;font-weight:400;color:var(--blue)}.heading .date-note{font:600 10px AppMono,monospace;color:var(--label);padding-bottom:5px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:23px}.section-head h2{font-size:23px;letter-spacing:-.7px;font-weight:600}.section-head p{font-size:12px;color:var(--muted);margin-top:6px}.section{margin-top:38px;scroll-margin-top:30px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0}.overview{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}.wallet,.plan{padding:28px 30px}.wallet-top,.plan-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.wallet .eyebrow{color:inherit;opacity:.7}.wallet{background:var(--blue);color:#141414}.wallet-number{font-size:62px;line-height:1.1;letter-spacing:-3px;margin:18px 0 10px;font-weight:550}.wallet-number small{font-size:14px;letter-spacing:0;margin-left:5px;font-weight:400}.wallet-note{font-size:11px;opacity:.8}.wallet-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}.wallet .button{background:#141414;color:var(--cream);border-color:#141414}.credit-mark{width:28px;height:28px;opacity:.9}.plan h2{font-size:26px;margin:21px 0 10px;font-weight:600;letter-spacing:-.5px}.plan h2 small{font-size:13px;font-weight:400;float:right;margin-top:8px;color:var(--muted)}.plan>p{font-size:12px;color:var(--muted);max-width:380px}.plan-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:25px}.plan-stamp{font:italic 39px Georgia,serif;color:var(--blue)}
.filters{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:22px}.filter-buttons{display:flex;gap:5px;flex-wrap:wrap}.filter-buttons button{border:0;padding:9px 15px;background:transparent;border-radius:6px;font-size:12px;color:var(--muted)}.filter-buttons button[aria-pressed=true]{background:var(--control);color:var(--cream)}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;padding:0 12px;background:var(--bg);gap:8px}.search input{background:none;border:0;min-width:0;width:175px;color:var(--cream);padding:10px 0;font-size:12px;outline-offset:0}.search span{color:var(--muted)}.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.job{min-width:0}.job-art{display:block;width:100%;border:0;padding:0;background:var(--panel);border-radius:9px;overflow:hidden;position:relative;aspect-ratio:16/10;cursor:zoom-in}.job-art img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.job-art:hover img{transform:scale(1.035)}.media-kind{position:absolute;bottom:10px;left:10px;font:600 9px AppMono,monospace;background:#141414d9;color:var(--cream);padding:6px 9px;border:1px solid #ffffff25;border-radius:4px}.job-state{position:absolute;top:10px;left:10px;background:#211d25e8;padding:6px 9px;font-size:10px;border-radius:4px;color:var(--blue)}.job-art.running img{opacity:.35;filter:saturate(.5)}.job-art.failed img{opacity:.2;filter:grayscale(1)}.job-title{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-top:13px}.job-title button{font-size:13px;font-weight:550;background:none;border:0;padding:0;text-align:left;line-height:1.4}.job-title>span{font-size:10px;color:var(--muted);white-space:nowrap;padding-top:2px}.job-meta{font-size:10px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between;gap:10px;line-height:1.5}.history-empty{border:1px dashed #65566e;border-radius:10px;padding:48px 24px;text-align:center}.history-empty h3{font-size:25px;margin:15px 0 10px}.history-empty p{font-size:13px;color:var(--muted);margin-bottom:22px}.empty-mark{font:italic 45px Georgia,serif;color:var(--blue)}.load-more{display:flex;justify-content:center;margin-top:27px}.history-list{display:grid;gap:0;border-top:1px solid var(--line)}.history-list .job{display:grid;grid-template-columns:100px minmax(0,1fr) 130px;gap:19px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.history-list .job-art{aspect-ratio:1.5;border-radius:5px}.history-list .job-title{margin:0;display:block}.history-list .job-title button{font-size:14px}.history-list .job-title>span{display:none}.history-list .job-meta{display:block;margin-top:7px}.history-list .job-meta>span+span{margin-left:10px}.row-cost{text-align:right;font-size:12px}.row-cost small{display:block;font-size:10px;margin-top:7px;color:var(--muted)}.history-grid .row-cost{display:none}.history-list .job-state{font-size:8px;top:4px;left:4px;padding:3px}.history-list .media-kind{font-size:7px;bottom:4px;left:4px;padding:3px 5px}
.packs-table{width:100%;border-collapse:collapse;font-size:12px}.packs-table th,.packs-table td{text-align:left;padding:17px 18px;border-bottom:1px solid var(--line)}.packs-table th{font-size:9px;font-weight:600;font-family:AppMono,monospace;color:var(--label);letter-spacing:.5px}.packs-table td:first-child{font-size:17px;font-weight:550}.packs-table td:last-child,.packs-table th:last-child{text-align:right}.packs-table tbody tr:last-child td{border-bottom:0}.pack-badge{display:inline-block;margin-left:10px;font:600 8px AppMono,monospace;color:var(--blue);background:var(--control);border:1px solid #64556d;border-radius:3px;padding:4px 6px;vertical-align:middle}.table-note{margin-top:15px;font-size:11px;color:var(--muted)}.pack-picker{padding:22px}.pack-picker h2{font-size:22px;letter-spacing:-.5px;margin-bottom:8px}.pack-picker>p{font-size:12px;color:var(--muted)}.pack-options{display:grid;gap:7px;margin:22px 0}.pack-option{display:grid;grid-template-columns:1fr auto;gap:4px;text-align:left;border:1px solid var(--line);border-radius:6px;background:none;padding:12px;color:var(--cream)}.pack-option[aria-pressed=true]{border-color:var(--blue);background:#91b0e312}.pack-option strong{font-size:13px;font-weight:550}.pack-option span{font-size:12px}.pack-option small{font-size:9px;color:var(--muted)}.pack-option .pick-dot{grid-column:2;grid-row:2;color:var(--blue)}.pack-picker>.button{width:100%}.payment-list{list-style:none;padding:0;margin:0}.payment-list li{display:grid;grid-template-columns:110px minmax(0,1fr) 90px 40px;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;font-size:12px}.payment-list li>span:first-child{color:var(--muted);font-size:11px}.payment-list strong{font-weight:500;text-align:right}.payment-list .text-btn{text-align:right;font-size:11px}.payment-list li:last-child{border:0}.payment-list small{display:block;color:var(--green);font-size:9px;margin-top:5px}.account-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:22px;margin-top:45px;color:var(--label);font-size:11px}.account-footer button{font-size:11px}
.sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:220px;background:var(--panel);padding:32px 24px;border-right:1px solid var(--line)}.side-caption{font:600 8px AppMono,monospace;color:var(--label);letter-spacing:1.5px;margin:45px 12px 16px}.side-nav{display:grid;gap:5px}.side-nav a{display:flex;align-items:center;gap:13px;padding:13px 14px;font-size:12px;color:var(--muted);border-radius:7px}.side-nav a.active{background:var(--control);color:var(--cream)}.side-nav a:hover{color:var(--cream)}.side-icon{font-size:17px;color:var(--blue);width:20px;text-align:center}.sidebar .side-create{margin-top:28px}.side-bottom{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}.side-bottom .top-user{margin-bottom:16px}.side-bottom .text-btn{font-size:10px;color:var(--muted)}.studio .topbar,.studio .page{margin-left:220px}.studio .topbar{height:75px;padding:0 40px}.studio .topbar .brand{display:none}.studio .page{max-width:none;padding:35px 40px 120px}.studio .heading{margin-bottom:28px}.studio .heading h1{font-size:36px}.studio .wallet-number{font-size:56px}.studio .history-grid{gap:24px 20px}.studio .topbar .top-links{font-size:11px}.studio .top-actions .top-user{display:none}
/* The selected Studio layout, connected to the production account controller. */
:root { --plum:var(--control); --sidebar-width:220px; }
.button.cream { background:var(--cream); border-color:var(--cream); }
.small { font-size:12px; }
.text-button { border:0; background:none; padding:6px 0; color:var(--blue); font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.sidebar { display:none; width:var(--sidebar-width); }
.studio .topbar { margin-left:0; }
.studio .page { width:100%; max-width:1400px; margin-inline:auto; }
.studio .topbar>.brand { display:block; }
.studio:has(#account:not([hidden])) .sidebar { display:flex; }
.studio:has(#account:not([hidden])) .topbar { margin-left:var(--sidebar-width); }
.studio:has(#account:not([hidden])) .page {
  width:calc(100% - var(--sidebar-width));
  margin-left:max(var(--sidebar-width), calc((100% + var(--sidebar-width) - 1400px) / 2));
}
.studio:has(#account:not([hidden])) .topbar>.brand { display:none; }
.account-shortcuts { display:flex; flex-direction:column; gap:6px; margin-top:20px; }
.account-shortcuts a { display:flex; gap:13px; align-items:center; padding:12px; border-radius:6px; font-size:12px; color:var(--muted); }
.account-shortcuts a:hover,.account-shortcuts a[aria-current] { color:var(--cream); background:var(--control); }
.account-shortcuts a span { color:var(--blue); font-size:15px; }
.side-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.side-identity>div { min-width:0; }
.side-identity h2 { font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.side-identity #email { font-size:10px; overflow-wrap:anywhere; margin-top:4px; }
.side-bottom>.text-button { margin-top:14px; }
#account.panel { border:0; background:none; margin-top:0; }
.wallet-number { display:flex; align-items:baseline; gap:5px; }
.wallet-number small { margin-left:0; }
.wallet .muted,.wallet .tiny { color:inherit; opacity:.8; }
.wallet .small { font-size:11px; margin-top:8px; }
.wallet #payment-note { opacity:1; background:#14141412; border-radius:5px; padding:10px; }
.wallet .button { background:var(--bg); border-color:var(--bg); color:var(--cream); }
.plan-title { display:flex; align-items:baseline; justify-content:space-between; gap:15px; margin:21px 0 10px; }
.plan-title #plan-name { font-size:26px; letter-spacing:-.5px; font-weight:600; color:var(--cream); }
#plan-price { font-size:12px; color:var(--muted); white-space:nowrap; }
.plan #plan-description { font-size:12px; }
.plan #account-pricing-message { margin-top:15px; }
.plan-bottom { flex-wrap:wrap; }
.plan-bottom>div { min-width:0; max-width:100%; }
.plan-bottom .button { white-space:normal; }
.badge[data-state="active"],.badge[data-state="trialing"] { color:var(--green); }
.notice { border:1px solid #91b0e360; background:#91b0e30a; border-radius:8px; padding:16px 20px; margin-bottom:24px; font-size:13px; }
.job-list,.purchase-list { list-style:none; padding:0; margin:0; }
.job-preview { display:grid; place-items:center; width:100%; aspect-ratio:16/10; border-radius:9px; overflow:hidden; background:var(--panel); position:relative; }
.job-preview img,.job-preview video { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.job-preview:hover img { transform:scale(1.035); }
.job-preview.placeholder { color:var(--muted); font-size:12px; border:1px solid var(--line); text-align:center; }
.job-side { position:relative; }
.job-actions { display:flex; gap:5px; position:absolute; top:10px; right:10px; z-index:1; }
.job-actions .viewer-icon { background:#141414dd; border-color:#ffffff30; width:30px; height:30px; }
.job-main { padding-top:13px; }
.job-head { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; }
.job-endpoint { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill { font-size:9px; color:var(--muted); white-space:nowrap; }
.pill[data-state="completed"] { color:var(--green); }
.pill[data-state="failed"] { color:var(--red); }
.pill[data-state="partial"] { color:#dfbb7c; }
.pill[data-state="running"],.pill[data-state="preparing"] { color:var(--blue); }
.job-title { border:0; background:none; padding:0; text-align:left; color:var(--cream); font-size:13px; font-weight:550; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; margin-bottom:5px; max-width:100%; cursor:pointer; }
.job-title:hover { color:var(--blue); }
.job-timing { display:flex; gap:10px; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:6px; flex-wrap:wrap; }
.job-status:empty { display:none; }
.job-status,.job-error { margin-top:9px; font-size:11px; }
.job-prompt { font-size:12px; color:var(--muted); margin-top:10px; }
.empty { border:1px dashed var(--line); border-radius:12px; padding:45px 25px; text-align:center; }
.empty h3 { font-size:23px; font-weight:500; letter-spacing:-.5px; margin-bottom:10px; }
.empty p { margin-bottom:22px; }
.empty-symbol { font-size:40px; color:var(--blue); margin-bottom:15px; }
.load-more { text-align:center; margin-top:25px; }
.load-more p,#filter-status { margin-top:12px; }
.panel-loading { padding:22px; color:var(--muted); font-size:12px; }
.table-scroll { overflow-x:auto; }
.packs { width:100%; border-collapse:collapse; font-size:13px; }
.packs th,.packs td { text-align:left; padding:20px; border-bottom:1px solid var(--line); }
.packs th { color:var(--muted); font-size:10px; font-weight:400; }
.packs td:first-child { font-size:20px; font-weight:550; letter-spacing:-.5px; }
.packs tr:last-child td { border-bottom:0; }
.packs th:last-child,.packs td:last-child { text-align:right; }
.packs .pack-badge { color:var(--blue); border:1px solid #91b0e340; border-radius:4px; font-size:9px; padding:5px 7px; }
.pack-save { display:block; margin-top:4px; font-size:10px; }
.packs .pack-buy { padding:9px 16px; min-height:36px; font-size:11px; }
.pack-note { font-size:10px; }
.account-help { color:var(--muted); font-size:11px; margin-top:14px; }
.purchase { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:21px 24px; font-size:13px; }
.purchase:last-child { border-bottom:0; }
.purchase-meta { color:var(--muted); font-size:11px; margin-top:6px; }
.purchase-amount { white-space:nowrap; }
.account-footer { margin-top:45px; }
.account-footer>div { display:flex; gap:12px 20px; align-items:center; flex-wrap:wrap; }
.mobile-signout { display:none; }
#login { display:grid; grid-template-columns:1fr 1fr; max-width:1080px; margin:55px auto 85px; overflow:hidden; }
.login-copy { padding:65px 45px; display:flex; flex-direction:column; justify-content:center; }
.login-copy h1 { font-size:45px; line-height:1.1; letter-spacing:-1.6px; margin:21px 0; }
.login-copy h1 em { color:var(--blue); font-family:Georgia,serif; font-weight:400; }
.login-copy>p { color:var(--muted); font-size:14px; margin-bottom:28px; }
.login-copy>.button { align-self:start; }
.login-copy>.text-button { margin-top:22px; align-self:start; }
.login-image { min-height:520px; width:100%; height:100%; object-fit:cover; }
body:has(#login:not([hidden])) .heading { display:none; }
.viewer-prompt { flex:1 0 100%; font-size:13px; color:var(--cream); max-height:100px; overflow:auto; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.viewer-prompt:empty { display:none; }
@media(max-width:1200px){:root{--sidebar-width:185px}.sidebar{padding:28px 18px}.studio .page{padding:30px 27px 70px}.studio .topbar{padding:0 27px}.history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview{gap:16px}.wallet,.plan{padding:24px}.plan-title{display:block}#plan-price{display:block;margin-top:10px}}
@media(max-width:950px){:root{--sidebar-width:155px}.sidebar{padding:25px 14px}.sidebar .brand img{width:120px}.account-shortcuts a{padding:12px 9px;gap:8px;font-size:11px}.studio .overview{grid-template-columns:1fr}.studio .heading h1{font-size:32px}.heading .date-note{display:none}.topbar .top-links{gap:18px}.packs th,.packs td{padding:16px 12px}.packs th:nth-child(4),.packs td:nth-child(4){display:none}.plan-title{display:flex}#plan-price{margin:0}.login-copy{padding:40px 30px}.login-copy h1{font-size:38px}}
@media(max-width:720px){:root{--sidebar-width:0px}.studio:has(#account:not([hidden])) .sidebar{display:none}.studio:has(#account:not([hidden])) .topbar,.studio:has(#account:not([hidden])) .page{margin-left:0}.studio:has(#account:not([hidden])) .topbar>.brand{display:block}.topbar{height:76px}.studio .topbar{padding:0 20px}.topbar .top-links{display:none}.topbar .brand img{width:119px}.studio .page{padding:28px 20px 55px}.heading{margin-bottom:26px}.heading p{font-size:13px}.wallet,.plan{padding:25px}.wallet-number{font-size:57px}.plan-title{display:block}.plan-title #plan-name{font-size:24px}#plan-price{margin-top:8px}.section{margin-top:32px}.section-head h2{font-size:22px}.section-head>.tiny{display:none}.history-grid{gap:25px 16px}.filters{flex-wrap:wrap;gap:13px}.search{flex:1;min-width:170px}.search input{width:100%}.packs th,.packs td{padding:17px 12px}.packs td:first-child{font-size:16px}.packs th:nth-child(2),.packs td:nth-child(2){display:none}.packs .pack-buy{padding:9px 12px}.purchase{padding:20px 18px;font-size:12px}.account-footer{flex-direction:column;align-items:start;gap:12px}.studio:has(#account:not([hidden])) .mobile-signout{display:block}#login{grid-template-columns:1fr;margin:10px 0 45px}.login-image{min-height:0;height:240px;order:-1}.login-copy{padding:35px 28px}.login-copy h1{font-size:38px}.viewer-prompt{max-height:80px}}
@media(max-width:420px){.studio .page{padding-inline:17px}.studio .topbar{padding-inline:17px}.topbar>.button{font-size:10px;padding:11px 13px}.history-grid{grid-template-columns:1fr}.wallet-number small{font-size:12px}.wallet-bottom{gap:12px}.packs td,.packs th{padding:16px 10px}.packs .pack-note{font-size:9px}.packs .pack-price{white-space:nowrap}.purchase{gap:12px}.purchase-desc{font-size:11px}.empty{padding:35px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.job-preview img{transition:none}}
/* Generation viewer */
.viewer { width:100%; height:100%; max-width:100%; max-height:100%; border:0; padding:0; background:transparent; color:#e8e4d2; overflow:hidden; }
    .viewer::backdrop { background:#000000cc; }
    .viewer[open] { display:grid; place-items:center; }
    .job-preview-batch { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:3px; align-items:stretch; justify-items:stretch; }
    .job-output { display:grid; min-width:0; min-height:0; overflow:hidden; background:var(--panel); }
    .job-output img { display:block; min-height:0; }
    .job-output:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; }
    .viewer-shell { width:min(1400px,100%); height:min(94vh,100%); display:flex; flex-direction:column; overflow:hidden; background:#211d25; border:1px solid var(--line); border-radius:16px; }
    .viewer-bar { display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid var(--line); }
    .viewer-counter { font:600 12px/1 ui-monospace,monospace; color:var(--muted); font-variant-numeric:tabular-nums; }
    .viewer-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:15px; cursor:pointer; text-decoration:none; }
    .viewer-icon:hover { color:#e8e4d2; background:var(--plum); }
    .viewer-icon.is-armed { color:var(--red); border-color:#ff8a8a80; background:#ff8a8a14; }
    .viewer-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
    .viewer-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
    .viewer-strip { flex:0 0 auto; padding:10px 12px; border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; }
    .viewer-thumbs { display:flex; gap:8px; }
    .viewer-thumb { position:relative; flex:0 0 auto; width:76px; height:56px; padding:0; border-radius:8px; border:1px solid var(--line); background:var(--plum); color:var(--muted); overflow:hidden; cursor:pointer; display:grid; place-items:center; font-size:16px; }
    .viewer-thumb img, .viewer-thumb video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
    .viewer-thumb.has-video::after { content:'▶'; position:absolute; inset:auto 4px 3px auto; font-size:11px; color:#fff; text-shadow:0 1px 4px #000; }
    .viewer-thumb.is-active { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
    .viewer-stage { position:relative; flex:1; min-height:0; background:#0d0c0f; }
    .viewer-media { position:absolute; inset:0; overflow:auto; display:flex; padding:20px 62px; }
    .viewer-media.is-zoomed { cursor:grab; }
    .viewer-media.is-panning { cursor:grabbing; }
    .viewer-media img, .viewer-media video { flex:none; margin:auto; display:block; max-width:100%; max-height:100%; }
    .viewer-media.is-zoomed img { -webkit-user-drag:none; user-select:none; }
    .viewer-placeholder { margin:auto; max-width:420px; padding:24px; text-align:center; color:var(--muted); font-size:14px; line-height:1.7; }
    .viewer-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:42px; height:58px; border-radius:10px; border:1px solid var(--line); background:#211d25cc; color:#e8e4d2; font-size:22px; cursor:pointer; }
    .viewer-nav:hover:not(:disabled) { background:var(--plum); }
    .viewer-nav:disabled { opacity:.3; cursor:default; }
    #viewer-prev { left:10px; } #viewer-next { right:10px; }
    .viewer-info { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:12px 16px; border-top:1px solid var(--line); }
    .viewer-meta { margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); }
    .viewer-meta strong { color:#e8e4d2; font-weight:600; }
    .viewer-zoom { display:flex; align-items:center; gap:8px; margin-left:auto; }
    .viewer-zoom button { min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:transparent; color:#e8e4d2; cursor:pointer; }
    .viewer-zoom button:hover:not(:disabled) { background:var(--plum); }
    .viewer-zoom span { min-width:48px; text-align:center; font:600 12px/1 ui-monospace,monospace; color:var(--muted); font-variant-numeric:tabular-nums; }
    #viewer-send-status { flex:1 0 100%; margin:0; min-height:0; }
    #viewer-send-status:empty { display:none; }
    @media(max-width:700px) { .viewer-shell { height:100%; border-radius:0; } .viewer-media { padding:12px 52px; } .viewer-zoom { margin-left:0; } }