/* VYRO V7.7 Classroom Drawing Toolkit */
.chartCard.vyroClassroomReady{position:relative!important;}
.vyroClassroomBar{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:8px 0 10px;padding:9px 10px;border:1px solid rgba(45,212,255,.28);
  border-radius:14px;background:linear-gradient(180deg,rgba(6,22,37,.96),rgba(4,14,24,.96));
  box-shadow:0 12px 32px rgba(0,0,0,.28);font-family:Segoe UI,Arial,sans-serif;
}
.vyroClassroomBar b{font-size:12px;color:#7ee7ff;letter-spacing:.4px;margin-right:2px;white-space:nowrap}
.vyroClassroomBar button{
  border:1px solid rgba(70,195,255,.28);background:#071827;color:#dff8ff;border-radius:999px;
  height:30px;padding:0 10px;font-size:11px;font-weight:900;cursor:pointer;line-height:28px;
}
.vyroClassroomBar button.active{background:linear-gradient(180deg,#0b8fcb,#075a99);border-color:#68dcff;color:#fff;box-shadow:0 0 18px rgba(39,205,255,.22)}
.vyroClassroomBar button.danger{border-color:rgba(255,96,96,.45);color:#ffd1d1;background:rgba(80,15,20,.7)}
.vyroClassroomBar button.gold{border-color:rgba(255,215,120,.52);color:#ffe7a8;background:rgba(96,66,8,.55)}
.vyroClassroomHint{font-size:11px;color:#88a9b9;margin-left:auto;white-space:nowrap}
#chart.vyroDrawingHost{position:relative!important;}
.vyroDrawingCanvas{
  position:absolute;inset:0;z-index:38;pointer-events:none;touch-action:none;border-radius:12px;
}
.vyroDrawingCanvas.drawingOn{pointer-events:auto;cursor:crosshair;}
.vyroDrawingBadge{
  position:absolute;left:12px;bottom:12px;z-index:39;background:rgba(3,12,20,.82);border:1px solid rgba(80,210,255,.34);
  color:#c7f5ff;border-radius:12px;padding:6px 10px;font-size:11px;font-weight:800;pointer-events:none;backdrop-filter:blur(8px)
}
.vyroClassroomMiniPanel{
  display:none;position:absolute;right:14px;top:62px;z-index:55;width:min(360px,calc(100vw - 28px));
  padding:12px;border-radius:16px;border:1px solid rgba(77,213,255,.36);
  background:linear-gradient(180deg,rgba(5,18,30,.98),rgba(3,9,16,.98));box-shadow:0 22px 70px rgba(0,0,0,.55);
}
.vyroClassroomMiniPanel.show{display:block;}
.vyroClassroomMiniPanel h3{font-size:14px;color:#7ee7ff;margin:0 0 8px;}
.vyroClassroomMiniPanel p{font-size:12px;color:#a8c6d3;line-height:1.45;margin:6px 0;}
.vyroClassroomMiniPanel textarea,.vyroClassroomMiniPanel input{
  width:100%;background:#06121e;border:1px solid rgba(77,213,255,.24);color:#eaffff;border-radius:10px;padding:8px;margin:5px 0;font-size:12px;
}
.vyroClassroomMiniPanel .rowBtns{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px;}
.vyroClassroomMiniPanel .rowBtns button{border:0;border-radius:10px;background:#0c7cb8;color:#fff;font-weight:900;padding:9px;cursor:pointer;}
.vyroClassroomMiniPanel .rowBtns button.ghost{background:#13283a;color:#cdeeff;}
@media(max-width:720px){
  .vyroClassroomBar{gap:5px;padding:7px;margin:6px 0 8px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;}
  .vyroClassroomBar b{font-size:11px;min-width:max-content;}
  .vyroClassroomBar button{height:28px;padding:0 9px;font-size:10px;min-width:max-content;}
  .vyroClassroomHint{display:none;}
  .vyroDrawingBadge{font-size:10px;padding:5px 8px;left:8px;bottom:8px;}
}
body.vyroFullscreenChart .vyroClassroomBar{display:none!important;}
body.vyroFullscreenChart #chart .vyroClassroomBar{display:none!important;}