.hidden-input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .login-logo-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 104px;
      height: 104px;
      border-radius: 30px;
      overflow: hidden;
      filter: drop-shadow(0 14px 24px rgba(17, 52, 102, 0.14));
    }

    .login-logo-mark svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .login-brand {
      width: 100%;
      margin-bottom: 24px;
      text-align: center;
    }

    .login-brand h1 {
      margin: 0 0 10px;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .login-brand p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 15px;
    }

    .login-step {
      width: 100%;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }

    .step-indicator {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font-weight: 700;
      transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
    }

    .step-indicator.bump {
      transform: scale(1.08);
      box-shadow: 0 8px 20px rgba(31, 122, 236, 0.18);
    }

    .login-progress {
      width: 100%;
      margin: -4px 0 10px;
      height: 6px;
      border-radius: 999px;
      background: rgba(233, 242, 255, 0.72);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 236, 0.04);
    }

    .login-progress-bar {
      width: 50%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent) 0%, #5fa4ff 100%);
      transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 4px 12px rgba(31, 122, 236, 0.18);
    }

    .field-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }

    .phone-field {
      display: grid;
      gap: 8px;
    }

    .phone-input-wrap {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 0 14px;
      height: 56px;
      border: 1px solid var(--panel-border);
      border-radius: 18px;
      background: var(--panel);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .phone-input-wrap:focus-within {
      border-color: rgba(31, 122, 236, 0.55);
      box-shadow: 0 0 0 4px rgba(31, 122, 236, 0.10);
    }

    .phone-prefix {
      min-width: 132px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 10px;
      border-right: 1px solid rgba(215, 225, 236, 0.9);
      white-space: nowrap;
    }

    .phone-flag {
      font-size: 22px;
      line-height: 1;
    }

    .phone-code {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent-dark);
    }

    .phone-input {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 16px;
    }

    .phone-meta {
      min-height: 16px;
      font-size: 12px;
      color: var(--muted);
    }

    .contact-search-input-wrap {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      height: 50px;
      padding: 0 14px;
      border-radius: 16px;
    }

    .contact-search-input-wrap.has-flag {
      padding-left: 50px;
    }

    .contact-search-input-wrap .phone-input {
      padding-right: 42px;
    }

    .contact-search-flag {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%) scale(0.92);
      width: 15px;
      height: 15px;
      line-height: 1;
      color: #b0bcd4;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .contact-search-flag svg,
    .chat-list-search-icon svg,
    .sidebar-header-icon-action svg,
    .bottom-tab-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .contact-search-input-wrap.has-flag .contact-search-flag {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    .input {
      width: 100%;
      border: 1px solid var(--panel-border);
      outline: none;
      background: var(--panel);
      color: var(--text);
      font: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .input {
      height: 48px;
      padding: 0 16px;
      border-radius: 16px;
      font-size: 16px;
    }

    .input:focus {
      border-color: rgba(31, 122, 236, 0.55);
      box-shadow: 0 0 0 4px rgba(31, 122, 236, 0.10);
    }

    .button {
      height: 48px;
      border: 0;
      border-radius: 16px;
      padding: 0 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    }

    .button:hover {
      transform: translateY(-1px);
    }

    .button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .button:active:not(:disabled) {
      transform: scale(0.985);
    }

    .button-primary {
      background: var(--accent);
      color: #fff;
    }

    .button-primary:hover {
      background: var(--accent-dark);
    }

    .button-secondary {
      background: #edf3fb;
      color: var(--text);
    }

    .button-danger {
      background: var(--danger-soft);
      color: var(--danger-text);
    }

    .text-button {
      margin-top: 12px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent-dark);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .text-button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .text-button:active:not(:disabled) {
      transform: translateY(1px);
    }