:root {
  --canvas: #f5f5ef;
  --surface: #fffefa;
  --surface-strong: #ffffff;
  --surface-soft: #eeefe7;
  --ink: #202b24;
  --ink-deep: #18231d;
  --muted: #80877d;
  --muted-strong: #626d62;
  --line: #e1e5d9;
  --line-strong: #cdd4c5;
  --lime: #d9f877;
  --lime-strong: #c4eb55;
  --lime-soft: #eff7dc;
  --error: #a94038;
  --green: #477744;
  --shadow: 0 12px 34px -18px rgb(35 48 31 / 20%);
  --shadow-card: 0 18px 38px -20px rgb(35 48 31 / 22%);
  --radius: 22px;
  --sidebar-width: 244px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
  font-family: 'Manrope', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 13px; line-height: 1.6; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button, input, textarea, select { outline: none; }
button { border: 0; }
button:disabled { cursor: not-allowed; opacity: .48; transform: none !important; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 750; letter-spacing: -.045em; line-height: 1.2; }
::selection { background: var(--lime); color: var(--ink-deep); }
:focus-visible { outline: 3px solid #93b343; outline-offset: 4px; }
[hidden] { display: none !important; }

/* The shell stays quiet, so the creative workspace can do the talking. */
.app-shell { min-height: 100dvh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 30px 19px 20px;
  border-right: 1px solid var(--line);
  background: #fbfcf7;
  transition: transform 260ms var(--ease);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; }
.brand > svg { width: 36px; height: 36px; color: var(--ink-deep); }
.brand-name { font-size: 23px; font-weight: 800; letter-spacing: -.075em; line-height: 1.2; white-space: nowrap; }
.brand-tag { display: block; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; margin-top: 3px; }
.nav-group { margin-top: 36px; }
.nav-caption { padding: 0 14px; margin: 0 0 11px; color: #92988d; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 47px; margin: 4px 0; padding: 11px 14px; border-radius: 12px; background: transparent; color: #727d71; text-align: left; font-size: 12px; font-weight: 650; transition: background 180ms, color 180ms, transform 180ms; }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-item:hover { color: var(--ink); background: #f0f3e9; transform: translateX(2px); }
.nav-item.active { background: var(--ink); color: #f8faef; box-shadow: 0 4px 10px rgb(29 42 30 / 9%); }
.nav-item.active svg { color: var(--lime); }
.nav-item .count { display: grid; place-items: center; min-width: 24px; height: 21px; margin-left: auto; padding: 0 6px; border: 1px solid #e1e5d8; border-radius: 6px; color: #8b9387; font-size: 11px; font-weight: 650; }
.nav-item.active .count { border-color: #516049; color: var(--lime); background: #34422c; }
.sidebar-bottom { margin-top: auto; padding-top: 24px; }
.upgrade-card { position: relative; overflow: hidden; border: 1px solid #dce6c6; border-radius: 17px; padding: 18px 15px; margin: 0 3px 18px; background: #eff4e4; }
.upgrade-card::after { content: ''; position: absolute; width: 73px; height: 73px; right: -25px; top: -30px; border: 15px solid #dbe8c2; border-radius: 50%; opacity: .6; pointer-events: none; }
.upgrade-card > svg { width: 23px; height: 23px; margin-bottom: 9px; color: #536443; }
.upgrade-card h3, .upgrade-card strong { display: block; font-size: 12px; font-weight: 750; letter-spacing: -.02em; }
.upgrade-card p { color: #899177; font-size: 11px; line-height: 1.65; margin-top: 6px; }
.upgrade-card button { width: 100%; min-height: 34px; margin-top: 13px; border: 1px solid #d9e1c8; border-radius: 8px; color: #576347; background: #fbfcf6; font-size: 11px; font-weight: 750; transition: background 180ms; }
.upgrade-card button:hover { background: var(--lime); }
.profile-btn { display: flex; align-items: center; gap: 11px; width: 100%; border-top: 1px solid var(--line); padding: 17px 7px 0; background: transparent; text-align: left; }
.avatar { display: grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #5e6b4e; background: #e5ebd8; font-size: 11px; font-weight: 800; }
.profile-meta { min-width: 0; flex: 1; }
.profile-meta strong { display: block; font-size: 11px; font-weight: 750; }
.profile-meta small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.profile-btn > svg { width: 16px; height: 16px; color: #91998a; }
.workspace { margin-left: var(--sidebar-width); max-width: 1684px; padding: 27px 44px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 41px; margin-bottom: 35px; }
.breadcrumbs { display: flex; align-items: center; gap: 12px; color: #9ca393; font-size: 11px; }
.breadcrumbs svg { width: 15px; height: 15px; }
.breadcrumbs > :last-child { color: #52604d; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.credit-pill { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdf8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.credit-pill > svg { width: 15px; height: 15px; color: #6a794f; }
.credit-pill strong { font-weight: 800; }
.credit-pill small, .credit-pill span + span { color: var(--muted); font-size: 11px; font-weight: 500; }
.credit-pill:hover { border-color: #bfc9aa; background: #fff; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdf8; color: #7f8977; transition: color 160ms, border-color 160ms, background 160ms; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { border-color: #bdc8ae; color: var(--ink); background: #fff; }
.mobile-menu { display: none; }
#view { animation: view-in 330ms var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Studio */
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: #829073; font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #9ab867; }
.page-title { font-size: clamp(28px, 2.7vw, 37px); line-height: 1.25; font-weight: 750; margin-top: 6px; }
.page-subtitle { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.intro-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.studio-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 244px; overflow: hidden; border-radius: 25px; background: #233127; margin-bottom: 28px; isolation: isolate; }
.hero-copy { z-index: 2; padding: 29px 0 29px 31px; }
.hero-copy .eyebrow { color: #bdd0a3; font-size: 11px; letter-spacing: .17em; }
.hero-copy .eyebrow::before { background: var(--lime); }
.hero-copy h2 { max-width: 370px; color: #fbfcee; font-size: clamp(27px, 2.5vw, 35px); line-height: 1.18; font-weight: 600; margin-top: 15px; letter-spacing: -.055em; }
.hero-copy h2 span, .hero-copy h2 em { color: var(--lime); font-style: normal; }
.hero-copy > p { max-width: 300px; margin-top: 13px; color: #a5b09e; font-size: 11px; line-height: 1.8; }
.hero-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 20px; }
.hero-chips span, .hero-chips button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #506046; border-radius: 6px; color: #cbd6c1; background: rgb(240 248 226 / 4%); font-size: 11px; font-weight: 500; }
.hero-chips svg { width: 11px; height: 11px; }
.hero-art { position: relative; min-width: 0; overflow: hidden; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #233127 0%, rgb(35 49 39 / 12%) 35%, transparent 70%); pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-art .art-label { position: absolute; z-index: 3; right: 20px; bottom: 17px; padding: 5px 10px; border: 1px solid rgb(242 247 227 / 20%); border-radius: 7px; color: #f2f8e5; background: rgb(29 44 29 / 23%); backdrop-filter: blur(12px); font-size: 11px; }
.section-heading, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 15px; }
.section-heading h2, .section-head h2 { font-size: 17px; letter-spacing: -.04em; font-weight: 750; }
.section-heading h2 span, .section-head h2 span { margin-left: 5px; color: #9ba38f; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 0; color: #7d896e; background: transparent; font-size: 11px; font-weight: 650; transition: color 180ms; }
.text-button svg { width: 13px; height: 13px; }
.text-button:hover { color: var(--ink-deep); }
.category-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 12px; }
.category-tab { display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; color: #899180; background: #fbfcf6; text-align: left; transition: border-color 180ms, background 180ms, color 180ms, transform 180ms; }
.category-tab > svg { width: 19px; height: 19px; }
.category-tab span { font-size: 11px; font-weight: 750; }
.category-tab small { display: block; margin-top: 1px; color: #a1a797; font-size: 11px; font-weight: 500; }
.category-tab:hover { border-color: #bdc9aa; transform: translateY(-1px); color: var(--ink); }
.category-tab.active { border-color: #b9ce8e; background: #eef4df; color: #425735; }
.category-tab.active > svg { color: #5f7a42; }
.category-tab.active small { color: #8a9a74; }
.creation-panel { padding: 19px 21px 17px; border: 1px solid #dfe4d5; border-radius: 18px; background: #fffefa; box-shadow: 0 5px 15px rgb(47 65 24 / 2%); }
.composer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.model-select { display: inline-flex; align-items: center; gap: 9px; padding: 0; background: transparent; text-align: left; }
.model-avatar { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e6eadc; border-radius: 9px; color: #576a48; background: #f3f5eb; font-size: 12px; font-weight: 800; }
.model-avatar svg { width: 17px; height: 17px; }
.model-meta strong { display: block; font-size: 11px; font-weight: 800; }
.model-meta small { display: block; margin-top: 1px; color: #a0a58f; font-size: 11px; }
.model-select .chevron, .model-select > svg { width: 13px; height: 13px; margin-left: 5px; color: #87947a; transition: transform 160ms; }
.model-select:hover .chevron, .model-select:hover > svg { transform: translateY(2px); }
.mode-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid #e6eadc; border-radius: 5px; color: #9ca58f; font-size: 11px; line-height: 1.4; }
.mode-badge svg { width: 10px; height: 10px; }
.prompt-input { display: block; width: 100%; min-height: 73px; max-height: 260px; resize: vertical; padding: 2px 0; border: 0; color: var(--ink); background: transparent; font-size: 13px; line-height: 1.8; }
.prompt-input::placeholder { color: #a4ab99; }
.prompt-input:focus-visible { outline: none; }
.creation-panel:focus-within { border-color: #b9ca9a; box-shadow: 0 0 0 3px rgb(184 207 139 / 10%); }
.prompt-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.prompt-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.prompt-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 5px 8px; border: 1px solid #e9ecdf; border-radius: 6px; color: #8c977d; background: #fbfcf5; font-size: 11px; font-weight: 600; }
.prompt-tools button svg { width: 12px; height: 12px; }
.prompt-tools button:hover { background: #eef4df; border-color: #d3dfbf; color: #536940; }
.generate-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 10px; min-height: 38px; padding: 8px 13px; border: 1px solid #c4e26a; border-radius: 8px; color: #3d5128; background: var(--lime); font-size: 11px; font-weight: 750; box-shadow: 0 3px 7px rgb(105 130 32 / 6%); transition: background 180ms, transform 180ms, box-shadow 180ms; }
.generate-button svg { width: 14px; height: 14px; }
.generate-button:hover { background: #cdef66; box-shadow: 0 5px 13px rgb(116 142 38 / 15%); transform: translateY(-1px); }
.button-cost { padding-left: 10px; border-left: 1px solid rgb(91 119 41 / 22%); font-size: 11px; font-weight: 650; opacity: .75; }
.inspiration-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.inspiration-row > label, .inspiration-row > span:first-child { color: #a2a995; font-size: 11px; margin-right: 2px; }
.prompt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid #e3e7d9; border-radius: 6px; color: #919a83; background: transparent; font-size: 11px; transition: color 160ms, background 160ms, border-color 160ms; }
.prompt-chip svg { width: 10px; height: 10px; }
.prompt-chip:hover { color: #536b3d; background: #edf3df; border-color: #c9d8b0; }
.keyboard-hint { color: #adb39f; font-size: 11px; font-weight: 500; }
kbd { border: 1px solid #dce2d2; padding: 1px 4px; border-radius: 4px; color: #879479; font-family: inherit; font-size: 11px; }

/* Model cards use visual space and typographic restraint. */
.model-grid, .catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.model-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; transition: transform 240ms var(--ease), box-shadow 240ms, border-color 240ms; }
.model-card:hover { transform: translateY(-3px); border-color: #bdcba8; box-shadow: var(--shadow-card); }
.model-visual { position: relative; display: grid; place-items: center; height: 113px; overflow: hidden; isolation: isolate; }
.model-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 550ms var(--ease); }
.model-card:hover .model-visual img { transform: scale(1.045); }
.model-visual > svg { width: 43px; height: 43px; opacity: .8; stroke-width: 1.15; }
.visual-text { color: #73815b; background: #e7ecd8; }
.visual-image { color: #996b4d; background: #f4d9c8; }
.visual-video { color: #e0e4da; background: #566b5b; }
.visual-music { color: #f4f7df; background: #8d9a65; }
.visual-text::before { content: 'Aa'; color: #74835a; font-size: 62px; font-weight: 500; letter-spacing: -.09em; line-height: 1; transform: rotate(-9deg); }
.visual-text:has(> img)::before, .visual-text:has(> svg)::before { display: none; }
.visual-music::before { content: ''; position: absolute; width: 85px; height: 85px; border: 1px solid #d6dfa7; border-radius: 50%; box-shadow: 0 0 0 8px #9eac76, 0 0 0 9px #b9c990, 0 0 0 17px #9eac76, 0 0 0 18px #b9c990, 0 0 0 26px #9eac76, 0 0 0 27px #b9c990; opacity: .55; transform: translate(37px, -7px); }
.visual-music::after { content: ''; position: absolute; width: 25px; height: 25px; border: 8px solid #c9d59c; border-radius: 50%; background: #8d9a65; transform: translate(37px, -7px); }
.visual-music:has(> img)::before, .visual-music:has(> img)::after { display: none; }
.visual-video::before { content: ''; position: absolute; inset: 23px 38px; border: 1px solid #bdcbb7; border-radius: 9px; background: rgb(206 220 200 / 10%); transform: rotate(-8deg); }
.visual-video:has(> img)::before, .visual-video:has(> svg)::before { display: none; }
.provider-mark { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; align-items: center; justify-content: center; min-width: 23px; height: 23px; padding: 0 6px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 6px; color: #40513a; background: rgb(253 255 246 / 85%); backdrop-filter: blur(6px); font-size: 11px; font-weight: 800; }
.provider-mark svg { width: 13px; height: 13px; }
.model-card-body { padding: 14px 13px 11px; }
.model-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: -.025em; }
.model-title h3 { font-size: 12px; font-weight: 800; letter-spacing: -.025em; }
.tag, .badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 5px; border: 1px solid #e1e7d1; border-radius: 4px; color: #8a9c6c; background: #f3f6e9; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
.tag.new { color: #697e3f; border-color: #d7e7b6; background: #eff6df; }
.model-description { min-height: 30px; margin-top: 6px; color: #9aa18f; font-size: 11px; line-height: 1.6; }
.model-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf0e5; }
.model-price { display: flex; align-items: center; gap: 4px; color: #81906d; font-size: 11px; font-weight: 650; }
.model-price svg { width: 10px; height: 10px; }
.arrow-circle { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #e4ead8; border-radius: 50%; color: #8a9c70; background: #fafcf4; transition: background 180ms, transform 180ms; }
.arrow-circle svg { width: 11px; height: 11px; }
.model-card:hover .arrow-circle { background: var(--lime); border-color: #c6e28a; transform: rotate(-35deg); color: #526832; }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.catalog-grid .model-visual { height: 148px; }
.catalog-grid .model-card-body { padding: 17px; }
.catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 14px; }
.catalog-grid .model-description { min-height: 35px; font-size: 11px; }
.catalog-grid .model-price { font-size: 11px; }
.catalog-grid .arrow-circle { width: 28px; height: 28px; }

/* Personal library */
.works-grid, .history-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.work-card { overflow: hidden; min-width: 0; border: 1px solid #e1e6d8; border-radius: 14px; background: var(--surface); text-align: left; transition: transform 220ms var(--ease), box-shadow 220ms, border-color 220ms; }
.work-card:hover { transform: translateY(-3px); border-color: #bfccac; box-shadow: var(--shadow); }
.work-thumbnail { position: relative; display: grid; place-items: center; height: 125px; overflow: hidden; background: #e9eadd; }
.work-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.work-card:hover .work-thumbnail img { transform: scale(1.04); }
.work-thumbnail .badge { position: absolute; z-index: 2; top: 9px; left: 9px; padding: 4px 6px; border-color: rgb(249 252 238 / 30%); background: rgb(251 252 244 / 83%); backdrop-filter: blur(7px); color: #798969; font-size: 11px; }
.thumb-music { background: #e5eacf; color: #889a61; }
.thumb-video { background: #dae2d2; }
.thumb-text { padding: 18px; background: #eaeedf; color: #8b9975; text-align: left; font-size: 15px; font-weight: 650; line-height: 1.55; letter-spacing: -.035em; }
.thumb-text > svg { width: 36px; height: 36px; opacity: .7; }
.waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; width: 80%; }
.waveform span, .waveform i { width: 3px; height: 15px; border-radius: 6px; background: currentColor; opacity: .62; }
.waveform > :nth-child(3n) { height: 29px; opacity: .8; }
.waveform > :nth-child(4n) { height: 41px; opacity: .85; }
.waveform > :nth-child(5n) { height: 23px; opacity: .7; }
.waveform > :nth-child(7n) { height: 35px; }
.play-button { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; color: white; background: rgb(34 50 33 / 22%); backdrop-filter: blur(8px); }
.play-button svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.work-meta { padding: 12px; }
.work-title { overflow: hidden; color: #56634a; font-size: 11px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
.work-info { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: #a0a78f; font-size: 11px; }
.history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.history-grid .work-thumbnail { height: 185px; }
.history-grid .work-title { font-size: 12px; }
.history-grid .work-meta { padding: 16px; }
.history-grid .work-info { font-size: 11px; margin-top: 8px; }

/* Common controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 10px 15px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 750; line-height: 1.4; transition: background 180ms, border-color 180ms, color 180ms, box-shadow 180ms, transform 180ms; }
.button svg { width: 14px; height: 14px; }
.button.primary { border-color: #c9e38c; color: #43582e; background: var(--lime); }
.button.primary:hover { border-color: #b4d971; background: #cdee67; box-shadow: 0 5px 13px rgb(114 137 44 / 11%); transform: translateY(-1px); }
.button.dark { color: #f6faec; background: var(--ink); border-color: var(--ink); }
.button.dark:hover { background: #35472b; border-color: #35472b; transform: translateY(-1px); }
.button.secondary { border-color: #dfe5d5; color: #77876a; background: #fffefa; }
.button.secondary:hover { border-color: #bdcda8; background: #f1f6e7; color: #4b6138; }
.button.ghost { color: #8a967d; background: transparent; }
.button.ghost:hover { background: #edf2e3; color: #51663e; }
.button.full, .full-width { width: 100%; }
.button.small { min-height: 31px; padding: 7px 11px; font-size: 11px; }
.muted { color: var(--muted); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.panel h2 { font-size: 17px; margin-bottom: 8px; }
.panel > p { font-size: 11px; color: var(--muted); }
.panel + .panel { margin-top: 20px; }
.two-column .panel + .panel { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 17px; }
.field label, .field > span:first-child { color: #7d8a6f; font-size: 11px; font-weight: 700; }
.field > small { color: #a0a992; font-size: 11px; }
.field .input, .field .select, .field input, .field select, .field textarea { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 17px; }
.input, .select, .field input, .field select, .field textarea { min-height: 42px; padding: 11px 13px; border: 1px solid #dfe5d5; border-radius: 9px; color: #546448; background: #fbfcf6; font-size: 11px; transition: border-color 160ms, box-shadow 160ms, background 160ms; }
.input::placeholder, .field input::placeholder { color: #a9b09b; }
.input:focus, .select:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #a8bf81; box-shadow: 0 0 0 3px rgb(181 202 144 / 14%); background: #fffefa; }
.field textarea { min-height: 94px; resize: vertical; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid #edf0e5; }
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row:first-child { padding-top: 0; }
.setting-row strong { display: block; font-size: 11px; font-weight: 750; }
.setting-row p, .setting-row small { display: block; margin-top: 4px; color: #9ca58f; font-size: 11px; line-height: 1.7; }
.setting-row .select { min-width: 130px; padding: 8px 11px; min-height: 36px; font-size: 11px; }
.toggle { position: relative; display: block; flex-shrink: 0; width: 34px; height: 20px; padding: 0; border-radius: 20px; border: 1px solid #d6deca; background: #e5eadc; transition: background 180ms, border-color 180ms; }
.toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fffefa; box-shadow: 0 1px 3px rgb(54 69 35 / 15%); transition: transform 180ms var(--ease); }
.toggle[aria-checked='true'] { background: #b9d77d; border-color: #afcd72; }
.toggle[aria-checked='true']::before { transform: translateX(14px); }
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 23px 0 25px; }
.search-box { display: flex; align-items: center; gap: 9px; min-width: 220px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdf7; }
.search-box svg { width: 15px; height: 15px; color: #9ba68c; }
.search-box input { width: 100%; min-width: 0; min-height: 38px; padding: 10px 0; border: 0; background: transparent; color: #5c6d4e; font-size: 11px; }
.search-box input::placeholder { color: #a1ab94; }
.search-box:focus-within { border-color: #b8c99e; box-shadow: 0 0 0 3px rgb(184 207 139 / 10%); }
.search-box input:focus-visible { outline: none; }
.filter-tabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.filter-tabs button { padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: #8c987c; background: transparent; font-size: 11px; font-weight: 650; }
.filter-tabs button:hover { background: #edf2e3; color: #566e3d; }
.filter-tabs button.active { color: #4d6238; background: #e9f1d9; border-color: #d6e4bd; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; grid-column: 1 / -1; min-height: 260px; padding: 35px; border: 1px dashed #d3ddc3; border-radius: 20px; background: rgb(255 254 250 / 50%); text-align: center; }
.empty-state > svg { width: 40px; height: 40px; color: #adbd94; stroke-width: 1; margin-bottom: 4px; }
.empty-state h3 { font-size: 18px; color: #6f805a; }
.empty-state p { max-width: 350px; color: #9ba78b; font-size: 11px; }
.notice, .demo-banner { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #e0e7d2; border-radius: 9px; color: #879571; background: #eff3e5; font-size: 11px; line-height: 1.7; }
.notice svg, .demo-banner svg { flex-shrink: 0; width: 14px; height: 14px; }
.demo-banner { margin-top: 20px; }

/* Balance and plans */
.balance-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 25px; align-items: start; }
.balance-card { position: relative; overflow: hidden; min-height: 240px; padding: 28px; border-radius: 22px; color: #dce7ce; background: #263524; isolation: isolate; }
.balance-card::after { content: ''; position: absolute; z-index: -1; width: 210px; height: 210px; right: -100px; top: -68px; border: 26px solid #33472c; border-radius: 50%; box-shadow: 0 0 0 15px #2c3d26, 0 0 0 40px #30422a; opacity: .8; }
.balance-card .eyebrow { color: #a9bd91; }
.balance-card .eyebrow::before { background: var(--lime); }
.balance-card > p { color: #a9bb97; font-size: 11px; }
.balance-amount { margin-top: 15px; color: #f5fae9; font-size: clamp(38px, 4vw, 52px); font-weight: 600; letter-spacing: -.065em; line-height: 1.25; }
.balance-amount span { color: #a6bb90; font-size: 13px; font-weight: 500; letter-spacing: -.02em; margin-left: 5px; }
.balance-details { display: flex; align-items: center; gap: 20px; margin-top: 23px; padding-top: 19px; border-top: 1px solid #495c3b; color: #b7c7a4; font-size: 11px; }
.balance-details strong { color: #e8f1dc; font-weight: 650; }
.balance-card .button { margin-top: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 18px; }
.stat-card { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.stat-card > svg { width: 17px; height: 17px; color: #95a57b; margin-bottom: 10px; }
.stat-card strong { display: block; color: #5b7047; font-size: 23px; font-weight: 650; letter-spacing: -.04em; line-height: 1.35; }
.stat-card span, .stat-card p { display: block; color: #9ba68e; font-size: 11px; margin-top: 4px; }
.packages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.package-card { position: relative; padding: 19px 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); text-align: left; transition: border-color 180ms, transform 180ms, box-shadow 180ms; }
.package-card:hover { transform: translateY(-3px); border-color: #b8cc95; box-shadow: var(--shadow); }
.package-card.featured { border-color: #b6ce8c; background: #f0f6e2; }
.package-card .badge { position: absolute; top: -9px; left: 11px; background: var(--lime); color: #5e783e; border-color: #c8df9d; font-size: 11px; }
.package-credits { color: #546b40; font-size: 24px; font-weight: 650; letter-spacing: -.055em; line-height: 1.25; }
.package-credits small { display: block; margin-top: 5px; color: #98a686; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.package-price { color: #667a52; font-size: 14px; font-weight: 750; margin-top: 19px; }
.package-card > p { color: #9aa88a; font-size: 11px; margin-top: 4px; }
.package-card .button { width: 100%; min-height: 32px; padding: 7px 8px; margin-top: 15px; font-size: 11px; }
.transaction-table { margin-top: 8px; }
.transaction-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid #e9eddf; }
.transaction-row:last-child { border-bottom: 0; }
.tx-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e1e9d3; border-radius: 10px; color: #8da36e; background: #f0f5e5; }
.tx-icon svg { width: 15px; height: 15px; }
.transaction-row strong { display: block; font-size: 11px; font-weight: 750; }
.transaction-row small { display: block; color: #a0ac92; font-size: 11px; margin-top: 3px; }
.transaction-row > :last-child { text-align: right; font-size: 11px; font-weight: 750; }
.positive { color: #6b8a47; }
.negative { color: #8f9a80; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; align-items: stretch; margin-top: 34px; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid #dfe6d2; border-radius: 22px; background: var(--surface); }
.plan-card.featured { border-color: #abc678; background: #ecf3dc; box-shadow: 0 14px 38px -24px rgb(83 115 34 / 35%); }
.plan-card.featured::before { content: ''; position: absolute; top: 0; left: 27px; right: 27px; height: 3px; background: #accf66; border-radius: 0 0 3px 3px; }
.plan-card > .badge { margin-bottom: 18px; padding: 5px 7px; font-size: 11px; }
.plan-card h2, .plan-card h3 { font-size: 20px; }
.plan-card > p { color: #93a080; font-size: 11px; line-height: 1.8; margin-top: 8px; }
.plan-price { margin: 22px 0 17px; color: #40572f; font-size: 35px; font-weight: 650; letter-spacing: -.065em; }
.plan-price span, .plan-price small { color: #93a47e; font-size: 11px; font-weight: 500; letter-spacing: -.01em; }
.plan-features, .plan-card ul { display: grid; gap: 13px; padding: 20px 0 25px; margin: 0; border-top: 1px solid #dfe8ce; list-style: none; }
.plan-card li { display: flex; align-items: start; gap: 9px; color: #82936b; font-size: 11px; line-height: 1.6; }
.plan-card li svg { width: 13px; height: 13px; margin-top: 1px; color: #789653; }
.plan-card .button { width: 100%; margin-top: auto; }

/* Help and profile */
.faq-layout { display: grid; grid-template-columns: 1.7fr 1fr; align-items: start; gap: 28px; margin-top: 26px; }
.faq-list { display: grid; gap: 11px; }
.faq-list details { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color 180ms, background 180ms; }
.faq-list details[open] { border-color: #c6d5ae; background: #fcfef6; }
.faq-list summary { position: relative; padding: 19px 45px 19px 19px; color: #647951; font-size: 11px; font-weight: 750; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 19px; top: 17px; color: #a1b487; font-size: 20px; font-weight: 400; line-height: 1.2; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details[open] p { animation: view-in 220ms var(--ease) both; }
.faq-list p { padding: 0 19px 20px; color: #8e9e7d; font-size: 11px; line-height: 1.95; }
.help-card { position: sticky; top: 28px; overflow: hidden; padding: 27px; border: 1px solid #dce6cb; border-radius: 19px; background: #edf4df; }
.help-card > svg { width: 32px; height: 32px; color: #8ca467; stroke-width: 1.3; margin-bottom: 24px; }
.help-card h3 { font-size: 22px; color: #536d3e; }
.help-card p { margin-top: 12px; color: #93a57c; font-size: 11px; line-height: 1.9; }
.help-card .button { margin-top: 23px; }
.profile-layout { display: grid; grid-template-columns: 250px 1fr; align-items: start; gap: 24px; margin-top: 27px; }
.profile-summary { padding: 30px 25px; border: 1px solid #dfe7d2; border-radius: 19px; background: #fbfdf5; text-align: center; }
.profile-summary .avatar { width: 78px; height: 78px; margin: 0 auto 18px; font-size: 23px; font-weight: 650; background: #e7edda; }
.profile-summary h2 { font-size: 20px; color: #60774a; }
.profile-summary > p { color: #a2ad93; font-size: 11px; margin-top: 6px; }
.profile-summary .badge { margin-top: 15px; padding: 4px 7px; font-size: 11px; }
.profile-summary .button { margin-top: 21px; width: 100%; }
.profile-fields { padding: 26px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.profile-fields h2 { font-size: 17px; margin-bottom: 23px; }
.settings-group { padding-top: 23px; margin-top: 24px; border-top: 1px solid #e5ebdb; }
.settings-title { margin-bottom: 19px; color: #758a5d; font-size: 13px; font-weight: 750; letter-spacing: -.025em; }

/* Conversational workspace */
.chat-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: min(730px, calc(100dvh - 150px)); min-height: 520px; overflow: hidden; border: 1px solid #dfe6d3; border-radius: 19px; background: var(--surface); }
.chat-sidebar { display: flex; flex-direction: column; gap: 19px; padding: 19px 13px; border-right: 1px solid #e4e9da; background: #f9fbf2; }
.chat-sidebar > .button { width: 100%; }
.chat-sidebar > .nav-caption { margin: 5px 0 -5px; padding: 0 8px; }
.conversation-list { display: grid; gap: 5px; overflow-y: auto; }
.conversation-item { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; padding: 11px 10px; border: 1px solid transparent; border-radius: 9px; color: #8e9c7e; background: transparent; text-align: left; font-size: 11px; }
.conversation-item strong, .conversation-item span { display: block; overflow: hidden; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.conversation-item small { color: #afb89f; font-size: 11px; }
.conversation-item:hover { background: #edf3e2; }
.conversation-item.active { border-color: #d8e4c3; color: #5c7742; background: #eaf2dc; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fffefa; }
.chat-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-shrink: 0; min-height: 70px; padding: 16px 23px; border-bottom: 1px solid #edf0e5; }
.chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 25px; overflow-y: auto; padding: 27px 30px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #d5dfc5 transparent; }
.chat-empty { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: 13px; padding: 20px; text-align: center; }
.chat-empty > svg { width: 43px; height: 43px; margin-bottom: 10px; color: #a8bc8a; stroke-width: 1.15; }
.chat-empty h2 { max-width: 340px; color: #5d7548; font-size: 29px; line-height: 1.25; font-weight: 600; }
.chat-empty p { max-width: 300px; color: #9ba98b; font-size: 11px; line-height: 1.9; }
.chat-empty .inspiration-row { justify-content: center; max-width: 430px; margin-top: 10px; }
.message { display: flex; align-items: start; gap: 12px; max-width: 95%; animation: view-in 250ms var(--ease) both; }
.message-avatar { display: grid; flex-shrink: 0; place-items: center; width: 29px; height: 29px; border: 1px solid #dfe7d1; border-radius: 9px; color: #91a572; background: #f1f6e6; font-size: 11px; font-weight: 800; }
.message-avatar svg { width: 15px; height: 15px; }
.message-content { color: #748466; font-size: 11px; line-height: 1.95; overflow-wrap: anywhere; }
.message-content p + p { margin-top: 12px; }
.message-content strong { color: #586f45; font-weight: 750; }
.message-content h3 { font-size: 13px; margin: 15px 0 7px; color: #5d7547; }
.message-content ul, .message-content ol { margin: 9px 0; padding-left: 19px; }
.message-content pre { overflow: auto; padding: 16px; border: 1px solid #e0e8d4; border-radius: 10px; background: #f3f7ea; color: #78905b; font-size: 11px; }
.message-content code { padding: 1px 4px; border-radius: 4px; color: #79945b; background: #f0f5e5; font-size: 11px; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message.user .message-avatar { display: none; }
.message.user .message-content { padding: 12px 17px; border: 1px solid #e5ecd9; border-radius: 13px 13px 3px 13px; color: #6e8458; background: #f0f5e6; }
.message.assistant .message-content { padding-top: 3px; }
.message-actions { display: flex; align-items: center; gap: 9px; margin-top: 11px; color: #b0bba1; font-size: 11px; }
.message-actions button { display: grid; place-items: center; padding: 2px; background: transparent; color: #a9b79a; }
.message-actions button:hover { color: #6f8a50; }
.message-actions svg { width: 12px; height: 12px; }
.chat-composer { margin: 0 23px 17px; flex-shrink: 0; }
.chat-composer .creation-panel { padding: 12px 15px; border-radius: 13px; }
.chat-composer .prompt-input { min-height: 45px; max-height: 150px; font-size: 11px; }
.chat-composer .prompt-bottom { margin-top: 5px; }
.chat-composer > .keyboard-hint { display: block; text-align: center; margin-top: 9px; }

/* Dialogs and feedback */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 30px 20px; background: rgb(32 45 29 / 28%); backdrop-filter: blur(7px); animation: backdrop-in 180ms ease both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(100%, 480px); max-height: calc(100dvh - 60px); overflow-y: auto; border: 1px solid #e5ebd9; border-radius: 22px; background: #fffefa; box-shadow: 0 35px 120px -30px rgb(24 39 20 / 40%); animation: modal-in 250ms var(--ease) both; scrollbar-width: thin; scrollbar-color: #d2debf transparent; }
.modal.wide { width: min(100%, 760px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 25px 26px 19px; }
.modal-header h2 { font-size: 21px; color: #526b3e; }
.modal-header p { margin-top: 7px; color: #9ba98b; font-size: 11px; }
.modal-close { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; padding: 0; border: 1px solid #e2e9d5; border-radius: 8px; color: #a2b08f; background: #f8fbf0; transition: background 180ms, color 180ms; }
.modal-close svg { width: 14px; height: 14px; }
.modal-close:hover { color: #648245; background: #edf4df; }
.modal-body { padding: 0 26px 24px; }
.modal-body .page-toolbar { margin-top: 0; margin-bottom: 20px; }
.modal-body .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-body .model-visual { height: 100px; }
.modal-body .model-card-body { padding: 13px; }
.modal-body .model-title, .modal-body .model-title h3 { font-size: 12px; }
.modal-body .model-description { font-size: 11px; }
.modal-body .work-thumbnail { height: 280px; border-radius: 13px; margin-bottom: 18px; }
.modal-body > img, .modal-body > video { width: 100%; border-radius: 13px; }
.modal-body .notice { margin-top: 15px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 17px 26px 22px; border-top: 1px solid #e9eddf; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0 20px; }
.payment-method { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 13px; border: 1px solid #dfe7d1; border-radius: 12px; color: #93a47d; background: #fbfdf5; text-align: left; font-size: 11px; font-weight: 750; }
.payment-method svg { width: 21px; height: 21px; color: #91a977; }
.payment-method small { display: block; margin-top: 3px; color: #afbaa0; font-size: 11px; font-weight: 500; }
.payment-method.selected { border-color: #adc782; background: #eff6df; color: #688446; }
.payment-method.selected::after { content: ''; position: absolute; right: 10px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #a3c367; }
.order-summary { display: grid; gap: 12px; padding: 18px; border: 1px solid #e3e9d7; border-radius: 12px; color: #91a17b; background: #f6f9ee; font-size: 11px; }
.order-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.order-summary > div:last-child { border-top: 1px solid #dde6cd; padding-top: 13px; color: #607d42; font-weight: 800; }
.order-summary strong { color: #718c55; font-weight: 750; }
.toast-container { position: fixed; z-index: 200; right: 27px; bottom: 26px; display: grid; gap: 10px; width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border: 1px solid #d9e5c6; border-radius: 13px; color: #d9e8c8; background: #304329; box-shadow: 0 10px 30px rgb(32 49 24 / 17%); font-size: 11px; line-height: 1.6; animation: toast-in 240ms var(--ease) both; pointer-events: auto; }
.toast > svg { width: 17px; height: 17px; color: #badb89; }
.toast.error { background: #fff7ef; border-color: #e6d1bb; color: #9b7653; }
.toast.error > svg { color: #ae8d66; }
.toast.success { border-color: #b8ce9c; }
@keyframes toast-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
.mobile-overlay { display: none; }
.loading-dot { display: inline-block; width: 4px; height: 4px; margin: 0 2px; border-radius: 50%; color: #8ba86b; background: currentColor; animation: dot-pulse 1s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: .15s; }
.loading-dot:nth-child(3) { animation-delay: .3s; }
@keyframes dot-pulse { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.generation-progress { display: grid; gap: 10px; padding: 18px; margin-top: 15px; border: 1px solid #dce6ca; border-radius: 13px; background: #f1f6e7; }
.generation-progress strong { color: #6f8b50; font-size: 11px; font-weight: 750; }
.generation-progress p, .generation-progress small { color: #9bae86; font-size: 11px; }
.progress-bar { width: 100%; height: 4px; overflow: hidden; border-radius: 10px; background: #e0e9d1; }
.progress-fill { height: 100%; border-radius: inherit; background: #a5c66c; transition: width 400ms var(--ease); }

/* Components in the live application templates. */
body { font-size: 14px; }
.sidebar { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dde4d2 transparent; }
.brand-ai { display: inline-block; margin-left: 3px; color: #8fa762; font-size: 19px; letter-spacing: -.07em; }
.brand-tag { font-size: 9px; }
.sidebar-create { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 41px; padding: 10px 12px; margin-top: 25px; border: 1px solid #dce4d0; border-radius: 10px; color: #667b52; background: #f1f5e9; font-size: 12px; font-weight: 700; text-align: left; transition: background 180ms, border-color 180ms; }
.sidebar-create > svg { width: 16px; height: 16px; }
.sidebar-create:hover { background: #eaf2da; border-color: #c5d7aa; }
.sidebar-create kbd { margin-left: auto; padding: 1px 4px; color: #91a17e; background: #f9fbf3; font-size: 10px; white-space: nowrap; }
.nav-group { margin-top: 24px; }
.nav-item { min-height: 45px; font-size: 13px; }
.nav-caption { font-size: 10px; }
.nav-item .count { font-size: 10px; }
.upgrade-card-top { display: flex; align-items: start; gap: 10px; }
.upgrade-card-top svg { width: 24px; height: 24px; color: #7b935b; }
.upgrade-card-top span { color: #60764c; font-size: 12px; font-weight: 750; line-height: 1.55; letter-spacing: -.02em; }
.upgrade-card p { font-size: 11px; color: #7c8b68; }
.upgrade-card a { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #dce5cd; color: #677f4e; font-size: 11px; font-weight: 750; }
.upgrade-card a > svg { width: 13px; height: 13px; }
.upgrade-card a:hover { color: #3e5728; }
.profile-meta strong { font-size: 12px; }
.profile-meta small { font-size: 10px; }
.sidebar-version { display: flex; align-items: center; gap: 6px; padding: 17px 9px 0; color: #a2ac95; font-size: 9px; }
.sidebar-version > span:last-child { margin-left: auto; }
.status-dot { width: 4px; height: 4px; border-radius: 50%; background: #9cba6b; }
.breadcrumbs { font-size: 11px; }
.breadcrumb-divider { opacity: .45; }
.topbar-actions > .avatar.small { width: 34px; height: 34px; margin-left: 2px; border: 3px solid #fffefa; box-shadow: 0 0 0 1px #e0e6d6; background: #e5edda; }
.demo-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid #e3e9d8; border-radius: 5px; color: #92a17d; background: #f7faef; font-size: 10px; font-weight: 650; white-space: nowrap; }
.credit-pill { font-size: 11px; }
.credit-pill > span:not(.credit-plus) { color: #8c9a7b; font-size: 10px; }
.credit-plus { display: grid; place-items: center; height: 18px; width: 18px; margin-left: 3px; border: 1px solid #dce5cc; border-radius: 5px; color: #849969; background: #edf3e1; font-size: 13px; }
.notification-btn { position: relative; }
.notification-btn i { position: absolute; top: 8px; right: 9px; width: 4px; height: 4px; border: 1px solid #fcfdf8; border-radius: 50%; background: #a1bc74; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 37px; padding-top: 20px; border-top: 1px solid #e3e9d7; color: #9daa8e; font-size: 10px; }
.page-subtitle { color: #7f8c72; font-size: 13px; }
.eyebrow { font-size: 10px; }
.title-dot { color: #a6c96b; }
.small-text { font-size: 11px; }
.studio-hero .hero-art { grid-column: 2; grid-row: 1; }
.studio-hero .hero-copy { grid-column: 1; grid-row: 1; }
.hero-eyebrow { display: flex; align-items: center; gap: 7px; color: #b3c79b; font-size: 10px; font-weight: 650; letter-spacing: .15em; }
.hero-eyebrow > i { width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }
.hero-copy > p { color: #b7c2ab; font-size: 12px; line-height: 1.8; }
.hero-copy h2 { color: #f5f9eb; }
.hero-chips span { font-size: 10px; border-color: #4a5c40; }
.hero-note { position: absolute; z-index: 3; bottom: 17px; right: 20px; color: #cedcc0; font-size: 8px; font-weight: 500; letter-spacing: .12em; opacity: .7; }
.section-heading h2, .section-head h2 { font-size: 19px; }
.section-heading .eyebrow { font-size: 9px; margin-bottom: 6px; }
.section-subtitle { margin-top: 6px; color: #8e9c7d; font-size: 12px; }
.text-button { font-size: 11px; }
.creation-heading { margin-top: 25px; }
.category-tab { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 10px; min-height: 63px; }
.category-tab > svg { grid-row: 1 / 3; }
.category-tab > span { grid-column: 2; color: inherit; font-size: 12px; }
.category-tab > small { grid-column: 2; margin: 0; color: #8d9b7c; font-size: 10px; line-height: 1.45; }
.category-tab.active small { color: #80966a; }
.category-tabs:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 24px; }
.category-tabs:has(> :nth-child(5)) .category-tab { grid-template-rows: auto; min-height: 45px; }
.category-tabs:has(> :nth-child(5)) .category-tab > svg { grid-row: 1; }
.model-meta strong { font-size: 12px; }
.model-meta small { color: #879875; font-size: 10px; }
.mode-badge { font-size: 10px; }
.model-avatar { font-size: 17px; }
.model-avatar.lime { background: #e9f2d5; color: #819f4d; }
.model-avatar.peach { background: #f5e7d9; color: #b58e6a; }
.model-avatar.blue { background: #e6ecef; color: #87a1b0; }
.model-avatar.mint { background: #e4efe3; color: #89a783; }
.model-avatar.pink { background: #f1e6e6; color: #b18f94; }
.prompt-input { min-height: 88px; font-size: 14px; }
.prompt-input::placeholder { color: #95a384; }
.prompt-tools .icon-btn { width: 30px; height: 30px; padding: 0; }
.prompt-tools .parameter-chip { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; font-size: 11px; }
.prompt-tools .parameter-chip > svg { width: 13px; height: 13px; }
.prompt-tools > .keyboard-hint { margin-left: 5px; font-size: 10px; }
.generate-button { min-height: 40px; padding-inline: 13px; font-size: 12px; }
.button-label { display: flex; align-items: center; gap: 6px; }
.button-cost { display: flex; align-items: center; gap: 3px; font-size: 11px; }
.button-cost > svg { width: 11px; height: 11px; }
.prompt-chip { font-size: 10px; }
.inspiration-row > span:first-child { font-size: 10px; }
.attachment-chip { display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; padding: 6px 9px; border: 1px solid #dfe8d0; border-radius: 6px; color: #8da16f; background: #f1f7e5; font-size: 10px; }
.attachment-chip > svg { width: 11px; height: 11px; }
.attachment-chip button { padding: 0 0 0 5px; color: inherit; background: transparent; }
.attachment-chip button svg { width: 11px; height: 11px; }
.generation-progress > span { display: flex; align-items: center; gap: 5px; color: #7c9660; font-size: 11px; }
.generation-progress .progress-fill { display: block; width: 40%; animation: working 1.8s var(--ease) infinite; }
@keyframes working { 0% { width: 4%; } 65% { width: 82%; } 100% { width: 95%; } }
.model-provider { color: #8e9d7d; font-size: 10px; margin-bottom: 5px; }
.model-title { align-items: start; flex-wrap: wrap; gap: 7px; }
.model-title, .model-title h3 { color: #526b3d; font-size: 14px; }
.model-title h3 { line-height: 1.4; }
.model-title .tag { max-width: 100%; font-size: 9px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.model-description { min-height: 58px; color: #7e8e6d; font-size: 12px; line-height: 1.65; }
.model-price { color: #849b69; font-size: 11px; }
.model-price small { font-size: 10px; color: #a1b18f; }
.model-visual.visual-text::before { display: none; }
.text-orbit { display: grid; place-items: center; width: 87px; height: 87px; color: #8f9fbc; border: 1px solid rgb(153 173 197 / 30%); border-radius: 50%; font-size: 53px; font-weight: 400; line-height: 1; }
.text-orbit::before, .text-orbit::after { content: ''; position: absolute; width: 120px; height: 58px; border: 1px solid rgb(153 173 197 / 28%); border-radius: 50%; transform: rotate(33deg); }
.text-orbit::after { transform: rotate(-33deg); }
.visual-text.blue { background: #e7edf2; }
.visual-text.mint { background: #e4ede1; }
.visual-text.mint .text-orbit { color: #8ca780; border-color: #cadbc3; }
.visual-text.peach { background: #f0e4da; }
.visual-text.peach .text-orbit { color: #bba18a; border-color: #e3d1c1; }
.visual-image.peach img { filter: sepia(.18) hue-rotate(320deg) saturate(.8); object-position: 30% 60%; }
.visual-image.mint img { filter: hue-rotate(20deg) saturate(.6); }
.visual-video.blue img { filter: hue-rotate(110deg) saturate(.35) brightness(.75); object-position: 20% 30%; }
.visual-video.peach img { filter: sepia(.4) saturate(.5) brightness(.85); }
.visual-music.pink { color: #b18a91; background: #f0e2e3; }
.visual-music.mint { color: #8da17b; background: #e5eddc; }
.visual-music.peach { color: #b39a7d; background: #f0e6da; }
.visual-music::before, .visual-music::after { display: none; }
.visual-music .waveform { position: relative; z-index: 1; width: 85%; }
.waveform > i { height: var(--h, 20px); }
.visual-category { position: absolute; left: 11px; bottom: 10px; z-index: 3; color: #61784a; font-size: 9px; font-weight: 650; opacity: .65; }
.visual-video .visual-category { color: #dce7cf; }
.provider-mark { min-width: 25px; height: 25px; font-size: 14px; }
.visual-play { position: absolute; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgb(249 252 239 / 55%); border-radius: 50%; color: #f4f9ea; background: rgb(35 48 29 / 8%); backdrop-filter: blur(7px); }
.visual-play svg { width: 12px; height: 12px; margin-left: 1px; }
.works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-thumbnail { width: 100%; padding: 0; }
.work-thumbnail.thumb-video img { filter: sepia(.3) saturate(.75) brightness(.83); }
.work-type { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 5px; color: #7f9465; background: rgb(250 253 242 / 85%); backdrop-filter: blur(6px); font-size: 9px; }
.work-type svg { width: 10px; height: 10px; }
.sample-tag { position: absolute; top: 10px; right: 10px; padding: 3px 6px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 4px; color: #9aaf7f; background: rgb(250 253 242 / 85%); font-size: 8px; }
.music-disc { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d4dfbc; border-radius: 50%; color: #93aa73; background: rgb(237 244 220 / 70%); backdrop-filter: blur(3px); }
.music-disc svg { width: 19px; height: 19px; }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.work-meta > div { min-width: 0; }
.work-meta > .icon-btn { flex-shrink: 0; width: 24px; height: 24px; border: 0; background: transparent; }
.work-meta > .icon-btn svg { width: 13px; height: 13px; }
button.work-title { display: block; max-width: 100%; padding: 0; color: #5f7750; background: transparent; font-size: 12px; text-align: left; }
.work-info { display: flex; align-items: center; justify-content: start; gap: 5px; color: #8e9e7e; font-size: 10px; white-space: nowrap; }
.text-preview { display: flex; flex-direction: column; align-items: start; gap: 10px; padding: 20px; color: #91a276; text-align: left; }
.text-preview svg { width: 23px; height: 23px; }
.text-preview span { font-size: 12px; font-weight: 650; }
.button { font-size: 12px; }
.notice, .demo-banner { font-size: 11px; }
.catalog-grid { margin-top: 20px; }
.catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 15px; }
.catalog-grid .model-description { min-height: 58px; font-size: 12px; }
.catalog-grid .model-price { font-size: 11px; }
.balance-layout { grid-template-columns: 1.5fr 1fr; }
.balance-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.balance-card-header > span:first-child { display: flex; align-items: center; gap: 8px; color: #bdd0aa; font-size: 12px; }
.balance-card-header > span:first-child svg { width: 16px; height: 16px; }
.balance-card .badge { border-color: #4e653b; color: #a5bf8b; background: #33472a; font-size: 9px; }
.balance-card .balance-details { justify-content: space-between; align-items: center; gap: 17px; }
.balance-details p { color: #afc29a; font-size: 11px; line-height: 1.75; }
.balance-card .balance-details .button { margin: 0; font-size: 11px; }
.balance-decoration { position: absolute; z-index: -1; top: 40px; right: 42px; color: #3e552f; font-size: 160px; line-height: 1; opacity: .4; }
.balance-layout > .stat-grid { grid-template-columns: 1fr 1fr; margin: 0; height: 100%; }
.stat-card { display: flex; flex-direction: column; justify-content: center; }
.stat-icon { display: grid; place-items: center; width: 33px; height: 33px; margin-bottom: 13px; border: 1px solid #e0e9d1; border-radius: 9px; color: #91aa70; background: #eff5e4; }
.stat-icon > svg { width: 16px; height: 16px; }
.stat-card > span:not(.stat-icon) { font-size: 11px; }
.stat-card strong { margin-top: 12px; font-size: 30px; }
.stat-card strong small { display: block; color: #9faf8a; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.package-name { display: block; margin-bottom: 17px; color: #879d6f; font-size: 11px; font-weight: 750; }
.package-credits { display: block; }
.package-credits small { font-size: 11px; }
.package-card > p { margin-top: 14px; color: #8fa279; font-size: 11px; }
.package-price { display: block; margin-top: 21px; font-size: 20px; }
.package-price > span { font-size: 14px; }
.package-price small { display: block; color: #a3b18f; font-size: 10px; font-weight: 500; }
.package-badge { position: absolute; top: -10px; right: 15px; display: inline-flex; padding: 4px 8px; border: 1px solid #cce0a4; border-radius: 5px; color: #7e9b53; background: #e9f3d5; font-size: 9px; line-height: 1.2; }
.package-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; margin-top: 15px; border-top: 1px solid #dfe7d1; color: #7e9664; font-size: 11px; font-weight: 750; }
.package-cta > svg { width: 14px; height: 14px; }
.transaction-panel { margin-top: 25px; }
.transaction-panel .section-heading { margin-top: 0; }
.transaction-row { grid-template-columns: minmax(0, 1fr) 75px 85px; gap: 20px; padding-block: 17px; }
.transaction-row.table-head { padding-top: 6px; padding-bottom: 12px; color: #a0af8e; font-size: 10px; }
.transaction-row.table-head > :last-child { font-size: 10px; font-weight: 500; }
.transaction-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: #7c9364; font-size: 11px; }
.transaction-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.transaction-name small { color: #abb89c; font-size: 10px; }
.transaction-date { color: #a1af8f; font-size: 11px; }
.transaction-row > strong { font-size: 12px; white-space: nowrap; }
.transaction-row > strong > small { display: inline; color: inherit; font-size: 10px; font-weight: 500; }
.plan-intro { display: flex; align-items: center; gap: 15px; margin-top: 26px; }
.plan-intro .badge { padding: 5px 9px; font-size: 10px; }
.plan-intro p { color: #8b9e76; font-size: 12px; line-height: 1.8; }
.plan-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dce6cd; border-radius: 11px; color: #8ba56b; background: #f2f7e7; margin-bottom: 25px; }
.plan-icon svg { width: 20px; height: 20px; }
.plan-card > p { font-size: 12px; }
.plan-price { margin-bottom: 11px; }
.plan-price small { display: block; margin-top: 5px; font-size: 12px; }
.plan-stars { color: #79975b; font-size: 15px; font-weight: 750; margin-bottom: 22px; }
.plan-stars span { display: block; margin-top: 5px; color: #9bae86; font-size: 10px; font-weight: 500; }
.plan-card .button { order: 2; margin: 0 0 23px; }
.plan-card ul { order: 3; padding-bottom: 0; }
.plan-card li { font-size: 12px; }
.plan-card li svg { width: 14px; height: 14px; margin-top: 3px; }
.pricing-note { display: flex; align-items: start; gap: 17px; margin-top: 25px; padding: 22px; border: 1px solid #e1e8d4; border-radius: 15px; background: #f0f5e5; }
.pricing-note .stat-icon { flex-shrink: 0; margin: 0; }
.pricing-note h3 { font-size: 14px; color: #7c9660; }
.pricing-note p { margin-top: 7px; color: #96aa7d; font-size: 11px; line-height: 1.9; }
.faq-list summary { font-size: 13px; }
.faq-list summary::after { display: none; }
.faq-list summary svg { position: absolute; right: 18px; top: 20px; width: 15px; height: 15px; color: #a5b98d; transition: transform 180ms; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list p { color: #889d71; font-size: 12px; }
.help-art { display: grid; place-items: center; width: 53px; height: 53px; margin-bottom: 29px; border: 1px solid #d5e4bd; border-radius: 16px; color: #94ae75; background: #e8f1d8; }
.help-art svg { width: 29px; height: 29px; stroke-width: 1.4; }
.help-card h2 { margin-top: 12px; color: #6d8950; font-size: 25px; }
.help-card p { color: #8ea576; font-size: 12px; }
.help-card > small { display: block; margin-top: 13px; color: #a0b28b; font-size: 10px; }
.profile-summary { display: flex; flex-direction: column; align-items: center; gap: 0; }
.profile-summary .avatar { width: 78px; height: 78px; margin: 0 0 18px; font-size: 23px; }
.profile-summary > p { font-size: 11px; }
.profile-summary .badge { margin-top: 15px; font-size: 10px; }
.profile-divider { width: 100%; height: 1px; margin: 23px 0 20px; background: #e2ead5; }
.profile-summary > .muted { font-size: 11px; color: #a0b18b; }
.profile-balance { display: block; margin-top: 10px; color: #7b985a; font-size: 28px; letter-spacing: -.04em; font-weight: 650; }
.profile-balance small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.profile-fields { border: 0; padding: 0; background: transparent; }
.profile-fields .settings-group { border: 1px solid #e1e8d5; padding: 25px; margin: 0; }
.profile-fields .settings-group + .settings-group { margin-top: 19px; }
.settings-title { display: flex; align-items: start; gap: 12px; margin-bottom: 24px; }
.settings-title > svg { width: 18px; height: 18px; margin-top: 2px; color: #9ab381; }
.settings-title h2 { margin-bottom: 6px; font-size: 16px; }
.settings-title p { color: #a0b18a; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.field { color: #7b9362; font-size: 12px; font-weight: 600; }
.field .input, .field .select { color: #718c55; font-size: 13px; font-weight: 500; }
.field > small { font-size: 11px; font-weight: 500; }
.language-field { max-width: 100%; margin-top: 5px; }
.language-field select { max-width: 270px; }
.setting-row strong { font-size: 13px; }
.setting-row small { color: #a0b48a; font-size: 11px; }
.switch-input { position: relative; flex-shrink: 0; appearance: none; width: 35px; height: 21px; margin: 0; border: 1px solid #d5e0c5; border-radius: 20px; background: #e2ead7; cursor: pointer; transition: background 180ms, border-color 180ms; }
.switch-input::before { content: ''; position: absolute; width: 13px; height: 13px; top: 3px; left: 3px; border-radius: 50%; background: #fffefa; box-shadow: 0 1px 4px rgb(63 87 41 / 14%); transition: transform 180ms var(--ease); }
.switch-input:checked { border-color: #adc887; background: #b8d586; }
.switch-input:checked::before { transform: translateX(14px); }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 17px; margin-top: 19px; }
.chat-sidebar-hint { padding: 0 9px; color: #a2b38d; font-size: 11px; line-height: 1.9; }
.chat-private { display: flex; align-items: start; gap: 8px; margin-top: auto; padding: 16px 5px 0; border-top: 1px solid #e2ead6; color: #a1b58b; font-size: 10px; line-height: 1.7; }
.chat-private svg { width: 12px; height: 12px; margin-top: 3px; }
.conversation-item { flex-direction: row; align-items: center; gap: 8px; font-size: 11px; }
.conversation-item svg { width: 12px; height: 12px; color: #a0b38a; }
.chat-spark { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border: 1px solid #e2ecd3; border-radius: 20px; color: #9dbb7b; background: #f2f7e8; transform: rotate(-7deg); }
.chat-spark svg { width: 30px; height: 30px; stroke-width: 1.2; }
.chat-empty h2 { font-size: 32px; }
.chat-empty p { color: #9aaf83; font-size: 13px; }
.chat-suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 480px; margin-top: 17px; }
.chat-suggestions button { display: flex; align-items: start; flex-wrap: wrap; gap: 9px; padding: 13px; border: 1px solid #e0e9d2; border-radius: 10px; color: #98ae7f; background: #f9fcf3; font-size: 11px; text-align: left; transition: border-color 180ms, background 180ms, transform 180ms; }
.chat-suggestions button svg { width: 13px; height: 13px; }
.chat-suggestions button svg:last-child { margin-left: auto; }
.chat-suggestions button:hover { transform: translateY(-2px); border-color: #c8dcb1; background: #f1f7e6; }
.message-author { display: flex; align-items: center; gap: 10px; color: #7f9d60; font-size: 11px; font-weight: 750; margin-bottom: 7px; }
.message-author small { color: #b0bf9e; font-size: 10px; font-weight: 500; }
.message-text { color: #8ba174; font-size: 13px; line-height: 1.95; }
.message-avatar > svg { width: 26px; height: 26px; }
.message.user .message-author { color: #8ca371; }
.chat-composer { padding: 14px 16px 11px; border: 1px solid #dce6cd; border-radius: 13px; background: #fbfdf6; }
.chat-composer:focus-within { border-color: #bfd6a2; box-shadow: 0 0 0 3px rgb(181 206 148 / 12%); }
.chat-composer > textarea { display: block; width: 100%; min-height: 46px; max-height: 160px; resize: vertical; padding: 0; border: 0; color: #79955e; background: transparent; font-size: 13px; line-height: 1.8; }
.chat-composer > textarea::placeholder { color: #a2b78b; }
.chat-composer > textarea:focus-visible { outline: none; }
.chat-composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 9px; }
.chat-composer-bottom > span { display: flex; align-items: center; gap: 4px; color: #a6b993; font-size: 10px; }
.chat-composer-bottom > span svg { width: 11px; height: 11px; }
.chat-send { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #bcd894; border-radius: 9px; color: #78994e; background: var(--lime); transition: background 180ms, transform 180ms; }
.chat-send svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.chat-send:hover { background: #cbef68; transform: translateY(-1px); }
.chat-disclaimer { margin: -7px 15px 13px; text-align: center; color: #adbf9b; font-size: 10px; line-height: 1.6; }
.modal-lead { color: #95aa7c; font-size: 13px; line-height: 1.9; margin-bottom: 18px; }
.modal-search { width: 100%; margin-bottom: 18px; }
.modal-search input { min-height: 42px; font-size: 12px; }
#model-options { display: grid; gap: 9px; }
.model-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 1px solid #e1e9d5; border-radius: 12px; background: #fbfdf7; text-align: left; transition: border-color 180ms, background 180ms; }
.model-option:hover { border-color: #bdd5a0; background: #f4f9eb; }
.model-option.selected { border-color: #b5d093; background: #f0f7e3; }
.model-option .model-avatar { width: 37px; height: 37px; border-radius: 11px; }
.model-option-info { flex: 1; min-width: 0; }
.model-option-info > strong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #719353; font-size: 13px; font-weight: 750; }
.model-option-info > strong small { color: #a6b996; font-size: 10px; font-weight: 500; }
.model-option-info > span { display: block; margin-top: 5px; color: #9db58b; font-size: 11px; line-height: 1.75; }
.model-option-info > em { display: block; margin-top: 6px; color: #adc09d; font-size: 10px; font-style: normal; }
.model-option-price { display: flex; flex-shrink: 0; align-items: center; gap: 11px; color: #90af70; font-size: 12px; font-weight: 750; }
.model-option-price svg { width: 14px; height: 14px; color: #9cbb7e; }
.pack-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 20px 0 25px; }
.pack-selector button { padding: 16px 10px; border: 1px solid #dfe8d1; border-radius: 11px; color: #97ad7e; background: #fbfdf6; transition: background 180ms, border-color 180ms; }
.pack-selector button:hover { background: #f2f8e8; border-color: #c7dcad; }
.pack-selector button.selected { color: #7b9c5a; background: #eef6e0; border-color: #b8d398; }
.pack-selector strong { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.pack-selector small { display: block; margin-top: 7px; font-size: 11px; }
.field-label { display: block; color: #93ad79; font-size: 12px; font-weight: 700; }
.payment-methods { grid-template-columns: 1fr; gap: 9px; margin-top: 10px; }
.payment-method { padding: 15px; gap: 12px; }
.payment-method strong { color: #8eaa72; font-size: 12px; font-weight: 750; }
.payment-method small { font-size: 10px; }
.payment-method > svg:last-child { width: 14px; height: 14px; margin-left: auto; color: #a4c187; opacity: 0; }
.payment-method.selected > svg:last-child { opacity: 1; }
.payment-method.selected::after { display: none; }
.order-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.order-summary strong { color: #86a865; font-size: 14px; }
.demo-notice { display: flex; align-items: start; gap: 9px; padding: 12px 0 0; color: #a5b994; }
.demo-notice > svg { width: 13px; height: 13px; margin-top: 3px; }
.demo-notice p { color: inherit; font-size: 11px; line-height: 1.8; }
.parameter-options { display: grid; gap: 5px; }
.parameter-options .field { margin-bottom: 13px; }
.notification-empty { display: flex; flex-direction: column; align-items: center; padding: 25px 0 20px; text-align: center; }
.notification-empty > svg { width: 35px; height: 35px; color: #afc894; stroke-width: 1.2; margin-bottom: 20px; }
.notification-empty h3 { color: #96b47b; font-size: 21px; }
.notification-empty p { color: #afc39d; font-size: 12px; line-height: 1.9; margin-top: 12px; }
.support-input { min-height: 140px; }
.insufficient-art { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border: 1px solid #deebd0; border-radius: 19px; color: #a9c48d; background: #f3fae9; }
.insufficient-art svg { width: 30px; height: 30px; stroke-width: 1.3; }
body.modal-open { overflow: hidden; }
.toast { font-size: 12px; }

/* Adapt to the viewport before reducing the content. */
@media (min-width: 1700px) { .workspace { margin-right: auto; } }
@media (max-width: 1250px) {
  :root { --sidebar-width: 222px; }
  .sidebar { padding-inline: 15px; }
  .workspace { padding-inline: 30px; }
  .hero-copy { padding-left: 26px; }
  .model-grid, .works-grid { gap: 10px; }
  .model-card-body { padding-inline: 11px; }
  .model-title, .model-title h3 { font-size: 11px; }
  .model-description { font-size: 11px; }
  .model-title .tag { font-size: 11px; }
  .category-tab { padding-inline: 12px; gap: 8px; }
  .category-tab span { font-size: 11px; }
  .category-tab small { font-size: 11px; }
  .balance-layout { gap: 20px; grid-template-columns: .9fr 1.1fr; }
  .packages-grid { gap: 7px; }
  .package-card { padding-inline: 10px; }
  .package-credits { font-size: 21px; }
  .plans-grid { gap: 12px; }
  .plan-card { padding: 25px 19px; }
  .profile-layout { grid-template-columns: 210px 1fr; gap: 18px; }
  .chat-layout { grid-template-columns: 185px minmax(0, 1fr); }
}
@media (max-width: 1050px) {
  .workspace { padding-inline: 25px; }
  .hero-copy h2 { font-size: 28px; }
  .studio-hero { grid-template-columns: 1.1fr .9fr; min-height: 250px; }
  .hero-copy > p { font-size: 11px; max-width: 235px; }
  .hero-chips { gap: 5px; }
  .hero-chips span { font-size: 11px; padding: 4px 6px; }
  .model-grid, .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .model-visual { height: 128px; }
  .model-card-body { padding: 15px; }
  .model-title, .model-title h3 { font-size: 13px; }
  .model-title .tag { font-size: 11px; }
  .model-description { min-height: 28px; font-size: 11px; }
  .work-thumbnail { height: 145px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 13px; }
  .category-tab { flex-direction: column; gap: 5px; align-items: start; padding: 11px 13px; }
  .category-tab svg { width: 17px; height: 17px; }
  .page-toolbar { align-items: start; flex-direction: column; gap: 12px; }
  .page-toolbar .search-box { width: 100%; }
  .balance-layout { grid-template-columns: 1fr; }
  .packages-grid { gap: 13px; }
  .package-card { padding: 22px 17px 17px; }
  .package-credits { font-size: 28px; }
  .package-price { font-size: 17px; }
  .plans-grid { grid-template-columns: 1fr; gap: 20px; }
  .plan-card { padding: 28px; }
  .plan-card .button { align-self: start; width: auto; min-width: 150px; }
  .plan-card ul { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; }
  .help-card { position: static; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-summary { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 0 17px; padding: 23px; text-align: left; }
  .profile-summary .avatar { grid-row: 1 / 4; width: 58px; height: 58px; margin: 0; font-size: 18px; }
  .profile-summary h2 { font-size: 18px; }
  .profile-summary .badge { margin-top: 8px; grid-column: 2; }
  .profile-summary .button { grid-column: 3; grid-row: 1 / 4; margin: 0; width: auto; }
  .chat-layout { grid-template-columns: 155px minmax(0, 1fr); }
  .chat-sidebar { padding-inline: 9px; }
  .chat-sidebar > .button { padding-inline: 9px; font-size: 11px; }
  .chat-header { padding-inline: 17px; }
  .chat-body { padding: 23px 18px; }
  .chat-composer { margin-inline: 14px; }
  .chat-empty h2 { font-size: 25px; }
  .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  :root { --sidebar-width: 244px; }
  .sidebar { transform: translateX(-100%); padding-inline: 19px; box-shadow: 15px 0 60px rgb(40 57 26 / 10%); }
  .sidebar.open, .sidebar.is-open, .sidebar.active, .sidebar-open .sidebar, .menu-open .sidebar { transform: translateX(0); }
  .mobile-overlay.visible, .mobile-overlay.active, .mobile-overlay.open, .sidebar-open .mobile-overlay, .menu-open .mobile-overlay { display: block; position: fixed; z-index: 35; inset: 0; background: rgb(32 47 26 / 25%); backdrop-filter: blur(3px); animation: backdrop-in 200ms ease; }
  .workspace { max-width: none; margin-left: 0; padding: 22px 30px 40px; }
  .mobile-menu { display: grid; }
  .topbar { margin-bottom: 28px; }
  .topbar > .breadcrumbs { margin-right: auto; }
  .page-title { font-size: 34px; }
  .studio-hero { grid-template-columns: 1fr 1fr; }
  .hero-copy h2 { font-size: 31px; }
  .hero-copy > p { max-width: 285px; font-size: 11px; }
  .hero-chips span { font-size: 11px; padding: 4px 8px; }
  .category-tab { flex-direction: row; align-items: center; gap: 9px; min-height: 56px; }
  .category-tab span { font-size: 11px; }
  .category-tab small { font-size: 11px; }
  .model-grid, .works-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .model-visual { height: 107px; }
  .model-card-body { padding: 12px 11px; }
  .model-title, .model-title h3 { font-size: 11px; }
  .model-title .tag { font-size: 11px; }
  .model-description { min-height: 35px; font-size: 11px; }
  .model-price { font-size: 11px; }
  .arrow-circle { width: 21px; height: 21px; }
  .work-thumbnail { height: 113px; }
  .work-meta { padding: 10px; }
  .work-title { font-size: 11px; }
  .work-info { font-size: 11px; }
  .catalog-grid { gap: 18px; }
  .catalog-grid .model-card-body { padding: 17px; }
  .balance-layout { grid-template-columns: .9fr 1.1fr; gap: 18px; }
  .balance-card { padding: 24px; }
  .balance-amount { font-size: 43px; }
  .packages-grid { gap: 8px; }
  .package-card { padding: 19px 11px 13px; }
  .package-credits { font-size: 23px; }
  .package-price { font-size: 14px; }
  .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .plan-card { padding: 24px 17px; }
  .plan-card ul { grid-template-columns: 1fr; }
  .plan-price { font-size: 30px; }
  .plan-card .button { width: 100%; min-width: 0; }
  .chat-layout { height: calc(100dvh - 112px); min-height: 570px; grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .workspace { padding: 18px 20px 32px; }
  .topbar { min-height: 35px; gap: 10px; margin-bottom: 26px; }
  .breadcrumbs { gap: 7px; font-size: 11px; }
  .breadcrumbs > svg { width: 12px; height: 12px; }
  .topbar-actions { gap: 7px; }
  .icon-btn { width: 33px; height: 33px; border-radius: 9px; }
  .credit-pill { height: 33px; padding-inline: 10px; gap: 6px; font-size: 11px; }
  .credit-pill small { font-size: 11px; }
  .topbar-actions > .icon-btn { display: none; }
  .page-intro { align-items: start; gap: 12px; margin-bottom: 20px; }
  .page-title { font-size: 29px; margin-top: 6px; }
  .page-subtitle { font-size: 11px; max-width: 290px; margin-top: 6px; }
  .eyebrow { font-size: 11px; }
  .intro-actions { gap: 6px; margin-top: 5px; }
  .intro-actions .button { min-height: 32px; padding: 7px 9px; font-size: 11px; }
  .intro-actions .button svg { width: 12px; height: 12px; }
  .studio-hero { min-height: 245px; grid-template-columns: 1.1fr .9fr; border-radius: 20px; margin-bottom: 23px; }
  .hero-copy { padding: 25px 0 24px 23px; }
  .hero-copy h2 { font-size: 29px; }
  .hero-copy > p { font-size: 11px; max-width: 215px; line-height: 1.75; }
  .hero-chips { gap: 5px; margin-top: 17px; }
  .hero-chips span { font-size: 11px; padding: 3px 6px; }
  .hero-art img { object-position: 56% center; }
  .hero-art .art-label { right: 12px; bottom: 14px; padding: 4px 6px; font-size: 11px; }
  .section-heading, .section-head { margin-top: 25px; margin-bottom: 13px; }
  .section-heading h2, .section-head h2 { font-size: 16px; }
  .text-button { font-size: 11px; }
  .category-tabs { gap: 7px; margin-top: 17px; }
  .category-tab { flex-direction: column; gap: 7px; align-items: start; padding: 12px; min-height: 73px; border-radius: 11px; }
  .category-tab span { font-size: 11px; }
  .category-tab small { font-size: 11px; }
  .category-tab svg { width: 18px; height: 18px; }
  .creation-panel { padding: 16px; border-radius: 15px; }
  .prompt-input { min-height: 91px; font-size: 12px; }
  .composer-top { margin-bottom: 14px; }
  .model-meta strong { font-size: 11px; }
  .prompt-bottom { align-items: end; gap: 10px; }
  .prompt-tools { gap: 5px; }
  .prompt-tools button { padding: 5px 7px; font-size: 11px; }
  .generate-button { min-height: 35px; gap: 6px; padding: 8px 10px; font-size: 11px; }
  .generate-button svg { width: 12px; height: 12px; }
  .button-cost { padding-left: 6px; font-size: 11px; }
  .inspiration-row { gap: 6px; margin-top: 10px; }
  .inspiration-row > label { width: 100%; font-size: 11px; }
  .prompt-chip { font-size: 11px; padding: 4px 7px; }
  .model-grid, .works-grid, .catalog-grid, .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .model-visual { height: 125px; }
  .model-card { border-radius: 14px; }
  .model-card-body { padding: 13px; }
  .model-title, .model-title h3 { font-size: 12px; }
  .model-title .tag { font-size: 11px; }
  .model-description { min-height: 29px; margin-top: 7px; font-size: 11px; }
  .model-price { font-size: 11px; }
  .model-card-foot { padding-top: 9px; margin-top: 11px; }
  .work-thumbnail { height: 137px; }
  .work-title { font-size: 11px; }
  .work-info { font-size: 11px; }
  .work-meta { padding: 12px; }
  .history-grid .work-thumbnail { height: 155px; }
  .history-grid .work-title { font-size: 11px; }
  .history-grid .work-meta { padding: 12px; }
  .history-grid .work-info { font-size: 11px; }
  .catalog-grid .model-visual { height: 133px; }
  .catalog-grid .model-card-body { padding: 13px; }
  .catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 12px; }
  .catalog-grid .model-description { font-size: 11px; }
  .catalog-grid .model-price { font-size: 11px; }
  .page-toolbar { margin-top: 20px; margin-bottom: 20px; }
  .filter-tabs { gap: 4px; }
  .filter-tabs button { font-size: 11px; padding: 7px 10px; }
  .two-column, .balance-layout, .faq-layout { grid-template-columns: 1fr; gap: 20px; }
  .panel { padding: 21px; border-radius: 16px; }
  .panel h2 { font-size: 16px; }
  .balance-card { min-height: 215px; padding: 25px; }
  .balance-amount { font-size: 48px; }
  .stat-grid { gap: 9px; margin-top: 13px; }
  .stat-card { padding: 15px 12px; border-radius: 12px; }
  .stat-card strong { font-size: 21px; }
  .stat-card span, .stat-card p { font-size: 11px; }
  .packages-grid { gap: 10px; }
  .package-card { padding: 20px 13px 15px; }
  .package-credits { font-size: 25px; }
  .package-price { font-size: 15px; }
  .package-card .button { font-size: 11px; }
  .plans-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 25px; }
  .plan-card { padding: 26px; }
  .plan-card h2, .plan-card h3 { font-size: 23px; }
  .plan-card > p { font-size: 11px; }
  .plan-price { margin-block: 19px; font-size: 36px; }
  .plan-card ul { grid-template-columns: 1fr 1fr; gap: 13px 17px; padding-bottom: 22px; }
  .plan-card .button { min-height: 41px; font-size: 11px; }
  .faq-list summary { font-size: 11px; padding-block: 18px; }
  .faq-list p { font-size: 11px; }
  .help-card { padding: 24px; }
  .profile-layout { gap: 18px; margin-top: 23px; }
  .profile-summary { padding: 22px; grid-template-columns: 50px 1fr; gap: 0 13px; }
  .profile-summary .avatar { width: 50px; height: 50px; grid-row: 1 / 4; font-size: 16px; }
  .profile-summary .button { grid-column: 1 / -1; grid-row: auto; margin-top: 19px; }
  .profile-fields { padding: 22px; }
  .profile-fields h2 { margin-bottom: 20px; }
  .chat-layout { min-height: 560px; height: calc(100dvh - 105px); grid-template-columns: minmax(0, 1fr); border-radius: 15px; }
  .chat-sidebar { display: none; }
  .chat-header { min-height: 64px; padding: 14px 17px; }
  .chat-body { gap: 22px; padding: 23px 19px; }
  .chat-empty { padding-inline: 5px; }
  .chat-empty h2 { font-size: 29px; max-width: 270px; }
  .chat-empty p { max-width: 280px; font-size: 11px; }
  .chat-composer { margin: 0 13px 13px; }
  .chat-composer .creation-panel { padding: 13px; }
  .message { max-width: 100%; gap: 10px; }
  .message-content { font-size: 11px; }
  .message-avatar { width: 26px; height: 26px; border-radius: 8px; }
  .chat-composer .keyboard-hint { font-size: 11px; }
  .modal-backdrop { padding: 20px 14px; }
  .modal { max-height: calc(100dvh - 40px); border-radius: 19px; }
  .modal-header { padding: 22px 21px 17px; }
  .modal-header h2 { font-size: 20px; }
  .modal-body { padding: 0 21px 22px; }
  .modal-footer { padding: 15px 21px 20px; }
  .modal-body .model-card-body { padding: 11px; }
  .modal-body .model-title, .modal-body .model-title h3 { font-size: 11px; }
  .modal-body .model-description { font-size: 11px; }
  .modal-body .work-thumbnail { height: 220px; }
  .toast-container { right: 18px; bottom: 18px; }
  .toast { font-size: 11px; }
}
@media (max-width: 400px) {
  .workspace { padding-inline: 15px; }
  .breadcrumbs > span:first-of-type:not(:last-child), .breadcrumbs > svg { display: none; }
  .topbar { gap: 9px; }
  .topbar > .breadcrumbs { margin-right: auto; }
  .credit-pill { font-size: 11px; padding-inline: 8px; }
  .credit-pill small { display: none; }
  .page-title { font-size: 27px; }
  .page-subtitle { font-size: 11px; }
  .intro-actions .button { font-size: 11px; }
  .studio-hero { min-height: 250px; grid-template-columns: 1.2fr .8fr; }
  .hero-copy { padding-left: 20px; padding-top: 23px; }
  .hero-copy h2 { font-size: 28px; }
  .hero-copy > p { font-size: 11px; max-width: 190px; }
  .hero-chips span { font-size: 11px; padding-inline: 5px; }
  .hero-art img { object-position: 60% center; }
  .category-tab { padding: 11px 10px; min-height: 71px; }
  .category-tab span { font-size: 11px; }
  .category-tab small { font-size: 11px; }
  .creation-panel { padding: 14px; }
  .mode-badge { font-size: 11px; padding: 4px 5px; }
  .prompt-input { font-size: 11px; min-height: 85px; }
  .prompt-tools button { padding-inline: 5px; }
  .prompt-tools button svg { width: 11px; height: 11px; }
  .prompt-bottom { gap: 7px; }
  .generate-button { padding-inline: 8px; font-size: 11px; gap: 5px; }
  .button-cost { font-size: 11px; padding-left: 5px; }
  .model-grid, .works-grid, .catalog-grid, .history-grid { gap: 10px; }
  .model-card-body { padding: 11px; }
  .model-title, .model-title h3 { font-size: 11px; }
  .model-description { font-size: 11px; }
  .model-price { font-size: 11px; }
  .model-visual { height: 112px; }
  .work-thumbnail { height: 124px; }
  .work-title { font-size: 11px; }
  .work-info { font-size: 11px; }
  .work-meta { padding: 10px; }
  .package-card { padding-inline: 10px; }
  .package-credits { font-size: 22px; }
  .package-credits small { font-size: 11px; }
  .package-price { font-size: 13px; }
  .package-card > p { font-size: 11px; }
  .package-card .button { font-size: 11px; padding-inline: 4px; }
  .form-grid { grid-template-columns: 1fr; }
  .setting-row { gap: 12px; }
  .setting-row strong { font-size: 11px; }
  .setting-row p, .setting-row small { font-size: 11px; }
  .setting-row .select { min-width: 110px; padding-inline: 8px; font-size: 11px; }
  .plan-card ul { grid-template-columns: 1fr; }
  .modal-header { padding-inline: 18px; }
  .modal-body { padding-inline: 18px; }
  .modal-body .catalog-grid { gap: 9px; }
  .modal-body .model-card-body { padding: 10px; }
  .modal-body .model-title, .modal-body .model-title h3 { font-size: 11px; }
  .payment-method { padding: 13px 10px; gap: 7px; font-size: 11px; }
  .payment-method small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Keep the working interface readable at every size. */
.page-subtitle { font-size: 14px; }
.hero-copy > p { font-size: 13px; }
.model-description, .catalog-grid .model-description, .modal-body .model-description { color: #718560; font-size: 12px; min-height: 59px; }
.model-title, .model-title h3 { font-size: 14px; }
.catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 15px; }
.model-title .tag { font-size: 10px; }
.model-price, .catalog-grid .model-price { font-size: 11px; }
.category-tab > span { font-size: 12px; }
.category-tab > small { font-size: 11px; }
.model-meta strong { font-size: 13px; }
.model-meta small { font-size: 11px; }
.button { font-size: 12px; }
.generate-button { font-size: 12px; }
.button-cost { font-size: 11px; }
.prompt-input { font-size: 14px; }
.prompt-tools .parameter-chip { font-size: 11px; }
.prompt-chip { font-size: 11px; }
.work-info, .history-grid .work-info { font-size: 11px; }
.work-title, button.work-title, .history-grid .work-title { font-size: 12px; }
.work-meta { padding: 13px; }
.message-text, .chat-composer > textarea { font-size: 14px; }
.chat-empty p, .chat-suggestions button { font-size: 12px; }
.faq-list summary { font-size: 14px; }
.faq-list p { font-size: 13px; }
.faq-list summary > svg { top: 22px; }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-summary { display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-summary .button { width: 100%; margin-top: 21px; }
.profile-summary .avatar { margin: 0 0 18px; }
.balance-layout > .stat-grid { grid-template-columns: 1fr 1fr; }
.catalog-grid .model-description { min-height: 61px; }
.model-option-info > span { font-size: 12px; }
.model-option-info > strong { font-size: 14px; }
.model-option-info > em { font-size: 11px; }
.payment-method strong { font-size: 13px; }
.payment-method small { font-size: 11px; }
.modal-body .model-option .model-option-price { font-size: 12px; }
.modal-lead { font-size: 14px; }
.package-credits small { font-size: 11px; }
.package-card > p { font-size: 12px; }
.package-price small { font-size: 11px; }
.setting-row strong { font-size: 13px; }
.setting-row small { font-size: 12px; }
.settings-title p { font-size: 12px; }
.profile-summary > p { font-size: 12px; }
.profile-summary > .muted { font-size: 12px; }
.plan-card > p, .plan-card li { font-size: 12px; }
.plan-card .button { font-size: 12px; }
.field { font-size: 12px; }
.field .input, .field .select { font-size: 13px; }
.demo-notice p { font-size: 11px; }
.transaction-row > strong, .transaction-name, .transaction-date { font-size: 12px; }
.filter-tabs button { font-size: 11px; }
.search-box input { font-size: 12px; }
.section-heading .eyebrow { font-size: 10px; }
.section-subtitle { font-size: 12px; }
.hero-chips span { font-size: 10px; }
.hero-copy { padding-top: 29px; padding-bottom: 29px; }
.studio-hero { min-height: 264px; }

@media (max-width: 1180px) {
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .model-visual { height: 137px; }
  .model-card-body { padding: 16px; }
  .model-description { min-height: 59px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-tab { gap: 1px 7px; padding-inline: 11px; grid-template-columns: 17px minmax(0, 1fr); }
  .category-tab svg { width: 17px; height: 17px; }
  .category-tab > span { font-size: 11px; }
  .category-tab > small { font-size: 10px; }
  .work-meta { align-items: start; }
  .work-meta > .icon-btn { display: none; }
  .work-info { font-size: 10px; white-space: normal; flex-wrap: wrap; }
  .balance-layout { grid-template-columns: 1fr; }
  .balance-layout > .stat-grid { min-height: 150px; }
  .balance-layout > .stat-grid .stat-card { padding: 20px; }
  .balance-layout .stat-card strong small { display: inline; }
}
@media (max-width: 820px) {
  .model-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
  .model-visual { height: 148px; }
  .model-card-body { padding: 17px; }
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-tab > span { font-size: 12px; }
  .category-tab > small { font-size: 10px; }
  .balance-layout { grid-template-columns: 1.4fr 1fr; }
  .balance-layout > .stat-grid { grid-template-columns: 1fr; gap: 12px; }
  .balance-layout > .stat-grid .stat-card { padding: 16px 19px; }
  .stat-card .stat-icon { display: none; }
  .stat-card strong { margin-top: 8px; font-size: 25px; }
  .plans-grid { grid-template-columns: 1fr; gap: 21px; }
  .plan-card { padding: 27px; }
  .plan-card ul { grid-template-columns: 1fr 1fr; }
  .plan-card .button { width: auto; min-width: 150px; }
  .profile-summary { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; }
  .profile-summary > * { width: 100%; }
  .profile-summary > .avatar { width: 64px; height: 64px; }
  .profile-summary .badge { width: fit-content; }
  .profile-summary .button { width: auto; min-width: 160px; }
}
@media (max-width: 650px) {
  .topbar-actions > .demo-badge, .topbar-actions > .avatar.small { display: none; }
  .breadcrumbs { font-size: 11px; }
  .breadcrumbs > span:first-of-type { display: none; }
  .breadcrumbs > .breadcrumb-divider { display: none; }
  .credit-pill { height: 34px; font-size: 11px; }
  .credit-pill > span:not(.credit-plus) { font-size: 10px; }
  .credit-pill .credit-plus { display: none; }
  .page-intro { flex-direction: column; align-items: start; gap: 11px; }
  .page-title { font-size: 30px; }
  .page-subtitle { max-width: none; font-size: 13px; }
  .intro-actions { margin: 0; }
  .intro-actions .button { font-size: 11px; min-height: 34px; padding-inline: 12px; }
  .studio-hero { grid-template-columns: 1fr .77fr; min-height: 279px; }
  .hero-copy { padding: 25px 0 27px 22px; }
  .hero-copy h2 { font-size: 29px; }
  .hero-copy p { min-width: 215px; max-width: 250px; font-size: 12px; }
  .hero-eyebrow { max-width: 190px; font-size: 9px; }
  .hero-note { font-size: 7px; right: 13px; }
  .hero-chips { flex-wrap: wrap; max-width: 220px; }
  .hero-chips span { font-size: 9px; }
  .creation-heading { align-items: start; }
  .creation-heading > .small-text { display: none; }
  .category-tab { display: flex; align-items: center; justify-content: center; gap: 6px; flex-direction: column; min-height: 67px; padding: 11px 7px; }
  .category-tab > span { font-size: 11px; }
  .category-tab > small { display: none; }
  .category-tab > svg { width: 19px; height: 19px; }
  .category-tabs:has(> :nth-child(5)) { display: flex; overflow-x: auto; margin-bottom: 19px; scrollbar-width: none; }
  .category-tabs:has(> :nth-child(5)) .category-tab { flex: 1 0 auto; flex-direction: row; min-height: 38px; padding: 9px 12px; }
  .category-tabs:has(> :nth-child(5)) .category-tab > svg { width: 13px; height: 13px; }
  .model-meta strong { font-size: 12px; }
  .model-meta small { font-size: 11px; }
  .mode-badge { font-size: 10px; }
  .prompt-input { font-size: 14px; min-height: 110px; }
  .prompt-tools { gap: 7px; }
  .prompt-tools > .keyboard-hint { display: none; }
  .prompt-tools .parameter-chip { font-size: 11px; }
  .generate-button { padding: 8px 11px; min-height: 39px; font-size: 11px; }
  .button-cost { font-size: 10px; }
  .generate-button svg { width: 13px; height: 13px; }
  .prompt-chip { font-size: 11px; padding: 5px 8px; }
  .inspiration-row > span:first-child { display: block; width: 100%; margin-bottom: 1px; font-size: 11px; }
  .section-heading h2 { font-size: 19px; }
  .section-heading .eyebrow { font-size: 9px; }
  .text-button { font-size: 11px; }
  .section-heading .section-subtitle { font-size: 11px; }
  .model-grid, .catalog-grid { gap: 12px; }
  .model-card-body, .catalog-grid .model-card-body { padding: 13px; }
  .model-title, .model-title h3, .catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 13px; }
  .model-description, .catalog-grid .model-description { min-height: 77px; font-size: 12px; }
  .model-title .tag { font-size: 9px; }
  .model-price, .catalog-grid .model-price { font-size: 11px; }
  .model-provider { font-size: 10px; }
  .model-visual, .catalog-grid .model-visual { height: 124px; }
  .works-grid { grid-template-columns: 1fr; }
  .works-grid .work-card { display: grid; grid-template-columns: 125px minmax(0, 1fr); border-radius: 13px; }
  .works-grid .work-thumbnail { height: 106px; }
  .works-grid .work-meta { flex-direction: column; align-items: start; justify-content: center; padding: 15px; }
  .work-meta > .icon-btn { display: none; }
  .work-title, button.work-title, .history-grid .work-title { font-size: 13px; white-space: normal; text-align: left; }
  .work-info, .history-grid .work-info { font-size: 11px; margin-top: 8px; white-space: normal; flex-wrap: wrap; justify-content: start; gap: 4px; }
  .work-type { bottom: 7px; left: 7px; padding: 3px 5px; font-size: 8px; }
  .sample-tag { font-size: 7px; top: 7px; right: 7px; }
  .history-grid { grid-template-columns: 1fr; }
  .balance-layout { grid-template-columns: 1fr; }
  .balance-card { min-height: 235px; }
  .balance-details { flex-wrap: wrap; }
  .balance-card .balance-details .button { font-size: 11px; }
  .balance-layout > .stat-grid { grid-template-columns: 1fr 1fr; min-height: 125px; }
  .stat-card > span:not(.stat-icon) { font-size: 11px; }
  .stat-card strong { font-size: 24px; }
  .stat-card strong small { font-size: 11px; }
  .packages-grid { gap: 10px; }
  .package-card { padding: 20px 12px 14px; }
  .package-name { font-size: 11px; margin-bottom: 13px; }
  .package-credits { font-size: 25px; }
  .package-credits small { font-size: 11px; }
  .package-card p { display: none; }
  .package-price { margin-top: 17px; font-size: 17px; }
  .package-price > span { font-size: 11px; }
  .package-price small { margin-top: 3px; font-size: 9px; }
  .package-badge { top: -9px; right: 6px; padding: 3px 5px; font-size: 8px; }
  .package-cta { font-size: 10px; margin-top: 13px; padding-top: 11px; }
  .package-cta svg { width: 11px; height: 11px; }
  .transaction-panel { padding: 20px 16px; }
  .transaction-row { grid-template-columns: minmax(0, 1fr) 72px; gap: 11px; }
  .transaction-row > .transaction-date, .transaction-row.table-head > span:nth-child(2) { display: none; }
  .transaction-name { font-size: 11px; gap: 8px; }
  .transaction-name small { font-size: 10px; }
  .tx-icon { flex-shrink: 0; width: 29px; height: 29px; border-radius: 8px; }
  .transaction-row > strong { font-size: 11px; }
  .plan-card { padding: 27px; }
  .plan-card > p { font-size: 13px; }
  .plan-card li { font-size: 12px; }
  .plan-card ul { grid-template-columns: 1fr; }
  .plan-card .button { width: 100%; }
  .pricing-note { padding: 20px; gap: 12px; }
  .pricing-note p { font-size: 12px; }
  .faq-list summary { font-size: 13px; padding-right: 45px; }
  .faq-list p { font-size: 12px; }
  .faq-list summary svg { top: 20px; }
  .help-card p { font-size: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .profile-summary { flex-direction: column; padding: 25px; }
  .profile-summary > .avatar { width: 70px; height: 70px; font-size: 22px; }
  .profile-summary > .badge, .profile-summary > .button { width: auto; }
  .profile-summary .button { min-width: 180px; }
  .profile-fields .settings-group { padding: 21px; }
  .settings-title h2 { font-size: 16px; }
  .settings-title p { font-size: 12px; }
  .setting-row strong { font-size: 13px; }
  .setting-row small { font-size: 12px; }
  .settings-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .settings-actions > .small-text { font-size: 11px; }
  .settings-actions .button { min-height: 42px; font-size: 12px; }
  .chat-empty h2 { font-size: 30px; }
  .chat-empty p { font-size: 13px; }
  .chat-suggestions { grid-template-columns: 1fr; max-width: 300px; gap: 7px; }
  .chat-suggestions button { flex-wrap: nowrap; padding: 11px 13px; font-size: 12px; }
  .chat-empty { padding-block: 15px; }
  .chat-spark { width: 49px; height: 49px; margin-bottom: 2px; border-radius: 16px; }
  .chat-spark svg { width: 24px; height: 24px; }
  .message-text, .chat-composer > textarea { font-size: 14px; }
  .chat-disclaimer { font-size: 10px; }
  .model-option { padding: 12px; gap: 10px; align-items: start; flex-wrap: wrap; }
  .model-option .model-avatar { width: 31px; height: 31px; }
  .model-option-info { flex: 1 1 calc(100% - 45px); }
  .model-option-price { margin-left: 41px; margin-top: 3px; font-size: 12px; }
  .model-option-info > strong { font-size: 13px; }
  .model-option-info > span { font-size: 12px; }
  .model-option-info > em { font-size: 11px; }
  .modal-lead { font-size: 13px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .button { flex: 1 1 auto; font-size: 12px; }
  .payment-method strong { font-size: 12px; }
  .payment-method small { font-size: 11px; }
  .workspace-footer { flex-direction: column; align-items: start; gap: 5px; font-size: 10px; }
}
@media (max-width: 380px) {
  .workspace { padding-inline: 14px; }
  .page-title { font-size: 28px; }
  .studio-hero { grid-template-columns: 1fr .6fr; min-height: 280px; }
  .hero-copy { padding-left: 20px; }
  .hero-copy h2 { font-size: 28px; }
  .hero-copy > p { min-width: 210px; font-size: 12px; }
  .hero-copy .hero-chips { gap: 6px; }
  .hero-chips span { font-size: 9px; }
  .category-tab > span { font-size: 10px; }
  .model-grid, .catalog-grid { gap: 10px; }
  .model-card-body, .catalog-grid .model-card-body { padding: 12px; }
  .model-title, .model-title h3, .catalog-grid .model-title, .catalog-grid .model-title h3 { font-size: 12px; }
  .model-description, .catalog-grid .model-description { font-size: 11px; min-height: 77px; }
  .model-title .tag { font-size: 9px; }
  .model-price, .catalog-grid .model-price { font-size: 10px; }
  .model-price small { font-size: 9px; }
  .prompt-tools .parameter-chip { padding-inline: 6px; font-size: 10px; }
  .generate-button { font-size: 11px; padding-inline: 9px; }
  .generate-button .button-label > svg { display: none; }
  .button-cost { font-size: 10px; }
  .package-card { padding-inline: 9px; }
  .package-credits { font-size: 23px; }
  .package-credits small { font-size: 10px; }
  .package-price small { font-size: 8px; }
  .package-badge { display: none; }
  .package-cta { font-size: 9px; }
  .package-cta svg { width: 10px; height: 10px; }
}

/* extras.css supplies the larger native switch thumb with ::after. */
.switch-input::before { display: none; }