:root{--ink:#172033;--muted:#6d7789;--line:#e8edf2;--surface:#fff;--page:#f7f9fb;--teal:#12c8b1;--teal-dark:#00ae9a;--orange:#ff7a0a;--nav:#111b2a}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;min-height:100vh}aside{background:var(--nav);color:#dce5f2;width:242px;padding:26px 16px;display:flex;flex-direction:column}.brand{font-weight:760;font-size:19px;padding:0 10px 31px;letter-spacing:-.4px}.brand span{color:var(--teal);font-size:26px;vertical-align:-2px;margin-right:6px}.brand small{background:#263449;color:#a9bad1;border-radius:5px;font-size:9px;letter-spacing:1px;padding:3px 5px;margin-left:6px}.nav{width:100%;border:0;border-radius:7px;background:transparent;color:#aebacd;text-align:left;padding:12px 13px;margin:3px 0;font:inherit;cursor:pointer}.nav:hover,.nav.active{background:#24324a;color:#fff}.notice{font-size:12px;color:#91a0b7;margin:auto 12px 0;line-height:1.65}.notice strong{color:#fff}main{min-width:0;flex:1;padding:34px 40px 50px}header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}.eyebrow{margin:0 0 5px;font-size:11px;letter-spacing:.85px;font-weight:700;color:var(--muted)}h1{font-size:28px;letter-spacing:-.6px;margin:0}h2{font-size:17px;margin:0 0 15px;letter-spacing:-.25px}.connection{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 13px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}.connection i{height:9px;width:9px;border-radius:50%;background:#97a5b6}.connection i.connected{background:#13bd8e;box-shadow:0 0 0 3px #ddf9ee}.connection i.connecting{background:#f5a524}.toolbar,.panel,.chart-card,.types{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px #11213b08}.toolbar{padding:18px 21px;display:flex;gap:60px;margin-bottom:20px}.toolbar label,.field{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px}.select{border:1px solid #d9e0e8;border-radius:7px;padding:10px 12px;min-width:250px;font-size:14px;color:#445269}.select span{float:right;color:#9ba7b7}.period{display:flex;gap:8px}.period button{border:0;border-radius:8px;background:#edf1f5;color:#536175;padding:10px 13px;font:inherit;font-size:13px}.period .selected{background:var(--teal-dark);color:#fff}.dashboard{display:grid;grid-template-columns:minmax(500px,1.75fr) minmax(250px,.8fr);gap:20px}.chart-card{padding:24px;grid-row:span 2}canvas{width:100%;height:300px;display:block}.legend{font-size:13px;text-align:center;display:flex;gap:18px;justify-content:center}.legend span:before{content:"";display:inline-block;width:17px;border-top:3px solid;margin-right:6px;vertical-align:middle}.legend .inbound:before{border-color:var(--orange)}.legend .outbound:before{border-color:var(--teal)}.summary{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tile{border-radius:12px;padding:22px;color:#fff;min-height:137px;box-shadow:0 8px 18px #15223a16}.tile.outbound{background:linear-gradient(135deg,#27d9c7,#00a894)}.tile.inbound{background:linear-gradient(135deg,#ff9b22,#f35a08)}.tile span{display:block;font-size:24px;opacity:.8}.tile p{font-size:13px;font-weight:650;margin:7px 0}.tile strong{font-size:29px}.types{padding:23px}.card-head{display:flex;justify-content:space-between;align-items:flex-start}.card-head span{font-size:12px;color:var(--muted)}.type-row{display:flex;justify-content:space-between;border-top:1px solid #eff2f5;padding:9px 0;color:var(--muted);font-size:14px}.type-row b{color:#0bb58a}.view{display:none}.view.active{display:block}.panel{padding:27px;margin-bottom:20px}.instance{display:grid;grid-template-columns:1fr 260px;align-items:center;gap:32px;min-height:320px}.instance h2{font-size:25px;margin-bottom:6px}.instance p{color:var(--muted);line-height:1.6;max-width:480px}.actions{display:flex;gap:10px;margin-top:20px}button{cursor:pointer}.primary,.secondary{border-radius:7px;padding:10px 14px;font-weight:700;font:inherit;font-size:13px}.primary{border:1px solid var(--teal-dark);background:var(--teal-dark);color:white}.primary:hover{background:#009985}.secondary{border:1px solid #d9e1e9;background:#fff;color:#5c687a}.qr-wrap{border:1px dashed #ccd7e1;border-radius:12px;min-height:225px;padding:16px;text-align:center;display:grid;place-items:center}.qr-wrap img{display:none;width:190px;height:190px}.qr-wrap img.visible{display:block}.qr-wrap p{font-size:12px;margin:0}.safety ul{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:13px;margin:0;padding-left:18px;color:#536175}.field input{display:block;width:100%;margin-top:7px;border:1px solid #d9e1e9;border-radius:7px;padding:11px;font:inherit;font-size:14px}.field small{display:block;font-weight:400;margin-top:6px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:25px 0}fieldset{border:1px solid var(--line);border-radius:9px;padding:14px 17px;margin:18px 0}legend{color:#536175;font-size:13px;font-weight:700;padding:0 4px}.toggle{display:block;padding:8px 0;color:#4d5a6c;font-size:14px}.toggle input{accent-color:var(--teal-dark);margin-right:8px}.toggle em{font-style:normal;color:#a2adba;font-size:11px;margin-left:5px}#toast{position:fixed;bottom:22px;right:25px;background:#172033;color:white;border-radius:8px;padding:12px 16px;font-size:13px;box-shadow:0 8px 22px #0003;transform:translateY(90px);opacity:0;transition:.2s}#toast.show{transform:translateY(0);opacity:1}@media(max-width:980px){aside{width:65px;padding:22px 8px}.brand{font-size:0;padding:0 7px 26px}.brand span{font-size:28px}.brand small,.nav{font-size:0}.nav{height:42px}.notice{display:none}main{padding:26px 22px}.dashboard{grid-template-columns:1fr}.chart-card{grid-row:auto}.toolbar{gap:20px}.instance{grid-template-columns:1fr}.grid,.safety ul{grid-template-columns:1fr}}@media(max-width:650px){header{display:block}.connection{margin-top:15px;width:max-content}.toolbar,.period,.summary{flex-wrap:wrap}.toolbar{display:block}.toolbar>div+div{margin-top:14px}.dashboard{display:block}.chart-card,.types{margin-bottom:18px}.summary{margin-bottom:18px}.chart-card{padding:15px}canvas{height:220px}.tile{min-height:110px}}
body:has(.bridge-login){min-height:100vh;background:linear-gradient(135deg,#f3f8fb,#e9fbf7);display:grid;place-items:center}.bridge-login{width:min(100%,480px);padding:24px}.bridge-login section{background:#fff;border:1px solid #dce6ed;border-radius:18px;padding:34px;box-shadow:0 20px 48px #10213a14}.brand-login{color:#0b9888;font-weight:800;font-size:20px;margin-bottom:30px}.bridge-login h1{margin:5px 0 10px;color:#112c47}.bridge-login p{line-height:1.55;color:#61718a}.bridge-login form{display:grid;gap:14px;margin:25px 0 16px}.bridge-login label{display:grid;gap:6px;color:#344861;font-size:13px;font-weight:700}.bridge-login input{border:1px solid #cfdbe5;border-radius:8px;padding:11px;font:inherit}.bridge-login #login-notice{min-height:20px;margin:0;color:#a05a00;font-size:13px}.bridge-login small{color:#718096;line-height:1.45}
.header-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}.logout-button{white-space:nowrap}@media(max-width:650px){.header-actions{margin-top:15px;justify-content:flex-start;flex-wrap:wrap}.header-actions .connection{margin-top:0}}