/* ===========================================================
   Virtual Piano Keyboard — Styles
   Theme: Dark with Ivory & Gold palette
   =========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg: #1A1A1A;
  --bg-card: rgba(30, 30, 30, 0.85);
  --ivory: #FFFBEB;
  --gold: #F59E0B;
  --gold-dark: #D97706;
  --black-key: #2A2A2A;
  --text: #FFFBEB;
  --muted: #A0977D;
  --dim: #6B6553;
  --border: rgba(245, 158, 11, 0.12);
  --radius: 10px;
  --font: 'Inter', system-ui, sans-serif;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; justify-content: center; }
.app-container { max-width: 960px; width: 100%; padding: 16px; }

/* Header */
.app-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 8px 0; }
.logo-group { display: flex; align-items: center; gap: 10px; }
h1 { font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, var(--ivory), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.controls-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctrl-group { display: flex; align-items: center; gap: 4px; }
.ctrl-group label { font-size: .7rem; color: var(--muted); }
.ctrl-group select { background: rgba(0,0,0,.4); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--font); font-size: .75rem; padding: 3px 6px; outline: none; }
.ctrl-range { width: 60px; accent-color: var(--gold); }
.octave-btns { display: flex; align-items: center; gap: 4px; }
#octave-val { font-size: .8rem; font-weight: 700; min-width: 16px; text-align: center; }

/* Buttons */
.btn { border: none; cursor: pointer; font-family: var(--font); font-weight: 600; border-radius: 6px; transition: all .15s; background: rgba(245,158,11,.12); color: var(--gold); font-size: .72rem; padding: 5px 10px; }
.btn:hover { background: rgba(245,158,11,.25); }
.btn:disabled { opacity: .3; cursor: default; }
.btn-sm { font-size: .7rem; padding: 4px 8px; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-rec { background: rgba(220,60,60,.15); color: #FF6B6B; }
.btn-rec.recording { background: #E74C3C; color: #fff; animation: pulse 1s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

/* Keyboard */
.keyboard-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 12px 24px; margin-bottom: 12px; overflow-x: auto; backdrop-filter: blur(12px); }
.keyboard { display: flex; position: relative; height: 200px; user-select: none; min-width: 560px; }
.key { position: relative; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; transition: all .08s; }
.key-white { flex: 1; height: 100%; background: linear-gradient(180deg, var(--ivory) 70%, #E8E1CC); border: 1px solid rgba(0,0,0,.15); border-radius: 0 0 8px 8px; z-index: 1; box-shadow: 0 4px 8px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.08); padding-bottom: 10px; }
.key-white:active, .key-white.active { background: linear-gradient(180deg, #F0E8D0 70%, #D5CEC0); transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.key-white .note-label { font-size: .6rem; color: #999; font-weight: 600; }
.key-black { position: absolute; width: 36px; height: 60%; background: linear-gradient(180deg, var(--black-key), #1A1A1A); border-radius: 0 0 4px 4px; z-index: 2; box-shadow: 0 4px 6px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.3); margin-left: -18px; }
.key-black:active, .key-black.active { background: linear-gradient(180deg, #3A3A3A, #222); transform: translateY(2px); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.key-black .note-label { font-size: .5rem; color: rgba(255,255,255,.5); position: absolute; bottom: 6px; width: 100%; text-align: center; }
.key.glow { box-shadow: 0 0 20px rgba(245,158,11,.4); }
.note-label.hidden { display: none; }

/* Recording */
.recording-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; backdrop-filter: blur(12px); }
.rec-controls { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.rec-info { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
.metronome-row { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
#bpm-val { font-size: .72rem; color: var(--muted); min-width: 56px; }

/* Responsive */
@media (max-width: 600px) {
  .app-header { flex-direction: column; align-items: flex-start; }
  .keyboard { height: 160px; min-width: 400px; }
}