:root{
  --bg:#0b0f14; --card:#121a24; --muted:#9aa7b2; --text:#e8eef2;
  --accent:#4da3ff; --accent2:#7dd3fc; --danger:#ff5b5b; --border:#223246;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text)}
.header{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); gap:10px}
.headerLeft{display:flex; flex-direction:column; gap:2px}
.headerRight{display:flex; gap:10px; align-items:center}
h1{margin:0; font-size:20px}
.sub{color:var(--muted); font-size:12px; margin-top:8px}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; margin:14px 18px; padding:14px}
.cardHeader{display:flex; align-items:center; gap:12px}
.chartTitle{margin:0}
.legendWrap{flex:1; display:flex; justify-content:center}
.chartActions{justify-content:flex-end}
.grid{display:grid; grid-template-columns: 220px 320px 320px 260px; gap:12px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
.field label{display:block; color:var(--muted); font-size:12px; margin-bottom:6px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
button{background:var(--accent); color:#07111c; border:none; padding:9px 12px; border-radius:10px; font-weight:700; cursor:pointer}
button.secondary{background:#24364c; color:var(--text)}
button.danger{background:var(--danger); color:#220606}
button:disabled{opacity:.55; cursor:not-allowed}
select,input{background:#0c131c; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:9px 10px}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono','Courier New', monospace}
.pill{background:#192536; border:1px solid var(--border); padding:8px 10px; border-radius:999px; font-weight:800; color:var(--accent2)}
.chk{color:var(--muted); font-size:12px}
.stats{margin-top:10px; color:var(--muted); font-size:12px}
.details{margin-top:12px}
.link{color:var(--accent2)}
pre{white-space:pre-wrap; word-break:break-all}

/* Legend in header */
.legend{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12px; justify-content:center}
.legendItem{display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none}
.legendBox{width:10px; height:10px; border-radius:2px; background:#999}
.legendItem.off{opacity:.45; text-decoration:line-through}

/* Views */
.views{padding-bottom:64px}
.view{display:block}
body.ui-mobile .view:not(.active){display:none}
body.ui-desktop .view{display:block}

/* Mobile nav */
.mnav{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; gap:8px; padding:10px 12px; background:rgba(11,15,20,.92); border-top:1px solid var(--border); backdrop-filter: blur(8px)}
.mnavBtn{flex:1; padding:10px 12px; border-radius:12px; background:#24364c; color:var(--text); font-weight:800}
.mnavBtn.active{background:#22c55e; color:#000}
body.ui-mobile .mnav{display:flex}

.canvasWrap{width:100%; overflow-x:auto}

/* Chips */
.chipsRow{display:flex; gap:10px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#9ca3af; color:#000; font-weight:400; font-size:12px}
.chip.on{background:#22c55e; color:#000}
.chip.off{background:#9ca3af; color:#000}

/* active buttons outline */
button.active{outline:2px solid var(--accent2); box-shadow:0 0 0 2px rgba(125,211,252,.22) inset;}

/* Manual spacing */
.manualBox{display:flex; flex-direction:column; gap:14px; margin-top:10px}
.manualRow{display:flex; align-items:center; gap:16px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#0c131c}
.manualLabel{min-width:90px; color:var(--text); font-weight:700}

/* Control header */
.controlHeader{justify-content:flex-start}
.controlTitle{margin:0}
.controlMode{margin-left:10px}

/* Settings layout grid */
.cfgForm{display:grid; grid-template-columns: 360px 10ch 3ch; column-gap:10px; row-gap:10px; align-items:center; margin-top:10px; width:max-content}
.cfgLine{display:contents}
.cfgName{color:var(--muted)}
.cfgVal{width:10ch; text-align:left; padding:8px 10px}
.cfgU{color:var(--muted)}
.btnSaveAll{grid-column:1 / 4; width:100%; justify-self:start}

/* Fullscreen overlay */
.fs{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.88); display:none; flex-direction:column}
.fs.show{display:flex}
.fsTop{display:flex; justify-content:space-between; align-items:center; padding:12px; background:rgba(11,15,20,.92); border-bottom:1px solid var(--border)}
.fsTopRight{display:flex; gap:10px; align-items:center}
.fsTitle{font-weight:900}
.fsClose{background:#9ca3af; color:#000}
.fsBody{flex:1; min-height:0; padding:10px}
#fsCanvas{display:block; width:100% !important; height:100% !important;}

/* Login modal */
.modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6)}
.modal.show{display:flex}
.modalCard{width:min(420px, calc(100% - 24px)); background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.modalTop{padding:12px 14px; border-bottom:1px solid var(--border)}
.modalTitle{font-weight:900}
.modalBody{padding:14px; display:flex; flex-direction:column; gap:12px}
.modalField{display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px}
.modalField input{width:100%}
.modalActions{display:flex; justify-content:flex-end; gap:10px; margin-top:4px}

.phoneOnly{display:none}

@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .card{margin:12px 12px}
  input,select{width:100%}
  .cfgForm{grid-template-columns: 1fr; width:100%}
  .cfgLine{display:flex; gap:10px; align-items:center}
  .cfgName{flex:1}
  .cfgVal{width:100%}
  .btnSaveAll{grid-column:auto; width:100%}
  .legendWrap{justify-content:flex-start}
  .phoneOnly{display:inline-flex}
}