:root { font-family: Arial, "Microsoft YaHei", sans-serif; color: #17212b; background: #f4f6f8; font-size: 15px; }
* { box-sizing: border-box; } body { margin: 0; } button, input, select, textarea { font: inherit; } button { cursor: pointer; }
.hidden { display: none !important; }.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #edf2f1; }.login-card { width: min(420px, 100%); background: #fff; border: 1px solid #d7dfdf; border-radius: 8px; padding: 32px; box-shadow: 0 10px 30px rgba(20, 40, 40, .08); }.brand { color: #087f78; font-size: 20px; font-weight: 700; letter-spacing: 0; }.login-card h1 { margin: 28px 0; font-size: 25px; }.login-card label, .config-form label { display: grid; gap: 7px; color: #53616b; font-size: 13px; margin-top: 16px; }.login-card input, .config-form input, .config-form select, .config-form textarea, .inline-form input { border: 1px solid #cbd5d8; border-radius: 5px; padding: 10px 11px; color: #17212b; background: #fff; }.login-card button { width: 100%; margin-top: 24px; }
.primary, .secondary, .logout { border-radius: 5px; padding: 9px 14px; border: 1px solid transparent; }.primary { color: #fff; background: #087f78; border-color: #087f78; }.primary:hover { background: #056a65; }.secondary { color: #275e5a; background: #fff; border-color: #a9c5c3; }.logout { color: #b7cfcd; background: transparent; text-align: left; }.error { color: #b42318; min-height: 20px; }.message { min-height: 22px; color: #087f78; }.message.error { color: #b42318; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }.sidebar { background: #123b3a; color: #d6e5e4; padding: 26px 18px; display: flex; flex-direction: column; gap: 7px; }.sidebar .brand { color: #fff; padding: 0 12px; }.side-caption { color: #8bb2ae; font-size: 12px; padding: 4px 12px 24px; }.sidebar nav { display: grid; gap: 4px; }.nav-item { color: #d6e5e4; background: transparent; border: 0; border-radius: 5px; padding: 11px 12px; text-align: left; }.nav-item.active, .nav-item:hover { background: #1b5955; color: #fff; }.logout { margin-top: auto; }.main-content { min-width: 0; padding: 28px clamp(20px, 4vw, 54px); }.topbar, .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; }.topbar { border-bottom: 1px solid #dbe2e4; padding-bottom: 22px; }.eyebrow { color: #7a8991; font-size: 12px; }.topbar h1 { margin: 5px 0 0; font-size: 27px; }.connection { color: #087f78; font-size: 13px; }.section { padding-top: 28px; }.toolbar h2 { margin: 0; font-size: 19px; }.muted, .note { color: #718087; font-size: 13px; }.toolbar p { margin: 6px 0 0; }.table-wrap { overflow-x: auto; margin-top: 18px; background: #fff; border: 1px solid #dbe2e4; border-radius: 7px; }table { width: 100%; border-collapse: collapse; min-width: 680px; }th, td { padding: 13px 15px; text-align: left; border-bottom: 1px solid #edf0f1; white-space: nowrap; }th { color: #718087; font-size: 12px; font-weight: 600; background: #fafcfc; }tr:last-child td { border-bottom: 0; }.status { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: 12px; background: #e6f4f1; color: #087f78; }.status.warn { background: #fff2df; color: #9a5b00; }.status.bad { background: #fde9e7; color: #b42318; }.actions { display: flex; gap: 7px; }.actions button { padding: 6px 9px; font-size: 12px; }
.form-panel { margin-top: 18px; padding: 15px; border: 1px solid #cfe0df; background: #f8fbfb; border-radius: 7px; }.inline-form { display: flex; flex-wrap: wrap; gap: 9px; }.inline-form input { flex: 1 1 150px; }.config-form { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; background: #fff; padding: 20px; border: 1px solid #dbe2e4; border-radius: 7px; }.config-form .wide { grid-column: 1 / -1; }.config-form textarea { min-height: 170px; resize: vertical; font-family: ui-monospace, monospace; }.config-form button { justify-self: start; margin-top: 15px; }.note { margin-top: 12px; }.monitoring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }.monitor-card { background: #fff; border: 1px solid #dbe2e4; border-radius: 7px; padding: 18px; }.monitor-card h3 { margin: 0 0 14px; font-size: 16px; }.metric { display: flex; justify-content: space-between; border-top: 1px solid #edf0f1; padding: 9px 0; color: #64737b; font-size: 13px; }.metric strong { color: #17212b; }.template-panel { margin-top: 25px; }
@media (max-width: 720px) { .app-shell { grid-template-columns: 1fr; }.sidebar { padding: 15px; }.side-caption { padding-bottom: 10px; }.sidebar nav { display: flex; overflow-x: auto; }.nav-item { white-space: nowrap; }.logout { position: absolute; right: 15px; top: 10px; }.main-content { padding: 22px 15px; }.config-form { grid-template-columns: 1fr; }.config-form .wide { grid-column: auto; } }