/* ============================================
   Reset & Base
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}

/* ============================================
   CSS Variables - Dark Theme (default)
   ============================================ */
:root{
  --desktop-bg:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  --menubar-bg:rgba(26,26,46,0.6);
  --menubar-border:rgba(255,255,255,0.08);
  --logo-color:rgba(255,255,255,0.95);
  --clock-color:rgba(255,255,255,0.85);
  --icon-label-color:#fff;
  --icon-label-shadow:0 1px 3px rgba(0,0,0,0.6),0 0 8px rgba(0,0,0,0.3);
  --icon-hover-bg:rgba(255,255,255,0.08);
  --icon-selected-bg:rgba(255,255,255,0.18);
  --footer-color:rgba(255,255,255,0.35);
  --window-bg:#2d2d3f;
  --window-titlebar-bg:#3a3a4e;
  --window-text:#e8e8f0;
  --window-border:rgba(255,255,255,0.08);
  --window-shadow:0 18px 50px rgba(0,0,0,0.4);
  --content-link:#5b9fff;
  --content-code-bg:rgba(255,255,255,0.08);
  --toast-bg:rgba(45,45,63,0.85);
  --toast-text:#e8e8f0;
  --theme-toggle-bg:rgba(255,255,255,0.1);
  --theme-toggle-active-bg:#374151;
  --theme-toggle-active-shadow:none;
  --theme-btn-color:rgba(255,255,255,0.5);
  --theme-btn-active-color:#fff;
  --star-base-opacity:1;
  --scrollbar-thumb:rgba(255,255,255,0.15);
  --primary-color:#5b9fff;
}

/* ============================================
   CSS Variables - Light Theme
   ============================================ */
[data-theme="light"]{
  --desktop-bg:linear-gradient(135deg,#f0f4f8 0%,#e8eef5 100%);
  --menubar-bg:rgba(255,255,255,0.55);
  --menubar-border:rgba(0,0,0,0.06);
  --logo-color:rgba(26,26,46,0.9);
  --clock-color:rgba(26,26,46,0.8);
  --icon-label-color:#1a1a2e;
  --icon-label-shadow:0 1px 2px rgba(255,255,255,0.6);
  --icon-hover-bg:rgba(0,0,0,0.05);
  --icon-selected-bg:rgba(0,0,0,0.1);
  --footer-color:rgba(26,26,46,0.35);
  --window-bg:#fff;
  --window-titlebar-bg:#f5f5f7;
  --window-text:#1a1a2e;
  --window-border:rgba(0,0,0,0.08);
  --window-shadow:0 18px 50px rgba(0,0,0,0.18);
  --content-link:#2563eb;
  --content-code-bg:rgba(0,0,0,0.05);
  --toast-bg:rgba(255,255,255,0.85);
  --toast-text:#1a1a2e;
  --theme-toggle-bg:rgba(0,0,0,0.05);
  --theme-toggle-active-bg:#fff;
  --theme-toggle-active-shadow:0 0 0 1px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.1);
  --theme-btn-color:rgba(0,0,0,0.4);
  --theme-btn-active-color:#1a1a2e;
  --star-base-opacity:0.4;
  --scrollbar-thumb:rgba(0,0,0,0.15);
  --primary-color:#2563eb;
}

/* ============================================
   Boot Screen
   ============================================ */
.boot-screen{
  position:fixed;inset:0;z-index:1000;
  background:#0a0a14;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.5s ease-out 1s;
}
.boot-screen.zoom-out{opacity:0;pointer-events:none}

.macbook{
  width:580px;max-width:88vw;position:relative;
  transition:transform 1.5s cubic-bezier(0.7,0,0.3,1);
}
.boot-screen.zoom-out .macbook{transform:scale(4.5)}

.macbook-screen{
  background:#1a1a2e;
  border:4px solid #2a2a3e;border-bottom:none;
  border-radius:14px 14px 4px 4px;
  padding:24px;min-height:300px;
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,0.3);
}
.macbook-base{
  width:112%;height:10px;margin-left:-6%;
  background:linear-gradient(to bottom,#d4d4d8 0%,#a1a1aa 50%,#71717a 100%);
  border-radius:0 0 14px 14px;position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.macbook-base::after{
  content:'';width:80px;height:5px;
  background:#52525b;border-radius:0 0 8px 8px;
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
}

.boot-screen.zoom-out .terminal,
.boot-screen.zoom-out .progress-container{
  opacity:0;transition:opacity 0.3s ease-out;
}

/* ============================================
   Terminal
   ============================================ */
.terminal{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:14px;color:#e0e0e0;line-height:1.8;min-height:120px;
}
.terminal-line{white-space:pre}
.terminal-line.prompt-line{color:#28ca41}
.terminal-line.command-line{color:#e0e0e0}
.terminal-line.loading-line{color:#71717a}
.cursor{
  display:inline-block;width:8px;background:#28ca41;
  margin-left:2px;animation:blink 0.8s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ============================================
   Progress Bar
   ============================================ */
.progress-container{
  width:100%;height:4px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;overflow:hidden;margin-top:24px;
}
.progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,#28ca41,#5b9fff);
  border-radius:2px;transition:width 1s ease-out;
}

/* ============================================
   Desktop
   ============================================ */
.desktop{
  position:fixed;inset:0;
  background:var(--desktop-bg);
  opacity:0;transition:opacity 1s ease-out;overflow:hidden;
}
.desktop.visible{opacity:1}

/* ============================================
   Menubar
   ============================================ */
.menubar{
  position:absolute;top:0;left:0;right:0;height:44px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  background:var(--menubar-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--menubar-border);
  z-index:100;
  transform:translateY(-100%);
  transition:transform 0.5s ease-out;
}
.desktop.visible .menubar{transform:translateY(0)}

.menubar-logo{font-size:15px;font-weight:700;color:var(--logo-color);letter-spacing:-0.5px}
.menubar-right{display:flex;align-items:center;gap:12px}
.clock{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:500;color:var(--clock-color);letter-spacing:0.5px;
}

/* ============================================
   Theme Toggle
   ============================================ */
.theme-toggle{
  display:flex;align-items:center;gap:2px;padding:3px;
  border-radius:20px;background:var(--theme-toggle-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.theme-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:none;background:transparent;
  color:var(--theme-btn-color);cursor:pointer;
  transition:all 0.2s ease;outline:none;
  -webkit-tap-highlight-color:transparent;
}
.theme-btn:hover{color:var(--theme-btn-active-color)}
.theme-btn.active{
  background:var(--theme-toggle-active-bg);
  color:var(--theme-btn-active-color);
  box-shadow:var(--theme-toggle-active-shadow);
}

/* ============================================
   Icons
   ============================================ */
.icons-container{position:absolute;top:60px;left:0;right:0;bottom:0;z-index:10}
.icon{
  position:absolute;width:80px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px;border-radius:10px;cursor:pointer;
  opacity:0;transform:scale(0.8);
  transition:background 0.15s ease;
  -webkit-user-select:none;user-select:none;
}
.desktop.visible .icon{
  animation:iconAppear 0.4s ease-out forwards;
  animation-delay:var(--icon-delay,0s);
}
@keyframes iconAppear{to{opacity:1;transform:scale(1)}}
.icon:hover{background:var(--icon-hover-bg)}
.icon.selected{background:var(--icon-selected-bg)}
.icon-graphic{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;font-size:32px;line-height:1;overflow:hidden;
}
.icon-img{width:48px;height:48px;object-fit:cover;border-radius:12px}
.icon-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--icon-label-color);text-shadow:var(--icon-label-shadow);
  text-align:center;word-break:break-word;max-width:76px;line-height:1.2;
}

/* ============================================
   Starfield
   ============================================ */
.starfield{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.star{
  position:absolute;
  width:var(--star-size);height:var(--star-size);
  background:var(--star-color);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  -webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 calc(var(--star-size) * 0.4) var(--star-color));
  animation:twinkle var(--star-duration) ease-in-out infinite var(--star-delay),
             wobble var(--star-wobble) ease-in-out infinite var(--star-delay);
  opacity:calc(var(--star-opacity) * var(--star-base-opacity));
}
@keyframes twinkle{
  0%,100%{opacity:calc(var(--star-opacity) * var(--star-base-opacity))}
  50%{opacity:calc(var(--star-opacity) * var(--star-base-opacity) * 0.2)}
}
@keyframes wobble{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(3px,-2px)}
  50%{transform:translate(-2px,3px)}
  75%{transform:translate(2px,2px)}
}
.pop-star{
  position:fixed;width:24px;height:24px;z-index:9999;pointer-events:none;
  background:currentColor;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  -webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 10px currentColor);
  animation:popStar 0.8s ease-out forwards;
}
@keyframes popStar{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  40%{transform:translate(-50%,-50%) scale(1.3);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ============================================
   Windows
   ============================================ */
.windows-container{position:absolute;inset:0;z-index:200;pointer-events:none}
.window{
  position:absolute;width:500px;max-width:90vw;pointer-events:auto;
  background:var(--window-bg);
  border:1px solid var(--window-border);border-radius:10px;
  box-shadow:var(--window-shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transform:scale(0.92) translateY(8px);opacity:0;
  transition:transform 0.25s ease-out,opacity 0.25s ease-out;
}
.window.window-open{transform:scale(1) translateY(0);opacity:1}
.window.window-closing{
  transform:scale(0.92) translateY(8px);opacity:0;
  transition:transform 0.2s ease-in,opacity 0.2s ease-in;
}
.window-titlebar{
  height:38px;display:flex;align-items:center;padding:0 14px;
  background:var(--window-titlebar-bg);
  border-bottom:1px solid var(--window-border);
  cursor:default;flex-shrink:0;
}
.traffic-lights{display:flex;gap:8px;align-items:center}
.traffic-light{
  width:12px;height:12px;border-radius:50%;cursor:pointer;
  transition:filter 0.15s;
}
.traffic-light.red{background:#ff5f57}
.traffic-light.yellow{background:#ffbd2e}
.traffic-light.green{background:#28ca41}
.traffic-light:hover{filter:brightness(1.2)}
.window-title{
  flex:1;text-align:center;font-size:13px;font-weight:600;
  color:var(--window-text);opacity:0.8;margin-right:54px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.window-content{
  flex:1;overflow-y:auto;padding:24px;
  color:var(--window-text);max-height:60vh;
}
.window-iframe-type .window-content{padding:0}
.window-iframe{width:100%;height:60vh;border:none;display:block}

/* ============================================
   Content Styling
   ============================================ */
.content-cover{width:100%;max-height:240px;object-fit:cover;border-radius:8px;margin-bottom:16px}
.content-body{line-height:1.7;font-size:14px}
.content-body h1,.content-body h2,.content-body h3{margin:16px 0 8px;font-weight:600}
.content-body h1{font-size:22px}
.content-body h2{font-size:18px}
.content-body p{margin:8px 0}
.content-body ul,.content-body ol{margin:8px 0;padding-left:20px}
.content-body li{margin:4px 0}
.content-body img{max-width:100%;border-radius:8px;margin:8px 0}
.content-body a{color:var(--content-link);text-decoration:none}
.content-body a:hover{text-decoration:underline}
.content-body code{
  font-family:'JetBrains Mono',monospace;
  background:var(--content-code-bg);padding:2px 6px;border-radius:4px;font-size:0.9em;
}
.content-body pre{background:var(--content-code-bg);padding:12px;border-radius:8px;overflow-x:auto;margin:8px 0}
.content-body pre code{background:none;padding:0}
.content-body blockquote{border-left:3px solid var(--window-border);padding-left:12px;margin:8px 0;opacity:0.7}

/* ============================================
   Footer
   ============================================ */
.footer{
  position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--footer-color);z-index:20;pointer-events:none;
  opacity:0;transition:opacity 0.5s ease-out 0.5s;
}
.desktop.visible .footer{opacity:1}

/* ============================================
   Toast
   ============================================ */
.toast{
  position:absolute;bottom:40px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--toast-text);
  padding:10px 24px;border-radius:20px;
  font-size:13px;font-weight:500;
  opacity:0;transition:all 0.4s ease;
  z-index:50;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.toast.toast-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================
   Scrollbar
   ============================================ */
.window-content::-webkit-scrollbar{width:6px}
.window-content::-webkit-scrollbar-track{background:transparent}
.window-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width:768px){
  .macbook{width:90vw}
  .macbook-screen{min-height:200px;padding:16px}
  .terminal{font-size:12px}
  .menubar{height:40px;padding:0 12px}
  .menubar-logo{font-size:13px}
  .clock{font-size:12px}
  .window{
    width:100vw!important;max-width:100vw!important;
    height:100vh;border-radius:0;left:0!important;top:0!important;
  }
  .window-content{max-height:calc(100vh - 38px)}
  .window-iframe{height:calc(100vh - 38px)}
  .footer{font-size:10px;bottom:4px}
}