/* === RESET & BASE === */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow-x:hidden}
body{
  background:#0f1123;color:#ffffff;font-family:'Sora',sans-serif;
  min-height:100%;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:10px;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
body::before{
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(29,158,117,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(55,138,221,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(138,34,82,0.05) 0%, transparent 50%);
  z-index:0;
}

/* === TUNER CARD === */
.tuner{
  position:relative;z-index:1;
  background:linear-gradient(145deg,#181a35 0%,#1a1d3a 50%,#161830 100%);
  border:1px solid #2d3060;border-radius:20px;
  padding:22px 20px 18px;max-width:540px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(29,158,117,0.04);
}

/* === TOP ROW: instrument + language === */
.top-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.inst-sel{display:flex;gap:6px;flex:1}
.inst-btn{
  flex:1;padding:12px 0;border-radius:10px;border:1.5px solid #363970;
  background:#1e2048;color:#8b8ec0;font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s;font-family:'Sora',sans-serif;touch-action:manipulation;
}
.inst-btn:active{opacity:.7}
.inst-btn.active{border-color:#1d9e75;color:#fff;background:rgba(29,158,117,0.15)}

.lang-tog{display:flex;border-radius:9px;overflow:hidden;border:1.5px solid #363970;flex-shrink:0}
.lang-btn{
  padding:12px 14px;background:#1e2048;color:#8b8ec0;font-size:12px;font-weight:700;
  cursor:pointer;border:none;transition:all .2s;font-family:'Sora',sans-serif;touch-action:manipulation;
}
.lang-btn:active{opacity:.7}
.lang-btn.active{background:#378add;color:#fff}

/* === TUNING ROW === */
.tun-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.tun-btn{
  padding:8px 14px;border-radius:8px;border:1px solid #363970;background:#1e2048;
  color:#9b9ed0;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;
  font-family:'Sora',sans-serif;touch-action:manipulation;
}
.tun-btn:active{opacity:.7}
.tun-btn.active{border-color:#378add;color:#fff;background:rgba(55,138,221,0.18)}

/* === STRING BUTTONS === */
.str-row{display:flex;gap:6px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.str-btn{
  min-width:48px;height:50px;border-radius:10px;border:2px solid #363970;
  background:#1e2048;color:#d0d3ff;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:'JetBrains Mono',monospace;
  touch-action:manipulation;padding:0 6px;
}
.str-btn:active{opacity:.7}
.str-btn.target{border-color:#378add;color:#7ec8ff;background:rgba(55,138,221,0.15)}
.str-btn.intune{border-color:#1d9e75;color:#2effa8;background:rgba(29,158,117,0.18);box-shadow:0 0 12px rgba(29,158,117,0.25)}

/* === GAUGE === */
.gauge-wrap{margin-bottom:6px;width:100%}
.gauge-svg{display:block;width:100%;height:auto}

/* === TARGET DISPLAY === */
.target-display{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:50px;margin-bottom:2px;
}
.target-lbl{font-size:14px;color:#9b9ed0;font-weight:500}
.target-note{
  font-size:36px;font-weight:700;color:#ffffff;
  font-family:'JetBrains Mono',monospace;
  text-shadow:0 0 20px rgba(255,255,255,0.1);
}

/* === DIRECTION INDICATOR === */
.direction{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:30px;margin-bottom:2px;
}
.dir-arrow{font-size:24px;font-weight:700}
.dir-hint{font-size:14px;font-weight:600}

/* === FREQUENCY === */
.freq-hz{
  font-size:12px;color:#5a5d90;text-align:center;
  font-family:'JetBrains Mono',monospace;height:16px;margin-bottom:6px;
}

/* === CENTS BAR === */
.c-wrap{margin:10px 10px 14px}
.c-labels{display:flex;justify-content:space-between;font-size:10px;color:#9b9ed0;margin-bottom:5px;font-family:'JetBrains Mono',monospace}
.c-track{height:10px;background:#1a1d40;border-radius:5px;position:relative;border:1px solid #2d3060}
.c-mid{position:absolute;left:50%;top:-5px;width:2px;height:20px;background:#ffffff;transform:translateX(-50%);border-radius:1px}
.c-fill{position:absolute;top:0;height:10px;border-radius:5px;transition:width .15s ease-out,background .15s ease-out}
.c-val{text-align:center;font-size:15px;font-family:'JetBrains Mono',monospace;color:#ffffff;margin-top:7px;font-weight:700;min-height:20px}

/* === MIC BUTTON === */
.mic-row{display:flex;justify-content:center;margin-top:6px}
.mic-btn{
  display:flex;align-items:center;gap:10px;padding:14px 36px;border-radius:12px;
  border:2px solid #1d9e75;background:rgba(29,158,117,0.12);color:#ffffff;
  font-size:15px;font-weight:700;cursor:pointer;transition:all .25s;
  font-family:'Sora',sans-serif;touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.mic-btn:active{transform:scale(0.97)}
.mic-btn.active{background:#1d9e75;color:#fff;box-shadow:0 0 20px rgba(29,158,117,0.3)}
.mdot{width:10px;height:10px;border-radius:50%;background:#2effa8;transition:all .2s}
.mic-btn.active .mdot{background:#fff;animation:pdot .6s infinite alternate}
@keyframes pdot{from{opacity:1}to{opacity:.2}}

/* === STATUS === */
.status{font-size:14px;color:#9b9ed0;text-align:center;margin-top:10px;min-height:20px;font-weight:600}

/* === REF ROW === */
.ref-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px}
.ref-lbl{font-size:12px;color:#9b9ed0;font-weight:600}
.ref-inp{width:100px;accent-color:#1d9e75;cursor:pointer;height:28px;touch-action:manipulation}
.ref-val{font-size:13px;color:#ffffff;font-family:'JetBrains Mono',monospace;font-weight:700;min-width:50px}

/* === FOOTER === */
.footer{text-align:center;margin-top:14px;padding-top:12px;border-top:1px solid #2d3060;font-size:11px;color:#5a5d90;letter-spacing:.04em}
.footer a{color:#1d9e75;text-decoration:none}

/* === MOBILE === */
@media(max-width:480px){
  body{padding:6px;align-items:flex-start}
  .tuner{padding:16px 12px 14px;border-radius:16px}
  .top-row{gap:6px;margin-bottom:10px}
  .inst-btn{padding:10px 0;font-size:13px}
  .lang-btn{padding:10px 12px;font-size:11px}
  .tun-row{gap:5px;margin-bottom:10px}
  .tun-btn{padding:7px 10px;font-size:11px}
  .str-row{gap:5px;margin-bottom:10px}
  .str-btn{min-width:42px;height:44px;font-size:11px;border-radius:8px}
  .target-note{font-size:28px}
  .target-display{height:40px}
  .direction{height:26px}
  .dir-arrow{font-size:20px}.dir-hint{font-size:12px}
  .freq-hz{font-size:11px}
  .near-lbl{font-size:11px}.near-note{font-size:13px;padding:4px 10px}
  .near-arrow{font-size:18px}.near-hint{font-size:11px}
  .c-wrap{margin:8px 6px 12px}.c-labels{font-size:9px}.c-val{font-size:13px}
  .mic-btn{padding:12px 28px;font-size:14px}
  .status{font-size:13px}.ref-row{margin-top:10px}
}
@media(max-width:360px){
  .target-note{font-size:24px}
  .target-display{height:36px}
  .str-btn{min-width:36px;height:40px;font-size:10px}
  .inst-btn{font-size:12px}
  .tun-btn{padding:6px 8px;font-size:10px}
}
@media(max-height:500px) and (orientation:landscape){
  body{align-items:flex-start;padding:4px}
  .tuner{padding:10px 12px;border-radius:12px}
  .gauge-svg{max-height:120px}
  .target-note{font-size:22px}
  .target-display{height:32px}
}