:root{
    --bg: #0b0e14; --panel:#131722; --muted:#9aa4b2; --text:#e6edf3; --brand:#8b5cf6; --accent:#10b981; --glow: 0 0 40px rgba(139,92,246,.35);
    --radius: 18px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  [data-theme="light"]{ --bg:#f7f7fb; --panel:#ffffff; --muted:#6b7280; --text:#0b0e14; --brand:#7c3aed; --accent:#059669; --glow: 0 0 22px rgba(124,58,237,.25); --shadow: 0 10px 24px rgba(0,0,0,.08); }
  *{ box-sizing:border-box }
  html,body{ height:100%; }
  body{
    margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    background: radial-gradient(1000px 600px at 20% -10%, rgba(139,92,246,.15), transparent),
                radial-gradient(900px 500px at 110% 20%, rgba(16,185,129,.15), transparent), var(--bg);
    color:var(--text);
    overflow: hidden; /* SPA layout */
  }
  /* Layout */
  .app{ display:grid; grid-template-columns: 280px 1fr; grid-template-rows: 70px 1fr; height:100vh; gap:18px; padding:18px; }
  header{ grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 18px; position:relative; overflow:hidden }
  header .shine{ position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(300px 150px at var(--mx,50%) -10%, rgba(255,255,255,.12), transparent 60%); mix-blend-mode: overlay; }
  .brand{ display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:.3px }
  .badge{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: var(--glow); }
  
  aside{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; display:flex; flex-direction:column; gap:12px; overflow:auto }
  .search{ position:relative }
  .search input{ width:100%; background:#0f1421; color:var(--text); padding:12px 40px 12px 12px; border:none; outline:none; border-radius:12px }
  [data-theme="light"] .search input{ background:#f0f2f8; color:var(--text) }
  .search svg{ position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:.6 }
  nav{ display:flex; flex-direction:column; gap:6px }
  .nav-btn{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; cursor:pointer; border:1px solid transparent }
  .nav-btn:hover{ background:rgba(139,92,246,.08); border-color: rgba(139,92,246,.25) }
  .nav-btn.active{ background:linear-gradient(120deg, rgba(139,92,246,.12), rgba(16,185,129,.10)); border-color: rgba(139,92,246,.25) }
  
  main{ position:relative; overflow:hidden; }

  .panel{
    position:absolute; inset:0;
    background:var(--panel);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:22px; overflow:auto;
  
    /* existing transition/animation */
    opacity:0;
    transform: translateY(20px) scale(.98);
    transition: all .45s cubic-bezier(.2,.7,.1,1);
  
    /* NEW: inactive panels shouldn't catch clicks and stay behind */
    pointer-events: none;
    z-index: 0;
  }
  
  .panel.active{
    opacity:1;
    transform: none;
  
    /* NEW: only active panel is clickable and above others */
    pointer-events: auto;
    z-index: 1;
  }
  
  
  /* Hero */
  .hero{ display:grid; gap:22px; grid-template-columns: 1.3fr .7fr; align-items:center; }
  .hero h1{ font-size: clamp(26px, 3vw, 42px); margin:0; line-height:1.1 }
  .hero p{ color:var(--muted); margin:0 }
  .cta{ display:flex; gap:12px; margin-top:14px }
  .btn{ padding:10px 14px; border-radius:12px; border:1px solid rgba(139,92,246,.35); background:rgba(139,92,246,.12); color:var(--text); cursor:pointer }
  .btn.secondary{ border-color: rgba(255,255,255,.15); background:transparent }
  .btn:hover{ filter: brightness(1.08) }
  
  /* 3D-ish card */
  .tilt-wrap{ perspective: 900px; }
  .tilt{ width:100%; height:260px; border-radius:18px; background:
    linear-gradient(120deg, rgba(139,92,246,.18), rgba(16,185,129,.18)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300"><defs><radialGradient id="g" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23ffffff22"/><stop offset="100%" stop-color="%2300000000"/></radialGradient></defs><rect width="100%" height="100%" fill="%230b0e14"/><circle cx="300" cy="150" r="150" fill="url(%23g)"/></svg>') center/cover no-repeat;
    box-shadow: var(--glow), var(--shadow);
    transform-style: preserve-3d; position:relative; overflow:hidden; display:grid; place-items:center
  }
  .tilt h3{ transform: translateZ(60px); font-size: clamp(18px, 2.5vw, 28px); }
  .tilt .spark{ position:absolute; inset:-20%; pointer-events:none; background: radial-gradient(600px 300px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 40%); mix-blend-mode: overlay; }
  
  /* Cards */
  .grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:16px }
  .card{ background: rgba(255,255,255,.03); border:1px solid rgba(139,92,246,.25); padding:16px; border-radius:16px }
  .muted{ color:var(--muted) }
  
  /* Milestones / timeline */
  .timeline{ position:relative; margin:10px 0 0 8px; }
  .timeline::before{ content:""; position:absolute; left:10px; top:0; bottom:0; width:3px; background: linear-gradient(var(--brand), transparent); border-radius:3px }
  .t-item{ position:relative; margin-left:28px; padding:12px 14px; background:rgba(255,255,255,.03); border:1px solid rgba(139,92,246,.25); border-radius:14px }
  .t-item::before{ content:""; position:absolute; left:-20px; top:16px; width:12px; height:12px; background:var(--brand); border-radius:50%; box-shadow:0 0 0 3px rgba(139,92,246,.25) }
  
  /* Goals */
  .goal-input{ display:flex; gap:10px; margin:10px 0 }
  .goal-input input{ flex:1; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--text) }
  .goals li{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px dashed rgba(139,92,246,.25); margin:6px 0 }
  .goals li.completed{ opacity:.6; text-decoration: line-through }
  
  /* Footer */
  footer{ margin-top:20px; color:var(--muted) }
  
  /* Responsive */
  @media (max-width: 980px){ .app{ grid-template-columns: 1fr; grid-template-rows: 70px auto 1fr } aside{ order:3; height:40vh } main{ order:2 } }


  #bg-stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* behind everything */
    background: var(--bg); /* fallback background color */
  }
  
  /* Photo background for the tilt card */
.tilt--photo{
  background:
    linear-gradient(120deg, rgba(139,92,246,.18), rgba(16,185,129,.18)),
    url('./img/me.jpg') center/cover no-repeat;
}