*{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:#eef2f7;background:#0b1016}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,#1a2735 0,#0b1016 45%);letter-spacing:.01em}
button,input{font:inherit}
.app{max-width:1180px;margin:auto;padding:28px 20px 22px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.eyebrow,.label{font-size:11px;letter-spacing:.18em;color:#8e9aaa;font-weight:800}
h1,h2{margin:5px 0 0}
h1{font-size:30px}h2{font-size:19px}
.pill,.status{border:1px solid #34404f;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}
.online{color:#79e6a3;border-color:#285c42;background:#10271c}
.offline{color:#ff9b9b;border-color:#5a2b2b;background:#241313}
.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.card{background:rgba(18,25,34,.9);border:1px solid #27313d;border-radius:18px;padding:22px;box-shadow:0 12px 35px rgba(0,0,0,.18)}
.hero{grid-row:span 2;min-height:400px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start}
.pc-icon{font-size:88px;text-align:center;margin:34px 0 10px;color:#b9c6d4}
.muted{color:#9aa6b4;line-height:1.6}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
button{border:0;border-radius:12px;padding:13px 17px;font-weight:800;cursor:pointer;transition:.15s transform,.15s opacity}
button:hover{transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.primary{background:#dce8f5;color:#0b1016}.danger{background:#e87979;color:#260d0d}.secondary{background:#273341;color:#edf2f7}
.target-list{display:grid;gap:10px;margin-top:15px}
.target{display:flex;gap:12px;padding:14px;border:1px solid #2c3744;border-radius:13px;cursor:pointer}
.target.active{border-color:#75879a;background:#18212b}
.target input{margin-top:3px}.target small{display:block;color:#8e9aaa;margin-top:3px}
.lock-state{display:flex;align-items:center;gap:8px;margin-top:15px;font-weight:800}
.dot{width:9px;height:9px;border-radius:50%;background:#67727f}.dot.on{background:#e9a95f}
.warning{font-size:12px;color:#9eabb9;margin:16px 0 0;line-height:1.55}
dl{margin:14px 0 0}dl div{display:flex;justify-content:space-between;border-bottom:1px solid #252e39;padding:10px 0}dt{color:#8e9aaa}dd{margin:0;font-weight:700}
.log-card{grid-column:1/-1}.log{min-height:70px;max-height:190px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#b7c2ce}
.log-row{padding:7px 0;border-bottom:1px solid #202832}
footer{display:flex;justify-content:space-between;color:#718092;font-size:12px;padding:14px 3px}
@media(max-width:800px){.grid{grid-template-columns:1fr}.hero{grid-row:auto}.log-card{grid-column:auto}.topbar{align-items:flex-start;flex-direction:column}}
[hidden]{display:none!important}
.top-right{display:flex;align-items:center;gap:10px}
.small{padding:8px 12px;font-size:12px}
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(5,8,12,.88);padding:20px}
.login-card{width:100%;max-width:360px;display:grid;gap:12px}
input[type=password]{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #34404f;background:#0f161e;color:#eef2f7;font-size:16px}
.err{color:#ff9b9b;font-size:13px;margin:0;min-height:1em}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:#9aa6b4;font-size:14px}
select{background:#0f161e;color:#eef2f7;border:1px solid #34404f;border-radius:10px;padding:9px 12px;font-size:14px}
.notice{margin:14px 0 0;font-size:13px;min-height:1.2em}
.log-row.ng{color:#ff9b9b}
@media(max-width:800px){.top-right{width:100%;justify-content:space-between}.actions button{flex:1 1 140px}}