/* === tokens.css === */
/* ======================================================
   TOKENS
====================================================== */
:root {
  --bg: #151413;
  --s1: #1C1B1A;
  --s2: #242322;
  --s3: #333233;
  --s4: #3E3D3C;
  --o: #DE6A3C;
  --o2: #F0956D;
  --og: rgba(222,106,60,0.12);
  --l: #CCFD53;
  --lg: rgba(204,253,83,0.09);
  --r: #FF6E84;
  --rg: rgba(255,110,132,0.12);
  --t: #FFFFFF;
  --t2: #B0AFAD;
  --t3: #6B6A68;
  --gh: rgba(255,255,255,0.035);
  --f: 'Inter', system-ui, sans-serif;
  --m: 'JetBrains Mono', monospace;
}

/* === reset.css === */
/* ======================================================
   RESET
====================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--t);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3E3D3C; }
a { color: inherit; text-decoration: none; }

/* ======================================================
   DNA SELECTION — brand orange text highlight on drag
====================================================== */
::selection {
  background: var(--o);
  color: #000;
  text-shadow: none;
}
::-moz-selection {
  background: var(--o);
  color: #000;
  text-shadow: none;
}
/* ======================================================
   DNA SELECTION — COMPLETE LIST
   Regular text: orange bg + black text
   Bold/colored/heading text: orange bg + DNA lime #CCFD53
   SAME in both dark and light mode
====================================================== */

/* All bold, heading, colored, and special elements — DARK MODE */
strong::selection, b::selection, em::selection,
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection,
.feed-title::selection,
.detail-panel-title::selection, .detail-panel-vocab-term::selection, .detail-panel-vocab-title::selection, .detail-panel-vocab-item::selection,
.detail-panel-summary h3::selection, .detail-panel-summary strong::selection,
.detail-panel-meta a::selection,
.ov-title::selection, .ov-tag::selection,
.tag::selection,
.profile-name::selection,
.section-title::selection,
.nb-title::selection,
.ch-name::selection,
.quiz-question::selection, .quiz-label::selection, .quiz-category::selection,
.quiz-results-pct::selection, .quiz-results-title::selection,
.q-opt-letter::selection,
.roadmap-phase-title::selection,
.dict-term::selection,
.glitch-title::selection,
.ps-val::selection,
.xp-label span::selection,
.ticker-item::selection,
[style*="font-weight"]::selection {
  background: var(--o) !important;
  color: #CCFD53 !important;
}
strong::-moz-selection, b::-moz-selection, em::-moz-selection,
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection,
.feed-title::-moz-selection,
.detail-panel-title::-moz-selection, .detail-panel-vocab-term::-moz-selection, .detail-panel-vocab-title::-moz-selection, .detail-panel-vocab-item::-moz-selection,
.detail-panel-summary h3::-moz-selection, .detail-panel-summary strong::-moz-selection,
.detail-panel-meta a::-moz-selection,
.ov-title::-moz-selection, .ov-tag::-moz-selection,
.tag::-moz-selection,
.profile-name::-moz-selection,
.section-title::-moz-selection,
.nb-title::-moz-selection,
.ch-name::-moz-selection,
.quiz-question::-moz-selection, .quiz-label::-moz-selection, .quiz-category::-moz-selection,
.quiz-results-pct::-moz-selection, .quiz-results-title::-moz-selection,
.q-opt-letter::-moz-selection,
.roadmap-phase-title::-moz-selection,
.dict-term::-moz-selection,
.glitch-title::-moz-selection,
.ps-val::-moz-selection,
.xp-label span::-moz-selection,
.ticker-item::-moz-selection,
[style*="font-weight"]::-moz-selection {
  background: var(--o) !important;
  color: #CCFD53 !important;
}

/* LIGHT MODE — regular text */
[data-theme="light"] ::selection {
  background: var(--o);
  color: #000;
}
[data-theme="light"] ::-moz-selection {
  background: var(--o);
  color: #000;
}

/* LIGHT MODE — same DNA lime for bold/colored/heading (identical to dark) */
[data-theme="light"] strong::selection, [data-theme="light"] b::selection, [data-theme="light"] em::selection,
[data-theme="light"] h1::selection, [data-theme="light"] h2::selection, [data-theme="light"] h3::selection,
[data-theme="light"] h4::selection, [data-theme="light"] h5::selection, [data-theme="light"] h6::selection,
[data-theme="light"] .feed-title::selection,
[data-theme="light"] .detail-panel-title::selection, [data-theme="light"] .detail-panel-vocab-term::selection,
[data-theme="light"] .detail-panel-summary h3::selection, [data-theme="light"] .detail-panel-summary strong::selection,
[data-theme="light"] .detail-panel-meta a::selection,
[data-theme="light"] .ov-title::selection, [data-theme="light"] .ov-tag::selection,
[data-theme="light"] .tag::selection,
[data-theme="light"] .profile-name::selection,
[data-theme="light"] .section-title::selection,
[data-theme="light"] .nb-title::selection,
[data-theme="light"] .ch-name::selection,
[data-theme="light"] .quiz-question::selection, [data-theme="light"] .quiz-label::selection, [data-theme="light"] .quiz-category::selection,
[data-theme="light"] .quiz-results-pct::selection, [data-theme="light"] .quiz-results-title::selection,
[data-theme="light"] .q-opt-letter::selection,
[data-theme="light"] .roadmap-phase-title::selection,
[data-theme="light"] .dict-term::selection,
[data-theme="light"] .glitch-title::selection,
[data-theme="light"] .ps-val::selection,
[data-theme="light"] .xp-label span::selection,
[data-theme="light"] .ticker-item::selection,
[data-theme="light"] [style*="font-weight"]::selection {
  background: var(--o) !important;
  color: #CCFD53 !important;
}
[data-theme="light"] strong::-moz-selection, [data-theme="light"] b::-moz-selection, [data-theme="light"] em::-moz-selection,
[data-theme="light"] h1::-moz-selection, [data-theme="light"] h2::-moz-selection, [data-theme="light"] h3::-moz-selection,
[data-theme="light"] h4::-moz-selection, [data-theme="light"] h5::-moz-selection, [data-theme="light"] h6::-moz-selection,
[data-theme="light"] .feed-title::-moz-selection,
[data-theme="light"] .detail-panel-title::-moz-selection, [data-theme="light"] .detail-panel-vocab-term::-moz-selection,
[data-theme="light"] .detail-panel-summary h3::-moz-selection, [data-theme="light"] .detail-panel-summary strong::-moz-selection,
[data-theme="light"] .detail-panel-meta a::-moz-selection,
[data-theme="light"] .ov-title::-moz-selection, [data-theme="light"] .ov-tag::-moz-selection,
[data-theme="light"] .tag::-moz-selection,
[data-theme="light"] .profile-name::-moz-selection,
[data-theme="light"] .section-title::-moz-selection,
[data-theme="light"] .nb-title::-moz-selection,
[data-theme="light"] .ch-name::-moz-selection,
[data-theme="light"] .quiz-question::-moz-selection, [data-theme="light"] .quiz-label::-moz-selection, [data-theme="light"] .quiz-category::-moz-selection,
[data-theme="light"] .quiz-results-pct::-moz-selection, [data-theme="light"] .quiz-results-title::-moz-selection,
[data-theme="light"] .q-opt-letter::-moz-selection,
[data-theme="light"] .roadmap-phase-title::-moz-selection,
[data-theme="light"] .dict-term::-moz-selection,
[data-theme="light"] .glitch-title::-moz-selection,
[data-theme="light"] .ps-val::-moz-selection,
[data-theme="light"] .xp-label span::-moz-selection,
[data-theme="light"] .ticker-item::-moz-selection,
[data-theme="light"] [style*="font-weight"]::-moz-selection {
  background: var(--o) !important;
  color: #CCFD53 !important;
}

/* === layout.css === */
/* ======================================================
   APP SHELL: grid 50/50
====================================================== */
.app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 44px 1fr 28px;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* ======================================================
   TOP BAR
====================================================== */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 100;
  position: relative;
}
.topbar-l { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 24px;
  height: 24px;
  background: var(--o);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 9px;
  color: #000;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
  flex-shrink: 0;
}
.logo-mark:hover { transform: rotate(90deg) scale(1.15); }

/* GLITCH TITLE */
.glitch-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t);
  position: relative;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}
.glitch-title::before {
  left: 2px;
  text-shadow: -1px 0 var(--o);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-1 3s infinite linear alternate-reverse;
}
.glitch-title::after {
  left: -2px;
  text-shadow: -1px 0 var(--l);
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-2 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-1 {
  0% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: skew(0.3deg); }
  25% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: skew(-0.2deg); }
  50% { clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0 40%); transform: skew(0.5deg); }
  75% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: skew(-0.3deg); }
  100% { clip-path: polygon(0 5%, 100% 5%, 100% 15%, 0 15%); transform: skew(0.1deg); }
}
@keyframes glitch-2 {
  0% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: skew(-0.4deg); }
  50% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: skew(0.2deg); }
  100% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: skew(-0.1deg); }
}

.topbar-sep { width: 1px; height: 16px; background: var(--s3); margin: 0 4px; }
.sub-label { font-size: 9px; color: var(--t3); letter-spacing: 0.1em; font-family: var(--m); text-transform: uppercase; }
.topbar-r { display: flex; align-items: center; gap: 16px; }
.live-dot {
  width: 6px; height: 6px;
  background: var(--l);
  border-radius: 50%;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--l); }
  50% { opacity: 0.2; box-shadow: none; }
}
.live-label { font-size: 9px; color: var(--l); font-family: var(--m); letter-spacing: 0.1em; }
.time-display { font-family: var(--m); font-size: 10px; color: var(--t2); }
.status-chips { display: flex; gap: 6px; }
.chip {
  font-family: var(--m);
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: var(--s2);
  color: var(--t3);
}
.chip.on { background: var(--og); color: var(--o); }

/* === panels.css === */
/* ======================================================
   LEFT PANEL
====================================================== */
.left {
  background: var(--s1);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  scrollbar-gutter: stable;
  position: relative;
}

/* Ghost text background — pushed far behind content */
.left::before {
  content: 'HUB';
  position: absolute;
  right: -15px;
  bottom: 40px;
  font-size: 120px;
  font-weight: 900;
  color: rgba(255,255,255,0.018);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  writing-mode: vertical-rl;
  z-index: -1;
}

/* Section wrapper */
.section {
  position: relative;
  z-index: 1;
  padding: 16px 16px 0;
  animation: fadeSlideUp 0.6s ease both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.section:nth-child(1) { animation-delay: 0.05s; }
.section:nth-child(2) { animation-delay: 0.15s; }
.section:nth-child(3) { animation-delay: 0.25s; }
.section:nth-child(4) { animation-delay: 0.35s; }
.section:nth-child(5) { animation-delay: 0.45s; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t2);
  font-family: var(--m);
}
.s-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.s-dot.green { background: var(--l); box-shadow: 0 0 5px var(--l); animation: blink 1.4s ease-in-out infinite; }
.s-dot.orange { background: var(--o); }
.section-meta { font-size: 8px; color: var(--t3); font-family: var(--m); }

/* ======================================================
   RESPONSIVE SCROLL
====================================================== */
.left-inner { padding-bottom: 4px; }

/* ======================================================
   3D TILT CARDS — transition set via JS
====================================================== */
.tilt-card { transition: transform 0.5s ease; }

/* === feed.css === */
/* ======================================================
   FEED ITEMS
====================================================== */
.feed { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }

.feed-item {
  background: var(--s1);
  padding: 7px 10px 7px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1);
  animation: slideInLeft 0.5s ease both;
  transform-style: preserve-3d;
}
.feed-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--o);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.25s ease;
}
.feed-item:hover::before,
.feed-item.on::before { transform: scaleY(1); }
.feed-item:hover { background: var(--s2); }
.feed-item.on { background: var(--s2); }

/* ======================================================
   DNA HOVER — orange takeover on non-featured items
   !important needed to override theme-light.css defaults
====================================================== */
.feed-item:not(.feed-featured):not(.on):hover {
  background: var(--o) !important;
}
.feed-item:not(.feed-featured):not(.on):hover .feed-title { color: #000 !important; }
.feed-item:not(.feed-featured):not(.on):hover .tag { background: #000 !important; color: #CCFD53 !important; }
.feed-item:not(.feed-featured):not(.on):hover .feed-time,
.feed-item:not(.feed-featured):not(.on):hover .feed-loc { color: rgba(0,0,0,0.6) !important; }
.feed-item:not(.feed-featured):not(.on):hover .feed-summary { color: #000 !important; }
.feed-item:not(.feed-featured):not(.on):hover .loc-dot { background: #000 !important; }
.feed-item:not(.feed-featured):not(.on):hover .feed-meta span { color: rgba(0,0,0,0.6) !important; }
.feed-item:not(.feed-featured):not(.on):hover::after { color: #000 !important; }
/* Light mode — DNA hover uses bright lime #CCFD53 (not accessible dark green)
   because the background is orange, not white — lime on orange is perfectly readable */
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover { background: #DE6A3C !important; }
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .feed-title { color: #000 !important; }
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .feed-summary { color: #000 !important; }
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .tag { background: #000 !important; color: #CCFD53 !important; }
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .feed-time,
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .feed-loc,
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .feed-meta span { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover .loc-dot { background: #000 !important; }
[data-theme="light"] .feed-item:not(.feed-featured):not(.on):hover::after { color: #000 !important; }

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
.feed-item:nth-child(1) { animation-delay: 0.1s; }
.feed-item:nth-child(2) { animation-delay: 0.17s; }
.feed-item:nth-child(3) { animation-delay: 0.24s; }
.feed-item:nth-child(4) { animation-delay: 0.31s; }
.feed-item:nth-child(5) { animation-delay: 0.38s; }
.feed-item:nth-child(6) { animation-delay: 0.45s; }
.feed-item:nth-child(7) { animation-delay: 0.52s; }
.feed-item:nth-child(8) { animation-delay: 0.59s; }
.feed-item:nth-child(9) { animation-delay: 0.66s; }

.feed-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tag {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 5px;
  flex-shrink: 0;
  font-family: var(--m);
  transition: background 0.2s ease, color 0.2s ease;
}
.tag.breaking { background: var(--og); color: var(--o); }
.tag.ai { background: var(--og); color: var(--o2); }
.tag.devops { background: var(--lg); color: var(--l); }
.tag.security { background: var(--rg); color: var(--r); }
.tag.vietnamese { background: var(--lg); color: var(--l); }
.tag.youtube { background: var(--rg); color: var(--r); }

.feed-title {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--t);
  flex: 1;
  transition: color 0.2s ease;
}
.feed-summary {
  font-size: 9px;
  color: var(--t2);
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease, margin 0.3s ease, color 0.2s ease;
  opacity: 0;
  margin-top: 0;
}
.feed-item.on .feed-summary {
  max-height: 60px;
  opacity: 1;
  margin-top: 5px;
}
.feed-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.feed-time { font-family: var(--m); font-size: 8px; color: var(--t3); transition: color 0.2s ease; }
.feed-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--m);
  font-size: 8px;
  color: var(--t3);
  transition: color 0.2s ease;
}
.loc-dot { width: 4px; height: 4px; border-radius: 50%; }

/* Featured card — first/breaking article */
.feed-featured {
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(222,106,60,0.08) 0%, var(--s1) 100%);
  border-left:3px solid var(--o);
  margin-bottom:2px;
  cursor:pointer;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}
.feed-featured::before {
  content:'';
  position:absolute;
  top:0;right:0;
  width:120px;height:120px;
  background:radial-gradient(circle, rgba(222,106,60,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.feed-featured:hover {
  background:linear-gradient(135deg, rgba(222,106,60,0.12) 0%, var(--s2) 100%);
}
.feed-featured .tag {
  font-size:8px;
  padding:3px 10px;
  animation:pulse-tag 2s infinite;
}
@keyframes pulse-tag {
  0%,100% { box-shadow:0 0 0 0 rgba(222,106,60,0.4); }
  50% { box-shadow:0 0 0 4px rgba(222,106,60,0); }
}
.feed-featured .feed-title {
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.3px;
  margin-bottom:6px;
  line-height:1.3;
}
.feed-featured .feed-summary {
  display:block !important;
  opacity:1 !important;
  max-height:none !important;
  font-size:11px;
  color:var(--t2);
  line-height:1.5;
  margin-bottom:8px;
}
.feed-featured .feed-meta {
  display:flex;
  gap:12px;
  align-items:center;
}

/* Read state — item has been acknowledged */
.feed-item.read { opacity: 0.55; }
.feed-item.read::after {
  content: '✓';
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 9px;
  color: var(--l);
  font-weight: 700;
}
.feed-item.read:hover { opacity: 0.8; }

/* ======================================================
   PAGE NAVIGATION
====================================================== */
.feed-pager {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0 16px;
}
.feed-page-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--m);
  font-size: 9px;
  font-weight: 700;
  color: var(--t3);
  background: var(--s2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.feed-page-btn:hover {
  background: var(--s3);
  color: var(--t2);
  transform: translateY(-1px);
}
.feed-page-btn.active {
  background: var(--o);
  color: #000;
  font-weight: 800;
}
[data-theme="light"] .feed-page-btn { background: #F0EFEC; }
[data-theme="light"] .feed-page-btn:hover { background: #E2E1DE; }
[data-theme="light"] .feed-page-btn.active { background: var(--o); color: #FFF; }


/* === topic-nav.css === */
/* ======================================================
   TOPIC NAVIGATION — Filter pills for feed
====================================================== */
.topic-nav {
  padding: 10px 16px 0;
  position: relative;
  z-index: 1;
}
.topic-pills {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.topic-pills::-webkit-scrollbar { display: none; }
.topic-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--s2);
  font-family: var(--m);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.topic-pill:hover {
  background: var(--s3);
  color: var(--t2);
}
.topic-pill.active {
  color: #000;
  font-weight: 800;
}
/* Active pill gets dynamic background color via JS inline style */
.topic-pill svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.topic-pill-count {
  font-size: 7px;
  opacity: 0.5;
  margin-left: 2px;
}

/* Child subtopic pills */
.topic-children {
  display: flex;
  gap: 3px;
  padding: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.topic-children::-webkit-scrollbar { display: none; }
.topic-child-pill {
  padding: 3px 8px;
  background: var(--s2);
  font-family: var(--m);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.topic-child-pill:hover { background: var(--s3); color: var(--t2); }
.topic-child-pill.active { color: #000; }

/* Hidden feed items when filtered */
.feed-item.topic-hidden {
  display: none;
}

/* Light mode */
[data-theme="light"] .topic-pill { background: #F0EFEC; color: var(--t3); }
[data-theme="light"] .topic-pill:hover { background: #E2E1DE; }
[data-theme="light"] .topic-child-pill { background: #F0EFEC; }
[data-theme="light"] .topic-child-pill:hover { background: #E2E1DE; }

/* === components.css === */
/* ======================================================
   NOTEBOOK LM
====================================================== */
.notebooks { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.nb-item {
  background: var(--s2);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.4s cubic-bezier(.34,1.56,.64,1);
  transform-style: preserve-3d;
}
.nb-item:hover { background: var(--s3); }
.nb-l { flex: 1; min-width: 0; }
.nb-label { font-size: 7px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--m); color: var(--t3); margin-bottom: 3px; }
.nb-title { font-size: 10px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-meta { font-size: 8px; color: var(--t3); font-family: var(--m); margin-top: 2px; }
.nb-actions { display: flex; gap: 5px; flex-shrink: 0; }
.nb-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: none;
  outline: none;
  font-family: var(--m);
  transition: transform 0.2s, opacity 0.2s;
}
.nb-btn:hover { transform: translateY(-1px); opacity: 0.85; }
.nb-btn.orange { background: rgba(222,106,60,0.18); color: var(--o); }
.nb-btn.lime { background: rgba(204,253,83,0.12); color: var(--l); }
.nb-btn svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ======================================================
   AI INSIGHT
====================================================== */
.insight-card {
  background: var(--s2);
  padding: 14px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
  transform-style: preserve-3d;
}
/* Animated gradient border via box-shadow cycling */
.insight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--s2), var(--s2)) padding-box,
    conic-gradient(from var(--border-angle, 0deg), var(--o), var(--l), var(--o)) border-box;
  animation: spin-border 3s linear infinite;
  pointer-events: none;
}
/* We approximate the border with box-shadow instead since @property is not universal */
.insight-card { box-shadow: inset 0 0 0 1px rgba(222,106,60,0.25); animation: insight-border 3s ease-in-out infinite; }
.insight-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ai-icon {
  width: 22px; height: 22px;
  background: var(--og);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-icon svg { width: 12px; height: 12px; stroke: var(--o); fill: none; stroke-width: 1.5; }
.insight-label { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--o); font-family: var(--m); }
.insight-sub { font-size: 8px; color: var(--t3); font-family: var(--m); margin-left: auto; }
.insight-text {
  font-size: 11px;
  line-height: 1.6;
  color: var(--t2);
  min-height: 36px;
}
.insight-text .cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: var(--o);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s step-start infinite;
}

/* ======================================================
   CHANNELS
====================================================== */
.channels { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: var(--s1);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.3s ease;
}
.ch-item:hover { background: var(--s2); transform: translateX(3px); }
.ch-item.active-lime { border-left-color: var(--l); }
.ch-item.active-orange { border-left-color: var(--o); }
.ch-item.inactive { border-left-color: var(--s3); }
.ch-name { font-family: var(--m); font-size: 9px; font-weight: 500; color: var(--t2); }
.ch-item.active-lime .ch-name { color: var(--t); }
.ch-item.active-orange .ch-name { color: var(--t); }
.ch-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--m);
  font-size: 8px;
}
.ch-dot { width: 4px; height: 4px; border-radius: 50%; }
.ch-dot.live { background: var(--l); box-shadow: 0 0 4px var(--l); animation: blink 1.6s ease-in-out infinite; }
.ch-dot.idle { background: var(--t3); }

/* ======================================================
   TOOLS GRID
====================================================== */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 20px; }
.tool-card {
  background: var(--s2);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.2s;
  transform-style: preserve-3d;
  text-decoration: none;
}
.tool-card:hover {
  transform: translateY(-4px);
  background: var(--s3);
}
.tool-icon {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-icon.orange { background: var(--og); }
.tool-icon.lime { background: var(--lg); }
.tool-icon svg { width: 14px; height: 14px; stroke-width: 1.5; fill: none; }
.tool-icon.orange svg { stroke: var(--o); }
.tool-icon.lime svg { stroke: var(--l); }
.tool-icon.pink { background: var(--rg); }
.tool-icon.pink svg { stroke: var(--r); }
.tool-name { font-family: var(--m); font-size: 7px; font-weight: 600; letter-spacing: 0.1em; color: var(--t2); text-transform: uppercase; text-align: center; }

/* ======================================================
   COMMAND BAR — Quick Launch
====================================================== */
.cmd-bar {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}
.cmd-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--s2);
  cursor: pointer;
  transition: background 0.2s, transform 0.3s cubic-bezier(.34,1.56,.64,1);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.cmd-btn:hover {
  background: var(--s3);
  transform: translateY(-2px);
}
.cmd-btn-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cmd-btn-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.cmd-btn-name {
  font-family: var(--m);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === globe.css === */
/* ======================================================
   RIGHT PANEL (GLOBE)
====================================================== */
.right {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Ghost GLOBAL text */
.globe-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 96px;
  font-weight: 900;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 0;
  white-space: nowrap;
}

/* Dashed rotating circles */
.deco-circle {
  position: absolute;
  border: 1px dashed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.deco-circle.c1 {
  width: 320px; height: 320px;
  border-color: rgba(222,106,60,0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-slow 40s linear infinite;
}
.deco-circle.c2 {
  width: 460px; height: 460px;
  border-color: rgba(204,253,83,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-slow 60s linear infinite reverse;
}
.deco-circle.c3 {
  width: 200px; height: 200px;
  border-color: rgba(255,110,132,0.1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-slow 25s linear infinite;
}
@keyframes rotate-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Diagonal accent lines */
.deco-line {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.deco-line.l1 {
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222,106,60,0.3), transparent);
  top: 20%; right: -20px;
  transform: rotate(-30deg);
}
.deco-line.l2 {
  width: 160px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204,253,83,0.2), transparent);
  bottom: 25%; left: -10px;
  transform: rotate(28deg);
}
.deco-line.l3 {
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,110,132,0.2), transparent);
  top: 65%; right: 10%;
  transform: rotate(-20deg);
}

/* Globe container */
#globe-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Overlay card */
.globe-overlay {
  position: absolute;
  bottom: -140px;
  left: 16px;
  right: 16px;
  background: rgba(28,27,26,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 14px 14px 16px;
  z-index: 20;
  border-left: 2px solid var(--o);
  transition: bottom 0.45s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.globe-overlay.visible { bottom: 10px; pointer-events: all; }
.ov-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.ov-tag { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--m); padding: 2px 6px; }
.ov-close {
  width: 18px; height: 18px;
  background: var(--s3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: none; outline: none;
  color: var(--t2);
  font-size: 10px;
  transition: background 0.2s;
}
.ov-close:hover { background: var(--s4); }
.ov-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; line-height: 1.3; }
.ov-summary { font-size: 9px; color: var(--t2); line-height: 1.5; margin-bottom: 6px; }
.ov-foot { display: flex; align-items: center; gap: 8px; font-family: var(--m); font-size: 8px; color: var(--t3); }

/* Globe container — centered with glow */
#globe-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Subtle radial glow behind the globe */
.right::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(222,106,60,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: globe-glow 6s ease-in-out infinite alternate;
}
@keyframes globe-glow {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
[data-theme="light"] .right::after {
  background: radial-gradient(circle, rgba(222,106,60,0.04) 0%, transparent 70%);
}

/* Graticules (grid lines) subtle styling */
.right canvas {
  cursor: grab;
}
.right canvas:active {
  cursor: grabbing;
}

/* === ticker.css === */
/* ======================================================
   BOTTOM TICKER
====================================================== */
.ticker {
  grid-column: 1 / -1;
  background: var(--s1);
  border-top: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 50;
}
.ticker-label {
  flex-shrink: 0;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000;
  background: var(--o);
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--m);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: ticker-scroll 35s linear infinite;
  white-space: nowrap;
  will-change: transform;
  transform: translateZ(0); /* GPU acceleration for mobile smoothness */
  -webkit-transform: translateZ(0);
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  font-size: 9px;
  color: var(--t2);
  font-family: var(--m);
  white-space: nowrap;
}
.ticker-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ticker-dot.orange { background: var(--o); }
.ticker-dot.lime { background: var(--l); }
.ticker-dot.red { background: var(--r); }
.ticker-sep { color: var(--s4); margin: 0 4px; }

/* === effects.css === */
/* ======================================================
   SCAN LINE OVERLAY
====================================================== */
/* Scanlines — very subtle, barely visible */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.02) 3px,
    rgba(0,0,0,0.02) 6px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ======================================================
   ANIMATION KEYFRAMES
====================================================== */
@keyframes spin-border {
  to { --border-angle: 360deg; }
}
@keyframes insight-border {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(222,106,60,0.4), 0 0 12px rgba(222,106,60,0.08); }
  50% { box-shadow: inset 0 0 0 1px rgba(204,253,83,0.4), 0 0 12px rgba(204,253,83,0.08); }
}
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ======================================================
   MATRIX RAIN
====================================================== */
/* Matrix rain — very faint background texture */
.matrix-rain {
  position:absolute; top:0; left:0; right:0; bottom:0;
  pointer-events:none; z-index:1; overflow:hidden;
  opacity:0.03;
}
.matrix-col {
  position:absolute; top:-100%;
  font-family:var(--m); font-size:10px;
  color:var(--l); writing-mode:vertical-rl;
  animation:rain linear infinite;
  letter-spacing:8px;
}
@keyframes rain {
  0% { top:-100%; opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { top:100%; opacity:0; }
}

/* === gamification.css === */
/* ======================================================
   GAMIFICATION — PROFILE BAR
====================================================== */
.profile{padding:8px 22px;background:var(--s2);border-bottom:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;gap:12px;font-size:10px}
.profile-info{flex:1}
.profile-name{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#DE6A3C}
.profile-level{font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6B6A68;margin-top:2px}
.xp-bar{flex:1;max-width:200px}
.xp-label{font-size:7px;font-weight:700;letter-spacing:1px;color:#6B6A68;margin-bottom:3px;display:flex;justify-content:space-between}
.xp-track{height:3px;background:#333233;position:relative;overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,#DE6A3C,#F0956D);width:0%;transition:width 1.5s cubic-bezier(.4,0,.2,1);position:relative}
.xp-fill::after{content:'';position:absolute;right:0;top:-1px;width:6px;height:5px;background:#CCFD53;box-shadow:0 0 8px #CCFD53}
.profile-stats{display:flex;gap:14px}
.ps{text-align:center}
.ps-val{font-size:14px;font-weight:900;font-family:'JetBrains Mono',monospace}
.ps-val.o{color:#DE6A3C}.ps-val.l{color:#CCFD53}
.ps-lbl{font-size:6px;font-weight:700;letter-spacing:1.5px;color:#6B6A68;text-transform:uppercase}

/* ======================================================
   GAMIFICATION — SECTION HEADER (sh)
====================================================== */
.sh{display:flex;align-items:center;gap:10px;padding:8px 22px 6px;border-bottom:1px solid rgba(255,255,255,0.04)}
.sh-t{font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#6B6A68;white-space:nowrap;font-family:'JetBrains Mono',monospace}
.sh-line{flex:1;height:1px;background:rgba(255,255,255,0.04)}

/* Section header accent underline */
.sh { position:relative; }
.sh::after {
  content:'';
  position:absolute;
  bottom:0;
  left:22px;
  width:30px;
  height:2px;
  background:var(--o);
}

/* ======================================================
   GAMIFICATION — TAB SWITCHER
====================================================== */
.tabs{display:flex;background:var(--bg);border-bottom:1px solid rgba(255,255,255,0.04)}
.tab{flex:1;padding:10px;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;text-align:center;color:#6B6A68;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}
.tab:hover{color:#B0AFAD}
.tab.on{color:#DE6A3C;border-bottom-color:#DE6A3C}
.tab-content{display:none}.tab-content.on{display:block}
@keyframes xpFloat {
  0% { opacity:1; transform:translateY(0) scale(1); }
  50% { opacity:0.8; transform:translateY(-30px) scale(1.2); }
  100% { opacity:0; transform:translateY(-60px) scale(0.8); }
}

/* ======================================================
   QUIZ — Daily Challenge
====================================================== */
.quiz-wrap{padding:16px 22px}
.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.quiz-label{font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--o);font-family:var(--m)}
.quiz-score{font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--t3);font-family:var(--m)}
.quiz-progress-label{font-size:7px;font-weight:700;letter-spacing:1px;color:var(--t3);font-family:var(--m)}
.quiz-xp-hint{font-size:7px;font-weight:700;letter-spacing:1px;color:var(--l);font-family:var(--m);opacity:0.7}
.quiz-progress-track{height:2px;background:var(--s3);margin-bottom:14px;overflow:hidden}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--o),var(--o2));transition:width .4s ease}
.quiz-category{font-size:7px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--o);margin-bottom:6px;font-family:var(--m)}
.quiz-question{font-size:11px;font-weight:600;color:var(--t);line-height:1.5;margin-bottom:14px}
.q-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--s1);margin-bottom:4px;cursor:pointer;border-left:2px solid transparent;transition:all .15s}
.q-opt:hover{background:var(--s2)}
.q-opt-letter{font-size:9px;font-weight:800;color:var(--o);font-family:var(--m);min-width:14px}
.q-opt-text{font-size:10px;color:var(--t2);flex:1}
.q-opt-hint{font-size:8px;color:var(--t3);font-style:italic;margin-left:auto}
.quiz-submit{padding:10px;text-align:center;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--bg);background:var(--o);cursor:pointer;margin-top:12px;transition:opacity .2s;font-family:var(--m)}
.quiz-submit:hover{opacity:0.85}
.quiz-feedback{display:none;padding:10px 14px;margin-top:10px;font-size:9px;line-height:1.6}
.quiz-next{display:none;padding:10px;text-align:center;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--o);border:1px solid var(--o);cursor:pointer;margin-top:8px;transition:all .2s;font-family:var(--m)}
.quiz-next:hover{background:var(--og);color:var(--t)}
.quiz-radar-wrap{padding:16px 22px;border-top:1px solid rgba(255,255,255,0.04);margin-top:16px}
.quiz-radar-title{font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-family:var(--m);margin-bottom:10px}
.quiz-radar-svg{display:flex;justify-content:center}
.quiz-results{padding:30px 22px;text-align:center}
.quiz-results-title{font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-family:var(--m);margin-bottom:16px}
.quiz-results-pct{font-size:48px;font-weight:900;font-family:var(--m);line-height:1;margin-bottom:6px}
.quiz-results-score{font-size:10px;font-weight:700;color:var(--t2);margin-bottom:4px}
.quiz-results-xp{font-size:9px;font-weight:700;color:var(--l);font-family:var(--m);margin-bottom:20px}
.quiz-results-actions{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.quiz-btn-primary{padding:10px 24px;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--bg);background:var(--o);cursor:pointer;font-family:var(--m);transition:opacity .2s}
.quiz-btn-primary:hover{opacity:0.85}
.quiz-btn-secondary{padding:10px 24px;font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--t3);border:1px solid var(--s3);cursor:pointer;font-family:var(--m);transition:all .2s}
.quiz-btn-secondary:hover{color:var(--t2);border-color:var(--t3)}
.quiz-results-msg{font-size:9px;color:var(--t3);line-height:1.5;max-width:280px;margin:0 auto}

/* ======================================================
   ROADMAP — Vertical Timeline
====================================================== */
/* Roadmap — Sawad DNA timeline */
.roadmap-header{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);display:flex;justify-content:space-between;align-items:center}
.roadmap-title{font-size:8px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--t3);font-family:var(--m)}
.roadmap-level{font-size:8px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--o);font-family:var(--m);padding:2px 8px;background:var(--og)}
.roadmap-timeline{padding:20px 0 16px 36px;position:relative}
.roadmap-timeline::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--o),var(--s3) 40%,var(--s3))}
.roadmap-phase{display:flex;align-items:flex-start;gap:16px;position:relative;padding-bottom:24px;transition:opacity .3s}
.roadmap-phase:last-child{padding-bottom:0}
.roadmap-dot{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;margin-left:-18px;transition:transform .3s,filter .3s}
.roadmap-phase:hover .roadmap-dot{transform:scale(1.25)}
.roadmap-phase.available .roadmap-dot{color:var(--o);filter:drop-shadow(0 0 6px rgba(222,106,60,0.5))}
.roadmap-phase.available:hover .roadmap-dot{filter:drop-shadow(0 0 12px rgba(222,106,60,0.7))}
.roadmap-phase.completed .roadmap-dot{color:var(--l);filter:drop-shadow(0 0 6px rgba(204,253,83,0.5))}
.roadmap-phase.completed:hover .roadmap-dot{filter:drop-shadow(0 0 12px rgba(204,253,83,0.7))}
.roadmap-phase.locked .roadmap-dot{color:var(--t3)}
.roadmap-phase.locked{opacity:0.5}
.roadmap-phase.locked:hover{opacity:0.7}
.roadmap-content{flex:1;min-width:0}
.roadmap-phase-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.roadmap-phase-num{font-family:var(--m);font-size:9px;font-weight:800;color:var(--o);letter-spacing:0.1em}
.roadmap-phase.locked .roadmap-phase-num{color:var(--t3)}
.roadmap-phase.completed .roadmap-phase-num{color:var(--l)}
.roadmap-phase-header svg{color:var(--t3)}
.roadmap-phase-title{font-size:11px;font-weight:800;color:var(--t);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.03em}
.roadmap-phase.locked .roadmap-phase-title{color:var(--t3)}
.roadmap-phase-desc{font-size:9px;color:var(--t2);line-height:1.6;margin-bottom:8px}
.roadmap-phase.locked .roadmap-phase-desc{color:var(--t3)}
.roadmap-skills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.roadmap-skill{font-size:7px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;background:var(--s2);color:var(--t3);font-family:var(--m);transition:background .2s,color .2s}
.roadmap-skill.available{background:var(--og);color:var(--o)}
.roadmap-skill.completed{background:var(--lg);color:var(--l)}
.roadmap-phase.available .roadmap-skill{background:var(--og);color:var(--o)}
.roadmap-phase.completed .roadmap-skill{background:var(--lg);color:var(--l)}
.roadmap-skill-xp{font-size:6px;opacity:0.6}
.roadmap-unlock{font-size:8px;font-weight:600;letter-spacing:0.5px;color:var(--t3);font-family:var(--m);font-style:italic}

/* ======================================================
   DICTIONARY — IT Glossary
====================================================== */
/* Dictionary — readable, paginated, mobile-friendly */
.dict-list{padding:4px 0}
.dict-item{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-left:3px solid var(--o);padding-left:14px;margin-bottom:2px;transition:background .15s;cursor:default}
.dict-item:hover{background:rgba(255,255,255,0.02)}
.dict-term{font-size:13px;font-weight:800;font-family:var(--m);letter-spacing:0.02em}
.dict-def{font-size:11px;color:var(--t2);line-height:1.7}
.dict-pager-wrap{padding:0}
.dict-pager{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:12px 0 16px}
.dict-page-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:9px;font-weight:700;color:var(--t3);background:var(--s2);border-radius:4px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.dict-page-btn:hover{background:var(--s3);color:var(--t2);transform:translateY(-1px)}
.dict-page-btn.active{background:var(--o);color:#000;font-weight:800}
.dict-meta{text-align:center;font-family:var(--m);font-size:8px;color:var(--t3);letter-spacing:0.1em;padding:4px 0}
[data-theme="light"] .dict-item:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .dict-page-btn{background:#F0EFEC}
[data-theme="light"] .dict-page-btn:hover{background:#E2E1DE}
[data-theme="light"] .dict-page-btn.active{background:var(--o);color:#FFF}

/* === login.css === */
/* ---- LOGIN GATE ---- */
.login-gate {
  position:fixed; inset:0; z-index:99999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  overflow:hidden;
}
.login-gate.hidden { display:none; }
/* Animated background */
.login-gate::before {
  content:''; position:absolute; inset:-50%;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(222,106,60,0.03) 60deg, transparent 120deg, rgba(204,253,83,0.02) 180deg, transparent 240deg, rgba(222,106,60,0.03) 300deg, transparent 360deg);
  animation:loginSpin 20s linear infinite;
}
@keyframes loginSpin { to { transform:rotate(360deg); } }
/* Dashed circles */
.login-gate::after {
  content:''; position:absolute;
  width:500px; height:500px;
  border:1.5px dashed rgba(222,106,60,0.12);
  border-radius:50%;
  animation:loginSpin 30s linear infinite reverse;
}
/* Ghost text */
.login-ghost {
  position:absolute; font-size:clamp(120px,20vw,280px);
  font-weight:900; text-transform:uppercase;
  color:rgba(255,255,255,0.015); letter-spacing:-8px;
  pointer-events:none; white-space:nowrap;
}
.login-ghost.g1 { top:10%; left:-5%; }
.login-ghost.g2 { bottom:8%; right:-5%; }

.login-box {
  width:380px; padding:48px 40px;
  background:rgba(28,27,26,0.85);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.04);
  text-align:center; position:relative; z-index:1;
}
/* Corner accents — Sawad DNA */
.login-box::before, .login-box::after {
  content:''; position:absolute; width:16px; height:16px;
}
.login-box::before { top:-1px; left:-1px; border-top:2px solid var(--o); border-left:2px solid var(--o); }
.login-box::after { bottom:-1px; right:-1px; border-bottom:2px solid var(--l); border-right:2px solid var(--l); }

.login-logo {
  width:52px; height:52px; background:var(--o);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:20px; color:#000;
  margin:0 auto 24px;
  box-shadow:0 0 30px rgba(222,106,60,0.2);
}
.login-title {
  font-size:22px; font-weight:900;
  text-transform:uppercase; letter-spacing:3px;
  margin-bottom:4px;
}
.login-title span { color:var(--l); }
.login-sub {
  font-size:9px; color:var(--t3);
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:32px;
}
.login-input {
  width:100%; padding:14px 16px;
  background:var(--bg); border:1px solid var(--s3);
  color:var(--t); font-family:var(--m); font-size:13px;
  outline:none; transition:border-color .3s, box-shadow .3s;
  margin-bottom:10px;
}
.login-input[type="password"] { -webkit-text-security:disc; }
.login-input:focus { border-color:var(--o); box-shadow:0 0 12px rgba(222,106,60,0.1); }
.login-input::placeholder { color:var(--t3); }
.login-btn {
  width:100%; padding:14px;
  background:var(--o); color:#000;
  font-size:10px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  cursor:pointer; border:none; font-family:var(--f);
  transition:all .3s;
  box-shadow:0 4px 20px rgba(222,106,60,0.15);
}
.login-btn:hover { background:var(--o2); box-shadow:0 6px 30px rgba(222,106,60,0.25); transform:translateY(-1px); }
.login-error {
  font-size:10px; color:var(--r);
  margin-top:12px; min-height:16px;
  font-family:var(--m);
}
.login-footer {
  margin-top:28px; font-size:8px; color:var(--t3);
  letter-spacing:2px; text-transform:uppercase;
  position:relative; z-index:1;
}
.login-version {
  margin-top:8px; font-size:7px; color:rgba(255,255,255,0.08);
  font-family:var(--m); letter-spacing:1px;
}
.app.locked { filter:blur(20px); pointer-events:none; user-select:none; }

/* === detail-panel.css === */
/* Slide-out detail panel — right side overlay */
.detail-panel {
  position: fixed;
  top: 44px; /* below topbar */
  right: 0;
  bottom: 28px; /* above ticker */
  width: 440px;
  background: var(--s1);
  border-left: 1px solid rgba(255,255,255,0.06);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.detail-panel.open {
  transform: translateX(0);
}
.detail-panel-header {
  position: sticky;
  top: 0;
  background: var(--s1);
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.detail-panel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s2);
  border: none;
  color: var(--t2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 14px;
}
.detail-panel-close:hover {
  background: var(--s3);
  color: var(--t);
}
.detail-panel-body {
  padding: 20px 16px;
}
.detail-panel-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--t);
  margin-bottom: 12px;
  line-height: 1.4;
}
.detail-panel-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  font-family: var(--m);
  margin-bottom: 16px;
}
.detail-panel-summary {
  font-size: 11px;
  line-height: 1.85;
  color: var(--t2);
  margin-bottom: 20px;
}
.detail-panel-summary p {
  margin-bottom: 12px;
}
.detail-panel-summary strong {
  color: var(--t);
}
.detail-panel-summary h3 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o);
  font-family: var(--m);
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.detail-panel-summary h3:first-child {
  margin-top: 0;
}
.detail-panel-summary ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.detail-panel-summary ul li {
  padding: 6px 0 6px 12px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.detail-panel-summary ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--o);
  font-weight: 700;
}
.detail-panel-summary ul li strong {
  color: var(--l);
  font-family: var(--m);
  font-size: 10px;
}
.detail-panel-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--m);
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.04);
  letter-spacing: 0.04em;
}
.detail-panel-meta a {
  color: var(--o);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}
.detail-panel-meta a:hover { color: var(--o2); }
.detail-panel-vocab {
  margin-top: 20px;
  padding: 12px;
  background: var(--s2);
}
.detail-panel-vocab-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--o);
  font-family: var(--m);
  margin-bottom: 8px;
}
.detail-panel-vocab-item {
  font-size: 10px;
  color: var(--t2);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.detail-panel-vocab-item:last-child { border-bottom: none; }
.detail-panel-vocab-term {
  color: var(--l);
  font-weight: 600;
  font-family: var(--m);
}

/* Light theme overrides for detail panel */
[data-theme="light"] .detail-panel {
  background: #FFFFFF !important;
  border-left-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .detail-panel-header {
  background: #FFFFFF !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .detail-panel-close { background: #F2F1EE !important; }
[data-theme="light"] .detail-panel-close:hover { background: #E2E1DE !important; }
[data-theme="light"] .detail-panel-vocab { background: #F8F7F4 !important; }
[data-theme="light"] .detail-panel-summary h3 { color: var(--o) !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .detail-panel-summary ul li { border-bottom-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .detail-panel-summary ul li strong { color: #4E7500 !important; }
[data-theme="light"] .detail-panel-meta a { color: var(--o) !important; }

/* === theme-light.css === */
/* ======================================================
   LIGHT THEME
====================================================== */
[data-theme="light"] {
  --bg: #F8F7F4;
  --s1: #FFFFFF;
  --s2: #F0EFEC;
  --s3: #E0DFDC;
  --s4: #D0CFCC;
  --o: #DE6A3C;
  --l: #4E7500;
  --r: #C0304A;
  --t: #151413;
  --t2: #4A4948;
  --t3: #8A8988;
  --gh: rgba(0,0,0,0.04);
  --og: rgba(222,106,60,0.1);
  --lg: rgba(78,117,0,0.1);
  --rg: rgba(192,48,74,0.1);
}
[data-theme="light"] body { background:var(--bg) !important; color:var(--t) !important; }
[data-theme="light"] .bar { background:rgba(255,255,255,0.95) !important; border-bottom:1px solid rgba(0,0,0,0.08) !important; }
[data-theme="light"] .topbar { background:rgba(255,255,255,0.95) !important; border-bottom:1px solid rgba(0,0,0,0.08) !important; }
[data-theme="light"] .topbar * { color: var(--t) !important; }
[data-theme="light"] .topbar .tb-status { color: #2E7D32 !important; }
[data-theme="light"] .topbar .live-dot, [data-theme="light"] .topbar .s-dot.green { background: #2E7D32 !important; box-shadow: 0 0 5px #2E7D32 !important; }
[data-theme="light"] .bar * { color: var(--t) !important; }
[data-theme="light"] .bar .bl { color: var(--t3) !important; }
[data-theme="light"] .bar .bl.on { color: #000 !important; background: var(--o) !important; }
[data-theme="light"] .bar .tb-status { color: #2E7D32 !important; }
[data-theme="light"] .bar .blink { background: #2E7D32 !important; }
[data-theme="light"] .bar .tb-brand, [data-theme="light"] .bar .glitch-title { color:var(--t) !important; }
[data-theme="light"] .bl { color:var(--t3) !important; }
[data-theme="light"] .bl:hover { color:var(--t) !important; background:var(--s3) !important; }
[data-theme="light"] .tb-status { color:#2E7D32 !important; }
[data-theme="light"] .left { background:#FAF9F6 !important; border-right:1px solid rgba(0,0,0,0.06) !important; }
[data-theme="light"] .profile { background:#F2F1EE !important; }
[data-theme="light"] .profile-name { color:var(--o) !important; }
[data-theme="light"] .tabs { background:#F2F1EE !important; border-bottom:1px solid rgba(0,0,0,0.06) !important; }
[data-theme="light"] .tab { color:var(--t3) !important; }
[data-theme="light"] .tab.on { color:var(--o) !important; border-bottom-color:var(--o) !important; }
[data-theme="light"] .sh { background:#FAF9F6 !important; border-bottom:1px solid rgba(0,0,0,0.06) !important; }
[data-theme="light"] .sh .sh-t { color:var(--t2) !important; }
[data-theme="light"] .feed-item { background:#FFFFFF !important; border-bottom:1px solid rgba(0,0,0,0.05) !important; color:var(--t) !important; }
[data-theme="light"] .feed-item:hover { background:#F8F7F4 !important; }
[data-theme="light"] .feed-item.active { background:#F2F1EE !important; }
[data-theme="light"] .feed-title { color:var(--t) !important; }
[data-theme="light"] .feed-summary { color:var(--t2) !important; }
[data-theme="light"] .feed-time, [data-theme="light"] .feed-city { color:var(--t3) !important; }
[data-theme="light"] .nb-item { background:#FFFFFF !important; border-bottom:1px solid rgba(0,0,0,0.04) !important; }
[data-theme="light"] .nb-item:hover { background:#F8F7F4 !important; }
[data-theme="light"] .nb-title { color:var(--t) !important; }
[data-theme="light"] .nb-meta, [data-theme="light"] .nb-label { color:var(--t3) !important; }
[data-theme="light"] .insight-card { background:#F2F1EE !important; border-left-color:var(--o) !important; }
[data-theme="light"] .insight-text { color:var(--t2) !important; }
[data-theme="light"] .insight-text strong { color:var(--t) !important; }
[data-theme="light"] .ch { color:var(--t) !important; }
[data-theme="light"] .ch:hover { background:#F2F1EE !important; }
[data-theme="light"] .ch-name { color:var(--t) !important; }
[data-theme="light"] .ch-badge { color:#2E7D32 !important; }
[data-theme="light"] .xp-track { background:#DDD !important; }
[data-theme="light"] .tick { background:#F2F1EE !important; border-top:1px solid rgba(0,0,0,0.06) !important; }
[data-theme="light"] .tick .tk-t { color:var(--t3) !important; }
[data-theme="light"] .right { background:#EAE9E6 !important; }
[data-theme="light"] .globe-ghost { color:rgba(0,0,0,0.04) !important; }
[data-theme="light"] .left::before { color:rgba(0,0,0,0.025) !important; }
[data-theme="light"] .deco { opacity:0.08 !important; }
[data-theme="light"] .globe-overlay { background:rgba(255,255,255,0.95) !important; color:var(--t) !important; }
[data-theme="light"] .ov-summary { color:var(--t2) !important; }
[data-theme="light"] .ov-foot { color:var(--t3) !important; }
[data-theme="light"] .glitch-title::before, [data-theme="light"] .glitch-title::after { background:#FAF9F6 !important; }
[data-theme="light"] body::after { background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,0.015) 2px,rgba(0,0,0,0.015) 4px) !important; }
[data-theme="light"] [style*="background:var(--s1)"] { background:#FFFFFF !important; }
[data-theme="light"] [style*="background:var(--s2)"] { background:#F2F1EE !important; }
[data-theme="light"] [style*="background:var(--bg)"] { background:#F8F7F4 !important; }
[data-theme="light"] .ps-val.o { color:var(--o) !important; }
[data-theme="light"] .q-opt { background:#FFFFFF !important; color:var(--t) !important; }
[data-theme="light"] .q-opt span { color:var(--t) !important; }
[data-theme="light"] svg text { fill:var(--t3) !important; }
[data-theme="light"] .feed-featured {
  background:linear-gradient(135deg, rgba(222,106,60,0.06) 0%, #FFFFFF 100%) !important;
}
[data-theme="light"] .feed-featured:hover {
  background:linear-gradient(135deg, rgba(222,106,60,0.1) 0%, #F8F7F4 100%) !important;
}

/* ======================================================
   LIGHT — Quiz
====================================================== */
[data-theme="light"] .quiz-wrap { color:var(--t) !important; }
[data-theme="light"] .quiz-label { color:var(--o) !important; }
[data-theme="light"] .quiz-score { color:var(--t3) !important; }
[data-theme="light"] .quiz-progress-label { color:var(--t3) !important; }
[data-theme="light"] .quiz-xp-hint { color:#4E7500 !important; }
[data-theme="light"] .quiz-progress-track { background:var(--s3) !important; }
[data-theme="light"] .quiz-category { color:var(--o) !important; }
[data-theme="light"] .quiz-question { color:var(--t) !important; }
[data-theme="light"] .q-opt { background:#FFFFFF !important; border-left-color:transparent !important; }
[data-theme="light"] .q-opt:hover { background:#F8F7F4 !important; }
[data-theme="light"] .q-opt-letter { color:var(--o) !important; }
[data-theme="light"] .q-opt-text { color:var(--t2) !important; }
[data-theme="light"] .q-opt-hint { color:var(--t3) !important; }
[data-theme="light"] .quiz-submit { background:var(--o) !important; color:#FFFFFF !important; }
[data-theme="light"] .quiz-feedback { color:var(--t) !important; }
[data-theme="light"] .quiz-next { color:var(--o) !important; border-color:var(--o) !important; }
[data-theme="light"] .quiz-next:hover { background:var(--og) !important; }
[data-theme="light"] .quiz-radar-wrap { border-top-color:rgba(0,0,0,0.06) !important; }
[data-theme="light"] .quiz-radar-title { color:var(--t3) !important; }
[data-theme="light"] .quiz-results-title { color:var(--t3) !important; }
[data-theme="light"] .quiz-results-score { color:var(--t2) !important; }
[data-theme="light"] .quiz-results-xp { color:#4E7500 !important; }
[data-theme="light"] .quiz-btn-primary { background:var(--o) !important; color:#FFFFFF !important; }
[data-theme="light"] .quiz-btn-secondary { color:var(--t3) !important; border-color:var(--s3) !important; }
[data-theme="light"] .quiz-btn-secondary:hover { color:var(--t2) !important; border-color:var(--t3) !important; }
[data-theme="light"] .quiz-results-msg { color:var(--t3) !important; }

/* ======================================================
   LIGHT — Roadmap
====================================================== */
[data-theme="light"] .roadmap-header { border-bottom-color:rgba(0,0,0,0.06) !important; }
[data-theme="light"] .roadmap-title { color:var(--t3) !important; }
[data-theme="light"] .roadmap-level { color:var(--o) !important; }
[data-theme="light"] .roadmap-timeline::before { background:var(--s3) !important; }
[data-theme="light"] .roadmap-phase.available .roadmap-dot { color:var(--o) !important; filter:drop-shadow(0 0 4px rgba(222,106,60,0.3)) !important; }
[data-theme="light"] .roadmap-phase.completed .roadmap-dot { color:#4E7500 !important; filter:drop-shadow(0 0 4px rgba(78,117,0,0.3)) !important; }
[data-theme="light"] .roadmap-phase.locked .roadmap-dot { color:var(--t3) !important; filter:none !important; }
[data-theme="light"] .roadmap-phase-title { color:var(--t) !important; }
[data-theme="light"] .roadmap-phase.locked .roadmap-phase-title { color:var(--t3) !important; }
[data-theme="light"] .roadmap-phase-desc { color:var(--t2) !important; }
[data-theme="light"] .roadmap-phase.locked .roadmap-phase-desc { color:var(--t3) !important; }
[data-theme="light"] .roadmap-skill { background:var(--s2) !important; color:var(--t3) !important; }
[data-theme="light"] .roadmap-phase.available .roadmap-skill { background:var(--og) !important; color:var(--o) !important; }
[data-theme="light"] .roadmap-phase.completed .roadmap-skill { background:rgba(78,117,0,0.1) !important; color:#4E7500 !important; }
[data-theme="light"] .roadmap-unlock { color:var(--t3) !important; }

/* ======================================================
   LIGHT — Dictionary
====================================================== */
[data-theme="light"] .dict-header { border-bottom-color:rgba(0,0,0,0.06) !important; }
[data-theme="light"] .dict-title { color:var(--t3) !important; }
[data-theme="light"] .dict-search { background:#FFFFFF !important; border-color:var(--s3) !important; color:var(--t) !important; }
[data-theme="light"] .dict-search::placeholder { color:var(--t3) !important; }
[data-theme="light"] .dict-search:focus { border-color:var(--o) !important; }
[data-theme="light"] .dict-item { background:transparent !important; }
[data-theme="light"] .dict-item:hover { background:#F8F7F4 !important; }
[data-theme="light"] .dict-item:nth-child(even) { border-left-color:#4E7500 !important; }
[data-theme="light"] .dict-term { color:var(--t) !important; }
[data-theme="light"] .dict-def { color:var(--t2) !important; }

/* ======================================================
   LIGHT — Misc Fixes
====================================================== */
[data-theme="light"] .detail-panel-vocab-term { color:#4E7500 !important; }
[data-theme="light"] .ps-val.l { color:#4E7500 !important; }
[data-theme="light"] .xp-fill::after { background:#4E7500 !important; box-shadow:0 0 8px #4E7500 !important; }
[data-theme="light"] .live-dot { background:#2E7D32 !important; box-shadow:0 0 5px #2E7D32 !important; }
[data-theme="light"] .live-label { color:#2E7D32 !important; }
[data-theme="light"] .s-dot.green { background:#2E7D32 !important; box-shadow:0 0 5px #2E7D32 !important; }
[data-theme="light"] .tag.devops, [data-theme="light"] .tag.vietnamese { color:#4E7500 !important; }
[data-theme="light"] .nb-btn.lime { color:#4E7500 !important; }
[data-theme="light"] .login-box { background:#FFFFFF !important; border:1px solid rgba(0,0,0,0.08) !important; color:var(--t) !important; }
[data-theme="light"] .login-ghost { color:#151413 !important; }
[data-theme="light"] .login-version { color:var(--t3) !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2) !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.35) !important; }
[data-theme="light"] .matrix-col { color:rgba(0,0,0,0.06) !important; opacity:0.5 !important; }

/* === mobile.css === */
/* ======================================================
   MOBILE RESPONSIVE — stacked layout below 768px
   Globe becomes a swipeable panel, content goes full width
====================================================== */

/* ---- BREAKPOINT: TABLET & BELOW ---- */
@media (max-width: 768px) {

  /* Body — allow scroll */
  body {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
  }

  /* App shell — single column */
  .app {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }

  /* ---- TOPBAR ---- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    padding: 0 12px;
    height: 44px;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .topbar-sep { display: none; }
  .sub-label { display: none; }
  .status-chips { display: none; }
  #langToggle { display: inline !important; }
  .time-display { font-size: 9px; }
  .glitch-title { font-size: 9px; letter-spacing: 0.12em; }
  /* Hide glitch pseudo-elements on mobile for perf */
  .glitch-title::before,
  .glitch-title::after { display: none; }

  /* Sticky header only — profile and tabs scroll with content
     (sticky inside overflow:auto doesn't work reliably on mobile) */

  /* ---- LEFT PANEL — full width ---- */
  .left {
    width: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    order: 2;
    flex: 1;
  }
  .left::before { display: none; } /* hide ghost text */

  /* ---- RIGHT PANEL (GLOBE) — compact banner ---- */
  .right {
    width: 100%;
    height: 220px;
    order: 1;
    flex-shrink: 0;
    position: relative;
  }
  .globe-ghost { font-size: 48px; }
  .deco-circle.c1 { width: 180px; height: 180px; }
  .deco-circle.c2 { width: 260px; height: 260px; }
  .deco-circle.c3 { width: 120px; height: 120px; }
  .deco-line { display: none; }

  /* Globe overlay — full width at bottom of globe area */
  .globe-overlay {
    left: 8px;
    right: 8px;
    padding: 10px 12px;
  }

  /* ---- TICKER — sticky bottom ---- */
  .tick {
    position: sticky;
    bottom: 0;
    z-index: 400;
    order: 3;
  }

  /* ---- SECTIONS — tighter padding ---- */
  .section { padding: 12px 12px 0; }
  .section-head { margin-bottom: 8px; padding-bottom: 6px; }

  /* ---- PROFILE BAR (sticky needs solid bg) ---- */
  .profile { padding: 10px 12px; background: var(--s2); }
  .profile-info { gap: 6px; }
  .profile-name { font-size: 11px; }
  .profile-level { font-size: 7px; }
  .xp-bar { margin: 6px 0; }
  .profile-stats { gap: 8px; }
  .ps-val { font-size: 14px; }
  .ps-lbl { font-size: 6px; }

  /* ---- TABS — scrollable ---- */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    padding: 12px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 7px;
  }

  /* ---- TOPIC NAV — scrollable pills ---- */
  .topic-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 6px 12px;
    scrollbar-width: none;
  }
  .topic-nav::-webkit-scrollbar { display: none; }
  .topic-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .topic-children {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 4px 12px;
    scrollbar-width: none;
  }
  .topic-children::-webkit-scrollbar { display: none; }

  /* ---- FEED ITEMS — bigger text for mobile ---- */
  .feed-item { padding: 12px 14px; }
  .feed-title { font-size: 12px; }
  .feed-summary { font-size: 11px; }
  .feed-time, .feed-loc { font-size: 10px; }
  .tag { font-size: 8px; padding: 3px 6px; }
  .feed-featured { padding: 16px 14px; }
  .feed-featured .feed-title { font-size: 15px; }
  .feed-featured .feed-summary { font-size: 12px; }
  .feed-item.on .feed-summary { max-height: 100px; }

  /* ---- SECTION HEADERS — bigger ---- */
  .section-title { font-size: 10px; }
  .section-meta { font-size: 9px; }

  /* ---- DETAIL PANEL — full screen, bigger text ---- */
  .detail-panel {
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 600;
    -webkit-overflow-scrolling: touch;
  }
  .detail-panel-header { padding: 14px; }
  .detail-panel-body { padding: 18px 14px; }
  .detail-panel-title { font-size: 16px; }
  .detail-panel-summary { font-size: 13px; line-height: 1.8; }
  .detail-panel-summary h3 { font-size: 12px; }
  .detail-panel-meta { font-size: 11px; }
  .detail-panel-vocab-item { font-size: 12px; }

  /* ---- PROFILE — bigger ---- */
  .profile-name { font-size: 13px; }
  .profile-level { font-size: 9px; }
  .xp-label { font-size: 9px; }
  .ps-val { font-size: 16px; }
  .ps-lbl { font-size: 7px; }
  /* Close button — minimum 44px touch target */
  .detail-panel-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- NOTEBOOK LM ---- */
  .nb-item { padding: 8px 10px; }
  .nb-title { font-size: 9px; }
  .nb-actions { gap: 4px; }

  /* ---- AI INSIGHT ---- */
  .insight-card { padding: 10px; }
  .insight-text { font-size: 10px; }

  /* ---- CHANNELS ---- */
  .ch { padding: 6px 12px; }
  .ch-name { font-size: 9px; }

  /* ---- COMMAND BAR ---- */
  .cmd-bar {
    padding-bottom: 12px;
  }
  .cmd-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  /* ---- CHAT BUBBLE + PANEL ---- */
  .chat-bubble {
    z-index: 9000;
    bottom: 16px;
    right: 12px;
    /* Ensure 44px minimum touch target */
    min-width: 52px;
    min-height: 52px;
  }
  .chat-panel {
    z-index: 9001;
    width: calc(100vw - 16px);
    height: 70vh;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;
  }

  /* ---- PAGER — synced size for feed + dictionary ---- */
  .feed-page-btn, .dict-page-btn {
    width: 36px;
    height: 36px;
    font-size: 11px;
    border-radius: 4px;
  }

  /* ---- QUIZ ---- */
  .quiz-wrap { padding: 12px !important; }
  .quiz-question { font-size: 13px !important; }
  .q-opt { padding: 14px 12px !important; }

  /* ---- ROADMAP ---- */
  .roadmap-timeline { padding: 0 4px; }
  .roadmap-skills { gap: 4px; }
  .roadmap-skill { font-size: 8px; padding: 3px 6px; }

  /* ---- TOUCH TARGETS — 44px minimum (Apple HIG) ---- */
  .topic-pill {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
  }
  .topic-child-pill {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 10px;
  }
  .feed-item {
    min-height: 44px;
  }
  .chat-header-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .chat-preset {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
  }

  /* ---- SMOOTH SCROLL — momentum scrolling on iOS ---- */
  .chat-messages {
    -webkit-overflow-scrolling: touch;
  }
  .topic-children {
    -webkit-overflow-scrolling: touch;
  }
  .chat-presets {
    -webkit-overflow-scrolling: touch;
  }

  /* ---- TICKER — faster on mobile (smaller screen = less distance) ---- */
  .ticker-track {
    animation-duration: 18s;
  }

  /* ---- FEED ITEMS — disable hover effects on touch ---- */
  .feed-item:hover {
    transform: none;
  }
}

/* ---- BREAKPOINT: SMALL PHONE ---- */
@media (max-width: 420px) {
  .topbar { padding: 0 8px; }
  .logo-mark { width: 20px; height: 20px; font-size: 7px; }
  .glitch-title { font-size: 8px; }
  .topbar-r { gap: 8px; }
  .live-label { display: none; }

  .right { height: 180px; }

  .tab { padding: 8px 10px; font-size: 6px; letter-spacing: 1.5px; }

  .profile-stats .ps { min-width: 0; }

  .feed-featured .feed-title { font-size: 12px; }
  .feed-title { font-size: 9px; }

  .detail-panel-title { font-size: 12px; }

  .cmd-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- GLOBE TOGGLE BUTTON (mobile only) ---- */
.globe-toggle {
  display: none !important;
}
@media (max-width: 768px) {
  .globe-toggle {
    display: none !important; /* Globe is our signature — always visible */
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 30;
    background: rgba(21,20,19,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--o);
    font-family: var(--m);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 10px 14px;
    min-height: 44px;
    cursor: pointer;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
  }
  .globe-toggle svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  /* Collapsed globe state */
  /* Globe always visible — no collapse */

  /* ---- LIGHT MODE MOBILE ---- */
  [data-theme="light"] .topbar {
    background: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }
  [data-theme="light"] .right {
    background: #EAE9E6 !important;
  }
  [data-theme="light"] .globe-toggle {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.1);
    color: var(--o);
  }
  [data-theme="light"] .detail-panel {
    background: #FFFFFF !important;
  }
  [data-theme="light"] .chat-window {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
  }
}

/* === chat.css === */
/* ======================================================
   CHAT WIDGET — Claude AI, Owen's Pal
   HypeCloud DNA: animated borders, glass morphism, alive
   ====================================================== */

/* ── Floating Bubble ────────────────────────────────── */
.chat-bubble {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--o) 0%, #B85520 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  cursor: grab;
  z-index: 9000;
  touch-action: none; /* critical: tells mobile browser to let JS handle touch */
  -webkit-touch-callout: none; /* prevent iOS callout menu on long press */
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  box-shadow: 0 4px 24px rgba(222,106,60,0.35);
  animation: bubble-breathe 3s ease-in-out infinite alternate;
}
@keyframes bubble-breathe {
  from { box-shadow: 0 4px 20px rgba(222,106,60,0.3); }
  to { box-shadow: 0 6px 32px rgba(222,106,60,0.5), 0 0 60px rgba(222,106,60,0.1); }
}
.chat-bubble:hover {
  transform: scale(1.12) rotate(-3deg);
  animation: none;
  box-shadow: 0 8px 36px rgba(222,106,60,0.6);
}
.chat-bubble.hidden { display: none; }
.chat-bubble svg { width: 24px; height: 24px; stroke: #000; fill: none; stroke-width: 2; }
.chat-bubble::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: var(--l);
  border-radius: 50%;
  border: 2px solid var(--bg);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

/* ── Chat Panel ─────────────────────────────────────── */
.chat-panel {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 380px;
  height: 520px;
  background: var(--s1);
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transform: scale(0) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.25s;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 80px rgba(222,106,60,0.05);
  overflow: hidden;
}
.chat-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Static subtle border glow — no spinning */
.chat-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(222,106,60,0.15) 0%, transparent 40%, rgba(204,253,83,0.08) 100%);
  z-index: -1;
}

/* ── Header ─────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--s2) 0%, rgba(222,106,60,0.05) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.chat-header-icon {
  width: 32px;
  height: 32px;
  background: var(--o);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.chat-header-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--o);
  opacity: 0.2;
  animation: icon-pulse 2s ease-in-out infinite alternate;
}
@keyframes icon-pulse { from { opacity: 0.1; transform: scale(1); } to { opacity: 0.3; transform: scale(1.15); } }
.chat-header-icon svg { width: 16px; height: 16px; stroke: #000; fill: none; stroke-width: 2; position: relative; z-index: 1; }
.chat-header-title {
  font-family: var(--m);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--o), var(--l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.chat-header-sub {
  font-size: 8px;
  color: var(--t3);
  font-family: var(--m);
  letter-spacing: 0.06em;
}
.chat-header-actions { display: flex; gap: 4px; margin-left: auto; }
.chat-header-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: 13px;
  transition: color 0.2s, background 0.2s;
}
.chat-header-btn:hover { color: var(--t); background: rgba(255,255,255,0.05); }

/* ── Messages ───────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.chat-messages::-webkit-scrollbar { width: 2px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--s3); }

/* Welcome */
.chat-welcome { text-align: center; padding: 28px 16px; }
.chat-welcome-icon { font-size: 32px; margin-bottom: 10px; }
.chat-welcome-title {
  font-family: var(--m);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--o), var(--l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.chat-welcome-text { font-size: 11px; color: var(--t2); line-height: 1.7; }

/* Messages */
.chat-msg {
  display: flex;
  animation: msg-in 0.3s ease-out both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-ai { justify-content: flex-start; }
.chat-msg-content {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.7;
}
.chat-msg-user .chat-msg-content {
  background: linear-gradient(135deg, var(--o) 0%, #B85520 100%);
  color: #000;
  font-weight: 500;
}
.chat-msg-ai .chat-msg-content {
  background: var(--s2);
  color: var(--t2);
  border-left: 2px solid var(--o);
}
.chat-msg-ai .chat-msg-content strong { color: var(--t); }
.chat-msg-ai .chat-msg-content code {
  background: var(--s3);
  padding: 1px 5px;
  font-family: var(--m);
  font-size: 10px;
  color: var(--l);
}

/* Typing */
.chat-typing { color: var(--o); font-style: italic; font-size: 10px; font-family: var(--m); }
.dot-anim { animation: dot-pulse 1.2s infinite; }
@keyframes dot-pulse { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }

/* ── Presets ─────────────────────────────────────────── */
.chat-presets {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-presets::-webkit-scrollbar { display: none; }
.chat-preset {
  padding: 5px 10px;
  background: var(--s2);
  font-family: var(--m);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  transition: all 0.2s;
}
.chat-preset:hover { background: var(--og); color: var(--o); transform: translateY(-1px); }

/* ── Input ───────────────────────────────────────────── */
.chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: var(--s2);
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  align-items: center;
}
.chat-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--s1);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--t);
  font-family: var(--f);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input::placeholder { color: var(--t3); font-size: 10px; }
.chat-input:focus { border-color: var(--o); box-shadow: 0 0 0 2px rgba(222,106,60,0.1); }
.chat-send {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--o) 0%, #B85520 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.chat-send:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(222,106,60,0.3); }
.chat-send:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }
.chat-send svg { width: 16px; height: 16px; stroke: #000; fill: none; stroke-width: 2; }

/* ── Light mode ──────────────────────────────────────── */
[data-theme="light"] .chat-panel { background: #FFF; border-color: rgba(0,0,0,0.08); box-shadow: 0 12px 48px rgba(0,0,0,0.12); }
[data-theme="light"] .chat-panel::before { opacity: 0.1; }
[data-theme="light"] .chat-header { background: linear-gradient(135deg, #F2F1EE 0%, rgba(222,106,60,0.04) 100%); }
[data-theme="light"] .chat-msg-ai .chat-msg-content { background: #F2F1EE; }
[data-theme="light"] .chat-msg-ai .chat-msg-content code { color: var(--o); background: #F0EFEC; }
[data-theme="light"] .chat-input { background: #FFF; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .chat-input-area { background: #F2F1EE; }
[data-theme="light"] .chat-preset { background: #F0EFEC; }
[data-theme="light"] .chat-preset:hover { background: var(--og); }
[data-theme="light"] .chat-bubble { box-shadow: 0 4px 20px rgba(222,106,60,0.2); }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 16px); left: 8px; right: 8px; bottom: 8px; top: auto; height: 70vh; }
  .chat-bubble { bottom: 16px; right: 12px; width: 52px; height: 52px; }
}