:root { 
    --primary: #1cb0f6; 
    --green: #58cc02; 
    --red: #ff4b4b; 
}

body { 
    font-family: 'Outfit', sans-serif; 
    scroll-behavior: smooth; 
    background: #fff; 
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Parandalon lëvizjen anash në telefon */
}

.fw-black { font-weight: 900; }

#hero {
    height: 100vh;
    background: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1350&q=80');
    background-size: cover; 
    background-position: center;
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.hero-overlay { 
    position: absolute; 
    top:0; left:0; 
    width:100%; height:100%; 
    background: rgba(0,0,0,0.8); 
}

.hero-content { 
    position: relative; 
    z-index: 10; 
    padding: 0 20px; 
    width: 100%;
}

.arrow-down {
    width: 50px; height: 50px; 
    background: var(--primary);
    border-radius: 50%; 
    margin: 20px auto;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    animation: bounce 2s infinite;
}

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-10px);} 
}

.level-box {
    border: 2px solid #e5e5e5; 
    border-bottom: 6px solid #e5e5e5;
    border-radius: 20px; 
    padding: 20px; 
    transition: 0.2s; 
    cursor: pointer; 
    background: white;
    position: relative;
    height: 100%; /* Siguron lartësi të barabartë */
}

.level-box:hover { transform: translateY(-5px); border-color: var(--primary); }

.completed-badge { 
    background: var(--green); 
    color: white; 
    padding: 2px 8px; 
    border-radius: 8px; 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    font-size: 9px; 
    font-weight: bold; 
}

.quiz-card { 
    max-width: 700px; 
    background: white; 
    border-radius: 24px; 
    margin: auto;
}

.option-btn {
    border: 2px solid #e5e5e5; 
    border-bottom: 5px solid #e5e5e5;
    border-radius: 16px; 
    padding: 15px; 
    font-weight: 700; 
    background: white; 
    text-align: left;
    font-size: 1rem; 
    transition: 0.1s;
    width: 100%; /* E bën butonin të plotë në çdo pajisje */
    display: block;
    margin-bottom: 10px;
}

.option-btn:hover { background: #f8f8f8; }
.option-btn:active { transform: translateY(2px); border-bottom-width: 2px; }

.feedback-bar { 
    position: fixed; 
    bottom: 0; 
    left: 0;
    width: 100%; 
    padding: 20px 0; 
    z-index: 2000; 
}

.bg-correct { background: #d7ffb8 !important; color: #58a700 !important; }
.bg-wrong { background: #ffdada !important; color: #ea2b2b !important; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .display-1 { font-size: 3.5rem; }
    .level-box { padding: 15px; }
    .fs-1 { font-size: 1.8rem !important; }
    .hero-content p { font-size: 1.1rem !important; }
}

.portfolio-link {
    transition: 0.3s;
    border-bottom: 2px solid transparent;
}

.portfolio-link:hover {
    color: #0056b3 !important;
    border-bottom: 2px solid var(--primary);
    letter-spacing: 0.5px;
}

#cert-modal { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 10005; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.cert-overlay { 
    position: absolute; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.9); 
}

.cert-content { 
    position: relative; 
    z-index: 10006; 
    max-width: 800px; 
    width: 95%; 
}

.cert-design { 
    background: #fff; 
    color: #333; 
    border: 15px solid #f8f9fa; 
    position: relative; 
}

.cert-border { border: 2px solid #d4af37; padding: 40px; }

@media (max-width: 600px) {
    .cert-design { padding: 10px !important; border-width: 5px !important; }
    .cert-border { padding: 15px !important; }
    .display-4 { font-size: 1.8rem !important; }
}

.rank-card {
    transition: 0.3s;
    animation: fadeInUp 1s;
}

#rank-title { color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }

/* DARK MODE LOGIC */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.dark-mode #lobby-screen, 
body.dark-mode #quiz-screen,
body.dark-mode footer {
    background-color: #121212 !important;
}

body.dark-mode .level-box, 
body.dark-mode .card, 
body.dark-mode .rank-card,
body.dark-mode .quiz-card,
body.dark-mode .shop-item,
body.dark-mode .cert-content .bg-white {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: white !important;
}

body.dark-mode .text-muted { color: #b0b0b0 !important; }

body.dark-mode .quiz-nav, 
body.dark-mode .input-group-text,
body.dark-mode #courseSearch {
    background-color: #1e1e1e !important;
    color: white !important;
    border-color: #444 !important;
}

body.dark-mode .option-btn {
    background: #2a2a2a;
    border-color: #444;
    color: white;
}

/* Dark Mode Button */
.dark-mode-fab-top {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background-color: #58cc02 !important;
    border: 2px solid white !important;
    color: white !important;
    font-size: 1.2rem !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .dark-mode-fab-top { background-color: #1cb0f6 !important; }

@media (max-width: 576px) {
    .dark-mode-fab-top {
        width: 40px !important;
        height: 40px !important;
        top: 10px !important;
        right: 10px !important;
    }
}

/* UI Elements */
.low-lives {
    animation: heartbeat 1s infinite;
    background-color: #ffe5e5 !important;
    border-color: #ff4b4b !important;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(1); }
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10010;
}

.toast-msg {
    background: white;
    color: #333;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    border-left: 5px solid #1cb0f6;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    animation: slideIn 0.4s ease forwards;
}

@keyframes slideIn {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes heartBeatAnim {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
}

.low-lives #lives-val {
    display: inline-block;
    color: #ff4b4b;
    animation: heartBeatAnim 1s infinite;
}

.xp-container {
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 15px;
}

#xp-bar {
    transition: width 1s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

/* Timer */
#timer-line {
    height: 100%;
    background-color: #ff4b4b;
    width: 100%;
    transition: width 1s linear;
}

.timer-low { animation: pulse-red 0.5s infinite; }

@keyframes pulse-red {
    0%, 100% { background-color: #ff4b4b; }
    50% { background-color: #ff0000; }
}

/* Shop */
.shop-item {
    transition: all 0.3s ease;
    background: #fdfdfd;
}

.shop-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--primary) !important;
}

#shop-modal {
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}