body {
    font-family: 'Prompt', sans-serif;
    background-color: #F0F9FF;
    color: #1E293B;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.gradient-bg { 
    background: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%); 
}

.gradient-morning { 
    background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%); 
}

::-webkit-scrollbar { 
    width: 0px; 
    background: transparent; 
}

.active-nav { 
    color: #2563EB; 
    transform: scale(1.1); 
}

.stamp-active {
    background-color: #2563EB; 
    color: white;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4); 
    transform: scale(1.05);
}

.stamp-inactive {
    background-color: rgba(255,255,255,0.5); 
    color: rgba(255,255,255,0.5);
    border: 2px dashed rgba(255,255,255,0.3);
}

#reader video { 
    border-radius: 1rem; 
    object-fit: cover; 
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    content-visibility: auto;
    aspect-ratio: attr(width) / attr(height);
}

.announcement-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0.75rem;
    background-color: #f1f5f9;
    content-visibility: auto;
}

.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-load.loaded {
    opacity: 1;
}

#highlight-image, #auto-popup-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.page-content {
    min-height: calc(100vh - 120px);
    opacity: 1 !important;
    display: block;
}

.page-content.hidden {
    display: none !important;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.hidden { display: none; }
.min-h-screen { min-height: 100vh; }
.p-4 { padding: 1rem; }
.bg-white { background-color: white; }
.rounded-3xl { border-radius: 1.5rem; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.max-w-md { max-width: 28rem; width: 100%; }

#auth-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.text-center { text-align: center; }