/* Karaplay v3.3.6 (2026-04-02 22:25 HST) - Enhanced Interactions for Car Use */
:root {
    --car-bg: #0a0a0a;
    --accent-color: #ffcc00;
    --text-main: #ffffff;
    --glass-bg: rgb(255, 255, 255, 0.1);
    --safe-padding: 20px;
    --slide-width: 50%;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: var(--car-bg); color: var(--text-main);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden; user-select: none;
}

input, textarea { user-select: text !important; -webkit-user-select: text !important; }

/* [LAYER 1] TOOLS */
#tools-layer {
    position: absolute; top: 0; left: 280px; width: var(--slide-width); height: 100%;
    z-index: 30; pointer-events: auto;
}
.tool-panel {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; padding: 120px 30px 150px 30px;
    box-sizing: border-box; backdrop-filter: blur(15px);
    background: linear-gradient(to right, rgb(0,0,0,0.9), rgb(0,0,0,0.4));
    border-right: 1px solid rgb(255,255,255,0.1);
    pointer-events: auto;
}
.tool-panel.active { display: flex; animation: fadeIn 0.5s ease; }
.panel-title { font-size: 2.2rem; color: var(--accent-color); margin: 0 0 20px 0; }

#lyrics-container { flex: 1; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
#lyrics-container::-webkit-scrollbar { display: none; }
#lyrics-content { font-size: 1.8rem; line-height: 1.5; font-weight: bold; color: white; text-shadow: 0 0 10px black; }
.tool-controls, #lyrics-speed-controls { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: rgb(255,255,255,0.05); padding: 15px; border-radius: 20px; }

.panel-split { display: flex; gap: 20px; flex: 1; overflow: hidden; }
#search-results { flex: 1.5; overflow-y: auto; }
#queue-side { flex: 1; border-left: 1px solid #333333; padding-left: 20px; overflow-y: auto; }

.search-item:active { background: var(--accent-color); color: black; }

/* [LAYER 2] VIDEO */
#player-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;
    pointer-events: none; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-open #player-container { left: var(--slide-width); width: calc(100% - var(--slide-width)); }
body.lyrics-open #player-container { left: 0; width: 100%; }
body.lyrics-open #content-wrapper { transform: translateX(0); }
iframe { width: 100%; height: 100%; border: none; opacity: 1; }

/* [LAYER 3] UI */
#ui-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
    display: flex; pointer-events: none;
}
#sidebar {
    width: 280px; height: 100%;
    background: linear-gradient(to right, rgb(0,0,0,0.95), transparent);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--safe-padding); box-sizing: border-box;
    pointer-events: auto; z-index: 100;
}
#content-wrapper {
    flex: 1; height: 100%; position: relative;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}
.panel-open #content-wrapper { transform: translateX(var(--slide-width)); }

#panel-lyrics {
    background: transparent;
    backdrop-filter: none;
    border-right: none;
}

#dashboard { position: absolute; top: var(--safe-padding); left: 20px; z-index: 90; }
#clock { font-size: 3.5rem; font-weight: 900; }
#weather { font-size: 1.5rem; font-weight: bold; opacity: 0.8; }

#media-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 140px; background: linear-gradient(to top, rgb(0,0,0,0.95), transparent);
    padding: 30px 40px; display: flex; align-items: center; z-index: 20;
}
#track-title { font-size: 2.2rem; font-weight: 900; color: var(--accent-color); }
#track-author { font-size: 1.4rem; opacity: 0.7; }

/* Up Next - Sharp Gold Style */
#up-next-toast {
    position: absolute; top: 35%; right: 0; width: 380px;
    background: var(--accent-color); color: #000000;
    padding: 20px 30px; z-index: 200;
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: translateX(100%); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0; box-shadow: -10px 10px 30px rgb(0,0,0,0.5);
}
#up-next-toast.active { opacity: 1; transform: translateX(0); }
#toast-label { font-size: 0.8rem; font-weight: 900; letter-spacing: 2px; border-bottom: 2px solid rgb(0,0,0,0.2); margin-bottom: 8px; padding-bottom: 4px; }
#toast-title { font-size: 1.5rem; font-weight: 900; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Buttons */
.side-btn { width: 70px; height: 70px; background: var(--glass-bg); border: 2px solid rgb(255,255,255,0.2); border-radius: 20px; color: white; font-size: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.side-btn.active { background: var(--accent-color); color: black; }
.speed-btn { width: 80px; height: 80px; border-radius: 20px; background: rgb(255,255,255,0.1); color: white; border: 2px solid rgb(255,255,255,0.2); font-size: 2.5rem; cursor: pointer; }
.speed-btn.small { width: 50px; height: 50px; border-radius: 12px; font-size: 1.5rem; }
#sidebar-speed-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; width: 70px; }
#sidebar-speed-controls #speed-indicator { font-size: 0.8rem; font-weight: bold; color: var(--accent-color); font-family: monospace; }
.gold-btn { background: var(--accent-color); color: black; border: none; padding: 15px 25px; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer; }
.mini-btn { background: #333333; color: white; border: 1px solid #444444; padding: 8px 12px; border-radius: 8px; font-weight: bold; font-size: 0.8rem; cursor: pointer; }

input[type="search"], input[type="password"] { width: 100%; padding: 15px; background: #222222; border: 1px solid #444444; border-radius: 10px; color: white; font-size: 1.2rem; margin-bottom: 15px; box-sizing: border-box; }
.search-item { display: flex; gap: 20px; padding: 18px; background: #1a1a1a; border-radius: 15px; align-items: center; margin-bottom: 12px; cursor: pointer; pointer-events: auto; }
.search-item img { width: 100px; border-radius: 10px; }
.search-item-title { font-size: 1.1rem; font-weight: bold; line-height: 1.2; }

/* Setup */
#setup-widget { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 80; pointer-events: auto; }
.setup-card { background: rgb(0,0,0,0.85); backdrop-filter: blur(15px); border: 2px solid var(--accent-color); border-radius: 30px; padding: 40px; display: flex; gap: 40px; align-items: center; }
.setup-qr { width: 220px; background: white; padding: 20px; border-radius: 20px; color: black; text-align: center; }
.setup-qr img { width: 180px; height: 180px; }

/* Overlays */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,0.95); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 80px; box-sizing: border-box; pointer-events: auto; }
.overlay.active { display: flex; }
.close-btn { position: absolute; top: 40px; right: 40px; width: 80px; height: 80px; font-size: 2rem; color: white; background: rgb(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }

#version-tag { position: fixed; bottom: 10px; left: 10px; font-size: 14px; color: rgb(255,255,255,0.4); z-index: 1000; font-family: monospace; pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }