/* Approved purple direction. Focused sessions reserve their controls in layout. */
:root { --plum:#6d3df5; --plum-soft:#f1ecff; --paper:#f8f8fc; --surface:#fff; --surface-soft:#f4f2fa; --text:#211b35; --muted:#746f83; --line:#e8e4f1; --line-strong:#d6cee8; --terracotta:#6d3df5; --terracotta-soft:#f0eaff; --sage:#21835a; --sage-soft:#e9f7ef; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; --serif:var(--sans); --sidebar-width:214px; }
body { background:var(--paper); font-size:16px; }
h1,h2,h3,h4 { color:var(--text); }
h1 { font-size:32px; font-weight:750; letter-spacing:-1px; }
h2 { font-weight:700; }
.button { min-height:48px; border-radius:13px; font-weight:650; background:#6d3df5; border-color:#6d3df5; color:#fff; }
.button.secondary { color:#463657; background:#fff; border-color:#ded8eb; }
.button.ghost { color:#6741c8; background:transparent; border-color:transparent; }
.button.danger { color:#a93545; background:#fff1f2; border-color:#f4d8df; }
.button.small { min-height:42px; }
.icon-button { width:48px; height:48px; flex:none; color:#625771; border:1px solid var(--line); border-radius:13px; background:#fff; display:inline-flex; justify-content:center; align-items:center; }
.icon-button svg { width:21px; height:21px; }
.sidebar { background:#fff; padding:28px 15px 18px; }
.sidebar-brand { margin-bottom:30px; }
.brand-name { color:#4929a5; }
.brand-name span { color:#8a62ff; }
.brand-subtitle { font-size:9px; letter-spacing:1px; }
.nav-label { font-size:9px; letter-spacing:1.2px; color:#968ca3; }
.nav-item { color:#6c617b; min-height:46px; }
.nav-item.active { color:#6d3df5; background:#f0eaff; }
.nav-item svg { width:19px; height:19px; }
.workspace { padding:30px clamp(22px,3vw,56px) 40px; }
.page-header { margin-bottom:24px; }
.page-header .eyebrow { color:#8c81a1; font-size:10px; letter-spacing:1.5px; }
.page-header p { font-size:14px; line-height:1.6; margin-top:8px; }
.card { background:#fff; border-color:var(--line); border-radius:19px; box-shadow:none; }
.badge { background:#f0eaff; color:#6d3df5; border-radius:7px; font-size:11px; }
.badge.terracotta { color:#6245a2; background:#f1edfa; }
.auth-screen { background:#f8f7fd; }
.auth-card { max-width:420px; background:#fff; border-color:#e4def0; box-shadow:0 16px 70px #33234a0a; }
.auth-card h1 { color:#4929a5; }
.auth-card input { min-height:50px; }
.auth-form .button { width:100%; }
.purple-study { max-width:560px; height:calc(100dvh - 60px); min-height:500px; margin:0 auto; display:flex; flex-direction:column; position:relative; }
.study-header { display:flex; align-items:center; gap:14px; flex:none; min-height:60px; padding:0 0 10px; }
.study-header > div { display:flex; flex-direction:column; gap:2px; }
.study-header strong { font-size:17px; }
.deck-position { color:var(--muted); font-size:13px; }
.deck-direction { margin-left:auto; }
.deck-direction select { border:0; background:#f1ecff; color:#6d3df5; border-radius:10px; padding:9px 10px; font-size:13px; min-height:44px; }
.study-progress { height:4px; background:#ece7f8; border-radius:4px; flex:none; overflow:hidden; margin:3px 0 14px; }
.study-progress > span { height:100%; display:block; background:#6d3df5; border-radius:4px; transition:width .2s; }
.review-feed { flex:1; min-height:0; overflow-y:auto; scroll-snap-type:y mandatory; scroll-snap-stop:always; overscroll-behavior-y:contain; scrollbar-width:none; touch-action:pan-y; border-radius:18px; }
.review-feed::-webkit-scrollbar { display:none; }
.review-slide { height:100%; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; gap:10px; padding:2px 2px 0; box-sizing:border-box; }
.review-slide .flashcard { flex:1; min-height:0; padding:18px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; text-align:left; border:1px solid var(--line); background:white; border-radius:18px; gap:0; overflow:visible; }
.review-slide .word-picture.large { position:relative; width:100%; max-width:none; height:clamp(150px,31dvh,290px); min-height:70px; flex:1 1 290px; aspect-ratio:auto; background:#f5f3f9; border-radius:13px; margin:0 0 14px; overflow:hidden; }
.review-slide .word-picture.large img { width:100%; height:100%; object-fit:contain; padding:0; }
.card-picture-info { position:absolute; top:7px; right:7px; width:44px; min-height:44px; padding:0; display:grid; place-items:center; color:#6842bd; background:#ffffffed; border:1px solid #e6def2; box-shadow:0 2px 8px #33234a0d; }
.card-picture-info svg { width:20px; height:20px; }
.card-image-missing { height:100%; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.card-image-missing strong { color:#6e5e91; font-size:17px; }
.card-image-missing span { color:var(--muted); font-size:13px; }
.card-copy { flex:0 0 auto; min-height:0; width:100%; overflow:visible; }
.card-kind { color:#958ba4; font-size:11px; }
.card-word-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:3px 0 8px; }
.review-slide .flashcard-term { font:750 clamp(27px,5vw,36px)/1.13 var(--sans); color:#211b35; margin:0; overflow-wrap:anywhere; letter-spacing:-.7px; }
.card-pronounce { color:#6d3df5; background:#f3eeff; border-color:transparent; }
.card-audio-status { min-height:0; font-size:11px; color:#7b5cbc; margin:0; }
.card-audio-status:empty { display:none; }
.purple-app.large-text .flashcard-term { font-size:38px; }
.purple-app.large-text .flashcard-translation { font-size:23px; }
.purple-app.large-text .flashcard-example,.purple-app.large-text .message-bubble { font-size:20px; line-height:1.7; }
.purple-app.large-text .reading-paper { font-size:23px; line-height:1.9; }
.purple-app.large-text .voice-latest > p { font-size:24px; }
.card-recall { font-size:13px; line-height:1.5; color:var(--muted); margin:5px 0 14px; }
.card-reveal { margin-top:5px; }
.card-more { min-height:44px; padding:6px 0; justify-content:flex-start; }
.card-preview-note { display:block; color:#9787aa; font-size:11px; line-height:1.4; }
.review-slide.has-long-primary .flashcard-term,.card-answer-preview { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.review-slide.has-long-primary .flashcard-term { -webkit-line-clamp:2; }
.card-answer-preview { -webkit-line-clamp:3; }
.review-slide .flashcard-translation { color:#4e318f; background:#f3edff; border-radius:10px; padding:10px 12px; font-size:19px; font-weight:600; margin:9px 0; }
.review-slide .flashcard-example { margin:10px 0 2px; font:16px/1.5 var(--sans); }
.card-details { color:#988fa6; font-size:11px; margin-top:10px; }
.card-details > summary { cursor:pointer; min-height:24px; }
.card-details .image-credit { margin:8px 0; }
.card-saved-state { color:#21835a; font-size:12px; display:flex; gap:6px; align-items:center; margin-top:8px; }
.card-saved-state svg { width:16px; height:16px; }
.review-slide .card-footer { flex:none; padding-top:1px; margin:0; border:0; }
.review-actions { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:8px; margin:0; }
.review-actions .button { padding:10px 4px; min-height:50px; font-size:13px; }
.card-swipe-hint { text-align:center; font-size:11px; color:#948a9f; margin:9px 0 4px; }
.deck-buttons { position:absolute; left:calc(100% + 14px); bottom:80px; display:flex; flex-direction:column; gap:9px; }
.deck-buttons button:first-child svg { transform:rotate(-90deg); }
.deck-buttons button:last-child svg { transform:rotate(90deg); }
.review-finish { align-items:center; justify-content:center; text-align:center; padding:28px; gap:18px; background:white; border:1px solid var(--line); border-radius:18px; }
.review-finish .button { width:100%; }
.study-result-icon { display:flex; align-items:center; justify-content:center; border-radius:50%; width:72px; height:72px; color:#21835a; background:#e8f6ed; }
.study-result-icon svg { width:36px; height:36px; }
.study-placeholder { margin:auto; display:grid; gap:20px; text-align:center; padding:30px; }
.route-review .page-header { display:none; }
.purple-conversation { position:relative; max-width:1040px; margin:auto; height:calc(100dvh - 60px); display:flex; flex-direction:column; min-height:550px; }
.conversation-toolbar { display:flex; align-items:center; gap:10px; flex:none; margin-bottom:12px; }
.conversation-person { flex:1; display:flex; align-items:center; gap:16px; min-width:0; }
.conversation-person strong { font-size:18px; }
.conversation-person .tutor-switch { margin:0; }
.conversation-person .tutor-switch-select { padding:8px 9px; min-height:40px; font-size:12px; max-width:130px; }
.conversation-mode { display:flex; border-bottom:1px solid var(--line); flex:none; gap:18px; margin-bottom:18px; }
.conversation-mode .button { background:transparent; color:#978aa8; border:0; border-bottom:3px solid transparent; border-radius:0; padding:9px 12px 12px; font-size:14px; }
.conversation-mode .button.active { color:#6d3df5; border-bottom-color:#6d3df5; }
.purple-conversation .voice-stage { display:flex; flex-direction:column; align-items:center; flex:1; min-height:0; border:0; padding:0; gap:0; background:transparent; }
.purple-conversation .voice-portrait-wrap { width:100%; max-width:440px; height:clamp(190px,34dvh,380px); flex:1 1 34dvh; min-height:170px; overflow:hidden; border-radius:20px; }
.purple-conversation .voice-portrait { width:100%; height:100%; object-fit:cover; object-position:center 33%; }
.purple-conversation .voice-latest { max-width:650px; width:100%; text-align:center; padding:18px 22px 5px; line-height:1.45; flex:0 1 auto; max-height:155px; overflow-y:auto; }
.voice-latest > p { font-size:clamp(17px,2vw,23px); font-weight:550; color:#352641; }
.voice-latest > h2 { font-size:23px; margin-bottom:6px; }
.voice-latest details { margin-top:8px; font-size:13px; color:#81718c; }
.voice-latest details > p { font-size:15px; }
.purple-conversation #voice-panel { width:100%; max-width:600px; flex:none; }
.purple-voice-controls { border:0; background:transparent; padding:12px 0 0; text-align:center; }
.purple-voice-controls .voice-status { justify-content:center; font-size:13px; gap:7px; min-height:26px; }
.purple-voice-controls .voice-controls { justify-content:center; margin-top:14px; gap:12px; }
.purple-voice-controls .voice-controls .button { min-height:52px; }
.purple-voice-controls .voice-start-main { padding-inline:28px; border-radius:30px; }
.purple-voice-controls .voice-mic { display:flex; align-items:center; gap:10px; border-radius:30px; }
.purple-voice-controls .voice-mic.muted { background:#f3eff8; color:#77658a; border-color:#ded5e9; }
.purple-voice-controls .voice-note { margin:9px 0 0; font-size:11px; }
.voice-secondary { display:flex; justify-content:center; gap:12px; flex:none; }
.purple-conversation.is-voice .text-conversation { display:none; }
.purple-conversation.is-text .voice-stage { display:none; }
.text-conversation { flex:1; min-height:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; }
.text-conversation .chat-messages { flex:1; min-height:0; overflow-y:auto; padding:22px; }
.text-conversation .chat-composer { flex:none; border-top:1px solid var(--line); padding:16px; }
.text-conversation .message-bubble { padding:13px 16px; border-radius:15px; background:#f3f0f9; color:#31273e; font-size:16px; line-height:1.6; }
.text-conversation .message.user .message-bubble { background:#6d3df5; color:#fff; }
.text-conversation .message-author { font-size:10px; letter-spacing:.5px; color:#9a8da7; }
.text-conversation .composer-input-row textarea { min-height:52px; font-size:15px; }
.text-conversation .composer-tools { font-size:12px; margin-top:10px; }
.conversation-history { position:absolute; inset:0 0 0 auto; width:min(420px,100%); background:#fff; z-index:40; border:1px solid var(--line); border-radius:18px; padding:22px; overflow:auto; box-shadow:-30px 0 70px #30204416; }
.conversation-history header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:20px; }
.conversation-history header h2 { font-size:22px; }
.history-row { display:flex; align-items:center; border-bottom:1px solid var(--line); padding:10px 0; gap:8px; }
.history-row > button:first-child { flex:1; background:none; border:0; text-align:left; display:flex; flex-direction:column; gap:5px; padding:9px; min-height:56px; }
.history-row small { color:var(--muted); }
.route-settings .settings-section p { line-height:1.65; }
.route-settings .form-grid { gap:20px; }
.route-settings .tutor-options { gap:12px; }
.route-settings .tutor-option { border-radius:16px; }
.route-settings .tutor-option.active { border-color:#8c66f2; background:#f7f3ff; }
.reading-paper { font:19px/1.9 var(--sans); }
.reading-title { font:750 29px/1.2 var(--sans); }
.audio-player { background:#f3effc; border-radius:15px; }
.self-reading .field-hint { font-size:12px; }
.purple-app .mobile-nav { bottom:0; left:0; right:0; border:0; border-top:1px solid var(--line); border-radius:0; background:#fffffffa; padding:4px 8px calc(4px + env(safe-area-inset-bottom)); box-shadow:none; }
.purple-app .mobile-nav-item { min-height:56px; border-radius:12px; font-size:11px; gap:3px; }
.purple-app .mobile-nav-item.active { color:#6d3df5; background:#f3edff; }
.purple-app .mobile-nav-item svg { width:22px; height:22px; }
@media(max-width:899px) {
  body { background:white; }
  h1 { font-size:28px; }
  .purple-app .workspace { padding:20px 20px calc(90px + env(safe-area-inset-bottom)); }
  .purple-app .page-header { gap:10px; margin-bottom:20px; }
  .purple-app .page-header .eyebrow { display:none; }
  .purple-app .page-header p { font-size:13px; }
  .purple-app.route-review .workspace,.purple-app.route-chat .workspace { padding:0; height:100dvh; overflow:hidden; }
  .purple-app.route-review .mobile-nav,.purple-app.route-chat .mobile-nav { display:none; }
  .purple-study { height:100dvh; min-height:0; padding:8px 16px max(10px,env(safe-area-inset-bottom)); }
  .study-header { min-height:54px; }
  .study-header .icon-button { border-color:transparent; }
  .study-progress { margin:3px 3px 12px; }
  .review-slide .flashcard { padding:14px; border-radius:17px; }
  .review-slide .word-picture.large { height:auto; flex-basis:29dvh; min-height:70px; margin-bottom:10px; }
  .review-slide .flashcard-term { font-size:clamp(25px,7.5vw,31px); }
  .review-slide .flashcard-translation { font-size:18px; line-height:1.35; padding:9px 11px; margin:7px 0; overflow-wrap:anywhere; }
  .review-slide .flashcard-example { font-size:15px; line-height:1.45; margin-top:7px; max-width:none; overflow-wrap:anywhere; }
  .review-slide.has-long-copy .flashcard-term { font-size:24px; }
  .review-slide.has-long-copy .flashcard-translation { font-size:16px; }
  .purple-app.large-text .review-slide .flashcard-term { font-size:32px; }
  .purple-app.large-text .review-slide.has-long-primary .flashcard-term { font-size:26px; }
  .purple-app.large-text .review-slide.has-long-primary .flashcard-translation { font-size:19px; }
  .card-recall { font-size:12px; }
  .card-details { margin-top:7px; }
  .deck-buttons { display:none; }
  .purple-conversation { min-height:0; height:100dvh; padding:8px 16px max(12px,env(safe-area-inset-bottom)); }
  .conversation-toolbar { gap:5px; margin-bottom:4px; }
  .conversation-toolbar > .icon-button { border-color:transparent; width:42px; }
  .conversation-person { display:block; }
  .conversation-person strong { display:block; font-size:15px; white-space:nowrap; }
  .conversation-person .tutor-switch { display:block; }
  .conversation-person .tutor-switch-select { border:0; padding:0; min-height:28px; background:transparent; font-size:12px; }
  .conversation-mode { gap:20px; justify-content:center; margin-bottom:12px; }
  .conversation-mode .button { font-size:13px; padding:8px 6px 10px; min-height:40px; }
  .purple-conversation .voice-portrait-wrap { height:33dvh; flex-basis:33dvh; min-height:150px; max-height:320px; width:100%; border-radius:18px; }
  .purple-conversation .voice-latest { padding:16px 6px 3px; max-height:155px; }
  .voice-latest > p { font-size:19px; }
  .voice-latest > h2 { font-size:22px; }
  .purple-voice-controls .voice-status { font-size:12px; flex-wrap:wrap; }
  .purple-voice-controls .voice-controls { margin-top:11px; }
  .purple-voice-controls .voice-controls .button { min-height:52px; font-size:13px; padding-inline:15px; }
  .purple-conversation .notice { font-size:12px; padding:10px 12px; margin-bottom:10px; flex:none; }
  .text-conversation { border-radius:14px; }
  .text-conversation .chat-messages { padding:15px; }
  .text-conversation .chat-composer { padding:10px; }
  .text-conversation .message-bubble { font-size:15px; padding:11px 13px; }
  .text-conversation .composer-input-row { gap:7px; }
  .text-conversation .composer-input-row .button { width:48px; padding:0; }
  .text-conversation .composer-input-row .button-label { display:none; }
  .text-conversation .composer-tools { justify-content:space-between; font-size:11px; }
  .conversation-history { border-radius:0; padding:18px; }
  .route-settings .content-grid { gap:20px; }
  .route-settings .settings-section { padding:18px; }
  .reading-paper { font-size:18px; line-height:1.85; }
  .reading-title { font-size:26px; }
  .purple-app .free-talk { position:static; margin-top:12px; }
  .purple-app .speech-player { bottom:calc(72px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { .review-feed { scroll-behavior:auto; } }