:root { --bg:#262421; --fg:#e8e6e3; --mute:#9a968f; --acc:#7fa650; --bad:#d26a5c; --card:#312e2b; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-tap-highlight-color:transparent; }
#app { max-width:560px; margin:0 auto; padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 16px); }
header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; min-height:44px; }
header h1 { font-size:17px; font-weight:600; margin:0; flex:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header .back,header .icon { color:var(--fg); text-decoration:none; font-size:26px; width:36px; text-align:center; }
header > span { width:36px; }
main { padding:0 12px; }
a { color:var(--acc); }
h2 { font-size:15px; color:var(--mute); font-weight:600; margin:18px 0 6px; }
.msg { min-height:2.8em; margin:4px 0 8px; font-size:15px; }
.msg.ok { color:var(--acc); } .msg.bad { color:#f0a598; }
.sub { color:var(--mute); font-size:14px; } .tiny { font-size:12px; }
.board-wrap { margin:0 -12px; }
.board { width:100%; aspect-ratio:1/1; }
.btns,.row,.col { display:flex; gap:8px; margin:12px 0; } .col { flex-direction:column; }
.btns button,.btn,.big,.set button,.filebtn { flex:1; padding:12px; border:0; border-radius:8px; background:var(--card); color:var(--fg); font-size:16px; text-align:center; text-decoration:none; display:block; cursor:pointer; }
.btns button.primary,.big.primary { background:var(--acc); color:#16130f; font-weight:600; }
.big { padding:18px 12px; font-size:18px; margin:16px 0 8px; }
.list { list-style:none; margin:0; padding:0; }
.list li a { display:flex; gap:10px; align-items:center; padding:11px 4px; border-bottom:1px solid #3a3733; color:var(--fg); text-decoration:none; }
.list small { display:block; color:var(--mute); font-size:13px; }
.dot { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; margin-right:6px; }
.dot.new { background:#5a5651; } .dot.learning { background:#d9a441; } .dot.known { background:var(--acc); }
.plan { background:var(--card); border-radius:8px; padding:4px 12px; margin:8px 0; font-size:15px; } .plan p { margin:8px 0; }
.choices { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.choices button { text-align:left; padding:12px; border-radius:8px; border:1px solid #4a4642; background:var(--card); color:var(--fg); font-size:14px; }
.choices button.right { border-color:var(--acc); background:#3c4a2c; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; } .tbl td,.tbl th { padding:6px 4px; border-bottom:1px solid #3a3733; text-align:left; } .tbl td a { color:var(--fg); text-decoration:none; }
.set { display:flex; flex-direction:column; gap:12px; margin-top:8px; } .set label { display:flex; gap:10px; align-items:center; }
.set select { flex:1; padding:8px; background:var(--card); color:var(--fg); border:1px solid #4a4642; border-radius:6px; }
.filebtn input { display:none; }
.updated { position:fixed; left:0; right:0; bottom:0; padding:12px; border:0; background:#3c4a2c; color:var(--fg); font-size:15px; }
.ext { white-space:nowrap; }
/* blue board theme */
body[data-theme="blue"] cg-board { background-color:#8ca2ad; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cg fill='%23dee3e6'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM6 0h1v1H6zM1 1h1v1H1zM3 1h1v1H3zM5 1h1v1H5zM7 1h1v1H7zM0 2h1v1H0zM2 2h1v1H2zM4 2h1v1H4zM6 2h1v1H6zM1 3h1v1H1zM3 3h1v1H3zM5 3h1v1H5zM7 3h1v1H7zM0 4h1v1H0zM2 4h1v1H2zM4 4h1v1H4zM6 4h1v1H6zM1 5h1v1H1zM3 5h1v1H3zM5 5h1v1H5zM7 5h1v1H7zM0 6h1v1H0zM2 6h1v1H2zM4 6h1v1H4zM6 6h1v1H6zM1 7h1v1H1zM3 7h1v1H3zM5 7h1v1H5zM7 7h1v1H7z'/%3E%3C/g%3E%3C/svg%3E"); }