/* Interface CreativeLab: superfícies neutras, busca em destaque e foco no acervo.
   A composição da prancha de orçamento continua definida em styles.css. */
:root {
  color-scheme: dark;
  --bg-dark: #101011;
  --bg-surface: #171718;
  --bg-elevated: #222224;
  --bg-card: #171718;
  --bg-card-hover: #202022;
  --border-subtle: #ffffff0d;
  --border-strong: #ffffff18;
  --text-main: #f4f4f5;
  --text-muted: #a0a0a7;
  --text-dim: #87878f;
  --designi-blue: #4263ff;
  --designi-blue-hover: #5674ff;
  --designi-cyan: #8eabff;
  --designi-green: #61c5a0;
  --accent: #27cce0;
  --accent-hover: #58d9e8;
  --accent-soft: #27cce01f;
  --designi-gold: var(--accent);
  --header-height: 116px;
}

html { scroll-padding-top: 140px; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { transition: background .18s ease, border-color .18s ease, color .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #9cadff;
  outline-offset: 4px;
}
button { -webkit-tap-highlight-color: transparent; }
::selection { background: #4263ff66; color: #fff; }
svg { flex-shrink: 0; }

/* Cabeçalho e navegação */
.navbar {
  height: var(--header-height);
  grid-template-columns: minmax(215px, 1fr) minmax(0, 640px) minmax(215px, 1fr);
  grid-template-rows: 68px 48px;
  column-gap: 32px;
  row-gap: 0;
  padding: 0 24px;
  background: #101011;
  backdrop-filter: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}
.navbar-left { grid-column: 1; grid-row: 1; }
.brand-logo { gap: 10px; }
.brand-logo:hover { transform: none; }
.xs-logo-mark, .xs-monogram {
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: #4263ff; box-shadow: none;
}
.xs-logo-mark svg { width: 25px; height: 25px; }
.xs-logo-mark path { stroke: #fff; }
.xs-logo-mark circle { fill: #fff; }
.brand-name { font-size: 1.12rem; letter-spacing: -.7px; font-weight: 800; }
.brand-highlight { background: none; -webkit-text-fill-color: currentColor; margin-left: 4px; }
.brand-sub { margin-top: 5px; font-size: .62rem; letter-spacing: .2px; font-weight: 400; color: var(--text-muted); }
.header-search {
  grid-column: 2; grid-row: 1; display: flex; align-items: center;
  gap: 12px; padding: 5px 5px 5px 15px; background: #19191b;
  border: 1px solid transparent; border-radius: 9px; min-width: 0;
}
.header-search:focus-within { border-color: #4263ff88; }
.header-search > svg { width: 16px; height: 16px; color: var(--text-muted); }
.header-search input { min-width: 0; flex: 1; background: transparent; border: 0; outline: 0; color: var(--text-main); font-size: .76rem; }
.header-search button { padding: 9px 17px; background: var(--designi-blue); border: 0; border-radius: 6px; color: #fff; font-size: .73rem; cursor: pointer; }
.navbar-right { grid-column: 3; grid-row: 1; justify-self: end; gap: 8px; white-space: nowrap; }
.account-trigger { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; background: #1c1c1e; border: 1px solid var(--border-subtle); border-radius: 9px; color: #d4d4dc; font-size: .76rem; cursor: pointer; transition: background .18s ease, color .18s ease; }
.account-trigger:hover { background: #242428; color: var(--accent); }
.account-trigger:focus-visible { outline: 2px solid #9cadff; outline-offset: 4px; }
.nav-center-dock {
  grid-row: 2; grid-column: 1 / -1; justify-self: stretch;
  justify-content: center;
  min-width: 0; padding: 0; gap: 8px; height: 48px;
  background: transparent; border: 0; border-top: 1px solid var(--border-subtle);
  border-radius: 0; box-shadow: none;
}
.nav-dock-item { padding: 9px 12px; font-size: .75rem; font-weight: 400; color: #a6a6ae; border-radius: 6px; gap: 7px; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.nav-dock-item > svg { width: 14px; height: 14px; }
.nav-dock-item.active, .nav-dock-studio.active { background: #ffffff06; border-color: transparent; box-shadow: none; color: #fff; }
.nav-dock-item.active > svg { color: var(--accent); }
.nav-dock-item:hover { background: #ffffff08; }
.nav-dock-studio { color: #d5d5dc; }
.badge-studio-pill { font-size: .55rem; padding: 2px 5px; border: 0; background: #4263ff20; color: #9cadff; font-weight: 500; }
.nav-dock-studio.active .badge-studio-pill { background: #4263ff20; color: #9cadff; border: 0; }
.crown-icon { color: #ffbc48 !important; }

/* Busca e descoberta */
.hero-section {
  padding: 55px 32px 45px; background: #101011; border: 0;
  text-align: center; position: relative;
}
.hero-container { max-width: 1180px; }
.hero-pill { padding: 0; background: none; border: 0; color: #a6a6ae; font-size: .62rem; font-weight: 500; letter-spacing: 2px; gap: 8px; margin-bottom: 19px; }
.hero-eyebrow-line { height: 1px; width: 18px; background: var(--accent); }
.hero-title { font-size: clamp(2.8rem, 4.1vw, 4rem); line-height: 1.1; letter-spacing: -2.8px; font-weight: 700; margin-bottom: 20px; }
.text-gradient-designi, .text-gradient-gold { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; }
.hero-subtitle { max-width: 650px; font-size: .9rem; line-height: 1.75; margin-bottom: 29px; font-weight: 400; color: #a4a4ac; }
.search-bar-wrapper { width: 100%; max-width: 760px; min-height: 60px; padding: 7px; margin-bottom: 25px; gap: 12px; background: #1b1b1d; border: 1px solid #ffffff04; border-radius: 12px; box-shadow: 0 8px 30px #00000020; }
.search-bar-wrapper:focus-within { border-color: #27cce066; }
.xs-dropdown-trigger { transition: background .18s ease, color .18s ease, border-color .18s ease; }
.hero-search-icon { order: 0; width: 19px; height: 19px; margin-left: 12px; color: #85858f; }
.search-input { order: 1; min-width: 0; padding: 10px 0; font-size: .8rem; color: #f4f4f5; }
.search-input::placeholder { color: #909099; }
.search-input:focus-visible, .header-search input:focus-visible { outline: none; }
.search-bar-wrapper > .xs-dropdown { order: 2; }
.search-bar-wrapper .xs-dropdown-trigger { min-width: 0; padding: 8px 12px; border: 0; border-left: 1px solid var(--border-strong); background: none; border-radius: 0; color: #a6a6ae; font-size: .73rem; font-weight: 400; gap: 14px; }
.search-bar-wrapper .dd-icon-box { display: none; }
.search-bar-wrapper .xs-dropdown-menu { left: auto; right: 0; }
.search-bar-wrapper .dd-label { max-width: 145px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-submit-btn { order: 3; align-self: stretch; padding: 0 22px; min-height: 44px; background: var(--accent); color: #06272c; border-radius: 8px; font-size: .8rem; font-weight: 600; gap: 7px; }
.search-submit-btn:hover { background: var(--accent-hover); }
.search-submit-btn svg { width: 16px; height: 16px; }
.xs-dropdown-menu { background: #202022; border-color: #ffffff14; border-radius: 11px; box-shadow: 0 18px 45px #0005; backdrop-filter: none; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; }
.dd-option { border-radius: 7px; }
.dd-option.active { background: #4263ff18; border-color: #4263ff33; }
.dd-opt-text strong { font-size: .76rem; font-weight: 500; }
.dd-opt-text span { font-size: .67rem; margin-top: 3px; }
.dd-icon-box { background: #ffffff06; border: 0; color: #a6a6ae; }
.dd-opt-icon.icon-gold { background: var(--accent-soft); color: var(--accent); }
.dd-menu-header { font-size: .59rem; font-weight: 500; }
.quick-categories-bar { display: grid; grid-template-columns: repeat(6, 1fr); max-width: 1100px; margin: 0 auto; gap: 9px; }
.qcat-item { flex-direction: row; text-align: left; align-items: center; gap: 10px; min-width: 0; padding: 13px 12px; background: #18181a; border: 1px solid transparent; border-radius: 10px; color: #eeeef0; }
.qcat-item:hover { background: #202022; }
.qcat-item.active { border-color: #ffffff16; background: #1d1d20; }
.qcat-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent); border: 0; }
.qcat-icon svg { width: 18px; height: 18px; }
.qcat-item:nth-child(2) .qcat-icon { background: #4263ff; color: #fff; }
.qcat-item:nth-child(3) .qcat-icon { background: #322430; color: #e5a5cc; }
.qcat-item:nth-child(4) .qcat-icon { background: #23322e; color: #8fc4b1; }
.qcat-item:nth-child(5) .qcat-icon { background: #2f293d; color: #b6a0d4; }
.qcat-item:nth-child(6) .qcat-icon { background: #25303d; color: #9ab6d9; }
.qcat-item:hover .qcat-icon, .qcat-item.active .qcat-icon { transform: none; }
.qcat-item.active:first-child .qcat-icon { background: var(--accent-soft); color: var(--accent); }
.qcat-item span { font-size: .72rem; font-weight: 600; line-height: 1.4; }
.qcat-item small { display: block; font-size: .59rem; color: #9a9aa3; font-weight: 400; margin-top: 3px; white-space: nowrap; }

/* Acervo */
.catalog-section { max-width: 1410px; padding: 18px 48px 58px; }
.catalog-section[hidden] { display: none; }
.workflow-section .workflow-showcase-card { margin-top: 0; }
.catalog-toolbar { align-items: end; gap: 24px; margin-bottom: 23px; padding: 0; border: 0; }
.section-eyebrow { display: block; font-size: .58rem; letter-spacing: 1.7px; color: var(--accent); font-weight: 500; margin-bottom: 10px; }
.section-title { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -.65px; margin-bottom: 7px; }
.results-counter { font-size: .73rem; color: #93939e; }
.catalog-params-bar { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.search-license-pills { padding: 0; background: transparent; gap: 4px; }
.lic-pill { border: 1px solid transparent; font-size: .68rem; font-weight: 400; padding: 8px 11px; border-radius: 6px; }
.lic-pill.active { background: #242426; border-color: #ffffff0a; }
.xs-trigger-compact { min-width: 155px; padding: 7px 10px; font-size: .68rem; font-weight: 400; background: #19191b; border-color: var(--border-subtle); border-radius: 7px; }
.xs-trigger-compact .dd-icon-box { width: 21px; height: 21px; }
.assets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.asset-card { background: transparent; border: 0; border-radius: 10px; overflow: visible; }
.asset-card:hover { transform: none; }
.asset-thumb { height: auto; aspect-ratio: 1.65; overflow: hidden; border: 1px solid #ffffff0a; border-radius: 10px; transition: border-color .2s ease; }
.asset-card:hover .asset-thumb { border-color: #ffffff28; }
.asset-badge-top { top: 12px; left: 12px; right: 12px; }
.badge-type, .badge-pro, .badge-free { font-size: .55rem; padding: 5px 7px; letter-spacing: .3px; border-radius: 4px; font-weight: 500; }
.badge-type { background: #0006; border: 1px solid #ffffff14; color: #d1d1d8; }
.badge-pro { background: var(--accent-soft); color: var(--accent); border: 1px solid #27cce020; }
.badge-free { background: #113a2dd9; color: #8fd9ba; border-color: #ffffff0a; }
.card-neon-preview { padding: 20px 14px; max-width: 94%; background: #ffffff03; border-color: #ffffff14; border-radius: 8px; }
.card-neon-title { font-size: clamp(1rem, 1.6vw, 1.5rem); }
.card-neon-sub { font-size: .52rem; letter-spacing: 1.6px; line-height: 1.6; }
.asset-body { padding: 13px 1px 0; gap: 13px; }
.asset-title { font-weight: 500; font-size: .78rem; line-height: 1.6; color: #d8d8df; }
.asset-meta { font-size: .64rem; color: #9696a1; }
.asset-actions { opacity: .85; }
.btn-card-studio { padding: 8px 11px; background: #1b1b1e; border-color: #ffffff0a; color: #c2c2cb; font-size: .66rem; font-weight: 400; border-radius: 6px; }
.btn-card-studio:hover { background: #262631; border-color: #4263ff50; color: #fff; }
.btn-card-download { padding: 8px 10px; border-radius: 6px; color: #a8a8b2; background: #1b1b1e; }
.btn-card-download:hover { color: #fff; background: #27272d; }
.catalog-empty { grid-column: 1 / -1; text-align: center; padding: 65px 24px; border: 1px dashed var(--border-strong); border-radius: 12px; }
.catalog-empty > svg { width: 30px; height: 30px; color: var(--text-dim); margin-bottom: 16px; }
.catalog-empty h3 { font-size: 1rem; margin-bottom: 8px; font-weight: 500; }
.catalog-empty p { color: var(--text-muted); font-size: .8rem; margin-bottom: 20px; }
.catalog-empty button { border: 0; background: var(--designi-blue); color: #fff; padding: 10px 18px; border-radius: 7px; font-size: .76rem; cursor: pointer; }

/* Convite ao Studio e rodapé */
.workflow-showcase-card { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 58px; padding: 35px 42px; border: 1px solid #ffffff0b; border-radius: 14px; background: #171718; box-shadow: none; cursor: default; }
.workflow-showcase-card:hover { transform: none; border-color: #ffffff0b; }
.banner-tag { background: none; border: 0; padding: 0; font-size: .6rem; letter-spacing: 1.1px; color: #a4b1ff; font-weight: 500; margin-bottom: 18px; }
.wf-left h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 600; letter-spacing: -1.2px; margin-bottom: 15px; }
.wf-left p { font-size: .79rem; line-height: 1.8; max-width: 355px; margin-bottom: 22px; }
.btn-primary-designi { padding: 11px 16px; border-radius: 7px; background: #4263ff; font-size: .73rem; font-weight: 500; box-shadow: none; }
.btn-primary-designi:hover { background: #5674ff; }
.btn-primary-designi svg { width: 15px; height: 15px; }
.wf-step-box, .wf-step-result { width: 175px; min-width: 0; padding: 8px; border-color: #ffffff12; background: #101011; box-shadow: none; border-radius: 9px; }
.wf-step-box img { height: 175px; border-radius: 4px; }
.wf-step-tag, .wf-step-tag.tag-green { background: none; color: #a5a5b0; font-size: .56rem; font-weight: 400; }
.wf-step-tag.tag-green { color: #8fc8b1; }
.wf-arrow-circle { width: 30px; height: 30px; background: #252528; box-shadow: none; color: #adadb8; }
.wf-arrow-circle svg { width: 15px; height: 15px; }
.site-footer { margin: 0 48px; padding: 28px 0; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #92929e; font-size: .69rem; }
.footer-brand { font-size: .85rem; font-weight: 700; letter-spacing: -.3px; color: #d5d5dc; }
.footer-brand > span { display: block; font-size: .65rem; font-weight: 400; letter-spacing: 0; color: #8f8f9b; margin-top: 5px; }
.site-footer button { display: flex; gap: 8px; align-items: center; color: #b9b9c7; background: none; border: 0; font-size: .73rem; cursor: pointer; }
.site-footer button svg { width: 14px; height: 14px; }
.footer-actions, .footer-socials { display: flex; align-items: center; gap: 9px; }
.footer-actions { gap: 18px; }
.footer-social-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #b9b9c7; border: 1px solid var(--border-subtle); border-radius: 8px; text-decoration: none; font-size: .69rem; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.footer-social-link:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.footer-social-link svg { width: 14px; height: 14px; }
.footer-social-link.is-disabled { opacity: .42; cursor: not-allowed; }

/* Mesma linguagem visual nos controles do editor e nos planos. */
.studio-workspace { grid-template-columns: 310px minmax(0, 1fr) 270px; height: calc(100dvh - var(--header-height)); background: #101011; }
.studio-sidebar-left, .studio-sidebar-right, .studio-center-stage { min-width: 0; }
.studio-sidebar-left, .studio-sidebar-right, .stage-topbar { background: #171718; }
.studio-input, .segmented-control, .font-card, .scenario-card, .leg-pill, .current-input-card, .tech-spec-card, .form-field input, .auth-switch-tabs { background: #111113; }
.control-group { border-bottom-color: var(--border-subtle); }
.param-subtabs { background: #111113; }
.studio-version-dot { box-shadow: none; width: 7px; height: 7px; }
.sidebar-header h2 { font-size: .86rem; font-weight: 600; }
.sidebar-header p { font-size: .67rem; }
.stage-topbar { height: auto; min-height: 52px; padding: 12px; flex-wrap: wrap; }
.stage-wall-selector, .stage-camera-controls { flex-wrap: wrap; }
.bar-label { font-size: .65rem; }
.wall-pill, .cam-btn { font-size: .64rem; padding: 6px 8px; }
.viewport-3d { background: #111113; }
.stage-bottom-dock { background: #202023; border-color: #ffffff12; box-shadow: 0 8px 25px #0003; backdrop-filter: none; }
.btn-export-primary { box-shadow: none; font-weight: 500; }
.btn-export-secondary, .btn-upload-bg { color: #a9b6ff; background: #4263ff10; border-color: #4263ff44; }
.studio-range::-webkit-slider-thumb { box-shadow: none; }
.scenario-card.active, .font-card.active { background: #4263ff16; }
.premium-container { padding-top: 60px; }
.premium-header h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); letter-spacing: -1.1px; font-weight: 600; }
.premium-pill { background: #27cce00c; border-color: #27cce025; font-weight: 500; font-size: .65rem; }
.pricing-card { border-radius: 12px; background: #171718; border-color: #ffffff12; }
.pricing-featured { background: #1b1b1d; box-shadow: none; border: 1px solid #27cce066; }
.plan-top h3 { font-weight: 600; }
.plan-price .amount { font-weight: 600; }
.plan-features { line-height: 1.65; }
.plan-features li { align-items: flex-start; }
.plan-features svg { margin-top: 3px; }
.auth-modal-card { border-radius: 14px; box-shadow: 0 25px 100px #0006; }
.auth-modal-header h2 { font-weight: 600; letter-spacing: -.5px; }
.btn-social { background: #27272c; color: #eeeef3; border: 1px solid #ffffff12; font-weight: 500; }
.modal-backdrop { background: #0009; backdrop-filter: blur(5px); }
.visual-toast { box-shadow: 0 12px 35px #0003; font-size: .8rem; font-weight: 400; border-color: #ffffff20; }

/* Tablets e celulares */
@media (min-width: 1700px) {
  .assets-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .navbar { grid-template-columns: minmax(200px, 1fr) minmax(0, 640px) minmax(200px, 1fr); column-gap: 22px; }
  .catalog-section { padding-right: 30px; padding-left: 30px; }
  .quick-categories-bar { grid-template-columns: repeat(3, 1fr); max-width: 700px; }
  .catalog-toolbar { flex-wrap: wrap; gap: 20px; }
  .catalog-params-bar { flex: 1; justify-content: space-between; }
  .studio-workspace { grid-template-columns: 290px minmax(0, 1fr); height: auto; min-height: calc(100dvh - var(--header-height)); }
  .studio-sidebar-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); }
  .studio-center-stage { min-height: 780px; }
  .studio-controls-scroll { max-height: 900px; }
  .workflow-showcase-card { padding: 30px; gap: 25px; }
  .wf-comparison-visual { gap: 10px; }
}
@media (max-width: 900px) {
  .navbar { padding-right: 18px; padding-left: 18px; column-gap: 16px; }
  .header-search { gap: 8px; padding-left: 10px; }
  .header-search button { padding: 8px 11px; }
  .nav-center-dock { gap: 0; }
  .nav-dock-item { padding: 9px; font-size: .69rem; }
  .nav-dock-item > svg, .nav-dock-item > i, .badge-studio-pill { display: none; }
  .hero-section { padding: 45px 26px 32px; }
  .hero-title { font-size: 3.3rem; }
  .assets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-thumb { aspect-ratio: 1.35; }
  .card-neon-title { font-size: 1.2rem; }
  .workflow-showcase-card { grid-template-columns: 1fr; }
  .wf-left h2 br { display: none; }
  .wf-left p { max-width: 100%; }
  .wf-comparison-visual { justify-content: flex-start; }
  .wf-step-box { width: 195px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 30px; }
  .pricing-featured { transform: none; }
  .site-footer { margin: 0 30px; }
  .site-footer > span:nth-child(2) { display: none; }
  .footer-social-link span { display: none; }
}
@media (max-width: 640px) {
  :root { --header-height: 108px; }
  html { scroll-padding-top: 130px; }
  .navbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 62px 46px; padding: 0 16px; }
  .brand-name { font-size: 1rem; }
  .brand-sub { font-size: .57rem; }
  .xs-logo-mark { width: 32px; height: 32px; border-radius: 8px; }
  .header-search { display: none; }
  .navbar-right { grid-column: 2; }
  .nav-center-dock { padding: 0; gap: 0; height: 46px; min-width: 0; }
  .nav-dock-item { font-size: .64rem; padding: 7px 5px; }
  .nav-center-dock .xs-dropdown-menu { position: fixed; top: calc(var(--header-height) + 8px); left: 16px; right: 16px; width: auto; }
  .hero-section { padding: 36px 20px 30px; }
  .hero-pill { font-size: .55rem; letter-spacing: 1.5px; margin-bottom: 17px; }
  .hero-title { font-size: clamp(2.7rem, 11vw, 3.4rem); letter-spacing: -1.8px; margin-bottom: 17px; }
  .hero-subtitle { font-size: .78rem; line-height: 1.8; margin-bottom: 24px; }
  .desktop-break { display: none; }
  .search-bar-wrapper { gap: 8px; padding: 6px; min-height: 54px; border-radius: 9px; }
  .hero-search-icon { display: none; }
  .search-input { font-size: .72rem; padding-left: 8px; }
  .search-bar-wrapper > .xs-dropdown { display: none; }
  .search-submit-btn { padding: 0 13px; font-size: .73rem; min-height: 40px; border-radius: 6px; }
  .search-submit-btn > svg { display: none; }
  .quick-categories-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .qcat-item { padding: 11px; gap: 9px; border-radius: 8px; }
  .qcat-item span { font-size: .69rem; }
  .qcat-item small { font-size: .56rem; }
  .qcat-icon { width: 32px; height: 32px; border-radius: 8px; }
  .catalog-section { padding: 12px 20px 36px; }
  .catalog-toolbar { gap: 18px; margin-bottom: 19px; }
  .section-title { font-size: 1.17rem; line-height: 1.4; letter-spacing: -.4px; }
  .section-eyebrow { font-size: .54rem; }
  .results-counter { font-size: .68rem; }
  .catalog-params-bar { width: 100%; gap: 8px; }
  .lic-pill { font-size: .64rem; padding: 7px 9px; }
  .xs-trigger-compact { min-width: 0; gap: 9px; font-size: .64rem; padding: 8px; }
  .xs-trigger-compact .dd-icon-box { display: none; }
  .assets-grid { gap: 22px 12px; }
  .asset-thumb { aspect-ratio: 1; padding: 10px; border-radius: 7px; }
  .asset-badge-top { top: 7px; left: 7px; right: 7px; }
  .badge-type { display: none; }
  .badge-pro, .badge-free { font-size: .46rem; padding: 4px 5px; margin-left: auto; }
  .card-neon-preview { padding: 12px 7px; max-width: 100%; margin-top: 17px; }
  .card-neon-title { font-size: .9rem; line-height: 1.3; }
  .card-neon-sub { font-size: .4rem; letter-spacing: .7px; }
  .asset-title { font-size: .67rem; }
  .asset-body { padding-top: 10px; gap: 10px; }
  .asset-meta { font-size: .55rem; flex-wrap: wrap; gap: 4px; }
  .asset-actions { gap: 5px; }
  .btn-card-studio { font-size: .58rem; padding: 7px 5px; gap: 4px; }
  .btn-card-studio svg { display: none; }
  .btn-card-download { padding: 6px; }
  .btn-card-download svg { width: 12px; height: 12px; }
  .workflow-showcase-card { margin-top: 36px; padding: 23px 20px; gap: 28px; }
  .wf-left h2 { font-size: 1.8rem; }
  .wf-left p { font-size: .73rem; }
  .wf-comparison-visual { gap: 8px; }
  .wf-step-box { flex: 1; width: auto; padding: 6px; }
  .wf-step-box img { height: 135px; }
  .wf-step-tag { font-size: .5rem; padding: 2px; }
  .wf-arrow-circle { width: 24px; height: 24px; }
  .site-footer { margin: 0 20px; padding: 23px 0; gap: 14px; }
  .footer-brand { font-size: .75rem; }
  .footer-actions { gap: 8px; }
  .footer-socials { gap: 5px; }
  .footer-social-link { padding: 7px; }
  .site-footer button { font-size: .66rem; }
  .studio-workspace { display: flex; flex-direction: column; }
  .studio-sidebar-left { overflow: visible; }
  .studio-controls-scroll { max-height: 480px; }
  .studio-center-stage { min-height: 920px; }
  .studio-sidebar-right { display: flex; overflow: visible; border-left: 0; }
  .viewport-3d { padding: 20px 12px 75px; }
  .commercial-sheet-card { width: min(390px, calc(100vw - 32px)); height: auto; aspect-ratio: 410 / 790; }
  .stage-comparison-container { max-width: 100%; flex-direction: column; }
  .before-card-panel { width: min(320px, calc(100vw - 48px)); }
  .stage-bottom-dock { width: max-content; max-width: calc(100% - 16px); gap: 4px; padding: 7px; }
  .dock-btn { padding: 6px; font-size: .65rem; }
  .zoom-controls { font-size: .65rem; gap: 3px; }
  .dock-divider { margin: 0 1px; }
  .premium-container { padding: 35px 20px; }
  .premium-header h1 { font-size: 1.9rem; }
  .billing-btn { padding: 9px 11px; font-size: .72rem; }
  .discount-tag { font-size: .55rem; }
  .pricing-card { padding: 28px 22px; }
  .visual-toast { left: 16px; right: 16px; bottom: 16px; font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}