* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: #f2f5f7; color: #1d2a33; }
.hidden { display: none !important; }
.muted { color: #6b7b86; }
.error { color: #c0392b; min-height: 1.5em; }
.warning { color: #a15c00; background: #fff5e5; padding: 8px 12px; border-radius: 8px; }
button { font: inherit; cursor: pointer; border-radius: 8px; padding: 7px 14px; border: 1px solid #c9d4db; background: #fff; }
button.primary { background: #0f766e; border-color: #0f766e; color: #fff; }
button.ghost { background: #fff; }
button.danger { color: #c0392b; border-color: #e6b8b2; }
button:disabled { opacity: .5; cursor: default; }
input, select { font: inherit; padding: 7px 10px; border: 1px solid #c9d4db; border-radius: 8px; background: #fff; width: 100%; }
label { display: flex; flex-direction: column; gap: 4px; color: #44535d; }
label small { color: #8a98a2; }
.card { background: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(20, 40, 50, .08); }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.login { min-height: 100vh; display: grid; place-items: center; background: #061019; }
.login-card { width: 340px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0; font-size: 22px; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 12px 24px; background: #0b1f2a; color: #fff; }
.topbar nav { display: flex; gap: 6px; flex: 1; }
.topbar nav button { background: transparent; color: #b8c9d2; border: none; }
.topbar nav button.active { background: #134e4a; color: #fff; }
main { max-width: 1180px; margin: 20px auto; padding: 0 20px; }
.toolbar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.toolbar label { flex-direction: row; align-items: center; gap: 8px; }
.toolbar input, .toolbar select { width: auto; }
.spacer { flex: 1; }
.pill { padding: 4px 10px; border-radius: 99px; background: #e7f6f3; color: #0f766e; }
.pill.bad { background: #fdecea; color: #c0392b; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(20, 40, 50, .08); }
.stat b { display: block; font-size: 22px; color: #0f766e; }
.stat span { color: #6b7b86; font-size: 13px; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 180px; border-bottom: 1px solid #dde5ea; }
.chart div { flex: 1; background: #14b8a6; border-radius: 3px 3px 0 0; min-height: 1px; position: relative; }
.chart div:hover { background: #0f766e; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #edf1f4; font-size: 13px; vertical-align: top; }
th { color: #6b7b86; font-weight: normal; }
td .actions { display: flex; flex-wrap: wrap; gap: 4px; }
td button { padding: 3px 8px; font-size: 12px; }
.device { font-size: 12px; color: #6b7b86; }
.inline-form { display: grid; grid-template-columns: 1.2fr 1.6fr .8fr 1fr auto; gap: 12px; align-items: end; }
.inline-form h2 { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.form-grid h2, .form-grid .actions, .form-grid .result { grid-column: 1 / -1; }
.actions { display: flex; align-items: center; gap: 10px; }
.result { background: #f5f8fa; border-radius: 8px; padding: 10px; white-space: pre-wrap; min-height: 2em; margin: 0; }
.status-on { color: #0f766e; }
.status-off { color: #c0392b; }
.dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; }
.dialog .card { width: 520px; }
.dialog code { display: block; font-size: 18px; padding: 14px; background: #f5f8fa; border-radius: 8px; margin: 12px 0; word-break: break-all; user-select: all; }