:root {
      --gold: #C9A84C;
      --gold-light: #E8D08A;
      --amber: #D4732A;

      --ivory: #FAF8F4;
      --ivory-dark: #F2EDE4;

      --charcoal: #1A1814;
      --charcoal-2: #2C2820;

      --warm-grey: #6B6560;

      --border: rgba(201,168,76,0.18);

      --shadow:
        0 8px 40px rgba(26,24,20,0.10);

      --radius: 14px;

      --ff-serif: 'Cormorant Garamond', Georgia, serif;
      --ff-sans: 'Inter', system-ui, sans-serif;
    }

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

    body {
      font-family: var(--ff-sans);
      background: var(--ivory);
      color: var(--charcoal);

      min-height: 100vh;

      display: flex;
      flex-direction: column;
    }

    .navbar {
      position: sticky;
      top: 0;
      z-index: 100;

      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 0 2.5rem;
      height: 64px;

      background: rgba(250,248,244,0.92);

      backdrop-filter: blur(12px);

      border-bottom: 1px solid var(--border);
    }

    .nav-logo {
      font-family: var(--ff-serif);
      font-size: 1.5rem;
      font-weight: 600;

      color: var(--charcoal);

      text-decoration: none;
    }

    .nav-logo span {
      color: var(--gold);
    }

    .nav-home {
      font-size: 0.8rem;
      font-weight: 600;

      letter-spacing: 0.08em;
      text-transform: uppercase;

      color: var(--warm-grey);

      text-decoration: none;

      transition: 0.2s;
    }

    .nav-home:hover {
      color: var(--gold);
    }

    .page {
      flex: 1;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 3rem 1.25rem;
    }

    .card {
      width: 100%;
      max-width: 480px;

      background: #fff;

      border: 1px solid var(--border);
      border-radius: var(--radius);

      box-shadow: var(--shadow);

      overflow: hidden;

      animation: cardIn .45s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes cardIn {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card-top {
      background:
        linear-gradient(
          135deg,
          var(--charcoal) 0%,
          var(--charcoal-2) 100%
        );

      padding: 2.25rem 2rem 2rem;

      text-align: center;

      position: relative;
      overflow: hidden;
    }

    .card-top::before {
      content: '';

      position: absolute;
      inset: 0;

      background:
        radial-gradient(
          ellipse at 50% 0%,
          rgba(201,168,76,0.18) 0%,
          transparent 70%
        );

      pointer-events: none;
    }

    .card-ornament {
      font-family: var(--ff-serif);

      font-size: 2.2rem;

      color: var(--gold);

      letter-spacing: .15em;

      margin-bottom: .6rem;

      opacity: .9;
    }

    .card-title {
      font-family: var(--ff-serif);

      font-size: 1.65rem;
      font-weight: 600;

      color: #fff;

      margin-bottom: .5rem;
    }

    .card-title em {
      color: var(--gold-light);
      font-style: italic;
    }

    .card-subtitle {
      font-size: .82rem;
      line-height: 1.5;
      font-weight: 300;

      color: rgba(255,255,255,.58);
    }

    .card-body {
      padding: 2rem;
    }

    .why-box {
      background: var(--ivory);

      border: 1px solid var(--border);
      border-radius: 8px;

      padding: 1rem 1.1rem;

      margin-bottom: 1.75rem;

      font-size: .81rem;
      line-height: 1.55;

      color: var(--warm-grey);
    }

    .why-box strong {
      display: block;

      font-size: .72rem;
      font-weight: 600;

      letter-spacing: .09em;
      text-transform: uppercase;

      color: var(--gold);

      margin-bottom: .3rem;
    }

    .steps {
      display: flex;
      flex-direction: column;

      gap: .75rem;

      margin-bottom: 1.75rem;
    }

    .step {
      display: flex;
      align-items: center;

      gap: .9rem;

      padding: .9rem 1rem;

      border: 1px solid var(--border);
      border-radius: 9px;

      background: var(--ivory);

      transition: .25s;
    }

    .step.active {
      border-color: rgba(201,168,76,.5);
      background: rgba(201,168,76,.06);
    }

    .step.done {
      border-color: rgba(46,204,113,.35);
      background: rgba(46,204,113,.05);
    }

    .step.disabled {
      opacity: .45;
    }

    .step-num {
      width: 30px;
      height: 30px;

      border-radius: 50%;

      border: 1.5px solid var(--border);

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: .78rem;
      font-weight: 600;

      color: var(--warm-grey);

      background: #fff;

      flex-shrink: 0;

      transition: .25s;
    }

    .step.done .step-num {
      background: #2ECC71;
      border-color: #2ECC71;
      color: #fff;
    }

    .step.active .step-num {
      border-color: var(--gold);
      color: var(--gold);
    }

    .step-info {
      flex: 1;
      min-width: 0;
    }

    .step-label {
      font-size: .82rem;
      font-weight: 600;

      color: var(--charcoal);

      margin-bottom: .15rem;
    }

    .step-desc {
      font-size: .74rem;
      color: var(--warm-grey);
    }

    .step-badge {
      font-size: .7rem;
      font-weight: 600;

      padding: 2px 8px;

      border-radius: 999px;

      flex-shrink: 0;
    }

    .step-badge.connected {
      background: rgba(46,204,113,.15);
      color: #1a8a4a;
    }

    .step-badge.pending {
      background: rgba(201,168,76,.15);
      color: #a07a20;
    }

    .avatar-chip {
      display: flex;
      align-items: center;

      gap: .5rem;

      margin-top: .35rem;

      font-size: .75rem;

      color: var(--warm-grey);
    }

    .avatar-chip img {
      width: 22px;
      height: 22px;

      border-radius: 50%;

      object-fit: cover;

      border: 1px solid var(--border);
    }

    .avatar-chip span {
      font-weight: 600;
      color: var(--charcoal);
    }

    .btn-actions {
      display: flex;
      flex-direction: column;

      gap: .65rem;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;

      gap: .65rem;

      width: 100%;

      padding: .9rem 1.25rem;

      border: none;
      border-radius: 9px;

      font-family: var(--ff-sans);
      font-size: .88rem;
      font-weight: 600;

      cursor: pointer;

      transition: .22s;

      text-decoration: none;
    }

    .btn svg {
      flex-shrink: 0;
    }

    .btn:disabled {
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }

    .btn-connected {
      background: #D9D9D9 !important;
      color: #5E5E5E !important;
      opacity: 1 !important;
    }

    .btn-discord {
      background: #5865F2;
      color: #fff;
    }

    .btn-discord:hover:not(:disabled) {
      background: #4752C4;
      transform: translateY(-1px);

      box-shadow:
        0 4px 16px rgba(88,101,242,.35);
    }

    .btn-roblox {
      background: var(--charcoal);
      color: #fff;
    }

    .btn-roblox:hover:not(:disabled) {
      background: var(--charcoal-2);
      transform: translateY(-1px);

      box-shadow:
        0 4px 16px rgba(26,24,20,.25);
    }

    .btn-verify {
      background:
        linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--amber) 100%
        );

      color: #fff;

      font-weight: 600;
    }

    .btn-verify:hover:not(:disabled) {
      transform: translateY(-2px);

      box-shadow:
        0 6px 20px rgba(201,168,76,.4);
    }

    .divider {
      display: flex;
      align-items: center;

      gap: .75rem;

      margin: .25rem 0;

      font-size: .72rem;

      color: var(--warm-grey);

      letter-spacing: .06em;
    }

    .divider::before,
    .divider::after {
      content: '';

      flex: 1;
      height: 1px;

      background: var(--border);
    }

    .status {
      margin-top: 1.25rem;

      padding: .85rem 1rem;

      border-radius: 8px;

      font-size: .81rem;
      line-height: 1.5;

      display: none;
    }

    .status.show {
      display: block;
    }

    .status.success {
      background: rgba(46,204,113,.1);
      color: #1a6b3a;
      border: 1px solid rgba(46,204,113,.25);
    }

    .status.error {
      background: rgba(231,76,60,.08);
      color: #8b2a1e;
      border: 1px solid rgba(231,76,60,.2);
    }

    .status.info {
      background: rgba(201,168,76,.1);
      color: #6b500a;
      border: 1px solid rgba(201,168,76,.25);
    }

    .status-title {
      font-weight: 600;
      margin-bottom: .2rem;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spinner {
      width: 16px;
      height: 16px;

      border-radius: 50%;

      border: 2px solid rgba(255,255,255,.35);
      border-top-color: #fff;

      animation: spin .7s linear infinite;
    }

    .card-footer {
      padding: 1rem 2rem 1.5rem;

      text-align: center;

      font-size: .73rem;

      color: var(--warm-grey);

      border-top: 1px solid var(--border);
    }

    .card-footer a {
      color: var(--gold);
      text-decoration: none;
    }

    .card-footer a:hover {
      text-decoration: underline;
    }

    @media (max-width: 520px) {
      .navbar {
        padding: 0 1.25rem;
      }

      .card-body {
        padding: 1.5rem;
      }
    }