@font-face{font-family:rx;src:url(/fonts/rx_light.ttf);font-weight:300 400;font-display:swap}
@font-face{font-family:rx;src:url(/fonts/rx_med.ttf);font-weight:500 800;font-display:swap}
:root{--maroon:#9A1450;--deep:#56042C;--blush:#F6C4D0;--muted:#c4b6bd;--line:rgba(255,255,255,.14);--glass:rgba(255,255,255,.11);--green:#2BD96B;--red:#F0505A;--orange:#FF9F45}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{font-family:rx,system-ui,sans-serif;font-weight:300;font-size:14px;color:#fff;background:#080106;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(20,4,12,.58),rgba(20,4,12,.58)),url(/img/stats-room.jpg) center/cover;z-index:-1}
b,h1,h2,h3,th{font-weight:500}
h1{font-size:26px}h2{font-size:18px}
input,select,button{font:inherit;color:inherit}
.m{color:var(--muted);font-size:12.5px}
.ltr{direction:ltr;unicode-bidi:isolate}

/* glass */
.g{background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--line);border-radius:24px;padding:18px}
@media (max-width:760px){.g{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(40,18,28,.92);border-radius:20px;padding:15px}}

/* eyes with the wink */
.eyes{display:inline-flex;gap:3px;direction:ltr;align-items:center}
.eyes img{height:var(--s,22px);display:block}
.eyes img:last-child{transform-origin:50% 38%;animation:wink 6s 1.5s infinite}
@keyframes wink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:reduce){.eyes img:last-child{animation:none}}

/* controls */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field label{font-size:13px;color:var(--blush)}
input[type=text],input[type=email],input[type=password],input[type=search],select{width:100%;height:46px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:14px;padding:0 14px;outline:none}
input:focus,select:focus{border-color:var(--blush)}
select option{background:#1b0d13}
.btn{height:46px;padding:0 20px;border:0;border-radius:99px;background:linear-gradient(var(--maroon),var(--deep));color:#fff;font-weight:500;cursor:pointer;white-space:nowrap}
.btn.ghost{background:rgba(255,255,255,.12)}
.btn.small{height:36px;padding:0 14px;font-size:13px}
.btn.danger{background:rgba(240,80,90,.22);color:#FFB4B4}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible,.rail a:focus-visible{outline:2px solid var(--blush);outline-offset:2px}
.err{background:rgba(240,80,90,.18);color:#FFC9C9;padding:10px 13px;border-radius:12px;margin-bottom:12px}
.ok{background:rgba(43,217,107,.15);color:#B9F6CE;padding:10px 13px;border-radius:12px;margin-bottom:12px}

/* sign-in */
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:18px}
.card{width:100%;max-width:420px}
.card h1{margin:14px 0 4px}
.card .btn{width:100%}
.card>.m{margin-bottom:18px}
.credit{text-align:center;margin-top:14px;color:rgba(255,255,255,.55);font-size:12px}
.qr{background:#fff;border-radius:16px;padding:10px;width:210px;margin:6px auto 12px}
.qr svg{display:block;width:100%;height:auto}
.key{word-break:break-all;background:rgba(0,0,0,.3);padding:10px;border-radius:12px;font-size:13px;margin-bottom:13px;user-select:all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.codes span{background:rgba(0,0,0,.3);padding:8px;border-radius:10px;text-align:center}

/* frame */
.frame{display:flex;gap:14px;padding:14px;min-height:100dvh}
.rail{width:66px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:13px 0;position:sticky;top:14px;height:calc(100dvh - 28px);overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .eyes{margin-bottom:9px;--s:15px}
.rail a{width:44px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--blush);position:relative;text-decoration:none}
.rail a.on{background:var(--maroon);color:#fff}
.rail a.soon{opacity:.38}
.rail a:hover:not(.on){background:rgba(255,255,255,.1)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:9px}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat b{display:block;font-size:26px;margin-top:4px}
.row{display:flex;align-items:center;gap:10px}
.sb{justify-content:space-between}
.wrap{flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}
.chk input{width:18px;height:18px;accent-color:var(--maroon)}
.perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 16px;margin:10px 0}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;background:rgba(255,255,255,.12);font-size:12px;white-space:nowrap}
.tag.green{background:rgba(43,217,107,.18);color:#B9F6CE}.tag.red{background:rgba(240,80,90,.2);color:#FFC9C9}.tag.orange{background:rgba(255,159,69,.2);color:#FFDDB8}

/* tables become cards on the phone */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{color:var(--muted);font-size:12.5px;text-align:right;padding:9px 10px;white-space:nowrap}
td{padding:11px 10px;border-top:1px solid var(--line);vertical-align:top}
.ev{padding:9px 0;border-top:1px solid var(--line)}
.ev:first-of-type{border-top:0}
.diff{font-size:12px;color:var(--muted);word-break:break-word;margin-top:3px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20;overflow:auto}
.modal .g{width:100%;max-width:640px;max-height:92dvh;overflow:auto;background:rgba(40,18,28,.97)}

@media (max-width:760px){
  .frame{padding:10px 10px 82px;gap:10px}
  .rail{position:fixed;inset:auto 8px 8px;width:auto;height:62px;flex-direction:row;padding:0 8px;overflow:auto hidden;z-index:10;gap:3px}
  .rail .eyes{display:none}
  .g3{grid-template-columns:1fr}
  h1{font-size:22px}
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{padding:10px 0;border-top:1px solid var(--line)}
  table.cards td{border:0;padding:3px 0}
  table.cards td[data-l]:before{content:attr(data-l) ": ";color:var(--muted);font-size:12px}
  .btn{min-height:44px}
}