/* Giao diện dùng chung, lấy theo trang About Me: nền tối, accent mint, chữ mono, bo góc 12px */
:root,:root[data-theme="dark"]{--bg:#0D1117;--card:#151B23;--cell:#10151C;--line:#232C37;--line2:#323D4B;--fg:#E8EAED;--soft:#C5CBD3;--mut:#9AA4B2;
 --acc:#6EE7B7;--accfg:#0D1117;--bad:#ff6b81;--kw:#C792EA;--key:#7DB4FF;--ty:#F2A65A;color-scheme:dark}
:root[data-theme="light"]{--bg:#F7F8FA;--card:#FFFFFF;--cell:#EDF0F4;--line:#DDE2E8;--line2:#C3CBD5;--fg:#14181F;--soft:#3A4452;--mut:#566170;
 --acc:#0B7A55;--accfg:#FFFFFF;--bad:#d7263d;--kw:#8250DF;--key:#0550AE;--ty:#953800;color-scheme:light}
:root{--r:12px;--sans:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);min-height:100dvh;line-height:1.5;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);user-select:none;touch-action:manipulation}
.app{max-width:520px;margin:0 auto;padding:12px 16px 28px;display:flex;flex-direction:column;gap:14px}
.bar{display:flex;align-items:center;gap:8px}
.bar h1{display:flex;align-items:center;gap:10px;flex:1;margin:0;font:500 15px var(--mono)}.bar h1 b{color:var(--acc);font-weight:500}
.icon-btn{min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line2);background:transparent;color:var(--fg);border-radius:8px;
 font:500 16px var(--mono);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.icon-btn:hover{border-color:var(--acc)}
.label{font:400 14px var(--mono);color:var(--acc);margin:4px 0 -4px}
.stats{display:flex;gap:10px}
.chip{flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.chip small{display:block;color:var(--mut);font:400 12px var(--mono)}
.chip b{font:500 1.35rem var(--mono);font-variant-numeric:tabular-nums}
.stage{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.hint{margin:0;color:var(--mut);font:400 12px var(--mono);text-align:center}
.btn{border:0;background:var(--acc);color:var(--accfg);font:600 1rem var(--sans);min-height:48px;padding:0 24px;border-radius:8px;cursor:pointer}
.seg{display:flex;gap:4px;padding:3px;background:var(--cell);border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
.seg button{flex:1;min-height:40px;border:0;background:none;color:var(--soft);border-radius:6px;font:500 13px var(--mono);cursor:pointer}
.seg .on{background:var(--acc);color:var(--accfg)}
.overlay{position:absolute;inset:0;z-index:5;border-radius:var(--r);padding:20px;text-align:center;
 background:color-mix(in srgb,var(--card) 92%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.overlay h2{margin:0;font-size:1.5rem}.overlay p{margin:0;color:var(--mut);font:400 14px var(--mono)}
.hide{display:none!important}
.gi{color:var(--acc);flex:none}