:root{--bg:#eef2f7;--card-bg:#fff;--ink:#1f2d3d;--ink-2:#4a5b72;--ink-dim:#8895a8;--border:#dde4ec;--accent:#1d4d80;--accent-2:#2563a1;--green:#2da94f;--green-2:#248c41;--orange:#e89215;--red:#d64545;--red-bg:#fff0f0;--shadow:0 1px 3px #1c32500f, 0 4px 12px #1c32500a;--shadow-lg:0 4px 16px #1c325014, 0 8px 32px #1c32500f;--radius:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;padding:0}button{cursor:pointer;border:none;font-family:inherit}.page{max-width:720px;margin:0 auto;padding:32px 20px 80px}.app-header{text-align:center;margin-bottom:28px}.app-header h1{color:var(--ink);margin:0 0 4px;font-size:28px}.app-header .sub{color:var(--ink-dim);margin:0;font-size:14px}.back-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.back-link,.mute-toggle{color:var(--ink-2);background:0 0;border-radius:6px;padding:6px 10px;font-size:14px}.back-link:hover,.mute-toggle:hover{color:var(--accent);background:#1d4d800f}.mute-toggle{font-size:18px;line-height:1}.error{background:var(--red-bg);color:var(--red);border:1px solid #f5c2c2;border-radius:8px;margin:12px 0;padding:10px 14px}.info{color:var(--green-2);background:#e8f6ec;border:1px solid #b9deca;border-radius:8px;margin:12px 0;padding:10px 14px}.loading{color:var(--ink-dim);text-align:center;margin:24px 0}.stats-row{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;display:grid}.stat-card{background:var(--card-bg);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);padding:14px 12px}.stat-card .num{margin-bottom:6px;font-size:28px;font-weight:700;line-height:1}.stat-card .lbl{color:var(--ink-dim);font-size:13px}.stat-card.done .num{color:var(--green)}.stat-card.repeat .num{color:var(--orange)}.stat-card.total .num{color:var(--accent)}.stat-card.streak .num{color:#d35400}.progress-bar{background:#d8e0eb;border-radius:3px;height:6px;margin:16px 0 24px;overflow:hidden}.progress-fill{background:var(--green);height:100%;transition:width .3s}.card-stage{perspective:1200px;margin-bottom:20px;position:relative}.grat-overlay{color:#fff;border-radius:var(--radius);pointer-events:none;z-index:10;text-align:center;background:#2da94feb;justify-content:center;align-items:center;padding:24px;font-size:32px;font-weight:700;animation:.8s ease-out forwards gratPop;display:flex;position:absolute;inset:0}.grat-overlay.streak{background:linear-gradient(135deg,#ff7e3a 0%,#d35400 100%);font-size:36px}@keyframes gratPop{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1.05)}40%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.flipper{width:100%;min-height:240px;transform-style:preserve-3d;cursor:pointer;transition:transform .5s;position:relative}.flipper.flipped{transform:rotateY(180deg)}.flipper.correct-flash .card.front{border-color:var(--green);box-shadow:0 0 0 3px #2da94f33, var(--shadow-lg)}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);backface-visibility:hidden;text-align:center;box-shadow:var(--shadow);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:36px 24px;transition:border-color .2s,box-shadow .2s;display:flex;position:absolute;inset:0}.card.back{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotateY(180deg)}.eyebrow{letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-dim);font-size:11px;font-weight:600}.eyebrow.back{color:#ffffffa6}.word{color:var(--ink);font-size:30px;font-weight:700}.word.back{color:#fff}.prompt-on-back{color:#ffffffa6;margin-bottom:4px;font-size:16px;font-weight:500}.hint{color:var(--ink-dim);font-size:14px}.hint.back{color:#ffffffbf}.click-hint{color:var(--ink-dim);margin-top:12px;font-size:12px;font-style:italic}.answer-row{gap:10px;margin-bottom:12px;display:flex}.answer-row input{background:var(--card-bg);color:var(--ink);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);outline:none;flex:1;padding:14px 16px;font-family:inherit;font-size:16px;transition:border-color .15s}.answer-row input::placeholder{color:var(--ink-dim)}.answer-row input:focus{border-color:var(--accent)}.answer-row input.ok{border-color:var(--green);background:#f3faf5}.answer-row input.bad{border-color:var(--red);background:var(--red-bg)}.submit-arrow{background:var(--accent);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);min-width:60px;padding:0 20px;font-size:20px;font-weight:600}.submit-arrow:hover{background:var(--accent-2)}.feedback{text-align:center;border-radius:8px;margin-bottom:12px;padding:12px;font-size:16px;font-weight:600}.feedback.correct{color:var(--green-2);background:#e8f6ec}.feedback.wrong{background:var(--red-bg);color:var(--red);text-align:left;padding:14px 16px}.feedback .wrong-label{text-align:center;margin-bottom:8px;font-size:16px}.diff-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-weight:400;display:flex}.diff-label{color:var(--ink-2);min-width:60px;font-size:13px}.diff-words{flex-wrap:wrap;gap:4px;display:inline-flex}.chip{border-radius:6px;padding:3px 8px;font-size:14px;font-weight:600;display:inline-block}.chip.ok{color:var(--green-2);background:#d6f0de}.chip.bad{color:var(--red);background:#f8d3d3;text-decoration:line-through}.correct-text{color:var(--ink);font-size:16px;font-weight:700}.best-streak{color:#d35400;font-size:18px;font-weight:600}.next-card-btn{background:var(--green);color:#fff;border-radius:var(--radius);width:100%;box-shadow:var(--shadow);padding:14px 28px;font-size:16px;font-weight:600}.next-card-btn:hover{background:var(--green-2)}.skip-link{color:var(--ink-dim);background:0 0;margin:8px auto 0;padding:8px;font-size:14px;text-decoration:underline;display:block}.skip-link:hover{color:var(--accent)}.session-complete{text-align:center;padding-top:80px}.session-complete h2{margin-bottom:8px;font-size:36px}.session-complete p{color:var(--ink-dim);margin-bottom:24px}.actions-top,.actions-bottom{gap:12px;margin:16px 0;display:flex}.actions-bottom{z-index:5;justify-content:center;position:sticky;bottom:16px}.topic-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:16px 0;display:grid}.topic-card{background:var(--card-bg);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-align:left;color:var(--ink);flex-direction:column;align-items:flex-start;gap:6px;padding:16px;transition:all .15s;display:flex}.topic-card:hover{border-color:var(--accent);transform:translateY(-1px)}.topic-card.selected{border-color:var(--accent);background:#eaf2fa}.topic-card .emoji{font-size:22px}.topic-card .name{color:var(--ink);font-weight:600}.topic-card .lang-pair{color:var(--ink-2);font-size:12px}.topic-card .count{color:var(--ink-dim);font-size:13px}.topic-card .progress-line{flex-direction:column;gap:4px;width:100%;display:flex}.topic-card .progress-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.topic-card .progress-text{color:var(--ink-2);font-size:13px;font-weight:600}.topic-card .stars{gap:1px;line-height:1;display:inline-flex}.topic-card .star{font-size:13px;transition:color .2s}.topic-card .star.filled{color:#f4b400}.topic-card .star.empty{color:#d8e0eb}.topic-card .repeat-badge{color:var(--orange);white-space:nowrap;background:#fff3e0;border-radius:8px;padding:1px 7px;font-size:12px;font-weight:700}.topic-card .progress-track{background:#d8e0eb;border-radius:2px;height:4px;display:block;overflow:hidden}.topic-card .progress-fill-small{background:var(--green);height:100%;transition:width .3s;display:block}.topic-card{position:relative}.topic-card .stats-btn{cursor:pointer;background:#fff9;border-radius:6px;padding:4px 6px;font-size:16px;transition:all .15s;position:absolute;top:8px;right:8px}.topic-card .stats-btn:hover{background:var(--bg);transform:scale(1.1)}.stats-page .stats-summary{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;padding:12px 16px;display:flex}.stats-summary .lbl{color:var(--ink-dim);font-size:13px}.stats-summary .val{color:var(--ink);font-weight:700}.stats-summary .dot{color:var(--ink-dim)}.stats-table{border-collapse:collapse;background:var(--card-bg);border-radius:var(--radius);width:100%;box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}.stats-table th,.stats-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--border);padding:10px 12px}.stats-table tr:last-child td{border-bottom:none}.stats-table th{color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;background:#f5f8fc;font-size:12px;font-weight:700}.stats-table th.r,.stats-table td.r{text-align:right;width:90px}.stats-table .repeats-cell .repeat-badge{color:var(--orange);background:#ffe9d6;border-radius:8px;padding:2px 8px;font-size:13px;font-weight:700}.stats-table .repeats-cell .dim{color:var(--ink-dim)}.stats-table tr.has-repeats{background:#fffbf5}.stats-table .prompt-cell{color:var(--ink);font-weight:600}.stats-table .answer-cell{color:var(--accent);font-weight:500}.empty-state{text-align:center;background:var(--card-bg);border:1px dashed var(--border);border-radius:var(--radius);margin:16px 0;padding:48px 16px}.empty-state p{color:var(--ink-dim);margin:0 0 16px}.primary{background:var(--accent);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 28px;font-size:16px;font-weight:600}.primary:hover{background:var(--accent-2)}.primary:disabled{opacity:.4;cursor:not-allowed}.ghost{background:var(--card-bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;font-size:14px}.ghost:hover{border-color:var(--accent);color:var(--accent)}.ghost.small{padding:6px 10px;font-size:13px}.add-set form{flex-direction:column;gap:16px;display:flex}.add-set label{color:var(--ink-2);flex-direction:column;gap:6px;font-size:13px;font-weight:600;display:flex}.add-set input,.add-set select,.add-set textarea{background:var(--card-bg);color:var(--ink);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);outline:none;padding:12px 14px;font-family:inherit;font-size:15px}.add-set input:focus,.add-set select:focus,.add-set textarea:focus{border-color:var(--accent)}.add-set textarea{resize:vertical;min-height:200px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:14px;line-height:1.5}.add-set small{color:var(--ink-dim);font-size:12px;font-weight:400}.add-set small code{color:var(--accent);background:#e5ebf3;border-radius:4px;padding:1px 6px;font-size:12px}.row-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.preview{color:var(--green-2);background:#e8f6ec;border:1px solid #b9deca;border-radius:8px;padding:10px 14px;font-size:14px}.preview.empty{color:#8a5a00;background:#fff5e6;border-color:#f0d59a}.preview .skipped{color:var(--ink-dim)}.form-actions{gap:12px;margin-top:8px;display:flex}@media (width<=600px){.page{padding:20px 12px 80px}.word{font-size:24px}.stat-card .num{font-size:22px}.stat-card .lbl{font-size:11px}.topic-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}