/* ===========================================================================
   FTM Music Theory — Design System + Widget Styles

   All colors and fonts reference the freethemusic theme's tokens first, then
   fall back to the same values hard-coded. If the theme updates its tokens,
   this plugin's widgets update automatically — no CSS edits needed.

   Tokens referenced (theme):
     --ftm-nav, --ftm-nav-soft, --ftm-cream, --ftm-page, --ftm-card,
     --ftm-muted, --ftm-line, --ftm-gold, --ftm-rainbow,
     --ftm-title-font, --ftm-body-font, --ftm-radius, --ftm-radius-pill,
     --ftm-shadow-sm, --ftm-shadow-md, --ftm-shadow-lg
   =========================================================================== */

.ftm-mt {
	/* tokens — use theme if defined, else fall back to FTM brand values */
	--nav:        var(--ftm-nav,        #1A2747);
	--nav-soft:   var(--ftm-nav-soft,   #2E3C63);
	--cream:      var(--ftm-cream,      #F6F3EC);
	--page:       var(--ftm-page,       #EEF1F5);
	--card:       var(--ftm-card,       #FFFFFF);
	--muted:      var(--ftm-muted,      #6B7280);
	--line:       var(--ftm-line,       #E4E8EE);
	--gold:       var(--ftm-gold,       #F2B230);
	--red:        var(--ftm-red,        #E63946);
	--orange:     var(--ftm-orange,     #F77F00);
	--yellow:     var(--ftm-yellow,     #FCBF49);
	--green:      var(--ftm-green,      #80B918);
	--blue:       var(--ftm-blue,       #277DA1);
	--violet:     var(--ftm-violet,     #7209B7);
	--rainbow:    var(--ftm-rainbow,    linear-gradient(90deg, #E63946, #F77F00, #FCBF49, #80B918, #277DA1, #7209B7));
	--radius:     var(--ftm-radius,     16px);
	--radius-sm:                        10px;
	--radius-pill:var(--ftm-radius-pill,999px);
	--shadow-sm:  var(--ftm-shadow-sm,  0 1px 2px rgba(26,39,71,.06));
	--shadow-md:  var(--ftm-shadow-md,  0 8px 24px rgba(26,39,71,.08));
	--shadow-lg:  var(--ftm-shadow-lg,  0 24px 48px rgba(26,39,71,.12));
	--title-font: var(--ftm-title-font, 'Prequel', 'Playfair Display', Georgia, serif);
	--body-font:  var(--ftm-body-font,  'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	--mono-font:                        'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

	font-family: var(--body-font);
	color: var(--nav);
	line-height: 1.55;
	box-sizing: border-box;
}
.ftm-mt *,
.ftm-mt *::before,
.ftm-mt *::after { box-sizing: border-box; }

.ftm-mt p { margin: 0 0 14px; }
.ftm-mt h1, .ftm-mt h2, .ftm-mt h3, .ftm-mt h4 {
	font-family: var(--title-font); font-weight: 400; color: var(--nav); line-height: 1.2;
	margin: 0 0 14px;
}
.ftm-mt a { color: var(--nav); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ftm-mt a:hover { color: var(--blue); }
.ftm-mt button { font-family: inherit; cursor: pointer; }
.ftm-mt code { font-family: var(--mono-font); font-size: .9em; background: var(--cream); padding: 1px 6px; border-radius: 4px; }

/* ------- Guitar-pick cursor on every interactive element ------- */
.ftm-mt button,
.ftm-mt a,
.ftm-mt select,
.ftm-mt input[type="text"],
.ftm-mt-seg,
.ftm-mt-tab-btn,
.ftm-mt-play,
.ftm-mt-ans-btn,
.ftm-mt-btn,
.ftm-mt-mute-btn,
.ftm-mt-prog-cell,
.ftm-mt-note-hit,
.ftm-mt-cof-seg,
.ftm-mt-cof-seg-min,
.ftm-mt-cof-chord,
.ftm-mt-cof-play-btn,
.ftm-mt [data-goto] {
	cursor: url('/wp-content/themes/freethemusic/assets/cursors/pick.png') 16 2, pointer;
}

/* ------- Kicker / level pills ------- */
.ftm-mt-kicker {
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--nav-soft); font-weight: 600; margin-bottom: 10px;
}
.ftm-mt-lvl {
	display: inline-block; font-size: 10px; letter-spacing: .1em;
	text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill);
	font-weight: 700; vertical-align: middle; margin-left: 10px;
}
.ftm-mt-lvl.beg { background: rgba(128,185,24,.18); color: #3f6e15; }
.ftm-mt-lvl.int { background: rgba(242,178,48,.18); color: #8c6210; }
.ftm-mt-lvl.adv { background: rgba(114,9,183,.14); color: #4a0772; }
.ftm-mt-lvl.all { background: rgba(39,125,161,.14); color: #134e66; }

.ftm-mt-rainbow-div {
	height: 3px; width: 60px; background: var(--rainbow); border-radius: 2px; margin: 18px 0;
}

/* ------- Buttons ------- */
.ftm-mt-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 20px; border-radius: var(--radius-pill);
	background: var(--nav); color: #fff !important; text-decoration: none;
	font-weight: 600; font-size: 14px; border: none;
	transition: transform .18s, box-shadow .18s, background .18s;
	box-shadow: var(--shadow-sm);
}
.ftm-mt-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: var(--nav-soft); }
.ftm-mt-btn.ghost { background: transparent; color: var(--nav) !important; border: 1.5px solid var(--nav); }
.ftm-mt-btn.ghost:hover { background: var(--nav); color: #fff !important; }
.ftm-mt-btn.small { padding: 7px 14px; font-size: 13px; }
.ftm-mt-btn.primary { background: var(--gold); color: var(--nav) !important; }
.ftm-mt-btn.primary:hover { background: #e0a425; }

/* ------- Guide layout — full tabbed view ------- */
.ftm-mt-guide {
	max-width: 1160px; margin: 0 auto; padding: 32px 20px 96px;
}
.ftm-mt-hero {
	text-align: center; padding: 24px 0 40px;
	border-bottom: 1px solid var(--line); margin-bottom: 32px;
}
.ftm-mt-hero .ftm-mt-kicker { margin-bottom: 14px; }
.ftm-mt-hero h1 { font-size: clamp(44px, 7vw, 72px); margin: 0 0 14px; }
.ftm-mt-lede { max-width: 640px; margin: 0 auto 22px; font-size: 17px; color: var(--nav-soft); }
.ftm-mt-hero .ftm-mt-rainbow-div { margin: 22px auto 0; }
.ftm-mt-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ------- Tab bar ------- */
.ftm-mt-tab-bar {
	position: sticky; top: 0; z-index: 50;
	background: rgba(246,243,236,.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	padding: 6px;
	display: flex; gap: 2px;
	overflow-x: auto; scrollbar-width: thin;
	margin-bottom: 28px;
	box-shadow: var(--shadow-sm);
}
.ftm-mt-tab-btn {
	flex: 1 0 auto; min-width: 140px;
	background: transparent; border: none;
	padding: 12px 18px; border-radius: var(--radius-sm);
	font-weight: 600; font-size: 14px; color: var(--nav-soft);
	position: relative; white-space: nowrap;
	transition: color .2s, background .2s;
}
.ftm-mt-tab-btn:hover { color: var(--nav); background: rgba(26,39,71,.05); }
.ftm-mt-tab-btn.active { color: var(--nav); background: #fff; box-shadow: var(--shadow-sm); }
.ftm-mt-tab-btn.active::after {
	content: ''; position: absolute; left: 20%; right: 20%; bottom: 2px;
	height: 3px; border-radius: 2px; background: var(--rainbow);
}
.ftm-mt-tab-num { display: inline-block; margin-right: 8px; opacity: .55; font-variant-numeric: tabular-nums; }
.ftm-mt-mute-btn {
	flex: 0 0 auto; background: transparent; border: none;
	padding: 12px 14px; border-radius: var(--radius-sm);
	color: var(--nav-soft); font-size: 18px;
}
.ftm-mt-mute-btn.muted { color: var(--red); }

/* ------- Panels ------- */
.ftm-mt-panel { display: none; animation: ftm-mt-fade .28s ease; }
.ftm-mt-panel.active { display: block; }
@keyframes ftm-mt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ftm-mt-panel h2 { font-size: clamp(30px, 4.5vw, 42px); margin: 0 0 6px; display: flex; align-items: center; flex-wrap: wrap; }
.ftm-mt-panel h3 { font-size: 22px; margin: 32px 0 10px; }
.ftm-mt-panel .ftm-mt-lede { font-size: 17px; color: var(--nav-soft); max-width: 700px; margin: 0 0 20px; }
.ftm-mt-panel-body { display: grid; gap: 24px; }
.ftm-mt-teach { max-width: 720px; }
.ftm-mt-teach ul { margin: 8px 0 14px 22px; padding: 0; }
.ftm-mt-teach li { margin-bottom: 8px; }

/* ------- Widget card ------- */
.ftm-mt-widget-card {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 28px 24px 24px;
	box-shadow: var(--shadow-sm);
	position: relative; overflow: hidden;
}
.ftm-mt-widget-card::before {
	content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: var(--rainbow); opacity: .85;
}
.ftm-mt-widget-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ftm-mt-widget-title { font-family: var(--title-font); font-size: 24px; margin: 0; color: var(--nav); }
.ftm-mt-widget-sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.ftm-mt-widget-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ftm-mt-controls-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

/* Segmented control */
.ftm-mt-segmented {
	display: inline-flex; background: var(--cream);
	padding: 3px; border-radius: var(--radius-pill); gap: 2px;
}
.ftm-mt-seg {
	border: none; background: transparent; padding: 6px 14px;
	border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
	color: var(--nav-soft); transition: all .18s;
	font-family: var(--body-font);
}
.ftm-mt-seg:hover { color: var(--nav); }
.ftm-mt-seg.active { background: var(--nav); color: #fff; }

/* Selects / inputs */
.ftm-mt select,
.ftm-mt input[type="text"] {
	font-family: inherit; font-size: 14px;
	padding: 8px 12px; border: 1px solid var(--line);
	border-radius: var(--radius-sm); background: #fff; color: var(--nav);
	min-width: 80px;
}
.ftm-mt select:focus,
.ftm-mt input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

.ftm-mt-field { display: inline-flex; flex-direction: column; gap: 4px; }
.ftm-mt-field label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* Play button */
.ftm-mt-play {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--nav); color: #fff; border: none;
	padding: 10px 18px; border-radius: var(--radius-pill);
	font-weight: 600; font-size: 14px;
	transition: transform .15s, box-shadow .15s;
	box-shadow: var(--shadow-sm);
	font-family: var(--body-font);
}
.ftm-mt-play:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: var(--nav-soft); }
.ftm-mt-play.alt { background: var(--nav-soft); }
.ftm-mt-play .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Info readout */
.ftm-mt-readout {
	background: var(--cream); border-radius: var(--radius-sm);
	padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
	font-size: 14px; margin-top: 14px;
}
.ftm-mt-readout strong { color: var(--nav); font-weight: 700; }
.ftm-mt-row { display: flex; justify-content: space-between; gap: 10px; }
.ftm-mt-label { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* Try-this */
.ftm-mt-try-this {
	background: var(--cream); border-left: 3px solid var(--gold);
	padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 20px 0;
}
.ftm-mt-try-this .ftm-mt-kicker { margin-bottom: 4px; color: var(--gold); }
.ftm-mt-try-this p { margin: 0 0 6px; }
.ftm-mt-try-this p:last-child { margin-bottom: 0; }

/* Chip */
.ftm-mt-chip {
	display: inline-block; padding: 4px 10px;
	background: var(--nav); color: #fff;
	border-radius: var(--radius-pill);
	font-family: var(--mono-font); font-size: 13px; font-weight: 600; margin: 2px;
}
.ftm-mt-chip.alt { background: var(--cream); color: var(--nav); }
.ftm-mt-chip.gold { background: var(--gold); color: var(--nav); }

/* Instrument wrap */
.ftm-mt-inst-wrap {
	background: var(--cream); border-radius: var(--radius-sm);
	padding: 18px 14px; overflow-x: auto;
}
.ftm-mt-inst-wrap svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.ftm-mt-note-hit { cursor: pointer; }
.ftm-mt-note-hit:hover { opacity: .85; }

/* Chord-builder triple diagram grid */
.ftm-mt-chord-diagrams {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.ftm-mt-small-label {
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 6px;
}

/* Progression grid cells */
.ftm-mt-prog-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 8px; margin-top: 12px;
}
.ftm-mt-prog-cell {
	background: var(--cream); border-radius: var(--radius-sm);
	padding: 14px 8px; text-align: center;
	font-family: var(--mono-font); font-weight: 700; font-size: 18px;
	color: var(--nav);
	transition: all .2s; border: 2px solid transparent;
}
.ftm-mt-prog-cell.current {
	background: var(--nav); color: #fff;
	border-color: var(--gold); transform: scale(1.04);
}
.ftm-mt-prog-cell .num {
	display: block; font-size: 11px; font-weight: 500;
	opacity: .6; margin-bottom: 2px;
	font-family: var(--body-font);
}

/* Ear trainer answer grid + stats */
.ftm-mt-answer-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px; margin-top: 14px;
}
.ftm-mt-ans-btn {
	background: #fff; border: 1.5px solid var(--line);
	padding: 14px 12px; border-radius: var(--radius-sm);
	font-weight: 600; font-size: 14px; color: var(--nav);
	transition: all .18s;
	font-family: var(--body-font);
}
.ftm-mt-ans-btn:hover { border-color: var(--nav); transform: translateY(-1px); }
.ftm-mt-ans-btn.right { background: #d9f2c1; border-color: var(--green); color: #2d5010; }
.ftm-mt-ans-btn.wrong { background: #fadadd; border-color: var(--red); color: #7a1620; }
.ftm-mt-ans-btn:disabled { cursor: default; opacity: .85; }

.ftm-mt-stats-bar {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 10px; margin-top: 14px;
}
.ftm-mt-stat {
	background: var(--cream); border-radius: var(--radius-sm);
	padding: 10px 12px; text-align: center;
}
.ftm-mt-stat .n {
	font-family: var(--title-font); font-size: 28px; color: var(--nav);
	display: block; line-height: 1;
}
.ftm-mt-stat .l {
	font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); margin-top: 4px;
}

/* Account banner */
.ftm-mt-acct-banner {
	margin-top: 16px; padding: 14px 16px;
	background: linear-gradient(135deg, rgba(242,178,48,.12), rgba(114,9,183,.08));
	border: 1px solid rgba(242,178,48,.3);
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
}
.ftm-mt-acct-banner .msg { font-size: 13px; color: var(--nav); flex: 1 1 240px; }
.ftm-mt-acct-banner .msg strong { font-weight: 700; }
.ftm-mt-acct-banner .btn-row { display: flex; gap: 8px; }
.ftm-mt-acct-banner.logged-in {
	background: rgba(128,185,24,.12); border-color: rgba(128,185,24,.35);
}

/* Stacked ear trainers */
.ftm-mt-ear-stack { display: grid; gap: 24px; }
.ftm-mt-ear-stack .ftm-mt-widget-card { margin: 0; }

/* Circle of Fifths v2 */
.ftm-mt-cof-top-controls {
	display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
	margin-bottom: 16px;
}
.ftm-mt-cof-mode-toggle {
	display: inline-flex; background: var(--cream);
	padding: 3px; border-radius: var(--radius-pill); gap: 2px;
}
.ftm-mt-cof-mode-toggle .ftm-mt-seg.active { background: var(--nav); color: #fff; }
.ftm-mt-cof-wheel-wrap {
	display: grid;
	grid-template-columns: minmax(280px, 460px) 1fr;
	gap: 28px; align-items: start;
}
@media (max-width: 760px) {
	.ftm-mt-cof-wheel-wrap { grid-template-columns: 1fr; }
}
.ftm-mt-cof-svg-wrap {
	background: var(--cream); border-radius: 12px;
	padding: 18px; position: relative;
}
.ftm-mt-cof-svg-wrap svg {
	display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto;
}
.ftm-mt-cof-seg,
.ftm-mt-cof-seg-min { transition: transform .15s; cursor: pointer; }
.ftm-mt-cof-seg:hover { transform: scale(1.02); }
.ftm-mt-cof-seg-min:hover { transform: scale(1.04); }
.ftm-mt-cof-panel { display: flex; flex-direction: column; gap: 14px; }
.ftm-mt-cof-panel h4 {
	font: 600 11px var(--body-font); letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.ftm-mt-cof-key-summary {
	background: var(--cream); border-radius: 12px;
	padding: 16px 18px; border-left: 4px solid var(--gold);
}
.ftm-mt-cof-key-summary .key-name {
	font: 400 28px var(--title-font); color: var(--nav); margin: 0 0 6px;
	display: flex; align-items: center; gap: 10px;
}
.ftm-mt-cof-key-summary .key-mode-tag {
	font: 700 10px var(--body-font); letter-spacing: .1em;
	text-transform: uppercase; padding: 3px 10px;
	border-radius: var(--radius-pill); background: var(--nav); color: #fff;
}
.ftm-mt-cof-key-summary .key-meta {
	display: grid; grid-template-columns: auto 1fr;
	gap: 6px 16px; font-size: 13px; color: var(--nav-soft);
}
.ftm-mt-cof-key-summary .meta-label {
	color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.ftm-mt-cof-chord-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 8px;
}
.ftm-mt-cof-chord {
	background: #fff; border: 1.5px solid var(--line);
	border-radius: 10px; padding: 12px 6px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font-family: var(--mono-font); transition: all .18s;
	color: var(--nav, #1A2747);
}
.ftm-mt-cof-chord-name { color: var(--nav, #1A2747); }
.ftm-mt-cof-chord.playing .ftm-mt-cof-chord-name { color: #fff; }
.ftm-mt-cof-chord:hover {
	border-color: var(--nav); background: var(--cream);
	transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,39,71,.1);
}
.ftm-mt-cof-chord.playing {
	background: var(--nav); color: #fff; border-color: var(--gold);
}
.ftm-mt-cof-chord.playing .ftm-mt-cof-chord-roman { color: var(--gold); }
.ftm-mt-cof-chord-roman {
	font: 500 11px var(--body-font); color: var(--muted); opacity: .85;
}
.ftm-mt-cof-chord-name {
	font: 700 16px var(--mono-font);
}
.ftm-mt-cof-prog-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ftm-mt-cof-play-btn {
	background: var(--nav); color: #fff; border: none;
	padding: 8px 14px; border-radius: var(--radius-pill);
	font: 600 12px var(--body-font);
	display: inline-flex; align-items: center; gap: 6px;
	transition: all .15s; box-shadow: var(--shadow-sm);
}
.ftm-mt-cof-play-btn:hover {
	transform: translateY(-1px); background: var(--nav-soft);
	box-shadow: var(--shadow-md);
}
.ftm-mt-cof-play-btn.primary { background: var(--gold); color: var(--nav); }
.ftm-mt-cof-play-btn.primary:hover { background: #e0a425; }
.ftm-mt-cof-play-btn .dot {
	width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.ftm-mt-cof-hint {
	margin-top: 6px; font: 500 12px var(--body-font);
	color: var(--muted); min-height: 18px;
}
.ftm-mt-cof-hint strong { color: var(--nav); }

/* Footer CTA block in the full guide */
.ftm-mt-theory-footer {
	margin-top: 48px; padding: 40px 32px;
	background: var(--nav); color: #fff;
	border-radius: var(--radius);
	text-align: center; position: relative; overflow: hidden;
}
.ftm-mt-theory-footer::before {
	content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: var(--rainbow);
}
.ftm-mt-theory-footer h3 { color: #fff; font-size: 32px; margin: 0 0 10px; }
.ftm-mt-theory-footer p { color: rgba(255,255,255,.78); margin: 0 0 20px; }
.ftm-mt-theory-footer .ftm-mt-btn { background: var(--gold); color: var(--nav) !important; }
.ftm-mt-theory-footer .ftm-mt-btn:hover { background: #e0a425; }
.ftm-mt-theory-footer .ftm-mt-btn.ghost {
	background: transparent; color: #fff !important;
	border-color: rgba(255,255,255,.35);
}
.ftm-mt-theory-footer .ftm-mt-btn.ghost:hover { background: rgba(255,255,255,.1); color: #fff !important; }

/* Audio loader + hint toast */
.ftm-mt-audio-loader {
	position: fixed; bottom: 80px; left: 50%;
	transform: translateX(-50%) translateY(120%);
	background: var(--nav); color: #fff;
	padding: 10px 18px; border-radius: var(--radius-pill);
	font: 600 13px var(--body-font);
	box-shadow: var(--shadow-lg);
	z-index: 250; opacity: 0;
	transition: all .4s; pointer-events: none;
	display: flex; align-items: center; gap: 10px;
}
.ftm-mt-audio-loader.show {
	transform: translateX(-50%) translateY(0); opacity: 1;
}
.ftm-mt-audio-loader .spin {
	width: 12px; height: 12px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.3);
	border-top-color: var(--gold);
	animation: ftm-mt-spin .8s linear infinite;
}
@keyframes ftm-mt-spin { to { transform: rotate(360deg); } }

.ftm-mt-audio-hint {
	position: fixed; bottom: 20px; left: 50%;
	transform: translateX(-50%) translateY(120%);
	background: var(--nav); color: #fff;
	padding: 12px 20px; border-radius: var(--radius-pill);
	font-size: 13px; box-shadow: var(--shadow-lg);
	z-index: 200; opacity: 0;
	transition: all .35s; pointer-events: none;
}
.ftm-mt-audio-hint.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Mobile tweaks */
@media (max-width: 600px) {
	.ftm-mt-guide { padding: 20px 14px 64px; }
	.ftm-mt-hero { padding: 12px 0 28px; margin-bottom: 20px; }
	.ftm-mt-hero h1 { font-size: 44px; }
	.ftm-mt-widget-card { padding: 20px 16px; }
	.ftm-mt-widget-head { flex-direction: column; align-items: flex-start; }
	.ftm-mt-theory-footer { padding: 32px 20px; }
	.ftm-mt-tab-btn { min-width: 120px; padding: 10px 14px; font-size: 13px; }
	.ftm-mt-panel h2 { font-size: 28px; }
	.ftm-mt-lvl { display: inline-block; margin: 6px 0 0; }
}

/* Print — hide interactive controls, show content */
@media print {
	.ftm-mt-tab-bar, .ftm-mt-mute-btn, .ftm-mt-play,
	.ftm-mt-audio-loader, .ftm-mt-audio-hint,
	.ftm-mt-cof-play-btn, .ftm-mt-ans-btn,
	.ftm-mt-acct-banner {
		display: none !important;
	}
	.ftm-mt-panel { display: block !important; page-break-after: always; }
	.ftm-mt { background: #fff !important; }
}

/* ============================================================
   MODES SECTION — intro strip + 7 mode cards
   ============================================================ */
.ftm-mt-modes-intro { margin-top: 28px; }
.ftm-mt-mode-map {
	margin: 20px 0 6px;
	display: grid; gap: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px;
	background: var(--cream);
}
.ftm-mt-mode-map .row {
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 6px; align-items: center;
}
.ftm-mt-mode-map .deg {
	text-align: center; font: 700 14px var(--mono-font);
	color: var(--nav); background: #fff;
	padding: 4px 0; border-radius: 6px; border: 1px solid var(--line);
}
.ftm-mt-mode-map .mode {
	text-align: center; font: 600 13px var(--body-font);
	color: #fff; padding: 10px 2px; border-radius: 8px;
	letter-spacing: .01em;
}
.ftm-mt-mode-map .mode.ion { background: var(--red); }
.ftm-mt-mode-map .mode.dor { background: var(--orange); }
.ftm-mt-mode-map .mode.phr { background: var(--yellow); color: var(--nav); }
.ftm-mt-mode-map .mode.lyd { background: var(--green); }
.ftm-mt-mode-map .mode.mix { background: var(--blue); }
.ftm-mt-mode-map .mode.aeo { background: var(--violet); }
.ftm-mt-mode-map .mode.loc { background: var(--nav); }
.ftm-mt-mode-map .feel-row {
	font: 500 11px var(--body-font);
	color: var(--muted); text-align: center;
}
.ftm-mt-micro {
	font: 500 12px var(--body-font);
	color: var(--muted); margin-top: 4px;
}

.ftm-mt-modes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 22px 0 28px;
}
.ftm-mt-mode-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--nav);
	border-radius: var(--radius-sm);
	padding: 16px 18px 14px;
	box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column; gap: 8px;
	transition: transform .18s, box-shadow .18s;
}
.ftm-mt-mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ftm-mt-mode-card.ion { border-left-color: var(--red); }
.ftm-mt-mode-card.dor { border-left-color: var(--orange); }
.ftm-mt-mode-card.phr { border-left-color: var(--yellow); }
.ftm-mt-mode-card.lyd { border-left-color: var(--green); }
.ftm-mt-mode-card.mix { border-left-color: var(--blue); }
.ftm-mt-mode-card.aeo { border-left-color: var(--violet); }
.ftm-mt-mode-card.loc { border-left-color: var(--nav); }
.ftm-mt-mode-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; margin-bottom: 2px;
}
.ftm-mt-mode-head .name {
	font: 700 18px var(--title-font);
	color: var(--nav); letter-spacing: .01em;
}
.ftm-mt-mode-head .deg {
	font: 700 11px var(--mono-font);
	background: var(--cream); color: var(--nav);
	padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
}
.ftm-mt-mode-feel {
	font: italic 500 14px var(--body-font);
	color: var(--nav); opacity: .85;
	border-bottom: 1px dashed var(--line); padding-bottom: 10px;
}
.ftm-mt-mode-row {
	display: grid; grid-template-columns: 76px 1fr; gap: 8px;
	font: 500 13px var(--body-font); color: var(--nav);
	line-height: 1.45;
}
.ftm-mt-mode-row .l {
	font: 600 10px var(--body-font);
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--muted); padding-top: 2px;
}
.ftm-mt-mode-row code {
	font-family: var(--mono-font); background: var(--cream);
	padding: 1px 6px; border-radius: 4px;
	font-size: 12px;
}
.ftm-mt-modes-usage { margin-top: 10px; }
.ftm-mt-modes-usage h4 {
	font: 700 15px var(--title-font);
	color: var(--nav); margin: 18px 0 6px;
}
.ftm-mt-modes-usage ul {
	margin: 8px 0 8px 20px; padding: 0;
}
.ftm-mt-modes-usage ul li {
	margin-bottom: 6px; line-height: 1.5;
}

@media (max-width: 640px) {
	.ftm-mt-mode-map .mode { font-size: 10px; padding: 8px 2px; }
	.ftm-mt-mode-map .feel-row { font-size: 9px; }
	.ftm-mt-mode-map .deg { font-size: 11px; }
	.ftm-mt-mode-row { grid-template-columns: 64px 1fr; font-size: 12px; }
}