:root{--glass: rgba(255,255,255,.1);--glass2: rgba(255,255,255,.14);--stroke: rgba(255,255,255,.18);--stroke2: rgba(255,255,255,.12);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.66);--shadow: 0 22px 70px rgba(0,0,0,.4);--shadow2: 0 12px 30px rgba(0,0,0,.25);--radius-xl: 26px;--radius-lg: 18px;--radius-md: 14px}.app{width:min(980px,100%);padding:0;color:var(--text)}.shell{width:100%;height:calc(100vh - 40px);max-height:920px;background:#ffffff14;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-xl);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:16px;display:flex;flex-direction:column;gap:12px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-weight:980;letter-spacing:-.6px;font-size:24px}.import{border:1px solid var(--stroke);background:#ffffff1f;color:var(--text);padding:10px 14px;border-radius:14px;font-weight:950;cursor:pointer;box-shadow:0 10px 24px #0000002e;transition:transform .12s ease,background .12s ease}.import:hover{transform:translateY(-1px);background:#ffffff29}.import:active{transform:translateY(0) scale(.99)}.meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.stats{font-size:13px;font-weight:750;color:var(--muted)}.pillRow{display:flex;gap:8px;flex-wrap:wrap}.pill{border:1px solid var(--stroke2);background:#ffffff14;padding:6px 10px;border-radius:999px;font-weight:950;font-size:12.5px;color:#ffffffe0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.search{flex:1;min-width:240px;padding:10px 12px;border-radius:14px;border:1px solid var(--stroke);font-weight:850;background:#ffffff1a;color:var(--text);outline:none}.search::placeholder{color:#ffffff8c}.controls select{padding:10px 12px;border-radius:14px;border:1px solid var(--stroke);font-weight:950;background:#ffffff1a;color:var(--text);outline:none;appearance:none}.toggle{display:flex;align-items:center;gap:8px;font-weight:900;color:#ffffffdb}.progressWrap{width:100%}.progressLabel{font-size:12.5px;color:var(--muted);font-weight:750;margin:0 0 6px}.progressBar{width:100%;height:8px;border-radius:999px;background:#ffffff1a;border:1px solid rgba(255,255,255,.14);overflow:hidden}.progressFill{height:100%;background:linear-gradient(90deg,#6ed2fff2,#8c78fff2,#ff78aaf2)}.modeRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.resetBtn{border:1px solid var(--stroke);background:#ffffff1a;color:var(--text);padding:10px 14px;border-radius:14px;font-weight:950;cursor:pointer}.segmented{display:flex;gap:6px;padding:6px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.14);flex-wrap:wrap}.segmented button{border:1px solid transparent;background:transparent;color:var(--text);font-weight:950;padding:10px 14px;border-radius:999px;cursor:pointer;transition:background .12s ease,transform .12s ease}.segmented button:hover{background:#ffffff1a;transform:translateY(-1px)}.segmented button.active{background:#ffffff2e;border-color:#ffffff2e}.mainArea{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.card{border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 70px #00000059}.flipCard{perspective:1400px;height:100%}.flipInner{will-change:transform;transform:translateZ(0);outline:1px solid transparent;border-radius:var(--radius-xl);background:linear-gradient(180deg,#ffffff24,#ffffff0f);box-shadow:var(--shadow2);overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:none!important}.flipFace{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}.flipBack{transform:rotateY(180deg);align-items:stretch;justify-content:stretch}.front{font-size:clamp(44px,6vw,82px);font-weight:980;letter-spacing:-1px;text-shadow:0 10px 32px rgba(0,0,0,.35);padding:20px}.badge{position:absolute;top:16px;z-index:5;background:#0000002e;border:none;border-radius:999px;padding:8px 10px;display:inline-flex;align-items:baseline;gap:6px;min-width:auto;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.badgeLeft{left:16px}.badgeRight{right:16px}.badgeKo{font-weight:950;font-size:13px;line-height:1;letter-spacing:-.2px}.badgeEn{font-weight:850;font-size:12px;opacity:.75;line-height:1}.backWrap{width:100%;height:100%;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:12px}.backMain{font-size:26px;font-weight:950;text-align:center}.muted{color:var(--muted);font-weight:800}.note,.examples{border:1px solid rgba(255,255,255,.16);background:#ffffff14;border-radius:16px;padding:12px;text-align:left}.noteTitle,.examplesTitle{font-weight:950;margin-bottom:6px}.noteBody{white-space:pre-line;opacity:.9;font-weight:700}.examples ul{margin:0;padding-left:18px}.examples li{margin:4px 0;font-weight:700;opacity:.9}.buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.buttons button{border:1px solid rgba(255,255,255,.18);background:#ffffff1a;color:var(--text);font-weight:980;border-radius:16px;padding:14px 18px;cursor:pointer}.buttons .danger{background:#ff5a6e2e}.buttons .neutral{background:#ffffff1a}.buttons .good{background:#50dc8c2e}.navRow{display:flex;gap:10px;justify-content:center}.miniBtn{border:1px solid rgba(255,255,255,.18);background:#ffffff1a;color:var(--text);font-weight:950;border-radius:14px;padding:10px 14px;cursor:pointer}.typingBox{width:min(560px,100%);display:flex;flex-direction:column;gap:10px;padding:22px}.typingPrompt{font-size:20px;font-weight:980;opacity:.95}.typingForm{display:flex;gap:10px}.typingInput{flex:1;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);font-weight:900;font-size:16px;background:#ffffff1a;color:var(--text);outline:none}.typingInput::placeholder{color:#ffffff8c}.typingResult{font-weight:980;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:#ffffff14}.typingResult.ok{border-color:#6ef0be59;background:#6ef0be1f}.typingResult.close{border-color:#ffd26e59;background:#ffd26e1f}.typingResult.bad{border-color:#ff788c59;background:#ff788c1f}.knownPage{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}.knownHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.knownHeader h2{margin:0;font-weight:980;letter-spacing:-.4px}.knownList{flex:1;min-height:0;overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:10px}.knownRow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#ffffff14;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px}.knownMain{text-align:left}.knownWord{font-weight:980;font-size:18px}.knownMeta{color:var(--muted);font-weight:750;margin-top:4px}p{color:var(--muted);font-weight:700;margin:0}.shell{outline:none!important}:root{--bg1:#0b1220;--bg2:#1b2a4a;--glass: rgba(255,255,255,.1);--glass2: rgba(255,255,255,.14);--stroke: rgba(255,255,255,.18);--stroke2: rgba(255,255,255,.12);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.68);--shadow: 0 22px 70px rgba(0,0,0,.4);--shadow2: 0 12px 30px rgba(0,0,0,.25)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;display:flex;justify-content:center;align-items:flex-start;padding:18px 12px;overflow:hidden;background:linear-gradient(180deg,var(--bg1),var(--bg2))}body:before{content:"";position:fixed;inset:-20%;pointer-events:none;background:radial-gradient(700px 520px at 15% 20%,rgba(66,85,255,.55),transparent 60%),radial-gradient(680px 520px at 85% 25%,rgba(255,115,140,.45),transparent 60%),radial-gradient(760px 560px at 40% 90%,rgba(110,240,190,.35),transparent 62%);filter:blur(22px) saturate(120%);opacity:.95;transform:translateZ(0);animation:floatBlobs 14s ease-in-out infinite alternate}body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.08),transparent 55%);opacity:.6}#root{width:100%;display:flex;justify-content:center}@keyframes floatBlobs{0%{transform:translate3d(-2%,-1%,0) scale(1.02)}50%{transform:translate3d(2%,1%,0) scale(1.06)}to{transform:translate3d(-1%,2%,0) scale(1.03)}}