/* ═══════════════════════════════════════════════════════════════
   HARSHIT.DEV — Sci-Fi VS Code Portfolio Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Variables ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0d0d0f;
  --bg2:         #111214;
  --bg3:         #161719;
  --sidebar-bg:  #0f1117;
  --tab-bg:      #111214;
  --active-tab:  #1e1e2e;
  --border:      #2a2a3e;
  --border2:     #1e1e2e;

  --cyan:        #00f5ff;
  --cyan-dim:    #00b8c8;
  --purple:      #bd93f9;
  --purple-dim:  #8860c0;
  --green:       #50fa7b;
  --green-dim:   #2dbe5a;
  --yellow:      #f1fa8c;
  --orange:      #ffb86c;
  --red:         #ff5555;
  --pink:        #ff79c6;

  --text:        #cdd6f4;
  --text-dim:    #6c7086;
  --text-muted:  #45475a;

  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --font-display:'Orbitron', sans-serif;

  --tab-h:       35px;
  --titlebar-h:  32px;
  --statusbar-h: 26px;
  --sidebar-w:   240px;
  --activity-w:  48px;
  --terminal-h:  180px;

  --glow-cyan:   0 0 8px rgba(0,245,255,0.4), 0 0 24px rgba(0,245,255,0.15);
  --glow-purple: 0 0 8px rgba(189,147,249,0.4), 0 0 24px rgba(189,147,249,0.15);
  --glow-green:  0 0 8px rgba(80,250,123,0.4), 0 0 24px rgba(80,250,123,0.15);
}

html { font-size: 14px; }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); overflow: hidden; height: 100vh; width: 100vw; cursor: default; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea { font-family: inherit; }
.hidden { display: none !important; }

/* ═══════════════════ SCROLLBAR ═══════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dim); }

/* ═══════════════════ BOOT SCREEN ═══════════════════ */
#boot-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}

#matrix-canvas {
  position: absolute; inset: 0;
  opacity: 0.3;
}

.boot-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  max-width: 640px; width: 90%;
}

.boot-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  letter-spacing: 0.15em;
}

/* Glitch effect */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch::before {
  color: var(--red);
  animation: glitch-1 2s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-2px);
}
.glitch::after {
  color: var(--cyan);
  animation: glitch-2 2s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  transform: translate(2px);
}
@keyframes glitch-1 {
  0%, 90%, 100% { transform: translate(-2px); opacity: 1; }
  92% { transform: translate(4px, -1px); opacity: 0.8; }
  94% { transform: translate(-1px, 2px); opacity: 0.9; }
  96% { transform: translate(3px); opacity: 0.7; }
}
@keyframes glitch-2 {
  0%, 90%, 100% { transform: translate(2px); opacity: 1; }
  92% { transform: translate(-3px, 1px); opacity: 0.8; }
  95% { transform: translate(2px, -2px); opacity: 0.7; }
}

.boot-terminal {
  width: 100%;
  background: #0a0a0f;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,245,255,0.1), 0 20px 60px rgba(0,0,0,0.8);
}

.terminal-bar {
  background: var(--bg3);
  padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.terminal-title { margin-left: 8px; color: var(--text-dim); font-size: 0.75rem; }

.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.red    { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green  { background: #28c840; }

.terminal-body {
  padding: 14px;
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--green);
}

.boot-log-line { display: block; }
.boot-log-line.dim  { color: var(--text-muted); }
.boot-log-line.warn { color: var(--yellow); }
.boot-log-line.ok   { color: var(--green); }

.progress-wrap {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
}
.progress-bar {
  flex: 1; height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 2px;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--cyan);
}
#boot-percent {
  color: var(--cyan); font-size: 0.75rem;
  min-width: 3ch; text-align: right;
}

/* ═══════════════════ VS CODE LAYOUT ═══════════════════ */
#vscode {
  display: flex; flex-direction: column;
  height: 100vh; width: 100vw;
  overflow: hidden;
  animation: vscode-in 0.5s ease;
}
@keyframes vscode-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Title Bar ─── */
.title-bar {
  height: var(--titlebar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border2);
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 16px;
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
}
.title-traffic { display: flex; gap: 6px; }
.title-menus {
  display: flex; gap: 2px;
  font-size: 0.75rem; color: var(--text-dim);
}
.title-menus span {
  padding: 3px 8px; border-radius: 3px; cursor: pointer;
  transition: background 0.15s;
}
.title-menus span:hover { background: var(--bg3); color: var(--text); }
.title-name {
  flex: 1; text-align: center;
  font-size: 0.75rem; color: var(--text-dim);
}
.title-right { display: flex; align-items: center; }
.notification-bell { font-size: 0.85rem; cursor: pointer; }

/* ─── Body ─── */
.vscode-body {
  display: flex; flex: 1;
  overflow: hidden;
}

/* ─── Activity Bar ─── */
.activity-bar {
  width: var(--activity-w);
  background: var(--bg2);
  border-right: 1px solid var(--border2);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  flex-shrink: 0;
}
.activity-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.activity-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--text-dim);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.2s;
}
.activity-icon:hover { background: var(--bg3); }
.activity-icon:hover svg { stroke: var(--text); }
.activity-icon.active svg { stroke: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.activity-icon.active::before {
  content: '';
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px;
  background: var(--cyan);
  border-radius: 0 2px 2px 0;
  box-shadow: var(--glow-cyan);
}
.activity-spacer { flex: 1; }

/* ─── Sidebar ─── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border2);
  overflow-y: auto;
  flex-shrink: 0;
  user-select: none;
}
.sidebar-header {
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-dim);
  padding: 10px 14px 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sidebar-header.mt { margin-top: 16px; border-top: 1px solid var(--border2); padding-top: 14px; }

.tree-root {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 14px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
.tree-arrow { color: var(--text-dim); font-size: 0.7rem; }
.folder-icon { font-size: 0.85rem; }

.tree-children { padding-left: 10px; }
.tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.tree-item:hover { background: var(--bg3); color: var(--text); }
.tree-item.active { background: rgba(0,245,255,0.07); color: var(--cyan); }
.tree-item.dimmed { opacity: 0.45; }
.tree-folder {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
}

.file-icon {
  font-size: 0.6rem; font-weight: 700;
  padding: 1px 3px; border-radius: 2px;
  min-width: 22px; text-align: center;
}
.js-icon   { background: #f7df1e22; color: #f7df1e; border: 1px solid #f7df1e44; }
.json-icon { background: #ab8b3322; color: #c8a444; border: 1px solid #c8a44444; }
.css-icon  { background: #264de422; color: #5b9de0; border: 1px solid #5b9de044; }
.ts-icon   { background: #3178c622; color: #4fa3e0; border: 1px solid #4fa3e044; }
.html-icon { background: #e34c2622; color: #e04a22; border: 1px solid #e04a2244; }
.md-icon   { background: #ffffff11; color: #888; border: 1px solid #44444455; }

.outline-tree { padding: 4px 14px; }
.outline-item {
  font-size: 0.78rem; color: var(--text-dim);
  padding: 3px 4px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.outline-item:hover { background: var(--bg3); color: var(--cyan); }

/* ─── Editor Column ─── */
.editor-column {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--active-tab);
}

/* ─── Tab Bar ─── */
.tab-bar {
  height: var(--tab-h);
  background: var(--tab-bg);
  border-bottom: 1px solid var(--border2);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
}
.tab-bar::-webkit-scrollbar { height: 2px; }

.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  height: 100%;
  font-size: 0.8rem;
  color: var(--text-dim);
  background: var(--tab-bg);
  border-right: 1px solid var(--border2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  min-width: max-content;
  position: relative;
}
.tab:hover { background: var(--bg3); color: var(--text); }
.tab.active {
  background: var(--active-tab);
  color: var(--text);
  border-top: 1px solid var(--cyan);
  border-bottom: none;
}
.tab.active::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 0 6px var(--cyan);
}
.tab-icon { font-size: 0.6rem; padding: 1px 3px; border-radius: 2px; }
.tab-close {
  font-size: 0.65rem; color: var(--text-muted);
  padding: 2px; border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.tab:hover .tab-close { opacity: 0.6; }
.tab-close:hover { opacity: 1 !important; color: var(--text); }

/* ─── Breadcrumb ─── */
.breadcrumb {
  height: 26px;
  background: var(--active-tab);
  border-bottom: 1px solid var(--border2);
  display: flex; align-items: center;
  padding: 0 14px;
  font-size: 0.75rem;
  color: var(--text-dim);
  gap: 4px;
  flex-shrink: 0;
}
.bc-sep { color: var(--text-muted); }

/* ─── Editor Area ─── */
.editor-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.line-numbers {
  width: 48px;
  background: var(--active-tab);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.9;
  text-align: right;
  padding: 20px 8px 20px 0;
  user-select: none;
  overflow: hidden;
  flex-shrink: 0;
  border-right: 1px solid var(--border2);
}
.line-numbers div { padding-right: 6px; }
.line-numbers div.active-line { color: var(--text); }

.editor-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 20px 24px;
  position: relative;
  scroll-behavior: smooth;
}

/* ─── Minimap ─── */
.minimap {
  width: 70px;
  background: var(--bg2);
  border-left: 1px solid var(--border2);
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.7;
}
#minimap-canvas { width: 100%; height: 100%; }

/* ─── Terminal ─── */
.terminal-panel {
  height: var(--terminal-h);
  background: var(--bg2);
  border-top: 1px solid var(--border2);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  transition: height 0.3s ease;
}
.terminal-panel.collapsed { height: 32px; }

.terminal-tabs {
  display: flex; align-items: center;
  height: 32px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border2);
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
}
.term-tab {
  padding: 4px 12px;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.term-tab.active { color: var(--text); border-bottom: 1px solid var(--cyan); }
.term-tab:hover { color: var(--text); }
.term-panel-close {
  margin-left: auto;
  font-size: 0.75rem; color: var(--text-dim);
  cursor: pointer; padding: 4px 8px;
  border-radius: 3px; transition: all 0.15s;
}
.term-panel-close:hover { color: var(--text); background: var(--bg); }

#main-terminal {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  font-size: 0.8rem;
  color: var(--green);
  line-height: 1.8;
}
.term-prompt { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.term-path { color: var(--cyan); }
#term-cmd { color: var(--text); }

/* ─── Status Bar ─── */
.status-bar {
  height: var(--statusbar-h);
  background: #1e00b3;
  display: flex; align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
  font-size: 0.72rem;
  gap: 2px;
}
.status-item {
  padding: 0 8px; height: 100%;
  display: flex; align-items: center;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.status-item:hover { background: rgba(255,255,255,0.1); }
.status-item.git { background: rgba(255,255,255,0.08); }
.status-item.warn { color: var(--yellow); }
.status-item.live { color: #7df59a; }
.status-left { display: flex; gap: 2px; }
.status-right { margin-left: auto; display: flex; gap: 2px; }

/* ═══════════════════ TAB PANELS ═══════════════════ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ═══════════════════ CODE DECORATIONS ═══════════════════ */
.code-comment { color: #6272a4; font-style: italic; line-height: 1.9; }
.code-line     { color: var(--text); line-height: 1.9; }
.code-line.indent { padding-left: 24px; }
.kw   { color: var(--pink); }
.fn   { color: #8be9fd; }
.var  { color: var(--text); }
.prop { color: #ff79c6; }
.str  { color: var(--yellow); }
.op   { color: var(--pink); }
.brace{ color: var(--orange); }
.punct{ color: var(--text); }
.type { color: #8be9fd; }

/* ═══════════════════ HERO SECTION ═══════════════════ */
.hero-section { margin-bottom: 20px; }

.hero-card {
  display: flex; align-items: flex-start; gap: 32px;
  margin: 20px 0;
  padding: 28px;
  background: linear-gradient(135deg, rgba(0,245,255,0.04), rgba(189,147,249,0.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,245,255,0.02), transparent 60%);
  pointer-events: none;
}
.hero-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), transparent);
}

/* Avatar */
.hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.avatar-placeholder {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(189,147,249,0.1));
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.avatar-initials {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  z-index: 1;
}
.avatar-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
  z-index: 1;
  position: relative;
  filter: saturate(1.1) contrast(1.05);
}
.avatar-scan {
  position: absolute; top: -100%; left: 0; right: 0;
  height: 100%; background: linear-gradient(180deg, transparent, rgba(0,245,255,0.08), transparent);
  animation: scan 3s linear infinite;
}
@keyframes scan {
  from { top: -100%; }
  to   { top: 100%; }
}
.avatar-ring {
  position: absolute;
  width: 136px; height: 136px;
  border-radius: 50%;
  border: 1px solid rgba(0,245,255,0.25);
  animation: ring-pulse 3s ease-in-out infinite;
  top: -8px; left: -8px;
}
.ring2 {
  width: 152px; height: 152px;
  top: -16px; left: -16px;
  border-color: rgba(189,147,249,0.15);
  animation-delay: 1.5s;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
}

.hero-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--green);
  background: rgba(80,250,123,0.08);
  border: 1px solid rgba(80,250,123,0.2);
  padding: 3px 10px; border-radius: 100px;
  white-space: nowrap;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: var(--glow-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Hero Info */
.hero-info { flex: 1; }
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: 0.05em;
  text-shadow: var(--glow-cyan);
  margin-bottom: 10px;
}
.glitch-subtle { position: relative; }
.glitch-subtle:hover::before {
  content: attr(data-text);
  position: absolute; top: 0; left: 2px;
  color: var(--red);
  animation: glitch-1 0.3s steps(1) 3;
  opacity: 0.8;
}

.hero-title-line {
  font-size: 1rem; color: var(--text-dim);
  margin-bottom: 12px;
  min-height: 1.6em;
}
.typewriter { color: var(--yellow); }
.cursor-blink {
  color: var(--cyan);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.meta-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.75rem; color: var(--text-dim);
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 100px;
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; }
.badge-dot.cyan   { background: var(--cyan); box-shadow: var(--glow-cyan); }
.badge-dot.purple { background: var(--purple); box-shadow: var(--glow-purple); }
.badge-dot.green  { background: var(--green); box-shadow: var(--glow-green); }

.hero-bio {
  color: var(--text-dim); line-height: 1.7;
  margin-bottom: 20px; font-size: 0.88rem;
  max-width: 500px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(0,245,255,0.15), rgba(189,147,249,0.1));
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 22px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.3s;
  text-shadow: var(--glow-cyan);
  box-shadow: 0 0 12px rgba(0,245,255,0.1);
}
.btn-primary:hover {
  background: rgba(0,245,255,0.2);
  box-shadow: var(--glow-cyan), 0 4px 20px rgba(0,245,255,0.15);
  transform: translateY(-1px);
}
.btn-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,245,255,0.15), transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.btn-primary:hover .btn-glow { opacity: 1; }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px 22px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.85rem;
  cursor: pointer; transition: all 0.3s;
}
.btn-secondary:hover {
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: var(--glow-purple);
}

/* ═══════════════════ ABOUT CARD ═══════════════════ */
.about-card {
  margin: 16px 0;
  padding: 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
}
.section-label {
  font-family: var(--font-display);
  font-size: 0.65rem; letter-spacing: 0.15em;
  color: var(--purple); margin-bottom: 12px;
}
.about-text p { color: var(--text-dim); line-height: 1.75; margin-bottom: 12px; font-size: 0.88rem; }

.stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.stat-chip {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  min-width: 80px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}
.stat-label { font-size: 0.7rem; color: var(--text-dim); margin-top: 4px; }

/* ═══════════════════ PROJECTS ═══════════════════ */
.section { margin-bottom: 8px; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.project-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(.25,.8,.25,1);
  position: relative;
}
.project-card:hover {
  border-color: var(--cyan);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,245,255,0.1), 0 0 0 1px rgba(0,245,255,0.1);
}
.project-card::before {
  content: attr(data-index);
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-display);
  font-size: 0.65rem; color: var(--text-muted);
  letter-spacing: 0.1em; z-index: 2;
}

/* Image Slot */
.project-img-slot {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg3);
  overflow: hidden; position: relative;
}

/* Real project screenshots */
.project-screenshot {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
  border-bottom: 1px solid var(--border);
}
.project-card:hover .project-screenshot {
  transform: scale(1.04);
}

/* Overlay badge */
.project-img-overlay {
  position: absolute; bottom: 10px; left: 12px;
  z-index: 3;
}
.overlay-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 600;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  backdrop-filter: blur(6px);
  letter-spacing: 0.05em;
  box-shadow: 0 0 8px rgba(0,245,255,0.25);
}

/* Project highlights row */
.project-highlights {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
}
.highlight-item {
  font-size: 0.68rem;
  color: var(--text-dim);
  background: rgba(0,245,255,0.06);
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
}

.img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,245,255,0.03), rgba(189,147,249,0.03));
  position: relative;
  border-bottom: 1px solid var(--border);
}
.img-scan-line {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: img-scan 4s linear infinite;
  opacity: 0.5;
}
@keyframes img-scan {
  from { top: 0; }
  to   { top: 100%; }
}
.img-corner {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--cyan); border-style: solid; opacity: 0.5;
}
.img-corner.tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.img-corner.tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.img-corner.bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
.img-corner.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }
.project-card:hover .img-corner { opacity: 1; }
.img-label {
  font-family: var(--font-display);
  font-size: 0.62rem; color: var(--text-muted);
  letter-spacing: 0.12em;
}
.img-sub { font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; opacity: 0.6; }

/* Info */
.project-info { padding: 16px; }
.project-num {
  font-family: var(--font-display);
  font-size: 0.65rem; color: var(--cyan);
  letter-spacing: 0.1em; margin-bottom: 6px;
  opacity: 0.7;
}
.project-title {
  font-size: 0.95rem; font-weight: 600;
  color: var(--text); margin-bottom: 8px;
  line-height: 1.3;
}
.project-card:hover .project-title { color: var(--cyan); }
.project-desc {
  font-size: 0.8rem; color: var(--text-dim);
  line-height: 1.65; margin-bottom: 12px;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }

.tag {
  font-size: 0.67rem; padding: 2px 8px;
  border-radius: 100px; border: 1px solid;
}
.tag.react  { color: #61dafb; border-color: #61dafb44; background: #61dafb11; }
.tag.node   { color: #6cc24a; border-color: #6cc24a44; background: #6cc24a11; }
.tag.ai     { color: #ff9800; border-color: #ff980044; background: #ff980011; }
.tag.next   { color: #fff; border-color: #ffffff33; background: #ffffff09; }
.tag.mongo  { color: #4faa41; border-color: #4faa4144; background: #4faa4111; }
.tag.stripe { color: #635bff; border-color: #635bff44; background: #635bff11; }
.tag.python { color: #3572a5; border-color: #3572a544; background: #3572a511; }
.tag.aws    { color: #ff9900; border-color: #ff990044; background: #ff990011; }
.tag.socket { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(0,245,255,0.07); }
.tag.vue    { color: #42b883; border-color: #42b88344; background: #42b88311; }
.tag.go     { color: #00acd7; border-color: #00acd744; background: #00acd711; }
.tag.docker { color: #2496ed; border-color: #2496ed44; background: #2496ed11; }
.tag.k8s    { color: #326ce5; border-color: #326ce544; background: #326ce511; }
.tag.graph  { color: #e535ab; border-color: #e535ab44; background: #e535ab11; }
.tag.ts     { color: #4fa3e0; border-color: #4fa3e044; background: #4fa3e011; }

.project-links { display: flex; gap: 8px; }
.proj-btn {
  display: inline-block;
  padding: 6px 14px; border-radius: 5px;
  font-size: 0.78rem; cursor: pointer;
  transition: all 0.2s;
  background: rgba(0,245,255,0.1);
  border: 1px solid rgba(0,245,255,0.3);
  color: var(--cyan);
}
.proj-btn:hover { background: rgba(0,245,255,0.2); box-shadow: var(--glow-cyan); }
.proj-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}
.proj-btn.ghost:hover { border-color: var(--purple); color: var(--purple); box-shadow: var(--glow-purple); }

/* ═══════════════════ SKILLS ═══════════════════ */
.skills-universe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.skill-category {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}
.skill-cat-label { font-size: 0.85rem; margin-bottom: 14px; }
.css-selector { color: var(--yellow); }
.css-brace { color: var(--orange); }
.skill-bars { padding: 0 4px 10px; }

.skill-item {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; font-size: 0.78rem;
}
.skill-name { min-width: 130px; color: var(--text-dim); }
.skill-bar {
  flex: 1; height: 5px;
  background: var(--border);
  border-radius: 100px;
  overflow: visible; position: relative;
}
.skill-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 100px;
  transition: width 1.5s cubic-bezier(.25,.8,.25,1);
  position: relative;
  box-shadow: 0 0 6px rgba(0,245,255,0.4);
}
.skill-fill::after {
  content: '';
  position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.skill-pct { min-width: 32px; text-align: right; color: var(--cyan); font-size: 0.72rem; }

/* colored skill fills */
.cyan-fill   { background: linear-gradient(90deg, var(--cyan), #00b8cc); box-shadow: 0 0 6px rgba(0,245,255,0.4); }
.cyan-fill::after { background: var(--cyan); box-shadow: var(--glow-cyan); }
.purple-fill { background: linear-gradient(90deg, var(--purple), #a855f7); box-shadow: 0 0 6px rgba(189,147,249,0.5); }
.purple-fill::after { background: var(--purple); box-shadow: 0 0 8px var(--purple); }
.green-fill  { background: linear-gradient(90deg, var(--green), #22c55e); box-shadow: 0 0 6px rgba(80,250,123,0.4); }
.green-fill::after { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* skill sub-label */
.skill-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: 5px;
  font-weight: 400;
  opacity: 0.7;
}

/* skill category icon */
.skill-cat-icon {
  font-size: 1.4rem;
  margin: 2px 0 8px 2px;
  display: block;
}

.tech-icons-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.tech-badge {
  padding: 6px 12px; border-radius: 6px;
  font-size: 0.78rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: all 0.2s;
  cursor: default;
}
.tech-badge:hover {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(0,245,255,0.05);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

/* ═══════════════════ EXPERIENCE TIMELINE ═══════════════════ */
.timeline { margin: 20px 0; padding-left: 20px; }
.timeline-item {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}
.tl-dot {
  position: absolute; left: -4px; top: 18px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); border: 2px solid var(--bg2);
  box-shadow: var(--glow-cyan);
}
.edu-dot { background: var(--purple); box-shadow: var(--glow-purple); }
.tl-line {
  position: absolute; left: 0; top: 28px;
  width: 2px; height: calc(100% + 8px);
  background: linear-gradient(180deg, var(--border), transparent);
}

/* Featured current role */
.tl-card-featured {
  background: linear-gradient(135deg, rgba(0,245,255,0.05), rgba(189,147,249,0.05));
  border: 1px solid var(--cyan) !important;
  box-shadow: 0 0 24px rgba(0,245,255,0.1), inset 0 0 40px rgba(0,245,255,0.03);
}
.tl-current-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
  background: rgba(0,245,255,0.1);
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 10px;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,245,255,0.3); }
  50% { box-shadow: 0 0 0 5px rgba(0,245,255,0); }
}
.active-dot {
  background: var(--cyan) !important;
  box-shadow: 0 0 0 4px rgba(0,245,255,0.2), 0 0 12px var(--cyan) !important;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,245,255,0.2), 0 0 12px var(--cyan); }
  50% { box-shadow: 0 0 0 8px rgba(0,245,255,0.05), 0 0 20px var(--cyan); }
}
.tl-highlights {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 8px;
}
.tl-hl-item {
  font-size: 0.69rem;
  color: var(--cyan);
  background: rgba(0,245,255,0.07);
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 4px;
  padding: 3px 9px;
  font-family: var(--font-mono);
}

.tl-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.tl-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 4px 20px rgba(0,245,255,0.08);
}
.tl-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; flex-wrap: wrap; gap: 8px;
}
.tl-company { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.tl-period { font-size: 0.73rem; color: var(--text-muted); }
.tl-role { font-size: 0.78rem; color: var(--cyan); margin-bottom: 8px; }
.tl-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 10px; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* ═══════════════════ CONTACT ═══════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 20px 0;
}
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
  .hero-card { flex-direction: column; align-items: center; }
}

.contact-heading { margin-bottom: 12px; font-size: 0.85rem; }
.html-tag { color: var(--orange); }
.html-tag-close { color: var(--orange); }
.html-attr { color: #ff79c6; }
.html-eq { color: var(--text-dim); }
.html-val { color: var(--yellow); }
.contact-sub { font-size: 0.82rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; }

.contact-links { display: flex; flex-direction: column; gap: 8px; }
.contact-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  transition: all 0.2s; font-size: 0.83rem;
  color: var(--text-dim);
}
.contact-link:hover {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(0,245,255,0.05);
  box-shadow: var(--glow-cyan);
  transform: translateX(4px);
}
.contact-icon { font-size: 1.1rem; flex-shrink: 0; }
.contact-label { flex: 1; color: var(--text); font-size: 0.85rem; }
.contact-label-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.contact-hint { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono); opacity: 0.7; }
.contact-arrow { opacity: 0; transition: opacity 0.2s; color: var(--cyan); flex-shrink: 0; }
.contact-link:hover .contact-arrow { opacity: 1; }

.contact-form { display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 0.72rem; color: var(--text-muted); }
.form-input {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 12px;
  color: var(--text); font-size: 0.83rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,245,255,0.1);
}
.form-input::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 100px; }
.full-width { width: 100%; justify-content: center; }
.form-toast {
  background: rgba(80,250,123,0.1);
  border: 1px solid var(--green);
  border-radius: 6px; padding: 10px;
  font-size: 0.8rem; color: var(--green);
  text-align: center;
  animation: fadein 0.4s ease;
}
.form-note {
  font-size: 0.67rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.6;
  font-family: var(--font-mono);
  margin-top: 4px;
}
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══════════════════ PARTICLE CANVAS ═══════════════════ */
#particle-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.25;
}

/* ═══════════════════ SELECTION ═══════════════════ */
::selection { background: rgba(0,245,255,0.2); color: var(--text); }

/* ═══════════════════ MOBILE RESPONSIVE ═══════════════════ */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --activity-w: 0px;
    --terminal-h: 140px;
  }

  html { font-size: 13px; }

  /* Hide sidebar & activity bar on mobile */
  .sidebar,
  .activity-bar { display: none !important; }

  /* Hide minimap & line numbers on mobile */
  .minimap,
  .line-numbers { display: none !important; }

  /* Hide breadcrumb on mobile */
  .breadcrumb { display: none !important; }

  /* Editor takes full width */
  .editor-column { width: 100vw; }

  .editor-content {
    padding: 14px 12px;
    overflow-x: hidden;
  }

  /* Title bar */
  .title-bar { padding: 0 10px; }
  .title-bar-menu { display: none; }

  /* Tab bar — scrollable, smaller */
  .tab-bar { overflow-x: auto; }
  .tab { padding: 0 10px; font-size: 0.72rem; }
  .tab-close { display: none; }

  /* Status bar */
  .status-bar { font-size: 0.65rem; }
  .status-right .status-item:not(:last-child) { display: none; }

  /* Terminal */
  .terminal-panel { height: var(--terminal-h); }

  /* Hero section */
  .hero-card { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .hero-avatar { width: 80px; height: 80px; }
  .hero-name { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  .hero-title { font-size: 0.75rem; }
  .hero-title-line { font-size: 0.82rem; white-space: normal; word-break: break-word; }
  .hero-meta { justify-content: center; flex-wrap: wrap; gap: 6px; }
  .hero-actions { flex-direction: column; gap: 8px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; justify-content: center; }

  /* Stats */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Projects grid */
  .projects-grid { grid-template-columns: 1fr; }
  .project-card { padding: 16px; }

  /* Skills */
  .skills-grid { grid-template-columns: 1fr; }
  .skill-bar-row { font-size: 0.75rem; }

  /* Timeline */
  .timeline-item { padding-left: 20px; }
  .tl-dot { left: 0; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-form { padding: 0; }

  /* Section headings */
  .section-comment { font-size: 0.78rem; }
  .section-title { font-size: clamp(1rem, 5vw, 1.4rem); }

  /* Tags & badges — wrap properly */
  .project-tags,
  .tl-tags,
  .hero-meta { flex-wrap: wrap; }

  /* Boot screen */
  .boot-log { font-size: 0.72rem; }
}