:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #183c46; background: #f3f7f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1180px; background: #f3f7f8; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.kicker { color: #1b8b98; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#0b6070,#24a7a5); font-weight: 900; box-shadow: 0 8px 22px rgba(16,111,123,.25); }
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 460px; gap: 72px; align-items: center; padding: 7vw 11vw; color: #fff; background: radial-gradient(circle at 15% 20%,rgba(65,220,216,.2),transparent 32%),linear-gradient(130deg,#082e3d,#0a5262 55%,#168486); }
.login-brand { display: flex; align-items: center; gap: 16px; }
.login-brand .brand-mark { width: 72px; height: 72px; font-size: 20px; }
.login-brand strong { display: block; font-size: 38px; }
.login-brand small { display: block; margin-top: 8px; color: rgba(255,255,255,.68); font-size: 16px; }
.login-card { display: flex; flex-direction: column; gap: 13px; padding: 34px; border-radius: 20px; color: #274650; background: #fff; box-shadow: 0 28px 80px rgba(0,20,30,.32); }
.login-card h1 { margin: 2px 0 0; font-size: 27px; }
.login-card p { margin: 0 0 8px; color: #71838b; line-height: 1.7; }
.login-card label { display: grid; gap: 7px; color: #50656e; font-size: 13px; }
input, select { min-height: 42px; padding: 0 12px; border: 1px solid #d9e3e6; border-radius: 9px; color: #244852; background: #fff; outline: none; }
input:focus, select:focus { border-color: #3b9da6; box-shadow: 0 0 0 3px rgba(59,157,166,.12); }
.topbar button, .panel-head button, .tabs button, aside nav button { border: 0; border-radius: 8px; color: #31636e; background: #eaf3f4; }
.login-card small { color: #7d8e95; }
.primary { border: 0; border-radius: 9px; color: #fff !important; background: linear-gradient(135deg,#087183,#149c9d) !important; }
.login-submit { min-height: 46px; margin-top: 4px; }
.console { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; }
.console > aside { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; color: #d7eaed; background: linear-gradient(180deg,#0b3545,#0b5260); }
.console-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; }
.console-brand strong, .console-brand small { display: block; }
.console-brand small { margin-top: 4px; color: #83b6bd; font-size: 11px; }
aside nav { display: grid; gap: 7px; }
aside nav button { padding: 12px 14px; color: #c9dde0; background: transparent; text-align: left; }
aside nav button.active { color: #fff; background: rgba(54,191,191,.2); box-shadow: inset 3px 0 #56dfd5; }
.service-state { display: grid; gap: 11px; margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid rgba(255,255,255,.09); color: #8eb9bf; font-size: 11px; }
.service-state span { display: flex; align-items: center; gap: 7px; }
.service-state i { width: 7px; height: 7px; border-radius: 50%; background: #59e5ae; box-shadow: 0 0 0 3px rgba(89,229,174,.12); }
.console > main { min-width: 0; padding: 0 24px 36px; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 4px 0 0; font-size: 24px; }
.topbar > div:last-child { display: flex; align-items: center; gap: 10px; }
.topbar button { padding: 9px 13px; }
#user-chip { padding: 8px 12px; border-radius: 999px; color: #4c6972; background: #e5eef0; font-size: 12px; }
.page { display: none; }
.page.active { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.metric-grid article, .state-grid article, #device-info article, #connection-info article, .data-summary article { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 17px; border: 1px solid #e0eaed; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(24,68,79,.04); }
.metric-grid span, .state-grid span, #device-info span, #connection-info span, .data-summary span, small { color: #73858d; }
.metric-grid strong { color: #124a56; font-size: 28px; }
.panel { margin-top: 16px; overflow: hidden; border: 1px solid #e1eaed; border-radius: 14px; background: #fff; box-shadow: 0 9px 24px rgba(24,68,79,.04); }
.panel-head { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #edf2f3; }
.panel-head h2, .panel-head p { margin: 0 0 4px; }
.panel-head p { color: #73858d; font-size: 12px; }
.panel-head button { padding: 9px 13px; }
.link-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; padding: 20px; }
.link-flow article { display: flex; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid #dbe8ea; border-radius: 11px; background: #f7fbfb; }
.link-flow article span { color: #758990; font-size: 12px; }
.link-flow b { color: #6da7ae; font-size: 10px; text-align: center; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 13px 15px; border-bottom: 1px solid #edf2f3; text-align: left; vertical-align: top; }
th { color: #668089; background: #f7fafb; font-size: 12px; white-space: nowrap; }
td small { display: block; margin-top: 5px; }
td code, .connection-card code { color: #21717d; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.status { display: inline-flex; padding: 4px 9px; border-radius: 999px; color: #61747b; background: #edf2f3; font-size: 11px; }
.status.online, .status.succeeded, .severity.info { color: #137052; background: #e1f5ed; }
.status.communication_error, .status.failed, .status.rejected, .status.timed_out, .severity.critical { color: #a33232; background: #fbe7e7; }
.status.published, .status.retrying, .severity.warning { color: #8a5b15; background: #fff1d8; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mini { padding: 6px 9px; border: 0; border-radius: 7px; color: #236b77; background: #e6f3f4; font-size: 11px; }
.mini.danger { color: #9a3232; background: #fae8e8; }
.mini.success { color: #156d51; background: #e2f5ed; }
.inline-form { display: grid; grid-template-columns: repeat(4,minmax(140px,1fr)) auto; gap: 9px; padding: 16px 20px; border-bottom: 1px solid #edf2f3; }
.device-form { grid-template-columns: repeat(5,minmax(130px,1fr)) auto; }
.rule-form { grid-template-columns: repeat(4,minmax(130px,1fr)); }
.mapping-form { grid-template-columns: 1fr 1fr 100px 1fr auto; }
.inline-form button { min-height: 42px; padding: 0 15px; }
.check { display: flex; align-items: center; gap: 7px; }
.check input { min-height: auto; }
.point-list, .rule-list { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 20px; }
.point-list article, .rule-list article { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid #dfe9eb; border-radius: 9px; background: #f9fbfb; }
.point-list code { color: #267581; }
.tabs { display: flex; gap: 4px; padding: 8px 20px; overflow-x: auto; border-bottom: 1px solid #e7edef; background: #fafcfc; }
.tabs button { flex: 0 0 auto; padding: 9px 13px; background: transparent; }
.tabs button.active { color: #0b6e79; background: #e3f4f4; font-weight: 700; }
.tab-pane { min-height: 220px; }
#device-info, #connection-info, .state-grid, .data-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; padding: 20px; }
#device-info strong, .state-grid strong, .data-summary strong { overflow: hidden; color: #173f49; text-overflow: ellipsis; }
#connection-info article { position: relative; padding-right: 65px; }
#connection-info code { overflow-wrap: anywhere; }
#connection-info button { position: absolute; top: 11px; right: 9px; }
.warning { margin: 18px 20px 0; padding: 10px 12px; border-radius: 9px; color: #914a24; background: #fff0e2; }
.state-grid article > div { display: flex; gap: 6px; margin-top: 3px; }
.log-list { display: grid; gap: 10px; max-height: 620px; padding: 18px 20px; overflow: auto; }
.log-entry { overflow: hidden; border: 1px solid #dfe8ea; border-left: 4px solid #4da9b4; border-radius: 9px; background: #fbfdfd; }
.log-entry.down { border-left-color: #dda24d; }
.log-entry header { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; padding: 9px 11px; background: #eef5f6; }
.log-entry pre { max-height: 190px; margin: 9px 11px 11px; padding: 10px; overflow: auto; border-radius: 7px; color: #dcebed; background: #173640; white-space: pre-wrap; word-break: break-all; }
.list-row { display: grid; grid-template-columns: minmax(140px,auto) auto 1fr; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid #edf2f3; }
.list-row small { grid-column: 1/-1; }
.empty { padding: 28px 20px; color: #809198; text-align: center; }
.severity { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; }
@media (max-width: 900px) { body { min-width: 0; } .login { grid-template-columns: 1fr; padding: 24px; } .console { grid-template-columns: 1fr; } .console > aside { position: static; height: auto; } aside nav { grid-template-columns: repeat(4,minmax(130px,1fr)); overflow:auto; } .service-state { display:none; } .metric-grid,#device-info,#connection-info,.state-grid,.data-summary,.link-flow { grid-template-columns: 1fr; } .inline-form,.device-form,.rule-form,.mapping-form { grid-template-columns: 1fr; } .link-flow b { transform:rotate(90deg); } }