/* ============================================================
   儿童练字纸系列（writing-lab）· 统一工作台样式
   ------------------------------------------------------------------
   设计思路：左侧「参数台」+ 右侧「A4 纸舞台」，主色靛蓝，纸面米白。
   与站内其它 calc-* 工具视觉区分；所有颜色走 CSS 变量，自带黑夜模式。
   ============================================================ */

.wl {
    --wl-ink: #1b2430;
    --wl-ink-2: #34435a;
    --wl-muted: #6b7a90;
    --wl-line: #e2e8f0;
    --wl-bg: #f2f5fa;
    --wl-card: #ffffff;
    --wl-soft: #f7f9fc;
    --wl-accent: #4f46e5;
    --wl-accent-soft: rgba(79, 70, 229, .1);
    --wl-sky: #0ea5e9;
    --wl-warm: #f59e0b;
    --wl-ok: #10b981;
    --wl-danger: #e11d48;
    --wl-radius: 16px;
    --wl-shadow: 0 10px 30px rgba(21, 34, 56, .08);
    color: var(--wl-ink);
}

[data-theme="dark"] .wl {
    --wl-ink: #e7edf6;
    --wl-ink-2: #c4d0e0;
    --wl-muted: #93a3b8;
    --wl-line: #2a3442;
    --wl-bg: #0e141c;
    --wl-card: #151d27;
    --wl-soft: #1a2330;
    --wl-accent: #818cf8;
    --wl-accent-soft: rgba(129, 140, 248, .16);
    --wl-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------------- 首屏 ---------------- */
.wl-hero {
    padding: 26px 0 18px;
}

.wl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--wl-accent-soft);
    color: var(--wl-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.wl-hero h1 {
    margin: 12px 0 8px;
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.01em;
}

.wl-hero-sub {
    margin: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--wl-ink-2);
}

.wl-hero-sub b { color: var(--wl-ink); }

.wl-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.wl-hero-tags span {
    padding: 4px 10px;
    border: 1px solid var(--wl-line);
    border-radius: 8px;
    background: var(--wl-card);
    font-size: 12.5px;
    color: var(--wl-muted);
}

/* ---------------- 工作台 ---------------- */
.wl-workspace {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin: 8px 0 22px;
}

.wl-panel {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--wl-line);
    border-radius: var(--wl-radius);
    background: var(--wl-card);
    box-shadow: var(--wl-shadow);
    max-height: calc(100vh - 40px);
    overflow: auto;
}

.wl-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--wl-line);
}

.wl-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.wl-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--wl-muted);
    text-transform: uppercase;
}

.wl-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wl-field > label,
.wl-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-ink-2);
}

.wl-input,
.wl-select,
.wl-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--wl-line);
    border-radius: 9px;
    background: var(--wl-soft);
    color: var(--wl-ink);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.wl-input:focus,
.wl-select:focus,
.wl-textarea:focus {
    border-color: var(--wl-accent);
    box-shadow: 0 0 0 3px var(--wl-accent-soft);
}

.wl-textarea {
    min-height: 74px;
    resize: vertical;
    font-family: inherit;
}

.wl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.wl-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--wl-muted);
}

.wl-hint b { color: var(--wl-ink-2); }

/* 分段按钮 */
.wl-seg {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--wl-line);
    border-radius: 10px;
    background: var(--wl-soft);
}

.wl-seg button {
    flex: 1;
    padding: 6px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wl-muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.wl-seg button.is-on {
    background: var(--wl-card);
    color: var(--wl-accent);
    box-shadow: 0 1px 3px rgba(21, 34, 56, .12);
}

/* 复选组 */
.wl-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wl-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--wl-line);
    border-radius: 999px;
    background: var(--wl-soft);
    font-size: 12.5px;
    color: var(--wl-ink-2);
    cursor: pointer;
    user-select: none;
}

.wl-check input { accent-color: var(--wl-accent); }

.wl-check.is-on {
    border-color: var(--wl-accent);
    background: var(--wl-accent-soft);
    color: var(--wl-accent);
    font-weight: 700;
}

/* 滑块 */
.wl-range {
    width: 100%;
    accent-color: var(--wl-accent);
}

.wl-range-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wl-accent);
}

/* 按钮 */
.wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--wl-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s, opacity .15s, background .15s;
}

.wl-btn:hover { transform: translateY(-1px); }
.wl-btn:active { transform: translateY(0); }

.wl-btn--ghost {
    background: var(--wl-card);
    border-color: var(--wl-line);
    color: var(--wl-ink-2);
}

.wl-btn--sm { padding: 6px 10px; font-size: 12.5px; }
.wl-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------------- 舞台 ---------------- */
.wl-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.wl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--wl-line);
    border-radius: 12px;
    background: var(--wl-card);
    box-shadow: var(--wl-shadow);
}

.wl-toolbar .wl-spacer { flex: 1; }

.wl-tool-tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wl-soft);
    font-size: 12px;
    color: var(--wl-muted);
    font-variant-numeric: tabular-nums;
}

.wl-paper-wrap {
    display: flex;
    justify-content: center;
    padding: 18px;
    border: 1px solid var(--wl-line);
    border-radius: var(--wl-radius);
    background:
        radial-gradient(circle at 20% 0%, rgba(79, 70, 229, .07), transparent 45%),
        var(--wl-bg);
    overflow: auto;
    min-height: 420px;
}

[data-theme="dark"] .wl-paper-wrap {
    background:
        radial-gradient(circle at 20% 0%, rgba(129, 140, 248, .12), transparent 45%),
        var(--wl-bg);
}

/* 缩放容器：用绝对定位的纸张 + 固定尺寸外壳，保证缩小后不撑出横向滚动条 */
.wl-paper-fit {
    position: relative;
    margin: 0 auto;
}

.wl-paper {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    min-height: 297mm;
    padding: 12mm 10mm;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 8px 28px rgba(21, 34, 56, .16);
    transform-origin: top left;
    transition: transform .18s;
    box-sizing: border-box;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wl-paper--landscape {
    width: 297mm;
    min-height: 210mm;
}

/* 纸张头部信息栏 */
.wl-sheet-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 4mm;
    margin-bottom: 5mm;
    border-bottom: 1.2pt solid #d9d2c2;
}

.wl-sheet-title {
    font-size: 16pt;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.3;
}

.wl-sheet-sub {
    margin-top: 2mm;
    font-size: 8.5pt;
    color: #6b6b6b;
    letter-spacing: .02em;
}

.wl-sheet-meta {
    display: flex;
    gap: 5mm;
    font-size: 9pt;
    color: #555;
    white-space: nowrap;
}

.wl-sheet-meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 2mm;
}

.wl-sheet-meta i {
    display: inline-block;
    width: 18mm;
    border-bottom: 1px solid #bbb;
    transform: translateY(-1px);
}

/* 分区小标题（听写按课次） */
.wl-sheet-sec {
    margin: 4mm 0 2mm;
    font-size: 10pt;
    font-weight: 800;
    color: #333;
}

/* ---------------- 汉字格 ---------------- */
.wl-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 10), var(--cell, 18mm));
    gap: 0;
    width: max-content;
}

.wl-cell {
    position: relative;
    width: var(--cell, 18mm);
    height: var(--cell, 18mm);
    box-sizing: border-box;
    border: 1px solid #d8cfbc;
    margin: 0 -1px -1px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* 田字格：十字虚线 */
.wl-cell--tian::before,
.wl-cell--tian::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.wl-cell--tian::before {
    left: 0; right: 0; top: 50%;
    border-top: 1px dashed #e8c9c9;
}

.wl-cell--tian::after {
    top: 0; bottom: 0; left: 50%;
    border-left: 1px dashed #e8c9c9;
}

/* 米字格：再加两条对角线（实线更清晰） */
.wl-cell--mi {
    background-image:
        linear-gradient(45deg, transparent calc(50% - .5px), #ead6d6 calc(50% - .5px), #ead6d6 calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(-45deg, transparent calc(50% - .5px), #ead6d6 calc(50% - .5px), #ead6d6 calc(50% + .5px), transparent calc(50% + .5px));
}

/* 回宫格：内框 */
.wl-cell--hui::before {
    content: "";
    position: absolute;
    inset: 25%;
    border: 1px dashed #e8c9c9;
}

/* 空白方格：不加线 */

.wl-ch {
    font-family: "Kaiti SC", "KaiTi", "STKaiti", "Kaiti TC", "Songti SC", serif;
    font-size: calc(var(--cell, 18mm) * var(--glyph, .76));
    line-height: 1;
    user-select: none;
    position: relative;
    z-index: 1;
}

.wl-ch--solid { color: #1f2937; }
.wl-ch--trace { color: #dfe3e8; }              /* 描红（浅灰） */
.wl-ch--hollow {
    color: transparent;
    -webkit-text-stroke: .9px #c9cfd8;
}
.wl-ch--blank { color: transparent; }

/* 格内拼音 */
.wl-cell-py {
    position: absolute;
    top: 1mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: calc(var(--cell, 18mm) * .19);
    color: #555;
    font-family: "Times New Roman", Georgia, serif;
    letter-spacing: .01em;
    z-index: 1;
    line-height: 1;
}

.wl-cell-py + .wl-ch { margin-top: calc(var(--cell, 18mm) * .13); }

/* 格内笔顺序号（小字，右下角） */
.wl-cell-order {
    position: absolute;
    right: 2%;
    bottom: 1%;
    font-size: calc(var(--cell, 18mm) * .13);
    color: #9aa3ad;
}

/* 一行一个字的「字头 + 描红」布局 */
.wl-char-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 3mm;
    page-break-inside: avoid;
}

.wl-char-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--cell, 18mm);
    margin-right: 2mm;
    border: 1px solid #d8cfbc;
    border-radius: 2mm;
    background: #faf7f0;
}

.wl-char-head .wl-ch { font-size: calc(var(--cell, 18mm) * .62); }

.wl-char-head small {
    margin-top: 1mm;
    font-size: 7pt;
    color: #7a7a7a;
    font-family: "Times New Roman", Georgia, serif;
}

/* ---------------- 四线三格 ---------------- */
.wl-4line {
    position: relative;
    height: var(--row, 12mm);
    margin-bottom: 2mm;
    background-image:
        linear-gradient(to bottom,
            #d9d2c2 0, #d9d2c2 1px,
            transparent 1px, transparent calc(33.33% - .5px),
            #c9a0a0 calc(33.33% - .5px), #c9a0a0 calc(33.33% + .5px),
            transparent calc(33.33% + .5px), transparent calc(66.66% - .5px),
            #c9a0a0 calc(66.66% - .5px), #c9a0a0 calc(66.66% + .5px),
            transparent calc(66.66% + .5px), transparent calc(100% - 1px),
            #d9d2c2 calc(100% - 1px), #d9d2c2 100%);
    display: flex;
    align-items: flex-end;
    padding: 0 2mm;
    page-break-inside: avoid;
}

.wl-4line .wl-ch {
    font-family: "Times New Roman", Georgia, serif;
    font-size: calc(var(--row, 12mm) * var(--glyph, .82));
    line-height: 1;
    letter-spacing: .4em;
    margin-bottom: calc(var(--row, 12mm) * .04);
}

/* 字母描红：同一行多组，用间距代替字间距，避免大小写并排时超宽 */
.wl-4line .wl-letter-unit {
    flex: 0 0 auto;
    letter-spacing: .04em;
    margin-right: 2.4mm;
}

.wl-4line--word .wl-letter-unit {
    margin-right: 4mm;
}

.wl-4line--word {
    margin-bottom: 2.5mm;
}

/* 数字听写区 */
.wl-num-dict {
    margin-top: 5mm;
    padding-top: 3mm;
    border-top: 1.2pt dashed #d9d2c2;
    page-break-inside: avoid;
}

.wl-num-check {
    margin-top: 2mm;
    font-size: 8.5pt;
    color: #777;
    letter-spacing: .02em;
}

/* ---------------- 横线 / 竖线纸 ---------------- */
.wl-baseline {
    height: var(--row, 10mm);
    border-bottom: 1px solid #d9d2c2;
    page-break-inside: avoid;
}

.wl-baseline--grid {
    border-bottom: 1px dashed #e4ddd0;
}

/* ---------------- 听写纸 ---------------- */
.wl-dict {
    margin-bottom: 6mm;
    page-break-inside: avoid;
}

.wl-dict-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2mm;
    font-size: 10pt;
    font-weight: 800;
}

.wl-dict-head em {
    font-style: normal;
    font-weight: 400;
    color: #666;
    font-size: 9pt;
}

.wl-dict-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 3mm 4mm;
}

.wl-dict-item {
    display: flex;
    align-items: stretch;
    border: 1px solid #d8cfbc;
    min-height: 11mm;
}

.wl-dict-no {
    flex: 0 0 9mm;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e4ddd0;
    background: #faf7f0;
    font-size: 8pt;
    color: #888;
}

.wl-dict-blank {
    flex: 1;
    position: relative;
    background-image: linear-gradient(to bottom, transparent calc(50% - .5px), #ece5d8 calc(50% - .5px), #ece5d8 calc(50% + .5px), transparent calc(50% + .5px));
}

.wl-dict-fix {
    flex: 0 0 22mm;
    border-left: 1px dashed #e4ddd0;
    padding: 1mm;
    font-size: 6.5pt;
    color: #aaa;
    display: flex;
    align-items: flex-start;
}

/* ---------------- 控笔训练 ---------------- */
.wl-trace-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 4mm;
    margin-bottom: 4mm;
    page-break-inside: avoid;
}

.wl-trace-box {
    position: relative;
    border: 1px dashed #d9d2c2;
    border-radius: 2mm;
    padding: 2mm;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22mm;
}

.wl-trace-box span {
    position: absolute;
    left: 2mm;
    top: 1mm;
    font-size: 7pt;
    color: #9a9a9a;
}

.wl-trace-box svg {
    width: 100%;
    height: 18mm;
    overflow: visible;
}

/* 字块右侧（格子 + 笔顺说明） */
.wl-char-body { flex: 1; min-width: 0; }

.wl-bishun-line {
    margin-top: 1.2mm;
    font-size: 8pt;
    line-height: 1.6;
    color: #555;
}

.wl-bishun-line b { color: #222; }
.wl-bishun-line.is-miss { color: #a16207; }

.wl-bishun-tip {
    font-style: normal;
    color: #b45309;
}

/* 偏旁分组 */
.wl-rad-block {
    margin-bottom: 4mm;
    page-break-inside: avoid;
}

.wl-rad-label {
    margin-bottom: 1.5mm;
    font-size: 8.5pt;
    color: #666;
}

.wl-rad-label b { color: #222; }

/* 姓名页大字 */
.wl-name-big {
    margin-bottom: 5mm;
    padding-bottom: 3mm;
    border-bottom: 1px dashed #e0d8c8;
}

.wl-name-py {
    display: flex;
    margin-top: 1.5mm;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 9pt;
    color: #555;
}

.wl-name-py span {
    display: inline-block;
    text-align: center;
}

/* ---------------- 练习题（笔顺判断 / 偏旁归类） ---------------- */
.wl-quiz {
    max-width: 520px;
    margin: 0 auto;
    padding: 6mm 4mm;
}

.wl-quiz-head {
    display: flex;
    justify-content: space-between;
    font-size: 10pt;
    color: #666;
}

.wl-quiz-char {
    margin: 5mm 0 3mm;
    text-align: center;
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-size: 58pt;
    line-height: 1.1;
    color: #1f2937;
}

.wl-quiz-ask {
    text-align: center;
    font-size: 13pt;
    color: #333;
}

.wl-quiz-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3mm;
    margin-top: 5mm;
}

.wl-quiz-opt {
    padding: 4mm 3mm;
    border: 1px solid #d8cfbc;
    border-radius: 2mm;
    background: #fff;
    font-size: 11.5pt;
    color: #333;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.wl-quiz-opt:hover:not([disabled]) { border-color: #94a3b8; }

.wl-quiz-opt.is-right {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
}

.wl-quiz-opt.is-wrong {
    border-color: #e11d48;
    background: #fff1f2;
    color: #9f1239;
}

.wl-quiz-fb {
    margin-top: 5mm;
    font-size: 10.5pt;
    line-height: 1.85;
    color: #444;
}

.wl-quiz-fb .ok { color: #047857; }
.wl-quiz-fb .bad { color: #be123c; }

.wl-quiz-exp {
    margin: 2mm 0 4mm;
    color: #555;
}

.wl-quiz-done {
    padding: 16mm 0;
    text-align: center;
}

.wl-quiz-score {
    font-size: 34pt;
    font-weight: 800;
    color: #1f2937;
}

/* 进度 / 连对 / 限时 */
.wl-quiz-progress {
    height: 6px;
    margin: 3mm 0 0;
    border-radius: 999px;
    background: #eee7da;
    overflow: hidden;
}

.wl-quiz-progress i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transition: width .25s ease;
}

.wl-quiz-streak { color: #b45309; }

.wl-quiz-timer {
    min-height: 5mm;
    margin-top: 3mm;
    text-align: center;
}

.wl-quiz-timer span {
    font-size: 10pt;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.wl-quiz-timer i {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 1.5mm;
    border-radius: 999px;
    background: #f59e0b;
    transition: width .1s linear;
}

.wl-quiz-keys {
    margin-top: 4mm;
    text-align: center;
    font-size: 8pt;
    color: #b0b6bf;
}

.wl-quiz-done-tip { color: #6b7280; }

.wl-quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 3mm;
    justify-content: center;
    margin-top: 5mm;
}

.wl-quiz-perfect { color: #047857; }

.wl-quiz-review {
    margin: 4mm 0;
    padding: 3mm;
    border: 1px dashed #e0d8c8;
    border-radius: 2mm;
    background: #fffdf8;
    text-align: left;
}

.wl-quiz-review-h {
    margin-bottom: 2mm;
    font-size: 10pt;
    font-weight: 800;
    color: #374151;
}

.wl-quiz-review-item {
    display: flex;
    gap: 3mm;
    align-items: flex-start;
    padding: 2mm 0;
    border-top: 1px dashed #eee3d2;
}

.wl-quiz-review-item:first-of-type { border-top: 0; }

.wl-quiz-review-ch {
    flex: 0 0 auto;
    width: 10mm;
    height: 10mm;
    line-height: 10mm;
    text-align: center;
    border: 1px solid #e0d8c8;
    border-radius: 1.5mm;
    background: #fff;
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-size: 14pt;
}

.wl-quiz-review-txt {
    font-size: 9.5pt;
    line-height: 1.7;
    color: #444;
}

.wl-quiz-review-txt small {
    color: #888;
    font-size: 8pt;
    line-height: 1.6;
}

/* ---------------- 偏旁归类 · 分篮玩法 ---------------- */
.wl-sort { max-width: 660px; }

.wl-sort-stage {
    margin: 4mm 0 5mm;
    text-align: center;
}

.wl-sort-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34mm;
    height: 34mm;
    border: 2px solid #c7bda8;
    border-radius: 3mm;
    background: #fffdf7;
    box-shadow: 0 2mm 5mm rgba(31, 41, 55, .08);
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-size: 38pt;
    line-height: 1;
    color: #1f2937;
    cursor: grab;
    user-select: none;
}

.wl-sort-card:active { cursor: grabbing; }

.wl-sort-hint {
    margin-top: 2mm;
    font-size: 9pt;
    color: #8b93a0;
}

.wl-sort-bins {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3mm;
}

.wl-sort-bin {
    position: relative;
    min-height: 34mm;
    padding: 4mm 2mm 2mm;
    border: 1.5px dashed #cbbfa8;
    border-radius: 2.5mm;
    background: #faf8f2;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}

.wl-sort-bin:hover,
.wl-sort-bin.is-over {
    border-color: #6366f1;
    background: #eef2ff;
    transform: translateY(-1px);
}

.wl-sort-bin > b {
    display: block;
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-size: 20pt;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2937;
}

.wl-sort-bin > small {
    display: block;
    margin-top: 1mm;
    font-size: 8.5pt;
    color: #8b93a0;
}

.wl-sort-key {
    position: absolute;
    left: 1.5mm;
    top: 1mm;
    font-size: 8pt;
    color: #b0b6bf;
}

.wl-sort-drop {
    display: flex;
    flex-wrap: wrap;
    gap: 1mm;
    justify-content: center;
    margin-top: 2mm;
}

.wl-sort-drop i {
    padding: 0 1.2mm;
    border: 1px solid #e5ddce;
    border-radius: 1mm;
    background: #fff;
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-style: normal;
    font-size: 12pt;
    line-height: 1.5;
    color: #4b5563;
}

.wl-sort-fb {
    min-height: 8mm;
    margin-top: 3mm;
    text-align: center;
    font-size: 10.5pt;
    line-height: 1.6;
}

.wl-sort-fb .ok { color: #047857; }
.wl-sort-fb .bad { color: #be123c; }

.wl-sort-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2mm;
    margin: 4mm 0;
    text-align: left;
}

.wl-sort-summary > div {
    padding: 2mm;
    border: 1px solid #eee3d0;
    border-radius: 2mm;
    background: #fffdf8;
}

.wl-sort-summary b {
    display: block;
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-size: 16pt;
}

.wl-sort-summary span {
    font-family: "Kaiti SC", "KaiTi", "STKaiti", serif;
    font-size: 11pt;
    color: #6b7280;
}

@media (max-width: 640px) {
    .wl-sort-bins { grid-template-columns: 1fr; }
    .wl-sort-summary { grid-template-columns: 1fr; }
}

/* ---------------- 空状态 / 提示 ---------------- */
.wl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60mm;
    color: #9aa3ad;
    font-size: 11pt;
}

.wl-empty .wl-emoji { font-size: 28pt; line-height: 1; }

.wl-warn {
    margin: 2mm 0 0;
    padding: 2mm 3mm;
    border-left: 3px solid #f59e0b;
    background: #fffaf0;
    color: #7a5a12;
    font-size: 8.5pt;
    line-height: 1.7;
}

/* ---------------- 统计条 ---------------- */
.wl-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wl-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--wl-line);
    border-radius: 999px;
    background: var(--wl-soft);
    font-size: 12.5px;
    color: var(--wl-muted);
}

.wl-stat b {
    font-size: 14px;
    color: var(--wl-ink);
    font-variant-numeric: tabular-nums;
}

/* ---------------- AI 面板 ---------------- */
.wl-ai {
    margin: 0 0 22px;
    border: 1px solid var(--wl-line);
    border-radius: var(--wl-radius);
    background: var(--wl-card);
    box-shadow: var(--wl-shadow);
    overflow: hidden;
}

.wl-ai-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--wl-line);
    background: linear-gradient(120deg, var(--wl-accent-soft), transparent 65%);
    font-size: 14px;
    font-weight: 800;
}

.wl-ai-head .wl-ai-tag {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--wl-soft);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wl-muted);
}

.wl-ai-body {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--wl-ink-2);
    white-space: pre-wrap;
    word-break: break-word;
}

.wl-ai-body.is-empty { color: var(--wl-muted); }

.wl-ai-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
}

.wl-ai-body .wl-typing::after {
    content: "…";
    animation: wl-dot 1s steps(3) infinite;
}

@keyframes wl-dot {
    0% { opacity: .2; }
    50% { opacity: 1; }
    100% { opacity: .2; }
}

/* ---------------- 内容区（说明 / FAQ / 内链） ---------------- */
.wl-doc {
    display: grid;
    gap: 16px;
    margin-bottom: 26px;
}

/* 说明 / 常见问题 / 留言 的切换栏 */
.wl-doc-tabs {
    margin: 0 0 4px;
}

.wl-doc-tabs .detail-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
}

.wl-card {
    padding: 18px 20px;
    border: 1px solid var(--wl-line);
    border-radius: var(--wl-radius);
    background: var(--wl-card);
}

.wl-card h2 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
}

.wl-card h3 {
    margin: 14px 0 6px;
    font-size: 14.5px;
    font-weight: 800;
}

.wl-card p,
.wl-card li {
    font-size: 14px;
    line-height: 1.9;
    color: var(--wl-ink-2);
}

.wl-card p { margin: 0 0 8px; }
.wl-card ul, .wl-card ol { margin: 0 0 8px; padding-left: 20px; }
.wl-card b { color: var(--wl-ink); }

.wl-table-wrap { overflow-x: auto; }

.wl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.wl-table th,
.wl-table td {
    padding: 8px 10px;
    border: 1px solid var(--wl-line);
    text-align: left;
    color: var(--wl-ink-2);
}

.wl-table th {
    background: var(--wl-soft);
    font-weight: 800;
    color: var(--wl-ink);
}

.wl-faq-item {
    border-bottom: 1px dashed var(--wl-line);
    padding: 10px 0;
}

.wl-faq-item:last-child { border-bottom: 0; }

.wl-faq-item summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--wl-ink);
    list-style: none;
}

.wl-faq-item summary::-webkit-details-marker { display: none; }

.wl-faq-item summary::before {
    content: "Q ";
    color: var(--wl-accent);
    font-weight: 900;
}

.wl-faq-item .wl-faq-a {
    margin-top: 6px;
    padding-left: 16px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--wl-muted);
}

.wl-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.wl-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--wl-line);
    border-radius: 12px;
    background: var(--wl-soft);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.wl-link:hover {
    border-color: var(--wl-accent);
    transform: translateY(-1px);
}

.wl-link .i { font-size: 20px; }
.wl-link b { display: block; font-size: 13.5px; color: var(--wl-ink); }
.wl-link small { font-size: 12px; color: var(--wl-muted); }

.wl-disclaim {
    margin: 0 0 26px;
    padding: 12px 14px;
    border: 1px solid var(--wl-line);
    border-left: 3px solid var(--wl-warm);
    border-radius: 10px;
    background: var(--wl-soft);
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--wl-muted);
}

/* ---------------- 打印 ---------------- */
#wlPrintRoot { display: none; }

@media print {
    body.wl-printing > *:not(#wlPrintRoot) { display: none !important; }
    body.wl-printing #wlPrintRoot { display: block !important; }
    body.wl-printing {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #wlPrintRoot .wl-paper {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 10mm 8mm !important;
        width: 210mm;
        min-height: auto;
    }
    #wlPrintRoot .wl-paper--landscape { width: 297mm; }
    #wlPrintRoot .wl-warn { display: none; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
    .wl-workspace { grid-template-columns: 1fr; }
    .wl-panel {
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        align-items: start;
    }
    .wl-group { border-bottom: 0; padding-bottom: 0; }
    .wl-paper-wrap { padding: 10px; }
}

@media (max-width: 640px) {
    .wl-hero { padding-top: 16px; }
    .wl-paper { padding: 6mm 5mm; }
    .wl-sheet-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .wl-sheet-meta { flex-wrap: wrap; gap: 3mm; }
    .wl-panel { padding: 12px; }
    .wl-toolbar { gap: 6px; }
}