:root{color-scheme:dark;--ink:#e7edf7;--muted:#a0aec4;--border:#34435b;--blue:#386de3;--surface:#162033;--canvas:#0d1422;--input:#111b2c;--secondary:#1b2940;--hover:#263b5c}
.settings-dialog{--settings-accent:var(--blue)}.settings-dialog[data-accent="teal"]{--settings-accent:#147d78}.settings-dialog[data-accent="violet"]{--settings-accent:#7352c7}
.settings-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.settings-tabs [aria-selected="true"]{background:var(--settings-accent);color:#fff;border-color:var(--settings-accent)}
.settings-tabs button:focus-visible{outline:2px solid #8fb7ff;outline-offset:2px}dialog.settings-dialog{width:min(1100px,calc(100% - 32px));height:min(820px,90vh)}
.settings-dialog .history-dialog-header{flex-wrap:wrap}.settings-dialog #close-users{width:40px;height:40px;min-height:40px}
.settings-form{margin:18px 0;display:grid;gap:16px;justify-items:start}.settings-form .row{max-width:100%}.settings-form input[type="number"]{width:100px}
.settings-dialog .primary{background:var(--settings-accent);border-color:var(--settings-accent)}.settings-tab-order{list-style:decimal inside;padding:0;display:grid;gap:8px;min-width:min(340px,100%);max-width:100%}.settings-tab-order li{display:flex;align-items:center;gap:8px}.settings-tab-order li span{flex:1}.settings-tab-order button{width:36px;padding:0}.settings-limits input{width:150px;max-width:100%}
.settings-limits td{white-space:normal;overflow-wrap:anywhere;max-width:none}.settings-limits button{height:40px;min-height:40px}.settings-dialog[data-density="compact"] .history-dialog-body{padding:12px}.settings-dialog[data-density="compact"] :is(td,th){padding:6px 9px}.settings-dialog[data-density="compact"] .settings-form{gap:8px;margin:12px 0}
#settings-state{min-height:18px}#settings-state.detail-error{color:#ffc0bd}
.account-dialog{width:min(1000px,calc(100% - 32px))}.account-dialog .settings-tabs [aria-selected="true"]{background:var(--blue)}
.key-scopes{display:flex;flex-wrap:wrap;gap:12px 20px;margin:0;padding:0;border:0}.key-scopes label{display:inline-flex;align-items:center;gap:8px;font-size:12px}.key-scopes input{width:16px;height:16px;flex:0 0 16px;margin:0;padding:0;accent-color:var(--blue)}
#account-state.detail-error,#plans-state.detail-error{color:#ffc0bd}#api-key-secret{flex:1;min-width:0;font:13px monospace}#copy-api-key,#close-account{width:40px;height:40px;min-height:40px;padding:0;flex-shrink:0}
.api-keys-table td{white-space:normal;overflow-wrap:anywhere;max-width:320px}.api-keys-table code{display:block;color:var(--muted);font-size:12px}.api-keys-table button{height:40px;min-height:40px}
#account-pool-progress{width:100%;height:18px;accent-color:var(--blue)}#settings-plans input{width:100%;min-width:90px}#plan-accounts select{max-width:100%;width:180px}.plan-controls input:not([type="number"]){width:180px}
.api-documentation .card{padding:20px;margin:20px 0}.api-documentation pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.api-documentation input:not([type="file"]),.api-documentation select,.api-documentation textarea{width:min(720px,100%)}.api-documentation input[type="file"]{height:auto;max-width:100%}#api-response-image{max-width:100%;max-height:70vh}#docs-state.detail-error{color:#ffc0bd}
#retention-state.detail-error{color:#ffc0bd}
.history-user-admin{color:#86efac;font-weight:650}.history-user{color:#b5cfff}
#history td:nth-child(3){text-align:center;width:52px}
.history-owner-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.history-owner-icon svg{width:22px;height:22px}
.audit-dialog{width:min(1100px,calc(100% - 32px))}.audit-controls{gap:8px}.audit-controls select{width:auto;max-width:100%}#close-audit{width:32px;height:32px;min-height:32px;padding:0}
#audit-state.detail-error,.audit-error{color:#ffc0bd}.audit-ready{color:#86efac}.audit-warning{color:#facc15}
.audit-failure{padding:12px;border:1px solid #934940;border-radius:8px;background:#40232a;color:#ffc0bd;white-space:pre-wrap;overflow-wrap:anywhere}
.audit-loads td:nth-child(2){max-width:none;white-space:normal}.audit-loads td:last-child{min-width:220px;white-space:pre-wrap;overflow-wrap:anywhere}
.audit-entries{display:grid;gap:8px;margin:12px 0}.audit-entries details{border:1px solid var(--border);border-radius:8px;padding:10px}.audit-entries summary{cursor:pointer;overflow-wrap:anywhere}.audit-entries pre{white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;font-size:12px;max-width:100%}
#output-image.transparent-preview,#history-image.transparent-preview,#original-image.transparent-preview,.history-thumbnail-image.transparent-preview{background-color:#fff;background-image:conic-gradient(#d5dce5 25%,#fff 0 50%,#d5dce5 0 75%,#fff 0);background-size:20px 20px}
:root[data-preview-background="white"] :is(#output-image,#history-image,#original-image,.image-zoom-viewport,.history-thumbnail-image){background-color:#fff;background-image:none}
:root[data-preview-background="black"] :is(#output-image,#history-image,#original-image,.image-zoom-viewport,.history-thumbnail-image){background-color:#000;background-image:none}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.5 system-ui,sans-serif}
main{max-width:1360px;margin:auto;padding:32px 28px}header,.section-title,.session-bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
header{margin-bottom:22px;align-items:center}header>div:first-child{min-width:0}.header-access{display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:100%;flex-shrink:0}.model-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}.model-details{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border-radius:4px;cursor:help}.model-details svg{width:15px;height:15px}.model-details:focus-visible{outline:2px solid #8fb7ff;outline-offset:2px}h1{font-size:30px;letter-spacing:-1px;margin:2px 0 6px}.model-badge{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;background:#213b66;color:#b5cfff;padding:5px 10px;border-radius:8px;margin:4px 0 6px}
h2{font-size:17px;margin:0}.eyebrow{font-size:11px;font-weight:750;letter-spacing:1.6px;color:#9ebcf2;margin:0}.muted{color:var(--muted)}p{margin:8px 0}.small{font-size:12px}.sprite,[hidden]{display:none!important}
.title-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px}.title-row h1{display:inline-flex;align-items:center;gap:10px;margin:0;flex-shrink:0}.brand-logo{display:block;width:38px;height:38px;flex-shrink:0}.title-row .model-badge{margin:0}
.brand-wordmark{color:#6ce8ed}
@supports(background-clip:text){.brand-wordmark{background:linear-gradient(135deg,#6ce8ed,#5684ff);background-clip:text;color:transparent}}
@media(forced-colors:active){.brand-wordmark{background:none;color:CanvasText}}
.copy-toast{position:fixed;inset:auto 16px 16px auto;margin:0;padding:10px 16px;max-width:calc(100vw - 32px);border:1px solid #2d6c4a;border-radius:10px;background:#173d30;color:#b9f1cc;box-shadow:0 6px 24px #0008;font-size:13px;font-weight:600;overflow-wrap:anywhere;pointer-events:none;z-index:100}.copy-toast-error{background:#4c242b;border-color:#a45059;color:#ffd4d0}
button.copy-model{width:24px;height:24px;min-height:24px;padding:0;border-color:transparent;background:transparent;color:inherit}button.copy-model:hover{background:var(--hover)}.copy-model svg{width:15px;height:15px}
.history-metadata dd>.copy-model{margin-left:8px;vertical-align:middle}
#lab-content[inert]{opacity:.55}
.header-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;max-width:100%}
.session-bar{position:relative}button.account-toggle{width:36px;height:36px;min-height:36px;padding:0;color:var(--muted)}button.account-toggle.good{color:#99e5b7;background:#173d30;border-color:#2d6c4a}.account-toggle:focus-visible{outline:2px solid #8fb7ff;outline-offset:3px}.account-menu{position:absolute;top:calc(100% + 10px);right:0;width:300px;max-width:calc(100vw - 28px);padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 12px 35px #0008;z-index:10}.account-menu #login-form{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.account-menu #username,.account-menu #access-key{width:100%;max-width:100%}.account-menu .access-help{margin-top:14px}.account-summary{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.login-error{color:#ffc0bd;margin-bottom:12px}
@media(max-width:850px){.header-access,.header-controls{width:100%}.header-controls{justify-content:space-between}.header-controls>.session-bar{margin-left:auto}.account-menu{max-width:calc(100vw - 56px)}}
.modality-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:10px}.modality-tabs [aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:white}.modality-tabs button:focus-visible{outline:2px solid #8fb7ff;outline-offset:3px}
.modality-tabs{position:relative}.modality-tabs .supported{border-color:#638bdc;color:#c2d6ff}.modality-tabs [aria-disabled="true"]{opacity:.45;cursor:not-allowed;background:var(--secondary);border-color:var(--border);color:var(--muted)}.modality-hint{position:absolute;top:calc(100% + 4px);left:0;max-width:min(320px,100%);padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--secondary);color:var(--ink);box-shadow:0 6px 20px #0006;font-size:12px;z-index:5}
.run-actions{display:flex;align-items:center;gap:8px}.run-actions button{width:30px;height:30px;min-height:30px;padding:0}.run-actions svg{width:16px;height:16px}button.danger{color:#ffc0bd;border-color:#87505a}button.danger:hover{background:#40252b}
.run-actions .retry-run{color:#ffdc73;border-color:#b58a25;background:#352b13;animation:retry-breathe 2.4s ease-in-out infinite}
.run-actions .retry-run:hover{background:#51401a}.run-actions .retry-run:disabled{animation:none}
@keyframes retry-breathe{0%,100%{box-shadow:0 0 0 0 #facc1500}50%{background:#574318;box-shadow:0 0 0 3px #facc1533}}
@media(prefers-reduced-motion:reduce){.run-actions .retry-run{animation:none}}
.history-selection{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer}.history-selection input{width:16px;height:16px;flex:0 0 16px;margin:0;padding:0;accent-color:var(--blue)}
.history-thumbnail{position:fixed;z-index:100;width:min(224px,calc(100vw - 24px));padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 10px 28px #0006;overflow-wrap:anywhere}.history-thumbnail-image{display:block;width:100%;height:min(208px,calc(100vh - 64px));object-fit:contain;background:var(--canvas);border-radius:4px}
.remember-me{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.remember-me input{width:16px;height:16px;flex:0 0 16px;margin:0;padding:0;accent-color:var(--blue)}
.header-controls .badge,button.load-model{height:32px;min-height:32px}button.load-model{padding:0 10px;font-size:12px}
.model-controls{display:flex;align-items:center}.model-state{display:flex;align-items:center;gap:8px}.model-picker{position:relative;min-width:0}button#model-picker,button#request-model{height:26px;min-height:26px;padding:0 4px;gap:8px;background:transparent;border:0;border-radius:4px;color:inherit;font-size:13px;font-weight:700;max-width:min(360px,60vw)}#model-picker:focus-visible,#request-model:focus-visible,.model-option:focus-visible{outline:2px solid #8fb7ff;outline-offset:2px}.model-option-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-input-types{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;color:#b5cfff}.model-input-types svg{width:14px;height:14px;flex-shrink:0}svg.model-chevron{width:12px;height:12px;flex-shrink:0;transform:rotate(90deg)}.model-options{position:absolute;top:calc(100% + 8px);left:0;z-index:20;width:max-content;min-width:100%;max-width:calc(100vw - 56px);max-height:min(320px,50vh);overflow:auto;padding:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 12px 30px #0008}button.model-option{display:flex;justify-content:flex-start;gap:8px;width:100%;height:34px;min-height:34px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:var(--ink);font-size:13px;white-space:nowrap}.model-option:hover,.model-option:focus-visible{background:var(--hover)}.model-option[aria-selected="true"]{background:#213b66;color:#b5cfff}
.badge{font-size:12px;white-space:nowrap;display:inline-flex;align-items:center;background:var(--secondary);padding:5px 10px;border-radius:20px;font-weight:600}
.badge.good{color:#99e5b7;background:#173d30}.badge.bad{color:#ffd091;background:#46331c}.pending{color:#b5cfff}
.badge.fault,button.account-toggle.fault{color:#ffd6db;background:#591f2b;animation:badge-alert 1.5s ease-in-out infinite}
@keyframes badge-alert{50%{background:#842b38;box-shadow:0 0 0 2px #ff727255}}
@media(prefers-reduced-motion:reduce){.badge.fault,button.account-toggle.fault{animation:none}}
.session-bar{flex-wrap:wrap;max-width:100%}.row{display:flex;align-items:center;gap:10px}.wrap{flex-wrap:wrap}.controls{margin-top:12px;flex-wrap:wrap}
input,textarea,select{font:inherit;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--ink);min-width:0}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}a{color:#a8c8ff}.access-help{display:flex;align-items:center;gap:7px;max-width:100%;overflow-wrap:anywhere}.access-help>span:first-child{min-width:0}.access-help code{color:var(--ink)}button.copy-key{width:32px;height:32px;min-height:32px;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
input,select{height:40px;padding:7px 11px}textarea{width:100%;padding:12px;resize:vertical;min-height:130px}input:focus,textarea:focus,select:focus{outline:2px solid #8fb7ff;outline-offset:1px}
#seed{width:112px}#username{width:150px}#access-key{width:180px}#notes{flex:1;min-width:180px}
.prompt-tools{margin-bottom:12px}.prompt-examples{width:320px;max-width:100%}#rephrase-state:not(:empty){display:block;margin-bottom:10px}
.skill-control{position:relative;display:inline-flex;align-items:center;max-width:100%;height:40px}#skill-toggle{max-width:220px}#skill-summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skill-chevron{width:13px;height:13px;transform:rotate(90deg)}.skill-menu{position:fixed;z-index:100;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 10px 28px #0006;overflow:auto;overscroll-behavior:contain}.skill-menu fieldset{margin:0;padding:0;border:0;min-width:0}.skill-choice{display:flex;align-items:center;gap:9px;padding:8px;border-radius:5px;font-size:12px;cursor:pointer}.skill-choice:hover{background:var(--hover)}.skill-choice:has(input:focus-visible){outline:2px solid #8fb7ff;outline-offset:-2px}.skill-choice:has(input:disabled){color:var(--muted);cursor:not-allowed}.skill-choice input[type=checkbox]{width:16px;height:16px;min-height:16px;flex:0 0 16px;margin:0;padding:0;accent-color:var(--blue)}.skill-choice span{min-width:0;overflow-wrap:anywhere}#skill-state:not(:empty){display:block;margin-top:8px}
.controls{gap:8px}.controls #seed{width:76px;flex:0 0 76px}.controls .button,.controls button{padding:0 10px}.controls #reference-count{white-space:nowrap}#rephrase-state:not(:empty){margin-top:8px}
.metrics dd{overflow-wrap:anywhere}#history td:nth-child(5){min-width:150px;overflow-wrap:anywhere}#history td:nth-child(3){max-width:160px;overflow-wrap:anywhere}.image-id-caption{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto;flex-shrink:0;white-space:nowrap;color:var(--muted);font-size:12px}.image-id-value{display:inline-flex;align-items:center;white-space:nowrap}.image-id-value code{letter-spacing:.04em}
.actions.output-actions{flex-wrap:nowrap}.output-actions .copy-model{height:40px;min-height:40px}
@media(max-width:550px){.output-actions{gap:5px}.output-actions>.button{padding:0 5px;gap:5px;font-size:11px}.output-actions>.button svg{width:14px;height:14px}.output-actions .image-id-caption{font-size:11px}.output-actions .image-id-caption>span:first-child{display:none}}
button.model-info-copy{vertical-align:middle;margin-left:6px}
[data-run-status="succeeded"]{color:#86efac}[data-run-status="failed"]{color:#ffc0bd}
#history tr:hover>td,#history tr:focus-within>td{background:#314d73}
#history tr:hover>td:first-child,#history tr:focus-within>td:first-child{box-shadow:inset 3px 0 #8fb7ff}
.table-scroll th:nth-child(4),#history td:nth-child(4){width:64px;max-width:64px}#history button.view-prompt{width:30px;padding:0}.prompt-dialog{width:min(720px,calc(100% - 32px))}#close-prompt{width:32px;height:32px;min-height:32px;padding:0}#prompt-detail{white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;margin:0 0 18px}
button,.button{font:600 13px system-ui;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;height:40px;padding:0 15px;border:1px solid var(--border);border-radius:8px;background:var(--secondary);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap;flex:0 0 auto}
button:hover,.button:hover{background:var(--hover)}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#2859c4}
button:disabled,.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.secondary{background:var(--secondary)}.upload-control{position:relative;overflow:hidden}.upload-control input{position:absolute;width:1px;height:1px;opacity:0}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.error{border-radius:8px;padding:12px 16px;margin:12px 0 18px;font-size:13px;background:#40252b;border:1px solid #87505a;color:#ffc0bd}
.workspace{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:stretch}.card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:21px;margin-bottom:20px;box-shadow:0 4px 15px #21376104}
.section-title{margin-bottom:17px;flex-wrap:wrap}.actions{margin-top:17px;flex-wrap:wrap}.previews{display:flex;gap:10px;flex-wrap:wrap}.preview{position:relative;margin:0}.preview img{width:125px;height:110px;object-fit:contain;background:var(--canvas);border:1px solid var(--border);border-radius:8px}.preview figcaption{font-size:10px;color:var(--muted);max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview button{position:absolute;top:3px;right:3px;min-height:26px;height:26px;width:26px;padding:0;background:var(--surface)}
.output-empty{min-height:310px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--input);border:1px dashed var(--border);border-radius:9px;padding:24px}.output-empty>svg{width:32px;height:32px;color:#8ca9d4}
.generation-progress{gap:10px;border-color:#638bdc;background:#142440}.generation-progress p{font-size:18px;font-weight:650;margin:0}.generation-time{font-size:26px;font-variant-numeric:tabular-nums;color:#c2d6ff}.generation-progress progress{width:min(230px,100%);height:6px;accent-color:var(--blue)}.generation-spinner{animation:generation-spin 1.2s linear infinite}button#generate.working:disabled{opacity:1;background:#213b66;border-color:#638bdc}
.generation-progress{min-height:360px;padding:32px 20px}.generation-progress>svg{width:64px;height:64px;margin-bottom:8px}.generation-progress progress{width:min(300px,85%);height:8px}
@keyframes generation-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.generation-spinner{animation:none}.generation-progress progress{display:none}}
.history-dialog{width:min(920px,calc(100% - 32px));max-height:90vh;overflow:hidden;margin:auto;padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 20px 70px #0009}.history-dialog[open]{display:flex;flex-direction:column}.history-dialog::backdrop{background:#000a}.history-dialog-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--border)}#close-history{width:32px;height:32px;min-height:32px;padding:0}.history-dialog-body{flex:1 1 auto;min-height:0;overflow:auto;padding:20px}.history-image{display:block;width:100%;max-height:50vh;object-fit:contain;background:var(--canvas);border-radius:8px}.history-metadata{margin:18px 0}.history-metadata>div{display:grid;grid-template-columns:minmax(140px,.35fr) minmax(0,1fr);gap:8px 18px;padding:10px 0;border-bottom:1px solid var(--border)}.history-metadata dt{font-size:12px}.history-metadata dd{font-size:13px;font-weight:400;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.history-references{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.history-references figure{margin:0}.history-references img{display:block;width:130px;height:100px;object-fit:contain;border:1px solid var(--border);border-radius:7px}.history-references figcaption{font-size:11px;color:var(--muted);max-width:180px}#history-detail-state.detail-error{color:#ffc0bd}
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
.users-dialog{width:min(760px,calc(100% - 32px))}.users-dialog h3{margin:0;font-size:14px}#close-users,#show-user-password,#copy-user-password{width:40px;padding:0}#close-users{width:32px;height:32px;min-height:32px}#create-user-form{display:grid;gap:10px;margin:12px 0}#create-user-form .row,.created-account .row{gap:8px}#new-username,#new-password,#created-user-password{flex:1;width:0}#new-user-role{max-width:50%}#users-state{min-height:18px}#users-state.detail-error{color:#ffc0bd}.created-account{padding:12px;border:1px solid #2d6c4a;border-radius:8px;background:#173d30;margin:12px 0 18px}.created-account p{margin:0 0 8px}#users-list td:first-child{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#users-dialog .section-title{margin-top:20px}
@media(max-width:550px){.history-dialog-body{padding:14px}.history-metadata>div{grid-template-columns:minmax(0,1fr);gap:4px}}
#output-image{width:100%;max-height:590px;object-fit:contain;background:var(--input);border-radius:9px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 0}.metrics div{padding-top:10px;border-top:1px solid var(--border)}dt{font-size:11px;color:var(--muted)}dd{margin:3px 0 0;font-weight:650;font-size:16px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600}td:nth-child(2){max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}td button{height:30px;min-height:30px;padding:0 9px;font-size:11px}footer{font-size:11px;color:var(--muted);padding:0 0 20px;max-width:950px}
.sample-inputs{border-top:1px solid var(--border);margin-top:22px;padding-top:18px}.sample-inputs .section-title{margin-bottom:12px}.sample-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sample-button{height:auto;min-height:0;min-width:0;width:100%;padding:6px;flex-direction:column;white-space:normal}.sample-button img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px}.sample-button span{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%;gap:4px;min-height:28px;font-size:11px}
.sample-tile,.image-view,.history-reference{position:relative;min-width:0}.sample-tile .sample-button{height:100%}button.view-image,.preview button.view-image,button.copy-image,button.image-background{position:absolute;top:8px;right:8px;width:28px;height:28px;min-height:28px;padding:0;background:var(--surface);box-shadow:0 1px 5px #0006}button.copy-image,button.image-background{right:44px}.image-view:has(>.copy-image)>button.image-background{right:80px}.preview button.view-image{left:3px;right:auto;top:3px}.view-image svg,.copy-image svg,.image-background svg{width:16px;height:16px}.image-view:has(>img[hidden]){display:none}.image-dialog{width:min(1100px,calc(100% - 32px))}#close-image{width:32px;height:32px;min-height:32px;padding:0}#original-image,.image-zoom-viewport #history-image{display:block;max-width:none;max-height:none;margin:0;object-fit:contain;cursor:zoom-in}#original-image-state{padding:0 16px 12px;overflow-wrap:anywhere}
.image-zoom-controls{justify-content:center;gap:8px;margin:12px 0}.image-zoom-controls button{width:32px;height:32px;min-height:32px;padding:0}.image-zoom-controls output{min-width:48px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.image-zoom-viewport{height:min(50vh,520px);overflow:auto;background:var(--canvas);border-radius:8px}.original-image-body.image-zoom-viewport{height:min(60vh,650px);margin:0 12px}.image-zoom-canvas{display:grid;place-items:center;min-width:100%;min-height:100%;width:max-content;height:max-content}.image-zoom-viewport .image-view{width:max-content}
.image-zoom-controls>button.image-background{position:static;box-shadow:none}
#history-image-viewport{height:auto;min-height:min(50vh,520px);overflow-y:hidden}.original-image-body.image-zoom-viewport{min-height:0;flex-shrink:1}.image-dialog>.image-zoom-controls,.image-dialog>p{flex-shrink:0}
.history-filters{margin:14px 0}.history-filters input{flex:1;min-width:180px}.history-filters button,.history-pagination button{height:40px;min-height:40px}.history-filters #clear-history-filters,.history-pagination button{width:40px;padding:0}.history-pagination{justify-content:space-between;margin-top:16px}.history-pagination #history-page{width:72px}.history-pagination #history-pages{white-space:nowrap}.history-page-controls,.history-page-controls form{gap:6px}
@media(max-width:450px){.history-page-controls button{width:32px;height:32px;min-height:32px}.history-pagination #history-page{width:56px;height:32px;min-height:32px}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}main{padding:20px 14px}header{align-items:flex-start;flex-direction:column;gap:10px}.header-access{align-items:flex-start}.card{padding:17px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.session-bar{align-items:flex-start}#login-form{flex-wrap:wrap}#access-key{max-width:100%}h1{font-size:26px}.output-empty{min-height:220px}}
