*, body { font-family:'DM Sans',sans-serif; }
.font-display, h1,h2,h3,h4 { font-family:'Syne',sans-serif; }

/* ── Layout base ─── */
body { background:#070d1a; color:#cbd5e1; min-height:100vh; }
.bg-grid {
  background-image: linear-gradient(rgba(20,184,166,.05) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(20,184,166,.05) 1px,transparent 1px);
  background-size: 36px 36px;
}

/* ── Cards ── */
.card  { background:rgba(15,23,42,.8); border:1px solid rgba(20,184,166,.15); border-radius:1rem; backdrop-filter:blur(12px); }
.card2 { background:rgba(11,17,32,.9); border:1px solid rgba(20,184,166,.1);  border-radius:.75rem; }

/* ── Inputs ── */
.inp {
  width:100%; background:rgba(7,13,26,.9);
  border:1px solid rgba(20,184,166,.2); border-radius:.5rem;
  color:#e2e8f0; padding:.5rem .8rem; font-size:.875rem;
  outline:none; transition:border-color .15s,box-shadow .15s;
}
.inp:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.15); }
.inp::placeholder { color:#334155; }
.inp:disabled { opacity:.4; cursor:not-allowed; }
label { font-size:.75rem; font-weight:500; color:#64748b; letter-spacing:.04em; display:block; margin-bottom:.25rem; }

/* ── Buttons ── */
.btn-primary { background:#0d9488; color:#fff; border-radius:.6rem; padding:.55rem 1.2rem; font-family:'Syne',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:.03em; transition:background .15s,transform .1s; cursor:pointer; border:none; }
.btn-primary:hover  { background:#0f766e; }
.btn-primary:active { transform:scale(.97); }
.btn-ghost  { background:transparent; border:1px solid rgba(20,184,166,.25); color:#5eead4; border-radius:.6rem; padding:.5rem 1rem; font-size:.82rem; cursor:pointer; transition:all .15s; }
.btn-ghost:hover  { background:rgba(20,184,166,.08); }
.btn-danger { background:transparent; border:1px solid rgba(239,68,68,.3); color:#f87171; border-radius:.6rem; padding:.5rem 1rem; font-size:.82rem; cursor:pointer; transition:all .15s; }
.btn-danger:hover { background:rgba(239,68,68,.1); }

/* ── Sidebar ── */
.sidebar { background:rgba(7,13,26,.95); border-right:1px solid rgba(20,184,166,.1); width:240px; flex-shrink:0; }
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.65rem 1rem; border-radius:.5rem; margin:.1rem .5rem; font-size:.85rem; cursor:pointer; transition:all .15s; color:#64748b; }
.nav-item:hover   { background:rgba(20,184,166,.07); color:#94a3b8; }
.nav-item.active  { background:rgba(20,184,166,.12); color:#5eead4; }
.nav-item svg     { width:18px; height:18px; flex-shrink:0; }

/* ── Stat cards ── */
.stat { background:rgba(20,184,166,.06); border:1px solid rgba(20,184,166,.12); border-radius:.75rem; padding:1rem 1.25rem; }

/* ── Table ── */
.tbl { width:100%; font-size:.84rem; }
.tbl thead tr { border-bottom:1px solid rgba(20,184,166,.15); }
.tbl thead th { padding:.6rem 1rem; text-align:left; font-family:'Syne',sans-serif; font-size:.7rem; letter-spacing:.08em; color:#0d9488; text-transform:uppercase; font-weight:600; }
.tbl tbody tr { border-bottom:1px solid rgba(15,23,42,.6); transition:background .12s; }
.tbl tbody tr:hover { background:rgba(20,184,166,.04); }
.tbl tbody td { padding:.7rem 1rem; color:#94a3b8; }

/* ── Badge ── */
.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; }
.badge-green  { background:rgba(20,184,166,.12); color:#2dd4bf; }
.badge-red    { background:rgba(239,68,68,.12);  color:#f87171; }
.badge-yellow { background:rgba(234,179,8,.12);  color:#facc15; }

/* ── Animations ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.fade-up  { animation:fadeUp .3s ease both; }
@keyframes spin { to{transform:rotate(360deg)} }
.spin { animation:spin .7s linear infinite; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#070d1a; }
::-webkit-scrollbar-thumb { background:#0d9488; border-radius:3px; }

/* ── Protocol toggle chips ── */
.chip { border:1px solid rgba(20,184,166,.2); border-radius:.5rem; padding:.5rem .9rem; cursor:pointer; font-size:.8rem; transition:all .15s; color:#64748b; user-select:none; }
.chip.on { background:rgba(20,184,166,.15); border-color:#0d9488; color:#5eead4; }

/* ── Result metric ── */
.metric { background:rgba(7,13,26,.8); border:1px solid rgba(20,184,166,.1); border-radius:.7rem; padding:.8rem; text-align:center; }
.metric .val { font-family:'Syne',sans-serif; font-size:1.5rem; color:#5eead4; }
.metric .lbl { font-size:.68rem; color:#475569; margin-top:.2rem; }

/* ── Modal ── */
.modal-bg { position:fixed;inset:0;background:rgba(7,13,26,.85);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem; }
.modal    { background:#0b1120;border:1px solid rgba(20,184,166,.2);border-radius:1.25rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto; }