:root {
  --ink: #163247;
  --muted: #5b7180;
  --paper: #f7fbfd;
  --white: #ffffff;
  --navy: #10324a;
  --teal: #087f8c;
  --teal-dark: #056571;
  --aqua: #d9f3f3;
  --coral: #f0645a;
  --coral-soft: #fff0ed;
  --yellow: #f5c451;
  --line: #d5e2e8;
  --shadow: 0 14px 38px rgba(16, 50, 74, .12);
  --radius: 22px;
  --focus: #8a3ffc;
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, .button { min-height: 44px; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 4px solid color-mix(in srgb, var(--focus), transparent 35%); outline-offset: 3px; }
a { color: var(--teal-dark); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.08; letter-spacing: -.04em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.2; letter-spacing: -.025em; }
h3 { line-height: 1.25; }
.hidden { display: none !important; }
.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; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.skip-link:focus { top: 1rem; }

.app-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem max(1rem, calc((100vw - 1280px)/2)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .7rem; border: 0; color: var(--navy); background: transparent; font-weight: 850; font-size: 1.08rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: linear-gradient(145deg, var(--teal), var(--navy)); box-shadow: 0 7px 18px rgba(8,127,140,.22); }
.brand-mark svg { width: 26px; height: 26px; }
.header-actions { display: flex; gap: .45rem; align-items: center; overflow-x: auto; }
.mode-chip { padding: .45rem .75rem; min-height: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 750; }

.shell { width: min(1280px, 100%); margin: 0 auto; padding: 1.25rem; }
.builder-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.step-nav { position: sticky; top: 84px; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 25px rgba(16,50,74,.07); }
.step-button { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: .65rem; align-items: center; padding: .7rem; margin: .2rem 0; border: 0; border-radius: 15px; background: transparent; color: var(--muted); text-align: left; font-weight: 750; }
.step-button:hover { background: var(--paper); }
.step-button.active { background: var(--aqua); color: var(--navy); }
.step-number { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--line); border-radius: 50%; background: var(--white); }
.step-button.active .step-number { border-color: var(--teal); background: var(--teal); color: white; }
.privacy-note { margin-top: .8rem; padding: .8rem; border-radius: 15px; background: #eef5ff; color: #24465e; font-size: .88rem; }

.panel { min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.3rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .35rem; color: var(--teal-dark); font-size: .82rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lead { max-width: 760px; color: var(--muted); font-size: 1.04rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .4rem; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { color: var(--ink); font-weight: 820; }
.hint { color: var(--muted); font-size: .86rem; }
input, select, textarea { width: 100%; padding: .75rem .85rem; border: 1.5px solid #b8cbd4; border-radius: 13px; background: white; color: var(--ink); }
textarea { min-height: 112px; resize: vertical; }

.choice-row, .tag-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice-pill { position: relative; }
.choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
.choice-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .85rem; border: 1.5px solid var(--line); border-radius: 999px; background: white; font-weight: 750; }
.choice-pill input:checked + span { border-color: var(--teal); background: var(--aqua); box-shadow: inset 0 0 0 1px var(--teal); }
.choice-pill input:focus-visible + span { outline: 4px solid color-mix(in srgb, var(--focus), transparent 35%); outline-offset: 3px; }

.toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.toggle-card { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.toggle-card input { width: 21px; height: 21px; margin-top: .14rem; accent-color: var(--teal); flex: 0 0 auto; }
.toggle-copy { display: grid; gap: .1rem; }
.toggle-copy strong { font-size: .95rem; }
.toggle-copy small { color: var(--muted); }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.module-card { position: relative; min-height: 196px; display: flex; flex-direction: column; padding: 1rem; border: 2px solid var(--line); border-radius: 20px; background: var(--white); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.module-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,50,74,.09); }
.module-card.selected { border-color: var(--teal); background: linear-gradient(180deg, #fff, #f1fbfb); }
.module-check { position: absolute; right: .85rem; top: .85rem; width: 24px; height: 24px; accent-color: var(--teal); }
.module-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .65rem; border-radius: 16px; background: var(--aqua); font-size: 1.45rem; }
.module-card h3 { margin: 0 2rem .3rem 0; font-size: 1.05rem; }
.module-card p { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.module-card small { margin-top: auto; color: var(--teal-dark); font-weight: 800; }

.smart-builder { padding: 1rem; border: 2px solid var(--line); border-radius: 21px; background: #f7f9fb; }
.smart-builder.enabled { border-color: #7e57c2; background: linear-gradient(135deg, #f7f1ff, #f2fbff); box-shadow: 0 10px 28px rgba(105,58,131,.1); }
.smart-builder-head { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: .8rem; align-items: center; }
.smart-builder-head h2, .smart-builder-head p { margin: 0; }
.smart-builder-head p { color: var(--muted); }
.smart-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #eadcf5; font-size: 1.5rem; }
.smart-switch { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-radius: 999px; background: white; border: 1px solid var(--line); font-weight: 850; }
.smart-switch input { width: 22px; height: 22px; accent-color: #693a83; }
.smart-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, #693a83, transparent 75%); }
.disabled-area { opacity: .48; }
.smart-preview-badge, .skill-badge { display: inline-flex; align-items: center; width: fit-content; margin-top: .65rem; padding: .32rem .62rem; border-radius: 999px; background: rgba(255,255,255,.18); color: white; font-size: .8rem; font-weight: 850; }
.skill-badge { background: #eee3f7; color: #55316b; }

.bank-box { margin: 1rem 0; padding: 1rem; border-radius: 20px; background: #eef7fb; border: 1px solid #c9e0ea; }
.preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.preset-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: .65rem; align-items: start; padding: .8rem; border-radius: 16px; background: white; border: 1px solid var(--line); }
.preset-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--aqua); font-size: 1.2rem; }
.preset-card small { color: var(--teal-dark); font-weight: 850; }
.preset-card h3 { margin: .1rem 0 .25rem; font-size: .98rem; }
.preset-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.preset-card .btn { grid-column: 2; justify-self: start; }
.btn:disabled { opacity: .56; cursor: not-allowed; }

.site-picker-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.site-picker-card { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr) 32px; gap: .75rem; align-items: center; min-height: 128px; padding: .9rem; border: 2px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, white, #f7fafb); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.site-picker-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,50,74,.1); }
.site-picker-card.selected { border-color: var(--tile, var(--teal)); box-shadow: inset 0 0 0 1px var(--tile, var(--teal)); }
.site-picker-card input { position: absolute; opacity: 0; pointer-events: none; }
.site-picker-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: white; background: var(--tile, var(--teal)); font-size: 1.55rem; }
.site-picker-copy { display: grid; gap: .1rem; }
.site-picker-copy small { color: var(--tile, var(--teal-dark)); font-weight: 850; }
.site-picker-copy strong { font-size: 1.05rem; }
.site-picker-copy > span { color: var(--muted); font-size: .86rem; }
.site-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--tile, var(--teal)); background: white; border: 1px solid currentColor; font-weight: 900; }
.site-blue { --tile: #2876a8; }.site-red { --tile: #ba3b45; }.site-gold { --tile: #a66b00; }.site-purple { --tile: #693a83; }.site-orange { --tile: #b65716; }.site-aqua { --tile: #087f8c; }.site-navy { --tile: #10324a; }.site-green { --tile: #237a57; }.site-mint { --tile: #247f72; }.site-custom { --tile: #4f6573; }

.reward-builder { margin-bottom: 1rem; padding: 1rem; border: 2px solid var(--line); border-radius: 21px; background: #f7f9fb; }
.reward-builder.enabled { border-color: #a66b00; background: linear-gradient(135deg, #fff8dd, #fff); box-shadow: 0 10px 28px rgba(166,107,0,.1); }
.reward-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.reward-select { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #f8fbfc; }
.reward-picker-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.reward-picker { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) 30px; gap: .65rem; align-items: center; padding: .75rem; border: 2px solid var(--line); border-radius: 16px; background: white; cursor: pointer; }
.reward-picker.selected { border-color: #c88613; background: #fffaf0; }
.reward-picker input { position: absolute; opacity: 0; pointer-events: none; }
.reward-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff0c7; font-size: 1.35rem; }
.reward-picker > span:nth-child(3) { display: grid; }
.reward-picker small { color: var(--muted); }
.planning-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.planning-card { padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: white; }

.custom-list { display: grid; gap: .65rem; margin-bottom: 1rem; }
.custom-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.custom-item-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--coral-soft); }
.custom-item h3 { margin: 0; font-size: .98rem; }
.custom-item p { margin: .1rem 0 0; color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-state { padding: 1.2rem; border: 2px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); }
.form-box { padding: 1rem; border-radius: 18px; background: #f4f8fa; border: 1px solid var(--line); }

.button-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.builder-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .67rem 1rem; border: 1.5px solid transparent; border-radius: 13px; background: var(--teal); color: white; font-weight: 820; text-decoration: none; }
.btn:hover { background: var(--teal-dark); }
.btn.secondary { border-color: var(--line); background: white; color: var(--ink); }
.btn.secondary:hover { background: var(--paper); }
.btn.coral { background: var(--coral); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--teal-dark); }
.btn.danger { border-color: #f2b9b5; background: #fff6f5; color: #a62d25; }
.btn.small { min-height: 38px; padding: .42rem .7rem; font-size: .88rem; }
.icon-btn { display: grid; place-items: center; width: 44px; min-width: 44px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--ink); }

.preview-shell { overflow: hidden; border: 7px solid var(--navy); border-radius: 24px; background: var(--paper); }
.preview-bar { display: flex; gap: .35rem; align-items: center; padding: .55rem .7rem; background: var(--navy); }
.preview-dot { width: 9px; height: 9px; border-radius: 50%; background: #7090a1; }
.preview-body { padding: 1rem; }
.preview-welcome { padding: 1rem; border-radius: 18px; color: white; background: linear-gradient(135deg, var(--teal), var(--navy)); }
.mini-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .55rem; margin-top: .75rem; }
.mini-card { min-height: 86px; padding: .7rem; border-radius: 15px; background: white; border: 1px solid var(--line); font-size: .82rem; font-weight: 780; }
.share-box { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.share-lock { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 1rem; align-items: center; margin-top: .7rem; padding: 1rem; border: 2px dashed #d2b45d; border-radius: 18px; background: #fffaf0; }
.share-lock > span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #fff0c7; font-size: 1.7rem; }
.share-lock h3, .share-lock p { margin: 0 0 .35rem; }
.link-box { display: flex; gap: .5rem; margin: .55rem 0; }
.link-box input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.qr-wrap { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 1rem; align-items: center; margin-top: 1rem; }
.qr { display: grid; place-items: center; min-height: 180px; padding: .5rem; border: 1px solid var(--line); border-radius: 16px; background: white; overflow: hidden; }
.qr svg { width: 100%; height: auto; }
.warning { display: flex; gap: .6rem; padding: .8rem; border-radius: 15px; background: #fff8df; color: #644b05; font-size: .9rem; }

/* Teacher library and reports */
.teacher-library, .teacher-report { padding-top: 1.4rem; padding-bottom: 3rem; }
.library-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(1.25rem,4vw,2rem); border-radius: 27px; color: white; background: linear-gradient(125deg,#10324a,#087f8c); box-shadow: var(--shadow); }
.library-hero::after { content: ""; position: absolute; right: 12%; bottom: -82px; width: 190px; height: 190px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; }
.library-hero > * { position: relative; z-index: 1; }
.library-hero .eyebrow, .library-hero p { color: rgba(255,255,255,.86); }
.library-hero h1 { margin-bottom: .45rem; }
.library-hero p { max-width: 720px; margin: 0; }
.library-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin: 1rem 0; }
.library-stats.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.library-stats article { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: 0 7px 20px rgba(16,50,74,.06); }
.library-stats article > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--aqua); font-size: 1.35rem; }
.library-stats strong, .library-stats small { display: block; }
.library-stats strong { font-size: 1.35rem; line-height: 1.1; }
.library-stats small { color: var(--muted); }
.library-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: 18px; background: white; }
.library-search { flex: 1 1 360px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .5rem; align-items: center; }
.library-search input { border: 0; padding-left: .25rem; box-shadow: none; }
.profile-library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.profile-library-card { padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.profile-card-top { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: .8rem; align-items: center; }
.profile-card-top h2, .profile-card-top p { margin: 0; }
.profile-card-top small { color: var(--teal-dark); font-weight: 850; }
.profile-card-top p { color: var(--muted); font-size: .84rem; }
.profile-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; color: white; background: var(--student-primary,var(--teal)); font-size: 1.5rem; font-weight: 900; box-shadow: inset 0 -5px rgba(0,0,0,.08); }
.profile-card-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0; }
.profile-card-facts span { padding: .3rem .55rem; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: .78rem; font-weight: 750; }
.profile-card-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.library-empty { grid-column: 1/-1; padding: 3rem 1rem; background: white; }
.library-empty > span, .report-empty > span { display: block; margin-bottom: .5rem; font-size: 2.5rem; }
.library-privacy { margin-top: 1rem; }
.report-actions { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.report-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem; border-radius: 23px; color: white; background: linear-gradient(125deg,var(--navy),var(--teal)); box-shadow: var(--shadow); }
.report-heading .eyebrow, .report-heading p { color: rgba(255,255,255,.82); }
.report-heading h1, .report-heading p { margin-bottom: 0; }
.report-avatar { width: 76px; height: 76px; border: 3px solid rgba(255,255,255,.5); font-size: 2rem; }
.report-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; margin: 1rem 0; }
.report-metrics article, .report-card { padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 7px 22px rgba(16,50,74,.06); }
.report-metrics small, .report-metrics strong, .report-metrics article > span { display: block; }
.report-metrics small, .report-metrics article > span { color: var(--muted); }
.report-metrics strong { margin: .2rem 0; font-size: 1.35rem; }
.report-meter { overflow: hidden; height: 8px; margin-top: .45rem; border-radius: 999px; background: #e4ecef; }
.report-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),#37a884); }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.week-chart { display: grid; grid-template-columns: repeat(7,1fr); gap: .45rem; height: 190px; align-items: end; }
.week-bar { display: grid; grid-template-rows: 20px 1fr auto; gap: .25rem; height: 100%; text-align: center; }
.week-bar > div { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 120px; border-radius: 10px; background: #f0f5f7; overflow: hidden; }
.week-bar i { display: block; width: 72%; min-height: 3px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg,#42b9ad,var(--teal)); }
.week-value, .week-bar small { color: var(--muted); font-size: .76rem; font-style: normal; }
.report-summary { display: grid; gap: .65rem; }
.report-summary > div { display: grid; grid-template-columns: 38px 1fr; gap: .6rem; padding: .7rem; border-radius: 14px; background: var(--paper); }
.report-summary > div > span { font-size: 1.3rem; }
.report-summary p { margin: 0; color: var(--muted); }
.report-summary strong { display: block; color: var(--ink); }
.skill-report { margin-bottom: 1rem; }
.skill-report-list { display: grid; gap: .6rem; }
.skill-report-list article { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 15px; }
.skill-report-list small { display: block; color: var(--muted); }
.skill-report-list .skill-badge { margin: 0; }
.next-step-card ol { margin-bottom: .7rem; padding-left: 1.5rem; }
.next-step-card li { margin: .35rem 0; }
.report-empty { max-width: 740px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: 24px; background: white; text-align: center; box-shadow: var(--shadow); }
.report-empty .warning { margin-top: 1rem; text-align: left; }

/* Student workspace */
.student-app { min-height: 100vh; background: var(--student-bg, #f4fbfc); }
.student-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .7rem max(1rem, calc((100vw - 1180px)/2)); color: white; background: var(--student-primary, var(--navy)); box-shadow: 0 5px 18px rgba(16,50,74,.16); }
.student-header-actions { display: flex; align-items: center; gap: .45rem; }
.stone-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 42px; padding: .4rem .65rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: white; background: rgba(255,255,255,.14); font-weight: 900; }
.student-brand { display: flex; align-items: center; gap: .55rem; font-weight: 850; }
.student-brand .brand-mark { width: 38px; height: 38px; background: rgba(255,255,255,.16); box-shadow: none; }
.student-name { min-width: 0; text-align: center; }
.student-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-name small { color: rgba(255,255,255,.8); }
.student-layout { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 1rem; padding: 1rem; }
.student-nav { position: sticky; top: 80px; align-self: start; display: grid; gap: .35rem; padding: .6rem; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.08); }
.student-nav button { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .65rem .7rem; border: 0; border-radius: 13px; background: transparent; color: var(--ink); text-align: left; font-weight: 750; }
.student-nav button:hover, .student-nav button.active { background: var(--student-soft, var(--aqua)); color: var(--navy); }
.student-main { min-width: 0; }
.welcome-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; padding: clamp(1.1rem, 4vw, 2rem); border-radius: 26px; color: white; background: linear-gradient(135deg, var(--student-primary, var(--teal)), var(--navy)); box-shadow: var(--shadow); }
.welcome-card::after { content: ""; position: absolute; right: -50px; bottom: -80px; width: 210px; height: 210px; border: 30px solid rgba(255,255,255,.1); border-radius: 50%; }
.welcome-card h1 { margin-bottom: .35rem; }
.welcome-card p { max-width: 650px; margin: 0; color: rgba(255,255,255,.88); }
.welcome-mascot { position: absolute; right: 1rem; bottom: -.55rem; z-index: 2; font-size: clamp(3rem,8vw,5.5rem); filter: drop-shadow(0 8px 8px rgba(0,0,0,.16)); }
.progress-orb { position: relative; z-index: 1; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--yellow) var(--progress, 0%), rgba(255,255,255,.2) 0); }
.progress-orb::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--navy); }
.progress-orb span { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 900; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1rem; margin-top: 1rem; }
.card { padding: 1rem; border: 1px solid var(--line); border-radius: 21px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.card-head h2, .card-head h3 { margin: 0; }
.today-list { display: grid; gap: .55rem; }
.today-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 15px; background: #fbfdfe; }
.today-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--student-soft, var(--aqua)); font-size: 1.2rem; }
.today-item strong { display: block; }
.today-item small { color: var(--muted); }
.status-badge { padding: .28rem .55rem; border-radius: 999px; background: #eef2f4; color: var(--muted); font-size: .76rem; font-weight: 850; }
.status-badge.done { background: #dff5e9; color: #12613b; }
.stone-meter { display: grid; grid-template-columns: auto minmax(160px,1fr) auto; gap: .8rem; align-items: center; margin-top: 1rem; padding: .75rem 1rem; border: 1px solid #ead49a; border-radius: 18px; background: #fffaf0; box-shadow: 0 7px 20px rgba(166,107,0,.07); }
.stone-meter > div:first-child { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.stone-count { display: inline-flex; gap: .3rem; align-items: center; padding: .32rem .6rem; border-radius: 999px; background: #fff0c7; color: #704700; font-weight: 900; }
.meter-track { overflow: hidden; height: 11px; border-radius: 999px; background: #eadfbe; }
.meter-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e1a62f,#f5c451); transition: width .35s ease; }
.first-then { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: stretch; margin-top: 1rem; padding: .8rem; border: 1px solid #cbdde6; border-radius: 20px; background: #eef7fb; }
.first-then > div { display: grid; gap: .2rem; padding: .8rem; border-radius: 14px; background: white; }
.first-then small { color: var(--teal-dark); font-weight: 900; letter-spacing: .08em; }
.first-then > span { align-self: center; color: var(--teal); font-size: 1.5rem; font-weight: 900; }
.choice-board { margin-top: 1rem; padding: 1rem; border: 1px solid #d8c7e5; border-radius: 21px; background: #faf6fc; }
.choice-board-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.choice-task { display: grid; justify-items: start; gap: .3rem; min-height: 126px; padding: .8rem; border: 2px solid #dfd3e8; border-radius: 17px; color: var(--ink); background: white; text-align: left; }
.choice-task > span { font-size: 1.45rem; }
.choice-task small { color: var(--muted); }
.choice-task.selected { border-color: #693a83; background: #f3eafb; box-shadow: inset 0 0 0 1px #693a83; }
.journey-card { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.bridge-path { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: .7rem; }
.bridge-path::before { content: ""; position: absolute; left: 6%; right: 6%; top: 27px; height: 5px; border-radius: 999px; background: #d7e2e7; }
.journey-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: .45rem; padding: .45rem; border: 0; color: var(--ink); background: transparent; text-align: center; }
.journey-step > span:last-child { display: grid; }
.journey-step small { color: var(--muted); }
.bridge-stone { display: grid; place-items: center; width: 58px; height: 58px; border: 5px solid white; border-radius: 20px 24px 18px 23px; color: white; background: #78909c; box-shadow: 0 4px 12px rgba(16,50,74,.18); font-weight: 900; }
.journey-step.first .bridge-stone { background: var(--student-primary,var(--teal)); }
.journey-step.done .bridge-stone { background: #2c9b61; }
.unlocked-gold .journey-card { border: 3px solid #e1a62f; box-shadow: 0 10px 32px rgba(225,166,47,.2); }
.sparkle-celebration { margin-top: .8rem; padding: .9rem; border-radius: 17px; color: #694300; background: #fff2ba; text-align: center; font-weight: 900; animation: gentle-pop .45s ease both; }
.reward-calm .sparkle-celebration { animation: none; }
.reward-adventure .stone-meter { background: linear-gradient(100deg,#fff7d8,#fff); }
@keyframes gentle-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.mood-btn { min-height: 58px; padding: .3rem; border: 1px solid var(--line); border-radius: 13px; background: white; font-size: 1.35rem; }
.mood-btn:hover, .mood-btn.selected { border-color: var(--teal); background: var(--student-soft, var(--aqua)); }

.activity-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.activity-icon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--student-soft, var(--aqua)); font-size: 1.7rem; }
.activity-head h1 { margin-bottom: .25rem; }
.activity-head p { margin: 0; color: var(--muted); }
.activity-stage { padding: clamp(1rem,3vw,1.6rem); border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: var(--shadow); }
.instruction { padding: .85rem; border-left: 5px solid var(--student-primary, var(--teal)); border-radius: 0 14px 14px 0; background: var(--student-soft, var(--aqua)); }
.quiz-options { display: grid; gap: .6rem; margin: 1rem 0; }
.quiz-option { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem; border: 2px solid var(--line); border-radius: 15px; background: white; color: var(--ink); text-align: left; font-weight: 750; }
.quiz-option:hover { border-color: var(--teal); }
.quiz-option.correct { border-color: #2c9b61; background: #e8f8ef; }
.quiz-option.wrong { border-color: var(--coral); background: var(--coral-soft); }
.feedback { min-height: 28px; font-weight: 800; }
.feedback.good { color: #167247; }
.feedback.try { color: #a13b34; }
.task-complete { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.big-number { margin: 1rem 0; font-size: clamp(2rem, 8vw, 4rem); font-weight: 900; text-align: center; color: var(--navy); }
.answer-row { display: flex; justify-content: center; gap: .5rem; }
.answer-row input { max-width: 180px; font-size: 1.25rem; text-align: center; }
.typing-guide { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.typing-guide > span { padding: .48rem .7rem; border-radius: 999px; color: var(--navy); background: var(--student-soft, var(--aqua)); font-size: .86rem; font-weight: 750; }
.typing-mission-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .85rem; }
.typing-mission-head h2, .typing-mission-head p { margin: .15rem 0; }
.typing-mission-head p { color: var(--muted); }
.typing-best { padding: .55rem .7rem; border: 1px solid #e3bf58; border-radius: 14px; color: #76520c; background: #fff6d5; font-size: .82rem; font-weight: 850; }
.typing-keyboard { display: grid; gap: .28rem; max-width: 760px; margin: 0 auto 1rem; padding: .65rem; border: 1px solid var(--line); border-radius: 18px; background: #e9eff2; box-shadow: inset 0 2px 5px rgba(16,50,74,.08); }
.typing-keyboard > div { display: flex; justify-content: center; gap: .25rem; }
.typing-keyboard > div:nth-child(3) { padding-left: 1.4rem; }
.typing-keyboard > div:nth-child(4) { padding-left: 2.4rem; }
.typing-keyboard span { display: grid; place-items: center; min-width: 35px; height: 34px; padding: 0 .25rem; border: 1px solid #bdcbd2; border-bottom-width: 3px; border-radius: 8px; color: #27475b; background: white; font: 750 .78rem/1 system-ui,sans-serif; }
.typing-keyboard span.focus { border-color: var(--student-primary,var(--teal)); color: white; background: var(--student-primary,var(--teal)); box-shadow: 0 0 0 3px var(--student-soft,var(--aqua)); }
.typing-keyboard .typing-special-keys { margin-top: .15rem; padding-left: 0; }
.typing-keyboard .typing-special-keys span { min-width: 72px; font-size: .68rem; }
.typing-keyboard .typing-special-keys .space { min-width: 220px; }
.typing-target { min-height: 98px; padding: 1rem; border: 2px solid var(--line); border-radius: 18px; background: #f7fafb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(1.2rem,3vw,1.65rem); line-height: 1.75; letter-spacing: .025em; white-space: pre-wrap; }
.typing-target span { border-radius: 4px; }
.typing-target span.correct { color: #12613b; background: #dff5e9; }
.typing-target span.wrong { color: #9d2922; background: #ffe0dd; text-decoration: underline 2px; }
.typing-target span.current { box-shadow: inset 0 -3px var(--student-primary, var(--teal)); }
.typing-field { margin-top: 1rem; }
.typing-field textarea { min-height: 96px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.15rem; line-height: 1.6; }
.typing-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin: .85rem 0; }
.typing-stats > div { display: grid; justify-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 15px; background: white; }
.typing-stats strong { color: var(--student-primary, var(--teal)); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.typing-stats small { color: var(--muted); }
.typing-actions { justify-content: space-between; }
.breath-circle { display: grid; place-items: center; width: min(260px, 72vw); height: min(260px, 72vw); margin: 1.5rem auto; border-radius: 50%; color: white; background: var(--student-primary, var(--teal)); transition: transform 4s ease-in-out, background .4s; box-shadow: 0 15px 40px rgba(8,127,140,.25); }
.breath-circle.inhale { transform: scale(1.2); }
.breath-circle.exhale { transform: scale(.82); }
.breath-circle strong { font-size: 1.25rem; }
.timer-display { margin: 1rem 0; font-variant-numeric: tabular-nums; font-size: clamp(2.3rem, 10vw, 5rem); font-weight: 900; text-align: center; color: var(--navy); }
.movement-card { max-width: 560px; margin: 1rem auto; padding: 1.4rem; border-radius: 24px; background: linear-gradient(135deg, #fff3c9, #fff); border: 2px solid var(--yellow); text-align: center; }
.movement-card .emoji { font-size: 4rem; }
.custom-student-list { display: grid; gap: .8rem; }
.custom-student-item { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: white; }
.custom-student-item.done { border-color: #75c99a; background: #f2fbf6; }
.custom-student-item h3 { margin-bottom: .25rem; }
.custom-student-item p { color: var(--muted); }
.checkline { display: flex; align-items: center; gap: .6rem; font-weight: 800; }
.checkline input { width: 24px; height: 24px; accent-color: var(--teal); }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.data-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.site-wall { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.student-site-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.student-site-tile { position: relative; overflow: hidden; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: .8rem; align-items: center; min-height: 132px; padding: 1rem; border: 2px solid color-mix(in srgb, var(--tile, var(--teal)), transparent 72%); border-radius: 21px; color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--tile, var(--teal)), white 90%), white); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.student-site-tile::after { content: ""; position: absolute; right: -35px; bottom: -48px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--tile, var(--teal)), transparent 88%); }
.student-site-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--tile, var(--teal)), transparent 82%); }
.student-site-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: white; background: var(--tile, var(--teal)); font-size: 1.65rem; }
.student-site-copy { position: relative; z-index: 1; display: grid; gap: .12rem; }
.student-site-copy small { color: var(--tile, var(--teal-dark)); font-weight: 850; }
.student-site-copy strong { font-size: 1.08rem; }
.student-site-copy > span { color: var(--muted); font-size: .86rem; }
.open-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; background: var(--tile, var(--teal)); font-weight: 900; }
.shop-balance { flex: 0 0 auto; padding: .55rem .8rem; border-radius: 999px; background: #fff0c7; color: #704700; font-size: 1.1rem; }
.shop-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.shop-card { display: flex; flex-direction: column; min-height: 260px; padding: 1rem; border: 2px solid var(--line); border-radius: 21px; background: white; box-shadow: 0 8px 22px rgba(16,50,74,.06); }
.shop-card.owned { border-color: #d5a22e; background: #fffaf0; }
.shop-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .65rem; border-radius: 18px; background: #fff0c7; font-size: 1.7rem; }
.shop-card > small { color: var(--teal-dark); font-weight: 850; }
.shop-card h2 { margin: .25rem 0; font-size: 1.08rem; }
.shop-card p { color: var(--muted); font-size: .88rem; }
.shop-card-footer { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); }
.reward-price { margin-right: auto; color: #704700; font-weight: 900; }
.reward-ticket { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1.2rem; border: 3px dashed #d39b25; border-radius: 22px; background: #fff8da; }
.reward-ticket > span { font-size: 3rem; text-align: center; }
.reward-ticket small { color: #7b5000; font-weight: 900; letter-spacing: .1em; }
.reward-ticket h2, .reward-ticket p { margin: .15rem 0; }

/* Tungumálasmiðjan PRO */
.language-studio { padding-top: 1.4rem; padding-bottom: 3rem; }
.language-studio-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: center; padding: clamp(1.3rem,4vw,2.1rem); border-radius: 27px; color: white; background: linear-gradient(125deg,#10324a,#2876a8 58%,#693a83); box-shadow: var(--shadow); }
.language-studio-hero .eyebrow, .language-studio-hero p { color: rgba(255,255,255,.86); }
.language-studio-hero h1, .language-studio-hero p { margin-bottom: .35rem; }
.studio-score { display: grid; justify-items: center; min-width: 130px; padding: 1rem; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.13); }
.studio-score strong { font-size: 2.4rem; line-height: 1; }
.studio-score span { text-align: center; }
.language-group-target { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.55fr); gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid #bdd8e7; border-radius: 20px; background: #eef8ff; }
.language-group-target h2, .language-group-target p { margin-bottom: .2rem; }
.studio-section, .language-pack-form, .my-pack-library { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.language-pack-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.language-pack-card { --pack-color:#2876a8; overflow: hidden; padding: 1rem; border: 2px solid color-mix(in srgb,var(--pack-color),transparent 65%); border-top: 7px solid var(--pack-color); border-radius: 20px; background: linear-gradient(160deg,color-mix(in srgb,var(--pack-color),white 93%),white); }
.pack-gold { --pack-color:#a66b00; }.pack-green { --pack-color:#237a57; }.pack-orange { --pack-color:#b65716; }.pack-purple { --pack-color:#693a83; }.pack-navy { --pack-color:#10324a; }.pack-custom { --pack-color:#087f8c; }
.language-pack-head { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: .65rem; align-items: center; }
.language-pack-head > span:first-child { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: white; background: var(--pack-color); font-size: 1.4rem; }
.language-pack-head h2 { margin: .05rem 0 0; font-size: 1.08rem; }
.language-pack-head small { color: var(--pack-color); font-weight: 850; }
.word-total { color: var(--muted); font-size: .78rem; font-weight: 800; }
.pack-word-preview { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0; }
.pack-word-preview span, .selected-pack-chips span, .builder-word-list > span { padding: .32rem .55rem; border-radius: 999px; background: white; border: 1px solid var(--line); font-size: .8rem; font-weight: 750; }
.studio-custom-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1rem; align-items: start; }
.language-pack-form { display: grid; gap: .8rem; }
.language-pack-form h2 { margin-bottom: 0; }
.my-pack-library { display: grid; gap: .8rem; }
.selected-language-packs { padding: .8rem; border-radius: 17px; background: #eef8ff; }
.selected-pack-chips, .builder-word-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.builder-word-list { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid #bdd8e7; }
.builder-word-list button { min-height: 24px; margin-left: .35rem; padding: 0 .25rem; border: 0; border-radius: 50%; color: #a62d25; background: #fff0ed; font-weight: 900; }
.piper-studio { margin-top: 1rem; padding: 1rem; border: 2px solid #b9d5e4; border-radius: 23px; background: linear-gradient(145deg,#eef9ff,#fff); box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.piper-studio-head { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: .8rem; align-items: center; }
.piper-studio-head h2, .piper-studio-head p { margin-bottom: .2rem; }
.piper-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: white; background: linear-gradient(135deg,#087f8c,#693a83); font-size: 1.65rem; }
.piper-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin: 1rem 0; }
.piper-flow article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .6rem; align-items: start; padding: .8rem; border: 1px solid var(--line); border-radius: 17px; background: white; }
.piper-flow article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; background: #2876a8; font-weight: 900; }
.piper-flow h3, .piper-flow p { margin: 0 0 .35rem; }
.piper-flow p, .piper-device-row p { color: var(--muted); font-size: .86rem; }
.piper-device-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .8rem; padding: .8rem; border-radius: 16px; background: #e8f5f8; }
.piper-device-row p { margin: .2rem 0 0; }
.piper-settings { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.audio-guardian { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: .8rem; align-items: center; margin-top: 1rem; padding: .9rem; border: 2px solid #d7e2e7; border-radius: 19px; background: #f7fafb; }
.audio-guardian.ready { border-color: #82caa2; background: #f0fbf5; }
.audio-guardian.partial { border-color: #e2bd57; background: #fff9e8; }
.audio-guardian.missing { border-color: #e8b2ae; background: #fff5f4; }
.audio-guardian-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: white; background: #718b99; font-size: 1.35rem; font-weight: 950; }
.audio-guardian.ready .audio-guardian-mark { background: #26865a; }
.audio-guardian.partial .audio-guardian-mark { background: #b47b12; }
.audio-guardian-copy h3, .audio-guardian-copy p { margin: .12rem 0; }
.audio-guardian-copy p { color: var(--muted); font-size: .9rem; }
.audio-guardian-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.audio-guardian-facts span, .audio-missing-list span { padding: .25rem .48rem; border-radius: 999px; color: #355568; background: #fff; font-size: .72rem; font-weight: 800; }
.audio-missing-list { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .45rem; }
.audio-missing-list small { color: var(--muted); font-weight: 800; }
.audio-meter { overflow: hidden; height: 8px; margin-top: .55rem; border-radius: 999px; background: #dfe8ec; }
.audio-meter span { display: block; height: 100%; border-radius: inherit; background: #2c9b61; }
.offline-home { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.offline-home h2, .offline-home p { margin: .15rem 0; }
.offline-home p { color: var(--muted); }
.connection-pill { display: inline-flex; align-items: center; white-space: nowrap; padding: .32rem .52rem; border: 1px solid currentColor; border-radius: 999px; font-size: .7rem; font-weight: 900; }
.connection-pill.online { color: #1c6b49; background: #e8f8ef; }
.connection-pill.offline { color: #725311; background: #fff4cb; }

/* Myndorðabók, talstöð and sentence workshop */
.isat-mode-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin-bottom: 1rem; }
.isat-mode-nav button { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: .1rem .55rem; align-items: center; min-width: 0; padding: .7rem; border: 2px solid var(--line); border-radius: 17px; color: var(--ink); background: white; text-align: left; }
.isat-mode-nav button > span { grid-row: 1/3; font-size: 1.5rem; }
.isat-mode-nav button strong, .isat-mode-nav button small { min-width: 0; overflow-wrap: anywhere; }
.isat-mode-nav button small { color: var(--muted); }
.isat-mode-nav button.active { border-color: var(--student-primary,var(--teal)); background: var(--student-soft,var(--aqua)); }
.dictionary-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.dictionary-heading h2, .dictionary-heading p { margin-bottom: .2rem; }
.dictionary-heading p { color: var(--muted); }
.dictionary-score { display: grid; justify-items: center; min-width: 86px; padding: .65rem; border-radius: 16px; color: white; background: var(--student-primary,var(--teal)); }
.dictionary-score strong { font-size: 1.6rem; line-height: 1; }
.dictionary-search { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .45rem; align-items: center; margin: 1rem 0 .65rem; padding: 0 .75rem; border: 1.5px solid #b8cbd4; border-radius: 14px; background: white; }
.dictionary-search input { border: 0; box-shadow: none; }
.dictionary-filters { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .45rem; }
.dictionary-filters button { flex: 0 0 auto; min-height: 38px; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: white; font-weight: 750; }
.dictionary-filters button.active { color: white; background: var(--student-primary,var(--teal)); border-color: transparent; }
.dictionary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin-top: .4rem; }
.dictionary-card { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: .7rem; padding: .8rem; border: 2px solid var(--line); border-radius: 18px; background: #fbfdfe; }
.dictionary-card.known { border-color: #65b989; background: #effaf4; }
.dictionary-card.filtered-out, .dictionary-card.search-hidden { display: none; }
.dictionary-picture { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; background: var(--student-soft,var(--aqua)); font-size: 2rem; }
.dictionary-copy small { color: var(--student-primary,var(--teal)); font-weight: 850; }
.dictionary-copy h3 { margin: .05rem 0; font-size: 1.18rem; }
.dictionary-copy p { margin: .25rem 0 0; color: var(--muted); font-size: .86rem; }
.home-word { display: block; color: #693a83; }
.dictionary-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.speaking-studio { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; }
.speaking-card, .recording-panel, .sentence-frame-picker { padding: 1rem; border: 1px solid var(--line); border-radius: 21px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.speaking-card { text-align: center; }
.speaking-picture { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto .7rem; border-radius: 28px; background: var(--student-soft,var(--aqua)); font-size: 3.2rem; }
.speaking-card h2 { margin: .15rem 0; font-size: 2rem; }
.recording-panel ol { padding-left: 1.35rem; }
.recording-status { padding: .65rem; border-radius: 13px; color: var(--muted); background: var(--paper); }
.recording-panel audio { width: 100%; margin-top: .5rem; }
.voice-word-strip { grid-column: 1/-1; display: flex; gap: .45rem; overflow-x: auto; padding: .7rem; border-radius: 17px; background: white; }
.voice-word-strip button { flex: 0 0 auto; display: grid; justify-items: center; gap: .2rem; min-width: 85px; padding: .5rem; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; }
.voice-word-strip button.active { border-color: var(--student-primary,var(--teal)); background: var(--student-soft,var(--aqua)); }
.sentence-workshop { display: grid; gap: 1rem; }
.sentence-frame-picker > div, .sentence-word-bank { display: flex; flex-wrap: wrap; gap: .45rem; }
.sentence-frame-picker button, .sentence-word-bank button { min-height: 40px; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: white; font-weight: 750; }
.sentence-frame-picker button.active { color: white; border-color: transparent; background: #693a83; }
.sentence-word-bank { margin: .7rem 0; }
.sentence-word-bank button { background: var(--student-soft,var(--aqua)); }
.language-report-card { margin-top: 1rem; }
.language-report-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; }
.language-report-metrics article { display: grid; justify-items: center; padding: .8rem; border-radius: 16px; background: #eef8ff; text-align: center; }
.language-report-metrics article > span { font-size: 1.35rem; }
.language-report-metrics strong { font-size: 1.4rem; }
.language-report-metrics small { color: var(--muted); }
.report-game-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.report-game-list span { padding: .38rem .6rem; border-radius: 999px; background: #f1f5f7; color: var(--muted); font-size: .82rem; }

/* Orðaleikirnir PRO and Málframvindan */
.language-games, .language-progress { display: grid; gap: 1rem; }
.language-games-hero, .language-progress-hero { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem; border-radius: 21px; color: white; background: linear-gradient(125deg,#10324a,#693a83); }
.language-games-hero .eyebrow, .language-games-hero p, .language-progress-hero .eyebrow, .language-progress-hero p { color: rgba(255,255,255,.84); }
.language-games-hero h2, .language-games-hero p, .language-progress-hero h2, .language-progress-hero p { margin-bottom: .25rem; }
.language-games-hero > span { font-size: 3.5rem; }
.language-game-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.language-game-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: .15rem .7rem; align-items: center; padding: 1rem; border: 2px solid var(--line); border-radius: 20px; color: var(--ink); background: white; text-align: left; }
.language-game-card:hover { border-color: var(--student-primary,var(--teal)); transform: translateY(-2px); }
.language-game-card > span { grid-row: 1/3; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: var(--student-soft,var(--aqua)); font-size: 1.9rem; }
.language-game-card small { color: var(--muted); }
.language-game-card b { grid-column: 3; grid-row: 1/3; color: var(--student-primary,var(--teal)); }
.language-game-stage { display: grid; justify-items: center; gap: 1rem; padding: clamp(1rem,4vw,1.6rem); border: 1px solid var(--line); border-radius: 23px; background: white; }
.game-stage-head { width: 100%; display: flex; justify-content: space-between; gap: .7rem; align-items: center; color: var(--muted); font-weight: 800; }
.game-prompt { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.game-prompt h2 { margin: 0; }
.game-prompt-icon { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 30px; background: var(--student-soft,var(--aqua)); font-size: 4rem; }
.game-options { width: min(100%,720px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.game-option { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .6rem; place-items: center; min-height: 76px; padding: .75rem; border: 2px solid var(--line); border-radius: 18px; color: var(--ink); background: #fbfdfe; font-size: 1rem; }
.game-option > span { font-size: 2rem; }
.game-option.correct { border-color: #389a66; background: #e8f8ef; }
.game-feedback { width: min(100%,720px); padding: .75rem; border-radius: 15px; text-align: center; font-weight: 850; }
.game-feedback.good { color: #17633d; background: #e8f8ef; }
.game-feedback.try { color: #8a4b00; background: #fff4dc; }
.game-hint { color: var(--muted); }
.memory-grid { width: min(100%,720px); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.memory-card { display: grid; place-items: center; min-height: 112px; padding: .55rem; border: 2px solid #2876a8; border-radius: 18px; color: white; background: linear-gradient(145deg,#2876a8,#693a83); }
.memory-card > span { font-size: 2rem; font-weight: 900; }
.memory-card small { color: rgba(255,255,255,.82); }
.memory-card.open { color: var(--ink); background: white; }
.memory-card.open small { color: var(--muted); }
.memory-card.matched { border-color: #389a66; background: #e8f8ef; }
.progress-score { display: grid; justify-items: center; min-width: 105px; padding: .8rem; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: rgba(255,255,255,.13); }
.progress-score strong { font-size: 1.75rem; }
.language-progress-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.language-progress-grid article { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .85rem; border: 1px solid var(--line); border-radius: 18px; background: white; }
.language-progress-grid article > span { font-size: 1.55rem; }
.language-progress-grid small { display: block; color: var(--muted); }
.language-meter { height: 8px; margin-top: .4rem; overflow: hidden; border-radius: 999px; background: #dfe9ed; }
.language-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#087f8c,#45b67e); }
.practice-words { padding: 1rem; border-radius: 20px; background: #fff8e8; }
.practice-words h3 { margin: .1rem 0 .7rem; }
.practice-words > div:last-child { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
.practice-words button { display: grid; justify-items: center; gap: .2rem; padding: .65rem .35rem; border: 1px solid #ead7a6; border-radius: 15px; color: var(--ink); background: white; }
.practice-words button > span { font-size: 1.6rem; }
.practice-words small { color: var(--muted); }
.language-game-results { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.language-game-results article { display: grid; justify-items: center; gap: .15rem; padding: .7rem; border: 1px solid var(--line); border-radius: 16px; background: white; text-align: center; }
.language-game-results article > span { font-size: 1.45rem; }
.language-game-results small { color: var(--muted); }

/* Orð dagsins, Endurtekningarvélin and Heimabrúin */
.daily-word-home { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: .85rem; align-items: center; margin-top: 1rem; padding: .9rem 1rem; border: 2px solid #e5b540; border-radius: 22px; background: linear-gradient(135deg,#fff7d9,#fffdf6); box-shadow: 0 8px 24px rgba(166,107,0,.08); }
.daily-word-home.done { border-color: #65b989; background: #effaf4; }
.daily-word-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: white; font-size: 2.2rem; }
.daily-word-home h2, .daily-word-home p { margin: .05rem 0; }
.daily-word-home-actions { display: flex; gap: .5rem; align-items: center; }
.daily-language { display: grid; gap: 1rem; }
.daily-language-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 1.2rem; align-items: center; padding: clamp(1rem,4vw,1.6rem); border: 2px solid #e5b540; border-radius: 25px; background: linear-gradient(135deg,#fff8d8,#fff,#eef8ff); }
.daily-language-card.done { border-color: #65b989; }
.daily-sun { position: absolute; right: -28px; top: -35px; opacity: .12; font-size: 8rem; }
.daily-word-visual { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 32px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.1); font-size: 4rem; }
.daily-word-copy { min-width: 0; position: relative; z-index: 1; }
.daily-word-copy h1 { margin: .1rem 0; font-size: clamp(2.2rem,6vw,4rem); }
.daily-word-copy p { margin: .4rem 0 .8rem; color: var(--muted); }
.review-engine { display: grid; grid-template-columns: minmax(210px,.7fr) minmax(0,1.3fr); gap: 1rem; padding: 1rem; border: 1px solid #cbb8dc; border-radius: 22px; background: linear-gradient(135deg,#faf6fc,#fff); }
.review-engine h2, .review-engine p { margin-bottom: .3rem; }
.review-engine p { color: var(--muted); }
.review-queue { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .45rem; }
.review-queue > span { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .65rem .3rem; border: 1px solid #d8c7e5; border-radius: 15px; background: white; text-align: center; font-weight: 800; }
.review-queue b { position: absolute; top: .25rem; left: .35rem; color: #693a83; font-size: .72rem; }
.review-queue small { color: var(--muted); font-weight: 650; }
.review-engine-actions { grid-column: 1/-1; display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding-top: .7rem; border-top: 1px solid #d8c7e5; }
.review-engine-actions > span { color: #693a83; font-weight: 850; }
.home-bridge-preview { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: 1rem; border: 1px solid #b9d8e8; border-radius: 21px; background: #eef8ff; }
.home-bridge-preview > span { font-size: 2.3rem; text-align: center; }
.home-bridge-preview h2, .home-bridge-preview p { margin-bottom: .2rem; }
.home-bridge-preview p { color: var(--muted); }
.review-complete { display: grid; justify-items: center; gap: .45rem; padding: 2rem 1rem; border: 2px solid #65b989; border-radius: 24px; background: #effaf4; text-align: center; }
.review-complete > span:first-child { font-size: 4rem; }
.spoken-word { padding: .55rem .8rem; border-radius: 13px; background: var(--student-soft,var(--aqua)); font-size: 1.25rem; font-weight: 900; }
.home-bridge { display: grid; gap: 1rem; padding: 1rem; border: 2px solid #237a57; border-radius: 24px; background: white; }
.home-bridge-actions { display: flex; justify-content: space-between; gap: .6rem; }
.home-bridge > header { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 1rem; align-items: center; padding: 1rem; border-radius: 19px; color: white; background: linear-gradient(125deg,#10324a,#237a57); }
.home-bridge > header .eyebrow, .home-bridge > header p { color: rgba(255,255,255,.85); }
.home-bridge > header h1, .home-bridge > header p { margin-bottom: .2rem; }
.home-bridge-qr { display: grid; justify-items: center; gap: .2rem; padding: .45rem; border-radius: 14px; color: var(--ink); background: white; }
.home-bridge-qr svg { width: 90px; height: auto; }
.home-word-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.home-word-cards article { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: .55rem; align-items: center; padding: .75rem; border: 2px solid var(--line); border-radius: 17px; background: #fbfdfe; }
.home-word-cards article:first-child { grid-column: 1/-1; border-color: #e5b540; background: #fff9e8; }
.home-word-cards article.done { border-color: #65b989; background: #effaf4; }
.home-card-number { grid-column: 1/-1; color: #237a57; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.home-card-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: white; font-size: 1.8rem; }
.home-word-cards h2, .home-word-cards p { margin: .05rem 0; }
.home-word-cards p { color: var(--muted); font-size: .86rem; }
.home-word-cards label { grid-column: 1/-1; display: flex; gap: .45rem; align-items: center; padding-top: .45rem; border-top: 1px solid var(--line); font-weight: 800; }
.home-word-cards label input { width: 20px; height: 20px; accent-color: #237a57; }
.home-bridge > footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .8rem 1rem; border-radius: 16px; background: #eef8ff; }
.home-bridge > footer p { margin: .15rem 0 0; color: var(--muted); }
.home-bridge > footer > span { font-size: 1.8rem; }

/* Hópbrúin and weekly paths */
.teacher-groups, .group-week, .group-qr-sheet { padding-top: 1.4rem; padding-bottom: 3rem; }
.group-hero, .week-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: clamp(1.2rem,4vw,2rem); border-radius: 25px; color: white; background: linear-gradient(125deg,#10324a,#237a57); box-shadow: var(--shadow); }
.group-hero .eyebrow, .group-hero p, .week-heading .eyebrow, .week-heading p { color: rgba(255,255,255,.86); }
.group-hero h1, .group-hero p, .week-heading h1, .week-heading p { margin-bottom: .3rem; }
.group-count { flex: 0 0 auto; padding: .6rem .85rem; border-radius: 999px; background: rgba(255,255,255,.16); font-weight: 900; }
.week-heading > span { font-size: clamp(3rem,8vw,5rem); }
.groups-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.group-form-card, .group-list, .group-card { padding: 1rem; border: 1px solid var(--line); border-radius: 21px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.group-list { display: grid; gap: .8rem; }
.member-picker { display: grid; gap: .5rem; max-height: 430px; margin: 1rem 0; padding: .7rem; overflow: auto; border: 1px solid var(--line); border-radius: 16px; }
.member-picker legend { padding: 0 .35rem; font-weight: 850; }
.member-picker label { display: grid; grid-template-columns: 24px 40px minmax(0,1fr); gap: .55rem; align-items: center; padding: .55rem; border-radius: 13px; background: var(--paper); }
.member-picker input { width: 21px; height: 21px; accent-color: var(--teal); }
.member-picker label > span:last-child, .member-picker small { display: block; }
.member-picker small { color: var(--muted); }
.profile-avatar.mini { width: 40px; height: 40px; border-radius: 13px; font-size: 1rem; }
.group-card { box-shadow: none; }
.group-card-head { display: flex; justify-content: space-between; gap: .7rem; align-items: center; }
.group-card-head h3 { margin: .1rem 0 0; }
.group-card-head small { color: var(--teal-dark); font-weight: 850; }
.group-avatars { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.group-avatars > * { margin-left: -.45rem; border: 3px solid white; }
.more-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--muted); background: #e9f0f3; font-size: .78rem; font-weight: 900; }
.group-status { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0; }
.group-status span { padding: .32rem .55rem; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: .8rem; font-weight: 750; }
.group-template { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; align-items: end; margin-bottom: .8rem; padding: .75rem; border-radius: 15px; background: #f1f8f5; }
.week-editor-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .7rem; }
.week-editor-day { display: grid; gap: .45rem; padding: .75rem; border: 1px solid var(--line); border-top: 5px solid var(--teal); border-radius: 17px; background: white; }
.week-editor-day span, .week-editor-day small { display: block; }
.week-editor-day small { color: var(--muted); font-size: .78rem; }
.week-editor-day textarea { min-height: 190px; }
.week-apply { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid #d4b55a; border-radius: 18px; background: #fff9e6; }
.week-apply p { margin: .15rem 0 0; color: var(--muted); }
.qr-sheet-heading { margin-bottom: 1rem; text-align: center; }
.qr-sheet-heading h1 { margin-bottom: .2rem; }
.group-qr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.group-qr-card { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 1rem; align-items: center; padding: 1rem; border: 2px solid var(--navy); border-radius: 20px; background: white; break-inside: avoid; }
.group-qr-code { display: grid; place-items: center; min-height: 145px; overflow: hidden; }
.group-qr-code svg { width: 100%; height: auto; }
.group-qr-card h2, .group-qr-card p { margin-bottom: .25rem; }
.group-qr-card small { color: var(--teal-dark); font-weight: 850; }
.qr-sheet-foot { color: var(--muted); text-align: center; }

/* ÍSAT and multilingual support */
.isat-builder { margin-top: 1rem; padding: 1rem; border: 2px solid var(--line); border-radius: 21px; background: #f7f9fb; }
.isat-builder.enabled { border-color: #2876a8; background: linear-gradient(135deg,#eef8ff,#f6fcfa); }
.isat-controls { display: grid; gap: .85rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #bdd8e7; }
.language-support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.language-support { display: grid; grid-template-columns: 24px 40px minmax(0,1fr); gap: .55rem; align-items: start; padding: .7rem; border: 2px solid var(--line); border-radius: 15px; background: white; }
.language-support.selected { border-color: #2876a8; background: #eef8ff; }
.language-support input { width: 21px; height: 21px; accent-color: #2876a8; }
.language-support > span:nth-child(2) { font-size: 1.3rem; }
.language-support > span:last-child, .language-support small { display: block; }
.language-support small { color: var(--muted); }
.isat-reference { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .75rem; border-radius: 15px; background: #eaf4fa; }
.isat-reference > span { font-size: 1.4rem; text-align: center; }
.isat-reference p { margin: 0; }
.language-home-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 1px solid #b9d8e8; border-radius: 22px; background: linear-gradient(135deg,#eef8ff,#f5fbf7); box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.language-home-copy { min-width: 0; display: flex; gap: .8rem; align-items: center; }
.language-home-copy > div { min-width: 0; }
.language-home-card h2, .language-home-card p { margin-bottom: .1rem; }
.language-home-card p { color: var(--muted); }
.language-home-button { justify-self: end; white-space: nowrap; }
.language-globe { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #d7ecf8; font-size: 1.7rem; }
.language-path { grid-column: 1/-1; min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .65rem; border-top: 1px solid #c9e0ea; }
.language-path span { padding: .3rem .5rem; border-radius: 999px; background: white; color: var(--muted); font-size: .75rem; font-weight: 750; }
.visual-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; margin-bottom: 1rem; }
.visual-steps span { display: grid; justify-items: center; gap: .2rem; padding: .7rem; border-radius: 15px; background: var(--student-soft,var(--aqua)); }
.isat-section { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: white; }
.word-wall { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.word-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: .65rem; padding: .75rem; border: 2px solid var(--line); border-radius: 16px; background: #fbfdfe; }
.word-card.known { border-color: #65b989; background: #effaf4; }
.word-card > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--student-soft,var(--aqua)); font-size: 1.35rem; }
.word-card h3, .word-card p { margin-bottom: .15rem; }
.word-card p { color: var(--muted); font-size: .88rem; }
.word-card .button-row { grid-column: 2; }
.bilingual-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.bilingual-grid article { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: .5rem; align-items: center; padding: .7rem; border-radius: 15px; background: #eef8ff; }
.bilingual-grid article > span { color: var(--muted); }
.sentence-frame { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 1rem; padding: 1rem; border: 2px solid #d8c7e5; border-radius: 20px; background: #faf6fc; }
.sentence-frame > span { font-size: 2rem; text-align: center; }
.sentence-frame small { color: #693a83; font-weight: 900; letter-spacing: .08em; }

/* Student weekly path */
.student-week { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 8px 24px rgba(16,50,74,.07); }
.student-week-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .55rem; }
.student-week-day { padding: .6rem; border: 2px solid var(--line); border-radius: 15px; background: #f9fbfc; }
.student-week-day.today { border-color: var(--student-primary,var(--teal)); background: var(--student-soft,var(--aqua)); }
.student-week-day header { display: flex; justify-content: space-between; gap: .3rem; align-items: center; margin-bottom: .5rem; }
.student-week-day header small { color: var(--student-primary,var(--teal)); font-size: .66rem; font-weight: 900; }
.week-task-check { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: .4rem; align-items: start; margin-top: .4rem; padding: .45rem; border-radius: 10px; background: white; font-size: .82rem; }
.week-task-check input { width: 19px; height: 19px; accent-color: var(--student-primary,var(--teal)); }
.week-task-check.done span { color: var(--muted); text-decoration: line-through; }

.submission-builder { margin: 1.15rem 0; padding: 1.1rem; border: 2px solid #d8e4e9; border-radius: 24px; background: #f8fbfc; }
.submission-builder.enabled { border-color: #79c6b3; background: linear-gradient(145deg,#f0fbf7,#f8fbff); }
.submission-builder-body { display: grid; gap: 1rem; margin-top: 1rem; }
.submission-allow { max-width: 620px; }
.privacy-builder { padding: 1rem; border: 1px solid #cfdee4; border-radius: 18px; background: white; }
.privacy-builder h3, .privacy-builder p { margin: .12rem 0; }
.privacy-option-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: .8rem; }
.privacy-option { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: .55rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: 14px; background: #f8fafb; cursor: pointer; }
.privacy-option input { position: absolute; opacity: 0; pointer-events: none; }
.privacy-option > span:first-of-type { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #b8cbd3; border-radius: 9px; color: transparent; font-weight: 950; }
.privacy-option.selected { border-color: #68bca5; background: #effaf6; }
.privacy-option.selected > span:first-of-type { color: white; border-color: #278166; background: #278166; }
.privacy-option strong, .privacy-option small { display: block; }
.privacy-option small { margin-top: .1rem; color: var(--muted); }
.submit-pill { display: inline-flex; align-items: center; gap: .3rem; min-height: 42px; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.45); border-radius: 14px; color: #fff; background: rgba(255,255,255,.17); font: inherit; cursor: pointer; }
.submit-pill:hover { background: rgba(255,255,255,.27); }
.student-nav .submit-nav { color: #8a380d; background: #fff0e7; }
.student-nav .submit-nav.active { color: white; background: var(--coral); }
.submission-home { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: .85rem; align-items: center; margin: 1rem 0; padding: 1rem; border: 2px solid #efbd92; border-radius: 22px; background: linear-gradient(135deg,#fff8ed,#fff1e8); box-shadow: 0 10px 28px rgba(102,55,16,.07); }
.submission-home.ready { border-color: #68bca5; background: linear-gradient(135deg,#effaf6,#f5fff9); }
.submission-home-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: white; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(16,50,74,.09); }
.submission-home h2, .submission-home p { margin: .08rem 0; }
.submission-home p, .submission-home small { color: var(--muted); }
.submission-title { margin-bottom: 1rem; }
.submission-guardian { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: 1.15rem; border: 2px solid #e4b35f; border-radius: 23px; background: #fff9e8; box-shadow: var(--shadow); }
.submission-guardian.ready { border-color: #60b892; background: #effaf5; }
.submission-guardian.blocked { border-color: #e5a5a0; background: #fff3f2; }
.submission-guardian-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: white; background: #b77916; font-size: 1.45rem; font-weight: 950; }
.submission-guardian.ready .submission-guardian-mark { background: #23805d; }
.submission-guardian.blocked .submission-guardian-mark { background: #b34d43; }
.submission-guardian h2, .submission-guardian p { margin: .1rem 0; }
.submission-guardian p { color: var(--muted); }
.submission-guardian > strong { font-size: 1.45rem; }
.submission-meter { height: 9px; margin-top: .65rem; overflow: hidden; border-radius: 999px; background: rgba(16,50,74,.12); }
.submission-meter span { display: block; height: 100%; border-radius: inherit; background: #d89527; }
.submission-guardian.ready .submission-meter span { background: #23805d; }
.submission-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,.8fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.submission-form-card, .work-folder { padding: 1.15rem; border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: 0 10px 28px rgba(16,50,74,.07); }
.self-assessment { margin-top: 1rem; }
.self-assessment > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: .5rem; }
.self-choice { display: grid; justify-items: center; gap: .25rem; min-height: 104px; padding: .7rem; border: 2px solid #d5e0e5; border-radius: 17px; color: var(--ink); background: #f9fbfc; font: inherit; cursor: pointer; }
.self-choice span { font-size: 2rem; }
.self-choice.selected { border-color: var(--student-primary,var(--teal)); background: var(--student-soft,var(--aqua)); }
.help-request { margin-top: 1rem; }
.help-request > div { display: grid; max-height: 330px; gap: .45rem; margin-top: .55rem; overflow: auto; padding-right: .2rem; }
.help-item { display: grid; grid-template-columns: 22px 38px minmax(0,1fr); gap: .55rem; align-items: center; padding: .62rem; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfd; cursor: pointer; }
.help-item input { width: 20px; height: 20px; accent-color: var(--student-primary,var(--teal)); }
.help-item > span:nth-of-type(1) { font-size: 1.3rem; }
.help-item strong, .help-item small { display: block; }
.help-item small { color: var(--muted); }
.help-item.selected { border-color: #e1a14c; background: #fff8e9; }
.submission-privacy-preview { margin: 1rem 0; padding: .8rem; border-radius: 15px; background: #eff7fa; }
.submission-privacy-preview > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.submission-privacy-preview span { padding: .25rem .48rem; border-radius: 999px; color: #285566; background: white; font-size: .75rem; font-weight: 800; }
.submission-create { width: 100%; justify-content: center; margin-top: .8rem; min-height: 52px; }
.work-folder { position: sticky; top: 92px; }
.work-folder-head { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: .7rem; align-items: center; }
.work-folder-head h2, .work-folder-head p { margin: .08rem 0; }
.work-folder-head p { color: var(--muted); }
.work-folder-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff0c7; font-size: 1.6rem; }
.receipt-list { display: grid; gap: .7rem; margin: 1rem 0; }
.receipt-card { padding: .85rem; border: 1px solid #cfdae0; border-radius: 17px; background: #fbfcfd; }
.receipt-card.latest { border-color: #68bca5; background: #f2fbf7; }
.receipt-card-head { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: .55rem; align-items: center; }
.receipt-card-head > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: #278166; font-weight: 950; }
.receipt-card-head small, .receipt-card-head strong { display: block; }
.receipt-card-head small { color: var(--teal); font-size: .66rem; font-weight: 900; letter-spacing: .06em; }
.receipt-card > p, .receipt-note { color: var(--muted); }
.receipt-card > p { margin: .45rem 0; font-size: .85rem; }
.receipt-facts { display: flex; flex-wrap: wrap; gap: .35rem; }
.receipt-facts span { padding: .25rem .45rem; border-radius: 999px; background: white; font-size: .75rem; font-weight: 800; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 .35rem; }
.receipt-delete { width: 38px; height: 38px; margin-left: auto; }
.receipt-note { display: block; font-size: .72rem; }
.work-folder-info { margin-top: .75rem; font-size: .78rem; }
.teacher-submission-card { margin-bottom: 1rem; border: 2px solid #78c4ad; background: #f2fbf7; }
.teacher-submission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; margin: .8rem 0; }
.teacher-submission-grid article { padding: .7rem; border-radius: 14px; background: white; }
.teacher-submission-grid small, .teacher-submission-grid strong { display: block; }
.submission-teacher-note, .submission-help-list { margin-top: .7rem; padding: .8rem; border-radius: 14px; background: white; }
.submission-teacher-note p { margin: .3rem 0 0; white-space: pre-wrap; }
.submission-help-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.submission-help-list > strong { flex-basis: 100%; }
.submission-help-list span { padding: .3rem .5rem; border-radius: 999px; background: #fff3df; }

.theme-ocean { --student-primary: #087f8c; --student-soft: #d9f3f3; --student-bg: #f3fbfc; }
.theme-sun { --student-primary: #b65716; --student-soft: #fff0c7; --student-bg: #fffaf0; }
.theme-berry { --student-primary: #693a83; --student-soft: #efe2f6; --student-bg: #faf6fc; }
.theme-forest { --student-primary: #237a57; --student-soft: #dff4e9; --student-bg: #f5fbf7; }
.student-app.large-ui { font-size: 19px; }
.learning-bank-overview { margin: 1rem 0; padding: 1rem; border: 2px solid #b9d5e4; border-radius: 23px; background: linear-gradient(135deg,#eef9ff,#fff8e7); box-shadow: 0 10px 28px rgba(16,50,74,.07); }
.learning-bank-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.learning-bank-heading h2, .learning-bank-heading p { margin: .1rem 0; }
.learning-bank-heading p { color: var(--muted); }
.bank-total { display: grid; min-width: 116px; padding: .65rem .8rem; border-radius: 17px; color: white; background: var(--student-primary,var(--teal)); text-align: center; font-size: 1.5rem; font-weight: 950; }
.bank-total small { font-size: .68rem; font-weight: 750; }
.learning-bank-chips { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; margin-top: .9rem; }
.learning-bank-chips button { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .08rem .5rem; align-items: center; min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: white; text-align: left; }
.learning-bank-chips button > span { grid-row: 1/3; font-size: 1.35rem; }
.learning-bank-chips strong, .learning-bank-chips small { min-width: 0; overflow-wrap: anywhere; }
.learning-bank-chips small { color: var(--muted); }
.module-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.task-count-badge { display: inline-flex; align-items: center; padding: .28rem .55rem; border: 1px solid #b9d5e4; border-radius: 999px; color: #15516f; background: #eef9ff; font-size: .78rem; font-weight: 850; }
.task-bank-label { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: .8rem; padding: .55rem .7rem; border-radius: 14px; color: #15516f; background: #eef9ff; font-weight: 850; }
.focus-mission { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: .75rem; align-items: center; margin-bottom: 1rem; padding: .85rem; border: 1px solid #b9d5e4; border-radius: 18px; background: #fffdf7; }
.focus-mission > span, .calm-tool-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: var(--student-soft,var(--aqua)); font-size: 2rem; }
.focus-mission p { margin: .2rem 0 0; color: var(--muted); }
.calm-tool-icon { width: 96px; height: 96px; margin: 1.2rem auto; border-radius: 28px; font-size: 3rem; }

.student-app.large-ui button, .student-app.large-ui input, .student-app.large-ui select, .student-app.large-ui textarea { min-height: 52px; }
.student-app.calm * { animation: none !important; transition: none !important; }
.student-app.calm .welcome-card::after { display: none; }
.student-app.simple-copy .optional-copy { display: none; }
.student-app.hide-score .progress-orb { display: none; }

.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; max-width: min(380px, calc(100vw - 2rem)); padding: .75rem 1rem; border-radius: 14px; color: white; background: var(--navy); box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.noscript { padding: 2rem; text-align: center; }

@media (max-width: 960px) {
  .builder-layout { grid-template-columns: 1fr; }
  .step-nav { position: static; display: grid; grid-template-columns: repeat(6,1fr); gap: .35rem; overflow-x: auto; }
  .step-button { display: flex; justify-content: center; min-width: 74px; padding: .5rem; }
  .step-button span:last-child { display: none; }
  .privacy-note { grid-column: 1/-1; margin: .2rem; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-picker-grid { grid-template-columns: 1fr; }
  .planning-grid { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .student-layout { grid-template-columns: 1fr; padding-bottom: 90px; }
  .report-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .library-stats.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .groups-layout { grid-template-columns: 1fr; }
  .week-editor-grid, .student-week-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .language-pack-grid, .dictionary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-custom-layout { grid-template-columns: 1fr; }
  .isat-mode-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .piper-flow { grid-template-columns: 1fr; }
  .practice-words > div:last-child { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .learning-bank-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .submission-layout { grid-template-columns: 1fr; }
  .work-folder { position: static; }
  .privacy-option-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review-engine { grid-template-columns: 1fr; }
  .review-engine-actions { grid-column: 1; }
  .student-nav { position: fixed; left: .65rem; right: .65rem; bottom: .65rem; top: auto; z-index: 30; grid-auto-flow: column; grid-auto-columns: minmax(72px,1fr); overflow-x: auto; padding: .4rem; border-radius: 18px; }
  .student-nav button { min-width: 72px; display: grid; justify-items: center; gap: .1rem; padding: .35rem; font-size: .72rem; }
  .student-nav button span:first-child { font-size: 1.2rem; }
}

@media (max-width: 700px) {
  .app-header { padding: .65rem .8rem; }
  .brand-text { display: none; }
  .shell { padding: .7rem; }
  .panel { padding: 1rem; border-radius: 21px; }
  .field-grid, .toggle-grid, .settings-grid, .smart-controls, .reward-controls, .reward-picker-grid, .preset-grid, .student-site-grid, .shop-grid, .language-support-grid, .word-wall, .bilingual-grid, .group-qr-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .module-card { min-height: 148px; }
  .panel-head, .builder-footer { align-items: stretch; flex-direction: column; }
  .builder-footer .button-row:last-child { justify-content: flex-end; }
  .qr-wrap { grid-template-columns: 1fr; }
  .qr { max-width: 220px; }
  .mini-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .student-header { grid-template-columns: auto minmax(0,1fr) auto; padding: .6rem .7rem; }
  .student-brand > span:last-child { display: none; }
  .student-name { text-align: left; }
  .connection-pill { padding: .28rem .4rem; font-size: .62rem; }
  .submit-pill { min-height: 38px; padding: .4rem .5rem; }
  .submit-pill strong { display: none; }
  .student-layout { padding: .7rem; padding-bottom: 88px; }
  .welcome-card { grid-template-columns: 1fr; }
  .progress-orb { width: 82px; height: 82px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .stone-meter { grid-template-columns: 1fr auto; }
  .stone-meter .meter-track { grid-column: 1/-1; grid-row: 2; }
  .first-then { grid-template-columns: 1fr; }
  .first-then > span { transform: rotate(90deg); justify-self: center; }
  .choice-board-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bridge-path { grid-template-columns: 1fr; }
  .bridge-path::before { top: 8%; bottom: 8%; left: 28px; right: auto; width: 5px; height: auto; }
  .journey-step { grid-template-columns: 58px minmax(0,1fr); justify-items: start; text-align: left; }
  .journey-step > span:last-child { align-self: center; }
  .reward-ticket { grid-template-columns: 58px 1fr; }
  .reward-ticket .btn { grid-column: 1/-1; }
  .today-item { grid-template-columns: 40px minmax(0,1fr); }
  .today-item .status-badge { grid-column: 2; justify-self: start; }
  .audio-guardian { grid-template-columns: 48px minmax(0,1fr); }
  .audio-guardian > .btn { grid-column: 1/-1; width: 100%; }
  .offline-home, .typing-mission-head { align-items: stretch; flex-direction: column; }
  .typing-keyboard { overflow-x: auto; justify-content: start; }
  .typing-keyboard > div { min-width: 520px; }
  .typing-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .typing-actions .btn:last-child { grid-column: 1/-1; }
  .activity-head { align-items: center; }
  .activity-head h1 { font-size: 1.7rem; }
  .smart-builder-head { grid-template-columns: 46px minmax(0,1fr); }
  .smart-switch { grid-column: 1/-1; justify-self: start; }
  .site-picker-card { grid-template-columns: 48px minmax(0,1fr) 30px; }
  .site-picker-icon { width: 48px; height: 48px; }
  .link-box { flex-direction: column; }
  .header-actions .mode-chip { display: none; }
  .header-actions { max-width: calc(100vw - 76px); padding: .15rem; }
  .header-actions .btn { flex: 0 0 auto; }
  .library-hero, .library-toolbar, .report-actions { align-items: stretch; flex-direction: column; }
  .library-stats, .profile-library-grid, .report-grid { grid-template-columns: 1fr; }
  .library-stats.four { grid-template-columns: 1fr; }
  .group-hero, .week-heading, .week-apply { align-items: stretch; flex-direction: column; }
  .week-editor-grid, .student-week-grid { grid-template-columns: 1fr; }
  .group-template, .language-home-card { grid-template-columns: 1fr; }
  .group-qr-card { grid-template-columns: 120px minmax(0,1fr); }
  .language-path { order: 3; }
  .language-studio-hero, .language-group-target, .speaking-studio { grid-template-columns: 1fr; }
  .piper-studio-head { grid-template-columns: 56px minmax(0,1fr); }
  .piper-studio-head .mode-chip { grid-column: 2; justify-self: start; }
  .piper-device-row, .piper-settings, .language-games-hero, .language-progress-hero { align-items: stretch; flex-direction: column; }
  .studio-score { justify-self: start; }
  .language-pack-grid, .dictionary-grid, .language-report-metrics { grid-template-columns: 1fr; }
  .isat-mode-nav, .language-game-grid, .game-options, .language-progress-grid, .language-game-results { grid-template-columns: 1fr; }
  .memory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .practice-words > div:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .daily-word-home, .daily-language-card, .home-bridge-preview, .home-bridge > header { grid-template-columns: 1fr; }
  .daily-word-icon, .daily-word-visual { width: 82px; height: 82px; border-radius: 23px; font-size: 2.8rem; }
  .daily-word-home-actions, .review-engine-actions, .home-bridge-actions, .home-bridge > footer { align-items: stretch; flex-direction: column; }
  .review-queue { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-word-cards { grid-template-columns: 1fr; }
  .home-word-cards article:first-child { grid-column: 1; }
  .home-bridge-preview .btn, .language-home-button { width: 100%; justify-self: stretch; }
  .home-bridge-qr { width: 112px; justify-self: start; }
  .learning-bank-heading, .task-bank-label { align-items: stretch; flex-direction: column; }
  .bank-total { justify-self: start; }
  .learning-bank-chips { grid-template-columns: 1fr; }
  .privacy-option-grid, .self-assessment > div, .teacher-submission-grid { grid-template-columns: 1fr; }
  .submission-home, .submission-guardian { grid-template-columns: 52px minmax(0,1fr); }
  .submission-home .btn, .submission-guardian > strong { grid-column: 1/-1; }
  .submission-home .btn { width: 100%; }
  .submission-guardian > strong { justify-self: end; }
  .submission-guardian-mark, .submission-home-icon { width: 50px; height: 50px; border-radius: 15px; }
  .receipt-actions .btn { flex: 1 1 42%; }
  .dictionary-heading { align-items: flex-start; }
  .language-pack-head { grid-template-columns: 48px minmax(0,1fr); }
  .word-total { grid-column: 2; }
  .library-search { flex-basis: auto; }
  .report-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-card-actions .btn { flex: 1 1 42%; }
  .skill-report-list article { grid-template-columns: 42px minmax(0,1fr); }
  .skill-report-list .skill-badge { grid-column: 2; justify-self: start; }
}

@media (max-width: 440px) {
  .report-metrics { grid-template-columns: 1fr; }
  .report-heading { align-items: flex-start; }
  .report-avatar { width: 58px; height: 58px; font-size: 1.4rem; }
  .week-chart { gap: .22rem; }
}

@media print {
  .app-header, .step-nav, .student-nav, .student-header, .header-actions, .builder-footer, .button-row, .report-actions, .toast, .isat-mode-nav, .visual-steps, .home-bridge-actions, .receipt-actions, .submission-create { display: none !important; }
  body, .student-app { background: white !important; }
  .shell, .student-layout { width: 100%; display: block; padding: 0; }
  .panel, .card, .activity-stage { box-shadow: none; border-color: #aaa; }
  .welcome-card { color: black; background: white; border: 2px solid #222; }
  .welcome-card p { color: #333; }
  .teacher-report { padding: 0; }
  .report-heading { color: black; background: white; border: 2px solid #222; box-shadow: none; }
  .report-heading .eyebrow, .report-heading p { color: #333; }
  .report-card, .report-metrics article { break-inside: avoid; box-shadow: none; }
  .group-qr-sheet { padding: 0; }
  .group-qr-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8mm; }
  .group-qr-card { grid-template-columns: 42mm minmax(0,1fr); padding: 5mm; box-shadow: none; }
  .group-qr-code { min-height: 38mm; }
  .home-bridge { border: 0; padding: 0; }
  .home-word-cards article { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}