/* CANVAS — bright, spacious, no strange shadows or decorative color strip. */
body[data-interface="canvas"]{color-scheme:light;--bg:#f7f8fc;--surface:#ffffff;--surface-2:#fbfcff;--surface-3:#f2f5fb;--line:#e4e8f0;--line-strong:#ccd3e2;--text:#171a2d;--muted:#687187;--faint:#9aa2b5;--accent:#315cff;--accent-2:#ff4f8b;--good:#13a66b;--danger:#dc3f5f;--warn:#d98213;--page-max:1680px;--page-x:42px;--row-gap:18px;--radius:16px;--radius-sm:11px}
body[data-interface="canvas"] .app{display:block;padding-top:138px}
body[data-interface="canvas"] .sidebar{position:fixed;top:0;left:0;right:0;height:76px;padding:0 40px;display:flex;align-items:center;gap:28px;background:#fff;border-bottom:1px solid var(--line);z-index:30}
body[data-interface="canvas"] .brand{padding:0;flex:0 0 auto}
body[data-interface="canvas"] .nav{flex:1;justify-content:center;overflow:auto;scrollbar-width:none;padding:0 4px}
body[data-interface="canvas"] .nav::-webkit-scrollbar{display:none}
body[data-interface="canvas"] .nav button{padding:9px 13px;border-radius:999px;font-size:11px;font-weight:650;color:#677188}
body[data-interface="canvas"] .nav button:hover{background:#f2f5fb;color:#27314d}
body[data-interface="canvas"] .nav button.active{background:#171a2d;color:#fff;transform:none}
body[data-interface="canvas"] .side-bottom{display:block;flex:0 0 160px;padding:0}
body[data-interface="canvas"] .control-state{border:0;background:transparent;padding:0;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:12px;white-space:nowrap}body[data-interface="canvas"] .control-row{display:flex;align-items:center;margin:0}body[data-interface="canvas"] .control-row>span:first-child{display:none}body[data-interface="canvas"] .version{margin:0}
body[data-interface="canvas"] .topbar{position:fixed;top:76px;left:0;right:0;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:#fff;border-bottom:1px solid var(--line)}
body[data-interface="canvas"] .page-head{margin-bottom:30px}
body[data-interface="canvas"] .page-title{font-size:38px}
body[data-interface="canvas"] #content{gap:26px}
body[data-interface="canvas"] .metrics{gap:18px}
body[data-interface="canvas"] .metric{min-height:125px;padding:20px;box-shadow:none}
body[data-interface="canvas"] .metric:before{display:none!important}
body[data-interface="canvas"] .layout{gap:24px}
body[data-interface="canvas"] .panel{box-shadow:none}
body[data-interface="canvas"] .panel-head{min-height:64px;padding:18px 22px}
body[data-interface="canvas"] .panel>div[style*="overflow:auto"]{padding:5px 18px 20px}
body[data-interface="canvas"] .table tbody td{padding:17px 13px}
body[data-interface="canvas"] .table tbody tr:hover td{background:#f5f7fc}
body[data-interface="canvas"] .signal-list{padding:8px 22px 22px}
body[data-interface="canvas"] .live{background:#fff}
body[data-interface="canvas"] .login-card{box-shadow:none}
body[data-interface="canvas"] .toolbar-popover{box-shadow:0 12px 38px rgba(25,35,60,.10)}


@media(max-width:1200px){
  body[data-interface="canvas"] .sidebar{padding-left:20px;padding-right:20px;gap:16px}
  body[data-interface="canvas"] .brand-sub{display:none}
  body[data-interface="canvas"] .side-bottom{display:none}
}
@media(max-width:820px){
  body[data-interface="canvas"] .app{padding-top:126px}
  body[data-interface="canvas"] .sidebar{height:64px;padding:0 14px}
  body[data-interface="canvas"] .brand{display:none}
  body[data-interface="canvas"] .nav{justify-content:flex-start}
  body[data-interface="canvas"] .topbar{top:64px;height:62px;padding:0 16px}
}