:root{
    --xp-blue-dark:   #0A246A;
    --xp-blue-mid:    #3D95FF;
    --xp-blue-light:  #A6D2FF;
    --xp-taskbar-1:   #1E5C1E;
    --xp-taskbar-2:   #3D9140;
    --xp-taskbar-3:   #0E3A0E;
    --xp-silver-1:    #ECE9D8;
    --xp-silver-2:    #D4D0C8;
    --xp-red-1:       #E8544A;
    --xp-red-2:       #C42B1C;
    --term-bg:        #0C0C0C;
    --term-green:     #33FF33;
    --term-dim:       #1CA61C;
    --font-chrome:    Tahoma, Verdana, 'Segoe UI', sans-serif;
    --font-term:      'Consolas', 'Courier New', monospace;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; width:100%; height:100%; overflow:hidden;
    font-family:var(--font-chrome);
  }

  /* ============ DESKTOP / WALLPAPER ============ */
  #desktop{
    position:relative; width:100%; height:100vh; overflow:hidden;
    /* Placeholder XP-style wallpaper (swap for your own image below). */
       background: url('Background.jpg') center/cover no-repeat;

    user-select:none;
  }
  #desktop::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:14%;

    opacity:.9;
  }

  .icon{
    position:absolute; width:74px; text-align:center; color:#fff;
    font-size:11px; text-shadow:1px 1px 2px rgba(0,0,0,.85);
    cursor:pointer; padding:4px; border-radius:2px;
  }
  .icon:focus, .icon.selected{ background:rgba(50,90,170,.45); outline:1px dotted #fff; }
  .icon .glyph{
    width:38px; height:38px; margin:0 auto 4px; border-radius:6px;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    background:linear-gradient(160deg,#000, rgba(0,0,0,.85)); box-shadow:0 2px 4px rgba(0,0,0,.4);
  }
  .icon span{ display:block; line-height:1.25; }

  /* ============ TASKBAR ============ */
  #taskbar{
    position:absolute; left:0; right:0; bottom:0; height:38px; z-index:9000;
    background:linear-gradient(180deg, var(--xp-taskbar-2) 0%, var(--xp-taskbar-1) 55%, var(--xp-taskbar-3) 100%);
    border-top:1px solid #6FCB6F;
    display:flex; align-items:center; padding:0 4px; gap:6px;
    box-shadow:0 -2px 6px rgba(0,0,0,.35);
  }
  #start-btn{
    height:29px; display:flex; align-items:center; gap:6px; padding:0 12px 0 6px;
    background:linear-gradient(180deg,#6FE06F 0%,#2E9B2E 45%,#1E7A1E 100%);
    border:1px solid #145214; border-radius:5px; color:#fff; font-weight:bold; font-style:italic;
    font-size:14px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  }
  #start-btn:active{ filter:brightness(.9); }
  #start-btn .flag{
    width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, #EAFBEA, #33FF33 55%, #14801A 100%);
    border:1px solid #0B4D0F; font-size:10px; font-weight:900; color:#0B3A0B; font-family:var(--font-term);
  }

  #taskbar-sep{ width:1px; align-self:stretch; margin:5px 0; background:rgba(255,255,255,.25); box-shadow:1px 0 rgba(0,0,0,.25); }

  #open-windows{ flex:1; display:flex; gap:4px; overflow:hidden; height:29px; align-items:center; }
  .taskbtn{
    height:27px; max-width:170px; display:flex; align-items:center; gap:6px; padding:0 8px;
    background:linear-gradient(180deg,#5C9CE6,#2F6FCB); border:1px solid #17407F; border-radius:3px;
    color:#fff; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  }
  .taskbtn.active{ background:linear-gradient(180deg,#1E4B8F,#3A76C9); box-shadow:inset 0 1px 3px rgba(0,0,0,.6); }

  #clock{
    height:29px; display:flex; align-items:center; padding:0 10px; color:#fff; font-size:11px;
    background:linear-gradient(180deg,#1C5FA8,#0E3A6E); border-left:1px solid rgba(255,255,255,.25);
    border-radius:3px 0 0 3px;
  }

  /* ============ START MENU ============ */
  #start-menu{
    position:absolute; left:2px; bottom:40px; width:280px; z-index:9500;
    background:var(--xp-silver-1); border:1px solid var(--xp-blue-dark); border-radius:8px 8px 4px 4px;
    box-shadow:3px 3px 12px rgba(0,0,0,.5); overflow:hidden; display:none;
  }
  #start-menu.open{ display:block; }
  #start-menu .header{
    background:linear-gradient(90deg, var(--xp-blue-dark), var(--xp-blue-mid));
    color:#fff; padding:10px 12px; font-weight:bold; font-size:14px; display:flex; align-items:center; gap:8px;
  }
  #start-menu .header .avatar{ width:32px; height:32px; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
  #start-menu ul{ list-style:none; margin:0; padding:6px; }
  #start-menu li{
    display:flex; align-items:center; gap:10px; padding:6px 8px; font-size:12px; color:#1a1a1a;
    cursor:pointer; border-radius:3px;
  }
  #start-menu li:hover{ background:linear-gradient(90deg,#3D95FF,#6FB1FF); color:#fff; }
  #start-menu li .g{ width:22px; text-align:center; font-size:15px; }
  #start-menu hr{ border:none; border-top:1px solid #b8b3a3; margin:4px 0; }

  /* ============ WINDOWS ============ */
  .win{
    position:absolute; min-width:260px; min-height:160px;
    background:var(--xp-silver-1); border:1px solid var(--xp-blue-dark); border-radius:8px 8px 4px 4px;
    box-shadow:4px 4px 18px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden;
  }
  .win.hidden{ display:none; }
  .titlebar{
    height:30px; flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:0 4px 0 8px;
    background:linear-gradient(180deg, var(--xp-blue-mid) 0%, var(--xp-blue-dark) 8%, var(--xp-blue-dark) 92%, var(--xp-blue-mid) 100%);
    color:#fff; font-size:12px; font-weight:bold; cursor:default;
  }
  .win.blurred .titlebar{ background:linear-gradient(180deg,#9DB8D9,#7391BE); color:#eef; }
  .titlebar .ticon{ font-size:14px; }
  .titlebar .ttitle{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tbtn{
    width:21px; height:20px; border-radius:3px; border:1px solid rgba(255,255,255,.4);
    display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; cursor:pointer;
    background:linear-gradient(180deg,#5C9CE6,#2F6FCB);
  }
  .tbtn.close{ background:linear-gradient(180deg, var(--xp-red-1), var(--xp-red-2)); }
  .tbtn:active{ filter:brightness(.85); }

  .menubar{
    flex:0 0 auto; background:var(--xp-silver-1); border-bottom:1px solid var(--xp-silver-2);
    padding:2px 8px; font-size:11px; color:#333; display:flex; gap:14px;
  }
  .win-body{ flex:1; overflow:auto; background:#fff; padding:14px 16px; font-size:12.5px; color:#1a1a1a; line-height:1.55; }
  .win-body h2{ margin:0 0 8px; font-size:15px; color:var(--xp-blue-dark); }
  .win-body h3{ margin:14px 0 4px; font-size:13px; color:#1E5C1E; }
  .win-body a{ color:#0645AD; }
  .win-body ul{ margin:6px 0; padding-left:20px; }
  .win-body .tag{
    display:inline-block; background:#EAF1FB; border:1px solid #BFD6F5; color:#1B4D8C;
    padding:2px 7px; border-radius:10px; font-size:11px; margin:2px 3px 0 0;
  }
  .resize-handle{ position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; }

  .proj-card{ border:1px solid var(--xp-silver-2); border-radius:5px; padding:10px 12px; margin-bottom:10px; background:#FAFCFF; }
  .proj-card b{ color:var(--xp-blue-dark); }

  /* ============ TERMINAL WINDOW ============ */
  #win-terminal .win-body{
    background:var(--term-bg); padding:10px 12px; color:var(--term-green); font-family:var(--font-term);
    font-size:13px; line-height:1.5; position:relative;
  }
  #term-output{ white-space:pre-wrap; word-break:break-word; }
  #term-output .cmd-line{ color:#fff; }
  #term-output .cmd-line b{ color:var(--term-green); }
  #term-output .err{ color:#FF5555; }
  #term-output .dim{ color:var(--term-dim); }
  #term-output .hl{ color:#fff; font-weight:bold; }
  #term-input-row{ display:flex; align-items:center; gap:6px; }
  #term-prompt{ color:var(--term-green); white-space:nowrap; }
  #term-input{
    flex:1; background:transparent; border:none; outline:none; color:#fff;
    font-family:var(--font-term); font-size:13px; caret-color:var(--term-green);
  }
  #win-terminal .win-body::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,255,0,.02) 3px);
  }

  /* Matrix rain easter egg */
  #matrix-canvas{ position:fixed; inset:0; z-index:9999; display:none; }

  ::-webkit-scrollbar{ width:16px; }
  ::-webkit-scrollbar-track{ background:var(--xp-silver-2); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8FB8E8,#4A7FC7); border:1px solid #2F5A99; }

  @media (max-width:640px){
    .win{ left:2vw !important; top:6vh !important; width:96vw !important; height:82vh !important; }
    .icon{ width:64px; }
  }