:root{
  font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  color:#172c3c;background:#f3f6f9;font-synthesis:none;
  --navy:#10283c;--navy-2:#18384d;--ink:#172c3c;--muted:#667b8b;
  --line:#dce5eb;--surface:#fff;--teal:#087d89;--teal-soft:#e9f6f6;
  --amber:#a96c12;--amber-soft:#fff5e6;--red:#bd4552;--red-soft:#fff0f1;
  --green:#138b72;--green-soft:#eaf8f2;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{min-height:100vh;margin:0;background:linear-gradient(180deg,#ecf2f5 0,#f3f6f9 320px)}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.52}
button:focus-visible,input:focus-visible,.history-item:focus-visible{outline:3px solid #60bcc5;outline-offset:2px}
.app-header{background:var(--navy);color:#fff;border-bottom:3px solid #1b7882;box-shadow:0 7px 26px #10283c18}
.header-inner{max-width:2000px;min-height:82px;margin:auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#2c8e98,#146978);color:#e9ffff;box-shadow:inset 0 1px #ffffff55}
.brand-mark svg{width:30px;height:30px}
.brand-kicker{font-size:10px;letter-spacing:.17em;color:#8fbdc6;font-weight:700}
.brand h1{margin:3px 0 0;font-size:20px;font-weight:700;letter-spacing:.035em}
.header-tag{font-size:12px;color:#d2e4ea;border:1px solid #456173;background:#ffffff0b;padding:9px 13px;border-radius:999px;white-space:nowrap}
.tag-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#63c8c9;margin-right:8px;vertical-align:2px}
.workspace{max-width:2000px;margin:0 auto;padding:30px 32px 36px}
.overview{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 26px;margin-bottom:19px;background:linear-gradient(105deg,#fff 65%,#ecf6f7);border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 20px #15344b0a}
.section-kicker{display:block;color:var(--teal);font-size:10px;font-weight:800;letter-spacing:.16em;line-height:1.4}
.overview h2{font-size:26px;letter-spacing:.015em;margin:8px 0 5px;font-weight:750}
.overview p{font-size:13px;color:var(--muted);margin:0}
.connection-card{min-width:255px;display:grid;justify-items:end;gap:5px}
.connection-line{display:flex;align-items:center;gap:9px;font-size:14px;color:#244258}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#93a4af;box-shadow:0 0 0 4px #edf2f4}
.dot.online{background:#15a17c;box-shadow:0 0 0 4px #def4ea}
.dot.warning{background:#d48a29;box-shadow:0 0 0 4px #fff1dc}
.connection-time{font-size:11px;color:var(--muted);white-space:nowrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 13px;border-radius:8px;font-weight:650;font-size:12px;transition:background .18s,border-color .18s,transform .18s}
.button:active:not(:disabled){transform:translateY(1px)}
.button-primary{border:1px solid #0c7481;background:var(--teal);color:#fff;box-shadow:0 3px 8px #087d8926}
.button-primary:hover:not(:disabled){background:#086d79}
.button-secondary{border:1px solid #cbdce2;background:#fff;color:#30516a}
.button-secondary:hover:not(:disabled){background:#eef6f7;border-color:#a5c9d0}
.button-text{border:0;background:none;color:#56798b;padding:3px 0;min-height:24px;font-weight:500}
.button-text:hover{color:var(--teal);text-decoration:underline}
.notice{padding:11px 15px;margin:-4px 0 18px;border:1px solid #f0cf9e;border-radius:9px;background:var(--amber-soft);font-size:12px;color:#8a5c22}
.summary-grid{display:grid;grid-template-columns:1.14fr 1fr 1fr 1fr 1fr;gap:14px;margin-bottom:19px}
.metric{min-height:126px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 15px #173e5209;position:relative;overflow:hidden}
.metric:before{content:"";position:absolute;left:0;top:19px;bottom:19px;width:3px;border-radius:0 3px 3px 0;background:#9bbbc4}
.metric-risk{background:linear-gradient(135deg,#fbfefe,#eef7f7);border-color:#c7e1e2}
.metric-risk:before{background:var(--teal)}
.metric-alert:before{background:#d8b171}
.metric-label{font-size:12px;color:#597184;font-weight:650}
.metric-value{display:block;font-size:34px;line-height:1.1;font-weight:780;letter-spacing:-.035em;color:#173a50;margin:13px 0 8px;font-variant-numeric:tabular-nums}
.metric-value-text{font-size:23px;letter-spacing:0;white-space:nowrap}
.metric-caption{font-size:11px;color:#8193a0}
.metric-risk.risk-danger{background:linear-gradient(135deg,#fff9f9,#fff0f0);border-color:#f1cbcf}
.metric-risk.risk-danger:before{background:var(--red)}
.metric-risk.risk-danger .metric-value{color:var(--red)}
.metric-risk.risk-warning{background:linear-gradient(135deg,#fffdfa,#fff6e9);border-color:#f0dbb8}
.metric-risk.risk-warning:before{background:var(--amber)}
.metric-risk.risk-warning .metric-value{color:var(--amber)}
.metric-risk.risk-normal{background:linear-gradient(135deg,#fbfffd,#eff9f4);border-color:#c8e9d8}
.metric-risk.risk-normal:before{background:var(--green)}
.metric-risk.risk-normal .metric-value{color:var(--green)}
.primary-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(380px,.84fr);gap:18px;align-items:stretch;margin-bottom:18px}
.secondary-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:18px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 19px #173e5209;padding:22px;min-width:0}
.panel-head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:15px}
.panel-head h2{font-size:17px;line-height:1.25;margin:5px 0 0;font-weight:750;color:#173246}
.panel-meta{font-size:11px;color:#698391;background:#f1f6f8;border:1px solid #e2ebef;border-radius:999px;padding:6px 9px;white-space:nowrap}
.panel-description{margin:-2px 0 15px;color:#78909d;font-size:12px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;text-align:left;font-size:12px}
th{padding:12px 10px;background:#f3f7f9;border-top:1px solid #e5ecf0;border-bottom:1px solid #e5ecf0;color:#617b8b;font-weight:700;white-space:nowrap}
th:first-child{border-radius:7px 0 0 7px}th:last-child{border-radius:0 7px 7px 0}
td{padding:14px 10px;border-bottom:1px solid #edf1f4;color:#3c576a;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#f8fbfc}
.pair-value{font-weight:700;color:#1d4257}
.data-alert{color:var(--red);font-weight:700}
.data-muted{color:#8596a2}
.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.badge-alert{color:var(--red);background:var(--red-soft)}
.badge-ok{color:var(--green);background:var(--green-soft)}
.badge-neutral{color:#6d8190;background:#eef2f5}
.empty-state{padding:38px 14px;text-align:center;color:#8799a6;font-size:12px}
.alert-summary{margin-top:18px;padding:11px 13px;background:#fff7ed;border:1px solid #f1dfc7;border-radius:8px;color:#9a661f;font-size:12px}
.photo-panel{display:flex;flex-direction:column}
.photo-viewport{min-height:285px;max-height:410px;aspect-ratio:16/10;border:1px solid #cbdde5;border-radius:10px;background:linear-gradient(135deg,#eaf2f6,#dce9ee);overflow:hidden;position:relative;display:grid;place-items:center}
.photo-viewport:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff55 1px,transparent 1px),linear-gradient(90deg,#ffffff55 1px,transparent 1px);background-size:24px 24px;opacity:.26}
.photo-placeholder{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;color:#688596;padding:24px}
.photo-placeholder svg{height:47px;width:47px;color:#82a4b0;margin-bottom:4px}
.photo-placeholder strong{font-size:14px;color:#446879}
.photo-placeholder span{font-size:11px;line-height:1.6}
#photoPreview{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:#182b3a}
.photo-info{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-top:14px;font-size:12px;color:#234156}
.photo-info strong{font-weight:700}
.photo-info span{color:#7b8f9a;text-align:right;font-size:11px}
.photo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.photo-status{font-size:11px;line-height:1.6;color:#708694;margin:12px 0 0;min-height:18px}
.progress-main{font-weight:700;color:#214456;font-size:17px;margin:8px 0 16px}
.progress-track{height:9px;background:#e5edf0;border-radius:999px;overflow:hidden}
.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#087d89,#47b9ad);border-radius:inherit;transition:width .3s}
.side-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.side-item{padding:11px 10px;background:#f4f8f9;border:1px solid #e5ecef;border-radius:8px;display:grid;gap:4px}
.side-item span{font-size:11px;color:#738a98}.side-item strong{font-size:12px;color:#2a4c60;font-variant-numeric:tabular-nums}
.history-list{display:grid;gap:8px;max-height:330px;overflow-y:auto}
.history-item{border:1px solid #e2e9ed;background:#fff;border-radius:9px;width:100%;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;color:var(--ink)}
.history-item:hover{border-color:#abd0d2;background:#f7fbfb}
.history-item.selected{border-color:#6cb6bd;background:#eef8f8;box-shadow:inset 3px 0 #0e8d98}
.history-main{display:grid;gap:5px}
.history-main strong{font-size:12px;color:#2d4a5b}.history-main span{font-size:11px;color:#7b8f9b}
.history-end{display:flex;align-items:center;gap:9px;font-size:11px;color:#8296a2;white-space:nowrap}
.workspace-foot{font-size:11px;color:#8999a4;margin:24px 2px 0}
.login-page{max-width:1540px;margin:auto;min-height:calc(100vh - 82px);padding:35px 20px;display:grid;place-items:center}
.login-card{width:min(100%,430px);padding:34px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 20px 55px #173e5218}
.login-card h2{font-size:25px;margin:10px 0 9px}.subtle{font-size:13px;color:var(--muted);margin:0 0 25px}
#loginForm{display:grid;gap:9px}#loginForm label{font-size:12px;color:#37566a;font-weight:700}
#loginForm input{width:100%;height:43px;padding:9px 12px;margin:0 0 8px;border:1px solid #cbdbe3;border-radius:8px;background:#fafdfe;color:#173246}
#loginForm input::placeholder{color:#9aacb7}#loginForm input:focus{border-color:#44a6ae;outline:3px solid #e1f4f5}
#loginForm button{margin-top:5px;height:43px;justify-content:space-between;padding:8px 17px;font-size:13px}
.login-message{color:#b34e4e;font-size:12px;min-height:18px;margin:3px 0 0}
.login-foot{border-top:1px solid #e8eef1;margin:19px 0 0;padding-top:16px;color:#8596a0;font-size:11px;line-height:1.6}
.auth-switch{display:block;margin:14px auto 0;border:0;background:none;color:#087d89;font-weight:700;cursor:pointer;font-size:13px}
.register-form{display:grid;gap:9px;border-top:1px solid #e8eef1;margin-top:17px;padding-top:18px}
.register-form h3{margin:0;color:#18364a;font-size:18px}.register-form .subtle{margin:0 0 6px}
.register-form label{font-size:12px;color:#37566a;font-weight:700}
.register-form input{width:100%;height:43px;padding:9px 12px;margin:0 0 7px;border:1px solid #cbdbe3;border-radius:8px;background:#fafdfe;color:#173246}
.register-form input:focus{border-color:#44a6ae;outline:3px solid #e1f4f5}
.register-form button{margin-top:5px;height:43px;justify-content:space-between;padding:8px 17px;font-size:13px}
.account-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.account-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-heading h3{font-size:17px;margin:5px 0 9px}
.account-panel .subtle{margin:0 0 13px}.pending-users{display:grid;gap:8px;font-size:12px;color:#647f8d}
.pending-user{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid #e2e9ed;border-radius:8px}
.pending-user strong{color:#1a3d50}.pending-user-actions{display:flex;gap:8px;flex-wrap:wrap}
.pending-user-actions button{border:1px solid #a9cdd1;border-radius:7px;padding:6px 12px;background:#edf8f8;color:#087d89;cursor:pointer}
.pending-user-actions button.reject{background:#fff;color:#a45151;border-color:#e2c4c4}
.photo-dialog{border:0;border-radius:12px;padding:14px;background:#fff;max-width:min(95vw,1500px);max-height:94vh;box-shadow:0 20px 70px #06192466}
.photo-dialog::backdrop{background:#071d2cc9}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:2px 2px 12px;color:#18364a;font-size:13px}
.photo-dialog img{display:block;max-width:calc(95vw - 28px);max-height:calc(94vh - 75px);object-fit:contain;background:#142536}
@media(max-width:1100px){.summary-grid{grid-template-columns:repeat(3,1fr)}.primary-grid{grid-template-columns:1fr 1fr}.photo-viewport{min-height:240px}}
@media(max-width:820px){.workspace{padding:20px 16px}.primary-grid,.secondary-grid{grid-template-columns:1fr}.photo-viewport{max-height:none;min-height:300px}.overview{padding:19px 20px}}
@media(max-width:600px){.header-inner{padding:13px 16px;min-height:72px}.brand-mark{width:41px;height:41px}.brand h1{font-size:16px}.brand-kicker{font-size:8px}.header-tag{display:none}.overview{display:block}.connection-card{justify-items:start;margin-top:18px;min-width:0}.summary-grid{grid-template-columns:repeat(2,1fr);gap:9px}.metric{min-height:112px;padding:15px 16px}.metric-value{font-size:29px}.metric-value-text{font-size:18px}.panel{padding:17px}.photo-viewport{min-height:240px}.photo-info{display:grid}.photo-info span{text-align:left}.side-progress{grid-template-columns:repeat(2,1fr)}.history-item{align-items:flex-start}.history-end{display:grid;justify-items:end}.workspace-foot{line-height:1.5}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}