:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --border: #e5e5ea;
  --text: #1d1d1f;
  --muted: #86868b;
  --accent: #5e5ce6;
  --accent-dim: rgba(94,92,230,.08);
  --green: #30b158;
  --green-bg: rgba(48,177,88,.1);
  --red: #e8243b;
  --red-bg: rgba(232,36,59,.1);
  --amber: #f5a623;
  --amber-bg: rgba(245,166,35,.1);
  --orange: #ff7a1a;
  --orange-bg: rgba(255,122,26,.1);
  --blue: #0a84ff;
  --blue-bg: rgba(10,132,255,.1);
  --slate: #98989d;
  --slate-bg: rgba(152,152,157,.1);
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --surface: #2c2c2e;
    --border: #3a3a3c;
    --text: #f5f5f7;
    --muted: #98989d;
    --shadow: 0 1px 3px rgba(0,0,0,.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,.3);
    --accent-dim: rgba(94,92,230,.15);
  }
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font:14px/1.5 var(--font); background:var(--bg); color:var(--text); display:flex; min-height:100vh; }
body.auth-pending > nav, body.auth-pending > main,
body.auth-required > nav, body.auth-required > main { visibility:hidden; }
.auth-screen { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; background:var(--bg); }
.auth-screen[hidden] { display:none; }
.auth-card { width:min(380px, 100%); padding:32px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-md); text-align:center; }
.auth-card h1 { margin-bottom:8px; font-size:24px; }
.auth-card p { margin-bottom:20px; color:var(--muted); }
/* Sidebar */
nav { width:180px; background:var(--surface); border-right:1px solid var(--border); padding:20px 0; display:flex; flex-direction:column; flex-shrink:0; }
nav h2 { font-size:16px; font-weight:700; padding:0 20px 20px; letter-spacing:-.3px; }
nav h2 span { color:var(--accent); }
.nav-item { padding:10px 20px; cursor:pointer; color:var(--muted); font-size:14px; transition:all .15s; border-left:3px solid transparent; display:flex; align-items:center; gap:8px; user-select:none; }
.nav-item:hover { color:var(--text); background:rgba(0,0,0,.03); }
.nav-item.active { color:var(--accent); background:var(--accent-dim); border-left-color:var(--accent); font-weight:600; }
.nav-section-title { padding:18px 20px 6px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.nav-icon { font-size:16px; width:20px; text-align:center; }
/* Main */
main { flex:1; padding:28px; overflow-y:auto; }
.page { display:none; }
.page.active { display:block; }
.user-overview { display:flex; align-items:center; gap:28px; padding:18px 22px; margin-bottom:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.user-overview[hidden] { display:none; }
.user-identity { display:flex; align-items:center; gap:12px; min-width:250px; overflow-wrap:anywhere; }
.user-identity strong, .user-identity span { display:block; }
.user-identity strong { font-size:16px; }
.user-identity > div > span { color:var(--muted); font-size:12px; }
.user-role { padding:3px 9px; border-radius:12px; background:var(--accent-dim); color:var(--accent); font-size:11px; font-weight:700; white-space:nowrap; }
.user-statistics { display:grid; flex:1; grid-template-columns:repeat(5,minmax(80px,1fr)); gap:8px; }
.user-statistics > div { min-width:0; padding:9px 12px; border-radius:8px; background:var(--bg); }
.user-statistics dt { color:var(--muted); font-size:11px; font-weight:600; }
.user-statistics dd { margin-top:1px; font-size:20px; font-weight:700; }
.user-statistics .success dd { color:var(--green); }
.user-statistics .failed dd { color:var(--red); }
.user-statistics .cancelled dd { color:var(--slate); }
.user-statistics .running dd { color:var(--accent); }
@media (max-width:1000px) {
  .user-overview { align-items:stretch; flex-direction:column; gap:14px; }
  .user-identity { min-width:0; }
}
@media (max-width:700px) {
  .user-statistics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.card-header h3 { font-size:16px; font-weight:600; letter-spacing:-.2px; }
/* Forms */
.form-row { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:10px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
input, select, textarea {
  background:var(--bg); border:1px solid var(--border); border-radius:7px; color:var(--text);
  padding:8px 12px; font:13px var(--font); transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
input.input-valid { border-color:var(--green); background:var(--green-bg); box-shadow:0 0 0 3px var(--green-bg); }
input.input-invalid { border-color:var(--red); background:var(--red-bg); box-shadow:0 0 0 3px var(--red-bg); }
input.input-warning { border-color:var(--amber); background:var(--amber-bg); box-shadow:0 0 0 3px var(--amber-bg); }
textarea { font-family:var(--mono); font-size:12px; min-height:70px; resize:vertical; }
select { cursor:pointer; }
/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:7px; font:600 13px var(--font); cursor:pointer; border:none; transition:all .15s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 2px 8px rgba(94,92,230,.3); }
.btn-ghost { background:transparent; color:var(--accent); }
.btn-ghost:hover { background:var(--accent-dim); }
.btn-sm { padding:4px 12px; font-size:12px; }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { filter:brightness(1.1); }
.btn-warning { background:var(--amber); color:#fff; }
.btn-warning:hover { filter:brightness(1.05); }
.btn-pausing, .btn-pausing:hover {
  background:var(--amber-bg); color:var(--amber); opacity:.7; cursor:not-allowed; filter:none;
}
.btn-cancelling, .btn-cancelling:hover {
  background:var(--red-bg); color:var(--red); opacity:.6; cursor:not-allowed; filter:none;
}
/* Tables */
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:center; padding:8px 14px; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--border); }
tbody tr { height:68px; }
tbody td { padding:14px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle; }
tbody tr:hover { background:rgba(0,0,0,.02); }
.mono { font-family:var(--mono); font-size:12px; }
/* Badges */
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:.3px; }
.badge.pending, .badge.queued { background:var(--blue-bg); color:var(--blue); }
.badge.running { background:var(--accent-dim); color:var(--accent); }
.badge.preparing, .badge.collecting { background:var(--accent-dim); color:var(--accent); }
.badge.cancelling { background:var(--slate-bg); color:var(--slate); }
.badge.success { background:var(--green-bg); color:var(--green); }
.badge.failed { background:var(--red-bg); color:var(--red); }
.badge.interrupted { background:var(--amber-bg); color:var(--amber); }
.badge.timed_out { background:var(--orange-bg); color:var(--orange); }
.badge.cancelled { background:var(--slate-bg); color:var(--slate); }
.status-cell { min-width:210px; }
.status-detail { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.2; white-space:nowrap; }
.running-duration { margin-top:3px; }
.run-lifecycle { display:flex; justify-content:center; align-items:flex-start; margin-top:9px; }
.run-phase { position:relative; display:flex; flex:0 0 42px; flex-direction:column; align-items:center; color:var(--muted); font-size:9px; line-height:1; }
.run-phase:not(:last-child)::after { content:""; position:absolute; z-index:0; top:4px; left:calc(50% + 5px); width:calc(100% - 10px); height:1px; background:var(--border); }
.run-phase-dot { position:relative; z-index:1; width:8px; height:8px; border-radius:50%; background:var(--border); }
.run-phase-label { margin-top:4px; white-space:nowrap; }
.run-phase.done { color:var(--green); }
.run-phase.done .run-phase-dot, .run-phase.done:not(:last-child)::after { background:var(--green); }
.run-phase.active { color:var(--accent); font-weight:700; }
.run-phase.active .run-phase-dot { background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.run-phase.terminal-failed { color:var(--red); font-weight:700; }
.run-phase.terminal-failed .run-phase-dot { background:var(--red); box-shadow:0 0 0 3px var(--red-bg); }
.run-phase.terminal-interrupted { color:var(--amber); font-weight:700; }
.run-phase.terminal-interrupted .run-phase-dot { background:var(--amber); box-shadow:0 0 0 3px var(--amber-bg); }
.run-phase.terminal-timed-out { color:var(--orange); font-weight:700; }
.run-phase.terminal-timed-out .run-phase-dot { background:var(--orange); box-shadow:0 0 0 3px var(--orange-bg); }
.run-phase.terminal-cancelled { color:var(--slate); font-weight:700; }
.run-phase.terminal-cancelled .run-phase-dot { background:var(--slate); box-shadow:0 0 0 3px var(--slate-bg); }
/* Empty state */
.empty { text-align:center; padding:40px 20px; color:var(--muted); }
.empty .icon { font-size:36px; margin-bottom:10px; }
/* Toast */
.toast { position:fixed; top:20px; right:20px; padding:12px 22px; border-radius:8px; font:600 13px var(--font); z-index:200; animation:slideIn .3s ease; box-shadow:var(--shadow-md); }
.toast.ok { background:var(--green); color:#fff; }
.toast.err { background:var(--red); color:#fff; }
@keyframes slideIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
/* Modal */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); z-index:100; padding:40px; overflow:auto; }
.modal.show { display:flex; align-items:flex-start; justify-content:center; }
.modal-centered.show { align-items:center; }
.modal-box { background:var(--surface); border-radius:12px; padding:24px; max-width:900px; width:100%; margin-top:20px; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.modal-box h3 { font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:10px; justify-content:space-between; }
.description-modal-box { max-width:560px; margin-top:0; }
.description-modal-box textarea { width:100%; min-height:120px; }
.description-count { color:var(--muted); font-size:11px; text-align:right; }
.modal-actions { display:flex; justify-content:flex-end; margin-top:16px; }
pre { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:16px; font:12px var(--mono); overflow:auto; max-height:55vh; white-space:pre-wrap; line-height:1.7; }
/* Stats */
.stats { display:flex; gap:12px; margin-bottom:18px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow); flex:1; min-width:100px; }
.stat-value { font-size:28px; font-weight:700; letter-spacing:-1px; }
.stat-label { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; margin-top:2px; }
.parameter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:12px 0 16px; }
.benchmark-selector-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.benchmark-selector { width:260px; max-width:100%; margin-bottom:0; }
.benchmark-selector[hidden] { display:none; }
.benchmark-selector select { width:100%; }
.dataset-selector { width:100%; margin:14px 0 12px; }
.dataset-checkbox-list { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; min-height:38px; }
.dataset-checkbox-option { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.dataset-checkbox-option input { width:auto; margin:0; }
.shared-parameters { padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.shared-parameters:empty { display:none; }
.shared-parameters:not(:empty)::before { content:"推理服务"; grid-column:1 / -1; font-weight:700; font-size:14px; }
.dataset-parameter-card { grid-column:1 / -1; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.dataset-parameter-card + .dataset-parameter-card { margin-top:12px; }
.dataset-parameter-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.parameters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.parameter { min-width:0; }
.parameter-wide { grid-column:span 2 / span 2; }
.parameter-wide input { width:100%; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field-label-row label.endpoint-valid { color:var(--green); }
.field-label-row label.endpoint-invalid { color:var(--red); }
.field-label-row label.endpoint-warning { color:var(--amber); }
.endpoint-status { font-size:11px; font-weight:600; text-transform:none; white-space:nowrap; }
.endpoint-status.checking { color:var(--muted); }
.endpoint-status.valid { color:var(--green); }
.endpoint-status.invalid { color:var(--red); }
.endpoint-status.warning { color:var(--amber); }
@media (max-width:700px) { .parameter-wide { grid-column:span 1 / span 1; } }
.hint { min-height:16px; font-size:11px; color:var(--muted); }
.run-warning { margin:0 0 14px; padding:12px 14px; border:1px solid var(--amber); border-radius:8px; background:var(--amber-bg); color:var(--text); }
.run-warning[hidden] { display:none; }
.run-warning-title { color:var(--amber); font-weight:700; margin-bottom:5px; }
.run-warning ul { margin:0 0 9px 18px; }
.run-warning li + li { margin-top:4px; }
.execution-mode-options { margin:10px 0; padding:10px; border-top:1px solid rgba(245,166,35,.35); border-bottom:1px solid rgba(245,166,35,.35); }
.execution-mode-options[hidden] { display:none; }
.execution-mode-title { margin-bottom:8px; font-size:12px; font-weight:700; }
.execution-mode-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.execution-mode-choices label { display:flex; align-items:flex-start; gap:8px; padding:9px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface); cursor:pointer; }
.execution-mode-choices input { flex:0 0 auto; width:15px; height:15px; margin-top:2px; padding:0; accent-color:var(--amber); }
.execution-mode-choices span { display:flex; flex-direction:column; gap:2px; }
.execution-mode-choices strong { font-size:12px; }
.execution-mode-choices small { color:var(--muted); font-size:11px; font-weight:400; }
@media (max-width:700px) { .execution-mode-choices { grid-template-columns:1fr; } }
.run-warning-confirm { display:flex; align-items:flex-start; gap:8px; font-size:12px; font-weight:600; cursor:pointer; }
.run-warning-confirm input { width:15px; height:15px; margin-top:2px; padding:0; accent-color:var(--amber); flex:0 0 auto; }
.toolbar { display:flex; align-items:center; gap:6px; }
.actions { text-align:center; white-space:nowrap; }
.actions .btn + .btn { margin-left:6px; }
.run-description { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.muted { color:var(--muted); }
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; padding-top:18px; }
.pagination-summary { color:var(--muted); font-size:12px; }
.pagination-controls { display:flex; align-items:center; gap:5px; }
.pagination-controls button, .pagination-jump button {
  min-width:32px; height:32px; padding:0 9px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--text); font:600 12px var(--font); cursor:pointer;
}
.pagination-controls button:hover:not(:disabled), .pagination-jump button:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.pagination-controls .active { border-color:var(--accent); background:var(--accent); color:#fff; cursor:default; }
.pagination-controls .active:hover { color:#fff; background:var(--accent); }
.pagination-arrow { font-size:20px !important; line-height:1; }
.pagination-ellipsis { width:22px; text-align:center; color:var(--muted); }
.pagination-jump { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.pagination-jump label { display:flex; align-items:center; gap:5px; }
.pagination-jump input { width:58px; height:32px; padding:5px 7px; text-align:center; }
.pagination-jump button { color:var(--accent); }
button:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary.form-incomplete, .btn-primary.form-incomplete:hover {
  background:var(--accent); color:#fff; opacity:.38; cursor:not-allowed;
  filter:none; transform:none; box-shadow:none;
}
.btn-primary.risk-locked, .btn-primary.risk-locked:hover {
  background:var(--amber); color:#2d2105; opacity:.82; cursor:not-allowed;
  filter:none; transform:none; box-shadow:none;
}
.modal-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.run-detail { display:flex; flex-direction:column; gap:16px; }
.run-detail-overview { display:flex; align-items:center; gap:10px; color:var(--muted); overflow-wrap:anywhere; }
.run-failure { padding:16px; border:1px solid var(--red); border-radius:9px; background:var(--red-bg); }
.run-failure-interrupted { border-color:var(--amber); background:var(--amber-bg); }
.run-failure-timed_out { border-color:var(--orange); background:var(--orange-bg); }
.run-failure-cancelled { border-color:var(--slate); background:var(--slate-bg); }
.run-failure h4 { color:var(--red); font-size:14px; margin-bottom:6px; }
.run-failure-interrupted h4 { color:var(--amber); }
.run-failure-timed_out h4 { color:var(--orange); }
.run-failure-cancelled h4 { color:var(--slate); }
.run-failure p { line-height:1.6; overflow-wrap:anywhere; }
.run-result-stats { display:flex; flex-wrap:wrap; gap:20px; margin-top:12px; }
.run-result-stats span { display:flex; flex-direction:column; gap:2px; }
.run-result-stats small { color:var(--muted); font-size:11px; }
.run-diagnostics { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.run-diagnostics summary { width:max-content; cursor:pointer; color:var(--text); font-size:12px; font-weight:600; }
.run-diagnostics dl { display:flex; flex-wrap:wrap; gap:20px; margin-top:10px; }
.run-diagnostics dl > div { display:flex; flex-direction:column; gap:2px; }
.run-diagnostics dt { color:var(--muted); font-size:11px; }
.run-diagnostics dd { font-size:12px; }
.run-diagnostics pre { max-height:180px; margin-top:10px; padding:10px 12px; background:var(--surface); font-size:11px; line-height:1.5; }
.run-detail-section h4 { font-size:13px; margin-bottom:10px; }
.run-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--border); }
.run-detail-grid > div { min-width:0; padding:11px 13px; background:var(--surface); }
.run-detail-grid dt { color:var(--muted); font-size:11px; margin-bottom:3px; text-transform:uppercase; letter-spacing:.35px; }
.run-detail-grid dd { overflow-wrap:anywhere; }
.run-result { padding:13px; border:1px solid var(--border); border-radius:9px; }
.run-result + .run-result { margin-top:8px; }
.run-result-stats strong { font-size:16px; }
.run-result-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.run-metric { display:flex; flex-direction:column; gap:4px; min-width:0; padding:10px 12px; border-radius:8px; background:var(--bg); }
.run-metric small { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.4px; }
.run-metric strong { font-size:16px; overflow-wrap:anywhere; }
.run-metric-primary { background:var(--accent-dim); }
.run-metric-primary small, .run-metric-primary strong { color:var(--accent); }
.run-metric-primary strong { font-size:22px; }
.run-result-errors { margin-top:12px; color:var(--muted); font-size:12px; }
.run-result-errors summary { cursor:pointer; color:var(--red); font-weight:600; }
.run-result-errors ul { margin:8px 0 0 18px; color:var(--text); }
.run-result-errors li + li { margin-top:5px; }
@media (max-width:700px) {
  .modal { padding:16px; }
  .modal-box { padding:18px; }
  .run-detail-grid { grid-template-columns:1fr; }
  .run-result-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}