:root { --ink: #10151f; --muted: #747d8c; --line: #e7eaf0; --paper: #f7f8fa; --blue: #3d62ff; --navy: #0b0f16; --sidebar: #10151e; --card: #fff; --shadow: 0 16px 40px rgba(18,28,45,.08); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', system-ui, sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell { min-height: 100vh; display: flex; }
.sidebar { width: 234px; flex: 0 0 234px; background: var(--sidebar); color: #aeb6c5; padding: 25px 15px 16px; display: flex; flex-direction: column; }
.brand { display:flex; align-items:center; gap: 10px; color: #f5f7fb; padding: 0 9px 32px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(145deg,#6c7dff,#314de4); display:grid; place-items:center; color:white; }
.brand-mark svg { width: 18px; }
.brand strong { display:block; font-family:'Space Grotesk'; font-size: 17px; letter-spacing:.01em; }.brand span { display:block; font-size: 8px; color:#697487; letter-spacing:.17em; margin-top:2px; }
.side-nav { display:grid; gap: 5px; }.nav-item { border:0; color:inherit; background:transparent; display:flex; align-items:center; gap:11px; height:42px; padding:0 12px; border-radius: 8px; text-align:left; font-size: 13px; }.nav-item:hover,.nav-item.active { background:#1b2433; color:#fff; }.nav-item b { margin-left:auto; font-size:11px; font-weight:500; color:#697487; }.side-bottom { margin-top:auto; display:grid; gap:18px; }.account { border-top:1px solid #252d39; padding:18px 7px 0; display:flex; align-items:center; gap:9px; position:relative; }.account strong { display:block; color:#ecf0f7; font-size:12px; }.account span:not(.online) { display:block; color:#738095; font-size:10px; margin-top:3px; }.online { width:7px; height:7px; background:#3ed19b; border-radius:50%; margin-left:auto; box-shadow:0 0 0 3px rgba(62,209,155,.12); }
.avatar { width:28px; height:28px; border-radius:50%; border:0; background:#dde4ff; color:#3850b6; display:grid; place-items:center; font-weight:700; font-size:12px; }.avatar-small { width:31px; height:31px; }
.main { flex: 1; min-width:0; }.topbar { height: 68px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:rgba(255,255,255,.72); }.top-actions { display:flex; align-items:center; gap:14px; }.connection { color:#687384; font-size:11px; display:flex; gap:7px; align-items:center; }.connection i { width:7px; height:7px; border-radius:50%; background:#28bd84; }.icon-btn { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; background:#fff; color:#6f7784; }.icon-btn:hover { border-color:#c6cedd; color:var(--ink); }.mobile-brand { display:none; align-items:center; gap:8px; font:600 13px 'Space Grotesk'; }.mobile-brand .brand-mark { width:28px; height:28px; }
.workspace { max-width: 1680px; margin:0 auto; padding: 31px 34px 42px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; }.eyebrow,.section-kicker { color:#8b93a1; letter-spacing:.14em; font-size:10px; font-weight:700; }.page-heading h1 { font:600 32px 'Space Grotesk'; margin:8px 0 7px; letter-spacing:-.02em; }.page-heading p { margin:0; color:var(--muted); font-size:13px; }.heading-meta { display:flex; align-items:center; gap:14px; }.pill { border:1px solid #dfe4ee; color:#576174; padding:6px 10px; border-radius:20px; font-size:11px; background:white; }.muted { color:#9aa2af; font-size:11px; }
.studio-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start; }.gallery-panel,.control-panel { background:var(--card); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); }.gallery-panel { min-height:745px; }.gallery-toolbar { min-height:62px; padding:13px 17px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }.view-tabs,.gallery-actions { display:flex; align-items:center; gap:8px; }.view-tab { display:flex; gap:6px; align-items:center; padding:7px 10px; color:#8b93a1; border:0; border-radius:6px; background:transparent; font-size:12px; }.view-tab.active { color:var(--ink); background:#f1f3f7; font-weight:600; }.search { display:flex; align-items:center; gap:5px; color:#9aa2af; border:1px solid var(--line); border-radius:6px; padding:0 8px; height:32px; }.search input { border:0; outline:0; width:120px; color:var(--ink); font-size:11px; }.gallery-actions select { border:1px solid var(--line); background:white; height:32px; border-radius:6px; color:#717989; font-size:11px; padding:0 8px; }.gallery-body { padding:18px; }.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.image-card { min-width:0; }.image-frame { aspect-ratio:1; position:relative; background:#f1f3f7; border-radius:8px; overflow:hidden; }.image-frame img { width:100%; height:100%; display:block; object-fit:cover; }.card-overlay { position:absolute; inset:auto 0 0; padding:28px 9px 9px; display:flex; justify-content:flex-end; gap:5px; background:linear-gradient(transparent,rgba(7,10,16,.7)); opacity:0; transition:opacity .2s; }.image-frame:hover .card-overlay { opacity:1; }.round-btn { width:27px; height:27px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(14,18,26,.65); }.round-btn svg { width:14px; }.card-meta { display:flex; justify-content:space-between; color:#89919e; font-size:10px; padding:9px 1px 4px; }.card-meta > div { display:flex; align-items:center; gap:5px; }.status-dot { width:6px; height:6px; border-radius:50%; background:#34c892; }.status-dot.processing { background:#6b7cff; }.status-dot.failed { background:#ef7777; }.image-card p { color:#4e5869; font-size:11px; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.card-foot { display:flex; justify-content:space-between; align-items:center; padding-top:8px; color:#a3a9b4; font-size:10px; }.delete-link { padding:2px; border:0; color:#adb3bd; background:none; }.delete-link svg { width:13px; }.empty-state { min-height:620px; display:grid; place-items:center; align-content:center; text-align:center; color:#96a0ad; }.empty-orb { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:#f0f2f6; color:#6a79dd; margin-bottom:16px; }.empty-orb svg { width:25px; height:25px; }.empty-state h3 { margin:0 0 7px; color:#566071; font:600 16px 'Space Grotesk'; }.empty-state p { font-size:12px; margin:0 0 18px; }.empty-suggestion { color:#6677e3; background:#eef0ff; border-radius:20px; padding:8px 13px; font-size:11px; }
.control-panel { position:sticky; top:18px; display:flex; flex-direction:column; max-height:calc(100vh - 36px); }.control-head { padding:18px 18px 15px; display:flex; align-items:flex-start; justify-content:space-between; }.control-head h2 { margin:6px 0 0; font:600 19px 'Space Grotesk'; }.control-head .icon-btn { width:28px; height:28px; border:0; background:#f5f6f8; }.mode-tabs { display:grid; grid-template-columns:1fr 1fr; margin:0 17px 2px; background:#f1f3f7; border-radius:7px; padding:3px; }.mode-tab { border:0; background:transparent; color:#8a93a1; padding:8px; border-radius:5px; font-size:11px; }.mode-tab.active { color:var(--ink); background:white; box-shadow:0 1px 3px rgba(19,29,48,.1); font-weight:600; }.form-scroll { padding:16px 18px 6px; overflow:auto; }.field-label { display:flex; flex-direction:column; gap:7px; color:#737d8d; font-size:10px; font-weight:600; margin-bottom:14px; }.field-label > span { align-self:flex-end; font-weight:400; color:#b2b8c1; margin-top:-18px; }.field-label textarea,.field-label input,.field-label select,textarea,select { width:100%; border:1px solid #e1e5eb; background:#fbfcfd; color:var(--ink); border-radius:6px; outline:none; }.field-label select { height:34px; padding:0 9px; font-size:11px; }.field-label textarea,textarea { resize:vertical; min-height:114px; padding:11px; line-height:1.55; font-size:12px; }.field-label textarea:focus,textarea:focus,.field-label select:focus { border-color:#96a3ff; box-shadow:0 0 0 3px rgba(92,108,239,.1); }.starter-row { display:flex; align-items:center; justify-content:space-between; margin:2px 0 8px; color:#7d8694; font-size:10px; font-weight:600; }.text-btn { border:0; background:none; color:#6274df; font-size:10px; }.starter-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:17px; }.starter { min-height:43px; border:1px solid #eceff3; border-radius:6px; background:#fbfcfd; text-align:left; padding:8px 9px; color:#566071; font-size:10px; display:flex; justify-content:space-between; align-items:flex-end; }.starter:hover { border-color:#aeb8ff; }.starter b { color:#9aa2b1; font-weight:400; }.starter-amber { border-left:3px solid #e6b25d; }.starter-violet { border-left:3px solid #9b82e5; }.starter-cyan { border-left:3px solid #5cc1c3; }.starter-rose { border-left:3px solid #e78ba0; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.segmented { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:#f4f5f7; padding:3px; border-radius:6px; }.segmented.three { grid-template-columns:repeat(3,1fr); }.segmented button { border:0; background:transparent; color:#8b94a1; border-radius:4px; padding:7px 3px; font-size:10px; }.segmented button.active { color:#3c4ca5; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08); font-weight:600; }.advanced { border-top:1px solid var(--line); margin-top:2px; padding-top:13px; }.advanced summary { color:#6d7786; font-size:11px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; }.advanced summary::-webkit-details-marker { display:none; }.advanced summary svg { width:13px; transition:transform .2s; }.advanced[open] summary svg { transform:rotate(180deg); }.cost { display:flex; flex-direction:column; gap:7px; color:#8a93a1; font-size:10px; padding-top:1px; }.cost strong { color:#4354c2; font-size:11px; }.submit-wrap { padding:13px 18px 17px; border-top:1px solid var(--line); }.generate-btn { border:0; width:100%; height:43px; border-radius:7px; background:linear-gradient(110deg,#4a62ee,#6874f4); color:white; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:600; box-shadow:0 8px 18px rgba(75,95,236,.22); }.generate-btn:hover { filter:brightness(1.05); }.generate-btn:disabled { opacity:.7; cursor:wait; }.generate-btn kbd { margin-left:auto; margin-right:11px; font-size:9px; font-weight:400; color:#dce1ff; background:rgba(255,255,255,.13); padding:3px 5px; border-radius:4px; }.privacy-note { margin:9px 0 0; color:#a1a8b3; font-size:9px; text-align:center; }.spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:white; border-radius:50%; display:inline-block; animation:spin .8s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}
.upload-box { border:1px dashed #cdd4e0; border-radius:7px; min-height:74px; display:flex; align-items:center; gap:10px; padding:12px; color:#8390a3; margin:10px 0 12px; cursor:pointer; }.upload-box:hover { border-color:#7184ef; background:#f7f8ff; }.upload-box svg { width:19px; color:#7181df; }.upload-box strong { display:block; color:#5d6777; font-size:11px; }.upload-box span { display:block; margin-top:4px; color:#a0a8b4; font-size:9px; }.ref-strip { display:flex; gap:7px; margin-bottom:13px; }.ref-thumb { width:50px; height:50px; position:relative; border-radius:5px; overflow:hidden; }.ref-thumb img { width:100%; height:100%; object-fit:cover; }.ref-thumb button { position:absolute; top:2px; right:2px; width:17px; height:17px; border:0; border-radius:50%; background:rgba(0,0,0,.58); color:white; display:grid; place-items:center; }.ref-thumb svg { width:11px; }
.failed-art { height:100%; display:grid; place-items:center; align-content:center; gap:6px; color:#d17878; font-size:11px; }.processing { height:100%; display:grid; place-items:center; align-content:center; gap:9px; color:#7884e8; font-size:11px; }.processing .spinner { border-color:#cdd3ff; border-top-color:#6578ed; width:23px; height:23px; border-width:3px; }.toast { position:fixed; right:24px; bottom:24px; z-index:20; background:#181e29; color:#fff; padding:11px 14px; border-radius:7px; font-size:12px; box-shadow:0 12px 30px rgba(0,0,0,.2); animation:rise .2s ease-out; }.toast-success { background:#12815d; }.toast-error { background:#bc4b55; }@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:1180px) { .studio-grid { grid-template-columns:minmax(0,1fr) 340px; }.gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) { .sidebar { position:fixed; z-index:10; inset:0 auto 0 0; transform:translateX(-100%); transition:transform .2s; }.sidebar.open { transform:none; }.mobile-brand { display:flex; }.topbar { padding:0 17px; }.workspace { padding:24px 16px 32px; }.page-heading { align-items:flex-start; gap:18px; flex-direction:column; }.page-heading h1 { font-size:28px; }.heading-meta { display:none; }.studio-grid { grid-template-columns:1fr; }.control-panel { position:relative; top:auto; max-height:none; order:-1; }.form-scroll { max-height:none; overflow:visible; }.gallery-panel { min-height:500px; }.empty-state { min-height:390px; } }
@media (max-width:520px) { .gallery-toolbar { align-items:flex-start; flex-direction:column; }.gallery-actions { width:100%; }.search { flex:1; }.search input { width:100%; }.gallery-actions select { flex:0 0 auto; }.gallery-grid { grid-template-columns:1fr 1fr; gap:10px; }.gallery-body { padding:12px; }.page-heading h1 { font-size:25px; }.field-grid { gap:8px; }.control-head { padding:15px 14px 12px; }.form-scroll,.submit-wrap { padding-left:14px; padding-right:14px; } }