/* =============================================================================================
   skins.css — retro desktop skins beyond XP.  Two engines:
     - CLASSIC 3D grey  ->  data-theme = win311 | win95 | win98
     - AERO glass       ->  data-theme = aero-vista | aero-7
   These re-skin the SAME chrome xp.css themes. IMPORTANT: xp.css does TWO jobs — it styles the
   chrome AND un-hides parts that are display:none by default (.xp-start, .xp-tray, .xp-showdesk,
   .desk-shortcuts) and converts the floating .desk-dock into a full-width bottom taskbar. Every
   retro skin MUST repeat those visibility toggles, or the Start button / clock / taskbar vanish.
   Colours are the authentic Microsoft system values (3D face #C0C0C0, caption navy #000080, the
   98 gradient to #1084D0, teal #008080 desktop; Aero #3399FF highlight + glass frames).
   ============================================================================================= */

/* =====================================================================
   SHARED: un-hide the chrome for every retro skin (mirrors xp.css)
   ===================================================================== */
:root[data-theme="win311"] #scrim, :root[data-theme^="win9"] #scrim,
:root[data-theme^="aero-"] #scrim,
:root[data-theme="win311"] #topbar, :root[data-theme^="win9"] #topbar, :root[data-theme^="aero-"] #topbar,
:root[data-theme="win311"] #statusline, :root[data-theme^="win9"] #statusline, :root[data-theme^="aero-"] #statusline { display: none; }
:root[data-theme="win311"] #main, :root[data-theme^="win9"] #main, :root[data-theme^="aero-"] #main { top: 0; padding: 0; }

:root[data-theme="win311"] .xp-start, :root[data-theme^="win9"] .xp-start, :root[data-theme^="aero-"] .xp-start { display: inline-flex; }
:root[data-theme="win311"] .xp-tray, :root[data-theme^="win9"] .xp-tray, :root[data-theme^="aero-"] .xp-tray { display: flex; }
:root[data-theme="win311"] .xp-showdesk, :root[data-theme^="win9"] .xp-showdesk, :root[data-theme^="aero-"] .xp-showdesk { display: inline-flex; }
:root[data-theme="win311"] .desk-shortcuts, :root[data-theme^="win9"] .desk-shortcuts, :root[data-theme^="aero-"] .desk-shortcuts { display: block; }
:root[data-theme="win311"] .win-btn svg, :root[data-theme^="win9"] .win-btn svg, :root[data-theme^="aero-"] .win-btn svg { display: block; }
/* 3.11 predates the Start menu — hide only its button, keep the taskbar for usability */
:root[data-theme="win311"] .xp-start { visibility: hidden; }

/* =====================================================================
   PART 1 — CLASSIC 3D GREY  (Windows 3.11 / 95 / 98)
   ===================================================================== */
:root[data-theme="win311"], :root[data-theme="win95"], :root[data-theme="win98"] {
  --c-face: #c0c0c0; --c-face-lt: #d4d0c8;
  --c-hi: #ffffff; --c-lt: #dfdfdf; --c-sh: #808080; --c-dk: #000000;
  --c-cap-a: #000080; --c-cap-b: #1084d0; --c-cap-in: #808080; --c-cap-txt: #ffffff;
  --c-win: #ffffff; --c-txt: #000000; --c-hl: #000080; --c-desk: #008080;
  --c-font: Tahoma, "MS Sans Serif", Geneva, sans-serif;
  --sans: var(--c-font); --accent: #000080; --accent-dim: #c9c9dd;
  color-scheme: light;
}
:root[data-theme="win311"] { --c-desk: #007c7c; }

:root[data-theme="win311"] body, :root[data-theme^="win9"] body { font-family: var(--c-font); font-size: 12px; }
:root[data-theme="win311"] #bg, :root[data-theme="win95"] #bg, :root[data-theme="win98"] #bg {
  background: var(--c-desk) !important; background-image: none !important;
}
:root[data-theme="win311"] .desk-wallpaper, :root[data-theme^="win9"] .desk-wallpaper { background: transparent; overflow: hidden; padding: 8px 8px 38px; }

/* ---- Windows ---- */
:root[data-theme="win311"] .win, :root[data-theme^="win9"] .win {
  background: var(--c-face); border: 0; border-radius: 0; padding: 3px; overflow: hidden;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh);
}
:root[data-theme="win311"] .win-titlebar, :root[data-theme^="win9"] .win-titlebar {
  height: 20px; border-radius: 0; padding: 0 2px 0 4px; gap: 4px;
  background: var(--c-cap-a); color: var(--c-cap-txt); border-bottom: 0;
}
:root[data-theme="win98"] .win-titlebar { background: linear-gradient(90deg, var(--c-cap-a), var(--c-cap-b)); }
:root[data-theme="win311"] .win:not(.active) .win-titlebar, :root[data-theme^="win9"] .win:not(.active) .win-titlebar { background: var(--c-cap-in); color: #d4d0c8; }
:root[data-theme="win98"] .win:not(.active) .win-titlebar { background: linear-gradient(90deg, #808080, #b5b5b5); }
:root[data-theme="win311"] .win-title, :root[data-theme^="win9"] .win-title {
  font-weight: 700; font-size: 12px; letter-spacing: 0; text-shadow: none; color: #fff;
}
:root[data-theme="win311"] .win-title { justify-content: center; text-align: center; }

/* Title-bar buttons: small raised grey squares. Close is grey too (95+), NOT red. */
:root[data-theme="win311"] .win-controls, :root[data-theme^="win9"] .win-controls { gap: 2px; }
:root[data-theme="win311"] .win-btn, :root[data-theme^="win9"] .win-btn {
  width: 18px; height: 16px; border-radius: 0; color: #000; background: var(--c-face); padding: 0;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh);
}
:root[data-theme="win311"] .win-btn:active, :root[data-theme^="win9"] .win-btn:active {
  box-shadow: inset -1px -1px 0 var(--c-hi), inset 1px 1px 0 var(--c-dk), inset -2px -2px 0 var(--c-lt), inset 2px 2px 0 var(--c-sh);
}
:root[data-theme="win311"] .win-btn svg, :root[data-theme^="win9"] .win-btn svg { width: 9px; height: 9px; }
:root[data-theme^="win9"] .win-btn.close { background: var(--c-face); color: #000; }
:root[data-theme^="win9"] .win-btn.close:hover { background: #d4d0c8; color: #000; }

:root[data-theme="win311"] .win-body, :root[data-theme^="win9"] .win-body { background: var(--c-face); color: #000; }
:root[data-theme="win311"] .win-toolbar, :root[data-theme^="win9"] .win-toolbar {
  background: var(--c-face); border-bottom: 1px solid var(--c-sh); box-shadow: inset 0 -1px 0 var(--c-hi);
}

/* sunken white "paper" fields */
:root[data-theme="win311"] .win-scroll, :root[data-theme^="win9"] .win-scroll { background: var(--c-win); color: var(--c-txt); }
:root[data-theme="win311"] .nt-input, :root[data-theme^="win9"] .nt-input,
:root[data-theme="win311"] input, :root[data-theme^="win9"] input,
:root[data-theme="win311"] textarea, :root[data-theme^="win9"] textarea,
:root[data-theme="win311"] select, :root[data-theme^="win9"] select {
  background: var(--c-win); color: var(--c-txt); border: 0; border-radius: 0; padding: 3px 5px;
  box-shadow: inset 1px 1px 0 var(--c-sh), inset -1px -1px 0 var(--c-hi), inset 2px 2px 0 var(--c-dk);
}

/* ---- Buttons ---- */
:root[data-theme="win311"] .btn, :root[data-theme^="win9"] .btn {
  background: var(--c-face); color: #000; border: 0; border-radius: 0;
  font-family: var(--c-font); font-size: 12px; padding: 4px 12px; min-height: 23px;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh);
}
:root[data-theme="win311"] .btn:active, :root[data-theme^="win9"] .btn:active,
:root[data-theme="win311"] .btn.primary:active, :root[data-theme^="win9"] .btn.primary:active {
  box-shadow: inset -1px -1px 0 var(--c-hi), inset 1px 1px 0 var(--c-dk), inset -2px -2px 0 var(--c-lt), inset 2px 2px 0 var(--c-sh);
}
:root[data-theme="win311"] .btn.primary, :root[data-theme^="win9"] .btn.primary { font-weight: 700; outline: 1px solid #000; outline-offset: -4px; }
:root[data-theme="win311"] .btn.icon, :root[data-theme^="win9"] .btn.icon,
:root[data-theme="win311"] .btn.ghost, :root[data-theme^="win9"] .btn.ghost { box-shadow: none; background: transparent; }
:root[data-theme="win311"] .btn.icon:active, :root[data-theme^="win9"] .btn.icon:active { box-shadow: inset 1px 1px 0 var(--c-sh), inset -1px -1px 0 var(--c-hi); }

/* ---- Taskbar (.desk-dock -> full-width bottom bar) ---- */
:root[data-theme="win311"] .desk-dock, :root[data-theme^="win9"] .desk-dock {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; transform: none;
  height: 30px; border-radius: 0; padding: 2px 3px; gap: 4px; z-index: 100000;
  background: var(--c-face); border: 0; backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--c-hi), inset 0 2px 0 var(--c-lt), 0 -1px 2px rgba(0,0,0,.3);
  display: flex; align-items: center;
}
:root[data-theme="win311"] .dock-apps, :root[data-theme^="win9"] .dock-apps { display: flex; align-items: center; gap: 3px; flex: 1; overflow-x: auto; }
:root[data-theme="win311"] .dock-item, :root[data-theme^="win9"] .dock-item {
  border-radius: 0; background: var(--c-face); color: #000; height: 22px; width: auto; padding: 0 8px 0 5px;
  font-size: 11px; transform: none; gap: 4px;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh);
}
:root[data-theme="win311"] .dock-item:hover, :root[data-theme^="win9"] .dock-item:hover { transform: none; background: var(--c-face-lt); }
:root[data-theme="win311"] .dock-item.active, :root[data-theme^="win9"] .dock-item.active {
  box-shadow: inset -1px -1px 0 var(--c-hi), inset 1px 1px 0 var(--c-dk), inset -2px -2px 0 var(--c-lt), inset 2px 2px 0 var(--c-sh);
}
:root[data-theme="win311"] .dock-item svg, :root[data-theme^="win9"] .dock-item svg { width: 16px; height: 16px; color: #000; }
:root[data-theme="win311"] .dock-label, :root[data-theme^="win9"] .dock-label { display: inline; color: #000; }
:root[data-theme="win311"] .dock-dot, :root[data-theme^="win9"] .dock-dot { display: none; }

/* ---- Start button ---- */
:root[data-theme^="win9"] .xp-start {
  background: var(--c-face); color: #000; border-radius: 0; height: 24px; padding: 0 8px 0 5px; gap: 4px;
  font-weight: 700; font-style: normal; font-family: var(--c-font); font-size: 13px;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh);
}
:root[data-theme^="win9"] .xp-start:active, :root[data-theme^="win9"] .xp-start.open {
  box-shadow: inset -1px -1px 0 var(--c-hi), inset 1px 1px 0 var(--c-dk), inset -2px -2px 0 var(--c-lt), inset 2px 2px 0 var(--c-sh);
}
:root[data-theme^="win9"] .xp-flag { transform: none; }

/* ---- Start menu ---- */
:root[data-theme^="win9"] .xp-startmenu {
  background: var(--c-face); border: 0; border-radius: 0;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh), 3px 3px 8px rgba(0,0,0,.5);
}
:root[data-theme^="win9"] .xp-sm-left { background: var(--c-cap-a); }
:root[data-theme="win98"] .xp-sm-left { background: linear-gradient(180deg, #1084d0, #000080); }
:root[data-theme^="win9"] .xp-sm-item { border-radius: 0; color: #000; }
:root[data-theme^="win9"] .xp-sm-item:hover { background: var(--c-hl); color: #fff; }

/* ---- Tray + clock ---- */
:root[data-theme="win311"] .xp-tray, :root[data-theme^="win9"] .xp-tray {
  background: var(--c-face); border-radius: 0; margin-left: auto; padding: 0 6px; gap: 6px;
  box-shadow: inset 1px 1px 0 var(--c-sh), inset -1px -1px 0 var(--c-hi);
}
:root[data-theme="win311"] .xp-clock, :root[data-theme^="win9"] .xp-clock { color: #000; font-size: 11px; }
:root[data-theme="win311"] .xp-tray-ico svg, :root[data-theme^="win9"] .xp-tray-ico svg { color: #000; }

:root[data-theme="win311"] ::selection, :root[data-theme^="win9"] ::selection { background: var(--c-hl); color: #fff; }
:root[data-theme="win311"] .xp-welcome, :root[data-theme^="win9"] .xp-welcome { background: var(--c-desk); }
:root[data-theme="win311"] .xp-wel-tile, :root[data-theme^="win9"] .xp-wel-tile {
  background: var(--c-face); border-radius: 0;
  box-shadow: inset 1px 1px 0 var(--c-hi), inset -1px -1px 0 var(--c-dk), inset 2px 2px 0 var(--c-lt), inset -2px -2px 0 var(--c-sh), 3px 3px 10px rgba(0,0,0,.4);
}
:root[data-theme="win311"] .xp-wel-name, :root[data-theme^="win9"] .xp-wel-name,
:root[data-theme="win311"] .xp-wel-hint, :root[data-theme^="win9"] .xp-wel-hint { color: #000; }

/* =====================================================================
   PART 2 — AERO GLASS  (Windows Vista / 7)
   ===================================================================== */
:root[data-theme="aero-vista"], :root[data-theme="aero-7"] {
  --a-glass: rgba(202, 225, 245, 0.55); --a-glass-hi: rgba(255, 255, 255, 0.75);
  --a-frame-line: rgba(120, 160, 205, 0.85); --a-cap-txt: #0a1a2f;
  --a-face: #f0f4f9; --a-face-2: #e4ecf5; --a-txt: #10161c;
  --a-hl: #3399ff; --a-btn-line: #7ba0c9;
  --a-taskbar: rgba(28, 42, 64, 0.62);
  --a-orb-a: #eafaff; --a-orb-b: #37a4e6; --a-orb-c: #0b5aa0;
  --a-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: var(--a-font); --accent: #2f7fd6; --accent-dim: #d6e8fb;
  color-scheme: light;
}
:root[data-theme="aero-vista"] { --a-desk-a: #0a3d2e; --a-desk-b: #1f8f5f; --a-desk-c: #082b3a; }
:root[data-theme="aero-7"]     { --a-desk-a: #123a6b; --a-desk-b: #2f79c9; --a-desk-c: #0a2247; }

:root[data-theme^="aero-"] body { font-family: var(--a-font); font-size: 13px; }
:root[data-theme^="aero-"] #bg {
  background-image:
    radial-gradient(60% 40% at 75% 18%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    radial-gradient(120% 90% at 30% 0%, var(--a-desk-b) 0%, var(--a-desk-a) 55%, var(--a-desk-c) 100%) !important;
}
:root[data-theme^="aero-"] .desk-wallpaper { background: transparent; overflow: hidden; padding: 12px 12px 48px; }

/* ---- Glass windows ---- */
:root[data-theme^="aero-"] .win {
  background: var(--a-face); border: 1px solid var(--a-frame-line); border-radius: 8px 8px 6px 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 14px 40px rgba(0,0,0,.45); overflow: hidden;
}
:root[data-theme^="aero-"] .win-titlebar {
  height: 30px; border-radius: 0; padding: 0 6px 0 10px; gap: 8px; color: var(--a-cap-txt);
  background: linear-gradient(180deg, var(--a-glass-hi) 0%, var(--a-glass) 46%, rgba(190,214,238,.5) 54%, rgba(214,231,247,.62) 100%);
  border-bottom: 1px solid rgba(120,160,205,.5);
}
:root[data-theme^="aero-"] .win:not(.active) .win-titlebar { filter: saturate(.6) brightness(1.03); opacity: .9; }
:root[data-theme^="aero-"] .win-title { font-weight: 600; font-size: 12px; color: var(--a-cap-txt); text-shadow: 0 1px 2px rgba(255,255,255,.8); }

:root[data-theme^="aero-"] .win-controls { gap: 3px; }
:root[data-theme^="aero-"] .win-btn {
  width: 27px; height: 20px; border-radius: 4px; color: #16324f; padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(206,226,246,.65));
  border: 1px solid rgba(120,160,205,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
:root[data-theme^="aero-"] .win-btn:hover { background: linear-gradient(180deg, #ffffff, #d6ecff); box-shadow: 0 0 8px rgba(90,170,255,.8), inset 0 1px 0 #fff; }
:root[data-theme^="aero-"] .win-btn svg { width: 12px; height: 12px; }
:root[data-theme^="aero-"] .win-btn.close {
  background: linear-gradient(180deg, #ffb0a0, #e0442c 55%, #b5230f); border-color: #d16a5a; color: #fff;
}
:root[data-theme^="aero-"] .win-btn.close:hover { background: linear-gradient(180deg, #ffc7b8, #f05a40 55%, #cc2f14); box-shadow: 0 0 10px rgba(255,90,60,.8); }

:root[data-theme^="aero-"] .win-body { background: var(--a-face); color: var(--a-txt); }
:root[data-theme^="aero-"] .win-toolbar { background: linear-gradient(180deg, #f6f9fd, #e7eef7); border-bottom: 1px solid #cdd9e8; }

/* ---- Glossy buttons ---- */
:root[data-theme^="aero-"] .btn {
  background: linear-gradient(180deg, #fdfefe, #dbe6f4); color: #10161c;
  border: 1px solid var(--a-btn-line); border-radius: 4px; font-family: var(--a-font); padding: 5px 13px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 10px -8px rgba(120,160,205,.4);
}
:root[data-theme^="aero-"] .btn:hover { border-color: #4c9be8; background: linear-gradient(180deg, #ffffff, #e4f1ff); box-shadow: 0 0 7px rgba(90,170,255,.55), inset 0 1px 0 #fff; }
:root[data-theme^="aero-"] .btn:active { background: linear-gradient(180deg, #cfe0f5, #e4ecf5); box-shadow: inset 0 2px 4px rgba(60,110,170,.4); }
:root[data-theme^="aero-"] .btn.primary { border-color: #2f7fd6; background: linear-gradient(180deg, #eaf5ff, #b9dbff 55%, #98c8fb); font-weight: 600; }
:root[data-theme^="aero-"] .btn.icon, :root[data-theme^="aero-"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme^="aero-"] .btn.icon:hover, :root[data-theme^="aero-"] .btn.ghost:hover { background: rgba(255,255,255,.5); border-color: rgba(120,160,205,.5); }

:root[data-theme^="aero-"] .nt-input, :root[data-theme^="aero-"] input, :root[data-theme^="aero-"] textarea, :root[data-theme^="aero-"] select {
  background: #fff; color: var(--a-txt); border: 1px solid #a9c0da; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(80,120,165,.22);
}
:root[data-theme^="aero-"] .nt-input:focus, :root[data-theme^="aero-"] input:focus { border-color: #4c9be8; box-shadow: 0 0 6px rgba(90,170,255,.6), inset 0 1px 2px rgba(80,120,165,.2); outline: none; }

/* ---- Glass taskbar ---- */
:root[data-theme^="aero-"] .desk-dock {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; transform: none;
  height: 40px; border-radius: 0; border: 0; padding: 3px 6px; gap: 5px; z-index: 100000;
  background: var(--a-taskbar); border-top: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 12px 20px -12px rgba(255,255,255,.35), 0 -1px 6px rgba(0,0,0,.4);
  backdrop-filter: blur(12px) saturate(1.2); display: flex; align-items: center;
}
:root[data-theme="aero-7"] .desk-dock { height: 44px; }
:root[data-theme^="aero-"] .dock-apps { display: flex; align-items: center; gap: 5px; flex: 1; overflow-x: auto; }
:root[data-theme^="aero-"] .dock-item {
  border-radius: 4px; color: #eaf2fb; height: 32px; width: auto; padding: 0 10px; transform: none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid transparent;
}
:root[data-theme^="aero-"] .dock-item:hover { transform: none; background: linear-gradient(180deg, rgba(140,200,255,.32), rgba(90,160,235,.16)); border-color: rgba(150,200,255,.5); box-shadow: inset 0 0 10px rgba(120,190,255,.4); }
:root[data-theme^="aero-"] .dock-item.active { background: linear-gradient(180deg, rgba(180,220,255,.4), rgba(120,180,240,.2)); border-color: rgba(180,220,255,.6); box-shadow: inset 0 0 12px rgba(150,205,255,.5); }
:root[data-theme^="aero-"] .dock-item svg { color: #dcebfb; }
:root[data-theme="aero-vista"] .dock-label { display: inline; color: #eaf2fb; }
:root[data-theme="aero-7"] .dock-label { display: none; }
:root[data-theme="aero-7"] .dock-item { width: 40px; justify-content: center; padding: 0; }
:root[data-theme^="aero-"] .dock-dot { display: none; }

/* ---- Pearl Start orb ---- */
:root[data-theme^="aero-"] .xp-start {
  width: 46px; min-width: 46px; height: 34px; padding: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, var(--a-orb-a) 0%, var(--a-orb-b) 45%, var(--a-orb-c) 100%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 10px rgba(80,170,255,.6), inset 0 1px 3px rgba(255,255,255,.9), inset 0 -6px 10px rgba(0,40,90,.5);
  margin: -3px 4px 0 2px; position: relative; align-items: center; justify-content: center;
}
:root[data-theme="aero-7"] .xp-start { height: 38px; width: 50px; min-width: 50px; }
:root[data-theme^="aero-"] .xp-start:hover { box-shadow: 0 0 16px rgba(120,200,255,.9), inset 0 1px 3px #fff, inset 0 -6px 10px rgba(0,40,90,.5); }
:root[data-theme^="aero-"] .xp-start .xp-flag { transform: scale(1.15); filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
:root[data-theme^="aero-"] .xp-start > span:not(.xp-flag) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Glass Start menu ---- */
:root[data-theme^="aero-"] .xp-startmenu {
  background: linear-gradient(180deg, rgba(28,42,64,.94), rgba(20,32,52,.96));
  border: 1px solid rgba(150,190,235,.5); border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); backdrop-filter: blur(14px); color: #eef5fc;
}
:root[data-theme^="aero-"] .xp-sm-right { background: rgba(255,255,255,.06); }
:root[data-theme^="aero-"] .xp-sm-left { background: transparent; }
:root[data-theme^="aero-"] .xp-sm-item { color: #eef5fc; border-radius: 3px; }
:root[data-theme^="aero-"] .xp-sm-item:hover { background: linear-gradient(180deg, rgba(140,200,255,.35), rgba(90,160,235,.2)); }
:root[data-theme^="aero-"] .xp-sm-cat { color: #bcd6f2; }

/* ---- Tray + clock ---- */
:root[data-theme^="aero-"] .xp-tray { background: transparent; box-shadow: none; margin-left: auto; align-items: center; gap: 8px; padding: 0 10px; }
:root[data-theme^="aero-"] .xp-clock { color: #eaf2fb; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
:root[data-theme^="aero-"] .xp-tray-ico svg { color: #dcebfb; }

:root[data-theme^="aero-"] ::selection { background: var(--a-hl); color: #fff; }
:root[data-theme^="aero-"] .xp-welcome { background: radial-gradient(120% 90% at 30% 0%, var(--a-desk-b), var(--a-desk-a) 60%, var(--a-desk-c)); }
:root[data-theme^="aero-"] .xp-wel-tile {
  background: linear-gradient(180deg, rgba(28,42,64,.85), rgba(20,32,52,.9));
  border: 1px solid rgba(150,190,235,.5); border-radius: 10px; backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}