/* Common styles for all pages */ body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 20px; min-height: 100vh; } .container { max-width: 400px; margin: 0 auto; background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Typography */ h2 { color: #333; margin-bottom: 1.5em; text-align: center; } p { color: #666; line-height: 1.5; } /* Progress styles */ .progress-container { margin: 2em 0; } .progress-steps { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: 20px; position: relative; } .steps { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: 20px; position: relative; gap: 0; } .step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; position: relative; padding: 0; margin: 0; color: #666; font-size: 0.9em; background: none; width: auto; height: auto; border-radius: 0; border: none; display: block; font-weight: normal; } .step:not(:last-child):after { content: ""; position: absolute; top: 15px; right: -50%; width: 100%; height: 2px; background: #f0f0f0; z-index: 0; } .step:last-child:after { display: none; } .step.active { color: #007bff; } .step.completed { color: #28a745; background: none; } .step-icon { width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; font-weight: bold; color: #666; font-size: 1.1em; z-index: 1; } .step-icon.active { background: #007bff; } .step-icon.completed { background: #28a745; color: #fff; } .step > div:last-child { margin-top: 0; font-size: 1em; color: #333; text-align: center; white-space: nowrap; } /* Unified Admin Header Card */ .admin-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 2.5em 2em 2em 2em; border-radius: 18px; margin: 2.5em auto 2.5em auto; box-shadow: 0 8px 32px rgba(80, 0, 120, 0.10), 0 1.5px 8px rgba(120, 0, 80, 0.04); width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: flex-start; } .admin-header h1 { display: flex; align-items: center; gap: 0.5em; font-size: 2.3em; font-weight: 800; color: #fff; margin: 0 0 0.3em 0; } .admin-header-icon { font-size: 1.3em; color: #ffe066; filter: drop-shadow(0 2px 6px #5b21b6aa); margin-right: 0.1em; } .admin-header p { margin: 0; color: #e0e7ff; font-size: 1.15em; max-width: 600px; } @media (max-width: 700px) { .admin-header { padding: 1.2em 0.5em; } .admin-header h1 { font-size: 1.3em; } .admin-header p { font-size: 1em; } } /* Responsive container for smaller screens */ @media (max-width: 600px) { .container { max-width: 95vw; padding: 1em; } .progress-steps, .steps { flex-direction: column; gap: 1em; } .step:not(:last-child):after { top: 100%; left: 50%; right: auto; width: 2px; height: 40px; background: #f0f0f0; transform: translateX(-50%); } } /* Make text and elements scale better on very small devices */ @media (max-width: 400px) { body { padding: 5px; } .container { padding: 0.5em; } h2 { font-size: 1.2em; } } /* Ensure images and videos are responsive */ img, video { max-width: 100%; height: auto; display: block; } /* Suggestion: Add this to your HTML for best results: */ /* */