/* Scoped to the native portal page; all colors inherit its theme. */
.image-page{min-width:0;color:var(--ink);font-size:calc(13px + var(--desktop-text-increase,0px));line-height:1.6}
.image-page [hidden]{display:none!important}
.image-page .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}
.image-page .image-heading-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.image-page .badge{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);padding:6px 10px;font-size:11px;white-space:nowrap}
.image-page .badge.good{color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--surface))}
.image-page .badge.warning{color:var(--warning)}
.image-page .notice{padding:14px 18px;margin-bottom:20px;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft);color:var(--ink-2);font-size:13px;line-height:1.75;overflow-wrap:anywhere}
.image-page .notice.warning,.image-page .pending-note{background:color-mix(in srgb,var(--warning) 9%,var(--surface));border-color:color-mix(in srgb,var(--warning) 30%,var(--line));color:var(--ink-2)}
.image-page .notice.danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
.image-page .session-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.image-page .connection-card{padding:22px}
.image-page .mini-heading{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:13px}
.image-page .mini-heading>.text-button{margin-left:auto}
.image-page .status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.image-page .status-dot.connected{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 10%,transparent)}
.image-page .session-description{margin:14px 0 12px;color:var(--muted);font-size:12px}
.image-page .image-key-details{border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:12px}
.image-page summary{cursor:pointer;line-height:1.7}
.image-page .image-key-details form{margin-top:12px}
.image-page .key-entry{display:flex;gap:9px}
.image-page .key-entry input{flex:1;width:0;min-width:0}
.image-page input,.image-page select,.image-page textarea{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);min-width:0;max-width:100%;padding:10px 12px;font:inherit;font-size:13px;line-height:1.5}
.image-page input:focus-visible,.image-page select:focus-visible,.image-page textarea:focus-visible,.image-page button:focus-visible,.image-page summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.image-page textarea{width:100%;display:block;resize:vertical;min-height:70px}
.image-page input::placeholder,.image-page textarea::placeholder{color:var(--muted);opacity:.85}
.image-page .credit-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 25px;background:linear-gradient(115deg,var(--accent-soft),var(--surface))}
.image-page .credit-main{display:grid;gap:4px;min-width:0}
.image-page .credit-main>span{color:var(--muted);font-size:12px}
.image-page .credit-main>strong{color:var(--accent);font-size:38px;line-height:1.3;letter-spacing:-.04em}
.image-page .credit-main>small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.image-page .credit-details{min-width:150px;padding-left:25px;border-left:1px solid var(--line);font-size:12px}
.image-page .credit-details>div{display:flex;justify-content:space-between;gap:15px;margin-bottom:7px}
.image-page .credit-details span{color:var(--muted)}
.image-page .credit-details strong,.image-page .credit-details strong span{color:var(--ink);font-weight:650}
.image-page .credit-details>.cost-note{padding-top:8px;margin:8px 0 0;border-top:1px solid var(--line)}
.image-page .image-checkin-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:19px 23px;margin-bottom:22px}
.image-page .image-checkin-card strong{font-size:14px}
.image-page .image-checkin-card p{margin:5px 0 0;color:var(--muted);font-size:12px}
.image-page .image-checkin-card .inline-error{flex-basis:100%}
.image-page .workbench{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
.image-page .panel{min-width:0;overflow:hidden}
.image-page .panel-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:19px 22px;border-bottom:1px solid var(--line)}
.image-page .panel-heading>div{display:flex;align-items:center;gap:9px}
.image-page .panel-heading h2{margin:0;font-size:16px;font-weight:750;color:var(--ink)}
.image-page .section-number{color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:2px 5px;font-size:10px}
.image-page .panel-subtitle{color:var(--muted);font-size:9px;letter-spacing:.09em}
.image-page .parameter-panel form{padding:22px}
.image-page fieldset{border:0;margin:0;padding:0;min-width:0}
.image-page .field{margin-bottom:20px}
.image-page .field>label,.image-page .field-heading>label,.image-page legend{display:block;margin-bottom:8px;color:var(--ink-2);font-size:12px;font-weight:650}
.image-page .field>label small{margin-left:5px;color:var(--muted);font-size:10px;font-weight:400}
.image-page .required-mark{color:var(--accent)}
.image-page .field-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.image-page .field-heading>label{margin:0}
.image-page .field-help{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px 10px;color:var(--muted);font-size:11px;line-height:1.7;margin:8px 0 0}
.image-page .field-help>span:last-child{white-space:nowrap}
.image-page .text-button{border:0;background:none;color:var(--accent);font:inherit;font-size:11px;font-weight:650;padding:0;line-height:1.7}
.image-page .text-button:hover{color:var(--accent-hover)}
.image-page .field select{width:100%}
.image-page .model-description{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.75;overflow-wrap:anywhere}
.image-page .size-field{margin-bottom:20px}
.image-page .size-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.image-page .size-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 3px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);cursor:pointer;min-width:0}
.image-page .size-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:inherit}
.image-page .size-option:has(input:checked){background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.image-page .size-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.image-page .size-option strong{font-size:11px;font-weight:650;white-space:nowrap}
.image-page .size-option small{color:var(--muted);font-size:9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.image-page .ratio-icon{height:23px;width:17px;margin:1px 0;border:1.5px solid currentColor;border-radius:3px}
.image-page .ratio-icon.landscape{width:25px;height:17px;margin:4px 0}
.image-page .ratio-icon.square{width:22px;height:22px;margin:1.5px 0}
.image-page .sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:20px}
.image-page .value-input{width:48px;padding:4px;text-align:center;font-size:11px}
.image-page input[type=range]{width:100%;padding:0;border:0;accent-color:var(--accent);cursor:pointer}
.image-page .range-ends{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted);font-size:10px}
.image-page .seed-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding-right:12px}
.image-page .seed-input input{flex:1;width:0;border:0;background:none}
.image-page .character-details{padding-top:14px;border-top:1px solid var(--line);color:var(--ink-2);font-size:12px}
.image-page .character-details summary span{margin-left:7px;color:var(--muted);font-size:11px}
.image-page .character-card{margin:14px 0;padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.image-page .character-card .field{margin-bottom:10px}
.image-page .character-card textarea{min-height:55px;font-size:12px;padding:8px}
.image-page .character-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:12px}
.image-page .character-center{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.image-page .character-center label{display:grid;gap:6px;color:var(--muted);font-size:10px}
.image-page .character-center input{width:100%;padding:8px;font-size:12px}
.image-page .button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:9px;background:#3468e9;color:#fff;padding:10px 14px;min-height:38px;font:inherit;font-size:12px;font-weight:710;line-height:1.3;white-space:nowrap}
.image-page .button:hover:not(:disabled){background:#235bdc}
.image-page .button.secondary{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.image-page .button.secondary:hover:not(:disabled){background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent) 20%)}
.image-page .button.small{padding:8px 11px;min-height:34px;font-size:11px}
.image-page .generate-area{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.image-page .generate{width:100%;justify-content:flex-start;padding:13px 15px;box-shadow:0 4px 10px #2861e429}
.image-page .generate>span:first-child{font-size:19px}
.image-page .generate-cost{margin-left:auto;padding-left:14px;border-left:1px solid #ffffff40;font-size:11px}
.image-page .generate-area>p{margin:10px 0 0;text-align:center;color:var(--muted);font-size:11px}
.image-page .inline-error{margin:10px 0 0!important;color:var(--danger)!important;font-size:12px!important;line-height:1.75;overflow-wrap:anywhere}
.image-page .pending-note{border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:14px}
.image-page .pending-note p{font-size:12px;margin:0 0 10px}
.image-page .result-column{display:grid;gap:20px;min-width:0}
.image-page .preview-status{color:var(--muted);font-size:11px}
.image-page .preview-stage{position:relative;display:flex;align-items:center;justify-content:center;height:440px;margin:21px 22px 0;border:1px solid var(--line);border-radius:10px;background-color:var(--surface-2);background-image:radial-gradient(var(--line) .8px,transparent .8px);background-size:19px 19px;overflow:hidden}
.image-page .empty-preview{padding:24px;text-align:center}
.image-page .empty-art{position:relative;display:grid;place-items:center;width:70px;height:70px;border:1px solid var(--line);border-radius:18px;margin:0 auto 22px;background:var(--accent-soft);color:var(--accent);font-size:48px;line-height:1}
.image-page .empty-art>span{position:absolute;right:-10px;top:-10px;font-size:22px}
.image-page .empty-preview h3,.image-page .stage-message h3{margin:0 0 10px;color:var(--ink-2);font-size:16px}
.image-page .empty-preview p,.image-page .stage-message p{margin:0;color:var(--muted);font-size:12px;line-height:1.9;white-space:pre-line;overflow-wrap:anywhere}
.image-page .empty-preview>small{display:block;margin-top:25px;color:var(--muted);font-size:8px;letter-spacing:.07em}
.image-page .preview-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 22px}
.image-page .preview-footer p{margin:0;color:var(--muted);font-size:11px;line-height:1.9;overflow-wrap:anywhere;white-space:pre-line}
.image-page .preview-footer .button{flex:none}
.image-page .preview-error{padding:0 22px 17px}
.image-page .preview-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.image-page .stage-message{max-width:100%;padding:25px;text-align:center;min-width:0}
.image-page .stage-message .loader{margin:0 auto 24px}
.image-page .stage-message .button{margin-top:16px}
.image-page .loader{width:27px;height:27px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:image-workbench-spin 1s linear infinite}
.image-page .retention-note{padding:12px 22px 0;margin:0;color:var(--muted);font-size:10px;line-height:1.8}
.image-page .job-count{background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:2px 5px;font-size:10px}
.image-page .jobs-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--line)}
.image-page .jobs-toolbar select{font-size:11px;padding:6px 8px;background:var(--surface)}
.image-page .jobs-toolbar>span{font-size:10px;color:var(--muted)}
.image-page .jobs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 20px}
.image-page .jobs-empty{grid-column:1/-1;margin:0;text-align:center;padding:24px;color:var(--muted);font-size:12px}
.image-page .job-card{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:11px;border:1px solid var(--line);border-radius:9px}
.image-page .job-card.selected{border-color:var(--accent);background:var(--accent-soft)}
.image-page .job-icon{display:grid;place-items:center;width:42px;height:58px;border:0;border-radius:5px;background:var(--surface-2);color:var(--accent);font-size:22px;padding:0}
.image-page .job-content{min-width:0}
.image-page .job-prompt{display:block;width:100%;padding:0;border:0;background:none;color:var(--ink-2);font:inherit;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.image-page .job-meta,.image-page .job-time{color:var(--muted);font-size:10px;line-height:1.7;overflow-wrap:anywhere;margin:6px 0 0}
.image-page .job-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.image-page .job-status{font-size:11px;color:var(--accent);white-space:nowrap}
.image-page .job-status.succeeded{color:var(--success)}
.image-page .job-status.failed,.image-page .job-error{color:var(--danger)}
.image-page .job-status.cancelled{color:var(--muted)}
.image-page .job-status.unknown{color:var(--warning)}
.image-page .cancel-button{padding:3px 7px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--accent);font:inherit;font-size:10px}
.image-page .job-error{font-size:10px;margin:6px 0 0;overflow-wrap:anywhere}
.image-page dialog{width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--ink);box-shadow:0 20px 90px #06102350;overflow:auto}
.image-page dialog::backdrop{background:#09152d77;backdrop-filter:blur(3px)}
.image-page .dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}
.image-page .dialog-heading h2{font-size:18px;margin:0}
.image-page .guide-steps{padding-left:20px;margin:24px 0 20px;color:var(--accent)}
.image-page .guide-steps li{padding-left:6px;margin-bottom:18px;font-size:13px}
.image-page .guide-steps strong{color:var(--ink-2)}
.image-page .guide-steps p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.9}
.image-page .copy-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);margin:8px 0;font-size:12px}
.image-page code{overflow-wrap:anywhere;min-width:0}
.image-page .guide-note{padding:13px;margin-bottom:20px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.9}
.image-page dialog>.button{width:100%}
.image-page .image-access-note{padding:24px;color:var(--muted)}
@keyframes image-workbench-spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.image-page .workbench{grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr)}.image-page .preview-stage{height:500px}}
@media(max-width:1250px){.image-page .session-grid{grid-template-columns:1fr}.image-page .credit-card{justify-content:flex-start;gap:40px}.image-page .credit-details{flex:1;max-width:320px}.image-page .jobs-list{grid-template-columns:1fr}.image-page .workbench{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:16px}.image-page .panel-subtitle{display:none}.image-page .parameter-panel form{padding:18px}.image-page .preview-stage{margin:17px 17px 0;height:420px}.image-page .preview-footer{align-items:flex-start;flex-direction:column;padding:16px 17px}}
@media(max-width:1050px){.image-page .workbench{grid-template-columns:1fr}.image-page .preview-stage{height:460px}.image-page .jobs-list{grid-template-columns:repeat(2,minmax(0,1fr))}.image-page .preview-footer{flex-direction:row;align-items:center}.image-page .panel-subtitle{display:block}}
@media(max-width:640px){.image-page .image-heading-actions{gap:7px}.image-page .image-heading-actions .btn{font-size:11px;padding:8px 10px}.image-page .badge{font-size:10px}.image-page .notice{padding:12px 14px;font-size:12px}.image-page .connection-card{padding:18px}.image-page .mini-heading{font-size:12px}.image-page .session-grid{gap:13px;margin-bottom:13px}.image-page .credit-card{padding:20px;gap:20px}.image-page .credit-main>strong{font-size:34px}.image-page .credit-details{min-width:126px;padding-left:18px;font-size:11px}.image-page .image-checkin-card{align-items:flex-start;flex-direction:column;padding:18px;gap:12px;margin-bottom:18px}.image-page .image-checkin-card>.button{width:100%}.image-page .panel-heading{padding:17px 18px}.image-page .parameter-panel form{padding:18px}.image-page .preview-stage{height:360px;margin:16px 16px 0}.image-page .preview-footer{padding:14px 16px;align-items:flex-start;flex-direction:column}.image-page .retention-note{padding-left:16px;padding-right:16px}.image-page .jobs-list{grid-template-columns:1fr;padding:14px 16px}.image-page .jobs-toolbar{padding:12px 16px}.image-page .jobs-toolbar>span{font-size:9px}.image-page .guide-steps p{font-size:11px}}
@media(max-width:380px){.image-page .credit-card{gap:14px;padding:17px}.image-page .credit-details{min-width:116px;padding-left:13px}.image-page .key-entry{flex-direction:column}.image-page .key-entry input{width:100%}.image-page .sliders{gap:13px}.image-page .size-option small{font-size:8px}.image-page .preview-stage{height:320px}.image-page .mini-heading>.text-button{margin-left:16px}}
@media(prefers-reduced-motion:reduce){.image-page *,.image-page *::before,.image-page *::after{animation:none!important;transition:none!important}}
