.sm_overlay {


        position: fixed;


        inset: 0;


        display: none;


        align-items: center;


        justify-content: center;


        padding: 12px;


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


        z-index: 9999;


        overflow-y: auto;


        -webkit-overflow-scrolling: touch;


      }





      .sm_card {


        width: min(720px, calc(100vw - 24px));


        max-height: calc(100dvh - 24px);


        display: flex;


        flex-direction: column;


        border-radius: 16px;


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


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


        box-shadow: 0 20px 60px rgba(0,0,0,0.25);


        padding: 18px 18px 14px;


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


        color: #0f172a;


        -webkit-overflow-scrolling: touch;


      }





      .sm_header {


        display:flex;


        align-items:center;


        justify-content:space-between;


        gap:12px;


        flex: 0 0 auto;


      }





      .sm_title {


        margin: 0;


        font-size: 1.15rem;


      }





      .sm_hint {
        margin: 8px 0 12px;


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


        font-size: 0.95rem;


        flex: 0 0 auto;


      }

      .sm_activityChoices {
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        padding: 10px 0 6px;
      }

      .sm_activityCard {
        min-height: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px 20px;
        border: 1px solid rgba(15,23,42,0.12);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(239,246,255,0.86));
        color: #0f172a;
        text-align: center;
        box-shadow: 0 12px 28px rgba(15,23,42,0.10);
        cursor: pointer;
        transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
      }

      .sm_activityCard--translation {
        background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(240,253,244,0.88));
      }

      .sm_activityCard:hover,
      .sm_activityCard:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(37,99,235,0.42);
        box-shadow: 0 17px 34px rgba(15,23,42,0.15);
        outline: none;
      }

      .sm_activityCard:disabled {
        opacity: 0.62;
        cursor: wait;
        transform: none;
      }

      .sm_activityIcon {
        width: 112px;
        height: 112px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(37,99,235,0.10);
      }

      .sm_activityCard--translation .sm_activityIcon {
        background: rgba(22,163,74,0.11);
      }

      .sm_activityIcon svg {
        width: 82px;
        height: 82px;
        overflow: visible;
        fill: rgba(37,99,235,0.13);
        stroke: #2563eb;
        stroke-width: 5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .sm_activityCard--translation .sm_activityIcon svg {
        fill: rgba(22,163,74,0.10);
        stroke: #15803d;
      }

      .sm_activityIcon .sm_activityWave,
      .sm_activityIcon .sm_activityGlyph {
        fill: none;
      }

      .sm_activityText {
        display: grid;
        gap: 7px;
      }

      .sm_activityText strong {
        font-size: 1.35rem;
      }

      .sm_activityText small {
        color: rgba(15,23,42,0.68);
        font-size: 0.94rem;
        line-height: 1.35;
      }

      @media (max-width: 560px) {
        .sm_activityChoices { grid-template-columns: 1fr; }
        .sm_activityCard {
          min-height: 150px;
          flex-direction: row;
          justify-content: flex-start;
          text-align: left;
        }
        .sm_activityIcon {
          width: 88px;
          height: 88px;
          flex: 0 0 88px;
        }
        .sm_activityIcon svg { width: 64px; height: 64px; }
      }



      .sm_listwrap {

        flex: 1 1 auto;

        min-height: 0;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        padding-right: 2px;

      }



      .sm_favourites {

        flex: 1 1 auto;

        min-height: 0;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        padding-right: 2px;

      }



      .sm_favouritesList {

        display: grid;

        gap: 10px;

        margin-bottom: 12px;

      }



      .sm_favouriteItem {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: stretch;
      }

      .sm_favouriteItem--readonly {
        grid-template-columns: minmax(0, 1fr);
      }


      .sm_favouriteMain {

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 4px;

        padding: 13px 14px;

        border-radius: 12px;

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

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

        text-align: left;

        box-shadow: 0 10px 18px rgba(0,0,0,0.08);

      }



      .sm_favouriteName {

        max-width: 100%;

        overflow-wrap: anywhere;

        color: #0f172a;

        font-weight: 720;

      }



      .sm_favouriteMeta {

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

        font-size: 0.88rem;

      }



      .sm_favouriteProgress {

        width: 100%;

        display: grid;

        gap: 6px;

      }



      .sm_favouriteProgressTrack {

        width: 100%;

        height: 8px;

        border-radius: 999px;

        overflow: hidden;

        background: rgba(15,23,42,0.10);

        box-shadow: inset 0 0 0 1px rgba(15,23,42,0.05);

      }



      .sm_favouriteProgressFill {

        display: block;

        height: 100%;

        border-radius: inherit;

        background: linear-gradient(90deg, rgba(37,99,235,0.74), rgba(22,163,74,0.74));

      }



      .sm_favouriteRemove {

        align-self: stretch;

        padding: 10px 12px;

        border-radius: 12px;

        border: 1px solid rgba(185,28,28,0.16);

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

        color: #991b1b;

        box-shadow: 0 10px 18px rgba(0,0,0,0.06);

      }



      .sm_favouritesEmpty {

        padding: 16px;

        border-radius: 12px;

        border: 1px dashed rgba(0,0,0,0.12);

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

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

        text-align: center;

      }




      .sm_searchwrap {


        margin: 0 0 12px;


      }





      .sm_search {


        width: 100%;


        padding: 11px 13px;


        border-radius: 12px;


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


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


        color: #0f172a;


        font: inherit;


        box-sizing: border-box;


      }





      .sm_search:focus {


        outline: none;


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


        box-shadow: 0 0 0 4px rgba(59,130,246,0.18);


      }





      .sm_searchmeta {


        margin-top: 8px;


        font-size: 0.9rem;


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


      }





      .sm_empty {


        display:none;


        padding: 14px;


        border-radius: 12px;


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


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


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


        text-align: center;


        margin-bottom: 14px;


      }





      .sm_grid {


        display: grid;


        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));


        gap: 10px;


        margin-bottom: 14px;


      }





      .sm_item {


        display:flex;


        align-items:center;


        gap:10px;


        padding: 10px 10px;


        border-radius: 12px;


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


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


      }





      .sm_item input {


        transform: scale(1.15);


      }





      .sm_langname {


        font-weight: 650;


      }





      .sm_actions {


        position: sticky;


        bottom: 0;


        z-index: 2;


        display:flex;


        gap:10px;


        flex-wrap:wrap;


        justify-content:space-between;


        align-items:center;


        margin-top: 10px;


        padding-top: 12px;


        background: linear-gradient(


          to top,


          rgba(255,255,255,0.98),


          rgba(255,255,255,0.92)


        );


        border-top: 1px solid rgba(0,0,0,0.06);


        flex: 0 0 auto;


      }





      .sm_btn {


        padding: 10px 14px;


        border-radius: 999px;


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


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


        cursor: pointer;


        box-shadow: 0 10px 18px rgba(0,0,0,0.08);


        transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;


      }





      .sm_btn:hover {


        transform: translateY(-1px);


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


        box-shadow: 0 14px 22px rgba(0,0,0,0.11);


      }





      .sm_btn_primary {


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


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


      }





      .sm_error {


        margin-top: 10px;


        color: #b91c1c;


        font-weight: 650;


        display:none;


        flex: 0 0 auto;


      }





      .sm_kbdhint {


        font-size: 0.9rem;


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


        margin-bottom: 10px;


      }





      .sm_quickwrap {


        margin: 0 0 12px;


      }





      .sm_quicksummary {


        cursor: pointer;


        user-select: none;


        font-weight: 650;


        margin-bottom: 8px;


      }





      .sm_quickpicks {


        display: flex;


        flex-wrap: wrap;


        gap: 8px;


        padding-top: 10px;


      }





      .sm_chip {


        padding: 8px 12px;


        border-radius: 999px;


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


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


        cursor: pointer;


      }





      .sm_accountOverlay {


        position: absolute;


        inset: 0;


        display: none;


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


        align-items: center;


        justify-content: center;


        z-index: 10;


      }





      .sm_accountWindow {


        width: 90%;


        height: 85%;


        background: white;


        border-radius: 12px;


        overflow: hidden;


        display: flex;


        flex-direction: column;


      }





      .sm_accountBar {


        display:flex;


        justify-content:space-between;


        padding:10px;


        border-bottom:1px solid #ddd;


      }





      .sm_accountFrame {


        flex:1;


        border:0;


      }





      @media (max-width: 600px) {


        .sm_overlay {


          align-items: flex-start;


          justify-content: center;


          padding: 8px;


        }





        .sm_card {


          width: 100%;


          max-height: calc(100dvh - 16px);


          margin: 0;


          padding: 14px 14px 12px;


          border-radius: 14px;


        }





        .sm_grid {


          grid-template-columns: 1fr;


        }





        .sm_actions {


          margin-left: -14px;


          margin-right: -14px;


          margin-bottom: -12px;


          padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));


          backdrop-filter: blur(8px);


          -webkit-backdrop-filter: blur(8px);


          box-shadow: 0 -8px 20px rgba(0,0,0,0.06);


        }





        .sm_actions > div:first-child {

          display: flex;

          gap: 10px;

          flex-wrap: wrap;

        }



        .sm_favouriteItem {

          grid-template-columns: 1fr;

        }



        .sm_btn {

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

        }





        .sm_btn_primary {


          margin-left: auto;


        }


      }


body.smartboard-mode .sm_activityChoices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm_activityCard--cloze { background: linear-gradient(145deg, #fff, #fff7df); }
@media (max-width: 620px) { body.smartboard-mode .sm_activityChoices { grid-template-columns: 1fr; } }
/* Difficulty progression: numbered steps with an increasing three-bar meter. */
.sm_activityChoices .sm_activityCard {
  --tier-color: #166534;
  --tier-tint: #edf9ef;
  min-width: 0;
  border-top: 5px solid var(--tier-color);
  background: linear-gradient(160deg, #fff 15%, var(--tier-tint));
  padding: 18px 14px 24px;
  justify-content: flex-start;
  gap: 18px;
}
.sm_activityChoices .sm_activityCard--dictation { --tier-color: #975a08; --tier-tint: #fff5db; }
.sm_activityChoices .sm_activityCard--translation { --tier-color: #a33327; --tier-tint: #fcebe6; }
.sm_tierBadge { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--tier-color); font-size: 0.95rem; font-weight: 750; }
.sm_difficultyBars { display: flex; align-items: flex-end; gap: 4px; height: 24px; }
.sm_difficultyBars span { width: 7px; height: 8px; border: 1px solid currentColor; border-radius: 2px; opacity: 0.3; }
.sm_difficultyBars span:nth-child(2) { height: 16px; }
.sm_difficultyBars span:nth-child(3) { height: 24px; }
.sm_difficultyBars .isFilled { background: currentColor; opacity: 1; }
.sm_activityChoices .sm_activityIcon { background: var(--tier-tint); width: 88px; height: 88px; }
.sm_activityChoices .sm_activityIcon svg { stroke: var(--tier-color); fill: none; width: 64px; height: 64px; }
.sm_activityChoices .sm_activityText strong { font-size: 1.2rem; }
.sm_activityChoices .sm_activityCard:focus-visible { outline: 3px solid var(--tier-color); outline-offset: 3px; }
@media (max-width: 620px) {
  .sm_activityChoices, body.smartboard-mode .sm_activityChoices { grid-template-columns: 1fr; }
  .sm_activityChoices .sm_activityCard { display: grid; grid-template-columns: 64px 1fr; text-align: left; min-height: 0; gap: 12px 16px; padding: 16px; }
  .sm_tierBadge { grid-column: 1 / -1; }
  .sm_activityChoices .sm_activityIcon { width: 64px; height: 64px; }
  .sm_activityChoices .sm_activityIcon svg { width: 48px; height: 48px; }
}
/* Keep difficulty in a single left-to-right sequence at every width. */
.sm_activityChoices,
body.smartboard-mode .sm_activityChoices {
  direction: ltr;
  grid-template-columns: repeat(3, minmax(175px, 1fr));
  gap: 28px;
  overflow-x: auto;
  padding: 8px 6px 18px;
  scroll-snap-type: x proximity;
}
.sm_activityChoices .sm_activityCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 270px;
  padding: 18px 12px;
  gap: 18px;
  text-align: center;
  border-top: 5px solid var(--tier-color);
  scroll-snap-align: start;
}
.sm_activityChoices .sm_activityCard:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -27px;
  top: 50%;
  transform: translateY(-50%);
  color: #475569;
  font: bold 24px/28px system-ui, sans-serif;
  pointer-events: none;
}
.sm_activityChoices .sm_tierBadge {
  grid-column: auto;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
}
.sm_activityChoices .sm_activityIcon { display: grid; width: 72px; height: 72px; flex: 0 0 72px; }
.sm_activityChoices .sm_activityIcon svg { width: 52px; height: 52px; }

/* Phone chooser: three compact rows, with vertical scrolling on short screens. */
@media (max-width: 768px) {
  .sm_overlay { padding: 8px; align-items: flex-start; }
  .sm_card { box-sizing: border-box; width: 100%; min-width: 0; max-height: calc(100dvh - 16px); padding: 14px; }
  .sm_activityChoices,
  body.smartboard-mode .sm_activityChoices {
    grid-template-columns: minmax(0, 1fr); gap: 12px;
    min-height: 0; overflow-x: hidden; overflow-y: auto;
    padding: 4px 4px 8px; scroll-snap-type: none;
  }
  .sm_activityChoices .sm_activityCard {
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto; align-items: center;
    min-height: 0; padding: 12px; gap: 8px 12px; text-align: left;
    border-top-width: 4px; border-radius: 14px;
  }
  .sm_activityChoices .sm_tierBadge {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 8px; font-size: 1rem;
  }
  .sm_activityChoices .sm_activityIcon { width: 56px; height: 56px; }
  .sm_activityChoices .sm_activityIcon svg { width: 40px; height: 40px; }
  .sm_activityChoices .sm_activityText { min-width: 0; gap: 4px; }
  .sm_activityChoices .sm_activityText strong { font-size: 1.05rem; }
  .sm_activityChoices .sm_activityText small { font-size: .85rem; line-height: 1.35; }
  .sm_activityChoices .sm_activityCard:not(:last-child)::after { content: none; }
}

/* Paper-cutout activity artwork, with difficulty encoded in each image. */
.sm_activityChoices .sm_activityArtwork {
  display: block;
  width: 100%;
  aspect-ratio: 630 / 606;
  object-fit: cover;
  border-radius: 12px;
}
.sm_activityChoices .sm_difficultyBars { display: none; }
@media (max-width: 768px) {
  .sm_activityChoices .sm_activityCard { grid-template-columns: 96px minmax(0, 1fr); }
  .sm_activityChoices .sm_activityArtwork { width: 96px; }
}