*, *::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;
    }

    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); }

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

    .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; }

    /* ── 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);
    }

    .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; }

    /* ── Role switcher (tabs shown on "create account" toggle) ── */
    .role-tabs {
      display: flex;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 3px;
      margin-bottom: 20px;
    }
    .role-tab {
      flex: 1;
      font-size: 13px;
      font-weight: 500;
      padding: 7px 12px;
      border-radius: var(--radius-pill);
      border: none;
      background: none;
      color: var(--text-2);
      cursor: pointer;
      font-family: 'Onest', sans-serif;
      transition: background .15s, color .15s;
      text-align: center;
    }
    .role-tab.active { background: var(--white); color: var(--accent); box-shadow: var(--shadow); }

    /* ── 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; }