/* MR Theory Board · Theory 3 · Melodic Modes CSS · v1.1.0
   ΝΕΟ: υποστήριξη Melodic multiplayer game και μόνο Melodic cards στη σύγκριση.
*/
/* Θεωρία 3 · Κεφάλαιο 3: Melodic Modes · ίδιο layout με Ionian/Harmonic */

.mrtb-app.mrtb-t3-melodic-active .mrtb-mini-piano{
  display:none !important;
}

.mrtb-t3-melodic-modes-scene,
.mrtb-t3-melodic-modes-scene *{
  box-sizing:border-box;
}

.mrtb-t3-melodic-modes-scene{
  position:absolute;
  inset:8px 10px auto;
  z-index:12;
  min-height:670px;
  padding:12px;
  border-radius:22px;
  color:#18243a;
  background:
    radial-gradient(circle at 6% 0%,rgba(93,194,255,.22),transparent 30%),
    radial-gradient(circle at 95% 8%,rgba(137,105,255,.17),transparent 28%),
    linear-gradient(155deg,rgba(255,255,255,.98),rgba(239,247,255,.96));
  border:1px solid rgba(42,83,136,.14);
  box-shadow:0 14px 34px rgba(35,70,116,.14);
  overflow:hidden;
}

.mrtb-t3-melodic-modes-scene.classification-view{
  min-height:742px;
}

/* ===== compact header ===== */
.t3mm-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,270px);
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.t3mm-heading{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.t3mm-kicker{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border-radius:999px;
  background:#e6f2ff;
  color:#2368b9;
  font-size:9px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
  white-space:nowrap;
}

.t3mm-heading h2{
  margin:0;
  font-size:clamp(21px,2vw,29px);
  line-height:1;
}

.t3mm-heading p{
  margin:4px 0 0;
  color:#60708a;
  font-size:11px;
  font-weight:800;
}

.t3mm-family-select{
  display:grid;
  gap:4px;
  padding:8px 9px;
  border-radius:15px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(46,88,143,.12);
  box-shadow:0 6px 15px rgba(42,76,118,.07);
}

.t3mm-family-select > span{
  color:#61708a;
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3mm-family-select select{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:10px;
  padding:0 10px;
  background:#edf6ff;
  color:#1c2b45;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

/* ===== view buttons ===== */
.t3mm-view-switch{
  display:flex;
  gap:7px;
  margin-bottom:8px;
}

.t3mm-view-switch button{
  min-height:32px;
  border:0;
  border-radius:11px;
  padding:6px 11px;
  color:#34445f;
  background:#edf3fb;
  font:inherit;
  font-size:10px;
  font-weight:900;
  box-shadow:inset 0 -2px 0 rgba(23,46,78,.08);
  cursor:pointer;
}

.t3mm-view-switch button.active{
  color:#fff;
  background:linear-gradient(145deg,#3578d8,#725ce1);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.13),0 6px 14px rgba(56,80,180,.2);
}

/* ===== mode tabs ===== */
.t3mm-mode-tabs{
  display:grid;
  grid-template-columns:repeat(7,minmax(90px,1fr));
  gap:6px;
  margin-bottom:8px;
  overflow:auto;
  padding:1px 0 4px;
}

.t3mm-mode-tabs button{
  min-width:90px;
  min-height:47px;
  display:grid;
  grid-template-columns:21px 1fr;
  grid-template-rows:auto auto;
  column-gap:6px;
  align-items:center;
  padding:6px 8px;
  border:0;
  border-radius:12px;
  color:#26354f;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 -3px 0 rgba(24,50,84,.07),0 5px 11px rgba(40,74,118,.07);
  cursor:pointer;
}

.t3mm-mode-tabs button > span{
  grid-row:1/3;
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dceafb;
  color:#35639c;
  font-size:10px;
  font-weight:950;
}

.t3mm-mode-tabs b{
  align-self:end;
  text-align:left;
  font-size:10px;
  line-height:1;
}

.t3mm-mode-tabs small{
  align-self:start;
  text-align:left;
  color:#748095;
  font-size:8px;
  font-weight:850;
}

.t3mm-mode-tabs button.active{
  color:#fff;
  background:linear-gradient(145deg,#3677d5,#725be0);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 7px 15px rgba(58,78,179,.2);
}

.t3mm-mode-tabs button.active > span{
  color:#fff;
  background:rgba(255,255,255,.18);
}

.t3mm-mode-tabs button.active small{
  color:rgba(255,255,255,.78);
}

/* ===== main mode card ===== */
.t3mm-main-card{
  --t3-accent:#3474d2;
  --t3-soft:#e6f1ff;
  padding:12px;
  border-radius:19px;
  background:rgba(255,255,255,.91);
  border:1px solid rgba(42,78,126,.12);
  box-shadow:0 10px 24px rgba(35,66,106,.09);
}

.t3mm-main-card.minor{
  --t3-accent:#7057d7;
  --t3-soft:#eeeaff;
}

.t3mm-mode-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,320px);
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.t3mm-degree{
  display:block;
  margin-bottom:2px;
  color:var(--t3-accent);
  font-size:9px;
  font-weight:950;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.t3mm-mode-head h3{
  margin:0;
  font-size:clamp(25px,2.9vw,38px);
  line-height:1;
}

.t3mm-mode-head p{
  margin:4px 0 0;
  color:#62718a;
  font-size:11px;
  font-weight:800;
}

.t3mm-quality{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  align-items:center;
  min-height:58px;
  padding:8px 10px;
  border-radius:14px;
  background:var(--t3-soft);
  border-left:5px solid var(--t3-accent);
}

.t3mm-quality > span{
  grid-row:1/3;
  min-width:76px;
  padding:7px 8px;
  border-radius:10px;
  text-align:center;
  color:#fff;
  background:var(--t3-accent);
  font-size:10px;
  font-weight:950;
}

.t3mm-quality strong{
  font-size:14px;
  line-height:1;
}

.t3mm-quality small{
  color:#5e6c82;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
}

/* ===== staff ===== */
.t3mm-staff-shell{
  width:100%;
  margin:5px 0 8px;
  padding:5px;
  border-radius:18px;
  background:linear-gradient(180deg,#f9fcff,#edf5fc);
  border:1px solid rgba(36,72,119,.1);
  overflow:hidden;
}

.t3mm-staff{
  display:block;
  width:100%;
  height:190px;
  overflow:visible;
}

.t3mm-staff-paper{
  fill:rgba(255,255,255,.9);
  stroke:rgba(43,82,130,.08);
  stroke-width:2;
}

.t3mm-staff-line,
.t3mm-ledger{
  stroke:#202a3c;
  stroke-width:2.2;
  stroke-linecap:round;
}

.t3mm-clef{
  fill:#202a3c;
  font-family:"Times New Roman",serif;
  font-size:77px;
  font-weight:400;
  pointer-events:none;
}

.t3mm-staff-note{
  cursor:pointer;
  outline:none;
}

.t3mm-notehead{
  fill:#202a3c;
  transition:transform .14s ease,fill .14s ease,filter .14s ease;
}

.t3mm-note-stem{
  stroke:#202a3c;
  stroke-width:3.2;
  stroke-linecap:round;
  transition:stroke .14s ease;
}

.t3mm-staff-accidental{
  fill:#202a3c;
  font-family:"Times New Roman",serif;
  font-size:27px;
  font-weight:900;
}

.t3mm-staff-degree{
  fill:#61728c;
  font-size:11px;
  font-weight:950;
}

.t3mm-staff-note-name{
  fill:#1f2d45;
  font-size:14px;
  font-weight:950;
}

.t3mm-staff-note.is-third .t3mm-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 7px rgba(255,184,46,.65));
}

.t3mm-staff-note.is-third .t3mm-note-stem{
  stroke:#f1a800;
}

.t3mm-staff-note.is-third .t3mm-staff-degree,
.t3mm-staff-note.is-third .t3mm-staff-note-name{
  fill:#ad6800;
}

.t3mm-third-callout rect{
  fill:#fff1bc;
  stroke:#f1ad16;
  stroke-width:1.5;
}

.t3mm-third-callout text{
  fill:#9c6100;
  font-size:10px;
  font-weight:950;
}

.t3mm-third-callout line{
  stroke:#e5a51c;
  stroke-width:1.5;
  stroke-dasharray:3 3;
}

.t3mm-staff-note.is-playing .t3mm-notehead{
  fill:#ff6f7f;
  transform:scale(1.16);
  transform-origin:center;
  filter:drop-shadow(0 0 9px rgba(255,91,115,.6));
}

.t3mm-staff-note.is-playing .t3mm-note-stem{
  stroke:#ff6f7f;
}

/* ===== compact note/formula row ===== */
.t3mm-formula-row{
  display:grid;
  grid-template-columns:repeat(7,minmax(70px,1fr));
  gap:6px;
}

.t3mm-formula-row button{
  position:relative;
  min-height:60px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:1px 6px;
  align-items:center;
  padding:6px 8px;
  border:0;
  border-radius:12px;
  color:#20304a;
  background:linear-gradient(180deg,#fff,#edf4fb);
  box-shadow:inset 0 -3px 0 rgba(27,53,89,.08),0 4px 10px rgba(34,63,104,.07);
  cursor:pointer;
}

.t3mm-formula-row button > small{
  grid-row:1/3;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--t3-accent);
  background:#e8f1fc;
  font-size:10px;
  font-weight:950;
}

.t3mm-formula-row strong{
  align-self:end;
  font-size:17px;
  line-height:1;
}

.t3mm-formula-row span{
  align-self:start;
  color:#748197;
  font-size:8px;
  font-weight:850;
}

.t3mm-formula-row em{
  position:absolute;
  right:4px;
  top:4px;
  padding:2px 5px;
  border-radius:999px;
  color:#9c6100;
  background:#fff1bc;
  font-size:7px;
  font-style:normal;
  font-weight:950;
}

.t3mm-formula-row button.tonic{
  color:#fff;
  background:linear-gradient(145deg,var(--t3-accent),#7058dc);
}

.t3mm-formula-row button.tonic > small{
  color:#fff;
  background:rgba(255,255,255,.19);
}

.t3mm-formula-row button.tonic span{
  color:rgba(255,255,255,.78);
}

.t3mm-formula-row button.is-third{
  outline:3px solid rgba(241,168,0,.42);
  background:linear-gradient(180deg,#fff9df,#ffecaa);
}

.t3mm-formula-row button.is-playing{
  transform:translateY(-3px);
  outline:3px solid rgba(255,91,115,.45);
}

.t3mm-steps{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin:5px 0 7px;
}

.t3mm-steps > span{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  min-height:20px;
  color:#718097;
  font-size:7px;
  font-weight:850;
}

.t3mm-steps b{
  display:grid;
  place-items:center;
  width:23px;
  height:18px;
  border-radius:999px;
  color:#304866;
  background:#e9f1fb;
  font-size:9px;
}

.t3mm-steps i{
  position:absolute;
  right:-7px;
  color:#aab5c4;
  font-style:normal;
}

.t3mm-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.t3mm-actions button{
  min-height:32px;
  border:0;
  border-radius:10px;
  padding:6px 10px;
  color:#fff;
  background:linear-gradient(145deg,var(--t3-accent),#7058dc);
  font:inherit;
  font-size:9px;
  font-weight:950;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.13),0 5px 11px rgba(50,75,146,.17);
  cursor:pointer;
}

.t3mm-actions > span{
  margin-left:auto;
  color:#627089;
  font-size:9px;
  font-weight:800;
}


.t3mm-reference-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.t3mm-reference-card{
  padding:9px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(39,74,120,.09);
  box-shadow:0 5px 12px rgba(36,65,102,.05);
}

.t3mm-reference-card.major{
  background:linear-gradient(180deg,#f6fbff,#ffffff);
}

.t3mm-reference-card.minor{
  background:linear-gradient(180deg,#f8f4ff,#ffffff);
}

.t3mm-reference-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}

.t3mm-reference-head span{
  display:block;
  color:#5f7190;
  font-size:8px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3mm-reference-head h4{
  margin:2px 0 1px;
  font-size:15px;
  line-height:1.05;
}

.t3mm-reference-head p{
  margin:0;
  color:#6c7a90;
  font-size:8px;
  font-weight:800;
  line-height:1.25;
}

.t3mm-reference-pill{
  display:grid;
  gap:2px;
  padding:6px 8px;
  border-radius:12px;
  text-align:center;
}

.t3mm-reference-pill.major{
  color:#2965b4;
  background:#e6f2ff;
}

.t3mm-reference-pill.minor{
  color:#694ac0;
  background:#eee7ff;
}

.t3mm-reference-pill strong{
  font-size:10px;
  line-height:1;
}

.t3mm-reference-pill small{
  font-size:8px;
  font-weight:900;
}

.t3mm-reference-staff-shell{
  padding:4px;
  border-radius:14px;
  background:linear-gradient(180deg,#f9fcff,#eef5fc);
  border:1px solid rgba(36,72,119,.08);
  overflow:hidden;
}

.t3mm-reference-staff{
  display:block;
  width:100%;
  height:168px;
}

.t3mm-reference-note .t3mm-notehead,
.t3mm-reference-note .t3mm-note-stem{
  transition:none;
}

.t3mm-reference-note.is-third .t3mm-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 7px rgba(255,184,46,.65));
}

.t3mm-reference-note.is-third .t3mm-note-stem{
  stroke:#f1a800;
}

.t3mm-reference-note.is-third .t3mm-staff-degree,
.t3mm-reference-note.is-third .t3mm-staff-note-name{
  fill:#ad6800;
}

.t3mm-reference-note-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-top:6px;
}

.t3mm-reference-note-row span{
  min-width:0;
  padding:4px 2px;
  border-radius:7px;
  text-align:center;
  color:#33445e;
  background:#eef3f9;
}

.t3mm-reference-note-row span.is-third{
  color:#8e5700;
  background:linear-gradient(180deg,#fff2bd,#ffdc72);
  outline:2px solid rgba(235,159,0,.28);
}

.t3mm-reference-note-row small,
.t3mm-reference-note-row b{
  display:block;
}

.t3mm-reference-note-row small{
  color:#738095;
  font-size:6px;
  font-weight:900;
}

.t3mm-reference-note-row b{
  margin-top:1px;
  font-size:9px;
}

/* ===== classification scene ===== */
.t3mm-classification{
  padding:10px;
  border-radius:19px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(42,78,126,.11);
  box-shadow:0 10px 24px rgba(35,66,106,.08);
}

.t3mm-class-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,440px);
  gap:12px;
  align-items:center;
  margin-bottom:9px;
  padding:8px 10px;
  border-radius:14px;
  background:linear-gradient(135deg,#edf6ff,#f3efff);
}

.t3mm-class-intro span{
  display:block;
  color:#356ba9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3mm-class-intro strong{
  display:block;
  margin-top:2px;
  font-size:13px;
}

.t3mm-class-intro p{
  margin:0;
  color:#617087;
  font-size:9px;
  font-weight:800;
  line-height:1.25;
}

.t3mm-class-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.t3mm-class-column{
  padding:9px;
  border-radius:16px;
  background:#f7faff;
  border:1px solid rgba(42,78,126,.09);
}

.t3mm-class-column.major{
  background:linear-gradient(180deg,#f0f8ff,#f8fbff);
}

.t3mm-class-column.minor{
  background:linear-gradient(180deg,#f4f0ff,#faf8ff);
}

.t3mm-class-column > header{
  margin-bottom:7px;
  padding:2px 3px 6px;
  border-bottom:1px solid rgba(43,78,124,.1);
}

.t3mm-class-column > header span{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  color:#2f6cad;
  background:#dfeeff;
  font-size:8px;
  font-weight:950;
}

.t3mm-class-column.minor > header span{
  color:#6748bb;
  background:#e9e1ff;
}

.t3mm-class-column h3{
  margin:4px 0 1px;
  font-size:17px;
  line-height:1;
}

.t3mm-class-column header p{
  margin:0;
  color:#6e7b90;
  font-size:8px;
  font-weight:800;
}

.t3mm-compare-card{
  margin-top:6px;
  padding:7px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(39,74,120,.09);
  box-shadow:0 4px 10px rgba(36,65,102,.05);
}

.t3mm-compare-card.major{
  --compare-accent:#3274cc;
  --compare-soft:#e6f2ff;
}

.t3mm-compare-card.minor{
  --compare-accent:#7056d4;
  --compare-soft:#eee9ff;
}

.t3mm-compare-open{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  color:#24334d;
  background:transparent;
  font:inherit;
  cursor:pointer;
}

.t3mm-compare-open > span{
  text-align:left;
}

.t3mm-compare-open b,
.t3mm-compare-open small{
  display:block;
}

.t3mm-compare-open b{
  font-size:11px;
}

.t3mm-compare-open small{
  margin-top:1px;
  color:#7a8598;
  font-size:7px;
  font-weight:800;
}

.t3mm-compare-open em{
  padding:4px 7px;
  border-radius:999px;
  color:var(--compare-accent);
  background:var(--compare-soft);
  font-size:7px;
  font-style:normal;
  font-weight:950;
  white-space:nowrap;
}

.t3mm-compare-rule{
  margin:5px 0;
  color:var(--compare-accent);
  font-size:8px;
  font-weight:950;
}

.t3mm-compare-notes{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}

.t3mm-compare-notes > span{
  min-width:0;
  padding:4px 2px;
  border-radius:7px;
  text-align:center;
  color:#33445e;
  background:#eef3f9;
}

.t3mm-compare-notes small,
.t3mm-compare-notes b{
  display:block;
}

.t3mm-compare-notes small{
  color:#738095;
  font-size:6px;
  font-weight:900;
}

.t3mm-compare-notes b{
  margin-top:1px;
  font-size:9px;
}

.t3mm-compare-notes > span.diff{
  color:#8e5700;
  background:linear-gradient(180deg,#fff2bd,#ffdc72);
  outline:2px solid rgba(235,159,0,.28);
}

.t3mm-compare-notes > span.diff small{
  color:#9a6200;
}

.t3mm-difference-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
}

.t3mm-difference-line > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  color:#795000;
  background:#fff0b4;
  font-size:7px;
  font-weight:900;
}

.t3mm-difference-line b{
  color:#b57600;
}

.t3mm-difference-line strong{
  font-size:9px;
}

.t3mm-difference-line.base > span{
  color:#68768c;
  background:#edf2f8;
}

/* ===== responsive ===== */
@media (max-width:1100px){
  .mrtb-t3-melodic-modes-scene{
    min-height:720px;
  }

  .t3mm-mode-head{
    grid-template-columns:minmax(0,1fr) minmax(205px,270px);
  }

  .t3mm-formula-row{
    overflow:auto;
    padding-bottom:4px;
  }

  .t3mm-formula-row button{
    min-width:72px;
  }
}

@media (max-width:900px){
  .mrtb-t3-melodic-modes-scene{
    inset:6px 6px auto;
    min-height:940px;
    padding:9px;
    border-radius:17px;
    overflow:auto;
  }

  .mrtb-t3-melodic-modes-scene.classification-view{
    min-height:1420px;
  }

  .t3mm-header{
    grid-template-columns:1fr;
    gap:7px;
  }

  .t3mm-heading{
    align-items:flex-start;
  }

  .t3mm-kicker{
    display:none;
  }

  .t3mm-view-switch{
    overflow:auto;
  }

  .t3mm-view-switch button{
    min-width:max-content;
  }

  .t3mm-mode-head{
    grid-template-columns:1fr;
  }

  .t3mm-quality{
    grid-template-columns:auto 1fr;
  }

  .t3mm-staff-shell{
    overflow:auto;
  }

  .t3mm-staff{
    min-width:720px;
  }

  .t3mm-formula-row{
    grid-template-columns:repeat(7,72px);
  }

  .t3mm-steps{
    min-width:530px;
  }

  .t3mm-actions{
    flex-wrap:wrap;
  }

  .t3mm-actions > span{
    width:100%;
    margin-left:0;
  }

  .t3mm-class-intro{
    grid-template-columns:1fr;
  }

  .t3mm-reference-grid,
  .t3mm-class-grid{
    grid-template-columns:1fr;
  }
}


/* ===== v0.8.7 · interactive comparison / toolbar accidentals ===== */
.mrtb-app.mrtb-t3-melodic-active .mrtb-values-section,
.mrtb-app.mrtb-t3-melodic-active [data-action="toggle-value-labels"]{
  display:none !important;
}

.t3mm-toolbar-accidentals{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:30px;
  padding:3px 5px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff7cf,#ffe181);
  box-shadow:inset 0 -2px 0 rgba(123,78,0,.13),0 5px 10px rgba(77,57,20,.1);
}

.t3mm-toolbar-accidentals[hidden]{
  display:none !important;
}

.t3mm-toolbar-label{
  padding:0 3px;
  color:#775000;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}

.t3mm-toolbar-accidentals button{
  width:31px;
  min-width:31px;
  height:27px;
  border:0;
  border-radius:9px;
  color:#20283a;
  background:rgba(255,255,255,.92);
  font-family:"Times New Roman",serif;
  font-size:20px;
  font-weight:900;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);
  cursor:pointer;
}

.t3mm-toolbar-accidentals button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.t3mm-toolbar-status{
  max-width:150px;
  padding:0 5px;
  color:#665126;
  font-size:8px;
  font-weight:900;
  line-height:1.1;
}

.t3mm-fixed-example{
  display:grid;
  gap:2px;
  padding:8px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(46,88,143,.12);
  box-shadow:0 6px 15px rgba(42,76,118,.07);
}

.t3mm-fixed-example span{
  color:#61708a;
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3mm-fixed-example strong{
  font-size:13px;
}

.t3mm-fixed-example small{
  color:#6d7a8f;
  font-size:8px;
  font-weight:800;
}

/* Ρίζα → 3η και Ρίζα → 5η χωρίς εμφανή ονομασία διαστήματος */
.t3mm-root-arrow{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:7 5;
  opacity:.9;
  pointer-events:none;
}

.t3mm-root-arrow.third{
  stroke:#e7a000;
}

.t3mm-root-arrow.fifth{
  stroke:#398ccf;
}

#t3mm-arrow-third path{
  fill:#e7a000;
}

#t3mm-arrow-fifth path{
  fill:#398ccf;
}

.t3mm-staff-note.is-root .t3mm-notehead{
  fill:#7057d7;
  filter:drop-shadow(0 0 7px rgba(112,87,215,.45));
}

.t3mm-staff-note.is-root .t3mm-note-stem{
  stroke:#7057d7;
}

.t3mm-staff-note.is-fifth .t3mm-notehead{
  fill:#398ccf;
  filter:drop-shadow(0 0 7px rgba(57,140,207,.5));
}

.t3mm-staff-note.is-fifth .t3mm-note-stem{
  stroke:#398ccf;
}

.t3mm-staff-note.is-fifth .t3mm-staff-degree,
.t3mm-staff-note.is-fifth .t3mm-staff-note-name{
  fill:#246ea7;
}

.t3mm-formula-row button.is-fifth{
  outline:3px solid rgba(57,140,207,.35);
  background:linear-gradient(180deg,#f2fbff,#dff3ff);
}

/* ===== interactive natural-scale labs ===== */
.t3mm-lab-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:11px;
}

.t3mm-lab-card{
  --lab-accent:#3377cf;
  --lab-soft:#e8f3ff;
  padding:9px;
  border-radius:17px;
  background:#fff;
  border:1px solid rgba(39,74,120,.1);
  box-shadow:0 5px 13px rgba(36,65,102,.06);
}

.t3mm-lab-card.minor{
  --lab-accent:#7057d7;
  --lab-soft:#eee9ff;
}

.t3mm-lab-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,250px);
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}

.t3mm-lab-head > div:first-child > span{
  display:block;
  color:var(--lab-accent);
  font-size:8px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3mm-lab-head h3{
  margin:2px 0 1px;
  font-size:16px;
  line-height:1;
}

.t3mm-lab-head p{
  margin:0;
  color:#6b7890;
  font-size:8px;
  font-weight:800;
  line-height:1.2;
}

.t3mm-lab-result{
  display:grid;
  gap:2px;
  min-height:58px;
  padding:7px 9px;
  border-radius:13px;
  color:#245d9f;
  background:var(--lab-soft);
  border-left:4px solid var(--lab-accent);
}

.t3mm-lab-result.minor{
  color:#6547ba;
}

.t3mm-lab-result.custom{
  color:#8a5a00;
  background:#fff2c7;
  border-left-color:#e5a000;
}

.t3mm-lab-result small{
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
}

.t3mm-lab-result strong{
  font-size:14px;
  line-height:1;
}

.t3mm-lab-result span{
  color:#68768b;
  font-size:7px;
  font-weight:800;
  line-height:1.2;
}

.t3mm-lab-staff-shell{
  padding:4px;
  border-radius:14px;
  background:linear-gradient(180deg,#f9fcff,#edf5fc);
  border:1px solid rgba(36,72,119,.09);
  overflow:auto hidden;
}

.t3mm-lab-staff{
  display:block;
  width:100%;
  min-width:650px;
  height:176px;
}

.t3mm-lab-note.is-editable{
  cursor:pointer;
}

.t3mm-edit-ring{
  fill:rgba(255,210,75,.15);
  stroke:#e4a300;
  stroke-width:2;
  stroke-dasharray:4 4;
  animation:t3mm-edit-pulse 1.4s ease-in-out infinite;
}

@keyframes t3mm-edit-pulse{
  50%{ opacity:.42; transform:scale(1.08); transform-origin:center; }
}

.t3mm-lab-note.is-selected .t3mm-edit-ring{
  fill:rgba(255,188,46,.28);
  stroke-width:4;
  stroke-dasharray:none;
}

.t3mm-lab-note.is-altered .t3mm-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 8px rgba(255,184,46,.65));
}

.t3mm-lab-note.is-altered .t3mm-note-stem{
  stroke:#f1a800;
}

.t3mm-lab-note.is-selected .t3mm-notehead{
  fill:#ff6577;
  filter:drop-shadow(0 0 9px rgba(255,101,119,.62));
}

.t3mm-lab-note.is-selected .t3mm-note-stem{
  stroke:#ff6577;
}

.t3mm-lab-hints{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-top:5px;
}

.t3mm-lab-hints button{
  min-width:0;
  min-height:49px;
  padding:4px 2px;
  border:0;
  border-radius:8px;
  color:#748095;
  background:#eef3f8;
  font:inherit;
}

.t3mm-lab-hints button.is-editable{
  color:#7d5800;
  background:#fff1bb;
  outline:2px solid rgba(226,160,0,.25);
  cursor:pointer;
}

.t3mm-lab-hints button.is-selected{
  color:#963b4a;
  background:#ffe5ea;
  outline:3px solid rgba(255,101,119,.36);
}

.t3mm-lab-hints button.is-altered{
  background:#ffe28a;
}

.t3mm-lab-hints small,
.t3mm-lab-hints b,
.t3mm-lab-hints span{
  display:block;
}

.t3mm-lab-hints small{
  font-size:6px;
  font-weight:950;
}

.t3mm-lab-hints b{
  margin-top:1px;
  font-size:10px;
}

.t3mm-lab-hints span{
  min-height:17px;
  margin-top:2px;
  font-size:6px;
  font-weight:900;
  line-height:1.05;
}

.t3mm-all-modes-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:9px 0 7px;
  padding:7px 9px;
  border-radius:12px;
  background:linear-gradient(135deg,#edf6ff,#f1ecff);
}

.t3mm-all-modes-head span{
  color:#3469a9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3mm-all-modes-head strong{
  font-size:10px;
}

.t3mm-mode-staff-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.t3mm-mode-staff-column{
  padding:8px;
  border-radius:16px;
  background:linear-gradient(180deg,#f1f8ff,#fbfdff);
  border:1px solid rgba(42,78,126,.09);
}

.t3mm-mode-staff-column.minor{
  background:linear-gradient(180deg,#f5f1ff,#fcfbff);
}

.t3mm-mode-staff-column > header{
  margin-bottom:6px;
  padding:2px 3px 6px;
  border-bottom:1px solid rgba(43,78,124,.1);
}

.t3mm-mode-staff-column > header span{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  color:#2f6cad;
  background:#dfeeff;
  font-size:8px;
  font-weight:950;
}

.t3mm-mode-staff-column.minor > header span{
  color:#6748bb;
  background:#e9e1ff;
}

.t3mm-mode-staff-column h3{
  margin:4px 0 0;
  font-size:16px;
}

.t3mm-mode-staff-card{
  --mode-accent:#3375ca;
  --mode-soft:#e6f2ff;
  margin-top:6px;
  padding:7px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(39,74,120,.09);
  box-shadow:0 4px 10px rgba(36,65,102,.05);
}

.t3mm-mode-staff-card.minor{
  --mode-accent:#7056d4;
  --mode-soft:#eee9ff;
}

.t3mm-mode-staff-card > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}

.t3mm-mode-staff-card > header span{
  display:block;
  color:#7a8598;
  font-size:7px;
  font-weight:850;
}

.t3mm-mode-staff-card h4{
  margin:1px 0;
  font-size:11px;
}

.t3mm-mode-staff-card header p{
  margin:0;
  color:var(--mode-accent);
  font-size:7px;
  font-weight:950;
}

.t3mm-mode-staff-card header em{
  padding:4px 7px;
  border-radius:999px;
  color:var(--mode-accent);
  background:var(--mode-soft);
  font-size:7px;
  font-style:normal;
  font-weight:950;
  white-space:nowrap;
}

.t3mm-mode-mini-staff-shell{
  padding:3px;
  border-radius:11px;
  background:linear-gradient(180deg,#fbfdff,#eef5fb);
  overflow:auto hidden;
}

.t3mm-mode-mini-staff{
  display:block;
  width:100%;
  min-width:610px;
  height:148px;
}

.t3mm-mode-mini-note.is-diff .t3mm-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 7px rgba(255,184,46,.62));
}

.t3mm-mode-mini-note.is-diff .t3mm-note-stem{
  stroke:#f1a800;
}

.t3mm-mode-mini-note.is-diff .t3mm-staff-degree,
.t3mm-mode-mini-note.is-diff .t3mm-staff-note-name{
  fill:#a76400;
}

.t3mm-mode-difference{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}

.t3mm-mode-difference span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  color:#795000;
  background:#fff0b4;
  font-size:7px;
  font-weight:900;
}

.t3mm-mode-difference.base span{
  color:#68768c;
  background:#edf2f8;
}

@media (max-width:1100px){
  .t3mm-lab-grid,
  .t3mm-mode-staff-columns{
    grid-template-columns:1fr;
  }

  .t3mm-lab-staff{
    min-width:720px;
  }
}

@media (max-width:900px){
  .t3mm-toolbar-status,
  .t3mm-toolbar-label{
    display:none;
  }

  .t3mm-lab-head{
    grid-template-columns:1fr;
  }

  .t3mm-all-modes-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .mrtb-t3-melodic-modes-scene.classification-view{
    min-height:2100px;
  }
}

/* ===== v0.8.8 · compact header στη σκηνή Major / Minor σύγκριση ===== */

/* Τα tabs Ionian / Dorian κτλ. δεν αποδίδονται πλέον από το JS
   στη σκηνή σύγκρισης. Οι κανόνες εδώ συμπτύσσουν το υπόλοιπο header. */
.mrtb-t3-melodic-modes-scene.classification-view{
  padding-top:8px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-header{
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin-bottom:4px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-heading{
  gap:7px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-kicker{
  min-height:22px;
  padding:3px 7px;
  font-size:7px;
  letter-spacing:.4px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-heading h2{
  font-size:clamp(18px,1.55vw,24px);
  line-height:1;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-heading p{
  display:none;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-fixed-example{
  min-width:210px;
  padding:5px 9px;
  border-radius:12px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-fixed-example > span{
  display:none;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-fixed-example strong{
  font-size:10px;
  line-height:1.05;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-fixed-example small{
  margin-top:2px;
  font-size:7px;
  line-height:1.1;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-view-switch{
  gap:5px;
  margin-bottom:5px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-view-switch button{
  min-height:27px;
  padding:4px 9px;
  border-radius:9px;
  font-size:8px;
  box-shadow:inset 0 -2px 0 rgba(23,46,78,.07);
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-classification{
  margin-top:0;
}

/* Επιπλέον ασφάλεια: ακόμη και αν μείνει παλιό cached HTML,
   τα mode tabs δεν εμφανίζονται στη σκηνή σύγκρισης. */
.mrtb-t3-melodic-modes-scene.classification-view .t3mm-mode-tabs{
  display:none !important;
}

@media (max-width:900px){
  .mrtb-t3-melodic-modes-scene.classification-view .t3mm-header{
    grid-template-columns:1fr;
    gap:4px;
  }

  .mrtb-t3-melodic-modes-scene.classification-view .t3mm-kicker{
    display:none;
  }

  .mrtb-t3-melodic-modes-scene.classification-view .t3mm-fixed-example{
    min-width:0;
    width:100%;
    padding:5px 8px;
  }

  .mrtb-t3-melodic-modes-scene.classification-view .t3mm-fixed-example small{
    display:none;
  }

  .mrtb-t3-melodic-modes-scene.classification-view .t3mm-view-switch{
    margin-bottom:4px;
  }
}

/* ===== v0.8.9 · καθαρή σκηνή σύγκρισης ===== */

/* Δεν υπάρχει πλέον εισαγωγικό section ούτε οι κάτω κάρτες όλων των modes. */
.mrtb-t3-melodic-modes-scene.classification-view{
  min-height:660px;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-classification-clean{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-lab-grid{
  margin:0;
  gap:12px;
  align-items:start;
}

.mrtb-t3-melodic-modes-scene.classification-view .t3mm-lab-card{
  padding:12px;
  border-radius:19px;
}

.t3mm-lab-scale-title{
  display:grid;
  gap:4px;
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:16px;
  color:#245d9f;
  background:linear-gradient(135deg,#e8f4ff,#f7fbff);
  border-left:6px solid #3377cf;
}

.t3mm-lab-card.minor .t3mm-lab-scale-title{
  color:#6345ba;
  background:linear-gradient(135deg,#eee9ff,#faf8ff);
  border-left-color:#7057d7;
}

.t3mm-lab-scale-title.custom{
  color:#855800;
  background:linear-gradient(135deg,#fff0b8,#fff9df);
  border-left-color:#e3a000;
}

.t3mm-lab-scale-title > span{
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3mm-lab-scale-title h2{
  margin:0;
  font-size:clamp(25px,2.2vw,36px);
  line-height:1;
  letter-spacing:-.5px;
}

.t3mm-lab-scale-title > strong{
  display:block;
  color:#243650;
  font-size:10px;
  line-height:1.25;
}

.t3mm-lab-scale-title p{
  margin:0;
  color:#6a7890;
  font-size:8px;
  font-weight:850;
  line-height:1.2;
}

/* Οι παλιές περιοχές δεν πρέπει να εμφανιστούν ούτε από cached HTML. */
.mrtb-t3-melodic-modes-scene.classification-view .t3mm-class-intro,
.mrtb-t3-melodic-modes-scene.classification-view .t3mm-all-modes-head,
.mrtb-t3-melodic-modes-scene.classification-view .t3mm-mode-staff-columns{
  display:none !important;
}

@media (max-width:900px){
  .mrtb-t3-melodic-modes-scene.classification-view{
    min-height:980px;
  }

  .mrtb-t3-melodic-modes-scene.classification-view .t3mm-lab-grid{
    grid-template-columns:1fr;
  }

  .t3mm-lab-scale-title h2{
    font-size:27px;
  }

  .t3mm-lab-scale-title > strong{
    font-size:9px;
  }
}

/* ===== v0.9.0 · interval spelling + characteristic mode note ===== */

.t3mm-mode-reference,
.t3mm-mode-difference-summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin:0 0 7px;
  padding:7px 10px;
  border-radius:13px;
  border:1px solid rgba(40,76,124,.09);
}

.t3mm-mode-reference.major,
.t3mm-mode-difference-summary.major{
  color:#245f9f;
  background:linear-gradient(135deg,#edf7ff,#f8fcff);
}

.t3mm-mode-reference.minor,
.t3mm-mode-difference-summary.minor{
  color:#6549b8;
  background:linear-gradient(135deg,#f0ebff,#faf8ff);
}

.t3mm-mode-reference{
  display:grid;
  grid-template-columns:auto auto 1fr;
}

.t3mm-mode-reference > span,
.t3mm-mode-difference-summary > div:first-child span{
  font-size:7px;
  font-weight:950;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.t3mm-mode-reference > strong,
.t3mm-mode-difference-summary > div:first-child strong{
  font-size:10px;
  line-height:1.1;
}

.t3mm-mode-reference > small{
  color:#6c7a90;
  font-size:8px;
  font-weight:850;
}

.t3mm-mode-difference-summary{
  justify-content:space-between;
}

.t3mm-mode-difference-summary > div:first-child{
  display:grid;
  gap:2px;
}

.t3mm-mode-difference-changes{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
}

.t3mm-mode-difference-changes > span{
  display:grid;
  grid-template-columns:auto auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:5px;
  min-width:112px;
  padding:5px 8px;
  border-radius:11px;
  color:#8b3650;
  background:linear-gradient(135deg,#fff0f4,#ffe0e8);
  outline:2px solid rgba(236,82,116,.18);
}

.t3mm-mode-difference-changes b,
.t3mm-mode-difference-changes strong{
  font-size:12px;
  line-height:1;
}

.t3mm-mode-difference-changes i{
  color:#d34f6d;
  font-size:10px;
  font-style:normal;
  font-weight:950;
}

.t3mm-mode-difference-changes small{
  grid-column:1/4;
  margin-top:3px;
  text-align:center;
  color:#9b5366;
  font-size:7px;
  font-weight:950;
}

/* Spelling 1, 2, ♭3, ♯4... πάνω από κάθε νότα. */
.t3mm-spelling-staff{
  height:210px;
}

.t3mm-interval-spelling rect{
  fill:#ffffff;
  stroke:#91a5c2;
  stroke-width:1.4;
  filter:drop-shadow(0 2px 3px rgba(37,62,97,.12));
}

.t3mm-interval-spelling text{
  fill:#253853;
  font-size:11px;
  font-weight:950;
}

.t3mm-staff-note.is-root .t3mm-interval-spelling rect{
  fill:#7057d7;
  stroke:#5941bd;
}

.t3mm-staff-note.is-root .t3mm-interval-spelling text{
  fill:#ffffff;
}

.t3mm-interval-spelling.is-difference rect{
  fill:#ff5e7d;
  stroke:#cf3657;
  stroke-width:2;
  filter:drop-shadow(0 0 7px rgba(255,75,111,.46));
}

.t3mm-interval-spelling.is-difference text{
  fill:#ffffff;
  font-size:12px;
}

.t3mm-mode-diff-callout rect{
  fill:#fff0b7;
  stroke:#e0a015;
  stroke-width:1.2;
}

.t3mm-mode-diff-callout text{
  fill:#8b5700;
  font-size:8px;
  font-weight:950;
}

/* Η χαρακτηριστική νότα υπερισχύει οπτικά από 3η/5η. */
.t3mm-staff-note.is-mode-difference .t3mm-notehead{
  fill:#ff4e70;
  filter:drop-shadow(0 0 9px rgba(255,66,105,.68));
}

.t3mm-staff-note.is-mode-difference .t3mm-note-stem{
  stroke:#ff4e70;
}

.t3mm-staff-note.is-mode-difference .t3mm-staff-accidental,
.t3mm-staff-note.is-mode-difference .t3mm-staff-degree,
.t3mm-staff-note.is-mode-difference .t3mm-staff-note-name{
  fill:#bd294a;
  font-weight:950;
}

.t3mm-formula-row button.is-mode-difference{
  color:#8f2640;
  background:linear-gradient(180deg,#fff3f6,#ffdce5);
  outline:3px solid rgba(255,73,111,.4);
  box-shadow:inset 0 -3px 0 rgba(151,33,62,.1),0 5px 12px rgba(218,62,96,.14);
}

.t3mm-formula-row button.is-mode-difference > small{
  color:#ffffff;
  background:#ff4e70;
}

.t3mm-formula-row button.is-mode-difference span{
  color:#9d5365;
}

.t3mm-formula-row button.is-mode-difference em{
  right:4px;
  top:3px;
  max-width:58px;
  overflow:hidden;
  padding:2px 5px;
  border-radius:999px;
  color:#8a2840;
  background:#ffffff;
  border:1px solid rgba(207,54,87,.2);
  font-size:6px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Τα βέλη παραμένουν χωρίς όνομα διαστήματος και περνούν πίσω από τα labels. */
.t3mm-root-arrow{
  opacity:.68;
}

@media (max-width:900px){
  .t3mm-mode-reference,
  .t3mm-mode-difference-summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .t3mm-mode-reference{
    display:flex;
  }

  .t3mm-mode-difference-changes{
    width:100%;
    justify-content:flex-start;
  }

  .t3mm-spelling-staff{
    min-width:720px;
    height:210px;
  }
}

/* Melodic Minor: τρίτο βέλος, ίδια ακριβώς λογική/αισθητική με τα Ionian arrows. */
.t3mm-root-arrow.seventh{
  stroke:#7057d7;
}

#t3mm-arrow-seventh path{
  fill:#7057d7;
}



/* =========================================================
   v1.0.3 · FIRST SCENE STAFF HIGHLIGHT + DEGREE LABELS
   ========================================================= */

.t3mm-diff-note-backdrop{
  fill:rgba(255, 89, 122, .10);
  stroke:rgba(228, 73, 107, .42);
  stroke-width:2;
  filter:drop-shadow(0 4px 10px rgba(220,70,101,.12));
}

.t3mm-staff-note.is-mode-difference .t3mm-diff-note-backdrop{
  fill:rgba(255, 89, 122, .12);
}

.t3mm-staff-degree{
  font-size:12px;
  font-weight:1000;
}

.t3mm-staff-note.is-mode-difference .t3mm-staff-degree{
  fill:#c7294c;
}

.t3mm-formula-row{
  margin-top:4px;
}

.t3mm-formula-row button > small{
  font-size:11px;
}

.t3mm-formula-row strong{
  font-size:18px;
}

.t3mm-formula-row span{
  font-size:9px;
}

/* Αφού αφαιρέθηκε το κάτω row με τόνους/ημιτόνια, μην κρατάει κενά σε responsive */
@media (max-width: 860px){
  .t3mm-formula-row{
    gap:5px;
  }

  .t3mm-formula-row button{
    min-height:56px;
  }
}

/* =========================================================
   v1.0.4 · ROMAN DEGREES / NO NOTE NAMES
   ========================================================= */

.t3mm-staff-degree{
  fill:#283954;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.02em;
}

.t3mm-formula-row button{
  min-height:48px;
  display:grid;
  place-items:center;
  padding:5px;
}

.t3mm-formula-row button > small{
  grid-row:auto;
  width:auto;
  height:auto;
  min-width:38px;
  min-height:28px;
  padding:4px 9px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
}

.t3mm-formula-row strong,
.t3mm-formula-row span,
.t3mm-formula-row em{
  display:none !important;
}

.t3mm-formula-row button.tonic > small{
  color:#fff;
  background:rgba(255,255,255,.2);
}

.t3mm-formula-row button.is-mode-difference > small{
  color:#fff;
  background:#ff4e70;
}

@media (max-width:860px){
  .t3mm-formula-row button{
    min-height:44px;
  }

  .t3mm-formula-row button > small{
    min-width:34px;
    min-height:26px;
    font-size:12px;
  }
}

/* =========================================================
   v1.0.5 · Spelling reveal + maj7/7 labels
   ========================================================= */

.t3mm-spelling-reveal-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 10px;
  padding:12px 16px;
  border:1px solid rgba(120,139,180,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(240,246,255,.92));
  box-shadow:0 10px 24px rgba(57,92,148,.08);
}

.t3mm-spelling-reveal-info{
  display:grid;
  gap:2px;
}

.t3mm-spelling-reveal-info strong{
  color:#26395a;
  font-size:15px;
  font-weight:1000;
  line-height:1.1;
}

.t3mm-spelling-reveal-info small{
  color:#647694;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
}

.t3mm-spelling-reveal-button{
  min-width:168px;
  min-height:42px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#6f60ff 0%,#4f7dff 100%);
  color:#fff;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(82,101,241,.22);
}

.t3mm-spelling-reveal-button:disabled{
  opacity:.62;
  cursor:default;
  box-shadow:none;
}

.t3mm-interval-spelling rect{
  width:auto;
}

@media (max-width: 900px){
  .t3mm-spelling-reveal-bar{
    flex-direction:column;
    align-items:stretch;
    padding:10px 12px;
  }

  .t3mm-spelling-reveal-button{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   v1.0.6 · LARGE FRAMED SPELLING LABELS
   Μεγάλα labels με καθαρό πλαίσιο, ενώ διατηρείται το reveal ένα-ένα
   ========================================================= */

.t3mm-interval-spelling{
  animation:t3mmSpellingLabelIn .28s cubic-bezier(.2,.8,.25,1.15) both;
}

.t3mm-interval-spelling rect{
  fill:#ffffff;
  stroke:#8399bb;
  stroke-width:2;
  filter:
    drop-shadow(0 5px 8px rgba(39,65,105,.18));
}

.t3mm-interval-spelling text{
  fill:#263a5a;
  font-size:16px;
  font-weight:1000;
  letter-spacing:-.02em;
}

.t3mm-staff-note.is-root .t3mm-interval-spelling rect{
  fill:linear-gradient(135deg,#7057d7,#4f7dff);
  stroke:#5140ba;
  stroke-width:2.2;
  filter:
    drop-shadow(0 6px 10px rgba(89,66,199,.28));
}

.t3mm-staff-note.is-root .t3mm-interval-spelling text{
  fill:#ffffff;
  font-size:16px;
}

.t3mm-interval-spelling.is-difference rect{
  fill:#ff5e7d;
  stroke:#c92e51;
  stroke-width:2.4;
  filter:
    drop-shadow(0 0 10px rgba(255,75,111,.48))
    drop-shadow(0 5px 9px rgba(177,35,67,.20));
}

.t3mm-interval-spelling.is-difference text{
  fill:#ffffff;
  font-size:16px;
  font-weight:1000;
}

@keyframes t3mmSpellingLabelIn{
  from{
    opacity:0;
    transform:translateY(-8px) scale(.75);
    transform-origin:center;
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    transform-origin:center;
  }
}

@media (max-width:900px){
  .t3mm-interval-spelling text,
  .t3mm-staff-note.is-root .t3mm-interval-spelling text,
  .t3mm-interval-spelling.is-difference text{
    font-size:15px;
  }
}

/* =========================================================
   v1.0.7 · CLICK NOTE TO REVEAL SPELLING
   ========================================================= */

/* Το παλιό κουμπί/section δεν πρέπει να εμφανιστεί ούτε από cache. */
.t3mm-spelling-reveal-bar,
.t3mm-spelling-reveal-button{
  display:none !important;
}

.t3mm-staff-note{
  cursor:pointer;
}

.t3mm-staff-note:hover .t3mm-notehead{
  filter:
    drop-shadow(0 0 8px rgba(79,125,255,.38));
}

.t3mm-staff-note:hover .t3mm-note-stem{
  stroke:#4f7dff;
}

.t3mm-actions > span{
  color:#536782;
  font-size:11px;
  font-weight:850;
}

/* =========================================================
   v1.0.8 · TOGGLE SPELLING + HIDE ALL
   ========================================================= */

.t3mm-spelling-staff{
  height:198px;
}

.t3mm-interval-spelling,
.t3mm-interval-spelling *,
.t3mm-mode-diff-callout,
.t3mm-mode-diff-callout *,
.t3mm-diff-note-backdrop{
  pointer-events:none;
}

.t3mm-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.4 !important;
  filter:
    drop-shadow(0 5px 9px rgba(33,59,99,.24)) !important;
}

.t3mm-interval-spelling text{
  fill:#243959 !important;
  font-size:17px !important;
  font-weight:1000 !important;
}

.t3mm-staff-note.is-root .t3mm-interval-spelling rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3mm-staff-note.is-root .t3mm-interval-spelling text{
  fill:#fff !important;
}

.t3mm-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#b91f43 !important;
  stroke-width:2.8 !important;
  filter:
    drop-shadow(0 0 11px rgba(255,67,106,.55))
    drop-shadow(0 6px 10px rgba(151,28,58,.24)) !important;
}

.t3mm-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:18px !important;
}

.t3mm-diff-note-backdrop{
  fill:rgba(255,79,114,.10);
  stroke:rgba(226,55,91,.43);
}

.t3mm-mode-diff-callout{
  opacity:.98;
}

.t3mm-hide-spellings{
  color:#8d3650 !important;
  background:linear-gradient(180deg,#fff0f4,#ffdce6) !important;
  border:1px solid rgba(208,54,88,.18) !important;
  box-shadow:
    inset 0 -2px 0 rgba(157,31,62,.08),
    0 5px 10px rgba(164,40,68,.10) !important;
}

.t3mm-hide-spellings:disabled{
  opacity:.38;
  cursor:default;
  box-shadow:none !important;
}

@media (max-width:900px){
  .t3mm-actions{
    flex-wrap:wrap;
  }

  .t3mm-actions > span{
    width:100%;
    margin-left:0;
  }
}

/* =========================================================
   v1.0.9 · CHARACTERISTIC SPELLING ALWAYS ON TOP
   ========================================================= */

.t3mm-note-click-target{
  fill:transparent;
  stroke:none;
  pointer-events:all;
  cursor:pointer;
}

.t3mm-spelling-top-layer{
  pointer-events:none;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling{
  pointer-events:none;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.6 !important;
  filter:
    drop-shadow(0 6px 10px rgba(33,59,99,.28)) !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling text{
  fill:#243959 !important;
  font-size:18px !important;
  font-weight:1000 !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-root-label rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-root-label text{
  fill:#fff !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#a9183a !important;
  stroke-width:3 !important;
  filter:
    drop-shadow(0 0 13px rgba(255,67,106,.62))
    drop-shadow(0 7px 12px rgba(151,28,58,.28)) !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:19px !important;
}

.t3mm-staff-note.is-mode-difference:hover .t3mm-diff-note-backdrop{
  fill:rgba(255,79,114,.16);
  stroke:rgba(220,42,82,.62);
}

/* =========================================================
   v1.1.0 · HTML OVERLAY SPELLING LABELS
   Τα διαστήματα εμφανίζονται σε overlay layer μπροστά από όλα
   ========================================================= */

.t3mm-staff-shell{
  position:relative;
}

.t3mm-spelling-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
}

.t3mm-spelling-chip{
  position:absolute;
  top:10px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  height:38px;
  padding:0 16px;
  border-radius:999px;
  background:#f9fcff;
  border:2.6px solid #60789f;
  box-shadow:0 7px 12px rgba(33,59,99,.26);
  color:#243959;
  font-size:18px;
  font-weight:1000;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.t3mm-spelling-chip.is-root-label{
  background:#6d57dc;
  border-color:#4938b4;
  color:#fff;
}

.t3mm-spelling-chip.is-difference{
  z-index:35;
  min-width:70px;
  background:#ff4f72;
  border-color:#a9183a;
  color:#fff;
  box-shadow:
    0 0 13px rgba(255,67,106,.60),
    0 8px 14px rgba(151,28,58,.28);
}

.t3mm-spelling-chip.is-difference.is-root-label{
  background:#ff4f72;
  border-color:#a9183a;
  color:#fff;
}

@media (max-width:900px){
  .t3mm-spelling-chip{
    top:8px;
    min-width:54px;
    height:34px;
    padding:0 12px;
    font-size:16px;
  }

  .t3mm-spelling-chip.is-difference{
    min-width:62px;
  }
}

/* =========================================================
   v1.1.1 · Wider staff + compact top area
   ========================================================= */

.t3mm-main-card{
  padding:10px 12px;
  border-radius:17px;
}

.t3mm-mode-head{
  grid-template-columns:minmax(0,1fr) minmax(210px,300px);
  gap:10px;
  margin-bottom:6px;
}

.t3mm-degree{
  margin-bottom:1px;
  font-size:8px;
  letter-spacing:.45px;
}

.t3mm-mode-head h3{
  font-size:clamp(22px,2.5vw,32px);
  line-height:.96;
}

.t3mm-mode-head p{
  margin:3px 0 0;
  font-size:10px;
}

.t3mm-quality{
  min-height:48px;
  padding:6px 8px;
  border-radius:12px;
  border-left-width:4px;
}

.t3mm-quality > span{
  min-width:70px;
  padding:6px 7px;
  font-size:9px;
}

.t3mm-quality strong{
  font-size:13px;
}

.t3mm-quality small{
  font-size:8px;
}

.t3mm-mode-reference,
.t3mm-mode-difference-summary{
  min-height:38px;
  margin:0 0 5px;
  padding:6px 9px;
  border-radius:12px;
}

.t3mm-mode-reference > span,
.t3mm-mode-difference-summary > div:first-child span{
  font-size:6.7px;
}

.t3mm-mode-reference > strong,
.t3mm-mode-difference-summary > div:first-child strong{
  font-size:9px;
}

.t3mm-mode-reference > small{
  font-size:7.5px;
}

.t3mm-mode-difference-changes{
  gap:4px;
}

.t3mm-staff-shell{
  margin:4px 0 6px;
  padding:8px 10px 6px;
  border-radius:22px;
}

.t3mm-staff{
  height:245px;
}

.t3mm-spelling-overlay{
  top:8px;
  left:0;
  right:0;
  bottom:auto;
  height:46px;
}

.t3mm-spelling-chip{
  top:0;
  min-width:64px;
  height:40px;
  padding:0 16px;
  font-size:18px;
  z-index:40;
}

.t3mm-spelling-chip.is-difference{
  min-width:72px;
  z-index:45;
}

.t3mm-formula-row{
  margin-top:2px;
}

.t3mm-actions{
  gap:8px;
  margin-top:4px;
}

.t3mm-actions button{
  min-height:34px;
  padding:0 12px;
  font-size:11px;
}

.t3mm-actions > span{
  font-size:10px;
}

@media (max-width: 1100px){
  .t3mm-mode-head{
    grid-template-columns:1fr;
    gap:8px;
  }

  .t3mm-staff{
    height:228px;
  }

  .t3mm-spelling-chip{
    min-width:56px;
    height:36px;
    padding:0 12px;
    font-size:16px;
  }

  .t3mm-spelling-chip.is-difference{
    min-width:64px;
  }
}

/* =========================================================
   v1.1.2 · PRECISE INTERVAL CHIP ALIGNMENT
   Τα chips ευθυγραμμίζονται στο ίδιο content box με το SVG,
   όχι στο outer shell, ώστε να κάθονται ακριβώς πάνω από τις νότες.
   ========================================================= */

.t3mm-staff-shell{
  --t3mm-shell-pad-top:8px;
  --t3mm-shell-pad-x:10px;
  --t3mm-shell-pad-bottom:6px;
  padding:var(--t3mm-shell-pad-top) var(--t3mm-shell-pad-x) var(--t3mm-shell-pad-bottom);
}

.t3mm-spelling-overlay{
  left:var(--t3mm-shell-pad-x) !important;
  right:var(--t3mm-shell-pad-x) !important;
  top:var(--t3mm-shell-pad-top) !important;
  width:auto !important;
  height:46px;
}

/* λίγο πιο αυστηρό centering */
.t3mm-spelling-chip{
  transform:translateX(-50%);
}

/* responsive sync */
@media (max-width:1100px){
  .t3mm-staff-shell{
    --t3mm-shell-pad-top:8px;
    --t3mm-shell-pad-x:10px;
    --t3mm-shell-pad-bottom:6px;
  }
}

/* =========================================================
   v1.1.3 · PERFECT SVG ALIGNMENT + CHANGE LABEL BELOW NOTE
   ========================================================= */

.t3mm-spelling-overlay{
  display:none !important;
}

.t3mm-spelling-top-layer,
.t3mm-mode-diff-callout-layer{
  pointer-events:none;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.6 !important;
  filter:
    drop-shadow(0 6px 10px rgba(33,59,99,.24)) !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling text{
  fill:#243959 !important;
  font-size:18px !important;
  font-weight:1000 !important;
  letter-spacing:-.02em;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-root-label rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-root-label text{
  fill:#fff !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#a9183a !important;
  stroke-width:3 !important;
  filter:
    drop-shadow(0 0 13px rgba(255,67,106,.58))
    drop-shadow(0 8px 14px rgba(151,28,58,.24)) !important;
}

.t3mm-spelling-top-layer .t3mm-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:19px !important;
}

.t3mm-mode-diff-callout-layer .t3mm-mode-diff-callout rect{
  fill:#ffe79b;
  stroke:#cc9821;
  stroke-width:2;
  filter:
    drop-shadow(0 4px 8px rgba(148,100,13,.16));
}

.t3mm-mode-diff-callout-layer .t3mm-mode-diff-callout text{
  fill:#9c6810;
  font-size:14px;
  font-weight:1000;
  letter-spacing:-.01em;
}

.t3mm-mode-diff-callout-layer .t3mm-mode-diff-callout.bottom rect,
.t3mm-mode-diff-callout-layer .t3mm-mode-diff-callout.bottom text{
  pointer-events:none;
}

/* =========================================================
   v1.1.4 · DEFINITIVE VISIBLE INTERVAL LAYER FIX
   Το παλιό .t3mm-spelling-top-layer είχε display:none!important.
   Χρησιμοποιείται νέο SVG layer που είναι πάντα ορατό.
   ========================================================= */

.t3mm-spelling-visible-layer{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.8 !important;
  filter:
    drop-shadow(0 6px 10px rgba(33,59,99,.28)) !important;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling text{
  fill:#243959 !important;
  font-size:18px !important;
  font-weight:1000 !important;
  letter-spacing:-.02em;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling.is-root-label rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling.is-root-label text{
  fill:#fff !important;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#a9183a !important;
  stroke-width:3.2 !important;
  filter:
    drop-shadow(0 0 13px rgba(255,67,106,.62))
    drop-shadow(0 8px 14px rgba(151,28,58,.28)) !important;
}

.t3mm-spelling-visible-layer .t3mm-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:19px !important;
}

/* Το παλιό layer παραμένει κρυφό μόνο για παλιά cached markup. */
.t3mm-spelling-top-layer{
  display:none !important;
}

/* =========================================================
   v1.1.5 · FINAL NOTE HIT LAYER
   Αόρατο click layer πάνω από highlight, note, callout και labels.
   ========================================================= */

.t3mm-final-note-hit-layer{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:all !important;
}

.t3mm-final-note-hit{
  fill:rgba(255,255,255,0.001);
  stroke:none;
  pointer-events:all !important;
  cursor:pointer;
  outline:none;
}

.t3mm-final-note-hit:hover{
  fill:rgba(79,125,255,.035);
}

.t3mm-final-note-hit:focus{
  fill:rgba(79,125,255,.055);
  stroke:rgba(79,125,255,.38);
  stroke-width:2;
}

/* Τα οπτικά layers δεν πρέπει να καταναλώνουν clicks. */
.t3mm-spelling-visible-layer,
.t3mm-spelling-visible-layer *,
.t3mm-mode-diff-callout-layer,
.t3mm-mode-diff-callout-layer *,
.t3mm-diff-note-backdrop,
.t3mm-notehead,
.t3mm-note-stem,
.t3mm-staff-accidental,
.t3mm-staff-degree{
  pointer-events:none !important;
}

/* =========================================================
   v1.1.6 · DIRECT DOM INTERVAL TOGGLE
   Όλα τα labels υπάρχουν πάντα. Το click αλλάζει μόνο class.
   ========================================================= */

.t3mm-spelling-visible-layer{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
}

.t3mm-spelling-visible-layer
.t3mm-interval-spelling{
  display:inline !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-5px) scale(.82);
  transform-box:fill-box;
  transform-origin:center;
  transition:
    opacity .16s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

.t3mm-spelling-visible-layer
.t3mm-interval-spelling.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1);
  transition:
    opacity .16s ease,
    transform .18s ease,
    visibility 0s;
}

/* Η χαρακτηριστική νότα έχει το πιο έντονο label. */
.t3mm-spelling-visible-layer
.t3mm-interval-spelling.is-difference.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}

.t3mm-final-note-hit-layer{
  pointer-events:all !important;
}

.t3mm-final-note-hit{
  pointer-events:all !important;
  cursor:pointer;
}

/* =========================================================
   v1.1.7 · HTML TOP BOXES FINAL FIX
   Τα διαστήματα εμφανίζονται ως HTML κουτάκια πάνω από όλα.
   ========================================================= */

.t3mm-staff-shell{
  position:relative;
}

.t3mm-spelling-visible-layer{
  display:none !important;
}

.t3mm-top-interval-overlay{
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  height:52px;
  z-index:90;
  pointer-events:none;
}

.t3mm-top-interval-chip{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:42px;
  padding:0 16px;
  border-radius:16px;
  background:#ffffff;
  border:3px solid #5f79a5;
  box-shadow:
    0 8px 18px rgba(31,53,92,.18),
    0 2px 0 rgba(255,255,255,.78) inset;
  color:#233a5e;
  font-size:21px;
  font-weight:1000;
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear .16s;
}

.t3mm-top-interval-chip.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s;
}

.t3mm-top-interval-chip.is-root-label{
  background:linear-gradient(180deg,#7d67ef 0%,#654fd7 100%);
  border-color:#4938b4;
  color:#fff;
}

.t3mm-top-interval-chip.is-difference{
  background:linear-gradient(180deg,#ff6b88 0%,#ff4b71 100%);
  border-color:#a9183a;
  color:#fff;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.72),
    0 0 18px rgba(255,67,106,.38),
    0 9px 18px rgba(151,28,58,.22);
}

.t3mm-top-interval-chip.is-difference.is-visible{
  opacity:1;
  visibility:visible;
}

@media (max-width: 1100px){
  .t3mm-top-interval-overlay{
    left:10px;
    right:10px;
    top:8px;
    height:46px;
  }

  .t3mm-top-interval-chip{
    min-width:56px;
    height:38px;
    padding:0 12px;
    font-size:18px;
    border-radius:14px;
  }
}

/* =========================================================
   v1.1.9 · PERFECT CENTER ALIGNMENT
   Το SVG και το HTML overlay μοιράζονται ακριβώς το ίδιο πλάτος.
   Τα κουτάκια κεντράρονται με translateX(-50%) χωρίς έξτρα offset.
   ========================================================= */

.t3mm-spelling-staff{
  width:100%;
  display:block;
}

.t3mm-top-interval-overlay{
  left:10px;
  right:10px;
  width:auto;
}

.t3mm-top-interval-chip{
  margin-left:0 !important;
  transform:translateX(-50%) !important;
}

.t3mm-top-interval-chip.is-visible{
  transform:translateX(-50%) translateY(0) !important;
}

/* =========================================================
   v1.2.0 · RESTORE MAJOR / MINOR SCENE SWITCH
   ========================================================= */

.mrtb-t3-melodic-modes-scene .t3mm-view-switch{
  position:relative;
  z-index:250;
  pointer-events:auto !important;
}

.mrtb-t3-melodic-modes-scene .t3mm-view-switch button{
  position:relative;
  z-index:251;
  pointer-events:auto !important;
  touch-action:manipulation;
  cursor:pointer;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-classification-clean,
.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-lab-grid,
.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-lab-card{
  display:grid;
  visibility:visible;
  opacity:1;
}

.mrtb-app.mrtb-t3-melodic-classification
.t3mm-toolbar-accidentals{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* =========================================================
   v1.2.1 · REAL MAJOR/MINOR SCENE SWITCH FIX
   Η σκηνή είναι πάνω από το draw canvas.
   Τα κενά σημεία αφήνουν τα drawing events να περάσουν,
   ενώ όλα τα controls παραμένουν clickable.
   ========================================================= */

.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene{
  z-index:100000 !important;
  isolation:isolate;
  pointer-events:none !important;
}

.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene button,
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene select,
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene label,
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene [data-t3-view],
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene [data-t3-mode],
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene [data-t3-note-index],
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene [data-t3-spelling-hit],
.mrtb-app.mrtb-t3-melodic-active
.mrtb-t3-melodic-modes-scene [data-t3-lab-note]{
  pointer-events:auto !important;
}

.mrtb-app.mrtb-t3-melodic-active
.t3mm-view-switch{
  position:relative;
  z-index:2147483000 !important;
  pointer-events:auto !important;
}

.mrtb-app.mrtb-t3-melodic-active
.t3mm-view-switch button{
  z-index:2147483001 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  user-select:none;
}

/* Η δεύτερη σκηνή πρέπει να εμφανίζεται χωρίς transition/display conflict. */
.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-classification-clean{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-lab-grid{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-lab-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-lab-card button,
.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-lab-card [data-t3-lab-note]{
  pointer-events:auto !important;
}

/* =========================================================
   v1.2.2 · RESTORE FULL MAJOR / MINOR COMPARISON
   Επαναφορά της παλιάς πλήρους σκηνής:
   - επάνω interactive C Ionian / A Aeolian με αλλοιώσεις
   - κάτω όλες οι παράλληλες Major / Minor συγκρίσεις
   ========================================================= */

.mrtb-t3-melodic-modes-scene.classification-view{
  min-height:1480px;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-classification-restored{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-classification-restored
.t3mm-lab-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 12px;
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-classification-restored
.t3mm-all-modes-head{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 9px;
  padding:10px 13px;
  border:1px solid rgba(68,93,155,.12);
  border-radius:15px;
  background:
    linear-gradient(
      135deg,
      rgba(226,242,255,.96),
      rgba(239,232,255,.96)
    );
  visibility:visible !important;
  opacity:1 !important;
}

.t3mm-classification-restored
.t3mm-all-modes-head > div{
  display:grid;
  gap:3px;
}

.t3mm-classification-restored
.t3mm-all-modes-head span{
  color:#356ba9;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3mm-classification-restored
.t3mm-all-modes-head strong{
  color:#263954;
  font-size:12px;
  font-weight:1000;
  line-height:1.2;
}

.t3mm-classification-restored
.t3mm-all-modes-head small{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#6549ba;
  background:rgba(255,255,255,.72);
  font-size:9px;
  font-weight:950;
  white-space:nowrap;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-classification-restored
.t3mm-mode-staff-columns{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;
  visibility:visible !important;
  opacity:1 !important;
}

.t3mm-classification-restored
.t3mm-mode-staff-column{
  display:block !important;
  min-width:0;
  padding:9px;
  border-radius:17px;
}

.t3mm-classification-restored
.t3mm-mode-staff-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.t3mm-classification-restored
.t3mm-mode-mini-staff{
  min-width:610px;
}

.t3mm-classification-restored
.t3mm-mode-difference{
  min-height:24px;
}

/* Το μεταγενέστερο v0.8.9 έκρυβε αυτά τα sections. */
.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-all-modes-head{
  display:flex !important;
}

.mrtb-t3-melodic-modes-scene.classification-view
.t3mm-mode-staff-columns{
  display:grid !important;
}

@media (max-width:1100px){
  .mrtb-t3-melodic-modes-scene.classification-view{
    min-height:2520px;
  }

  .mrtb-t3-melodic-modes-scene.classification-view
  .t3mm-classification-restored
  .t3mm-lab-grid,
  .mrtb-t3-melodic-modes-scene.classification-view
  .t3mm-classification-restored
  .t3mm-mode-staff-columns{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .mrtb-t3-melodic-modes-scene.classification-view{
    min-height:2800px;
  }

  .t3mm-classification-restored
  .t3mm-all-modes-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .t3mm-classification-restored
  .t3mm-all-modes-head small{
    white-space:normal;
  }
}



/* =========================================================
   v1.2.3 · CENTERED COMPARISON RESULT HERO
   Στη σκηνή Major / Minor σύγκριση δείχνουμε μόνο:
   - το όνομα της κλίμακας
   - το πώς μεταβάλλεται
   ========================================================= */

.t3mm-lab-head.t3mm-lab-head-centered{
  display:block;
  margin-bottom:8px;
}

.t3mm-lab-result.t3mm-lab-result-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  min-height:76px;
  padding:14px 18px;
  border-radius:22px;
  text-align:center;
  color:#204f8b;
  background:
    linear-gradient(135deg, rgba(225,242,255,.98), rgba(240,248,255,.98));
  border:2px solid rgba(63,121,214,.22);
  border-left-width:6px;
  box-shadow:0 10px 24px rgba(98,132,187,.12);
}

.t3mm-lab-result.t3mm-lab-result-hero.minor{
  color:#6547ba;
  background:
    linear-gradient(135deg, rgba(241,236,255,.98), rgba(248,244,255,.98));
  border-color:rgba(112,87,215,.22);
  border-left-color:#7057d7;
}

.t3mm-lab-result.t3mm-lab-result-hero.custom{
  color:#8a5a00;
  background:linear-gradient(135deg,#fff5d9,#fff0be);
  border-color:rgba(229,160,0,.25);
  border-left-color:#e5a000;
}

.t3mm-lab-result.t3mm-lab-result-hero small{
  display:none;
}

.t3mm-lab-result.t3mm-lab-result-hero strong{
  font-size:clamp(24px,3vw,34px);
  line-height:1;
  font-weight:1000;
  letter-spacing:-0.03em;
}

.t3mm-lab-result.t3mm-lab-result-hero span{
  color:inherit;
  opacity:.88;
  font-size:clamp(12px,1.2vw,16px);
  font-weight:900;
  line-height:1.2;
}

@media (max-width:900px){
  .t3mm-lab-result.t3mm-lab-result-hero{
    min-height:68px;
    padding:12px 14px;
    border-radius:18px;
  }

  .t3mm-lab-result.t3mm-lab-result-hero strong{
    font-size:22px;
  }

  .t3mm-lab-result.t3mm-lab-result-hero span{
    font-size:11px;
  }
}


/* =========================================================
   Melodic Modes game · reuse the exact Harmonic game UI
   Το shared t3img styling ήδη φορτώνεται από το harmonic CSS.
   Εδώ χρειάζεται μόνο να κρύβεται η melodic σκηνή όταν ανοίγει το game.
   ========================================================= */

.mrtb-app.mrtb-t3img-game-active .mrtb-t3-melodic-modes-scene{
  display:none !important;
}