* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
      background-color: #f5f7fb;
      color: #333;
      font-weight: 400;
    }
    .app {
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      background-color: #fff;
    }
    header {
      padding: 10px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: #007bff;
      font-size: 18px;
    }
    .logo-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 2px solid #007bff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .login-link {
      font-size: 13px;
      color: #007bff;
      text-decoration: none;
    }

    .stepper {
      display: flex;
      justify-content: space-between;
      padding: 16px 16px 8px;
      font-size: 11px;
      color: #aaa;
    }
    .step {
      flex: 1;
      text-align: center;
    }
    .step-number {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #d0d0d0;
      margin: 0 auto 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      background-color: #fff;
    }
    .step.active .step-number {
      border-color: #4caf50;
      color: #4caf50;
      font-weight: 700;
    }
    .step.active span {
      color: #4caf50;
      font-weight: 600;
    }

    main {
      padding: 12px 16px 24px;
    }
    h1 {
      font-size: 18px;
      margin-bottom: 12px;
    }
    h2 {
      font-size: 15px;
      margin: 16px 0 8px;
    }
    .label {
      font-size: 13px;
      margin-bottom: 6px;
      display: block;
      color: #555;
    }

    .segmented {
      display: flex;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #cfd5e3;
      margin-bottom: 14px;
    }
    .segmented button {
      flex: 1;
      padding: 10px 6px;
      border: none;
      background-color: #fff;
      font-size: 13px;
      cursor: pointer;
      color: #555;
      font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
      font-weight: 400;
    }
    .segmented button + button {
      border-right: 1px solid #cfd5e3;
    }
    .segmented button.active {
      background-color: #007bff;
      color: #fff;
      font-weight: 600;
    }

    .field {
      margin-bottom: 14px;
    }
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #cfd5e3;
      font-size: 14px;
      font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
      font-weight: 400;
    }
    input:focus,
    select:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 1px rgba(0,123,255,0.2);
    }
    .error {
      color: #d32f2f;
      font-size: 12px;
      margin-top: 4px;
      min-height: 16px;
    }

    .info-text {
      font-size: 11px;
      color: #666;
      line-height: 1.6;
      margin-top: 8px;
    }

    .buttons-row {
      display: flex;
      gap: 8px;
      margin-top: 20px;
    }
    .btn {
      flex: 1;
      padding: 14px;
      border-radius: 10px;
      border: none;
      font-size: 15px;
      cursor: pointer;
      font-weight: 600;
      text-align: center;
      font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    }
    .btn-primary {
      background-color: #007bff;
      color: #fff;
    }

    .hidden {
      display: none;
    }

    
    @media screen and (max-width: 480px) {
      input[type="text"],
      input[type="number"],
      input[type="tel"],
      input[type="email"],
      input[type="password"],
      input[type="date"],
      input[type="datetime-local"],
      input[type="month"],
      input[type="search"],
      input[type="time"],
      input[type="url"],
      input[type="week"],
      input:not([type]),
      textarea,
      select {
        font-size: 16px !important;
      }
    }


    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.95) 0%, rgba(0, 86, 179, 0.95) 100%);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 99999;
      font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
      backdrop-filter: blur(10px);
    }

    .loading-screen.show {
      display: flex;
      animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .loading-content {
      text-align: center;
      color: white;
      transform: translateY(0);
      animation: slideUp 0.5s ease-out;
    }

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

    .loading-dots {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 auto 30px;
    }

    .loading-dots div {
      position: absolute;
      top: 33px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #ffffff;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

    .loading-dots div:nth-child(1) {
      left: 8px;
      animation: loadingDots1 0.6s infinite;
    }

    .loading-dots div:nth-child(2) {
      left: 8px;
      animation: loadingDots2 0.6s infinite;
    }

    .loading-dots div:nth-child(3) {
      left: 32px;
      animation: loadingDots2 0.6s infinite;
    }

    .loading-dots div:nth-child(4) {
      left: 56px;
      animation: loadingDots3 0.6s infinite;
    }

    @keyframes loadingDots1 {
      0% { transform: scale(0); }
      100% { transform: scale(1); }
    }

    @keyframes loadingDots3 {
      0% { transform: scale(1); }
      100% { transform: scale(0); }
    }

    @keyframes loadingDots2 {
      0% { transform: translate(0, 0); }
      100% { transform: translate(24px, 0); }
    }

    .loading-text {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      letter-spacing: 0.5px;
    }

    .loading-subtext {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 400;
      letter-spacing: 0.3px;
    }