*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0c0d10;
      --surface: #13151a;
      --surface-2: #1a1d24;
      --border: #22252e;
      --border-h: #2e3340;
      --text: #e2e4eb;
      --text-2: #8891a4;
      --text-3: #4d5568;
      --accent: #5865f2;
      --accent-h: #4752c4;
      --green: #3ecf8e;
      --green-soft: rgba(62,207,142,0.1);
      --green-border: rgba(62,207,142,0.2);
    }

    html { height: 100%; }

    body {
      font-family: "Manrope", sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100%;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 20px;
      padding-bottom: max(24px, env(safe-area-inset-bottom));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .orb {
      position: fixed; border-radius: 50%;
      filter: blur(70px); pointer-events: none; z-index: 0;
      animation: drift 14s ease-in-out infinite alternate;
    }
    .orb-1 {
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(88,101,242,0.16) 0%, transparent 70%);
      top: -100px; left: -100px;
    }
    .orb-2 {
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(62,207,142,0.09) 0%, transparent 70%);
      bottom: -80px; right: -80px;
      animation-delay: -7s;
    }
    @media(max-width:480px) {
      .orb-1 { width:240px; height:240px; top:-60px; left:-60px; }
      .orb-2 { width:200px; height:200px; bottom:-50px; right:-50px; }
    }
    @keyframes drift {
      from { transform: translate(0,0); }
      to   { transform: translate(24px,16px); }
    }

    .wrap {
      position: relative; z-index: 1;
      width: 100%; max-width: 380px;
      display: flex; flex-direction: column; align-items: center;
    }

    .status-badge {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 5px 13px 5px 9px; border-radius: 99px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 12px; font-weight: 600; color: var(--text-2);
      margin-bottom: 24px;
    }
    .status-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 6px rgba(62,207,142,0.55);
      animation: blink 2.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes blink {
      0%,100% { opacity:1; }
      50%      { opacity:0.4; }
    }

    .logo {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 28px;
    }
    .logo-mark {
      width: 40px; height: 40px; border-radius: 11px;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 24px rgba(88,101,242,0.3);
      flex-shrink: 0;
    }
    .logo-name { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.4px; }

    .card {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 28px 24px 24px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
      animation: slide-up 0.4s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes slide-up {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:none; }
    }
    @media(max-width:400px) {
      .card { padding: 22px 16px 20px; border-radius: 14px; }
    }

    .card-head { text-align: center; margin-bottom: 22px; }
    .card-head h1 {
      font-size: 22px; font-weight: 800; color: #fff;
      letter-spacing: -0.4px; margin-bottom: 6px;
    }
    .card-head p { font-size: 13px; color: var(--text-2); line-height: 1.6; }
    @media(max-width:360px) {
      .card-head h1 { font-size:19px; }
      .card-head p  { font-size:12px; }
    }

    .auth-btns { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }

    .auth-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 12px 18px; border-radius: 11px;
      font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700;
      text-decoration: none; border: 1px solid transparent; cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .auth-btn:active { transform: scale(0.97) !important; }

    .btn-discord {
      background: var(--accent); color: #fff;
      box-shadow: 0 4px 18px rgba(88,101,242,0.28);
    }
    .btn-discord:hover { box-shadow: 0 6px 24px rgba(88,101,242,0.42); transform: translateY(-1px); }

    .btn-github { background: #1a1d22; color: #cdd5e0; border-color: #2d333b; }
    .btn-github:hover { background: #21262d; border-color: #3d444d; transform: translateY(-1px); }

    .btn-ico { display: flex; align-items: center; flex-shrink: 0; }

    .or-divider {
      display: flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 700; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 0.07em;
    }
    .or-divider::before, .or-divider::after {
      content: ""; flex: 1; height: 1px; background: var(--border);
    }

    .sect-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 16px 0; font-size: 11px; font-weight: 700;
      color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em;
    }
    .sect-divider::before, .sect-divider::after {
      content: ""; flex: 1; height: 1px; background: var(--border);
    }

    .feat-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .feat-group {
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 11px; padding: 10px 9px 9px;
      display: flex; flex-direction: column; gap: 5px;
    }
    .feat-group-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.07em; color: var(--text-3);
      padding: 0 3px; margin-bottom: 3px;
    }
    .feat {
      display: flex; align-items: center; gap: 7px;
      padding: 5px 6px; border-radius: 7px;
      background: rgba(255,255,255,0.025);
      font-size: 11.5px; color: var(--text-2); font-weight: 500; line-height: 1.3;
    }
    .feat-icon {
      width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
      background: var(--green-soft); border: 1px solid var(--green-border);
      display: flex; align-items: center; justify-content: center;
      color: var(--green);
    }
    @media(max-width:360px) {
      .feat-groups { grid-template-columns: 1fr; }
    }

    .foot {
      margin-top: 16px; text-align: center;
      font-size: 12px; color: var(--text-3); line-height: 1.7;
    }
    .foot a { color: var(--text-2); text-decoration: none; font-weight: 600; }
    .foot a:hover { color: var(--text); }

    * { user-select: none; -webkit-user-select: none; }
    a, button { user-select: none !important; }