/* shell: reset, background, page container, back link, theme toggle */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  min-height:100vh; position:relative; overflow-x:hidden;
  background:#000; color:#fff;
  font-family:'Segoe UI', Tahoma, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- background ---- */
.bg-layer{position:fixed;inset:0;transition:opacity 1.2s ease;pointer-events:none;z-index:0}
.bg-light{background:linear-gradient(to bottom,#1a3a5c 0%,#2a5f8f 20%,#4a90c2 40%,#7cb342 55%,#558b2f 70%,#33691e 85%,#1b3d0a 100%)}
.bg-dark{background:linear-gradient(to bottom,#000308 0%,#050a15 20%,#0a1220 40%,#0d1a12 55%,#08130a 70%,#050b05 85%,#000000 100%)}
.dark .bg-light{opacity:0} .dark .bg-dark{opacity:1}
.light .bg-light{opacity:1} .light .bg-dark{opacity:0}

/* ---- page shell ---- */
.page-container{position:relative;z-index:2;padding:80px 60px 60px;max-width:900px;margin:0 auto}
.divider{height:2px;background:linear-gradient(to right,transparent,rgba(212,234,255,.6),transparent);margin-bottom:30px;box-shadow:0 0 10px rgba(176,210,240,.4)}

/* ---- back link ---- */
.back-link{position:fixed;top:25px;left:25px;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#fff;text-decoration:none;font-size:14px;z-index:100;transition:background .2s,border-color .2s;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.back-link:hover,.back-link:active{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.4)}

/* ---- theme toggle ---- */
.theme-toggle{position:fixed;top:25px;right:25px;width:78px;height:36px;border-radius:20px;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);cursor:pointer;z-index:100;box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 4px 15px rgba(0,0,0,.3);overflow:hidden;transition:border-color .4s ease}
.theme-toggle:hover{border-color:rgba(255,255,255,.4)}
.track-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;transition:opacity .4s ease;pointer-events:none}
.track-sun-icon{left:10px;color:rgba(255,200,80,.9);text-shadow:0 0 6px rgba(255,180,40,.8)}
.track-moon-icon{right:10px;color:rgba(200,220,255,.9);text-shadow:0 0 6px rgba(150,180,255,.6)}
.dark .track-sun-icon{opacity:.3} .dark .track-moon-icon{opacity:1}
.light .track-sun-icon{opacity:1} .light .track-moon-icon{opacity:.3}
.toggle-thumb{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;transition:transform .5s cubic-bezier(.4,1.4,.6,1),background .5s ease,box-shadow .5s ease;overflow:hidden}
.light .toggle-thumb{transform:translateX(0);background:radial-gradient(circle at 30% 30%,#fff5b8 0%,#ffcc33 40%,#ff9500 100%);box-shadow:0 0 12px rgba(255,180,40,.8),0 0 20px rgba(255,150,20,.5),inset 0 -2px 4px rgba(200,100,0,.4),inset 0 2px 4px rgba(255,255,200,.6)}
.dark .toggle-thumb{transform:translateX(42px);background:radial-gradient(circle at 35% 35%,#e8e8f0 0%,#b8bcc8 50%,#6a6d7a 100%);box-shadow:0 0 10px rgba(180,200,255,.5),0 0 18px rgba(120,150,220,.3),inset 0 -2px 4px rgba(60,60,80,.5),inset 0 2px 4px rgba(255,255,255,.6)}
.crater{position:absolute;border-radius:50%;background:rgba(80,80,100,.4);transition:opacity .4s ease}
.light .crater{opacity:0} .dark .crater{opacity:1}
.crater-1{width:6px;height:6px;top:6px;left:7px}
.crater-2{width:4px;height:4px;top:15px;left:15px}
.crater-3{width:3px;height:3px;top:8px;left:17px}

@media (max-width:768px){
  .page-container{padding:75px 20px 40px}
  .back-link{top:max(15px,env(safe-area-inset-top));left:15px;padding:8px 14px;font-size:13px}
  .theme-toggle{top:max(15px,env(safe-area-inset-top));right:15px;width:68px;height:32px}
  .toggle-thumb{width:24px;height:24px}
  .dark .toggle-thumb{transform:translateX(36px)}
  .crater-1{width:5px;height:5px;top:5px;left:5px}
  .crater-2{width:3px;height:3px;top:13px;left:13px}
  .crater-3{width:3px;height:3px;top:6px;left:14px}
  .divider{margin-bottom:22px}
}
@media (max-width:380px){ .page-container{padding:70px 14px 30px} }