body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.desktop-view {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
        body.loaded {
            opacity: 1;
        }
        .sidebar {
            width: 440px;
            min-width: 130px;
            flex-shrink: 0;
            background-color: #1e1e1e;
            border-right: 1px solid #333;
            padding: 20px;
            overflow-y: auto;
            overflow-x: hidden !important; /* Prevent horizontal scrolling */
        }
        .content {
            flex-grow: 1;
            padding: 20px 40px 30px 40px; /* slightly smaller padding for better fit */
            overflow: auto; /* Enables both vertical and horizontal scrollbars automatically when needed */
            background-color: #121212;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            height: 100%;
        }
        h1, h2, h3 {
            color: #ffffff;
        }
        .sidebar-header {
            background-color: transparent;
            padding: 10px;
            border-radius: 4px;
            font-size: 1.25em;
            margin-bottom: 15px;
            transition: color 0.2s, background-color 0.2s;
        }
        .sidebar-header:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: #64b5f6;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
        }
        a.nav-link {
            color: #e0e0e0;
            text-decoration: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-radius: 4px;
            transition: color 0.2s, background-color 0.2s;
        }
        a.nav-link.main-group-link {
            color: #90caf9;
        }
        a.nav-link.irregular-group-link {
            color: #cc7777;
        }
        a.nav-link.irregular-group-link .group-num {
            color: #cc7777;
            background-color: rgba(204, 119, 119, 0.15);
            position: relative;
        }

        a.nav-link.irregular-group-link .highlight-unique,
        a.nav-link.irregular-group-link [style*="font-weight: bold"],
        a.nav-link.irregular-group-link strong,
        a.nav-link.irregular-group-link b {
            color: #fdd835 !important;
        }
        a.nav-link.regular-group-link {
            color: #90caf9;
        }
        a.nav-link.regular-group-link .group-num {
            color: #90caf9;
            background-color: rgba(144, 202, 249, 0.15);
            position: relative;
        }

        a.nav-link:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
        a.nav-link.active, .sidebar-header.active {
            background-color: rgba(255, 255, 255, 0.12) !important;
        }
        .group-title {
            display: flex !important;
            align-items: flex-start !important;
            gap: 8px !important;
            text-align: left !important;
            white-space: normal !important;
            width: 100%;
            min-width: 0 !important; /* Allow flex shrinking for wrapping */
        }
        .group-percentage {
            font-size: 0.88em;
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0.08);
            padding: 2.5px 7px;
            border-radius: 10px;
            font-weight: normal;
            flex-shrink: 0;
        }
        .group-percentage-sub {
            font-size: 0.68em;
            color: #ccc;
            background-color: rgba(255, 255, 255, 0.08);
            padding: 1.5px 5px;
            border-radius: 8px;
            font-weight: normal;
            flex-shrink: 0;
        }
        .pct-container {
            width: 55px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        a.nav-link.no-conjugations {
            background-color: transparent;
            font-weight: bold;
        }
        a.nav-link.no-conjugations .group-num {
            background-color: transparent;
            padding: 0;
            margin-right: 4px;
        }
        .sub-nav {
            padding-left: 15px;
            font-size: 0.9em;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #1e1e1e;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #333;
        }
        th {
            background-color: #2c2c2c;
            color: #fff;
        }
        .reg {
            color: #90caf9 !important; /* blue */
            font-weight: normal !important;
            letter-spacing: 0.03em !important;
        }
        .irreg {
            color: #cc7777;
        }
        .irreg-part {
            color: #cc7777; /* Softer, closer to gray */
        }
        .reg-part {
            color: #90caf9 !important; /* blue */
            font-weight: normal !important;
            letter-spacing: 0.03em !important;
        }
        .suffix {
            color: rgba(144, 202, 249, 0.55) !important; /* dimmed blue */
            font-weight: normal !important;
            letter-spacing: 0.03em !important;
        }
        .card {
            background-color: #1e1e1e;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }
        .tense-label {
            font-weight: bold;
            color: #bb86fc;
            width: 200px;
            display: inline-block;
        }
        .tense-text {
            position: relative;
            cursor: default;
        }
        .tense-tooltip {
            visibility: hidden;
            color: #bb86fc;
            position: absolute;
            z-index: 10;
            left: 100%;
            top: 0;
            font-size: 1em;
            font-weight: normal;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.2s, visibility 0.2s;
            pointer-events: none;
        }
        .tense-text:hover .tense-tooltip {
            visibility: visible;
            opacity: 1;
        }

        .conjugation-row {
            margin-bottom: 8px;
            padding: 8px;
            border-bottom: 1px solid #333;
        }
        .conjugation-row:last-child {
            border-bottom: none;
        }
    
        .group-num {
            font-weight: bold;
            color: #4dd0e1;
            background-color: rgba(77, 208, 225, 0.15);
            padding: 2px 6px;
            border-radius: 4px;
            margin-right: 0px !important;
            flex-shrink: 0 !important;
        }
        .group-num.main-num {
            color: #90caf9;
            background-color: rgba(144, 202, 249, 0.15);
        }
    
        .highlight-unique {
            color: #fdd835; /* Yellow */
            font-weight: bold;
            white-space: nowrap !important; /* Keep endings like -er, -ir, -re intact when wrapping */
        }
        .verb-tab-btn:hover {
            color: #fdd835 !important;
        }
        #active-verb-conjugation .card,
        .active-verb-conjugation-wrapper .card {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px 30px;
        }
        #active-verb-conjugation .conjugation-row,
        .active-verb-conjugation-wrapper .conjugation-row {
            margin-bottom: 0;
            padding: 8px 0;
            border-bottom: 1px solid #333;
            display: flex;
            align-items: center;
        }
        #active-verb-conjugation .conjugation-row:nth-last-child(-n+2) {
            border-bottom: none;
        }
        #active-verb-conjugation .tense-label,
        .active-verb-conjugation-wrapper .tense-label {
            width: 48px !important;
            min-width: 48px !important;
            flex-shrink: 0;
            padding-top: 0;
        }
        #active-verb-conjugation .tooltip-dash,
        .active-verb-conjugation-wrapper .tooltip-dash {
            display: none;
        }
        #active-verb-conjugation .tense-tooltip,
        .active-verb-conjugation-wrapper .tense-tooltip {
            left: 0;
            top: 100%;
            font-size: 0.7em;
            white-space: normal;
            max-width: 80px;
            line-height: 1.2;
        }
        .similar-verbs-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        .similar-verb-item {
            border: 1px solid #2a2a2a;
            padding: 6px 10px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.01);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: border-color 0.2s, background-color 0.2s;
        }
        .similar-verb-item:hover {
            border-color: #555;
            background-color: rgba(255, 255, 255, 0.07);
        }

        /* Mobile View Media Queries */
        @media (max-width: 768px) {
            .desktop-view {
                display: none !important;
            }
            .mobile-view {
                display: block !important;
                max-width: 382px;
                margin: 0 auto;
                padding: 16px;
                box-sizing: border-box;
                background-color: #121212;
                color: #e0e0e0;
            }
            body {
                overflow: auto !important;
                height: auto !important;
            }
            .mobile-title-container {
                text-align: center;
                margin-bottom: 20px;
            }
            .mobile-title {
                font-size: 2em;
                color: #ffffff;
                margin: 0 0 6px 0;
                font-weight: bold;
            }
            .mobile-subtitle {
                font-size: 0.9em;
                color: #bbbbbb;
                margin-bottom: 12px;
            }
            .mobile-note {
                font-size: 0.85em;
                color: #e57373;
                background-color: rgba(229, 115, 115, 0.1);
                padding: 8px 12px;
                border-radius: 6px;
                border-left: 3px solid #e57373;
                margin-bottom: 24px;
                line-height: 1.4;
            }
            .mobile-section-title {
                font-size: 1.35em;
                border-bottom: 1px solid #333;
                padding-bottom: 6px;
                margin-top: 24px;
                margin-bottom: 16px;
                color: #90caf9;
            }
            .mobile-group-card {
                background-color: #1e1e1e;
                border-radius: 8px;
                padding: 8px 12px;
                margin-bottom: 10px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
            .mobile-group-header {
                font-size: 1.1em;
                font-weight: bold;
                color: #fdd835;
                margin-bottom: 6px;
                border-bottom: 1px dashed #444;
                padding-bottom: 4px;
            }
            .mobile-tense-row {
                padding: 6px 0;
                margin-bottom: 12px;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .mobile-tense-row:last-child {
                margin-bottom: 0;
            }
            .mobile-tense-name {
                font-weight: bold;
                color: #bb86fc;
                font-size: 0.85em;
                text-transform: uppercase;
                margin-bottom: 3px;
            }
            .mobile-tense-val {
                color: #ffffff;
                font-size: 0.95em;
                line-height: 1.4;
                word-break: break-word;
            }
            .mobile-verb-group-title {
                font-size: 1.1em;
                font-weight: bold;
                color: #90caf9;
                margin-top: 14px;
                margin-bottom: 6px;
            }
            .mobile-verb-subgroup-list {
                list-style-type: none;
                padding-left: 10px;
                margin-bottom: 16px;
            }
            .mobile-verb-subgroup-list li {
                font-size: 0.9em;
                color: #cccccc;
                margin-bottom: 6px;
                line-height: 1.3;
            }
        }
        @media (min-width: 769px) {
            .desktop-view {
                display: flex !important;
            }
            .mobile-view {
                display: none !important;
            }
        }
        .main-group-header {
            color: #ffffff;
            opacity: 1;
            display: flex;
            justify-content: space-between;
            align-items: flex-start !important; /* Top-align both title text and percentage pill */
            padding: 12px 8px 6px 8px;
            font-size: 1.05em;
            font-weight: bold;
            font-variant: small-caps;
            pointer-events: none;
            user-select: none;
            margin-top: 15px;
            margin-bottom: 5px;
            border-bottom: 3px solid rgba(255, 255, 255, 0.35);
        }
        .main-group-header .pct-pill {
            background-color: rgba(255, 255, 255, 0.15);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75em;
            font-weight: bold;
            font-variant: normal;
            color: #ffffff;
        }

        .group-num.regular-num {
            color: #90caf9;
            background-color: rgba(144, 202, 249, 0.15);
        }
        .group-num.irregular-num {
            color: #cc7777;
            background-color: rgba(204, 119, 119, 0.15);
        }

        .sub-nav li {
            margin-bottom: 2px;
        }

        .sub-nav a.nav-link {
            padding: 2px 6px;
        }
        .sub-nav .group-num {
            padding: 1px 4px;
        }

        .overview-tables-container {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 5px;
        }
        .active-verb-conjugation-wrapper .conjugation-row {
            padding: 4px 0 !important;
        }

        .active-verb-conjugation-wrapper .card {
            padding: 8px 15px !important;
            margin-bottom: 0px !important;
            gap: 0px 20px !important;
        }
        .active-verb-conjugation-wrapper .conjugation-row {
            padding: 2px 0 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        }
        .overview-tables-container h3 {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
        }

        .help-icon:hover {
            font-weight: bold !important;
        }

        
        

/* Unified flexible stretching & scaling for active-verb cards */
.overview-tables-container {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vh, 10px); /* Tighter gap to ensure all 3 tables fit on screen */
    margin-top: 5px;
}
.overview-tables-container > div {
    display: flex;
    flex-direction: column;
}
.overview-tables-container h3 {
    margin-top: clamp(4px, 0.8vh, 10px) !important;
    margin-bottom: clamp(2px, 0.4vh, 6px) !important;
    font-size: clamp(11px, 1.9vh, 20px) !important;
}

#active-verb-conjugation,
.active-verb-conjugation-wrapper {
    /* Sized naturally based on content to allow equal row padding */
    display: flex;
    flex-direction: column;
    min-height: min-content;
}

#active-verb-conjugation .card,
.active-verb-conjugation-wrapper .card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    padding: clamp(6px, 1vh, 12px) clamp(10px, 1.5vh, 15px) !important;
    margin-bottom: 0px !important;
    min-height: min-content !important;
    min-width: 660px !important;
    gap: 0px 20px !important;
    font-size: clamp(10px, 1.4vh + 0.4vw, 24px) !important;
}

#active-verb-conjugation .conjugation-row,
.active-verb-conjugation-wrapper .conjugation-row {
    display: flex;
    align-items: flex-start !important; /* Top-aligned abbreviation */
    box-sizing: border-box;
    margin-bottom: 0 !important;
    padding: clamp(4px, 0.7vh, 8px) 0 !important; /* Equal row padding scaling with height */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#active-verb-conjugation .conjugation-row:nth-last-child(-n+2),
.active-verb-conjugation-wrapper .conjugation-row:nth-last-child(-n+2) {
    border-bottom: none !important;
}

#active-verb-conjugation .tense-label,
.active-verb-conjugation-wrapper .tense-label {
    font-size: 1em !important;
    width: 3.4em !important; /* Scales proportionally with font size to keep perfect spacing */
    min-width: 3.4em !important;
    flex-shrink: 0;
    padding-top: 1px !important; /* Aligns abbreviation perfectly with first line of text */
}

/* Scalable styling for around-table content */
.subgroup-header-container {
    margin-bottom: clamp(6px, 1.5vh, 15px) !important;
}
.subgroup-header-container h2 {
    font-size: clamp(12px, 1.8vh + 0.5vw, 30px) !important;
    margin: 0 !important;
}

.subgroup-description {
    padding: clamp(6px, 1vh, 12px) clamp(8px, 1.3vh, 15px) !important;
    margin-bottom: clamp(6px, 1.5vh, 15px) !important;
    font-size: clamp(9px, 1.2vh + 0.35vw, 20px) !important;
}

.prompt-instructions {
    margin-top: clamp(4px, 0.8vh, 10px) !important;
    margin-bottom: 24px !important;
    font-size: clamp(10px, 1.4vh + 0.4vw, 24px) !important;
    gap: clamp(4px, 0.8vh, 10px) !important;
}
.prompt-instructions img,
.prompt-instructions svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0 !important;
}

.similar-verbs-title {
    margin-top: clamp(8px, 1.5vh, 20px) !important;
    margin-bottom: clamp(4px, 0.8vh, 10px) !important;
    font-size: clamp(10px, 1.3vh + 0.35vw, 20px) !important;
}

/* Fluid dynamic scaling for tabs, icons, and list of verbs at the bottom */
.verb-tab-btn {
    font-size: clamp(9px, 1.2vh + 0.35vw, 20px) !important;
    padding: clamp(4px, 0.8vh, 8px) clamp(8px, 1.5vh, 16px) !important;
}

.help-icon {
    width: clamp(16px, 1.8vh + 0.5vw, 30px) !important;
    height: clamp(16px, 1.8vh + 0.5vw, 30px) !important;
    font-size: clamp(9px, 1.2vh + 0.3vw, 18px) !important;
}

.content svg {
    width: clamp(12px, 1.8vh, 18px) !important;
    height: clamp(12px, 1.8vh, 18px) !important;
    vertical-align: middle;
}

.similar-verbs-grid {
    gap: clamp(4px, 0.8vh, 8px) !important;
    margin-top: clamp(6px, 1.2vh, 12px) !important;
}

.similar-verb-item {
    font-size: clamp(9px, 1.2vh + 0.35vw, 20px) !important;
    padding: clamp(3px, 0.6vh, 6px) clamp(6px, 1vh, 10px) !important;
    gap: clamp(6px, 1.2vh, 12px) !important;
}
.similar-verb-item img,
.similar-verb-item svg {
    width: clamp(10px, 1.6vh, 15px) !important;
    height: clamp(10px, 1.6vh, 15px) !important;
}

/* Center-align abbreviations specifically on the overview page */
.overview-tables-container .conjugation-row {
    align-items: center !important;
    cursor: help !important; /* Cursor with question mark pointer */
}
.overview-tables-container .tense-label {
    padding-top: 0 !important;
}

/* Hover dimming and highlighting styles for overview comparisons */
.overview-tables-container .conjugation-row {
    transition: opacity 0.15s, background-color 0.15s;
}
.overview-tables-container .conjugation-row.row-dimmed {
    opacity: 0.25 !important;
}
.overview-tables-container .conjugation-row.active-row-highlight {
    background-color: rgba(144, 202, 249, 0.08) !important;
    border-radius: 4px;
}
.diff-highlight {
    background-color: rgba(255, 152, 0, 0.22) !important; /* Subtle translucent orange */
    color: #ffb74d !important; /* Soft light orange text */
    padding: 1px 0 !important; /* Removed horizontal padding to prevent spacing gaps in words */
    border-radius: 1px;
    font-weight: normal;
}

.similar-highlight {
    background-color: rgba(76, 175, 80, 0.22) !important; /* Translucent green */
    color: #81c784 !important; /* Soft light green text */
    padding: 1px 0 !important;
    border-radius: 1px;
    font-weight: normal;
}

/* Sidebar Resize Handle */
.resizer {
    width: 6px;
    cursor: col-resize;
    background-color: rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 100;
    transition: background-color 0.15s;
    flex-shrink: 0;
    height: 100%;
}
.resizer:hover,
.resizer.resizing {
    background-color: #90caf9 !important; /* Accent blue hover */
}

/* Navigation Text Wrapping */
.nav-text {
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* Allow highlight spans to wrap normally in sidebar */
.sidebar .highlight-unique {
    white-space: normal !important;
}

/* Wrap conjugation value lists within grid columns */
#active-verb-conjugation .conjugation-row > div,
.active-verb-conjugation-wrapper .conjugation-row > div {
    min-width: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Make conjugation endings blue on the welcome/overview page */
.overview-tables-container .base-rule-text {
    color: rgba(144, 202, 249, 0.55) !important;
}

/* Make base-rule texts on active verb pages blue with opacity */
#active-verb-conjugation .base-rule-text {
    color: rgba(144, 202, 249, 0.55) !important;
}

/* Make blue text italic and normal weight inside mobile cards */
.mobile-group-card .reg,
.mobile-group-card .reg-part,
.mobile-group-card .suffix {
    font-style: italic !important;
    font-weight: normal !important;
    letter-spacing: 0.03em !important;
}

/* Remove unpleasant blue tap highlight / flashing overlay on mobile browsers */
button,
a,
.mobile-tense-row div,
[onclick] {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    outline: none !important;
}

/* Overrides for groups view on smartphones to left-align, enlarge, and prevent line wrapping */
@media (max-width: 768px) {
    .main-group-header {
        justify-content: space-between !important;
        font-size: 1.15em !important;
    }
    .sub-nav {
        font-size: 1.05em !important;
    }
    .mobile-nav-list .group-title {
        white-space: nowrap !important;
    }
}

/* Remove left indentation on subgroup items in mobile view to align them perfectly with parent headers */
@media (max-width: 768px) {
    .mobile-nav-list .sub-nav {
        padding-left: 0 !important;
    }
}

/* Remove left padding on mobile headers and links to align text perfectly flush-left with border dividers */
@media (max-width: 768px) {
    .main-group-header {
        padding-left: 0 !important;
    }
    .mobile-nav-list a.nav-link {
        padding-left: 0 !important;
    }
}

/* Remove bold weight on subgroup content text, numbers, and highlighted suffix endings in mobile navigation view */
@media (max-width: 768px) {
    .mobile-nav-list .group-title,
    .mobile-nav-list .group-title *,
    .mobile-nav-list .group-num,
    .mobile-nav-list .highlight-unique {
        font-weight: normal !important;
    }
}

/* Styles for full-width layout of subgroup content lines inside the mobile view list */
@media (max-width: 768px) {
    .mobile-nav-list a.nav-link {
        background-color: rgba(255, 255, 255, 0.04) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        padding: 10px 16px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
        transition: background-color 0.2s !important;
    }
    .mobile-nav-list a.nav-link:active {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }
}