body {
    background: #f4f4f4;
    color: #333;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}
button {
    background: #006666;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin: 5px;
}
.channel-btn {
    background: #008080;
}
input, select {
    font-size: 12pt;
    margin: 5px 0;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
}
.form-section input, .form-section select {
    max-width: 400px;
}
.taillee-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 5px;
    vertical-align: middle;
}
.taillee-item .thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
    vertical-align: middle;
}
#taskTotals span {
    display: inline-block;
    font-size: 0.9em;
    padding: 5px 0;
}
@media (max-width: 600px) {
    body { padding: 5px; }
    h2, h3 { font-size: 1.2em; }
    button, input, select { font-size: 10pt; }
    .taillee-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin: 3px;
    }
    .taillee-item .thumbnail {
        width: 80px;
        height: 80px;
    }
}

body.dark-mode {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}
@media (orientation: landscape) {
    body.dark-mode {
        background: #1a1a1a !important;
        color: #e0e0e0 !important;
    }
}
.dark-mode .tab,
.dark-mode .taillee-item,
.dark-mode .tab-buttons,
.dark-mode .sub-tab-buttons,
.dark-mode .form-section,
.dark-mode #profileInfo,
.dark-mode .modal-content,
.dark-mode .spark,
.dark-mode .menu {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}
.dark-mode h2,
.dark-mode h3 {
    color: #00cccc !important;
}
.dark-mode button {
    background: #008080 !important;
    color: #fff !important;
}
.dark-mode .url-btn {
    background: #006666 !important;
}
.dark-mode .channel-btn {
    background: #008080 !important;
}
.dark-mode .edit-btn {
    background: #00cccc !important;
}
.dark-mode .countdown {
    color: #ff6666 !important;
}
.dark-mode .counts,
.dark-mode .custom-sums,
.dark-mode #countdownDisplay {
    color: #b0b0b0 !important;
}
.dark-mode input,
.dark-mode select {
    background: #333 !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}
.url-btn, .creator-btn { background: #004d4d; color: #fff; padding: 5px 10px; border-radius: 5px; text-decoration: none; }
.edit-btn, .delete-btn { background: #008080; color: #fff; padding: 5px 10px; border-radius: 5px; border: none; cursor: pointer; }
.delete-btn { background: #cc0000; }