:root{
  --brand-primary: #00d1b2;
  --brand-accent:  #ffd166;
  --brand-bg:      #0a1324;
  --brand-bg2:     #060b16;
  --brand-card:    rgba(255,255,255,.06);
  --brand-stroke:  rgba(255,255,255,.10);
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{ box-sizing: border-box; }
body.os-body { background: radial-gradient(circle at 20% 20%, var(--brand-bg), var(--brand-bg2) 60%); color:#e2e8f0; min-height:100vh; overflow:hidden; font-family: var(--font);}
.desktop { padding:80px 20px 20px; height:100vh; box-sizing:border-box; }
.taskbar { position:fixed; left:0; right:0; bottom:0; height:50px; display:flex; align-items:center; justify-content:space-between; background:rgba(10,22,44,.75); backdrop-filter: blur(10px); padding:0 12px; border-top:1px solid var(--brand-stroke); }
.taskbar .logo { font-weight:900; letter-spacing:1px; margin-left:6px; color: var(--brand-primary); }
.logo-img { width:22px; height:22px; filter: drop-shadow(0 0 6px rgba(0,209,178,.4)); }
.tb-btn { padding:6px 10px; margin:0 4px; border-radius:12px; text-decoration:none; color:#dbeafe; border:1px solid transparent; }
.tb-btn:hover { background:var(--brand-card); border-color:var(--brand-stroke); }
.tb-left, .tb-right { display:flex; align-items:center; gap:6px; }
.user { margin-right:8px; color:#cbd5e1; }

.icons { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:18px; max-width:840px; margin:0 auto; }
.icon { text-align:center; color:#e2e8f0; text-decoration:none; padding:16px 10px; border-radius:18px; background:var(--brand-card); border:1px solid var(--brand-stroke); transition: transform .12s ease; }
.icon:hover { transform: translateY(-2px); }
.ico{ width:48px; height:48px; border-radius:12px; margin:0 auto 8px; background:linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); opacity:.9; }

/* Splash */
.splash{ position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #0b1c3d, #050a16 70%); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:99; }
.splash.show{ opacity:1; pointer-events:auto; }
.splash.hide{ opacity:0; pointer-events:none; }
.splash-inner{ text-align:center; color:#cbd5e1; }
.splash-gif{ width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 4px 16px rgba(0,0,0,.6)); }
.splash-progress{ width:320px; height:10px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; margin:8px auto 4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.splash-bar{ height:100%; width:0%; background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.9)); animation:bootfill 2.4s ease forwards; }
@keyframes bootfill{ from{width:0%} to{width:100%} }
.splash-percent{ text-align:center; font-size:.9rem; color:#cbd5e1; letter-spacing:.5px; }
.splash-text{ margin-top:6px; font-weight:600; }
.splash-hint{ font-size:.8rem; opacity:.8; margin-top:8px; }

/* Taskbar subtle vibration */
@keyframes vibrate { 0%{ transform:translateX(0);} 20%{ transform:translateX(-1px);} 40%{ transform:translateX(1px);} 60%{ transform:translateX(-1px);} 80%{ transform:translateX(1px);} 100%{ transform:translateX(0);} }
.taskbar.shake { animation: vibrate .5s ease; }