:root{
  --blue:#1b75d0; --blue-dark:#0e57a1; --green:#3aa655; --task:#e4e4e4;
  --shadow:0 8px 28px rgba(0,0,0,.25); --menu:#f2f2f2; --menu-border:#cfcfcf;
  --text:#0b0b0b; --sub:#666;
  --w95-blue:#000080; --w95-blue2:#000060; --w95-gray:#c0c0c0;
  --w95-dark:#000; --w95-light:#fff; --w95-shadow:#808080; --w95-face:#c0c0c0;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; color:var(--text); overflow:hidden}

/* Desktop background */
.desktop{position:absolute; inset:0; background:#3aa655 url("images/bg.jpg") center/cover no-repeat fixed}

/* Desktop shortcuts */
.shortcut{position:absolute; width:72px; text-align:center; text-decoration:none; color:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); cursor:default}
.shortcut img{width:64px; height:64px; display:block; margin:0 auto 6px; border-radius:8px; background:rgba(255,255,255,.2); backdrop-filter:blur(2px); padding:6px}
.shortcut span{font-size:12px; line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,.75)}

/* Taskbar */
.taskbar{position:fixed; left:0; right:0; bottom:0; height:46px; background:linear-gradient(#dedede,#cfcfcf); border-top:1px solid #b8b8b8; display:flex; align-items:center; gap:8px; padding:6px 8px}
.task-buttons{display:flex; gap:6px; margin-left:8px}
.task-btn{height:30px; padding:0 10px; border:1px solid #8ca5d9; border-radius:4px; background:linear-gradient(#e8f0ff,#cfe0ff); box-shadow:inset 0 1px 0 #fff; font-size:13px; color:#0b2e6d; cursor:pointer}
.task-btn.active{background:linear-gradient(#cfe0ff,#b6d0ff)}

/* Start button (XP-like) */
.start{position:relative; display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 16px 0 10px; border-radius:18px; border:1px solid #1e6a1c; border-top-color:#369b32; border-bottom-color:#0e4c12; background:linear-gradient(#66d26a 0%, #38b243 45%, #2f9e3a 46%, #2a8d33 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.25); color:#fff; font-weight:700; text-transform:lowercase; cursor:pointer}
.start::before{content:""; position:absolute; left:2px; right:18px; top:2px; height:55%; border-radius:16px; background:linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0))}
.start::after{content:""; position:absolute; top:0; right:0; bottom:0; width:12px; border-top-right-radius:18px; border-bottom-right-radius:18px; background:linear-gradient(to right, rgba(48,129,214,0), rgba(48,129,214,.55))}
.start:hover{filter:brightness(1.05)}
.start:active{transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.start-logo{width:20px; height:20px; border-radius:50%; object-fit:contain; background:radial-gradient(circle at 35% 30%, #fff 0%, #bde6ff 60%, #8fc6ff 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.15); padding:2px}
.start-text{font-size:15px; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.35)}

/* Tray */
.task-spacer{flex:1}
.tray{display:flex; align-items:center; gap:10px; margin-right:6px}
.clock{font-size:12px; padding:4px 8px; border-radius:4px; background:rgba(255,255,255,.65); border:1px solid #cfcfcf}

/* Start Menu */
.start-menu{position:fixed; left:6px; bottom:44px; width:520px; height:360px; background:var(--menu); border:1px solid var(--menu-border); border-radius:8px; box-shadow:var(--shadow); display:none; grid-template-columns:1fr 140px; overflow:hidden; z-index:10}
.start-menu[aria-hidden="false"]{display:grid}
.menu-left{padding:12px; background:#fafafa}
.menu-title{font-weight:700; margin-bottom:8px; color:#222}
.menu-item{display:flex; align-items:center; gap:12px; padding:10px; border-radius:8px; text-decoration:none; color:inherit; border:1px solid transparent}
.menu-item + .menu-item{margin-top:6px}
.menu-item:hover{background:#fff; border-color:#e6e6e6}
.menu-item img{width:48px; height:48px; border-radius:8px; background:#fff; padding:6px; border:1px solid #e9e9e9}
.menu-labels .title{font-weight:600}
.menu-labels .sub{font-size:12px; color:var(--sub); margin-top:2px}
.menu-right{background:linear-gradient(#1c69c9,#0f4f9b); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:16px 10px}
.menu-right .avatar{width:72px; height:72px; border-radius:10px; background:url("images/windogs1.png") center/cover no-repeat; margin-top:6px; border:2px solid #fff; box-shadow:0 0 4px rgba(0,0,0,.3)}
.menu-right .user{margin-top:10px; font-weight:600}

/* Preview link window */
.window{position:absolute; inset:auto auto 56px 120px; min-width:320px; background:#fff; border:1px solid #b9c8e6; border-radius:8px; box-shadow:var(--shadow); overflow:hidden; z-index:20}
.window .titlebar{background:linear-gradient(#4d82d6,#2b5fb2); color:#fff; padding:8px 10px; font-weight:600; display:flex; align-items:center; justify-content:space-between}
.window .titlebar .close{width:18px; height:18px; border-radius:3px; border:1px solid #1e3e7a; background:linear-gradient(#ff6a6a,#cc3333); display:inline-block; cursor:pointer}
.window .content{padding:12px; font-size:14px}
.window a{color:#1b75d0; word-break:break-all}

/* ---- Win95 window styling ---- */
.w95-window{position:absolute; top:120px; left:120px; width:520px; background:var(--w95-gray); border:2px solid var(--w95-dark); box-shadow:2px 2px 0 var(--w95-shadow)}
.w95-titlebar{background:linear-gradient(var(--w95-blue), var(--w95-blue2)); color:#fff; padding:3px 4px; display:flex; align-items:center; justify-content:space-between; cursor:move}
.w95-title{font-weight:bold; letter-spacing:.2px}
.w95-controls{display:flex; gap:2px}
.w95-btn{width:18px; height:18px; border:none; background:var(--w95-face); box-shadow:inset -1px -1px 0 var(--w95-shadow), inset 1px 1px 0 var(--w95-light); line-height:16px; font-size:12px; padding:0; cursor:pointer}
.w95-btn:active{box-shadow:inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-light)}
.w95-body{padding:10px}

/* Big card */
.w95-card{position:relative; background:var(--w95-gray); border:2px solid var(--w95-dark); box-shadow:2px 2px 0 var(--w95-shadow)}
.w95-card-tabs{display:flex; gap:6px; align-items:flex-end; padding:6px 6px 0; background:#e0e0e0; border-bottom:2px solid var(--w95-shadow)}
.tab{padding:6px 10px; background:var(--w95-face); border-top:2px solid var(--w95-light); border-left:2px solid var(--w95-light); border-right:2px solid var(--w95-shadow); border-bottom:2px solid var(--w95-shadow); font-weight:bold}
.tab.selected{color:#fff; background:var(--w95-blue); border-color:var(--w95-blue) var(--w95-blue) var(--w95-dark) var(--w95-blue)}
.tab.disabled{color:#777}
.tab.grayed{color:#666}
.w95-card-content{position:relative; padding:14px 20px 20px; background:var(--w95-light); border-top:2px solid var(--w95-light); border-left:2px solid var(--w95-light); border-right:2px solid var(--w95-shadow); border-bottom:2px solid var(--w95-shadow); min-height:220px}
.w95-headline{margin:0 0 12px; font-size:28px; font-weight:700; color:#000}
.w95-pane{background:var(--w95-gray); border-top:2px solid var(--w95-light); border-left:2px solid var(--w95-light); border-right:2px solid var(--w95-shadow); border-bottom:2px solid var(--w95-shadow); padding:10px}
.w95-scroll{position:absolute; top:6px; right:6px; width:16px; bottom:6px; background:#ddd; border:2px solid var(--w95-dark); box-shadow:inset -1px -1px 0 var(--w95-shadow), inset 1px 1px 0 var(--w95-light)}
.w95-scroll-thumb{position:absolute; top:24px; left:1px; right:1px; height:40px; background:var(--w95-face); box-shadow:inset -1px -1px 0 var(--w95-shadow), inset 1px 1px 0 var(--w95-light)}

/* Mobile tweaks */
@media (max-width:680px){
  .start-menu{width:92vw; height:60vh}
  .window{left:10px; right:10px; inset:auto 10px 56px 10px}
  .w95-window{left:10px; right:10px; width:auto}
}

/* ===== Winamp-like window (core) ===== */
.winamp {
  position: absolute;
  top: 160px; left: 180px;
  width: 420px;
  background: #2b2b2b;
  color: #eaeaea;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #808080;
  z-index: 30;
  user-select: none;
}
.winamp .wa-titlebar{
  background: linear-gradient(#0b3aa2, #072b7a);
  color: #fff;
  padding: 3px 6px;
  display:flex; align-items:center; justify-content:space-between;
  cursor: move;
  font-weight: 700;
}
.winamp .wa-controls{
  display:flex; align-items:center; gap:6px;
  padding: 10px;
}
.winamp .wa-btn{
  width: 24px; height: 24px;
  border: none; cursor:pointer;
  background:#444;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #777;
  color:#fff; font-weight:700; line-height:1;
}
.winamp .wa-btn:active{
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #777;
}
.winamp .wa-display{
  margin: 8px 10px 8px;
  background:#111;
  color:#80ff80;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
  padding:8px 10px;
  border:2px solid #000;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #555;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.winamp .wa-timeline{
  margin: 0 10px 10px;
  height: 8px; background:#555;
  border:1px solid #000;
  box-shadow: inset 1px 1px 0 #777, inset -1px -1px 0 #000;
  position:relative; cursor:pointer;
}
.winamp .wa-progress{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:#f5b800;
}
.winamp .wa-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding: 0 10px 10px;
}
.winamp .wa-time{font-variant-numeric: tabular-nums; opacity:.85}
.winamp .wa-volume{
  width: 140px; height: 6px; background:#666; position:relative;
  border:1px solid #000; box-shadow: inset 1px 1px 0 #777, inset -1px -1px 0 #000;
  cursor:pointer;
}
.winamp .wa-vol-level{
  position:absolute; left:0; top:0; bottom:0; width:70%;
  background:#00d4ff;
}

/* window buttons */
.winamp .wa-winbtns{display:flex; gap:4px}
.winamp .wa-winbtn{
  width:16px; height:16px; background:#c0c0c0; border:none; cursor:pointer;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  color:#000; font-size:12px; line-height:14px; padding:0;
}
.winamp .wa-winbtn:active{
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
}

/* ===== Winamp classic playlist panel ===== */
.winamp .wa-pl {
  margin: 8px 10px 10px;
  background: #0b0b0b;
  border: 2px solid #1a1a1a;
  box-shadow: inset 0 0 0 1px #272727, inset 0 0 0 2px #000;
  color: #8bff8b;
  font-family: "Courier New", ui-monospace, monospace;
  user-select: none;
}
.winamp .wa-pl-title {
  padding: 4px 8px;
  letter-spacing: .8px;
  color: #9ad79a;
  background: linear-gradient(#1e1e1e, #121212);
  border-bottom: 1px solid #000;
  font-weight: 700;
}
.winamp .wa-pl-viewport {
  max-height: 150px;
  overflow: auto;
}
.winamp .wa-pl-row {
  display: grid;
  grid-template-columns: 36px 1fr 62px;
  gap: 8px;
  padding: 2px 8px;
  align-items: center;
  line-height: 1.35;
  border-bottom: 1px solid #121212;
  color: #7dfc7d;
}
.winamp .wa-pl-row:hover { background: #141414; }
.winamp .wa-pl-row.active { background: #173a17; color: #b6ffb6; }
.winamp .wa-pl-num { color: #5ad65a; text-align: right; }
.winamp .wa-pl-dur { color: #64e764; text-align: right; }
.winamp .wa-pl-toolbar {
  display:flex; gap:6px; padding:6px; border-top:1px solid #000; background:#101010;
}
.winamp .wa-ctl {
  background:#2a2a2a; color:#d6d6d6; border:1px solid #000; padding:4px 8px; font-size:12px; cursor:pointer;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #555;
}
.winamp .wa-ctl:active { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #555; }

/* scrollbar */
.winamp .wa-pl-viewport::-webkit-scrollbar { height: 10px; width: 10px; }
.winamp .wa-pl-viewport::-webkit-scrollbar-track { background:#0f0f0f; }
.winamp .wa-pl-viewport::-webkit-scrollbar-thumb { background:#2f2f2f; border:2px solid #0f0f0f; }