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

    :root {
      --bg: #f4f2ee;
      --white: #ffffff;
      --text: #12151f;
      --text-2: #444c5e;
      --text-3: #8891a6;
      --accent: #1847e3;
      --accent-hover: #1238c0;
      --accent-light: #eef1fd;
      --accent-muted: #c7d0f9;
      --border: #e0dcd4;
      --border-light: #ebebee;
      --shadow: 0 1px 3px rgba(18,21,31,.06);
      --shadow-md: 0 8px 24px rgba(18,21,31,.10);
      --radius: 10px;
      --radius-pill: 100px;
      --error: #dc2626;
      --error-light: #fef2f2;
      --error-border: #fecaca;
      --warning: #d97706;
      --warning-light: #fffbeb;
      --warning-border: #fde68a;
    }

    html { font-size: 16px; }
    body {
      font-family: 'Onest', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Logo ── */
    .auth-logo {
      font-family: 'Geologica', sans-serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.04em;
      color: var(--text);
      text-decoration: none;
      margin-bottom: 32px;
      display: block;
      text-align: center;
    }
    .auth-logo span { color: var(--accent); }

    /* Beta badge */
    .beta-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--accent);
      background: var(--accent-light);
      border: 1px solid var(--accent-muted);
      border-radius: var(--radius-pill);
      padding: 3px 10px;
      margin-bottom: 16px;
    }
    .beta-badge::before {
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse 2s infinite;
    }

    /* ── Card ── */
    .auth-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px 28px 28px;
      width: 100%;
      max-width: 440px;
      box-shadow: var(--shadow-md);
    }

    .auth-header { text-align: center; margin-bottom: 28px; }

    .auth-title {
      font-family: 'Geologica', sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--text);
      margin-bottom: 6px;
      text-align: center;
    }
    .auth-subtitle {
      font-size: 14px;
      color: var(--text-3);
      text-align: center;
      margin-bottom: 28px;
      line-height: 1.5;
    }

    /* ── Telegram button ── */
    .btn-telegram {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 12px 20px;
      background: #229ED9;
      color: #fff;
      font-family: 'Onest', sans-serif;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: background .15s, box-shadow .15s;
      text-decoration: none;
    }
    .btn-telegram:hover {
      background: #1a8bbf;
      box-shadow: 0 2px 10px rgba(34,158,217,.3);
    }
    .btn-telegram svg { width: 20px; height: 20px; flex-shrink: 0; }

    .tg-button-container {
      width: 100%;
    }

    .tg-auth-button {
        width: fit-content;
        height: 44px;
        padding: 0 28px;
        text-transform: none;
        background: #BBBBBB;
        border-radius: 22px;
        cursor: default;
        font-weight: 600;
        font-size: 16px;
        display: flex;
        align-items: center;
        font-family: -apple-system, system-ui, Roboto, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: white;
        position: relative;
        overflow: hidden;
        user-select: none;
        border: none;
        margin: 0 auto !important;
    }

    /* Invite input */
    .invite-input-wrap {
      position: relative;
      margin-bottom: 14px;
    }
    .invite-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      display: block;
      margin-bottom: 6px;
    }
    .invite-input {
      width: 100%;
      font-family: 'Geologica', sans-serif;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--text);
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 44px 14px 16px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
      text-align: center;
    }
    .invite-input::placeholder {
      color: var(--text-3);
      font-family: 'Onest', sans-serif;
      font-size: 14px;
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
    }
    .invite-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(24,71,227,.08);
      background: var(--white);
    }
    .invite-input.error {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgba(220,38,38,.08);
    }
    .invite-input.warning {
      border-color: var(--warning);
      box-shadow: 0 0 0 3px rgba(217,119,6,.08);
    }

    .invite-clear {
      position: absolute;
      right: 12px;
      bottom: 12px;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--border);
      border: none;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      color: var(--text-3);
      font-size: 14px;
      transition: background .15s;
    }
    .invite-clear.visible { display: flex; }
    .invite-clear:hover { background: var(--border-light); color: var(--text-2); }

   /* No invite section */
    .no-invite {
      margin-top: 20px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
    }
    .no-invite-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }
    .no-invite-text {
      font-size: 12.5px;
      color: var(--text-3);
      line-height: 1.5;
      margin-bottom: 10px;
    }
    .btn-ghost-sm {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'Onest', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
      padding: 6px 12px;
      border: 1px solid var(--accent-muted);
      border-radius: var(--radius-pill);
      background: var(--accent-light);
      transition: background .15s;
      cursor: pointer;
    }
    .btn-ghost-sm:hover { background: #d4dcfb; }


    /* ── Divider ── */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
      color: var(--text-3);
      font-size: 13px;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ── Email form ── */
    .form-group { margin-bottom: 14px; }
    .form-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      display: block;
      margin-bottom: 6px;
    }
    .form-input {
      width: 100%;
      font-family: 'Onest', sans-serif;
      font-size: 14px;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 11px 14px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-input::placeholder { color: var(--text-3); }
    .form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(24,71,227,.08);
    }
    .form-input.error {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgba(220,38,38,.08);
    }

    .checkbox-group.error {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgba(220,38,38,.08);
    }

    .btn-primary {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px 20px;
      background: var(--accent);
      color: var(--white);
      font-family: 'Onest', sans-serif;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: background .15s, box-shadow .15s;
      margin-top: 4px;
    }
    .btn-primary:hover {
      background: var(--accent-hover);
      box-shadow: 0 2px 10px rgba(24,71,227,.25);
    }

    /* ── Role note ── */
    .role-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--accent-light);
      border: 1px solid var(--accent-muted);
      border-radius: var(--radius);
      padding: 12px 14px;
      margin-top: 20px;
    }
    .role-note-icon {
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .role-note-text {
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.5;
    }
    .role-note-text strong { color: var(--accent); }

    /* ── Footer ── */
    .auth-footer {
      margin-top: 20px;
      font-size: 12px;
      color: var(--text-3);
      text-align: center;
      line-height: 1.6;
    }
    .auth-footer a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

    /* ── View toggle link ── */
    .toggle-view {
      text-align: center;
      margin-top: 18px;
      font-size: 13.5px;
      color: var(--text-2);
    }
    .toggle-view a {
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }
    .toggle-view a:hover { text-decoration: underline; }

    /* register view hidden by default */
    #register-extra { display: none; }

    /* Progress */
    .progress-wrap {
      width: 100%;
      max-width: 440px;
      margin-bottom: 20px;
    }
    .progress-steps {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .progress-step {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-3);
    }
    .progress-step.done { color: var(--accent); }
    .progress-step.active { color: var(--text); }
    .progress-dot {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px;
      font-weight: 700;
      background: var(--white);
      color: var(--text-3);
      flex-shrink: 0;
    }
    .progress-step.done .progress-dot {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--white);
    }
    .progress-step.active .progress-dot {
      border-color: var(--accent);
      color: var(--accent);
    }
    .progress-line {
      flex: 1;
      height: 2px;
      background: var(--border);
      margin: 0 6px;
    }
    .progress-line.done { background: var(--accent); }
 
     /* Invite badge */
    .invite-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #16a34a;
      background: #dcfce7;
      border: 1px solid #bbf7d0;
      border-radius: var(--radius-pill);
      padding: 3px 10px;
      margin-bottom: 16px;
    }

    /* Section separator */
    .form-section {
      margin-bottom: 20px;
    }
    .form-section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-3);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-light);
    }


    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .form-group { margin-bottom: 12px; }
    .form-group:last-child { margin-bottom: 0; }

    .form-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      display: block;
      margin-bottom: 5px;
    }
    .form-label .req { color: var(--accent); }

    .form-input, .form-select, .form-textarea {
      width: 100%;
      font-family: 'Onest', sans-serif;
      font-size: 14px;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 14px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(24,71,227,.08);
      background: var(--white);
    }
    .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238891a6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }

    .form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

    .form-hint {
      font-size: 12px;
      color: var(--text-3);
      margin-top: 4px;
      line-height: 1.4;
    }

    /* Role tabs */
    .role-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 4px;
    }
    .role-tab {
      font-family: 'Onest', sans-serif;
      font-size: 13px;
      font-weight: 500;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--border);
      background: var(--bg);
      color: var(--text-2);
      cursor: pointer;
      transition: all .15s;
    }
    .role-tab:hover { border-color: var(--accent-muted); color: var(--accent); background: var(--accent-light); }
    .role-tab.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

    /* Checkbox */
    .checkbox-group {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      cursor: pointer;
    }
    .checkbox-group input[type="checkbox"] {
      width: 16px; height: 16px;
      margin-top: 1px;
      accent-color: var(--accent);
      cursor: pointer;
      flex-shrink: 0;
    }
    .checkbox-label {
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.5;
      cursor: pointer;
    }
    .checkbox-label a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

    .form-footer-note {
      text-align: center;
      margin-top: 14px;
      font-size: 12px;
      color: var(--text-3);
    }

    .card-header {
      margin-bottom: 24px;
    }
    .card-title {
      font-family: 'Geologica', sans-serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin-bottom: 4px;
    }
    .card-subtitle {
      font-size: 13.5px;
      color: var(--text-3);
      line-height: 1.5;
    }

    /* Error/warning states */
    .state-msg {
      display: none;
      align-items: flex-start;
      gap: 9px;
      border-radius: var(--radius);
      padding: 11px 13px;
      margin-bottom: 14px;
      font-size: 13px;
      line-height: 1.5;
    }
    .state-msg.visible { display: flex; }
    .state-msg-icon { font-size: 15px; flex-shrink: 0; margin-top: 0px; }
    .state-msg-text { color: var(--text-2); }
    .state-msg-text strong { display: block; margin-bottom: 2px; }

    .state-error {
      background: var(--error-light);
      border: 1px solid var(--error-border);
    }
    .state-error .state-msg-text strong { color: var(--error); }

    .state-warning {
      background: var(--warning-light);
      border: 1px solid var(--warning-border);
    }
    .state-warning .state-msg-text strong { color: var(--warning); }

    /* Success icon */
    .success-ring {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-light), #d4dcfb);
      border: 2px solid var(--accent-muted);
      display: flex; align-items: center; justify-content: center;
      font-size: 40px;
      margin: 0 auto 28px;
      animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes popIn {
      from { transform: scale(.6); opacity: 0; }
      to   { transform: scale(1);  opacity: 1; }
    }

    .welcome-title {
      font-family: 'Geologica', sans-serif;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin-bottom: 10px;
      animation: fadeUp .4s .1s both;
    }
    .welcome-subtitle {
      font-size: 15px;
      color: var(--text-3);
      line-height: 1.6;
      max-width: 340px;
      margin: 0 auto 32px;
      animation: fadeUp .4s .15s both;
    }

    @keyframes fadeUp {
      from { transform: translateY(8px); opacity: 0; }
      to   { transform: translateY(0);   opacity: 1; }
    }

    /* Checklist */
    .welcome-checks {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 340px;
      margin: 0 auto 32px;
      text-align: left;
      animation: fadeUp .4s .2s both;
    }
    .welcome-check {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text-2);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 14px;
    }
    .check-icon {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: #dcfce7;
      color: #16a34a;
      font-size: 12px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .btn-primary-welcome {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 32px;
      background: var(--accent);
      color: var(--white);
      font-family: 'Onest', sans-serif;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: background .15s, box-shadow .15s;
      text-decoration: none;
      animation: fadeUp .4s .25s both;
    }
    .btn-primary-welcome:hover {
      background: var(--accent-hover);
      box-shadow: 0 4px 16px rgba(24,71,227,.3);
    }

    .welcome-wrap {text-align: center;}