/* Desktop catalog search: isolated production correction. */
@media (min-width:1181px) {
  html .compact-catalog .catalog-toolbar { grid-template-columns:minmax(0,1fr) minmax(340px,425px); }
  html .compact-catalog .catalog-actions { width:100%; min-width:0; }
  html .compact-catalog .catalog-actions .search-field { max-width:none; }
}

/* Approved mobile catalog order; desktop stays unchanged. */
@media (max-width:760px) {
  html .compact-catalog .catalog-actions { grid-template-columns:minmax(0,1fr) auto; }
  html .compact-catalog .catalog-actions .search-field { grid-column:1; grid-row:1; }
  html .compact-catalog .catalog-actions .favorites-filter { grid-column:2; grid-row:1; }
}

/* Graphite + ice, matched to the owner's reference. Color-only theme layer. */
:root:root {
  --bg: #191d25;
  --panel: #252d3a;
  --panel-hover: #303b4d;
  --border: transparent;
  --muted: #acb6c8;
  --accent: #b9cefd;
  --accent-dim: #3d4657;
  /* Existing components consume these legacy accent names. */
  --mint: var(--accent);
  --mint-dim: var(--accent-dim);
  --white: #f1f3f8;
  --field: #292f3b;
  --ink: #192338;
  background: var(--bg);
  color: var(--white);
}

:root:root body { background: radial-gradient(ellipse at 85% 5%, #95b7ff09, transparent 55%), var(--bg); background-attachment: fixed; }
:root:root ::selection { background: var(--accent); color: var(--ink); }
:root:root .sidebar { background: linear-gradient(100deg, #232a35, #1e242e); border-right: 1px solid #b9cefd0b; box-shadow: inset -12px 0 28px #11172208; }
:root:root .workspace { background: linear-gradient(90deg, #1e242e90, transparent 190px); }
:root:root .side-nav a { color: #bdc6d6; }
:root:root .side-nav a.active { background: #3a4355; color: #dce6ff; }
:root:root .side-nav a:hover { background: #343d4d; }
:root:root .brand-mark, :root:root .skip-link { background: var(--accent); color: var(--ink); }
:root:root .avatar, :root:root .count-pill, :root:root .tiny-orb { background: var(--accent-dim); color: #dce6ff; }
:root:root .sidebar-wallet, :root:root .account-card, :root:root .topup-panel { background: linear-gradient(130deg, #353d4b, #292f3b); }
:root:root .sidebar-wallet a { border-color: var(--border); }
:root:root .balance-button { background: var(--field); border-color: var(--border); }
:root:root .desktop-breadcrumb b, :root:root .demo-badge { color: #d5dce8; }
:root:root .desktop-breadcrumb > span, :root:root .footer i { color: #7d8aa2; }
:root:root .eyebrow, :root:root .catalog-intro .eyebrow, :root:root .intro-facts, :root:root .catalog-ranking, :root:root .footer { color: var(--muted); }

:root:root .panel, :root:root .community-card, :root:root .history-card, :root:root .profile-menu a, :root:root .ledger-row, :root:root .model-card {
  background: linear-gradient(135deg, #ffffff05, transparent 68%), var(--panel);
}
:root:root .history-card:hover, :root:root .model-card:hover { background: var(--panel-hover); }
:root:root .compact-catalog .model-card,
:root:root .compact-catalog .model-card:nth-child(3n+2),
:root:root .compact-catalog .model-card:nth-child(3n) {
  --surface-accent: #b9b9ef;
  background: #343c46;
  border-radius: 13px;
  box-shadow: none;
}
:root:root .compact-catalog .model-card:hover { background: linear-gradient(115deg, #343e48, #45424b); filter: none; border-color: transparent; box-shadow: none; }
:root:root .compact-catalog .card-play { display: none; }
:root:root .compact-catalog .model-body { border-top: 0; }
:root:root .compact-catalog .model-specs > span { border: 1px solid transparent; }
:root:root .compact-catalog .model-body > p { color: #d0d5dd; }
:root:root .compact-catalog .model-specs > span { background: #ffffff05; color: #b9c1ce; }
:root:root .compact-catalog .model-card-bottom strong { color: var(--white); }
@media(min-width:761px) {
  :root:root .compact-catalog .model-grid { gap: 18px; }
  :root:root .compact-catalog .model-art-title { left: 16px; right: 16px; bottom: 16px; }
  :root:root .compact-catalog .model-art-title strong { font-size: clamp(1.2rem,1.55vw,1.5rem); }
  :root:root .compact-catalog .model-body { padding: 15px 16px 16px; }
  :root:root .compact-catalog .model-specs { margin: 11px 0 14px; }
}
:root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category { background: #202733bd; color: #f1f3f8; border-color: transparent; }
:root:root .favorite-model.selected { background: #475978; color: #e0eaff; }
:root:root .compact-catalog .favorites-filter.selected { background: #3d4e6a; color: #e0eaff; }
:root:root .model-art { background: #303846; }
:root:root .model-art-title span { color: #d8dfea; }
:root:root .model-specs span, :root:root .model-family, :root:root .step { background: #303947; border-color: var(--border); color: #b8c3d5; }
:root:root .card-play { background: #29374a66; border-color: #b9cefd70; }

:root:root .button.primary { background: linear-gradient(125deg, #d8e4ff, #b9cefd); color: var(--ink); border-color: var(--accent); box-shadow: 0 3px 16px #b9cefd0a; }
:root:root .button.primary:hover:not(:disabled) { background: linear-gradient(125deg, #e8efff, #ccdcff); }
:root:root .button.secondary, :root:root .search-field, :root:root .feed-select-trigger, :root:root .payment-methods button { background: linear-gradient(120deg, #ffffff04, transparent), var(--field); color: #dce3f0; border-color: var(--border); }
:root:root .button.secondary:hover, :root:root .icon-button:hover, :root:root .account-menu .settings-link:hover { background: var(--panel-hover); color: var(--white); }
:root:root .tabs, :root:root .visual-switch, :root:root .language-switch { background: #222731; }
:root:root .tabs button, :root:root .visual-switch button { color: var(--muted); }
:root:root .tabs button.selected, :root:root .visual-switch button.selected, :root:root .language-switch button.selected { background: #3d5065; color: #f1f5ff; }
:root:root .search-field { color: var(--muted); }
:root:root .search-field input::placeholder, :root:root textarea::placeholder { color: #a2adc0; }
:root:root .choice button { background: #222833; border-color: var(--border); color: #bdc6d6; }
:root:root .choice button.selected, :root:root .payment-methods > button.selected, :root:root .community-actions .button[aria-pressed=true] { background: #3d506b; border-color: transparent; color: #e4ecff; }
:root:root .choice button:hover { background: #303b4d; border-color: transparent; }
:root:root .choice legend, :root:root .draft-state, :root:root .prompt-bottom { color: var(--muted); }
:root:root textarea, :root:root .custom-topup input, :root:root .promo-form input, :root:root .feed-filters input, :root:root .feed-filters select, :root:root .publication-form input:not([type=checkbox]), :root:root .publication-form textarea, :root:root .trend-search input, :root:root .trend-search select { background: #222833; color: var(--white); border-color: var(--border); }
:root:root .prompt-examples button { background: #344055; color: #d0ddf5; }
:root:root .upload-slot { background: #222833; border-color: var(--border); color: var(--muted); }
:root:root .upload-slot:hover { background: #303b4d; border-color: transparent; }
:root:root .payment-consent input, :root:root .image-compare input, :root:root .job-progress progress { accent-color: var(--accent); }
:root:root .feed-select-menu { background: #2b3340; border-color: var(--border); }
:root:root .feed-select-menu [role=option]:hover, :root:root .feed-select-menu .active { background: #3d4c63; }

:root:root .wallet-balance { background: radial-gradient(ellipse at 95% 0%, #f4f7ff80, transparent 60%), linear-gradient(135deg, #d8e3fa, #a8bde4); color: var(--ink); }
:root:root .wallet-balance strong, :root:root .wallet-balance span, :root:root .wallet-balance svg { color: var(--ink); }
:root:root .wallet-balance .wallet-card-top span, :root:root .wallet-balance .wallet-card-bottom span { color: #334665; }
:root:root .package-options > button { background: linear-gradient(135deg, #ffffff09, transparent), #343d4c; }
:root:root .package-options > button.selected { background: linear-gradient(125deg, #d8e4ff, #b3c8ed); color: var(--ink); }
:root:root .package-options > button.selected :is(strong, small, .package-benefit) { color: var(--ink); }
:root:root .package-options .package-benefit { color: #ccdcff; }
:root:root .package-options .package-check { background: #344d76; color: #edf3ff; }
:root:root .package-options > button.more-packages { background: linear-gradient(135deg, #dce7ff12, #dce7ff05); }
:root:root .account-menu .settings-link { background: var(--field); }
:root:root .setting-row > b, :root:root .legal-copy p, :root:root .checkout-amount > span { color: #bcc6d8; }
:root:root .settings-link svg { color: var(--muted); }
:root:root .checkout-page { background: radial-gradient(ellipse at 50% 20%, #303e55, var(--bg) 70%); }
:root:root .checkout-dialog, :root:root .login-dialog { background: #252c38; border-color: var(--border); }
:root:root .checkout-emblem { background: #38465d; }
:root:root .checkout-emblem.success { background: var(--accent); color: var(--ink); }
:root:root .login-dialog::backdrop { background: #0d111bd9; }
:root:root .login-consent { border-color: transparent; }
:root:root .login-consent:has(input:checked) { border-color: transparent; background: #b9cefd08; }

:root:root .demo-note { background: #263142; border-color: #42536d; color: #c2cde0; }
:root:root .thinking-capsule { background: linear-gradient(120deg, #e2eaff0a, transparent), #29313f; color: #c9d3e5; }
:root:root .thinking-capsule.compact { background: transparent; }
:root:root .community-media, :root:root .cover-placeholder { background: radial-gradient(ellipse at 40% 20%, #3d495d, #1e2634 75%); color: var(--muted); }
:root:root .preview-placeholder { color: var(--muted); }
:root:root .video-original { background: #242d3ce8; }
:root:root .trend-cover, :root:root .compare-stage, :root:root .public-post { background: #1e2634; }
:root:root .trend-copy > .button { background: #354158; color: #dce6fa; }
:root:root .trend-copy > .button:hover { background: #455675; }
:root:root .trend-instructions summary { color: var(--accent); }
:root:root .compare-line { background: #edf3ff; }
:root:root .image-compare small, :root:root .job-progress small { color: var(--muted); }
:root:root .job-progress li.current { color: #d6e3ff; }
:root:root .activity-bar { background: linear-gradient(110deg, #354359, #303644); box-shadow: 0 8px 28px #0005, inset 0 1px 0 #edf2ff2b; }
:root:root .activity-main { color: #edf2ff; }
:root:root .activity-copy small, :root:root .activity-task small { color: #bdc9de; }
:root:root .activity-check, :root:root .activity-retry { color: #d0dfff; }
:root:root .activity-check svg { background: #b9cefd18; }
:root:root .activity-tasks { background: #2c3647f5; }
:root:root .activity-task { border-color: #dce7ff12; }
:root:root .activity-task a:hover { color: var(--accent); }
:root:root .bottom-nav { background: linear-gradient(100deg, #2c3443f5, #252c39f5); box-shadow: 0 -1px 0 #dce7ff0a; }
:root:root .bottom-nav a { color: var(--muted); }
:root:root .bottom-nav a.active { color: var(--accent); }
:root:root .field-hint, :root:root .upload-target, :root:root .upload-target small, :root:root .preview-label, :root:root .preview-meta, :root:root .price-row > span, :root:root .checkout-panel > p, :root:root .checkout-note, :root:root .job-row-text > span, :root:root .history-copy span, :root:root .result-prompt, :root:root .render-state > p, :root:root .package-options small, :root:root .payment-methods small, :root:root .payment-methods > button > svg, :root:root .method-label, :root:root .topup-total, :root:root .ledger-row small, :root:root .trend-meta, :root:root .trend-model, :root:root .scene-card small { color: var(--muted); }
:root:root .preview-panel { background: #222833; }
:root:root .topup-total > strong { color: var(--white); }
:root:root .wallet-currency { border-color: transparent; }
:root:root .wallet-balance .wallet-card-bottom { color: #334665; }
:root:root .radio { background: #1d283c; border-color: #7384a3; }
:root:root .selected .radio { border-color: var(--accent); background: var(--accent); }
:root:root .selected .radio::after { background: #263b60; }
:root:root .price-row > strong { color: #e4ecff; }
:root:root .aspect-frame > div { background: #0b14234d; }
:root:root .admin-page .admin-stats > div { background: linear-gradient(140deg, #293447, #202936); border-color: var(--border); }
:root:root .admin-page select, :root:root .admin-page input { background: #222b3a; color: var(--white); border-color: var(--border); }
:root:root .admin-page .admin-form label, :root:root .admin-page .admin-stats span { color: var(--muted); }
:root:root .admin-page .admin-table th { background: #263144; color: var(--muted); }
:root:root .admin-page .admin-table button { background: #344159; border-color: var(--border); color: #dce7ff; }
:root:root .admin-page .admin-bars meter { accent-color: var(--accent); }

/* The feed component's real trigger is a direct child, without a trigger class. */
:root:root .feed-select > button { background: #293241; color: var(--white); box-shadow: none; }
:root:root .feed-select > button:hover, :root:root .feed-select > button[aria-expanded=true] { background: #344158; }
:root:root .feed-select-menu { background: #252e3d; }
:root:root .feed-select-menu [role=option][aria-selected=true] { color: var(--accent); }
:root:root .balance-row, :root:root .upload-guidance, :root:root .upload-details, :root:root .trend-copy p, :root:root .trend-copy small { color: var(--muted); }
:root:root .account-card p, :root:root .account-card > div > span { color: var(--muted); }
:root:root .aspect-stage { background: radial-gradient(ellipse, #46577938, #1a2230 75%); }
:root:root .aspect-frame { border-color: #7186aa; }
:root:root .prompt-enhancer { background: var(--field); color: var(--white); }
:root:root .prompt-enhancer input { accent-color: var(--accent); }

/* Complete the graphite theme in secondary screens and interaction states. */
:root:root input:focus-visible, :root:root textarea:focus-visible { outline-color: var(--accent); }
/* Text inputs use a quiet filled focus state; text caret and keyboard focus stay visible. */
:root:root :is(textarea, input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=hidden])), [contenteditable=true]):focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
  background-color: #303848;
  caret-color: var(--accent);
}
:root:root .search-field input:focus { background-color: transparent; }
@media(forced-colors:active) {
  :root:root :is(textarea, input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=hidden])), [contenteditable=true]):focus { outline: 1px solid Highlight; }
}
:root:root .topbar { background: linear-gradient(100deg, #d7e4ff05, transparent 65%); }
:root:root .model-tag { background: #202733bd; border-color: transparent; }
:root:root .scene-card, :root:root .model-card:hover, :root:root .history-card:hover { border-color: transparent; }
:root:root .scene-grid::-webkit-scrollbar-thumb { background: #52617b; }
:root:root .remove-upload { background: #101723da; }
:root:root .job-row { background: #222833; }
:root:root .job-row:hover { background: #303b4d; }
:root:root .job-row-text i, :root:root .job-id { color: #8491a8; }
:root:root .row-arrow { color: var(--muted); }
:root:root .status-pill:not(.status-completed):not(.status-failed):not(.status-canceled):not(.status-processing):not(.status-queued):not(.status-review) { background: #303947; color: #c5d1e5; }
:root:root .history-play > svg { border-color: #e9f0ff80; background: #0c142440; }
:root:root .result-player, :root:root .admin-result-preview { background: #10151e; }
:root:root .progress-track { background: #293447; }
:root:root .render-orbit { border-color: #526889; box-shadow: 0 0 0 15px #2230403b, 0 0 0 30px #202e4222; animation-name: graphite-pulse; }
@keyframes graphite-pulse { 50% { box-shadow: 0 0 0 22px #22304030, 0 0 0 44px #202e4215; } }
:root:root .wallet-explainer > svg { color: var(--accent); }
:root:root .ledger-symbol:not(.positive) { color: #bac4d4; }
:root:root .checkout-emblem.success { color: var(--ink); }
:root:root .toast:not(.toast-error) { background: #293447; border-color: transparent; color: var(--white); }
:root:root .trend-cover::after { background: linear-gradient(180deg, #07101e35, transparent 45%); }
:root:root .thinking-capsule { box-shadow: inset 0 1px 0 #eef2ff08; }
:root:root .admin-page .admin-table, :root:root .admin-page .admin-table td, :root:root .admin-page .admin-table th { border-color: #b9cefd12; }

:root:root .model-settings-panel { border: 0; }
:root:root .settings-count { min-width: 27px; padding: 4px 8px; border-radius: 8px; background: #b9cefd10; color: var(--accent); font-size: 12px; text-align: center; }
:root:root .model-setting + .model-setting { margin-top: 23px; }
:root:root .model-setting > label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
:root:root .model-setting .choice { margin: 0; }
:root:root .model-setting .choice legend { color: var(--white); font-weight: 600; }
:root:root .model-setting > input[type=number] { background: #1d2532; border: 1px solid transparent; border-radius: 10px; color: var(--white); padding: 12px 14px; width: 100%; max-width: 280px; min-height: 46px; }
:root:root .model-setting textarea { height: 100px; min-height: 90px; font-size: 14px; }
:root:root .setting-hint, :root:root .toggle-setting small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.65; max-width: 640px; }
:root:root .toggle-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; }
:root:root .toggle-setting strong { font-size: 14px; font-weight: 600; }
:root:root .toggle-setting input { appearance: none; flex-shrink: 0; width: 40px; height: 24px; border: 1px solid #aabbd33b; border-radius: 30px; background: #19212f; position: relative; cursor: pointer; transition: background .18s; }
:root:root .toggle-setting input::before { content: ''; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%; background: #91a1bc; transition: transform .18s; }
:root:root .toggle-setting input:checked { background: #b9cefd; border-color: #b9cefd; }
:root:root .toggle-setting input:checked::before { transform: translateX(16px); background: #24334f; }
:root:root .toggle-setting input:disabled { cursor: not-allowed; opacity: .55; }
:root:root .setting-unavailable { cursor: default; }
:root:root .advanced-settings { margin-top: 22px; border-top: 1px solid #b9cefd15; padding-top: 19px; }
:root:root .panel-heading + .advanced-settings { margin-top: 0; border-top: 0; padding-top: 0; }
:root:root .advanced-settings summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
:root:root .advanced-settings summary::-webkit-details-marker { display: none; }
:root:root .advanced-settings summary small { display: block; font-size: 12px; line-height: 1.65; color: var(--muted); font-weight: 400; margin-top: 5px; }
:root:root .advanced-settings[open] summary > svg { transform: rotate(180deg); }
:root:root .advanced-settings > div { margin-top: 24px; }
:root:root .settings-reset { border: 0; background: transparent; color: var(--accent); font-size: 12px; padding: 8px 0 0; margin-top: 18px; text-align: left; }
:root:root .ratio-choice > div { gap: 8px; }
:root:root .ratio-choice button { flex-direction: column; gap: 10px; min-width: 72px; min-height: 80px; padding: 13px 12px; }
:root:root .ratio-choice button.selected { background: linear-gradient(135deg, #b9cefd22, #9aacf31a); box-shadow: none; }
:root:root .ratio-outline { display: block; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; }
:root:root .compact-catalog .catalog-actions { width: 100%; }
:root:root .compact-catalog .catalog-actions .search-field { max-width: none; }
@media(min-width:1181px) { :root:root .compact-catalog .catalog-toolbar { grid-template-columns: minmax(0,1fr) minmax(340px,425px); } }
@media(max-width:760px) {
  :root:root .workspace { background: transparent; }
  :root:root .compact-catalog .catalog-actions { flex: 1 1 100%; width: 100%; grid-template-columns: minmax(0,1fr) auto; }
  :root:root .compact-catalog .catalog-actions .search-field { grid-column: 1; grid-row: 1; }
  :root:root .compact-catalog .catalog-actions .favorites-filter { grid-column: 2; grid-row: 1; }
  :root:root .ratio-choice button { min-width: 64px; padding: 12px 9px; min-height: 77px; }
  :root:root .model-settings-panel { padding: 20px 16px; }
}
@media(prefers-reduced-motion:reduce) { :root:root .toggle-setting input, :root:root .toggle-setting input::before { transition: none; } }

/* Translucency belongs to navigation and small controls; card bodies stay graphite. */
:root:root .side-nav a.active { background: #b9cefd20; }
:root:root .side-nav a:hover { background: #b9cefd16; }
:root:root .side-nav a.active:hover { background: #b9cefd29; }
:root:root .compact-catalog .search-field,
:root:root .compact-catalog .favorites-filter,
:root:root .language-switch { background: #b9cefd0d; }
:root:root .compact-catalog .search-field:focus-within { background: #b9cefd16; }
:root:root .compact-catalog .favorites-filter:hover { background: #b9cefd17; }
:root:root .compact-catalog .favorites-filter.selected { background: #b9cefd29; color: #e0eaff; }
:root:root .language-switch button.selected { background: #b9cefd24; }
:root:root .bottom-nav { box-shadow: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root .sidebar {
    background: linear-gradient(110deg, #2c354299, #20273373);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }
  :root:root .bottom-nav {
    background: #202936b8;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  :root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category {
    background: #111923a3;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  :root:root .favorite-model.icon-button.selected { background: #344e70c7; color: #e0eaff; }
}
@media(prefers-reduced-transparency:reduce) {
  :root:root .sidebar { background: #232a35; }
  :root:root .bottom-nav { background: #252e3c; }
  :root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category { background: #202733; }
  :root:root .favorite-model.icon-button.selected { background: #344e70; }
  :root:root .sidebar, :root:root .bottom-nav, :root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root:root .compact-catalog .search-field, :root:root .compact-catalog .favorites-filter, :root:root .language-switch { background: #292f3b; }
  :root:root .compact-catalog .favorites-filter.selected { background: #3d4e6a; }
}

/* Web interpretation of Apple HIG Materials: glass for navigation, graphite for content.
   Solid defaults also cover browsers without backdrop-filter. No decorative outlines. */
:root:root { --glass-solid: #29313e; --glass-ink: #f1f4fa; --glass-muted: #e6edf8; }
:root:root .sidebar, :root:root .bottom-nav, :root:root .compact-catalog .catalog-toolbar {
  background: var(--glass-solid);
  border: 0;
  box-shadow: 0 5px 14px #070c172b, 0 16px 32px #070c171c;
}
:root:root .sidebar { top: 12px; bottom: 12px; left: 12px; width: 226px; border-radius: 24px; padding: 25px 16px 16px; box-shadow: none; }
:root:root .workspace { background: transparent; }
:root:root .brand { gap: 9px; }
/* Use the supplied alpha image directly, with its original proportions. */
:root:root .brand-symbol { display: block; flex: 0 0 24px; width: 24px; aspect-ratio: 566 / 610; }
:root:root .brand-symbol img { display: block; width: 100%; height: auto; object-fit: contain; }
:root:root .compact-catalog .model-card,
:root:root .compact-catalog .model-card:nth-child(3n+2),
:root:root .compact-catalog .model-card:nth-child(3n) { box-shadow: 0 6px 12px -7px #070c1738, 0 14px 24px -15px #070c1738; }
:root:root .compact-catalog .model-card:hover { box-shadow: 0 8px 14px -7px #070c1745, 0 18px 28px -15px #070c173d; }
:root:root .side-nav a { color: var(--glass-muted); border-radius: 13px; min-height: 44px; }
:root:root .side-nav a.active { background: #dbe8ff21; color: var(--glass-ink); }
:root:root .side-nav a:hover { background: #dbe8ff17; }
:root:root .side-nav a.active:hover { background: #dbe8ff2b; }
:root:root .compact-catalog .catalog-toolbar {
  position: sticky;
  top: calc(12px + var(--tg-content-safe-area-inset-top, 0px));
  z-index: 21;
  padding: 8px;
  border-radius: 24px;
  scroll-margin-top: 16px;
}
:root:root .compact-catalog .catalog-toolbar .tabs { padding: 0; gap: 4px; }
:root:root .compact-catalog .catalog-toolbar .tabs button { min-height: 44px; padding: 10px 16px; border-radius: 16px; color: var(--glass-muted); }
:root:root .compact-catalog .catalog-toolbar .tabs button.selected { background: #dbe8ff24; color: var(--glass-ink); }
:root:root .compact-catalog .catalog-actions { gap: 8px; }
:root:root .compact-catalog .catalog-actions .search-field,
:root:root .compact-catalog .favorites-filter { border: 0; border-radius: 16px; color: var(--glass-muted); }
:root:root .compact-catalog .catalog-actions .search-field { background: #e4edff18; }
:root:root .compact-catalog .favorites-filter { background: #dbe8ff0d; }
:root:root .compact-catalog .search-field input::placeholder { color: var(--glass-muted); }
:root:root .compact-catalog .catalog-actions .search-field:focus-within { background: #e4edff24; }
:root:root .compact-catalog .search-field input:focus-visible { outline: none; }
:root:root .compact-catalog .search-field:has(input:focus-visible) { outline: none; }
:root:root .compact-catalog .favorites-filter:hover { background: #dbe8ff20; }
:root:root .compact-catalog .favorites-filter.selected { background: #dbe8ff2c; color: var(--glass-ink); }
:root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category { background: #202733; }
:root:root .favorite-model.icon-button.selected { background: #344e70; }
:root:root .bottom-nav > a { color: var(--glass-muted); border-radius: 20px; }
:root:root .bottom-nav > a.active { background: #dbe8ff29; color: var(--glass-ink); }
:root:root .bottom-nav > a.active > svg { filter: none; }
:root:root .side-nav a, :root:root .bottom-nav > a, :root:root .compact-catalog .catalog-toolbar button { transition: background-color .18s ease, color .18s ease; }
/* A short press and icon settle keep navigation tactile without moving the layout. */
@media(prefers-reduced-motion:no-preference) {
  :root:root .side-nav a, :root:root .bottom-nav > a {
    transition: transform .42s cubic-bezier(.22,1,.36,1), background-color .28s ease, color .28s ease;
    -webkit-tap-highlight-color: transparent;
  }
  :root:root .side-nav a:active, :root:root .bottom-nav > a:active {
    transform: scale(.975);
    transition-duration: .16s;
  }
  :root:root .side-nav a.active > svg, :root:root .bottom-nav > a.active > svg {
    transform-origin: center;
    animation: nav-icon-settle .52s cubic-bezier(.22,1,.36,1);
  }
}
@keyframes nav-icon-settle {
  0% { transform: translateY(0) scale(.97); }
  45% { transform: translateY(-1px) scale(1.035); }
  100% { transform: translateY(0) scale(1); }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root .sidebar, :root:root .bottom-nav, :root:root .compact-catalog .catalog-toolbar {
    background: linear-gradient(130deg, #e8f0ff0c, #e8f0ff02 55%), #18212e40;
    -webkit-backdrop-filter: blur(16px) saturate(125%) contrast(.65) brightness(.65);
    backdrop-filter: blur(16px) saturate(125%) contrast(.65) brightness(.65);
  }
  :root:root .sidebar {
    background: linear-gradient(130deg, #d7e7ff12, #d7e7ff02 60%), #20293638;
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
  }
  :root:root .bottom-nav {
    background: linear-gradient(125deg, #ecf3ff10, #ecf3ff03 60%), #1721303d;
    -webkit-backdrop-filter: blur(12px) saturate(130%) contrast(.7) brightness(.6);
    backdrop-filter: blur(12px) saturate(130%) contrast(.7) brightness(.6);
  }
  /* Small media overlays are clearer; dimming protects white labels on bright covers. */
  :root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category {
    background: #11192352;
    -webkit-backdrop-filter: blur(5px) saturate(115%) brightness(.56);
    backdrop-filter: blur(5px) saturate(115%) brightness(.56);
  }
  :root:root .favorite-model.icon-button.selected { background: #48618ca8; }
}
@media(max-width:1200px) and (min-width:761px) { :root:root .sidebar { width: 196px; padding-left: 12px; padding-right: 12px; } }
@media(max-width:1000px) and (min-width:761px) { :root:root .sidebar { width: 173px; padding-left: 10px; padding-right: 10px; } :root:root .side-nav a { padding-left: 10px; padding-right: 10px; gap: 8px; } }
@media(max-width:760px) {
  :root:root { --glass-nav-offset: max(10px, var(--app-bottom-inset)); }
  :root:root .mobile-brand .brand { gap: 7px; }
  :root:root .mobile-brand .brand-symbol { flex-basis: 20px; width: 20px; }
  :root:root .compact-catalog .catalog-toolbar { top: calc(8px + var(--tg-content-safe-area-inset-top, 0px)); gap: 7px; padding: 7px; border-radius: 23px; }
  :root:root .compact-catalog .catalog-toolbar .tabs button { padding: 8px 6px; border-radius: 16px; }
  :root:root .compact-catalog .catalog-actions { gap: 6px; }
  :root:root .compact-catalog .favorites-filter { padding-left: 8px; padding-right: 8px; }
  :root:root .bottom-nav {
    left: max(10px, var(--tg-safe-area-inset-left, 0px));
    right: max(10px, var(--tg-safe-area-inset-right, 0px));
    bottom: calc(var(--glass-nav-offset) + var(--keyboard-inset, 0px));
    max-width: 540px;
    margin-inline: auto;
    padding: 6px;
    gap: 2px;
    border-radius: 28px;
    box-shadow: 0 6px 18px #080d1840, 0 16px 32px #080d1829;
  }
  :root:root .bottom-nav > a { min-height: 48px; padding: 6px 0; font-size: 10px; gap: 4px; }
  :root:root .bottom-nav > a > span { white-space: nowrap; }
  :root:root .activity-position { bottom: calc(var(--navigation-height, 60px) + var(--glass-nav-offset) + 12px); }
  :root:root .workspace { padding-bottom: calc(var(--navigation-height, 60px) + var(--glass-nav-offset) + var(--activity-height, 0px) + 28px); }
  :root:root .toast { bottom: calc(var(--navigation-height, 60px) + var(--glass-nav-offset) + var(--activity-height, 0px) + 20px); }
  :root:root.keyboard-editing .compact-catalog .catalog-toolbar { position: relative; top: auto; }
  :root:root.keyboard-editing .bottom-nav { display: grid; }
  :root:root.keyboard-editing .workspace { padding-bottom: calc(var(--navigation-height, 60px) + var(--glass-nav-offset) + 28px); }
  :root:root.keyboard-editing .toast { bottom: calc(var(--keyboard-inset, 0px) + var(--navigation-height, 60px) + var(--glass-nav-offset) + 12px); }
  :root:root { scroll-padding-bottom: calc(var(--keyboard-inset, 0px) + var(--navigation-height, 60px) + 24px); }
}
/* Keep native input focus from magnifying the page; pinch zoom remains available. */
@media(max-width:760px), (pointer:coarse) {
  :root:root :is(textarea, select, input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=hidden])), [contenteditable=true]) {
    font-size: max(16px, 1rem) !important;
  }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  :root:root .sidebar, :root:root .bottom-nav, :root:root .compact-catalog .catalog-toolbar { background: var(--glass-solid); }
  :root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category { background: #202733; }
  :root:root .favorite-model.icon-button.selected { background: #344e70; }
  :root:root .sidebar, :root:root .bottom-nav, :root:root .compact-catalog .catalog-toolbar, :root:root .compact-catalog .model-tag, :root:root .favorite-model.icon-button, :root:root .trend-category {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root:root .side-nav a, :root:root .bottom-nav > a, :root:root .compact-catalog .catalog-toolbar .tabs button { color: var(--glass-ink); }
  :root:root .side-nav a.active, :root:root .bottom-nav > a.active, :root:root .compact-catalog .catalog-toolbar .tabs button.selected, :root:root .compact-catalog .favorites-filter.selected { background: #465670; }
}
@media(prefers-reduced-motion:reduce) {
  :root:root .side-nav a, :root:root .bottom-nav > a, :root:root .compact-catalog .catalog-toolbar button { transition: none; }
}
@media(forced-colors:active) {
  :root:root .sidebar, :root:root .bottom-nav, :root:root .compact-catalog .catalog-toolbar { background: Canvas; box-shadow: none; backdrop-filter: none; }
  :root:root .side-nav a.active, :root:root .bottom-nav > a.active, :root:root .compact-catalog .catalog-toolbar .tabs button.selected, :root:root .compact-catalog .favorites-filter.selected { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* Match the new Brand markup without changing the live application bundle. */
:root:root .brand:not(:has(.brand-symbol))::before { content:''; display:block; flex:0 0 24px; width:24px; aspect-ratio:566 / 610; background:url('/brand/frameflow-mark-transparent.png') center / contain no-repeat; }
@media(max-width:760px) { :root:root .mobile-brand .brand:not(:has(.brand-symbol))::before { flex-basis:20px; width:20px; } }
:root:root .login-consent:focus-within { outline:none; }
:root:root .login-consent:has(input:focus-visible) { outline:2px solid var(--mint); outline-offset:2px; }
:root:root .login-consent input:focus-visible { outline:none; }