/* =========================================
   Global Theme Variables (Light Mode)
   ========================================= */
:root {
    --bg: #ffffff;
    --fg: #111111;
    --subtle: #666666;

    --card-bg: #f5f5f5;
    --card-border: #dddddd;

    --btn-bg: #e0e0e0;
    --btn-fg: #111111;
    --btn-hover: #d5d5d5;

    --primary-bg: #007aff;
    --primary-fg: #ffffff;
    --primary-hover: #006be0;

    --danger-bg: #ff3b30;
    --danger-fg: #ffffff;
    --danger-hover: #e2332a;

    --divider: #cccccc;
}

/* =========================================
   Dark Mode Overrides
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --fg: #ffffff;
        --subtle: #aaaaaa;

        --card-bg: #1a1a1a;
        --card-border: #333333;

        --btn-bg: #2a2a2a;
        --btn-fg: #ffffff;
        --btn-hover: #3a3a3a;

        --primary-bg: #0a84ff;
        --primary-fg: #ffffff;
        --primary-hover: #006fe0;

        --danger-bg: #ff453a;
        --danger-fg: #ffffff;
        --danger-hover: #e03a32;

        --divider: #444444;
    }
}

/* =========================================
   Base Layout
   ========================================= */
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, sans-serif;
    height: 100%;
}

/* =========================================
   Top Bar
   ========================================= */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--divider);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-btn {
    background: none;
    border: none;
    color: var(--fg);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
}

.title {
    font-size: 20px;
    font-weight: 600;
}

/* =========================================
   Main Content
   ========================================= */
.content {
    padding: 16px;
}

/* =========================================
   Buttons
   ========================================= */
.btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.15s ease;
}

.btn.primary {
    background: var(--primary-bg);
    color: var(--primary-fg);
}

.btn.primary:hover {
    background: var(--primary-hover);
}

.btn.danger {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.btn.danger:hover {
    background: var(--danger-hover);
}

.btn:not(.primary):not(.danger) {
    background: var(--btn-bg);
    color: var(--btn-fg);
}

.btn:not(.primary):not(.danger):hover {
    background: var(--btn-hover);
}

/* =========================================
   Actions Section
   ========================================= */
.actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* =========================================
   List
   ========================================= */
.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list li {
    padding: 14px 12px;
    border-bottom: 1px solid var(--divider);
    background: var(--card-bg);
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.list li:hover {
    background: var(--btn-hover);
}

.playlist-item {
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.playlist-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.playlist-item .item-origin {
    display: block;
    word-break: break-all;
}