:root{
  --os-accent:#ff8a3d;
  --os-bg1:#1a1024; --os-bg2:#0d1420; --os-bg3:#241018;
}
html,body{height:100%;margin:0;overflow:hidden;}
.os-page{
  font-family:'JetBrains Mono',ui-monospace,monospace;color:#e8eaf0;
  height:100vh;width:100vw;position:relative;overflow:hidden;user-select:none;
}
.os-page *{box-sizing:border-box;}

.os-wallpaper{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(255,138,61,.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(167,139,250,.16), transparent 60%),
    linear-gradient(160deg, var(--os-bg1), var(--os-bg2) 55%, var(--os-bg3));
  transition:background 1s ease;
}
.os-wallpaper.wp-1{--os-bg1:#1a1024;--os-bg2:#0d1420;--os-bg3:#241018;}
.os-wallpaper.wp-2{--os-bg1:#0c1f1a;--os-bg2:#0a1420;--os-bg3:#0f1c14;}
.os-wallpaper.wp-3{--os-bg1:#1c1408;--os-bg2:#120c1e;--os-bg3:#08141c;}

.os-topbar{
  position:absolute;top:0;left:0;right:0;height:32px;z-index:200;
  background:rgba(10,12,16,.72);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11.5px;color:#c7cdd6;
}
.os-topbar-left{display:flex;align-items:center;gap:14px;}
.os-back{color:#c7cdd6;text-decoration:none;display:flex;align-items:center;gap:5px;}
.os-back:hover{color:var(--os-accent);}
.os-brand{font-weight:700;color:#e8eaf0;}
.os-brand em{color:var(--os-accent);font-style:normal;}
.os-topbar-right{display:flex;align-items:center;gap:10px;color:#8b93a3;}
#os-clock{color:#e8eaf0;font-variant-numeric:tabular-nums;}

.os-desktop{
  position:absolute;top:32px;left:0;right:0;bottom:58px;z-index:1;
  padding:22px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,92px);gap:6px;
  justify-content:start;
}
.os-icon{
  width:84px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;cursor:pointer;padding:8px 4px;border:1px solid transparent;
}
.os-icon:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);}
.os-icon-glyph{
  width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:linear-gradient(135deg,rgba(255,138,61,.22),rgba(167,139,250,.14));border:1px solid rgba(255,138,61,.3);
}
.os-icon-label{font-size:10.5px;color:#e8eaf0;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.6);}

.os-taskbar{
  position:absolute;bottom:0;left:0;right:0;height:58px;z-index:200;
  background:rgba(10,12,16,.78);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;
}
.os-dock-btn{
  position:relative;width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
  transition:all .15s;
}
.os-dock-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);}
.os-dock-btn.running::after{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--os-accent);
}
.os-dock-sep{width:1px;height:28px;background:rgba(255,255,255,.1);margin:0 4px;}

.os-window{
  position:absolute;min-width:280px;min-height:200px;
  background:#12151b;border:1px solid rgba(255,255,255,.12);border-radius:10px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;z-index:10;
}
.os-window.focused{border-color:rgba(255,138,61,.35);}
.os-win-bar{
  height:36px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;cursor:move;
  background:#171b22;border-bottom:1px solid rgba(255,255,255,.08);
}
.os-win-dots{display:flex;gap:6px;}
.os-win-dot{width:11px;height:11px;border-radius:50%;border:none;cursor:pointer;padding:0;}
.os-win-dot.close{background:#ff5f57;} .os-win-dot.min{background:#febc2e;} .os-win-dot.max{background:#28c840;}
.os-win-title{flex:1;text-align:center;font-size:11.5px;color:#c7cdd6;font-weight:600;}
.os-win-body{flex:1;overflow:auto;padding:16px 18px;font-size:12.5px;line-height:1.6;}
.os-win-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:5;}
.os-win-resize::after{content:'';position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-right:2px solid rgba(255,255,255,.25);border-bottom:2px solid rgba(255,255,255,.25);}

.os-term-out{white-space:pre-wrap;word-break:break-word;}
.os-term-out .path{color:var(--os-accent);}
.os-term-line{display:flex;gap:6px;align-items:baseline;}
.os-term-line .prompt{color:#5cc488;flex-shrink:0;}
.os-term-input-row{display:flex;gap:6px;align-items:center;margin-top:2px;}
.os-term-input{
  flex:1;background:transparent;border:none;outline:none;color:#e8eaf0;font-family:inherit;font-size:12.5px;
}
.os-h{color:var(--os-accent);font-weight:700;margin-bottom:4px;}

.os-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.os-about-item{background:#171b22;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 11px;}
.os-about-label{font-size:9px;color:#8b93a3;letter-spacing:.08em;margin-bottom:3px;}
.os-about-value{font-size:12.5px;font-weight:700;font-family:'Space Grotesk',sans-serif;}

.os-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.os-field span{font-size:9.5px;color:#8b93a3;letter-spacing:.06em;}
.os-field input,.os-field textarea{
  font-family:inherit;font-size:12px;color:#e8eaf0;background:#171b22;border:1px solid rgba(255,255,255,.1);
  border-radius:6px;padding:7px 9px;resize:vertical;outline:none;
}
.os-field input:focus,.os-field textarea:focus{border-color:var(--os-accent);}
.os-send-btn{
  font-family:inherit;font-size:12px;font-weight:700;color:#0a0c10;background:var(--os-accent);
  border:none;border-radius:7px;padding:9px 14px;cursor:pointer;width:100%;
}

.os-settings-row{margin-bottom:16px;}
.os-settings-label{font-size:10.5px;color:#8b93a3;letter-spacing:.06em;margin-bottom:8px;}
.os-swatches{display:flex;gap:8px;}
.os-swatch{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent;}
.os-swatch.active{border-color:#fff;}
.os-swatch.wp-1{background:linear-gradient(135deg,#ff8a3d,#a78bfa);}
.os-swatch.wp-2{background:linear-gradient(135deg,#5cc488,#7c9eff);}
.os-swatch.wp-3{background:linear-gradient(135deg,#ffb84d,#a78bfa);}
.os-accent-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.os-accent-swatch.active{border-color:#fff;}

.os-proj-badges span{
  display:inline-block;font-size:9.5px;color:#5cc488;background:rgba(92,196,136,.1);
  border:1px solid rgba(92,196,136,.3);border-radius:5px;padding:2px 7px;margin:0 5px 5px 0;
}
.os-proj-tags span{
  display:inline-block;font-size:9.5px;color:#8b93a3;border:1px solid rgba(255,255,255,.1);
  border-radius:5px;padding:2px 7px;margin:0 5px 5px 0;
}
.os-link{color:var(--os-accent);text-decoration:none;border-bottom:1px solid rgba(255,138,61,.4);}

.os-boot{
  position:fixed;inset:0;z-index:1000;background:#05060a;color:#5cc488;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;padding:24px;white-space:pre-wrap;
}

@media(max-width:760px){
  .os-topbar{padding:0 10px;font-size:10.5px;}
  .os-topbar-left{gap:8px;}
  .os-brand{font-size:10px;}
  .os-brand .os-ver{display:none;}
  .os-topbar-right{gap:6px;}
  .os-topbar-right .os-deco{display:none;}
  .os-topbar-right span{font-size:10px;}
  .os-desktop{
    grid-auto-flow:row;grid-template-columns:repeat(auto-fill,78px);grid-template-rows:none;
    justify-content:space-between;padding:16px;gap:10px;
  }
  .os-icon{width:78px;}
  
  .os-window{
    position:fixed !important;top:32px !important;left:0 !important;right:0 !important;bottom:58px !important;
    width:auto !important;height:auto !important;border-radius:0;border-left:none;border-right:none;
  }
  .os-win-bar{cursor:default;}
  .os-win-resize{display:none;}
}