:root{ 
  --maxw: 1100px; 
  --pad: 20px;

  /* Neon theme */
  --bg: #070A12;
  --bg2: #0A1020;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.60);

  --neonA: #6D5EF8; /* purple */
  --neonB: #2DE2E6; /* cyan */
  --neonC: #FF4FD8; /* pink (sparingly) */

  /* Cards (readability-first) */
  --card: rgba(255,255,255,.90);
  --card2: rgba(255,255,255,.86);
  --cardText: rgba(0,0,0,.90);
  --border: rgba(255,255,255,.12);

  --radius: 16px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.7;

  background:
    radial-gradient(900px 420px at 15% -10%, rgba(109,94,248,.35), transparent 60%),
    radial-gradient(700px 360px at 85% 0%, rgba(45,226,230,.25), transparent 55%),
    radial-gradient(900px 520px at 50% 110%, rgba(255,79,216,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));

  color: var(--text);
}

a{ color: inherit; }
a:hover{ text-decoration: underline; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: var(--pad); }

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(7,10,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: inherit;
}

/* ✅ logo: remove text, use abstract "packet/frame" icon */
.logo{
  width: 36px;
  height: 36px;
  border-radius: 10px;

  background: linear-gradient(135deg, var(--neonA), var(--neonB));
  position: relative;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 18px rgba(109,94,248,.25),
    0 0 22px rgba(45,226,230,.18);
}

/* packet / network lines */
.logo::before,
.logo::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.85);
}
.logo::after{
  inset: 14px;
  opacity: .7;
}

.brand-title{ font-weight: 900; }

/* Nav */
.nav a{
  margin-left: 14px;
  text-decoration:none;
  opacity:.86;
}
.nav a:hover{ text-decoration: underline; opacity:1; }
.nav a[aria-current="page"]{
  opacity: 1;
  font-weight: 900;
  position: relative;
}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neonA), var(--neonB));
}

/* Cards (light) */
.card{
  border-radius: var(--radius);
  padding: 14px;
  background: var(--card);
  color: var(--cardText);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.32) inset;
}
.card.soft{ background: var(--card2); }

/* Hero */
.hero h1{
  margin: 10px 0 8px;
  font-size: 28px;
  line-height: 1.25;
}
.hero p{ margin: 0 0 10px; opacity: .95; }
.hint{ font-size: 13px; opacity: .78; }

/* Layout */
.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

.smalllinks{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  font-size: 13px;
  opacity: .92;
}
.tag{
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  opacity: .9;
}

/* Inputs */
.search{ display:flex; gap: 10px; margin-top: 8px; }
.search input{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  outline: none;
}
.search input:focus{
  border-color: rgba(109,94,248,.55);
  box-shadow: 0 0 0 4px rgba(109,94,248,.18);
}

/* Lists */
.section-title{
  margin: 18px 0 10px;
  font-size: 15px;
  opacity: .90;
}
.list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding-left: 0;
  list-style: none;
  margin: 0;
}
@media (max-width: 700px){ .list{ grid-template-columns: 1fr; } }

.item{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
}
.item a{ text-decoration:none; font-weight: 800; }
.item a:hover{ text-decoration: underline; }
.meta{ font-size: 12px; opacity: .72; white-space: nowrap; }
.soon{ opacity: .55; }

/* =========================
   Layer Badge (L2/L3/L4/L7)
   ========================= */
.layer-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;

  padding: 2px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.85);

  border: 1px solid rgba(0,0,0,.10);
  opacity: .95;
}
.layer-badge .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;

  background: linear-gradient(135deg, var(--neonA), var(--neonB));
  box-shadow:
    0 0 6px rgba(109,94,248,.35),
    0 0 10px rgba(45,226,230,.25);
}

/* Article (Phase2+) */
article h2{ margin: 18px 0 8px; font-size: 20px; }
article h3{ margin: 14px 0 6px; font-size: 16px; opacity:.92; }
article p{ margin: 0 0 10px; }
article ul, article ol{ margin: 8px 0 12px 20px; }
article li{ margin: 4px 0; }

table{
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: 14px;
}
th, td{
  border: 1px solid rgba(0,0,0,.10);
  padding: 8px 10px;
  vertical-align: top;
}
th{
  background: rgba(0,0,0,.03);
  text-align:left;
}

pre, code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  overflow:auto;
}
code{ background: rgba(0,0,0,.04); padding: 1px 6px; border-radius: 8px; }

/* Ad slots (still gated by data-ads) */
.ad{
  display:none;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
  opacity: .9;
}

/* Footer */
.footer{
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(7,10,18,.55);
  backdrop-filter: blur(10px);
}
.footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer a{
  text-decoration:none;
  opacity:.90;
  margin-right: 12px;
  color: rgba(255,255,255,.92);
}
.footer a:hover{ text-decoration: underline; opacity:1; }
.copyright{ font-size: 12px; opacity:.78; }


/* =========================
   Dictionary P0 v1.3 (safe scoped)
   Only affects <article class="content"> inside dictionary pages
   ========================= */

/* Wireshark filter block */
.content pre.ws-filter{
  margin: 0.5em 0 1em;
  padding: 0.75em 0.9em;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.10);
  overflow-x: auto;
}
.content pre.ws-filter code{
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.98em;
  user-select: text;
}

/* Issue title: a bit larger and clear */
.content h3{
  font-size: 1.20em;
  font-weight: 900;
  margin: 1.7em 0 0.55em;
  opacity: 1;
}

/* Issue block: readable without excessive indent */
.content dl.issue{
  margin: 0.6em 0 1.4em;
  padding: 0.9em 1em;
  border-radius: 12px;
  background: rgba(0,0,0,0.035);
  border: 1px solid rgba(0,0,0,0.10);
}
.content dl.issue dt{
  font-weight: 900;
  margin-top: 0.6em;
}
.content dl.issue dd{
  margin: 0.2em 0 0.6em;
  opacity: 0.98;
  line-height: 1.75;
}
.content dl.issue dd + dt{
  margin-top: 0.75em;
}