/* ══════════════════════════════════════════════════════════════════════════
   remote.css — mobile-portrait controller UI
   Shared by all memberships. Each remote.html defines per-membership variables
   (--rm-accent, --rm-glass-bg, etc.) — defaults below match ThaiKara.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Layout */
    --rm-topbar-h: 56px;
    --rm-bottomnav-h: 68px;
    --rm-drawer-w: 280px;
    --rm-content-pad: 14px;

    --rm-fg:var(--theme-white);
    --rm-fg-dim:rgba(var(--theme-white-rgb),.55);
    --rm-fg-muted:rgba(var(--theme-white-rgb),.35);

            --rm-bg-page: var(--theme-remote-page);
            --rm-bg-card: rgba(var(--theme-remote-card-rgb),0.78);
            --rm-bg-card-strong: rgba(var(--theme-remote-strong-rgb),0.95);
            --rm-border: rgba(var(--theme-primary-rgb),0.14);
            --rm-border-strong: rgba(var(--theme-primary-rgb),0.22);
            --rm-divider: rgba(var(--theme-primary-rgb),0.10);
            --rm-active-bg: rgba(var(--theme-primary-rgb),0.12);
            --rm-row-hover: rgba(var(--theme-primary-rgb),0.06);
            --rm-accent: var(--theme-primary);
            --rm-accent-fg: var(--theme-white);
            --rm-active-fg: var(--theme-primary);
            --rm-accent-gradient: var(--theme-paint-chrome);

    /* Status circle */
    --rm-status-ok: var(--theme-success);
    --rm-status-warn: var(--theme-warning);
    --rm-status-err: var(--theme-error);
    --rm-status-idle: rgba(var(--theme-white-rgb),0.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--rm-bg-page);
    color: var(--rm-fg);
    font-family: var(--tk-font);
    font-size: 19.5px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
}

button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Hide scrollbars on every scrollable list/container in the mobile remote.
   Lists keep their scroll behaviour; only the visual scrollbar is hidden. */
.rm-drawer-list,
.rm-tab,
#rm-songs-list,
.rm-pick-list,
.rm-pl-list,
#rm-queue-list,
#rm-controls-grid {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* old Edge / IE */
}
.rm-drawer-list::-webkit-scrollbar,
.rm-tab::-webkit-scrollbar,
#rm-songs-list::-webkit-scrollbar,
.rm-pick-list::-webkit-scrollbar,
.rm-pl-list::-webkit-scrollbar,
#rm-queue-list::-webkit-scrollbar,
#rm-controls-grid::-webkit-scrollbar {
    display: none;                /* WebKit / Blink */
}

/* ── Wallpaper background (faint, behind everything) ─────────────────────── */
#rm-wallpaper {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: none;
    opacity: 0.18;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Top bar
   ══════════════════════════════════════════════════════════════════════════ */
#rm-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rm-topbar-h);
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--rm-topbar-h) + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rm-bg-card-strong);
    border-bottom: 1px solid var(--rm-divider);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
}

.rm-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rm-fg);
    transition: background 0.15s;
    flex-shrink: 0;
}
.rm-icon-btn:active { background: var(--rm-active-bg); }
.rm-icon-btn svg { width: 22px; height: 22px; }

#rm-title {
    flex: 1;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#rm-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rm-status-idle);
    flex-shrink: 0;
    margin-right: 4px;
    transition: background 0.2s, box-shadow 0.2s;
    cursor: pointer;
    /* Slightly larger tap target via ::before — kept inside the existing 4px margin
       so it doesn't overlap the neighbouring fullscreen button. */
    position: relative;
}
#rm-status-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}
#rm-status-dot[data-state="ok"] {
    background: var(--rm-status-ok);
    box-shadow: 0 0 8px var(--rm-status-ok);
}
#rm-status-dot[data-state="warn"] {
    background: var(--rm-status-warn);
    box-shadow: 0 0 8px var(--rm-status-warn);
}
#rm-status-dot[data-state="err"] {
    background: var(--rm-status-err);
    box-shadow: 0 0 8px var(--rm-status-err);
}

/* ══════════════════════════════════════════════════════════════════════════
   Side drawer (slide from left)
   ══════════════════════════════════════════════════════════════════════════ */
#rm-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--theme-black-rgb),0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 200;
}
#rm-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

#rm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rm-drawer-w);
    max-width: 86vw;
    background: var(--rm-bg-card-strong);
    border-right: 1px solid var(--rm-divider);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 201;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
}
#rm-drawer.open {
    transform: translateX(0);
}

#rm-drawer-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--rm-divider);
}
#rm-drawer-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.3px;
}
/* User info block in drawer header — mirrors desktop side-menu-user (no refresh button). */
#rm-drawer-userinfo {
    margin-top: 8px;
    font-size: 17px;
    color: var(--rm-fg);
    line-height: 1.5;
}
#rm-drawer-userinfo .rm-userinfo-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
#rm-drawer-userinfo .rm-userinfo-label {
    color: var(--rm-fg-dim);
    font-weight: 400;
    flex-shrink: 0;
}
#rm-drawer-userinfo .rm-userinfo-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#rm-drawer-userinfo .rm-userinfo-expire {
    margin-top: 4px;
    color: var(--rm-fg-dim);
    font-size: 16px;
}

.rm-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.rm-drawer-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    color: var(--rm-fg);
    font-size: 18px;
    text-align: left;
    transition: background 0.12s;
}
.rm-drawer-item:hover { background: var(--rm-row-hover); }
.rm-drawer-item:active { background: var(--rm-active-bg); }
.rm-drawer-item svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.8; }
.rm-drawer-item .rm-drawer-label { flex: 1; }

/* Toggle switch (score) */
.rm-switch {
    position: relative;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.rm-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.rm-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: rgba(var(--theme-white-rgb),0.15);
    border: 1px solid rgba(var(--theme-white-rgb),0.2);
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}
.rm-switch-track::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(var(--theme-white-rgb),0.5);
    transition: transform 0.2s, background 0.2s;
}
/* Desktop side-menu-switch parity (style.css:915). ThaiKara override the
   on-state with a gradient via `!important` in their remote.html. */
.rm-switch input:checked + .rm-switch-track {
    background: rgba(var(--theme-checked-rgb),0.5);
    border-color: rgba(var(--theme-checked-rgb),0.7);
}
.rm-switch input:checked + .rm-switch-track::after {
    background: var(--theme-white);
}
.rm-switch input:checked + .rm-switch-track::after {
    transform: translateX(16px);
}

/* Language sub-list inside drawer */
.rm-lang-list {
    display: none;
    background: rgba(var(--theme-white-rgb),0.03);
    border-top: 1px solid var(--rm-divider);
    border-bottom: 1px solid var(--rm-divider);
}
.rm-lang-list.open { display: block; }
.rm-lang-list .rm-lang-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 18px 11px 52px;
    font-size: 17px;
    color: var(--rm-fg);
    transition: background 0.12s;
}
.rm-lang-list .rm-lang-item:active { background: var(--rm-active-bg); }
.rm-lang-list .rm-lang-item.active,
.rm-lang-list .rm-lang-item.smenu-opt-current {
    color: var(--rm-fg);
    background: var(--rm-active-bg);
    font-weight: 600;
}

#rm-drawer-version {
    padding: 12px 18px;
    border-top: 1px solid var(--rm-divider);
    font-size: 14px;
    color: var(--rm-fg-muted);
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Main content area + tabs
   ══════════════════════════════════════════════════════════════════════════ */
#rm-main {
    position: fixed;
    top: calc(var(--rm-topbar-h) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: calc(var(--rm-bottomnav-h) + env(safe-area-inset-bottom));
    overflow: hidden;
}

.rm-tab {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--rm-content-pad);
    -webkit-overflow-scrolling: touch;
    display: none;
}
.rm-tab.active { display: block; }

/* Phase 1 placeholder */
.rm-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--rm-fg-dim);
    gap: 12px;
    padding: 32px 16px;
}
.rm-placeholder svg {
    width: 56px;
    height: 56px;
    opacity: 0.35;
}
.rm-placeholder-title {
    font-size: 19.5px;
    font-weight: 600;
    color: var(--rm-fg);
}
.rm-placeholder-msg {
    font-size: 17px;
    line-height: 1.5;
    max-width: 260px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Bottom navigation
   ══════════════════════════════════════════════════════════════════════════ */
#rm-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--rm-bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    background: var(--rm-bg-card-strong);
    border-top: 1px solid var(--rm-divider);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
}

.rm-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--rm-fg-dim);
    transition: color 0.15s;
    position: relative;
    padding: 8px 4px;
}
.rm-nav-item svg {
    width: 24px;
    height: 24px;
    transition: transform 0.15s;
}
.rm-nav-item .rm-nav-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.rm-nav-item.active {
    color: var(--rm-active-fg);
}
.rm-nav-item.active svg {
    transform: scale(1.06);
}
.rm-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--rm-accent);
}
.rm-nav-item:active { opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════════════════
   Banner / toast (for transient errors like "session expired")
   ══════════════════════════════════════════════════════════════════════════ */
#rm-banner {
    position: fixed;
    top: calc(var(--rm-topbar-h) + env(safe-area-inset-top) + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    background: var(--rm-bg-card-strong);
    border: 1px solid var(--rm-border);
    border-radius: 14px;
    padding: 10px 18px;
    font-size: 17px;
    color: var(--rm-fg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 300;
    max-width: 92%;
    text-align: center;
}
#rm-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#rm-banner.warn { border-color: rgba(var(--theme-warning-rgb),0.5); }
#rm-banner.err { border-color: rgba(var(--theme-error-rgb),0.5); }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 2 — Songs tab
   ══════════════════════════════════════════════════════════════════════════ */

#rm-tab-songs {
    padding: 0;
}
#rm-tab-songs.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rm-songs-header {
    flex-shrink: 0;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--rm-divider);
    background: var(--rm-bg-page);
}

.rm-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--rm-active-bg);
    border-radius: 12px;
    border: 1px solid var(--rm-border);
    padding: 0 8px 0 12px;
    height: 42px;
}
.rm-search-bar svg.rm-search-icon {
    width: 18px;
    height: 18px;
    color: var(--rm-fg-dim);
    flex-shrink: 0;
}
.rm-search-bar input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--rm-fg);
    font: inherit;
    font-size: 19.5px;
    padding: 0 8px;
    -webkit-appearance: none;
    appearance: none;
}
.rm-search-bar input::placeholder { color: var(--rm-fg-muted); }
.rm-search-bar input::-webkit-search-decoration,
.rm-search-bar input::-webkit-search-cancel-button,
.rm-search-bar input::-webkit-search-results-button,
.rm-search-bar input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.rm-search-clear {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--theme-white-rgb),0.08);
    color: var(--rm-fg-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rm-search-clear svg { width: 14px; height: 14px; }

.rm-voice-btn {
    width: 32px;
    height: 32px;
    margin-left: 6px;
    border-radius: 50%;
    background: transparent;
    color: var(--rm-fg-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 120ms ease, background 120ms ease;
}
.rm-voice-btn svg { width: 18px; height: 18px; }
.rm-voice-btn.listening {
    color: var(--theme-danger-action);
    background: rgba(var(--theme-danger-action-rgb),0.12);
    animation: rm-voice-pulse 1.1s ease-in-out infinite;
}
@keyframes rm-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-danger-action-rgb),0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--theme-danger-action-rgb),0); }
}

#rm-songs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.rm-virtual-spacer {
    position: relative;
    width: 100%;
}

:root { --rm-song-row-inset: 14px; }

.rm-song-row {
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px var(--rm-song-row-inset);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rm-divider);
    transition: background 0.1s;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.rm-song-row:active {
    background: var(--rm-active-bg);
}
/* Single-line layout: song name (no shrink) — separator — artist (shrinks + ellipsis).
   Mirrors `.autocomplete-item .ac-song / .ac-artist` on desktop.
   Reused by .rm-song-row (songs / playlist) AND .rm-queue-row. */
.rm-song-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--rm-fg);
    flex-shrink: 0;
    line-height: 1.35;
}
.rm-song-sep {
    color: var(--rm-fg-dim);
    margin: 0 6px;
    flex-shrink: 0;
}
.rm-song-artist {
    font-size: 0.78em;
    color: var(--rm-fg-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    line-height: 1.35;
}
/* Position number prefix used in queue rows + playlist drill-down song rows. */
.rm-row-idx {
    flex-shrink: 0;
    min-width: 0;
    margin-right: 10px;
    color: var(--rm-fg-muted);
    font-size: 17px;
    font-weight: 600;
    text-align: left;
}
/* Match desktop autocomplete highlight: orange underline, no fill.
   Scoped to .rm-song-row only — playlist drill-down + queue must NOT highlight
   even though they reuse the same .rm-song-name span class. */
.rm-song-row mark {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--theme-warning-action);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
/* Total-count status line above playlist song-list view + queue list.
   Mirrors .rm-songs-header (border-bottom + bg) so the count sits in its own
   header strip — divider matches the songs tab visual. */
.rm-list-status {
    padding: 12px 14px;
    font-size: 16px;
    color: var(--rm-fg-dim);
    min-height: 16px;
    flex-shrink: 0;
    text-align: right;
    background: var(--rm-bg-page);
    border-bottom: 1px solid var(--rm-divider);
}

.rm-list-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--rm-fg-dim);
    font-size: 17px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   Bottom sheet (pick-playlist modal)
   ══════════════════════════════════════════════════════════════════════════ */
.rm-bs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--theme-black-rgb),0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 400;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rm-bs-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.rm-bs-sheet {
    width: 100%;
    max-width: 480px;
    background: var(--rm-bg-card-strong);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid var(--rm-border);
    border-bottom: none;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    /* Sheet auto-sizes to content. The list inside caps at ~half-screen and scrolls. */
    display: flex;
    flex-direction: column;
}
.rm-bs-overlay.show .rm-bs-sheet {
    transform: translateY(0);
}

.rm-bs-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--theme-white-rgb),0.25);
    margin: 0 auto 12px;
}
.rm-bs-title {
    text-align: center;
    color: var(--rm-fg);
    /* Title can wrap when it includes a long song name. */
    word-break: break-word;
}

.rm-pick-list {
    /* Caps at ~half-screen. Sheet auto-sizes around it: small list = small sheet;
       long list = ~50vh sheet with internal scroll. */
    flex: 0 1 auto;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 0 4px;
    /* hide scrollbars */
    scrollbar-width: none;
}
.rm-pick-list::-webkit-scrollbar { display: none; }
.rm-pick-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 10px;
    color: var(--rm-fg);
    text-align: left;
    transition: background 0.12s;
}
.rm-pick-row:active { background: var(--rm-active-bg); }
.rm-pick-row[disabled] { opacity: 0.5; }
.rm-pick-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-pick-row-count {
    color: var(--rm-fg-dim);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}
.rm-pick-empty, .rm-pick-loading {
    text-align: center;
    color: var(--rm-fg-dim);
}

/* Bottom action row: Cancel + Add to new playlist (mirrors desktop pick modal).
   Buttons mirror the email-verify dialog: confirm = membership gradient (or solid
   accent for ThaiKara), cancel = dark translucent. --rm-accent-gradient is set
   per membership in remote.html; falls back to the solid accent for ThaiKara. */
.rm-pick-actions {
    display: flex;
}
.rm-pick-btn {
    flex: 1;
    border-radius: 12px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}
.rm-pick-btn.rm-pick-cancel {
    background: rgba(var(--theme-black-rgb),0.35);
    border: 1px solid rgba(var(--theme-white-rgb),0.20);
    color: rgba(var(--theme-white-rgb),0.65);
}
.rm-pick-btn.rm-pick-cancel:active {
    background: rgba(var(--theme-black-rgb),0.50);
    border-color: rgba(var(--theme-white-rgb),0.35);
    color: rgba(var(--theme-white-rgb),0.90);
    transform: scale(0.96);
}
.rm-pick-btn.rm-pick-new {
    background: var(--tk-button-bg);
    color: var(--rm-accent-fg);
    border: 2px solid transparent;
}
.rm-pick-btn.rm-pick-new:active {
    opacity: 0.85;
    transform: scale(0.96);
}

/* Create-playlist bottom sheet (uses same .rm-bs-* / .rm-pick-actions chrome). */
.rm-create-pl-input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(var(--theme-white-rgb),0.20);
    background: rgba(var(--theme-white-rgb),0.05);
    color: var(--theme-white);
    font: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.rm-create-pl-input:focus {
    border-color: rgba(var(--theme-white-rgb),.5);
}
.rm-create-pl-error {
    color: var(--theme-error);
}

/* ══════════════════════════════════════════════════════════════════════════
   Toast (transient confirmation at bottom-center)
   ══════════════════════════════════════════════════════════════════════════ */
#rm-toast {
    position: fixed;
    bottom: calc(var(--rm-bottomnav-h) + env(safe-area-inset-bottom) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--rm-bg-card-strong);
    border: 1px solid var(--rm-border);
    border-radius: 14px;
    padding: 10px 18px;
    font-size: 17px;
    color: var(--rm-fg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 350;
    max-width: 92%;
    text-align: center;
    box-shadow: 0 6px 24px rgba(var(--theme-black-rgb),0.4);
}
#rm-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#rm-toast.err { border-color: rgba(var(--theme-error-rgb),0.5); }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 3 — Playlist tab (drill-down: cats → my-playlists/cat-songs/pl-songs)
   ══════════════════════════════════════════════════════════════════════════ */

#rm-tab-playlist {
    padding: 0;
}
#rm-tab-playlist.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rm-pl-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Extra bottom padding so the last items can scroll past the FAB without
       being permanently obscured by it. */
    padding: 0 0 90px;
}

/* Section heading between rec groups */
.rm-pl-section {
    padding: 14px 14px 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rm-fg-muted);
    background: transparent;
}

/* Category row (clickable, drills in) */
.rm-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-bottom: 1px solid var(--rm-divider);
    color: var(--rm-fg);
    background: transparent;
    transition: background 0.1s;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.rm-cat-row:active {
    background: var(--rm-active-bg);
}
.rm-cat-row-name {
    flex: 1;
    font-size: 19px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 12px;
}
.rm-cat-row-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rm-fg-dim);
    font-size: 17px;
}
.rm-cat-row-chevron {
    width: 14px;
    height: 14px;
    color: var(--rm-fg-muted);
}

/* Floating action button (FAB) — used by playlist (+) and queue (trash).
   Positioned at bottom-right of the parent tab. The list inside the tab gets
   extra bottom padding so its content can scroll past the FAB when needed. */
.rm-fab {
    position: absolute;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--tk-button-bg);
    color: var(--rm-accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(var(--theme-black-rgb),0.45);
    z-index: 6;
    transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.rm-fab:active {
    transform: scale(0.94);
    box-shadow: 0 3px 10px rgba(var(--theme-black-rgb),0.5);
}
.rm-fab svg { width: 24px; height: 24px; }

#rm-rec-add-all-fab,
#rm-queue-fab { background: none; }
#rm-rec-add-all-fab::before,
#rm-queue-fab::before {
    content: "";
    position: absolute;
    inset: -2px;
    box-sizing: border-box;
    border: inherit;
    border-radius: inherit;
    background: var(--tk-button-bg);
    opacity: .75;
    pointer-events: none;
    z-index: -1;
}

/* Swipe-to-delete (matches app.js attachSwipeRemove pattern) */
.rm-swipeable {
    position: relative;
    will-change: transform;
    background: transparent;
}
.rm-swipeable.swipe-removing {
    transition: transform 0.25s ease, opacity 0.25s ease, max-height 0.3s ease 0.05s, padding 0.3s ease 0.05s, border-color 0.3s ease 0.05s !important;
    transform: translateX(-100%) !important;
    opacity: 0;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
    overflow: hidden;
}
.rm-swipeable.swiping-left {
    /* When swiped beyond threshold, brighten the bg to confirm the action */
}
/* Trash hint icon revealed behind the row when swiping (visual cue) */
.rm-swipe-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: 16px;
    color: rgba(var(--theme-white-rgb),0.7);
    pointer-events: none;
}
.rm-swipe-hint svg { width: 22px; height: 22px; }

/* Empty-state hint */
.rm-pl-empty {
    padding: 30px 18px;
    text-align: center;
    color: var(--rm-fg-dim);
    font-size: 17px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 4 — Queue tab (drag-reorder + swipe-delete + tap-twice-to-play)
   ══════════════════════════════════════════════════════════════════════════ */

#rm-tab-queue {
    padding: 0;
}
#rm-tab-queue.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#rm-queue-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Extra bottom padding so the last items can scroll past the trash FAB. */
    padding: 6px 0 90px;
}

/* Plain row matching .rm-song-row — index + inline name - artist.
   Card/border styling appears only on .dragging during reorder. */
.rm-queue-row {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px var(--rm-song-row-inset);
    border-bottom: 1px solid var(--rm-divider);
    color: var(--rm-fg);
    background: transparent;
    transition: background 0.15s, box-shadow 0.2s, transform 0.2s, border-color 0.15s;
    will-change: transform;
    overflow: hidden;
    white-space: nowrap;
    /* Block native vertical scroll on touch so our drag handler can take over */
    touch-action: pan-y;
}
.rm-queue-row.active {
    background: var(--rm-active-bg);
}
.rm-queue-row.active .rm-row-idx {
    color: var(--rm-accent);
}
.rm-queue-row.dragging {
    background: var(--rm-bg-card-strong);
    border: 1px solid var(--rm-accent);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(var(--theme-black-rgb),0.55);
    z-index: 5;
}
.rm-queue-row.swipe-removing {
    transition: transform 0.25s ease, opacity 0.25s ease, max-height 0.3s ease 0.05s,
                padding 0.3s ease 0.05s, border-color 0.3s ease 0.05s !important;
    transform: translateX(-100%) !important;
    opacity: 0;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
    overflow: hidden;
}

.rm-queue-empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--rm-fg-dim);
    font-size: 17px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 5 — Controls tab (8-button grid)
   ══════════════════════════════════════════════════════════════════════════ */

#rm-tab-controls {
    padding: 0;
}
#rm-tab-controls.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#rm-controls-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(110px, 1fr);
    gap: 10px;
    align-content: stretch;
}

.rm-ctl-btn {
    background: var(--rm-bg-card);
    border: 1px solid var(--rm-border);
    border-radius: 16px;
    color: var(--rm-fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    /* Block native scroll so vertical drag adjusts the value */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}
.rm-ctl-btn:active {
    background: var(--rm-active-bg);
    transform: scale(0.97);
}
/* Children must not intercept the pointer — otherwise touch-action: none on
   the parent button is bypassed when the touch lands on an SVG/span and the
   browser ends up scrolling instead of letting our drag handler accumulate. */
.rm-ctl-btn > * {
    pointer-events: none;
}
.rm-ctl-btn.dragging {
    background: var(--rm-active-bg);
    border-color: var(--rm-accent);
    transform: scale(1.02);
}
.rm-ctl-btn.muted {
    opacity: 0.55;
}
.rm-ctl-btn .rm-ctl-icon {
    width: 32px;
    height: 32px;
    color: var(--rm-fg);
    flex-shrink: 0;
}
.rm-ctl-btn .rm-ctl-label {
    font-size: 16px;
    color: var(--rm-fg-dim);
    text-align: center;
    line-height: 1.2;
}
.rm-ctl-btn .rm-ctl-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--rm-fg);
    margin-top: -2px;
    letter-spacing: 0.2px;
}


#rm-pl-list.rm-has-add-all {padding-bottom:88px;}

/* Shared controller chrome; all paint values come from theme/*.json. */

        body {
            font-family: var(--tk-font) !important;
        }
        /* Top bar — vivid gradient wash over a dark base for membership identity */
        #rm-topbar {
            background:
                var(--theme-paint-chrome-top),
                rgba(var(--theme-remote-strong-rgb),0.95) !important;
            border-bottom-color: rgba(var(--theme-primary-rgb),0.28) !important;
        }
        /* Bottom nav — gradient mirrored so left↔right flow rhymes with top */
        #rm-bottomnav {
            background:
                var(--theme-paint-chrome-bottom),
                rgba(var(--theme-remote-strong-rgb),0.95) !important;
            border-top-color: rgba(var(--theme-primary-rgb),0.28) !important;
        }
        /* The selected tab has one solid white indicator and white content. */
        .rm-nav-item.active { color: var(--theme-white); }
        .rm-nav-item.active::before { background: var(--theme-white) !important; }
        #rm-drawer-brand .rm-brand-thai { color: var(--theme-primary); }
        #rm-drawer-brand .rm-brand-kara { color: var(--theme-secondary); }
        /* Status dot ok glow tint */
        #rm-status-dot[data-state="ok"] {
            box-shadow: 0 0 10px rgba(var(--theme-primary-rgb),0.55);
        }
        /* Score switch on-state uses gradient */
        .rm-switch input:checked + .rm-switch-track {
            background: var(--theme-paint-chrome) !important;
        }
        /* Wallpaper backdrop subtle pink/purple wash */
        #rm-wallpaper {
            opacity: 0.22 !important;
        }
        /* Search-highlight underline — match desktop membership accent (pink) */
        .rm-song-row mark {
            text-decoration-color: var(--theme-primary) !important;
        }