:root{--bg:#fff;--text:#333;--box-bg:#fafafa;--box-border:#ddd;--link:#3273dc}
[data-theme=dark]{--bg:#1a1a1a;--text:#eee;--box-bg:#2b2b2b;--box-border:#444;--link:#8ab4f8}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.container{max-width:960px;margin:0 auto;padding:1rem}
main{margin-top:1rem}
header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--box-border)}
h1{font-size:1.6rem;margin:0}h2{font-size:1.1rem;margin:.3rem 0}
.grid{display:grid;gap:1rem}
.col2{grid-template-columns:1fr 1fr}.col3{grid-template-columns:1fr 1fr 1fr}.col4{grid-template-columns:1fr 1fr 1fr 1fr}
@media(max-width:768px){.col2,.col3,.col4{grid-template-columns:1fr}}
.card{background:var(--box-bg);border:1px solid var(--box-border);border-radius:8px;padding:1rem}
.card .head{font-weight:700;margin-bottom:.2rem}
.card .sub{font-size:.8rem;color:#888;margin-bottom:.5rem}
.card hr{border:none;border-top:1px solid var(--box-border);margin:.5rem 0}
.card .body{min-height:44px;text-align:center}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.btn{background:none;border:none;color:var(--text);cursor:pointer;font-size:.9rem;padding:.3rem .6rem}
.btn:hover{opacity:.8}
.has-text-grey{color:#888}.has-text-danger{color:#d32f2f}.has-text-success{color:#2e7d32}
footer{text-align:center;padding:1rem;font-size:.8rem;color:#888;border-top:1px solid var(--box-border);margin-top:2rem}