*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f0f4f8;--surface:#fff;--text:#1a202c;--text-muted:#718096;--border:#e2e8f0;--accent:#4a6fa5;--again:#e53e3e;--hard:#dd6b20;--good:#38a169;--easy:#3182ce}body{background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex}#app{flex-direction:column;width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:0 16px;display:flex}header{text-align:center;padding:24px 0 16px}h1{color:var(--accent);letter-spacing:.05em;margin-bottom:12px;font-size:1.5rem;font-weight:700}#list-select{appearance:none;background:var(--surface);border:1.5px solid var(--border);color:var(--text);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border-radius:8px;width:100%;max-width:300px;margin-bottom:10px;padding:6px 32px 6px 12px;font-family:inherit;font-size:.82rem;font-weight:500}#list-select:focus{border-color:var(--accent);outline:none}#stats{justify-content:center;gap:12px;display:flex}.stat-progress{color:var(--text-muted);letter-spacing:.03em;font-size:.95rem;font-weight:600}main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:16px 0 32px;display:flex}#card-container{perspective:1000px;width:100%}.card{cursor:pointer;border-radius:16px;outline:none;width:100%;height:260px}.card:focus .card-inner{box-shadow:0 0 0 3px var(--accent), 0 8px 32px #0000001f}.card-inner{width:100%;height:100%;transform-style:preserve-3d;border-radius:16px;transition:transform .45s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 4px 24px #0000001a}.card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;background:var(--surface);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;padding:24px;display:flex;position:absolute}.card-back{background:#f7faff;transform:rotateY(180deg)}.card:not(.flipped) .card-back{visibility:hidden}.card-category{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem;font-weight:600;position:absolute;top:16px}.card-word{text-align:center;color:var(--text);font-size:2rem;font-weight:700;line-height:1.2}.card-back .card-word{color:var(--accent);font-size:2.2rem}.card-hint{color:var(--text-muted);font-size:.78rem;position:absolute;bottom:16px}.card-pronunciation{color:var(--text-muted);font-size:.9rem;font-style:italic;position:absolute;bottom:16px}#answer-buttons{gap:8px;width:100%;display:flex}.btn-answer{cursor:pointer;color:#fff;border:none;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px 8px;font-family:inherit;transition:transform .1s,opacity .1s;display:flex}.btn-answer:hover{opacity:.88;transform:translateY(-1px)}.btn-answer:active{transform:translateY(0)}.btn-again{background:var(--again)}.btn-hard{background:var(--hard)}.btn-good{background:var(--good)}.btn-easy{background:var(--easy)}.btn-label{font-size:.85rem;font-weight:600}.btn-key{opacity:.75;background:#00000026;border-radius:4px;padding:1px 5px;font-size:.7rem}#session-done{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:32px 16px;display:flex}.done-icon{color:var(--good);background:#c6f6d5;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:3rem;display:flex}#session-done h2{color:var(--text);font-size:1.4rem}#session-done p{color:var(--text-muted);font-size:.95rem}#btn-reset-session,#btn-reset-all{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-family:inherit;font-size:.9rem;font-weight:600}#btn-reset-session{background:var(--accent);color:#fff}#btn-reset-all{background:var(--border);color:var(--text-muted);font-size:.8rem}#progress-bar-container{background:var(--border);height:4px;position:fixed;bottom:0;left:0;right:0}#progress-bar{background:var(--accent);width:0%;height:100%;transition:width .4s}.hidden{display:none!important}