:root{
  --bg:#eef2f7; --panel:#ffffff; --ink:#1f2733; --ink-2:#5b6675; --ink-3:#8a94a6;
  --line:#e4e9f0; --line-2:#eef1f6;
  --blue:#1a6de3; --blue-d:#0f56bd; --blue-soft:#e8f1fe;
  --green:#16a34a; --green-soft:#e7f6ee;
  --amber:#d97706; --amber-soft:#fdf2e2;
  --red:#dc2626; --red-soft:#fdecec;
  --shadow:0 1px 2px rgba(20,40,80,.05),0 4px 14px rgba(20,40,80,.06);
  --shadow-lg:0 8px 30px rgba(20,40,80,.14);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
}
.app-shell{min-height:100vh; display:flex; flex-direction:column}
h1,h2,h3,h4{margin:0}

/* ---------- Top bar ---------- */
.topbar{
  background:linear-gradient(120deg,#0f56bd 0%,#1a6de3 55%,#2f83ee 100%);
  color:#fff; padding:18px 26px; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.brand-line{display:flex; align-items:center; gap:12px}
.brand-line h1{font-size:21px; font-weight:700; letter-spacing:.5px}
.version{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); color:#fff;
  padding:2px 10px; border-radius:20px; font-size:12px}
.brand-copy p{margin:5px 0 0; font-size:12.5px; color:rgba(255,255,255,.85)}
.account-area{display:flex; align-items:center; gap:16px}
.account-meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.maturity{font-size:13px; font-weight:600; background:rgba(255,255,255,.16); padding:3px 12px; border-radius:20px}
.account-meta small{font-size:11px; color:rgba(255,255,255,.78); max-width:280px; text-align:right}

.progress-ring{position:relative; width:54px; height:54px}
.progress-ring svg{width:54px; height:54px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:rgba(255,255,255,.25); stroke-width:3.2}
.ring-fg{fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:97.4; stroke-dashoffset:97.4; transition:stroke-dashoffset .5s ease}
.progress-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}

/* ---------- Toolbar ---------- */
.toolbar{background:var(--panel); border-bottom:1px solid var(--line); padding:12px 26px;
  display:flex; align-items:center; gap:12px}
#searchInput{flex:0 1 420px; padding:9px 14px; border:1px solid var(--line); border-radius:9px;
  font-size:13.5px; background:#f8fafc; outline:none}
#searchInput:focus{border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px var(--blue-soft)}
button{cursor:pointer; font-family:inherit}
.toolbar button{padding:9px 18px; border:1px solid var(--line); background:#f6f8fb; border-radius:9px;
  font-size:13.5px; color:var(--ink-2)}
.toolbar button:hover{border-color:var(--blue); color:var(--blue)}
.stats{margin-left:auto; font-size:13px; color:var(--ink-2)}
.stats b{color:var(--blue)}

/* ---------- Layout ---------- */
.main-area{display:flex; flex:1; min-height:0}
.tabs{width:208px; flex:0 0 208px; background:var(--panel); border-right:1px solid var(--line);
  padding:14px 10px; display:flex; flex-direction:column; gap:4px; overflow-y:auto}
.tab-btn{display:flex; align-items:center; gap:9px; padding:9px 11px; border:none; background:transparent;
  border-radius:9px; font-size:13.5px; color:var(--ink-2); text-align:left; width:100%}
.tab-btn .tab-no{font-size:11px; color:var(--ink-3); width:18px; flex:0 0 18px}
.tab-btn .tab-name{flex:1}
.tab-btn .tab-cnt{font-size:11px; background:#eef1f6; color:var(--ink-2); border-radius:10px; padding:1px 7px}
.tab-btn:hover{background:#f3f7fe; color:var(--blue)}
.tab-btn.active{background:var(--blue-soft); color:var(--blue-d); font-weight:600}
.tab-btn.active .tab-cnt{background:var(--blue); color:#fff}

.workspace{flex:1; padding:22px 26px 40px; overflow-y:auto}

/* ---------- Category header ---------- */
.cat-head{display:flex; align-items:center; gap:13px; margin:6px 0 16px}
.cat-badge{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff; flex:0 0 38px}
.cat-head h2{font-size:17px; font-weight:700}
.cat-head .cat-count{font-size:12.5px; color:var(--ink-3)}
.cat-head .cat-rule{margin-left:auto; font-size:12px; color:var(--ink-3); max-width:46%; text-align:right}

/* ---------- Module grid ---------- */
#moduleGrid{display:block}
.module-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:15px; margin-bottom:34px}
.mod-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; cursor:pointer; transition:transform .12s,box-shadow .12s,border-color .12s; position:relative;
  display:flex; flex-direction:column; gap:9px}
.mod-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#cfdcF2}
.mod-card.visited::after{content:"已查看"; position:absolute; top:12px; right:12px; font-size:10.5px;
  color:var(--green); background:var(--green-soft); padding:1px 7px; border-radius:10px}
.mod-icon{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center}
.mod-icon svg{width:23px; height:23px}
.mod-card h3{font-size:14.5px; font-weight:650; display:flex; align-items:center; gap:7px}
.mod-status{font-size:10.5px; color:var(--green); background:var(--green-soft); padding:1px 7px; border-radius:10px; font-weight:600}
.mod-card .mod-sum{font-size:12.5px; color:var(--ink-2); min-height:34px}
.mod-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:auto}
.mod-tags span{font-size:11px; color:var(--ink-3); background:#f3f5f9; border-radius:6px; padding:1px 7px}

.empty-tip{padding:60px 20px; text-align:center; color:var(--ink-3)}

/* ---------- Tool panel ---------- */
.tool-panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.hidden{display:none !important}
.tp-head{padding:16px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:13px; background:#fafbfd}
.back-btn{border:1px solid var(--line); background:#fff; border-radius:9px; padding:7px 14px; font-size:13px; color:var(--ink-2)}
.back-btn:hover{border-color:var(--blue); color:var(--blue)}
.tp-title h2{font-size:17px}
.tp-title p{margin:2px 0 0; font-size:12.5px; color:var(--ink-2)}
.tp-tabs{display:flex; gap:4px; margin-left:auto}
.tp-tab{border:none; background:transparent; padding:8px 14px; border-radius:8px; font-size:13px; color:var(--ink-2)}
.tp-tab.active{background:var(--blue-soft); color:var(--blue-d); font-weight:600}

.tp-body{padding:22px}
.tp-pane{display:none}
.tp-pane.active{display:block}

/* form */
.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:15px 18px}
.form-section{grid-column:1/-1; display:flex; align-items:center; gap:9px; margin:6px 0 -2px;
  font-size:13.5px; font-weight:700; color:var(--blue); letter-spacing:.2px}
.form-section::before{content:""; width:4px; height:15px; border-radius:2px; background:var(--blue)}
.form-section .sec-hint{font-weight:400; color:var(--ink-3); font-size:11.5px}
.field label{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px; font-weight:600}
.field input,.field select{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  font-size:13.5px; font-family:inherit; background:#f8fafc; outline:none; color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px var(--blue-soft)}
.form-actions{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn-primary{background:var(--blue); color:#fff; border:none; padding:10px 26px; border-radius:9px; font-size:14px; font-weight:600}
.btn-primary:hover{background:var(--blue-d)}
.btn-ghost{background:#f4f7fb; border:1px solid var(--line); padding:10px 18px; border-radius:9px; font-size:13px; color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.case-pick{font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:#fff; border-radius:16px; padding:4px 12px; font-size:12px; color:var(--ink-2)}
.chip:hover{border-color:var(--blue); color:var(--blue)}

/* result */
.result-metrics{margin-top:22px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.metric-row{display:grid; grid-template-columns:1.1fr 1fr 1.4fr; gap:10px; padding:11px 16px; border-top:1px solid var(--line-2); align-items:baseline}
.metric-row:first-child{border-top:none; background:#fafbfd; font-weight:650; color:var(--ink-2); font-size:12.5px}
.metric-row .m-label{color:var(--ink); font-weight:600}
.metric-row .m-value{color:var(--blue-d); font-weight:700; font-variant-numeric:tabular-nums}
.metric-row .m-hint{font-size:11.5px; color:var(--ink-3)}
.verdict{margin-top:16px; padding:12px 16px; border-radius:10px; font-size:13px; display:flex; gap:9px; align-items:flex-start}
.verdict.ok{background:var(--green-soft); color:#157347}
.verdict.warn{background:var(--amber-soft); color:#b45309}
.verdict.bad{background:var(--red-soft); color:#b91c1c}
.notes{margin-top:14px; padding-left:2px}
.notes li{font-size:12.5px; color:var(--ink-2); margin-bottom:6px}
.form-error{margin-top:14px; background:var(--red-soft); color:var(--red); padding:10px 14px; border-radius:9px; font-size:13px}

/* picks：推荐外购件（品牌+型号） */
.picks{margin-top:18px}
.picks-title{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:9px; display:flex; align-items:center; gap:7px}
.picks-flag{color:var(--blue)}
.pick-card{border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-bottom:10px; background:linear-gradient(180deg,#fbfdff,#f7fafd)}
.pick-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.pick-brand{font-size:12px; color:var(--ink-2); font-weight:600}
.pick-model{font-size:15px; font-weight:800; color:var(--blue-d); letter-spacing:.2px}
.pick-margin{margin-left:auto; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px}
.pick-margin.ok{background:var(--green-soft); color:#157347}
.pick-margin.warn{background:var(--amber-soft); color:#b45309}
.pick-margin.bad{background:var(--red-soft); color:#b91c1c}
.pick-rows{width:100%; border-collapse:collapse}
.pick-rows td{font-size:12.5px; color:var(--ink-2); padding:4px 8px; border-top:1px dashed var(--line)}
.pick-rows td.pk{color:var(--ink-3); width:130px}
.pick-note{margin-top:7px; font-size:12px; color:var(--ink-3)}

/* guide / book */
.guide-md{font-size:13.5px; color:var(--ink-2); max-width:920px}
.guide-md h3{font-size:15px; color:var(--ink); margin:20px 0 8px; padding-left:10px; border-left:3px solid var(--blue)}
.guide-md h3:first-child{margin-top:0}
.guide-md ul{margin:6px 0; padding-left:22px}
.guide-md li{margin-bottom:5px}
.guide-md .fml{background:#f4f7fb; border:1px solid var(--line); border-radius:8px; padding:8px 12px;
  font-family:Consolas,"Courier New",monospace; color:var(--blue-d); display:inline-block; margin:3px 0}
.guide-md table{border-collapse:collapse; width:100%; margin:8px 0; font-size:12.5px}
.guide-md th,.guide-md td{border:1px solid var(--line); padding:6px 10px; text-align:left}
.guide-md th{background:#f6f8fb; color:var(--ink-2)}
.guide-md .src{color:var(--ink-3); font-size:12px}

/* book databook */
.book-search{margin-bottom:16px; display:flex; gap:10px}
.book-search input{flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; background:#f8fafc; outline:none}
.book-search input:focus{border-color:var(--blue); background:#fff}
.book-group{margin-bottom:22px}
.book-group>h3{font-size:14.5px; color:var(--ink); background:#f4f7fb; border-radius:9px; padding:9px 14px; margin-bottom:11px}
.book-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:13px}
.book-entry{border:1px solid var(--line); border-radius:11px; padding:13px 15px; background:#fff}
.book-entry h4{font-size:13.5px; margin-bottom:8px; display:flex; gap:7px; align-items:center}
.book-entry table{width:100%; border-collapse:collapse}
.book-entry td{font-size:12px; padding:3px 0; vertical-align:top; color:var(--ink-2)}
.book-entry td.k{color:var(--ink-3); width:44%; padding-right:8px}
.book-entry .b-note{font-size:11.5px; color:var(--ink-3); margin-top:7px; border-top:1px dashed var(--line); padding-top:6px}
.tag-dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px}

.statusbar{background:var(--panel); border-top:1px solid var(--line); padding:8px 26px; font-size:12px; color:var(--ink-3)}

@media (max-width:900px){
  .tabs{display:none}
  .topbar{flex-direction:column; align-items:flex-start}
  .metric-row{grid-template-columns:1fr; gap:2px}
  .cat-rule{display:none}
}