/* ============================================================
   V4.0 活力版 · 全局配色（蜂蜜黄主题）
   —— 蜂蜜黄作为「界面主色」，正文文字单独使用深棕，二者严格分离
   ============================================================ */

*{box-sizing:border-box;}
html, body {
  overflow-x: hidden;
}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;}

/* ============ 顶栏 ============ */
header{position:sticky;top:0;z-index:80;background:#ffffff;border-bottom:1px solid var(--border);}
.header-inner{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.logo{font-size:20px;font-weight:800;color:var(--primary-dark);cursor:pointer;white-space:nowrap;letter-spacing:.5px;}
nav{display:flex;gap:2px;flex-wrap:wrap;}
nav button{background:none;border:none;padding:8px 14px;border-radius:8px;font-size:14.5px;color:var(--muted);cursor:pointer;transition:.15s;}
nav button:hover{background:var(--primary-soft);color:var(--primary-dark);}
nav button.active{background:var(--primary);color:#fff;}
.search-wrap{
  margin-left:auto;
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.search-wrap input{
  width:200px;max-width:50vw;padding:9px 36px 9px 38px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-softer);outline:none;font-size:14px;transition:.18s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7340' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:13px center;background-size:15px;
}
.search-wrap input:focus{border-color:var(--primary);background-color:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
.search-clear{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:22px;
  height:22px;
  border-radius:50%;
  border:none;
  padding:0;
  background:rgba(138,115,64,.16);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.search-clear svg{width:12px;height:12px;display:block;}
.search-clear:hover{background:var(--primary);color:#fff;transform:translateY(-50%) scale(1.08);}
.search-clear:active{transform:translateY(-50%) scale(.94);}
.search-clear[hidden]{display:none;}

.search-wrap input::-webkit-search-cancel-button,
.search-wrap input::-webkit-search-decoration{
  -webkit-appearance:none;
  appearance:none;
}
#userBox{margin-left:auto;display:flex;align-items:center;gap:10px;}
#userBox .user-email{font-size:13px;color:var(--muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ============ 主容器 ============ */
main{max-width:1200px;margin:0 auto;padding:26px 20px 0;}
.page{display:none;}
.page.active{display:block;}
.page-title{font-size:21px;margin:0 0 6px;font-weight:700;display:flex;align-items:center;gap:10px;}
.page-icon{width:32px;height:32px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.page-icon svg{width:18px;height:18px;}
.page-desc{margin:0 0 20px;color:var(--muted);font-size:14px;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:18px;transition:.16s;}
.panel:hover{border-color:var(--lime-shine);}
.panel-head{margin:0 0 14px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px;}
.section-title{font-size:16px;margin:0 0 14px;font-weight:700;}
.back-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--muted);font-size:13.5px;cursor:pointer;padding:4px 0;margin-bottom:10px;transition:.15s;}
.back-btn:hover{color:var(--primary-dark);}


/* ============ 编者的话 ============ */
.editor-note{max-width:820px;margin:56px auto 80px;padding:0 22px;}
.editor-title{font-size:27px;font-weight:800;letter-spacing:6px;margin:0 0 46px;color:var(--text);text-align:center;}
.editor-body p{font-size:17px;font-weight:700;line-height:2.2;color:#4a3800;margin:0 0 26px;text-align:left;text-indent:2em;letter-spacing:.4px;}
.editor-sign{margin-top:52px;text-align:right;padding-right:6px;}
.editor-sign p{font-size:15.5px;font-weight:700;line-height:2;color:var(--text);margin:0;letter-spacing:.5px;}

/* ============ 工具卡 / 热门卡 ============ */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;transition:.16s;position:relative;overflow:hidden;}
.tool-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--lime),var(--primary));opacity:0;transition:.2s;}
.tool-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 22px rgba(74,144,226,.14);}
.tool-card:hover::before{opacity:1;}
.tool-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-dark);margin-bottom:12px;flex:0 0 auto;transition:.18s;}
.tool-card:hover .tool-icon{background:var(--primary);color:#fff;}
.tool-icon svg{width:21px;height:21px;}
.tool-card h3{margin:0 0 6px;font-size:15.5px;}
.tool-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.55;}
#noResult{text-align:center;color:var(--muted);padding:40px 0;display:none;}

.hot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.hot-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:.16s;display:flex;gap:13px;align-items:flex-start;position:relative;overflow:hidden;}
.hot-card::after{content:"";position:absolute;right:-30px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(74,144,226,.10),transparent 70%);transition:.2s;}
.hot-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 22px rgba(74,144,226,.14);}
.hot-card:hover::after{background:radial-gradient(circle,rgba(74,144,226,.20),transparent 70%);}
.hot-card .tool-icon{margin-bottom:0;}
.hot-card h3{margin:0 0 5px;font-size:15px;}
.hot-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;}
.hot-badge{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:700;color:#5a3d00;background:var(--primary-soft);border-radius:999px;padding:2px 8px;}

/* ============ 分类卡 ============ */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.category-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:.16s;}
.category-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(74,144,226,.10);}
.category-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.category-head h3{margin:0;font-size:15.5px;font-weight:700;}
.cat-icon{width:34px;height:34px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cat-icon svg{width:17px;height:17px;}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.cat-list li{font-size:13px;padding:7px 14px;border-radius:8px;background:var(--bg-softer);color:#5a4a20;cursor:pointer;transition:.15s;border:1px solid transparent;}
.cat-list li:hover{background:var(--primary-soft);color:var(--primary-dark);border-color:var(--lime-shine);}

/* ============ 按钮 ============ */
.btn{background:var(--primary);color:#fff;border:1px solid var(--primary);padding:9px 18px;border-radius:9px;cursor:pointer;font-size:14px;transition:.16s;font-weight:500;}
.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 4px 12px rgba(74,144,226,.25);}
.btn.ghost{background:#fff;color:var(--muted);border:1px solid var(--border);}
.btn.ghost:hover{color:var(--primary-dark);border-color:var(--lime-shine);background:var(--bg-softer);box-shadow:none;}
.btn.small{padding:6px 13px;font-size:13px;}
.btn.danger{background:#fff;color:#b91c1c;border:1px solid #fecaca;}
.btn.danger:hover{background:#fef2f2;border-color:#fca5a5;box-shadow:none;}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}

/* ============ 表单 ============ */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:14px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field > span{font-size:12.5px;color:var(--muted);font-weight:600;}
.field input[type=text],.field textarea,.field select{padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-softer);outline:none;font-size:14px;resize:vertical;transition:.16s;width:100%;}
.field input[type=text]:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
.field input:disabled{background:#f3f4f6;color:#b0b6c4;}
.field-hint{font-size:11.5px;color:#a89260;margin-top:-2px;}
.upload-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
input[type=file]{font-size:13px;color:var(--muted);}
.preview{width:72px;height:72px;border-radius:10px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;color:#b0b6c4;overflow:hidden;background:var(--bg-softer);text-align:center;}
.preview img{width:100%;height:100%;object-fit:cover;}

/* ============ 统计卡 / 空状态 ============ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:15px;display:flex;flex-direction:column;gap:6px;transition:.16s;}
.stat-card:hover{border-color:var(--lime-shine);}
.stat-value{font-size:23px;font-weight:800;color:var(--primary-dark);word-break:break-all;}
.stat-label{font-size:12.5px;color:var(--muted);}
.empty{color:var(--muted);text-align:center;padding:36px 0;font-size:14px;}
.list-head{display:flex;justify-content:space-between;align-items:center;margin:24px 0 14px;gap:10px;flex-wrap:wrap;}
.list-head h2{margin:0;font-size:16px;}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ============ 标签 / 卡片通用 ============ */
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-weight:600;margin-right:5px;}
.tag.gray{background:#f3f4f6;color:#6b7280;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.chip{font-size:12px;padding:3px 10px;border-radius:999px;background:#f3f4f6;color:#5b6478;}
.del-btn{position:absolute;right:0;top:0;border:1px solid var(--border);background:#fff;color:#9aa1b1;width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:12px;transition:.15s;}
.del-btn:hover{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
.mini-btn{border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer;transition:.15s;}
.mini-btn:hover{color:var(--primary-dark);border-color:var(--lime-shine);background:var(--bg-softer);}
.mini-btn.danger:hover{color:#b91c1c;border-color:#fecaca;background:#fef2f2;}
.src-btn{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11.5px;border:1px solid var(--border);background:#fff;color:var(--muted);text-decoration:none;white-space:nowrap;transition:.15s;margin:2px 3px 2px 0;}
.src-btn:hover{color:#fff;border-color:transparent;}
.src-btn[data-p="qq"]:hover{background:#10b981;}
.src-btn[data-p="kuwo"]:hover{background:#3b82f6;}
.src-btn[data-p="kugou"]:hover{background:#6b7280;}
.src-btn[data-p="netease"]:hover{background:#ef4444;}

/* ============ 子标签 ============ */
.ta-subtabs,.ai-subtabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:10px;margin-bottom:16px;flex-wrap:wrap;}
.ta-subtab,.ai-subtab{border:none;background:none;padding:8px 16px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--muted);transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.ta-subtab svg,.ai-subtab svg{width:15px;height:15px;flex-shrink:0;}
.ta-subtab:hover,.ai-subtab:hover{background:#fff;color:var(--text);}
.ta-subtab.active,.ai-subtab.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(74,144,226,.20);}
.ta-subpage,.ai-subpage{display:none;}
.ta-subpage.active,.ai-subpage.active{display:block;}

/* ============ Toast ============ */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(16px);background:#3a2a00;color:#ffe9a8;padding:11px 22px;border-radius:10px;font-size:13.5px;opacity:0;transition:.28s;z-index:300;pointer-events:none;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(58,42,0,.30);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.site-footer{text-align:center;padding:34px 10px 26px;color:#b09860;font-size:13px;}

/* ============ 模式徽章 ============ */
.mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 11px;border-radius:999px;font-weight:600;}
.mode-badge.local{background:var(--bg-soft);color:#7a5a20;}
.mode-badge.cloud{background:var(--primary-soft);color:var(--primary-dark);}

/* ============ 头像 ============ */
#userAvatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--lime-shine);display:none;flex-shrink:0;}
#userAvatar.show{display:inline-block;}
.avatar-upload-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.avatar-preview{width:80px;height:80px;border-radius:50%;border:2px dashed var(--lime-shine);display:flex;align-items:center;justify-content:center;color:#b0b6c4;font-size:11px;overflow:hidden;background:var(--bg-softer);text-align:center;flex:0 0 auto;}
.avatar-preview img{width:100%;height:100%;object-fit:cover;}

/* ============ 滚动条（蜂蜜黄质感） ============ */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg-base);}
::-webkit-scrollbar-thumb{background:var(--lime);border-radius:6px;border:2px solid var(--bg-base);}
::-webkit-scrollbar-thumb:hover{background:var(--primary);}
::selection{background:var(--primary-soft);color:var(--primary-dark);}

/* ============ 计算器 ============ */
.calc-box{max-width:400px;margin:0 auto;}
.calc-display{background:linear-gradient(135deg,#3a2a00,#1f1700);color:#ffe9a8;border-radius:12px;padding:18px;text-align:right;font-size:28px;font-weight:600;min-height:84px;display:flex;align-items:flex-end;justify-content:flex-end;word-break:break-all;overflow:hidden;}
.calc-mode-bar{display:flex;justify-content:space-between;align-items:center;margin:12px 0 10px;font-size:13px;color:var(--muted);}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.calc-btn{padding:15px 0;border-radius:9px;border:1px solid var(--border);background:var(--bg-softer);font-size:17px;cursor:pointer;transition:.12s;color:var(--text);}
.calc-btn:hover{background:var(--primary-soft);border-color:var(--lime-shine);}
.calc-btn:active{transform:scale(.97);}
.calc-btn.fn{color:var(--primary-dark);font-weight:600;background:var(--bg-soft);}
.calc-btn.op{color:var(--primary-dark);font-weight:700;background:var(--primary-soft);}
.calc-btn.eq{grid-column:1 / -1;background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700;}
.calc-btn.eq:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(74,144,226,.25);}
.calc-btn.sm{font-size:14px;padding:13px 0;}

/* ============ 图表 ============ */
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.chart-types{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:9px;}
.chart-type{border:none;background:none;padding:7px 16px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--muted);transition:.15s;}
.chart-type.active{background:var(--primary);color:#fff;font-weight:600;}
#chartData{width:100%;padding:13px;border-radius:10px;border:1px solid var(--border);background:var(--bg-softer);outline:none;resize:vertical;font-size:13.5px;line-height:1.75;font-family:Consolas,Menlo,monospace;transition:.16s;}
#chartData:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
#chartCanvas{display:block;width:100%;}

/* ============ 人物印象 ============ */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
.person-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:.16s;}
.person-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(74,144,226,.10);}
.person-head{display:flex;gap:12px;align-items:center;position:relative;margin-bottom:12px;}
.avatar{width:56px;height:56px;border-radius:50%;flex:0 0 auto;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-dark);font-size:21px;font-weight:700;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.person-head h3{margin:0 0 5px;font-size:15.5px;}
.person-body p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:#4a3800;word-break:break-word;}
.person-body b{color:var(--muted);font-weight:600;}

/* ============ 地点收藏 ============ */
.places-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.place-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.16s;display:flex;flex-direction:column;}
.place-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(74,144,226,.10);}
.place-cover{height:150px;background:linear-gradient(135deg,var(--bg-soft),#fff4cc);display:flex;align-items:center;justify-content:center;color:#c9ab6b;overflow:hidden;}
.place-cover img{width:100%;height:100%;object-fit:cover;}
.place-cover svg{width:34px;height:34px;}
.place-body{padding:14px;flex:1;display:flex;flex-direction:column;gap:9px;}
.place-name{font-size:15.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.region-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;}
.region-cn{background:var(--primary-soft);color:var(--primary-dark);}
.region-intl{background:#f3f4f6;color:#6b7280;}
.place-line{font-size:13px;color:#5a4a20;display:flex;gap:7px;align-items:flex-start;line-height:1.55;}
.place-line svg{width:14px;height:14px;flex:0 0 auto;margin-top:3px;color:var(--muted);}
.place-price{color:#b91c1c;font-weight:700;}
.place-desc{font-size:13px;color:#5a4a20;line-height:1.65;margin:0;word-break:break-word;}
.place-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap;align-items:center;}
.place-actions .del-btn{position:static;width:auto;height:auto;padding:5px 11px;border-radius:7px;font-size:12px;}
.baike-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:7px;font-size:12px;border:1px solid var(--border);background:#fff;color:var(--muted);text-decoration:none;transition:.15s;}
.baike-btn:hover{color:var(--primary-dark);border-color:var(--lime-shine);background:var(--bg-softer);}
.baike-btn svg{width:13px;height:13px;}

/* ============ 影视收藏 ============ */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
.media-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:0;overflow:hidden;transition:.16s;position:relative;}
.media-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(74,144,226,.10);}
.media-cover{height:180px;background:linear-gradient(135deg,var(--bg-soft),#fff4cc);display:flex;align-items:center;justify-content:center;color:#c9ab6b;overflow:hidden;position:relative;}
.media-cover img{width:100%;height:100%;object-fit:cover;}
.media-cover svg{width:44px;height:44px;}
.media-cover-edit{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--muted);transition:.15s;}
.media-cover-edit:hover{color:var(--primary-dark);border-color:var(--lime-shine);}
.media-card .media-head{padding:14px 42px 0 16px;margin-bottom:6px;display:flex;align-items:flex-start;gap:10px;}
.media-card .media-body{padding:0 16px 16px;}
.media-card .del-btn{right:10px;top:10px;background:rgba(255,255,255,.94);}
.media-name{font-size:15.5px;font-weight:700;margin:0 0 8px;line-height:1.45;}
.media-tags{display:flex;flex-wrap:wrap;gap:6px;}
.media-tags .tag{margin-right:0;}
.media-body p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:#4a3800;word-break:break-word;}
.media-body p:last-child{margin-bottom:0;}
.media-body b{color:var(--muted);font-weight:600;}

/* ============ 时钟 ============ */
.clock-tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:9px;margin-bottom:18px;max-width:300px;}
.clock-tab{border:none;background:none;padding:8px 20px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--muted);transition:.15s;flex:1;}
.clock-tab.active{background:var(--primary);color:#fff;font-weight:600;}
.clock-display{background:linear-gradient(135deg,#3a2a00,#1f1700);color:#ffe9a8;border-radius:12px;padding:28px 18px;text-align:center;font-size:44px;font-weight:600;letter-spacing:3px;font-variant-numeric:tabular-nums;font-family:Consolas,Menlo,monospace;margin-bottom:16px;}
.clock-adjust{display:flex;gap:14px;justify-content:center;margin-bottom:10px;flex-wrap:wrap;}
.clock-adjust label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600;}
.clock-adjust input{width:72px;padding:9px 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg-softer);outline:none;font-size:15px;text-align:center;transition:.16s;}
.clock-adjust input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
.clock-hint{text-align:center;font-size:12px;color:var(--muted);margin:0 0 16px;}
.clock-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.clock-actions .btn{min-width:92px;}

/* ============ 歌曲表 ============ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;}
.songs-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:860px;}
.songs-table th{text-align:left;padding:11px 12px;background:var(--bg-base);color:var(--muted);font-weight:600;font-size:12.5px;border-bottom:1px solid var(--border);white-space:nowrap;}
.songs-table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.songs-table tbody tr:last-child td{border-bottom:none;}
.songs-table tbody tr:hover td{background:var(--bg-softer);}
.song-title{font-weight:600;color:var(--text);}
.song-sub{font-size:12px;color:var(--muted);margin-top:2px;}
details.sub{border:1px solid var(--border);border-radius:10px;padding:0 14px;margin-bottom:16px;background:var(--bg-softer);}
details.sub summary{cursor:pointer;padding:11px 0;font-size:13.5px;color:var(--muted);font-weight:600;list-style:none;outline:none;}
details.sub summary::-webkit-details-marker{display:none;}
details.sub summary::before{content:"▸ ";color:var(--primary);}
details.sub[open] summary::before{content:"▾ ";}
details.sub .inner{padding-bottom:14px;}

/* ============ 日历 ============ */
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.cal-toolbar .spacer{flex:1 1 auto;}
.cal-selects{display:flex;gap:8px;}
.cal-selects select{padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-softer);font-size:14px;color:var(--text);outline:none;transition:.16s;cursor:pointer;}
.cal-selects select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
.cal-selects select:disabled{color:#c3c8d3;cursor:not-allowed;}
.cal-hint{font-size:12.5px;color:var(--muted);margin:0 0 14px;}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:7px;}
.cal-weekdays span{text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);padding:2px 0;}
.cal-weekdays span.weekend{color:#b91c1c;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;}
.cal-day{min-height:106px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:7px 8px;display:flex;flex-direction:column;gap:5px;overflow:hidden;transition:.15s;}
.cal-day[data-key]{cursor:pointer;}
.cal-day[data-key]:hover{border-color:var(--primary);background:var(--bg-softer);}
.cal-day.out{background:var(--bg-base);border-style:dashed;border-color:#f0e6c8;}
.cal-day.today{border-color:var(--primary);}
.cal-day.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft);}
.cal-day-head{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.cal-day-num{font-size:13px;font-weight:700;color:#5a4a20;line-height:1;}
.cal-day.out .cal-day-num{color:#c9cdd6;font-weight:600;}
.cal-day.today .cal-day-num{color:var(--primary-dark);}
.cal-count{font-size:10px;font-weight:700;color:#fff;background:var(--primary);border-radius:999px;padding:1px 6px;line-height:1.5;}
.cal-mini{display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.cal-mini-item{font-size:11px;line-height:1.3;color:#4a3800;background:var(--primary-soft);border-radius:5px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-mini-item b{color:var(--primary-dark);}
.cal-more{font-size:10.5px;color:#a89260;padding-left:2px;}
.cal-item{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:9px;background:var(--bg-softer);}
.cal-item-main{flex:1;min-width:0;}
.cal-item-top{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px;}
.cal-item-time{font-size:12.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);border-radius:6px;padding:2px 8px;white-space:nowrap;}
.cal-item-content{font-size:14.5px;font-weight:600;color:var(--text);word-break:break-word;}
.cal-item-meta{font-size:12.5px;color:var(--muted);line-height:1.6;word-break:break-word;}
.cal-item-actions{display:flex;gap:6px;flex:0 0 auto;}

/* ============ 代码编辑器 ============ */
.code-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.code-modes{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:9px;}
.code-mode{border:none;background:none;padding:7px 20px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--muted);transition:.15s;}
.code-mode.active{background:var(--primary);color:#fff;font-weight:600;}
.code-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.code-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#codeInput{width:100%;height:470px;padding:14px;border-radius:10px;border:1px solid #3a2a00;background:#1f1700;color:var(--primary);outline:none;resize:vertical;font-family:Consolas,Menlo,"Courier New",monospace;font-size:13.5px;line-height:1.72;tab-size:2;transition:.16s;white-space:pre;overflow:auto;}
#codeInput:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(74,144,226,.25);}
#codeInput::placeholder{color:var(--primary);opacity:.55;}
.code-preview-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;height:470px;}
#codePreview{width:100%;height:100%;border:none;display:block;background:#fff;}
.code-hint{margin:12px 0 0;font-size:12.5px;color:var(--muted);}

/* ============ 画布 ============ */
.draw-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.brush-colors{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.color-dot{width:26px;height:26px;border-radius:50%;border:2px solid #fff;padding:0;box-shadow:0 0 0 1px var(--border);cursor:pointer;transition:.15s;}
.color-dot:hover{transform:scale(1.14);}
.color-dot.active{box-shadow:0 0 0 2px var(--primary);transform:scale(1.14);}
.brush-size{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;}
.brush-size input[type=range]{width:110px;accent-color:var(--primary);cursor:pointer;}
.brush-size span{color:var(--text);min-width:22px;text-align:center;font-variant-numeric:tabular-nums;}
#eraserBtn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.draw-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;line-height:0;}
#drawCanvas{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair;}

/* ============ 弹窗 ============ */
.modal-backdrop{position:fixed;inset:0;background:rgba(58,42,0,.45);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-backdrop.show{display:flex;}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border);}
.modal-head h3{margin:0;font-size:15.5px;}
.modal-head button{border:none;background:none;font-size:16px;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px;}
.modal-head button:hover{background:var(--bg-soft);color:var(--primary-dark);}
.modal-body{padding:18px;overflow-y:auto;white-space:pre-wrap;line-height:1.9;font-size:14px;color:#4a3800;}

/* ============ 设置 / 数据 ============ */
.tip{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.75;}
.data-actions{display:flex;gap:10px;flex-wrap:wrap;}
.storage-info{margin:16px 0 0;font-size:12.5px;color:var(--muted);}
.storage-bar{height:6px;border-radius:3px;background:var(--bg-soft);overflow:hidden;margin-top:8px;max-width:340px;}
.storage-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--primary-dark));width:0;transition:.3s;}
.version-line{display:flex;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap;padding:14px 16px;border-radius:10px;background:var(--bg-softer);border:1px solid var(--lime-shine);}
.version-label{color:var(--muted);font-size:13px;}
.version-val{color:var(--primary-dark);font-weight:800;font-size:17px;letter-spacing:.6px;}

/* ============ 登录 ============ */
.auth-wrap{max-width:420px;margin:60px auto;padding:0 20px;}
.auth-card{background:#fff;border:1px solid var(--lime-shine);border-radius:14px;padding:28px 24px;}
.auth-card h2{margin:0 0 8px;font-size:22px;}
.auth-card p.sub{margin:0 0 22px;color:var(--muted);font-size:13.5px;line-height:1.6;}
.auth-tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:9px;margin-bottom:20px;}
.auth-tabs button{flex:1;border:none;background:none;padding:9px 0;border-radius:7px;cursor:pointer;font-size:14px;color:var(--muted);transition:.15s;}
.auth-tabs button.active{background:var(--primary);color:#fff;font-weight:600;}
.auth-msg{margin-top:14px;font-size:13px;padding:10px 12px;border-radius:8px;display:none;line-height:1.6;}
.auth-msg.ok{background:var(--primary-soft);color:var(--primary-dark);display:block;}
.auth-msg.err{background:#fef2f2;color:#b91c1c;display:block;}

/* ============ AI 聊天 ============ */
.chat-box{display:flex;flex-direction:column;height:560px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--bg-softer);}
.chat-msg{max-width:82%;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.7;word-break:break-word;white-space:pre-wrap;}
.chat-msg.user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.chat-msg.ai{align-self:flex-start;background:#fff;border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px;}
.chat-msg.sys{align-self:center;background:var(--bg-soft);color:var(--muted);font-size:12.5px;padding:6px 12px;border-radius:999px;}
.chat-input-row{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border);background:#fff;}
.chat-input-row textarea{flex:1;resize:none;height:56px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);outline:none;font-size:14px;font-family:inherit;}
.chat-input-row textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(74,144,226,.20);}
.chat-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.chat-quota{font-size:12.5px;color:var(--muted);margin-left:auto;}
.ai-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;font-size:12.5px;cursor:pointer;border:1px solid var(--lime-shine);background:var(--bg-softer);color:var(--primary-dark);transition:.15s;margin-right:8px;}
.ai-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.ai-pop{position:fixed;inset:0;background:rgba(58,42,0,.45);z-index:250;display:none;align-items:center;justify-content:center;padding:20px;}
.ai-pop.show{display:flex;}
.ai-pop-card{background:#fff;border-radius:14px;width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.ai-pop-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);}
.ai-pop-head h3{margin:0;font-size:15.5px;color:var(--text);}
.ai-pop-body{padding:18px;overflow-y:auto;font-size:14px;line-height:1.85;white-space:pre-wrap;color:#4a3800;}
.ai-pop-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}

/* ============ 时间线 ============ */
.tl-list{position:relative;padding-left:28px;}
.tl-list::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(to bottom,var(--primary),var(--lime-shine));border-radius:1px;}
.tl-item{position:relative;margin-bottom:16px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;transition:.15s;}
.tl-item:hover{border-color:var(--primary);}
.tl-item::before{content:"";position:absolute;left:-24px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:0 0 0 2px var(--primary-soft);}
.tl-time{font-size:12px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);display:inline-block;padding:2px 9px;border-radius:999px;margin-bottom:6px;}
.tl-title{font-size:14.5px;font-weight:700;margin:0 0 4px;}
.tl-desc{font-size:13px;color:#5a4a20;line-height:1.65;margin:0;}
.tl-cat{font-size:11px;color:var(--muted);background:var(--bg-soft);padding:1px 8px;border-radius:999px;margin-left:6px;}
.tl-actions{position:absolute;right:10px;top:10px;display:flex;gap:5px;}

/* ============ 对话生成器 ============ */
.dlg-setup{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:640px){.dlg-setup{grid-template-columns:1fr;}}
.dlg-log{background:var(--bg-softer);border:1px solid var(--border);border-radius:12px;padding:18px;max-height:520px;overflow-y:auto;font-size:14px;line-height:1.85;}
.dlg-line{margin-bottom:14px;padding-left:10px;border-left:3px solid #e5e7eb;}
.dlg-line.a{border-left-color:var(--primary);}
.dlg-line.b{border-left-color:#c9a02b;}
.dlg-speaker{font-weight:700;font-size:13px;margin-bottom:3px;}
.dlg-line.a .dlg-speaker{color:var(--primary-dark);}
.dlg-line.b .dlg-speaker{color:var(--primary-dark);}
.dlg-text{color:#4a3800;}

/* ============ 随机生成 ============ */
.rng-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:14px;}
.rng-chip{background:var(--bg-softer);border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:.15s;text-align:center;}
.rng-chip:hover{border-color:var(--primary);background:var(--bg-softer);transform:translateY(-2px);}
.rng-chip b{display:block;font-size:13.5px;color:var(--text);margin-bottom:3px;}
.rng-chip span{font-size:11.5px;color:var(--muted);}
.rng-result{background:var(--bg-softer);border:1px solid var(--lime-shine);border-radius:10px;padding:16px 18px;font-size:15px;line-height:1.85;color:#4a3800;min-height:60px;white-space:pre-wrap;word-break:break-word;}

/* ============ 起名器 ============ */
.name-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.name-item{background:var(--bg-softer);border:1px solid var(--border);border-radius:999px;padding:7px 16px;font-size:14px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;}
.name-item:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.name-item.faved{background:var(--primary-soft);border-color:var(--lime-shine);color:var(--primary-dark);}
.name-item .star{font-size:12px;}

/* ============ 灵感速记 ============ */
.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.note-card{background:var(--bg-softer);border:1px solid #f0e6c8;border-radius:10px;padding:14px;position:relative;transition:.15s;min-height:100px;display:flex;flex-direction:column;gap:8px;}
.note-card:hover{box-shadow:0 4px 12px rgba(74,144,226,.14);border-color:var(--lime-shine);}
.note-card .note-content{font-size:13.5px;line-height:1.7;color:#4a3800;white-space:pre-wrap;flex:1;}
.note-card .note-tags{display:flex;flex-wrap:wrap;gap:5px;}
.note-card .note-tag{font-size:11px;background:var(--primary-soft);color:var(--primary-dark);padding:2px 8px;border-radius:999px;}
.note-card .note-time{font-size:11px;color:#a89260;}
.note-card .note-del{position:absolute;right:8px;top:8px;border:none;background:none;color:#a89260;cursor:pointer;font-size:13px;padding:2px 5px;border-radius:5px;}
.note-card .note-del:hover{background:#fecaca;color:#b91c1c;}

/* ============ 帮助中心 ============ */
#page-help .page-title{font-size:24px;}
#page-help .page-desc{font-size:15px;line-height:1.85;margin-bottom:24px;}
.help-layout{display:grid;grid-template-columns:minmax(0,1fr) 182px;gap:22px;align-items:start;}
.help-sidebar{position:sticky;top:84px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;max-height:calc(100vh - 120px);overflow-y:auto;}
.help-sidebar .hs-title{font-size:11.5px;font-weight:700;color:#a89260;letter-spacing:.8px;padding:6px 10px 8px;}
.help-sidebar a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--muted);text-decoration:none;transition:.15s;margin-bottom:2px;cursor:pointer;}
.help-sidebar a .hs-dot{width:6px;height:6px;border-radius:50%;background:#d1d5db;flex:0 0 auto;transition:.18s;}
.help-sidebar a:hover{background:var(--bg-soft);color:var(--text);}
.help-sidebar a:hover .hs-dot{background:#a89260;}
.help-sidebar a.active{background:var(--primary-soft);color:var(--primary-dark);font-weight:600;}
.help-sidebar a.active .hs-dot{background:var(--primary);box-shadow:0 0 0 3px rgba(74,144,226,.22);}
#page-help .panel{margin-bottom:16px;padding:20px 20px 18px;scroll-margin-top:88px;}
#page-help .panel-head{font-size:17px;font-weight:700;gap:10px;margin:0 0 18px;padding-bottom:13px;border-bottom:1px solid var(--border);}
#page-help .panel-head svg{width:19px;height:19px;color:var(--primary);flex:0 0 auto;}
.help-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:2px;}
.help-toc button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:15px 8px;border-radius:11px;border:1px solid var(--border);background:var(--bg-softer);color:#5a4a20;font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s;}
.help-toc button svg{width:21px;height:21px;color:var(--primary);transition:.18s;}
.help-toc button:hover{border-color:var(--primary);background:var(--bg-softer);color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 5px 14px rgba(74,144,226,.14);}
.help-toc button:active{transform:translateY(0);box-shadow:none;}
.help-step{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed var(--border);}
.help-step:first-child{padding-top:2px;}
.help-step:last-child{border-bottom:none;padding-bottom:2px;}
.help-step-num{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(74,144,226,.28);font-variant-numeric:tabular-nums;}
.help-step-body{font-size:14.5px;line-height:1.85;color:#5a4a20;padding-top:2px;}
.help-step-body b{display:block;font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:5px;letter-spacing:.2px;}
.faq-item{border:1px solid var(--border);border-radius:11px;margin-bottom:10px;background:var(--bg-softer);overflow:hidden;transition:.18s;}
.faq-item:last-child{margin-bottom:0;}
.faq-item[open]{background:#fff;border-color:var(--lime-shine);box-shadow:0 3px 12px rgba(74,144,226,.10);}
.faq-item summary{cursor:pointer;padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--text);list-style:none;display:flex;align-items:center;gap:11px;transition:.15s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);flex:0 0 auto;transition:.2s;}
.faq-item[open] summary::before{box-shadow:0 0 0 4px var(--primary-soft);}
.faq-item summary::after{content:"+";margin-left:auto;font-size:19px;font-weight:400;color:var(--muted);transition:.2s;line-height:1;}
.faq-item[open] summary::after{content:"−";color:var(--primary-dark);}
.faq-item summary:hover{color:var(--primary-dark);}
.faq-body{padding:0 18px 16px 36px;font-size:14px;line-height:1.85;color:#5a4a20;}
.faq-body p{margin:0 0 9px;}
.faq-body p:last-child{margin-bottom:0;}
.faq-body code{background:var(--primary-soft);color:var(--primary-dark);padding:1px 7px;border-radius:5px;font-family:Consolas,Menlo,monospace;font-size:12.5px;}
.help-tip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;}
.help-tip{background:var(--bg-softer);border:1px solid var(--border);border-radius:11px;padding:14px 16px;font-size:13.5px;line-height:1.8;color:#5a4a20;transition:.16s;}
.help-tip:hover{border-color:var(--primary);background:var(--bg-softer);transform:translateY(-2px);}
.help-tip b{display:block;font-size:14px;font-weight:700;color:var(--primary-dark);margin-bottom:7px;}
.kbd{display:inline-block;padding:2px 8px;margin:0 3px;border:1px solid #d1d5db;border-bottom-width:2px;border-radius:6px;background:#fff;font-family:Consolas,Menlo,monospace;font-size:12.5px;color:#5a4a20;line-height:1.65;white-space:nowrap;}
.help-key-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--border);align-items:flex-start;}
.help-key-row:first-child{padding-top:2px;}
.help-key-row:last-child{border-bottom:none;padding-bottom:2px;}
.help-key-label{flex:0 0 108px;font-size:14px;font-weight:700;color:var(--text);padding-top:3px;}
.help-key-desc{font-size:14px;line-height:1.9;color:#5a4a20;}
.help-info-row{display:flex;gap:13px;padding:13px 0;border-bottom:1px dashed var(--border);align-items:flex-start;}
.help-info-row:first-child{padding-top:2px;}
.help-info-row:last-child{border-bottom:none;padding-bottom:2px;}
.help-info-icon{width:30px;height:30px;border-radius:8px;flex:0 0 auto;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;}
.help-info-icon svg{width:16px;height:16px;}
.help-info-body{font-size:14px;line-height:1.85;color:#5a4a20;padding-top:3px;}
.help-info-body b{color:var(--text);font-weight:700;}
.help-dl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.help-toc button svg,.panel-head svg{width:16px;height:16px;flex:0 0 auto;}
.panel-head svg{color:var(--primary);}

/* ============ 小说助手 ============ */
.novel-total-bar{background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;border-radius:14px;padding:20px 26px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;box-shadow:0 8px 22px rgba(74,144,226,.18);}
.novel-total-bar .nlb-left{display:flex;flex-direction:column;gap:4px;}
.novel-total-bar .nlb-label{font-size:13.5px;opacity:.9;letter-spacing:.5px;}
.novel-total-bar .nlb-big{font-size:34px;font-weight:800;letter-spacing:1.5px;font-variant-numeric:tabular-nums;}
.novel-total-bar .nlb-sub{font-size:12.5px;opacity:.85;}
.novel-total-bar .nlb-right{display:flex;gap:26px;flex-wrap:wrap;}
.novel-total-bar .nlb-stat{text-align:right;}
.novel-total-bar .nlb-stat b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;}
.novel-total-bar .nlb-stat span{font-size:11.5px;opacity:.85;}
.novel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.novel-card{background:#fff;border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:.16s;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.novel-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 18px rgba(74,144,226,.14);}
.novel-cover{height:150px;background:linear-gradient(135deg,var(--bg-soft),#fff4cc);display:flex;align-items:center;justify-content:center;color:#c9ab6b;overflow:hidden;position:relative;flex:0 0 auto;}
.novel-cover img{width:100%;height:100%;object-fit:cover;}
.novel-cover svg{width:44px;height:44px;}
.novel-cover-edit{position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--muted);transition:.15s;}
.novel-cover-edit:hover{color:var(--primary-dark);border-color:var(--lime-shine);}
.novel-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.novel-body h3{margin:0;font-size:16px;padding-right:22px;}
.novel-meta{font-size:12.5px;color:var(--muted);line-height:1.7;}
.novel-meta b{color:var(--primary-dark);font-weight:700;}
.novel-syn{font-size:13px;color:#5a4a20;line-height:1.65;margin:4px 0 0;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.novel-editor{display:grid;grid-template-columns:280px 1fr;gap:16px;min-height:520px;}
@media(max-width:860px){.novel-editor{grid-template-columns:1fr;}}
.chapter-list{background:var(--bg-softer);border:1px solid var(--border);border-radius:12px;padding:10px;max-height:700px;overflow-y:auto;}
.chapter-list-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-size:12.5px;color:var(--muted);font-weight:600;}
.chapter-item{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13.5px;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:.15s;border:1px solid transparent;}
.chapter-item:hover{background:#fff;border-color:var(--border);}
.chapter-item.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.chapter-item.active .chapter-wc{color:rgba(255,255,255,.9);}
.chapter-item.active .chapter-type-badge{background:rgba(255,255,255,.25);color:#fff;}
.chapter-item .chapter-wc{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.chapter-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chapter-type-badge{font-size:10px;padding:1px 7px;border-radius:4px;background:var(--primary-soft);color:var(--primary-dark);margin-left:6px;font-weight:600;}
.chapter-editor{display:flex;flex-direction:column;gap:10px;}
.chapter-title-row{display:flex;gap:8px;flex-wrap:wrap;}
#chapterTitleInput{flex:1;min-width:200px;padding:10px 14px;border-radius:9px;border:1px solid var(--border);font-size:16px;font-weight:600;outline:none;transition:.15s;}
#chapterTitleInput:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(74,144,226,.20);}
#chapterTypeSelect{padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-softer);font-size:14px;outline:none;transition:.15s;cursor:pointer;}
#chapterTypeSelect:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
#chapterContent{width:100%;min-height:440px;padding:16px;border-radius:10px;border:1px solid var(--border);background:var(--bg-softer);outline:none;resize:vertical;font-size:15px;line-height:1.9;font-family:inherit;transition:.16s;}
#chapterContent:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}
.chapter-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--muted);}
.chart-card{background:var(--bg-softer);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;}
.chart-card h4{margin:0 0 12px;font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px;}
.type-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.type-stat-chip{background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;}
.type-stat-chip .dot{width:8px;height:8px;border-radius:50%;}
.type-stat-chip b{color:var(--primary-dark);font-weight:700;}

/* ============ 文章分析 ============ */
.wf-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:13px;color:var(--muted);}
.wf-toolbar label{display:flex;align-items:center;gap:6px;}
.wf-toolbar input[type=number]{width:70px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);font-size:13px;outline:none;background:var(--bg-softer);}
.wf-toolbar input[type=number]:focus{border-color:var(--primary);background:#fff;}
.wf-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.wf-bar-word{width:90px;font-size:13px;font-weight:600;color:var(--text);text-align:right;flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wf-bar-track{flex:1;height:22px;background:var(--bg-soft);border-radius:5px;overflow:hidden;position:relative;}
.wf-bar-fill{height:100%;background:linear-gradient(90deg,var(--lime),var(--primary-dark));border-radius:5px;transition:.3s;min-width:2px;}
.wf-bar-count{font-size:12px;color:var(--muted);width:42px;text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:860px){.wf-grid{grid-template-columns:1fr;}}
.wf-col h4{margin:0 0 12px;font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px;}

/* ============ 记账本 ============ */
.ld-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:18px;}
.ld-sum-card{background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 6px 18px rgba(74,144,226,.18);}
.ld-sum-card .ld-sum-label{font-size:12.5px;opacity:.9;margin-bottom:4px;}
.ld-sum-card .ld-sum-value{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;}
.ld-sum-card.green{background:linear-gradient(135deg,#7a9c5f,#9db97a);}
.ld-sum-card.orange{background:linear-gradient(135deg,#c9a02b,#dbb45a);}
.ld-sum-card.gray{background:linear-gradient(135deg,#8a7340,#a89260);}
.ld-list{display:flex;flex-direction:column;gap:8px;}
.ld-item{display:flex;align-items:center;gap:12px;background:var(--bg-softer);border:1px solid var(--border);border-radius:10px;padding:11px 14px;transition:.15s;}
.ld-item:hover{border-color:var(--lime-shine);background:var(--bg-softer);}
.ld-item-date{font-size:12.5px;color:var(--muted);flex:0 0 96px;font-variant-numeric:tabular-nums;}
.ld-item-content{flex:1;font-size:13.5px;color:var(--text);word-break:break-word;min-width:0;}
.ld-item-amount{font-size:14px;font-weight:700;color:#b91c1c;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.ld-item-del{border:none;background:none;color:#9aa1b1;cursor:pointer;padding:2px 6px;border-radius:5px;font-size:13px;transition:.15s;}
.ld-item-del:hover{background:#fecaca;color:#b91c1c;}
.ld-month-head{margin:18px 0 10px;font-size:13.5px;font-weight:700;color:var(--primary-dark);border-left:3px solid var(--primary);padding:2px 0 2px 10px;}

/* ============ 版本更迭 ============ */
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.upgrade-item{background:var(--bg-softer);border:1px solid var(--border);border-radius:11px;padding:15px 17px;transition:.16s;}
.upgrade-item:hover{border-color:var(--primary);background:var(--bg-softer);transform:translateY(-2px);box-shadow:0 5px 14px rgba(74,144,226,.10);}
.upgrade-item .up-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap;}
.upgrade-item .up-badge{font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);white-space:nowrap;}
.upgrade-item b{font-size:14.5px;color:var(--text);}
.upgrade-item p{margin:0;font-size:13px;line-height:1.8;color:#5a4a20;}

/* ============ 数学计算结果卡 ============ */
.mc-result-box{background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;border-radius:14px;padding:22px 26px;text-align:center;margin-top:4px;box-shadow:0 8px 22px rgba(74,144,226,.20);}
.mc-res-label{font-size:12.5px;opacity:.9;letter-spacing:.5px;margin-bottom:8px;}
.mc-res-value{font-size:28px;font-weight:800;line-height:1.35;word-break:break-all;font-variant-numeric:tabular-nums;}
.mc-res-sub{font-size:12.5px;opacity:.85;margin-top:9px;line-height:1.6;}

/* ============ BMI 条 ============ */
.bmi-scale{display:flex;height:34px;border-radius:9px;overflow:hidden;margin:6px 0 10px;}
.bmi-seg{display:flex;align-items:center;justify-content:center;font-size:11.5px;color:#fff;font-weight:700;letter-spacing:.5px;}
.bmi-scale-labels{display:flex;font-size:11.5px;color:var(--muted);margin-bottom:6px;}
.bmi-scale-labels span{flex:1;text-align:center;}
.bmi-value{font-size:46px;font-weight:800;text-align:center;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.bmi-tag{display:inline-block;margin-top:10px;padding:5px 18px;border-radius:999px;font-size:14px;font-weight:700;}
.bmi-ideal{text-align:center;font-size:13.5px;color:var(--muted);margin-top:16px;line-height:1.85;}
.bmi-ideal b{color:var(--primary-dark);}

/* ============ 运动/健康/鞋码 ============ */
.exer-profile-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;
  border-radius:14px;padding:18px 22px;margin-bottom:20px;
  box-shadow:0 8px 22px rgba(74,144,226,.20);
}
.exer-profile-bar .epb-left{display:flex;flex-direction:column;gap:4px;}
.exer-profile-bar .epb-title{font-size:16px;font-weight:800;letter-spacing:.5px;}
.exer-profile-bar .epb-sub{font-size:12.5px;opacity:.9;}
.exer-profile-bar .epb-right{display:flex;flex-wrap:wrap;gap:18px;}
.exer-profile-bar .epb-stat{text-align:right;}
.exer-profile-bar .epb-stat b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;}
.exer-profile-bar .epb-stat span{font-size:11.5px;opacity:.9;}

.exer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.exer-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;transition:.16s;position:relative;}
.exer-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(74,144,226,.14);}
.exer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-right:30px;margin-bottom:10px;}
.exer-card-title{font-size:15.5px;font-weight:700;margin:0 0 6px;color:var(--text);}
.exer-card-tags{display:flex;flex-wrap:wrap;gap:6px;}
.exer-card-body p{margin:0 0 7px;font-size:13.5px;line-height:1.65;color:#4a3800;word-break:break-word;}
.exer-card-body b{color:var(--muted);font-weight:600;}
.exer-card-body .kcal{color:#b45309;font-weight:700;}
.exer-cover{margin-top:10px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-softer);max-height:220px;display:flex;align-items:center;justify-content:center;}
.exer-cover img{width:100%;height:auto;max-height:220px;object-fit:contain;display:block;}

.exer-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-bottom:14px;}
.exer-type-chip{
  border:1px solid var(--border);background:var(--bg-softer);border-radius:10px;
  padding:10px 6px;text-align:center;cursor:pointer;transition:.15s;
  font-size:13px;color:#5a4a20;user-select:none;
}
.exer-type-chip b{display:block;font-size:13.5px;color:var(--text);margin-bottom:2px;font-weight:700;}
.exer-type-chip span{font-size:10.5px;color:var(--muted);}
.exer-type-chip:hover{border-color:var(--primary);background:var(--bg-softer);}
.exer-type-chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.exer-type-chip.active b,.exer-type-chip.active span{color:#fff;}

.shoe-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px;min-width:520px;}
.shoe-table th,.shoe-table td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--border);}
.shoe-table th{background:var(--bg-base);color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap;}
.shoe-table tbody tr:hover td{background:var(--bg-softer);}
.shoe-table td.hl{background:var(--primary-soft);color:var(--primary-dark);font-weight:700;}
.shoe-formula{
  background:var(--bg-softer);border:1px dashed var(--lime-shine);border-radius:10px;
  padding:14px 16px;font-size:13.5px;line-height:1.9;color:#5a4a20;margin-top:12px;
}
.shoe-formula b{color:var(--primary-dark);}
.shoe-formula code{background:#fff;border:1px solid var(--border);padding:1px 7px;border-radius:5px;font-family:Consolas,Menlo,monospace;font-size:12.5px;color:var(--primary-dark);}

.health-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:18px;}
.health-sum-card{
  background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;
  border-radius:12px;padding:15px 17px;
}
.health-sum-card.green{background:linear-gradient(135deg,#7a9c5f,#9db97a);}
.health-sum-card.orange{background:linear-gradient(135deg,#c9a02b,#dbb45a);}
.health-sum-card.red{background:linear-gradient(135deg,#a86868,#c48888);}
.health-sum-card .hs-label{font-size:12.5px;opacity:.9;margin-bottom:4px;}
.health-sum-card .hs-value{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;word-break:break-word;}
.health-sum-card .hs-sub{font-size:11.5px;opacity:.85;margin-top:4px;}

.sleep-chart-wrap{background:var(--bg-softer);border:1px solid var(--border);border-radius:12px;padding:14px;}
#sleepChart{display:block;width:100%;}

.vital-list{display:flex;flex-direction:column;gap:8px;}
.vital-item{display:flex;align-items:center;gap:12px;background:var(--bg-softer);border:1px solid var(--border);border-radius:10px;padding:11px 14px;transition:.15s;}
.vital-item:hover{border-color:var(--lime-shine);background:var(--bg-softer);}
.vital-item-date{font-size:12.5px;color:var(--muted);flex:0 0 132px;font-variant-numeric:tabular-nums;}
.vital-item-main{flex:1;font-size:13.5px;color:var(--text);min-width:0;word-break:break-word;}
.vital-item-main b{font-weight:700;}
.vital-item-badge{font-size:11px;padding:2px 9px;border-radius:999px;font-weight:700;flex:0 0 auto;}
.vital-item-badge.ok{background:#e8f2ec;color:#3f6b52;}
.vital-item-badge.warn{background:#faf3e3;color:#8a6414;}
.vital-item-badge.bad{background:#fbeaea;color:#8f3a3a;}
.vital-item-del{border:none;background:none;color:#9aa1b1;cursor:pointer;padding:2px 6px;border-radius:5px;font-size:13px;transition:.15s;}
.vital-item-del:hover{background:#fecaca;color:#b91c1c;}

.ai-analysis-box{
  background:var(--bg-softer);border:1px solid var(--lime-shine);border-radius:12px;
  padding:16px 18px;font-size:14px;line-height:1.9;color:#4a3800;white-space:pre-wrap;
  min-height:90px;margin-top:12px;
}

/* ============ 工具面包屑 ============ */
.tool-crumb{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crumb-path{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:13px;
}
.crumb-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  padding:4px 9px;
  border-radius:7px;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:.15s;
}
.crumb-link:hover{
  background:var(--primary-soft);
  color:var(--primary-dark);
}
.crumb-link svg{width:13px;height:13px;}
.crumb-sep{color:#c9cdd6;font-size:13px;user-select:none;}
.crumb-current{
  font-weight:700;
  color:var(--primary-dark);
  padding:4px 9px;
  font-size:13.5px;
}
.crumb-tools{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.crumb-tools-label{
  font-size:11.5px;
  color:#a89260;
  font-weight:600;
  margin-right:4px;
  letter-spacing:.4px;
  flex:0 0 auto;
}
.crumb-tool{
  background:var(--bg-soft);
  border:1px solid transparent;
  border-radius:999px;
  padding:3px 11px;
  font-size:12px;
  color:#5b6478;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}
.crumb-tool:hover{
  background:var(--primary-soft);
  color:var(--primary-dark);
  border-color:var(--lime-shine);
}
.crumb-tool.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  font-weight:600;
}

/* ============ 文章分析 textarea 补全 ============ */
#wcText,
#wfText {
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  resize: vertical;
  font-size: 14.5px;
  line-height: 1.85;
  font-family: inherit;
  color: var(--text);
  transition: .16s;
  box-sizing: border-box;
}
#wcText::placeholder,
#wfText::placeholder {
  color: #b0b6c4;
}
#wcText:focus,
#wfText:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.20);
}

/* ---------- 响应式补充 ---------- */
@media (max-width:900px){
  .help-layout{grid-template-columns:1fr;gap:14px;}
  .help-sidebar{position:sticky;top:70px;display:flex;flex-wrap:wrap;gap:6px;padding:8px;max-height:none;overflow:visible;z-index:20;order:-1;}
  .help-sidebar .hs-title{display:none;}
  .help-sidebar a{padding:6px 11px;font-size:12.5px;margin-bottom:0;border:1px solid var(--border);border-radius:999px;background:var(--bg-softer);}
  .help-sidebar a.active{background:var(--primary);color:#fff;border-color:var(--primary);}
  .help-sidebar a.active .hs-dot{display:none;}
  .help-sidebar a .hs-dot{display:none;}
}
@media (max-width:860px){
  .code-split{grid-template-columns:1fr;}
  #codeInput{height:320px;}
  .code-preview-wrap{height:360px;}
  #userBox .user-email{display:none !important;}
}
@media (max-width:640px){
  .hero{padding:26px 20px;}
  .hero h1{font-size:21px;}
  .search-wrap{width:100%;margin-left:0;}
  .search-wrap input{width:100%;max-width:100%;}
  .search-wrap input:focus{width:100%;}
  main{padding:18px 14px 0;}
  .editor-note{margin:36px auto 54px;}
  .editor-title{font-size:23px;letter-spacing:4px;margin-bottom:32px;}
  .editor-body p{font-size:15.5px;line-height:2;}
  .editor-sign p{font-size:14.5px;}
  .cal-toolbar{gap:8px;}
  .cal-toolbar .spacer{display:none;}
  .cal-selects{flex:1 1 100%;}
  .cal-selects select{flex:1;}
  .cal-weekdays{gap:4px;}
  .cal-grid{gap:4px;}
  .cal-day{min-height:64px;padding:5px;gap:3px;}
  .cal-mini{display:none;}
  .cal-day-num{font-size:12px;}
  .cal-item{flex-direction:column;align-items:stretch;gap:8px;}
  .cal-item-actions{justify-content:flex-end;}
  .clock-display{font-size:32px;padding:22px 12px;letter-spacing:2px;}
  .clock-adjust input{width:60px;font-size:14px;}
  .draw-toolbar{gap:10px;}
  .brush-size input[type=range]{width:84px;}
  .novel-total-bar{padding:16px 18px;}
  .novel-total-bar .nlb-big{font-size:26px;}
  .ld-item-date{flex:0 0 76px;font-size:12px;}
  .wf-bar-word{width:64px;}
  .exer-profile-bar{padding:14px 16px;}
  .exer-profile-bar .epb-right{gap:12px;}
  .exer-profile-bar .epb-stat b{font-size:17px;}
  .vital-item-date{flex:0 0 100px;font-size:12px;}
  .tool-crumb{padding:10px 12px;}
  .crumb-path{font-size:12.5px;}
  .crumb-tools{gap:4px;}
  .crumb-tool{font-size:11px;padding:2px 9px;}
  .crumb-tools-label{font-size:11px;}
}

/* ============ 时间戳转换 ============ */
.ts-now-bar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--lime),var(--primary-dark));color:#fff;
  border-radius:14px;padding:18px 22px;margin-bottom:20px;
  box-shadow:0 8px 22px rgba(74,144,226,.20);
}
.ts-now-bar .ts-now-left{display:flex;flex-direction:column;gap:4px;}
.ts-now-bar .ts-now-label{font-size:12.5px;opacity:.9;letter-spacing:.5px;}
.ts-now-bar .ts-now-value{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.ts-now-bar .ts-now-right{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.ts-now-bar .ts-now-stat{text-align:right;}
.ts-now-bar .ts-now-stat b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
.ts-now-bar .ts-now-stat span{font-size:11px;opacity:.85;}
.ts-now-bar .btn.ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.35);}
.ts-now-bar .btn.ghost:hover{background:rgba(255,255,255,.28);color:#fff;border-color:rgba(255,255,255,.55);}

.ts-input-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.ts-input-row input{
  flex:1;min-width:200px;padding:12px 16px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-softer);outline:none;
  font-size:15px;font-family:Consolas,Menlo,monospace;transition:.16s;
}
.ts-input-row input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}

.ts-result-list{display:flex;flex-direction:column;gap:8px;}
.ts-result-item{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  background:var(--bg-softer);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;transition:.15s;
}
.ts-result-item:hover{border-color:var(--lime-shine);background:var(--bg-softer);}
.ts-result-item .ts-result-label{
  font-size:12.5px;color:var(--muted);font-weight:600;flex:0 0 130px;
}
.ts-result-item .ts-result-value{
  font-size:14px;color:var(--text);font-family:Consolas,Menlo,monospace;
  flex:1;word-break:break-all;font-variant-numeric:tabular-nums;
}
.ts-result-item .ts-result-copy{
  border:1px solid var(--border);background:#fff;color:var(--muted);
  border-radius:6px;padding:3px 10px;font-size:11.5px;cursor:pointer;
  transition:.15s;flex:0 0 auto;
}
.ts-result-item .ts-result-copy:hover{
  color:var(--primary-dark);border-color:var(--lime-shine);background:var(--bg-softer);
}

.ts-diff-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:640px){.ts-diff-row{grid-template-columns:1fr;}}
.ts-diff-side{display:flex;flex-direction:column;gap:8px;}
.ts-diff-label{font-size:12.5px;color:var(--muted);font-weight:600;}
.ts-diff-side input{
  padding:11px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-softer);outline:none;font-size:14px;
  font-family:Consolas,Menlo,monospace;transition:.16s;
}
.ts-diff-side input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(74,144,226,.20);}

/* ============ 二维码生成 ============ */
.qr-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start;}
@media(max-width:860px){.qr-layout{grid-template-columns:1fr;}}
.qr-left{display:flex;flex-direction:column;gap:0;}

.qr-preview-panel{position:sticky;top:84px;}
@media(max-width:860px){.qr-preview-panel{position:static;}}
.qr-preview-wrap{
  background:var(--bg-softer);border:1px dashed var(--lime-shine);border-radius:12px;
  padding:16px;display:flex;align-items:center;justify-content:center;
  min-height:260px;
}
.qr-preview-wrap canvas{
  max-width:100%;height:auto;display:block;
  border-radius:6px;image-rendering:pixelated;
}
.qr-preview-hint{
  text-align:center;font-size:12.5px;color:var(--muted);margin:12px 0 0;
}
.qr-logo-preview{
  width:56px;height:56px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-softer);display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#b0b6c4;overflow:hidden;flex:0 0 auto;
}
.qr-logo-preview img{width:100%;height:100%;object-fit:contain;background:#fff;}

.qr-wifi-field{margin-bottom:12px;}
.qr-wifi-field:last-child{margin-bottom:0;}

.qr-actions{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}

/* ============ 图片压缩 ============ */
.compress-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media(max-width:860px){.compress-layout{grid-template-columns:1fr;}}
.compress-preview-card{background:var(--bg-softer);border:1px dashed var(--lime-shine);border-radius:12px;padding:12px;min-height:260px;display:flex;flex-direction:column;gap:10px;}
.compress-preview-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--muted);}
.compress-preview-title b{color:var(--text);font-weight:700;}
.compress-img-box{flex:1;display:flex;align-items:center;justify-content:center;min-height:200px;background:#fff;border-radius:8px;overflow:hidden;}
.compress-img-box img{max-width:100%;max-height:360px;display:block;}
.compress-info-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--muted);padding-top:8px;border-top:1px solid var(--border);}
.compress-info-bar b{color:var(--primary-dark);font-weight:700;}
.compress-rate{font-weight:700;padding:2px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:12px;}
.compress-rate.small{background:#e8f2ec;color:#3f6b52;}
.compress-rate.warn{background:#faf3e3;color:#8a6414;}
.compress-upload-area{
  border:2px dashed var(--lime-shine);
  border-radius:12px;
  background:var(--bg-softer);
  padding:34px 20px;
  cursor:pointer;
  transition:.16s;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.compress-upload-area:hover{
  border-color:var(--primary);
  background:var(--bg-softer);
}
.compress-upload-area svg{
  width:44px;
  height:44px;
  color:var(--primary);
  display:block;
}
.compress-upload-area p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
.compress-upload-area b{
  color:var(--primary-dark);
}

#compressFileInput{display:none;}
.compress-param-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.compress-param-row .field{flex:1;min-width:180px;margin-bottom:0;}
.compress-range-row{display:flex;align-items:center;gap:12px;}
.compress-range-row input[type=range]{flex:1;accent-color:var(--primary);cursor:pointer;}
.compress-range-row span{min-width:42px;text-align:right;font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums;}

/* ============ 体感温度与运动风险 ============ */
.heat-result-box{
  background:linear-gradient(135deg,var(--lime),var(--primary-dark));
  color:#fff;
  border-radius:14px;
  padding:22px 26px;
  text-align:center;
  margin-top:4px;
  box-shadow:0 8px 22px rgba(74,144,226,.20);
}
.heat-res-value{font-size:36px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;}
.heat-res-label{font-size:12.5px;opacity:.9;letter-spacing:.5px;margin-bottom:8px;}
.heat-res-tag{
  display:inline-block;
  padding:4px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  margin-top:10px;
  background:rgba(255,255,255,.22);
}
.heat-risk-bar-wrap{
  position:relative;
  margin:18px 0 14px;
}
.heat-risk-bar{
  height:10px;
  border-radius:99px;
  background:var(--bg-soft);
  overflow:hidden;
  display:flex;
}
.heat-risk-arrow{
  position:absolute;
  bottom:100%;
  margin-bottom:4px;
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid var(--primary-dark);
  transform:translateX(-50%);
  transition:left .3s ease;
  pointer-events:none;
}
.heat-risk-seg.cold{flex:10;}
.heat-risk-seg.ok{flex:18;}
.heat-risk-seg.low{flex:4;}
.heat-risk-seg.mid{flex:6;}
.heat-risk-seg.high{flex:3;}
.heat-risk-seg.extreme{flex:6;}
.heat-risk-seg.cold{background:#8ba6c0;}
.heat-risk-seg.ok{background:#8fb59a;}
.heat-risk-seg.low{background:#c8a468;}
.heat-risk-seg.mid{background:#d18a4a;}
.heat-risk-seg.high{background:#c17878;}
.heat-risk-seg.extreme{background:#b91c1c;}

.heat-suggest-list{margin:0;padding-left:20px;font-size:14px;line-height:1.8;color:#5a4a20;}
.heat-suggest-list li{margin-bottom:6px;}
.heat-form-note{font-size:12.5px;color:var(--muted);margin-top:-8px;margin-bottom:14px;}

/* ============ 菜谱专属 ============ */
#recipeList .place-line { word-break: break-all; }
#recipeList .place-line b { color: var(--primary-dark); flex-shrink: 0; }

/* ============ 冥想练习 ============ */
.med-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:6px;}
.med-preset-chip{
  border:1px solid var(--border);background:var(--bg-softer);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:.15s;user-select:none;
  text-align:left;
}
.med-preset-chip b{display:block;font-size:14.5px;color:var(--text);margin-bottom:4px;font-weight:700;}
.med-preset-chip span{font-size:11.5px;color:var(--muted);line-height:1.5;}
.med-preset-chip:hover{border-color:var(--primary);background:var(--bg-softer);}
.med-preset-chip.active{background:var(--primary);border-color:var(--primary);}
.med-preset-chip.active b,.med-preset-chip.active span{color:#fff;}

.med-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;min-height:340px;margin-bottom:18px;
  background:linear-gradient(160deg,var(--bg-soft),#fff4cc);
  border-radius:16px;position:relative;overflow:hidden;
}
.med-stage::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(74,144,226,.18),transparent 60%);
  pointer-events:none;
}
.med-circle{
  width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffe9a8,var(--primary) 60%,#c9920b);
  box-shadow:0 14px 44px rgba(74,144,226,.32),inset 0 -8px 20px rgba(0,0,0,.06);
  transition:transform 4s ease-in-out;
  transform:scale(.55);
  position:relative;z-index:1;
}
.med-phase{
  font-size:22px;font-weight:800;color:var(--primary-dark);
  letter-spacing:3px;margin:26px 0 6px;position:relative;z-index:1;
}
.med-countdown{
  font-size:46px;font-weight:800;color:var(--primary-dark);
  font-variant-numeric:tabular-nums;font-family:Consolas,Menlo,monospace;
  line-height:1;letter-spacing:1px;position:relative;z-index:1;
}
.med-stage.running .med-circle{animation:none;}

.med-info-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13.5px;color:var(--muted);}
.med-info-row b{color:var(--primary-dark);font-weight:800;font-size:16px;}

/* ============ JSON 格式化 / 校验 ============ */
.json-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
.json-actions-left{display:flex;gap:6px;flex-wrap:wrap;}
.json-actions-right{display:flex;gap:6px;flex-wrap:wrap;}
.json-status{
  padding:10px 14px;border-radius:9px;font-size:13px;line-height:1.65;
  background:var(--bg-soft);color:var(--muted);margin-bottom:14px;
  word-break:break-word;
}
.json-status.ok{background:var(--primary-soft);color:var(--primary-dark);font-weight:600;}
.json-status.err{background:#fef2f2;color:#b91c1c;font-weight:600;}
.json-status .pos{display:inline-block;background:#fff;border:1px solid #fecaca;border-radius:5px;padding:1px 7px;margin:0 3px;font-family:Consolas,Menlo,monospace;font-size:12px;}

.json-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:860px){.json-split{grid-template-columns:1fr;}}
.json-split textarea{
  width:100%;min-height:380px;padding:14px 16px;
  border-radius:10px;border:1px solid var(--border);
  background:var(--bg-softer);outline:none;resize:vertical;
  font-size:13.5px;line-height:1.7;
  font-family:Consolas,Menlo,"Courier New",monospace;
  color:var(--text);transition:.16s;
  white-space:pre;overflow:auto;tab-size:2;
}
.json-split textarea:focus{
  border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.json-split textarea[readonly]{background:var(--bg-base);cursor:text;}
.json-split textarea::placeholder{color:#b0b6c4;}

/* ============ 帮助中心布局修复补丁 ============ */
.help-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 182px !important;
  gap:22px !important;
  align-items:start !important;
}
.help-content{display:block !important;}
#page-help .panel{display:block !important;}

.help-step{
  display:flex !important;
  flex-direction:row !important;
  gap:16px !important;
  padding:16px 0 !important;
  border-bottom:1px dashed var(--border) !important;
}
.help-step:first-child{padding-top:2px !important;}
.help-step:last-child{border-bottom:none !important;padding-bottom:2px !important;}
.help-step-num{
  width:32px !important;height:32px !important;border-radius:50% !important;
  flex:0 0 auto !important;
  background:linear-gradient(135deg,var(--lime),var(--primary-dark)) !important;
  color:#fff !important;font-weight:800 !important;font-size:14px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 3px 9px rgba(74,144,226,.28) !important;
}
.help-step-body{
  flex:1 !important;
  font-size:14.5px !important;line-height:1.85 !important;
  color:#5a4a20 !important;padding-top:2px !important;
}
.help-step-body b{
  display:block !important;font-size:15.5px !important;font-weight:700 !important;
  color:var(--text) !important;margin-bottom:5px !important;
}

@media (min-width:901px){
  .help-layout{grid-template-columns:minmax(0,1fr) 182px !important;}
  .help-sidebar{
    position:sticky !important;
    top:84px !important;
    display:block !important;
    flex-wrap:nowrap !important;
    padding:10px !important;
    max-height:calc(100vh - 120px) !important;
    overflow-y:auto !important;
    order:0 !important;
  }
  .help-sidebar .hs-title{display:block !important;}
  .help-sidebar a{
    padding:8px 10px !important;
    font-size:13.5px !important;
    margin-bottom:2px !important;
    border:1px solid transparent !important;
    border-radius:8px !important;
    background:none !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
  }
  .help-sidebar a .hs-dot{display:inline-block !important;}
}

@media (max-width:900px){
  .help-layout{grid-template-columns:1fr !important;gap:14px !important;}
  .help-sidebar{
    position:sticky !important;
    top:70px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:8px !important;
    max-height:none !important;
    overflow:visible !important;
    order:-1 !important;
    z-index:20 !important;
  }
  .help-sidebar .hs-title{display:none !important;}
  .help-sidebar a{
    padding:6px 11px !important;
    font-size:12.5px !important;
    margin-bottom:0 !important;
    border:1px solid var(--border) !important;
    border-radius:999px !important;
    background:var(--bg-softer) !important;
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
  }
  .help-sidebar a.active{
    background:var(--primary) !important;
    color:#fff !important;
    border-color:var(--primary) !important;
  }
  .help-sidebar a.active .hs-dot{display:none !important;}
  .help-sidebar a .hs-dot{display:none !important;}
}

/* ============ 汇率换算 ============ */
#page-exchange .mc-result-box{
  margin-top:0;
}
#fxMeta{
  font-weight:600;
  color:var(--primary-dark);
}
#fxTable td:last-child,
#fxTable th:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ============ 首页推广横幅（无图标版） ============ */
.promo-banner{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  margin-bottom:24px;
  border-radius:16px;
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--bg-base) 0%, #fff4cc 100%);
  border:1px solid rgba(74,144,226,.28);
  box-shadow:0 8px 24px -12px rgba(74,144,226,.25);
  overflow:hidden;
}
.promo-banner::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--lime), var(--primary));
  border-radius:4px 0 0 4px;
}
.promo-badge{
  position:absolute;
  top:10px;right:14px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.5px;
  color:#fff;
  background:linear-gradient(135deg, var(--lime), var(--primary));
  padding:2px 10px;
  border-radius:999px;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}
.promo-body{
  flex:1;
  min-width:0;
  padding-right:60px;
}
.promo-title{
  margin:0 0 4px;
  font-size:15.5px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.3px;
}
.promo-desc{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:#7a5a20;
}
.promo-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.promo-close{
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid rgba(74,144,226,.3);
  background:#fff;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
}
.promo-close:hover{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}
@media (max-width:640px){
  .promo-banner{
    flex-wrap:wrap;
    padding:16px 16px 14px;
    gap:12px;
  }
  .promo-body{padding-right:0;width:100%;}
  .promo-actions{width:100%;justify-content:flex-end;}
  .promo-badge{top:8px;right:12px;}
}

.notif-pin-badge{
  display:inline-block;
  margin-right:6px;
  padding:1px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  color:#3a2a00;
  background:linear-gradient(135deg, var(--lime), var(--primary));
  vertical-align:1px;
  box-shadow:0 2px 6px -2px rgba(74,144,226,.6);
}

/* ============ 表格填入器 ============ */
.title-wrap{margin-bottom:14px;}
.title-input{
  width:100%;
  border:1px solid var(--border);
  background:var(--bg-softer);
  text-align:center;
  font-size:20px;
  font-weight:800;
  color:var(--primary-dark);
  font-family:inherit;
  padding:12px 16px;
  outline:none;
  border-radius:10px;
  transition:.16s;
  letter-spacing:.6px;
}
.title-input::placeholder{color:#d3b88c;font-weight:600;}
.title-input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.table-wrap{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 8px rgba(74,144,226,.06);
}
.fill-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.fill-table td{border:1px solid var(--border);padding:0;vertical-align:middle;}
.fill-table td.label{
  width:112px;text-align:center;font-size:15px;font-weight:800;
  letter-spacing:2px;height:92px;user-select:none;
}
.fill-table td.cell{height:92px;}

.cell-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;min-height:92px;transition:background .12s;
}
.fill-table td.cell.over .cell-inner{background:rgba(255,244,204,.55);}
.cell-inner:not(:has(img))::after{
  content:"拖入图片";color:#c9b89a;font-size:13px;
  pointer-events:none;letter-spacing:.5px;
}

.thumb{position:relative;height:68px;flex:0 0 auto;cursor:grab;}
.thumb:active{cursor:grabbing;}
.thumb img{
  height:100%;width:auto;display:block;border-radius:6px;
  object-fit:cover;pointer-events:none;border:1px solid rgba(74,144,226,.15);
}
.thumb .del{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;
  padding:0;border:none;border-radius:50%;background:var(--primary-dark);color:#fff;
  font-size:12px;line-height:1;display:none;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(74,144,226,.4);
}
.thumb:hover .del{display:flex;}
.thumb.selected{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;}
.thumb.dragging{opacity:.35;}

.toolbar{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;}
.picker{
  flex:1 1 320px;min-height:90px;border:1.5px dashed rgba(74,144,226,.35);
  border-radius:12px;background:var(--bg-softer);display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;padding:12px 14px;cursor:pointer;transition:.15s;
}
.picker:hover{border-color:var(--primary);background:var(--bg-soft);}
.picker.over{border-color:var(--primary);background:#fff4cc;}
.picker .thumb{height:58px;}

.picker .placeholder{
  display:flex;align-items:center;gap:8px;color:#b09860;
  font-size:14px;user-select:none;
}
.placeholder .plus{
  width:26px;height:26px;border-radius:50%;background:var(--primary-soft);
  color:var(--primary-dark);font-size:16px;line-height:26px;text-align:center;font-weight:700;
}

.chk{
  display:flex;align-items:center;gap:6px;font-size:14px;
  color:#7a5a20;user-select:none;cursor:pointer;white-space:nowrap;
  padding:0 6px;font-weight:600;
}
.chk input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;}

/* ============ 幸运转盘 ============ */
.lw-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.lw-option-row{display:flex;align-items:center;gap:10px;}
.lw-option-idx{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-dark);
  font-size:12.5px;font-weight:800;display:flex;
  align-items:center;justify-content:center;
}
.lw-option-input{
  flex:1;padding:9px 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--bg-softer);
  outline:none;font-size:14px;transition:.16s;font-family:inherit;
}
.lw-option-input:focus{
  border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.lw-option-del{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:#9aa1b1;
  cursor:pointer;font-size:14px;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.lw-option-del:hover{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
.lw-option-del:disabled{opacity:.35;cursor:not-allowed;}

.lw-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.lw-theme{
  display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:12px 10px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg-softer);cursor:pointer;transition:.16s;
}
.lw-theme:hover{border-color:var(--primary);background:var(--bg-soft);}
.lw-theme.active{
  border-color:var(--primary);background:var(--primary-soft);
  box-shadow:0 0 0 2px rgba(74,144,226,.18);
}
.lw-theme-dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;}
.lw-theme-dots span{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
}
.lw-theme-name{font-size:12.5px;font-weight:700;color:#7a5a20;}

.lw-stage{
  position:relative;width:100%;max-width:560px;margin:0 auto 18px;
  aspect-ratio:1/1;
}
.lw-wheel-wrap{
  position:absolute;inset:0;
  border-radius:50%;
  will-change:transform;
  filter:drop-shadow(0 12px 32px rgba(74,144,226,.25));
}
.lw-wheel-wrap canvas{
  width:100%;height:100%;display:block;border-radius:50%;
}
.lw-pointer{
  position:absolute;top:-4px;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:26px solid var(--primary);
  filter:drop-shadow(0 3px 6px rgba(74,144,226,.4));
  z-index:3;pointer-events:none;
}
.lw-pointer::after{
  content:"";position:absolute;top:-10px;left:-7px;
  width:14px;height:14px;border-radius:50%;
  background:var(--lime);
  border:2px solid #fff;
  box-shadow:0 2px 4px rgba(74,144,226,.35);
}
.lw-go{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#fff;font-size:17px;font-weight:900;letter-spacing:2px;
  cursor:pointer;z-index:4;
  box-shadow:0 8px 22px -6px rgba(74,144,226,.65),inset 0 2px 0 rgba(255,255,255,.35);
  transition:.16s;
}
.lw-go:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.05);}
.lw-go:active:not(:disabled){transform:translate(-50%,-50%) scale(.97);}
.lw-go:disabled{opacity:.75;cursor:not-allowed;}

.lw-result{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px;border-radius:14px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid var(--lime-shine);
}
.lw-result-label{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:1px;}
.lw-result-value{
  font-size:24px;font-weight:900;color:var(--primary-dark);
  letter-spacing:1px;word-break:break-all;text-align:center;
  min-height:1.2em;
}

.lw-history{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.lw-history-item{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 14px;border-radius:10px;
  background:var(--bg-softer);border:1px solid var(--border);
  transition:.15s;
}
.lw-history-item:hover{border-color:var(--primary);background:var(--bg-soft);}
.lw-history-result{font-size:14px;font-weight:700;color:var(--text);word-break:break-all;}
.lw-history-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  .lw-stage{max-width:340px;}
  .lw-go{width:72px;height:72px;font-size:14px;letter-spacing:1px;}
  .lw-pointer{border-left-width:13px;border-right-width:13px;border-top-width:22px;}
  .lw-result-value{font-size:20px;}
}

.lw-weight-wrap{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:0 8px;height:36px;border-radius:9px;
  background:var(--bg-softer);border:1px solid var(--border);
}
.lw-weight-input{
  width:46px;padding:4px 0;border:none;background:transparent;
  outline:none;font-size:14px;font-weight:700;color:var(--text);
  text-align:center;font-family:inherit;-moz-appearance:textfield;
}
.lw-weight-input::-webkit-outer-spin-button,
.lw-weight-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.lw-weight-pct{
  font-size:11.5px;font-weight:700;color:var(--primary-dark);
  min-width:44px;text-align:right;font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .lw-option-row{gap:6px;}
  .lw-weight-wrap{padding:0 6px;}
  .lw-weight-input{width:38px;font-size:13px;}
  .lw-weight-pct{font-size:11px;min-width:38px;}
}

/* ============ 抛硬币模拟器 ============ */
.cf-stage{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 20px 28px;
  perspective:1400px;
  margin-bottom:14px;
  background:radial-gradient(circle at 50% 40%, var(--bg-soft), var(--bg-base));
  border-radius:14px;
  border:1px solid var(--border);
  overflow:hidden;
}
.cf-coin{
  position:relative;
  width:180px;
  height:180px;
  transform-style:preserve-3d;
  transition:transform 2s cubic-bezier(.22,.9,.28,1);
  will-change:transform;
}
.cf-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  font-size:56px;
  font-weight:900;
  letter-spacing:4px;
  user-select:none;
}
.cf-front{
  background:
    radial-gradient(circle at 32% 28%, #ffe9a8, var(--primary) 45%, var(--primary-dark) 100%);
  color:var(--primary-dark);
  box-shadow:
    0 12px 30px -10px rgba(74,144,226,.55),
    inset 0 -6px 18px rgba(74,144,226,.35),
    inset 0 4px 12px rgba(255,255,255,.7);
  border:3px solid rgba(255,255,255,.35);
}
.cf-back{
  background:
    radial-gradient(circle at 32% 28%, #ffffff, #e8e8e8 45%, #a8a8a8 100%);
  color:#4a4a4a;
  transform:rotateY(180deg);
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,.4),
    inset 0 -6px 18px rgba(0,0,0,.18),
    inset 0 4px 12px rgba(255,255,255,.85);
  border:3px solid rgba(255,255,255,.55);
}
.cf-face span{
  position:relative;
  z-index:1;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.cf-front span{ color:var(--primary-dark); }
.cf-back span{ color:#4a4a4a; text-shadow:0 1px 0 rgba(255,255,255,.9); }

.cf-stage.cf-spinning .cf-coin{
  animation:cfSpin .35s linear infinite;
}
@keyframes cfSpin{
  from{ transform:rotateY(0deg) scale(.98); }
  to  { transform:rotateY(360deg) scale(.98); }
}

.cf-result{
  text-align:center;
  padding:16px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid var(--lime-shine);
}
.cf-result-value{
  font-size:28px;
  font-weight:900;
  color:var(--primary-dark);
  letter-spacing:2px;
  min-height:1.3em;
  margin-bottom:6px;
}
.cf-result-value.heads{ color:var(--primary-dark); }
.cf-result-value.tails{ color:#5a5a5a; }
.cf-result-sub{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.4px;
}

.cf-btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.cf-custom{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.cf-custom input{
  flex:1 1 200px;
  padding:9px 14px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  font-size:14px;
  outline:none;
  transition:.16s;
  font-family:inherit;
}
.cf-custom input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.cf-stats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}
.cf-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,var(--bg-base));
  border:1px solid var(--border);
  transition:.15s;
}
.cf-stat:hover{ border-color:var(--lime-shine); }
.cf-stat-label{ font-size:12.5px; color:var(--muted); font-weight:600; }
.cf-stat-value{
  font-size:22px;
  font-weight:900;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.cf-stat-sub{ font-size:11.5px; color:#b09860; }
.cf-stat.heads .cf-stat-value{ color:var(--primary-dark); }
.cf-stat.tails .cf-stat-value{ color:#5a5a5a; }

.cf-history{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.cf-history-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.cf-history-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.cf-history-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.cf-history-summary{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.cf-history-count{
  font-size:12px;
  color:var(--primary-dark);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.cf-history-dots{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  align-items:center;
}
.cf-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
}
.cf-dot.h{ background:var(--primary); }
.cf-dot.t{ background:#a8a8a8; }
.cf-dot-more{
  font-size:12px;
  color:var(--muted);
  margin-left:2px;
}
.cf-history-time{
  font-size:11.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .cf-coin{ width:140px; height:140px; }
  .cf-face{ font-size:44px; letter-spacing:3px; }
  .cf-result-value{ font-size:22px; }
  .cf-btns .btn{ flex:1 1 calc(50% - 4px); }
}

/* ============ 反应速度测试 ============ */
.rt-stage{
  position:relative;
  width:100%;
  min-height:280px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:36px 20px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s, border-color .18s, transform .12s;
  border:2px solid transparent;
  overflow:hidden;
}
.rt-stage::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
  pointer-events:none;
}

.rt-stage-round{
  font-size:13px;
  letter-spacing:1px;
  font-weight:700;
  padding:3px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:inherit;
  position:relative;z-index:1;
}
.rt-stage-title{
  font-size:32px;
  font-weight:900;
  letter-spacing:3px;
  text-align:center;
  position:relative;z-index:1;
  line-height:1.2;
}
.rt-stage-hint{
  font-size:14px;
  letter-spacing:.4px;
  opacity:.85;
  position:relative;z-index:1;
}

.rt-idle{
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border-color:var(--lime-shine);
  color:var(--primary-dark);
}
.rt-idle:hover{ transform:translateY(-2px); }

.rt-waiting{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-dark));
  border-color:transparent;
  color:#ffe9a8;
}
.rt-waiting .rt-stage-round{ background:rgba(255,255,255,.2); }
.rt-waiting .rt-stage-title{ color:var(--primary); text-shadow:0 2px 10px rgba(0,0,0,.4); }

.rt-ready{
  background:linear-gradient(135deg,#22c55e,#15803d);
  border-color:transparent;
  color:#fff;
  transform:scale(1.01);
}
.rt-ready .rt-stage-round{ background:rgba(255,255,255,.22); }
.rt-ready .rt-stage-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.3); }

.rt-result{
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border-color:var(--lime-shine);
  color:var(--primary-dark);
}

.rt-result{
  margin-top:16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  padding:0;
  min-height:0;
  transition:.2s;
}
.rt-result:empty{ display:none; }

.rt-msg{
  margin:0;
  padding:16px 18px;
  font-size:14.5px;
  font-weight:700;
}
.rt-msg-warn{
  background:#fef2f2;
  color:#b91c1c;
  border-radius:12px;
  border:1px solid #fecaca;
}

.rt-round-result{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px;
  flex-wrap:wrap;
}
.rt-round-ms{
  font-size:32px;
  font-weight:900;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums;
}
.rt-round-ms small{ font-size:14px; font-weight:700; opacity:.75; margin-left:2px; }
.rt-round-tag{
  font-size:13.5px;
  font-weight:800;
  padding:4px 14px;
  border-radius:999px;
  letter-spacing:.5px;
}

.rt-final{
  padding:20px;
  border-radius:12px;
  border:1px solid var(--border);
  text-align:center;
}
.rt-final-level{
  font-size:17px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:6px;
}
.rt-final-avg{
  font-size:42px;
  font-weight:900;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  color:var(--primary-dark);
}
.rt-final-avg small{ font-size:15px; font-weight:700; opacity:.75; margin-left:6px; }
.rt-final-desc{
  font-size:13.5px;
  color:var(--muted);
  margin-top:6px;
  letter-spacing:.3px;
}
.rt-final-meta{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:14px;
  font-size:13px;
  color:#5a4a20;
}
.rt-final-meta b{
  color:var(--primary-dark);
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.rt-final-times{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-top:14px;
}
.rt-chip{
  font-size:12px;
  font-weight:700;
  padding:3px 9px;
  border-radius:6px;
  background:#fff;
  color:#7a5a20;
  border:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}

.rt-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.rt-history{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.rt-history-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.rt-history-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.rt-history-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.rt-history-avg{
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.rt-history-avg small{ font-size:11.5px; font-weight:700; opacity:.7; margin-left:2px; }
.rt-history-level{
  font-size:11.5px;
  font-weight:800;
  padding:2px 9px;
  border-radius:999px;
  letter-spacing:.4px;
}
.rt-history-sub{
  font-size:12px;
  color:#7a5a20;
}
.rt-history-time{
  font-size:11.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .rt-stage{ min-height:220px; padding:28px 16px; }
  .rt-stage-title{ font-size:24px; letter-spacing:2px; }
  .rt-stage-hint{ font-size:12.5px; }
  .rt-final-avg{ font-size:34px; }
  .rt-final-meta{ gap:12px; font-size:12.5px; }
  .rt-round-ms{ font-size:26px; }
}

/* ============ 中国车牌一览表 ============ */
.cl-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.cl-search-wrap > svg{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--muted);
  pointer-events:none;
}
.cl-search-wrap input{
  width:100%;
  padding:11px 42px 11px 40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
}
.cl-search-wrap input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.cl-search-wrap input::-webkit-search-cancel-button{display:none;}
.cl-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;
  border-radius:50%;
  border:none;
  padding:0;
  background:rgba(138,115,64,.14);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
}
.cl-clear svg{width:12px;height:12px;}
.cl-clear:hover{background:var(--primary);color:#fff;}

.cl-stats{
  margin-top:10px;
  font-size:12.5px;
  color:var(--muted);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.cl-stats b{ color:var(--primary-dark); font-weight:800; }

.cl-region{ margin-bottom:22px; }
.cl-region-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 4px 12px;
}
.cl-region-dot{
  width:10px;height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--lime),var(--primary));
  box-shadow:0 0 0 3px rgba(74,144,226,.15);
  flex:0 0 auto;
}
.cl-region-head h3{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:var(--primary-dark);
  letter-spacing:2px;
}
.cl-region-line{
  flex:1;
  height:1px;
  background:linear-gradient(to right, rgba(74,144,226,.4), transparent);
}

.cl-province-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;
}
.cl-province-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  transition:.16s;
  box-shadow:0 2px 8px rgba(74,144,226,.04);
}
.cl-province-card:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}
.cl-province-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px dashed rgba(74,144,226,.25);
}
.cl-province-abbr{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#fff;
  font-size:15px;
  font-weight:900;
  flex:0 0 auto;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}
.cl-province-name{
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cl-province-count{
  font-size:11px;
  color:var(--muted);
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,244,204,.7);
  font-weight:700;
  flex:0 0 auto;
}

.cl-code-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cl-code-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:8px;
  background:var(--bg-softer);
  border:1px solid rgba(74,144,226,.15);
  font-size:12.5px;
  transition:.15s;
}
.cl-code-item:hover{
  background:var(--bg-soft);
  border-color:var(--primary);
}
.cl-code{
  font-family:"SF Mono", Consolas, Menlo, monospace;
  font-weight:700;
  color:var(--primary-dark);
  letter-spacing:.3px;
}
.cl-code b{
  color:var(--primary-dark);
  font-weight:900;
  margin-left:1px;
}
.cl-city{
  color:#7a5a20;
  font-weight:600;
}

.cl-region-special .cl-region-dot{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-dark));
  box-shadow:0 0 0 3px rgba(74,144,226,.18);
}
.cl-special-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.cl-special-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.cl-special-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.cl-special-abbr{
  width:36px;height:36px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-dark));
  color:#fff;
  font-size:16px;
  font-weight:900;
  flex:0 0 auto;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}
.cl-special-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.cl-special-body b{
  font-size:13.5px;
  color:var(--text);
  font-weight:800;
}
.cl-special-body span{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.5;
}

@media (max-width:640px){
  .cl-province-grid{ grid-template-columns:1fr; }
  .cl-region-head h3{ font-size:14px; letter-spacing:1.5px; }
  .cl-province-name{ font-size:13.5px; }
  .cl-code-item{ font-size:12px; padding:3px 8px; }
  .cl-special-grid{ grid-template-columns:1fr; }
}

/* ============ 工具分类侧边栏（方案 A · 固定展开） ============ */
:root{
  --tool-sidebar-w: 232px;
  --header-h: 60px;
}

.global-tool-sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--tool-sidebar-w);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:60;
  overflow:hidden;
  box-shadow:2px 0 12px -8px rgba(74,144,226,.15);
}

body:not(.tool-active) .global-tool-sidebar{
  transform:translateX(-100%);
  pointer-events:none;
}

body.tool-active{
  padding-left:var(--tool-sidebar-w);
  transition:padding-left .2s ease;
}

.gts-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-softer),#fff);
}
.gts-current{
  font-size:14px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}

.gts-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 8px 24px;
  scrollbar-width:thin;
}
.gts-nav::-webkit-scrollbar{width:6px;}
.gts-nav::-webkit-scrollbar-track{background:transparent;}
.gts-nav::-webkit-scrollbar-thumb{
  background:rgba(74,144,226,.22);
  border-radius:3px;
}
.gts-nav::-webkit-scrollbar-thumb:hover{
  background:rgba(74,144,226,.38);
}

.gts-group{margin-bottom:12px;}

.gts-group-title{
  font-size:10.5px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:1.6px;
  padding:8px 10px 6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  user-select:none;
}

.gts-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid transparent;
  background:none;
  color:var(--text);
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  text-align:left;
  margin-bottom:1px;
}
.gts-item:hover{
  background:rgba(255,244,204,.7);
  color:var(--primary-dark);
  border-color:rgba(74,144,226,.15);
}
.gts-item.active{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#fff;
  font-weight:700;
  border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(74,144,226,.55);
}
.gts-item.active:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}

.gts-item-icon{
  flex:0 0 auto;
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.gts-item-icon svg{
  width:16px;height:16px;
  display:block;
  stroke-width:1.9;
}

.gts-item-text{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 900px){
  body.tool-active{
    padding-left: 0 !important;
    padding-top: 0 !important;
  }

  body.tool-active header{
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  .global-tool-sidebar{
    position: relative !important;
    top: auto !important;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.96);
    box-shadow: 0 6px 18px -12px rgba(74,144,226,.25);
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  body:not(.tool-active) .global-tool-sidebar{
    display: none;
  }

  .gts-head{
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-softer), #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }

  .gts-current{
    font-size: 13.5px;
    letter-spacing: .3px;
    color: var(--primary-dark);
    font-weight: 800;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gts-head::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #b09860;
    transition: transform .25s ease;
    flex: 0 0 auto;
  }
  .global-tool-sidebar.expanded .gts-head::after{
    transform: rotate(180deg);
  }

  .gts-nav{
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    display: block;
    transition: max-height .32s ease, padding .32s ease;
  }

  .global-tool-sidebar.expanded .gts-nav{
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 12px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .global-tool-sidebar.expanded .gts-nav::-webkit-scrollbar{ width: 4px; }
  .global-tool-sidebar.expanded .gts-nav::-webkit-scrollbar-thumb{
    background: rgba(74,144,226,.28);
    border-radius: 2px;
  }

  .gts-group{
    display: block;
    margin-bottom: 12px;
    flex: none;
  }
  .gts-group::after{ display: none; }

  .gts-group-title{
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #b09860;
    padding: 8px 6px 6px;
    white-space: normal;
    display: block;
  }

  .gts-item{
    display: flex;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,244,204,.5);
    border: 1px solid rgba(74,144,226,.12);
    font-size: 13.5px;
    margin-bottom: 4px;
    white-space: normal;
    gap: 10px;
    align-items: center;
    flex: none;
  }
  .gts-item.active{
    background: linear-gradient(135deg, var(--lime), var(--primary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(74,144,226,.55);
  }

  .gts-item-icon{
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
  .gts-item-icon svg{
    width: 16px;
    height: 16px;
  }

  .gts-item-text{
    display: inline;
    font-size: 13.5px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.tool-active .page.active{ padding-left: 0; }
}

/* ============================================================
   饮水量计算
   ============================================================ */
.hyd-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.hyd-chip{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.hyd-chip:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.hyd-chip.active{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(74,144,226,.5);
}

.hyd-special-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:#7a5a20;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  margin:4px 0 14px;
}
.hyd-special-check input{
  width:16px;height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}

.hyd-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.hyd-empty{
  text-align:center;
  padding:34px 20px;
  color:var(--muted);
}
.hyd-empty-icon{
  font-size:42px;
  margin-bottom:12px;
  line-height:1;
}
.hyd-empty p{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
}

.hyd-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.hyd-result-label{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:1px;
}
.hyd-result-tip{
  font-size:11.5px;
  color:var(--muted);
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,244,204,.7);
  font-weight:700;
}

.hyd-result-main{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  padding:18px 0 6px;
  flex-wrap:wrap;
}
.hyd-result-value{
  font-size:52px;
  font-weight:900;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  line-height:1;
}
.hyd-result-unit{
  font-size:18px;
  font-weight:800;
  color:var(--primary-dark);
  opacity:.75;
}
.hyd-result-liters{
  font-size:15px;
  font-weight:700;
  color:var(--muted);
  margin-left:6px;
}

.hyd-result-chips{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin:12px 0 18px;
}
.hyd-chip-result{
  font-size:12.5px;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(255,244,204,.8);
  color:var(--primary-dark);
}

.hyd-schedule{
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  padding:14px 16px;
  margin-bottom:14px;
}
.hyd-schedule h4{
  margin:0 0 10px;
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.5px;
}
.hyd-schedule-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px dashed rgba(74,144,226,.18);
  font-size:13px;
  flex-wrap:wrap;
}
.hyd-schedule-row:last-child{ border-bottom:none; }
.hyd-schedule-time{
  flex:0 0 120px;
  font-weight:700;
  color:var(--text);
}
.hyd-schedule-amount{
  flex:0 0 80px;
  font-weight:800;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
}
.hyd-schedule-hint{
  flex:1;
  font-size:12px;
  color:var(--muted);
  min-width:0;
}

.hyd-formula{
  border-radius:12px;
  border:1px dashed var(--lime-shine);
  background:var(--bg-softer);
  padding:12px 16px;
  margin-bottom:14px;
}
.hyd-formula-title{
  font-size:12.5px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.5px;
  margin-bottom:8px;
}
.hyd-formula-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:4px 0;
  font-size:12.5px;
  color:#7a5a20;
}
.hyd-formula-row b{
  color:var(--primary-dark);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.hyd-note{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.75;
  margin:0;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(255,244,204,.5);
}

.hyd-history{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.hyd-history-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.hyd-history-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.hyd-history-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.hyd-history-value{
  font-size:20px;
  font-weight:900;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.hyd-history-value small{
  font-size:11.5px;
  font-weight:700;
  opacity:.7;
  margin-left:2px;
}
.hyd-history-weight{
  font-size:11.5px;
  font-weight:700;
  color:#7a5a20;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,244,204,.7);
}
.hyd-history-meta{
  font-size:12px;
  color:#7a5a20;
}
.hyd-history-time{
  font-size:11.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .hyd-result-value{ font-size:42px; }
  .hyd-schedule-time{ flex:0 0 100px; font-size:12.5px; }
  .hyd-schedule-amount{ flex:0 0 68px; font-size:12.5px; }
  .hyd-schedule-hint{ display:none; }
  .hyd-chip{ padding:7px 13px; font-size:12.5px; }
}

/* ============================================================
   倒数日
   ============================================================ */
.cd-next-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  padding:26px 28px;
  margin-bottom:22px;
  border-radius:18px;
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--bg-soft);
  box-shadow:
    0 16px 40px -20px rgba(74,144,226,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;
}
.cd-next-card::before{
  content:"";
  position:absolute;
  right:-60px;top:-60px;
  width:200px;height:200px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,233,168,.6), transparent 65%);
  pointer-events:none;
}

.cd-next-icon{
  width:76px;
  height:76px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary),#ffe9a8);
  color:var(--primary-dark);
  box-shadow:
    0 10px 24px -8px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -4px 12px rgba(74,144,226,.25);
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
.cd-next-icon svg{
  width:38px;
  height:38px;
}

.cd-next-info{
  position:relative;
  z-index:1;
  min-width:0;
}
.cd-next-label{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:2px;
  color:#ffe9a8;
  margin-bottom:6px;
}
.cd-next-name{
  font-size:24px;
  font-weight:900;
  color:#fff;
  letter-spacing:1.5px;
  margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.cd-next-date{
  font-size:13px;
  color:var(--bg-soft);
  opacity:.92;
  letter-spacing:.4px;
}

.cd-next-countdown{
  position:relative;
  z-index:1;
  text-align:right;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:wrap;
}
.cd-next-days{
  font-size:58px;
  font-weight:900;
  color:#ffe9a8;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
}
.cd-next-unit{
  font-size:20px;
  font-weight:800;
  color:#ffe9a8;
  opacity:.85;
}
.cd-next-sub{
  flex:0 0 100%;
  text-align:right;
  font-size:12.5px;
  color:var(--bg-soft);
  opacity:.9;
  margin-top:6px;
  letter-spacing:.4px;
}

.cd-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.cd-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:.16s;
  box-shadow:0 2px 8px rgba(74,144,226,.05);
}
.cd-item:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}

.cd-item.expanded{
  grid-column: 1 / -1;
  border-color:var(--primary);
  box-shadow:0 10px 26px -12px rgba(74,144,226,.35);
}

.cd-item-main{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.cd-item-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#fff4cc,#ffe9a8);
  color:var(--primary-dark);
  flex:0 0 auto;
  transition:.18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.cd-item-icon svg{
  width:22px;
  height:22px;
}
.cd-item:hover .cd-item-icon,
.cd-item.expanded .cd-item-icon{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#fff;
  box-shadow:0 6px 14px -6px rgba(74,144,226,.55);
}

.cd-item-info{
  flex:1;
  min-width:0;
}
.cd-item-name{
  font-size:15.5px;
  font-weight:800;
  color:var(--text);
  margin-bottom:4px;
  letter-spacing:.5px;
}
.cd-item-date{
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:.3px;
}

.cd-item-days{
  flex:0 0 auto;
  font-size:14px;
  font-weight:900;
  color:var(--primary-dark);
  padding:5px 12px;
  border-radius:999px;
  background:rgba(255,244,204,.8);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  letter-spacing:.3px;
}
.cd-item-days.today{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#fff;
  box-shadow:0 4px 12px -4px rgba(74,144,226,.5);
}
.cd-item-days.soon{
  background:linear-gradient(135deg,#fff4cc,#ffe9a8);
  color:var(--primary-dark);
}

.cd-item-arrow{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:transform .25s ease;
}
.cd-item-arrow svg{
  width:16px;
  height:16px;
}
.cd-item.expanded .cd-item-arrow{
  transform:rotate(180deg);
  color:var(--primary-dark);
}

.cd-item-years{
  padding:0 16px 16px;
  border-top:1px dashed rgba(74,144,226,.25);
  background:linear-gradient(180deg,var(--bg-softer),#fff);
  animation:cdSlide .25s ease;
}
@keyframes cdSlide{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}

.cd-years-title{
  font-size:12px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:1px;
  padding:14px 0 10px;
}

.cd-years-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.cd-years-strip::-webkit-scrollbar{height:6px;}
.cd-years-strip::-webkit-scrollbar-track{background:transparent;}
.cd-years-strip::-webkit-scrollbar-thumb{
  background:rgba(74,144,226,.28);
  border-radius:3px;
}
.cd-years-strip::-webkit-scrollbar-thumb:hover{
  background:rgba(74,144,226,.48);
}

.cd-year-item{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:88px;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
  transition:.15s;
  scroll-snap-align:start;
}
.cd-year-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.cd-year-item.current{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(74,144,226,.6);
}
.cd-year-num{
  font-size:15px;
  font-weight:900;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
  line-height:1.1;
}
.cd-year-item.current .cd-year-num{
  color:#fff;
}
.cd-year-date{
  font-size:12.5px;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.cd-year-item.current .cd-year-date{
  color:#fff;
}
.cd-year-week{
  font-size:11px;
  color:var(--muted);
}
.cd-year-item.current .cd-year-week{
  color:rgba(255,255,255,.85);
}

@media (max-width:640px){
  .cd-next-card{
    padding:20px 20px;
    gap:14px;
    grid-template-columns:auto 1fr;
  }
  .cd-next-icon{
    width:60px;
    height:60px;
    border-radius:16px;
  }
  .cd-next-icon svg{
    width:30px;
    height:30px;
  }
  .cd-next-name{ font-size:19px; }
  .cd-next-countdown{
    grid-column:1/-1;
    text-align:center;
    justify-content:center;
    padding-top:8px;
    border-top:1px dashed rgba(255,233,168,.35);
  }
  .cd-next-days{ font-size:46px; }
  .cd-next-sub{ text-align:center; }

  .cd-list{ grid-template-columns:1fr; }
  .cd-item.expanded{ grid-column:1 / -1; }
  .cd-item-main{ gap:10px; padding:12px 14px; }
  .cd-item-icon{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  .cd-item-icon svg{
    width:19px;
    height:19px;
  }
  .cd-item-name{ font-size:14.5px; }
  .cd-item-days{ font-size:13px; padding:4px 10px; }

  .cd-year-item{
    min-width:76px;
    padding:9px 12px;
  }
  .cd-year-num{ font-size:13.5px; }
  .cd-year-date{ font-size:11.5px; }
  .cd-year-week{ font-size:10.5px; }
}

/* ============================================================
   白噪音助眠
   ============================================================ */
.wn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
}
.wn-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
}
.wn-chip svg{width:22px;height:22px;color:var(--primary-dark);transition:.18s;}
.wn-chip b{font-size:14px;font-weight:800;color:var(--text);}
.wn-chip span{font-size:11px;color:var(--muted);letter-spacing:.5px;}
.wn-chip:hover{border-color:var(--primary);background:var(--bg-soft);transform:translateY(-2px);}
.wn-chip.active{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(74,144,226,.6);
}
.wn-chip.active svg,
.wn-chip.active b,
.wn-chip.active span{color:#fff;}

.wn-player{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:20px 10px 6px;
}

/* 视觉律动条 */
.wn-visual{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  height:100px;
  width:100%;
  max-width:420px;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(160deg,var(--bg-soft),#fff4cc);
  border:1px solid var(--lime-shine);
  overflow:hidden;
  transition:.3s;
}
.wn-visual-bar{
  display:block;
  width:6px;
  height:12%;
  border-radius:3px;
  background:linear-gradient(180deg,var(--lime),var(--primary));
  opacity:.55;
  transition:height .12s ease, opacity .3s ease;
}
.wn-player.playing .wn-visual-bar{
  opacity:1;
  animation:wnPulse .9s ease-in-out infinite;
}
.wn-player.playing .wn-visual-bar:nth-child(1){ animation-delay:0s; }
.wn-player.playing .wn-visual-bar:nth-child(2){ animation-delay:.08s; }
.wn-player.playing .wn-visual-bar:nth-child(3){ animation-delay:.16s; }
.wn-player.playing .wn-visual-bar:nth-child(4){ animation-delay:.24s; }
.wn-player.playing .wn-visual-bar:nth-child(5){ animation-delay:.32s; }
.wn-player.playing .wn-visual-bar:nth-child(6){ animation-delay:.10s; }
.wn-player.playing .wn-visual-bar:nth-child(7){ animation-delay:.20s; }
.wn-player.playing .wn-visual-bar:nth-child(8){ animation-delay:.30s; }
.wn-player.playing .wn-visual-bar:nth-child(9){ animation-delay:.05s; }
.wn-player.playing .wn-visual-bar:nth-child(10){ animation-delay:.15s; }
.wn-player.playing .wn-visual-bar:nth-child(11){ animation-delay:.25s; }
.wn-player.playing .wn-visual-bar:nth-child(12){ animation-delay:.35s; }

@keyframes wnPulse{
  0%,100%{ height:12%; }
  25%    { height:80%; }
  50%    { height:38%; }
  75%    { height:62%; }
}

.wn-controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.wn-play{min-width:110px;}
.wn-stop{min-width:110px;}

.wn-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:420px;
  font-size:13.5px;
}
.wn-label{
  flex:0 0 76px;
  color:var(--muted);
  font-weight:600;
}
.wn-row input[type=range]{
  flex:1;
  accent-color:var(--primary);
  cursor:pointer;
}
.wn-row select{
  flex:1;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  font-size:13.5px;
  color:var(--text);
  outline:none;
  transition:.16s;
  cursor:pointer;
  font-family:inherit;
}
.wn-row select:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.wn-value{
  flex:0 0 72px;
  text-align:right;
  color:var(--primary-dark);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .wn-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
  .wn-chip{padding:11px 6px;}
  .wn-chip b{font-size:13px;}
  .wn-chip span{font-size:10.5px;}
  .wn-visual{height:80px;padding:10px 14px;}
  .wn-label{flex:0 0 66px;font-size:12.5px;}
  .wn-value{flex:0 0 60px;font-size:12.5px;}
  .wn-play,.wn-stop{min-width:0;flex:1;}
}

/* ============================================================
   食物过敏清单
   ============================================================ */
.al-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.al-search{
  flex:1 1 240px;
  min-width:200px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
}
.al-search:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.al-select{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  font-size:13.5px;
  color:var(--text);
  outline:none;
  transition:.16s;
  cursor:pointer;
  font-family:inherit;
  flex:0 0 auto;
}
.al-select:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.al-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}

.al-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px 14px;
  transition:.16s;
  overflow:hidden;
}
.al-card:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}
.al-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  border-radius:14px 0 0 14px;
}
.al-card.level-mild::before   { background:linear-gradient(180deg,#7a9c5f,#9db97a); }
.al-card.level-mid::before    { background:linear-gradient(180deg,#c9a02b,#dbb45a); }
.al-card.level-severe::before { background:linear-gradient(180deg,#c76e4a,#e09070); }
.al-card.level-fatal::before  { background:linear-gradient(180deg,#a82a2a,#c94a4a); }

.al-card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  padding-left:6px;
}
.al-card-title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px;
  line-height:1.35;
  word-break:break-word;
}
.al-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.al-badge{
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.al-badge.level-mild   { background:#e8f2ec; color:#3f6b52; }
.al-badge.level-mid    { background:#faf3e3; color:#8a6414; }
.al-badge.level-severe { background:#fde6da; color:#9e4b28; }
.al-badge.level-fatal  { background:#fbeaea; color:#8f3a3a; }
.al-badge.cat{
  background:var(--primary-soft);
  color:var(--primary-dark);
}

.al-card-body{
  padding-left:6px;
}
.al-card-body p{
  margin:0 0 8px;
  font-size:13.5px;
  line-height:1.7;
  color:#4a3800;
  word-break:break-word;
}
.al-card-body p:last-child{
  margin-bottom:0;
}
.al-card-body b{
  color:var(--muted);
  font-weight:600;
}

.al-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:8px 6px 0;
  border-top:1px dashed rgba(74,144,226,.25);
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.al-card-date{
  font-variant-numeric:tabular-nums;
}
.al-card-actions{
  display:flex;
  gap:6px;
}

@media (max-width:640px){
  .al-list{ grid-template-columns:1fr; }
  .al-card{ padding:14px 14px 12px; }
  .al-card-title{ font-size:15px; }
  .al-search{ flex:1 1 100%; }
  .al-select{ flex:1 1 calc(50% - 5px); }
}

/* ============================================================
   角色关系图
   ============================================================ */
.rg-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.rg-hint{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.75;
  color:var(--muted);
}

.rg-stage-wrap{
  padding:0 !important;
  overflow:hidden;
}

.rg-stage{
  position:relative;
  width:100%;
  height:540px;
  background:var(--bg-base);
  border-radius:12px;
  overflow:hidden;
}
#rgCanvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
}
#rgCanvas:active{cursor:grabbing;}
.rg-stage.connect-mode #rgCanvas{cursor:crosshair;}

.rg-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.75;
  letter-spacing:.2px;
}
.rg-empty-icon{
  font-size:44px;
  margin-bottom:12px;
  line-height:1;
  opacity:.7;
}
.rg-empty p{margin:0;}

.rg-np-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-size:15px;
  color:var(--text);
}

@media (max-width:640px){
  .rg-stage{height:420px;}
  .rg-toolbar .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:9px 10px;font-size:13px;}
  .rg-toolbar .btn:first-child{flex:1 1 100%;}
}


/* ============================================================
   小说收藏
   ============================================================ */
.nc-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.nc-search{
  flex:1 1 240px;
  min-width:200px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
}
.nc-search:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.nc-select{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  font-size:13.5px;
  color:var(--text);
  outline:none;
  transition:.16s;
  cursor:pointer;
  font-family:inherit;
  flex:0 0 auto;
}
.nc-select:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.nc-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}

.nc-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px 14px;
  transition:.16s;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.nc-card:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}
.nc-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  border-radius:14px 0 0 14px;
}
.nc-card.status-want::before    { background:linear-gradient(180deg,#8ba6c0,#a9c0d6); }
.nc-card.status-reading::before { background:linear-gradient(180deg,var(--primary),var(--primary)); }
.nc-card.status-done::before    { background:linear-gradient(180deg,#7a9c5f,#9db97a); }
.nc-card.status-drop::before    { background:linear-gradient(180deg,#a8a8a8,#c9c9c9); }

.nc-card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  padding-left:6px;
}
.nc-card-title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px;
  line-height:1.35;
  word-break:break-word;
}
.nc-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.nc-badge{
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.nc-badge.status-want    { background:#e8eff5; color:#3f5a6b; }
.nc-badge.status-reading { background:#fff4cc; color:var(--primary-dark); }
.nc-badge.status-done    { background:#e8f2ec; color:#3f6b52; }
.nc-badge.status-drop    { background:#f3f4f6; color:#6b7280; }
.nc-badge.genre{
  background:var(--primary-soft);
  color:var(--primary-dark);
}

.nc-stars{
  font-size:14px;
  letter-spacing:1px;
  color:var(--primary);
  line-height:1;
}
.nc-stars .off{ color:#e5d6a8; }

.nc-card-body{
  padding-left:6px;
}
.nc-card-body p{
  margin:0 0 8px;
  font-size:13.5px;
  line-height:1.7;
  color:#4a3800;
  word-break:break-word;
}
.nc-card-body p:last-child{ margin-bottom:0; }
.nc-card-body b{
  color:var(--muted);
  font-weight:600;
}

.nc-progress{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
.nc-progress-track{
  flex:1;
  height:8px;
  background:var(--bg-soft);
  border-radius:4px;
  overflow:hidden;
}
.nc-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--lime),var(--primary));
  border-radius:4px;
  transition:width .3s ease;
}
.nc-progress-value{
  flex:0 0 auto;
  font-size:12px;
  color:var(--primary-dark);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.nc-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding:8px 6px 0;
  border-top:1px dashed rgba(74,144,226,.25);
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.nc-card-date{ font-variant-numeric:tabular-nums; }
.nc-card-actions{ display:flex; gap:6px; }

@media (max-width:640px){
  .nc-list{ grid-template-columns:1fr; }
  .nc-card{ padding:14px 14px 12px; }
  .nc-card-title{ font-size:15px; }
  .nc-search{ flex:1 1 100%; }
  .nc-select{ flex:1 1 calc(50% - 5px); }
}

/* ============================================================
   油耗计算
   ============================================================ */
.fc-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.fc-search{
  flex:1 1 240px;
  min-width:200px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
}
.fc-search:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.fc-select{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  font-size:13.5px;
  color:var(--text);
  outline:none;
  transition:.16s;
  cursor:pointer;
  font-family:inherit;
  flex:0 0 auto;
}
.fc-select:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.fc-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:#7a5a20;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  margin:0 0 14px;
}
.fc-check input{
  width:16px;height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}

.fc-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px;
}

.fc-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px 14px;
  transition:.16s;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.fc-card:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}
.fc-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  border-radius:14px 0 0 14px;
  background:linear-gradient(180deg,var(--lime),var(--primary));
}
.fc-card.not-full::before{
  background:linear-gradient(180deg,#a8a8a8,#c9c9c9);
}

.fc-card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  padding-left:6px;
}
.fc-card-title{
  font-size:15.5px;
  font-weight:800;
  color:var(--text);
  margin:0 0 6px;
  line-height:1.35;
}
.fc-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.fc-badge{
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.fc-badge.oil{
  background:var(--primary-soft);
  color:var(--primary-dark);
}
.fc-badge.full{
  background:#e8f2ec;
  color:#3f6b52;
}
.fc-badge.half{
  background:#f3f4f6;
  color:#6b7280;
}

.fc-card-body{
  padding-left:6px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
  font-size:13px;
  color:#4a3800;
  line-height:1.6;
}
.fc-card-body .fc-cell{
  display:flex;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.fc-card-body .fc-cell b{
  color:var(--muted);
  font-weight:600;
  flex:0 0 auto;
}
.fc-card-body .fc-cell span{
  word-break:break-word;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--text);
}
.fc-card-body .fc-cell.full-row{
  grid-column:1 / -1;
}

.fc-segment{
  grid-column:1 / -1;
  margin-top:4px;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px dashed var(--lime-shine);
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  font-size:12.5px;
  color:#7a5a20;
}
.fc-segment-item{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fc-segment-item b{
  color:var(--primary-dark);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:14px;
}
.fc-segment-label{
  font-size:11.5px;
  color:var(--muted);
}

.fc-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding:8px 6px 0;
  border-top:1px dashed rgba(74,144,226,.25);
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.fc-card-date{ font-variant-numeric:tabular-nums; }
.fc-card-actions{ display:flex; gap:6px; }

@media (max-width:640px){
  .fc-list{ grid-template-columns:1fr; }
  .fc-card{ padding:14px 14px 12px; }
  .fc-card-body{ grid-template-columns:1fr; }
  .fc-search{ flex:1 1 100%; }
  .fc-select{ flex:1 1 100%; }
}

/* ============================================================
   颜色转换
   ============================================================ */
.cc-preview-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cc-preview{
  position:relative;
  width:100%;
  height:180px;
  border-radius:16px;
  background:var(--primary);
  box-shadow:0 10px 28px -12px rgba(74,144,226,.45);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:16px 20px;
  overflow:hidden;
  transition:background-color .18s ease;
}
.cc-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.06), transparent 55%);
  pointer-events:none;
}
.cc-preview-text{
  position:relative;
  font-size:20px;
  font-weight:800;
  letter-spacing:1.6px;
  font-family:Consolas,Menlo,monospace;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  background:rgba(0,0,0,.16);
  padding:6px 14px;
  border-radius:10px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.cc-preview.light .cc-preview-text{
  color:#3a2a00;
  text-shadow:0 2px 8px rgba(255,255,255,.45);
  background:rgba(255,255,255,.35);
}

.cc-preview-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- 格式字段 ---------- */
.cc-field{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.cc-field:last-of-type{ margin-bottom:0; }

.cc-field-label{
  flex:0 0 64px;
  font-size:12.5px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:1.5px;
  text-align:right;
}

.cc-input{
  flex:1;
  min-width:0;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:Consolas,Menlo,monospace;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
  transition:.16s;
}
.cc-input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.cc-input[readonly]{
  background:var(--bg-base);
  color:#5a4a20;
  cursor:text;
}
.cc-input:not([readonly]){
  background:var(--bg-softer);
}

/* ---------- 滑块 ---------- */
.cc-slider-group{
  margin-bottom:18px;
}
.cc-slider-group:last-child{ margin-bottom:0; }

.cc-slider-title{
  font-size:12.5px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:1.5px;
  margin-bottom:10px;
  padding-left:2px;
}

.cc-slider-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.cc-slider-row:last-child{ margin-bottom:0; }

.cc-slider-label{
  flex:0 0 20px;
  font-size:13.5px;
  font-weight:800;
  color:var(--text);
  text-align:center;
  font-family:Consolas,Menlo,monospace;
}
.cc-slider-row input[type=range]{
  flex:1;
  accent-color:var(--primary);
  cursor:pointer;
  height:6px;
}
.cc-slider-val{
  flex:0 0 56px;
  text-align:right;
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  font-family:Consolas,Menlo,monospace;
}

/* ---------- 预设色板 ---------- */
.cc-presets{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:10px;
}
.cc-preset{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:12px;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.16s;
  overflow:hidden;
  padding:0;
  font-family:inherit;
}
.cc-preset::after{
  content:attr(data-name);
  position:absolute;
  left:0;right:0;bottom:0;
  padding:6px 4px;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent);
  letter-spacing:.5px;
}
.cc-preset:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(74,144,226,.4);
  border-color:var(--primary);
}
.cc-preset.active{
  box-shadow:0 0 0 2px var(--primary);
  transform:translateY(-2px);
}

@media (max-width:640px){
  .cc-preview{ height:140px; padding:12px 14px; }
  .cc-preview-text{ font-size:16px; padding:5px 10px; }
  .cc-field-label{ flex:0 0 52px; font-size:11.5px; letter-spacing:1px; }
  .cc-input{ font-size:13px; padding:9px 12px; }
  .cc-slider-val{ flex:0 0 46px; font-size:12px; }
  .cc-presets{ grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:8px; }
  .cc-preset::after{ font-size:9.5px; padding:4px 2px; }
}


/* ============ 取色器按钮 ============ */
.cc-pick-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
}
.cc-pick-wrap input[type=color]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:none;
  padding:0;
  display:block;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
}


/* ============================================================
   日期计算
   ============================================================ */
.dc-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:12px;
}
.dc-row .field{
  flex:1 1 180px;
  min-width:160px;
  margin-bottom:0;
}
.dc-row-offset .field{
  flex:1 1 110px;
  min-width:96px;
}

.dc-row input[type=date]{
  padding:10px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
  width:100%;
  color:var(--text);
  cursor:pointer;
}
.dc-row input[type=date]:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.dc-quick{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* ---------- 结果卡 ---------- */
.dc-result{
  text-align:center;
  padding:26px 20px;
  border-radius:16px;
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--bg-soft);
  box-shadow:
    0 14px 32px -16px rgba(74,144,226,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
  margin-bottom:18px;
}
.dc-res-main{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.dc-res-num{
  font-size:58px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  color:#ffe9a8;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
}
.dc-res-unit{
  font-size:20px;
  font-weight:800;
  color:#ffe9a8;
  opacity:.9;
}
.dc-res-sub{
  margin-top:12px;
  font-size:13.5px;
  color:var(--bg-soft);
  opacity:.92;
  letter-spacing:.4px;
}

.dc-result-offset{
  padding:32px 20px;
}
.dc-offset-label{
  font-size:13.5px;
  opacity:.9;
  margin-bottom:10px;
  letter-spacing:.4px;
}
.dc-offset-value{
  font-size:40px;
  font-weight:900;
  line-height:1.15;
  color:#ffe9a8;
  font-variant-numeric:tabular-nums;
  letter-spacing:2px;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
  word-break:break-all;
}
.dc-offset-weekday{
  margin-top:10px;
  font-size:14px;
  color:var(--bg-soft);
  opacity:.92;
}

/* ---------- 结果网格 ---------- */
.dc-result-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.dc-result-grid-lg{
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.dc-result-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,var(--bg-base));
  border:1px solid var(--border);
  transition:.15s;
}
.dc-result-item:hover{
  border-color:var(--lime-shine);
}
.dc-result-label{
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.3px;
}
.dc-result-value{
  font-size:18px;
  font-weight:900;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  word-break:break-all;
}

/* ---------- 复选框组 ---------- */
.dc-check-group{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.dc-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  font-size:13px;
  font-weight:600;
  color:#7a5a20;
  cursor:pointer;
  transition:.15s;
  user-select:none;
}
.dc-check:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.dc-check input{
  width:14px;
  height:14px;
  accent-color:var(--primary);
  cursor:pointer;
}
.dc-check input:checked + span{
  color:var(--primary-dark);
  font-weight:700;
}

/* ---------- textarea ---------- */
#dcHolidays,
#dcWorkdays{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  resize:vertical;
  font-size:13.5px;
  line-height:1.75;
  font-family:Consolas,Menlo,"Courier New",monospace;
  color:var(--text);
  transition:.16s;
}
#dcHolidays:focus,
#dcWorkdays:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

@media (max-width:640px){
  .dc-row{flex-direction:column;align-items:stretch;}
  .dc-row .field{min-width:0;}
  .dc-row-offset{flex-direction:row;flex-wrap:wrap;}
  .dc-row-offset .field{flex:1 1 calc(50% - 7px);}
  .dc-res-num{font-size:44px;}
  .dc-offset-value{font-size:30px;letter-spacing:1px;}
  .dc-result-grid{grid-template-columns:repeat(2,1fr);}
  .dc-result-grid-lg{grid-template-columns:repeat(2,1fr);}
  .dc-check{padding:5px 10px;font-size:12.5px;}
}

/* ============================================================
   贷款计算器
   ============================================================ */
.ln-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-bottom:14px;
}

.ln-mode-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}
@media(max-width:640px){
  .ln-mode-group{grid-template-columns:1fr;}
}

.ln-mode{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  cursor:pointer;
  transition:.16s;
  text-align:left;
  font-family:inherit;
}
.ln-mode:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
  transform:translateY(-1px);
}
.ln-mode b{
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.3px;
}
.ln-mode span{
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
}
.ln-mode.active{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(74,144,226,.55);
}
.ln-mode.active b{ color:#3a2a00; }
.ln-mode.active span{ color:#5a3d00; }

.ln-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* ---------- 结果卡 ---------- */
.ln-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.ln-headline-item{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 0;
}
.ln-headline-divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.35), transparent);
}
.ln-headline-label{
  font-size:12.5px;
  color:#ffe9a8;
  opacity:.92;
  letter-spacing:1px;
  font-weight:600;
}
.ln-headline-value{
  font-size:36px;
  font-weight:900;
  color:#ffe9a8;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
  word-break:break-all;
  text-align:center;
}
.ln-headline-sub{
  font-size:11.5px;
  color:var(--bg-soft);
  opacity:.85;
  letter-spacing:.3px;
}

.ln-tip{
  margin-top:14px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,244,204,.55);
  border:1px dashed var(--lime-shine);
  font-size:12.5px;
  line-height:1.75;
  color:#7a5a20;
}

/* ---------- 明细表格 ---------- */
.ln-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.ln-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#7a5a20;
  cursor:pointer;
  user-select:none;
}
.ln-toggle input{
  width:16px;height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}

.ln-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:520px;
}
.ln-table th{
  text-align:right;
  padding:10px 12px;
  background:var(--bg-base);
  color:var(--muted);
  font-weight:600;
  font-size:12.5px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.ln-table th:first-child{ text-align:center; }

.ln-table td{
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  white-space:nowrap;
}
.ln-table td:first-child{
  text-align:center;
  color:var(--primary-dark);
  font-weight:700;
}
.ln-table tbody tr:hover td{ background:var(--bg-softer); }
.ln-table tbody tr:last-child td{ border-bottom:none; }

.ln-table .ln-hl{
  color:var(--primary-dark);
  font-weight:800;
}

.ln-more{
  text-align:center;
  padding:10px 0 0;
  font-size:12.5px;
  color:var(--muted);
}

@media (max-width:640px){
  .ln-headline-value{ font-size:26px; }
  .ln-headline-divider{ display:none; }
  .ln-headline{ gap:6px; }
  .ln-headline-item{ flex:1 1 100%; }
  .ln-form-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   折扣计算器
   ============================================================ */
.ds-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.ds-form-grid-sm{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}

/* ---------- 优惠项卡片 ---------- */
.ds-item{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:12px;
  background:var(--bg-softer);
  transition:.18s;
}
.ds-item:last-of-type{ margin-bottom:0; }

.ds-item.active{
  background:var(--bg-soft);
  border-color:var(--primary);
  box-shadow:0 6px 18px -10px rgba(74,144,226,.35);
}

.ds-item-head{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  flex-wrap:wrap;
}
.ds-item-head input[type=checkbox]{
  width:18px;
  height:18px;
  accent-color:var(--primary);
  cursor:pointer;
  flex:0 0 auto;
}
.ds-item-title{
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.3px;
}
.ds-item-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

.ds-item-body{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(74,144,226,.28);
}
.ds-item:not(.active) .ds-item-body{
  display:none;
}
.ds-item:not(.active) .ds-item-title,
.ds-item:not(.active) .ds-item-desc{
  color:#b09860;
}

.ds-item-hint{
  margin:10px 0 0;
  font-size:12.5px;
  color:var(--primary-dark);
  font-weight:600;
  line-height:1.65;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(255,244,204,.55);
  border-left:3px solid var(--primary);
}

/* ---------- 步骤 ---------- */
.ds-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ds-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.ds-step:hover{
  border-color:var(--lime-shine);
}
.ds-step-num{
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#fff;
  font-size:12.5px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px -3px rgba(74,144,226,.5);
}
.ds-step-body{
  flex:1;
  min-width:0;
  font-size:13.5px;
  line-height:1.75;
  color:#4a3800;
  word-break:break-word;
}
.ds-step-body b{
  color:var(--primary-dark);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ds-step-body .ds-step-tag{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  padding:1px 8px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  margin-right:6px;
  vertical-align:1px;
}
.ds-step-body .ds-step-ded{
  color:#b91c1c;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ds-step-body .ds-step-gray{
  color:#9ca3af;
}

/* ---------- 明细网格适配 ---------- */
.dc-result-grid-lg .dc-result-value{
  font-size:17px;
}

@media (max-width:640px){
  .ds-form-grid{ grid-template-columns:1fr; }
  .ds-form-grid-sm{ grid-template-columns:1fr; }
  .ds-item{ padding:12px 14px; }
  .ds-item-title{ font-size:14px; }
  .ds-item-desc{ font-size:11.5px; }
  .ds-step{ padding:10px 12px; }
  .ds-step-body{ font-size:13px; }
  .ln-headline-value{ font-size:26px; }
}

/* ============================================================
   世界时钟
   ============================================================ */
.wc-local{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  border-radius:16px;
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--bg-soft);
  box-shadow:
    0 14px 32px -16px rgba(74,144,226,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
  flex-wrap:wrap;
}
.wc-local-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffe9a8;
}
.wc-local-icon svg{width:24px;height:24px;}
.wc-local-info{
  flex:1;
  min-width:120px;
}
.wc-local-city{
  font-size:15px;
  font-weight:800;
  color:#ffe9a8;
  letter-spacing:.5px;
  margin-bottom:4px;
}
.wc-local-zone{
  font-size:12.5px;
  color:var(--bg-soft);
  opacity:.9;
}
.wc-local-time{
  text-align:right;
  flex:0 0 auto;
}
.wc-local-clock{
  font-size:34px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  color:#ffe9a8;
  letter-spacing:2px;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
  font-family:Consolas,Menlo,monospace;
}
.wc-local-date{
  font-size:12.5px;
  color:var(--bg-soft);
  opacity:.9;
  margin-top:4px;
  letter-spacing:.4px;
}

/* ---------- 添加城市 ---------- */
.wc-add-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}
.wc-add-input-wrap{
  position:relative;
  flex:1 1 260px;
  display:flex;
  align-items:center;
}
.wc-add-input-wrap > svg{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--muted);
  pointer-events:none;
}
.wc-add-input-wrap input{
  width:100%;
  padding:11px 16px 11px 40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
}
.wc-add-input-wrap input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.wc-suggest{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.wc-suggest:empty{ margin-bottom:0; }

.wc-sug-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  text-align:left;
}
.wc-sug-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.wc-sug-item.selected{
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  box-shadow:0 0 0 2px rgba(74,144,226,.18);
}
.wc-sug-name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.wc-sug-zone{
  font-size:11.5px;
  color:var(--muted);
  font-family:Consolas,Menlo,monospace;
}

/* ---------- 快速添加 ---------- */
.wc-quick-add{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:10px;
  border-top:1px dashed rgba(74,144,226,.25);
}
.wc-quick-label{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin-right:4px;
}
.wc-chip{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.wc-chip:hover{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#3a2a00;
  border-color:var(--primary);
  transform:translateY(-1px);
}

/* ---------- 城市卡 ---------- */
.wc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.wc-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px 14px;
  transition:.16s;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wc-card:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}
.wc-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  border-radius:14px 0 0 14px;
  background:linear-gradient(180deg,var(--lime),var(--primary));
}

.wc-card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding-left:6px;
}
.wc-card-info{
  flex:1;
  min-width:0;
}
.wc-card-city{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.3px;
  margin-bottom:4px;
  word-break:break-word;
}
.wc-card-zone{
  font-size:11.5px;
  color:var(--muted);
  font-family:Consolas,Menlo,monospace;
  letter-spacing:.2px;
  word-break:break-all;
}
.wc-card-del{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:7px;
  border:1px solid var(--border);
  background:#fff;
  color:#9aa1b1;
  cursor:pointer;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
}
.wc-card-del:hover{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}

.wc-card-time{
  padding-left:6px;
}
.wc-card-clock{
  font-size:30px;
  font-weight:900;
  color:var(--primary-dark);
  letter-spacing:1.5px;
  font-variant-numeric:tabular-nums;
  font-family:Consolas,Menlo,monospace;
  line-height:1.1;
  margin-bottom:4px;
}
.wc-card-date{
  font-size:12.5px;
  color:#7a5a20;
  letter-spacing:.3px;
  margin-bottom:6px;
}

.wc-card-diff{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
  width:fit-content;
  padding-left:6px;
  margin-left:6px;
}
.wc-card-diff.ahead{
  background:var(--primary-soft);
  color:var(--primary-dark);
}
.wc-card-diff.behind{
  background:#e8eff5;
  color:#3f5a6b;
}
.wc-card-diff.same{
  background:#f3f4f6;
  color:#6b7280;
}

.wc-card-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px 6px 0;
  border-top:1px dashed rgba(74,144,226,.25);
  font-size:11.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .wc-local{
    padding:14px 16px;
    gap:12px;
  }
  .wc-local-icon{ flex:0 0 40px; width:40px; height:40px; }
  .wc-local-icon svg{ width:20px; height:20px; }
  .wc-local-clock{ font-size:24px; letter-spacing:1px; }
  .wc-local-time{ width:100%; text-align:left; }
  .wc-grid{ grid-template-columns:1fr; }
  .wc-card-clock{ font-size:26px; }
  .wc-add-row{ flex-direction:column; align-items:stretch; }
  .wc-add-row .btn{ width:100%; }
}


/* ============================================================
   生肖星座
   ============================================================ */
.zc-form{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:14px;
}
.zc-form .field{
  flex:1 1 200px;
  min-width:180px;
  margin-bottom:0;
}
.zc-form input[type=date]{
  padding:10px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
  width:100%;
  color:var(--text);
  cursor:pointer;
}
.zc-form input[type=date]:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.zc-quick{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

/* ---------- 结果网格 ---------- */
.zc-result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
@media (max-width:860px){
  .zc-result-grid{ grid-template-columns:1fr; }
}

.zc-card{
  position:relative;
  border-radius:18px;
  padding:22px 22px 18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:
    0 16px 40px -20px rgba(74,144,226,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
  animation:zcIn .45s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes zcIn{
  from{opacity:0;transform:translateY(10px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.zc-card-zodiac{
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--bg-soft);
}
.zc-card-constellation{
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(230,220,255,.45), transparent 70%),
    linear-gradient(135deg, #a69bbf 0%, #6d5a8c 100%);
  color:#f4f0ff;
}

.zc-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(0,0,0,.06), transparent 55%);
  pointer-events:none;
}

.zc-card-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
}
.zc-emoji{
  flex:0 0 62px;
  width:62px;
  height:62px;
  border-radius:16px;
  background:rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.zc-card-constellation .zc-emoji{
  font-size:32px;
  font-family:"Segoe UI Symbol", "Apple Symbols", sans-serif;
}
.zc-card-title-group{
  flex:1;
  min-width:0;
}
.zc-card-label{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:2px;
  opacity:.85;
  margin-bottom:2px;
}
.zc-card-name{
  font-size:24px;
  font-weight:900;
  letter-spacing:1px;
  line-height:1.15;
  text-shadow:0 3px 12px rgba(0,0,0,.35);
}
.zc-card-sub{
  font-size:12.5px;
  opacity:.9;
  margin-top:3px;
  letter-spacing:.3px;
}

.zc-card-section{
  position:relative;
  z-index:1;
}
.zc-section-title{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:1.5px;
  opacity:.82;
  margin-bottom:6px;
}
.zc-desc{
  margin:0;
  font-size:13.5px;
  line-height:1.85;
  letter-spacing:.2px;
  word-break:break-word;
}

.zc-card-tags{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.zc-tag{
  font-size:11.5px;
  font-weight:700;
  padding:3px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  color:inherit;
  letter-spacing:.3px;
}

.zc-card-foot{
  position:relative;
  z-index:1;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.28);
}
.zc-foot-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
.zc-foot-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  opacity:.82;
}
.zc-foot-value{
  font-size:14.5px;
  font-weight:900;
  letter-spacing:.4px;
  word-break:break-word;
}

/* ---------- 更多信息 ---------- */
.zc-more{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
.zc-more-item{
  padding:14px 16px;
  border-radius:12px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.zc-more-item:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.zc-more-title{
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.5px;
  margin-bottom:6px;
}
.zc-more-body{
  font-size:13px;
  line-height:1.8;
  color:#4a3800;
  word-break:break-word;
}

@media (max-width:640px){
  .zc-result-grid{ gap:12px; }
  .zc-card{ padding:18px 18px 16px; }
  .zc-emoji{ flex:0 0 52px; width:52px; height:52px; font-size:28px; border-radius:13px; }
  .zc-card-constellation .zc-emoji{ font-size:26px; }
  .zc-card-name{ font-size:20px; letter-spacing:.6px; }
  .zc-desc{ font-size:13px; line-height:1.78; }
  .zc-card-foot{ gap:12px; }
}

/* ============================================================
   Cron 表达式生成
   ============================================================ */
.cr-output{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.cr-expr{
  flex:1;
  min-width:0;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:20px;
  font-weight:800;
  font-family:Consolas,Menlo,"Courier New",monospace;
  color:var(--primary-dark);
  letter-spacing:3px;
  text-align:center;
  transition:.16s;
  font-variant-numeric:tabular-nums;
}
.cr-expr:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.cr-format-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:14px;
}
.cr-format{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:#7a5a20;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}
.cr-format input{
  width:16px;
  height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}

.cr-desc{
  padding:12px 16px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px dashed var(--lime-shine);
  font-size:14.5px;
  line-height:1.8;
  color:#4a3800;
  font-weight:600;
  margin-bottom:10px;
  letter-spacing:.2px;
  word-break:break-word;
}

.cr-next{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.8;
  padding-left:4px;
  word-break:break-word;
}
.cr-next b{
  color:var(--primary-dark);
  font-weight:800;
}

/* ---------- 预设 ---------- */
.cr-presets{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.cr-preset{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  cursor:pointer;
  transition:.15s;
  text-align:left;
  font-family:inherit;
}
.cr-preset:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -10px rgba(74,144,226,.35);
}
.cr-preset-name{
  font-size:13.5px;
  font-weight:800;
  color:var(--text);
}
.cr-preset-expr{
  font-size:12px;
  font-family:Consolas,Menlo,monospace;
  color:var(--primary-dark);
  letter-spacing:1.5px;
  font-weight:700;
}

/* ---------- 可视化 ---------- */
.cr-tabs{
  display:flex;
  gap:4px;
  background:var(--bg-soft);
  padding:4px;
  border-radius:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.cr-tab{
  flex:1 1 auto;
  min-width:80px;
  border:none;
  background:none;
  padding:8px 14px;
  border-radius:7px;
  cursor:pointer;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  transition:.15s;
  font-family:inherit;
}
.cr-tab:hover{
  background:#fff;
  color:var(--text);
}
.cr-tab.active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 2px 6px rgba(74,144,226,.20);
}

.cr-fields{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cr-field{
  display:none;
}
.cr-field.active{
  display:block;
}

.cr-field-label{
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.5px;
  margin-bottom:8px;
}

.cr-mode-group{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.cr-mode-chip{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.cr-mode-chip:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.cr-mode-chip.active{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}

.cr-num-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(48px,1fr));
  gap:6px;
  max-height:260px;
  overflow-y:auto;
  padding:4px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-base);
}
.cr-num{
  padding:8px 4px;
  border-radius:8px;
  border:1px solid transparent;
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.14s;
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.cr-num:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.cr-num.active{
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 3px 8px -3px rgba(74,144,226,.5);
  font-weight:900;
}

.cr-step-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:13px;
  color:#7a5a20;
  font-weight:600;
  flex-wrap:wrap;
}
.cr-step-row input{
  width:80px;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:13px;
  font-family:inherit;
  text-align:center;
  transition:.16s;
  color:var(--text);
}
.cr-step-row input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

/* ---------- 解析 ---------- */
.cr-parse{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cr-parse-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.cr-parse-item:hover{
  border-color:var(--lime-shine);
}
.cr-parse-tag{
  flex:0 0 auto;
  padding:4px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--lime),var(--primary));
  color:#3a2a00;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px;
  font-family:Consolas,Menlo,monospace;
}
.cr-parse-body{
  flex:1;
  min-width:0;
  font-size:13.5px;
  line-height:1.75;
  color:#4a3800;
  word-break:break-word;
}
.cr-parse-body b{
  color:var(--primary-dark);
  font-weight:800;
}

@media (max-width:640px){
  .cr-expr{
    font-size:16px;
    letter-spacing:2px;
    padding:12px 14px;
  }
  .cr-output{ flex-wrap:wrap; }
  .cr-output .btn{ width:100%; }
  .cr-num-grid{
    grid-template-columns:repeat(auto-fill,minmax(42px,1fr));
  }
  .cr-num{
    font-size:12px;
    padding:7px 2px;
  }
  .cr-tab{
    min-width:64px;
    padding:7px 10px;
    font-size:12.5px;
  }
  .cr-presets{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   分贝仪
   ============================================================ */
.db-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:28px 20px 22px;
  border-radius:18px;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(255,233,168,.45), transparent 70%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--bg-soft);
  box-shadow:
    0 16px 40px -20px rgba(74,144,226,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;
  overflow:hidden;
}
.db-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(0,0,0,.06), transparent 55%);
  pointer-events:none;
}

.db-readout{
  display:flex;
  align-items:baseline;
  gap:8px;
  position:relative;
  z-index:1;
}
.db-value{
  font-size:82px;
  font-weight:900;
  line-height:1;
  color:#ffe9a8;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  text-shadow:0 6px 20px rgba(0,0,0,.4);
  min-width:2.4ch;
  text-align:right;
  font-family:Consolas,Menlo,monospace;
  transition:color .3s ease;
}
.db-unit{
  font-size:24px;
  font-weight:800;
  color:#ffe9a8;
  opacity:.9;
  letter-spacing:1px;
}
.db-level{
  font-size:15px;
  font-weight:800;
  letter-spacing:3px;
  padding:6px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:var(--bg-soft);
  position:relative;
  z-index:1;
  transition:.25s;
}

.db-bar-wrap{
  width:100%;
  max-width:560px;
  position:relative;
  z-index:1;
}
.db-bar-track{
  position:relative;
  height:16px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.15);
}
.db-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#7a9c5f 0%,#c9a02b 45%,#e09070 72%,#c94a4a 100%);
  transition:width .12s ease;
  box-shadow:0 0 12px rgba(255,255,255,.35) inset;
}
.db-bar-scale{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:11px;
  color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
}

.db-hint{
  font-size:12.5px;
  color:var(--bg-soft);
  opacity:.9;
  text-align:center;
  position:relative;
  z-index:1;
  letter-spacing:.3px;
  line-height:1.7;
}

/* ---------- 噪音等级卡片 ---------- */
.db-levels{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
.db-level-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  transition:.15s;
}
.db-level-item:hover{
  border-color:var(--lime-shine);
}
.db-level-item.active{
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  box-shadow:0 6px 16px -10px rgba(74,144,226,.4);
}
.db-level-dot{
  flex:0 0 12px;
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.5);
}
.db-level-body{
  flex:1;
  min-width:0;
}
.db-level-name{
  font-size:13.5px;
  font-weight:800;
  color:var(--text);
  margin-bottom:3px;
}
.db-level-range{
  font-size:11.5px;
  color:var(--primary-dark);
  font-weight:700;
  letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
  margin-bottom:2px;
}
.db-level-example{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.55;
}

@media (max-width:640px){
  .db-stage{ padding:20px 16px 18px; }
  .db-value{ font-size:60px; }
  .db-unit{ font-size:18px; }
  .db-level{ font-size:13px; letter-spacing:2px; padding:5px 14px; }
  .db-bar-track{ height:13px; }
  .db-bar-scale{ font-size:10px; }
  .db-levels{ grid-template-columns:1fr; }
  .ln-actions{ gap:8px; }
  .ln-actions .btn{ flex:1 1 calc(50% - 4px); min-width:0; }
}



/* ============================================================
   首页新增布局
   ============================================================ */

/* ---------- 欢迎屏数据卡 ---------- */
.welcome-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.welcome-stat {
  text-align: center;
  padding: 22px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(74,144,226,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -6px rgba(74,144,226,.2);
  transition: .2s;
}
.welcome-stat:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 24px -10px rgba(74,144,226,.4);
}
.welcome-stat b {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 1px;
}
.welcome-stat span {
  display: block;
  font-size: 12.5px;
  color: #8a7340;
  margin-top: 6px;
  letter-spacing: 1.5px;
}



/* ---------- 热门应用区 ---------- */
.hot-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.hot-header-left { flex: 1; min-width: 0; }
.hot-header .section-title { margin: 0 0 4px; }
.hot-header-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}
.hot-header-more {
  border: 1px solid rgba(74,144,226,.3);
  background: rgba(255,244,204,.55);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
  white-space: nowrap;
}
.hot-header-more:hover {
  background: linear-gradient(135deg,var(--primary),var(--primary));
  color: #3a2a00;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(74,144,226,.6);
}

.hot-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-base), #fff4cc);
  border: 1px solid rgba(74,144,226,.25);
  box-shadow: 0 4px 14px -8px rgba(74,144,226,.2);
}
.hot-stat { display: flex; align-items: baseline; gap: 6px; }
.hot-stat b {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.hot-stat span { font-size: 12.5px; color: #8a7340; letter-spacing: .5px; }
.hot-stats-sep { width: 1px; height: 22px; background: rgba(74,144,226,.35); }

.hot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.hot-grid .hot-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: .18s;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.hot-grid .hot-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -12px rgba(74,144,226,.35);
  background: var(--bg-base);
}
.hot-grid .hot-card .tool-icon {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  margin-bottom: 0;
  border-radius: 11px;
}
.hot-grid .hot-card .tool-icon svg { width: 20px; height: 20px; }
.hot-grid .hot-card h3 {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.hot-grid .hot-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hot-grid .hot-card > div:last-child { flex: 1; min-width: 0; }
.hot-grid .hot-card .hot-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 10px;
  padding: 2px 8px;
}

/* ---------- 热门应用底部 ---------- */
.hot-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255,244,204,.5);
  border: 1px dashed rgba(74,144,226,.4);
  font-size: 13.5px;
  color: #8a7340;
  letter-spacing: .5px;
  flex-wrap: wrap;
}

/* ---------- 移动端 ---------- */
@media (max-width: 860px) {
  .welcome-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .welcome-stat { padding: 16px 10px; }
  .welcome-stat b { font-size: 24px; }
  .welcome-quick-btn { padding: 10px 16px; font-size: 13px; }
  .hot-grid { grid-template-columns: repeat(2, 1fr); }
  .hot-stats { gap: 12px; padding: 10px 14px; }
  .hot-stat b { font-size: 18px; }
  .hot-header { align-items: flex-start; }
  .hot-header-more { width: 100%; text-align: center; }
}
@media (max-width: 520px) {
  .hot-grid { grid-template-columns: 1fr; }
}


.welcome-board {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg-base);
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

/* hero 撑满上半部分，内容垂直居中 */
.welcome-board .hero {
  flex: 1 1 auto;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 44px !important;
  min-height: 0;
}
.welcome-board .hero h1 {
  font-size: 34px !important;
  margin-bottom: 14px;
}
.welcome-board .hero p {
  max-width: 720px;
  font-size: 15px !important;
  line-height: 1.9;
}

/* 数据卡贴在底部，作为整体板块的下半部 */
.welcome-board .welcome-stats {
  flex: 0 0 auto;
  padding: 26px 32px;
  margin: 0;
  border-top: 1px solid rgba(74,144,226,.22);
  background: linear-gradient(180deg, var(--bg-base), var(--bg-soft));
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.welcome-board .welcome-stat {
  padding: 22px 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(74,144,226,.22);
  box-shadow: 0 6px 18px -10px rgba(74,144,226,.25);
}

/* 窄屏适配 */
@media (max-width: 860px) {
  .welcome-board .hero {
    padding: 32px 22px !important;
  }
  .welcome-board .hero h1 {
    font-size: 24px !important;
  }
  .welcome-board .welcome-stats {
    padding: 16px 18px;
    gap: 10px;
  }
  .welcome-board .welcome-stat {
    padding: 14px 8px;
  }
}
@media (max-width: 520px) {
  .welcome-board .welcome-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   首页/帮助页：横向铺满 + 指示器内嵌到容器内部
   ============================================================ */

/* 1. 页面本身铺满视口，突破 main 的 max-width */
#page-home, #page-help {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}





/* 4. 防止横向滚动条 */
html, body { overflow-x: hidden !important; }
main { overflow: visible !important; }


/* ============================================================
   帮助页：不铺满，回归正常宽度 + 居中
   ============================================================ */

#page-help {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding: 26px 24px 40px !important;
  box-sizing: border-box !important;
}

/* 内容整体居中，限制最大宽度 */
#page-help .help-layout {
  max-width: 1160px;
  margin: 0 auto;
}

/* 标题与描述也跟随居中容器宽度 */
#page-help > .page-title,
#page-help > .page-desc {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

/* 窄屏适配 */
@media (max-width: 900px) {
  #page-help {
    padding: 18px 14px 32px !important;
  }
}


/* ============================================================
   函数图像绘制
   ============================================================ */
.fp-canvas-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  line-height: 0;
  position: relative;
}
#fpCanvas {
  display: block;
  width: 100%;
  touch-action: none;
  cursor: default;
}
#fpCanvas.fp-hover   { cursor: grab; }
#fpCanvas.fp-dragging{ cursor: grabbing; }

.fp-canvas-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.fp-canvas-hint {
  flex: 1 1 260px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- 函数列表 ---------- */
.fp-func-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-func-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-softer);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fp-func-row:hover {
  border-color: var(--lime-shine);
}
.fp-func-main {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fp-func-eq {
  flex: 0 0 auto;
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
}
.fp-func-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  font-size: 14px;
  font-family: Consolas, Menlo, monospace;
  color: var(--text);
  transition: .16s;
}
.fp-func-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,226,.20);
}
.fp-func-input.fp-invalid {
  border-color: #fca5a5;
  background: #fff8f8;
}
.fp-func-color {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.fp-func-color::-webkit-color-swatch-wrapper { padding: 3px; }
.fp-func-color::-webkit-color-swatch { border: none; border-radius: 5px; }
.fp-func-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fp-func-label {
  flex: 1 1 180px;
  min-width: 0;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  font-size: 13px;
  color: var(--text);
  transition: .16s;
}
.fp-func-label:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}
.fp-mini-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7a5a20;
  cursor: pointer;
  user-select: none;
}
.fp-mini-check input {
  width: 14px; height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
}

.fp-func-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ---------- 复选框 ---------- */
.fp-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px;
}
.fp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #7a5a20;
  cursor: pointer;
  user-select: none;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: .15s;
}
.fp-check:hover {
  background: var(--bg-softer);
  border-color: rgba(74,144,226,.28);
}
.fp-check input {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---------- 快速范围按钮 ---------- */
.fp-quick-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- 提示内的 code ---------- */
#page-funcplot .tip code {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 1px 7px;
  border-radius: 5px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .fp-func-main { flex-wrap: wrap; }
  .fp-func-eq { font-size: 13px; }
  .fp-func-input { font-size: 13px; }
  .fp-func-color { width: 30px; height: 30px; }
  .fp-check-grid { grid-template-columns: 1fr 1fr; }
  .fp-canvas-bar .head-actions { width: 100%; justify-content: flex-end; }
}

/* 函数图像绘制 · 坐标轴范围小标题 */
.fp-sub-title {
  margin: 4px 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .3px;
  padding-left: 2px;
}


/* ============================================================
   化学方程式 · 完整样式
   ============================================================ */

/* ---------- 输入区 ---------- */
.chem-input-panel {
  border-color: rgba(74,144,226,.4) !important;
  background: linear-gradient(180deg, var(--bg-base), var(--bg-softer)) !important;
}
#chemInput {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  resize: vertical;
  font-size: 17px;
  font-family: Consolas, Menlo, "Courier New", monospace;
  color: var(--text);
  transition: .16s;
  box-sizing: border-box;
  letter-spacing: .6px;
  line-height: 1.6;
  min-height: 68px;
}
#chemInput:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.20);
}
#chemInput::placeholder { color: #c9b88c; }

.chem-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.chem-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.9;
}
.chem-hint p {
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.chem-hint p:last-child { margin-bottom: 0; }
.chem-hint b {
  color: #7a5a20;
  font-weight: 800;
  margin-right: 3px;
}
.chem-hint code {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: 5px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  line-height: 1.5;
}

.chem-msg {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  border-radius: 9px;
  color: var(--muted);
  transition: .18s;
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
}
.chem-msg.show { max-height: 120px; padding: 10px 14px; }
.chem-msg.ok  { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.chem-msg.err { background: #fef2f2; color: #b91c1c; font-weight: 600; }

/* ---------- 下标 / 上标 统一规则 ---------- */
.chem-sub,
.chem-sup {
  font-size: .82em;
  font-weight: inherit;
  font-family: inherit;
  vertical-align: baseline;
  position: relative;
  line-height: 1;
  margin-left: 1px;
}
.chem-sub { bottom: -.16em; }
.chem-sup { top: -.48em; letter-spacing: .02em; }

/* 反应分析里的行内系数 */
.chem-coef-inline {
  color: #c0524a;
  font-weight: 900;
  margin-right: 2px;
}

/* ---------- 结果卡 ---------- */
.chem-result-panel {
  border-color: var(--lime-shine) !important;
}
.chem-quick-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chem-quick-tag {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 13px;
  border-radius: 999px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.chem-quick-tag.type       { background: var(--primary-soft); color: var(--primary-dark); }
.chem-quick-tag.charge     { background: #e8f2ec; color: #3f6b52; }
.chem-quick-tag.charge.bad { background: #fbeaea; color: #8f3a3a; }
.chem-quick-tag.gas        { background: #e8eff5; color: #3f5a6b; }
.chem-quick-tag.precip     { background: #faf3e3; color: #8a6414; }
.chem-quick-tag.water      { background: #e8f2ec; color: #3f6b52; }
.chem-quick-tag.muted      { background: #f3f4f6; color: #6b7280; }

.chem-result {
  padding: 22px 20px;
  border-radius: 12px;
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--bg-soft), #fff4cc);
  border: 1px solid var(--lime-shine);
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary-dark);
  text-align: center;
  letter-spacing: .6px;
  word-break: break-all;
  line-height: 1.75;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.chem-result .chem-coef  { color: #c0524a; font-weight: 900; }
.chem-result .chem-arrow { color: var(--primary-dark); margin: 0 10px; opacity: .85; }
.chem-result .chem-op    { color: #8a7340; margin: 0 4px; font-weight: 700; }

.chem-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  justify-content: flex-end;
}

/* ---------- 原子守恒表 ---------- */
.chem-check {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chem-check-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 110px;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-size: 13.5px;
  align-items: center;
  transition: .15s;
}
.chem-check-row:not(.head):hover { border-color: var(--lime-shine); }
.chem-check-row.head {
  background: transparent;
  border: none;
  padding: 4px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
}
.chem-check-el {
  font-weight: 900;
  color: var(--primary-dark);
  font-family: Consolas, Menlo, monospace;
  font-size: 14.5px;
  letter-spacing: .5px;
}
.chem-check-num {
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.chem-check-badge {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: .3px;
}
.chem-check-badge.ok  { background: #e8f2ec; color: #3f6b52; }
.chem-check-badge.bad { background: #fbeaea; color: #8f3a3a; }

/* ---------- 摩尔质量 ---------- */
.chem-mass-section { margin-bottom: 18px; }
.chem-mass-section:last-child { margin-bottom: 0; }
.chem-mass-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chem-mass-title::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.chem-mass-row {
  display: grid;
  grid-template-columns: 110px 70px 1fr 1fr;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  align-items: center;
  font-size: 13.5px;
}
.chem-mass-row + .chem-mass-row { margin-top: 4px; }
.chem-mass-row.head {
  background: transparent;
  border: none;
  padding: 4px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
}
.chem-mass-formula {
  font-family: Consolas, Menlo, monospace;
  font-weight: 800;
  color: var(--primary-dark);
  font-size: 14.5px;
}
.chem-mass-num {
  font-family: Consolas, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.chem-mass-total {
  font-family: Consolas, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #b45309;
}
.chem-mass-sum {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--primary-soft);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-dark);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.chem-mass-sum .val {
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}
.chem-mass-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

/* ---------- 反应分析 ---------- */
.chem-analysis-block {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.chem-analysis-block:last-child { margin-bottom: 0; }
.chem-analysis-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.chem-analysis-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.chem-analysis-body {
  font-size: 13.5px;
  line-height: 1.85;
  color: #4a3800;
}
.chem-analysis-body p { margin: 0 0 7px; }
.chem-analysis-body p:last-child { margin-bottom: 0; }
.chem-analysis-body b { color: var(--primary-dark); }
.chem-analysis-body code {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 1px 7px;
  border-radius: 5px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
}
.chem-analysis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chem-tag {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.chem-tag.gas    { background: #e8eff5; color: #3f5a6b; }
.chem-tag.precip { background: #faf3e3; color: #8a6414; }
.chem-tag.water  { background: #e8f2ec; color: #3f6b52; }
.chem-tag.normal { background: #f3f4f6; color: #6b7280; }

/* ---------- 预设 ---------- */
.chem-preset-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.chem-preset-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.chem-search {
  flex: 1 1 200px;
  max-width: 300px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 13.5px;
  transition: .16s;
  font-family: inherit;
}
.chem-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}

.chem-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.chem-preset {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: .15s;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chem-preset:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.4);
}
.chem-preset-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .3px;
}
.chem-preset-eq {
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
  color: var(--primary-dark);
  font-weight: 600;
  word-break: break-all;
  line-height: 1.55;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.chem-preset-op {
  color: #8a7340;
  font-weight: 700;
  margin: 0 4px;
}
.chem-preset-coef {
  color: #c0524a;
  font-weight: 900;
  margin-right: 1px;
}
.chem-preset-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  #chemInput { font-size: 15px; padding: 12px 14px; }
  .chem-result { font-size: 17px; padding: 18px 14px; }
  .chem-check-row {
    grid-template-columns: 60px 1fr 1fr 92px;
    gap: 6px;
    padding: 9px 10px;
    font-size: 12.5px;
  }
  .chem-check-row.head { font-size: 11px; padding: 4px 10px; }
  .chem-check-badge { font-size: 11px; padding: 2px 8px; }
  .chem-mass-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    font-size: 12.5px;
    padding: 10px;
  }
  .chem-mass-row.head { display: none; }
  .chem-mass-row .chem-mass-formula { font-size: 14px; }
  .chem-presets { grid-template-columns: 1fr; }
  .chem-search { max-width: 100%; }
  .chem-result-actions { justify-content: flex-start; }
}

/* ============================================================
   学科与学习 · 新增工具样式
   ============================================================ */

/* ---------- 元素周期表 ---------- */
.pt-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pt-search {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
}
.pt-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.pt-filter {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.pt-filter:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}

.pt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: .15s;
  user-select: none;
}
.pt-legend-item:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(74,144,226,.35); }
.pt-legend-item.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(74,144,226,.2); }
.pt-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

.pt-board-panel { padding: 14px; overflow-x: auto; }
.pt-board {
  display: grid;
  grid-template-columns: repeat(18, minmax(50px, 1fr));
  grid-template-rows: repeat(9, auto);
  gap: 4px;
  min-width: 900px;
}
.pt-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  padding: 4px 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  transition: .15s;
  border: 1px solid transparent;
  color: #3a2a00;
  font-family: Consolas, Menlo, monospace;
  overflow: hidden;
}
.pt-cell:hover { transform: scale(1.08); z-index: 3; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.pt-cell.selected { border-color: var(--primary-dark); box-shadow: 0 0 0 2px rgba(74,144,226,.4); z-index: 4; }
.pt-cell.dimmed { opacity: .25; pointer-events: none; }
.pt-num { font-size: 9px; font-weight: 700; line-height: 1; opacity: .85; }
.pt-sym { font-size: 15px; font-weight: 900; line-height: 1.1; margin-top: 1px; letter-spacing: -.5px; }
.pt-name { font-size: 9px; font-weight: 700; line-height: 1; margin-top: auto; font-family: "PingFang SC","Microsoft YaHei",sans-serif; }
.pt-mass { font-size: 7.5px; font-weight: 600; opacity: .8; line-height: 1; font-family: Consolas, Menlo, monospace; }

.pt-detail-panel {
  border-color: var(--lime-shine) !important;
}
.pt-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 14px;
}
.pt-detail-symbol {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: Consolas, Menlo, monospace;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
}
.pt-detail-symbol b { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.pt-detail-symbol span { font-size: 12px; font-weight: 700; margin-top: 6px; opacity: .95; }
.pt-detail-info { flex: 1; min-width: 220px; }
.pt-detail-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0 0 8px;
  letter-spacing: .5px;
}
.pt-detail-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
}
.pt-detail-sub code {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 1px 7px;
  border-radius: 5px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
}
.pt-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.pt-detail-item {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pt-detail-item-label { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .3px; }
.pt-detail-item-value {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* 元素类别配色 */
.pt-cat-碱金属      { background: #ffd5b8; }
.pt-cat-碱土金属    { background: #ffe9a8; }
.pt-cat-过渡金属    { background: #ffd5d5; }
.pt-cat-后过渡金属  { background: #d5e8ff; }
.pt-cat-类金属      { background: #d4ecd5; }
.pt-cat-非金属      { background: #fff4cc; }
.pt-cat-卤素        { background: #e5d5ff; }
.pt-cat-稀有气体    { background: #d5f0f5; }
.pt-cat-镧系        { background: #ffe0e0; }
.pt-cat-锕系        { background: #ffe8f0; }

.pt-empty-spacer {
  border: 1px dashed transparent;
  background: transparent;
  pointer-events: none;
}
.pt-series-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  background: rgba(74,144,226,.1);
  border-radius: 6px;
  border: 1px dashed rgba(74,144,226,.4);
  padding: 3px;
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
}

@media (max-width: 900px) {
  .pt-cell { aspect-ratio: auto; min-height: 44px; padding: 3px 4px; }
  .pt-sym { font-size: 13px; }
  .pt-name { display: none; }
  .pt-mass { display: none; }
  .pt-detail-symbol { width: 68px; height: 68px; }
  .pt-detail-symbol b { font-size: 26px; }
}

/* ---------- 物理公式计算 ---------- */
/* ============================================================
   物理公式计算
   ============================================================ */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.pf-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: .15s;
  min-width: 0;              /* 关键：允许卡片收缩 */
  box-sizing: border-box;
}
.pf-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -12px rgba(74,144,226,.35);
}
.pf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pf-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: .3px;
}
.pf-formula {
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* ---------- 变量区域：两列自适应 ---------- */
.pf-vars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 关键：minmax(0, 1fr) */
  gap: 8px 12px;
  margin-bottom: 12px;
}
.pf-var {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;              /* 关键 */
}
.pf-var-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-var-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;              /* 关键 */
  width: 100%;
}
.pf-var-input {
  flex: 1 1 auto;
  min-width: 0;              /* 关键 */
  width: 0;                  /* 关键：让 flex 完全接管宽度 */
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 13.5px;
  font-family: Consolas, Menlo, monospace;
  transition: .16s;
  color: var(--text);
  box-sizing: border-box;
}
.pf-var-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}
.pf-var-input.filled {
  background: #fff;
  border-color: rgba(74,144,226,.4);
}
.pf-var-unit {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -.2px;
}

/* ---------- 结果条 ---------- */
.pf-result {
  padding: 12px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--bg-soft), #fff4cc);
  border: 1px dashed var(--lime-shine);
  font-size: 13.5px;
  color: var(--primary-dark);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
  box-sizing: border-box;
}
.pf-result .pf-res-value {
  font-family: Consolas, Menlo, monospace;
  font-size: 17px;
  font-weight: 900;
  color: #b45309;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.pf-result.muted {
  background: var(--bg-softer);
  border-style: solid;
  border-color: var(--border);
  color: var(--muted);
  font-weight: 600;
}
.pf-result.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-vars { grid-template-columns: 1fr; gap: 10px; }   /* 窄屏单列 */
  .pf-card { padding: 14px 14px; }
  .pf-result .pf-res-value { font-size: 15.5px; }
}

/* ---------- 解方程组 ---------- */
.es-formula-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.es-formula-row .field { margin-bottom: 0; min-width: 88px; flex: 0 0 auto; }
.es-formula-row .field input {
  width: 88px;
  padding: 9px 12px;
  text-align: center;
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
}
.es-op {
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-dark);
  padding-bottom: 10px;
  white-space: nowrap;
}

.es-sys-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
}
.es-sys-row input {
  width: 70px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  text-align: center;
  font-family: Consolas, Menlo, monospace;
  font-size: 14.5px;
  transition: .15s;
  color: var(--text);
}
.es-sys-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}
.es-sys-row span {
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

.es-result {
  margin-top: 14px;
  padding: 0;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #4a3800;
  display: none;
}
.es-result.show { display: block; padding: 14px 16px; border: 1px solid var(--lime-shine); background: var(--bg-softer); }
.es-result.error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.es-result-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.es-result-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.es-result-main {
  font-family: Consolas, Menlo, monospace;
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark);
  margin-bottom: 10px;
  word-break: break-word;
}
.es-result-step {
  font-size: 13px;
  color: #7a5a20;
  line-height: 1.85;
  padding-left: 12px;
  border-left: 2px solid rgba(74,144,226,.35);
  margin-bottom: 4px;
}
.es-result code {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 1px 7px;
  border-radius: 5px;
  font-family: Consolas, Menlo, monospace;
  font-size: 13px;
}

/* ============================================================
   中国历史简表 · 升级版
   ============================================================ */

/* ---------- 工具栏 ---------- */
.ch-toolbar-panel { padding: 16px 18px; }
.ch-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ch-search {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
}
.ch-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.ch-select {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.ch-select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.ch-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- 统计概览 ---------- */
.ch-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.ch-stat-card {
  background: linear-gradient(180deg, #fff, var(--bg-base));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: .15s;
  position: relative;
  overflow: hidden;
}
.ch-stat-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -14px rgba(74,144,226,.4);
}
.ch-stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.ch-stat-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ch-stat-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.ch-stat-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- 时间轴 ---------- */
.ch-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
  position: relative;
  padding-left: 0;
}

/* 竖向时间轴主线 */
.ch-timeline::before {
  content: "";
  position: absolute;
  left: 100px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, rgba(74,144,226,.6), rgba(74,144,226,.15));
  border-radius: 1px;
}

.ch-row {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 8px 0;
}

/* 左侧年份标签 */
.ch-row-year {
  position: relative;
  text-align: right;
  padding-right: 10px;
  padding-top: 12px;
  font-family: Consolas, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -.3px;
  line-height: 1.4;
  word-break: break-word;
}
.ch-row-year .ch-row-end {
  display: block;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}

/* 时间轴上的圆点 */
.ch-row-dot {
  position: absolute;
  left: 100px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.22);
  transform: translateX(-50%);
  z-index: 2;
  transition: .2s;
}
.ch-row:hover .ch-row-dot {
  transform: translateX(-50%) scale(1.25);
  box-shadow: 0 0 0 4px rgba(74,144,226,.35);
}
.ch-row.expanded .ch-row-dot {
  background: linear-gradient(135deg, var(--lime), var(--primary));
  box-shadow: 0 0 0 4px rgba(74,144,226,.4);
}

/* 卡片 */
.ch-row-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  transition: .18s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.ch-row-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 24px -14px rgba(74,144,226,.45);
}
.ch-row.expanded .ch-row-card {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--bg-base), #fff);
  box-shadow: 0 12px 28px -14px rgba(74,144,226,.4);
}

.ch-row-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ch-row-name {
  font-size: 16.5px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1.2px;
}
.ch-row-years {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #8a7340;
  background: var(--primary-soft);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
}
.ch-row-era {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  letter-spacing: .3px;
}
.ch-row-duration {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
  background: #faf3e3;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
}

.ch-row-toggle {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74,144,226,.15);
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  transition: .22s;
  user-select: none;
}
.ch-row.expanded .ch-row-toggle {
  background: var(--primary);
  color: #fff;
  transform: rotate(180deg);
}
.ch-row-toggle::after {
  content: "▾";
  line-height: 1;
}

/* 卡片摘要行 */
.ch-row-summary {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ch-row-summary .ch-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-softer);
  color: var(--primary-dark);
  border: 1px solid rgba(74,144,226,.25);
  white-space: nowrap;
}

/* 展开详情 */
.ch-row-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: none;
  animation: chSlide .25s ease;
}
.ch-row.expanded .ch-row-detail { display: block; }

@keyframes chSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ch-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 14px;
  margin-bottom: 12px;
}
.ch-detail-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #4a3800;
  min-width: 0;
}
.ch-detail-item b {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 700;
}
.ch-detail-item span {
  word-break: break-word;
  min-width: 0;
}

.ch-detail-block {
  margin-top: 10px;
}
.ch-detail-block:first-of-type { margin-top: 0; }
.ch-detail-block-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ch-detail-block-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.ch-detail-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.85;
  color: #4a3800;
}
.ch-detail-list li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 2px;
}
.ch-detail-list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--primary);
  font-weight: 900;
}

/* 空状态 */
.ch-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
}
.ch-empty::before {
  content: "📜";
  display: block;
  font-size: 42px;
  margin-bottom: 12px;
  opacity: .6;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .ch-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ch-stats-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ch-stat-card { padding: 12px 14px; }
  .ch-stat-value { font-size: 17px; }
  .ch-toolbar { gap: 8px; }
  .ch-search { flex: 1 1 100%; }
  .ch-select { flex: 1 1 calc(50% - 4px); }
  .ch-toolbar-actions { justify-content: stretch; }
  .ch-toolbar-actions .btn { flex: 1 1 calc(33% - 6px); }

  .ch-timeline::before { left: 22px; }
  .ch-row {
    grid-template-columns: 44px 1fr;
    gap: 10px;
    padding: 6px 0;
  }
  .ch-row-year {
    font-size: 10.5px;
    padding-right: 6px;
    padding-top: 10px;
    text-align: center;
  }
  .ch-row-dot { left: 22px; top: 20px; width: 10px; height: 10px; }
  .ch-row-card { padding: 12px 14px; }
  .ch-row-name { font-size: 15px; letter-spacing: .6px; }
  .ch-row-toggle { right: 10px; top: 12px; }
  .ch-detail-grid { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   中国历史简表 · 扩展功能（对比 / 地图 / 帝王）
   ============================================================ */

/* ---------- 朝代对比 ---------- */
.ch-cmp-select-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}
.ch-cmp-select-row .field { margin-bottom: 0; }
.ch-cmp-select-row select {
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: .16s;
  width: 100%;
}
.ch-cmp-select-row select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.ch-cmp-vs {
  font-size: 15px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 2px;
  padding: 0 8px 10px;
  text-align: center;
}
.ch-cmp-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.ch-cmp-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 860px) {
  .ch-cmp-result { grid-template-columns: 1fr; }
}

.ch-cmp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: .18s;
  position: relative;
  overflow: hidden;
}
.ch-cmp-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 26px -14px rgba(74,144,226,.4);
}
.ch-cmp-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lime), var(--primary));
}
.ch-cmp-card.b::before {
  background: linear-gradient(90deg, #a8c8ef, #4a7fb5);
}

.ch-cmp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.ch-cmp-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 1.5px;
  margin: 0;
}
.ch-cmp-card.b .ch-cmp-name { color: #3f5a6b; }
.ch-cmp-years {
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a7340;
  background: var(--primary-soft);
  padding: 3px 10px;
  border-radius: 999px;
}
.ch-cmp-card.b .ch-cmp-years { background: #e8eff5; color: #3f5a6b; }
.ch-cmp-era {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}

.ch-cmp-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ch-cmp-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.75;
  color: #4a3800;
}
.ch-cmp-row-label {
  flex: 0 0 68px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .3px;
  padding-top: 1px;
}
.ch-cmp-row-value {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.ch-cmp-row-value .ch-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
}

/* 对比条 */
.ch-cmp-bar-wrap {
  grid-column: 1 / -1;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 14px;
}
.ch-cmp-bar-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-cmp-bar-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.ch-cmp-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}
.ch-cmp-bar-label {
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.ch-cmp-bar-track {
  position: relative;
  height: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  display: flex;
}
.ch-cmp-bar-seg {
  height: 100%;
  transition: width .35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.ch-cmp-bar-seg.a {
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  justify-content: flex-end;
  padding-right: 8px;
}
.ch-cmp-bar-seg.b {
  background: linear-gradient(90deg, #4a7fb5, #3f5a6b);
  justify-content: flex-start;
  padding-left: 8px;
}
.ch-cmp-bar-val {
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.ch-cmp-bar-val.a { text-align: right; }
.ch-cmp-bar-val.b { color: #3f5a6b; text-align: left; }

/* ---------- 历史地图 ---------- */
.ch-map-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ch-map-toolbar select {
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: .16s;
  min-width: 160px;
}
.ch-map-toolbar select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.ch-map-note {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.ch-map-svg-wrap {
  background: linear-gradient(135deg, var(--bg-base), var(--bg-softer));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}
.ch-map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
}
.ch-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ch-map-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
}
.ch-map-leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.ch-map-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ch-map-meta-item {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.7;
  color: #4a3800;
}
.ch-map-meta-item b {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .5px;
  margin-bottom: 3px;
}
.ch-map-label {
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 11px;
  font-weight: 800;
  fill: #3a2a00;
  text-anchor: middle;
  pointer-events: none;
}
.ch-map-label.dim {
  fill: #9c8a5a;
  font-weight: 700;
  font-size: 10px;
}

/* ---------- 历代帝王 ---------- */
.ch-emp-toolbar-panel { padding: 14px 18px; }
.ch-emp-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ch-emp-toolbar select,
.ch-emp-toolbar input {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: .16s;
}
.ch-emp-toolbar select {
  flex: 0 0 auto;
  min-width: 160px;
  cursor: pointer;
}
.ch-emp-toolbar input {
  flex: 1 1 200px;
  min-width: 180px;
}
.ch-emp-toolbar select:focus,
.ch-emp-toolbar input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}

.ch-emp-info {
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-base), #fff4cc);
  border: 1px solid var(--lime-shine);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.ch-emp-info-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 1.5px;
}
.ch-emp-info-years {
  font-family: Consolas, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #8a7340;
  background: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(74,144,226,.3);
}
.ch-emp-info-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.ch-emp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ch-emp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: .16s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ch-emp-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
  border-radius: 12px 0 0 12px;
}
.ch-emp-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(74,144,226,.45);
}
.ch-emp-card.expanded {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--bg-base), #fff);
}
.ch-emp-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding-left: 6px;
}
.ch-emp-name {
  font-size: 15.5px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: .6px;
}
.ch-emp-title {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  white-space: nowrap;
}
.ch-emp-reign {
  font-family: Consolas, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  padding-left: 6px;
}
.ch-emp-summary {
  font-size: 13px;
  line-height: 1.7;
  color: #5a4a20;
  padding-left: 6px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ch-emp-card.expanded .ch-emp-summary { display: block; }
.ch-emp-detail {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  padding-left: 6px;
  font-size: 13px;
  line-height: 1.85;
  color: #4a3800;
}
.ch-emp-card.expanded .ch-emp-detail { display: block; }
.ch-emp-detail-item {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
.ch-emp-detail-item b {
  flex: 0 0 60px;
  color: var(--muted);
  font-weight: 700;
}
.ch-emp-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
@media (max-width: 640px) {
  .ch-emp-list { grid-template-columns: 1fr; }
  .ch-cmp-select-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ch-cmp-vs { padding: 0; text-align: left; }
  .ch-cmp-bar-row { grid-template-columns: 70px 1fr 70px; gap: 8px; font-size: 12px; }
  .ch-cmp-bar-seg { font-size: 10.5px; padding: 0 4px; }
}

/* ============================================================
   矩阵运算
   ============================================================ */
.mx-size-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: flex-end;
}
.mx-size-row .field {
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 110px;
}
.mx-size-row select {
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: .16s;
  width: 100%;
}
.mx-size-row select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}

.mx-matrices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.mx-matrix-box {
  background: var(--bg-softer);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.mx-matrix-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mx-matrix-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.mx-matrix-grid {
  display: inline-grid;
  gap: 6px;
}
.mx-matrix-grid input {
  width: 62px;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  text-align: center;
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  color: var(--text);
  transition: .15s;
  box-sizing: border-box;
}
.mx-matrix-grid input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}

.mx-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mx-msg {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  border-radius: 9px;
  padding: 0;
  transition: .18s;
  color: var(--muted);
}
.mx-msg.show { padding: 10px 14px; }
.mx-msg.ok   { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.mx-msg.err  { background: #fef2f2; color: #b91c1c; font-weight: 600; }

.mx-result {
  padding: 16px 18px;
  border-radius: 12px;
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--bg-soft), #fff4cc);
  border: 1px solid var(--lime-shine);
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
  color: var(--primary-dark);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mx-res-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
}
.mx-res-label {
  font-weight: 800;
  color: var(--muted);
  flex: 0 0 auto;
  min-width: 92px;
}
.mx-res-value {
  font-family: Consolas, Menlo, monospace;
  font-weight: 900;
  color: #b45309;
  word-break: break-all;
}
.mx-result-matrix {
  display: inline-grid;
  gap: 8px 14px;
  padding: 10px 4px;
}
.mx-result-matrix .mx-res-cell {
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
  font-weight: 800;
  color: #b45309;
  text-align: right;
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}

.mx-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mx-step {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.75;
  color: #4a3800;
  font-family: Consolas, Menlo, monospace;
  word-break: break-word;
}
.mx-step b { color: var(--primary-dark); font-weight: 800; font-family: "PingFang SC","Microsoft YaHei",sans-serif; }

@media (max-width: 640px) {
  .mx-matrix-grid input { width: 54px; font-size: 13px; }
  .mx-res-label { min-width: 76px; }
}

/* ============================================================
   电路计算
   ============================================================ */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.cc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: .15s;
  min-width: 0;
  box-sizing: border-box;
}
.cc-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -12px rgba(74,144,226,.35);
}
.cc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cc-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: .3px;
}
.cc-formula {
  font-family: Consolas, Menlo, monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.cc-vars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-bottom: 12px;
}
.cc-var {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cc-var-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-var-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.cc-var-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 13.5px;
  font-family: Consolas, Menlo, monospace;
  transition: .16s;
  color: var(--text);
  box-sizing: border-box;
}
.cc-var-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}
.cc-var-input.filled {
  background: #fff;
  border-color: rgba(74,144,226,.4);
}
.cc-var-unit {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  font-family: Consolas, Menlo, monospace;
  font-weight: 700;
  white-space: nowrap;
}
.cc-result {
  padding: 12px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--bg-soft), #fff4cc);
  border: 1px dashed var(--lime-shine);
  font-size: 13.5px;
  color: var(--primary-dark);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
  box-sizing: border-box;
}
.cc-result .cc-res-value {
  font-family: Consolas, Menlo, monospace;
  font-size: 17px;
  font-weight: 900;
  color: #b45309;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.cc-result.muted {
  background: var(--bg-softer);
  border-style: solid;
  border-color: var(--border);
  color: var(--muted);
  font-weight: 600;
}
.cc-result.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

@media (max-width: 640px) {
  .cc-grid { grid-template-columns: 1fr; }
  .cc-vars { grid-template-columns: 1fr; gap: 10px; }
  .cc-card { padding: 14px; }
}

/* ============================================================
   遗传计算
   ============================================================ */
.gn-form-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gn-form-row .field {
  margin-bottom: 0;
  flex: 1 1 180px;
  min-width: 140px;
}
.gn-form-row .field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 15px;
  font-family: Consolas, Menlo, monospace;
  text-align: center;
  letter-spacing: 2px;
  transition: .16s;
  color: var(--text);
  box-sizing: border-box;
}
.gn-form-row .field input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.gn-form-row .field select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: .16s;
}
.gn-form-row .field select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.gn-cross {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
  padding-bottom: 8px;
  flex: 0 0 auto;
}
.gn-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.gn-result {
  margin-top: 14px;
  display: none;
}
.gn-result.show { display: block; }

.gn-block {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.gn-block:last-child { margin-bottom: 0; }
.gn-block-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gn-block-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}

.gn-punnett {
  display: inline-grid;
  gap: 4px;
  padding: 6px;
}
.gn-punnett-cell {
  padding: 10px 14px;
  border-radius: 8px;
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  min-width: 60px;
  border: 1px solid var(--border);
  background: #fff;
  color: #4a3800;
}
.gn-punnett-head {
  background: linear-gradient(135deg, var(--lime), var(--primary));
  color: #fff;
  border-color: transparent;
  font-weight: 900;
}
.gn-punnett-body {
  background: #fff;
}
.gn-punnett-body.homozygous {
  background: #fff4cc;
  border-color: var(--lime-shine);
}
.gn-punnett-body.heterozygous {
  background: #e8eff5;
  border-color: #a8c8ef;
}

.gn-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.gn-stat {
  padding: 10px 14px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.gn-stat-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: Consolas, Menlo, monospace;
  letter-spacing: 1px;
}
.gn-stat-value {
  font-size: 13.5px;
  font-weight: 900;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}
.gn-stat-pct {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 640px) {
  .gn-form-row .field { flex: 1 1 100%; min-width: 0; }
  .gn-cross { width: 100%; text-align: center; padding: 0; }
  .gn-punnett-cell { padding: 8px 10px; font-size: 14px; min-width: 48px; }
}

/* ============================================================
   人体系统速查
   ============================================================ */
.bs-toolbar {
  margin-bottom: 14px;
}
.bs-search {
  width: 100%;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.bs-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.bs-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.bs-tab {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  cursor: pointer;
  transition: .16s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.bs-tab:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.4);
}
.bs-tab.active {
  background: linear-gradient(135deg, var(--lime), var(--primary));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(74,144,226,.55);
}
.bs-tab-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-dark);
  transition: color .16s;
}
.bs-tab-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.bs-tab.active .bs-tab-icon {
  color: #fff;
}
.bs-tab-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .3px;
}
.bs-tab.active .bs-tab-name { color: #fff; }
.bs-tab-count {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
}
.bs-tab.active .bs-tab-count { color: rgba(255,255,255,.85); }

.bs-detail {
  margin-bottom: 18px;
}
.bs-detail-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.bs-detail-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lime), var(--primary));
}
/* ---------- 详情头部（图标 + 名称 + badge） ---------- */
.bs-detail-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.bs-detail-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1.5px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  line-height: 1.2;
}

.bs-detail-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 9px;
  background: rgba(74,144,226,.14);
  color: var(--primary-dark);
  flex: 0 0 34px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.bs-detail-icon svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: block !important;
  flex: 0 0 auto !important;
}
.bs-detail-func {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
}
.bs-detail-desc {
  font-size: 14px;
  line-height: 1.95;
  color: #4a3800;
  margin: 0 0 18px;
}
.bs-section {
  margin-bottom: 16px;
}
.bs-section:last-child { margin-bottom: 0; }
.bs-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bs-section-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.bs-organ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.bs-organ {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  transition: .15s;
}
.bs-organ:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
}
.bs-organ-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.bs-organ-name::before {
  content: "●";
  color: var(--primary);
  font-size: 8px;
}
.bs-organ-role {
  font-size: 12.5px;
  line-height: 1.7;
  color: #5a4a20;
}
.bs-disease-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-disease {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  color: #7a5a20;
}
.bs-disease:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
}
.bs-tips-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.9;
  color: #4a3800;
}
.bs-tips-list li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}
.bs-tips-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 900;
}
.bs-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.bs-empty::before {
  content: "🔍";
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .55;
}

@media (max-width: 640px) {
  .bs-tabs { grid-template-columns: repeat(2, 1fr); }
  .bs-detail-card { padding: 18px 16px; }
  .bs-detail-name { font-size: 18px; }
  .bs-organ-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   地球模块
   ============================================================ */

/* ---------- 公转舞台 ---------- */
.earth-stage {
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.earth-orbit-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
}

.earth-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.earth-quick-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.earth-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.earth-slider-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}
.earth-slider-row input[type=range] {
  flex: 1;
  min-width: 180px;
  accent-color: var(--primary);
  cursor: pointer;
}
.earth-slider-value {
  font-family: Consolas, Menlo, monospace;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  min-width: 92px;
  text-align: center;
}

/* ---------- 信息卡 ---------- */
.earth-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.earth-info-card {
  background: linear-gradient(180deg, #fff, var(--bg-base));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: .15s;
}
.earth-info-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -14px rgba(74,144,226,.4);
}
.earth-info-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.earth-info-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.earth-info-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.earth-info-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- 节气卡 ---------- */
.earth-season-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.earth-season-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  transition: .15s;
  cursor: pointer;
}
.earth-season-card:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(74,144,226,.4);
}
.earth-season-card.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--bg-soft), #fff4cc);
  box-shadow: 0 0 0 2px rgba(74,144,226,.22);
}
.earth-season-name {
  font-size: 15.5px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0 0 6px;
  letter-spacing: .5px;
}
.earth-season-date {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  color: #8a7340;
  font-weight: 700;
  margin-bottom: 8px;
}
.earth-season-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: #5a4a20;
  margin: 0;
}

/* ---------- 板块 ---------- */
.earth-plate-svg-wrap {
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.earth-plate-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
}
.earth-plate-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.earth-plate-toolbar {
  margin-bottom: 12px;
}
.earth-search {
  width: 100%;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.earth-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.earth-plate-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.earth-plate-tab {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  cursor: pointer;
  transition: .16s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.earth-plate-tab:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.4);
}
.earth-plate-tab.active {
  background: linear-gradient(135deg, var(--lime), var(--primary));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(74,144,226,.55);
}
.earth-plate-tab-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .3px;
}
.earth-plate-tab.active .earth-plate-tab-name { color: #fff; }
.earth-plate-tab-count {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
}
.earth-plate-tab.active .earth-plate-tab-count { color: rgba(255,255,255,.85); }

.earth-plate-detail {
  margin-bottom: 18px;
}
.earth-plate-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.earth-plate-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lime), var(--primary));
}
.earth-plate-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.earth-plate-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1.5px;
}
.earth-plate-tag {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
}
.earth-plate-desc {
  font-size: 14px;
  line-height: 1.95;
  color: #4a3800;
  margin: 0 0 18px;
}
.earth-plate-section {
  margin-bottom: 16px;
}
.earth-plate-section:last-child { margin-bottom: 0; }
.earth-plate-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.earth-plate-section-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.earth-plate-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.earth-plate-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  transition: .15s;
}
.earth-plate-item:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
}
.earth-plate-item-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.earth-plate-item-name::before {
  content: "●";
  color: var(--primary);
  font-size: 8px;
}
.earth-plate-item-role {
  font-size: 12.5px;
  line-height: 1.7;
  color: #5a4a20;
}
.earth-plate-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.earth-plate-empty::before {
  content: "🌐";
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .55;
}

/* ---------- 经纬度距离 ---------- */
.earth-dist-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.earth-dist-side {
  background: var(--bg-softer);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.earth-dist-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.earth-dist-label::before {
  content: "";
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.earth-dist-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.earth-dist-inputs .field {
  margin-bottom: 0;
  min-width: 0;
}
.earth-dist-inputs .field input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  font-size: 13.5px;
  font-family: Consolas, Menlo, monospace;
  transition: .16s;
  color: var(--text);
  box-sizing: border-box;
}
.earth-dist-inputs .field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,226,.18);
}
.earth-dist-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  padding-top: 6px;
}
.earth-dist-mid {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 1px;
}
.earth-dist-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.earth-dist-msg {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  border-radius: 9px;
  padding: 0;
  transition: .18s;
  color: var(--muted);
}
.earth-dist-msg.show { padding: 10px 14px; }
.earth-dist-msg.ok   { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.earth-dist-msg.err  { background: #fef2f2; color: #b91c1c; font-weight: 600; }

.earth-dist-result {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.earth-dist-card {
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-soft), #fff4cc);
  border: 1px solid var(--lime-shine);
  position: relative;
  overflow: hidden;
}
.earth-dist-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.earth-dist-card-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.earth-dist-card-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  word-break: break-word;
}
.earth-dist-card-sub {
  font-size: 12px;
  color: #7a5a20;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .earth-dist-row { grid-template-columns: 1fr; }
  .earth-dist-mid { text-align: center; transform: rotate(90deg); }
  .earth-dist-inputs { grid-template-columns: 1fr; }
}

/* ============================================================
   中国地理
   ============================================================ */
.cng-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cng-search {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.cng-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.cng-select {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.cng-select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.cng-stats {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cng-stats b { color: var(--primary-dark); font-weight: 800; }

/* ---------- 地形 ---------- */
.cng-terrain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.cng-terrain-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: .16s;
  position: relative;
  overflow: hidden;
}
.cng-terrain-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lime), var(--primary));
}
.cng-terrain-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 26px -14px rgba(74,144,226,.4);
}
.cng-terrain-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.cng-terrain-name {
  font-size: 17px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1px;
}
.cng-terrain-type {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.cng-terrain-row {
  font-size: 13.5px;
  line-height: 1.75;
  color: #4a3800;
  margin-bottom: 6px;
}
.cng-terrain-row:last-child { margin-bottom: 0; }
.cng-terrain-row b { color: var(--muted); font-weight: 700; margin-right: 6px; }

/* ---------- 河流湖泊 ---------- */
.cng-river-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.cng-river-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: .16s;
  position: relative;
  overflow: hidden;
}
.cng-river-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.cng-river-card.lake::before {
  background: linear-gradient(180deg, #a8c8ef, #4a7fb5);
}
.cng-river-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 26px -14px rgba(74,144,226,.4);
}
.cng-river-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-left: 6px;
}
.cng-river-name {
  font-size: 17px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1px;
}
.cng-river-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.cng-river-card.lake .cng-river-badge {
  background: #e8eff5;
  color: #3f5a6b;
}
.cng-river-body {
  padding-left: 6px;
}
.cng-river-row {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #4a3800;
  margin-bottom: 5px;
}
.cng-river-row b {
  flex: 0 0 62px;
  color: var(--muted);
  font-weight: 700;
}
.cng-river-row span {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.cng-river-note {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,244,204,.6);
  font-size: 12.5px;
  line-height: 1.7;
  color: #7a5a20;
}

/* ---------- 行政区划 ---------- */
.cng-prov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cng-prov-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: .16s;
  position: relative;
  overflow: hidden;
}
.cng-prov-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.cng-prov-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -14px rgba(74,144,226,.4);
  transform: translateY(-2px);
}
.cng-prov-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-left: 6px;
}
.cng-prov-abbr {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lime), var(--primary));
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 4px 10px -4px rgba(74,144,226,.5);
}
.cng-prov-name {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 3px;
  letter-spacing: .5px;
}
.cng-prov-region {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 1px 8px;
  border-radius: 999px;
  background: #f3f4f6;
}
.cng-prov-body {
  padding-left: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}
.cng-prov-cell {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  min-width: 0;
}
.cng-prov-cell b {
  color: var(--muted);
  font-weight: 700;
  flex: 0 0 auto;
}
.cng-prov-cell span {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-word;
  min-width: 0;
}

.cng-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.cng-empty::before {
  content: "🗺️";
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .55;
}

@media (max-width: 640px) {
  .earth-info-grid { grid-template-columns: repeat(2, 1fr); }
  .earth-season-cards { grid-template-columns: 1fr; }
  .earth-plate-tabs { grid-template-columns: repeat(2, 1fr); }
  .earth-plate-items { grid-template-columns: 1fr; }
  .earth-dist-result { grid-template-columns: 1fr; }
  .cng-terrain-grid { grid-template-columns: 1fr; }
  .cng-river-list { grid-template-columns: 1fr; }
  .cng-prov-grid { grid-template-columns: 1fr; }
  .cng-toolbar .cng-search { flex: 1 1 100%; }
  .cng-select { flex: 1 1 calc(50% - 5px); }
}

/* ============================================================
   地球模块 · 自转
   ============================================================ */
.earth-rot-stage {
  background: linear-gradient(160deg, var(--bg-base), #fff5e0);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.earth-rot-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
}

.earth-rot-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.earth-rot-view-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.earth-rot-view-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}
.earth-rot-play-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.earth-rot-time {
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 5px 14px;
  border-radius: 999px;
  min-width: 82px;
  text-align: center;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.earth-rot-hint {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
  padding-left: 4px;
}

/* 参数卡 */
.earth-rot-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.earth-rot-param {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  transition: .15s;
}
.earth-rot-param:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
}
.earth-rot-param-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.earth-rot-param-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.5;
}
.earth-rot-param-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.6;
}

/* 线速度表 */
.earth-speed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 12px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.earth-speed-table th,
.earth-speed-table td {
  padding: 9px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.earth-speed-table th {
  background: var(--bg-base);
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}
.earth-speed-table td {
  color: var(--text);
  font-family: Consolas, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.earth-speed-table tbody tr:hover td {
  background: var(--bg-softer);
}
.earth-speed-table tbody tr:last-child td {
  border-bottom: none;
}

/* 地方时计算 */
.earth-localtime-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.earth-localtime-row .field {
  margin-bottom: 0;
  min-width: 0;
}
.earth-localtime-row .field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: Consolas, Menlo, monospace;
  transition: .16s;
  color: var(--text);
  box-sizing: border-box;
}
.earth-localtime-row .field input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}

@media (max-width: 720px) {
  .earth-localtime-row { grid-template-columns: 1fr; }
  .earth-rot-params { grid-template-columns: 1fr; }
}

/* ============================================================
   世界历史简表
   ============================================================ */
.wh-toolbar-panel { padding: 16px 18px; }
.wh-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.wh-search {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.wh-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.wh-select {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.wh-select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.wh-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wh-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.wh-stat-card {
  background: linear-gradient(180deg, #fff, var(--bg-base));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.wh-stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.wh-stat-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.wh-stat-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.wh-stat-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.wh-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
  position: relative;
}
.wh-timeline::before {
  content: "";
  position: absolute;
  left: 100px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, rgba(74,144,226,.6), rgba(74,144,226,.15));
  border-radius: 1px;
}
.wh-row {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 8px 0;
}
.wh-row-year {
  position: relative;
  text-align: right;
  padding-right: 10px;
  padding-top: 12px;
  font-family: Consolas, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.4;
  word-break: break-word;
}
.wh-row-year .wh-row-end {
  display: block;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}
.wh-row-dot {
  position: absolute;
  left: 100px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.22);
  transform: translateX(-50%);
  z-index: 2;
  transition: .2s;
}
.wh-row:hover .wh-row-dot {
  transform: translateX(-50%) scale(1.25);
  box-shadow: 0 0 0 4px rgba(74,144,226,.35);
}
.wh-row.expanded .wh-row-dot {
  background: linear-gradient(135deg, var(--lime), var(--primary));
  box-shadow: 0 0 0 4px rgba(74,144,226,.4);
}
.wh-row-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  transition: .18s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.wh-row-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 24px -14px rgba(74,144,226,.45);
}
.wh-row.expanded .wh-row-card {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--bg-base), #fff);
  box-shadow: 0 12px 28px -14px rgba(74,144,226,.4);
}
.wh-row-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.wh-row-name {
  font-size: 16.5px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1.2px;
}
.wh-row-years {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #8a7340;
  background: var(--primary-soft);
  padding: 2px 10px;
  border-radius: 999px;
}
.wh-row-era {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}
.wh-row-duration {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
  background: #faf3e3;
  padding: 2px 10px;
  border-radius: 999px;
}
.wh-row-toggle {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74,144,226,.15);
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  transition: .22s;
}
.wh-row.expanded .wh-row-toggle {
  background: var(--primary);
  color: #fff;
  transform: rotate(180deg);
}
.wh-row-toggle::after {
  content: "▾";
  line-height: 1;
}
.wh-row-summary {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wh-row-summary .wh-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-softer);
  color: var(--primary-dark);
  border: 1px solid rgba(74,144,226,.25);
  white-space: nowrap;
}
.wh-row-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: none;
}
.wh-row.expanded .wh-row-detail { display: block; }
.wh-detail-block {
  margin-top: 10px;
}
.wh-detail-block:first-child { margin-top: 0; }
.wh-detail-block-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wh-detail-block-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.wh-detail-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.85;
  color: #4a3800;
}
.wh-detail-list li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 2px;
}
.wh-detail-list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--primary);
  font-weight: 900;
}
.wh-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.wh-empty::before {
  content: "🌍";
  display: block;
  font-size: 42px;
  margin-bottom: 12px;
  opacity: .6;
}
@media (max-width: 900px) {
  .wh-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wh-stats-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wh-toolbar .wh-search { flex: 1 1 100%; }
  .wh-select { flex: 1 1 calc(50% - 5px); }
  .wh-timeline::before { left: 22px; }
  .wh-row { grid-template-columns: 44px 1fr; gap: 10px; }
  .wh-row-year { font-size: 10.5px; padding-right: 6px; text-align: center; }
  .wh-row-dot { left: 22px; top: 20px; width: 10px; height: 10px; }
  .wh-row-card { padding: 12px 14px; }
  .wh-row-name { font-size: 15px; letter-spacing: .6px; }
  .wh-row-toggle { right: 10px; top: 12px; }
}

/* ============================================================
   古诗词默写
   ============================================================ */
.pt-quiz-panel { padding: 18px 20px; }
.pt-quiz-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pt-select {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.pt-select:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.pt-quiz-card {
  padding: 28px 24px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--lime-shine);
  text-align: center;
  margin-bottom: 16px;
}
.pt-quiz-meta {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.pt-quiz-question {
  font-family: "Songti SC", "STSong", "PingFang SC", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 3px;
  line-height: 1.85;
  margin-bottom: 22px;
  word-break: break-word;
}
.pt-quiz-answer-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.pt-quiz-input {
  flex: 1 1 320px;
  max-width: 480px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  font-size: 16px;
  font-family: "Songti SC", "STSong", "PingFang SC", serif;
  letter-spacing: 2px;
  transition: .16s;
  color: var(--text);
  box-sizing: border-box;
}
.pt-quiz-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.pt-quiz-feedback {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.85;
  min-height: 26px;
}
.pt-quiz-feedback.ok {
  color: #3f6b52;
  font-weight: 700;
}
.pt-quiz-feedback.err {
  color: #b91c1c;
  font-weight: 700;
}
.pt-quiz-feedback.answer {
  color: var(--primary-dark);
  font-weight: 700;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-block;
}
.pt-quiz-feedback .ans-line {
  font-family: "Songti SC", "STSong", "PingFang SC", serif;
  font-size: 17px;
  letter-spacing: 2px;
  display: block;
  margin-top: 4px;
}
.pt-quiz-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.pt-stat {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: #7a5a20;
}
.pt-stat b {
  color: var(--primary-dark);
  font-size: 15px;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}

/* 诗词库 */
.pt-lib-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pt-search {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.pt-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.pt-stats {
  font-size: 12.5px;
  color: var(--muted);
}
.pt-stats b { color: var(--primary-dark); font-weight: 800; }
.pt-lib-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.pt-lib-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: .16s;
  position: relative;
  overflow: hidden;
}
.pt-lib-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.pt-lib-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 26px -14px rgba(74,144,226,.4);
}
.pt-lib-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-left: 6px;
}
.pt-lib-title {
  font-family: "Songti SC", "STSong", "PingFang SC", serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1.5px;
}
.pt-lib-author {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}
.pt-lib-era {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.pt-lib-body {
  padding-left: 6px;
  font-family: "Songti SC", "STSong", "PingFang SC", serif;
  font-size: 14px;
  line-height: 2;
  color: #4a3800;
  letter-spacing: 1.5px;
  white-space: pre-line;
  word-break: break-word;
}
.pt-lib-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  padding-left: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-lib-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.pt-lib-empty::before {
  content: "📜";
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .55;
}
@media (max-width: 640px) {
  .pt-quiz-question { font-size: 19px; letter-spacing: 2px; }
  .pt-quiz-card { padding: 22px 16px; }
  .pt-lib-list { grid-template-columns: 1fr; }
  .pt-quiz-input { flex: 1 1 100%; font-size: 15px; }
}

/* ============================================================
   细胞结构速查
   ============================================================ */
.cs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .cs-layout { grid-template-columns: 1fr; }
}
.cs-diagram-panel { padding: 18px 18px 14px; }
.cs-svg-wrap {
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.cs-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
}
.cs-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.cs-organ-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-organ-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: .15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cs-organ-item:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
  transform: translateX(2px);
}
.cs-organ-item.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--bg-soft), #fff4cc);
  box-shadow: 0 0 0 2px rgba(74,144,226,.22);
}
.cs-organ-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .3px;
}
.cs-organ-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  white-space: nowrap;
}
.cs-organ-item.plant-only .cs-organ-tag {
  background: #e8f2ec;
  color: #3f6b52;
}
.cs-organ-item.animal-only .cs-organ-tag {
  background: #e8eff5;
  color: #3f5a6b;
}
.cs-organ-item.prokaryote .cs-organ-tag {
  background: #faf3e3;
  color: #8a6414;
}
.cs-detail {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.9;
  color: #4a3800;
}
.cs-detail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.cs-detail-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0;
  letter-spacing: 1px;
}
.cs-detail-tag {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.cs-detail-row {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.85;
}
.cs-detail-row b {
  flex: 0 0 76px;
  color: var(--muted);
  font-weight: 700;
}
.cs-detail-row span {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.cs-cell-part {
  cursor: pointer;
  transition: .18s;
}
.cs-cell-part:hover {
  filter: brightness(1.08);
}
.cs-cell-part.active {
  filter: brightness(1.15) saturate(1.3);
  stroke-width: 3 !important;
}
.cs-cell-label {
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 10px;
  font-weight: 800;
  fill: #3a2a00;
  pointer-events: none;
  text-anchor: middle;
}

/* ============================================================
   古诗词默写 · 在线库
   ============================================================ */
.pt-online-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-base), #fff4cc);
  border: 1px dashed rgba(74,144,226,.45);
}
.pt-online-info {
  flex: 1 1 260px;
  min-width: 0;
}
.pt-online-title {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--primary-dark);
  margin-bottom: 5px;
  letter-spacing: .5px;
}
.pt-online-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: #7a5a20;
}
.pt-online-desc.loading {
  color: var(--primary-dark);
  font-weight: 700;
}
.pt-online-desc.ok {
  color: #3f6b52;
  font-weight: 700;
}
.pt-online-desc.err {
  color: #b91c1c;
  font-weight: 700;
}
.pt-online-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.pt-lib-more {
  text-align: center;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.pt-lib-more b {
  color: var(--primary-dark);
  font-weight: 800;
}

/* ============================================================
   亲戚计算器
   ============================================================ */
.qq-result-box {
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-soft), #fff4cc);
  border: 1px solid var(--lime-shine);
  text-align: center;
  margin-bottom: 16px;
}
.qq-result-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.qq-result-value {
  font-size: 36px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 4px;
  line-height: 1.2;
  margin-bottom: 10px;
  word-break: break-word;
}
.qq-chain {
  font-size: 13px;
  color: #7a5a20;
  font-family: Consolas, Menlo, monospace;
  line-height: 1.8;
  word-break: break-word;
}
.qq-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.qq-quick-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
  margin-right: 4px;
}
.qq-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.qq-btn {
  padding: 14px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
}
.qq-btn:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -10px rgba(74,144,226,.4);
}
.qq-btn:active { transform: translateY(0); }
.qq-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .qq-result-value { font-size: 26px; letter-spacing: 2px; }
  .qq-buttons { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .qq-btn { padding: 11px 4px; font-size: 14px; }
}

/* ============================================================
   随机数
   ============================================================ */
.rn-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.rn-form .field { margin-bottom: 0; min-width: 0; }
.rn-form .field input[type=range] {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}
.rn-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rn-result {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  font-family: Consolas, Menlo, monospace;
  font-size: 15px;
  line-height: 1.9;
  color: #4a3800;
  word-break: break-all;
  max-height: 380px;
  overflow-y: auto;
  min-height: 60px;
}
.rn-result:empty::before {
  content: '点击「生成」按钮开始';
  color: var(--muted);
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 13.5px;
}
.rn-result .rn-num {
  display: inline-block;
  padding: 3px 10px;
  margin: 3px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(74,144,226,.3);
  font-weight: 700;
  color: var(--primary-dark);
}

/* ============================================================
   图片工具 · 拼图
   ============================================================ */
.stitch-upload-area {
  border: 2px dashed var(--lime-shine);
  border-radius: 12px;
  background: var(--bg-softer);
  padding: 28px 20px;
  cursor: pointer;
  transition: .16s;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.stitch-upload-area:hover { border-color: var(--primary); background: var(--bg-soft); }
.stitch-upload-area svg { width: 42px; height: 42px; color: var(--primary); display: block; }
.stitch-upload-area p { margin: 0; font-size: 14px; color: var(--muted); }
.stitch-upload-area b { color: var(--primary-dark); }

.stitch-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.stitch-thumb {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-softer);
}
.stitch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stitch-thumb-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(220,38,38,.9);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.stitch-thumb-del:hover { background: #b91c1c; }
.stitch-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg-softer);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 620px;
  overflow-y: auto;
  align-items: center;
}
.stitch-preview img {
  max-width: 100%;
  display: block;
  border-radius: 4px;
}

/* ============================================================
   图片工具 · 去背景
   ============================================================ */
.bg-canvas-wrap {
  background:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.bg-canvas-wrap canvas {
  max-width: 100%;
  max-height: 520px;
  display: block;
  cursor: crosshair;
  border-radius: 4px;
}
.bg-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(58,42,0,.75);
  color: #ffe9a8;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}
.bg-color-preview {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-left: 6px;
  background: #fff;
}

/* ============================================================
   数理化实验
   ============================================================ */
.lab-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.lab-search {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.lab-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.lab-subject-tabs {
  flex: 0 0 auto;
  margin: 0;
}
.lab-stats {
  font-size: 12.5px;
  color: var(--muted);
}
.lab-stats b {
  color: var(--primary-dark);
  font-weight: 800;
}

/* ---------- 实验卡片网格 ---------- */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.lab-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: .18s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lab-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}
.lab-card.subject-math::before       { background: linear-gradient(90deg, #4a7fb5, #a8c8ef); }
.lab-card.subject-physics::before    { background: linear-gradient(90deg, var(--primary), var(--primary)); }
.lab-card.subject-chemistry::before  { background: linear-gradient(90deg, #8fb59a, #a8d4ab); }

.lab-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -14px rgba(74,144,226,.4);
}
.lab-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lab-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}
.lab-card.subject-math .lab-card-icon       { background: linear-gradient(135deg, #4a7fb5, #a8c8ef); }
.lab-card.subject-physics .lab-card-icon    { background: linear-gradient(135deg, var(--primary), var(--primary)); }
.lab-card.subject-chemistry .lab-card-icon  { background: linear-gradient(135deg, #8fb59a, #a8d4ab); }
.lab-card-icon svg { width: 20px; height: 20px; }

.lab-card-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 5px;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.lab-card-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lab-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.lab-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-softer);
  color: #7a5a20;
  border: 1px solid rgba(74,144,226,.2);
}
.lab-card.subject-math .lab-tag       { background: #e8eff5; color: #3f5a6b; border-color: #a8c8ef; }
.lab-card.subject-chemistry .lab-tag  { background: #e8f2ec; color: #3f6b52; border-color: #a8d4ab; }

/* ---------- 详情布局 ---------- */
.lab-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 1020px) {
  .lab-detail-layout { grid-template-columns: 1fr; }
}

/* ---------- 左：实验信息 ---------- */
.lab-info {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
}
.lab-info::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--lime), var(--primary));
}
.lab-info-head {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.lab-info-head h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0 0 8px;
  letter-spacing: .5px;
}
.lab-info-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lab-section { margin-bottom: 16px; }
.lab-section:last-child { margin-bottom: 0; }
.lab-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lab-section-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--primary));
}
.lab-section p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: #4a3800;
  word-break: break-word;
}
.lab-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #4a3800;
}
.lab-steps li { margin-bottom: 6px; }
.lab-section-notice p {
  background: #faf3e3;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #c9a02b;
  color: #7a5a20;
}

/* ---------- 右：动画舞台 ---------- */
.lab-stage {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: sticky;
  top: 84px;
}
@media (max-width: 1020px) {
  .lab-stage { position: static; }
}
.lab-canvas-wrap {
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
#labCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
}
.lab-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lab-progress {
  flex: 1 1 180px;
  min-width: 120px;
  accent-color: var(--primary);
  cursor: pointer;
}
.lab-time {
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 4px 10px;
  border-radius: 999px;
  min-width: 92px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lab-params {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.lab-params:empty { display: none; border-top: none; padding-top: 0; }
.lab-param {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5a4a20;
}
.lab-param-label {
  flex: 0 0 96px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-param input[type=range] {
  flex: 1;
  accent-color: var(--primary);
  cursor: pointer;
}
.lab-param-val {
  flex: 0 0 60px;
  text-align: right;
  font-family: Consolas, Menlo, monospace;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .lab-grid { grid-template-columns: 1fr; }
  .lab-info { padding: 18px 16px; }
  .lab-info-head h3 { font-size: 17px; }
  .lab-stage { padding: 14px; }
  .lab-param-label { flex: 0 0 72px; font-size: 12.5px; }
  .lab-time { min-width: 78px; font-size: 11.5px; }
}

/* ============================================================
   生活可视化
   ============================================================ */
.viz-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.viz-search {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: .16s;
  box-sizing: border-box;
}
.viz-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
.viz-cat-tabs { flex: 0 0 auto; margin: 0; }
.viz-stats {
  font-size: 12.5px;
  color: var(--muted);
}
.viz-stats b { color: var(--primary-dark); font-weight: 800; }

.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.viz-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: .18s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.viz-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}
.viz-card.cat-biology::before   { background: linear-gradient(90deg, #3f8f6b, #a8d4ab); }
.viz-card.cat-geography::before { background: linear-gradient(90deg, #4a7fb5, #a8c8ef); }
.viz-card.cat-others::before    { background: linear-gradient(90deg, #c0524a, var(--primary)); }

.viz-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -14px rgba(74,144,226,.4);
}
.viz-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.viz-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
}
.viz-card.cat-biology .viz-card-icon   { background: linear-gradient(135deg, #3f8f6b, #a8d4ab); }
.viz-card.cat-geography .viz-card-icon { background: linear-gradient(135deg, #4a7fb5, #a8c8ef); }
.viz-card.cat-others .viz-card-icon    { background: linear-gradient(135deg, #c0524a, var(--primary)); }
.viz-card-icon svg { width: 20px; height: 20px; }

.viz-card-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.viz-card-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.viz-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.viz-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-softer);
  color: #7a5a20;
  border: 1px solid rgba(74,144,226,.2);
}
.viz-card.cat-biology .viz-tag   { background: #e8f2ec; color: #3f6b52; border-color: #a8d4ab; }
.viz-card.cat-geography .viz-tag { background: #e8eff5; color: #3f5a6b; border-color: #a8c8ef; }
.viz-card.cat-others .viz-tag    { background: #faf3e3; color: #8a6414; border-color: var(--primary); }

.viz-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 1020px) {
  .viz-detail-layout { grid-template-columns: 1fr; }
}

.viz-info {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
}
.viz-info::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--lime), var(--primary));
}
.viz-info-head {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.viz-info-head h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-dark);
  margin: 0 0 8px;
  letter-spacing: .5px;
}
.viz-info-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.viz-info-desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.95;
  color: #4a3800;
}
.viz-info-more {
  font-size: 13px;
  line-height: 1.9;
  color: #5a4a20;
  background: var(--bg-softer);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--primary);
  white-space: pre-line;
}
.viz-info-more:empty { display: none; }

.viz-stage {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: sticky;
  top: 84px;
}
@media (max-width: 1020px) {
  .viz-stage { position: static; }
}
.viz-canvas-wrap {
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
#vizCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
}
.viz-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.viz-progress {
  flex: 1 1 180px;
  min-width: 120px;
  accent-color: var(--primary);
  cursor: pointer;
}
.viz-time {
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 4px 10px;
  border-radius: 999px;
  min-width: 92px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.viz-params {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.viz-params:empty { display: none; border-top: none; padding-top: 0; }
.viz-param {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5a4a20;
}
.viz-param-label {
  flex: 0 0 100px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viz-param input[type=range] {
  flex: 1;
  accent-color: var(--primary);
  cursor: pointer;
}
.viz-param-val {
  flex: 0 0 60px;
  text-align: right;
  font-family: Consolas, Menlo, monospace;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .viz-grid { grid-template-columns: 1fr; }
  .viz-info { padding: 18px 16px; }
  .viz-info-head h3 { font-size: 17px; }
  .viz-stage { padding: 14px; }
  .viz-param-label { flex: 0 0 76px; font-size: 12.5px; }
  .viz-time { min-width: 78px; font-size: 11.5px; }
}

/* ============================================================
   视频收藏
   ============================================================ */
.vc-toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.vc-search{
  flex:1 1 240px;min-width:200px;
  padding:10px 16px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-softer);
  outline:none;font-size:14px;font-family:inherit;transition:.16s;
}
.vc-search:focus{
  border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.vc-select{
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-softer);
  font-size:13.5px;color:var(--text);outline:none;
  cursor:pointer;font-family:inherit;transition:.16s;flex:0 0 auto;
}
.vc-select:focus{
  border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.vc-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:14px;
}

.vc-card{
  position:relative;background:#fff;
  border:1px solid var(--border);border-radius:14px;
  padding:0;overflow:hidden;transition:.16s;
  display:flex;flex-direction:column;
}
.vc-card:hover{
  border-color:var(--primary);
  box-shadow:0 8px 22px -12px rgba(74,144,226,.3);
}

.vc-card-cover{
  position:relative;
  height:160px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  display:flex;align-items:center;justify-content:center;
  color:#c9ab6b;overflow:hidden;
}
.vc-card-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.vc-card-cover svg{width:48px;height:48px;}

.vc-card-platform{
  position:absolute;left:10px;top:10px;
  font-size:11px;font-weight:800;letter-spacing:.3px;
  padding:3px 10px;border-radius:999px;
  background:rgba(58,42,0,.72);color:#ffe9a8;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.vc-card-duration{
  position:absolute;right:10px;bottom:10px;
  font-size:11.5px;font-weight:800;
  padding:2px 9px;border-radius:6px;
  background:rgba(0,0,0,.7);color:#fff;
  font-family:Consolas,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
.vc-card-watchlater{
  position:absolute;left:10px;bottom:10px;
  font-size:11px;font-weight:800;
  padding:2px 9px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.55);
}

.vc-card-body{
  padding:14px 16px 12px;
  display:flex;flex-direction:column;gap:8px;flex:1;
}
.vc-card-title{
  font-size:15.5px;font-weight:800;color:var(--text);
  margin:0;line-height:1.4;word-break:break-word;
  padding-right:26px;
}
.vc-card-author{
  font-size:12.5px;color:var(--primary-dark);
  font-weight:700;letter-spacing:.2px;
}
.vc-card-meta{
  font-size:12.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 12px;
  line-height:1.6;
}
.vc-card-tags{
  display:flex;flex-wrap:wrap;gap:5px;
}
.vc-card-desc{
  font-size:13px;line-height:1.7;color:#4a3800;
  margin:0;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.vc-card-foot{
  display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding:10px 4px 0;
  border-top:1px dashed rgba(74,144,226,.25);
}
.vc-card-links{
  display:flex;flex-wrap:wrap;gap:4px;
}
.vc-card-actions{
  display:flex;gap:6px;flex-shrink:0;
}

.vc-status-want{background:#e8eff5;color:#3f5a6b;}
.vc-status-reading{background:#fff4cc;color:var(--primary-dark);}
.vc-status-done{background:#e8f2ec;color:#3f6b52;}

.vc-stars{
  font-size:13px;letter-spacing:1px;
  color:var(--primary);line-height:1;
}
.vc-stars .off{color:#e5d6a8;}

@media (max-width:640px){
  .vc-list{grid-template-columns:1fr;}
  .vc-search{flex:1 1 100%;}
  .vc-select{flex:1 1 calc(50% - 5px);}
  .vc-card-cover{height:140px;}
}


/* ============================================================
   表情包收藏
   ============================================================ */
.sticker-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:32px 20px;
  border:2px dashed var(--lime-shine);
  border-radius:14px;
  background:var(--bg-softer);
  cursor:pointer;
  transition:.16s;
  text-align:center;
  margin-bottom:16px;
}
.sticker-drop:hover,
.sticker-drop.dragging{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.sticker-drop svg{
  width:44px;height:44px;
  color:var(--primary);
  display:block;
}
.sticker-drop p{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}
.sticker-drop b{color:var(--primary-dark);}

/* 待添加区 */
.sticker-pending-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:13.5px;
  color:var(--muted);
  font-weight:600;
  flex-wrap:wrap;
}
.sticker-pending-head b{color:var(--primary-dark);font-weight:800;}

.sticker-pending-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;
  margin-bottom:16px;
  padding:12px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  border-radius:12px;
  min-height:80px;
}
.sticker-pending-item{
  position:relative;
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  background:
    linear-gradient(45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f0f0f0 75%),
    linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);
  background-size:14px 14px;
  background-position:0 0, 0 7px, 7px -7px, -7px 0;
  background-color:#fff;
  border:1px solid var(--border);
}
.sticker-pending-item img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
.sticker-pending-del{
  position:absolute;
  top:4px;right:4px;
  width:22px;height:22px;
  border-radius:50%;
  border:none;
  background:rgba(220,38,38,.9);
  color:#fff;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
}
.sticker-pending-del:hover{background:#b91c1c;}

.sticker-form-title{
  margin:8px 0 12px;
  font-size:13.5px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.sticker-form-title::before{
  content:"";
  width:4px;height:14px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--lime),var(--primary));
}

/* 工具栏 */
.sticker-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.sticker-search{
  flex:1 1 240px;
  min-width:200px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
}
.sticker-search:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.sticker-select{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  font-size:13.5px;
  color:var(--text);
  outline:none;
  cursor:pointer;
  font-family:inherit;
  transition:.16s;
  flex:0 0 auto;
}
.sticker-select:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

/* 网格 */
.sticker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}

.sticker-card{
  position:relative;
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  background:
    linear-gradient(45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f0f0f0 75%),
    linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0;
  background-color:#fff;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.18s;
}
.sticker-card:hover{
  border-color:var(--primary);
  box-shadow:0 10px 24px -12px rgba(74,144,226,.4);
  transform:translateY(-2px);
}
.sticker-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* 常用角标 */
.sticker-card .sticker-fav-badge{
  position:absolute;
  top:8px;
  left:8px;
  font-size:14px;
  line-height:1;
  color:var(--primary);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  pointer-events:none;
}

/* 使用次数角标 */
.sticker-card .sticker-count-badge{
  position:absolute;
  top:8px;
  right:8px;
  font-size:10.5px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(58,42,0,.72);
  color:#ffe9a8;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* 悬停操作条 */
.sticker-card .sticker-actions{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  gap:4px;
  padding:8px 8px 10px;
  background:linear-gradient(to top, rgba(58,42,0,.78), rgba(58,42,0,.35) 60%, transparent);
  opacity:0;
  transform:translateY(6px);
  transition:.18s;
  pointer-events:none;
}
.sticker-card:hover .sticker-actions,
.sticker-card:focus-within .sticker-actions{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.sticker-btn{
  flex:1;
  padding:6px 4px;
  border-radius:7px;
  border:none;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.sticker-btn.copy{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
}
.sticker-btn.copy:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
}
.sticker-btn.fav{
  background:rgba(255,255,255,.9);
  color:#7a5a20;
  flex:0 0 auto;
  width:32px;
  padding:6px 0;
}
.sticker-btn.fav.on{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
}
.sticker-btn.del{
  background:rgba(255,255,255,.9);
  color:#b91c1c;
  flex:0 0 auto;
  width:32px;
  padding:6px 0;
}
.sticker-btn.del:hover{
  background:#fef2f2;
  border-color:#fecaca;
}

/* 名称条（有名字时显示） */
.sticker-card .sticker-name{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:18px 10px 8px;
  background:linear-gradient(to top, rgba(58,42,0,.75), transparent);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  transition:.18s;
}
.sticker-card:hover .sticker-name{
  opacity:0;
}
.sticker-card:not(.has-name) .sticker-name{ display:none; }

/* 大图预览弹窗 */
.sticker-preview{
  position:fixed;
  inset:0;
  background:rgba(58,42,0,.82);
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.sticker-preview.show{ display:flex; }

.sticker-preview-card{
  background:#fff;
  border-radius:18px;
  max-width:min(720px, 92vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  animation:stickerPop .22s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes stickerPop{
  from{ opacity:0; transform:scale(.94); }
  to{ opacity:1; transform:scale(1); }
}
.sticker-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-base),#fff);
  flex:0 0 auto;
}
.sticker-preview-title{
  font-size:14.5px;
  font-weight:800;
  color:var(--primary-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1;
}
.sticker-preview-close{
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
  flex:0 0 auto;
}
.sticker-preview-close:hover{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}

.sticker-preview-body{
  flex:1;
  min-height:0;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f0f0f0 75%),
    linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
  background-color:#fafafa;
  overflow:auto;
}
.sticker-preview-body img{
  max-width:100%;
  max-height:60vh;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.18));
}

.sticker-preview-foot{
  flex:0 0 auto;
  padding:12px 16px;
  border-top:1px solid var(--border);
  background:var(--bg-base);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.sticker-preview-meta{
  flex:1 1 100%;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:4px;
  word-break:break-word;
}
.sticker-preview-meta b{
  color:var(--primary-dark);
  font-weight:700;
  margin-right:4px;
}

@media (max-width:640px){
  .sticker-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
  .sticker-pending-grid{ grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
  .sticker-search{ flex:1 1 100%; }
  .sticker-select{ flex:1 1 calc(50% - 5px); }
  .sticker-preview{ padding:12px; }
  .sticker-preview-body{ padding:14px; }
  .sticker-preview-body img{ max-height:48vh; }
}

/* ============================================================
   急救知识速查
   ============================================================ */
.fa-warning-banner,
.ap-warning-banner{
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid rgba(74,144,226,.35);
  border-left:4px solid #b91c1c;
  font-size:13.5px;
  line-height:1.7;
  color:#7a5a20;
  margin-bottom:16px;
}
.fa-warning-banner b,
.ap-warning-banner b{color:#b91c1c;font-weight:800;}

.fa-topbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.fa-call120{
  flex:1 1 200px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 20px;
  border-radius:14px;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  font-size:16px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(220,38,38,.55);
  transition:.16s;
  letter-spacing:1px;
}
.fa-call120:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -10px rgba(220,38,38,.7);
  color:#fff;
}
.fa-call120 svg{width:20px;height:20px;}

.fa-audience-switch{
  display:inline-flex;
  gap:4px;
  background:var(--bg-soft);
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(74,144,226,.22);
  margin-bottom:14px;
}
.fa-audience-switch button{
  padding:8px 16px;
  border-radius:999px;
  border:none;
  background:none;
  color:#8a7340;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  white-space:nowrap;
}
.fa-audience-switch button:hover:not(.active){
  background:#fff;
  color:var(--primary-dark);
}
.fa-audience-switch button.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.55);
}

.fa-search,
.ap-search{
  width:100%;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
  box-sizing:border-box;
  margin-bottom:14px;
}
.fa-search:focus,
.ap-search:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.fa-special-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media (max-width:720px){ .fa-special-grid{ grid-template-columns:1fr; } }

.fa-special-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:18px 12px;
  border-radius:14px;
  border:1px solid rgba(74,144,226,.28);
  background:#fff;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  text-align:center;
}
.fa-special-card:hover{
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -10px rgba(74,144,226,.4);
}
.fa-special-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(74,144,226,.14);
  color:var(--primary-dark);
  transition:.18s;
  margin-bottom:4px;
}
.fa-special-icon svg{
  width:22px;
  height:22px;
  display:block;
}
.fa-special-card:hover .fa-special-icon{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  box-shadow:0 6px 16px -6px rgba(74,144,226,.55);
}
.fa-special-card b{font-size:14.5px;font-weight:800;color:var(--primary-dark);}
.fa-special-card span{font-size:11.5px;color:var(--muted);}

.fa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
  margin-top:14px;
}
.fa-card{
  position:relative;
  border-radius:14px;
  padding:18px 20px 18px 22px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.16s;
  overflow:hidden;
}
.fa-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  border-radius:14px 0 0 14px;
}
.fa-card.level-red::before{ background:linear-gradient(180deg,#dc2626,#b91c1c); }
.fa-card.level-orange::before{ background:linear-gradient(180deg,#f59e0b,#d97706); }
.fa-card.level-yellow::before{ background:linear-gradient(180deg,#fbbf24,#d97706); }
.fa-card:hover{
  border-color:var(--primary);
  box-shadow:0 10px 26px -14px rgba(74,144,226,.4);
  transform:translateY(-2px);
}
.fa-card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}
.fa-level-badge{
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  color:#fff;
  letter-spacing:.5px;
  white-space:nowrap;
}
.fa-level-badge.red{ background:#b91c1c; }
.fa-level-badge.orange{ background:#d97706; }
.fa-level-badge.yellow{ background:#ca8a04; }
.fa-card-name{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0;
  line-height:1.35;
  flex:1;
  min-width:0;
}
.fa-card-tagline{
  font-size:13px;
  line-height:1.7;
  color:#5a4a20;
  margin:0;
  padding-left:6px;
}

/* 详情视图 */
.fa-detail-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.fa-back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
}
.fa-back-btn:hover{
  color:var(--primary-dark);
  border-color:var(--primary);
  background:var(--bg-softer);
}
.fa-detail-name{
  font-size:20px;
  font-weight:900;
  color:var(--primary-dark);
  margin:0;
  letter-spacing:1px;
}
.fa-detail-tagline{
  font-size:13.5px;
  color:var(--muted);
  margin:4px 0 0;
  line-height:1.7;
}

.fa-judge{
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px dashed rgba(74,144,226,.5);
  font-size:14px;
  line-height:1.85;
  color:#7a5a20;
  margin-bottom:18px;
}
.fa-judge b{color:var(--primary-dark);font-weight:800;}

.fa-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:18px;
}
.fa-step{
  display:flex;
  gap:14px;
  padding:16px 18px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  transition:.16s;
  position:relative;
}
.fa-step:hover{
  border-color:var(--primary);
  box-shadow:0 6px 18px -10px rgba(74,144,226,.35);
}
.fa-step-num{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.55);
}
.fa-step-body{flex:1;min-width:0;}
.fa-step-title{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin:0 0 5px;
  line-height:1.4;
}
.fa-step-desc{
  font-size:13.5px;
  line-height:1.8;
  color:#4a3800;
  margin:0;
}

.fa-dont-box{
  padding:16px 18px 16px 22px;
  border-radius:14px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:4px solid #dc2626;
  margin-bottom:16px;
}
.fa-dont-box h4{
  margin:0 0 10px;
  font-size:14.5px;
  font-weight:800;
  color:#b91c1c;
  letter-spacing:.5px;
}
.fa-dont-box ul{
  margin:0;
  padding-left:20px;
  font-size:13.5px;
  line-height:1.85;
  color:#7f1d1d;
}
.fa-dont-box li{margin-bottom:4px;}
.fa-dont-box li:last-child{margin-bottom:0;}

.fa-call-box{
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  margin-bottom:16px;
}
.fa-call-box h4{
  margin:0 0 6px;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.5px;
  opacity:.9;
}
.fa-call-box p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
}

.fa-related{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.fa-related-label{
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
  margin-right:4px;
  align-self:center;
}
.fa-related-btn{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(74,144,226,.3);
  background:var(--bg-softer);
  color:var(--primary-dark);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.fa-related-btn:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
}

.fa-detail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

/* 集合类（常见小意外） */
.fa-minor-item{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
  background:#fff;
}
.fa-minor-item:last-child{margin-bottom:0;}
.fa-minor-head{
  padding:14px 18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--bg-softer);
  transition:.15s;
  font-weight:700;
  font-size:14.5px;
  color:var(--text);
  user-select:none;
}
.fa-minor-head:hover{background:var(--bg-soft);}
.fa-minor-head::after{
  content:"＋";
  font-size:16px;
  color:var(--muted);
  font-weight:400;
  transition:.2s;
}
.fa-minor-item.open .fa-minor-head::after{content:"−";color:var(--primary-dark);}
.fa-minor-body{
  padding:0 18px;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
}
.fa-minor-item.open .fa-minor-body{
  padding:14px 18px 16px;
  max-height:600px;
}
.fa-minor-body ol{
  margin:0 0 10px;
  padding-left:22px;
  font-size:13.5px;
  line-height:1.85;
  color:#4a3800;
}
.fa-minor-body ol li{margin-bottom:4px;}
.fa-minor-dont{
  margin:0;
  padding:8px 12px;
  border-radius:8px;
  background:#fef2f2;
  border-left:3px solid #dc2626;
  font-size:12.5px;
  line-height:1.75;
  color:#7f1d1d;
}
.fa-minor-dont b{color:#b91c1c;}

/* CPR 节拍器 */
.fa-metro-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:26px 20px 20px;
  border-radius:20px;
  background:linear-gradient(180deg,#fef2f2,#fff);
  border:1px solid rgba(220,38,38,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.fa-metro-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  flex-wrap:wrap;
}
.fa-metro-mode{
  display:inline-flex;
  gap:4px;
  background:#fff;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(220,38,38,.28);
}
.fa-metro-mode button{
  padding:6px 14px;
  border-radius:999px;
  border:none;
  background:none;
  color:#8a7340;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.fa-metro-mode button.active{
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
}
.fa-metro-timer{
  font-family:Consolas,Menlo,monospace;
  font-size:20px;
  font-weight:800;
  color:#b91c1c;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
}
.fa-metro-dot{
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626 55%,#7f1d1d);
  box-shadow:0 18px 40px -12px rgba(220,38,38,.5),inset 0 -8px 20px rgba(0,0,0,.1);
  transition:transform .1s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:44px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
  user-select:none;
}
.fa-metro-dot.pulse{ transform:scale(1.12); }
.fa-metro-count{
  font-family:Consolas,Menlo,monospace;
  font-size:15px;
  font-weight:800;
  color:#7f1d1d;
  font-variant-numeric:tabular-nums;
}
.fa-metro-tips{
  min-height:22px;
  font-size:13.5px;
  color:#7f1d1d;
  font-weight:700;
  letter-spacing:.5px;
  text-align:center;
  transition:.2s;
}
.fa-metro-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.fa-metro-actions .btn.danger{
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  border-color:transparent;
}
.fa-metro-actions .btn.danger:hover{
  background:linear-gradient(135deg,#b91c1c,#7f1d1d);
  color:#fff;
  box-shadow:0 10px 22px -8px rgba(220,38,38,.75);
}

/* AED 引导 */
.fa-aed-step{
  display:flex;
  gap:16px;
  padding:18px 20px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  margin-bottom:12px;
  transition:.16s;
}
.fa-aed-step:hover{border-color:#dc2626;}
.fa-aed-num{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  font-size:18px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px -6px rgba(220,38,38,.55);
}
.fa-aed-body{flex:1;min-width:0;}
.fa-aed-title{
  font-size:15.5px;
  font-weight:800;
  color:var(--text);
  margin:0 0 5px;
}
.fa-aed-desc{
  font-size:13.5px;
  line-height:1.8;
  color:#4a3800;
  margin:0;
}
.fa-aed-special{
  margin-top:16px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--bg-soft);
  border:1px solid rgba(74,144,226,.35);
  font-size:13px;
  line-height:1.85;
  color:#7a5a20;
}
.fa-aed-special b{color:var(--primary-dark);font-weight:800;}

/* 紧急信息卡 */
.fa-info-card{
  padding:24px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,var(--bg-softer));
  border:2px solid #b91c1c;
  box-shadow:0 18px 40px -20px rgba(220,38,38,.4);
  margin-bottom:16px;
}
.fa-info-name-row{
  display:flex;
  gap:18px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:2px dashed rgba(220,38,38,.25);
  margin-bottom:18px;
}
.fa-info-avatar{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:50%;
  background:linear-gradient(135deg,#fca5a5,#dc2626);
  color:#fff;
  font-size:32px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px -8px rgba(220,38,38,.5);
}
.fa-info-basic{flex:1;min-width:0;}
.fa-info-name{
  font-size:26px;
  font-weight:900;
  color:#7f1d1d;
  margin:0 0 4px;
  letter-spacing:1px;
}
.fa-info-sub{
  font-size:13.5px;
  color:#7a5a20;
  line-height:1.7;
}
.fa-info-sub b{color:#b91c1c;font-weight:800;}
.fa-info-block{margin-bottom:16px;}
.fa-info-block:last-child{margin-bottom:0;}
.fa-info-block-title{
  font-size:12px;
  font-weight:800;
  color:#b91c1c;
  letter-spacing:1.5px;
  margin-bottom:6px;
  text-transform:uppercase;
}
.fa-info-block-value{
  font-size:15px;
  line-height:1.85;
  color:#3a2a00;
  word-break:break-word;
}
.fa-info-contacts{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.fa-info-contact{
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-soft);
  border:1px solid rgba(220,38,38,.2);
}
.fa-info-contact b{
  display:block;
  font-size:14px;
  color:#7f1d1d;
  margin-bottom:3px;
}
.fa-info-contact span{
  display:block;
  font-size:12.5px;
  color:#7a5a20;
  margin-bottom:5px;
}
.fa-info-contact a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  font-weight:800;
  color:#b91c1c;
  text-decoration:none;
  font-family:Consolas,Menlo,monospace;
}
.fa-info-contact a svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
  display:block;
}

.fa-level-badge svg{
  flex:0 0 auto;
  display:block;
}

/* ============================================================
   常见穴位速查
   ============================================================ */
.ap-sym-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
}
.ap-sym-chip{
  padding:14px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.ap-sym-chip:hover{
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  transform:translateY(-2px);
  box-shadow:0 8px 18px -10px rgba(74,144,226,.4);
}
.ap-sym-chip.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(74,144,226,.55);
}

.ap-sym-detail-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.ap-sym-detail-name{
  font-size:20px;
  font-weight:900;
  color:var(--primary-dark);
  margin:0;
  letter-spacing:1px;
}
.ap-sym-tip{
  padding:12px 16px;
  border-radius:12px;
  background:var(--bg-soft);
  border:1px dashed rgba(74,144,226,.5);
  font-size:13.5px;
  line-height:1.85;
  color:#7a5a20;
  margin-bottom:16px;
}
.ap-sym-points{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.ap-sym-point{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition:.16s;
  text-align:left;
  font-family:inherit;
  position:relative;
}
.ap-sym-point:hover{
  border-color:var(--primary);
  background:var(--bg-softer);
  transform:translateY(-2px);
  box-shadow:0 8px 18px -10px rgba(74,144,226,.4);
}
.ap-sym-point b{
  display:block;
  font-size:16px;
  font-weight:900;
  color:var(--primary-dark);
  margin-bottom:4px;
  letter-spacing:1px;
}
.ap-sym-point span{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.6;
}
.ap-sym-point.primary::after{
  content:"首选";
  position:absolute;
  top:8px;
  right:10px;
  font-size:10.5px;
  font-weight:800;
  padding:1px 7px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  letter-spacing:.5px;
}

.ap-part-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ap-part-tab{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.ap-part-tab:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.ap-part-tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}

.ap-part-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
@media (max-width:900px){
  .ap-part-layout{ grid-template-columns:1fr; }
}
.ap-svg-panel{
  padding:12px;
  background:linear-gradient(160deg,var(--bg-base),var(--bg-soft));
}
#apPartSvg{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
}
.ap-svg-hint{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin:8px 0 0;
}
.ap-point{cursor:pointer;}
.ap-point circle{
  fill:var(--primary);
  stroke:#fff;
  stroke-width:2;
  transition:.18s;
}
.ap-point text{
  fill:#3a2a00;
  font-weight:700;
  pointer-events:none;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
}
.ap-point:hover circle,
.ap-point.active circle{
  fill:var(--primary-dark);
  stroke:var(--primary);
  stroke-width:3;
}
.ap-point.active circle{
  filter:drop-shadow(0 0 6px rgba(74,144,226,.7));
  animation:apPulse 1.6s ease-in-out infinite;
}
@keyframes apPulse{
  0%,100%{ transform:scale(1); transform-origin:center; }
  50%    { transform:scale(1.15); transform-origin:center; }
}

.ap-point-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.ap-point-chip{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  text-align:left;
}
.ap-point-chip:hover{
  border-color:var(--primary);
  background:var(--bg-softer);
}
.ap-point-chip.active{
  border-color:var(--primary);
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  box-shadow:0 0 0 2px rgba(74,144,226,.22);
}
.ap-point-chip b{
  display:block;
  font-size:15px;
  font-weight:900;
  color:var(--primary-dark);
  letter-spacing:1px;
}
.ap-point-chip span{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  margin-top:3px;
  font-family:Consolas,Menlo,monospace;
}

.ap-mer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.ap-mer-card{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  text-align:left;
}
.ap-mer-card:hover{
  border-color:var(--primary);
  background:var(--bg-softer);
  transform:translateY(-2px);
  box-shadow:0 8px 18px -10px rgba(74,144,226,.4);
}
.ap-mer-card b{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--primary-dark);
  margin-bottom:5px;
  letter-spacing:.5px;
}
.ap-mer-card span{
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
}

/* 穴位详情弹层 */
.ap-detail-overlay{
  position:fixed;
  inset:0;
  background:rgba(58,42,0,.75);
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.ap-detail-overlay.show{display:flex;}
.ap-detail-card{
  background:#fff;
  border-radius:20px;
  width:100%;
  max-width:820px;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  animation:apPop .22s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes apPop{
  from{opacity:0;transform:scale(.94);}
  to{opacity:1;transform:scale(1);}
}
.ap-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-base),#fff);
  flex:0 0 auto;
}
.ap-detail-head-left{flex:1;min-width:0;}
.ap-detail-title-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.ap-detail-title{
  font-size:26px;
  font-weight:900;
  color:var(--primary-dark);
  letter-spacing:2px;
  margin:0;
}
.ap-detail-pinyin{
  font-size:14px;
  color:var(--muted);
  font-style:italic;
}
.ap-detail-code{
  font-family:Consolas,Menlo,monospace;
  font-size:12.5px;
  font-weight:700;
  padding:2px 9px;
  border-radius:6px;
  background:var(--primary-soft);
  color:var(--primary-dark);
}
.ap-detail-meridian{
  font-size:13px;
  color:#7a5a20;
}
.ap-detail-close{
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
}
.ap-detail-close:hover{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}

.ap-detail-body{
  flex:1;
  overflow-y:auto;
  padding:18px 22px 22px;
}
.ap-detail-svg-wrap{
  background:linear-gradient(160deg,var(--bg-base),var(--bg-soft));
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  margin-bottom:16px;
}
.ap-detail-svg{
  display:block;
  width:100%;
  height:auto;
  max-height:340px;
}
.ap-detail-section{margin-bottom:14px;}
.ap-detail-section:last-child{margin-bottom:0;}
.ap-detail-label{
  font-size:12px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:1.5px;
  margin-bottom:6px;
}
.ap-detail-value{
  font-size:14px;
  line-height:1.9;
  color:#4a3800;
  padding:12px 16px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  word-break:break-word;
}
.ap-detail-simple{
  font-size:14.5px;
  line-height:1.85;
  color:var(--primary-dark);
  font-weight:700;
  padding:12px 16px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px dashed rgba(74,144,226,.5);
}
.ap-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.ap-detail-tag{
  padding:4px 12px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:12.5px;
  font-weight:700;
}
.ap-detail-warning{
  padding:12px 16px;
  border-radius:10px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:4px solid #dc2626;
  font-size:13px;
  line-height:1.85;
  color:#7f1d1d;
}
.ap-detail-warning b{color:#b91c1c;font-weight:800;}

.ap-detail-foot{
  padding:12px 22px;
  border-top:1px solid var(--border);
  background:var(--bg-base);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ap-fav-btn.on{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
}

@media (max-width:640px){
  .fa-metro-dot{ width:140px; height:140px; font-size:36px; }
  .ap-detail-head{padding:14px 16px;}
  .ap-detail-title{font-size:22px;letter-spacing:1px;}
  .ap-detail-body{padding:14px 16px;}
  .ap-detail-foot{padding:10px 16px;}
}


/* ============================================================
   轻断食时间表
   ============================================================ */
.fs-warning-banner{
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid rgba(74,144,226,.35);
  border-left:4px solid var(--primary-dark);
  font-size:13.5px;
  line-height:1.75;
  color:#7a5a20;
  margin-bottom:16px;
}
.fs-warning-banner b{color:var(--primary-dark);font-weight:800;}

.fs-status-panel{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:26px;
  align-items:center;
}
@media (max-width:720px){
  .fs-status-panel{grid-template-columns:1fr;gap:18px;}
}

.fs-status-ring{
  position:relative;
  width:220px;
  height:220px;
  margin:0 auto;
}
.fs-status-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  display:block;
}
.fs-ring-bg{
  fill:none;
  stroke:#fff4cc;
  stroke-width:14;
}
.fs-ring-progress{
  fill:none;
  stroke:url(#fsGrad);
  stroke-width:14;
  stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;
}
.fs-status-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
}
.fs-status-label{
  font-size:15px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:2px;
}
.fs-status-timer{
  font-size:26px;
  font-weight:900;
  color:#3a2a00;
  font-variant-numeric:tabular-nums;
  font-family:Consolas,Menlo,monospace;
  margin:6px 0 4px;
  letter-spacing:1px;
}
.fs-status-sub{
  font-size:11.5px;
  color:#8a7340;
  letter-spacing:.5px;
}
.fs-status-ring.eating .fs-ring-progress{stroke:#8fb59a;}
.fs-status-ring.eating .fs-status-label{color:#3f6b52;}
.fs-status-ring.fasting .fs-ring-progress{stroke:url(#fsGrad);}

.fs-status-info{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fs-status-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:12px 16px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  font-size:13.5px;
  flex-wrap:wrap;
}
.fs-status-item span{color:#8a7340;font-weight:600;}
.fs-status-item b{
  color:#3a2a00;
  font-weight:800;
  font-family:Consolas,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}

/* 模式选择 */
.fs-modes{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.fs-mode-btn{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  white-space:nowrap;
}
.fs-mode-btn:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.fs-mode-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}

/* 时间轴 */
.fs-timeline-bar{
  position:relative;
  height:52px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--bg-soft),#fff4cc);
  border:1px solid var(--border);
  overflow:visible;
  margin-top:6px;
}
.fs-timeline-eating{
  position:absolute;
  top:0;
  bottom:0;
  background:linear-gradient(180deg,#a8d4ab,#8fb59a);
  border-radius:12px;
  transition:.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 1px 3px rgba(0,0,0,.2);
}
.fs-timeline-now{
  position:absolute;
  top:-6px;
  bottom:-6px;
  width:3px;
  background:#dc2626;
  box-shadow:0 0 10px rgba(220,38,38,.7);
  transition:left .5s ease;
  z-index:3;
  border-radius:2px;
}
.fs-timeline-now::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.22);
}
.fs-timeline-labels{
  display:flex;
  justify-content:space-between;
  margin-top:22px;
  font-size:11.5px;
  color:#8a7340;
  font-variant-numeric:tabular-nums;
  font-family:Consolas,Menlo,monospace;
  padding:0 4px;
  font-weight:700;
}
.fs-timeline-legend{
  display:flex;
  gap:18px;
  margin-top:14px;
  font-size:12.5px;
  color:#5a4a20;
  flex-wrap:wrap;
}
.fs-timeline-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.fs-legend-dot{
  width:12px;
  height:12px;
  border-radius:4px;
  flex:0 0 auto;
}
.fs-legend-dot.eating{background:#8fb59a;}
.fs-legend-dot.fasting{background:var(--bg-soft);border:1px solid var(--border);}
.fs-legend-dot.now{background:#dc2626;}

/* 打卡 */
.fs-checkin-btn{
  width:100%;
  padding:16px;
  font-size:15px;
  border-radius:14px;
  margin-bottom:16px;
  letter-spacing:1px;
}
.fs-checkin-btn.done{
  background:linear-gradient(135deg,#8fb59a,#3f6b52) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 8px 22px -10px rgba(63,107,82,.55) !important;
  cursor:default;
}
.fs-checkin-btn.done:hover{
  transform:none;
  box-shadow:0 8px 22px -10px rgba(63,107,82,.55) !important;
}

.fs-checkin-history{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}
.fs-day-cell{
  aspect-ratio:1;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size:10.5px;
  color:#8a7340;
  transition:.16s;
  cursor:pointer;
  font-family:inherit;
  padding:0;
}
.fs-day-cell:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.fs-day-cell .fs-day-num{
  font-size:15px;
  font-weight:800;
  font-family:Consolas,Menlo,monospace;
  line-height:1;
}
.fs-day-cell .fs-day-week{
  font-size:10px;
  opacity:.75;
}
.fs-day-cell.done{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
}
.fs-day-cell.done .fs-day-num{font-weight:900;}
.fs-day-cell.today{
  box-shadow:0 0 0 2px var(--primary-dark);
}

/* 30 天统计 */
.fs-stats-bar{
  display:flex;
  gap:2px;
  height:70px;
  margin-bottom:14px;
  align-items:flex-end;
  padding:0 2px;
}
.fs-bar{
  flex:1;
  min-height:4px;
  border-radius:3px 3px 0 0;
  background:#f0e6c8;
  transition:.2s;
  position:relative;
}
.fs-bar.done{
  background:linear-gradient(180deg,var(--primary),var(--primary));
}
.fs-bar.today{
  background:linear-gradient(180deg,#dc2626,#b91c1c);
  box-shadow:0 0 8px rgba(220,38,38,.4);
}
.fs-stats-text{
  font-size:13.5px;
  color:#5a4a20;
  text-align:center;
  line-height:1.75;
}
.fs-stats-text b{
  color:var(--primary-dark);
  font-weight:800;
  font-size:15px;
}

/* ============================================================
   运动损伤应急处理
   ============================================================ */
.si-warning-banner{
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid rgba(74,144,226,.35);
  border-left:4px solid #b91c1c;
  font-size:13.5px;
  line-height:1.75;
  color:#7a5a20;
  margin-bottom:16px;
}
.si-warning-banner b{color:#b91c1c;font-weight:800;}

.si-toolbar{margin-bottom:12px;}
.si-search{
  width:100%;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14px;
  font-family:inherit;
  transition:.16s;
  box-sizing:border-box;
}
.si-search:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}

.si-sev-filter{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.si-sev-btn{
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
}
.si-sev-btn:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.si-sev-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}

.si-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}
.si-card{
  position:relative;
  border-radius:14px;
  padding:18px 20px 18px 24px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.16s;
  overflow:hidden;
}
.si-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  border-radius:14px 0 0 14px;
}
.si-card.sev-minor::before   { background:linear-gradient(180deg,#a8d4ab,#7a9c5f); }
.si-card.sev-moderate::before{ background:linear-gradient(180deg,var(--primary),#d97706); }
.si-card.sev-severe::before  { background:linear-gradient(180deg,#dc2626,#b91c1c); }
.si-card:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 10px 26px -14px rgba(74,144,226,.4);
}
.si-card-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}
.si-sev-badge{
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  color:#fff;
  letter-spacing:.5px;
  white-space:nowrap;
}
.si-sev-badge.minor   { background:#7a9c5f; }
.si-sev-badge.moderate{ background:#d97706; }
.si-sev-badge.severe  { background:#b91c1c; }
.si-card-name{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0;
  line-height:1.35;
  flex:1;
  min-width:0;
}
.si-card-tagline{
  font-size:13px;
  line-height:1.7;
  color:#5a4a20;
  margin:0;
  padding-left:6px;
}

/* 详情页 */
.si-detail-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.si-back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
}
.si-back-btn:hover{
  color:var(--primary-dark);
  border-color:var(--primary);
  background:var(--bg-softer);
}
.si-detail-title-block{flex:1;min-width:0;}
.si-detail-name{
  font-size:21px;
  font-weight:900;
  color:var(--primary-dark);
  margin:0 0 4px;
  letter-spacing:1px;
}
.si-detail-tagline{
  font-size:13.5px;
  color:var(--muted);
  margin:0;
  line-height:1.7;
}

/* 症状识别 */
.si-identify{
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px dashed rgba(74,144,226,.5);
  font-size:14px;
  line-height:1.9;
  color:#7a5a20;
  margin-bottom:18px;
}
.si-identify b{
  display:block;
  font-size:12.5px;
  color:var(--primary-dark);
  letter-spacing:1.5px;
  font-weight:800;
  margin-bottom:6px;
}

/* 分步处理 */
.si-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:18px;
}
.si-step{
  display:flex;
  gap:14px;
  padding:16px 18px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  transition:.16s;
}
.si-step:hover{
  border-color:var(--primary);
  box-shadow:0 6px 18px -10px rgba(74,144,226,.35);
}
.si-step-num{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.55);
}
.si-step-body{flex:1;min-width:0;}
.si-step-title{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin:0 0 5px;
  line-height:1.4;
}
.si-step-desc{
  font-size:13.5px;
  line-height:1.8;
  color:#4a3800;
  margin:0;
}

/* 何时就医 */
.si-doctor-box{
  padding:16px 18px 16px 22px;
  border-radius:14px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:4px solid #dc2626;
  margin-bottom:14px;
}
.si-doctor-box h4{
  margin:0 0 10px;
  font-size:14.5px;
  font-weight:800;
  color:#b91c1c;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.si-doctor-box h4 svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.si-doctor-box ul{
  margin:0;
  padding-left:20px;
  font-size:13.5px;
  line-height:1.85;
  color:#7f1d1d;
}
.si-doctor-box li{margin-bottom:4px;}
.si-doctor-box li:last-child{margin-bottom:0;}

/* 停训建议 */
.si-stop-box{
  padding:16px 18px 16px 22px;
  border-radius:14px;
  background:var(--bg-soft);
  border:1px solid rgba(74,144,226,.4);
  border-left:4px solid #d97706;
  margin-bottom:14px;
}
.si-stop-box h4{
  margin:0 0 10px;
  font-size:14.5px;
  font-weight:800;
  color:#b45309;
  letter-spacing:.5px;
}
.si-stop-box p{
  margin:0;
  font-size:13.5px;
  line-height:1.85;
  color:#7a5a20;
  white-space:pre-line;
}

/* 恢复建议 + 预防 */
.si-block{
  padding:14px 18px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  margin-bottom:14px;
}
.si-block h4{
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  letter-spacing:1.5px;
}
.si-block ul{
  margin:0;
  padding-left:20px;
  font-size:13.5px;
  line-height:1.85;
  color:#4a3800;
}
.si-block ul li{margin-bottom:3px;}
.si-block ul li:last-child{margin-bottom:0;}

/* 关联跳转 */
.si-related{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  align-items:center;
}
.si-related-label{
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
  margin-right:4px;
}
.si-related-btn{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(74,144,226,.3);
  background:var(--bg-softer);
  color:var(--primary-dark);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.si-related-btn:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
}
.si-related-btn.danger{
  border-color:rgba(220,38,38,.35);
  background:#fef2f2;
  color:#b91c1c;
}
.si-related-btn.danger:hover{
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  border-color:transparent;
}

@media (max-width:640px){
  .si-grid{grid-template-columns:1fr;}
  .si-step{padding:14px 14px;}
  .si-step-num{flex:0 0 32px;width:32px;height:32px;font-size:14px;}
  .si-detail-name{font-size:18px;}
}

/* ============================================================
   图片加水印
   ============================================================ */
.wm-file-info{
  margin-top:10px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--bg-soft);
  border:1px solid rgba(74,144,226,.28);
  font-size:12.5px;
  color:#7a5a20;
  line-height:1.7;
  word-break:break-all;
}
.wm-file-info b{color:var(--primary-dark);font-weight:800;}

.wm-type-switch{
  display:inline-flex;
  gap:4px;
  background:var(--bg-soft);
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(74,144,226,.22);
  margin-bottom:16px;
}
.wm-type-btn{
  padding:8px 20px;
  border-radius:999px;
  border:none;
  background:none;
  color:#8a7340;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  white-space:nowrap;
}
.wm-type-btn:hover:not(.active){
  background:#fff;
  color:var(--primary-dark);
}
.wm-type-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.55);
}

.wm-type-panel{display:none;}
.wm-type-panel.active{display:block;}

.wm-pos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  max-width:260px;
}
.wm-pos-grid button{
  padding:10px 4px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.wm-pos-grid button:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.wm-pos-grid button.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}

.wm-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:#7a5a20;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  margin-top:12px;
}
.wm-check input{
  width:16px;
  height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}

.wm-preview-wrap{
  position:relative;
  min-height:300px;
  border:1px solid var(--border);
  border-radius:12px;
  background:
    linear-gradient(45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f0f0f0 75%),
    linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0;
  background-color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:12px;
  box-sizing:border-box;
}
#wmCanvas{
  max-width:100%;
  max-height:600px;
  display:none;
  border-radius:6px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.25);
}
#wmCanvas.show{display:block;}

.wm-preview-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#b0b6c4;
  font-size:13px;
  text-align:center;
  user-select:none;
}
.wm-preview-empty svg{
  width:44px;
  height:44px;
  opacity:.55;
}
.wm-preview-empty p{margin:0;}

@media (max-width:640px){
  .wm-pos-grid{max-width:100%;}
  .wm-type-btn{padding:7px 14px;font-size:12.5px;}
  #wmCanvas{max-height:360px;}
}


/* ============================================================
   实用测试
   ============================================================ */
.dt-key-display{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:20px;
  align-items:center;
}
@media (max-width:640px){
  .dt-key-display{grid-template-columns:1fr;}
}
.dt-key-main{
  font-size:36px;
  font-weight:900;
  color:var(--primary-dark);
  text-align:center;
  padding:24px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid var(--lime-shine);
  font-family:Consolas,Menlo,monospace;
  letter-spacing:2px;
  word-break:break-all;
  line-height:1.2;
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dt-key-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.dt-key-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
}
.dt-key-info span{
  font-size:11.5px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.5px;
  font-family:Consolas,Menlo,monospace;
}
.dt-key-info b{
  font-size:14.5px;
  color:var(--text);
  font-family:Consolas,Menlo,monospace;
  font-weight:800;
  word-break:break-all;
}

/* 键盘布局 */
.dt-kb-fn-row{
  display:flex;
  gap:4px;
  margin-bottom:8px;
  padding:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  border-radius:10px;
  overflow-x:auto;
  min-width:640px;
}
.dt-kb-fn-row .kb-key{
  flex:1;
  min-width:44px;
}

.dt-kb-wrap{
  background:var(--bg-softer);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  overflow-x:auto;
}
.dt-kb-row{
  display:grid;
  grid-template-columns:repeat(60, 1fr);
  gap:4px;
  margin-bottom:4px;
  min-width:640px;
}
.dt-kb-row:last-child{margin-bottom:0;}
.kb-key{
  height:42px;
  border-radius:6px;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#5a4a20;
  user-select:none;
  cursor:default;
  transition:.1s;
  padding:0 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:Consolas,Menlo,monospace;
  letter-spacing:.3px;
}
.kb-key.pressed{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(74,144,226,.35), inset 0 0 8px rgba(255,255,255,.5);
  transform:scale(0.94);
}
.kb-key.tested{
  background:#fff4cc;
  border-color:rgba(74,144,226,.35);
}
.kb-key.tested.pressed{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
}
.kb-key.spacer{
  background:transparent;
  border-color:transparent;
  pointer-events:none;
}

.dt-kb-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:14px;
  font-size:13px;
  color:var(--muted);
  flex-wrap:wrap;
}
.dt-kb-actions b{color:var(--primary-dark);font-weight:800;font-variant-numeric:tabular-nums;}

/* 鼠标 */
.dt-mouse-stage{
  position:relative;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-softer);
  overflow:hidden;
}
#dtMouseCanvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:800 / 360;
  touch-action:none;
  cursor:crosshair;
}
.dt-mouse-coords{
  position:absolute;
  top:10px;
  left:12px;
  font-family:Consolas,Menlo,monospace;
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  background:rgba(255,253,245,.9);
  border:1px solid rgba(74,144,226,.3);
  padding:4px 12px;
  border-radius:8px;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.dt-mouse-hint{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  font-size:11.5px;
  color:var(--muted);
  background:rgba(255,253,245,.9);
  padding:3px 12px;
  border-radius:999px;
  pointer-events:none;
  transition:.2s;
}
.dt-mouse-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.dt-mouse-stats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
  margin-bottom:14px;
}
.dt-mouse-stat{
  padding:12px 16px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.dt-mouse-stat span{
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
}
.dt-mouse-stat b{
  font-size:18px;
  color:var(--primary-dark);
  font-family:Consolas,Menlo,monospace;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

/* 网络测速 */
.dt-net-info{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.dt-net-item{
  padding:12px 16px;
  border-radius:10px;
  background:var(--bg-softer);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.dt-net-item span{
  font-size:11.5px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.3px;
}
.dt-net-item b{
  font-size:15px;
  color:var(--text);
  font-weight:800;
  font-family:Consolas,Menlo,monospace;
  word-break:break-all;
}

.dt-speed-result{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  padding:24px 20px 20px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--bg-soft),#fff4cc);
  border:1px solid var(--lime-shine);
  margin-bottom:12px;
}
.dt-speed-value{
  font-size:56px;
  font-weight:900;
  color:var(--primary-dark);
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-1px;
}
.dt-speed-unit{
  font-size:18px;
  font-weight:800;
  color:var(--primary-dark);
  opacity:.75;
}
.dt-speed-progress{
  height:6px;
  border-radius:3px;
  background:var(--bg-soft);
  overflow:hidden;
  margin-bottom:10px;
}
.dt-speed-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  border-radius:3px;
  transition:width .15s ease;
}
.dt-speed-detail{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  line-height:1.7;
  margin-bottom:14px;
}
.dt-net-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

/* 麦克风 */
.dt-mic-stage{
  background:var(--bg-softer);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin-bottom:14px;
}
.dt-mic-level{
  position:relative;
  height:26px;
  border-radius:13px;
  background:var(--bg-soft);
  overflow:hidden;
  margin-bottom:14px;
}
.dt-mic-level-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,#8fb59a,var(--primary) 55%,#c17878 85%,#dc2626);
  border-radius:13px;
  transition:width .06s linear;
}
.dt-mic-level-text{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-family:Consolas,Menlo,monospace;
  font-size:12px;
  font-weight:800;
  color:var(--primary-dark);
  z-index:2;
  letter-spacing:.5px;
}
#dtMicCanvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:720 / 200;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--border);
}
.dt-mic-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.dt-mic-tip{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  line-height:1.7;
}
.dt-mic-tip.error{color:#b91c1c;font-weight:700;}
.dt-mic-tip.ok{color:#3f6b52;font-weight:700;}


/* ============================================================
   小说助手（容器）
   ============================================================ */
.na-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  background:var(--bg-soft);
  padding:5px;
  border-radius:12px;
  margin-bottom:18px;
}
.na-tabs .ta-subtab{
  flex:1 1 auto;
  min-width:120px;
  justify-content:center;
  white-space:nowrap;
}
@media (max-width:640px){
  .na-tabs .ta-subtab{
    min-width:0;
    flex:1 1 calc(50% - 4px);
    font-size:12.5px;
    padding:8px 10px;
  }
}

.na-slots{position:relative;}
.na-slot{display:block;}

/* 搬迁进来的原 section 有点特殊：
   它们本身是 .page，有 padding 之类。为了视觉上融入，稍微去一点边距。*/
.na-slot > .page{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
.na-slot > .page > .page-title,
.na-slot > .page > .page-desc{
  display:none !important;
}
/* 但小说管理（page-novel）原有顶部标题是有用的，保留 */
.na-slot[data-na-slot="novelmanage"] > .page > .page-title,
.na-slot[data-na-slot="novelmanage"] > .page > .page-desc{
  display:flex !important;
}
.na-slot[data-na-slot="novelmanage"] > .page > .page-desc{
  display:block !important;
}

/* ============================================================
   首页 · 全新版本
   ============================================================ */

/* 重置旧版整屏翻页残留 */
#page-home{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: -26px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.hp{
  width: 100%;
  padding-bottom: 20px;
}

/* ---------- Hero ---------- */
.hp-hero{
  position: relative;
  overflow: hidden;
  margin-bottom: 46px;
  background:
    radial-gradient(900px 420px at 88% 8%, rgba(255,233,168,.55), transparent 68%),
    radial-gradient(700px 380px at 4% 96%, rgba(255,255,255,.28), transparent 68%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary) 48%, var(--primary-dark) 100%);
  color: #3a2a00;
  padding: 0;
}
.hp-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 78%);
  pointer-events: none;
}

.hp-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 62px 28px 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}

.hp-hero-main{ min-width: 0; }

.hp-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.55);
  color: #7a4c00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hp-badge svg{ width: 13px; height: 13px; }

.hp-hero h1{
  margin: 18px 0 12px;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.15;
  color: #3a2a00;
  text-shadow: 0 2px 12px rgba(255,255,255,.35);
}

.hp-sub{
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #5a3d00;
  letter-spacing: 1px;
  line-height: 1.7;
}

/* 搜索 */
.hp-search{
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 580px;
  margin-top: 28px;
  padding: 7px 7px 7px 18px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 16px 36px -18px rgba(90,60,0,.55), 0 2px 6px rgba(90,60,0,.08);
  transition: .2s;
}
.hp-search:focus-within{
  box-shadow: 0 20px 44px -18px rgba(90,60,0,.6), 0 0 0 4px rgba(255,255,255,.55);
}
.hp-search-icon{
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--primary-dark);
}
.hp-search input{
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #3a2a00;
  padding: 10px 0;
}
.hp-search input::placeholder{ color: #b8a882; }
.hp-search input::-webkit-search-cancel-button{ display: none; }

.hp-search-go{
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #3a2a00;
  padding: 11px 24px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  transition: .16s;
}
.hp-search-go:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(74,144,226,.75);
  transform: translateY(-1px);
}

/* 常用胶囊 */
.hp-quick{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.hp-quick-label{
  font-size: 11.5px;
  font-weight: 800;
  color: #8a6414;
  letter-spacing: 3px;
  margin-right: 2px;
}
.hp-chip{
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.32);
  color: #6b4400;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hp-chip:hover{
  background: #fff;
  color: var(--primary-dark);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(90,60,0,.6);
}

/* 右侧数字 */
.hp-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(122px, 1fr));
  gap: 14px;
  flex: 0 0 auto;
}
.hp-stat{
  padding: 18px 20px;
  text-align: center;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 10px 26px -16px rgba(90,60,0,.5);
  transition: .18s;
}
.hp-stat:hover{
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 16px 30px -16px rgba(90,60,0,.5);
}
.hp-stat b{
  display: block;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--primary-dark);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.hp-stat span{
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a7340;
  letter-spacing: 2px;
}

/* ---------- 通用区块 ---------- */
.hp-sec{
  max-width: 1240px;
  margin: 0 auto 48px;
  padding: 0 28px;
}

.hp-sec-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hp-sec-head h2{
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #3a2a00;
}
.hp-sec-head h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}
.hp-sec-sub{
  font-size: 12.5px;
  font-weight: 700;
  color: #a89260;
  letter-spacing: 1px;
}
.hp-more{
  border: 1px solid #f0e0b0;
  background: #fff;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
}
.hp-more:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--text-on-primary);
  border-color: transparent;
}
.hp-cat::before {
  background: linear-gradient(135deg, rgba(123,184,232,.22), rgba(74,144,226,.06));
}

/* ---------- 分类卡片 ---------- */
.hp-cats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}

.hp-cat{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 16px;
  border-radius: 16px;
  border: 1px solid #f0e0b0;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  transition: .22s cubic-bezier(.2,.9,.3,1.1);
}
.hp-cat::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,213,79,.22), rgba(74,144,226,.06));
  opacity: 0;
  transition: .22s;
}
.hp-cat:hover{
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(74,144,226,.5);
}
.hp-cat:hover::before{ opacity: 1; }

.hp-cat-icon{
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.65);
  transition: .22s;
}
.hp-cat-icon svg{ width: 21px; height: 21px; }
.hp-cat:hover .hp-cat-icon{
  transform: scale(1.08) rotate(-5deg);
}

.hp-cat-body{
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.hp-cat-body b{
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #3a2a00;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.hp-cat-body em{
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #a89260;
  letter-spacing: 1px;
}

.hp-cat-arrow{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #d3c090;
  transition: .22s;
}
.hp-cat-arrow svg{ width: 16px; height: 16px; display: block; }
.hp-cat:hover .hp-cat-arrow{
  color: var(--primary-dark);
  transform: translateX(4px);
}

/* ---------- 常用工具 ---------- */
.hp-tools{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 14px;
}

.hp-tool{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #f0e0b0;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: .2s;
}
.hp-tool:hover{
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(74,144,226,.5);
}

.hp-tool-icon{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--primary-dark);
  transition: .2s;
}
.hp-tool-icon svg{ width: 20px; height: 20px; }
.hp-tool:hover .hp-tool-icon{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.65);
}

.hp-tool-body{
  flex: 1;
  min-width: 0;
}
.hp-tool-body b{
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #3a2a00;
  letter-spacing: .3px;
  margin-bottom: 5px;
}
.hp-tool-body em{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8a7340;
}

/* ---------- 编者的话 ---------- */
.hp-note{
  border: 1px solid #f0e0b0;
  border-radius: 16px;
  background: var(--bg-base);
  overflow: hidden;
  transition: .2s;
}
.hp-note[open]{
  border-color: var(--primary);
  box-shadow: 0 14px 34px -22px rgba(74,144,226,.5);
}

.hp-note summary{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: linear-gradient(135deg, var(--bg-base), #fff4cc);
  transition: .18s;
}
.hp-note summary::-webkit-details-marker{ display: none; }
.hp-note[open] summary{
  border-bottom: 1px solid #f0e0b0;
  background: linear-gradient(135deg, #fff4cc, #ffe9a8);
}

.hp-note-title{
  flex: 1;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
}
.hp-note-hint{
  font-size: 12px;
  font-weight: 600;
  color: #a89260;
}
.hp-note-arrow{
  width: 18px;
  height: 18px;
  color: var(--primary-dark);
  transition: transform .25s ease;
  flex: 0 0 auto;
}
.hp-note[open] .hp-note-arrow{ transform: rotate(180deg); }

.hp-note-body{
  padding: 22px 24px 20px;
  background: #fff;
}
.hp-note-body p{
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: .3px;
  color: #3a2a00;
  text-indent: 2em;
}
.hp-note-body p:last-of-type{ margin-bottom: 20px; }

.hp-note-warn{
  padding: 12px 16px !important;
  border-radius: 10px;
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  color: #7f1d1d !important;
  text-indent: 0 !important;
  font-weight: 600;
}
.hp-note-warn b{ color: #b91c1c; font-weight: 800; }

.hp-note-sign{
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px dashed rgba(74,144,226,.35);
  font-size: 13px;
  font-weight: 700;
  color: #8a7340;
  letter-spacing: .5px;
}
.hp-note-sign span:last-child{ color: var(--primary-dark); }

/* ---------- 页脚 ---------- */
.hp-footer{
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 28px 56px;
  text-align: center;
  border-top: 1px solid #f0e0b0;
}
.hp-footer-logo{
  font-size: 26px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 5px;
  margin-bottom: 10px;
}
.hp-footer-sub{
  font-size: 12.5px;
  color: #a89260;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.hp-footer-links{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hp-footer-links button{
  border: 1px solid #f0e0b0;
  background: #fff;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
}
.hp-footer-links button:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(74,144,226,.6);
  transform: translateY(-1px);
}
.hp-footer-contact{
  font-size: 13px;
  color: #8a7340;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.hp-footer-slogan{
  font-size: 12.5px;
  font-weight: 700;
  color: #a89260;
  letter-spacing: 3px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1000px){
  .hp-hero-inner{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 46px 24px 52px;
  }
  .hp-stats{
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }
  .hp-hero h1{ font-size: 38px; letter-spacing: 2px; }
}

@media (max-width: 720px){
  .hp-hero{ margin-bottom: 34px; }
  .hp-hero-inner{ padding: 36px 20px 42px; gap: 28px; }
  .hp-hero h1{ font-size: 30px; letter-spacing: 1px; }
  .hp-sub{ font-size: 13.5px; letter-spacing: .3px; }

  .hp-search{
    padding: 6px 6px 6px 14px;
    border-radius: 13px;
  }
  .hp-search input{ font-size: 14px; padding: 9px 0; }
  .hp-search-go{ padding: 10px 18px; font-size: 13px; }

  .hp-quick{ margin-top: 20px; }
  .hp-chip{ font-size: 12.5px; padding: 6px 12px; }

  .hp-stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .hp-stat{ padding: 14px 12px; }
  .hp-stat b{ font-size: 22px; }
  .hp-stat span{ font-size: 11px; letter-spacing: 1.5px; margin-top: 5px; }

  .hp-sec{ padding: 0 20px; margin-bottom: 36px; }
  .hp-sec-head h2{ font-size: 18px; }
  .hp-sec-sub{ font-size: 11.5px; }

  .hp-cats{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hp-cat{ padding: 13px 12px; gap: 10px; border-radius: 14px; }
  .hp-cat-icon{ width: 38px; height: 38px; border-radius: 10px; }
  .hp-cat-icon svg{ width: 18px; height: 18px; }
  .hp-cat-body b{ font-size: 13px; letter-spacing: .2px; }
  .hp-cat-body em{ font-size: 10.5px; letter-spacing: .5px; }
  .hp-cat-arrow{ display: none; }

  .hp-tools{ grid-template-columns: 1fr; gap: 10px; }
  .hp-tool{ padding: 14px 15px; }
  .hp-tool-icon{ width: 36px; height: 36px; border-radius: 10px; }
  .hp-tool-icon svg{ width: 18px; height: 18px; }
  .hp-tool-body b{ font-size: 13.5px; }
  .hp-tool-body em{ font-size: 12px; }

  .hp-note-body{ padding: 18px 16px; }
  .hp-note-body p{ font-size: 13.5px; line-height: 1.9; }
  .hp-note summary{ padding: 14px 16px; }
  .hp-note-title{ font-size: 13.5px; }
  .hp-note-hint{ display: none; }

  .hp-footer{ padding: 34px 20px 42px; }
  .hp-footer-logo{ font-size: 22px; letter-spacing: 3px; }
  .hp-footer-slogan{ letter-spacing: 2px; }
}

@media (max-width: 380px){
  .hp-cats{ grid-template-columns: 1fr; }
  .hp-stats{ grid-template-columns: 1fr 1fr; }
}
/* ============================================================
   应用中心 · C 方案
   ============================================================ */
.apps-search-wrap{
  position:sticky;
  top:60px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,253,245,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:12px 0;
  margin:0 0 18px;
  border-bottom:1px solid rgba(74,144,226,.18);
}
.apps-search-icon{
  position:absolute;
  left:18px;
  width:16px;height:16px;
  color:var(--muted);
  pointer-events:none;
}
.apps-search-wrap input{
  flex:1;
  padding:12px 46px 12px 46px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  outline:none;
  font-size:14.5px;
  font-family:inherit;
  transition:.16s;
  width:100%;
}
.apps-search-wrap input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,144,226,.20);
}
.apps-search-wrap input::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
}
#appsSearchClear{
  position:absolute;
  right:14px;
  width:26px;height:26px;
  border-radius:50%;
  border:none;
  background:rgba(138,115,64,.16);
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
}
#appsSearchClear svg{width:12px;height:12px;}
#appsSearchClear:hover{background:var(--primary);color:#fff;}
#appsSearchClear[hidden]{display:none;}

/* ---------- Banner ---------- */
#appsBannerWrap{margin-bottom:20px;}
.apps-banner{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(255,233,168,.55), transparent 70%),
    linear-gradient(135deg, var(--bg-soft) 0%, #fff4cc 100%);
  border:1px solid rgba(74,144,226,.3);
  box-shadow:0 6px 20px -12px rgba(74,144,226,.3);
  min-height:130px;
  transition:.2s;
}
.apps-banner-track{
  display:flex;
  transition:transform .55s cubic-bezier(.3,.9,.3,1);
  height:100%;
}
.apps-banner-slide{
  flex:0 0 100%;
  padding:22px 56px 22px 26px;
  display:flex;
  align-items:center;
  gap:16px;
  box-sizing:border-box;
  min-height:130px;
}
.apps-banner-icon{
  flex:0 0 46px;
  width:46px;height:46px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px -6px rgba(74,144,226,.5);
}
.apps-banner-icon svg{width:22px;height:22px;}
.apps-banner-body{
  flex:1;
  min-width:0;
}
.apps-banner-tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1px;
  padding:2px 9px;
  border-radius:999px;
  background:rgba(74,144,226,.13);
  color:var(--primary-dark);
  margin-bottom:6px;
}
.apps-banner-title{
  font-size:15.5px;
  font-weight:800;
  color:#3a2a00;
  margin:0 0 5px;
  line-height:1.4;
}
.apps-banner-desc{
  font-size:13px;
  color:#7a5a20;
  line-height:1.65;
  margin:0;
}
.apps-banner-action{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(74,144,226,.35);
  background:#fff;
  color:var(--primary-dark);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  white-space:nowrap;
}
.apps-banner-action:hover{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
}
.apps-banner-dots{
  position:absolute;
  left:26px;
  bottom:12px;
  display:flex;
  gap:5px;
}
.apps-banner-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(74,144,226,.28);
  cursor:pointer;
  transition:.2s;
  border:none;
  padding:0;
}
.apps-banner-dot.active{
  width:20px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
}
.apps-banner-close{
  position:absolute;
  top:10px;
  right:10px;
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid rgba(74,144,226,.32);
  background:rgba(255,255,255,.85);
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
  backdrop-filter:blur(4px);
}
.apps-banner-close svg{width:12px;height:12px;}
.apps-banner-close:hover{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
@media (max-width:640px){
  .apps-banner-slide{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 46px 20px 20px;}
  .apps-banner-action{align-self:flex-start;}
}

/* ---------- 分类胶囊 ---------- */
.apps-cats-wrap{margin-bottom:24px;}
.apps-cats{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 10px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.apps-cats::-webkit-scrollbar{display:none;}
.apps-cat{
  flex:0 0 auto;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-softer);
  color:#7a5a20;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:.16s;
  font-family:inherit;
  white-space:nowrap;
}
.apps-cat:hover{
  border-color:var(--primary);
  background:var(--bg-soft);
}
.apps-cat.active{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(74,144,226,.55);
}
.apps-cat .apps-cat-count{
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  font-weight:800;
  opacity:.7;
}

/* ---------- Section 标题 ---------- */
.apps-section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 12px;
  font-size:16px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.5px;
  flex-wrap:wrap;
}
.apps-section-head::before{
  content:"";
  display:inline-block;
  width:5px;
  height:18px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--primary),var(--primary));
  margin-right:-4px;
}
.apps-section-hint{
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.2px;
}

/* ---------- 常用区 ---------- */
.apps-favs-wrap{margin-bottom:28px;}
.apps-favs-scroll{
  overflow-x:auto;
  scrollbar-width:thin;
  margin:0 -2px;
  padding:2px;
}
.apps-favs-scroll::-webkit-scrollbar{height:6px;}
.apps-favs-scroll::-webkit-scrollbar-thumb{
  background:rgba(74,144,226,.28);
  border-radius:3px;
}
.apps-favs{
  display:flex;
  gap:10px;
  padding-bottom:6px;
}
.apps-fav-card{
  flex:0 0 auto;
  width:104px;
  padding:14px 8px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.16s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  position:relative;
  text-align:center;
}
.apps-fav-card:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -12px rgba(74,144,226,.35);
}
.apps-fav-card .apps-fav-icon{
  width:38px;height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffe9a8,#fff4cc);
  color:var(--primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.16s;
}
.apps-fav-card:hover .apps-fav-icon{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  box-shadow:0 6px 14px -6px rgba(74,144,226,.55);
}
.apps-fav-icon svg{width:19px;height:19px;}
.apps-fav-name{
  font-size:12.5px;
  font-weight:800;
  color:var(--text);
  line-height:1.35;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.apps-favs-empty{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  padding:26px 20px;
  border:1px dashed rgba(74,144,226,.35);
  border-radius:14px;
  background:var(--bg-softer);
  margin:0;
}

/* ---------- 全部工具分组 ---------- */
.apps-all-wrap{display:block;}
.apps-group{margin-bottom:30px;}
.apps-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  font-size:16px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.5px;
  flex-wrap:wrap;
}
.apps-group-head-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.apps-group-head-left::before{
  content:"";
  display:inline-block;
  width:5px;
  height:18px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--primary),var(--primary));
}
.apps-group-count{
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  padding:2px 9px;
  border-radius:999px;
  background:var(--bg-soft);
}
.apps-group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}
@media (max-width:640px){
  .apps-group-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}

/* ---------- 中卡 ---------- */
.apps-card{
  position:relative;
  padding:16px 42px 16px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.16s;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:118px;
}
.apps-card::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary));
  opacity:0;
  transition:.2s;
}
.apps-card:hover{
  border-color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(74,144,226,.4);
}
.apps-card:hover::before{opacity:1;}
.apps-card-icon{
  width:38px;height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffe9a8,#fff4cc);
  color:var(--primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  transition:.16s;
}
.apps-card:hover .apps-card-icon{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
  box-shadow:0 6px 14px -6px rgba(74,144,226,.55);
}
.apps-card-icon svg{width:20px;height:20px;}
.apps-card-name{
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  margin:0;
  line-height:1.3;
  letter-spacing:.2px;
}
.apps-card-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.apps-card-tags{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:auto;
}
.apps-card-tag{
  font-size:10px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:.4px;
}
.apps-card-tag.new{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  color:#3a2a00;
}
.apps-card-tag.ai{
  background:#e8eff5;
  color:#3f5a6b;
}
.apps-card-fav{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid rgba(74,144,226,.3);
  background:rgba(255,253,245,.95);
  color:#c9b88a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.16s;
  font-size:14px;
  line-height:1;
}
.apps-card-fav:hover{
  border-color:var(--primary);
  color:var(--primary-dark);
  transform:scale(1.08);
}
.apps-card-fav.on{
  background:linear-gradient(135deg,var(--primary),var(--primary));
  border-color:transparent;
  color:#3a2a00;
  box-shadow:0 4px 10px -4px rgba(74,144,226,.55);
}
.apps-card-fav svg{width:14px;height:14px;}

/* ---------- 搜索结果计数 ---------- */
.apps-result-hint{
  font-size:13px;
  color:var(--muted);
  margin:0 0 14px;
  padding-left:4px;
}
.apps-result-hint b{color:var(--primary-dark);font-weight:800;}

/* ---------- 空状态 ---------- */
#appsNoResult{
  padding:60px 20px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .apps-search-wrap{top:56px;padding:10px 0;}
  .apps-search-wrap input{font-size:14px;padding:11px 42px;}
  .apps-banner-slide{padding:16px 44px 18px 18px;}
  .apps-banner-title{font-size:14.5px;}
  .apps-banner-desc{font-size:12.5px;}
  .apps-fav-card{width:92px;padding:12px 6px;}
  .apps-fav-icon{width:34px;height:34px;}
  .apps-fav-name{font-size:11.5px;}
  .apps-card{padding:14px 38px 14px 14px;min-height:108px;}
  .apps-card-name{font-size:13.5px;}
  .apps-card-desc{font-size:11.5px;}
}

/* ============================================================
   首页 · V4.1 活力版（推广 / 专题 / 最新 / 卖点）
   ============================================================ */


.hp{ width: 100%; padding-bottom: 0; }

/* ==================== Hero ==================== */
.hp-hero{
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  background:
    radial-gradient(900px 420px at 88% 8%, rgba(255,233,168,.55), transparent 68%),
    radial-gradient(700px 380px at 4% 96%, rgba(255,255,255,.28), transparent 68%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary) 48%, var(--primary-dark) 100%);
  color: #3a2a00;
}
.hp-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 78%);
  pointer-events: none;
}
.hp-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 62px 28px 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}
.hp-hero-main{ min-width: 0; }

.hp-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.55);
  color: #7a4c00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hp-badge svg{ width: 13px; height: 13px; }

.hp-hero h1{
  margin: 18px 0 12px;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.15;
  color: #3a2a00;
  text-shadow: 0 2px 12px rgba(255,255,255,.35);
}
.hp-sub{
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #5a3d00;
  letter-spacing: 1px;
  line-height: 1.7;
}

/* 搜索 */
.hp-search{
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 580px;
  margin-top: 28px;
  padding: 7px 7px 7px 18px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 16px 36px -18px rgba(90,60,0,.55), 0 2px 6px rgba(90,60,0,.08);
  transition: .2s;
}
.hp-search:focus-within{
  box-shadow: 0 20px 44px -18px rgba(90,60,0,.6), 0 0 0 4px rgba(255,255,255,.55);
}
.hp-search-icon{
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--primary-dark);
}
.hp-search input{
  flex: 1; min-width: 0;
  border: none; outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #3a2a00;
  padding: 10px 0;
}
.hp-search input::placeholder{ color: #b8a882; }
.hp-search input::-webkit-search-cancel-button{ display: none; }

.hp-search-go{
  flex: 0 0 auto;
  border: none; cursor: pointer;
  font-family: inherit;
  font-size: 14px; font-weight: 800;
  letter-spacing: 1px;
  color: #3a2a00;
  padding: 11px 24px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  transition: .16s;
}
.hp-search-go:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(74,144,226,.75);
  transform: translateY(-1px);
}

/* 快捷胶囊 */
.hp-quick{
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px;
  margin-top: 24px;
}
.hp-quick-label{
  font-size: 11.5px; font-weight: 800;
  color: #8a6414; letter-spacing: 3px;
  margin-right: 2px;
}
.hp-chip{
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.32);
  color: #6b4400;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer; transition: .16s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hp-chip:hover{
  background: #fff;
  color: var(--primary-dark);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(90,60,0,.6);
}

/* 右侧数字 */
.hp-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(122px, 1fr));
  gap: 14px;
  flex: 0 0 auto;
}
.hp-stat{
  padding: 18px 20px; text-align: center;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 10px 26px -16px rgba(90,60,0,.5);
  transition: .18s;
}
.hp-stat:hover{
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 16px 30px -16px rgba(90,60,0,.5);
}
.hp-stat b{
  display: block;
  font-size: 28px; font-weight: 900;
  line-height: 1.1; color: var(--primary-dark);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.hp-stat span{
  display: block; margin-top: 7px;
  font-size: 11.5px; font-weight: 700;
  color: #8a7340; letter-spacing: 2px;
}

/* ==================== 通用区块 ==================== */
.hp-sec{
  max-width: 1240px;
  margin: 0 auto 44px;
  padding: 0 28px;
}
.hp-sec-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hp-sec-head h2{
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #3a2a00;
}
.hp-sec-head h2::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}
.hp-sec-sub{
  font-size: 12.5px; font-weight: 700;
  color: #a89260; letter-spacing: 1px;
}
.hp-more{
  border: 1px solid #f0e0b0;
  background: #fff; color: var(--primary-dark);
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer; transition: .16s;
}
.hp-more:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(74,144,226,.65);
  transform: translateY(-1px);
}

/* ==================== 推广轮播 ==================== */
.hp-promo{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0e0b0;
  box-shadow: 0 18px 40px -24px rgba(74,144,226,.4);
  min-height: 210px;
}
.hp-promo-track{
  display: flex;
  transition: transform .55s cubic-bezier(.3,.9,.3,1);
}
.hp-promo-slide{
  flex: 0 0 100%;
  padding: 38px 160px 38px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  min-height: 210px;
  position: relative;
  overflow: hidden;
}
.hp-promo-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 4% 100%, rgba(255,255,255,.3), transparent 45%);
  pointer-events: none;
}

.hp-promo-slide.slide-study{
  background: linear-gradient(120deg, var(--bg-soft) 0%, #fff4cc 55%, #ffe9a8 100%);
}
.hp-promo-slide.slide-health{
  background: linear-gradient(120deg, #e8f4ec 0%, #d6ecdc 55%, #c4e0cc 100%);
}
.hp-promo-slide.slide-create{
  background: linear-gradient(120deg, #f0ecfa 0%, #e6e0f5 55%, #d9d1ee 100%);
}
.hp-promo-slide.slide-utility{
  background: linear-gradient(120deg, #fff0e2 0%, #ffe6cf 55%, #ffd8b8 100%);
}

.hp-promo-body{
  flex: 1; min-width: 0;
  position: relative; z-index: 1;
}
.hp-promo-tag{
  display: inline-block;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(58,42,0,.1);
  color: #6b4400;
  margin-bottom: 12px;
}
.hp-promo-slide h3{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #3a2a00;
  line-height: 1.3;
}
.hp-promo-slide p{
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5a4a20;
  max-width: 640px;
}
.hp-promo-btn{
  border: 1px solid rgba(58,42,0,.2);
  background: rgba(255,255,255,.85);
  color: #6b4400;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer; transition: .16s;
}
.hp-promo-btn:hover{
  background: #3a2a00;
  color: #ffe9a8;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(58,42,0,.6);
}

/* 插画 */
.hp-promo-illo{
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px; height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
  pointer-events: none;
  z-index: 1;
}
.hp-promo-illo svg{ width: 100%; height: 100%; display: block; }

.hp-promo-illo.illo-study   { color: var(--primary-dark); opacity: .28; }
.hp-promo-illo.illo-health  { color: #3f6b52; opacity: .35; }
.hp-promo-illo.illo-create  { color: #6d5a8c; opacity: .32; }
.hp-promo-illo.illo-utility { color: #b45309; opacity: .32; }

/* 箭头 */
.hp-promo-arrow{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(58,42,0,.15);
  background: rgba(255,255,255,.85);
  color: #6b4400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: .16s;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hp-promo-arrow svg{ width: 16px; height: 16px; }
.hp-promo-arrow:hover{
  background: #3a2a00;
  color: #ffe9a8;
  border-color: transparent;
  transform: translateY(-50%) scale(1.06);
}
.hp-promo-arrow.prev{ left: 14px; }
.hp-promo-arrow.next{ right: 14px; }

/* 圆点 */
.hp-promo-dots{
  position: absolute;
  left: 40px; bottom: 16px;
  display: flex; gap: 6px;
  z-index: 3;
}
.hp-promo-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(58,42,0,.22);
  border: none; padding: 0;
  cursor: pointer;
  transition: .22s;
}
.hp-promo-dot.active{
  width: 24px;
  border-radius: 4px;
  background: var(--primary-dark);
}

/* ==================== 分类 ==================== */
.hp-cats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}
.hp-cat{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 16px;
  border-radius: 16px;
  border: 1px solid #f0e0b0;
  background: #fff;
  cursor: pointer; text-align: left;
  font-family: inherit;
  overflow: hidden;
  transition: .22s cubic-bezier(.2,.9,.3,1.1);
}
.hp-cat::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,213,79,.22), rgba(74,144,226,.06));
  opacity: 0; transition: .22s;
}
.hp-cat:hover{
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(74,144,226,.5);
}
.hp-cat:hover::before{ opacity: 1; }
.hp-cat-icon{
  position: relative; z-index: 1;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.65);
  transition: .22s;
}
.hp-cat-icon svg{ width: 21px; height: 21px; }
.hp-cat:hover .hp-cat-icon{ transform: scale(1.08) rotate(-5deg); }
.hp-cat-body{ position: relative; z-index: 1; flex: 1; min-width: 0; }
.hp-cat-body b{
  display: block;
  font-size: 14.5px; font-weight: 800;
  color: #3a2a00; letter-spacing: .5px;
  margin-bottom: 4px;
}
.hp-cat-body em{
  font-style: normal;
  font-size: 11.5px; font-weight: 700;
  color: #a89260; letter-spacing: 1px;
}
.hp-cat-arrow{
  position: relative; z-index: 1;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: #d3c090;
  transition: .22s;
}
.hp-cat-arrow svg{ width: 16px; height: 16px; display: block; }
.hp-cat:hover .hp-cat-arrow{ color: var(--primary-dark); transform: translateX(4px); }

/* ==================== 热门工具 ==================== */
.hp-tools{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 14px;
}
.hp-tool{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #f0e0b0;
  background: #fff;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: .2s;
}
.hp-tool:hover{
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(74,144,226,.5);
}
.hp-tool-icon{
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--primary-dark);
  transition: .2s;
}
.hp-tool-icon svg{ width: 20px; height: 20px; }
.hp-tool:hover .hp-tool-icon{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.65);
}
.hp-tool-body{ flex: 1; min-width: 0; }
.hp-tool-body b{
  display: block;
  font-size: 14.5px; font-weight: 800;
  color: #3a2a00; letter-spacing: .3px;
  margin-bottom: 5px;
}
.hp-tool-body em{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8a7340;
}
.hp-tool-hot{
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9.5px; font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #ff8f00, #dc2626);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(220,38,38,.6);
}

/* ==================== 最新上架 ==================== */
.hp-new{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.hp-new-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 18px 18px;
  border-radius: 14px;
  border: 1px solid #f0e0b0;
  background: linear-gradient(160deg, #fff 0%, var(--bg-base) 100%);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: .2s;
  overflow: hidden;
}
.hp-new-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.hp-new-card:hover{
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(74,144,226,.5);
}
.hp-new-badge{
  position: absolute;
  top: 12px; right: 12px;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #ff8f00, #b45309);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(180,83,9,.6);
}
.hp-new-icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--primary-dark);
  transition: .2s;
}
.hp-new-icon svg{ width: 21px; height: 21px; }
.hp-new-card:hover .hp-new-icon{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.65);
}
.hp-new-card b{
  font-size: 14.5px;
  font-weight: 800;
  color: #3a2a00;
  letter-spacing: .3px;
}
.hp-new-card em{
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.65;
  color: #8a7340;
}

/* ==================== 专题推荐 ==================== */
.hp-topics{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.hp-topic{
  position: relative;
  border-radius: 16px;
  border: 1px solid #f0e0b0;
  background: #fff;
  padding: 20px 20px 18px;
  overflow: hidden;
  transition: .2s;
}
.hp-topic::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hp-topic.topic-study::before   { background: radial-gradient(circle at 100% 0%, rgba(255,213,79,.22), transparent 55%); }
.hp-topic.topic-life::before    { background: radial-gradient(circle at 100% 0%, rgba(143,181,154,.25), transparent 55%); }
.hp-topic.topic-create::before  { background: radial-gradient(circle at 100% 0%, rgba(166,155,191,.24), transparent 55%); }
.hp-topic.topic-utility::before { background: radial-gradient(circle at 100% 0%, rgba(255,143,0,.20), transparent 55%); }

.hp-topic:hover{
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(74,144,226,.5);
}
.hp-topic-head{
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hp-topic-icon{
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--primary-dark);
  transition: .2s;
}
.hp-topic-icon svg{ width: 22px; height: 22px; }
.hp-topic.topic-life .hp-topic-icon    { background: #ecf5ef; color: #3f6b52; }
.hp-topic.topic-create .hp-topic-icon  { background: #f0ecfa; color: #6d5a8c; }
.hp-topic.topic-utility .hp-topic-icon { background: #fff0e2; color: #b45309; }

.hp-topic-head b{
  display: block;
  font-size: 15.5px;
  font-weight: 900;
  color: #3a2a00;
  letter-spacing: .5px;
  margin-bottom: 3px;
}
.hp-topic-head em{
  font-style: normal;
  font-size: 12px;
  color: #a89260;
  font-weight: 600;
}
.hp-topic-tools{
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hp-topic-tools button{
  border: 1px solid #f0e0b0;
  background: #fff;
  color: #6b4400;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
}
.hp-topic-tools button:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(74,144,226,.65);
}

/* ==================== 为什么选择 ==================== */
.hp-why{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.hp-why-card{
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--bg-base) 0%, var(--bg-soft) 100%);
  border: 1px solid #f0e0b0;
  transition: .2s;
}
.hp-why-card:hover{
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(74,144,226,.5);
}
.hp-why-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.65);
}
.hp-why-icon svg{ width: 22px; height: 22px; }
.hp-why-card b{
  display: block;
  font-size: 15.5px;
  font-weight: 900;
  color: #3a2a00;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.hp-why-card p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #7a5a20;
}

/* ==================== 编者的话 ==================== */
.hp-note{
  border: 1px solid #f0e0b0;
  border-radius: 16px;
  background: var(--bg-base);
  overflow: hidden;
  transition: .2s;
}
.hp-note[open]{
  border-color: var(--primary);
  box-shadow: 0 14px 34px -22px rgba(74,144,226,.5);
}
.hp-note summary{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: linear-gradient(135deg, var(--bg-base), #fff4cc);
  transition: .18s;
}
.hp-note summary::-webkit-details-marker{ display: none; }
.hp-note[open] summary{
  border-bottom: 1px solid #f0e0b0;
  background: linear-gradient(135deg, #fff4cc, #ffe9a8);
}
.hp-note-title{
  flex: 1;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
}
.hp-note-hint{
  font-size: 12px;
  font-weight: 600;
  color: #a89260;
}
.hp-note-arrow{
  width: 18px; height: 18px;
  color: var(--primary-dark);
  transition: transform .25s ease;
  flex: 0 0 auto;
}
.hp-note[open] .hp-note-arrow{ transform: rotate(180deg); }

.hp-note-body{
  padding: 22px 24px 20px;
  background: #fff;
}
.hp-note-body p{
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: .3px;
  color: #3a2a00;
  text-indent: 2em;
}
.hp-note-body p:last-of-type{ margin-bottom: 20px; }

.hp-note-warn{
  padding: 12px 16px !important;
  border-radius: 10px;
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  color: #7f1d1d !important;
  text-indent: 0 !important;
  font-weight: 600;
}
.hp-note-warn b{ color: #b91c1c; font-weight: 800; }

.hp-note-sign{
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px dashed rgba(74,144,226,.35);
  font-size: 13px;
  font-weight: 700;
  color: #8a7340;
  letter-spacing: .5px;
}
.hp-note-sign span:last-child{ color: var(--primary-dark); }

/* ==================== 页脚 ==================== */
.hp-footer{
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 28px 56px;
  text-align: center;
  border-top: 1px solid #f0e0b0;
}
.hp-footer-logo{
  font-size: 26px;
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 5px;
  margin-bottom: 10px;
}
.hp-footer-sub{
  font-size: 12.5px;
  color: #a89260;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.hp-footer-links{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hp-footer-links button{
  border: 1px solid #f0e0b0;
  background: #fff;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
}
.hp-footer-links button:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(74,144,226,.6);
  transform: translateY(-1px);
}
.hp-footer-contact{
  font-size: 13px;
  color: #8a7340;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.hp-footer-slogan{
  font-size: 12.5px;
  font-weight: 700;
  color: #a89260;
  letter-spacing: 3px;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1000px){
  .hp-hero-inner{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 46px 24px 52px;
  }
  .hp-stats{
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }
  .hp-hero h1{ font-size: 38px; letter-spacing: 2px; }
  .hp-promo-slide{ padding: 32px 130px 32px 32px; }
  .hp-promo-illo{ width: 90px; height: 90px; right: 26px; }
}

@media (max-width: 720px){
  .hp-hero{ margin-bottom: 30px; }
  .hp-hero-inner{ padding: 36px 20px 42px; gap: 26px; }
  .hp-hero h1{ font-size: 30px; letter-spacing: 1px; }
  .hp-sub{ font-size: 13.5px; letter-spacing: .3px; }

  .hp-search{ padding: 6px 6px 6px 14px; border-radius: 13px; }
  .hp-search input{ font-size: 14px; padding: 9px 0; }
  .hp-search-go{ padding: 10px 18px; font-size: 13px; }

  .hp-quick{ margin-top: 18px; }
  .hp-chip{ font-size: 12.5px; padding: 6px 12px; }

  .hp-stats{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hp-stat{ padding: 14px 12px; }
  .hp-stat b{ font-size: 22px; }
  .hp-stat span{ font-size: 11px; letter-spacing: 1.5px; margin-top: 5px; }

  .hp-sec{ padding: 0 20px; margin-bottom: 34px; }
  .hp-sec-head h2{ font-size: 18px; }
  .hp-sec-sub{ font-size: 11.5px; }

  /* 推广轮播：内容区全宽，插画缩小放右上 */
  .hp-promo{ min-height: auto; border-radius: 16px; }
  .hp-promo-slide{
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px 26px;
    gap: 14px;
    min-height: auto;
  }
  .hp-promo-slide h3{ font-size: 18px; letter-spacing: 1px; }
  .hp-promo-slide p{ font-size: 13px; line-height: 1.8; margin-bottom: 14px; }
  .hp-promo-illo{
    position: absolute;
    right: 16px; top: 16px;
    transform: none;
    width: 56px; height: 56px;
  }
  .hp-promo-arrow{ width: 30px; height: 30px; }
  .hp-promo-arrow svg{ width: 14px; height: 14px; }
  .hp-promo-dots{ left: 22px; bottom: 12px; }

  .hp-cats{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hp-cat{ padding: 13px 12px; gap: 10px; border-radius: 14px; }
  .hp-cat-icon{ width: 38px; height: 38px; border-radius: 10px; }
  .hp-cat-icon svg{ width: 18px; height: 18px; }
  .hp-cat-body b{ font-size: 13px; letter-spacing: .2px; }
  .hp-cat-body em{ font-size: 10.5px; letter-spacing: .5px; }
  .hp-cat-arrow{ display: none; }

  .hp-tools{ grid-template-columns: 1fr; gap: 10px; }
  .hp-tool{ padding: 14px 15px; }
  .hp-tool-icon{ width: 36px; height: 36px; border-radius: 10px; }
  .hp-tool-icon svg{ width: 18px; height: 18px; }
  .hp-tool-body b{ font-size: 13.5px; }
  .hp-tool-body em{ font-size: 12px; }

  .hp-new{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hp-new-card{ padding: 16px 14px 14px; }
  .hp-new-icon{ width: 36px; height: 36px; border-radius: 10px; }
  .hp-new-icon svg{ width: 18px; height: 18px; }
  .hp-new-card b{ font-size: 13.5px; }
  .hp-new-card em{ font-size: 11.5px; }

  .hp-topics{ grid-template-columns: 1fr; gap: 10px; }
  .hp-topic{ padding: 16px 16px 14px; }
  .hp-topic-icon{ width: 38px; height: 38px; border-radius: 10px; }
  .hp-topic-icon svg{ width: 19px; height: 19px; }
  .hp-topic-head b{ font-size: 14.5px; }
  .hp-topic-tools button{ font-size: 12px; padding: 5px 11px; }

  .hp-why{ grid-template-columns: 1fr; gap: 10px; }
  .hp-why-card{ padding: 18px 18px 16px; }
  .hp-why-icon{ width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; }
  .hp-why-icon svg{ width: 19px; height: 19px; }
  .hp-why-card b{ font-size: 14.5px; }
  .hp-why-card p{ font-size: 12.5px; line-height: 1.75; }

  .hp-note-body{ padding: 18px 16px; }
  .hp-note-body p{ font-size: 13.5px; line-height: 1.9; }
  .hp-note summary{ padding: 14px 16px; }
  .hp-note-title{ font-size: 13.5px; }
  .hp-note-hint{ display: none; }

  .hp-footer{ padding: 34px 20px 42px; }
  .hp-footer-logo{ font-size: 22px; letter-spacing: 3px; }
  .hp-footer-slogan{ letter-spacing: 2px; }
}

@media (max-width: 380px){
  .hp-cats{ grid-template-columns: 1fr; }
  .hp-new{ grid-template-columns: 1fr; }
}

/* 顶部搜索框 · 热门搜索下拉 */
.search-wrap{ position: relative; }

.search-hot{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #f0e0b0;
  border-radius: 14px;
  box-shadow: 0 20px 44px -20px rgba(74,144,226,.42);
  padding: 14px 16px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  z-index: 200;
}
.search-wrap:focus-within .search-hot{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.search-hot-head{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.search-hot-head svg{
  width: 14px;
  height: 14px;
  color: var(--primary);
}
.search-hot-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-hot-tags button{
  border: 1px solid #f0e0b0;
  background: var(--bg-softer);
  color: #6b4400;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.search-hot-tags button:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.55);
}

/* Hero 精选工具条 */
.hp-picks{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 720px;
}
.hp-pick{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.42);
  cursor: pointer;
  font-family: inherit;
  transition: .18s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}
.hp-pick:hover{
  background: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -14px rgba(90,60,0,.55);
}
.hp-pick-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(74,144,226,.7);
  transition: .18s;
}
.hp-pick-icon svg{ width: 17px; height: 17px; }
.hp-pick:hover .hp-pick-icon{ transform: scale(1.08) rotate(-5deg); }
.hp-pick b{
  font-size: 12.5px;
  font-weight: 800;
  color: #3a2a00;
  letter-spacing: .3px;
  line-height: 1.2;
}
.hp-pick em{
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: #7a5a20;
  letter-spacing: .2px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1000px){
  .hp-picks{ grid-template-columns: repeat(3, 1fr); max-width: none; }
}
@media (max-width: 720px){
  .hp-picks{ grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .hp-pick{ padding: 11px 6px 9px; border-radius: 12px; }
  .hp-pick-icon{ width: 30px; height: 30px; border-radius: 9px; }
  .hp-pick-icon svg{ width: 15px; height: 15px; }
  .hp-pick b{ font-size: 11.5px; }
  .hp-pick em{ display: none; }
}
@media (max-width: 380px){
  .hp-picks{ grid-template-columns: repeat(2, 1fr); }
}

.search-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid #f0e0b0;
  background: var(--bg-softer);
  color: #6b4400;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: .16s;
}
.search-btn svg{ width: 15px; height: 15px; }
.search-btn:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.55);
  transform: translateY(-1px);
}

/* ============================================================
   搜索页面
   ============================================================ */
.sp{
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 0 40px;
}

/* ---------- 搜索条 ---------- */
.sp-bar{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.sp-bar-inner{
  position: relative;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  padding: 7px 8px 7px 18px;
  border-radius: 14px;
  border: 1px solid #f0e0b0;
  background: #fff;
  transition: .16s;
  box-shadow: 0 4px 16px -10px rgba(74,144,226,.28);
}
.sp-bar-inner:focus-within{
  border-color: var(--primary);
  box-shadow: 0 10px 24px -10px rgba(74,144,226,.4), 0 0 0 4px rgba(74,144,226,.14);
}
.sp-bar-icon{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--primary-dark);
  margin-right: 10px;
}
.sp-bar-inner input{
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #3a2a00;
  padding: 9px 0;
}
.sp-bar-inner input::placeholder{ color: #b8a882; }
.sp-bar-inner input::-webkit-search-cancel-button{ display: none; }

.sp-bar-clear{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(138,115,64,.16);
  color: #8a7340;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 8px;
  transition: .16s;
}
.sp-bar-clear:hover{ background: var(--primary); color: #fff; }
.sp-bar-clear[hidden]{ display: none; }
.sp-bar-clear svg{ width: 12px; height: 12px; }

/* 模式切换 */
.sp-bar-modes{
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid #f0e0b0;
  flex: 0 0 auto;
}
.sp-mode{
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #8a7340;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
  white-space: nowrap;
}
.sp-mode:hover:not(.active){ background: #fff; color: var(--primary-dark); }
.sp-mode.active{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  box-shadow: 0 4px 10px -4px rgba(74,144,226,.55);
}

/* ---------- 热门搜索 ---------- */
.sp-hot{
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--bg-base), var(--bg-soft));
  border: 1px solid #f0e0b0;
  margin-bottom: 26px;
}
.sp-hot-title{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.sp-hot-title svg{ width: 14px; height: 14px; color: var(--primary); }
.sp-hot-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-hot-tags button{
  border: 1px solid #f0e0b0;
  background: #fff;
  color: #6b4400;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.sp-hot-tags button:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #3a2a00;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.55);
}

/* ---------- 结果头 ---------- */
.sp-result-head{
  margin-bottom: 14px;
  font-size: 13px;
  color: #8a7340;
  font-weight: 600;
  padding-left: 4px;
}
.sp-result-head b{
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 14px;
}

/* ---------- 结果列表 ---------- */
.sp-results{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-result{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #f0e0b0;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: .16s;
}
.sp-result:hover{
  border-color: var(--primary);
  transform: translateX(2px);
  box-shadow: 0 12px 26px -18px rgba(74,144,226,.5);
}
.sp-result-icon{
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--primary-dark);
  transition: .16s;
}
.sp-result-icon svg{ width: 20px; height: 20px; }
.sp-result:hover .sp-result-icon{
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.6);
}
.sp-result-body{ flex: 1; min-width: 0; }
.sp-result-name{
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #3a2a00;
  letter-spacing: .3px;
  margin-bottom: 4px;
  line-height: 1.35;
}
.sp-result-name mark{
  background: rgba(74,144,226,.35);
  color: var(--primary-dark);
  border-radius: 3px;
  padding: 0 3px;
}
.sp-result-desc{
  display: block;
  font-size: 12.5px;
  color: #8a7340;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-result-arrow{
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: #d3c090;
  transition: .16s;
}
.sp-result-arrow svg{ width: 16px; height: 16px; display: block; }
.sp-result:hover .sp-result-arrow{
  color: var(--primary-dark);
  transform: translateX(3px);
}

/* ---------- 空状态 ---------- */
.sp-empty{
  text-align: center;
  padding: 60px 20px 40px;
  color: #a89260;
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
}
.sp-empty span{
  display: block;
  font-size: 44px;
  margin-bottom: 12px;
  opacity: .55;
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px){
  .sp{ padding: 4px 0 32px; }
  .sp-bar{ gap: 10px; }
  .sp-bar-inner{ padding: 6px 6px 6px 14px; border-radius: 12px; }
  .sp-bar-inner input{ font-size: 14px; padding: 8px 0; }
  .sp-bar-modes{ width: 100%; }
  .sp-mode{ flex: 1; padding: 8px 12px; font-size: 12.5px; }
  .sp-hot{ padding: 16px 16px; border-radius: 14px; }
  .sp-hot-tags button{ font-size: 12.5px; padding: 6px 12px; }
  .sp-result{ padding: 12px 14px; gap: 12px; }
  .sp-result-icon{ width: 38px; height: 38px; border-radius: 10px; }
  .sp-result-icon svg{ width: 18px; height: 18px; }
  .sp-result-name{ font-size: 14px; }
  .sp-result-desc{ font-size: 12px; }
}

/* 搜索页 · 空状态居中 / 有内容靠顶 */
.sp{
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 160px);
  transition: justify-content .35s ease;
}

/* 空状态：搜索框 + 热门搜索整体垂直居中 */
.sp.sp-idle{
  justify-content: center;
  padding-top: 0;
  padding-bottom: 80px;   /* 稍微往上抬一点，视觉更平衡 */
}
.sp.sp-idle .sp-hot{
  margin-bottom: 0;       /* 居中时不需要底部间距 */
}

.sp-bar,
.sp-hot{
  transition: margin .35s ease, opacity .25s ease;
}

.theme-toggle{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(74,144,226,.28);
  background:rgba(245,249,252,.9);
  color:#2c5f8a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.18s;
}
.theme-toggle:hover{
  background:var(--primary-soft);
  border-color:var(--primary);
  transform:translateY(-1px);
  box-shadow:0 4px 10px -4px rgba(74,144,226,.5);
}
.theme-toggle svg{width:16px;height:16px;display:block;}
.theme-toggle .icon-moon{display:none;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
html[data-theme="dark"] .theme-toggle{
  border-color:rgba(123,184,232,.28);
  background:rgba(26,46,66,.9);
  color:#d4e8f7;
}

/* ================= 修复通知面板 ================= */
.notif-panel {
  position: fixed;
  top: 70px;         /* 在顶栏下方 */
  right: 20px;
  width: 360px;
  max-height: 80vh;
  z-index: 200;
  display: none;     /* 默认隐藏，点击铃铛才显示 */
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
}

.notif-panel.show {
  display: flex;     /* 当 JS 加上 .show 类时显示 */
}

/* 限制面板头部图标的大小 */
.notif-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-head-left svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* 面板内容的滚动控制 */
.notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 50vh;
}

/* ===== 修复「编者的话」排版 ===== */
.notice-body {
  padding: 22px 24px 20px;
  background: var(--bg-card);
}

.notice-body p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: .3px;
  color: var(--text-primary);
  text-indent: 2em; /* 首行缩进两字符 */
}

.notice-body p:last-of-type {
  margin-bottom: 20px;
}

.notice-sign {
  display: flex;
  justify-content: flex-end; /* 签名右对齐 */
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px dashed var(--border-base);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .5px;
}

.notice-sign p:last-child {
  color: var(--primary-dark);
}

/* ============================================================
   20. 密码生成器 · V5.0 补全样式
   ============================================================ */

/* 密码显示区：改为 Flex 布局，垂直居中 */
.pwd-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-softer), var(--bg-soft));
  border: 1px solid var(--border-base);
}
.pwd-text {
  font-family: Consolas, Menlo, monospace;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  word-break: break-all;
  flex: 1;
}
.pwd-copy {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: .16s;
}
.pwd-copy svg { width: 16px; height: 16px; }
.pwd-copy:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(74,144,226,.55);
}

/* 强度条：修复消失问题 */
.pwd-strength {
  margin-top: 12px;
}
.pwd-strength-bar {
  display: flex;
  gap: 4px;
  height: 6px;
  margin-bottom: 8px;
}
.pwd-strength-bar i {
  flex: 1;
  border-radius: 3px;
  background: var(--bg-soft);
  transition: .3s;
}
.pwd-strength-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

/* 根据强度等级改变进度条颜色 */
.pwd-strength[data-level="1"] .pwd-strength-bar i:nth-child(-n+1) { background: var(--danger); }
.pwd-strength[data-level="2"] .pwd-strength-bar i:nth-child(-n+2) { background: var(--warning); }
.pwd-strength[data-level="3"] .pwd-strength-bar i:nth-child(-n+3) { background: var(--success); }
.pwd-strength[data-level="4"] .pwd-strength-bar i:nth-child(-n+4) { background: var(--primary); }

/* 按钮操作区 */
.pwd-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* 参数行 */
.pwd-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.pwd-field input[type=range] {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}

/* 复选框区域：改为 Tag 标签风格 */
.pwd-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pwd-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: .15s;
}
.pwd-check:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
}
.pwd-check input[type=checkbox] {
  accent-color: var(--primary);
  cursor: pointer;
}

/* 底部数据区 */
.pwd-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.pwd-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 9px;
  background: var(--bg-softer);
  border: 1px solid var(--border-base);
}
.pwd-meta-item span { font-size: 12px; color: var(--text-muted); }
.pwd-meta-item b { font-size: 16px; color: var(--primary-dark); font-family: Consolas, Menlo, monospace; }

/* 移动端适配 */
@media (max-width: 640px) {
  .pwd-meta { grid-template-columns: 1fr; }
  .pwd-text { font-size: 16px; }
}