/* === Notes Page Premium Styles === */
.main-content { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 15px; 
    background-color: var(--bg-color);
}

.empty-card {
    background: var(--white);
    max-width: 650px;
    width: 100%;
    text-align: center;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-hover);
    border-top: 6px solid var(--accent-color);
    animation: slideUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Subtle background glow effect */
.empty-card::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,153,0,0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.empty-card > * {
    position: relative;
    z-index: 1;
}

/* Mobile Safe Writing Animation */
.anim-box { width: 100px; height: 100px; margin: 0 auto 25px; position: relative; display: flex; justify-content: center; align-items: center; }
.pencil-icon { font-size: 3.5em; position: absolute; z-index: 2; animation: writeMobileSafe 2.5s infinite ease-in-out; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1)); }
.paper-line { width: 80px; height: 6px; background: #e2e8f0; position: absolute; bottom: 15px; border-radius: 5px; overflow: hidden; }
.paper-line::after { content: ''; display: block; height: 100%; background: var(--accent-color); animation: fillLine 2.5s infinite linear; }

@keyframes writeMobileSafe {
    0% { transform: translateX(-30px) translateY(0) rotate(-15deg); }
    50% { transform: translateX(30px) translateY(-10px) rotate(15deg); }
    100% { transform: translateX(-30px) translateY(0) rotate(-15deg); }
}
@keyframes fillLine { 0% { width: 0; } 100% { width: 100%; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.empty-card h2 { color: var(--primary-dark); margin: 0 0 15px; font-size: 1.8em; font-family: 'Poppins', sans-serif; }
.empty-card p.desc { color: #64748b; font-size: 1.1em; line-height: 1.6; margin-bottom: 30px; }

/* Progress Bar */
.progress-container { background: #f8fafc; border-radius: 15px; padding: 25px; margin-bottom: 30px; border: 1px solid #e2e8f0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
.progress-title { font-size: 0.95em; font-weight: 700; color: var(--primary-light); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;}
.progress-track { width: 100%; height: 14px; background: #cbd5e1; border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);}
.progress-fill { height: 100%; width: 0%; /* JS will fill this */ background: linear-gradient(90deg, var(--accent-color), #ffb84d); border-radius: 10px; animation: shimmer 2s infinite linear; background-size: 200% 100%; transition: width 0.1s ease;}
.progress-percent { font-size: 1.1em; font-weight: 700; color: var(--accent-color); margin-top: 12px; display: block;}

@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.quote { font-style: italic; color: #94a3b8; font-size: 1em; margin-bottom: 35px; }

.back-btn { display: inline-block; background: var(--primary-dark); color: var(--white); padding: 14px 35px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: var(--transition); box-shadow: 0 5px 15px rgba(10,25,47,0.2); font-family: 'Poppins', sans-serif;}
.back-btn:hover { background: var(--accent-color); color: var(--primary-dark); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(255,153,0,0.3); }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .main-content { padding: 30px 15px; }
    .empty-card { padding: 30px 20px; border-radius: 15px; }
    .empty-card h2 { font-size: 1.5em; }
    .empty-card p.desc { font-size: 1em; margin-bottom: 25px;}
    .anim-box { width: 80px; height: 80px; }
    .pencil-icon { font-size: 3em; }
}