/* ============================================================
   Identity Bytes // Sentrion-inspired dark cyber theme
   Loaded LAST so it overrides all per-file inline styles.
   Guarantee: dark surfaces always carry light readable text.
   ============================================================ */
:root{
  --sn-bg-0:      #05070f;   /* deepest page bg              */
  --sn-bg-1:      #0a0f1e;   /* section / card surface       */
  --sn-bg-2:      #101733;   /* raised card / callout        */
  --sn-bg-3:      #182142;   /* hover / active               */
  --sn-line:      #1c2544;   /* hairline                     */
  --sn-line-2:    #2a3766;   /* stronger divider             */
  --sn-ink:       #e7ecff;   /* body text on dark            */
  --sn-ink-2:     #b6bfdb;   /* secondary text               */
  --sn-mute:      #7a86ad;   /* muted, meta labels           */
  --sn-cyan:      #00e0ff;   /* primary accent               */
  --sn-cyan-soft: rgba(0,224,255,.14);
  --sn-amber:     #ffb320;   /* secondary accent / warning   */
  --sn-amber-soft:rgba(255,179,32,.16);
  --sn-lime:      #7cff9a;   /* verify / success             */
  --sn-lime-soft: rgba(124,255,154,.14);
  --sn-magenta:   #ff4d8b;   /* danger                       */
  --sn-magenta-soft: rgba(255,77,139,.14);
  --sn-purple:    #a06bff;   /* track / secondary chip       */
  --sn-purple-soft: rgba(160,107,255,.16);
  --sn-code-bg:   #060916;
  --sn-code-line: #101a33;
  --sn-shadow:    0 22px 40px -18px rgba(0,224,255,.28), 0 8px 22px rgba(0,0,0,.55);
  --sn-font-sans: "Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --sn-font-mono: "JetBrains Mono","Cascadia Mono",ui-monospace,Consolas,monospace;
}

/* ---------- Global surface --------------------------------- */
html{background:var(--sn-bg-0) !important;}
body{
  background:var(--sn-bg-0) !important;
  color:var(--sn-ink) !important;
  font-family:var(--sn-font-sans) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  background:
    radial-gradient(60rem 42rem at 88% -6%, rgba(0,224,255,.10), transparent 60%),
    radial-gradient(52rem 40rem at -6% 42%, rgba(160,107,255,.10), transparent 65%),
    linear-gradient(180deg,#05070f 0%,#070b19 60%,#04060e 100%) !important;
}
body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background-image:
    linear-gradient(rgba(0,224,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,224,255,.05) 1px, transparent 1px);
  background-size:44px 44px, 44px 44px;
  opacity:.35;
  mask-image:radial-gradient(60rem 42rem at 60% 20%, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(60rem 42rem at 60% 20%, #000 20%, transparent 70%);
}

/* ---------- Wrappers --------------------------------------- */
.wrap,main.wrap,.start,.container,main{max-width:1120px !important;}

/* ---------- Hero ------------------------------------------- */
.hero{
  background:linear-gradient(135deg,#050813 0%, #0b1230 55%, #08132b 100%) !important;
  color:#fff !important;
  border-bottom:1px solid var(--sn-line-2) !important;
  padding:74px 0 62px !important;
  position:relative !important;
  overflow:hidden !important;
}
.hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(38rem 22rem at 92% 8%, rgba(0,224,255,.28), transparent 60%),
    radial-gradient(30rem 22rem at -4% 90%, rgba(160,107,255,.20), transparent 65%) !important;
  z-index:0 !important;
  display:block !important;
  opacity:1 !important;
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,transparent, var(--sn-cyan), transparent);
  opacity:.75;
}
.hero .wrap{position:relative !important; z-index:1 !important;}
.hero *{color:#fff !important;}
.hero .lede,.hero .lede *{color:#c9d2f5 !important;}
.brand{
  color:var(--sn-cyan) !important;
  font-family:var(--sn-font-mono) !important;
  font-size:11px !important;
  letter-spacing:.32em !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
}
h1{
  font-family:var(--sn-font-sans) !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  color:#fff !important;
  font-size:clamp(2.1rem, 5.2vw, 3.6rem) !important;
  line-height:1.08 !important;
  max-width:22ch;
}
h1 .accent{color:var(--sn-cyan) !important; text-shadow:0 0 24px rgba(0,224,255,.35);}

/* ---------- Badges ---------------------------------------- */
.badge{
  border-radius:2px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.04) !important;
  color:#e0e6ff !important;
  font-family:var(--sn-font-mono) !important;
  font-size:10.5px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
.badge.diff{background:var(--sn-cyan-soft) !important; color:var(--sn-cyan) !important; border-color:rgba(0,224,255,.4) !important;}
.badge.track{background:var(--sn-purple-soft) !important; color:#d3c1ff !important; border-color:rgba(160,107,255,.45) !important;}
.badge.time{background:rgba(255,255,255,.05) !important; color:#c9d2f5 !important;}

/* ---------- Sections -------------------------------------- */
section{
  padding:48px 0 !important;
  border-bottom:1px solid var(--sn-line) !important;
  position:relative;
}
section > .wrap, main > section{position:relative;}
.kicker{
  color:var(--sn-cyan) !important;
  font-family:var(--sn-font-mono) !important;
  font-size:11px !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
  display:inline-block !important;
  padding-left:14px !important;
  position:relative !important;
}
.kicker::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px;
  background:var(--sn-cyan);
  box-shadow:0 0 12px var(--sn-cyan);
}
h2,h3,h4,h5{color:var(--sn-ink) !important; letter-spacing:-.01em !important;}
h2{font-size:clamp(1.6rem,2.6vw,2.15rem) !important; font-weight:800 !important; margin:8px 0 18px !important;}
h3{font-size:1.2rem !important; font-weight:800 !important; color:#fff !important; margin-top:26px !important;}
h4{font-size:1rem !important; font-weight:800 !important; color:#d9dffa !important;}
p,li,dd,dt,td,th,label,span,small,em,strong,b{color:var(--sn-ink) !important;}
p{color:var(--sn-ink-2) !important;}
strong,b{color:#fff !important;}
small,.foot,.foot *{color:var(--sn-mute) !important;}

/* ---------- Links ----------------------------------------- */
a{
  color:var(--sn-cyan) !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(0,224,255,.35) !important;
  transition:color .15s ease, border-color .15s ease;
}
a:hover{color:#fff !important; border-bottom-color:#fff !important;}

/* ---------- Meta grid + tags ------------------------------ */
.meta .cell,.meta > *{
  background:var(--sn-bg-1) !important;
  border:1px solid var(--sn-line) !important;
  border-radius:4px !important;
  border-top:3px solid var(--sn-cyan) !important;
  box-shadow:none !important;
  color:var(--sn-ink) !important;
}
.meta .k{color:var(--sn-mute) !important; font-family:var(--sn-font-mono) !important; letter-spacing:.16em !important;}
.meta .v{color:#fff !important;}
.tag{
  background:var(--sn-bg-2) !important;
  color:var(--sn-cyan) !important;
  border:1px solid rgba(0,224,255,.28) !important;
  border-radius:2px !important;
  font-family:var(--sn-font-mono) !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  font-weight:700 !important;
  padding:4px 10px !important;
}

/* ---------- Tables ---------------------------------------- */
table{
  background:var(--sn-bg-1) !important;
  border:1px solid var(--sn-line) !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  border-radius:6px !important;
  overflow:hidden !important;
}
th{
  background:var(--sn-bg-2) !important;
  color:var(--sn-cyan) !important;
  font-family:var(--sn-font-mono) !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  border-color:var(--sn-line-2) !important;
}
td{
  background:transparent !important;
  color:var(--sn-ink) !important;
  border-color:var(--sn-line) !important;
}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.02) !important;}

/* ---------- Code ------------------------------------------ */
pre{
  background:var(--sn-code-bg) !important;
  color:#e0e6ff !important;
  border:1px solid var(--sn-code-line) !important;
  border-left:3px solid var(--sn-cyan) !important;
  border-radius:6px !important;
  box-shadow:inset 0 0 0 1px rgba(0,224,255,.04), 0 12px 30px -14px rgba(0,224,255,.20) !important;
  font-family:var(--sn-font-mono) !important;
}
pre *{color:#e0e6ff !important;}
pre .c,pre .comment,pre .token.comment{color:#6b7aa8 !important;}
pre .k,pre .keyword,pre .token.keyword{color:#7fd7ff !important;}
pre .s,pre .string,pre .token.string{color:#a6f0c6 !important;}
pre .v,pre .variable,pre .token.variable{color:#ffd479 !important;}
code,code.inl,kbd{
  background:var(--sn-bg-2) !important;
  color:var(--sn-cyan) !important;
  border:1px solid var(--sn-line) !important;
  border-radius:3px !important;
  padding:2px 6px !important;
  font-family:var(--sn-font-mono) !important;
  font-size:.9em !important;
}

/* ---------- Cards / steps / details ----------------------- */
.step,details,.card,.diagram,.start-card,.lab-link,.next,article{
  background:var(--sn-bg-1) !important;
  border:1px solid var(--sn-line) !important;
  border-radius:8px !important;
  color:var(--sn-ink) !important;
  box-shadow:none !important;
}
.step{border-left:3px solid var(--sn-cyan) !important;}
.step *{color:var(--sn-ink) !important;}
.step h3,.step h2,.step h4{color:#fff !important;}
.step .num{
  background:var(--sn-cyan) !important;
  color:#05070f !important;
  border-radius:4px !important;
  box-shadow:0 0 18px rgba(0,224,255,.35);
}
details{overflow:hidden !important;}
details[open]{box-shadow:0 12px 32px -14px rgba(0,224,255,.24) !important;}
summary{
  background:linear-gradient(90deg,var(--sn-cyan-soft), transparent) !important;
  color:#fff !important;
  border-bottom:1px solid var(--sn-line) !important;
  font-family:var(--sn-font-mono) !important;
  letter-spacing:.06em !important;
}
summary:before{color:var(--sn-cyan) !important;}
.details-body{color:var(--sn-ink) !important;}
.diagram,.diagram *{color:var(--sn-ink) !important;}
.diagram{background:var(--sn-bg-2) !important; border-color:var(--sn-line-2) !important;}

/* ---------- Callouts -------------------------------------- */
.call{
  background:var(--sn-bg-2) !important;
  border:1px solid var(--sn-line-2) !important;
  border-left:4px solid var(--sn-cyan) !important;
  border-radius:6px !important;
  color:var(--sn-ink) !important;
}
.call *{color:var(--sn-ink) !important;}
.call b{color:#fff !important; font-family:var(--sn-font-mono) !important; letter-spacing:.16em !important; text-transform:uppercase; font-size:.78rem;}
.call.info{border-left-color:var(--sn-cyan) !important; background:var(--sn-cyan-soft) !important;}
.call.warn{border-left-color:var(--sn-magenta) !important; background:var(--sn-magenta-soft) !important;}
.call.warn b{color:#ffd0e0 !important;}
.call.verify{border-left-color:var(--sn-lime) !important; background:var(--sn-lime-soft) !important;}
.call.verify b{color:#dfffe8 !important;}
.call.prod{border-left-color:var(--sn-amber) !important; background:var(--sn-amber-soft) !important;}
.call.prod b{color:#ffe7b8 !important;}

/* ---------- Orientation card (Entra track) ---------------- */
.ef-orientation-inner{
  background:linear-gradient(135deg,#0b1230,#101a3f) !important;
  border:1px solid var(--sn-line-2) !important;
  color:#fff !important;
  border-radius:10px !important;
  box-shadow:var(--sn-shadow) !important;
}
.ef-orientation-inner *{color:#fff !important;}
.ef-orientation-inner p{color:#c9d2f5 !important;}
.ef-eyebrow{
  background:var(--sn-cyan) !important;
  color:#05070f !important;
  border-radius:2px !important;
  font-family:var(--sn-font-mono) !important;
}
.ef-loop b{
  background:var(--sn-cyan) !important;
  color:#05070f !important;
}
.ef-orientation a{color:var(--sn-cyan) !important; border-bottom-color:var(--sn-cyan) !important;}
.ef-orientation-inner::after{display:none !important;}

/* ---------- Path track ------------------------------------ */
.ef-path{max-width:1120px !important;}
.ef-path-title{color:var(--sn-cyan) !important; font-family:var(--sn-font-mono) !important;}
.ef-track a,.ef-track span{color:var(--sn-mute) !important;}
.ef-track i{
  background:var(--sn-bg-1) !important;
  border:1px solid var(--sn-line) !important;
  color:var(--sn-ink) !important;
}
.ef-track .done i{background:var(--sn-lime-soft) !important; border-color:var(--sn-lime) !important; color:var(--sn-lime) !important;}
.ef-track .now i{
  background:var(--sn-cyan) !important;
  border-color:var(--sn-cyan) !important;
  color:#05070f !important;
  box-shadow:0 0 0 6px rgba(0,224,255,.18) !important;
}
.ef-track .now{color:#fff !important;}

/* ---------- Start Here landing (per file overrides) ------- */
.start-card{
  background:var(--sn-bg-1) !important;
  border:1px solid var(--sn-line) !important;
  color:var(--sn-ink) !important;
}
.start-card h2,.start-card h3{color:#fff !important;}
.lab-link{
  background:var(--sn-bg-1) !important;
  border:1px solid var(--sn-line) !important;
  border-left:3px solid var(--sn-cyan) !important;
  color:var(--sn-ink) !important;
  border-radius:6px !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lab-link:hover{
  border-left-color:var(--sn-amber) !important;
  box-shadow:0 14px 32px -18px rgba(0,224,255,.5) !important;
  transform:translateY(-2px);
}
.lab-link b{color:var(--sn-cyan) !important; font-family:var(--sn-font-mono) !important;}
.lab-link span{color:#fff !important;}
.lab-link small{color:var(--sn-mute) !important;}

/* ---------- Next-step banner ------------------------------ */
.next{
  background:linear-gradient(100deg,var(--sn-cyan-soft), var(--sn-purple-soft)) !important;
  border:1px solid var(--sn-line-2) !important;
  color:#fff !important;
}
.next *{color:#fff !important;}

/* ---------- Pill / misc ----------------------------------- */
.pill{background:var(--sn-cyan) !important; color:#05070f !important; border-radius:2px !important; font-family:var(--sn-font-mono) !important;}

/* ---------- Utility fixes: images, blockquotes ------------ */
blockquote{
  background:var(--sn-bg-1) !important;
  border-left:3px solid var(--sn-amber) !important;
  color:var(--sn-ink) !important;
  padding:14px 18px !important;
}
hr{border:0 !important; border-top:1px solid var(--sn-line) !important;}
img,svg{max-width:100%;}

/* ---------- Selection ------------------------------------- */
::selection{background:var(--sn-cyan) !important; color:#05070f !important;}

/* ---------- Scrollbars (webkit) --------------------------- */
::-webkit-scrollbar{width:12px; height:12px;}
::-webkit-scrollbar-track{background:var(--sn-bg-0);}
::-webkit-scrollbar-thumb{background:var(--sn-bg-3); border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--sn-line-2);}

/* ---------- Reduced motion -------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}

/* ---------- Responsive ------------------------------------ */
@media(max-width:720px){
  .hero{padding:56px 0 46px !important;}
  h1{font-size:2rem !important;}
  section{padding:36px 0 !important;}
}