:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #e8eff3; --muted: #9fb1ba; --paper: #0e1519; --surface: #182228;
  --field: #10181d; --field-border: #3a474f;
  --primary: #2f9c97; --primary-dark: #7fd0c9; --line: #2a363d; --focus: #ffbf47;
  --learn: #e05b4b; --practice: #31a06c; --apply: #3d86c3;
  --soft: #202c32; --soft-0: #243137; --soft-2: #131d21; --soft-3: #26343b;
  --track: #2b3a41; --done-bg: #123129; --note-bg: #292414; --info-bg: #2b2613;
  --inverse: #dfe7ec; --on-inverse: #0f171c;
  --ok: #3fbd85;
  --shadow: 0 12px 34px rgba(0, 0, 0, .38); --shadow-lg: 0 14px 40px rgba(0, 0, 0, .42); --shadow-strong: 0 10px 24px rgba(0, 0, 0, .4);
  --selected-glow: 0 0 0 3px rgba(47, 156, 151, .28);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #172a35; --muted: #5c6d76; --paper: #f6f7f2; --surface: #fff;
  --field: #fff; --field-border: #9aa9ae;
  --primary: #176b68; --primary-dark: #0d4c4a; --line: #d6dedc; --focus: #ffbf47;
  --learn: #d94d3d; --practice: #23835b; --apply: #286c9e;
  --soft: #edf1ef; --soft-0: #e4ecea; --soft-2: #eef3f1; --soft-3: #eef1ef;
  --track: #dbe3df; --done-bg: #edf8f1; --note-bg: #fff9e9; --info-bg: #fff2c8;
  --inverse: #172a35; --on-inverse: #fff;
  --ok: #166347;
  --shadow: 0 12px 35px rgba(23, 42, 53, .06); --shadow-lg: 0 14px 38px rgba(23, 42, 53, .07); --shadow-strong: 0 8px 20px rgba(23, 42, 53, .1);
  --selected-glow: 0 0 0 3px rgba(23, 107, 104, .12);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.55; }
a { color: var(--primary-dark); }
button, input, select, textarea { font: inherit; }
button, .button { min-height: 44px; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; background: var(--surface); color: var(--ink); border: 1px solid var(--primary); border-radius: 10px; padding: .8rem; }
.skip-link:focus { top: 1rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100vw - 1180px)/2)); background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 900; letter-spacing: .04em; text-decoration: none; }
.brand-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.brand-name { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name strong { color: var(--ink); padding-right: .1em; }
.brand-name small { display: block; font: 600 .78rem/1.25 var(--font-ui); letter-spacing: .02em; color: var(--muted); margin-top: .1rem; overflow-wrap: anywhere; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--soft-0); color: var(--ink); font-weight: 850; cursor: pointer; }.theme-toggle:hover { border-color: var(--primary); color: var(--primary-dark); }.theme-toggle-icon { font-size: 1rem; line-height: 1; }
.page-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2.2rem 0 5rem; }
.site-footer { padding: 1.5rem; text-align: center; color: var(--muted); }
.eyebrow { font-weight: 850; font-size: .78rem; letter-spacing: .12em; color: var(--primary); }
h1 { font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1; max-width: 14ch; margin: .2em 0 .6em; letter-spacing: -.04em; }
h2, h3 { line-height: 1.2; }
.auth-card, .empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.25rem, 4vw, 2.5rem); max-width: 640px; box-shadow: var(--shadow-lg); }
.auth-card { margin: 6vh auto; }
.stack { display: grid; gap: .7rem; }
input, select, textarea { width: 100%; border: 1px solid var(--field-border); border-radius: 10px; padding: .75rem; background: var(--field); color: var(--ink); }
.button, button { border: 0; border-radius: 10px; padding: .65rem 1rem; cursor: pointer; font-weight: 750; }
.primary { background: var(--primary); color: #fff; }
.link-button { color: var(--primary-dark); background: transparent; text-decoration: underline; padding: 0; }
.inline-form { display: inline; }
.title-row, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--soft-0); color: var(--ink); }
.filter-bar, .compact-filters { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; padding: 1rem; margin: 1rem 0 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.filter-bar label { min-width: 150px; flex: 1; font-weight: 700; }
.card-grid, .task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.kiami-card, .task-card { --type-color: var(--learn); position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--area-color, var(--line)); border-radius: 16px; padding: 1.2rem; box-shadow: var(--shadow); overflow: hidden; }
.kiami-card::before, .card-detail::before, .print-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--type-color); }
.type-learn { --type-color: var(--learn); }.type-practice { --type-color: var(--practice); }.type-apply { --type-color: var(--apply); }
.card-codes, .card-flags { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.type-badge, .code-badge, .status-badge, .card-flags span { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .55rem; border-radius: 999px; background: var(--soft); font-size: .76rem; font-weight: 850; letter-spacing: .03em; }
.type-badge { color: #fff; background: var(--type-color); }
.area-label { color: var(--area-color, var(--primary)); font-weight: 850; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.kiami-card h3 { font-size: 1.35rem; margin: .4rem 0; }.kiami-card h3 a { color: var(--ink); text-decoration: none; }.kiami-card h3 a::after { content: ""; position: absolute; inset: 0; }
.card-flags { margin-top: 1rem; }.card-flags span { background: transparent; border: 1px solid var(--line); }
.card-detail, .print-card { --type-color: var(--learn); position: relative; max-width: 900px; background: var(--surface); border: 1px solid var(--line); border-left: 10px solid var(--area-color); border-radius: 18px; padding: clamp(1.2rem, 5vw, 3rem); }
.objective { background: var(--soft-2); border-radius: 12px; padding: 1rem 1.2rem; font-size: 1.2rem; }
.step-list { list-style: none; padding: 0; display: grid; gap: .7rem; }.step-list li { display: flex; gap: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; }.step-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--soft); font-size: 1.3rem; }.step-list small { display: block; color: var(--muted); }.step-list p { margin-bottom: 0; }
.mentor-note { margin-top: 2rem; border: 2px dashed #c59339; padding: 1rem; background: var(--note-bg); }.levels { display: flex; flex-wrap: wrap; gap: .8rem; padding: 1rem 0; }.paper-note { margin-top: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.field.wide { grid-column: 1/-1; }.field label { display: block; font-weight: 750; }.field small { color: var(--muted); }.form-section { margin: 2rem 0; }.step-form { margin: 1rem 0; border: 1px solid var(--line); border-radius: 12px; }.errorlist { color: #982519; }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 1.5rem; align-items: start; }.session-items { list-style: none; padding: 0; }.session-items > li, .catalog-list article, .list-panel article { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .65rem; }.session-items small, .catalog-list small { display: block; color: var(--muted); }.order { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--inverse); color: var(--on-inverse); font-weight: 850; }.item-actions, .catalog-list form { margin-left: auto; }.item-actions form { display: flex; gap: .3rem; }.balance-panel { padding: 1rem 1.2rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }.balance-warning { border-left: 4px solid #d49227; padding-left: .7rem; }.balance-ok { color: var(--ok); }.surprise-panel { margin: 1rem 0; background: var(--surface); border: 1px solid var(--line); padding: 1rem; border-radius: 12px; }.surprise-panel summary { cursor: pointer; font-weight: 800; }.catalog-list { max-height: 70vh; overflow: auto; }.list-panel article { justify-content: space-between; }.list-panel h2 { margin: .35rem 0 0; }.task-card.is-done { opacity: .75; }
.blueprint-picker { margin: 2rem 0 3rem; }.blueprint-legend { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }.legend-swatch { display: inline-block; flex: 0 0 auto; width: 44px; height: 32px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--apply) 55%, white), var(--apply)); border: 1px solid rgba(0,0,0,.16); border-bottom: 5px solid var(--primary); box-shadow: inset 0 0 0 3px rgba(0,0,0,.06); }.blueprint-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; }.blueprint-option { display: grid; gap: .8rem; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 1rem; }.blueprint-option.is-selected { border-color: var(--primary); box-shadow: var(--selected-glow); }.blueprint-option-heading { display: flex; justify-content: space-between; gap: 1rem; }.blueprint-option-heading h3 { margin: 0 0 .25rem; }.blueprint-option-heading p { margin: 0; color: var(--muted); font-size: .9rem; }.blueprint-option-heading > strong { white-space: nowrap; }.blueprint-preview, .session-plan-strip { display: flex; align-items: stretch; gap: .35rem; overflow-x: auto; padding: .25rem 0 .5rem; }.preview-slot { position: relative; flex: var(--slot-minutes) 1 0; min-width: 50px; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .28rem; padding: .45rem .3rem .6rem; color: #fff; text-align: center; text-decoration: none; background: linear-gradient(180deg, color-mix(in srgb, var(--type-color) 52%, white), var(--type-color)); border: 1px solid rgba(0,0,0,.16); border-radius: 10px; font-weight: 900; overflow: hidden; }.preview-slot::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: var(--area-color); }.preview-slot > span { position: relative; z-index: 1; }.preview-picto { display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.85); font-size: .95rem; }.preview-codes { display: grid; justify-items: center; gap: .22rem; }.preview-codes > span { display: inline-flex; align-items: center; min-height: 19px; padding: .12rem .32rem; border-radius: 999px; background: rgba(255,255,255,.34); font-size: .62rem; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }.preview-type, .preview-area-label { display: block; font-size: .6rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; opacity: .96; }.preview-type { font-weight: 900; }.preview-area-label { font-weight: 800; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }.chosen-plan { margin: 2rem 0; padding: 1.25rem; background: var(--soft-2); border-radius: 18px; }.session-plan-strip { min-height: 225px; }.plan-slot { position: relative; flex: var(--slot-minutes) 1 0; min-width: 135px; background: var(--surface); border: 2px solid var(--line); border-left: 8px solid var(--area-color); border-top: 9px solid var(--type-color); border-radius: 14px; overflow: hidden; }.plan-slot.is-active { outline: 4px solid var(--focus); outline-offset: 2px; }.plan-slot.is-filled { box-shadow: var(--shadow-strong); }.plan-slot > a { min-height: 100%; display: flex; flex-direction: column; gap: .55rem; padding: .9rem; color: var(--ink); text-decoration: none; }.slot-order { position: absolute; top: .5rem; right: .55rem; display: grid; place-items: center; width: 24px; height: 24px; background: var(--inverse); color: var(--on-inverse); border-radius: 50%; font-size: .72rem; font-weight: 900; }.task-pictogram { display: grid; place-items: center; width: 52px; min-width: 52px; height: 52px; border-radius: 13px; color: #fff; background: var(--type-color, var(--primary)); border: 4px solid var(--area-color, var(--line)); font-weight: 900; letter-spacing: -.03em; }.slot-empty { color: var(--primary-dark); font-weight: 800; }.slot-metadata { display: grid; gap: .25rem; margin-top: auto; color: var(--muted); font-size: .72rem; font-weight: 750; }.slot-metadata span { display: block; }.slot-metadata .type-chip { color: var(--type-color); }.slot-remove { position: absolute; top: .45rem; left: .45rem; }.slot-remove button { width: 30px; min-height: 30px; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); }.builder-choices { margin: 2rem 0; }.selected-slot-summary { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .7rem 1rem; align-items: center; background: var(--surface); border-left: 7px solid var(--area-color); border-top: 6px solid var(--type-color); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; }.selected-slot-summary .area-label { grid-column: 2; margin: 0; }.candidate-grid { display: grid; gap: .8rem; }.candidate-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 7px solid var(--area-color); border-top: 5px solid var(--type-color); border-radius: 14px; padding: 1rem; }.candidate-card h3 { margin: .25rem 0; }.candidate-card p { margin: .3rem 0 0; }.choice-prompt { margin: 0; text-align: center; }.choice-prompt .task-pictogram { margin: 0 auto; }.manual-catalog { margin-top: 2rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.manual-catalog > summary { cursor: pointer; font-weight: 850; }.catalog-list article { position: relative; border-left: 7px solid var(--area-color); border-top: 4px solid var(--type-color); }
.kiami-card > .task-pictogram, .card-detail .task-pictogram, .print-card .task-pictogram, .now-card > .task-pictogram, .control-card > .task-pictogram { margin-bottom: .75rem; }.session-items > li[style*="--type-color"] { border-left: 7px solid var(--area-color); border-top: 5px solid var(--type-color); }.history-items article[style*="--type-color"] { border-left: 8px solid var(--area-color); border-top: 6px solid var(--type-color); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; margin: 1rem 0 2rem; }.dashboard-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }.dashboard-card.accent, .now-card { border: 2px solid var(--primary); }.now-card { background: var(--surface); border-radius: 18px; padding: clamp(1.2rem, 4vw, 2rem); max-width: 820px; margin-bottom: 2rem; }.now-title { font-size: 1.6rem; font-weight: 850; }.achievement-mini { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.active-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .75fr); gap: 1.5rem; align-items: start; }.session-items .is-current { border: 3px solid var(--primary); }.session-items .status-done { background: var(--done-bg); }.control-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; }.control-card summary { cursor: pointer; font-weight: 850; }.live-control { position: sticky; top: 1rem; }.quick-actions { display: grid; grid-template-columns: 1fr auto; gap: .65rem; margin: 1.25rem 0; }.quick-actions .quick-main { min-height: 58px; font-size: 1.05rem; }.quick-actions .quick-secondary { min-height: 58px; background: var(--soft-3); }.assistance-control { padding-top: 1rem; border-top: 1px solid var(--line); }.assistance-control h3 { margin-bottom: .65rem; }.assistance-control h3 small { color: var(--muted); font-weight: 500; }.assistance-buttons { display: flex; flex-wrap: wrap; gap: .45rem; }.assistance-button { min-height: 38px; padding: .4rem .65rem; background: var(--soft); border: 2px solid transparent; font-size: .82rem; }.assistance-button.is-selected { color: #fff; background: var(--primary); border-color: var(--primary-dark); }.optional-record { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }.optional-record summary span { color: var(--muted); font-weight: 500; }.optional-record form { margin-top: 1rem; }
.participant-session { max-width: 880px; margin: 0 auto; }.participant-session > header { margin-bottom: 2rem; }.progress-track { width: 100%; height: 12px; overflow: hidden; background: var(--track); border-radius: 99px; }.progress-track span { display: block; height: 100%; background: var(--primary); }.objective-text { font-size: 1.15rem; }.today-list { list-style: none; padding: 0; display: grid; gap: .6rem; }.today-list li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .8rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }.today-list li > span { display: grid; place-items: center; border-radius: 50%; background: var(--soft); width: 34px; height: 34px; }.today-list .status-done { opacity: .7; }.today-list .status-done strong { text-decoration: line-through; }.today-list .is-current { border: 3px solid var(--primary); }
.progress-table { display: grid; gap: .8rem; }.progress-table article { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.progress-table h2 { margin: .25rem 0; }.level-block { min-width: 150px; display: grid; justify-items: end; gap: .5rem; }.level-block > strong, .level-orb { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--inverse); color: var(--on-inverse); font-size: 1.1rem; }.timeline { border-left: 3px solid var(--line); padding-left: 1rem; }.timeline article { margin: 1rem 0; }.timeline span { margin-left: 1rem; color: var(--muted); }.achievement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }.achievement-card { background: var(--surface); border: 1px solid var(--line); border-top: 7px solid #2f8a61; border-radius: 16px; padding: 1.3rem; }.achievement-card.level-n5 { border-top-color: #206d90; }.recommendation-list { display: grid; gap: .8rem; }.recommendation-list article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }.recommendation-list h2 { margin-top: 0; }.lead { max-width: 70ch; font-size: 1.15rem; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.history-items { display: grid; gap: 1rem; }.history-items article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr); gap: 1rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.history-items h2 { margin: .4rem 0; }.history-items dl { margin: 0; padding-left: 1rem; border-left: 1px solid var(--line); }.history-items dt { font-weight: 800; }.history-items dd { margin: 0 0 .7rem; }
.messages { width: min(1180px, calc(100% - 2rem)); margin: 1rem auto; }
.message, .alert { padding: .8rem 1rem; border-radius: 10px; background: var(--info-bg); }
@media (max-width: 820px) { .builder-layout, .active-layout { grid-template-columns: 1fr; }.catalog-list { max-height: none; }.session-plan-strip { min-height: 205px; }.plan-slot { min-width: 125px; } }
@media (max-width: 680px) { .site-header, .title-row { align-items: flex-start; flex-direction: column; } h1 { font-size: 2.5rem; }.form-grid, .progress-table article, .history-items article, .quick-actions { grid-template-columns: 1fr; }.field.wide { grid-column: auto; }.session-items > li { align-items: flex-start; flex-wrap: wrap; }.item-actions { margin-left: 52px; }.level-block { justify-items: start; }.history-items dl { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }.live-control { position: static; }.candidate-card { grid-template-columns: auto 1fr; }.candidate-card form { grid-column: 1/-1; }.candidate-card form .button { width: 100%; }.blueprint-option-heading { flex-direction: column; }.section-heading { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { :root { color-scheme: light; --ink: #000; --muted: #333; --paper: #fff; --surface: #fff; --field: #fff; --line: #bbb; --soft: #eee; --soft-0: #e4ecea; --soft-2: #f4f4f4; --soft-3: #eef1ef; --done-bg: #fff; --note-bg: #fff9e9; --info-bg: #fff2c8; } .no-print, .skip-link { display: none !important; } body { background: var(--surface); color: #000; } .objective-text, .objective, .print-card p, .print-card li, .card-codes, .area-label, .type-badge, .code-badge, .task-pictogram { color: #000 !important; } .type-badge, .code-badge, .task-pictogram, .area-label, .objective { border: 1px solid #000 !important; } .page-shell { width: 100%; padding: 0; }.print-card { box-shadow: none; border: 2px solid #222; border-left: 10px solid var(--area-color); max-width: none; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }.page-break { break-after: page; }.page-break:last-of-type { break-after: auto; } }