:root { 
    --primary: #ff4757; --secondary: #2f3542; --bg: #ffffff; 
    --text: #2f3542; --card: #f1f2f6; --border: #ced4da; 
}
body.night-mode { 
    --bg: #121212; --text: #E8E8E8; --card: #1E1E1E; 
    --primary: #ff6b81; --border: #333333; 
}
body, .bm-text, .alphabet-link, .search-row button { 
    font-family: 'Siyam Rupali', 'Segoe UI', Tahoma, sans-serif !important; 
}
body { background: var(--bg); color: var(--text); transition: 0.3s; margin:0; padding:20px; font-size: 1.1rem; }
.container { max-width: 1200px; margin: 0 auto; }

/* Vibrant Control Panel */
.search-section { background: var(--card); padding: 30px; border-radius: 20px; border: 3px solid var(--primary); margin-bottom: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.search-row input { flex: 1; padding: 15px 25px; border-radius: 35px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1.2rem; }
.search-row button { background: var(--primary); color: white; border: none; padding: 0 35px; border-radius: 35px; font-weight: bold; cursor: pointer; font-size: 1.1rem; }

/* Table Design with Increased Text */
.tenses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 30px; }
.tense-card { background: var(--card); border-radius: 20px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.tense-header { background: var(--primary); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 1.2rem; }

.verb-table th { font-size: 1.1rem; background: rgba(0,0,0,0.03); }
.verb-table td { padding: 18px; border-bottom: 1px solid var(--border); text-align: left; font-size: 1.1rem; }

/* Main BPM Text size increased */
.bm-text { display: block; font-size: 1.6rem; font-weight: bold; color: var(--primary); line-height: 1.4; margin-bottom: 4px; }

/* Romanization text size increased */
.roman-text { display: block; font-size: 1.05rem; font-style: italic; color: #8a93a6; font-family: 'Segoe UI', sans-serif; }

.alphabet-link { display: inline-block; padding: 10px 18px; margin: 5px; background: var(--primary); color: white; border-radius: 12px; text-decoration: none; font-weight: bold; font-size: 1.1rem; }
/* 1.1.2 Row Hover Effect for both Day and Night Modes */
.verb-table tbody tr {
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Light Mode Hover: Light grey-blue tint */
.verb-table tbody tr:hover {
    background-color: rgba(47, 53, 66, 0.05) !important;
    cursor: pointer;
}

/* Night Mode Hover: Subtle light overlay */
body.night-mode .verb-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Optional: Slight "popout" effect on the BPM text when hovering the row */
.verb-table tbody tr:hover .bm-text {
    transform: translateX(5px);
    transition: transform 0.2s ease;
}

    /* ... keep previous styles ... */
    .search-card { 
        position: sticky; 
        top: 10px; 
        z-index: 1000; 
        background: var(--card); 
        box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Stronger shadow when sticky */
    }
    /* Smooth scroll for alphabet links */
    html { scroll-behavior: smooth; }
        .search-card { 
        position: -webkit-sticky; 
        position: sticky; 
        top: 0; 
        z-index: 1000; 
        background: var(--card); 
        padding: 15px 30px !important; 
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        border-bottom: 5px solid var(--primary);
        border-radius: 0 0 25px 25px;
    }
    .roman-text { 
        display: block; 
        font-size: 1rem; 
        font-style: italic; 
        color: #7f8c8d; 
        margin-top: 3px; 
    }