/* Container */
#sldict-app {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1000px;
    font-family: Arial, sans-serif;
}

/* Search bar */
#sldict-search {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Alphabet bar */
#sldict-alpha {
    text-align: center;
    margin-bottom: 10px;
}

#sldict-alpha .sldict-letter {
    display: inline-block;
    margin: 2px 4px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.2s;
    user-select: none;
}

#sldict-alpha .sldict-letter:hover {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* Columns */
.sldict-columns {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

/* Term list */
#sldict-list {
    flex: 1 1 250px;
    max-height: 500px;
    overflow-y: auto;
    padding: 0;
    list-style: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#sldict-list li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

#sldict-list li:hover {
    background-color: #f0f0f0;
}

/* Viewer */
#sldict-viewer {
    flex: 2 1 500px;
}

#sldict-viewer h3 {
    margin: 0 0 8px 0;
}

#sldict-viewer p {
    margin: 0 0 12px 0;
}

#sldict-viewer video {
    width: 100%;
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .sldict-columns {
        flex-direction: column;
    }
}


#sldict-video-buttons {
    margin-bottom: 10px;
}

.sldict-video-btn {
    display: inline-block;
    margin: 3px;
    padding: 5px 10px;
    background: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.sldict-video-btn.active,
.sldict-video-btn:hover {
    background: #0073aa;
    color: #fff;
}


#sldict-share-buttons {
    margin-bottom: 10px;
}

.sldict-share-btn {
    display: inline-block;
    margin: 3px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}

.sldict-share-yt {
    background: #cc0000;
}

.sldict-share-fb {
    background: #1877f2;
}

.sldict-share-btn:hover {
    opacity: 0.85;
}