:root { color-scheme:light; --ink:#173131; --muted:#61716d; --paper:#f4f1e8; --surface:#fffdf7; --line:#d8d8cd; --sea:#1f6965; --danger:#a13c35; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); font-size:14px; }
* { box-sizing:border-box; } [hidden] { display:none!important; } body { margin:0; } h1,h2,h3,p { margin:0; } h1 { font-size:24px; font-weight:650; letter-spacing:-.5px; } h2 { font-size:16px; font-weight:650; } h3 { font-size:15px; } p { line-height:1.5; } a { color:var(--sea); text-decoration:none; } a:hover { text-decoration:underline; }
button,input,select,textarea { font:inherit; } button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:default; opacity:.5; } :focus-visible { outline:3px solid #88b4af; outline-offset:3px; } button { border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); padding:8px 12px; min-height:36px; } button:hover:enabled { background:#e8ece3; } .primary { background:var(--sea); border-color:var(--sea); color:white; font-weight:600; } .primary:hover:enabled { background:#175450; } .secondary { background:var(--surface); } .text-button { background:transparent; border-color:transparent; color:var(--sea); padding:6px; } .danger { color:var(--danger); } .icon-button { font-size:22px; padding:0 10px; } .wide { width:100%; } .muted,small,.field-hint { color:var(--muted); } .field-hint { font-size:12px; line-height:1.5; margin:8px 0; } .form-error { color:var(--danger); font-size:13px; margin-top:10px; } .form-error:empty { display:none; }
label { display:block; font-weight:550; font-size:13px; margin:0 0 14px; } input,select,textarea { display:block; width:100%; padding:10px 11px; border:1px solid var(--line); background:#fffefa; color:var(--ink); border-radius:7px; margin-top:6px; min-width:0; } textarea { resize:vertical; line-height:1.55; min-height:120px; } input[type=checkbox] { display:inline-block; width:17px; height:17px; margin:0 8px 0 0; vertical-align:middle; accent-color:var(--sea); } input[type=range] { padding:0; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .panel { padding:20px; border:1px solid var(--line); background:var(--surface); border-radius:12px; } .brand { display:inline-flex; gap:5px; font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.6px; } .brand span { color:var(--sea); } .brand:hover { text-decoration:none; }
.auth-shell { min-height:100dvh; display:grid; place-items:center; padding:24px; } .auth-card { width:min(380px,100%); padding:28px; } .auth-card .brand { margin-bottom:28px; } .auth-card h1 { font-size:21px; margin-bottom:18px; } .auth-card .muted:empty { display:none; } .auth-card .muted { margin-bottom:14px; } #auth-toggle { width:100%; margin-top:16px; font-size:13px; }
.workspace { display:grid; grid-template-columns:205px minmax(0,1fr); min-height:100dvh; } .sidebar { position:sticky; top:0; height:100dvh; padding:26px 15px 16px; border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; } .sidebar .brand { margin:0 10px 28px; } nav { display:grid; gap:5px; } .nav-button { background:transparent; border-color:transparent; text-align:left; padding:10px 12px; font-weight:550; } .nav-button.active { background:#e1ece5; color:#15534f; } .sidebar-bottom { margin-top:auto; padding-top:28px; } .engine-summary { display:flex; gap:8px; align-items:center; padding:10px; font-size:12px; color:var(--muted); } .user-button { border-color:transparent; background:transparent; text-align:left; display:flex; gap:10px; align-items:center; width:100%; padding:10px; } .avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:7px; background:#e5e9dd; } .user-button strong,.user-button small { display:block; font-size:12px; } .user-button small { margin-top:3px; } .main { padding:30px; width:100%; max-width:1500px; } .page-header { margin-bottom:24px; } .studio-grid { display:grid; grid-template-columns:minmax(300px,440px) minmax(0,1fr); gap:20px; align-items:start; } .mode-switch { display:flex; padding:3px; background:#efeee5; border-radius:8px; margin-bottom:18px; } .mode-switch button { flex:1; background:transparent; border-color:transparent; } .mode-switch .selected { background:var(--surface); border-color:var(--line); font-weight:600; } .advanced { padding:12px 0; border-top:1px solid var(--line); } .advanced summary { cursor:pointer; font-size:13px; color:var(--muted); } .advanced[open] summary { margin-bottom:14px; } .advanced label:last-child { margin-bottom:0; } #generate-button { margin-top:8px; } .upload-box { border:1px dashed #96ada1; border-radius:8px; padding:14px; cursor:pointer; } .upload-box small { display:block; font-weight:400; font-size:11px; margin-top:4px; } .upload-box input { padding:0; border:0; font-size:12px; } .upload-preview { display:flex; gap:12px; align-items:center; margin:0 0 14px; } .upload-preview img { width:64px; height:64px; object-fit:contain; border-radius:6px; }
.panel-heading,.section-heading,.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; } .section-heading { margin:24px 0 14px; } .panel-heading { margin-bottom:16px; } .tiny-label { color:var(--muted); font-size:11px; } .latest-result { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; } .latest-result .image-open { width:100%; max-height:560px; } .latest-result img { width:100%; max-height:520px; object-fit:contain; display:block; border-radius:6px; } .image-open { border:0; padding:0; min-height:0; background:transparent!important; cursor:zoom-in; display:block; } .result-actions,.image-card-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .result-actions button,.result-actions a { font-size:13px; } .result-actions { align-self:stretch; } .engine-banner { display:flex; gap:10px; padding-top:16px; border-top:1px solid var(--line); margin-top:18px; } .engine-banner strong { font-size:12px; } .engine-banner p { font-size:12px; color:var(--muted); margin-top:3px; } .status-dot { width:7px; height:7px; min-width:7px; display:inline-block; border-radius:50%; background:#a5aca4; margin-top:4px; } .status-dot.ready { background:#3c8763; } .status-dot.busy { background:#b18436; } .status-dot.error { background:var(--danger); }
.jobs-list { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .job-row { display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--line); } .job-row:last-child { border-bottom:0; } .job-thumb { display:block; width:44px; height:44px; object-fit:cover; border-radius:5px; } span.job-thumb { display:grid; place-items:center; background:var(--paper); color:var(--muted); } .job-info { flex:1; min-width:0; } .job-info p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; } .job-info small { font-size:11px; overflow-wrap:anywhere; } .status-pill { font-size:11px; background:#eceee5; color:#4d6259; border-radius:5px; padding:5px 7px; white-space:nowrap; } .status-pill.failed { color:var(--danger); background:#f4e4df; } .status-pill.running { background:#f4edd9; } .empty-state { padding:36px 20px; text-align:center; color:var(--muted); font-size:13px; } .library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:16px; } .image-card { border:1px solid var(--line); background:var(--surface); border-radius:10px; overflow:hidden; } .image-card .image-open { width:100%; } .image-card img { width:100%; height:220px; object-fit:contain; display:block; background:#eeeee6; } .image-card-content { padding:12px; } .image-card p { font-size:12px; color:var(--muted); margin-bottom:8px; } .image-card-actions button,.image-card-actions a { font-size:12px; } .retained { display:block; color:var(--sea); margin-top:6px; }
#progress-label,.progress-label { display:flex; justify-content:space-between; font-size:12px; margin:8px 0; color:var(--muted); gap:8px; } progress { display:block; width:100%; height:8px; appearance:none; border:0; border-radius:9px; overflow:hidden; background:#e1e4d9; accent-color:var(--sea); margin:8px 0 12px; } progress::-webkit-progress-bar { background:#e1e4d9; } progress::-webkit-progress-value { background:var(--sea); } progress::-moz-progress-bar { background:var(--sea); } progress:indeterminate { background:linear-gradient(90deg,#e1e4d9,#8cb3a5,#e1e4d9); background-size:200%; animation:loading 2s linear infinite; } @keyframes loading { to { background-position:-200%; } } @media(prefers-reduced-motion:reduce) { progress:indeterminate { animation:none; } }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .admin-panel { margin-top:20px; } .admin-panel .section-heading { margin-top:0; } .admin-grid h2 { margin-bottom:18px; } .table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:13px; } th { text-align:left; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.5px; padding:12px 8px; } td { padding:12px 8px; border-top:1px solid var(--line); } .table-actions { display:flex; gap:6px; flex-wrap:wrap; } .table-actions button { font-size:11px; padding:5px 7px; min-height:30px; } .audit-entry { display:flex; gap:10px; justify-content:space-between; font-size:12px; padding:9px 0; border-bottom:1px solid var(--line); } .audit-entry time { color:var(--muted); white-space:nowrap; } .invite-display { margin-top:14px; padding:12px; background:#e7ede2; border-radius:7px; font-size:12px; } code { overflow-wrap:anywhere; } .invite-display code { display:block; font-size:17px; margin:8px 0; } .account-panel { max-width:500px; } .account-panel h2,.account-panel p { margin-bottom:20px; } hr { border:0; border-top:1px solid var(--line); margin:22px 0; } .filter-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:16px; } .filter-bar label { margin:0; flex:1 1 130px; } .filter-bar button { height:40px; } .lora-row { padding:12px 0; border-bottom:1px solid var(--line); } .lora-row label { margin-bottom:8px; } .lora-row .strength { display:flex; align-items:center; gap:8px; font-size:12px; } .strength input { width:80px; padding:6px; margin:0; } .lora-row .trigger { font-size:11px; word-break:break-word; } .catalog-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; } .catalog-card h3 { margin-bottom:8px; } .catalog-card p { font-size:12px; margin:8px 0; overflow-wrap:anywhere; } .import-panel { margin-bottom:20px; max-width:760px; } .import-panel h2 { margin-bottom:16px; } .grant-list { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:12px; margin-bottom:14px; } .grant-list label { margin:8px 0; }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); padding:24px; width:min(480px,calc(100% - 32px)); max-height:90dvh; overflow:auto; } dialog::backdrop { background:#13282480; } .dialog-heading { margin-bottom:20px; } .toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); border:1px solid var(--line); border-radius:9px; padding:12px 18px; background:var(--ink); color:white; font-size:13px; max-width:calc(100vw - 32px); z-index:30; box-shadow:0 4px 20px #0002; }
#image-viewer { width:calc(100vw - 32px); height:calc(100dvh - 32px); max-width:none; max-height:none; padding:0; overflow:hidden; } #image-viewer[open] { display:flex; flex-direction:column; } .viewer-toolbar { padding:10px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } #viewer-title { font-size:12px; white-space:nowrap; } .viewer-controls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .viewer-controls button,.viewer-controls a { font-size:12px; padding:7px 10px; } #viewer-zoom { min-width:36px; font-size:11px; text-align:center; } #viewer-viewport { flex:1; min-height:0; overflow:auto; background:#e8e9e1; touch-action:none; cursor:grab; } #viewer-viewport.dragging { cursor:grabbing; } #viewer-canvas { display:flex; align-items:center; justify-content:center; min-width:100%; min-height:100%; width:max-content; height:max-content; } #viewer-image { display:block; max-width:none; flex-shrink:0; user-select:none; } #viewer-meta { padding:10px 14px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:38px; }
@media(max-width:1100px) { .main { padding:24px; } .workspace { grid-template-columns:180px minmax(0,1fr); } .studio-grid { grid-template-columns:minmax(280px,390px) minmax(0,1fr); gap:14px; } .panel { padding:16px; } .viewer-toolbar { flex-wrap:wrap; } }
@media(max-width:850px) { .studio-grid { grid-template-columns:1fr; } .latest-result { min-height:220px; } .latest-result img { max-height:440px; } .admin-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .workspace { display:block; } .sidebar { position:static; height:auto; padding:16px; border-right:0; border-bottom:1px solid var(--line); } .sidebar .brand { margin:0 0 14px; font-size:20px; } nav { display:flex; gap:4px; flex-wrap:wrap; } .nav-button { font-size:12px; padding:7px 9px; min-height:34px; } .sidebar-bottom { padding:0; margin-top:10px; display:flex; align-items:center; justify-content:space-between; } .user-button { width:auto; padding:4px; } .user-button small,.avatar { display:none; } .engine-summary { padding:4px; font-size:11px; } .main { padding:20px 14px; } h1 { font-size:22px; } .page-header { margin-bottom:16px; } .panel { padding:15px; } .job-row { gap:8px; padding:12px 10px; flex-wrap:wrap; } .job-thumb { width:34px; height:34px; } .job-info { min-width:130px; } .job-row .text-button { padding:4px; font-size:12px; } .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .image-card img { height:150px; } .image-card-content { padding:9px; } .image-card-actions { gap:5px; } .image-card-actions a,.image-card-actions button { font-size:11px; } .image-card p { font-size:11px; } .audit-entry { flex-direction:column; gap:3px; } #image-viewer { width:100vw; height:100dvh; border:0; border-radius:0; } .viewer-toolbar { padding:8px; gap:6px; } .viewer-controls { gap:3px; justify-content:flex-start; } .viewer-controls button,.viewer-controls a { padding:5px 7px; } .filter-bar { gap:8px; } }