* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #eef5ee;
    color: #1c2b1c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- login ---------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #1f5b32;
}

.login-box {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-box input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 17px;
    border: none;
    border-radius: 8px;
    outline: none;
}

.login-box input[type="password"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.login-box .error {
    margin: 0;
    color: #ffd6d6;
    font-size: 14px;
    text-align: center;
}

/* ---------- player ---------- */

.topbar {
    background: #1f5b32;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.topbar .logout {
    color: #d9ecd9;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
}

.topbar .logout:active {
    background: rgba(255, 255, 255, 0.15);
}

.tabs {
    display: flex;
    gap: 8px;
    padding: 10px 12px 0;
    max-width: 640px;
    margin: 0 auto;
}

.tabs a {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    color: #2e5a2e;
    font-size: 14px;
    font-weight: 600;
    background: #dfeddf;
}

.tabs a.active {
    background: #2e8b3d;
    color: #fff;
}

.song-list {
    padding: 12px;
    max-width: 640px;
    margin: 0 auto;
}

.file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid #cfe3cf;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #1c2b1c;
}

.file-row:active {
    background: #eef5ee;
}

.file-name {
    font-weight: 600;
    font-size: 15px;
    word-break: break-word;
}

.file-size {
    flex-shrink: 0;
    font-size: 13px;
    color: #5a6e5a;
}

.empty {
    text-align: center;
    color: #5a6e5a;
    padding: 40px 0;
}

.song {
    background: #fff;
    border: 1px solid #cfe3cf;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.song-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.titles .title {
    font-weight: 600;
    font-size: 15px;
    word-break: break-word;
}

.titles .subtitle {
    font-size: 12px;
    color: #5a6e5a;
    word-break: break-word;
}

.dl {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f5b32;
    text-decoration: none;
    border: 1px solid #cfe3cf;
    border-radius: 6px;
    font-size: 16px;
}

.dl:active {
    background: #eef5ee;
}

.song audio {
    width: 100%;
    display: block;
}

/* controls: guide/show switch + speed, side by side */

.controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
}

.switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.switch-label {
    font-size: 13px;
    color: #4a5e4a;
}

.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #bcd6bc;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.toggle-input:checked + .slider {
    background: #2e8b3d;
}

.toggle-input:checked + .slider::before {
    transform: translateX(20px);
}

/* speed */

.speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.speed-label {
    font-size: 13px;
    color: #4a5e4a;
}

.speed-input {
    width: 110px;
    accent-color: #2e8b3d;
}

.speed-val {
    font-size: 13px;
    font-weight: 600;
    color: #2e5a2e;
    min-width: 32px;
}

/* lyrics */

.lyrics {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e3f0e3;
}

.lyrics summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #2e5a2e;
}

.lyrics-body {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #294029;
}

.lyrics-body ol,
.lyrics-body ul {
    padding-left: 22px;
}

.lyrics-body p {
    margin: 0 0 6px;
}

/* ---------- admin ---------- */

.saved-msg {
    background: #2e8b3d;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 12px;
    font-size: 14px;
}

.admin-row {
    background: #fff;
    border: 1px solid #cfe3cf;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-hint {
    max-width: 640px;
    margin: 0 auto 10px;
    padding: 0 12px;
    font-size: 13px;
    color: #4a5e4a;
    text-align: center;
}

.drag-handle-inline {
    color: #2e8b3d;
}

.admin-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
}

.admin-row-title {
    flex: 1;
}

.drag-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: grab;
    touch-action: none;
    color: #2e8b3d;
    background: #eef5ee;
    font-size: 26px;
    line-height: 1;
    border: 1px solid #cfe3cf;
    border-radius: 8px;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
    background: #dfeddf;
}

.admin-row.dragging-ghost {
    opacity: 0.4;
}

.quill-editor {
    background: #fff;
    min-height: 100px;
}

.quill-editor .ql-editor {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #1c2b1c;
    min-height: 90px;
}

.admin-type {
    font-weight: 400;
    font-size: 12px;
    color: #5a6e5a;
}

.admin-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label {
    font-size: 13px;
    color: #3c4f3c;
    font-weight: 600;
}

.admin-row input[type="text"],
.admin-row input[type="number"],
.admin-row textarea {
    padding: 10px;
    border: 1px solid #cfe3cf;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
}

.admin-row input[type="color"] {
    width: 60px;
    height: 38px;
    border: 1px solid #cfe3cf;
    border-radius: 6px;
    padding: 2px;
    background: #fff;
}

.save-btn {
    width: 100%;
    padding: 14px;
    background: #2e8b3d;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.save-btn:active {
    background: #256e31;
}

/* ---------- desktop ---------- */

@media (min-width: 700px) {
    .song-list {
        padding: 24px;
    }

    .song {
        padding: 16px 18px;
    }
}