.pm_subtitle{


        margin-top:6px;


        font-size:0.95rem;


        color:rgba(15,23,42,0.68);


        font-weight:600;


      }





      .pm_overlay{


        position:fixed;


        inset:0;


        display:none;


        align-items:center;


        justify-content:center;


        background:rgba(0,0,0,0.50);


        z-index:10000;


      }





      .pm_card{


        width:min(980px, calc(100vw - 28px));


        max-height:min(86vh, 900px);


        overflow-y:auto;


        border-radius:18px;


        background:rgba(255,255,255,0.97);


        border:1px solid rgba(0,0,0,0.10);


        box-shadow:0 22px 70px rgba(0,0,0,0.30);


        padding:18px 18px 14px;


        font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;


        color:#0f172a;


      }





      .pm_header{


        display:flex;


        align-items:flex-start;


        justify-content:space-between;


        gap:12px;


      }





      .pm_title{


        margin:0;


        font-size:1.2rem;


        letter-spacing:-0.01em;


      }





      .pm_strip{


        margin-top:18px;


        display:flex;


        align-items:flex-end;


        justify-content:flex-start;


        gap:10px;


        flex-wrap:nowrap;


        width:100%;


        overflow-x:auto;


        overflow-y:hidden;


        padding:8px 4px 12px;


        scroll-behavior:smooth;


        -webkit-overflow-scrolling:touch;


        scrollbar-gutter:stable;


      }





      .pm_strip::-webkit-scrollbar{


        height:12px;


      }





      .pm_strip::-webkit-scrollbar-thumb{


        background:rgba(100,116,139,0.35);


        border-radius:999px;


      }





      .pm_strip::-webkit-scrollbar-track{


        background:transparent;


      }





      .pm_tile{


        flex:0 0 auto;


        border-radius:16px;


        border:1px solid rgba(0,0,0,0.10);


        padding:12px;


        display:flex;


        flex-direction:column;


        align-items:center;


        justify-content:flex-start;


        text-align:center;


        position:relative;


        box-sizing:border-box;


        cursor:pointer;


        transition:transform 0.15s ease, box-shadow 0.15s ease;


      }





      .pm_tile:hover{


        transform:translateY(-2px);


        box-shadow:0 8px 18px rgba(0,0,0,0.15);


      }





      .pm_tile_grey{
        background:rgba(148,163,184,0.18);
        cursor:not-allowed;
        opacity:0.6;
        pointer-events:none;
      }

      .pm_tile_green{ background:rgba(34,197,94,0.22); }
      .pm_tile_yellow{ background:rgba(250,204,21,0.28); }


      .pm_tile_red{ background:rgba(239,68,68,0.22); }

      .pm_tile_smartboard {
        background: rgba(226,232,240,0.75);
        opacity: 1;
        pointer-events: auto;
      }

      .pm_tile_smartboard.pm_tile_selected {
        background: rgba(219,234,254,0.95);
      }

      body.smartboard-mode .pm_tile_smartboard_complete,
      body.smartboard-mode .pm_tile_smartboard_complete.pm_tile_selected {
        background:rgba(187,247,208,0.88);
        border-color:rgba(22,163,74,0.48);
      }

      body.smartboard-mode .pm_smartboardCompleteMark {
        position:absolute;
        top:10px;
        right:12px;
        display:grid;
        place-items:center;
        width:32px;
        height:32px;
        border-radius:50%;
        color:#fff;
        background:#16a34a;
        font-size:1.25rem;
        font-weight:900;
        box-shadow:0 4px 10px rgba(22,101,52,0.24);
      }

      body.smartboard-mode .pm_overlay{
        padding:clamp(18px, 3vw, 48px);
      }

      body.smartboard-mode .pm_card{
        width:min(1500px, calc(100vw - 56px));
        height:min(90vh, 980px);
        max-height:none;
        overflow:hidden;
        display:grid;
        grid-template-rows:auto minmax(0, 1fr) auto;
        padding:clamp(22px, 2.3vw, 34px);
      }

      body.smartboard-mode .pm_title{
        font-size:clamp(1.45rem, 2vw, 2rem);
      }

      body.smartboard-mode .pm_subtitle{
        font-size:clamp(1rem, 1.3vw, 1.25rem);
      }

      body.smartboard-mode .pm_strip{
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
        align-items:stretch;
        align-content:start;
        gap:clamp(12px, 1.4vw, 22px);
        overflow-x:hidden;
        overflow-y:auto;
        min-height:0;
        margin-top:20px;
        padding:8px 12px 18px 4px;
        scrollbar-gutter:stable;
      }

      body.smartboard-mode .pm_strip::-webkit-scrollbar{
        width:14px;
        height:14px;
      }

      body.smartboard-mode .pm_tile_standard{
        width:auto;
        height:320px;
        padding:18px 14px 16px;
      }

      body.smartboard-mode .pm_setnum{
        top:12px;
        left:12px;
        padding:6px 10px;
        font-size:0.9rem;
      }

      body.smartboard-mode .pm_icon,
      body.smartboard-mode .pm_tile_standard .pm_icon{
        margin-top:34px;
        margin-bottom:10px;
        font-size:clamp(3.25rem, 3.6vw, 4.5rem);
      }

      body.smartboard-mode .pm_set{
        padding:0 8px;
        font-size:clamp(1.08rem, 1.25vw, 1.35rem);
        line-height:1.16;
        white-space:normal;
        overflow-wrap:anywhere;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }

      body.smartboard-mode .pm_actions{
        flex:0 0 auto;
        padding-top:16px;
        border-top:1px solid rgba(15,23,42,0.10);
        background:rgba(255,255,255,0.96);
      }

      body.smartboard-mode .pm_btn{
        min-height:54px;
        padding:12px 22px;
        font-size:1.05rem;
      }



      .pm_tile_standard{


          width:200px;


          height:280px;


        }





      .pm_tile_selected{


          border:2px solid rgba(139,92,246,0.9);


          box-shadow:


            0 0 0 3px rgba(139,92,246,0.25),


            0 10px 24px rgba(139,92,246,0.18);


        


          transform:translateY(-2px);


        }





      .pm_setnum{


        position:absolute;


        top:10px;


        left:10px;


        font-size:0.76rem;


        font-weight:800;


        letter-spacing:0.02em;


        color:rgba(15,23,42,0.65);


        background:rgba(255,255,255,0.85);


        border:1px solid rgba(0,0,0,0.08);


        border-radius:999px;


        padding:4px 8px;


      }



      .pm_statusIcon{

        position:absolute;

        top:9px;

        right:9px;

        width:36px !important;

        height:36px !important;

        object-fit:contain;

        display:block;

        z-index:2;

        filter:drop-shadow(0 1px 2px rgba(15,23,42,0.22));

        pointer-events:none;

      }






      .pm_tile_current .pm_setnum{


        background:rgba(139,92,246,0.14);


        border-color:rgba(139,92,246,0.30);


        color:rgba(109,40,217,0.95);


      }





      .pm_icon{


        line-height:1;


        margin-top:34px;
      }





      .pm_tile_standard .pm_icon,


        .pm_tile_current .pm_icon{


          font-size:2.35rem;
          margin-bottom:5px;
        }





      .pm_set{


          display:block;


          width:100%;


          min-width:0;


          flex:0 0 auto;


        


          padding:0 6px;


          box-sizing:border-box;


        


          font-weight:900;


          font-size:0.98rem;


          line-height:1.15;


          color:#0f172a;


        


          white-space:nowrap;


          overflow:hidden;


          text-overflow:ellipsis;


        }








      .pm_meta{


          margin-top:6px;


          font-size:0.82rem;


          color:rgba(15,23,42,0.72);


          font-weight:700;


        }





      .pm_tile_current .pm_meta{


        color:rgba(88,28,135,0.96);


        font-weight:900;


      }





      .pm_health{


        width:100%;


        margin-top:10px;


      }





      .pm_healthTrack{


        width:100%;


        height:8px;


        border-radius:999px;


        background:rgba(255,255,255,0.45);


        border:1px solid rgba(0,0,0,0.08);


        overflow:hidden;


      }





      .pm_healthFill{


        height:100%;


        border-radius:999px;


        transition:width 180ms ease;


      }





      .pm_actions{


          display:flex;


          gap:10px;


          flex-wrap:wrap;


          justify-content:space-between;


          align-items:center;


        }


        


        .pm_btn_primary{


          margin-left:auto;


        }





      .pm_btn{


        padding:10px 14px;


        border-radius:999px;


        border:1px solid rgba(0,0,0,0.14);


        background:rgba(255,255,255,0.78);


        cursor:pointer;


        font-weight:700;


      }





      .pm_btn_primary{


        border-color:rgba(37,99,235,0.35);


        background:rgba(37,99,235,0.12);


      }





      @media (max-width: 900px){


          .pm_tile_standard{


            width:184px;


            height:264px;


          }


        }


        


        @media (max-width: 700px){


          .pm_tile_standard{


            width:176px;


            height:256px;


          }


        }

/* Give the lesson artwork enough room to read at a glance. */
.pm_tile_standard .pm_icon {
  width:148px;
  height:148px;
  flex:0 0 auto;
  margin-bottom:8px;
}
.pm_setImage {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}
.pm_tile_standard .pm_set {
  min-height:2.3em;
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
body.smartboard-mode .pm_tile_standard .pm_icon {
  width:160px;
  height:160px;
}
@media (max-width:900px) {
  .pm_tile_standard .pm_icon { width:132px; height:132px; }
}
@media (max-width:700px) {
  .pm_tile_standard .pm_icon { width:124px; height:124px; }
}