/* Website page/designer internals only; never redefine shared admin shell chrome. */
.website-pages-workbench { gap:14px; }
.website-page-list { overflow:hidden; border-radius:var(--radius-md); }
.website-page-row { display:grid!important; grid-template-columns:minmax(260px,1.4fr) minmax(190px,.7fr) auto; align-items:center!important; gap:24px!important; min-height:112px; }
.website-page-identity>span { color:var(--color-accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:750; }
.website-page-identity>strong { display:block; margin-top:6px; font-size:17px; }
.website-page-version { display:grid; justify-items:start; gap:8px; }
.website-page-version small { color:var(--color-text-muted); font-size:11px; }
.website-page-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.website-status-badge[data-status="已发布"] { color:var(--color-success); background:color-mix(in srgb,var(--color-success) 12%,var(--color-surface)); }
.website-status-badge[data-status="草稿"],.website-status-badge[data-status="有未发布修改"] { color:var(--color-warning); background:color-mix(in srgb,var(--color-warning) 13%,var(--color-surface)); }
.website-load-error>div { text-align:center; }
.website-load-error strong,.website-load-error p { display:block; }
.website-load-error p { margin:8px 0 16px; }

.website-designer { --color-accent:#315eea; --color-accent-strong:#244bc8; --color-accent-soft:#edf4ff; display:grid; gap:12px; min-width:0; }
.website-designer-toolbar { display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:20px; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:0 5px 18px rgba(23,33,43,.06); }
.website-designer-title,.website-designer-actions,.website-designer-title>div { display:flex; align-items:center; }
.website-designer-title { min-width:0; gap:13px; }
.website-designer-title>div { display:block; min-width:0; }
.website-designer-title span { color:var(--color-text-muted); font-size:11px; }
.website-designer-title h2 { overflow:hidden; margin:3px 0 0; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.website-designer-title em { flex:0 0 auto; padding:4px 8px; border-radius:999px; color:var(--color-text-muted); background:var(--color-surface-subtle); font-size:11px; font-style:normal; }
.website-back-button { display:flex; min-height:40px; align-items:center; gap:7px; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:0 12px; color:var(--color-text); background:var(--color-surface); font-weight:700; }
.website-back-button:hover { border-color:var(--color-accent); color:var(--color-accent); }
.website-designer-actions { flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.website-viewport-switch,.website-segmented { display:inline-flex; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-sm); }
.website-viewport-switch button,.website-segmented button { min-height:38px; border:0; border-right:1px solid var(--color-border); padding:0 11px; color:var(--color-text-muted); background:var(--color-surface); }
.website-viewport-switch button { display:grid; min-width:58px; place-content:center; }
.website-viewport-switch button span { display:block; line-height:1.15; }
.website-viewport-switch button:last-child,.website-segmented button:last-child { border-right:0; }
.website-viewport-switch button.is-active,.website-segmented button.is-active { color:#fff; background:var(--color-accent); }
.website-designer-message { padding:10px 13px; border:1px solid var(--color-border); color:var(--color-text-muted); background:var(--color-surface); font-size:12px; }
.website-designer-message.is-success { border-color:color-mix(in srgb,var(--color-success) 30%,var(--color-border)); color:var(--color-success); background:color-mix(in srgb,var(--color-success) 6%,var(--color-surface)); }
.website-designer-message.is-error { border-color:color-mix(in srgb,var(--color-danger) 30%,var(--color-border)); color:var(--color-danger); background:color-mix(in srgb,var(--color-danger) 6%,var(--color-surface)); }
.website-designer-body { display:grid; height:calc(100dvh - 180px); min-height:620px; grid-template-columns:220px minmax(480px,1fr) 320px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:0 12px 34px rgba(23,33,43,.07); }
.website-designer-palette,.website-designer-properties { min-width:0; min-height:0; overflow:hidden; background:var(--color-surface); }
.website-designer-palette { border-right:1px solid var(--color-border); }
.website-designer-properties { display:grid; grid-template-rows:auto minmax(0,1fr); border-left:1px solid var(--color-border); }
.website-designer-palette>header,.website-designer-properties>header { padding:18px; border-bottom:1px solid var(--color-border); }
.website-designer-palette header>span,.website-designer-properties header>span { color:var(--color-accent); font-size:11px; font-weight:800; }
.website-designer-palette h3,.website-designer-properties h3 { margin:5px 0 0; font-size:16px; }
.website-designer-palette p,.website-designer-properties p { margin:7px 0 0; color:var(--color-text-muted); font-size:11px; line-height:1.55; }
.website-palette-list { display:grid; max-height:none; overflow:auto; overscroll-behavior:contain; padding:10px; }
.website-palette-item { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; min-height:72px; border:1px solid transparent; border-radius:var(--radius-sm); padding:8px; color:var(--color-text); background:transparent; text-align:left; }
.website-palette-item:hover { background:var(--color-hover); }
.website-palette-item.is-selected { border-color:color-mix(in srgb,var(--color-accent) 28%,var(--color-border)); color:var(--color-accent-strong); background:var(--color-accent-soft); box-shadow:inset 3px 0 0 var(--color-accent); }
.website-palette-item img { display:block; width:64px; height:46px; border:1px solid var(--color-border); border-radius:2px; object-fit:cover; }
.website-palette-item strong,.website-palette-item small { display:block; }
.website-palette-item strong { font-size:12px; }
.website-palette-item small { overflow:hidden; margin-top:4px; color:var(--color-text-muted); font-size:10px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.website-palette-item>b { color:var(--color-accent); font-size:20px; font-weight:400; }
.website-designer-stage { min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; padding:28px; background:#eef1f5; }
.website-canvas-shell { margin:0 auto; overflow:hidden; border:1px solid #cfd6dd; border-radius:6px; background:#fff; box-shadow:0 18px 46px rgba(23,33,43,.16); }
.website-canvas-shell[data-viewport="desktop"] { width:100%; max-width:1280px; }
.website-canvas-shell[data-viewport="tablet"] { width:768px; }
.website-canvas-shell[data-viewport="mobile"] { width:390px; }
.website-live-preview-shell { background:#0b0d0c; }
.website-live-preview { display:block; width:100%; height:calc(100dvh - 270px); min-height:620px; border:0; background:#0b0d0c; }
.website-canvas-browserbar { display:flex; height:30px; align-items:center; gap:5px; padding:0 10px; color:#66706e; background:#e8ebea; font-size:9px; }
.website-canvas-browserbar>span { width:7px; height:7px; border-radius:50%; background:#a7afad; }
.website-canvas-browserbar>strong { display:flex; min-width:0; align-items:center; gap:8px; overflow:hidden; margin-left:7px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.website-canvas-page { color:#202729; background:#fff; }
.website-site-header { display:flex; height:66px; align-items:center; justify-content:space-between; gap:20px; padding:0 30px; border-bottom:1px solid #e5e7e5; background:#fff; }
.website-site-header img { display:block; width:112px; height:auto; }
.website-site-header nav { display:flex; gap:25px; color:#3d4547; font-size:11px; }
.website-site-header>b { font-size:10px; }
.website-preview-block { position:relative; min-height:250px; overflow:visible; padding:54px clamp(30px,6vw,78px); color:var(--website-block-color); background:var(--website-block-background); text-align:var(--website-block-align); transition:opacity .15s ease; }
.website-preview-block.is-selected { z-index:2; outline:2px dashed #315eea; outline-offset:-2px; }
.website-preview-block.is-hidden { opacity:.35; }
.website-preview-block.is-hidden::after { position:absolute; inset:0; display:grid; place-items:center; content:"已隐藏"; color:#fff; background:rgba(20,25,24,.55); font-size:13px; font-weight:750; }
.website-preview-copy { position:relative; z-index:1; max-width:620px; margin-right:auto; margin-left:0; }
.website-preview-block[style*="--website-block-align:center"] .website-preview-copy { margin-right:auto; margin-left:auto; }
.website-preview-block[style*="--website-block-align:right"] .website-preview-copy { margin-right:0; margin-left:auto; }
.website-preview-copy>span { font-size:9px; font-weight:800; letter-spacing:.12em; }
.website-preview-copy h2 { max-width:760px; margin:16px 0 13px; font-size:clamp(25px,4vw,54px); line-height:1.05; letter-spacing:0; }
.website-preview-copy p { max-width:560px; margin:0; opacity:.78; font-size:12px; line-height:1.8; }
.website-preview-copy a { display:inline-flex; align-items:center; gap:24px; margin-top:26px; border-bottom:1px solid currentColor; padding-bottom:5px; color:inherit; font-size:11px; text-decoration:none; }
.website-preview-facts { display:grid; gap:0; margin:26px 0 0; border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.website-preview-facts div { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:12px 0; border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent); text-align:left; }
.website-preview-facts dt { opacity:.62; font-size:9px; }
.website-preview-facts dd { display:grid; gap:3px; margin:0; }
.website-preview-facts b { font-size:12px; }
.website-preview-facts span { opacity:.72; font-size:10px; line-height:1.5; }
.website-preview-application-layout { display:grid; grid-template-columns:minmax(130px,.72fr) minmax(0,1.28fr); gap:18px; align-items:stretch; margin-top:24px; }
.website-preview-application-layout>img { width:100%; height:100%; min-height:170px; object-fit:cover; }
.website-preview-applications { display:grid; gap:0; border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); text-align:left; }
.website-preview-applications div { display:grid; grid-template-columns:32px minmax(100px,.45fr) minmax(0,1fr); gap:10px; align-items:start; padding:10px 0; border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.website-preview-applications span,.website-preview-applications small { opacity:.68; font-size:9px; line-height:1.45; }
.website-preview-applications b { font-size:11px; }
.website-preview-access { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; text-align:left; }
.website-preview-access article { display:grid; gap:6px; min-height:112px; align-content:end; padding:14px; border:1px solid color-mix(in srgb,currentColor 22%,transparent); }
.website-preview-access article small { opacity:.65; font-size:8px; letter-spacing:.08em; }
.website-preview-access article b { font-size:13px; }
.website-preview-access article span { opacity:.72; font-size:9px; line-height:1.55; }
.website-preview-access>p { grid-column:1/-1; font-size:9px; }
.website-preview-commitments { display:grid; margin:24px 0 0; border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); text-align:left; }
.website-preview-commitments div { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.website-preview-commitments dt { opacity:.62; font-size:9px; }
.website-preview-commitments dd { display:grid; gap:3px; margin:0; }
.website-preview-commitments b { font-size:11px; }
.website-preview-commitments span { opacity:.7; font-size:9px; line-height:1.5; }
.website-preview-media { position:absolute; inset:0; overflow:hidden; }
.website-preview-media::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(10,12,12,.62),rgba(10,12,12,.08)); }
.website-preview-media img { width:100%; height:100%; object-fit:cover; }
.website-preview-websiteSanxiHero { display:grid; min-height:clamp(390px,55vw,650px); align-items:end; padding:0; color:#f2f1ed; background:#0b0d0c; }
.website-preview-websiteSanxiHero::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.035),transparent 52%); pointer-events:none; }
.website-sanxi-hero-wordmark { position:absolute; inset:7% 3% 9%; display:grid; place-items:center; overflow:hidden; }
.website-sanxi-hero-wordmark svg { display:block; width:100%; height:100%; overflow:visible; }
.website-sanxi-hero-wordmark text { font-family:Arial,Helvetica,sans-serif; font-size:330px; font-weight:700; letter-spacing:-24px; }
.website-sanxi-word-base { fill:#e9e9e6; }
.website-sanxi-hero-switch { position:absolute; z-index:2; bottom:18px; left:20px; display:flex; align-items:center; gap:13px; color:#686e6b; font-size:8px; }
.website-sanxi-hero-switch b { position:relative; color:#f2f1ed; }
.website-sanxi-hero-switch b::after { position:absolute; top:16px; left:0; width:12px; height:1px; content:""; background:#b72e2c; }
.website-sanxi-hero-scroll { position:absolute; z-index:2; right:20px; bottom:17px; display:flex; align-items:center; gap:12px; color:#f2f1ed; font-size:9px; }
.website-preview-websiteHero,.website-preview-websiteVideoHero { min-height:500px; }
.website-preview-websiteHero .website-preview-copy,.website-preview-websiteVideoHero .website-preview-copy { color:#fff; }
.website-preview-websiteSplitStory { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:48px; }
.website-preview-websiteSplitStory .website-preview-media { position:relative; min-height:330px; grid-column:2; grid-row:1; }
.website-preview-websiteSplitStory .website-preview-media::after { display:none; }
.website-preview-websiteSplitStory .website-preview-copy { grid-column:1; grid-row:1; }
.website-preview-websiteFooter { min-height:150px; }
.website-preview-websiteFooter .website-preview-copy h2 { font-size:24px; }
.website-product-placeholders,.website-capability-placeholders,.website-metric-placeholders { position:relative; z-index:1; display:grid; gap:12px; margin-top:32px; }
.website-product-placeholders { grid-template-columns:repeat(3,minmax(0,1fr)); }
.website-product-placeholders i { display:block; aspect-ratio:4/5; background:color-mix(in srgb,currentColor 13%,transparent); }
.website-capability-placeholders,.website-metric-placeholders { grid-template-columns:repeat(3,minmax(0,1fr)); }
.website-capability-placeholders i,.website-metric-placeholders i { border-top:1px solid color-mix(in srgb,currentColor 35%,transparent); padding:16px 0; font-size:11px; font-style:normal; }
.website-metric-placeholders b { display:block; margin-bottom:8px; font-size:28px; }
.website-component-controls { position:absolute; z-index:5; top:10px; right:10px; display:flex; overflow:hidden; border:1px solid #cfd6d3; border-radius:5px; background:#fff; box-shadow:0 6px 18px rgba(18,28,29,.16); }
.website-component-controls button { width:34px; height:34px; border:0; border-right:1px solid #e3e6e5; color:#34403e; background:#fff; font-size:15px; }
.website-component-controls button:last-child { border-right:0; color:#ad4438; }
.website-component-controls button:hover { background:#f0f2f1; }
.website-canvas-empty { display:grid; width:100%; min-height:300px; place-items:center; border:2px dashed #ccd2d0; color:#6b7472; background:#f7f8f7; }
.website-site-footer { display:flex; min-height:54px; align-items:center; justify-content:space-between; padding:0 28px; color:#aeb8b5; background:#151918; font-size:9px; letter-spacing:.08em; }
.website-property-form { display:grid; min-height:0; gap:12px; overflow:auto; overscroll-behavior:contain; padding:14px; }
.website-property-form label { display:grid; gap:7px; }
.website-property-form label>span,.website-property-form legend { color:var(--color-text-muted); font-size:11px; font-weight:700; }
.website-property-form input,.website-property-form textarea { width:100%; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:9px 10px; color:var(--color-text); background:var(--color-input); resize:vertical; }
.website-property-form input { min-height:36px; }
.website-controlled-media small { color:var(--color-text-muted); font-size:11px; line-height:1.55; }
.website-property-form .website-property-toggle { grid-template-columns:20px minmax(0,1fr); align-items:start; padding:12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-subtle); }
.website-property-form .website-property-toggle>input { width:18px; min-height:18px; margin:2px 0 0; accent-color:var(--color-primary); }
.website-property-toggle>span { display:grid; gap:3px; color:var(--color-text)!important; }
.website-property-toggle small { color:var(--color-text-muted); font-size:11px; font-weight:400; line-height:1.5; }
.website-property-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.website-property-form fieldset { margin:0; border:0; padding:0; }
.website-property-section { display:grid; gap:12px; margin:0; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:13px; background:var(--color-surface); }
.website-property-section>header { display:grid; gap:3px; padding-bottom:10px; border-bottom:1px solid var(--color-border-soft); }
.website-property-section>header strong { color:var(--color-text); font-size:12px; }
.website-property-section>header span { color:var(--color-text-muted); font-size:10px; font-weight:400; }
.website-boundary-disclosure { border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-text-muted); background:var(--color-surface-subtle); }
.website-boundary-disclosure summary { min-height:40px; padding:11px 12px; color:var(--color-text); font-size:11px; font-weight:700; cursor:pointer; }
.website-boundary-disclosure p { margin:0!important; border-top:1px solid var(--color-border); padding:10px 12px 12px; }
.website-property-form .website-company-facts { display:grid; gap:10px; padding:13px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-subtle); }
.website-property-form .website-company-facts legend { padding:0 5px; }
.website-focus-fields>p { margin:0; color:var(--color-text-muted); font-size:11px; line-height:1.55; }
.website-focus-device { display:grid; grid-template-columns:72px 1fr 1fr; gap:10px; align-items:end; padding-top:10px; border-top:1px solid var(--color-border-soft); }
.website-focus-device>strong { align-self:center; color:var(--color-text); font-size:11px; }
.website-focus-device input[type="range"] { min-height:28px; padding:0; accent-color:var(--color-primary); }
.website-property-form .website-application-fields { display:grid; gap:12px; }
.website-application-fields>p { margin:0; color:var(--color-text-muted); font-size:11px; line-height:1.55; }
.website-property-form .website-fixed-content-fields { display:grid; gap:12px; }
.website-fixed-content-fields>p { margin:0; color:var(--color-text-muted); font-size:11px; line-height:1.55; }
.website-item-disclosure { border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-subtle); }
.website-item-disclosure summary { display:grid; min-height:44px; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; color:var(--color-text); cursor:pointer; list-style:none; }
.website-item-disclosure summary::-webkit-details-marker { display:none; }
.website-item-disclosure summary>span { color:var(--color-primary); font-size:10px; font-weight:800; }
.website-item-disclosure summary>strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.website-item-disclosure summary>small { color:var(--color-text-muted); font-size:10px; }
.website-item-disclosure[open] summary>small { color:var(--color-primary); }
.website-item-disclosure>div { display:grid; gap:11px; border-top:1px solid var(--color-border); padding:12px; }
.website-archive-crop { display:grid; gap:10px; padding:10px; border:1px solid var(--color-border-soft); border-radius:var(--radius-sm); background:var(--color-surface); }
.website-archive-crop>header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.website-archive-crop>header strong { color:var(--color-text); font-size:11px; }
.website-archive-crop>header span { color:var(--color-text-muted); font-size:10px; }
.website-archive-crop-stage { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--color-border); border-radius:4px; background:#e8e6e1; cursor:crosshair; touch-action:none; user-select:none; }
.website-archive-crop[data-archive-device="tablet"] .website-archive-crop-stage { aspect-ratio:4/3; }
.website-archive-crop[data-archive-device="mobile"] .website-archive-crop-stage { aspect-ratio:3/4; }
.website-archive-crop-stage img { width:100%; height:100%; pointer-events:none; }
.website-archive-crop-stage>span { position:absolute; inset:0; display:grid; place-items:center; color:var(--color-text-muted); font-size:10px; }
.website-archive-crop-stage i { position:absolute; width:16px; height:16px; border:1px solid #fff; border-radius:50%; background:var(--color-primary); box-shadow:0 0 0 2px rgba(49,94,234,.22); transform:translate(-50%,-50%); pointer-events:none; }
.website-archive-fit-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; }
.website-archive-fit-actions button { min-height:32px; border:1px solid var(--color-border); border-radius:4px; padding:0 8px; color:var(--color-text-muted); background:var(--color-surface-subtle); font-size:10px; }
.website-archive-fit-actions button.is-active { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-soft); }
.website-archive-crop input[type="range"] { min-height:24px; padding:0; accent-color:var(--color-primary); }
.website-preview-archive-media { display:block; width:100%; height:100%; overflow:hidden; background:#e8e6e1; }
.website-preview-archive-media img { width:100%; height:100%; }

/* Preview breakpoints mirror the public website instead of following the admin browser width. */
.website-canvas-shell[data-viewport="tablet"] .website-site-header,
.website-canvas-shell[data-viewport="mobile"] .website-site-header { height:58px; padding:0 18px; }
.website-canvas-shell[data-viewport="tablet"] .website-site-header nav,
.website-canvas-shell[data-viewport="mobile"] .website-site-header nav { display:none; }
.website-canvas-shell[data-viewport="tablet"] .website-site-header img,
.website-canvas-shell[data-viewport="mobile"] .website-site-header img { width:104px; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-application-layout,
.website-canvas-shell[data-viewport="mobile"] .website-preview-application-layout { grid-template-columns:1fr; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-application-layout>img,
.website-canvas-shell[data-viewport="mobile"] .website-preview-application-layout>img { grid-row:2; min-height:300px; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-applications,
.website-canvas-shell[data-viewport="mobile"] .website-preview-applications { grid-row:1; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-access,
.website-canvas-shell[data-viewport="mobile"] .website-preview-access { grid-template-columns:1fr; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-access>p,
.website-canvas-shell[data-viewport="mobile"] .website-preview-access>p { grid-column:auto; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-block { padding:64px 42px; }
.website-canvas-shell[data-viewport="tablet"] .website-preview-copy h2 { font-size:48px; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-block { min-height:220px; padding:64px 20px; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-copy h2 { margin-top:12px; font-size:38px; line-height:1.08; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-copy p { font-size:13px; line-height:1.7; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-websiteSanxiHero { min-height:680px; padding:0; }
.website-canvas-shell[data-viewport="mobile"] .website-sanxi-hero-wordmark { inset:12% 1% 13%; }
.website-canvas-shell[data-viewport="mobile"] .website-sanxi-hero-wordmark text { font-size:290px; letter-spacing:-22px; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-applications div { grid-template-columns:28px minmax(0,1fr); gap:7px; padding:13px 0; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-applications small { grid-column:2; font-size:10px; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-applications b { font-size:14px; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-application-layout>img { min-height:52svh; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-facts div,
.website-canvas-shell[data-viewport="mobile"] .website-preview-commitments div { grid-template-columns:30px minmax(0,1fr); padding:14px 0; }
.website-canvas-shell[data-viewport="mobile"] .website-preview-access article { min-height:170px; }
.website-canvas-shell[data-viewport="mobile"] .website-site-footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:4px; padding:12px 18px; }
.website-color-grid label>div { display:grid; grid-template-columns:38px minmax(0,1fr); gap:6px; }
.website-color-grid input[type="color"] { height:36px; padding:3px; }
.website-properties-empty { display:grid; min-height:250px; align-content:center; gap:8px; padding:24px; color:var(--color-text-muted); text-align:center; }
.website-properties-empty strong { color:var(--color-text); }
.website-properties-empty span { font-size:11px; line-height:1.6; }
.website-designer.is-previewing .website-designer-palette,.website-designer.is-previewing .website-designer-properties { display:none; }
.website-designer.is-previewing .website-designer-body { grid-template-columns:1fr; }
.website-designer.is-previewing .website-designer-stage { padding:18px; }
.website-designer.is-previewing .website-component-controls,.website-designer.is-previewing .website-preview-block.is-selected { outline:0; }
.website-designer.is-previewing .website-component-controls { display:none; }

.website-editor-dialog { width:min(700px,calc(100vw - 32px)); max-height:min(760px,calc(100vh - 32px)); border:0; border-radius:6px; padding:0; color:var(--color-text); background:var(--color-surface); box-shadow:0 24px 70px rgba(10,15,14,.34); }
.website-editor-dialog::backdrop { background:var(--color-overlay); }
.website-editor-dialog-card>header { display:flex; min-height:78px; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--color-border); padding:16px 20px; }
.website-editor-dialog-card header span { color:var(--color-accent); font-size:11px; font-weight:750; }
.website-editor-dialog-card header h3 { margin:4px 0 0; font-size:19px; }
.website-editor-dialog-card header button { width:36px; height:36px; border:0; color:var(--color-text-muted); background:transparent; font-size:24px; }
.website-editor-dialog-content { max-height:650px; overflow:auto; padding:20px; }
.website-summary-form { display:grid; gap:16px; }
.website-summary-form label { display:grid; gap:8px; }
.website-summary-form textarea { width:100%; border:1px solid var(--color-border); border-radius:4px; padding:10px; color:var(--color-text); background:var(--color-input); resize:vertical; }
.website-summary-form>div { display:flex; justify-content:flex-end; gap:8px; }
.website-dialog-error { margin:0; color:var(--color-danger); font-size:12px; }
.website-version-list { display:grid; border:1px solid var(--color-border); }
.website-version-list article { display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--color-border); padding:14px; }
.website-version-list article:last-child { border-bottom:0; }
.website-version-list strong,.website-version-list span,.website-version-list p,.website-version-list small { display:block; }
.website-version-list span,.website-version-list small { color:var(--color-text-muted); font-size:10px; }
.website-version-list p { margin:5px 0; font-size:12px; }
.website-dialog-empty { display:grid; min-height:170px; place-items:center; color:var(--color-text-muted); }

:root[data-theme="dark"] .website-canvas-shell { border-color:#424b49; }
:root[data-theme="dark"] .website-component-controls { border-color:#4a5351; }
:root[data-theme="dark"] .website-page-actions .secondary-button,
:root[data-theme="dark"] .website-designer-toolbar .secondary-button,
:root[data-theme="dark"] .website-back-button,
:root[data-theme="dark"] .website-version-list .secondary-button { color:var(--color-text); background:var(--color-surface-raised); }

/* Homepage operations editor: wide working surface, fixed structure rail, real component preview. */
.website-icon { display:block; width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.website-designer button:focus-visible,.website-designer a:focus-visible,.website-designer input:focus-visible,.website-designer textarea:focus-visible,.website-designer select:focus-visible,.website-editor-dialog button:focus-visible,.website-editor-dialog textarea:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.website-designer-toolbar { min-height:76px; padding:12px 16px; box-shadow:none; }
.website-back-button { min-height:44px; }
.website-designer-title em { border:1px solid var(--color-border); border-radius:4px; padding:5px 9px; }
.website-designer-title em[data-dirty="true"] { border-color:color-mix(in srgb,var(--color-warning) 38%,var(--color-border)); color:var(--color-warning); background:color-mix(in srgb,var(--color-warning) 8%,var(--color-surface)); }
.website-designer-actions>button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:7px; padding-right:13px; padding-left:13px; }
.website-viewport-switch button { display:flex; min-width:76px; min-height:44px; align-items:center; justify-content:center; gap:7px; }
.website-viewport-switch .website-icon { width:17px; height:17px; }
.website-designer-message { min-height:38px; border-radius:4px; }
.website-designer-body { height:calc(100dvh - 178px); min-height:680px; grid-template-columns:minmax(240px,270px) minmax(0,1fr) minmax(360px,420px); }
.website-designer-palette { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.website-designer-palette>header,.website-designer-properties>header { padding:20px; }
.website-designer-palette>header h3,.website-designer-properties>header h3 { margin:0; font-size:18px; }
.website-designer-properties>header>div>span { display:block; margin-bottom:6px; color:var(--color-accent); font-size:11px; font-weight:750; }
.website-structure-summary { display:grid; grid-template-columns:auto 1fr; align-items:end; gap:0 9px; margin-top:16px; border-top:1px solid var(--color-border); padding-top:13px; }
.website-structure-summary strong { grid-row:1/3; color:var(--color-text); font-size:28px; line-height:1; }
.website-structure-summary span { color:var(--color-text); font-size:11px; font-weight:700; }
.website-structure-summary i { color:var(--color-text-muted); font-size:10px; font-style:normal; }
.website-module-list { align-content:start; padding:8px; }
.website-module-item { position:relative; grid-template-columns:34px minmax(0,1fr); gap:8px; min-height:86px; border:0; border-bottom:1px solid var(--color-border-soft); border-radius:0; padding:12px 8px; }
.website-module-item.is-selected { border-color:var(--color-border-soft); color:var(--color-text); background:var(--color-accent-soft); box-shadow:inset 2px 0 0 var(--color-accent); }
.website-module-item.is-hidden { opacity:.62; }
.website-module-index { align-self:start; padding-top:2px; color:var(--color-accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:750; }
.website-module-copy { min-width:0; }
.website-module-copy strong { font-size:13px; }
.website-module-copy small { min-height:30px; }
.website-module-item em { grid-column:2; color:var(--color-text-muted); font-size:10px; font-style:normal; }
.website-designer-palette>footer { border-top:1px solid var(--color-border); padding:15px 18px 17px; }
.website-designer-palette>footer strong { font-size:11px; }
.website-designer-palette>footer p { margin-top:5px; }
.website-designer-stage { padding:24px; background:#e9edf1; }
.website-canvas-shell { position:relative; border-radius:4px; box-shadow:0 16px 38px rgba(23,33,43,.14); }
.website-canvas-browserbar { height:34px; padding:0 12px; }
.website-canvas-browserbar>em { margin-left:auto; color:#65706d; font-size:9px; font-style:normal; font-weight:650; }
.website-live-preview { height:calc(100dvh - 260px); min-height:650px; }
.website-preview-state { position:absolute; z-index:8; top:46px; left:12px; display:flex; min-height:44px; max-width:min(520px,calc(100% - 24px)); align-items:center; gap:10px; border:1px solid var(--color-border); border-radius:4px; padding:8px 10px; color:var(--color-text); background:var(--color-surface); box-shadow:0 8px 24px rgba(17,25,24,.14); }
.website-preview-state>span:not(.website-preview-spinner) { display:grid; gap:2px; }
.website-preview-state strong,.website-preview-state small { display:block; }
.website-preview-state strong { font-size:11px; }
.website-preview-state small { color:#69726f; font-size:10px; line-height:1.35; }
.website-preview-state>div { display:flex; gap:6px; margin-left:auto; }
.website-preview-state button,.website-preview-state a { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:6px; border:1px solid var(--color-border); border-radius:3px; padding:0 11px; color:var(--color-text); background:var(--color-surface); font-size:11px; font-weight:700; text-decoration:none; }
.website-preview-state.is-ready { top:42px; min-height:36px; padding:6px 9px; }
.website-preview-state.is-error { border-color:#d9b0aa; }
.website-preview-state.is-error>.website-icon { color:var(--color-danger); }
.website-preview-spinner { width:16px; height:16px; flex:0 0 auto; border:2px solid #cbd1cf; border-top-color:var(--color-accent); border-radius:50%; animation:website-preview-spin .8s linear infinite; }
@keyframes website-preview-spin { to { transform:rotate(360deg); } }
.website-designer-properties { grid-template-rows:auto minmax(0,1fr); }
.website-property-form { gap:10px; padding:12px; }
.website-property-form input,.website-property-form textarea,.website-property-form select { min-height:44px; font:inherit; }
.website-property-form select { width:100%; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:0 10px; color:var(--color-text); background:var(--color-input); }
.website-property-form textarea { min-height:88px; }
.website-field-count { display:block; justify-self:end; margin-top:-3px; color:var(--color-text-muted); font-size:10px; }
.website-locked-setting { display:grid; gap:4px; border:1px solid var(--color-border); border-radius:4px; padding:12px 13px; background:var(--color-surface-subtle); }
.website-locked-setting strong { font-size:12px; }
.website-locked-setting span { color:var(--color-text-muted); font-size:11px; line-height:1.5; }
.website-property-group { border:1px solid var(--color-border); border-radius:4px; background:var(--color-surface); }
.website-property-group>summary { display:flex; min-height:56px; align-items:center; padding:10px 13px; cursor:pointer; list-style:none; }
.website-property-group>summary::-webkit-details-marker { display:none; }
.website-property-group>summary::after { width:8px; height:8px; flex:0 0 auto; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; content:""; transform:rotate(45deg); }
.website-property-group[open]>summary::after { transform:rotate(225deg); }
.website-property-group>summary>span { display:grid; gap:3px; padding-right:12px; }
.website-property-group>summary strong { font-size:12px; }
.website-property-group>summary small { color:var(--color-text-muted); font-size:10px; font-weight:400; line-height:1.4; }
.website-property-group>div { display:grid; gap:12px; border-top:1px solid var(--color-border); padding:13px; }
.website-hero-media-list,.website-archive-fields,.website-focus-list { display:grid; gap:9px; }
.website-hero-media-toolbar { display:flex!important; align-items:center; justify-content:space-between; gap:10px; border:0!important; padding:0!important; }
.website-hero-media-toolbar>span { color:var(--color-text-muted); font-size:10px; }
.website-hero-media-toolbar>button { display:inline-flex; min-height:44px; align-items:center; gap:6px; border:1px solid var(--color-border); border-radius:3px; padding:0 10px; color:var(--color-text); background:var(--color-surface); font-size:11px; font-weight:700; }
.website-hero-media-toolbar .website-icon { width:14px; height:14px; }
.website-hero-media-toolbar>button:disabled { cursor:not-allowed; opacity:.45; }
.website-hero-media-slot { overflow:hidden; border:1px solid var(--color-border-soft); border-radius:3px; background:var(--color-surface-subtle); }
.website-hero-media-slot>summary { display:flex; min-height:50px; align-items:center; gap:9px; padding:7px 10px; cursor:pointer; list-style:none; }
.website-hero-media-slot>summary::-webkit-details-marker { display:none; }
.website-hero-media-slot>summary>span { color:var(--color-accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:750; }
.website-hero-media-slot>summary>div { display:grid; min-width:0; flex:1; gap:2px; }
.website-hero-media-slot>summary strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.website-hero-media-slot>summary small { color:var(--color-text-muted); font-size:10px; }
.website-hero-media-slot>summary>i { color:var(--color-text-muted); font-size:14px; font-style:normal; transition:transform .16s ease; }
.website-hero-media-slot[open]>summary>i { transform:rotate(180deg); }
.website-hero-media-editor { display:grid; gap:9px; border-top:1px solid var(--color-border-soft); padding:10px; }
.website-hero-remove { min-height:44px; border:0; padding:0 4px; color:var(--color-danger); background:transparent; font-size:11px; text-align:left; }
.website-hero-remove:disabled { color:var(--color-text-muted); cursor:not-allowed; opacity:.5; }
.website-edit-boundary-note { margin:2px 2px 0!important; color:var(--color-text-muted)!important; font-size:10px!important; line-height:1.55!important; }
.website-current-media { display:flex; min-height:44px; align-items:center; gap:8px; border-top:1px solid var(--color-border-soft); padding-top:9px; }
.website-current-media>span { min-width:0; flex:1; overflow:hidden; color:var(--color-text-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.website-current-media>button { min-height:44px; border:1px solid var(--color-border); border-radius:3px; padding:0 10px; color:var(--color-text); background:var(--color-surface); font-size:11px; }
.website-fact-row { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; border-top:1px solid var(--color-border-soft); padding-top:12px!important; }
.website-fact-row:first-child { border-top:0; padding-top:0!important; }
.website-fact-row legend { grid-row:1/3; align-self:start; padding-top:33px; color:var(--color-accent)!important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px!important; }
.website-fact-row label { grid-column:2; }
.website-focus-device { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; }
.website-focus-device>header { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; }
.website-focus-device>header strong { font-size:11px; }
.website-focus-device>header span { color:var(--color-text-muted); font-size:10px; }
.website-focus-device label>span { display:flex; justify-content:space-between; gap:8px; }
.website-focus-device output { color:var(--color-text); font-variant-numeric:tabular-nums; }
.website-focus-device input[type="range"] { min-height:32px; padding:0; }
.website-sync-contract { display:grid; gap:12px; border:1px solid var(--color-border); border-radius:4px; padding:13px; background:var(--color-surface-subtle); }
.website-sync-contract>header { display:flex; align-items:center; gap:8px; }
.website-sync-contract>header .website-icon { color:var(--color-success); }
.website-sync-contract>header strong { font-size:12px; }
.website-sync-contract dl { display:grid; gap:0; margin:0; border-top:1px solid var(--color-border-soft); }
.website-sync-contract dl>div { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; border-bottom:1px solid var(--color-border-soft); padding:9px 0; }
.website-sync-contract dt { color:var(--color-accent); font-size:10px; font-weight:750; }
.website-sync-contract dd { margin:0; color:var(--color-text-muted); font-size:10px; line-height:1.5; }
.website-sync-contract>a { display:flex; min-height:44px; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:3px; color:var(--color-text); background:var(--color-surface); font-size:11px; font-weight:700; text-decoration:none; }
.website-item-disclosure summary { min-height:48px; }
.website-boundary-disclosure summary { min-height:44px; }
.website-editor-dialog-card header button { display:grid; width:44px; height:44px; place-items:center; }
.website-editor-dialog-card header button .website-icon { width:20px; height:20px; }
.website-summary-form button,.website-version-list button { min-height:44px; }

@media (max-width:1480px) {
  .website-designer-body { height:calc(100dvh - 186px); grid-template-columns:minmax(620px,1fr) minmax(350px,410px); grid-template-rows:154px minmax(0,1fr); }
  .website-designer-palette { display:grid; grid-column:1/-1; grid-row:1; grid-template-columns:220px minmax(0,1fr) 210px; grid-template-rows:1fr; border-right:0; border-bottom:1px solid var(--color-border); }
  .website-designer-palette>header { border-right:1px solid var(--color-border); border-bottom:0; padding:14px 16px; }
  .website-designer-palette>header p { display:none; }
  .website-structure-summary { margin-top:10px; padding-top:9px; }
  .website-module-list { display:flex; gap:0; overflow-x:auto; overflow-y:hidden; padding:8px; }
  .website-module-item { min-width:220px; flex:1 0 220px; }
  .website-designer-palette>footer { border-top:0; border-left:1px solid var(--color-border); padding:14px 16px; }
  .website-designer-stage { grid-column:1; grid-row:2; }
  .website-designer-properties { grid-column:2; grid-row:2; }
}

@media (max-width:1100px) {
  .website-designer-toolbar { align-items:flex-start; flex-direction:column; }
  .website-designer-actions { width:100%; justify-content:flex-start; }
  .website-designer-actions [data-designer-command="save"] { margin-left:auto; }
  .website-designer-body { height:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:auto; overflow:visible; }
  .website-designer-palette { grid-column:1; grid-row:auto; grid-template-columns:190px minmax(0,1fr); min-height:140px; border-right:0; }
  .website-designer-palette>footer { display:none; }
  .website-designer-stage { grid-column:1; grid-row:auto; min-height:760px; }
  .website-designer-properties { grid-column:1; grid-row:auto; border-top:1px solid var(--color-border); border-left:0; }
  .website-property-form { max-height:none; overflow:visible; }
  .website-live-preview { height:min(900px,76dvh); min-height:680px; }
}

@media (max-width:720px) {
  .website-designer-title { width:100%; }
  .website-designer-title>div { flex:1; }
  .website-designer-title em { margin-left:auto; }
  .website-back-button span { display:none; }
  .website-designer-actions { display:grid; grid-template-columns:repeat(3,44px) minmax(126px,1fr); }
  .website-viewport-switch { grid-column:1/-1; }
  .website-viewport-switch button { min-width:0; flex:1; }
  .website-designer-actions>button { width:44px; padding:0; }
  .website-designer-actions>button>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .website-designer-actions [data-designer-command="publish"] { width:auto; padding:0 12px; }
  .website-designer-actions [data-designer-command="publish"]>span { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .website-designer-actions [data-designer-command="save"] { margin-left:0; }
  .website-designer-palette { display:block; min-height:0; }
  .website-designer-palette>header { border-right:0; border-bottom:1px solid var(--color-border); }
  .website-module-list { display:flex; }
  .website-module-item { min-width:210px; }
  .website-designer-stage { min-height:700px; padding:10px; }
  .website-canvas-shell[data-viewport="desktop"] { min-width:720px; }
  .website-preview-state { right:8px; left:8px; max-width:none; }
  .website-preview-state.is-error { align-items:flex-start; flex-wrap:wrap; }
  .website-preview-state.is-error>div { width:100%; margin-left:26px; }
  .website-property-form { padding:10px; }
  .website-focus-device { grid-template-columns:1fr; }
  .website-focus-device>header { grid-column:1; }
}

/* The page list and legacy static website canvas keep their own compact rules;
   the homepage workbench breakpoints above remain the only active editor shell rules. */
@media (max-width:900px) {
  .website-page-row { grid-template-columns:1fr!important; align-items:start!important; gap:14px!important; }
  .website-page-actions { justify-content:flex-start; }
}

@media (max-width:620px) {
  .website-section-heading { align-items:flex-start; flex-direction:column; }
  .website-page-actions { display:grid; width:100%; grid-template-columns:1fr 1fr; }
  .website-site-header { height:54px; padding:0 16px; }
  .website-site-header img { width:90px; }
  .website-site-header nav { display:none; }
  .website-preview-block { min-height:210px; padding:36px 22px; }
  .website-preview-application-layout,.website-preview-access { grid-template-columns:1fr; }
  .website-preview-access>p { grid-column:auto; }
  .website-preview-websiteSanxiHero { min-height:330px; padding:0; }
  .website-sanxi-hero-wordmark { inset:11% 1% 13%; }
  .website-sanxi-hero-wordmark text { font-size:290px; letter-spacing:-22px; }
  .website-preview-websiteHero,.website-preview-websiteVideoHero { min-height:390px; }
  .website-preview-websiteSplitStory { display:grid; grid-template-columns:1fr; gap:20px; }
  .website-preview-websiteSplitStory .website-preview-media,.website-preview-websiteSplitStory .website-preview-copy { grid-column:1; grid-row:auto; }
  .website-preview-websiteSplitStory .website-preview-media { min-height:230px; }
  .website-product-placeholders,.website-capability-placeholders,.website-metric-placeholders { grid-template-columns:1fr; }
  .website-site-footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:4px; padding:10px 18px; }
}

@media (prefers-reduced-motion:reduce) {
  .website-preview-spinner { animation:none; }
}