h1:focus{outline:none}
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:#152a33;
    background:#f4f7f8;
    font-synthesis:none;
    --ink:#142c36;
    --muted:#647780;
    --teal:#087f78;
    --line:#e3eaed;
    --sidebar:#112b35}
*{box-sizing:border-box}
body{margin:0;
    font-size:14px;
    line-height:1.55}
a{color:var(--teal);
    text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit}
button,a,input,select,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #42b9ae;
    outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1{font-size:32px;
    line-height:1.2;
    font-weight:650;
    letter-spacing:-1px;
    margin-bottom:12px}
h2{font-size:17px;
    letter-spacing:-.3px;
    margin:0}
h3{font-size:18px;
    margin-bottom:8px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:"Cascadia Code",Consolas,monospace;
    letter-spacing:-.2px}
.break{overflow-wrap:anywhere}
.eyebrow{font-size:10px;
    font-weight:750;
    letter-spacing:1.9px;
    color:var(--teal);
    margin-bottom:13px}
.app-shell{display:flex;
    min-height:100vh}
.sidebar{width:238px;
    flex-shrink:0;
    background:var(--sidebar);
    color:#bdcdd2;
    display:flex;
    flex-direction:column;
    padding:35px 22px;
    position:fixed;
    inset:0 auto 0 0}
.brand{display:flex;
    align-items:center;
    gap:11px;
    color:white;
    font-size:15px;
    letter-spacing:1.8px;
    font-weight:700;
    line-height:1.35}
.brand:hover{text-decoration:none}
.brand small{display:block;
    font-size:8px;
    letter-spacing:2.2px;
    font-weight:450;
    color:#9bb3bd;
    margin-top:6px}
.brand-mark{display:flex;
    align-items:center;
    justify-content:center;
    background:#128b80;
    width:36px;
    height:39px;
    border-radius:9px;
    color:white;
    font-size:24px;
    font-weight:600;
    letter-spacing:0}
.nav-caption{font-size:9px;
    font-weight:650;
    letter-spacing:1.8px;
    color:#77959f;
    margin:55px 12px 14px}
.sidebar nav{display:grid;
    gap:9px}
.sidebar nav a{display:flex;
    gap:12px;
    align-items:center;
    padding:12px 13px;
    color:#bed0d7;
    border-radius:6px;
    font-size:13px}
.sidebar nav a span{font-size:20px;
    line-height:1}
.sidebar nav a.active{background:#1d424a;
    color:#94e4d7;
    box-shadow:inset 3px 0 #3ebba9}
.sidebar nav a:hover{background:#1a3b45;
    text-decoration:none}
.sidebar-bottom{margin-top:auto;
    padding:30px 10px 0;
    display:grid;
    gap:14px;
    font-size:12px}
.sidebar-bottom a{color:#bed0d7}
.server-tag{font-size:11px;
    border-bottom:1px solid #2d4650;
    padding-bottom:20px;
    margin-bottom:2px;
    display:flex;
    gap:8px;
    align-items:center}
.status-dot{height:7px;
    width:7px;
    border-radius:50%;
    display:inline-block;
    background:#19a48d;
    box-shadow:0 0 0 3px #19a48d15;
    flex-shrink:0}
.main-area{margin-left:238px;
    flex:1;
    min-width:0}
.topbar{height:69px;
    padding:0 42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    background:#ffffffc9;
    font-size:10px;
    letter-spacing:.9px;
    color:#6d818b}
.separator{margin:0 13px;
    color:#b0bdc3}
.timezone{letter-spacing:0;
    font-size:11px}
.page-content{max-width:1550px;
    margin:auto;
    padding:43px 42px 60px}
.page-heading{display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:30px}
.page-heading p:last-child{margin-bottom:0}
.live-badge{display:inline-flex;
    align-items:center;
    gap:9px;
    white-space:nowrap;
    padding:7px 11px;
    border:1px solid #cbe6dc;
    background:#eef8f3;
    color:#277460;
    border-radius:30px;
    font-size:11px;
    font-weight:600}
.stats-grid{display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:28px}
.stat-card{padding:24px 26px;
    border:1px solid var(--line);
    background:white;
    border-radius:9px;
    box-shadow:0 2px 3px #112b3502;
    display:flex;
    flex-direction:column}
.stat-label{font-size:12px;
    color:#536d78}
.stat-card strong{font-size:35px;
    font-weight:600;
    letter-spacing:-1px;
    line-height:1.3;
    margin:11px 0}
.stat-card strong small{font-size:15px;
    color:var(--muted);
    letter-spacing:0;
    font-weight:400}
.stat-card>.muted{font-size:11px}
.panel{border:1px solid var(--line);
    border-radius:9px;
    background:white;
    overflow:hidden;
    margin-bottom:24px;
    box-shadow:0 2px 3px #112b3502}
.panel-heading{padding:23px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px}
.panel-heading p{margin:4px 0 0}
.maintenance-content{padding:0 25px 25px;max-width:850px}
.maintenance-form{display:grid;gap:12px;margin-top:24px}
.maintenance-form input[name="confirmation"]{max-width:250px}
.button.danger{background:#a52d37;border-color:#a52d37;color:white}
.panel-heading label{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0}
.panel-heading input[type="checkbox"]{display:inline-block;width:16px;height:16px;margin:0;padding:0;accent-color:#2e7068}
.table-scroll{overflow:auto}
table{border-collapse:collapse;
    width:100%;
    text-align:left;
    white-space:nowrap}
th{font-size:10px;
    font-weight:650;
    letter-spacing:.55px;
    color:#67818d;
    background:#f8fafb;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:13px 20px}
td{padding:20px;
    font-size:12px;
    border-bottom:1px solid #edf1f3;
    vertical-align:top}
td:first-child,th:first-child{padding-left:25px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fbfdfd}
.device-link{font-weight:600;
    font-size:12px}
.device-link span{margin-left:6px;
    opacity:.65}
.pill{display:inline-block;
    border-radius:20px;
    padding:3px 9px;
    font-size:10px;
    border:1px solid #e0e6e9;
    background:#f4f6f7;
    color:#607580}
.pill.recent{background:#edf8f3;
    color:#237854;
    border-color:#d2ebde}
.pill.waiting{background:#fff9e9;
    color:#9a741d;
    border-color:#f2e6c4}
.pill.disabled{background:#fff0ed;
    color:#a55742;
    border-color:#f2dad2}
.panel-footer{padding:17px 25px;
    background:#fcfdfd;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:#7a8d96;
    font-size:10px}
.empty-state{text-align:center;
    padding:65px 24px;
    color:var(--muted)}
.empty-state h2,.empty-state h3{color:var(--ink)}
.empty-state p{margin-bottom:0;
    font-size:13px}
.empty-icon{display:block;
    color:#3b9c91;
    background:#eff8f5;
    border:1px solid #dcece6;
    font-size:25px;
    border-radius:12px;
    width:55px;
    height:55px;
    line-height:53px;
    margin:0 auto 20px}
label{display:block;
    font-size:12px;
    font-weight:600;
    color:#3e5660}
input,select{border:1px solid #d9e2e6;
    border-radius:6px;
    background:white;
    color:var(--ink);
    padding:10px 12px;
    min-width:0;
    max-width:100%;
    height:43px}
input::placeholder{color:#8b9ba3}
.search-input{width:200px;
    font-size:11px;
    height:36px}
.button{display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 16px;
    min-height:39px;
    line-height:1.3;
    border:1px solid #dbe4e8;
    border-radius:6px;
    background:white;
    color:#365560;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    white-space:nowrap}
.button:hover{text-decoration:none;
    background:#f2f7f6}
.button.primary{background:var(--teal);
    border-color:var(--teal);
    color:white}
.button.primary:hover{background:#056b65}
.button.danger:hover,.button.danger:active{background:#86212a;border-color:#86212a;color:white}
.button:disabled{opacity:.45;
    cursor:default}
.full-width{width:100%}
.notice{border:1px solid;
    border-radius:7px;
    padding:13px 17px;
    margin:0 0 20px;
    font-size:13px}
.notice.error{color:#9f4235;
    background:#fff3f0;
    border-color:#f0d9d3}
.notice.success{color:#1a7059;
    background:#edf8f3;
    border-color:#cbe6db}
.back-link{display:inline-block;
    font-size:12px;
    margin-bottom:24px}
.detail-meta{display:flex;
    align-items:center;
    gap:20px;
    font-size:11px;
    margin-bottom:25px;
    flex-wrap:wrap}
.detail-meta .live-badge{margin-left:auto}
.detail-grid{display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
    gap:22px}
.fact-list{margin:0;
    padding:0 25px 18px}
.fact-list div{display:flex;
    gap:15px;
    justify-content:space-between;
    padding:14px 0;
    border-top:1px solid #edf1f3;
    font-size:12px}
.fact-list dt{color:var(--muted)}
.fact-list dd{margin:0;
    text-align:right;
    overflow-wrap:anywhere}
.count-badge{padding:3px 8px;
    background:#eff4f5;
    color:#66808a;
    border-radius:5px;
    font-size:12px}
.filters-panel{padding:23px 25px}
.filters{display:flex;
    align-items:end;
    gap:15px;
    flex-wrap:wrap}
.filters>div{flex:1;
    min-width:155px}
.filters label{font-size:10px;
    margin-bottom:7px}
.filters input,.filters select{width:100%;
    font-size:12px}
.filters .button{height:43px}
.pagination{align-items:center}
.pagination>div{display:flex;
    gap:10px}
.record-details{white-space:normal;
    min-width:220px;
    max-width:340px;
    padding-top:12px;
    font-size:11px}
.record-details p{margin-bottom:8px}
.configuration-actions,.configuration-command{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.configuration-command input{flex:1;min-width:240px}
.configuration-edit{margin-top:18px}
.configuration-response{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f8f9;padding:14px;border-radius:6px;font-size:12px;max-height:200px;overflow:auto}
.configuration-value{white-space:normal;overflow-wrap:anywhere;max-width:420px}
.record-details:has(.io-values-table){min-width:300px;max-width:720px}
.io-values-table th,.io-values-table td{padding:12px}
.io-values-table td:nth-child(2),.io-values-table td:nth-child(3){white-space:normal;min-width:110px}
summary{cursor:pointer;
    color:var(--teal);
    font-size:12px}
footer{border-top:1px solid var(--line);
    padding:20px 42px;
    display:flex;
    justify-content:space-between;
    color:#8c9ba3;
    font-size:10px;
    letter-spacing:.4px}
.account-body{background:radial-gradient(ellipse at 25% 15%,#244851,#102a34 70%);
    min-height:100vh;
    display:grid;
    place-items:center}
.account-shell{width:440px;
    max-width:100%;
    padding:35px 20px}
.account-brand{justify-content:center;
    margin-bottom:35px}
.account-card{padding:36px;
    background:white;
    border-radius:12px;
    box-shadow:0 20px 90px #0003}
.account-card h1{font-size:29px}
.account-card>.muted{font-size:13px;
    margin-bottom:26px}
.stack{display:flex;
    flex-direction:column;
    gap:8px}
.stack label{margin-top:9px}
.stack .button{margin-top:19px;
    height:45px}
.account-card .back-link{margin:24px 0 0}
.account-note{text-align:center;
    font-size:10px;
    letter-spacing:.7px;
    color:#9db6bf;
    margin:25px 0 0}
.validation{color:#ae3f30;
    font-size:12px}
.validation ul{padding-left:17px}
.validation:empty{display:none}
#blazor-error-ui{display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff0e8;
    border-top:1px solid #dfb7a4;
    padding:15px;
    text-align:center;
    z-index:100}
.reconnect-panel{display:none;
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:100;
    background:white;
    border:1px solid var(--line);
    box-shadow:0 8px 40px #112b3533;
    border-radius:10px;
    padding:18px 24px}
.reconnect-panel p{display:none;
    margin:0}
.components-reconnect-show,.components-reconnect-failed,.components-reconnect-rejected{display:block}
.components-reconnect-show .reconnect-trying,.components-reconnect-failed .reconnect-failed,.components-reconnect-rejected .reconnect-rejected{display:block}

@media(max-width:1200px){.sidebar{width:205px;
    padding:30px 17px}
.main-area{margin-left:205px}
.page-content{padding:32px 25px 45px}
.topbar{padding:0 25px}
.stats-grid{gap:14px}
.stat-card{padding:20px}
.detail-grid{grid-template-columns:1fr}
h1{font-size:28px}
.panel-heading{padding:20px}
.panel-footer{padding:15px 20px}
}

@media(max-width:760px){.app-shell{display:block}
.sidebar{position:static;
    width:100%;
    padding:18px 20px;
    gap:20px}
.brand{font-size:13px}
.brand small{font-size:7px}
.nav-caption{display:none}
.sidebar nav{display:flex;
    gap:8px}
.sidebar nav a{font-size:12px;
    padding:9px 12px}
.sidebar-bottom{padding:0;
    margin:0;
    display:flex;
    gap:20px;
    font-size:11px}
.server-tag{display:none}
.main-area{margin:0}
.topbar{height:45px;
    padding:0 20px;
    font-size:8px}
.timezone{font-size:10px}
.page-content{padding:29px 18px 40px}
.page-heading{align-items:start;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:24px}
h1{font-size:27px}
.page-heading .muted{font-size:12px}
.stats-grid{gap:9px;
    margin-bottom:22px}
.stat-card{padding:15px 12px}
.stat-label{font-size:10px}
.stat-card strong{font-size:28px}
.stat-card>.muted{font-size:9px}
.panel-heading{padding:18px;
    flex-wrap:wrap}
.panel-footer{flex-wrap:wrap;
    padding:14px 18px}
.filters-panel{padding:18px}
.filters>div{min-width:calc(50% - 15px)}
.filters .button{width:100%}
.search-input{width:100%}
.detail-meta{gap:12px}
.detail-meta .live-badge{margin-left:0}
.fact-list{padding:0 18px 15px}
.fact-list div{font-size:11px}
footer{padding:18px}
.account-card{padding:28px}
.eyebrow{font-size:9px}
}