* { box-sizing: border-box; }
    html { color-scheme: dark; }
    body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
      color: #EBEFF4; font: 14.5px/1.6 Inter, system-ui, sans-serif; letter-spacing: -.01em;
      background:
        radial-gradient(1000px 560px at 50% -14%, rgba(90,162,255,.16), transparent 64%),
        linear-gradient(180deg, #050506, #000); }
    .card { width: min(400px, 94vw); border: 1px solid rgb(255 255 255 / .18); border-radius: 20px;
      background: rgba(30,30,34,.72); backdrop-filter: blur(28px);
      box-shadow: 0 40px 100px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .07); padding: 30px 28px 24px; }
    .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .brand img { height: 22px; }
    .brand span { font-size: 10px; letter-spacing: .18em; color: #53B1FF; border: 1px solid rgb(32 128 255 / .4); border-radius: 999px; padding: 3px 9px; }
    .tabs { display: flex; gap: 4px; background: rgb(0 0 0 / .25); border: 1px solid rgb(255 255 255 / .1); border-radius: 999px; padding: 3px; margin-bottom: 20px; }
    .tabs button { flex: 1; padding: 8px 0; border: 0; border-radius: 999px; background: none; color: #67759B; font: inherit; font-weight: 650; font-size: 12.5px; cursor: pointer; }
    .tabs button.active { color: white; background: linear-gradient(180deg, #4C9DFF, #134EF2); }
    form { display: grid; gap: 12px; }
    label { display: grid; gap: 5px; font-size: 10.5px; letter-spacing: .07em; color: #67759B; }
    input { height: 42px; border-radius: 11px; border: 1px solid rgb(255 255 255 / .18); background: rgb(0 0 0 / .25); color: #EBEFF4; padding: 0 13px; font: inherit; outline: 0; transition: .16s ease; }
    input:focus { border-color: rgb(32 128 255 / .6); box-shadow: 0 0 0 3px rgb(32 128 255 / .14); }
    .go { height: 44px; margin-top: 4px; border: 0; border-radius: 12px; font: inherit; font-weight: 650; color: white; cursor: pointer;
      background: linear-gradient(180deg, #6aabff, #2f6bd8); box-shadow: 0 8px 24px rgb(60 120 255 / .28); transition: .15s ease; }
    .go:hover { transform: translateY(-1px); }
    .msg { min-height: 20px; margin-top: 10px; font-size: 12.5px; color: #FC8985; }
    .msg.ok { color: #7CE3A8; }
    .foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .1); text-align: center; font-size: 11.5px; color: #67759B; }
    .foot a { color: #8FB8E8; }
    [data-pane] { display: none; } .card[data-mode="login"] [data-pane="login"], .card[data-mode="register"] [data-pane="register"] { display: grid; }