/* GTScnd 调参助手 · Web 版样式（303 H85 · 移动优先） */
:root{
  --bg:#0a0d12;--panel:#0f141d;--panel2:#121926;--line:#1f2837;--tx:#e8ecf4;--mut:#8a94a8;--mut2:#5f6980;
  --acc:#3d7bfd;--accS:rgba(61,123,253,.14);--accB:rgba(61,123,253,.38);
  --ok:#34d399;--okS:rgba(52,211,153,.10);--okB:rgba(52,211,153,.32);
  --warn:#f5a623;--warnS:rgba(245,166,35,.10);--warnB:rgba(245,166,35,.35);
  --bad:#ff6b6b;--badS:rgba(255,107,107,.10);--badB:rgba(255,107,107,.35);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--tx);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
.page{max-width:480px;margin:0 auto;min-height:100vh;padding:0 14px 108px}
/* 顶栏 */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:12px 0 10px;background:linear-gradient(180deg,var(--bg) 78%,rgba(10,13,18,0))}
.topbar h1{font-size:16px;font-weight:650;flex:1;letter-spacing:.2px}
.backBtn{background:none;border:none;color:var(--acc);font-size:13.5px;padding:4px 6px 4px 0;cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mut);white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.pill .dot{width:6px;height:6px;border-radius:99px;background:#5b6478;flex:none}
.pill.on{color:#8feac7;border-color:var(--okB);background:var(--okS)}
.pill.on .dot{background:var(--ok);box-shadow:0 0 7px rgba(52,211,153,.8)}
/* 视图 */
.view{display:none}
.view.on{display:block}
.sect{font-size:11.5px;color:var(--mut);margin:14px 2px 8px;display:inline-block}
.sectRow{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 8px}
.sectRow .sect{margin:0}
.demoTag{font-size:9.5px;padding:2px 8px;border-radius:6px;border:1px solid var(--accB);color:#8fb4ff;background:var(--accS)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.hint{font-size:10.5px;color:var(--mut2);line-height:1.6;margin:10px 2px 0}
.muted{color:var(--mut)} .small{font-size:10.5px} .mono{font-family:var(--mono)}
/* 引导 */
.chipsGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.kv span{display:block;font-size:10px;color:var(--mut);margin-bottom:3px}
.kv b{font-size:12.5px;font-weight:600}
.kv b.ok{color:#5ee0b0}.kv b.bad{color:#ff9d9d}
.readyLine{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8feac7;background:var(--okS);border:1px solid var(--okB);border-radius:12px;padding:10px 12px}
.okdot{width:7px;height:7px;border-radius:99px;background:var(--ok);box-shadow:0 0 8px rgba(52,211,153,.8);flex:none}
.guideCard{border-radius:16px;padding:14px;margin-top:10px;border:1px solid var(--line);background:var(--panel)}
.guideCard.ok{background:var(--okS);border-color:rgba(52,211,153,.3)}
.guideCard.warn{background:var(--warnS);border-color:var(--warnB)}
.guideCard.bad{background:var(--badS);border-color:var(--badB)}
.guideCard h3{font-size:13.5px;line-height:1.5;margin-bottom:9px}
.steps{list-style:none;padding:0}
.steps li{position:relative;padding:0 0 8px 25px;font-size:12.5px;color:#c9d2e0;line-height:1.6}
.steps li:last-child{padding-bottom:2px}
.steps li::before{content:attr(data-n);position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:99px;background:rgba(255,255,255,.09);color:#9fb2d8;font-size:10px;display:flex;align-items:center;justify-content:center}
/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#aab6cc;font-weight:500}
.btn.mini{padding:6px 12px;font-size:11.5px;border-radius:8px}
.btn.danger{background:var(--badS);border:1px solid var(--badB);color:#ffb0b0}
.btn.full{width:100%;margin-top:12px}
.btn.off{opacity:.45}
.btnRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* 连接页 */
.devRow{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.devRow:last-child{border-bottom:none}
.devIcon{width:34px;height:34px;border-radius:10px;background:var(--accS);border:1px solid var(--accB);display:flex;align-items:center;justify-content:center;color:#8fb4ff;flex:none}
.devMeta{flex:1;min-width:0}
.devMeta b{display:block;font-size:13px}
.devMeta span{font-size:10.5px;color:var(--mut)}
.scanRow{display:flex;align-items:center;gap:10px;padding:12px 2px;font-size:12.5px;color:var(--mut)}
.rowBtns{display:flex;gap:8px;margin:2px 0 6px}
.spinner{width:14px;height:14px;border-radius:99px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.connCard{display:flex;align-items:center;gap:10px;background:var(--okS);border:1px solid var(--okB);border-radius:12px;padding:11px 12px}
.connCard .devIcon{background:rgba(52,211,153,.12);border-color:var(--okB);color:#7fe7c0}
.connCard b{font-size:13.5px;display:block}
.connCard .sub{font-size:10.5px;color:#8fbfae}
/* 状态页 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.tile span{display:block;font-size:10px;color:var(--mut);margin-bottom:3px}
.tile b{font-size:15px;font-weight:650;letter-spacing:.2px}
.tile b i{font-style:normal;font-size:10px;color:var(--mut);margin-left:3px;font-weight:400}
.spark{margin-top:10px}
.spark .cap{font-size:10px;color:var(--mut);margin-bottom:4px}
.cmdGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmdGrid .btn{width:100%;justify-content:center;padding:11px 8px;font-size:12px}
.statusChip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--line);color:var(--mut)}
.statusChip.on{color:#8feac7;border-color:var(--okB);background:var(--okS)}
.statusChip.warn{color:#ffd08a;border-color:var(--warnB);background:var(--warnS)}
/* 参数页 */
.stickyhead{display:flex;gap:8px;align-items:center;position:sticky;top:52px;z-index:15;background:var(--bg);padding:6px 0 8px}
#pfilter{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--tx);font-size:13px;padding:10px 12px;outline:none;font-family:inherit;min-width:0}
#pfilter:focus{border-color:var(--accB)}
.draftChip{font-size:10.5px;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:4px 10px;white-space:nowrap}
.draftChip.on{color:#8fb4ff;border-color:var(--accB);background:var(--accS)}
.listcard{padding:2px 12px}
.prow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.prow:last-child{border-bottom:none}
.prow.draft{background:linear-gradient(90deg,transparent, rgba(61,123,253,.07))}
.pmeta{flex:1;min-width:0}
.pmeta b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr{font-family:var(--mono);font-size:10px;color:var(--mut2)}
.pval{font-family:var(--mono);font-size:12.5px;color:#c9d6ee;display:flex;align-items:center;gap:6px}
.prow.draft .pval{color:#8fb4ff}
.chev{color:var(--mut2);font-size:14px}
.writeall{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:452px;display:flex;gap:8px;z-index:25}
.writeall .btn{flex:1}
/* 升级页 */
.fileRow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.fileRow:last-child{border-bottom:none}
.fileIco{width:34px;height:34px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#8fb4ff;flex:none;font-size:15px}
.fileMeta{flex:1;min-width:0}
.fileMeta b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fileMeta span{font-size:10.5px;color:var(--mut)}
.chipsel{display:flex;gap:8px;margin-top:4px}
.chipsel button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:8px 6px;font-size:11.5px;cursor:pointer}
.chipsel button.sel{color:#8fb4ff;border-color:var(--accB);background:var(--accS)}
.prog{height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:6px 0 8px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),#7aa6ff);border-radius:99px;transition:width .15s}
.progTop{display:flex;align-items:baseline;justify-content:space-between}
.progTop b{font-size:24px;font-weight:700;letter-spacing:.5px}
.progTop span{font-size:10.5px;color:var(--mut)}
.progStats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:8px}
.progStats div{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 9px}
.progStats span{display:block;font-size:9.5px;color:var(--mut);margin-bottom:2px}
.progStats b{font-size:12px;font-weight:600;font-family:var(--mono)}
.miniLog{margin-top:9px;font-family:var(--mono);font-size:10px;color:var(--mut);line-height:1.7;max-height:66px;overflow:hidden}
/* 更多 */
.menu{padding:4px 12px}
.menuItem{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.menuItem:last-child{border-bottom:none}
.menuItem .mi{width:32px;height:32px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#9db4dd;flex:none}
.menuItem b{flex:1;font-size:13.5px;font-weight:550}
.menuItem .arrow{color:var(--mut2)}
/* 原始数据 */
.rawWrap{padding:6px;overflow:auto;max-height:66vh}
.rawTable{border-collapse:collapse;font-family:var(--mono);font-size:9.5px}
.rawTable th{color:#6d7a92;font-weight:500;padding:3px 5px;position:sticky;top:0;background:var(--panel)}
.rawTable td{padding:3px 5px;color:#b9c5da;text-align:center}
.rawTable td.a{color:#6d7a92}
.rawTable tr:nth-child(even) td{background:rgba(255,255,255,.017)}
/* 日志 */
.logfilter{display:flex;gap:7px;margin-bottom:9px}
.logfilter button{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:8px 4px;font-size:11.5px;cursor:pointer}
.logfilter button.sel{color:#8fb4ff;border-color:var(--accB);background:var(--accS)}
.logWrap{padding:6px 10px;max-height:64vh;overflow:auto;font-family:var(--mono);font-size:10.5px;line-height:1.9}
.logline{display:flex;gap:8px;border-bottom:1px solid rgba(255,255,255,.03);padding:2px 0}
.logline .tt{color:var(--mut2);flex:none}
.logline .tag{flex:none;font-weight:700;width:44px}
.logline.t-TX .tag{color:#79a8ff}.logline.t-RX .tag{color:#5ee0b0}.logline.t-SYS .tag{color:#e0b45e}
.logline .tx{color:#c2cde0;word-break:break-all}
/* 底部弹层 */
.sheet{position:fixed;inset:0;background:rgba(4,6,10,.62);z-index:40;opacity:0;pointer-events:none;transition:.2s}
.sheet.open{opacity:1;pointer-events:auto}
.sheetCard{position:absolute;left:50%;bottom:0;transform:translate(-50%,20px);width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));transition:.2s;max-height:82vh;overflow:auto}
.sheet.open .sheetCard{transform:translate(-50%,0)}
.sheetCard h3{font-size:14px;margin-bottom:10px;font-family:var(--mono)}
.frow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.frow span{color:var(--mut)}
.frow b{font-weight:600;font-family:var(--mono)}
.editRow{display:flex;align-items:center;gap:8px;margin:14px 0 4px}
.editRow button{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:19px;cursor:pointer;flex:none}
.editRow input{flex:1;background:var(--panel2);border:1px solid var(--accB);border-radius:11px;color:var(--tx);font-size:19px;font-family:var(--mono);padding:11px 12px;outline:none;text-align:center;min-width:0}
/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);background:#1c2634;border:1px solid #2c3a4e;color:#dfe7f5;font-size:12px;padding:9px 14px;border-radius:99px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:86vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* 底部导航 */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;background:rgba(13,17,25,.97);border-top:1px solid var(--line);padding:5px 4px calc(7px + env(safe-area-inset-bottom));z-index:30}
.tabbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:#6b7689;font-size:10px;padding:5px 0;cursor:pointer}
.tabbtn .ti{width:21px;height:21px}
.tabbtn.on{color:var(--acc)}
.tabbtn.on svg{filter:drop-shadow(0 0 6px rgba(61,123,253,.5))}

/* ============ v0.4 新增：密码 / 车型配置 / 分组 ============ */
.pwRow { display: flex; gap: 8px; margin-top: 10px; }
.pwRow input { flex: 1; min-width: 0; background: #0d1117; border: 1px solid var(--line); color: var(--fg); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.pwInput2 { width: 100%; background: #0d1117; border: 1px solid var(--line); color: var(--fg); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.faultList { display: flex; flex-wrap: wrap; gap: 6px; }
.faultChip { background: rgba(255, 92, 92, .14); border: 1px solid rgba(255, 92, 92, .38); color: #ffb0b0; border-radius: 8px; padding: 4px 9px; font-size: 11.5px; }
.carSect { margin-bottom: 14px; }
.carSectT { display: block; font-size: 12.5px; color: var(--mut); margin-bottom: 7px; letter-spacing: .3px; }
.carGrpName { font-size: 11px; color: var(--mut); margin: 8px 0 5px; opacity: .85; }
.chipsel.wrap { flex-wrap: wrap; }
.pbar { margin-bottom: 8px; }
.pgroup { width: 100%; background: #0d1117; border: 1px solid var(--line); color: var(--fg); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.qact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.qact .btn { flex: 1; }