* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #1a5276;
            --primary-dark: #154360;
            --success: #27ae60;
            --danger: #e74c3c;
            --warning: #f39c12;
            --border-radius: 18px;
            --transition: all 0.3s ease;
        }
        body {
            background: #f5f7fa;
            color: #2c3e50;
            font-family: Vazir, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            line-height: 1.6;
        }
        .app-container { max-width: 500px; width: 100%; margin: 0 auto; }
        .page { display: none; }
        .page.active { display: block; }
        .card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            text-align: center;
            border: 1px solid #e0e0e0;
            transition: var(--transition);
        }
        .card:hover { border-color: var(--primary); }
        .content h2 { color: var(--primary-dark); margin-bottom: 15px; font-size: 22px; }
        .content h3 { color: var(--primary-dark); margin-bottom: 15px; font-size: 20px; }
        .content p { font-size: 16px; margin-bottom: 20px; color: #34495e; }
        .icon-large { font-size: 70px; color: var(--primary); margin: 20px 0; }
        .lottie-container { display: flex; justify-content: center; margin: 20px 0; }
        .lottie-container dotlottie-wc { width: auto !important; height: auto !important; max-width: 100%; }
        .camera-container {
            position: relative; width: 100%; height: 400px;
            border-radius: var(--border-radius); overflow: hidden; margin: 25px 0; background: #000;
        }
        #videoElement { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); filter: grayscale(100%);}
        .face-overlay {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 300px; height: 300px; border: 4px dashed #fff; border-radius: 50%;
            pointer-events: none; z-index: 10; box-shadow: 0 0 0 8px rgba(26,82,118,0.3);
        }
        #colorOverlay {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 300px !important; height: 300px !important;
            border-radius: 50%; pointer-events: none; z-index: 11;
        }
        .recording-indicator {
            position: absolute; top: 20px; left: 20px; background: var(--danger); color: white;
            padding: 8px 16px; border-radius: 20px; font-size: 14px; z-index: 20; display: none;
            animation: pulse 1.5s infinite;
        }
        .recording-indicator.recording { display: block; }
        @keyframes pulse { 0%,100%{opacity:1;}50%{opacity:0.5;} }
        .timer { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white;
            padding: 8px 16px; border-radius: 20px; font-size: 14px; z-index: 20; display: none; }
        .timer.recording { display: block; }
        .video-preview-container {
            position: relative; width: 100%; max-width: 500px; margin: 25px auto;
            border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.1); display: none;
        }
        .video-preview-container.active { display: block; }
        .video-preview-container video { width: 100%; display: block; transform: none; }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 28px; border: none; border-radius: 50px; font-size: 16px; font-weight: 500;
            cursor: pointer; transition: var(--transition); min-width: 150px; font-family: inherit;
            box-shadow: 0 2px 8px rgba(26,82,118,0.2);
        }
        .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,82,118,0.3); }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-success { background: var(--success); color: white; }
        .btn-success:hover { background: #219653; }
        .btn-danger { background: var(--danger); color: white; }
        .btn-danger:hover { background: #c0392b; }
        .btn-warning { background: var(--warning); color: white; }
        .btn-warning:hover { background: #e67e22; }
        .btn-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; }
        .btn-secondary:hover { background: rgba(26,82,118,0.05); }
        .btn-large { padding: 16px 32px; font-size: 17px; min-width: 180px; }
        .record-controls { display: flex; gap: 15px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
        .record-controls .btn { flex: 1; min-width: 140px; }
        .progress { display: flex; justify-content: center; gap: 8px; margin: 30px 0; }
        .step { width: 10px; height: 10px; border-radius: 50%; background: #ddd; transition: var(--transition); }
        .step.active { background: var(--primary); transform: scale(1.2); }
        @keyframes spin { to { transform: rotate(360deg); } }
        @media (max-width: 768px) { .camera-container{height:350px;} .face-overlay{width:280px;height:280px;} #colorOverlay{width:280px !important;height:280px !important;} }
        @media (max-width: 480px) { .camera-container{height:300px;} .face-overlay{width:250px;height:250px;} #colorOverlay{width:250px !important;height:250px !important;} }
        * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    


    h2 {
      color: #154360;
      margin-bottom: 20px;
      font-size: 22px;
    }

    p {
      color: #34495e;
      margin-bottom: 20px;
      font-size: 15px;
    }

    input[type="file"],
    textarea {
      display: block;
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #ccc;
      border-radius: 12px;
      font-family: Vazir, sans-serif;
      margin-bottom: 20px;
      font-size: 15px;
      background: #fff;
      direction: rtl;
    }

    textarea {
      resize: none;
      height: 80px;
      line-height: 1.6;
    }

    .preview {
      margin-bottom: 20px;
      text-align: center;
    }

    .preview img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #1a5276;
      display: none;
      margin: auto;
    }

    button {
      background: #1a5276;
      color: white;
      border: none;
      padding: 14px;
      font-size: 17px;
      font-family: Vazir, sans-serif;
      font-weight: 500;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 100%;
      box-shadow: 0 2px 8px rgba(26,82,118,0.15);
      margin-top: 10px;
    }

    button:hover {
      background: #154360;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(26,82,118,0.25);
    }

    @media (max-width: 480px) {
      .card {
        padding: 25px 20px;
      }
    }

    input[type="text"] {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 15px;
}