:root {
  color-scheme: dark;
  --bg: #080d13;
  --panel: #111a24;
  --panel-soft: #192635;
  --line: #2b4051;
  --text: #edf5f4;
  --muted: #96aab5;
  --accent: #7ce0c4;
  --accent-strong: #42bca1;
  --violet: #9b8cf5;
  --gold: #e9c87e;
  --danger: #f17979;
  --focus: #aee9dc;
  --display-font: "Oxanium", "Orbitron", "Eurostile", "Bank Gothic", ui-sans-serif, system-ui, sans-serif;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--text); background: radial-gradient(circle at 78% -10%, #18313c 0, transparent 29rem), radial-gradient(circle at 0% 88%, #211936 0, transparent 34rem), var(--bg); }
button, input, textarea, select { font: inherit; }
button, select, input, textarea { border-radius: 7px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app-shell { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; min-height: 100vh; }
.sidebar { position: relative; padding: 30px 22px 38px; background: linear-gradient(180deg, rgba(15, 25, 35, .98), rgba(10, 16, 24, .98)); border-right: 1px solid var(--line); overflow-y: auto; }
.sidebar::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: linear-gradient(90deg, var(--accent), var(--violet), var(--gold)); }
.workspace { min-width: 0; padding: 36px clamp(20px, 3.5vw, 58px) 58px; }
.brand h1, .workspace h2 { margin: 2px 0 6px; font-family: var(--display-font); letter-spacing: -.035em; }
.brand h1 { font-size: 1.92rem; }
.brand > p:last-child { margin: 0; color: var(--muted); line-height: 1.5; font-size: .9rem; }
.brand-logo-wrap { display: flex; min-height: 92px; align-items: center; margin: 0 0 18px; }
.brand-logo { display: block; width: 100%; max-width: 316px; max-height: 112px; object-fit: contain; object-position: left center; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .48)) drop-shadow(0 0 16px rgba(125, 121, 255, .15)); }
.brand-logo[hidden] { display: none; }
.eyebrow { margin: 0; color: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.control-section { margin-top: 24px; }
.section-heading, .workspace-header, .toolbar, .job-line, .job-label-wrap, .modal-title-row, .card-title-row { display: flex; align-items: center; gap: 10px; }
.section-heading { justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.preset-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 10px; }
.preset-button, .filter-group button { color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); padding: 9px 10px; text-align: left; }
.preset-button.active, .filter-group button.active { color: #071614; background: var(--accent); border-color: var(--accent); font-weight: 750; }
label { display: grid; gap: 6px; color: #d2dce2; font-size: .82rem; font-weight: 650; }
textarea, input, select { width: 100%; color: var(--text); border: 1px solid var(--line); background: #0f141d; padding: 9px 10px; }
textarea { resize: vertical; line-height: 1.42; font-size: .83rem; }
input[type="number"] { min-width: 0; }
.subtle, .meta, .hint { color: var(--muted); font-weight: 450; }
.inline-actions { display: flex; gap: 8px; margin-top: 8px; }
.button-primary, .button-secondary, .button-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; border: 1px solid transparent; padding: 8px 10px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.button-primary { color: #081411; background: var(--accent); border-color: var(--accent); }
.button-primary:hover:not(:disabled) { background: #81e3cd; }
.button-secondary { color: #dce8eb; background: #252e3c; border-color: #3b4758; }
.button-secondary:hover:not(:disabled) { background: #313d4f; }
.button-quiet { color: var(--muted); background: transparent; border-color: var(--line); }
.danger { color: #ffd0d0; border-color: #6a4147; background: #3a252b; }
.full-width { width: 100%; margin-top: 10px; }
.advanced, .batch-panel { margin-top: 24px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(24, 30, 40, .5); }
summary { cursor: pointer; font-size: .84rem; font-weight: 750; }
.advanced label { margin-top: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.generation-settings { padding-top: 4px; }
.estimate { margin: 8px 0 0; color: #b5c3cb; font-size: .77rem; }
.estimate.warning { color: #ffb2a8; }
.batch-panel > .hint { margin: 8px 0 12px; font-size: .77rem; line-height: 1.4; }
.batch-biomes { display: grid; gap: 6px; }
.batch-row { display: grid; grid-template-columns: 1fr 56px; align-items: center; gap: 8px; padding: 5px 0; font-weight: 550; }
.batch-check { display: flex; align-items: center; gap: 8px; font-weight: 550; }
.batch-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.batch-row input[type="number"] { padding: 5px; text-align: center; }
.job-panel { margin-top: 22px; padding: 12px; border: 1px solid #3b625c; border-radius: 8px; background: #172a2a; }
.job-line { justify-content: space-between; font-size: .78rem; font-weight: 700; }
.spinner { width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid rgba(204, 239, 231, .3); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.spinner[hidden] { display: none; }
.progress-track { height: 7px; overflow: hidden; margin-top: 8px; border-radius: 99px; background: #0d161b; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.job-panel .hint { margin: 7px 0 0; font-size: .76rem; }
.job-controls { display: flex; gap: 7px; margin-top: 10px; }
.job-controls .button-secondary, .job-controls .button-primary { flex: 1; padding: 7px 8px; font-size: .74rem; }
.job-errors { display: grid; gap: 5px; margin: 11px 0 0; padding: 9px 10px 9px 25px; border: 1px solid #834c52; border-radius: 6px; color: #ffd0d0; background: #43282d; font-size: .74rem; line-height: 1.35; }
@keyframes spin { to { transform: rotate(360deg); } }

.workspace-header { justify-content: space-between; margin-bottom: 30px; }
.workspace-header h2 { font-size: clamp(2rem, 3.3vw, 2.8rem); }
.workspace-deck { max-width: 620px; margin: 0; color: var(--muted); line-height: 1.5; font-size: .94rem; }
.toast { max-width: min(420px, 45vw); padding: 9px 12px; border: 1px solid #3f625e; border-radius: 7px; color: #c8f8ef; background: #17312e; font-size: .82rem; line-height: 1.35; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { color: #ffd6d6; border-color: #76454b; background: #42262c; }
.library-command { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding: 17px 20px; border: 1px solid rgba(66, 188, 161, .26); border-radius: 14px; background: linear-gradient(105deg, rgba(20, 51, 54, .72), rgba(20, 27, 47, .65)); box-shadow: 0 18px 45px rgba(0,0,0,.14); }
.library-command .eyebrow { margin-bottom: 8px; }
.library-status-copy { max-width: 300px; margin: 0; color: #b7d4d0; text-align: right; font-size: .84rem; line-height: 1.45; }
.toolbar { flex-wrap: wrap; padding: 10px 12px; border: 1px solid rgba(61, 87, 104, .8); border-radius: 11px; background: rgba(17, 26, 36, .82); margin: 0 0 22px; }
.filter-group { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-group button { min-width: 76px; padding: 8px 12px; border-radius: 999px; text-align: center; font-size: .76rem; }
.selection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.selection-actions .button-secondary { padding: 6px 8px; font-size: .74rem; }
.collection-browser { padding: 25px; border: 1px solid rgba(50, 78, 94, .75); border-radius: 16px; background: linear-gradient(145deg, rgba(13, 23, 32, .82), rgba(17, 22, 38, .72)); box-shadow: 0 18px 50px rgba(0,0,0,.13); }
.collection-heading, .collection-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.collection-heading { margin-bottom: 19px; }
.collection-heading h3, .collection-detail-heading h3 { margin: 4px 0 0; font-family: var(--display-font); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.03em; }
.collection-total { margin: 0; color: var(--muted); font: .72rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.show-all-biomes { position: relative; display: grid; width: 100%; min-height: 106px; overflow: hidden; margin: 0 0 15px; padding: 18px 22px; border: 1px solid rgba(124, 224, 196, .55); border-radius: 13px; color: #effff9; text-align: left; background: linear-gradient(105deg, #135052, #24376d 53%, #482b68); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 25px rgba(0,0,0,.17); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.show-all-biomes::before { position: absolute; width: 260px; height: 260px; right: -50px; top: -145px; border: 1px solid rgba(223,255,248,.32); border-radius: 50%; content: ""; box-shadow: 0 0 0 24px rgba(223,255,248,.05), 0 0 0 50px rgba(223,255,248,.04); }
.show-all-biomes::after { position: absolute; right: 27px; bottom: 22px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.44); border-radius: 50%; content: ""; background: radial-gradient(circle at 37% 35%, #bbffed 0 4%, transparent 5%), radial-gradient(circle at 68% 61%, #c7adff 0 3%, transparent 4%), radial-gradient(circle at 49% 65%, #f4d88d 0 3%, transparent 4%); }
.show-all-biomes:hover, .show-all-biomes:focus-visible { border-color: #d4fff2; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 16px 34px rgba(0,0,0,.3), 0 0 0 1px #d4fff2; transform: translateY(-2px); }
.show-all-eyebrow, .show-all-count { position: relative; z-index: 1; font: .68rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; text-transform: uppercase; }
.show-all-eyebrow { color: rgba(225,255,246,.76); }
.show-all-biomes strong { position: relative; z-index: 1; align-self: center; margin: 2px 60px 2px 0; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: -.02em; text-transform: uppercase; }
.show-all-count { color: #e7fff9; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.collection-card { position: relative; display: flex; min-height: 210px; overflow: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 9px; padding: 18px; border: 1px solid var(--collection-line, rgba(128, 158, 177, .37)); border-radius: 13px; color: #f0f7f5; text-align: left; isolation: isolate; background: linear-gradient(145deg, var(--collection-a, #153343), var(--collection-b, #182137)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 9px 23px rgba(0,0,0,.13); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.collection-card::before { position: absolute; z-index: 1; width: 170px; height: 170px; right: -45px; top: -50px; border: 1px solid rgba(255,255,255,.2); border-radius: 46% 54% 38% 62%; content: ""; background: radial-gradient(circle at 35% 35%, var(--collection-glow, rgba(255,255,255,.28)), transparent 40%), repeating-radial-gradient(ellipse at center, transparent 0 13px, rgba(255,255,255,.07) 14px 15px); pointer-events: none; transform: rotate(18deg); }
.collection-card::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; opacity: .45; background: linear-gradient(180deg, rgba(5, 10, 15, .08), rgba(5, 10, 15, .62)), linear-gradient(115deg, transparent 36%, rgba(255,255,255,.14) 36.5%, transparent 37%), linear-gradient(20deg, transparent 58%, rgba(255,255,255,.09) 58.5%, transparent 59%); }
.collection-card > :not(.collection-thumbnail) { position: relative; z-index: 2; }
.collection-thumbnail { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: .78; filter: saturate(.86) contrast(1.05) brightness(.78); transform: scale(1.025); transition: filter .18s ease, transform .25s ease; }
.collection-card.has-thumbnail:hover .collection-thumbnail, .collection-card.has-thumbnail:focus-visible .collection-thumbnail { filter: saturate(1) contrast(1.08) brightness(.9); transform: scale(1.06); }
.collection-card:hover, .collection-card:focus-visible { border-color: var(--collection-focus, var(--accent)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 16px 30px rgba(0,0,0,.28), 0 0 0 1px var(--collection-focus, var(--accent)); transform: translateY(-3px); }
.collection-card-top { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: auto; }
.collection-code, .collection-count { font: .68rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.collection-code { color: rgba(241,255,253,.76); }
.collection-count { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.21); border-radius: 50%; color: #fff; background: rgba(3,8,13,.22); }
.collection-card strong { font-family: var(--display-font); font-size: 1.36rem; font-weight: 700; letter-spacing: -.035em; }
.collection-card-description { max-width: 230px; color: rgba(240,249,248,.78); font-size: .77rem; line-height: 1.42; }
.collection-open { margin-top: 2px; color: #fff; font-size: .73rem; font-weight: 800; }
.collection-card[data-biome="sea"] { --collection-a: #0b3443; --collection-b: #132544; --collection-line: #287f8d; --collection-focus: #64e0e2; --collection-glow: rgba(94, 236, 232, .58); }
.collection-card[data-biome="fungal"] { --collection-a: #3d2346; --collection-b: #261a3c; --collection-line: #90589d; --collection-focus: #e4a6e9; --collection-glow: rgba(226, 157, 228, .5); }
.collection-card[data-biome="forest"] { --collection-a: #173b32; --collection-b: #1b2922; --collection-line: #5a9671; --collection-focus: #a9e292; --collection-glow: rgba(153, 233, 133, .45); }
.collection-card[data-biome="crystal"] { --collection-a: #273365; --collection-b: #291c50; --collection-line: #7772e9; --collection-focus: #b4a7ff; --collection-glow: rgba(159, 139, 255, .58); }
.collection-card[data-biome="volcanic"] { --collection-a: #482322; --collection-b: #331a25; --collection-line: #b96551; --collection-focus: #ffad77; --collection-glow: rgba(255, 143, 81, .52); }
.collection-card[data-biome="barren"] { --collection-a: #42362a; --collection-b: #302b31; --collection-line: #8d795a; --collection-focus: #dbc588; --collection-glow: rgba(228, 201, 133, .44); }
.collection-detail-heading { margin: 4px 0 19px; padding: 0 2px; }
.back-button { margin: 0 0 13px; padding: 0; border: 0; color: var(--accent); background: transparent; font-size: .76rem; font-weight: 750; }
.back-button:hover { color: #c5fff0; }
.collection-description { max-width: 360px; margin: 0; color: var(--muted); text-align: right; font-size: .82rem; line-height: 1.45; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 17px; }
.image-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 22px rgba(0,0,0,.16); }
.preview-button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: #06090d; aspect-ratio: 1; overflow: hidden; }
.preview-button img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .18s ease; }
.preview-button:hover img { transform: scale(1.025); }
.card-body { padding: 12px; }
.card-title-row { gap: 7px; }
.card-title-row h3 { flex: 1; margin: 0; font-size: .96rem; }
.card-title-row input { width: 15px; height: 15px; accent-color: var(--accent); }
.badge { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; border-radius: 999px; color: #d5e3e5; background: #273242; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.status-review { color: #ccefe7; background: #1d524a; }
.status-kept { color: #d6e7bb; background: #44552c; }
.status-discarded { color: #d6bdc0; background: #4a333a; }
.meta { margin: 7px 0 0; font-size: .72rem; line-height: 1.35; }
.id-meta { opacity: .8; }
.image-card details, .modal-details details { margin-top: 9px; color: #cbd6dd; font-size: .76rem; }
.prompt-text { margin: 7px 0 0; color: #b5c1cb; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.card-actions .button-secondary { flex: 1 0 auto; padding: 6px 7px; font-size: .7rem; }
.empty-state { grid-column: 1 / -1; padding: 55px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); }
.empty-state h3 { margin: 0 0 6px; color: var(--text); }
.empty-state p { max-width: 460px; margin: 0 auto; line-height: 1.5; }

.image-modal { width: min(1260px, 96vw); max-width: none; padding: 0; overflow: visible; color: var(--text); border: 1px solid #48576a; border-radius: 12px; background: #151a23; }
.image-modal::backdrop { background: rgba(2, 5, 9, .82); backdrop-filter: blur(3px); }
.modal-content { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); max-height: min(900px, 90vh); }
.modal-content > img { display: block; max-width: 100%; max-height: min(900px, 90vh); width: 100%; height: 100%; object-fit: contain; background: #080a0e; }
.modal-details { overflow-y: auto; padding: 28px 22px 22px; }
.modal-title-row { justify-content: space-between; }
.modal-title-row h2 { margin: 0; font-size: 1.45rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.modal-actions .button-secondary { font-size: .78rem; }
kbd { padding: 1px 4px; border: 1px solid #536071; border-radius: 3px; color: #b9c4cd; background: #18202d; font: .68rem ui-monospace, monospace; }
.modal-close { position: absolute; z-index: 2; top: -13px; right: -13px; width: 31px; height: 31px; border: 1px solid #536071; border-radius: 50%; color: var(--text); background: #263241; font-size: 1.35rem; line-height: 1; }

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar { overflow: visible; }
  .toolbar { align-items: flex-start; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sidebar, .workspace { padding: 20px 15px 30px; }
  .workspace-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .toast { max-width: 100%; }
  .library-command, .collection-heading, .collection-detail-heading { align-items: flex-start; flex-direction: column; }
  .library-status-copy, .collection-description { text-align: left; }
  .collection-browser { padding: 18px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { min-height: 180px; }
  .image-grid { grid-template-columns: 1fr; }
  .modal-content { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .modal-content > img { max-height: 60vh; }
  .modal-details { overflow: visible; }
}