.ysp-lexis-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1.5rem;
}

.ysp-lexis-card {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.ysp-lexis-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ysp-lexis-card h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #005f73;
}

.pos-tag {
    font-size: 0.9rem;
    color: #666;
    margin-left: 0.3rem;
}



/* New SRS stage left-border styling */
.srs-stage-1 { border-left: 6px solid #fca311; }  /* amber */
.srs-stage-2 { border-left: 6px solid #2a9d8f; }  /* teal */
.srs-stage-3 { border-left: 6px solid #457b9d; }  /* blue */
.srs-stage-4 { border-left: 6px solid #264653; }  /* dark blue */

/* Section box styling (Translation, Examples, Word Family, etc.) */
.ysp-lexis-section {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* Buttons */
.ysp-save-permanent {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #0a9396;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.ysp-save-permanent:hover {
    background-color: #007f81;
}

.ysp-open-sentence-btn {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: #005f73;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.ysp-open-sentence-btn:hover {
    background-color: #003d4a;
}

/* SRS badge and next review line */
.ysp-srs-info {
background: #CAC9C9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.ysp-lexis-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1.5rem;
}

.ysp-lexis-card {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.ysp-lexis-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ysp-lexis-card h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #005f73;
}

.pos-tag {
    font-size: 0.9rem;
    color: #666;
    margin-left: 0.3rem;
}

.ysp-lexis-card ul {
    margin: 0.5em 0 0 1em;
    padding: 0;
}

.ysp-lexis-card li {
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 0.5em;
}

/* New SRS stage left-border styling */
.srs-stage-1 { border-left: 6px solid #fca311; }  /* amber */
.srs-stage-2 { border-left: 6px solid #2a9d8f; }  /* teal */
.srs-stage-3 { border-left: 6px solid #457b9d; }  /* blue */
.srs-stage-4 { border-left: 6px solid #264653; }  /* dark blue */

/* Section box styling (Translation, Examples, Word Family, etc.) */
.ysp-lexis-section {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* Buttons */
.ysp-save-permanent {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #0a9396;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.ysp-save-permanent:hover {
    background-color: #007f81;
}

.ysp-open-sentence-btn {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: #005f73;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.ysp-open-sentence-btn:hover {
    background-color: #003d4a;
}

/* SRS badge and next review line */
.ysp-srs-info {
background: #CAC9C9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}


/* Practice List Table Focus Cell Styling */
.ysp-table .focus-term-cell {
    padding: 0; /* Remove padding from cell */
}
.ysp-table .focus-term-cell div {
    padding: 8px 12px; /* Apply padding to inner div instead */
    border-radius: 0; /* Override the border-radius from .ysp-lexis-card */
}

/* Mobile stage indicators */
.mobile-stage-indicator {
    display: none; /* Hidden by default */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    display: none;
    vertical-align: middle;
}
.mobile-stage-indicator.stage-1 { background-color: #fca311; } /* amber */
.mobile-stage-indicator.stage-2 { background-color: #2a9d8f; } /* teal */
.mobile-stage-indicator.stage-3 { background-color: #457b9d; } /* blue */
.mobile-stage-indicator.stage-4 { background-color: #264653; } /* dark blue */

/* Mobile-specific styles */
@media (max-width: 480px) {
    /* Show the stage indicators on mobile */
    .mobile-stage-indicator {
        display: inline-block;
    }
}

/* SRS Stage Color Key */
.ysp-srs-color-key {
    display: none; /* Hidden by default */
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.ysp-srs-color-key h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.ysp-srs-color-key-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.ysp-srs-color-key-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #ccc; /* Default color */
}

.ysp-srs-color-key-dot.stage-1 { background-color: #fca311 !important; } /* amber */
.ysp-srs-color-key-dot.stage-2 { background-color: #2a9d8f !important; } /* teal */
.ysp-srs-color-key-dot.stage-3 { background-color: #457b9d !important; } /* blue */
.ysp-srs-color-key-dot.stage-4 { background-color: #264653 !important; } /* dark blue */

.ysp-srs-color-key-label {
    font-size: 12px;
    color: #666;
}

/* Show color key on mobile */
@media (max-width: 480px) {
    .ysp-srs-color-key {
        display: block;
    }
}