:root{font-family:system-ui,-apple-system,sans-serif;font-size:21px;color:#18223b;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}.app{max-width:760px;margin:auto;padding:16px}.top{display:flex;gap:12px;align-items:center;justify-content:space-between}.title{font-weight:800;font-size:26px}.muted{color:#6a748a;font-size:17px}.toolbar,.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}button,select,input{border:1px solid #d8deec;background:white;border-radius:12px;padding:10px 13px;font:inherit}button{cursor:pointer}.primary{background:#3157d5;color:white;border-color:#3157d5}.card{position:relative;min-height:430px;background:white;border-radius:24px;box-shadow:0 12px 34px #20346a18;padding:28px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.level-badge{position:absolute;top:14px;left:16px;font-size:17px;font-weight:800;color:#3157d5;background:#eaf1ff;padding:4px 10px;border-radius:10px}.kanji{font-family:"Noto Serif JP",serif;font-weight:400;font-size:169px;line-height:1}.hanviet{font-size:31px;font-weight:800;color:#3157d5;margin-top:18px}.answer{margin-top:22px;border-top:1px solid #edf0f6;padding-top:18px}.meaning{font-size:33px;font-weight:700}.mnemonic{font-size:29px;line-height:1.3;margin-top:16px;text-align:justify}.hidden{display:none}.actions{justify-content:center}.again{background:#fff0f0;color:#b22}.hard{background:#fff7e8;color:#8a5600}.good{background:#eaf7ed;color:#176d2d}.easy{background:#eaf1ff;color:#2457bd}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.stat{background:white;padding:10px;border-radius:12px;text-align:center}.stat b{display:block;font-size:26px}.sync{font-size:16px}.warn{background:#fff7df;padding:10px;border-radius:10px;margin:10px 0;color:#745300}
.tabs{display:flex;gap:8px;margin-top:14px}.tab{border:1px solid #d8deec;background:white;border-radius:12px;padding:9px 16px;font:inherit;font-weight:700;color:#6a748a;cursor:pointer}.tab.active{background:#3157d5;color:white;border-color:#3157d5}
.table-wrap{margin-top:14px;background:white;border-radius:16px;box-shadow:0 12px 34px #20346a18;padding:10px;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-size:18px}
.table-wrap th,.table-wrap td{padding:9px 10px;text-align:left;border-bottom:1px solid #edf0f6;white-space:nowrap}
.table-wrap thead th{position:sticky;top:0;background:white;color:#6a748a;font-size:16px;text-transform:uppercase;letter-spacing:.03em}
.col-mnemonic{white-space:normal!important;min-width:220px;font-size:17px;font-weight:700;color:#5a4400;background:#fff8e6;border-left:4px solid #f5a623;border-radius:8px;padding:10px 12px!important}
.t-kanji{font-family:"Noto Serif JP",serif;font-size:31px}
#tableCount{margin:0 0 8px 4px}
.browse-menu{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;background:#ffffffb3;backdrop-filter:blur(6px);border:1px solid #e3e7f2;border-radius:16px;padding:8px;box-shadow:0 10px 26px #20346a2e;z-index:40}
.browse-menu.hidden{display:none}
.browse-menu button{border:none;background:transparent;border-radius:10px;padding:8px;display:flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:700;color:#42506e;cursor:pointer;white-space:nowrap}
.browse-menu button .ic{font-size:18px;width:22px;text-align:center;line-height:1}
.browse-menu button:hover{background:#f0f3fb}
.browse-menu button#btnBackStudy{color:#3157d5}
.browse-menu button.toggle-btn:not(.active){opacity:.4}
.browse-menu button.toggle-btn:not(.active) .ic{filter:grayscale(1)}
.browse-menu button#btnRandom{color:#b8790a}
#tableView.hide-c1 table td:nth-child(1),#tableView.hide-c2 table td:nth-child(2),#tableView.hide-c3 table td:nth-child(3),#tableView.hide-c4 table td:nth-child(4){filter:blur(6px);user-select:none}
.table-wrap tr.flash{box-shadow:0 0 0 3px #3157d5,0 8px 20px #20346a2e;transition:box-shadow .25s}
@media(max-width:640px){.browse-menu{right:6px;padding:6px}.browse-menu button{padding:9px}.browse-menu button .lb{display:none}}
@media(max-width:520px){.card{min-height:390px;padding:20px}.kanji{font-size:138px}.app{padding:10px}.top{align-items:flex-start}.stats{font-size:16px}.tabs{overflow-x:auto}.tab{white-space:nowrap}.table-wrap{padding:8px;border-radius:12px}
.table-wrap thead{display:none}
.table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
.table-wrap tbody{counter-reset:rownum}
.table-wrap tr{counter-increment:rownum;position:relative;background:#fff;border:1px solid #edf0f6;border-radius:12px;padding:10px 36px 10px 10px;margin-bottom:12px;box-shadow:0 8px 20px #20346a2e}
.table-wrap tr:before{content:counter(rownum);position:absolute;top:10px;right:10px;color:#a7afc2;font-size:13px;font-weight:600}
.table-wrap td{padding:3px 0;border-bottom:none;white-space:normal}
.table-wrap td:before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:#8a93aa;text-transform:uppercase;letter-spacing:.03em}
.t-kanji{font-size:34px;font-family:"Noto Serif JP",serif}
.col-mnemonic{font-size:17px;margin-top:4px;padding:10px 12px!important}}