/* ============================================================
   calc.css —— 计算工具模块公共样式（calc 模块下所有工具共用）
   ------------------------------------------------------------
   用法：页面根节点使用 class="calc-page"；
        如需换配色，在 <style> 里覆盖下面任一变量即可。
   可用变量：
     --c1 / --c2       主色 / 深色（悬停）
     --grad1/2/3       Hero 渐变三段
     --ring            聚焦光晕
     --soft / --soft2  浅色底（输入框 / 悬停）
     --line / --line2  边框
     --ink / --ink2    次要 / 更浅文字
   ============================================================ */

.calc-page {
    --c1:    #0f766e;
    --c2:    #115e59;
    --grad1: #06302c;
    --grad2: #0f766e;
    --grad3: #14b8a6;
    --ring:  rgba(15, 118, 110, .14);
    --soft:  #f5fbfa;
    --soft2: #ecf7f5;
    --line:  #dcece9;
    --line2: #cbe3df;
    --ink:   #4b6b66;
    --ink2:  #86a49f;
}
html.dark-mode .calc-page,
html[data-theme="dark"] .calc-page {
    --soft:  #161e1d;
    --soft2: #1d2726;
    --line:  #263331;
    --line2: #33433f;
    --ink:   #a4bcb7;
    --ink2:  #7e9893;
}

/* Hero */
.calc-hero {
    margin: 0 0 16px;
    padding: 20px 22px;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--grad1) 0%, var(--grad2) 55%, var(--grad3) 130%);
}
.calc-hero h1 { margin: 0 0 6px; font-size: 1.35rem; }
.calc-hero p { margin: 0; font-size: .86rem; line-height: 1.65; opacity: .88; }

/* 卡片与分区 */
.calc-block {
    margin: 0 0 14px;
    padding: 16px 16px 12px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.calc-block > h2 {
    margin: 0 0 12px;
    font-size: .95rem;
    color: var(--ink);
    font-weight: 600;
}

/* 字段网格 */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.calc-field { display: block; margin: 0 0 10px; }
.calc-field > span { display: block; margin: 0 0 5px; font-size: .78rem; color: var(--ink2); }
.calc-input,
.calc-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    min-height: 38px;
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 8px;
}
html.dark-mode .calc-input,
html.dark-mode .calc-select,
html[data-theme="dark"] .calc-input,
html[data-theme="dark"] .calc-select { background: var(--soft2); color: #d6e6e2; }
.calc-input:focus,
.calc-select:focus {
    outline: none;
    border-color: var(--c1);
    box-shadow: 0 0 0 3px var(--ring);
}

/* 按钮 */
.calc-btn {
    display: inline-block;
    padding: 9px 16px;
    margin: 0 8px 8px 0;
    font: inherit;
    font-size: .88rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.calc-btn:hover { background: var(--soft2); border-color: var(--c1); }
.calc-btn:active { transform: translateY(1px); }
.calc-btn-primary { color: #fff; background: var(--c1); border-color: var(--c1); font-weight: 600; }
.calc-btn-primary:hover { background: var(--c2); border-color: var(--c2); }
html.dark-mode .calc-btn,
html[data-theme="dark"] .calc-btn { background: var(--soft2); color: #d6e6e2; }
html.dark-mode .calc-btn-primary,
html[data-theme="dark"] .calc-btn-primary { background: var(--c1); color: #fff; }

/* 结果区 */
.calc-out {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    margin: 10px 0 0;
    padding: 12px 14px;
    font: 13.5px/1.75 ui-monospace, Menlo, Consolas, monospace;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}
html.dark-mode .calc-out,
html[data-theme="dark"] .calc-out { background: var(--soft2); color: #d6e6e2; }

/* 夜间模式（.calc-page 作用域 + !important）：
   各工具页面里普遍写着 `.tl-page.xxx-page .calc-input, .calc-select { background:#fff }`，
   它的特异性(0,3,0)高于上面那条 html.dark-mode .calc-input(0,2,1)，会把夜间底压回白色；
   这里加上 .calc-page 作用域并用 !important，确保夜间模式下输入框 / 文本域 / 下拉 / 按钮都跟随深色。 */
html.dark-mode .calc-page .calc-input,
html.dark-mode .calc-page .calc-select,
html.dark-mode .calc-page .calc-out,
html[data-theme="dark"] .calc-page .calc-input,
html[data-theme="dark"] .calc-page .calc-select,
html[data-theme="dark"] .calc-page .calc-out {
    background: var(--soft2) !important;
    color: #d6e6e2 !important;
    border-color: var(--line2) !important;
}
html.dark-mode .calc-page .calc-input::placeholder,
html.dark-mode .calc-page .calc-out::placeholder,
html[data-theme="dark"] .calc-page .calc-input::placeholder,
html[data-theme="dark"] .calc-page .calc-out::placeholder { color: var(--ink2) !important; }
html.dark-mode .calc-page .calc-btn,
html[data-theme="dark"] .calc-page .calc-btn {
    background: var(--soft2) !important; color: #d6e6e2 !important; border-color: var(--line2) !important;
}
html.dark-mode .calc-page .calc-btn-primary,
html[data-theme="dark"] .calc-page .calc-btn-primary {
    background: var(--c1) !important; color: #fff !important; border-color: var(--c1) !important;
}
html.dark-mode .calc-page .calc-kv > div,
html[data-theme="dark"] .calc-page .calc-kv > div { background: var(--soft2) !important; border-color: var(--line) !important; }
html.dark-mode .calc-page .calc-tips { color: var(--ink2); }

/* 预览容器：不少工具把预览区写成行内 `background:#fff` 或写在类名上（如 .mmp-canvas / .cht-canvas
   / .hl-preview / .tok-tablewrap / #w2t-file），夜间模式下会整块刺眼。
   行内样式与工具自带的高特异性选择器都需要 !important 才能压过，这里按「id / 类名的后缀」统一接管。 */
html.dark-mode .calc-page [id$="-preview"],
html.dark-mode .calc-page [class$="-preview"],
html.dark-mode .calc-page [class*="-preview "],
html.dark-mode .calc-page [class$="-canvas"],
html.dark-mode .calc-page [class*="-canvas "],
html.dark-mode .calc-page [class$="-tablewrap"],
html.dark-mode .calc-page [class*="-tablewrap "],
html.dark-mode .calc-page [id$="-file"],
html[data-theme="dark"] .calc-page [id$="-preview"],
html[data-theme="dark"] .calc-page [class$="-preview"],
html[data-theme="dark"] .calc-page [class*="-preview "],
html[data-theme="dark"] .calc-page [class$="-canvas"],
html[data-theme="dark"] .calc-page [class*="-canvas "],
html[data-theme="dark"] .calc-page [class$="-tablewrap"],
html[data-theme="dark"] .calc-page [class*="-tablewrap "],
html[data-theme="dark"] .calc-page [id$="-file"] {
    background-color: var(--soft2) !important;
    color: #d6e6e2 !important;
    border-color: var(--line) !important;
}
/* 预览区里的空状态提示与统计文字：夜间用浅灰，避免深灰看不清 */
html.dark-mode .calc-page [class$="-empty"],
html.dark-mode .calc-page [class*="-empty "],
html[data-theme="dark"] .calc-page [class$="-empty"],
html[data-theme="dark"] .calc-page [class*="-empty "] { color: var(--ink2) !important; }

/* 键值展示（结果摘要） */
.calc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0 0; }
.calc-kv > div {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
}
html.dark-mode .calc-kv > div,
html[data-theme="dark"] .calc-kv > div { background: var(--soft2); }
.calc-kv b { display: block; font-size: 1.15rem; color: var(--c1); line-height: 1.35; word-break: break-all; }
.calc-kv span { font-size: .76rem; color: var(--ink2); }

/* 计算器键盘 */
.calc-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 0; }
.calc-key {
    padding: 14px 0;
    font: inherit;
    font-size: 1.02rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 10px;
    cursor: pointer;
}
.calc-key:hover { background: var(--soft2); }
.calc-key-op { color: var(--c1); font-weight: 600; }
.calc-key-eq { color: #fff; background: var(--c1); border-color: var(--c1); font-weight: 600; }
.calc-key-eq:hover { background: var(--c2); }
html.dark-mode .calc-key,
html[data-theme="dark"] .calc-key { background: var(--soft2); color: #d6e6e2; }
html.dark-mode .calc-key-eq,
html[data-theme="dark"] .calc-key-eq { background: var(--c1); color: #fff; }
.calc-display {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    text-align: right;
    font: 1.5rem/1.4 ui-monospace, Menlo, Consolas, monospace;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 10px;
}
html.dark-mode .calc-display,
html[data-theme="dark"] .calc-display { background: var(--soft2); color: #eaf4f1; }

/* 单位换算标签 */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.calc-tab {
    padding: 6px 12px;
    font: inherit;
    font-size: .82rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 999px;
    cursor: pointer;
}
.calc-tab.is-on { color: #fff; background: var(--c1); border-color: var(--c1); }
html.dark-mode .calc-tab,
html[data-theme="dark"] .calc-tab { background: var(--soft2); color: #d6e6e2; }

/* 说明 */
.calc-tips { margin: 0; padding-left: 18px; color: var(--ink2); font-size: .82rem; line-height: 1.85; }
.calc-mini { font-size: .78rem; color: var(--ink2); }

/* 结果表格（换算类工具） */
.calc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.calc-table th,
.calc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.calc-table th { width: 45%; font-weight: 500; color: var(--ink2); }
.calc-table tr:last-child th,
.calc-table tr:last-child td { border-bottom: 0; }
.calc-table tr:hover th,
.calc-table tr:hover td { background: var(--soft2); }

@media (max-width: 560px) {
    .calc-hero { padding: 16px; }
    .calc-hero h1 { font-size: 1.15rem; }
    .calc-pad { gap: 6px; }
    .calc-key { padding: 12px 0; font-size: .95rem; }
}