:root {
  color-scheme: dark;
  --bg: #090b0d;
  --panel: #111418;
  --panel-2: #171b20;
  --line: #292f36;
  --text: #f3f5f7;
  --muted: #929ca7;
  --red: #ff493d;
  --red-dark: #c92820;
  --cyan: #56d6dc;
  --green: #58cf89;
  --amber: #e7b85a;
  --radius: 6px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.topbar { height: 66px; display: flex; align-items: center; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #0c0f12; position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 210px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--red); color: #fff; font-weight: 800; }
.brand-copy { display: grid; align-content: center; line-height: 1; }.brand-copy sup { margin-bottom: 2px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.brand strong, .brand small { display: block; letter-spacing: 0; }
.brand strong { font-size: 15px; }.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.status-strip { min-width: 0; display: flex; gap: 14px; flex: 1; align-items: center; justify-content: flex-end; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.status svg { width: 11px; height: 11px; fill: currentColor; }.status.online { color: var(--green); }.status.busy { color: var(--amber); }.status.offline { color: var(--red); }.status-dot > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.queue-toggle { position: relative; width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }.queue-toggle::before { content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; opacity: 0; transform: rotate(45deg) scale(.75); transition: opacity .18s ease, transform .18s ease; }.queue-toggle:hover::before,.queue-toggle[aria-expanded="true"]::before { opacity: .35; transform: rotate(45deg) scale(1); }.queue-toggle svg { width: 12px; height: 12px; }.activity-status { width: min(310px, 34vw); display: grid; gap: 5px; color: var(--muted); }.activity-copy { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; font-size: 11px; }.activity-copy strong { min-width: 0; overflow: hidden; color: currentColor; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.activity-copy span { flex: 0 0 auto; font-variant-numeric: tabular-nums; }.activity-progress { height: 4px; overflow: hidden; border-radius: 2px; background: #252b31; }.activity-progress > span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--green); transition: width .4s ease; }.activity-status.busy { color: var(--green); }.activity-status.error { color: var(--red); }.activity-status.error .activity-progress > span { background: var(--red); }.activity-status.connecting .activity-progress > span, .activity-status.indeterminate .activity-progress > span { width: 35%; animation: activity-slide 1.2s ease-in-out infinite; }.activity-status.idle .activity-progress { opacity: .35; }@keyframes activity-slide { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.queue-panel { position: fixed; z-index: 120; top: 58px; right: 14px; width: min(440px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 76px)); overflow: auto; padding: 16px; border: 1px solid #3d4b45; border-radius: 4px; background: rgba(10,14,13,.98); box-shadow: 0 24px 80px rgba(0,0,0,.72); }.queue-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.queue-panel-header h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: 0; }.queue-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 12px; }.queue-panel-actions button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }.queue-panel-actions svg { width: 17px; }.queue-list { border-top: 1px solid var(--line); }.queue-section-label { padding: 13px 2px 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.queue-task { min-height: 64px; display: grid; grid-template-columns: 28px minmax(0,1fr) 38px; align-items: center; gap: 10px; border-top: 1px solid #20282a; }.queue-task:first-of-type { border-top: 0; }.queue-task-state { color: var(--muted); }.queue-task.running .queue-task-state { color: var(--green); }.queue-task.running .queue-task-state svg { animation: spin 1.1s linear infinite; }.queue-task-state svg,.queue-remove svg { width: 17px; }.queue-task-copy { min-width: 0; display: grid; gap: 3px; }.queue-task-copy strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.queue-task-copy span { color: var(--muted); font-size: 11px; }.queue-remove { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; }.queue-remove:hover { border-color: #6f312e; background: #281514; color: #ffaaa4; }.queue-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }.queue-empty svg { width: 28px; color: var(--green); }.queue-empty strong { color: var(--text); }.queue-empty.error svg { color: var(--red); }
.top-actions { display: flex; gap: 8px; }.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--muted); cursor: pointer; text-decoration: none; }.icon-button:hover { color: var(--text); border-color: #46505a; }.icon-button svg { width: 18px; }
.shell { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: calc(100vh - 66px); }
.rail { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; background: #0d1013; position: sticky; top: 66px; height: calc(100vh - 66px); }
.nav-button { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.nav-button svg { width: 19px; height: 19px; }.nav-button:hover { background: var(--panel); color: var(--text); }.nav-button.active { color: var(--text); border-color: #4e2927; background: #211313; box-shadow: inset 3px 0 var(--red); }
.workspace { min-width: 0; padding: 26px; max-width: 1580px; width: 100%; margin: 0 auto; }
.view { display: none; }.view.active { display: block; }
.view-header { min-height: 56px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
h1 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: 0; }.eyebrow { margin: 0 0 5px; color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.segmented button { min-width: 80px; border: 0; border-right: 1px solid var(--line); padding: 9px 14px; background: var(--panel); color: var(--muted); }.segmented button:last-child { border-right: 0; }.segmented .selected { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px var(--red); }.segmented button:disabled { opacity: .45; }
.audio-mode-tabs button { min-width: 118px; }.audio-mode-panel { display: grid; gap: 14px; }.audio-mode-panel + .audio-mode-panel { margin-top: 0; }.audio-duration-row { align-items: end; }.audio-mode-panel .form-hint b { color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.work-grid { display: grid; grid-template-columns: minmax(360px, 470px) minmax(420px, 1fr); gap: 18px; min-height: calc(100vh - 170px); }
.control-panel, .preview-panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); }
.control-panel { padding: 18px; display: flex; flex-direction: column; gap: 15px; align-self: start; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }.field > span { font-size: 12px; color: #c9d0d7; font-weight: 600; }.field-row { display: grid; gap: 10px; }.field-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.field-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.enhance-button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--cyan); cursor: pointer; padding: 0; font-size: 11px; font-weight: 700; }.enhance-button:hover { color: #9af2f5; }.enhance-button:disabled { color: var(--muted); cursor: wait; }.enhance-button svg { width: 13px; height: 13px; }
.prompt-actions { display: inline-flex; align-items: center; gap: 10px; }.clear-prompt-button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; font: inherit; font-size: 11px; font-weight: 700; }.clear-prompt-button:hover { color: var(--text); }.clear-prompt-button svg { width: 13px; height: 13px; }
.sketch-to-image-button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #c9d0d7; cursor: pointer; padding: 0; font: inherit; font-size: 11px; font-weight: 700; }.sketch-to-image-button:hover,.sketch-to-image-button.has-sketch { color: var(--cyan); }.sketch-to-image-button:disabled { color: var(--muted); cursor: not-allowed; }.sketch-to-image-button svg { width: 13px; height: 13px; }
.sketch-to-image-preview { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(86,214,220,.34); border-radius: var(--radius); background: rgba(86,214,220,.06); }.sketch-to-image-preview img { width: 58px; height: 58px; object-fit: contain; border-radius: 5px; background: #f4f4f1; }.sketch-to-image-preview > div { min-width: 0; display: grid; gap: 3px; }.sketch-to-image-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.sketch-to-image-preview span { color: var(--muted); font-size: 10px; line-height: 1.35; }
textarea, input, select { width: 100%; border: 1px solid #343b43; border-radius: 4px; background: #0b0e11; color: var(--text); padding: 10px 11px; outline: none; letter-spacing: 0; } textarea { resize: vertical; line-height: 1.45; } textarea:focus, input:focus, select:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,73,61,.12); }
.range-field > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.range-field output { color: var(--text); font-weight: 700; }.range-field input[type="range"] { min-height: 34px; padding: 0; accent-color: var(--red); cursor: pointer; }.range-field small { color: var(--muted); line-height: 1.4; }
.check-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #0b0e11; cursor: pointer; }.check-row input { width: 18px; height: 18px; padding: 0; accent-color: var(--red); }.check-row span { color: #c9d0d7; font-size: 11px; font-weight: 600; }
details { border-top: 1px solid var(--line); padding-top: 12px; } summary { color: var(--muted); cursor: pointer; font-size: 13px; }.details-grid { margin-top: 13px; }
.basic-control-group { display: grid; gap: 11px; }.basic-control-heading { display: grid; gap: 3px; }.basic-control-heading strong { color: #dce2e7; font-size: 12px; }.basic-control-heading small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.studio-advanced { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #0d1013; }.studio-advanced-summary,.studio-tool-summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; color: var(--text); cursor: pointer; list-style: none; }.studio-advanced-summary::-webkit-details-marker,.studio-tool-summary::-webkit-details-marker { display: none; }.studio-advanced-summary > span,.studio-tool-summary > span { min-width: 0; display: grid; gap: 3px; }.studio-advanced-summary strong,.studio-tool-summary strong { font-size: 12px; }.studio-advanced-summary small,.studio-tool-summary small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.35; }.studio-advanced-summary > svg,.studio-tool-summary > svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--muted); transition: transform .18s ease; }.studio-advanced[open] > .studio-advanced-summary > svg,.image-mask-panel[open] > .studio-tool-summary > svg { transform: rotate(180deg); }.studio-advanced-body { display: grid; gap: 14px; padding: 2px 12px 13px; border-top: 1px solid rgba(255,255,255,.04); }.inline-segmented { width: 100%; }.inline-segmented button { flex: 1; }
.primary-button, .secondary-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius); cursor: pointer; text-decoration: none; font-weight: 700; }
.primary-button { border: 1px solid #ff6c62; background: var(--red); color: #090909; }.primary-button:hover { background: #ff5b50; }.primary-button:disabled { opacity: .55; cursor: wait; }.primary-button svg, .secondary-button svg { width: 17px; }
.secondary-button { border: 1px solid #3b434c; background: var(--panel-2); color: var(--text); padding: 9px 14px; }.secondary-button:hover { border-color: #606b76; }
.mode-label { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.upload-field { min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed #47515b; border-radius: var(--radius); background: #0b0e11; color: var(--muted); text-align: center; cursor: pointer; padding: 14px; }.upload-field:hover { border-color: var(--red); }.upload-field input { position: absolute; opacity: 0; pointer-events: none; }.upload-field svg { width: 24px; }.upload-field strong { color: var(--text); font-size: 13px; }.upload-field span { font-size: 11px; }.upload-field.has-file { border-style: solid; border-color: var(--green); }.upload-field.has-file svg { color: var(--green); }.upload-field.compact { min-height: 88px; }.video-edit-controls { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #0d1013; }
.asset-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }.asset-input-row > .upload-field { min-width: 0; }.library-input-button { min-width: 116px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #3b5962; border-radius: var(--radius); background: rgba(31, 71, 79, .25); color: var(--cyan); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; padding: 10px; }.library-input-button:hover { border-color: var(--cyan); background: rgba(31, 71, 79, .45); }.library-input-button svg { width: 16px; }
.edit-project-banner { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(88,207,137,.45); border-radius: var(--radius); background: rgba(88,207,137,.06); }.edit-project-banner > svg { width: 24px; color: var(--green); }.edit-project-banner div { min-width: 0; display: grid; gap: 2px; }.edit-project-banner span, .edit-project-banner small { color: var(--muted); font-size: 10px; }.edit-project-banner span { text-transform: uppercase; font-weight: 700; }.edit-project-banner strong, .edit-project-banner small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lora-heading { display: flex; align-items: center; justify-content: space-between; color: #c9d0d7; font-size: 12px; font-weight: 600; }.lora-heading small { color: var(--muted); font-weight: 400; }.lora-slots { display: flex; flex-direction: column; gap: 8px; }.lora-slot { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; }.lora-slot select, .lora-slot input { padding: 8px 9px; font-size: 12px; }
.multi-upload { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.multi-upload.single { grid-template-columns: 1fr; }.multi-upload .upload-field { min-height: 130px; }.form-hint { margin: -5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.asset-pipeline { display: grid; gap: 7px; }.pipeline-stage { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #0c0f12; cursor: pointer; }.pipeline-stage > input { width: 17px; height: 17px; margin: 0; accent-color: var(--red); }.pipeline-stage > svg { width: 18px; color: var(--cyan); }.pipeline-stage:has(input) { grid-template-columns: 18px 22px minmax(0, 1fr) auto; }.pipeline-stage span { min-width: 0; display: grid; gap: 2px; }.pipeline-stage strong { font-size: 12px; }.pipeline-stage small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.pipeline-stage b { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.pipeline-stage.disabled { opacity: .46; cursor: default; }
.download-output { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }.download-output svg { width: 44px; height: 44px; color: var(--green); }.download-output a { min-width: 160px; }
.model-output { width: 100%; height: 100%; min-height: 570px; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: radial-gradient(circle at 50% 42%, #262c32 0, #111418 42%, #07090b 80%); }.model-output model-viewer { width: 100%; height: 100%; min-height: 500px; --poster-color: transparent; }.model-output footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(9,11,13,.92); }.model-output footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }.model-output footer a { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; }
.preview-panel { min-height: 570px; position: relative; overflow: hidden; display: grid; place-items: center; background-color: #0a0d10; background-image: linear-gradient(45deg,#101418 25%,transparent 25%),linear-gradient(-45deg,#101418 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#101418 75%),linear-gradient(-45deg,transparent 75%,#101418 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; }
.empty-state, .loading-state { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px; text-align: center; color: var(--muted); }.empty-state svg { width: 34px; height: 34px; }.empty-state strong, .loading-state strong { color: var(--text); }.empty-state span, .loading-state span { font-size: 13px; }
.preview-result { width: 100%; height: 100%; min-height: 570px; display: grid; place-items: center; background: #050607; }.preview-result img, .preview-result video { display: block; max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; }.preview-result audio { width: min(680px, calc(100% - 40px)); }
.image-series-mode-field { display: none; }.public-mode .image-series-mode-field { display: grid; }.image-series-segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }.image-series-segmented button { min-width: 0; }.image-series-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(86,214,220,.3); border-radius: var(--radius); background: rgba(86,214,220,.06); color: var(--muted); font-size: 12px; line-height: 1.45; }.image-series-hint .secondary-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }.image-series-hint .secondary-button svg { width: 16px; }.image-series-preview { width: 100%; align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 2px; background: #050607; }.image-series-preview button { position: relative; min-width: 0; min-height: 280px; padding: 0; border: 0; background: #0a0d10; cursor: zoom-in; overflow: hidden; }.image-series-preview img { width: 100%; height: 100%; max-height: none; object-fit: contain; }.image-series-preview span { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 999px; background: rgba(5,8,10,.82); color: #fff; font-size: 10px; font-weight: 700; text-transform: capitalize; }
.spinner { width: 28px; height: 28px; border: 3px solid #30363c; border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
.placeholder-view { min-height: calc(100vh - 120px); place-items: center; text-align: center; }.placeholder-view.active { display: grid; }.placeholder-view > div { max-width: 520px; }.placeholder-view svg { width: 42px; height: 42px; color: var(--red); }.placeholder-view p { color: var(--muted); line-height: 1.55; margin: 14px 0 22px; }
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }.metric { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; background: var(--panel); }.metric strong, .metric span { display: block; }.metric strong { font-size: 21px; }.metric span { color: var(--muted); font-size: 11px; text-transform: uppercase; margin-top: 3px; }
.audit-note { margin: -6px 0 14px; color: var(--muted); font-size: 12px; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; background: var(--panel); }table { width: 100%; border-collapse: collapse; font-size: 13px; }th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }th { position: sticky; top: 0; background: #171b20; color: var(--muted); font-size: 11px; text-transform: uppercase; }tr:last-child td { border-bottom: 0; }.badge { display: inline-flex; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; }.badge.ready { background: rgba(88,207,137,.12); color: var(--green); }.badge.needs-repair { background: rgba(231,184,90,.12); color: var(--amber); }.badge.invalid { background: rgba(255,73,61,.12); color: var(--red); }.issue { color: var(--muted); max-width: 460px; overflow-wrap: anywhere; }
.library-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }.library-control { min-width: 0; display: grid; gap: 7px; }.library-control > span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.library-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }.library-segmented b { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: #090b0e; color: var(--muted); font-size: 10px; }.library-segmented .selected b { color: var(--text); }.library-summary { margin: 0 0 18px; color: var(--muted); font-size: 12px; }.project-list { display: grid; gap: 30px; }.project-section { min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }.project-section:first-child { padding-top: 0; border-top: 0; }.project-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }.project-header h2 { margin: 0; font-size: 18px; }.project-header p { display: flex; gap: 12px; margin: 5px 0 0; color: var(--muted); font-size: 11px; }.project-header p span { padding-left: 12px; border-left: 1px solid var(--line); }.project-header > strong { flex: 0 0 auto; color: var(--muted); font-size: 11px; }.project-title-row { display: flex; align-items: center; gap: 9px; }.project-badge { padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.project-badge.active { border-color: rgba(88,207,137,.45); color: var(--green); }.output-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }.output-item { min-height: 190px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; position: relative; }.output-item img, .output-item video { width: 100%; height: 230px; display: block; object-fit: cover; }.output-item > footer { display: grid; gap: 2px; padding: 9px 10px; overflow: hidden; }.output-item > footer strong, .output-item > footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.output-item > footer strong { color: var(--text); font-size: 11px; }.output-item > footer span { color: var(--muted); font-size: 9px; }.output-type { position: absolute; z-index: 2; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(8,10,12,.82); color: #e5e8eb; font-size: 9px; font-weight: 700; text-transform: uppercase; backdrop-filter: blur(8px); }.output-item .model-output { min-height: 270px; height: 270px; }.output-item .model-output model-viewer { min-height: 230px; }.output-item .model-output footer { height: 40px; }.library-empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; border: 1px dashed var(--line); color: var(--muted); }.library-empty svg { width: 32px; }.library-empty strong { font-size: 13px; }.muted { color: var(--muted); }
.toast { position: fixed; inset: auto 18px 18px auto; margin: 0; max-width: min(430px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid #4d5863; border-radius: var(--radius); color: var(--text); background: #171b20; box-shadow: 0 10px 35px rgba(0,0,0,.72); z-index: 2147483647; font-size: 13px; }.toast.error { border-color: var(--red); background: #321412; box-shadow: 0 10px 35px rgba(0,0,0,.82), 0 0 0 1px rgba(255,73,61,.22); }
@media (max-width: 900px) { .status.secondary { display: none; }.work-grid { grid-template-columns: 1fr; }.preview-panel, .preview-result { min-height: 420px; }.metric-row { grid-template-columns: repeat(2, 1fr); }.library-controls { align-items: stretch; flex-direction: column; }.library-segmented { display: flex; }.library-segmented button { flex: 1; } }
@media (max-width: 640px) { .topbar { height: 58px; padding: 0 12px; }.brand { min-width: 0; flex: 1; }.brand small { display: none; }.status-strip { flex: 0; }.status { font-size: 0; }.status svg { width: 12px; height: 12px; }.top-actions { display: none; }.shell { display: block; padding-bottom: 72px; }.rail { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 66px; flex-direction: row; padding: 5px; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; }.nav-button { min-width: 64px; min-height: 54px; flex: 1; }.workspace { padding: 16px 12px; overflow: hidden; }.view-header { align-items: flex-start; flex-direction: column; }.segmented { width: 100%; }.segmented button { flex: 1; min-width: 0; }.work-grid { min-height: 0; }.control-panel { padding: 14px; min-width: 0; }.field-row.three, .field-row.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }.field-row.three .field:last-child { grid-column: span 2; }.preview-panel, .preview-result { min-height: 360px; }.metric-row { grid-template-columns: repeat(2, 1fr); }.library-segmented { overflow-x: auto; }.library-segmented button { min-width: 92px; white-space: nowrap; }.project-header { align-items: flex-start; }.project-header p { align-items: flex-start; flex-direction: column; gap: 3px; }.project-header p span { padding-left: 0; border-left: 0; }.project-title-row { align-items: flex-start; flex-direction: column; gap: 5px; }.output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.output-item img, .output-item video { height: 170px; }.model-output, .model-output model-viewer { min-height: 360px; } }
@media (max-width: 640px) { .field-row.two, .field-row.three, .field-row.four { grid-template-columns: 1fr; }.field-row.three .field:last-child { grid-column: auto; }.multi-upload, .multi-upload.single { grid-template-columns: 1fr; }.multi-upload .upload-field { min-height: 100px; }.pipeline-stage, .pipeline-stage:has(input) { grid-template-columns: 18px minmax(0, 1fr) auto; min-height: 62px; }.pipeline-stage:has(input) > svg { display: none; }.pipeline-stage small { white-space: normal; }.segmented button, .primary-button, .secondary-button { min-height: 46px; } }
@media (max-width: 640px) { .image-series-segmented { grid-template-columns: 1fr; }.image-series-hint { align-items: stretch; flex-direction: column; }.image-series-preview button { min-height: 180px; } }
.output-item[data-asset] { cursor: pointer; }.output-item[data-asset]:hover, .output-item[data-asset]:focus-visible { border-color: #5b6670; outline: none; }.output-item[data-asset] .model-output model-viewer { pointer-events: none; }
.model-card-preview { height: 270px; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: radial-gradient(circle at 50% 45%, #283039, #0a0d10 70%); }.model-card-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; }.model-card-fallback { display: grid; place-items: center; align-content: center; gap: 8px; }.model-card-fallback svg { width: 48px; height: 48px; color: #aeb8c2; stroke-width: 1.3; }.model-card-fallback strong { color: var(--text); font-size: 13px; }.model-card-fallback span { font-size: 10px; }
.asset-viewer { width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100dvh - 32px)); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #3a424b; border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.72); }.asset-viewer::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }.asset-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }.asset-viewer > header, .asset-viewer > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #101419; }.asset-viewer > footer { border-top: 1px solid var(--line); border-bottom: 0; }.asset-viewer h2 { max-width: min(72vw, 800px); margin: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.asset-viewer > footer > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.asset-viewer-body { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 44%, #242b31, #090b0e 68%); }.asset-viewer-body model-viewer { width: 100%; height: 100%; min-height: 520px; touch-action: none; }.asset-viewer-body img, .asset-viewer-body video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }.asset-viewer-body audio { width: min(720px, calc(100% - 32px)); }.danger-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; padding: 7px 11px; border: 1px solid #913a35; border-radius: var(--radius); color: #ffaaa4; background: #281110; cursor: pointer; }.danger-button:hover { background: #3a1714; }.danger-button:disabled { opacity: .5; }.danger-button svg { width: 16px; }
.asset-viewer-actions { display: flex; align-items: center; gap: 8px; }
.asset-viewer-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }.asset-viewer-nav .icon-button { min-width: 36px; min-height: 36px; }.asset-viewer-nav .icon-button:disabled { opacity: .3; cursor: default; }.asset-viewer-body img.viewer-zoomable { cursor: zoom-in; touch-action: manipulation; transition: transform .2s ease; }.asset-viewer-body img.viewer-zoomable.is-zoomed { width: 100%; height: 100%; max-width: none; max-height: none; transform: scale(1.75); cursor: zoom-out; }
.library-session-actions { display: flex; align-items: end; gap: 8px; }.library-session-picker { min-width: min(250px, 42vw); display: grid; gap: 5px; }.library-session-picker > span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.library-session-picker select { min-height: 38px; }
.library-picker-item { min-height: 140px; }.library-picker-media { min-height: 0; }.library-picker-media img, .library-picker-media video { min-width: 0; min-height: 0; height: 100%; }
.image-mapper-panel, .image-mask-panel { min-width: 0; max-width: 100%; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17,20,24,.72); }.image-mask-panel { display: block; padding: 0; }.image-mask-body { display: grid; gap: 10px; padding: 0 12px 12px; }.panel-section-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.panel-section-heading > div { min-width: 0; display: grid; gap: 3px; }.panel-section-heading span { font-weight: 700; }.panel-section-heading small { color: var(--muted); font-size: 10px; }.image-mask-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }.image-mask-actions .secondary-button.active { border-color: var(--red); color: #fff; background: rgba(255,73,61,.18); }.image-mapper { min-width: 0; width: 100%; max-width: 100%; display: grid; gap: 10px; }.image-mapper-stage { position: relative; width: min(100%, 520px); max-width: 100%; aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 1px solid #43505b; border-radius: var(--radius); background: #10151a; }.image-mapper-stage canvas { width: 100%; height: 100%; max-width: 100%; display: block; cursor: crosshair; touch-action: none; }.image-mapper-crosshair { position: absolute; inset: auto 10px 8px; color: rgba(255,255,255,.58); font-size: 10px; text-align: center; pointer-events: none; }.image-mapper-toolbar, .image-mask-toolbar { min-width: 0; max-width: 100%; display: flex; align-items: end; gap: 10px; }.image-mapper-toolbar .field:first-child { min-width: 150px; flex: 1; }.image-mapper-toolbar .field:nth-child(2), .image-mask-toolbar .field { min-width: 180px; flex: 1; }.image-mapper-points { min-width: 0; display: grid; gap: 6px; }.image-mapper-point { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }.image-mapper-point.active { border-color: var(--cyan); }.image-mapper-point-select { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; text-align: left; cursor: pointer; }.image-mapper-point-select > b { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border-radius: 50%; color: #081012; background: var(--cyan); }.image-mapper-point-select span { min-width: 0; display: grid; gap: 3px; }.image-mapper-point-select input { min-width: 0; width: 100%; padding: 3px 5px; border: 1px solid transparent; background: transparent; }.image-mapper-point-select input:focus { border-color: var(--cyan); }.image-mapper-point-select small { color: var(--muted); font-size: 10px; }.image-mask-stage { position: relative; display: grid; place-items: center; min-height: 180px; max-height: 520px; overflow: hidden; border: 1px solid #43505b; border-radius: var(--radius); background: #10151a; }.image-mask-stage img, .image-mask-stage canvas { max-width: 100%; max-height: 520px; display: block; object-fit: contain; }.image-mask-stage img { position: relative; }.image-mask-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; touch-action: pan-y; pointer-events: none; }.image-mask-stage canvas.painting-enabled { cursor: crosshair; touch-action: none; pointer-events: auto; }.image-mask-stage > span { position: absolute; color: var(--muted); font-size: 11px; pointer-events: none; }.image-mask-toolbar strong { color: var(--muted); font-size: 11px; }
.image-reference-panel,.lora-panel { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17,20,24,.72); }
.reference-panel-summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--text); cursor: pointer; list-style: none; }
.reference-panel-summary::-webkit-details-marker { display: none; }
.reference-panel-heading { min-width: 0; display: grid; gap: 3px; }
.reference-panel-heading strong { font-size: 12px; }
.reference-panel-heading small { color: var(--muted); font-size: 10px; font-weight: 400; }
.reference-panel-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.reference-panel-toggle b { font-size: 9px; text-transform: uppercase; }
.reference-panel-toggle svg { width: 16px; height: 16px; transition: transform .18s ease; }
.image-reference-panel[open] .reference-panel-toggle svg,.lora-panel[open] .reference-panel-toggle svg { transform: rotate(180deg); }
.reference-panel-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.reference-panel-actions { display: flex; justify-content: flex-end; }
.image-reference-panel .secondary-button { min-height: 34px; padding: 6px 9px; font-size: 10px; }
.image-reference-slots { display: grid; gap: 8px; }
.image-reference-slot { min-width: 0; display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #0c1014; }
.image-reference-slot.selected { border-color: rgba(86,214,220,.52); box-shadow: inset 3px 0 rgba(86,214,220,.72); }
.image-reference-preview { height: 82px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #333d46; border-radius: 4px; color: var(--muted); background: #080b0e; }
.image-reference-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-reference-preview > b { position: absolute; z-index: 2; top: 5px; left: 5px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #081012; background: var(--cyan); font-size: 11px; }
.image-reference-preview > span { font-size: 10px; }
.image-reference-controls { min-width: 0; display: grid; grid-template-columns: minmax(110px, 145px) minmax(0,1fr); align-items: end; gap: 6px 9px; }
.image-reference-controls > strong { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.image-reference-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.image-reference-actions .secondary-button { min-height: 32px; padding: 5px 8px; gap: 5px; font-size: 9px; }
.image-reference-actions .icon-button { width: 32px; height: 32px; margin-left: auto; }
.reference-upload-button { position: relative; }
.reference-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.reference-upload-button.busy { opacity: .55; pointer-events: none; }
.reference-library-dialog { width: min(920px, calc(100vw - 28px)); max-width: none; max-height: min(820px, calc(100dvh - 28px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid #3a424b; border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.72); }
.reference-library-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.reference-library-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0,1fr); }
.reference-library-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #101419; }
.reference-library-dialog h2 { margin: 0; font-size: 18px; }
.reference-library-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.reference-library-toolbar input { min-width: 0; flex: 1; }
.reference-library-toolbar span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.reference-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 10px; padding: 14px; overflow-y: auto; }
.reference-library-item { min-width: 0; overflow: hidden; display: grid; grid-template-rows: 180px auto auto; border: 1px solid var(--line); border-radius: var(--radius); background: #11161b; }
.reference-library-item > img { width: 100%; height: 100%; display: block; object-fit: cover; background: #080b0e; }
.reference-library-item > div { min-width: 0; display: grid; gap: 3px; padding: 9px; }
.reference-library-item > div strong,.reference-library-item > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-library-item > div strong { font-size: 11px; }.reference-library-item > div small { color: var(--muted); font-size: 9px; }
.reference-library-item > footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 9px 9px; }
.reference-library-item > footer button { min-height: 34px; flex: 1; padding: 6px 8px; font-size: 9px; }
.public-chat-transcript-frame { position: relative; min-height: 0; }
.chat-new-messages { position: absolute; z-index: 8; left: 50%; bottom: 16px; transform: translateX(-50%); min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(86,214,220,.68); border-radius: 999px; color: #dffcff; background: rgba(13,35,40,.96); box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer; font-size: 11px; font-weight: 700; }
.chat-new-messages svg { width: 15px; }.chat-new-messages b { min-width: 18px; padding: 1px 5px; border-radius: 999px; color: #071012; background: var(--cyan); font-size: 9px; text-align: center; }
.public-chat-review-message p { font-size: 12px; line-height: 1.45; }
@media (max-width: 640px) {
  .shell { padding-bottom: 0; }
  .rail { position: sticky; z-index: 25; top: 58px; bottom: auto; width: 100%; height: 60px; flex-direction: row; padding: 4px; border-top: 0; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .nav-button { min-width: 62px; min-height: 50px; }
  .workspace { padding-top: 12px; }
  .queue-panel { top: 124px; bottom: auto; max-height: calc(100dvh - 136px); }
  .toast { bottom: 14px; }
  .image-reference-slot { grid-template-columns: 72px minmax(0,1fr); }
  .image-reference-preview { height: 72px; }
  .image-reference-controls { grid-template-columns: 1fr; align-items: stretch; }
  .image-reference-actions { grid-column: auto; flex-wrap: wrap; }
  .image-reference-actions .secondary-button { flex: 1; }
  .reference-library-toolbar { align-items: stretch; flex-direction: column; }
  .reference-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px; }
  .reference-library-item { grid-template-rows: 128px auto auto; }
  .image-mapper-panel { overflow: hidden; padding: 10px; }
  .image-mapper-panel .panel-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
  .image-mapper-panel #imageMapperToggle { min-width: 0; min-height: 36px; padding: 6px 8px; gap: 5px; font-size: 10px; white-space: nowrap; }
  .image-mapper-panel #imageMapperToggle svg { width: 14px; height: 14px; }
  .image-mapper-stage { width: 100%; }
  .image-mapper-toolbar { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; }
  .image-mapper-toolbar .field:first-child { min-width: 0; width: 100%; }
  .image-mapper-toolbar .field:nth-child(2) { min-width: 0; width: 100%; display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 8px; }
  .image-mapper-toolbar .field:nth-child(2) input { min-width: 0; width: 100%; }
  .image-mapper-toolbar .field:nth-child(2) output { min-width: 32px; text-align: right; }
}
.image-mask-stage img { width: 100%; height: 100%; }
.repair-paint-stage { width: 100%; height: 100%; min-height: 0; position: relative; }.repair-paint-stage > model-viewer { width: 100%; height: 100%; }.repair-paint-stage > model-viewer.painting { cursor: crosshair; }.repair-paint-toolbar { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(680px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #46515b; border-radius: var(--radius); background: rgba(8,11,14,.94); box-shadow: 0 8px 30px rgba(0,0,0,.45); }.repair-paint-toolbar > label { min-width: 150px; flex: 1; display: grid; grid-template-columns: auto minmax(70px,1fr) auto; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }.repair-paint-toolbar input { width: 100%; accent-color: var(--red); }.repair-paint-toolbar output { min-width: 28px; color: var(--text); }.repair-paint-toolbar > strong { min-width: 52px; color: var(--muted); font-size: 10px; text-align: right; }.repair-paint-toolbar .secondary-button.active { border-color: var(--red); color: #fff; background: rgba(255,73,61,.18); }.repair-hotspot { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: rgba(255,48,48,.72); box-shadow: 0 0 0 6px rgba(255,48,48,.18); pointer-events: none; }.repair-region-summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(255,73,61,.45); border-radius: var(--radius); background: rgba(255,73,61,.07); }.repair-region-summary > svg { width: 20px; color: var(--red); }.repair-region-summary > div { display: grid; gap: 2px; }.repair-region-summary strong { font-size: 12px; }.repair-region-summary span { color: var(--muted); font-size: 10px; }
@media (max-width: 640px) { .asset-viewer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }.asset-viewer > header, .asset-viewer > footer { padding: 10px 12px; }.asset-viewer-body model-viewer { min-height: 0; }.asset-viewer > footer > span { display: none; }.asset-viewer-actions { min-width: 0; overflow-x: auto; }.asset-viewer-actions button { flex: 0 0 auto; }.danger-button { min-height: 46px; }.asset-viewer h2 { max-width: 68vw; font-size: 15px; } }
@media (max-width: 640px) { .repair-paint-toolbar { bottom: 8px; flex-wrap: wrap; }.repair-paint-toolbar > label { order: 3; flex-basis: 100%; }.repair-paint-toolbar > strong { margin-left: auto; }.repair-hotspot { width: 22px; height: 22px; } }
.library-action-row { min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }.library-action-row .library-summary { margin: 10px 0 0; }.library-actions, .library-bulk-actions { display: flex; align-items: center; gap: 8px; }.library-bulk-actions b { min-width: 18px; display: inline-block; color: #fff; }
.output-item.selected { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,73,61,.24); }.asset-select-toggle, .asset-menu-button { position: absolute; z-index: 5; top: 7px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #f2f4f6; background: rgba(8,10,12,.88); box-shadow: 0 3px 12px rgba(0,0,0,.38); cursor: pointer; backdrop-filter: blur(8px); }.asset-select-toggle { left: 7px; display: none; }.asset-select-toggle.visible { display: grid; }.asset-menu-button { right: 7px; }.asset-select-toggle svg, .asset-menu-button svg { width: 17px; height: 17px; }.output-item:has(.asset-select-toggle.visible) .output-type { left: 48px; }.output-item.selected .asset-select-toggle { border-color: var(--red); background: var(--red-dark); }
.asset-context-menu { position: fixed; z-index: 100; width: 202px; padding: 6px; border: 1px solid #46515b; border-radius: var(--radius); background: #12171c; box-shadow: 0 18px 50px rgba(0,0,0,.65); }.asset-context-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 4px; color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }.asset-context-menu button:hover, .asset-context-menu button:focus-visible { outline: none; background: #252c33; }.asset-context-menu button.danger { color: #ffaaa4; }.asset-context-menu button.danger:hover { background: #351817; }.asset-context-menu svg { width: 17px; height: 17px; }
.library-move-dialog { width: min(480px, calc(100vw - 28px)); max-width: none; margin: auto; padding: 0; border: 1px solid #3a424b; border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.72); }.library-move-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }.library-move-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #101419; }.library-move-dialog h2 { margin: 0; font-size: 18px; }.library-move-dialog form { display: grid; gap: 16px; padding: 16px; }.library-move-asset { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.library-move-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.project-manager-dialog { width: min(720px, calc(100vw - 28px)); max-width: none; max-height: min(760px, calc(100dvh - 28px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid #3a424b; border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.72); }.project-manager-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }.project-manager-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #101419; }.project-manager-dialog h2 { margin: 0; font-size: 18px; }.project-create-form { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }.project-create-form input { min-width: 0; flex: 1; }.project-manager-list { display: grid; gap: 8px; padding: 14px; overflow: auto; }.project-manager-item { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.2fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }.project-manager-item > div:first-child { display: grid; gap: 3px; min-width: 0; }.project-manager-item > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-manager-item > div:first-child span { color: var(--muted); font-size: 10px; }.project-manager-item label input { width: 100%; }.project-manager-actions { display: flex; gap: 6px; }.project-manager-actions button { min-height: 34px; padding: 6px 9px; }.project-manager-actions .danger-button { min-height: 34px; }.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; }
.output-item[draggable="true"] { cursor: grab; }.output-item.dragging { opacity: .45; }.project-section.drag-over { padding: 14px; border: 1px dashed var(--cyan); border-radius: var(--radius); background: rgba(103,224,232,.06); }.project-section.drag-over .project-header::after { content: "Drop to move here"; color: var(--cyan); font-size: 11px; }
.library-picker { width: min(980px, calc(100vw - 28px)); max-width: none; max-height: min(820px, calc(100dvh - 28px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid #3a424b; border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.72); }.library-picker::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }.library-picker[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }.library-picker > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #101419; }.library-picker h2 { margin: 0; font-size: 18px; }.library-picker-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }.library-picker-toolbar input { min-width: 0; flex: 1; }.library-picker-toolbar span { color: var(--muted); font-size: 11px; white-space: nowrap; }.library-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 10px; padding: 14px; overflow: auto; }.library-picker-item { min-width: 0; display: grid; grid-template-rows: 116px auto auto; gap: 6px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: #11161b; text-align: left; overflow: hidden; cursor: pointer; }.library-picker-item:hover, .library-picker-item:focus-visible { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 2px rgba(103, 224, 232, .15); }.library-picker-media { display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, #283039, #0a0d10 70%); color: var(--muted); }.library-picker-media img, .library-picker-media video { width: 100%; height: 100%; object-fit: cover; }.library-picker-media .picker-fallback { width: 40px; height: 40px; }.library-picker-item strong, .library-picker-item small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 9px; }.library-picker-item strong { font-size: 11px; }.library-picker-item small { padding-bottom: 9px; color: var(--muted); font-size: 9px; }
@media (max-width: 640px) { .library-action-row { align-items: stretch; flex-direction: column; }.library-action-row .library-summary { margin-top: 0; }.library-actions, .library-bulk-actions { width: 100%; }.library-actions > .secondary-button, .library-bulk-actions > .secondary-button, .library-bulk-actions > .danger-button { flex: 1; }.asset-menu-button { width: 38px; height: 38px; }.asset-context-menu { width: min(260px, calc(100vw - 16px)); }.asset-context-menu button { min-height: 48px; } }
@media (max-width: 640px) { .topbar { gap: 9px; }.brand { min-width: 0; flex: 0 1 160px; gap: 8px; }.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }.brand strong { font-size: 14px; white-space: nowrap; }.brand-copy sup { font-size: 7px; }.status-strip { min-width: 0; flex: 1; gap: 8px; }.activity-status { width: auto; min-width: 0; flex: 1; }.activity-copy { gap: 5px; font-size: 10px; }.activity-copy strong { text-align: right; }.status-dot { flex: 0 0 auto; } }
@media (max-width: 640px) { .queue-panel { top: auto; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); left: 0; width: 100%; max-height: calc(76vh - 64px); padding: 18px 16px; border-width: 1px 0 0; border-radius: 0; }.queue-task { min-height: 70px; }.queue-remove { width: 42px; height: 42px; } }
@media (max-width: 380px) { .brand { flex-basis: 145px; }.brand strong { font-size: 13px; }.activity-copy { font-size: 9px; } }
@media (max-width: 640px) { .asset-input-row { grid-template-columns: 1fr; }.library-input-button { min-height: 46px; }.library-picker-toolbar { align-items: stretch; flex-direction: column; }.library-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.library-picker-item { grid-template-rows: 100px auto auto; } }
@media (max-width: 640px) { .library-view-header { align-items: flex-end; }.library-session-actions { min-width: 0; }.library-session-picker { min-width: 0; max-width: 185px; }.library-session-picker select { max-width: 185px; } }
.owner-public-heading { display: grid; gap: 8px; }.owner-public-heading h1 { margin: 0; }.owner-public-scope-tabs { width: auto; }.owner-public-scope-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }.owner-public-scope-tabs svg { width: 15px; }.owner-public-scope-tabs b { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: #090b0e; color: var(--muted); font-size: 10px; }.owner-public-scope-tabs .selected b { color: var(--text); }.owner-public-header { align-items: end; }.owner-public-account-browser { width: min(1000px, 76vw); display: grid; grid-template-columns: minmax(170px,1fr) minmax(190px,1fr) minmax(220px,1.15fr) auto; align-items: end; gap: 9px; }.owner-public-account { min-width: 0; }.owner-public-delete-account { min-height: 42px; padding: 8px 12px; white-space: nowrap; }.owner-public-delete-account svg { width: 16px; }.owner-public-tabs-scroll { width: min(820px, 100%); max-width: 100%; margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }.owner-public-tabs { width: max-content; min-width: max-content; margin: 0; overflow: visible; }.owner-public-tabs button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }.owner-public-tabs svg { width: 16px; }.owner-public-panel { min-width: 0; }.public-chat-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 12px; }.public-chat-panel-header h2 { margin: 2px 0 0; font-size: 22px; }.public-chat-monitor-toolbar { display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }.public-chat-live-toggle { min-height: 42px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }.public-chat-live-toggle input { accent-color: var(--red); }.public-chat-monitor-toolbar > p { margin: 0; text-align: right; }.public-chat-transcript { height: clamp(420px, calc(100dvh - 340px), 760px); min-height: 0; display: grid; align-content: start; gap: 14px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: var(--radius); background: #090c0f; }.public-chat-turn { display: grid; gap: 9px; }.public-chat-turn > header { color: var(--muted); font-size: 10px; text-align: center; }.public-chat-review-message { width: min(78%, 760px); display: grid; gap: 6px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; }.public-chat-review-message strong { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }.public-chat-review-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }.public-chat-review-message.user { justify-self: end; border-color: rgba(255,73,61,.38); background: #321716; }.public-chat-review-message.lumina { justify-self: start; background: #1b2229; }.public-chat-review-message.user strong { color: #ffaaa4; }.public-chat-review-message.lumina strong { color: var(--cyan); }.public-safety-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 14px; }.public-safety-review-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }.public-safety-review-card img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: contain; background: #080a0d; }.public-safety-review-copy { display: grid; gap: 8px; padding: 12px; }.public-safety-review-copy h3,.public-safety-review-copy p { margin: 0; }.public-safety-review-copy h3 { font-size: 15px; }.public-safety-review-copy p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.45; }.public-safety-review-meta { color: var(--muted); }.public-safety-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.public-safety-review-actions button { min-height: 40px; }
.owner-delete-account-dialog { width: min(540px, calc(100vw - 28px)); max-width: none; margin: auto; padding: 0; border: 1px solid #79352f; border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.78); }.owner-delete-account-dialog::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(5px); }.owner-delete-account-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: #17100f; }.owner-delete-account-dialog h2 { margin: 2px 0 0; font-size: 20px; }.owner-delete-account-dialog form { display: grid; gap: 16px; padding: 16px; }.owner-delete-account-summary { margin: 0; color: var(--muted); line-height: 1.55; }.owner-delete-account-error { margin: 0; padding: 10px 12px; border: 1px solid #913a35; border-radius: var(--radius); color: #ffaaa4; background: #281110; }.owner-delete-account-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
@media (max-width: 760px) { .owner-public-header { align-items: stretch; }.owner-public-account-browser { width: 100%; grid-template-columns: 1fr 1fr; }.owner-public-account { grid-column: 1 / -1; }.owner-public-delete-account { grid-column: 1 / -1; justify-self: end; }.public-chat-panel-header { align-items: flex-start; }.public-chat-monitor-toolbar { grid-template-columns: 1fr; align-items: stretch; }.public-chat-monitor-toolbar > p { text-align: left; }.public-chat-transcript { height: clamp(300px, 56dvh, 580px); min-height: 0; padding: 10px; }.public-chat-review-message { width: 88%; } }
@media (max-width: 480px) { .owner-public-account-browser { grid-template-columns: 1fr; }.owner-public-account,.owner-public-delete-account { grid-column: auto; }.owner-public-delete-account { width: 100%; justify-content: center; } }

@media (min-width: 761px) {
  .owner-public-account-browser {
    width: min(1200px, 82vw);
    grid-template-columns: minmax(170px, 1fr) minmax(190px, 1fr) minmax(220px, 1.15fr) auto auto auto;
  }
}
.library-workspace-panel { min-width: 0; }.library-view-header { align-items: center; }.library-view-header > .icon-button { flex: 0 0 42px; }.library-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(140px, 190px) minmax(140px, 190px); align-items: end; gap: 10px; margin: 2px 0 14px; }.library-search { min-width: 0; position: relative; display: flex; align-items: center; }.library-search > svg { position: absolute; left: 11px; width: 17px; color: var(--muted); pointer-events: none; }.library-search input { padding-left: 36px; }.library-toolbar-field { min-width: 0; display: grid; gap: 6px; }.library-toolbar-field > span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }@media (max-width: 760px) { .library-toolbar { grid-template-columns: 1fr 1fr; }.library-search { grid-column: 1 / -1; }.library-toolbar-field select { min-height: 46px; } }@media (max-width: 640px) { .library-view-header { flex-direction: row; align-items: center; } }
  .image-mask-heading { display: grid; gap: 3px; }.image-mask-heading > span { font-weight: 700; }.image-mask-heading > small { color: var(--muted); font-size: 10px; }.image-mask-actions { justify-content: flex-start; flex-wrap: nowrap; }.image-mask-actions .secondary-button { min-height: 34px; padding: 6px 10px; gap: 5px; font-size: 11px; white-space: nowrap; }.image-mask-actions .secondary-button svg { width: 14px; }.image-mask-zoom { display: flex; align-items: end; gap: 8px; }.image-mask-zoom .field { min-width: 0; flex: 1; display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 8px; }.image-mask-zoom .field input { width: 100%; accent-color: var(--red); }.image-mask-zoom .field output { min-width: 38px; color: var(--muted); font-size: 11px; text-align: right; }.image-mask-zoom .secondary-button { min-height: 34px; padding: 6px 10px; font-size: 11px; }.image-mask-stage img, .image-mask-stage canvas { transform: scale(var(--mask-zoom, 1)); transform-origin: center center; }
  .image-mask-stage img, .image-mask-stage canvas { transform: translate(var(--mask-pan-x, 0px), var(--mask-pan-y, 0px)) scale(var(--mask-zoom, 1)); }.image-mask-stage.pannable { cursor: grab; touch-action: none; }.image-mask-stage.pannable.panning { cursor: grabbing; }

.owner-public-tabs-scroll { width: min(820px, 100%); }
.public-provenance-list { display: grid; gap: 12px; margin-top: 14px; }
.public-feedback-toolbar { display: grid; grid-template-columns: repeat(2, minmax(150px, 220px)); gap: 10px; margin: 0 0 14px; }
.public-feedback-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 14px; }
.public-feedback-card { display: grid; align-content: start; gap: 11px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: var(--radius); background: var(--panel); }
.public-feedback-card.suggestion { border-left-color: #b97cff; }
.public-feedback-card.bug-report { border-left-color: #ff6f66; }
.public-feedback-card.account-help { border-left-color: #e6b95c; }
.public-feedback-card.asset-problem { border-left-color: #ff9e45; }
.public-feedback-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.public-feedback-card h3,.public-feedback-card p { margin: 0; }
.public-feedback-card header p,.public-feedback-meta { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.public-feedback-card header > strong { padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; color: var(--cyan); font-size: 9px; text-transform: uppercase; }
.public-feedback-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.public-feedback-screenshot { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; }
.public-feedback-screenshot:hover { border-color: var(--cyan); }
.public-feedback-screenshot img { width: 84px; height: 58px; border-radius: 7px; object-fit: cover; background: #05080b; }
.public-feedback-screenshot span { font-size: 11px; font-weight: 700; }
.public-feedback-screenshot-dialog { width: min(94vw, 1100px); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); }
.public-feedback-screenshot-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.public-feedback-screenshot-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.public-feedback-screenshot-dialog h2,.public-feedback-screenshot-dialog p { margin: 0; }
.public-feedback-screenshot-dialog-body { display: grid; place-items: center; max-height: calc(94vh - 76px); overflow: auto; padding: 12px; }
.public-feedback-screenshot-dialog-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.public-feedback-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: auto; }
.public-feedback-actions button { min-height: 36px; padding: 7px 10px; }
.public-feedback-eris-review { display: grid; gap: 6px; padding: 11px; border: 1px solid rgba(255, 158, 69, .36); border-radius: 10px; background: rgba(255, 158, 69, .08); }
.public-feedback-eris-review strong { color: #ffb36f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.public-feedback-eris-review p { margin: 0; white-space: pre-wrap; font-size: 12px; line-height: 1.5; }
.public-feedback-reported-asset { justify-self: start; }
.asset-problem-dialog { width: min(94vw, 560px); }
.public-provenance-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--panel); }
.public-provenance-card.likely { border-left-color: #56d69a; }
.public-provenance-card.watch { border-left-color: #ff8c82; }
.public-provenance-card.neutral { border-left-color: var(--cyan); }
.public-provenance-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.public-provenance-card h3,.public-provenance-card p,.public-provenance-source-link { margin: 0; }
.public-provenance-card h3 { overflow-wrap: anywhere; font-size: 15px; }
.public-provenance-source-link { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.25; text-align: left; text-decoration: underline; text-decoration-color: rgba(94, 224, 238, .45); text-underline-offset: 3px; overflow-wrap: anywhere; cursor: pointer; }
.public-provenance-source-link:hover,.public-provenance-source-link:focus-visible { color: var(--cyan); text-decoration-color: currentColor; }
.public-provenance-card header p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.public-provenance-card header > strong { flex: 0 0 auto; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; color: var(--cyan); font-size: 9px; text-transform: uppercase; }
.public-provenance-card.watch header > strong { color: #ffaaa4; }
.public-provenance-card.likely header > strong { color: #7ee5b5; }
.public-provenance-summary { line-height: 1.5; }
.public-chat-review-message.consort { justify-self: start; background: #1b252b; }
.public-chat-review-message.consort strong { color: var(--cyan); }
.public-chat-review-message.character { justify-self: start; border-color: rgba(185,124,255,.42); background: linear-gradient(135deg,#261a35,#18232d); }
.public-chat-review-message.character strong { color: #d3adff; }
.public-chat-review-message.lumina { justify-self: start; border-color: #e0e3e6; background: #d4d7da; color: #171a1d; }
.public-chat-review-message.lumina strong { color: #48525b; }
.public-provenance-card dl { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); gap: 6px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; }
.public-provenance-card dt { color: var(--muted); font-weight: 700; }
.public-provenance-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .public-feedback-toolbar { grid-template-columns: 1fr 1fr; }
  .owner-public-tabs-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .owner-public-tabs { width: max-content; min-width: max-content; }
  .owner-public-tabs button {
    flex: 0 0 auto;
    min-width: 118px;
    white-space: nowrap;
  }
  .public-provenance-card > header { align-items: stretch; flex-direction: column; }
  .public-provenance-card header > strong { align-self: flex-start; }
  .public-provenance-card dl { grid-template-columns: 1fr; gap: 3px; }
  .public-provenance-card dd { margin-bottom: 7px; }
}

.owner-lumina-console {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid rgba(86, 214, 220, .28);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(16, 28, 35, .94), rgba(10, 13, 17, .98));
}
.owner-lumina-console > p { margin: 0; }
.owner-lumina-console-header,
.owner-lumina-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.owner-lumina-console-header h3 { margin: 2px 0 0; font-size: 18px; }
.owner-lumina-transcript {
  max-height: 320px;
  min-height: 120px;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(3, 7, 11, .75);
}
.owner-lumina-message {
  width: min(86%, 720px);
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.owner-lumina-message strong {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.owner-lumina-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
}
.owner-lumina-message.user {
  justify-self: end;
  border-color: rgba(255, 73, 61, .35);
  background: #321716;
}
.owner-lumina-message.assistant {
  justify-self: start;
  border-color: rgba(86, 214, 220, .3);
  background: #18242a;
}
.owner-lumina-message.assistant strong { color: var(--cyan); }
.owner-lumina-composer { display: grid; gap: 6px; }
.owner-lumina-composer > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.owner-lumina-composer textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
}
.owner-lumina-actions { justify-content: flex-start; flex-wrap: wrap; }
.owner-lumina-actions button { min-height: 40px; }
@media (max-width: 640px) {
  .owner-lumina-console-header { align-items: stretch; flex-direction: column; }
  .owner-lumina-console-header button { width: 100%; }
  .owner-lumina-actions { display: grid; grid-template-columns: 1fr; }
  .owner-lumina-message { width: 92%; }
}
@media (max-width: 480px) { .public-feedback-toolbar { grid-template-columns: 1fr; } }

.owner-public-open-as-user { min-height: 42px; white-space: nowrap; }
.owner-direct-lumina-console { width: min(980px, 100%); margin-inline: auto; }
.owner-direct-lumina-transcript { max-height: none; height: clamp(360px, calc(100dvh - 410px), 680px); }
.owner-rooms-header { align-items: end; }
.owner-rooms-header > div:first-child { max-width: 520px; }
.owner-rooms-header h1,.owner-room-detail h2 { margin: 0; }
.owner-rooms-header .muted { margin: 6px 0 0; }
.owner-rooms-controls { width: min(760px, 70vw); display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: end; gap: 10px; }
.owner-rooms-kind-tabs { width: auto; }
.owner-rooms-kind-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.owner-rooms-kind-tabs svg { width: 15px; }
.owner-rooms-layout { min-height: min(680px, calc(100dvh - 260px)); display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: 14px; }
.owner-room-list-panel,.owner-room-detail { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.owner-room-list-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.owner-room-list-panel .panel-section-heading { padding: 13px; border-bottom: 1px solid var(--line); }
.owner-room-list { min-height: 0; display: grid; align-content: start; gap: 7px; padding: 9px; overflow-y: auto; overscroll-behavior: contain; }
.owner-room-list-item { width: 100%; min-width: 0; display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(5, 8, 11, .78); text-align: left; }
.owner-room-list-item:hover,.owner-room-list-item:focus-visible { border-color: rgba(86, 214, 220, .45); }
.owner-room-list-item.active { border-color: rgba(255, 91, 74, .62); background: #2c1714; }
.owner-room-list-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-room-list-item span { color: var(--muted); font-size: 10px; }
.owner-room-detail { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.owner-room-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.owner-room-detail-header h2 { margin-top: 2px; font-size: 22px; }
.owner-room-participants { display: flex; gap: 7px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.owner-room-participants span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(86, 214, 220, .28); border-radius: 999px; color: var(--text); font-size: 10px; }
.owner-room-participants span.muted,.owner-room-participants span.absent { border-color: var(--line); color: var(--muted); }
.owner-room-transcript { min-height: 0; display: grid; align-content: start; gap: 12px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; background: #070a0d; }
.owner-room-message { width: min(84%, 780px); display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.owner-room-message strong { color: var(--muted); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.owner-room-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.owner-room-message.user { justify-self: end; border-color: rgba(255, 91, 74, .4); background: #2b1513; }
.owner-room-message.assistant { justify-self: start; border-color: rgba(86, 214, 220, .28); background: #142026; }
.owner-room-message.assistant strong { color: var(--cyan); }
.owner-room-message.director { justify-self: center; border-style: dashed; background: #15171b; }
@media (max-width: 900px) {
  .owner-rooms-header { align-items: stretch; }
  .owner-rooms-controls { width: 100%; grid-template-columns: auto minmax(180px, 1fr) auto; }
  .owner-rooms-layout { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .owner-rooms-controls { grid-template-columns: 1fr auto; }
  .owner-rooms-kind-tabs { grid-column: 1 / -1; width: 100%; }
  .owner-rooms-layout { min-height: 0; grid-template-columns: 1fr; }
  .owner-room-list-panel { max-height: 210px; }
  .owner-room-list { grid-auto-flow: column; grid-auto-columns: minmax(180px, 76vw); overflow-x: auto; overflow-y: hidden; }
  .owner-room-detail { min-height: 470px; }
  .owner-room-message { width: 92%; }
  .owner-direct-lumina-transcript { height: clamp(300px, 52dvh, 520px); }
  .owner-public-open-as-user { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

.public-safety-review-media {
  width: 100%;
  min-height: 92px;
  display: block;
  background: #080a0d;
}

.public-safety-review-media-list {
  display: grid;
  gap: 10px;
  background: #080a0d;
}

.public-safety-review-media-frame {
  display: grid;
  gap: 8px;
  padding: 10px;
}

img.public-safety-review-media,
video.public-safety-review-media {
  width: 100%;
  max-height: 60dvh;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #050607;
}

img.public-safety-review-media {
  cursor: zoom-in;
}

audio.public-safety-review-media {
  width: 100%;
  min-height: 54px;
}

.public-safety-review-media-status {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.public-safety-review-media-frame.load-error {
  border: 1px solid rgba(255, 73, 61, .5);
}

.public-safety-review-open {
  width: 100%;
  min-height: 38px;
}

.public-safety-review-actions .review-media-unavailable {
  opacity: .58;
  border-style: dashed;
  cursor: help;
}

.public-verification-owner-message {
  margin-top: 2px;
}

.public-verification-screening {
  padding: 9px 10px;
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  color: #d8f7f9;
  background: rgba(86, 214, 220, .08);
}

.public-verification-owner-message textarea {
  min-height: 64px;
  resize: vertical;
}

.public-safety-review-media.placeholder {
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}

@media (max-width: 640px) {
  img.public-safety-review-media,
  video.public-safety-review-media {
    max-height: 52dvh;
  }
}

/* Keep the complete image visible at the viewer's default zoom. */
.asset-viewer-body > img.viewer-zoomable {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.asset-prompt-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 28px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3a424b;
  border-radius: var(--radius);
  color: var(--text);
  background: #090c0f;
  box-shadow: 0 24px 90px rgba(0,0,0,.72);
}
.asset-prompt-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.asset-prompt-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.asset-prompt-dialog > header,
.asset-prompt-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #101419;
}
.asset-prompt-dialog > header { border-bottom: 1px solid var(--line); }
.asset-prompt-dialog > footer { border-top: 1px solid var(--line); }
.asset-prompt-dialog h2 { margin: 0; font-size: 18px; }
.asset-prompt-content { min-height: 180px; overflow: auto; padding: 16px; display: grid; align-content: start; gap: 18px; }
.asset-detail-section { min-width: 0; display: grid; gap: 9px; }
.asset-detail-section > h3,
.asset-detail-heading h3 { margin: 0; font-size: 13px; }
.asset-detail-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.asset-prompt-content pre {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d1115;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.asset-input-provenance-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.asset-input-provenance-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 150px auto auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #101419;
}
.asset-input-provenance-card > img { width: 100%; height: 100%; display: block; object-fit: cover; background: #080b0e; }
.asset-input-provenance-card > div { min-width: 0; display: grid; gap: 4px; padding: 9px 10px; }
.asset-input-provenance-card strong,
.asset-input-provenance-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-input-provenance-card strong { font-size: 11px; }
.asset-input-provenance-card small { color: var(--muted); font-size: 9px; text-transform: capitalize; }
.asset-input-provenance-card > footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 9px 9px; }
.asset-input-provenance-card > footer button { min-height: 34px; flex: 1 1 110px; padding: 6px 8px; font-size: 9px; }
@media (max-width: 640px) {
  .asset-prompt-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  .asset-prompt-dialog > footer { align-items: stretch; flex-direction: column; }
  .asset-prompt-dialog > footer button { width: 100%; }
  .asset-input-provenance-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .asset-input-provenance-card { grid-template-rows: 122px auto auto; }
}
@media (max-width: 380px) {
  .asset-input-provenance-grid { grid-template-columns: 1fr; }
}

.library-picker-public-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.library-picker-public-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  accent-color: var(--red);
}
.library-picker[open] { grid-template-rows: auto auto auto minmax(0, 1fr); }
.library-picker-project-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #0d1216;
}
.library-picker-project-bar > div { min-width: 0; display: grid; gap: 2px; }
.library-picker-project-bar strong,
.library-picker-project-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-picker-project-bar small { color: var(--muted); font-size: 10px; }
.library-picker-project-bar .secondary-button { min-height: 36px; padding: 7px 10px; }
.library-picker-project-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.library-picker-project {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: #11161b;
  text-align: left;
  cursor: pointer;
}
.library-picker-project:hover,
.library-picker-project:focus-visible { border-color: var(--cyan); outline: none; background: #172026; }
.library-picker-project-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; color: var(--cyan); background: #0a2225; }
.library-picker-project-icon svg { width: 22px; height: 22px; }
.library-picker-project-copy { min-width: 0; display: grid; gap: 4px; }
.library-picker-project-copy strong,
.library-picker-project-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-picker-project-copy small { color: var(--muted); font-size: 10px; }
.library-picker-project > b { min-width: 27px; padding: 4px 7px; border-radius: 999px; color: var(--cyan); background: #081114; font-size: 10px; text-align: center; }
.library-picker-project > svg { width: 16px; color: var(--muted); }
@media (max-width: 640px) {
  .library-picker-project-grid { grid-template-columns: 1fr; }
  .library-picker-project { min-height: 72px; }
  .library-picker-project-bar { padding: 8px 10px; }
}

.public-chat-monitor-toolbar {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 10px;
  padding: 8px 10px;
}
.public-chat-monitor-toolbar > p { text-align: left; }

/* Mobile navigation belongs directly beneath the sticky status bar. Keep this
   final override after every older bottom-rail media rule. */
@media (max-width: 640px) {
  .shell { padding-bottom: 0; }
  .rail {
    position: sticky;
    z-index: 25;
    top: 58px;
    bottom: auto;
    width: 100%;
    height: 60px;
    flex-direction: row;
    padding: 4px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    background: rgba(13,16,19,.98);
  }
  .nav-button { min-width: 62px; min-height: 50px; }
  .workspace { padding-top: 12px; }
  .queue-panel { top: 124px; bottom: auto; max-height: calc(100dvh - 136px); }
  .toast { bottom: 14px; }
}

.character-selector-panel {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17,20,24,.72);
}
.character-selector-panel[open] .reference-panel-toggle svg { transform: rotate(180deg); }
.character-selection-list { display: grid; gap: 8px; }
.character-selection-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) minmax(0,.8fr);
  align-items: end;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0c1014;
}
.character-selection-list.compact .character-selection-row { grid-template-columns: 32px minmax(0,1fr); }
.character-selection-row > b {
  width: 28px;
  height: 38px;
  display: grid;
  place-items: center;
  align-self: end;
  border: 1px solid rgba(86,214,220,.3);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(86,214,220,.07);
}
.character-selection-row .field { gap: 5px; }
.character-selection-row select { min-height: 38px; }
.character-vault-header { align-items: center; }
.character-vault-actions { display: flex; align-items: center; gap: 10px; }
.character-vault-actions .primary-button { min-height: 38px; width: auto; max-width: 160px; flex: 0 0 auto; padding: 7px 11px; font-size: 12px; line-height: 1; white-space: nowrap; }
.character-vault-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.8fr);
  align-items: start;
  gap: 16px;
}
.character-vault-layout.public-catalog-layout { grid-template-columns: minmax(0, 1fr); }
.character-profile-list-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.character-profile-list-panel.public-catalog-flat {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.character-profile-list { display: grid; gap: 8px; }
.character-profile-card {
  min-width: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: #0c1014;
}
.character-profile-card:hover,.character-profile-card.active { border-color: rgba(86,214,220,.55); background: rgba(86,214,220,.08); }
.character-profile-card.assigned-companion { border-color: rgba(158,140,255,.48); background: rgba(158,140,255,.08); }
.character-profile-select {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.character-profile-select > img,.character-profile-select > svg {
  width: 44px;
  height: 52px;
  border: 1px solid rgba(112,215,224,.25);
  border-radius: 8px;
  color: var(--cyan);
  background: #05080c;
  object-fit: cover;
}
.character-profile-select > svg { padding: 9px; }
.character-profile-select > span { min-width: 0; display: grid; gap: 4px; }
.character-companion-badge { display: inline-flex; margin-left: 5px; padding: 2px 5px; border: 1px solid rgba(158,140,255,.44); border-radius: 999px; color: #c9c1ff; font-size: 8px; line-height: 1.2; text-transform: uppercase; vertical-align: 1px; }
.character-profile-card strong,.character-profile-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-profile-card small { color: var(--muted); font-size: 10px; }
.character-profile-form { min-width: 0; display: grid; gap: 14px; }
.character-portrait-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1fr);
  grid-template-areas: "portrait copy" "portrait action";
  align-items: center;
  gap: 14px 18px;
  padding: 16px;
  border: 1px solid rgba(86,214,220,.34);
  border-radius: 18px;
  background: radial-gradient(circle at 22% 18%,rgba(86,214,220,.13),transparent 48%),#090d12;
}
.character-portrait-frame {
  grid-area: portrait;
  position: relative;
  aspect-ratio: 3/4;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(112,215,224,.28);
  border-radius: 15px;
  background: #05080c;
}
.character-portrait-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.character-portrait-rig { position: absolute; inset: 0; display: grid; place-items: end center; }
.character-portrait-rig .public-avatar-rig { width: 100%; height: 100%; }
.character-portrait-empty { width: 100%; height: 100%; min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 22px; color: var(--muted); text-align: center; }
.character-portrait-empty svg { width: 44px; height: 44px; color: var(--cyan); }
.character-portrait-empty.generating svg { animation: spin 1.1s linear infinite; }
.character-portrait-copy { grid-area: copy; min-width: 0; align-self: end; }
.character-portrait-copy h2 { margin: 3px 0 8px; font-size: clamp(22px,3vw,32px); }
.character-portrait-copy .form-hint { margin: 0; }
.character-portrait-actions { grid-area: action; display: flex; flex-wrap: wrap; align-self: start; justify-content: flex-end; gap: 8px; }
.character-portrait-actions .secondary-button { width: fit-content; }
.character-identity-record { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(5,8,12,.5); overflow: hidden; }
.character-identity-summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; cursor: pointer; list-style: none; }
.character-identity-summary::-webkit-details-marker { display: none; }
.character-identity-summary > span:first-child { min-width: 0; display: grid; gap: 3px; }
.character-identity-summary strong { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.character-identity-summary-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); font-size: 12px; font-weight: 800; }
.character-identity-summary-action svg { width: 17px; transition: transform .18s ease; }
.character-identity-record[open] .character-identity-summary-action svg { transform: rotate(180deg); }
.character-identity-body { display: grid; gap: 14px; padding: 0 17px 17px; border-top: 1px solid var(--line); }
.character-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.character-form-heading .form-hint { margin: 0; }
.character-form-heading > div { min-width: 0; display: grid; gap: 7px; }
.character-unsaved-warning { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 9px; border: 1px solid rgba(242,169,79,.5); border-radius: 999px; color: #ffd19a; background: rgba(70,38,12,.58); font-size: 11px; font-weight: 750; line-height: 1.3; }
.character-unsaved-warning svg { width: 15px; height: 15px; flex: 0 0 auto; }
.character-unsaved-dialog { width: min(560px, calc(100vw - 28px)); max-width: none; margin: auto; padding: 0; border: 1px solid rgba(242,169,79,.56); border-radius: var(--radius); color: var(--text); background: #090c0f; box-shadow: 0 24px 90px rgba(0,0,0,.78); }
.character-unsaved-dialog::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(5px); }
.character-unsaved-dialog > header,.character-unsaved-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #15120f; }
.character-unsaved-dialog > header { border-bottom: 1px solid var(--line); }
.character-unsaved-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.character-unsaved-dialog h2 { margin: 2px 0 0; font-size: 20px; }
.character-unsaved-dialog-body { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 13px; padding: 18px 16px; }
.character-unsaved-dialog-body > svg { width: 28px; height: 28px; color: #f2a94f; }
.character-unsaved-dialog-body strong { display: block; margin-bottom: 6px; }
.character-unsaved-dialog-body p { margin: 0; color: var(--muted); line-height: 1.55; }
.character-roleplay-heading { display: grid; gap: 3px; padding-top: 14px; border-top: 1px solid rgba(112,215,224,.16); }
.character-roleplay-heading h3 { margin: 0; }
.character-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.character-form-actions .primary-button { width: auto; }
.character-profile-form textarea { min-height: 78px; }

@media (max-width: 900px) {
  .character-vault-layout { grid-template-columns: 1fr; }
  .character-profile-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .character-selection-row,.character-selection-list.compact .character-selection-row { grid-template-columns: 28px minmax(0,1fr); }
  .character-selection-row > .field:last-child { grid-column: 2; }
  .character-vault-header { align-items: stretch; }
  .character-vault-actions { width: 100%; justify-content: space-between; }
  .character-vault-actions .primary-button { min-height: 38px; padding: 7px 10px; font-size: 11px; }
  .character-profile-list { grid-template-columns: 1fr; }
  .character-profile-list-panel { padding: 12px; }
  .character-portrait-panel { grid-template-columns: 1fr; grid-template-areas: "portrait" "copy" "action"; padding: 12px; }
  .character-portrait-frame { min-height: 0; }
  .character-portrait-empty { min-height: 300px; }
  .character-portrait-actions { width: 100%; }
  .character-portrait-actions .secondary-button { width: 100%; }
  .character-identity-summary { min-height: 66px; padding: 13px; }
  .character-identity-summary-action > span { display: none; }
  .character-identity-body { padding: 0 13px 13px; }
  .character-form-heading { align-items: flex-start; }
  .character-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .character-form-actions .primary-button,.character-form-actions .secondary-button,.character-form-actions .danger-button { width: 100%; }
}