:root { color-scheme: dark; }
    html { min-height: 100%; }
    body { min-height: 100dvh; margin: 0; }
    :focus-visible { outline: 2px solid #00f5a0; outline-offset: 4px; }
    button, summary { cursor: pointer; }
    summary { list-style: none; }
    summary::-webkit-details-marker { display: none; }
    .material-symbols-outlined { line-height: 1; flex-shrink: 0; }
    .auth-dialog { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; }
    .auth-dialog::backdrop { background: rgb(3 7 18 / .85); backdrop-filter: blur(8px); }
    @media (max-width: 639px) {
        header > div { padding-left: 1rem; padding-right: 1rem; }
        footer > div > div { flex-wrap: wrap; justify-content: center; text-align: center; }
        footer a { font-size: 11px; }
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; }
    }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: #030712;
      color: #F8FAFC;
    }
    .font-mono-code {
      font-family: 'JetBrains Mono', monospace;
    }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
    /* Deep space background with refined subtle glow grid */
    .spatial-bg {
      background-color: #030712;
      background-image: 
        radial-gradient(at 0% 0%, rgba(0, 245, 160, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 20%, rgba(0, 216, 246, 0.07) 0px, transparent 45%),
        radial-gradient(at 50% 100%, rgba(3, 105, 161, 0.06) 0px, transparent 50%),
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 56px 56px, 56px 56px;
    }
    .glow-header-text {
      text-shadow: 0 0 35px rgba(0, 255, 204, 0.45), 0 0 15px rgba(0, 245, 160, 0.3);
    }