.okk-monthly-panel { min-width: 0; max-width: 100%; padding: 18px; }
.okk-monthly-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.okk-monthly-head h2 { margin: 0; color: var(--ink); font-size: 16px; }
.okk-monthly-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.okk-monthly-partner-toggle { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: 12px; line-height: 1.4; cursor: pointer; }
.okk-monthly-panel .okk-monthly-partner-toggle input { box-sizing: border-box; flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--info); }
.okk-monthly-partner-toggle:focus-within { outline: 2px solid var(--info); outline-offset: 2px; }
.okk-monthly-partner-toggle:has(input:disabled) { opacity: .65; cursor: default; }
.okk-monthly-partners { display: inline-block; max-width: 100%; margin-left: 5px; color: var(--muted); font-size: 11px; font-weight: 400; white-space: normal; }
.okk-monthly-partner-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.okk-monthly-scroll { min-width: 0; max-width: 100%; min-height: 176px; max-height: 480px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 10px; }
.okk-monthly-scroll:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.okk-monthly-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.okk-monthly-table col { width: 20%; }
.okk-monthly-table col.okk-monthly-month { width: 40%; }
.okk-monthly-table th, .okk-monthly-table td { height: auto; padding: 11px 14px; color: var(--ink); border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.45; overflow-wrap: anywhere; }
.okk-monthly-table th:first-child { text-align: left; }
.okk-monthly-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; }
.okk-monthly-table tbody th { font-weight: 500; }
.okk-monthly-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.okk-monthly-table tbody tr:hover > * { background: color-mix(in srgb, var(--info) 5%, var(--card)); }
.okk-monthly-table tfoot th, .okk-monthly-table tfoot td { position: sticky; bottom: 0; z-index: 1; border-top: 1px solid var(--border); border-bottom: 0; background: var(--surface); font-weight: 750; }
.okk-monthly-table .okk-monthly-empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.okk-monthly-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.okk-monthly-state { box-sizing: border-box; display: grid; place-items: center; gap: 12px; min-height: 212px; margin: 0; padding: 22px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; }
.okk-monthly-stale { margin: 6px 0 0; color: var(--warning); font-size: 12px; line-height: 1.6; }
.okk-monthly-panel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .okk-monthly-panel { padding: 14px; }
  .okk-monthly-table col { width: 22%; }
  .okk-monthly-table col.okk-monthly-month { width: 34%; }
  .okk-monthly-table th, .okk-monthly-table td { padding: 9px 6px; font-size: 12px; }
  .okk-monthly-table thead th { font-size: 11px; }
  .okk-monthly-partners { display: block; margin: 3px 0 0; font-size: 10px; }
}