/* ===== ONLINE METRONOME ===== */
.mt-wrapper{display:flex;flex-direction:column;gap:20px;margin-bottom:28px;max-width:680px;margin-left:auto;margin-right:auto}

/* Main Card */
.mt-card{background:linear-gradient(160deg,#0f172a,#1e1b4b,#0f172a);border-radius:24px;padding:32px;border:1px solid rgba(165,180,252,.15);box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:22px}

/* Pendulum */
.mt-pendulum-wrap{position:relative;height:200px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding-top:10px}
.mt-pendulum{position:absolute;top:10px;left:50%;width:4px;height:160px;transform-origin:top center;transform:translateX(-50%) rotate(0deg);will-change:transform}
.mt-pendulum-rod{width:3px;height:140px;background:linear-gradient(180deg,#a5b4fc,#6366f1);border-radius:3px;margin:0 auto}
.mt-pendulum-bob{width:30px;height:30px;background:radial-gradient(circle at 35% 35%,#c4b5fd,#4f46e5);border-radius:50%;margin:-2px auto 0;box-shadow:0 0 20px rgba(99,102,241,.7);position:relative;left:-13px}
.mt-pendulum.swing-left  {animation:mt-swing-l var(--beat-dur,0.5s) ease-in-out forwards}
.mt-pendulum.swing-right {animation:mt-swing-r var(--beat-dur,0.5s) ease-in-out forwards}
@keyframes mt-swing-l{0%{transform:translateX(-50%) rotate(0deg)}100%{transform:translateX(-50%) rotate(-28deg)}}
@keyframes mt-swing-r{0%{transform:translateX(-50%) rotate(0deg)}100%{transform:translateX(-50%) rotate(28deg)}}

.mt-beat-flash{position:absolute;inset:0;border-radius:18px;opacity:0;pointer-events:none;transition:opacity .05s}
.mt-beat-flash.accent{background:rgba(251,191,36,.15);opacity:1}
.mt-beat-flash.normal{background:rgba(165,180,252,.08);opacity:1}

/* Beat dots */
.mt-beat-counter{display:flex;gap:10px;position:absolute;bottom:8px;left:50%;transform:translateX(-50%)}
.mt-beat-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .1s}
.mt-beat-dot.active{background:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,.8);transform:scale(1.2)}
.mt-beat-dot.beat{background:#a5b4fc;box-shadow:0 0 8px rgba(165,180,252,.6)}

/* BPM Display */
.mt-bpm-display{display:flex;align-items:center;justify-content:center;gap:12px}
.mt-bpm-adj{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;color:#a5b4fc;cursor:pointer;transition:all .2s}
.mt-bpm-adj:hover{background:rgba(165,180,252,.2);border-color:#a5b4fc}
.mt-bpm-adj:active{transform:scale(.95)}
.mt-bpm-center{text-align:center;min-width:100px}
.mt-bpm-value{font-size:52px;font-weight:900;color:#fff;line-height:1;letter-spacing:-2px}
.mt-bpm-label{font-size:13px;color:#a5b4fc;font-weight:600;margin-top:4px}

/* Slider */
.mt-slider-wrap{display:flex;align-items:center;gap:10px}
.mt-slider-min,.mt-slider-max{font-size:11px;color:rgba(255,255,255,.4);font-weight:600;min-width:24px}
.mt-slider{flex:1;height:6px;accent-color:#6366f1;cursor:pointer;border-radius:10px}

/* Time Signature */
.mt-time-sig,.mt-sound-row,.mt-vol-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mt-ts-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;min-width:80px}
.mt-ts-btns,.mt-sound-btns{display:flex;gap:6px;flex-wrap:wrap}
.mt-ts-btn,.mt-sound-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:7px 14px;font-size:12px;font-weight:700;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s}
.mt-ts-btn:hover,.mt-sound-btn:hover{border-color:#a5b4fc;color:#a5b4fc}
.mt-ts-btn.active,.mt-sound-btn.active{background:rgba(99,102,241,.3);border-color:#6366f1;color:#a5b4fc}

/* Volume */
.mt-vol-slider{flex:1;height:5px;accent-color:#6366f1;cursor:pointer}
.mt-vol-val{font-size:12px;color:rgba(255,255,255,.5);min-width:36px;font-weight:600}

/* Controls */
.mt-controls{display:flex;gap:10px;align-items:center}
.mt-tap-btn{flex:1;background:rgba(251,191,36,.15);border:2px solid rgba(251,191,36,.3);border-radius:12px;padding:13px;font-size:14px;font-weight:700;color:#fbbf24;cursor:pointer;transition:all .2s}
.mt-tap-btn:hover{background:rgba(251,191,36,.25)}
.mt-tap-btn:active{transform:scale(.96);background:rgba(251,191,36,.35)}
.mt-play-btn{flex:2;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:12px;padding:14px;font-size:16px;font-weight:900;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(99,102,241,.4)}
.mt-play-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(99,102,241,.5)}
.mt-play-btn.playing{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 16px rgba(239,68,68,.4)}
.mt-reset-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 18px;font-size:14px;font-weight:700;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.mt-reset-btn:hover{border-color:rgba(255,255,255,.3);color:#fff}

/* Tempo Reference */
.mt-tempo-ref,.mt-presets{background:#fff;border:2px solid #e0e7ff;border-radius:18px;padding:20px 22px}
.mt-ref-title{font-size:14px;font-weight:800;color:#3730a3;margin-bottom:14px}
.mt-ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mt-ref-item{background:#f5f3ff;border:1.5px solid #ddd6fe;border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;transition:all .2s}
.mt-ref-item:hover{border-color:#6366f1;background:#ede9fe;transform:translateY(-2px)}
.mt-ref-item.active-tempo{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#6366f1}
.mt-ref-item.active-tempo .mt-ref-name,.mt-ref-item.active-tempo .mt-ref-bpm{color:#fff}
.mt-ref-name{font-size:12px;font-weight:800;color:#4f46e5}
.mt-ref-bpm{font-size:10px;color:#9ca3af;margin-top:2px}

/* Presets */
.mt-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mt-preset-btn{background:#f5f3ff;border:1.5px solid #ddd6fe;border-radius:10px;padding:10px 6px;font-size:13px;font-weight:800;color:#4f46e5;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:3px}
.mt-preset-btn small{font-size:9px;color:#9ca3af;font-weight:400}
.mt-preset-btn:hover{border-color:#6366f1;background:#ede9fe;transform:translateY(-2px)}

/* SEO */
.mt-seo{background:#fff;border:2px solid #e0e7ff;border-radius:14px;padding:22px}
.mt-seo h2{color:#3730a3;font-size:18px;font-weight:800;margin-bottom:10px;margin-top:18px}
.mt-seo h2:first-child{margin-top:0}
.mt-seo p{color:#4b5563;font-size:14px;line-height:1.8;margin:0}

@media(max-width:600px){
    .mt-ref-grid,.mt-preset-grid{grid-template-columns:repeat(2,1fr)}
    .mt-bpm-value{font-size:42px}
    .mt-controls{flex-wrap:wrap}
    .mt-tap-btn,.mt-reset-btn{flex:1}
    .mt-play-btn{width:100%;order:-1}
}