:root { color-scheme: dark; --bg:#080b12; --surface:#111722; --surface-2:#171f2d; --line:#273246; --text:#f4f7fb; --muted:#94a3b8; --accent:#8b5cf6; --accent-2:#22d3ee; --danger:#fb7185; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0%,#17213b 0,transparent 34rem),var(--bg); color:var(--text); }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem clamp(1rem,4vw,3rem); border-bottom:1px solid var(--line); background:rgba(8,11,18,.78); backdrop-filter:blur(18px); position:sticky; top:0; z-index:5; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(1.4rem,4vw,2rem); }
h2 { font-size:1.4rem; }
.eyebrow,.section-label { color:var(--accent-2); font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.shell { width:min(1100px,100%); margin:auto; padding:clamp(1.25rem,4vw,3rem); display:grid; gap:2rem; }
.workflow-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-top:.8rem; }
.workflow-card { min-height:145px; padding:1rem; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,var(--surface-2),var(--surface)); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; opacity:.6; }
.workflow-card.active { opacity:1; cursor:pointer; border-color:#51426f; }
.workflow-card.active:hover { transform:translateY(-2px); border-color:var(--accent); }
.workflow-card small,.muted { color:var(--muted); }
.workflow-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#26203a; color:#c4b5fd; }
.panel,.login-card { border:1px solid var(--line); background:rgba(17,23,34,.94); border-radius:22px; box-shadow:0 22px 60px rgba(0,0,0,.28); }
.panel { padding:clamp(1rem,4vw,2rem); }
.panel-heading,.top-actions { display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.stack { display:grid; gap:1rem; margin-top:1.5rem; }
label { display:grid; gap:.45rem; color:#cbd5e1; font-size:.88rem; font-weight:650; }
input,textarea,select { width:100%; border:1px solid var(--line); background:#090e17; color:var(--text); border-radius:12px; padding:.85rem; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.three-column { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.image-inputs { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.upload-zone { display:grid; align-content:start; gap:.65rem; min-height:180px; padding:1.2rem; border:1px dashed #46536b; border-radius:15px; text-align:center; }
.upload-zone span { color:var(--muted); font-weight:400; }
.source-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.source-actions .primary,.source-actions .ghost { display:grid; place-items:center; min-height:48px; padding:.7rem; }
.file-picker { cursor:pointer; color:var(--text); font-weight:650; }
.file-picker input { display:none; }
.preview { display:block; width:100%; max-height:280px; margin-top:.5rem; object-fit:contain; border-radius:12px; background:#05070c; }
.small-button { justify-self:center; border:1px solid var(--line); border-radius:9px; padding:.5rem .7rem; background:#182130; cursor:pointer; }
.preview-toggle { justify-self:start; }
.preset-panel { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:#0c121d; }
.preset-heading,.preset-heading > div { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
.preset-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.preset-button { min-height:48px; padding:.65rem .75rem; border:1px solid #51426f; border-radius:11px; background:#18152a; color:#ddd6fe; cursor:pointer; font-weight:700; }
.preset-button:hover { border-color:var(--accent); background:#211a3a; }
.angle-builder { display:grid; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:#0c121d; }
.angle-builder > div { display:grid; gap:.6rem; }
.angle-options { display:flex; flex-wrap:wrap; gap:.55rem; }
.angle-options button { padding:.65rem .8rem; border:1px solid var(--line); border-radius:999px; background:#151d2a; color:#cbd5e1; cursor:pointer; }
.angle-options button:hover { border-color:var(--accent); }
.angle-options button.selected { border-color:var(--accent-2); background:#12333a; color:#a5f3fc; box-shadow:0 0 0 1px rgba(34,211,238,.18); }
.preset-dialog { width:min(780px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); padding:1.25rem; overflow:auto; border:1px solid var(--line); border-radius:20px; background:#0b1019; color:var(--text); }
.preset-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.preset-dialog form { display:grid; gap:1rem; }
.dialog-close-inline { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:#17202e; color:var(--text); font-size:1.5rem; cursor:pointer; }
.preset-mode-select { max-width:240px; }
.preset-editor { display:grid; gap:1rem; }
.preset-editor-row { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,2fr); gap:.8rem; padding:1rem; border:1px solid var(--line); border-radius:13px; background:#0c121d; }
.preset-editor-row textarea { min-height:118px; resize:vertical; }
.source-picker-dialog { width:min(1000px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); padding:1.25rem; overflow:auto; border:1px solid var(--line); border-radius:20px; background:#0b1019; color:var(--text); }
.source-picker-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.source-picker-filters { display:grid; grid-template-columns:2fr 1fr auto; align-items:end; gap:.8rem; margin:1.25rem 0; }
.source-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.75rem; }
.source-picker-card { overflow:hidden; padding:0; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--text); cursor:pointer; text-align:left; }
.source-picker-card:hover { border-color:var(--accent-2); transform:translateY(-2px); }
.source-picker-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#05070c; }
.source-picker-card span { display:grid; gap:.15rem; padding:.65rem; }
.source-picker-card small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.settings-entry .workflow-icon { background:#2a2537; color:#c4b5fd; }
.settings-intro { margin-top:.35rem; max-width:680px; line-height:1.45; }
.settings-form { display:grid; gap:1rem; margin-top:1.5rem; }
.settings-section { display:grid; gap:1rem; padding:1.1rem; border:1px solid var(--line); border-radius:16px; background:#0c121d; }
.settings-section h3 { margin-top:.25rem; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.settings-preset-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:.2rem; }
.settings-preset-row > div { display:grid; gap:.25rem; }
.success { color:#86efac; }
.advanced { padding:1rem; border:1px solid var(--line); border-radius:14px; background:#0c121d; }
.advanced summary { cursor:pointer; font-weight:750; }
.advanced-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1rem; }
.checkbox-label { display:flex; align-items:center; align-self:end; min-height:48px; flex-direction:row; }
.checkbox-label input { width:auto; }
.primary,.ghost { border:0; border-radius:12px; padding:.85rem 1rem; cursor:pointer; }
.primary { background:linear-gradient(135deg,var(--accent),#6d28d9); font-weight:800; }
.primary:disabled { opacity:.45; cursor:not-allowed; }
.ghost { background:#17202e; }
.status,.badge { padding:.45rem .65rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.75rem; }
.status.online { color:#86efac; border-color:#166534; }.status.offline,.error { color:var(--danger); }
.badge.ready { color:#86efac; border-color:#166534; }
.result-panel { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:16px; background:#0b111b; }
.progress-line,.result-actions { display:flex; justify-content:space-between; align-items:center; gap:.8rem; }
.progress-track { height:10px; margin-top:.8rem; overflow:hidden; border-radius:999px; background:#202a3a; }
#progress-bar { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s ease; }
.queue-list { display:grid; gap:.7rem; margin-top:1rem; }
.queue-row { display:grid; gap:.55rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:#0d1420; }
.queue-row-heading { display:flex; justify-content:space-between; align-items:center; gap:.7rem; }
.queue-row-heading > div { display:grid; gap:.15rem; }
.queue-row-heading small { color:var(--muted); }
.queue-status { color:#cbd5e1; font-size:.82rem; text-align:right; }
.queue-progress { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s ease; }
.queue-row.completed { border-color:#166534; }
.queue-row.completed .queue-status { color:#86efac; }
.queue-row.failed { border-color:#7f1d1d; }
.queue-row.failed .queue-status { color:var(--danger); }
.queue-result { justify-self:start; }
.result-image { display:block; width:100%; max-height:75vh; margin:1rem auto; object-fit:contain; border-radius:14px; background:#05070c; }
.result-actions { justify-content:flex-start; }
.link-button { display:inline-block; text-decoration:none; }
.gallery-entry .workflow-icon { background:#12333a; color:#67e8f9; }
.gallery-heading { align-items:flex-start; }
.gallery-filters { display:grid; grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(180px,1fr) auto; align-items:end; gap:.8rem; margin:1.5rem 0; }
.filter-menu { position:relative; min-height:48px; border:1px solid var(--line); border-radius:12px; background:#090e17; }
.filter-menu summary { padding:.85rem; cursor:pointer; color:#cbd5e1; font-size:.88rem; font-weight:650; list-style:none; }
.filter-menu summary::-webkit-details-marker { display:none; }
.filter-options { position:absolute; top:calc(100% + .4rem); left:0; right:0; z-index:8; display:grid; gap:.6rem; min-width:220px; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:#111722; box-shadow:0 16px 35px rgba(0,0,0,.45); }
.filter-option { display:flex; flex-direction:row; align-items:center; gap:.6rem; }
.filter-option input { width:auto; }
.gallery-favorite-filter { align-self:center; white-space:nowrap; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.85rem; }
.gallery-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.gallery-card.selected { border-color:var(--accent-2); box-shadow:0 0 0 2px rgba(34,211,238,.22); }
.gallery-image-button { position:relative; display:block; width:100%; aspect-ratio:1/1; padding:0; border:0; background:#05070c; cursor:pointer; }
.gallery-image-button img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-check { position:absolute; top:.65rem; left:.65rem; display:grid; place-items:center; width:30px; height:30px; border:2px solid #e2e8f0; border-radius:50%; background:rgba(8,11,18,.8); color:#67e8f9; font-weight:900; }
.gallery-card.selected .gallery-check { background:#155e75; }
.gallery-card-info { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.75rem; }
.gallery-card-info div { min-width:0; display:grid; gap:.15rem; }
.gallery-card-info strong,.gallery-card-info small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-card-info small { color:var(--muted); }
.favorite-button { border:0; background:transparent; color:#94a3b8; font-size:1.45rem; cursor:pointer; }
.favorite-button.active,#dialog-favorite.active { color:#facc15; }
.empty-state { min-height:220px; place-content:center; justify-items:center; gap:.5rem; color:var(--muted); text-align:center; }
.empty-state:not([hidden]) { display:grid; }
.load-more { display:block; margin:1rem auto 0; }
.gallery-dialog { width:min(1050px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); padding:0; overflow:auto; border:1px solid var(--line); border-radius:20px; background:#0b1019; color:var(--text); }
.gallery-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.dialog-close { position:sticky; top:.7rem; z-index:3; float:right; margin:.7rem .7rem -3.4rem 0; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:rgba(8,11,18,.88); color:var(--text); font-size:1.6rem; cursor:pointer; }
.dialog-image { display:block; width:100%; max-height:70vh; object-fit:contain; background:#03050a; }
.dialog-content { display:grid; gap:1.25rem; padding:1.25rem; }
.prompt-text { margin-top:.4rem; line-height:1.55; white-space:pre-wrap; }
.settings-text { overflow:auto; color:#cbd5e1; }
.dialog-actions { flex-wrap:wrap; }
.danger-button { border:1px solid #7f1d1d; border-radius:12px; padding:.85rem 1rem; background:#3f121b; color:#fecdd3; cursor:pointer; }
.danger-button:disabled { opacity:.45; cursor:not-allowed; }
.selection-bar { position:fixed; left:50%; bottom:1rem; z-index:20; transform:translateX(-50%); display:flex; align-items:center; gap:.6rem; width:min(680px,calc(100% - 2rem)); padding:.7rem; border:1px solid #3b4a63; border-radius:16px; background:rgba(10,15,24,.96); box-shadow:0 20px 50px rgba(0,0,0,.5); backdrop-filter:blur(16px); }
.selection-bar strong { margin-right:auto; padding-left:.4rem; }
body.selection-active { padding-bottom:6rem; }
.login-page { display:grid; place-items:center; padding:1rem; }
.login-card { width:min(420px,100%); padding:clamp(1.5rem,6vw,2.5rem); }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; margin-bottom:1.25rem; border-radius:16px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-weight:900; }
.login-card h1 { margin:.3rem 0; font-size:2rem; }
@media (max-width:760px) { .gallery-filters { grid-template-columns:1fr 1fr; }.gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.preset-buttons { grid-template-columns:1fr 1fr; }.source-picker-filters,.settings-grid { grid-template-columns:1fr 1fr; }.selection-bar { flex-wrap:wrap; }.selection-bar strong { flex:1 0 100%; }.dialog-actions > * { flex:1; text-align:center; } }
@media (max-width:640px) { .topbar { align-items:flex-start; }.top-actions { flex-direction:column; align-items:flex-end; }.workflow-grid { grid-template-columns:1fr 1fr; }.workflow-card { min-height:125px; }.two-column,.three-column,.image-inputs,.advanced-grid,.preset-editor-row,.source-picker-filters,.settings-grid { grid-template-columns:1fr; }.source-actions { grid-template-columns:1fr; }.settings-preset-row { align-items:flex-start; flex-direction:column; }.status { max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.gallery-dialog,.preset-dialog,.source-picker-dialog { width:100%; max-height:100%; height:100%; border:0; border-radius:0; }.gallery-filters { grid-template-columns:1fr; }.gallery-favorite-filter { min-height:auto; }.gallery-card-info { padding:.6rem; }.gallery-card-info strong { font-size:.8rem; }.queue-row-heading { align-items:flex-start; }.queue-status { max-width:145px; } }