/* MR Theory Board · Αρμονία
   Native SATB editor · v1.7.0 FINAL
   Replace entire: assets/css/harmony.css
*/

/* =========================================================
   Η γραμμή εργαλείων μένει ΙΔΙΑ με την υπόλοιπη Θεωρία.
   Το Hide συνεχίζει να λειτουργεί κανονικά.
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode .mrtb-board-wrap{
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-app.mrtb-harmony-native-mode .mrtb-board{
  overflow:auto !important;
}

/* Η Harmony toolbar χρησιμοποιεί το ίδιο responsive pattern με τα υπόλοιπα κεφάλαια. */
.mrtb-app.mrtb-harmony-native-mode .mrtb-sidebar,
.mrtb-app.mrtb-harmony-native-mode .mrtb-tools-section,
.mrtb-app.mrtb-harmony-native-mode .mrtb-tool-row,
.mrtb-app.mrtb-harmony-native-mode .mrtb-tools-one-line{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.mrtb-app.mrtb-harmony-native-mode .mrtb-tools-one-line{
  display:flex !important;
  align-items:center !important;
  align-content:center !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  min-width:0 !important;
  padding-block:6px !important;
}


/* =========================================================
   ΕΝΙΑΙΟ GRAND STAFF CONTAINER
   ========================================================= */

.mrtb-harmony-grand-staff{
  position:absolute;

  top:24px;
  left:22px;
  right:22px;

  z-index:20;

  box-sizing:border-box;

  height:700px;

  overflow:visible;

  border:
    2px solid
    rgba(78,150,196,.34);

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(239,249,255,.74),
      rgba(249,255,241,.74)
    );

  box-shadow:
    inset 0 0 0 4px
    rgba(255,255,255,.38),
    0 12px 28px
    rgba(43,75,100,.08);
}


/*
 * Τα 2 native staffs βρίσκονται τώρα μέσα
 * στο ίδιο container.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff{
  left:0 !important;
  right:0 !important;

  width:100% !important;

  margin:0 !important;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  overflow:visible !important;

  z-index:21 !important;
}


/*
 * Δεν χρειαζόμαστε ξεχωριστές μεγάλες κάρτες/labels
 * αφού πλέον είναι ένα grand staff.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-label,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-hint{
  display:none !important;
}


/* =========================================================
   BRACE
   ========================================================= */

.mrtb-harmony-brace{
  position:absolute;

  z-index:25;

  width:42px;

  pointer-events:none;
}

.mrtb-harmony-brace svg{
  display:block;

  width:100%;
  height:100%;

  overflow:visible;
}

.mrtb-harmony-brace path{
  fill:none;

  stroke:#263044;

  stroke-width:4.5;

  stroke-linecap:round;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
   LEGEND ΦΩΝΩΝ
   ========================================================= */

.mrtb-harmony-legend{
  position:absolute;

  z-index:32;

  display:flex;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:5px;

  pointer-events:none;
}

.mrtb-harmony-legend span{
  display:inline-flex;

  align-items:center;

  gap:5px;

  min-height:26px;

  padding:
    3px 8px;

  border:
    1px solid
    rgba(52,75,100,.13);

  border-radius:999px;

  background:
    rgba(255,255,255,.92);

  color:#33475c;

  font-size:10px;

  font-weight:900;

  box-shadow:
    0 4px 12px
    rgba(40,64,90,.07);
}

.mrtb-harmony-legend i{
  display:block;

  width:8px;
  height:8px;

  border-radius:50%;

  background:
    var(--voice-color);
}


/* =========================================================
   ΧΡΩΜΑΤΑ ΦΩΝΩΝ
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice="soprano"]{
  --note-bg:#2f80ed !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice="alto"]{
  --note-bg:#169c78 !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice="tenor"]{
  --note-bg:#ef8b2c !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice="bass"]{
  --note-bg:#8e44ad !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice]
.mrtb-note-head{
  background:
    var(--harmony-voice-color)
    !important;

  border-color:
    color-mix(
      in srgb,
      var(--harmony-voice-color) 78%,
      #172333
    )
    !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice]
.mrtb-stem,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice]
.mrtb-flag{
  background:
    var(--harmony-voice-color)
    !important;

  border-color:
    var(--harmony-voice-color)
    !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice]
.mrtb-accidental{
  color:
    var(--harmony-voice-color)
    !important;
}


/* Μικρό όνομα φωνής μόνο όταν η νότα είναι selected. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice]::after{
  content:
    attr(
      data-harmony-voice-label
    );

  position:absolute;

  left:50%;
  top:-10px;

  transform:
    translate(-50%,-100%);

  display:none;

  padding:
    2px 6px;

  border-radius:999px;

  background:#fff;

  color:
    var(--harmony-voice-color);

  border:
    1px solid
    currentColor;

  font-size:8px;

  font-weight:900;

  white-space:nowrap;

  pointer-events:none;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice].selected::after{
  display:block;
}


/* =========================================================
   ΒΟΗΘΗΤΙΚΕΣ ΓΡΑΜΜΕΣ
   Native ledgerHtml() του mrtb-board.js
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note
.mrtb-ledgers{
  display:block !important;

  position:absolute !important;

  inset:0 !important;

  overflow:visible !important;

  pointer-events:none !important;

  z-index:0 !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note
.mrtb-ledgers b,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note
.mrtb-ledgers span{
  position:absolute !important;

  left:22px !important;

  width:52px !important;

  height:2px !important;

  display:block !important;

  border:0 !important;

  border-radius:2px !important;

  background:#263044 !important;

  opacity:1 !important;
}


/*
 * Η κεφαλή και το stem μένουν επάνω από τις βοηθητικές.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note
.mrtb-note-glyph{
  z-index:2 !important;
}


/* =========================================================
   ΚΙΝΗΣΕΙΣ ΦΩΝΩΝ
   Board-level overlay πάνω από ΚΑΙ τα δύο staffs.
   ========================================================= */

.mrtb-harmony-arrow-layer{
  position:absolute;

  top:0;
  left:0;

  z-index:44 !important;

  overflow:visible;

  pointer-events:none;
}


/*
 * Staffs / backgrounds κάτω από τα arrows.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff{
  z-index:20 !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff{
  z-index:21 !important;
}


/*
 * Native notes πάνω από τα arrows.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-chord]{
  z-index:48 !important;
}


/* Harmony-specific button στην υπάρχουσα εργαλειοθήκη. */
.mrtb-harmony-arrows-btn.active{
  background:#e8f4ff !important;

  border-color:#5b96c4 !important;

  color:#1e6296 !important;

  box-shadow:
    inset 0 0 0 1px
    #5b96c4,
    0 4px 10px
    rgba(48,105,150,.10)
    !important;
}


/* =========================================================
   Παλιές custom scenes δεν χρησιμοποιούνται πλέον.
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-satb-scene,
.mrtb-app.mrtb-harmony-native-mode
#mrtb-harmony-satb-v103{
  display:none !important;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width:820px){

  .mrtb-harmony-grand-staff{
    left:8px;
    right:8px;

    border-radius:20px;
  }

  .mrtb-harmony-legend{
    right:8px !important;

    max-width:74%;
  }

  .mrtb-harmony-legend span{
    padding:
      2px 6px;

    font-size:9px;
  }

  .mrtb-harmony-brace{
    width:34px;
  }
}

@media (max-width:520px){

  .mrtb-harmony-legend{
    max-width:86%;
  }

  .mrtb-harmony-legend span{
    font-size:8px;
  }
}


/* =========================================================
   v1.1.2 · EXTRA ΧΩΡΟΣ / LEDGERS
   ========================================================= */

/* Τα staffs και τα note glyphs δεν κόβουν νότες έξω από τις 5 γραμμές. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff-lines{
  overflow:visible !important;
}

/* Το πραγματικό native ledger markup του mrtb-board.js είναι i > b. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-ledgers b{
  display:block !important;
  position:absolute !important;
  left:22px !important;
  width:52px !important;
  height:2px !important;
  border:0 !important;
  border-radius:2px !important;
  background:#263044 !important;
  opacity:1 !important;
  z-index:1 !important;
}

/* Λίγο μεγαλύτερος οπτικός αέρας ανάμεσα σε Σολ και Φα. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff{
  min-height:700px !important;
}


/* =========================================================
   v1.2.3 · ΔΙΟΡΘΩΣΗ ΑΡΜΟΝΙΑΣ
   ========================================================= */

.mrtb-harmony-key-wrap{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:36px;
  padding:3px 7px;
  border:1px solid rgba(47,83,112,.16);
  border-radius:12px;
  background:rgba(255,255,255,.78);
  color:#53657a;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

.mrtb-harmony-key-wrap > span{
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mrtb-harmony-key-select{
  min-width:116px !important;
  height:30px !important;
  padding:3px 26px 3px 7px !important;
  border-radius:9px !important;
  font-size:10px !important;
  font-weight:850 !important;
}

.mrtb-harmony-correct-btn{
  border-color:#69a26d !important;
  background:#f1fbf2 !important;
  color:#2f7137 !important;
}

.mrtb-harmony-correct-btn.active{
  background:#dff5e2 !important;
  box-shadow:
    inset 0 0 0 1px #5e9b65,
    0 4px 10px rgba(50,120,65,.12) !important;
}

.mrtb-harmony-correction-panel{
  position:absolute;
  top:74px;
  right:24px;
  z-index:90;
  width:min(440px,calc(100% - 48px));
  max-height:430px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:2px solid #d7e2eb;
  border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 44px rgba(30,55,80,.20);
  backdrop-filter:blur(12px);
}

.mrtb-harmony-correction-panel > header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #e4eaf0;
  background:#f7fafc;
}

.mrtb-harmony-correction-panel > header div{
  min-width:0;
  display:grid;
  gap:2px;
}

.mrtb-harmony-correction-panel > header strong{
  color:#26384d;
  font-size:13px;
  font-weight:950;
}

.mrtb-harmony-correction-panel > header span{
  color:#718197;
  font-size:9px;
  font-weight:800;
}

.mrtb-harmony-correction-panel > header button{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid #d7e1e9;
  border-radius:9px;
  background:#fff;
  color:#536274;
  font-size:20px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

.mrtb-harmony-correction-list{
  min-height:0;
  overflow:auto;
  padding:8px;
  display:grid;
  align-content:start;
  gap:6px;
}

.mrtb-harmony-correction-item{
  width:100%;
  display:grid;
  gap:3px;
  padding:8px 9px;
  border:1px solid #f0c7ca;
  border-left:5px solid #d84f59;
  border-radius:11px;
  background:#fff7f7;
  color:#34465b;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.mrtb-harmony-correction-item b{
  color:#a7373f;
  font-size:10.5px;
  font-weight:950;
}

.mrtb-harmony-correction-item span{
  color:#5d6d7f;
  font-size:9px;
  font-weight:750;
  line-height:1.35;
}

.mrtb-harmony-correction-ok{
  padding:18px 12px;
  border:1px solid #b9dfc0;
  border-radius:13px;
  background:#effaf1;
  color:#36713f;
  font-size:11px;
  font-weight:900;
  text-align:center;
}

.mrtb-harmony-correction-panel > footer{
  padding:7px 10px;
  border-top:1px solid #e4eaf0;
  background:#fafcfd;
  color:#78879a;
  font-size:8px;
  font-weight:750;
  line-height:1.35;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-harmony-error-note{
  filter:drop-shadow(0 0 5px rgba(216,61,72,.42));
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-harmony-error-note
.mrtb-note-head{
  outline:3px solid #e0525c !important;
  outline-offset:3px !important;
}

.mrtb-harmony-error-mark{
  position:absolute;
  top:2px;
  right:1px;
  z-index:12;
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:999px;
  background:#dc3f49;
  color:#fff;
  font-size:9px;
  font-weight:950;
  line-height:1;
  pointer-events:none;
  box-shadow:0 3px 8px rgba(140,30,40,.25);
}

.mrtb-harmony-error-pulse{
  animation:mrtbHarmonyErrorPulse .7s ease 2;
}

@keyframes mrtbHarmonyErrorPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

@media (max-width:820px){
  .mrtb-harmony-key-wrap{
    flex:1 1 auto;
    justify-content:center;
  }

  .mrtb-harmony-key-select{
    min-width:105px !important;
  }

  .mrtb-harmony-correction-panel{
    top:58px;
    right:8px;
    width:calc(100% - 16px);
    max-height:390px;
  }
}


/* =========================================================
   v1.2.3 · TOOLBAR: ΚΙΝΗΣΕΙΣ + ΔΙΟΡΘΩΣΗ ΠΑΝΤΑ ΟΡΑΤΑ
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode .mrtb-tools-section,
.mrtb-app.mrtb-harmony-native-mode .mrtb-tools-one-line{
  overflow:visible !important;
}

.mrtb-app.mrtb-harmony-native-mode .mrtb-tools-one-line{
  flex-wrap:wrap !important;
  min-width:0 !important;
}

/*
 * Στην Αρμονία τα δύο κλειδιά είναι ήδη σταθερά και το Chords
 * γίνεται αυτόματα 2+2. Τα κρύβουμε για να μη σπαταλούν χώρο.
 */
.mrtb-app.mrtb-harmony-native-mode [data-action="staff-treble"],
.mrtb-app.mrtb-harmony-native-mode [data-action="staff-bass"],
.mrtb-app.mrtb-harmony-native-mode [data-action="select-multi"]{
  display:none !important;
}

.mrtb-harmony-toolbar-group{
  display:inline-flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  min-width:0 !important;
  padding-left:6px !important;
  margin-left:2px !important;
  border-left:2px solid rgba(38,48,68,.13) !important;
}

.mrtb-harmony-toolbar-group .mrtb-harmony-correct-btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:92px !important;
  justify-content:center !important;
  border:2px solid #59a464 !important;
  background:linear-gradient(180deg,#f6fff7,#dcf4df) !important;
  color:#24652e !important;
  font-weight:950 !important;
}

.mrtb-harmony-toolbar-group .mrtb-harmony-correct-btn.active{
  background:linear-gradient(180deg,#e6f9e9,#c8edce) !important;
  box-shadow:
    inset 0 0 0 1px #4b9757,
    0 4px 10px rgba(50,120,65,.14) !important;
}

.mrtb-harmony-toolbar-group .mrtb-harmony-key-wrap{
  min-height:32px !important;
  padding:2px 5px !important;
}

.mrtb-harmony-toolbar-group .mrtb-harmony-key-wrap > span{
  display:none !important;
}

.mrtb-harmony-toolbar-group .mrtb-harmony-key-select{
  min-width:116px !important;
  max-width:140px !important;
  height:30px !important;
}


/* =========================================================
   v1.2.3 · ΕΚΤΑΣΕΙΣ SATB / EXTENDED LEDGER SPACE
   ========================================================= */

/*
 * Ο Κουρής δίνει:
 * S C4-A5, A G3-E5, T C3-A4, B E2-D4.
 * Το Φα χρειάζεται επιπλέον πάνω χώρο για τον Τενόρο μέχρι A4.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff{
  overflow:visible !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines{
  overflow:visible !important;
}

/* Τα ledgers δεν πρέπει να κόβονται από κανένα staff wrapper. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-ledgers{
  overflow:visible !important;
}


/* Range error μέσα στη Διόρθωση. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-harmony-error[data-harmony-error-types*="voice-range"]{
  filter:
    drop-shadow(0 0 5px rgba(220,65,75,.78))
    drop-shadow(0 0 9px rgba(220,65,75,.32));
}

@media (max-width:820px){
  .mrtb-harmony-toolbar-group{
    flex:1 1 100% !important;
    border-left:0 !important;
    border-top:1px solid rgba(38,48,68,.10) !important;
    margin-top:3px !important;
    padding:4px 0 0 !important;
  }

  .mrtb-harmony-toolbar-group .mrtb-harmony-correct-btn{
    flex:0 0 auto !important;
  }

  .mrtb-harmony-toolbar-group .mrtb-harmony-key-wrap{
    flex:1 1 118px !important;
  }

  .mrtb-harmony-toolbar-group .mrtb-harmony-key-select{
    width:100% !important;
    max-width:none !important;
  }
}


/* v1.2.4 · correction engine groups chords by visual X column.
   No additional layout dependency. */


/* =========================================================
   v1.3.0 · ΑΡΙΘΜΗΣΗ ΔΙΑΣΤΗΜΑΤΩΝ + ZOOM OUT
   ========================================================= */

.mrtb-harmony-intervals-btn.active{
  background:#fff5dc !important;
  border-color:#d69b28 !important;
  color:#8a5a00 !important;
  box-shadow:
    inset 0 0 0 1px #d69b28,
    0 4px 10px rgba(166,112,20,.12) !important;
}

.mrtb-harmony-zoom-wrap{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:32px !important;
  padding:2px 5px !important;
  border:1px solid rgba(39,64,87,.14) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.86) !important;
}

.mrtb-harmony-zoom-wrap > span{
  color:#5f7185 !important;
  font-size:9px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
}

.mrtb-harmony-zoom-select{
  min-width:76px !important;
  max-width:84px !important;
  height:30px !important;
  padding-inline:7px !important;
  font-weight:900 !important;
}

.mrtb-harmony-interval-layer{
  position:absolute;
  top:0;
  left:0;
  z-index:54 !important;
  overflow:visible;
  pointer-events:none;
}

.mrtb-harmony-interval-badge{
  pointer-events:none;
}

/* Zoom γίνεται μόνο στην board περιοχή, όχι στα επάνω εργαλεία. */
.mrtb-app.mrtb-harmony-native-mode [data-board]{
  transform-origin:0 0;
}

.mrtb-app.mrtb-harmony-native-mode .mrtb-board-wrap{
  overflow:auto !important;
}

@media (max-width:820px){
  .mrtb-harmony-zoom-wrap{
    flex:0 0 auto !important;
  }

  .mrtb-harmony-zoom-select{
    min-width:72px !important;
  }
}


/* v1.3.1
   SATB roles are normalized by visual vertical voice order.
   This prevents a high Tenor from being counted as Alto. */


/* =========================================================
   v1.3.2 · ΑΚΡΙΒΕΣ SNAP ΓΡΑΜΜΩΝ / ΔΙΑΣΤΗΜΑΤΩΝ
   ========================================================= */

/*
 * Το native mrtb-board.js δημιουργεί:
 * <div class="mrtb-ledgers"><span ...></span></div>
 * Κρατάμε ακριβώς το native span markup.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-ledgers span{
  display:block !important;
  position:absolute !important;
  left:16px !important;
  width:64px !important;
  height:3px !important;
  border:0 !important;
  border-radius:4px !important;
  background:rgba(20,25,40,.88) !important;
  opacity:1 !important;
}

/*
 * Η κεφαλή της native νότας έχει κέντρο πρακτικά στο
 * κέντρο του 96x96 note box. Δεν αλλάζουμε top/left της
 * κεφαλής στην Αρμονία — το JS ευθυγραμμίζει το note box
 * με το ακριβές half-step του staff.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-note-glyph{
  transform:none !important;
}


/* =========================================================
   v1.3.3 · FIX CLICK / DRAG + VISIBLE ZOOM
   ========================================================= */

/*
 * ΠΟΤΕ πραγματικό CSS zoom στο board.
 * Αυτό κρατάει click, drag, draw και note coordinates 1:1.
 */
.mrtb-app.mrtb-harmony-native-mode [data-board]{
  zoom:1 !important;
  transform:none !important;
}

/*
 * Τα staffs κάνουν μόνο VISUAL scale.
 * Το JS βάζει inline scale + width compensation.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff{
  transform-origin:0 0 !important;
  overflow:visible !important;
}

/*
 * Μικραίνουν και τα ορατά στοιχεία της νότας,
 * αλλά το 96x96 note box + hitbox μένουν κανονικά
 * για σωστό native drag.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-note-glyph{
  transform:
    scale(
      var(--mrtb-harmony-view-scale,1)
    )
    !important;

  transform-origin:
    50% 50%
    !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-note-caption,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-note-value{
  transform:
    scale(
      var(--mrtb-harmony-view-scale,1)
    );

  transform-origin:
    left center;
}

/*
 * Τονικότητα + Zoom πάνε στην επάνω μπάρα,
 * πριν από το κουμπί Παιχνίδι, ώστε να μην κρύβονται
 * όταν οι Αξίες πιάνουν όλο το πλάτος.
 */
.mrtb-harmony-top-controls{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
  padding:3px 5px !important;
  border:1px solid rgba(45,70,95,.14) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.74) !important;
}

.mrtb-harmony-top-key,
.mrtb-harmony-top-zoom{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin:0 !important;
}

.mrtb-harmony-top-key > span,
.mrtb-harmony-top-zoom > span{
  color:#5d7085 !important;
  font-size:9px !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}

.mrtb-harmony-top-key .mrtb-harmony-key-select{
  min-width:112px !important;
  max-width:132px !important;
  height:31px !important;
}

.mrtb-harmony-top-zoom .mrtb-harmony-zoom-select{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:76px !important;
  max-width:82px !important;
  height:31px !important;
  font-weight:950 !important;
}

/* Τα παλιά toolbar key/zoom wrappers δεν χρησιμοποιούνται πλέον. */
.mrtb-harmony-toolbar-group
.mrtb-harmony-key-wrap,
.mrtb-harmony-toolbar-group
.mrtb-harmony-zoom-wrap{
  display:none !important;
}

@media (max-width:980px){
  .mrtb-harmony-top-controls{
    order:20;
    width:100%;
    justify-content:flex-end;
  }
}

@media (max-width:600px){
  .mrtb-harmony-top-controls{
    justify-content:stretch;
  }

  .mrtb-harmony-top-key{
    flex:1 1 auto !important;
  }

  .mrtb-harmony-top-key .mrtb-harmony-key-select{
    width:100% !important;
    max-width:none !important;
  }
}


/* =========================================================
   v1.3.4 · ΔΙΟΡΘΩΣΗ / ΟΠΤΙΚΗ ΣΗΜΑΝΣΗ
   ========================================================= */

.mrtb-harmony-correction-layer{
  position:absolute;
  top:0;
  left:0;
  z-index:88 !important;
  overflow:visible;
  pointer-events:none;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-harmony-leading-source-note
.mrtb-note-head{
  outline:4px solid #e34a52 !important;
  outline-offset:4px !important;
  border-radius:999px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-issue-types*="parallel"],
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-issue-types*="antiparallel"],
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-issue-types*="hidden"]{
  filter:drop-shadow(0 0 6px rgba(227,74,82,.28));
}


/* =========================================================
   v1.3.5 · ΦΩΝΗ-LOCK / ΚΡΑΤΗΜΕΝΕΣ / ΡΥΘΜΙΚΑ ΜΕΤΡΑ
   ========================================================= */

.mrtb-harmony-legend{
  pointer-events:auto !important;
}

.mrtb-harmony-legend span{
  display:none !important;
}

.mrtb-harmony-legend button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:4px 9px;
  border:1px solid rgba(52,75,100,.14);
  border-radius:999px;
  background:rgba(255,255,255,.93);
  color:#33475c;
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(40,64,90,.07);
}

.mrtb-harmony-legend button i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--voice-color);
}

.mrtb-harmony-legend button.active{
  border:2px solid var(--voice-color,#447ca5);
  background:#fff;
  box-shadow:
    0 0 0 3px color-mix(
      in srgb,
      var(--voice-color,#447ca5) 14%,
      transparent
    ),
    0 5px 12px rgba(40,64,90,.10);
}

.mrtb-harmony-legend.voice-locked button:not(.active){
  opacity:.52;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-barline{
  display:none !important;
}

.mrtb-harmony-measure-layer{
  position:absolute;
  top:0;
  left:0;
  z-index:24 !important;
  overflow:visible;
  pointer-events:none;
}

.mrtb-harmony-measure-bar{
  stroke:#263044;
  stroke-width:1.6;
  opacity:.68;
  vector-effect:non-scaling-stroke;
}

.mrtb-harmony-arrow-layer path{
  vector-effect:non-scaling-stroke;
}


/* =========================================================
   v1.3.6 · ΡΥΘΜΙΚΗ ΑΓΩΓΗ + ΔΥΝΑΜΙΚΑ ΜΕΤΡΑ
   ========================================================= */

.mrtb-harmony-top-meter{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:32px !important;
  padding:2px 5px !important;
  border:1px solid rgba(39,64,87,.14) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.86) !important;
}

.mrtb-harmony-top-meter > span:first-child{
  color:#5f7185 !important;
  font-size:9px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.mrtb-harmony-meter-fields{
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
}

.mrtb-harmony-meter-fields input{
  width:42px !important;
  height:30px !important;
  border:1px solid rgba(39,64,87,.14) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#263044 !important;
  text-align:center !important;
  font:inherit !important;
  font-weight:950 !important;
  padding:0 4px !important;
}

.mrtb-harmony-meter-fields b{
  color:#263044 !important;
  font-size:14px !important;
  font-weight:1000 !important;
}

.mrtb-harmony-meter-fields select{
  width:54px !important;
  min-width:54px !important;
  height:30px !important;
  padding:2px 5px !important;
  font-weight:950 !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-wrap,
.mrtb-app.mrtb-harmony-native-mode
[data-board]{
  overflow-x:auto !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff{
  max-width:none !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-barline{
  display:none !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note .mrtb-note-glyph{
  min-width:62px !important;
}

@media (max-width:900px){
  .mrtb-harmony-top-meter{
    flex:0 0 auto !important;
  }

  .mrtb-harmony-top-meter > span:first-child{
    display:none !important;
  }
}


/* =========================================================
   v1.3.7 · VOICE LOCK BUTTON FIX
   ========================================================= */

.mrtb-harmony-legend button[data-harmony-voice-select].active{
  opacity:1 !important;
  transform:translateY(-1px) !important;
  border-width:2px !important;
}

.mrtb-harmony-legend.voice-locked
button[data-harmony-voice-select].active{
  filter:none !important;
}

.mrtb-harmony-legend.voice-locked
button[data-harmony-voice-select]:not(.active){
  opacity:.42 !important;
}


/* =========================================================
   v1.3.8 · BEAMS ΑΞΙΩΝ ΟΠΩΣ ΣΤΗ ΘΕΩΡΙΑ
   ========================================================= */

.mrtb-harmony-beam-layer{
  position:absolute;
  top:0;
  left:0;
  z-index:52 !important;
  overflow:visible;
  pointer-events:none;
}

.mrtb-harmony-beam-line{
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-beamed-note
.mrtb-flag{
  display:none !important;
}

/*
 * Οι stems μένουν στο χρώμα της κάθε φωνής και τα beams
 * σχεδιάζονται στο ίδιο χρώμα:
 * S μπλε · A πράσινο · T πορτοκαλί · B μωβ.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-beamed-note{
  z-index:56 !important;
}


/* =========================================================
   v1.3.9 · UNDO FIX + AUTO-FIT ΧΩΡΙΣ ΟΡΙΖΟΝΤΙΟ SCROLL
   ========================================================= */

/*
 * Η Αρμονία δεν χρησιμοποιεί horizontal scrollbar.
 * Όταν τα μέτρα γίνονται φαρδύτερα, ο ρυθμικός άξονας
 * και το grand staff κάνουν αυτόματο fit μέσα στο viewport.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-wrap,
.mrtb-app.mrtb-harmony-native-mode
[data-board]{
  overflow-x:hidden !important;
  max-width:100% !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff{
  right:auto !important;
  overflow:visible !important;
}

.mrtb-harmony-top-zoom
[data-harmony-fit-label]{
  display:inline-block;
  min-width:0;
  color:#7a8a9b;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
  line-height:1;
  margin-right:1px;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note{
  max-width:none !important;
}

/*
 * Undo/Redo restore γίνεται καθαρά:
 * οι native beams/selection remnants δεν πρέπει να μένουν από
 * προηγούμενη κατάσταση.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note:not(.mrtb-harmony-note){
  display:none !important;
}

/* MR Harmony v1.4.1 */


/* =========================================================
   v1.4.1 · ΒΑΘΜΙΔΕΣ / ΑΝΑΣΤΡΟΦΕΣ
   ========================================================= */

.mrtb-harmony-degrees-btn.active{
  background:#eef3ff !important;
  border-color:#6b78c9 !important;
  color:#36428c !important;
  box-shadow:
    inset 0 0 0 1px #6b78c9,
    0 4px 10px rgba(70,82,155,.12) !important;
}

.mrtb-harmony-degree-layer{
  position:absolute;
  inset:0;
  z-index:58 !important;
  overflow:visible;
  pointer-events:none;
}

.mrtb-harmony-degree-pill{
  fill:rgba(255,255,255,.96);
  stroke:#5f6f86;
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 3px 5px rgba(35,48,70,.10));
}

.mrtb-harmony-degree-text{
  fill:#263044;
  font-size:11px;
  font-weight:950;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* MR Harmony v1.4.2 */


/* =========================================================
   v1.4.2 · ΟΛΕΣ ΟΙ ΑΡΜΟΝΙΚΕΣ ΒΑΘΜΙΔΕΣ
   ========================================================= */

.mrtb-harmony-degree-pill{
  fill:rgba(255,255,255,.94);
}

.mrtb-harmony-degree-text{
  font-size:10.5px;
}

.mrtb-harmony-degree-badge{
  opacity:.98;
}

/* MR Harmony v1.4.3 */


/* =========================================================
   v1.4.3 · ΠΙΟ ΣΩΣΤΑ BEAMS / STEMS
   ========================================================= */

.mrtb-harmony-beam-line{
  shape-rendering:geometricPrecision;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

/* MR Harmony v1.4.4 */


/* =========================================================
   v1.4.4 · BEAMS / ERROR NUMBERS / AUTO FIX
   ========================================================= */

/*
 * Στις beamed νότες κρύβουμε το native stem.
 * Το Harmony SVG ζωγραφίζει πλέον ολόκληρο σωστό stem
 * από το notehead μέχρι το beam.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note.mrtb-beamed-note
.mrtb-stem{
  opacity:0 !important;
}

.mrtb-harmony-error-mark{
  min-width:22px !important;
  width:auto !important;
  padding:0 5px !important;
  font-size:9px !important;
  letter-spacing:-.02em;
}

.mrtb-harmony-correction-item{
  position:relative;
}

.mrtb-harmony-correction-item::after{
  content:"Διόρθωση";
  justify-self:end;
  margin-top:2px;
  padding:2px 6px;
  border-radius:999px;
  background:#ffe6e8;
  color:#a7373f;
  font-size:8px;
  font-weight:950;
}

.mrtb-harmony-correction-item:hover{
  background:#fff0f1;
  border-color:#e59aa0;
}

.mrtb-harmony-correction-item.mrtb-harmony-correction-fixing{
  opacity:.65;
  pointer-events:none;
}

/* MR Harmony v1.4.7 */


/* =========================================================
   v1.4.7 · 4 / 8 ΜΕΤΡΑ ΑΝΑ GRAND STAFF
   ========================================================= */

.mrtb-harmony-top-system{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:32px !important;
  padding:2px 5px !important;
  border:1px solid rgba(39,64,87,.14) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.86) !important;
}

.mrtb-harmony-top-system > span{
  color:#5f7185 !important;
  font-size:9px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.mrtb-harmony-top-system select{
  width:54px !important;
  min-width:54px !important;
  height:30px !important;
  padding:2px 5px !important;
  font-weight:950 !important;
}

.mrtb-harmony-staff-clone{
  pointer-events:auto !important;
}

.mrtb-harmony-brace-extra{
  pointer-events:none !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff{
  overflow:visible !important;
}

@media (max-width:900px){
  .mrtb-harmony-top-system > span{
    display:none !important;
  }

  .mrtb-harmony-top-system{
    flex:0 0 auto !important;
  }
}

/* MR Harmony v1.4.8 */


/* =========================================================
   v1.4.8 · SCROLL ΣΤΟ BOARD / DRAG ΠΑΝΩ ΣΤΗ ΝΟΤΑ
   ========================================================= */

/*
 * Σε κενό χώρο επιτρέπουμε κανονικά κάθετο scroll με touch.
 * Δεν επαναφέρουμε horizontal scroll.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-wrap,
.mrtb-app.mrtb-harmony-native-mode
[data-board]{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y !important;
}

/*
 * Αν το pointer ξεκινήσει ΠΑΝΩ σε νότα, η χειρονομία είναι drag.
 * Έτσι tablet/γραφίδα/δάχτυλο δεν κυλάνε την επιφάνεια ενώ
 * προσπαθούμε να μετακινήσουμε νότα.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note *{
  touch-action:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}

/*
 * Κατά τη διάρκεια note drag, κόβουμε προσωρινά το touch-pan
 * σε όλο το board μέχρι το pointerup/pointercancel.
 */
.mrtb-app.mrtb-harmony-native-mode.mrtb-harmony-note-dragging
[data-board]{
  touch-action:none !important;
  overscroll-behavior:none !important;
}

/* =========================================================
   v1.4.8 · ΑΞΙΕΣ ΜΕ ΕΝΕΡΓΟ VOICE LOCK
   ========================================================= */

/*
 * Τα value controls μένουν ενεργά/πατήσιμα ακόμα όταν έχει
 * κλειδωθεί Σοπράνο / Κοντράλτο / Τενόρος / Μπάσος.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-value-chip,
.mrtb-app.mrtb-harmony-native-mode
[data-value-dot-select]{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}


/* =========================================================
   v1.4.10 · SCROLL ΚΑΙ ΠΑΝΩ ΣΤΑ ΠΕΝΤΑΓΡΑΜΜΑ
   ========================================================= */

/*
 * Το vertical touch scroll πρέπει να ξεκινά ΟΠΟΥΔΗΠΟΤΕ
 * πάνω στην επιφάνεια: κενό, γραμμές πενταγράμμου,
 * κλειδί, μέτρο, brace area κτλ.
 *
 * Το touch-action δεν κληρονομείται απλά όπως ένα χρώμα:
 * ο browser εξετάζει και τους ancestors του touched element.
 * Γι' αυτό το δηλώνουμε ρητά σε όλη την αλυσίδα του staff.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff-lines,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff-lines *,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-clef,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-time-sig,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-time-sig *,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff-label,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-staff-hint{
  touch-action:pan-y !important;
}

/*
 * Εξαίρεση ΜΟΝΟ οι νότες:
 * pointer που ξεκινά πάνω στη νότα = μετακίνηση νότας,
 * όχι scroll.
 *
 * Το βάζουμε μετά από το staff override ώστε να κερδίζει
 * ακόμη κι αν η νότα βρίσκεται μέσα σε staff descendant.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-board-note,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff .mrtb-board-note *,
.mrtb-app.mrtb-harmony-native-mode
[data-board] > .mrtb-board-note,
.mrtb-app.mrtb-harmony-native-mode
[data-board] > .mrtb-board-note *{
  touch-action:none !important;
}

/*
 * Δεν θέλουμε τα decorative SVG overlays να αλλάζουν
 * το touch target του scroll.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-measure-layer,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-beam-layer,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-arrow-layer,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-interval-layer,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-degree-layer{
  pointer-events:none !important;
  touch-action:pan-y !important;
}

/* MR Harmony v1.4.12 */


/* =========================================================
   v1.4.12 · ΟΛΟΚΛΗΡΟ / ΜΙΣΟ = ΑΝΟΙΧΤΗ ΚΕΦΑΛΗ
   ========================================================= */

/*
 * Το core Theory Board δίνει:
 * whole -> .whole.open
 * half  -> .half.open
 *
 * Η Αρμονία κρατά το περίγραμμα στο χρώμα της φωνής,
 * αλλά το εσωτερικό είναι λευκό/κενό όπως στην κανονική γραφή.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-voice]
.mrtb-note-glyph.open
.mrtb-note-head{
  background:#fff !important;
  border-color:
    var(--harmony-voice-color)
    !important;
  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.92)
    !important;
}

/*
 * Ολόκληρο: χωρίς stem, όπως και στη Θεωρία.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-value="whole"]
.mrtb-stem,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-value="whole"]
.mrtb-flag{
  display:none !important;
}

/* =========================================================
   v1.4.12 · TOOLBAR ΠΑΝΤΑ CLICKABLE ΜΕ VOICE LOCK
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode
.mrtb-tools-one-line,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-top-actions,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-value-chip,
.mrtb-app.mrtb-harmony-native-mode
[data-action],
.mrtb-app.mrtb-harmony-native-mode
[data-value-dot-select]{
  pointer-events:auto !important;
}


/* =========================================================
   v1.5.0 · AI HANDWRITTEN HARMONY IMPORT
   ========================================================= */

.mrtb-harmony-ai-import-btn{
  background:
    linear-gradient(
      135deg,
      #fff6ce,
      #ffd86d
    ) !important;
  border-color:#e3b33c !important;
  color:#4a3510 !important;
  font-weight:950 !important;
  box-shadow:
    0 3px 10px
    rgba(176,124,13,.15) !important;
}

.mrtb-harmony-ai-import-btn:hover{
  transform:translateY(-1px);
}

body:has(.mrtb-harmony-ai-modal){
  overflow:hidden;
}

.mrtb-harmony-ai-modal{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  padding:
    max(14px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(14px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
}

.mrtb-harmony-ai-backdrop{
  position:absolute;
  inset:0;
  background:
    rgba(18,32,48,.48);
  backdrop-filter:
    blur(5px);
  -webkit-backdrop-filter:
    blur(5px);
}

.mrtb-harmony-ai-dialog{
  position:relative;
  width:min(760px,96vw);
  max-height:min(860px,92vh);
  overflow:auto;
  border:
    1px solid
    rgba(41,90,126,.20);
  border-radius:24px;
  background:
    linear-gradient(
      180deg,
      rgba(248,253,255,.99),
      rgba(237,249,255,.99)
    );
  box-shadow:
    0 30px 80px
    rgba(11,38,62,.30);
  color:#243349;
}

.mrtb-harmony-ai-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px 14px;
  border-bottom:
    1px solid
    rgba(41,90,126,.12);
}

.mrtb-harmony-ai-kicker{
  display:inline-flex;
  padding:4px 9px;
  margin-bottom:7px;
  border-radius:999px;
  background:#243349;
  color:#fff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
}

.mrtb-harmony-ai-header h3{
  margin:0;
  font-size:22px;
  line-height:1.05;
  font-weight:950;
}

.mrtb-harmony-ai-header p{
  max-width:610px;
  margin:8px 0 0;
  color:#63738a;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

.mrtb-harmony-ai-x{
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  border:
    1px solid
    rgba(35,55,75,.14);
  border-radius:12px;
  background:#fff;
  color:#526175;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
}

.mrtb-harmony-ai-body{
  padding:18px 22px;
}

.mrtb-harmony-ai-drop{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  min-height:280px;
  padding:12px;
  overflow:hidden;
  border:
    2px dashed
    rgba(47,128,237,.34);
  border-radius:20px;
  background:
    linear-gradient(
      135deg,
      rgba(236,248,255,.95),
      rgba(255,250,228,.82)
    );
  cursor:pointer;
}

.mrtb-harmony-ai-drop.is-dragover{
  border-color:#2f80ed;
  background:#e9f6ff;
}

.mrtb-harmony-ai-drop img{
  display:block;
  width:100%;
  max-height:430px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
}

.mrtb-harmony-ai-empty{
  display:grid;
  gap:7px;
  text-align:center;
  color:#33465e;
}

.mrtb-harmony-ai-empty b{
  font-size:15px;
  font-weight:950;
}

.mrtb-harmony-ai-empty small{
  color:#8491a3;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
}

.mrtb-harmony-ai-file-name{
  min-height:18px;
  margin-top:8px;
  color:#6f7d90;
  font-size:10px;
  font-weight:800;
  text-align:center;
}

.mrtb-harmony-ai-status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:13px;
  background:
    rgba(255,255,255,.76);
  border:
    1px solid
    rgba(45,77,106,.10);
  color:#627187;
  font-size:11px;
  font-weight:750;
  line-height:1.4;
}

.mrtb-harmony-ai-status[data-status="loading"]{
  border-color:
    rgba(47,128,237,.28);
  background:#eef7ff;
  color:#2766b2;
}

.mrtb-harmony-ai-status[data-status="success"]{
  border-color:
    rgba(22,156,120,.28);
  background:#edfdf7;
  color:#10765b;
}

.mrtb-harmony-ai-status[data-status="error"]{
  border-color:
    rgba(211,67,76,.28);
  background:#fff1f2;
  color:#aa3139;
}

.mrtb-harmony-ai-result{
  margin-top:13px;
}

.mrtb-harmony-ai-result-grid{
  display:grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap:8px;
}

.mrtb-harmony-ai-result-grid > div{
  min-width:0;
  padding:10px 8px;
  border-radius:13px;
  background:#fff;
  border:
    1px solid
    rgba(45,77,106,.10);
  text-align:center;
}

.mrtb-harmony-ai-result-grid span{
  display:block;
  margin-bottom:4px;
  color:#8592a2;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
}

.mrtb-harmony-ai-result-grid b{
  display:block;
  overflow:hidden;
  color:#28384e;
  font-size:12px;
  font-weight:950;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mrtb-harmony-ai-warnings,
.mrtb-harmony-ai-ok{
  margin-top:10px;
  padding:10px 12px;
  border-radius:13px;
  font-size:10px;
  font-weight:750;
  line-height:1.4;
}

.mrtb-harmony-ai-warnings{
  background:#fff9e6;
  border:
    1px solid
    rgba(211,164,40,.22);
  color:#735a16;
}

.mrtb-harmony-ai-warnings strong{
  display:block;
  margin-bottom:4px;
  font-weight:950;
}

.mrtb-harmony-ai-warnings ul{
  margin:0;
  padding-left:18px;
}

.mrtb-harmony-ai-ok{
  background:#edfdf7;
  border:
    1px solid
    rgba(22,156,120,.20);
  color:#14735a;
}

.mrtb-harmony-ai-footer{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:13px 22px 18px;
  border-top:
    1px solid
    rgba(41,90,126,.12);
  background:
    rgba(244,251,255,.96);
  backdrop-filter:
    blur(8px);
  -webkit-backdrop-filter:
    blur(8px);
}

.mrtb-harmony-ai-analyze{
  background:
    linear-gradient(
      135deg,
      #4957d7,
      #2f80ed
    ) !important;
  border-color:#2d66c7 !important;
  color:#fff !important;
}

.mrtb-harmony-ai-commit{
  background:
    linear-gradient(
      135deg,
      #40d99a,
      #20ad78
    ) !important;
  border-color:#188b61 !important;
  color:#082f22 !important;
  font-weight:950 !important;
}

.mrtb-harmony-ai-footer button:disabled{
  opacity:.42 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

.mrtb-harmony-ai-modal.is-loading
.mrtb-harmony-ai-drop{
  opacity:.72;
}

.mrtb-harmony-ai-note{
  /*
   * Δεν αλλάζουμε την εμφάνιση.
   * Η κλάση υπάρχει μόνο για μελλοντικό debug/selection.
   */
}

@media (max-width:700px){
  .mrtb-harmony-ai-modal{
    align-items:end;
    padding:8px;
  }

  .mrtb-harmony-ai-dialog{
    width:100%;
    max-height:94vh;
    border-radius:20px 20px 14px 14px;
  }

  .mrtb-harmony-ai-header{
    padding:16px 15px 11px;
  }

  .mrtb-harmony-ai-header h3{
    font-size:18px;
  }

  .mrtb-harmony-ai-body{
    padding:13px 15px;
  }

  .mrtb-harmony-ai-drop{
    min-height:210px;
  }

  .mrtb-harmony-ai-result-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .mrtb-harmony-ai-footer{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:10px 15px 14px;
  }

  .mrtb-harmony-ai-commit{
    grid-column:1 / -1;
  }
}


/* =========================================================
   v1.5.1 · HARMONY TOOLBAR CLEAN / NO HIDDEN CONTROLS
   ========================================================= */

/*
 * Στην Αρμονία έχουμε περισσότερα εργαλεία από τα άλλα chapters.
 * Η sidebar γίνεται καθαρό flex layout:
 * εργαλεία αριστερά, αξίες δεξιά.
 * Δεν κόβουμε ποτέ controls με overflow:hidden.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-sidebar{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  height:auto !important;
  min-height:64px !important;
  max-height:none !important;
  padding:5px 7px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-tools-section{
  display:flex !important;
  align-items:center !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  gap:4px !important;
  overflow:visible !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-values-section{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
  gap:3px !important;
  overflow:visible !important;
}

/*
 * Τα labels "ΕΡΓΑΛΕΙΑ / ΑΞΙΕΣ" τρώνε πολύ πλάτος.
 * Στην Αρμονία τα controls είναι αυτονόητα, οπότε τα κρύβουμε.
 */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-tools-section > .mrtb-panel-title,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-values-section > .mrtb-panel-title{
  display:none !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-tools-one-line{
  display:flex !important;
  align-items:center !important;
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-tools-one-line > .mrtb-btn,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-toolbar-group > .mrtb-btn{
  flex:0 0 auto !important;
  min-height:34px !important;
  padding:4px 7px !important;
  border-radius:10px !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-toolbar-group{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  min-width:0 !important;
  margin-left:2px !important;
  padding-left:5px !important;
}

/* μικρότερα harmony actions ώστε να χωρούν καθαρά */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-arrows-btn,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-intervals-btn,
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-degrees-btn{
  padding-inline:7px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-ai-import-btn{
  min-width:66px !important;
  padding-inline:8px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-correct-btn{
  min-width:78px !important;
  padding-inline:8px !important;
}

/* compact αξίες — ίδια οπτική λογική με το υπόλοιπο Theory Board */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-values-section
.mrtb-palette-grid{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  min-width:max-content !important;
  overflow:visible !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-value-chip{
  flex:0 0 43px !important;
  width:43px !important;
  min-width:43px !important;
  height:48px !important;
  min-height:48px !important;
  padding:2px !important;
  border-radius:11px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-value-chip small{
  max-width:39px !important;
  font-size:7px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-value-dot-palette{
  flex:0 0 auto !important;
  gap:2px !important;
  padding:2px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-value-dot-palette button{
  min-width:34px !important;
  padding-inline:5px !important;
}

/*
 * Αν η διαθέσιμη περιοχή πέσει κάτω από 1650px,
 * αντί να κρύψουμε controls τα βάζουμε σε δύο καθαρές σειρές.
 */
@media (max-width:1650px){
  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-sidebar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    min-height:112px !important;
  }

  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-tools-section,
  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-values-section{
    width:100% !important;
    justify-content:center !important;
  }

  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-tools-one-line{
    justify-content:center !important;
    flex-wrap:wrap !important;
  }

  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-values-section
  .mrtb-palette-grid{
    justify-content:center !important;
  }
}

@media (max-width:900px){
  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-sidebar{
    min-height:132px !important;
    padding:4px !important;
  }

  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-tools-one-line > .mrtb-btn,
  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-harmony-toolbar-group > .mrtb-btn{
    min-height:31px !important;
    padding:3px 5px !important;
    font-size:10px !important;
  }

  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-value-chip{
    flex-basis:39px !important;
    width:39px !important;
    min-width:39px !important;
    height:44px !important;
    min-height:44px !important;
  }
}

/* Το diagnostic modal πρέπει να ανοίγει ακόμη και αν λείπει PHP bridge. */
.mrtb-harmony-ai-modal.has-bridge-error
.mrtb-harmony-ai-dialog{
  box-shadow:
    0 30px 80px rgba(11,38,62,.30),
    0 0 0 3px rgba(210,71,80,.18);
}

/* =========================================================
   v1.5.2 · iPad NOTE HITBOX / APPLE PENCIL
   ΜΟΝΟ ΑΡΜΟΝΙΑ
   ========================================================= */

/*
 * Το shared Theory Board μεγαλώνει το touch hitbox πολύ κάθετα
 * στα mobile/tablet. Αυτό είναι σωστό για μονές νότες, αλλά στην
 * τετράφωνη Αρμονία τα hitboxes των S/A/T/B στην ίδια στήλη
 * μπορούν να επικαλύπτονται.
 *
 * Στο Harmony touch mode κρατάμε αρκετά μεγάλο στόχο για δάχτυλο
 * / Apple Pencil, αλλά τον περιορίζουμε γύρω από την κεφαλή.
 */
.mrtb-app.mrtb-harmony-native-mode.mrtb-harmony-touch-device
.mrtb-board-note[data-harmony-chord]
.mrtb-note-hitbox{
  left:23px !important;
  top:22px !important;
  width:58px !important;
  height:52px !important;
  z-index:120 !important;

  pointer-events:auto !important;
  touch-action:none !important;

  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;

  border-radius:999px !important;
}

/*
 * Το εξωτερικό 96x96 note box παραμένει μόνο για coordinates /
 * snap / beams. Το πραγματικό touch target είναι μόνο το hitbox.
 */
.mrtb-app.mrtb-harmony-native-mode.mrtb-harmony-touch-device
.mrtb-board-note[data-harmony-chord]{
  pointer-events:none !important;
}

/*
 * Όσο γίνεται drag, δεν αφήνουμε το page/board pan να κλέψει
 * το pointer από τη νότα.
 */
.mrtb-app.mrtb-harmony-native-mode.mrtb-harmony-touch-device
.mrtb-board-note[data-harmony-chord].dragging
.mrtb-note-hitbox{
  touch-action:none !important;
  cursor:grabbing !important;
}



/* =========================================================
   v1.5.4 · AI CROP + GIVEN VOICE + FULL STUDENT SOLUTION
   ΜΟΝΟ ΑΡΜΟΝΙΑ
   ========================================================= */

.mrtb-harmony-ai-crop-stage[hidden],
.mrtb-harmony-ai-crop-tools[hidden],
.mrtb-harmony-ai-crop-box[hidden],
.mrtb-harmony-ai-drop[hidden]{
  display:none !important;
}

.mrtb-harmony-ai-crop-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:220px;
  max-height:52vh;
  overflow:hidden;
  border:2px solid rgba(47,128,237,.24);
  border-radius:18px;
  background:
    repeating-conic-gradient(
      rgba(236,242,247,.95) 0 25%,
      rgba(250,252,254,.95) 0 50%
    ) 50% / 22px 22px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.mrtb-harmony-ai-crop-stage img{
  display:block;
  max-width:100%;
  max-height:52vh;
  width:auto;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

.mrtb-harmony-ai-crop-box{
  position:absolute;
  z-index:7;
  box-sizing:border-box;
  min-width:48px;
  min-height:48px;
  border:3px solid #ffd54f;
  border-radius:8px;
  box-shadow:
    0 0 0 9999px rgba(15,28,42,.48),
    inset 0 0 0 1px rgba(255,255,255,.86),
    0 4px 16px rgba(0,0,0,.22);
  cursor:move;
  touch-action:none !important;
}

.mrtb-harmony-ai-crop-box::before,
.mrtb-harmony-ai-crop-box::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.5;
}

.mrtb-harmony-ai-crop-box::before{
  top:33.333%;
  bottom:33.333%;
  left:0;
  right:0;
  border-top:1px solid rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.9);
}

.mrtb-harmony-ai-crop-box::after{
  left:33.333%;
  right:33.333%;
  top:0;
  bottom:0;
  border-left:1px solid rgba(255,255,255,.9);
  border-right:1px solid rgba(255,255,255,.9);
}

.mrtb-harmony-ai-crop-box > span{
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(20,32,45,.80);
  color:#fff;
  font-size:8px;
  font-weight:950;
  white-space:nowrap;
  pointer-events:none;
}

.mrtb-harmony-ai-crop-box > i{
  position:absolute;
  z-index:9;
  width:22px;
  height:22px;
  border:3px solid #fff;
  border-radius:999px;
  background:#ffd54f;
  box-shadow:0 2px 7px rgba(0,0,0,.28);
  touch-action:none !important;
}

.mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="nw"]{
  left:-12px;
  top:-12px;
  cursor:nwse-resize;
}

.mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="ne"]{
  right:-12px;
  top:-12px;
  cursor:nesw-resize;
}

.mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="sw"]{
  left:-12px;
  bottom:-12px;
  cursor:nesw-resize;
}

.mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="se"]{
  right:-12px;
  bottom:-12px;
  cursor:nwse-resize;
}

.mrtb-harmony-ai-crop-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
  padding:8px;
  border:1px solid rgba(45,77,106,.10);
  border-radius:13px;
  background:rgba(255,255,255,.74);
}

.mrtb-harmony-ai-crop-tools .mrtb-btn{
  min-height:32px !important;
  padding:5px 9px !important;
  font-size:10px !important;
}

.mrtb-harmony-ai-crop-tools small{
  flex:1 1 240px;
  color:#6d7c8f;
  font-size:9px;
  font-weight:750;
  line-height:1.35;
}

.mrtb-harmony-ai-options{
  display:grid;
  grid-template-columns:minmax(170px,.75fr) minmax(280px,1.25fr);
  gap:9px;
  margin-top:11px;
}

.mrtb-harmony-ai-option,
.mrtb-harmony-ai-solved-toggle{
  min-width:0;
  border:1px solid rgba(45,77,106,.12);
  border-radius:14px;
  background:#fff;
}

.mrtb-harmony-ai-option{
  display:grid;
  gap:5px;
  padding:9px 10px;
}

.mrtb-harmony-ai-option > span{
  color:#53667c;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mrtb-harmony-ai-option select{
  width:100%;
  height:36px;
  border:1px solid rgba(45,77,106,.16);
  border-radius:10px;
  background:#f8fbfd;
  color:#293b52;
  font:inherit;
  font-size:11px;
  font-weight:900;
  padding:5px 9px;
}

.mrtb-harmony-ai-solved-toggle{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 11px;
  cursor:pointer;
}

.mrtb-harmony-ai-solved-toggle input{
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin:1px 0 0;
  accent-color:#20ad78;
}

.mrtb-harmony-ai-solved-toggle > span{
  min-width:0;
  display:grid;
  gap:3px;
}

.mrtb-harmony-ai-solved-toggle b{
  color:#2c4057;
  font-size:11px;
  font-weight:950;
}

.mrtb-harmony-ai-solved-toggle small{
  color:#738297;
  font-size:9px;
  font-weight:750;
  line-height:1.35;
}

.mrtb-harmony-ai-solved-toggle:has(input:checked){
  border-color:rgba(22,156,120,.42);
  background:#eefbf6;
  box-shadow:inset 0 0 0 1px rgba(22,156,120,.16);
}

.mrtb-harmony-ai-modal.is-cropping
.mrtb-harmony-ai-dialog{
  user-select:none;
  -webkit-user-select:none;
}

@media (max-width:700px){
  .mrtb-harmony-ai-crop-stage{
    min-height:180px;
    max-height:48vh;
  }

  .mrtb-harmony-ai-crop-stage img{
    max-height:48vh;
  }

  .mrtb-harmony-ai-crop-box > i{
    width:26px;
    height:26px;
  }

  .mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="nw"]{
    left:-14px;
    top:-14px;
  }

  .mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="ne"]{
    right:-14px;
    top:-14px;
  }

  .mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="sw"]{
    left:-14px;
    bottom:-14px;
  }

  .mrtb-harmony-ai-crop-box > i[data-harmony-ai-crop-handle="se"]{
    right:-14px;
    bottom:-14px;
  }

  .mrtb-harmony-ai-options{
    grid-template-columns:1fr;
  }

  .mrtb-harmony-ai-crop-tools{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .mrtb-harmony-ai-crop-tools small{
    grid-column:1 / -1;
  }
}


/* =========================================================
   v1.5.5 · PROFESSIONAL AI REVIEW BEFORE IMPORT
   ========================================================= */

.mrtb-harmony-ai-review{
  display:grid;
  gap:12px;
  margin-top:12px;
  padding:13px;
  border:1px solid rgba(45,77,106,.13);
  border-radius:18px;
  background:linear-gradient(180deg,#fbfdff,#f5faff);
}

.mrtb-harmony-ai-review-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.mrtb-harmony-ai-review-title > div:first-child{
  min-width:0;
}

.mrtb-harmony-ai-review-title span{
  color:#708298;
  font-size:8px;
  font-weight:950;
  letter-spacing:.10em;
}

.mrtb-harmony-ai-review-title h4{
  margin:2px 0 0;
  color:#25384e;
  font-size:16px;
  font-weight:950;
}

.mrtb-harmony-ai-review-title p{
  margin:5px 0 0;
  color:#718197;
  font-size:10px;
  font-weight:750;
  line-height:1.4;
}

.mrtb-harmony-ai-review-score{
  flex:0 0 92px;
  display:grid;
  place-items:center;
  gap:1px;
  min-height:58px;
  padding:7px 9px;
  border:1px solid #bfd1df;
  border-radius:14px;
  background:#fff;
  text-align:center;
}

.mrtb-harmony-ai-review-score b{
  font-size:19px;
  font-weight:1000;
}

.mrtb-harmony-ai-review-score span{
  font-size:7px;
  letter-spacing:0;
}

.mrtb-harmony-ai-review-score.good,
.mrtb-harmony-ai-review-confidence .good{
  border-color:#a9d8c3;
  background:#effbf5;
  color:#177255;
}

.mrtb-harmony-ai-review-score.medium,
.mrtb-harmony-ai-review-confidence .medium{
  border-color:#ead291;
  background:#fff9e8;
  color:#806015;
}

.mrtb-harmony-ai-review-score.low,
.mrtb-harmony-ai-review-confidence .low{
  border-color:#efb4b8;
  background:#fff2f3;
  color:#a73840;
}

.mrtb-harmony-ai-review-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.mrtb-harmony-ai-review-facts > div,
.mrtb-harmony-ai-review-voices > div,
.mrtb-harmony-ai-review-confidence > div{
  min-width:0;
  padding:8px 9px;
  border:1px solid rgba(45,77,106,.10);
  border-radius:12px;
  background:#fff;
}

.mrtb-harmony-ai-review-facts span,
.mrtb-harmony-ai-review-voices span,
.mrtb-harmony-ai-review-confidence span{
  display:block;
  margin-bottom:3px;
  color:#8190a2;
  font-size:8px;
  font-weight:900;
  letter-spacing:.03em;
}

.mrtb-harmony-ai-review-facts b,
.mrtb-harmony-ai-review-voices b,
.mrtb-harmony-ai-review-confidence b{
  display:block;
  overflow:hidden;
  color:#2b3d52;
  font-size:11px;
  font-weight:950;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mrtb-harmony-ai-review-voices{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}

.mrtb-harmony-ai-review-voices > div{
  position:relative;
  border-top:3px solid #8295aa;
}

.mrtb-harmony-ai-review-voices > div[data-voice="soprano"]{border-top-color:#2f80ed}
.mrtb-harmony-ai-review-voices > div[data-voice="alto"]{border-top-color:#169c78}
.mrtb-harmony-ai-review-voices > div[data-voice="tenor"]{border-top-color:#ef8b2c}
.mrtb-harmony-ai-review-voices > div[data-voice="bass"]{border-top-color:#8e44ad}

.mrtb-harmony-ai-review-voices small{
  color:#8b98a8;
  font-size:7px;
  font-weight:800;
}

.mrtb-harmony-ai-review-confidence{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.mrtb-harmony-ai-review-confidence > div{
  text-align:center;
}

.mrtb-harmony-ai-review-edit{
  display:grid;
  gap:8px;
  padding:11px;
  border:1px solid #c9d9e5;
  border-radius:14px;
  background:#f3f9fd;
}

.mrtb-harmony-ai-review-edit > strong{
  color:#31475e;
  font-size:11px;
  font-weight:950;
}

.mrtb-harmony-ai-review-fields{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(150px,.75fr);
  gap:8px;
}

.mrtb-harmony-ai-review-fields label{
  display:grid;
  gap:4px;
}

.mrtb-harmony-ai-review-fields label > span{
  color:#718197;
  font-size:8px;
  font-weight:900;
}

.mrtb-harmony-ai-review-fields select,
.mrtb-harmony-ai-review-fields input{
  width:100%;
  min-height:34px;
  box-sizing:border-box;
  border:1px solid #c8d6e1;
  border-radius:9px;
  background:#fff;
  color:#25384e;
  font:inherit;
  font-size:10px;
  font-weight:900;
}

.mrtb-harmony-ai-review-fields label > div{
  display:grid;
  grid-template-columns:1fr 14px 1fr;
  align-items:center;
  gap:3px;
}

.mrtb-harmony-ai-review-fields label > div b{
  text-align:center;
  color:#53677c;
}

.mrtb-harmony-ai-review-edit > small{
  color:#718197;
  font-size:8px;
  font-weight:750;
  line-height:1.35;
}

.mrtb-harmony-ai-review-uncertain,
.mrtb-harmony-ai-review-warnings{
  overflow:hidden;
  border:1px solid rgba(45,77,106,.12);
  border-radius:13px;
  background:#fff;
}

.mrtb-harmony-ai-review-uncertain summary,
.mrtb-harmony-ai-review-warnings summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  cursor:pointer;
  color:#42566c;
  font-size:10px;
  font-weight:950;
  list-style:none;
}

.mrtb-harmony-ai-review-uncertain summary::-webkit-details-marker,
.mrtb-harmony-ai-review-warnings summary::-webkit-details-marker{
  display:none;
}

.mrtb-harmony-ai-review-uncertain summary b,
.mrtb-harmony-ai-review-warnings summary b{
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  background:#edf3f8;
  color:#4d6175;
  font-size:9px;
}

.mrtb-harmony-ai-note-review-list{
  display:grid;
  gap:5px;
  max-height:220px;
  overflow:auto;
  padding:0 8px 8px;
}

.mrtb-harmony-ai-note-review{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 8px;
  border:1px solid #e1e7ed;
  border-left:4px solid #d5a83c;
  border-radius:9px;
  background:#fffdf5;
}

.mrtb-harmony-ai-note-review.low{
  border-left-color:#db4d56;
  background:#fff4f5;
}

.mrtb-harmony-ai-note-review > div{
  min-width:0;
}

.mrtb-harmony-ai-note-review b,
.mrtb-harmony-ai-note-review span{
  display:block;
}

.mrtb-harmony-ai-note-review b{
  color:#394e64;
  font-size:9px;
  font-weight:950;
}

.mrtb-harmony-ai-note-review span{
  margin-top:2px;
  color:#728297;
  font-size:8px;
  font-weight:800;
}

.mrtb-harmony-ai-note-review > strong{
  flex:0 0 auto;
  font-size:10px;
  font-weight:1000;
}

.mrtb-harmony-ai-review-clear{
  padding:9px;
  border-radius:10px;
  background:#effaf4;
  color:#247052;
  font-size:9px;
  font-weight:900;
}

.mrtb-harmony-ai-review-warnings ul{
  margin:0;
  padding:0 24px 10px 28px;
  color:#6b5a2c;
  font-size:9px;
  font-weight:750;
  line-height:1.4;
}

.mrtb-harmony-ai-review-observations{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.mrtb-harmony-ai-review-observations span{
  padding:4px 7px;
  border-radius:999px;
  background:#edf5fa;
  color:#5b6f84;
  font-size:8px;
  font-weight:800;
  letter-spacing:0;
}

.mrtb-harmony-ai-review-alert{
  padding:9px 10px;
  border:1px solid #efb4b8;
  border-radius:11px;
  background:#fff1f2;
  color:#9d353c;
  font-size:9px;
  font-weight:850;
  line-height:1.4;
}

.mrtb-harmony-ai-review-confirm{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px;
  border:2px solid #9bcdb8;
  border-radius:13px;
  background:#effaf5;
  cursor:pointer;
}

.mrtb-harmony-ai-review-confirm input{
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:#169c78;
}

.mrtb-harmony-ai-review-confirm span{
  min-width:0;
}

.mrtb-harmony-ai-review-confirm b,
.mrtb-harmony-ai-review-confirm small{
  display:block;
}

.mrtb-harmony-ai-review-confirm b{
  color:#236b52;
  font-size:10px;
  font-weight:950;
}

.mrtb-harmony-ai-review-confirm small{
  margin-top:3px;
  color:#5f7d71;
  font-size:8px;
  font-weight:750;
  line-height:1.35;
}

.mrtb-harmony-ai-commit:disabled{
  filter:grayscale(.25);
}

@media (max-width:700px){
  .mrtb-harmony-ai-review{
    padding:10px;
  }

  .mrtb-harmony-ai-review-title{
    align-items:center;
  }

  .mrtb-harmony-ai-review-score{
    flex-basis:76px;
  }

  .mrtb-harmony-ai-review-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mrtb-harmony-ai-review-voices{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mrtb-harmony-ai-review-fields{
    grid-template-columns:1fr;
  }

  .mrtb-harmony-ai-review-confidence{
    grid-template-columns:1fr 1fr 1fr;
  }
}


/* =========================================================
   MR Harmony v1.6.0 · PROFESSIONAL TEACHER OMR / NOTATION
   ========================================================= */

/* Ο πραγματικός οπλισμός εμφανίζεται σε κάθε grand-staff system. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-key-signature{
  position:absolute;
  left:108px;
  top:70px;
  width:96px;
  height:140px;
  z-index:29;
  pointer-events:none;
  overflow:visible;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-key-signature > span{
  position:absolute;
  left:calc(var(--ks-index,0) * 13px);
  top:var(--ks-y,0px);
  transform:translateY(-52%);
  color:#1f2632;
  font-family:"Times New Roman","Noto Music",serif;
  font-size:27px;
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}

/* Explicit accidental semantics για AI-imported νότες. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-ai-note[data-harmony-written-accidental="none"]
.mrtb-accidental{
  display:none !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-ai-note
.mrtb-harmony-written-accidental{
  display:block !important;
  opacity:1 !important;
  font-weight:900 !important;
}

/* Professional review: τονική πορεία / μετατροπίες. */
.mrtb-harmony-ai-review-regions{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid rgba(65,91,122,.13);
  border-radius:14px;
  background:rgba(255,255,255,.82);
}

.mrtb-harmony-ai-review-regions > strong{
  display:block;
  margin-bottom:7px;
  color:#2d3f55;
  font-size:11px;
  font-weight:950;
}

.mrtb-harmony-ai-review-regions ul{
  display:grid;
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}

.mrtb-harmony-ai-review-regions li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px;
  border-radius:10px;
  background:#f5f8fb;
  color:#516278;
  font-size:9px;
  font-weight:800;
}

.mrtb-harmony-ai-review-regions li b{
  color:#293c52;
  font-weight:950;
  white-space:nowrap;
}

.mrtb-harmony-ai-review-regions > small{
  display:block;
  margin-top:7px;
  color:#7d8998;
  font-size:8px;
  font-weight:750;
  line-height:1.4;
}

@media (max-width:820px){
  .mrtb-app.mrtb-harmony-native-mode
  .mrtb-harmony-key-signature{
    left:104px;
  }

  .mrtb-harmony-ai-review-regions li{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   FINAL v1.7.0 · CANONICAL STAFF GEOMETRY LOCK
   ΜΟΝΟ ΑΡΜΟΝΙΑ

   Το shared Theory Board αλλάζει staff height / line spacing
   κάτω από responsive breakpoints. Στην Αρμονία αυτό δεν
   επιτρέπεται, γιατί η ίδια logical note πρέπει να παραμένει
   στην ίδια γραμμή/διάστημα σε resize/orientation.

   Κρατάμε ΕΝΑ canonical geometry και το JS μπορεί να κάνει
   visual scale ολόκληρου του staff χωρίς να αλλάζει το pitch grid.
   ========================================================= */

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff{
  height:360px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines{
  left:154px !important;
  right:38px !important;
  top:108px !important;
  height:168px !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines .mrtb-line:nth-child(1){ top:0 !important; }
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines .mrtb-line:nth-child(2){ top:42px !important; }
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines .mrtb-line:nth-child(3){ top:84px !important; }
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines .mrtb-line:nth-child(4){ top:126px !important; }
.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-staff-lines .mrtb-line:nth-child(5){ top:168px !important; }

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-clef{
  left:24px !important;
  top:78px !important;
  width:82px !important;
  font-size:118px !important;
  line-height:1 !important;
}

.mrtb-app.mrtb-harmony-native-mode
.mrtb-harmony-grand-staff
.mrtb-time-sig{
  left:108px !important;
  top:116px !important;
  font-size:54px !important;
  line-height:.82 !important;
}

/* Note box και hitbox παραμένουν στο canonical board coordinate system. */
.mrtb-app.mrtb-harmony-native-mode
.mrtb-board-note[data-harmony-chord]{
  width:96px !important;
  height:96px !important;
}