/* Three user-approved worlds; the learning data and interactions are shared. */
:root{--skin-bg:#fff4da;--skin-paper:#fffef9;--skin-ink:#242149;--skin-muted:#5d526e;--skin-line:#242149;--skin-accent:#3549d6;--skin-soft:#ececfe;--skin-primary:#ff694f;--skin-primary-ink:#242149;--skin-shadow:#f3b3a2;--shell-ink:#242149;--shell-muted:#5d526e;--skin-secondary:#ffdc45;--skin-rail:#fffef9;--bg:var(--skin-bg);--card:var(--skin-paper);--ink:var(--skin-ink);--muted:var(--skin-muted);--line:var(--skin-line);--accent:var(--skin-accent);--accent-soft:var(--skin-soft);--green:var(--skin-accent);--shadow:6px 7px 0 var(--skin-shadow)}
:root[data-skin=space]{--skin-bg:#21124c;--skin-paper:#efffff;--skin-ink:#21124c;--skin-muted:#514368;--skin-line:#6e5a91;--skin-accent:#663296;--skin-soft:#e9def8;--skin-primary:#cbff63;--skin-primary-ink:#21124c;--skin-shadow:#12092c;--shell-ink:#fff;--shell-muted:#e0d3f3;--skin-secondary:#ffb5e9;--skin-rail:#ddd2f1}
:root[data-skin=maximal]{--skin-bg:#3055e8;--skin-paper:#fffef1;--skin-ink:#191839;--skin-muted:#5d3c58;--skin-line:#191839;--skin-accent:#b51e58;--skin-soft:#ffd4e8;--skin-primary:#ffdd36;--skin-primary-ink:#191839;--skin-shadow:#191839;--shell-ink:#fff7d5;--shell-muted:#fff7d5;--skin-secondary:#aaf367;--skin-rail:#ffb5d8}
body{background:var(--skin-bg);color:var(--shell-ink);background-image:radial-gradient(#c9a56c70 .8px,transparent .8px);background-size:22px 22px;scrollbar-color:var(--skin-accent) var(--skin-paper)}
[data-skin=space] body{background-image:radial-gradient(#8b76ad 1px,transparent 1.5px);background-size:58px 64px}
[data-skin=maximal] body{background-image:linear-gradient(#ffffff26 1px,transparent 1px),linear-gradient(90deg,#ffffff26 1px,transparent 1px);background-size:30px 30px;border-top:12px solid #ffdd36}
::selection{background:var(--skin-secondary);color:var(--skin-ink)}
button,input,textarea,select,summary{caret-color:var(--accent)}
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--skin-accent);outline-offset:3px}
.app{padding-top:max(24px,env(safe-area-inset-top))}.shell{max-width:1120px}.app-header{column-gap:16px}.brand h1{font-weight:800;letter-spacing:.02em}.app-header>.brand p{color:var(--shell-muted)}.app-header>.brand{min-width:170px}.app-header .logo{width:48px;height:48px;border-radius:16px;border:2px solid var(--skin-line);transform:rotate(-4deg)}
.app-header .top-actions{gap:8px;position:relative}.app-header .top-actions .btn{background:var(--card);border:2px solid var(--skin-line);color:var(--ink);box-shadow:0 3px 0 var(--skin-shadow);font-size:13px}
.app-header .subject-tabs{border:2px solid var(--skin-line);background:var(--card);height:52px;padding:3px;border-radius:15px}
.app-header .subject-tabs button{min-height:42px;color:var(--ink);border-radius:10px}.app-header .subject-tabs button[aria-selected=true]{background:var(--skin-primary);color:var(--skin-primary-ink)}
.account-bar{color:var(--shell-muted);font-size:12px;margin-top:12px}.study-panel{max-width:1060px;width:100%;margin:auto}.learning-aside{min-width:0}.learning-content{min-width:0}.side-intro{display:none}.skin-companion{display:none}
.library-switch{margin:22px 0 18px;border:0;padding:0;gap:7px}.library-switch select{background-color:var(--card);border:2px solid var(--skin-line);border-radius:16px;min-height:54px;padding:0 45px 0 14px;font-size:17px;box-shadow:3px 3px 0 var(--skin-shadow);color:var(--ink)}.library-switch label{color:var(--shell-muted)}
.toolbar{margin:18px 0}.segment{background:var(--skin-soft);border:2px solid var(--skin-line);padding:3px;border-radius:15px;gap:3px}.segment button{padding:0 24px;min-height:44px;color:var(--ink);font-weight:750;border-radius:10px}.segment button.active{background:var(--skin-accent);color:white;box-shadow:none}.filter-btn{color:var(--shell-ink)}.filter-btn.active{color:var(--ink);background:var(--skin-secondary)}.lengths{color:var(--shell-ink)}.chip{background:var(--card);border-color:var(--skin-line);color:var(--ink)}.chip.active{background:var(--skin-accent);color:white;border-color:var(--skin-accent)}
.progress{color:var(--shell-muted)}.progress-track{height:10px;border:1px solid var(--skin-line);background:var(--card);overflow:hidden}.progress-fill{background:var(--skin-primary)}
.flashcard{min-height:455px;border:3px solid var(--skin-line);border-radius:32px;box-shadow:var(--shadow);background:var(--card);color:var(--ink);overflow:visible;padding-top:76px}.card-wrap{position:relative}.card-wrap:before{content:"";position:absolute;z-index:2;pointer-events:none;top:-10px;left:44%;width:74px;height:22px;background:#b6e5ef;transform:rotate(-5deg)}.watermark{color:var(--muted)}.char,.word{color:var(--ink)}.guide{border-color:#e6dcc9}.guide:before,.guide:after{border-color:#e6dcc9}.pinyin,.word-pinyin{color:var(--skin-accent);font-weight:650}.example{color:var(--muted)}.speak,.favorite-btn{background:var(--skin-secondary);border:2px solid var(--skin-line);color:var(--ink)}.favorite-btn{background:var(--card)}.favorite-btn.active{background:var(--skin-secondary);border-color:var(--skin-line);color:var(--ink)}.card-note{color:var(--muted)}.empty h2{color:var(--ink)}.empty p{color:var(--muted)}.empty .big svg{max-width:100%}
.card-actions{gap:16px;margin-top:22px}.card-actions button,.math-bottom-actions button{border:2px solid var(--skin-line);box-shadow:0 4px 0 var(--skin-shadow);font-weight:800;color:var(--ink)}.card-actions .again{background:var(--card);color:var(--ink);border-color:var(--skin-line)}.card-actions .random,#mathNextBtn{background:var(--skin-primary);color:var(--skin-primary-ink);border-color:var(--skin-line);box-shadow:0 4px 0 var(--skin-shadow)}.footnote,.math-footnote{color:var(--shell-muted)}
.math-panel{max-width:960px;margin-top:26px}.math-heading p,.math-heading>span,.math-scope,.math-round,.math-options label{color:var(--shell-muted)}.math-mode-tabs{border-color:var(--shell-muted)}.math-mode-tabs button{color:var(--shell-muted)}.math-mode-tabs button[aria-selected=true]{background:var(--skin-secondary);color:var(--ink);border-bottom-color:var(--skin-line);border-radius:12px 12px 0 0}.math-options select{border:2px solid var(--skin-line);color:var(--ink)}
.math-learning{border:3px solid var(--skin-line);box-shadow:var(--shadow);color:var(--ink)}.math-card-top button{background:var(--skin-secondary);color:var(--ink);border:2px solid var(--skin-line)}.math-card-top,.math-caption,.math-number-name,.math-step-equation,.math-feedback{color:var(--ink)}.math-equation .answer{color:var(--accent)}.math-model,.model-group>span,.math-method-hint,#mathStepCount{color:var(--muted)}.math-helper summary{color:var(--accent)}.math-keypad button{background:white;color:var(--ink);border:2px solid var(--skin-line);box-shadow:0 2px 0 var(--skin-shadow)}.math-answer-form button[type=submit]{background:var(--skin-primary);color:var(--skin-primary-ink);border:2px solid var(--skin-line)}.math-answer-form input[readonly]{border:2px solid var(--skin-line)}.math-step-actions button{background:var(--skin-soft);color:var(--ink);border:2px solid var(--skin-line)}.math-bottom-actions button{background:var(--card)}.math-keypad .math-key-action{background:var(--skin-soft);color:var(--ink)}.math-keypad button:active{background:var(--skin-secondary);box-shadow:none;transform:translateY(2px)}
.library-panel,.confirm-dialog{color:var(--ink);background:var(--card);border:2px solid var(--skin-line);scrollbar-color:var(--skin-accent) var(--skin-paper)}.library-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.library-back{background:var(--skin-soft);color:var(--ink)}.dropzone{border-color:var(--skin-line);background:var(--skin-soft)}.dropzone label,.mini-actions .load{background:var(--skin-primary);color:var(--skin-primary-ink);border:2px solid var(--skin-line)}.count{background:var(--skin-soft);color:var(--ink)}.library-panel select,.library-panel textarea,.library-panel input{background-color:white;color:var(--ink)}
#emailDialog{--paper:var(--skin-paper);--canvas:var(--skin-bg);--ink:var(--skin-ink);--muted:var(--skin-muted);--line:var(--skin-line);--accent:var(--skin-accent);--soft:var(--skin-soft);--focus:var(--skin-accent);--hover:var(--skin-accent);border:2px solid var(--skin-line)}#emailDialog .primary-button{background:var(--skin-primary);color:var(--skin-primary-ink);border:2px solid var(--skin-line)}
.skin-picker{position:relative;flex-shrink:0;color:var(--ink)}.skin-picker>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;user-select:none}.skin-picker>summary::-webkit-details-marker{display:none}.skin-picker>summary svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.skin-menu{position:absolute;right:0;top:calc(100% + 12px);width:300px;max-width:calc(100vw - 32px);padding:18px;background:var(--card);border:2px solid var(--skin-line);border-radius:20px;box-shadow:0 12px 35px #00000035;z-index:48}.skin-menu h2{font-size:19px;margin:0 0 14px}.skin-menu p{font-size:13px;line-height:1.65;margin:12px 0 0;color:var(--muted)}.skin-option{width:100%;min-height:74px;display:flex;align-items:center;gap:12px;text-align:left;background:white;color:#242149;border:2px solid #d0c8d5;border-radius:14px;padding:10px;margin-top:10px}.skin-option[aria-pressed=true]{border-color:var(--skin-accent);box-shadow:inset 0 0 0 1px var(--skin-accent)}.skin-option strong{display:block;font-size:15px;line-height:1.5}.skin-option small{display:block;font-size:13px;color:#5d526e;margin-top:2px}.skin-selected{display:none;margin-left:auto;color:var(--skin-accent);flex-shrink:0}.skin-selected svg{width:20px;height:20px}.skin-option[aria-pressed=true] .skin-selected{display:block}.skin-swatch{width:48px;height:48px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border-radius:10px;overflow:hidden;border:1px solid #242149;flex-shrink:0}.skin-swatch i{background:var(--c)}.skin-sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skin-picker[open] .skin-menu{animation:skin-reveal .18s ease-out}@keyframes skin-reveal{from{clip-path:inset(0 0 15% 0 round 20px);transform:translateY(-4px)}to{clip-path:inset(0 round 20px);transform:translateY(0)}}
[data-skin=space] .app-header .top-actions .btn{background:#382367;color:#fff;border-color:#a68bbd}[data-skin=space] .app-header .subject-tabs{background:#12092c;border-color:#a68bbd}[data-skin=space] .app-header .subject-tabs button{color:white}[data-skin=space] .app-header .subject-tabs button[aria-selected=true]{color:var(--ink)}[data-skin=space] .flashcard{border-color:#12092c;box-shadow:inset 0 0 0 5px #c0efec,0 7px 0 #12092c}[data-skin=space] .card-wrap:before{display:none}[data-skin=space] .learning-aside{background:#ddd2f1}[data-skin=space] .math-learning{box-shadow:0 9px 0 #12092c;border-color:#12092c}
[data-skin=maximal] .flashcard{border-radius:10px;box-shadow:7px 7px 0 #191839}[data-skin=maximal] .card-wrap:before{background:#ffdd36;width:100px;height:24px;left:40%;transform:rotate(3deg)}[data-skin=maximal] .learning-aside{background:var(--skin-rail)}[data-skin=maximal] .segment{background:#ffb5d8}[data-skin=maximal] .segment button.active{background:#ffdd36;color:#191839}[data-skin=maximal] .app-header .subject-tabs button[aria-selected=true]{background:#ffdd36;color:#191839}
@media(min-width:1000px){#hanziStudy{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;margin-top:30px}.learning-aside{align-self:start;background:var(--skin-rail);border:2px solid var(--skin-line);border-radius:24px;padding:20px;color:var(--ink);box-shadow:4px 5px 0 var(--skin-shadow)}.side-intro{display:block;font-size:25px;font-weight:850;line-height:1.5;margin:0 0 20px}.side-intro span{background:var(--skin-secondary);padding:1px 4px}.skin-companion{display:block;margin-top:22px;text-align:center}.skin-companion img{width:116px;height:116px;object-fit:contain;border-radius:50%;border:2px solid var(--skin-line);background:var(--skin-secondary)}.skin-companion p{font-size:13px;margin:12px 0 0;line-height:1.8;color:var(--muted)}.learning-aside .library-switch{margin:0;gap:8px}.learning-aside .library-switch select{font-size:15px;min-height:52px;border-radius:12px;padding-left:10px;padding-right:34px;box-shadow:none}.learning-aside .library-switch label{color:var(--muted);font-size:13px}.learning-content .toolbar{margin-top:0}.learning-content .toolbar>.segment button{padding:0 22px}.learning-content .filter-btn{padding:0 10px}.learning-content .progress{margin-bottom:16px}[data-skin=maximal] .learning-aside{transform:rotate(-1deg)}}
@media(max-width:1150px){.app-header>.brand p{display:none}.app-header{column-gap:12px}.app-header .subject-tabs button{padding:0 11px}.app-header .top-actions .btn{padding:0 10px}}
@media(max-width:999px){.learning-aside{background:transparent!important}.app-header>.brand{min-width:150px}.app-header .subject-tabs button{padding:0 10px}.app-header .top-actions{gap:6px}.app-header .top-actions .btn{font-size:12px;padding:0 8px}.flashcard{min-height:440px}}
@media(max-width:900px){.app-header .subject-tabs{height:auto;min-height:46px;border:0;border-bottom:2px solid var(--shell-muted);border-radius:0;background:transparent;padding:0}.app-header .subject-tabs button{color:var(--shell-ink);border-radius:0;min-height:44px;padding:0 4px}.app-header .subject-tabs button[aria-selected=true]{background:transparent!important;color:var(--shell-ink)!important}.app-header .subject-tabs button[aria-selected=true]:after{background:var(--skin-primary);height:4px}.app-header .top-actions .btn{min-height:44px;height:44px}.library-switch{margin-top:20px}[data-skin=space] .app-header .subject-tabs{background:transparent;border-color:#9b85ba}}
@media(max-width:600px){.app{padding-left:14px;padding-right:14px;padding-top:max(16px,env(safe-area-inset-top))}.app-header .logo{width:38px;height:38px;border-radius:12px}.app-header>.brand{min-width:0}.app-header .brand h1{font-size:19px}.app-header .top-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}.app-header .top-actions .btn{font-size:12px;padding:0 9px}.app-header .top-actions .skin-picker>summary{padding:0 10px}.skin-picker>summary svg{width:17px;height:17px}.skin-menu{max-width:calc(100vw - 28px)}.library-switch select{font-size:16px}.toolbar{margin:16px 0}.toolbar>.segment{flex:1 0 100%}.toolbar>.segment button{flex:1;padding:0 10px;min-height:44px}.flashcard{min-height:380px;border-radius:24px;padding-left:14px;padding-right:14px}.card-wrap:before{height:18px;width:56px;top:-8px}.card-actions{gap:12px}.card-actions button{font-size:16px}.speak{right:14px}.favorite-btn{right:65px}.watermark{left:14px}.math-learning{padding:14px;border-radius:24px}.skin-menu{padding:16px}.library-panel{border-radius:22px}.math-active .app-header .brand h1{font-size:19px}}
@media(max-width:350px){.app{padding-left:10px;padding-right:10px}.app-header .top-actions{gap:4px}.app-header .top-actions .btn{padding:0 6px;font-size:12px}.app-header .top-actions .skin-picker>summary{padding:0 7px}.app-header .top-actions .skin-picker>summary svg{display:none}.skin-menu{max-width:calc(100vw - 20px)}}
@media(hover:hover){.skin-option:hover{border-color:var(--skin-accent)}.app-header .btn:hover,.card-actions button:hover{filter:brightness(.96)}}
@media(prefers-reduced-motion:reduce){.skin-picker[open] .skin-menu{animation:none}}

.skin-art{display:none;position:absolute;inset:0;pointer-events:none}
@media(min-width:1000px){[data-skin=juice] .skin-art{display:block}.flashcard:has(.word) .skin-art{display:none}.juice-sun{position:absolute;width:56px;height:56px;border:2px solid var(--ink);border-radius:50%;left:28px;top:156px;background:#ffdc45}.juice-sun:before{content:"";position:absolute;left:17px;top:18px;width:4px;height:6px;border-radius:50%;background:var(--ink);box-shadow:16px 0 var(--ink)}.juice-sun:after{content:"";position:absolute;left:20px;top:30px;width:15px;height:8px;border-bottom:2px solid var(--ink);border-radius:50%}.juice-flower{position:absolute;width:52px;height:52px;right:30px;bottom:93px}.juice-flower i{position:absolute;left:16px;top:0;width:20px;height:52px;border-radius:50%;background:#ff694f}.juice-flower i:nth-child(2){transform:rotate(60deg)}.juice-flower i:nth-child(3){transform:rotate(120deg)}.juice-flower b{position:absolute;left:18px;top:18px;width:16px;height:16px;background:#ffdc45;border-radius:50%}}
@media(hover:hover){#emailDialog .primary-button:hover{background:var(--skin-primary);filter:brightness(.96)}}

@media(max-width:600px){.skin-menu{position:fixed;top:calc(max(16px,env(safe-area-inset-top)) + 96px);right:14px;left:auto;width:min(330px,calc(100vw - 28px));max-height:calc(100dvh - 140px);overflow-y:auto}}
/* Approved round 04 additions: the same controls, two new visual worlds. */
:root[data-skin=monsters]{--skin-bg:#793cce;--skin-paper:#fffbe7;--skin-ink:#24173f;--skin-muted:#4a3159;--skin-line:#24173f;--skin-accent:#6831b9;--skin-soft:#ffb7df;--skin-primary:#d8f847;--skin-primary-ink:#24173f;--skin-shadow:#482365;--shell-ink:#fffbe7;--shell-muted:#fffbe7;--skin-secondary:#ffdf3c;--skin-rail:#ff91ca}
:root[data-skin=doodle]{--skin-bg:#ffef39;--skin-paper:#fffdf1;--skin-ink:#24203f;--skin-muted:#584262;--skin-line:#24203f;--skin-accent:#5a35c9;--skin-soft:#ffd2e9;--skin-primary:#6644e9;--skin-primary-ink:#fff;--skin-shadow:#c8a83b;--shell-ink:#24203f;--shell-muted:#3e2847;--skin-secondary:#ff8fc0;--skin-rail:#b9e862}
[data-skin=monsters] body{background-image:radial-gradient(#ab76e4 3px,transparent 3px);background-size:32px 32px}
[data-skin=doodle] body{background-image:radial-gradient(#e68a4f 1px,transparent 1px);background-size:19px 19px}
[data-skin=monsters] .app-header .top-actions .btn{background:#d8f847;color:#24173f}
[data-skin=monsters] .app-header .subject-tabs{background:#ffb7df}
[data-skin=monsters] .flashcard{border-radius:84px 84px 24px 24px;padding-top:100px;border-color:#24173f;box-shadow:0 9px 0 #482365}
[data-skin=monsters] .card-wrap:before{display:none}
[data-skin=monsters] .math-learning{border-radius:50px 50px 24px 24px}
[data-skin=monsters] .segment{background:#ff91ca}
[data-skin=monsters] .segment button.active{background:#d8f847;color:#24173f}
[data-skin=monsters] .learning-content{background:#ff91ca;border:3px solid #24173f;border-radius:70px 70px 24px 24px;padding:20px;color:#24173f}
[data-skin=monsters] .learning-content .progress,[data-skin=monsters] .learning-content .filter-btn,[data-skin=monsters] .learning-content .lengths,[data-skin=monsters] .learning-content .footnote{color:#24173f}
[data-skin=monsters] .learning-content .filter-btn.active{background:#d8f847}
[data-skin=monsters] .learning-aside{background:#ff91ca}
[data-skin=monsters] .skin-companion img{display:none}
.theme-buddy{display:none}
[data-skin=monsters] .theme-buddy{display:block;position:relative;width:120px;height:120px;margin:25px auto 14px;background:#53d8ca;border:3px solid #24173f;border-radius:48% 48% 30% 30%;transform:rotate(7deg)}
.theme-buddy:before{content:"";position:absolute;left:22px;top:25px;width:24px;height:34px;border:2px solid #24173f;border-radius:50%;background:white;box-shadow:43px 0 white}
.theme-buddy:after{content:"";position:absolute;left:34px;top:73px;width:45px;height:23px;background:#24173f;border-radius:0 0 25px 25px}
.theme-buddy i{position:absolute;left:30px;top:37px;width:9px;height:15px;border-radius:50%;background:#24173f;box-shadow:43px 0 #24173f}
[data-skin=doodle] .app-header{background:#ff8fc0;border:2px solid #24203f;border-radius:20px;padding:12px 14px}
[data-skin=doodle] .card-wrap:before{background:#6644e9;left:12%;transform:rotate(-11deg);border:1px solid #24203f;width:94px;height:27px}
[data-skin=doodle] .card-wrap:after{content:"";position:absolute;z-index:2;pointer-events:none;right:8%;top:-10px;width:80px;height:25px;background:#ff8fc0;border:1px solid #24203f;transform:rotate(9deg)}
[data-skin=doodle] .flashcard{border-radius:12px;box-shadow:6px 8px 0 #c8a83b}
[data-skin=doodle] .learning-aside{border-radius:12px 24px 12px 20px}
[data-skin=doodle] .progress-track{background:#fffdf1}
.skin-menu{max-height:min(680px,calc(100dvh - 130px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) var(--card)}
@media(min-width:1000px){[data-skin=monsters] #hanziStudy{grid-template-columns:220px minmax(0,1fr);gap:22px}[data-skin=monsters] .learning-content .segment button{padding:0 15px}[data-skin=monsters] .learning-content .toolbar{flex-wrap:wrap}[data-skin=monsters] .learning-content .progress{gap:8px}[data-skin=monsters] .learning-aside .library-switch select{font-size:14px;padding-right:29px}}
@media(max-width:999px){[data-skin=monsters] .learning-content{border-radius:42px 42px 20px 20px;padding:16px}[data-skin=monsters] .learning-aside{background:transparent}}
@media(max-width:900px){[data-skin=monsters] .app-header .subject-tabs{background:transparent;border-color:#fffbe7}}
@media(max-width:600px){[data-skin=monsters] .learning-content{border-width:2px;padding:10px;border-radius:30px 30px 20px 20px}[data-skin=monsters] .flashcard{border-radius:40px 40px 20px 20px;padding-top:90px}[data-skin=monsters] .watermark{left:10px;top:35px;font-size:12px}[data-skin=monsters] .favorite-btn{right:58px;top:22px;padding:0 6px;font-size:12px}[data-skin=monsters] .speak{right:9px;top:22px}[data-skin=monsters] .math-learning{border-radius:30px 30px 20px 20px}[data-skin=doodle] .app-header{padding:10px;border-radius:16px}[data-skin=doodle] .card-wrap:before{width:65px;height:20px}[data-skin=doodle] .card-wrap:after{width:58px;height:19px}}