:root{
  --bg: #0b1022;
  --bg-soft: #0f172a;
  --card: #0f182d;
  --text: #e5e7eb;
  --muted: #9aa5b1;
  --accent: #f472b6; /* pink */
  --accent-2: #ef4444; /* red */
  --border: rgba(148,163,184,.18);
  --overlay: rgba(17,24,39,.86);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --space: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  font-size:clamp(15px, 2.2vw, 16px);
  background:
    radial-gradient(1400px 900px at 80% -10%, rgba(244,114,182,.08), transparent 70%),
    radial-gradient(1000px 800px at -10% 120%, rgba(239,68,68,.06), transparent 70%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  opacity: 1;
}
.container{max-width:1000px;margin:0 auto;padding:0 20px}
.container-tight{max-width:820px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;color:#fff;text-decoration:none;letter-spacing:.5px;cursor:pointer}

/* Logo pop animation */
@keyframes logoPop{
  0%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.15) rotate(2deg)}
  50%{transform:scale(.95) rotate(-1deg)}
  75%{transform:scale(1.08) rotate(.5deg)}
  100%{transform:scale(1) rotate(0deg)}
}
.logo.logo-pop{animation:logoPop .42s cubic-bezier(.25,.46,.45,.94)}
.nav-toggle{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:10px;padding:8px 12px}
.menu{
  display:flex;gap:10px;
  position:relative;
}

.menu a{
  color:var(--text);
  text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  position:relative;
  box-shadow:
    0 4px 12px rgba(0,0,0,.25),
    0 1px 3px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.05);
  transition:all 0.3s cubic-bezier(.25,.46,.45,.94);
}
/* Enhanced hover effects for depth */
.menu a:hover{
  background:transparent;
  border-color:rgba(244,114,182,.25);
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.5),
    0 0 0 1px rgba(244,114,182,.15);
  transform:translateY(-1px);
}

.menu a:active{
  transform:translateY(0);
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 1px 3px rgba(0,0,0,.5),
    0 0 0 1px rgba(244,114,182,.1);
}

.site-footer{padding:30px 20px;color:var(--muted);text-align:center}

/* Mobile menu with enhanced depth */
@media (max-width: 768px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .menu{
    position:fixed;left:0;right:0;top:64px;
    background:transparent;
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,255,.08);
    display:none;flex-direction:column;padding:12px;
    box-shadow:
      0 10px 40px rgba(0,0,0,.4);
  }
  .menu.open{display:flex}
  
  /* Remove tray shadow effects on mobile */
  .menu::before,
  .menu::after{
    display:none;
  }
}

/* Cards and lists */
.page{padding:24px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}

/* Simple buttons & inputs */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
button, .btn{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#fff;border:none;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.2px}
button.secondary{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.15)}
input, select, textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text);padding:12px;border-radius:12px;outline:none}
input:focus, select:focus, textarea:focus{border-color:rgba(244,114,182,.6);box-shadow:0 0 0 3px rgba(244,114,182,.15)}
textarea{min-height:120px}
.pill{background:rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--muted)}

/* Accessibility & motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}
:root{scroll-padding-top:72px}
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* Simple images */
img {
  opacity: 1;
}