/* Tuner v5 — switch Tự động góc phải + phân bổ dọc lấp đầy. Nạp sau rebellion-v3.css */
#view-tuner header h1{font-size:22px}
#view-tuner header p{font-size:12px;margin-top:2px}
#view-tuner .badge{margin-top:8px;padding:5px 10px}
#view-tuner .stage{justify-content:flex-start;gap:6px;padding:8px 0 4px}
#view-tuner .note-row{min-height:64px}
#view-tuner .note{font-size:64px}
#view-tuner .octave{font-size:20px}
#view-tuner .freq{font-size:13px;margin-top:0}
#view-tuner .gauge-wrap{margin:8px 0 0}
#view-tuner .gauge{height:56px}
#view-tuner .gauge .center{top:8px;bottom:8px}
#view-tuner .needle{top:6px;bottom:6px}
.cents-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:6px;padding:0 2px}
#view-tuner .cents{margin:0;text-align:left;font-size:14px;min-height:20px}
.zone-cap{font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.auto-src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
#view-tuner .strings{margin-top:8px;gap:6px}
#view-tuner .str{aspect-ratio:auto;height:50px;border-radius:12px}
#view-tuner .strings.auto .str:not(.active){opacity:.7}
#view-tuner .strings.auto .str.active::after{content:"tự nhận";font-size:9px;color:#86efac;font-weight:600;line-height:1}
#view-tuner .strings.auto .str.active small{display:none}
/* Mic + A4 */
#view-tuner .actions{grid-template-columns:1fr auto;gap:8px;margin-top:12px}
#t-btnMic{position:relative;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:750;border-radius:16px;
  background:var(--green);color:#052e1c;border:1px solid var(--green)}
#t-btnMic::before{content:"";width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat}
#t-btnMic[aria-pressed="true"]{background:#2a1418;border:1px solid #5c1e2a;color:#fca5a5}
#t-btnMic[aria-pressed="true"]::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fb7185;box-shadow:0 0 0 0 rgba(251,113,133,.5);animation:live 1.6s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(251,113,133,.55)}100%{box-shadow:0 0 0 9px rgba(251,113,133,0)}}
.a4chip{min-height:54px;padding:0 14px;font-size:13px;font-weight:650;color:var(--muted);border-radius:16px}
@media (prefers-reduced-motion:reduce){#t-btnMic[aria-pressed="true"]::after{animation:none;box-shadow:0 0 0 3px rgba(251,113,133,.25)}}

/* ===== v5 ===== */
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.autosw{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer;flex:none;position:relative}
.autosw input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.autosw i{width:38px;height:22px;border-radius:11px;background:#232a35;border:1px solid var(--line);position:relative;transition:background .2s}
.autosw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#9aa3b2;transition:transform .2s,background .2s}
.autosw input:checked~i{background:#0f2a24;border-color:#1f5a45}
.autosw input:checked~i::after{transform:translateX(16px);background:var(--green)}
.autosw:has(input:checked) span{color:#bbf7d0}
.autosw input:focus-visible~i{outline:2px solid var(--wood);outline-offset:2px}
/* Lấp đầy chiều dọc: stage co giãn, các khối phân bố đều */
#view-tuner .app-inner{display:flex;flex-direction:column;min-height:100%;padding-bottom:4px}
#view-tuner .stage{flex:1 1 auto;justify-content:space-evenly;gap:clamp(6px,1.6vh,14px);padding:clamp(6px,1.5vh,14px) 0 8px}
#view-tuner .note-row{min-height:clamp(72px,12vh,96px);align-items:center}
#view-tuner .note{font-size:clamp(72px,12vh,92px);line-height:1}
#view-tuner .octave{font-size:24px}
#view-tuner .freq{font-size:14px}
#view-tuner .gauge-wrap{margin:0}
#view-tuner .gauge{height:clamp(64px,10.5vh,80px)}
#view-tuner .strings{margin-top:0;gap:8px}
#view-tuner .str{height:56px;font-size:18px}
#view-tuner .actions{margin-top:0}
#t-btnMic,.a4chip{min-height:56px}
@media (prefers-reduced-motion:reduce){.autosw i,.autosw i::after{transition:none}}
/* v5.1 fix: chữ nốt bị khuyết góc phải dưới — gradient background-clip:text chỉ phủ hộp chữ,
   letter-spacing âm + line-height 1 làm hộp hẹp hơn glyph. Nới hộp để gradient phủ trọn glyph. */
#view-tuner .note{display:inline-block;overflow:visible;letter-spacing:0;line-height:1.1;padding:0 .1em .06em .04em;margin-right:-.06em}
#view-tuner .note-row{overflow:visible}