:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2230; --line:#2b3444;
  --fg:#e6edf3; --mut:#8b98a9; --acc:#3d9df6; --acc2:#2563eb;
  --ok:#3fb950; --err:#f85149; --warn:#d29922;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
.hidden{display:none!important}
button{cursor:pointer;font:inherit;border:0;border-radius:8px;padding:.55em 1em;background:var(--acc2);color:#fff}
button:hover{background:var(--acc)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
button.ghost:hover{background:var(--panel2)}
input,select,textarea{font:inherit;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:.5em .7em}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acc)}

/* login */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2em;width:320px;display:flex;flex-direction:column;gap:.8em}
.card h1{margin:0;font-size:1.4em}
.card .sub{margin:0 0 .5em;color:var(--mut)}
.err{color:var(--err);min-height:1.2em;font-size:.9em}

/* app */
header{display:flex;align-items:center;justify-content:space-between;padding:.8em 1.2em;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.15em}
.tag{color:var(--mut);font-weight:400;font-size:.75em;margin-left:.4em}
.right{display:flex;align-items:center;gap:.8em}
.pill{padding:.25em .7em;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:.8em}
.pill.ok{color:var(--ok);border-color:var(--ok)}
.pill.bad{color:var(--err);border-color:var(--err)}
.pill.busy{color:var(--warn);border-color:var(--warn)}

nav{display:flex;gap:.3em;padding:.6em 1.2em;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
nav button{background:transparent;color:var(--mut);border-radius:8px}
nav button.active{background:var(--panel2);color:var(--fg)}

main{padding:1.4em;max-width:900px;margin:0 auto}
.tab{display:none}
.tab.active{display:block}
h2{margin:.2em 0 1em}
.note{color:var(--mut);font-size:.9em}
.param-empty{padding:2em;border:1px dashed var(--line);border-radius:12px;color:var(--mut);text-align:center}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7em}
.grid .kv{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.8em}
.grid .kv .k{color:var(--mut);font-size:.8em}
.grid .kv .v{font-size:1.25em;font-weight:600;margin-top:.2em}
.grid .kv .v small{font-size:.6em;color:var(--mut);font-weight:400}
.grid .kv.big .v{font-size:1.7em;color:var(--acc)}
.grid .kv.warnval{border-color:var(--warn)}
.grid .kv.warnval .v{color:var(--warn)}
.statushead{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.telage{font-size:.85em;color:var(--mut);font-family:ui-monospace,monospace}
.telage.ok{color:var(--ok)} .telage.bad{color:var(--err)}
.alarmbar{display:flex;flex-wrap:wrap;gap:.4em;margin:.4em 0 1em}
.alarm{font-size:.78em;padding:.2em .6em;border-radius:6px;border:1px solid var(--line)}
.alarm.off{color:var(--mut)}
.alarm.on{background:var(--err);color:#fff;border-color:var(--err);font-weight:700}

/* RF vlastny panel */
.rfcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.1em 1.2em;margin-bottom:1em}
.rfhead{font-weight:600;font-size:1.05em;margin-bottom:.7em}
.rfhead .cmd{color:var(--mut);font-family:ui-monospace,monospace;font-size:.75em;margin-left:.3em}
.rfrow{display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.rflast{display:block;margin-top:.6em;color:var(--mut);font-size:.85em;font-family:ui-monospace,monospace}
button.step{width:2.2em;padding:.4em 0;font-size:1.1em;background:var(--panel2);border:1px solid var(--line)}
button.step:hover{background:var(--acc2)}
button.danger{background:var(--err)}
button.danger:hover{background:#ff6b60}
.pslider{flex:1;min-width:200px;accent-color:var(--acc)}
.ppct{min-width:3.5em;font-weight:700;font-size:1.15em;text-align:right}

/* control panels */
.panel{display:flex;flex-direction:column;gap:.5em;margin-bottom:1.5em}
.ctrl{display:flex;justify-content:space-between;align-items:center;gap:1em;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7em 1em;flex-wrap:wrap}
.ctrl.locked{border-style:dashed;opacity:.85}
.ctrl-label{min-width:14em;font-weight:500}
.ctrl-label .cmd{color:var(--mut);font-family:ui-monospace,monospace;font-size:.8em;margin-left:.3em}
.ctrl-label .lock{color:var(--warn);font-size:.8em;margin-left:.4em}
.ctrl-label .risk{background:var(--err);color:#fff;border-radius:4px;padding:0 .4em;font-size:.7em;margin-left:.4em}
.ctrl-inputs{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.ctrl-out{font-family:ui-monospace,monospace;font-size:.82em;color:var(--mut);min-width:8em}
.ctrl-out.ok{color:var(--ok)} .ctrl-out.warn{color:var(--warn)} .ctrl-out.bad{color:var(--err)}
.warn-banner{background:rgba(210,153,34,.12);border:1px solid var(--warn);color:#e8c37a;border-radius:10px;padding:.9em 1.1em;margin-bottom:1.2em}
h3{margin:1.2em 0 .6em;color:var(--mut)}
code{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 .35em;font-family:ui-monospace,monospace;font-size:.9em}

.console .row{display:flex;gap:1em;align-items:center;flex-wrap:wrap;margin-bottom:.7em}
.console textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace}
.console button{margin:.6em 0}
.out{background:#0a0d12;border:1px solid var(--line);border-radius:10px;padding:1em;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,Menlo,Consolas,monospace;min-height:4em;color:#9fe0a0}