/* Piano Training Pro v402.13 — Theory modal real final
   Scope: only theory sidebar/modal + keyboard corner polish. No waterfall/cursor/mapping changes. */

.ptp-theory-entry-card-v40213{
  margin:10px 0 12px!important;
  padding:10px!important;
  border:1px solid rgba(34,211,238,.45)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(8,47,73,.86),rgba(5,18,36,.92))!important;
  display:grid!important;
  gap:8px!important;
}
.ptp-theory-entry-card-v40213 b{color:#eaffff!important;font-size:14px!important;line-height:1.25!important}
.ptp-theory-entry-card-v40213 small{color:#b9d5e6!important;line-height:1.35!important}
.ptp-theory-open-btn-v40213{
  width:100%!important;
  min-height:38px!important;
  border-radius:10px!important;
  color:#04131b!important;
  background:linear-gradient(180deg,#7ffcff,#22ddea 48%,#0896aa)!important;
  border:1px solid rgba(169,252,255,.78)!important;
  font-weight:900!important;
}
.ptp-theory-note-v40213{font-size:11px!important;color:#9fc2d6!important;line-height:1.32!important}

/* Hide the real React theory list from sidebar only while it is not opened.
   The DOM is not cloned or destroyed, so React click handlers keep working. */
.ptp-theory-source-v40213:not(.ptp-theory-modal-open-v40213){
  display:none!important;
}

/* Turn the real React theory node into a modal when opened. */
.ptp-theory-source-v40213.ptp-theory-modal-open-v40213{
  position:fixed!important;
  z-index:2147483000!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(1180px,88vw)!important;
  height:min(760px,84vh)!important;
  max-width:88vw!important;
  max-height:84vh!important;
  display:block!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  padding:72px 18px 18px!important;
  border:1px solid rgba(34,211,238,.75)!important;
  border-radius:16px!important;
  background:#071827!important;
  box-shadow:0 24px 90px rgba(0,0,0,.72),0 0 0 9999px rgba(0,0,0,.64)!important;
}
.ptp-theory-source-v40213.ptp-theory-modal-open-v40213::before{
  content:"📖 Lý thuyết piano";
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 20px!important;
  color:#ffe580!important;
  font-size:20px!important;
  font-weight:900!important;
  background:#092033!important;
  border-bottom:1px solid rgba(34,211,238,.42)!important;
  border-radius:16px 16px 0 0!important;
  box-sizing:border-box!important;
}
.ptp-theory-close-v40213{
  position:fixed!important;
  right:18px!important;
  top:12px!important;
  z-index:2147483001!important;
  min-width:68px!important;
  min-height:32px!important;
  border-radius:10px!important;
  background:linear-gradient(#4b5563,#1f2937)!important;
  border:1px solid rgba(251,191,36,.75)!important;
  color:#fff!important;
  font-weight:900!important;
}
.ptp-theory-source-v40213.ptp-theory-modal-open-v40213 .ptp-theory-close-v40213{display:block!important}
.ptp-theory-source-v40213:not(.ptp-theory-modal-open-v40213) .ptp-theory-close-v40213{display:none!important}

/* In modal, give the lesson list/content real reading room. */
.ptp-theory-source-v40213.ptp-theory-modal-open-v40213 .music-theory-lesson-v195,
.ptp-theory-source-v40213.ptp-theory-modal-open-v40213 .active-theory-lesson-v274{
  font-size:14px!important;
  line-height:1.42!important;
}
.ptp-theory-source-v40213.ptp-theory-modal-open-v40213 button{
  min-height:30px;
}

/* Keyboard polish only: no coordinate/layout/mapping changes. */
.keyboard-88 .piano-key,
.piano-keyboard .piano-key{
  border-radius:0!important;
}
.keyboard-88 .white-key:first-child,
.piano-keyboard .white-key:first-child{
  border-bottom-left-radius:8px!important;
}
.keyboard-88 .white-key:last-child,
.piano-keyboard .white-key:last-child{
  border-bottom-right-radius:8px!important;
}
.keyboard-88{
  height:104px!important;
}
.keyboard-88 .black-key{
  height:70px!important;
}
.ptp-v40213-badge{
  position:fixed;
  right:14px;
  bottom:10px;
  z-index:2147482999;
  font-size:11px;
  font-weight:900;
  color:#ffe580;
  background:#0a1626cc;
  border:1px solid rgba(251,191,36,.7);
  border-radius:999px;
  padding:4px 8px;
  pointer-events:none;
}