/* ── Reset & Variables ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0e17;--bg2:#111827;--bg-card:rgba(17,24,39,.85);--bg-term:#0d1117;
  --brd:rgba(56,189,248,.08);--brd-h:rgba(56,189,248,.22);
  --txt:#e2e8f0;--txt2:#94a3b8;--txt3:#475569;
  --blue:#38bdf8;--cyan:#22d3ee;--green:#34d399;--amber:#fbbf24;
  --red:#f87171;--purple:#a78bfa;--indigo:#818cf8;
  --glow:0 0 24px rgba(56,189,248,.08);--r:12px;--rs:8px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--txt);min-height:100vh;
  background-image:radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.04) 0%,transparent 60%);
}

/* ── Header ── */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:rgba(17,24,39,.92);
  border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.h-left{display:flex;align-items:center;gap:10px}
.logo{font-size:22px;filter:drop-shadow(0 0 6px rgba(56,189,248,.4))}
header h1{
  font-size:17px;font-weight:700;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.badge{
  display:flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:20px;background:rgba(255,255,255,.04);font-size:12px;color:var(--txt2);
}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--txt3);
  transition:all .3s;flex-shrink:0;
}
.dot.on{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
.dot.off{background:var(--red);box-shadow:0 0 6px rgba(248,113,113,.3)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.35)}50%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}
.h-right{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.h-info{font-size:11px;color:var(--txt2);font-family:'JetBrains Mono',monospace}
.h-val{color:var(--blue);font-weight:500}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 24px}
.stat{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--r);
  backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s;
}
.stat:hover{border-color:var(--brd-h);box-shadow:var(--glow)}
.stat-ico{font-size:22px}
.stat-val{
  font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;
  color:var(--blue);transition:color .25s,transform .15s;
}
.stat-val.pop{color:var(--cyan);transform:scale(1.12)}
.stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--txt3)}

/* ── Main Grid & Columns ── */
.main{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 24px 14px}
.left-col{display:flex;flex-direction:column;gap:14px}
.panel{
  background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
}
.p-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--brd);flex-wrap:wrap;gap:6px;
}
.p-head h2{font-size:13px;font-weight:600;white-space:nowrap}

/* ── Command Builder ── */
.builder-sec{padding:12px 14px;border-bottom:1px solid var(--brd)}
.builder-sec:last-child{border-bottom:none}
.builder-title{font-size:11px;font-weight:700;margin-bottom:8px;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}
.form-group{margin-bottom:10px}
.form-group:last-child{margin-bottom:0}
.form-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt2);margin-bottom:4px}
.cur-val{font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:10px;background:rgba(34,211,238,.08);padding:1px 5px;border-radius:4px;margin-left:6px;text-transform:none;letter-spacing:0;display:inline-block}
.form-row{display:flex;gap:6px;align-items:center}
.form-input,.form-select{
  flex:1;padding:6px 10px;background:rgba(0,0,0,.35);border:1px solid var(--brd);
  border-radius:var(--rs);color:var(--txt);font-size:11px;outline:none;
  transition:border-color .15s;font-family:inherit;
}
.form-input:focus,.form-select:focus{border-color:var(--blue)}
.form-btn{
  padding:6px 12px;background:rgba(56,189,248,.08);color:var(--blue);
  border:1px solid rgba(56,189,248,.12);border-radius:var(--rs);font-size:10px;
  font-weight:500;cursor:pointer;transition:all .15s;font-family:'JetBrains Mono',monospace;
}
.form-btn:hover{background:rgba(56,189,248,.18);border-color:var(--blue)}
.form-btn:active{transform:scale(.97)}
.form-btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#000;border:none;font-weight:600;
}
.form-btn-primary:hover{opacity:.85;box-shadow:0 0 8px rgba(56,189,248,.25)}

/* ── Quick Buttons ── */
.qbtn-row{display:flex;gap:4px;flex-wrap:wrap}
.qbtn{
  padding:3px 9px;font-size:10px;font-family:'JetBrains Mono',monospace;
  background:rgba(56,189,248,.08);color:var(--blue);
  border:1px solid rgba(56,189,248,.12);border-radius:5px;cursor:pointer;
  transition:all .15s;
}
.qbtn:hover{background:rgba(56,189,248,.18);border-color:var(--blue)}
.qbtn:active{transform:scale(.95)}

/* ── Terminal ── */
.term{
  flex:1;min-height:280px;max-height:420px;overflow-y:auto;padding:12px 14px;
  background:var(--bg-term);font-family:'JetBrains Mono',monospace;
  font-size:13px;line-height:1.8;word-break:break-all;color:var(--txt);
}
.term::-webkit-scrollbar{width:5px}
.term::-webkit-scrollbar-track{background:transparent}
.term::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.term::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}

/* ── Console Input ── */
.c-input{display:flex;border-top:1px solid var(--brd)}
.c-input input{
  flex:1;padding:10px 14px;background:rgba(0,0,0,.35);border:none;
  color:var(--txt);font-family:'JetBrains Mono',monospace;font-size:12px;outline:none;
}
.c-input input::placeholder{color:var(--txt3)}
.c-input button{
  padding:10px 18px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#000;border:none;font-weight:600;font-size:11px;cursor:pointer;
  transition:opacity .15s;text-transform:uppercase;letter-spacing:.5px;
}
.c-input button:hover{opacity:.85}

/* ── Log Controls ── */
.l-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.l-ctrl select,.l-ctrl input[type=text]{
  padding:3px 7px;font-size:10px;background:rgba(0,0,0,.3);
  border:1px solid var(--brd);border-radius:5px;color:var(--txt);outline:none;
}
.l-ctrl select{cursor:pointer}
.l-ctrl label{font-size:10px;color:var(--txt2);display:flex;align-items:center;gap:3px;white-space:nowrap}
.l-ctrl input[type=checkbox]{accent-color:var(--blue)}
.btn-sm{
  padding:3px 8px;font-size:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--brd);border-radius:5px;color:var(--txt2);
  cursor:pointer;transition:all .15s;
}
.btn-sm:hover{background:rgba(255,255,255,.08);color:var(--txt)}

/* ── Log & Console Lines ── */
.rx{color:var(--green)}.tx{color:var(--blue)}.sys{color:var(--cyan);font-style:italic}.ota-line{color:var(--purple)}
.ll{
  padding:3px 6px;
  border-radius: 4px;
  transition: background .15s, border-color .15s;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}
.ll:hover{background:rgba(255,255,255,.02)}
.ll.WARNING{border-left:3px solid var(--amber);background:rgba(251,191,36,.02);padding-left:6px}
.ll.ERROR{border-left:3px solid var(--red);background:rgba(248,113,113,.02);padding-left:6px}
.lt{color:#e0e7ff;display:inline-block;min-width:75px;flex-shrink:0}.ln{font-weight:500;display:inline-block;min-width:100px;flex-shrink:0}
.lv{font-weight:700;display:inline-block;min-width:70px;flex-shrink:0}
.lv.DEBUG{color:#a0aec0;background:rgba(160,174,192,.08);padding:1px 4px;border-radius:3px}
.lv.INFO{color:var(--cyan);background:rgba(34,211,238,.08);padding:1px 4px;border-radius:3px}
.lv.WARNING{color:var(--amber);background:rgba(251,191,36,.08);padding:1px 4px;border-radius:3px}
.lv.ERROR{color:var(--red);background:rgba(248,113,113,.08);padding:1px 4px;border-radius:3px}
.lm{flex:1;word-break:break-all}
.l-dup{
  color:var(--amber);
  background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.18);
  font-weight:600;
  padding:1px 5px;
  border-radius:4px;
  font-size:10px;
  flex-shrink:0;
  align-self:center;
}

/* ── Devices ── */
.section{padding:0 24px 14px}
.s-title{font-size:13px;font-weight:600;margin-bottom:10px}
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.dev{
  padding:14px;background:var(--bg-card);border:1px solid var(--brd);
  border-radius:var(--r);transition:all .3s;
}
.dev:hover{border-color:var(--brd-h);box-shadow:var(--glow)}
.dev.on{border-left:3px solid var(--green)}
.dev.off{border-left:3px solid var(--txt3);opacity:.55}
.dev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dev-name{font-weight:600;font-size:13px}
.dev-st{font-size:10px;padding:2px 8px;border-radius:10px}
.dev-st.on{background:rgba(52,211,153,.12);color:var(--green)}
.dev-st.off{background:rgba(100,116,139,.12);color:var(--txt3)}
.dev-info{font-size:11px;color:var(--txt2);line-height:1.8}
.dev-info code{font-family:'JetBrains Mono',monospace;color:var(--txt);font-size:10px}
.dev-empty{color:var(--txt3);font-size:12px;padding:18px;text-align:center}
.dev.flash{animation:devflash .8s ease-out}
@keyframes devflash{0%{border-color:var(--cyan);box-shadow:0 0 12px rgba(34,211,238,.2)}100%{border-color:var(--brd);box-shadow:none}}

/* ── OTA Update ── */
.ota-panel{background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:14px}
.ota-config{display:flex;flex-direction:column;gap:12px}
.ota-drop{
  border:2px dashed rgba(167,139,250,.25);border-radius:var(--r);padding:28px 16px;
  text-align:center;cursor:pointer;transition:all .2s;
}
.ota-drop:hover,.ota-drop.dragover{border-color:var(--purple);background:rgba(167,139,250,.04)}
.ota-drop.has-file{border-color:var(--green);border-style:solid;background:rgba(52,211,153,.04)}
.ota-drop-icon{font-size:28px;margin-bottom:6px}
.ota-drop-text{font-size:12px;color:var(--txt2)}
.ota-drop-info{font-size:11px;color:var(--green);font-family:'JetBrains Mono',monospace;margin-top:4px}
.ota-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ota-start-btn{padding:8px 20px!important;font-size:12px!important;white-space:nowrap}
.ota-cancel-btn{padding:8px 16px!important;font-size:11px!important;white-space:nowrap}
.ota-progress{display:flex;flex-direction:column;gap:8px}
.ota-progress-header{display:flex;justify-content:space-between;align-items:center}
.ota-status{font-size:12px;font-weight:500;color:var(--purple)}
.ota-status.success{color:var(--green)}.ota-status.error{color:var(--red)}
.ota-percent{font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--purple)}
.ota-bar-wrap{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.ota-bar{
  height:100%;border-radius:4px;transition:width .3s ease;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--blue));
  background-size:200% 100%;animation:otaShimmer 2s linear infinite;
}
@keyframes otaShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ota-bar.success{background:var(--green);animation:none}
.ota-bar.error{background:var(--red);animation:none}
.ota-stats{display:flex;gap:16px;font-size:10px;color:var(--txt2);font-family:'JetBrains Mono',monospace}

/* ── Network Discovery ── */
.scan-status{font-size:11px;color:var(--txt2);font-family:'JetBrains Mono',monospace}
.scan-status.scanning{color:var(--cyan);animation:pulse-status 1.5s infinite}
@keyframes pulse-status{0%,100%{opacity:.6}50%{opacity:1}}

/* ── Responsive ── */
@media(max-width:1024px){.main{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .stats{grid-template-columns:1fr}
  header{flex-direction:column;gap:8px}
  .p-head{flex-direction:column;align-items:flex-start}
}

/* ── Advanced OTA & Firmware Library Styling ── */
.ota-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .ota-layout-grid {
    grid-template-columns: 1fr;
  }
}

.ota-targets-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ota-target-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
}
.ota-target-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(56, 189, 248, 0.15);
}
.ota-target-item input[type="checkbox"] {
  accent-color: var(--blue);
  cursor: pointer;
  width: 12px;
  height: 12px;
}

.ota-target-meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}
.ota-target-name {
  font-weight: 600;
  color: var(--txt);
}
.ota-target-mac {
  font-family: 'JetBrains Mono', monospace;
  color: var(--txt2);
  margin-left: 6px;
}
.ota-target-ver {
  font-size: 8px;
  padding: 1px 4px;
  background: rgba(167, 139, 250, 0.12);
  color: var(--purple);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* Firmware Grid and Cards */
.firmware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.firmware-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--rs);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s;
  position: relative;
}
.firmware-card:hover {
  border-color: var(--brd-h);
  box-shadow: var(--glow);
  background: rgba(255, 255, 255, 0.03);
}

.fw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.fw-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  word-break: break-all;
}
.fw-size {
  font-size: 9px;
  color: var(--txt3);
  font-family: 'JetBrains Mono', monospace;
}

.fw-meta-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  font-size: 9px;
  color: var(--txt2);
  background: rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: 4px;
}
.fw-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fw-meta-label {
  font-size: 7px;
  text-transform: uppercase;
  color: var(--txt3);
  letter-spacing: 0.3px;
}
.fw-meta-val {
  color: var(--txt);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-desc-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fw-desc-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--txt);
  font-size: 10px;
  outline: none;
  transition: all 0.2s;
  resize: none;
  height: 36px;
}
.fw-desc-input:focus {
  border: 1px solid var(--blue);
  background: rgba(0, 0, 0, 0.5);
}

.fw-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

/* OTA Queue Row Styling */
.ota-queue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: var(--rs);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
  gap: 10px;
}
.queue-row.running {
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.02);
}
.queue-row.completed {
  border-color: rgba(52, 211, 153, 0.2);
  background: rgba(52, 211, 153, 0.02);
}
.queue-row.failed {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.02);
}

.queue-target-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 140px;
}
.queue-status-badge {
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}
.queue-status-badge.pending { background: rgba(148, 163, 184, 0.15); color: var(--txt2); }
.queue-status-badge.running { background: rgba(167, 139, 250, 0.15); color: var(--purple); }
.queue-status-badge.completed { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.queue-status-badge.failed { background: rgba(248, 113, 113, 0.15); color: var(--red); }

.queue-progress-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}
.queue-progress-bar-wrap.active {
  display: block;
}
.queue-progress-bar {
  height: 100%;
  background: var(--blue);
  width: 0;
  transition: width 0.3s ease;
}
.queue-progress-bar.running {
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--blue));
  background-size: 200% 100%;
  animation: otaShimmer 2s linear infinite;
}
.queue-progress-bar.completed { background: var(--green); }
.queue-progress-bar.failed { background: var(--red); }

.queue-err-text {
  color: var(--red);
  font-size: 9px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ota-seq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--txt3);
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  flex-shrink: 0;
  user-select: none;
}
.ota-seq-badge.selected {
  border-color: var(--blue);
  color: #000;
  background: var(--blue);
  font-weight: bold;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
}

.fw-title-input {
  background: transparent;
  border: 1px dashed transparent;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  outline: none;
  width: 75%;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s;
  font-family: inherit;
}
.fw-title-input:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.fw-title-input:focus {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--blue);
}

/* ── Interactive Keypad Grid ── */
.keyboard-interactive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 180px;
  margin: 10px auto;
}
.keypad-btn {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--brd);
  border-radius: var(--rs);
  color: var(--txt2);
  font-size: 14px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.keypad-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--brd-h);
  color: var(--txt);
}
.keypad-btn.active {
  background: rgba(52, 211, 153, 0.12);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  text-shadow: 0 0 4px var(--green);
}
.keypad-btn:active {
  transform: scale(0.95);
}