/* ============================================================
   WINDOWS VISTA AERO — PORTFOLIO
   Authentic window chrome, taskbar, start orb, desktop icons
   ============================================================ */

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, 'Geneva', Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #d4e8ff;
  background: #000810;
  padding-bottom: 42px; /* taskbar height */
  overflow-x: hidden;
}

/* ---- VISTA AURORA WALLPAPER ---- */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 140% 80% at 20% 70%, rgba(0,65,180,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 90%  60% at 70% 60%, rgba(0,120,90,0.28)  0%, transparent 55%),
    radial-gradient(ellipse 70%  50% at 10% 45%, rgba(10,0,200,0.22)  0%, transparent 48%),
    radial-gradient(ellipse 55%  40% at 82% 38%, rgba(0,45,165,0.3)   0%, transparent 50%),
    radial-gradient(ellipse 45%  35% at 50% 75%, rgba(35,0,110,0.2)   0%, transparent 45%),
    linear-gradient(to bottom, #000005 0%, #000818 40%, #000e18 70%, #000508 100%);
  animation: aurora-shift 25s ease-in-out infinite alternate;
}
.wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 30% at 40% 55%, rgba(0,80,255,0.08) 0%, transparent 60%);
  animation: aurora-shift 18s ease-in-out 4s infinite alternate-reverse;
}
@keyframes aurora-shift {
  0%   { opacity: 1; transform: scaleX(1) scaleY(1); }
  50%  { opacity: .85; transform: scaleX(1.05) scaleY(0.96); }
  100% { opacity: 1; transform: scaleX(0.97) scaleY(1.04); }
}

/* ---- STARS CANVAS ---- */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- DESKTOP LAYOUT ---- */
.desktop {
  /* Narrow column — content sits in the middle, wallpaper visible on sides */
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- HERO = DESKTOP ---- */
.desktop-bg {
  min-height: 100svh;
  padding: 6rem 0 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.desktop-name-block { max-width: 480px; }

.desktop-eyebrow {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .07em;
  color: rgba(190,220,255,.5);
  text-shadow: 0 1px 5px rgba(0,0,0,.6);
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.desktop-name {
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  font-weight: 200;
  letter-spacing: -.02em;
  line-height: 1.0;
  color: rgba(225,242,255,.96);
  text-shadow:
    0 0 80px rgba(80,160,255,.35),
    0 2px 10px rgba(0,0,0,.55);
  margin-bottom: .7rem;
}

.desktop-role {
  font-size: 13px;
  font-weight: 400;
  color: rgba(175,210,255,.65);
  letter-spacing: .03em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  margin-bottom: .4rem;
}

.desktop-meta {
  font-size: 11.5px;
  color: rgba(160,200,255,.4);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  margin-bottom: 1.6rem;
}

/* Vista-style glass button */
.desktop-start-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px 6px 14px;
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(220,240,255,.92);
  text-decoration: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.06) 50%,
    rgba(0,0,0,.08) 51%,
    rgba(255,255,255,.06) 100%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 4px rgba(0,0,0,.4);
  transition: background .12s, box-shadow .12s;
}
.desktop-start-link:hover {
  background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, rgba(255,255,255,.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 8px rgba(80,160,255,.3), 0 1px 4px rgba(0,0,0,.4);
}
.dsl-arrow { font-size: 10px; }

/* ---- DESKTOP ICONS ---- */
.desktop-icons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.deskicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  width: 70px;
  transition: background .1s, border-color .1s;
  cursor: default;
}
.deskicon:hover {
  background: rgba(80,140,255,.18);
  border-color: rgba(80,150,255,.45);
}

.deskicon-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 7px rgba(0,0,0,.55);
}
.deskicon-img::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(to bottom, rgba(255,255,255,.32), rgba(255,255,255,.04));
  border-radius: 5px 5px 0 0;
  pointer-events: none;
}

.di-blue   { background: linear-gradient(145deg, #4080cc, #1f4fa0); }
.di-orange { background: linear-gradient(145deg, #d66000, #9e3800); }
.di-green  { background: linear-gradient(145deg, #1e8040, #0e5025); }
.di-purple { background: linear-gradient(145deg, #8830a0, #581870); }
.di-dark   { background: linear-gradient(145deg, #404040, #202020); }
.di-blue2  { background: linear-gradient(145deg, #1a60b0, #0d3878); color: #fff; font-size: 14px; font-weight: 700; }

.deskicon-label {
  font-size: 10.5px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
  text-align: center;
  line-height: 1.25;
  word-break: break-word;
}

/* ====================================================
   WINDOW CHROME — shared across all sections
   ==================================================== */
.win {
  margin: 0 auto 2.5rem;
}

/* Scroll reveal: windows "open" with a scale+slide */
.reveal-win {
  opacity: 0;
  transform: scale(.96) translateY(20px);
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}
.reveal-win.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.reveal-win.minimized {
  opacity: 0;
  transform: scale(.84) translateY(50px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}

/* The glass window frame */
.win-chrome {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(175,210,255,.07);
  backdrop-filter: blur(40px) saturate(130%);
  -webkit-backdrop-filter: blur(40px) saturate(130%);
  border: 1px solid rgba(255,255,255,.18);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(255,255,255,.07),
    /* Vista-style colored border glow */
    0 0 0 1px rgba(55,105,230,.55),
    0 0 10px rgba(55,105,230,.28),
    0 0 28px rgba(35,80,210,.12),
    /* Drop shadow */
    0 12px 55px rgba(0,8,30,.82),
    0 4px 18px rgba(0,0,20,.6);
}

/* ---- TITLE BAR ---- */
.win-titlebar {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 6px 0 8px;
  gap: 5px;
  position: relative;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.18) 0%,
    rgba(210,230,255,.09) 55%,
    rgba(160,200,255,.04) 100%);
  border-bottom: 1px solid rgba(255,255,255,.09);
  user-select: none;
}
/* Thin top-edge highlight every Vista window has */
.win-titlebar::before {
  content: '';
  position: absolute;
  top: 0; left: 6px; right: 6px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.55), transparent);
  pointer-events: none;
}

.win-sysicon { font-size: 14px; line-height: 1; flex-shrink: 0; }

.win-title {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- WINDOW CONTROL BUTTONS ---- */
.win-btns { display: flex; gap: 2px; flex-shrink: 0; }

.wbtn {
  width: 27px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.82);
  cursor: default;
  transition: background .1s, border-color .1s, box-shadow .1s;
  padding: 0;
}
.wbtn:hover {
  background: linear-gradient(to bottom, rgba(255,255,255,.3) 0%, rgba(255,255,255,.14) 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 4px rgba(100,160,255,.25);
}
.wbtn-close:hover {
  background: linear-gradient(to bottom, #d42828, #aa1212);
  border-color: rgba(200,80,80,.55);
  box-shadow: 0 0 6px rgba(255,0,0,.35);
  color: #fff;
}

/* ---- WINDOW BODY ---- */
.win-body {
  background: rgba(8,15,38,.88);
  padding: 1.25rem 1.4rem;
  color: #cde0f8;
  font-size: 12.5px;
}

/* ---- STATUS BAR ---- */
.win-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  padding: 0 1rem;
  background: rgba(6,12,30,.9);
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 10.5px;
  color: rgba(170,205,255,.45);
}
.sb-r { color: rgba(170,205,255,.3); }

/* ====================================================
   ABOUT WINDOW
   ==================================================== */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.about-text p + p { margin-top: .65rem; }
.about-text strong { color: #90c8ff; font-weight: 600; }

.skill-section + .skill-section { margin-top: .85rem; }
.skill-heading {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(120,180,255,.55);
  margin-bottom: .4rem;
}
.skill-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-chips span {
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(60,110,220,.12);
  border: 1px solid rgba(60,110,220,.22);
  font-size: 11px;
  color: rgba(175,210,255,.72);
}
.chip-hl {
  background: rgba(80,160,255,.16) !important;
  border-color: rgba(80,160,255,.35) !important;
  color: #7ec8ff !important;
}

/* ====================================================
   EXPERIENCE WINDOW
   ==================================================== */
.exp-entry {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.2rem;
  padding: .85rem 0;
}
.exp-divider { height: 1px; background: rgba(255,255,255,.06); }
.exp-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.exp-period { font-size: 10.5px; color: rgba(160,200,255,.5); }
.exp-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 2px;
  background: rgba(60,100,220,.2);
  border: 1px solid rgba(60,100,220,.35);
  color: rgba(160,200,255,.7);
  width: fit-content;
}
.exp-role { font-size: 13px; font-weight: 600; color: #d8eeff; margin-bottom: 2px; }
.exp-co { font-size: 11px; color: rgba(120,180,255,.55); margin-bottom: .5rem; }
.exp-desc { font-size: 12px; color: rgba(185,215,255,.6); margin-bottom: .55rem; line-height: 1.55; }
.exp-bullets { padding-left: 1rem; margin-bottom: .55rem; }
.exp-bullets li { font-size: 11.5px; color: rgba(180,210,255,.58); line-height: 1.6; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.exp-chips span {
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(40,80,200,.1);
  border: 1px solid rgba(40,80,200,.2);
  font-size: 10.5px;
  color: rgba(150,195,255,.55);
}

/* ====================================================
   EDUCATION WINDOW
   ==================================================== */
.edu-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
}
.edu-badge-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(60,110,230,.18);
  border: 1px solid rgba(60,110,230,.3);
  font-size: 10.5px;
  color: rgba(160,205,255,.7);
  margin-bottom: .5rem;
}
.edu-degree { font-size: 18px; font-weight: 300; color: #d8eeff; margin-bottom: .25rem; }
.edu-school { font-size: 13px; color: rgba(140,190,255,.65); }
.edu-years  { font-size: 11.5px; color: rgba(120,170,255,.4); margin-top: .25rem; }
.course-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: .5rem; }
.course-list span {
  padding: 3px 9px;
  border-radius: 2px;
  background: rgba(40,70,180,.12);
  border: 1px solid rgba(40,70,180,.22);
  font-size: 11.5px;
  color: rgba(170,205,255,.65);
}

/* ====================================================
   PROJECTS WINDOW — Windows Explorer detail view
   ==================================================== */
.explorer-toolbar {
  height: 33px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: linear-gradient(to bottom, rgba(255,255,255,.04), transparent);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.exp-btn {
  height: 23px;
  padding: 0 8px;
  border-radius: 2px;
  background: none;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 11.5px;
  color: rgba(195,220,255,.65);
  cursor: default;
  transition: background .1s, border-color .1s;
}
.exp-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.exp-sep { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 4px; flex-shrink: 0; }

.explorer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(180,210,255,.5);
  padding: 0 4px;
}
.bc-sep   { color: rgba(180,210,255,.25); }
.bc-active { color: rgba(210,235,255,.85); }

.explorer-header {
  display: grid;
  grid-template-columns: 28px 1fr 120px 52px;
  padding: 0 1rem;
  height: 22px;
  align-items: center;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  color: rgba(160,195,255,.4);
  user-select: none;
}

.proj-body { padding: 0; }

.proj-row {
  display: grid;
  grid-template-columns: 28px 1fr 120px 52px;
  align-items: start;
  padding: .6rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}
.proj-row:hover { background: rgba(65,120,255,.12); }
.proj-row:last-child { border-bottom: none; }

.pr-icon {
  font-size: 16px;
  line-height: 1.7;
  padding-top: 1px;
}
.pr-main { overflow: hidden; }
.pr-name {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(220,240,255,.92);
  margin-bottom: 2px;
}
.pr-desc {
  display: block;
  font-size: 11px;
  color: rgba(165,200,255,.48);
  line-height: 1.5;
  margin-bottom: 4px;
}
.pr-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.pr-tags span {
  padding: 0 5px;
  background: rgba(50,90,210,.1);
  border: 1px solid rgba(50,90,210,.2);
  border-radius: 2px;
  font-size: 10px;
  color: rgba(145,190,255,.5);
}
.pr-type { font-size: 11px; color: rgba(155,190,255,.4); padding-top: 4px; }
.pr-link { font-size: 11px; color: rgba(100,170,255,.5); padding-top: 4px; text-align: right; }
.proj-row:hover .pr-link { color: rgba(120,190,255,.85); }
.eh-link { text-align: right; }

/* ====================================================
   CONTACT WINDOW
   ==================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 1.8rem;
  align-items: start;
}
.contact-big {
  font-size: 15px;
  font-weight: 300;
  color: #cce4ff;
  line-height: 1.4;
  margin-bottom: .65rem;
}
.contact-sub {
  font-size: 11.5px;
  color: rgba(165,200,255,.5);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.contact-links { display: flex; flex-direction: column; gap: 5px; }
.contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 3px;
  text-decoration: none;
  color: rgba(200,230,255,.75);
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  transition: background .1s, border-color .1s;
}
.contact-link:hover {
  background: rgba(80,140,255,.14);
  border-color: rgba(80,140,255,.3);
  color: rgba(220,245,255,.9);
}
.contact-link span:last-child { margin-left: auto; color: rgba(120,175,255,.4); }
.cl-icon {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px !important;
  font-weight: 700;
  flex-shrink: 0;
}

/* Contact form */
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.cf-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.cf-field label { font-size: 11.5px; color: rgba(160,200,255,.55); }
.cf-field input,
.cf-field textarea {
  background: rgba(6,12,35,.7);
  border: 1px solid rgba(60,100,200,.35);
  border-radius: 2px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 12.5px;
  color: rgba(215,238,255,.9);
  outline: none;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.5;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: rgba(120,165,220,.3); }
.cf-field input:focus,
.cf-field textarea:focus {
  border-color: rgba(80,150,255,.6);
  box-shadow: 0 0 0 2px rgba(60,120,255,.15);
}
.cf-actions { display: flex; gap: 6px; margin-top: 4px; }
.cf-btn {
  padding: 5px 16px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(to bottom,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 50%,
    rgba(0,0,0,.08) 51%, rgba(255,255,255,.05) 100%);
  color: rgba(220,240,255,.85);
  transition: background .1s;
}
.cf-btn:hover { background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, rgba(255,255,255,.12) 100%); }
.cf-btn-primary {
  background: linear-gradient(to bottom,
    rgba(70,130,255,.55) 0%, rgba(40,90,220,.6) 50%,
    rgba(25,65,200,.65) 51%, rgba(40,90,230,.5) 100%);
  border-color: rgba(80,150,255,.4);
  box-shadow: 0 0 8px rgba(60,120,255,.2);
}
.cf-btn-primary:hover { box-shadow: 0 0 14px rgba(80,160,255,.4); }
.form-status { font-size: 11.5px; margin-top: 6px; color: rgba(180,210,255,.55); min-height: 18px; }
.form-status.ok { color: #7adf90; }

/* ====================================================
   TASKBAR
   ==================================================== */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42px;
  z-index: 9000;
  overflow: visible;
  background: rgba(18,35,90,.38);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -6px 28px rgba(0,15,80,.45);
}
.taskbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.09), transparent);
  pointer-events: none;
}

.taskbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px;
  gap: 2px;
  position: relative;
}

/* ---- START ORB ---- */
.start-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  position: relative;
  bottom: 6px;         /* pops above the taskbar */
  flex-shrink: 0;
  margin-right: 4px;
  cursor: pointer;
  background: radial-gradient(circle at 40% 35%,
    rgba(150,225,255,.95) 0%,
    rgba(40,140,255,.85) 28%,
    rgba(10,60,210,.9)   60%,
    rgba(4,14,100,1)     100%);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 0 22px rgba(55,140,255,.65),
    0 0 44px rgba(30,100,255,.3),
    0 3px 12px rgba(0,0,0,.55);
  transition: box-shadow .2s, transform .1s;
}
.start-orb:hover {
  box-shadow:
    0 0 30px rgba(55,150,255,.9),
    0 0 60px rgba(30,110,255,.5),
    0 3px 12px rgba(0,0,0,.55);
  transform: scale(1.05);
}
.start-orb:active { transform: scale(.97); }

.orb-shine {
  position: absolute;
  top: 18%; left: 22%;
  width: 34%; height: 20%;
  background: radial-gradient(ellipse, rgba(255,255,255,.75), transparent 80%);
  border-radius: 50%;
  transform: rotate(-20deg);
  filter: blur(1.5px);
  pointer-events: none;
}
.orb-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  letter-spacing: .03em;
  pointer-events: none;
}

/* ---- TASKBAR WINDOW BUTTONS ---- */
.tb-wins {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}
.tb-win {
  height: 32px;
  padding: 0 10px;
  min-width: 95px;
  max-width: 140px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(to bottom,
    rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%,
    rgba(0,0,0,.06) 51%, rgba(255,255,255,.05) 100%);
  font-family: inherit;
  font-size: 11.5px;
  color: rgba(220,240,255,.72);
  cursor: pointer;
  overflow: hidden;
  transition: background .1s, border-color .1s;
}
.tb-win:hover {
  background: linear-gradient(to bottom, rgba(255,255,255,.2) 0%, rgba(255,255,255,.1) 100%);
}
.tb-win.active {
  background: linear-gradient(to bottom,
    rgba(10,40,0,.06) 0%,
    rgba(80,140,255,.14) 45%,
    rgba(80,140,255,.1) 100%);
  border-color: rgba(80,140,255,.32);
  box-shadow: inset 0 0 6px rgba(80,140,255,.18);
  color: rgba(225,245,255,.92);
}
.tw-icon { font-size: 13px; flex-shrink: 0; }
.tw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- SYSTEM TRAY ---- */
.tb-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 8px;
  height: 32px;
  border-left: 1px solid rgba(255,255,255,.08);
  margin-left: 4px;
  flex-shrink: 0;
}
.tray-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: rgba(160,205,255,.5);
}
.tray-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cf08a;
  box-shadow: 0 0 5px rgba(80,240,130,.7);
  animation: dot-pulse 2.5s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.tb-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-left: 1px solid rgba(255,255,255,.07);
  padding-left: 8px;
}
#tbTime { font-size: 11.5px; color: rgba(220,238,255,.85); line-height: 1.2; }
#tbDate { font-size: 9.5px; color: rgba(160,200,255,.4); line-height: 1.2; }

/* ====================================================
   SIDE DOT NAV
   ==================================================== */
.side-nav {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
}
.side-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(120,180,255,.25);
  border: 1px solid rgba(120,180,255,.35);
  display: block;
  position: relative;
  transition: background .2s, border-color .2s, transform .2s;
}
.side-dot::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(8,15,40,.9);
  border: 1px solid rgba(60,100,220,.35);
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: rgba(185,215,255,.75);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.side-dot:hover::before,
.side-dot.active::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.side-dot.active {
  background: rgba(80,150,255,.8);
  border-color: rgba(120,190,255,.7);
  box-shadow: 0 0 6px rgba(80,150,255,.5);
  transform: scale(1.3);
}

/* ====================================================
   PROGRESS BAR
   ==================================================== */
#progressBar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(to right, #3a7fff, #7ac8ff);
  box-shadow: 0 0 6px rgba(80,160,255,.6);
  z-index: 10000;
  width: 0;
  transition: width .1s linear;
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 700px) {
  .desktop { padding: 0 14px; }
  .desktop-bg { flex-direction: column-reverse; align-items: flex-start; padding-top: 3.5rem; }
  .desktop-icons { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .desktop-name { font-size: 2.6rem; }
  .about-layout,
  .contact-layout,
  .edu-body { grid-template-columns: 1fr; }
  .explorer-header { display: none; }
  .proj-row { grid-template-columns: 28px 1fr; }
  .pr-type, .pr-link { display: none; }
  .tray-status { display: none; }
  .tb-win { min-width: 70px; font-size: 10.5px; }
}