:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#17243b;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}.shell{max-width:960px;margin:auto;padding:24px 16px 70px}header{padding:25px 0}.eyebrow{letter-spacing:.14em;font-weight:800;color:#3459bd}h1{font-size:clamp(2rem,5vw,3rem);margin:10px 0}h2{margin-top:0}.panel{background:white;border:1px solid #e0e6ef;border-radius:18px;padding:24px;margin:20px 0;box-shadow:0 6px 24px #17243b0a}label{display:block;font-weight:650;margin:14px 0}input,select{display:block;width:100%;padding:12px;border:1px solid #b9c5d6;border-radius:9px;margin-top:6px;font:inherit}.drop{padding:18px;border:2px dashed #8ba1c6;border-radius:12px}.drop input{border:0;padding:8px 0}.muted{color:#617087}button{cursor:pointer;background:#244db4;color:white;border:0;border-radius:10px;padding:11px 16px;font-weight:700}button:focus-visible{outline:3px solid #e99e17;outline-offset:2px}button[aria-selected="false"]{background:#eaf0fc;color:#244b94}.toolbar{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}.toolbar [role=tablist]{display:flex;gap:6px;flex-wrap:wrap}.fact{border-bottom:1px solid #e1e7ee;padding:14px 0}.fact h3{margin:4px 0}.source{font-size:.8rem;color:#526277}.highlight{border-radius:4px;padding:0 3px}.important{background:#fff0a3}.definition{background:#d6ebff}.example{background:#d8f3df}.warning{background:#ffe0bb}.diagram{display:block;max-width:100%;margin:12px auto}.explain{margin-top:8px;background:#e8efff;color:#1e428e}.explanation{border-left:4px solid #8aa7ed;padding:10px;margin-top:8px}.uncertain{border-left:4px solid #e1a048;padding-left:10px}.print-only{display:none}@media(max-width:580px){.panel{padding:16px}.toolbar{display:block}.toolbar button{margin:4px 2px}}@media print{@page{size:A4;margin:16mm}body{background:white;color:black}.shell{max-width:none;padding:0}header,.panel:first-of-type,.toolbar{display:none!important}.panel{border:0;box-shadow:none;padding:0;margin:0}#results{display:block!important}.fact,.diagram,.explanation{break-inside:avoid}.print-only{display:block}button{display:none}.highlight{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.sessions-list{list-style:none;padding:0;margin:0}.session-item{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #e1e7ee;padding:16px 0}.session-item strong,.session-item .muted{display:block}.session-item .muted{margin-top:4px;font-size:.9rem}.session-actions{display:flex;gap:8px;flex-wrap:wrap}.session-actions .secondary{background:#eaf0fc;color:#244b94}.session-actions .danger{background:#a82727}.session-rename{display:flex;gap:8px;align-items:center}.session-rename input{min-width:150px;margin:0}@media(max-width:580px){.session-item{align-items:stretch;flex-direction:column}.session-actions,.session-rename{width:100%}.session-rename input{min-width:0}}@media print{#sessions-panel,#new-material{display:none!important}}
.session-expiry{display:block;margin-top:6px;color:#8b5700;font-weight:650}.session-expiry-urgent{color:#a82727}
.note-report-form{max-width:420px;margin-top:10px;padding:12px;border:1px solid #d7dfeb;border-radius:10px;background:#f8faff}.note-report-form textarea{display:block;width:100%;padding:10px;border:1px solid #b9c5d6;border-radius:9px;font:inherit;resize:vertical;margin-top:6px}.note-report-form button{margin-right:8px}.note-report-form[hidden]{display:none}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap}.secondary{background:#eaf0fc;color:#244b94}.text-button{background:transparent;color:#244b94;text-decoration:underline;padding:8px 0}.text-button:hover{color:#173475}@media print{#auth-panel,#sign-out{display:none!important}}
.photo-list{padding-left:24px}.photo-list li{padding:10px 0;border-bottom:1px solid #e1e7ee}.photo-list .photo-name{font-weight:650;overflow-wrap:anywhere}.photo-list .photo-detail{display:block;font-size:.9rem;color:#617087}.photo-list .photo-error{color:#a82727}.photo-list .photo-warning{color:#8b5700}.photo-list .photo-actions{display:inline-flex;gap:6px;margin:6px 0 0 8px}.photo-list .photo-actions button{padding:5px 9px;background:#eaf0fc;color:#244b94}button:disabled{cursor:not-allowed;opacity:.55}@media print{.photo-list{display:none!important}}
.session-item:has(.photo-resume){flex-wrap:wrap}.photo-resume{width:100%;padding:12px;border:1px solid #d5deeb;border-radius:10px}.photo-resume .photo-list button{margin-left:8px;padding:5px 9px;background:#eaf0fc;color:#244b94}.photo-resume>button{margin-right:8px}
.session-item:has(.session-progress){flex-wrap:wrap}.session-progress{flex-basis:100%;margin:0;padding:12px 12px 12px 32px;background:#f3f6fc;border-radius:10px}.session-progress li{margin:3px 0}
.sequence-warning:not(:empty){color:#8b5700;background:#fff5db;border-radius:8px;padding:8px 10px}
.diagram-interactive svg text{visibility:hidden}.diagram-interactive svg text.revealed{visibility:visible}.diagram-steps{padding-left:24px}.diagram-steps li{margin:8px 0}.diagram-step-detail{display:block;margin:6px 0 0 4px}.diagram-step-detail[hidden]{display:none}@media print{.diagram-interactive svg text{visibility:visible!important}.diagram-steps{display:none!important}}
.quiz-option{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #b9c5d6;border-radius:10px;font-weight:400}.quiz-option input{width:auto;margin:0;flex:none}.quiz-option-correct{border:2px solid #176237;background:#e2f4e9}.quiz-option-wrong{border:2px solid #a82727;background:#fce8e8}.quiz-feedback{margin:18px 0;padding:14px;border-radius:10px}.quiz-correct{background:#e2f4e9;border-left:5px solid #176237}.quiz-wrong{background:#fce8e8;border-left:5px solid #a82727}.quiz-nav,.quiz-review{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}#quiz-content progress{width:100%;height:18px}#quiz-content fieldset{border:0;padding:0;margin:16px 0}#quiz-content legend{font-weight:700;margin-bottom:10px}#quiz-content textarea{display:block;width:100%;padding:12px;border:1px solid #b9c5d6;border-radius:9px;font:inherit;resize:vertical;margin-top:8px}@media(max-width:580px){.quiz-option{align-items:flex-start;flex-wrap:wrap}.quiz-nav button,.quiz-review button{flex:1 1 auto}}@media print{#quiz-panel,#quiz-launch{display:none!important}}
.quiz-print-setup,.quiz-print-preview{border-top:1px solid #d7e0ec;margin-top:24px;padding-top:16px}.quiz-print-preview li{margin:8px 0}.quiz-print-preview button{margin:4px 8px 4px 0}@media(max-width:580px){.quiz-print-preview button{display:block;width:100%;margin:8px 0}}
.audio-transcript{line-height:1.7;border-left:4px solid #8aa7ed;padding:6px 16px;background:#f5f7fb}.audio-controls{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.audio-controls select{width:auto;min-width:100px;margin:0}.audio-controls button{flex:0 1 auto}@media(max-width:580px){.audio-controls button{flex:1 1 100%}}@media print{#audio-panel,#audio-launch{display:none!important}}
.audio-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.audio-settings label{margin:4px 0 14px}@media(max-width:580px){.audio-settings{grid-template-columns:1fr}}
.audio-seek{display:flex;flex-direction:column;gap:8px;max-width:560px}.audio-seek input[type="range"]{width:100%;margin:0;padding:0;accent-color:#0c615b}.audio-position{color:#526277;font-size:.92rem}
.admin-table{overflow-x:auto}
.admin-table table{border-collapse:collapse;width:100%;font-size:.86rem}
.admin-table th,.admin-table td{border-bottom:1px solid #d4dbe6;padding:.55rem;text-align:left;vertical-align:top}
.admin-table th{white-space:nowrap}
.price-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem;margin:1rem 0}
.price-fields>div{display:flex;align-items:center;gap:1rem;grid-column:1/-1}
.price-fields>div label{display:flex;align-items:center;gap:.3rem}
#material-scope{border:1px solid #b9c5d6;border-radius:12px;margin:18px 0;padding:10px 16px}
#material-scope legend{font-weight:700;padding:0 6px}
#material-scope label{display:flex;align-items:center;gap:10px;margin:10px 0}
#material-scope input[type="checkbox"]{display:inline-block;width:20px;height:20px;flex:none;margin:0;padding:0}
#material-scope input[type="checkbox"]:focus-visible{outline:3px solid #e99e17;outline-offset:2px}

/* Warstwa wizualna aplikacji. Układ pozostaje zgodny z istniejącymi widokami. */
:root {
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #183148;
  background: #f6f5f0;
  --ink: #183148;
  --muted: #5b6d78;
  --line: #dbe4df;
  --teal: #0d7169;
  --teal-dark: #095b55;
  --cream: #f6f5f0;
}
body {
  min-width: 320px;
  background: radial-gradient(circle at 12% 6%, #e8f2e8 0, transparent 28rem), var(--cream);
  line-height: 1.55;
}
[hidden] { display: none !important; }
.shell { max-width: 1120px; padding: 24px 24px 90px; }
.site-header { padding: 0; }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--teal); color: #fff7d5; font-size: 1.35rem; line-height: 1; }
.brand-caption { margin-left: auto; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 40px; align-items: center; overflow: hidden; min-height: 335px; padding: clamp(30px, 5vw, 62px); border-radius: 28px; color: white; background: linear-gradient(128deg, #123b4c 0%, #125f63 72%, #1e7970 100%); box-shadow: 0 24px 50px #123b4c20; }
.hero::before, .hero::after { content: ""; position: absolute; border: 1px solid #ffffff24; border-radius: 50%; pointer-events: none; }
.hero::before { width: 560px; height: 560px; right: -250px; top: -330px; }
.hero::after { width: 360px; height: 360px; right: -210px; bottom: -270px; }
.hero-copy, .hero-steps { position: relative; z-index: 1; }
.hero .eyebrow { margin: 0 0 14px; color: #bfe4d9; font-size: .75rem; letter-spacing: .16em; }
.hero h1 { max-width: 650px; margin: 0; font-size: clamp(2.5rem, 5.6vw, 4.45rem); line-height: 1.07; letter-spacing: -.055em; }
.hero h1 span { color: #f9d77b; }
.hero-lead { max-width: 545px; margin: 22px 0 0; color: #e3f2ef; font-size: clamp(1rem, 1.5vw, 1.16rem); }
.account-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; }
.account-line p { margin: 0; color: #c4e8df; font-size: .9rem; }
.account-line .secondary { padding: 7px 11px; border: 1px solid #ffffff80; background: #ffffff18; color: white; }
.hero-steps { display: grid; gap: 10px; }
.step-card { display: flex; align-items: center; gap: 15px; padding: 17px 18px; border: 1px solid #ffffff65; border-radius: 16px; background: #ffffffed; color: var(--ink); box-shadow: 0 12px 25px #092e3924; font-weight: 750; }
.step-card:nth-child(2) { transform: translateX(-14px); }
.step-card:nth-child(3) { transform: translateX(-28px); }
.step-number { color: var(--teal); font-size: .77rem; font-weight: 850; letter-spacing: .08em; }
.panel { margin: 24px 0; padding: clamp(22px, 3vw, 34px); border: 1px solid #e0e8e2; border-radius: 22px; background: #fff; box-shadow: 0 10px 35px #1831480a; }
.section-intro { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-kicker { margin: 0 0 5px; color: var(--teal); font-size: .73rem; font-weight: 850; letter-spacing: .14em; }
.section-intro h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.035em; line-height: 1.2; }
.section-description { margin: 8px 0 0; color: var(--muted); }
.section-symbol { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #e6f3ed; color: var(--teal); font-size: 1.5rem; line-height: 1; }
label { color: #284556; font-size: .95rem; font-weight: 700; }
input, select, textarea, .note-report-form textarea, #quiz-content textarea { border-color: #cbdad5; border-radius: 11px; background: #fff; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #82939c; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid #f7b845; outline-offset: 2px; }
button { min-height: 42px; border-radius: 11px; background: var(--teal); color: #fff; font: inherit; font-weight: 750; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
button:not(:disabled):hover { background: var(--teal-dark); box-shadow: 0 5px 14px #0d716924; transform: translateY(-1px); }
button:disabled { opacity: .55; }
.secondary, button[aria-selected="false"], .session-actions .secondary { background: #eaf4f0; color: #0c615b; }
.secondary:not(:disabled):hover, button[aria-selected="false"]:not(:disabled):hover, .session-actions .secondary:not(:disabled):hover { background: #d8ece5; }
.text-button { min-height: 0; background: transparent; color: var(--teal); }
.text-button:not(:disabled):hover { background: transparent; color: var(--teal-dark); box-shadow: none; }
.muted { color: var(--muted); }
#create-session-form { display: flex; align-items: end; gap: 12px; padding: 16px; border: 1px solid #dfece6; border-radius: 16px; background: #f4faf6; }
#create-session-form label { flex: 1; min-width: 0; margin: 0; }
#create-session-form button { flex: none; }
#sessions-status { margin: 20px 2px 14px; color: var(--muted); font-size: .9rem; }
.sessions-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.session-item { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 18px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fcfdfb; }
.session-item strong { margin-bottom: 8px; color: var(--ink); font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.session-item .muted { margin-top: 3px; font-size: .84rem; }
.session-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.session-actions button { min-height: 36px; padding: 8px 11px; font-size: .84rem; }
.session-actions .danger { background: #b13b3b; }
.session-actions .danger:not(:disabled):hover { background: #8f2525; }
.session-progress, .photo-resume { width: 100%; flex-basis: auto; border-radius: 12px; background: #f2f8f5; }
.material-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 12px; }
.material-fields label { min-width: 0; margin: 0; }
.material-fields input, .material-fields select { margin-top: 7px; }
#material-scope { margin: 25px 0; padding: 16px 20px; border-color: var(--line); border-radius: 15px; background: #fbfcfa; }
#material-scope legend { color: var(--ink); font-weight: 800; }
#material-scope label { font-weight: 600; }
#material-scope p { margin: 16px 0 0; font-size: .88rem; }
.drop { display: block; padding: 23px; border: 2px dashed #8bbeb1; border-radius: 15px; background: #f5faf7; text-align: center; }
.drop input { max-width: 420px; margin: 10px auto 0; }
#count { margin-bottom: 5px; }
#price-estimate { margin-top: 0; }
#generate { min-width: 210px; margin-top: 12px; }
.toolbar { gap: 14px; }
.toolbar [role="tablist"] { gap: 7px; }
.toolbar [role="tab"] { padding: 9px 13px; font-size: .9rem; }
.fact { border-bottom-color: var(--line); }
.explain { background: #eaf4f0; color: #0c615b; }
.audio-transcript { border-left-color: var(--teal); background: #f5faf7; }
.quiz-option { border-color: #cbdad5; }
.photo-list li { border-bottom-color: var(--line); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero-steps { grid-template-columns: repeat(3, 1fr); }
  .step-card, .step-card:nth-child(2), .step-card:nth-child(3) { display: grid; gap: 6px; transform: none; padding: 13px; font-size: .85rem; }
  .material-fields { grid-template-columns: 1fr 110px; }
  .material-title-field { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .shell { padding: 16px 14px 60px; }
  .brand { margin-bottom: 15px; }
  .brand-caption { display: none; }
  .hero { min-height: 0; padding: 28px 23px; border-radius: 21px; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3.3rem); }
  .hero-lead { margin-top: 16px; }
  .hero-steps { gap: 6px; }
  .step-card, .step-card:nth-child(2), .step-card:nth-child(3) { padding: 9px; font-size: .72rem; line-height: 1.3; }
  .panel { margin: 16px 0; padding: 20px 17px; border-radius: 18px; }
  .section-symbol { width: 36px; height: 36px; font-size: 1.2rem; }
  .section-description { font-size: .9rem; }
  #create-session-form { display: block; }
  #create-session-form button { width: 100%; margin-top: 12px; }
  .session-item { padding: 17px; }
  .session-actions { width: 100%; }
  .session-actions button { flex: 1 1 auto; }
  .material-fields { grid-template-columns: 1fr; }
  .material-title-field { grid-column: auto; }
  .drop { padding: 17px; }
  #generate { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:not(:disabled):hover { transform: none; }
}
@media print {
  body { background: white; }
  .site-header, #auth-panel, #sessions-panel, #new-material { display: none !important; }
  .shell { max-width: none; padding: 0; }
  .panel { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  #results { display: block !important; }
}

/* Poziomy klas korzystają z tych samych kontrolek i danych sesji. */
.material-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.material-fields .material-title-field { grid-column: 1 / -1; }
.grade-preview { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; min-height: 75px; padding: 12px 15px; border: 1px solid #cfe9d9; border-radius: 14px; background: #f0faf4; color: #205d48; }
.grade-preview-number { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: #d6efdf; font-size: 1.35rem; font-weight: 850; line-height: 1; }
.grade-preview strong, .grade-preview span span { display: block; }
.grade-preview span span { margin-top: 2px; font-size: .86rem; }
.grade-preview[data-grade-band="upper"] { border-color: #d8ddf2; background: #f3f5ff; color: #354d85; }
.grade-preview[data-grade-band="upper"] .grade-preview-number { background: #dfe5fa; }
.grade-preview[data-grade-band="primary_1_3"] { border-color: #eed8e6; background: #fff5fa; color: #734263; }
.grade-preview[data-grade-band="primary_1_3"] .grade-preview-number { background: #f8e0ee; }
.grade-preview[data-grade-band="secondary"] { border-color: #d5dcf1; background: #f2f5ff; color: #344777; }
.grade-preview[data-grade-band="secondary"] .grade-preview-number { background: #dfe6fa; }
.grade-preview[data-grade-band="university"] { border-color: #d8dfdb; background: #f4f7f5; color: #354e46; }
.grade-preview[data-grade-band="university"] .grade-preview-number { background: #e3ebe6; }
.grade-preview[data-grade-band="unspecified"] { border-color: #d9e1df; background: #f7f9f8; color: #536a70; }
.grade-preview[data-grade-band="unspecified"] .grade-preview-number { background: #e9eeee; }
.session-item[data-grade-band="middle"] { border-top: 4px solid #6fbd90; }
.session-item[data-grade-band="upper"] { border-top: 4px solid #8398d5; }
.session-item[data-grade-band="primary_1_3"] { border-top: 4px solid #d991ba; }
.session-item[data-grade-band="primary_4_8"] { border-top: 4px solid #6fbd90; }
.session-item[data-grade-band="secondary"] { border-top: 4px solid #728ac7; }
.session-item[data-grade-band="university"] { border-top: 4px solid #789788; }
.session-item[data-grade-band="unspecified"] { border-top: 4px solid #b4c2c5; }
.grade-badge { display: inline-block; width: fit-content; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; background: #e4f4e9; color: #245f43; font-size: .78rem; font-weight: 800; line-height: 1.25; }
[data-grade-band="upper"] .grade-badge { background: #e9edfb; color: #354d85; }
[data-grade-band="primary_1_3"] .grade-badge { background: #fceaf4; color: #754363; }
[data-grade-band="secondary"] .grade-badge { background: #e9edfb; color: #344777; }
[data-grade-band="university"] .grade-badge { background: #e5eee9; color: #354e46; }
[data-grade-band="unspecified"] .grade-badge { background: #edf1f1; color: #536a70; }
.result-grade-context { margin: 0 0 18px; color: var(--muted); font-size: .88rem; font-weight: 700; }
#results[data-grade-band="middle"], #quiz-panel[data-grade-band="middle"], #audio-panel[data-grade-band="middle"] { border-top: 5px solid #6fbd90; }
#results[data-grade-band="upper"], #quiz-panel[data-grade-band="upper"], #audio-panel[data-grade-band="upper"] { border-top: 5px solid #8398d5; }
#results[data-grade-band="primary_1_3"], #quiz-panel[data-grade-band="primary_1_3"], #audio-panel[data-grade-band="primary_1_3"] { border-top: 5px solid #d991ba; }
#results[data-grade-band="secondary"], #quiz-panel[data-grade-band="secondary"], #audio-panel[data-grade-band="secondary"] { border-top: 5px solid #728ac7; }
#results[data-grade-band="university"], #quiz-panel[data-grade-band="university"], #audio-panel[data-grade-band="university"] { border-top: 5px solid #789788; }
#results[data-grade-band="upper"] .toolbar button[aria-selected="true"] { background: #465fa2; }
@media (max-width: 580px) {
  .material-fields { grid-template-columns: 1fr; }
  .material-fields .material-title-field, .grade-preview { grid-column: auto; }
}
@media print {
  #results[data-grade-band] { border: 0; }
  .result-grade-context { color: black; overflow-wrap: anywhere; }
}
.levels-showcase { margin: 26px 0 34px; }
.levels-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.levels-heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.035em; line-height: 1.2; }
.levels-heading > p { max-width: 260px; margin: 0; color: var(--muted); font-size: .9rem; text-align: right; }
.level-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.level-card { position: relative; display: grid; gap: 6px; min-height: 150px; overflow: hidden; padding: 21px 24px; border: 1px solid; border-radius: 18px; }
.level-card::after { content: ""; position: absolute; width: 160px; height: 160px; top: -80px; right: -35px; border: 2px solid currentColor; border-radius: 50%; opacity: .1; pointer-events: none; }
.level-card-middle { border-color: #cfe7d8; background: #ecf7ef; color: #245f43; }
.level-card-upper { border-color: #d8ddf2; background: #eff2fc; color: #354d85; }
.level-card-index { font-size: .78rem; font-weight: 850; letter-spacing: .16em; }
.level-card strong { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.025em; }
.level-card > span:last-child { color: var(--ink); font-size: .9rem; }
@media (max-width: 580px) {
  .levels-showcase { margin: 22px 0; }
  .levels-heading { display: block; }
  .levels-heading > p { margin-top: 6px; text-align: left; }
  .level-cards { grid-template-columns: 1fr; gap: 10px; }
  .level-card { min-height: 130px; padding: 18px 20px; }
}
@media print { .levels-showcase { display: none !important; } }
.session-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.session-filter { min-height: 38px; padding: 7px 12px; border: 1px solid #d2dfd9; border-radius: 999px; background: #f4f8f5; color: #355b52; font-size: .84rem; }
.session-filter[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: white; }
.session-filter[aria-pressed="false"]:not(:disabled):hover { background: #e6f2eb; color: #245f43; }
.session-filter[aria-pressed="true"]:not(:disabled):hover { background: var(--teal-dark); }
@media print { .session-filters { display: none !important; } }
@media (max-width: 580px) { #create-session-form label + label { margin-top: 12px; } }



/* Personalised design tokens. These selectors are inert until the verified
   post-login profile explicitly sets data-education-theme on <html>. */
html[data-education-theme] {
  --edu-background: #f5f7fb;
  --edu-surface: #ffffff;
  --edu-primary: #244db4;
  --edu-primary-text: #ffffff;
  --edu-border: #d7e1ed;
  --edu-card-radius: 18px;
  --edu-card-shadow: 0 8px 24px #17243b12;
}
html[data-education-theme="primary_1_3"] {
  --edu-background: #fff3f9;
  --edu-surface: #fffaff;
  --edu-primary: #8746a7;
  --edu-border: #e8c8ef;
  --edu-card-radius: 28px;
  --edu-card-shadow: 0 10px 0 #ead5f6, 0 18px 30px #b075a01c;
}
html[data-education-theme="primary_4_8"] {
  --edu-background: #eaf4ff;
  --edu-surface: #ffffff;
  --edu-primary: #2462bb;
  --edu-border: #aac8e9;
  --edu-card-radius: 12px;
  --edu-card-shadow: 6px 7px 0 #bad1f2;
}
html[data-education-theme="secondary"] {
  --edu-background: #eaf0fb;
  --edu-surface: #ffffff;
  --edu-primary: #3638a3;
  --edu-border: #b7c3e6;
  --edu-card-radius: 16px;
  --edu-card-shadow: 0 10px 35px #1f2a681a;
}
html[data-education-theme="university"] {
  --edu-background: #f3f3ee;
  --edu-surface: #ffffff;
  --edu-primary: #315951;
  --edu-border: #cad7cf;
  --edu-card-radius: 10px;
  --edu-card-shadow: 0 4px 16px #293b3210;
}
html[data-education-theme] body { background:var(--edu-background); }
html[data-education-theme] .panel,
html[data-education-theme] .step-card,
html[data-education-theme] .level-card {
  background:var(--edu-surface);
  border-color:var(--edu-border);
  border-radius:var(--edu-card-radius);
  box-shadow:var(--edu-card-shadow);
}
html[data-education-theme] button:not(.secondary):not(.text-button):not(.danger) {
  background:var(--edu-primary);
  color:var(--edu-primary-text);
}
html[data-education-theme] button:focus-visible,
html[data-education-theme] input:focus-visible,
html[data-education-theme] select:focus-visible {
  outline:3px solid #edab37;
  outline-offset:3px;
}
html[data-education-theme="primary_1_3"] .brand-mark { color:#b34892; }
html[data-education-theme="primary_4_8"] .brand-mark { color:#328b55; }
html[data-education-theme="secondary"] .brand-mark { color:#4248b6; }
html[data-education-theme="university"] .brand-mark { color:#315951; }
html[data-education-theme="primary_1_3"] .hero {
  background:linear-gradient(130deg,#fff8ec,#ffe7f7 65%,#f3e9ff);
  border-radius:28px;
  padding:20px;
}
html[data-education-theme="primary_4_8"] .hero {
  background:linear-gradient(130deg,#e8f9f0,#dcecff 68%,#f7eeff);
  border:2px solid #aac8e9;
  border-radius:16px;
  padding:20px;
}
html[data-education-theme="secondary"] .hero {
  background:linear-gradient(130deg,#edf3ff,#e2e8fa 75%,#ece6ff);
  border-radius:16px;
  padding:20px;
}
html[data-education-theme="university"] .hero {
  border-bottom:2px solid #cedbd2;
  padding-bottom:18px;
}
@media (max-width:580px) {
  html[data-education-theme] .panel { box-shadow:0 3px 14px #17243b12; }
  html[data-education-theme] .hero { padding:14px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-education-theme] *, html[data-education-theme] *::before,
  html[data-education-theme] *::after {
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
}
@media print {
  html[data-education-theme] body { background:#fff!important; }
  html[data-education-theme] .panel { border:0;box-shadow:none!important; }
}



/* Visual experience v3: clear, restrained learning UI inspired by the
   project's separate "quiz" repository. All graphics and CSS are original.
   Authentication stays neutral; the four school-stage accents appear only
   after the server confirms a session and education profile. */

:root{
  --ui-ink:#152944;
  --ui-muted:#50647b;
  --ui-line:#d5e1ec;
  --ui-page:#f5f8fc;
  --ui-card:#ffffff;
  --ui-accent:#176ac0;
  --ui-soft:#edf5ff;
  --ui-radius:10px;
  --ui-shadow:2px 3px 0 #dfe8f2;
}
html{color-scheme:light}
body{background:var(--ui-page);color:var(--ui-ink);font-size:16px;line-height:1.58}
.shell{max-width:1090px;padding:24px 20px 72px}
h1,h2,h3{color:#173858;letter-spacing:-.025em}
h1{line-height:1.13}
p{overflow-wrap:break-word}
.skip-link{position:fixed;z-index:20;top:12px;left:12px;transform:translateY(-175%);padding:10px 15px;background:#153a62;color:#fff;border-radius:6px}
.skip-link:focus-visible{transform:none;outline:3px solid #e6aa32;outline-offset:2px}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid #e0a632;outline-offset:3px}
:where(button,a){-webkit-tap-highlight-color:transparent}
.site-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 20px;padding:12px 0 0}
.site-header .brand{display:flex;align-items:center;gap:11px;margin:0}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#176ac0;color:#fff;font-size:.9rem;font-weight:900;letter-spacing:-.03em;box-shadow:none}
.brand-caption{font-size:.83rem;color:var(--ui-muted)}
.site-header .header-account{margin:0;justify-content:flex-end}
.site-header .header-account p{margin:0;color:var(--ui-muted);font-size:.83rem}
.site-header .header-account .secondary{background:#edf4fc;color:#1f5789;border:1px solid #cad9e9;border-radius:7px}
.site-header .hero{grid-column:1/-1;margin:18px 0 0;min-height:0;padding:clamp(25px,4vw,42px);background:#eaf5ff;border:1px solid #cfdfef;border-bottom:4px solid #93bf80;border-radius:10px;box-shadow:none;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.site-header .hero::before,.site-header .hero::after{display:none}
.site-header .hero h1{font-size:clamp(2.05rem,4.5vw,3.5rem);color:#142d4c;line-height:1.12}
.site-header .hero h1 span{color:#176ac0}
.site-header .hero-lead{max-width:52ch;color:#34536e;font-size:1rem;line-height:1.7}
.site-header .eyebrow{font-size:.78rem;color:#24608e;letter-spacing:.11em}
.site-header .hero-steps{align-content:center;gap:9px}
.site-header .step-card,.site-header .step-card:nth-child(2),.site-header .step-card:nth-child(3){transform:none;border:1px solid #c6dbee;border-left:4px solid #7faa6b;background:#fff;padding:12px 14px;border-radius:6px;box-shadow:none;color:#244668}
.site-header .step-number{color:#176ac0;font-size:.76rem}

/* One neutral authentication design. No mascot, floating ornaments or themed
   artwork on login, signup or password recovery screens. */
#auth-panel.auth-panel{max-width:650px;margin:24px auto 34px;padding:0;overflow:hidden;border:1px solid var(--ui-line);border-top:4px solid #176ac0;border-radius:10px;background:#fff;box-shadow:var(--ui-shadow);color:var(--ui-ink)}
.auth-panel__layout{display:grid;grid-template-columns:minmax(0,1fr)}
.auth-panel__main{min-width:0;padding:clamp(24px,4vw,40px)}
.auth-panel__eyebrow{margin:0 0 8px;color:#176ac0;font-size:.77rem;font-weight:800;letter-spacing:.12em}
#auth-heading{margin:0;color:#152e4c;font-size:clamp(1.85rem,3.8vw,2.45rem);line-height:1.2}
.auth-panel__description{max-width:52ch;margin:12px 0 22px;color:var(--ui-muted);font-size:1rem;line-height:1.65}
.auth-panel__main label{margin:13px 0;color:#28455e;font-weight:700}
.auth-panel__main input,.auth-panel__main select{min-height:48px;background:#fff;color:#17334e;border:1.5px solid #bacbdc;border-radius:7px;padding:11px 13px}
.auth-panel__main #signup-education-field small{display:block;margin-top:9px;font-weight:400;line-height:1.5}
.auth-panel__main .auth-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.auth-panel__main .auth-actions button{min-height:49px;border:1px solid #155c9b;border-radius:7px;background:#176ac0;color:#fff;box-shadow:none;transform:none}
.auth-panel__main .auth-actions .secondary{border-color:#c9d9e8;background:#edf5ff;color:#1a5389}
.auth-panel__main .auth-actions button:hover{transform:none;box-shadow:none}
.auth-panel__main #forgot-password{margin:15px 0 0;color:#155a9c}
.auth-panel__main #auth-status:not(:empty){padding:11px 13px;margin-top:15px;background:#f0f6fc;border-radius:7px;color:#274c6c}

/* Quiz-inspired preview cards: quiet background, strong headings and a small
   accent stripe, not competing gradients or oversized rounded tiles. */
.levels-showcase{margin:25px 0 33px}
.levels-heading h2{font-size:clamp(1.4rem,3vw,1.85rem)}
.level-cards{gap:14px}
.level-card,.level-card--early,.level-card--gaming,.level-card--teen,.level-card--academy{min-height:135px;gap:6px;padding:19px 21px;border:1px solid #d6e1ed;border-top:4px solid var(--card-accent);border-radius:7px;background:#fff;color:#173858;box-shadow:var(--ui-shadow)}
.level-card::after{display:none}
.level-card--early{--card-accent:#338a77}
.level-card--gaming{--card-accent:#176ac0}
.level-card--teen{--card-accent:#6659a1}
.level-card--academy{--card-accent:#4b7266}
.level-card-index{font-size:.76rem;color:var(--card-accent);letter-spacing:.11em}
.level-card strong{font-size:1.26rem;line-height:1.3;color:#173858}
.level-card>span:last-child{font-size:.92rem;color:#50647b}

/* Small, unified stage variants. The user's stage changes the accent and
   density only; the educational controls retain identical placement. */
html[data-education-theme]{
  --theme-accent:#176ac0;
  --theme-accent-hover:#12589f;
  --theme-ink:#152944;
  --theme-muted:#50647b;
  --theme-border:#d0dfed;
  --theme-page:#f5f8fc;
  --theme-soft:#edf5ff;
  --theme-hub:#eaf5ff;
  --theme-hero:#eaf5ff;
  --theme-surface:#fff;
  --theme-radius:9px;
  --theme-shadow:var(--ui-shadow);
  --edu-primary:var(--theme-accent);
  --edu-border:var(--theme-border);
  --edu-background:var(--theme-page);
  --edu-card-radius:var(--theme-radius);
  --edu-card-shadow:var(--theme-shadow);
  --ink:var(--theme-ink);
  --muted:var(--theme-muted);
  --teal:var(--theme-accent);
  --teal-dark:var(--theme-accent-hover);
  --line:var(--theme-border);
}
html[data-education-theme="primary_1_3"]{
  --theme-accent:#246e60;
  --theme-accent-hover:#185447;
  --theme-border:#d0e3db;
  --theme-page:#f7faf9;
  --theme-soft:#edf7f2;
  --theme-hub:#edf8f3;
  --theme-hero:#edf8f3;
}
html[data-education-theme="primary_4_8"]{
  --theme-accent:#176ac0;
  --theme-accent-hover:#145395;
  --theme-border:#cbddec;
  --theme-page:#f3f8fd;
  --theme-soft:#edf5ff;
  --theme-hub:#eaf5ff;
  --theme-hero:#eaf5ff;
}
html[data-education-theme="secondary"]{
  --theme-accent:#575399;
  --theme-accent-hover:#403c7f;
  --theme-border:#ddddeb;
  --theme-page:#f7f8fc;
  --theme-soft:#f1f0fb;
  --theme-hub:#f2f3fc;
  --theme-hero:#f2f3fc;
}
html[data-education-theme="university"]{
  --theme-accent:#315d4d;
  --theme-accent-hover:#234537;
  --theme-border:#d5e1da;
  --theme-page:#f7f9f6;
  --theme-soft:#f0f5f1;
  --theme-hub:#f0f5f1;
  --theme-hero:#f0f5f1;
}
html[data-education-theme] body{background:var(--theme-page);color:var(--theme-ink)}
html[data-education-theme] .site-header .hero{display:none}
html[data-education-theme] .shell{max-width:1090px}
html[data-education-theme] :is(.panel:not(#auth-panel),.session-item,.step-card){border-radius:var(--theme-radius);border-color:var(--theme-border);background:#fff;box-shadow:var(--theme-shadow)}
html[data-education-theme] :is(.panel:not(#auth-panel),.session-item){border-top:3px solid var(--theme-accent)}
html[data-education-theme] .brand-mark{color:#fff;background:var(--theme-accent);box-shadow:none;font-size:.9rem}
html[data-education-theme="primary_1_3"] .brand-mark,
html[data-education-theme="primary_4_8"] .brand-mark,
html[data-education-theme="secondary"] .brand-mark,
html[data-education-theme="university"] .brand-mark{color:#fff;background:var(--theme-accent)}
html[data-education-theme] :is(.section-kicker,.section-symbol){color:var(--theme-accent)}
html[data-education-theme] .section-symbol{background:var(--theme-soft)}
html[data-education-theme] :is(.grade-preview,.drop,#material-scope,#create-session-form,.audio-transcript){background:var(--theme-soft);border-color:var(--theme-border);border-radius:var(--theme-radius)}
html[data-education-theme] :is(.session-item,.level-card)::after{display:none}
html[data-education-theme] :is(#new-material,#sessions-panel,#results,#quiz-panel,#audio-panel,#account-preferences) button:not(.secondary):not(.danger):not(.text-button){background:var(--theme-accent);color:#fff;border-radius:7px}
html[data-education-theme] :is(#new-material,#sessions-panel,#results,#quiz-panel,#audio-panel,#account-preferences) button:not(.secondary):not(.danger):not(.text-button):not(:disabled):hover{background:var(--theme-accent-hover)}
html[data-education-theme] .session-filter[aria-pressed="true"]{background:var(--theme-accent);color:#fff;border-color:var(--theme-accent)}
html[data-education-theme] :is(.quiz-option,.session-filter,.drop){border-radius:7px}
html[data-education-theme] .quiz-option:has(input:checked){border-color:var(--theme-accent)}
html[data-education-theme] .quiz-option-correct{border-color:#146345;background:#e8f5eb}
html[data-education-theme] .quiz-option-wrong{border-color:#b53b48;background:#fff0f0}

/* Post-login introduction: one readable banner and a compact three-step
   workflow; no giant emblems, fireworks, mascots, or decorative bubbles. */
.learner-hub[hidden],#auth-panel[hidden]{display:none!important}
.learner-hub{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(205px,.8fr);gap:30px;align-items:center;margin:23px 0 30px;min-height:0;padding:clamp(24px,4vw,36px);background:var(--theme-hub,#eaf5ff);color:var(--theme-ink,#152944);border:1px solid var(--theme-border,#d0dfed);border-bottom:4px solid var(--theme-accent,#176ac0);border-radius:10px;box-shadow:none}
.learner-hub__kicker{margin:0 0 9px;color:var(--theme-accent,#176ac0);font-size:.75rem;font-weight:850;letter-spacing:.11em}
.learner-hub h2{margin:0;max-width:24ch;color:#173858;font-size:clamp(1.75rem,3.8vw,2.8rem);line-height:1.18;letter-spacing:-.04em}
#learner-hub-description{max-width:58ch;margin:14px 0 0;color:#405b72;font-size:1rem;line-height:1.65}
.learner-hub__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.learner-hub__action{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:48px;padding:10px 17px;border:1px solid transparent;border-radius:7px;font-weight:750;text-decoration:none;transition:background .15s ease,box-shadow .15s ease}
.learner-hub__action--primary{background:var(--theme-accent,#176ac0);color:#fff}
.learner-hub__action--secondary{background:#fff;color:var(--theme-accent,#176ac0);border-color:var(--theme-border,#d0dfed)}
.learner-hub__action:hover{box-shadow:0 2px 7px #23476c17}
.learner-hub__action:focus-visible{outline:3px solid #e7ab36;outline-offset:3px}
.learner-hub__guide{padding:16px 17px;border:1px solid var(--theme-border,#d0dfed);border-radius:8px;background:#fff;min-width:0}
.guide-caption{display:block;margin-bottom:11px;font-size:.71rem;font-weight:850;letter-spacing:.12em;color:var(--theme-accent,#176ac0)}
.guide-step{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #eaf0f5;font-size:.9rem;font-weight:650;color:#34536e}
.guide-number{display:grid;place-items:center;flex:none;width:27px;height:27px;background:var(--theme-soft,#edf5ff);border-radius:4px;font:800 .78rem/1 system-ui;color:var(--theme-accent,#176ac0)}
/* A discreet 28 px grid nods to the established quiz app design. */
html[data-education-theme="primary_4_8"] .learner-hub{background-color:#eaf5ff;background-image:linear-gradient(#7eaed011 1px,transparent 1px),linear-gradient(90deg,#7eaed011 1px,transparent 1px);background-size:28px 28px}
html[data-education-theme="primary_4_8"] .guide-number{border-radius:2px;box-shadow:2px 2px 0 #ceddeb}
html[data-education-theme] .account-preferences{border-style:solid}
.site-header .header-account p{color:#466179}
.site-header .header-account .secondary{background:#edf5ff;color:#20578b;border:1px solid #cddfec}
.site-header .header-account .secondary:focus-visible{outline-offset:3px}

/* Practical use on phones. Large tap targets are retained without oversized
   typography or forcing a separate decorative column. */
@media(max-width:820px){
  .learner-hub{grid-template-columns:minmax(0,1fr);gap:19px}
  .learner-hub__guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .guide-caption{grid-column:1/-1;margin-bottom:0}
  .guide-step{align-items:flex-start;border-top:1px solid #e0eaf1;flex-direction:column}
  .site-header .hero{grid-template-columns:1fr}
}
@media(max-width:580px){
  .shell{padding:17px 15px 55px}
  .site-header{grid-template-columns:1fr;gap:8px}
  .site-header .header-account{justify-content:flex-start}
  .site-header .hero{padding:23px 19px}
  .site-header .hero h1{font-size:clamp(2rem,8.8vw,2.7rem)}
  #auth-panel.auth-panel{margin:18px auto 25px}
  .auth-panel__main{padding:24px 19px}
  .auth-panel__main .auth-actions{grid-template-columns:1fr}
  .levels-heading{display:block}
  .levels-heading>p{margin-top:8px;text-align:left}
  .level-cards{grid-template-columns:1fr;gap:11px}
  .level-card{min-height:0;padding:17px 18px}
  .learner-hub{grid-template-columns:1fr;gap:14px;margin:18px 0 23px;padding:23px 19px}
  .learner-hub h2{font-size:clamp(1.72rem,7.6vw,2.4rem)}
  .learner-hub__actions{flex-direction:column}
  .learner-hub__action{width:100%;justify-content:space-between}
  .learner-hub__guide{grid-template-columns:1fr;gap:0}
  .guide-caption{margin-bottom:7px}
  .guide-step{align-items:center;flex-direction:row}
  html[data-education-theme] .panel:not(#auth-panel){padding:20px 17px}
}
@media(prefers-reduced-motion:reduce){
  .learner-hub__action{transition:none}
}
@media print{
  .skip-link,.learner-hub,.levels-showcase,.header-account,#account-preferences{display:none!important}
  html[data-education-theme] body{background:#fff!important;color:#000!important}
  html[data-education-theme] .panel:not(#auth-panel){border:0!important;box-shadow:none!important}
}

button.level-card{color:var(--text,#172033);text-align:left;cursor:pointer;white-space:normal}button.level-card[aria-pressed="true"]{outline:3px solid var(--theme-accent,#3154a5);outline-offset:2px}button.level-card:focus-visible{outline:3px solid #3154a5;outline-offset:4px}

/* Public introduction and compact account entry. */
#landing-page[hidden],#sessions-panel[hidden]{display:none!important}
.shell{max-width:1160px}
.landing-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.85fr);gap:clamp(30px,5vw,72px);align-items:center;padding:48px 0 56px}
.landing-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#256756;margin:0 0 18px}
.landing-intro h1{font-size:clamp(2.5rem,4.6vw,3.65rem);line-height:1.1;letter-spacing:-.055em;color:#18352f;margin:0 0 24px}
.landing-intro h1 span{color:#46745f}
.landing-lead{font-size:1.08rem;line-height:1.8;color:#53645e;max-width:49ch;margin:0 0 22px}
.landing-link{display:inline-flex;align-items:center;gap:22px;color:#245b47;font-weight:750;text-underline-offset:6px}
.landing-audiences{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.landing-audiences span{padding:7px 10px;border:1px solid #dbe5de;border-radius:5px;background:#fff;color:#4a6054;font-size:.75rem;font-weight:650}
.landing-availability{font-size:.78rem;line-height:1.65;color:#60706a;max-width:56ch;margin:22px 0 0}
.landing-availability strong{display:block;color:#405a4d;font-weight:700}
#landing-page #auth-panel.auth-panel{width:100%;max-width:380px;margin:0;justify-self:end;border:1px solid #dce5df;border-top:3px solid #477961;border-radius:12px;box-shadow:0 15px 40px #244e3810}
#landing-page .auth-panel__main{padding:27px 26px}
#landing-page #auth-heading{font-size:1.55rem;letter-spacing:-.035em}
#landing-page .auth-panel__description{font-size:.86rem;line-height:1.6;margin-bottom:20px}
#landing-page #auth-form label{font-size:.82rem;margin:13px 0}
#landing-page #auth-form input{padding:10px 12px;font-size:.93rem}
#landing-page .auth-actions{grid-template-columns:1fr}
#landing-page .auth-actions button{min-height:43px;font-size:.86rem}
#landing-page .text-button{font-size:.8rem}
.landing-capabilities{padding:38px 0 42px;border-top:1px solid #dce5df}
.landing-section-heading{max-width:670px;margin-bottom:26px}
.landing-section-heading h2{font-size:clamp(1.6rem,2.8vw,2.05rem);letter-spacing:-.04em;color:#203c32;line-height:1.2;margin-bottom:10px}
.landing-section-heading>p:last-child{font-size:.92rem;line-height:1.6;color:#64736b}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.capability-grid article{display:flex;flex-direction:column;background:#fff;border:1px solid #dce5df;border-radius:10px;padding:25px;min-width:0}
.capability-number{font-size:.67rem;letter-spacing:.12em;font-weight:800;color:#547563;margin-bottom:22px}
.capability-grid h3{font-size:1.15rem;line-height:1.4;letter-spacing:-.02em;color:#213e32;margin:0 0 12px}
.capability-grid p{font-size:.9rem;line-height:1.75;color:#5a6b61;margin:0 0 24px}
.capability-detail{margin-top:auto;padding-top:14px;border-top:1px solid #e5ebe6;font-size:.73rem;line-height:1.6;color:#42624d}
.landing-bottom{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#edf3ee;border:1px solid #dce6dd;border-radius:10px;padding:27px 30px}
.landing-bottom strong{font-size:1.2rem;color:#264735}
.landing-bottom p{max-width:65ch;font-size:.9rem;line-height:1.7;color:#576c5e;margin:8px 0 0}
.landing-bottom a{flex-shrink:0;background:#315d4d;font-size:.86rem}
.landing-footer{display:flex;justify-content:space-between;gap:20px;padding:28px 0 0;color:#69796d;font-size:.75rem}
@media(max-width:820px){.landing-grid{grid-template-columns:1fr;gap:30px;padding:24px 0 36px}.landing-intro{max-width:650px}#landing-page #auth-panel.auth-panel{justify-self:start;max-width:440px}.capability-grid{grid-template-columns:1fr}.landing-bottom{align-items:flex-start;flex-direction:column}.landing-footer{flex-direction:column;gap:8px}}
@media(max-width:480px){.landing-intro h1{font-size:2.45rem}.landing-lead{font-size:1rem}#landing-page .auth-panel__main{padding:23px 20px}.landing-bottom{padding:23px}.capability-grid article{padding:23px}}
@media print{#landing-page{display:none!important}}

.process-graphic{margin:0 0 42px;padding:30px;background:#edf4ef;border:1px solid #d4e4d9;border-radius:14px}
.process-graphic figcaption{font-size:1.2rem;font-weight:750;color:#274a38;margin-bottom:24px}
.process-graphic ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.process-graphic li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#244b3d}
.process-graphic li:not(:last-child)::after{content:'→';position:absolute;right:-20px;top:25px;font-size:1.4rem;color:#709481}
.process-icon{display:grid;place-items:center;background:#fff;border:1px solid #d6e4da;border-radius:15px;width:82px;height:82px;margin-bottom:6px}
.process-icon svg{width:57px;height:57px}.process-graphic strong{font-size:.86rem}.process-graphic li>span{font-size:.75rem;color:#5f7567;line-height:1.5}.process-graphic>p{font-size:.76rem;color:#5f7567;margin:22px 0 0}
.wizard-step{min-width:0;border:1px solid #dbe4e9;border-radius:10px;padding:20px;margin:20px 0;background:#fbfcfd}
.wizard-step legend{font-size:1.05rem;font-weight:750;padding:0 8px;color:#294b62}.wizard-step legend>span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e3edf5;color:#255776;margin-right:7px}
.wizard-step>p{font-size:.9rem;color:#536678;line-height:1.6}
.photo-sources{display:grid;grid-template-columns:1fr 1fr;gap:14px}.photo-source{min-width:0;padding:20px;border:2px dashed #b3c9d8;border-radius:9px;background:#fff;color:#284f6d;font-size:.95rem}.photo-source input{max-width:100%;padding:10px 0;border:0;font-size:.8rem}.photo-source--camera{border-style:solid;background:#edf4f8}
.package-progress{padding:17px 17px 17px 35px;background:#eef5ef;border-radius:8px;line-height:1.8}
@media(max-width:700px){.process-graphic{padding:23px}.process-graphic ol{grid-template-columns:1fr;gap:23px}.process-graphic li{display:grid;grid-template-columns:62px 1fr;text-align:left;gap:4px 15px}.process-icon{grid-row:1/3;width:62px;height:62px;margin:0}.process-icon svg{width:45px;height:45px}.process-graphic li:not(:last-child)::after{content:'↓';left:24px;right:auto;top:auto;bottom:-25px;font-size:1rem}.photo-sources{grid-template-columns:1fr}.wizard-step{padding:14px}.wizard-step legend{font-size:.95rem}}

.photo-thumbnail{width:96px;height:96px;object-fit:contain;border-radius:8px;background:#f6f7f9}.photo-editor{width:min(680px,94vw);max-height:90dvh;overflow:auto;border:1px solid #d7e1e4;border-radius:16px;padding:20px}.photo-editor::backdrop{background:#182f3c99}.photo-editor canvas{display:block;max-width:100%;max-height:45dvh;width:auto;height:auto;margin:12px auto}.photo-editor-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.photo-editor-controls input[type=number]{width:100%;box-sizing:border-box}.photo-editor-controls label{display:flex;flex-direction:column;gap:4px}.photo-editor>button{margin:8px 8px 0 0}@media(max-width:460px){.photo-editor{padding:12px}.photo-editor-controls{grid-template-columns:1fr}}