/* Frequency Mentor Styles (scoped to .fm-root) */
.fm-wrapper { width: 100%; display:flex; justify-content:center; }
.fm-root { color:#fff; background:#111827; padding:48px 16px; border-radius:16px; width:100%; max-width:1100px; box-shadow:0 10px 30px rgba(0,0,0,.35); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }
.fm-root .fm-center { text-align:center; }
.fm-root .fm-title { font-size: clamp(28px, 5vw, 44px); font-weight:800; letter-spacing:-.02em; background:linear-gradient(90deg,#a855f7,#ec4899,#ef4444); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; }
.fm-root .fm-sub { color:#9ca3af; margin-top:8px; margin-bottom:16px; }

.fm-root .fm-card { background:rgba(31,41,55,.5); border-radius:16px; box-shadow:0 10px 20px rgba(0,0,0,.25); padding:16px; }
.fm-root .fm-row { display:flex; align-items:center; gap:8px; }
.fm-root .fm-col { display:flex; flex-direction:column; gap:16px; }
.fm-root .fm-gap-16 { gap:16px; }
.fm-root .fm-gap-8 { gap:8px; }
.fm-root .fm-btn { border:0; border-radius:10px; padding:10px 16px; font-weight:700; cursor:pointer; background:linear-gradient(90deg,#ec4899,#ef4444); color:#fff; transition:transform .12s ease, filter .12s ease; }
.fm-root .fm-btn:disabled { opacity:.6; cursor:not-allowed; }
.fm-root .fm-btn:hover { transform:translateY(-1px); filter:saturate(1.1); }

/* Equalizer bands + waveform */
.fm-root .fm-eq-stage { position:relative; height:256px; display:flex; justify-content:center; align-items:flex-end; }
.fm-root .fm-wave { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.fm-root .fm-bars { position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-end; gap:2px; }
.fm-root .fm-bar { flex:1 1 0%; display:flex; align-items:center; justify-content:center; border-radius:8px 8px 0 0; transition:transform .2s ease, opacity .2s ease; opacity:.7; min-width:2px; }
.fm-root .fm-bar.active { opacity:1; box-shadow:0 0 14px rgba(168,85,247,.6); transform:scaleY(1.05); }
.fm-root .fm-guide { position:absolute; top:0; bottom:0; width:2px; opacity:.25; transform:translateX(-50%); pointer-events:auto; cursor:pointer; }
.fm-root .fm-indicator { position:absolute; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle, #fff 0%, rgba(236,72,153,1) 30%, rgba(236,72,153,0) 70%); transform:translate(-50%,-50%); pointer-events:none; }
.fm-root .fm-freq-label { position:absolute; transform:translate(-50%,-110%); font-weight:800; font-size:18px; text-shadow:0 0 10px rgba(236,72,153,.9); pointer-events:none; white-space:nowrap; }

/* Keyboard */
.fm-root .piano-box { position:relative; height:180px; background:#1f2937; border-radius:10px; overflow-x:auto; padding:0 10px; box-shadow:0 10px 20px rgba(0,0,0,.3); }
.fm-root .piano-keys { display:flex; position:relative; height:100%; }
.fm-root .key { cursor:pointer; border:1px solid #111827; box-shadow:inset 0 2px 5px rgba(255,255,255,.1), 0 2px 3px rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; padding-bottom:24px; }
.fm-root .key.white { width:45px; height:100%; background:#f3f4f6; border-bottom-left-radius:5px; border-bottom-right-radius:5px; color:#111; }
.fm-root .key.white:hover { background:#e5e7eb; }
.fm-root .key.white.active { background:linear-gradient(to top,#d1d5db,#fff); box-shadow:inset 0 0 5px #a855f7, 0 0 10px #a855f7; border-top-color:#a855f7; }
.fm-root .key.black { position:absolute; width:26px; height:60%; background:#1f2937; top:0; z-index:10; border-radius:0 0 4px 4px; color:#fff; }
.fm-root .key.black:hover { background:#374151; }
.fm-root .key.black.active { background:#374151; box-shadow:inset 0 0 5px #ec4899, 0 0 10px #ec4899; }

.fm-root .key-label { font-weight:800; font-size:10px; transform:rotate(-90deg); white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.fm-root .key.black .key-label { font-size:8px; }

/* Controls */
.fm-root .ctrl-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center; margin-top:12px; }
.fm-root .ctrl-label { color:#9ca3af; font-weight:600; text-align:center; font-size:14px; margin-bottom:6px; }
.fm-root .range { -webkit-appearance:none; appearance:none; width:100%; height:8px; background:#374151; border-radius:5px; outline:none; opacity:.8; }
.fm-root .range:hover { opacity:1; }
.fm-root .range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(90deg,#a855f7,#ec4899,#ef4444); border:3px solid #111827; cursor:pointer; }
.fm-root .range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:linear-gradient(90deg,#a855f7,#ec4899,#ef4444); border:3px solid #111827; cursor:pointer; }

.fm-root .select { appearance:none; background:#374151; border:1px solid #4b5563; color:#fff; border-radius:8px; padding:8px 12px; width:100%; }

/* Tip */
.fm-root .tip { display:flex; align-items:center; gap:10px; background:rgba(120,53,15,.25); border:1px solid rgba(146,64,14,.4); color:#fbbf24; border-radius:10px; padding:12px; }
.fm-root .tip svg { flex:0 0 auto; }

/* Footer */
.fm-root .fm-footer { color:#a855f7; font-size:13px; text-align:center; margin-top:16px; font-weight:600; letter-spacing:0.5px; }
.fm-root .fm-footer a { color:#a855f7; text-decoration:none; }
.fm-root .fm-footer a:hover { text-decoration:underline; }