:root {
    --blue: #00aaff;
    --purple: #a100ff;
    --green: #00ff44;
    --yellow: #ffee00;
    --red: #ff0000;
    --card-bg: #1a1a1a;
}

body.dark-theme {
    background-color: #0b0b0b;
    color: #ffffff;
    font-family: 'Arial Black', sans-serif;
    margin: 0;
    text-transform: uppercase;
    overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 5px; }

/* NAVBAR */
.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 5%;
    background-color: #0b0b0b;
    border-bottom: 5px solid var(--blue); 
    height: 80px; 
    box-sizing: border-box;
}

.logo { font-size: 1.6rem; font-weight: 900; }
.logo a { color: inherit; text-decoration: none; }

.nav-links { display: flex; align-items: center; }

/* TAB HOVER EFFECTS */
.nav-links a { 
    color: white; 
    text-decoration: none; 
    margin-left: 25px; 
    font-size: 1.1rem; 
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--blue);
}

.yt-tag { 
    background: var(--red); 
    padding: 10px 20px !important; 
    border-radius: 8px; 
    font-weight: 900;
    transition: 0.3s;
}

.yt-tag:hover {
    background: #cc0000;
    transform: scale(1.05);
}

/* TOP 5 LIBRARY STYLES */
.library-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 50px;
    margin-top: 20px;
}

.lib-card {
    position: relative;
    text-decoration: none;
    color: white;
    transition: transform 0.3s;
}

.lib-card:hover { transform: scale(1.05); }

.lib-thumb {
    width: 100%;
    border-radius: 8px;
    border: 2px solid #333;
}

.rank-tag {
    position: absolute;
    top: -10px;
    left: -10px;
    background: var(--yellow);
    color: black;
    padding: 5px 10px;
    font-size: 1.2rem;
    font-weight: 900;
    border-radius: 5px;
    z-index: 2;
}

.lib-title {
    font-size: 0.9rem;
    margin-top: 8px;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
}

/* HERO SECTION */
.hero { text-align: center; padding: 40px 0; }
.profile-img { width: 220px; border-radius: 50%; margin-bottom: 20px; }
.beast-title { font-size: 3.5rem; margin: 10px 0; }

/* MISSION TITLE - CENTERED */
.beast-title-small { 
    font-size: 3rem; 
    margin-top: 30px; 
    text-align: center; 
    display: block; 
    width: 100%; 
}

.bio-mid { font-size: 1.4rem; text-transform: none; margin: 5px 0; }

/* LABELS */
.section-label { 
    font-size: 2.2rem; 
    border-left: 10px solid var(--green); 
    padding-left: 15px; 
    margin: 30px 0; 
}

/* COLORS */
.green-text { color: var(--green); }
.blue-text { color: var(--blue); }
.red-text { color: var(--red); }
.purple-text { color: var(--purple); }
.yellow-text { color: var(--yellow); }
.white-text { color: #ffffff; }

footer { text-align: center; padding: 40px 0; color: #888; }

/* DONATION CARD STYLES */
.beast-card { border: 6px solid var(--green); background: var(--card-bg); width: 95%; max-width: 750px; margin: 40px auto; border-radius: 20px; overflow: hidden; }
.card-header { background: #222; padding: 25px; border-bottom: 5px solid var(--green); text-align: center; }
.header-text-large { font-size: 2rem; margin: 0; }
.sub-text-small { text-transform: none; color: #bbb; margin-top: 10px; line-height: 1.4; font-size: 1.3rem; }
.card-body { padding: 30px; }
.steps-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
.beast-step { display: flex; align-items: center; background: #252525; padding: 15px; border-radius: 12px; min-height: 80px; box-sizing: border-box; }
.step-number { background: var(--yellow); color: black; font-size: 1.6rem; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 20px; flex-shrink: 0; }
.step-mid { font-size: 1.2rem; line-height: 1.2; margin: 0; text-transform: none; }

/* STEP 4 SUPPLY TEXT */
.step-content { display: flex; flex-direction: column; gap: 10px; }
.supply-text { font-size: 0.95rem; text-transform: none; color: #ccc; line-height: 1.4; margin: 0; }

.coffee-options { display: flex; gap: 10px; flex-wrap: wrap; }
.coffee-choice { background: #333; padding: 8px 12px; border-radius: 8px; font-size: 1rem; border: 2px solid var(--yellow); color: var(--yellow); }

.beast-btn { 
    display: block; 
    background: var(--yellow); 
    color: black; 
    padding: 20px; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: 900; 
    font-size: 1.6rem; 
    text-align: center; 
    margin-bottom: 25px; 
    transition: 0.2s;
}
.beast-btn:hover { transform: scale(1.02); }

.question-note { background: #111; border: 2px dashed #444; padding: 20px; border-radius: 12px; text-align: center; }