:root{--bg: #04102a;--surface: #0c2742;--surface-2: #123150;--surface-3: #19395c;--border: rgba(173, 201, 230, .12);--border-strong: rgba(173, 201, 230, .22);--text: #eaf1fb;--text-2: #a8bbd6;--text-3: #6e86a6;--text-disabled: #46597a;--ink: #ffefae;--ink-tint: rgba(255, 239, 174, .14);--primary: #fff200;--primary-ink: #0a1024;--primary-tint: rgba(255, 242, 0, .14);--accent: #f99d1b;--accent-tint: rgba(249, 157, 27, .16);--secondary: #5a82b3;--success: #00b49b;--warn: #fcb315;--danger: #f58e84;--focus: #f99d1b;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.5rem;--sp-6: 2rem;--sp-7: 2.5rem;--sp-8: 4rem;--fs-caption: .75rem;--fs-sm: .8125rem;--fs-base: .875rem;--fs-md: 1rem;--fs-h3: 1.25rem;--fs-h2: 1.5rem;--fs-h1: 2rem;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--radius: 12px;--radius-sm: 8px;--shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 24px -8px rgba(0, 0, 0, .5);--sidebar-w: 240px;--topbar-h: 52px;--dur-fast: .12s;--dur-menu: .2s;--dur-modal: .3s;--ease-standard: cubic-bezier(.2, 0, 0, 1);--ease-pop: cubic-bezier(.175, .885, .32, 1.1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,sans-serif;background:var(--bg);color:var(--text);font-size:var(--fs-base);line-height:var(--lh-body, 1.55);-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast)}a:hover{color:var(--ink)}h1,h2,h3,h4{color:var(--ink);margin:0 0 var(--sp-2);line-height:1.2;font-weight:var(--fw-semibold)}h1{font-size:var(--fs-h1);letter-spacing:-.03em}h2{font-size:var(--fs-h2);letter-spacing:-.02em}h3{font-size:var(--fs-h3);letter-spacing:-.01em}.muted{color:var(--text-2)}.dim{color:var(--text-3)}.error{color:var(--danger)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4)}.card.hoverable{transition:transform var(--dur-fast) var(--ease-standard),border-color var(--dur-fast),background var(--dur-fast);cursor:pointer}.card.hoverable:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface-2)}input,select,textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);outline:none;width:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}input::placeholder,textarea::placeholder{color:var(--text-3)}input:focus,select:focus,textarea:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px var(--accent-tint)}textarea{resize:vertical;min-height:120px;line-height:1.55}label{color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);display:block;margin-bottom:var(--sp-1)}.btn{font:inherit;font-weight:var(--fw-medium);font-size:var(--fs-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:.5rem .9rem;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.4;transition:filter var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}.btn:disabled{opacity:.5;cursor:default}.btn:not(:disabled):active{transform:translateY(1px)}.btn-primary{background:var(--primary);color:var(--primary-ink);font-weight:var(--fw-semibold)}.btn-primary:not(:disabled):hover{filter:brightness(1.06)}.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}.btn-secondary:not(:disabled):hover{background:var(--surface-2)}.btn-ghost{background:transparent;color:var(--text-2)}.btn-ghost:not(:disabled):hover{background:var(--surface-2);color:var(--text)}.btn-danger{background:transparent;color:var(--danger);border-color:#f58e8466}.btn-danger:not(:disabled):hover{background:#f58e841f}.btn-sm{padding:.3rem .6rem;font-size:var(--fs-sm)}.chip{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}.chip.accent{color:var(--accent);border-color:#f99d1b66;background:var(--accent-tint)}.chip.success{color:var(--success);border-color:#00b49b66}.chip.warn{color:var(--warn);border-color:#fcb31566}.chip.lemon{color:var(--ink);background:var(--ink-tint);border-color:#ffefae4d}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.row{display:flex;gap:var(--sp-2);align-items:center}.row.wrap{flex-wrap:wrap}.spread{justify-content:space-between}.col{display:flex;flex-direction:column;gap:var(--sp-3)}.grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.section-title{color:var(--text-2);font-size:var(--fs-caption);letter-spacing:.07em;text-transform:uppercase;font-weight:var(--fw-medium)}.shell{display:flex;height:100%}.sidebar{width:var(--sidebar-w);flex-shrink:0;height:100%;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--sp-3);gap:var(--sp-1);overflow-y:auto}.shell-main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}.topbar{height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);border-bottom:1px solid var(--border);background:#04102ab8;backdrop-filter:blur(8px)}.content{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-5)}.content-narrow{max-width:1120px;margin:0 auto}.brand-mark{font-weight:var(--fw-semibold);color:var(--ink);font-size:var(--fs-md);letter-spacing:-.01em}.nav-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);color:var(--text-2);font-weight:var(--fw-medium);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{color:var(--ink);background:var(--ink-tint)}.brand-switch{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-weight:var(--fw-medium);transition:border-color var(--dur-fast)}.brand-switch:hover{border-color:var(--border-strong)}.popover{position:absolute;z-index:50;margin-top:var(--sp-1);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-1);min-width:220px;animation:pop var(--dur-menu) var(--ease-standard)}@keyframes pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.workspace{display:grid;grid-template-columns:minmax(320px,360px) 1fr;gap:var(--sp-6);align-items:start}.composer{position:sticky;top:0}.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--sp-5)}@media (max-width: 920px){.workspace{grid-template-columns:1fr}.composer{position:static}}.media-frame{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);border:1px solid var(--border);aspect-ratio:1 / 1;transition:transform var(--dur-fast) var(--ease-standard),border-color var(--dur-fast)}.media-frame:hover{transform:translateY(-2px);border-color:var(--border-strong)}.gen-media{width:100%;height:100%;display:block;object-fit:cover;background:var(--surface-2)}.media-frame audio{width:100%}.media-frame .overlay{position:absolute;inset:0;display:flex;gap:var(--sp-1);align-items:flex-end;justify-content:flex-end;padding:var(--sp-2);opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);background:linear-gradient(to top,rgba(4,16,42,.72),transparent 55%)}.media-frame:hover .overlay,.media-frame:focus-within .overlay{opacity:1}.icon-btn{width:32px;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);border:1px solid var(--border-strong);font-size:.85rem;text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast)}.icon-btn:hover{background:var(--surface-2);border-color:var(--accent);color:var(--ink)}.masonry{columns:4 248px;column-gap:var(--sp-5)}.masonry>*{break-inside:avoid;margin-bottom:var(--sp-5)}.skeleton{border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;aspect-ratio:1;display:grid;place-items:center;color:var(--accent);font-size:var(--fs-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);margin:var(--sp-5) 0}.tab{padding:var(--sp-2) var(--sp-3);color:var(--text-2);cursor:pointer;font-weight:var(--fw-medium);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast),border-color var(--dur-fast)}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--primary)}.toast-host{position:fixed;right:var(--sp-4);bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:100}.toast{background:var(--surface-3);border:1px solid var(--border-strong);border-left-width:3px;border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);box-shadow:var(--shadow);color:var(--text);max-width:340px;font-size:var(--fs-sm);animation:pop var(--dur-menu) var(--ease-standard)}.toast.error{border-left-color:var(--danger)}.toast.success{border-left-color:var(--success)}.toast.info{border-left-color:var(--secondary)}.swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.12);display:inline-block}.empty{text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--text-2);border:1px dashed var(--border);border-radius:var(--radius)}.empty .big{font-size:2rem;margin-bottom:var(--sp-2)}.spinner{width:16px;height:16px;border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.kbd{font-family:ui-monospace,monospace;font-size:var(--fs-caption);background:var(--surface-3);border:1px solid var(--border);border-radius:4px;padding:.05rem .35rem;color:var(--text-2)}.thumb{object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border)}:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--focus);border-radius:inherit}@media (max-width: 860px){.sidebar{position:fixed;z-index:60;transform:translate(-100%);transition:transform var(--dur-menu)}.sidebar.open{transform:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation:none!important}.card.hoverable:hover,.media-frame:hover{transform:none}}