/* [next]/internal/font/google/tinos_fd9dbf27.module.css [app-client] (css) */
@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2af636fcd4b10462-s.40qpv4tx4gndv.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/c073cc877a03a4fb-s.26tlvjt05ai1u.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/32f87401cfa6a153-s.29296ajbrq6iu.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/7e29bf11b81884b2-s.3-7q6n62letby.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/131ddda75a211be7-s.1l1oi58xqsbm-.woff2") format("woff2");
  unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/b703c845af9f64c4-s.22d_qn61c6ona.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/3ab7fd2111294830-s.392jqw8lun02c.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/9e721575c9fb5733-s.p.40ogco1z117vy.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/952786c4d225c6db-s.2y68e2au8-6a6.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/cdf2d07d87c952f1-s.3zxa7or_2fx07.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/b63e24d142e6d28c-s.11ii5e3kpwzqf.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/9f6e899c03d37d66-s.0hiheoow6ff-a.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/1d5d14e92fec5cfc-s.0vla1mnxzr7xw.woff2") format("woff2");
  unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/0a4448e67e21f293-s.29mb2ekh0k9zu.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/a40e0a8fb4d63911-s.3mfe1o21-prkq.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Tinos;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../media/9dd4508f3c7f32bd-s.p.0tkidh707wgmr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/7bc6a4f209cdeda2-s.33k1xnz_doo95.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/769e602a918c0e6b-s.36kbynztppqzc.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/f1014f9e39bbf3ce-s.2og6zftwdpp5n.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/f6bf16d33c98ea66-s.0yb2n816hrm83.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/859b3a486ef0b31c-s.0e-d2rw5th4on.woff2") format("woff2");
  unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/a9fdcec7c8900265-s.1mcvei9pykwyg.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/0314c17e5eabe198-s.2_48riwq5k1tr.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/b6993172ae5d8694-s.p.2yk4qfuofiic3.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/0ceaf9b48a4a68de-s.0r1heoj83v3bg.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/aa50794dbbe16eac-s.43boo4gq5vhet.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/927eae1892169a04-s.2j-48pduyg5je.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/d4fa676c648eee63-s.1kvv51iuj5li0.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/cf239ca55f7f61e9-s.3i_vi_sy7imwh.woff2") format("woff2");
  unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/69ba8191fbb63917-s.1igtuzzfw2d-3.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/1455159a24144568-s.1e8ti_3rub-fh.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Tinos;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../media/f0bd9438cd939e22-s.p.09hbj2qs2d6mm.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Tinos Fallback;
  src: local(Times New Roman);
  ascent-override: 89.11%;
  descent-override: 21.63%;
  line-gap-override: 4.25%;
  size-adjust: 100.0%;
}

.tinos_fd9dbf27-module__Ikg2Fq__className {
  font-family: Tinos, Tinos Fallback;
}

.tinos_fd9dbf27-module__Ikg2Fq__variable {
  --font-tinos: "Tinos", "Tinos Fallback";
}

/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

:root {
  --ink: #17223b;
  --muted: #64708a;
  --paper: #f6f7fb;
  --surface: #fff;
  --line: #e6e9f0;
  --brand: #6256d9;
  --brand-dark: #4539b5;
  --coral: #ff705d;
  --mint: #43c7a1;
  --gold: #f4ba49;
  --shadow: 0 18px 50px #1b244214;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  font-family: "Times New Roman", var(--font-tinos), Tinos, Times, serif;
}

body {
  color: var(--ink);
  background: radial-gradient(circle at 88% 2%, #6256d914, transparent 30rem),
    var(--paper);
  font-family: "Times New Roman", var(--font-tinos), Tinos, Times, serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.learner-preference-boundary {
  min-height: 100dvh;
}

html[data-high-contrast="true"], .learner-preference-boundary[data-high-contrast="true"] {
  --ink: #080b12;
  --muted: #343b4a;
  --paper: #fff;
  --surface: #fff;
  --line: #4c5360;
  --brand: #3526bd;
  --brand-dark: #20158a;
  --shadow: 0 0 0 2px #4c5360;
}

html[data-high-contrast="true"] .muted, .learner-preference-boundary[data-high-contrast="true"] .muted {
  color: #343b4a;
}

html[data-high-contrast="true"] :focus-visible, .learner-preference-boundary[data-high-contrast="true"] :focus-visible {
  outline-width: 4px;
  outline-color: #004fd6;
}

a {
  color: inherit;
  text-decoration: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea, optgroup, option {
  font: inherit;
}

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}

math {
  font-family: math;
}

:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #2d73e8;
}

.shell {
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100dvh;
  display: grid;
}

.sidebar {
  border-right: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 10;
  background: #ffffffd1;
  height: 100dvh;
  padding: 28px 22px;
  position: sticky;
  top: 0;
}

.brand {
  letter-spacing: -.04em;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  font-weight: 850;
  display: flex;
}

.brand-mark {
  color: #fff;
  background: linear-gradient(135deg, #7568ec, #4f43bd);
  border-radius: 13px;
  place-items: center;
  width: 39px;
  height: 39px;
  display: grid;
  box-shadow: 0 10px 24px #6256d94d;
}

.side-nav {
  gap: 8px;
  margin-top: 42px;
  display: grid;
}

.nav-link {
  min-height: 48px;
  color: var(--muted);
  border-radius: 14px;
  align-items: center;
  gap: 13px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.nav-link:hover, .nav-link[aria-current="page"] {
  color: var(--brand-dark);
  background: #eeecff;
}

.side-goal {
  color: #fff;
  box-shadow: var(--shadow);
  background: linear-gradient(150deg, #29255d, #5047a8);
  border-radius: 21px;
  padding: 18px;
  position: absolute;
  inset: auto 22px 26px;
}

.side-goal small {
  color: #c7c3f7;
}

.main {
  min-width: 0;
  padding: 26px clamp(22px, 4vw, 64px) 70px;
}

.topbar {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  display: flex;
}

.eyebrow {
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.top-actions {
  align-items: center;
  gap: 10px;
  display: flex;
  position: relative;
}

.icon-button, .profile-button {
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  border-radius: 14px;
  min-width: 44px;
  min-height: 44px;
}

.icon-button {
  place-items: center;
  display: grid;
}

.profile-button {
  align-items: center;
  gap: 8px;
  padding: 4px 7px 4px 5px;
  font-weight: 800;
  display: flex;
}

.avatar {
  color: #433b8d;
  background: #dedaff;
  border-radius: 12px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-weight: 900;
  display: grid;
}

.profile-summary {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #eeecff, var(--surface));
  border-radius: 25px;
  align-items: center;
  gap: 22px;
  margin: 28px 0 20px;
  padding: clamp(20px, 4vw, 34px);
  display: flex;
}

.profile-summary h2 {
  margin: 5px 0 4px;
  font-size: clamp(24px, 4vw, 36px);
}

.profile-avatar-large {
  color: #342b85;
  background: #dcd8ff;
  border: 2px solid #b8b1ff;
  border-radius: 25px;
  flex: none;
  place-items: center;
  width: 84px;
  height: 84px;
  font-size: 25px;
  font-weight: 900;
  display: grid;
}

.profile-detail-grid {
  align-items: stretch;
}

.profile-detail-grid .card, .settings-card {
  flex-direction: column;
  gap: 13px;
  display: flex;
}

.profile-facts {
  gap: 2px;
  margin: 0;
  display: grid;
}

.profile-facts > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  display: flex;
}

.profile-facts dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.profile-facts dd {
  text-align: right;
  margin: 0;
  font-weight: 800;
}

.profile-subject-list {
  gap: 8px;
  display: grid;
}

.profile-subject-list a {
  border: 1px solid var(--line);
  border-radius: 14px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
}

.profile-subject-list span {
  gap: 3px;
  display: grid;
}

.profile-subject-list small {
  color: var(--muted);
}

.protected-card {
  border-style: dashed;
}

.protected-card .eyebrow {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.settings-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: start;
  gap: 20px;
  margin-top: 28px;
  display: grid;
}

.settings-list {
  gap: 2px;
  display: grid;
}

.settings-row {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  padding: 12px 2px;
  display: flex;
}

.settings-row > span:first-child {
  gap: 4px;
  display: grid;
}

.settings-row small {
  max-width: 540px;
  color: var(--muted);
  line-height: 1.45;
}

.settings-row input[role="switch"] {
  appearance: none;
  cursor: pointer;
  background: #d8dce5;
  border: 2px solid #737b8e;
  border-radius: 999px;
  flex: none;
  width: 52px;
  height: 30px;
  transition: background .14s;
}

.settings-row input[role="switch"]:before {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin: 2px;
  transition: transform .14s;
  display: block;
  box-shadow: 0 1px 4px #0000004d;
}

.settings-row input[role="switch"]:checked {
  border-color: var(--brand-dark);
  background: var(--brand);
}

.settings-row input[role="switch"]:checked:before {
  transform: translateX(22px);
}

.settings-row input[role="switch"]:disabled {
  cursor: wait;
  opacity: .6;
}

.settings-row.locked {
  cursor: not-allowed;
}

.settings-status {
  min-height: 20px;
  color: var(--brand-dark);
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] :before, html[data-reduced-motion="true"] :after, .learner-preference-boundary[data-reduced-motion="true"] *, .learner-preference-boundary[data-reduced-motion="true"] :before, .learner-preference-boundary[data-reduced-motion="true"] :after {
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}

.profile-menu {
  top: calc(100% + 8px);
  border: 1px solid var(--line);
  z-index: 30;
  background: #fff;
  border-radius: 18px;
  width: 260px;
  padding: 10px;
  position: absolute;
  inset-inline-end: 0;
  box-shadow: 0 24px 70px #1e25442e;
}

.profile-choice {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 8px;
  display: flex;
}

.profile-choice:hover {
  background: var(--paper);
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  align-items: start;
  gap: 26px;
  display: grid;
}

.hero {
  color: #fff;
  background: linear-gradient(135deg, #6256d9 0%, #5549c6 55%, #3f359e 100%);
  border-radius: 30px;
  min-height: 286px;
  padding: clamp(26px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px #493daf38;
}

.hero:after {
  content: "";
  border: 48px solid #ffffff1a;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  bottom: -95px;
  right: -45px;
}

.hero h1 {
  letter-spacing: -.055em;
  max-width: 620px;
  margin: 12px 0 8px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
}

.hero p {
  color: #dddafe;
  max-width: 510px;
  line-height: 1.7;
}

.primary-button, .secondary-button {
  cursor: pointer;
  border: 0;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  font-weight: 850;
  display: inline-flex;
}

.primary-button {
  color: #332c78;
  background: #fff;
  box-shadow: 0 10px 26px #1e186333;
}

.secondary-button {
  color: var(--brand-dark);
  background: #eeecff;
}

.stats-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
  display: grid;
}

.stat-card, .card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #ffffffe8;
}

.stat-card {
  border-radius: 20px;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 19px;
  display: flex;
}

.stat-icon {
  border-radius: 15px;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
}

.stat-card strong {
  letter-spacing: -.04em;
  font-size: 22px;
  display: block;
}

.stat-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.section-heading {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 30px 0 14px;
  display: flex;
}

.section-heading h2 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: 21px;
}

.section-heading a {
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.module-card {
  border-radius: 22px;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  display: grid;
}

.module-icon {
  color: #d9553d;
  background: #fff1e9;
  border-radius: 17px;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid;
}

.module-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.module-card p, .muted {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
}

.subject-catalogue-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  display: grid;
}

.subject-catalogue-grid .module-card {
  min-width: 0;
}

.subject-progress-card {
  margin-top: 24px;
}

.subject-progress-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
  display: flex;
}

.subject-progress-heading h2, .subject-progress-heading p {
  margin: 0;
}

.progress-track {
  background: #eceef4;
  border-radius: 99px;
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, var(--brand), #8c80f6);
  border-radius: inherit;
  height: 100%;
}

.right-stack {
  gap: 18px;
  display: grid;
}

.card {
  border-radius: 24px;
  padding: 22px;
}

.card h2, .card h3 {
  letter-spacing: -.035em;
  margin-top: 0;
}

.goal-ring {
  background: conic-gradient(var(--mint) 0 50%, #e9eef1 50% 100%);
  border-radius: 50%;
  place-items: center;
  width: 126px;
  height: 126px;
  margin: 18px auto;
  display: grid;
}

.goal-ring:before {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 98px;
  height: 98px;
  position: absolute;
}

.goal-ring strong {
  font-size: 26px;
  position: relative;
}

.activity {
  border-top: 1px solid var(--line);
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  font-size: 13px;
  display: grid;
}

.activity:first-of-type {
  border-top: 0;
}

.activity-dot {
  color: #29997c;
  background: #eef8f5;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.mobile-nav {
  display: none;
}

.page-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.page-title {
  letter-spacing: -.055em;
  margin: 34px 0 8px;
  font-size: clamp(32px, 5vw, 50px);
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
  display: grid;
}

.metric {
  border-radius: 22px;
  padding: 22px;
}

.metric strong {
  margin-top: 12px;
  font-size: 30px;
  display: block;
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  display: grid;
}

.feature-card {
  min-height: 210px;
}

.chip {
  min-height: 28px;
  color: var(--brand-dark);
  background: #eeecff;
  border-radius: 99px;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.calendar {
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  display: grid;
}

.day {
  aspect-ratio: 1;
  background: #f0f2f7;
  border-radius: 12px;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.day.done {
  color: #176b56;
  background: #dff7ef;
}

.leader-row {
  border-top: 1px solid var(--line);
  grid-template-columns: 32px 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  display: grid;
}

.exercise-stage {
  background: linear-gradient(145deg, #1e1b45, #3f358c);
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  display: grid;
}

.exercise-panel {
  background: #fff;
  border-radius: 30px;
  width: min(920px, 100%);
  padding: clamp(24px, 5vw, 50px);
  box-shadow: 0 30px 90px #08062359;
}

.answer-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 28px 0;
  display: grid;
}

.answer {
  border: 2px solid var(--line);
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 17px;
  min-height: 72px;
  padding: 16px;
  font-weight: 800;
}

.answer.selected {
  border-color: var(--brand);
  background: #f2f0ff;
}

.answer.correct {
  border-color: var(--mint);
  background: #eafaf5;
}

.answer.incorrect {
  border-color: var(--coral);
  background: #fff0ed;
}

.listening-panel {
  width: min(880px, 100%);
}

.listening-player {
  background: linear-gradient(135deg, #f5f3ff, #eefaff);
  border: 2px solid #dcd8ff;
  border-radius: 24px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 26px 0 8px;
  padding: 20px;
  display: grid;
}

.listening-play-button {
  color: #fff;
  background: var(--brand);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 66px;
  height: 66px;
  display: grid;
  box-shadow: 0 12px 28px #6256d947;
}

.listening-play-button:disabled {
  cursor: default;
  opacity: .58;
}

.listening-player > div {
  gap: 4px;
  display: grid;
}

.listening-player > div span {
  color: #646b80;
  font-size: 14px;
}

.listening-wave {
  align-items: center;
  gap: 5px;
  height: 42px;
  display: flex;
}

.listening-wave i {
  background: #8f85e8;
  border-radius: 999px;
  width: 5px;
  height: 14px;
}

.listening-wave i:nth-child(2), .listening-wave i:nth-child(4) {
  height: 28px;
}

.listening-wave i:nth-child(3) {
  height: 40px;
}

.listening-player.is-playing .listening-wave i {
  animation: .65s ease-in-out infinite alternate listening-wave;
}

.listening-player.is-playing .listening-wave i:nth-child(2) {
  animation-delay: .1s;
}

.listening-player.is-playing .listening-wave i:nth-child(3) {
  animation-delay: .2s;
}

@keyframes listening-wave {
  to {
    transform: scaleY(.38);
  }
}

@media (max-width: 640px) {
  .listening-stage {
    place-items: start center;
    padding: 10px;
  }

  .listening-panel {
    border-radius: 22px;
    padding: 20px;
  }

  .listening-player {
    grid-template-columns: auto 1fr;
  }

  .listening-wave {
    display: none;
  }
}

.matching-panel {
  width: min(1120px, 100%);
  padding: clamp(22px, 3vw, 38px);
}

.matching-workspace {
  grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px;
  margin: 24px 0;
  display: grid;
}

.matching-workspace h2 {
  color: #5c6680;
  letter-spacing: .02em;
  margin: 0 0 12px;
  font-size: 14px;
}

.matching-words {
  gap: 10px;
  display: grid;
}

.matching-word {
  border: 2px solid var(--line);
  color: #25213f;
  min-height: 58px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-weight: 850;
  transition: transform .14s, border-color .14s, background .14s;
  display: flex;
}

.matching-word:hover:not(:disabled), .matching-word.selected {
  background: #f2f0ff;
  border-color: #6256d9;
  transform: translateY(-2px);
}

.matching-word.matched {
  background: #edfaf6;
  border-color: #7bcdb4;
}

.matching-word.selected.matched {
  background: #f2f0ff;
  border-color: #6256d9;
}

.matching-picture-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.matching-picture {
  border: 2px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 18px;
  min-width: 0;
  padding: 8px;
  transition: transform .14s, border-color .14s, box-shadow .14s;
  overflow: hidden;
}

.matching-picture:hover:not(:disabled) {
  border-color: #6256d9;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px #3c328226;
}

.matching-picture.matched {
  border-color: #29a37a;
}

.matching-picture:disabled {
  cursor: default;
}

.matching-picture img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: clamp(110px, 18vw, 170px);
  display: block;
}

.matching-picture > span {
  color: #5c6680;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 4px 2px;
  font-size: 13px;
  font-weight: 850;
  display: flex;
}

@media (max-width: 760px) {
  .matching-stage {
    place-items: start center;
    padding: 10px;
  }

  .matching-workspace {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .matching-words {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .matching-word {
    min-height: 50px;
    padding: 9px 10px;
    font-size: 13px;
  }

  .matching-picture-grid {
    gap: 8px;
  }

  .matching-picture {
    padding: 5px;
  }

  .matching-picture img {
    height: clamp(88px, 26vw, 130px);
  }
}

.cms-locations-page {
  gap: 22px;
  display: grid;
}

.cms-workspace-tabs, .cms-location-toolbar, .cms-row-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.cms-workspace-tabs {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 8px;
}

.cms-workspace-tabs button {
  min-height: 44px;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 11px;
  padding: 9px 14px;
}

.cms-workspace-tabs button[aria-current="page"] {
  color: #fff;
  background: var(--purple);
}

.cms-location-toolbar {
  margin-block-end: 18px;
}

.cms-location-toolbar .search-field {
  flex: 260px;
}

.cms-location-toolbar select {
  min-height: 44px;
}

.cms-location-list {
  gap: 10px;
  display: grid;
}

.cms-analytics-filters {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin-block-end: 18px;
  display: grid;
}

.cms-analytics-filters .search-field {
  grid-column: span 2;
}

.cms-account-filters {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: 10px;
  margin-block: 12px 18px;
  display: grid;
}

.cms-payment-filters {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin-block: 14px 18px;
  display: grid;
}

.cms-payment-filters select {
  min-width: 0;
  min-height: 44px;
}

.cms-payment-filters .search-field {
  grid-column: span 2;
}

.cms-account-filters select, .cms-analytics-filters select {
  min-width: 0;
  min-height: 44px;
}

.cms-location-row {
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  display: grid;
}

.cms-location-row > div:first-child {
  gap: 4px;
  display: grid;
}

.cms-location-row small {
  color: var(--muted);
}

.cms-location-import {
  gap: 16px;
  margin-block-start: 20px;
  display: grid;
}

.cms-location-import textarea {
  direction: ltr;
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.cms-location-import .cms-error {
  max-height: 300px;
  overflow: auto;
}

.cms-switch-control {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.cms-switch-control input {
  width: 42px;
  height: 24px;
}

.leaderboard-scope-grid {
  gap: 18px;
  margin-block-start: 18px;
  display: grid;
}

.leaderboard-scope {
  border-block-start: 1px solid var(--border);
  padding-block-start: 16px;
}

.leaderboard-scope:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

@media (max-width: 850px) {
  .cms-analytics-filters, .cms-account-filters, .cms-payment-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cms-payment-filters .search-field, .cms-analytics-filters .search-field {
    grid-column: 1 / -1;
  }

  .cms-location-row {
    grid-template-columns: 1fr auto;
  }

  .cms-location-row .cms-row-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .cms-analytics-filters, .cms-account-filters, .cms-payment-filters {
    grid-template-columns: 1fr;
  }

  .cms-payment-filters .search-field, .cms-analytics-filters .search-field {
    grid-column: auto;
  }

  .cms-location-row {
    grid-template-columns: 1fr;
  }

  .cms-location-row .cms-row-actions {
    grid-column: auto;
  }
}

.sentence-order-panel {
  width: min(1040px, 100%);
  padding: clamp(22px, 4vw, 42px);
}

.sentence-builder, .sentence-bank {
  margin-top: 22px;
}

.sentence-builder-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.sentence-builder h2, .sentence-bank h2 {
  color: #5c6680;
  margin: 0 0 10px;
  font-size: 14px;
}

.sentence-reset {
  color: #5c6680;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}

.sentence-line {
  background: #f8f9fc;
  border: 2px dashed #bbc3d3;
  border-radius: 20px;
  flex-wrap: wrap;
  align-content: center;
  gap: 10px;
  min-height: 112px;
  padding: 16px;
  display: flex;
}

.sentence-line.correct {
  background: #edfaf6;
  border-style: solid;
  border-color: #29a37a;
}

.sentence-line.incorrect {
  background: #fff3f0;
  border-style: solid;
  border-color: #ee6c5c;
}

.sentence-placeholder {
  color: #808aa0;
  margin: auto;
  font-weight: 700;
}

.sentence-token {
  color: #332d66;
  background: #fff;
  border: 2px solid #c9c4ef;
  border-radius: 15px;
  align-items: center;
  gap: 5px;
  min-height: 52px;
  padding: 6px;
  display: inline-flex;
  box-shadow: 0 5px 14px #382e7614;
}

.sentence-token > svg {
  color: #9289c8;
}

.sentence-token-word {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 7px 5px;
  font-weight: 850;
}

.sentence-token-controls {
  gap: 3px;
  display: flex;
}

.sentence-token-controls button {
  color: #5147a8;
  cursor: pointer;
  background: #eeeafd;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.sentence-token-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.sentence-bank > div {
  background: #eeeafd;
  border-radius: 18px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 12px;
  display: flex;
}

.sentence-bank > div > button {
  color: #332d66;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 2px solid #0000;
  border-radius: 13px;
  padding: 9px 16px;
  font-weight: 850;
  transition: transform .14s, border-color .14s;
  box-shadow: 0 5px 12px #382e7617;
}

.sentence-bank > div > button:hover:not(:disabled) {
  border-color: #6256d9;
  transform: translateY(-2px);
}

.sentence-bank > div > span {
  color: #6d658d;
  margin: auto;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 680px) {
  .sentence-order-stage {
    place-items: start center;
    padding: 10px;
  }

  .sentence-line {
    gap: 7px;
    min-height: 96px;
    padding: 10px;
  }

  .sentence-token {
    min-height: 46px;
  }

  .sentence-token-controls button {
    width: 25px;
    height: 25px;
  }

  .sentence-bank > div > button {
    padding: 8px 12px;
  }
}

.fill-blank-panel {
  width: min(980px, 100%);
}

.fill-blank-sentence {
  background: #faf9ff;
  border: 2px solid #d9d5f2;
  border-radius: 24px;
  margin: 30px 0 14px;
  padding: clamp(22px, 4vw, 38px);
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 780;
  line-height: 2.05;
}

.fill-blank-sentence.correct {
  background: #edfaf6;
  border-color: #29a37a;
}

.fill-blank-sentence.incorrect {
  background: #fff3f0;
  border-color: #ee6c5c;
}

.fill-blank-segment {
  display: inline;
}

.fill-blank-segment label {
  margin: 0 7px;
  display: inline-block;
}

.fill-blank-segment select {
  color: #332d66;
  min-width: 150px;
  font: inherit;
  cursor: pointer;
  background: #eeeafd;
  border: 0;
  border-bottom: 3px solid #6256d9;
  border-radius: 10px 10px 4px 4px;
  padding: 8px 34px 8px 12px;
  font-size: .72em;
  font-weight: 850;
}

.fill-blank-segment select:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #6256d952;
}

.fill-blank-tools {
  color: #6f7890;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 750;
  display: flex;
}

.fill-blank-tools button {
  color: #5147a8;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-weight: 800;
  display: inline-flex;
}

@media (max-width: 620px) {
  .fill-blank-stage {
    place-items: start center;
    padding: 10px;
  }

  .fill-blank-sentence {
    padding: 18px;
    font-size: 21px;
    line-height: 2.35;
  }

  .fill-blank-segment select {
    min-width: 122px;
  }
}

.exercise-wallpaper {
  background: radial-gradient(circle at 15% 20%, #ffffff8c, #0000 22%), radial-gradient(circle at 85% 75%, #ffffff59, #0000 24%), linear-gradient(135deg, #dfeaff, #ede8ff 55%, #dff7ef);
}

.exercise-launch-panel {
  text-align: center;
  max-width: 720px;
  margin: auto;
}

.exercise-launch-panel .brand-mark {
  margin: 0 auto 22px;
}

.exercise-launch-panel h1 {
  letter-spacing: -.055em;
  margin: 12px 0;
  font-size: clamp(36px, 6vw, 56px);
}

.exercise-launch-metadata {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.exercise-launch-metadata li {
  color: #4e4776;
  background: #ffffffb8;
  border: 1px solid #6256d92e;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.exercise-launch-panel .progress-track {
  max-width: 380px;
  margin: 26px auto 10px;
}

.exercise-action {
  color: #fff;
  background: #6256d9;
}

.exercise-player-header, .exercise-player-footer, .exercise-hint {
  align-items: center;
  gap: 14px;
  display: flex;
}

.exercise-player-header {
  margin-bottom: 30px;
}

.exercise-player-footer {
  justify-content: space-between;
}

.exercise-progress-dots {
  flex: 1;
  justify-content: center;
  gap: clamp(4px, 1vw, 9px);
  display: flex;
}

.question-dot {
  background: #fff;
  border: 2px solid #aeb7ca;
  border-radius: 50%;
  flex: none;
  width: 15px;
  height: 15px;
}

.question-current {
  border: 4px solid #6256d9;
}

.question-correct-first {
  background: #29a37a;
  border-color: #29a37a;
}

.question-correct-retry {
  background: #e6b938;
  border-color: #e6b938;
}

.question-incorrect {
  background: #ee6c5c;
  border-color: #ee6c5c;
}

.exercise-question {
  letter-spacing: -.05em;
  font-size: clamp(28px, 5vw, 44px);
}

.exercise-hint {
  box-shadow: none;
}

.exercise-feedback {
  min-height: 28px;
  color: var(--brand-dark);
  margin: 18px 0;
  font-size: 20px;
  font-weight: 850;
  animation: .22s ease-out feedback-float;
}

.exercise-xp-note {
  color: var(--muted);
  text-align: center;
  margin: 18px 0 0;
  font-size: 11px;
  font-weight: 700;
}

.spelling-stage {
  padding: clamp(14px, 2.5vw, 34px);
}

.spelling-panel {
  width: min(1050px, 100%);
  max-height: calc(100dvh - clamp(28px, 5vw, 68px));
  padding: clamp(18px, 2.4vw, 30px);
  overflow-y: auto;
}

.spelling-question {
  text-align: center;
}

.spelling-question h1 {
  letter-spacing: -.035em;
  max-width: 32ch;
  margin: 8px auto 4px;
  font-size: clamp(22px, 3vw, 34px);
}

.spelling-question p {
  max-width: 68ch;
  color: var(--muted);
  margin: 0 auto;
  font-size: 12px;
}

.spelling-answer {
  width: min(720px, 100%);
  min-height: 76px;
  color: var(--ink);
  letter-spacing: .08em;
  text-transform: none;
  background: #faf9ff;
  border: 2px solid #cbc6ff;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  margin: 20px auto 14px;
  padding: 14px 22px;
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 900;
  display: flex;
  position: relative;
  box-shadow: inset 0 2px 8px #483b9b0a;
}

.spelling-answer > span {
  color: #9aa2b2;
  letter-spacing: 0;
  font-size: 18px;
  font-weight: 700;
}

.spelling-answer i {
  background: var(--brand);
  border-radius: 99px;
  width: 3px;
  height: 38px;
  margin-left: 5px;
  animation: .9s step-end infinite spelling-caret;
}

.spelling-answer.correct {
  color: #166e50;
  background: #edfbf6;
  border-color: #52caa5;
}

.spelling-answer.incorrect {
  color: #a03b2e;
  background: #fff3f1;
  border-color: #ef8578;
}

.spelling-feedback {
  text-align: center;
  margin: 8px 0;
}

.spelling-keyboard {
  background: linear-gradient(#f6f7fb, #eaedf4);
  border: 1px solid #d9dce5;
  border-radius: 22px;
  width: min(900px, 100%);
  margin: 14px auto;
  padding: clamp(10px, 1.7vw, 18px);
  box-shadow: inset 0 1px #fff, 0 14px 35px #1a223d1a;
}

.spelling-key-row {
  justify-content: center;
  gap: clamp(4px, .8vw, 9px);
  display: flex;
}

.spelling-key-row + .spelling-key-row {
  margin-top: clamp(5px, .8vw, 9px);
}

.spelling-key {
  color: #26324b;
  cursor: pointer;
  touch-action: manipulation;
  background: #fff;
  border: 1px solid #cfd4df;
  border-bottom-width: 3px;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: clamp(38px, 6.2vw, 66px);
  min-width: 38px;
  min-height: clamp(44px, 6.2vw, 62px);
  font-size: clamp(13px, 1.8vw, 19px);
  font-weight: 900;
  transition: transform 80ms, border-color .12s, background .12s;
  display: inline-flex;
  box-shadow: 0 3px 7px #262e4a12;
}

.spelling-key:hover:not(:disabled) {
  color: var(--brand-dark);
  background: #f7f5ff;
  border-color: #9f97ed;
}

.spelling-key:active:not(:disabled) {
  border-bottom-width: 1px;
  transform: translateY(2px);
}

.spelling-key:disabled {
  cursor: default;
  opacity: .55;
}

.spelling-key.special {
  color: #5145b6;
  background: #ece9ff;
  width: clamp(50px, 8vw, 82px);
}

.spelling-key.special.active {
  color: #fff;
  background: var(--brand);
  border-color: #5145b6;
}

.spelling-key-row.utilities {
  margin-top: 11px;
}

.spelling-key.utility {
  width: clamp(88px, 14vw, 150px);
  padding: 0 13px;
  font-size: 12px;
}

.spelling-key.space {
  width: min(340px, 42vw);
  color: var(--muted);
  font-size: 11px;
}

.spelling-key.utility.check {
  color: #fff;
  background: #43b894;
  border-color: #348e73;
}

.spelling-audio-note {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  display: inline-flex;
}

@keyframes spelling-caret {
  50% {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .spelling-stage {
    align-items: start;
    padding: 8px;
  }

  .spelling-panel {
    border-radius: 18px;
    max-height: calc(100dvh - 16px);
  }

  .spelling-keyboard {
    padding: 8px 5px;
  }

  .spelling-key-row {
    gap: 3px;
  }

  .spelling-key {
    border-radius: 8px;
    width: clamp(28px, 8.5vw, 42px);
    min-width: 0;
    min-height: 44px;
    font-size: 12px;
  }

  .spelling-key.special {
    width: 44px;
  }

  .spelling-key.utility {
    width: 82px;
    padding: 0 7px;
    font-size: 10px;
  }

  .spelling-key.space {
    width: 34vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spelling-answer i {
    animation: none;
  }

  .spelling-key {
    transition: none;
  }
}

.exercise-xp-award {
  color: #6256d9;
  margin: 12px 0;
  font-size: 38px;
  font-weight: 900;
  animation: .6s ease-out xp-pulse;
}

.exercise-fade-in {
  animation: .26s ease-out exercise-fade;
}

@keyframes exercise-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes feedback-float {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes xp-pulse {
  50% {
    text-shadow: 0 0 22px #6256d94d;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .exercise-fade-in, .exercise-feedback, .exercise-xp-award {
    animation: none;
  }
}

.cms-shell {
  background: #f4f6f9;
  grid-template-columns: 260px 1fr;
  min-height: 100dvh;
  display: grid;
}

.cms-nav {
  color: #dfe3f0;
  background: #151b2c;
  height: 100dvh;
  padding: 26px 20px;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.cms-nav .brand {
  color: #fff;
}

.cms-nav a {
  color: #aeb7ca;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.cms-nav a:hover {
  color: #fff;
  background: #242c42;
}

.cms-nav nav {
  gap: 4px;
  margin-top: 32px;
  display: grid;
}

.cms-nav a.active {
  color: #fff;
  background: #242c42;
}

.cms-placeholder-card {
  text-align: left;
  background: linear-gradient(135deg, #6256d90a, #0000 55%), #fff;
  border-style: dashed;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 260px;
  margin-top: 24px;
  padding: clamp(24px, 5vw, 48px);
  display: flex;
}

.cms-placeholder-card h2, .cms-placeholder-card p {
  margin: 0;
}

.cms-placeholder-card h2 {
  font-size: 20px;
}

.cms-placeholder-card p {
  max-width: 560px;
  color: var(--muted);
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.65;
}

.cms-placeholder-icon {
  color: #6256d9;
  background: #f1efff;
  border: 1px solid #dcd7fa;
  border-radius: 17px;
  flex: none;
  place-items: center;
  width: 58px;
  height: 58px;
  display: grid;
}

.cms-content {
  width: 100%;
  min-width: 0;
  padding: 32px clamp(22px, 4vw, 52px);
}

.cms-main {
  min-width: 0;
  padding: 32px clamp(22px, 4vw, 52px);
}

.table-card {
  margin-top: 24px;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

th, td {
  text-align: start;
  border-bottom: 1px solid var(--line);
  padding: 15px 12px;
}

th {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.form-label {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 800;
  display: block;
}

.form-input, .cms-form input, .cms-form select {
  width: 100%;
  min-height: 48px;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border: 1px solid #dfe3ec;
  border-radius: 12px;
  padding: 10px 12px;
}

.form-error {
  color: #9d2e21;
  background: #fff0ed;
  border: 1px solid #ffc8bf;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
}

.demo-account-panel {
  background: #f8f7ff;
  border: 1px solid #d9d5f2;
  border-radius: 18px;
  margin: 20px 0 24px;
  padding: 15px;
}

.demo-account-panel > span {
  color: #5147a8;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
  display: flex;
}

.demo-account-panel > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 11px 0;
  display: grid;
}

.demo-account-panel button {
  color: #332d66;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d7d2f2;
  border-radius: 11px;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  display: grid;
}

.demo-account-panel button.selected {
  background: #eeeafd;
  border-color: #6256d9;
  box-shadow: 0 0 0 1px #6256d9;
}

.demo-account-panel button small {
  color: #5d667c;
  text-overflow: ellipsis;
  overflow: hidden;
}

.demo-account-panel > small {
  color: #5d667c;
  font-weight: 700;
}

.cms-heading, .cms-heading-actions, .dialog-heading, .dialog-actions {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.cms-heading {
  align-items: end;
}

.cms-primary {
  color: #fff;
  background: #6256d9;
}

.cms-notice {
  color: #176b56;
  background: #e5f8f2;
  border: 1px solid #bfeadd;
  border-radius: 13px;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 750;
  display: flex;
}

.cms-filters {
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  margin-top: 24px;
  padding: 14px;
  display: grid;
}

.search-field, .select-field {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
}

.search-field input, .select-field select {
  width: 100%;
  min-height: 42px;
  color: var(--ink);
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
}

.select-field select {
  min-width: 145px;
}

.cms-caption {
  text-align: left;
  padding: 0 0 16px;
}

.cms-secondary-line {
  margin-top: 4px;
  display: block;
}

.status-badge {
  border-radius: 99px;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.status-draft {
  color: #705e1a;
  background: #fff5d5;
}

.status-in_review {
  color: #4d3c9e;
  background: #efecff;
}

.status-published {
  color: #176b56;
  background: #dff7ef;
}

.status-archived {
  color: #5d6472;
  background: #eceef2;
}

.table-actions {
  align-items: center;
  gap: 5px;
  display: flex;
}

.table-actions button {
  width: 36px;
  height: 36px;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.table-actions button:hover {
  color: var(--brand-dark);
  background: #f3f1ff;
  border-color: #c9c4f4;
}

.table-actions button:disabled {
  opacity: .45;
  cursor: wait;
}

.cms-empty {
  color: var(--muted);
  text-align: center;
  padding: 30px 12px 10px;
}

.dialog-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 100;
  background: #0e12238c;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.dialog-card {
  background: #fff;
  border-radius: 24px;
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  padding: clamp(22px, 4vw, 34px);
  overflow-y: auto;
  box-shadow: 0 30px 90px #080b1c59;
}

.dialog-card h2 {
  letter-spacing: -.04em;
  margin: 5px 0 0;
  font-size: 28px;
}

.cms-form {
  gap: 16px;
  margin-top: 24px;
  display: grid;
}

.cms-form label {
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.dialog-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.cms-exercise-link {
  color: var(--ink);
  text-underline-offset: 3px;
  font-weight: 800;
  -webkit-text-decoration: underline #0000;
  text-decoration: underline #0000;
}

.cms-exercise-link:hover {
  color: var(--brand-dark);
  text-decoration-color: currentColor;
}

.cms-back-link {
  width: fit-content;
  min-height: 44px;
  color: var(--muted);
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}

.cms-editor .page-title {
  margin-bottom: 8px;
}

.cms-editor-meta, .cms-preview-topline, .cms-section-heading, .cms-section-heading > div, .cms-item-row, .cms-version-row {
  align-items: center;
  gap: 9px;
  display: flex;
}

.cms-editor-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  align-items: start;
  gap: 22px;
  margin-top: 24px;
  display: grid;
}

.cms-authoring-panel, .cms-item-list, .cms-framework-metadata, .cms-version-history {
  padding: 22px;
}

.cms-section-heading {
  justify-content: space-between;
  margin-bottom: 18px;
}

.cms-section-heading h2 {
  margin: 0;
  font-size: 18px;
}

.cms-valid {
  color: #176b56;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.cms-title-fields label, .cms-preview-input {
  color: var(--ink);
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
}

.cms-title-fields input, .cms-preview-input input, .cms-structured-fields input, .cms-structured-fields select, .cms-structured-fields textarea {
  border: 1px solid var(--line);
  width: 100%;
  min-height: 46px;
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 9px 11px;
}

.cms-structured-fields {
  gap: 22px;
  margin-top: 20px;
  display: grid;
}

.cms-field-section {
  gap: 14px;
  display: grid;
}

.cms-field-section h3 {
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding-bottom: 10px;
  font-size: 15px;
}

.cms-field-section label, .cms-item-fieldset label {
  color: var(--ink);
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.cms-structured-fields textarea {
  resize: vertical;
}

.cms-check-row {
  flex-wrap: wrap;
  gap: 18px;
  display: flex;
}

.cms-check-row label {
  align-items: center;
  gap: 9px;
  min-height: 44px;
  display: flex;
}

.cms-check-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.cms-item-fieldset {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 15px;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  display: grid;
}

.cms-item-fieldset legend {
  color: var(--brand-dark);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 850;
}

.cms-option-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.cms-pair-fields, .cms-blank-fields {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.cms-validation-summary {
  border-top: 1px solid var(--line);
  margin-bottom: 0;
  padding-top: 12px;
}

.cms-framework-metadata dl, .cms-curriculum-placement dl {
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  display: grid;
  overflow: hidden;
}

.cms-framework-metadata dl > div, .cms-curriculum-placement dl > div {
  background: #fff;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  display: grid;
}

.cms-framework-metadata dt, .cms-curriculum-placement dt {
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 850;
}

.cms-framework-metadata dd, .cms-curriculum-placement dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 12px;
  font-weight: 750;
}

.cms-curriculum-placement {
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.cms-cascade-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.cms-cascade-fields label {
  color: var(--ink);
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.cms-cascade-fields select {
  width: 100%;
  min-height: 46px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 9px 36px 9px 11px;
}

.cms-hierarchy-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
  display: grid;
}

.cms-curriculum-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  margin-top: 24px;
  display: grid;
}

.cms-curriculum-card {
  padding: 22px;
}

.cms-curriculum-card form {
  gap: 14px;
  display: grid;
}

.cms-curriculum-card label {
  color: var(--ink);
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.cms-curriculum-card input, .cms-curriculum-card select, .cms-curriculum-card textarea {
  width: 100%;
  min-height: 46px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 9px 11px;
}

.cms-curriculum-card textarea {
  resize: vertical;
}

.cms-curriculum-card .cms-inline-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  display: flex;
}

.cms-curriculum-card .cms-inline-check input {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.cms-curriculum-card button {
  justify-self: end;
}

.cms-hierarchy-tree {
  margin-top: 24px;
  padding: 22px;
}

.cms-hierarchy-tree article {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.cms-hierarchy-tree article > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  display: flex;
}

.cms-hierarchy-tree ul {
  color: var(--muted);
  margin: 10px 0 0 20px;
  font-size: 13px;
}

.cms-catalog-maintenance {
  margin-top: 24px;
  padding: 22px;
}

.cms-catalog-maintenance article {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.cms-catalog-maintenance article > div, .cms-catalog-maintenance li, .cms-hierarchy-tree li, .cms-maintenance-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.cms-catalog-maintenance ul {
  gap: 8px;
  margin: 10px 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
}

.cms-maintenance-list {
  gap: 14px;
  display: grid;
}

.cms-maintenance-list form {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 13px;
  padding: 15px;
}

.cms-maintenance-actions {
  justify-content: flex-end;
}

.curriculum-heading {
  align-items: flex-start;
  gap: 18px;
}

.cms-compact-create, .cms-small-action {
  min-height: 36px;
  color: var(--brand-dark);
  font: inherit;
  cursor: pointer;
  background: #f8f7ff;
  border: 1px solid #d9d5f4;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  display: inline-flex;
}

.cms-compact-create {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  flex: none;
}

.cms-curriculum-browser {
  margin-top: 24px;
  padding: 0;
  overflow: hidden;
}

.cms-folder-breadcrumbs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 50px;
  padding: 10px clamp(16px, 3vw, 24px);
  display: flex;
}

.cms-folder-breadcrumbs > span {
  color: #aaa5b5;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.cms-folder-breadcrumbs button {
  color: #5c5672;
  min-height: 30px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
}

.cms-folder-breadcrumbs button:hover:not(:disabled) {
  color: var(--brand-dark);
  background: #f2f0ff;
}

.cms-folder-breadcrumbs button[aria-current="page"] {
  color: var(--ink);
  cursor: default;
  opacity: 1;
}

.cms-folder-toolbar {
  border-bottom: 1px solid var(--line);
  background: #fff;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 15px clamp(16px, 3vw, 24px);
  display: flex;
}

.cms-folder-toolbar > div {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.cms-folder-title-icon {
  color: #7669dc;
  background: #f2f0ff;
  border: 1px solid #e1ddff;
  border-radius: 13px;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
}

.cms-folder-toolbar h2, .cms-folder-toolbar p {
  margin: 0;
}

.cms-folder-toolbar h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 21px;
  overflow: hidden;
}

.cms-folder-toolbar p {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
}

.cms-folder-back, .cms-folder-modify {
  min-height: 32px;
  color: var(--brand-dark);
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd9f5;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.cms-folder-order {
  color: var(--muted);
  flex: none;
  font-size: 11px;
  font-weight: 750;
}

.cms-folder-toolbar-actions {
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-end;
}

.cms-folder-view-switch {
  background: #f5f4f9;
  border: 1px solid #dedbea;
  border-radius: 10px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.cms-folder-view-switch button {
  color: #6f697d;
  min-height: 30px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
}

.cms-folder-view-switch button[aria-pressed="true"] {
  color: var(--brand-dark);
  background: #fff;
  box-shadow: 0 1px 5px #2f275e21;
}

.cms-folder-surface {
  background-color: #f8f8fc;
  background-image: linear-gradient(#6256d906 1px, #0000 1px), linear-gradient(90deg, #6256d906 1px, #0000 1px), none;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat;
  background-size: 24px 24px;
  background-attachment: scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box;
  min-height: 330px;
  padding: clamp(16px, 3vw, 24px);
}

.cms-folder-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  display: grid;
}

.cms-folder-surface.is-list-view .cms-folder-grid, .cms-folder-surface.is-list-view .cms-file-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.cms-folder-surface.is-list-view .cms-folder-card {
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  display: grid;
}

.cms-folder-surface.is-list-view .cms-folder-main {
  min-height: 62px;
  padding: 9px 13px;
}

.cms-folder-surface.is-list-view .cms-folder-main > svg {
  width: 29px;
  height: 29px;
}

.cms-folder-surface.is-list-view .cms-folder-card-footer {
  border-top: 0;
  border-inline-start: 1px solid #efedf3;
  min-width: 170px;
}

.cms-folder-surface.is-list-view .cms-file-card {
  border-radius: 11px;
  min-height: 66px;
}

.cms-folder-card {
  background: #fff;
  border: 1px solid #e3e1eb;
  border-radius: 14px;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  overflow: hidden;
  box-shadow: 0 5px 18px #2621480b;
}

.cms-folder-card:hover {
  border-color: #cfc9f5;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px #30276e17;
}

.cms-folder-card.draft-folder {
  background: #fffdf8;
  border-color: #e5cfa3;
}

.cms-folder-card.draft-folder .cms-folder-card-footer {
  background: #fffaf0;
}

.cms-folder-main {
  width: 100%;
  min-height: 91px;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px;
  display: grid;
}

.cms-folder-main > svg {
  color: #e5a93a;
  fill: #fff3cb;
  stroke-width: 1.8px;
}

.grade-folder .cms-folder-main > svg {
  color: #6659d8;
  fill: #eeebff;
}

.path-folder .cms-folder-main > svg {
  color: #298f84;
  fill: #e0f6f2;
}

.sequence-folder .cms-folder-main > svg {
  color: #d38337;
  fill: #fff0dd;
}

.cms-folder-main > span, .cms-file-card > div:nth-child(2) {
  min-width: 0;
}

.cms-folder-main strong, .cms-folder-main small, .cms-file-card strong, .cms-file-card small {
  text-align: start;
  unicode-bidi: plaintext;
  display: block;
}

.cms-folder-main strong {
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 1.35;
  overflow: hidden;
}

.cms-folder-surface.is-list-view .cms-folder-main strong {
  font-size: 17px;
}

.cms-folder-main small, .cms-file-card small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
}

.cms-folder-card-footer {
  padding: 7px 10px;
  background: #fcfcfe;
  border-top: 1px solid #efedf3;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding-inline-start: 13px;
  display: flex;
}

.cms-folder-card-meta, .cms-folder-card-actions, .cms-publication-control {
  align-items: center;
  gap: 7px;
  display: flex;
}

.cms-folder-card-meta {
  flex-wrap: wrap;
  min-width: 0;
}

.cms-folder-card-actions {
  flex: none;
}

.cms-publication-label {
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 999px;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
}

.cms-publication-label.published {
  color: #16724d;
  background: #eaf9f1;
  border-color: #b9e6d1;
}

.cms-publication-label.draft {
  color: #94620b;
  background: #fff4d9;
  border-color: #ecd39d;
}

.cms-publication-switch {
  cursor: pointer;
  background: #b5afbf;
  border: 0;
  border-radius: 999px;
  flex: none;
  align-items: center;
  width: 34px;
  height: 20px;
  padding: 2px;
  transition: background .14s;
  display: flex;
}

.cms-publication-switch[aria-checked="true"] {
  background: #24a06b;
  justify-content: flex-end;
}

.cms-publication-switch > span {
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 1px 4px #1f1b2a4d;
}

.cms-publication-switch:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #6256d940;
}

.cms-publication-switch:disabled {
  cursor: wait;
  opacity: .55;
}

.cms-publication-switch[data-loading="true"] > span {
  animation: .7s ease-in-out infinite alternate cms-switch-pulse;
}

@keyframes cms-switch-pulse {
  to {
    opacity: .45;
  }
}

.cms-folder-modify {
  background: none;
  border-color: #0000;
}

.cms-folder-modify:hover, .cms-folder-back:hover {
  background: #f5f3ff;
  border-color: #d3cef3;
}

.cms-file-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  display: grid;
}

.cms-file-card {
  background: #fff;
  border: 1px solid #e3e1eb;
  border-radius: 13px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 76px;
  padding: 13px;
  display: grid;
  box-shadow: 0 4px 14px #2621480a;
}

.cms-file-card > div:nth-child(2) {
  text-align: start;
}

.cms-file-title {
  min-width: 0;
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.cms-file-title:hover strong {
  color: var(--brand-dark);
  text-decoration: underline;
}

.cms-file-icon {
  color: #6256d9;
  background: #f2f0ff;
  border: 1px solid #dfdbfb;
  border-radius: 10px;
  place-items: center;
  width: 40px;
  height: 44px;
  display: grid;
}

.cms-file-card strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.cms-folder-surface.is-list-view .cms-file-card strong {
  font-size: 16px;
}

.cms-folder-empty {
  text-align: center;
  min-height: 230px;
  color: var(--muted);
  background: #ffffffb3;
  border: 1px dashed #d8d4ea;
  border-radius: 14px;
  align-content: center;
  place-items: center;
  padding: 32px;
  display: grid;
}

.cms-folder-empty svg {
  color: #aaa2dc;
  margin-bottom: 10px;
}

.cms-folder-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.cms-folder-empty p {
  max-width: 420px;
  margin: 6px 0 0;
  font-size: 12px;
}

.curriculum-dialog {
  width: min(580px, 100%);
}

.cms-create-context {
  color: #4f4868;
  background: #f7f5ff;
  border: 1px solid #ded9f6;
  border-radius: 10px;
  margin: 16px 0 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.45;
}

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

.cms-slug-control button {
  color: var(--brand-dark);
  font: inherit;
  cursor: pointer;
  background: #f8f7ff;
  border: 1px solid #d9d5f4;
  border-radius: 10px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 800;
}

.cms-slug-control button:hover {
  background: #f0edff;
}

.form-help {
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.cms-dialog-kind, .curriculum-dialog .cms-inline-check {
  color: var(--ink);
  gap: 7px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
}

.cms-dialog-kind select {
  width: 100%;
  min-height: 46px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 9px 11px;
}

.curriculum-dialog .cms-inline-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 44px;
}

.curriculum-dialog .cms-inline-check input {
  width: 18px;
  height: 18px;
}

.dialog-danger {
  width: fit-content;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .curriculum-heading {
    align-items: stretch;
  }

  .cms-compact-create {
    align-self: flex-start;
  }

  .cms-folder-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .cms-folder-back {
    align-self: flex-start;
  }

  .cms-folder-toolbar-actions {
    justify-content: space-between;
    width: 100%;
  }

  .cms-folder-grid, .cms-file-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .cms-folder-surface {
    min-height: 280px;
  }

  .cms-file-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cms-folder-surface.is-list-view .cms-folder-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-folder-surface.is-list-view .cms-folder-card-footer {
    border-top: 1px solid #efedf3;
    border-inline-start: 0;
    min-width: 0;
  }

  .cms-file-card .cms-small-action {
    grid-column: 2;
    justify-self: start;
  }
}

.cms-danger-button {
  color: #9d2e21;
  min-height: 40px;
  font: inherit;
  cursor: pointer;
  background: #fff0ed;
  border: 1px solid #ffc8bf;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.cms-danger-button:hover {
  background: #ffe3de;
  border-color: #ee6c5c;
}

.cms-danger-button:disabled {
  opacity: .5;
  cursor: wait;
}

.cms-record-heading, .cms-form-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.cms-record-heading {
  justify-content: space-between;
}

.cms-loading-page {
  background: radial-gradient(circle at 90% 0%,
      #6256d912,
      transparent 28rem),
    var(--paper);
}

.cms-page-header {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 22px;
  display: flex;
}

.cms-page-header .page-title {
  margin-bottom: 6px;
}

.cms-page-header p {
  margin: 0;
}

.cms-page-header > button, .cms-page-header > a {
  flex: none;
}

.cms-loading-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
  display: grid;
}

.cms-loading-metrics article {
  border: 1px solid var(--line);
  background: #ffffffe0;
  border-radius: 16px;
  align-items: center;
  gap: 13px;
  min-height: 88px;
  padding: 16px 18px;
  display: flex;
  box-shadow: 0 8px 24px #222a460a;
}

.cms-loading-metrics strong, .cms-loading-metrics span {
  display: block;
}

.cms-loading-metrics strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.cms-loading-metrics article > div > span {
  color: var(--muted);
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
}

.cms-metric-icon {
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.cms-metric-icon.live {
  color: #167753;
  background: #dcf8eb;
}

.cms-metric-icon.scheduled {
  color: #8d5d00;
  background: #fff0c5;
}

.cms-metric-icon.global {
  color: var(--brand);
  background: #eeeaff;
}

.cms-loading-studio {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.cms-loading-form {
  padding: 0;
  overflow: hidden;
}

.cms-form-title {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8f7ff, #fff);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 20px 24px;
  display: flex;
}

.cms-form-title.compact {
  background: none;
  border: 0;
  min-height: auto;
  padding: 22px 24px 14px;
}

.cms-form-title > div {
  align-items: center;
  gap: 12px;
  display: flex;
}

.cms-form-title h2, .cms-preview-heading h2, .cms-library-heading h2 {
  color: var(--ink);
  margin: 0;
  font-size: 18px;
}

.cms-form-title p, .cms-preview-heading p {
  color: var(--muted);
  margin: 3px 0 0;
  font-size: 12px;
}

.cms-step-number {
  color: #fff;
  background: var(--brand);
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  font-weight: 900;
  display: grid;
  box-shadow: 0 6px 16px #6256d938;
}

.cms-loading-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 24px 24px;
  display: grid;
}

.cms-loading-fields label, .cms-wallpaper-picker {
  color: var(--ink);
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.cms-loading-fields input, .cms-loading-fields select, .cms-loading-fields textarea {
  width: 100%;
  min-height: 46px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}

.cms-loading-fields textarea {
  resize: vertical;
  min-height: 94px;
  line-height: 1.5;
}

.cms-loading-fields input:focus, .cms-loading-fields select:focus, .cms-loading-fields textarea:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px #6256d91f;
}

.cms-loading-fields small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.cms-wallpaper-picker {
  border: 0;
  min-width: 0;
  padding: 0;
}

.cms-wallpaper-options {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  display: grid;
}

.cms-wallpaper-option {
  min-width: 0;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 13px;
  gap: 7px;
  padding: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: grid;
}

.cms-wallpaper-option:hover {
  transform: translateY(-1px);
}

.cms-wallpaper-option.selected {
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px #6256d91a;
}

.cms-wallpaper-option input {
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 1px;
  position: absolute;
}

.cms-wallpaper-image, .cms-wallpaper-default {
  background-position: center;
  background-size: cover;
  border-radius: 9px;
  place-items: center;
  width: 100%;
  height: 66px;
  display: grid;
}

.cms-wallpaper-default {
  color: var(--brand);
  background: linear-gradient(135deg, #6256d929, #26c2a62e), #f2f0ff;
}

.cms-wallpaper-option strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px 3px;
  font-size: 10px;
  overflow: hidden;
}

.cms-audio-preview-control {
  align-items: end;
  display: flex;
}

.cms-audio-preview-control button {
  width: 100%;
}

.cms-form-divider {
  background: var(--line);
  height: 1px;
  margin: 0 24px;
}

.cms-audience-stack {
  gap: 12px;
  padding: 4px 24px 24px;
  display: grid;
}

.cms-audience-picker {
  border: 1px solid var(--line);
  background: #fcfcfe;
  border-radius: 14px;
  min-width: 0;
  padding: 15px;
}

.cms-audience-heading {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  display: flex;
}

.cms-audience-heading legend {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.cms-audience-heading p, .cms-selection-summary {
  color: var(--muted);
  margin: 3px 0 0;
  font-size: 10px;
}

.cms-text-button {
  min-height: 32px;
  color: var(--brand);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
}

.cms-text-button:disabled {
  color: var(--muted);
  cursor: default;
}

.cms-choice-grid {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.cms-choice-chip {
  color: #505a68;
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 11px;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 10px;
  display: inline-flex;
}

.cms-choice-chip.selected {
  color: #4037a2;
  background: #f1efff;
  border-color: #a99fff;
}

.cms-choice-chip input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}

.cms-choice-chip span {
  font-size: 11px;
  font-weight: 800;
}

.cms-choice-chip small {
  color: var(--muted);
  font-size: 9px;
}

.cms-activation-card {
  background: #f2fcf8;
  border: 1px solid #b7ded4;
  border-radius: 13px;
  align-items: center;
  min-height: 68px;
  padding: 14px 16px;
  gap: 12px !important;
  display: flex !important;
}

.cms-activation-card input {
  accent-color: #17805c;
  width: 19px;
  height: 19px;
  min-height: 19px;
}

.cms-activation-card span, .cms-activation-card strong, .cms-activation-card small {
  display: block;
}

.cms-activation-card small {
  margin-top: 4px;
}

.cms-sticky-actions {
  z-index: 2;
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff0;
  gap: 10px;
  padding: 15px 24px;
  display: flex;
  position: sticky;
  bottom: 0;
}

.cms-preview-column {
  border: 1px solid var(--line);
  background: #20263a;
  border-radius: 20px;
  padding: 18px;
  position: sticky;
  top: 22px;
  box-shadow: 0 22px 50px #1c203326;
}

.cms-preview-heading {
  color: #fff;
  justify-content: space-between;
  align-items: end;
  padding: 2px 2px 14px;
  display: flex;
}

.cms-preview-heading h2 {
  color: #fff;
  margin-top: 3px;
}

.cms-preview-heading > span {
  color: #bfc5d8;
  font-size: 10px;
  font-weight: 800;
}

.cms-loading-preview {
  aspect-ratio: 16 / 10;
  color: #fff;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.cms-preview-overlay {
  background: radial-gradient(circle at 70% 15%, #ffffff21, #0000 35%), linear-gradient(135deg, #1921429e, #2c1c4ec7);
  position: absolute;
  inset: 0;
}

.cms-preview-content {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: clamp(18px, 3vw, 34px);
  display: flex;
  position: relative;
}

.cms-preview-spark {
  color: #372c88;
  background: #ffffffeb;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 13px;
  display: grid;
  box-shadow: 0 10px 26px #11112633;
}

.cms-preview-content strong {
  max-width: 19ch;
  margin-top: 8px;
  font-size: clamp(19px, 2.5vw, 28px);
  line-height: 1.12;
}

.cms-preview-content p {
  color: #ffffffc7;
  max-width: 34ch;
  margin: 8px 0 20px;
  font-size: 10px;
  line-height: 1.45;
}

.cms-preview-content .progress-track {
  background: #ffffff38;
  width: min(260px, 80%);
  height: 7px;
}

.cms-preview-content small {
  color: #ffffffb3;
  margin-top: 7px;
  font-size: 9px;
}

.cms-preview-summary {
  gap: 9px;
  padding: 14px 3px 2px;
  display: grid;
}

.cms-preview-summary > div {
  color: #d7dbea;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.cms-preview-summary svg {
  color: #9e94ff;
}

.cms-loading-library {
  margin-top: 34px;
}

.cms-library-heading {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  display: flex;
}

.cms-library-heading p {
  margin: 6px 0 0;
}

.cms-count-badge {
  color: var(--brand);
  background: #efedff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 900;
}

.cms-loading-filters {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  display: flex;
}

.cms-loading-filters > input {
  border: 1px solid var(--line);
  width: min(420px, 100%);
  min-height: 44px;
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 9px 13px;
}

.cms-segmented-control button.active {
  color: #4037a2;
  background: #ece9ff;
}

.cms-loading-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.cms-loading-card {
  min-width: 0;
  transition: transform .16s, box-shadow .16s;
  overflow: hidden;
}

.cms-loading-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px #222a461a;
}

.cms-loading-card-visual {
  background-color: #0000;
  background-image: radial-gradient(circle at 75% 18%, #ffffff38, #0000 35%), linear-gradient(135deg, #7166dc, #40386e);
  background-position: center;
  background-repeat: repeat, repeat;
  background-size: cover;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  min-height: 165px;
  position: relative;
  overflow: hidden;
}

.cms-loading-card-shade {
  background: linear-gradient(145deg, #1f254a66, #2619419e);
  position: absolute;
  inset: 0;
}

.cms-loading-card-preview {
  color: #fff;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 38px 26px 22px;
  display: flex;
  position: absolute;
  inset: 0;
}

.cms-loading-card-preview > svg {
  opacity: .9;
  margin-bottom: 8px;
}

.cms-loading-card-preview strong {
  max-width: 22ch;
  font-size: 13px;
  line-height: 1.3;
}

.cms-loading-card-preview > span {
  background: #ffffff42;
  border-radius: 99px;
  width: min(150px, 72%);
  height: 5px;
  margin-top: 15px;
  overflow: hidden;
}

.cms-loading-card-preview i {
  border-radius: inherit;
  background: #64dfbd;
  width: 68%;
  height: 100%;
  display: block;
}

.cms-screen-status, .cms-has-audio {
  color: #314054;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
  background: #ffffffe6;
  border: 1px solid #ffffffb3;
  align-items: center;
  display: inline-flex;
  position: absolute;
  top: 11px;
  box-shadow: 0 5px 18px #191d2f1f;
}

.cms-screen-status {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  left: 11px;
}

.cms-screen-status.live {
  color: #126c4b;
  background: #e2fff3f0;
}

.cms-screen-status.scheduled {
  color: #815600;
  background: #fff6d8f0;
}

.cms-has-audio {
  border-radius: 10px;
  justify-content: center;
  width: 30px;
  height: 30px;
  right: 11px;
}

.cms-loading-card-body {
  padding: 16px;
}

.cms-target-groups {
  gap: 9px;
  display: grid;
}

.cms-target-groups > div {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  display: grid;
}

.cms-target-groups > div > span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: 4px;
  font-size: 9px;
  font-weight: 800;
}

.cms-audience-badges {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.cms-audience-badges span {
  color: #464f5d;
  background: #f1f3f6;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.cms-audience-badges span.all {
  color: #5448bc;
  background: #f0eeff;
}

.cms-card-meta {
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: 16px;
  margin-top: 14px;
  padding: 10px 0;
  font-size: 10px;
  display: flex;
}

.cms-card-meta strong {
  color: var(--ink);
}

.cms-schedule-row {
  color: var(--muted);
  align-items: start;
  gap: 7px;
  margin-top: 11px;
  font-size: 9px;
  line-height: 1.5;
  display: flex;
}

.cms-card-actions {
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.cms-card-actions .secondary-button {
  flex: 1;
  min-height: 40px;
}

.cms-danger-icon {
  color: #a2382b;
  cursor: pointer;
  background: #fff3f1;
  border: 1px solid #ffd0c9;
  border-radius: 10px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.cms-danger-icon:hover {
  background: #ffe5e1;
  border-color: #ef7668;
}

.cms-empty-state {
  min-height: 230px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #cbd0d9;
  border-radius: 16px;
  grid-column: 1 / -1;
  align-content: center;
  place-items: center;
  padding: 28px;
  display: grid;
}

.cms-empty-state h3, .cms-empty-state p {
  margin: 7px 0 0;
}

.cms-users-page, .cms-audit-page {
  width: 100%;
  max-width: 1500px;
}

.cms-user-editor {
  margin-top: 24px;
  padding: 24px;
}

.cms-user-editor .cms-form-title > div:first-child, .cms-user-identity {
  align-items: center;
  gap: 12px;
  display: flex;
}

.cms-user-avatar, .cms-audit-avatar {
  color: #4c41ae;
  background: #efedff;
  border: 1px solid #d9d4ff;
  border-radius: 13px;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}

.cms-user-editor-fields {
  grid-template-columns: minmax(260px, 1fr) minmax(300px, .8fr);
  gap: 14px;
  margin-top: 22px;
  display: grid;
}

.cms-user-editor-fields > label:first-child {
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
}

.cms-user-editor-fields input[type="text"], .cms-user-editor-fields input:not([type]) {
  border: 1px solid var(--line);
  width: 100%;
  min-height: 48px;
  font: inherit;
  border-radius: 12px;
  padding: 10px 12px;
}

.cms-activation-card {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 12px 14px;
  display: flex;
}

.cms-activation-card input, .cms-role-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.cms-activation-card span, .cms-role-option span {
  gap: 3px;
  display: grid;
}

.cms-activation-card small, .cms-role-option small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.cms-role-picker {
  border: 0;
  margin: 22px 0 0;
  padding: 0;
}

.cms-role-picker legend {
  font-weight: 850;
}

.cms-role-picker > p {
  color: var(--muted);
  margin: 4px 0 12px;
  font-size: 13px;
}

.cms-role-picker > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.cms-role-option {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fafbfc;
  border-radius: 13px;
  align-items: flex-start;
  gap: 10px;
  min-height: 92px;
  padding: 14px;
  display: flex;
}

.cms-role-option.selected {
  background: #f4f2ff;
  border-color: #bcb5f6;
}

.cms-sticky-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
  display: flex;
}

.cms-user-directory, .cms-audit-directory {
  margin-top: 30px;
}

.cms-loading-filters, .cms-audit-toolbar {
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  display: flex;
}

.cms-loading-filters .search-field, .cms-audit-toolbar .search-field {
  flex: 1;
}

.cms-segmented-control {
  border: 1px solid var(--line);
  background: #f3f4f7;
  border-radius: 12px;
  gap: 3px;
  padding: 4px;
  display: flex;
}

.cms-segmented-control button {
  min-height: 35px;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 800;
}

.cms-segmented-control button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 8px #1f263f17;
}

.cms-user-table-wrap {
  overflow-x: auto;
}

.cms-user-table {
  min-width: 940px;
}

.cms-user-table td > strong, .cms-user-table td > small, .cms-user-identity > div, .cms-user-identity > div > span, .cms-user-identity > div > small {
  display: block;
}

.cms-user-identity > div > span, .cms-user-table td > small, .cms-user-identity > div > small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
}

.cms-user-identity > div > small {
  align-items: center;
  gap: 4px;
  display: flex;
}

.cms-you-badge {
  color: #4c41ae;
  background: #efedff;
  border-radius: 99px;
  margin-left: 7px;
  padding: 2px 6px;
  font-size: 9px;
}

.cms-role-badges {
  flex-wrap: wrap;
  gap: 5px;
  max-width: 280px;
  display: flex;
}

.cms-role-badges span, .cms-account-status, .cms-count-badge {
  color: #4c41ae;
  background: #efedff;
  border-radius: 99px;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
}

.cms-role-badges span.household {
  color: #5d6472;
  background: #eef0f3;
}

.cms-account-status.active {
  color: #176b56;
  background: #dff7ef;
}

.cms-account-status.inactive {
  color: #9d2e21;
  background: #fff0ed;
}

.cms-audit-heading {
  align-items: flex-start;
}

.cms-audit-heading > div {
  display: block;
}

.cms-audit-heading h2 {
  margin-top: 5px;
}

.cms-audit-heading p {
  max-width: 680px;
  margin: 5px 0 0;
}

.cms-audit-toolbar {
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(145px, auto));
  display: grid;
}

.cms-audit-toolbar select {
  min-height: 44px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fafbfc;
  border-radius: 11px;
  padding: 0 34px 0 11px;
  font-size: 12px;
  font-weight: 700;
}

.cms-audit-results {
  color: var(--muted);
  margin: 8px 0 13px;
  font-size: 12px;
}

.cms-audit-timeline {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  overflow: hidden;
}

.cms-audit-event {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 18px;
  display: grid;
}

.cms-audit-event + .cms-audit-event {
  border-top: 1px solid var(--line);
}

.cms-audit-event-body {
  min-width: 0;
}

.cms-audit-event-title {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.cms-audit-event-title > div {
  gap: 3px;
  display: grid;
}

.cms-audit-event-title span, .cms-audit-event-title time {
  color: var(--muted);
  font-size: 12px;
}

.cms-audit-resource {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  display: flex;
}

.cms-audit-resource span {
  color: #176b56;
  background: #e5f8f2;
  border-radius: 99px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
}

.cms-audit-resource code {
  color: #555d6c;
  text-overflow: ellipsis;
  background: #f3f4f6;
  border-radius: 6px;
  max-width: 100%;
  padding: 4px 7px;
  font-size: 10px;
  overflow: hidden;
}

.cms-audit-details {
  margin-top: 10px;
}

.cms-audit-details summary {
  color: #5549b9;
  cursor: pointer;
  width: fit-content;
  font-size: 11px;
  font-weight: 800;
}

.cms-audit-details pre {
  color: #d9deea;
  background: #171c2b;
  border-radius: 10px;
  max-height: 260px;
  margin: 9px 0 0;
  padding: 13px;
  font-size: 10px;
  line-height: 1.55;
  overflow: auto;
}

.cms-gamification-page {
  width: 100%;
  max-width: 1500px;
}

.cms-gamification-directory {
  margin-top: 30px;
}

.cms-gamification-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, auto);
  gap: 10px;
  margin: 16px 0;
  display: grid;
}

.cms-gamification-filters select {
  min-height: 44px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fafbfc;
  border-radius: 11px;
  padding: 0 34px 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.cms-gamification-table-wrap {
  overflow-x: auto;
}

.cms-gamification-table {
  min-width: 1060px;
}

.cms-gamification-table td > strong, .cms-gamification-table td > small {
  display: block;
}

.cms-gamification-table td > small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}

.cms-report-value {
  align-items: center;
  gap: 5px;
  font-weight: 800;
  display: inline-flex;
}

.cms-report-value.streak {
  color: #a64d2f;
}

.cms-report-progress {
  grid-template-columns: minmax(90px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  display: grid;
}

.cms-report-progress .progress-track {
  margin: 0;
}

.cms-report-progress > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.learner-trend {
  align-items: end;
  gap: 10px;
  height: 100px;
  margin-top: 20px;
  display: flex;
}

.learner-trend span {
  border-radius: 8px 8px 3px 3px;
  flex: 1;
  min-height: 5px;
}

.learner-badge-list {
  gap: 10px;
  margin-top: 24px;
  display: grid;
}

.learner-badge-list article {
  border: 1px solid var(--line);
  background: #fffaf0;
  border-radius: 13px;
  align-items: center;
  gap: 11px;
  padding: 11px;
  display: flex;
}

.learner-badge-list .stat-icon {
  color: #876a15;
  background: #fff0bd;
}

.learner-badge-list article > div {
  gap: 3px;
  display: grid;
}

.learner-badge-list small {
  color: var(--muted);
  line-height: 1.4;
}

.learner-empty-panel {
  min-height: 180px;
  color: var(--muted);
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 8px;
  display: grid;
}

.learner-access-state {
  background: linear-gradient(135deg, #eeecffb8, #ffffffeb),
    var(--surface);
  border-style: dashed;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 270px;
  margin-top: 26px;
  padding: clamp(24px, 5vw, 42px);
  display: grid;
}

.learner-access-state.compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: 20px;
}

.learner-access-state h2 {
  margin: 6px 0;
  font-size: clamp(22px, 3vw, 30px);
}

.learner-access-state p {
  max-width: 680px;
  color: var(--muted);
  margin: 0;
  line-height: 1.65;
}

.learner-access-icon {
  width: 58px;
  height: 58px;
  color: var(--brand-dark);
  background: #dedaff;
  border-radius: 18px;
  place-items: center;
  display: grid;
}

.network-recovery {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1000;
  background: #0f1322b8;
  place-items: center;
  padding: 22px;
  display: grid;
  position: fixed;
  inset: 0;
}

.network-recovery > section {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 26px;
  width: min(520px, 100%);
  padding: clamp(24px, 6vw, 42px);
  box-shadow: 0 30px 90px #080c1c66;
}

.network-recovery h2 {
  margin: 10px 0 8px;
  font-size: clamp(27px, 5vw, 38px);
}

.network-recovery p {
  color: var(--muted);
  line-height: 1.65;
}

.network-recovery > section > div {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

.offline-page {
  max-width: 540px;
}

.offline-page h1 {
  margin: 12px 0 8px;
  font-size: clamp(34px, 7vw, 48px);
}

.offline-page p {
  color: var(--muted);
  line-height: 1.65;
}

.offline-page > div {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

.secondary-button.compact {
  min-height: 40px;
  padding-inline: 14px;
  font-size: 12px;
}

.progress-metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.progress-section {
  margin-top: 34px;
}

.subject-progress-list, .recent-activity-list, .streak-history-list {
  gap: 16px;
  display: grid;
}

.subject-progress-card {
  padding: clamp(18px, 3vw, 26px);
}

.subject-progress-card > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.subject-progress-card h3 {
  margin: 5px 0 0;
  font-size: 23px;
}

.progress-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
  display: grid;
}

.progress-pair > div > span {
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 750;
  display: flex;
}

.progress-pair .progress-track {
  margin-top: 8px;
}

.mastery-track .progress-fill {
  background: linear-gradient(90deg, #e49c28, #f2bb4c);
}

.progress-summary {
  margin-top: 12px;
}

.sequence-progress-list {
  border-top: 1px solid var(--line);
  gap: 2px;
  margin-top: 20px;
  display: grid;
}

.sequence-progress-row {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 10px 2px;
  display: flex;
}

.sequence-progress-row > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.sequence-progress-row small, .unsubscribed-card small, .subject-xp-card small, .streak-history-list small, .recent-activity-main small {
  color: var(--muted);
  line-height: 1.45;
}

.progress-state {
  color: #596174;
  text-transform: uppercase;
  background: #edf0f5;
  border-radius: 999px;
  flex: none;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
}

.state-mastered {
  color: #12654f;
  background: #dcf7ed;
}

.state-completed, .state-in_progress {
  color: #614713;
  background: #fff0c9;
}

.state-locked {
  color: #6c5163;
  background: #f5eaf1;
}

.unsubscribed-grid, .subject-xp-grid, .badge-collection {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.unsubscribed-card, .subject-xp-card, .badge-collection article {
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 16px;
  display: flex;
}

.unsubscribed-card > div, .subject-xp-card > div, .badge-collection article > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.unsubscribed-card .chip, .subject-xp-card > strong {
  margin-left: auto;
}

.recent-activity-row {
  grid-template-columns: minmax(220px, 1fr) minmax(500px, 1.4fr);
  align-items: center;
  gap: 24px;
  padding: 18px;
  display: grid;
}

.recent-activity-main {
  gap: 5px;
  display: grid;
}

.attempt-metrics {
  grid-template-columns: 1.35fr repeat(4, minmax(60px, .75fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.attempt-metrics > div {
  background: var(--paper);
  border-radius: 11px;
  min-width: 0;
  padding: 9px;
}

.attempt-metrics dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 850;
}

.attempt-metrics dd {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 850;
}

.compact-empty {
  grid-auto-flow: column;
  min-height: 110px;
  padding: 18px;
}

.rewards-grid, .streak-grid {
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  align-items: start;
  gap: 20px;
  margin-top: 28px;
  display: grid;
}

.rewards-level-card, .leaderboard-card, .streak-summary-card, .streak-calendar-card {
  padding: clamp(20px, 3vw, 28px);
}

.rewards-level-card h2, .streak-summary-card h2 {
  margin: 8px 0 18px;
  font-size: 34px;
}

.reward-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
  display: grid;
}

.reward-summary > div {
  color: var(--brand-dark);
  background: #f3f1ff;
  border-radius: 13px;
  justify-items: center;
  gap: 4px;
  padding: 12px 8px;
  display: grid;
}

.reward-summary small {
  color: var(--muted);
  font-size: 10px;
}

.leaderboard-notice {
  background: #fff9fc;
  border: 1px dashed #b49aaa;
  border-radius: 14px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  display: grid;
}

.leaderboard-notice p {
  color: var(--muted);
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.leaderboard-opted-in {
  color: #176b56;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: flex;
}

.subject-xp-card > strong {
  color: var(--brand-dark);
}

.badge-collection .stat-icon {
  color: #876a15;
  background: #fff0bd;
}

.streak-summary-card {
  justify-items: start;
  display: grid;
}

.streak-summary-card .progress-track, .streak-summary-card .primary-button {
  width: 100%;
}

.streak-goal-copy, .streak-success {
  align-items: center;
  gap: 8px;
  display: flex;
}

.streak-success {
  color: #12654f;
  background: #dcf7ed;
  border-radius: 13px;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  font-weight: 800;
}

.calendar-weekdays {
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 7px;
  display: grid;
}

.calendar-weekdays span {
  color: var(--muted);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
}

.day.active {
  color: #785617;
  background: #fff0c9;
}

.day.spacer {
  visibility: hidden;
}

.calendar-legend {
  color: var(--muted);
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 750;
  display: flex;
}

.calendar-legend span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.calendar-legend i {
  border-radius: 3px;
  width: 10px;
  height: 10px;
}

.calendar-legend i.active {
  background: #fff0c9;
}

.calendar-legend i.done {
  background: #dff7ef;
}

.streak-history-list article {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 16px;
  display: grid;
}

.streak-history-list article > div {
  gap: 4px;
  display: grid;
}

.activity-dot.goal-met {
  color: #12654f;
  background: #dcf7ed;
}

.parent-area {
  width: min(1380px, 100%);
  margin-inline: auto;
}

.parent-unlock-card {
  max-width: 480px;
  margin-top: 28px;
}

.parent-unlock-card h2 {
  margin-top: 18px;
}

.parent-unlock-card form, .parent-unlock-card label, .parent-form-grid label {
  gap: 7px;
  display: grid;
}

.parent-unlock-card form {
  margin-top: 20px;
}

.parent-unlock-card label, .parent-form-grid label {
  font-size: 13px;
  font-weight: 800;
}

.parent-unlock-card input, .parent-form-grid input, .parent-form-grid select {
  width: 100%;
  min-height: 48px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
}

.parent-unlock-card form > p {
  color: #b33424;
}

.parent-unlock-card .primary-button {
  color: #fff;
  background: var(--brand);
  width: fit-content;
}

.parent-toolbar {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-top: 30px;
  display: flex;
}

.parent-toolbar h2 {
  margin: 5px 0 0;
}

.parent-editor {
  margin-top: 18px;
  padding: 22px;
}

.parent-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
  display: grid;
}

.parent-form-grid > .primary-button {
  align-self: end;
  width: fit-content;
}

.parent-toggle-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.parent-toggle-grid label {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 9px 11px;
  display: flex;
}

.parent-toggle-grid input {
  width: 17px;
  height: 17px;
  min-height: 17px;
  accent-color: var(--brand);
}

.parent-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  display: grid;
}

.parent-profile-card {
  padding: 20px;
}

.parent-profile-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  display: grid;
}

.parent-profile-heading h3, .parent-profile-heading p {
  margin: 0;
}

.parent-profile-heading p {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
}

.parent-profile-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 18px 0 12px;
  display: grid;
}

.parent-profile-stats span {
  color: var(--muted);
  background: #f5f6f8;
  border-radius: 10px;
  gap: 3px;
  padding: 9px;
  font-size: 10px;
  display: grid;
}

.parent-profile-stats strong {
  color: var(--ink);
  font-size: 15px;
}

.parent-subscriptions {
  border-top: 1px solid var(--line);
  gap: 5px;
  margin-top: 16px;
  padding-top: 13px;
  font-size: 12px;
  display: grid;
}

.parent-subscriptions span {
  color: var(--muted);
}

.parent-subscriptions > div, .parent-price-offer {
  background: #f7f8fa;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 9px;
  display: flex;
}

.parent-subscriptions .secondary-button, .parent-price-offer .primary-button {
  flex: none;
  min-height: 32px;
  padding: 0 10px;
  font-size: 10px;
}

.parent-price-offer {
  background: #f5f3ff;
  border: 1px solid #d8d3ff;
  margin-top: 4px;
}

.parent-retire-button {
  color: #a2382b;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  margin-top: 16px;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}

.parent-retire-button:hover {
  text-decoration: underline;
}

@media (max-width: 1180px) {
  .cms-loading-studio {
    grid-template-columns: 1fr;
  }

  .cms-preview-column, .cms-keyboard-coverage {
    position: static;
  }

  .cms-keyboard-studio {
    grid-template-columns: 1fr;
  }

  .cms-loading-grid, .cms-role-picker > div, .cms-audit-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cms-loading-metrics, .cms-loading-fields, .cms-loading-grid {
    grid-template-columns: 1fr;
  }

  .cms-loading-metrics {
    gap: 9px;
  }

  .cms-user-editor-fields, .cms-role-picker > div, .cms-audit-toolbar, .cms-gamification-filters, .parent-form-grid, .parent-toggle-grid {
    grid-template-columns: 1fr;
  }

  .parent-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .parent-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cms-loading-filters, .cms-audit-event-title {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-audit-event {
    padding: 15px;
  }

  .cms-loading-filters, .cms-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-segmented-control {
    overflow-x: auto;
  }

  .cms-segmented-control button {
    flex: 1;
  }

  .cms-preview-column {
    padding: 12px;
  }
}

.cms-keyboard-editor {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.cms-keyboard-page {
  background: radial-gradient(circle at 88% 0%,
      #43c7a114,
      transparent 30rem),
    var(--paper);
}

.cms-keyboard-guidance {
  color: #735116;
  background: #fff8e5;
  border: 1px solid #f2d58f;
  border-radius: 15px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  padding: 15px 17px;
  display: grid;
}

.cms-keyboard-guidance strong, .cms-keyboard-guidance p {
  margin: 0;
  display: block;
}

.cms-keyboard-guidance p {
  color: #7b6843;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
}

.cms-keyboard-studio {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .7fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.cms-keyboard-profile-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 24px 24px;
  display: grid;
}

.cms-keyboard-profile-fields > label, .cms-keyboard-entry label {
  color: var(--ink);
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.cms-keyboard-profile-fields input, .cms-keyboard-profile-fields select, .cms-keyboard-entry input, .cms-keyboard-entry select {
  width: 100%;
  min-height: 46px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 9px 11px;
}

.cms-keyboard-profile-fields small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.cms-keyboard-assignment-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px 10px;
  display: flex;
}

.cms-keyboard-assignment-heading > div:first-child {
  align-items: center;
  gap: 12px;
  display: flex;
}

.cms-keyboard-assignment-heading h2, .cms-keyboard-assignment-heading p {
  margin: 0;
}

.cms-keyboard-assignment-heading h2 {
  color: var(--ink);
  font-size: 18px;
}

.cms-keyboard-assignment-heading p {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
}

.cms-keyboard-entry-list {
  gap: 12px;
  padding: 10px 24px 24px;
  display: grid;
}

.cms-keyboard-entry {
  border: 1px solid var(--line);
  background: #fbfcfe;
  border-radius: 14px;
  grid-template-columns: minmax(100px, .35fr) minmax(220px, 1fr) 44px 44px;
  align-items: end;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.cms-keyboard-empty {
  min-height: 150px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #cbd0db;
  border-radius: 14px;
  align-content: center;
  place-items: center;
  display: grid;
}

.cms-keyboard-empty strong, .cms-keyboard-empty p {
  margin: 7px 0 0;
}

.cms-keyboard-empty p {
  font-size: 11px;
}

.cms-keyboard-coverage {
  color: #fff;
  background: radial-gradient(circle at 80% 10%, #43c7a12e, #0000 36%), #20263a;
  border-radius: 20px;
  padding: 18px;
  position: sticky;
  top: 22px;
  box-shadow: 0 22px 50px #1c203326;
}

.cms-coverage-bar {
  background: #ffffff21;
  border-radius: 99px;
  height: 7px;
  margin-bottom: 18px;
  overflow: hidden;
}

.cms-coverage-bar span {
  border-radius: inherit;
  background: linear-gradient(90deg, #43c7a1, #77e6c5);
  height: 100%;
  display: block;
}

.cms-coverage-keyboard {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.cms-coverage-keyboard button {
  aspect-ratio: 1;
  color: #c8cedd;
  min-height: 42px;
  font: inherit;
  cursor: pointer;
  background: #2b3349;
  border: 1px solid #414b63;
  border-bottom-width: 3px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  position: relative;
}

.cms-coverage-keyboard button:hover {
  color: #fff;
  border-color: #8b82e8;
}

.cms-coverage-keyboard button.configured {
  color: #182f29;
  background: #c7f5e7;
  border-color: #6de0bd;
}

.cms-coverage-keyboard button i {
  background: #16835f;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.cms-coverage-legend {
  color: #c6cada;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 14px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.cms-coverage-legend span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.cms-coverage-legend i {
  background: #424b62;
  border-radius: 3px;
  width: 9px;
  height: 9px;
}

.cms-coverage-legend i.custom {
  background: #7be1c2;
}

.cms-keyboard-preview-note {
  color: #d7dbea;
  background: #ffffff0a;
  border: 1px solid #3c455d;
  border-radius: 12px;
  align-items: start;
  gap: 9px;
  margin-top: 17px;
  padding: 12px;
  display: flex;
}

.cms-keyboard-preview-note svg {
  color: #9d93ff;
  flex: none;
}

.cms-keyboard-preview-note p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.cms-keyboard-set-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  display: grid;
}

.cms-keyboard-set {
  padding: 20px;
}

.cms-keyboard-set h3 {
  color: var(--ink);
  margin: 9px 0 0;
  font-size: 16px;
}

.cms-locale-badge {
  color: #5145b6;
  background: #efedff;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.cms-set-coverage {
  color: var(--muted);
  gap: 7px;
  margin-top: 16px;
  font-size: 10px;
  display: grid;
}

.cms-set-coverage > i {
  background: #edf0f4;
  border-radius: 99px;
  height: 6px;
  display: block;
  overflow: hidden;
}

.cms-set-coverage b {
  border-radius: inherit;
  background: #43c7a1;
  height: 100%;
  display: block;
}

.cms-key-preview {
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  display: flex;
}

.cms-key-preview button {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 800;
}

.cms-key-preview button:hover, .cms-key-preview button:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}

@media (max-width: 700px) {
  .cms-keyboard-guidance, .cms-keyboard-profile-fields, .cms-keyboard-set-grid, .cms-keyboard-studio {
    grid-template-columns: 1fr;
  }

  .cms-keyboard-coverage {
    position: static;
  }

  .cms-keyboard-assignment-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-keyboard-entry {
    grid-template-columns: 1fr 1fr;
  }
}

.payment-page {
  max-width: 920px;
}

.payment-order-card, .parent-payment-orders, .settings-payment-list {
  gap: 1rem;
  display: grid;
}

.payment-order-heading, .payment-line-item, .payment-total, .parent-payment-order, .settings-payment-order {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.payment-order-heading h2 {
  overflow-wrap: anywhere;
  margin: .25rem 0 0;
  font-size: 1rem;
}

.payment-status {
  background: #f1efff;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 700;
}

.payment-status.status-paid {
  color: #14653a;
  background: #e4f8ed;
}

.payment-status.status-failed, .payment-status.status-canceled, .payment-status.status-expired {
  color: #8e2f24;
  background: #fff0ed;
}

.payment-learner-group {
  border: 1px solid #dedbe8;
  border-radius: 1rem;
  gap: .75rem;
  padding: 1rem;
  display: grid;
}

.payment-learner-group h3 {
  margin: 0;
}

.payment-line-item span, .parent-payment-order > div, .settings-payment-order > span {
  gap: .2rem;
  display: grid;
}

.payment-total {
  border-top: 1px solid #dedbe8;
  padding-top: 1rem;
  font-size: 1.15rem;
}

.payment-actions {
  flex-wrap: wrap;
  gap: .75rem;
  display: flex;
}

.parent-payment-order, .settings-payment-order {
  border-top: 1px solid #dedbe8;
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .payment-order-heading, .payment-line-item, .parent-payment-order, .settings-payment-order {
    flex-direction: column;
    align-items: flex-start;
  }
}

.landing-shell {
  background: radial-gradient(circle at 85% 9%, #6256d924, #0000 25rem), linear-gradient(#fbfbff 0, #f7f8fd 32rem, #fff 100%);
  min-height: 100dvh;
  overflow: clip;
}

.landing-header {
  z-index: 30;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #ffffffe0;
  border-block-end: 1px solid #e6e9f0cc;
  align-items: center;
  gap: 28px;
  min-height: 76px;
  padding-inline: max(24px, 50vw - 590px);
  display: flex;
  position: sticky;
  inset-block-start: 0;
}

.landing-logo {
  letter-spacing: -.035em;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 800;
  display: inline-flex;
}

.landing-logo .brand-mark {
  border-radius: 11px;
  width: 35px;
  height: 35px;
}

.landing-desktop-nav {
  color: #4e5b75;
  align-items: center;
  gap: clamp(15px, 2vw, 28px);
  margin-inline: auto;
  font-size: .94rem;
  display: flex;
}

.landing-desktop-nav a, .landing-footer nav a {
  transition: color .16s, transform .16s;
}

.landing-desktop-nav a:hover, .landing-footer nav a:hover {
  color: var(--brand-dark);
}

.landing-header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.landing-sign-in {
  min-height: 44px;
  color: var(--brand-dark);
  justify-content: center;
  align-items: center;
  padding-inline: 14px;
  font-weight: 700;
  display: inline-flex;
}

.landing-menu-button {
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: #fff;
  border-radius: 13px;
  place-items: center;
  display: none;
}

.landing-mobile-menu {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  display: grid;
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline: 18px;
}

.landing-mobile-menu a {
  border-radius: 10px;
  align-items: center;
  min-height: 46px;
  padding-inline: 14px;
  display: flex;
}

.landing-mobile-menu a:hover {
  background: #f4f2ff;
}

.landing-hero, .landing-section, .landing-final-cta, .landing-footer {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}

.landing-hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
  min-height: 680px;
  padding-block: 92px 80px;
  display: grid;
}

.landing-hero-copy h1 {
  letter-spacing: -.06em;
  max-width: 720px;
  margin: 20px 0;
  font-size: clamp(3rem, 6.2vw, 5.6rem);
  line-height: .96;
}

.landing-hero-copy > p:not(.landing-clarification) {
  max-width: 620px;
  color: var(--muted);
  margin: 0;
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: 1.7;
}

.landing-pill {
  width: fit-content;
  min-height: 36px;
  color: var(--brand-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #f4f2ff;
  border: 1px solid #d9d4ff;
  border-radius: 999px;
  align-items: center;
  padding: 7px 13px;
  font-size: .86rem;
  font-weight: 750;
  display: inline-flex;
}

.landing-cta-row {
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 30px;
  display: flex;
}

.landing-cta-row .primary-button, .landing-cta-row .secondary-button {
  min-height: 50px;
  padding-inline: 21px;
}

.landing-primary-cta, .landing-final-cta .primary-button, .landing-final-cta .secondary-button, .text-link {
  align-items: center;
  gap: 9px;
  display: inline-flex;
}

[dir="rtl"] .landing-primary-cta svg, [dir="rtl"] .text-link svg {
  transform: scaleX(-1);
}

.landing-clarification {
  color: var(--muted);
  margin: 12px 0 0;
  font-size: .9rem;
}

.landing-preview {
  background: radial-gradient(circle at 95% 0, #ff705d29, #0000 15rem), #fff;
  border: 1px solid #dcd8ffd9;
  border-radius: 32px;
  padding: clamp(26px, 4vw, 42px);
  position: relative;
  box-shadow: 0 30px 80px #30278529;
}

.landing-preview:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  background: #eae7ff;
  position: absolute;
  inset: 24px -22px -22px 24px;
  transform: rotate(2deg);
}

.landing-preview-top {
  color: var(--muted);
  justify-content: space-between;
  gap: 18px;
  font-size: .88rem;
  font-weight: 700;
  display: flex;
}

.landing-preview-progress {
  background: #eceef5;
  border-radius: 999px;
  height: 8px;
  margin-block: 12px 34px;
  overflow: hidden;
}

.landing-preview-progress span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #897df5);
  height: 100%;
  display: block;
}

.landing-preview h2 {
  margin: 12px 0 25px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.landing-answer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  display: grid;
}

.landing-answer-grid button {
  min-height: 52px;
  color: var(--ink);
  cursor: pointer;
  background: #fafaff;
  border: 1px solid #dfe2ec;
  border-radius: 14px;
}

.landing-answer-grid button:hover, .landing-answer-grid button:focus-visible {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: #f3f1ff;
}

.landing-preview-reward {
  color: #226b56;
  background: #e7f8f2;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  margin-block-start: 20px;
  padding: 13px 15px;
  font-size: .91rem;
  display: flex;
}

.landing-preview-reward svg {
  flex: none;
}

.landing-section {
  padding-block: 92px;
  scroll-margin-top: 80px;
}

.landing-section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}

.landing-section-heading h2, .landing-split h2, .landing-final-cta h2 {
  letter-spacing: -.045em;
  margin: 11px 0 14px;
  font-size: clamp(2.25rem, 4.2vw, 3.6rem);
  line-height: 1.05;
}

.landing-section-heading p, .landing-split p, .landing-final-cta p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.landing-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.landing-steps article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  min-height: 250px;
  padding: 26px;
  position: relative;
  box-shadow: 0 14px 44px #1b24420f;
}

.landing-step-number {
  color: #c9c4ee;
  font-size: 2rem;
  font-weight: 800;
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 22px;
}

.landing-steps article > svg {
  width: 42px;
  height: 42px;
  color: var(--brand);
  background: #efedff;
  border-radius: 13px;
  padding: 10px;
}

.landing-steps h3, .landing-feature-card h3, .landing-price-card h3 {
  margin: 22px 0 9px;
  font-size: 1.22rem;
}

.landing-steps p, .landing-price-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.landing-soft-section {
  position: relative;
}

.landing-soft-section:before {
  content: "";
  z-index: -1;
  background: #f4f3fc;
  position: absolute;
  inset-block: 30px;
  inset-inline: -100vw;
}

.landing-feature-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.landing-feature-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  align-content: space-between;
  min-height: 150px;
  padding: 22px 16px;
  display: grid;
}

.landing-feature-card > span {
  color: #fff;
  background: linear-gradient(135deg, #7468e8, #5549c8);
  border-radius: 14px;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
}

.landing-feature-card h3 {
  margin-block-end: 0;
}

.landing-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  display: grid;
}

.landing-split article {
  background: #eeecff;
  border-radius: 30px;
  min-height: 420px;
  padding: clamp(30px, 5vw, 54px);
}

.landing-split article .eyebrow, .landing-split article > p {
  color: #566078;
}

.landing-split article:last-child {
  background: #e8f8f2;
}

.landing-split article > svg {
  width: 54px;
  height: 54px;
  color: var(--brand);
  margin-block-end: 30px;
}

.landing-split ul {
  color: #48536b;
  gap: 10px;
  padding-inline-start: 20px;
  line-height: 1.5;
  display: grid;
}

.text-link {
  min-height: 44px;
  color: var(--brand-dark);
  margin-block-start: 12px;
  font-weight: 800;
}

.landing-scope-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.landing-scope-row span {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 18px;
  font-weight: 750;
  display: flex;
}

.landing-scope-row svg {
  color: var(--gold);
}

.landing-pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.landing-price-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 24px;
  flex-direction: column;
  min-height: 320px;
  padding: 28px;
  display: flex;
  box-shadow: 0 14px 44px #1b24420f;
}

.landing-price-card .module-icon {
  color: #fff;
  background: var(--brand);
  border-radius: 15px;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.35rem;
  display: grid;
}

.landing-price-card strong {
  margin-block-start: auto;
  padding-block-start: 24px;
  font-size: 1.35rem;
}

.landing-price-card small {
  color: var(--muted);
  margin-block-start: 4px;
}

.landing-empty-offers {
  text-align: center;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  min-height: 220px;
}

.landing-empty-offers > svg {
  color: var(--brand);
}

.landing-faq {
  gap: 12px;
  max-width: 850px;
  margin-inline: auto;
  display: grid;
}

.landing-faq details {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  padding: 0 22px;
}

.landing-faq summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  font-size: 1.08rem;
  font-weight: 750;
  display: flex;
}

.landing-faq p {
  color: var(--muted);
  margin: -4px 0 22px;
  line-height: 1.65;
}

.landing-final-cta {
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 20% 0, #ffffff24, #0000 18rem), linear-gradient(135deg, #5145bf, #7164e1);
  border-radius: 34px;
  flex-direction: column;
  align-items: center;
  margin-block: 50px 100px;
  padding: clamp(44px, 8vw, 82px);
  display: flex;
}

.landing-final-cta > svg {
  color: #ffd476;
  width: 48px;
  height: 48px;
}

.landing-final-cta p {
  color: #ffffffd1;
  max-width: 660px;
}

.landing-final-cta .primary-button {
  color: var(--brand-dark);
  background: #fff;
}

.landing-final-cta .secondary-button {
  color: #fff;
  background: none;
  border-color: #ffffff8c;
}

.landing-footer {
  border-block-start: 1px solid var(--line);
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 32px;
  padding-block: 36px 48px;
  display: grid;
}

.landing-footer p, .landing-footer small {
  color: var(--muted);
  margin: 7px 0 0;
}

.landing-footer nav {
  gap: 22px;
  display: flex;
}

@media (max-width: 1040px) {
  .landing-desktop-nav {
    display: none;
  }

  .landing-header-actions {
    margin-inline-start: auto;
  }

  .landing-menu-button {
    display: grid;
  }

  .landing-hero {
    grid-template-columns: 1fr 420px;
    gap: 38px;
  }

  .landing-steps, .landing-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .landing-header {
    min-height: 68px;
    padding-inline: 18px;
  }

  .landing-header-actions > .primary-button, .landing-sign-in {
    display: none;
  }

  .landing-hero, .landing-section, .landing-final-cta, .landing-footer {
    width: min(100% - 32px, 680px);
  }

  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 64px 78px;
  }

  .landing-hero-copy {
    text-align: center;
  }

  .landing-hero-copy h1, .landing-hero-copy > p, .landing-pill {
    margin-inline: auto;
  }

  .landing-cta-row {
    justify-content: center;
  }

  .landing-preview {
    max-width: 560px;
    margin-inline: auto;
  }

  .landing-split, .landing-pricing-grid {
    grid-template-columns: 1fr;
  }

  .landing-split article {
    min-height: auto;
  }

  .landing-scope-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-footer {
    text-align: center;
    grid-template-columns: 1fr;
  }

  .landing-footer > div, .landing-footer nav {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .landing-logo {
    font-size: 1.08rem;
  }

  .landing-header-actions {
    gap: 6px;
  }

  .landing-hero-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .landing-cta-row {
    display: grid;
  }

  .landing-cta-row .primary-button, .landing-cta-row .secondary-button {
    justify-content: center;
    width: 100%;
  }

  .landing-answer-grid, .landing-steps, .landing-feature-grid {
    grid-template-columns: 1fr;
  }

  .landing-steps article {
    min-height: 210px;
  }

  .landing-feature-card {
    min-height: 116px;
  }

  .landing-scope-row {
    grid-template-columns: 1fr;
  }

  .landing-footer nav {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-desktop-nav a, .landing-footer nav a {
    transition: none;
  }
}

.account-entry-page, .account-choice-page {
  background: radial-gradient(circle at 12% 6%, #6256d921, #0000 25rem), radial-gradient(circle at 90% 95%, #43c7a11f, #0000 22rem), #f8f9fd;
  min-height: 100dvh;
  padding: clamp(28px, 6vw, 72px) 20px;
}

.account-entry-page {
  place-items: center;
  display: grid;
}

.account-entry-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 28px;
  width: min(100%, 570px);
  padding: clamp(28px, 5vw, 50px);
  box-shadow: 0 24px 70px #1b24421c;
}

.account-entry-card > .landing-logo {
  margin-block-end: 38px;
}

.account-entry-card > .eyebrow {
  display: block;
}

.account-entry-card h1 {
  letter-spacing: -.05em;
  margin: 10px 0 12px;
  font-size: clamp(2.2rem, 6vw, 3.3rem);
  line-height: 1;
}

.account-entry-card > p {
  color: var(--muted);
  line-height: 1.65;
}

.account-entry-card form {
  margin-block-start: 30px;
}

.account-entry-card .form-label:not(:first-child) {
  margin-block-start: 18px;
}

.field-help {
  color: var(--muted);
  margin-block-start: 7px;
  display: block;
}

.account-check {
  color: #46516a;
  cursor: pointer;
  align-items: flex-start;
  gap: 11px;
  margin-block-start: 18px;
  line-height: 1.45;
  display: flex;
}

.account-check input {
  width: 19px;
  height: 19px;
  accent-color: var(--brand);
  flex: none;
  margin-block-start: 1px;
}

.account-submit, .account-google {
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  margin-block-start: 22px;
  display: flex;
}

[dir="rtl"] .account-submit svg:last-child, [dir="rtl"] .account-choice-grid a span svg {
  transform: scaleX(-1);
}

.account-divider {
  color: var(--muted);
  align-items: center;
  gap: 12px;
  margin-block: 24px 0;
  display: flex;
}

.account-divider:before, .account-divider:after {
  content: "";
  background: var(--line);
  flex: 1;
  height: 1px;
}

.account-google {
  margin-block-start: 14px;
}

.account-sign-in {
  margin-block: 26px 0 0;
  text-align: center;
}

.account-sign-in a {
  color: var(--brand-dark);
  font-weight: 800;
}

.account-choice-page {
  align-content: center;
  display: grid;
}

.account-choice-page > .landing-section-heading {
  margin-block-end: 32px;
}

.account-choice-page h1 {
  letter-spacing: -.055em;
  margin: 11px 0 14px;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1;
}

.account-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(100%, 920px);
  margin-inline: auto;
  display: grid;
}

.account-choice-grid > a {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 28px;
  flex-direction: column;
  min-height: 360px;
  padding: clamp(28px, 5vw, 44px);
  transition: transform .18s, border-color .18s;
  display: flex;
  box-shadow: 0 18px 55px #1b244214;
}

.account-choice-grid > a:hover {
  border-color: #c7c0ff;
  transform: translateY(-4px);
}

.account-choice-grid > a > svg {
  width: 52px;
  height: 52px;
  color: var(--brand);
  background: #efedff;
  border-radius: 16px;
  padding: 12px;
}

.account-choice-grid h2 {
  margin: 28px 0 10px;
  font-size: 2rem;
}

.account-choice-grid p {
  color: var(--muted);
  line-height: 1.6;
}

.account-choice-grid strong {
  color: #915526;
  font-size: .92rem;
}

.account-choice-grid a span {
  min-height: 44px;
  color: var(--brand-dark);
  align-items: center;
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 20px;
  font-weight: 800;
  display: flex;
}

.account-message-card {
  text-align: center;
}

.account-message-card > .brand-mark {
  margin-inline: auto;
}

.account-message-icon {
  color: #27886b;
  background: #e6f8f1;
  border-radius: 20px;
  width: 64px;
  height: 64px;
  margin: 28px auto 12px;
  padding: 14px;
  display: block;
}

.account-message-icon.warning {
  color: #a76525;
  background: #fff3df;
}

@media (max-width: 680px) {
  .account-choice-grid {
    grid-template-columns: 1fr;
  }

  .account-choice-grid > a {
    min-height: 310px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-choice-grid > a {
    transition: none;
  }
}

.onboarding-page {
  background: radial-gradient(circle at 8% 0, #6256d91f, #0000 28rem), radial-gradient(circle at 100% 90%, #43c7a11a, #0000 24rem), #f7f8fc;
  min-height: 100dvh;
  padding: 28px max(20px, 50vw - 620px) 70px;
}

.onboarding-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  margin-block-end: 26px;
  display: flex;
}

.onboarding-header > div {
  gap: 4px;
  display: grid;
}

.onboarding-header strong {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
}

.onboarding-layout {
  grid-template-columns: 220px minmax(0, 860px);
  justify-content: center;
  align-items: start;
  gap: 34px;
  display: grid;
}

.onboarding-progress {
  padding-block: 16px;
  display: grid;
  position: sticky;
  inset-block-start: 24px;
}

.onboarding-progress > div {
  color: #8991a5;
  grid-template-columns: 38px 1fr;
  align-items: start;
  gap: 11px;
  min-height: 66px;
  display: grid;
  position: relative;
}

.onboarding-progress > div:not(:last-child):after {
  content: "";
  background: #dfe2eb;
  width: 2px;
  position: absolute;
  inset-block: 33px -1px;
  inset-inline-start: 16px;
}

.onboarding-progress > div > span {
  z-index: 1;
  background: #f7f8fc;
  border: 2px solid #dfe2eb;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 800;
  display: grid;
}

.onboarding-progress > div > span svg {
  width: 17px;
}

.onboarding-progress small {
  padding-block-start: 8px;
  font-size: .9rem;
  font-weight: 700;
}

.onboarding-progress .current {
  color: var(--brand-dark);
}

.onboarding-progress .current > span {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.onboarding-progress .complete {
  color: #27886b;
}

.onboarding-progress .complete > span {
  color: #fff;
  border-color: var(--mint);
  background: var(--mint);
}

.onboarding-progress .complete:not(:last-child):after {
  background: var(--mint);
}

.onboarding-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 30px;
  min-width: 0;
  padding: clamp(28px, 5vw, 54px);
  box-shadow: 0 24px 70px #1b244217;
}

.onboarding-card h1 {
  letter-spacing: -.05em;
  margin: 11px 0 13px;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1;
}

.onboarding-card > p, .onboarding-card > form > p {
  max-width: 690px;
  color: var(--muted);
  line-height: 1.65;
}

.onboarding-stage-icon {
  width: 52px;
  height: 52px;
  color: var(--brand);
  background: #efedff;
  border-radius: 17px;
  margin-block-end: 28px;
  padding: 13px;
  display: block;
}

.onboarding-form-grid, .onboarding-pin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-block-start: 30px;
  display: grid;
}

.onboarding-card label > .form-label {
  display: block;
}

.onboarding-card > label, .onboarding-not-listed {
  margin-block-start: 20px;
  display: block;
}

.pin-input {
  letter-spacing: .35em;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.4rem;
}

.onboarding-note {
  color: #4c5570;
  background: #f4f5fa;
  border-radius: 14px;
  align-items: flex-start;
  gap: 10px;
  margin-block-start: 24px;
  padding: 14px 16px;
  font-size: .92rem;
  display: flex;
}

.onboarding-note svg {
  width: 19px;
  color: var(--brand);
  flex: none;
}

.avatar-picker {
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
}

.avatar-picker legend {
  grid-column: 1 / -1;
  margin-block-end: 9px;
}

.avatar-picker label {
  border: 1px solid var(--line);
  cursor: pointer;
  border-radius: 15px;
  place-items: center;
  gap: 4px;
  min-height: 92px;
  padding: 10px 6px;
  display: grid;
}

.avatar-picker label:has(input:checked) {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: #f2f0ff;
}

.avatar-picker label:has(input:focus-visible) {
  outline: 3px solid var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  .avatar-picker label:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
  }
}

.avatar-picker label:has(input:focus-visible) {
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}

.avatar-picker input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.avatar-picker span {
  font-size: 1.6rem;
}

.avatar-picker small {
  text-align: center;
  font-size: .78rem;
}

.onboarding-not-listed {
  background: #fafbfe;
  border: 1px dashed #cfd3e2;
  border-radius: 16px;
  padding: 18px;
}

.onboarding-not-listed > span {
  margin-block-end: 10px;
  font-weight: 750;
  display: block;
}

.onboarding-not-listed small {
  color: var(--muted);
  margin-block-start: 8px;
  line-height: 1.45;
  display: block;
}

.onboarding-pending-label {
  color: #915f00;
  margin-block-start: 10px;
  display: inline-block;
}

.onboarding-location-copy {
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 20px;
  display: flex;
}

.onboarding-combobox {
  display: block;
  position: relative;
}

.onboarding-card > .onboarding-combobox {
  margin-block-start: 20px;
}

.onboarding-combobox-popover {
  z-index: 20;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  max-height: 250px;
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline: 0;
  overflow-y: auto;
  box-shadow: 0 18px 45px #1b244229;
}

.onboarding-combobox-popover ul {
  margin: 0;
  padding: 6px;
  list-style: none;
}

.onboarding-combobox-popover li, .onboarding-combobox-state {
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
}

.onboarding-combobox-popover li[role="option"] {
  cursor: pointer;
}

.onboarding-combobox-popover li.active, .onboarding-combobox-popover li[aria-selected="true"] {
  color: var(--brand-dark);
  background: #efedff;
}

.onboarding-combobox-popover small {
  color: var(--muted);
}

.onboarding-save-status.unsaved {
  color: #895f00;
}

.onboarding-save-status.failed {
  color: #b42318;
}

.onboarding-save-status.saving {
  color: var(--brand);
}

.onboarding-subject-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-block-start: 28px;
  display: grid;
}

.onboarding-subject-grid label {
  border: 1px solid var(--line);
  cursor: pointer;
  border-radius: 17px;
  grid-template-columns: auto 42px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  display: grid;
}

.onboarding-subject-grid label:has(input:checked) {
  border-color: var(--brand);
  background: #f4f2ff;
}

.onboarding-subject-grid label.unavailable {
  opacity: .58;
  cursor: not-allowed;
}

.onboarding-subject-grid input {
  width: 19px;
  height: 19px;
  accent-color: var(--brand);
}

.onboarding-subject-grid .module-icon {
  color: #fff;
  background: var(--brand);
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.onboarding-subject-grid label > div {
  gap: 5px;
  display: grid;
}

.onboarding-subject-grid small {
  color: var(--muted);
}

.onboarding-empty {
  color: var(--muted);
  text-align: center;
  background: #f6f7fa;
  border-radius: 16px;
  padding: 25px;
}

.onboarding-location-summary {
  color: #315d50;
  background: #eaf8f3;
  border-radius: 15px;
  align-items: center;
  gap: 10px;
  margin-block: 25px;
  padding: 15px 17px;
  display: flex;
}

.onboarding-location-summary svg {
  flex: none;
}

.onboarding-location-summary span {
  flex: 1;
}

.onboarding-switches {
  gap: 9px;
  display: grid;
}

.onboarding-switches label {
  border: 1px solid var(--line);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  padding: 11px 15px;
  display: flex;
}

.onboarding-switches input[role="switch"] {
  width: 44px;
  height: 24px;
  accent-color: var(--brand);
  flex: none;
}

.onboarding-switches .form-select.compact {
  width: auto;
  min-height: 40px;
}

.onboarding-card h2 {
  margin-block: 34px 14px;
  font-size: 1.5rem;
}

.onboarding-learner-list {
  gap: 10px;
  margin-block-start: 27px;
  display: grid;
}

.onboarding-learner-list article {
  border: 1px solid var(--line);
  border-radius: 16px;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 13px 16px;
  display: grid;
}

.onboarding-learner-list .profile-avatar {
  width: 44px;
  height: 44px;
  color: var(--brand-dark);
  background: #ece9ff;
  border-radius: 14px;
  place-items: center;
  font-weight: 800;
  display: grid;
}

.onboarding-learner-list article > div {
  gap: 4px;
  display: grid;
}

.onboarding-learner-list small {
  color: var(--muted);
}

.onboarding-add-learner {
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-block-start: 14px;
  display: inline-flex;
}

.onboarding-order {
  border: 1px solid var(--line);
  border-radius: 19px;
  margin-block-start: 28px;
  overflow: hidden;
}

.onboarding-order article {
  border-block-end: 1px solid var(--line);
  padding: 20px;
}

.onboarding-order article header, .onboarding-order article > div, .onboarding-order > footer {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.onboarding-order article header {
  margin-block-end: 13px;
}

.onboarding-order article header > div {
  gap: 3px;
  display: grid;
}

.onboarding-order article header small {
  color: var(--muted);
}

.onboarding-order article > div {
  color: #515d76;
  padding-block: 9px;
}

.onboarding-order > footer {
  background: #f4f2ff;
  padding: 20px;
  font-size: 1.2rem;
}

.onboarding-actions {
  border-block-start: 1px solid var(--line);
  justify-content: space-between;
  gap: 14px;
  margin-block-start: 34px;
  padding-block-start: 24px;
  display: flex;
}

.onboarding-actions button {
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-inline: 20px;
  display: inline-flex;
}

[dir="rtl"] .onboarding-actions svg {
  transform: scaleX(-1);
}

.onboarding-loading, .onboarding-security {
  text-align: center;
  width: min(100%, 570px);
  margin: 10vh auto 0;
}

.onboarding-loading > svg, .onboarding-security > svg {
  width: 58px;
  height: 58px;
  color: var(--brand);
  background: #efedff;
  border-radius: 18px;
  margin: 0 auto 20px;
  padding: 14px;
  display: block;
}

.onboarding-security form {
  text-align: start;
  margin-block-start: 26px;
}

@media (max-width: 900px) {
  .onboarding-layout {
    grid-template-columns: 1fr;
  }

  .onboarding-progress {
    gap: 6px;
    padding: 0;
    display: flex;
    position: static;
    overflow-x: auto;
  }

  .onboarding-progress > div {
    grid-template-columns: 30px 1fr;
    min-width: 108px;
    min-height: auto;
  }

  .onboarding-progress > div > span {
    width: 30px;
    height: 30px;
  }

  .onboarding-progress > div:after {
    display: none;
  }

  .onboarding-progress small {
    padding-block-start: 6px;
  }
}

@media (max-width: 620px) {
  .onboarding-page {
    padding-inline: 14px;
  }

  .onboarding-header {
    align-items: flex-start;
  }

  .onboarding-card {
    border-radius: 22px;
    padding: 25px 20px;
  }

  .onboarding-form-grid, .onboarding-pin-grid, .onboarding-subject-grid {
    grid-template-columns: 1fr;
  }

  .avatar-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onboarding-actions {
    display: grid;
  }

  .onboarding-actions > span {
    display: none;
  }

  .onboarding-actions button {
    justify-content: center;
    width: 100%;
  }
}

.cms-media-filters {
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 10px;
  margin-top: 24px;
  padding: 14px;
  display: grid;
}

.cms-media-filters > select {
  min-height: 44px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  background: #fff;
  border-radius: 11px;
  padding: 8px 34px 8px 11px;
}

.cms-media-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  display: grid;
}

.cms-media-card {
  overflow: hidden;
}

.cms-media-preview {
  background: linear-gradient(45deg, #f1f3f7 25%, #0000 25%) 0 0 / 20px 20px, linear-gradient(-45deg, #f1f3f7 25%, #0000 25%) 0 0 / 20px 20px, #fafbfc;
  place-items: center;
  min-height: 190px;
  display: grid;
  position: relative;
}

.cms-media-preview img {
  object-fit: contain;
  width: 100%;
  height: 220px;
}

.cms-media-preview audio {
  width: calc(100% - 28px);
}

.cms-media-preview .status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.cms-media-body {
  gap: 14px;
  padding: 18px;
  display: grid;
}

.cms-media-body h2 {
  margin: 5px 0 2px;
  font-size: 18px;
}

.cms-media-body p {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 12px;
}

.cms-media-body dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.cms-media-body dl > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.cms-media-body dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.cms-media-body dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 11px;
  font-weight: 750;
}

.cms-media-tags {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.cms-validation-list {
  color: #9d2e21;
  background: #fff0ed;
  border-radius: 11px;
  margin: 14px 0 0;
  padding: 13px 13px 13px 30px;
  font-size: 12px;
}

.cms-editor-side {
  gap: 18px;
  display: grid;
}

.cms-preview-card {
  box-shadow: var(--shadow);
  background: radial-gradient(circle at 100% 0, #e7e3ff 0, #0000 42%), #fff;
  border: 1px solid #dcd8ff;
  border-radius: 22px;
  padding: 22px;
  overflow: hidden;
}

.cms-preview-topline {
  justify-content: space-between;
}

.cms-preview-card h2 {
  margin: 12px 0 5px;
  font-size: 24px;
}

.cms-preview-prompt {
  border: 1px solid var(--line);
  background: #fffc;
  border-radius: 16px;
  margin: 20px 0 14px;
  padding: 18px;
}

.cms-preview-options, .cms-token-row {
  gap: 9px;
  margin-top: 14px;
  display: grid;
}

.cms-preview-options button, .cms-token-row button {
  min-height: 44px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 9px 12px;
}

.cms-token-row {
  flex-wrap: wrap;
  display: flex;
}

.cms-preview-pair {
  align-items: center;
  gap: 12px;
  min-height: 58px;
  display: flex;
}

.cms-preview-pair img {
  object-fit: contain;
  width: 48px;
  height: 48px;
}

.cms-preview-input {
  margin-top: 14px;
}

.cms-item-row, .cms-version-row {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  min-height: 58px;
}

.cms-item-row > div:first-child, .cms-version-row > div:first-child {
  gap: 3px;
  font-size: 13px;
  display: grid;
}

.cms-readonly-notice {
  color: #5d6472;
  background: #eceef2;
  border: 1px solid #d9dde6;
  border-radius: 12px;
  margin: 20px 0 0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .main {
    padding-bottom: 104px;
  }

  .mobile-nav {
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    z-index: 40;
    background: #fffffff0;
    border-radius: 22px;
    grid-template-columns: repeat(5, 1fr);
    min-height: 68px;
    padding: 7px;
    display: grid;
    position: fixed;
    inset: auto 12px 12px;
    box-shadow: 0 20px 60px #19224033;
  }

  .mobile-nav a {
    min-width: 48px;
    min-height: 52px;
    color: var(--muted);
    border-radius: 15px;
    place-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 800;
    display: grid;
  }

  .mobile-nav a[aria-current="page"] {
    color: var(--brand-dark);
    background: #eeecff;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .progress-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recent-activity-row, .rewards-grid, .streak-grid {
    grid-template-columns: 1fr;
  }

  .right-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  .cms-shell {
    grid-template-columns: 1fr;
    max-width: 100vw;
    overflow-x: clip;
  }

  .cms-nav {
    z-index: 35;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    min-width: 0;
    height: auto;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    overflow: auto hidden;
  }

  .cms-nav .brand {
    display: none;
  }

  .cms-nav nav {
    gap: 6px;
    width: max-content;
    min-width: 100%;
    margin-top: 0;
    display: flex;
  }

  .cms-nav a {
    white-space: nowrap;
    flex: none;
    min-height: 40px;
    padding-inline: 11px;
  }

  .cms-main {
    padding: 24px 20px 72px;
  }

  .cms-content {
    max-width: 100%;
    overflow-x: clip;
  }

  .cms-placeholder-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .cms-filters, .cms-editor-grid {
    grid-template-columns: 1fr;
  }

  .cms-hierarchy-overview, .cms-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cms-media-filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .cms-main {
    padding: 20px 16px 64px;
  }

  .main {
    padding: 14px 16px 104px;
  }

  .topbar {
    min-height: 58px;
  }

  .cms-content {
    padding: 22px 16px;
  }

  .cms-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-title-fields, .cms-option-fields, .cms-cascade-fields, .cms-curriculum-grid, .cms-hierarchy-overview, .cms-media-grid {
    grid-template-columns: 1fr;
  }

  .eyebrow, .profile-button > span {
    display: none;
  }

  .hero {
    border-radius: 24px;
    min-height: 330px;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: 90px;
  }

  .module-card {
    grid-template-columns: 50px 1fr;
  }

  .module-card > svg {
    display: none;
  }

  .subject-catalogue-grid, .right-stack, .feature-grid, .settings-layout, .unsubscribed-grid, .subject-xp-grid, .badge-collection, .progress-pair, .metric-grid, .answer-grid {
    grid-template-columns: 1fr;
  }

  .profile-summary {
    align-items: flex-start;
  }

  .learner-access-state, .learner-access-state.compact {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .learner-access-state .primary-button {
    width: 100%;
  }

  .profile-avatar-large {
    border-radius: 20px;
    width: 64px;
    height: 64px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subject-progress-card > header, .sequence-progress-row {
    flex-direction: column;
    align-items: stretch;
  }

  .attempt-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attempt-metrics > div:first-child {
    grid-column: 1 / -1;
  }

  .leaderboard-notice {
    grid-template-columns: auto 1fr;
  }

  .leaderboard-notice .secondary-button {
    grid-column: 1 / -1;
  }

  .leader-row {
    grid-template-columns: 25px 36px minmax(0, 1fr);
  }

  .leader-row > span:last-child {
    grid-column: 3;
  }

  .streak-history-list article {
    grid-template-columns: auto 1fr;
  }

  .streak-history-list .progress-state {
    grid-column: 2;
    justify-self: start;
  }

  .profile-menu {
    inset-inline-end: 0;
  }

  .cms-heading, .cms-heading-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .card, .stat-card, .primary-button, .answer {
    transition: transform .16s, box-shadow .16s, border-color .16s;
  }

  .card:hover, .stat-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .progress-fill, .goal-ring {
    forced-color-adjust: none;
  }
}

.language-selector {
  gap: 8px;
  display: grid;
}

.language-selector > span {
  color: var(--ink);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
  display: flex;
}

.language-menu {
  width: min(100%, 360px);
  position: relative;
}

.language-menu-trigger {
  width: min(100%, 360px);
  min-height: 44px;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: #fff;
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  font-weight: 700;
  display: flex;
}

.language-menu-trigger > span, .language-menu-option > span {
  flex: 1;
  min-width: 0;
}

.language-menu-trigger:focus-visible, .language-menu-option:focus-visible {
  outline: 3px solid var(--violet);
}

@supports (color: color-mix(in lab, red, red)) {
  .language-menu-trigger:focus-visible, .language-menu-option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--violet) 30%, transparent);
  }
}

.language-menu-trigger:focus-visible, .language-menu-option:focus-visible {
  outline-offset: 2px;
}

.language-menu-trigger:disabled {
  cursor: wait;
  opacity: .65;
}

.language-menu-list {
  z-index: 80;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  gap: 2px;
  padding: 6px;
  display: grid;
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  box-shadow: 0 18px 42px #1c254029;
}

.language-menu-option {
  width: 100%;
  min-height: 40px;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  font-weight: 700;
  display: flex;
}

.language-menu-option:hover, .language-menu-option[aria-selected="true"] {
  background: var(--soft);
}

.locale-flag {
  object-fit: cover;
  border-radius: 2px;
  flex: none;
  width: 24px;
  height: 18px;
  display: block;
  box-shadow: 0 0 0 1px #17223d24;
  transform: none !important;
}

.language-selector small {
  max-width: 680px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.language-selector.compact {
  grid-template-columns: auto minmax(120px, 180px);
  align-items: center;
}

.language-selector.compact .language-menu, .language-selector.compact .language-menu-trigger {
  width: 100%;
}

.cms-language-settings-card {
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: clamp(22px, 4vw, 34px);
  display: flex;
}

.cms-language-settings-card > div {
  flex: 1;
  min-width: 0;
}

.cms-language-settings-card h2 {
  margin: 0 0 16px;
}

.cms-chargily-settings-card {
  margin-top: 18px;
  padding: clamp(22px, 4vw, 34px);
}

.cms-chargily-settings-heading {
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.cms-chargily-settings-heading > div {
  flex: 1;
  min-width: 0;
}

.cms-chargily-title-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.cms-chargily-title-row h2 {
  margin: 0;
}

.cms-chargily-settings-heading p {
  margin: 7px 0 0;
}

.cms-security-note {
  color: #31554b;
  background: #f0fbf7;
  border: 1px solid #cfe9df;
  border-radius: 12px;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding: 12px 14px;
  display: flex;
}

.cms-security-note svg {
  flex: none;
}

.cms-chargily-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
  display: grid;
}

.cms-chargily-form label {
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  display: grid;
}

.cms-chargily-form label small {
  overflow-wrap: anywhere;
  min-height: 16px;
  color: var(--muted);
  font-weight: 500;
}

.cms-secret-input {
  align-items: center;
  min-width: 0;
  display: flex;
  position: relative;
}

.cms-secret-input svg {
  color: var(--muted);
  pointer-events: none;
  position: absolute;
  inset-inline-start: 13px;
}

.cms-secret-input input {
  width: 100%;
  padding-inline-start: 40px;
}

.cms-chargily-url-field, .cms-chargily-form-footer, .cms-chargily-settings-card .settings-status {
  grid-column: 1 / -1;
}

.cms-chargily-form-footer {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.cms-chargily-form-footer p, .cms-chargily-form-footer .cms-form-actions {
  margin: 0;
}

.cms-chargily-settings-card .settings-status {
  min-height: 22px;
  margin: 14px 0 0;
}

.cms-chargily-settings-card .settings-status.error {
  color: #a73333;
}

@media (max-width: 720px) {
  .cms-chargily-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-chargily-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .cms-chargily-form-footer .cms-form-actions {
    justify-content: stretch;
  }

  .cms-chargily-form-footer .button {
    flex: 1;
  }
}

[data-exercise-content] {
  direction: auto;
  text-align: start;
  unicode-bidi: plaintext;
}

html[dir="rtl"] .shell {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 248px;
}

html[dir="rtl"] .shell > * {
  direction: rtl;
}

html[dir="rtl"] .shell > .sidebar {
  border-right: 0;
  border-left: 1px solid var(--line);
  grid-area: 1 / 2;
}

html[dir="rtl"] .shell > .main {
  grid-area: 1 / 1;
}

html[dir="rtl"] .cms-shell {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 260px;
}

html[dir="rtl"] .cms-shell > * {
  direction: rtl;
}

html[dir="rtl"] .cms-shell > .cms-nav {
  grid-area: 1 / 2;
}

html[dir="rtl"] .cms-shell > :not(.cms-nav) {
  grid-area: 1 / 1;
}

html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-card {
  direction: ltr;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
}

html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-main {
  text-align: right;
  direction: rtl;
  grid-column: 2;
}

html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-main strong, html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-main small {
  text-align: right;
}

html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-card-footer {
  direction: rtl;
  border-inline-start: 1px solid #efedf3;
  border-inline-end: 0;
  grid-column: 1;
}

html[dir="rtl"] .lucide-arrow-left, html[dir="rtl"] .lucide-arrow-right, html[dir="rtl"] .lucide-chevron-left, html[dir="rtl"] .lucide-chevron-right {
  transform: scaleX(-1);
}

html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select {
  text-align: start;
}

@media (max-width: 720px) {
  html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-card {
    direction: rtl;
    grid-template-columns: minmax(0, 1fr);
  }

  html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-main, html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-card-footer {
    grid-column: 1;
  }

  html[dir="rtl"] .cms-folder-surface.is-list-view .cms-folder-card-footer {
    border-top: 1px solid #efedf3;
    border-inline-start: 0;
  }
}

@media (max-width: 980px) {
  html[dir="rtl"] .shell {
    display: block;
  }
}

@media (max-width: 700px) {
  html[dir="rtl"] .cms-shell {
    grid-template-columns: 1fr;
  }

  html[dir="rtl"] .cms-shell > .cms-nav, html[dir="rtl"] .cms-shell > :not(.cms-nav) {
    grid-area: auto / 1;
  }

  .cms-language-settings-card {
    flex-direction: column;
  }
}

.learner-preference-boundary {
  font-size: calc(100% * var(--learner-text-scale, 1));
}

.birthday-banner {
  color: #35255f;
  background: linear-gradient(135deg, #fff8d8, #f4edff);
  border: 1px solid #f0c95a;
  border-radius: 18px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  animation: .45s ease-out birthday-arrive;
  display: grid;
}

.birthday-banner div {
  gap: 2px;
  display: grid;
}

@keyframes birthday-arrive {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

html[data-reduced-motion="true"] .birthday-banner {
  animation: none;
}

.parent-tabs {
  gap: 8px;
  margin: 20px 0;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.parent-tabs button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  flex: none;
  padding: 10px 14px;
}

.parent-tabs button[aria-current="page"] {
  color: #fff;
  background: #6256d9;
  border-color: #6256d9;
}

.parent-account-summary, .parent-overview-actions, .parent-security-grid {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.parent-security-grid {
  align-items: stretch;
}

.parent-security-grid > * {
  flex: 1;
}

.parent-session-list, .profile-security-actions, .profile-security-actions > div {
  gap: 10px;
  display: grid;
}

.parent-session-list > div {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.parent-session-list span, .parent-session-list small {
  display: block;
}

.parent-private-avatar {
  object-fit: cover;
  width: 48px;
  height: 48px;
}

.algeria-location-picker {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.location-search {
  position: relative;
}

.location-search-results {
  z-index: 30;
  inset-inline: 0;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  max-height: 220px;
  padding: 6px;
  display: grid;
  position: absolute;
  top: calc(100% + 4px);
  overflow-y: auto;
  box-shadow: 0 14px 35px #221c4f29;
}

.location-search-results button {
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px;
}

.location-search-results button:hover, .location-search-results button:focus-visible {
  background: #f0eeff;
}

.location-search-status {
  min-height: 1em;
  color: var(--muted);
  font-size: .75rem;
}

.profile-identity-main {
  align-items: center;
  gap: 22px;
  display: flex;
}

.profile-private-image, .profile-image-preview img {
  object-fit: cover;
  border-radius: 28px;
  width: 160px;
  height: 160px;
}

.profile-family-switcher {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  display: grid;
}

.profile-family-switcher button, .profile-family-current {
  border: 1px solid var(--border);
  background: var(--card);
  color: inherit;
  text-align: start;
  border-radius: 14px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.profile-family-current {
  background: #f3f1ff;
  border-color: #6256d9;
}

.profile-family-switcher small {
  color: var(--muted);
  display: block;
}

.profile-identity-name {
  margin: 2px 0 8px;
  font-size: 1.65rem;
  font-weight: 700;
}

.learner-name-secondary {
  color: var(--muted);
  margin: -4px 0 8px;
  font-size: .95rem;
}

.profile-quick-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.profile-quick-summary a {
  color: inherit;
  gap: 6px;
  text-decoration: none;
  display: grid;
}

.profile-quick-summary strong {
  font-size: 1.65rem;
}

.profile-identity-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.profile-image-preview, .profile-identity-editor .algeria-location-picker, .profile-identity-editor .parent-toggle-grid, .profile-identity-editor > button, .profile-identity-editor > p {
  grid-column: 1 / -1;
}

.profile-image-preview {
  align-items: end;
  gap: 14px;
  display: flex;
}

.profile-help-footer {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  display: flex;
}

.profile-help-footer a, .profile-help-footer button, .profile-help-footer span {
  color: inherit;
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.profile-help-footer button {
  background: none;
  border: 0;
}

@media (max-width: 760px) {
  .parent-account-summary, .parent-security-grid, .profile-identity-main, .profile-image-preview {
    flex-direction: column;
    align-items: stretch;
  }

  .algeria-location-picker, .profile-identity-editor, .profile-quick-summary {
    grid-template-columns: 1fr;
  }

  .profile-private-image, .profile-image-preview img {
    width: 112px;
    height: 112px;
  }
}

.cms-stage-groups {
  gap: 1.5rem;
  display: grid;
}

.cms-stage-group {
  gap: .75rem;
  display: grid;
}

.cms-stage-group > h3 {
  margin: 0;
  font-size: 1.25rem;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__071a_7n._.css.map*/