/* tools.css — 微波技术在线工具（微波课配色：青蓝 #38BDF8） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    background: linear-gradient(135deg, #0b1d2e 0%, #10304e 50%, #174a70 100%);
    color: #e6f0f5;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 14px;
}

/* ── 布局：左侧树 + 右侧内容 ───────────────────────────────── */
.app { display: flex; height: 100vh; }

.tree {
    width: 248px; flex-shrink: 0; overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 10px 24px;
    background: rgba(0, 0, 0, 0.12);
}
.tree .brand { font-size: 15px; font-weight: 500; letter-spacing: 0.5px; padding: 0 8px 4px; }
.tree .brand sub { display: block; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.45); margin-top: 3px; letter-spacing: 0; }
.tree .back { display: inline-block; margin: 10px 8px 14px; font-size: 12px; color: #a9def2; text-decoration: none; }
.tree .back:hover { color: #38BDF8; }

.grp { margin-bottom: 4px; }
.grp > .gt {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 8px 8px; border-radius: 8px; font-size: 12.5px; color: rgba(255,255,255,0.55);
    user-select: none;
}
.grp > .gt:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
.grp > .gt .arw { font-size: 10px; transition: transform 0.15s; }
.grp.open > .gt .arw { transform: rotate(90deg); }
.grp > .items { display: none; padding-left: 6px; }
.grp.open > .items { display: block; }

.titem {
    display: block; padding: 8px 10px; margin: 2px 0; border-radius: 8px;
    font-size: 13px; color: rgba(255,255,255,0.78); cursor: pointer;
    border: 1px solid transparent; text-decoration: none;
}
.titem:hover { background: rgba(255,255,255,0.07); }
.titem.active { background: rgba(56,189,248,0.16); border-color: #38BDF8; color: #fff; }

/* ── 内容区 ────────────────────────────────────────────────── */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { padding: 18px 26px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.topbar h1 { font-size: 18px; font-weight: 500; }
.topbar .desc { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 5px; line-height: 1.6; }
.topbar .desc code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 5px; color: #a9def2; font-size: 12px; }

.view { flex: 1; overflow-y: auto; padding: 18px 26px 40px; }

.modes { display: flex; gap: 6px; margin-bottom: 16px; }
.modes button {
    padding: 6px 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.16); background: transparent; color: rgba(255,255,255,0.7);
}
.modes button.on { background: rgba(56,189,248,0.18); border-color: #38BDF8; color: #fff; }

/* 三栏 */
.cols { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } }

.card {
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 16px;
}
.card > h3 { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); margin-bottom: 12px; }

.frow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.frow label { font-size: 13px; color: rgba(255,255,255,0.82); }
.frow .inp { display: flex; align-items: center; gap: 6px; }
.frow input {
    width: 88px; padding: 6px 8px; font-size: 13px; text-align: right;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px; color: #fff; font-family: inherit;
}
.frow input:focus { outline: none; border-color: #38BDF8; }
.frow .u { font-size: 12px; color: rgba(255,255,255,0.45); min-width: 26px; }
.frow select {
    padding: 6px 8px; font-size: 12.5px; background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; color: #fff; font-family: inherit;
}

.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.presets span {
    padding: 4px 10px; border-radius: 7px; font-size: 12px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.7);
}
.presets span:hover { background: rgba(56,189,248,0.14); border-color: #38BDF8; color: #fff; }

/* 结果卡 */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.metric { background: rgba(0,0,0,0.22); border-radius: 10px; padding: 11px 13px; }
.metric .lb { font-size: 12px; color: rgba(255,255,255,0.5); }
.metric .vl { font-size: 21px; font-weight: 500; margin-top: 3px; letter-spacing: 0.3px; }
.metric .vl small { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 400; margin-left: 3px; }
.metric.hl .vl { color: #7ddcff; }

.err { color: #ffb4b4; font-size: 13px; line-height: 1.6; }
.warn { color: #ffcf8a; font-size: 12px; margin-top: 8px; line-height: 1.5; }

/* 公式折叠 */
.formula { margin-top: 16px; }
.formula summary {
    cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.7); padding: 8px 0; list-style: none;
}
.formula summary::-webkit-details-marker { display: none; }
.formula summary::before { content: "▸ "; color: #38BDF8; }
.formula[open] summary::before { content: "▾ "; }
.formula .fx { padding: 10px 12px; background: rgba(0,0,0,0.22); border-radius: 8px; font-size: 13px; line-height: 2; color: #d8e8f2; }
.formula .src { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 8px; line-height: 1.6; }

canvas { width: 100%; height: auto; display: block; }
.hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 8px; line-height: 1.6; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }