* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: #102a2f;
  background: #eef3f2;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
.login-view { display: grid; min-height: 100vh; place-items: center; padding: 18px; background: #eef3f2; }
.login-panel { display: grid; width: min(100%,420px); gap: 16px; padding: 22px; border: 1px solid #cfdddd; border-radius: 8px; background: #fff; box-shadow: 0 12px 36px rgba(18,49,53,.10); }
.login-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e1ebeb; }
.login-logo { display: block; width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.login-brand p { margin: 0 0 2px; color: #5a7176; font-size: 12px; font-weight: 700; }
.login-brand strong { display: block; color: #102a2f; font-size: 18px; }
.captcha-puzzle { display: grid; gap: 8px; }
.captcha-stage { position: relative; width: min(100%,320px); aspect-ratio: 2 / 1; margin: 0 auto; overflow: hidden; border: 1px solid #95bfc2; border-radius: 8px; background: #d9f0e8; }
.captcha-background { display: block; width: 100%; height: 100%; user-select: none; }
.captcha-piece { position: absolute; top: 33.75%; left: 5%; display: block; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 2px rgba(18,49,53,.25)); transition: left .08s linear; }
.captcha-track { position: relative; height: 42px; margin: 0 16px; overflow: hidden; border: 1px solid #b9cdcf; border-radius: 999px; background: #edf5f4; touch-action: none; user-select: none; }
.captcha-track-progress { position: absolute; top: 0; left: 0; width: 0; height: 100%; border-radius: 999px; background: #d9f0e8; pointer-events: none; transition: width .08s linear; }
.captcha-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #5a7176; font-size: 12px; font-weight: 800; pointer-events: none; transition: opacity .16s ease; }
.captcha-hint.is-hidden { opacity: 0; }
.captcha-slider { position: absolute; top: -1px; left: 0; display: grid; min-width: 0; height: 42px; place-items: center; border: 1px solid #007a83; border-radius: 999px; padding: 0; color: #fff; background: #007a83; font-size: 18px; line-height: 1; touch-action: none; user-select: none; transition: background-color .16s ease, left .08s linear; }
.captcha-slider:hover, .captcha-slider.is-dragging { background: #00616b; }
.captcha-slider:focus-visible { outline: 3px solid rgba(0,122,131,.24); outline-offset: 2px; }
.captcha-refresh-row { display: flex; justify-content: flex-end; }
.login-status { min-height: 20px; color: #963333; font-size: 13px; font-weight: 800; line-height: 1.5; text-align: center; }
.admin-shell { display: grid; min-height: 100vh; grid-template-columns: 232px minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 18px; color: #d9e8e7; background: #123135; }
.brand-block { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; color: #123135; background: #d9f0e8; font-size: 20px; font-weight: 900; }
.brand-block p { margin: 0 0 2px; color: #9fb8b8; font-size: 12px; }
.brand-block strong { display: block; color: #fff; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.admin-nav { display: grid; gap: 8px; margin-top: 18px; }
.admin-nav-primary, .admin-nav-utility { display: grid; gap: 8px; }
.admin-nav-utility { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.admin-nav a, .nav-button { display: flex; min-height: 44px; align-items: center; padding: 8px 12px; border: 0; border-radius: 8px; color: #d9e8e7; background: transparent; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: left; }
.admin-nav a:hover, .admin-nav a.active, .nav-button:hover { color: #123135; background: #d9f0e8; }
.admin-nav a:focus-visible, .nav-button:focus-visible, .segmented button:focus-visible { outline: 3px solid rgba(121,211,218,.8); outline-offset: 2px; }
.admin-workspace { min-width: 0; padding: 18px; }
.workspace-header, .editor-panel, .preview-panel { border: 1px solid #cfdddd; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,49,53,.06); }
.workspace-header { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 14px 18px; }
.workspace-heading { display: grid; width: 100%; min-width: 0; gap: 8px; }
.summary-readonly-tabs { display: grid; min-width: 0; gap: 8px; }
.summary-kind-tabs { border-color: #a9ced0; background: #eaf5f3; }
.summary-kind-tabs button { min-width: 92px; }
.screen-reader-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-icon { display: inline-grid; min-width: 22px; height: 22px; place-items: center; border-radius: 6px; color: #00616b; background: #e5f3f1; font-size: 10px; font-weight: 900; line-height: 1; }
.app-icon.large { min-width: 28px; height: 28px; font-size: 11px; }
.editor-grid { display: grid; grid-template-columns: 430px minmax(0,1fr); gap: 16px; margin-top: 16px; }
.editor-panel, .preview-panel { min-width: 0; overflow: hidden; }
.page-tabs { width: max-content; max-width: 100%; margin-top: 0; overflow-x: auto; }
.panel-header, .preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e1ebeb; }
.panel-header h2, .preview-toolbar h2 { margin: 0; font-size: 16px; line-height: 1.3; }
.panel-body { display: grid; gap: 14px; padding: 14px; }
.field { display: grid; gap: 7px; }
.field span { color: #233f45; font-size: 13px; font-weight: 900; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #c8dcde; border-radius: 8px; outline: none; color: #172f35; background: #fff; }
.field input, .field select { height: 40px; padding: 0 11px; }
.field textarea { padding: 10px 11px; line-height: 1.65; }
.field input:focus, .field select:focus, .field textarea:focus, .paste-zone:focus { border-color: #007a83; box-shadow: 0 0 0 3px rgba(0,122,131,.1); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.title-input { min-height: 76px; resize: vertical; }
.cover-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.file-button { min-height: 40px; }
.field .file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.summary-input { min-height: 86px; resize: vertical; }
.paste-zone { display: grid; min-height: 126px; place-items: center; gap: 6px; padding: 16px; border: 1px dashed #95bfc2; border-radius: 8px; outline: none; color: #4c676c; background: #f7fbfb; text-align: center; }
.paste-zone.awaiting-paste { border-color: #c98220; color: #6b4b16; background: #fff8e8; box-shadow: inset 0 0 0 1px rgba(201,130,32,.2); }
.paste-zone strong { color: #102a2f; font-size: 15px; }
.paste-zone.awaiting-paste strong { color: #5f3d08; }
.paste-zone span { font-size: 13px; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.button-row.single { grid-template-columns: 1fr; }
.button-row.three { grid-template-columns: 1fr 1fr 1fr; }
.action-row { margin-top: -2px; }
.publish-result { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: start; min-height: 58px; padding: 12px; border: 1px solid #c8dcde; border-radius: 8px; color: #38565c; background: #f7fbfb; line-height: 1.55; }
.publish-result-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 999px; color: #38565c; background: #e5f3f1; font-size: 12px; font-weight: 900; }
.publish-result-body { min-width: 0; }
.publish-result strong { display: block; color: #102a2f; font-size: 14px; line-height: 1.35; }
.publish-result p { margin: 3px 0 0; color: #526a70; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.publish-result a { display: inline-flex; margin-top: 8px; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 8px; color: #fff; background: #007a83; font-size: 12px; font-weight: 900; text-decoration: none; }
.publish-result.success { border-color: #90d1c1; background: #f0faf7; }
.publish-result.success .publish-result-icon { color: #fff; background: #007a83; }
.publish-result.error { border-color: #e2b5b5; background: #fff7f7; }
.publish-result.error .publish-result-icon { color: #fff; background: #b42323; }
.publish-result.error strong { color: #963333; }
.primary-button, .secondary-button, .danger-button, .segmented button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; padding: 0 12px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.primary-button { border: 1px solid #007a83; color: #fff; background: #007a83; }
.primary-button:hover { background: #00616b; }
.secondary-button { border: 1px solid #c8dcde; color: #38565c; background: #fff; }
.secondary-button:hover { border-color: #007a83; color: #00616b; }
.secondary-button.compact { min-height: 34px; }
.danger-button { border: 1px solid #e2c7c7; color: #963333; background: #fff; }
.danger-button:hover { border-color: #b42323; color: #b42323; }
.danger-button.compact { min-height: 34px; }
.full-button { width: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 10px; border: 1px solid #e1ebeb; border-radius: 8px; background: #f8fbfb; }
.stats-grid.four { grid-template-columns: repeat(4,1fr); }
.stats-grid strong, .stats-grid span { display: block; }
.stats-grid strong { color: #102a2f; font-size: 15px; }
.stats-grid span { margin-top: 2px; color: #5a7176; font-size: 12px; }
.danger-text { color: #b42323 !important; }
.preview-toolbar { flex-wrap: wrap; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #c8dcde; border-radius: 8px; background: #f7fbfb; }
.segmented button { min-height: 30px; border: 0; color: #526a70; background: transparent; }
.segmented button:hover, .segmented button.active { color: #00616b; background: #fff; box-shadow: 0 1px 5px rgba(18,49,53,.08); }
.preview-stage { min-height: 720px; padding: 18px; background: #edf2f2; }
.article-preview { width: min(100%,900px); min-height: 620px; margin: 0 auto; padding: 26px; border: 1px solid #d5e2e2; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,49,53,.08); }
.article-preview.mobile { width: min(100%,390px); padding: 16px; }
.cover-image { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
.article-preview-header { padding-bottom: 20px; border-bottom: 1px solid #e2ebeb; margin-bottom: 22px; }
.article-preview-header p { margin: 0 0 8px; color: #007a83; font-size: 13px; font-weight: 900; }
.article-preview-header h1 { margin: 0; color: #102a2f; font-size: 28px; line-height: 1.35; }
.article-preview-header h1, .article-row-title { white-space: pre-line; }
.article-preview.mobile .article-preview-header h1 { font-size: 22px; }
.summary { margin-top: 12px; padding: 12px 14px; border-radius: 8px; color: #405b61; background: #f4f8f8; font-size: 14px; line-height: 1.8; }
.article-html-preview { color: initial; font-family: initial; line-height: initial; }
.article-html-preview, .article-html-preview * { max-width: 100%; box-sizing: border-box; }
.article-html-preview img, .article-html-preview video { max-width: 100%; height: auto; }
.article-html-preview table { width: 100%; border-collapse: collapse; }
.article-html-preview a { color: inherit; }
.list-view { margin-top: 16px; border: 1px solid #cfdddd; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,49,53,.06); overflow: hidden; }
.faq-view, .user-view, .customer-view, .catalog-view, .visibility-view, .visibility-visual-view, .template-preview-view, .linked-view { margin-top: 16px; border: 1px solid #cfdddd; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,49,53,.06); overflow: hidden; }
.linked-management-content { display: grid; gap: 16px; padding: 16px; }
.linked-management-state { border: 1px dashed #95bfc2; border-radius: 8px; padding: 28px 16px; color: #38565c; background: #f7fbfb; text-align: center; }
.linked-management-state strong { display: block; color: #102a2f; font-size: 16px; line-height: 1.5; }
.linked-management-state p { max-width: 720px; margin: 8px auto 0; color: #5a7176; font-size: 13px; line-height: 1.7; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid #e1ebeb; }
.list-toolbar h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; }
.list-toolbar p { margin: 0; color: #5a7176; font-size: 13px; }
.access-notice { max-width: 520px; color: #8a5a13 !important; }
.article-list { display: grid; gap: 0; }
.article-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e7eeee; }
.article-row:last-child { border-bottom: 0; }
.article-row-title { color: #102a2f; font-size: 16px; font-weight: 900; line-height: 1.45; }
.article-row-meta { margin-top: 4px; color: #007a83; font-size: 12px; font-weight: 800; line-height: 1.5; }
.article-row-summary { margin-top: 5px; color: #526a70; font-size: 13px; line-height: 1.6; }
.article-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.empty-list { padding: 28px 16px; color: #5a7176; text-align: center; font-size: 14px; }
.faq-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 16px; }
.faq-markdown-field { min-width: 0; }
.faq-markdown-input { min-height: 640px; resize: vertical; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.7; }
.faq-preview-panel { min-width: 0; overflow: hidden; border: 1px solid #e1ebeb; border-radius: 8px; background: #fbfdfd; }
.faq-preview { display: grid; gap: 10px; max-height: 698px; overflow: auto; padding: 14px; }
.faq-preview-item { border: 1px solid #d8e6e6; border-radius: 8px; background: #fff; padding: 12px; }
.faq-preview-item strong { display: block; color: #102a2f; font-size: 14px; line-height: 1.45; }
.faq-preview-item p { margin: 7px 0 0; color: #526a70; font-size: 13px; line-height: 1.7; white-space: pre-line; }
.faq-preview-item span { display: inline-flex; margin-bottom: 6px; align-items: center; min-height: 22px; border-radius: 999px; padding: 0 8px; color: #00616b; background: #e5f3f1; font-size: 11px; font-weight: 900; }
.faq-result { margin: 0 16px 16px; }
.management-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.72fr); gap: 16px; padding: 16px; }
.record-list-panel, .record-editor-panel { min-width: 0; overflow: hidden; border: 1px solid #e1ebeb; border-radius: 8px; background: #fbfdfd; }
.record-list { display: grid; gap: 10px; max-height: 720px; overflow: auto; padding: 14px; }
#paperList { max-height: none; overflow: visible; }
.record-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: start; border: 1px solid #d8e6e6; border-radius: 8px; background: #fff; padding: 12px; }
.record-row.active { border-color: #007a83; box-shadow: 0 0 0 3px rgba(0,122,131,.08); }
.record-row-main { min-width: 0; }
.record-row-title { color: #102a2f; font-size: 15px; font-weight: 900; line-height: 1.45; overflow-wrap: anywhere; }
.record-row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; color: #5a7176; font-size: 12px; font-weight: 800; }
.record-badge { display: inline-flex; min-height: 22px; align-items: center; border-radius: 999px; padding: 0 8px; color: #00616b; background: #e5f3f1; font-size: 11px; font-weight: 900; }
.record-badge.operator { color: #5c4b00; background: #fff1bf; }
.record-row-summary { margin-top: 7px; color: #526a70; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.record-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.record-textarea { min-height: 260px; resize: vertical; }
.paper-markdown-input { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.customer-table-wrap { max-height: 70vh; overflow: auto; border-top: 1px solid #e1ebeb; background: #fff; }
.customer-table-wrap:focus-visible { outline: 2px solid rgba(0,122,131,.45); outline-offset: -2px; }
.customer-table { width: 100%; min-width: 1880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #102a2f; font-size: 12px; }
.customer-table th, .customer-table td { height: 44px; padding: 9px 10px; border-right: 1px solid #dfe9e9; border-bottom: 1px solid #dfe9e9; text-align: left; vertical-align: middle; }
.customer-table th { position: sticky; top: 0; z-index: 2; color: #38565c; background: #eef5f4; font-size: 11px; font-weight: 900; white-space: nowrap; }
.customer-table th:first-child, .customer-table td:first-child { position: sticky; left: 0; z-index: 1; background: #f8fbfb; }
.customer-table th:first-child { z-index: 3; background: #e8f2f1; }
.customer-table th:last-child, .customer-table td:last-child { position: sticky; right: 0; z-index: 1; border-right: 0; background: #f8fbfb; }
.customer-table th:last-child { z-index: 3; background: #e8f2f1; }
.customer-table tbody tr:hover td { background: #f1f8f7; }
.customer-table tbody tr:hover td:first-child, .customer-table tbody tr:hover td:last-child { background: #eaf5f3; }
.customer-table tbody tr:last-child td { border-bottom: 0; }
.customer-table th:nth-child(1), .customer-table td:nth-child(1) { width: 142px; white-space: nowrap; }
.customer-table th:nth-child(2), .customer-table td:nth-child(2) { width: 108px; }
.customer-table th:nth-child(3), .customer-table td:nth-child(3) { width: 110px; font-weight: 900; }
.customer-table th:nth-child(4), .customer-table td:nth-child(4) { width: 132px; }
.customer-table th:nth-child(5), .customer-table td:nth-child(5) { width: 170px; }
.customer-table th:nth-child(6), .customer-table td:nth-child(6) { width: 240px; }
.customer-table th:nth-child(7), .customer-table td:nth-child(7) { width: 190px; }
.customer-table th:nth-child(8), .customer-table td:nth-child(8) { width: 245px; }
.customer-table th:nth-child(9), .customer-table td:nth-child(9) { width: 230px; }
.customer-table th:nth-child(10), .customer-table td:nth-child(10) { width: 250px; }
.customer-table th:nth-child(11), .customer-table td:nth-child(11) { width: 132px; }
.customer-table-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-table-code { color: #526a70; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; }
.customer-table-demand { color: #38565c; }
.customer-table-actions { display: flex; align-items: center; gap: 6px; }
.customer-table-actions button { min-width: 52px; }
.customer-detail-dialog { width: min(calc(100% - 32px),720px); }
.customer-detail-body { max-height: min(68vh,680px); overflow-y: auto; }
.customer-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
.customer-detail-grid > div { min-width: 0; border: 1px solid #e1ebeb; border-radius: 8px; padding: 12px; background: #f8fbfb; }
.customer-detail-grid .customer-detail-wide { grid-column: 1 / -1; }
.customer-detail-grid dt { color: #5a7176; font-size: 11px; font-weight: 900; line-height: 1.5; }
.customer-detail-grid dd { margin: 5px 0 0; color: #102a2f; font-size: 14px; font-weight: 800; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.customer-detail-grid a { color: #007a83; text-decoration: underline; text-underline-offset: 3px; }
.customer-detail-message { min-height: 48px; }
.customer-detail-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px !important; font-weight: 600 !important; }
.catalog-summary-body { display: grid; gap: 16px; padding: 16px; }
.catalog-state { border: 1px dashed #95bfc2; border-radius: 8px; padding: 28px 16px; color: #38565c; background: #f7fbfb; text-align: center; }
.catalog-state strong { display: block; color: #102a2f; font-size: 16px; }
.catalog-state p { margin: 8px 0 0; color: #5a7176; font-size: 13px; line-height: 1.7; }
.catalog-snapshot-meta { border: 1px solid #b9d9d7; border-radius: 8px; padding: 12px 14px; color: #275159; background: #f2f9f8; }
.catalog-snapshot-meta.stale { border-color: #e4c36d; color: #705719; background: #fff9e9; }
.catalog-snapshot-meta strong { display: block; color: inherit; font-size: 14px; line-height: 1.5; }
.catalog-snapshot-meta p { margin: 5px 0 0; color: inherit; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.catalog-stat-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.catalog-stat-card { min-width: 0; border: 1px solid #d8e6e6; border-radius: 8px; background: #f8fbfb; padding: 12px; }
.catalog-stat-card span { display: block; color: #5a7176; font-size: 12px; font-weight: 900; line-height: 1.4; }
.catalog-stat-card strong { display: block; margin-top: 6px; color: #102a2f; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.catalog-panel { min-width: 0; overflow: hidden; border: 1px solid #e1ebeb; border-radius: 8px; background: #fbfdfd; }
.catalog-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e1ebeb; }
.catalog-panel-header h3 { margin: 0; color: #102a2f; font-size: 16px; line-height: 1.35; }
.catalog-panel-header span { color: #5a7176; font-size: 12px; font-weight: 900; }
.catalog-panel-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; }
.catalog-filter { display: inline-flex; min-width: 0; align-items: center; gap: 8px; color: #38565c; font-size: 12px; font-weight: 900; }
.catalog-filter select { min-height: 44px; max-width: 220px; border: 1px solid #cfe0e1; border-radius: 8px; background: #fff; color: #102a2f; font: inherit; padding: 0 34px 0 12px; }
.catalog-table-wrap { overflow-x: auto; }
.catalog-table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; }
.catalog-table-wide { min-width: 1180px; }
.catalog-table th, .catalog-table td { border-bottom: 1px solid #e7eeee; padding: 10px 12px; text-align: left; vertical-align: top; font-size: 13px; line-height: 1.55; }
.catalog-table th { color: #233f45; background: #f3f8f8; font-weight: 900; white-space: nowrap; }
.catalog-table td { color: #38565c; }
.catalog-table td:first-child { color: #102a2f; font-weight: 900; }
.catalog-table small { color: #7b9297; font-size: 11px; font-weight: 800; }
.catalog-table a { color: #00616b; font-weight: 900; text-decoration: none; }
.catalog-table a:hover { text-decoration: underline; }
.catalog-visibility-quickbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #e1ebeb; background: #f7fbfb; }
.catalog-visibility-quickbar strong { display: block; color: #102a2f; font-size: 14px; }
.catalog-visibility-quickbar p { margin: 4px 0 0; color: #5a7176; font-size: 12px; line-height: 1.5; }
.catalog-visibility-quick-actions { display: flex; flex: 0 0 auto; align-items: end; gap: 8px; }
.catalog-visibility-quick-actions label { display: grid; gap: 4px; color: #38565c; font-size: 11px; font-weight: 900; }
.catalog-visibility-quick-actions select { min-height: 36px; max-width: 220px; border: 1px solid #cfe0e1; border-radius: 8px; background: #fff; color: #102a2f; padding: 0 32px 0 10px; font: inherit; }
.catalog-visibility-cell { display: grid; justify-items: start; gap: 2px; min-width: 118px; }
.catalog-visibility-switch { position: relative; display: inline-flex; width: 44px; min-height: 36px; align-items: center; cursor: pointer; }
.catalog-visibility-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.catalog-visibility-switch input:checked + .visibility-switch-track { border-color: #007a83; background: #007a83; }
.catalog-visibility-switch input:checked + .visibility-switch-track::after { transform: translateX(18px); }
.catalog-visibility-switch input:focus-visible + .visibility-switch-track { outline: 3px solid rgba(0,122,131,.2); outline-offset: 2px; }
.catalog-visibility-switch input:disabled + .visibility-switch-track { cursor: not-allowed; opacity: .5; }
.catalog-issue-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px; }
.catalog-issue-group { min-width: 0; border: 1px solid #d8e6e6; border-radius: 8px; background: #fff; padding: 12px; }
.catalog-issue-group.error { border-color: #e2b5b5; background: #fff8f8; }
.catalog-issue-group.warning { border-color: #ead28e; background: #fffaf0; }
.catalog-issue-group h4 { margin: 0 0 10px; color: #102a2f; font-size: 14px; line-height: 1.4; }
.catalog-issue-group article { border-top: 1px solid rgba(18,49,53,.08); padding-top: 10px; margin-top: 10px; }
.catalog-issue-group article:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.catalog-issue-group strong { display: block; color: #102a2f; font-size: 13px; line-height: 1.5; }
.catalog-issue-group p { margin: 5px 0 0; color: #526a70; font-size: 12px; line-height: 1.6; }
.catalog-issue-group span { display: block; margin-top: 5px; color: #7b9297; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.catalog-muted { margin: 0; color: #7b9297; font-size: 13px; }
.visibility-workbench { display: grid; grid-template-columns: minmax(250px,310px) minmax(0,1fr); gap: 16px; padding: 16px; background: #f7fbfb; }
.visibility-profile-panel, .visibility-editor-panel { min-width: 0; border: 1px solid #d8e6e6; border-radius: 8px; background: #fff; }
.visibility-profile-panel { align-self: start; display: grid; gap: 16px; padding: 16px; }
.visibility-panel-heading, .visibility-title-line, .visibility-editor-header, .visibility-tree-header, .visibility-node-title-line, .visibility-node-details { display: flex; align-items: center; }
.visibility-panel-heading, .visibility-editor-header, .visibility-tree-header { justify-content: space-between; gap: 14px; }
.visibility-panel-heading h3, .visibility-editor-header h3, .visibility-tree-header h3 { margin: 0; color: #102a2f; font-size: 16px; line-height: 1.4; }
.visibility-panel-heading p, .visibility-editor-header p, .visibility-tree-header p { margin: 4px 0 0; color: #5a7176; font-size: 12px; line-height: 1.6; }
.visibility-profile-meta { min-height: 92px; border: 1px solid #d8e6e6; border-radius: 8px; padding: 12px; color: #526a70; background: #f7fbfb; }
.visibility-profile-meta strong { display: block; color: #00616b; font-size: 13px; line-height: 1.5; }
.visibility-profile-meta p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; }
.visibility-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.visibility-profile-actions .visibility-import-button { min-height: 40px; justify-content: center; cursor: pointer; text-align: center; }
.visibility-profile-actions .danger-button { grid-column: 1 / -1; }
.visibility-editor-panel { overflow: hidden; }
.visibility-editor-header { padding: 14px 16px; border-bottom: 1px solid #e1ebeb; }
.visibility-title-line { flex-wrap: wrap; gap: 8px; }
.visibility-editor-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.visibility-editor-badge.active-profile, .record-badge.active-profile { color: #fff; background: #007a83; }
.visibility-profile-form { display: grid; grid-template-columns: minmax(220px,.55fr) minmax(0,1fr); gap: 14px; padding: 16px; border-bottom: 1px solid #e1ebeb; }
.visibility-profile-form textarea { min-height: 82px; resize: vertical; }
.visibility-result { margin: 14px 16px 0; }
.visibility-tree-header { padding: 16px; border-bottom: 1px solid #e1ebeb; }
.visibility-revision { max-width: 44%; overflow-wrap: anywhere; text-align: right; }
.visibility-tree { display: grid; gap: 14px; padding: 16px; }
.visibility-tree-section { min-width: 0; overflow: hidden; border: 1px solid #d8e6e6; border-radius: 8px; background: #fff; }
.visibility-tree-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid #d8e6e6; background: #f3f8f8; }
.visibility-tree-section-heading h4 { margin: 0; color: #102a2f; font-size: 15px; line-height: 1.4; }
.visibility-tree-section-heading span { color: #5a7176; font-size: 12px; font-weight: 900; }
.visibility-tree-section-actions { display: flex; align-items: center; gap: 12px; }
.visibility-tree-section-toggle { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border: 1px solid #b9cdcf; border-radius: 8px; padding: 0 12px; color: #00616b; background: #fff; font-size: 12px; font-weight: 900; cursor: pointer; }
.visibility-tree-section-toggle:hover { border-color: #007a83; background: #e9f3f3; }
.visibility-tree-section-toggle:focus-visible { outline: 3px solid rgba(0,122,131,.22); outline-offset: 1px; }
.visibility-tree-section-toggle:disabled { cursor: not-allowed; opacity: .5; }
.visibility-tree-node { display: grid; grid-template-columns: 32px auto minmax(0,1fr); column-gap: 10px; align-items: start; min-width: 0; padding: 12px 14px 12px calc(14px + var(--tree-depth,0) * 18px); border-bottom: 1px solid #e7eeee; background: #fff; }
.visibility-tree-section > .visibility-tree-node:last-child { border-bottom: 0; }
.visibility-tree-children { grid-column: 1 / -1; margin: 12px -14px -12px calc(-14px - var(--tree-depth,0) * 18px); border-top: 1px solid #e7eeee; }
.visibility-tree-children[hidden] { display: none; }
.visibility-tree-children .visibility-tree-node:last-child { border-bottom: 0; }
.visibility-tree-toggle { grid-column: 1; display: inline-grid; width: 32px; height: 32px; place-items: center; margin-top: -4px; border: 0; border-radius: 8px; padding: 0; color: #466267; background: transparent; cursor: pointer; }
.visibility-tree-toggle:hover { color: #00616b; background: #e9f3f3; }
.visibility-tree-toggle:focus-visible { outline: 3px solid rgba(0,122,131,.22); outline-offset: 1px; }
.visibility-tree-toggle-icon { display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); transition: transform .16s ease; }
.visibility-tree-node.is-collapsed > .visibility-tree-toggle .visibility-tree-toggle-icon { transform: rotate(-45deg) translate(-1px,1px); }
.visibility-switch { position: relative; grid-column: 2; display: inline-flex; width: 44px; min-height: 44px; align-items: center; margin-top: -7px; margin-bottom: -7px; cursor: pointer; }
.visibility-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.visibility-switch-track { position: relative; display: block; width: 42px; height: 24px; border: 1px solid #9eb6b9; border-radius: 999px; background: #dce6e6; transition: border-color .16s ease, background-color .16s ease; }
.visibility-switch-track::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(18,49,53,.28); content: ""; transition: transform .16s ease; }
.visibility-switch input:checked + .visibility-switch-track { border-color: #007a83; background: #007a83; }
.visibility-switch input:checked + .visibility-switch-track::after { transform: translateX(18px); }
.visibility-switch input:focus-visible + .visibility-switch-track { outline: 3px solid rgba(0,122,131,.2); outline-offset: 2px; }
.visibility-switch input:disabled + .visibility-switch-track { cursor: not-allowed; opacity: .5; }
.visibility-node-content { grid-column: 3; min-width: 0; }
.visibility-node-title-line { flex-wrap: wrap; gap: 6px; }
.visibility-node-title-line strong { margin-right: 2px; color: #102a2f; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.visibility-state-badge { display: inline-flex; min-height: 22px; align-items: center; border-radius: 999px; padding: 0 8px; color: #5a7176; background: #edf3f3; font-size: 10px; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.visibility-state-badge.kind { color: #38565c; background: #e9f0f0; }
.visibility-state-badge.self-visible { color: #00616b; background: #e5f3f1; }
.visibility-state-badge.effective-visible { color: #166342; background: #e8f6ef; }
.visibility-state-badge.hidden { color: #874141; background: #faeaea; }
.visibility-node-details { flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; color: #7b9297; font-size: 11px; line-height: 1.55; }
.visibility-node-details span { overflow-wrap: anywhere; }
.visibility-parent-reason { color: #9a4d25; font-weight: 800; }
.visibility-empty-warning { color: #8a5a13; font-weight: 800; }
.visibility-frontend-link { display: inline-flex; min-height: 30px; align-items: center; margin-top: 6px; color: #00616b; font-size: 12px; font-weight: 900; text-decoration: none; }
.visibility-frontend-link:hover { text-decoration: underline; }
.visual-visibility-toolbar { display: grid; gap: 14px; padding: 16px; border-bottom: 1px solid #d8e6e6; background: #fff; }
.visual-visibility-heading, .visual-visibility-controls, .visual-visibility-actions, .visual-visibility-meta { display: flex; align-items: center; }
.visual-visibility-heading { justify-content: space-between; gap: 16px; }
.visual-visibility-heading h2 { margin: 0 0 4px; color: #102a2f; font-size: 18px; line-height: 1.35; }
.visual-visibility-heading p, .visual-visibility-meta p { margin: 0; color: #5a7176; font-size: 12px; line-height: 1.55; }
.visual-visibility-heading .secondary-button { flex: 0 0 auto; text-decoration: none; }
.visual-visibility-controls { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(240px,1fr) auto auto; gap: 12px; align-items: end; }
.visual-visibility-mode-tabs { min-height: 40px; }
.visual-visibility-mode-tabs button { min-height: 32px; }
.visual-visibility-actions { gap: 8px; padding-bottom: 1px; }
.visual-visibility-meta { justify-content: space-between; gap: 16px; border-top: 1px solid #e7eeee; padding-top: 10px; }
.visual-visibility-meta p:first-child { color: #38565c; font-weight: 800; }
.visual-visibility-meta p:last-child { overflow-wrap: anywhere; text-align: right; }
.visual-visibility-frame-shell { min-height: 680px; padding: 12px; background: #e9eeee; }
.visual-visibility-frame-shell iframe { display: block; width: 100%; min-height: calc(100vh - 285px); height: 760px; border: 1px solid #b9cdcf; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,49,53,.08); }
.template-preview-toolbar { display: grid; gap: 14px; padding: 16px; border-bottom: 1px solid #d8e6e6; background: #fff; }
.template-preview-heading, .template-preview-meta, .template-preview-meta-actions { display: flex; align-items: center; }
.template-preview-heading, .template-preview-meta { justify-content: space-between; gap: 16px; }
.template-preview-heading h2 { margin: 0 0 4px; color: #102a2f; font-size: 18px; line-height: 1.35; }
.template-preview-heading p, .template-preview-meta p, .template-preview-status { margin: 0; color: #5a7176; font-size: 12px; line-height: 1.55; }
.template-preview-controls { display: grid; grid-template-columns: minmax(190px,.72fr) minmax(260px,1fr) minmax(430px,1.45fr); gap: 12px; align-items: end; }
.template-preview-device-controls { display: flex; min-width: 0; align-items: stretch; gap: 10px; }
.template-preview-device-scroll-shell { position: relative; min-width: 0; flex: 1 1 auto; overflow: hidden; border-radius: 8px; }
.template-preview-device-tabs {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-right: 32px;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.template-preview-device-tabs::-webkit-scrollbar { display: none; }
.template-preview-device-tabs button { min-height: 32px; flex: 0 0 auto; }
.template-preview-device-scroll-hint { position: absolute; top: 0; right: 0; display: flex; width: 42px; height: 100%; pointer-events: none; align-items: center; justify-content: flex-end; padding-right: 8px; color: #00616b; background: linear-gradient(to right,rgba(235,246,246,0),#ebf6f6 62%,#ebf6f6); opacity: 0; transition: opacity 180ms ease; }
.template-preview-device-scroll-hint.is-visible { opacity: 1; }
.template-preview-device-scroll-hint span { font-size: 28px; font-weight: 900; line-height: 1; animation: template-preview-scroll-nudge 720ms ease-in-out 2; }
@keyframes template-preview-scroll-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.template-preview-orientation-tabs { flex: 0 0 auto; }
.template-preview-orientation-tabs button { min-width: 58px; min-height: 32px; }
.template-preview-meta { border-top: 1px solid #e7eeee; padding-top: 10px; }
.template-preview-meta strong { color: #102a2f; font-size: 13px; line-height: 1.5; }
.template-preview-meta-actions { flex: 0 0 auto; gap: 8px; }
.template-preview-meta-actions .secondary-button { min-height: 34px; text-decoration: none; }
.template-preview-status { color: #38565c; font-weight: 800; }
.template-preview-canvas { min-height: 620px; overflow: auto; padding: 16px; background: #e9eeee; }
.template-preview-stage { position: relative; min-width: 1px; min-height: 1px; margin: 0 auto; }
.template-preview-device { position: absolute; top: 0; left: 0; overflow: hidden; border: 1px solid #9fb7ba; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(18,49,53,.18); transform-origin: top left; }
.template-preview-device-bar { display: flex; height: 36px; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #c8d7d8; color: #526a70; background: #eef3f3; }
.template-preview-device-bar span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: #9eb6b9; }
.template-preview-device-bar strong { margin-left: 6px; font-size: 11px; line-height: 1; }
.template-preview-device iframe { display: block; border: 0; background: #fff; }
.admin-dialog { width: min(calc(100% - 32px),520px); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 8px; color: #102a2f; background: transparent; box-shadow: 0 18px 50px rgba(18,49,53,.22); }
.admin-dialog::backdrop { background: rgba(10,32,35,.48); }
.admin-dialog-panel { overflow: hidden; border: 1px solid #cfdddd; border-radius: 8px; background: #fff; }
.admin-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid #e1ebeb; }
.admin-dialog-header p { margin: 0 0 3px; color: #007a83; font-size: 11px; font-weight: 900; }
.admin-dialog-header h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.dialog-close-button { display: inline-grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid #d8e6e6; border-radius: 8px; color: #526a70; background: #fff; font-size: 24px; line-height: 1; }
.dialog-close-button:hover { border-color: #007a83; color: #00616b; }
.admin-dialog-body { display: grid; gap: 14px; padding: 16px; }
.visibility-dialog-hint { min-height: 20px; margin: 0; color: #5a7176; font-size: 12px; line-height: 1.6; }
.admin-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid #e1ebeb; background: #f7fbfb; }
@media (max-width: 1180px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 14px; }
  .brand-block { border-bottom: 0; padding-bottom: 0; }
  .admin-nav { display: grid; min-width: 0; gap: 8px; margin-top: 0; }
  .admin-nav-primary, .admin-nav-utility { display: flex; min-width: 0; gap: 8px; overflow-x: auto; }
  .admin-nav-primary { padding-bottom: 2px; }
  .admin-nav-primary a, .admin-nav-utility a, .admin-nav-utility .nav-button { flex: 0 0 auto; }
  .admin-nav-utility { margin-top: 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); }
  .editor-grid { grid-template-columns: 1fr; }
  .faq-editor-grid { grid-template-columns: 1fr; }
  .management-grid { grid-template-columns: 1fr; }
  .visibility-workbench { grid-template-columns: 1fr; }
  .visual-visibility-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .template-preview-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .template-preview-device-field { grid-column: 1 / -1; }
  .visibility-profile-panel { grid-template-columns: minmax(210px,.8fr) minmax(260px,1fr); align-items: end; }
  .visibility-panel-heading, .visibility-profile-actions { grid-column: 1 / -1; }
  .catalog-stat-grid, .catalog-issue-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .admin-workspace { padding: 12px; }
  .admin-sidebar { grid-template-columns: 1fr; }
  .workspace-header { align-items: flex-start; }
  .segmented button { min-height: 44px; }
  .two-columns, .cover-input-row, .captcha-row, .button-row, .button-row.three, .stats-grid, .stats-grid.four, .article-row, .record-row { grid-template-columns: 1fr; }
  .catalog-stat-grid, .catalog-issue-grid { grid-template-columns: 1fr; }
  .customer-detail-grid { grid-template-columns: 1fr; }
  .customer-detail-grid .customer-detail-wide { grid-column: auto; }
  .visibility-workbench, .visibility-tree { padding: 12px; }
  .visibility-profile-panel, .visibility-profile-form { grid-template-columns: 1fr; }
  .visibility-panel-heading, .visibility-profile-actions { grid-column: auto; }
  .visibility-toolbar, .visibility-editor-header, .visibility-tree-header { align-items: stretch; flex-direction: column; }
  .visibility-editor-actions, .visibility-profile-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .visibility-profile-actions .danger-button { grid-column: auto; }
  .visibility-editor-actions button, .visibility-profile-actions button { min-height: 44px; }
  .visibility-frontend-link { min-height: 44px; }
  .visibility-revision { max-width: none; text-align: left; }
  .visibility-tree-node { padding-right: 10px; padding-left: calc(10px + var(--tree-depth,0) * 10px); }
  .visibility-tree-node { grid-template-columns: 44px 44px minmax(0,1fr); column-gap: 6px; }
  .visibility-tree-toggle { width: 44px; height: 44px; margin-top: -7px; }
  .visibility-tree-section-actions { gap: 8px; }
  .visibility-tree-section-toggle { min-height: 44px; padding-right: 10px; padding-left: 10px; }
  .visibility-tree-children { margin-right: -10px; margin-left: calc(-10px - var(--tree-depth,0) * 10px); }
  .visibility-state-badge.kind { display: none; }
  .visual-visibility-heading, .visual-visibility-meta { align-items: stretch; flex-direction: column; }
  .visual-visibility-controls { grid-template-columns: 1fr; }
  .visual-visibility-actions { display: grid; grid-template-columns: 1fr; }
  .visual-visibility-actions button, .visual-visibility-heading .secondary-button { width: 100%; min-height: 44px; }
  .visual-visibility-meta p:last-child { text-align: left; }
  .visual-visibility-frame-shell { min-height: 560px; padding: 8px; }
  .visual-visibility-frame-shell iframe { min-height: 620px; height: 70vh; }
  .template-preview-heading, .template-preview-meta { align-items: stretch; flex-direction: column; }
  .template-preview-heading .secondary-button { width: 100%; min-height: 44px; }
  .template-preview-controls { grid-template-columns: 1fr; }
  .template-preview-device-field { grid-column: auto; }
  .template-preview-device-tabs button { min-height: 44px; }
  .template-preview-device-controls { gap: 8px; }
  .template-preview-orientation-tabs button { min-width: 52px; min-height: 44px; }
  .template-preview-meta-actions { justify-content: space-between; }
  .template-preview-canvas { min-height: 420px; padding: 8px; }
  .admin-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .admin-dialog-actions button { width: 100%; min-height: 44px; }
  .toolbar-actions { justify-content: flex-start; }
  .article-row-actions, .record-row-actions, .list-toolbar { align-items: stretch; flex-direction: column; }
  .article-row-actions, .record-row-actions { justify-content: flex-start; }
  .article-row-actions .compact { min-height: 44px; }
  .catalog-product-panel .catalog-panel-header,
  .catalog-service-panel .catalog-panel-header { align-items: flex-start; flex-direction: column; }
  .catalog-panel-actions, .catalog-filter, .catalog-filter select { width: 100%; }
  .catalog-panel-actions { align-items: stretch; flex-direction: column; }
  .catalog-filter { align-items: flex-start; flex-direction: column; }
  .catalog-filter select { max-width: none; }
  .catalog-visibility-quickbar { align-items: stretch; flex-direction: column; }
  .catalog-visibility-quick-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .catalog-visibility-quick-actions label, .catalog-visibility-quick-actions select,
  .catalog-visibility-quick-actions button { width: 100%; max-width: none; }
  .catalog-visibility-quick-actions select, .catalog-visibility-quick-actions button { min-height: 44px; }
  .preview-stage { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-preview-device-scroll-hint span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visibility-tree-toggle-icon { transition: none; }
}