/* ==========================================================
   小周工具站 V22.0beta · V18.0 风格皮肤层
   ------------------------------------------------------------
   作用：把 V21 的组件外观整体换回 V18.0beta 的样子 ——
     · 星空深蓝渐变背景 + 缓慢移动的星点
     · 青蓝发光标题（--b / --bsoft 三层 text-shadow）
     · 顶部粘性导航（毛玻璃 + 底部发光分割线）
     · 左侧抽屉式分组菜单
     · 半透明玻璃卡片 + 胶囊流光按钮 + 圆角输入框
   加载顺序：在 main.css 之后、脚本之前。
   布局骨架（.layout/.topbar/.page-body）仍由 main.css 负责，
   本文件只接管「视觉皮肤」，功能与三端断点一个都不删。
   ========================================================== */

/* ----------------------------------------------------------
   1. V18 主题变量（与 V18.0beta main.css 完全同名同值）
   ---------------------------------------------------------- */
:root {
    --b: #38bdf8;
    --b2: #06b6d4;
    --b3: #22d3ee;
    --brgb: 56, 189, 248;
    --bsoft: #90d8ff;
    --bdeep: #0284c7;

    /* 下面这组是 V21 组件用的名字，值映射到 V18 配色，
       这样 1080 行组件样式一行不改就自动变成 V18 观感 */
    --brand: var(--b);
    --bg: #050b1a;
    --bg2: #0f1735;
    --card: rgba(255, 255, 255, .05);
    --card2: rgba(var(--brgb), .10);
    --line: rgba(var(--brgb), .28);
    --txt: #dff2ff;
    --txt2: #90b4cc;
    --txt3: #6f93ad;
    --ok: #34d399;
    --warn: #fbbf24;
    --err: #f87171;
    --shadow: 0 8px 30px rgba(0, 0, 0, .28);
    --tint-b10: rgba(var(--brgb), .10);
    --tint-b14: rgba(var(--brgb), .14);
    --tint-b16: rgba(var(--brgb), .16);
    --tint-b18: rgba(var(--brgb), .18);
    --tint-b20: rgba(var(--brgb), .20);
    --tint-b22: rgba(var(--brgb), .22);
    --tint-b30: rgba(var(--brgb), .30);
    --tint-b35: rgba(var(--brgb), .35);
    --tint-e16: rgba(244, 63, 94, .16);
    --tint-e40: rgba(244, 63, 94, .40);
    --tint-bg80: rgba(5, 11, 26, .80);
    --tint-line50: rgba(255, 255, 255, .06);
    --glow: 0 0 18px rgba(var(--brgb), .35);
}

/* V18 的四套换色主题（设置页可切） */
body.theme-purple { --b: #a78bfa; --b2: #8b5cf6; --b3: #c4b5fd; --brgb: 167, 139, 250; --bsoft: #d8c9ff; --bdeep: #7c3aed; }
body.theme-pink { --b: #f472b6; --b2: #ec4899; --b3: #f9a8d4; --brgb: 244, 114, 182; --bsoft: #fbcfe8; --bdeep: #db2777; }
body.theme-green { --b: #34d399; --b2: #10b981; --b3: #6ee7b7; --brgb: 52, 211, 153; --bsoft: #a7f3d0; --bdeep: #059669; }
body.theme-gold { --b: #fbbf24; --b2: #f59e0b; --b3: #fcd34d; --brgb: 251, 191, 36; --bsoft: #fde68a; --bdeep: #d97706; }

/* ----------------------------------------------------------
   2. 背景：完全照 V18.0beta（星空深蓝渐变 + 缓慢移动的星点）
   ---------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", -apple-system, "Segoe UI", sans-serif;
    background: linear-gradient(170deg, #050b1a 0%, #0f1735 50%, #0a2040 100%) fixed;
    color: var(--txt);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 40px 70px, #c0e8ff, transparent),
        radial-gradient(2px 2px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, var(--bsoft), transparent),
        radial-gradient(2px 2px at 160px 120px, #ffffff, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: .35;
    z-index: -1;
    pointer-events: none;
    animation: starMove 80s linear infinite;
}

@keyframes starMove {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

@keyframes pulseLight {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

@keyframes streamLight {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes bootRocket {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
}

/* ----------------------------------------------------------
   3. 布局：顶部粘性导航 + 左侧抽屉（V18 交互方式）
   ---------------------------------------------------------- */
.layout {
    display: block;
    min-height: 100vh;
}

.main { display: block; }

/* 顶部导航 = V18 .zt-nav */
.topbar {
    position: sticky;
    top: 0;
    z-index: 700;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(5, 11, 26, .92), rgba(5, 11, 26, .72));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--b), transparent);
    opacity: .7;
    pointer-events: none;
}

/* 品牌（V18 顶部导航左侧） */
.tb-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 4px;
}

.tb-brand .logo {
    font-size: 22px;
    animation: pulseLight 3s ease-in-out infinite;
}

.tb-brand .ver {
    font-size: 11px;
    color: var(--bsoft);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 1px 7px;
    font-weight: normal;
}

.top-btn {
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(var(--brgb), .1);
    color: var(--txt);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: .25s;
    font-family: inherit;
}

.top-btn:hover {
    background: rgba(var(--brgb), .22);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--brgb), .25);
}

.nav-toggle { display: inline-flex; width: 40px; padding: 0; font-size: 18px; }

.search-wrap { flex: 1; max-width: 460px; min-width: 0; }

.search-wrap input {
    width: 100%;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .32);
    color: var(--txt);
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.search-wrap input::placeholder { color: #6f93ad; }

.search-wrap input:focus {
    border-color: var(--b);
    box-shadow: 0 0 0 3px rgba(var(--brgb), .18);
}

/* 抽屉 = V18 .zt-drawer */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    z-index: 860;
    background: linear-gradient(160deg, #08122a, #0b1c3a);
    border-right: 1px solid var(--line);
    padding: 16px 14px 30px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    -webkit-overflow-scrolling: touch;
}

body.nav-open .sidebar { transform: none; }

.nav-mask {
    position: fixed;
    inset: 0;
    z-index: 850;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

body.nav-open .nav-mask { opacity: 1; visibility: visible; }

/* 抽屉里的品牌条 */
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

.sidebar .brand .logo { font-size: 26px; }
.sidebar .brand .bname { color: #fff; font-weight: bold; font-size: 15px; }

.sidebar .brand .ver {
    font-size: 11px;
    color: var(--bsoft);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 1px 7px;
}

/* 抽屉菜单分组（V18 两列网格：标题占整行，组内两列） */
.nav-group {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.nav-gt {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--bsoft);
    letter-spacing: 2px;
    margin: 4px 0 2px;
    font-weight: normal;
    padding: 0;
}

.sidebar nav { display: block; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .04);
    color: var(--txt);
    font-size: 13.5px;
    text-decoration: none;
    transition: .22s;
}

.nav-item:hover {
    background: rgba(var(--brgb), .18);
    border-color: var(--line);
    color: #fff;
    transform: translateY(-2px);
}

.nav-item.on {
    background: linear-gradient(135deg, rgba(var(--brgb), .3), rgba(var(--brgb), .12));
    border-color: var(--b);
    color: #fff;
    box-shadow: 0 0 14px rgba(var(--brgb), .25);
}

.nav-item .ni { font-size: 18px; width: auto; }
.nav-item .nt { font-size: 13.5px; }

/* 内容区（V18 居中 1180 外壳） */
.page-body {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 26px 16px 60px;
    animation: fadeUp .5s ease both;
}

/* ----------------------------------------------------------
   4. V18 发光标题
   ---------------------------------------------------------- */
.page-head { margin-bottom: 18px; }

.page-head h2 {
    margin: 0;
    font-size: 27px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 12px var(--b), 0 0 30px rgba(var(--brgb), .35);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.chip-sec h3,
.sec-head h3 {
    color: aqua;
    text-shadow: 0 0 10px var(--b);
    font-weight: 600;
}

.hero-title {
    color: aliceblue;
    text-shadow: 0 0 15px var(--b), 0 0 30px rgba(var(--brgb), .5);
    letter-spacing: 1px;
}

.hero-title .ver { color: var(--bsoft); }

.ah-name { color: #fff; text-shadow: 0 0 14px rgba(var(--brgb), .5); }
.ah-icon { filter: drop-shadow(0 0 14px rgba(var(--brgb), .6)); }

.about-hero { text-align: center; padding: 10px 0 18px; }

/* ----------------------------------------------------------
   5. V18 玻璃卡片
   ---------------------------------------------------------- */
.hero,
.today-card,
.pomo-wrap,
.conv-wrap,
.pwd-wrap,
.weather-page,
.qr-page,
.todo-page,
.checkin-page,
.quotes-page,
.weekly-page,
.about-page,
.agree-page,
.detail-card,
.set-group,
.tut-item,
.cl-item,
.quote-hero,
.stat-cell,
.empty-box {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(var(--brgb), .22);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}

.quote-hero,
.stat-cell,
.tut-item,
.cl-item,
.set-group {
    border-radius: 16px;
}

/* 工具卡 */
.tool-item {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(var(--brgb), .22);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: .25s;
}

/* 卡里放不下就省略，绝不把「WPS办公套件」这种名字折成两行 */
.ti-main { min-width: 0; flex: 1; overflow: hidden; }

.ti-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti-tag {
    display: block;
    font-size: 11px;
    color: var(--txt3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti-badge {
    flex: 0 0 auto;
    max-width: 62px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-item:hover {
    background: rgba(var(--brgb), .16);
    border-color: var(--b);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3), 0 0 16px rgba(var(--brgb), .28);
    transform: translateY(-3px);
}

.ti-name { color: #fff; }
.ti-tag { color: var(--txt3); }
.ti-icon { filter: drop-shadow(0 0 6px rgba(var(--brgb), .35)); }

/* 格言条 */
.quote-line {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(var(--brgb), .18);
    border-left: 3px solid var(--b);
    border-radius: 13px;
    color: var(--txt2);
}

.quote-line:hover { background: rgba(var(--brgb), .12); color: var(--txt); }

/* 统计块（V18 .stat-box） */
.stat-cell {
    background: rgba(var(--brgb), .08);
    transition: .25s;
}

.stat-cell:hover {
    transform: translateY(-3px);
    background: rgba(var(--brgb), .16);
}

.stat-cell .sv {
    color: var(--b);
    text-shadow: 0 0 16px rgba(var(--brgb), .5);
}

.stat-cell .sl { color: var(--txt3); }

/* 排行 / 待办 / 历史行 */
.rank-row,
.todo-row,
.hist-row,
.quote-row {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
}

.rank-row:hover,
.todo-row:hover,
.hist-row:hover,
.quote-row:hover {
    background: rgba(var(--brgb), .12);
    border-color: var(--line);
}

.rank-row .rk { color: var(--b); }
.hist-row .hr { color: var(--b); }

/* 空态 */
.empty-box {
    background: rgba(255, 255, 255, .04);
    border: 1px dashed rgba(var(--brgb), .35);
    color: var(--txt3);
}

/* 提示条 */
.tip-box {
    background: rgba(var(--brgb), .1);
    border-left: 3px solid var(--b);
    color: var(--txt2);
    border-radius: 0 11px 11px 0;
}

/* ----------------------------------------------------------
   6. V18 胶囊按钮 + 分类胶囊
   ---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: rgba(var(--brgb), .12);
    color: var(--txt);
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: .25s;
    font-family: inherit;
}

.btn:hover {
    background: rgba(var(--brgb), .26);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--brgb), .28);
}

.btn.primary {
    background: linear-gradient(90deg, var(--b), var(--b2), var(--b3));
    background-size: 200% 100%;
    border-color: transparent;
    color: #041021;
    font-weight: bold;
    animation: streamLight 2.5s linear infinite;
}

.btn.primary:hover { filter: brightness(1.08); }

.btn.danger {
    background: rgba(244, 63, 94, .16);
    border-color: rgba(244, 63, 94, .4);
    color: #ffb3c1;
}

.btn.tiny { padding: 7px 14px; font-size: 13px; }

.btn.on {
    background: linear-gradient(135deg, rgba(var(--brgb), .3), rgba(var(--brgb), .12));
    border-color: var(--b);
    color: #fff;
}

.cat-btn,
.conv-cat,
.dur-btn,
.fav-chip,
.recent-chip,
.ti-badge,
.week-badge {
    border-radius: 99px;
}

.cat-btn,
.conv-cat {
    background: rgba(255, 255, 255, .05);
}

.cat-btn.on,
.conv-cat.on,
.dur-btn.on {
    background: linear-gradient(135deg, rgba(var(--brgb), .3), rgba(var(--brgb), .12));
    border-color: var(--b);
    color: #fff;
    box-shadow: 0 0 12px rgba(var(--brgb), .25);
}

/* 计算器按键 */
.ck {
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
}

.ck:hover {
    background: rgba(var(--brgb), .2);
    border-color: var(--b);
    box-shadow: 0 0 14px rgba(var(--brgb), .25);
}

.ck.eq {
    background: linear-gradient(90deg, var(--b), var(--b2), var(--b3));
    background-size: 200% 100%;
    border-color: transparent;
    color: #041021;
    font-weight: bold;
    animation: streamLight 2.5s linear infinite;
}

.calc-screen {
    background: rgba(0, 0, 0, .32);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: #eaf7ff;
    text-shadow: 0 0 12px rgba(var(--brgb), .45);
}

/* 开关 */
.switch.on {
    background: linear-gradient(90deg, var(--b), var(--b2));
    border-color: transparent;
}

.switch.on i { background: #fff; }

/* 打卡格 */
.check-item {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(var(--brgb), .18);
    border-radius: 12px;
}

.check-item.on {
    background: rgba(var(--brgb), .18);
    border-color: var(--b);
    color: #fff;
    box-shadow: 0 0 12px rgba(var(--brgb), .22);
}

.check-item.on .ck { background: var(--b); color: #041021; }

/* 进度条 */
.pomo-fill,
.prog-fill,
.ps-fill.strong {
    background: linear-gradient(90deg, var(--b), var(--b2), var(--b3));
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(var(--brgb), .5);
    animation: streamLight 3s linear infinite;
}

.pomo-bar,
.prog-bar,
.ps-bar { background: rgba(0, 0, 0, .3); border-radius: 99px; }

.pomo-time {
    color: #fff;
    text-shadow: 0 0 22px rgba(var(--brgb), .55);
}

.pomo-stat b, .prog-txt b { color: var(--bsoft); }

/* ----------------------------------------------------------
   7. 表单 / 弹窗 / 提示
   ---------------------------------------------------------- */
input[type=text],
input[type=number],
input[type=time],
input[type=search],
input[type=password],
input[type=email],
select,
textarea {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, .32);
    color: #eaf7ff;
    transition: .25s;
}

input::placeholder, textarea::placeholder { color: #6f93ad; }

input:focus, select:focus, textarea:focus {
    border-color: var(--b);
    box-shadow: 0 0 0 3px rgba(var(--brgb), .18);
}

.modal-card,
.guide-card {
    background: linear-gradient(160deg, rgba(8, 18, 38, .98), rgba(11, 28, 58, .98));
    border: 1px solid rgba(var(--brgb), .3);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.modal-title, .g-title, .modal-sub { color: #fff; }
.modal-sub, .g-desc { color: var(--txt2); }

.toast {
    background: rgba(8, 20, 42, .95);
    border: 1px solid var(--line);
    color: #eaf7ff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.toast-success { border-color: rgba(52, 211, 153, .5); }
.toast-warn { border-color: rgba(251, 191, 36, .5); }

#backToTop {
    background: rgba(8, 20, 42, .92);
    border: 1px solid var(--line);
    color: var(--bsoft);
}

#backToTop:hover {
    background: rgba(var(--brgb), .25);
    color: #fff;
    transform: translateY(-3px);
}

/* 鼠标粒子（V18 是发光点，这里加一点光晕） */
.pt {
    background: var(--bsoft);
    box-shadow: 0 0 8px rgba(var(--brgb), .8);
}

/* 页脚 */
.page-body footer,
footer.page-body {
    color: #6f93ad;
    line-height: 1.9;
}

footer.page-body a { color: var(--bsoft); }

/* 二维码白底保持纯白（识别需要） */
.qr-box { background: #fff; border-radius: 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }

/* ----------------------------------------------------------
   8. 浅色模式（V18 app.css 的 light-mode 口径）
   ---------------------------------------------------------- */
body.light-mode {
    --bg: #eef5ff;
    --bg2: #ffffff;
    --card: rgba(255, 255, 255, .72);
    --card2: rgba(15, 40, 80, .06);
    --line: rgba(15, 60, 110, .16);
    --txt: #16233a;
    --txt2: #4a5f7d;
    --txt3: #7d8ea6;
    --tint-bg80: rgba(242, 247, 255, .88);
    --tint-line50: rgba(15, 40, 80, .08);
    --shadow: 0 8px 26px rgba(20, 50, 90, .12);
    background: linear-gradient(170deg, #eef5ff 0%, #e2ecfb 50%, #dbe8fb 100%) fixed;
    color: var(--txt);
}

body.light-mode::before { opacity: .22; }

body.light-mode .topbar {
    background: linear-gradient(180deg, rgba(245, 250, 255, .95), rgba(245, 250, 255, .8));
}

body.light-mode .sidebar { background: linear-gradient(160deg, #f2f8ff, #e6f2ff); }

body.light-mode .page-head h2 { color: #123; text-shadow: none; }
body.light-mode .hero-title { color: #123; text-shadow: none; }
body.light-mode .ti-name, body.light-mode .nav-item, body.light-mode .btn { color: var(--txt); }

body.light-mode .hero,
body.light-mode .today-card,
body.light-mode .pomo-wrap,
body.light-mode .conv-wrap,
body.light-mode .pwd-wrap,
body.light-mode .weather-page,
body.light-mode .qr-page,
body.light-mode .todo-page,
body.light-mode .checkin-page,
body.light-mode .quotes-page,
body.light-mode .weekly-page,
body.light-mode .about-page,
body.light-mode .agree-page,
body.light-mode .detail-card,
body.light-mode .tool-item,
body.light-mode .stat-cell,
body.light-mode .set-group,
body.light-mode .tut-item,
body.light-mode .cl-item,
body.light-mode .check-item,
body.light-mode .rank-row,
body.light-mode .todo-row,
body.light-mode .hist-row,
body.light-mode .quote-row,
body.light-mode .quote-hero,
body.light-mode .quote-line {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(15, 60, 110, .14);
    box-shadow: 0 6px 20px rgba(20, 50, 90, .08);
}

body.light-mode .modal-card,
body.light-mode .guide-card {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(15, 60, 110, .16);
}

body.light-mode .toast,
body.light-mode #backToTop {
    background: rgba(255, 255, 255, .97);
    color: #123;
}

body.light-mode input[type=text],
body.light-mode input[type=number],
body.light-mode input[type=time],
body.light-mode input[type=search],
body.light-mode select,
body.light-mode textarea,
body.light-mode .search-wrap input,
body.light-mode .calc-screen {
    background: #fff;
    color: #123;
    border-color: rgba(15, 60, 110, .18);
}

body.light-mode .pomo-time { color: #123; text-shadow: none; }
body.light-mode .chip-sec h3, body.light-mode .sec-head h3 { color: #0b4a7a; text-shadow: none; }

/* ----------------------------------------------------------
   9. 三端适配（断点沿用 V21：1440 / 1025 / 641 / 640 / 480）
   ---------------------------------------------------------- */

/* 大屏：工具卡更宽，名字有地方放 */
@media (min-width: 1440px) {
    .page-body { padding: 30px 24px 70px; }
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
}

/* 电脑：main.css 原来这里是 minmax(168px)，1080 宽的窗口会塞成 6 列，
   「WPS办公套件」全被挤到折行，必须抬回 215px */
@media (min-width: 1025px) and (max-width: 1439px) {
    .page-body { padding: 24px 18px 60px; }
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
    .sidebar { width: min(300px, 78vw); }
    .tb-brand .bname { font-size: 15px; }
}

/* 平板 */
@media (min-width: 641px) and (max-width: 1024px) {
    .sidebar { width: min(300px, 78vw); }
    .page-body { padding: 22px 16px 56px; }
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 10px; }
    .tb-brand .bname { font-size: 15px; }
}

/* 手机：品牌文字收起，导航只留图标 + 搜索 */
@media (max-width: 640px) {
    .topbar {
        padding: 0 10px;
        gap: 8px;
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(56px + env(safe-area-inset-top, 0px));
    }

    .tb-brand .bname { display: none; }
    .tb-brand { margin-right: 0; }
    .top-btn { height: 34px; padding: 0 10px; font-size: 13px; }
    .search-wrap input { font-size: 16px; }
    .page-body { padding: 16px 12px calc(72px + env(safe-area-inset-bottom, 0px)); }
    .page-head h2 { font-size: 21px; }
    .sidebar { width: min(320px, 88vw); }
    .btn { padding: 10px 18px; font-size: 14px; }
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
    .ti-badge { max-width: 52px; }
}

/* 超窄屏 */
@media (max-width: 480px) {
    .tb-brand .ver { display: none; }
    .page-head h2 { font-size: 19px; }
    .nav-group { gap: 7px; }
    .tool-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tool-item { padding: 10px 10px; gap: 8px; }
    .ti-icon { font-size: 18px; }
    .ti-badge { display: none; }
}

/* 手机横屏 / 矮屏：抽屉窄一点，保证内容可见 */
@media (max-height: 460px) and (orientation: landscape) {
    .sidebar { width: min(260px, 70vw); }
    .page-body { padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px)); }
    .topbar { height: 50px; }
}

/* 打印 */
@media print {
    .sidebar, .nav-mask, .topbar, #backToTop, #ztFab { display: none !important; }
}