/* Self-hosted variable fonts; original SIL OFL licenses are in public/fonts/. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 168 48% 17%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 168 48% 17%;
    --radius: 0.625rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  * {
  border-color: hsl(var(--border));
}
  body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.block {
  display: block;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.resize {
  resize: both;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-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);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.running {
  animation-play-state: running;
}
:root{--ink:#18312d;--muted:#5b6964;--coral-ink:#a94d2e;--cream:#f7f8f4;--white:#fff;--line:#e5e9e3;--coral:#de7356;--coral-soft:#fceee8;--violet:#7566a9;--violet-soft:#eeebf8;--green:#247a68;--green-soft:#e7f3ed;--gold:#c7963b;--shadow:0 12px 35px rgba(25,49,45,.06)}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid var(--brand-green);outline-offset:3px}button{cursor:pointer}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:'Manrope',sans-serif}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:254px;background:var(--bg-fff, #fff);border-right:1px solid var(--line);padding:30px 20px 20px;display:flex;flex-direction:column;z-index:20;overflow-y:auto}.brand{display:flex;align-items:center;gap:11px;font-size:26px;font-weight:800;letter-spacing:-1.2px;padding:0 10px}.brand-dot{color:var(--coral)}.brand-mark{position:relative;width:34px;height:38px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:12px 12px 12px 4px;font-family:'Manrope';font-size:27px;font-weight:800;transform:rotate(-3deg)}.brand-mark span{transform:rotate(3deg);line-height:1}.brand-mark i{position:absolute;width:7px;height:7px;background:var(--brand-orange);border-radius:50%;right:-3px;top:4px}.sidebar-label{font-size:12px;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin:32px 13px 12px}.sidebar nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:10px;color:var(--fg-6a7874, #6a7874);font-weight:500;text-align:left;width:100%;transition:.2s}.nav-item:hover{background:var(--bg-f5f7f4, #f5f7f4);color:var(--ink)}.nav-item.active{background:var(--bg-edf3ef, #edf3ef);color:var(--green);font-weight:700}.nav-pill{margin-left:auto;background:var(--coral);color:#fff;font-size:12px;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center}.sidebar-spacer{flex:1;min-height:28px}.weekly-card{background:var(--bg-faf5eb, #faf5eb);border:1px solid #efe5d1;border-radius:14px;padding:16px 13px;margin-bottom:12px}.weekly-top{display:flex;align-items:center;gap:7px;color:var(--fg-b46c32, #b46c32);font-size:13px}.weekly-card p{font-size:13px;line-height:1.5;color:var(--fg-7b766b, #7b766b);margin:8px 0 12px}.week-days{display:flex;justify-content:space-between}.day{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-size:12px;color:var(--muted)}.day.done{background:var(--bg-e2eee6, #e2eee6);color:var(--green)}.day.today{border:1px dashed #c39050;color:var(--fg-a86d2f, #a86d2f)}.settings{margin-bottom:10px}.profile{border-top:1px solid var(--line);padding:17px 5px 0;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-e7d8c6, #e7d8c6);display:grid;place-items:center;font-weight:700}.profile div:nth-child(2){display:flex;flex-direction:column;flex:1}.profile strong{font-size:13px}.profile span{font-size:12px;color:var(--muted);margin-top:3px}.profile svg{color:var(--muted)}.main-content{margin-left:254px;padding:40px 46px 60px;max-width:1540px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px}.date-label{font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--muted);display:block;margin-bottom:9px}.page-heading h1{font-size:31px;letter-spacing:-1.2px;line-height:1.25}.page-heading h1 span{font-size:26px}.page-heading p{color:var(--muted);font-size:14px;margin-top:8px}.notification-button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:12px;padding:10px 13px;display:flex;align-items:center;gap:7px;color:var(--fg-c2753d, #c2753d);font-weight:700}.button{border:0;border-radius:10px;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:13px;transition:transform .18s,box-shadow .18s,background .18s}.button:hover{transform:translateY(-1px)}.button.primary{background:var(--ink);color:#fff;box-shadow:0 5px 14px rgba(24,49,45,.15)}.button.primary:hover{background:#26453f}.button.primary:disabled{background:#b9c1bd;box-shadow:none;cursor:not-allowed;transform:none}.button.secondary{background:var(--bg-fff, #fff);border:1px solid var(--line);color:var(--ink)}.button.light{background:var(--bg-fff, #fff);color:var(--ink);padding:14px 17px}.button.light>span{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;margin-left:4px}.button.full{width:100%}.text-button{border:0;background:transparent;display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:13px;font-weight:700;white-space:nowrap}.text-button:hover{text-decoration:underline}.hero-card{background:var(--ink);border-radius:20px;min-height:280px;display:flex;overflow:hidden;color:#fff;position:relative;box-shadow:0 16px 36px rgba(24,49,45,.12)}.hero-content{padding:33px 38px;width:62%;z-index:2}.hero-tag{display:inline-flex;gap:6px;align-items:center;font-size:12px;letter-spacing:1.5px;font-weight:700;color:#c5dbce;margin-bottom:17px}.hero-content h2{font-size:30px;line-height:1.25;letter-spacing:-1px}.hero-content h2 em{font-style:normal;color:var(--brand-orange)}.hero-content p{font-size:13px;line-height:1.65;color:#b9c9c3;max-width:440px;margin:13px 0 20px}.hero-art{position:relative;flex:1;min-width:280px;background:radial-gradient(circle at 50% 50%,rgba(113,155,135,.24),transparent 60%)}.orbit{position:absolute;border:1px solid rgba(212,231,220,.14);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-15deg)}.orbit-one{width:265px;height:180px}.orbit-two{width:200px;height:250px;transform:translate(-50%,-50%) rotate(35deg)}.dibi-orb{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:32px;background:linear-gradient(145deg,#e9a270,#d97657);display:grid;place-items:center;box-shadow:0 15px 40px rgba(0,0,0,.2);transform:rotate(-8deg)}.dibi-orb svg{transform:rotate(8deg)}.math-symbol{position:absolute;font-family:'Manrope';font-weight:700;color:var(--fg-8eb5a3, #8eb5a3);font-size:28px}.symbol-one{left:18%;top:23%}.symbol-two{right:14%;top:26%}.symbol-three{right:18%;bottom:20%}.hero-note{position:absolute;right:12px;bottom:23px;background:var(--bg-fff, #fff);color:var(--ink);border-radius:10px;padding:10px 13px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);transform:rotate(2deg)}.hero-note svg{color:var(--green)}.hero-note span{font-size:12px;display:flex;flex-direction:column}.hero-note strong{font-size:13px;margin-bottom:2px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:30px 0 15px}.section-heading h2{font-size:17px;letter-spacing:-.4px}.section-heading>div>span{display:block;font-size:13px;color:var(--muted);margin-top:4px}.section-heading.compact{margin:0 0 18px}.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.task-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;align-items:center;gap:15px;text-align:left;transition:.2s}.task-card:hover{border-color:#bfcfc6;box-shadow:var(--shadow);transform:translateY(-2px)}.subject-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none}.subject-icon.math{background:var(--coral-soft);color:var(--coral)}.subject-icon.french{background:var(--violet-soft);color:var(--violet)}.task-copy{flex:1;min-width:0}.task-copy>span{font-size:12px;letter-spacing:1.2px;font-weight:700;color:var(--muted)}.task-copy h3{font-size:14px;margin:5px 0}.task-copy p{font-size:12px;color:var(--muted)}.mini-progress{height:5px;border-radius:5px;background:var(--bg-edf0ed, #edf0ed);overflow:hidden;margin-top:12px}.mini-progress i{display:block;height:100%;background:var(--coral);border-radius:5px}.task-go{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}.task-go svg{width:16px}.dashboard-lower{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-top:26px}.skills-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:15px;padding:22px}.skill-list{display:grid}.skill-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #f0f2ef}.skill-row:first-child{border-top:0}.skill-symbol{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:'Manrope';font-weight:800;font-size:13px}.skill-symbol.coral{background:var(--coral-soft);color:var(--coral)}.skill-symbol.violet{background:var(--violet-soft);color:var(--violet)}.skill-symbol.green{background:var(--green-soft);color:var(--green)}.skill-copy{display:flex;flex-direction:column;min-width:150px;flex:1}.skill-copy strong{font-size:13px}.skill-copy span{font-size:12px;color:var(--muted);margin-top:3px}.skill-bar{display:flex;align-items:center;gap:10px;width:38%}.skill-bar>div{height:6px;background:var(--bg-edf0ed, #edf0ed);border-radius:5px;flex:1;overflow:hidden}.skill-bar i{height:100%;display:block;border-radius:5px}.skill-bar i.coral{background:var(--coral)}.skill-bar i.violet{background:var(--violet)}.skill-bar i.green{background:var(--green)}.skill-bar>span{font-size:12px;font-weight:700}.coach-card{border-radius:15px;padding:22px;background:var(--bg-ece9f5, #ece9f5);border:1px solid var(--violet-soft);display:flex;flex-direction:column}.coach-top{display:flex;align-items:center;gap:9px}.small-dibi{width:35px;height:35px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}.small-dibi svg{width:18px}.coach-top>span{font-size:12px;letter-spacing:1.4px;font-weight:700;color:var(--violet)}.coach-card blockquote{font-family:'Manrope';font-size:15px;font-weight:600;line-height:1.55;margin:18px 0;flex:1}.coach-bottom{border-top:1px solid var(--violet-soft);padding-top:14px;display:flex;gap:9px;align-items:center;color:var(--violet)}.coach-bottom span{font-size:12px;line-height:1.5}.coach-bottom strong{font-size:13px}.mobile-header,.mobile-menu,.bottom-nav{display:none}
/* subjects */
.subject-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.subject-large-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:26px;position:relative;overflow:hidden}.subject-large-card:before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--coral)}.subject-large-card.french:before{background:var(--violet)}.subject-large-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.level-badge{font-size:12px;background:var(--bg-f2f4f1, #f2f4f1);padding:6px 9px;border-radius:20px;color:var(--muted)}.subject-large-card h2{font-size:25px}.subject-large-card>p{font-size:13px;color:var(--muted);margin-top:5px}.subject-stat{display:flex;align-items:center;gap:16px;margin:22px 0}.progress-ring{position:relative;display:grid;place-items:center}.progress-ring svg{position:absolute;transform:rotate(-90deg)}.progress-ring circle{fill:none}.ring-bg{stroke:#edf0ed}.ring-value{stroke:var(--coral);stroke-linecap:round;transition:stroke-dashoffset .5s}.french .ring-value{stroke:var(--violet)}.progress-ring strong{font-size:13px}.subject-stat>div:last-child{display:flex;flex-direction:column}.subject-stat>div>strong{font-size:13px}.subject-stat>div>span{font-size:12px;color:var(--muted);margin:3px 0 8px}.subject-stat small{font-size:12px;color:var(--green)}.chapter-list{display:grid;gap:11px;border-top:1px solid var(--line);padding:18px 0;margin-bottom:5px}.chapter-list span{display:flex;align-items:center;gap:9px;font-size:13px}.chapter-list svg{width:16px;color:var(--green)}.chapter-list .locked{color:var(--muted)}.chapter-list .locked svg{color:var(--muted)}.adaptive-banner{display:flex;align-items:center;gap:17px;background:var(--bg-eaf1ec, #eaf1ec);border:1px solid #d9e5dc;border-radius:15px;padding:21px;margin-top:20px}.adaptive-icon{width:45px;height:45px;border-radius:12px;background:var(--bg-fff, #fff);color:var(--green);display:grid;place-items:center}.adaptive-banner>div:nth-child(2){flex:1}.adaptive-banner h3{font-size:14px}.adaptive-banner p{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5}.adaptive-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);background:var(--bg-fff, #fff);padding:8px 11px;border-radius:20px;white-space:nowrap}
/* lesson */
.lesson-page{max-width:1180px;margin:0 auto}.lesson-topbar{display:flex;align-items:center;gap:20px;margin-bottom:38px}.icon-button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:10px;width:40px;height:40px;display:grid;place-items:center}.icon-button svg{width:19px}.lesson-progress-wrap{flex:1;max-width:600px;margin:auto}.lesson-progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}.lesson-progress-label strong{color:var(--ink)}.lesson-progress{height:7px;background:var(--bg-e3e8e3, #e3e8e3);border-radius:10px;overflow:hidden}.lesson-progress i{height:100%;display:block;background:var(--coral);border-radius:10px;transition:width .4s}.streak-button{border:0;background:transparent;display:flex;align-items:center;gap:5px;color:var(--fg-bd7137, #bd7137);font-weight:700}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:25px}.exercise-area{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:34px 38px;min-height:540px}.eyebrow{font-size:12px;letter-spacing:1.6px;color:var(--coral-ink);font-weight:700}.exercise-area h1{font-size:25px;line-height:1.4;margin:12px 0 22px;letter-spacing:-.6px}.equation-visual{height:88px;background:var(--bg-f8f6f1, #f8f6f1);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:28px;font-family:'Manrope';font-size:30px;font-weight:700;position:relative;margin-bottom:22px;overflow:hidden}.equation-visual span{border:1px solid #e3ded3;background:var(--bg-fff, #fff);border-radius:8px;width:49px;height:49px;display:grid;place-items:center;z-index:1}.equation-visual i{font-style:normal;font-weight:400;color:var(--muted)}.balance-line{position:absolute;width:170px;height:1px;background:var(--bg-ded9ce, #ded9ce);bottom:16px}.balance-line:after{content:'';position:absolute;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #ded9ce;top:1px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.answer{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:10px;padding:13px;display:flex;align-items:center;gap:11px;text-align:left;font-size:13px;min-height:52px;transition:.18s}.answer:hover:not(:disabled){border-color:#9fb7aa;background:var(--bg-fafcfb, #fafcfb)}.answer.selected{border:2px solid var(--green);padding:12px;background:var(--bg-f3f8f5, #f3f8f5)}.answer-letter{width:26px;height:26px;border-radius:7px;background:var(--bg-f0f2ef, #f0f2ef);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}.answer.selected .answer-letter{background:var(--green);color:#fff}.answer.correct{border:2px solid #438b6c;background:var(--bg-eff8f2, #eff8f2);padding:12px}.answer.correct .answer-letter{background:#438b6c;color:#fff}.answer.correct>svg{margin-left:auto;color:var(--fg-438b6c, #438b6c)}.answer.wrong{border:2px solid #c76754;background:var(--bg-fff3ef, #fff3ef);padding:12px}.answer.wrong .answer-letter{background:#c76754;color:#fff}.hint-box,.feedback{display:flex;gap:12px;padding:14px;border-radius:10px;margin-top:16px}.hint-box{background:var(--bg-faf5e8, #faf5e8);color:var(--fg-8d6a2d, #8d6a2d)}.hint-box svg{flex:none}.hint-box strong,.feedback strong{font-size:13px}.hint-box p,.feedback p{font-size:13px;line-height:1.55;margin-top:4px}.feedback.success{background:var(--bg-edf7f0, #edf7f0);color:var(--fg-24684f, #24684f)}.feedback.retry{background:var(--bg-fff3ef, #fff3ef);color:var(--fg-914a3a, #914a3a)}.feedback>div:first-child svg{width:21px}.exercise-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.tutor-panel{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;min-height:540px;overflow:hidden}.tutor-header{padding:20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.tutor-avatar{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#e9a270,#d97657);color:#fff;display:grid;place-items:center}.tutor-header>div:nth-child(2){display:flex;flex-direction:column}.tutor-header strong{font-family:'Manrope';font-size:14px}.tutor-header span{font-size:12px;color:var(--muted);margin-top:3px}.tutor-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1;max-height:385px;overflow-y:auto}.tutor-message,.user-message{padding:12px 13px;border-radius:4px 12px 12px 12px;background:var(--bg-f0f4f0, #f0f4f0);font-size:13px;line-height:1.6}.user-message{background:var(--ink);color:#fff;align-self:flex-end;border-radius:12px 4px 12px 12px;max-width:90%}.tutor-input{display:flex;gap:7px;padding:12px;border-top:1px solid var(--line)}.tutor-input input{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;min-width:0;flex:1;background:var(--bg-fafbf9, #fafbf9)}.tutor-input button{border:0;border-radius:8px;background:var(--ink);color:#fff;width:36px;display:grid;place-items:center}.tutor-note{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:12px;padding:0 0 12px}.close-chat{display:none}.floating-tutor{display:none}.dialogue-visual{background:var(--bg-f3f0f8, #f3f0f8);border-radius:12px;padding:17px;display:flex;gap:12px;align-items:center;margin-bottom:22px}.speech-avatar{width:39px;height:39px;background:var(--violet);color:#fff;border-radius:50%;display:grid;place-items:center;flex:none}.speech-avatar svg{width:19px}.speech-bubble{background:var(--bg-fff, #fff);border-radius:4px 12px 12px 12px;padding:12px;font-family:'Manrope';font-size:13px;display:flex;align-items:center;gap:10px}.speech-bubble button{border:0;background:transparent;color:var(--violet);padding:0;display:grid;place-items:center}.completion-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:20px;text-align:center;padding:42px;position:relative;overflow:hidden;max-width:800px;margin:0 auto}.trophy-circle{width:95px;height:95px;border-radius:50%;background:var(--bg-faf0d9, #faf0d9);color:var(--fg-c58b2e, #c58b2e);display:grid;place-items:center;margin:0 auto 22px}.completion-card h1{font-size:34px;margin:10px 0}.completion-card>p{font-size:13px;color:var(--muted);line-height:1.6;max-width:500px;margin:0 auto}.result-row{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0;background:var(--bg-f7f8f4, #f7f8f4);border-radius:14px;padding:20px}.result-row>div{display:flex;flex-direction:column;align-items:center;border-left:1px solid var(--line)}.result-row>div:first-child{border:0}.result-row svg{color:var(--coral);width:20px;margin-bottom:7px}.result-row strong{font-family:'Manrope';font-size:22px}.result-row span{font-size:12px;color:var(--muted);margin-top:4px}.reflection{display:flex;gap:12px;text-align:left;background:var(--bg-f0ebf7, #f0ebf7);color:var(--violet);padding:16px;border-radius:12px}.reflection>svg{flex:none}.reflection strong{font-size:13px}.reflection p{font-size:13px;line-height:1.6;margin-top:4px}.completion-actions{display:flex;justify-content:center;gap:10px;margin-top:25px}.confetti-shape{position:absolute;width:16px;height:50px;background:#edb07d;transform:rotate(35deg);top:35px;left:50px;border-radius:10px}.confetti-shape.two{left:auto;right:60px;background:var(--line);top:70px;transform:rotate(-30deg)}
/* progress */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}.metrics-grid>div{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;align-items:center;gap:12px}.metrics-grid svg{color:var(--coral);width:22px}.metrics-grid>div:nth-child(2) svg{color:var(--violet)}.metrics-grid>div:nth-child(3) svg{color:var(--green)}.metrics-grid>div:nth-child(4) svg{color:var(--gold)}.metrics-grid span{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px}.metrics-grid strong{font-family:'Manrope';font-size:19px;color:var(--ink)}.progress-layout{display:grid;grid-template-columns:1.8fr 1fr;gap:18px}.growth-card,.mastery-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:15px;padding:23px}.positive{display:flex;align-items:center;gap:4px;color:var(--green);font-size:13px;font-weight:700}.chart{height:210px;position:relative;padding-top:10px}.chart-lines{position:absolute;inset:10px 0 26px;display:flex;flex-direction:column;justify-content:space-between}.chart-lines i{border-top:1px dashed #e9ede8}.chart svg{width:100%;height:170px;position:relative}.chart-days{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.mastery-card h2{font-size:17px;margin-bottom:22px}.mastery-item{display:flex;gap:12px;align-items:center;margin-top:18px}.mastery-item>div:last-child{flex:1;display:grid;grid-template-columns:1fr auto;gap:4px}.mastery-item span{font-size:13px}.mastery-item strong{font-size:13px}.mastery-item .mini-progress{grid-column:1/-1;margin-top:4px}.mastery-item:nth-child(3) .mini-progress i{background:var(--violet)}.badges-title{font-size:17px;margin:27px 0 14px}.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.badge-grid>div{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center}.badge-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px}.badge-icon svg{width:21px}.badge-icon.coral{background:var(--coral-soft);color:var(--coral)}.badge-icon.violet{background:var(--violet-soft);color:var(--violet)}.badge-icon.green{background:var(--green-soft);color:var(--green)}.badge-icon.gold{background:var(--bg-faf0d9, #faf0d9);color:var(--gold)}.badge-grid strong{font-size:13px}.badge-grid small{font-size:12px;color:var(--muted);margin-top:4px}
/* teacher */
.teacher-insight{background:var(--bg-eeebf7, #eeebf7);border:1px solid var(--violet-soft);border-radius:14px;padding:18px;display:flex;align-items:center;gap:15px;margin-bottom:18px}.teacher-insight>div:nth-child(2){flex:1}.teacher-insight strong{font-size:13px;color:var(--fg-574b7d, #574b7d)}.teacher-insight p{font-size:13px;line-height:1.5;color:var(--fg-706582, #706582);margin-top:4px}.teacher-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.teacher-metrics>div{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:13px;padding:17px;display:flex;align-items:center;gap:12px}.teacher-metrics svg{color:var(--green);width:21px}.teacher-metrics span{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}.teacher-metrics strong{font-family:'Manrope';font-size:20px;color:var(--ink)}.class-table{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:15px;padding:22px}.table-head,.student-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr 20px;gap:15px;align-items:center}.table-head{font-size:12px;color:var(--muted);font-weight:700;padding:10px 8px;background:var(--bg-f7f8f5, #f7f8f5);border-radius:7px}.student-row{padding:13px 8px;border-bottom:1px solid #eff1ee}.student-row:last-child{border:0}.student-name{display:flex;align-items:center;gap:9px}.student-name>span{width:30px;height:30px;border-radius:50%;background:var(--bg-edf1ed, #edf1ed);display:grid;place-items:center;font-size:12px}.student-name strong{font-size:13px}.table-progress{display:flex;align-items:center;gap:7px}.table-progress .mini-progress{width:65px;margin:0}.table-progress>span{font-size:12px}.observation{font-size:12px;padding:6px 8px;border-radius:6px;width:-moz-max-content;width:max-content;max-width:100%}.observation.good{background:var(--green-soft);color:var(--green)}.observation.attention{background:var(--bg-faf2df, #faf2df);color:var(--fg-96722f, #96722f)}.observation.alert{background:var(--coral-soft);color:var(--fg-a8533d, #a8533d)}.student-row>svg{width:15px;color:var(--muted)}.teacher-tools{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.teacher-tools button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:13px;padding:17px;display:flex;align-items:center;gap:12px;text-align:left}.teacher-tools button>svg:first-child{color:var(--violet)}.teacher-tools button>span{display:flex;flex-direction:column;flex:1;font-size:12px;color:var(--muted);gap:4px}.teacher-tools strong{font-size:13px;color:var(--ink)}.teacher-tools button>svg:last-child{width:17px}.toast{position:fixed;right:25px;bottom:25px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:10px;display:flex;align-items:center;gap:9px;font-size:13px;z-index:100;box-shadow:var(--shadow)}

/* learning expedition */
.expedition-page{max-width:1120px;margin:0 auto}.expedition-header{display:flex;align-items:center;gap:16px;margin-bottom:28px}.expedition-title{display:flex;flex-direction:column;min-width:160px}.expedition-title span{font-size:12px;letter-spacing:1.4px;color:var(--coral-ink);font-weight:700}.expedition-title strong{font-family:'Manrope';font-size:14px;margin-top:3px}.expedition-steps{display:flex;justify-content:center;gap:0;flex:1}.expedition-steps>div{display:flex;align-items:center;position:relative;gap:6px;color:var(--muted);padding:0 20px}.expedition-steps>div:not(:last-child):after{content:'';position:absolute;width:25px;right:-12px;top:12px;border-top:1px solid #dce2dc}.expedition-steps span{width:24px;height:24px;border-radius:50%;background:var(--bg-e8ece8, #e8ece8);display:grid;place-items:center;font-size:12px;font-weight:700}.expedition-steps span svg{width:12px}.expedition-steps small{font-size:12px}.expedition-steps .active{color:var(--ink)}.expedition-steps .active span{background:var(--coral);color:#fff}.expedition-steps .done span{background:var(--green);color:#fff}.expedition-duration{font-size:12px;color:var(--muted);white-space:nowrap}.expedition-briefing{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;min-height:510px;box-shadow:var(--shadow)}.lille-visual{position:relative;min-height:420px;background:linear-gradient(var(--bg-d8e5e4, #d8e5e4) 0 58%,#9da9a0 58%);overflow:hidden}.lille-sky{position:absolute;inset:0}.cloud{position:absolute;width:70px;height:20px;background:rgba(255,255,255,.55);border-radius:50%;top:15%;left:12%}.cloud.two{top:27%;left:64%;width:50px}.building{position:absolute;bottom:21%;background:#d7b49b;border:5px solid #c49b84;border-bottom:0;display:flex;justify-content:space-evenly;padding-top:20px}.building:before{content:'';position:absolute;left:-8px;right:-8px;top:-28px;height:26px;background:#a57d6b;clip-path:polygon(50% 0,100% 100%,0 100%)}.building i{width:17px;height:30px;background:#526b6b;border:3px solid #eee0c9}.building.b1{height:170px;width:100px;left:5%}.building.b2{height:230px;width:115px;left:35%;background:var(--bg-d6c29f, #d6c29f)}.building.b3{height:150px;width:110px;right:2%;background:#c99f91}.lille-sign{position:absolute;bottom:8%;left:9%;background:var(--bg-fff, #fff);color:var(--ink);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:1px;box-shadow:var(--shadow)}.lille-sign svg{width:17px;color:var(--coral)}.mission-stamp{position:absolute;right:7%;top:8%;width:90px;height:90px;border:2px dashed rgba(24,49,45,.4);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(10deg);color:var(--fg-466d64, #466d64)}.mission-stamp svg{width:22px}.mission-stamp span{font-size:12px;text-align:center;font-weight:800;letter-spacing:1px;margin-top:4px}.briefing-copy{padding:45px 40px}.briefing-copy h1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;margin:13px 0 16px}.briefing-copy>p{font-size:13px;line-height:1.7;color:var(--muted)}.mission-goals{display:grid;gap:15px;margin:27px 0}.mission-goals>div{display:flex;align-items:center;gap:12px}.mission-goals>div>svg{width:35px;height:35px;padding:8px;border-radius:9px;background:var(--coral-soft);color:var(--coral)}.mission-goals>div:nth-child(2)>svg{background:var(--violet-soft);color:var(--violet)}.mission-goals>div:nth-child(3)>svg{background:var(--bg-f8f0dc, #f8f0dc);color:var(--gold)}.mission-goals span{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px}.mission-goals strong{font-size:13px;color:var(--ink)}.briefing-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.briefing-action>span{font-size:12px;color:var(--muted)}.expedition-workspace{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:32px 36px}.workspace-heading{text-align:center;max-width:600px;margin:0 auto 26px}.workspace-heading h1,.reflection-page>h1{font-size:29px;letter-spacing:-1px;margin:10px 0}.workspace-heading p,.reflection-page>p{font-size:13px;color:var(--muted);line-height:1.6}.budget-layout{display:grid;grid-template-columns:1.3fr .9fr;gap:28px}.budget-builder h2{font-size:13px;margin:18px 0 11px}.transport-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.transport-grid button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:11px;padding:14px;display:flex;align-items:center;gap:10px;text-align:left;position:relative}.transport-grid button.selected{border:2px solid var(--green);padding:13px;background:var(--bg-f2f7f3, #f2f7f3)}.transport-grid button>svg:first-child{width:24px;color:var(--green)}.transport-grid button>svg:last-child:not(:first-child){width:17px;margin-left:auto;color:var(--green)}.transport-grid button>span,.cost-list span{display:flex;flex-direction:column;gap:3px;flex:1}.transport-grid strong,.cost-list strong{font-size:13px}.transport-grid small,.cost-list small{font-size:12px;color:var(--muted)}.transport-grid b,.cost-list b{font-size:13px}.cost-list{border:1px solid var(--line);border-radius:11px;padding:0 15px}.cost-list>div{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--line)}.cost-list>div:first-child{border:0}.cost-list svg{width:18px;color:var(--muted)}.budget-ticket{background:var(--bg-f6f3ea, #f6f3ea);border:1px solid #e6dfd0;border-radius:14px;padding:23px;align-self:start;position:relative}.budget-ticket:before,.budget-ticket:after{content:'';position:absolute;width:16px;height:16px;background:var(--bg-fff, #fff);border-radius:50%;top:49%}.budget-ticket:before{left:-9px}.budget-ticket:after{right:-9px}.ticket-label{font-size:12px;letter-spacing:1.4px;font-weight:700;color:var(--fg-897e68, #897e68)}.budget-total{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px dashed #d4cbb9}.budget-total span{font-size:13px}.budget-total strong{font-family:'Manrope';font-size:26px}.budget-calculation{display:grid;gap:10px;padding:17px 0}.budget-calculation>span{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-776e5d, #776e5d)}.budget-calculation i{border-top:1px dashed #d4cbb9}.budget-calculation .calc-total{font-weight:700;color:var(--ink)}.budget-ticket label{font-size:13px;font-weight:700}.money-input{display:flex;align-items:center;background:var(--bg-fff, #fff);border:1px solid #d8cfbc;border-radius:8px;margin:8px 0 14px;padding:0 12px}.money-input span{font-size:17px;color:var(--fg-8c806b, #8c806b)}.money-input input{border:0;background:transparent;outline:0;width:100%;font-family:'Manrope';font-size:22px;font-weight:700;padding:10px}.budget-feedback,.dialogue-feedback{display:flex;align-items:flex-start;gap:8px;border-radius:9px;padding:11px;margin-bottom:12px}.budget-feedback svg,.dialogue-feedback svg{width:18px;flex:none}.budget-feedback p,.dialogue-feedback p{font-size:12px;line-height:1.5}.budget-feedback.success,.dialogue-feedback.success{background:var(--bg-e5f2e9, #e5f2e9);color:var(--fg-27684f, #27684f)}.budget-feedback.warning,.dialogue-feedback.warning{background:var(--bg-fff0df, #fff0df);color:var(--fg-91602e, #91602e)}.dialogue-workspace{max-width:950px;margin:auto}.hostel-scene{background:var(--bg-f0ebe2, #f0ebe2);border-radius:15px;min-height:420px;position:relative;padding:36px 30px 25px 170px}.hostel-sign{position:absolute;left:28px;top:28px;background:#274b43;color:#f1ddae;padding:14px 20px;border:3px double #d6b77a;text-align:center;font-family:'Manrope';font-size:18px;line-height:1.3;letter-spacing:2px}.hostel-sign span{font-size:12px}.receptionist{position:absolute;left:40px;bottom:30px;display:flex;flex-direction:column;align-items:center}.person-head{width:75px;height:75px;background:#d5aa8b;border:8px solid #f7f1e6;border-radius:50%;display:grid;place-items:center;font-family:'Manrope';font-size:27px;color:var(--fg-684d3d, #684d3d)}.receptionist strong{font-size:13px;margin-top:8px}.receptionist>span{font-size:12px;color:var(--muted)}.dialogue-conversation{background:var(--bg-fff, #fff);border-radius:14px;padding:22px;box-shadow:0 8px 25px rgba(66,55,38,.08)}.host-speech>span{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--violet)}.host-speech p{font-family:'Manrope';font-size:18px;line-height:1.45;margin:8px 0}.host-speech small{font-size:12px;color:var(--muted)}.dialogue-answer-list{display:grid;gap:9px;margin:20px 0}.dialogue-answer-list button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:9px;padding:11px;display:flex;align-items:center;gap:10px;text-align:left;font-size:13px}.dialogue-answer-list button>span{width:24px;height:24px;background:var(--bg-f0f2ef, #f0f2ef);border-radius:6px;display:grid;place-items:center;font-size:12px;flex:none}.dialogue-answer-list button.selected{border:2px solid var(--violet);padding:10px;background:var(--bg-f5f2fa, #f5f2fa)}.dialogue-answer-list button.correct{border:2px solid #438b6c;background:var(--bg-eff8f2, #eff8f2);padding:10px}.dialogue-answer-list button.wrong{border:2px solid #c76754;background:var(--bg-fff3ef, #fff3ef);padding:10px}.dialogue-answer-list button>svg{margin-left:auto;width:18px;color:var(--fg-438b6c, #438b6c)}.dialogue-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}.dialogue-actions>span{font-size:12px;color:var(--muted)}.reflection-page{max-width:760px;margin:25px auto;text-align:center}.reflection-questions{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:17px;padding:28px;text-align:left;margin-top:25px}.reflection-questions h2{font-size:14px;margin-bottom:13px}.strategy-grid{display:grid;gap:9px}.strategy-grid button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:9px;padding:13px;display:flex;align-items:center;gap:10px;text-align:left;font-size:13px}.strategy-grid button svg{width:18px;color:var(--muted)}.strategy-grid button.selected{border:2px solid var(--green);padding:12px;background:var(--bg-f1f7f3, #f1f7f3);color:var(--green)}.strategy-grid button.selected svg{color:var(--green)}.reflection-questions label{display:grid;gap:9px;font-size:13px;font-weight:700;margin:23px 0 18px}.reflection-questions textarea{border:1px solid var(--line);border-radius:9px;min-height:100px;padding:13px;resize:vertical;font:13px/1.6 'DM Sans';outline:0}.reflection-questions textarea:focus{border-color:#7ba08c}.expedition-complete{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:20px;padding:38px;text-align:center;max-width:800px;margin:10px auto}.expedition-trophy{width:85px;height:85px;border-radius:50%;background:var(--bg-faf0d9, #faf0d9);color:var(--fg-c58b2e, #c58b2e);display:grid;place-items:center;margin:0 auto 18px}.expedition-trophy svg{width:40px;height:40px}.expedition-complete h1{font-size:32px;margin:10px 0}.expedition-complete>p{font-size:13px;line-height:1.6;color:var(--muted);max-width:530px;margin:0 auto}.expedition-score{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-f5f7f3, #f5f7f3);border-radius:12px;margin:25px 0;padding:17px}.expedition-score>div{display:flex;flex-direction:column;border-left:1px solid var(--line)}.expedition-score>div:first-child{border:0}.expedition-score strong{font-family:'Manrope';font-size:23px}.expedition-score span{font-size:12px;color:var(--muted)}.passport-proof{border:1px solid var(--violet-soft);background:var(--bg-f3f0f8, #f3f0f8);border-radius:13px;padding:18px;text-align:left}.proof-heading{display:flex;align-items:center;gap:10px;color:var(--violet)}.proof-heading>span{display:flex;flex-direction:column;font-size:12px;gap:3px}.proof-heading strong{font-size:13px}.proof-skills{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.proof-skills>span{background:var(--bg-fff, #fff);border-radius:9px;padding:12px;display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:700;gap:5px;text-align:center}.proof-skills svg{width:19px;color:var(--coral)}.proof-skills>span:nth-child(2) svg{color:var(--violet)}.proof-skills>span:nth-child(3) svg{color:var(--gold)}.proof-skills small{font-size:12px;color:var(--muted);font-weight:400}.reflection-quote{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:18px 0;color:var(--muted)}.reflection-quote svg{width:18px;flex:none}.reflection-quote p{font-size:13px;font-style:italic;line-height:1.5}.expedition-home-card{margin-top:18px;background:linear-gradient(110deg,var(--bg-e8ede4, #e8ede4),var(--bg-f2eee5, #f2eee5));border:1px solid #dce3d7;border-radius:15px;padding:19px 22px;display:flex;align-items:center;gap:15px;width:100%;text-align:left}.expedition-home-card>svg{width:43px;height:43px;padding:10px;background:var(--bg-fff, #fff);border-radius:12px;color:var(--green)}.expedition-home-card>span{display:flex;flex-direction:column;flex:1}.expedition-home-card small{font-size:12px;letter-spacing:1px;color:var(--green);font-weight:700}.expedition-home-card strong{font-family:'Manrope';font-size:15px;margin:3px 0}.expedition-home-card em{font-size:12px;color:var(--muted);font-style:normal}.expedition-home-card>svg:last-child{width:20px;height:20px;padding:0;background:transparent;color:var(--ink)}

/* adaptive learning route */
.learning-route-page{max-width:1120px;margin:0 auto}.route-page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.route-page-heading h1{font-size:31px;letter-spacing:-1px;margin:6px 0}.route-page-heading p{font-size:13px;color:var(--muted)}.route-advice{background:linear-gradient(125deg,var(--brand-green),#274d43);color:#fff;border-radius:20px;padding:28px;display:flex;align-items:center;gap:20px;box-shadow:0 15px 35px rgba(24,49,45,.12);position:relative;overflow:hidden}.route-advice:after{content:'';position:absolute;width:210px;height:210px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-60px;top:-105px}.route-advice-icon{width:52px;height:52px;border-radius:16px;background:#e89a72;color:var(--fg-18312d, #18312d);display:grid;place-items:center;flex-shrink:0;transform:rotate(-4deg)}.route-advice-copy{flex:1;z-index:1}.route-advice-copy>span{font-size:12px;letter-spacing:1.4px;color:#b9d4c8;font-weight:700}.route-advice-copy h2{font-size:23px;line-height:1.3;margin:7px 0}.route-advice-copy p{font-size:13px;line-height:1.65;color:#d2dfd9;max-width:690px}.route-score{min-width:100px;padding-left:22px;border-left:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;z-index:1}.route-score strong{font-family:'Manrope';font-size:25px;color:#f2b38f}.route-score span{font-size:12px;color:#b9cbc3;margin-top:4px}.route-content-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:20px;margin-top:20px;align-items:start}.route-timeline,.route-evidence-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:24px}.route-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.route-section-heading>div>span,.route-evidence-title>div>span{font-size:12px;letter-spacing:1.3px;color:var(--coral-ink);font-weight:700}.route-section-heading h2,.route-evidence-title h2{font-size:17px;margin-top:4px}.route-section-heading>small{font-size:12px;color:var(--muted)}.route-step{display:grid;grid-template-columns:42px 1fr}.route-step-marker{display:flex;align-items:center;flex-direction:column}.route-step-marker>span{width:34px;height:34px;border-radius:11px;background:var(--bg-edf1ed, #edf1ed);color:var(--muted);display:grid;place-items:center;flex-shrink:0}.route-step-marker svg{width:16px}.route-step-marker>i{flex:1;min-height:28px;border-left:1px dashed #d8dfd9;margin:6px 0}.route-step.current .route-step-marker>span{background:var(--coral);color:#fff;box-shadow:0 5px 15px rgba(222,115,86,.2)}.route-step.done .route-step-marker>span{background:var(--green-soft);color:var(--green)}.route-step-content{padding:0 0 25px 8px;min-width:0}.route-step:last-child .route-step-content{padding-bottom:0}.route-step-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}.route-step-meta>span{font-size:12px;letter-spacing:1px;color:var(--muted);font-weight:700}.route-step.current .route-step-meta>span{color:var(--coral-ink)}.route-step-meta small{font-size:12px;color:var(--muted)}.route-step-content h3{font-size:15px;margin:6px 0}.route-step-content p{font-size:12px;line-height:1.55;color:var(--muted);margin-bottom:12px}.route-step-content .button{font-size:12px;padding:10px 14px}.route-step.upcoming .route-step-content{opacity:.62}.route-locked{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}.route-evidence-card{padding:22px}.route-evidence-title{display:flex;align-items:center;gap:11px;margin-bottom:21px}.route-evidence-title>svg{width:38px;height:38px;padding:9px;border-radius:12px;background:var(--bg-faf1df, #faf1df);color:var(--gold)}.route-evidence-list{display:grid;gap:12px}.route-evidence-list>div{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.5;color:var(--fg-51645d, #51645d)}.route-evidence-list svg{width:15px;color:var(--green);flex-shrink:0}.route-principle{display:flex;gap:10px;background:var(--bg-f3f5ef, #f3f5ef);border-radius:13px;padding:15px;margin-top:22px}.route-principle>svg{width:19px;color:var(--green);flex-shrink:0}.route-principle strong{font-size:12px}.route-principle p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:5px}@media(max-width:900px){.route-content-grid{grid-template-columns:1fr}.route-advice-copy h2{font-size:20px}.route-evidence-card{display:grid;grid-template-columns:1fr 1fr;gap:15px}.route-evidence-title{grid-column:1/-1;margin-bottom:0}.route-principle{margin-top:0}}@media(max-width:560px){.route-page-heading{align-items:flex-start}.route-page-heading h1{font-size:25px}.route-page-heading p{font-size:12px}.route-page-heading .button{font-size:0;padding:10px}.route-page-heading .button svg{margin:0}.route-advice{padding:22px 18px;align-items:flex-start;flex-wrap:wrap;gap:13px}.route-advice-icon{width:42px;height:42px}.route-advice-copy{min-width:calc(100% - 60px)}.route-advice-copy h2{font-size:18px}.route-score{border-left:0;border-top:1px solid rgba(255,255,255,.15);padding:12px 0 0;width:100%;flex-direction:row;align-items:center;gap:10px}.route-score strong{font-size:19px}.route-timeline,.route-evidence-card{padding:18px 15px}.route-section-heading>small{display:none}.route-evidence-card{display:block}.route-evidence-title{margin-bottom:18px}.route-principle{margin-top:18px}}

/* authentication */
.auth-page{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg-fff, #fff)}.auth-story{background:var(--ink);color:#fff;padding:42px 55px;position:relative;overflow:hidden;display:flex;flex-direction:column}.auth-brand{display:flex;align-items:center;gap:11px;font-family:'Manrope';font-size:26px;font-weight:800;letter-spacing:-1.2px}.auth-story-copy{margin:auto 0;max-width:530px;z-index:2}.auth-kicker{display:flex;align-items:center;gap:7px;color:#b4cfc0;font-size:12px;font-weight:700;letter-spacing:1.7px}.auth-story .auth-story-title{font-size:43px;line-height:1.18;letter-spacing:-1.8px;margin:19px 0}.auth-story .auth-story-title em{font-style:normal;color:#efad81}.auth-story-copy>p{font-size:14px;line-height:1.7;color:#b9cac2;max-width:450px}.auth-benefits{display:flex;gap:20px;flex-wrap:wrap;margin-top:27px}.auth-benefits span{display:flex;align-items:center;gap:6px;font-size:12px;color:#d5e2dc}.auth-benefits svg{width:15px;color:var(--brand-orange)}.auth-story>small{font-size:12px;color:var(--fg-78958a, #78958a);z-index:2}.auth-orb{position:absolute;width:120px;height:120px;border-radius:38px;background:linear-gradient(145deg,#e9a270,#d97657);display:grid;place-items:center;right:11%;bottom:12%;transform:rotate(10deg);opacity:.9}.auth-orb svg{width:50px;height:50px}.auth-floating-card{position:absolute;background:var(--bg-fff, #fff);color:var(--ink);border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:9px;box-shadow:0 14px 35px rgba(0,0,0,.16);z-index:3}.auth-floating-card>svg{width:21px}.auth-floating-card>div{display:flex;flex-direction:column}.auth-floating-card strong{font-size:13px}.auth-floating-card span{font-size:12px;color:var(--muted);margin-top:2px}.auth-floating-card.math{right:5%;top:23%;transform:rotate(4deg)}.auth-floating-card.math>svg{color:var(--coral)}.auth-floating-card.french{right:28%;bottom:8%;transform:rotate(-4deg)}.auth-floating-card.french>svg{color:var(--violet)}.auth-form-side{display:grid;place-items:center;padding:35px;overflow-y:auto}.auth-form-wrap{width:100%;max-width:410px}.auth-mobile-logo{display:none}.auth-welcome{font-size:12px;color:var(--coral-ink);letter-spacing:1.5px;font-weight:700}.auth-form-wrap h1{font-size:29px;letter-spacing:-1px;margin:9px 0 7px}.auth-subtitle{font-size:13px;color:var(--muted)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-f0f2ee, #f0f2ee);border-radius:10px;padding:4px;margin:25px 0 22px}.auth-tabs button{border:0;background:transparent;padding:9px;border-radius:7px;font-size:13px;color:var(--muted);font-weight:600}.auth-tabs button.active{background:var(--bg-fff, #fff);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.06)}.auth-form-wrap form{display:grid;gap:16px}.auth-form-wrap label{font-size:12px;font-weight:700;display:grid;gap:7px}.auth-input{height:45px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;padding:0 12px;gap:9px;background:var(--bg-fbfcfa, #fbfcfa)}.auth-input:focus-within{border-color:#7ba08c;box-shadow:0 0 0 3px #eef4ef}.auth-input>svg{width:16px;color:var(--muted)}.auth-input input{border:0;background:transparent;outline:0;flex:1;min-width:0;font-size:13px;color:var(--ink)}.auth-input button{border:0;background:transparent;padding:3px;display:grid;place-items:center}.auth-input button svg{width:16px;color:var(--muted)}.at-sign{color:var(--muted);font-size:15px}.role-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}.role-picker button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:9px;padding:11px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px}.role-picker button svg{width:17px}.role-picker button.active{border:2px solid var(--green);padding:10px;background:var(--bg-f0f6f2, #f0f6f2);color:var(--green)}.auth-submit{width:100%;padding:13px;margin-top:2px}.auth-submit svg{width:17px}.auth-error{background:var(--bg-fff0eb, #fff0eb);color:var(--fg-a84e38, #a84e38);border:1px solid #f2d8ce;border-radius:8px;padding:10px;font-size:13px;line-height:1.4}.demo-divider{display:flex;align-items:center;gap:10px;margin:23px 0 14px;color:var(--muted);font-size:12px;letter-spacing:1px}.demo-divider:before,.demo-divider:after{content:'';height:1px;background:var(--line);flex:1}.demo-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.demo-buttons button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:10px;padding:12px;text-align:left;display:flex;align-items:flex-start;gap:8px;position:relative}.demo-buttons button:hover{background:var(--bg-f8faf7, #f8faf7);border-color:#b8c8bd}.demo-buttons button>svg{width:18px;color:var(--green);flex:none}.demo-buttons button>span{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px;line-height:1.4}.demo-buttons strong{font-size:12px;color:var(--ink)}.demo-buttons button>svg:last-child{display:none}.auth-security{display:flex;align-items:flex-start;justify-content:center;gap:7px;color:var(--muted);margin-top:20px}.auth-security svg{width:15px;flex:none}.auth-security span{font-size:12px;line-height:1.5}.access-denied{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:50px;text-align:center;max-width:600px;margin:50px auto}.access-denied>svg{width:45px;height:45px;color:var(--coral);margin-bottom:15px}.access-denied h1{font-size:25px}.access-denied p{font-size:13px;color:var(--muted);margin:10px 0 22px}.loading-screen{min-height:100vh;display:grid;place-items:center;background:var(--cream)}.loading-screen>div{display:flex;flex-direction:column;align-items:center;gap:15px;color:var(--muted);font-size:13px}.loading-screen .brand-mark{animation:pulse 1.2s infinite alternate}@keyframes pulse{to{transform:rotate(4deg) scale(1.06)}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.typing{display:flex;align-items:center;gap:4px;width:-moz-max-content;width:max-content;padding:15px}.typing i{width:5px;height:5px;border-radius:50%;background:#7c9187;animation:typing 1s infinite alternate}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}.tutor-input button:disabled{opacity:.45;cursor:not-allowed}@keyframes typing{to{transform:translateY(-4px);opacity:.45}}

@media(max-width:900px){.expedition-briefing{grid-template-columns:1fr}.lille-visual{min-height:260px}.building.b2{height:180px}.briefing-copy{padding:30px}.expedition-steps>div{padding:0 10px}.expedition-steps small{display:none}.budget-layout{grid-template-columns:1fr}.budget-ticket{width:100%}.hostel-scene{padding-left:30px;padding-top:150px}.hostel-sign{top:22px}.receptionist{left:130px;top:25px;bottom:auto}.person-head{width:55px;height:55px;border-width:5px}.expedition-duration{display:none}}
@media(max-width:560px){.expedition-header{gap:9px;flex-wrap:wrap}.expedition-title{min-width:0;flex:1}.expedition-title strong{font-size:13px}.expedition-steps{order:3;flex-basis:100%}.expedition-steps>div{flex:1;justify-content:center}.expedition-briefing{min-height:0}.lille-visual{min-height:230px}.briefing-copy{padding:25px 20px}.briefing-copy h1{font-size:27px}.briefing-copy>p{font-size:13px}.expedition-workspace{padding:23px 16px}.workspace-heading h1,.reflection-page>h1{font-size:24px}.transport-grid{grid-template-columns:1fr}.hostel-scene{padding:140px 12px 15px}.receptionist{left:145px}.dialogue-conversation{padding:16px}.host-speech p{font-size:15px}.dialogue-actions{gap:8px}.dialogue-actions .button{padding:10px 12px;font-size:13px}.reflection-questions{padding:20px 16px}.expedition-complete{padding:28px 17px}.expedition-complete h1{font-size:26px}.proof-skills{grid-template-columns:1fr}.expedition-home-card{padding:16px;gap:10px}.expedition-home-card em{line-height:1.4}.expedition-score{padding:14px 5px}}

@media(min-width:1500px){.main-content{padding:45px 65px}.hero-card{min-height:300px}.hero-content{padding:40px 45px}.hero-content h2{font-size:34px}}
@media(max-width:1100px){.sidebar{width:220px}.main-content{margin-left:220px;padding:32px 26px}.hero-content{width:65%;padding:30px}.hero-content h2{font-size:25px}.hero-art{min-width:220px}.dashboard-lower{grid-template-columns:1fr}.coach-card{min-height:190px}.lesson-layout{grid-template-columns:1fr}.tutor-panel{display:none}.floating-tutor{display:flex;position:fixed;right:25px;bottom:25px;border:0;background:var(--ink);color:#fff;padding:13px 17px;border-radius:25px;align-items:center;gap:8px;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(24,49,45,.25)}.floating-tutor svg{width:18px}.tutor-panel.open{display:flex;position:fixed;right:20px;bottom:80px;width:310px;height:480px;min-height:0;z-index:50;box-shadow:0 20px 60px rgba(0,0,0,.2)}.close-chat{display:block;border:0;background:transparent;margin-left:auto}.table-head,.student-row{grid-template-columns:1.2fr .8fr .8fr 1.2fr 15px}.teacher-insight{flex-wrap:wrap}.teacher-insight .button{margin-left:50px}}
@media(max-width:800px){.auth-page{grid-template-columns:1fr}.auth-story{display:none}.auth-form-side{padding:28px;min-height:100vh}.auth-mobile-logo{display:flex;margin-bottom:35px}.auth-form-wrap{max-width:430px}}
.sector-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sector-picker button{padding:10px 6px;font-size:12px;gap:5px;justify-content:center}.sector-picker button svg{width:15px}.demo-sectors{margin-bottom:12px}.demo-sectors button{background:var(--bg-fff, #fff)}.demo-sectors button.active{background:var(--green-soft)}
@media(max-width:560px){.auth-form-side{padding:24px 20px}.auth-form-wrap h1{font-size:25px}.demo-buttons{grid-template-columns:1fr}.auth-mobile-logo{margin-bottom:28px}.auth-tabs{margin-top:22px}.sector-picker button{font-size:12px;flex-direction:column}.sector-picker button svg{width:16px}}
@media(max-width:800px){.sidebar{display:none}.mobile-header{display:flex;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);height:68px;padding:0 22px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:30}.mobile-header .brand{padding:0;font-size:23px}.mobile-header .brand-mark{width:30px;height:33px;font-size:23px}.mobile-header>button{border:0;background:transparent}.mobile-menu{display:grid;position:fixed;left:0;right:0;top:68px;background:var(--bg-fff, #fff);padding:15px 22px;z-index:29;box-shadow:var(--shadow)}.mobile-menu button{border:0;background:transparent;padding:12px;display:flex;gap:10px;text-align:left}.main-content{margin-left:0;padding:28px 22px 90px}.page-heading h1{font-size:27px}.hero-content{width:68%;padding:27px}.hero-content h2{font-size:23px}.hero-art{min-width:160px}.hero-note{display:none}.dibi-orb{width:75px;height:75px}.math-symbol{font-size:22px}.today-grid,.subject-page-grid{grid-template-columns:1fr}.metrics-grid,.badge-grid{grid-template-columns:1fr 1fr}.progress-layout{grid-template-columns:1fr}.class-table{overflow-x:auto}.class-table>.section-heading{min-width:650px}.table-head,.student-row{min-width:650px}.teacher-tools{grid-template-columns:1fr}.lesson-topbar{margin-bottom:24px}.lesson-page{margin-top:-8px}.exercise-area{padding:28px;min-height:0}.tutor-panel.open{bottom:85px}}
@media(max-width:560px){.main-content{padding:24px 16px 85px}.page-heading{align-items:flex-start;margin-bottom:23px}.page-heading h1{font-size:24px}.page-heading p{font-size:13px;line-height:1.5}.page-heading>.button{padding:10px;font-size:0}.page-heading>.button svg{margin:0}.notification-button{display:none}.hero-card{min-height:390px;display:block}.hero-content{width:100%;padding:26px 24px}.hero-content h2{font-size:26px}.hero-content p{font-size:13px;max-width:100%}.hero-art{position:absolute;right:-25px;bottom:-30px;width:190px;height:190px;min-width:0;opacity:.75}.dibi-orb{width:65px;height:65px;border-radius:22px}.dibi-orb svg{width:31px}.orbit-one{width:180px;height:110px}.orbit-two{width:130px;height:170px}.button.light{font-size:13px;padding:12px 14px}.section-heading h2{font-size:15px}.section-heading>div>span{font-size:12px}.section-heading>.text-button{font-size:12px}.task-card{padding:16px;gap:11px}.subject-icon{width:42px;height:42px}.subject-icon svg{width:21px}.task-copy h3{font-size:13px}.task-go{display:none}.dashboard-lower{margin-top:20px}.skills-card{padding:18px}.skill-copy{min-width:0}.skill-copy strong{font-size:13px}.skill-copy span{font-size:12px}.skill-bar{width:30%}.skill-bar>span{font-size:12px}.coach-card{min-height:180px}.subject-large-card{padding:22px}.adaptive-banner{align-items:flex-start;flex-wrap:wrap}.adaptive-badge{margin-left:62px}.metrics-grid{gap:10px}.metrics-grid>div{padding:14px;gap:9px}.metrics-grid strong{font-size:16px}.growth-card,.mastery-card{padding:18px}.badge-grid>div{padding:14px 8px}.teacher-insight{align-items:flex-start}.teacher-insight .button{margin-left:0;width:100%}.teacher-metrics{gap:8px}.teacher-metrics>div{padding:12px;flex-direction:column;align-items:flex-start;gap:6px}.teacher-metrics strong{font-size:17px}.class-table{padding:16px}.lesson-topbar{gap:10px}.lesson-progress-label span{font-size:12px}.streak-button{display:none}.exercise-area{padding:23px 18px}.exercise-area h1{font-size:21px}.answer-grid{grid-template-columns:1fr}.answer{font-size:13px}.exercise-actions{gap:10px}.exercise-actions .button{padding:11px 14px}.exercise-actions .text-button{font-size:12px}.tutor-panel.open{left:12px;right:12px;bottom:78px;width:auto;height:65vh}.floating-tutor{right:16px;bottom:78px}.completion-card{padding:30px 18px}.completion-card h1{font-size:27px}.result-row{padding:15px 5px}.result-row strong{font-size:18px}.result-row span{font-size:12px}.completion-actions{flex-direction:column}.completion-actions .button{width:100%}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--bg-fff, #fff);border-top:1px solid var(--line);z-index:40;padding:8px 15px max(8px,env(safe-area-inset-bottom));justify-content:space-around}.bottom-nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:12px;padding:4px 18px}.bottom-nav button.active{color:var(--green)}.bottom-nav button.active svg{stroke-width:2.5}.toast{bottom:85px;left:16px;right:16px}.confetti-shape{display:none}}


.sidebar-service { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 12px 0; }
.sidebar-service a { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; color: var(--green); }
.tutor-preferences { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.tutor-preferences select { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.theme-studio-page,.theme-learner-page,.theme-learning-page{max-width:1160px;margin:0 auto}.theme-studio-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.theme-studio-heading h1{font-size:30px;letter-spacing:-1px;margin:6px 0}.theme-studio-heading p{font-size:13px;color:var(--muted);line-height:1.6}.studio-audience{display:flex;align-items:center;gap:10px;background:var(--bg-fff, #fff);border:1px solid var(--line);padding:12px 15px;border-radius:13px;white-space:nowrap}.studio-audience>svg{color:var(--green);width:20px}.studio-audience>span{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}.studio-audience strong{font-size:13px;color:var(--ink);margin-top:2px}.studio-steps{display:flex;align-items:center;justify-content:center;margin-bottom:22px}.studio-steps>span{display:flex;align-items:center;justify-content:center;gap:7px;width:30px;height:30px;border-radius:50%;background:var(--bg-e7ece7, #e7ece7);color:var(--muted);font-size:12px;font-weight:700}.studio-steps>span.active{background:var(--green);color:#fff}.studio-steps small{font-size:12px;font-weight:600;position:absolute;margin-left:155px;width:120px;text-align:center;color:var(--muted)}.studio-steps>i{width:80px;border-top:1px solid #dbe2dc;margin:0 45px}.source-workspace{display:grid;grid-template-columns:1.2fr .8fr;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:var(--shadow)}.source-input-column,.source-direction-column{padding:25px}.source-direction-column{background:var(--bg-f4f6f1, #f4f6f1);border-left:1px solid var(--line)}.studio-section-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.studio-section-title>svg{width:37px;height:37px;padding:9px;border-radius:11px;background:var(--coral-soft);color:var(--coral)}.studio-section-title>div>span{font-size:12px;letter-spacing:1.1px;color:var(--coral-ink);font-weight:700}.studio-section-title h2{font-size:16px;margin-top:3px}.document-drop{border:1px dashed #b8c9bf;background:var(--bg-f7faf7, #f7faf7);border-radius:14px;min-height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:18px;cursor:pointer;transition:.2s}.document-drop:hover{border-color:var(--green);background:var(--bg-f0f7f2, #f0f7f2)}.document-drop>svg{color:var(--green);margin-bottom:9px}.document-drop strong{font-size:13px;max-width:100%;overflow-wrap:anywhere}.document-drop span{font-size:12px;color:var(--muted);margin-top:6px}.document-drop input{display:none}.source-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:12px}.source-divider:before,.source-divider:after{content:'';flex:1;border-top:1px solid var(--line)}.source-text-input{width:100%;height:110px;resize:vertical;border:1px solid var(--line);border-radius:11px;padding:12px;font:12px/1.55 'DM Sans',sans-serif;color:var(--ink);background:var(--bg-fff, #fff)}.source-direction-column>p{font-size:12px;line-height:1.55;color:var(--muted);margin-bottom:12px}.source-direction-column>textarea{width:100%;height:125px;resize:vertical;border:1px solid var(--line);border-radius:11px;padding:12px;font:12px/1.6 'DM Sans',sans-serif}.dibi-blindspot{display:flex;gap:9px;margin:14px 0 18px}.dibi-blindspot>svg{width:17px;color:var(--violet);flex-shrink:0}.dibi-blindspot>div{display:flex;flex-direction:column}.dibi-blindspot strong{font-size:12px}.dibi-blindspot span{font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px}.studio-busy,.studio-error,.studio-published{display:flex;align-items:center;gap:10px;border-radius:12px;padding:14px 17px;margin-top:15px;font-size:13px}.studio-busy{background:var(--bg-eeebf8, #eeebf8);color:var(--fg-574b7d, #574b7d)}.studio-error{background:var(--coral-soft);color:var(--fg-9c4c38, #9c4c38)}.studio-published{background:var(--green-soft);color:var(--green)}.studio-published>div{display:flex;flex-direction:column}.studio-published span{font-size:12px;margin-top:3px}.blueprint-review{margin-top:22px}.review-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.review-heading h2{font-size:21px;margin:5px 0}.review-heading p{font-size:12px;color:var(--muted)}.review-progress{display:flex;align-items:center;gap:6px;background:var(--bg-fff, #fff);border:1px solid var(--line);padding:9px 12px;border-radius:20px;font-size:12px;color:var(--green)}.review-progress svg{width:15px}.blueprint-main-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:18px;align-items:start}.blueprint-editor,.blueprint-support{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:17px;padding:23px}.blueprint-editor>label,.question-editor>label,.option-editor label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;margin-bottom:14px}.blueprint-editor input,.blueprint-editor textarea,.blueprint-editor select,.option-editor input{border:1px solid var(--line);border-radius:9px;padding:11px;font:12px/1.5 'DM Sans',sans-serif;color:var(--ink);background:var(--bg-fff, #fff);width:100%}.blueprint-editor>label textarea{height:85px;resize:vertical}.editable-goals{border-top:1px solid var(--line);padding-top:15px}.editable-goals>input{margin-bottom:8px}.editor-subheading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.editor-subheading h3{font-size:13px}.editor-subheading>span{font-size:12px;color:var(--muted)}.editor-subheading>svg{width:17px;color:var(--gold)}.suggested-goals{background:var(--bg-f3effa, #f3effa);border-radius:12px;padding:14px;margin:17px 0}.suggested-goals>button{display:flex;align-items:flex-start;gap:7px;border:0;background:transparent;text-align:left;font-size:12px;line-height:1.5;padding:7px 0;color:var(--fg-5c5078, #5c5078)}.suggested-goals>button svg{width:13px;flex-shrink:0}.question-review-list{border-top:1px solid var(--line);padding-top:16px}.question-review-list details{border:1px solid var(--line);border-radius:11px;margin-bottom:10px;overflow:hidden}.question-review-list details.reviewed{border-color:#b9d8c8}.question-review-list summary{display:flex;align-items:center;justify-content:space-between;padding:13px;cursor:pointer;list-style:none;background:var(--bg-f8faf7, #f8faf7)}.question-review-list summary>span{font-size:12px;font-weight:700}.question-review-list summary small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}.question-review-list summary>svg{width:16px;color:var(--green)}.question-editor{padding:15px;border-top:1px solid var(--line)}.question-editor textarea{height:85px;resize:vertical}.option-editor{display:grid;grid-template-columns:1fr 1fr;gap:8px}.option-editor label{margin-bottom:0}.question-source{display:flex;gap:8px;background:var(--bg-f5f6f2, #f5f6f2);padding:11px;border-radius:9px;margin:12px 0}.question-source svg{width:15px;color:var(--green);flex-shrink:0}.question-source p{font-size:12px;line-height:1.55;color:var(--muted)}.question-editor .button{font-size:12px}.blueprint-support{display:grid;gap:20px}.blueprint-support>div{border-bottom:1px solid var(--line);padding-bottom:17px}.blueprint-support>div:last-child{border:0;padding:0}.support-label{display:block;font-size:12px;letter-spacing:1.1px;color:var(--violet);font-weight:700;margin-bottom:10px}.blueprint-support p,.blueprint-support article p{font-size:12px;line-height:1.6;color:var(--muted);margin-bottom:9px}.blueprint-support article{margin-bottom:12px}.blueprint-support article strong{font-size:12px;text-transform:capitalize}.blueprint-support article p{font-size:12px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.publish-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--bg-eaf2ed, #eaf2ed);border:1px solid #d3e3d8;border-radius:14px;padding:16px 19px;margin-top:16px}.publish-bar>div{display:flex;align-items:center;gap:10px}.publish-bar>div>svg{color:var(--green)}.publish-bar>div>span{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}.publish-bar strong{font-size:12px;color:var(--ink);margin-bottom:2px}.publish-bar .button{font-size:12px;white-space:nowrap}.published-themes{margin-top:24px;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:16px;padding:20px}.published-themes .section-heading>svg{color:var(--green)}.published-themes>article{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:12px 0}.published-themes>article>svg:first-child{width:18px;color:var(--coral)}.published-themes>article>span{display:flex;flex-direction:column;flex:1}.published-themes strong{font-size:13px}.published-themes small{font-size:12px;color:var(--muted);margin-top:3px}.published-themes>article>svg:last-child{width:17px;color:var(--green)}.empty-themes{background:var(--bg-fff, #fff);border:1px dashed #c8d3cb;border-radius:18px;padding:55px 25px;text-align:center}.empty-themes>svg{color:var(--green);width:35px;height:35px}.empty-themes h2{font-size:18px;margin:12px 0 7px}.empty-themes p{font-size:12px;color:var(--muted)}.learner-theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.learner-theme-grid>button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:18px;padding:23px;text-align:left;transition:.2s;box-shadow:var(--shadow)}.learner-theme-grid>button:hover{transform:translateY(-2px);border-color:#b8cdc0}.theme-card-icon{width:43px;height:43px;border-radius:13px;background:var(--coral-soft);color:var(--coral);display:grid;place-items:center;margin-bottom:17px}.learner-theme-grid h2{font-size:19px;line-height:1.35;margin:7px 0}.learner-theme-grid p{font-size:12px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.theme-card-topics{display:flex;gap:6px;flex-wrap:wrap;margin:15px 0}.theme-card-topics span{font-size:12px;background:var(--bg-f0f3ee, #f0f3ee);color:var(--green);padding:5px 8px;border-radius:10px;text-transform:capitalize}.learner-theme-grid footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;font-size:12px;color:var(--muted)}.learner-theme-grid footer svg{width:17px;color:var(--coral)}.theme-back{margin-bottom:16px}.theme-learning-hero{background:linear-gradient(125deg,var(--brand-green),#2b5146);color:#fff;border-radius:20px;padding:30px}.theme-learning-hero .eyebrow{color:var(--brand-orange)}.theme-learning-hero h1{font-size:29px;margin:8px 0}.theme-learning-hero>p{font-size:13px;line-height:1.7;color:#d4e0da;max-width:780px}.theme-hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px}.theme-hero-meta span{display:flex;align-items:center;gap:6px;font-size:12px;color:#c4d7cd}.theme-hero-meta svg{width:15px;color:var(--brand-orange)}.theme-orientation{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.theme-orientation>section{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:16px;padding:22px}.theme-orientation>section>p{font-size:12px;line-height:1.65;color:var(--muted);margin-bottom:11px}.orientation-goal{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.55;margin-bottom:11px}.orientation-goal svg{width:15px;color:var(--green);flex-shrink:0}.theme-start-bar{grid-column:1/-1;background:var(--bg-eeebf8, #eeebf8);border-radius:14px;padding:16px 19px;display:flex;align-items:center;justify-content:space-between;gap:20px}.theme-start-bar>div{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5;color:var(--fg-625679, #625679)}.theme-start-bar>div>svg{width:18px;flex-shrink:0}.theme-start-bar .button{font-size:12px;white-space:nowrap}.theme-quiz{margin-top:20px}.quiz-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.quiz-heading h2{font-size:21px;margin:5px 0}.quiz-heading p{font-size:12px;color:var(--muted);line-height:1.5}.quiz-heading>span{font-size:12px;background:var(--bg-fff, #fff);border:1px solid var(--line);padding:8px 11px;border-radius:15px;white-space:nowrap}.theme-question{display:grid;grid-template-columns:35px 1fr;gap:10px;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:15px;padding:20px;margin-bottom:13px}.theme-question-number{width:28px;height:28px;border-radius:9px;background:var(--coral-soft);color:var(--coral-ink);display:grid;place-items:center;font-size:12px;font-weight:700}.theme-question h3{font-size:13px;line-height:1.65;white-space:pre-line;margin-bottom:15px}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-options button{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:9px;padding:10px;text-align:left;font-size:12px;text-transform:capitalize}.theme-options button>span{width:22px;height:22px;border-radius:6px;background:var(--bg-f1f3ef, #f1f3ef);display:grid;place-items:center;font-size:12px}.theme-options button>svg{width:14px;margin-left:auto;color:var(--green)}.theme-options button.selected{border-color:var(--green);background:var(--bg-f1f8f3, #f1f8f3)}.theme-submit{margin-left:auto;display:flex;font-size:12px}.theme-result{margin-top:20px}.theme-result-score{background:var(--brand-green);color:#fff;border-radius:17px;padding:23px;display:flex;align-items:center;gap:16px}.theme-result-score>svg{width:47px;height:47px;padding:11px;border-radius:14px;background:var(--brand-orange);color:var(--fg-18312d, #18312d)}.theme-result-score span{font-size:12px;letter-spacing:1.2px;color:#b8cdc2}.theme-result-score h2{font-size:21px;margin:5px 0}.theme-result-score p{font-size:12px;color:var(--brand-orange)}.gap-heading{display:flex;align-items:center;gap:10px;margin:22px 0 13px}.gap-heading>svg{color:var(--violet)}.gap-heading h2{font-size:17px}.gap-heading p{font-size:12px;color:var(--muted);margin-top:3px}.gap-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.gap-list article{background:var(--bg-fff, #fff);border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:12px;padding:16px}.gap-list article>span{font-size:12px;color:var(--coral-ink);font-weight:700;text-transform:capitalize}.gap-list blockquote{font-size:12px;line-height:1.55;color:var(--muted);background:var(--bg-f6f7f3, #f6f7f3);padding:10px;margin:10px 0;border-radius:8px}.gap-list article>p{font-size:12px;line-height:1.55}.theme-result>.button{font-size:12px}.theme-mastered{display:flex;align-items:center;gap:15px;background:var(--green-soft);padding:20px;border-radius:14px;margin:18px 0}.theme-mastered>svg{color:var(--green)}.theme-mastered h2{font-size:16px}.theme-mastered p{font-size:12px;line-height:1.55;margin-top:4px}.answer-review{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:13px;padding:15px;margin-top:17px}.answer-review summary{font-size:12px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between}.answer-review>div{border-top:1px solid var(--line);padding:13px 0}.answer-review strong{font-size:12px;text-transform:capitalize}.answer-review p,.answer-review blockquote{font-size:12px;line-height:1.55;color:var(--muted);margin:6px 0}.answer-review blockquote{background:var(--bg-f5f6f2, #f5f6f2);padding:10px;border-radius:8px}@media(max-width:900px){.source-workspace{grid-template-columns:1fr}.source-direction-column{border-left:0;border-top:1px solid var(--line)}.blueprint-main-grid{grid-template-columns:1fr}.blueprint-support{grid-template-columns:1fr 1fr}.blueprint-support>div:last-child{grid-column:1/-1}.publish-bar{align-items:flex-start}.theme-orientation{grid-template-columns:1fr}.theme-start-bar{grid-column:auto}.learner-theme-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.theme-studio-heading{align-items:flex-start}.theme-studio-heading h1{font-size:24px}.theme-studio-heading p{font-size:12px}.studio-audience{display:none}.studio-steps>i{width:30px;margin:0 24px}.studio-steps small{display:none}.source-input-column,.source-direction-column{padding:19px 15px}.review-heading{align-items:flex-start;gap:10px}.review-heading h2{font-size:18px}.review-progress{font-size:12px;white-space:nowrap}.blueprint-editor,.blueprint-support{padding:17px 14px}.blueprint-support{display:block}.option-editor{grid-template-columns:1fr}.publish-bar{flex-direction:column}.publish-bar .button{width:100%}.learner-theme-grid{grid-template-columns:1fr}.theme-learning-hero{padding:23px 19px}.theme-learning-hero h1{font-size:24px}.theme-start-bar{flex-direction:column;align-items:stretch}.theme-question{grid-template-columns:1fr;padding:17px 14px}.theme-options{grid-template-columns:1fr}.gap-list{grid-template-columns:1fr}.quiz-heading>span{display:none}.theme-result-score h2{font-size:17px}}

.material-back{margin:0 0 18px}
.learner-theme-card{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:.2s}
.learner-theme-card:hover{transform:translateY(-2px);border-color:#b8cdc0}
.theme-card-main{border:0;background:transparent;padding:23px;text-align:left;flex:1}
.theme-card-main:hover{background:var(--bg-fafbf9, #fafbf9)}
.adaptive-card-button{margin:0 23px 12px;justify-content:center;font-size:12px}
.private-material-note{display:flex;align-items:center;gap:6px;margin:0 23px 18px;color:var(--green);font-size:12px}
.private-material-note svg{width:13px}
.adaptive-practice,.adaptive-result{max-width:900px;margin:0 auto}
.adaptive-practice-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;color:var(--muted);font-size:13px}
.adaptive-practice-top .text-button{margin:0}
.adaptive-start,.adaptive-reflection,.adaptive-question,.adaptive-result{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.adaptive-start{text-align:center;padding:48px 35px}
.adaptive-start>svg{width:52px;height:52px;padding:13px;border-radius:16px;background:var(--green-soft);color:var(--green);margin-bottom:16px}
.adaptive-start h1,.adaptive-reflection h1,.adaptive-result h1{font-size:28px;margin:8px 0 12px}
.adaptive-start>p,.adaptive-reflection>p,.adaptive-result>p{color:var(--muted);font-size:13px;line-height:1.7;max-width:650px;margin:0 auto 22px}
.adaptive-promises{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0}
.adaptive-promises span{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--green)}
.adaptive-promises svg{width:14px}
.adaptive-progress{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.adaptive-progress>span{font-size:12px;color:var(--muted);white-space:nowrap}
.adaptive-progress>div{height:6px;background:var(--bg-e9eee9, #e9eee9);border-radius:6px;flex:1;overflow:hidden}
.adaptive-progress i{display:block;height:100%;background:var(--green);border-radius:6px;transition:.25s}
.adaptive-question>h1{font-size:24px;line-height:1.45;margin:8px 0 20px;white-space:pre-line}
.adaptive-source{display:flex;gap:12px;background:var(--bg-f2f5ef, #f2f5ef);border-left:3px solid var(--green);border-radius:10px;padding:15px;margin:0 0 20px}
.adaptive-source>svg{color:var(--green);width:19px;flex-shrink:0}
.adaptive-source strong{font-size:12px;color:var(--green)}
.adaptive-source p{font-size:13px;line-height:1.65;color:var(--muted);margin-top:4px}
.adaptive-question .answer-grid{grid-template-columns:1fr}
.adaptive-reflection>svg{color:var(--violet);margin-bottom:10px}
.adaptive-reflection>p{margin-left:0}
.adaptive-reflection label{display:block;font-size:12px;font-weight:700;margin:18px 0 7px}
.adaptive-reflection textarea{width:100%;min-height:130px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:14px;font:13px/1.6 'DM Sans',sans-serif;margin-bottom:16px}
.adaptive-restart{margin:14px auto 0;display:flex;font-size:12px}
.adaptive-result{text-align:center;padding:45px 30px}
.adaptive-result>svg{width:54px;height:54px;color:var(--green);margin-bottom:12px}
.adaptive-next{display:flex;flex-direction:column;text-align:left;gap:6px;background:var(--bg-f3effa, #f3effa);border-radius:12px;padding:17px;margin:20px auto;max-width:650px}
.adaptive-next strong{font-size:13px;color:var(--violet)}
.adaptive-next span{font-size:12px;line-height:1.6;color:var(--muted)}
.empty-themes .button{margin-top:18px}
@media(max-width:560px){.theme-studio-heading{flex-direction:column}.theme-studio-heading>.button{width:100%}.adaptive-practice-top{align-items:flex-start}.adaptive-practice-top>span{text-align:right;font-size:12px}.adaptive-start,.adaptive-reflection,.adaptive-question,.adaptive-result{padding:23px 17px}.adaptive-start{padding:32px 18px}.adaptive-start h1,.adaptive-reflection h1,.adaptive-result h1{font-size:23px}.adaptive-question>h1{font-size:20px}.adaptive-promises{flex-direction:column;align-items:flex-start}.adaptive-source{padding:12px}}

/* Own material is the main entry; examples are optional. */
.demo-library { margin: 24px 0; padding: 20px; border: 1px solid var(--border, #dfe7e1); border-radius: 16px; background: var(--surface, white); }
.demo-library > summary, details.studio-example > summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.demo-toggle { margin-top: 24px; }
details.studio-example { display: block; }
details.studio-example > svg { display: none; }
.upload-list { padding: 0; list-style: none; }
.upload-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #dfe7e1; }
.upload-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.manual-material { margin: 20px 0; padding: 18px; border: 1px solid #cbdcd4; border-radius: 12px; }
.manual-material p { font-size: 14px; line-height: 1.6; }
.map-point-group { width: 100%; max-width: 850px; }
.map-point { position: relative; width: 100%; line-height: 0; }
.map-point > img { display: block; width: 100%; height: auto; border-radius: 10px; }
.map-point-surface { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: crosshair; }
.map-point-surface:focus-visible { outline: 3px solid #cf663e; outline-offset: 4px; }
.map-point-marker { position: absolute; display: block; width: 22px; height: 22px; min-width: 8px; min-height: 8px; transform: translate(-50%, -50%); border: 3px solid #fff; outline: 2px solid #153f36; background: #cf663e99; border-radius: 50%; pointer-events: none; }
.map-point-group > p { font-size: 13px; line-height: 1.6; }
.map-question-editor { display: grid; gap: 14px; }
.studio-error { white-space: pre-line; }
.question-add { flex-wrap: wrap; }
/* Document downloads */
.theme-document-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.theme-document-actions .button,.theme-download{display:inline-flex;align-items:center;gap:7px}.theme-download{margin-top:20px}

/* Live learning analytics */
.teacher-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.teacher-metrics>div:nth-child(4) svg{color:var(--violet)}.teacher-metrics>div:nth-child(5) svg{color:var(--gold)}

/* Home discovery */
.lab-home-card{width:100%;border:1px solid var(--line);background:linear-gradient(110deg,var(--bg-f0edf8, #f0edf8),var(--bg-f8f6fb, #f8f6fb));border-radius:16px;padding:18px 22px;margin-top:14px;display:flex;align-items:center;gap:16px;text-align:left;transition:transform .2s,box-shadow .2s}.lab-home-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(77,65,111,.09)}.lab-home-card>div{width:47px;height:47px;border-radius:14px;background:var(--violet);color:#fff;display:grid;place-items:center;flex-shrink:0}.lab-home-card>span{display:flex;flex-direction:column;gap:4px;flex:1}.lab-home-card small{font-size:12px;letter-spacing:1.2px;color:var(--fg-7566a9, #7566a9);font-weight:700}.lab-home-card strong{font-family:'Manrope';font-size:15px}.lab-home-card em{font-size:13px;color:var(--muted);font-style:normal}.lab-home-card>svg{color:var(--fg-7566a9, #7566a9);width:19px}

/* Climate laboratory */
.climate-page{max-width:1180px;margin:0 auto;padding-bottom:20px}.climate-page:fullscreen{background:var(--cream);overflow:auto;padding:28px}.climate-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.climate-heading h1{font-size:32px;letter-spacing:-1.1px;margin:7px 0}.climate-heading p{font-size:13px;color:var(--muted);line-height:1.6}.climate-heading .icon-button{flex-shrink:0}.climate-mission{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--bg-e9f2ed, #e9f2ed),var(--bg-f2f6f1, #f2f6f1));border:1px solid #d5e3da;border-radius:17px;padding:20px 22px;margin-bottom:18px}.mission-icon{width:48px;height:48px;border-radius:14px;background:var(--bg-fff, #fff);color:var(--green);display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 15px rgba(34,82,66,.06)}.climate-mission>div:nth-child(2){flex:1}.climate-mission>div>span{font-size:12px;letter-spacing:1.3px;color:var(--green);font-weight:700}.climate-mission h2{font-size:16px;margin:5px 0}.climate-mission p{font-size:13px;line-height:1.55;color:var(--fg-5f736b, #5f736b);max-width:740px}.mission-proof{display:flex;align-items:center;gap:6px;background:var(--bg-fff, #fff);border:1px solid #d6e3da;border-radius:20px;padding:8px 11px;font-size:12px;font-weight:700;color:var(--green);white-space:nowrap}.mission-proof svg{width:15px}.climate-steps{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:14px;margin-bottom:18px;padding:14px 18px}.climate-steps>div{display:grid;grid-template-columns:30px 1fr;-moz-column-gap:9px;column-gap:9px;align-items:center;position:relative;padding:2px 18px;color:var(--muted)}.climate-steps>div:not(:last-child):after{content:'';position:absolute;right:0;top:5px;bottom:5px;border-right:1px solid var(--line)}.climate-steps>div>span{grid-row:1/3;width:28px;height:28px;border-radius:50%;background:var(--bg-eef1ee, #eef1ee);display:grid;place-items:center;font-size:13px;font-weight:700}.climate-steps>div>span svg{width:14px}.climate-steps strong{font-size:13px}.climate-steps small{font-size:12px}.climate-steps .active{color:var(--ink)}.climate-steps .active>span{background:var(--coral);color:#fff}.climate-steps .done{color:var(--green)}.climate-steps .done>span{background:var(--green-soft);color:var(--green)}
.climate-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(285px,.85fr);gap:18px;align-items:start}.climate-visual-panel,.climate-controls{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;overflow:hidden}.scene-toolbar{height:48px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e6ebe7}.scene-toolbar>span{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.scene-toolbar i{width:7px;height:7px;border-radius:50%;background:#a3aea8}.scene-toolbar i.live{background:var(--green);box-shadow:0 0 0 4px #e7f3ed}.scene-toolbar small{font-size:12px;color:var(--muted)}.climate-scene{height:430px;position:relative;background:var(--bg-eaf2ef, #eaf2ef);overflow:hidden}.climate-scene canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.scene-error{position:absolute;inset:20px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px}.scene-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid #e5ebe7;border-bottom:1px solid #e5ebe7}.scene-legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.scene-legend i{width:9px;height:9px;border-radius:3px}.legend-green{background:#799c72}.legend-blue{background:#4c9da6}.legend-coral{background:#bd6f58}.climate-metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 12px;gap:5px}.climate-metrics>div{display:grid;grid-template-columns:20px 1fr;-moz-column-gap:6px;column-gap:6px;padding:4px 9px;border-right:1px solid var(--line)}.climate-metrics>div:last-child{border:0}.climate-metrics svg{grid-row:1/4;width:17px;color:var(--muted);margin-top:3px}.climate-metrics span{font-size:12px;color:var(--muted)}.climate-metrics strong{font-family:'Manrope';font-size:16px;margin:2px 0}.climate-metrics small{font-size:12px;color:var(--muted)}.climate-metrics .risk-low strong{color:var(--green)}.climate-metrics .risk-medium strong{color:var(--fg-aa7c31, #aa7c31)}.climate-metrics .risk-high strong{color:var(--coral-ink)}
.climate-controls>section{padding:20px}.climate-controls>section+section{border-top:1px solid var(--line)}.control-section-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:17px}.control-section-heading>span{width:25px;height:25px;border-radius:8px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}.control-section-heading h2{font-size:14px;margin:1px 0 4px}.control-section-heading p{font-size:12px;line-height:1.45;color:var(--muted)}.prediction-group{border:0;padding:0;margin:0 0 13px;min-width:0}.prediction-group legend{font-size:12px;font-weight:600;margin-bottom:7px}.prediction-group>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.prediction-group button{border:1px solid var(--line);background:var(--bg-fafbf9, #fafbf9);border-radius:8px;min-height:34px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:3px;padding:5px}.prediction-group button:hover{border-color:#b9aaa8}.prediction-group button.selected{background:var(--coral-soft);border-color:#e3a18e;color:var(--fg-9c4e39, #9c4e39);font-weight:700}.prediction-scale{font-size:12px;line-height:1.5;color:var(--muted);margin-top:-4px}.parameter-control{display:block;margin-bottom:17px}.parameter-control>span{display:grid;grid-template-columns:18px 1fr auto;align-items:center;font-size:12px;gap:6px}.parameter-control svg{width:15px;color:var(--green)}.parameter-control strong{font-size:13px;color:var(--green)}.parameter-control input{width:100%;margin:10px 0 2px;accent-color:var(--green);cursor:pointer}.parameter-control small{font-size:12px;color:var(--muted)}.climate-controls .button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px}.climate-controls .button svg{width:16px}
.climate-explanation{margin-top:18px;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:23px}.climate-explanation>label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}.climate-explanation textarea{width:100%;min-height:118px;resize:vertical;border:1px solid #dfe5df;background:var(--bg-fafbf9, #fafbf9);border-radius:11px;padding:14px;font:inherit;font-size:13px;line-height:1.6;color:var(--ink)}.climate-explanation textarea:focus{outline:3px solid rgba(117,102,169,.18);border-color:var(--line)}.explanation-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}.explanation-footer>span{font-size:12px;color:var(--muted)}.explanation-footer>span.valid{color:var(--green)}.explanation-footer .button{display:flex;align-items:center;gap:7px}.climate-feedback{display:flex;align-items:flex-start;gap:15px;background:var(--bg-faf3e6, #faf3e6);border:1px solid #ead9b9;border-radius:16px;padding:21px;margin-top:18px}.climate-feedback.passed{background:var(--green-soft);border-color:#cce1d4}.feedback-orb{width:43px;height:43px;border-radius:13px;background:var(--bg-fff, #fff);color:var(--fg-a37b35, #a37b35);display:grid;place-items:center;flex-shrink:0}.passed .feedback-orb{color:var(--green)}.climate-feedback>div:last-child{flex:1}.climate-feedback>div>span{font-size:12px;letter-spacing:1.2px;font-weight:700;color:var(--fg-8e7346, #8e7346)}.climate-feedback.passed>div>span{color:var(--green)}.climate-feedback h2{font-size:16px;margin:5px 0}.climate-feedback p{font-size:13px;line-height:1.6;color:var(--fg-5e6e67, #5e6e67)}.evidence-checks{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.evidence-checks span{display:flex;align-items:center;gap:3px;border:1px solid #ddd7c9;background:rgba(255,255,255,.55);border-radius:15px;padding:5px 8px;font-size:12px;color:var(--muted)}.evidence-checks span.met{color:var(--green);border-color:#c8ddcf;background:var(--bg-fff, #fff)}.evidence-checks svg{width:11px}.credential-earned{display:flex;align-items:center;gap:15px;background:linear-gradient(120deg,var(--brand-green),#2b5046);color:#fff;border-radius:17px;padding:21px 23px;margin-top:18px}.credential-earned>svg{width:38px;height:38px;color:#efb18a}.credential-earned>div{flex:1}.credential-earned span{font-size:12px;letter-spacing:1.3px;color:#b6d2c4;font-weight:700}.credential-earned h2{font-size:18px;margin:4px 0}.credential-earned p{font-size:12px;color:#d2e1da}.credential-earned .button{display:flex;align-items:center;gap:7px;font-size:12px}.climate-reset{margin:16px auto 0;display:flex;align-items:center;gap:7px}.simulation-note{display:flex;align-items:flex-start;justify-content:center;gap:6px;color:var(--muted);font-size:12px;line-height:1.5;margin:18px auto 0;max-width:760px}.simulation-note svg{width:13px;flex-shrink:0;margin-top:1px}

/* Verifiable credentials */
.credentials-page{max-width:1080px;margin:0 auto}.credentials-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.credentials-heading h1{font-size:31px;letter-spacing:-1px;margin:7px 0}.credentials-heading p{font-size:13px;line-height:1.6;color:var(--muted);max-width:670px}.credential-seal{display:flex;align-items:center;gap:8px;color:var(--green);font-size:12px;font-weight:700;line-height:1.4;background:var(--green-soft);border:1px solid #d4e5da;padding:12px 15px;border-radius:13px;white-space:nowrap}.credential-seal svg{width:25px}.credential-explainer{display:flex;gap:15px;background:var(--violet-soft);border:1px solid var(--violet-soft);border-radius:15px;padding:19px 21px;margin-bottom:22px}.credential-explainer>svg{color:var(--violet);flex-shrink:0}.credential-explainer h2{font-size:14px;margin-bottom:5px}.credential-explainer p{font-size:13px;line-height:1.6;color:var(--fg-6c647b, #6c647b)}.empty-credentials{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:19px;text-align:center;padding:50px 25px}.empty-credentials>div{width:66px;height:66px;border-radius:20px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;margin:0 auto 19px}.empty-credentials>div svg{width:34px;height:34px}.empty-credentials h2{font-size:24px;margin:8px 0}.empty-credentials p{max-width:520px;margin:0 auto 20px;font-size:13px;line-height:1.65;color:var(--muted)}.empty-credentials .button{display:inline-flex;align-items:center;gap:8px}.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.credential-card{background:var(--bg-fff, #fff);border:1px solid #dfe5df;border-radius:19px;padding:25px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.credential-card:before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--green),#7fa58c,var(--violet))}.credential-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.credential-award{width:51px;height:51px;border-radius:16px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}.credential-award svg{width:28px;height:28px}.credential-card-top>span{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--green);font-weight:700}.credential-card-top>span svg{width:15px}.credential-card h2{font-size:21px;margin:7px 0 9px}.credential-card>p{font-size:13px;line-height:1.6;color:var(--muted)}.credential-evidence{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:19px 0}.credential-evidence>div{background:var(--bg-f6f8f5, #f6f8f5);border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:4px}.credential-evidence span{font-size:12px;color:var(--muted)}.credential-evidence strong{font-size:13px}.credential-code{background:var(--bg-f2f0f8, #f2f0f8);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}.credential-code span{font-size:12px;letter-spacing:1.1px;color:var(--violet);font-weight:700}.credential-code strong{font-family:monospace;font-size:12px;overflow-wrap:anywhere;color:var(--fg-5e527e, #5e527e)}.credential-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}.credential-actions .button{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:12px}.credential-actions svg{width:15px}.credential-actions .text-button{display:flex;align-items:center;gap:5px;font-size:12px;text-decoration:none}

/* Public verification */
.verification-page{min-height:100vh;background:radial-gradient(circle at 20% 10%,var(--bg-e7f1eb, #e7f1eb),transparent 38%),var(--bg-f7f8f4, #f7f8f4);padding:35px 20px;display:flex;flex-direction:column;align-items:center}.verification-brand{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:800;font-size:25px;letter-spacing:-1px;margin-bottom:30px}.verification-brand>span>span{color:var(--coral)}.verification-card{width:100%;max-width:650px;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:22px;padding:38px;box-shadow:0 20px 60px rgba(24,49,45,.08);text-align:center}.verification-icon{width:65px;height:65px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 20px}.verification-icon svg{width:35px;height:35px}.verification-icon.invalid{background:var(--coral-soft);color:var(--coral)}.verification-card>h1{font-size:27px;letter-spacing:-.7px;margin:9px 0}.verification-card>p{font-size:13px;color:var(--muted);line-height:1.6}.verification-skill{display:flex;align-items:center;gap:13px;text-align:left;background:linear-gradient(120deg,var(--bg-e9f2ed, #e9f2ed),var(--bg-f5f7f3, #f5f7f3));border-radius:14px;padding:17px;margin:23px 0}.verification-skill>svg{color:var(--green);width:30px;height:30px}.verification-skill span{font-size:12px;letter-spacing:1.2px;color:var(--green);font-weight:700}.verification-skill h2{font-size:17px;margin-top:4px}.verification-card dl{margin:0;text-align:left}.verification-card dl>div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:11px 4px;border-bottom:1px solid #edf0ed}.verification-card dt{font-size:12px;color:var(--muted)}.verification-card dd{margin:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}.verification-standard{display:flex;align-items:flex-start;gap:10px;text-align:left;background:var(--violet-soft);border-radius:11px;padding:14px;margin-top:20px}.verification-standard>svg{width:20px;color:var(--violet);flex-shrink:0}.verification-standard strong{font-size:12px}.verification-standard p{font-size:12px;line-height:1.55;color:var(--fg-6a6178, #6a6178);margin-top:4px}.verification-page>.text-button{margin:20px 0 10px}.verification-page>small{font-size:12px;color:var(--muted);text-align:center}

@media(max-width:1250px){.teacher-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.climate-workspace{grid-template-columns:1fr}.climate-controls{display:grid;grid-template-columns:1fr 1fr}.climate-controls>section+section{border-top:0;border-left:1px solid var(--line)}.climate-scene{height:450px}}
@media(max-width:900px){.climate-mission{align-items:flex-start;flex-wrap:wrap}.mission-proof{margin-left:64px}.climate-metrics{grid-template-columns:1fr 1fr;gap:12px}.climate-metrics>div:nth-child(2){border-right:0}.climate-heading h1{font-size:28px}.credential-grid{grid-template-columns:1fr}.credential-card{max-width:650px;width:100%;margin:auto}}
@media(max-width:800px){.sidebar-label{margin-top:30px}.climate-controls{grid-template-columns:1fr}.climate-controls>section+section{border-left:0;border-top:1px solid var(--line)}.climate-scene{height:400px}.climate-page:fullscreen{padding:20px}.credentials-heading h1{font-size:27px}}
@media(max-width:560px){.lab-home-card{padding:15px;gap:11px}.lab-home-card>div{width:41px;height:41px}.lab-home-card strong{font-size:13px}.lab-home-card em{font-size:12px;line-height:1.4}.lab-home-card>svg{display:none}.climate-heading h1{font-size:25px}.climate-heading p{font-size:13px}.climate-heading .icon-button{width:36px;height:36px}.climate-mission{padding:17px;gap:11px}.mission-icon{width:40px;height:40px}.climate-mission h2{font-size:14px;line-height:1.4}.climate-mission p{font-size:12px}.mission-proof{margin-left:51px}.climate-steps{padding:10px 5px}.climate-steps>div{padding:2px 7px;grid-template-columns:25px 1fr;-moz-column-gap:5px;column-gap:5px}.climate-steps>div>span{width:23px;height:23px}.climate-steps small{display:none}.climate-steps strong{font-size:12px}.scene-toolbar{padding:0 12px}.scene-toolbar small{display:none}.climate-scene{height:300px}.scene-legend{gap:10px}.scene-legend span{font-size:12px}.climate-metrics{padding:13px 7px;gap:8px}.climate-metrics>div{padding:4px 7px}.climate-metrics strong{font-size:14px}.climate-controls>section{padding:18px}.climate-explanation{padding:18px}.explanation-footer{align-items:flex-start;flex-direction:column}.explanation-footer .button{width:100%;justify-content:center}.climate-feedback,.credential-earned{align-items:flex-start;flex-wrap:wrap;padding:18px}.credential-earned .button{margin-left:53px}.simulation-note{font-size:12px}.credentials-heading{align-items:flex-start}.credential-seal{display:none}.credentials-heading h1{font-size:25px}.credential-explainer{padding:16px}.credential-card{padding:21px 18px}.credential-actions{align-items:stretch}.credential-actions .button{flex:1;justify-content:center}.credential-actions .text-button{width:100%;justify-content:center;margin-top:4px}.verification-page{padding:24px 14px}.verification-card{padding:28px 19px}.verification-card>h1{font-size:23px}.verification-card dl>div{grid-template-columns:105px 1fr}.verification-card dd{font-size:12px}.theme-document-actions{display:grid;grid-template-columns:1fr}.theme-document-actions .button{justify-content:center}}
@media(prefers-reduced-motion:reduce){.lab-home-card{transition:none}.lab-home-card:hover{transform:none}}
.confidence-picker{margin-top:18px;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-fafbf9, #fafbf9)}.confidence-picker>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.confidence-picker>div:first-child>span{font-size:13px;font-weight:700}.confidence-picker small{font-size:12px;color:var(--muted)}.confidence-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}.confidence-options button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:8px;padding:9px 8px;font-size:12px;font-weight:600}.confidence-options button:hover:not(:disabled){border-color:#9fb7aa}.confidence-options button.selected{border:2px solid var(--violet);padding:8px 7px;background:var(--violet-soft);color:var(--fg-5d4e8c, #5d4e8c)}.confidence-options button:disabled{cursor:default;opacity:.65}.confidence-options button.selected:disabled{opacity:1}.confidence-picker.checked{background:var(--bg-f5f3f9, #f5f3f9)}.confidence-picker>p{font-size:12px;line-height:1.55;color:var(--fg-665a85, #665a85);margin-top:10px}.learning-completion{max-width:850px}.lesson-reflection{display:flex;gap:14px;text-align:left;background:var(--bg-f3f0f8, #f3f0f8);border:1px solid var(--line);border-radius:14px;padding:20px;color:var(--violet)}.lesson-reflection>svg{flex:none;margin-top:2px}.lesson-reflection>div{flex:1;min-width:0}.lesson-reflection label{display:block;font-family:'Manrope';font-size:13px;font-weight:700;line-height:1.5;color:var(--ink)}.lesson-reflection p{font-size:12px;line-height:1.55;color:var(--muted);margin-top:5px}.lesson-reflection textarea{display:block;width:100%;min-height:105px;margin-top:13px;padding:13px;border:1px solid var(--line);border-radius:10px;background:var(--bg-fff, #fff);resize:vertical;font:13px/1.6 'DM Sans',sans-serif;color:var(--ink);outline:0}.lesson-reflection textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(117,102,169,.1)}.reflection-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin:6px 0 14px}.lesson-insight{display:flex;align-items:flex-start;gap:14px;text-align:left;background:var(--bg-edf4ef, #edf4ef);border:1px solid #dce8df;border-radius:14px;padding:19px}.lesson-insight>div:last-child{flex:1}.lesson-insight span{display:block;font-size:12px;font-weight:700;letter-spacing:1.3px;color:var(--green);margin-bottom:5px}.lesson-insight h2{font-size:16px;letter-spacing:-.3px}.lesson-insight p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:6px}.next-review{display:flex;align-items:flex-start;gap:12px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:12px}.next-review>svg{width:20px;color:var(--coral);flex:none}.next-review strong{display:block;font-size:13px}.next-review span{display:block;font-size:12px;line-height:1.55;color:var(--muted);margin-top:4px;font-style:italic}.review-card{display:flex;align-items:center;gap:16px;padding:19px 21px;margin:0 0 20px;background:linear-gradient(110deg,var(--bg-eef4ef, #eef4ef),var(--bg-f5f2f8, #f5f2f8));border:1px solid #dce6df;border-radius:15px}.review-icon{width:45px;height:45px;display:grid;place-items:center;background:var(--bg-fff, #fff);color:var(--green);border-radius:13px;flex:none}.review-card>div:nth-child(2){flex:1}.review-card>div:nth-child(2)>span{font-size:12px;letter-spacing:1.3px;font-weight:700;color:var(--green)}.review-card h2{font-size:15px;margin:4px 0}.review-card p{font-size:12px;line-height:1.5;color:var(--muted)}.review-card small{display:flex;align-items:center;gap:5px;color:var(--violet);font-size:12px;margin-top:6px}.review-card small svg{width:13px}.review-card>.button{white-space:nowrap;font-size:12px;padding:10px 13px}@media(max-width:700px){.confidence-picker>div:first-child{display:block}.confidence-picker>div:first-child small{display:block;margin-top:3px}.review-card{align-items:flex-start;flex-wrap:wrap}.review-card>.button{margin-left:61px}.lesson-reflection{padding:16px;gap:10px}}@media(max-width:560px){.confidence-options{gap:5px}.confidence-options button{font-size:12px;padding:9px 4px}.confidence-options button.selected{padding:8px 3px}.lesson-reflection>svg{display:none}.reflection-meta span:first-child{max-width:75%}.lesson-insight{padding:16px;gap:10px}.review-card{padding:16px;gap:11px}.review-card>.button{margin-left:0;width:100%}}

.assigned-recovery-card{display:flex;align-items:center;gap:16px;padding:20px 22px;margin:0 0 18px;background:var(--bg-f2eef8, #f2eef8);border:1px solid #ded6eb;border-radius:15px}.assigned-recovery-icon{width:46px;height:46px;display:grid;place-items:center;background:var(--bg-fff, #fff);color:var(--violet);border-radius:13px;flex:none}.assigned-recovery-card>div:nth-child(2){flex:1}.assigned-recovery-card>div:nth-child(2)>span{font-size:12px;letter-spacing:1.2px;font-weight:700;color:var(--violet)}.assigned-recovery-card h2{font-size:15px;margin:4px 0}.assigned-recovery-card p{font-size:12px;line-height:1.55;color:var(--muted)}.assigned-recovery-card small{display:flex;align-items:center;gap:5px;color:var(--green);font-size:12px;margin-top:7px}.assigned-recovery-card small svg{width:13px}.assigned-recovery-card>.button{white-space:nowrap;font-size:12px;padding:11px 14px}@media(max-width:700px){.assigned-recovery-card{align-items:flex-start;flex-wrap:wrap}.assigned-recovery-card>.button{margin-left:62px}}@media(max-width:560px){.assigned-recovery-card{padding:17px;gap:11px}.assigned-recovery-card>.button{margin-left:0;width:100%}}
.answer.eliminated{opacity:.55;background:var(--bg-f4f5f2, #f4f5f2);cursor:not-allowed}.answer.eliminated>span:last-of-type{text-decoration:line-through}.check-action{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.check-blocker{font-size:13px;color:var(--muted)}@media(max-width:560px){.check-action{flex-direction:column-reverse;align-items:flex-end;gap:6px}}
.lab-blocker{margin:0 0 10px}
.learner-profile-page{max-width:1100px;margin:0 auto}.profile-insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.profile-insight-grid section{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:22px;border:1px solid #e4e9e4;border-radius:20px;background:var(--bg-fff, #fff)}.profile-insight-grid svg{grid-row:1/4;color:var(--fg-7566a9, #7566a9)}.profile-insight-grid span{font-size:13px;color:var(--muted)}.profile-insight-grid strong{font-size:26px;color:var(--fg-18312d, #18312d)}.profile-insight-grid small{color:var(--muted)}.profile-editor{display:grid;gap:18px}.profile-editor-section{padding:24px;border:1px solid #e4e9e4;border-radius:20px;background:var(--bg-fff, #fff)}.profile-section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}.profile-section-title svg{color:var(--fg-de7356, #de7356)}.profile-section-title h2{margin:0 0 4px;font-size:19px}.profile-section-title p{margin:0;color:var(--muted);font-size:14px}.profile-editor-section>label{display:block;margin-bottom:8px;font-weight:650}.profile-editor-section textarea{width:100%;min-height:90px;resize:vertical;padding:14px;border:1px solid #ccd7d1;border-radius:12px;font:inherit}.interest-grid{display:flex;flex-wrap:wrap;gap:10px}.interest-grid button{padding:10px 16px;border:1px solid #ccd7d1;border-radius:999px;background:var(--bg-fff, #fff);color:var(--fg-304d46, #304d46);cursor:pointer}.interest-grid button.selected{border-color:var(--violet);background:var(--bg-f0edf8, #f0edf8);color:var(--fg-554585, #554585);font-weight:700}.profile-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-radio-list{display:grid;gap:10px}.profile-radio-list label{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid #dce4df;border-radius:12px;cursor:pointer}.profile-radio-list label.selected{border-color:var(--coral);background:var(--bg-fff5f0, #fff5f0)}.profile-radio-list input{accent-color:var(--coral)}.profile-radio-list span{display:grid;gap:3px}.profile-radio-list small{color:var(--muted)}.profile-week-target select{width:100%;padding:13px 14px;border:1px solid #ccd7d1;border-radius:12px;background:var(--bg-fff, #fff);color:var(--fg-213d36, #213d36);font:inherit}.profile-save{justify-self:end}.profile-save:disabled{opacity:.65}@media(max-width:760px){.profile-insight-grid,.profile-choice-grid{grid-template-columns:1fr}.profile-save{width:100%;justify-self:stretch}}
.weekly-bar-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;height:230px;padding:22px 8px 4px}.weekly-bar-day{display:grid;grid-template-rows:24px 1fr 28px;gap:8px;min-width:0;text-align:center;color:var(--muted)}.weekly-bar-day strong{font-size:13px;color:var(--fg-52645e, #52645e)}.weekly-bar-day.today strong,.weekly-bar-day.today span{color:var(--fg-cf694d, #cf694d)}.weekly-bar-track{display:flex;align-items:flex-end;justify-content:center;height:100%;min-height:130px;border-radius:12px;background:linear-gradient(180deg,var(--bg-f7f8f5, #f7f8f5),var(--bg-eef1ec, #eef1ec));overflow:hidden}.weekly-bar-track i{display:block;width:min(30px,60%);min-height:4px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#eb9378,#d96849);transition:height .3s ease}.weekly-bar-day span{font-size:13px;font-weight:700;align-self:center}.recent-evidence-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.recent-evidence-grid article{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #e4e9e4;border-radius:18px;background:var(--bg-fff, #fff)}.recent-evidence-grid article>div{display:grid;gap:4px;min-width:0}.recent-evidence-grid strong{font-size:14px;color:var(--fg-213d36, #213d36)}.recent-evidence-grid small,.recent-evidence-grid time{font-size:13px;color:var(--muted)}.recent-evidence-grid time{font-style:normal}.empty-evidence{display:grid;justify-items:center;gap:8px;padding:36px;border:1px dashed #ccd7d1;border-radius:18px;color:var(--muted);text-align:center;background:var(--bg-fff, #fff)}.empty-evidence svg{color:var(--fg-de7356, #de7356)}.empty-evidence strong{color:var(--fg-213d36, #213d36)}.empty-evidence p{margin:0}@media(max-width:1100px){.recent-evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.weekly-bar-chart{gap:7px;padding-inline:0}.weekly-bar-track i{width:45%}.recent-evidence-grid{grid-template-columns:1fr}.recent-evidence-grid article{padding:16px}}
/* Navigatie, toegankelijkheid en kleine layoutcorrecties uit de UX-audit */
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px}
.main-content:focus{outline:0}
.auth-story .auth-story-title{font-family:'Manrope',sans-serif;font-weight:700}
.nav-group-label{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:var(--muted);margin:14px 13px 4px}
.sidebar nav{gap:2px}
.sidebar .nav-item{padding:10px 13px}
.mobile-menu .nav-group-label{margin:12px 12px 2px}
.mobile-menu button.active{color:var(--green);font-weight:700;background:var(--bg-edf3ef, #edf3ef);border-radius:10px}
.mobile-menu{max-height:calc(100vh - 140px);overflow-y:auto}
.bottom-nav button{padding:4px 6px;min-width:56px;min-height:48px}
.app-shell .hero-card{margin-bottom:18px}
.auth-input:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(36,122,104,.22)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(min-width:1251px){.app-shell .teacher-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:560px){.app-shell.in-lesson .main-content{padding-bottom:96px}.app-shell.in-lesson .floating-tutor{bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.app-shell .weekly-top strong{color:var(--fg-8f4f1f, #8f4f1f)}
.app-shell .weekly-card p{color:var(--fg-5f5a50, #5f5a50)}
.app-shell .skill-symbol.violet,.app-shell .lab-home-card small,.app-shell .lab-home-card em{color:var(--fg-5b4d8f, #5b4d8f)}
.app-shell .weekly-bar-day.today>span{color:var(--coral-ink)}
.app-shell .route-step.upcoming .route-step-content{opacity:1;color:var(--muted)}
.app-shell .route-step.upcoming .route-step-content h3{color:var(--muted)}
.auth-story>small{color:#a9c2b8}
.app-shell .coach-top span,.app-shell .coach-bottom span{color:var(--fg-5b4d8f, #5b4d8f)}
.demo-admin-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}
.demo-admin-buttons button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:999px;padding:8px 12px;min-height:36px;font:600 13px 'DM Sans',sans-serif;color:var(--ink);cursor:pointer}
.demo-admin-buttons button:hover{border-color:var(--green);color:var(--green)}
.demo-admin-buttons svg{width:15px;height:15px}
.auth-story .auth-story-title{color:#fff}
.role-picker button svg{flex:none}
.profile-organization{display:block;font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.auth-help{display:block;font-size:13px;line-height:1.45;color:var(--muted);font-weight:400;margin-top:6px}
.optional{font-weight:400;color:var(--muted)}
.organization-join{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 16px;background:var(--bg-fff, #fff);border:1px solid #cfe0d6;border-radius:14px;padding:16px 20px;margin-bottom:18px}
.organization-join-icon{width:38px;height:38px;border-radius:11px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.organization-join-copy h2{font-size:16px}
.organization-join-copy p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:3px}
.organization-join form{display:flex;gap:8px}
.organization-join input{border:1px solid var(--line);border-radius:10px;background:var(--bg-fafbf9, #fafbf9);color:var(--ink);font:600 14px 'DM Sans',sans-serif;letter-spacing:1px;padding:10px 12px;min-height:44px;width:160px}
.organization-join-error{grid-column:1/-1;font-size:13px;color:var(--fg-8f3b28, #8f3b28)}
@media(max-width:900px){.organization-join{grid-template-columns:auto 1fr}.organization-join form{grid-column:1/-1}.organization-join input{flex:1;width:auto;min-width:0}}
.auth-form-wrap label>span:first-child .optional{font-weight:400}
.button.primary:disabled{background:var(--bg-d9dfdb, #d9dfdb);color:var(--fg-4f5c57, #4f5c57);box-shadow:none}
.button.primary:disabled svg{opacity:.7}
.empty-themes>svg{display:block;margin:0 auto}
.studio-steps-list{list-style:none;display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 22px;padding:0;flex-wrap:wrap}
.studio-steps-list li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.studio-steps-list li+li::before{content:'';width:40px;border-top:1px solid #cdd6cf;margin-right:4px}
.studio-steps-list b{width:30px;height:30px;border-radius:50%;background:var(--bg-e7ece7, #e7ece7);display:grid;place-items:center;font-size:12px}
.studio-steps-list li.active{color:var(--ink)}
.studio-steps-list li.active b{background:var(--green);color:#fff}
@media(max-width:560px){.studio-steps-list li span{display:none}.studio-steps-list li+li::before{width:24px}}
@media(max-width:1250px){.climate-workspace>.climate-controls{order:-1}}
.hub-tabs{display:flex;gap:6px;margin:-6px 0 24px;padding:5px;background:var(--bg-eef1ec, #eef1ec);border-radius:13px;width:-moz-max-content;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tabs button{display:flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:9px;padding:9px 14px;min-height:40px;font:600 14px 'DM Sans',sans-serif;color:var(--muted);white-space:nowrap;cursor:pointer}
.hub-tabs button:hover{color:var(--ink)}
.hub-tabs button.active{background:var(--bg-fff, #fff);color:var(--green);box-shadow:0 2px 8px rgba(24,49,45,.08)}
@media(max-width:560px){.hub-tabs{width:auto;margin:-4px -16px 20px;border-radius:0;padding:5px 16px}}
.hub-tabs{position:relative}
@media(max-width:560px){.hub-tabs{width:calc(100% + 32px);max-width:none}.page-heading>.level-badge{white-space:nowrap;flex:none}}
.group-level{display:grid;gap:7px;margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-fafbf9, #fafbf9)}
.group-level label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.group-level select{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--bg-fff, #fff);color:var(--ink);font:14px 'DM Sans',sans-serif;padding:10px 12px;min-height:44px}
.group-level small{font-size:13px;color:var(--muted);line-height:1.45}
.group-create>div select{flex:none;max-width:190px;border:1px solid var(--line);border-radius:9px;background:var(--bg-fafbf9, #fafbf9);color:var(--ink);font:13px 'DM Sans',sans-serif;padding:0 10px}
@media(max-width:700px){.group-create>div{flex-wrap:wrap}.group-create>div input{flex-basis:100%}.group-create>div select{flex:1;max-width:none;min-height:42px}}
.placement-card{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;background:var(--bg-fff, #fff);border:1px solid #d9d3f0;border-radius:16px;padding:18px 20px;margin:18px 0}
.placement-card-icon{width:40px;height:40px;border-radius:12px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center}
.placement-card-copy h2{font-size:17px}
.placement-card-copy p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:3px}
.placement-card ul{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.placement-card li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.placement-card li .subject-icon{width:36px;height:36px;flex:none}
.placement-subject{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.placement-subject small{font-size:13px;color:var(--muted)}
.placement-page{max-width:820px}
.placement-question{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:30px}
.placement-pronunciation{font-size:15px;color:var(--muted);margin:-6px 0 16px;font-style:italic}
.placement-note{font-size:13px;color:var(--muted);margin-top:14px}
.placement-result{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:36px 30px;text-align:center;display:grid;justify-items:center;gap:10px}
.placement-result>svg{color:var(--green)}
.placement-result h1{font-size:24px;max-width:560px}
.placement-result p{font-size:15px;line-height:1.55;color:var(--muted);max-width:520px}
@media(max-width:560px){.placement-card{padding:16px}.placement-card li{flex-wrap:wrap}.placement-card li .placement-subject{flex-basis:calc(100% - 50px)}.placement-card li .button{margin-left:auto}.placement-question,.placement-result{padding:20px}}
.placement-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.placement-badges span{font-size:12px;font-weight:600;border-radius:999px;padding:3px 8px;background:var(--violet-soft);color:var(--fg-4b3f80, #4b3f80)}
.placement-badges span.skipped{background:var(--bg-f1f2ef, #f1f2ef);color:var(--muted)}
.class-table.real .table-head,.class-table.real .student-row{grid-template-columns:1.4fr .7fr .7fr 1.4fr 132px}
.student-actions{display:grid;gap:6px}
.student-actions .recovery-open{width:100%;justify-content:space-between}
.recovery-open.plan{background:var(--violet-soft);color:var(--fg-4b3f80, #4b3f80);border-color:#d9d3f0}
.recovery-open.plan.active{background:#4b3f80;color:#fff}
.start-plan{border-color:#d9d3f0}
.plan-subjects{display:flex;gap:8px;margin:16px 0 12px;flex-wrap:wrap}
.plan-subjects button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:10px;padding:9px 13px;min-height:42px;font:600 14px 'DM Sans',sans-serif;color:var(--ink);cursor:pointer}
.plan-subjects button.active{border-color:var(--violet);background:var(--violet-soft);color:var(--fg-4b3f80, #4b3f80)}
.plan-subjects small{font-size:12px;font-weight:500;color:var(--muted)}
.plan-levels strong{display:block;margin-bottom:8px}
.plan-levels ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plan-levels li{display:grid;grid-template-columns:90px auto 40px;align-items:center;gap:10px;font-size:13px}
.plan-level-bar{display:flex;gap:4px}
.plan-level-bar i{width:26px;height:10px;border-radius:5px;background:var(--bg-e3e6e1, #e3e6e1)}
.plan-level-bar i.right{background:var(--green)}
.plan-levels p,.plan-empty{font-size:13px;color:var(--muted);margin-top:8px}
.plan-dibi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.plan-dibi .button{display:inline-flex;align-items:center;gap:7px}
.plan-dibi small{font-size:13px;color:var(--muted);flex:1;min-width:220px}
.plan-form label small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}
.plan-form select{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg-fafbf9, #fafbf9);color:var(--ink);font:14px 'DM Sans',sans-serif;padding:10px 12px;min-height:44px}
.learner-plan-card{background:var(--bg-fff, #fff);border:1px solid #d9d3f0;border-radius:16px;padding:18px 20px;margin:0 0 18px;display:grid;gap:14px}
.learner-plan-heading{display:flex;gap:14px;align-items:center}
.learner-plan-heading h2{font-size:17px}
.learner-plan-heading p{font-size:14px;color:var(--muted);margin-top:2px}
.learner-plan-card article{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px}
.learner-plan-card h3{font-size:16px}
.learner-plan-card article p{font-size:14px;line-height:1.5;color:var(--muted)}
.learner-plan-card ul{margin:2px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:var(--ink)}
.plan-levels li{grid-template-columns:90px 64px 40px;justify-content:start}
.learner-plan-card ul{list-style:disc}
.learner-plan-card li{margin-bottom:3px}
.auth-form-wrap .sector-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-lower.single{grid-template-columns:1fr}
.class-table.real .table-head.own-content,.class-table.real .student-row.own-content{grid-template-columns:1.4fr 1.6fr 132px}
.subject-icon.material{background:var(--green-soft);color:var(--green)}

/* Group start plans */
.placement-badges span.none{background:var(--bg-f1f2ef, #f1f2ef);color:var(--muted)}
.group-plan-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.group-plan-open .button{display:inline-flex;align-items:center;gap:6px}
.group-plan-basis{display:grid;gap:6px;margin:18px 0 14px}
.group-plan-basis>label{font-weight:700;font-size:14px}
.group-plan-basis>div{display:flex;flex-wrap:wrap;gap:8px}
.group-plan-basis select{flex:1 1 240px;min-height:42px}
.group-plan-basis small{color:var(--muted)}
.group-plan-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.group-plan-list>li{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:12px 18px;padding:14px;border:1px solid var(--line, #e3e4e0);border-radius:14px;background:var(--surface, #fff)}
.group-plan-list>li.skipped{grid-template-columns:1fr;opacity:.75}
.group-plan-who{display:grid;align-content:start;gap:4px}
.group-plan-who small{color:var(--muted);font-size:12px}
.group-plan-include{display:flex;align-items:center;gap:8px;cursor:pointer}
.group-plan-include input{width:18px;height:18px}
.group-plan-fields{display:grid;gap:8px}
.group-plan-fields label{display:grid;gap:4px;font-size:13px;font-weight:600}
.group-plan-fields input,.group-plan-fields textarea,.group-plan-basis select{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--bg-fafbf9, #fafbf9);padding:9px 11px;font:13px/1.5 "DM Sans",sans-serif;color:var(--ink)}
.group-plan-fields textarea{min-height:80px;resize:vertical}
.group-plan-fields details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--violet, #6b5bd2);padding:4px 0}
.group-plan-fields details[open]{display:grid;gap:8px}
.group-plan-fields .field-error{color:var(--danger, #b42318);font-size:12px}
@media (max-width:720px){.group-plan-list>li{grid-template-columns:1fr}}

/* Progress reports */
.report-composer .plan-dibi{display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.report-composer .plan-dibi svg{color:var(--violet);flex:none;margin-top:2px}
.report-create{display:grid;gap:6px;margin-top:18px}
.report-create>label{font-size:12px;font-weight:700}
.report-create>div{display:flex;flex-wrap:wrap;gap:8px}
.report-create input,.report-share-form input,.report-share-form select,.report-approved-heading select,.report-link input{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--bg-fafbf9, #fafbf9);padding:10px 12px;font:13px 'DM Sans',sans-serif;color:var(--ink)}
.report-create small,.report-share p{font-size:12px;line-height:1.55;color:var(--muted)}
.report-create .button,.report-share-form .button,.report-approved-heading .button,.report-link .button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.report-editor{margin-top:18px}
.report-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.report-actions .text-button,.report-learner-actions .text-button{display:inline-flex;align-items:center;gap:5px}
.report-area{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:8px;background:var(--bg-fff, #fff)}
.report-area-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.report-area h3,.report-body h3{font-size:14px}
.report-area h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.report-area ul,.report-body ul{margin:0;padding-left:18px;display:grid;gap:3px;font-size:13px;line-height:1.5}
.report-area dl{display:grid;gap:5px;margin:0}
.report-area dl>div{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:13px;line-height:1.5}
.report-area dt{font-weight:700;color:var(--muted)}
.report-area dd{margin:0}
.report-status{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--bg-f1f2ef, #f1f2ef);color:var(--muted)}
.report-status.op-koers{background:var(--green-soft);color:var(--green)}
.report-status.groeiend{background:var(--violet-soft);color:var(--violet)}
.report-status.aandacht{background:var(--coral-soft);color:var(--fg-9b4c39, #9b4c39)}
.report-note{font-size:13px;line-height:1.55;background:var(--cream);border-radius:9px;padding:9px 11px}
.report-body{display:grid;gap:14px;margin-top:14px;text-align:left}
.report-body>section>p{font-size:14px;line-height:1.6}
.report-body>section>h3{margin-bottom:6px}
.report-approved{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;display:grid;gap:14px}
.report-approved-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.report-approved-heading>span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);flex:1 1 200px}
.report-approved details summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--violet)}
.report-share{background:var(--bg-f4f2f8, #f4f2f8);border-radius:12px;padding:16px;display:grid;gap:10px}
.report-share h3{display:flex;align-items:center;gap:7px;font-size:14px}
.report-share-form,.report-link>div{display:flex;flex-wrap:wrap;gap:8px}
.report-share-form>label{display:grid;gap:6px;flex:1 1 220px;min-width:0;max-width:100%;font-size:12px;font-weight:700}.report-share-form>label input{width:100%}
.report-share-list li>span,.report-consent p{min-width:0;overflow-wrap:anywhere}
.teacher-metrics>div,.teacher-metrics span{min-width:0}.teacher-metrics span{overflow-wrap:anywhere}
@media(max-width:560px){.teacher-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.report-link{display:grid;gap:7px;background:var(--bg-fff, #fff);border:1px solid #dcd5e8;border-radius:10px;padding:12px;font-size:13px}
.report-share-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.report-share-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--bg-fff, #fff);border-radius:10px;padding:10px 12px}
.report-share-list li>span:first-child{display:grid;gap:2px;flex:1 1 220px;font-size:13px}
.report-share-list small{font-size:12px;color:var(--muted)}
.share-state{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--bg-f1f2ef, #f1f2ef);color:var(--muted)}
.share-state.active{background:var(--green-soft);color:var(--green)}
.share-state.waiting{background:var(--violet-soft);color:var(--violet)}
.share-state.declined{background:var(--coral-soft);color:var(--fg-9b4c39, #9b4c39)}
.recovery-open.report{color:var(--ink)}
.learner-report-card .report-consent{display:grid;gap:10px;background:var(--violet-soft);border-radius:12px;padding:14px;margin-top:12px}
.learner-report-card .report-consent p{font-size:13px;line-height:1.55}
.learner-report-card .report-consent>div{display:flex;flex-wrap:wrap;gap:8px}
.learner-report-card .report-consent .button{display:inline-flex;align-items:center;gap:6px}
.report-shared-note{font-size:12px;color:var(--muted);margin-top:10px}
.report-learner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.report-learner-actions .button{display:inline-flex;align-items:center;gap:6px}
.shared-report-page .verification-card.shared-report{max-width:760px;text-align:left}
.shared-report h1{margin-top:6px}
.shared-report>p{color:var(--muted);font-size:13px;margin-top:4px}
.shared-report-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.shared-report-actions .button{display:inline-flex;align-items:center;gap:6px}
.shared-report-actions small{color:var(--muted);font-size:12px}
@media (max-width:560px){.report-area dl>div{grid-template-columns:1fr;gap:2px}.report-actions{width:100%}.report-actions .button{flex:1 1 auto;justify-content:center}}
@media print{.shared-report-actions,.shared-report-page>small{display:none}}
.shared-report .report-area dl{border:0;margin:0;padding:0}
.shared-report .report-area dl>div{display:grid;grid-template-columns:96px 1fr;gap:10px;border:0;padding:0}
.shared-report .report-area dt{font-size:13px;text-transform:none;letter-spacing:0}
.shared-report .report-area dd{font-weight:400;font-size:13px;text-align:left}
.shared-report .report-body ul{padding-left:18px}
@media (max-width:560px){.shared-report .report-area dl>div{grid-template-columns:1fr;gap:2px}}

/* Preview as another role */
.preview-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:13px;line-height:1.5}
.preview-banner span{flex:1 1 260px}
.preview-banner .button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.preview-sector{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.preview-sector button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:999px;padding:8px 13px;font:600 13px 'DM Sans',sans-serif;color:var(--ink)}
.preview-sector button[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.preview-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.preview-roles button{display:grid;gap:4px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg-fff, #fff);color:var(--ink)}
.preview-roles button:hover:not(:disabled){border-color:var(--green);box-shadow:var(--shadow)}
.preview-roles strong{font-size:15px}
.preview-roles span{font-size:13px;color:var(--muted);line-height:1.5}
.admin-invite select{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:13px 'DM Sans',sans-serif;background:var(--bg-fafbf9, #fafbf9);color:var(--ink)}

/* Password change dialog */
.password-dialog{border:1px solid var(--line);border-radius:16px;padding:26px;width:min(420px,calc(100vw - 32px));background:var(--bg-fff, #fff);color:var(--ink);box-shadow:var(--shadow)}
.password-dialog::backdrop{background:rgb(15 30 27 / 45%)}
.password-dialog h2{font-size:19px;margin-bottom:16px;padding-right:36px}
.password-dialog form{display:grid;gap:14px}
.password-dialog label{display:grid;gap:6px;font-size:13px;font-weight:700}
.password-dialog input{border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:14px 'DM Sans',sans-serif;background:var(--bg-fafbf9, #fafbf9);color:var(--ink)}
.password-dialog small{font-weight:400;font-size:12px;color:var(--muted)}
.password-dialog-close{position:absolute;top:16px;right:16px;width:34px;height:34px}
.password-dialog-done{display:grid;gap:12px;justify-items:start;font-size:14px;line-height:1.5}
.password-dialog-done svg{color:var(--green);width:28px;height:28px}

/* Organisation overview for administrators */
.insight .insight-organization{display:grid;gap:6px;font-size:13px;font-weight:700;margin:14px 0;max-width:420px}
.insight .insight-organization select{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:14px 'DM Sans',sans-serif;background:var(--bg-fafbf9, #fafbf9);color:var(--ink)}
.insight-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:16px 0}
.insight-tiles>div{display:grid;gap:4px;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-fff, #fff)}
.insight-tiles svg{color:var(--green)}
.insight-tiles strong{font-size:20px}
.insight-tiles span{font-size:12px;color:var(--muted)}
.insight-tiles .warn svg,.insight-tiles .warn strong{color:var(--fg-9b4c39, #9b4c39)}
.insight-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:8px 0}
.insight-empty{font-size:13px;color:var(--muted);margin:14px 0}
.insight-table{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px}
.insight-row{display:grid;grid-template-columns:1.3fr 1fr 1.4fr 1.3fr 1fr;gap:12px;padding:12px 14px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;align-items:start;background:var(--bg-fff, #fff)}
.insight-row.head{border-top:0;background:var(--bg-f4f5f2, #f4f5f2);font-size:12px;font-weight:700;color:var(--muted)}
.insight-row>span{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.insight-row small{font-size:12px;color:var(--muted)}
.insight-open{border:0;background:none;padding:0;text-align:left;font:700 13px 'DM Sans',sans-serif;color:var(--green);text-decoration:underline;cursor:pointer}
.insight-flag{font-style:normal;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;justify-self:start}
.insight-flag.attention{background:var(--coral-soft);color:var(--fg-9b4c39, #9b4c39)}
.insight-flag.quiet{background:var(--bg-f1f2ef, #f1f2ef);color:var(--muted)}
.insight-flag.ok{background:var(--green-soft);color:var(--green)}
.insight-group h3{font-size:17px;margin:10px 0 4px}
.insight-group .text-button{display:inline-flex;align-items:center;gap:5px}
@media (max-width:800px){.insight-row{grid-template-columns:1fr 1fr}.insight-row.head{display:none}.insight-row>span:first-child{grid-column:1/-1}}

/* Account security dialog */
.security-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto}
.security-section{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--bg-fff, #fff)}
.security-section>summary{display:flex;gap:10px;align-items:flex-start;padding:14px;cursor:pointer;list-style:none}
.security-section>summary::-webkit-details-marker{display:none}
.security-section>summary svg{color:var(--green);flex:none;margin-top:2px}
.security-section>summary span{display:grid;gap:2px}
.security-section>summary small{font-size:12px;color:var(--muted);font-weight:400;line-height:1.45}
.security-section>form,.security-body{display:grid;gap:12px;padding:0 14px 14px}
.security-section label{display:grid;gap:6px;font-size:13px;font-weight:700}
.security-section input{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:14px 'DM Sans',sans-serif;background:var(--bg-fafbf9, #fafbf9);color:var(--ink)}
.security-section p{font-size:13px;line-height:1.55;color:var(--muted)}
.security-section .button{justify-self:start;display:inline-flex;align-items:center;gap:6px}
.security-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.security-steps{display:grid;gap:10px;padding-left:18px;font-size:13px;line-height:1.55}
.security-steps img{display:block;margin:8px 0;border-radius:8px;background:#fff;padding:6px}
.security-secret{font-size:13px;letter-spacing:.5px;word-break:break-all}
.security-codes{display:grid;gap:8px;margin:0 14px 14px;padding:14px;border-radius:10px;background:var(--cream)}
.security-codes ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-left:20px;font-size:14px}
.security-codes>div{display:flex;flex-wrap:wrap;gap:8px}
.security-passkeys{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.security-passkeys li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.security-passkeys li>span{display:grid;gap:2px;font-size:13px}
.security-passkeys small{font-size:12px;color:var(--muted)}
.security-hint{font-size:12px!important}
.security-done{display:flex;gap:8px;align-items:center;padding:0 14px 14px;color:var(--green)!important}
.admin-ai-choice{display:grid;gap:12px;border-left:3px solid var(--green-soft);padding-left:12px}
.admin-ai-choice input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:13px 'DM Sans',sans-serif;background:var(--bg-fafbf9, #fafbf9);color:var(--ink);margin-top:6px}

/* Administration: contacts, invoices and payments */
.records-back{display:inline-flex;align-items:center;gap:5px;margin-bottom:10px}
.records-title{font-size:15px;margin:22px 0 10px}
.records-contacts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.records-contacts>li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg-fff, #fff)}
.records-contacts>li>span:first-child{display:grid;gap:2px;flex:1 1 180px;font-size:14px}
.records-contacts small{font-size:12px;color:var(--muted)}
.records-primary{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-style:normal;font-size:11px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:999px;padding:2px 7px;vertical-align:middle}
.records-reach{display:grid;gap:3px;flex:1 1 200px;font-size:13px}
.records-reach a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);overflow-wrap:anywhere}
.records-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.records-actions .text-button{display:inline-flex;align-items:center;gap:4px}
.records-add{margin-top:10px;display:inline-flex;align-items:center;gap:6px}
.records-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;background:var(--bg-fafbf9, #fafbf9);width:100%}
.records-form label{display:grid;gap:5px;font-size:13px;font-weight:700}
.records-form small{font-size:12px;font-weight:400;color:var(--muted)}
.records-form input:not([type=checkbox]){border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:13px 'DM Sans',sans-serif;background:var(--bg-fff, #fff);color:var(--ink);min-width:0}
.records-form .records-check{display:flex;align-items:center;gap:8px;align-self:end}
.records-form .records-wide,.records-form .records-actions{grid-column:1/-1}
.records-form .button{display:inline-flex;align-items:center;gap:6px}
.insight-row.records-invoice,.insight-row.records-billing{grid-template-columns:1.4fr .8fr .8fr .9fr 1.4fr}
.records-overdue{color:var(--fg-9b4c39, #9b4c39)!important}
@media (max-width:800px){.insight-row.records-invoice,.insight-row.records-billing{grid-template-columns:1fr 1fr}}

/* Logo as home link, and the superadmin profile menu */
.logo-home{border:0;background:none;padding:0;cursor:pointer;color:inherit;border-radius:10px;display:inline-flex}
.logo-home:focus-visible{outline:3px solid var(--brand-green, var(--green));outline-offset:4px}
.profile-menu{position:relative}
.profile-button{width:100%;border:0;background:none;text-align:left;cursor:pointer;border-radius:12px;color:inherit;font:inherit}
.profile-button:hover{background:var(--green-soft)}
.profile-button>svg{margin-left:auto;color:var(--muted);transition:transform .15s}
.profile-button>svg.closed{transform:rotate(180deg)}
.profile-popover{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:40;display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-fff, #fff);box-shadow:var(--shadow)}
.profile-popover>strong{display:flex;align-items:center;gap:6px;font-size:13px}
.profile-popover label{display:grid;gap:4px;font-size:12px;font-weight:700}
.profile-popover select{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:13px 'DM Sans',sans-serif;background:var(--bg-fafbf9, #fafbf9);color:var(--ink)}
.profile-popover button{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:9px;padding:8px 10px;text-align:left;font:600 13px 'DM Sans',sans-serif;color:var(--ink);cursor:pointer}
.profile-popover button:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.profile-popover .profile-popover-link{border:0;color:var(--green);padding:4px 2px}
.profile-popover small{font-size:12px;color:var(--muted);line-height:1.45}
.profile-popover .profile-popover-error{color:var(--fg-9b4c39, #9b4c39)}
.records-address{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg-fff, #fff);font-size:13px;line-height:1.55}
.records-address>svg{color:var(--green);margin-top:2px}
.records-address>span{flex:1 1 240px}
.records-address em{color:var(--muted)}
.records-issuer{border:1px solid var(--line);border-radius:12px;margin:14px 0;background:var(--bg-fff, #fff)}
.records-issuer>summary{display:flex;gap:10px;align-items:flex-start;padding:14px;cursor:pointer;list-style:none}
.records-issuer>summary::-webkit-details-marker{display:none}
.records-issuer>summary svg{color:var(--green);margin-top:2px;flex:none}
.records-issuer>summary span{display:grid;gap:2px}
.records-issuer>summary small{font-size:12px;color:var(--muted)}
.records-issuer>.records-form{margin:0 14px 14px;width:auto}
.records-form select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:13px 'DM Sans',sans-serif;background:var(--bg-fff, #fff);color:var(--ink)}
.records-pdf{display:inline-flex;align-items:center;gap:5px}

/* Theme studio: material links, web page import and exports */
.material-links{display:grid;gap:8px;margin:18px 0}
.material-links ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.material-links li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--bg-fff, #fff);font-size:13px}
.material-links li a{color:var(--green);font-weight:600;overflow-wrap:anywhere;flex:1 1 200px}
.material-links li svg{color:var(--muted)}
.material-link-form,.page-import>div{display:flex;flex-wrap:wrap;gap:8px}
.material-link-form input,.page-import input{flex:1 1 200px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:14px 'DM Sans',sans-serif;background:var(--bg-fff, #fff);color:var(--ink)}
.material-link-form .button,.page-import .button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.page-import{display:grid;gap:6px;margin-top:14px}
.page-import small{font-size:12px;color:var(--muted)}
.material-links.learner{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg-fff, #fff)}
.material-links.learner h3{font-size:15px}
.studio-exports{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0;background:var(--green-soft)}
.studio-exports>div:first-child{display:grid;gap:4px;flex:1 1 320px;font-size:13px;line-height:1.5}
.studio-exports>div:first-child span{color:var(--muted)}

/* Pilot: example source, generator note and definition-length answer options */
.studio-example{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);background:var(--bg-f7faf7, #f7faf7);border-radius:12px;padding:12px 14px;margin:0 0 18px}
.studio-example>svg{width:18px;color:var(--gold);flex-shrink:0}
.studio-example>div{display:flex;flex-direction:column;flex:1;min-width:200px;font-size:12px;line-height:1.5;color:var(--muted)}
.studio-example strong{font-size:13px;color:var(--ink)}
.generator-note{display:flex;align-items:flex-start;gap:7px;margin-top:8px;max-width:640px;line-height:1.5}
.generator-note svg{flex-shrink:0;margin-top:2px;color:var(--violet)}
.theme-options button{text-transform:none;line-height:1.45}
.theme-options button>span{flex-shrink:0}
.theme-results{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:16px;padding:20px;margin:18px 0;display:grid;gap:14px}
.theme-results .section-heading>svg{color:var(--green)}
.theme-results-empty{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);line-height:1.5}
.theme-results-empty>svg{color:var(--green);flex-shrink:0}
.theme-results-empty>p{flex:1;min-width:220px}
.theme-results-picker{display:grid;gap:6px;font-size:12px;font-weight:700;max-width:420px}
.theme-results-picker select{border:1px solid var(--line);border-radius:9px;padding:9px;font:13px 'DM Sans',sans-serif;background:var(--bg-fff, #fff);color:var(--ink)}
.theme-results-summary{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.theme-results-summary span{display:flex;align-items:center;gap:6px}
.theme-results-summary svg{width:15px;color:var(--green)}
.theme-results-summary strong{color:var(--ink)}
.theme-results-summary .hard strong{color:var(--coral-ink)}
.theme-results-table{display:grid;overflow-x:auto}
.theme-results-row{display:grid;grid-template-columns:minmax(140px,1.2fr) 110px minmax(150px,1fr) minmax(180px,1.5fr);gap:12px;align-items:center;padding:10px 4px;border-top:1px solid var(--line);font-size:13px;min-width:600px}
.theme-results-row.head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;border-top:0}
.theme-results-row>span{display:flex;align-items:center;gap:5px;min-width:0}
.theme-results-row .missed{color:var(--muted);line-height:1.45}
.not-started{color:var(--muted);font-style:normal}
.score-pill{display:inline-block;padding:3px 9px;border-radius:12px;font-weight:700;font-variant-numeric:tabular-nums}
.score-pill.good{background:var(--green-soft);color:var(--green)}
.score-pill.mid{background:var(--bg-fbf0dc, #fbf0dc);color:var(--fg-8a5a00, #8a5a00)}
.score-pill.low{background:var(--coral-soft);color:var(--coral-ink)}
.teacher-checklist{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.teacher-checklist-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.teacher-checklist-head h2{font-size:17px}
.teacher-checklist-head span{font-size:12px;color:var(--muted)}
.teacher-checklist ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.teacher-checklist li{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:12px;line-height:1.5;color:var(--muted)}
.teacher-checklist li>svg{width:18px;flex-shrink:0;color:var(--line)}
.teacher-checklist li>div{display:grid;gap:4px;min-width:0}
.teacher-checklist li strong{font-size:13px;color:var(--ink)}
.teacher-checklist li.done>svg{color:var(--green)}
.teacher-checklist li.done strong{text-decoration:line-through;color:var(--muted)}
.teacher-checklist li.next{border-color:var(--green);background:var(--green-soft)}
.teacher-checklist li.next>svg{color:var(--green)}
.teacher-checklist li .button{justify-self:start;margin-top:4px;font-size:12px}
.class-themes{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:18px 0;display:grid;gap:12px}
.class-themes.highlight{border-color:var(--green);box-shadow:var(--shadow)}
.class-theme-list{display:grid;gap:8px}
.class-theme-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:12px;padding:12px 14px;text-align:left;color:var(--ink);transition:.15s}
.class-theme-item:hover,.class-theme-item:focus-visible{border-color:var(--green);background:var(--green-soft)}
.class-theme-item>svg{width:17px;color:var(--green);flex-shrink:0}
.class-theme-icon{width:36px;height:36px;border-radius:10px;background:var(--coral-soft);color:var(--coral);display:grid;place-items:center;flex-shrink:0}
.class-theme-icon svg{width:18px}
.class-theme-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.class-theme-copy strong{font-size:14px}
.class-theme-copy small{font-size:12px;color:var(--muted)}
.studio-example-buttons{display:flex;flex-wrap:wrap;gap:8px}
.reset-link-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.reset-link-row input{flex:1 1 280px;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px;font:12px ui-monospace,monospace;background:var(--bg-fff, #fff);color:var(--ink)}
.blueprint-support article strong,.theme-card-topics span,.gap-list article>span,.answer-review strong{text-transform:none}
.insight-learner-link{display:grid;gap:1px;border:0;background:transparent;padding:4px 0;text-align:left;color:var(--ink);cursor:pointer}.insight-learner-link small{font-size:12px;color:var(--green);text-decoration:underline}
.studio-example.loaded{border-color:var(--green);background:var(--green-soft)}

/* Theme management: status, assignments per class and actions */
.theme-manager{display:grid;gap:12px}
.theme-manager .section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.theme-manager-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.theme-manager-notice{background:var(--green-soft);color:var(--green);border-radius:10px;padding:10px 12px;font-size:13px}
.theme-manager>article.theme-manage-item{display:grid;gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--bg-fff, #fff)}
.theme-manage-item.hidden{background:var(--bg-f7faf7, #f7faf7)}
.theme-manage-item.archived{opacity:.75}
.theme-manage-head{display:flex;align-items:center;gap:10px}
.theme-manage-head>svg{width:18px;color:var(--coral);flex-shrink:0}
.theme-manage-title{display:flex;flex-direction:column;flex:1;min-width:0}
.theme-manage-title strong{font-size:14px;overflow-wrap:anywhere}
.theme-manage-title small{font-size:12px;color:var(--muted)}
.theme-status{font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;white-space:nowrap}
.theme-status.published{background:var(--green-soft);color:var(--green)}
.theme-status.hidden{background:var(--bg-fbf0dc, #fbf0dc);color:var(--fg-8a5a00, #8a5a00)}
.theme-status.archived{background:var(--bg-f0f3ee, #f0f3ee);color:var(--muted)}
.theme-assignments{display:flex;flex-wrap:wrap;gap:6px}
.theme-assignment-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:var(--bg-eeebf8, #eeebf8);color:var(--fg-574b7d, #574b7d);border-radius:14px;padding:4px 4px 4px 10px}
.theme-assignment-chip button{border:0;background:transparent;color:inherit;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;cursor:pointer}
.theme-assignment-chip button:hover{background:rgba(0,0,0,.08)}
.theme-assignment-none{font-size:12px;color:var(--muted)}
.theme-assign-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end;border:1px dashed var(--line);border-radius:12px;padding:12px}
.theme-assign-form label{display:grid;gap:5px;font-size:12px;font-weight:700}
.theme-assign-form small{font-weight:400;color:var(--muted)}
.theme-assign-form select,.theme-assign-form input{border:1px solid var(--line);border-radius:9px;padding:9px;font:13px 'DM Sans',sans-serif;background:var(--bg-fff, #fff);color:var(--ink);min-width:0}
.theme-assign-actions{display:flex;gap:8px;align-items:center}
.theme-manage-actions{display:flex;flex-wrap:wrap;gap:6px}
.theme-manage-actions button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--bg-fff, #fff);color:var(--ink);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:700;min-height:36px;cursor:pointer}
.theme-manage-actions button:hover:not(:disabled){border-color:var(--green);background:var(--green-soft)}
.theme-manage-actions button:disabled{opacity:.45;cursor:default}
.theme-manage-actions svg{width:14px;height:14px}
.theme-manage-exports summary{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.theme-manage-exports .theme-document-actions{margin-top:8px}
.theme-results-row{grid-template-columns:minmax(140px,1.1fr) 120px 100px minmax(150px,1fr) minmax(170px,1.4fr);min-width:700px}
.result-status{display:inline-block;font-size:12px;font-weight:700;border-radius:12px;padding:3px 9px;white-space:nowrap}
.result-status.done{background:var(--green-soft);color:var(--green)}
.result-status.done-late{background:var(--bg-fbf0dc, #fbf0dc);color:var(--fg-8a5a00, #8a5a00)}
.result-status.late{background:var(--coral-soft);color:var(--coral-ink)}
.result-status.open{background:var(--bg-f0f3ee, #f0f3ee);color:var(--muted)}
.theme-results-export{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:13px;font-weight:700;color:var(--green)}
.class-theme-item.late{border-color:var(--coral)}
.class-theme-item.late .class-theme-icon{background:var(--coral-soft);color:var(--coral-ink)}
.class-theme-item.late small{color:var(--coral-ink)}

/* Better learning: feedback per answer, goals and spaced review */
.answer-feedback{background:var(--coral-soft);color:var(--coral-ink);border-radius:8px;padding:8px 10px}
.answer-feedback span{font-weight:700}
.goal-progress{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px;display:grid;gap:10px}
.goal-progress h3{font-size:15px}
.goal-progress ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.goal-progress li{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;line-height:1.45;border-left:3px solid var(--line);padding:6px 10px;background:var(--bg-f7faf7, #f7faf7);border-radius:0 8px 8px 0}
.goal-progress li b{white-space:nowrap;font-size:12px}
.goal-progress li.good{border-left-color:var(--green)}.goal-progress li.good b{color:var(--green)}
.goal-progress li.mid{border-left-color:#c88a12}.goal-progress li.mid b{color:var(--fg-8a5a00, #8a5a00)}
.goal-progress li.low{border-left-color:var(--coral)}.goal-progress li.low b{color:var(--coral-ink)}
.goal-progress-note{font-size:12px;color:var(--muted)}
.goal-bars{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.goal-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,180px) 44px;gap:10px;align-items:center;font-size:13px}
.goal-bar>span{min-width:0;line-height:1.4}
.goal-bar-track{height:8px;border-radius:5px;background:var(--bg-f0f3ee, #f0f3ee);overflow:hidden}
.goal-bar-track i{display:block;height:100%;border-radius:5px;background:var(--muted)}
.goal-bar-track i.good{background:var(--green)}.goal-bar-track i.mid{background:#c88a12}.goal-bar-track i.low{background:var(--coral)}
.goal-bar b{text-align:right;font-variant-numeric:tabular-nums}
.goal-bars small{font-size:12px;color:var(--muted)}
@media(max-width:560px){.goal-bar{grid-template-columns:1fr 44px}.goal-bar-track{grid-column:1/-1;grid-row:2}}
.option-editor .option-edit{display:grid;gap:6px}
.option-feedback{font-weight:400!important;color:var(--muted)}
.option-feedback input{font-size:12px!important}
.theme-reviews{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:0 0 18px;display:grid;gap:12px}
.theme-reviews>p{font-size:13px;color:var(--muted);line-height:1.55}
.theme-reviews>.button{justify-self:start}
.theme-reviews-head{display:flex;gap:10px;align-items:center}
.theme-reviews-head>svg{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--bg-eeebf8, #eeebf8);color:var(--violet);flex-shrink:0}
.theme-reviews-head h2{font-size:17px}
.theme-reviews-head span{font-size:12px;color:var(--muted)}
.review-card{display:grid;gap:10px}
.review-card small{font-size:12px;color:var(--muted)}
.review-card h3{font-size:15px;line-height:1.5;white-space:pre-line}
.review-options{display:grid;gap:8px}
.review-options button{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--bg-fff, #fff);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;cursor:pointer}
.review-options button>span{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:var(--bg-f1f3ef, #f1f3ef);display:grid;place-items:center;font-size:12px;font-weight:700}
.review-options button.chosen{border-color:var(--green);background:var(--green-soft)}
.review-options button.right{border-color:var(--green);background:var(--green-soft)}
.review-options button.wrong{border-color:var(--coral);background:var(--coral-soft)}
.review-options button:disabled{cursor:default}
.review-outcome{display:flex;gap:10px;border-radius:12px;padding:12px;font-size:13px;line-height:1.5}
.review-outcome>svg{flex-shrink:0;width:20px}
.review-outcome.right{background:var(--green-soft);color:var(--green)}
.review-outcome.wrong{background:var(--coral-soft);color:var(--coral-ink)}
.review-outcome div{display:grid;gap:4px}
.review-outcome small{opacity:.85}
.review-actions{display:flex;justify-content:flex-end}
.review-done{display:flex;gap:10px;align-items:center;font-size:14px}
.review-done>svg{color:var(--green);flex-shrink:0}

/* Fill-in and match questions */
.fill-answer{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;max-width:420px}
.fill-answer input,.match-answer select{border:1px solid var(--line);border-radius:9px;padding:10px 11px;font:13px/1.45 'DM Sans',sans-serif;color:var(--ink);background:var(--bg-fff, #fff);width:100%}
.fill-answer input:focus,.match-answer select:focus{outline:2px solid var(--green);outline-offset:1px}
.match-answer{display:grid;gap:8px}
.match-answer label{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;align-items:center;gap:10px;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg-f8faf7, #f8faf7)}
.pair-editor{grid-template-columns:1fr}
.pair-edit{display:grid;grid-template-columns:.8fr 1.2fr auto;gap:8px;align-items:end}
.option-help{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.5;margin:2px 0 10px}
.question-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--muted)}
.question-add button{display:inline-flex;align-items:center;gap:5px;border:1px dashed #b8c9bf;background:var(--bg-fff, #fff);color:var(--green);border-radius:9px;padding:8px 11px;font-size:12px;font-weight:600;cursor:pointer}
.question-add button:hover{border-style:solid;background:var(--green-soft)}
.question-remove{margin-left:10px;font-size:12px;color:var(--coral-ink)}
@media(max-width:560px){.review-heading{flex-wrap:wrap}.review-progress{white-space:normal}.match-answer label{grid-template-columns:1fr}.pair-edit{grid-template-columns:1fr auto}.pair-edit label:nth-child(2){grid-column:1}}

/* Reading aloud */
.read-aloud{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg-fff, #fff);color:var(--green);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer;vertical-align:middle;flex-shrink:0}
.read-aloud:hover{background:var(--green-soft)}
.read-aloud:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.read-aloud.speaking{background:var(--green);border-color:var(--green);color:#fff}
.read-aloud.compact{padding:6px;width:30px;height:30px;justify-content:center}
.read-aloud-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.read-aloud-row>:first-child{flex:1;min-width:0}
.theme-learning-hero .read-aloud{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff;margin-top:12px}
.theme-learning-hero .read-aloud.speaking{background:var(--brand-orange);border-color:var(--brand-orange);color:var(--fg-18312d, #18312d)}
::highlight(dibanjo-voorlezen){background-color:#ffd77a;color:#18312d}
.tutor-message .read-aloud.compact{float:right;margin:-2px -4px 4px 8px;width:26px;height:26px;padding:4px}
.hint-box .read-aloud,.feedback .read-aloud{margin-top:8px}
.exercise-area>.read-aloud,.adaptive-question>.read-aloud{margin:-4px 0 14px}
.studio-section-title .read-aloud{margin-left:auto}
.theme-orientation #theme-steps>p{font-size:12px;line-height:1.65;color:var(--muted);margin-bottom:11px}
/* Dibanjo: forest green, apricot and soft paper, from the brand reference. */
:root {
  --brand-green: #163f37;
  --brand-orange: #f3945a;
  --brand-paper: #f6f7f3;
  --ink: var(--brand-green);
  --cream: var(--brand-paper);
  --muted: #58685f;
  --line: #dfe7e1;
  --green: #246653;
  --green-soft: #e7efe9;
  /* Keep existing subject class names while using the new palette. */
  --coral: #ad5426;
  --coral-soft: #fff0e5;
  --violet: #35675b;
  --violet-soft: #e9f1ed;
  --gold: #94612a;
  --shadow: 0 12px 35px rgb(22 63 55 / 5%);
}

body { background: var(--brand-paper); }
button, input, select, textarea { accent-color: var(--brand-green); }
:where(button, input, select, textarea, a, summary):focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 4px;
}
::-moz-selection { background: #fbd4b9; color: var(--brand-green); }
::selection { background: #fbd4b9; color: var(--brand-green); }

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
  color: var(--brand-green);
}
.brand-wordmark { display: block; width: 180px; height: auto; max-width: 100%; }
svg.brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  flex: none;
  background: transparent;
  border-radius: 0;
  transform: none;
}
.auth-brand { padding: 0; }
.auth-brand .brand-wordmark { width: 225px; }
.auth-story .brand { color: var(--brand-paper); }
.auth-story {
  background: radial-gradient(ellipse at 90% 85%, #2b5a4c 0, transparent 55%), var(--brand-green);
}
.auth-story h1 em, .hero-content h2 em { color: var(--brand-orange); }
.auth-orb, .dibi-orb { background: var(--brand-orange); color: var(--brand-green); }
.auth-kicker { color:#ffcba6; }
.auth-story > small { color:#b9cec5; }
.auth-form-side { background: var(--brand-paper); }
.auth-input { background: #fff; border-radius: 14px; }
.auth-tabs { background: #e9eee8; border-radius: 14px; }
.auth-tabs button, .demo-buttons button, .role-picker button { border-radius: 12px; }
.demo-buttons button:hover { border-color: var(--green); background: var(--green-soft); }

.sidebar { background: #fcfdf9; }
.nav-item { border-radius: 14px; }
.nav-item.active { background: var(--green-soft); color: var(--brand-green); }
.button { border-radius: 14px; }
.button.primary { background: var(--brand-green); box-shadow: 0 5px 14px rgb(22 63 55 / 12%); }
.button.primary:hover:not(:disabled) { background: #24594b; }
.hero-card { border-radius: 26px; background: var(--brand-green); }
.task-card, .subject-large-card, .coach-card, .skills-card,
.growth-card, .mastery-card { border-radius: 22px; }
.weekly-card { background: var(--coral-soft); border-color: #f3dac7; }
.weekly-top { color: var(--coral); }
.weekly-bar-track i { background: linear-gradient(180deg, #f7ad7c, var(--brand-orange)); }
.weekly-bar-day.today strong, .weekly-bar-day.today span { color: var(--coral); }
.verification-brand { padding: 0; justify-content: center; }
.verification-brand .brand-wordmark { width: 210px; }

@media (max-width: 800px) {
  .brand.auth-mobile-logo { display: flex; }
  .mobile-header .brand-wordmark { width: 150px; }
}
@media (min-width: 801px) {
  .brand.auth-mobile-logo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-screen .brand-mark { animation: none; }
  .button, .nav-item { transition: none; }
}
.auth-notice{background:#fff5e6;border:1px solid #f3d5a8;color:#6b4a12;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;margin:4px 0 14px}
.auth-page {
  max-width: 1320px;
  min-height: calc(100svh - 32px);
  margin: 16px auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(ellipse at 35% 80%, #edf3ec 0, transparent 65%), var(--brand-paper);
  border-radius: 32px;
  overflow: hidden;
}
.auth-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 44px;
}
.auth-header .brand { padding: 0; }
.auth-header .brand-wordmark { width: 150px; }
.auth-header nav { display: flex; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
.auth-header nav button, .auth-header nav a, .auth-footer button, .auth-footer a {
  border: 0;
  background: transparent;
  color: var(--brand-green);
  font-size: 12px;
  padding: 8px 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.auth-header nav button:hover, .auth-header nav a:hover, .auth-footer button:hover, .auth-footer a:hover { text-decoration: underline; }
.auth-page .auth-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0 36px 54px;
  background: transparent;
  color: var(--brand-green);
  overflow: visible;
}
.auth-story-copy { margin: 0; max-width: 580px; }
.auth-kicker { color:#376b5b; font-size: 10px; letter-spacing: 2.5px; }
.auth-story h1 {
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -2px;
  margin: 18px 0;
}
.auth-story-copy > p { color:#52675f; font-size: 15px; line-height: 1.7; }
.auth-story-copy > p.auth-hybrid { font-size: 13px; margin-top: 14px; max-width: 420px; }
.auth-organization-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 12px; font-weight: 700; min-height: 44px; margin-top: 8px; text-underline-offset: 3px; }
.auth-pilot-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; color: var(--green); font-size: 12px; line-height: 1.6; }
.auth-invite-note { display: block; font-weight: 400; font-size: 12px; line-height: 1.7; margin-top: 10px; color: var(--muted); }
.learning-illustration { display: block; width: 100%; max-width: 600px; height: auto; margin: 22px 0 10px -12px; }
.auth-learning-steps { display: flex; align-items: center; justify-content: center; gap: 18px; color:#52675f; font-size: 11px; letter-spacing: 1px; }
.auth-learning-steps i { width: 3px; height: 3px; border-radius: 50%; background: #7d9a8c; }
.auth-page .auth-form-side { background: transparent; padding: 26px 44px 36px 30px; min-height: 0; overflow: visible; }
.auth-form-wrap {
  max-width: 410px;
  padding: 30px;
  background: #fff;
  border: 1px solid #edf1ec;
  border-radius: 16px;
  box-shadow: 0 14px 55px rgb(22 63 55 / 8%);
}
.auth-form-wrap h2 { margin: 0 0 7px; font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: -1px; }
.auth-subtitle { font-size: 13px; line-height: 1.5; }
.auth-tabs { margin: 24px 0 20px; border-radius: 9px; background: #f5f6f4; padding: 3px; border: 1px solid #edf0ec; }
.auth-tabs button { border-radius: 7px; font-size: 12px; padding: 9px; }
.auth-tabs button.active { background: #e3f0e7; box-shadow: none; color: var(--brand-green); }
.auth-form-wrap form { gap: 18px; }
.auth-form-wrap label { font-size: 12px; gap: 8px; font-weight: 500; }
.auth-input { height: 44px; border-radius: 7px; background: #fff; }
.auth-input input { font-size: 13px; }
.auth-input input::-moz-placeholder { color:#58685f; opacity: 1; }
.auth-input input::placeholder { color:#58685f; opacity: 1; }
.auth-input input:focus-visible { outline: none; }
.auth-page .auth-input:focus-within { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; box-shadow: none; }
.auth-submit { margin-top: 8px; border-radius: 8px; padding: 13px; }
.auth-demo { margin-top: 22px; }
.auth-demo summary {
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-green);
}
.auth-demo summary::-webkit-details-marker { display: none; }
.auth-demo summary:hover { background: var(--green-soft); }
.auth-demo[open] summary { background: var(--green-soft); }
.auth-demo .demo-divider { margin-top: 19px; }
.auth-demo-note { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 11px; color: var(--muted); }
.auth-switch button { border: 0; padding: 0 0 0 3px; background: transparent; color: var(--brand-green); text-decoration: underline; font-size: inherit; }
.auth-security { margin-top: 20px; color:#65736e; align-items: center; }
.auth-security span { font-size: 10px; }
.auth-security svg { width: 13px; }
.auth-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 12px 44px 20px; color: var(--muted); font-size: 11px; gap: 12px 24px; flex-wrap: wrap; }
.auth-footer nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.auth-footer a { font-size: 11px; }
.auth-footer button { font-size: 11px; }
.auth-info { width: min(480px, calc(100% - 32px)); padding: 36px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); box-shadow: var(--shadow); }
.auth-info::backdrop { background: rgb(22 63 55 / 35%); backdrop-filter: blur(4px); }
.auth-info h2 { font-size: 23px; padding-right: 15px; }
.auth-info p { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 18px 0 24px; }
.auth-info-close { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; padding: 8px; }
@media (max-width: 1000px) {
  .auth-page { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); }
  .auth-page .auth-story { padding-left: 30px; }
  .auth-page .auth-form-side { padding-right: 26px; padding-left: 20px; }
  .auth-form-wrap { padding: 25px; }
  .auth-story h1 { font-size: 35px; letter-spacing: -1.4px; }
  .auth-story-copy > p { font-size: 13px; }
}
@media (max-width: 760px) {
  .auth-page { margin: 0; min-height: 100svh; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .auth-header { padding: 20px 24px; gap: 12px; }
  .auth-header .brand-wordmark { width: 132px; }
  .auth-header nav { gap: 14px; }
  .auth-header nav button, .auth-header nav a { font-size: 11px; }
  .auth-page .auth-story { padding: 26px 24px 10px; text-align: center; align-items: center; }
  .auth-story h1 { font-size: clamp(29px, 6vw, 38px); letter-spacing: -1.2px; margin: 14px 0; }
  .auth-story-copy > p { font-size: 13px; }
  .learning-illustration { max-width: 300px; margin: 14px 0 0; }
  .auth-learning-steps { display: none; }
  .auth-page .auth-form-side { padding: 16px 20px 24px; align-items: start; }
  .auth-form-wrap { max-width: 430px; padding: 25px 22px; border-radius: 16px; }
  .auth-form-wrap h2 { font-size: 26px; }
  .auth-footer { padding: 0 24px 18px; }
}
@media (max-width: 360px) {
  .auth-header { padding-inline: 18px; }
  .auth-header .brand-wordmark { width: 112px; }
  .auth-header nav { gap: 10px; }
}

.auth-passkey { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth-two-step { display: grid; gap: 14px; margin-top: 20px; }
.auth-two-step-intro { display: flex; gap: 12px; align-items: flex-start; background: var(--green-soft); border-radius: 12px; padding: 14px; }
.auth-two-step-intro svg { color: var(--green); flex: none; margin-top: 2px; }
.auth-two-step-intro p { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.auth-back { justify-self: start; display: inline-flex; align-items: center; gap: 5px; }
.auth-audiences{list-style:none;margin:18px 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px}
.auth-audiences li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:inherit;opacity:.92}
.auth-audiences li>svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.auth-audiences span{display:flex;flex-direction:column;gap:2px;min-width:0}
.auth-audiences strong{font-size:13px}
.auth-forgot{display:grid;gap:6px;margin:-4px 0 12px}
.auth-forgot .text-button{justify-self:end;font-size:13px}
@media(max-width:560px){.auth-audiences{grid-template-columns:1fr}}
.admin-workspace-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.admin-workspace-tabs button{border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink);padding:10px 15px;border-radius:10px;font:inherit}
.admin-workspace-tabs button[aria-pressed=true]{background:var(--green-soft);border-color:var(--green);color:var(--green);font-weight:700}
.operations-form fieldset{border:0;margin:0;padding:0}.operations-form legend{font-size:16px;font-weight:700;margin-bottom:16px}
.operations-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.operations-grid label,.participant-search label{display:grid;gap:8px;font-size:14px;font-weight:600}
.operations-grid input,.operations-grid select,.operations-grid textarea,.participant-search input,.palette-scope input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);color:var(--ink);padding:10px 12px;font:inherit}
.operations-grid textarea{min-height:88px;resize:vertical}.operations-wide{grid-column:1/-1}
.operations-form .button{margin-top:16px}.operations-form fieldset:disabled{opacity:.75}
.operations-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
.administration-panel .button.secondary{display:inline-flex;gap:8px;align-items:center;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line);padding:10px 14px;border-radius:10px}
.administration-panel .palette-scope{min-width:0;max-width:100%}.administration-panel .palette-scope select{min-width:0;max-width:100%;width:100%}
.admin-table-scroll{overflow:auto;margin:16px 0;max-height:480px;border:1px solid var(--line);border-radius:10px}
.admin-table-scroll table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.admin-table-scroll th,.admin-table-scroll td{padding:12px;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.admin-table-scroll th{background:var(--surface-soft,#f4f6f3);font-weight:700;position:sticky;top:0;z-index:1}
.admin-table-scroll .operations-actions{margin:0}.admin-table-scroll .text-button{min-height:32px;white-space:nowrap}
.access-badge{display:inline-block;border-radius:6px;padding:4px 7px;font-size:12px;font-weight:700}
.access-badge.allowed{color:var(--green);background:var(--green-soft)}.access-badge.blocked{color:var(--coral-ink);background:var(--coral-soft)}
.admin-event-log{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.admin-event-log summary{cursor:pointer;font-weight:700;min-height:35px}.admin-event-log ul{list-style:none;padding:0}.admin-event-log li{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.admin-event-log li>span{color:var(--muted)}.admin-event-log li{min-width:0;overflow-wrap:anywhere}.admin-event-log pre{overflow:auto;max-height:180px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.bulk-import,.import-preview,.activation-links,.participant-confirm{padding:18px;background:var(--surface-soft,#f4f6f3);border:1px solid var(--line);border-radius:12px;margin-bottom:20px}
.bulk-import h3{display:flex;gap:9px;align-items:center;font-size:16px;margin-bottom:10px}
.bulk-import p,.import-preview p,.activation-links p{font-size:14px;line-height:1.6;margin:8px 0}
.import-upload{display:grid;gap:8px;font-size:13px;font-weight:700;min-width:0;max-width:100%}.import-upload input{width:100%;min-width:0;max-width:100%;font:inherit}
.participant-search{display:flex;align-items:end;gap:12px;margin:24px 0}.participant-search label{flex:1}
.activation-page{min-height:100vh;background:#f7f8f5;display:grid;place-items:center;padding:24px;color:#173b35}
.activation-page>.admin-card{width:100%;max-width:560px;background:#fff;border:1px solid #dfe7e1;border-radius:18px;padding:32px}
.activation-page .brand{padding:0;margin-bottom:28px}.activation-page h1{font-size:28px;margin-bottom:18px}
.activation-page p{font-size:15px;line-height:1.6;margin:12px 0}.activation-page form{display:grid;gap:18px;margin:24px 0}.activation-page label{display:grid;gap:8px;font-size:14px;font-weight:700}
.activation-page input{min-height:46px;border:1px solid #b8c9bf;border-radius:10px;padding:10px;font:inherit}.activation-page .button.primary{background:#173b35;color:#fff;display:inline-flex;text-decoration:none}
.access-interruption{padding:18px;margin-bottom:24px;border:1px solid var(--line);border-radius:12px;background:var(--coral-soft);color:var(--ink)}
.access-interruption p{line-height:1.6;margin:8px 0}.access-blocked-page{max-width:680px;margin:10vh auto;padding:24px;line-height:1.6}.access-blocked-page .button{margin-top:20px}
@media(max-width:650px){.operations-grid{grid-template-columns:1fr}.operations-wide{grid-column:auto}.admin-workspace-tabs{gap:6px}.admin-workspace-tabs button{padding:9px 11px;font-size:13px}.activation-page>.admin-card{padding:22px}.participant-search{flex-wrap:wrap}}
/* Dashboard-only tokens. The public pages and Dibanjo wordmark keep their identity. */
.app-shell {
  --surface: #ffffff;
  --surface-soft: #f4f6f3;
  background: var(--cream);
  color: var(--ink);
  color-scheme: light;
}
.app-shell .button.primary { background: var(--action); color: var(--action-text); }
.app-shell .button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--action) 87%, black); }
.app-shell .button.primary:disabled { background: var(--line); color: var(--muted); box-shadow: none; }
.app-shell .nav-item.active, .app-shell .mobile-menu button.active { background: var(--green-soft); color: var(--green); }
.app-shell .hero-card { background: var(--action); }
.app-shell .hero-content h2 em { color: var(--theme-accent); }
.app-shell .sidebar, .app-shell .mobile-header, .app-shell .mobile-menu { background: var(--surface); }
.app-shell .brand { color: #173B35; }
.app-shell :where(button, input, select, textarea, a, summary):focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.app-shell[data-color-mode="dark"] {
  color-scheme: dark;
  --ink: #edf3ef;
  --muted: #b7c6be;
  --cream: #111a17;
  --white: #1b2722;
  --line: #405249;
  --surface: #1b2722;
  --surface-soft: #24332b;
  --coral: #f1ac86;
  --coral-ink: #f1ac86;
  --coral-soft: #38271e;
  --violet: #afcbbf;
  --violet-soft: #243b32;
  --gold: #e1b773;
  --shadow: 0 12px 35px rgb(0 0 0 / 20%);
}
.app-shell[data-color-mode="dark"] .brand { color: #e7efe9; }
.app-shell[data-color-mode="dark"] .skip-link, .app-shell[data-color-mode="dark"] .toast { background: #edf3ef; color: #173B35; }
.app-shell[data-color-mode="dark"] .hero-card { color: #ffffff; }
.app-shell[data-color-mode="dark"] .hero-card :is(h2, p) { color: #ffffff; }
.app-shell[data-color-mode="dark"] .hero-card h2 em { color: var(--theme-accent); }
.app-shell[data-color-mode="dark"] .answer.selected .answer-letter,
.app-shell[data-color-mode="dark"] .studio-steps-list li.active b { background: var(--action); color: #ffffff; }
.appearance-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; margin: 8px 10px 14px; font-size: 13px; }
.appearance-control select, .palette-scope select { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px; min-height: 40px; }
.appearance-control small { grid-column: 1 / -1; color: var(--coral-ink); }
.palette-form fieldset { margin: 0; padding: 0; border: 0; }
.palette-form legend { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.palette-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.palette-option { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); background: var(--surface); padding: 12px; border-radius: 12px; cursor: pointer; min-width: 0; }
.palette-option.selected { outline: 2px solid var(--green); outline-offset: 1px; }
.palette-option input { accent-color: var(--action); width: 18px; height: 18px; }
.palette-swatches { display: flex; height: 30px; width: 100%; border-radius: 6px; overflow: hidden; }
.palette-swatches i { flex: 1; }
.palette-option > span:last-child { font-size: 14px; }
.palette-preview { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.palette-preview-menu { display: grid; align-content: start; gap: 14px; background: var(--theme-soft); color: var(--theme-primary); padding: 22px 16px; font-size: 13px; font-weight: 700; }
.palette-preview-content { background: #ffffff; color: #243833; padding: 24px; }
.palette-preview-kicker { color: var(--theme-primary); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.palette-preview-content h3 { margin: 8px 0; font-size: 20px; }
.palette-preview-content p { color: #43534d; font-size: 14px; }
.palette-preview-button { display: inline-flex; gap: 20px; background: var(--theme-primary); color: #ffffff; border-radius: 10px; padding: 11px 16px; margin-top: 16px; font-weight: 700; font-size: 13px; }
.palette-preview-button > span { color: var(--theme-accent); }
.palette-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.palette-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 14px; }
.palette-scope { display: grid; gap: 8px; font-size: 14px; font-weight: 700; max-width: 440px; margin-bottom: 20px; }
@media (max-width: 1050px) { .palette-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .palette-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .palette-preview { grid-template-columns: 1fr; } .palette-preview-menu { display: flex; flex-wrap: wrap; padding: 12px; } .palette-preview-content { padding: 18px; } }
/* Dark counterparts for legacy component colors; light colors remain unchanged. */
.app-shell[data-color-mode="dark"] {
  --bg-d6c29f: color-mix(in srgb, #d6c29f 14%, #1b2722);
  --bg-d8e5e4: color-mix(in srgb, #d8e5e4 14%, #1b2722);
  --bg-d9dfdb: color-mix(in srgb, #d9dfdb 14%, #1b2722);
  --bg-ded9ce: color-mix(in srgb, #ded9ce 14%, #1b2722);
  --bg-e2eee6: color-mix(in srgb, #e2eee6 14%, #1b2722);
  --bg-e3e6e1: color-mix(in srgb, #e3e6e1 14%, #1b2722);
  --bg-e3e8e3: color-mix(in srgb, #e3e8e3 14%, #1b2722);
  --bg-e5f2e9: color-mix(in srgb, #e5f2e9 14%, #1b2722);
  --bg-e7d8c6: color-mix(in srgb, #e7d8c6 14%, #1b2722);
  --bg-e7ece7: color-mix(in srgb, #e7ece7 14%, #1b2722);
  --bg-e7f1eb: color-mix(in srgb, #e7f1eb 14%, #1b2722);
  --bg-e8ece8: color-mix(in srgb, #e8ece8 14%, #1b2722);
  --bg-e8ede4: color-mix(in srgb, #e8ede4 14%, #1b2722);
  --bg-e9eee9: color-mix(in srgb, #e9eee9 14%, #1b2722);
  --bg-e9f2ed: color-mix(in srgb, #e9f2ed 14%, #1b2722);
  --bg-eaf1ec: color-mix(in srgb, #eaf1ec 14%, #1b2722);
  --bg-eaf2ed: color-mix(in srgb, #eaf2ed 14%, #1b2722);
  --bg-eaf2ef: color-mix(in srgb, #eaf2ef 14%, #1b2722);
  --bg-ece9f5: color-mix(in srgb, #ece9f5 14%, #1b2722);
  --bg-edf0ed: color-mix(in srgb, #edf0ed 14%, #1b2722);
  --bg-edf1ed: color-mix(in srgb, #edf1ed 14%, #1b2722);
  --bg-edf3ef: color-mix(in srgb, #edf3ef 14%, #1b2722);
  --bg-edf4ef: color-mix(in srgb, #edf4ef 14%, #1b2722);
  --bg-edf7f0: color-mix(in srgb, #edf7f0 14%, #1b2722);
  --bg-eeebf7: color-mix(in srgb, #eeebf7 14%, #1b2722);
  --bg-eeebf8: color-mix(in srgb, #eeebf8 14%, #1b2722);
  --bg-eef1ec: color-mix(in srgb, #eef1ec 14%, #1b2722);
  --bg-eef1ee: color-mix(in srgb, #eef1ee 14%, #1b2722);
  --bg-eef4ef: color-mix(in srgb, #eef4ef 14%, #1b2722);
  --bg-eff8f2: color-mix(in srgb, #eff8f2 14%, #1b2722);
  --bg-f0ebe2: color-mix(in srgb, #f0ebe2 14%, #1b2722);
  --bg-f0ebf7: color-mix(in srgb, #f0ebf7 14%, #1b2722);
  --bg-f0edf8: color-mix(in srgb, #f0edf8 14%, #1b2722);
  --bg-f0f2ee: color-mix(in srgb, #f0f2ee 14%, #1b2722);
  --bg-f0f2ef: color-mix(in srgb, #f0f2ef 14%, #1b2722);
  --bg-f0f3ee: color-mix(in srgb, #f0f3ee 14%, #1b2722);
  --bg-f0f4f0: color-mix(in srgb, #f0f4f0 14%, #1b2722);
  --bg-f0f6f2: color-mix(in srgb, #f0f6f2 14%, #1b2722);
  --bg-f0f7f2: color-mix(in srgb, #f0f7f2 14%, #1b2722);
  --bg-f1f2ef: color-mix(in srgb, #f1f2ef 14%, #1b2722);
  --bg-f1f3ef: color-mix(in srgb, #f1f3ef 14%, #1b2722);
  --bg-f1f7f3: color-mix(in srgb, #f1f7f3 14%, #1b2722);
  --bg-f1f8f3: color-mix(in srgb, #f1f8f3 14%, #1b2722);
  --bg-f2eee5: color-mix(in srgb, #f2eee5 14%, #1b2722);
  --bg-f2eef8: color-mix(in srgb, #f2eef8 14%, #1b2722);
  --bg-f2f0f8: color-mix(in srgb, #f2f0f8 14%, #1b2722);
  --bg-f2f4f1: color-mix(in srgb, #f2f4f1 14%, #1b2722);
  --bg-f2f5ef: color-mix(in srgb, #f2f5ef 14%, #1b2722);
  --bg-f2f6f1: color-mix(in srgb, #f2f6f1 14%, #1b2722);
  --bg-f2f7f3: color-mix(in srgb, #f2f7f3 14%, #1b2722);
  --bg-f3effa: color-mix(in srgb, #f3effa 14%, #1b2722);
  --bg-f3f0f8: color-mix(in srgb, #f3f0f8 14%, #1b2722);
  --bg-f3f4f1: color-mix(in srgb, #f3f4f1 14%, #1b2722);
  --bg-f3f5ef: color-mix(in srgb, #f3f5ef 14%, #1b2722);
  --bg-f3f8f5: color-mix(in srgb, #f3f8f5 14%, #1b2722);
  --bg-f4f1f8: color-mix(in srgb, #f4f1f8 14%, #1b2722);
  --bg-f4f2f8: color-mix(in srgb, #f4f2f8 14%, #1b2722);
  --bg-f4f5f2: color-mix(in srgb, #f4f5f2 14%, #1b2722);
  --bg-f4f6f1: color-mix(in srgb, #f4f6f1 14%, #1b2722);
  --bg-f5f2f8: color-mix(in srgb, #f5f2f8 14%, #1b2722);
  --bg-f5f2fa: color-mix(in srgb, #f5f2fa 14%, #1b2722);
  --bg-f5f3f9: color-mix(in srgb, #f5f3f9 14%, #1b2722);
  --bg-f5f6f2: color-mix(in srgb, #f5f6f2 14%, #1b2722);
  --bg-f5f7f3: color-mix(in srgb, #f5f7f3 14%, #1b2722);
  --bg-f5f7f4: color-mix(in srgb, #f5f7f4 14%, #1b2722);
  --bg-f6f3ea: color-mix(in srgb, #f6f3ea 14%, #1b2722);
  --bg-f6f7f3: color-mix(in srgb, #f6f7f3 14%, #1b2722);
  --bg-f6f8f5: color-mix(in srgb, #f6f8f5 14%, #1b2722);
  --bg-f6faf7: color-mix(in srgb, #f6faf7 14%, #1b2722);
  --bg-f7f8f4: color-mix(in srgb, #f7f8f4 14%, #1b2722);
  --bg-f7f8f5: color-mix(in srgb, #f7f8f5 14%, #1b2722);
  --bg-f7faf7: color-mix(in srgb, #f7faf7 14%, #1b2722);
  --bg-f8f0dc: color-mix(in srgb, #f8f0dc 14%, #1b2722);
  --bg-f8f6f1: color-mix(in srgb, #f8f6f1 14%, #1b2722);
  --bg-f8f6fb: color-mix(in srgb, #f8f6fb 14%, #1b2722);
  --bg-f8faf7: color-mix(in srgb, #f8faf7 14%, #1b2722);
  --bg-faf0d9: color-mix(in srgb, #faf0d9 14%, #1b2722);
  --bg-faf1df: color-mix(in srgb, #faf1df 14%, #1b2722);
  --bg-faf2df: color-mix(in srgb, #faf2df 14%, #1b2722);
  --bg-faf3e6: color-mix(in srgb, #faf3e6 14%, #1b2722);
  --bg-faf5e8: color-mix(in srgb, #faf5e8 14%, #1b2722);
  --bg-faf5eb: color-mix(in srgb, #faf5eb 14%, #1b2722);
  --bg-faf9f5: color-mix(in srgb, #faf9f5 14%, #1b2722);
  --bg-fafbf9: color-mix(in srgb, #fafbf9 14%, #1b2722);
  --bg-fafcfb: color-mix(in srgb, #fafcfb 14%, #1b2722);
  --bg-fbeae5: color-mix(in srgb, #fbeae5 14%, #1b2722);
  --bg-fbf1e4: color-mix(in srgb, #fbf1e4 14%, #1b2722);
  --bg-fbfcfa: color-mix(in srgb, #fbfcfa 14%, #1b2722);
  --bg-fff: color-mix(in srgb, #fff 14%, #1b2722);
  --bg-fff0df: color-mix(in srgb, #fff0df 14%, #1b2722);
  --bg-fff0eb: color-mix(in srgb, #fff0eb 14%, #1b2722);
  --bg-fff3ef: color-mix(in srgb, #fff3ef 14%, #1b2722);
  --bg-fff5f0: color-mix(in srgb, #fff5f0 14%, #1b2722);
  --fg-18312d: color-mix(in srgb, #18312d 28%, #edf3ef);
  --fg-1d5f51: color-mix(in srgb, #1d5f51 28%, #edf3ef);
  --fg-213d36: color-mix(in srgb, #213d36 28%, #edf3ef);
  --fg-24684f: color-mix(in srgb, #24684f 28%, #edf3ef);
  --fg-27684f: color-mix(in srgb, #27684f 28%, #edf3ef);
  --fg-304d46: color-mix(in srgb, #304d46 28%, #edf3ef);
  --fg-438b6c: color-mix(in srgb, #438b6c 28%, #edf3ef);
  --fg-466d64: color-mix(in srgb, #466d64 28%, #edf3ef);
  --fg-4b3f80: color-mix(in srgb, #4b3f80 28%, #edf3ef);
  --fg-4f5c57: color-mix(in srgb, #4f5c57 28%, #edf3ef);
  --fg-51645d: color-mix(in srgb, #51645d 28%, #edf3ef);
  --fg-52645e: color-mix(in srgb, #52645e 28%, #edf3ef);
  --fg-554585: color-mix(in srgb, #554585 28%, #edf3ef);
  --fg-574b7d: color-mix(in srgb, #574b7d 28%, #edf3ef);
  --fg-5b4d8f: color-mix(in srgb, #5b4d8f 28%, #edf3ef);
  --fg-5c5078: color-mix(in srgb, #5c5078 28%, #edf3ef);
  --fg-5d4e8c: color-mix(in srgb, #5d4e8c 28%, #edf3ef);
  --fg-5e527e: color-mix(in srgb, #5e527e 28%, #edf3ef);
  --fg-5e6e67: color-mix(in srgb, #5e6e67 28%, #edf3ef);
  --fg-5f5a50: color-mix(in srgb, #5f5a50 28%, #edf3ef);
  --fg-5f736b: color-mix(in srgb, #5f736b 28%, #edf3ef);
  --fg-625679: color-mix(in srgb, #625679 28%, #edf3ef);
  --fg-665a85: color-mix(in srgb, #665a85 28%, #edf3ef);
  --fg-684d3d: color-mix(in srgb, #684d3d 28%, #edf3ef);
  --fg-6a6178: color-mix(in srgb, #6a6178 28%, #edf3ef);
  --fg-6a7874: color-mix(in srgb, #6a7874 28%, #edf3ef);
  --fg-6c647b: color-mix(in srgb, #6c647b 28%, #edf3ef);
  --fg-706582: color-mix(in srgb, #706582 28%, #edf3ef);
  --fg-7566a9: color-mix(in srgb, #7566a9 28%, #edf3ef);
  --fg-776e5d: color-mix(in srgb, #776e5d 28%, #edf3ef);
  --fg-78958a: color-mix(in srgb, #78958a 28%, #edf3ef);
  --fg-7a4a17: color-mix(in srgb, #7a4a17 28%, #edf3ef);
  --fg-7b766b: color-mix(in srgb, #7b766b 28%, #edf3ef);
  --fg-897e68: color-mix(in srgb, #897e68 28%, #edf3ef);
  --fg-8c806b: color-mix(in srgb, #8c806b 28%, #edf3ef);
  --fg-8d6a2d: color-mix(in srgb, #8d6a2d 28%, #edf3ef);
  --fg-8e7346: color-mix(in srgb, #8e7346 28%, #edf3ef);
  --fg-8eb5a3: color-mix(in srgb, #8eb5a3 28%, #edf3ef);
  --fg-8f3b28: color-mix(in srgb, #8f3b28 28%, #edf3ef);
  --fg-8f4f1f: color-mix(in srgb, #8f4f1f 28%, #edf3ef);
  --fg-914a3a: color-mix(in srgb, #914a3a 28%, #edf3ef);
  --fg-91602e: color-mix(in srgb, #91602e 28%, #edf3ef);
  --fg-96722f: color-mix(in srgb, #96722f 28%, #edf3ef);
  --fg-9b4c39: color-mix(in srgb, #9b4c39 28%, #edf3ef);
  --fg-9c4c38: color-mix(in srgb, #9c4c38 28%, #edf3ef);
  --fg-9c4e39: color-mix(in srgb, #9c4e39 28%, #edf3ef);
  --fg-a37b35: color-mix(in srgb, #a37b35 28%, #edf3ef);
  --fg-a84e38: color-mix(in srgb, #a84e38 28%, #edf3ef);
  --fg-a8533d: color-mix(in srgb, #a8533d 28%, #edf3ef);
  --fg-a86d2f: color-mix(in srgb, #a86d2f 28%, #edf3ef);
  --fg-aa7c31: color-mix(in srgb, #aa7c31 28%, #edf3ef);
  --fg-b46c32: color-mix(in srgb, #b46c32 28%, #edf3ef);
  --fg-bd7137: color-mix(in srgb, #bd7137 28%, #edf3ef);
  --fg-c2753d: color-mix(in srgb, #c2753d 28%, #edf3ef);
  --fg-c58b2e: color-mix(in srgb, #c58b2e 28%, #edf3ef);
  --fg-cf694d: color-mix(in srgb, #cf694d 28%, #edf3ef);
  --fg-de7356: color-mix(in srgb, #de7356 28%, #edf3ef);
}
.app-ai-status{display:flex;justify-content:flex-end;margin:-8px 0 16px;min-width:0}.ai-status-badge{display:inline-flex;align-items:center;gap:7px;min-height:34px;max-width:100%;padding:6px 11px;border:1px solid var(--line);border-radius:20px;background:var(--bg-fff,#fff);font-size:12px;font-weight:700}.ai-status-badge.enabled,.ai-status-summary.enabled{color:var(--green);background:var(--green-soft)}.ai-status-badge.local,.ai-status-summary.local{color:var(--muted);background:var(--bg-f7faf7,#f7faf7)}.ai-status-badge.warning,.ai-status-summary.warning{color:var(--ink);background:var(--coral-soft)}.ai-status-badge svg{flex-shrink:0}.ai-status-dialog{border:1px solid var(--line);border-radius:18px;padding:24px;width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;background:var(--bg-fff,#fff);color:var(--ink);margin:auto;box-shadow:var(--shadow)}.ai-status-dialog::backdrop{background:rgba(16,40,34,.45)}.ai-status-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.ai-status-heading h2{font-size:23px;margin-top:4px}.ai-status-summary{display:flex;align-items:center;gap:10px;border-radius:12px;padding:13px;margin-bottom:15px}.ai-status-dialog p{font-size:14px;line-height:1.6;margin:12px 0;overflow-wrap:anywhere}.ai-status-dialog .ai-status-scope{font-size:13px;color:var(--muted)}.ai-status-dialog dl{margin:16px 0;padding:12px 14px;background:var(--bg-f7faf7,#f7faf7);border-radius:10px}.ai-status-dialog dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;font-size:13px;padding:5px 0}.ai-status-dialog dt{color:var(--muted)}.ai-status-dialog dd{margin:0;font-weight:700;overflow-wrap:anywhere}.ai-status-dialog .ai-status-explanation{font-size:12px;color:var(--muted)}.ai-connection-result{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:12px;padding:12px;margin:16px 0}.ai-connection-result>svg{flex-shrink:0}.ai-connection-result.success{background:var(--green-soft);color:var(--green)}.ai-connection-result.warning{background:var(--coral-soft)}.ai-connection-result strong{font-size:14px}.ai-connection-result p{margin:5px 0;font-size:13px}.ai-connection-result small{font-size:12px}.ai-status-error{color:var(--coral)}.ai-settings-link,.ai-status-refresh{display:flex;margin-top:15px}.ai-status-dialog .button{max-width:100%;white-space:normal}@media(max-width:600px){.app-ai-status{margin:0 0 14px}.ai-status-dialog{padding:20px}}
.first-tour {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-fff, #fff);
  color: var(--ink);
  box-shadow: 0 24px 70px rgb(15 35 30 / 22%);
}
.first-tour::backdrop { background: rgb(15 30 27 / 55%); backdrop-filter: blur(3px); }
.first-tour-card { position: relative; padding: 30px; }
.first-tour-close { position: absolute; top: 20px; right: 20px; z-index: 1; }
.first-tour-dibi { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--green); }
.first-tour-dibi > svg { width: 48px; height: 48px; padding: 11px; border-radius: 15px 15px 15px 5px; background: var(--coral-soft); color: var(--coral); }
.first-tour-dibi > span { font: 800 20px 'Manrope', sans-serif; }
.first-tour-progress { display: flex; gap: 6px; margin-bottom: 24px; }
.first-tour-progress > span { width: 28px; height: 4px; border-radius: 4px; background: var(--line); }
.first-tour-progress > span.active { width: 46px; background: var(--coral); }
.first-tour-progress > span.done { background: var(--green); }
.first-tour-content h2 { max-width: 540px; margin: 9px 0 13px; font-size: 28px; line-height: 1.25; letter-spacing: -.8px; }
.first-tour-content > p { max-width: 560px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.first-tour-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 22px; padding: 16px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 13px; line-height: 1.6; }
.first-tour-note > svg { flex: none; width: 19px; }
.first-tour-steps { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.first-tour-steps > li { display: flex; align-items: flex-start; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.first-tour-steps > li > svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--coral-soft); color: var(--coral); }
.first-tour-steps > li:nth-child(2) > svg { background: var(--green-soft); color: var(--green); }
.first-tour-steps > li:nth-child(3) > svg { background: var(--violet-soft); color: var(--violet); }
.first-tour-steps > li > div { display: grid; gap: 4px; }
.first-tour-steps strong { font-size: 14px; }
.first-tour-steps span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.first-tour-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.first-tour-choice { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 176px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-fafbf9, #fafbf9); color: var(--ink); text-align: left; }
.first-tour-choice:hover, .first-tour-choice:focus-visible { border-color: var(--green); background: var(--green-soft); }
.first-tour-choice > svg:first-child { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: var(--coral-soft); color: var(--coral); }
.first-tour-choice:nth-child(2) > svg:first-child { background: var(--green-soft); color: var(--green); }
.first-tour-choice > span { display: grid; flex: 1; gap: 8px; min-width: 0; }
.first-tour-choice strong { font: 700 15px/1.4 'Manrope', sans-serif; }
.first-tour-choice small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.first-tour-choice > svg:last-child { display: none; flex: none; width: 18px; color: var(--green); }
.first-tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.first-tour-reopen { display: block; margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.sidebar-service .tour-reopen { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 13px; border: 0; border-radius: 10px; background: transparent; color: var(--green); font-size: 12px; text-align: left; }
.sidebar-service .tour-reopen:hover { background: var(--green-soft); text-decoration: underline; }
.sidebar-service .tour-reopen > svg { width: 15px; }
@media (max-width: 560px) {
  .first-tour { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .first-tour-card { padding: 22px 18px; }
  .first-tour-close { top: 13px; right: 13px; }
  .first-tour-dibi { margin-bottom: 16px; }
  .first-tour-content h2 { padding-right: 12px; font-size: 23px; }
  .first-tour-content > p { font-size: 13px; }
  .first-tour-choices { grid-template-columns: 1fr; }
  .first-tour-choice { min-height: 0; padding: 15px; }
  .first-tour-choice > svg:last-child { display: block; align-self: center; }
  .first-tour-footer { align-items: stretch; flex-direction: column-reverse; }
  .first-tour-footer .button, .first-tour-footer .text-button { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .first-tour::backdrop { backdrop-filter: none; }
}

/* Role tours: a small role label next to Dibi, and three choices as a list of rows. */
.first-tour-role { margin-left: 4px; padding: 3px 10px; border-radius: 20px; background: var(--green-soft); color: var(--green); font-style: normal; font-size: 12px; font-weight: 700; }
.first-tour-choices { grid-template-columns: 1fr; gap: 10px; }
.first-tour-choice { min-height: 0; align-items: center; padding: 14px 16px; transition: border-color .15s, background .15s; }
.first-tour-choice:hover, .first-tour-choice:focus-visible { border-color: var(--green); background: var(--green-soft); }
.first-tour-choice > span { gap: 3px; }
.first-tour-choice > svg:last-child { display: block; }
.first-tour.guide .first-tour-choice > svg:first-child { background: var(--green-soft); color: var(--green); }
.first-tour.admin .first-tour-choice > svg:first-child, .first-tour.superadmin .first-tour-choice > svg:first-child { background: var(--bg-f3effa, #f3effa); color: var(--violet); }
@media (prefers-reduced-motion: reduce) { .first-tour-choice { transition: none; } }
.teacher-dashboard{position:relative;min-width:0}.group-manager{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:15px;padding:20px 22px;margin-bottom:18px}.group-manager-heading{display:flex;align-items:center;gap:11px;margin-bottom:18px}.group-manager-icon{width:38px;height:38px;border-radius:11px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}.group-manager-icon svg{width:19px}.group-manager-heading h2{font-size:16px}.group-manager-heading p{font-size:12px;color:var(--muted);margin-top:3px}.group-manager-grid,.group-links{display:grid;grid-template-columns:1fr 1fr;gap:18px}.group-manager-grid>*,.group-links>*,.group-create>div,.group-links form>div{min-width:0}.group-manager label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-bottom:7px}.group-manager input,.group-manager select{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--bg-fafbf9, #fafbf9);color:var(--ink);font:13px 'DM Sans',sans-serif;padding:11px 12px;outline:0}.group-manager select{cursor:pointer;text-overflow:ellipsis}.group-manager input:focus,.group-manager select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(36,122,104,.09)}.group-manager input:disabled,.group-manager select:disabled{cursor:not-allowed;color:var(--muted)}.group-create>div,.group-links form>div{display:flex;gap:8px}.group-create .button,.group-links .button{padding:10px 13px;font-size:12px;white-space:nowrap;flex:none}.group-responsibles{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}.group-responsibles>span{padding-top:4px;white-space:nowrap}.group-responsibles>div{display:flex;flex-wrap:wrap;gap:5px}.group-responsibles>div>span{background:var(--green-soft);color:var(--green);padding:3px 7px;border-radius:12px}.group-links{border-top:1px solid var(--line);padding-top:17px;margin-top:17px}.group-owner-note{font-size:12px;line-height:1.5;color:var(--muted);background:var(--cream);border-radius:9px;padding:12px;align-self:end}.teacher-dashboard .teacher-error{scroll-margin-top:85px}@media(max-width:700px){.group-manager-grid,.group-links{grid-template-columns:1fr;gap:15px}.group-manager{padding:17px}.group-owner-note{align-self:auto}}@media(max-width:420px){.group-create>div,.group-links form>div{gap:6px}.group-create .button,.group-links .button{padding:10px;font-size:12px}.group-manager-heading{align-items:flex-start}.group-responsibles{flex-direction:column;gap:5px}}.class-table.real{scroll-margin-top:25px}.class-table.real .table-head,.class-table.real .student-row{grid-template-columns:1.25fr .8fr .8fr 1.5fr 112px}.student-name>div{display:flex;flex-direction:column;gap:3px;min-width:0}.student-name small{font-size:12px;color:var(--muted);font-weight:400}.table-progress .mini-progress i.french{background:var(--violet)}.observation.neutral{background:var(--bg-f0f2ef, #f0f2ef);color:var(--muted)}.privacy-note{font-size:12px;color:var(--green);background:var(--green-soft);padding:6px 9px;border-radius:20px;white-space:nowrap}.recovery-open{border:1px solid var(--line);background:var(--bg-fff, #fff);border-radius:8px;padding:8px 9px;display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700;color:var(--green);white-space:nowrap}.recovery-open svg{width:13px}.recovery-open:hover:not(:disabled){border-color:#a5bdb0;background:var(--green-soft)}.recovery-open.active{background:var(--violet-soft);border-color:var(--line);color:var(--violet)}.recovery-open:disabled{opacity:.45;cursor:not-allowed}.teacher-empty{padding:40px 20px;text-align:center;color:var(--muted);display:grid;place-items:center;gap:10px}.teacher-empty svg{color:var(--violet)}.teacher-empty p{font-size:13px}.recovery-composer{margin-top:18px;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:17px;padding:23px;box-shadow:var(--shadow)}.recovery-composer-heading{display:flex;align-items:center;gap:12px}.recovery-composer-heading>div:nth-child(2){flex:1}.recovery-composer-heading span{font-size:12px;letter-spacing:1.2px;color:var(--violet);font-weight:700}.recovery-composer-heading h2{font-size:17px;margin-top:4px}.recovery-composer-heading .icon-button{width:34px;height:34px}.recovery-evidence{display:flex;gap:11px;background:var(--bg-f4f2f8, #f4f2f8);border-radius:11px;padding:13px;margin:18px 0}.recovery-evidence>svg{width:19px;color:var(--violet);flex:none}.recovery-evidence strong{font-size:13px}.recovery-evidence p{font-size:12px;line-height:1.55;color:var(--muted);margin-top:4px}.recovery-form{display:grid;gap:14px}.recovery-form label{display:grid;gap:7px;font-size:12px;font-weight:700}.recovery-form input,.recovery-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--bg-fafbf9, #fafbf9);padding:11px 12px;font:13px/1.55 'DM Sans',sans-serif;color:var(--ink);outline:0}.recovery-form textarea{min-height:110px;resize:vertical}.recovery-form input:focus,.recovery-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(117,102,169,.1)}.recovery-form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:15px}.recovery-form-footer>span{font-size:12px;line-height:1.55;color:var(--muted);max-width:480px}.recovery-form-footer .button{white-space:nowrap;font-size:12px}.teacher-error{margin-top:15px;padding:12px 15px;border-radius:10px;background:var(--coral-soft);color:var(--fg-9b4c39, #9b4c39);font-size:13px}.teacher-notice{position:fixed;right:25px;bottom:25px;z-index:60;display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:11px;box-shadow:var(--shadow);font-size:13px}.teacher-notice svg{width:18px;color:#9ed4b5}.teacher-tools button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1100px){.class-table.real{overflow-x:auto}.class-table.real .section-heading{min-width:760px}.class-table.real .table-head,.class-table.real .student-row{min-width:760px}.teacher-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.recovery-form-footer{align-items:flex-start;flex-direction:column}.recovery-form-footer .button{width:100%}.privacy-note{display:none}.recovery-composer{padding:18px}.teacher-notice{left:16px;right:16px;bottom:85px}}@media(max-width:560px){.recovery-composer-heading{align-items:flex-start}.recovery-composer-heading h2{font-size:15px}.recovery-evidence{padding:11px}.teacher-metrics{grid-template-columns:repeat(3,1fr)}}
.group-invitation{background:linear-gradient(135deg,var(--bg-f4f1f8, #f4f1f8),var(--bg-faf9f5, #faf9f5));border:1px solid var(--line);border-radius:15px;padding:18px 22px;margin-bottom:18px}.group-invitation-heading{display:flex;align-items:center;gap:11px}.group-invitation-icon{width:37px;height:37px;border-radius:11px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;flex:none}.group-invitation-icon svg{width:19px}.group-invitation-heading h2{font-size:14px}.group-invitation-heading p{font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px}.group-invitation-content{margin-top:14px}.group-invitation-main{display:flex;align-items:center;gap:16px}.invitation-status{display:flex;flex-direction:column;gap:4px;flex:1;font-size:12px;color:var(--muted)}.invitation-status strong{font-size:13px;color:var(--ink)}.invitation-generate{flex:none;font-size:12px;white-space:nowrap}.invitation-generate svg{width:15px}.invitation-code-reveal{flex:1;min-width:0}.invitation-code-reveal>span{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:7px}.invitation-code-reveal>div{display:flex;align-items:center;gap:10px}.invitation-code-reveal code{font:700 20px/1.2 'DM Sans',sans-serif;letter-spacing:2px;color:var(--green);background:var(--bg-fff, #fff);border:1px dashed #9fb9ab;border-radius:10px;padding:12px 15px;-webkit-user-select:all;-moz-user-select:all;user-select:all}.invitation-code-reveal .button{font-size:12px;white-space:nowrap}.invitation-code-reveal .button svg{width:15px}.invitation-security{display:flex;align-items:center;gap:7px;border-top:1px solid rgba(117,102,169,.13);padding-top:11px;margin-top:13px;font-size:12px;line-height:1.5;color:var(--muted)}.invitation-security svg{width:15px;color:var(--green);flex:none}.invitation-error{font-size:12px;color:var(--fg-9b4c39, #9b4c39);margin-top:9px}.spin{animation:invitation-spin 1s linear infinite}@keyframes invitation-spin{to{transform:rotate(360deg)}}@media(max-width:700px){.group-invitation{padding:17px}.group-invitation-main{align-items:stretch;flex-direction:column}.invitation-generate{align-self:flex-start}.invitation-code-reveal>div{flex-wrap:wrap}.invitation-code-reveal code{font-size:18px;letter-spacing:1.5px}}@media(max-width:420px){.group-invitation-heading{align-items:flex-start}.invitation-code-reveal code{font-size:16px;padding:11px;letter-spacing:1px}}
/* Learner route: station map of themes, score trend and a filterable timeline. Colours come from the theme tokens. */
.learner-journey{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:20px;margin:18px 0;box-shadow:var(--shadow)}
.learner-journey-head{display:flex;gap:14px;align-items:center}
.journey-avatar{width:48px;height:48px;border-radius:15px;background:var(--brand-green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;flex-shrink:0}
.journey-heading{flex:1;min-width:0}
.journey-heading h1,.journey-heading h2{font-size:21px;margin:3px 0;text-wrap:balance}
.journey-heading p{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.journey-loading{display:grid;gap:10px}
.journey-loading span{height:54px;border-radius:12px;background:linear-gradient(90deg,var(--line),var(--bg-f7faf7, #f7faf7),var(--line));background-size:200% 100%;animation:journey-shimmer 1.4s infinite}
@keyframes journey-shimmer{to{background-position:-200% 0}}

.learner-journey-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.learner-journey-summary>div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;-moz-column-gap:8px;column-gap:8px;align-items:center}
.learner-journey-summary>div>svg{color:var(--green);grid-row:1/3}
.learner-journey-summary strong{font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.learner-journey-summary strong small{font-size:13px;color:var(--muted);font-weight:500}
.learner-journey-summary span{font-size:12px;color:var(--muted)}
.learner-journey-summary .good{background:var(--green-soft)}
.learner-journey-summary .mid{background:var(--bg-fbf0dc, #fbf0dc)}
.learner-journey-summary .low{background:var(--coral-soft)}

.journey-map{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--bg-f7faf7, #f7faf7);display:grid;gap:12px}
.journey-map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.journey-map-head h3{font-size:14px}
.journey-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--muted)}
.journey-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:-5px}
.journey-legend i.good,.journey-station.good .journey-stop{background:var(--green);border-color:var(--green);color:#fff}
.journey-legend i.mid,.journey-station.mid .journey-stop{background:#8a5a00;border-color:#8a5a00;color:#fff}
.journey-legend i.low,.journey-station.low .journey-stop{background:var(--coral);border-color:var(--coral);color:#fff}
.journey-legend i.open{background:var(--bg-fff, #fff);border:2px dashed var(--muted)}
.journey-stations{list-style:none;margin:0;padding:6px 2px 4px;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity}
.journey-stations li{flex:1 0 120px;position:relative;scroll-snap-align:start}
.journey-stations li:not(:last-child)::after{content:'';position:absolute;top:22px;left:calc(50% + 24px);right:calc(-50% + 24px);border-top:3px solid var(--line);border-radius:2px}
.journey-station{width:100%;border:0;background:transparent;display:grid;justify-items:center;gap:7px;padding:2px 6px 4px;cursor:pointer;color:var(--ink);border-radius:12px}
.journey-station:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.journey-stop{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--bg-fff, #fff);border:2px dashed var(--muted);color:var(--muted);transition:transform .15s,box-shadow .15s;position:relative;z-index:1}
.journey-station:hover .journey-stop{transform:scale(1.08)}
.journey-station.selected .journey-stop{box-shadow:0 0 0 4px var(--bg-fff, #fff),0 0 0 6px var(--ink)}
.journey-station-name{font-size:12px;line-height:1.35;text-align:center;max-width:130px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.journey-station-detail{background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:6px;font-size:13px;line-height:1.6}
.journey-station-detail .text-button{justify-self:start;font-size:12px}

.learner-journey-columns{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:24px;align-items:start}
.learner-journey-side,.learner-journey-timeline{display:grid;gap:12px;min-width:0}
.learner-journey h3{display:flex;align-items:center;gap:7px;font-size:14px}
.learner-journey h3 svg{color:var(--green)}
.journey-next{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.journey-next li{display:flex;gap:9px;align-items:flex-start;border-radius:11px;padding:10px 12px;font-size:13px;line-height:1.45;background:var(--green-soft)}
.journey-next li svg{flex-shrink:0;margin-top:2px;color:var(--green)}
.journey-next li.recovery{background:var(--coral-soft)}
.journey-next li.recovery svg{color:var(--coral)}
.journey-next li.plan{background:var(--bg-f3effa, #f3effa)}
.journey-next li.plan svg{color:var(--violet)}

.journey-trend{margin:4px 0 0;border:1px solid var(--line);border-radius:14px;padding:12px 12px 6px}
.journey-trend figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-bottom:6px}
.journey-trend figcaption svg{color:var(--green)}
.journey-trend figcaption span{font-weight:400;font-size:12px;color:var(--muted);width:100%}
.journey-trend figcaption span.up{color:var(--green)}
.journey-trend figcaption span.down{color:var(--coral-ink)}
.journey-trend>svg{width:100%;height:auto;display:block;overflow:visible}
.journey-trend figcaption svg{flex-shrink:0}
.journey-trend .grid{stroke:var(--line);stroke-width:1}
.journey-trend text{font-size:10px;fill:var(--muted)}
.journey-trend .area{fill:var(--green-soft);stroke:none}
.journey-trend .line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.journey-trend .dot{fill:var(--bg-fff, #fff);stroke:var(--green);stroke-width:2}
.journey-trend .end{fill:var(--green);stroke:var(--bg-fff, #fff);stroke-width:2}

.journey-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.journey-filters::-webkit-scrollbar{display:none}
.journey-filters button{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg-fff, #fff);color:var(--ink);border-radius:20px;padding:7px 12px;font-size:13px;min-height:36px;cursor:pointer}
.journey-filters button b{font-size:11px;background:var(--bg-f2f4f1, #f2f4f1);color:var(--muted);border-radius:10px;padding:1px 7px;font-variant-numeric:tabular-nums}
.journey-filters button[aria-pressed=true]{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.journey-filters button[aria-pressed=true] b{background:rgba(255,255,255,.2);color:#fff}
.journey-filters button:disabled{opacity:.45;cursor:default}

.journey-month h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 0}
.journey-month ol{list-style:none;margin:0;padding:0 0 0 17px;border-left:2px solid var(--line);display:grid;gap:12px}
.journey-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:start;margin-left:-34px;animation:journey-in .25s ease both}
@keyframes journey-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.journey-icon{width:32px;height:32px;border-radius:50%;background:var(--bg-fff, #fff);border:2px solid var(--line);display:grid;place-items:center;color:var(--green)}
.journey-item.credential .journey-icon,.journey-item.report .journey-icon{color:#b8860b;border-color:#e8d39a}
.journey-item.recovery .journey-icon{color:var(--coral);border-color:var(--coral-soft)}
.journey-item.plan .journey-icon,.journey-item.placement .journey-icon{color:var(--violet)}
.journey-item>div{display:grid;gap:4px;font-size:13px;line-height:1.45;min-width:0;padding-top:5px}
.journey-item small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.journey-chips{display:flex;flex-wrap:wrap;gap:5px}
.journey-chip{display:inline-block;font-size:12px;background:var(--coral-soft);color:var(--coral-ink);border-radius:9px;padding:2px 8px;margin:1px 2px}
.journey-theme-link{justify-self:start;border:0;background:transparent;padding:0;font-size:12px;color:var(--green);text-decoration:underline;cursor:pointer}
.journey-meta{display:grid;justify-items:end;gap:4px;padding-top:5px}
.journey-meta time{font-size:12px;color:var(--muted);white-space:nowrap}
.journey-score{font-variant-numeric:tabular-nums;font-size:12px;border-radius:10px;padding:2px 8px}
.journey-score.good{background:var(--green-soft);color:var(--green)}
.journey-score.mid{background:var(--bg-fbf0dc, #fbf0dc);color:var(--fg-8a5a00, #8a5a00)}
.journey-score.low{background:var(--coral-soft);color:var(--coral-ink)}
.journey-more{justify-self:start;font-size:13px}
.learner-journey-empty,.learner-journey-privacy{font-size:12px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){.journey-item,.journey-loading span{animation:none}.journey-stop{transition:none}}
@media (max-width:900px){.learner-journey-columns{grid-template-columns:1fr}}
@media (max-width:560px){
  .learner-journey{padding:16px;border-radius:16px}
  .learner-journey-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-stations li{flex-basis:96px}
  .journey-item{grid-template-columns:32px minmax(0,1fr)}
  .journey-meta{grid-column:2;justify-items:start;grid-auto-flow:column;justify-content:start;align-items:center;padding-top:0}
}
.group-join-card{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:24px;background:var(--bg-fff, #fff);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:18px;box-shadow:0 5px 18px rgba(29,60,48,.035)}.group-join-memberships{display:flex;align-items:center;gap:11px;min-width:0}.group-join-icon{width:36px;height:36px;border-radius:11px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}.group-join-icon svg{width:18px}.group-join-memberships h2{font-size:13px}.group-join-memberships p{font-size:12px;color:var(--muted);margin-top:4px}.learner-group-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.learner-group-list span{display:inline-flex;align-items:center;gap:4px;background:var(--green-soft);color:var(--green);font-size:12px;font-weight:700;padding:4px 8px;border-radius:12px}.learner-group-list svg{width:12px;height:12px}.group-join-form label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-bottom:7px}.group-join-form label svg{width:14px;color:var(--violet)}.group-join-form>div{display:flex;gap:8px}.group-join-form input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--bg-fafbf9, #fafbf9);padding:10px 12px;color:var(--ink);font:600 13px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;outline:0}.group-join-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(36,122,104,.09)}.group-join-form .button{font-size:12px;white-space:nowrap}.group-join-error,.group-join-notice{grid-column:1/-1;font-size:12px;line-height:1.5;padding-top:10px;border-top:1px solid var(--line)}.group-join-error{color:var(--fg-9b4c39, #9b4c39)}.group-join-notice{color:var(--green)}@media(max-width:850px){.group-join-card{grid-template-columns:1fr;gap:15px}}@media(max-width:420px){.group-join-card{padding:15px}.group-join-form>div{gap:6px}.group-join-form .button{padding:10px;font-size:12px}.group-join-form input{font-size:12px}}
/* Navigation must remain reachable on short desktops and landscape phones. */
.sidebar {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.sidebar > * { flex-shrink: 0; }
.sidebar-spacer { flex-shrink: 1; }
.mobile-menu {
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: max(15px, env(safe-area-inset-bottom));
}
.mobile-header { padding-top: env(safe-area-inset-top); height: calc(68px + env(safe-area-inset-top)); }
.mobile-menu { top: calc(68px + env(safe-area-inset-top)); max-height: calc(100dvh - 68px - env(safe-area-inset-top)); }
.auth-page .auth-form-side { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.auth-form-wrap, .auth-form-wrap form, .auth-form-wrap label, .auth-input { min-width: 0; }

/* Keep the source-workshop step captions inside their own grid columns. */
.studio-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16px, .45fr) minmax(0, 1fr) minmax(16px, .45fr) minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 34px;
}
.studio-steps > span { position: relative; justify-self: center; }
.studio-steps > i { width: 100%; margin: 0; }
.studio-steps small { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); margin-left: 0; width: 110px; }

@media (max-width: 1100px) {
  .tutor-panel.open { max-height: calc(100dvh - 166px - env(safe-area-inset-top)); }
  .tutor-header, .tutor-input, .tutor-note { flex-shrink: 0; }
  .tutor-body { min-height: 0; }
}

@media (max-width: 800px) {
  /* 16px prevents automatic page zoom when focusing a field in iOS Safari. */
  #root input, #root select, #root textarea {
    font-size: 16px;
  }
  .mobile-header > button,
  .mobile-menu button,
  .auth-header nav button,
  .auth-footer button,
  .auth-info-close,
  .auth-input button {
    min-width: 44px;
    min-height: 44px;
  }
  .mobile-menu { scroll-padding-bottom: 20px; }
}

@media (max-width: 560px) {
  .mobile-menu { max-height: calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .studio-steps { padding-bottom: 0; }
}

@media (max-width: 1100px) and (max-height: 500px) {
  .tutor-header { padding: 12px; }
  .tutor-body { padding: 12px; }
  .tutor-note { display: none; }
}
.nav-group { display: grid; gap: 3px; }
.nav-group-label { display: block; margin: 13px 13px 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.sidebar-label { margin-top: 24px; margin-bottom: 2px; }
.mobile-menu .nav-group-label { margin-left: 12px; }
.mobile-menu button { width: 100%; border-radius: 10px; align-items: center; }
.mobile-menu button[aria-current="page"] { background: var(--green-soft); color: var(--brand-green); font-weight: 700; }
.bottom-nav button { flex: 1; min-width: 0; padding: 6px 4px; min-height: 48px; }
.button, .text-button, .icon-button, .close-chat, .interest-grid button, summary { min-height: 44px; }
.text-button { white-space: normal; text-align: left; }
.button { white-space: normal; line-height: 1.5; }
.button:active:not(:disabled), .task-card:active { transform: translateY(1px); }
.nav-item:hover, .mobile-menu button:hover { background: var(--green-soft); }
.notification-button, .streak-button { cursor: default; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--brand-green); color: white; transform: translateY(-160%); opacity: 0; pointer-events: none; }
.skip-link:focus { transform: none; opacity: 1; pointer-events: auto; }
.main-content:focus { outline: none; }
.learning-strategies { margin: 16px 0 8px; }
.learning-strategies summary { display: flex; align-items: center; color: var(--brand-green); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.learning-strategies p { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 10px 0; }
.learning-strategies p strong { color: var(--brand-green); }
.coach-card > .text-button { margin-top: 8px; }
.video-source-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.source-field-label { display: block; font-size: 12px; font-weight: 700; margin: 12px 0 8px; }
.studio-steps > span:not(.active), .week-days .day { color: var(--muted); }
.video-source-input { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); }
.video-source-help { margin: 10px 0 20px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.video-lesson { margin: 20px 0; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.video-lesson h2 { font-size: 20px; margin-bottom: 16px; }
.video-lesson iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; border-radius: 12px; }
.video-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 200px; border: 1px solid var(--line); border-radius: 12px; background: var(--green-soft); color: var(--brand-green); padding: 24px; text-align: center; }
.video-load span { font-size: 12px; line-height: 1.6; color: var(--muted); }
.video-lesson > a { margin-top: 8px; }
.export-help { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 12px 0; }
.theme-document-actions { flex-wrap: wrap; justify-content: flex-end; }
.sidebar-service { display: flex; flex-direction: column; gap: 0; margin: 10px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.sidebar-service a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; color: var(--green); font-size: 12px; text-decoration: none; border-radius: 10px; }
.sidebar-service a:hover { background: var(--green-soft); text-decoration: underline; }
.tutor-mode { display: grid; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tutor-mode label { font-size: 11px; font-weight: 700; }
.tutor-mode select { width: 100%; min-width: 0; min-height: 40px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; font-size: 12px; }
.tutor-mode a { font-size: 10px; color: var(--green); }
.published-themes > article { flex-wrap: wrap; }
.published-themes > article > span { min-width: 120px; overflow-wrap: anywhere; }
@media (max-width: 1100px) and (max-height: 500px) {
  .tutor-mode { padding: 6px 12px; }
  .tutor-mode label, .tutor-mode a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:active:not(:disabled), .task-card:active { transform: none; }
}
/* Last stylesheet: small-screen and readability fixes that apply on top of every page's own styles. */

/* Readability: uppercase labels never drop below 11px, small print below 12px. */
.public-section-title > span, .auth-kicker { font-size: 11px; }
.public-kicker { font-size: 12px; }
.auth-switch { font-size: 13px; }
.auth-switch button { padding: 8px 4px; }
.auth-security span { font-size: 12px; }
.nav-group-label { font-size: 11px; }

/* Comfortable tap targets for small controls. */
.auth-input > button { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }

@media (max-width: 760px) {
  /* Sign-in first: the form comes straight after the header, the story follows below it. */
  .auth-page .auth-header { order: 1; }
  .auth-page .auth-form-side { order: 2; padding-top: 4px; }
  .auth-page .auth-story { order: 3; padding-top: 18px; padding-bottom: 28px; }
  .auth-page .auth-footer { order: 4; }
  .auth-page .learning-illustration { display: none; }
  .auth-story h1 { font-size: clamp(26px, 7vw, 32px); }
  .auth-header nav a, .auth-header nav button { font-size: 13px; }
  .auth-audiences { text-align: left; margin-inline: auto; width: 100%; }

  /* Admin and hub tabs scroll sideways in one row instead of stacking into a wall of buttons. */
  .admin-workspace-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .admin-workspace-tabs::-webkit-scrollbar { display: none; }
  .admin-workspace-tabs button { flex: none; white-space: nowrap; }

  /* The start checklist stays short: only the next step shows its explanation. */
  .teacher-checklist ol { grid-template-columns: 1fr; gap: 6px; }
  .teacher-checklist li { padding: 9px 12px; }
  .teacher-checklist li:not(.next) > div > span { display: none; }
}

@media (max-width: 560px) {
  /* Headings with a badge or button: the extra moves under the title instead of squeezing it. */
  .page-heading { flex-wrap: wrap; }
  .page-heading > div:first-child { flex: 1 1 220px; min-width: 0; }
  .page-heading > .level-badge { white-space: normal; }
}

@media (max-width: 480px) {
  .teacher-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-metrics strong { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  /* Contact stays reachable in the footer, so the header keeps one line. */
  .auth-header nav a[href="/contact"] { display: none; }
}

.auth-footer, .auth-footer a, .auth-learning-steps span { font-size: 12px; }
.tutor-mode a { font-size: 12px; }
/* Form controls never grow wider than their column; a select otherwise sizes to its longest option. */
select, input, textarea { max-width: 100%; }
.palette-scope select { min-width: 0; }
.insight-open { min-height: 36px; }

@media (max-width: 420px) {
  /* The three lab steps stack, so their labels keep room on the narrowest phones. */
  .climate-steps { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .climate-steps > div { padding: 2px 4px; min-width: 0; }
  .climate-steps > div:not(:last-child):after { display: none; }
}
.public-site { min-height: 100svh; background: var(--brand-paper); color: var(--brand-green); }
.public-header { max-width: 1280px; margin: auto; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.public-header > a:first-child { flex-shrink: 0; }
.public-header .brand { padding: 0; }
.public-header .brand-wordmark { width: 158px; }
.public-header nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.public-header a { color: var(--brand-green); text-decoration: none; font-size: 13px; }
.public-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.public-header nav a[aria-current="page"] { font-weight: 800; text-decoration: underline; text-underline-offset: 6px; }
.public-header .button.primary { color: #fff; }
.public-main { max-width: 1160px; margin: auto; padding: 0 32px 80px; }
.public-main:focus { outline: none; }
.public-hero { max-width: 900px; padding: 68px 0 56px; }
.public-hero.compact { padding-bottom: 32px; }
.public-kicker { display: block; color:#3e6d5d; font-size: 12px; font-weight: 800; letter-spacing: 2px; line-height: 1.6; text-transform: uppercase; }
.public-hero h1 { font-size: clamp(34px, 4.4vw, 57px); font-weight: 800; letter-spacing: -2px; line-height: 1.12; margin: 18px 0 24px; }
.public-main p { font-size: 15px; line-height: 1.8; color:#52665d; }
.public-hero > p { max-width: 720px; font-size: 18px; line-height: 1.75; }
.public-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.public-actions .button, .public-main a.button { text-decoration: none; }
.public-section { margin: 30px 0 56px; }
.public-section h2, .public-card h2, .guide-body h2 { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.3; font-weight: 800; letter-spacing: -.8px; margin-bottom: 16px; }
.public-section-title { max-width: 760px; margin-bottom: 24px; }
.public-section-title > span { display: block; color:#3e6d5d; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 12px; }
.public-grid { display: grid; gap: 20px; }
.public-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.public-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.public-card.green { background: var(--green-soft); }
.public-card h3 { font-size: 20px; line-height: 1.4; font-weight: 800; margin: 12px 0; }
.public-card > svg { color: var(--green); width: 28px; height: 28px; }
.public-card p + p, .public-split p + p { margin-top: 14px; }
.public-card > a, .public-split > div > a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 12px; color: var(--green); text-underline-offset: 3px; }
.public-number { display: grid; place-items: center; background: var(--coral-soft); color: var(--coral); width: 42px; height: 42px; border-radius: 14px; font-weight: 800; }
.public-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 36px; }
.public-split > div > h2 { margin-top: 14px; }
.public-faq details { border-bottom: 1px solid var(--line); padding: 8px 0; }
.public-faq summary, .guide-tasks summary { cursor: pointer; min-height: 48px; padding: 12px 0; font-weight: 700; font-size: 15px; line-height: 1.6; }
.public-faq details > p { padding: 0 0 20px; max-width: 800px; }
.public-faq > a { display: inline-flex; align-items: center; gap: 8px; color: var(--green); min-height: 44px; margin-top: 18px; }
.public-footer { max-width: 1280px; margin: auto; padding: 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.public-footer strong { font-size: 19px; }
.public-footer p, .public-footer small { font-size: 12px; line-height: 1.7; color: var(--muted); }
.public-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.public-footer a { color: var(--green); font-size: 12px; display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.guide-picker { margin: 0 0 28px; }
.guide-picker > label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.guide-picker > select { width: min(100%, 480px); background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px; font: inherit; color: var(--brand-green); }
.guide-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
.guide-roles a { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--brand-green); text-decoration: none; }
.guide-roles a:hover { background: var(--green-soft); border-color: var(--green); }
.guide-roles span { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.guide-roles strong { font-size: 16px; overflow-wrap: anywhere; }
.guide-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 34px 0 24px; }
.guide-heading > div { max-width: 730px; }
.guide-heading h2 { margin-top: 12px; }
.guide-heading > button { flex-shrink: 0; }
.guide-quick { background: var(--green-soft); padding: 28px; border-radius: 20px; margin: 24px 0; }
.guide-quick h3 { font-size: 20px; font-weight: 800; }
.guide-body ol { padding-left: 22px; color:#445e52; font-size: 15px; line-height: 1.8; }
.guide-body li { margin: 10px 0; padding-left: 6px; }
.guide-tasks details { border: 1px solid var(--line); border-radius: 16px; padding: 10px 24px; background: white; margin: 12px 0; }
.guide-tasks details > ol { padding-bottom: 12px; }
.guide-download { margin: 30px 0; }
.guide-download a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--green); text-underline-offset: 3px; }
.contact-layout { margin: 10px 0 40px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.contact-layout h2 { font-size: 24px; margin-top: 14px; }
.contact-email { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.contact-form { display: grid; gap: 9px; margin-top: 24px; }
.contact-form fieldset, .contact-pilot-fields { display: grid; gap: 9px; min-width: 0; border: 0; padding: 0; margin: 0; }
.contact-form small { color: #52665d; font-size: 12px; line-height: 1.7; }
.contact-form .contact-data-note { font-size: 12px; margin-top: 12px; }
.contact-layout aside a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--green); }
.contact-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-error { color: #8b3026 !important; background: #fff0ed; border: 1px solid #e7b6ac; padding: 16px; border-radius: 12px; margin-top: 20px; }
.contact-receipt code { font-size: 13px; overflow-wrap: anywhere; }
.contact-receipt .button { margin-top: 20px; }
.contact-form label, .contact-draft label { font-size: 13px; font-weight: 700; margin-top: 10px; }
.contact-form input, .contact-form select, .contact-form textarea, .contact-draft textarea { width: 100%; min-width: 0; font: inherit; font-size: 16px; line-height: 1.6; background: #fff; color: var(--ink); padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.contact-form textarea, .contact-draft textarea { min-height: 160px; resize: vertical; }
.contact-form button { justify-self: start; margin-top: 12px; }
.contact-notice { margin-top: 20px; padding: 14px; border-radius: 10px; background: var(--green-soft); }
.contact-draft { margin-top: 24px; }
.contact-draft label { display: block; margin-bottom: 10px; }
.contact-draft .public-actions .button { font-size: 12px; }
.public-checks { list-style: none; padding: 0; color:#445e52; font-size: 15px; line-height: 1.8; }
.public-checks li { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
.public-checks svg { flex: 0 0 20px; margin-top: 4px; color: var(--green); }
.privacy-cards h2 { font-size: 23px; }
.public-main a:not(.button):hover, .public-header nav a:hover { text-decoration: underline; }
.public-main :where(p, li, a, h1, h2, h3) { overflow-wrap: anywhere; }

/* Producten-dropdown in de publieke navigatie */
.public-dropdown { position: relative; }
.public-dropdown summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 13px; color: var(--brand-green); }
.public-dropdown summary::-webkit-details-marker { display: none; }
.public-dropdown summary::after { content: "▾"; font-size: 10px; }
.public-dropdown[open] summary::after { content: "▴"; }
.public-dropdown summary:hover { text-decoration: underline; }
.public-dropdown-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: grid; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 14px 34px rgba(22, 63, 55, .14); }
.public-dropdown-panel a { display: block; min-height: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.public-dropdown-panel a:hover { background: var(--green-soft); text-decoration: none; }

/* Uitklapbare featurelijst op de productpagina's */
.product-accordion details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 22px; }
.product-accordion details + details { margin-top: 10px; }
.product-accordion summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--brand-green); }
.product-accordion summary::-webkit-details-marker { display: none; }
.product-accordion summary::after { content: "+"; flex-shrink: 0; font-size: 24px; font-weight: 400; color: var(--green); }
.product-accordion details[open] summary::after { content: "−"; }
.product-accordion details > div { max-width: 760px; padding: 0 0 18px; }
.product-accordion details > div > p { margin: 0 0 10px; }

/* Rij met LMS-namen op de integratiepagina */
.lms-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 4px; }
.lms-strip span { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 700; color: var(--brand-green); }

/* Prijzenpagina */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pricing-tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; }
.pricing-tier.featured { border: 2px solid var(--green); box-shadow: 0 18px 44px rgba(22, 63, 55, .12); }
.pricing-badge { position: absolute; top: -14px; left: 24px; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.pricing-tier h2 { font-size: 21px; margin: 6px 0 2px; }
.pricing-tier .pricing-price { font-size: 32px; font-weight: 800; color: var(--brand-green); letter-spacing: -1px; margin: 8px 0 4px; }
.pricing-tier .pricing-price span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.pricing-tier .pricing-tagline { margin: 0 0 12px; }
.pricing-tier .public-checks { margin-bottom: 20px; }
.pricing-tier .public-checks li { margin: 10px 0; }
.pricing-tier .button { margin-top: auto; align-self: flex-start; }
.pricing-included { margin-top: 24px; background: var(--green-soft); border-radius: 18px; padding: 22px 26px; }
.pricing-included strong { display: block; margin-bottom: 10px; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; }
.pricing-included ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pricing-included li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #445e52; }
.pricing-included svg { color: var(--green); flex-shrink: 0; }

/* Dubbele CTA in de publieke header */
.public-header-cta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

@media (max-width: 1000px) {
  .public-header { flex-wrap: wrap; gap: 12px 24px; }
  .public-header nav { order: 3; width: 100%; justify-content: space-between; gap: 8px 20px; }
  .public-dropdown-panel { position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-split { gap: 22px; }
}
@media (max-width: 700px) {
  .public-header, .public-footer { padding: 20px; }
  .public-header .brand-wordmark { width: 136px; }
  .public-header > .button { font-size: 11px; padding: 10px 12px; }
  .public-header-cta { width: 100%; justify-content: flex-start; }
  .public-header-cta .button { font-size: 11px; padding: 10px 12px; }
  .public-header nav a { font-size: 12px; }
  .public-header nav { justify-content: flex-start; gap: 4px 18px; }
  .public-main { padding: 0 20px 40px; }
  .public-hero { padding: 34px 0 28px; }
  .public-hero h1 { font-size: clamp(32px, 7.5vw, 44px); letter-spacing: -1.2px; }
  .public-hero > p { font-size: 16px; }
  .public-grid.three, .public-grid.two, .public-split { grid-template-columns: minmax(0, 1fr); }
  .public-card { padding: 22px; }
  .public-section { margin: 22px 0 36px; }
  .guide-heading { flex-direction: column; gap: 14px; }
  .guide-quick { padding: 22px; }
  .guide-tasks details { padding: 8px 18px; }
  .public-footer { flex-direction: column; gap: 16px; }
  .guide-roles { gap: 12px; }
  .guide-roles a { padding: 16px; }
  .guide-roles strong { font-size: 14px; }
}
@media (max-width: 370px) {
  .public-header .brand-wordmark { width: 112px; }
  .public-header > .button { max-width: 155px; }
}
@media print {
  .public-header, .public-footer, .guide-picker, .guide-download, .print-guide, .public-faq, .guide-body .public-actions, .skip-link { display: none !important; }
  .public-main { max-width: none; padding: 0; }
  .public-hero { padding: 0 0 16px; }
  .public-site, .guide-quick, .guide-tasks details { background: #fff; }
  .guide-tasks details { border: 0; padding: 0; }
  .guide-body ol { color:#163f37; }
  .guide-tasks details > ol { display: block !important; }
  .guide-tasks details::details-content { content-visibility: visible; }
  .guide-heading { margin-top: 10px; }
  h2, h3, summary { -moz-column-break-after: avoid; break-after: avoid; }
  li { -moz-column-break-inside: avoid; break-inside: avoid; }
}