:root {
  color-scheme: dark;
  --ink: #f6f6f6;
  --muted: #a4a4a4;
  --soft: #d5d5d5;
  --line: rgba(221, 221, 221, .12);
  --line-strong: rgba(221, 221, 221, .2);
  --paper: #0b0b0b;
  --panel: #151515;
  --panel-deep: #1d1d1d;
  --brand-1: #ababab;
  --brand-2: #cdcdcd;
  --brand-3: #b5b5b5;
  --brand-4: #d7d7d7;
  --lime: var(--brand-1);
  --orange: var(--brand-3);
  --blue: var(--brand-1);
  --success: #cbcbcb;
  --shadow: 0 22px 65px rgba(0, 0, 0, .38);
  --glass: rgba(23, 23, 23, .68);
  --glass-bright: rgba(255, 255, 255, .055);
  accent-color: #ababab;
}

html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 82% 8%, rgba(111, 111, 111, .2), transparent 31rem),
    radial-gradient(ellipse at 12% 48%, rgba(165, 165, 165, .13), transparent 34rem),
    radial-gradient(ellipse at 78% 84%, rgba(145, 145, 145, .1), transparent 35rem),
    linear-gradient(135deg, #0b0b0b, #111111 48%, #0b0b0b);
  color: var(--ink);
}
body::before {
  z-index: 0;
  opacity: .58;
  background:
    radial-gradient(ellipse at 74% 11%, rgba(127, 127, 127, .17), transparent 25rem),
    radial-gradient(ellipse at 21% 70%, rgba(173, 173, 173, .1), transparent 29rem);
  pointer-events: none;
}
.app-shell { position: relative; z-index: 1; width: 100%; min-height: 100vh; }
.sidebar {
  z-index: 5;
  border-color: var(--line);
  background: rgba(12, 12, 12, .78);
  box-shadow: 8px 0 40px rgba(0, 0, 0, .12);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.brand, .mobile-brand { color: var(--ink); }
.brand-mark {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: linear-gradient(145deg, #d4d4d4, #929292 58%, #c9c9c9);
  color: #141414;
  box-shadow: 0 8px 30px rgba(143, 143, 143, .26);
}
.nav-list { margin-top: 38px; }
.nav-link {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #ababab;
}
.nav-link:hover, .nav-link.active {
  border-color: rgba(171, 171, 171, .16);
  background: linear-gradient(100deg, rgba(171, 171, 171, .15), rgba(205, 205, 205, .045));
  color: #ffffff;
  box-shadow: inset 2px 0 #ababab;
}
.nav-icon, .eyebrow, .coin { color: #bdbdbd; }
.sidebar-note {
  border-color: var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}
.sidebar-note strong { color: var(--ink); }
.sidebar-footer, .topbar-context, .topbar-caption { color: var(--muted); }
.status-dot { background: #cbcbcb; box-shadow: 0 0 14px rgba(203, 203, 203, .55); }
.main-content { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  min-width: 0;
  height: 76px;
  gap: clamp(12px, 1.6vw, 26px);
  padding-inline: clamp(20px, 3vw, 52px);
  border-color: var(--line);
  background: rgba(11, 11, 11, .72);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.topbar-context { margin-right: auto; }
.global-search {
  width: clamp(220px, 31vw, 450px);
  min-width: 0;
  border-color: var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  color: var(--muted);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.global-search input {
  border: 0;
  background: transparent;
  color: var(--ink);
}
.global-search input::placeholder { color: #8a8a8a; }
.topbar-actions { min-width: 0; gap: 9px; }
.upgrade-button, .chat-button, .credit-pill, .avatar {
  min-height: 39px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--ink);
}
.upgrade-button {
  border-color: transparent;
  background: linear-gradient(110deg, #bcbcbc, #858585 62%, #c0c0c0);
  color: #141414;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(139, 139, 139, .23);
}
.upgrade-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.chat-button:hover, .credit-pill:hover { border-color: rgba(171, 171, 171, .55); background: rgba(171, 171, 171, .09); }
.chat-dot { background: #cbcbcb; box-shadow: 0 0 10px rgba(203, 203, 203, .6); }
.coin { color: #cdcdcd; }
.avatar { border-color: rgba(171, 171, 171, .36); background: linear-gradient(145deg, #272727, #1a1a1a); color: #ececec; }
.search-toggle { display: none; }
.sidebar-toggle {
  display: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .045);
  color: #d9d9d9;
  font-size: 17px;
  cursor: pointer;
}
.sidebar-scrim { display: none; }

.view {
  width: min(100%, 1760px);
  max-width: none;
  padding: clamp(30px, 3.5vw, 58px) clamp(20px, 3vw, 52px) 104px;
}
.view[data-view-panel="home"].active {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .78fr);
  align-items: start;
  column-gap: clamp(16px, 2vw, 30px);
  row-gap: 22px;
}
.home-hero, .category-chips, .section-block, .home-footer { grid-column: 1 / -1; }
.home-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  grid-template-areas: "copy art" "desc art";
  align-items: stretch;
  gap: 14px clamp(24px, 4vw, 68px);
  margin: 0;
}
.home-hero > div { grid-area: copy; align-self: end; }
.home-hero p {
  grid-area: desc;
  align-self: start;
  max-width: 470px;
  color: #b6b6b6;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.75;
}
h1 {
  max-width: 820px;
  color: #f6f6f6;
  font-size: clamp(48px, 5.2vw, 88px);
  line-height: .98;
  letter-spacing: -.065em;
}
h1 em, h2 em {
  background: linear-gradient(100deg, #d2d2d2, #9d9d9d 46%, #cbcbcb 88%);
  background-clip: text;
  color: transparent;
}
h2 { color: #f2f2f2; }
.eyebrow { color: #bcbcbc; }
.section-subtitle { color: #a6a6a6; }

.quick-create, .home-spotlight, .tool-workspace, .account-card,
.account-feature-card, .auth-modal, .chat-drawer, .gallery-card,
.inspiration-card, .community-card, .catalog-model-card,
.workflow-card, .model-card, .empty-state, .ticket-detail {
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(29, 29, 29, .77), rgba(18, 18, 18, .76));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}
.quick-create {
  grid-column: 1;
  position: relative;
  padding: clamp(20px, 2.1vw, 34px);
  border-top: 1px solid rgba(186, 186, 186, .55);
  background:
    radial-gradient(ellipse at 92% 0, rgba(128, 128, 128, .12), transparent 40%),
    linear-gradient(145deg, rgba(29, 29, 29, .88), rgba(17, 17, 17, .86));
}
.quick-create[aria-busy="true"], .tool-workspace[aria-busy="true"] {
  border-color: rgba(171, 171, 171, .55);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(171, 171, 171, .08);
}
.home-recent { margin-top: 8px; }
.home-recent .gallery { min-height: 105px; }
.empty-symbol svg, .generation-placeholder > span svg { width: 26px; height: 26px; display: block; }
.quick-create::after {
  width: 72px;
  height: 72px;
  border-color: rgba(205, 205, 205, .5);
  border-radius: 0 18px 0 0;
}
.create-head { align-items: center; }
.create-head h2 { font-size: clamp(21px, 2vw, 28px); }
.mode-switch { gap: 7px; margin-top: 22px; border-color: var(--line); }
.mode-tab {
  border-radius: 10px 10px 0 0;
  color: #aeaeae;
}
.mode-tab:hover, .mode-tab.active {
  border-bottom-color: #bcbcbc;
  color: #e5e5e5;
}
.quick-create textarea, .tool-workspace textarea {
  min-height: 150px;
  color: #f4f4f4;
  font-size: clamp(17px, 1.55vw, 22px);
}
textarea::placeholder, input::placeholder { color: #878787; opacity: 1; }
.prompt-hints, .prompt-hint-key, .char-count, .reference-state { color: #979797; }
.prompt-bottom, .studio-controls { border-color: var(--line); }
.studio-batch-guidance {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #b3b3b3;
  font-size: 12px;
  line-height: 1.6;
}
.generate-button, .chat-form button {
  border: 0;
  border-radius: 13px;
  background: linear-gradient(110deg, #c0c0c0, #949494 58%, #c6c6c6);
  color: #141414;
  box-shadow: 0 10px 28px rgba(140, 140, 140, .2);
}
.generate-button:hover, .chat-form button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.settings-row, .settings-grid { gap: 12px; }
.field-label { color: #b3b3b3; }
select, input, .support-form textarea, .ticket-reply-form textarea,
.account-form input, .account-form textarea, .account-form select,
.prompt-preset-select {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(11, 11, 11, .7);
  color: var(--ink);
}
select:focus, input:focus, textarea:focus { border-color: rgba(171, 171, 171, .78); }
.composer-status.error, .form-error { color: #bfbfbf; }
.tool-link, .text-button { color: #bbbbbb; }
.tool-link:hover, .text-button:hover { color: #ffffff; }

.home-spotlight {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  align-self: stretch;
  padding: clamp(17px, 1.8vw, 26px);
  background:
    radial-gradient(ellipse at 100% 0, rgba(179, 179, 179, .09), transparent 45%),
    linear-gradient(145deg, rgba(29, 29, 29, .78), rgba(17, 17, 17, .76));
}
.studio-metrics { grid-column: 1 / -1; }
.prompt-guide-copy { margin: 14px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.prompt-guide-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.prompt-guide-steps li { display: flex; align-items: center; gap: 10px; color: #e7e7e7; font-size: 11px; }
.prompt-guide-steps li span { color: var(--brand-2); font: 10px var(--mono); }
.prompt-example-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 22px;
  padding: 11px 13px;
  border: 1px solid rgba(171, 171, 171, .28);
  border-radius: 11px;
  background: rgba(171, 171, 171, .1);
  color: #e5e5e5;
  font-size: 11px;
  text-align: left;
}
.prompt-example-button:hover { border-color: rgba(171, 171, 171, .6); background: rgba(171, 171, 171, .16); }
.spotlight-heading { align-items: end; }
.spotlight-heading h2 { font-size: clamp(20px, 1.7vw, 27px); }
.spotlight-tabs {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0, 0, 0, .17);
}
.spotlight-tabs button { border-radius: 8px; color: #aeaeae; }
.spotlight-tabs button.active {
  border: 1px solid rgba(175, 175, 175, .22);
  background: rgba(165, 165, 165, .14);
  color: #ececec;
}
.spotlight-item {
  border-radius: 11px;
  color: var(--ink);
}
.spotlight-item:hover { border-color: var(--line-strong); background: var(--glass-bright); }
.spotlight-item small, .community-cta p { color: #a9a9a9; }
.community-cta { border-color: var(--line); }
.community-cta b { color: var(--ink); }

.category-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.category-chips button, .filter, .model-filter-row button,
.outline-button, .account-detail-row button, .account-row-actions button,
.community-card-actions button, .catalog-auto-renew {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #d8d8d8;
}
.category-chips button:hover, .filter:hover, .filter.active,
.model-filter-row button:hover, .model-filter-row button.active,
.outline-button:hover, .catalog-row:hover {
  border-color: rgba(173, 173, 173, .5);
  background: rgba(171, 171, 171, .12);
  color: #ffffff;
}
.section-block { margin-top: clamp(32px, 4vw, 60px); }
.section-bar { align-items: end; margin-bottom: 19px; }
.section-bar h2 { font-size: clamp(24px, 2.4vw, 36px); }
.tool-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tool-feature {
  min-height: clamp(170px, 17vw, 250px);
  border: 1px solid var(--line-strong);
  border-radius: 19px;
  background: #151515;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}
.tool-feature::before { background: linear-gradient(180deg, rgba(10, 10, 10, .06), rgba(10, 10, 10, .91)); }
.tool-feature:hover, .gallery-card:hover, .mini-tool-grid button:hover,
.workflow-card:hover, .catalog-model-card:hover {
  border-color: rgba(190, 190, 190, .48);
  transform: translateY(-3px);
}
.feature-copy b { color: #ffffff; }
.feature-copy small { color: #c6c6c6; }
.feature-icon, .mini-tool-grid button > span, .popular-tool-grid button > span,
.workflow-icon {
  border: 1px solid rgba(198, 198, 198, .18);
  border-radius: 11px;
  background: rgba(166, 166, 166, .14);
  color: #cecece;
  backdrop-filter: blur(10px);
}
.video-feature .feature-icon, .voice-feature .feature-icon, .music-feature .feature-icon {
  background: rgba(195, 195, 195, .13);
  color: #d4d4d4;
}
.mini-tool-grid, .popular-tool-grid { gap: 12px; }
.mini-tool-grid button, .popular-tool-grid button, .catalog-model-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  color: var(--ink);
}
.mini-tool-grid button:hover, .popular-tool-grid button:hover,
.catalog-model-card:hover { background: rgba(159, 159, 159, .08); }
.popular-tool-grid button small, .feature-copy small { color: var(--muted); }
.tool-layout { gap: 18px; }
.tool-menu {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(18, 18, 18, .64);
}
.tool-menu-item {
  border: 1px solid transparent;
  border-radius: 12px;
  color: #b0b0b0;
}
.tool-menu-item:hover, .tool-menu-item.active {
  border-color: rgba(169, 169, 169, .2);
  background: rgba(161, 161, 161, .1);
  color: #ededed;
}
.workflow-grid { gap: 12px; }
.workflow-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.workflow-card.active { border-color: rgba(173, 173, 173, .5); background: rgba(158, 158, 158, .1); }
.workflow-guidance { border-color: rgba(200, 200, 200, .2); border-radius: 14px; background: rgba(189, 189, 189, .07); color: #e4e4e4; }
.catalog-model-grid { gap: 12px; }
.catalog-model-type, .workflow-model { color: #cfcfcf; }
.catalog-model-cost, .balance-card strong { color: #d1d1d1; }
.model-filter-row button, .model-count { color: var(--muted); }
.model-card { border-color: var(--line); border-radius: 17px; }
.model-card .model-art { border-radius: 13px; }
.model-card.model-image .model-art { background-image: radial-gradient(ellipse at 72% 24%, rgba(171, 171, 171, .42), transparent 38%), linear-gradient(145deg, #2b2b2b, #1b1b1b 62%, #2c2c2c); }
.model-card.model-video .model-art { background-image: radial-gradient(ellipse at 30% 20%, rgba(202, 202, 202, .37), transparent 38%), linear-gradient(145deg, #323232, #1a1a1a 62%, #2b2b2b); }
.model-card.model-audio .model-art { background-image: radial-gradient(ellipse at 70% 18%, rgba(181, 181, 181, .3), transparent 38%), linear-gradient(145deg, #2a2a2a, #1b1b1b 62%, #242424); }
.model-card.model-music .model-art { background-image: radial-gradient(ellipse at 28% 18%, rgba(215, 215, 215, .32), transparent 38%), linear-gradient(145deg, #313131, #1b1b1b 62%, #2b2b2b); }
.model-rail { gap: 12px; }
.gallery, .inspiration-grid, .community-grid { gap: 14px; }
.gallery-card, .community-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(23, 23, 23, .72); }
.gallery-card img, .gallery-card video, .community-card img, .community-card video { background: #1a1a1a; }
.gallery-meta, .community-card-meta { color: var(--muted); }
.inspiration-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(30, 30, 30, .86), rgba(19, 19, 19, .86));
  color: var(--ink);
}
.inspiration-card:nth-child(3n + 2) { background: linear-gradient(145deg, rgba(35, 35, 35, .84), rgba(20, 20, 20, .88)); }
.inspiration-card:nth-child(3n) { background: linear-gradient(145deg, rgba(32, 32, 32, .78), rgba(19, 19, 19, .9)); }
.inspiration-card p { color: #c7c7c7; }
.inspiration-card small, .tool-badge { color: #cccccc; }
.empty-state { border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(255, 255, 255, .035); color: var(--muted); }
.empty-symbol { color: #bdbdbd; }
.community-mosaic { gap: 12px; }
.community-art { border: 1px solid var(--line); border-radius: 15px; }
.account-grid { gap: 14px; }
.account-card, .account-feature-card { border-radius: 17px; }
.account-detail-row {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  color: var(--ink);
}
.notification-item { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .035); color: var(--ink); }
.chat-drawer, .auth-modal { border-radius: 22px; background: rgba(19, 19, 19, .94); }
.modal-backdrop { background: rgba(5, 5, 5, .72); backdrop-filter: blur(8px); }
.message.assistant { border-color: var(--line); background: rgba(255, 255, 255, .04); color: #e8e8e8; }
.message.user { background: linear-gradient(110deg, #bcbcbc, #c7c7c7); color: #141414; }
.chat-form { border-color: var(--line); }
.chat-form button { color: #141414; }
.mobile-nav { display: none; }
.skip-link { border-color: #bbbbbb; border-radius: 10px; background: #191919; color: #ffffff; }
:focus-visible { outline-color: #b9b9b9; outline-offset: 3px; }
::selection { background: rgba(166, 166, 166, .48); color: #ffffff; }
button, a, input, textarea, select { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.app-shell button:not(:disabled) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-shell button:disabled { cursor: not-allowed; opacity: .58; filter: saturate(.72); transform: none; box-shadow: none; }
.app-shell button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.app-shell button:focus-visible, .app-shell a:focus-visible {
  outline: 2px solid rgba(188, 188, 188, .9);
  outline-offset: 3px;
}
.app-shell button svg { flex: 0 0 auto; }
.app-shell :is(.text-button, .tool-link, .hero-cta, .prompt-example-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.app-shell :is(.hero-cta, .prompt-example-button) { min-height: 44px; }
.app-shell :is(.hero-cta, .prompt-example-button, .upgrade-button, .install-button,
  .generate-button, .chat-button, .outline-button, .sidebar-toggle, .search-toggle) {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease,
    box-shadow .18s ease, filter .18s ease;
}
.app-shell :is(.hero-cta, .prompt-example-button, .upgrade-button, .install-button,
  .generate-button, .chat-button, .outline-button, .sidebar-toggle, .search-toggle):hover:not(:disabled) {
  transform: translateY(-1px);
}
.app-shell :is(.text-button, .tool-link, .hero-cta, .prompt-example-button,
  .sidebar-toggle, .search-toggle) svg { width: 17px; height: 17px; display: block; }
.app-shell .hero-float-arrow svg { width: 15px; height: 15px; display: block; }
.app-shell .prompt-enhance-button [data-prompt-enhance-icon] svg { width: 16px; height: 16px; display: block; }
.app-shell .prompt-enhance-button { display: inline-flex; align-items: center; gap: 7px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 1500px) {
  .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { padding-inline: 20px; }
  .view[data-view-panel="home"].active { grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr); column-gap: 28px; }
  .home-hero { grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { padding-inline: 13px; }
  .topbar { padding-inline: 22px; }
  .topbar-context { display: none; }
  .view { padding-inline: 24px; }
  .view[data-view-panel="home"].active { grid-template-columns: minmax(0, 1fr) minmax(255px, .72fr); }
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(265px, .82fr); gap: 16px 24px; }
  .home-hero h1 { font-size: clamp(46px, 5vw, 62px); }
  .tool-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .app-shell { display: block; width: 100%; min-height: 100vh; margin-inline: auto; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 18;
    display: flex;
    width: min(300px, calc(100vw - 54px));
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    padding: max(22px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
    border-right: 1px solid var(--line-strong);
    background: rgba(13, 13, 13, .97);
    box-shadow: 20px 0 60px rgba(0, 0, 0, .48);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-scrim:not([hidden]) {
    position: fixed;
    z-index: 17;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(5, 5, 5, .66);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .sidebar-scrim[hidden] { display: none; }
  .sidebar-toggle { display: grid; flex: 0 0 38px; }
  .topbar { justify-content: flex-start; }
  .main-content { width: 100%; }
  .topbar {
    height: 66px;
    padding-inline: 14px;
    gap: 9px;
    background: rgba(11, 11, 11, .82);
  }
  .mobile-brand { display: flex; gap: 8px; font-size: 17px; }
  .mobile-brand .brand-mark { width: 32px; height: 32px; }
  .topbar-context { display: none; }
  .topbar-actions { gap: 6px; margin-left: auto; }
  .global-search { display: none; }
  .topbar.search-open .global-search {
    position: absolute;
    top: 58px;
    right: 10px;
    left: 10px;
    z-index: 6;
    display: flex;
    width: auto;
    background: rgba(21, 21, 21, .97);
  }
  .search-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
    color: #d9d9d9;
  }
  .upgrade-button, .chat-button { display: none; }
  .credit-pill { min-height: 34px; padding: 7px 9px; font-size: 10px; }
  .view { width: 100%; padding: 26px 17px calc(104px + env(safe-area-inset-bottom)); }
  .view[data-view-panel="home"].active { grid-template-columns: minmax(0, 1fr); row-gap: 17px; }
  .home-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "desc"; gap: 15px; margin: 0; }
  .home-hero::after { min-height: clamp(200px, 43vw, 300px); border-radius: 20px; }
  .home-hero h1 { font-size: clamp(43px, 9vw, 62px); }
  .home-hero p { max-width: 560px; font-size: 13px; }
  .quick-create, .home-spotlight { grid-column: 1; width: 100%; }
  .quick-create { padding: 17px; border-radius: 17px; }
  .home-spotlight { grid-row: auto; margin: 0; padding: 16px; }
  .home-hero, .category-chips, .section-block, .home-footer { grid-column: 1; }
  .section-block { margin-top: 30px; }
  .tool-layout { grid-template-columns: minmax(0, 1fr); }
  .tool-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool-menu-item { padding: 10px 7px; font-size: 10px; }
  .tool-menu-item small, .tool-menu-item > span:last-child { display: none; }
  .tool-menu-item > span:nth-child(2) { display: block; margin-top: 6px; }
  .tool-feature-grid, .mini-tool-grid, .popular-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tool-feature { min-height: 155px; padding: 11px; }
  .gallery, .inspiration-grid, .account-grid, .catalog-model-grid, .workflow-grid, .community-grid { grid-template-columns: 1fr; }
  .community-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-art:nth-child(n + 4) { display: flex; }
  .profile-card, .catalog-card { grid-column: auto; }
  .profile-card { grid-template-columns: auto 1fr; }
  .profile-card .outline-button { grid-column: 1 / -1; width: 100%; }
  .settings-row, .settings-grid, .studio-controls { grid-template-columns: 1fr; }
  .prompt-bottom { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .generate-button { width: 100%; margin-left: 0; }
  .home-footer { grid-template-columns: 1fr; }
  .mobile-nav {
    position: fixed;
    z-index: 8;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px 5px 3px;
    border: 1px solid var(--line-strong);
    border-radius: 17px;
    background: rgba(20, 20, 20, .88);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .38);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  .mobile-nav a { min-height: 46px; color: #b3b3b3; font-size: 9px; }
  .mobile-nav a:not(.mobile-create) { border-radius: 12px; }
  .mobile-nav a:not(.mobile-create):hover,
  .mobile-nav a:not(.mobile-create):focus-visible,
  .mobile-nav a:not(.mobile-create).active {
    background: rgba(171, 171, 171, .09);
  }
  .mobile-nav a span { color: #c2c2c2; }
  .mobile-nav a.active { color: #ffffff; }
  .mobile-nav a.mobile-create {
    position: relative;
    top: -13px;
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav a.mobile-create span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 3px solid var(--paper);
    border-radius: 50%;
    background: linear-gradient(145deg, #bfbfbf, #878787 60%, #c6c6c6);
    color: #131313;
    box-shadow: 0 6px 22px rgba(144, 144, 144, .32);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .mobile-nav a.mobile-create:hover span,
  .mobile-nav a.mobile-create:focus-visible span {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 9px 28px rgba(144, 144, 144, .42);
  }
  .mobile-nav a.mobile-create:focus-visible { outline: 2px solid #b9b9b9; outline-offset: 2px; }
  .mobile-nav a.mobile-create small { color: #cecece; }
  .chat-drawer { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .topbar { padding-inline: 11px; }
  .credit-pill { padding: 7px; }
  .credit-pill > span:last-child { display: none; }
  .view { padding: 23px 13px calc(101px + env(safe-area-inset-bottom)); }
  .home-hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .home-hero::after { min-height: 205px; padding: 16px; }
  .quick-create, .tool-workspace { padding: 15px; }
  .create-head, .section-bar, .tool-workspace-top, .inline-heading { gap: 12px; }
  .mode-switch { overflow-x: auto; }
  .mode-tab { flex: 0 0 auto; padding-inline: 11px; }
  .tool-feature-grid, .mini-tool-grid, .popular-tool-grid { gap: 8px; }
  .tool-feature { min-height: 140px; }
  .feature-copy b, .mini-tool-grid button b { font-size: 11px; }
  .feature-copy small, .mini-tool-grid button small { font-size: 9px; }
  .mini-tool-grid button { min-height: 78px; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 9px 7px; }
  .mini-tool-grid button > span { width: 27px; height: 27px; }
  .community-mosaic { gap: 8px; }
  .community-art { min-height: 130px; padding: 9px; }
  .section-bar h2 { font-size: 21px; }
  .account-detail-row { align-items: flex-start; }
}
@media (max-width: 820px) {
  #create-composer { scroll-margin-block: 20vh 24px; }
  .quick-create textarea, .tool-workspace textarea { scroll-margin-top: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

body .app-shell :is(.quick-create, .home-spotlight, .tool-workspace,
  .account-card, .account-feature-card, .auth-modal, .chat-drawer,
  .gallery-card, .inspiration-card, .community-card, .catalog-model-card,
  .workflow-card, .model-card, .empty-state, .notification-item,
  .ticket-detail) {
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(29, 29, 29, .8), rgba(18, 18, 18, .82));
  color: var(--ink);
}
body .app-shell :is(.inspiration-card:nth-child(3n + 2)) {
  background: linear-gradient(145deg, rgba(35, 35, 35, .84), rgba(20, 20, 20, .88));
}
body .app-shell :is(.inspiration-card:nth-child(3n)) {
  background: linear-gradient(145deg, rgba(32, 32, 32, .78), rgba(19, 19, 19, .9));
}

.brand-mark {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: transparent;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.coin img, .credit-nav .nav-icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.credit-nav .nav-icon img {
  width: 16px;
  height: 16px;
}
body .app-shell :is(.tool-feature, .mini-tool-grid button,
  .popular-tool-grid button, .catalog-row, .ticket-row, .community-comment,
  .category-chips button, .global-search, .filter, .model-filter-row button,
  .outline-button, .account-detail-row, .spotlight-tabs, .spotlight-item,
  .chat-button, .credit-pill, .search-result) {
  border-color: var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
}
body .app-shell :is(.nav-link:hover, .nav-link.active, .tool-menu-item:hover,
  .tool-menu-item.active, .mode-tab:hover, .mode-tab.active, .filter:hover,
  .filter.active, .model-filter-row button:hover, .model-filter-row button.active,
  .popular-tool-grid button:hover, .popular-tool-grid button.active,
  .catalog-model-card:hover, .workflow-card:hover, .workflow-card.active) {
  border-color: rgba(182, 182, 182, .46);
  background: rgba(165, 165, 165, .11);
  color: #ffffff;
}
body .app-shell :is(.feature-icon, .mini-tool-grid button > span,
  .popular-tool-grid button > span, .workflow-icon) {
  border-color: rgba(198, 198, 198, .2);
  background: rgba(166, 166, 166, .14);
  color: #cecece;
}
body .app-shell :is(.topbar-context, .topbar-caption, .prompt-hints,
  .prompt-hint-key, .char-count, .reference-state, .section-subtitle,
  .home-hero p, .page-heading > p, .gallery-meta, .spotlight-item small,
  .community-cta p, .model-count, .account-detail-row small,
  .search-result small, .search-result-type, .feature-copy small) {
  color: var(--muted);
}
body .app-shell h1, body .app-shell h2, body .app-shell h3,
body .app-shell h4, body .app-shell p, body .app-shell small { color: var(--ink); }
body .app-shell :is(.home-hero p, .page-heading > p, .section-subtitle,
  .gallery-meta, .spotlight-item small, .community-cta p, .model-count,
  .account-detail-row small, .search-result small, .search-result-type,
  .feature-copy small) { color: var(--muted); }
body .app-shell :is(.home-hero::after, .feature-art, .spotlight-thumb,
  .community-art, .model-art, .gallery-card img, .gallery-card video,
  .inspiration-card img, .community-card img, .community-card video) {
  filter: none;
}

.inspiration-featured { margin-bottom: 14px; }
.inspiration-featured[hidden] { display: none; }
.inspiration-featured-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(0, 1.2fr);
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.inspiration-featured-card.no-image { grid-template-columns: 1fr; }
.inspiration-featured-card img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.inspiration-featured-copy { display: grid; align-content: center; gap: 9px; padding: 20px; }
.inspiration-featured-copy small, .inspiration-card-copy small { color: var(--brand-2); font: 10px var(--mono); text-transform: uppercase; }
.inspiration-featured-copy b { font: 500 24px var(--serif); }
.inspiration-featured-copy > span, .inspiration-card-copy > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.inspiration-featured-copy strong { color: var(--brand-1); font-size: 11px; }
.inspiration-card { min-width: 0; width: 100%; display: grid; grid-template-rows: auto 1fr auto; align-items: start; gap: 0; padding: 0; text-align: left; }
.inspiration-card > img { width: 100%; max-height: 160px; aspect-ratio: 1.45; object-fit: cover; }
.inspiration-card-icon { display: grid; place-items: center; min-height: 90px; color: var(--brand-2); font-size: 30px; }
.inspiration-card-copy { display: grid; gap: 8px; padding: 14px 16px 4px; }
.inspiration-card-copy b { font-size: 15px; }
.inspiration-card-cta { margin: auto 16px 14px; color: var(--brand-1); font-size: 11px; }
.inspiration-detail { margin: 0 0 22px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.inspiration-detail[hidden] { display: none; }
.inspiration-detail-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.inspiration-detail-head small { color: var(--brand-2); font: 10px var(--mono); text-transform: uppercase; }
.inspiration-detail-head h3 { margin-top: 7px; font: 500 24px var(--serif); }
.inspiration-detail > p { margin: 14px 0; color: var(--muted); line-height: 1.6; }
.inspiration-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.studio-extra-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); }
.studio-extra-controls[hidden] { display: none; }
.studio-chain-heading, #studio-chain-steps { grid-column: 1 / -1; }
.studio-chain-heading, .studio-chain-step-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.studio-chain-heading span { color: var(--muted); font: 10px var(--mono); }
.studio-chain-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.studio-chain-step-head { grid-column: 1 / -1; }
.studio-chain-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.studio-chain-step-head b { color: var(--brand-2); font: 10px var(--mono); }
.studio-chain-step textarea { min-height: 76px; resize: vertical; }
.studio-chain-previous { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.studio-chain-previous input { width: auto; }
@media (max-width: 700px) {
  .inspiration-featured-card { grid-template-columns: 1fr; }
  .inspiration-featured-card img { max-height: 220px; min-height: 150px; }
  .studio-extra-controls, .studio-chain-step { grid-template-columns: minmax(0, 1fr); }
  .studio-chain-options { grid-template-columns: minmax(0, 1fr); }
  .studio-chain-step-head, #studio-chain-steps { grid-column: 1; }
}

.install-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--brand-1);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
}
.install-button:hover { filter: brightness(1.12); }
@media (max-width: 820px) {
  .install-button { width: 35px; min-height: 35px; padding: 0; border-radius: 8px; }
  .install-label { display: none; }
}

.upgrade-button, .generate-button, .chat-form button {
  background: linear-gradient(110deg, var(--brand-1), var(--brand-2));
  color: #141414;
}
.upgrade-button:hover, .generate-button:hover, .chat-form button:hover {
  background: linear-gradient(110deg, #c2c2c2, #dbdbdb);
  color: #141414;
}
.install-button, .mobile-nav a.mobile-create span {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #141414;
}
.mode-tab:hover, .mode-tab.active, .filter:hover, .filter.active,
.model-filter-row button:hover, .model-filter-row button.active,
.spotlight-tabs button.active {
  border-color: rgba(171, 171, 171, .5);
  background: rgba(171, 171, 171, .12);
  color: #e5e5e5;
}
.tool-link, .text-button, .auth-switch button,
.account-links button:hover, .balance-card strong,
.catalog-model-type, .workflow-model, .empty-symbol,
.search-toggle, .nav-icon, .tool-symbol, .coin {
  color: var(--brand-1);
}
.composer-status.error, .form-error, .inspiration-card small, .tool-badge {
  color: var(--brand-3);
}
body .app-shell :is(.feature-icon, .mini-tool-grid button > span,
  .popular-tool-grid button > span, .workflow-icon) {
  border-color: rgba(171, 171, 171, .24);
  background: rgba(171, 171, 171, .12);
  color: #cecece;
}
.video-feature .feature-icon, .voice-feature .feature-icon,
.music-feature .feature-icon {
  border-color: rgba(205, 205, 205, .24);
  background: rgba(205, 205, 205, .12);
  color: var(--brand-2);
}
.prompt-example-button {
  border-color: rgba(171, 171, 171, .28);
  background: rgba(171, 171, 171, .1);
  color: #e5e5e5;
}
.prompt-example-button:hover {
  border-color: rgba(171, 171, 171, .6);
  background: rgba(171, 171, 171, .16);
}

.home-hero {
  grid-template-areas: "copy art" "desc art";
  gap: 12px clamp(24px, 4vw, 68px);
  margin: 0;
}
.home-hero > .home-hero-copy { grid-area: copy; align-self: end; }
.home-hero > .hero-art { grid-area: art; }
.home-hero::after { display: none; }
.home-hero h1 {
  max-width: 720px;
  font-size: clamp(48px, 5.25vw, 82px);
  line-height: .98;
}
.home-hero h1 em { white-space: nowrap; }
.home-hero p { max-width: 440px; }
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 23px;
  padding: 12px 16px;
  border: 1px solid rgba(201, 201, 201, .25);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(171, 171, 171, .14), rgba(205, 205, 205, .08));
  color: #f1f1f1;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.hero-cta span { color: var(--brand-2); font-size: 16px; }
.hero-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(171, 171, 171, .58);
  box-shadow: 0 10px 28px rgba(12, 12, 12, .3);
}
.hero-art {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: clamp(285px, 29vw, 410px);
  place-items: center;
  isolation: isolate;
}
.hero-art::before {
  position: absolute;
  z-index: -1;
  inset: 8% 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(126, 126, 126, .23), rgba(159, 159, 159, .1) 42%, transparent 72%);
  content: "";
  filter: blur(22px);
}
.hero-art-frame {
  position: relative;
  width: min(84%, 390px);
  overflow: hidden;
  padding: 13px;
  border: 1px solid rgba(227, 227, 227, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(32, 32, 32, .94), rgba(14, 14, 14, .95));
  box-shadow: 0 26px 75px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .11);
  transform: rotate(-2deg);
}
.hero-art-topline, .hero-art-caption { display: flex; justify-content: space-between; gap: 12px; }
.hero-art-topline {
  padding: 2px 3px 11px;
  color: #999999;
  font: 9px var(--mono);
  letter-spacing: .09em;
}
.hero-art-scene {
  position: relative;
  height: clamp(150px, 16vw, 220px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 72% 78%, rgba(181, 181, 181, .3), transparent 24%),
    linear-gradient(180deg, #333333 0%, #6a6a6a 45%, #999999 75%, #363636 100%);
}
.hero-art-scene::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 11, 11, .35));
  content: "";
}
.hero-art-orb {
  position: absolute;
  top: 14%;
  right: 19%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3f3f3, #cecece 46%, rgba(181, 181, 181, .65) 70%);
  box-shadow: 0 0 42px rgba(206, 206, 206, .32);
}
.hero-art-horizon {
  position: absolute;
  right: -8%;
  bottom: -48%;
  left: -8%;
  height: 93%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(130deg, #4b4b4b, #262626 72%);
  transform: rotate(-5deg);
}
.hero-art-ridge {
  position: absolute;
  bottom: 8%;
  display: block;
  width: 75%;
  height: 54%;
  clip-path: polygon(0 100%, 32% 16%, 50% 56%, 68% 7%, 100% 100%);
}
.hero-art-ridge-back {
  right: 20%;
  background: linear-gradient(145deg, rgba(184, 184, 184, .84), rgba(72, 72, 72, .92) 67%);
}
.hero-art-ridge-front {
  right: -15%;
  bottom: 0;
  width: 82%;
  height: 43%;
  background: linear-gradient(150deg, rgba(205, 205, 205, .65), #272727 70%);
  clip-path: polygon(0 100%, 27% 31%, 44% 65%, 74% 0, 100% 100%);
}
.hero-art-caption {
  align-items: center;
  padding: 12px 3px 2px;
}
.hero-art-caption > span { color: #9f9f9f; font: 9px var(--mono); }
.hero-art-caption strong { color: #f2f2f2; font: 500 12px var(--serif); }
.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(227, 227, 227, .2);
  border-radius: 12px;
  background: rgba(21, 21, 21, .88);
  box-shadow: 0 13px 35px rgba(0, 0, 0, .28);
  color: #e8e8e8;
  font-size: 10px;
  backdrop-filter: blur(14px);
}
.hero-float-top { top: 19%; right: 0; }
.hero-float-top .status-dot { width: 7px; height: 7px; }
.hero-float-arrow { margin-left: 5px; color: var(--brand-2); }
.hero-float-bottom { bottom: 13%; left: 0; padding: 9px 11px; }
.hero-float-bottom > span:last-child { margin-left: 3px; color: #bdbdbd; font-size: 9px; }
.hero-swatch { width: 9px; height: 9px; border-radius: 50%; }
.swatch-violet { background: var(--brand-1); }
.swatch-mint { background: var(--brand-2); }
.swatch-pink { background: var(--brand-3); }

.studio-metrics {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(20, 20, 20, .58);
}
.metric-card {
  position: relative;
  gap: 6px;
  min-width: 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.metric-card + .metric-card { border-left: 1px solid var(--line); }
.metric-tag { color: var(--brand-2); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.metric-card strong { font-size: clamp(14px, 1.5vw, 19px); letter-spacing: -.035em; }
.metric-card p { max-width: 260px; font-size: 10px; line-height: 1.45; }

@media (min-width: 821px) and (max-width: 1100px) {
  .home-hero { grid-template-areas: "copy art" "desc art"; }
  .hero-art { min-height: 285px; }
  .hero-art-frame { width: 83%; }
}
@media (max-width: 820px) {
  .home-hero { grid-template-areas: "copy" "art" "desc"; }
  .home-hero h1 { font-size: clamp(43px, 9vw, 62px); }
  .hero-cta { margin-top: 17px; }
  .hero-art { min-height: clamp(245px, 56vw, 330px); }
  .hero-art-frame { width: min(78%, 390px); }
  .hero-art-scene { height: clamp(150px, 39vw, 210px); }
  .studio-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card { padding: 12px 10px; }
  .metric-card p { font-size: 9px; }
}
@media (max-width: 560px) {
  .home-hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .hero-art { min-height: 245px; }
  .hero-art-frame { width: 82%; padding: 10px; border-radius: 16px; }
  .hero-art-scene { height: 150px; }
  .hero-float-top { top: 13%; right: -3px; }
  .hero-float-bottom { bottom: 10%; left: -3px; }
  .studio-metrics { grid-template-columns: 1fr; }
  .metric-card { grid-template-columns: minmax(85px, .4fr) minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 12px; }
  .metric-tag { grid-column: 1; grid-row: 1; }
  .metric-card strong { grid-column: 2; grid-row: 1; font-size: 13px; }
  .metric-card p { grid-column: 1 / -1; max-width: none; margin: 0; }
  .metric-card + .metric-card { border-top: 1px solid var(--line); border-left: 0; }
}

body.theme-light {
  color-scheme: light;
  --brand-1: #454545;
  --brand-2: #7d7d7d;
  --brand-3: #777777;
  --brand-4: #949494;
  --lime: #6f6f6f;
  --orange: #707070;
  --blue: #676767;
  --glass: rgba(255, 255, 255, .86);
  --glass-bright: rgba(28, 28, 28, .045);
  --shadow: 0 20px 55px rgba(31, 31, 31, .12);
  background:
    radial-gradient(ellipse at 82% 7%, rgba(146, 146, 146, .13), transparent 31rem),
    radial-gradient(ellipse at 12% 48%, rgba(131, 131, 131, .08), transparent 34rem),
    linear-gradient(135deg, #f8f8f8, #f1f1f1 48%, #f5f5f5);
  color: var(--ink);
}
body.theme-light::before {
  opacity: .25;
  background:
    radial-gradient(ellipse at 74% 11%, rgba(140, 140, 140, .12), transparent 25rem),
    radial-gradient(ellipse at 21% 70%, rgba(134, 134, 134, .08), transparent 29rem);
}
body.theme-light .app-shell { background: transparent; }
body.theme-light .sidebar {
  border-color: var(--line);
  background: rgba(249, 249, 249, .92);
  box-shadow: 8px 0 40px rgba(34, 34, 34, .06);
}
body.theme-light .brand, body.theme-light .mobile-brand { color: var(--ink); }
body.theme-light .brand-mark {
  background: linear-gradient(145deg, #ededed, #d4d4d4 58%, #d8d8d8);
  box-shadow: 0 8px 26px rgba(98, 98, 98, .15);
}
body.theme-light .nav-link { color: #606060; }
body.theme-light .nav-link:hover, body.theme-light .nav-link.active {
  border-color: rgba(111, 111, 111, .2);
  background: linear-gradient(100deg, rgba(111, 111, 111, .12), rgba(119, 119, 119, .035));
  color: #1e1e1e;
  box-shadow: inset 2px 0 #6f6f6f;
}
body.theme-light .sidebar-note { border-color: var(--line); color: var(--muted); }
body.theme-light .sidebar-note strong { color: var(--ink); }
body.theme-light .topbar {
  border-color: var(--line);
  background: rgba(248, 248, 248, .84);
  box-shadow: 0 8px 26px rgba(34, 34, 34, .035);
}
body.theme-light .upgrade-button {
  background: linear-gradient(110deg, #e0e0e0, #c5c5c5 62%, #d8d8d8);
  color: #1e1e1e;
  box-shadow: 0 8px 24px rgba(98, 98, 98, .14);
}
body.theme-light .app-shell h1,
body.theme-light .app-shell h2,
body.theme-light .app-shell h3,
body.theme-light .app-shell h4,
body.theme-light .app-shell p,
body.theme-light .app-shell small { color: var(--ink); }
body.theme-light .app-shell h1 em,
body.theme-light .app-shell h2 em {
  background: linear-gradient(100deg, #595959, #717171 52%, #707070);
  background-clip: text;
  color: transparent;
}
body.theme-light .app-shell :is(.home-hero p, .page-heading > p, .section-subtitle,
  .gallery-meta, .spotlight-item small, .community-cta p, .model-count,
  .account-detail-row small, .search-result small, .search-result-type,
  .feature-copy small, .topbar-context, .topbar-caption) { color: var(--muted); }
body.theme-light .app-shell :is(.quick-create, .home-spotlight, .tool-workspace,
  .account-card, .account-feature-card, .auth-modal, .chat-drawer,
  .gallery-card, .inspiration-card, .community-card, .catalog-model-card,
  .workflow-card, .model-card, .empty-state, .notification-item,
  .ticket-detail) {
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(245, 245, 245, .94));
  color: var(--ink);
  box-shadow: 0 18px 46px rgba(34, 34, 34, .075), inset 0 1px rgba(255, 255, 255, .8);
}
body.theme-light .app-shell :is(.quick-create, .home-spotlight, .tool-workspace) {
  background: linear-gradient(145deg, #ffffff, #f3f3f3);
}
body.theme-light .app-shell :is(.global-search, .chat-button, .credit-pill,
  .category-chips button, .filter, .model-filter-row button, .outline-button,
  .account-detail-row, .account-row-actions button, .spotlight-tabs,
  .spotlight-item, .search-result, .tool-feature, .mini-tool-grid button,
  .popular-tool-grid button, .catalog-row, .ticket-row) {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
}
body.theme-light .app-shell :is(.nav-link:hover, .nav-link.active, .tool-menu-item:hover,
  .tool-menu-item.active, .mode-tab:hover, .mode-tab.active, .filter:hover,
  .filter.active, .model-filter-row button:hover, .model-filter-row button.active,
  .popular-tool-grid button:hover, .popular-tool-grid button.active,
  .catalog-model-card:hover, .workflow-card:hover, .workflow-card.active) {
  border-color: rgba(111, 111, 111, .38);
  background: rgba(111, 111, 111, .09);
  color: #1e1e1e;
}
body.theme-light .app-shell :is(.quick-create textarea, .tool-workspace textarea) { color: var(--ink); }
body.theme-light .app-shell :is(.mode-tab, .prompt-guide-steps li, .hero-cta,
  .hero-float-card, .hero-float-bottom > span:last-child) { color: var(--ink); }
body.theme-light .app-shell .hero-cta {
  border-color: rgba(111, 111, 111, .25);
  background: linear-gradient(110deg, rgba(111, 111, 111, .09), rgba(119, 119, 119, .06));
}
body.theme-light .app-shell .hero-float-card {
  border-color: rgba(34, 34, 34, .12);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 13px 35px rgba(34, 34, 34, .12);
}
body.theme-light .app-shell .studio-metrics { background: rgba(255, 255, 255, .7); }
body.theme-light .mobile-nav {
  border-color: var(--line-strong);
  background: rgba(250, 250, 250, .94);
  box-shadow: 0 15px 40px rgba(34, 34, 34, .14);
}
body.theme-light .mobile-nav a.active { color: var(--ink); }

.balance-card { border-top: 2px solid var(--brand-1); }
.balance-card strong { display: block; margin-top: 4px; }
.credit-breakdown { color: var(--muted); font-size: 11px; line-height: 1.5; }
.workspace-preferences { display: grid; gap: 16px; margin-top: auto; }
.workspace-preferences .field-label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.workspace-preferences select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-deep); color: var(--ink); }
.workspace-preferences .preference-option { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 12px; line-height: 1.45; }
.workspace-preferences input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--brand-1); }
.assistant-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-bottom: 1px solid var(--line); background: var(--panel-deep); }
.assistant-mode-switch button { min-height: 38px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; }
.assistant-mode-switch button.active { border-color: var(--line-strong); background: var(--panel); color: var(--ink); box-shadow: 0 3px 12px rgba(0, 0, 0, .12); }
.chat-drawer { overflow: hidden; border-radius: 14px; background: linear-gradient(155deg, var(--panel), var(--panel-deep)); color: var(--ink); }
.chat-head { padding-right: 54px; }
.chat-messages { max-height: min(46vh, 420px); }
.message { display: grid; gap: 9px; border-radius: 10px; }
.message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-use-prompt { justify-self: start; min-height: 34px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel-deep); color: var(--ink); font-size: 11px; }
.chat-use-prompt:hover { border-color: var(--brand-1); }
.chat-form input { min-width: 0; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel-deep); color: var(--ink); }
.chat-form button { flex: 0 0 42px; border-radius: 8px; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
body.theme-light .assistant-mode-switch,
body.theme-light .chat-drawer { background: linear-gradient(155deg, #ffffff, #f4f4f4); }
body.theme-light .assistant-mode-switch button.active { background: #ffffff; }
body.theme-light .chat-form input { background: #ffffff; }
@media (max-width: 760px) {
  .settings-pane-grid { grid-template-columns: minmax(0, 1fr); }
  .premium-panel { min-height: auto; }
  .account-grid .profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .profile-card #account-action { grid-column: 2; justify-self: start; }
  .profile-settings, .help-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-settings .profile-lookup { grid-template-columns: minmax(0, 1fr); }
  .chat-drawer { width: min(460px, calc(100vw - 24px)); }
}