:root{
     --bg-deep: #14172B;
     --bg-panel: #1E2340;
     --bg-panel-2: #262B4D;
     --line: #363C67;
     --gold : #E8895B;
     --teal: #5FC9B8;
     --coral: #E27D60;
     --text: #F1EEE6;
     --text-muted: #9AA0C3;
     --radius: 10px;
    }
    *{box-sizing:border-box;}
    html,body{height:100%;margin:0;}
    body{
        font-family:'Inter',sans-serif;
        background:
            radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35) 0, transparent 100%),
            radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.25) 0, transparent 100%),
            radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,255,255,.3) 0, transparent 100%),
            radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.2) 0, transparent 100%),
            radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,.25) 0, transparent 100%),
            linear-gradient(160deg, #171A30 0%, #14172B 55%, #0F1122 100%);
        color:var(--text);
        overflow:hidden;
        height:100vh;
        user-select:none;
    }
    #desktop{
        position:relative;
        width:100%;
        height:calc(100vh - 56px);
        overflow:hidden;
    }
    .icon{
        position:absolute;
        width:84px;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:6px;
        padding:10px 4px;
        border-radius:8px;
        cursor:pointer;
    }
    .icon:hover, .icon:focus{ background:rgba(255,255,255,.06); }
    .icon .glyph{
        width:44px;height:44px;
        border-radius:9px;
        display:flex;align-items:center;justify-content:center;
        font-size:20px;
        box-shadow: 0 3px 0 rgba(0,0,0,.25);
    }
    .icon .label{
        font-size:12px;
        text-align:center;
        color:var(--text);
        line-height:1.25;
        text-shadow:0 1px 3px rgba(0,0,0,.6);
    }

    /*window*/
    .window{
        position:absolute;
        min-width:280px;
        min-height:180px;
        background:var(--bg-panel);
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow: 0 20px 50px rgba(0,0,0,.45);
        display:flex;
        flex-direction:column;
        overflow:hidden;
        animation: powerOn .18s ease-out
    }
    @keyframes powerOn{
        from { opacity:0; transform:scale(.96);}
        to{ opacity:1; transform:scale(1);}
    }
    .window.focused{border-color:#4A5187; box-shadow:0 24px 60px rgba(0,0,0,.55);}
    .window.dimmed{opacity: .35; filter:saturate(.6);}
    .titlebar{
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 12px;
        background:var(--bg-panel-2);
        border-bottom:1px solid var(--line);
        cursor:move;
        font-family:'Space Grotesk',sans-serif;
        font-weight:600;
        font-size: 13px;
        letter-spacing: .2px;
    }
    .traffic{display:flex; gap:6px;}
    .traffic span{
        width:11px;height:11px;border-radius:3px;
        display:inline-block;
        cursor:pointer;
    }
    .traffic .close{background:var(--coral);}
    .traffic .min{background:var(--gold);}
    .traffic .max{background:var(--teal);}
    .titlebar .t-label{flex:1; text-align:left; color:var(--text); opacity:.9;}
    .win-body{
        flex:1;
        overflow:auto;
        padding:16px 18px;
        font-size:14px;
        line-height:1.55;
        color:var(--text);
    }
    .resize-handle{
        position:absolute;
        right:0; bottom:0;
        width:16px; height:16px;
        cursor:nwse-resize;
    }
    .resize-handle::after{
        content:"";
        position:absolute; right:4px; bottom:4px;
        width:7px; height:7px;
        border-right:2px solid var(--line);
        border-bottom:2px solid var(--line);
    }
    /* app-specific bits */
  textarea.notes-area{
    width:100%; height:180px;
    background:var(--bg-deep);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    padding:10px;
    resize:vertical;
  }
  .calc{ width:220px; margin:0 auto; }
  .calc-screen{
    background:var(--bg-deep);
    border:1px solid var(--line);
    border-radius:6px;
    text-align:right;
    padding:12px;
    font-family:'IBM Plex Mono',monospace;
    font-size:22px;
    margin-bottom:10px;
    min-height:30px;
    word-break:break-all;
  }
  .calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .calc-grid button{
    padding:12px 0;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--bg-panel-2);
    color:var(--text);
    font-family:'IBM Plex Mono',monospace;
    font-size:14px;
    cursor:pointer;
  }
  .calc-grid button:hover{ background:#31376A; }
  .calc-grid button.op{ color:var(--gold); }
  .calc-grid button.eq{ background:var(--teal); color:#0F1122; font-weight:600; }

  .term{
    background:var(--bg-deep);
    border-radius:6px;
    padding:12px;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    height:100%;
    min-height:180px;
    overflow-y:auto;
  }
  .term .line{ margin-bottom:4px; white-space:pre-wrap; }
  .term .prompt{ color:var(--teal); }
  .term-input-row{ display:flex; gap:6px; align-items:center; }
  .term-input-row input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:var(--text);
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
  }

  .player-cover{
    width:100%;
    aspect-ratio:1;
    border-radius:8px;
    background:
      radial-gradient(circle at 30% 30%, var(--teal), transparent 60%),
      radial-gradient(circle at 70% 70%, var(--gold), transparent 60%),
      var(--bg-panel-2);
    margin-bottom:12px;
  }
  .player-track{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; }
  .player-sub{ color:var(--text-muted); font-size:12.5px; margin-bottom:12px; }
  .player-controls{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:6px;}
  .player-controls button{
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:50%;
    width:38px; height:38px;
    cursor:pointer;
    font-size:14px;
  }
  .player-controls button.play{ background:var(--teal); color:#0F1122; width:46px;height:46px; }
  .bar{ height:4px; background:var(--line); border-radius:2px; margin:14px 0; position:relative; }
  .bar-fill{ position:absolute; left:0; top:0; height:100%; width:35%; background:var(--gold); border-radius:2px; }

  .about-tag{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--teal);
    border:1px solid var(--line);
    border-radius:20px;
    padding:2px 10px;
    margin:2px 4px 2px 0;
  }

  /* ---------- Taskbar ---------- */
  #taskbar{
    height:56px;
    background:rgba(20,23,43,.92);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    padding:0 14px;
    gap:10px;
  }
  #start-btn{
    display:flex; align-items:center; gap:8px;
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    color:var(--text);
    padding:8px 14px;
    border-radius:8px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
  }
  #start-btn:hover{ background:#31376A; }
  #start-btn .dot{ width:8px;height:8px;border-radius:2px;background:var(--gold); }

  #start-menu{
    position:absolute;
    bottom:64px;
    left:14px;
    width:220px;
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    padding:8px;
    display:none;
    flex-direction:column;
    gap:2px;
  }
  #start-menu.open{ display:flex; }
  #start-menu button{
    display:flex; align-items:center; gap:10px;
    background:transparent;
    border:none;
    color:var(--text);
    text-align:left;
    padding:9px 10px;
    border-radius:7px;
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    cursor:pointer;
  }
  #start-menu button:hover{ background:var(--bg-panel-2); }

  #taskbar-apps{ display:flex; gap:6px; flex:1; overflow-x:auto; }
  .task-pill{
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    color:var(--text-muted);
    padding:7px 12px;
    border-radius:7px;
    font-size:12.5px;
    cursor:pointer;
    white-space:nowrap;
    font-family:'IBM Plex Mono',monospace;
  }
  .task-pill.active{ color:var(--text); border-color:#4A5187; background:#2A3060; }

  #focus-toggle{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text-muted);
    padding:8px 12px;
    border-radius:7px;
    font-size:12px;
    font-family:'IBM Plex Mono',monospace;
    cursor:pointer;
  }
  #focus-toggle.on{ color:#0F1122; background:var(--gold); border-color:var(--gold); }

  #clock{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    color:var(--text-muted);
    min-width:64px;
    text-align:right;
  }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
  ::-webkit-scrollbar-track{ background:transparent; }