/* ============================================================
   天气观察日记与温度记录（weather-diary-kids）
   主题：晴空蓝 #0369a1 + 柠檬日晕 #facc15（与站内其它工具页完全错开）
   深浅双主题：跟随导航栏 #themeToggle（data-theme 挂在 <html>）
   标志性 UI：天空渐变首屏 + 云朵卡片 + 大号 SVG 天气图标 + Canvas 温度折线图
   ============================================================ */

/* 变量作用域：.wdk-page 主体 + 浮层（弹窗 / 打印单 / 提示条）都在根 div 之外，
   必须同作用域声明，否则浮层取不到变量导致背景失效、内容与页面重叠 */
.wdk-page,
.wdk-modal,
.wdk-sheet,
.wdk-toast {
    --wdk-primary: #0369a1;
    --wdk-primary-2: #0284c7;
    --wdk-primary-3: #38bdf8;
    --wdk-primary-deep: #075985;
    --wdk-accent: #facc15;
    --wdk-accent-2: #fbbf24;
    --wdk-accent-deep: #a16207;
    --wdk-primary-soft: #e0f2fe;
    --wdk-accent-soft: #fef9c3;
    --wdk-bg: #f0f7fc;
    --wdk-surface: #ffffff;
    --wdk-surface-2: #f6fbff;
    --wdk-border: rgba(3, 105, 161, .16);
    --wdk-border-strong: rgba(3, 105, 161, .34);
    --wdk-text: #0f2433;
    --wdk-text-soft: #3f5b70;
    --wdk-text-muted: #7b95a8;
    --wdk-warm: #ef6c3b;
    --wdk-cool: #0ea5e9;
    --wdk-danger: #dc2626;
    --wdk-ok: #059669;
    --wdk-shadow: 0 14px 34px -20px rgba(8, 47, 73, .38);
    --wdk-shadow-lg: 0 26px 60px -30px rgba(8, 47, 73, .5);
    --wdk-radius: 18px;
    --wdk-radius-sm: 11px;
    --wdk-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
}

:root[data-theme="dark"] .wdk-page,
:root[data-theme="dark"] .wdk-modal,
:root[data-theme="dark"] .wdk-sheet,
:root[data-theme="dark"] .wdk-toast {
    --wdk-primary: #7dd3fc;
    --wdk-primary-2: #bae6fd;
    --wdk-primary-3: #38bdf8;
    --wdk-primary-deep: #0c4a6e;
    --wdk-accent: #fde047;
    --wdk-accent-2: #fef08a;
    --wdk-accent-deep: #854d0e;
    --wdk-primary-soft: rgba(125, 211, 252, .14);
    --wdk-accent-soft: rgba(253, 224, 71, .14);
    --wdk-bg: #071620;
    --wdk-surface: #0d2230;
    --wdk-surface-2: #12303f;
    --wdk-border: rgba(125, 211, 252, .18);
    --wdk-border-strong: rgba(125, 211, 252, .38);
    --wdk-text: #e6f4fb;
    --wdk-text-soft: #b6d3e4;
    --wdk-text-muted: #7fa3ba;
    --wdk-warm: #fb923c;
    --wdk-cool: #38bdf8;
    --wdk-danger: #f87171;
    --wdk-ok: #34d399;
    --wdk-shadow: 0 14px 34px -20px rgba(0, 0, 0, .85);
    --wdk-shadow-lg: 0 26px 60px -30px rgba(0, 0, 0, .95);
}

.wdk-page {
    color: var(--wdk-text);
    font-size: 15px;
    line-height: 1.8;
}

.wdk-page *,
.wdk-page *::before,
.wdk-page *::after { box-sizing: border-box; }
.wdk-page [hidden] { display: none !important; }
.wdk-page b { font-weight: 700; color: var(--wdk-primary); }
:root[data-theme="dark"] .wdk-page b { color: var(--wdk-primary-2); }
.wdk-page code {
    font-family: var(--wdk-mono);
    font-size: .92em;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--wdk-primary-soft);
    color: var(--wdk-primary-deep);
}
:root[data-theme="dark"] .wdk-page code { color: var(--wdk-primary-2); }

/* ---------------- 天气图标 ---------------- */
.wdk-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; }
.wdk-w-sunny  { color: #f59e0b; }
.wdk-w-partly { color: #38bdf8; }
.wdk-w-cloudy { color: #64748b; }
.wdk-w-rain   { color: #0284c7; }
.wdk-w-storm  { color: #7c3aed; }
.wdk-w-snow   { color: #0ea5e9; }
.wdk-w-fog    { color: #94a3b8; }
:root[data-theme="dark"] .wdk-w-cloudy { color: #94a3b8; }
:root[data-theme="dark"] .wdk-w-fog { color: #cbd5e1; }

/* ---------------- 首屏 ---------------- */
.wdk-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-bottom: 26px;
    padding: 30px 32px;
    border-radius: 26px;
    background:
        radial-gradient(120% 140% at 88% -20%, rgba(253, 224, 71, .35), transparent 55%),
        linear-gradient(135deg, var(--wdk-primary-deep), var(--wdk-primary) 55%, var(--wdk-primary-3));
    box-shadow: var(--wdk-shadow-lg);
    overflow: hidden;
}
.wdk-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%);
    pointer-events: none;
}
.wdk-hero-copy { position: relative; z-index: 1; color: #fff; }
.wdk-hero-copy b { color: #fde68a; }

.wdk-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
}

.wdk-hero-copy h1 {
    margin: 16px 0 12px;
    font-size: 38px;
    line-height: 1.22;
    font-weight: 900;
    letter-spacing: -.02em;
    color: #fff;
}
.wdk-hero-copy h1::after {
    content: "";
    display: block;
    width: 84px;
    height: 4px;
    margin-top: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, #fde047, #fbbf24);
}

.wdk-lead {
    margin: 16px 0 18px;
    font-size: 16px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .92);
    max-width: 56ch;
}

.wdk-tags {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wdk-tags li {
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
}

.wdk-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.wdk-steps li {
    padding: 12px 14px;
    border-radius: var(--wdk-radius-sm);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}
.wdk-steps b {
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    color: #fde047;
    margin-bottom: 3px;
}
.wdk-steps span {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}
.wdk-steps i {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
    margin-top: 2px;
}

/* ---------------- 记录卡（首屏操作入口） ---------------- */
.wdk-form {
    position: relative;
    z-index: 1;
    padding: 20px 20px 18px;
    border-radius: 22px;
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border);
    box-shadow: 0 22px 48px -26px rgba(3, 32, 52, .6);
}
.wdk-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.wdk-form-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--wdk-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.wdk-form-title .wdk-ic { font-size: 20px; }
.wdk-form-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--wdk-primary-deep);
    background: var(--wdk-primary-soft);
    border: 1px solid var(--wdk-border);
}
.wdk-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.wdk-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wdk-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wdk-text-soft);
    margin-bottom: 5px;
}
.wdk-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--wdk-radius-sm);
    border: 1px solid var(--wdk-border-strong);
    background: var(--wdk-surface-2);
    color: var(--wdk-text);
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.wdk-input:focus {
    outline: none;
    border-color: var(--wdk-primary);
    box-shadow: 0 0 0 3px var(--wdk-primary-soft);
    background: var(--wdk-surface);
}
.wdk-input--num { font-family: var(--wdk-mono); font-weight: 700; }
.wdk-textarea { resize: vertical; min-height: 110px; font-family: var(--wdk-mono); font-size: 13.5px; line-height: 1.8; }
.wdk-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--wdk-text-muted); line-height: 1.6; }

.wdk-wpicker {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.wdk-wbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px 6px;
    border-radius: var(--wdk-radius-sm);
    border: 1px solid var(--wdk-border);
    background: var(--wdk-surface-2);
    color: var(--wdk-text-soft);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.wdk-wbtn .wdk-ic { font-size: 22px; }
.wdk-wbtn:hover { transform: translateY(-2px); border-color: var(--wdk-primary); }
.wdk-wbtn.is-on {
    background: var(--wdk-primary-soft);
    border-color: var(--wdk-primary);
    box-shadow: 0 0 0 3px var(--wdk-primary-soft);
    color: var(--wdk-text);
}

.wdk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--wdk-radius-sm);
    border: 1px solid var(--wdk-border-strong);
    background: var(--wdk-surface);
    color: var(--wdk-text);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.wdk-btn:hover { transform: translateY(-1px); box-shadow: var(--wdk-shadow); }
.wdk-btn:active { transform: translateY(0); }
.wdk-btn--primary {
    background: linear-gradient(135deg, var(--wdk-primary), var(--wdk-primary-3));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -14px rgba(3, 105, 161, .9);
}
.wdk-btn--accent {
    background: linear-gradient(135deg, var(--wdk-accent-2), var(--wdk-accent));
    border-color: transparent;
    color: #3b2c05;
}
:root[data-theme="dark"] .wdk-btn--accent { color: #1f1503; }
.wdk-btn--ghost { background: transparent; color: var(--wdk-text-soft); }
.wdk-btn--sm { padding: 6px 12px; font-size: 13px; }
.wdk-btn--block { width: 100%; }
.wdk-btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wdk-btn-row--end { justify-content: flex-end; }

.wdk-form-foot { margin-top: 12px; display: flex; gap: 8px; }
.wdk-form-foot .wdk-btn { flex: 1; }

.wdk-form-msg {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--wdk-radius-sm);
    font-size: 13px;
    line-height: 1.7;
    display: none;
}
.wdk-form-msg.is-on { display: block; }
.wdk-form-msg--ok { background: rgba(5, 150, 105, .1); color: var(--wdk-ok); border: 1px solid rgba(5, 150, 105, .28); }
.wdk-form-msg--warn { background: rgba(245, 158, 11, .12); color: var(--wdk-accent-deep); border: 1px solid rgba(245, 158, 11, .4); }
:root[data-theme="dark"] .wdk-form-msg--warn { color: var(--wdk-accent); }
.wdk-form-msg--err { background: rgba(220, 38, 38, .1); color: var(--wdk-danger); border: 1px solid rgba(220, 38, 38, .28); }
.wdk-form-msg b { color: inherit; }

/* ---------------- 统计条 ---------------- */
.wdk-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.wdk-stat {
    padding: 14px 16px;
    border-radius: var(--wdk-radius);
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border);
    box-shadow: var(--wdk-shadow);
    border-left: 3px solid var(--wdk-primary);
}
.wdk-stat:nth-child(2n) { border-left-color: var(--wdk-accent); }
.wdk-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--wdk-text-muted);
    font-weight: 700;
}
.wdk-stat-value {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--wdk-text);
    font-family: var(--wdk-mono);
}
.wdk-stat-value small { font-size: 13px; font-weight: 700; color: var(--wdk-text-muted); margin-left: 3px; font-family: inherit; }
.wdk-stat-sub { font-size: 12px; color: var(--wdk-text-soft); margin-top: 2px; line-height: 1.55; }
.wdk-stat--season { border-left-color: var(--wdk-accent); }
.wdk-stat--season .wdk-stat-value { font-family: inherit; color: var(--wdk-primary); }

/* ---------------- 卡片通用 ---------------- */
.wdk-card {
    padding: 22px 24px;
    border-radius: var(--wdk-radius);
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border);
    box-shadow: var(--wdk-shadow);
    margin-bottom: 20px;
}
.wdk-card-head { margin-bottom: 16px; }
.wdk-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: var(--wdk-text);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.wdk-card-title .wdk-ic { font-size: 22px; }
.wdk-card-title .wdk-ic:not(svg) { width: auto; height: auto; vertical-align: -.1em; }
.wdk-card-desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--wdk-text-soft);
    max-width: 92ch;
}
.wdk-note-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--wdk-text-muted);
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
}
.wdk-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ---------------- 折线图 ---------------- */
.wdk-chart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.wdk-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
}
.wdk-month-nav button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--wdk-border);
    background: var(--wdk-surface);
    color: var(--wdk-text-soft);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}
.wdk-month-nav .wdk-btn { width: auto; height: auto; border-radius: 999px; margin-left: 4px; }
.wdk-month-nav button:hover { border-color: var(--wdk-primary); color: var(--wdk-primary); }
.wdk-month-label {
    min-width: 116px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wdk-text);
    font-family: var(--wdk-mono);
}
.wdk-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--wdk-text-soft); }
.wdk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wdk-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.wdk-legend i.hi { background: var(--wdk-warm); }
.wdk-legend i.lo { background: var(--wdk-cool); }
.wdk-legend i.band { background: linear-gradient(90deg, rgba(239,108,59,.18), rgba(14,165,233,.18)); height: 10px; }

.wdk-chart-wrap {
    position: relative;
    width: 100%;
    padding: 8px 0 4px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
    overflow: hidden;
}
.wdk-chart-wrap canvas { display: block; width: 100%; height: 320px; }
.wdk-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--wdk-text-muted);
    font-size: 13.5px;
    background: var(--wdk-surface-2);
}
.wdk-chart-empty .wdk-ic { font-size: 34px; color: var(--wdk-primary-3); }
.wdk-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border-strong);
    box-shadow: var(--wdk-shadow-lg);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--wdk-text);
    white-space: nowrap;
    transform: translate(-50%, -112%);
    opacity: 0;
    transition: opacity .14s;
}
.wdk-tip.is-on { opacity: 1; }
.wdk-tip b { color: var(--wdk-primary); }
.wdk-chart-summary {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-primary-soft);
    border: 1px solid var(--wdk-border);
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--wdk-text-soft);
}
.wdk-chart-summary b { color: var(--wdk-primary-deep); }
:root[data-theme="dark"] .wdk-chart-summary b { color: var(--wdk-primary-2); }

/* ---------------- 表格 ---------------- */
.wdk-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid var(--wdk-border);
    border-radius: var(--wdk-radius-sm);
}
.wdk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 560px;
}
.wdk-table th,
.wdk-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--wdk-border);
    white-space: nowrap;
}
.wdk-table th {
    background: var(--wdk-surface-2);
    color: var(--wdk-text-muted);
    font-weight: 800;
    font-size: 12.5px;
}
.wdk-table td { color: var(--wdk-text-soft); }
.wdk-table tbody tr:last-child td { border-bottom: none; }
.wdk-table tbody tr:hover td { background: var(--wdk-surface-2); }
.wdk-table .num { font-family: var(--wdk-mono); font-weight: 700; color: var(--wdk-text); }
.wdk-table .bad { color: var(--wdk-danger); font-weight: 700; }
.wdk-table .good { color: var(--wdk-ok); font-weight: 700; }
.wdk-table .wdk-ic { font-size: 17px; vertical-align: -.18em; }
.wdk-table .note-cell { white-space: normal; min-width: 160px; color: var(--wdk-text-soft); }

/* ---------------- 四季观察 ---------------- */
.wdk-seasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.wdk-season {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: var(--wdk-radius);
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
    overflow: hidden;
}
.wdk-season::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--sc, var(--wdk-primary));
}
.wdk-season-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wdk-season-name { font-size: 17px; font-weight: 900; color: var(--wdk-text); }
.wdk-season-months { font-size: 11.5px; color: var(--wdk-text-muted); font-family: var(--wdk-mono); }
.wdk-season-temp { margin-top: 10px; font-size: 26px; font-weight: 900; color: var(--sc, var(--wdk-primary)); font-family: var(--wdk-mono); line-height: 1.2; }
.wdk-season-temp small { font-size: 13px; color: var(--wdk-text-muted); font-weight: 700; margin-left: 3px; font-family: inherit; }
.wdk-season-rows { margin-top: 8px; font-size: 12.5px; color: var(--wdk-text-soft); line-height: 1.8; }
.wdk-season-rows div { display: flex; justify-content: space-between; gap: 10px; }
.wdk-season-rows span { color: var(--wdk-text-muted); }
.wdk-season-rows b { color: var(--wdk-text); font-family: var(--wdk-mono); }
.wdk-season-note { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--wdk-text-soft); }
.wdk-season-bar { height: 8px; border-radius: 999px; background: var(--wdk-surface); border: 1px solid var(--wdk-border); overflow: hidden; margin-top: 10px; }
.wdk-season-bar i { display: block; height: 100%; background: var(--sc, var(--wdk-primary)); border-radius: 999px; }

/* ---------------- 记录列表 ---------------- */
.wdk-list-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.wdk-list-tools .wdk-input { width: auto; flex: 1 1 200px; }
.wdk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wdk-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--wdk-border);
    background: var(--wdk-surface-2);
    color: var(--wdk-text-soft);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .16s, color .16s, background .16s;
}
.wdk-chip:hover { border-color: var(--wdk-primary); color: var(--wdk-primary); }
.wdk-chip.is-on { background: var(--wdk-primary); border-color: var(--wdk-primary); color: #fff; }
.wdk-chip .wdk-ic { font-size: 14px; vertical-align: -.16em; }

.wdk-list { display: grid; gap: 10px; }
.wdk-row {
    display: grid;
    grid-template-columns: 92px 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
    transition: border-color .16s, transform .16s;
}
.wdk-row:hover { border-color: var(--wdk-border-strong); transform: translateX(2px); }
.wdk-row-date { font-family: var(--wdk-mono); font-weight: 700; font-size: 14px; color: var(--wdk-text); }
.wdk-row-date small { display: block; font-family: inherit; font-size: 11.5px; color: var(--wdk-text-muted); font-weight: 600; }
.wdk-row-icon { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--wdk-text-muted); font-weight: 700; }
.wdk-row-icon .wdk-ic { font-size: 26px; }
.wdk-row-temp { font-family: var(--wdk-mono); font-size: 14px; color: var(--wdk-text); font-weight: 700; }
.wdk-row-temp .hi { color: var(--wdk-warm); }
.wdk-row-temp .lo { color: var(--wdk-cool); }
.wdk-row-note { font-size: 13px; color: var(--wdk-text-soft); line-height: 1.7; }
.wdk-row-note em { font-style: normal; color: var(--wdk-text-muted); }
.wdk-row-acts { display: flex; gap: 6px; }
.wdk-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--wdk-border);
    background: var(--wdk-surface);
    color: var(--wdk-text-soft);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wdk-icon-btn:hover { border-color: var(--wdk-primary); color: var(--wdk-primary); }
.wdk-icon-btn--danger:hover { border-color: var(--wdk-danger); color: var(--wdk-danger); }
.wdk-empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--wdk-text-muted);
    font-size: 13.5px;
    border: 1px dashed var(--wdk-border-strong);
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface-2);
}
.wdk-empty .wdk-ic { font-size: 30px; color: var(--wdk-primary-3); display: block; margin-bottom: 6px; }
.wdk-list-foot { margin-top: 12px; font-size: 12.5px; color: var(--wdk-text-muted); }

/* ---------------- 校验 ---------------- */
.wdk-issues { display: grid; gap: 8px; margin-top: 4px; }
.wdk-issue {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: var(--wdk-radius-sm);
    border: 1px solid var(--wdk-border);
    background: var(--wdk-surface-2);
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--wdk-text-soft);
}
.wdk-issue-mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background: var(--wdk-danger);
    margin-top: 3px;
}
.wdk-issue--warn .wdk-issue-mark { background: var(--wdk-accent-deep); }
.wdk-issue--info .wdk-issue-mark { background: var(--wdk-primary); }
.wdk-issue b { color: var(--wdk-text); }
.wdk-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    align-items: end;
    margin-top: 6px;
}
.wdk-check-out {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--wdk-text-soft);
}
.wdk-check-out.is-ok { background: rgba(5, 150, 105, .1); border-color: rgba(5, 150, 105, .3); }
.wdk-check-out.is-bad { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .3); }

/* ---------------- 批量 / 导出 ---------------- */
.wdk-pre {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
    font-family: var(--wdk-mono);
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--wdk-text-soft);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
}
.wdk-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.wdk-kv div {
    padding: 10px 12px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface-2);
    border: 1px solid var(--wdk-border);
}
.wdk-kv span { display: block; font-size: 12px; color: var(--wdk-text-muted); }
.wdk-kv b { font-family: var(--wdk-mono); font-size: 16px; color: var(--wdk-text); }
.wdk-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 16px;
    margin-bottom: 18px;
    border-radius: var(--wdk-radius);
    background: var(--wdk-accent-soft);
    border: 1px solid var(--wdk-accent);
    font-size: 13.5px;
    color: var(--wdk-text);
}
.wdk-banner b { color: var(--wdk-accent-deep); }
:root[data-theme="dark"] .wdk-banner b { color: var(--wdk-accent); }

/* ---------------- 底部标签页 ---------------- */
.wdk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 0;
    border-bottom: 2px solid var(--wdk-border);
    padding-bottom: 10px;
}
.wdk-tabbtn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wdk-text-soft);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .16s, color .16s, border-color .16s;
}
.wdk-tabbtn:hover { color: var(--wdk-primary); }
.wdk-tabbtn.on {
    background: var(--wdk-primary);
    color: #fff;
    border-color: var(--wdk-primary);
}
.wdk-panel { display: none; padding: 22px 2px 6px; }
.wdk-panel.on { display: block; }
.wdk-panel h2 {
    margin: 22px 0 10px;
    font-size: 19px;
    font-weight: 900;
    color: var(--wdk-text);
}
.wdk-panel h2:first-child { margin-top: 0; }
.wdk-panel p {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--wdk-text-soft);
    max-width: 92ch;
}
.wdk-panel ol,
.wdk-panel ul { margin: 0 0 14px; padding-left: 22px; }
.wdk-panel li { font-size: 14.5px; line-height: 1.95; color: var(--wdk-text-soft); margin-bottom: 6px; }
.wdk-faq { display: grid; gap: 8px; }
.wdk-faq details {
    border: 1px solid var(--wdk-border);
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface);
    overflow: hidden;
}
.wdk-faq summary {
    padding: 12px 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--wdk-text);
    cursor: pointer;
    list-style: none;
}
.wdk-faq summary::-webkit-details-marker { display: none; }
.wdk-faq summary::before { content: "▸ "; color: var(--wdk-primary); }
.wdk-faq details[open] summary::before { content: "▾ "; }
.wdk-faq .a {
    padding: 0 16px 14px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--wdk-text-soft);
}
.wdk-timeline { list-style: none; padding: 0; margin: 0; }
.wdk-timeline li {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border);
    margin-bottom: 8px;
}
.wdk-timeline .ver {
    font-size: 12px;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--wdk-primary-soft);
    color: var(--wdk-primary-deep);
}
:root[data-theme="dark"] .wdk-timeline .ver { color: var(--wdk-primary-2); }
.wdk-timeline .date { font-family: var(--wdk-mono); font-size: 12.5px; color: var(--wdk-text-muted); }
.wdk-timeline .txt { flex: 1 1 100%; font-size: 13.5px; line-height: 1.85; color: var(--wdk-text-soft); }

/* ---------------- 相关工具 ---------------- */
.wdk-related { margin-top: 26px; }
.wdk-related h2 { margin: 0 0 12px; font-size: 19px; font-weight: 900; color: var(--wdk-text); }
.wdk-rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.wdk-rel {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: var(--wdk-radius-sm);
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border);
    text-decoration: none;
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.wdk-rel:hover { border-color: var(--wdk-primary); transform: translateY(-2px); box-shadow: var(--wdk-shadow); }
.wdk-rel .ri { font-size: 20px; line-height: 1.4; }
.wdk-rel b { display: block; font-size: 14px; color: var(--wdk-text); }
.wdk-rel small { display: block; font-size: 12px; color: var(--wdk-text-muted); line-height: 1.6; margin-top: 2px; }

/* ---------------- 弹窗（仅在用户完成操作后触发） ---------------- */
.wdk-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.wdk-modal[hidden] { display: none !important; }
.wdk-modal-mask { position: absolute; inset: 0; background: rgba(8, 30, 45, .55); backdrop-filter: blur(2px); }
.wdk-modal-box {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: 84vh;
    overflow: auto;
    border-radius: var(--wdk-radius);
    background: var(--wdk-surface);
    border: 1px solid var(--wdk-border-strong);
    box-shadow: var(--wdk-shadow-lg);
}
.wdk-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--wdk-border);
    background: var(--wdk-surface-2);
    border-radius: var(--wdk-radius) var(--wdk-radius) 0 0;
}
.wdk-modal-head h3 { margin: 0; font-size: 16.5px; font-weight: 900; color: var(--wdk-text); }
.wdk-modal-x {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--wdk-border);
    background: var(--wdk-surface);
    color: var(--wdk-text-soft);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.wdk-modal-x:hover { border-color: var(--wdk-danger); color: var(--wdk-danger); }
.wdk-modal-body { padding: 18px; font-size: 14px; line-height: 1.9; color: var(--wdk-text-soft); }
.wdk-modal-body b { color: var(--wdk-text); }
.wdk-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 18px 18px;
}

/* ---------------- 提示条 ---------------- */
.wdk-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%) translateY(12px);
    z-index: 10000;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--wdk-primary-deep);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: var(--wdk-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    max-width: min(92vw, 520px);
    text-align: center;
}
:root[data-theme="dark"] .wdk-toast { background: var(--wdk-primary); color: #06202e; }
.wdk-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- A4 观察月报 ---------------- */
.wdk-sheet { display: none; }
.wdk-sheet-inner {
    padding: 22px;
    color: #16202a;
    font-size: 13px;
    line-height: 1.75;
}
.wdk-sheet-inner h1 { margin: 0 0 4px; font-size: 21px; font-weight: 900; }
.wdk-sheet-inner .sub { font-size: 12px; color: #5b6b7a; margin-bottom: 14px; }
.wdk-sheet-inner table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.wdk-sheet-inner th, .wdk-sheet-inner td { border: 1px solid #c8d4de; padding: 5px 8px; text-align: left; }
.wdk-sheet-inner th { background: #eef5fa; font-weight: 700; }
.wdk-sheet-inner img { max-width: 100%; border: 1px solid #c8d4de; border-radius: 6px; }
.wdk-sheet-kv { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; margin-top: 8px; }
.wdk-sheet-kv b { font-weight: 800; }

@media print {
    body * { visibility: hidden !important; }
    .wdk-sheet, .wdk-sheet * { visibility: visible !important; }
    .wdk-sheet {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
    }
    @page { size: A4 portrait; margin: 12mm; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
    .wdk-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
    .wdk-two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .wdk-page { font-size: 14.5px; }
    .wdk-hero { border-radius: 20px; padding: 22px 16px; }
    .wdk-hero-copy h1 { font-size: 30px; }
    .wdk-lead { font-size: 15px; }
    .wdk-steps { grid-template-columns: minmax(0, 1fr); }
    .wdk-form { padding: 16px 14px; }
    .wdk-card { padding: 18px 15px; }
    .wdk-row { grid-template-columns: 78px 40px minmax(0, 1fr); }
    .wdk-row-acts { grid-column: 1 / -1; justify-content: flex-end; }
    .wdk-form-row,
    .wdk-form-row--3 { grid-template-columns: minmax(0, 1fr); }
    .wdk-wpicker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wdk-stat-value { font-size: 21px; }
}