:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#0ea5e9;
  --ok:#16a34a;
  --warn:#eab308;
  --bad:#ef4444;
  --border:#e2e8f0;
  --shadow: 0 2px 10px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:24px}

.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{font-size:22px;font-weight:700;letter-spacing:.2px}
.subtle{color:var(--muted);font-size:14px}
.backlink{display:inline-block;margin:8px 0 12px 0;text-decoration:none;color:var(--brand);font-weight:600}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:16px}
.grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}

.big{font-size:28px;font-weight:700}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{text-align:left;font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em;padding:12px;border-bottom:1px solid var(--border)}
.table td{padding:14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:hover td{background:#fbfdff}

.controls{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:#fff;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
.btn:hover{border-color:#cbd5e1}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.btn.danger{background:var(--bad);color:#fff;border-color:transparent}
.btn.warn{background:var(--warn);color:#000;border-color:transparent}
.btn:disabled{opacity:.55;cursor:not-allowed}

.status-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid var(--border)}
.status-pill.ok{background:#eafff0;border-color:#bbf7d0;color:#166534}
.status-pill.bad{background:#ffecec;border-color:#fecaca;color:#991b1b}
.status-pill.unknown{background:#fff9e6;border-color:#fde68a;color:#92400e}
.status-pill.warn{background:#fff4e5;border-color:#fed7aa;color:#9a3412}

/* Device page layout */
.sysgrid{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sysgrid .left{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.sysgrid .right .btn{margin-left:8px}

.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col{display:flex;flex-direction:column;gap:12px}
.process{padding:14px}
.process h4{margin:0 0 6px 0}
.process.ok{border-left:4px solid var(--ok)}
.process.bad{border-left:4px solid var(--bad)}
.process.unknown{border-left:4px solid var(--warn)}
.meta .mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

.badge{font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;border:1px solid var(--border)}
.badge.encoder{background:#eef6ff}
.badge.whip{background:#eefcf3}
.badge.file{background:#fff7ed}
.badge.rf{background:#f8f5ff}

.btn.active { outline: 2px solid #c00; box-shadow: 0 0 0 3px rgba(204,0,0,.25); }

.grid.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg, 1.2rem); }
@media (max-width: 1100px) { .grid.split-2 { grid-template-columns: 1fr; } }

.table.compact td, .table.compact th { padding: .5rem .6rem; }
.logview { background: var(--card, #fff); border: 1px solid #e7e7e7; border-radius: 12px; padding: .75rem; height: 320px; overflow: auto; }
.w-120 { width: 120px; } .w-160 { width:160px; }


/* Presets */
.preset-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.preset-lock{display:flex;gap:8px;align-items:center}
.preset-lock .state{font-weight:700}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:10px}
.preset-category h4{margin:0 0 8px 0;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:6px;font-size:14px}
.preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-btn{padding:12px 10px;text-align:center;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;min-height:56px;font-weight:700}
.preset-btn:hover{background:#f8fafc}
/*.preset-btn .sub{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:4px}*/
.preset-btn.active{outline:2px solid var(--brand); box-shadow:0 0 0 2px rgba(14,165,233,.2) inset;}
.preset-status{text-align:center;padding:8px 0;font-weight:600;color:var(--muted)}
@media (max-width:900px){.preset-grid{grid-template-columns:1fr}.preset-buttons{grid-template-columns:1fr}}

/* Add preset target highlighting */
.preset-target-selector {
  margin-top: 12px;
  padding: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
}

.preset-target-selector label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #495057;
}

.preset-target-selector select {
  width: 100%;
  max-width: 200px;
}

.preset-target-selector small {
  display: block;
  margin-top: 4px;
  color: #6c757d;
}

/* Make preset buttons show their target */
.preset-btn .sub {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Modal for See Config */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:9999}
.modal.show{display:flex}
.modal .box{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);max-width:860px;width:92%;max-height:80vh;overflow:auto}
.modal .head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal .body{padding:16px}
.table.kv-table{width:100%;border-collapse:separate;border-spacing:0}
.table.kv-table td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:14px}
.table.kv-table td.key{width:38%;color:var(--muted)}

/* Placeholder cards */
.placeholder{display:flex;justify-content:space-between;align-items:center;padding:14px}
.placeholder .title{font-weight:700}
.placeholder .sub{color:var(--muted)}