/* Native UI typography: use the platform font and its screen hinting. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --background: #111315; --surface: #1b1f23; --surface-raised: #24292e; --surface-hover: #2c3238;
  --text-primary: #f2f4f5; --text-secondary: #abb2b9; --text-tertiary: #8d969f;
  --border: #ffffff0f; --border-strong: #ffffff20; --accent-text: #d6ff62;
  --nav-background: #15181c; --canvas: #0c0e10; --field-border: #3a424b;
  --selected-surface: #d6ff6210; --focus: #c7ed64;
  --shadow-card: none; --shadow-float: 0 8px 32px #00000025;
  font-family: var(--font-ui); color-scheme: dark;
}
:root[data-theme='light'] {
  --background: #f4f5f2; --surface: #ffffff; --surface-raised: #eaede7; --surface-hover: #e2e7dc;
  --text-primary: #212820; --text-secondary: #596354; --text-tertiary: #66715f;
  --border: #24341a12; --border-strong: #24341a28; --accent-text: #48621b;
  --nav-background: #fcfdfa; --canvas: #e5e8e0; --field-border: #c8cebf;
  --selected-surface: #d6ff6238; --focus: #587421; --destructive: #ac3b30;
  --lime-soft: #628a29; --shadow-card: 0 2px 8px #20301803; --shadow-float: 0 8px 32px #20301814;
  color-scheme: light;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-ui); font-size: 15px; font-weight: 400; line-height: 1.5; background: var(--canvas); letter-spacing: 0; -webkit-font-smoothing: auto; text-rendering: auto; }
button,input,textarea,select { font-family: var(--font-ui); font-size: inherit; letter-spacing: 0; }
h1,h2,h3,strong,b { font-family: var(--font-ui); font-weight: 600; }
h1 { font-size: 27px; line-height: 1.25; letter-spacing: -.4px; }
h2 { font-size: 18px; line-height: 1.35; letter-spacing: -.3px; }
h3 { font-size: 15px; line-height: 1.35; letter-spacing: -.2px; }
p { line-height: 1.55; }
.app { background: var(--background); border-color: var(--border); padding-bottom: calc(100px + var(--safe-bottom)); }
.topbar { height: 58px; }
.brand { font-size: 15px; font-weight: 700; letter-spacing: -.35px; }
.header-home { top: 7px; color: var(--accent-text); }
.header-actions { top: 7px; }
.header-menu { display: grid; place-items: center; font-weight: 400; }
.header-menu svg { width: 20px; height: 20px; color: var(--text-secondary); }
.notice { font-size: 12px; line-height: 1.4; letter-spacing: 0; margin-bottom: 7px; color: var(--text-secondary); }
.home-heading { align-items: center; margin: 10px 0 18px; gap: 10px; }
.home-heading > div { min-width: 0; }
.home-heading h1 { font-size: clamp(21px, 5.9vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: -.4px; }
.home-heading p { font-size: 13px; line-height: 1.45; margin-top: 6px; }
.balance-pill { background: var(--surface); border-color: var(--border-strong); color: var(--accent-text); border-radius: 12px; gap: 5px; min-height: 42px; padding: 8px; }
.balance-pill strong { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-pill > span { font-size: 10px; letter-spacing: 0; }
.balance-pill svg { width: 16px; height: 16px; }
.photo-banner { border-radius: 16px; min-height: 210px; max-height: none; aspect-ratio: 1.7; }
.banner-copy { padding: 20px 18px; gap: 10px; }
.banner-copy > strong { font-size: 23px; line-height: 1.13; letter-spacing: -.45px; font-weight: 700; }
.banner-copy > span:not(.banner-cta) { font-size: 13px; line-height: 1.4; }
.banner-cta { padding: 10px 14px; min-height: 40px; font-size: 13px; font-weight: 700; }
.tool-grid { gap: 10px; }
.home-tools { margin-top: 14px; }
.tool-card { min-height: 88px; padding: 14px 12px; gap: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.tool-icon { width: 26px; }
.tool-icon svg { width: 23px; height: 23px; color: var(--text-primary); }
.tool-card-copy h3, #screen[data-route='create'] .tool-card-copy h3 { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.tool-card-copy p, #screen[data-route='create'] .tool-card-copy p { font-size: 13px; line-height: 1.4; max-width: none; color: var(--text-secondary); margin-top: 4px; }
.unavailable { background: var(--surface); border-style: dashed; }
.unavailable .tool-icon svg, .unavailable h3 { color: var(--text-secondary); }
.unavailable-label { font-size: 10px; position: static; margin-left: auto; align-self: start; }
.tool-card.unavailable { flex-wrap: wrap; gap: 6px; }
.tool-card.unavailable .tool-card-copy { flex: 1; min-width: 75px; }
.tool-card.unavailable .unavailable-label { display: none; }
.tool-card.unavailable .tool-card-copy::after { content: 'Недоступно'; display: block; font-size: 10px; color: var(--text-secondary); margin-top: 4px; }
.autopost-card { margin-top: 10px; }
.autopost-card .tool-card { min-height: 72px; padding: 14px; }
.section-head { margin: 22px 0 12px; }
.section-head h2 { font-size: 17px; font-weight: 700; }
.section-head a { font-size: 13px; min-height: 36px; color: var(--text-secondary); }
.recent-item { border-radius: 10px; }
.page-heading { margin: 10px 0 22px; }
.page-heading p { font-size: 13px; line-height: 1.5; margin-top: 6px; }
.search { border-color: var(--border-strong); background: var(--surface); border-radius: 12px; }
.search input, .search input::placeholder { font-size: 14px; }
.eyebrow,.meta,.balance-caption { font-size: 12px; line-height: 1.45; letter-spacing: .6px; }
.tabs { gap: 8px; margin-bottom: 18px; }
.tab { background: var(--surface); border: 1px solid var(--border); font-size: 13px; min-height: 42px; padding: 9px 16px; }
.tab.active { background: var(--lime); color: var(--on-lime); font-weight: 700; border-color: transparent; }
.works-grid { gap: 12px; }
.media-card { border-radius: 12px; border-color: var(--border-strong); }
.status { color: #f5f7f1; font-size: 12px; }
.status.failed { color: #ffc2b9; }
.job-card { background: var(--surface); border-color: var(--border-strong); border-radius: 12px; }
.job-card > strong { font-size: 13px; font-weight: 600; }
.job-card > small { font-size: 12px; color: var(--text-secondary); }
.job-loader { border-color: var(--border-strong); border-top-color: var(--text-primary); border-right-color: var(--text-primary); animation: working 1.2s linear infinite; }
.music-card { padding-bottom: 29px; }
.music-card .media-copy strong { font-size: 13px; }
.music-card .media-copy small { font-size: 12px; }
.music-card .status { color: var(--text-primary); }
.form-control, .prompt-wrap textarea { background: var(--surface); border-color: var(--field-border); color: var(--text-primary); border-radius: 12px; font-size: 15px; line-height: 1.6; -webkit-text-fill-color: currentColor; }
.form-control::placeholder { color: var(--text-tertiary); }
.form-control:disabled { opacity: .7; }
.generation-form { gap: 12px; }
.generation-form select.form-control { color-scheme: inherit; }
.field-label { font-size: 14px; font-weight: 600; margin-top: 18px; }
.generation-form textarea.form-control { min-height: 130px; }
.generation-form input[type='file'] { font-size: 13px; }
.generation-form input::file-selector-button { border: 0; border-radius: 8px; background: var(--surface-raised); color: var(--text-primary); padding: 8px 10px; margin-right: 8px; font: inherit; }
.check-row { font-size: 13px; line-height: 1.6; }
.studio-notice,.tool-description,.profile-note { font-size: 13px; }
.studio-submit { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 8px 8px; }
.studio-submit p { font-size: 13px; }
.studio-submit p span { color: var(--accent-text); }
.studio-submit .button { font-size: 14px; min-height: 48px; }
.button { font-size: 14px; min-height: 48px; font-weight: 600; }
.button.secondary { background: var(--surface-raised); border-color: var(--border-strong); color: var(--text-primary); }
.button:disabled { background: var(--surface-raised); color: var(--text-secondary); }
.hint,.footnote,.studio-submit + .hint { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.empty { background: var(--surface); border-color: var(--border-strong); padding: 30px 20px; }
.empty h2,.empty h1 { font-size: 21px; line-height: 1.3; }
.empty p { font-size: 13px; line-height: 1.65; }
.empty > svg,.accent,.balance-unit svg,.tariff-icon,.avatar,.empty .accent { color: var(--accent-text); }
.progress-label { color: var(--text-secondary); }
.progress-label span:last-child { color: var(--accent-text); }
.balance-number { font-weight: 600; letter-spacing: -2.5px; }
.balance-unit { font-size: 13px; letter-spacing: 0; }
.in-profile { background: var(--surface); border-color: var(--border-strong); }
.profile-head h1 { font-size: 25px; line-height: 1.3; }
.profile-head .eyebrow { font-size: 10px; letter-spacing: .5px; }
.profile-head p { font-size: 13px; }
.profile-row > span:first-child { font-size: 14px; }
.profile-row small,.tariff-card small { font-size: 13px; }
.tariff-card strong { font-size: 15px; }
.tag { font-size: 10px; letter-spacing: .3px; }
.signature { font-size: 12px; letter-spacing: .3px; }
.signature span { font-size: 10px; letter-spacing: 0; }
.chat-message { padding: 16px; font-size: 14px; line-height: 1.7; }
.chat-message small { font-size: 13px; opacity: 1; color: var(--text-secondary); }
.chat-message.from-user { background: var(--surface-raised); }
.search-result { padding: 16px; font-size: 14px; line-height: 1.7; }
.support-ticket { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.support-ticket small { font-size: 13px; }
.bottom-nav { background: var(--nav-background); border-color: var(--border-strong); padding-top: 9px; }
.bottom-nav a { position: relative; font-size: 12px; line-height: 1.3; gap: 5px; min-height: 50px; }
.bottom-nav a.active { color: var(--accent-text); }
.bottom-nav a.active::before { content: ''; position: absolute; top: 0; left: 50%; width: 42px; height: 27px; margin-left: -21px; border-radius: 10px; background: var(--selected-surface); z-index: -1; animation: nav-indicator 240ms ease-out; }
.bottom-nav a.active svg { animation: nav-icon 260ms ease-out; }
.sheet,.viewer { background: var(--background); border-color: var(--border-strong); }
.sheet { max-height: calc(92dvh - var(--safe-top)); overflow-y: auto; padding: 22px 22px calc(24px + var(--safe-bottom)); border-radius: 24px 24px 0 0; }
.sheet[open] { animation: sheet-enter 240ms var(--ease); }
.viewer[open] { animation: viewer-enter 180ms ease-out; }
.sheet .section-head { margin-bottom: 4px; }
.sheet .section-head h2 { font-size: 23px; }
.dialog-close { font-size: 26px; font-weight: 400; }
/* Settings: native controls, without decorative miniature screens. */
#settings-dialog { width: calc(100% - 24px); max-width: 440px; padding: 24px 20px calc(24px + var(--safe-bottom)); margin: auto auto 12px; border-radius: 24px; box-shadow: 0 24px 80px #0003; }
#settings-dialog::backdrop { background: #0008; }
#settings-dialog .section-head { margin: 0 0 28px; }
#settings-dialog .section-head h2 { font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.4px; }
#settings-dialog .dialog-close { width: 44px; height: 44px; margin: -6px -6px -6px 0; background: transparent; border: 0; color: var(--text-secondary); }
#settings-dialog .dialog-close svg { width: 20px; height: 20px; stroke-width: 2; }
.settings-label { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0; color: var(--text-primary); }
.theme-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.theme-options button { min-width: 0; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 4px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text-secondary); font-size: 13px; font-weight: 500; line-height: 18px; }
.theme-options button svg { width: 22px; height: 22px; stroke-width: 1.75; }
.theme-options button[aria-pressed='true'] { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-primary); box-shadow: 0 2px 5px #0001; }
.theme-options button[aria-pressed='true'] svg { color: var(--accent-text); }
:root[data-theme='light'] .theme-options { background: var(--surface-raised); }
:root[data-theme='light'] .theme-options button[aria-pressed='true'] { background: var(--surface); }
.theme-description { color: var(--text-secondary); font-size: 13px; line-height: 20px; margin-top: 10px; }
.settings-preferences { margin-top: 28px; }
.settings-preferences .settings-label { margin-bottom: 2px; }
.preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 88px; padding: 18px 0; text-align: left; background: transparent; border-bottom: 1px solid var(--border-strong); }
.preference-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.preference-row > span:first-child { min-width: 0; }
.preference-row strong { display: block; font-size: 15px; font-weight: 600; line-height: 22px; }
.preference-row small { display: block; color: var(--text-secondary); font-size: 13px; line-height: 20px; margin-top: 4px; text-wrap: pretty; }
.switch { flex-shrink: 0; width: 44px; height: 26px; padding: 3px; border: 0; background: var(--surface-hover); }
.switch::before { width: 20px; height: 20px; background: var(--text-secondary); }
[aria-pressed='true'] .switch::before { transform: translateX(18px); }
@media (max-width: 360px) { #settings-dialog { padding-inline: 18px; } }
#toast { display: flex; align-items: center; gap: 10px; inset: auto auto calc(92px + var(--safe-bottom)) 50%; margin: 0; border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-primary); font: 500 13px/1.5 var(--font-ui); padding: 13px 17px; box-shadow: var(--shadow-float); animation: toast-enter 220ms ease-out; }
#toast.success { background: var(--surface); color: var(--text-primary); border-color: var(--focus); animation: toast-enter 220ms ease-out; }
.toast-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--on-lime); }
.toast-check svg { width: 17px; height: 17px; }
.just-completed { animation: completed-ring 1.6s ease-out; }
button:not(:disabled):active, a:active { transform: translateY(1px); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.bootstrap { background: var(--background); }
.bootstrap strong { font-family: var(--font-ui); font-weight: 600; }
.bootstrap p { font-size: 13px; }
@keyframes working { to { transform: rotate(360deg); } }
@keyframes nav-indicator { from { opacity: 0; transform: scaleX(.7); } to { opacity: 1; transform: scaleX(1); } }
@keyframes nav-icon { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes sheet-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes viewer-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes completed-ring { 0%,40% { border-color: var(--focus); box-shadow: 0 0 0 2px var(--selected-surface); } 100% { border-color: var(--border-strong); box-shadow: none; } }
@media (max-width:360px) {
  .balance-pill > span { display: none; }
  .home-heading h1 { font-size: 22px; }
  .home-heading p { font-size: 12px; }
  .tool-card { gap: 8px; padding: 12px 10px; }
  .tool-icon { width: 23px; }
  .tool-card-copy h3 { font-size: 13px; }
  .tool-card-copy p { font-size: 12px; line-height: 1.45; }
  .banner-copy > strong { font-size: 22px; }
  .banner-copy > span:not(.banner-cta) { font-size: 13px; }
  .section-head h2 { font-size: 17px; }
  .bottom-nav a { font-size: 10px; }
  .sheet { padding-inline: 16px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Creative controls: one visual language across photo, video and Shorts. */
.creative-form { gap: 0; padding-bottom: 24px; }
.creative-intro { margin: 8px 0 16px; }
.creative-intro h1 { margin: 6px 0; }
.creative-intro p { color: var(--text-secondary); font-size: 14px; }
.creative-form .field-label { display: block; margin: 26px 0 11px; }
.creative-form .creative-prompt { min-height: 142px; border-radius: 18px; padding: 17px; background: var(--surface); }
.field-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.field-heading small { margin-bottom: 10px; color: var(--text-tertiary); font-size: 12px; }
.visual-choices { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.visual-choices::-webkit-scrollbar { display: none; }
.choice { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; min-height: 46px; padding: 10px 15px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--surface); text-align: left; color: var(--text-secondary); scroll-snap-align: start; }
.choice .choice-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice strong { color: var(--text-primary); font-size: 13px; line-height: 1.3; }
.choice small { color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.choice.selected { border-color: var(--accent-text); background: var(--selected-surface); color: var(--text-primary); }
.choice.selected strong { color: var(--accent-text); }
.choice:disabled { opacity: .42; }
.style-gallery .choice { display: block; width: 138px; min-height: 0; padding: 5px 5px 12px; border-radius: 16px; overflow: hidden; }
.style-gallery img { width: 100%; height: 166px; object-fit: cover; border-radius: 11px; background: var(--surface-raised); }
.style-gallery .choice-copy { padding: 9px 7px 0; }
.style-gallery .choice strong { font-size: 13px; }
.style-gallery .choice small { min-height: 29px; }
.ratio-picker .choice { flex-direction: column; min-width: 84px; min-height: 100px; padding: 13px 8px 10px; }
.ratio-shape { display: block; width: 35px; height: 35px; border: 2px solid currentColor; border-radius: 5px; }
.ratio-shape[data-ratio="4:5"] { width: 29px; height: 37px; }
.ratio-shape[data-ratio="9:16"] { width: 23px; height: 41px; }
.ratio-shape[data-ratio="16:9"] { width: 43px; height: 25px; }
.ratio-shape[data-ratio="21:9"] { width: 48px; height: 21px; }
.count-picker .choice { min-width: 55px; }
.model-picker { flex-direction: column; overflow: visible; }
.model-picker .choice { width: 100%; justify-content: flex-start; min-height: 61px; padding: 12px 14px; }
.model-picker .choice-copy { gap: 4px; }
.model-picker .choice small { font-size: 12px; }
.shorts-frame-note { display: flex; align-items: center; min-height: 70px; padding: 16px; border-radius: 15px; background: linear-gradient(110deg,#1d2730,#25252e); border: 1px solid var(--border-strong); font-size: 13px; }
.creative-limitation { margin: 24px 0 10px; color: var(--text-tertiary); font-size: 12px; }
.creative-submit { position: sticky; bottom: calc(66px + var(--safe-bottom)); z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 22px -8px 0; padding: 10px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--background); box-shadow: 0 12px 40px #0006; }
.creative-submit > span { padding-left: 8px; color: var(--text-secondary); font-size: 12px; }
.creative-submit .button { min-width: 145px; }
@media (max-width: 350px) {
  .creative-submit { grid-template-columns: 1fr; }
  .creative-submit .button { width: 100%; }
  .style-gallery .choice { width: 125px; }
}
@media (min-width: 680px) {
  .app { max-width: 920px; }
  .photo-banner { aspect-ratio:auto; height:clamp(300px,36vw,380px); min-height:0; max-height:380px; }
  #screen[data-route="tool"] { max-width: 600px; margin-inline: auto; }
  #screen[data-route="works"] .works-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #screen[data-route="create"] .tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}


/* Conversation view */
.chat-header { display:flex; align-items:start; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.chat-header h1 { margin:5px 0; font-size:24px; }
.chat-header p { color:var(--text-secondary); font-size:13px; }
.chat-header .button { white-space:nowrap; min-height:42px; padding-inline:13px; }
.chat-list { display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.chat-list::-webkit-scrollbar { display:none; }
.chat-list-item { display:flex; align-items:center; gap:8px; flex:0 0 auto; max-width:170px; min-height:42px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.chat-list-item.active { border-color:var(--accent-text); background:var(--selected-surface); }
.chat-list-item small { color:var(--text-secondary); }
.chat-tools { display:flex; gap:15px; padding:0 0 10px; }
.chat-tools button,.chat-copy { min-height:38px; padding:4px 0; background:none; color:var(--text-secondary); font-size:12px; }
.chat-tools button:last-child { color:var(--destructive); }
.chat-settings { margin:2px 0 16px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); }
.chat-settings summary { display:flex; align-items:center; gap:9px; min-height:48px; padding:11px 14px; cursor:pointer; font-size:13px; font-weight:600; }
.chat-settings summary svg { width:18px; height:18px; }
.chat-settings[open] summary { border-bottom:1px solid var(--border); }
.chat-setting-row { padding:14px; }
.chat-setting-row + .chat-setting-row { border-top:1px solid var(--border); }
.chat-setting-row > strong { display:block; margin-bottom:8px; font-size:13px; }
.chat-setting-row .visual-choices { padding-bottom:2px; }
.chat-setting-row .model-picker { max-height:280px; overflow:auto; }
.chat-setting-row .model-picker .choice { white-space:normal; }
.chat-settings .preference-row { width:calc(100% - 28px); margin:0 14px 14px; }
.chat-conversation { display:flex; flex-direction:column; gap:12px; min-height:210px; padding:20px 0 14px; }
.chat-conversation .chat-message { max-width:88%; padding:12px 15px; border:1px solid var(--border); border-radius:17px; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-conversation .from-user { align-self:flex-end; border-bottom-right-radius:5px; background:var(--surface-raised); }
.chat-conversation .from-ai { align-self:flex-start; border-bottom-left-radius:5px; background:var(--surface); }
.chat-conversation .chat-message small { display:block; margin-bottom:5px; }
.chat-conversation .chat-message p { line-height:1.55; }
.chat-copy { margin-top:6px; color:var(--accent-text); }
.chat-welcome { margin:auto; padding:24px; text-align:center; color:var(--text-secondary); }
.chat-welcome svg { color:var(--accent-text); width:28px; height:28px; margin:auto auto 10px; }
.chat-welcome h2 { color:var(--text-primary); }
.chat-welcome p { font-size:13px; margin-top:7px; }
.chat-typing { display:flex; align-items:center; gap:5px; color:var(--text-secondary); font-size:12px; }
.chat-typing span { display:block; width:5px; height:5px; border-radius:50%; background:var(--accent-text); animation:chat-pulse 1s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay:.15s; }
.chat-typing span:nth-child(3) { animation-delay:.3s; margin-right:5px; }
@keyframes chat-pulse { 50% { opacity:.35; } }
.chat-composer { display:flex; align-items:end; gap:8px; position:sticky; bottom:calc(66px + var(--safe-bottom)); z-index:5; padding:8px; border:1px solid var(--border-strong); border-radius:18px; background:var(--background); box-shadow:0 8px 28px #0005; }
.chat-composer textarea { flex:1; min-width:0; max-height:150px; min-height:47px; resize:vertical; padding:12px; border:0; outline:0; background:transparent; color:var(--text-primary); font:inherit; }
.chat-composer .button { flex:0 0 46px; width:46px; min-width:46px; min-height:46px; padding:0; display:grid; place-items:center; border-radius:13px; }
.chat-composer .button svg { width:19px; height:19px; }
.chat-cost { margin:9px 3px; color:var(--text-tertiary); font-size:11px; }
@media (prefers-reduced-motion:reduce) { .chat-typing span { animation:none; } }


/* Job screen and offline Generation Lounge */
.job-hero { position:relative; overflow:hidden; margin:12px 0 14px; padding:25px 20px; min-height:195px; border:1px solid var(--border-strong); border-radius:22px; background:radial-gradient(circle at 78% 8%,#a7f35c24,transparent 50%),linear-gradient(145deg,#1d2424,#16191d); }
.job-hero h1 { max-width:280px; margin:9px 0 12px; font-size:26px; }
.job-hero p { max-width:290px; color:var(--text-secondary); font-size:13px; }
.job-hero progress { width:100%; margin-top:14px; }
.job-prompt { padding:16px 0; font-size:14px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.job-close-hint { margin:0 0 18px; color:var(--text-secondary); font-size:13px; }
#job-completion .button { width:100%; }
#job-failure { padding:14px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); }
#job-failure p { margin-bottom:10px; color:var(--text-secondary); font-size:13px; }
.generation-lounge { margin-top:25px; border-top:1px solid var(--border-strong); padding-top:22px; }
.lounge-heading,.lounge-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.lounge-heading h2,.lounge-top h2 { margin:5px 0; }
.lounge-heading p,.lounge-top p,.snake-help { color:var(--text-secondary); font-size:12px; }
.lounge-heading button,.lounge-top button { min-width:74px; min-height:42px; padding:8px 12px; border-radius:11px; background:var(--surface-raised); font-weight:600; }
#lounge-area { margin-top:16px; padding:16px; border:1px solid var(--border-strong); border-radius:20px; background:var(--surface); }
.lounge-top h2 { font-size:20px; }
.snake-score { display:flex; justify-content:space-between; gap:12px; margin:16px 0 9px; font-size:12px; color:var(--text-secondary); }
.snake-score strong { color:var(--text-primary); font-variant-numeric:tabular-nums; }
.snake-board { position:relative; width:100%; max-width:360px; aspect-ratio:1; margin:auto; overflow:hidden; border:1px solid var(--border-strong); border-radius:16px; background:#12171a; touch-action:none; }
.snake-board canvas { display:block; width:100%; height:100%; }
.snake-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#101416ca; text-align:center; }
.snake-overlay strong { font-size:20px; }
.snake-overlay small { color:var(--text-secondary); }
.snake-overlay button,.lounge-ready button { min-height:44px; padding:9px 18px; border-radius:11px; background:var(--lime); color:var(--on-lime); font-weight:700; }
.snake-help { margin-top:12px; text-align:center; }
.lounge-ready { display:grid; gap:7px; margin-bottom:14px; padding:13px; border:1px solid var(--accent-text); border-radius:14px; background:var(--selected-surface); }
.lounge-ready span { color:var(--text-secondary); font-size:12px; }
.lounge-ready button { justify-self:start; }


.access-gate { display:flex; flex-direction:column; align-items:flex-start; gap:14px; max-width:440px; margin:9vh auto 0; padding:27px 23px; border:1px solid var(--border-strong); border-radius:24px; background:radial-gradient(circle at 82% 10%,#d6ff6220,transparent 45%),var(--surface); }
.access-gate h1 { font-size:29px; }
.access-gate p { color:var(--text-secondary); font-size:14px; }
.access-gate .button { width:100%; }
.referral-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:15px 0; }
.referral-stats > div { display:flex; flex-direction:column; gap:2px; min-height:75px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.referral-stats strong { font-size:22px; font-variant-numeric:tabular-nums; }
.referral-stats small { color:var(--text-secondary); font-size:12px; }


#screen[data-route="create"] .tool-card { position:relative; isolation:isolate; min-height:158px; justify-content:flex-end; overflow:hidden; border-color:var(--border-strong); background:#20262a; }
#screen[data-route="create"] .tool-card-art { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72); }
#screen[data-route="create"] .tool-card:has(.tool-card-art)::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#080b0d15 10%,#080b0dd9 100%); }
#screen[data-route="create"] .tool-card .tool-icon { width:32px; height:32px; background:#1117; backdrop-filter:none; }
#screen[data-route="create"] .tool-card:has(.tool-card-art) .tool-icon svg { color:#f7f8f3; }
#screen[data-route="create"] .tool-card .tool-card-copy h3 { color:#fff; }
#screen[data-route="create"] .tool-card .tool-card-copy p { color:#e6e9e0d9; }
#screen[data-route="create"] .tool-card[data-tool="photo"] { grid-column:span 2; min-height:190px; }
#screen[data-route="create"] .tool-card[data-tool="music"] .tool-card-art { filter:saturate(.6) hue-rotate(100deg); }
#screen[data-route="create"] .tool-card[data-tool="chat"] .tool-card-art { filter:saturate(.5) hue-rotate(220deg); }
#screen[data-route="create"] .tool-card.unavailable { opacity:.66; }
#screen[data-route="create"] .tool-card:not(:has(.tool-card-art)) { background:linear-gradient(140deg,var(--surface),var(--surface-raised)); }
.home-tools .tool-card-art,.autopost-card .tool-card-art { display:none; }
.active-strip { display:flex; align-items:center; gap:11px; min-height:63px; margin:0 0 14px; padding:12px 15px; border:1px solid var(--accent-text); border-radius:14px; background:var(--selected-surface); }
.active-strip > svg:first-child { color:var(--accent-text); }
.active-strip > span { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.active-strip strong { font-size:13px; }
.active-strip small { color:var(--text-secondary); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.active-strip > svg:last-child { width:16px; }
@media (min-width:680px) {
  #screen[data-route="create"] .tool-card[data-tool="photo"] { grid-column:span 2; }
}

.chat-header .button { width:auto; flex:0 0 auto; }
.job-stage-list { display:flex; gap:6px; margin:17px 0 7px; } .job-stage-list span { flex:1; padding:7px 2px; border-top:2px solid var(--border-strong); color:var(--text-tertiary); font-size:10px; text-align:center; } .job-stage-list span.active { border-color:var(--accent-text); color:var(--text-primary); }

.creative-advanced,.music-advanced { margin-top:24px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); }
.creative-advanced summary,.music-advanced summary { min-height:48px; padding:13px 15px; cursor:pointer; font-size:13px; font-weight:600; }
.creative-advanced[open] summary,.music-advanced[open] summary { border-bottom:1px solid var(--border); }
.creative-advanced > .field-label,.creative-advanced > .visual-choices { margin-left:14px; margin-right:14px; }
.creative-advanced > .visual-choices { margin-bottom:13px; }
.music-advanced textarea { display:block; width:calc(100% - 28px); min-height:95px; margin:14px; }
.music-mode .choice { flex:1; justify-content:center; }
.music-intro { margin-top:8px; }


.photo-reference-area { display:flex; align-items:center; gap:12px; min-height:85px; margin:8px 0 22px; padding:12px; border:1px dashed var(--border-strong); border-radius:16px; background:var(--surface); }
.photo-reference-icon,.photo-reference-preview { flex:none; width:60px; height:60px; border-radius:12px; background:var(--surface-raised); }
.photo-reference-icon { display:grid; place-items:center; color:var(--text-secondary); }
.photo-reference-icon svg { width:24px; height:24px; }
.photo-reference-preview { object-fit:cover; }
.photo-reference-copy { display:flex; flex:1; flex-direction:column; min-width:0; }
.photo-reference-copy strong { font-size:13px; }
.photo-reference-copy small { color:var(--text-secondary); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo-reference-add,.photo-reference-remove { flex:none; display:grid; place-items:center; min-height:44px; padding:0 10px; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface-raised); font-size:12px; font-weight:650; cursor:pointer; }
.photo-reference-add input { position:absolute; width:1px; height:1px; opacity:0; }
.photo-reference-remove { width:44px; font-size:22px; }
.photo-reference-add:focus-within { outline:2px solid var(--focus); outline-offset:2px; }

.creative-form { min-width:0; }
.photo-reference-area { min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; }
.photo-reference-add { position:relative; overflow:hidden; }
.photo-reference-add input { inset:0; width:100%; height:100%; cursor:pointer; }

.photo-reference-disclosure { margin:-13px 0 19px; color:var(--text-tertiary); font-size:11px; line-height:1.4; }


.autopost-sections { display: grid; gap: 16px; padding-bottom: 28px; }
.autopost-section { min-width: 0; padding: 18px; }
.autopost-section h2 { margin: 0 0 12px; font-size: 20px; }
.autopost-section form { display: grid; gap: 10px; margin: 14px 0; }
.autopost-section .field-label { margin: 8px 0 0; }
.autopost-section .form-control { width: 100%; min-width: 0; }
.autopost-section textarea.form-control { min-height: 110px; }
.autopost-section .button { width: 100%; margin-top: 8px; }
.autopost-post { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.autopost-post h3 { margin: 8px 0; }
.autopost-post p { margin: 0; line-height: 1.55; }


.studio-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.studio-choice { min-width:0; border:1px solid var(--field-border); border-radius:16px; background:var(--surface); color:var(--text-primary); text-align:left; overflow:hidden; padding:0; }
.studio-choice.selected { border-color:var(--accent-text); box-shadow:0 0 0 1px var(--accent-text); }
.studio-choice img { display:block; width:100%; height:96px; object-fit:cover; }
.studio-choice span { display:grid; gap:3px; padding:10px; }
.studio-choice strong { font-size:14px; line-height:1.3; }
.studio-choice small { color:var(--text-tertiary); font-size:11px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.studio-all-styles { margin-top:12px; }
.studio-all-styles summary { padding:12px 0; cursor:pointer; color:var(--text-primary); }
.studio-all-styles .studio-choice-grid { max-height:52vh; overflow-y:auto; padding:4px; }



.video-reference-list { display:flex; gap:10px; overflow-x:auto; padding:2px 0 8px; }
.video-reference-item { position:relative; flex:0 0 112px; min-width:0; border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; background:var(--surface); }
.video-reference-item img,.video-reference-item video { width:100%; height:84px; object-fit:cover; display:block; }
.video-reference-item span { display:block; padding:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.video-reference-item button { position:absolute; top:4px; right:4px; width:28px; height:28px; border:0; border-radius:50%; background:#111c; color:white; font-size:20px; }


.work-series-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; padding:10px; overflow-y:auto; max-height:min(70vh,700px); }
.work-series-gallery figure { margin:0; min-width:0; background:var(--surface); border-radius:12px; overflow:hidden; }
.work-series-gallery img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.work-series-gallery figcaption { padding:6px 9px; font-size:12px; }
.work-series-actions { display:flex; gap:5px; padding:0 6px 8px; }
.work-series-actions .button { min-width:0; flex:1; padding:7px 4px; font-size:11px; }

/* One rail behavior for style, model, format, history and filter rows. */
.rail-scrollable { max-width:100%; min-width:0; overscroll-behavior-inline:contain; }
.rail-scrollable:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.rail-controls { display:flex; justify-content:flex-end; gap:6px; margin:2px 0 8px; }
.rail-controls[hidden] { display:none; }
.rail-arrow { width:38px; height:38px; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface-raised); color:var(--text-primary); font-size:20px; line-height:1; }
.rail-arrow:disabled { opacity:.32; }
@media (pointer:fine) {
  .rail-scrollable:not(.model-picker) { cursor:grab; }
  .rail-scrollable.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
  .rail-scrollable img { -webkit-user-drag:none; user-select:none; }
}
@media (pointer:coarse) { .rail-controls { display:none; } }

/* Creator modes share one intent-led Photo / Video space. */
.mode-nav { display:flex; align-items:stretch; gap:7px; overflow-x:auto; max-width:100%; margin:12px 0 20px; padding:2px 1px 8px; scrollbar-width:none; scroll-snap-type:x proximity; }
.mode-nav::-webkit-scrollbar { display:none; }
.mode-choice { display:flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); color:var(--text-secondary); font-size:13px; font-weight:600; white-space:nowrap; scroll-snap-align:start; }
.mode-choice.selected { background:var(--selected-surface); border-color:var(--accent-text); color:var(--text-primary); }
.creative-hub-grid .tool-card[data-tool="video"] { min-height:180px; }
.creative-hub-grid .tool-card[data-tool="chat"] { grid-column:span 2; }
.utility-grid .tool-card { min-height:82px !important; background:var(--surface); }
.utility-grid .tool-card .tool-card-copy h3 { color:var(--text-primary) !important; }
.utility-grid .tool-card .tool-card-copy p { color:var(--text-secondary) !important; }
.utility-grid .tool-card .tool-icon { background:var(--surface-raised) !important; }
@media (max-width:359px) { .utility-grid { grid-template-columns:1fr; } }

/* Shared safe-area header and full account pages. */
.app,#screen { min-width:0; }
#screen { max-width:100%; }
.topbar { position:relative; min-width:0; }
.topbar .brand { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.topbar .header-actions { flex:0 0 auto; }
.topbar.detail-header .header-home { font-size:23px; font-weight:500; }
#screen[data-route="tool"] > .back,
#screen[data-route="job"] > .back,
#screen[data-route="transactions"] > .back { display:none; }
.account-page-head { margin:16px 0 22px; }
.account-page-head p { margin-top:7px; color:var(--text-secondary); font-size:13px; }
.settings-page-section { margin:18px 0; padding:18px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.settings-page-section h2 { margin-bottom:14px; }
.settings-page-section .preference-row { width:100%; }
.settings-link { display:flex; align-items:center; justify-content:space-between; min-height:46px; font-weight:600; }
.settings-link svg { width:18px; }
.theme-swatch { display:block; width:28px; height:28px; border-radius:50%; border:1px solid var(--border-strong); }
.swatch-light { background:#f4f5f2; } .swatch-dark { background:#111315; }
.swatch-system { background:linear-gradient(90deg,#f4f5f2 50%,#111315 50%); }
.billing-summary { display:grid; gap:10px; margin-bottom:22px; }
.billing-balance { display:flex; justify-content:space-between; gap:10px; padding:18px; border:1px solid var(--border-strong); border-radius:16px; background:var(--surface); }
.billing-balance strong { color:var(--accent-text); font-variant-numeric:tabular-nums; text-align:right; }
.billing-summary p { color:var(--text-secondary); font-size:13px; padding-inline:3px; }
.billing-period,.transaction-filters { display:flex; gap:7px; overflow-x:auto; max-width:100%; margin:0 0 16px; padding:2px 1px 8px; scrollbar-width:none; }
.billing-period button,.transaction-filters button { flex:0 0 auto; min-height:42px; padding:8px 13px; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface); color:var(--text-secondary); }
.billing-period button.selected,.transaction-filters button.selected { background:var(--selected-surface); border-color:var(--accent-text); color:var(--text-primary); }
.billing-plans { display:grid; gap:10px; }
.billing-plan { display:grid; gap:15px; width:100%; min-width:0; padding:19px; text-align:left; align-content:start; }
.billing-plan.selected { border-color:var(--accent-text); background:var(--selected-surface); }
.billing-plan-top { display:flex; justify-content:space-between; align-items:start; gap:12px; min-width:0; }
.billing-plan-name { display:grid; gap:4px; min-width:0; }
.billing-plan-name strong { font-size:18px; }
.billing-plan small { color:var(--text-secondary); font-size:12px; }
.billing-plan-top b { flex:0 0 auto; font-size:18px; font-variant-numeric:tabular-nums; }
.billing-plan-grant { display:flex; align-items:center; gap:7px; padding:11px 12px; border-radius:11px; background:var(--background); color:var(--accent-text); }
.billing-plan-grant svg { width:18px; height:18px; }
.billing-plan-grant strong { font-size:15px; }
.billing-plan-grant small { margin-left:auto; white-space:nowrap; }
.billing-plan-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.billing-plan-benefits > span { display:flex; justify-content:space-between; align-items:center; gap:7px; min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:10px; }
.billing-plan-benefits strong { flex:0 0 auto; font-size:13px; font-variant-numeric:tabular-nums; }
.billing-plan-benefits small { line-height:1.3; }
.billing-plan-models { display:grid; gap:5px; padding-top:11px; border-top:1px solid var(--border-strong); }
.billing-plan-models > span { font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.billing-checkout { margin:18px 0 24px; padding:16px; border:1px solid var(--border-strong); border-radius:16px; background:var(--surface); }
.billing-checkout p { margin-bottom:8px; color:var(--text-secondary); font-size:12px; }
.billing-checkout .button,.referral-actions .button { width:100%; }
.payment-pending { display:grid; gap:9px; margin:18px 0; padding:16px; border:1px solid var(--border-strong); border-radius:14px; }
.referral-actions { display:grid; gap:9px; margin-top:20px; }
.account-explainer { margin:18px 0; color:var(--text-secondary); font-size:13px; }
.transaction-day { margin:22px 0 9px; color:var(--text-secondary); font-size:13px; }
.transaction-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; margin-bottom:8px; padding:14px; }
.transaction-row span { display:grid; gap:5px; min-width:0; }
.transaction-row strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.transaction-row small { color:var(--text-secondary); font-size:12px; }
.transaction-row b { flex:0 0 auto; font-variant-numeric:tabular-nums; }
.credit { color:var(--accent-text); } .debit { color:var(--text-primary); }
.transaction-detail { padding:22px; }
.transaction-detail > strong { display:block; margin-bottom:22px; font-size:28px; }
.transaction-detail dl { margin:0; }
.transaction-detail dl div { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-top:1px solid var(--border); }
.transaction-detail dt { color:var(--text-secondary); }
.transaction-detail dd { margin:0; text-align:right; overflow-wrap:anywhere; }
@media (min-width:680px) {
  #screen[data-route="works"],#screen[data-route="billing"],#screen[data-route="transactions"],
  #screen[data-route="referral"],#screen[data-route="settings"],#screen[data-route="support"] { max-width:760px; margin-inline:auto; }
  .billing-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.works-starters { display:grid; gap:9px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:16px; }
.works-start-link { display:flex; align-items:center; gap:9px; min-width:0; min-height:58px; padding:12px; border:1px solid var(--border-strong); border-radius:13px; background:var(--surface); color:var(--text-primary); font-weight:600; font-size:13px; }
.works-start-link span { min-width:0; flex:1; }
.works-start-link svg { width:18px; height:18px; flex:0 0 auto; color:var(--accent-text); }
@media(max-width:359px) { .works-starters { grid-template-columns:1fr; } }

/* Keep wide picker content inside its own rail on narrow Telegram viewports. */
html, body { inline-size:100%; max-inline-size:100%; overflow-x:clip; overscroll-behavior-x:none; }
.app { min-inline-size:0; }
#screen, .creative-form, .creative-form > *, .profile-head, .home-heading { min-inline-size:0; max-inline-size:100%; }
.rail-scrollable { inline-size:100%; max-inline-size:100%; }

/* Help is a reading surface with full-width, wrapping cards on mobile. */
.help-page { width:100%; min-width:0; }
.help-intro { margin:20px 0 30px; padding:clamp(20px,4vw,32px); border:1px solid var(--border-strong); border-radius:22px; background:radial-gradient(circle at 90% 5%,var(--selected-surface),transparent 45%),var(--surface); }
.help-intro h2 { max-width:620px; margin:8px 0 10px; font-size:clamp(23px,4vw,32px); line-height:1.2; }
.help-intro > p,.help-section-head p,.help-footer-card p { max-width:640px; color:var(--text-secondary); font-size:14px; line-height:1.55; }
.help-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:24px; }
.help-steps > div { min-width:0; padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--background); }
.help-steps b { display:block; margin-bottom:7px; color:var(--accent-text); font-size:12px; }
.help-steps span { display:block; font-size:13px; line-height:1.4; }
.help-section-head { margin-bottom:15px; }
.help-section-head h2 { margin-bottom:5px; font-size:21px; }
.help-tool-grid,.help-footer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.help-tool-card { display:grid; grid-template-columns:42px minmax(0,1fr) 20px; align-items:start; gap:13px; min-width:0; min-height:116px; padding:17px; border:1px solid var(--border-strong); border-radius:17px; background:var(--surface); }
.help-tool-card:hover,.help-tool-card:focus-visible { border-color:var(--accent-text); }
.help-tool-icon,.help-footer-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--selected-surface); color:var(--accent-text); }
.help-tool-icon svg,.help-footer-icon svg { width:22px; height:22px; }
.help-tool-copy { min-width:0; }
.help-tool-copy strong,.help-tool-copy small { display:block; overflow-wrap:anywhere; }
.help-tool-copy strong { margin:2px 0 7px; font-size:15px; }
.help-tool-copy small { color:var(--text-secondary); font-size:13px; line-height:1.45; white-space:normal; }
.help-tool-arrow { width:18px; height:18px; margin-top:12px; color:var(--text-secondary); }
.help-footer-grid { margin:24px 0 12px; }
.help-footer-card { min-width:0; padding:22px; border:1px solid var(--border-strong); border-radius:18px; background:var(--surface); }
.help-footer-card h2 { margin:15px 0 8px; font-size:18px; }
.help-footer-card p { min-height:45px; }
.help-footer-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-top:15px; color:var(--accent-text); font-size:14px; font-weight:600; }
.help-footer-link svg { width:17px; height:17px; }
@media (max-width:680px) { .help-tool-grid,.help-footer-grid { grid-template-columns:1fr; } .help-tool-card { min-height:92px; } .help-footer-card p { min-height:0; } }
@media (max-width:420px) { .help-steps { grid-template-columns:1fr; gap:7px; } .help-steps > div { display:flex; align-items:baseline; gap:12px; padding:11px 13px; } .help-steps b { margin:0; } .help-intro { padding:20px; } .help-tool-card { padding:14px; gap:10px; } }
/* The system choice reads as a device setting, not a half-painted circle. */
.theme-swatch.swatch-system { position:relative; border:0; border-radius:0; background:none; }
.theme-swatch.swatch-system::before { content:""; position:absolute; left:3px; top:4px; width:22px; height:17px; border:2px solid var(--text-primary); border-radius:5px; background:var(--surface-raised); }
.theme-swatch.swatch-system::after { content:""; position:absolute; left:10px; bottom:2px; width:9px; height:2px; border-radius:2px; background:var(--text-primary); }

.help-tool-empty { grid-column:1 / -1; padding:18px; border:1px dashed var(--border-strong); border-radius:14px; color:var(--text-secondary); font-size:14px; }

@media (max-width:350px) { .billing-plan-benefits { grid-template-columns:1fr; } .billing-plan-grant { flex-wrap:wrap; } .billing-plan-grant small { margin-left:25px; } }