* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0f1424; --card:#1a2036; --card2:#222a44; --border:#2c3554;
  --txt:#e6ebff; --muted:#8a94b8; --accent:#5e7bff; --accent2:#7ee0ff;
  --good:#4ade80; --bad:#f87171; --warn:#fbbf24;
}
body {
  font-family:'Segoe UI','Microsoft YaHei',system-ui,sans-serif;
  background:radial-gradient(circle at 20% 0%,#1a2a5a 0%,transparent 50%),
             radial-gradient(circle at 80% 100%,#3a1a5a 0%,transparent 50%),var(--bg);
  color:var(--txt); min-height:100vh;
}
.app { max-width:900px; margin:0 auto; padding:20px; }

/* 顶栏 */
.topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:44px; height:44px; border-radius:10px; box-shadow:0 0 18px rgba(94,123,255,.4); }
.brand h1 { font-size:20px; letter-spacing:1px; }
.brand .ver { font-size:11px; color:var(--muted); background:var(--card2); padding:2px 8px; border-radius:8px; }
.main-nav { display:flex; gap:8px; }
.nav-btn {
  background:var(--card); color:var(--txt); border:1px solid var(--border);
  padding:9px 16px; border-radius:10px; cursor:pointer; font-size:14px; transition:.2s;
}
.nav-btn:hover { border-color:var(--accent); }
.nav-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* 面板 */
.panel { display:none; }
.panel.active { display:block; animation:fade .3s; }
@keyframes fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* 卡片 */
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:16px; }
.card h2 { font-size:15px; margin-bottom:12px; color:var(--accent2); }
.card h3 { font-size:13px; margin-bottom:8px; color:var(--muted); }

/* 行 */
.row { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.path-input {
  flex:1; min-width:200px; background:var(--card2); border:1px solid var(--border);
  color:var(--txt); padding:9px 12px; border-radius:8px; font-size:13px;
}
.path-input[readonly]{ cursor:default; }
.hint { font-size:12px; color:var(--muted); }

/* 按钮 */
.btn {
  background:var(--card2); color:var(--txt); border:1px solid var(--border);
  padding:9px 14px; border-radius:8px; cursor:pointer; font-size:13px; transition:.15s;
}
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.1); }
.btn.ghost { background:transparent; color:var(--muted); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* 算法 */
.algo-cats { margin-bottom:12px; }
.cat { margin-bottom:12px; }
.cat-title { font-size:13px; color:var(--accent2); margin-bottom:8px; font-weight:600; }
.algo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px; }
.algo-item {
  background:var(--card2); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; cursor:pointer; font-size:12.5px; transition:.15s; user-select:none;
}
.algo-item:hover { border-color:var(--accent); }
.algo-item.selected { background:var(--accent); border-color:var(--accent); color:#fff; }
.current-algo { font-size:12px; color:var(--good); margin-bottom:10px; }

/* 结果 */
.result-area {
  width:100%; min-height:100px; background:var(--card2); border:1px solid var(--border);
  color:var(--txt); padding:12px; border-radius:8px; font-family:Consolas,monospace;
  font-size:12.5px; resize:vertical; word-break:break-all;
}
.result-area.tall { min-height:160px; }

/* 对比结果 */
.compare-result { margin-top:10px; padding:12px; border-radius:8px; font-size:14px; display:none; }
.compare-result.match { display:block; background:rgba(74,222,128,.12); border:1px solid var(--good); color:var(--good); }
.compare-result.nomatch { display:block; background:rgba(248,113,113,.12); border:1px solid var(--bad); color:var(--bad); }

/* 状态 */
.status { font-size:12.5px; color:var(--muted); margin-top:8px; }
.status.ok { color:var(--good); }
.status.err { color:var(--bad); }
.status.warn { color:var(--warn); }

/* 子标签 */
.sub-nav { display:flex; gap:8px; margin-bottom:16px; }
.sub-btn {
  background:var(--card); color:var(--muted); border:1px solid var(--border);
  padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px;
}
.sub-btn.active { background:var(--card2); color:var(--txt); border-color:var(--accent); }
.sub-panel { display:none; }
.sub-panel.active { display:block; }
.hidden { display:none !important; }

/* 双栏 */
.split { display:flex; gap:12px; flex-wrap:wrap; }
.split .col { flex:1; min-width:240px; }

/* radio */
.radio { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; color:var(--txt); margin-right:14px; }
.radio input { accent-color:var(--accent); }

/* toast */
#toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--card2); border:1px solid var(--accent); color:var(--txt);
  padding:12px 20px; border-radius:10px; font-size:14px; opacity:0; transition:.3s;
  z-index:99; box-shadow:0 8px 24px rgba(0,0,0,.4); pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:560px){
  .topbar{flex-direction:column;align-items:flex-start}
  .algo-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}
}