/* Colorrow Palette Visualizer — Phase 10 route-only design layer */

.cr-visualizer-page { padding-bottom: clamp(3rem, 7vw, 6rem); }
.cr-visualizer-intro,
.cr-visualizer-shell,
.cr-visualizer-support { width: min(100% - 40px, 1440px); margin-inline: auto; }
.cr-visualizer-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: var(--cr-space-8); align-items: end; padding: clamp(2.25rem, 5vw, 4.8rem) 0 clamp(1.6rem, 3vw, 2.8rem); }
.cr-visualizer-eyebrow,
.cr-visualizer-label { display: inline-flex; color: var(--cr-muted); font: 720 var(--cr-font-xs)/1.2 var(--cr-font-sans); letter-spacing: .08em; text-transform: uppercase; }
.cr-visualizer-intro .section-title { max-width: 920px; margin: var(--cr-space-3) 0 var(--cr-space-3); color: var(--cr-ink); font-size: clamp(2.7rem, 6vw, 5.7rem); line-height: .93; letter-spacing: -.065em; }
.cr-visualizer-intro .subtext { max-width: 820px; margin: 0; color: var(--cr-ink-soft); font: 520 clamp(1rem, 1.5vw, 1.18rem)/1.65 var(--cr-font-sans); }
.cr-visualizer-intro__note { margin: 0; padding: var(--cr-space-5); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-xl); background: var(--cr-surface); color: var(--cr-ink-soft); font: 520 var(--cr-font-sm)/1.55 var(--cr-font-sans); box-shadow: var(--cr-shadow-xs); }
.cr-visualizer-intro__note strong { color: var(--cr-ink); }

.cr-visualizer-shell { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(370px, .72fr); overflow: hidden; border: 1px solid var(--cr-border); border-radius: clamp(22px, 3vw, 34px); background: var(--cr-surface); box-shadow: var(--cr-shadow-lg); }
.cr-visualizer-preview-panel { min-width: 0; padding: clamp(1rem, 2vw, 1.6rem); border-right: 1px solid var(--cr-border); background: var(--cr-surface-soft); }
.cr-visualizer-controls { min-width: 0; padding: clamp(1.1rem, 2.3vw, 1.75rem); background: var(--cr-surface); }
.cr-visualizer-preview-head,
.cr-visualizer-controls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cr-space-5); }
.cr-visualizer-preview-head h2,
.cr-visualizer-controls-head h2 { margin: var(--cr-space-2) 0 var(--cr-space-1); color: var(--cr-ink); font: 780 clamp(1.3rem, 2.2vw, 1.9rem)/1.12 var(--cr-font-sans); letter-spacing: -.025em; }
.cr-visualizer-preview-head p,
.cr-visualizer-controls-head p { max-width: 640px; margin: 0; color: var(--cr-muted); font: 520 var(--cr-font-sm)/1.5 var(--cr-font-sans); }
.cr-visualizer-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); justify-content: flex-end; }
.cr-visualizer-toolbar-actions .cr-btn { white-space: nowrap; }

.cr-visualizer-modes { display: flex; gap: var(--cr-space-2); margin-top: var(--cr-space-5); padding-bottom: var(--cr-space-3); overflow-x: auto; scrollbar-width: thin; }
.cr-visualizer-modes button { flex: 0 0 auto; min-height: 42px; padding: .62rem .82rem; border: 1px solid var(--cr-border); border-radius: var(--cr-radius-md); background: var(--cr-surface); color: var(--cr-muted); font: 650 var(--cr-font-xs)/1 var(--cr-font-sans); cursor: pointer; transition: border-color 150ms var(--cr-ease-standard), background 150ms var(--cr-ease-standard), color 150ms var(--cr-ease-standard), transform 150ms var(--cr-ease-standard); }
.cr-visualizer-modes button:hover { border-color: var(--cr-border-strong); color: var(--cr-ink); transform: translateY(-1px); }
.cr-visualizer-modes button.is-active,
.cr-visualizer-modes button[aria-pressed="true"] { border-color: var(--cr-ink); background: var(--cr-ink); color: var(--cr-canvas); }
.cr-visualizer-modes button:focus-visible { outline: 2px solid var(--cr-focus); outline-offset: 3px; box-shadow: var(--cr-focus-ring); }

/* Live semantic preview */
.cr-visualizer-preview.brand-preview { --viz-background: #F4A261; --viz-surface: #F4A261; --viz-primary: #264653; --viz-secondary: #2A9D8F; --viz-accent: #E9C46A; --viz-text: #E76F51; --viz-border: #2A9D8F; min-height: clamp(520px, 52vw, 720px); margin: var(--cr-space-2) 0 0; overflow: auto; border: 1px solid var(--cr-border-strong); border-radius: var(--cr-radius-xl); background: var(--viz-background); color: var(--viz-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), var(--cr-shadow-sm); transition: background-color 150ms var(--cr-ease-standard), color 150ms var(--cr-ease-standard); }
.cr-visualizer-preview button { pointer-events: none; }
.cr-visualizer-preview *, .cr-visualizer-preview *::before, .cr-visualizer-preview *::after { box-sizing: border-box; }
.cr-visualizer-preview h3, .cr-visualizer-preview p, .cr-visualizer-preview strong, .cr-visualizer-preview b, .cr-visualizer-preview span, .cr-visualizer-preview small { color: inherit; }
.viz-eyebrow { color: var(--viz-text); font: 760 .68rem/1.2 var(--cr-font-sans); letter-spacing: .12em; text-transform: uppercase; }
.viz-brand-dot { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px 14px 8px 14px; background: linear-gradient(135deg, var(--viz-primary), var(--viz-accent)); box-shadow: inset 0 0 0 1px var(--viz-border); }

/* Landing */
.viz-landing { min-height: 100%; background: var(--viz-background); color: var(--viz-text); }
.viz-landing > header { display: flex; align-items: center; gap: 18px; padding: 18px 24px; border-bottom: 1px solid var(--viz-border); background: var(--viz-surface); }
.viz-landing__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.viz-landing > header nav { display: flex; gap: 18px; font-size: .8rem; }
.viz-landing button,
.viz-dashboard button,
.viz-shop button,
.viz-brand-components button,
.viz-article button { border: 1px solid var(--viz-border); border-radius: 999px; padding: 10px 15px; background: var(--viz-primary); color: var(--viz-text); font: 760 .76rem/1 var(--cr-font-sans); }
.viz-landing__hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .75fr); gap: clamp(24px, 5vw, 64px); align-items: center; min-height: 370px; padding: clamp(32px, 6vw, 72px); }
.viz-landing__hero h3 { max-width: 680px; margin: 12px 0 18px; font: 800 clamp(2.5rem, 6vw, 5.2rem)/.92 var(--cr-font-sans); letter-spacing: -.065em; }
.viz-landing__hero p { max-width: 540px; margin: 0 0 24px; font: 520 clamp(.92rem, 1.4vw, 1.06rem)/1.6 var(--cr-font-sans); }
.viz-landing__hero > div:first-child > div { display: flex; gap: 10px; flex-wrap: wrap; }
.viz-landing__hero button.is-secondary { background: var(--viz-secondary); }
.viz-landing__art { position: relative; min-height: 285px; border: 1px solid var(--viz-border); border-radius: 34% 14% 34% 14%; background: var(--viz-surface); overflow: hidden; }
.viz-landing__art i { position: absolute; display: block; border: 1px solid var(--viz-border); }
.viz-landing__art i:nth-child(1) { inset: 12% 16% 42% 18%; border-radius: 50% 50% 18% 50%; background: var(--viz-primary); }
.viz-landing__art i:nth-child(2) { width: 48%; height: 48%; right: 9%; bottom: 8%; border-radius: 50%; background: var(--viz-accent); }
.viz-landing__art i:nth-child(3) { width: 36%; height: 36%; left: 8%; bottom: 10%; border-radius: 14px; background: var(--viz-secondary); transform: rotate(10deg); }
.viz-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--viz-border); background: var(--viz-surface); }
.viz-feature-grid article { min-height: 142px; padding: 22px; border-right: 1px solid var(--viz-border); }
.viz-feature-grid article:last-child { border-right: 0; }
.viz-feature-grid article > span { display: block; color: var(--viz-accent); font: 800 .72rem/1 var(--cr-font-mono); }
.viz-feature-grid strong { display: block; margin: 18px 0 8px; font-size: 1rem; }
.viz-feature-grid p { margin: 0; font-size: .8rem; line-height: 1.5; }

/* Dashboard */
.viz-dashboard { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 620px; background: var(--viz-background); color: var(--viz-text); }
.viz-dashboard__side { display: flex; flex-direction: column; gap: 6px; padding: 24px 16px; border-right: 1px solid var(--viz-border); background: var(--viz-primary); }
.viz-dashboard__side strong { margin: 8px 0 20px; }
.viz-dashboard__side span { padding: 10px 8px; border-radius: 8px; font-size: .76rem; }
.viz-dashboard__side span.is-active { background: var(--viz-accent); }
.viz-dashboard__main { min-width: 0; padding: 24px; }
.viz-dashboard__main > header { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.viz-dashboard__main h3 { margin: 6px 0 0; font: 790 clamp(1.7rem, 4vw, 2.8rem)/1 var(--cr-font-sans); letter-spacing: -.045em; }
.viz-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.viz-metric-grid article,
.viz-chart-card,
.viz-activity { padding: 18px; border: 1px solid var(--viz-border); border-radius: 16px; background: var(--viz-surface); }
.viz-metric-grid article > span { display: block; font-size: .72rem; }
.viz-metric-grid strong { display: block; margin: 12px 0 7px; font: 790 1.8rem/1 var(--cr-font-sans); }
.viz-metric-grid small { font-size: .68rem; }
.viz-dashboard__lower { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(200px, .7fr); gap: 12px; margin-top: 12px; }
.viz-preview-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: .76rem; }
.viz-preview-card-head > span { font-size: .66rem; }
.viz-bars { display: flex; align-items: end; gap: 8px; height: 180px; margin-top: 22px; padding-top: 16px; border-bottom: 1px solid var(--viz-border); }
.viz-bars i { flex: 1; height: var(--h); min-width: 8px; border: 1px solid var(--viz-border); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--viz-primary); }
.viz-bars i:nth-child(even) { background: var(--viz-secondary); }
.viz-bars i:nth-child(5) { background: var(--viz-accent); }
.viz-activity { display: grid; align-content: start; gap: 14px; }
.viz-activity > div { display: flex; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--viz-border); }
.viz-activity i { width: 28px; height: 28px; border-radius: 50%; background: var(--viz-secondary); }
.viz-activity div:nth-child(3) i { background: var(--viz-accent); }
.viz-activity div:nth-child(4) i { background: var(--viz-primary); }
.viz-activity span { display: grid; gap: 3px; font-size: .72rem; }
.viz-activity small { font-size: .62rem; }

/* Mobile */
.viz-mobile-stage { display: grid; place-items: center; min-height: 650px; padding: 28px; background: linear-gradient(145deg, var(--viz-background), var(--viz-secondary)); color: var(--viz-text); }
.viz-phone { width: min(330px, 100%); overflow: hidden; border: 2px solid var(--viz-border); border-radius: 38px; background: var(--viz-background); box-shadow: 0 28px 60px rgb(0 0 0 / .2); }
.viz-phone__status { display: flex; justify-content: space-between; padding: 12px 20px 5px; font-size: .58rem; }
.viz-phone > header { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 9px; align-items: center; padding: 14px 20px; }
.viz-phone > header .viz-brand-dot { grid-row: 1 / 3; }
.viz-phone > header span { font-size: .62rem; }
.viz-phone > header strong { font-size: .9rem; }
.viz-phone > header i { grid-row: 1 / 3; grid-column: 3; width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--viz-border); background: var(--viz-surface); }
.viz-phone main { padding: 0 16px 18px; }
.viz-balance { padding: 20px; border: 1px solid var(--viz-border); border-radius: 24px; background: var(--viz-primary); }
.viz-balance > span, .viz-balance > small { display: block; font-size: .62rem; }
.viz-balance strong { display: block; margin: 14px 0 8px; font: 800 1.8rem/1 var(--cr-font-sans); }
.viz-mobile-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 18px; }
.viz-mobile-actions button { min-height: 42px; border: 1px solid var(--viz-border); border-radius: 14px; background: var(--viz-secondary); color: var(--viz-text); font: 700 .65rem/1 var(--cr-font-sans); }
.viz-mobile-actions button:nth-child(2) { background: var(--viz-accent); }
.viz-mobile-actions button:nth-child(3) { background: var(--viz-surface); }
.viz-mobile-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; margin-top: 8px; padding: 10px; border: 1px solid var(--viz-border); border-radius: 14px; background: var(--viz-surface); }
.viz-mobile-row i { width: 30px; height: 30px; border-radius: 10px; background: var(--viz-accent); }
.viz-mobile-row span { display: grid; gap: 3px; font-size: .65rem; }
.viz-mobile-row small { font-size: .56rem; }
.viz-mobile-row > strong { font-size: .68rem; }
.viz-phone > nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: 11px 12px 14px; border-top: 1px solid var(--viz-border); background: var(--viz-surface); }
.viz-phone > nav span { padding-top: 6px; text-align: center; font-size: .58rem; }
.viz-phone > nav span.is-active { border-top: 3px solid var(--viz-primary); }

/* Ecommerce */
.viz-shop { min-height: 620px; background: var(--viz-background); color: var(--viz-text); }
.viz-shop > header { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--viz-border); background: var(--viz-surface); }
.viz-shop__brand { display: flex; gap: 9px; align-items: center; margin-right: auto; }
.viz-shop > header nav { display: flex; gap: 16px; font-size: .7rem; }
.viz-shop__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .78fr); gap: 24px; align-items: stretch; padding: 26px; }
.viz-shop__hero > div:first-child { padding: 24px; border: 1px solid var(--viz-border); border-radius: 20px; background: var(--viz-surface); }
.viz-shop__hero h3 { max-width: 520px; margin: 10px 0 14px; font: 810 clamp(2.1rem, 5vw, 4.4rem)/.94 var(--cr-font-sans); letter-spacing: -.055em; }
.viz-shop__hero p { max-width: 480px; margin: 0 0 22px; font-size: .84rem; line-height: 1.6; }
.viz-product-hero { position: relative; min-height: 280px; overflow: hidden; border: 1px solid var(--viz-border); border-radius: 20px; background: var(--viz-secondary); }
.viz-product-hero i { position: absolute; width: 58%; height: 70%; left: 21%; top: 15%; border: 1px solid var(--viz-border); border-radius: 50% 50% 22% 22%; background: var(--viz-accent); box-shadow: 0 30px 35px rgb(0 0 0 / .12); }
.viz-product-hero span { position: absolute; left: 16px; bottom: 14px; font-size: .66rem; }
.viz-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 26px 26px; }
.viz-product-grid article { min-width: 0; }
.viz-product-image { position: relative; height: 140px; border: 1px solid var(--viz-border); border-radius: 16px; background: var(--viz-surface); }
.viz-product-image::before { content: ''; position: absolute; left: 29%; top: 19%; width: 42%; height: 62%; border: 1px solid var(--viz-border); border-radius: 50% 50% 18% 18%; background: var(--viz-primary); }
.viz-product-image.is-two::before { border-radius: 8px 8px 36% 36%; background: var(--viz-secondary); transform: rotate(-8deg); }
.viz-product-image.is-three::before { border-radius: 50%; background: var(--viz-accent); }
.viz-product-image span { position: absolute; left: 9px; top: 9px; z-index: 2; padding: 5px 7px; border: 1px solid var(--viz-border); border-radius: 999px; background: var(--viz-accent); font-size: .56rem; }
.viz-product-grid article > div:last-child { display: flex; justify-content: space-between; gap: 8px; padding: 9px 2px; font-size: .7rem; }

/* Brand system */
.viz-brand-system { min-height: 620px; padding: 26px; background: var(--viz-background); color: var(--viz-text); }
.viz-brand-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); gap: 24px; align-items: end; min-height: 230px; padding: 30px; border: 1px solid var(--viz-border); border-radius: 22px; background: var(--viz-primary); }
.viz-brand-lockup { display: flex; align-items: center; gap: 14px; }
.viz-brand-lockup > div:last-child { display: grid; gap: 4px; }
.viz-brand-lockup span { font-size: .68rem; }
.viz-brand-mark-large { width: 62px; height: 62px; border: 1px solid var(--viz-border); border-radius: 50% 12% 50% 50%; background: var(--viz-accent); }
.viz-brand-board > p { max-width: 340px; margin: 0; font: 680 1.1rem/1.4 var(--cr-font-sans); }
.viz-brand-grid { display: grid; grid-template-columns: 1.2fr .9fr .8fr; gap: 12px; margin-top: 12px; }
.viz-brand-grid > article { min-height: 250px; padding: 22px; border: 1px solid var(--viz-border); border-radius: 18px; background: var(--viz-surface); }
.viz-type-card h3 { margin: 20px 0 12px; font: 820 5rem/.8 Georgia, serif; letter-spacing: -.08em; }
.viz-type-card > strong { display: block; font-size: 1rem; }
.viz-type-card p { font-size: .72rem; line-height: 1.55; }
.viz-brand-colors > div { display: flex; gap: 10px; align-items: center; margin-top: 15px; }
.viz-brand-colors i { width: 34px; height: 34px; border: 1px solid var(--viz-border); border-radius: 10px; background: var(--viz-primary); }
.viz-brand-colors i.is-secondary { background: var(--viz-secondary); }
.viz-brand-colors i.is-accent { background: var(--viz-accent); }
.viz-brand-colors span { display: grid; gap: 2px; font-size: .7rem; }
.viz-brand-colors small { font-size: .6rem; }
.viz-brand-components { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.viz-brand-components .viz-eyebrow { margin-bottom: 10px; }
.viz-brand-components button.is-secondary { background: var(--viz-secondary); }
.viz-brand-badge { margin-top: 8px; padding: 7px 9px; border: 1px solid var(--viz-border); border-radius: 999px; background: var(--viz-accent); font-size: .62rem; }

/* Article */
.viz-article { min-height: 620px; background: var(--viz-background); color: var(--viz-text); }
.viz-article > header { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--viz-border); background: var(--viz-surface); }
.viz-article__brand { display: flex; gap: 9px; align-items: center; margin-right: auto; }
.viz-article > header nav { display: flex; gap: 16px; font-size: .7rem; }
.viz-article > article { max-width: 690px; margin: 0 auto; padding: 44px 28px 24px; }
.viz-article > article h3 { margin: 12px 0 16px; font: 800 clamp(2.2rem, 5vw, 4.3rem)/.98 Georgia, serif; letter-spacing: -.045em; }
.viz-article__dek { margin: 0; font: 560 1rem/1.55 var(--cr-font-sans); }
.viz-article__meta { display: flex; gap: 10px; align-items: center; margin: 20px 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--viz-border); }
.viz-article__meta i { width: 34px; height: 34px; border: 1px solid var(--viz-border); border-radius: 50%; background: var(--viz-secondary); }
.viz-article__meta span { display: grid; gap: 2px; font-size: .68rem; }
.viz-article__meta small { font-size: .58rem; }
.viz-article__body { font: 520 .82rem/1.7 Georgia, serif; }
.viz-article__body blockquote { margin: 20px 0; padding: 16px 18px; border-left: 5px solid var(--viz-primary); background: var(--viz-surface); font: 680 1rem/1.45 var(--cr-font-sans); }
.viz-article > aside { margin: 0 26px 26px; padding: 18px 20px; border: 1px solid var(--viz-border); border-radius: 16px; background: var(--viz-accent); }
.viz-article > aside strong { display: block; margin: 10px 0 6px; }
.viz-article > aside p { margin: 0; font-size: .72rem; line-height: 1.5; }

/* Audit */
.cr-visualizer-audit { margin-top: var(--cr-space-4); padding: var(--cr-space-4); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-xl); background: var(--cr-surface); }
.cr-visualizer-audit__head { display: grid; grid-template-columns: minmax(0, .65fr) minmax(280px, 1fr); gap: var(--cr-space-4); align-items: center; }
.cr-visualizer-audit__head h3 { margin: var(--cr-space-2) 0 0; color: var(--cr-ink); font: 760 1.08rem/1.2 var(--cr-font-sans); }
.cr-visualizer-warning-summary { display: flex; gap: var(--cr-space-3); align-items: flex-start; min-height: 62px; padding: var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); background: var(--cr-surface-soft); }
.cr-visualizer-warning-summary > span { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--cr-warning); font-weight: 850; }
.cr-visualizer-warning-summary[data-state="pass"] > span { color: var(--cr-success); }
.cr-visualizer-warning-summary strong { display: block; color: var(--cr-ink); font: 720 var(--cr-font-sm)/1.3 var(--cr-font-sans); }
.cr-visualizer-warning-summary p { margin: 3px 0 0; color: var(--cr-muted); font: 520 var(--cr-font-xs)/1.45 var(--cr-font-sans); }
.cr-visualizer-warning-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cr-space-2); margin-top: var(--cr-space-3); }
.cr-visualizer-warning-list article { display: flex; gap: var(--cr-space-3); min-height: 92px; padding: var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); background: var(--cr-surface-soft); }
.cr-visualizer-warning-list article > span { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--cr-success); font: 800 var(--cr-font-xs)/1 var(--cr-font-sans); }
.cr-visualizer-warning-list article[data-audit-state="fail"] > span { color: var(--cr-warning); }
.cr-visualizer-warning-list strong { display: block; color: var(--cr-ink); font: 680 var(--cr-font-xs)/1.3 var(--cr-font-sans); }
.cr-visualizer-warning-list p,
.cr-visualizer-warning-list small { display: block; margin: 4px 0 0; color: var(--cr-muted); font: 520 .7rem/1.4 var(--cr-font-sans); }

/* Controls */
.cr-visualizer-palette.visualizer-palette-strip { display: grid; grid-template-columns: repeat(5, 1fr); height: auto; min-height: 76px; margin: var(--cr-space-5) 0; overflow: hidden; border: 1px solid var(--cr-border-strong); border-radius: var(--cr-radius-lg); box-shadow: none; }
.cr-visualizer-palette button { display: flex; min-width: 0; min-height: 76px; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 9px 7px; border: 0; border-right: 1px solid rgb(0 0 0 / .12); background: var(--palette-color); color: #111; cursor: pointer; text-align: left; text-shadow: none; }
.cr-visualizer-palette button:last-child { border-right: 0; }
.cr-visualizer-palette button span { font: 720 .58rem/1 var(--cr-font-sans); opacity: .72; }
.cr-visualizer-palette button strong { font: 780 .64rem/1 var(--cr-font-mono); }
.cr-visualizer-palette button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--cr-focus); outline-offset: -4px; }
.cr-visualizer-role-list.visualizer-token-list { display: grid; grid-template-columns: 1fr; gap: var(--cr-space-3); }
.cr-visualizer-role { padding: var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); background: var(--cr-surface-soft); }
.cr-visualizer-role__meta { display: flex; gap: var(--cr-space-3); align-items: center; margin-bottom: var(--cr-space-2); }
.cr-visualizer-role__meta > i { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--cr-border-strong); border-radius: 10px; background: var(--role-color); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .25); }
.cr-visualizer-role__meta > div { display: grid; min-width: 0; gap: 2px; }
.cr-visualizer-role label { color: var(--cr-ink); font: 720 var(--cr-font-sm)/1.2 var(--cr-font-sans); }
.cr-visualizer-role__meta span { color: var(--cr-muted); font: 660 var(--cr-font-xs)/1 var(--cr-font-mono); }
.cr-visualizer-role .cr-select { width: 100%; min-height: 42px; }
.cr-visualizer-role > small { display: block; margin-top: var(--cr-space-2); color: var(--cr-muted); font: 500 .72rem/1.4 var(--cr-font-sans); }
.cr-visualizer-role .cr-select:focus-visible { outline: 2px solid var(--cr-focus); outline-offset: 3px; box-shadow: var(--cr-focus-ring); }
.cr-visualizer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cr-space-2); margin-top: var(--cr-space-5); }
.cr-visualizer-actions .cr-btn { justify-content: center; text-align: center; }
.cr-visualizer-actions .cr-btn:first-child { grid-column: 1 / -1; }
.cr-visualizer-code-block { margin-top: var(--cr-space-4); overflow: hidden; border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); background: var(--cr-ink); color: var(--cr-canvas); }
.cr-visualizer-code-block > div { display: grid; gap: 4px; padding: var(--cr-space-3) var(--cr-space-4); border-bottom: 1px solid rgb(255 255 255 / .16); }
.cr-visualizer-code-block .cr-visualizer-label { color: currentColor; opacity: .66; }
.cr-visualizer-code-block strong { font: 680 var(--cr-font-sm)/1.2 var(--cr-font-sans); }
.cr-visualizer-code-block pre { margin: 0; overflow-x: auto; padding: var(--cr-space-4); }
.cr-visualizer-code-block code { color: inherit; font: 600 .74rem/1.55 var(--cr-font-mono); }
.cr-visualizer-save-note { margin: var(--cr-space-3) 0 0; color: var(--cr-muted); font: 500 .72rem/1.45 var(--cr-font-sans); }

/* Supporting content */
.cr-visualizer-support { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cr-space-5); padding-top: clamp(2.8rem, 6vw, 5.2rem); }
.cr-visualizer-content { grid-column: span 6; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-xl); background: var(--cr-surface); }
.cr-visualizer-content--wide { grid-column: span 12; }
.cr-visualizer-content h2 { max-width: 880px; margin: var(--cr-space-3) 0 var(--cr-space-3); color: var(--cr-ink); font: 790 clamp(1.55rem, 2.8vw, 2.45rem)/1.08 var(--cr-font-sans); letter-spacing: -.04em; }
.cr-visualizer-content p,
.cr-visualizer-content li { color: var(--cr-ink-soft); font: 500 var(--cr-font-md)/1.68 var(--cr-font-sans); }
.cr-visualizer-content > p { max-width: 980px; margin: 0; }
.cr-visualizer-concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cr-space-3); margin-top: var(--cr-space-5); }
.cr-visualizer-concepts article { padding: var(--cr-space-4); border-top: 1px solid var(--cr-border-strong); background: var(--cr-surface-soft); }
.cr-visualizer-concepts strong { color: var(--cr-ink); font: 720 var(--cr-font-md)/1.25 var(--cr-font-sans); }
.cr-visualizer-concepts p { margin: var(--cr-space-2) 0 0; font-size: var(--cr-font-sm); }
.cr-visualizer-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cr-space-3); margin: var(--cr-space-5) 0 0; padding: 0; list-style: none; counter-reset: viz-step; }
.cr-visualizer-steps li { position: relative; min-height: 126px; padding: var(--cr-space-4) var(--cr-space-4) var(--cr-space-4) 3.7rem; border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); background: var(--cr-surface-soft); counter-increment: viz-step; }
.cr-visualizer-steps li::before { content: counter(viz-step); position: absolute; left: 1rem; top: 1rem; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--cr-border-strong); border-radius: 50%; color: var(--cr-ink); font: 750 var(--cr-font-xs)/1 var(--cr-font-sans); }
.cr-visualizer-steps strong { display: block; color: var(--cr-ink); font: 720 var(--cr-font-md)/1.25 var(--cr-font-sans); }
.cr-visualizer-steps span { display: block; margin-top: var(--cr-space-2); color: var(--cr-muted); font: 500 var(--cr-font-sm)/1.55 var(--cr-font-sans); }
.cr-visualizer-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cr-space-3); margin-top: var(--cr-space-5); }
.cr-visualizer-related a { display: grid; gap: var(--cr-space-2); min-height: 124px; padding: var(--cr-space-4); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); background: var(--cr-surface-soft); color: var(--cr-ink); text-decoration: none; transition: transform 150ms var(--cr-ease-standard), border-color 150ms var(--cr-ease-standard); }
.cr-visualizer-related a:hover { border-color: var(--cr-border-strong); transform: translateY(-2px); }
.cr-visualizer-related a:focus-visible { outline: 2px solid var(--cr-focus); outline-offset: 3px; box-shadow: var(--cr-focus-ring); }
.cr-visualizer-related strong { font: 720 var(--cr-font-md)/1.2 var(--cr-font-sans); }
.cr-visualizer-related span { color: var(--cr-muted); font: 500 var(--cr-font-sm)/1.5 var(--cr-font-sans); }

@media (max-width: 1180px) {
  .cr-visualizer-shell { grid-template-columns: 1fr; }
  .cr-visualizer-preview-panel { border-right: 0; border-bottom: 1px solid var(--cr-border); }
  .cr-visualizer-role-list.visualizer-token-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-visualizer-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cr-space-4); }
  .cr-visualizer-controls-head,
  .cr-visualizer-palette,
  .cr-visualizer-actions,
  .cr-visualizer-code-block,
  .cr-visualizer-save-note { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cr-visualizer-intro { grid-template-columns: 1fr; align-items: start; }
  .cr-visualizer-intro__note { max-width: 720px; }
  .cr-visualizer-warning-list { grid-template-columns: 1fr; }
  .cr-visualizer-audit__head { grid-template-columns: 1fr; }
  .viz-landing__hero,
  .viz-shop__hero,
  .viz-brand-board { grid-template-columns: 1fr; }
  .viz-dashboard__lower { grid-template-columns: 1fr; }
  .viz-brand-grid { grid-template-columns: 1fr 1fr; }
  .viz-brand-components { grid-column: 1 / -1; }
  .cr-visualizer-content,
  .cr-visualizer-content--wide { grid-column: span 12; }
  .cr-visualizer-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cr-visualizer-intro,
  .cr-visualizer-shell,
  .cr-visualizer-support { width: min(100% - 24px, 1440px); }
  .cr-visualizer-intro { padding-top: var(--cr-space-8); }
  .cr-visualizer-preview-head,
  .cr-visualizer-controls-head { flex-direction: column; }
  .cr-visualizer-toolbar-actions { width: 100%; justify-content: stretch; }
  .cr-visualizer-toolbar-actions .cr-btn { flex: 1; justify-content: center; }
  .cr-visualizer-preview.brand-preview { min-height: 500px; border-radius: var(--cr-radius-lg); }
  .cr-visualizer-role-list.visualizer-token-list { grid-template-columns: 1fr; }
  .cr-visualizer-controls { display: block; }
  .cr-visualizer-palette.visualizer-palette-strip { margin-top: var(--cr-space-4); }
  .cr-visualizer-actions { grid-template-columns: 1fr; }
  .cr-visualizer-actions .cr-btn:first-child { grid-column: auto; }
  .viz-landing > header nav,
  .viz-shop > header nav,
  .viz-article > header nav { display: none; }
  .viz-landing__hero { padding: 28px 22px; }
  .viz-landing__art { min-height: 220px; }
  .viz-feature-grid,
  .viz-product-grid { grid-template-columns: 1fr; }
  .viz-feature-grid article { border-right: 0; border-bottom: 1px solid var(--viz-border); }
  .viz-dashboard { grid-template-columns: 72px minmax(0, 1fr); }
  .viz-dashboard__side { padding: 16px 10px; }
  .viz-dashboard__side strong,
  .viz-dashboard__side span { font-size: 0; }
  .viz-dashboard__side span::before { content: '•'; font-size: 1rem; }
  .viz-dashboard__main { padding: 16px; }
  .viz-dashboard__main > header { align-items: flex-start; flex-direction: column; }
  .viz-metric-grid { grid-template-columns: 1fr; }
  .viz-mobile-stage { padding: 18px 10px; }
  .viz-shop__hero { padding: 18px; }
  .viz-product-grid { padding: 0 18px 18px; }
  .viz-brand-system { padding: 18px; }
  .viz-brand-grid { grid-template-columns: 1fr; }
  .viz-brand-components { grid-column: auto; }
  .viz-article > article { padding: 34px 20px 20px; }
  .cr-visualizer-concepts,
  .cr-visualizer-steps,
  .cr-visualizer-related { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .cr-visualizer-preview-panel,
  .cr-visualizer-controls { padding: var(--cr-space-3); }
  .cr-visualizer-palette.visualizer-palette-strip { grid-template-columns: repeat(5, minmax(54px, 1fr)); overflow-x: auto; }
  .cr-visualizer-palette button { min-width: 54px; padding: 8px 5px; }
  .cr-visualizer-palette button strong { font-size: .55rem; }
  .viz-landing > header,
  .viz-shop > header,
  .viz-article > header { padding: 13px 14px; }
  .viz-landing > header button,
  .viz-shop > header button,
  .viz-article > header button { padding: 8px 10px; font-size: .62rem; }
  .viz-landing__hero h3 { font-size: 2.3rem; }
  .viz-dashboard__main { padding: 12px; }
  .viz-dashboard__main h3 { font-size: 1.5rem; }
  .viz-metric-grid strong { font-size: 1.45rem; }
  .viz-phone { border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-visualizer-modes button,
  .cr-visualizer-preview.brand-preview,
  .cr-visualizer-related a { transition: none !important; }
  .cr-visualizer-modes button:hover,
  .cr-visualizer-related a:hover { transform: none; }
}