:root {
    --bg-dark: #09090b;
    --panel-bg: #121214;
    --border-color: #27272a;
    --accent: #06b6d4; /* Premium Cyan */
    --accent-glow: rgba(6, 182, 212, 0.4);
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
}

.studio-app { display: flex; flex-direction: column; height: 100%; }

/* --- HEADER --- */
.top-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 32px; background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}
.brand { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.brand span { color: var(--accent); }

.fx-rack { display: flex; align-items: center; gap: 24px; }
.vol-control { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.vol-control input[type="range"] { accent-color: var(--accent); cursor: pointer; }

.fx-btn {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-color); padding: 8px 20px;
    border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: 0.2s; letter-spacing: 1px;
}
.fx-btn.active {
    background: var(--accent); color: #000;
    border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow);
}

/* --- WORKSPACE --- */
.workspace { flex-grow: 1; padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; }

.search-module { width: 100%; max-width: 900px; margin: 0 auto; }
.search-bar {
    display: flex; align-items: center; background: #18181b;
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 4px 4px 4px 16px; transition: 0.3s;
}
.search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1); }
.search-bar i { color: #ef4444; font-size: 18px; }
.search-bar input {
    flex: 1; background: transparent; border: none; outline: none;
    color: white; padding: 12px; font-size: 15px;
}
.search-bar button {
    background: var(--text-main); color: var(--bg-dark);
    border: none; padding: 10px 24px; border-radius: 6px;
    font-weight: 600; cursor: pointer; transition: 0.2s;
}
.search-bar button:hover { background: var(--accent); }

.panels-container { display: flex; gap: 24px; height: 100%; min-height: 0; }
.panel {
    flex: 1; background: var(--panel-bg); border: 1px solid var(--border-color);
    border-radius: 12px; overflow: hidden; position: relative;
    display: flex; flex-direction: column;
}
.empty-state {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; color: var(--text-muted); pointer-events: none;
}
.empty-state i { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }

/* AI Notes Styling */
.ai-note-block { padding: 16px; border-bottom: 1px solid var(--border-color); }
.ai-note-block:last-child { border-bottom: none; }
.ai-lyric { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.ai-sargam { color: var(--accent); font-family: monospace; font-size: 14px; }
.ai-keys { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* --- INSTRUMENT KEYBOARD (DESKTOP) --- */
.instrument-container {
    background: #000; padding: 32px; border-top: 1px solid #222;
    display: flex; justify-content: center;
}
.midi-keyboard {
    position: relative; display: flex; width: 100%; max-width: 1000px;
    height: 200px; border-radius: 4px;
}

.key {
    cursor: pointer; display: flex; flex-direction: column;
    justify-content: flex-end; align-items: center; padding-bottom: 12px;
    transition: transform 0.05s, background 0.1s;
}

.white {
    flex: 1; background: linear-gradient(to bottom, #fff, #f4f4f5);
    border: 1px solid #d4d4d8; border-top: none;
    border-radius: 0 0 6px 6px; z-index: 1;
}
.white:hover { background: #fafafa; }
.white.active {
    background: #cffafe; transform: translateY(2px);
    border-bottom: 4px solid var(--accent); box-shadow: inset 0 -4px 10px rgba(6, 182, 212, 0.3);
}

/* Keyboard Labels */
.white .pc, .black .pc { font-size: 10px; font-weight: bold; color: #a1a1aa; margin-bottom: 4px; }
.white .note { font-size: 14px; font-weight: 700; color: #18181b; }

/* BLACK KEYS & BULLETPROOF CALC() MATH */
/* We have 8 white keys. Each white key = 12.5% width. Black key = 8% width. */
.black {
    position: absolute; width: 8%; height: 60%;
    background: linear-gradient(to bottom, #27272a, #09090b);
    border: 1px solid #000; border-top: none; border-radius: 0 0 4px 4px;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.5); z-index: 2;
}
.black.active {
    background: #18181b; transform: translateY(2px);
    border-bottom: 2px solid var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}

/* Math: (Number of white keys from left * 12.5%) - (Half of black key width = 4%) */
.bk-1 { left: calc(12.5% - 4%); } /* Between 1 and 2 */
.bk-2 { left: calc(25.0% - 4%); } /* Between 2 and 3 */
.bk-3 { left: calc(50.0% - 4%); } /* Between 4 and 5 */
.bk-4 { left: calc(62.5% - 4%); } /* Between 5 and 6 */
.bk-5 { left: calc(75.0% - 4%); } /* Between 6 and 7 */


/* --- MOBILE RESPONSIVE (THE DIGITAL PIANO VIEW) --- */
@media (max-width: 768px) {
    body { overflow-y: auto; display: block; }
    
    .top-nav { flex-direction: column; gap: 16px; padding: 16px; }
    .workspace { padding: 16px; gap: 16px; }
    .panels-container { flex-direction: column; }
    .panel { min-height: 200px; }
    
    /* Remove studio borders for mobile, make keyboard full width */
    .instrument-container { padding: 0; border: none; margin-top: 20px; }
    .midi-keyboard {
        max-width: none; height: 35vh; min-height: 220px;
        border-radius: 0; border-top: 2px solid var(--accent);
    }
    
    /* Hide Text for pure synth look */
    .key span { display: none; }
    
    /* Make black keys slightly wider for easy touch on mobile */
    .black { width: 10%; height: 65%; }
    
    /* Adjust math for 10% black key width (half is 5%) */
    .bk-1 { left: calc(12.5% - 5%); } 
    .bk-2 { left: calc(25.0% - 5%); } 
    .bk-3 { left: calc(50.0% - 5%); } 
    .bk-4 { left: calc(62.5% - 5%); } 
    .bk-5 { left: calc(75.0% - 5%); }
}