:root { --ink:#17213a; --blue:#235bb8; --pale:#eef4ff; --line:#d9e2f2; --red:#b42318; --green:#157347; }
* { box-sizing:border-box; }
body { margin:0; background:#f6f8fc; color:var(--ink); font-family:Arial,sans-serif; }
header { height:68px; background:#12264b; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; }
.brand { color:#fff; text-decoration:none; font-size:20px; font-weight:700; }
.brand span { color:#64c4ff; }
main { max-width:1250px; margin:34px auto; padding:0 22px; }
.heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.heading h1 { margin:0; font-size:29px; }
.heading p { color:#5c6780; margin:7px 0 0; }
.badge { background:#e5edff; color:#164697; padding:8px 12px; border-radius:99px; font-weight:bold; }
.card,.login-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 3px 12px #1f3b6d0a; margin-bottom:22px; }
.card h2 { margin-top:0; font-size:19px; }
.grid-form { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:end; }
label,fieldset { font-size:14px; font-weight:700; color:#34415a; }
input { display:block; width:100%; margin-top:7px; border:1px solid #b9c7dc; border-radius:8px; padding:11px; font-size:16px; }
fieldset { border:1px solid var(--line); border-radius:8px; padding:10px; }
.check { display:inline-block; margin:4px 12px 3px 0; }
.check input { display:inline; width:auto; margin:0; }
.password-note { font-size:14px; background:var(--pale); padding:12px; border-radius:8px; line-height:1.5; }
button,.back { border:0; border-radius:8px; background:var(--blue); color:#fff; padding:11px 15px; font-weight:700; cursor:pointer; text-decoration:none; }
.ghost { background:transparent; border:1px solid #a9c2ec; }
.create { height:44px; }
.flash { padding:13px 16px; margin-bottom:18px; border-radius:8px; font-weight:bold; }
.flash.success { background:#e8f8ef; color:#126438; }
.flash.error { background:#ffebe9; color:#b42318; }
.table-scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:1050px; }
th,td { padding:13px 9px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; vertical-align:middle; }
th { color:#5d6980; background:#f9fbff; }
.level { background:#e7efff; color:#1f56ab; border-radius:4px; padding:4px 6px; margin-right:4px; font-size:12px; font-weight:bold; }
.password { font-size:15px; font-weight:bold; background:#fff8dc; padding:5px; border-radius:4px; }
.copy,.link { font-size:12px; padding:6px 8px; margin-left:5px; background:#eef4ff; color:#235bb8; }
.actions { display:flex; gap:6px; align-items:center; }
.actions form { display:inline; }
.actions a { color:#1d55af; font-weight:bold; }
.danger { background:#fff0f0; color:var(--red); font-size:12px; padding:6px 8px; }
.empty { text-align:center; color:#6f7b8e; padding:28px; }
.login-card { max-width:420px; margin:10vh auto; }
.login-card h1 { margin-top:0; }
.login-card p { color:#63708a; }
.login-card label { display:block; margin-bottom:16px; }
.login-card button { width:100%; margin-top:5px; }
.back { background:#e9effa; color:#2051a4; }

.devices-cell { min-width:150px; }
.device-panel { position:relative; }
.device-summary { display:inline-flex; align-items:center; gap:7px; min-width:108px; padding:8px 11px; border:1px solid #b9cceb; border-radius:10px; background:#f2f6ff; color:#184d9d; font-weight:700; cursor:pointer; list-style:none; }
.device-summary::-webkit-details-marker { display:none; }
.device-summary::after { content:'›'; margin-left:auto; font-size:18px; transform:rotate(90deg); transition:transform .18s; }
.device-panel[open] .device-summary::after { transform:rotate(-90deg); }
.device-summary.warning { border-color:#f1b86b; background:#fff6e8; color:#94500a; }
.pc-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:#dce9ff; }
.warning .pc-icon { background:#ffe2b9; }
.pc-icon svg { width:17px; height:17px; fill:currentColor; }
.device-total { display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:99px; background:#235bb8; color:#fff; font-size:12px; }
.warning .device-total { background:#b5650c; }
.device-list { position:absolute; z-index:20; right:0; top:46px; width:340px; max-height:390px; overflow:auto; padding:10px; background:#fff; border:1px solid #cfd9e9; border-radius:12px; box-shadow:0 14px 35px #10284d30; }
.device { padding:12px; border:1px solid #dce4f0; border-radius:10px; background:#fbfdff; }
.device+.device { margin-top:9px; }
.device.blocked { border-color:#f0b7b2; background:#fff8f7; }
.device-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.device-status { padding:4px 7px; border-radius:99px; font-size:11px; font-weight:700; }
.status-active { background:#e6f6ed; color:var(--green); }
.status-blocked { background:#fde8e7; color:var(--red); }
.device-meta { margin-top:7px; color:#68758b; font-size:12px; }
.device-action { width:100%; margin-top:10px; }
.device-action.unblock { background:#e8f7ef; color:var(--green); font-size:12px; padding:8px; }
.no-device { margin:4px; padding:16px 8px; text-align:center; color:#718096; font-size:13px; }

@media(max-width:800px) {
  .grid-form { grid-template-columns:1fr; }
  .heading { align-items:flex-start; gap:12px; }
  .heading h1 { font-size:24px; }
  header { padding:0 20px; }
  .brand { font-size:16px; }
  .device-list { left:0; right:auto; width:min(330px,80vw); }
}