:root{--bg: #0d1017;--bg-elevated: #151a24;--bg-inset: #0a0d13;--border: #262f40;--text: #e8ecf4;--text-dim: #93a0b4;--accent: #55b7ff;--accent-strong: #2a94e8;--green: #3ad07f;--yellow: #f4b942;--red: #ff5468;--radius: 12px;--touch: 48px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.45}#app{min-height:100vh;display:flex;flex-direction:column}button,input,select{font:inherit;color:inherit}h1,h2,h3{margin:0 0 .5rem;line-height:1.2}.app-header{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.75rem 1.25rem;background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.app-header__title{font-size:1.1rem;font-weight:700;letter-spacing:.02em;margin:0}.app-nav{display:flex;gap:.5rem}.app-nav a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 1.1rem;border-radius:var(--radius);color:var(--text-dim);text-decoration:none;font-weight:600}.app-nav a.router-link-exact-active{background:var(--bg-inset);color:var(--accent);box-shadow:inset 0 0 0 1px var(--border)}.app-header__side{margin-left:auto;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.conn-badge{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--touch);padding:0 .9rem;border-radius:var(--radius);background:var(--bg-inset);border:1px solid var(--border);font-weight:600;font-size:.9rem}.conn-badge__dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--text-dim)}.conn-badge--connected .conn-badge__dot{background:var(--green)}.conn-badge--connecting .conn-badge__dot,.conn-badge--reconnecting .conn-badge__dot{background:var(--yellow)}.conn-badge--idle .conn-badge__dot{background:var(--red)}.locale-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.locale-switch button{min-height:var(--touch);min-width:3.25rem;border:none;background:var(--bg-inset);color:var(--text-dim);cursor:pointer;font-weight:700}.locale-switch button[aria-pressed=true]{background:var(--accent-strong);color:#fff}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:1.25rem}.panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1.25rem}.panel__title{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--touch);padding:0 1.4rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-inset);color:var(--text);font-weight:700;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.btn--danger{background:transparent;border-color:var(--red);color:var(--red)}.btn--ghost{background:transparent}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}.field label{font-size:.85rem;font-weight:600;color:var(--text-dim)}.field input,.field select{min-height:var(--touch);padding:0 .85rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-inset)}.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}.hint{color:var(--text-dim);font-size:.9rem;margin:.4rem 0 0}.hint--warn{color:var(--yellow)}.hint--error{color:var(--red)}.value--warn{color:var(--yellow);font-weight:700}.value--alert{color:var(--red);font-weight:700}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.device-card{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.65rem}.device-card--green{border-left:6px solid var(--green)}.device-card--yellow{border-left:6px solid var(--yellow)}.device-card--red{border-left:6px solid var(--red)}.device-card__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.device-card__name{font-weight:700;font-size:1.05rem}.device-card__row{display:flex;justify-content:space-between;gap:.75rem;font-size:.95rem}.device-card__row dt{color:var(--text-dim);margin:0}.device-card__row dd{margin:0;font-variant-numeric:tabular-nums}.device-card dl{margin:0;display:flex;flex-direction:column;gap:.35rem}.ampel{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .75rem;border-radius:999px;font-weight:700;font-size:.9rem;border:1px solid}.ampel__symbol{font-weight:900}.ampel--green{color:var(--green);border-color:var(--green);background:#3ad07f1f}.ampel--yellow{color:var(--yellow);border-color:var(--yellow);background:#f4b9421f}.ampel--red{color:var(--red);border-color:var(--red);background:#ff54681f}.battery{display:flex;align-items:center;gap:.5rem}.battery__track{flex:1;height:.6rem;border-radius:999px;background:var(--bg-elevated);border:1px solid var(--border);overflow:hidden}.battery__fill{height:100%;background:var(--green)}.battery__fill--warn{background:var(--red)}.safety{border:1px dashed var(--yellow);border-radius:var(--radius);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.4rem;background:#f4b9420f}.safety__tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}.safety__control{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:var(--touch);cursor:pointer}.safety__state{font-weight:700}.safety__state--on{color:var(--yellow)}.switch{position:relative;display:inline-block;width:3.4rem;height:1.9rem;flex-shrink:0}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch__slider{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--bg-elevated);border:1px solid var(--border);transition:background .15s ease;pointer-events:none}.switch__slider:before{content:"";position:absolute;top:.2rem;left:.2rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--text-dim);transition:transform .15s ease,background .15s ease}.switch input:checked+.switch__slider{background:var(--yellow);border-color:var(--yellow)}.switch input:checked+.switch__slider:before{transform:translate(1.45rem);background:#1a1a1a}.switch input:focus-visible+.switch__slider{outline:2px solid var(--accent);outline-offset:2px}.lifecycle{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.state-badge{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 1rem;border-radius:var(--radius);background:var(--bg-inset);border:1px solid var(--border);font-weight:700}.state-badge--running{border-color:var(--green);color:var(--green)}.state-badge--paused{border-color:var(--yellow);color:var(--yellow)}.state-badge--ready-check{border-color:var(--accent);color:var(--accent)}.difficulty{display:flex;align-items:center;gap:1rem;margin-top:1rem}.difficulty input[type=range]{flex:1;max-width:22rem;accent-color:var(--accent);height:var(--touch)}.difficulty__value{font-weight:700;min-width:5.5rem}.stats-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.stat-chip{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius);padding:.55rem .9rem;display:flex;flex-direction:column;gap:.15rem;min-width:7.5rem}.stat-chip__label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.stat-chip__value{font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums}.stat-chip--total{border-color:var(--accent)}.slot-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end;margin-bottom:.5rem}@media(max-width:640px){.slot-row{grid-template-columns:1fr}}.table-wrap{overflow-x:auto}.catalog-table{width:100%;border-collapse:collapse;min-width:640px}.catalog-table th,.catalog-table td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--border)}.catalog-table th{color:var(--text-dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.catalog-table tbody tr:hover{background:var(--bg-inset)}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070ac7;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.dialog{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;width:min(28rem,100%)}
