/* --- Global Theme Variables --- */
:root {
    --ccGreen: rgb(0, 60, 0);
    --ccBlue: rgb(26, 42, 90);
    --ios-bg: #FFFFFF;
    --ios-card-bg: #FFFFFF;
    --ios-text-main: #1C1C1E;
    --ios-text-sec: #8E8E93;
    --ios-border: rgba(0, 0, 0, 0.08);
}

/* --- Layout Reset --- */
* { box-sizing: border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', sans-serif; background-color: var(--ios-bg); color: var(--ios-text-main); line-height:1.5; padding-bottom:90px; }

/* --- Bottom Nav --- */
nav {
    height: 84px;
    padding-bottom: 20px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--ios-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom:0;
    width:100%;
    z-index:1000;
}
.nav-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#999; font-size:1.6rem; transition: transform 0.2s ease, color 0.2s ease;
    width: 33%; background:none; border:none; cursor:pointer;
}
.nav-btn.active { transform: translateY(-2px); }
#nav-home.active { color: var(--ccBlue); }
#nav-lessons.active { color: var(--ccGreen); }
#nav-articles.active { color: var(--ccBlue); }
#nav-quizzes.active { color: var(--ccGreen); }

/* --- Cards --- */
.card {
    background: var(--ios-card-bg);
    border-radius: 20px;
    border: 1px solid var(--ios-border);
    transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.05); }
.card:active { transform: scale(0.98); background:#F2F2F7; }

/* --- Completion Rings --- */
.completion-ring { width:26px; height:26px; border-radius:50%; background: var(--ccGreen); color:white; display:flex; align-items:center; justify-content:center; font-size:11px; box-shadow:0 4px 10px rgba(0,60,0,0.2); }

/* --- Article/Lesson/Quiz Reader --- */
.article-body { font-size:1.15rem; line-height:1.8; color:#3A3A3C; letter-spacing:-0.01em; }
.article-body br { content:""; margin:1.2rem 0; display:block; }

/* --- Reveal Animations --- */
.reveal { animation: revealIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes revealIn { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }

/* --- Badges --- */
.badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; }

/* --- Utilities --- */
.font-black { font-weight:900; }
.tracking-tighter { letter-spacing:-0.05em; }