@charset "UTF-8";
:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","Microsoft JhengHei",sans-serif;color:#273b33;background:#e6e9e3;font-synthesis:none;font-size:16px;--green:#335b4b;--deep:#294d3d;--muted:#69756d;--paper:#f8f7f2;--line:#e1e3da;--pale:#edf3e9;--rail:#eeefeb}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:disabled{cursor:default;opacity:.48}button:focus-visible,input:focus-visible{outline:3px solid #bc6a27;outline-offset:4px}h1,h2,p{margin:0}h1,h2{font-weight:650;letter-spacing:-.025em}h1:focus,h2:focus{outline:none}h1{font-size:30px;line-height:1.4}h2{font-size:24px;line-height:1.45}.icon{height:22px;width:22px;flex-shrink:0;vertical-align:middle}.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}
.app-shell{height:100vh;height:100dvh;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;background:var(--paper);box-shadow:0 0 90px #253a2910;overflow:hidden}.app-header{background:var(--green);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 30px;min-height:80px;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;letter-spacing:.015em}.brand small{display:block;font-size:11px;letter-spacing:.08em;font-weight:400;margin-top:3px;color:#d8e2d7}.brand-symbol{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff4a;border-radius:13px}.brand-symbol .icon{color:#e3eacb;width:26px;height:26px}.prototype-badge{font-size:11px;line-height:1.4;letter-spacing:.035em;border:1px solid #ffffff39;border-radius:30px;padding:6px 10px;color:#e8eee3;text-align:center}.page-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.13em;line-height:1.5}.eyebrow .icon{height:18px;width:18px}.muted{color:var(--muted);font-size:15px;line-height:1.75;margin-top:8px}.primary-button{border:0;border-radius:12px;background:var(--green);color:#fff;min-height:54px;padding:14px 22px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:600;font-size:16px;line-height:1.45}.primary-button:not(:disabled):hover{background:var(--deep)}.primary-button:not(:disabled):active{transform:translateY(1px)}.full-width{width:100%}.back-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:none;padding:8px 0;color:var(--green);font-weight:550;font-size:14px;margin-bottom:22px}.text-button{border:0;background:none;min-height:44px;padding:8px 12px;color:var(--green);text-decoration:underline;text-underline-offset:4px;font-size:14px}.text-button:hover{background:#e9eee4;border-radius:8px}.danger{color:#8b5141}.icon-button{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;background:none;border-radius:8px;color:#727c73}.icon-button:hover{background:#edece5}
/* A quiet welcome: names are the primary action. */
.welcome-inner{max-width:650px;margin:0 auto;padding:48px 30px 30px;text-align:center}.welcome .eyebrow{justify-content:center}.welcome h1{font-size:clamp(38px,5vw,52px);line-height:1.35;letter-spacing:.03em;margin:20px 0 22px;color:var(--green)}.welcome-intro h2{font-size:20px;font-weight:550;letter-spacing:0}.welcome-intro p{font-size:14px;color:var(--muted);margin-top:6px}.caregiver-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px;margin:30px 0}.caregiver-bubble{background:#f0eee3;border:1px solid #e1e1d4;min-height:124px;border-radius:48%;padding:16px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:20px;font-weight:600;transition:background .15s,transform .15s}.caregiver-bubble:hover{background:#e2e9d9;transform:translateY(-3px);border-color:#94a98f}.caregiver-bubble.tone-1{background:#eaf0e5}.caregiver-bubble.tone-2{background:#efeadf}.caregiver-initial{font-size:15px;border-bottom:1px solid #8f9c8445;padding-bottom:7px;min-width:28px;color:#728168;font-weight:400}.caregiver-bubble small{font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--muted);margin-top:-3px}.caregiver-bubble:last-child{grid-column:4;grid-row:1 / 3;align-self:center;min-height:148px;background:#dae7d6;border-color:#c1d2bb}.welcome-foot{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:30px}.welcome-foot>span{display:flex;align-items:center;gap:6px}.welcome-foot .icon{height:16px;width:16px}
/* Restaurant-style ordering workspace: independently scrolling rail and menu. */
.session-toolbar{padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:#fcfcf8;flex-shrink:0}.session-toolbar h1{font-size:23px}.session-toolbar p{font-size:13px;color:var(--muted);margin-top:4px}.caregiver-chip{display:flex;align-items:center;gap:8px;background:white;border:1px solid #d6ddcf;border-radius:30px;padding:10px 14px;min-height:46px;flex-shrink:0;font-size:14px}.caregiver-chip small{color:var(--muted);font-size:11px;margin-left:5px}.caregiver-chip .icon{width:18px;height:18px}.menu-workspace{display:flex;flex:1;min-height:0}.category-rail{flex:0 0 180px;overflow-y:auto;background:var(--rail);padding:18px 0;overscroll-behavior:contain;border-right:1px solid #e1e3dc;scrollbar-width:thin}.rail-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#798079;display:block;padding:0 24px 16px}.category-button{border:0;border-left:4px solid transparent;background:transparent;min-height:66px;width:100%;display:flex;align-items:center;gap:12px;padding:14px 17px;text-align:left;color:#646e64;font-size:14px;line-height:1.5;position:relative}.category-button>.icon{width:20px;height:20px}.category-button>span:not(.category-count){flex:1}.category-button:hover{background:#e4e8de}.category-button.active{border-left-color:var(--green);background:#dfe7da;color:#2b503e;font-weight:650}.category-count{font-size:10px;min-width:17px;height:17px;padding:1px 4px;background:var(--green);color:white;display:grid;place-items:center;border-radius:20px}.menu-content{flex:1;min-width:0;overflow-y:auto;padding:29px 32px 20px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}.category-heading .eyebrow{justify-content:space-between;font-size:10px;margin-bottom:8px}.category-heading .eyebrow>span{letter-spacing:.08em;font-variant-numeric:tabular-nums}.category-heading h2{font-size:27px}.category-heading p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.6;max-width:440px}.item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:24px}.item-card{display:flex;align-items:center;gap:13px;position:relative;text-align:left;min-height:108px;padding:18px 16px;border:1px solid var(--line);background:#fffefa;border-radius:14px;min-width:0;transition:background .12s,border-color .12s}.item-card:hover{border-color:#9eaf94;background:#f4f7ee}.item-card.selected{background:var(--pale);border-color:#9bb48c}.word-visual{display:grid;place-items:center;width:50px;height:54px;flex-shrink:0;background:#f2f0e6;border-radius:13px;color:#8b896b}.word-visual .icon{height:29px;width:29px;stroke-width:1.45}.word-visual .numeral{font-size:30px;font-weight:500;color:#7a8566}.word-visual.swatch-yellow{background:#faf2d3}.word-visual.swatch-red{background:#f9e5de}.word-visual.swatch-blue{background:#e7eff5}.word-visual.swatch-green{background:#e8eedc}.colour-dot{width:28px;height:28px;border-radius:50%;background:#edc64e;box-shadow:inset 0 0 0 1px #00000006}.swatch-red .colour-dot{background:#d78574}.swatch-blue .colour-dot{background:#87acc6}.swatch-green .colour-dot{background:#90aa75}.item-copy{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}.item-copy strong{font-size:18px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.item-copy small{color:var(--muted);font-size:11px;line-height:1.5}.item-status{color:#7a8177;font-size:11px;line-height:1.5}.item-status.chosen{color:#42603b;font-weight:550}.selection-symbol{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid #d9ddcf;color:#7a8c72;flex-shrink:0}.selection-symbol .icon{width:16px;height:16px}.selection-symbol.is-selected{background:var(--green);border-color:var(--green);color:white}.add-card{min-height:78px;grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;border:1px dashed #b9c3af;border-radius:13px;color:var(--green);font-size:14px;font-weight:550}.add-card:hover{background:#eef2e6;border-style:solid}.menu-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#7d8478;font-size:11px;margin:24px 0 8px;line-height:1.5;text-align:center}.menu-note .icon{height:16px;width:16px}.song-visual{background:#ede8da;color:#8b7b52}.song-card .item-copy strong{font-size:16px}.selection-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 30px max(16px,env(safe-area-inset-bottom));background:#fffefa;border-top:1px solid var(--line);box-shadow:0 -5px 20px #2c3d2310}.selection-summary strong{display:block;font-size:16px;font-weight:600}.selection-summary small{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:5px}.selection-footer .primary-button{min-width:180px}.button-count{display:grid;place-items:center;background:#ffffff23;border-radius:20px;min-width:24px;height:24px;font-size:12px}
/* Individual practice and suggestion screens. */
.detail-page,.form-page,.review-page,.change-page{max-width:680px;margin:0 auto;padding:24px 40px 40px}.practice-word{display:flex;align-items:center;gap:20px;padding:12px 0 26px}.word-visual.large{width:88px;height:88px;border-radius:24px}.word-visual.large .icon{width:46px;height:46px}.word-visual.large .colour-dot{width:45px;height:45px}.word-visual.large .numeral{font-size:48px}.practice-word h1{margin-top:5px;overflow-wrap:anywhere}.practice-question{font-size:25px}.level-list{display:flex;flex-direction:column;gap:10px;margin-top:24px}.level-button{display:flex;align-items:center;gap:15px;width:100%;text-align:left;border:1px solid #dfe3d8;border-radius:13px;padding:15px;background:#fffefa;min-height:78px}.level-button:hover,.level-button.current-level{border-color:#8eaa80;background:#edf3e6}.level-number{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#eef0e5;font-size:14px;color:#70815f}.level-button strong{display:block;font-size:16px;font-weight:600}.level-button small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:5px}.level-indicator{margin-left:auto;flex-shrink:0;color:#87957c}.level-indicator .icon{width:18px;height:18px}.current-level .level-indicator{color:var(--green)}.auto-return{font-size:12px;line-height:1.6;color:var(--muted);text-align:center;margin:18px 0 8px}.detail-page>.text-button{display:block;margin:auto}.pending-label,.item-copy small.pending-label{color:#8b6737;font-size:11px;line-height:1.6;font-weight:500}.form-page{padding-top:24px}.form-symbol{width:68px;height:68px;border:1px solid #dddccf;background:#ecefe3;color:#738162;border-radius:20px;display:grid;place-items:center;margin:10px 0 24px}.form-symbol .icon{height:33px;width:33px}.form-page h1{margin-top:12px}form{margin-top:30px}form label{font-size:15px;font-weight:600;display:block;margin-bottom:10px}input{width:100%;border:1px solid #b8c3ae;background:#fffefa;border-radius:10px;padding:16px;color:#273b33;font-size:18px;min-height:58px}input::placeholder{color:#92968c}input[aria-invalid=true]{border-color:#a7503d}.field-error{font-size:13px;color:#9b4532;line-height:1.6;margin:8px 0}.field-error:empty{display:none}.suggestion-note{display:flex;gap:12px;padding:18px;background:#efece1;border-radius:12px;margin:22px 0 28px;color:#776449}.suggestion-note .icon{width:19px;height:19px;margin-top:2px}.suggestion-note strong{font-size:13px;font-weight:600}.suggestion-note p{font-size:12px;line-height:1.8;margin-top:5px}.change-page h1{margin-top:6px}.change-page .caregiver-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.change-page .caregiver-bubble:last-child{grid-column:2;grid-row:auto;min-height:124px}
/* A review that reads like a small receipt. */
.review-page{max-width:760px}.review-page>.eyebrow{letter-spacing:.04em;margin:8px 0 18px}.step-line{width:30px;height:1px;background:#bac5b4}.review-page>.eyebrow strong{color:var(--green)}.review-caregiver{display:flex;align-items:center;gap:12px;background:#e8eddf;padding:17px 20px;border-radius:12px;margin:28px 0;color:var(--green)}.review-caregiver span{font-size:13px}.review-caregiver strong{margin-left:auto;font-size:16px}.review-section{margin-bottom:26px}.review-section h2{font-size:16px;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #d7ddce;letter-spacing:0}.review-section h2>span{font-size:11px;font-weight:500;display:grid;place-items:center;background:#e7ebdf;border-radius:20px;min-width:23px;height:23px}.review-section ul{list-style:none;padding:0;margin:0}.review-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e6e6dc}.review-item{display:flex;flex-direction:column;gap:6px;min-width:0;overflow-wrap:anywhere}.review-item strong{font-size:16px;font-weight:550}.review-item>span{font-size:13px;color:var(--muted)}.review-actions{display:flex;flex-shrink:0;align-items:center;gap:3px}.empty-copy{font-size:13px;color:var(--muted);padding:16px 0}.review-notice{display:flex;gap:12px;align-items:center;padding:18px 0 23px;color:var(--muted)}.review-notice p{font-size:12px;line-height:1.7}.complete-page{max-width:570px;margin:0 auto;padding:80px 30px 60px;text-align:center}.complete-symbol{display:grid;place-items:center;margin:0 auto 30px;width:108px;height:108px;background:#e0e9d6;border-radius:50%;color:var(--green)}.complete-symbol .icon{width:56px;height:56px;stroke-width:1.2}.complete-page .eyebrow{justify-content:center}.complete-page h1{font-size:30px;margin:18px 0}.complete-page p{font-size:15px;line-height:1.9;color:var(--muted)}.complete-page .primary-button{margin-top:32px;min-width:200px}
@media(min-width:900px){.welcome-inner{padding-top:52px}.welcome .caregiver-grid{margin-top:36px}.item-card{min-height:118px}.menu-content{padding:34px 38px 24px}}
@media(max-width:700px){.app-header{padding:15px 20px;min-height:74px}.brand{font-size:17px;gap:9px}.prototype-badge{font-size:10px;padding:5px 8px}.brand-symbol{width:33px;height:35px}.category-rail{flex-basis:126px}.category-button{gap:8px;padding:15px 10px;font-size:12px;min-height:70px}.category-button>.icon{width:17px;height:17px}.rail-label{padding:0 15px 14px}.category-count{position:absolute;right:5px;top:5px;font-size:9px;height:15px;min-width:15px}.menu-content{padding:24px 20px}.item-grid{grid-template-columns:1fr;margin-top:20px;gap:11px}.item-card{padding:15px 13px;min-height:96px;gap:12px}.category-heading h2{font-size:24px}.category-heading p{font-size:13px}.session-toolbar{padding:17px 20px}.session-toolbar p{font-size:12px;max-width:270px}.session-toolbar h1{font-size:21px}.selection-footer{padding:14px 20px max(14px,env(safe-area-inset-bottom))}.selection-footer .primary-button{min-width:140px;gap:10px;padding:13px 16px}.detail-page,.form-page,.review-page,.change-page{padding:20px 26px 32px}.caregiver-grid{gap:16px}.welcome-inner{padding:32px 28px 28px}}
@media(max-width:480px){.app-header{padding:12px 16px;min-height:68px}.brand{font-size:16px}.brand small{font-size:9px}.prototype-badge{font-size:9px;max-width:100px}.brand-symbol{width:32px;height:34px;border-radius:10px}.welcome-inner{padding:28px 22px 24px}.welcome h1{font-size:38px;margin:17px 0 21px}.welcome-intro h2{font-size:18px}.welcome-intro p{font-size:12px}.caregiver-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:25px 0 20px}.caregiver-bubble{min-height:104px;padding:12px 5px;gap:7px;font-size:20px}.caregiver-bubble:last-child{grid-column:2;grid-row:auto;min-height:104px;border-radius:46%}.caregiver-initial{font-size:12px;padding-bottom:4px}.caregiver-bubble small{font-size:10px}.welcome-foot{font-size:11px;gap:12px;margin-top:20px}.session-toolbar{padding:14px 15px;gap:8px}.session-toolbar h1{font-size:19px}.session-toolbar p{font-size:11px;line-height:1.55;max-width:220px}.caregiver-chip{padding:9px 11px;gap:5px;font-size:12px;min-height:44px}.caregiver-chip .icon{height:16px;width:16px}.caregiver-chip small{display:none}.category-rail{flex-basis:101px;padding:17px 0 12px}.rail-label{font-size:9px;padding:0 12px 13px}.category-button{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:10px 8px;min-height:74px;font-size:12px;line-height:1.5;border-left-width:3px}.category-button>span:not(.category-count){flex:0}.category-button>.icon{width:20px;height:20px}.menu-content{padding:20px 14px 16px;scrollbar-gutter:auto}.category-heading .eyebrow{font-size:9px;letter-spacing:.08em}.category-heading h2{font-size:23px;line-height:1.35}.category-heading p{font-size:12px;line-height:1.7;margin-top:8px}.item-grid{margin-top:18px;gap:10px}.item-card{min-height:99px;padding:13px 10px;gap:9px;border-radius:12px}.word-visual{width:39px;height:44px;border-radius:10px}.word-visual .icon{width:24px;height:24px}.colour-dot{width:24px;height:24px}.item-copy{gap:6px}.item-copy strong{font-size:17px}.item-copy small,.item-status{font-size:10px}.song-card .item-copy strong{font-size:14px}.selection-symbol{width:20px;height:20px;align-self:flex-start;margin-top:1px}.selection-symbol .icon{width:14px;height:14px}.add-card{font-size:13px;min-height:72px;gap:6px;padding:12px}.add-card .icon{width:18px;height:18px}.menu-note{font-size:10px;align-items:flex-start;margin-top:20px;text-align:left}.selection-footer{padding:12px 14px max(12px,env(safe-area-inset-bottom));gap:8px}.selection-summary strong{font-size:13px}.selection-summary small{font-size:9px;max-width:170px}.selection-footer .primary-button{min-width:128px;min-height:52px;padding:12px;gap:8px;font-size:14px}.selection-footer .primary-button>.icon{width:17px;height:17px}.button-count{min-width:21px;height:21px;font-size:11px}.detail-page,.form-page,.review-page,.change-page{padding:16px 20px 30px}.back-button{margin-bottom:16px}.practice-word{gap:16px;padding:6px 0 24px}.practice-word h1{font-size:29px}.word-visual.large{width:74px;height:74px;border-radius:20px}.practice-question{font-size:22px}.muted{font-size:13px}.level-list{margin-top:21px;gap:9px}.level-button{min-height:78px;padding:13px 12px;gap:11px}.level-button strong{font-size:15px}.level-button small{font-size:11px}.level-number{height:30px;width:30px;font-size:12px}.form-page h1,.review-page h1,.change-page h1{font-size:26px}.review-actions{gap:0}.review-actions .text-button{padding:8px;font-size:12px}.review-item strong{font-size:15px}.review-item>span{font-size:12px}.review-row{gap:7px}.complete-page{padding:60px 25px 35px}.complete-page h1{font-size:26px}.complete-page p{font-size:14px}.change-page .caregiver-bubble{font-size:17px}.change-page .caregiver-bubble:last-child{min-height:104px}}
@media(max-width:350px){.category-rail{flex-basis:88px}.menu-content{padding:17px 10px}.item-card{gap:7px}.item-card .word-visual{display:none}.brand{font-size:14px}.prototype-badge{max-width:86px;font-size:8px}.caregiver-chip{padding:9px}.session-toolbar p{max-width:170px}.selection-summary small{max-width:145px}.selection-footer .primary-button{min-width:116px}.caregiver-grid{gap:10px}.caregiver-bubble{min-height:94px}.caregiver-bubble:last-child{min-height:94px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.caregiver-bubble{overflow-wrap:anywhere;min-width:0}
.category-rail button:focus-visible{outline-offset:-4px}
.text-button{min-width:44px}
/* Multilingual practice stays in one modal panel above the category menu. */
.practice-dialog { padding: 0; border: 1px solid #d5ded5; border-radius: 22px; width: min(600px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); color: var(--ink, #243b31); background: #fbfaf6; box-shadow: 0 18px 70px #19342933; overflow: hidden; }
.practice-dialog[open] { display: flex; flex-direction: column; }
.practice-dialog::backdrop { background: #1f342f70; }
.panel-heading { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: #eff4ee; border-bottom: 1px solid #dce4da; flex-shrink: 0; }
.panel-heading > div { flex: 1; min-width: 0; }
.panel-heading h2 { font-size: 24px; line-height: 1.25; margin: 4px 0 0; overflow-wrap: anywhere; }
.panel-heading .word-visual { width: 44px; height: 44px; flex: 0 0 44px; }
.panel-body { overflow-y: auto; padding: 18px 20px 10px; min-height: 0; overscroll-behavior: contain; }
.panel-body p { line-height: 1.5; }
.panel-body .muted { margin: 5px 0 14px; font-size: 14px; }
.language-title { margin: 0; font-size: 17px; }
.language-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.language-button { min-width: 0; min-height: 48px; padding: 8px 4px; display: flex; justify-content: center; align-items: center; gap: 4px; border: 1px solid #bdcbbf; border-radius: 12px; background: white; color: #304f3f; font-weight: 700; font-size: 15px; }
.language-button[aria-pressed="true"] { color: white; background: #426c52; border-color: #426c52; }
.language-button .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.language-empty { padding: 24px 0; text-align: center; color: #647567; }
.language-sections { display: grid; gap: 10px; margin-top: 16px; }
.language-section { border: 1px solid #d6dfd3; border-radius: 14px; background: white; overflow: hidden; min-width: 0; }
.language-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 58px; padding: 12px; border: 0; background: #f3f6f0; text-align: left; color: inherit; }
.language-summary > span:first-child { display: grid; gap: 4px; min-width: 0; }
.language-summary strong { font-size: 16px; }
.language-summary:focus-visible { outline-offset: -3px; }
.word-visual.swatch-orange { background: #fff0df; }
.swatch-orange .colour-dot { background: #e69b4e; }
.word-visual.swatch-purple { background: #f0e8f4; }
.swatch-purple .colour-dot { background: #a189bd; }
.word-visual.swatch-pink { background: #fce8ed; }
.swatch-pink .colour-dot { background: #e7a1b4; }
.word-visual.swatch-black { background: #e8e9e7; }
.swatch-black .colour-dot { background: #343b39; }
.word-visual.swatch-white { background: #eeeee8; }
.swatch-white .colour-dot { background: #ffffff; box-shadow: inset 0 0 0 1px #c6c9c2; }
.word-visual.swatch-brown { background: #eee6de; }
.swatch-brown .colour-dot { background: #98755b; }
.word-visual.swatch-grey { background: #eeefed; }
.swatch-grey .colour-dot { background: #929994; }
.language-summary > span:first-child > span { font-size: 13px; color: #566d5e; }
.edit-language-label { display: flex; align-items: center; gap: 3px; font-size: 13px; flex-shrink: 0; }
.edit-language-label .icon { width: 17px; height: 17px; }
.language-editor { padding: 12px; }
.language-editor h3 { margin: 10px 0 4px; font-size: 17px; }
.language-editor .level-list { gap: 7px; }
.language-editor .level-button { min-height: 60px; padding: 9px; gap: 9px; border-radius: 10px; }
.language-editor .level-button strong { font-size: 14px; line-height: 1.4; }
.language-editor .level-button small { font-size: 12px; line-height: 1.4; margin-top: 2px; }
.language-editor .level-number { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
.language-editor .level-indicator { width: 18px; flex: 0 0 18px; }
.sample-expression { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.collapsed-expression { margin: 0; padding: 0 12px 10px; background: #f3f6f0; overflow-wrap: anywhere; }
.expression-hint { font-size: 13px; color: #617263; margin: 6px 0 10px; }
.panel-body label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.panel-body input { box-sizing: border-box; width: 100%; min-width: 0; height: 48px; padding: 10px 12px; border: 1px solid #acbfae; border-radius: 9px; background: white; font-size: 16px; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #fbfaf6; border-top: 1px solid #dce4da; flex-shrink: 0; }
.panel-footer .primary-button { min-width: 120px; }
.practice-summary-line { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.practice-summary-line + .practice-summary-line { margin-top: 4px; }
.practice-summary-line [data-practice-expression] { display: block; color: #607163; }
.review-item .practice-summary-line { font-size: 14px; }
@media (max-width: 480px) {
  .practice-dialog { border-radius: 18px; }
  .panel-heading { padding: 12px; gap: 8px; }
  .panel-heading h2 { font-size: 21px; }
  .panel-body { padding: 14px 12px 8px; }
  .panel-footer { padding: 10px 12px; }
  .language-buttons { gap: 6px; }
  .language-button { font-size: 13px; }
}
@media (max-width: 350px) {
  .language-button { gap: 2px; font-size: 12px; }
  .language-button .icon { width: 13px; height: 13px; flex-basis: 13px; }
}
.app-header .icon-button { color: #fff; flex-shrink: 0; }
:root { --staging-banner-color: #6a3f0b; }
.staging-banner { background: #fff0c7; color: var(--staging-banner-color); text-align: center; font-weight: 700; padding: 0.45rem; font-size: 0.85rem; }
.catalogue-search { display: grid; gap: 6px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.catalogue-search input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: white; color: inherit; }