:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #101316;
  color: #edf2f7;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #101316; }
button, input { font: inherit; }
button { cursor: pointer; border-radius: 5px; border: 1px solid transparent; font-weight: 600; }
button:disabled { opacity: .55; cursor: wait; }
input { width: 100%; min-height: 42px; border-radius: 5px; border: 1px solid #3b4653; background: #151b21; color: #edf2f7; padding: 0 12px; outline: none; }
input:focus { border-color: #42b8a4; box-shadow: 0 0 0 2px #42b8a433; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-form { width: min(100%, 360px); display: grid; gap: 12px; padding: 28px; border: 1px solid #2c3742; background: #171c22; border-radius: 7px; }
.login-form h1 { margin: 2px 0 10px; font-size: 23px; }
.login-form label, .key-form label { color: #a9b5c2; font-size: 13px; }
.mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 5px; background: #42b8a4; color: #07110f; font-weight: 800; }
.mark.small { width: 28px; height: 28px; font-size: 12px; }
.login-form button, .primary { min-height: 42px; background: #42b8a4; color: #07110f; }
.error { margin: 0; color: #ff8d8d; font-size: 13px; }

.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #27313b; background: #14191f; gap: 16px; }
.brand, .topbar-actions, .command-row, .panel-head { display: flex; align-items: center; gap: 10px; }
.brand strong { font-size: 17px; }.brand span:not(.mark) { color: #a9b5c2; font-size: 13px; }
.ghost, .secondary, .danger { min-height: 36px; padding: 0 13px; background: #222b33; border-color: #3a4652; color: #edf2f7; }
.danger { color: #ffb2b2; border-color: #713f45; background: #2b1c20; }
.status { border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; }.status.idle { background: #26313b; color: #c8d1dc; }.status.running { background: #164c4b; color: #72ded0; }.status.failed { background: #5c282d; color: #ffb0b0; }.status.completed { background: #204530; color: #a8e7b9; }

.page { width: min(1280px, calc(100% - 40px)); margin: 26px auto 48px; display: grid; gap: 18px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.metrics article { min-height: 98px; padding: 17px; background: #171c22; border: 1px solid #2b3640; border-radius: 6px; display: grid; align-content: space-between; }.metrics span { color: #9eacba; font-size: 13px; }.metrics strong { font-size: 25px; }.metrics .timestamp { font-size: 15px; line-height: 1.35; }
.operations { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }.panel { background: #171c22; border: 1px solid #2b3640; border-radius: 6px; padding: 18px; }.panel-head { justify-content: space-between; margin-bottom: 16px; }.panel h2 { margin: 0; font-size: 16px; }.muted { color: #9eacba; font-size: 12px; }.command-row { flex-wrap: wrap; }.command-row button { padding: 0 14px; min-height: 38px; }.log { height: 190px; overflow: auto; margin: 16px 0 0; padding: 12px; border: 1px solid #2c3742; border-radius: 5px; background: #101316; color: #cbd6df; font: 12px/1.55 "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; }
.key-form { display: grid; align-content: start; gap: 9px; }.key-form .panel-head { margin-bottom: 2px; }.key-form .muted { margin: 0 0 8px; }
.runs-panel { padding-bottom: 6px; }.table-wrap { overflow-x: auto; }table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13px; }th, td { padding: 11px 10px; text-align: left; border-top: 1px solid #29343e; vertical-align: top; }th { color: #9eacba; font-size: 12px; font-weight: 600; }td { max-width: 310px; overflow-wrap: anywhere; }.run-status { font-weight: 700; }.run-status.completed { color: #a8e7b9; }.run-status.failed { color: #ffb0b0; }.run-status.running { color: #72ded0; }

@media (max-width: 800px) { .topbar { padding: 0 16px; }.brand span:not(.mark) { display: none; }.page { width: min(100% - 24px, 1280px); margin-top: 14px; }.metrics { grid-template-columns: repeat(2, 1fr); }.operations { grid-template-columns: 1fr; } }