/* Approved brand preview, integrated over the existing functional UI.
   Do not suppress recovery/error controls or change any recording behavior. */
:root { --bg:#f6f7f2; --ink:#1c332c; --muted:#5d6f65; --line:#dce3d9; --mint:#205d46; --danger:#a32934; }
html,body { background:#f6f7f2; }
body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.loading-view { width:min(440px,calc(100% - 36px)); margin:0 auto; min-height:100svh; padding:24px 0; }
.loading-view h2 { margin-top:48px; font-size:24px; }
.loading-view p { font-size:16px; line-height:1.6; color:#43594c; }
.loading-view button { width:100%; margin-top:24px; }
body.in-voice { background:#071b16; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #a77b35; outline-offset:3px; }
.brand-header { display:flex; align-items:center; gap:10px; min-height:44px; text-align:left; }
.brand-header img { width:26px; height:26px; border-radius:50%; background:#fff; flex-shrink:0; }
.brand-header>b { font-size:18px; font-weight:650; letter-spacing:1px; white-space:nowrap; }
.brand-header>span { font-size:13px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px; white-space:nowrap; }
.brand-header button { margin:0 0 0 auto; min-width:44px; min-height:44px; padding:8px 0; flex-shrink:0; white-space:nowrap; background:none; border:0; color:var(--muted); font-size:15px; }
.enter-button,.login-panel button,#report-home { background:#205d46; color:#fff; min-height:54px; font-size:19px; font-weight:650; border:0; border-radius:13px; box-shadow:0 5px 12px #205d4612; }
.login-view { width:min(440px,calc(100% - 44px)); padding:20px 0; min-height:100svh; display:flex; align-items:stretch; }
.login-panel { border:0; padding:0; background:none; box-shadow:none; border-radius:0; width:100%; display:flex; flex-direction:column; }
.login-panel .kicker { margin:48px 0 14px; font-size:14px; letter-spacing:1px; }
.login-panel h1 { font-size:31px; font-weight:650; line-height:1.45; letter-spacing:-.7px; margin:0 0 15px; }
.login-panel>p { font-size:17px; margin:0; }
.login-panel label { margin:28px 0 12px; font-size:16px; }
.login-panel input { min-height:56px; border-color:#b6c6b9; background:white; font-size:16px; margin:0; }
.login-panel input::placeholder { color:#6f7c72; }
.login-panel .enter-button { margin:14px 0 0; }
.login-panel .error:empty { display:none; }
.login-panel .error { margin:12px 0 0; }
.login-panel .login-reassurance { font-size:14px!important; margin:12px 0 0; text-align:center; }
.login-panel .login-steps { font-size:13px!important; text-align:center; margin:28px 0; }
.brand-footer { margin-top:auto; padding-top:12px; color:var(--muted); font-size:12px; text-align:center; line-height:1.9; }
.permission-view { width:min(440px,calc(100% - 44px)); min-height:100svh; padding:12px 0; justify-content:flex-start; align-items:stretch; }
.permission-view .home-header { justify-content:flex-start; }
.permission-view #logout-button { margin-left:auto; }
.permission-view #permission-welcome { text-align:left; width:100%; font-size:26px; line-height:1.3; margin:14px 0 0; }
.permission-view .student-profile { font-size:14px; line-height:1.4; margin:5px 0 16px; }
.permission-view .module-heading { font-size:17px; }
.permission-view .module-grid { margin:10px 0 0; gap:8px; }
.permission-view .module-card { background:#fff; min-height:62px; padding:8px 11px; gap:4px; }
.permission-view .module-card span,.permission-view .module-card small { font-size:12px; color:var(--muted); }
.permission-view .module-card b { font-size:16px; font-weight:600; line-height:1.25; letter-spacing:-.25px; }
.permission-view .module-card.selected { background:#e5efe3; border-color:#205d46; padding:7px 10px; box-shadow:none; }
.permission-view .module-card.selected span,.permission-view .module-card.selected small { color:#205d46; }
.permission-view .module-card.locked { background:#ecefe9; border-style:dashed; opacity:1; color:#66736a; }
.permission-view .module-card:disabled { opacity:.65; }
.permission-view .module-card.selected:disabled { opacity:1; }
.home-actions { background:#f6f7f2; padding:0 0 max(0px,env(safe-area-inset-bottom)); margin-top:10px; }
.home-actions .selected-module-summary { text-align:left; font-size:13px; margin-bottom:8px!important; }
.home-actions .enter-button { min-height:50px; }
.home-records { gap:10px; margin-top:6px; }
.home-records .secondary-button { background:none; border:0; border-radius:0; color:#205d46; font-size:15px; min-height:44px; padding:8px 0; }
.home-records .secondary-button+.secondary-button { border-left:1px solid var(--line); }
.permission-view .resume-summary { background:#e8eee1; color:#34513f!important; border-color:#cbd8c5; font-size:14px; text-align:left; overflow-wrap:anywhere; }
.voice-view { --ink:#eaf5eb; --muted:#bdd0c3; --mint:#ace7c5; --line:#375246; --danger:#ff8b91; background:#071b16; min-height:100svh; grid-template-rows:auto 1fr auto auto; padding:12px max(18px,calc((100% - 460px)/2)) max(12px,env(safe-area-inset-bottom)); }
.voice-view:before { background:radial-gradient(circle at 50% 42%,#3e97681a,transparent 45%); }
.voice-view { color:var(--ink); }
.voice-header { height:auto; min-height:88px; padding:0; grid-template-columns:1fr auto; grid-template-rows:44px auto; gap:8px; }
.voice-brand>span { width:auto; height:auto; border:0; border-left:1px solid #375246; border-radius:0; background:none; font-family:inherit; padding-left:10px; }
.voice-header .round-info { grid-row:2; grid-column:1/-1; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:12px 0 0; border-top:1px solid #263f34; font-size:13px; justify-content:flex-start; }
.voice-header .icon-button { grid-row:1; grid-column:2; width:44px; height:44px; padding:0; white-space:nowrap; border:0; background:none; font-size:15px; }
.timer-label { margin-left:auto; }
.voice-stage { padding:12px 0 4px; min-height:340px; }
.orb-wrap { width:260px; height:260px; min-width:0; min-height:0; margin-bottom:8px; }
.voice-orb,.state-listening .voice-orb { background:radial-gradient(ellipse at 34% 27%,#bfd6c9 0,#719a83 24%,#325e4e 51%,#112e26 76%); box-shadow:0 0 55px #8de8b22a,inset -8px -10px 20px #031812aa,inset 0 1px 2px #e6ffec4a; }
.state-listening .orbit { border-color:#ace7c55c; }
.orb-wrap.long-pause .voice-orb { background:radial-gradient(circle at 38% 30%,#fff5f5 0,#ffb0b5 13%,#d74f5a 38%,#76232b 66%,#25080c 84%); }
.orb-core,.orb-shine { opacity:.32; }
.state-label { font-size:16px; letter-spacing:.03em; }
.caption { font-size:25px; line-height:1.5; min-height:0; overflow-wrap:anywhere; }
.transcript { font-size:15px; margin:8px 0 0; min-height:0; }
.transcript:empty { display:none; }
.pause-warning { font-size:14px; border-radius:10px; line-height:1.5; }
.voice-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; width:100%; }
.voice-controls .control-button { min-width:0; min-height:46px; border:0; background:none; font-size:14px; padding:10px 4px; color:#dae8df; border-radius:10px; }
.voice-controls #finish-button { grid-column:1/-1; grid-row:1; min-height:58px; background:#b7efd0; color:#103c2b; font-size:19px; font-weight:650; border-radius:13px; }
.voice-controls #finish-button:disabled { opacity:1; background:#284b3e; color:#b1c7b9; }
.voice-controls #text-toggle-button { grid-column:2; grid-row:2; }
.voice-controls #repeat-button { grid-column:1; grid-row:2; }
.voice-controls #pause-button { grid-column:3; grid-row:2; }
.auto-hint { font-size:13px; color:#b4c8ba; margin:10px 0 4px; line-height:1.6; }
.wake-hint { font-size:13px; margin:8px 0 0; padding:5px; }
.voice-error { bottom:140px; }
.voice-error button { min-height:48px; font-size:17px; }
.history-view,.report-view { width:min(700px,calc(100% - 44px)); padding:20px 0 28px; }
.report-view { text-align:left; }
.history-view .kicker,.report-view>.kicker { margin-top:26px; font-size:14px; }
.history-view h1,.report-view h1 { font-size:28px; font-weight:650; letter-spacing:-.7px; line-height:1.45; margin:10px 0 16px; }
.brand-header .back-button { margin:0 0 0 auto; padding:0; }
.report-card,.history-card { background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:20px 0; margin:0; }
.report-card h2,.history-card h2 { font-size:18px; margin:0 0 10px; }
.report-card p,.feedback-list,.feedback-list small,.report-notice { font-size:16px; line-height:1.75; color:#43594c; }
.report-card .feedback-list { margin:0; padding-left:24px; }
.feedback-list li { margin:10px 0; }
.feedback-list p { margin:5px 0; }
.feedback-list small { display:block; }
.report-card .counts { gap:8px; flex-wrap:wrap; }
.counts span { color:#34513f; background:#e6ece1; font-size:14px; }
.report-overview { display:grid; grid-template-columns:1fr 1fr; margin:16px 0 6px; border-bottom:1px solid var(--line); padding:20px 0; }
.report-overview>div { padding:0 12px; }
.report-overview>div+div { border-left:1px solid var(--line); }
.report-overview strong { font-size:30px; font-weight:600; display:block; }
.report-overview strong small { font-size:14px; font-weight:400; margin-left:6px; }
.report-overview span { font-size:14px; color:var(--muted); }
.report-meta { font-size:15px; color:var(--muted); line-height:1.65; }
.next-practice { background:#e8eee1; padding:18px; border:0; border-radius:13px; margin:18px 0; }
.report-details { margin:18px 0; border-bottom:1px solid var(--line); padding-bottom:16px; }
.report-details summary { font-size:17px; min-height:44px; display:flex; align-items:center; cursor:pointer; }
.report-details summary:after { content:'＋'; margin-left:auto; }
.report-details[open] summary:after { content:'−'; }
.report-details .report-card { border:0; }
.report-summary p { margin:8px 0; }
.assessment-level-card strong,.assessment-level-mini { color:#6e5426; }
.report-notice { font-size:13px; }
#report-home { width:100%; padding:15px; margin-top:16px; }
.trend-heading { flex-direction:column; align-items:flex-start; }
.trend-heading p,.trend-wait p { color:var(--muted); font-size:15px; line-height:1.6; }
.trend-item small { color:var(--muted); font-size:13px; }
.history-report-button { border-bottom:1px solid var(--line); padding:20px 0; display:flex; align-items:center; gap:12px; justify-content:space-between; }
.history-report-button b { font-size:18px; }
.history-report-button p { margin:7px 0; font-size:14px; color:var(--muted); }
.history-report-button .history-result { font-size:15px; color:#205d46; }
.history-report-button .open-report-hint { flex-shrink:0; margin:0; color:#205d46; font-size:15px; }
@media(max-height:740px) and (max-width:760px) {
 .permission-view { width:calc(100% - 36px); padding-top:6px; padding-bottom:0; }
 .permission-view #permission-welcome { margin-top:4px; font-size:24px; }
 .permission-view .student-profile { margin:3px 0 9px; font-size:13px; }
 .permission-view .module-grid { margin-top:8px; gap:6px; }
 .permission-view .module-card { min-height:54px; padding:6px 8px; gap:3px; }
 .permission-view .module-card.selected { padding:5px 7px; }
 .permission-view .module-card b { font-size:16px; }
 .home-actions { margin-top:7px; }
 .home-actions .selected-module-summary { margin-bottom:6px!important; }
 .home-records { margin-top:3px; }
 .voice-stage { min-height:270px; }
 .orb-wrap { width:205px; height:205px; }
 .caption { font-size:23px; }
 .login-panel .kicker { margin-top:26px; }
}
@media(max-height:580px) and (max-width:760px) {
 .permission-view .brand-header { min-height:40px; }
 .permission-view #permission-welcome { font-size:21px; margin-top:0; }
 .permission-view .student-profile { margin-bottom:6px; }
 .permission-view .module-grid { gap:5px; margin-top:6px; }
 .permission-view .module-card { min-height:50px; }
 .permission-view .module-card span,.permission-view .module-card small { font-size:11px; }
 .home-actions .enter-button { min-height:48px; }
}
@media(prefers-reduced-motion:reduce) { .orb-wrap,.orb-wrap * { animation:none!important; transition:none!important; } }