/* Online metronome. Loads with shared.css (vars) + site-chrome.css (chrome). */

body { display: block; padding: 0; margin: 0; }

.mn-page { max-width: 680px; margin: 0 auto; padding: 28px 20px 48px; }

.mn-head { text-align: center; margin-bottom: 20px; }
.mn-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: var(--text, #0f172a); }
.mn-head p { color: var(--text-light, #64748b); font-size: 15.5px; margin: 0; }

.mn-card { background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 18px;
    padding: 26px 24px; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1)); }

.mn-bpm-row { text-align: center; }
.mn-bpm-big { font-size: 84px; font-weight: 800; line-height: 1; color: var(--text, #0f172a); font-variant-numeric: tabular-nums; }
.mn-bpm-big span { font-size: 22px; font-weight: 700; color: var(--text-light, #64748b); }
.mn-tempo-name { font-size: 15px; font-weight: 700; color: var(--primary, #0d9488); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

.mn-slider-row { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.mn-slider-row input[type="range"] { flex: 1; accent-color: var(--primary, #0d9488); }
.mn-step { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--border, #e2e8f0);
    background: var(--bg, #f8fafc); color: var(--text, #0f172a); font-size: 22px; font-weight: 800; cursor: pointer; }
.mn-step:hover { border-color: var(--primary, #0d9488); }

.mn-dots { display: flex; justify-content: center; gap: 20px; margin: 20px 0 6px; min-height: 30px; }
.mn-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--border, #e2e8f0); transition: transform .07s, background .07s; }
.mn-dot.on { background: var(--primary, #0d9488); transform: scale(1.4); }
.mn-dot.accent.on { background: #d97706; }
.mn-dot.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--border, #cbd5e1); }
.mn-dot.ghost.on { background: transparent; box-shadow: inset 0 0 0 3px var(--text-light, #94a3b8); transform: scale(1.2); }

.mn-groups { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 16px 0; }
.mn-group-label { display: block; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-light, #64748b); margin-bottom: 6px; }
.mn-meter, .mn-sub, .mn-ghost { display: flex; background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 3px; }
.mn-meter button, .mn-sub button, .mn-ghost button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px;
    color: var(--text-light, #64748b); padding: 8px 13px; border-radius: 8px; cursor: pointer; }
.mn-meter button.active, .mn-sub button.active, .mn-ghost button.active { background: var(--primary, #0d9488); color: #fff; }

.mn-actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.mn-start { font: inherit; font-weight: 800; font-size: 18px; padding: 14px 46px; border-radius: 14px; border: 0;
    cursor: pointer; color: #fff; background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 6px 18px rgba(13,148,136,.35); }
.mn-start.running { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 6px 18px rgba(220,38,38,.3); }
.mn-tap { font: inherit; font-weight: 800; font-size: 15px; padding: 13px 24px; border-radius: 12px;
    border: 2px solid var(--primary, #0d9488); background: transparent; color: var(--primary, #0d9488); cursor: pointer; }

.mn-volume-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px;
    color: var(--text-light, #64748b); font-size: 14px; font-weight: 600; }
.mn-volume-row input { accent-color: var(--primary, #0d9488); width: 160px; }

.mn-hint { text-align: center; font-size: 12.5px; color: var(--text-light, #64748b); margin-top: 12px; }

.mn-info { margin-top: 32px; color: var(--text-light, #64748b); font-size: 15px; line-height: 1.7; }
.mn-info h2 { font-size: 21px; font-weight: 800; color: var(--text, #0f172a); margin: 26px 0 8px; }
.mn-info a { color: var(--primary, #0d9488); font-weight: 700; }
.mn-info table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mn-info th, .mn-info td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border, #e2e8f0); }
.mn-info th { color: var(--text, #0f172a); }

@media (max-width: 480px) { .mn-bpm-big { font-size: 64px; } }