:root {
  color-scheme: dark;
  --bg: #0d0d0e;
  --surface: #141416;
  --surface-raised: #1a1a1c;
  --surface-hover: #232326;
  --border: #2a2a2d;
  --border-soft: #222225;
  --text: #f5f5f3;
  --muted: #97979b;
  --subtle: #707074;
  --gold: #cafa46;
  --gold-light: #e5ff8a;
  --green: #b5cb88;
  --danger: #e38d7a;
  --sidebar-width: 236px;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { min-width: 360px; min-height: 100vh; margin: 0; background: var(--bg); }
body:not(.ready) .app-shell { visibility: hidden; }
button, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #d4b181; outline-offset: 2px; }
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  z-index: 5;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 24px 15px 13px;
  border-right: 1px solid var(--border-soft);
  background: #121211;
}
.brand { display: flex; align-items: center; width: fit-content; margin: 1px 0 29px 7px; color: var(--text); font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.09em; text-decoration: none; }
.brand-dot { color: var(--gold); }
.brand-mark { display: grid; width: 23px; height: 23px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; margin-right: 10px; transform: rotate(-13deg); }
.brand-mark i { display: block; border: 1.4px solid var(--gold); border-radius: 2px; }
.brand-mark i:nth-child(2) { transform: translateY(2px); }
.brand-mark i:nth-child(3) { transform: translateX(2px); }
.brand-caption { margin: 5px 0 0 7px; color: #77766e; font-family: "DM Sans", sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .19em; }
.workspace-switcher { display: flex; align-items: center; width: 100%; min-height: 55px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: #181817; cursor: pointer; text-align: left; }
.workspace-switcher:hover { background: #1e1e1c; }
.workspace-monogram { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border: 1px solid #524c3f; border-radius: 6px; background: linear-gradient(145deg, #85735c, #37342e); color: #f5e7cf; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 700; }
.workspace-name { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; margin-left: 9px; }
.workspace-name strong { overflow: hidden; color: #e4e0d9; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.workspace-name small { color: var(--muted); font-size: 10px; }
.workspace-switcher > svg, .project-button > svg { width: 14px; height: 14px; fill: none; stroke: #888780; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.side-label { margin: 29px 9px 10px; color: #6c6b65; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.side-label-spaced { margin-top: 28px; }
.side-nav { display: grid; gap: 3px; }
.side-link { display: flex; height: 37px; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #989791; cursor: pointer; text-align: left; transition: color .16s ease, background .16s ease; }
.side-link:hover { background: #1c1c1a; color: #e7e4dc; }
.side-link.active { background: #25231f; color: #f0e9dd; }
.side-link.active svg { color: var(--gold); }
.side-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.side-link span:nth-of-type(1) { flex: 1; font-size: 11px; font-weight: 500; }
.nav-shortcut { padding: 2px 4px; border: 1px solid #343431; border-radius: 3px; color: #65645f; font-size: 9px; }
.nav-new { padding: 3px 5px; border: 1px solid #484239; border-radius: 4px; background: #28251f; color: var(--gold); font-size: 9px; font-weight: 600; }
.library-link span:nth-of-type(1) { flex: 1; }
.sidebar-spacer { flex: 1; min-height: 28px; }
.plan-card { padding: 11px 10px 10px; border: 1px solid #34312a; border-radius: 7px; background: linear-gradient(145deg, #1f1e1a 0%, #171715 75%); }
.plan-row { display: flex; align-items: center; gap: 5px; color: #aaa394; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.spark-icon { color: var(--gold); font-size: 12px; }
.plan-live { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #95a985; box-shadow: 0 0 9px #95a98588; }
.provider-card { display: grid; gap: 4px; margin-top: 10px; }
.provider-card strong { color: #e1d8c7; font-size: 11px; font-weight: 600; }
.provider-card small { color: #838178; font-size: 8px; }
.upgrade-button { display: flex; width: 100%; justify-content: space-between; margin-top: 11px; padding: 7px 8px; border: 1px solid #39362f; border-radius: 4px; background: #24221e; color: #d2c5ae; cursor: pointer; font-size: 10px; }
.upgrade-button:hover { border-color: #74674f; background: #2b2924; }
.profile-button { display: flex; align-items: center; width: 100%; margin-top: 13px; padding: 10px 4px 2px; border: 0; border-top: 1px solid var(--border-soft); background: transparent; cursor: pointer; text-align: left; }
.avatar { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #565047; border-radius: 50%; background: linear-gradient(145deg, #827262, #35302b); color: #f0e3d2; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 700; }
.profile-copy { display: grid; gap: 3px; margin-left: 9px; }
.profile-copy strong { color: #d9d7d1; font-size: 10px; font-weight: 600; }
.profile-copy small { color: #777670; font-size: 9px; }
.profile-more { margin-left: auto; color: #817f78; font-size: 14px; letter-spacing: 1px; }

.main-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 4; top: 0; display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid var(--border-soft); background: rgb(16 16 15 / 91%); backdrop-filter: blur(18px); }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: #777670; font-size: 10px; }
.breadcrumbs svg { width: 12px; height: 12px; fill: none; stroke: #5d5d58; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.breadcrumbs strong { color: #d5d1c9; font-size: 10px; font-weight: 500; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.connection-status { display: flex; align-items: center; gap: 6px; margin-right: 7px; color: #8d9a82; font-size: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #88a67c; box-shadow: 0 0 8px #88a67c78; }
.connection-status.offline { color: #d29a78; }
.connection-status.offline .status-dot { background: #c98769; box-shadow: 0 0 8px #c9876978; }
.credit-pill { padding: 6px 9px; border: 1px solid #302e29; border-radius: 5px; background: #1a1917; color: #d7d0c5; cursor: pointer; font-size: 10px; }
.credit-spark { margin-right: 3px; color: var(--gold); }
.invite-button { padding: 7px 11px; border: 1px solid #454138; border-radius: 5px; background: transparent; color: #d4d0c9; cursor: pointer; font-size: 10px; }
.invite-button:hover, .help-button:hover, .more-button:hover { background: #22221f; }
.help-button { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #33332f; border-radius: 50%; background: transparent; color: #8e8d86; cursor: pointer; font-size: 10px; }

.studio-page { max-width: 1500px; margin: 0 auto; padding: 31px 36px 20px; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.eyebrow, .section-eyebrow { display: flex; align-items: center; gap: 7px; color: #9b927e; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.eyebrow-line { width: 14px; height: 1px; background: var(--gold); }
.eyebrow-dot { color: #6d6a62; }
h1, h2, h3, p { margin-top: 0; }
.page-title-row h1 { margin: 10px 0 5px; font-family: Manrope, "DM Sans", sans-serif; font-size: clamp(25px, 2.45vw, 34px); font-weight: 500; letter-spacing: -.055em; line-height: 1.16; }
.page-title-row p { margin-bottom: 0; color: #85847e; font-size: 11px; }
.title-controls { display: flex; align-items: center; gap: 7px; padding-bottom: 2px; }
.project-button, .more-button { height: 32px; border: 1px solid #302f2b; border-radius: 5px; background: #171716; color: #b4b1a9; cursor: pointer; font-size: 9px; }
.project-button { display: flex; align-items: center; gap: 8px; padding: 0 9px; }
.project-icon { color: var(--gold); font-size: 13px; }
.project-button > svg { margin-left: 2px; }
.more-button { width: 34px; color: #888780; letter-spacing: 1px; }
.mode-tabs { display: flex; align-items: center; gap: 19px; height: 49px; margin-top: 19px; border-bottom: 1px solid var(--border); }
.mode-tab { position: relative; display: flex; height: 100%; align-items: center; gap: 7px; padding: 0 3px; border: 0; background: transparent; color: #85847e; cursor: pointer; font-size: 10px; transition: color .16s ease; }
.mode-tab:hover { color: #ddd8ce; }
.mode-tab.active { color: #eeeae3; }
.mode-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--gold); content: ""; }
.tab-icon { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #45433d; border-radius: 4px; color: #bdb6aa; font-size: 11px; line-height: 1; }
.mode-tab.active .tab-icon { border-color: #665840; color: var(--gold-light); }
.cinema-icon { font-size: 10px; }
.version-chip { padding: 3px 5px; border: 1px solid #4b4337; border-radius: 3px; background: #29251f; color: var(--gold-light); font-size: 8px; font-weight: 600; }
.tab-new-dot { width: 4px; height: 4px; margin-left: -3px; border-radius: 50%; background: #dda976; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 15px; align-items: stretch; margin-top: 16px; }
.stage-column { display: flex; min-width: 0; flex-direction: column; gap: 11px; }
.stage-card { position: relative; min-height: 330px; height: clamp(315px, 35vw, 420px); overflow: hidden; border: 1px solid #35332f; border-radius: 7px; background: #181818; }
.stage-artwork { position: absolute; inset: 0; background-color: #1c2029; background-position: center 49%; background-size: cover; transition: transform 1.2s cubic-bezier(.2,.65,.2,1), filter .5s ease; }
.stage-card:hover .stage-artwork { transform: scale(1.018); }
.stage-card.mode-image .stage-artwork { background-image: linear-gradient(90deg, rgb(15 16 20 / 39%), transparent 56%, rgb(17 17 18 / 6%)), url("/assets/dusk-road.svg"); }
.stage-card.mode-video .stage-artwork { background-image: linear-gradient(90deg, rgb(15 16 20 / 27%), transparent 55%, rgb(17 17 18 / 8%)), url("/assets/neon-rain.svg"); }
.stage-card.mode-cinema .stage-artwork { background-image: linear-gradient(90deg, rgb(11 13 18 / 24%), transparent 60%, rgb(12 13 17 / 18%)), url("/assets/dusk-road.svg"); }
.stage-card.has-result .stage-artwork { background-image: none !important; background-color: #10100f; }
.stage-card.has-result .stage-vignette { display: none; }
.stage-card.has-result .stage-artwork img, .stage-card.has-result .stage-artwork video { display: block; width: 100%; height: 100%; object-fit: contain; }
.stage-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 8 12 / 54%), transparent 23%, transparent 57%, rgb(7 8 12 / 61%)), linear-gradient(90deg, rgb(7 8 12 / 30%), transparent 57%); pointer-events: none; }
.stage-topline { position: absolute; z-index: 1; top: 14px; right: 15px; left: 15px; display: flex; justify-content: space-between; align-items: center; }
.stage-badge, .stage-format { display: flex; min-height: 22px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid rgb(242 231 209 / 18%); border-radius: 4px; background: rgb(17 18 18 / 53%); color: #eee4d4; font-size: 8px; letter-spacing: .1em; backdrop-filter: blur(8px); }
.stage-badge i { width: 5px; height: 5px; border-radius: 50%; background: #d7b680; box-shadow: 0 0 8px #ddbe8f; }
.stage-format { color: #cfc9be; font-size: 8px; letter-spacing: .06em; }
.stage-output-link { min-height: 22px; padding: 5px 8px; border: 1px solid rgb(242 231 209 / 18%); border-radius: 4px; background: rgb(17 18 18 / 53%); color: #efddbe; font-size: 8px; text-decoration: none; backdrop-filter: blur(8px); }
.stage-output-link:hover { border-color: #b99b70; background: #28241f; }
.stage-copy { position: absolute; z-index: 1; bottom: 18px; left: 20px; max-width: min(520px, 74%); }
.stage-kicker { margin-bottom: 7px; color: #e7c89c; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-shadow: 0 1px 10px #1b1115; }
.stage-copy h2 { margin: 0; color: #faf5eb; font-family: Manrope, sans-serif; font-size: clamp(25px, 3.2vw, 41px); font-weight: 500; letter-spacing: -.06em; line-height: 1.03; text-shadow: 0 2px 20px rgb(0 0 0 / 28%); }
.stage-copy p { margin: 9px 0 0; color: rgb(249 238 221 / 77%); font-size: 10px; text-shadow: 0 2px 8px #161111; }
.stage-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgb(255 255 255 / 50%); border-radius: 50%; background: rgb(19 20 21 / 25%); color: white; cursor: pointer; font-size: 15px; backdrop-filter: blur(5px); transform: translate(-50%, -50%); transition: .2s ease; }
.stage-play:hover { background: rgb(219 183 131 / 62%); transform: translate(-50%, -50%) scale(1.07); }
.play-triangle { margin-left: 2px; }
.stage-caption { position: absolute; z-index: 1; right: 14px; bottom: 17px; color: rgb(249 238 221 / 58%); font-size: 8px; letter-spacing: .08em; }
.stage-result-label { position: absolute; z-index: 2; top: 14px; left: 15px; display: none; padding: 6px 8px; border: 1px solid #514a3d; border-radius: 4px; background: rgb(20 19 17 / 78%); color: var(--gold-light); font-size: 8px; letter-spacing: .09em; }
.has-result .stage-result-label { display: block; }
.stage-empty { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; justify-items: center; background: radial-gradient(ellipse at center, #282620 0%, #181817 62%); text-align: center; }
.stage-empty[hidden] { display: none; }
.empty-icon { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 12px; border: 1px solid #4a4437; border-radius: 50%; color: var(--gold); font-size: 17px; }
.stage-empty strong { color: #e8e3da; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 500; }
.stage-empty span { margin-top: 5px; color: #8b8981; font-size: 9px; }
.stage-card.waiting .stage-artwork { filter: saturate(.65) brightness(.55); }
.stage-card.waiting::after { position: absolute; z-index: 3; inset: 0; border: 1px solid #b89c70; border-radius: 7px; animation: pulse-border 1.3s infinite ease-in-out; content: ""; pointer-events: none; }
@keyframes pulse-border { 50% { border-color: #dfc99e; box-shadow: inset 0 0 30px #e5c99116; } }

.prompt-card, .controls-card { border: 1px solid var(--border); border-radius: 7px; background: #171716; }
.prompt-card { padding: 12px 13px 9px; }
.prompt-label { display: flex; align-items: center; gap: 6px; color: #9f937e; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
#prompt-label-icon { color: var(--gold); font-size: 11px; }
.prompt-hint { margin-left: auto; color: #6f6e68; font-size: 8px; font-weight: 400; letter-spacing: 0; }
#prompt-input { display: block; width: 100%; min-height: 58px; resize: vertical; margin: 8px 0 8px; padding: 0; border: 0; outline: 0; background: transparent; color: #e9e6df; font-size: 11px; line-height: 1.65; }
#prompt-input:focus-visible { outline: 0; }
#prompt-input::placeholder { color: #716f69; }
.prompt-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #292926; padding-top: 8px; }
.prompt-tools, .prompt-actions { display: flex; align-items: center; gap: 8px; }
.tool-button { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #9a9890; cursor: pointer; font-size: 9px; }
.tool-button:hover { border-color: #3c3932; background: #22211e; color: #e3daca; }
.tool-button span { color: var(--gold); font-size: 13px; line-height: .8; }
.tool-divider { width: 1px; height: 13px; background: #393833; }
.prompt-count { color: #74736d; font-size: 9px; }
.keyboard-hint { color: #62615c; font-size: 8px; }
kbd { min-width: 13px; margin: 0 1px; padding: 2px 3px; border: 1px solid #33332f; border-radius: 3px; color: #9a9891; font-family: inherit; font-size: 8px; }
.generate-button { display: flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #c1a274; border-radius: 4px; background: linear-gradient(135deg, #e0c49a, #c6a474); color: #1c1a16; cursor: pointer; font-size: 9px; font-weight: 700; transition: filter .15s ease, transform .15s ease; }
.generate-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.generate-button:disabled { filter: grayscale(.65); cursor: progress; opacity: .75; transform: none; }
.generate-spark { font-size: 11px; }
.button-arrow { margin-left: 4px; font-size: 12px; font-weight: 500; }
.reference-list { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-list:not(:empty) { padding-top: 9px; }
.reference-chip { display: flex; max-width: 155px; align-items: center; gap: 5px; padding: 4px 6px 4px 4px; border: 1px solid #35342f; border-radius: 4px; background: #20201e; color: #aaa79f; font-size: 8px; }
.reference-chip img { width: 21px; height: 21px; border-radius: 3px; object-fit: cover; }
.reference-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-chip button { padding: 0 2px; border: 0; background: none; color: #85837d; cursor: pointer; }
.generation-message { min-height: 0; color: #adab9e; font-size: 9px; line-height: 1.5; }
.generation-message:not(:empty) { margin-top: 7px; }
.generation-message.error { color: var(--danger); }
.generation-message.success { color: #a3b294; }

.controls-card { padding: 13px 13px 12px; }
.control-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid #2b2b27; }
.control-title { display: flex; align-items: center; gap: 7px; color: #e7e1d6; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 600; }
.control-title-icon { color: var(--gold); font-size: 13px; }
.control-subtitle { margin-top: 3px; color: #77766f; font-size: 8px; }
.reset-button { padding: 4px; border: 0; background: transparent; color: #76756f; cursor: pointer; font-size: 9px; }
.reset-button:hover { color: var(--gold-light); }
.control-group { padding: 12px 0 0; }
.control-group + .control-group { margin-top: 11px; border-top: 1px solid #292926; }
.control-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.control-label-row.spaced-top { margin-top: 10px; }
.control-label { color: #aaa79f; font-size: 9px; font-weight: 600; }
.control-note { color: #696861; font-size: 8px; }
.model-select-wrap { position: relative; }
.model-select, .control-select { width: 100%; height: 33px; appearance: none; padding: 0 28px 0 9px; border: 1px solid #373630; border-radius: 5px; background: #1e1e1b; color: #ddd9d1; cursor: pointer; font-size: 9px; }
.model-select-wrap::after { position: absolute; top: 9px; right: 11px; color: #838077; font-size: 10px; pointer-events: none; content: "⌄"; }
.model-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #75746d; font-size: 8px; }
.model-meta i { width: 5px; height: 5px; border-radius: 50%; background: #9cae86; }
.option-row { display: flex; gap: 5px; }
.option-button { flex: 1; min-height: 29px; padding: 0 5px; border: 1px solid #34332e; border-radius: 4px; background: #1b1b19; color: #88877f; cursor: pointer; font-size: 8px; transition: .15s ease; }
.option-button:hover { border-color: #645947; color: #d7d0c4; }
.option-button.selected { border-color: #72634a; background: #29261f; color: #e5cfaa; box-shadow: inset 0 0 0 1px #5b4f3e44; }
.option-button.wide { flex: 1.4; }
.control-select { height: 31px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; min-height: 30px; color: #aaa79f; font-size: 9px; }
.toggle-row small { display: block; margin-top: 2px; color: #6f6e68; font-size: 8px; }
.toggle { position: relative; width: 29px; height: 16px; padding: 0; border: 1px solid #45433c; border-radius: 9px; background: #292824; cursor: pointer; transition: background .15s ease; }
.toggle::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #929089; content: ""; transition: transform .15s ease, background .15s ease; }
.toggle.on { border-color: #aa8c61; background: #766246; }
.toggle.on::after { background: #f2d7ac; transform: translateX(13px); }
.control-divider { height: 1px; margin-top: 11px; background: #292926; }
.control-footnote { margin: 11px 0 0; color: #67665f; font-size: 8px; line-height: 1.55; }
.settings-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #38362f; border-radius: 4px; background: #201f1c; color: #9b8c73; font-size: 8px; }
.settings-tag span { color: var(--gold); }

.history-section { margin-top: 24px; }
.history-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.section-eyebrow { margin-bottom: 5px; color: #77766e; font-size: 8px; }
.history-header h2 { margin: 0; color: #e7e2d9; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.035em; }
.view-all-button { padding: 5px 2px; border: 0; background: transparent; color: #aaa79f; cursor: pointer; font-size: 9px; }
.view-all-button span { padding-left: 5px; color: var(--gold); }
.inspiration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.inspiration-card { position: relative; height: 95px; overflow: hidden; border: 1px solid #35332f; border-radius: 5px; background: #1f2229; cursor: pointer; text-align: left; }
.inspiration-card::before { position: absolute; inset: 0; background-position: center; background-size: cover; transition: transform .4s ease; content: ""; }
.inspiration-card:hover::before { transform: scale(1.06); }
.inspiration-card[data-art="dusk"]::before { background-image: linear-gradient(0deg, #17161999, transparent 75%), url("/assets/dusk-road.svg"); }
.inspiration-card[data-art="neon"]::before { background-image: linear-gradient(0deg, #17161999, transparent 75%), url("/assets/neon-rain.svg"); }
.inspiration-card[data-art="blue"]::before { background-image: linear-gradient(0deg, #17161999, transparent 75%), url("/assets/blue-hour.svg"); }
.inspiration-card.has-media::before { display: none; }
.history-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inspiration-copy { position: absolute; right: 9px; bottom: 8px; left: 10px; color: #f3eee5; font-size: 9px; font-weight: 600; text-shadow: 0 1px 8px #101012; }
.inspiration-copy small { display: block; margin-top: 3px; color: #e0d2ba; font-size: 7px; font-weight: 400; letter-spacing: .08em; }
.inspiration-add { position: absolute; top: 7px; right: 8px; display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #ffffff57; border-radius: 50%; background: #10111455; color: white; font-size: 13px; opacity: 0; transition: opacity .16s ease; }
.inspiration-card:hover .inspiration-add { opacity: 1; }
.page-footer { display: flex; justify-content: space-between; margin-top: 22px; padding: 11px 0 4px; border-top: 1px solid #242421; color: #65645e; font-size: 7px; letter-spacing: .08em; }
.footer-key-status { color: #818076; letter-spacing: 0; }
.footer-key-status i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #87967d; }

.cinema-controls .control-group { padding-top: 10px; }
.genre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.genre-grid .option-button { min-height: 27px; }
.era-row { display: flex; align-items: center; gap: 6px; }
.era-year { min-width: 32px; color: #8d887d; font-size: 8px; }
.era-year:last-child { text-align: right; }
.era-slider { width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 3px; background: linear-gradient(90deg, #9b7957, #393832); cursor: pointer; }
.era-slider::-webkit-slider-thumb { width: 11px; height: 11px; appearance: none; border: 2px solid #e5c99d; border-radius: 50%; background: #26231d; box-shadow: 0 0 0 3px #d8b98520; }
.era-slider::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid #e5c99d; border-radius: 50%; background: #26231d; }
.era-current { margin-top: 6px; color: var(--gold-light); font-size: 8px; text-align: center; }
.camera-select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emotion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.emotion-button { display: grid; min-height: 42px; place-items: center; gap: 1px; padding: 3px 0; border: 1px solid #34332e; border-radius: 4px; background: #1b1b19; color: #827f76; cursor: pointer; font-size: 7px; }
.emotion-button span { font-size: 14px; filter: grayscale(.45); }
.emotion-button.selected { border-color: #76664b; background: #29261f; color: #e3cba5; }
.emotion-button.selected span { filter: none; }
.director-reference-row { display: flex; align-items: center; justify-content: space-between; }
.director-reference-row .control-note { max-width: 150px; line-height: 1.4; text-align: right; }
.ref-mini-button { padding: 6px 7px; border: 1px solid #3c3932; border-radius: 4px; background: #20201d; color: #c4b79f; cursor: pointer; font-size: 8px; }
.ref-mini-button:hover { border-color: #746247; }

.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: 300px; padding: 11px 14px; border: 1px solid #4d463a; border-radius: 6px; background: #24221e; box-shadow: 0 16px 40px #0009; color: #e6dfd1; font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.access-gate { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 42%, #26231d 0%, #131312 51%, #0c0c0b 100%); }
.access-gate[hidden] { display: none; }
.access-panel { width: min(100%, 370px); }
.access-brand { display: flex; align-items: center; margin-bottom: 49px; color: #f1ede5; font-family: Manrope, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.08em; }
.access-brand .brand-mark { width: 21px; height: 21px; margin-right: 10px; }
.access-brand small { margin: 5px 0 0 7px; color: #77766e; font-family: "DM Sans", sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .19em; }
.access-panel .eyebrow { margin-bottom: 13px; }
.access-panel h1 { margin: 0 0 11px; color: #f2eee7; font-family: Manrope, sans-serif; font-size: 38px; font-weight: 500; letter-spacing: -.065em; line-height: 1.04; }
.access-panel > p { margin-bottom: 24px; color: #929088; font-size: 11px; line-height: 1.6; }
#access-form { display: grid; gap: 8px; }
#access-form label { color: #a59b87; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
#access-code { width: 100%; height: 41px; padding: 0 11px; border: 1px solid #3d3a33; border-radius: 5px; background: #191917; color: #eee9df; font-size: 12px; letter-spacing: .08em; }
.access-submit { justify-content: center; min-height: 39px; margin-top: 5px; }
.access-submit .button-arrow { margin-left: auto; }
.access-message { min-height: 16px; color: var(--danger); font-size: 9px; }
.access-footnote { display: flex; align-items: center; gap: 6px; margin-top: 22px; color: #77766f; font-size: 8px; }
.access-footnote i { width: 5px; height: 5px; border-radius: 50%; background: #8a9e79; box-shadow: 0 0 8px #91ad7a66; }

@media (min-width: 1600px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .controls-card { padding: 15px; }
}
@media (max-width: 1200px) {
  :root { --sidebar-width: 218px; }
  .sidebar { padding-right: 12px; padding-left: 12px; }
  .studio-page { padding-right: 25px; padding-left: 25px; }
  .topbar { padding-right: 25px; padding-left: 25px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 274px; gap: 11px; }
  .controls-card { padding-right: 10px; padding-left: 10px; }
  .page-title-row h1 { font-size: 28px; }
}
@media (max-width: 970px) {
  :root { --sidebar-width: 68px; }
  .sidebar { align-items: center; padding: 21px 8px 12px; }
  .brand { justify-content: center; margin: 0 0 26px; font-size: 0; }
  .brand-mark { width: 25px; height: 25px; margin: 0; }
  .brand-caption, .workspace-name, .workspace-switcher > svg, .side-label, .side-link span:not(.nav-new), .nav-shortcut, .plan-card, .profile-copy, .profile-more { display: none; }
  .workspace-switcher { width: 44px; min-height: 44px; justify-content: center; padding: 4px; }
  .workspace-monogram { width: 32px; height: 32px; flex-basis: 32px; }
  .side-nav { width: 100%; margin-top: 23px; }
  .side-link { position: relative; width: 44px; height: 42px; justify-content: center; padding: 0; }
  .side-link svg { width: 18px; height: 18px; }
  .side-link .nav-new { position: absolute; right: -1px; bottom: 2px; padding: 2px 3px; font-size: 7px; }
  .side-nav + .side-label { display: none; }
  .side-label-spaced { display: none; }
  .side-nav:has(.library-link) { margin-top: 23px; padding-top: 13px; border-top: 1px solid var(--border-soft); }
  .sidebar-spacer { min-height: 20px; }
  .profile-button { justify-content: center; }
  .avatar { width: 31px; height: 31px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .connection-status span:last-child { display: none; }
}
@media (max-width: 760px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .controls-card { grid-row: 1; }
  .stage-column { grid-row: 2; }
  .stage-card { height: clamp(280px, 68vw, 430px); }
  .controls-card { padding: 12px; }
  .control-header { padding-bottom: 8px; }
  .controls-card .control-group { padding-top: 9px; }
  .control-group + .control-group { margin-top: 8px; }
  .cinema-controls { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .cinema-controls .control-header { grid-column: 1 / -1; }
  .cinema-controls .control-group:nth-of-type(2), .cinema-controls .control-group:nth-of-type(3) { border-top: 0; }
  .stage-copy h2 { font-size: clamp(26px, 6vw, 40px); }
}
@media (max-width: 580px) {
  :root { --sidebar-width: 54px; }
  .sidebar { padding-right: 5px; padding-left: 5px; }
  .workspace-switcher, .side-link { width: 40px; }
  .topbar { height: 51px; padding: 0 13px; }
  .top-actions { gap: 6px; }
  .connection-status { margin-right: 0; }
  .credit-pill { padding: 6px 7px; }
  .invite-button { display: none; }
  .studio-page { padding: 24px 13px 16px; }
  .page-title-row { align-items: flex-start; }
  .page-title-row h1 { max-width: 280px; font-size: 26px; }
  .page-title-row p { max-width: 275px; font-size: 10px; line-height: 1.5; }
  .title-controls { gap: 5px; }
  .project-button { width: 31px; justify-content: center; padding: 0; overflow: hidden; font-size: 0; }
  .project-button .project-icon { font-size: 13px; }
  .project-button > svg { display: none; }
  .more-button { width: 29px; }
  .mode-tabs { gap: 11px; height: 45px; margin-top: 15px; }
  .mode-tab { gap: 5px; font-size: 9px; }
  .tab-icon { width: 14px; height: 14px; font-size: 9px; }
  .version-chip { padding: 2px 3px; font-size: 7px; }
  .workspace-grid { margin-top: 11px; }
  .stage-card { min-height: 255px; }
  .stage-topline { top: 10px; right: 10px; left: 10px; }
  .stage-copy { bottom: 14px; left: 14px; max-width: 78%; }
  .stage-copy h2 { font-size: 28px; }
  .stage-copy p { font-size: 9px; }
  .stage-caption { display: none; }
  .prompt-card { padding: 10px; }
  #prompt-input { min-height: 68px; }
  .prompt-footer { flex-wrap: wrap; }
  .keyboard-hint { display: none; }
  .prompt-actions { margin-left: auto; }
  .generate-button { min-height: 30px; }
  .history-section { margin-top: 20px; }
  .inspiration-grid { gap: 6px; }
  .inspiration-card { height: 76px; }
  .page-footer { gap: 8px; font-size: 6px; }
  .page-footer > span:nth-child(2) { display: none; }
  .cinema-controls { column-gap: 9px; }
}

/* AVEX studio presentation: Higgsfield-inspired workspace density and contrast. */
body { background: var(--bg); }
.sidebar {
  padding: 18px 12px 12px;
  border-right-color: #222225;
  background: #101011;
}
.brand { margin-bottom: 25px; }
.brand-mark i { border-radius: 3px; }
.brand-caption { color: #77777d; }
.workspace-switcher {
  min-height: 50px;
  border-color: #29292c;
  border-radius: 9px;
  background: #151517;
}
.workspace-switcher:hover { background: #1b1b1e; }
.workspace-monogram {
  border-color: #343b27;
  border-radius: 8px;
  background: linear-gradient(145deg, #343d27, #1b1e18);
  color: var(--gold-light);
}
.side-label { margin-top: 25px; color: #76767c; font-size: 9px; }
.side-label-spaced { margin-top: 24px; }
.side-nav { gap: 4px; }
.side-link {
  height: 39px;
  border-radius: 8px;
  color: #a0a0a5;
}
.side-link:hover { background: #1b1b1e; color: #f1f1ef; }
.side-link.active {
  background: #202023;
  color: #f5f5f3;
  box-shadow: inset 0 0 0 1px #29292c;
}
.side-link.active svg { color: var(--gold); }
.nav-new {
  border-color: #3e482a;
  background: #20241a;
  color: var(--gold-light);
}
.plan-card {
  border-color: #2b2b2e;
  border-radius: 9px;
  background: linear-gradient(145deg, #1a1a1c, #131315 75%);
}
.provider-card strong { color: #efefed; }
.upgrade-button {
  border-color: #343438;
  border-radius: 7px;
  background: #202023;
  color: #d7d7d9;
}
.profile-button { border-top-color: #242427; }
.avatar {
  border-color: #39402e;
  background: linear-gradient(145deg, #414a31, #24271f);
  color: #e8f6c1;
}

.main-content { background: #0d0d0e; }
.topbar {
  height: 56px;
  padding-right: 32px;
  padding-left: 32px;
  border-bottom-color: #222225;
  background: rgb(13 13 14 / 93%);
}
.breadcrumbs, .breadcrumbs strong { font-size: 11px; }
.connection-status { font-size: 10px; }
.status-dot { background: #a9ce70; box-shadow: 0 0 8px #a9ce7078; }
.credit-pill, .invite-button, .help-button {
  border-color: #303034;
  border-radius: 7px;
  background: #151517;
  color: #dfdfe0;
  font-size: 11px;
}
.invite-button:hover, .help-button:hover { background: #222225; }

.studio-page { max-width: 1600px; padding: 34px 38px 24px; }
.eyebrow, .section-eyebrow { color: #929298; font-size: 9px; }
.eyebrow-line { width: 16px; background: var(--gold); }
.page-title-row h1 {
  margin-top: 11px;
  color: #f7f7f5;
  font-family: Inter, "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(27px, 2.4vw, 35px);
  font-weight: 650;
  letter-spacing: -.045em;
}
.page-title-row p { color: #96969b; font-size: 12px; }
.project-button, .more-button {
  height: 35px;
  border-color: #303034;
  border-radius: 8px;
  background: #151517;
  color: #d8d8da;
  font-size: 10px;
}
.project-button:hover, .more-button:hover { background: #202023; }
.mode-tabs {
  height: 52px;
  gap: 22px;
  margin-top: 20px;
  border-bottom-color: #262629;
}
.mode-tab { gap: 8px; font-size: 11px; }
.mode-tab.active::after { height: 2px; background: var(--gold); }
.tab-icon {
  width: 18px;
  height: 18px;
  border-color: #3b3b3f;
  border-radius: 5px;
  color: #c7c7ca;
}
.mode-tab.active .tab-icon { border-color: #55643a; color: var(--gold-light); }
.version-chip {
  border-color: #3e482a;
  border-radius: 5px;
  background: #20241a;
  color: var(--gold-light);
}
.tab-new-dot { background: var(--gold); }

.workspace-grid {
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 17px;
  margin-top: 18px;
}
.stage-column { gap: 13px; }
.stage-card {
  min-height: 355px;
  height: clamp(350px, 37vw, 485px);
  border-color: #2d2d30;
  border-radius: 12px;
  background: #151517;
}
.stage-card.mode-image .stage-artwork {
  background-image: linear-gradient(90deg, rgb(8 9 11 / 47%), transparent 58%, rgb(8 9 11 / 10%)), url("/assets/dusk-road.svg");
}
.stage-card.mode-video .stage-artwork {
  background-image: linear-gradient(90deg, rgb(8 9 11 / 37%), transparent 58%, rgb(8 9 11 / 12%)), url("/assets/neon-rain.svg");
}
.stage-card.mode-cinema .stage-artwork {
  background-image: linear-gradient(90deg, rgb(8 9 11 / 35%), transparent 60%, rgb(8 9 11 / 16%)), url("/assets/dusk-road.svg");
}
.stage-topline { top: 16px; right: 16px; left: 16px; }
.stage-badge, .stage-format, .stage-output-link {
  min-height: 25px;
  border-color: rgb(255 255 255 / 18%);
  border-radius: 6px;
  background: rgb(15 15 16 / 63%);
  font-size: 9px;
}
.stage-badge i { background: var(--gold); box-shadow: 0 0 8px #cafa4680; }
.stage-copy { bottom: 22px; left: 24px; }
.stage-kicker { font-size: 9px; color: #d6f27e; }
.stage-copy h2 { font-weight: 600; letter-spacing: -.05em; }
.stage-copy p { font-size: 11px; }
.stage-play { width: 48px; height: 48px; border-radius: 50%; }
.stage-card.waiting::after { border-color: #cafa46; border-radius: 12px; }

.prompt-card, .controls-card {
  border-color: #2a2a2d;
  border-radius: 11px;
  background: #141416;
}
.prompt-card { padding: 14px 15px 11px; }
.prompt-label { color: #aaaab0; font-size: 9px; }
#prompt-label-icon, .tool-button span, .project-icon, .credit-spark { color: var(--gold); }
.prompt-hint { color: #77777d; font-size: 9px; }
#prompt-input { min-height: 68px; color: #ededeb; font-size: 12px; }
#prompt-input::placeholder { color: #77777d; }
.prompt-footer { border-top-color: #29292c; padding-top: 9px; }
.tool-button { border-radius: 6px; color: #b2b2b7; font-size: 10px; }
.tool-button:hover { border-color: #39393d; background: #202023; color: #f1f1ef; }
.prompt-count { font-size: 10px; }
.keyboard-hint { font-size: 9px; }
kbd { border-color: #38383c; border-radius: 4px; }
.generate-button {
  min-height: 35px;
  padding: 0 12px;
  border-color: #cafa46;
  border-radius: 7px;
  background: var(--gold);
  color: #15170f;
  font-size: 10px;
}
.generate-button:hover { filter: brightness(1.06); }
.generate-button:disabled { filter: grayscale(.65); }
.generation-message { font-size: 10px; }

.controls-card { padding: 15px 15px 14px; }
.control-header { border-bottom-color: #2b2b2e; }
.control-title { color: #f0f0ee; font-size: 12px; }
.control-subtitle { color: #89898f; font-size: 9px; }
.reset-button { font-size: 10px; }
.control-group + .control-group { border-top-color: #28282b; }
.control-label { color: #c1c1c5; font-size: 10px; }
.control-note, .model-meta, .control-footnote { color: #818187; font-size: 9px; }
.model-select, .control-select {
  height: 36px;
  border-color: #36363a;
  border-radius: 7px;
  background: #1b1b1e;
  color: #e6e6e5;
  font-size: 10px;
}
.option-row { gap: 6px; }
.option-button {
  min-height: 32px;
  border-color: #343438;
  border-radius: 6px;
  background: #19191b;
  color: #a2a2a7;
  font-size: 9px;
}
.option-button:hover { border-color: #59613d; color: #f0f0ed; }
.option-button.selected {
  border-color: #657544;
  background: #25291e;
  color: #e4f2c0;
  box-shadow: inset 0 0 0 1px #56633944;
}
.toggle-row { color: #c0c0c4; font-size: 10px; }
.toggle-row small { color: #838389; font-size: 9px; }
.toggle.on { border-color: #b3d949; background: #829d35; }
.toggle.on::after { background: #f1ffd0; }
.control-divider { background: #29292c; }
.settings-tag { border-color: #38383c; border-radius: 6px; background: #1b1b1d; font-size: 9px; }

.history-section { margin-top: 29px; }
.history-header { margin-bottom: 13px; }
.section-eyebrow { margin-bottom: 6px; }
.history-header h2 { color: #f0f0ee; font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.view-all-button { color: #b7b7bb; font-size: 10px; }
.view-all-button span { color: var(--gold); }
.inspiration-grid { gap: 12px; }
.inspiration-card {
  height: 142px;
  border-color: #303034;
  border-radius: 10px;
  background: #19191b;
}
.inspiration-copy { right: 12px; bottom: 11px; left: 12px; font-size: 11px; }
.inspiration-copy small { color: #e1e1df; font-size: 8px; }
.inspiration-add { width: 25px; height: 25px; border-radius: 7px; }
.page-footer { border-top-color: #232326; font-size: 8px; }
.footer-key-status { color: #a2a2a7; }

@media (max-width: 1200px) {
  .studio-page { padding-right: 26px; padding-left: 26px; }
  .topbar { padding-right: 25px; padding-left: 25px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 286px; gap: 13px; }
}
@media (max-width: 970px) {
  .sidebar { padding: 21px 8px 12px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 760px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .controls-card { grid-row: 1; }
  .stage-column { grid-row: 2; }
  .stage-card { height: clamp(300px, 68vw, 430px); }
}
@media (max-width: 580px) {
  .sidebar { padding-right: 5px; padding-left: 5px; }
  .studio-page { padding: 24px 13px 16px; }
  .page-title-row h1 { max-width: 280px; font-size: 26px; }
  .page-title-row p { max-width: 275px; font-size: 11px; }
  .mode-tabs { gap: 11px; height: 45px; margin-top: 15px; }
  .mode-tab { gap: 5px; font-size: 9px; }
  .tab-icon { width: 14px; height: 14px; font-size: 9px; }
  .workspace-grid { margin-top: 11px; }
  .stage-card { min-height: 270px; height: clamp(270px, 68vw, 390px); }
  .stage-topline { top: 10px; right: 10px; left: 10px; }
  .stage-copy { bottom: 14px; left: 14px; max-width: 78%; }
  .stage-copy h2 { font-size: 28px; }
  .stage-copy p { font-size: 10px; }
  .stage-caption { display: none; }
  .prompt-card { padding: 10px; }
  #prompt-input { min-height: 68px; }
  .prompt-footer { flex-wrap: wrap; }
  .keyboard-hint { display: none; }
  .prompt-actions { margin-left: auto; }
  .generate-button { min-height: 33px; }
  .inspiration-grid { gap: 6px; }
  .inspiration-card { height: 86px; }
  .page-footer { gap: 8px; font-size: 7px; }
}

/* Cinema workspace dashboard */
:root { --sidebar-width: 234px; }
.sidebar { background: #121214; padding: 17px 11px 12px; }
.brand { margin-bottom: 21px; }
.workspace-switcher { min-height: 47px; background: #19191b; }
.workspace-monogram { border-radius: 7px; background: #cafa46; color: #14150e; }
.side-label { margin: 24px 8px 9px; color: #77777c; letter-spacing: .1em; }
.side-label-spaced { margin-top: 22px; }
.side-nav { gap: 3px; }
.side-link { height: 36px; gap: 10px; padding: 0 9px; border-radius: 9px; color: #b2b2b7; }
.side-link.active { background: #252527; color: #f4f4f2; }

.brand { width: fit-content; max-width: 100%; margin-left: 0; }
.access-brand { width: 220px; }
@media (max-width: 970px) {
  .brand { width: 46px; margin: 0 0 21px; }
}
.side-link.active svg { color: var(--gold); }
.side-count { min-width: 21px; padding: 2px 5px; border-radius: 99px; background: #252527; color: #939399; font-size: 9px; text-align: center; }
.side-projects { margin-top: 27px; }
.side-projects-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 7px; color: #76767b; font-size: 9px; letter-spacing: .1em; }
.side-projects-heading button { width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: #a2a2a7; cursor: pointer; font-size: 17px; }
.side-projects-heading button:hover { background: #28282a; color: var(--gold); }
.sidebar-projects { display: grid; gap: 2px; margin-top: 7px; }
.side-project { display: flex; min-width: 0; height: 34px; align-items: center; gap: 8px; padding: 0 8px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: #aaaab0; cursor: pointer; font-size: 10px; text-align: left; }
.side-project:hover, .side-project.active { background: #212123; color: #f3f3f0; }
.side-project span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-mini-mark { color: #85858a; font-size: 15px; }
.sidebar-spacer { min-height: 16px; }
.plan-card { border-color: #303034; border-radius: 9px; background: #19191b; }
.provider-card strong { color: #e7e7e3; }
.upgrade-button { border-radius: 7px; background: #222224; color: #c9c9cc; }
.profile-button { margin-top: 11px; }

.topbar { height: 54px; padding-right: 32px; padding-left: 32px; }
.studio-page { max-width: 1420px; padding: 24px 32px 20px; }
.page-title-row { display: none; }
.mode-tabs { justify-content: center; gap: 8px; width: fit-content; height: 39px; margin: 0 auto 8px; padding: 3px; border: 1px solid #2b2b2e; border-radius: 11px; background: #171719; }
.mode-tab { height: 31px; padding: 0 13px; border-radius: 8px; font-size: 10px; }
.mode-tab.active { background: #29292b; color: #fff; }
.mode-tab.active::after { display: none; }
.mode-tab.active .tab-icon { border-color: #59652f; color: var(--gold); }
.workspace-grid { display: flex; max-width: 980px; flex-direction: column; gap: 13px; margin: 3px auto 0; }
.stage-column { gap: 12px; }
.hero-feature { display: grid; justify-items: center; padding: 3px 0 5px; text-align: center; }
.hero-reel { display: flex; width: min(100%, 575px); height: 142px; align-items: center; justify-content: center; perspective: 900px; }
.hero-poster { position: relative; width: 32%; height: 104px; flex: 0 0 32%; overflow: hidden; padding: 0; border: 1px solid #49494d; border-radius: 9px; background-color: #232326; background-position: center; background-size: cover; box-shadow: 0 12px 28px #0008; color: #fff; cursor: pointer; text-align: left; transition: transform .2s ease, border-color .2s ease; }
.hero-poster::before { position: absolute; inset: 0; background: linear-gradient(0deg, #080809cc 0%, #08080900 62%), linear-gradient(90deg, #0005, transparent 80%); content: ""; }
.hero-poster span { position: absolute; right: 9px; bottom: 8px; left: 9px; color: #f5f5f1; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.poster-neon { transform: translateX(19px) scale(.89); background-image: url("/assets/neon-rain.svg"); }
.poster-dusk { z-index: 1; height: 126px; transform: scale(1.03); background-image: url("/assets/dusk-road.svg"); }
.poster-blue { transform: translateX(-19px) scale(.89); background-image: url("/assets/blue-hour.svg"); }
.hero-poster:hover { z-index: 2; border-color: var(--gold); transform: translateY(-3px) scale(1.04); }
.hero-feature h2 { margin: 3px 0 6px; color: #f5f5f3; font-family: Manrope, sans-serif; font-size: clamp(25px, 3vw, 37px); font-weight: 800; letter-spacing: -.06em; line-height: 1.1; text-shadow: 0 2px 18px #ffffff30; }
.hero-feature > p { margin: 0; color: #8b8b90; font-size: 10px; }
.stage-card:not(.has-result) { display: none; }
.stage-card.has-result { min-height: 300px; height: clamp(300px, 34vw, 450px); border-color: #343438; border-radius: 12px; }
.stage-card.has-result .stage-topline { justify-content: flex-end; }
.stage-card.has-result .stage-result-label { top: 13px; left: 13px; border-color: #4a4a4e; background: #101012d9; color: var(--gold); }
.prompt-card { position: relative; padding: 13px 14px 10px; border-color: #303034; border-radius: 15px; background: #1b1b1d; box-shadow: 0 9px 35px #0004; }
.prompt-label { color: #85858a; }
#prompt-label-icon { color: var(--gold); }
#prompt-input { min-height: 57px; margin: 10px 0 8px; color: #f2f2ef; font-size: 12px; }
#prompt-input::placeholder { color: #85858a; }
.prompt-footer { border-color: #2a2a2d; }
.tool-button { border-radius: 7px; color: #c0c0c4; }
.tool-button:hover { border-color: #424246; background: #29292b; }
.generate-button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--gold); box-shadow: 0 3px 0 #768e20, 0 7px 16px #cafa4620; color: #17190f; font-size: 10px; }
.generate-button:hover { filter: brightness(1.06); }
.prompt-addon-row { display: flex; align-items: center; gap: 8px; min-height: 29px; }
.addon-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.addon-chip { padding: 4px 7px; border: 1px solid #414b2d; border-radius: 99px; background: #252a1d; color: #e7f5bd; cursor: pointer; font-size: 8px; }
.addon-chip span { padding-left: 4px; color: #b3c777; }
.library-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #37373a; border-radius: 7px; background: #222224; color: #d0d0d2; cursor: pointer; font-size: 9px; white-space: nowrap; }
.library-trigger:hover, .library-trigger.has-addons { border-color: #515d32; color: var(--gold-light); }
.library-trigger span { color: #838389; font-size: 8px; }
.reference-list:not(:empty) { max-height: 88px; overflow: auto; }
.reference-chip { max-width: 190px; border-radius: 7px; background: #252527; }
.reference-chip img { width: 26px; height: 26px; }
.element-suggestions { position: absolute; z-index: 12; bottom: calc(100% - 109px); left: 18px; display: grid; width: min(330px, calc(100% - 36px)); padding: 5px; border: 1px solid #3a3a3d; border-radius: 10px; background: #1d1d20; box-shadow: 0 14px 40px #000a; }
.element-suggestions[hidden] { display: none; }
.element-suggestion { display: flex; justify-content: space-between; gap: 10px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #e7e7e4; cursor: pointer; font-size: 10px; text-align: left; }
.element-suggestion:hover { background: #2b2b2e; }
.element-suggestion small { color: #929297; }

.controls-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 12px; border-color: #2e2e31; border-radius: 12px; background: #171719; }
.control-header { width: 100%; padding-bottom: 8px; border-color: #2b2b2e; }
.control-group { min-width: min(165px, 100%); flex: 1 1 165px; padding: 0; }
.control-group + .control-group { margin-top: 0; padding-top: 0; border: 0; }
.control-footnote { width: 100%; margin: 0; }
.cinema-controls { display: contents; }
.cinema-controls > .control-header { width: 100%; }
.cinema-controls > .control-group { min-width: 145px; flex: 1 1 145px; }
.cinema-controls > .control-footnote { width: 100%; }
.control-label, .control-title { color: #cdcdcf; }
.model-select, .control-select, .option-button { border-radius: 7px; background-color: #222224; }
.model-meta { color: #848489; }

.projects-section, .history-section { max-width: 1120px; margin: 27px auto 0; }
.projects-section[hidden] { display: none; }
.projects-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.project-create-card, .project-card { min-width: 0; overflow: hidden; border: 0; background: transparent; color: #f0f0ee; text-align: left; }
.project-create-card { display: grid; height: 137px; place-items: center; align-content: center; gap: 10px; border: 1px dashed #39393d; border-radius: 11px; background: #1b1b1d; color: #e4e4e1; cursor: pointer; }
.project-create-card:hover { border-color: #667839; background: #20221a; }
.project-create-card > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #5b5b5f; border-radius: 50%; color: var(--gold); font-size: 20px; }
.project-create-card strong { font-size: 10px; font-weight: 600; }
.project-card { cursor: pointer; }
.project-card-cover { position: relative; display: grid; height: 137px; place-items: center; overflow: hidden; border: 1px solid #343438; border-radius: 11px; background: radial-gradient(circle at 70% 15%, #50513c 0, transparent 38%), linear-gradient(135deg, #343438, #171719 72%); color: #d4d4cf; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .12em; line-height: 1.05; text-align: center; }
.project-card:nth-child(3n) .project-card-cover { background: radial-gradient(circle at 25% 20%, #485668 0, transparent 40%), linear-gradient(135deg, #2b2f35, #151517 70%); }
.project-card:nth-child(4n) .project-card-cover { background: radial-gradient(circle at 80% 20%, #6b5137 0, transparent 35%), linear-gradient(135deg, #302721, #161618 70%); }
.project-card-cover::after { position: absolute; inset: 0; background: linear-gradient(150deg, transparent 24%, #0005); content: ""; }
.project-card-cover > span, .project-delete { z-index: 1; }
.project-delete { position: absolute; top: 7px; right: 7px; display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 50%; background: #10101288; color: #e6e6e2; cursor: pointer; opacity: 0; }
.project-card:hover .project-delete { opacity: 1; }
.project-card-name { overflow: hidden; margin: 7px 4px 2px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-card > small { margin-left: 4px; color: #818186; font-size: 8px; }
.project-card.selected .project-card-cover { border-color: #728b39; box-shadow: 0 0 0 1px #728b3944; }
.history-section { margin-top: 30px; }
.generation-card { position: relative; min-width: 0; height: 138px; overflow: hidden; border: 1px solid #303034; border-radius: 10px; background: #1b1b1d; }
.generation-card::before { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .72; content: ""; }
.generation-card[data-art="dusk"]::before { background-image: url("/assets/dusk-road.svg"); }
.generation-card[data-art="neon"]::before { background-image: url("/assets/neon-rain.svg"); }
.generation-card[data-art="blue"]::before { background-image: url("/assets/blue-hour.svg"); }
.generation-card.has-media::before { display: none; }
.generation-card .history-media { z-index: 1; object-fit: cover; }
.generation-open { position: absolute; z-index: 2; inset: 0; width: 100%; padding: 0; border: 0; background: linear-gradient(0deg, #09090bc9, transparent 70%); color: white; cursor: pointer; text-align: left; }
.generation-open .inspiration-copy { bottom: 10px; }
.favorite-toggle { position: absolute; z-index: 3; top: 8px; right: 8px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #ffffff42; border-radius: 8px; background: #10101280; color: #eee; cursor: pointer; font-size: 16px; opacity: .75; }
.favorite-toggle:hover, .favorite-toggle.is-favorite { color: var(--gold); opacity: 1; }
.library-empty { display: grid; min-height: 88px; grid-column: 1 / -1; place-items: center; padding: 20px; border: 1px dashed #38383b; border-radius: 10px; color: #8f8f94; font-size: 10px; text-align: center; }
.expanded-history .inspiration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-view="generations"] .workspace-grid, body[data-view="generations"] .projects-section, body[data-view="favorites"] .workspace-grid, body[data-view="favorites"] .projects-section { display: none; }
body[data-view="generations"] .history-section, body[data-view="favorites"] .history-section { margin-top: 22px; }

.modal-overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: #050506bd; backdrop-filter: blur(10px); }
.modal-overlay[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }
.modal-panel { display: flex; width: min(100%, 760px); max-height: min(88vh, 860px); flex-direction: column; overflow: hidden; border: 1px solid #39393c; border-radius: 16px; background: #171719; box-shadow: 0 24px 100px #000b; }
.prompt-library-panel { width: min(100%, 1040px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 15px; border-bottom: 1px solid #2b2b2e; }
.modal-header h2 { margin: 4px 0 5px; color: #f5f5f2; font-family: Manrope, sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -.04em; }
.modal-header p { max-width: 550px; margin: 0; color: #96969b; font-size: 10px; line-height: 1.5; }
.modal-close { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #37373a; border-radius: 8px; background: #222224; color: #bbb; cursor: pointer; font-size: 19px; }
.library-filters { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, .5fr)); gap: 8px; padding: 13px 20px 8px; }
.library-filters input, .library-filters select, .element-form input, .element-form select, .element-form textarea, .project-form input { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid #39393d; border-radius: 8px; outline: 0; background: #202022; color: #e8e8e5; font-size: 10px; }
.library-filters input:focus, .library-filters select:focus, .element-form input:focus, .element-form textarea:focus, .project-form input:focus { border-color: #788d43; }
.library-result-line { display: flex; justify-content: space-between; padding: 0 21px 9px; color: #85858a; font-size: 9px; }
.library-result-line button { border: 0; background: transparent; color: #a9bf76; cursor: pointer; font-size: 9px; }
.technique-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 160px; overflow: auto; padding: 0 20px 13px; }
.technique-card { position: relative; display: flex; min-height: 123px; flex-direction: column; align-items: flex-start; padding: 11px; border: 1px solid #303034; border-radius: 10px; background: #1d1d1f; color: #eee; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease; }
.technique-card:hover, .technique-card.selected { border-color: #65783b; background: #22251c; }
.technique-card-meta { color: #9a9a9f; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.technique-card-meta i { color: var(--gold); font-style: normal; }
.technique-card strong { margin-top: 7px; font-size: 11px; }
.technique-card-copy { margin: 6px 0 17px; color: #9a9a9f; font-size: 9px; line-height: 1.45; }
.technique-add-mark { position: absolute; right: 10px; bottom: 9px; color: #a8c168; font-size: 8px; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-top: 1px solid #2c2c2f; color: #96969b; font-size: 9px; }
.element-form { display: grid; grid-template-columns: 1fr 190px; gap: 10px; padding: 16px 21px 13px; border-bottom: 1px solid #2b2b2e; }
.element-form label { display: grid; gap: 6px; color: #aaaab0; font-size: 9px; }
.element-form .element-description-label, .element-form-actions { grid-column: 1 / -1; }
.element-form textarea { resize: vertical; line-height: 1.5; }
.element-form-actions { display: flex; justify-content: space-between; align-items: center; min-height: 35px; color: #db9b80; font-size: 9px; }
.element-form-actions .generate-button { min-height: 34px; }
.element-list-heading { display: flex; justify-content: space-between; padding: 14px 21px 8px; color: #d9d9d6; font-size: 10px; }
.element-list-heading span { color: #89898e; }
.element-list { display: grid; gap: 7px; overflow: auto; padding: 0 21px 18px; }
.element-card { display: flex; align-items: flex-start; gap: 11px; padding: 11px; border: 1px solid #303034; border-radius: 10px; background: #1d1d1f; }
.element-avatar { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border: 1px solid #444a35; border-radius: 9px; background: #282c20; color: var(--gold); font-size: 16px; }
.element-copy { min-width: 0; flex: 1; }
.element-copy strong { color: #f0f0ed; font-size: 10px; }
.element-copy > span { margin-left: 8px; color: #a6bf6a; font-size: 8px; text-transform: uppercase; }
.element-copy p { margin: 5px 0 0; color: #96969b; font-size: 9px; line-height: 1.5; white-space: pre-wrap; }
.element-actions { display: flex; align-items: center; gap: 4px; }
.element-actions button { padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: #aaaab0; cursor: pointer; font-size: 9px; }
.element-actions button:hover { background: #303034; color: #f5f5f2; }
.project-panel { width: min(100%, 430px); }
.project-form { display: grid; gap: 10px; padding: 20px 22px 22px; }
.project-form label { color: #bdbdc1; font-size: 9px; }
.project-form > div { color: #db9b80; font-size: 9px; }
.project-form .generate-button { justify-content: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 970px) {
  .workspace-grid { display: flex; }
  .side-projects { display: none; }
  .projects-grid, .expanded-history .inspiration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .controls-card { grid-row: auto; }
  .stage-column { grid-row: auto; }
}
@media (max-width: 760px) {
  .library-filters { grid-template-columns: 1fr 1fr; }
  .library-filters input { grid-column: 1 / -1; }
  .technique-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 13px; padding-left: 13px; }
  .modal-header { padding: 17px 15px 13px; }
  .library-filters, .library-result-line { padding-right: 14px; padding-left: 14px; }
  .projects-grid, .expanded-history .inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .sidebar { padding: 15px 5px 10px; }
  .studio-page { padding: 18px 12px 16px; }
  .mode-tabs { margin-bottom: 7px; }
  .mode-tab { padding: 0 8px; }
  .hero-reel { height: 112px; }
  .hero-poster { height: 78px; }
  .poster-dusk { height: 96px; }
  .hero-feature h2 { max-width: 340px; font-size: 25px; }
  .prompt-addon-row { align-items: flex-start; flex-direction: column; }
  .prompt-footer { gap: 7px; }
  .prompt-tools, .prompt-actions { gap: 4px; }
  .controls-card { gap: 10px; }
  .projects-grid { gap: 8px; }
  .project-create-card, .project-card-cover { height: 102px; }
  .generation-card { height: 105px; }
  .modal-overlay { padding: 10px; }
  .modal-panel { max-height: 93vh; border-radius: 12px; }
  .technique-grid { grid-template-columns: 1fr; }
  .element-form { grid-template-columns: 1fr; padding-right: 14px; padding-left: 14px; }
  .element-form .element-description-label, .element-form-actions { grid-column: 1; }
  .element-list { padding-right: 14px; padding-left: 14px; }
}

/* Keep dialogs anchored to the viewport, even when the workspace is horizontally constrained. */
.modal-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-panel {
  width: min(100%, 1040px);
  min-width: 0;
  max-height: min(88vh, 860px);
}

@media (max-width: 970px) {
  .side-projects,
  .side-projects-heading { display: none !important; }
  .modal-overlay { padding: 12px; }
  .modal-panel { max-height: calc(100dvh - 24px); }
}

.video-frames { display: flex; flex-direction: column; gap: 7px; margin: 0 0 10px; }
.video-frames[hidden] { display: none; }
.video-frame-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.video-frame-slot { min-width: 0; padding: 8px; border: 1px solid #333337; border-radius: 7px; background: #202023; }
.video-frame-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; color: #d3d0c9; font-size: 9px; font-weight: 650; }
.video-frame-status { color: #85837d; font-size: 8px; font-weight: 400; }
.video-frame-picker { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: #a9a7a0; cursor: pointer; text-align: left; }
.video-frame-picker:hover .video-frame-filename { color: #e8e2d7; }
.video-frame-preview, .video-frame-thumbnail { display: grid; width: 43px; height: 32px; flex: 0 0 43px; place-items: center; overflow: hidden; border: 1px dashed #57544c; border-radius: 4px; color: #c9aa76; font-size: 15px; object-fit: cover; }
.video-frame-filename { min-width: 0; overflow: hidden; color: #aaa8a1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.video-frame-remove { margin: 5px 0 0 51px; padding: 0; border: 0; background: none; color: #898780; cursor: pointer; font-size: 8px; }
.video-frame-remove:hover { color: #e2c595; }
.video-frame-note { margin: 0; color: #797872; font-size: 8px; line-height: 1.4; }

.workspace-grid { display: flex; max-width: 1020px; flex-direction: column; gap: 10px; margin: 0 auto; }
.stage-column { gap: 12px; }
.composer-layout { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 10px; }
.mode-tabs { width: 66px; height: auto; flex-direction: column; gap: 4px; margin: 0; padding: 5px; border: 1px solid #29292c; border-radius: 15px; background: #19191b; }
.mode-tab { position: relative; width: 54px; min-height: 55px; height: auto; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 3px; border-radius: 10px; font-size: 8px; }
.mode-tab-label { line-height: 1.1; }
.mode-tab .tab-icon { margin: 0; }
.mode-tab .version-chip { position: absolute; top: 3px; right: 1px; padding: 1px 3px; font-size: 6px; }
.tab-new-dot { display: none; }
.prompt-card { min-width: 0; padding: 9px; border-radius: 15px; }
.prompt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
#prompt-input { min-height: 61px; margin: 8px 4px 6px; font-size: 12px; }
.composer-setup-row { display: grid; grid-template-columns: .9fr 1.1fr 1.05fr 1fr 1fr; gap: 7px; min-width: 0; }
.composer-setting { display: flex; min-width: 0; min-height: 48px; flex-direction: column; justify-content: center; padding: 5px 9px 4px; overflow: hidden; border: 1px solid #333337; border-radius: 12px; background: #29292b; color: #f0f0ed; text-align: left; }
.composer-setting[hidden], .composer-compact-slot[hidden] { display: none; }
.composer-setting-label { display: block; overflow: hidden; color: #8d8d92; font-size: 7px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.composer-setting-value { margin-top: 2px; color: #f0f0ed; font-size: 10px; }
.reference-setting { cursor: pointer; }
.reference-setting:hover { border-color: #55564e; background: #303033; }
.composer-select-slot { min-width: 0; }
.composer-setting .model-select-wrap { min-width: 0; }
.composer-setting .control-select { width: 100%; height: 20px; padding: 0 17px 0 0; border: 0; border-radius: 0; background: transparent; color: #f1f1ed; font-size: 10px; }
.composer-setting .model-select-wrap::after { top: 4px; right: 3px; color: #9c9ca0; font-size: 8px; }
.composer-setting select option { background: #242426; color: #f0f0ed; }
.video-frames { margin: 0 0 8px; }
.video-frame-slots { gap: 7px; }
.video-frame-slot { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 9px; }
.video-frame-heading { min-width: 65px; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; font-size: 8px; }
.video-frame-picker { width: auto; flex: 1; }
.video-frame-preview, .video-frame-thumbnail { width: 34px; height: 27px; flex-basis: 34px; }
.video-frame-remove { margin: 0; font-size: 7px; white-space: nowrap; }
.video-frame-note { display: none; }
.composer-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #303034; padding-top: 7px; }
.composer-toolbar-left, .composer-toolbar-right { display: flex; min-width: 0; align-items: center; gap: 6px; }
.composer-toolbar-right { margin-left: auto; }
.composer-icon-button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #3a3a3d; border-radius: 8px; background: #262629; color: #d1d1d4; cursor: pointer; font-size: 11px; }
.composer-icon-button:hover { border-color: #65664e; color: var(--gold); }
.prompt-addon-row { min-height: 0; }
.prompt-addon-row:not(:has(.addon-chip)) #addon-chips { display: none; }
.library-trigger { padding: 6px 8px; }
.library-trigger span { display: none; }
.library-trigger.has-addons span { display: inline; }
.composer-model-slot { width: clamp(148px, 23vw, 205px); min-width: 110px; }
.composer-model-slot .model-select-wrap { position: relative; }
.composer-model-slot .model-select { height: 31px; padding-right: 23px; border-color: #37373a; border-radius: 8px; background: #29292b; color: #eeece8; font-size: 8px; }
.composer-model-slot .model-select-wrap::after { top: 8px; right: 8px; color: #a0a0a5; font-size: 8px; }
.composer-compact-slot { min-width: 68px; }
.composer-compact-slot [data-setting] { gap: 3px; }
.composer-compact-slot .model-select-wrap { position: relative; min-width: 0; }
.composer-compact-slot .control-select { width: 100%; height: 30px; appearance: none; padding: 0 19px 0 8px; border: 1px solid #38383b; border-radius: 8px; background: #29292b; color: #e1e1e2; cursor: pointer; font-size: 8px; }
.composer-compact-slot .model-select-wrap::after { top: 8px; right: 7px; color: #a0a0a5; font-size: 8px; }
.composer-compact-slot select option { background: #242426; color: #f0f0ed; }
#composer-duration-slot { width: 67px; min-width: 60px; }
#composer-resolution-slot { width: 79px; min-width: 70px; }
.composer-compact-slot .option-button { min-width: 34px; min-height: 30px; padding: 0 5px; border-color: #38383b; border-radius: 8px; background: #29292b; color: #d0d0d2; font-size: 8px; }
.composer-compact-slot .option-button.selected { border-color: #4a4a4e; background: #343437; color: #f2f2ef; box-shadow: none; }
.composer-compact-slot .option-button.wide { flex: 1; }
.prompt-actions, .prompt-tools { display: contents; }
.prompt-footer { border: 0; padding: 0; }
.composer-toolbar-right .keyboard-hint { display: none; }
.composer-toolbar-right .generate-button { min-width: 112px; min-height: 40px; justify-content: center; border-radius: 10px; background: #d9ff13; box-shadow: 0 3px 0 #7c9319, 0 7px 18px #cbfa391c; color: #17190f; font-size: 9px; }
.advanced-settings { margin: 0 0 0 76px; border: 1px solid #2b2b2e; border-radius: 10px; background: #161618; }
.advanced-settings > summary { display: flex; min-height: 34px; align-items: center; gap: 9px; padding: 0 11px; color: #aaaab0; cursor: pointer; font-size: 9px; list-style: none; }
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary::after { margin-left: auto; color: #89898f; content: "⌄"; }
.advanced-settings[open] > summary::after { content: "⌃"; }
.advanced-settings > summary span { color: #6f6f74; font-size: 8px; }
.advanced-settings[open] > #controls { margin: 0 8px 8px; }
.advanced-settings .controls-card { box-shadow: none; }
.composer-setting:has(#composer-camera-slot:empty) { display: none; }

@media (max-width: 900px) {
  .composer-setup-row { grid-template-columns: repeat(5, minmax(95px, 1fr)); overflow-x: auto; scrollbar-width: thin; }
  .composer-toolbar { align-items: flex-start; flex-direction: column; }
  .composer-toolbar-left, .composer-toolbar-right { width: 100%; flex-wrap: wrap; }
  .composer-toolbar-right { justify-content: flex-end; }
  .composer-model-slot { margin-right: auto; }
}
@media (max-width: 580px) {
  .composer-layout { grid-template-columns: 54px minmax(0, 1fr); gap: 6px; }
  .mode-tabs { width: 54px; gap: 3px; padding: 4px; }
  .mode-tab { width: 44px; min-height: 48px; font-size: 7px; }
  .composer-setup-row { grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 5px; }
  .composer-setting { min-height: 44px; padding-right: 6px; padding-left: 7px; }
  #prompt-input { min-height: 62px; }
  .composer-toolbar-left, .composer-toolbar-right { gap: 5px; }
  .composer-toolbar-right { justify-content: flex-start; }
  .composer-model-slot { width: 100%; flex: 1 1 100%; }
  .composer-compact-slot { min-width: 60px; }
  .composer-toolbar-right .generate-button { min-height: 34px; }
  .advanced-settings { margin-left: 60px; }
}

/* Desktop sidebar collapse control and compact navigation state. */
.sidebar-tools { display: flex; width: 100%; align-items: center; gap: 6px; }
.sidebar-tools .workspace-switcher { flex: 1; width: auto; min-width: 0; }
.sidebar-toggle { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 1px solid #303034; border-radius: 9px; background: #1b1b1d; color: #aaaab0; cursor: pointer; }
.sidebar-toggle:hover { border-color: #48484c; background: #252527; color: #f4f4f2; }
.sidebar-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.sidebar, .main-content { transition: width .2s ease, margin-left .2s ease; }
body.sidebar-collapsed { --sidebar-width: 68px; }
body.sidebar-collapsed .sidebar { align-items: center; padding-right: 8px; padding-left: 8px; }
body.sidebar-collapsed .brand { width: 46px; justify-content: center; margin-right: 0; margin-left: 0; }
body.sidebar-collapsed .brand > span:not(.brand-mark),
body.sidebar-collapsed .brand-caption { display: none; }
body.sidebar-collapsed .brand-mark { width: 25px; height: 25px; margin: 0; }
body.sidebar-collapsed .sidebar-tools { width: auto; flex-direction: column; gap: 8px; }
body.sidebar-collapsed .sidebar-tools .workspace-switcher { display: none; }
body.sidebar-collapsed .sidebar-toggle { width: 40px; height: 40px; flex-basis: 40px; }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
body.sidebar-collapsed .workspace-name,
body.sidebar-collapsed .workspace-switcher > svg,
body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-link span:not(.nav-new),
body.sidebar-collapsed .plan-card,
body.sidebar-collapsed .profile-copy,
body.sidebar-collapsed .profile-more,
body.sidebar-collapsed .side-projects-heading > span,
body.sidebar-collapsed .side-project > span:not(.project-mini-mark) { display: none; }
body.sidebar-collapsed .side-nav { width: 100%; margin-top: 23px; }
body.sidebar-collapsed .side-link { width: 44px; height: 42px; justify-content: center; padding: 0; }
body.sidebar-collapsed .side-link svg { width: 18px; height: 18px; }
body.sidebar-collapsed .side-projects { width: 100%; margin-top: 20px; }
body.sidebar-collapsed .side-projects-heading { justify-content: center; padding: 0; }
body.sidebar-collapsed .side-projects-heading button { width: 28px; }
body.sidebar-collapsed .sidebar-projects { justify-items: center; }
body.sidebar-collapsed .side-project { width: 44px; justify-content: center; padding: 0; }
body.sidebar-collapsed .profile-button { justify-content: center; }

@media (max-width: 970px) {
  :root { --sidebar-width: 68px; }
  .sidebar-toggle { display: none; }
}
@media (max-width: 580px) {
  :root { --sidebar-width: 54px; }
  body.sidebar-collapsed { --sidebar-width: 54px; }
}

/* Sidebar workspace shortcuts and the account popover. */
.sidebar-shortcuts { display: grid; gap: 5px; margin-top: 10px; }
.sidebar-shortcut { display: flex; width: 100%; min-height: 34px; align-items: center; gap: 9px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: #d0d0d3; cursor: pointer; font-size: 10px; text-align: left; }
.sidebar-shortcut:hover { background: #222225; }
.shortcut-icon { display: grid; width: 17px; height: 17px; place-items: center; color: #a5a5aa; font-size: 15px; }
.shortcut-arrow { margin-left: auto; color: #77777c; font-size: 18px; }
.upgrade-shortcut { background: #251b20; color: #f0e9eb; }
.upgrade-shortcut:hover { background: #302027; }
.upgrade-shortcut .shortcut-icon { color: #f14d78; }
.shortcut-badge { margin-left: auto; padding: 3px 6px; border-radius: 99px; background: #ed3472; color: white; font-size: 8px; font-weight: 700; }
.profile-button { gap: 8px; }
.profile-bell { display: grid; width: 24px; height: 24px; place-items: center; margin-left: auto; border-radius: 50%; background: #1d1d20; color: #85858b; font-size: 13px; }
.profile-button:hover .profile-bell { color: #d1d1d5; }
.account-menu[hidden] { display: none !important; }
.account-menu { position: fixed; z-index: 60; bottom: 12px; left: calc(var(--sidebar-width) + 8px); display: flex; width: min(292px, calc(100vw - var(--sidebar-width) - 20px)); max-height: calc(100vh - 24px); flex-direction: column; gap: 8px; padding: 10px 9px 8px; overflow-y: auto; border: 1px solid #303034; border-radius: 17px; background: #1d1d20; box-shadow: 0 18px 60px #0009; color: #f1f1f2; }
.account-menu-identity { display: flex; min-height: 40px; align-items: center; gap: 10px; padding: 2px 5px; }
.account-menu-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 2px solid #aaa; border-radius: 50%; background: radial-gradient(circle at 54% 48%, #d7ef76 0 35%, #40434a 38% 100%); box-shadow: 0 0 0 2px #62656b; color: #19191b; font-size: 0; }
.account-menu-name { display: grid; gap: 2px; }
.account-menu-name strong { color: #f4f4f4; font-size: 11px; font-weight: 500; }
.account-menu-name small { color: #919196; font-size: 10px; }
.account-menu button { color: inherit; cursor: pointer; font: inherit; }
.account-menu-wide { display: flex; min-height: 33px; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 99px; background: #2d2d30; font-size: 10px !important; }
.account-menu-wide:hover { background: #38383b; }
.account-menu-wide > span { color: #aaaab0; font-size: 16px; }
.account-usage { padding: 10px 10px 4px; border-radius: 14px; background: #2b2b2e; }
.account-usage-heading { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.account-usage-heading strong { font-weight: 500; }
.account-usage-heading > span { color: #99999e; font-size: 9px; }
.account-usage-note { margin-top: 6px; color: #8e8e93; font-size: 8px; }
.account-usage-meter { display: flex; gap: 2px; margin: 8px 0 10px; }
.account-usage-meter i { height: 5px; flex: 1; border-radius: 99px; background: #454549; }
.account-usage-meter i:nth-child(-n+2) { background: #cafa16; }
.account-offer-row { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-top: 1px solid #444448; font-size: 10px; }
.account-offer-row > span { display: flex; align-items: center; gap: 8px; }
.account-offer-row > span i { color: #d4fa1d; font-size: 12px; font-style: normal; }
.account-offer-row button { min-width: 41px; height: 24px; padding: 0 10px; border: 0; border-radius: 99px; background: #cafa16; color: #151610; font-size: 9px; font-weight: 700; }
.account-offer-row button:hover { background: #d9ff38; }
.account-menu-links { display: grid; padding-top: 2px; }
.account-menu-links > button { display: flex; min-height: 32px; align-items: center; gap: 10px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #e8e8e9; font-size: 10px !important; text-align: left; }
.account-menu-links > button:hover, .account-language-row:hover { background: #29292c; }
.account-menu-links > button > span:first-child { width: 15px; color: #929297; font-size: 13px; text-align: center; }
.account-menu-links > button .menu-new { margin-left: auto; padding: 3px 6px; border-radius: 99px; background: #32391f; color: #cafa16; font-size: 8px; }
.account-language-row { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 0 9px; border-radius: 7px; color: #e8e8e9; font-size: 10px; }
.account-language-row > span { display: flex; align-items: center; gap: 10px; }
.account-language-row > span > span { width: 15px; color: #929297; font-size: 12px; text-align: center; }
.account-language-row button { display: flex; align-items: center; gap: 8px; padding: 5px 0 5px 8px; border: 0; background: transparent; color: #929297 !important; font-size: 9px !important; }
.account-signout { display: flex; min-height: 34px; align-items: center; gap: 10px; padding: 0 9px; border: 0; border-top: 1px solid #38383b; background: transparent; color: #e7e7e9; font-size: 10px !important; text-align: left; }
.account-signout:hover { color: #fff; }
.account-signout > span { width: 15px; color: #929297; font-size: 13px; text-align: center; }
body.sidebar-collapsed .sidebar-shortcut { justify-content: center; width: 44px; padding: 0; }
body.sidebar-collapsed .sidebar-shortcut > span:not(.shortcut-icon) { display: none; }
body.sidebar-collapsed .profile-button { padding-right: 0; padding-left: 0; }
body.sidebar-collapsed .profile-bell { display: none; }

/* Elements library: a full workspace view with a browsable, filterable continuity grid. */
.studio-page[hidden],
.elements-page[hidden] { display: none !important; }
body[data-view="elements"] .topbar { display: none; }
.elements-page { display: flex; max-width: 1680px; min-height: 100vh; flex-direction: column; margin: 0 auto; padding: 25px 27px 18px; }
.elements-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 21px; }
.elements-page-heading { min-width: 0; }
.elements-breadcrumb { display: flex; align-items: center; gap: 8px; color: #86868c; font-size: 10px; }
.elements-breadcrumb svg { width: 12px; height: 12px; fill: none; stroke: #626268; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.elements-breadcrumb strong { color: #e7e7e4; font-weight: 600; }
.elements-page-heading h1 { margin: 18px 0 5px; color: #f4f4f1; font-family: Manrope, sans-serif; font-size: clamp(24px, 2.5vw, 31px); font-weight: 600; letter-spacing: -.055em; }
.elements-page-heading p { margin: 0; color: #85858b; font-size: 10px; }
.elements-page-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding-bottom: 1px; }
.elements-secondary-action, .elements-add-action, .elements-tool-button { display: inline-flex; min-height: 35px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #343438; border-radius: 8px; background: #1c1c1f; color: #e4e4e1; cursor: pointer; font-size: 10px; font-weight: 550; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.elements-secondary-action:hover, .elements-tool-button:hover { border-color: #55555a; background: #252528; color: #fff; }
.elements-add-action { border-color: #d7f315; background: #d9ff13; color: #17190f; font-weight: 750; }
.elements-add-action:hover { border-color: #e8ff63; background: #e5ff42; }
.elements-add-action > span { font-size: 15px; line-height: .8; }
.elements-secondary-action svg, .elements-tool-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.elements-toolbar { display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #27272a; }
.elements-tabs { display: flex; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.elements-tabs::-webkit-scrollbar { display: none; }
.element-category-tab { min-height: 31px; flex: 0 0 auto; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #99999f; cursor: pointer; font-size: 9px; transition: background .15s ease, color .15s ease; }
.element-category-tab:hover { color: #f0f0ed; }
.element-category-tab.active { background: #27272a; color: #f3f3f1; }
.elements-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.element-search { display: flex; width: min(220px, 20vw); min-width: 145px; height: 32px; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; color: #85858b; }
.element-search:focus-within { border-color: #39393d; background: #19191b; }
.element-search svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.element-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #f0f0ed; font: inherit; font-size: 9px; }
.element-search input::placeholder { color: #79797f; }
.element-search kbd { flex: 0 0 auto; color: #737379; white-space: nowrap; }
.elements-tool-button { min-height: 31px; padding: 0 8px; border-color: transparent; background: transparent; color: #96969c; font-size: 9px; font-weight: 500; }
.elements-tool-button svg { width: 13px; height: 13px; }
.elements-tool-button.is-list svg { transform: rotate(90deg); }
.elements-filter-panel { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 10px 12px; border: 1px solid #2d2d30; border-radius: 9px; background: #171719; }
.elements-filter-panel[hidden] { display: none; }
.elements-filter-panel label { color: #98989e; font-size: 9px; }
.elements-filter-panel select { min-width: 150px; padding: 7px 9px; border: 1px solid #36363a; border-radius: 7px; background: #222225; color: #e4e4e1; font: inherit; font-size: 9px; }
.elements-filter-panel button, .elements-results-row button { margin-left: auto; padding: 5px 7px; border: 0; background: transparent; color: #cafa46; cursor: pointer; font-size: 9px; }
.elements-filter-panel button:hover, .elements-results-row button:hover { color: #e8ff90; }
.elements-results-row { display: flex; min-height: 42px; align-items: center; gap: 12px; color: #85858b; font-size: 9px; }
.elements-results-note { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #707076; }
.elements-results-note kbd { color: #b2b2b8; }
.elements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); align-content: start; gap: 14px; padding: 1px 0 24px; }
.element-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid #2a2a2d; border-radius: 10px; background: #171719; transition: border-color .16s ease, transform .16s ease; }
.element-card:hover { border-color: #48484d; transform: translateY(-2px); }
.element-card-art { --element-tone: #cafa46; position: relative; display: grid; min-height: 156px; aspect-ratio: 1.08; place-items: center; overflow: hidden; border-bottom: 1px solid #29292d; background: radial-gradient(ellipse at 28% 18%, color-mix(in srgb, var(--element-tone) 33%, transparent), transparent 52%), radial-gradient(ellipse at 72% 88%, #252529, transparent 60%), linear-gradient(145deg, #252528, #111113 70%); }
.element-card[data-kind="character"] .element-card-art { --element-tone: #b88dca; background: radial-gradient(ellipse at 52% 28%, #bb8ea955, transparent 45%), radial-gradient(ellipse at 52% 100%, #5e526566, transparent 55%), linear-gradient(145deg, #302532, #171519 72%); }
.element-card[data-kind="location"] .element-card-art { --element-tone: #7bbbc6; background: radial-gradient(ellipse at 50% 25%, #80c9d255, transparent 45%), linear-gradient(180deg, #273439 0%, #1b2226 54%, #141517 100%); }
.element-card[data-kind="object"] .element-card-art { --element-tone: #d0ae72; background: radial-gradient(ellipse at 52% 40%, #d0ad7252, transparent 40%), linear-gradient(145deg, #393126, #181715 70%); }
.element-card[data-kind="style"] .element-card-art { --element-tone: #adc77c; background: radial-gradient(ellipse at 36% 27%, #afc97c55, transparent 40%), radial-gradient(ellipse at 70% 80%, #7468a544, transparent 45%), linear-gradient(145deg, #2d3327, #171719 72%); }
.element-card-art::before, .element-card-art::after { position: absolute; border: 1px solid color-mix(in srgb, var(--element-tone) 25%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.element-card-art::before { width: 74%; aspect-ratio: 1; transform: rotate(-22deg) scaleY(.63); }
.element-card-art::after { width: 53%; aspect-ratio: 1; transform: rotate(30deg) scaleY(.58); }
.element-card-orbit { position: absolute; top: 50%; left: 50%; width: 32%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--element-tone) 34%, transparent); border-radius: 50%; transform: translate(-50%,-50%); }
.element-card-emblem { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid color-mix(in srgb, var(--element-tone) 55%, #4a4a4e); border-radius: 50%; background: color-mix(in srgb, var(--element-tone) 16%, #151518); box-shadow: 0 12px 35px #0005, inset 0 0 25px color-mix(in srgb, var(--element-tone) 12%, transparent); color: #f5f3ed; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.04em; }
.element-card-art-kind { position: absolute; top: 10px; left: 10px; padding: 4px 7px; border: 1px solid #ffffff1a; border-radius: 99px; background: #1010129c; color: #e5e4df; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.element-card-handle { position: absolute; right: 10px; bottom: 9px; left: 10px; overflow: hidden; color: #d7d5ce; font-size: 8px; text-overflow: ellipsis; text-shadow: 0 1px 8px #000; white-space: nowrap; }
.element-card-edit { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #ffffff1a; border-radius: 7px; background: #1010129c; color: #eee; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s ease; }
.element-card:hover .element-card-edit, .element-card-edit:focus-visible { opacity: 1; }
.element-card-body { min-width: 0; padding: 10px 11px 8px; }
.element-card-meta { display: flex; align-items: center; gap: 6px; color: #99999f; font-size: 8px; }
.element-kind-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--element-tone, #cafa46); }
.element-card-date { margin-left: auto; color: #6f6f75; }
.element-card-body h2 { overflow: hidden; margin: 7px 0 4px; color: #f2f1ee; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.element-card-body p { display: -webkit-box; min-height: 27px; overflow: hidden; margin: 0; color: #89898f; font-size: 8px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.element-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 7px; border-top: 1px solid #28282b; color: #717177; font-size: 8px; }
.element-card-footer button { display: grid; width: 23px; height: 22px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #8e8e94; cursor: pointer; font-size: 15px; }
.element-card-footer button:hover { background: #2a2a2d; color: #f3f3f0; }
.elements-empty-state { display: grid; min-height: 300px; grid-column: 1 / -1; place-content: center; justify-items: center; padding: 28px; border: 1px dashed #303034; border-radius: 12px; background: radial-gradient(ellipse at center, #1c1c1e, #121214 72%); text-align: center; }
.elements-empty-icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 13px; border: 1px solid #50543a; border-radius: 50%; background: #22251a; color: #cafa46; font-size: 20px; }
.elements-empty-state strong { color: #e9e9e5; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 550; }
.elements-empty-state p { max-width: 340px; margin: 7px 0 14px; color: #89898f; font-size: 9px; line-height: 1.55; }
.elements-page-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #242427; color: #626268; font-size: 7px; letter-spacing: .1em; }
.elements-page-footer span:last-child { color: #77777d; letter-spacing: 0; }
.elements-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.elements-grid.is-list .element-card { flex-direction: row; align-items: stretch; }
.elements-grid.is-list .element-card-art { width: 170px; min-height: 112px; flex: 0 0 170px; aspect-ratio: auto; border-right: 1px solid #29292d; border-bottom: 0; }
.elements-grid.is-list .element-card-emblem { width: 45px; height: 45px; font-size: 15px; }
.elements-grid.is-list .element-card-body { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; padding: 11px 14px; }
.elements-grid.is-list .element-card-body p { min-height: 0; max-width: 680px; -webkit-line-clamp: 2; }
.elements-grid.is-list .element-card-footer { margin-top: auto; }
.element-editor-panel { width: min(100%, 540px); }
.element-editor-panel .element-form { padding: 17px 22px 21px; border-bottom: 0; }
.element-editor-panel .element-form-actions { padding-top: 6px; }
.element-editor-panel .element-form-actions .generate-button { min-width: 110px; justify-content: center; }

@media (max-width: 1050px) {
  .elements-page { padding: 22px 20px 16px; }
  .elements-page-header { align-items: flex-start; flex-direction: column; gap: 16px; }
  .elements-page-heading h1 { margin-top: 11px; }
  .elements-page-actions { align-self: flex-end; margin-top: -48px; }
  .elements-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .element-card-art { min-height: 145px; }
}
@media (max-width: 760px) {
  .elements-page { padding: 19px 14px 14px; }
  .elements-page-actions { margin-top: 0; align-self: stretch; }
  .elements-page-actions button { flex: 1; }
  .elements-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; padding: 9px 0; }
  .elements-tabs { width: 100%; }
  .elements-tools { width: 100%; justify-content: space-between; }
  .element-search { width: auto; min-width: 0; flex: 1; }
  .elements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .element-card-art { min-height: 130px; }
  .element-card-emblem { width: 48px; height: 48px; font-size: 15px; }
  .elements-results-note { display: none; }
  .elements-grid.is-list .element-card-art { width: 112px; flex-basis: 112px; }
}
@media (max-width: 430px) {
  .elements-grid:not(.is-list) { grid-template-columns: minmax(0, 1fr); }
  .element-card-art { min-height: 190px; aspect-ratio: 1.5; }
  .elements-page-footer { flex-direction: column; }
}

.element-card-art.has-cover::before, .element-card-art.has-cover::after { display: none; }
.element-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.element-card-art.has-cover .element-card-handle { z-index: 1; padding: 16px 8px 0; background: linear-gradient(0deg, #050507c7, transparent); }

#element-editor-modal { place-items: stretch; padding: 0; background: #111113e8; backdrop-filter: none; }
#element-editor-modal .element-editor-panel { display: grid; width: 100%; height: 100vh; height: 100dvh; max-height: none; grid-template-rows: 60px minmax(0, 1fr); overflow: hidden; border: 0; border-radius: 0; background: #1c1c1f; box-shadow: none; }
.element-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 15px; border-bottom: 1px solid #313135; background: linear-gradient(100deg, #222225, #28282b 52%, #202023); }
.element-editor-header h2 { margin: 0; color: #f6f6f4; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
.element-editor-header .modal-close { width: 32px; height: 32px; flex-basis: 32px; border-color: #37373b; border-radius: 50%; background: #303034; color: #c4c4c8; }
.element-form { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 356px; grid-template-rows: minmax(0, 1fr) 64px; gap: 0; padding: 0; border: 0; }
.element-media-column { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; align-items: center; justify-content: center; overflow: auto; padding: 24px; background: radial-gradient(ellipse at 48% 45%, #29292c, #202023 74%); }
.element-dropzone { display: grid; width: min(100%, 512px); min-height: 286px; flex: 0 0 auto; place-content: center; justify-items: center; gap: 20px; padding: 24px; border: 1px dashed #55555a; border-radius: 12px; background: radial-gradient(ellipse at center, #39393d, #2d2d30 72%); color: #f5f5f2; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.element-dropzone:hover, .element-dropzone.is-dragging { border-color: #bbd75a; background: radial-gradient(ellipse at center, #40413a, #303033 74%); }
.element-dropzone.is-dragging { transform: scale(1.01); }
.element-drop-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #77777b; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #77777a, #454549 70%); box-shadow: 0 10px 28px #0005; }
.element-drop-icon svg { width: 23px; height: 23px; fill: none; stroke: #f5f5f2; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.element-dropzone strong { font-size: 13px; font-weight: 500; }
.element-dropzone > span:last-child { margin-top: -12px; color: #aaaab0; font-size: 10px; }
.element-media-gallery { display: grid; width: min(100%, 720px); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; margin-top: 14px; }
.element-media-gallery:not(.has-media) { display: flex; justify-content: center; }
.element-media-empty { margin: 2px 0; color: #77777d; font-size: 10px; text-align: center; }
.element-media-thumb { position: relative; min-width: 0; overflow: hidden; border: 1px solid #48484d; border-radius: 8px; background: #171719; }
.element-media-thumb img, .element-media-thumb video { display: block; width: 100%; height: 78px; object-fit: cover; background: #101012; }
.element-media-thumb > span { display: block; overflow: hidden; padding: 6px 7px; color: #bdbdc1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.element-media-remove { position: absolute; top: 5px; right: 5px; display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #ffffff45; border-radius: 50%; background: #111113bb; color: #fff; cursor: pointer; }
.element-fields-column { display: grid; min-width: 0; min-height: 0; align-content: start; gap: 12px; overflow: auto; padding: 17px 16px 20px; border-left: 1px solid #171719; background: linear-gradient(155deg, #29292c, #242427 65%, #28282b); }
.element-fields-column > label { display: grid; gap: 5px; color: #f1f1ee; font-size: 11px; }
.element-fields-column input, .element-fields-column select, .element-fields-column textarea { min-height: 40px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; background: #37373b; color: #efefed; font-size: 12px; }
.element-fields-column input::placeholder, .element-fields-column textarea::placeholder { color: #a1a1a6; }
.element-fields-column input:focus, .element-fields-column select:focus, .element-fields-column textarea:focus { border-color: #8a9d48; outline: 0; }
.element-fields-column label small { margin-top: -1px; color: #77777d; font-size: 9px; }
.element-fields-column textarea { min-height: 80px; resize: vertical; line-height: 1.4; }
.element-id-input { position: relative; display: flex; align-items: center; }
.element-id-input > span { position: absolute; left: 12px; color: #a6a6aa; font-size: 14px; }
.element-id-input input { padding-left: 32px; }
.element-custom-properties { padding-top: 12px; border-top: 1px solid #3b3b3f; }
.element-custom-heading { margin-bottom: 10px; color: #737379; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.element-property-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 28px; gap: 6px; margin: 0 0 7px; }
.element-property-row input { min-height: 34px; padding: 7px 8px; font-size: 10px; }
.element-property-remove { border: 0; border-radius: 7px; background: transparent; color: #97979c; cursor: pointer; font-size: 16px; }
.element-property-remove:hover { background: #3a3030; color: #efa391; }
.element-add-property { display: inline-flex; align-items: center; gap: 8px; min-height: 29px; padding: 4px 6px; border: 0; background: transparent; color: #a6a6ab; cursor: pointer; font-size: 13px; }
.element-add-property span { font-size: 11px; }
.element-add-property:hover { color: #eef0e9; }
.element-editor-message { min-height: 16px; color: #efa391; font-size: 10px; line-height: 1.4; }
.element-editor-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 16px; border-top: 1px solid #303034; background: #1c1c1f; }
.element-cancel-button { min-height: 40px; padding: 0 17px; border: 0; border-radius: 10px; background: #333337; color: #f0f0ee; cursor: pointer; font-size: 12px; }
.element-editor-footer .generate-button { min-width: 98px; min-height: 40px; justify-content: center; border-radius: 10px; font-size: 12px; }

@media (max-width: 760px) {
  #element-editor-modal .element-editor-panel { grid-template-rows: 54px minmax(0, 1fr); }
  .element-editor-header { padding: 0 12px; }
  .element-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 40vh) minmax(300px, 1fr) 62px; }
  .element-media-column { padding: 16px 12px; }
  .element-dropzone { min-height: 210px; gap: 15px; }
  .element-media-gallery { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
  .element-media-thumb img, .element-media-thumb video { height: 60px; }
  .element-fields-column { grid-row: 2; gap: 11px; padding: 15px 14px; border-top: 1px solid #171719; border-left: 0; }
  .element-editor-footer { grid-row: 3; padding: 0 12px; }
}