:root{--ink:#172033;--muted:#697386;--line:#dce3ec;--blue:#2367df;--pale:#f3f7fc;--green:#14855b;--amber:#a9640b}*{box-sizing:border-box}body{margin:0;background:#edf2f7;color:var(--ink);font:15px/1.45 "Segoe UI",system-ui,sans-serif}.shell{width:min(760px,calc(100% - 32px));margin:42px auto}header{display:flex;align-items:center;gap:14px;margin-bottom:22px}.mark{width:48px;height:48px;display:grid;place-items:center;background:var(--blue);border-radius:14px;box-shadow:0 8px 24px #2367df33}.mark svg{width:29px;fill:none;stroke:white;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1{font-size:25px;line-height:1.15;margin:0;letter-spacing:-.4px}header p{margin:4px 0 0;color:var(--muted)}.local{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--green);background:#dff6ec;border:1px solid #b9e9d5;padding:5px 9px;border-radius:99px}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 18px 55px #24364d12}.step{display:flex;align-items:center;gap:13px}.step>span{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e8f0ff;color:var(--blue);font-weight:700}.step h2{font-size:17px;margin:0}.step p{color:var(--muted);margin:2px 0}.step button{margin-left:auto}button{font:inherit;font-weight:600;border:1px solid #ced7e3;background:white;color:var(--ink);border-radius:9px;padding:9px 15px;cursor:pointer}button:hover{background:var(--pale)}button:disabled{cursor:not-allowed;opacity:.5}.devices{margin:16px 0 0}.empty{background:var(--pale);border:1px solid var(--line);border-radius:11px;padding:18px;display:flex;align-items:center;gap:12px;color:var(--muted)}.device{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:11px;margin-top:8px}.device.selected{border-color:var(--blue);box-shadow:0 0 0 3px #2367df15}.dot{width:9px;height:9px;border-radius:50%;background:#98a2b3}.authorized .dot{background:#1aa874}.unauthorized .dot{background:#e49524}.device small{display:block;color:var(--muted);font-weight:400}.device .state{margin-left:auto;color:var(--muted);font-size:13px}.guidance{margin-top:10px;padding:12px 14px;border-radius:9px;background:#fff7e8;color:#81510d}.hidden{display:none}hr{border:0;border-top:1px solid var(--line);margin:26px 0}.dropzone{display:grid;place-items:center;text-align:center;border:1.5px dashed #aebacb;background:#f8fafc;border-radius:13px;padding:25px;margin-top:17px;cursor:pointer;transition:.15s}.dropzone:hover,.dropzone.drag{border-color:var(--blue);background:#f1f6ff}.dropzone input{display:none}.dropzone svg{width:30px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px}.dropzone small{color:var(--muted);margin-top:4px}.install{width:100%;background:var(--blue);border:0;color:white;margin-top:17px;padding:13px}.install:hover{background:#1959c4}.status{margin-top:13px;padding:12px 14px;background:var(--pale);border-radius:9px;color:var(--muted);white-space:pre-wrap}.status.success{color:var(--green);background:#e9f8f1}.status.error{color:#a33b2b;background:#fff0ed}.spinner{width:18px;height:18px;border:2px solid #ccd5e1;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}footer{display:flex;justify-content:center;gap:9px;margin-top:18px;color:var(--muted);font-size:13px}@media(max-width:580px){.shell{margin:20px auto}.card{padding:20px}.step{align-items:flex-start}.step button{position:absolute;right:38px}.local{display:none}footer{flex-wrap:wrap}}
