:root{
  --bg:#fff7ff;
  --accent:#a89bcc;
  --accent-2:#e8d4f1;
  --muted:#6b4b6b;
  --green-light:#e8f5e9;
  --green-accent:#66bb6a;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0;background:linear-gradient(180deg,#faf9fc 0%, #fff 100%);color:#4b3a54}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;max-width:980px;margin:0 auto}
.logo{font-size:20px;margin:0}
.version{font-size:13px;color:var(--muted);font-weight:normal;opacity:.75}
.time{font-size:12px;color:var(--muted);font-weight:normal;opacity:.65;margin-left:6px}
.user-info{display:flex;align-items:center;gap:16px}
.user-name{font-size:14px;font-weight:600;color:#4b3a54;min-width:120px;text-align:right}
.app-main{width:100%;max-width:980px;margin:8px auto;padding:0 12px 100px 12px}
.card{background:linear-gradient(90deg,#fff,#fff8fe);padding:18px;border-radius:16px;box-shadow:0 12px 30px rgba(155,123,255,.06);transition:transform .28s ease,box-shadow .28s ease}
.card.pop{transform:translateY(-6px);box-shadow:0 28px 60px rgba(155,123,255,.12)}
.card-media{text-align:center;font-size:44px}
.prompt{font-size:20px;margin:12px 0;text-align:center}

/* Minimal correct indicator above question emoji */
.lesson-correct-indicator{display:flex;align-items:center;justify-content:center;gap:4px;min-height:10px;margin:2px 0 6px 0}
.lesson-correct-indicator.hidden{display:none}
.lesson-dot{width:6px;height:6px;border-radius:50%;background:#ddd;display:inline-block}
.lesson-dot.filled{background:var(--accent)}
.lesson-dot.hollow{background:transparent;border:1px solid #ddd}
.lesson-dot-plus{font-size:11px;color:var(--muted);margin-left:4px}

/* subtle quiz progress strip (used for T15 quiz mix) */
.quiz-mini-wrap{display:inline-flex;align-items:center;gap:8px;min-width:220px;max-width:360px;width:62%}
.quiz-mini-chip{font-size:11px;color:var(--muted);background:linear-gradient(90deg,#f8f3ff,#f1e9ff);padding:2px 7px;border-radius:999px;line-height:1.6}
.quiz-mini-track{position:relative;flex:1;height:6px;border-radius:999px;background:#eee7f8;overflow:hidden}
.quiz-mini-fill{display:block;height:100%;background:linear-gradient(90deg,#a89bcc,#8d7cc1);transition:width .25s ease}

/* subtle mini tip under the icon/prompt */
.mini-tip{font-size:12px;color:var(--muted);text-align:center;margin-top:2px;opacity:.85;display:none}
.mini-tip.show{display:block}

/* header points */
.points{font-size:15px;padding:6px 10px;border-radius:12px;background:linear-gradient(90deg,#fff,#fff8fe);box-shadow:0 8px 16px rgba(155,123,255,.06);transition:transform .25s ease}
.points.pulse{animation:pulse 700ms ease}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.btn{padding:12px 16px;border-radius:14px;border:none;font-size:16px;cursor:pointer;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.05);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-4px)}
.btn.success{background:linear-gradient(90deg,#7ef1a4,#46d16b);color:#083}
.btn.danger{background:linear-gradient(90deg,#ffd6d6,#ffbdbd);color:#b00}
.controls{display:flex;gap:8px;justify-content:center;margin-top:12px}
#hint{display:none !important}

/* visual feedback for answers */
.choice-correct{outline:3px solid rgba(46,209,97,.95);box-shadow:0 14px 40px rgba(46,209,97,.08);transform:translateY(-6px)}
.choice-wrong{outline:3px solid rgba(255,80,80,.9);box-shadow:0 10px 26px rgba(255,80,80,.06);transform:translateY(-2px) rotate(-1deg)}
.shake{animation:shake .36s ease}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}100%{transform:translateX(0)}}
.motivation{display:inline-block;margin-left:10px;font-size:22px;transform:translateY(-2px);animation:pop .44s ease}
.answer-correct{border:2px solid rgba(46,209,97,.9);box-shadow:0 10px 30px rgba(46,209,97,.06);border-radius:10px}
.answer-wrong{border:2px solid rgba(255,80,80,.9);box-shadow:0 8px 20px rgba(255,80,80,.04);border-radius:10px}
.panel{width:260px;margin-top:12px}
.home-actions{display:flex;gap:12px;justify-content:center}
.text-answer textarea{width:100%;border-radius:12px;padding:10px;border:1px solid #efe4f8}

/* inline result message shown above the text input */
.inline-result{display:block;margin-bottom:10px;padding:8px 12px;border-radius:10px;font-weight:600;text-align:center;position:relative;white-space:pre-wrap}
.inline-result.success{background:linear-gradient(90deg,#e6ffef,#e8fff9);color:#087a3f;border:1px solid rgba(34,197,94,.12)}
.inline-result.error{background:linear-gradient(90deg,#fff9f6,#fffefc);color:#6b3b2b;border:1px solid rgba(255,180,120,.08)}
.inline-result[aria-live]{box-shadow:0 8px 20px rgba(0,0,0,.04)}
.inline-result .close{position:absolute;right:8px;top:6px;border-radius:8px;padding:2px 6px;background:transparent;border:none;font-size:14px;cursor:pointer;color:inherit}
.inline-result .close:focus{outline:2px solid rgba(0,0,0,.06)}
.inline-result .decision-row{display:flex;gap:8px;justify-content:center;margin-top:10px}
.progress h4,.badges h4{margin:8px 0 6px 0}
.badgeslist{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{background:linear-gradient(90deg,#fff1f6,#f8e6ff);padding:8px 10px;border-radius:12px;box-shadow:0 6px 12px rgba(0,0,0,.06);font-size:13px}

/* Aura box */
.aura-box{font-weight:700;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,#fff8f3,#fffefc);box-shadow:0 8px 20px rgba(155,123,255,.04);display:inline-block}
.aura-meta{margin-top:8px;color:var(--muted);font-size:13px}
.profile-stats{display:flex;gap:12px;margin-top:8px;color:var(--muted);font-size:14px}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:8px;background:linear-gradient(90deg,#ffffff,#fff8fe);padding:8px;border-radius:999px;box-shadow:0 12px 30px rgba(155,123,255,.08);display:flex;gap:8px;z-index:1000;max-width:95vw}
.nav-btn{padding:10px 14px;border-radius:12px;border:none;background:transparent;font-size:14px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-btn.active{background:linear-gradient(90deg,#f8e6ff,#f0dbff)}

@media(max-width:600px){
  .bottom-nav{gap:4px;padding:6px;bottom:4px;width:fit-content}
  .nav-btn{padding:8px 10px;font-size:12px;gap:4px}
  .nav-btn span{display:none}
}
.view.hidden{display:none}
.hidden{display:none !important}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(75,58,84,.28);z-index:10000}
.security-modal{background:linear-gradient(135deg,#fff 0%,#faf8fc 100%);box-shadow:0 8px 32px rgba(139,98,158,.2);border:1px solid #efe4f8}
#securityModal{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(75,58,84,.5)}
#securityModal:not(.hidden) ~ .app-main,#securityModal:not(.hidden) ~ header{filter:blur(8px);pointer-events:none}
.security-icon{font-size:48px;animation:securityPulse 2s ease-in-out infinite}
@keyframes securityPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}
.security-input-container{position:relative}
.security-input-container::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 8px);height:calc(100% + 8px);border-radius:14px;background:linear-gradient(135deg,#ff9bd1,#b794f6,#92d5f5);opacity:0;transition:opacity .3s;z-index:-1}
.security-input-container:focus-within::before{opacity:.2}
#securityInput{transition:all .3s ease}
#securityInput:focus{outline:none;border-color:#b794f6;box-shadow:0 0 0 3px rgba(183,148,246,.15)}
.security-btn{background:linear-gradient(135deg,#b794f6,#92d5f5);border:none;transition:all .3s ease}
.security-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(183,148,246,.4)}
.security-error{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

/* mini timer */
.mini-timer{margin-top:12px;padding:10px;border-radius:12px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.timer-track{position:relative;height:28px;background:linear-gradient(90deg,#fff,#f8f3ff);border-radius:14px;flex:1;min-width:200px;margin-right:12px;overflow:hidden}
.timer-setup{display:flex;align-items:center;gap:8px;margin-top:8px}
.timer-setup select,.timer-setup input{border-radius:8px;padding:6px;border:1px solid #efe4f8;background:#fff}
.timer-setup .btn{padding:6px 10px;font-size:13px}
.timer-emoji{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);font-size:20px;transition:left .3s linear}
.timer-emoji.bounce{animation:bounce .8s ease 0s 3}
.timer-emoji.paused{opacity:.6;transform:translate(-50%,-50%) scale(.95)}
@keyframes bounce{0%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-70%)}100%{transform:translate(-50%,-50%)}}
.timer-controls{display:flex;align-items:center;gap:8px}
.timer-label{font-weight:700;color:var(--muted)}

/* timer celebration overlay */
.timer-celebration{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(155,123,255,.06),rgba(255,155,200,.03));z-index:9999}
.timer-celebration-inner{background:linear-gradient(90deg,#fff,#fffbff);padding:26px 30px;border-radius:16px;box-shadow:0 20px 60px rgba(155,123,255,.12);text-align:center}
.timer-celebration-inner h2{margin:0 0 8px 0;font-size:22px}
.timer-celebration-inner p{margin:0;color:var(--muted)}
.confetti{position:absolute;top:-40px;font-size:22px;opacity:0.95;animation:fall 5s linear forwards}
@keyframes fall{0%{transform:translateY(-20vh) rotate(0);opacity:1}100%{transform:translateY(120vh) rotate(540deg);opacity:1}}

/* celebration image & game */
.celebration-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.celebration-image{max-width:60%;height:auto;border-radius:12px;border:6px solid rgba(255,255,255,.9);box-shadow:0 18px 40px rgba(155,123,255,.12);cursor:pointer}
.celebration-image-success{outline:6px solid rgba(46,209,97,.9);transform:scale(1.02)}

/* save-point target for the timer celebration: click a random point within 4s to keep the image */
.timer-celebration-inner{position:relative}
.save-target{position:absolute;width:30px;height:30px;border-radius:999px;background:linear-gradient(90deg,#ff6b6b,#ff4757);box-shadow:0 8px 18px rgba(255,71,87,.18);cursor:pointer;animation:savePulse 1s infinite;border:2px solid #fff;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;justify-content:center;font-size:16px}
@keyframes savePulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)} }
.save-countdown{margin-top:10px;font-weight:800;color:#c62828}

/* small progress bar showing remaining time to find the save-point */
.save-timer{width:60%;height:8px;background:#fff;border-radius:999px;overflow:hidden;margin-top:8px;border:1px solid rgba(0,0,0,.03)}
.save-timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff6b6b,#ff4757);transition:width .18s linear}

/* EnglVerse styles - green color scheme */
.englverse-card{background:linear-gradient(90deg,#fff,#f1f8f5) !important;box-shadow:0 12px 30px rgba(102,187,106,.08) !important}
.englverse-card.pop{box-shadow:0 28px 60px rgba(102,187,106,.14) !important}

/* Speed Mode Styles */
.speed-mode-container{display:flex;flex-direction:column;gap:12px;margin:12px 0;align-items:center;position:relative;overflow:visible}
.speed-mode-container:not(.hidden){display:flex}
.speed-emoji{font-size:44px;text-align:center;position:relative;display:inline-block}
.speed-timer-display{font-size:32px;font-weight:800;color:#7c5cff;font-variant-numeric:tabular-nums;letter-spacing:-2px;text-align:center;background:linear-gradient(90deg,#f8e6ff,#efe4f8);padding:10px 20px;border-radius:12px;box-shadow:0 8px 16px rgba(124,92,255,.12)}
.speed-prompt{margin:8px 0;font-size:18px}
.speed-progress{width:100%;height:12px;background:#efe4f8;border-radius:999px;overflow:hidden;position:relative}
.speed-progress-bar{height:100%;width:100%;background:linear-gradient(90deg,#46d16b,#2ec94d);transition:width linear}
.speed-vocab{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:400px}
.speed-vocab-item{padding:10px;background:linear-gradient(90deg,#f8e6ff,#efe4f8);border-radius:10px;text-align:center;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease;border:2px solid transparent}
.speed-vocab-item:hover{transform:scale(1.05);border-color:var(--accent)}
.speed-vocab-item.found{background:linear-gradient(90deg,#e6ffef,#d4f8e0);color:#087a3f;border-color:#46d16b}
.speed-vocab-item.missed{opacity:0.4;text-decoration:line-through}

/* Diamond display in profile */
.diamond-stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:12px}
.diamond-stat{padding:12px;background:linear-gradient(90deg,#fff8f3,#fff5e6);border-radius:12px;text-align:center;box-shadow:0 6px 12px rgba(0,0,0,.04)}
.diamond-stat-title{font-weight:700;font-size:14px;margin-bottom:6px}
.diamond-display{font-size:36px;text-align:center;margin:4px 0}
.diamond-percent{font-size:13px;color:var(--muted);font-weight:600}

/* Diamond colors by rarity */
.diamond-bronze{color:#8b6914}
.diamond-silver{color:#c0c0c0}
.diamond-gold{color:#ffd700}
.diamond-platinum{color:#e5e4e2;text-shadow:0 0 8px rgba(255,215,0,.6);animation:diamondGlow 1.5s ease-in-out infinite}

@keyframes diamondGlow{0%{text-shadow:0 0 6px rgba(255,215,0,.4)}50%{text-shadow:0 0 16px rgba(255,215,0,.8)}100%{text-shadow:0 0 6px rgba(255,215,0,.4)}}
.diamond-no-completion{color:#ddd;font-style:italic;opacity:.6}

/* Speed Milestone Badge */
.speed-milestone-badge{position:absolute;left:60px;top:-10px;opacity:0;transform:scale(0) rotateZ(-30deg);transition:opacity .3s ease,transform .3s cubic-bezier(0.34,1.56,.64,1);pointer-events:none;z-index:100}
.speed-milestone-badge.show{opacity:1;transform:scale(1) rotateZ(0)}
.milestone-badge-content{display:flex;flex-direction:column;align-items:center;padding:8px;background:linear-gradient(90deg,#f8e6ff,#efe4f8);border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,.1);border:2px solid rgba(155,123,255,.2);white-space:nowrap}

.celebration-overlay-instructions{margin-top:6px;font-weight:700}
.spark{position:fixed;font-size:18px;pointer-events:none;transform:translate(-50%,-50%);opacity:0.95}

/* Right panel styles */
.right-panel{display:flex;gap:16px;flex-wrap:wrap;flex:1;min-width:400px;padding:0 12px}
.right-panel.mobile-footer{display:flex;flex-direction:column;gap:12px;flex:none;min-width:auto;width:100%;padding:12px;margin-top:12px;border-top:1px solid #efe4f8}
.compact-info{flex-direction:column}
.info-section{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}
.info-item{font-size:13px;color:var(--muted);line-height:1.4}
.info-item div{font-weight:500;color:#4b3a54}
#chapterTitle{font-size:14px;display:block;color:#4b3a54;font-weight:600}
#auraInfo,#streakInfo,#sessionProgress{display:block}

.practice-buttons,.chapter-buttons{flex:1;min-width:150px}
.practice-buttons h4,.chapter-buttons h4{margin:8px 0 10px 0;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:0.5px;font-weight:600}

.button-group{display:flex;gap:8px;flex-wrap:wrap}
.mode-btn,.chapter-btn,.mode-btn-home,.chapter-btn-home,.mode-btn-engl,.chapter-btn-engl{padding:8px 14px;border-radius:10px;border:none;font-size:13px;cursor:pointer;background:linear-gradient(90deg,#f0f0f0,#e8e8e8);color:#4b3a54;transition:all .2s ease;font-weight:500;box-shadow:0 4px 10px rgba(0,0,0,.04);user-select:none;-webkit-user-select:none}
.mode-btn:hover,.chapter-btn:hover,.mode-btn-home:hover,.chapter-btn-home:hover,.mode-btn-engl:hover,.chapter-btn-engl:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(155,123,255,.12)}
.mode-btn.active,.chapter-btn.active,.mode-btn-home.active,.chapter-btn-home.active,.mode-btn-engl.active,.chapter-btn-engl.active{background:linear-gradient(90deg,#9b7bff,#7f5fff);color:#fff;box-shadow:0 6px 16px rgba(155,123,255,.2)}

@media(max-width:980px){
  .right-panel{flex-direction:column;gap:12px;min-width:auto;width:100%}
  .practice-buttons,.chapter-buttons{min-width:auto}
}


.modal.hidden{display:none}
.modal-content{background:#fff;padding:18px;border-radius:12px;width:90%;max-width:520px;position:relative}
.btn-primary,.btn-secondary{border:none;padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:500;font-size:13px;transition:all .2s ease;user-select:none;-webkit-user-select:none}
.btn-primary{background:linear-gradient(90deg,#9b7bff,#7f5fff);color:#fff;box-shadow:0 4px 12px rgba(155,123,255,.15)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(155,123,255,.2)}
.btn-secondary{background:#f0f0f0;color:#4b3a54;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.btn-secondary:hover{background:#e8e8e8;transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:opacity .3s ease;opacity:1;z-index:9999}
.toast.hidden{opacity:0;pointer-events:none}

@media(max-width:1200px){
  .right-panel{min-width:auto;gap:12px}
  .info-section{flex:1;min-width:auto}
}
@media(min-width:980px){.app-main{display:grid;grid-template-columns:1fr 300px;align-items:start;gap:20px}}

.profile-header{background:linear-gradient(90deg,#f0f0f0,#e8e8e8);padding:12px;border-radius:10px;margin:12px 0}
.profile-header p{margin:6px 0;font-size:14px}
.chapter-stats-container{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.stat-row{background:linear-gradient(90deg,#f8f8f8,#f0f0f0);padding:8px 10px;border-radius:8px;font-size:13px;border-left:3px solid var(--accent)}
.badgeslist{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge-item{background:linear-gradient(90deg,#fff9e6,#ffef99);padding:6px 10px;border-radius:8px;font-size:12px;border:1px solid #ffd700;cursor:help;transition:all .2s ease}
.badge-item:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(255,215,0,.2)}

/* Toggle sections for profile stats */
.stats-toggle{background:linear-gradient(90deg,#f8f3ff,#f0e6ff);padding:12px 16px;border-radius:12px;margin:16px 0 8px 0;cursor:pointer;user-select:none;display:flex;align-items:center;gap:12px;transition:all .2s ease;border:2px solid transparent}
.stats-toggle:hover{background:linear-gradient(90deg,#f0e6ff,#e8d9ff);border-color:rgba(155,123,255,.2);transform:translateX(4px)}
.stats-toggle:active{transform:translateX(2px) scale(0.98)}
.toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(155,123,255,.15);color:var(--accent);font-weight:bold;font-size:12px;transition:transform .3s ease,background .2s ease}
.toggle-icon.open{transform:rotate(180deg);background:rgba(155,123,255,.25)}
.stats-section{overflow:hidden;transition:max-height .3s ease,opacity .3s ease,margin .3s ease;max-height:2000px;opacity:1;margin-bottom:16px}
.stats-section.collapsed{max-height:0;opacity:0;margin-bottom:0}

/* Settings layout rows */
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.06)}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:14px;font-weight:600;color:var(--text);min-width:140px}
.settings-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.settings-status{min-width:140px}

/* Minimal toggle without background and border */
.stats-toggle.minimal{background:transparent !important;border:none !important;padding:0;margin:0;cursor:pointer}
.stats-toggle.minimal:hover{background:transparent !important;border-color:transparent !important;transform:none}
.stats-toggle.minimal .toggle-icon{background:transparent !important;color:var(--muted);font-size:14px;width:auto;height:auto;border-radius:0;padding:0;margin-right:8px}
.stats-toggle.minimal .toggle-icon.open{background:transparent !important;color:var(--primary);transform:rotate(180deg)}

@media(max-width:768px){
  .right-panel{flex-direction:column;gap:12px;min-width:auto;width:100%;padding:0}
  .right-panel.mobile-footer{display:flex;border-top:1px solid #efe4f8;padding:12px;margin-top:12px}
  .timer-track{min-width:150px;flex:1;margin-right:0}
  .timer-controls{flex-direction:row;gap:6px;align-items:center;flex-wrap:wrap}
  .timer-label{order:1;min-width:60px;font-size:15px}
  .timer-setup{margin-top:0;gap:4px;flex-wrap:wrap}
  .timer-setup input{width:60px;padding:4px;font-size:13px}
  .timer-setup .btn{padding:4px 8px;font-size:12px}
  .mini-timer{flex-direction:row;align-items:center;gap:8px;padding:8px;flex-wrap:wrap}
  .mini-timer .timer-controls button{padding:6px 10px;font-size:13px}
  #lesson-card{scroll-margin-top:60px}
  .sticker-canvas{height:400px;max-width:100%;width:100%}
  .sticker-controls{opacity:1;top:-30px;background:rgba(255,255,255,.95);padding:4px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
  .sticker-control-btn{padding:6px 10px;font-size:12px}
}

/* EnglVerse specific profile and stats colors */
#englverse-view .profile-header{background:linear-gradient(90deg,#d4edda,#c3e6cb)}
#englverse-view .stat-row{border-left-color:#4caf50;background:linear-gradient(90deg,#e8f5e9,#dcedc8)}
#englverse-view .diamond-stat{background:linear-gradient(90deg,#c8e6c9,#b9ddb1)}
#englverse-view .stats-toggle{background:linear-gradient(90deg,#c8e6c9,#a5d6a7);border-color:rgba(76,175,80,.3)}
#englverse-view .stats-toggle:hover{background:linear-gradient(90deg,#a5d6a7,#81c784);border-color:rgba(76,175,80,.4);color:#1b5e20}
#englverse-view .toggle-icon{background:rgba(76,175,80,.25);color:#2e7d32}
#englverse-view .toggle-icon.open{background:rgba(76,175,80,.35)}
#englverse-view .badge-item{background:linear-gradient(90deg,#c8e6c9,#b9ddb1);border-color:rgba(76,175,80,.35);color:#1b5e20}

/* Profile view - unified palette */
#profile-view .card{background:linear-gradient(90deg,#fff,#fff9ff);border:1px solid rgba(155,123,255,.14);box-shadow:0 10px 24px rgba(155,123,255,.08)}
#profile-view .profile-header{background:linear-gradient(90deg,#f3e9ff,#eadeff)}
#profile-view .badge-item{background:linear-gradient(90deg,#f8f3ff,#f0e6ff);border-color:rgba(155,123,255,.22);color:#6a1b9a}
#profile-view .badge-item:hover{box-shadow:0 4px 12px rgba(155,123,255,.18)}

#profile-view #latiToggle,
#profile-view #englToggle,
#profile-view #stickerToggle{background:linear-gradient(90deg,#e8d9ff,#deccff);border-color:rgba(155,123,255,.2)}

#profile-view #latiToggle:hover,
#profile-view #englToggle:hover,
#profile-view #stickerToggle:hover{background:linear-gradient(90deg,#deccff,#d4bcff);border-color:rgba(155,123,255,.3);color:#4b3a54}

#profile-view #latiIcon,
#profile-view #englIcon,
#profile-view #stickerIcon{background:rgba(155,123,255,.15);color:#5e35b1}

#profile-view #latiIcon.open,
#profile-view #englIcon.open,
#profile-view #stickerIcon.open{background:rgba(155,123,255,.25)}

#profile-view #latiStatsSection .stat-row,
#profile-view #englStatsSection .stat-row,
#profile-view #stickerSection .stat-row{border-left-color:#7c5cff;background:linear-gradient(90deg,#f8f3ff,#f0e6ff)}

#profile-view #latiStatsSection .diamond-stat,
#profile-view #englStatsSection .diamond-stat,
#profile-view #stickerSection .diamond-stat,
#profile-view .diamond-stat{background:linear-gradient(90deg,#f0e6ff,#e8d9ff)}

#profile-view .diamond-stats-container{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
#profile-view .diamond-stat{padding:6px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.04)}
#profile-view .diamond-stat-title{font-size:11px;margin-bottom:4px}
#profile-view .diamond-display{font-size:18px;margin:2px 0}
#profile-view .diamond-percent{font-size:10px}

/* LatiVerse subtle purple tones */
#home-view .profile-header{background:linear-gradient(90deg,#f0e6ff,#e8d9ff)}
#home-view .stat-row{border-left-color:#7c5cff;background:linear-gradient(90deg,#f8f3ff,#f0e6ff)}
#home-view .diamond-stat{background:linear-gradient(90deg,#f0e6ff,#e8d9ff)}
#home-view .stats-toggle{background:linear-gradient(90deg,#e8d9ff,#deccff);border-color:rgba(155,123,255,.2)}
#home-view .stats-toggle:hover{background:linear-gradient(90deg,#deccff,#d4bcff);border-color:rgba(155,123,255,.3)}
#home-view .toggle-icon{background:rgba(155,123,255,.15);color:#5e35b1}
#home-view .toggle-icon.open{background:rgba(155,123,255,.25)}
#home-view .badge-item{background:linear-gradient(90deg,#f8f3ff,#f0e6ff);border-color:rgba(155,123,255,.25);color:#6a1b9a}

/* Profile view section variants intentionally share one palette */

/* Shop view styles */
.shop-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px}
.shop-item{background:linear-gradient(135deg,#fff,#faf8fc);border-radius:12px;padding:12px;text-align:center;box-shadow:0 4px 12px rgba(155,123,255,.08);transition:transform .2s,box-shadow .2s;position:relative;cursor:pointer}
.shop-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(155,123,255,.12)}
.shop-item.owned{opacity:.7;cursor:default;background:linear-gradient(135deg,#f0f0f0,#e8e8e8)}
.shop-item.owned::after{content:'✓ Gekauft';position:absolute;top:8px;right:8px;background:#4caf50;color:#fff;font-size:10px;padding:2px 6px;border-radius:8px;font-weight:600}
.shop-item img{width:80px;height:80px;object-fit:contain;margin-bottom:8px}
.shop-item-name{font-size:13px;font-weight:600;margin:4px 0}
.shop-item-price{font-size:14px;color:var(--muted);margin:4px 0}
.shop-buy-btn{margin-top:8px;padding:6px 12px;border-radius:8px;border:none;background:linear-gradient(90deg,#7ef1a4,#46d16b);color:#083;font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s}
.shop-buy-btn:hover{transform:scale(1.05)}
.shop-buy-btn:disabled{background:#ccc;color:#666;cursor:not-allowed;transform:none}

.sticker-canvas{position:relative;width:100%;height:600px;background:#f5f5f5;border-radius:12px;overflow:hidden;border:2px dashed #ddd;margin-top:8px}
.sticker{position:absolute;cursor:move;user-select:none;transition:transform .1s ease;z-index:10}
.sticker img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.sticker.dragging{opacity:.8;z-index:100}
.sticker-controls{position:absolute;top:-25px;right:0;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.sticker:hover .sticker-controls,.sticker.active .sticker-controls{opacity:1}
.sticker-control-btn{background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer}
.sticker-control-btn:hover{background:rgba(0,0,0,.9)}

@media(max-width:768px){
  .sticker-controls{top:-30px;right:0;gap:6px;background:rgba(255,255,255,.95);padding:4px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
  .sticker-control-btn{padding:6px 10px;font-size:12px}
}

/* Session info styling */
.session-info{background:linear-gradient(90deg,#dadeda,#e6e8e6);color:#595656}
.session-info-quiz{background:linear-gradient(90deg,#e3f2fd,#bbdefb) !important;color:#1565c0 !important}

/* Sort buttons styling */
.sort-btn{padding:8px 14px;border-radius:10px;border:none;font-size:13px;cursor:pointer;background:linear-gradient(90deg,#f0f0f0,#e8e8e8);color:#4b3a54;transition:all .2s ease;font-weight:500;box-shadow:0 4px 10px rgba(0,0,0,.04);user-select:none;-webkit-user-select:none}
.sort-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(155,123,255,.12)}
.sort-btn.active{background:linear-gradient(90deg,#9b7bff,#7f5fff);color:#fff;box-shadow:0 6px 16px rgba(155,123,255,.2)}

/* Grammar help text styling */
.grammar-help-toggle{padding:12px 16px;border-radius:14px;border:none;font-size:16px;cursor:pointer;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.05);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .18s ease,box-shadow .18s ease;user-select:none;-webkit-user-select:none}
.grammar-help-toggle:hover{transform:translateY(-4px)}
.grammar-help-text{margin-top:0;padding:8px 10px;background:#f9f9f9;border-left:3px solid #9b7bff;border-radius:4px;font-size:12px;color:#666;font-style:italic;line-height:1.4;max-width:0;overflow:hidden;opacity:0;transition:max-width .3s ease,opacity .3s ease}
.grammar-help-text.expanded{max-width:500px;opacity:1}