:root{ --bg:#f7f6f3; --card:#ffffff; --primary:#f9c784; --secondary:#b8e0d2; --accent:#fae38f; --text:#2f2f2f; --radius:18px; --shadow:0 6px 16px rgba(0,0,0,.12); }
*{box-sizing:border-box;font-family:Roboto,Inter,Nunito,sans-serif;}
body{margin:0;background:var(--bg);color:var(--text);display:flex;flex-direction:column;height:100vh;}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);box-shadow:var(--shadow);}
.header-left{display:flex;align-items:center;}
.app-title{font-size:2.4em;font-weight:700;}
.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.app-header button{border:none;border-radius:12px;padding:10px 16px;cursor:pointer;background:var(--secondary);font-size:1.1em;transition:transform .15s;min-width:90px;}
.app-header button:hover{transform:scale(1.05);}
.lang-toggle{font-size:1.6em;padding:8px 12px;}
#app{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px;}
.word-box{font-size:3em;background:var(--accent);padding:16px 48px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;min-height:1.6em;display:flex;align-items:center;justify-content:center;width:80%;max-width:900px;}
.timer{height:1.6em;min-height:1.6em;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.mem-progress{width:80%;max-width:900px;height:10px;background:rgba(0,0,0,.1);border-radius:6px;overflow:hidden;margin-bottom:14px;opacity:0;transition:opacity .3s;}
.mem-progress.active{opacity:1;}
.mem-bar{height:100%;width:0%;background:var(--primary);transition:width .2s linear;}

/* BOARD */
.board{ display:grid; gap:10px; width:100%; max-width:900px; }
.board.mem-hidden{visibility:hidden;}
.card-btn{ min-width:0; font-size:2.2em; border-radius:var(--radius); border:none; background:var(--primary); box-shadow:inset 0 -6px var(--secondary),var(--shadow); cursor:pointer; transition:transform .2s; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; word-break:break-word; height:auto; }
.card-btn:active{transform:scale(.95);}
.card-btn.disabled{pointer-events:none;opacity:.6;}
.card-btn .ch{font-size:1em;line-height:1em;}
.card-btn .pin{font-size:0.5em;color:rgba(0,0,0,0.6);display:block;line-height:1.1em;margin-top:2px;}
.card-btn.correct{background:#b8e0d2;}
.card-btn.wrong{background:#f3b0a2;}
.card-btn.fade-in{opacity:0;transform:scale(0.8);animation:btnFadeIn .3s forwards;}
@keyframes btnFadeIn{to{opacity:1;transform:scale(1);}}
.card-btn.jump{animation:jump 180ms ease;}
@keyframes jump{0%{transform:translateY(0);}30%{transform:translateY(-8px);}60%{transform:translateY(2px);}100%{transform:translateY(0);}}

.app-footer{padding:12px;text-align:center;background:var(--card);font-size:1em;}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;padding:16px;}
.modal-content{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:500px;max-height:85vh;overflow-y:auto;padding:24px;}
.modal-content::-webkit-scrollbar{width:6px;}
.modal-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:6px;}
.modal-content h2{margin-top:0;text-align:center;font-size:1.6em;}
.modal-content button{width:100%;font-size:1.2em;padding:10px 0;}
.modal-content label{display:block;margin-top:14px;font-weight:500;}
.modal-content select,.modal-content input[type="range"],.modal-content input[type="number"]{width:100%;margin-top:8px;}
.voclist-container{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.time-row{display:flex;gap:10px;align-items:center;}
.actions{display:flex;justify-content:space-between;margin-top:18px;}
.actions button{flex:1;margin:0 6px;}
.toast{position:fixed;bottom:80px;background:var(--secondary);padding:12px 20px;border-radius:12px;box-shadow:var(--shadow);animation:fade 2s forwards;font-size:1.1em;}
@keyframes fade{0%{opacity:1;}100%{opacity:0;}}
#pinyin-option{display:none;align-items:center;justify-content:space-between;margin-top:14px;padding:10px 14px;background:var(--bg);border-radius:12px;}
#pinyin-option span{font-weight:500;font-size:1em;}
.switch{position:relative;display:inline-block;width:52px;height:28px;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:28px;transition:.25s;}
.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.switch input:checked+.slider{background:var(--primary);}
.switch input:checked+.slider:before{transform:translateX(24px);}
.hidden{display:none!important;}