/* ============================================
   Windows XP (Luna) Skin — Pixelated Friendly
   Scope with .theme-xp so you can toggle later
===============================================*/

:root {
  --xp-blue-1: #3a6ea5;
  --xp-blue-2: #2b4e7a;
  --xp-blue-3: #0c2d5a;     /* deep border tone */
  --xp-title-border-top: #4f81bd;
  --xp-title-border-bottom: #062c58;
  --xp-surface: #ece9d8;    /* window background */
  --xp-inner:   #f5f4ea;
  --xp-outline: #9a9a9a;
  --xp-shadow:  rgba(0,0,0,.45);

  --xp-btn-border: #7f9db9;
  --xp-btn-hi:     #ffffff;
  --xp-btn-mid:    #e8e8e8;
  --xp-btn-low:    #d5d5d5;
  --xp-btn-press:  #c2c2c2;

  --xp-close-hi:   #ffb6b6;
  --xp-close-mid:  #ff7b7b;
  --xp-close-low:  #d94a4a;

  --xp-green-hi:   #b2e59a;
  --xp-green-mid:  #7cd16f;
  --xp-green-low:  #49a74b;

  --xp-yellow-hi:  #ffe8a6;
  --xp-yellow-mid: #ffd36e;
  --xp-yellow-low: #e6a83f;

  --taskbar-blue-1:#3c75b1;
  --taskbar-blue-2:#235288;
}

/* keep tiny bitmaps crispy */
.theme-xp img, 
.theme-xp canvas, 
.theme-xp iframe,
.theme-xp .icon img {
  image-rendering: pixelated;
}

/* ============== WINDOW CHROME ============== */
.theme-xp .win{
  background: var(--xp-surface);
  color: #000;
  border-radius: 5px;
  border: 1px solid var(--xp-blue-3);
  box-shadow: 0 10px 24px var(--xp-shadow);
  overflow: hidden; /* keep titlebar radius clean */
}

/* subtle inner bevel frame */
.theme-xp .win .content{
  background: var(--xp-inner);
  border: 1px solid #fff;
  border-right-color: #c9c7bd;
  border-bottom-color: #c9c7bd;
  margin: 6px;
  padding: 10px;
  max-height: calc(60vh - 12px);
  overflow: auto;
}

/* TITLEBAR */
.theme-xp .win .titlebar{
  height: 26px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  border-top: 1px solid var(--xp-title-border-top);
  border-bottom: 1px solid var(--xp-title-border-bottom);
  background: linear-gradient(to bottom, var(--xp-blue-1), var(--xp-blue-2));
  color: #fff;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2px;
  user-select: none;
}

/* left area can include a tiny icon + title text */
.theme-xp .win .titlebar .title{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-xp .win .titlebar .title img{
  width: 16px; height: 16px;
  border-radius: 3px;
}

/* ============ WINDOW BUTTONS (XP) ============ */
.theme-xp .win .winbtns{
  display: flex;
  gap: 5px;
}
.theme-xp .win .winbtn{
  width: 19px; height: 19px;
  border-radius: 3px;
  border: 1px solid var(--xp-btn-border);
  background: linear-gradient(to bottom, var(--xp-btn-hi), var(--xp-btn-mid) 55%, var(--xp-btn-low));
  box-shadow: inset 0 1px 0 #fff;
  display: grid; place-items: center;
  cursor: pointer;
}

/* glyphs via SVG data URIs */
.theme-xp .win .winbtn.xp-min{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
  <rect x='3' y='10' width='10' height='2' fill='%23000'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.theme-xp .win .winbtn.xp-max{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
  <rect x='3' y='3' width='10' height='10' fill='none' stroke='%23000' stroke-width='1'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.theme-xp .win .winbtn.xp-restore{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
  <rect x='5' y='5' width='8' height='6' fill='none' stroke='%23000' stroke-width='1'/>\
  <rect x='3' y='3' width='8' height='6' fill='none' stroke='%23000' stroke-width='1'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.theme-xp .win .winbtn.xp-close{
  background: linear-gradient(to bottom, var(--xp-close-hi), var(--xp-close-mid) 55%, var(--xp-close-low));
  border-color: #b14a4a;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'>\
  <path d='M4 4 L12 12 M12 4 L4 12' stroke='%23000' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: center;
}

/* hover/active states */
.theme-xp .win .winbtn:hover{
  filter: brightness(1.05);
}
.theme-xp .win .winbtn:active{
  background: linear-gradient(to bottom, var(--xp-btn-mid), var(--xp-btn-press));
}
.theme-xp .win .winbtn.xp-close:active{
  filter: brightness(.93);
}

/* ACTIVE window title emphasis (optional) */
.theme-xp .win.active .titlebar{
  background: linear-gradient(to bottom, #4b85c5, #2b4e7a);
}

/* ============== RESIZE GRIP ============== */
.theme-xp .win .xp-resize-grip{
  position: absolute;
  right: 4px; bottom: 4px;
  width: 16px; height: 16px;
  background-image:
    radial-gradient(#9a9a9a 45%, transparent 46%),
    radial-gradient(#9a9a9a 45%, transparent 46%),
    radial-gradient(#9a9a9a 45%, transparent 46%);
  background-size: 4px 4px;
  background-position: 0 12px, 4px 8px, 8px 4px;
  background-repeat: no-repeat;
  opacity: .9;
  pointer-events: auto;
  cursor: nwse-resize;
}

/* ============== TASKBAR (OPTIONAL XP LOOK) ============== */
.theme-xp #taskbar{
  background: linear-gradient(to bottom, var(--taskbar-blue-1), var(--taskbar-blue-2));
  border-top: 1px solid #1b3a66;
  color: #fff;
  height: 40px;
}
.theme-xp #startBtn{
  background: linear-gradient(to bottom, var(--xp-green-hi), var(--xp-green-mid) 60%, var(--xp-green-low));
  border: 1px solid #2f6a35;
  color: #000;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
  border-radius: 4px;
  padding: 6px 12px 5px 28px;
  image-rendering: pixelated;
}
.theme-xp #taskApps .task{
  background: linear-gradient(to bottom, #fefefe, #dfdfdf);
  border: 1px solid #7f9db9;
  border-radius: 3px;
  padding: 3px 10px;
  color: #000;
}
.theme-xp #clock{
  color: #fff;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
}

/* keep your retro scanlines/noise layers above/below where you had them */
/* === Player Layout === */
body.theme-xp #player95 {
  display: grid;
  grid-template-columns: 1fr 240px;   /* canvas | playlist */
  grid-template-rows: 1fr auto auto;  /* stage | controls | status */
  gap: 6px;
  padding: 40px 12px 12px;
  min-height: 400px;

  background: linear-gradient(#e8f0ff, #c7dafd 35%, #a6c2f7);
  border: 1px solid #7aa0e6;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #3a68c0, 2px 3px 8px rgba(0,0,0,.25);
  font-family: Tahoma, Verdana, sans-serif;
  color: #012;
  position: relative;
}

/* XP top band (tabs) */
body.theme-xp #player95::before {
  content: "Now Playing   •   Library   •   Rip   •   Burn   •   Sync   •   Guide";
  position: absolute; top: 0; left: 0; right: 0; height: 28px;
  line-height: 28px; padding-left: 12px;
  color: #f3f7ff; font-weight: bold; font-size: 12px;
  text-shadow: 0 1px 0 #1e3f83;
  background: linear-gradient(#5e84d6,#3e6fcb);
  border-bottom: 1px solid #2b57b4;
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

/* === Visualizer === */
body.theme-xp #visualizer {
  grid-column: 1; grid-row: 1;
  background: #000;
  border: 1px solid #0a2f85;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #183b78;
}

/* === Playlist Sidebar === */
body.theme-xp #playlist {
  grid-column: 2; grid-row: 1 / span 3;
  margin: 0; padding: 8px;
  list-style: none;
  background: linear-gradient(#d9e6ff, #b8d0ff);
  border-left: 1px solid #7aa0e6;
  border-radius: 6px;
  overflow-y: auto;
}
body.theme-xp #playlist li {
  padding: 6px 8px; margin: 2px 0;
  background: #fff;
  border: 1px solid #a8c0f4;
  border-radius: 4px;
  font-size: 12px;
}
body.theme-xp #playlist li.playing {
  background: #eaf3ff;
  border-color: #6ea2ff;
  box-shadow: 0 0 0 1px #6ea2ff inset;
}

/* === Controls === */
body.theme-xp #player95 .controls {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(#dbe8ff,#c4d8ff);
  border: 1px solid #7aa0e6;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: inset 0 1px 0 #fff;
}

/* Transport buttons */
body.theme-xp #player95 .controls button {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid #5c86d1;
  background: radial-gradient(circle at 30% 30%, #fff 0 35%, #b9d0ff 36% 70%, #86aef3 71% 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,.25);
  font-size: 0;
  position: relative;
  cursor: pointer;
}
#prevBtn::before { content: "◄◄"; }
#playBtn::before { content: "►"; }
#nextBtn::before { content: "►►"; }
#player95 .controls button::before {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: bold 13px/36px Tahoma, sans-serif;
  color: #0d2a73; text-shadow: 0 1px 0 #fff;
}

/* === Sliders === */
body.theme-xp input[type="range"] {
  -webkit-appearance: none; height: 6px;
  background: linear-gradient(90deg,#7fb0ff,#7bfd7b);
  border: 1px solid #6e9fed;
  border-radius: 5px;
  cursor: pointer;
}
body.theme-xp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid #6e9fed;
  background: radial-gradient(circle at 30% 30%, #fff, #cfe0ff);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,.2);
}

/* === Status Bar === */
body.theme-xp .status-bar {
  grid-column: 1; grid-row: 3;
  display: flex; justify-content: space-between;
  padding: 3px 8px;
  background: #f3f6ff;
  border: 1px solid #7aa0e6;
  border-radius: 6px;
  font-size: 11px; color: #000;
  box-shadow: inset 0 1px 0 #fff;
}