:root { --ink:#172028; --muted:#65727d; --line:#dce3e8; --paper:#fff; --canvas:#f4f7f8; --accent:#e75935; --deep:#122b3e; --success:#197b5d; --danger:#bd3b3b; }
.history-visibility-filter-form { margin:0 0 16px; }
.history-visibility-filter { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:38px; font-size:14px; cursor:pointer; }
.history-visibility-filter input[type="checkbox"] { position:absolute; width:1px; height:1px; margin:0; opacity:0; clip-path:inset(50%); }
.history-switch-track { position:relative; flex:0 0 38px; width:38px; height:22px; border-radius:999px; background:var(--line); transition:background .15s ease; }
.history-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s ease; }
.history-visibility-filter input:checked + .history-switch-track { background:var(--accent); }
.history-visibility-filter input:checked + .history-switch-track::after { transform:translateX(16px); }
.history-visibility-filter input:focus-visible + .history-switch-track { outline:2px solid var(--accent); outline-offset:3px; }
.history-visibility-action { margin-top:12px; }
@media (pointer:coarse) { .history-visibility-filter { min-height:44px; } .card-action.history-visibility-action { width:44px; height:44px; } }
@media (prefers-reduced-motion:reduce) { .history-switch-track,.history-switch-track::after { transition:none; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.site-header { min-height:68px; padding:0 max(24px, calc((100vw - 1200px)/2)); background:var(--deep); display:flex; align-items:center; justify-content:space-between; gap:20px; color:white; }
.brand { color:white; font-size:20px; font-weight:800; text-decoration:none; letter-spacing:-.03em; }.brand span { color:#fdaf66; }
nav { display:flex; align-items:center; gap:18px; } nav a, .link-button { color:#d9e5ec; text-decoration:none; font:inherit; background:none; border:0; cursor:pointer; padding:0; }.link-button:hover, nav a:hover { color:white; }
.inline-form { margin:0; }.page-shell { width:min(1200px, calc(100% - 40px)); margin:38px auto 80px; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }.eyebrow { margin:0 0 6px; color:var(--accent); font-weight:800; font-size:11px; letter-spacing:.12em; }.page-heading h1, .login-card h1 { margin:0; font-size:clamp(28px, 4vw, 42px); letter-spacing:-.04em; }.muted { color:var(--muted); }.small { font-size:12px; }.panel, .job-card { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 8px rgba(30,57,76,.035); }.generation-panel { padding:24px; max-width:760px; }.stack-form, .user-form { display:grid; gap:16px; }.stack-form label, .user-form > label { display:grid; gap:7px; font-weight:700; } input, textarea, select { width:100%; color:var(--ink); border:1px solid #b8c6cf; border-radius:8px; padding:10px 11px; font:inherit; background:#fff; } textarea { resize:vertical; } input:focus, textarea:focus, select:focus { outline:3px solid #bde5ec; border-color:#4692a1; }
.button, .secondary-button { width:max-content; border:0; border-radius:8px; padding:11px 16px; font:700 14px inherit; cursor:pointer; }.button { background:var(--accent); color:white; }.button:hover { background:#ca4224; }.secondary-button { color:var(--deep); background:#e3edf1; }.secondary-button:hover { background:#d1e1e7; }.metric-grid { display:grid; grid-template-columns:repeat(3, minmax(100px, 1fr)); gap:8px; }.metric-grid span { padding:10px 12px; background:white; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:12px; }.metric-grid b { display:block; color:var(--ink); font-size:19px; }.history-section, .admin-section { margin-top:42px; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }.section-heading h2, .health-panel h2 { margin:0; font-size:20px; letter-spacing:-.02em; }.section-heading span { color:var(--muted); font-size:13px; }.job-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; }.job-card { padding:17px; }.job-card-top { display:flex; justify-content:space-between; gap:12px; align-items:center; }.job-card time { color:var(--muted); font-size:11px; text-align:right; }.job-number { font-weight:800; margin-right:8px; }.status { display:inline-block; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }.status-queued { background:#fff0c9; color:#825d06; }.status-running { background:#dceeff; color:#16618e; }.status-completed { background:#d9f2e6; color:#116a4b; }.status-failed, .status-needs_attention { background:#ffe0de; color:#9a302a; }.status-cancelled { background:#edf0f2; color:#65727d; }.model-name { color:#3f6572; font-size:12px; font-weight:700; margin:13px 0 5px; }.prompt { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }.error-text { color:var(--danger); font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }.result-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }.result-link { display:inline-block; margin-top:12px; color:#0f6276; font-weight:700; font-size:13px; }.text-button { background:none; border:0; padding:0; margin-top:14px; font:inherit; font-weight:700; cursor:pointer; }.danger { color:var(--danger); }.empty { padding:22px; color:var(--muted); background:white; border:1px dashed #c7d2d9; border-radius:12px; }.flash { margin-bottom:22px; padding:12px 15px; border-radius:9px; font-weight:600; }.flash-success { color:#0c6248; background:#dff3e8; }.flash-error { color:#91342e; background:#ffe5e3; }.login-card { width:min(440px, 100%); margin:9vh auto; padding:32px; }.login-card h1 { font-size:30px; }.health-panel { padding:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.health-panel pre { margin:8px 0 0; color:var(--muted); white-space:pre-wrap; font:12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }.user-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:14px; }.user-form { padding:19px; }.account-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }.account-title span { color:var(--muted); font-size:12px; }.check-label { display:flex !important; align-items:flex-start; gap:8px !important; font-weight:500 !important; }.check-label input { width:auto; margin-top:3px; }.check-label span, small { color:var(--muted); font-weight:400; }.permission-list { margin:0; padding:11px; border:1px solid var(--line); border-radius:8px; display:grid; gap:8px; }.permission-list legend { padding:0 4px; color:var(--muted); font-size:12px; }
.tool-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:18px; }.tool-card { padding:22px; }.tool-card h2 { margin:0; font-size:22px; letter-spacing:-.02em; }.tool-card .muted { margin:6px 0 0; }.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.two-fields label { display:grid; gap:7px; font-weight:700; }
@media (max-width:720px) { .site-header { padding:14px 20px; align-items:flex-start; flex-direction:column; }.site-header nav { flex-wrap:wrap; gap:12px; }.page-shell { width:min(100% - 28px, 1200px); margin-top:26px; }.page-heading, .health-panel { align-items:flex-start; flex-direction:column; }.metric-grid { width:100%; }.job-list, .tool-grid, .two-fields { grid-template-columns:1fr; } }

/* Studio workspace */
body { --ink:#f7f7fa; --muted:#9d9da9; --line:#2a2a34; --paper:#17171d; --canvas:#0c0c10; --accent:#f14ba1; --deep:#111116; --success:#52c59a; --danger:#ff7878; background:radial-gradient(circle at 20% -20%,#3c1736 0,transparent 33%),var(--canvas); color:var(--ink); }
.site-header { background:rgba(12,12,16,.86); border-bottom:1px solid rgba(255,255,255,.07); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; }.brand span { color:var(--accent); } nav a, .link-button { color:#bdbdc8; } .link-button:hover,nav a:hover { color:#fff; }.page-shell { width:min(1280px,calc(100% - 48px)); margin-top:46px; }
.studio-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:28px; }.studio-heading h1 { margin:0; font-size:clamp(34px,5vw,58px); letter-spacing:-.06em; line-height:.98; }.studio-heading .muted { max-width:560px; margin:12px 0 0; }.eyebrow { color:#ff91ca; }.metric-grid span { background:#181820; border-color:#2c2c37; color:#a6a6b4; }.metric-grid b { color:#fff; }
.realtime-panel { margin:0 0 22px; padding:20px; }.realtime-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }.realtime-heading h2 { margin:0; font-size:22px; letter-spacing:-.03em; }.live-connection { display:inline-flex; align-items:center; gap:7px; color:#aaaab6; font-size:12px; font-weight:750; }.live-connection::before { width:8px; height:8px; border-radius:50%; background:#e0ab51; content:""; box-shadow:0 0 0 4px rgba(224,171,81,.11); }.live-connection[data-state="online"] { color:#8fdbbd; }.live-connection[data-state="online"]::before { background:#52c59a; box-shadow:0 0 0 4px rgba(82,197,154,.12); }.live-connection[data-state="offline"] { color:#ff9c9c; }.live-connection[data-state="offline"]::before { background:#ff7878; box-shadow:0 0 0 4px rgba(255,120,120,.12); }.realtime-metrics { grid-template-columns:repeat(4,minmax(120px,1fr)); }.queue-lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }.queue-lane { padding:12px 13px; border:1px solid #30303b; border-radius:11px; background:#121218; }.queue-lane > div { display:flex; align-items:baseline; justify-content:space-between; gap:9px; }.queue-lane strong { color:#eeeef3; font-size:13px; }.queue-lane small { color:#92929f; text-align:right; }.queue-lane dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0; }.queue-lane dl div { padding:8px; border-radius:8px; background:#1b1b23; }.queue-lane dt { color:#898996; font-size:10px; }.queue-lane dd { margin:1px 0 0; color:#fff; font-size:17px; font-weight:800; }.live-error { margin:12px 0 0; color:#ffaca8; font-size:12px; }
.panel,.job-card { background:rgba(23,23,29,.92); border-color:#2c2c36; box-shadow:0 16px 40px rgba(0,0,0,.2); }.studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; align-items:start; }.creator { padding:25px; }.creator-top { display:flex; align-items:start; justify-content:space-between; gap:18px; }.creator h2,.studio-note h2 { margin:0; letter-spacing:-.035em; font-size:26px; }.unlimited-chip { color:#c7afff; background:#29213c; border:1px solid #624b93; border-radius:999px; padding:7px 11px; font-weight:800; font-size:13px; white-space:nowrap; }.mode-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin:24px -2px 22px; }.mode-tab { appearance:none; border:0; color:#a5a5b1; background:transparent; padding:9px 12px 12px; cursor:pointer; font:700 14px inherit; border-bottom:2px solid transparent; }.mode-tab:hover,.mode-tab.is-active { color:#fff; }.mode-tab.is-active { border-color:var(--accent); }
.constructor-form { display:grid; gap:17px; }.constructor-form[hidden] { display:none; }.constructor-feedback { margin:0 0 17px; }.field-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.field-grid label,.constructor-form label { color:#d7d7df; font-size:13px; font-weight:750; display:grid; gap:7px; } input,textarea,select { background:#111116; color:#f4f4f7; border-color:#353541; border-radius:10px; padding:12px; } select { cursor:pointer; } input:focus,textarea:focus,select:focus { outline:3px solid rgba(241,75,161,.22); border-color:#f14ba1; } .prompt-field textarea { min-height:130px; resize:vertical; }.upload-zone { padding:14px; background:#121218; border:1px dashed #484854; border-radius:12px; }.upload-zone-title { display:flex; justify-content:space-between; gap:10px; }.upload-zone-title b { color:#ff91ca; }.upload-zone input { padding:8px 0 0; border:0; background:transparent; }.selected-files { color:#c9a8ff; font-size:12px; }.generate-button { appearance:none; border:0; cursor:pointer; border-radius:11px; padding:14px 17px; color:white; background:linear-gradient(100deg,#ef3d99,#9a4bf3); font:800 15px inherit; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:0 8px 26px rgba(212,53,159,.25); }.generate-button:hover { filter:brightness(1.12); }.generate-button span { font-size:20px; line-height:0; }.studio-note { padding:23px; position:sticky; top:94px; }.studio-note p { color:#c5c5d0; margin:12px 0; }.note-rule { height:1px; background:var(--line); margin:22px 0; }
.history-section { margin-top:48px; }.section-heading { align-items:end; }.section-heading h2 { font-size:29px; }.media-history { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }.media-card { position:relative; overflow:hidden; background:#17171d; border:1px solid #2c2c36; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.16); }.media-card-head { position:absolute; z-index:1; width:100%; padding:11px; display:flex; justify-content:space-between; gap:10px; pointer-events:none; }.media-card-head time { color:#e5e5eb; font-size:11px; padding:3px 7px; background:rgba(6,6,8,.55); border-radius:999px; backdrop-filter:blur(5px); }.media-preview,.media-placeholder { height:220px; background:linear-gradient(135deg,#292535,#15151b); overflow:hidden; }.media-preview { display:grid; place-items:center; }.media-preview > a,.media-preview > img,.media-preview > video { width:100%; height:100%; display:block; object-fit:cover; }.media-load-button { appearance:none; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 14px; color:#f7f7fa; background:rgba(12,12,16,.68); font:700 13px inherit; cursor:pointer; backdrop-filter:blur(7px); }.media-load-button:hover,.media-load-button:focus-visible { border-color:#ff91ca; background:rgba(241,75,161,.22); outline:none; }.media-load-button span { color:#ff91ca; margin-right:4px; }.media-placeholder { display:grid; place-content:center; gap:9px; color:#878795; text-align:center; padding:20px; }.media-placeholder span { color:#e584c3; font-size:32px; }.media-card-body { padding:14px 15px 17px; }.author-line { color:#dedee7; font-weight:750; font-size:13px; display:flex; justify-content:space-between; gap:10px; }.author-line b { color:#858593; }.model-name { color:#ca8eed; margin:10px 0 6px; }.prompt { color:#d2d2dc; font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }.status { background:rgba(14,14,18,.76); color:#dad8e4; backdrop-filter:blur(5px); }.status-queued { background:#4b3810; color:#ffd674; }.status-running { background:#173a55; color:#91d6ff; }.status-completed { background:#153b30; color:#91e4be; }.status-failed,.status-needs_attention { background:#4b2325; color:#ffaca8; }.empty { background:#17171d; border-color:#3a3a45; }.flash-success { background:#163b30; color:#9ce9c6; }.flash-error { background:#4a2526; color:#ffb1ad; }
.job-progress { margin-top:14px; }.job-progress-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#bdbdc9; font-size:11px; }.job-progress-copy b { color:#ffb4dc; }.job-progress-track { display:block; width:100%; height:6px; margin-top:6px; overflow:hidden; border:0; border-radius:999px; background:#2a2a35; appearance:none; }.job-progress-track::-webkit-progress-bar { background:#2a2a35; }.job-progress-track::-webkit-progress-value { background:linear-gradient(90deg,#f14ba1,#a75cff); border-radius:inherit; transition:width .35s ease; }.job-progress-track::-moz-progress-bar { background:linear-gradient(90deg,#f14ba1,#a75cff); border-radius:inherit; }
@media (max-width:900px) { .studio-layout { grid-template-columns:1fr; }.studio-note { position:static; }.field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .realtime-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.queue-lanes { grid-template-columns:1fr; } }
@media (max-width:620px) { .page-shell { width:min(100% - 28px,1280px); }.studio-heading,.realtime-heading { align-items:start; flex-direction:column; }.field-grid,.realtime-metrics { grid-template-columns:1fr; }.creator { padding:18px; }.media-history { grid-template-columns:1fr; }.studio-note { display:none; } }
.select-all-access { padding-bottom:8px; border-bottom:1px solid var(--line); font-weight:700 !important; }
.media-preview-hint { color:#9d9da9; font-size:12px; }
.media-preview > a { display:flex; align-items:center; justify-content:center; background:#0f0f14; }
.media-preview > a img, .media-preview > img { width:100%; height:100%; object-fit:contain; }
.media-preview[data-media-type="video"] { width:100%; max-width:100%; height:auto; min-height:min(220px,72dvh); max-height:min(72dvh,640px); aspect-ratio:var(--media-aspect-ratio,16/9); background:#050508; contain:layout paint; }
.media-preview[data-media-type="video"] > video { width:100%; max-width:100%; height:100%; max-height:100%; min-width:0; display:block; object-fit:contain; background:#050508; }
.media-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; }
.media-card-actions form { margin:0; }
.card-action { appearance:none; position:relative; display:inline-grid; width:38px; height:38px; place-items:center; padding:0; border:1px solid #d9d2ca; border-radius:11px; color:#5b5148; background:linear-gradient(180deg,#fff,#f7f3ee); box-shadow:0 4px 12px rgba(62,47,34,.08); text-decoration:none; cursor:pointer; transition:transform .14s ease,box-shadow .14s ease,color .14s ease,border-color .14s ease,background .14s ease; }
.card-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.card-action::after { position:absolute; z-index:12; bottom:calc(100% + 8px); left:50%; max-width:190px; padding:6px 8px; border-radius:7px; color:#fff; background:rgba(27,24,21,.94); box-shadow:0 7px 20px rgba(0,0,0,.18); content:attr(data-tooltip); font:650 11px/1.2 inherit; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .12s ease,transform .12s ease; white-space:nowrap; }
.card-action:hover,.card-action:focus-visible { color:#b8461c; border-color:#ee7622; background:#fff7f1; box-shadow:0 7px 18px rgba(197,79,25,.16); outline:none; transform:translateY(-1px); }
.card-action:hover::after,.card-action:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.card-action:disabled { cursor:default; opacity:.76; transform:none; }
.card-action[data-state="success"] { color:#187653; border-color:#52aa88; background:#edf9f4; }
.card-action[data-state="error"] { color:#b53d37; border-color:#d88984; background:#fff1f0; }
.card-action-primary { color:#fff; border-color:transparent; background:var(--brand-gradient); }
.card-action-primary:hover,.card-action-primary:focus-visible { color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(227,41,37,.23); filter:brightness(1.08); }
.history-pagination { display:grid; grid-template-columns:minmax(100px,1fr) auto minmax(100px,1fr); align-items:center; gap:14px; margin-top:24px; }
.history-pagination .pagination-link { display:inline-flex; min-width:38px; min-height:38px; align-items:center; justify-content:center; padding:7px 11px; border:1px solid #363642; border-radius:10px; color:#d9d9e2; background:#17171d; text-decoration:none; font-weight:750; }
.history-pagination a.pagination-link:hover,.history-pagination a.pagination-link:focus-visible { color:#fff; border-color:#f14ba1; background:#2d1826; outline:none; }
.history-pagination .pagination-edge:first-child { justify-self:start; }.history-pagination .pagination-edge:last-child { justify-self:end; }
.pagination-pages { display:flex; align-items:center; justify-content:center; gap:7px; }.history-pagination .is-current { color:#fff; border-color:#f14ba1; background:linear-gradient(100deg,#ef3d99,#9a4bf3); }.history-pagination .is-disabled { color:#686875; cursor:default; }.pagination-ellipsis { min-width:24px; color:#777784; text-align:center; }
@media (max-width:620px) { .history-pagination { grid-template-columns:1fr 1fr; }.pagination-pages { grid-column:1/-1; grid-row:1; flex-wrap:wrap; }.history-pagination .pagination-edge:first-child { grid-column:1; grid-row:2; }.history-pagination .pagination-edge:last-child { grid-column:2; grid-row:2; } }

/* Ordered image references and plain-text @img mentions */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.reference-panel { display:grid; gap:11px; padding:14px; background:#121218; border:1px dashed #484854; border-radius:12px; }
.reference-panel[hidden],.reference-add[hidden],.reference-suggestions[hidden] { display:none; }
.reference-panel > .muted,.reference-panel > .selected-files { margin:0; }
.reference-list { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.reference-item,.reference-add { position:relative; width:88px; height:88px; flex:0 0 88px; }
.reference-card,.reference-add { appearance:none; overflow:hidden; border:1px solid #3b3b47; border-radius:11px; color:#f4f4f7; background:#181820; cursor:pointer; }
.reference-card { width:100%; height:100%; padding:0; }
.reference-card:hover,.reference-card:focus-visible,.reference-add:hover,.reference-add:focus-visible { border-color:#f14ba1; outline:3px solid rgba(241,75,161,.18); }
.reference-card img { width:100%; height:100%; display:block; object-fit:cover; }
.reference-card > span { position:absolute; right:5px; bottom:5px; left:5px; overflow:hidden; padding:3px 5px; border-radius:6px; color:#fff; background:rgba(6,6,10,.78); font-size:11px; font-weight:850; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; backdrop-filter:blur(5px); }
.reference-remove { position:absolute; z-index:2; top:-7px; right:-7px; width:24px; height:24px; padding:0; border:1px solid #5a3d50; border-radius:999px; color:#fff; background:#351d2b; font:800 18px/20px Arial,sans-serif; cursor:pointer; }
.reference-remove:hover,.reference-remove:focus-visible { background:#b93671; border-color:#ff91ca; outline:2px solid #17171d; }
.reference-add { display:grid; place-content:center; gap:2px; color:#bdbdc9; font:750 11px/1.2 inherit; }
.reference-add > span { color:#ff91ca; font-size:27px; font-weight:400; line-height:1; }
.reference-add:disabled { cursor:not-allowed; opacity:.48; }
.reference-hover-preview { position:absolute; z-index:30; left:50%; bottom:calc(100% + 12px); width:190px; overflow:hidden; border:1px solid #484857; border-radius:12px; color:#e8e8ef; background:#0e0e13; box-shadow:0 18px 42px rgba(0,0,0,.48); opacity:0; pointer-events:none; transform:translate(-50%,7px); transition:opacity .14s ease,transform .14s ease; }
.reference-hover-preview img { width:100%; height:142px; display:block; object-fit:contain; background:#08080c; }
.reference-hover-preview span { display:block; overflow:hidden; padding:7px 9px; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.reference-item:hover .reference-hover-preview,.reference-item:focus-within .reference-hover-preview { opacity:1; transform:translate(-50%,0); }
.selected-files.is-error { color:#ff9a96; }
.prompt-editor-shell { position:relative; }
.prompt-editor-shell textarea { display:block; }
.reference-suggestions { position:absolute; z-index:25; top:calc(100% + 7px); right:0; left:0; max-height:260px; overflow:auto; padding:7px; border:1px solid #3d3d49; border-radius:12px; background:#15151b; box-shadow:0 18px 44px rgba(0,0,0,.45); }
.reference-suggestion { width:100%; display:flex; align-items:center; gap:10px; padding:8px; border:0; border-radius:8px; color:#eaeaf0; background:transparent; text-align:left; cursor:pointer; }
.reference-suggestion:hover,.reference-suggestion[aria-selected="true"] { background:#292631; }
.reference-suggestion img { width:42px; height:42px; flex:0 0 42px; border-radius:7px; object-fit:cover; background:#0c0c10; }
.reference-suggestion > span { min-width:0; display:grid; gap:1px; }
.reference-suggestion strong { color:#fff; font-size:13px; }
.reference-suggestion small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.generate-button:disabled { cursor:not-allowed; filter:grayscale(.4); opacity:.48; }
@media (max-width:620px) { .reference-item,.reference-add { width:76px; height:76px; flex-basis:76px; }.reference-hover-preview { display:none; } }
.video-frame-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:start; }
.keyframe-order-controls { display:flex; gap:4px; margin-top:4px; }
.keyframe-order-controls button { flex:1; padding:2px 8px; min-height:26px; }
.video-extra-grid { align-items:end; }
.toggle-field { min-height:45px; grid-template-columns:auto 1fr; align-items:center; align-self:end; padding:11px 12px; border:1px solid #353541; border-radius:10px; background:#111116; cursor:pointer; }
.toggle-field input { width:18px; height:18px; margin:0; padding:0; accent-color:#ee7622; }
.toggle-field span { color:inherit; }
@media (max-width:620px) { .video-frame-grid { grid-template-columns:1fr; } }

/* Studio KiS visual system — inspired by the supplied Infomens identity. */
:root {
  --brand-red:#e32925;
  --brand-orange:#ee7622;
  --brand-gradient:linear-gradient(45deg,#e32925,#ee7622);
}
body {
  --ink:#3c3c3a;
  --muted:#777773;
  --line:#e2ddd6;
  --paper:#fff;
  --canvas:#f7f5f1;
  --accent:#e32925;
  --deep:#3c3c3a;
  --success:#258566;
  --danger:#bb3734;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 2%,rgba(238,118,34,.11),transparent 28rem),
    radial-gradient(circle at 96% 32%,rgba(227,41,37,.06),transparent 34rem),
    var(--canvas);
  font-family:"Avenir Next","Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;
}

.site-header {
  min-height:84px;
  padding-inline:max(24px,calc((100vw - 1280px)/2));
  color:var(--ink);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(60,60,58,.1);
  box-shadow:0 8px 30px rgba(75,60,45,.055);
  backdrop-filter:blur(16px);
}
.site-header::after {
  position:absolute;
  right:0;
  bottom:-1px;
  width:min(34vw,420px);
  height:2px;
  background:var(--brand-gradient);
  content:"";
}
.brand { display:inline-flex; align-items:center; gap:13px; color:var(--ink); letter-spacing:normal; }
.brand:hover { color:var(--ink); }
.brand-mark { width:48px; height:52px; overflow:hidden; flex:0 0 48px; display:block; }
.brand-mark img { width:auto; height:52px; display:block; }
.brand-copy { min-width:0; display:grid; gap:1px; line-height:1; }
.brand-copy strong { font-size:20px; font-weight:850; letter-spacing:-.035em; }
.brand-copy small { color:#787875; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.site-header nav { gap:22px; }
.site-header nav a,.site-header .link-button { position:relative; color:#555552; font-size:13px; font-weight:700; }
.site-header nav a::after,.site-header .link-button::after {
  position:absolute;
  right:0;
  bottom:-8px;
  left:0;
  height:3px;
  background:var(--brand-gradient);
  content:"";
  opacity:0;
  transform:scaleX(.35);
  transition:opacity .18s ease,transform .18s ease;
}
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header .link-button:hover,.site-header .link-button:focus-visible { color:#252523; outline:none; }
.site-header nav a:hover::after,.site-header nav a:focus-visible::after,.site-header .link-button:hover::after,.site-header .link-button:focus-visible::after { opacity:1; transform:scaleX(1); }
.page-shell { width:min(1280px,calc(100% - 48px)); margin-top:34px; }

.studio-heading {
  position:relative;
  min-height:236px;
  align-items:center;
  overflow:hidden;
  padding:42px 46px;
  border:1px solid var(--line);
  border-radius:22px;
  background-color:#fff;
  background-image:linear-gradient(90deg,#fff 0 31%,rgba(255,255,255,.92) 47%,rgba(255,255,255,.12) 100%),url("about_bg_new.jpg");
  background-position:center,right center;
  background-repeat:no-repeat;
  background-size:auto,auto 100%;
  box-shadow:0 20px 54px rgba(75,60,45,.08);
}
.studio-heading::before {
  position:absolute;
  top:34px;
  bottom:34px;
  left:0;
  width:5px;
  border-radius:0 4px 4px 0;
  background:var(--brand-gradient);
  content:"";
}
.studio-heading > div { position:relative; z-index:1; max-width:650px; }
.studio-heading h1 { color:var(--ink); font-weight:700; letter-spacing:-.05em; }
.studio-heading .muted { color:#62625e; max-width:600px; }
.eyebrow {
  width:max-content;
  max-width:100%;
  color:var(--brand-red);
  background:var(--brand-gradient);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:.14em;
}

.panel,.job-card,.media-card {
  color:var(--ink);
  background:rgba(255,255,255,.96);
  border-color:var(--line);
  box-shadow:0 14px 38px rgba(75,60,45,.07);
}
.panel,.job-card { border-radius:16px; }
.creator { padding:28px; }
.creator h2,.studio-note h2,.realtime-heading h2,.section-heading h2,.page-heading h1,.login-card h1 { color:var(--ink); }
.muted,.section-heading span,.job-card time,.account-title span,.health-panel pre,.check-label span,small { color:var(--muted); }
.unlimited-chip { color:#a33b21; background:#fff3e7; border-color:#f2c4a0; }
.mode-tabs { border-color:var(--line); }
.mode-tab { color:#777773; }
.mode-tab:hover,.mode-tab.is-active { color:#2f2f2d; }
.mode-tab.is-active { border-color:var(--brand-orange); }
.field-grid label,.constructor-form label,.stack-form label,.user-form > label { color:#4b4b48; }
input,textarea,select {
  color:var(--ink);
  background:#fff;
  border-color:#cbc5bd;
  box-shadow:inset 0 1px 2px rgba(60,60,58,.025);
}
input:hover,textarea:hover,select:hover { border-color:#aca49a; }
input:focus,textarea:focus,select:focus { outline:3px solid rgba(238,118,34,.18); border-color:var(--brand-orange); }
.button,.generate-button {
  color:#fff;
  background:var(--brand-gradient);
  box-shadow:0 10px 24px rgba(227,41,37,.18);
}
.button:hover,.generate-button:hover { filter:brightness(1.07); box-shadow:0 12px 28px rgba(227,41,37,.23); }
.secondary-button { color:#4a4946; background:#f1ede8; border:1px solid #ded8d0; }
.secondary-button:hover { background:#e9e3dc; }
.upload-zone,.reference-panel { background:#fbf8f4; border-color:#d4c9bd; }
.toggle-field { background:#fff; border-color:#cbc5bd; }
.upload-zone-title b,.selected-files,.reference-add > span { color:var(--brand-orange); }
.studio-note { top:108px; }
.studio-note p { color:#676762; }
.note-rule { background:linear-gradient(90deg,#e32925,#ee7622,transparent); }

.metric-grid span { color:var(--muted); background:#fff; border-color:var(--line); }
.metric-grid b { color:var(--ink); }
.queue-lane { background:#fbf9f6; border-color:#e1dbd3; }
.queue-lane strong,.queue-lane dd { color:var(--ink); }
.queue-lane small,.queue-lane dt { color:var(--muted); }
.queue-lane dl div { background:#f1ede7; }
.live-connection { color:#777773; }
.live-error { color:var(--danger); }

.media-card { border-radius:16px; }
.media-card-body { background:#fff; }
.media-placeholder { color:#8a8984; background:linear-gradient(135deg,#f1ede7,#faf8f5); }
.media-placeholder span { color:var(--brand-orange); }
.author-line { color:#464643; }
.author-line b { color:#888680; }
.model-name { color:#c34d24; }
.prompt { color:#5c5c57; }
.media-load-button:hover,.media-load-button:focus-visible { border-color:#f29a5e; background:rgba(238,118,34,.25); }
.media-load-button span { color:#ffad72; }
.status-queued { background:#fff0c9; color:#825d06; }
.status-running { background:#e1f1fb; color:#206789; }
.status-completed { background:#dff3e9; color:#166c50; }
.status-failed,.status-needs_attention { background:#ffe2df; color:#a03631; }
.status-cancelled { background:#eeece8; color:#686863; }
.empty { color:var(--muted); background:#fff; border-color:#cec7bf; }
.flash-success { color:#16684f; background:#dff3e9; }
.flash-error { color:#963530; background:#ffe4e1; }
.job-progress-copy { color:#777773; }
.job-progress-copy b { color:#c84626; }
.job-progress-track,.job-progress-track::-webkit-progress-bar { background:#ece6df; }
.job-progress-track::-webkit-progress-value,.job-progress-track::-moz-progress-bar { background:var(--brand-gradient); }

.history-pagination .pagination-link { color:#555552; background:#fff; border-color:#d9d2ca; }
.history-pagination a.pagination-link:hover,.history-pagination a.pagination-link:focus-visible { color:#b23823; border-color:#ee7622; background:#fff4eb; }
.history-pagination .is-current { color:#fff; border-color:transparent; background:var(--brand-gradient); }
.history-pagination .is-disabled,.pagination-ellipsis { color:#99958f; }

.reference-card,.reference-add { color:#555552; background:#fff; border-color:#d5cec6; }
.reference-card:hover,.reference-card:focus-visible,.reference-add:hover,.reference-add:focus-visible { border-color:var(--brand-orange); outline-color:rgba(238,118,34,.18); }
.reference-remove { color:#fff; background:#a84131; border-color:#8d3429; }
.reference-remove:hover,.reference-remove:focus-visible { background:var(--brand-red); border-color:#ff9a70; outline-color:#fff; }
.reference-suggestions { background:#fff; border-color:#d9d2ca; box-shadow:0 18px 44px rgba(75,60,45,.16); }
.reference-suggestion { color:#464643; }
.reference-suggestion:hover,.reference-suggestion[aria-selected="true"] { background:#fff1e7; }
.reference-suggestion strong { color:#333330; }

.login-card {
  position:relative;
  overflow:hidden;
  margin-block:6vh;
  padding-top:210px;
  background-color:#fff;
  background-image:linear-gradient(180deg,rgba(255,255,255,.04) 0 58%,#fff 84%),url("about_bg_new.jpg");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:auto,auto 175px;
}
.login-card::before { position:absolute; top:0; right:0; left:0; height:5px; background:var(--brand-gradient); content:""; }
.login-card > * { position:relative; z-index:1; }
.permission-list { border-color:var(--line); }
.result-link { color:#b64425; }
.result-link:hover { color:var(--brand-red); }

@media (max-width:720px) {
  .site-header { padding:13px 20px; }
  .site-header::after { width:55vw; }
  .site-header nav { width:100%; gap:14px 18px; }
  .brand-mark { width:42px; height:46px; flex-basis:42px; }
  .brand-mark img { height:46px; }
  .page-shell { width:min(100% - 28px,1280px); margin-top:24px; }
  .studio-heading { min-height:0; padding:32px 24px; background-position:center,right top; background-size:auto,auto 78%; }
  .studio-heading::before { top:24px; bottom:24px; }
}
@media (max-width:620px) {
  .studio-heading { background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.78)),url("about_bg_new.jpg"); }
  .creator { padding:20px; }
  .login-card { padding:184px 24px 28px; background-size:auto,auto 150px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* Theme controls */
:root { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
.header-actions { display:flex; align-items:center; gap:20px; }
.theme-toggle {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid #d9d2ca;
  border-radius:999px;
  color:#555552;
  background:#fff;
  font:700 12px/1 inherit;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.theme-toggle:hover,.theme-toggle:focus-visible { color:#b23c24; border-color:#ee7622; background:#fff4eb; outline:3px solid rgba(238,118,34,.14); }
.theme-toggle:active { transform:translateY(1px); }
.theme-toggle-icon { width:18px; height:18px; display:grid; place-items:center; flex:0 0 18px; }
.theme-toggle-icon::before { color:var(--brand-orange); content:"☾"; font:700 19px/1 "Segoe UI Symbol",sans-serif; }
:root[data-theme="dark"] .theme-toggle-icon::before { content:"☀"; }

/* Dark Studio KiS theme */
:root[data-theme="dark"] body {
  --ink:#f2eee8;
  --muted:#aaa39b;
  --line:#3b3732;
  --paper:#211f1c;
  --canvas:#12110f;
  --accent:#ee7622;
  --deep:#f2eee8;
  --success:#66c9a5;
  --danger:#ff8b83;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 2%,rgba(238,118,34,.13),transparent 28rem),
    radial-gradient(circle at 96% 32%,rgba(227,41,37,.1),transparent 34rem),
    var(--canvas);
}
:root[data-theme="dark"] .site-header {
  color:var(--ink);
  background:rgba(21,20,18,.93);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .brand,:root[data-theme="dark"] .brand:hover { color:var(--ink); }
:root[data-theme="dark"] .brand-copy small { color:#aaa39b; }
:root[data-theme="dark"] .site-header nav a,:root[data-theme="dark"] .site-header .link-button { color:#c6c0b8; }
:root[data-theme="dark"] .site-header nav a:hover,:root[data-theme="dark"] .site-header nav a:focus-visible,:root[data-theme="dark"] .site-header .link-button:hover,:root[data-theme="dark"] .site-header .link-button:focus-visible { color:#fff; }
:root[data-theme="dark"] .theme-toggle { color:#d5cec6; background:#26231f; border-color:#47423c; }
:root[data-theme="dark"] .theme-toggle:hover,:root[data-theme="dark"] .theme-toggle:focus-visible { color:#fff; background:#35271f; border-color:#ee7622; }

:root[data-theme="dark"] .studio-heading {
  isolation:isolate;
  background-color:#1d1b19;
  background-image:
    radial-gradient(circle at 82% 42%,rgba(238,118,34,.1),transparent 25rem),
    linear-gradient(135deg,#211e1b 0%,#181715 72%,#151412 100%);
  background-size:auto;
  border-color:#403b35;
  box-shadow:0 24px 68px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025);
}
:root[data-theme="dark"] .studio-heading::after {
  position:absolute;
  z-index:0;
  inset:0;
  background:url("about_bg_new.jpg") no-repeat right center/auto 135%;
  content:"";
  filter:invert(1) grayscale(.62) sepia(.22) saturate(.72) brightness(.82);
  mix-blend-mode:screen;
  opacity:.3;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.38) 48%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.38) 48%,#000 72%);
}
:root[data-theme="dark"] .studio-heading h1,:root[data-theme="dark"] .creator h2,:root[data-theme="dark"] .studio-note h2,:root[data-theme="dark"] .realtime-heading h2,:root[data-theme="dark"] .section-heading h2,:root[data-theme="dark"] .page-heading h1,:root[data-theme="dark"] .login-card h1 { color:var(--ink); }
:root[data-theme="dark"] .studio-heading h1 { text-shadow:0 3px 24px rgba(0,0,0,.22); }
:root[data-theme="dark"] .studio-heading .muted { color:#beb6ad; }
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .job-card,:root[data-theme="dark"] .media-card {
  color:var(--ink);
  background:rgba(32,30,27,.97);
  border-color:var(--line);
  box-shadow:0 16px 42px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .muted,:root[data-theme="dark"] .section-heading span,:root[data-theme="dark"] .job-card time,:root[data-theme="dark"] .account-title span,:root[data-theme="dark"] .health-panel pre,:root[data-theme="dark"] .check-label span,:root[data-theme="dark"] small { color:var(--muted); }
:root[data-theme="dark"] .unlimited-chip { color:#ffc09c; background:#3a251b; border-color:#78432b; }
:root[data-theme="dark"] .mode-tab { color:#aaa39b; }
:root[data-theme="dark"] .mode-tab:hover,:root[data-theme="dark"] .mode-tab.is-active { color:#fff; }
:root[data-theme="dark"] .field-grid label,:root[data-theme="dark"] .constructor-form label,:root[data-theme="dark"] .stack-form label,:root[data-theme="dark"] .user-form > label { color:#d5cfc7; }
:root[data-theme="dark"] input,:root[data-theme="dark"] textarea,:root[data-theme="dark"] select { color:#f2eee8; background:#171614; border-color:#4b4640; box-shadow:inset 0 1px 2px rgba(0,0,0,.22); }
:root[data-theme="dark"] input:hover,:root[data-theme="dark"] textarea:hover,:root[data-theme="dark"] select:hover { border-color:#6b6258; }
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] textarea:focus,:root[data-theme="dark"] select:focus { outline-color:rgba(238,118,34,.24); border-color:var(--brand-orange); }
:root[data-theme="dark"] .secondary-button { color:#e8e2da; background:#302d29; border-color:#4c4741; }
:root[data-theme="dark"] .secondary-button:hover { background:#3b3732; }
:root[data-theme="dark"] .upload-zone,:root[data-theme="dark"] .reference-panel { background:#191714; border-color:#554d44; }
:root[data-theme="dark"] .studio-note p { color:#c1bab2; }

:root[data-theme="dark"] .metric-grid span { color:var(--muted); background:#191816; border-color:#413d38; }
:root[data-theme="dark"] .metric-grid b,:root[data-theme="dark"] .queue-lane strong,:root[data-theme="dark"] .queue-lane dd { color:var(--ink); }
:root[data-theme="dark"] .queue-lane { background:#191816; border-color:#413d38; }
:root[data-theme="dark"] .queue-lane small,:root[data-theme="dark"] .queue-lane dt { color:var(--muted); }
:root[data-theme="dark"] .queue-lane dl div { background:#27241f; }
:root[data-theme="dark"] .live-connection { color:#aaa39b; }

:root[data-theme="dark"] .media-card-body { background:#201e1b; }
:root[data-theme="dark"] .media-placeholder { color:#9f9890; background:linear-gradient(135deg,#302a25,#1a1917); }
:root[data-theme="dark"] .author-line { color:#e5dfd7; }
:root[data-theme="dark"] .author-line b { color:#9c958d; }
:root[data-theme="dark"] .model-name { color:#f49761; }
:root[data-theme="dark"] .prompt { color:#c9c2ba; }
:root[data-theme="dark"] .card-action { color:#d9d2ca; background:#292622; border-color:#4d4740; }
:root[data-theme="dark"] .card-action:hover,:root[data-theme="dark"] .card-action:focus-visible { color:#fff; background:#3a251b; border-color:#ee7622; }
:root[data-theme="dark"] .card-action::after { color:#fff; background:rgba(12,11,10,.96); }
:root[data-theme="dark"] .card-action[data-state="success"] { color:#9ce9c6; background:#163b30; border-color:#347b61; }
:root[data-theme="dark"] .card-action[data-state="error"] { color:#ffb1ad; background:#4a2526; border-color:#81413f; }
:root[data-theme="dark"] .card-action-primary { color:#fff; border-color:transparent; background:var(--brand-gradient); }
:root[data-theme="dark"] .status-queued { background:#4b3810; color:#ffd674; }
:root[data-theme="dark"] .status-running { background:#173a55; color:#91d6ff; }
:root[data-theme="dark"] .status-completed { background:#153b30; color:#91e4be; }
:root[data-theme="dark"] .status-failed,:root[data-theme="dark"] .status-needs_attention { background:#4b2325; color:#ffaca8; }
:root[data-theme="dark"] .status-cancelled { background:#33312e; color:#b5aea6; }
:root[data-theme="dark"] .empty { color:var(--muted); background:#1b1917; border-color:#4b453e; }
:root[data-theme="dark"] .flash-success { color:#9ce9c6; background:#163b30; }
:root[data-theme="dark"] .flash-error { color:#ffb1ad; background:#4a2526; }
:root[data-theme="dark"] .job-progress-track,:root[data-theme="dark"] .job-progress-track::-webkit-progress-bar { background:#37332e; }

:root[data-theme="dark"] .history-pagination .pagination-link { color:#d9d2ca; background:#211f1c; border-color:#47423c; }
:root[data-theme="dark"] .history-pagination a.pagination-link:hover,:root[data-theme="dark"] .history-pagination a.pagination-link:focus-visible { color:#fff; border-color:#ee7622; background:#3a251b; }
:root[data-theme="dark"] .history-pagination .is-current { color:#fff; border-color:transparent; background:var(--brand-gradient); }
:root[data-theme="dark"] .history-pagination .is-disabled,:root[data-theme="dark"] .pagination-ellipsis { color:#777169; }

:root[data-theme="dark"] .reference-card,:root[data-theme="dark"] .reference-add { color:#d7d0c8; background:#26231f; border-color:#4c4741; }
:root[data-theme="dark"] .toggle-field { background:#191714; border-color:#554d44; }
:root[data-theme="dark"] .reference-suggestions { background:#211f1c; border-color:#4c4741; box-shadow:0 18px 44px rgba(0,0,0,.4); }
:root[data-theme="dark"] .reference-suggestion { color:#ddd6ce; }
:root[data-theme="dark"] .reference-suggestion:hover,:root[data-theme="dark"] .reference-suggestion[aria-selected="true"] { background:#3a251b; }
:root[data-theme="dark"] .reference-suggestion strong { color:#fff; }

:root[data-theme="dark"] .login-card {
  isolation:isolate;
  background-color:#1d1b19;
  background-image:linear-gradient(180deg,#24211e 0 30%,#1d1b19 48%,#1d1b19 100%);
  border-color:#403b35;
  box-shadow:0 24px 68px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);
}
:root[data-theme="dark"] .login-card::after {
  position:absolute;
  z-index:0;
  top:5px;
  right:0;
  left:0;
  height:190px;
  background:url("about_bg_new.jpg") no-repeat center top/auto 175px;
  content:"";
  filter:invert(1) grayscale(.6) sepia(.28) saturate(.75) brightness(.78);
  mix-blend-mode:screen;
  opacity:.32;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 68%,transparent 100%);
}
:root[data-theme="dark"] .permission-list { border-color:var(--line); }
:root[data-theme="dark"] .result-link { color:#f49761; }
:root[data-theme="dark"] .result-link:hover { color:#ffb184; }

@media (max-width:720px) {
  .header-actions { width:100%; gap:12px; }
  .site-header .header-actions nav { width:auto; flex:1; }
  .theme-toggle { margin-left:auto; }
}
@media (max-width:620px) {
  :root[data-theme="dark"] .studio-heading {
    background-image:
      radial-gradient(circle at 88% 30%,rgba(238,118,34,.11),transparent 17rem),
      linear-gradient(145deg,#211e1b,#161513);
  }
  :root[data-theme="dark"] .studio-heading::after {
    background-position:center;
    background-size:auto 112%;
    opacity:.22;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 42%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 42%,#000 100%);
  }
  .theme-toggle-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .theme-toggle { width:40px; padding:7px 10px; justify-content:center; }
}

/* Administration: compact accounts, progressive disclosure and scoped filters. */
.admin-workspace { --admin-radius:16px; }
.admin-workspace [hidden] { display:none !important; }
.admin-nav { display:flex; flex-wrap:wrap; gap:8px; padding:10px; margin-bottom:28px; border:1px solid var(--line); border-radius:var(--admin-radius); background:var(--paper); }
.admin-nav a { padding:11px 15px; border-radius:10px; color:var(--ink); font-size:13px; font-weight:750; text-decoration:none; }
.admin-nav a:hover { background:var(--canvas); color:var(--accent); }
.admin-nav a:last-child { margin-left:auto; color:white; background:var(--brand-gradient); }
.admin-workspace :is(section,details,.page-heading)[id] { scroll-margin-top:24px; }
.admin-workspace summary { cursor:pointer; }
.admin-workspace :is(a,button,summary,input,select):focus-visible { outline:3px solid var(--brand-orange); outline-offset:3px; }
.admin-create { padding:20px 24px; }
.admin-create > summary { font-weight:800; font-size:17px; }
.admin-create > summary span { display:inline-block; margin-left:15px; font-size:12px; font-weight:400; }
.admin-create > .user-form { border:0; box-shadow:none; padding:24px 0 0; margin:0; background:transparent; }
.admin-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:end; padding:18px; margin:16px 0; background:var(--paper); border:1px solid var(--line); border-radius:var(--admin-radius); }
.admin-toolbar label:first-child { flex:1 1 260px; }
.admin-toolbar label { min-width:170px; display:grid; gap:7px; font-size:12px; font-weight:700; }
.admin-toolbar input,.admin-toolbar select { width:100%; min-height:44px; }
.admin-toolbar [role=status] { align-self:center; font-size:12px; }
.admin-user-list { display:grid; grid-template-columns:1fr; gap:10px; }
.admin-account { padding:0; overflow:hidden; }
.admin-account-summary { display:flex; align-items:center; gap:18px; padding:18px 22px; list-style:none; }
.admin-account-summary::-webkit-details-marker { display:none; }
.admin-account-summary::after { content:'+'; font-size:22px; color:var(--muted); }
.admin-account[open] > summary::after { content:'−'; }
.admin-account[open] > summary { border-bottom:1px solid var(--line); background:var(--canvas); }
.admin-avatar { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:13px; background:var(--canvas); color:var(--accent); font-weight:800; }
.admin-account-name { display:grid; gap:4px; flex:1; min-width:0; overflow-wrap:anywhere; }
.admin-account-name small,.admin-role,.admin-edit-label { color:var(--muted); font-size:12px; }
.admin-state { padding:6px 10px; border:1px solid var(--line); border-radius:30px; font-size:12px; color:var(--muted); }
.admin-state.is-enabled { color:var(--success); }
.admin-edit-form { padding:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.admin-edit-form > :is(p,fieldset,.admin-form-actions) { grid-column:1/-1; }
.admin-workspace .permission-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-workspace .select-all-access { grid-column:1/-1; }
.admin-form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding-top:16px; border-top:1px solid var(--line); }
.admin-workspace .health-panel { gap:20px; }
.admin-workspace .health-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-workspace .job-card { min-width:0; }
.admin-workspace .job-card :is(.prompt,.error-text,.model-name,.result-link) { overflow-wrap:anywhere; }
.admin-prompt summary { color:var(--muted); font-size:13px; margin:12px 0; }
@media(max-width:700px) {
  .admin-nav a { flex:1 1 40%; text-align:center; }
  .admin-nav a:last-child { margin-left:0; }
  .admin-account-summary { flex-wrap:wrap; gap:10px; padding:16px; }
  .admin-account-name { flex-basis:calc(100% - 65px); }
  .admin-edit-label { margin-left:auto; }
  .admin-edit-form { grid-template-columns:1fr; padding:16px; }
  .admin-workspace .permission-list { grid-template-columns:1fr; }
  .admin-toolbar label { flex:1 1 100%; }
  .admin-create > summary span { display:block; margin:8px 0 0; }
  .admin-workspace .health-panel { flex-direction:column; align-items:stretch; }
}
.admin-workspace .admin-prompt .prompt { display:block; overflow:visible; -webkit-line-clamp:unset; }
@media(max-width:700px) { .admin-workspace .page-heading { flex-direction:column; align-items:stretch; } .admin-workspace .metric-grid.compact { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.permission-section { grid-column:1/-1; }
.permission-model { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; }
.permission-model > summary { font-weight:750; cursor:pointer; }
.permission-model summary small { margin-left:8px; color:var(--muted); font-weight:400; }
.permission-model .check-label { margin-top:12px; align-items:start; }
.permission-model .check-label span { display:grid; gap:4px; overflow-wrap:anywhere; }
.permission-model .check-label small { color:var(--muted); font-size:12px; }
.admin-token-panel { padding:24px; }
.admin-token-row { display:flex; align-items:end; gap:16px; border-top:1px solid var(--line); padding:15px 0; }
.admin-token-row label { display:grid; gap:5px; flex:1; }
.admin-token-row small { color:var(--muted); }
.admin-token-row input[type=number] { max-width:240px; }
.personal-token-balance { padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
@media(max-width:700px) { .admin-token-panel .metric-grid { grid-template-columns:1fr; } .admin-token-row { flex-wrap:wrap; } }
.permission-tier { grid-column:1/-1; min-width:0; padding:12px 0; border-top:1px solid var(--line); }
.permission-tier > summary { font-size:16px; font-weight:800; }
.permission-tier > summary small { font-size:12px; font-weight:400; color:var(--muted); margin-left:10px; }
.permission-tier > fieldset { margin-top:14px; }

.admin-workspace .token-table-scroll {max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.admin-workspace .token-table {width:100%;border-collapse:collapse}
.admin-workspace .token-table th,.admin-workspace .token-table td {padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}
.admin-workspace .token-table th {position:sticky;top:0;background:var(--paper);z-index:1}
.admin-workspace .token-table small {display:inline-block;margin-left:8px;opacity:.65}
.admin-workspace .token-table input {width:150px;max-width:100%;padding:8px}
.admin-workspace .token-toolbar {display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0}
.admin-workspace .token-toolbar label {max-width:300px}
.admin-workspace .token-table tr[hidden] {display:none}
@media(max-width:600px){.admin-workspace .token-table small{display:block;margin-left:0}.admin-workspace .token-table input{width:110px}}

.admin-workspace .paid-variant-preview {grid-column:1/-1;width:100%}
.admin-workspace .paid-variant-list {max-height:250px;overflow:auto;font-size:12px;margin:8px 0}
.admin-workspace .paid-variant-list>div {display:flex;justify-content:space-between;gap:12px;padding:6px 4px;border-bottom:1px solid var(--line)}
.admin-workspace .paid-variant-list b {white-space:nowrap}

.admin-workspace .paid-variant-choice {display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.admin-workspace .paid-variant-choice input {width:16px;height:16px;flex:0 0 16px}
.admin-workspace .paid-variant-choice span {flex:1}
.admin-workspace .paid-variant-choice b {font-size:11px}
@media(max-width:600px){.admin-workspace .paid-variant-choice{flex-wrap:wrap}.admin-workspace .paid-variant-choice b{margin-left:26px}}
.admin-release {margin:14px 0;padding:12px 16px;font-size:13px}
.admin-release summary {cursor:pointer}
.admin-release p {margin:8px 0 0}
.admin-release code {overflow-wrap:anywhere}

/* Image layer separation follows the creator's existing light and dark palette. */
.layers-intro h3,.layers-section h3 {margin:0 0 6px;font-size:18px}
.layers-intro p,.layers-section p {margin:0}
.layers-intro,.layers-section,.layers-descriptions {margin-bottom:18px}
.layers-section {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.layers-stepper {display:flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.layers-stepper button {width:38px;height:38px;border:0;background:transparent;color:var(--text);font-size:22px;cursor:pointer}
.layers-stepper button:disabled {opacity:.35;cursor:default}
.layers-stepper output {min-width:29px;text-align:center;font-weight:800}
.layers-descriptions {padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.layers-fields {display:grid;gap:9px;margin:15px 0}
.layers-row {display:flex;align-items:center;gap:12px}
.layers-number {width:34px;flex:none;color:var(--accent);font-weight:800}
.layers-row label {display:grid;gap:5px;flex:1;min-width:0;font-weight:700}
.layers-row input {width:100%}
.layers-row input[readonly] {opacity:.7;cursor:not-allowed}
.layers-row small {font-weight:400;color:var(--muted)}
.layers-validation {min-height:18px;margin:8px 0 0;font-size:12px}
.layers-validation.is-error {color:#e88960}
.media-card-layers .media-card-head {position:static;width:auto;align-items:center;flex-wrap:wrap;padding:12px 14px;gap:7px 9px;background:#17171d}
.media-card-layers .media-card-head .status {max-width:100%;line-height:1.4}
.media-card-layers .media-card-head time {max-width:100%;white-space:nowrap;font-size:10px}
.media-card-layers .media-card-body {padding-top:12px}
.media-card-layers .media-placeholder {height:120px}
.layer-results {display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:12px 0}
.layer-result {display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.layer-result .media-preview {width:76px;height:76px;min-height:0;margin:0;border-radius:7px;background-color:#d8d3cc;background-image:linear-gradient(45deg,#eee9e3 25%,transparent 25%),linear-gradient(-45deg,#eee9e3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee9e3 75%),linear-gradient(-45deg,transparent 75%,#eee9e3 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.layer-result .media-preview > a {background:transparent}
.layer-result .media-preview img {width:100%;height:100%;object-fit:contain}
.layer-result .media-preview-hint {padding:5px;text-align:center;font-size:10px;overflow-wrap:anywhere}
.layer-result-details {min-width:0}
.layer-result strong {display:block;font-size:12px;overflow-wrap:anywhere}
.layer-result-details .layer-download {width:100%;max-width:150px}
.layer-download {display:flex;align-items:center;justify-content:center;min-height:34px;margin-top:8px;border:1px solid var(--line);border-radius:8px;color:var(--text);text-decoration:none;font-size:12px;font-weight:700}
.layer-download:hover {color:var(--accent);border-color:var(--accent)}
.layer-download-all {padding:0 12px;background:linear-gradient(55deg,#e32925,#ee7622);color:#fff;border:0}
.layer-download-all:hover {color:#fff;filter:brightness(1.08)}
@media(max-width:600px) {.layers-section {padding:13px}}

/* Kling Omni materials */
.omni-material-card{height:112px}
.omni-material-card .reference-card{height:88px;display:block}
.omni-material-preview{width:100%;height:100%;display:block;object-fit:cover}
.omni-material-mention{width:100%;padding:4px 0;border:0;background:transparent;color:var(--accent);font-size:11px;cursor:pointer}
#kling-omni-field .reference-add{margin-bottom:24px}
#kling-omni-limits{font-size:.75rem;font-weight:500;text-align:right}
.video-frame-grid[hidden],#kling-omni-field[hidden]{display:none!important}
#video-constructor .prompt-field{position:relative}
.media-drop-active{outline:2px dashed var(--accent);outline-offset:3px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}
.media-drop-error{margin:6px 0 0;color:#df634b;font-size:12px;line-height:1.4}
.media-drop-error[hidden]{display:none}