:root {
  --bg: #fbfaf7; --fg: #222; --muted: #777; --card: #fff; --line: #e3e0d8;
  --blue: #2a76dd; --green: #43a047; --red: #e53935; --orange: #fb8c00; --purple: #8e24aa; --gold: #f9a825;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.45 "Source Sans Pro", "Segoe UI", Helvetica, Arial, sans-serif; }
main { max-width: 1240px; margin: 0 auto; padding: 18px 16px 40px; }
h1 { font-size: 30px; margin: 0 0 4px; }
h1 small { font-size: 16px; color: var(--muted); font-weight: normal; margin-left: 8px; }
h2 { font-size: 21px; margin: 18px 0 6px; }
a { color: var(--blue); }
.sub { color: var(--muted); margin: 0 0 14px; }
.g { font-family: "DejaVu Serif", "Times New Roman", serif; font-style: italic; }
.mono, .w { font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace; }
.w { font-weight: bold; background: #eef; padding: 0 4px; border-radius: 3px; }
.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
button, select { font: inherit; font-size: 16px; padding: 5px 14px; border: 1px solid #c9c4b8; background: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: #f3f0e8; }
button.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
button.primary:hover { background: #1f63bd; }
button:disabled { opacity: .45; cursor: default; }
.stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; }
.stat b { font-size: 20px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0; }
.msg { min-height: 2.6em; font-size: 17px; }
.good { color: var(--green); font-weight: bold; }
.bad { color: var(--red); font-weight: bold; }
.back { font-size: 15px; margin-top: 18px; display: inline-block; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: transform .08s, box-shadow .08s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.card h3 { margin: 4px 0 4px; font-size: 20px; }
.card .tag { font-size: 13px; color: var(--muted); }
.card .icon { font-size: 30px; }
.card p { margin: 6px 0 0; font-size: 15px; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #222; color: #fff; padding: 8px 18px; border-radius: 20px; font-size: 17px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; }
.toast.on { opacity: .92; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pop { animation: pop .3s; }
.shake { animation: shake .25s; }
@media (max-width: 700px) { body { font-size: 16px; } h1 { font-size: 24px; } }