:root { color-scheme: light; --brand: #1E53BC; --ink: #151515; --muted: #666; --line: #E5E7EB; --white: #FFFFFF; font-family: "方正兰亭黑", "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--white); color: var(--ink); }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.workspace { min-height: 100dvh; display: flex; justify-content: center; align-items: stretch; padding: 0; }
.phone { position: relative; width: min(430px, 100%); height: 100dvh; overflow: hidden; background: var(--white); border: 0; border-radius: 0; box-shadow: none; }
.page-scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--white); }
.page-scroll::-webkit-scrollbar { display: none; }
.page-scroll.has-tabs { padding-bottom: calc(73px + env(safe-area-inset-bottom)); }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(73px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--white); z-index: 5; }
.tab { border: 0; background: var(--white); color: #707070; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; font-size: 11px; }
.tab.active { color: var(--brand); font-weight: 600; }
.tab-icon { font-size: 24px; height: 28px; line-height: 28px; font-family: Arial, sans-serif; }
.scene-fab { position: absolute; z-index: 7; left: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); color: var(--brand); background: var(--white); border: 1px solid var(--brand); border-radius: 999px; padding: 6px 10px; font-size: 11px; box-shadow: 0 3px 12px #0002; }
.scene-fab.no-tabs { bottom: calc(14px + env(safe-area-inset-bottom)); }
.overlay { position: absolute; inset: 0; z-index: 15; background: #1119; display: flex; justify-content: flex-end; }
.drawer { width: min(340px, 88%); height: 100%; background: var(--white); display: flex; flex-direction: column; box-shadow: -4px 0 20px #0002; }
.drawer-header { padding: 18px 16px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer-header h2 { margin: 0; font-size: 18px; }
.icon-btn { border: 0; background: transparent; color: var(--ink); font-size: 23px; padding: 0 5px; }
.drawer-scroll { overflow-y: auto; padding: 12px 16px 24px; }
.drawer h3 { font-size: 13px; color: var(--muted); margin: 20px 0 8px; }
.drawer h3:first-child { margin-top: 2px; }
.drawer-list { display: flex; flex-wrap: wrap; gap: 7px; }
.drawer-list button, .role-list button { border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); padding: 7px 10px; font-size: 12px; text-align: left; }
.drawer-list button.active, .role-list button.active { border-color: var(--brand); color: var(--brand); }
.role-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.drawer-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.full-btn { width: 100%; background: var(--brand); border: 1px solid var(--brand); color: var(--white); border-radius: 6px; padding: 12px; }
.synthetic { min-height: 100%; padding: max(18px, env(safe-area-inset-top)) 22px 42px; background: var(--white); }
.synthetic-header { display: flex; align-items: center; gap: 18px; padding: 20px 0 30px; font-weight: 600; }
.synthetic-header button { border: 0; background: transparent; font-size: 25px; padding: 0; color: var(--ink); }
.synthetic h1 { font-size: 28px; margin: 15px 0 15px; line-height: 1.3; }
.synthetic p { color: var(--muted); line-height: 1.75; margin-bottom: 28px; }
.synthetic-card { border: 1px solid var(--line); border-radius: 10px; padding: 22px; min-height: 180px; background: var(--white); }
.synthetic-card .mark { font-size: 40px; color: var(--brand); margin-bottom: 16px; }
.synthetic-actions { display: grid; gap: 12px; margin-top: 32px; }
.synthetic-actions button { width: 100%; border-radius: 7px; padding: 13px; border: 1px solid var(--brand); background: var(--brand); color: var(--white); }
.synthetic-actions button.secondary { color: var(--brand); background: var(--white); }
.toast { position: absolute; z-index: 20; left: 50%; bottom: calc(145px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: 84%; padding: 9px 14px; color: var(--white); background: #222; border-radius: 7px; font-size: 12px; white-space: nowrap; box-shadow: 0 6px 15px #0003; }
.intro { position: absolute; inset: 0; background: #111; color: var(--white); z-index: 30; }
.intro-poster { position: absolute; inset: 0; background-color:#111922; background-image: linear-gradient(180deg, #10182033 0%, #08132122 44%, #081321CC 100%), url('../image/home-slide-1.jpg'); background-size: 100% 100%, cover; background-position: center, center; background-repeat: no-repeat; }
.intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro.has-video .intro-copy { display: none; }
.intro-copy { position: absolute; left: 26px; right: 26px; bottom: calc(85px + env(safe-area-inset-bottom)); text-shadow: 0 2px 8px #0009; }
.intro-copy small { font-size: 12px; letter-spacing: .2em; }
.intro-copy h1 { font-size: 32px; margin: 12px 0 10px; line-height: 1.25; }
.intro-copy p { margin: 0 0 20px; font-size: 13px; line-height: 1.6; }
.intro-enter { border: 1px solid var(--white); background: var(--brand); color: var(--white); border-radius: 6px; padding: 11px 22px; }
.intro-skip { position: absolute; right: 17px; top: calc(20px + env(safe-area-inset-top)); color: var(--white); border: 1px solid #FFF9; background: #1117; border-radius: 999px; padding: 6px 12px; font-size: 12px; }
@media (max-width: 740px) { html, body { background: var(--white); } .workspace { display: block; padding: 0; } .phone { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; } }

/* 通用页面组件：文字和 mock 数据均可直接修改。 */
.web-scroll { background: #fff; }
.web-page { min-height: 100%; padding-bottom: 24px; background: #fff; }
.web-page h1, .web-page h2, .web-page p { margin-top: 0; }
.web-page h1 { font-size: 23px; line-height: 1.3; }
.web-page h2 { font-size: 17px; line-height: 1.4; margin-bottom: 12px; }
.web-page p { font-size: 14px; line-height: 1.65; }
.web-status { height: 41px; padding: 11px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; color: #111; font: 600 15px Arial, sans-serif; }
.web-status-icons { font-size: 13px; letter-spacing: 1px; }
.web-header { min-height: 56px; display: grid; grid-template-columns: 73px 1fr 73px; align-items: center; text-align: center; padding: 0 14px; }
.web-header strong { font-size: 19px; font-weight: 600; white-space: nowrap; }
.web-header > button { width: 42px; height: 42px; text-align: left; background: transparent; border: 0; color: #111; font: 35px Arial, sans-serif; line-height: 1; }
.web-capsule { font: 600 15px Arial, sans-serif; color: #111; white-space: nowrap; border: 1px solid #dedede; border-radius: 30px; padding: 6px 7px; }
.web-pad { padding: 4px 16px 26px; }
.web-card { background: #fff; border: 1px solid #e0e3e8; border-radius: 9px; padding: 16px; margin: 12px 16px; }
.web-pad > .web-card { margin: 12px 0; }
.web-card p:last-child { margin-bottom: 0; }
.web-divider { border-top: 1px solid #e5e7eb; margin: 14px 0; }
.web-section { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px 0; }
.web-section h2 { margin: 0; font-size: 18px; }
.web-pad > .web-section { padding: 13px 0 0; }
.web-muted { color: #777; font-size: 13px; }
.web-hint { margin: 8px 4px 2px; }
.web-blue { color: var(--brand); }
.web-large { font-size: 29px; }
.web-giant { font-size: 48px; line-height: 1.3; }
.web-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.web-between > span:last-child { text-align: right; }
.web-between strong { flex: 1; }
.web-person { display: flex; gap: 14px; align-items: center; }
.web-person > div:nth-child(2) { flex: 1; }
.web-person h1 { margin-bottom: 5px; }
.web-person small { color: var(--brand); font-size: 12px; }
.web-avatar { width: 66px; height: 66px; flex: 0 0 66px; border: 2px solid var(--brand); border-radius: 50%; display: grid; place-items: center; font-size: 23px; color: var(--brand); background: #fff; }
.designer-avatar { background-image: url('../image/我的-认证设计师中心.png'); background-size: 560% auto; background-position: 10% 12%; background-repeat: no-repeat; }
.web-link { border: 0; background: transparent; color: var(--brand); padding: 2px 0; white-space: nowrap; font-size: 13px; }
.web-link span { font: 19px Arial, sans-serif; vertical-align: -1px; }
.web-badge { color: #fff; background: var(--brand); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.web-progress { height: 5px; border-radius: 10px; background: #e5e7eb; margin: 12px 0; overflow: hidden; }
.web-progress span { display: block; height: 100%; background: var(--brand); }
.web-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 5px 0 14px; }
.web-metrics:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.web-metrics > div { display: grid; justify-items: center; gap: 4px; border-right: 1px solid #e5e7eb; }
.web-metrics > div:last-child { border-right: 0; }
.web-metrics b { font-size: 27px; }
.web-metrics span { font-size: 12px; color: #666; }
.web-btn { display: block; width: 100%; min-height: 44px; margin: 10px 0; padding: 10px 16px; border: 1px solid var(--brand); border-radius: 6px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 600; text-align: center; }
.web-btn.outline { color: var(--brand); background: #fff; }
.web-split { display: flex; align-items: center; justify-content: space-around; gap: 6px; margin-top: 12px; }
.web-split > * { flex: 1; text-align: center; }
.web-split .web-btn { margin: 0; }
.web-list-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1px solid #e5e7eb; background: #fff; color: #111; text-align: left; }
.web-list-item:last-child { border-bottom: 0; }
.web-list-item strong { display: block; font-size: 15px; }
.web-list-item small { display: block; margin-top: 3px; color: #777; font-size: 11px; }
.web-list-item b { font: 25px Arial, sans-serif; color: #777; }
.web-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; padding: 12px 0; text-align: center; font-size: 12px; color: #666; }
.web-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #ededed; font-size: 14px; }
.web-row:last-child { border-bottom: 0; }
.web-row > span { color: #777; }
.web-row strong { font-size: 14px; font-weight: 500; text-align: right; }
.web-field { display: block; margin: 12px 0 18px; }
.web-field:last-child { margin-bottom: 0; }
.web-field > span { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.web-field input, .web-field select, .web-field textarea, .web-search { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d7dbe1; border-radius: 6px; background: #fff; color: #151515; font: inherit; font-size: 14px; outline: 0; }
.web-field textarea { min-height: 76px; resize: vertical; }
.web-field input:focus, .web-field select:focus, .web-field textarea:focus, .web-search:focus { border-color: var(--brand); }
.web-big-title { font-size: 26px !important; margin: 12px 0 5px; }
.web-note { border: 1px solid var(--brand); color: var(--brand); border-radius: 6px; padding: 11px; margin: 15px 0; }
.web-check { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12px; color: #444; }
.web-check input { accent-color: var(--brand); width: 18px; height: 18px; }
.web-center { text-align: center; }
.web-result { text-align: center; padding: 58px 10px 36px; }
.web-result-mark { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 20px; border: 2px solid var(--brand); border-radius: 50%; color: var(--brand); font-size: 38px; }
.web-result p { color: #666; }
.web-subtitle { text-align: center; color: #777; margin: 3px 0 7px; }
.web-segment { display: flex; margin: 8px 16px 0; border-bottom: 1px solid #e5e7eb; }
.web-segment button { flex: 1; min-height: 44px; background: #fff; border: 0; color: #777; font-size: 15px; }
.web-segment button.active { color: var(--brand); border-bottom: 2px solid var(--brand); font-weight: 600; }
.web-card-click { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; }
.web-card-click h2 { margin: 10px 0 6px; }
.web-card-click p { margin: 4px 0; }
.web-picture { background-repeat: no-repeat; background-size: 100% auto; background-color: #fff; }
.event-photo { height: 139px; border-radius: 6px; background-size: 114% auto; background-position: center 22%; }
.event-1 { background-position: center 65%; }
.event-detail-photo { height: 150px; background-size: 114% auto; background-position: center 22%; }
.web-pill { color: var(--brand); border: 1px solid var(--brand); border-radius: 5px; padding: 3px 7px; font-size: 12px; }
.web-qr { display: block; width: 185px; height: 185px; margin: 18px auto 8px; border: 0; background-color: #fff; background-repeat: no-repeat; background-size: 300% auto; background-position: center 48%; }
.web-chips { display: flex; gap: 7px; overflow-x: auto; margin: 12px 0; }
.web-chips button { border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #777; padding: 7px 11px; white-space: nowrap; font-size: 12px; }
.web-chips button.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.web-goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.web-good { min-width: 0; padding: 8px; border: 1px solid #e0e3e8; border-radius: 8px; background: #fff; text-align: left; }
.web-good strong { display: block; margin-top: 7px; font-size: 14px; }
.web-good small { font-size: 11px; color: #777; }
.web-good > div:last-child { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; margin-top: 8px; font-size: 12px; }
.web-good > div:last-child span { color: #888; font-size: 10px; }
.web-good-photo { height: 132px; background-repeat: no-repeat; background-size: 245% auto; border-radius: 5px; background-color: #f3f3f3; }
.photo-0 { background-position: 10% 44%; }
.photo-1 { background-position: 90% 44%; }
.photo-2 { background-position: 10% 84%; }
.photo-3 { background-position: 90% 84%; }
.web-good-hero { height: 285px; margin: 8px 0 18px; background-size: 245% auto; }
.web-levels { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.web-levels .web-card { flex: 0 0 72%; margin: 10px 0; scroll-snap-align: start; }

/* 首页、案例、产品及普通活动：页面文字与控件均由 HTML 渲染。 */
.public-pad { padding: 6px 16px 32px; }
.public-photo { display: block; background-color: #eef1f5; background-repeat: no-repeat; overflow: hidden; }
.public-home-hero { position: relative; height: min(680px, calc(100dvh - 73px)); min-height: 540px; overflow: hidden; color: #fff; background: #465361; }
.public-home-photo { position: absolute; inset: 0; background-image: url('../image/首页完整长图.png'); background-repeat: no-repeat; background-size: 160% auto; background-position: center top; transition: transform .4s ease; }
.public-home-photo.slide-1 { transform: scale(1.09) translateX(-3%); }
.public-home-photo.slide-2 { transform: scale(1.13) translateX(3%); }
.public-home-shade { position: absolute; inset: 0; background: linear-gradient(#0007 0%, #0001 30%, #00111a23 54%, #061827cc 100%); }
.public-home-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; font-size: 15px; }
.public-home-top strong { font-size: 18px; letter-spacing: .18em; }
.public-home-copy { position: absolute; z-index: 1; bottom: 35px; left: 25px; right: 25px; text-align: center; text-shadow: 0 2px 10px #000b; }
.public-home-copy h1 { font-size: 34px; letter-spacing: .1em; line-height: 1.34; margin: 0 0 12px; }
.public-home-copy p { font-size: 12px; letter-spacing: .12em; }
.public-home-buttons { display: flex; gap: 10px; margin-top: 17px; }
.public-home-buttons .web-btn { background: #fff; border-color: #fff; color: var(--brand); margin: 0; }
.public-home-buttons .web-btn.outline { background: #fff2; color: #fff; }
.public-home-dots { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 18px 0 7px; font-size: 12px; }
.public-home-dots button, .public-explore { border: 0; background: none; color: inherit; }
.public-home-dots button { font-size: 24px; }
.public-explore { display: flex; flex-direction: column; align-items: center; width: 100%; font-size: 24px; }
.public-explore span { font-size: 11px; letter-spacing: .1em; }
.public-home-content { padding: 18px 16px 8px; }
.public-join { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 66px; padding: 14px 17px; background: var(--brand); border: 0; border-radius: 7px; color: #fff; font-size: 15px; text-align: left; }
.public-join b { font-size: 28px; font-weight: 400; }
.public-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin: 31px 0 14px; }
.public-section-heading small { color: var(--brand); font-size: 11px; letter-spacing: .18em; }
.public-section-heading h2 { font-size: 22px; margin: 4px 0; }
.public-section-heading p { color: #777; font-size: 12px; margin: 0; }
.public-home-cases, .public-case-grid, .public-product-grid, .public-related-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.public-home-case, .public-related-products button { padding: 0; border: 0; background: #fff; color: var(--ink); text-align: left; }
.public-home-case strong, .public-related-products strong { display: block; margin-top: 8px; font-size: 14px; }
.public-home-case small, .public-related-products small { display: block; color: #777; font-size: 11px; }
.public-salon { width: 100%; padding: 0; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; text-align: left; overflow: hidden; }
.public-salon span { display: grid; gap: 5px; padding: 12px; }
.public-salon strong { font-size: 16px; }
.public-salon small { color: #777; }
.public-salon em { font-style: normal; color: var(--brand); font-size: 12px; }
.home-salon-photo { height: 155px; background-size: 112% auto; background-position: center 22%; }
.public-next { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: #666; }
.public-theme { margin: 18px 0 0; text-align: center; font-size: 22px !important; line-height: 1.7 !important; }
.public-theme img { display: block; width: min(72%, 260px); margin: 0 auto; height: auto; }
.public-top-tabs { display: flex; overflow-x: auto; gap: 16px; padding: 10px 16px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; scrollbar-width: none; }
.public-top-tabs button { flex: 0 0 auto; padding: 0 0 8px; border: 0; background: none; color: #666; font-size: 13px; }
.public-top-tabs button.active { color: var(--brand); font-weight: 600; border-bottom: 2px solid var(--brand); }
.public-search { display: flex; align-items: center; height: 43px; margin: 10px 0; background: #f5f6f8; border-radius: 5px; }
.public-search input { flex: 1; min-width: 0; padding: 9px 12px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.public-search button { width: 42px; border: 0; background: none; color: var(--brand); font-size: 27px; }
.public-filter-bar { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.public-filter-bar button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 7px 8px; color: #555; font-size: 11px; }
.public-active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.public-active-filters button { border: 1px solid var(--brand); background: #f0f5ff; color: var(--brand); border-radius: 4px; padding: 5px 7px; font-size: 11px; }
.public-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
.public-list-heading strong { font-size: 16px; }
.public-list-heading span { flex: 1; color: #888; font-size: 11px; }
.public-list-heading > div { display: flex; }
.public-list-heading > div button { border: 0; background: none; color: #777; font-size: 20px; }
.public-list-heading > div button.active { color: var(--brand); }
.public-case-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.public-card-main { display: block; width: 100%; border: 0; padding: 0; background: #fff; color: var(--ink); text-align: left; }
.public-case-card .public-card-main span { display: grid; gap: 5px; padding: 9px; }
.public-case-card strong { font-size: 13px; line-height: 1.4; }
.public-case-card small { font-size: 10px; color: #777; }
.public-save { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fffe; color: var(--brand); font-size: 20px; }
.public-save.active { color: #d74f58; }
.public-case-grid.as-list { grid-template-columns: 1fr; }
.public-case-grid.as-list .public-card-main { display: flex; }
.public-case-grid.as-list .case-photo { flex: 0 0 43%; height: 116px; }
.case-photo { height: 143px; background-size: 220% auto; }
.case-photo-0 { background-position: 5% 49%; }
.case-photo-1 { background-position: 95% 49%; }
.case-photo-2 { background-position: 5% 85%; }
.case-photo-3 { background-position: 95% 85%; }
.public-empty { min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.public-empty-icon { width: 66px; height: 66px; border: 2px solid #bdd0f5; color: var(--brand); border-radius: 50%; display: grid; place-items: center; font-size: 37px; margin-bottom: 20px; }
.public-empty h2 { font-size: 18px; margin: 0 0 8px; }
.public-empty p { color: #777; font-size: 13px; }
.public-empty .web-btn { width: auto; min-width: 142px; padding: 10px 20px; }
.public-filter-backdrop { position: absolute; inset: 0; background: #0008; z-index: 8; }
.public-filter-sheet { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 83%; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; }
.public-filter-sheet-top { display: flex; justify-content: space-between; align-items: center; }
.public-filter-sheet-top h2 { margin: 0; }
.public-filter-sheet-top button { border: 0; background: none; font-size: 25px; }
.public-filter-sheet section { margin: 18px 0; }
.public-filter-sheet h3 { font-size: 14px; margin: 0 0 10px; }
.public-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.public-options button { min-height: 35px; padding: 4px; background: #f5f6f8; border: 1px solid transparent; border-radius: 4px; font-size: 11px; }
.public-options button.active { background: #eef4ff; border-color: var(--brand); color: var(--brand); }
.public-filter-actions { display: flex; gap: 10px; }
.public-filter-actions .web-btn { margin: 0; }
.public-detail-hero { height: 290px; background-size: 210% auto; }
.case-detail-secondary { height: 180px; background-size: 120% auto; background-position: center 55%; margin-top: 15px; }
.public-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #777; font-size: 11px; }
.public-meta span:first-child { color: var(--brand); }
.public-meta time { margin-left: auto; }
.public-related-products { margin: 12px 0; }
.public-related-products .public-photo { height: 105px; }
.public-detail-bar { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line); background: #fff; }
.public-detail-bar button { flex: 1; min-height: 44px; margin: 0; }
.public-detail-bar > button:first-child { border: 1px solid var(--brand); border-radius: 5px; background: #fff; color: var(--brand); }
.public-poster-status { text-align: center; font-size: 20px; }
.public-poster-card { padding: 0; overflow: hidden; }
.poster-photo { height: 360px; background-size: 205% auto; }
.public-poster-copy { padding: 17px; }
.public-poster-copy p { color: #666; }
.public-poster-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.public-qr-slot { width: 54px; height: 54px; display: grid; place-items: center; border: 1px dashed #bbb; font-size: 9px; color: #777; }
.public-template-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.public-template-row button { padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.public-template-row button.active { border-color: var(--brand); }
.public-template-row .public-photo { height: 132px; }
.public-template-row small { display: block; margin: 5px 0; font-size: 11px; }
.public-product-tabs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.public-product-tabs button { flex: 0 0 auto; padding: 8px 11px; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: #666; font-size: 12px; }
.public-product-tabs button.active { border-color: var(--brand); color: var(--brand); }
.public-product-grid button { padding: 0 0 9px; background: #fff; border: 1px solid var(--line); border-radius: 5px; text-align: left; overflow: hidden; }
.public-product-grid strong, .public-product-grid small { display: block; padding: 0 9px; }
.public-product-grid strong { margin: 8px 0 4px; font-size: 14px; }
.public-product-grid small { color: #777; font-size: 11px; }
.product-photo { height: 145px; background-size: 245% auto; }
.product-photo-0 { background-position: 5% 29%; }
.product-photo-1 { background-position: 95% 29%; }
.product-photo-2 { background-position: 5% 58%; }
.product-photo-3 { background-position: 95% 58%; }
.public-product-results button { display: flex; width: 100%; min-height: 118px; padding: 0; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); overflow: hidden; text-align: left; }
.public-product-results .public-photo { flex: 0 0 42%; height: 118px; }
.public-product-results span { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.public-product-results strong { font-size: 15px; }
.public-product-results small { color: #777; }
.public-product-results em { color: var(--brand); font-size: 12px; font-style: normal; }
.public-product-banner { width: 100%; margin-top: 22px; padding: 0; border: 0; background: var(--brand); color: #fff; text-align: left; }
.product-banner-photo { height: 160px; background-size: 110% auto; background-position: center 75%; }
.public-product-banner span { display: grid; gap: 6px; padding: 13px; }
.public-product-banner small { font-size: 11px; }
.public-product-hero { background-size: 195% auto; }
.public-media-switch, .public-product-sections { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 17px; }
.public-media-switch button, .public-product-sections button { padding: 12px 0; background: none; border: 0; color: #777; }
.public-media-switch button.active, .public-product-sections button.active { color: var(--brand); border-bottom: 2px solid var(--brand); }
.public-feature { display: flex; align-items: center; gap: 12px; }
.public-feature > div:first-child { flex: 1; }
.public-feature .public-photo { flex: 0 0 40%; height: 116px; }
.public-spec-photo { height: 150px; background-size: 170% auto; }
.public-video-poster { position: relative; height: 340px; background: #111; }
.public-video-poster .public-photo { height: 100%; filter: brightness(.65); background-size: 180% auto; }
.public-video-poster button { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #ffffff33; font-size: 25px; }
.common-event-photo { height: 150px; border-radius: 5px; background-size: 115% auto; background-position: center 23%; }
.common-event-1 { background-position: center 65%; }
.common-detail-photo { height: 220px; background-size: 115% auto; background-position: center 20%; }
.common-detail-secondary { height: 130px; background-size: 115% auto; background-position: center 55%; }
/* 只取设计图中的照片区域，避开原图自带文案。 */
.public-home-photo { background-position: center -90px; }
.case-photo { background-size: 257% auto; }
.case-photo-0, .case-photo-1 { background-position-y: 48%; }
.case-photo-2, .case-photo-3 { background-position-y: 83%; }
.public-detail-hero.case-photo { height: 270px; background-size: 240% auto; }
.poster-photo.case-photo { height: 260px; background-size: 257% auto; }
.product-photo { height: 130px; }
.public-product-hero.product-photo { height: 250px; background-size: 215% auto; }
.public-feature .product-photo { height: 104px; }
.public-video-poster .product-photo { height: 100%; }
.public-product-grid .product-photo, .public-product-results .product-photo { height: 115px; }
.product-banner-photo { background-size: 115% auto; background-position: center 15%; }
.case-detail-secondary { background-position: center 76%; }
.common-event-photo { background-size: 200% auto; background-position: center 31%; }
.common-event-1 { background-position: center 68%; }
.common-detail-photo { background-size: 200% auto; background-position: center 14%; }
.common-detail-secondary { background-position: center 63%; }
.common-event-1 { background-size: 280% auto; background-position: 8% 65%; }
.common-detail-photo { background-position: 60% 14%; }