/* =========================================================================
   XP Luna — authentic Windows XP chrome, recolorable via CSS vars.
   Pairs with the Tahmures design system: DM Mono / DM Serif appear INSIDE
   window content; the chrome itself uses Tahoma (authentic XP).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  /* --- Tweakable chrome accents --- */
  --xp-title-a:   #0a60e8;   /* title bar gradient, lit */
  --xp-title-b:   #2f8bff;
  --xp-title-c:   #1556d8;
  --xp-title-edge:#003fc9;
  --xp-start-a:   #59b03a;   /* Start button green (Luna default) */
  --xp-start-b:   #3f9624;
  --xp-start-c:   #2f7d1b;
  --xp-start-text:#ffffff;
  --xp-radius:    8px;       /* rounded Luna; tweak to 0 for sharp */
  --xp-taskbar-a: #245edb;
  --xp-taskbar-b: #3f8cf3;
  --xp-taskbar-c: #1941a5;

  /* Tahmures design-system tokens used in content */
  --tg-cyan:#00AEEF; --tg-magenta:#EC008C; --tg-yellow:#FFD700; --tg-black:#231F20;
  --tg-grey-80:#333; --tg-grey-50:#808080; --tg-grey-20:#CCC; --tg-grey-5:#F2F2F2;
  --tg-serif:'DM Serif Display', Georgia, serif;
  --tg-mono:'DM Mono', ui-monospace, Consolas, monospace;

  --xp-face:#ece9d8;         /* classic window face */
  --xp-tahoma:'Tahoma','Trebuchet MS', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin:0; height:100%; overflow:hidden;
  font-family:var(--xp-tahoma);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  cursor: default;
}
#root { height:100%; }

/* =========================================================================
   DESKTOP
   ========================================================================= */
.desktop {
  position:fixed; inset:0;
  background:#5a7edc;
  overflow:hidden;
}
.desktop__wall {
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%, #6f97e8 0%, #4f74cf 46%, #2f4ea8 100%);
}
.desktop__bliss {
  position:absolute; inset:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.desktop__portrait {
  position:absolute; inset:0;
  background-position:center 18%;
  background-size:cover;
  background-repeat:no-repeat;
  mix-blend-mode:luminosity;
  opacity:.16;
  filter:grayscale(1) contrast(1.05);
}
.desktop__vignette {
  position:absolute; inset:0;
  background:radial-gradient(120% 110% at 50% 40%, transparent 52%, rgba(10,24,64,.45) 100%);
  pointer-events:none;
}
.desktop__memphis {
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center 46%;
  background-size:min(74%, 1080px) auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  pointer-events:none;
}

/* Desktop icons -------------------------------------------------------- */
.dicon {
  position:absolute;
  width:84px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:4px 2px 5px;
  text-align:center;
  cursor:default;
}
.dicon__img {
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.45));
  pointer-events:none;
}
.dicon__img img, .dicon__img svg { width:100%; height:100%; object-fit:contain; }
/* brand/app tiles (social + game shortcuts): rounded app-tile look so
   white-background icons read as proper tiles, with a faint shortcut sheen */
.dicon__img img.brand {
  border-radius:9px;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.dicon__label {
  font-size:11px; line-height:1.25; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7);
  padding:0 1px; max-width:84px;
  word-break:break-word;
}
.dicon.is-selected .dicon__label {
  background:#0a246a; text-shadow:none;
  box-shadow:0 0 0 1px #5a7edc;
}
.dicon.is-selected .dicon__img { filter:none; }
.dicon.is-selected .dicon__img::after{
  content:""; position:absolute;
}
.dicon.is-selected { }
.dicon.is-selected .dicon__img img { filter:brightness(.85) contrast(1.05); }

/* =========================================================================
   WINDOW
   ========================================================================= */
.win {
  position:absolute;
  display:flex; flex-direction:column;
  min-width:240px; min-height:140px;
  background:var(--xp-face);
  border:1px solid #0831d9;
  border-top:none;
  border-radius:var(--xp-radius) var(--xp-radius) 0 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.10),
    4px 4px 12px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.35);
  padding:0 4px 4px;
}
.win.is-max { border-radius:0; }
.win__titlebar {
  height:29px; flex:none;
  margin:0 -4px;
  border-radius:var(--xp-radius) var(--xp-radius) 0 0;
  background:
    linear-gradient(180deg,
      var(--xp-title-b) 0%, var(--xp-title-a) 8%,
      var(--xp-title-a) 42%, var(--xp-title-c) 88%, var(--xp-title-edge) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:5px;
  padding:0 4px 0 6px;
  cursor:default;
}
.win.is-max .win__titlebar { border-radius:0; }
.win.is-inactive .win__titlebar {
  background:linear-gradient(180deg,#7ba6e8 0%,#6f9ae0 50%,#5e89d6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.win__icon { width:16px; height:16px; flex:none; filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
.win__icon img, .win__icon svg { width:100%; height:100%; display:block; }
.win__title {
  flex:1; min-width:0;
  color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.01em;
  text-shadow:1px 1px 1px rgba(0,0,0,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.win.is-inactive .win__title { color:#dbe7fb; }

/* Title bar buttons --------------------------------------------------- */
.win__btns { display:flex; gap:2px; align-items:center; }
.tbtn {
  width:21px; height:21px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,40,140,.5), inset 1px 1px 1px rgba(255,255,255,.5);
  background:linear-gradient(180deg,#5e98f0 0%,#2f6fd6 50%,#1f56bd 100%);
}
.tbtn:hover { filter:brightness(1.12); }
.tbtn:active { filter:brightness(.9); }
.tbtn svg { width:9px; height:9px; }
.tbtn--close {
  background:linear-gradient(180deg,#f08a6f 0%,#e0492a 48%,#c5331b 100%);
  width:23px;
}
.tbtn--close:hover { filter:brightness(1.1); }

/* Menu / toolbar strips ----------------------------------------------- */
.win__body {
  flex:1; min-height:0;
  background:#fff;
  border:1px solid #95a3bd;
  border-top-color:#7e8ba6;
  margin-top:0;
  display:flex; flex-direction:column;
  overflow:hidden;
  position:relative;
}
.win__menubar {
  flex:none;
  background:var(--xp-face);
  display:flex; gap:2px;
  padding:2px 4px;
  font-size:11px;
  border-bottom:1px solid #d6d2bf;
}
.win__menubar span { padding:2px 7px; border-radius:2px; }
.win__menubar span:hover { background:#316ac5; color:#fff; }
.win__menubar u { text-decoration:underline; }

.win__toolbar {
  flex:none;
  background:linear-gradient(180deg,#fdfdfd,#ece9d8);
  border-bottom:1px solid #aca899;
  display:flex; align-items:center; gap:8px;
  padding:3px 8px; font-size:11px; color:#333;
  min-height:26px;
}

.win__content { flex:1; min-height:0; overflow:auto; background:#fff; }

.win__statusbar {
  flex:none;
  height:20px;
  background:var(--xp-face);
  border-top:1px solid #d6d2bf;
  display:flex; align-items:center; gap:0;
  font-size:11px; color:#333;
}
.win__statusbar .sb-cell {
  height:100%; display:flex; align-items:center; padding:0 8px;
  border:1px solid; border-color:#d6d2bf #fff #fff #d6d2bf;
  border-left:1px solid #b8b4a5;
}
.win__statusbar .sb-cell:first-child { border-left:none; }
.win__statusbar .sb-grow { flex:1; }

/* resize handle */
.win__resize {
  position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor:nwse-resize; z-index:5;
}

/* =========================================================================
   XP SCROLLBARS (webkit)
   ========================================================================= */
.xp-scroll::-webkit-scrollbar { width:17px; height:17px; }
.xp-scroll::-webkit-scrollbar-track {
  background:#f1f0e8;
  box-shadow:inset 1px 0 0 #d6d2c0;
}
.xp-scroll::-webkit-scrollbar-thumb {
  background:linear-gradient(90deg,#e6effa,#aac6f0 60%,#7aa6e6);
  border:1px solid #5b87c9; border-radius:2px;
  box-shadow:inset 1px 1px 0 #fff;
}
.xp-scroll::-webkit-scrollbar-thumb:hover { filter:brightness(1.05); }
.xp-scroll::-webkit-scrollbar-corner { background:#f1f0e8; }

/* =========================================================================
   XP FORM CONTROLS
   ========================================================================= */
.xp-btn {
  font-family:var(--xp-tahoma); font-size:11px;
  padding:3px 12px; min-width:72px;
  background:linear-gradient(180deg,#fdfefe 0%,#f1efe5 46%,#e3ddc9 100%);
  border:1px solid #707070; border-radius:3px;
  box-shadow:inset 0 0 0 1px #fff, inset 0 -10px 8px -8px rgba(0,0,0,.08);
  cursor:pointer;
}
.xp-btn:hover { border-color:#3a6ea5; box-shadow:inset 0 0 0 1px #fff, 0 0 4px rgba(58,110,165,.5); }
.xp-btn:active { background:linear-gradient(180deg,#e3ddc9,#f1efe5); box-shadow:inset 1px 1px 2px rgba(0,0,0,.2); }
.xp-btn:focus-visible { outline:1px dotted #333; outline-offset:-4px; }
.xp-input {
  font-family:var(--xp-tahoma); font-size:11px;
  padding:2px 5px; border:1px solid #7f9db9;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.12);
  background:#fff;
}

/* =========================================================================
   TASKBAR
   ========================================================================= */
.taskbar {
  position:fixed; left:0; right:0; bottom:0; height:30px; z-index:9000;
  display:flex; align-items:stretch;
  background:
    linear-gradient(180deg,
      var(--xp-taskbar-b) 0%, var(--xp-taskbar-a) 9%,
      var(--xp-taskbar-a) 52%, var(--xp-taskbar-c) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 2px 2px rgba(255,255,255,.25);
  border-top:1px solid #0b1f8c;
  font-family:var(--xp-tahoma);
}
.startbtn {
  display:flex; align-items:center; gap:6px;
  padding:0 26px 3px 11px; margin-right:8px;
  font-style:italic; font-weight:700; font-size:16px;
  color:var(--xp-start-text);
  text-shadow:1px 1px 1px rgba(0,0,0,.45);
  border:none; cursor:pointer;
  border-radius:0 11px 11px 0;
  background:
    radial-gradient(120% 140% at 30% 8%, #8fd36a 0%, var(--xp-start-a) 30%, var(--xp-start-b) 62%, var(--xp-start-c) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset -2px -3px 6px rgba(0,0,0,.25);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.startbtn::before {
  content:""; width:20px; height:20px; flex:none;
  background:radial-gradient(circle at 35% 30%,#fff 0 18%, #e23 19% 44%, #2b6 45% 70%, #18d 71% 100%);
  border-radius:50%;
  box-shadow:0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.4);
}
.startbtn:hover { filter:brightness(1.07); }
.startbtn.is-open { filter:brightness(.9); box-shadow:inset 2px 2px 6px rgba(0,0,0,.35); }

.taskbar__quick {
  display:flex; align-items:center; gap:3px; padding:0 7px 0 2px;
  border-right:1px solid rgba(0,0,0,.25);
  box-shadow:1px 0 0 rgba(255,255,255,.25);
}
.taskbar__quick .qbtn { width:18px; height:18px; cursor:pointer; opacity:.95; }
.taskbar__quick .qbtn:hover { filter:brightness(1.15); }

.taskbar__tasks {
  flex:1; display:flex; align-items:center; gap:3px;
  padding:2px 4px; overflow:hidden;
}
.taskbtn {
  height:23px; min-width:120px; max-width:170px;
  display:flex; align-items:center; gap:5px;
  padding:0 8px; cursor:pointer;
  color:#fff; font-size:11px;
  border:1px solid #2255c8; border-radius:3px;
  background:linear-gradient(180deg,#4e8bf0 0%,#3a73db 45%,#2a5fcf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 4px rgba(0,0,0,.15);
  white-space:nowrap; overflow:hidden;
}
.taskbtn img, .taskbtn svg { width:15px; height:15px; flex:none; }
.taskbtn span { overflow:hidden; text-overflow:ellipsis; }
.taskbtn:hover { filter:brightness(1.08); }
.taskbtn.is-active {
  background:linear-gradient(180deg,#1c47a8 0%,#22539e 50%,#3169c4 100%);
  box-shadow:inset 1px 1px 4px rgba(0,0,0,.45);
}
.taskbtn.is-min { opacity:.92; }

.tray {
  display:flex; align-items:center; gap:8px;
  padding:0 10px 0 12px;
  background:linear-gradient(180deg,#1a8be0 0%,#138fe8 40%,#0d6fd0 100%);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.2);
  border-left:1px solid #0a4faa;
}
.tray__ico { width:15px; height:15px; opacity:.95; cursor:pointer; }
.tray__ico:hover { filter:brightness(1.2); }
.tray__clock {
  color:#fff; font-size:11px; text-shadow:0 1px 1px rgba(0,0,0,.4);
  padding-left:2px; cursor:default;
}

/* =========================================================================
   START MENU
   ========================================================================= */
.startmenu {
  position:fixed; left:2px; bottom:29px; z-index:9500;
  width:380px;
  border:1px solid #0a3aae; border-bottom:none;
  border-radius:8px 8px 0 0;
  overflow:hidden;
  box-shadow:3px -2px 14px rgba(0,0,0,.45);
  font-family:var(--xp-tahoma);
  animation:sm-rise .12s ease-out;
}
@keyframes sm-rise { from { transform:translateY(8px); opacity:.4; } to { transform:none; opacity:1; } }
.startmenu__header {
  height:58px;
  background:linear-gradient(180deg,#2f8bff 0%,#1a64e0 46%,#0d4fc9 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);
  display:flex; align-items:center; gap:10px;
  padding:0 12px;
  color:#fff;
}
.startmenu__avatar {
  width:40px; height:40px; border-radius:4px;
  border:2px solid #c8d9f5;
  background-size:cover; background-position:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  flex:none;
}
.startmenu__user { font-size:15px; font-weight:700; text-shadow:1px 1px 1px rgba(0,0,0,.5); }
.startmenu__body { display:flex; }
.startmenu__col {
  width:50%; padding:6px 0;
}
.startmenu__col--left { background:#fff; }
.startmenu__col--right {
  background:linear-gradient(180deg,#d3e5fa 0%,#cfe0f8 100%);
  border-left:1px solid #aac4e8;
  box-shadow:inset 1px 0 0 #fff;
}
.sm-item {
  display:flex; align-items:center; gap:9px;
  padding:5px 12px; font-size:11px; color:#00269c; cursor:pointer;
}
.startmenu__col--left .sm-item { color:#000; }
.sm-item__ico { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; }
.startmenu__col--right .sm-item__ico { width:22px; height:22px; }
.sm-item__ico img, .sm-item__ico svg { width:100%; height:100%; }
.sm-item b { font-weight:700; }
.sm-item small { display:block; color:#555; font-weight:400; font-size:10px; }
.sm-item:hover { background:#2f71d9; color:#fff; }
.sm-item:hover small { color:#dce7fb; }
.sm-sep { height:1px; margin:5px 12px; background:linear-gradient(90deg,#c3d3ea,transparent); }
.startmenu__col--left .sm-sep { background:#d6d6d6; }
.startmenu__pinned { border-bottom:1px solid #d6d6d6; padding-bottom:6px; margin-bottom:4px; }
.startmenu__footer {
  height:38px;
  background:linear-gradient(180deg,#2f8bff 0%,#1a64e0 46%,#0d4fc9 100%);
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:0 14px; color:#fff;
}
.sm-foot { display:flex; align-items:center; gap:6px; font-size:11px; cursor:pointer; padding:3px 6px; border-radius:3px; }
.sm-foot:hover { background:rgba(255,255,255,.18); }
.sm-foot__ico { width:22px; height:22px; }

/* =========================================================================
   BOOT + LOGIN
   ========================================================================= */
.boot {
  position:fixed; inset:0; z-index:99999;
  background:#000; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--xp-tahoma);
}
.boot__brand { display:flex; align-items:baseline; gap:14px; margin-bottom:54px; }
.boot__logo { width:118px; height:118px; }
.boot__word { font-size:38px; }
.boot__word i { font-style:normal; color:#e8b33a; font-weight:700; }
.boot__word b { font-weight:400; }
.boot__bar {
  width:200px; height:18px; border:2px solid #6a6a6a; border-radius:9px;
  overflow:hidden; position:relative; background:#0a0a0a;
}
.boot__bar::before {
  content:""; position:absolute; top:1px; bottom:1px; left:-46px; width:46px;
  border-radius:6px;
  background:linear-gradient(90deg,transparent,#3a5fd9 30%,#6f9bff 50%,#3a5fd9 70%,transparent);
  animation:boot-slide 1.6s linear infinite;
}
@keyframes boot-slide { from { left:-46px; } to { left:200px; } }
.boot__foot {
  position:absolute; bottom:30px; width:100%;
  display:flex; justify-content:space-between; padding:0 36px;
  font-size:12px; color:#cfcfcf;
}
.boot__corp { color:#fff; font-weight:700; }
.boot__corp span { color:#e8b33a; }

/* Login / welcome ----------------------------------------------------- */
.login {
  position:fixed; inset:0; z-index:99998;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#5a7edc 0%,#43bde8 50%,#5a7edc 100%);
  font-family:var(--xp-tahoma); color:#fff;
}
.login__topline, .login__botline {
  height:4px; background:linear-gradient(90deg,#ff9c00,#ffd34e,#ff9c00);
  box-shadow:0 0 8px rgba(255,180,40,.6);
}
.login__main {
  flex:1; display:grid; grid-template-columns:1fr 1px 1fr;
  align-items:center;
}
.login__left { text-align:right; padding-right:40px; }
.login__brand { font-size:15px; opacity:.9; }
.login__hint { font-size:13px; opacity:.85; margin-top:8px; max-width:280px; margin-left:auto; }
.login__divider { width:1px; height:60%; background:rgba(255,255,255,.4); }
.login__right { padding-left:40px; }
.login__tile {
  display:flex; align-items:center; gap:14px;
  padding:8px 14px 8px 8px; cursor:pointer; border-radius:6px;
  width:max-content;
}
.login__tile:hover { background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.login__avatar {
  width:62px; height:62px; border-radius:6px; border:2px solid #fff;
  background-size:cover; background-position:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.login__name { font-size:20px; }
.login__sub { font-size:12px; opacity:.85; margin-top:3px; }
.login__bottombar {
  height:62px; background:linear-gradient(180deg,#1857c4,#0c3f9e);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; font-size:12px;
}
.login__poweroff { display:flex; align-items:center; gap:8px; opacity:.9; }
.login__msg { max-width:360px; opacity:.9; }

/* =========================================================================
   ERROR DIALOGS + SPLASH
   ========================================================================= */
.dlg {
  position:absolute; width:400px;
  background:var(--xp-face);
  border:1px solid #0831d9; border-top:none;
  border-radius:var(--xp-radius) var(--xp-radius) 0 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.10), 4px 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  padding:0 4px 0;
  font-family:var(--xp-tahoma);
}
.dlg .win__titlebar { margin:0 -4px; }
.dlg__inner { background:var(--xp-face); }
.dlg__body { display:flex; gap:16px; padding:20px 18px 14px; }
.dlg__ico { flex:none; }
.dlg__msg { font-size:11px; line-height:1.5; color:#000; padding-top:1px; }
.dlg__serial { display:block; width:100%; margin-top:12px; letter-spacing:.12em; font-family:var(--tg-mono); }
.dlg__btns {
  display:flex; justify-content:center; gap:10px;
  padding:8px 16px 16px; border-top:1px solid #fff;
  box-shadow:inset 0 1px 0 #cfcabb;
}
.dlg__btns .xp-btn { min-width:84px; }

.splash {
  position:absolute; width:320px;
  background:#1b1b1b; color:#fff;
  border:1px solid #000;
  box-shadow:4px 4px 16px rgba(0,0,0,.5);
  padding:22px 22px 18px; text-align:center;
  font-family:var(--xp-tahoma);
}
.splash__logo { width:64px; height:64px; object-fit:contain; margin:0 auto 12px; display:block; }
.splash__name { font-size:16px; font-weight:700; }
.splash__sub { font-size:11px; color:#9fb4cf; margin:4px 0 14px; }
.splash__bar { height:12px; background:#0a0a0a; border:1px solid #4a4a4a; overflow:hidden; position:relative; }
.splash__bar i {
  position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:linear-gradient(90deg,transparent,#3a6fd9 40%,#6f9bff 60%,transparent);
  animation:boot-slide 1.3s linear infinite;
}

/* generic helpers */
.nodrag { -webkit-user-drag:none; }
.muted { color:var(--tg-grey-50); }

/* =========================================================================
   MOTION + INTERACTION POLISH  (restrained, premium)
   ========================================================================= */

/* Window + dialog entrance: a small settle, not a bounce */
@keyframes win-open {
  from { opacity:0; transform:translateY(9px) scale(.985); }
  to   { opacity:1; transform:none; }
}
.win { animation:win-open .19s cubic-bezier(.22,.61,.36,1); }
.dlg { animation:win-open .16s cubic-bezier(.22,.61,.36,1); }

/* While dragging a window, lift it off the desktop and kill text selection */
.win.is-dragging {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.12),
    16px 22px 46px rgba(8,20,52,.42),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
.win.is-dragging, .win.is-dragging .win__titlebar { cursor:grabbing; }
.win__titlebar { cursor:grab; }
.win.is-max .win__titlebar { cursor:default; }

/* Desktop-icon hover: a soft lift + label tint (subtle, XP-authentic) */
.dicon__img { transition:transform .15s cubic-bezier(.22,.61,.36,1), filter .15s ease; }
.dicon__label { transition:background .12s ease; }
.dicon:hover .dicon__img { transform:translateY(-2px) scale(1.045); }
.dicon:hover:not(.is-selected) .dicon__label {
  background:rgba(10,36,106,.30); text-shadow:none;
}

/* Eased hover transitions on chrome (were instant filter swaps) */
.tbtn, .startbtn, .taskbtn { transition:filter .12s ease, box-shadow .12s ease; }
.qbtn, .tray__ico { transition:filter .12s ease, transform .12s ease; }
.tray__ico:hover, .qbtn:hover { transform:translateY(-1px); }
.sm-item, .sm-foot { transition:background .1s ease, color .1s ease; }
.login__tile { transition:background .15s ease, box-shadow .15s ease; }
.xp-btn { transition:border-color .12s ease, box-shadow .12s ease, filter .1s ease; }

/* =========================================================================
   HOVER-REVEAL PROJECT PREVIEW
   A framed plate that physics-tracks the cursor over project icons.
   ========================================================================= */
.hoverprev {
  position:fixed; left:0; top:0; z-index:60;
  pointer-events:none;
  transform-origin:top left;
  will-change:transform;
}
.hoverprev__plate, .hoverprev__cap {
  opacity:0; transform:scale(.94);
  transform-origin:top left;
  transition:opacity .15s ease-out, transform .24s cubic-bezier(.22,.61,.36,1);
}
.hoverprev.is-on .hoverprev__plate,
.hoverprev.is-on .hoverprev__cap { opacity:1; transform:scale(1); }
.hoverprev__plate {
  width:300px; height:208px;
  background:#fff; padding:7px;
  box-shadow:0 22px 50px rgba(8,20,52,.40), 0 3px 0 rgba(0,0,0,.05);
}
.hoverprev__plate img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.97) contrast(1.02);
}
.hoverprev__cap {
  width:300px;
  background:var(--tg-black); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 11px;
  font-family:var(--tg-mono);
  transition-delay:.03s;
}
.hoverprev__name { font-size:11px; letter-spacing:.02em; }
.hoverprev__year { font-size:10px; color:var(--tg-cyan); letter-spacing:.08em; }

/* Respect reduced-motion: hold still, no entrances or tracked tilt */
@media (prefers-reduced-motion: reduce) {
  .win, .dlg, .startmenu { animation:none !important; }
  .dicon:hover .dicon__img { transform:none; }
  .hoverprev__plate, .hoverprev__cap { transition:opacity .12s ease-out; transform:none; }
}