:root {
    --ink: #333333;
    --muted: #858585;
    --line: #e0e0e0;
    --paper: #E1E3E7;
    --red: #FF4242;
    --red-end: #FF7142;
    --panel: #ffffff;
    --field: #F6F5F5;
    --chip: #F5F5F5;
    --header: #333333;
    --gradient: linear-gradient(#FF4242, #FF7142);
    --ui-font: "Microsoft Yahei", "PingFang SC", "Noto Sans SC", Helvetica, Tahoma, Arial, sans-serif;
    --glyph-font: "ZitieKaiti", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100%;
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--ink);
    background: var(--paper);
}
/* 首页 / 分类列表：对照 Web2 首页白底，字帖封面白卡片 */
body.page-home {
    background: #fff;
}

a { color: inherit; text-decoration: none; }

.cb { clear: both; }
.fr { float: right; }

.site-header {
    height: 60px;
    background: var(--header);
    color: #fff;
    position: relative;
    width: 100%;
    max-width: 100%;
    z-index: 2000;
}
.site-header-inner.main {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    height: 60px;
    padding: 0 16px;
    position: relative;
    gap: 8px;
}
.brand,
.logo {
    display: block;
    flex: 0 0 auto;
    width: 160px;
    margin: 0 24px 0 0;
}
.brand img,
.logo img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 160px;
}
.header-menu {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 60px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.header-menu-level {
    flex: 0 0 auto;
    display: block;
    line-height: 60px;
    padding: 0 12px;
    font-size: 16px;
    margin-right: 22px;
    position: relative;
    color: #fff;
    min-width: 64px;
    text-align: center;
    box-sizing: content-box;
}
.header-menu-level a,
.header-menu-level span {
    display: block;
    height: 60px;
    line-height: 60px;
    color: #fff;
    white-space: nowrap;
    padding: 0;
    min-width: 0;
    font-size: 16px;
    text-align: center;
}
.header-menu-level:hover,
.header-menu-level.active,
.header-menu-level a:hover,
.header-menu-level a.is-on {
    background-image: var(--gradient);
    color: #fff;
}
.header-menu .is-soon {
    color: rgba(255,255,255,0.55);
    cursor: default;
}
.header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: auto;
}
.header-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    border-radius: 200px;
    background-image: var(--gradient);
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-login:hover {
    color: #fff;
    opacity: 0.95;
}

.header-app-download-trigger,
.header-download-mobile {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.header-menu-level.header-app-download:hover,
.site-header.is-app-download-open .header-menu-level.header-app-download {
    background-image: var(--gradient);
    color: #fff;
}
.site-header.is-app-download-open .header-app-download-trigger {
    background: transparent;
    color: #fff;
}
.header-download-mobile {
    display: none;
    width: auto;
    height: auto;
    line-height: 22px;
    padding: 6px 14px;
    margin-right: 10px;
    border-radius: 200px;
    background-image: var(--gradient);
    font-size: 13px;
}
.site-header.is-app-download-open .header-download-mobile {
    background-image: var(--gradient);
    color: #fff;
}
.header-menu-level.header-app-download {
    position: relative;
}
.site-header-download-panel {
    --dl-pad: 9px;
    --dl-radius: 12px;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 2100;
    width: 100%;
    min-width: 96px;
    box-sizing: border-box;
    padding: var(--dl-pad);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--dl-radius);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 16px rgba(15, 23, 42, 0.06),
        0 20px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.2s;
}
.site-header-download-panel::before,
.site-header-download-panel::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
}
.site-header-download-panel::before {
    top: -7px;
    margin-left: -7px;
    border-width: 0 7px 7px;
    border-color: transparent transparent rgba(15, 23, 42, 0.08) transparent;
}
.site-header-download-panel::after {
    top: -6px;
    margin-left: -6px;
    border-width: 0 6px 6px;
    border-color: transparent transparent #fff transparent;
}
.site-header.is-app-download-open .site-header-download-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
.site-header-download-qr {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.header-actions {
    position: relative;
}
.header-actions .site-header-download-panel {
    left: auto;
    right: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
}
.header-actions .site-header-download-panel::before {
    left: auto;
    right: 26px;
    margin-left: 0;
}
.header-actions .site-header-download-panel::after {
    left: auto;
    right: 27px;
    margin-left: 0;
}
.site-header.is-app-download-open .header-actions .site-header-download-panel {
    transform: translateY(0) scale(1);
}

/* 机构横幅：素材 2172×724，通栏按宽算高；超宽屏/矮窗再限高并居中 cover */
.org-promo-banner {
    --banner-w: 2172;
    --banner-h: 724;
    --banner-ratio: calc(var(--banner-w) / var(--banner-h));
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    text-decoration: none;
    position: relative;
    background: #faf6f0;
    overflow: hidden;
}
.org-promo-banner img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 21:9 带鱼屏等：高度不超过约 48% 视口，仍铺满宽度，保证文案能看清 */
@media (min-aspect-ratio: 20/9) {
    .org-promo-banner {
        height: max(12rem, min(48vh, calc(100vw * var(--banner-h) / var(--banner-w))));
    }
    .org-promo-banner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}

/* 浏览器窗口偏矮（笔记本小窗）：别让 banner 吃掉整屏 */
@media (max-height: 720px) and (max-aspect-ratio: 20/9) {
    .org-promo-banner {
        height: clamp(9.5rem, 36vh, calc(100vw * var(--banner-h) / var(--banner-w)));
    }
    .org-promo-banner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}
.org-promo-banner:hover img,
.org-promo-banner:focus img {
    transform: none;
    box-shadow: none;
}
.org-promo-banner:focus-visible {
    outline: 2px solid #c41e24;
    outline-offset: -2px;
}

.hero {
    max-width: 1300px;
    margin: 48px auto 20px;
    padding: 0 24px;
    text-align: center;
}
.hero h1 {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 400;
}
.hero p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

.home-seo-links {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 28px;
    padding: 0 24px;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.home-seo-links::-webkit-scrollbar {
    display: none;
}
.home-seo-links ul {
    list-style: none;
    margin: 0 auto;
    padding: 4px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    max-width: none;
}
.home-seo-links li {
    flex: 0 0 auto;
}
.home-seo-links a,
.home-seo-links .is-soon {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--red);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--ink);
    background: #fff;
    transition: border-color 0.15s, color 0.15s;
}
.home-seo-links a:hover {
    color: var(--red);
}
.home-seo-links .is-soon {
    opacity: 0.55;
    cursor: default;
}

.type-group.home-featured {
    margin-bottom: 40px;
}

.type-group {
    max-width: 1300px;
    margin: 0 auto 48px;
    padding: 0 24px;
}
.type-group h2 {
    font-size: 30px;
    font-weight: 400;
    margin: 48px 0 20px;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.type-group h2 a {
    font-size: 16px;
    color: var(--red);
    line-height: 1.2;
    white-space: nowrap;
}
.type-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.type-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 132px;
    padding: 20px;
    background: #fff;
    border: 1px solid #E0E0E0;
    color: inherit;
}
.type-card strong { font-size: 20px; font-weight: 400; }
.type-card span { color: var(--muted); font-size: 14px; line-height: 1.6; }
.type-card:hover { border-color: var(--red); }
.type-card.is-soon { opacity: 0.55; }

.cover-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 16px;
}
.cover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-align: center;
}
.cover-frame {
    width: 85%;
    padding: 10px;
    background: #fff;
    border-radius: 1em;
    box-shadow: 0 0 10px #ccc;
}
.cover-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 280 / 397;
    object-fit: cover;
    background: #fff;
}
.cover-card strong {
    display: block;
    margin-top: 16px;
    font-size: 20px;
    font-weight: 400;
}
.cover-card em {
    margin-top: 16px;
    padding: 12px 28px;
    border-radius: 8px;
    background-image: var(--gradient);
    color: #fff;
    font-style: normal;
    font-size: 16px;
}
.cover-card.is-soon { opacity: 0.55; }
.cover-card.is-soon span { color: var(--muted); font-size: 14px; margin-top: 8px; }

.copyview {
    height: 220px;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}
.copyview ul {
    width: 1300px;
    max-width: 100%;
    padding: 15px;
    height: 25px;
    margin: 0 auto;
    list-style: none;
    box-sizing: border-box;
}
.copyview li {
    float: left;
    width: 10%;
    text-align: center;
}
.copyview li.is-on img {
    outline: 2px solid var(--red);
    outline-offset: 1px;
}
.copyview img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.copyview p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    margin: 5px 0;
    color: var(--ink);
}
.copyview li p a {
    color: var(--ink);
}
.copyview a { color: var(--ink); }
.copyview li.is-on p a {
    color: var(--red);
    font-weight: 600;
}
.copyview .is-soon { opacity: 0.7; }
.copyview .is-soon p { color: var(--muted); }

.page-make .site-header {
    position: relative;
    flex-shrink: 0;
}
.page-make main {
    display: block;
}
.page-make {
    min-height: 100%;
    overflow: visible;
}

.make-workspace {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 1080px;
    background: #e1e3e7;
    overflow: visible;
}
.workspace-backdrop {
    position: absolute;
    inset: 0;
    z-index: 40;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.28);
    cursor: pointer;
}
.workspace-backdrop[hidden] {
    display: none;
}

.preview-stage {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 1080px;
    background: #e1e3e7;
}
.preview-exhibition-busy {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 6;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    pointer-events: none;
}
.preview-stage.is-preview-loading .preview-exhibition-busy {
    display: flex;
}
.preview-stage.is-preview-loading .exhibition-sheet {
    visibility: hidden;
}
.preview-exhibition-busy__spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #ececec;
    border-top-color: var(--red);
    border-radius: 50%;
    animation: preview-exhibition-spin 0.7s linear infinite;
}
.preview-exhibition-busy__label {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
}
@keyframes preview-exhibition-spin {
    to { transform: rotate(360deg); }
}
.preview-stage-bar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px 12px;
    background: transparent;
    border-bottom: 0;
    z-index: 5;
}
.make-status-chip[hidden] {
    display: none !important;
}
.make-status-chip.make-status-chip--visible {
    display: inline-flex;
    max-width: min(100%, 420px);
    padding: 8px 10px 8px 14px;
    background: linear-gradient(90deg, #fff7ed 0%, #fff 100%);
    border-color: #fed7aa;
}
.make-status-chip.make-status-chip--visible .make-status-chip-label {
    color: #9a3412;
    font-weight: 500;
    white-space: normal;
}
.preview-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    background: #f0f1f3;
    border: 1px solid #e2e4e8;
    flex-shrink: 0;
}
.page-nav-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.page-nav-btn:hover:not(:disabled) { background: #fff; }
.page-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.page-indicator {
    min-width: 52px;
    padding: 0 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.preview-stage-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}
.preview-zoom {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 10px;
    background: #f0f1f3;
    border: 1px solid #e2e4e8;
}
.zoom-btn {
    min-width: 34px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.zoom-btn:hover { color: var(--ink); }
.zoom-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e2e4e8;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.panel-toggle:hover { border-color: #ccc; }
.panel-toggle-icon {
    width: 14px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    position: relative;
}
.panel-toggle-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 4px;
    height: 100%;
    background: currentColor;
    border-radius: 0 1px 1px 0;
}
.make-workspace.is-sidebar-collapsed .panel-toggle-icon::after {
    right: auto;
    left: 1px;
    border-radius: 1px 0 0 1px;
}

.preview-canvas {
    position: relative;
    flex: 0 0 auto;
    overflow: visible;
    cursor: default;
    background: transparent;
}
.preview-canvas.is-panning {
    cursor: grabbing;
    user-select: none;
}
.page-flip {
    display: none;
}
.preview-surface {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 22px 40px;
    box-sizing: border-box;
}

.exhibition {
    position: relative;
    flex: 0 0 auto;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}
.exhibition-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
    transform-origin: top left;
    overflow: hidden;
}
.exhibition .to-print {
    width: 210mm;
    margin: 0;
}
.exhibition .page {
    margin: 0;
    box-shadow: none;
}
/* 预览区只显示当前页：print.css 里 .page.page--sheet{display:grid} 在后加载会盖掉 display:none，必须用更高优先级 */
.exhibition .page:not(.is-preview-active) {
    display: none !important;
}
/* 须保持与 print.css 一致的三区 grid，不能用 block（会把正文撑满 297mm 裁掉页脚） */
.exhibition .page.page--sheet.is-preview-active,
.exhibition .page.page--org-template.is-preview-active,
.exhibition .page:has(> .org-page-header).is-preview-active {
    display: grid !important;
}
.exhibition .page.is-preview-active:not(.page--sheet):not(.page--org-template) {
    display: block !important;
}

.to-print { width: 210mm; margin: 0 auto; }

.control-pane,
.function {
    flex: 0 0 400px;
    width: 400px;
    max-width: 400px;
    display: block;
    background: #ffffff;
    border-left: 0;
    box-shadow: none;
    min-height: 1080px;
    min-width: 0;
    z-index: 1;
}
.function-main {
    margin-left: 24px;
    padding: 0 18px 48px 0;
}
.function-title {
    margin-top: 28px;
    font-size: 28px;
    font-weight: 400;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    color: var(--ink);
}
.function-describe,
.control-pane .help {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 15px;
    color: #858585;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 72px;
    line-height: 1.45;
}
.function-describe a {
    color: #858585;
}
.function-min-title,
.control-pane .field-label {
    display: block;
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 0;
    margin-left: 0;
    font-weight: 400;
    color: var(--ink);
}
.function-min-title:first-of-type,
.control-pane .field-label:first-of-type {
    margin-top: 28px;
}
.function-content,
.content-box {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-top: 12px;
    background-color: #F6F5F5;
    border-radius: 10px;
    text-align: center;
    padding: 8px 0 4px;
    box-sizing: border-box;
    position: relative;
}
/* 笔画/控笔/偏旁：摘要在上、图案紧挨其下，都靠近顶部以便对照左侧预览 */
.content-box.content-box--glyph-summary {
    height: auto;
    min-height: 0;
    margin-top: 8px;
    padding: 6px 0 2px;
}
.content-box.content-box--glyph-summary #txtContent {
    height: 36px;
    font-size: 20px;
    line-height: 36px;
}
.content-box.content-box--glyph-summary .word-count {
    padding: 0 12px 4px 0;
}
.preset-fields {
    margin-top: 8px;
}
.preset-fields .field-label {
    margin-top: 8px;
}
.function-content textarea,
#txtContent {
    margin: 0 auto;
    width: calc(100% - 20px);
    height: 132px;
    background-color: transparent;
    font-size: 14px;
    outline: none;
    resize: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    display: block;
    box-sizing: border-box;
}
.function-content-wordnum,
.word-count {
    color: #858585;
    font-size: 12px;
    line-height: 1.2;
    text-align: right;
    width: 100%;
    padding: 2px 12px 2px 0;
    box-sizing: border-box;
}
.function-content-wordnum span,
.word-count span {
    margin-right: 0;
}

.content-input-hint {
    margin: 6px 0 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 4px;
    color: #666;
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
}
.content-input-hint[hidden] {
    display: none !important;
}
.content-input-hint--info {
    color: #666;
    background: #f7f7f7;
    border-color: #e8e8e8;
}
.content-input-hint--warn {
    color: #a63a2a;
    background: #fff8f6;
    border-color: #ffc9bc;
}

.control-pane-head,
.panel-close {
    display: none !important;
}
.control-pane-inner {
    padding: 0;
    overflow: visible;
}

.font-upload-row { margin-top: 10px; }
.chip-upload {
    position: relative;
    cursor: pointer;
    min-width: 0;
    white-space: nowrap;
    float: left;
}
#fontTypes.chip-row {
    white-space: nowrap;
}
#fontTypes .chip-font {
    float: left;
}
.font-upload-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    clear: both;
}

.custom-font-tune {
    clear: both;
    margin-top: 10px;
    border: 1px solid var(--border, #e8e8e8);
    border-radius: 10px;
    background: #fafafa;
    overflow: hidden;
}
.custom-font-tune-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    color: var(--text, #333);
}
.custom-font-tune-toggle-label { font-weight: 600; }
.custom-font-tune-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted, #888);
    border-bottom: 2px solid var(--muted, #888);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-right: 4px;
}
.custom-font-tune-toggle.is-open .custom-font-tune-chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
}
.custom-font-tune-body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--border, #eee);
}
.custom-font-tune-hint {
    margin: 10px 0 8px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}
.custom-font-tune-meta {
    margin: 0 0 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink, #444);
    background: #fff;
    border: 1px solid var(--border, #eee);
    border-radius: 8px;
}
.custom-font-tune-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.custom-font-tune-tab {
    flex: 1 1 0;
    min-width: 4.2em;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border, #ddd);
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.custom-font-tune-tab.is-on {
    border-color: var(--brand, #c41e3a);
    color: var(--brand, #c41e3a);
    background: #fff5f5;
    font-weight: 600;
}
.custom-font-tune-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.custom-font-tune-block {
    padding: 14px 16px 16px;
    border-radius: 12px;
    border: 1px solid var(--border, #e5e5e5);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.custom-font-tune-block--pos {
    padding-bottom: 18px;
}
.custom-font-tune-block-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #333);
    text-align: center;
}
.custom-font-tune-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border, #d8d8d8);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
    color: var(--ink, #333);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.custom-font-tune-btn:hover {
    border-color: #c8c8c8;
    background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
}
.custom-font-tune-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) inset;
}
.custom-font-tune-btn--dir {
    font-size: 16px;
}
.custom-font-tune-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.custom-font-tune-value {
    width: 52px;
    height: 44px;
    margin: 0;
    border: 1px solid var(--border, #d8d8d8);
    border-radius: 10px;
    background: #fafafa;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink, #333);
    box-sizing: border-box;
}
.custom-font-tune-dpad {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 10px;
    justify-content: center;
    margin: 4px auto 0;
    width: fit-content;
}
.custom-font-tune-dpad-spacer {
    display: block;
}
.custom-font-tune-dpad-center {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #f3f3f3;
    border: 1px dashed #ddd;
    box-sizing: border-box;
}
.custom-font-tune-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 2px;
}
.custom-font-tune-btn--ghost {
    min-height: 40px;
    font-size: 13px;
    font-weight: 500;
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: var(--muted, #666);
}
.custom-font-tune-btn--primary {
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
    border-color: var(--brand, #c41e3a);
    background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
    color: var(--brand, #c41e3a);
}
.custom-font-tune-btn--primary:hover {
    background: linear-gradient(180deg, #fff8f8 0%, #ffecec 100%);
}
.custom-font-tune-status {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.custom-font-tune-status.is-error { color: #c41e3a; }

.create-bar,
.createcopybook {
    height: auto;
    min-height: 120px;
    background: #ffffff;
    overflow: hidden;
}
.create-bar-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 120px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px 0 28px;
    box-sizing: border-box;
}
/* 与右侧 .control-pane（400px）同宽，按钮贴在操作区下方 */
.create-bar-actions {
    flex: 0 0 400px;
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 18px 0 24px;
    box-sizing: border-box;
}
.create-bar-hint {
    margin: 0;
    max-width: 280px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}
.preview-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.preview-quick-btn {
    margin: 0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: filter 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.preview-quick-btn--ghost {
    border: 1px solid #e2e4e8;
    background: #fff;
    color: #444;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.preview-quick-btn--ghost:hover {
    border-color: #ffb199;
    color: #e53935;
}
.preview-quick-btn--primary {
    border: 0;
    background-image: var(--gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 107, 90, 0.35);
}
.preview-quick-btn--primary:hover {
    filter: brightness(1.05);
}
.create-bar .btn-print {
    margin: 0;
    width: 240px;
    height: 83px;
    line-height: 83px;
    font-size: 28px;
    border: 0;
    border-radius: 18px;
    background-image: var(--gradient);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.create-bar .btn-print:hover {
    filter: brightness(1.03);
}
.pdf-help-modal {
    position: fixed;
    inset: 0;
    z-index: 10055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.pdf-help-modal[hidden] {
    display: none !important;
}
.pdf-help-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.pdf-help-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: min(90vh, 520px);
    overflow: auto;
    padding: 28px 22px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    box-sizing: border-box;
}
.pdf-help-modal-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #333;
}
.pdf-help-modal-lead {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    color: #666;
}
.pdf-help-steps {
    margin: 0 0 20px;
    padding-left: 1.2em;
    font-size: 14px;
    line-height: 1.65;
    color: #444;
}
.pdf-help-steps li {
    margin-bottom: 10px;
}
.pdf-help-steps li:last-child {
    margin-bottom: 0;
}
.pdf-help-modal-foot {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.pdf-help-btn {
    min-width: 110px;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.pdf-help-btn--ghost {
    border: 1px solid #e8e8e8;
    background: #fff;
    color: #555;
}
.pdf-help-btn--ghost:hover {
    background: #fafafa;
}
.pdf-help-btn--primary {
    border: 0;
    background-image: var(--gradient);
    color: #fff;
}
.pdf-help-btn--primary:hover {
    filter: brightness(1.03);
}
/* 弹窗关闭（导出 PDF、开通会员等） */
.site-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: block;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.site-dialog-close:hover {
    background: #e8e8e8;
}
.site-dialog-close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.site-dialog-close-icon::before,
.site-dialog-close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background: #666;
}
.site-dialog-close-icon::before {
    transform: rotate(45deg);
}
.site-dialog-close-icon::after {
    transform: rotate(-45deg);
}
.site-dialog-close:hover .site-dialog-close-icon::before,
.site-dialog-close:hover .site-dialog-close-icon::after {
    background: #333;
}
body.pdf-help-modal-open {
    overflow: hidden;
}

.help {
    color: var(--muted);
    font-size: 20px;
    line-height: 1.45;
}

.chip-row,
.function-font {
    display: block;
    max-width: 100%;
    margin-top: 12px;
    overflow: hidden;
}
/* 颜色圆点选中环会向左溢出，单独放开裁切并留左内边距 */
#latticeColors.chip-row {
    overflow: visible;
    padding: 6px 4px 8px 14px;
}
#latticeColors.chip-row::after {
    content: '';
    display: block;
    clear: both;
}
/* 上传字体 VIP 角标向上溢出，勿裁切 */
#fontTypes.chip-row,
#fontTypes.function-font {
    overflow: visible;
    padding-top: 10px;
    padding-right: 12px;
}
#fontTypes.chip-row::after {
    content: '';
    display: block;
    clear: both;
}
.function-font .chip,
.chip-row .chip {
    float: left;
}

.chip {
    border: 0;
    background: #F5F5F5;
    color: #858585;
    padding: 0 12px;
    height: 36px;
    line-height: 36px;
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    margin: 0 8px 8px 0;
    text-align: center;
}
.chip.is-on {
    background-image: var(--gradient);
    color: #fff;
}

.chip-swatch,
.function-lattice-color {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 28px;
    border: 1px solid #ccc;
    background: #fff;
    margin: 4px 10px 8px 0;
    line-height: 0;
}
#latticeColors .chip-swatch {
    margin: 4px 12px 8px 4px;
}
.chip-swatch.is-on {
    background-image: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red);
}

.chip-lattice {
    width: auto;
    min-width: 72px;
    height: auto;
    line-height: normal;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #ccc;
    color: var(--ink);
    margin: 0 10px 10px 0;
    border-radius: 8px;
}
.chip-lattice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    line-height: 0;
}
.chip-lattice-icon svg {
    display: block;
    width: 56px;
    height: 56px;
    border: 1px solid currentColor;
    box-sizing: border-box;
    background: #fff;
}
/* 英文线格 / 拼音格：横条比例，不加方框边 */
.chip-lattice-icon svg[viewBox="0 0 66 44"],
.chip-lattice-icon svg[viewBox="0 0 48 32"],
.chip-lattice-icon svg[viewBox="0 0 550 32"] {
    width: 66px;
    height: 44px;
    border: 0;
}
.chip-lattice-name {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
}
.chip-lattice.is-on {
    background: #fff;
    color: var(--red);
    border-color: var(--red);
}
.chip-lattice.is-on .chip-lattice-name {
    font-weight: 600;
}

/* 字格宽度：对照老站 .function-lattice-Size */
#latticeSizes .chip,
.function-lattice-Size {
    border-radius: 8px;
    float: left;
    width: 70px;
    text-align: center;
    height: 36px;
    font-size: 15px;
    line-height: 36px;
    margin: 0 8px 8px 0;
    padding: 0;
    background-color: #F5F5F5;
    color: #858585;
}
#latticeSizes .chip.is-on,
.function-lattice-Size.active {
    background-image: var(--gradient);
    color: #ffffff;
}

/* 字体：对照老站 .cnFontList（单行垂直居中，勿用上偏 padding） */
.chip-font,
.cnFontList {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 108px;
    min-width: 108px;
    text-align: center;
    line-height: 1.15;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    color: var(--ink);
    padding: 0 6px;
    margin: 0 8px 8px 0;
    position: relative;
    box-sizing: border-box;
    vertical-align: top;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* 动态字体芯片：覆盖 .chip 灰底/无边，云端字勿用字形撑布局 */
#fontTypes button.chip.chip-font:not(.is-on) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    line-height: 1.15;
    height: 48px;
    width: 108px;
    min-width: 108px;
    padding: 0 6px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdcdc;
    -webkit-appearance: none;
    appearance: none;
}
#fontTypes button.chip.chip-font.chip-font--cloud:not(.is-on) {
    background: linear-gradient(180deg, #fff 0%, #f6f7f9 100%);
}
#fontTypes button.chip.chip-font.is-on {
    background-color: transparent;
    background-image: var(--gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: none;
}
#fontTypes button.chip.chip-font.is-on small {
    color: rgba(255, 255, 255, 0.85);
}
#fontTypes button.chip.chip-font:not(.is-on):not(.chip-org-gold):hover {
    border-color: #b0b0b0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chip-font.chip-upload,
.chip-font.chip-org-manage,
a.chip-font.chip-org-feature,
.chip-font.chip-org-gold {
    overflow: visible;
    cursor: pointer;
    border: 1px solid #e0c878;
    background: linear-gradient(180deg, #fffef9 0%, #fff6e3 55%, #ffefcf 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 2px 6px rgba(160, 120, 40, 0.12);
}
.chip-font.chip-org-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(90deg, #c9a03a, #f5e6a8, #c9a03a);
    pointer-events: none;
}
.chip-font.chip-upload:hover,
.chip-font.chip-org-manage:hover,
a.chip-font.chip-org-feature:hover,
.chip-font.chip-org-gold:hover {
    border-color: #c9a03a;
    background: linear-gradient(180deg, #fffdf5 0%, #fff0d0 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 3px 10px rgba(180, 130, 40, 0.2);
}
.chip-org-member-label {
    display: inline-block;
    font-size: 10px;
    line-height: 1.25;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    color: #5c3d00;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #ffe9a8 0%, #e8c56a 50%, #d4a84b 100%);
    border: 1px solid #c9a03a;
    box-shadow: 0 1px 2px rgba(100, 70, 0, 0.15);
}
a.chip-font.chip-org-feature {
    width: auto;
    min-width: 108px;
    max-width: 148px;
    height: 48px;
    text-decoration: none;
    color: var(--ink);
}
a.chip-font.chip-org-feature .chip-font-label {
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
}
.chip-font.chip-upload .chip-font-label {
    font-size: 14px;
}
.chip-font .chip-font-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chip-font small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.2;
}
.chip-font.is-on,
.cnFontList.active {
    background-image: var(--gradient);
    color: #fff;
    border-color: transparent;
}
.chip-font.is-on small { color: rgba(255,255,255,0.85); }
.chip-font.is-on .chip-org-member-label {
    color: #5c3d00;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.chip-font.is-loading {
    pointer-events: none;
}
/* 加载：当前字体按钮底边细线进度（非独立条） */
.chip-font-load {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
    pointer-events: none;
}
.chip-font.is-on .chip-font-load {
    background: rgba(255, 255, 255, 0.22);
}
.chip-font-load__bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #e0c878, #c9a03a);
    transition: width 0.22s ease;
}
.chip-font.is-on .chip-font-load__bar {
    background: rgba(255, 255, 255, 0.92);
}
.chip-font-load__bar.is-indeterminate {
    width: 36% !important;
    animation: chip-font-load-slide 1s ease-in-out infinite;
}
@keyframes chip-font-load-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(380%); }
}

a.chip-font,
a.chip-font:visited {
    text-decoration: none;
    color: var(--ink);
    box-sizing: border-box;
}
a.chip-font:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.chip-org-manage {
    border-color: #e0c878;
}

/* 附加空白行：对照老站 BlankRow +/-（0～3） */
.blankrow-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.blankrow-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: #ccc;
    color: #333;
    font-size: 20px;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
}
.blankrow-input {
    width: 40px;
    height: 24px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 16px;
    color: var(--ink);
    background: #fff;
}

.lattice-frame--plain {
    border-color: transparent !important;
    background: transparent;
}
.lattice--math .glyph {
    position: relative;
    left: 0 !important;
    top: 0 !important;
}

/* 页眉页脚：分组面板 + 内联标签（避免角标叠在按钮上） */
.ctrl-block--pagetemp .pagetemp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ctrl-block--pagetemp .pagetemp-head-label {
    margin-top: 40px;
    margin-bottom: 0;
    flex: 1 1 auto;
}
.pagetemp-manage {
    margin-top: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #ff6b5a;
    text-decoration: none;
    white-space: nowrap;
}
.pagetemp-manage:hover {
    text-decoration: underline;
}
.pagetemp-panel {
    margin-top: 12px;
    padding: 14px 14px 12px;
    background: #fafafa;
    border: 1px solid #ebebeb;
    border-radius: 12px;
}
.pagetemp-group + .pagetemp-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6e6e6;
}
.pagetemp-group-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #9a9a9a;
}
.pagetemp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
}
.pagetemp-chips .chip {
    float: none;
    margin: 0;
}
.pagetemp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    height: 36px;
    line-height: 1;
    padding: 0 12px;
    box-sizing: border-box;
}
.pagetemp-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12em;
}
.pagetemp-chip-tag {
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1.25;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.pagetemp-chip-tag--org {
    color: #5c3d00;
    background: linear-gradient(180deg, #ffe9a8 0%, #e8c56a 50%, #d4a84b 100%);
    border: 1px solid #c9a03a;
    box-shadow: 0 1px 2px rgba(100, 70, 0, 0.12);
}
.pagetemp-chip.is-on .pagetemp-chip-tag--org {
    background: linear-gradient(180deg, #fff0c8 0%, #e8c56a 100%);
    color: #5c3d00;
    border-color: rgba(255, 255, 255, 0.45);
}
.pagetemp-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.pagetemp-school-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}
.pagetemp-school-block[hidden] {
    display: none;
}
.pagetemp-school-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
}
.ctrl-block--pagetemp .school-fields {
    margin-top: 0;
}
.chip-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.org-feature-block {
    clear: both;
    margin-top: 12px;
    padding-top: 8px;
    padding-bottom: 4px;
    border-top: 1px solid var(--border, #eee);
    overflow: visible;
}
.org-feature-block[hidden] {
    display: none !important;
}
.org-feature-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    clear: both;
}
#ctrlPageTemp,
.ctrl-block--pagetemp .pagetemp-panel {
    overflow: visible;
}

.school-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}
.school-fields[hidden] {
    display: none;
}
.school-fields input {
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 10px;
    font: inherit;
    background: #fff;
}

.transparency-slider {
    width: 100%;
    max-width: 280px;
}
.transparency-slider-ends {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px;
}
#transparency {
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--red);
    cursor: pointer;
}
.transparency-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}
.transparency-mark {
    border: 0;
    background: transparent;
    padding: 2px 0;
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    line-height: 1.2;
}
.transparency-mark:hover {
    color: var(--ink);
}
.transparency-mark.is-on {
    color: var(--red);
    font-weight: 600;
}

.btn-print {
    display: block;
    margin: 36px 0 12px;
    width: 240px;
    max-width: 100%;
    height: 83px;
    border: 0;
    border-radius: 18px;
    background-image: var(--gradient);
    color: #fff;
    font: inherit;
    font-size: 28px;
    line-height: 83px;
    cursor: pointer;
}
.print-tip {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 320px;
}
.vip-note {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
}
.pinyin-block { margin-bottom: 1.5mm; }
.pinyin-meta-row { margin-bottom: 1mm; }
.pinyin-label {
    font-size: 12px;
    color: #333;
    padding-left: 2mm;
    line-height: 1.4;
}
/* 机构版 A4：行居中 */
.page-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* 国风帖 38–41：对照 Postes.Web2 .exhibition 背景 + Copybook38–41 .contentframe */
.page-main--guofeng {
    position: relative;
    min-height: 257mm;
    height: 100%;
    background-color: #fff;
    overflow: visible !important;
}
.exhibition .page.page--sheet.is-preview-active > .page-main--guofeng {
    overflow: visible !important;
}
.page-main--guofeng .page-main--org,
.page-main.page-main--guofeng {
    padding-top: 0 !important;
}
/* 七言诗 38：Copybook38.css contentframe */
.page-main--guofeng-poetry .guofeng-poetry-frame {
    position: absolute;
    top: 57mm;
    left: 47mm;
    width: 67mm;
    overflow: hidden;
}
.guofeng-poetry-frame {
    display: block;
    overflow: hidden;
}
.row--guofeng-poetry {
    text-align: center;
    float: right !important;
    width: 13.2mm;
    margin-left: 0 !important;
    margin-right: 2.6mm !important;
    overflow: visible;
}
.row--guofeng-poetry .lattice {
    float: left;
    clear: both;
}
.row--guofeng-poetry .lattice-frame {
    width: 12.7mm !important;
    height: 12.7mm !important;
}
/* 长篇诗文 39 */
.page-main--guofeng-article .guofeng-contentframe--article {
    position: absolute;
    top: 40mm;
    left: 28mm;
    width: 150mm;
}
.guofeng-article-row {
    margin-left: auto;
    margin-right: auto;
}
.guofeng-article-row .lattice-frame {
    float: left;
}
/* 比赛帖 40 / 41 */
.page-main--guofeng-match .guofeng-contentframe--match {
    position: absolute;
    top: 40mm;
    left: 34mm;
    width: 142mm;
}
.guofeng-contentframe--t40 {
    top: 39.7mm;
    left: 36.2mm;
}
.guofeng-contentframe--t41 {
    top: 42.5mm;
    left: 33.3mm;
}
.guofeng-match-row {
    overflow: hidden;
}
.guofeng-match-cell {
    background: transparent;
}
.row {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.lattice {
    float: left;
}
.lattice-frame {
    float: left;
    position: relative;
    box-sizing: border-box;
}
.lattice-frame:not(.lattice-frame--plain):not(.py-cell) {
    border: 1px solid #ff4242;
    background: #fff;
}
/* 汉字/笔顺等标准字格：相邻格共线（对照 fill-lattice border-right:none） */
.row--lattice-grid > .lattice:has(+ .lattice) > .lattice-frame {
    border-right: none;
}
/* 仅单层田字格行合并行间横线；文章拼音/上拼下字格每行独立，不能去掉 lattice-frame 底边 */
.page-main .row--lattice-grid:not(.article-pyin-row):not(.pinyin-cap-row):has(+ .row--lattice-grid:not(.article-pyin-row):not(.pinyin-cap-row)) > .lattice > .lattice-frame {
    border-bottom: none;
}
.page-main .glyph,
.lattice-frame > .glyph {
    font-weight: 400;
    font-synthesis: none;
    -webkit-font-smoothing: auto;
}
.lattice-frame .svgdiv,
.lattice--article-py .svgdiv {
    font-weight: 400;
    font-synthesis: none;
    -webkit-font-smoothing: auto;
}
/* 拼音区：专用字体 + 禁用浏览器伪加粗（含描红 .copypinyin / .pinyinbianse） */
.pinyinlattice,
.pinyindiv,
.pinyindiv span,
.pinyinbianse,
.pinyinbianse span,
.copypinyin,
.lattice--article-py .pinyin-strip,
.lattice-frame--pinyin-col .glyph--pinyin,
.py-cell .py-cell-py,
.page-main--word-pinyin .pinyindiv,
.page-main--word-pinyin .pinyindiv span,
.page-main--pinyin-line .py-cell .nosvgdiv,
.page-main--pinyin-line .py-cell .svgdiv {
    font-family: "pinyin", "ZitiePinyin", sans-serif;
    font-weight: 400 !important;
    font-synthesis: none !important;
    -webkit-font-smoothing: auto;
}
.lattice--pinyin-cap,
.tf {
    float: left;
}
.lattice--pinyin-cap .lattice-frame {
    float: none;
}
/* 对照机构版 Copybook18.css：上拼音格 + 下汉字格（mm） */
.pinyinlattice {
    border: 1px solid #ff4242;
    border-bottom: none;
    margin-right: 0;
    background: #fff;
    letter-spacing: normal;
    width: 15mm;
    height: 7mm;
    font-family: "pinyin", "ZitiePinyin", sans-serif;
    font-size: 16px;
    position: relative;
    box-sizing: border-box;
}
.pinyinlattice > .svglattice {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.pinyindiv {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 1;
}
.lattice--pinyin-cap > .lattice-frame,
.tf > .lattice-frame {
    border: 1px solid #ff4242;
    margin-right: 0;
    position: relative;
    width: 15mm;
    height: 15mm;
    line-height: 15mm;
    box-sizing: border-box;
    float: none;
}
/* 拼音帖：相邻汉字格共竖线；词间空格格（lattice--pinyin-gap）不算相邻，保留词尾右侧线 */
.lattice--pinyin-cap:not(.lattice--pinyin-gap):has(+ .lattice--pinyin-cap:not(.lattice--pinyin-gap)) > .pinyinlattice,
.lattice--pinyin-cap:not(.lattice--pinyin-gap):has(+ .lattice--pinyin-cap:not(.lattice--pinyin-gap)) > .lattice-frame {
    border-right: none;
}
.py-row > .py-cell:has(+ .py-cell) {
    border-right: none;
}
/* 四线格：相邻行之间共一条横线，避免行间上下边框叠成双线 */
.page-main--pinyin-line .py-row:has(+ .py-row) > .py-cell {
    border-bottom: none;
}
.lattice--pinyin-cap .svgdiv,
.tf .svgdiv {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}
.page-main--word-pinyin,
.page-main--name {
    max-width: 100%;
    margin: 0 auto;
}
.pinyin-cap-row {
    overflow: hidden;
}
/* 文章拼音帖：对照机构版 fill-py-lattice.js（上 pinyin 条 + 下汉字格） */
.lattice--article-py {
    float: left;
}
.lattice--article-py .pinyin-strip {
    white-space: nowrap;
    overflow: hidden;
    font-family: "pinyin", "ZitiePinyin", sans-serif;
    text-align: center;
    box-sizing: border-box;
    color: #000;
}
.lattice--article-py > .lattice-frame {
    float: none;
}
.lattice--article-py-pad {
    float: left;
}
.lattice--article-py-pad .article-py-pad-spacer {
    display: block;
    box-sizing: border-box;
}
.lattice-frame--pinyin-col .glyph--pinyin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 1;
    width: 100%;
    text-align: center;
}
.font-size-ctrl {
    margin-top: 10px;
}
.font-size-ctrl .font-size-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.name-title-row {
    margin: 0 auto 3mm;
    overflow: hidden;
}
.name-title-row .tf {
    float: left;
}
.stroke-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.name-section-title {
    text-align: center;
    font-size: 13px;
    margin: 3mm 0 2mm;
    color: #333;
    letter-spacing: 0.12em;
}
.txt-special--stroke { font-family: "ZitieStrokes", sans-serif !important; font-size: 22px; }
.txt-special--kongbi { font-family: "ZitieKongbi", sans-serif !important; font-size: 28px; }
.txt-special--radical { font-family: "ZitieRadical", sans-serif !important; font-size: 22px; }
.txt-special--phonetic {
    font-family: "yinbiaoziti", "ZitieYinbiao", "Noto Sans SC", sans-serif !important;
    font-size: 20px;
    letter-spacing: 0.04em;
    word-spacing: 0.35em;
}
.math-fields .chip-row { margin-bottom: 8px; }
.math-row .glyph--math { letter-spacing: 0.02em; }
.glyph-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    overflow: visible;
    padding: 4px 0;
}
.glyph-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: #06bfff;
    color: #fff;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
}
.glyph-btn--stroke { font-family: "ZitieStrokes", sans-serif; font-size: 20px; }
.glyph-btn--kongbi { font-family: "ZitieKongbi", sans-serif; font-size: 26px; width: 44px; height: 44px; line-height: 44px; }
.glyph-btn--radical { font-family: "ZitieRadical", sans-serif; font-size: 22px; }
.glyph-btn--phonetic {
    font-family: "yinbiaoziti", "ZitieYinbiao", "Noto Sans SC", sans-serif;
    font-size: 15px;
    min-width: 52px;
    padding: 0 10px;
    height: 34px;
    line-height: 34px;
}
.glyph-picker-actions { display: flex; gap: 8px; margin-top: 8px; }
.glyph-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.glyph-group-title {
    flex: 0 0 100%;
    width: 100%;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.glyph--stroke { font-family: "ZitieStrokes", sans-serif !important; }
.glyph--kongbi { font-family: "ZitieKongbi", sans-serif !important; }
.glyph--radical { font-family: "ZitieRadical", sans-serif !important; }
.glyph--phonetic { font-family: "ZitieYinbiao", "Noto Sans SC", sans-serif !important; }
.glyph--pinyin { font-family: "pinyin", "ZitiePinyin", sans-serif !important; }
.glyph--number { font-family: "shuzi", "ZitieShuzi", sans-serif !important; }
.glyph--english {
    font-family: "ZitieEnglish", "shuyaoEnglishHengshuiStyle", sans-serif !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
}

/* —— 拼音字母纸：对照机构版 parameter.js（15×10mm / 19×10mm）—— */
.page-main--pinyin-line {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}
.py-row {
    margin-bottom: 5px;
    overflow: hidden;
}
.py-cell {
    border: 1px solid #ff4242;
    margin-right: 0;
    position: relative;
    width: 15mm;
    height: 10mm;
    float: left;
    box-sizing: border-box;
    background: #fff;
}
.py-cell .svglattice {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
/* 对照机构版 css/zitie/Copybook22.css：顶对齐 + line-height 8.9mm（10mm 格） */
.py-cell .nosvgdiv,
.py-cell .svgdiv {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform: none;
    -webkit-transform: none;
    overflow: hidden;
    text-align: center;
    font-family: "pinyin", "ZitiePinyin", sans-serif;
    font-size: 26px;
    line-height: 8.9mm;
    font-weight: 400 !important;
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased;
}
.py-cell .svgdiv.py-cell-trace-stroke {
    color: transparent;
}
.py-cell .nosvgdiv { color: #000; }
/* 26/27：汉字格无内线，字号由 editor 与用户字体控制 */
.py-cell--hanzi-fang {
    background: #fff;
}
.py-cell .py-cell-hanzi {
    font-size: 28px;
}
.page-main--pinyin-line .py-cell .nosvgdiv.py-cell-py {
    font-weight: 400 !important;
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased;
    line-height: 8.9mm !important;
    white-space: nowrap;
}
.page-main--pinyin-line .py-cell .svgdiv.py-cell-hanzi {
    font-weight: 400 !important;
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased;
    line-height: 10mm;
}
.py-cell .svgdiv > object {
    display: block;
    width: 100%;
    height: 100%;
}
.cb { clear: both; }

/* —— 英文行纸：对照机构版 Yingwen-lattice.js（A4 行宽 180mm）+ Copybook32.css —— */
.page-main--english-line {
    width: 180mm;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}
.en-line-row {
    height: 53px;
    position: relative;
    width: 180mm;
    max-width: 100%;
    margin: 0 auto;
    /* 下伸字母留在本行四线格内，勿侵入下一行被遮挡 */
    overflow: hidden;
}
.en-line-row > .svglattice {
    display: block;
    width: 180mm !important;
    height: auto !important;
}
.en-line-row .latticeContent {
    position: absolute;
    left: 0;
    top: 4px;
    font-family: "ZitieEnglish", "shuyaoEnglishHengshuiStyle", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    line-height: 29px;
    font-size: 30px;
    /* 对照机构版 Copybook32.css：不裁切，Y/g/y 下伸需完整显示 */
    overflow: visible;
    width: 100%;
    height: auto;
    min-height: 32px;
    text-align: left;
    white-space: nowrap;
    z-index: 1;
}
.en-line-row .nosvgdiv,
.en-line-row .svgdiv {
    font-weight: 400 !important;
    font-synthesis: none !important;
}
.en-line-row .nosvgdiv {
    margin: 0 0 0 5px;
    color: #000 !important;
    display: inline-block;
}
.en-line-row .svgdiv {
    margin: 0 0 0 20px;
    display: inline-block;
}
.en-line-row .yinbiao {
    font-family: "yinbiaoziti", "ZitieYinbiao", sans-serif !important;
}
.en-line-row .commonly {
    width: 50%;
    float: left;
}
.en-line-row--bilingual-cn {
    height: auto;
    min-height: 63px;
    overflow: visible;
}
.en-bilingual-cn {
    font-size: 20px;
    width: 100%;
    text-align: left;
    line-height: 63px;
    color: #000;
    font-family: "ZitieKaiti", serif;
}
.numFont_1_1 { font-family: "shuzi", "ZitieShuzi", sans-serif !important; font-size: 50px; margin-top: 1px; }
.numFont_1_10 { font-family: "shuzi", "ZitieShuzi", sans-serif !important; font-size: 58px; margin-left: -1px; }
.numFont_1_20 { font-family: "shuzi", "ZitieShuzi", sans-serif !important; font-size: 77px; margin-left: -1px; margin-top: 1px; }
.numFont_2_1 { font-family: "shuzi", "ZitieShuzi", sans-serif !important; font-size: 50px; letter-spacing: -26px; margin-left: -1px; }
.numFont_2_10 { font-family: "shuzi", "ZitieShuzi", sans-serif !important; font-size: 59px; letter-spacing: -30px; margin-left: -2px; }
.numFont_2_20 { font-family: "shuzi", "ZitieShuzi", sans-serif !important; font-size: 77px; letter-spacing: -38px; margin-left: -2px; margin-top: 1px; }
.article-pyin-row {
    overflow: visible;
}
.row--stroke-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 2mm;
    margin-top: 2mm;
    box-sizing: border-box;
}
.page-main--stroke-pinyin .row--stroke-desc:first-child,
.page-main--brand-corner .row--stroke-desc:first-child {
    margin-top: 0;
}
.page-slot-filler {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
}
.row--stroke-desc .desc-fanzi {
    font-size: 22px;
    line-height: 1;
    color: #222;
    flex: 0 0 auto;
}
.row--stroke-desc .desc-py {
    font-family: "pinyin", "ZitiePinyin", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-synthesis: none;
    color: #333;
    flex: 0 0 auto;
}
.row--stroke-desc .desc-strokes {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
}
.stroke-thumb {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    position: static;
}
.glyph--math-v {
    display: block;
    padding: 3mm 4mm 2mm;
    font-family: "Noto Sans SC", Arial, sans-serif !important;
    overflow: visible;
    box-sizing: border-box;
    height: 100%;
}
.math-v-line {
    line-height: 1;
}
.math-v-fr {
    float: right;
    clear: right;
}
.math-v-cb {
    clear: both;
    height: 0;
    overflow: hidden;
}
.math-v-hengxian {
    float: right;
    clear: both;
    height: 1.5px;
    background: #111;
    margin: 3px 0 5px;
    /* width 由 JS 按「符号+数字」列宽写入，禁止拉满格子 */
}
.glyph--math-v span {
    display: inline-block;
    width: var(--math-digit-w, 1.35em);
    text-align: center;
    font-size: 1em;
    margin: 2px 0 0 var(--math-digit-gap, 2px);
    vertical-align: top;
    box-sizing: border-box;
}
.glyph--math-v span.kuang {
    border: 1.5px solid #111;
    height: var(--math-digit-w, 1.35em);
    box-sizing: border-box;
    background: #fff;
}
.page-main--math-v {
    padding-top: 3mm;
}
.page-main--math-v .math-row--v {
    overflow: visible;
    box-sizing: border-box;
}
.page-main--math-v .lattice--math-v {
    float: left;
    box-sizing: border-box;
    overflow: visible;
}
.page-main--math-v .lattice--math-v .lattice-frame {
    overflow: visible;
    box-sizing: border-box;
}
.page-main--math-v .math-row {
    align-items: flex-start;
}
.page-main--math .glyph--math {
    font-family: "Noto Sans SC", Arial, sans-serif !important;
    letter-spacing: 0.04em;
}
/* 横式口算：对照机构版 NumHorizontal，题少疏、题多密 */
.page-main--math-h {
    padding-top: 3mm;
}
.page-main--math-h .math-row--h {
    overflow: hidden;
    box-sizing: border-box;
}
.page-main--math-h .lattice--math-h {
    float: left;
    box-sizing: border-box;
}
.page-main--math-h .lattice--math-h .lattice-frame {
    float: none;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 2.5mm;
}
.page-main--math-h .lattice--math-h .glyph {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: auto;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    line-height: 1.15 !important;
}
.math-fill-line {
    display: inline-block;
    width: 2.6em;
    height: 1.05em;
    margin: 0 0.12em;
    border-bottom: 1.5px solid #333;
    box-sizing: border-box;
    vertical-align: baseline;
    flex: 0 0 auto;
    align-self: baseline;
}
.page-main--math-sparse .math-row--h {
    /* 30 题：行距更疏，已由行高体现，略加上下呼吸 */
}
.page-main--math-dense .math-row--h .glyph {
    letter-spacing: 0;
}
.math-answer-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 4px 0 10px;
}
.math-answer-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 92%;
    overflow: hidden;
}
.math-answer-list li {
    float: left;
    text-align: left;
    box-sizing: border-box;
    padding: 4px 6px;
    min-height: 36px;
}
.math-answer-list--3 li { width: 33.33%; }
.math-answer-list--4 li { width: 25%; }
.math-answer-list--5 li { width: 20%; }
.math-answer-idx {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    border: 1px solid #666;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.math-answer-body {
    font-size: 15px;
    vertical-align: middle;
}
.math-answer-body span {
    margin: 0 1px;
}
.math-answer-blank {
    text-decoration: underline;
}
.math-fields .math-field-block {
    margin-bottom: 10px;
}
.tone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }

.tone-entry-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 5px 10px;
    border: 1px solid #ffc9c9;
    border-radius: 999px;
    background: #fff8f8;
    color: var(--red);
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
}
.tone-entry-btn[hidden] { display: none !important; }
.tone-entry-btn:hover { background: #ffecec; }

.tone-modal[hidden] { display: none !important; }
.tone-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tone-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(57, 61, 73, 0.75);
}
.tone-modal-panel {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 32px));
    max-height: min(600px, calc(100vh - 48px));
    overflow: auto;
    background: #fff;
    border-radius: 10px;
    padding: 28px 24px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.tone-modal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--ink);
}
.tone-modal-list {
    font-family: "pinyin", "ZitiePinyin", sans-serif;
    font-size: 15px;
}
.tone-modal-list .tone-row {
    margin: 0 8px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    gap: 12px;
}
.tone-modal-list .tone-word {
    min-width: 1.5em;
    font-family: "ZitieKaiti", serif;
    font-size: 22px;
    font-weight: 600;
}
.tone-modal-list .tone-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 16px;
    color: var(--ink);
}
.tone-modal-list .tone-opt input {
    accent-color: var(--red);
}
.tone-modal-actions {
    text-align: center;
    margin-top: 24px;
}
.tone-modal-ok {
    min-width: 120px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background-image: var(--gradient);
    color: #fff;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}
.tone-word { font-size: 18px; min-width: 28px; }

/* 全站确认 / 提示对话框 */
body.zd-modal-open { overflow: hidden; }
.zd-modal[hidden] { display: none !important; }
.zd-modal {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.zd-mask {
    position: absolute;
    inset: 0;
    background: rgba(51, 51, 51, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.zd-panel {
    position: relative;
    z-index: 1;
    width: min(400px, 100%);
    background: var(--panel);
    border-radius: 16px;
    padding: 28px 24px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    text-align: center;
    animation: zd-in 0.22s ease-out;
}
@keyframes zd-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.zd-icon-wrap {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fff0f0 0%, #ffe8e0 100%);
}
.zd-icon-wrap--default {
    background: linear-gradient(145deg, #f5f5f5 0%, #ebebeb 100%);
}
.zd-icon {
    display: block;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.zd-icon--danger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 7h14l-1.2 12H6.2L5 7z' stroke='%23FF4242' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 7V5a3 3 0 016 0v2' stroke='%23FF4242' stroke-width='1.6'/%3E%3Cpath d='M10 11v5M14 11v5' stroke='%23FF7142' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zd-icon--info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23FF4242' stroke-width='1.6'/%3E%3Cpath d='M12 10v6M12 7h.01' stroke='%23FF7142' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zd-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}
.zd-message {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}
.zd-detail {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
.zd-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.zd-btn {
    flex: 1 1 0;
    height: 44px;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    border: 0;
    transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.zd-btn--ghost {
    background: var(--field);
    color: var(--muted);
    border: 1px solid var(--line);
}
.zd-btn--ghost:hover {
    background: #eee;
    color: var(--ink);
}
.zd-btn--primary {
    background-image: var(--gradient);
    color: #fff;
    font-weight: 500;
}
.zd-btn--primary:hover {
    filter: brightness(1.04);
}
.zd-btn--danger {
    background-image: var(--gradient);
}
.zd-btn--full {
    flex: 1 1 100%;
    max-width: 100%;
}
.zd-btn:focus-visible {
    outline: 2px solid #ff8a7a;
    outline-offset: 2px;
}

.site-footer {
    background: #333;
    color: #fff;
    font-size: 14px;
    padding: 40px 16px;
    text-align: left;
}
.site-footer-inner {
    max-width: 1300px;
    margin: 0 auto;
}
.site-footer p { margin: 10px 0; }
.site-footer a { color: #a6a6a6; }

@media (max-width: 980px) {
    .site-header-inner.main {
        padding: 0 12px;
    }
    .brand,
    .logo {
        width: auto;
        margin: 3px 16px 0 0;
    }
    .header-menu {
        display: none;
    }
    .header-download-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .type-grid { grid-template-columns: 1fr; }
    .cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .make-workspace {
        flex-direction: column;
        min-height: 0;
    }
    .preview-stage,
    .control-pane,
    .function {
        flex: none;
        width: 100%;
        max-width: none;
        min-height: 0;
        position: static;
        transform: none;
        box-shadow: none;
    }
    .preview-stage-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 24px 12px 0;
    }
    .preview-surface {
        padding: 20px 12px;
    }
    .function-main {
        margin-left: 20px;
        padding-right: 20px;
    }
    .function-title,
    .function-describe,
    .function-content,
    .content-box {
        width: 100%;
    }
    .create-bar,
    .createcopybook {
        height: auto;
        padding: 24px 16px 32px;
    }
    .create-bar-inner {
        justify-content: center;
        padding: 16px 16px 28px;
    }
    .create-bar-actions {
        flex: none;
        width: 100%;
        max-width: 400px;
        padding: 0;
    }
}

@media (max-width: 640px) {
    .site-header {
        height: 52px;
    }
    .site-header-inner.main {
        height: 52px;
        padding: 0 12px;
    }
    .brand img,
    .logo img {
        height: 40px;
    }
    .header-actions {
        margin-left: auto;
    }
    .header-login {
        padding: 5px 14px;
        font-size: 13px;
        max-width: 120px;
    }
    .copyview {
        height: auto;
        padding-bottom: 12px;
    }
    .copyview ul {
        width: 100%;
        height: auto;
        padding: 12px 8px;
        overflow-x: auto;
        white-space: nowrap;
    }
    .copyview li {
        float: none;
        display: inline-block;
        width: 72px;
        vertical-align: top;
        white-space: normal;
    }
    .copyview img {
        width: 90%;
    }
    .copyview p {
        font-size: 12px;
    }
    .preview-stage-bar {
        justify-content: center;
        gap: 8px;
        padding: 16px 10px 8px;
    }
    .function-main {
        margin-left: 16px;
        padding: 0 16px 32px 0;
    }
    .function-title {
        font-size: 28px;
        margin-top: 20px;
    }
    .function-describe {
        font-size: 16px;
    }
    .function-min-title,
    .control-pane .field-label {
        margin-top: 28px;
        font-size: 16px;
    }
    .chip-font,
    .cnFontList {
        width: 120px;
        min-width: 120px;
        height: 54px;
        font-size: 16px;
    }
    .preview-quick-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
    .preview-quick-btn {
        padding: 7px 12px;
        font-size: 12px;
    }
    .create-bar .btn-print {
        flex: 1 1 160px;
        max-width: 240px;
        width: auto;
        height: 64px;
        line-height: 64px;
        font-size: 22px;
        margin: 0;
    }
    .preview-stage-actions {
        justify-content: center;
    }
    .zoom-btn {
        min-width: 40px;
        height: 36px;
        font-size: 14px;
    }
    .preview-surface {
        padding: 12px 8px;
    }
}

/* 制作页登录弹层（对照老站 layer/login） */
body.zl-modal-open {
    overflow: hidden;
}
.zl-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.zl-modal[hidden] {
    display: none !important;
}
.zl-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.zl-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 28px 24px 24px;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.zl-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M1 1l10 10M11 1L1 11'/%3E%3C/svg%3E") center no-repeat;
    cursor: pointer;
}
.zl-switch {
    position: absolute;
    top: 24px;
    right: 48px;
    min-width: 82px;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: #b6bcce;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.zl-sub {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    padding-right: 90px;
}
.zl-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #333;
}
.zl-qrcode {
    display: block;
    margin: 0 auto;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}
.zl-wx-tip {
    margin: 10px 0 0;
    text-align: center;
    font-size: 14px;
    color: #e53935;
}
.zl-wx-tip--strong {
    font-size: 15px;
}
.zl-input {
    display: block;
    width: 100%;
    height: 42px;
    margin-bottom: 12px;
    padding: 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    box-sizing: border-box;
}
.zl-input:focus {
    outline: none;
    border-color: #ff6b5a;
}
.zl-submit {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 200px;
    background: linear-gradient(#ff4242, #ff7142);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.zl-submit:disabled {
    opacity: 0.65;
    cursor: wait;
}
.zl-error {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #c62828;
    text-align: center;
}

/* 开通会员（个人 / 机构） */
body.zm-modal-open {
    overflow: hidden;
}
.zm-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.zm-modal[hidden] {
    display: none !important;
}
.zm-mask {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 15, 20, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.zm-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 28px 22px 20px;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.zm-panel--paywall {
    max-width: min(800px, 96vw);
    max-height: min(92vh, 920px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 32px 28px 24px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06);
    -webkit-overflow-scrolling: touch;
}
.zm-paywall-tabbar {
    display: flex;
    gap: 0;
    margin: 0 0 20px;
    border-bottom: 1px solid #e8e8e8;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.zm-paywall-tab {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.zm-paywall-tab:hover {
    color: #444;
    background: rgba(255, 255, 255, 0.45);
}
.zm-paywall-tab.is-active {
    color: #333;
    background: #fff;
    border-bottom-color: #ff6b5a;
}
.zm-paywall-tab.is-active[data-tier="org"] {
    border-bottom-color: #d4a017;
}
.zm-paywall-tab-corner {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    background: linear-gradient(135deg, #ff8a65 0%, #ff6b5a 100%);
    vertical-align: middle;
}
.zm-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 680px) {
    .zm-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 420px) {
    .zm-plan-grid {
        grid-template-columns: 1fr;
    }
}
.zm-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 16px;
    border: 2px solid #ececec;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.zm-plan-card:hover {
    border-color: #ffb199;
    box-shadow: 0 4px 16px rgba(255, 107, 90, 0.12);
}
.zm-plan-card.is-selected {
    border-color: #ff6b5a;
    box-shadow: 0 4px 20px rgba(255, 107, 90, 0.2);
}
/* 机构会员 Tab：套餐卡片用金色描边，与个人红色区分 */
.zm-panel--paywall[data-active-tier="org"] .zm-plan-card:hover {
    border-color: #e6c56a;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.18);
}
.zm-panel--paywall[data-active-tier="org"] .zm-plan-card.is-selected {
    border-color: #d4a017;
    box-shadow: 0 4px 20px rgba(212, 160, 23, 0.28);
}
.zm-panel--paywall[data-active-tier="org"] .zm-plan-badge {
    background: linear-gradient(135deg, #f0c14b 0%, #d4a017 100%);
    color: #4a3a10;
}
.zm-panel--paywall[data-active-tier="org"] .zm-plan-card-price strong {
    color: #c8860a;
}
/* 扫码支付步骤：同一浮层内切换，不叠第二层；隐藏套餐区 */
.zm-panel--paywall.is-qr-step {
    max-width: min(460px, 96vw);
}
.zm-panel--paywall.is-qr-step .zm-paywall-tabbar,
.zm-panel--paywall.is-qr-step .zm-paywall-notice,
.zm-panel--paywall.is-qr-step .zm-pay-body,
.zm-panel--paywall.is-qr-step .zm-foot {
    display: none !important;
}
.zm-panel--paywall.is-qr-step .zm-title {
    margin-bottom: 4px;
}
.zm-qr-step[hidden] {
    display: none !important;
}
.zm-panel--paywall.is-qr-step .zm-qr-step:not([hidden]) {
    display: block;
}
.zm-plan-badge {
    position: absolute;
    top: -1px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 0 0 8px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #ff6b5a;
}
.zm-plan-card-title {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.zm-plan-card-price {
    font-size: 14px;
    color: #666;
}
.zm-plan-card-price strong {
    font-size: 28px;
    font-weight: 700;
    color: #e53935;
}
.zm-plan-card-desc {
    font-size: 12px;
    line-height: 1.4;
    color: #999;
    min-height: 2.6em;
}
.zm-pay-cta-hint {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
    text-align: center;
}
.zm-pay-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.zm-pay-actions.zm-pay-actions--row {
    flex-direction: row;
}
.zm-pay-actions .zm-pay-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
    /* 不用全站 .zm-pay-btn 的红渐变，由 --wechat/--alipay 设色 */
    background-color: transparent;
    background-image: none;
}
.zm-pay-actions .zm-pay-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}
.zm-pay-actions .zm-pay-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}
.zm-pay-actions .zm-pay-btn__inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.zm-pay-actions .zm-pay-btn__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    object-fit: contain;
}
.zm-pay-actions .zm-pay-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}
.zm-pay-actions .zm-pay-btn__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}
.zm-pay-actions .zm-pay-btn__sub {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.92;
    line-height: 1.2;
}
.zm-pay-actions .zm-pay-btn__arrow {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.9;
}
.zm-pay-actions .zm-pay-btn__svg {
    flex-shrink: 0;
    display: block;
    width: 26px;
    height: 26px;
}
.zm-panel--paywall .zm-title {
    font-size: 22px;
}
.zm-panel--paywall .zm-sub {
    font-size: 14px;
    margin-bottom: 20px;
}
.zm-paywall-notice {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff8e6;
    border: 1px solid #ffe0a3;
    color: #8a5a00;
    font-size: 13px;
    line-height: 1.5;
}
.zm-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #333;
}
.zm-sub {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    text-align: center;
}
.zm-plans {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zm-plan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.zm-plan:hover {
    border-color: #ff8a65;
    box-shadow: 0 2px 12px rgba(255, 107, 90, 0.12);
}
.zm-plan--org {
    border-color: #f0d9a8;
    background: linear-gradient(180deg, #fffdf8 0%, #fff9ee 100%);
}
.zm-plan-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.zm-plan-price {
    font-size: 14px;
    color: #555;
}
.zm-plan-price strong {
    font-size: 22px;
    color: #e53935;
    font-weight: 700;
}
.zm-plan-desc {
    font-size: 12px;
    color: #888;
}
.zm-foot {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #999;
    text-align: center;
}
.zm-foot a {
    color: #ff6b5a;
}
.zm-plan--block {
    cursor: default;
}
.zm-plan--block:hover {
    box-shadow: none;
}
.zm-plan-pay {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}
.zm-pay-btn {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: 200px;
    background-image: var(--gradient);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.zm-pay-btn--alt {
    background: #fff;
    color: #ff6b5a;
    border: 1px solid #ff6b5a;
    background-image: none;
}
/* 须在 .zm-pay-btn 之后，避免被全站渐变 background-image 盖掉 */
.zm-pay-actions .zm-pay-btn--wechat {
    background: linear-gradient(165deg, #12d977 0%, #07c160 55%, #06a854 100%);
    box-shadow: 0 4px 16px rgba(7, 193, 96, 0.38);
    color: #fff;
}
.zm-pay-actions .zm-pay-btn--wechat:hover {
    box-shadow: 0 6px 20px rgba(7, 193, 96, 0.45);
}
.zm-pay-actions .zm-pay-btn--alipay {
    background: linear-gradient(165deg, #4096ff 0%, #1677ff 55%, #0958d9 100%);
    box-shadow: 0 4px 16px rgba(22, 119, 255, 0.35);
    color: #fff;
}
.zm-pay-actions .zm-pay-btn--alipay:hover {
    box-shadow: 0 6px 20px rgba(22, 119, 255, 0.42);
}
.zm-qr-step {
    text-align: center;
    padding: 4px 0 8px;
}
.zm-qr-stage {
    position: relative;
    width: 248px;
    height: 248px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: #f8f9fb;
    border: 1px solid #e8eaed;
    overflow: hidden;
    box-sizing: border-box;
}
.zm-qr-stage .zm-qr-loading,
.zm-qr-stage .zm-qr-success {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    background: #f8f9fb;
}
.zm-qr-stage .zm-qr-loading[hidden],
.zm-qr-stage .zm-qr-success[hidden],
.zm-qr-stage .zm-pay-qr[hidden] {
    display: none !important;
}
.zm-qr-stage .zm-pay-qr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: #fff;
}
.zm-qr-loading[hidden] {
    display: none !important;
}
.zm-qr-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e8eaed;
    border-top-color: #c41e24;
    border-radius: 50%;
    animation: zm-qr-spin 0.75s linear infinite;
}
@keyframes zm-qr-spin {
    to { transform: rotate(360deg); }
}
.zm-qr-loading-text {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--muted, #666);
    line-height: 1.5;
}
.zm-pay-btn.is-busy {
    opacity: 0.65;
    pointer-events: none;
}
.zm-qr-waiting {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--muted, #666);
    line-height: 1.5;
}
.zm-qr-success-icon {
    margin: 0 auto 6px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #059669;
    font-size: 26px;
    font-weight: 700;
}
.zm-qr-success-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: #111;
}
.zm-qr-success-sub {
    margin: 0;
    font-size: 13px;
    color: var(--muted, #666);
}
.zm-pay-done--qr {
    margin: 0 auto 10px;
    display: block;
    max-width: 200px;
}
.zm-pay-done {
    display: inline-block;
    padding: 10px 28px;
    border: 0;
    border-radius: 8px;
    background: #c41e24;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.zm-pay-done:hover {
    background: #a0181d;
}
.zm-pay-back {
    border: 0;
    background: none;
    color: #369;
    font-size: 14px;
    cursor: pointer;
}
.make-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(100%, 240px);
    padding: 3px 4px 3px 12px;
    border-radius: 10px;
    background: #f0f1f3;
    border: 1px solid #e2e4e8;
    box-sizing: border-box;
}
.make-status-chip-label {
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.make-status-chip-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.make-status-chip-btn:not(.make-status-chip-btn--accent):hover {
    background: #fafafa;
}
.make-status-chip-btn--accent {
    background-color: transparent;
    background-image: var(--gradient);
    color: #fff;
    box-shadow: none;
}
.make-status-chip-btn--accent:hover,
.make-status-chip-btn--accent:active,
.make-status-chip-btn--accent:focus-visible {
    background-color: transparent;
    background-image: var(--gradient);
    color: #fff;
    opacity: 0.92;
}
.zitie-make-draft-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10050;
    padding: 10px 18px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 14px;
    pointer-events: none;
}