/* ===== ElecLab Web - light professional electrical theme ===== */
:root{
  --bg:#eef2f7; --panel:#ffffff; --panel2:#f6f8fb; --line:#d9e1ec;
  --text:#1c2b3a; --muted:#5b6b7c; --accent:#0d6efd; --accent-dark:#0a58ca;
  --ok:#1a9e4b; --okbg:#e6f6ec; --bad:#d93848; --badbg:#fdecee; --warn:#e08a00; --warnbg:#fff4e0;
  --radius:10px; --shadow:0 1px 3px rgba(16,42,84,.08), 0 4px 14px rgba(16,42,84,.06);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:"Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
}
a{color:var(--accent); text-decoration:none;} a:hover{text-decoration:underline;}

/* ---- topbar ---- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,#0b2e59,#0d6efd 70%,#3b8cff); color:#fff;
  padding:10px 18px; box-shadow:0 2px 8px rgba(10,40,80,.25); gap:10px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; font-size:19px; letter-spacing:.3px;}
.brand-icon{font-size:22px;}
.brand b{color:#ffd76a;}
.top-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:7px;
  padding:7px 13px; font-size:13.5px; cursor:pointer; transition:all .15s; background:#fff; color:var(--text);
}
.btn-outline{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.22); text-decoration:none;}
.btn-accent{background:#ffd76a; color:#3a2d00; font-weight:600;}
.btn-accent:hover{background:#ffe08a;}
#langSel{background:#fff; color:var(--text); border:none; font-weight:600;}
select.btn{height:34px;}

/* ---- layout ---- */
.layout{display:flex; min-height:calc(100vh - 120px);}
.sidebar{
  width:218px; flex:0 0 218px; background:var(--panel); border-right:1px solid var(--line);
  padding:14px 10px; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto;
}
.sidebar .nav-item{
  display:flex; align-items:center; gap:9px; padding:9px 12px; margin-bottom:3px; border-radius:8px;
  color:var(--text); font-weight:500; cursor:pointer; font-size:14px; border:1px solid transparent;
}
.sidebar .nav-item:hover{background:var(--panel2);}
.sidebar .nav-item.active{background:#e8f1ff; color:var(--accent-dark); border-color:#cfe0ff; font-weight:600;}
.sidebar .nav-item .ic{width:22px; text-align:center;}
.sidebar .sec-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:14px 10px 6px;}

.content{flex:1; padding:22px 26px 60px; max-width:1280px;}
.page-title{font-size:23px; font-weight:700; margin-bottom:4px;}
.page-sub{color:var(--muted); margin-bottom:18px;}

/* ---- cards / forms ---- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:18px;}
.card h3{font-size:16px; margin-bottom:12px; color:var(--accent-dark); display:flex; align-items:center; gap:8px;}
.card h3 .std-chip{font-size:11px; background:#e8f1ff; color:var(--accent-dark); padding:2px 8px; border-radius:20px; font-weight:600;}
.grid{display:grid; gap:14px;}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:4px;}
.field input, .field select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px; background:#fff; color:var(--text);
}
.field input:focus, .field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(13,110,253,.12);}
.field .unit{font-size:12px; color:var(--muted); margin-top:2px;}
.field-row{display:flex; gap:10px; align-items:flex-end;}
.hint{font-size:12px; color:var(--muted); margin-top:6px;}

/* buttons row */
.actions{display:flex; gap:10px; margin:16px 0 6px; flex-wrap:wrap;}
.btn-primary{background:var(--accent); color:#fff; font-weight:600; border:none;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{background:#fff; border:1px solid var(--line); color:var(--text);}

/* ---- results ---- */
.result-wrap{display:none;}
.result-wrap.show{display:block; animation:fadein .25s;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);}to{opacity:1;}}
.result-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:13px; font-weight:700;}
.badge.pass{background:var(--okbg); color:var(--ok);}
.badge.fail{background:var(--badbg); color:var(--bad);}
.badge.warn{background:var(--warnbg); color:var(--warn);}
.badge.neutral{background:#eef1f5; color:var(--muted);}
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px;}
.kpi{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:11px 13px;}
.kpi .k{font-size:12px; color:var(--muted); margin-bottom:3px;}
.kpi .v{font-size:20px; font-weight:700; color:var(--accent-dark);}
.kpi .v small{font-size:12px; font-weight:500; color:var(--muted);}
.kpi .v.ok{color:var(--ok);} .kpi .v.bad{color:var(--bad);} .kpi .v.warn{color:var(--warn);}

table.tbl{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px;}
.tbl th{background:var(--panel2); text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); color:var(--muted); font-size:12.5px; white-space:nowrap;}
.tbl td{padding:8px 10px; border-bottom:1px solid var(--line);}
.tbl tr:last-child td{border-bottom:none;}
.tbl td.num, .tbl th.num{text-align:right; font-variant-numeric:tabular-nums;}
.tbl tr.ok td{background:var(--okbg);}
.tbl tr.bad td{background:var(--badbg);}
.tbl tr.warn td{background:var(--warnbg);}
.tbl .tag{display:inline-block; padding:1px 8px; border-radius:12px; font-size:11.5px; font-weight:700;}
.tbl .tag.pass{background:var(--okbg); color:var(--ok);}
.tbl .tag.fail{background:var(--badbg); color:var(--bad);}

/* ---- formula box (teaching mode) ---- */
.formula-box{
  background:#f4f8ff; border:1px dashed #b8d3f5; border-radius:9px; padding:13px 15px; margin:12px 0;
  font-family:"Cambria Math", Georgia, serif; font-size:14.5px; color:#0a3b7a;
}
.formula-box .fb-title{font-family:inherit; font-weight:700; font-size:13px; color:#0a58ca; margin-bottom:5px;}
.formula-box .step{margin-top:8px; padding-top:8px; border-top:1px dashed #c9dcf7; font-size:13px; color:#1c2b3a; line-height:1.7;}

/* ---- svg diagram ---- */
.diagram-box{background:#fff; border:1px solid var(--line); border-radius:9px; padding:10px; margin-top:12px; overflow-x:auto;}
.diagram-box svg{display:block; margin:0 auto; min-width:620px;}

/* ---- system modelling canvas ---- */
.sys-canvas{background:#fff; border:1px solid var(--line); border-radius:9px; margin-top:12px; overflow-x:auto;}
.sys-canvas svg{display:block; margin:0 auto; min-width:640px; cursor:default;}
.sys-canvas .sys-node{cursor:pointer;}
.sys-canvas .sys-node:hover .ringhit{opacity:.35;}

/* ---- knowledge pages ---- */
.kb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;}
.kb-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px;}
.kb-card .kb-flag{font-size:26px;}
.kb-card h4{font-size:15.5px; margin:6px 0 8px; color:var(--accent-dark);}
.kb-card ul{margin-left:18px; font-size:13.5px;}
.kb-card li{margin-bottom:5px;}
.compare-table{overflow-x:auto;}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line); background:var(--panel); padding:14px 22px; color:var(--muted); font-size:12.5px; text-align:center;}

/* ---- toast ---- */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(80px); background:#0b2e59; color:#fff;
  padding:10px 20px; border-radius:8px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; transition:all .3s; z-index:99; pointer-events:none;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{width:100%; flex:none; height:auto; position:static; display:flex; flex-wrap:wrap; gap:4px; padding:10px;}
  .sidebar .nav-item{flex:1 1 auto; min-width:120px; justify-content:center;}
  .sidebar .sec-label{display:none;}
  .content{padding:16px 14px 50px;}
}

/* ---- feeder tree ---- */
.fd-tree{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.fd-node{border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;background:var(--panel);}
.fd-node.on{border-color:#0d6efd;background:#e9f2fd;}
.fd-node b{font-size:13px;}

/* ---- selectivity table ---- */
.selt-cell{text-align:center;cursor:pointer;font-weight:600;}
.selt-cell.s-full{background:#EDF5E3;color:#3B6D11;}
.selt-cell.s-part{background:#FBF1DF;color:#BA7517;}
.selt-cell.s-none{background:#FBEAEA;color:#A32D2D;}
.selt-cell:hover{outline:2px solid #0d6efd;}