:root {
  color-scheme: dark;
  --ink: #0b0a10;
  --ink-soft: #12111a;
  --panel: rgba(24, 21, 32, .74);
  --line: rgba(245, 239, 226, .11);
  --line-bright: rgba(245, 239, 226, .2);
  --paper: #f2eee6;
  --muted: #a09aa9;
  --muted-deep: #6c6875;
  --coral: #ff785f;
  --peach: #ffba82;
  --lilac: #c4a9ff;
  --mint: #9cdec9;
  --danger: #ff7180;
  --success: #9cdec9;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; min-height: 100vh; overflow: hidden; color: var(--paper);
  background: radial-gradient(ellipse 60% 42% at 87% -4%, rgba(119, 71, 160, .21), transparent 70%), radial-gradient(ellipse 46% 55% at 45% 110%, rgba(235, 89, 76, .1), transparent 72%), var(--ink);
  font-family: Inter, "Avenir Next", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; letter-spacing: -.01em;
}
body::before { position: fixed; inset: 0; z-index: -3; pointer-events: none; content: ""; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.023) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.023) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(1px); opacity: .55; }
.ambient-one { width: 42vw; height: 42vw; top: 8vh; right: 7vw; background: radial-gradient(circle, rgba(193, 133, 255, .075), transparent 67%); }
.ambient-two { width: 30vw; height: 30vw; bottom: -14vw; left: 25vw; background: radial-gradient(circle, rgba(255, 116, 91, .09), transparent 68%); }
.grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.app-shell { display: grid; grid-template-columns: 294px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: relative; z-index: 1; height: 100vh; padding: 29px 22px 26px; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 14, 22, .95), rgba(12, 11, 16, .78)); backdrop-filter: blur(22px); }
.sidebar::after { position: absolute; right: -1px; bottom: 0; width: 1px; height: 32%; content: ""; background: linear-gradient(transparent, var(--coral), transparent); opacity: .7; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 29px; }
.brand-mark, .assistant-avatar { display: grid; place-items: center; color: #1b1010; background: linear-gradient(145deg, var(--coral), var(--peach)); box-shadow: 0 8px 32px rgba(255, 107, 61, .2); }
.brand-mark { width: 43px; height: 43px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px 15px 15px 5px; transform: rotate(-7deg); }
.brand-mark span { font-size: 22px; transform: rotate(7deg); }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 13px; letter-spacing: .08em; }
.brand span { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .02em; }
.side-nav { display: grid; gap: 5px; margin: 0 -8px 27px; padding: 0 8px 22px; border-bottom: 1px solid var(--line); }
.side-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); font-size: 12px; transition: .2s ease; }
.side-nav-item small { margin-left: auto; color: var(--muted-deep); font-size: 9px; letter-spacing: .08em; }
.side-nav-item.active { color: var(--paper); border-color: rgba(255, 120, 95, .18); background: linear-gradient(90deg, rgba(255,120,95,.12), transparent); }
.side-nav-item.active small { color: var(--coral); }
.side-nav-item:not(.active):hover { color: var(--paper); background: rgba(255,255,255,.035); }
.nav-icon { width: 16px; color: var(--coral); font-size: 15px; text-align: center; }
.eyebrow { color: var(--peach); font-size: 9px; font-weight: 750; letter-spacing: .2em; }
.card-heading { display: flex; align-items: center; justify-content: space-between; }
.sidebar-card { position: relative; padding: 17px 17px 16px; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.014)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.sidebar-card::before { position: absolute; top: -32px; right: -25px; width: 90px; height: 90px; content: ""; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.live-pill { padding: 3px 6px; border: 1px solid rgba(156,222,201,.22); border-radius: 4px; color: var(--mint); font-size: 8px; letter-spacing: .1em; }
.status-line { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.status-line strong, .status-line span { display: block; }
.status-line strong { font-size: 12px; font-weight: 650; }
.status-line span:not(.status-dot) { margin-top: 4px; color: var(--muted); font-size: 10px; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.status-dot.checking { background: #f7c95e; box-shadow: 0 0 14px #f7c95e; }
.status-dot.online { background: var(--success); box-shadow: 0 0 14px var(--success); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 14px var(--danger); }
.engine-name { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.engine-name > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(196,169,255,.38); border-radius: 9px; color: var(--lilac); font-family: Georgia, serif; font-size: 17px; font-style: italic; }
.sidebar-card h3 { margin: 0; font-size: 13px; font-weight: 650; }
.engine-name small { display: block; margin-top: 3px; color: var(--muted-deep); font-size: 8px; letter-spacing: .1em; }
.sidebar-card p, .guide li { color: var(--muted); font-size: 10px; line-height: 1.7; }
.sidebar-card p { margin: 11px 0 12px; }
.engine-meter { display: flex; align-items: center; gap: 8px; color: var(--muted-deep); font-size: 8px; letter-spacing: .08em; }
.engine-meter i { display: block; width: 54px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--coral) 70%, rgba(255,255,255,.11) 70%); }
.recipe-count { color: var(--muted-deep); font-size: 9px; letter-spacing: .08em; }
.guide ol { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.guide li { display: flex; align-items: center; gap: 10px; }
.guide li b { min-width: 17px; color: var(--coral); font-size: 9px; font-weight: 500; }
.guide li span { color: #c5c0c9; }
.sidebar-footer { position: absolute; right: 22px; bottom: 26px; left: 22px; color: #65616e; font-size: 9px; letter-spacing: .02em; }
.sidebar-footer span:last-child { float: right; color: #484550; }
.footer-dot { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }

.workspace { position: relative; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; padding: 31px 48px 24px; border-bottom: 1px solid var(--line); }
.top-kicker { display: flex; align-items: center; gap: 7px; color: var(--muted); letter-spacing: .22em; }
.top-kicker span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 9px var(--coral); }
.topbar h1 { margin: 9px 0 5px; color: var(--paper); font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 3.3vw, 42px); font-weight: 400; letter-spacing: -.065em; }
.topbar h1 em { color: var(--peach); font-style: italic; }
.topbar-subtitle { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.topbar-actions { display: flex; align-items: center; gap: 16px; padding-top: 5px; }
.workspace-id { color: var(--muted-deep); font-size: 9px; letter-spacing: .12em; }
.workspace-id span { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 9px var(--lilac); }
.ghost-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 10px; transition: .2s ease; }
.ghost-button span { color: var(--coral); font-size: 15px; }
.ghost-button:hover { color: var(--paper); border-color: var(--line-bright); background: rgba(255,255,255,.06); }
.chat { overflow-y: auto; padding: 30px 48px 190px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.welcome-card { position: relative; max-width: 800px; margin: 3vh auto 0; padding: 45px 36px 32px; overflow: hidden; text-align: center; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: radial-gradient(circle at 50% 20%, rgba(196,169,255,.095), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); box-shadow: 0 30px 100px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.welcome-card::before, .welcome-card::after { position: absolute; pointer-events: none; content: ""; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; }
.welcome-card::before { width: 410px; height: 410px; top: -190px; left: calc(50% - 205px); }
.welcome-card::after { width: 540px; height: 540px; top: -255px; left: calc(50% - 270px); border-color: rgba(255,255,255,.03); }
.welcome-orbit { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 22px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.welcome-orbit::before { position: absolute; inset: 7px; content: ""; border: 1px dashed rgba(255,186,130,.3); border-radius: 50%; }
.welcome-orbit i { position: absolute; top: -3px; left: 28px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 15px var(--coral); }
.welcome-orbit b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--peach); font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.welcome-orbit span { position: absolute; right: 4px; bottom: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 11px var(--lilac); }
.welcome-kicker { position: relative; z-index: 1; color: var(--muted); font-size: 9px; letter-spacing: .29em; }
.welcome-card h2 { position: relative; z-index: 1; margin: 13px 0 9px; color: var(--paper); font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3.2vw, 38px); font-weight: 400; letter-spacing: -.055em; }
.welcome-card h2 span { color: var(--coral); }
.welcome-card > p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.visual-index { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 25px; color: var(--muted-deep); font-size: 8px; letter-spacing: .16em; }
.visual-index span:first-child { color: var(--coral); }
.visual-index i { width: 48px; height: 1px; background: linear-gradient(90deg, var(--coral), var(--lilac)); }
.suggestions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 19px; }
.suggestion { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #d9d4de; background: rgba(10,9,15,.42); font-size: 10px; transition: .2s ease; }
.suggestion span { color: var(--peach); font-size: 11px; }
.suggestion:hover { border-color: rgba(255,120,95,.55); color: white; background: rgba(255,120,95,.1); transform: translateY(-2px); }
.message { max-width: 900px; margin: 0 auto 26px; animation: message-in .35s ease both; }
@keyframes message-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.user-message { padding: 21px 23px; border: 1px solid var(--line); border-radius: 17px 17px 5px 17px; background: rgba(31, 27, 39, .78); }
.message-label { color: var(--peach); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.message-body { margin-top: 9px; color: #e6e1e7; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-message { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: rgba(19,17,25,.9); box-shadow: 0 18px 50px rgba(0,0,0,.15); }
.assistant-head { display: flex; align-items: center; gap: 11px; padding: 16px 19px; border-bottom: 1px solid var(--line); }
.assistant-avatar { width: 31px; height: 31px; border-radius: 10px 10px 10px 4px; font-family: Georgia, serif; font-size: 17px; }
.assistant-head strong, .assistant-head span { display: block; }
.assistant-head strong { font-size: 12px; font-weight: 650; }
.task-status { margin-top: 3px; color: var(--muted); font-size: 10px; }
.elapsed { margin-left: auto; color: var(--muted-deep); font-size: 10px; font-variant-numeric: tabular-nums; }
.generation-stage { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 17px; color: var(--muted); font-size: 11px; }
.generation-stage.error { min-height: 150px; padding: 30px; color: var(--danger); text-align: center; }
.loader-orbit { position: relative; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; animation: spin 1.4s linear infinite; }
.loader-orbit::before { position: absolute; inset: 7px; content: ""; border: 1px dashed rgba(255,186,130,.25); border-radius: 50%; }
.loader-orbit i { position: absolute; top: 2px; left: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px var(--coral); }
@keyframes spin { to { transform: rotate(360deg); } }
.result-grid { display: grid; gap: 12px; }
.result-card { position: relative; overflow: hidden; background: #08090c; }
.result-card img { display: block; width: 100%; max-height: 76vh; object-fit: contain; }
.download-link { position: absolute; right: 14px; bottom: 14px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: white; background: rgba(10,11,15,.78); backdrop-filter: blur(12px); font-size: 11px; text-decoration: none; }
.download-link:hover { border-color: var(--coral); }
.result-meta { display: flex; gap: 18px; padding: 13px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.composer-wrap { position: fixed; right: 0; bottom: 0; left: 294px; z-index: 2; padding: 12px 48px 20px; background: linear-gradient(transparent, rgba(11,10,16,.94) 17%, var(--ink) 48%); }
.settings-row { display: flex; gap: 7px; max-width: 900px; margin: 0 auto 8px; }
.settings-row label { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(24,21,32,.86); font-size: 10px; }
.settings-row select, .settings-row input { max-width: 100px; border: 0; outline: 0; color: #e8e5e8; background: transparent; font-size: 10px; }
.settings-row option { background: #181520; }
.seed-label input { width: 75px; }
.composer { max-width: 900px; margin: auto; padding: 15px 14px 10px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; background: rgba(25,22,33,.9); box-shadow: 0 20px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(18px); }
.composer:focus-within { border-color: rgba(255,120,95,.62); box-shadow: 0 18px 65px rgba(255,107,61,.11), inset 0 1px 0 rgba(255,255,255,.07); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; color: var(--paper); background: transparent; font-size: 13px; line-height: 1.6; }
.composer textarea::placeholder { color: #706b78; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.composer-actions > span { color: #65606e; font-size: 9px; }
.generate-button { display: flex; align-items: center; gap: 12px; padding: 10px 13px 10px 16px; border: 0; border-radius: 11px; color: #170d08; background: linear-gradient(135deg, var(--coral), var(--peach)); font-size: 11px; font-weight: 800; box-shadow: 0 7px 22px rgba(255,120,95,.18); transition: .2s ease; }
.generate-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,120,95,.28); }
.generate-button:disabled { opacity: .45; cursor: not-allowed; }
.generate-button b { font-size: 17px; }
.hint { max-width: 900px; margin: 7px auto 0; color: #5f5a67; text-align: center; font-size: 9px; }
.hint span { color: var(--muted); }
.hint i { margin: 0 5px; color: #3f3b47; font-style: normal; }

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .composer-wrap { left: 250px; }
  .topbar, .chat { padding-right: 28px; padding-left: 28px; }
  .composer-wrap { padding-right: 28px; padding-left: 28px; }
  .workspace-id { display: none; }
}
@media (max-width: 720px) {
  body { overflow: auto; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .workspace { height: 100dvh; min-height: 650px; }
  .topbar { padding: 22px 17px 18px; }
  .topbar h1 { font-size: 30px; }
  .topbar-subtitle { font-size: 10px; }
  .topbar-actions { padding-top: 0; }
  .topbar-actions .ghost-button { padding: 8px; font-size: 0; }
  .topbar-actions .ghost-button span { font-size: 17px; }
  .chat { padding: 22px 15px 190px; }
  .welcome-card { margin-top: 1vh; padding: 33px 16px 24px; border-radius: 21px; }
  .welcome-card > p { font-size: 11px; }
  .composer-wrap { left: 0; padding: 10px 14px 15px; }
  .settings-row { overflow-x: auto; margin-bottom: 7px; }
  .settings-row label { flex: 0 0 auto; }
  .composer { padding-left: 13px; }
  .suggestion { font-size: 9px; }
  .result-meta { gap: 10px; flex-wrap: wrap; }
}