/* MXDVS control room. Spacing 8.5 / 17.5 / 35 / 70 px, radius 5px, no letter spacing. */
:root{--ink:#000;--bg:#fff;--dim:#8a8a8a;--line:#e6e6e6;--soft:#f9f9f9;--red:#e3000f;
  --mono:"Roboto Mono",Consolas,Menlo,monospace;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box;letter-spacing:0 !important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
code{font-family:var(--mono)}
.wm{font-weight:700;font-size:20px;line-height:1}
.path{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:8.5px}

/* login screens */
.login{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:35px 17.5px;overflow:hidden}
.login canvas{position:absolute;inset:0;width:100%;height:100%}
.glass{position:relative;width:100%;max-width:440px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08);border-radius:5px;padding:35px;box-shadow:0 17.5px 35px rgba(0,0,0,.12)}
@media (max-width:520px){.glass{padding:17.5px}}
.lt{font-weight:700;text-transform:uppercase;font-size:26px;line-height:1.1;margin:35px 0 8.5px}
.ls{font-family:var(--mono);font-size:12px;color:var(--dim);margin:0 0 17.5px}
.prompt{display:flex;align-items:center;gap:8.5px;border-bottom:1px solid #000;padding:8.5px 0;margin-bottom:17.5px;font-family:var(--mono);font-size:13px}
.prompt span{white-space:nowrap}
.prompt input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:13px;color:#000;outline:none;padding:0}
.prompt:focus-within{border-bottom-color:var(--red)}
.bbtn{display:inline-block;width:100%;text-align:center;text-decoration:none;font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:13px;background:#000;color:#fff;border:0;border-radius:5px;padding:17.5px;cursor:pointer}
.bbtn span{background:linear-gradient(90deg,#fff 0%,#fff 40%,#9a9a9a 50%,#fff 60%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glow 2.6s linear infinite}
@keyframes glow{from{background-position:100% 0}to{background-position:-150% 0}}
.bbtn.sm{width:auto;padding:8.5px 17.5px;font-size:11px}
.bbtn.wht{background:#fff;color:#000;border:1px solid #000}
.bbtn.wht span{background:none;color:#000;animation:none}
@media (prefers-reduced-motion:reduce){.bbtn span{animation:none;color:#fff;background:none}}
.lnk{font-family:var(--mono);font-size:11px;color:#000;background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}
.hint{font-family:var(--mono);font-size:11px;color:var(--dim);margin:17.5px 0 0}
.hint summary{cursor:pointer}
.hint form{margin-top:17.5px}
.err{font-family:var(--mono);font-size:11px;color:var(--red);margin:8.5px 0 0}
.cells{display:flex;gap:8.5px;margin-bottom:17.5px}
.cells input{width:100%;min-width:0;max-width:48px;height:56px;text-align:center;font-family:var(--mono);font-size:20px;font-weight:700;border:1px solid #000;border-radius:5px;background:#fff;color:#000}
.cells input:focus{outline:none;border-color:var(--red)}
.steps{margin:0 0 17.5px;padding:0;list-style:none;font-family:var(--mono);font-size:12px}
.steps li{padding:4px 0}
.steps b{display:inline-block;width:26px}
.steps code{background:var(--soft);padding:0 4px;border-radius:5px}
.qrbox{display:flex;gap:17.5px;align-items:center;margin-bottom:17.5px;flex-wrap:wrap}
#qr{width:140px;height:140px;border:1px solid var(--line);border-radius:5px;padding:8.5px;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--dim);text-align:center}
#qr img,#qr canvas{width:122px !important;height:122px !important}
.secret{font-family:var(--mono);font-size:12px;word-break:break-all}
.rcodes{display:grid;grid-template-columns:1fr 1fr;gap:8.5px;font-family:var(--mono);font-size:13px;margin-bottom:17.5px}
.rcodes span{border:1px dashed #000;border-radius:5px;padding:8.5px;text-align:center}
.keybox{margin-bottom:8.5px;font-family:var(--mono);font-size:11px}
.keybox span{display:block;color:var(--dim)}
.keybox code{display:block;word-break:break-all;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:8.5px;cursor:copy;font-size:12px}
.msg{max-width:640px;margin:70px auto;padding:0 17.5px;font-family:var(--mono)}

/* dashboard */
body.app{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35'%3E%3Cpath d='M17.5 14v7M14 17.5h7' stroke='%23e6e6e6' stroke-width='1'/%3E%3C/svg%3E");background-size:35px 35px}
.dash{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:100vh}
.side{border-right:1px solid var(--line);padding:35px 17.5px;background:rgba(249,249,249,.9)}
.side nav{display:flex;flex-direction:column;gap:4px;margin-top:35px}
.navb{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;text-decoration:none;border-radius:5px;padding:8.5px;color:#000}
.navb:hover{background:#ececec}
.navb[aria-current="page"]{background:#000;color:#fff}
.navb em{font-style:normal;font-size:10px;color:var(--red)}
.navb[aria-current="page"] em{color:#fff}
.main{min-width:0;padding:35px;background:rgba(255,255,255,.6)}
.dtop{display:flex;justify-content:space-between;align-items:center;gap:17.5px;flex-wrap:wrap;margin-bottom:35px}
.dtop .path{margin:0}
.who{display:flex;align-items:center;gap:17.5px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.who form{margin:0}
.flash{font-family:var(--mono);font-size:12px;border:1px solid #000;border-radius:5px;padding:8.5px 17.5px;margin:0 0 35px;background:#fff}
.sh{font-weight:700;text-transform:uppercase;font-size:26px;line-height:1.1;margin:0 0 8.5px}
.sd{font-family:var(--mono);font-size:12px;color:var(--dim);margin:0 0 35px;max-width:720px}
.sd .chips{margin-left:8.5px}
@media (max-width:820px){.dash{grid-template-columns:minmax(0,1fr)}.side{border-right:0;border-bottom:1px solid var(--line);padding:17.5px}
  .side nav{flex-direction:row;overflow-x:auto;margin-top:17.5px;gap:8.5px;padding-bottom:4px}.navb{white-space:nowrap;border:1px solid var(--line)}.main{padding:17.5px}}
.chips{display:inline-flex;flex-wrap:wrap;gap:8.5px}
.chip{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:5px;padding:4px 8.5px;text-decoration:none;color:#000;background:#fff}
.chip[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid #000;margin-bottom:35px}
.ro{padding:17.5px 17.5px 17.5px 0;border-bottom:1px solid var(--line)}
.ro .k,.ro .d{font-family:var(--mono);font-size:11px;color:var(--dim)}
.ro .d{font-size:10px}
.ro .v{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.2}
.block{margin-bottom:35px}
.bh{display:flex;justify-content:space-between;align-items:center;gap:17.5px;flex-wrap:wrap;border-bottom:1px solid #000;padding-bottom:8.5px;margin-bottom:8.5px}
.bh h3{margin:0;font-size:13px;font-weight:700;text-transform:uppercase}
.bh span{font-family:var(--mono);font-size:11px;color:var(--dim)}
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;min-width:520px}
.t th{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--dim);text-align:left;padding:8.5px 8.5px 8.5px 0;border-bottom:1px solid var(--line)}
.t td{font-family:var(--mono);font-size:12px;padding:8.5px 8.5px 8.5px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.t td.pn{font-family:var(--sans);font-weight:700;text-transform:uppercase}
.t td.num{text-align:right;padding-right:17.5px}
.t td.c{text-align:center}
.t input[type=checkbox],.chk input{accent-color:#000;width:17.5px;height:17.5px;vertical-align:middle}
.bar{height:8.5px;background:#ececec;border-radius:5px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:#000;border-radius:5px}
.dot{display:inline-block;width:8.5px;height:8.5px;border-radius:50%;background:#000;margin-right:8.5px;vertical-align:middle}
.dot.red{background:var(--red);box-shadow:0 0 8.5px var(--red)}
.dot.off{background:#dcdcdc}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;border:1px solid #000;border-radius:5px;padding:0 4px}
.tag.red{border-color:var(--red);color:var(--red)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px}
@media (max-width:1100px){.two{grid-template-columns:minmax(0,1fr)}}
.log{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px}
.log li{display:flex;gap:17.5px;padding:8.5px 0;border-bottom:1px solid var(--line);align-items:center;justify-content:space-between}
.log li time{color:var(--dim);white-space:nowrap}
.log li span{flex:1}
.actions{display:flex;gap:8.5px;flex-wrap:wrap;align-items:center;margin:0}
.actions form{margin:0}
.box{border:1px solid #000;border-radius:5px;padding:17.5px;display:flex;justify-content:space-between;gap:17.5px;flex-wrap:wrap;margin-bottom:17.5px;background:#fff}
.box.alert{border-color:var(--red)}
.empty{font-family:var(--mono);font-size:12px;color:var(--dim);margin:17.5px 0}
.empty.ok{color:#000}
.search{display:flex;gap:17.5px;align-items:center;margin-bottom:35px;max-width:560px}
.search .prompt{flex:1;margin:0}
.tl{list-style:none;margin:0;padding:0;border-left:1px solid #000}
.tl li{position:relative;padding:0 0 17.5px 17.5px;font-family:var(--mono);font-size:12px}
.tl li::before{content:"";position:absolute;left:-4.5px;top:5px;width:8.5px;height:8.5px;border-radius:50%;background:#000}
.tl li time{display:block;color:var(--dim);font-size:10px}
.settings .row{display:flex;justify-content:space-between;align-items:center;gap:17.5px;font-family:var(--mono);font-size:12px;padding:8.5px 0;border-bottom:1px solid var(--line);max-width:560px}
.settings .row span:first-child{color:var(--dim)}
.settings input[type=text]{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:5px;padding:8.5px;width:90px}
.settings .bbtn{margin-top:17.5px}
.chk{font-family:var(--mono);font-size:12px;display:inline-flex;align-items:center;gap:4px}
details summary{cursor:pointer}