/* ============ Windows Vista — core layer ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; background:#000; }
body {
  font-family:"Segoe UI","Segoe UI Variable Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12px; color:#000;
  -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; background:none; border:0; cursor:default; }
button:focus-visible, [tabindex]:focus-visible { outline:1px dotted #000; outline-offset:-3px; }
input, textarea, select { font:inherit; }
img, canvas { display:block; }
::selection { background:#3875d7; color:#fff; }

#screen {
  position:fixed; inset:0; overflow:hidden; user-select:none;
  cursor:default;
}

/* ---------- wallpaper ---------- */
#wallpaper { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
#aurora { position:absolute; inset:-12%; z-index:1; pointer-events:none; overflow:hidden; }
#aurora .rib {
  position:absolute; width:140%; height:46%; left:-20%;
  filter:blur(46px); opacity:.5; mix-blend-mode:screen;
  background:radial-gradient(50% 100% at 50% 50%, rgba(80,255,190,.34), rgba(30,160,140,.12) 55%, transparent 75%);
  animation:ribdrift 46s ease-in-out infinite alternate;
}
#aurora .r1 { top:6%;  transform:rotate(-9deg); }
#aurora .r2 { top:34%; transform:rotate(6deg);  animation-duration:58s; animation-delay:-18s; opacity:.38;
  background:radial-gradient(50% 100% at 50% 50%, rgba(60,220,255,.28), rgba(20,120,160,.10) 55%, transparent 75%); }
#aurora .r3 { top:58%; transform:rotate(-4deg); animation-duration:70s; animation-delay:-34s; opacity:.30;
  background:radial-gradient(50% 100% at 50% 50%, rgba(120,255,170,.22), rgba(20,140,120,.08) 55%, transparent 75%); }
@keyframes ribdrift {
  0%   { translate:0 0;      scale:1 1; }
  50%  { translate:3% -2.5%; scale:1.06 1.12; }
  100% { translate:-3% 2%;   scale:1.02 .96; }
}
#aurora .dust {
  position:absolute; inset:0; opacity:.5; mix-blend-mode:screen;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(190,255,230,.5), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(170,240,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 68%, rgba(200,255,240,.35), transparent 60%),
    radial-gradient(1px 1px at 30% 80%, rgba(160,255,220,.4), transparent 60%),
    radial-gradient(1px 1px at 88% 55%, rgba(190,255,250,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 40%, rgba(180,255,235,.25), transparent 60%);
  animation:dustdrift 90s linear infinite alternate;
}
@keyframes dustdrift { from { translate:0 0; } to { translate:-2% -3%; } }

/* ---------- desktop ---------- */
#desktop { position:absolute; inset:0 0 40px 0; z-index:2; }
#desktop-icons { position:absolute; inset:6px; }

.dicon {
  position:absolute; width:78px; padding:4px 2px 3px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid transparent; border-radius:3px;
  transition:background .12s, border-color .12s;
}
.dicon .di-ico { width:48px; height:48px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); transition:transform .15s; }
.dicon .di-label {
  max-width:74px; text-align:center; color:#fff; line-height:1.25;
  font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word;
}
.dicon:hover .di-ico { transform:scale(1.05); }
.dicon:hover { background:rgba(120,180,255,.14); border-color:rgba(150,200,255,.28); }
.dicon.selected {
  background:linear-gradient(180deg, rgba(140,190,255,.34), rgba(90,140,220,.30));
  border-color:rgba(170,210,255,.55);
  box-shadow:inset 0 0 6px rgba(180,220,255,.25);
}
.dicon.selected .di-label { background:#2f63c8; outline:1px solid rgba(190,220,255,.5); }
.dicon.dragging { opacity:.85; }
.dicon.ghost { opacity:.4; }

#marquee {
  position:absolute; z-index:5; pointer-events:none;
  border:1px solid rgba(180,215,255,.85);
  background:linear-gradient(180deg, rgba(140,185,255,.28), rgba(100,150,235,.22));
  box-shadow:inset 0 0 4px rgba(200,225,255,.4);
}

/* ---------- generic helpers ---------- */
.spacer { flex:1; }
[hidden] { display:none !important; }

/* Vista scrollbars */
*::-webkit-scrollbar { width:17px; height:17px; }
*::-webkit-scrollbar-track {
  background:linear-gradient(90deg,#f3f6fb,#e6ecf5 45%,#dfe6f0);
  border:1px solid #d4dce8;
}
*::-webkit-scrollbar-thumb {
  background:linear-gradient(90deg,#e9f2fc,#cfe3f8 45%,#b7d4ef);
  border:1px solid #8fb2d9; border-radius:3px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.8);
}
*::-webkit-scrollbar-thumb:hover { background:linear-gradient(90deg,#dcebfb,#b7d6f3 45%,#96c3e8); }
*::-webkit-scrollbar-button:single-button {
  height:17px; width:17px;
  background:linear-gradient(180deg,#f2f7fd,#d9e6f5);
  border:1px solid #b9cde4;
}

/* text input focus glow — Vista style */
input[type=text], input[type=search], input:not([type]), textarea, select {
  border:1px solid #a9bfd4; background:#fff; border-radius:2px;
  padding:3px 5px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color:#5e8ec6;
  box-shadow:0 0 4px rgba(90,150,220,.55), inset 0 0 2px rgba(120,170,230,.4);
}

/* busy cursor overlay (Vista blue ring) */
#busy-cursor {
  position:fixed; z-index:99999; width:26px; height:26px; pointer-events:none;
  margin:-4px 0 0 14px;
}
#busy-cursor::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:3px solid rgba(120,180,240,.25); border-top-color:#4aa4f0;
  box-shadow:0 0 6px rgba(80,160,240,.5);
  animation:spin .9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
body.busy, body.busy * { cursor:progress !important; }

/* dimmer (secure desktop / modal) */
#dimmer {
  position:fixed; inset:0; z-index:4000;
  background:rgba(10,14,20,.42);
  -webkit-backdrop-filter:grayscale(.9) brightness(.55) blur(2px);
  backdrop-filter:grayscale(.9) brightness(.55) blur(2px);
  animation:dimin .35s ease;
}
@keyframes dimin { from { opacity:0; } }

/* drag iframe/canvas shield */
#drag-shield { position:fixed; inset:0; z-index:9500; }

/* reduce motion */
@media (prefers-reduced-motion:reduce) {
  #aurora .rib, #aurora .dust { animation:none; }
}