/* Theme variables follow logo colors; adjust as needed */
:root{
  --bg: #f7f9fa;
  --surface: #ffffff;
  --text: #0f1720;
  --muted: #6b7280;
  --accent: #0fb5a8; /* teal accent inspired by logo */
  --glass: rgba(255,255,255,0.6);
}

:root[data-theme='dark']{
  --bg: #071017;
  --surface: rgba(255,255,255,0.03);
  --text: #e6eef0;
  --muted: #9aa6ad;
  --accent: #2fd8c9;
  --glass: rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 80%, #0000  )) ;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.logo{width:220px;max-width:55vw;height:auto;filter:drop-shadow(0 8px 30px rgba(15,18,32,0.12));transition:filter .25s ease, transform .25s ease}
.center .coming-soon{margin-top:20px;font-weight:600;letter-spacing:0.08em;color:var(--muted)}

.theme-toggle{position:fixed;top:18px;right:18px;border:0;background:var(--glass);backdrop-filter:blur(6px);padding:0;border-radius:10px;cursor:pointer;color:var(--text);display:block;min-width:44px;min-height:44px;width:44px;height:44px}
.theme-toggle:active{transform:scale(.98)}

/* Toggle animation and fixed icon layout */
.theme-toggle{transition:transform .24s cubic-bezier(.2,.9,.3,1), background-color .18s ease, color .18s ease}
.theme-toggle.anim{transform:rotate(12deg) scale(1.06)}

.theme-toggle svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transition:opacity .28s ease, transform .28s ease;width:18px;height:18px}
.theme-toggle svg.hidden{opacity:0;transform:translate(-50%,-42%) scale(.9);pointer-events:none}
.theme-toggle svg.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* increase touch target and spacing on small screens */
@media (max-width:480px){
  .theme-toggle{top:12px;right:12px;width:48px;height:48px;border-radius:12px}
  .logo{width:70vw}
}

/* keep other small-screen adjustments */
@media (max-width:360px){
  .logo{width:65vw}
}