:root{
  --bg1:#030712; --bg2:#0a0f1f; --glass:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.10); --accent:#00ffff; --text:#eafaff; --muted:#a9c2d6;
  --blue:#4faaff; --cyan:#00ffff; --red:#ff6b6b;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background: radial-gradient(900px 500px at 12% 10%, #063149 0%, transparent 40%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}
#app{max-width:1300px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:16px}

/* --- GLASS --- */
.glass{
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(150%);
  border-radius:16px;
  box-shadow:0 0 28px rgba(0,255,255,0.08);
}

/* --- HEADER --- */
.header{padding:16px 18px}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.header h1{color:var(--accent);text-shadow:0 0 12px rgba(0,255,255,0.55);font-size:1.6rem}
.tagline{color:var(--muted);margin-top:6px}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}

/* --- BUTTONS --- */
.btn{
  background:linear-gradient(180deg,#0ef,#09c9d3);
  border:0;border-radius:12px;color:#022127;
  padding:10px 14px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,255,255,0.28);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(0,255,255,.45)}
.btn.pill{border-radius:999px}
.btn.primary{background:linear-gradient(180deg,#0ef,#00b8ff)}
.btn.danger{background:linear-gradient(180deg,#ff8a8a,#ff5c5c);color:#1b0a0a}

/* --- DASHBOARD --- */
.controls-wrap{padding:14px}
.controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* auto-fit makes it adapt */
  gap: 14px 20px; /* more breathing room */
  align-items: start;
}

.controls-grid label{
  display:flex;flex-direction:column;gap:6px;
  color:var(--text);font-size:.94rem;
}
.controls-grid input,
.controls-grid select{
  padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.12);color:var(--text);outline:none;
}
/* --- Dropdown (fix for invisible options) --- */
select option {
  background-color: #0a0f1f; /* dark background, matches theme */
  color: #eafaff;           /* light text so it’s visible */
}

.controls-grid input::placeholder{color:#cfe8ffaa}
.controls-grid select:focus,
.controls-grid input:focus{box-shadow:0 0 0 2px rgba(0,255,255,0.35)}
.inline-val{margin-left:6px;opacity:.9}
.hidden{display:none !important}
.controls-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* --- SIM AREA --- */
.sim-shell{padding:10px}
.lanes{display:grid;grid-template-columns:220px 1fr 220px;gap:12px;align-items:start}
.lane h3{text-align:center;color:var(--accent);text-shadow:0 0 8px rgba(0,255,255,0.4);margin-bottom:8px}
.window,.queue,.recv{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:60px}
.frame{width:62px;height:42px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.frame.active{color:var(--accent);border-color:rgba(0,255,255,0.6);box-shadow:0 0 14px rgba(0,255,255,0.35)}

.channel{
  position:relative; height:520px; min-height:420px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:14px;
}
#channelStage {
  position: relative;
  width: 100%;
  height: 100%;
}

#liveSvg{position:absolute;inset:0}

.axis{position:absolute;top:10px;font-weight:800;opacity:.9}
.axis-left{left:12px}
.axis-right{right:12px}

/* moving elements */
.packet{
  position:absolute;min-width:72px;text-align:center;padding:7px 10px;border-radius:12px;
  background:linear-gradient(180deg,#00ffff,#00b7c2);color:#01242d;font-weight:800;
  box-shadow:0 8px 18px rgba(0,255,255,0.35);opacity:0
}
.packet.ack{background:linear-gradient(180deg,#cfe0ff,#79a7ff);color:#001a34}
.packet.lost{opacity:.28;text-decoration:line-through;filter:grayscale(.7)}

.log-shell{padding:12px}
.log-shell h3{text-align:left;margin-bottom:8px}
.log{max-height:220px;overflow:auto;color:#d9f2ff;padding:10px;line-height:1.35;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px}

/* --- SUMMARY --- */
#statsWrap{padding:14px}
#statsWrap h3{text-align:center;color:var(--accent);text-shadow:0 0 10px rgba(0,255,255,0.35);margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.stat-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);border-radius:12px;padding:12px}
.stat-label{color:var(--muted);font-size:0.9rem}
.stat-value{color:var(--text);font-weight:800;font-size:1.1rem}
.diagram-wrap{margin-top:12px}
.diagram-host{min-height:220px}
.glass-lite{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:8px}

.footer{text-align:center;color:var(--muted);margin:8px 0 12px}

/* --- MODAL --- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-card{width:min(900px,92vw);background:rgba(10,18,28,.92);border:1px solid rgba(255,255,255,.15);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.modal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1);padding:12px 14px}
.modal-head h3{color:#aef8ff}
.modal-body{padding:14px}
.icon-btn{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.bullets{margin:8px 0 12px 18px}
.video{display:flex;justify-content:center;margin-top:8px}
.dev-grid{display:grid;grid-template-columns:220px 1fr 1fr;gap:14px;align-items:center}
.dev-prof img{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.2)}
.dev-caption{margin-top:6px;color:#d6f4ff}
.dev-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px}
.dev-name{font-weight:800}
.steps{margin-left:18px}
.modal-body h4 {
  color: var(--accent);
  margin-top: 10px;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(0,255,255,0.3);
}

.modal-body p {
  line-height: 1.6;
  color: #d9f4ff;
}

.bullets li, .steps li {
  margin-bottom: 6px;
  color: #bdefff;
}

/* --- Scrollable Modals --- */
.modal-card {
  max-height: 90vh;            /* viewport height cap */
  overflow-y: auto;            /* vertical scroll if content is long */
  scrollbar-width: thin;       /* modern browsers (Firefox) */
  scrollbar-color: var(--accent) rgba(255,255,255,0.05);
}

/* for WebKit browsers (Chrome, Edge) */
.modal-card::-webkit-scrollbar {
  width: 8px;
}
.modal-card::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.modal-card::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

.modal-body {
  overflow-y: auto;
  max-height: 70vh;            /* ensures long content scrolls within modal */
  padding-right: 8px;
  line-height: 1.55;
}

/* smooth scroll and gentle fade look */
.modal-card {
  scroll-behavior: smooth;
  animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}