* { box-sizing: border-box }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid #ddd; position: sticky; top: 0; background: #fff; z-index: 10 }
.tabs { display: flex; gap: 8px }
.tab { border: none; background: #f5f5f5; padding: 8px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; color: inherit }
.tab.active { background: #222; color: #fff }
.settings { border: none; background: #fff; padding: 6px 10px; border: 1px solid #222; border-radius: 6px; cursor: pointer }
main { padding: 12px }
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.35); z-index: 1000 }
.hidden { display: none }
.modal-body { background: #fff; width: 520px; max-width: 90vw; border-radius: 10px; padding: 16px; display: grid; gap: 8px }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px }
mark { background: #ffe58f }
.kw-0 { background: #ffe58f }
.kw-1 { background: #ffd6e7 }
.kw-2 { background: #d6f5ff }
.kw-3 { background: #d9f7be }
.kw-4 { background: #fff1b8 }
.kw-5 { background: #efdbff }