:root { --bg: #14161c; --card: #1f222b; --line: #2e3240; --fg: #f3f4f7; --mut: #9aa0b2; --good: #3ccf7a; --bad: #ff5a5f; --bonus: #3ec1ff; --malus: #ff9f1c; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 12px 0; }
h1 { font-size: 1.6rem; margin: 8px 0; } h2 { font-size: 1.2rem; margin: 6px 0; }
.mut { color: var(--mut); }
button, .btn { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; background: #3a3f52; color: var(--fg); cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
button:active { transform: scale(.98); }
button.primary { background: var(--good); color: #0b1a10; }
button.warn { background: var(--malus); color: #241500; }
button.danger { background: var(--bad); }
button.blue { background: var(--bonus); color: #04202e; }
button:disabled { opacity: .45; }
input { font: inherit; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: #0f1116; color: var(--fg); width: 100%; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #2b3040; font-size: .85em; font-weight: 700; }
.tag-bonus { color: var(--bonus); } .tag-malus { color: var(--malus); } .tag-good { color: var(--good); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #000c; padding: 12px 18px; border-radius: 12px; font-weight: 700; z-index: 99; }
.offline { position: fixed; top: 0; left: 0; right: 0; background: var(--bad); text-align: center; padding: 4px; font-size: .85rem; display: none; z-index: 100; }