:root{--bg:#0D0A08;--bg2:#141110;--card:#1E1915;--card2:#28221C;--border:#362E25;--fg:#F5EDE6;--fg2:#B5A597;--muted:#7A6B5D;--accent:#C83525;--accent2:#E04535;--gold:#D4A64F;--green:#38A96A;--green2:#58C88A;--blue:#4898D5;--purple:#9868D5}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden}
.fc{font-family:'Noto Serif SC',serif}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.nb{backdrop-filter:blur(20px);background:rgba(13,10,8,.92);border-bottom:1px solid var(--border);position:fixed;top:0;left:0;right:0;z-index:100}
.nl{color:var(--fg2);transition:color .3s;font-size:12px;font-weight:600;text-decoration:none}.nl:hover{color:var(--fg)}
.cd{background:var(--card);border:1px solid var(--border);border-radius:16px;transition:all .3s ease}
.cd:hover{border-color:rgba(200,53,37,.25)}
.bp{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:12px;padding:12px 24px;font-weight:700;font-size:14px;cursor:pointer;transition:all .3s;font-family:inherit}
.bp:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,53,37,.35)}
.bo{background:transparent;color:var(--gold);border:1.5px solid var(--gold);border-radius:12px;padding:10px 22px;font-weight:700;font-size:13px;cursor:pointer;transition:all .3s;font-family:inherit}
.bo:hover{background:rgba(212,166,79,.08);transform:translateY(-2px)}
.bq{background:var(--card2);border:1.5px solid var(--border);color:var(--fg);border-radius:12px;padding:12px 15px;font-size:14px;cursor:pointer;transition:all .25s;text-align:left;width:100%;font-family:inherit}
.bq.ok{border-color:var(--green)!important;background:rgba(56,169,106,.1)!important;color:var(--green2)!important}
.bq.no{border-color:var(--accent)!important;background:rgba(200,53,37,.1)!important;color:var(--accent2)!important}
.bq:disabled{cursor:default;opacity:.55}
.sl{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;margin-bottom:10px}
.sl::before{content:'';width:22px;height:2px;background:var(--gold);border-radius:1px}
.pf{height:100%;border-radius:3px;transition:width .5s ease}
.tb{padding:8px 16px;border-radius:10px;font-weight:600;font-size:12px;cursor:pointer;transition:all .25s;background:transparent;color:var(--muted);border:none;font-family:inherit;white-space:nowrap}
.tb.on{background:var(--accent);color:#fff}.tb:hover:not(.on){color:var(--fg);background:var(--card2)}
.hc{position:absolute;font-family:'Noto Serif SC',serif;color:rgba(200,53,37,.04);font-weight:900;animation:cu 28s infinite linear;pointer-events:none}
@keyframes cu{0%{transform:translateY(110vh) rotate(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(-10vh) rotate(360deg);opacity:0}}
.sp-btn{display:inline-flex!important;width:20px!important;height:20px!important;border-radius:50%!important;align-items:center!important;justify-content:center!important;background:rgba(72,152,213,0.08)!important;color:var(--blue)!important;cursor:pointer!important;margin-left:6px!important;vertical-align:middle!important;transition:background 0.2s!important;border:none!important;padding:0!important;outline:none!important}.sp-btn:hover{background:rgba(72,152,213,0.18)!important}.sp-btn i{font-size:8px!important}.flip{perspective:1000px;cursor:pointer}.fi{position:relative;width:100%;height:100%;transition:transform .55s ease;transform-style:preserve-3d}
.flip.on .fi{transform:rotateY(180deg)}.ff,.fb{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;padding:20px}
.ff{background:var(--card);border:1px solid var(--border)}.fb{background:var(--card2);border:1px solid var(--gold);transform:rotateY(180deg)}
.cb{width:98%;max-width:98%;padding:14px 20px;border-radius:14px;font-size:15px;line-height:1.7;animation:bi .3s ease-out;margin:4px auto}
.cai{background:var(--card2);border:1px solid var(--border);border-bottom-left-radius:4px;align-self:center}
.cus{background:var(--card2);color:var(--fg);border:1px solid var(--border);border-bottom-right-radius:4px;align-self:center}
.csys{background:rgba(72,152,213,.08);border:1px solid rgba(72,152,213,.25);border-radius:14px;align-self:center;text-align:center;padding:12px 20px;font-size:13px;color:var(--blue);animation:bi .3s ease-out;max-width:90%}
.cwarn{background:rgba(212,166,79,.08);border:1px solid rgba(212,166,79,.25);border-radius:14px;align-self:center;text-align:center;padding:10px 18px;font-size:12px;color:var(--gold);animation:bi .3s ease-out;max-width:90%}
@keyframes bi{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.td span{width:7px;border-radius:2px;background:var(--accent);display:inline-block;margin:0 1.5px;animation:wv .7s infinite ease-in-out}
.td span:nth-child(1){animation-delay:0s;height:6px}.td span:nth-child(2){animation-delay:.1s;height:14px}.td span:nth-child(3){animation-delay:.2s;height:20px}.td span:nth-child(4){animation-delay:.3s;height:14px}.td span:nth-child(5){animation-delay:.4s;height:6px}
@keyframes wv{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.td.off span{animation-play-state:paused}
.fu{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(.4,0,.2,1)}.fu.v{opacity:1;transform:translateY(0)}
.tst{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--card);border:1px solid var(--border);padding:12px 24px;border-radius:14px;font-size:14px;z-index:9999;transition:transform .35s ease;box-shadow:0 12px 40px rgba(0,0,0,.5);white-space:nowrap;max-width:90vw}
.tst.show{transform:translateX(-50%) translateY(0)}
.srb{width:68px;height:68px;border-radius:50%;border:3px solid var(--accent);background:rgba(200,53,37,.08);cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
.srb:hover{background:rgba(200,53,37,.15);transform:scale(1.05)}
.srb.on{border-color:var(--green);background:rgba(56,169,106,.12);animation:pu 1.2s infinite}
@keyframes pu{0%,100%{box-shadow:0 0 0 0 rgba(56,169,106,.3)}50%{box-shadow:0 0 0 16px rgba(56,169,106,0)}}
.srs{width:48px;height:48px;border-radius:50%;border:2px solid var(--blue);background:rgba(72,152,213,.08);cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
.srs:hover{background:rgba(72,152,213,.15);transform:scale(1.08)}
.ldd{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.mn{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(13,10,8,.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:90;padding:6px 0 max(env(safe-area-inset-bottom),6px)}
@media(max-width:768px){.mn{display:flex}.dn{display:none!important}body{padding-bottom:68px}}
.mnb{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;color:var(--muted);font-size:9px;font-weight:700;cursor:pointer;transition:color .25s;background:none;border:none;font-family:inherit}
.mnb.act{color:var(--accent)}.mnb i{font-size:18px}
.sk{animation:fl 1.4s infinite alternate}@keyframes fl{0%{transform:scale(1) rotate(-2deg)}100%{transform:scale(1.12) rotate(2deg)}}
@keyframes sp{0%,100%{opacity:.3}50%{opacity:1}}
.score-ring{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.pyc{padding:10px 6px;border-radius:10px;text-align:center;cursor:pointer;transition:all .25s;background:var(--card2);border:1px solid transparent}
.pyc:hover{border-color:var(--gold);background:rgba(212,166,79,.06)}
.tl{stroke:var(--gold);stroke-width:2.5;fill:none;stroke-linecap:round}
.tut-input{flex:1;padding:10px 14px;border-radius:12px;font-size:14px;outline:none;font-family:'Noto Serif SC','DM Sans',sans-serif;background:var(--card2);border:1.5px solid var(--border);color:var(--fg);min-width:0}
.tut-input:focus{border-color:var(--accent)}
.tut-input::placeholder{color:var(--muted);font-family:'DM Sans',sans-serif;font-size:12px}
.tut-submit{padding:10px 20px;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer;transition:all .3s;font-family:inherit;background:var(--accent);color:#fff;border:none;white-space:nowrap;flex-shrink:0}
.tut-submit:hover{background:var(--accent2);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 3D Flashcard styles */
.perspective-container { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }
.flipped { transform: rotateY(180deg); }

/* Writing canvas styles */
.wcv { background: var(--card2); border: 2px solid var(--border); border-radius: 12px; cursor: crosshair; touch-action: none; display: block; }

.theme-jade { --accent: #2e8b57 !important; --accent2: #3cb371 !important; }
.theme-sapphire { --accent: #1e90ff !important; --accent2: #00bfff !important; }
.theme-amber { --accent: #ff8c00 !important; --accent2: #ffa500 !important; }

.cd:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(200, 53, 37, 0.15); border-color: var(--accent) !important; }
.float-char { position: absolute; font-family: 'Noto Serif SC', serif; color: rgba(245, 237, 230, 0.025); font-weight: 800; pointer-events: none; z-index: 1; animation: floatUp 15s linear infinite; }
@keyframes floatUp { 0% { transform: translateY(105vh) rotate(0deg); opacity: 0; } 10% { opacity: 0.4; } 90% { opacity: 0.4; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } }

.voice-wave-container { display: inline-flex; align-items: center; gap: 3px; height: 20px; margin-left: 8px; }
.voice-wave-bar { width: 3px; height: 6px; background: var(--accent); border-radius: 2px; animation: pulseWave 1s ease-in-out infinite alternate; }
.voice-wave-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; background: var(--gold); }
.voice-wave-bar:nth-child(3) { height: 16px; animation-delay: 0.3s; background: var(--green); }
.voice-wave-bar:nth-child(4) { height: 10px; animation-delay: 0.45s; background: var(--blue); }
.voice-wave-bar:nth-child(5) { height: 5px; animation-delay: 0.6s; background: var(--accent2); }
@keyframes pulseWave { 0% { transform: scaleY(0.4); } 100% { transform: scaleY(1.4); } }

@media (max-width: 767px) {
  #tutor { padding-left: 4px !important; padding-right: 4px !important; padding-top: 24px !important; padding-bottom: 24px !important; }
  #tutor > div { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
.dict-tab{padding:6px 16px;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;background:var(--card2);color:var(--muted);border:none;font-family:inherit;transition:all .25s}
.dict-tab.on{background:var(--accent);color:#fff}
.dict-tab:hover:not(.on){color:var(--fg)}
.dict-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .2s;border:1px solid var(--border);background:var(--card)}
.dict-item:hover{border-color:var(--gold);background:var(--card2)}
.dict-cn{width:60px;text-align:center}
#dictSearch{padding:10px 14px;border-radius:10px;font-size:14px;outline:none;font-family:'Noto Serif SC','DM Sans',sans-serif;background:var(--card2);border:1.5px solid var(--border);color:var(--fg);min-width:0;flex:1}
#dictSearch:focus{border-color:var(--accent)}
#dictSearch::placeholder{color:var(--muted);font-family:'DM Sans',sans-serif}
#dictList{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;max-height:500px;overflow-y:auto;padding:4px}
#trInput{width:100%;padding:12px 16px;border-radius:12px;font-size:14px;outline:none;font-family:'Noto Serif SC','DM Sans',sans-serif;background:var(--card2);border:1.5px solid var(--border);color:var(--fg);min-height:80px;resize:vertical}
#trInput:focus{border-color:var(--accent)}
#trInput::placeholder{color:var(--muted)}
#trOutput{padding:14px;border-radius:12px;background:var(--card2);border:1px solid var(--border);font-size:14px;min-height:60px;line-height:1.7}