:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --line:#2a3240;
  --text:#e6edf3; --muted:#8b949e; --accent:#3b82f6; --accent2:#2563eb;
  --ok:#2ea043; --warn:#d29922; --err:#f85149; --pill:#21262d;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none; user-select:none;
}
.hidden{display:none !important}
button{font:inherit; cursor:pointer}
input,select{font:inherit}

/* ---------- login ---------- */
.view{min-height:100vh}
#login-view,#change-view{display:flex; align-items:center; justify-content:center}
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:34px 30px; width:340px; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.brand{font-size:26px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:9px}
.brand.small{font-size:19px}
.brand-mark{color:var(--accent)}
.tagline{color:var(--muted); margin:6px 0 22px}
.login-card form{display:flex; flex-direction:column; gap:12px}
.login-card input{
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:11px 12px; outline:none;
}
.login-card input:focus{border-color:var(--accent)}
.login-card button{
  background:var(--accent); color:#fff; border:0; border-radius:9px;
  padding:11px; font-weight:600; margin-top:4px;
}
.login-card button:hover{background:var(--accent2)}
.error{color:var(--err); font-size:13px; min-height:16px}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.topbar-right{display:flex; align-items:center; gap:10px}
#who{color:var(--muted); font-size:13px; margin-right:6px}
.tab{background:transparent; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 13px}
.tab.active{background:var(--accent); border-color:var(--accent); color:#fff}
.ghost{background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:7px 12px}
.ghost:hover{color:var(--text)}

/* ---------- panels ---------- */
.panel{display:flex; height:calc(100vh - 55px)}
.sidebar{width:280px; min-width:280px; border-right:1px solid var(--line); padding:16px; overflow:auto}
.sidebar h3{margin:0 0 12px; font-size:14px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); display:flex; align-items:center; gap:8px}
.pill{background:var(--pill); color:var(--text); border-radius:20px; padding:2px 9px; font-size:12px; font-weight:600}
.device-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.device{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; cursor:pointer; display:flex; align-items:center; gap:10px;
}
.device:hover{border-color:var(--accent)}
.device .dot{width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none}
.device.online .dot{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.device .d-name{font-weight:600}
.device .d-meta{color:var(--muted); font-size:12px}
.device .d-main{flex:1; min-width:0; cursor:pointer}
.device .d-actions{display:flex; gap:6px; flex:none}
.device .d-actions button{
  background:var(--bg); border:1px solid var(--line); color:var(--muted);
  border-radius:7px; width:30px; height:30px; font-size:15px; line-height:1; padding:0;
}
.device .d-actions button:hover{color:var(--text); border-color:var(--accent)}
.device .d-actions .d-reboot:hover{color:var(--err); border-color:var(--err)}
.device.cross-user{border-left:3px solid var(--warn)}
.hint{color:var(--muted); font-size:12.5px; margin-top:14px}

/* ---------- session grid ---------- */
.session-grid{
  flex:1; padding:12px; overflow:auto; display:grid; gap:12px;
  grid-template-columns:1fr; align-content:start;
}
.session-grid.n2{grid-template-columns:1fr 1fr}
.session-grid.n3{grid-template-columns:1fr 1fr 1fr}
.tile{
  background:#000; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column; min-height:260px;
}
.tile-bar{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  background:var(--panel); border-bottom:1px solid var(--line); font-size:13px;
}
.tile-name{font-weight:600}
.tile-stat{color:var(--muted); font-size:12px}
.tile-bar .spacer{flex:1}
.tile-bar select{background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:3px 5px; font-size:12px}
.tile-bar button{background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:3px 8px; font-size:12px}
.tile-close{color:var(--err) !important}
.tile-stage{position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000}
canvas.screen{max-width:100%; max-height:100%; display:block; cursor:none; touch-action:none}
.drop-hint{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(59,130,246,.25); border:3px dashed var(--accent); color:#fff; font-weight:600;
}
.tile-stage.dragover .drop-hint{display:flex}

/* files drawer */
.tile-files-drawer{background:var(--panel); border-top:1px solid var(--line); max-height:230px; overflow:auto}
.files-head{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); font-weight:600; font-size:13px}
.files-close{background:transparent; border:0; color:var(--muted)}
.files-body{padding:10px}
.xfer-list{margin-top:8px; display:flex; flex-direction:column; gap:6px}
.xfer{background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:12.5px}
.xfer .bar{height:5px; background:var(--bg); border-radius:4px; margin-top:5px; overflow:hidden}
.xfer .bar i{display:block; height:100%; width:0; background:var(--accent)}

/* ---------- admin ---------- */
.admin-wrap{padding:20px; overflow:auto; width:100%}
.admin-block{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:16px; max-width:1000px}
.admin-block h3{margin:0 0 12px; font-size:15px}
.row-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row-form input{background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px}
.row-form button{background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 14px; font-weight:600}
.chk{color:var(--muted); display:flex; align-items:center; gap:5px}
.msg{font-size:13px; margin-top:8px; min-height:16px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}
.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table th,.table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
.table th{color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.5px}
.table button{background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:4px 9px; font-size:12px; margin-right:5px}
.table button.danger{color:var(--err); border-color:var(--err)}
.badge{background:var(--pill); border-radius:5px; padding:2px 7px; font-size:11px}
.badge.admin{background:var(--accent); color:#fff}

/* ---------- modal (account) ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; width:340px; padding:0; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600}
.modal-card form{display:flex; flex-direction:column; gap:11px; padding:16px}
.modal-card input{background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:10px 12px; outline:none}
.modal-card input:focus{border-color:var(--accent)}
.modal-card button[type=submit]{background:var(--accent); color:#fff; border:0; border-radius:9px; padding:10px; font-weight:600}

/* ---------- toast ---------- */
#cf-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:9px; font-size:13.5px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;
}
#cf-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- mobile / Fold ---------- */
@media (max-width:820px){
  .panel{flex-direction:column; height:auto}
  .sidebar{width:100%; min-width:0; border-right:0; border-bottom:1px solid var(--line)}
  .session-grid,.session-grid.n2,.session-grid.n3{grid-template-columns:1fr}
  .tile{min-height:60vh}
}