/* ═══════════════════════════════════════════════════════════════════════════
   AI CODE SHERLOCK — SHARED RESPONSIVE FOUNDATION + UNIFIED CHROME
   Loaded on every page. Self-contained colours so the nav/footer render
   pixel-identically regardless of each page's own :root palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. GLOBAL SAFETY NET (kills horizontal overflow on every breakpoint) ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, video, svg, canvas, iframe, embed, object { max-width: 100%; height: auto; }
/* Long unbroken strings (URLs, tokens) never push the layout wider than screen */
p, li, td, th, dd, dt, blockquote, figcaption, .sh-wrap, .breakable,
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Wide code blocks scroll instead of overflowing the page */
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code { white-space: pre; }
/* Inline code wraps */
:not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
/* Wrap any data table that's wider than its container */
.sh-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 0b. NARROW-SCREEN GUARDS (≤480px) — applies to every page ──
   Card titles & descriptions are usually <div>s with monospace text that
   letter-stack on phones. Force sane wrapping and kill any residual overflow. */
@media (max-width: 480px) {
  body { overflow-x: hidden; }
  /* Any element that holds visible copy wraps cleanly instead of stacking letters */
  div, span, a, strong, em, b, label, button {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Common card/heading class patterns across the site */
  .ctit, .cdsc, .snm, .sdsc, .le-ft, .le-fd, .np-stept, .np-stepd,
  .fmt, .fmd, .stit, .ssub, .slbl, .mi-t, .mi-d, .sh-mi2 .mi-t {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ── 1. UNIFIED NAV ───────────────────────────────────────────────────────
   Scoped --sh-* tokens so it looks the same on indigo and Tokyo-Night pages. */
.sh-nav {
  --sh-bg:#07080c; --sh-bg2:#0d0f18; --sh-card:#0f1219;
  --sh-bd:rgba(99,102,241,.16); --sh-bdh:rgba(99,102,241,.42);
  --sh-ac:#6366f1; --sh-cy:#22d3ee; --sh-pu:#a855f7;
  --sh-t1:#e2e8f0; --sh-t2:#94a3b8; --sh-t3:#475569;
  --sh-mono:'Space Mono',monospace; --sh-sans:'Syne',sans-serif;

  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 5vw, 56px);
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(7,8,12,.72); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--sh-bd);
  font-family: var(--sh-sans);
}
.sh-nav.scrolled { background: rgba(7,8,12,.92); }
.sh-nav a { text-decoration: none; }

.sh-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sh-logo .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--sh-ac), var(--sh-pu));
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.sh-logo .txt { font-size: 15px; font-weight: 800; color: var(--sh-t1); letter-spacing: -.3px; }
.sh-logo .txt span { color: var(--sh-cy); }

.sh-links { display: flex; align-items: center; gap: 2px; }
.sh-nd-link, .sh-nd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--sh-t2);
  border-radius: 9px; background: none; border: none; cursor: pointer;
  font-family: var(--sh-sans); white-space: nowrap;
  transition: color .15s, background .15s;
}
.sh-nd-link:hover, .sh-nd-btn:hover { color: var(--sh-t1); background: rgba(255,255,255,.05); }
.sh-nd-link.active { color: var(--sh-cy); }
.sh-nd-btn .car { font-size: 9px; opacity: .7; transition: transform .25s; }

/* mega dropdown (hover + tap + focus) */
.sh-nd { position: relative; }
.sh-nd:hover > .sh-nd-btn, .sh-nd.open > .sh-nd-btn, .sh-nd:focus-within > .sh-nd-btn { color: var(--sh-t1); background: rgba(255,255,255,.05); }
.sh-nd:hover .sh-nd-btn .car, .sh-nd.open .sh-nd-btn .car { transform: rotate(180deg); }
.sh-mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px); padding-top: 13px; /* invisible hover bridge */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .2s; z-index: 60;
}
.sh-nd:hover .sh-mega, .sh-nd.open .sh-mega, .sh-nd:focus-within .sh-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.sh-mega-card {
  display: grid; grid-template-columns: repeat(var(--mega-cols,2), minmax(196px, 1fr));
  gap: 3px; padding: 10px; position: relative;
  background: linear-gradient(180deg, var(--sh-bg2), #0a0c14);
  border: 1px solid var(--sh-bd); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.sh-mega-card::before { /* pointer */
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--sh-bg2); border-left:1px solid var(--sh-bd); border-top:1px solid var(--sh-bd);
}
.sh-mi2 { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:12px; transition: background .15s; }
.sh-mi2:hover { background: rgba(99,102,241,.12); }
.sh-mi2 .mi-ico {
  width:38px; height:38px; flex-shrink:0; border-radius:10px; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.22);
  transition: border-color .15s, background .15s, transform .15s;
}
.sh-mi2:hover .mi-ico { border-color: var(--sh-bdh); background: rgba(99,102,241,.2); transform: translateY(-1px); }
.sh-mi2 .mi-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sh-mi2 .mi-t { font-size:13.5px; font-weight:700; color:var(--sh-t1); }
.sh-mi2 .mi-d { font-family:var(--sh-mono); font-size:10.5px; color:var(--sh-t3); line-height:1.4; }

/* language switcher */
.sh-lang { position: relative; }
.sh-lang-btn {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 12px; border-radius:9px; font-family:var(--sh-sans);
  font-size:12.5px; font-weight:700; color:var(--sh-t2);
  background: rgba(255,255,255,.03); border:1px solid var(--sh-bd);
  transition: color .15s, border-color .15s, background .15s;
}
.sh-lang-btn:hover, .sh-lang.open .sh-lang-btn { color:var(--sh-t1); border-color:var(--sh-bdh); }
.sh-lang-btn .globe { color: var(--sh-cy); flex-shrink:0; }
.sh-lang-btn .car { font-size:9px; opacity:.7; transition: transform .2s; }
.sh-lang.open .sh-lang-btn .car { transform: rotate(180deg); }
.sh-lang-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:182px;
  background:var(--sh-bg2); border:1px solid var(--sh-bd); border-radius:12px; padding:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s;
  max-height: 62vh; overflow-y:auto; z-index:60;
}
.sh-lang.open .sh-lang-menu { opacity:1; visibility:visible; transform:none; }
.sh-lang-opt { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border-radius:8px; background:none; border:none; cursor:pointer; font-family:var(--sh-sans); font-size:13px; color:var(--sh-t2); transition: background .15s, color .15s; }
.sh-lang-opt:hover { background: rgba(99,102,241,.1); color:var(--sh-t1); }
.sh-lang-opt.active { color: var(--sh-cy); }
.sh-lang-opt .lf { font-size:15px; width:20px; text-align:center; flex-shrink:0; }

/* notifications bell */
.sh-noti { position: relative; }
.sh-noti-btn {
  position: relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; cursor:pointer; color:var(--sh-t2);
  background: rgba(255,255,255,.03); border:1px solid var(--sh-bd);
  transition: color .15s, border-color .15s, background .15s;
}
.sh-noti-btn:hover, .sh-noti.open .sh-noti-btn { color:var(--sh-t1); border-color:var(--sh-bdh); }
.sh-noti-badge {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--sh-cy); color:#06121a; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:var(--sh-sans);
  box-shadow:0 0 0 2px var(--sh-bg);
}
.sh-noti-menu {
  position:absolute; top:calc(100% + 8px); right:0; width:330px; max-width:88vw;
  background:var(--sh-bg2); border:1px solid var(--sh-bd); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s; z-index:60;
}
.sh-noti.open .sh-noti-menu { opacity:1; visibility:visible; transform:none; }
.sh-noti-head { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--sh-bd); font-size:13px; font-weight:700; color:var(--sh-t1); }
.sh-noti-readall { background:none; border:none; color:var(--sh-cy); font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--sh-sans); }
.sh-noti-list { max-height:60vh; overflow-y:auto; }
.sh-noti-item { display:flex; gap:11px; align-items:flex-start; padding:12px 15px; border-bottom:1px solid var(--sh-bd2,rgba(255,255,255,.04)); text-decoration:none; position:relative; transition: background .15s; }
.sh-noti-item:last-child { border-bottom:none; }
.sh-noti-item:hover { background: rgba(99,102,241,.08); }
.sh-noti-item.unread { background: rgba(99,102,241,.06); }
.sh-noti-item .nb-ico { width:30px; height:30px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.2); }
.sh-noti-item .nb-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sh-noti-item .nb-t { font-size:13px; font-weight:600; color:var(--sh-t1); }
.sh-noti-item .nb-b { font-size:11.5px; color:var(--sh-t3); line-height:1.4; }
.sh-noti-item .nb-time { font-family:var(--sh-mono); font-size:10px; color:var(--sh-t3); margin-top:2px; }
.sh-noti-item .nb-dot { position:absolute; top:14px; right:13px; width:7px; height:7px; border-radius:50%; background:var(--sh-cy); }
.sh-noti-empty { padding:30px 15px; text-align:center; color:var(--sh-t3); font-size:12.5px; }

.sh-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sh-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 18px; border-radius: 8px; font-family: var(--sh-sans);
  font-size: 13px; font-weight: 700; text-decoration: none; border: none;
  transition: all .18s; white-space: nowrap;
}
.sh-btn.primary { background: var(--sh-ac); color: #fff; box-shadow: 0 0 20px rgba(99,102,241,.38); }
.sh-btn.primary:hover { background: #7c7ffa; box-shadow: 0 0 30px rgba(99,102,241,.55); transform: translateY(-1px); }
.sh-btn.ghost { background: transparent; color: var(--sh-t2); border: 1px solid var(--sh-bd); }
.sh-btn.ghost:hover { color: var(--sh-t1); border-color: var(--sh-bdh); }

/* User dropdown (auth) */
.sh-user { position: relative; }
.sh-user-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background .15s; }
.sh-user-trigger:hover { background: rgba(255,255,255,.05); }
.sh-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sh-ac); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sh-ac), var(--sh-pu)); }
.sh-user-name { font-size: 13px; font-weight: 600; color: var(--sh-t1); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background: var(--sh-bg2); border: 1px solid var(--sh-bd); border-radius: 12px;
  padding: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s;
}
.sh-user.open .sh-user-menu { opacity: 1; visibility: visible; transform: none; }
.sh-mi { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--sh-t2); background: none; border: none; cursor: pointer; font-family: var(--sh-sans); transition: background .15s, color .15s; text-decoration: none; }
.sh-mi:hover { background: rgba(99,102,241,.1); color: var(--sh-t1); }
.sh-mi.danger { color: #f87171; }
.sh-mi.danger:hover { background: rgba(248,113,113,.12); }
.sh-sep { height: 1px; background: var(--sh-bd); margin: 6px 4px; }

/* Burger */
.sh-burger { display: none; width: 42px; height: 42px; border-radius: 9px; border: 1px solid var(--sh-bd); background: rgba(255,255,255,.03); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-burger span { display: block; width: 18px; height: 2px; background: var(--sh-t1); border-radius: 2px; position: relative; transition: transform .25s, opacity .2s; }
.sh-burger span::before, .sh-burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--sh-t1); border-radius: 2px; transition: transform .25s; }
.sh-burger span::before { top: -6px; } .sh-burger span::after { top: 6px; }
body.sh-menu-open .sh-burger span { background: transparent; }
body.sh-menu-open .sh-burger span::before { transform: translateY(6px) rotate(45deg); }
body.sh-menu-open .sh-burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.sh-drawer {
  --sh-bg2:#0d0f18; --sh-bd:rgba(99,102,241,.16); --sh-ac:#6366f1; --sh-pu:#a855f7;
  --sh-cy:#22d3ee; --sh-t1:#e2e8f0; --sh-t2:#94a3b8; --sh-t3:#475569;
  --sh-mono:'Space Mono',monospace; --sh-sans:'Syne',sans-serif;
  position: fixed; inset: 0; z-index: 999; display: none;
  background: rgba(7,8,12,.96); backdrop-filter: blur(10px);
  padding: calc(76px + env(safe-area-inset-top)) clamp(20px,7vw,40px) 40px;
  overflow-y: auto; font-family: var(--sh-sans);
}
body.sh-menu-open .sh-drawer { display: block; }
.sh-drawer .grp-label { font-family: var(--sh-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--sh-t3); margin: 24px 0 8px; }
.sh-drawer .d-link { display: block; width: 100%; text-align: left; padding: 14px 4px; font-size: 17px; font-weight: 700; color: var(--sh-t1); border-bottom: 1px solid var(--sh-bd); text-decoration: none; background:none; border-left:none; border-right:none; border-top:none; }
.sh-drawer .d-link.active { color: var(--sh-cy); }
.d-acc { border-bottom: 1px solid var(--sh-bd); }
.d-acc-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 14px 4px; font-size: 17px; font-weight: 700; color: var(--sh-t1); background: none; border: none; cursor: pointer; font-family: var(--sh-sans); }
.d-acc-btn .car { font-size: 12px; color: var(--sh-t3); transition: transform .25s; }
.d-acc.open .d-acc-btn .car { transform: rotate(180deg); }
.d-acc-body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.d-acc.open .d-acc-body { max-height: 540px; }
.d-sub { display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 10px; font-size: 15px; font-weight: 600; color: var(--sh-t2); text-decoration: none; }
.d-sub:hover { color: var(--sh-t1); }
.d-sub .ds-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); }
.d-langgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.d-lang-opt { display: flex; align-items: center; gap: 7px; justify-content: center; padding: 11px 8px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--sh-bd); color: var(--sh-t2); font-family: var(--sh-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.d-lang-opt.active { color: var(--sh-cy); border-color: var(--sh-bdh); background: rgba(99,102,241,.1); }
.d-lang-opt .lf { font-size: 15px; }
.sh-drawer .d-cta, .sh-drawer .d-pagecta { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sh-drawer .d-cta .sh-btn, .sh-drawer .d-pagecta .sh-btn { justify-content: center; padding: 14px; font-size: 15px; }

/* ── 2. UNIFIED FOOTER ────────────────────────────────────────────────────*/
.sh-foot {
  --sh-bg2:#0d0f18; --sh-card:#0f1219; --sh-bd:rgba(99,102,241,.16);
  --sh-ac:#6366f1; --sh-cy:#22d3ee; --sh-pu:#a855f7;
  --sh-t1:#e2e8f0; --sh-t2:#94a3b8; --sh-t3:#475569;
  --sh-mono:'Space Mono',monospace; --sh-sans:'Syne',sans-serif;
  background: var(--sh-bg2); border-top: 1px solid var(--sh-bd);
  padding: 46px clamp(16px,5vw,56px) calc(30px + env(safe-area-inset-bottom));
  font-family: var(--sh-sans);
}
.sh-foot a { text-decoration: none; }
.sh-foot .fi { max-width: 1200px; margin: 0 auto; }
.sh-foot .ftop { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 34px; }
.sh-foot .flogo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sh-foot .flogo .ico { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,var(--sh-ac),var(--sh-pu)); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sh-foot .flogo .txt { font-size: 14px; font-weight: 800; color: var(--sh-t1); }
.sh-foot .flogo .txt span { color: var(--sh-cy); }
.sh-foot .fdsc { font-family: var(--sh-mono); font-size: 12px; color: var(--sh-t3); line-height: 1.7; max-width: 270px; margin-bottom: 16px; }
.sh-foot .fsoc { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-foot .fsl { width: 34px; height: 34px; background: var(--sh-card); border: 1px solid var(--sh-bd); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all .18s; }
.sh-foot .fsl:hover { border-color: var(--sh-ac); background: rgba(99,102,241,.1); }
.sh-foot .fct { font-size: 13px; font-weight: 700; color: var(--sh-t1); margin-bottom: 13px; }
.sh-foot .flinks { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; }
.sh-foot .flinks a { font-family: var(--sh-mono); font-size: 12px; color: var(--sh-t3); transition: color .15s; }
.sh-foot .flinks a:hover { color: var(--sh-t1); }
.sh-foot .fbot { border-top: 1px solid var(--sh-bd); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sh-foot .fcopy { font-family: var(--sh-mono); font-size: 11px; color: var(--sh-t3); }
.sh-foot .fcopy span { color: var(--sh-ac); }
.sh-foot .flegal { display: flex; gap: 16px; flex-wrap: wrap; }
.sh-foot .flegal a { font-family: var(--sh-mono); font-size: 11px; color: var(--sh-t3); }
.sh-foot .flegal a:hover { color: var(--sh-t2); }

/* Spacer so fixed nav never overlaps page content (pages opt in via body class) */
body.sh-has-nav { padding-top: 0; }

/* ── 3. RESPONSIVE BREAKPOINTS (shared) ───────────────────────────────────*/
@media (max-width: 1024px) {
  .sh-foot .ftop { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  /* Collapse the full mega-nav + language button into the burger */
  .sh-links, .sh-lang, .sh-cta-desktop { display: none; }
  .sh-burger { display: flex; }
}
@media (max-width: 600px) {
  .sh-foot .ftop { grid-template-columns: 1fr; gap: 22px; }
  .sh-user-name { display: none; }
}
@media (max-width: 480px) {
  .sh-nav { padding-left: 16px; padding-right: 16px; }
  .sh-logo .txt { font-size: 14px; }
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}