:root {
  --dock-size: 56px;
  --dock-padding: 8px;
  --win-radius: 12px;
  --toolbar-h: 40px;
  --accent: #007AFF;
  --accent2: #5856D6;
  --green: #30D158;
  --red: #FF453A;
  --orange: #FF9F0A;
  --yellow: #FFD60A;
  --bg: #0c0c0c;
  --surface: rgba(18,18,18,0.92);
  --glass: rgba(255,255,255,0.04);
  --text: #fafafa;
  --text2: rgba(255,255,255,0.55);
  --border: rgba(255,255,255,0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Global: kill focus outlines everywhere (desktop + mobile). User explicit ask. */
*:focus, *:focus-visible, *:focus-within { outline: none !important; }
a:focus, button:focus, [role="button"]:focus, [tabindex]:focus,
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
.sb-item:focus, .sb-item:focus-visible,
.dock-item:focus, .dock-item:focus-visible,
.mob-nav-btn:focus, .mob-nav-btn:focus-visible,
.mob-gh-repo:focus, .mob-gh-repo:focus-visible,
.mob-card:focus, .mob-card:focus-visible {
  outline: none !important;
  box-shadow: none;
}
/* Keep real input focus rings intentional: just strip default outline, let explicit styles handle it */
input:focus, textarea:focus, select:focus { outline: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== WALLPAPER ===== */
#wallpaper {
  position: fixed;
  inset: 0;
  background: #0c0c0c url('../assets/wallpaper.webp') center/cover no-repeat;
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.35s ease;
}

#wallpaper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

#wallpaper::after { display: none; }

/* ===== ABOUT DIALOG ===== */
#about-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#about-dialog-overlay.show { display: flex; }
#about-dialog {
  background: rgba(36,36,36,0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 32px 40px;
  text-align: center;
  min-width: 300px;
  max-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: menuDrop 0.2s ease;
}
#about-dialog img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 16px;
}
#about-dialog h2 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}
#about-dialog .about-version {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.about-specs {
  text-align: left;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
}
.about-spec-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 11px;
}
.about-spec-label {
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  width: 75px;
}
.about-spec-value {
  color: rgba(255,255,255,0.8);
  text-align: right;
  flex: 1;
}
.about-footer-text {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  line-height: 1.7;
}
.about-author-link {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(125,211,252,0.45), 0 0 20px rgba(84,197,248,0.22);
  background: linear-gradient(90deg, transparent, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 0.2s, text-shadow 0.2s, background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-author-link:hover {
  color: #bae6fd;
  text-shadow: 0 0 14px rgba(125,211,252,0.7), 0 0 28px rgba(84,197,248,0.5);
  background: linear-gradient(90deg, rgba(125,211,252,0.9), rgba(84,197,248,0.6));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.about-copyright {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.75;
  letter-spacing: 0.2px;
}
#about-dialog .about-close {
  margin-top: 20px;
  padding: 6px 32px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
#about-dialog .about-close:hover { background: rgba(255,255,255,0.15); }

#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.floating-orb { display: none; }

/* ===== MENU BAR ===== */
#menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  contain: layout style paint;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 9999;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

#menubar .left { display: flex; align-items: stretch; gap: 0; height: 28px; }
#menubar .menu-parent {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  cursor: default;
  padding: 0 11px;
  border-radius: 4px;
  transition: background 0.1s;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}
#menubar .menu-parent:hover { background: rgba(255,255,255,0.1); }
#menubar .menu-parent.open { background: rgba(255,255,255,0.15); color: #fff; }
#menubar .menu-parent .logo {
  display: flex;
  align-items: center;
  padding: 0 2px 0 0;
}
#menubar .menu-parent .menu-item {
  font-size: 13px;
  pointer-events: none;
}
#menubar .menu-item.bold { font-weight: 600; }
#menubar .right { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 400; }

/* Menu Dropdowns */
.menu-dropdown {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  min-width: 220px;
  background: rgba(36,36,36,0.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index: 99999;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.menu-dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu-dd-item {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  margin: 1px 4px;
  min-height: 26px;
}

.menu-dd-item:hover:not(.disabled) { background: var(--accent); color: #fff; }
.menu-dd-item.bold { font-weight: 700; }
.menu-dd-item.danger { color: #ff6b6b; }
.menu-dd-item.danger:hover { background: rgba(239,68,68,0.18); color: #ff8080; }
.menu-dd-item .shortcut { font-size: 12px; color: var(--text2); margin-left: 24px; }
.menu-dd-item:hover .shortcut { color: rgba(255,255,255,0.7); }
.menu-dd-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 12px; }
.menu-dd-item.disabled { color: var(--text2); pointer-events: none; }

/* ===== DESKTOP WIDGETS ===== */
#desktop {
  position: fixed;
  inset: 25px 0 80px 0;
  z-index: 1;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  pointer-events: none;
}

@keyframes widget-slide-left {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes widget-slide-right {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.widget-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}
.widget-col .widget { opacity: 0; }
.widget-col.widgets-ready .widget {
  animation: widget-slide-left 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.widget-col.widgets-ready .widget:nth-child(1) { animation-delay: 0s; }
.widget-col.widgets-ready .widget:nth-child(2) { animation-delay: 0.06s; }
.widget-col.widgets-ready .widget:nth-child(3) { animation-delay: 0.12s; }
.widget-col.widgets-ready .widget:nth-child(4) { animation-delay: 0.18s; }
.widget-col.widgets-ready .widget:nth-child(5) { animation-delay: 0.24s; }
.widget-col:last-child.widgets-ready .widget {
  animation-name: widget-slide-right;
}

.widget {
  background: rgba(24,24,24,0.7);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  contain: layout style paint;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 16px;
  cursor: grab;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.widget::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.widget:active { cursor: grabbing; }

.widget:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.12);
}

.widget:hover::before { opacity: 1; }

.widget.dragging {
  position: fixed !important;
  z-index: 9000;
  transform: scale(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transition: box-shadow 0.2s, transform 0.1s;
  pointer-events: auto;
}

.widget-title {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.widget-value {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

.widget-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }

/* ===== WALLPAPER WIDGET ===== */
.wp-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.wp-swatch {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
}
.wp-swatch:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.5);
  z-index: 1;
}
.wp-swatch.active {
  border-color: rgba(125,211,252,0.95);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.4), 0 0 12px rgba(125,211,252,0.4);
}
.wp-swatch.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(125,211,252,0.12);
  border-radius: 5px;
}
.wp-name {
  font-size: 11px;
  color: rgba(125,211,252,0.7);
  margin-top: 8px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ===== CLOCK WIDGET ===== */
@keyframes clock-colon-blink { 0%,49%{opacity:1} 50%,100%{opacity:0.15} }
.clock-time-row { display:flex; align-items:baseline; gap:0; margin-top:4px; }
.clock-digits { font-size:44px; font-weight:700; letter-spacing:-2px; font-variant-numeric:tabular-nums; color:var(--text1); line-height:1; }
.clock-colon { font-size:40px; font-weight:300; color:rgba(125,211,252,0.7); margin:0 2px; animation:clock-colon-blink 1s step-end infinite; line-height:1; align-self:baseline; }
.clock-ampm { font-size:12px; font-weight:600; letter-spacing:1.5px; color:rgba(125,211,252,0.6); align-self:flex-start; margin-top:7px; margin-left:6px; text-transform:uppercase; }
#w-clock .widget-sub { font-size: 14px; }

#gh-graph {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 2px;
}
.gh-cell {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
}
.gh-cell[data-level="1"] { background: #0e4429; }
.gh-cell[data-level="2"] { background: #006d32; }
.gh-cell[data-level="3"] { background: #26a641; }
.gh-cell[data-level="4"] { background: #39d353; }

/* ===== MUSIC WIDGET ===== */
#w-music { min-width: 200px; }
.music-player { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.music-art { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.music-info { flex: 1; min-width: 0; }
.music-track { font-size: 12px; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-artist { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.music-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.music-btn { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 14px; padding: 2px; transition: color 0.15s; }
.music-btn:hover { color: #fff; }
.music-progress { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; }
.music-progress-fill { height: 100%; background: rgba(255,255,255,0.4); border-radius: 2px; width: 0%; transition: width 0.3s linear; }
.music-time { font-size: 9px; color: rgba(255,255,255,0.3); }
.music-vol { width: 40px; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; cursor: pointer; position: relative; }
.music-vol-fill { height: 100%; background: rgba(255,255,255,0.3); border-radius: 2px; width: 10%; }

/* ===== WEATHER WIDGET ===== */
#w-weather { min-width: 160px; }
.weather-permit { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.weather-permit-btn { padding: 6px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: rgba(255,255,255,0.7); font-size: 11px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
.weather-permit-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.weather-data { display: none; }
.weather-data.show { display: block; }
.weather-main { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.weather-icon { font-size: 28px; }
.weather-temp { font-size: 28px; font-weight: 700; color: #fff; }
.weather-unit { font-size: 14px; color: rgba(255,255,255,0.4); font-weight: 400; }
.weather-details { display: flex; gap: 12px; margin-top: 8px; font-size: 10px; color: rgba(255,255,255,0.4); }

/* ===== SNAKE GAME ===== */

/* HUD */
.snake-hud {
  display: flex; gap: 6px; width: 100%; padding: 8px 10px 4px; box-sizing: border-box;
}
.snake-hud-card {
  flex: 1; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 6px 8px 6px;
  text-align: center; transition: box-shadow 0.3s, background 0.3s, border-color 0.3s;
  border: 1px solid transparent;
}
.snake-hud-icon {
  width: 13px; height: 13px; min-width: 13px; min-height: 13px; max-width: 13px; max-height: 13px;
  color: rgba(255,255,255,0.3); display: block; margin: 0 auto 2px; flex-shrink: 0;
}
.snake-hud-score .snake-hud-icon { color: #39d353; filter: drop-shadow(0 0 3px rgba(57,211,83,0.3)); }
.snake-hud-best .snake-hud-icon { color: #FFD60A; filter: drop-shadow(0 0 3px rgba(255,214,10,0.2)); }
.snake-hud-speed .snake-hud-icon { color: #00D4FF; filter: drop-shadow(0 0 3px rgba(0,212,255,0.3)); }
.snake-hud-value {
  font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: transform 0.15s, color 0.3s, text-shadow 0.3s;
}
.snake-hud-score .snake-hud-value { color: #39d353; text-shadow: 0 0 8px rgba(57,211,83,0.3); }
.snake-hud-score.pulse {
  background: rgba(57,211,83,0.08);
  box-shadow: 0 0 20px rgba(57,211,83,0.15), inset 0 0 20px rgba(57,211,83,0.05);
}
.snake-hud-score.pulse .snake-hud-value { transform: scale(1.25); }
.snake-hud-best .snake-hud-value { color: #FFD60A; text-shadow: 0 0 8px rgba(255,214,10,0.2); }
.snake-hud-best.new-record {
  background: rgba(255,214,10,0.1);
  box-shadow: 0 0 24px rgba(255,214,10,0.2), inset 0 0 20px rgba(255,214,10,0.05);
  animation: newRecordPulse 0.6s ease infinite alternate;
  will-change: transform;
}
@keyframes newRecordPulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.03); filter: brightness(1.15); }
}
.snake-hud-speed .snake-hud-value { color: #00D4FF; font-size: 18px; transition: transform 0.15s, color 0.15s, text-shadow 0.15s; }
.snake-speed-bar {
  width: 100%; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.snake-speed-fill {
  height: 100%; width: 0%; border-radius: 2px; transition: width 0.3s, background 0.3s;
  background: #39d353;
}
/* Speed card power-up active state */
.snake-hud-speed.bonus-active {
  border-color: var(--bonus-color, #00D4FF);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 12px var(--bonus-glow, rgba(0,212,255,0.2)), inset 0 0 12px var(--bonus-glow, rgba(0,212,255,0.05));
}
.snake-hud-speed.bonus-active .snake-hud-value {
  color: var(--bonus-color, #00D4FF);
  text-shadow: 0 0 10px var(--bonus-glow, rgba(0,212,255,0.4));
  transform: scale(1.1);
}
.snake-hud-speed.bonus-active .snake-hud-icon {
  color: var(--bonus-color, #00D4FF);
  filter: drop-shadow(0 0 5px var(--bonus-glow, rgba(0,212,255,0.5)));
}
@keyframes speedUrgency {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.snake-hud-speed.bonus-urgent {
  animation: speedUrgency var(--urgency-speed, 0.8s) ease infinite;
}
.snake-hud-speed.bonus-urgent .snake-hud-value { transform: scale(1.15); }

/* Combo Bar */
.snake-combo-bar {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 12px 6px;
  box-sizing: border-box; opacity: 0; transition: opacity 0.3s; height: 22px;
}
.snake-combo-bar.active { opacity: 1; }
.snake-combo-fire { font-size: 14px; line-height: 1; }
.snake-combo-text { font-size: 11px; font-weight: 700; color: #FFD60A; white-space: nowrap; }
.snake-combo-track {
  flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
}
.snake-combo-fill {
  height: 100%; width: 0%; border-radius: 2px; transition: width 0.15s;
  background: linear-gradient(90deg, #39d353, #FFD60A);
}

/* Canvas wrap */
.snake-canvas-wrap {
  position: relative; width: 100%; flex: 1; min-height: 100px; background: #0a0a0a; overflow: hidden;
  transition: box-shadow 0.15s; display: flex; align-items: center; justify-content: center;
}
.snake-canvas-wrap canvas { width: 100%; display: block; }
#snake-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; pointer-events: none; z-index: 2;
}
.snake-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; font-size: 12px; font-style: normal;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5); box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.snake-canvas-wrap.death-flash { box-shadow: inset 0 0 60px rgba(255,69,58,0.4); }
.snake-canvas-wrap.shake { animation: snakeShake 0.4s ease; }
@keyframes snakeShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}


/* ===== MOBILE SNAKE GAME BOY ===== */
.mob-snake-body {
  display: flex; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px);
  overflow: hidden; background: #0b1120; padding: 0;
}
.mob-snake-hud {
  display: flex; justify-content: space-around; padding: 8px 12px 4px; gap: 8px;
  background: rgba(56,189,248,0.04); border-bottom: 1px solid rgba(125,211,252,0.08);
}
.mob-snake-hud-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mob-snake-hud-icon {
  width: 12px; height: 12px; min-width: 12px; min-height: 12px; max-width: 12px; max-height: 12px;
  display: block; margin: 0 auto 1px; flex-shrink: 0;
}
.mob-snake-hud-val {
  font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: transform 0.15s, color 0.15s, text-shadow 0.15s;
}
/* Mobile speed power-up */
.mob-snake-hud-item.bonus-active .mob-snake-hud-val {
  color: var(--bonus-color, #00D4FF) !important;
  text-shadow: 0 0 10px var(--bonus-glow, rgba(0,212,255,0.4));
  transform: scale(1.1);
}
.mob-snake-hud-item.bonus-active .mob-snake-hud-icon {
  color: var(--bonus-color, #00D4FF) !important;
  filter: drop-shadow(0 0 5px var(--bonus-glow, rgba(0,212,255,0.5)));
}
.mob-snake-hud-item.bonus-urgent {
  animation: speedUrgency var(--urgency-speed, 0.8s) ease infinite;
}
.mob-snake-hud-item.bonus-urgent .mob-snake-hud-val { transform: scale(1.15); }
.mob-snake-canvas-area {
  flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex;
  align-items: center; justify-content: center; touch-action: none;
  border: 1px solid rgba(125,211,252,0.08); margin: 0 4px;
  border-radius: 4px;
}
.mob-snake-canvas-area canvas { display: block; touch-action: none; }
.mob-snake-canvas-area.death-flash { box-shadow: inset 0 0 60px rgba(255,69,58,0.4); }
.mob-snake-canvas-area.shake { animation: snakeShake 0.4s ease; }
#mob-snake-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; pointer-events: none; z-index: 2;
}

/* Control Mode Selector */
.mob-control-selector {
  display: flex; gap: 4px; justify-content: center; padding: 6px 16px 2px;
  flex-shrink: 0;
}
.ctrl-mode-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 14px;
  border-radius: 20px; border: 1.5px solid rgba(125,211,252,0.1);
  background: rgba(56,189,248,0.06); color: rgba(125,211,252,0.4);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; transition: all 0.25s; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ctrl-mode-btn svg { opacity: 0.7; transition: opacity 0.25s; }
.ctrl-mode-btn.active {
  background: rgba(57,211,83,0.12); color: #39d353;
  border-color: rgba(57,211,83,0.35);
  box-shadow: 0 0 14px rgba(57,211,83,0.12), inset 0 0 10px rgba(57,211,83,0.04);
}
.ctrl-mode-btn.active svg { opacity: 1; color: #39d353; stroke: #39d353; }
.ctrl-mode-btn:active:not(.active) { background: rgba(56,189,248,0.1); }

/* D-Pad */
.mob-dpad {
  width: 130px; height: 130px; position: relative; flex-shrink: 0;
  display: grid; grid-template-columns: 40px 40px 40px; grid-template-rows: 40px 40px 40px;
  gap: 5px; place-content: center; place-items: center;
}
.dpad-btn {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1.5px solid rgba(57,211,83,0.18); background: rgba(57,211,83,0.06);
  color: rgba(57,211,83,0.45); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.1s; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dpad-btn:active, .dpad-btn.pressed {
  background: rgba(57,211,83,0.25); color: #39d353;
  border-color: rgba(57,211,83,0.55);
  box-shadow: 0 0 16px rgba(57,211,83,0.25);
  transform: scale(0.92);
}
.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-center { grid-column: 2; grid-row: 2; width: 20px; height: 20px; border-radius: 50%; background: rgba(57,211,83,0.08); border: 1px solid rgba(57,211,83,0.1); }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 3; }

/* Swipe hint */
.mob-swipe-hint {
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 130px; flex-shrink: 0;
}
.swipe-arrows {
  display: grid; grid-template-columns: 24px auto 24px; grid-template-rows: 24px auto 24px;
  align-items: center; justify-items: center; gap: 2px;
}
.swipe-arrow { color: rgba(74,222,128,0.25); transition: opacity 0.3s; }
.swipe-up { grid-column: 2; grid-row: 1; animation: swipePulse 2s ease-in-out infinite; }
.swipe-left { grid-column: 1; grid-row: 2; animation: swipePulse 2s ease-in-out 0.5s infinite; }
.swipe-right { grid-column: 3; grid-row: 2; animation: swipePulse 2s ease-in-out 1s infinite; }
.swipe-down { grid-column: 2; grid-row: 3; animation: swipePulse 2s ease-in-out 1.5s infinite; }
.swipe-label {
  grid-column: 2; grid-row: 2;
  font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: 0.5px;
  white-space: nowrap; text-align: center;
}
@keyframes swipePulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Virtual Joystick + Action Buttons */
.mob-snake-controls {
  padding: 8px 0 14px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; justify-content: space-evenly; align-items: center; flex-shrink: 0;
}
.mob-snake-action-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(125,211,252,0.15);
  background: rgba(56,189,248,0.08); color: rgba(125,211,252,0.5);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: all 0.15s;
}
.mob-snake-action-btn:active {
  background: rgba(57,211,83,0.15); border-color: rgba(57,211,83,0.3); color: #39d353;
  box-shadow: 0 0 14px rgba(57,211,83,0.2);
}
.mob-snake-action-btn.paused-active {
  color: #FEBC2E; border-color: rgba(254,188,46,0.4);
  background: rgba(254,188,46,0.12);
  box-shadow: 0 0 16px rgba(254,188,46,0.2);
  animation: pauseBtnPulse 2s ease infinite;
}
@keyframes pauseBtnPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(254,188,46,0.15); }
  50% { box-shadow: 0 0 20px rgba(254,188,46,0.35); }
}
.joystick-base {
  width: 130px; height: 130px; position: relative; border-radius: 50%;
  background: radial-gradient(circle, rgba(57,211,83,0.03) 0%, rgba(57,211,83,0.01) 60%, transparent 100%);
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.joystick-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(57,211,83,0.25);
  box-shadow: 0 0 18px rgba(57,211,83,0.12), 0 0 40px rgba(57,211,83,0.04),
              inset 0 0 18px rgba(57,211,83,0.06);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.joystick-base.active .joystick-ring {
  border-color: rgba(57,211,83,0.5);
  box-shadow: 0 0 24px rgba(57,211,83,0.25), 0 0 50px rgba(57,211,83,0.08),
              inset 0 0 24px rgba(57,211,83,0.1);
}
.joystick-arrows {
  position: absolute; inset: 0; pointer-events: none;
}
.joystick-arrow {
  position: absolute; font-size: 11px; color: rgba(255,255,255,0.12);
  transition: color 0.1s, text-shadow 0.1s;
}
.joystick-arrow.lit {
  color: rgba(57,211,83,0.6);
  text-shadow: 0 0 8px rgba(57,211,83,0.4);
}
.ja-up { top: 8px; left: 50%; transform: translateX(-50%); }
.ja-down { bottom: 8px; left: 50%; transform: translateX(-50%); }
.ja-left { left: 10px; top: 50%; transform: translateY(-50%); }
.ja-right { right: 10px; top: 50%; transform: translateY(-50%); }
.joystick-knob {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, rgba(57,211,83,0.2), rgba(57,211,83,0.06));
  border: 1.5px solid rgba(57,211,83,0.3);
  box-shadow: 0 0 14px rgba(57,211,83,0.15), inset 0 0 10px rgba(57,211,83,0.08);
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
  pointer-events: none;
}
.joystick-base.active .joystick-knob {
  background: radial-gradient(circle at 40% 35%, rgba(57,211,83,0.35), rgba(57,211,83,0.12));
  border-color: rgba(57,211,83,0.5);
  box-shadow: 0 0 20px rgba(57,211,83,0.3), inset 0 0 14px rgba(57,211,83,0.12);
}

/* ===== macOS NOTIFICATION ===== */
#macos-notif {
  position: fixed;
  top: 36px;
  right: 16px;
  width: 340px;
  background: rgba(36,36,36,0.92);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 16px;
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transform: translateX(calc(100% + 20px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  cursor: pointer;
  touch-action: pan-x;
}
#macos-notif.show { transform: translateX(0); }
.notif-close {
  position: absolute; top: 4px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  font-size: 13px; line-height: 17px; text-align: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.notif-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
#macos-notif:hover .notif-close { opacity: 1; }
#macos-notif img { width: 38px; height: 38px; border-radius: 8px; }
.notif-text { flex: 1; }
.notif-app { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
.notif-msg { font-size: 13px; color: #fff; margin-top: 2px; }
.notif-time { font-size: 10px; color: rgba(255,255,255,0.3); align-self: flex-start; }

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
  animation: pulse-dot 2s infinite;
}

@keyframes barGrow {
  from { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  to { opacity: 0.8; transform: scaleY(1); transform-origin: bottom; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(48,209,88,0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(48,209,88,0); }
}

/* ===== DOCK ===== */
@keyframes dock-slide-up {
  from { transform: translateX(-50%) translateY(100px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
#dock-container {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  opacity: 0;
}
#dock-container.dock-ready {
  animation: dock-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#dock {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(24,24,24,0.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  position: relative;
}

#dock::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 10%;
  right: 10%;
  height: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  filter: blur(8px);
  border-radius: 50%;
  pointer-events: none;
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}
.dock-item:hover {
  z-index: 20;
}

.dock-icon {
  width: var(--dock-size);
  height: var(--dock-size);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  position: relative;
  will-change: transform;
  overflow: hidden;
}
.dock-icon svg { width: 78%; height: 78%; display: block; }
.dock-icon.github svg,
.dock-icon.linkedin svg { width: 62%; height: 62%; }
.dock-icon.articles svg { width: 88%; height: 88%; }

.dock-item:hover .dock-icon {
  transform: translateY(-10px) scale(1.25);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
  transform: translateY(-8px);
}

.dock-item.active::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  position: absolute;
  bottom: -2px;
}

.dock-tooltip {
  position: absolute;
  top: -36px;
  background: rgba(36,36,36,0.9);
  backdrop-filter: blur(10px);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
  border: 1px solid var(--border);
  z-index: 10;
}

.dock-icon.about    { background: linear-gradient(135deg, #0f1419, #1c2430); box-shadow: inset 0 0 12px rgba(57,211,83,0.08), 0 4px 14px rgba(0,0,0,0.4); }
.dock-icon.flutter  { background: linear-gradient(135deg, #0553B1 0%, #54c5f8 100%); box-shadow: 0 4px 16px rgba(5,83,177,0.35); }
.dock-icon.speaking { background: linear-gradient(135deg, #FF6B35 0%, #F7C948 100%); box-shadow: 0 4px 16px rgba(255,107,53,0.35); }
.dock-icon.exp      { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.dock-icon.oss      { background: linear-gradient(135deg, #16a34a 0%, #238636 50%, #0d5025 100%); box-shadow: 0 4px 16px rgba(35,134,54,0.35); }
.dock-icon.tech     { background: linear-gradient(135deg, #334155 0%, #1e293b 100%); box-shadow: 0 4px 14px rgba(51,65,85,0.4); }
.dock-icon.articles { background: linear-gradient(135deg, #fafaf9 0%, #e7e5e4 100%); box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.5); }
.dock-icon.contact  { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%); box-shadow: 0 4px 16px rgba(99,102,241,0.4); }
.dock-icon.github   { background: linear-gradient(135deg, #1c2025 0%, #32373d 100%); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.dock-icon.linkedin { background: linear-gradient(135deg, #004182 0%, #0077B5 50%, #00a0dc 100%); box-shadow: 0 4px 16px rgba(0,119,181,0.4); }
.dock-icon.snake    { box-shadow: 0 4px 16px rgba(57,211,83,0.3), inset 0 0 18px rgba(57,211,83,0.08); }
.dock-icon.course   { box-shadow: 0 4px 18px rgba(84,197,248,0.4); }
.dock-icon.mission  { box-shadow: 0 4px 14px rgba(0,0,0,0.5); }

.dock-bounce {
  animation: dock-bounce 0.5s ease;
}

@keyframes dock-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-16px); }
  50% { transform: translateY(-4px); }
  75% { transform: translateY(-10px); }
}

/* ===== WINDOWS ===== */
.window {
  position: absolute;
  background: rgba(22,24,32,0.94);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  contain: layout style paint;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--win-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  display: none;
  z-index: 100;
  min-width: 400px;
  min-height: 300px;
  transition: box-shadow 0.3s ease;
}

.window:hover {
  box-shadow: 0 25px 70px rgba(0,0,0,0.6);
}

.window.open {
  display: block;
  animation: windowOpen 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.window.closing {
  animation: windowClose 0.25s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.window.minimizing {
  animation: windowMinimize 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.window.maximized {
  top: 32px !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 112px) !important;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-fullscreen {
  display: none;
  position: absolute;
  top: 44px;
  right: 12px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.15s;
}
.exit-fullscreen:hover { background: rgba(255,255,255,0.15); color: #fff; }
.window.maximized .exit-fullscreen,
.window[data-snapped] .exit-fullscreen { display: block; }

/* Fullscreen space (macOS style) */
.window.fullscreen-space {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0 !important;
  z-index: 999 !important;
}
.window.fullscreen-space .window-body,
.window.fullscreen-space .fc-videos-grid,
.window.fullscreen-space .tech-grid,
.window.fullscreen-space .contact-grid {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.window.fullscreen-space .exit-fullscreen { display: block; }

/* Fullscreen active: hide menubar, dock auto-hide, hide desktop + other windows */
body.has-fullscreen #menubar {
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
body.has-fullscreen #dock-container {
  animation: none !important;
  transform: translateX(-50%) translateY(calc(100% + 80px)) !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  opacity: 1 !important;
}
body.has-fullscreen #dock-container:hover,
body.has-fullscreen #dock-container.fs-dock-peek {
  transform: translateX(-50%) translateY(0) !important;
}
body.has-fullscreen #desktop { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
body.has-fullscreen .window:not(.fullscreen-space) { display: none !important; }

/* Restore transitions when exiting fullscreen */
#menubar { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
#dock-container { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
#desktop { transition: opacity 0.3s; }

@keyframes windowOpen {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Premium deeplink entrance: longer, scale-up + blur-lift + subtle drop. */
.window.open.deeplink-enter {
  animation: windowDeeplinkEnter 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, filter;
}
@keyframes windowDeeplinkEnter {
  0%   { opacity: 0; transform: scale(0.72) translateY(56px); filter: blur(14px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes windowClose {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8) translateY(20px); }
}

@keyframes windowMinimize {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4) translateY(60vh); }
}

.window-toolbar {
  height: var(--toolbar-h);
  background: rgba(42,44,56,0.82);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: grab;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  transition: background 0.25s ease, backdrop-filter 0.25s ease,
              -webkit-backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}
#win-flutter-course .window-toolbar { background: rgba(28,32,48,0.72); }
#win-linkedin .window-toolbar { background: rgba(32,36,52,0.72); }
.window.is-scrolled .window-toolbar {
  background: rgba(32,34,44,0.88);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px -6px rgba(0,0,0,0.55);
}
#win-flutter-course.is-scrolled .window-toolbar { background: rgba(20,24,36,0.88); }
#win-linkedin.is-scrolled .window-toolbar { background: rgba(22,26,40,0.88); }
.window-body {
  position: relative;
}

.window-toolbar:active { cursor: grabbing; }

.traffic-lights {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.traffic-light {
  width: 14px; height: 14px;
  border-radius: 50%;
  cursor: pointer;
  transition: filter 0.15s;
  position: relative;
  font-size: 0;
  line-height: 0;
  color: transparent;
  -webkit-font-smoothing: antialiased;
}
.traffic-light::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  transition: color 0.15s;
  pointer-events: none;
}
.tl-close::after    { content: '\2715'; font-size: 8px; }
.tl-minimize::after { content: '\2212'; font-size: 13px; margin-top: -1px; }
.tl-maximize::after { content: '\002B'; font-size: 12px; }

/* Hover ANY traffic light → reveal glyphs on ALL three */
.traffic-lights:hover .traffic-light::after,
.traffic-light:hover::after { color: rgba(0,0,0,0.82); }

.tl-close { background: #FF5F57; }
.tl-minimize { background: #FEBC2E; }
.tl-maximize { background: #28C840; }

.window-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  pointer-events: none;
}

.window-body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--toolbar-h) + 14px) 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.window-body.has-footer {
  height: calc(100% - var(--toolbar-h) - 56px);
}

.window-footer {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border);
  background: rgba(24,24,24,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.window-body::-webkit-scrollbar { width: 6px; }
.window-body::-webkit-scrollbar-track { background: transparent; }
.window-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* Window loading */
.window-loader {
  position: absolute;
  inset: var(--toolbar-h) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24,24,24,0.95);
  z-index: 5;
  transition: opacity 0.3s;
}

.window-loader.hidden { opacity: 0; pointer-events: none; }

.loader-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* iframe windows */
.window-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.window-body.iframe-body {
  padding: 0;
  height: calc(100% - var(--toolbar-h));
}

/* ===== MEDIUM WINDOW (#win-articles rebranded as Medium) ===== */
.med-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 14px; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}
.med-hero-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.med-logo-circle {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  flex-shrink: 0;
  z-index: 1;
}
.med-logo-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #22c55e, #86efac, #1a8917, #16a34a, #22c55e);
  animation: med-logo-spin 5s linear infinite;
  filter: blur(0.4px);
  z-index: -1;
}
.med-logo-circle::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.35) 0%, transparent 65%);
  filter: blur(8px);
  z-index: -2;
  animation: med-logo-pulse 3s ease-in-out infinite;
}
@keyframes med-logo-spin {
  to { transform: rotate(360deg); }
}
@keyframes med-logo-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .med-logo-circle::before,
  .med-logo-circle::after { animation: none !important; }
}
.med-hero-meta { min-width: 0; }
.med-hero-name {
  font-size: 18px; font-weight: 800; color: #f5f5f4;
  letter-spacing: -0.2px; line-height: 1.1;
}
.med-hero-handle {
  font-size: 11.5px; color: rgba(245,245,244,0.55);
  margin-top: 4px; letter-spacing: 0.2px;
}
.med-hero-follow {
  padding: 7px 18px;
  background: #1a8917;
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(26,137,23,0.8);
}
.med-hero-follow:hover {
  background: #156c12;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26,137,23,0.45);
}
.med-bio {
  font-size: 12.5px;
  color: rgba(235,235,240,0.7);
  line-height: 1.5;
  margin-bottom: 18px;
  padding: 0 2px;
}

.med-articles { display: flex; flex-direction: column; gap: 10px; }

.med-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.med-card:hover {
  background: rgba(26,137,23,0.06);
  border-color: rgba(26,137,23,0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(26,137,23,0.4);
}
/* left-border accent removed per global rule (no border-left stripes on cards) */

.med-card-featured {
  background: linear-gradient(135deg, rgba(26,137,23,0.12), rgba(13,122,13,0.06));
  border-color: rgba(26,137,23,0.25);
}
.med-card-featured .med-card-thumb {
  background: linear-gradient(135deg, #1a8917, #0d7a0d);
}

.med-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.med-card-label {
  font-size: 10px; font-weight: 700; color: #f97316;
  text-transform: uppercase; letter-spacing: 0.6px;
  display: inline-block; margin-bottom: 2px;
}
.med-card-title {
  font-size: 14px; font-weight: 700; color: #f5f5f4;
  line-height: 1.35; letter-spacing: -0.1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.med-card-excerpt {
  font-size: 11.5px; color: rgba(235,235,240,0.55);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.med-card-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}
.med-tag {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(26,137,23,0.14);
  color: #5eaa5a;
  letter-spacing: 0.2px;
}
.med-card-read {
  font-size: 10.5px; color: rgba(235,235,240,0.4);
  margin-left: auto;
}
.med-card-thumb {
  width: 76px; height: 76px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
}
.med-thumb-1 { background: linear-gradient(135deg, #6366f1, #a78bfa); }
.med-thumb-2 { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
.med-thumb-3 { background: linear-gradient(135deg, #16a34a, #22c55e); }
.med-thumb-4 { background: linear-gradient(135deg, #f97316, #fbbf24); }
.med-thumb-5 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.med-thumb-6 { background: linear-gradient(135deg, #ef4444, #f97316); }

.med-footer-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #1a8917 0%, #0d7a0d 100%);
  color: #fff;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  margin-top: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 18px -6px rgba(26,137,23,0.5);
}
.med-footer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(26,137,23,0.6);
  background: linear-gradient(135deg, #22a11e 0%, #168813 100%);
}

/* ===== FINDER SHELL (native macOS Finder style: sidebar + content) ===== */

/* Finder shell keeps the window's native frosted-glass bg; sidebar is just a darker tint overlay */
.window.has-fshell {
  --sb-w: 190px;
  --sb-tint: rgba(0, 0, 0, 0.45);
  --sb-divider: rgba(255, 255, 255, 0.035);
  --sb-label: rgba(255, 255, 255, 0.42);
  --sb-item: rgba(235, 235, 240, 0.88);
  --sb-item-hover: rgba(255, 255, 255, 0.07);
  --sb-accent: 125, 211, 252;
}

/* Per-window accent (sidebar active color) */
.window[data-accent="cyan"]   { --sb-accent: 125, 211, 252; }
.window[data-accent="amber"]  { --sb-accent: 251, 191, 36; }
.window[data-accent="green"]  { --sb-accent: 74, 222, 128; }
.window[data-accent="blue"]   { --sb-accent: 96, 165, 250; }
.window[data-accent="purple"] { --sb-accent: 167, 139, 250; }
.window[data-accent="slate"]  { --sb-accent: 148, 163, 184; }
.window[data-accent="rose"]   { --sb-accent: 251, 113, 133; }
.window[data-accent="indigo"] { --sb-accent: 129, 140, 248; }
.window[data-accent="medium"] { --sb-accent: 0, 171, 108; }
.window[data-accent="orange"] { --sb-accent: 251, 146, 60; }

/* Toolbar becomes 2-column: dark sidebar-width wt-left + lighter wt-right */
.window.has-fshell .window-toolbar {
  padding: 0;
  border-bottom: none;
}
.wt-left {
  width: var(--sb-w);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  flex-shrink: 0;
  border-right: 1px solid var(--sb-divider);
  box-sizing: border-box;
  background: var(--sb-tint);
}
.wt-right {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--sb-divider);
}
.wt-nav {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.wt-nav-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.wt-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.wt-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.wt-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  flex: 1;
  text-align: left;
  padding-left: 4px;
}
.wt-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.wt-action {
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.wt-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

/* Body becomes a flex row: sidebar + content */
.window.has-fshell .window-body {
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.fshell-sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(10px + var(--toolbar-h)) 8px 14px 8px;
  border-right: 1px solid var(--sb-divider);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
  background: var(--sb-tint);
}
.fshell-sidebar::-webkit-scrollbar { width: 5px; }
.fshell-sidebar::-webkit-scrollbar-track { background: transparent; }
.fshell-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

.fshell-content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--toolbar-h) + 20px) 22px 24px;
  min-width: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.fshell-content::-webkit-scrollbar { width: 6px; }
.fshell-content::-webkit-scrollbar-track { background: transparent; }
.fshell-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.fshell-content.fshell-flush { padding: 0; }

/* Sidebar search (macOS System Settings style) */
.sb-search-wrap {
  position: relative;
  padding: 8px 8px 4px 8px;
}
.sb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  padding: 5px 9px;
  transition: border-color 0.15s, background 0.15s;
}
.sb-search:focus-within {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--sb-accent), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--sb-accent), 0.12);
}
.sb-search-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
}
.sb-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  min-width: 0;
  padding: 1px 0;
}
.sb-search-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

/* Suggestions dropdown — floats over sidebar content */
.sb-suggest {
  position: absolute;
  top: calc(100% - 2px);
  left: 4px;
  right: 4px;
  background: rgba(20, 22, 28, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
}
.sb-suggest[hidden] { display: none; }
.sb-suggest-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  padding: 4px 8px 6px;
  user-select: none;
}
.sb-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: rgba(235, 235, 240, 0.9);
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.1s;
}
.sb-suggest-item:hover,
.sb-suggest-item.sb-suggest-active {
  background: rgba(var(--sb-accent), 0.2);
  color: rgb(var(--sb-accent));
}
.sb-suggest-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.sb-suggest-icon svg { width: 100%; height: 100%; }
.sb-suggest-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-suggest-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

/* Sidebar sections */
.sb-section {
  margin-bottom: 14px;
}
.sb-section:last-child { margin-bottom: 4px; }

.sb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sb-label);
  padding: 6px 10px 4px;
  user-select: none;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--sb-item);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
  margin-bottom: 1px;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: inherit;
}
a.sb-item { text-decoration: none; }
.sb-item:hover {
  background: var(--sb-item-hover);
  color: rgba(255, 255, 255, 0.95);
}
.sb-item.sb-active {
  background: rgba(var(--sb-accent), 0.18);
  color: rgb(var(--sb-accent));
}
.sb-item.sb-active .sb-icon {
  color: rgb(var(--sb-accent));
}
.sb-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.sb-icon svg { width: 100%; height: 100%; }
.sb-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-badge {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1px 7px;
  line-height: 1.4;
  flex-shrink: 0;
}
.sb-item.sb-active .sb-badge {
  background: rgba(var(--sb-accent), 0.22);
  color: rgb(var(--sb-accent));
}

/* Filter mode: hide non-matching cards */
.fshell-content[data-filter] [data-filter-val]:not([data-filter-val~=""]) { }
.fshell-content[data-filter="merged"]   [data-filter-val]:not([data-filter-val~="merged"])   { display: none !important; }
.fshell-content[data-filter="approved"] [data-filter-val]:not([data-filter-val~="approved"]) { display: none !important; }
.fshell-content[data-filter="open"]     [data-filter-val]:not([data-filter-val~="open"])     { display: none !important; }
.fshell-content[data-filter="gdg"]      [data-filter-val]:not([data-filter-val~="gdg"])      { display: none !important; }
.fshell-content[data-filter="university"] [data-filter-val]:not([data-filter-val~="university"]) { display: none !important; }
.fshell-content[data-filter="online"]   [data-filter-val]:not([data-filter-val~="online"])   { display: none !important; }
.fshell-content[data-filter="flutter"]  [data-filter-val]:not([data-filter-val~="flutter"])  { display: none !important; }
.fshell-content[data-filter="dart"]     [data-filter-val]:not([data-filter-val~="dart"])     { display: none !important; }
.fshell-content[data-filter="js"]       [data-filter-val]:not([data-filter-val~="js"])       { display: none !important; }
.fshell-content[data-filter="tutorial"] [data-filter-val]:not([data-filter-val~="tutorial"]) { display: none !important; }
.fshell-content[data-filter="tip"]      [data-filter-val]:not([data-filter-val~="tip"])      { display: none !important; }
.fshell-content[data-filter="architecture"] [data-filter-val]:not([data-filter-val~="architecture"]) { display: none !important; }

/* Hide section-header if it belongs to a filtered-out group */
.fshell-content[data-filter] .sb-group:not(.sb-group-match) { display: none; }

/* Fullscreen: sidebar stretches full height naturally */
.window.fullscreen-space.has-fshell .fshell-sidebar { width: var(--sb-w); }

/* Hide existing in-content tabs/search when sidebar takes over navigation */
.window.has-fshell .fshell-content .li-tabs,
.window.has-fshell .fshell-content #fc-search-bar { display: none; }

/* Responsive: collapse sidebar on narrow windows */
@media (max-width: 520px) {
  .window.has-fshell {
    --sb-w: 0px;
  }
  .window.has-fshell .wt-left {
    width: auto;
    border-right: none;
  }
  .window.has-fshell .fshell-sidebar {
    display: none;
  }
}

/* Container query fallback for narrow resized windows */
.window.has-fshell {
  container-type: inline-size;
}
@container (max-width: 500px) {
  .fshell-sidebar { display: none; }
  .wt-left { width: auto; border-right: none; }
}

/* ===== TERMINAL WINDOW (About) ===== */
.terminal {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #c9d1d9;
}

.terminal .prompt { color: var(--green); }
.terminal .cmd { color: #79c0ff; }
.terminal .flag { color: #d2a8ff; }
.terminal .str { color: #a5d6ff; }
.terminal .comment { color: #6e7681; }
.terminal .output { color: #c9d1d9; margin-left: 0; }
.terminal .cursor {
  display: inline-block;
  width: 8px; height: 16px;
  background: var(--green);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink { 50% { opacity: 0; } }

.terminal-line {
  opacity: 0;
  animation: typeLine 0.3s forwards;
}

/* ===== CONTENT STYLES ===== */
.section-header {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #e4e4e7, #a1a1aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pr-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.pr-card:hover {
  background: rgba(255,255,255,0.07);
}

.pr-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.pr-merged { background: rgba(139,92,246,0.2); color: #a78bfa; }
.pr-approved { background: rgba(48,209,88,0.2); color: var(--green); }

.pr-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.pr-repo { font-size: 12px; color: var(--text2); }

.event-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
}

.event-row:hover { padding-left: 8px; }
.event-row:last-child { border-bottom: none; }

.event-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.event-info { flex: 1; }
.event-name { font-size: 14px; font-weight: 600; }
.event-venue { font-size: 12px; color: var(--text2); margin-top: 2px; }
.event-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  flex-shrink: 0;
}

/* LinkedIn Timeline Tree */
.li-timeline {
  position: relative;
  padding: 4px 0 4px 36px;
  margin: 0;
}
.li-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, rgba(125,211,252,0.6) 0%, rgba(125,211,252,0.3) 55%, rgba(125,211,252,0.1) 100%);
  border-radius: 2px;
}
.li-tl-item {
  position: relative;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.li-tl-item:last-child { border-bottom: none; }
.li-tl-dot {
  position: absolute;
  left: -30px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(125,211,252,0.85);
  border: 2px solid #7dd3fc;
  box-shadow: 0 0 10px rgba(125,211,252,0.35), 0 0 0 3px rgba(24,24,24,0.92);
  transition: all 0.25s ease;
  z-index: 2;
}
.li-tl-item:hover .li-tl-dot {
  background: #7dd3fc;
  box-shadow: 0 0 16px rgba(125,211,252,0.6), 0 0 0 3px rgba(24,24,24,0.92);
}
.li-tl-active .li-tl-dot {
  background: #7dd3fc;
  border-color: #7dd3fc;
  box-shadow: 0 0 20px rgba(125,211,252,0.9), 0 0 4px rgba(125,211,252,1), 0 0 0 4px rgba(24,24,24,0.92);
  width: 14px;
  height: 14px;
  left: -31px;
  top: 19px;
}
.li-tl-content { padding-left: 6px; }
.li-tl-company {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
}
a.li-tl-company:hover { color: #7dd3fc; }
.li-tl-role { font-size: 13px; color: var(--accent); margin-top: 2px; }
.li-tl-date { font-size: 11px; color: var(--text2); margin-top: 2px; }
.li-tl-desc { font-size: 12px; color: var(--text2); margin-top: 6px; line-height: 1.5; }

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.tech-item {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px 8px;
  text-align: center;
  transition: all 0.2s ease;
  cursor: default;
  position: relative;
}

.tech-item:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}

.tech-icon { font-size: 28px; margin-bottom: 6px; }
.tech-name { font-size: 11px; font-weight: 600; color: var(--text2); }

.article-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.article-card:hover {
  background: rgba(255,255,255,0.07);
}

.article-title { font-size: 14px; font-weight: 600; }
.article-meta { font-size: 12px; color: var(--text2); margin-top: 4px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--text);
}

.contact-card:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}

.contact-icon { font-size: 32px; margin-bottom: 8px; }
.contact-label { font-size: 13px; font-weight: 600; }
.contact-value { font-size: 11px; color: var(--text2); margin-top: 4px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.2s ease;
}

.stat-card:hover {
  background: rgba(255,255,255,0.07);
}

.stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.stat-label { font-size: 11px; color: var(--text2); margin-top: 4px; }

/* ===== LINKEDIN TABS ===== */
.li-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.li-tabs::-webkit-scrollbar { display: none; }

.li-tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.li-tab:hover { color: var(--text); }
.li-tab.active { color: #0077B5; border-bottom-color: #0077B5; border-bottom-width: 4px; padding-bottom: 11px; }

.li-panel {
  animation: fadeTab 0.3s ease;
}

@keyframes fadeTab {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== WINDOW RESIZE ===== */
.window-resize { display: none; }

.window-resize::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,0.15);
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

.window { transition: box-shadow 0.2s; }
.window.resizing { transition: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* ===== MENUBAR ===== */
  #menubar {
    height: 24px;
    font-size: 11px;
    padding: 0 8px;
    gap: 0;
  }
  #menubar .left {
    gap: 0;
  }
  #menubar .menu-parent {
    display: none;
  }
  #menubar .menu-parent:first-child {
    display: block;
  }
  #menubar .menu-item {
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
  }
  #menubar .logo {
    padding: 0 6px 0 2px;
    font-size: 12px;
  }
  #menubar .menu-item.hide-mobile {
    display: none;
  }
  #menubar .right {
    gap: 8px;
    font-size: 10px;
  }
  .menu-dropdown {
    display: none;
  }

  /* ===== DESKTOP WIDGETS ===== */
  .widget {
    display: none !important;
  }
  #desktop {
    display: none;
  }

  /* ===== DOCK (Bottom Tab Bar) ===== */
  #dock-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    z-index: 9998;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #dock {
    position: relative;
    border-radius: 0;
    width: 100%;
    height: 60px;
    padding: 8px 0 env(safe-area-inset-bottom, 8px) 0;
    gap: 0;
    justify-content: space-around;
    background: rgba(30,30,46,0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
  }
  .dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    flex: 1;
    height: 44px;
    position: relative;
  }
  .dock-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 8px;
    transition: background 0.2s;
  }
  .dock-item:active .dock-icon {
    background: rgba(99,102,241,0.3);
  }
  .dock-tooltip {
    display: none;
  }
  .dock-item:hover .dock-icon {
    transform: none;
  }

  /* ===== WINDOWS (Full Screen Overlay) ===== */
  .window {
    position: fixed;
    top: 24px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    width: 100vw !important;
    height: calc(100vh - 84px) !important;
    min-width: unset;
    min-height: unset;
    border-radius: 0;
    box-shadow: none;
    display: none;
  }
  .window.open {
    display: block;
    animation: mobileWindowOpen 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .window.closing {
    animation: mobileWindowClose 0.25s cubic-bezier(0.5, 0, 0.75, 0) forwards;
  }

  @keyframes mobileWindowOpen {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mobileWindowClose {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  /* ===== WINDOW TOOLBAR ===== */
  .window-toolbar {
    height: 36px;
    background: rgba(20,20,30,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    cursor: default;
  }
  .traffic-lights {
    display: flex;
    gap: 4px;
    align-items: center;
    min-width: 30px;
  }
  .traffic-light {
    display: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
  }
  .traffic-light.tl-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    cursor: pointer;
  }
  .traffic-light.tl-close:active {
    background: rgba(255,255,255,0.15);
  }
  .tl-minimize,
  .tl-maximize {
    display: none !important;
  }
  .window-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ===== WINDOW BODY ===== */
  .window-body {
    height: calc(100% - 36px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    font-size: 14px;
  }
  .window-body.has-footer {
    height: calc(100% - 36px - 56px);
  }

  /* ===== CONTENT GRIDS ===== */
  .stat-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .stat-card {
    padding: 12px 8px;
  }
  .stat-num {
    font-size: 18px;
    font-weight: 700;
  }
  .stat-label {
    font-size: 11px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-item {
    padding: 12px;
  }

  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .tech-item {
    padding: 10px 4px;
    text-align: center;
    font-size: 12px;
  }
  .tech-icon {
    font-size: 32px;
    margin-bottom: 4px;
  }

  /* ===== ARTICLES ===== */
  .article-item {
    padding: 12px;
    margin-bottom: 8px;
  }
  .article-title {
    font-size: 13px;
    font-weight: 600;
  }
  .article-meta {
    font-size: 11px;
  }

  /* ===== LINKEDIN TABS ===== */
  .linkedin-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    scroll-behavior: smooth;
  }
  .linkedin-tab {
    font-size: 12px;
    padding: 8px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .linkedin-tab.active {
    border-bottom: 2px solid rgba(99,102,241,0.8);
    color: rgba(99,102,241,0.9);
  }

  /* ===== GENERAL MOBILE ADJUSTMENTS ===== */
  .window-body p {
    font-size: 13px;
    line-height: 1.5;
  }
  .window-body h2 {
    font-size: 16px;
    margin: 12px 0 8px 0;
  }
  .window-body h3 {
    font-size: 14px;
    margin: 10px 0 6px 0;
  }

  /* Disable window resize handle on mobile */
  .window-resize {
    display: none;
  }

  /* Boot screen adjustments */
  #boot-logo img { width: 70px; height: 70px; }
  #boot-logo::before { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  #boot-logo::after { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  #boot-monogram { font-size: 14px; letter-spacing: 5px; margin-top: 24px; }
  #boot-bar-container { width: 160px; }
  #boot-cta { display: none !important; }
}

/* ===== BOOT SCREEN ===== */
#boot-screen {
  position: fixed; inset: 0; background: #0b1120;
  z-index: 99999; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease;
  overflow: hidden;
}
#boot-screen.fade-out { opacity: 0; transform: scale(1.08); filter: blur(12px); }

/* Subtle ambient orbs */
#boot-bg { position: absolute; inset: 0; pointer-events: none; }
.boot-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.boot-orb-1 {
  width: 500px; height: 500px; top: 30%; left: 50%; margin-left: -250px;
  background: radial-gradient(circle, rgba(56,189,248,0.08) 0%, transparent 70%);
  filter: blur(80px);
  animation: boot-orb-float-1 8s ease-in-out infinite alternate;
}
.boot-orb-2 {
  width: 400px; height: 400px; top: 35%; left: 40%; margin-left: -200px;
  background: radial-gradient(circle, rgba(14,165,233,0.06) 0%, transparent 70%);
  filter: blur(80px);
  animation: boot-orb-float-2 10s ease-in-out infinite alternate;
}
.boot-orb-3 {
  width: 300px; height: 300px; top: 25%; left: 60%;
  background: radial-gradient(circle, rgba(125,211,252,0.05) 0%, transparent 70%);
  filter: blur(70px);
  animation: boot-orb-float-3 12s ease-in-out infinite alternate;
}
@keyframes boot-orb-float-1 {
  0% { transform: translate(0, 0) scale(0.9); }
  100% { transform: translate(-30px, 20px) scale(1.1); }
}
@keyframes boot-orb-float-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -30px) scale(1.1); }
}
@keyframes boot-orb-float-3 {
  0% { transform: translate(0, 0) scale(0.85); opacity: 0.6; }
  100% { transform: translate(-20px, -20px) scale(1.05); opacity: 1; }
}

/* Profile photo with blue neon rings */
#boot-logo {
  position: relative; z-index: 1; margin-bottom: 0;
  opacity: 0;
  animation: boot-logo-appear 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
#boot-logo img {
  width: 90px; height: 90px; border-radius: 50%; display: block;
  border: 2px solid rgba(56,189,248,0.3);
  box-shadow: 0 0 30px rgba(56,189,248,0.25), 0 0 60px rgba(14,165,233,0.12), 0 0 100px rgba(56,189,248,0.06);
  filter: drop-shadow(0 0 15px rgba(56,189,248,0.3));
  position: relative; z-index: 2;
}
#boot-logo::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%; border: 1px solid rgba(56,189,248,0.1);
  animation: boot-ring-spin 20s linear infinite;
  background: conic-gradient(from 0deg, transparent 0%, rgba(56,189,248,0.12) 25%, transparent 50%, rgba(125,211,252,0.08) 75%, transparent 100%);
}
#boot-logo::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 148px; height: 148px;
  margin: -74px 0 0 -74px;
  border-radius: 50%;
  border: 1px dashed rgba(56,189,248,0.06);
  animation: boot-ring-spin-r 30s linear infinite;
}
@keyframes boot-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes boot-ring-spin-r { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* IH Monogram below photo */
#boot-monogram {
  position: relative; z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  font-size: 20px; font-weight: 200; letter-spacing: 10px;
  color: rgba(125,211,252,0.6);
  margin-top: 36px;
  text-shadow: 0 0 20px rgba(56,189,248,0.3);
  opacity: 0;
  animation: boot-logo-appear 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes boot-logo-appear {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Progress bar - Tailwind style blue neon glow */
#boot-bar-container {
  width: 200px; height: 1px;
  background: rgba(56,189,248,0.08);
  border-radius: 1px; overflow: visible;
  margin-top: 48px; position: relative; z-index: 1;
  transition: opacity 0.4s ease;
}
#boot-bar-container.boot-hide { opacity: 0; }
#boot-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(56,189,248,0.2), #38bdf8, #7dd3fc);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(56,189,248,0.6), 0 0 20px rgba(56,189,248,0.3), 0 0 40px rgba(14,165,233,0.15);
  position: relative;
}
#boot-bar::after {
  content: '';
  position: absolute; right: 0; top: -3px;
  width: 6px; height: 7px;
  background: #7dd3fc;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(125,211,252,0.8), 0 0 20px rgba(56,189,248,0.5), 0 0 40px rgba(14,165,233,0.3);
}

/* CTA ready state */
@keyframes boot-cta-gradient {
  0% { background-position: 0% center; }
  50% { background-position: 800% center; }
  100% { background-position: 0% center; }
}
@keyframes boot-cta-appear {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 0.5; transform: translateY(0); }
}
@keyframes boot-cta-breathe {
  0%, 100% {
    opacity: 0.25;
    text-shadow: 0 0 15px rgba(56,189,248,0.08);
  }
  50% {
    opacity: 0.85;
    text-shadow: 0 0 25px rgba(56,189,248,0.3), 0 0 50px rgba(14,165,233,0.15), 0 0 90px rgba(125,211,252,0.08);
  }
}
#boot-cta {
  position: absolute; bottom: 18%; left: 0; right: 0;
  z-index: 1; text-align: center; cursor: pointer;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  font-size: 36px; font-weight: 100; letter-spacing: 18px;
  text-transform: uppercase;
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(56,189,248,0.6), 0 0 30px rgba(56,189,248,0.3), 0 0 60px rgba(14,165,233,0.15);
  will-change: opacity;
  animation: boot-cta-appear 1.5s ease-out forwards, boot-cta-breathe 4s ease-in-out 1.5s infinite;
}

#boot-credit {
  position: absolute; left: 0; right: 0; bottom: 28px;
  z-index: 2; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(186,230,253,0.55);
  opacity: 0;
  animation: boot-credit-fade-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
  pointer-events: auto;
}
#boot-credit .boot-heart {
  display: inline-block;
  margin: 0 4px;
  font-size: 12px;
  filter: drop-shadow(0 0 6px rgba(244,114,182,0.7)) drop-shadow(0 0 12px rgba(236,72,153,0.4));
  animation: boot-heart-beat 1.4s ease-in-out infinite;
}
#boot-credit .boot-credit-link {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(125,211,252,0.55), 0 0 18px rgba(84,197,248,0.25);
  transition: color 0.2s, text-shadow 0.2s;
}
#boot-credit .boot-credit-link:hover {
  color: #bae6fd;
  text-shadow: 0 0 12px rgba(125,211,252,0.9), 0 0 24px rgba(84,197,248,0.5);
}
@keyframes boot-credit-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes boot-heart-beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.22); }
  30% { transform: scale(1); }
  45% { transform: scale(1.14); }
  60% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #boot-credit .boot-heart { animation: none; }
  #boot-credit { animation: none; opacity: 1; }
}

/* ===== MOBILE APP STYLES ===== */
@media (max-width: 768px), (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  #menubar, #desktop, #dock-container, .window, #noise-overlay { display: none !important; }
  #mobile-app { display: block !important; }
  #particle-canvas { display: none; }
  #macos-notif { width: auto; left: 8px; right: 8px; top: 8px; border-radius: 12px; }
  .mobile-expanded { z-index: 100000; }
}

#mobile-app {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0b1120;
  overflow: hidden;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* Ambient floating orbs */
.mob-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mob-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.mob-orb-1 {
  width: 400px;
  height: 400px;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(56,189,248,0.07) 0%, transparent 70%);
  animation: mobOrbFloat1 8s ease-in-out infinite alternate;
}
.mob-orb-2 {
  width: 300px;
  height: 300px;
  top: 55%;
  left: 30%;
  background: radial-gradient(circle, rgba(14,165,233,0.05) 0%, transparent 70%);
  animation: mobOrbFloat2 10s ease-in-out infinite alternate;
}
@keyframes mobOrbFloat1 {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to { transform: translateX(-50%) translateY(-20px) scale(1.05); }
}
@keyframes mobOrbFloat2 {
  from { transform: translateY(0) scale(0.95); }
  to { transform: translateY(15px) scale(1.08); }
}

#mobile-app-scroll {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
#mobile-app-scroll::after {
  content: none;
}

.mobile-status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(11,17,32,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  font-size: 12px;
  color: rgba(125,211,252,0.7);
  font-weight: 500;
  border-bottom: 1px solid rgba(125,211,252,0.08);
}

.mobile-hero {
  padding: 60px 24px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.mobile-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.mobile-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, #0b1120);
  pointer-events: none;
}

/* Profile photo neon ring */
.mob-photo-ring {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 1;
}
.mob-photo-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,0.15);
  background: conic-gradient(from 0deg, rgba(56,189,248,0.3), rgba(125,211,252,0.1), rgba(14,165,233,0.3), rgba(56,189,248,0.1), rgba(125,211,252,0.3));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: mobPhotoRing 20s linear infinite;
}
.mob-photo-ring::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(56,189,248,0.08);
  animation: mobPhotoRing 30s linear infinite reverse;
}
@keyframes mobPhotoRing {
  to { transform: rotate(360deg); }
}

.mobile-profile-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(56,189,248,0.3);
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 25px rgba(56,189,248,0.25), 0 0 50px rgba(14,165,233,0.12), 0 0 80px rgba(56,189,248,0.06);
}

.mobile-hero h1 {
  font-size: 28px;
  font-weight: 700;
  color: #fafafa;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(56,189,248,0.2);
}

.mobile-hero .subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  line-height: 1.6;
  max-width: 280px;
}

.mobile-hero .location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  color: rgba(125,211,252,0.5);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* Stats row */
.mob-stats-row {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
.mob-stat { text-align: center; }
.mob-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(56,189,248,0.3);
}
.mob-stat-label {
  display: block;
  font-size: 10px;
  color: rgba(125,211,252,0.4);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mob-stat-sep {
  width: 1px;
  background: rgba(56,189,248,0.15);
  align-self: stretch;
}

.mobile-scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  font-size: 20px;
  opacity: 0.6;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.mobile-quick-stats { display: none; }

/* Widget cards */
.mob-widgets {
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mob-widget-card {
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(125,211,252,0.12);
  border-radius: 14px;
  padding: 14px;
  box-shadow: inset 0 0 20px rgba(56,189,248,0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mob-widget-card:active {
  background: rgba(56,189,248,0.1);
  border-color: rgba(125,211,252,0.2);
}

/* Status widget */
.mob-widget-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}
.mob-widget-status .status-dot {
  box-shadow: 0 0 8px rgba(56,189,248,0.4), 0 0 16px rgba(56,189,248,0.2);
}
.mob-widget-status-text { font-size: 13px; color: #7dd3fc; text-shadow: 0 0 10px rgba(56,189,248,0.2); }
.mob-widget-status-email { font-size: 11px; color: rgba(125,211,252,0.4); margin-top: 2px; }

/* GitHub widget */
.mob-widget-github { padding: 12px; cursor: pointer; }
.mob-widget-github-header { display: flex; justify-content: space-between; align-items: center; }
.mob-widget-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: rgba(125,211,252,0.4); }
.mob-widget-github-graph { margin-top: 8px; display: flex; gap: 2px; overflow: hidden; }

/* Music widget */
.mob-widget-music { display: flex; align-items: center; gap: 14px; }
.mob-music-art {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, #0b1120, #0c2d4a, #0f3460);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border: 1px solid rgba(56,189,248,0.15);
}
.mob-music-info { flex: 1; min-width: 0; }
.mob-music-track { font-size: 13px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-music-artist { font-size: 11px; color: rgba(125,211,252,0.4); margin-top: 2px; }
.mob-music-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mob-music-btn { background: none; border: none; color: rgba(125,211,252,0.5); font-size: 16px; cursor: pointer; padding: 4px; }
.mob-music-play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(56,189,248,0.15); border: 1px solid rgba(125,211,252,0.2);
  color: #7dd3fc; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.mob-music-play-btn:active { background: rgba(56,189,248,0.25); box-shadow: 0 0 12px rgba(56,189,248,0.3); }

/* Weather widget */
.mob-widget-weather { display: flex; align-items: center; justify-content: space-between; }
.mob-weather-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mob-weather-icon-lg { font-size: 28px; }
.mob-weather-temp { font-size: 24px; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(56,189,248,0.15); }
.mob-weather-unit { font-size: 13px; color: rgba(125,211,252,0.4); }
.mob-weather-city { font-size: 11px; color: rgba(125,211,252,0.4); }
.mob-weather-details { text-align: right; font-size: 11px; color: rgba(125,211,252,0.35); }

/* Bento Grid */
.mobile-sections {
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mob-bento {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 16px 16px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(125,211,252,0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(20px);
  min-height: 110px;
}
.mob-bento.visible {
  opacity: 1;
  transform: translateY(0);
  animation: mobCardAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mobCardAppear {
  from { opacity: 0; transform: scale(0.96) translateY(12px); filter: blur(3px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Ambient glow */
.mob-card-glow {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.3s;
}
[data-accent="cyan"] .mob-card-glow { background: #38bdf8; }
[data-accent="purple"] .mob-card-glow { background: #a78bfa; }
[data-accent="amber"] .mob-card-glow { background: #fbbf24; }
[data-accent="green"] .mob-card-glow { background: #4ade80; }
[data-accent="rose"] .mob-card-glow { background: #fb7185; }
[data-accent="blue"] .mob-card-glow { background: #60a5fa; }
[data-accent="indigo"] .mob-card-glow { background: #818cf8; }

/* Accent top line */
.mob-bento::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  opacity: 0.4;
}
[data-accent="cyan"].mob-bento::before { background: linear-gradient(90deg, transparent, #38bdf8, transparent); }
[data-accent="purple"].mob-bento::before { background: linear-gradient(90deg, transparent, #a78bfa, transparent); }
[data-accent="amber"].mob-bento::before { background: linear-gradient(90deg, transparent, #fbbf24, transparent); }
[data-accent="green"].mob-bento::before { background: linear-gradient(90deg, transparent, #4ade80, transparent); }
[data-accent="rose"].mob-bento::before { background: linear-gradient(90deg, transparent, #fb7185, transparent); }
[data-accent="blue"].mob-bento::before { background: linear-gradient(90deg, transparent, #60a5fa, transparent); }
[data-accent="indigo"].mob-bento::before { background: linear-gradient(90deg, transparent, #818cf8, transparent); }

.mob-bento:active {
  transform: scale(0.97);
  background: rgba(56,189,248,0.08);
  border-color: rgba(125,211,252,0.2);
}
.mob-bento:active .mob-card-glow { opacity: 0.3; }

/* Badge (top-right count) */
.mob-bento-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
[data-accent="cyan"] .mob-bento-badge { color: #7dd3fc; background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.2); text-shadow: 0 0 8px rgba(56,189,248,0.4); }
[data-accent="purple"] .mob-bento-badge { color: #c4b5fd; background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.2); text-shadow: 0 0 8px rgba(139,92,246,0.4); }
[data-accent="amber"] .mob-bento-badge { color: #fde68a; background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.2); text-shadow: 0 0 8px rgba(251,191,36,0.4); }
[data-accent="green"] .mob-bento-badge { color: #86efac; background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.2); text-shadow: 0 0 8px rgba(74,222,128,0.4); }
[data-accent="rose"] .mob-bento-badge { color: #fda4af; background: rgba(251,113,133,0.15); border: 1px solid rgba(251,113,133,0.2); text-shadow: 0 0 8px rgba(251,113,133,0.4); }
[data-accent="blue"] .mob-bento-badge { color: #93c5fd; background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.2); text-shadow: 0 0 8px rgba(96,165,250,0.4); }
[data-accent="indigo"] .mob-bento-badge { color: #a5b4fc; background: rgba(129,140,248,0.15); border: 1px solid rgba(129,140,248,0.2); text-shadow: 0 0 8px rgba(129,140,248,0.4); }

/* Icon */
.mob-bento-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: auto;
}

/* Title */
.mob-bento-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
  margin-top: 12px;
}

/* Wide (full-width) variant */
.mob-bento-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: auto;
  padding: 12px 16px;
  background: rgba(56,189,248,0.06);
  border-color: rgba(125,211,252,0.15);
}
.mob-bento-wide .mob-card-glow { display: none; }
.mob-bento-wide .mob-bento-icon { font-size: 22px; order: 1; margin-bottom: 0; }
.mob-bento-wide .mob-bento-title { order: 2; flex: 1; margin-top: 0; }
.mob-bento-wide .mob-bento-badge {
  position: static;
  order: 3;
  flex-shrink: 0;
}
.mob-bento-wide .mob-card-arrow { order: 4; }

.mob-card-arrow {
  color: rgba(125,211,252,0.3);
  flex-shrink: 0;
  transition: all 0.2s;
}
.mob-bento-wide:active .mob-card-arrow { color: rgba(125,211,252,0.6); transform: translateX(2px); }

/* Snake game card special */
.mob-bento-game {
  background: linear-gradient(135deg, rgba(74,222,128,0.06), rgba(56,189,248,0.04));
  border-color: rgba(74,222,128,0.15);
}
.mob-bento-game .mob-bento-icon { order: 1; margin-bottom: 0; }
.mob-bento-game .mob-bento-title { order: 2; flex: 1; margin-top: 0; }
.mob-bento-play {
  order: 3;
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74,222,128,0.4);
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: 20px;
  background: rgba(74,222,128,0.08);
}

/* JS scroll reveal uses .mobile-section-card + .visible */

.mobile-section-header { display: contents; }

.mobile-expanded {
  position: fixed;
  inset: 0;
  background: #0b1120;
  z-index: 1001;
  overflow-y: auto;
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding-top: 60px;
}
#mobile-snake-expanded {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

@keyframes slideUp {
  from { transform: scale(0.92) translateY(20px); opacity: 0; border-radius: 24px; filter: blur(8px); }
  to { transform: scale(1) translateY(0); opacity: 1; border-radius: 0; filter: blur(0); }
}

.mobile-expanded.closing {
  animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDown {
  from { transform: scale(1); opacity: 1; border-radius: 0; filter: blur(0); }
  to { transform: scale(0.92) translateY(20px); opacity: 0; border-radius: 24px; filter: blur(8px); }
}

.mobile-expanded-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(11,17,32,0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 102;
  border-bottom: none;
}
/* Gradient bottom line on appbar */
.mobile-expanded-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.3) 30%, rgba(125,211,252,0.5) 50%, rgba(56,189,248,0.3) 70%, transparent);
}

.mobile-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(125,211,252,0.12);
  color: #7dd3fc;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.mobile-back-btn:active {
  background: rgba(56,189,248,0.2);
  border-color: rgba(125,211,252,0.3);
  box-shadow: 0 0 16px rgba(56,189,248,0.25);
  transform: scale(0.92);
}

.mobile-expanded-title {
  font-size: 15px;
  font-weight: 700;
  color: #fafafa;
  flex: 1;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(56,189,248,0.3), 0 0 30px rgba(56,189,248,0.1);
}

.mobile-expanded-content {
  padding: 20px 16px 40px;
}

/* Stagger animation for content items inside expanded views */
.mobile-expanded-content > * {
  animation: mobContentFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mobile-expanded-content > *:nth-child(1) { animation-delay: 0.05s; }
.mobile-expanded-content > *:nth-child(2) { animation-delay: 0.08s; }
.mobile-expanded-content > *:nth-child(3) { animation-delay: 0.11s; }
.mobile-expanded-content > *:nth-child(4) { animation-delay: 0.14s; }
.mobile-expanded-content > *:nth-child(5) { animation-delay: 0.17s; }
.mobile-expanded-content > *:nth-child(6) { animation-delay: 0.20s; }
.mobile-expanded-content > *:nth-child(7) { animation-delay: 0.23s; }
.mobile-expanded-content > *:nth-child(8) { animation-delay: 0.26s; }
.mobile-expanded-content > *:nth-child(9) { animation-delay: 0.29s; }
.mobile-expanded-content > *:nth-child(10) { animation-delay: 0.32s; }
.mobile-expanded-content > *:nth-child(n+11) { animation-delay: 0.35s; }

@keyframes mobContentFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section headings inside expanded views */
.mob-section-heading {
  font-size: 12px;
  font-weight: 700;
  margin: 20px 0 12px;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(56,189,248,0.2);
}
.mob-section-heading:first-child { margin-top: 0; }

.mob-section-sublabel {
  font-size: 12px;
  font-weight: 600;
  color: rgba(125,211,252,0.5);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}


.mobile-pr-card {
  background: rgba(56,189,248,0.04) !important;
  border: 1px solid rgba(125,211,252,0.08) !important;
    border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s ease;
  position: relative;
}

.mobile-pr-card:active {
  background: rgba(56,189,248,0.08) !important;
  transform: scale(0.98);
  box-shadow: 0 0 16px rgba(56,189,248,0.08);
}

.mobile-pr-title {
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 6px;
  font-size: 14px;
}

.mobile-pr-repo {
  font-size: 12px;
  color: rgba(125,211,252,0.4);
  line-height: 1.5;
}

.mobile-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.mobile-tech-item {
  text-align: center;
  padding: 18px 8px 14px;
  border-radius: 16px;
  background: rgba(56,189,248,0.03);
  border: 1px solid rgba(125,211,252,0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
/* Subtle colored glow behind icon */
.mobile-tech-item::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(56,189,248,0.15);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.mobile-tech-item:active {
  background: rgba(56,189,248,0.08);
  border-color: rgba(125,211,252,0.2);
  transform: scale(0.95);
}
.mobile-tech-item:active::before { opacity: 1; }

.mobile-tech-icon {
  font-size: 28px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.mobile-tech-icon img {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
  width: 36px;
  height: 36px;
}

.mobile-tech-name {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  word-break: break-word;
  font-weight: 500;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.mobile-article-card {
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(125,211,252,0.08);
    border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s ease;
}

.mobile-article-card:active {
  background: rgba(56,189,248,0.08);
  transform: scale(0.98);
  box-shadow: 0 0 16px rgba(56,189,248,0.08);
}

.mobile-article-title {
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 6px;
  font-size: 14px;
}

.mobile-article-meta {
  font-size: 12px;
  color: rgba(125,211,252,0.4);
}

.mobile-event-card {
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(125,211,252,0.08) !important;
    border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.mobile-event-card:active {
  background: rgba(56,189,248,0.08);
  transform: scale(0.98);
  box-shadow: 0 0 16px rgba(56,189,248,0.08);
}

.mobile-event-name {
  font-weight: 600;
  color: #fafafa;
  font-size: 14px;
  margin-bottom: 4px;
}

.mobile-event-venue {
  font-size: 12px;
  color: rgba(125,211,252,0.4);
  margin-bottom: 4px;
}

.mobile-event-role {
  display: inline-block;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(56,189,248,0.08);
  margin-top: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Connect cards */
.mob-connect-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px 16px 16px;
  background: rgba(56,189,248,0.03);
  border: 1px solid rgba(125,211,252,0.06);
  border-radius: 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, background 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
/* Brand-colored ambient glow (top-right) */
.mob-connect-card .mob-connect-icon + div::before { display: none; }
.mob-connect-glow {
  position: absolute;
  top: -30px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  filter: blur(35px);
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mob-connect-card::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(125,211,252,0.25);
  border-bottom: 1.5px solid rgba(125,211,252,0.25);
  transform: translateY(-50%) rotate(-45deg);
  transition: border-color 0.2s, transform 0.2s;
}
.mob-connect-card:active {
  transform: scale(0.97);
  background: rgba(56,189,248,0.06);
  border-color: rgba(125,211,252,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.mob-connect-card:active .mob-connect-glow { opacity: 0.25; }
.mob-connect-card:active::after {
  border-color: rgba(125,211,252,0.5);
  transform: translateY(-50%) rotate(-45deg) translateX(2px);
}
.mob-connect-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}
.mob-connect-name { font-weight: 700; font-size: 15px; color: #fafafa; letter-spacing: -0.2px; }
.mob-connect-handle { font-size: 12px; color: rgba(125,211,252,0.4); margin-top: 3px; letter-spacing: 0.1px; }

/* LinkedIn Profile Card */
.mob-li-profile {
  background: linear-gradient(180deg, rgba(56,189,248,0.08) 0%, rgba(56,189,248,0.02) 100%);
  border: 1px solid rgba(125,211,252,0.12);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 24px;
  position: relative;
}
.mob-li-profile::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,0.4), transparent);
}
.mob-li-banner {
  height: 110px;
  position: relative;
}
.mob-li-banner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(transparent, #0b1120);
}
.mob-li-avatar {
  display: flex;
  justify-content: center;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
.mob-li-name {
  font-size: 22px;
  font-weight: 700;
  color: #fafafa;
  margin-top: 12px;
  text-shadow: 0 0 20px rgba(56,189,248,0.25);
}
.mob-li-headline {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 8px 24px 0;
  line-height: 1.5;
}
.mob-li-location {
  font-size: 12px;
  color: rgba(125,211,252,0.45);
  margin-top: 10px;
}
.mob-li-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 20px 20px 0;
  padding: 14px 0;
  border-top: 1px solid rgba(125,211,252,0.08);
}
.mob-li-stat { text-align: center; }
.mob-li-stat-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(56,189,248,0.4);
}
.mob-li-stat-label {
  display: block;
  font-size: 9px;
  color: rgba(125,211,252,0.4);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.mob-li-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0,119,181,0.3), rgba(0,160,220,0.2));
  border: 1px solid rgba(0,119,181,0.3);
  border-radius: 14px;
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
  transition: all 0.2s;
}
.mob-li-cta:active {
  background: linear-gradient(135deg, rgba(0,119,181,0.4), rgba(0,160,220,0.3));
  box-shadow: 0 0 16px rgba(0,119,181,0.2);
  transform: scale(0.98);
}

/* GitHub Profile */
.mob-gh-profile {
  background: linear-gradient(180deg, rgba(56,189,248,0.08) 0%, rgba(56,189,248,0.02) 100%);
  border: 1px solid rgba(125,211,252,0.12);
  border-radius: 20px;
  padding: 28px 20px 24px;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.mob-gh-profile::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,0.4), transparent);
}
.mob-gh-avatar { display: flex; justify-content: center; margin-bottom: 14px; }
.mob-gh-username {
  font-size: 22px;
  font-weight: 700;
  color: #fafafa;
  text-shadow: 0 0 20px rgba(56,189,248,0.25);
}
.mob-gh-bio {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
  line-height: 1.4;
}
.mob-gh-meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(125,211,252,0.45);
  margin-top: 12px;
}
.mob-gh-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.mob-gh-badge {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid;
}

/* GitHub Stats */
.mob-gh-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.mob-gh-stat {
  text-align: center;
  padding: 14px 8px;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(125,211,252,0.08);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.mob-gh-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,0.25), transparent);
}
.mob-gh-stat-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(56,189,248,0.4);
  font-variant-numeric: tabular-nums;
}
.mob-gh-stat-label {
  display: block;
  font-size: 9px;
  color: rgba(125,211,252,0.4);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* GitHub Repo Cards */
.mob-gh-repo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(125,211,252,0.08);
  border-radius: 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.mob-gh-repo::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,0.2), transparent);
}
.mob-gh-repo:active {
  background: rgba(56,189,248,0.1);
  border-color: rgba(125,211,252,0.25);
  transform: scale(0.97);
  box-shadow: 0 0 20px rgba(56,189,248,0.1);
}
.mob-gh-repo-info { flex: 1; min-width: 0; }
.mob-gh-repo-name {
  font-size: 14px;
  font-weight: 700;
  color: #fafafa;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-gh-repo-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(125,211,252,0.45);
}
.mob-gh-lang {
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.mob-gh-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding: 8px 12px;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(125,211,252,0.1);
  border-radius: 12px;
  min-width: 48px;
}
.mob-gh-stars-num {
  font-size: 16px;
  font-weight: 800;
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(56,189,248,0.3);
  line-height: 1;
}
.mob-gh-stars-label {
  font-size: 8px;
  color: rgba(125,211,252,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* GitHub CTA */
.mob-gh-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(36,41,46,0.5), rgba(64,70,77,0.3));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
  transition: all 0.2s;
}
.mob-gh-cta:active {
  background: linear-gradient(135deg, rgba(36,41,46,0.7), rgba(64,70,77,0.5));
  box-shadow: 0 0 16px rgba(56,189,248,0.15);
  transform: scale(0.98);
}

/* Mobile LinkedIn Experience Timeline */
.mob-timeline {
  position: relative;
  padding: 4px 0 4px 32px;
  margin: 0 2px;
}
.mob-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(125,211,252,0.7) 0%, rgba(125,211,252,0.35) 50%, rgba(125,211,252,0.1) 100%);
}
.mob-tl-item {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(125,211,252,0.04), rgba(125,211,252,0.02));
  border: 1px solid rgba(125,211,252,0.1);
  border-radius: 14px;
  transition: all 0.25s ease;
}
.mob-tl-item:last-child { margin-bottom: 0; }
.mob-tl-item:active {
  transform: scale(0.985);
  background: linear-gradient(135deg, rgba(125,211,252,0.08), rgba(125,211,252,0.03));
  border-color: rgba(125,211,252,0.2);
}
.mob-tl-active {
  background: linear-gradient(135deg, rgba(125,211,252,0.1), rgba(56,189,248,0.03));
  border-color: rgba(125,211,252,0.28);
  box-shadow: 0 0 20px rgba(125,211,252,0.12), inset 0 0 20px rgba(125,211,252,0.04);
}
.mob-tl-active::after {
  content: 'NOW';
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(125,211,252,0.15);
  color: #7dd3fc;
  border: 1px solid rgba(125,211,252,0.3);
}
.mob-tl-dot {
  position: absolute;
  left: -27px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0b1120;
  border: 2px solid rgba(125,211,252,0.55);
  box-sizing: border-box;
  box-shadow: 0 0 8px rgba(125,211,252,0.2);
  z-index: 1;
}
.mob-tl-active .mob-tl-dot {
  background: #7dd3fc;
  border-color: #7dd3fc;
  width: 14px;
  height: 14px;
  left: -28px;
  top: 17px;
  box-shadow: 0 0 16px rgba(125,211,252,0.8), 0 0 28px rgba(56,189,248,0.35);
  animation: mobTlPulse 2.2s ease-in-out infinite;
}
@keyframes mobTlPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(125,211,252,0.8), 0 0 28px rgba(56,189,248,0.35); }
  50% { box-shadow: 0 0 22px rgba(125,211,252,1), 0 0 40px rgba(56,189,248,0.55); }
}
.mob-tl-content { padding: 0; }
.mob-tl-company {
  font-size: 14px;
  font-weight: 700;
  color: #fafafa;
  line-height: 1.3;
  letter-spacing: 0.1px;
}
.mob-tl-role {
  font-size: 12px;
  color: #7dd3fc;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.mob-tl-date {
  font-size: 10px;
  color: rgba(125,211,252,0.5);
  margin-top: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 500;
}

.mobile-social-bottom {
  position: fixed;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  height: 56px;
  background: rgba(56,189,248,0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(125,211,252,0.25);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35),
              inset 0 1px 8px rgba(255,255,255,0.08);
  overflow: hidden;
}
.mobile-social-bottom::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,0.03);
  border-radius: 28px;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(125,211,252,0.25),
              inset 0px -9px 0px -8px rgba(125,211,252,0.2);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) brightness(110%);
  pointer-events: none;
}

.mobile-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  background: transparent !important;
  border: none;
  position: relative;
  z-index: 1;
}

.mobile-social-icon:active {
  transform: scale(0.85);
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.95);
}

.mobile-section-header-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-left: auto;
}

/* ===== NOISE TEXTURE OVERLAY ===== */
#noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* ===== CURSOR SPOTLIGHT (Desktop) ===== */
#cursor-spotlight {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, rgba(180,74,255,0.03) 30%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
  will-change: left, top;
}

#cursor-spotlight.active { opacity: 1; }

/* ===== CARD SHINE SWEEP ===== */
.pr-card::after,
.tech-item::after,
.contact-card::after,
.article-card::after,
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 55%, transparent 60%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position 0.6s ease, opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.pr-card:hover::after,
.tech-item:hover::after,
.contact-card:hover::after,
.article-card:hover::after,
.stat-card:hover::after {
  background-position: -50% 0;
  opacity: 1;
}

/* ===== DOCK ICON COLORED GLOW ===== */
/* Dock hover shadows removed for clean look */

/* ===== MOBILE: ANIMATED GRADIENT BORDER ON SECTION CARDS ===== */
@media (max-width: 768px) {
  .mobile-section-card::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 60%);
    opacity: 0.4;
  }

  .mobile-section-card.visible::before {
    opacity: 0.5;
  }

  @property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
}

/* ===== MOBILE: HERO STAGGERED ENTRANCE ===== */
@media (max-width: 768px) {
  .mobile-hero > * {
    opacity: 0;
    transform: translateY(20px);
    animation: heroEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .mobile-hero .mobile-profile-photo { animation-delay: 0.3s; }
  .mobile-hero h1 { animation-delay: 0.5s; }
  .mobile-hero .subtitle { animation-delay: 0.7s; }
  .mobile-hero .location { animation-delay: 0.8s; }
  .mobile-hero > div:last-child { animation-delay: 0.9s; } /* stats grid */
  .mobile-hero > div:nth-last-child(2) { animation-delay: 0.85s; } /* followers text */

  @keyframes heroEntrance {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Mobile stat glow removed for clean look */

/* ===== SHIMMER TEXT ANIMATION ===== */
.section-header {
  background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 30%, #e4e4e7 60%, #a1a1aa 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 6s ease-in-out infinite;
}

@keyframes shimmerText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== WINDOW ACTIVE INDICATOR =====
   (removed background override — base .window-toolbar bg handles default, .is-scrolled handles frosted state) */


/* ===== WINDOW SNAPPING ===== */
.snap-preview {
  position: fixed;
  border: 2px solid var(--accent);
  background: rgba(0, 122, 255, 0.08);
  pointer-events: none;
  z-index: 9998;
  border-radius: var(--win-radius);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.snap-preview.active { opacity: 1; }

.snap-menu {
  position: absolute;
  top: 22px;
  left: -8px;
  background: rgba(40, 40, 44, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  width: 232px;
  display: none;
  z-index: 10001;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04) inset;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}
/* Invisible bridge so moving mouse from green button into menu doesn't break hover */
.snap-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}
/* Hover-show ONLY on the green (maximize) button; close/min buttons unaffected */
.tl-maximize:hover .snap-menu,
.snap-menu:hover { display: block; }
.tl-maximize .snap-menu.show { display: block; }
.tl-maximize { position: relative; }

.snap-menu-section-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1px;
  padding: 0 2px 6px;
  user-select: none;
}
.snap-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.snap-menu-tile {
  aspect-ratio: 1.15 / 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.snap-menu-tile:hover {
  background: rgba(10, 132, 255, 0.22);
  border-color: rgba(10, 132, 255, 0.55);
  transform: translateY(-1px);
}
.snap-menu-tile svg {
  width: 70%; height: 70%;
  color: rgba(255,255,255,0.88);
}
.snap-menu-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 2px 6px;
}
.snap-menu-fullscreen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  transition: background 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.snap-menu-fullscreen:hover { background: rgba(10, 132, 255, 0.22); }
.snap-menu-fullscreen svg { color: rgba(255,255,255,0.85); flex-shrink: 0; }
.snap-menu-fullscreen .snap-menu-chevron { margin-left: auto; opacity: 0.45; }

/* Legacy support — keep list-style items still work if injected */
.snap-menu-item {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  transition: background 0.15s;
  border-radius: 6px;
}
.snap-menu-item:hover { background: rgba(10, 132, 255, 0.22); }
.snap-menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 2px; }

/* ===== MULTIPLE DESKTOPS ===== */
#desktop-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: rgba(10, 10, 26, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s;
}
#desktop-strip.visible {
  height: 80px;
  padding: 10px 20px;
}
.desktop-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(20, 20, 30, 0.6);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.desktop-thumb:hover { border-color: rgba(255,255,255,0.2); }
.desktop-thumb.active { border-color: var(--accent); background: rgba(0, 122, 255, 0.12); }
.desktop-thumb-label {
  font-size: 10px;
  color: var(--text2);
  font-weight: 600;
}
.desktop-thumb-windows {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 4px;
}
.desktop-thumb-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
}
.desktop-thumb.active .desktop-thumb-dot { background: rgba(0,122,255,0.5); }
.desktop-thumb-close {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  color: var(--text2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.desktop-thumb:hover .desktop-thumb-close { opacity: 1; }
.add-desktop-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-desktop-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.window.hidden-desktop {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.desktop-slide-left, .desktop-slide-right { animation: desktopFade 0.4s ease; }
@keyframes desktopFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideRight {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== FLUTTER COURSE WINDOW ===== */
#fc-body { padding: 0 !important; overflow: hidden; }
.fc-grid-view { display: flex; flex-direction: column; height: 100%; }

/* Shimmer animation */
@keyframes fc-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* LinkedIn hero starts flush below toolbar (no overlap) */
.window.has-fshell .fshell-content > .li-hero {
  margin: 0 -22px 18px;
}

/* Some windows need a minimum width to render their hero/grid/timeline cleanly */
#win-linkedin { min-width: 910px; }
#win-flutter-course { min-width: 780px; }

/* LinkedIn Education cards */
.edu-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(125,211,252,0.75);
  margin: 0 0 12px;
}
.edu-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(0,119,181,0.08) 0%, rgba(24,24,46,0.6) 100%);
  border: 1px solid rgba(125,211,252,0.14);
  border-radius: 12px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
}
.edu-card:hover {
  transform: translateY(-1px);
  border-color: rgba(125,211,252,0.32);
  box-shadow: 0 8px 24px -12px rgba(0,119,181,0.5);
}
.edu-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,119,181,0.28), rgba(14,165,233,0.16));
  border: 1px solid rgba(125,211,252,0.22);
  color: #7dd3fc;
  box-shadow: 0 0 18px -6px rgba(125,211,252,0.35) inset;
}
.edu-icon svg { width: 22px; height: 22px; }
.edu-icon-accent {
  background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(6,182,212,0.18));
  border-color: rgba(167,139,250,0.3);
  color: #c4b5fd;
}
.edu-body { flex: 1; min-width: 0; }
.edu-school {
  font-size: 15px;
  font-weight: 700;
  color: #EDEDEF;
  line-height: 1.3;
  margin-bottom: 3px;
}
.edu-degree {
  font-size: 13px;
  color: #7dd3fc;
  font-weight: 500;
  margin-bottom: 3px;
}
.edu-date {
  font-size: 11px;
  color: #8A8F98;
  letter-spacing: 0.4px;
}
.edu-desc {
  font-size: 12px;
  color: #a8afbb;
  margin-top: 6px;
  line-height: 1.5;
}
.edu-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(16,185,129,0.1));
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 999px;
}

/* ====== FC HERO V2 — premium YouTube channel banner ====== */
.fc-hero-v2 {
  padding: calc(var(--toolbar-h) + 18px) 26px 18px !important;
  background:
    radial-gradient(1100px 360px at 85% -10%, rgba(5,83,177,0.42) 0%, transparent 60%),
    radial-gradient(800px 280px at 5% 120%, rgba(167,139,250,0.25) 0%, transparent 55%),
    linear-gradient(165deg, #050a18 0%, #080f22 50%, #0a0e1c 100%) !important;
  border-bottom: 1px solid rgba(84,197,248,0.18) !important;
  display: flex; flex-direction: column;
  position: relative;
}
.fc-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: fc-orb-float 14s ease-in-out infinite;
}
.fc-hero-orb-1 {
  width: 260px; height: 260px;
  top: -80px; right: -40px;
  background: radial-gradient(circle, rgba(54,197,248,0.55) 0%, transparent 70%);
}
.fc-hero-orb-2 {
  width: 220px; height: 220px;
  bottom: -100px; left: 20%;
  background: radial-gradient(circle, rgba(167,139,250,0.4) 0%, transparent 70%);
  animation-delay: -7s;
}
@keyframes fc-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12px, 10px) scale(1.08); }
}
.fc-hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(125,211,252,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  opacity: 0.5;
}

.fc-hero-top { display: none; }
.fc-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.45px; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.fc-hero-chip-free {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(16,185,129,0.1));
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.32);
}
.fc-hero-chip-verified {
  background: linear-gradient(135deg, rgba(84,197,248,0.18), rgba(5,83,177,0.12));
  color: #bae6fd;
  border: 1px solid rgba(84,197,248,0.32);
}
.fc-hero-chip-verified:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(84,197,248,0.28), rgba(5,83,177,0.18));
  box-shadow: 0 6px 14px -6px rgba(84,197,248,0.5);
}
.fc-hero-dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25), 0 0 10px rgba(34,197,94,0.9);
  animation: fc-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes fc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.25), 0 0 10px rgba(34,197,94,0.9); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0.15), 0 0 16px rgba(34,197,94,1); }
}

.fc-yt-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  background: #f1f1f1;
  color: #0f0f0f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  border-radius: 999px;
  line-height: 1;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background 0.15s ease;
  margin-left: auto;
}
.fc-yt-sub svg { display: block; color: #0f0f0f; flex-shrink: 0; }
.fc-yt-sub:hover {
  background: #d9d9d9;
  color: #0f0f0f;
}

/* Main hero row */
.fc-hero-main {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 18px;
}
.fc-hero-avatar {
  position: relative;
  width: 64px; height: 64px;
  flex: 0 0 auto;
}
.fc-hero-avatar-ring {
  position: absolute; inset: -4px;
  border-radius: 18px;
  background: conic-gradient(from 0deg, #54c5f8, #a78bfa, #0553B1, #54c5f8);
  animation: fc-ring-spin 6s linear infinite;
  filter: blur(0.5px);
  opacity: 0.9;
}
.fc-hero-avatar-inner {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #0553B1 0%, #54c5f8 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 8px 24px -6px rgba(5,83,177,0.6),
    0 0 20px rgba(54,197,248,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.fc-hero-avatar-inner img { filter: brightness(10); }
@keyframes fc-ring-spin {
  to { transform: rotate(360deg); }
}

.fc-hero-body { flex: 1; min-width: 0; }
.fc-hero-badge {
  display: inline-flex; align-items: stretch;
  margin: 0 0 12px;
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: opacity 0.15s ease;
}
.fc-hero-badge-label {
  padding: 4px 9px;
  background: #2a2f3a;
  color: #d8dbe0;
}
.fc-hero-badge-value {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: #0553B1;
  color: #fff;
}
.fc-hero-badge-value svg,
.fc-hero-badge-value img {
  display: block;
  flex-shrink: 0;
  filter: brightness(10);
}
.fc-hero-badge:hover { opacity: 0.88; }

.fc-hero-title {
  font-size: 24px; font-weight: 800; line-height: 1.15;
  margin: 0 0 10px;
  background: linear-gradient(110deg, #fff 0%, #bae6fd 25%, #54c5f8 50%, #fff 75%, #bae6fd 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fc-title-shimmer 8s linear infinite;
  letter-spacing: -0.3px;
}
@keyframes fc-title-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 240% 50%; }
}
.fc-hero-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
  color: #a8afbb;
  margin-bottom: 12px;
}
.fc-hero-author {
  display: inline-flex; align-items: center; gap: 6px;
  color: #EDEDEF; font-weight: 600;
}
.fc-hero-author img {
  border-radius: 50%;
  border: 1px solid rgba(125,211,252,0.35);
  object-fit: cover;
}
.fc-hero-sep { opacity: 0.4; }
.fc-hero-lang {
  color: #86efac;
  font-weight: 600;
}

.fc-hero-statpills {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  width: 100%;
}
.fc-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: #bae6fd;
  background: linear-gradient(135deg, rgba(84,197,248,0.12), rgba(255,255,255,0.03));
  border: 1px solid rgba(84,197,248,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s, background 0.18s, border-color 0.18s;
}
.fc-hero-pill:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(84,197,248,0.22), rgba(255,255,255,0.05));
  border-color: rgba(84,197,248,0.35);
}
.fc-hero-pill b { color: #fff; font-weight: 800; }
.fc-hero-pill svg { color: #54c5f8; }
.fc-hero-pill-hot {
  color: #fcd34d;
  background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(239,68,68,0.08));
  border-color: rgba(251,191,36,0.32);
}
.fc-hero-pill-hot svg { color: #fbbf24; }
.fc-hero-pill-hot:hover {
  background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(239,68,68,0.12));
  border-color: rgba(251,191,36,0.45);
}

@media (prefers-reduced-motion: reduce) {
  .fc-hero-orb, .fc-hero-avatar-ring, .fc-hero-title, .fc-hero-dot-live {
    animation: none !important;
  }
}

/* Hero Header — extends upward behind glass toolbar, inner content stays below via padding */
.fc-header {
  padding: calc(var(--toolbar-h) + 14px) 24px 18px; position: relative; overflow: hidden;
  margin: calc(var(--toolbar-h) * -1) -22px 0;
  background: #050508;
  border-bottom: 1px solid rgba(54,197,248,0.1);
  transition: padding 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.fc-header::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(5,83,177,0.2) 0%, rgba(54,197,248,0.06) 40%, rgba(94,106,210,0.08) 70%, rgba(5,83,177,0.15) 100%);
  pointer-events: none;
}
.fc-header::after {
  content: ''; position: absolute; top: -60%; right: -15%; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(54,197,248,0.12) 0%, transparent 65%);
  pointer-events: none;
  transform: translateY(calc(var(--fc-scroll, 0) * -18px)) scale(calc(1 - var(--fc-scroll, 0) * 0.12));
  opacity: calc(1 - var(--fc-scroll, 0) * 0.5);
  transition: opacity 0.2s linear;
}
.fc-header-content {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1; margin-bottom: 14px;
  transition: margin-bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-header-left { display: flex; align-items: center; gap: 14px; transition: gap 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.fc-course-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #0553B1, #54c5f8);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(5,83,177,0.3);
  flex-shrink: 0;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-course-icon img {
  filter: brightness(10);
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-header h2 {
  font-size: 20px; font-weight: 800; margin: 0 0 2px; line-height: 1.2;
  background: linear-gradient(135deg, #fff 30%, #54c5f8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: font-size 0.32s cubic-bezier(0.16, 1, 0.3, 1), margin 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-header-sub {
  font-size: 11px; color: #8A8F98; letter-spacing: 0.3px;
  max-height: 20px; opacity: 1;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.fc-header-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 8px 4px;
  transition: padding 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-stat { text-align: center; padding: 0 14px; transition: padding 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.fc-stat-num {
  display: block; font-size: 16px; font-weight: 800; color: #EDEDEF;
  transition: font-size 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-stat-label {
  display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; color: #8A8F98; margin-top: 1px;
  max-height: 14px; opacity: 1;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.fc-stat-divider {
  width: 1px; height: 28px; background: rgba(255,255,255,0.06);
  transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== FC Header Compact (scroll-collapsed state) ===== */
.fc-header.fc-header-compact {
  padding: 9px 18px 9px;
  border-bottom: 1px solid rgba(54,197,248,0.28);
  background: linear-gradient(180deg, rgba(5,8,16,0.82) 0%, rgba(8,12,22,0.92) 100%);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow:
    0 1px 0 rgba(54,197,248,0.12) inset,
    0 12px 28px -14px rgba(5,83,177,0.55),
    0 0 28px -8px rgba(54,197,248,0.25);
  animation: fc-hero-snap 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cyan neon underline glow when compact */
.fc-header.fc-header-compact::before {
  opacity: 0.35;
  background: linear-gradient(135deg, rgba(5,83,177,0.45) 0%, rgba(54,197,248,0.14) 40%, rgba(94,106,210,0.18) 70%, rgba(5,83,177,0.4) 100%);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll progress bar — cyan line at bottom of compact header */
.fc-header::after {
  z-index: 2;
}
.fc-header.fc-header-compact {
  position: relative;
}
.fc-header-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(54,197,248,0.9), rgba(125,211,252,1) 50%, rgba(54,197,248,0.9));
  transform-origin: left center;
  transform: scaleX(var(--fc-scroll, 0));
  box-shadow: 0 0 12px rgba(54,197,248,0.6), 0 0 4px rgba(125,211,252,0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.fc-header.fc-header-compact .fc-header-progress {
  opacity: 1;
}

.fc-header.fc-header-compact .fc-header-content { margin-bottom: 0; align-items: center; justify-content: center; gap: 18px; }
.fc-header.fc-header-compact .fc-header-left { gap: 11px; flex: 0 0 auto; }
.fc-header.fc-header-compact .fc-header-stats { flex: 0 0 auto; }
.fc-header.fc-header-compact .fc-course-icon {
  width: 30px; height: 30px; border-radius: 8px;
  box-shadow:
    0 2px 10px rgba(5,83,177,0.5),
    0 0 18px rgba(54,197,248,0.35),
    0 0 0 1px rgba(125,211,252,0.22);
  animation: fc-icon-pulse 2.8s ease-in-out infinite;
}
.fc-header.fc-header-compact .fc-course-icon img { width: 16px; height: 16px; }
.fc-header.fc-header-compact .fc-header h2,
.fc-header.fc-header-compact h2 {
  font-size: 14px; margin: 0;
  background: linear-gradient(110deg, #fff 0%, #bae6fd 30%, #54c5f8 55%, #fff 80%, #bae6fd 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fc-title-shimmer 6s linear infinite;
}
.fc-header.fc-header-compact .fc-header-sub {
  max-height: 0; opacity: 0;
}
.fc-header.fc-header-compact .fc-header-stats {
  padding: 3px 5px; border-radius: 8px;
  background: rgba(54,197,248,0.06);
  border: 1px solid rgba(54,197,248,0.18);
  box-shadow: 0 0 14px -4px rgba(54,197,248,0.22);
}
.fc-header.fc-header-compact .fc-stat { padding: 0 9px; }
.fc-header.fc-header-compact .fc-stat-num {
  font-size: 11px; font-weight: 700;
  color: #e0f2fe;
  text-shadow: 0 0 10px rgba(54,197,248,0.4);
}
.fc-header.fc-header-compact .fc-stat-label {
  max-height: 0; opacity: 0; margin-top: 0;
}
.fc-header.fc-header-compact .fc-stat-divider {
  height: 14px;
  background: rgba(54,197,248,0.22);
}
.fc-header.fc-header-compact .fc-verified-link {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
}
.fc-verified-link {
  max-height: 50px; opacity: 1;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fc-hero-snap {
  0% { transform: scale(1); }
  40% { transform: scale(0.982); }
  100% { transform: scale(1); }
}
@keyframes fc-icon-pulse {
  0%, 100% {
    box-shadow:
      0 2px 10px rgba(5,83,177,0.5),
      0 0 18px rgba(54,197,248,0.35),
      0 0 0 1px rgba(125,211,252,0.22);
  }
  50% {
    box-shadow:
      0 2px 14px rgba(5,83,177,0.65),
      0 0 26px rgba(54,197,248,0.55),
      0 0 0 1px rgba(125,211,252,0.35);
  }
}
@keyframes fc-title-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: -220% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-header,
  .fc-header-content,
  .fc-header-left,
  .fc-course-icon,
  .fc-course-icon img,
  .fc-header h2,
  .fc-header-sub,
  .fc-header-stats,
  .fc-stat,
  .fc-stat-num,
  .fc-stat-label,
  .fc-stat-divider,
  .fc-verified-link,
  .fc-header::after {
    transition-duration: 0.01ms !important;
  }
  .fc-header.fc-header-compact { animation: none; }
}

/* Verified badge with shimmer */
.fc-verified-link { text-decoration: none; display: block; position: relative; z-index: 1; }
.fc-verified {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: linear-gradient(135deg, rgba(54,197,248,0.06), rgba(5,83,177,0.06));
  border: 1px solid rgba(54,197,248,0.18); border-radius: 12px;
  color: #54c5f8; font-size: 12px; font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  position: relative; overflow: hidden;
}
.fc-verified::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(54,197,248,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: fc-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.fc-verified:hover {
  background: linear-gradient(135deg, rgba(54,197,248,0.1), rgba(5,83,177,0.1));
  border-color: rgba(54,197,248,0.35); transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(54,197,248,0.12);
}

/* FC Search Bar */
.fc-search-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 24px 0; padding: 10px 14px;
  background: rgba(54,197,248,0.04);
  border: 1px solid rgba(54,197,248,0.1);
  border-radius: 10px; transition: all 0.2s;
}
.fc-search-bar:focus-within {
  background: rgba(54,197,248,0.08);
  border-color: rgba(54,197,248,0.3);
  box-shadow: 0 0 20px rgba(54,197,248,0.06);
}
.fc-search-bar input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 13px; font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  caret-color: #54c5f8;
}
.fc-search-bar input::placeholder { color: rgba(138,143,152,0.6); }
.fc-search-kbd {
  font-size: 10px; color: rgba(84,197,248,0.4); font-weight: 500;
  background: rgba(54,197,248,0.06); padding: 2px 6px;
  border-radius: 4px; border: 1px solid rgba(54,197,248,0.1);
  font-family: -apple-system, sans-serif;
}
.fc-search-results {
  flex: 1; overflow-y: auto; padding: 8px 0;
  scrollbar-width: thin; scrollbar-color: rgba(54,197,248,0.12) transparent;
}
.fc-search-results::-webkit-scrollbar { width: 4px; }
.fc-search-results::-webkit-scrollbar-thumb { background: rgba(54,197,248,0.15); border-radius: 10px; }
.fc-search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; cursor: pointer; transition: background 0.12s;
}
.fc-search-result:hover { background: rgba(54,197,248,0.08); }
.fc-search-result-thumb {
  width: 80px; height: 45px; border-radius: 6px; overflow: hidden;
  flex-shrink: 0; position: relative;
}
.fc-search-result-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.fc-search-result-num {
  position: absolute; top: 4px; left: 4px;
  font-size: 9px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.7); padding: 1px 5px;
  border-radius: 4px;
}
.fc-search-result-info { flex: 1; min-width: 0; }
.fc-search-result-title {
  font-size: 13px; font-weight: 600; color: #EDEDEF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-search-result-title mark {
  background: transparent; color: #54c5f8; font-weight: 700;
}
.fc-search-result-meta {
  font-size: 11px; color: #8A8F98; margin-top: 2px;
}
.fc-search-empty {
  padding: 40px 24px; text-align: center;
  color: rgba(138,143,152,0.5); font-size: 13px;
}

/* Sections list */
.fc-sections {
  flex: 1; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(54,197,248,0.12) transparent;
  padding-top: 8px;
  padding-bottom: 0;
}
.fc-sections::-webkit-scrollbar { width: 4px; }
.fc-sections::-webkit-scrollbar-track { background: transparent; }
.fc-sections::-webkit-scrollbar-thumb { background: rgba(54,197,248,0.15); border-radius: 10px; }
.fc-sections::-webkit-scrollbar-thumb:hover { background: rgba(54,197,248,0.3); }
.fc-section { position: relative; }
.fc-section + .fc-section { margin-top: 4px; }
.fc-section::after {
  content: '';
  position: absolute; left: 24px; right: 24px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84,197,248,0.08) 20%, rgba(84,197,248,0.14) 50%, rgba(84,197,248,0.08) 80%, transparent);
  pointer-events: none;
}
.fc-section:last-child::after { display: none; }

.fc-section-header {
  position: relative;
  padding: 13px 22px;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  user-select: none;
  background:
    linear-gradient(90deg, rgba(5,83,177,0.18) 0%, rgba(54,197,248,0.06) 18%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-section-header:hover {
  background:
    linear-gradient(90deg, rgba(5,83,177,0.32) 0%, rgba(54,197,248,0.12) 25%, transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}

.fc-sh-left {
  display: flex; align-items: center; gap: 11px; min-width: 0;
}
.fc-sh-icon {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(84,197,248,0.22), rgba(5,83,177,0.1));
  border: 1px solid rgba(84,197,248,0.28);
  color: #7dd3fc;
  box-shadow:
    0 4px 12px -4px rgba(84,197,248,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s, border-color 0.25s;
}
.fc-sh-icon svg { width: 15px; height: 15px; }
.fc-section-header:hover .fc-sh-icon {
  transform: translateY(-1px) rotate(-3deg);
  border-color: rgba(84,197,248,0.5);
  box-shadow:
    0 6px 16px -4px rgba(84,197,248,0.6),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.fc-sh-title {
  font-size: 13px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  background: linear-gradient(110deg, #fff 0%, #bae6fd 45%, #7dd3fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fc-section-header .fc-section-right {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.fc-section-count {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.4px;
  color: #bae6fd;
  background: linear-gradient(135deg, rgba(84,197,248,0.12), rgba(255,255,255,0.02));
  border: 1px solid rgba(84,197,248,0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fc-collapse-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: rgba(125,211,252,0.7);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s, color 0.2s;
}
.fc-section-header:hover .fc-collapse-icon {
  background: rgba(84,197,248,0.08);
  color: #7dd3fc;
}
.fc-section.collapsed .fc-collapse-icon {
  transform: rotate(-90deg);
}
.fc-section-count {
  font-size: 10px; font-weight: 600; color: #8A8F98;
  background: rgba(255,255,255,0.04); padding: 2px 8px;
  border-radius: 100px; letter-spacing: 0;
  text-transform: none;
}
.fc-collapse-icon { font-size: 8px; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); color: rgba(54,197,248,0.4); }
.fc-section.collapsed .fc-collapse-icon { transform: rotate(-90deg); }
.fc-section.collapsed .fc-videos-grid { display: none; }

/* Video grid */
.fc-videos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px; padding: 12px 24px 16px;
}
.fc-video-card {
  cursor: pointer; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}
.fc-video-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  z-index: 1; pointer-events: none;
}
.fc-video-card:hover {
  border-color: rgba(54,197,248,0.2); transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(54,197,248,0.08);
}
.fc-thumb-wrap { position: relative; overflow: hidden; }
.fc-video-thumbnail {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; background: #0a0a0c;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.fc-video-card:hover .fc-video-thumbnail { transform: scale(1.08); }
.fc-vid-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}
.fc-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.65) 100%);
  opacity: 0; transition: opacity 0.3s;
}
.fc-video-card:hover .fc-play-overlay { opacity: 1; }
.fc-play-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 20px rgba(54,197,248,0.15);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.fc-video-card:hover .fc-play-icon { transform: scale(1.1); }
.fc-play-icon::after {
  content: ''; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 13px solid #050508; margin-left: 3px;
}
.fc-video-info { padding: 9px 11px 10px; }
.fc-video-num { font-size: 10px; color: rgba(54,197,248,0.5); margin-bottom: 3px; font-weight: 700; }
.fc-video-title {
  font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,0.78);
  font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== FC PLAYER WINDOW (QuickTime Style) ===== */
.fc-pw { background: #000 !important; overflow: hidden; position: relative; }
.fc-pw.open {
  box-shadow: 0 20px 80px rgba(54,197,248,0.08), 0 0 120px rgba(5,83,177,0.05), 0 25px 60px rgba(0,0,0,0.7);
}
.fc-pw .window-toolbar { border-bottom: none; }

/* Toolbar (always visible, own space) */
.fc-pw-bar {
  position: relative !important; z-index: 5;
  background: transparent !important;
  border-bottom: none;
}
.fc-pw-title {
  flex: 1; font-size: 13px; font-weight: 600; color: #EDEDEF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: 12px;
}
.fc-pw-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fc-pw-counter {
  font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 500;
}

/* No top gradient needed */
.fc-pw-top-grad { display: none; }

/* Video iframe (between toolbar and controls) */
.fc-pw-iframe {
  position: absolute; top: var(--toolbar-h); left: 0; width: 100%;
  height: calc(100% - var(--toolbar-h) - 46px);
  border: none; z-index: 1;
}

/* Bottom controls (always visible, below video) */
.fc-pw-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  height: 46px; padding: 0 16px;
  background: rgba(12,13,16,0.95); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(54,197,248,0.06);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.fc-pw-section {
  font-size: 10px; font-weight: 600; color: #54c5f8;
  background: rgba(54,197,248,0.08); border: 1px solid rgba(54,197,248,0.15);
  padding: 3px 10px; border-radius: 100px; flex-shrink: 0;
}

/* Nav buttons (shared) */
.fc-nav-btns { display: flex; gap: 8px; }
.fc-nav-btn {
  background: rgba(54,197,248,0.06); border: 1px solid rgba(54,197,248,0.12);
  color: #54c5f8; padding: 7px 18px; border-radius: 100px;
  cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit;
  transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.fc-nav-btn:hover {
  background: rgba(54,197,248,0.12); border-color: rgba(54,197,248,0.25);
  box-shadow: 0 2px 10px rgba(54,197,248,0.08);
}
.fc-nav-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

/* Nav preview tooltips (positioned via JS) */
.fc-nav-preview {
  position: fixed;
  width: 200px; padding: 8px;
  background: rgba(20,20,24,0.95); backdrop-filter: blur(10px);
  border: 1px solid rgba(54,197,248,0.15);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 20px rgba(54,197,248,0.05);
  opacity: 0; transform: translateY(-100%) scale(0.95); pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 999998;
}
.fc-nav-preview.show { opacity: 1; transform: translateY(-100%) scale(1); pointer-events: auto; }
.fc-nav-preview-thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden;
  margin-bottom: 8px; position: relative;
}
.fc-nav-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-nav-preview-badge {
  position: absolute; top: 4px; left: 4px;
  font-size: 9px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.7); padding: 1px 5px; border-radius: 4px;
}
.fc-nav-preview-title {
  font-size: 11px; font-weight: 600; color: #EDEDEF;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fc-nav-preview-meta {
  font-size: 10px; color: #8A8F98; margin-top: 3px;
}

/* ===== Mobile Flutter Course ===== */

/* Playlist hero */
#mfc-content.mobile-expanded-content { padding: 0; }
.mfc-hero {
  position: relative; overflow: hidden;
}
.mfc-hero img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.mfc-hero-gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(transparent, #0c0c0c);
}

/* Playlist info */
.mfc-playlist-info { padding: 0 12px 10px; }
.mfc-playlist-title {
  font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 10px;
}
.mfc-playlist-channel {
  display: flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 6px;
}
.mfc-playlist-channel .mfc-channel-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #0553B1, #54c5f8);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mfc-playlist-channel .mfc-channel-avatar img { filter: brightness(10); }
.mfc-playlist-channel span { font-size: 13px; color: rgba(255,255,255,0.6); }
.mfc-playlist-meta { font-size: 12px; color: #8A8F98; margin-bottom: 8px; }
.mfc-verified-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #54c5f8;
  text-decoration: none;
}
.mfc-verified-inline:active { opacity: 0.7; }

/* Actions row */
.mfc-actions-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px 12px;
}
.mfc-play-all {
  flex: 1; height: 42px; border: none; border-radius: 20px;
  background: #fff; color: #000;
  font-size: 14px; font-weight: 700; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: opacity 0.15s;
}
.mfc-play-all:active { opacity: 0.8; }
.mfc-play-all svg { fill: #000; }
.mfc-action-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.08); display: flex;
  align-items: center; justify-content: center; color: #fff;
  text-decoration: none; flex-shrink: 0;
}
.mfc-action-icon:active { background: rgba(255,255,255,0.15); }

/* Video list */
.mfc-list-divider { height: 1px; background: rgba(255,255,255,0.06); }
.mfc-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; transition: background 0.1s;
}
.mfc-list-item:active { background: rgba(255,255,255,0.04); }
.mfc-list-num {
  width: 18px; font-size: 12px; color: #8A8F98;
  text-align: center; flex-shrink: 0;
}
.mfc-list-thumb { position: relative; flex-shrink: 0; }
.mfc-list-thumb img {
  width: 120px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 8px; display: block; background: #1a1a1a;
}
.mfc-list-info { flex: 1; min-width: 0; }
.mfc-list-title {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85);
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mfc-list-meta { font-size: 11px; color: #8A8F98; margin-top: 3px; }

/* Search button */
.mfc-search-btn {
  width: 40px; height: 40px; border: none; background: none;
  color: rgba(255,255,255,0.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s;
}
.mfc-search-btn:active { background: rgba(255,255,255,0.08); }

/* Search screen */
.mfc-search-screen {
  position: fixed; inset: 0; background: #0c0c0c;
  z-index: 100001; display: flex; flex-direction: column;
}
.mfc-search-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; background: #0c0c0c; z-index: 2;
}
.mfc-search-input {
  flex: 1; height: 40px; border: none; border-radius: 20px;
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 14px; font-family: inherit; padding: 0 16px;
  outline: none;
}
.mfc-search-input::placeholder { color: rgba(255,255,255,0.3); }
.mfc-search-input:focus { background: rgba(255,255,255,0.1); }
.mfc-search-results {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.mfc-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; transition: background 0.1s;
}
.mfc-search-item:active { background: rgba(255,255,255,0.05); }
.mfc-search-item-icon {
  width: 24px; color: rgba(255,255,255,0.3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mfc-search-item-text {
  flex: 1; font-size: 14px; color: rgba(255,255,255,0.8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mfc-search-item-meta { font-size: 11px; color: rgba(255,255,255,0.3); }
.mfc-search-item-thumb {
  width: 48px; aspect-ratio: 16/9; border-radius: 6px;
  object-fit: cover; flex-shrink: 0; background: #1a1a1a;
}
.mfc-search-result-item {
  display: flex; gap: 12px; padding: 10px 16px; cursor: pointer;
  transition: background 0.1s;
}
.mfc-search-result-item:active { background: rgba(255,255,255,0.05); }
.mfc-search-result-item img {
  width: 140px; aspect-ratio: 16/9; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; background: #1a1a1a;
}
.mfc-search-result-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mfc-search-result-title {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85);
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mfc-search-result-meta { font-size: 11px; color: #8A8F98; margin-top: 4px; }

@keyframes mfcPlayerIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes mfcPlayerOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.5); opacity: 0; }
}

/* Player mobile - YouTube style */
.mfc-player {
  display: flex; flex-direction: column;
}
.mfc-player-iframe {
  width: 100%;
  aspect-ratio: 16/9; border: none; border-radius: 0; display: block;
  background: #000; -webkit-transform: translateZ(0);
  position: relative; z-index: 1;
}
.mfc-player-iframe:fullscreen, .mfc-player-iframe:-webkit-full-screen { z-index: 2147483647; }
.mfc-player-info { padding: 14px 12px 0; }
.mfc-player-title {
  padding: 0; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.35;
}
.mfc-player-meta {
  display: flex; align-items: center; gap: 6px; padding: 6px 0 0;
}
.mfc-player-counter { font-size: 12px; color: #8A8F98; font-weight: 400; }

/* Channel row */
.mfc-channel-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none; color: inherit;
}
.mfc-channel-row:active { background: rgba(255,255,255,0.04); }
.mfc-channel-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #0553B1, #54c5f8);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mfc-channel-avatar img { filter: brightness(10); }
.mfc-channel-name {
  font-size: 14px; font-weight: 500; color: #fff; flex: 1;
}
.mfc-section-pill-m {
  font-size: 11px; font-weight: 600; color: #54c5f8;
  background: rgba(54,197,248,0.08); border: 1px solid rgba(54,197,248,0.1);
  padding: 6px 14px; border-radius: 100px;
  text-decoration: none;
}
.mfc-section-pill-m:active { background: rgba(54,197,248,0.15); }

/* Action buttons row */
.mfc-player-actions {
  display: flex; gap: 8px; padding: 12px 16px;
}
.mfc-player-actions button {
  flex: 1; height: 40px; border-radius: 20px; border: none;
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mfc-player-actions button:active { background: rgba(255,255,255,0.15); transform: scale(0.96); }
.mfc-player-actions button:disabled { opacity: 0.15; cursor: default; }

/* Divider */
.mfc-player-divider {
  height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0;
}

/* Up Next section */
.mfc-upnext-header {
  font-size: 14px; font-weight: 600; color: #fff;
  padding: 14px 16px 10px;
}
.mfc-upnext-item {
  display: flex; gap: 12px; padding: 8px 16px; cursor: pointer;
  transition: background 0.15s;
}
.mfc-upnext-item:active { background: rgba(255,255,255,0.05); }
.mfc-upnext-item img {
  width: 120px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 8px; background: #0a0a0c; flex-shrink: 0;
}
.mfc-upnext-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mfc-upnext-title {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mfc-upnext-meta { font-size: 11px; color: #8A8F98; margin-top: 4px; }

/* ===== MISSION CONTROL ===== */
#mission-control {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
}
#mission-control.active {
  opacity: 1;
  pointer-events: auto;
}
#mc-desktop-strip {
  display: flex;
  gap: 16px;
  padding: 20px 20px;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  min-height: 100px;
}
.mc-thumb {
  width: 140px;
  height: 70px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(20,20,30,0.7);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.mc-thumb:hover { border-color: rgba(255,255,255,0.25); transform: scale(1.05); }
.mc-thumb.active { border-color: var(--accent); background: rgba(0,122,255,0.15); }
.mc-thumb-shimmer {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 200% 100%;
  animation: mcThumbShimmer 1.5s ease-in-out infinite;
}
@keyframes mcThumbShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.mc-thumb img { opacity: 0; transition: opacity 0.4s ease; }
.mc-thumb img.loaded { opacity: 1; }
.mc-thumb-label { font-size: 10px; color: var(--text2); font-weight: 600; }
.mc-add-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.mc-add-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

#mc-window-grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 40px 60px;
  justify-content: center;
  align-content: center;
  align-items: center;
  overflow-y: auto;
}
.mc-win-preview {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(20,20,30,0.85);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.mc-win-preview:hover {
  border-color: rgba(255,255,255,0.25);
  transform: scale(1.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.mc-win-toolbar {
  height: 24px;
  background: rgba(20,20,30,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.mc-win-dot { width: 6px; height: 6px; border-radius: 50%; }
.mc-win-dot.r { background: #FF5F57; }
.mc-win-dot.y { background: #FEBC2E; }
.mc-win-dot.g { background: #28C840; }
.mc-win-title {
  font-size: 9px;
  color: var(--text2);
  margin-left: auto;
  font-weight: 600;
}
.mc-win-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  opacity: 0.2;
}

@media (max-width: 768px) {
  #desktop-strip, #mission-control, .snap-preview, .snap-menu { display: none !important; }
}

/* ===== SPOTLIGHT SEARCH ===== */
.spotlight-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 18vh;
}
.spotlight-overlay.open { display: flex; }
.spotlight-container {
  width: 680px; max-height: 520px;
  background: rgba(30,30,30,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  contain: layout style paint;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05) inset;
  overflow: hidden; display: flex; flex-direction: column;
  animation: spotlightIn 0.15s ease-out;
}
@keyframes spotlightIn {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.spotlight-overlay.closing .spotlight-container {
  animation: spotlightOut 0.12s ease-in forwards;
}
@keyframes spotlightOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96) translateY(-8px); }
}
.spotlight-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spotlight-search-svg { flex-shrink: 0; opacity: 0.5; }
#spotlight-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 20px; font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  caret-color: var(--accent);
}
#spotlight-input::placeholder { color: rgba(255,255,255,0.25); }
.spotlight-results {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  min-height: 0; padding: 4px 0;
}
.spotlight-results::-webkit-scrollbar { width: 6px; }
.spotlight-results::-webkit-scrollbar-track { background: transparent; }
.spotlight-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.spotlight-cat {
  padding: 10px 18px 4px; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px;
}
.spotlight-item {
  padding: 8px 18px; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: background 0.08s;
}
.spotlight-item:hover, .spotlight-item.active {
  background: rgba(0,122,255,0.22);
}
.spotlight-item-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.spotlight-item-text { flex: 1; min-width: 0; }
.spotlight-item-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spotlight-item-title mark {
  background: transparent; color: var(--accent); font-weight: 600;
}
.spotlight-item-sub {
  font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spotlight-item-arrow {
  font-size: 11px; color: rgba(255,255,255,0.2); flex-shrink: 0;
}
.spotlight-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.spotlight-footer kbd {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,0.08); font-family: inherit; font-size: 10px;
}
.spotlight-empty {
  padding: 40px 18px; text-align: center;
  color: rgba(255,255,255,0.25); font-size: 14px;
}
@media (max-width: 768px) {
  .spotlight-overlay { padding-top: 60px; }
  .spotlight-container { width: calc(100% - 32px); max-height: 60vh; }
  .spotlight-item { padding: 10px 16px; min-height: 44px; }
  .spotlight-footer { display: none; }
  #spotlight-input { font-size: 17px; }
}