/* ===================================================================
   Lecture 2026 — shared base styles
   tokens + reset + body + keyframes + top-bar (used by all 3 pages)
   page-specific component CSS stays inline in each HTML file
=================================================================== */

:root {
    --primary:       #2F8002;
    --primary-dark:  #245A01;
    --primary-light: #3A9403;
    --accent:        #fbbf24;

    --bg-color:      #EEEDF5;
    --bg-gradient:   radial-gradient(circle at 70% 10%, #e6f3e0 0%, #EEEDF5 55%, #E8E6F0 100%);

    --glass-bg:      rgba(255, 255, 255, 0.78);
    --card-shadow:   0 4px 24px -2px rgba(0,0,0,0.07), 0 8px 16px -4px rgba(47,128,2,0.05);
    --hover-shadow:  0 20px 40px -5px rgba(0,0,0,0.13), 0 12px 20px -6px rgba(47,128,2,0.1);

    --text-main:     #111111;
    --text-muted:    #6b7280;
    --white:         #ffffff;
    --border-soft:   rgba(47,128,2,0.1);

    /* dynamic per-group theme (overridden by JS on main.html) */
    --theme-color:   #2F8002;
    --theme-icon-bg: rgba(47,128,2,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Google Sans', sans-serif;
    background: var(--bg-gradient);
    background-color: var(--bg-color);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    padding: 40px 20px 80px;
}

/* ===== TOP BAR / BACK BUTTON (main.html + ktm.html) ===== */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    animation: fadeInDown 0.6s ease backwards;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    background: var(--white);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}

.btn-back:hover {
    transform: translateX(-4px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    color: var(--theme-color);
}

/* ===== SHARED KEYFRAMES (aliases kept so existing class names work) ===== */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}