/* ============================================================
   CHERIN SANIH — PUBLIC SITE
   Replicates portfolio visual language: photo bg, glass UI,
   MSN-as-image, macOS-window cards.
   Full-bleed responsive — no centered max-width column.
   ============================================================ */

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

/* ── Tokens ── */
:root {
  --font-serif: 'Bodoni Moda', Georgia, serif;
  --font-mono:  'Roboto Mono', monospace;

  --accent:     #4500F5;
  --navy:       #141D53;
  --ink:        #0a0a0a;
  --paper:      #fafafa;
  --muted:      #6a6a6a;

  --glass-bg:   rgba(255, 255, 255, 0.05);
  --glass-shadow:
    0px 8px 72px -5px rgba(0,0,0,.00),
    0px 2px 30px rgba(0,0,0,.05),
    0px 2px 20px 2px rgba(53,53,53,.05) inset,
    0px 0px 5px rgba(255,255,255,.15) inset,
    -1px -1px 0px rgba(255,255,255,.40) inset,
    1px 0.5px 0px rgba(255,255,255,.60) inset;

  --card-shadow:
    0px 16px 32px rgba(0,0,0,.10),
    0px 4px 12px rgba(0,0,0,.08);
  --card-shadow-hover:
    0px 32px 40px rgba(0,0,0,.10),
    0px 0px 24px rgba(0,0,0,.10);

  --gap:    clamp(16px, 2vw, 32px);
  --pad-x:  clamp(20px, 4vw, 80px);
  --radius: 10px;
}

/* ── Base ── */
html, body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-mono);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ── Background (photo, fixed) ── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-pill {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 160px; height: 31px;
  background: var(--navy);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pill-win-icon {
  width: 16px;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.bg-pill:hover .pill-win-icon { opacity: 0.15; }
@media (max-width: 768px) {
  .bg-pill { display: none; }
}

/* ── Navbar (glass, full-bleed) ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
}
.nav-name {
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.nav-name.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-links {
  height: 47px;
  padding: 0 28px;
  gap: 28px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  border-radius: 24px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
}
.nav-links a {
  color: white;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  transition: opacity .2s;
}
.nav-links a:hover { opacity: .7; }

/* ── Page wrapper (full-bleed, sits over bg) ── */
.page {
  position: relative;
  z-index: 1;
  padding-top: 81px; /* pill bottom ≈ 51px, then 30px gap to MSN */
}

/* ── MSN side (subhead next to MSN) ── */
.msn-side {
  padding-top: clamp(12px, 1.5vw, 24px);
}
.hero-subhead,
.hero-subhead.font-serif em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
  font-weight: 600;
  margin-bottom: 26px;
  margin-left: 70px;
  text-align: left;
  text-indent: -70px;
  white-space: nowrap;
}
.cv-table.cv-table--inline {
  width: 360px;
  max-width: 100%;
  gap: 12px;
  margin-left: 30px;
  margin-top: -30px;
}
.cv-table.cv-table--under-spotify {
  position: absolute;
  top: 100%;
  right: 30px;
  width: 510px;
  max-width: calc(100% - 60px);
  margin: clamp(20px, 2vw, 32px) 0 0;
}
.cv-table.cv-table--under-spotify .cv-row {
  grid-template-columns: 110px 1fr 130px;
}
.cv-table--inline .cv-row {
  padding: 0;
  grid-template-columns: 80px 1fr 90px;
  gap: 10px;
  font-size: 13px;
  line-height: 1.2;
}

/* MSN-side stacks: subhead on top, then CV (left) + Spotify card (right) */
.msn-side {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 36px);
  padding-top: 60px;
  position: relative;
}
.msn-side-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  flex-wrap: wrap;
}
.msn-side-card {
  width: 100%;
  max-width: 510px;
  height: 550px;
  margin-right: 30px;
  margin-left: auto;
}

/* ── Lab card (JARVIS-inspired) ── */
.lab-row {
  padding: clamp(20px, 2vw, 36px) var(--pad-x) 0;
}
.lab-row-inner {
  width: 100%;
}
.lab-row-inner .project-card {
  width: 100%;
  height: 480px;
  max-width: none;
  aspect-ratio: auto;
}
.card-body.card-body--lab {
  background: #000;
  padding: 0;
  overflow: hidden;
  position: relative;
  container-type: size;
}
.project-card--lab:hover .card-body.card-body--lab {
  background: #000;
  backdrop-filter: none;
}

/* HUD corner brackets */
.hud-bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #00E5FF;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.6));
}
.hud-bracket--tl { top: 14px; left: 14px;  border-top: 2px solid; border-left: 2px solid; }
.hud-bracket--tr { top: 14px; right: 14px; border-top: 2px solid; border-right: 2px solid; }
.hud-bracket--bl { bottom: 14px; left: 14px;  border-bottom: 2px solid; border-left: 2px solid; }
.hud-bracket--br { bottom: 14px; right: 14px; border-bottom: 2px solid; border-right: 2px solid; }

/* Rotating HUD rings */
.lab-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  z-index: 1;
  pointer-events: none;
}
.lab-hud-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border-style: solid;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.25);
}
.lab-hud-ring--outer {
  border: 1px dashed rgba(0, 229, 255, 0.45);
  animation: lab-spin 28s linear infinite;
}
.lab-hud-ring--mid {
  inset: 36px;
  border: 1px solid rgba(255, 110, 255, 0.55);
  border-top-color: transparent;
  border-right-color: transparent;
  animation: lab-spin 18s linear infinite reverse;
}
.lab-hud-ring--inner {
  inset: 80px;
  border: 1px solid rgba(155, 110, 255, 0.7);
  border-bottom-color: transparent;
  animation: lab-spin 14s linear infinite;
}
/* Pause all lab animations */
.card-body--lab.is-paused *,
.card-body--lab.is-paused *::before,
.card-body--lab.is-paused *::after {
  animation-play-state: paused !important;
}

/* Background flash image */
.lab-bg-flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.lab-bg-flash.is-flashing { opacity: 0.15; }

/* CD = arc reactor */
.lab-cd {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.45)) drop-shadow(0 0 60px rgba(255, 110, 255, 0.3));
  animation: lab-spin 12s linear infinite;
}
.lab-cd-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0%, transparent 12%, rgba(255,255,255,0.08) 13%, transparent 14%,
                    transparent 24%, rgba(0,0,0,0.12) 25%, transparent 26%),
    conic-gradient(from 0deg,
      #00E5FF 0%,
      #FFB3FF 14%,
      #C9B3FF 28%,
      #6FF0FF 42%,
      #FF8AE0 56%,
      #A88AFF 70%,
      #00E5FF 84%,
      #FFD0FF 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    inset 0 0 14px rgba(255,255,255,0.18);
}
.lab-cd-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08);
}
.lab-cd-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #1a0a2e;
  font-family: 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  z-index: 1;
  /* counter-rotate the label so it stays readable while CD spins */
  animation: lab-spin 12s linear infinite reverse;
}

/* Floating holographic widgets — mini CDs and floppies */
.lab-widget {
  position: absolute;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
}
.lab-widget--cd1     { top: 12%;  left: -8%;  animation: lab-float 5s ease-in-out infinite; }
.lab-widget--cd2     { bottom: 18%; right: -10%; animation: lab-float 6s ease-in-out infinite -1.5s; }
.lab-widget--floppy1 { top: -2%;   right: 6%;  animation: lab-float 4.5s ease-in-out infinite -0.8s; }
.lab-widget--floppy2 { bottom: -4%; left: 14%; animation: lab-float 5.5s ease-in-out infinite -2s; }
.lab-widget--ipod    { top: 38%;  left: -16%;  animation: lab-float 5.2s ease-in-out infinite -1.2s; }
.lab-widget--laptop  { top: 50%;  right: -18%; animation: lab-float 6.5s ease-in-out infinite -2.5s; }
.lab-widget--crt     { top: -10%; left: 38%;   animation: lab-float 7s ease-in-out infinite -0.4s; }
.lab-widget--ipod3   { top: 8%;   right: -14%; animation: lab-float 5.8s ease-in-out infinite -0.6s; }
.lab-widget--iphone1 { bottom: 30%; left: -20%; animation: lab-float 6.2s ease-in-out infinite -1.8s; }
.lab-widget--iphone2 { top: 64%;  right: -4%;  animation: lab-float 5.4s ease-in-out infinite -2.6s; }
@keyframes lab-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(5deg); }
}

/* Mini CD */
.lab-cd-mini {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #000 0%, #000 16%, transparent 17%),
    conic-gradient(from 90deg, #00E5FF, #FFB3FF, #C9B3FF, #00E5FF);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.3),
    0 0 12px rgba(0, 229, 255, 0.5);
  animation: lab-spin 8s linear infinite;
}

/* Floppy disk */
.lab-floppy {
  position: relative;
  width: 38px;
  height: 38px;
  background: linear-gradient(180deg, #00B4D8 0%, #0086B3 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 0 10px rgba(0, 229, 255, 0.4);
}
.lab-floppy--purple {
  background: linear-gradient(180deg, #B388EB 0%, #7A52CC 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 0 10px rgba(155, 110, 255, 0.5);
}
.lab-floppy::before {
  /* metal shutter at top */
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 11px;
  background: linear-gradient(180deg, #d8d8e0 0%, #aaaab0 100%);
  border-radius: 1px;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2);
}
.lab-floppy::after {
  /* label */
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 14px;
  background: #fff;
  border-radius: 1px;
}

/* iPod nano */
.lab-ipod {
  position: relative;
  width: 24px;
  height: 56px;
  border-radius: 4px;
  background: linear-gradient(180deg, #FFB3FF 0%, #FF8AE0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 0 12px rgba(255, 110, 255, 0.55);
}
.lab-ipod::before {
  /* screen */
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 22px;
  background: linear-gradient(180deg, #142a4d 0%, #1a3a6b 100%);
  border-radius: 1px;
}
.lab-ipod::after {
  /* click wheel */
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* Laptop */
.lab-laptop {
  position: relative;
  width: 52px;
  height: 36px;
}
.lab-laptop::before {
  /* screen lid */
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: 26px;
  background: linear-gradient(180deg, #c8ccd5 0%, #8a8f99 100%);
  border-radius: 3px 3px 0 0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.15);
}
.lab-laptop::after {
  /* base / keyboard */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, #a8acb5 0%, #6e7280 100%);
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.lab-laptop {
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.5));
}

/* CRT monitor */
.lab-crt {
  position: relative;
  width: 46px;
  height: 42px;
  background: linear-gradient(180deg, #ddd4c4 0%, #b3aa9a 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.3),
    0 0 12px rgba(255, 110, 255, 0.4);
}
.lab-crt::before {
  /* screen */
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 11px;
  background: radial-gradient(ellipse at center, #2a5cab 0%, #0b1d3a 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 0 6px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(0,0,0,0.4);
}
/* iPod nano 3rd gen ("fat nano") — green */
.lab-ipod3 {
  position: relative;
  width: 38px;
  height: 44px;
  border-radius: 5px;
  background: linear-gradient(180deg, #6FE36A 0%, #3FB845 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 0 12px rgba(80, 220, 120, 0.55);
}
.lab-ipod3::before {
  /* screen — wider than tall */
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 16px;
  background: linear-gradient(180deg, #142a4d 0%, #1a3a6b 100%);
  border-radius: 1px;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4);
}
.lab-ipod3::after {
  /* click wheel */
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow:
    inset 0 0 0 5px transparent,
    inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* iPhone */
.lab-iphone {
  position: relative;
  width: 22px;
  height: 42px;
  border-radius: 4px;
  background: #1a1a1c;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 0 12px rgba(0, 229, 255, 0.45);
}
.lab-iphone--white {
  background: #f4f4f6;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 0 12px rgba(255, 110, 255, 0.45);
}
.lab-iphone::before {
  /* screen */
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 28px;
  background: linear-gradient(180deg, #0a3a6b 0%, #1f6db8 60%, #FFB3FF 100%);
  border-radius: 1px;
}
.lab-iphone::after {
  /* home button */
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.3);
}
.lab-iphone--white::after {
  background: rgba(0,0,0,0.08);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18);
}

.lab-crt::after {
  /* base stand */
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 8px;
  background: linear-gradient(180deg, #ddd4c4 0%, #9c9385 100%);
  border-radius: 1px 1px 4px 4px;
}
.lab-hud-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.3);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.6;
  animation: lab-pulse-ring 3s ease-out infinite;
}
@keyframes lab-spin {
  to { transform: rotate(360deg); }
}
@keyframes lab-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
@keyframes lab-pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* Scan line */
.lab-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.55), transparent);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  top: 0;
  z-index: 2;
  pointer-events: none;
  animation: lab-scan 6s ease-in-out infinite;
}
@keyframes lab-scan {
  0%   { top: 5%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 95%; opacity: 0; }
}

/* Status readout */
.lab-status {
  position: absolute;
  top: 50px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(0, 229, 255, 0.85);
  z-index: 4;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}
.lab-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
  animation: lab-pulse 1.6s ease-in-out infinite;
}

/* Lab emoji tag */
.lab-emoji-tag {
  position: absolute;
  top: 50px;
  right: 28px;
  font-size: 16px;
  z-index: 4;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 4px rgba(155, 110, 255, 0.6));
}

/* Title + content */
.card-body--lab .card-content {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 50px;
  z-index: 5;
  color: #fff;
}
.lab-greeting {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
  margin-bottom: 8px;
}
.card-logo-text.lab-title {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 12px rgba(0, 229, 255, 0.5),
    0 0 24px rgba(255, 110, 255, 0.35);
  margin-bottom: 10px;
}
.lab-cursor {
  display: inline-block;
  color: #FFB3FF;
  animation: lab-blink 1.1s step-end infinite;
}
@keyframes lab-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.lab-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  max-width: 380px;
}

/* ── Lab floating project readouts ── */
.lab-projects {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}
.lab-projects--left  { left: 28px; align-items: flex-start; }
.lab-projects--right { right: 28px; align-items: flex-end; text-align: right; }
.lab-proj {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 4px;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-mono);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  width: 160px;
}
a.lab-proj:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.6);
  transform: translateY(-1px);
}
.lab-proj--static { cursor: default; opacity: 0.85; }
.lab-proj-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
.lab-proj-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.lab-projects--right .lab-proj-badges { justify-content: flex-end; }
.lab-proj-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  line-height: 1;
}
.lab-proj-badge--live      { background: rgba(0, 229, 255, 0.15); color: #6FF0FF; border: 0.5px solid rgba(0, 229, 255, 0.5); }
.lab-proj-badge--ai        { background: rgba(255, 110, 255, 0.15); color: #FFB3FF; border: 0.5px solid rgba(255, 110, 255, 0.5); }
.lab-proj-badge--building  { background: rgba(155, 110, 255, 0.15); color: #C9B3FF; border: 0.5px solid rgba(155, 110, 255, 0.5); }

/* On narrow card, stack project readouts at the top */
@container (max-width: 700px) {
  .lab-projects {
    position: absolute;
    top: 80px;
    left: 28px;
    right: 28px;
    transform: none;
    flex-direction: column;
    gap: 8px;
  }
  .lab-projects--left,
  .lab-projects--right { align-items: stretch; text-align: left; }
  .lab-projects--right { top: auto; bottom: 200px; }
  .lab-projects--right .lab-proj-badges { justify-content: flex-start; }
}

/* ── Barclays + HSBC row ── */
.barclays-row {
  padding: clamp(24px, 3vw, 48px) var(--pad-x) 0;
}
.barclays-row-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: 100%;
}
.barclays-row-inner > .project-card {
  width: 100%;
  height: 560px;
}
.card-body.card-body--barclays {
  background: linear-gradient(180deg, #0a1e3d 0%, #051129 100%);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.project-card--barclays:hover .card-body.card-body--barclays {
  background: linear-gradient(180deg, #0a1e3d 0%, #051129 100%);
  backdrop-filter: none;
}
.barclays-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  height: 22px;
  width: auto;
  z-index: 5;
  filter: brightness(0) invert(1);
}

/* Chat thread (bubbles container) */
.chat-thread {
  position: absolute;
  top: 0px;
  left: 22px;
  right: 22px;
  bottom: 110px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  z-index: 2;
}

/* Each row: long bubble on one side, two small stacked on the other */
.chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.chat-row.is-in { opacity: 1; transform: translateY(0); }
.chat-row--left  { flex-direction: row; }
.chat-row--right { flex-direction: row-reverse; }
.chat-row--exchange {
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.chat-row--exchange .chat-bubble--left  { align-self: flex-start; }
.chat-row--exchange .chat-bubble--right { align-self: flex-end; }
.chat-row-long {
  flex: 0 0 auto;
}
.chat-row-smalls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-row--left .chat-row-smalls { align-items: flex-end; }
.chat-row--right .chat-row-smalls { align-items: flex-start; }
.chat-row .chat-bubble {
  opacity: 1;
  transform: none;
  transition: none;
  max-width: 100%;
}
.chat-row--left  .chat-row-smalls .chat-bubble { align-self: flex-end; }
.chat-row--right .chat-row-smalls .chat-bubble { align-self: flex-start; }
.chat-row--left  .chat-row-long .chat-bubble   { align-self: flex-start; }
.chat-row--right .chat-row-long .chat-bubble   { align-self: flex-end; }
.chat-bubble {
  display: block;
  max-width: 78%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.chat-bubble.is-in { opacity: 1; transform: translateY(0); }
.chat-bubble--left  { align-self: flex-start; }
.chat-bubble--right { align-self: flex-end; }
.chat-bubble img {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  background: #0a1e3d;
}
.chat-bubble--small img { max-width: 190px; }
.chat-bubble--bare img {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  max-width: 340px;
}
.chat-bubble--small.chat-bubble--bare img { max-width: 340px; }

/* Text bubble (Barclays system message) */
.chat-bubble--text {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 78%;
}
.chat-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chat-msg {
  background: #fff;
  color: #00395D;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  padding: 10px 14px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  max-width: 220px;
}
.chat-bubble--text.chat-bubble--right {
  flex-direction: row-reverse;
}
.chat-bubble--text.chat-bubble--right .chat-msg {
  background: #00395D;
  color: #fff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 6px;
}
@media (max-width: 720px) {
  .chat-bubble img { max-width: 180px; }
  .chat-bubble--small img { max-width: 120px; }
}

/* Notification banner */
.chat-notif {
  position: absolute;
  top: 80px;
  right: 22px;
  transform: translateX(calc(100% + 22px));
  width: 70%;
  max-width: 280px;
  z-index: 4;
  opacity: 0;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.chat-notif.is-in {
  opacity: 1;
  transform: translateX(0);
}
.chat-notif.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}
.chat-notif img {
  display: block;
  width: 100%;
  height: auto;
}

/* Title */
.card-body--barclays .card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.barclays-title {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 90%;
}
.card-logo-text.barclays-title { color: #fff; }

/* Bottom gradient for legibility */
.card-body--barclays::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.95) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── HSBC — API Developer Portal card ── */
.card-body.card-body--hsbc {
  background: linear-gradient(180deg, #2c2f36 0%, #16181d 100%);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.project-card--hsbc:hover .card-body.card-body--hsbc {
  background: linear-gradient(180deg, #2c2f36 0%, #16181d 100%);
  backdrop-filter: none;
}
.hsbc-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 5;
  height: 22px;
  width: auto;
}
.hsbc-marquee {
  position: absolute;
  top: calc(50% - 20px);
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 2;
}
.hsbc-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: hsbc-scroll 60s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.hsbc-track img {
  width: 378px;
  height: auto;
  flex-shrink: 0;
  display: block;
  transform: translateZ(0);
}
@keyframes hsbc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hsbc-track.is-paused { animation-play-state: paused; }

/* Pause button */
.hsbc-pause {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.hsbc-pause:hover { background: rgba(255,255,255,0.32); transform: scale(1.06); }
.hsbc-pause-icon {
  display: inline-block;
  width: 8px;
  height: 12px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.hsbc-pause.is-paused .hsbc-pause-icon {
  /* play triangle */
  width: 0;
  height: 0;
  border: none;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
  margin-left: 2px;
}
.card-body--hsbc .card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.hsbc-title {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.card-logo-text.hsbc-title { color: #fff; }
.card-body--hsbc::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.95) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Emojis card ── */
.emojis-row {
  padding: clamp(24px, 3vw, 48px) var(--pad-x) 0;
}
.emojis-row-inner {
  width: 100%;
}
.emojis-row-inner .project-card {
  width: 100%;
  height: 480px;
}
.card-body.card-body--emojis {
  background-color: #2a1640;
  background-image:
    /* warp threads (vertical) */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      transparent 1px,
      transparent 3px),
    /* weft threads (horizontal) */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.08) 0px,
      rgba(0,0,0,0.08) 1px,
      transparent 1px,
      transparent 3px),
    /* diagonal weave highlights */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 5px),
    /* base purple gradient — darker on the LEFT */
    linear-gradient(90deg, #150823 0%, #1d0d2e 30%, #2a1640 70%, #3a1e58 100%);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.project-card--emojis:hover .card-body.card-body--emojis {
  background-color: #2a1640;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      transparent 1px,
      transparent 3px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.08) 0px,
      rgba(0,0,0,0.08) 1px,
      transparent 1px,
      transparent 3px),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 5px),
    linear-gradient(90deg, #150823 0%, #1d0d2e 30%, #2a1640 70%, #3a1e58 100%);
  backdrop-filter: none;
}
.emojis-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 5;
  height: 28px;
  width: auto;
}
.emojis-content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 36px;
  z-index: 4;
  max-width: 640px;
}
.emojis-title {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.card-logo-text.emojis-title { color: #fff; }
.emojis-summary {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin-bottom: 8px;
  max-width: 560px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.emojis-link {
  color: #FFD3B6;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.emojis-link:hover { color: #fff; }

/* Scattered emoji decorations */
.emoji-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  font-size: 64px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}
/* Emojis live in the right half only, so they never collide with the text on the left */
.emoji-deco--1  { top: 10%;  right: 6%;   font-size: 72px; transform: rotate(-12deg); animation: emoji-bob 6s   ease-in-out infinite;        }
.emoji-deco--2  { top: 6%;   right: 24%;  font-size: 56px; transform: rotate(18deg);  animation: emoji-bob 7s   ease-in-out infinite -1.2s;   }
.emoji-deco--3  { top: 28%;  right: 14%;  font-size: 48px; transform: rotate(-6deg);  animation: emoji-bob 5.5s ease-in-out infinite -2s;     }
.emoji-deco--4  { top: 44%;  right: 28%;  font-size: 56px; transform: rotate(22deg);  animation: emoji-bob 6.5s ease-in-out infinite -0.4s;   }
.emoji-deco--5  { top: 22%;  right: 38%;  font-size: 44px; transform: rotate(-22deg); animation: emoji-bob 7.5s ease-in-out infinite -2.6s;   }
.emoji-deco--6  { top: 64%;  right: 4%;   font-size: 60px; transform: rotate(8deg);   animation: emoji-bob 5s   ease-in-out infinite -3.4s;   }
.emoji-deco--7  { top: 48%;  right: 4%;   font-size: 42px; transform: rotate(-28deg); animation: emoji-bob 8s   ease-in-out infinite -1.8s;   }
.emoji-deco--8  { top: 80%;  right: 18%;  font-size: 44px; transform: rotate(14deg);  animation: emoji-bob 6.8s ease-in-out infinite -0.8s;   }
.emoji-deco--9  { top: 4%;   right: 42%;  font-size: 38px; transform: rotate(8deg);   animation: emoji-bob 7.2s ease-in-out infinite -1.5s;   }
.emoji-deco--10 { top: 38%;  right: 38%;  font-size: 38px; transform: rotate(-16deg); animation: emoji-bob 6.2s ease-in-out infinite -2.8s;  }
.emoji-deco--11 { top: 70%;  right: 30%;  font-size: 48px; transform: rotate(26deg);  animation: emoji-bob 5.8s ease-in-out infinite -1.1s;  }
.emoji-deco--12 { top: 56%;  right: 18%;  font-size: 36px; transform: rotate(-8deg);  animation: emoji-bob 7.8s ease-in-out infinite -3s;     }
.emoji-deco--13 { top: 30%;  right: 50%;  font-size: 32px; transform: rotate(20deg);  animation: emoji-bob 8.5s ease-in-out infinite -2.2s;   }
.emoji-deco--14 { top: 14%;  right: 50%;  font-size: 32px; transform: rotate(-18deg); animation: emoji-bob 6.4s ease-in-out infinite -0.6s;   }
@keyframes emoji-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Custom emoji cursor element */
.emojis-cursor {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 28px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.05s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ── Expedia card ── */
.expedia-row {
  padding: clamp(24px, 3vw, 48px) var(--pad-x) 0;
}
.expedia-row-inner {
  width: 50%;
  min-width: 360px;
}
.expedia-row-inner .project-card {
  width: 100%;
  height: 480px;
}
.card-body.card-body--expedia {
  background: #0a1e3d;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.project-card--expedia:hover .card-body.card-body--expedia {
  background: #0a1e3d;
  backdrop-filter: none;
}
/* iPhone-shaped frame */
.expedia-phone {
  position: absolute;
  top: -60px;
  right: 30px;
  width: 220px;
  height: 460px;
  background: #0d0d10;
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 18px 40px rgba(0,0,0,0.5);
  z-index: 2;
  overflow: hidden;
}
.expedia-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #0d0d10;
  border-radius: 12px;
  z-index: 3;
}
.expedia-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 28px;
  display: block;
}
.expedia-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 5;
  height: 24px;
  width: auto;
}
.expedia-shot {
  position: absolute;
  width: 340px;
  height: auto;
  z-index: 3;
  border-radius: 8px;
}
.expedia-shot--left   { left: -60px; top: 50%; transform: translateY(-50%); }
/* Both images clipped at the LEFT edge of the card */
.expedia-shot--right {
  left: 0;
  top: 40px;
  z-index: 4;
}
.expedia-shot--right2 {
  left: -90px;
  bottom: 110px;
  z-index: 3;
}
.card-body--expedia .card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.expedia-title {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 70%;
}
.card-logo-text.expedia-title { color: #fff; }
.card-body--expedia::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
  z-index: 4;
  pointer-events: none;
}

/* Netflix card own row — right edge of card aligned with vertical center of page */
.netflix-row {
  padding: 0;
  margin-top: -210px;
  position: relative;
  z-index: 2;
}
.netflix-row-inner {
  width: 50%;
  display: flex;
  justify-content: flex-end;
}
.netflix-row-inner .project-card {
  width: 100%;
  max-width: 510px;
  height: 550px;
}


/* CV section under MSN */
.cv-section {
  padding: clamp(24px, 3vw, 48px) var(--pad-x) clamp(32px, 4vw, 56px);
}

/* ── CV-style table ── */
.cv-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.cv-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.5fr) minmax(120px, 1fr);
  gap: clamp(16px, 2vw, 40px);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.1vw, 16px);
  color: #fff;
  padding: 4px 0;
}
.cv-co    { font-weight: 700; }
.cv-role  { color: rgba(255,255,255,0.85); }
.cv-years { color: rgba(255,255,255,0.7); }
@media (max-width: 600px) {
  .cv-row { grid-template-columns: 1fr 1fr; }
  .cv-years { grid-column: 1 / -1; }
}

/* ── MSN row ── */
.msn-row {
  display: grid;
  grid-template-columns: minmax(0, 477px) minmax(0, 1fr);
  gap: var(--gap);
  padding: 0 var(--pad-x);
  align-items: start;
}
.msn-col {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
}
.msn-row--solo {
  grid-template-columns: minmax(0, 552px);
}

/* Side cards section (below MSN, left-aligned) */
.side-cards-section {
  padding: var(--gap) var(--pad-x) 0;
}
.side-cards-section .side-cards {
  align-self: start;
  justify-content: start;
  max-width: calc(510px * 2 + var(--gap));
}

/* ── MSN as image with chat overlay (15% bigger) ── */
.msn-wrapper {
  position: relative;
  width: 100%;
  max-width: 477px;
  margin-left: 60px;
}
.msn-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
}
.msn-image-desktop { display: block; }
.msn-image-mobile  { display: none; }

/* Chat content sits inside the "chat window" area of the PNG */
.msn-chat {
  position: absolute;
  top: 22%;
  left: 5%;
  width: 90%;
  max-width: 300px;
  height: 56%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.5;
  color: #000;
  padding-right: 4px;
}
.msn-chat::-webkit-scrollbar { width: 6px; }
.msn-chat::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

.msn-message {
  max-width: 100%;
  animation: msn-pop 0.25s ease;
  word-wrap: break-word;
}
.msn-message.from-cherin .msn-author { color: #0066cc; font-weight: 700; }
.msn-message.from-visitor .msn-author { color: #B5005A; font-weight: 700; }
.msn-author { margin-right: 6px; }
.msn-message.is-gif img {
  display: block;
  max-width: 80%;
  margin: 4px 0;
  border-radius: 4px;
}

.msn-typing {
  display: inline-flex;
  gap: 3px;
  padding: 2px 0;
  align-self: flex-start;
}
.msn-typing span {
  width: 5px; height: 5px;
  background: #5a5a5a;
  border-radius: 50%;
  animation: msn-blink 1.2s infinite ease-in-out;
}
.msn-typing span:nth-child(2) { animation-delay: 0.2s; }
.msn-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Branch buttons sit just below the chat area, over the PNG's input zone */
.msn-branches {
  position: absolute;
  left: 5%;
  bottom: 6%;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.msn-branch {
  padding: 5px 10px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.msn-branch:hover { background: var(--accent); color: #fff; }

.msn-nudge-btn {
  position: absolute;
  left: 70px;
  top: 339px;
  width: 60px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.msn-nudge-btn:hover {
  cursor: url('../assets/images/windows-cursor-32.png'), pointer;
}

@keyframes msn-pop {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msn-blink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}
@keyframes msn-nudge {
  0%   { transform: translate(0,0) rotate(0); }
  10%  { transform: translate(-8px,-4px) rotate(-3deg); }
  20%  { transform: translate(8px,4px) rotate(3deg); }
  30%  { transform: translate(-8px,4px) rotate(-2deg); }
  40%  { transform: translate(8px,-4px) rotate(2deg); }
  50%  { transform: translate(-6px,0) rotate(-1deg); }
  60%  { transform: translate(6px,2px) rotate(1deg); }
  70%  { transform: translate(-4px,-2px) rotate(-1deg); }
  80%  { transform: translate(4px,0) rotate(0); }
  90%  { transform: translate(-2px,2px) rotate(0); }
  100% { transform: translate(0,0) rotate(0); }
}
.msn-nudging { animation: msn-nudge 0.6s ease-in-out; }

/* ── Side cards (next to MSN) ── */
.side-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-self: stretch;
}
.side-cards .project-card {
  height: 550px;
  max-width: 510px;
  width: 100%;
  justify-self: center;
}
.msn-row .project-card .card-body { flex: 1; }

/* ── Project card — macOS window style (matches portfolio) ── */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.card-titlebar {
  height: 28px;
  background: white;
  box-shadow:
    0px 0.5px 0px rgba(0,0,0,.15),
    0px -0.5px 0px rgba(0,0,0,.05) inset;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  flex-shrink: 0;
}
.traffic-lights { display: flex; gap: 6px; }
.tl {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #CCCEE0;
  border: 0.5px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}
.card-path {
  color: #6D6D6D;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 400;
}
.card-body {
  flex: 1;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  outline: 0.5px solid rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  transition: background .3s, backdrop-filter .3s;
}
.project-card:hover .card-body {
  background: rgba(255,255,255,.50);
}
.card-image {
  position: absolute;
  inset: 28px 0 0 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.card-content {
  position: relative;
  z-index: 1;
  color: #000;
}
.card-logo-text {
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0;
  color: #000;
}
.card-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: #333;
  margin-top: 4px;
}

/* ── Spotify card — custom treatment ── */
.card-body--spotify {
  background: #000;
  padding: 0;
  overflow: hidden;
  position: relative;
  container-type: size;
}
.card-body--spotify > .scale-wrap,
.card-body--netflix > .scale-wrap {
  position: absolute;
  top: 0;
  left: max(0px, calc((100cqi - 510px) / 2));
  width: 510px;
  height: calc(100cqb * 510px / 100cqi);
  transform-origin: top left;
  transform: scale(min(1, calc(100cqi / 510px)));
}
.card-body--spotify > .scale-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.95) 100%);
  z-index: 3;
  pointer-events: none;
}
.project-card--spotify:hover .card-body--spotify {
  background: #000;
  backdrop-filter: none;
}
.spotify-demo {
  position: absolute;
  right: -145px;
  bottom: 108px;
  max-width: 76.5%;
  max-height: 70.2%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.spotify-bg {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 8px;
  width: calc(100% - 56px);
  height: auto;
  max-height: 82.5%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.spotify-mid-wrap {
  position: absolute;
  right: 32px;
  top: calc(50% - 150px);
  transform: translateY(-50%);
  max-width: 38%;
  max-height: 49%;
  z-index: 4;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
  cursor: pointer;
}
.spotify-mid-wrap:hover {
  transform: translateY(-50%) scale(1.04) rotate(-1deg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.spotify-mid-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,0.45) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
  animation: spotify-shimmer 6s ease-in-out infinite;
}
@keyframes spotify-shimmer {
  0%, 70%   { transform: translateX(-100%); }
  85%       { transform: translateX(150%); }
  100%      { transform: translateX(150%); }
}
.spotify-mid-wrap:hover::after {
  animation: none;
  transform: translateX(150%);
  transition: transform 1.2s ease;
}
.spotify-mid {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  pointer-events: none;
}
.beat-frame {
  position: absolute;
  left: 28px;
  top: calc(50% + 16px);
  transform: translateY(-50%);
  width: 161px;
  height: 60px;
  border-radius: 9999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  z-index: 4;
}
.beat-frame img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.beat-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  border-radius: 9999px;
}
.spotify-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 40px;
  height: 40px;
  z-index: 4;
  pointer-events: none;
}
.card-body--spotify .card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 32px;
  z-index: 4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.spotify-title {
  color: #fff;
  font-family: var(--font-mono);
  font-size: calc(28px / min(1, 100cqi / 510px));
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 75%;
  line-height: 1.15;
}

/* ── Netflix card — custom treatment ── */
.card-body--netflix {
  background: #000;
  padding: 0;
  overflow: hidden;
  position: relative;
  container-type: size;
}
.project-card--netflix:hover .card-body--netflix {
  background: #000;
  backdrop-filter: none;
}
.card-body--netflix > .scale-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.95) 100%);
  z-index: 3;
  pointer-events: none;
}
/* Cover Flow deck */
.cover-deck {
  position: absolute;
  top: calc(15% - 10px);
  left: 45px;
  right: 16px;
  height: 85%;
  z-index: 1;
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  border-radius: 8px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  transform-origin: left center;
  transition:
    transform 0.45s cubic-bezier(.4,0,.2,1),
    opacity 0.45s ease,
    filter 0.45s ease;
}
.cover[data-slot="0"] { transform: translateX(0%)  scale(1);    opacity: 1;    z-index: 10; filter: brightness(1); }
.cover[data-slot="1"] { transform: translateX(60%) scale(0.94); opacity: 0.9;  z-index: 9;  filter: brightness(0.8); }
.cover[data-slot="2"] { transform: translateX(95%) scale(0.86); opacity: 0.75; z-index: 8;  filter: brightness(0.65); }
.cover[data-slot="3"] { transform: translateX(120%) scale(0.78); opacity: 0.6; z-index: 7;  filter: brightness(0.5); }
.cover[data-slot="4"] { transform: translateX(138%) scale(0.7); opacity: 0.45; z-index: 6;  filter: brightness(0.4); }
.cover[data-slot="5"] { transform: translateX(150%) scale(0.62); opacity: 0.3; z-index: 5;  filter: brightness(0.3); }
.cover[data-slot="6"] { transform: translateX(160%) scale(0.56); opacity: 0.2; z-index: 4;  filter: brightness(0.25); }
.cover[data-slot="7"] { transform: translateX(168%) scale(0.5);  opacity: 0.12; z-index: 3; filter: brightness(0.2); }

/* Arrow buttons */
.cover-arrow {
  position: absolute;
  top: calc(15% + 35%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.cover-arrow:hover { background: rgba(255,255,255,0.32); transform: scale(1.08); }
.cover-arrow--prev { left: 10px; }
.cover-arrow--next { right: 10px; }

/* Front cover gently nudges left periodically to hint at swipability */
.cover[data-slot="0"] {
  animation: cover-front-nudge 4.5s ease-in-out infinite;
}
@keyframes cover-front-nudge {
  0%, 70%, 100% { transform: translateX(0%) scale(1); }
  82%           { transform: translateX(-3%) scale(1); }
  92%           { transform: translateX(0.5%) scale(1); }
}
.netflix-logo {
  position: absolute;
  top: 22px;
  left: 22px;
  height: 22px;
  width: auto;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
}
.card-body--netflix .card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 32px;
  z-index: 4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.netflix-title {
  color: #fff;
  font-family: var(--font-mono);
  font-size: calc(28px / min(1, 100cqi / 510px));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

/* Featured large card */
.featured {
  padding: var(--gap) var(--pad-x) 0;
}
.project-card--featured .card-body {
  min-height: clamp(280px, 36vw, 480px);
}

/* Grid mixed */
.grid-mixed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--gap) var(--pad-x) clamp(64px, 8vw, 120px);
}
.grid-mixed .project-card { grid-column: span 2; }
.media {
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* ── Footer ── */
.footer {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  padding-top: clamp(48px, 6vw, 96px);
  position: relative;
  z-index: 1;
}
.footer-image {
  width: 100%;
  height: clamp(220px, 32vw, 480px);
  background: rgba(255,255,255,0.05);
  background-size: cover;
  background-position: center;
}
.footer-meta {
  padding: clamp(32px, 4vw, 56px) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-name {
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: 0;
}

/* Opt-in serif accent — use class="font-serif" on specific elements */
.font-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.font-serif em { font-style: italic; }
.footer-contact a:hover { opacity: 0.7; }
.footer-credit { color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 12px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .msn-row { grid-template-columns: 1fr; }
  .side-cards { grid-template-columns: 1fr; }
  .side-cards .project-card {
    aspect-ratio: 5 / 6;
    height: auto;
  }
  .grid-mixed { grid-template-columns: repeat(2, 1fr); }
  .grid-mixed .project-card, .media { grid-column: span 1; }
}
@media (max-width: 560px) {
  .nav { padding: 0 20px; }
  .nav-links { padding: 0 16px; gap: 16px; }
  .side-cards { grid-template-columns: 1fr; }
  .grid-mixed { grid-template-columns: 1fr; }
  .msn-image-desktop { display: none; }
  .msn-image-mobile  { display: block; }
}

/* ── Mobile layout: MSN on top, everything stacked below ── */
@media (max-width: 720px) {
  /* MSN row collapses to single column, MSN first */
  .msn-row { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }

  /* MSN wrapper centered, no left margin offset */
  .msn-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  /* Right column: reset desktop offsets */
  .msn-side {
    padding-top: 0;
    gap: clamp(20px, 3vw, 32px);
  }

  /* Subhead: reset desktop indents/widths */
  .hero-subhead,
  .hero-subhead.font-serif em {
    margin-left: 0;
    text-indent: 0;
    font-size: clamp(18px, 4.6vw, 26px);
    white-space: normal;
  }

  /* Spotify card: full width, no margin offsets */
  .msn-side-card {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    height: auto;
    aspect-ratio: 5 / 6;
  }

  /* CV under Spotify: back to static (not absolute) */
  .cv-table.cv-table--under-spotify {
    position: static;
    margin: clamp(16px, 3vw, 24px) 0 0;
    width: 100%;
    max-width: 100%;
  }
  .cv-table.cv-table--under-spotify .cv-row {
    grid-template-columns: 90px 1fr 100px;
  }

  /* Netflix card: full width, no lift, no 50% offset */
  .netflix-row {
    padding: clamp(20px, 3vw, 32px) var(--pad-x) 0;
    margin-top: 0;
  }
  .netflix-row-inner {
    width: 100%;
    display: block;
  }
  .netflix-row-inner .project-card {
    height: auto;
    aspect-ratio: 5 / 6;
  }

  /* Lab card: full width, natural height */
  .lab-row { padding: clamp(20px, 3vw, 32px) var(--pad-x) 0; }
  .lab-row-inner .project-card { height: 480px; }

  /* Barclays + HSBC: stack full width */
  .barclays-row { padding: clamp(20px, 3vw, 32px) var(--pad-x) 0; }
  .barclays-row-inner {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }
  .barclays-row-inner > .project-card { height: 480px; }

  /* Emojis card */
  .emojis-row { padding: clamp(20px, 3vw, 32px) var(--pad-x) 0; }
  .emojis-row-inner .project-card { height: auto; aspect-ratio: 5 / 6; }
  .emoji-deco { font-size: 44px !important; }

  /* Expedia card */
  .expedia-row { padding: clamp(20px, 3vw, 32px) var(--pad-x) 0; }
  .expedia-row-inner .project-card { height: auto; aspect-ratio: 5 / 6; }
  .expedia-shot { width: 70%; }
  .expedia-shot--left  { left: -10%; }
  .expedia-shot--right { right: -10%; }
}

/* ── Dock (bottom center, floating) ── */
.dock {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 78px;
}
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
  font-family: var(--font-mono);
  max-width: 110px;
}
.dock-item:hover { background: rgba(255,255,255,0.10); }
.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}
.dock-icon--placeholder {
  background: rgba(255,255,255,0.15);
  border: 1px dashed rgba(255,255,255,0.35);
  display: inline-block;
}
.dock-label {
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  max-width: 110px;
}
@media (max-width: 560px) {
  .dock { gap: 6px; padding: 6px 10px; bottom: 16px; }
  .dock-item { padding: 4px 6px; max-width: 80px; }
  .dock-label { font-size: 9px; }
}

/* ── XP MODE ── */
.bg-pill { cursor: pointer; }
body.xp-mode .bg {
  background-image: url('../assets/images/windowsxp.jpg');
}
body.xp-mode .bg-pill {
  background: linear-gradient(180deg, #5FC15B 0%, #409940 40%, #317E31 60%, #3C8A3C 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}
body.xp-mode .bg-pill::after {
  content: 'back to \2318';
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  font-style: italic;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  letter-spacing: 0.2px;
  pointer-events: none;
}
body.xp-mode .pill-win-icon { display: none; }
body.xp-mode,
body.xp-mode .nav-name,
body.xp-mode .nav-links a,
body.xp-mode .card-path,
body.xp-mode .card-logo-text,
body.xp-mode .dock-label,
body.xp-mode .hero-title,
body.xp-mode .hero-subhead,
body.xp-mode .cv-co,
body.xp-mode .cv-role,
body.xp-mode .cv-years {
  font-family: Tahoma, sans-serif !important;
}
body.xp-mode * {
  cursor: url('../assets/images/windows-cursor-32.png'), auto !important;
}
body.xp-mode a,
body.xp-mode button,
body.xp-mode .bg-pill,
body.xp-mode .project-card,
body.xp-mode .dock-item {
  cursor: url('../assets/images/windows-cursor-32.png'), pointer !important;
}

/* XP cards */
body.xp-mode .project-card {
  border-radius: 6px 6px 0 0;
  border: 1px solid #0831d9;
  border-right-color: #001ea0;
  box-shadow:
    0 0 0 1px #00138c,
    inset 0 0 0 1px #166aee,
    0 6px 20px rgba(0,0,0,0.5);
  transition: none;
}
body.xp-mode .project-card:hover { transform: none; }
body.xp-mode .card-titlebar {
  height: 30px;
  padding: 0 4px 0 8px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  flex-direction: row;
}
body.xp-mode .card-path {
  flex: 1;
  order: 1;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
body.xp-mode .traffic-lights { order: 2; gap: 6px; align-items: center; }
body.xp-mode .tl {
  width: 21px; height: 21px;
  border-radius: 2px;
  border: none;
  outline: 1px solid white;
  background: #245FF5;
}
body.xp-mode .traffic-lights .tl:nth-child(3) { background: #E46446; }
body.xp-mode .card-body {
  background: #ece9d8;
  backdrop-filter: none;
  outline: none;
}
body.xp-mode .project-card:hover .card-body {
  background: #ece9d8;
  backdrop-filter: none;
}
body.xp-mode .card-logo-text { color: #000; }

/* XP nav */
body.xp-mode .nav-links {
  background: rgba(10, 36, 106, 0.85);
  backdrop-filter: none;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 3px rgba(0,0,0,0.4);
}

/* XP: hide mac dock, show start menu + taskbar */
body.xp-mode .dock { display: none !important; }

.xp-start-menu, .xp-taskbar { display: none; }

body.xp-mode .xp-start-menu {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  bottom: 36px;
  left: 0;
  width: 300px;
  z-index: 9999;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.6);
  outline: 2px solid #215CC5;
  background: white;
}
.xp-sm-header {
  background: linear-gradient(180deg, #67A2E7 0%, #74AAE8 4%, #1969D2 6%, #1465CC 50%, #1565CC 83%, #1D72DA 93%, #1D6FD8 100%);
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  padding: 10px 14px 12px;
  height: 54px;
  display: flex;
  align-items: flex-end;
}
.xp-sm-body { display: flex; flex: 1; }
.xp-sm-programs {
  flex: 1;
  background: #fff;
  border-top: 2px solid #E87610;
  display: flex;
  flex-direction: column;
}
.xp-sm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: #000;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #f0ece8;
}
.xp-sm-item:hover { background: #316AC5; color: #fff; }
.xp-sm-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.xp-sm-powerbar {
  height: 34px;
  background: linear-gradient(180deg, #448BE3 0%, #2160BF 8%, #1555B7 48%, #1152B3 51%, #1555B7 55%, #1A61C2 92%, #0A56C0 100%);
  border-top: 1px solid #1A5AAD;
}

body.xp-mode .xp-taskbar {
  display: flex !important;
  align-items: center;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  z-index: 8999;
  background: linear-gradient(180deg, #1F5FBB 0%, #3A83D4 4%, #245EC0 6%, #245EC0 94%, #1A53B5 96%, #1650B2 100%);
  border-top: 1px solid #0D3688;
  box-shadow: inset 0 1px 0 #6BA5E7;
}
.xp-start-btn { display: none; }
body.xp-mode .xp-start-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 6px;
  margin: 0 2px;
  border: none;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #5DBB4A 0%, #3D9C2A 40%, #2E8020 60%, #3A9428 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 1px 0 3px rgba(0,0,0,0.3);
  cursor: pointer;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
}
.xp-win-logo { width: 20px; height: 20px; flex-shrink: 0; }
.xp-clock { display: none; }
body.xp-mode .xp-clock {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 10px;
  height: 100%;
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  border-left: 1px solid rgba(255,255,255,0.15);
}