:root{color-scheme:dark;--bof-safe-bottom:env(safe-area-inset-bottom,0px)}
body{background:#090d13}.fi-main{min-width:0}.fi-sidebar{background:#10151c}.fi-topbar nav{background:#11151b}.fi-main-ctn{padding-bottom:24px}.bof-periods{display:flex;gap:8px;flex-wrap:wrap}.bof-periods button{min-height:40px}.bof-invite{margin:16px 0}.bof-bottom-nav{display:none}.bof-network,.bof-update{position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--bof-safe-bottom));width:min(90vw,560px);padding:14px 18px;background:#45330d;color:#fff3d4;border:1px solid #a17a22;border-radius:12px;font:14px/1.5 Arial,sans-serif;box-shadow:0 4px 24px #0008}.bof-update{background:#172b22;color:#d8ffe8;border-color:#3c7654}.bof-update button{margin-left:12px;color:#ddfc28;text-decoration:underline;min-height:44px}.bof-device{display:grid;gap:16px;padding:24px;background:#11151b;border:1px solid #30343b;border-radius:14px}.bof-device h2{font-size:18px;font-weight:bold}.bof-device p{color:#b1bbc8;line-height:1.6}.bof-device button,.bof-device a{min-height:44px;padding:12px 18px;background:#ddfc28;color:#111;border-radius:9px;font-weight:bold;text-align:center}.bof-device [hidden],.bof-network[hidden],.bof-update[hidden]{display:none!important}.bof-table:focus-visible{outline:2px solid #ddfc28;outline-offset:4px}.bof a:focus-visible,.bof-device button:focus-visible,.bof-bottom-nav a:focus-visible{outline:2px solid #ddfc28;outline-offset:4px}html.bof-offline .bof,html.bof-offline .fi-page form{opacity:.55;pointer-events:none}html.bof-hidden .fi-main{visibility:hidden}
@media(max-width:1023px){.fi-main-ctn{padding-bottom:calc(96px + var(--bof-safe-bottom))}.fi-main{padding-inline:14px!important}.bof-bottom-nav{position:fixed;bottom:0;inset-inline:0;z-index:50;display:flex;align-items:stretch;justify-content:space-evenly;background:#11151bf5;border-top:1px solid #30343b;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + var(--bof-safe-bottom)) max(8px,env(safe-area-inset-left));backdrop-filter:blur(16px)}.bof-bottom-nav a,.bof-bottom-nav button{display:flex;flex:1;min-height:48px;max-width:100px;gap:4px;flex-direction:column;align-items:center;justify-content:center;color:#acb5c4;font-size:10px;text-decoration:none;border-radius:8px}.bof-bottom-nav [aria-current=page]{color:#ddfc28;background:#ddfc280b}.bof-network,.bof-update{bottom:calc(88px + var(--bof-safe-bottom))}.fi-topbar{padding-top:env(safe-area-inset-top,0px)}.bof-table{border:1px solid #30343b;border-radius:8px;overscroll-behavior-x:contain}.bof table td,.bof table th{padding:12px 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

html{scroll-padding-bottom:120px}.bof button,.bof input,.bof select{scroll-margin-block:110px}.bof-players-table td{white-space:normal}@media(max-width:540px){.bof-players-table table,.bof-players-table tbody{display:block}.bof-players-table thead{display:none}.bof-players-table tr{display:grid;grid-template-columns:1fr auto;padding:12px 4px;border-bottom:1px solid #30343b}.bof-players-table td{border:0;padding:6px}.bof-players-table td:nth-child(2){font-size:11px;color:#acb5c4;grid-row:2}.bof-players-table td:last-child{grid-column:2;grid-row:1 / span 2}}

/* WingoPlay operations design. Layout principles from the 21st.dev references:
   Advanced Stats, Insight Cards and Range Calendar With Presets. No fabricated
   trends, charts or comparisons are used to decorate financial records. */
:root {
  --bof-canvas: #0b1016;
  --bof-surface: #111922;
  --bof-raised: #17212c;
  --bof-border: #2c3946;
  --bof-ink: #f4f7f9;
  --bof-muted: #a8b7c6;
  --bof-lime: #ddfc28;
}
body { background: var(--bof-canvas); }
body .fi-topbar nav {
  background: #10171f;
  border-bottom: 1px solid #26313c;
  box-shadow: none;
}
body .fi-sidebar { background: #0e151c; border-right: 1px solid #26313c; }
body .fi-sidebar-header { background: #0e151c; box-shadow: none; }
body .fi-sidebar-nav { padding: 22px 14px; }
body .fi-sidebar-item-button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding-inline: 14px;
}
body .fi-sidebar-item-active .fi-sidebar-item-button {
  background: #ddfc2810;
  border-color: #ddfc2828;
  box-shadow: inset 3px 0 var(--bof-lime);
}
body .fi-sidebar-item-label { font-size: 13px; font-weight: 600; }
body .fi-page { row-gap: 24px; }
body .fi-header-heading { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.8px; line-height: 1.2; }
body .fi-header { padding-bottom: 0; }
body .bof { --line: var(--bof-border); --muted: var(--bof-muted); gap: 18px; }
body .bof > .bof-head { align-items: center; padding-block: 2px 6px; }
body .bof > .bof-head small { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #91a4b6; }
body .bof > .bof-head h1 { font-weight: 700; margin-top: 6px; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.65px; }
body .bof .bof-tag {
  padding: 8px 11px;
  border-radius: 7px;
  border-color: #3b4b59;
  background: #1a2630;
  color: #c8d3df;
  font-size: 11px;
  font-weight: 600;
}
body .bof .bof-panel {
  padding: 22px;
  border: 1px solid var(--bof-border);
  border-radius: 15px;
  background: var(--bof-surface);
  box-shadow: 0 2px 4px #00000012;
}
body .bof .bof-panel > h2,
body .bof .bof-panel > .bof-head h2 { font-size: 17px; letter-spacing: -.3px; }
body .bof .bof-filter.bof-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 18px 20px;
  background: #111b25;
}
body .bof .bof-filter.bof-panel > .bof-note,
body .bof .bof-filter.bof-panel > [role=alert] { grid-column: 1 / -1; }
body .bof label { gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .1px; }
body .bof input,
body .bof select {
  width: 100%;
  min-height: 46px;
  border-radius: 9px;
  border-color: #3c4b5a;
  background: #0d151e;
  color: var(--bof-ink);
  padding: 10px 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body .bof input:focus,
body .bof select:focus {
  outline: 2px solid var(--bof-lime);
  outline-offset: 2px;
  box-shadow: none;
  border-color: #72883a;
}
body .bof button,
body .bof a.bof-btn {
  min-height: 44px;
  border-color: #3b4a57;
  background: #17232e;
  color: #e4edf5;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  transition: background-color .15s ease, border-color .15s ease;
}
body .bof button:disabled { cursor: wait; opacity: .55; }
body .bof .bof-primary { min-height: 46px; background: var(--bof-lime); box-shadow: 0 2px 0 #8aa10f; }
body .bof .bof-periods {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 4px;
  margin-top: -5px;
  border: 1px solid #2d3c49;
  border-radius: 10px;
  background: #101922;
}
body .bof .bof-periods button { min-height: 36px; border-color: transparent; background: transparent; padding: 8px 15px; color: #c1cedb; }
body .bof .bof-alert {
  padding: 16px 20px;
  border-color: #5c3c43;
  border-left: 3px solid #f58397;
  background: #231a23;
  box-shadow: none;
}
body .bof .bof-alert strong { font-size: 17px; font-variant-numeric: tabular-nums; }
body .bof .bof-alert > strong { color: #ffd8df; font-size: 22px; }
body .bof .bof-alert .bof-note { margin-top: 3px; color: #c4afb9; }
body .bof .bof-grid { gap: 12px; }
body .bof .bof-card {
  padding: 20px;
  border: 1px solid var(--bof-border);
  border-radius: 12px;
  background: #141f29;
  box-shadow: inset 0 1px #ffffff03;
}
body .bof .bof-card > span {
  display: block;
  min-height: 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  color: #afbecc;
}
body .bof .bof-card strong {
  margin-top: 13px;
  color: #f4f7fb;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.22;
  letter-spacing: -.85px;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
}
body .bof .bof-card em { margin-top: 10px; font-size: 11px; line-height: 1.55; color: #99acbd; }
body .bof > .bof-grid > article:nth-child(8) {
  border-color: #7e8f35;
  background: #1d271e;
  box-shadow: inset 0 3px var(--bof-lime);
}
body .bof > .bof-grid > article:nth-child(8) > span { color: #d6e5b6; }
body .bof .bof-progress { display: block; height: 7px; border: 0; border-radius: 10px; overflow: hidden; background: #24323b; }
body .bof .bof-progress::-webkit-progress-bar { background: #24323b; border-radius: 10px; }
body .bof .bof-progress::-webkit-progress-value { background: #69d8ad; border-radius: 10px; }
body .bof .bof-progress::-moz-progress-bar { background: #69d8ad; border-radius: 10px; }
body .bof .bof-note { font-size: 11px; line-height: 1.65; color: #9fb0c0; }
body .bof .bof-panel > .bof-note { margin-top: 8px; }
body .bof details.bof-panel { padding: 17px 20px; background: #101922; }
body .bof details summary { min-height: 32px; display: list-item; list-style-position: inside; color: #c8d5e1; font-size: 13px; line-height: 1.7; }
body .bof details[open] summary { margin-bottom: 16px; color: var(--bof-ink); }
body .bof .bof-table { border: 1px solid #2a3946; border-radius: 10px; margin-top: 16px; background: #101a23; }
body .bof table { font-size: 12px; font-variant-numeric: tabular-nums; }
body .bof th { padding: 12px 14px; background: #17232d; color: #adc0d0; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
body .bof td { padding: 15px 14px; border-color: #273541; color: #e0e8ef; }
body .bof tbody tr:last-child td { border-bottom: 0; }
body .bof .bof-empty { padding: 36px 20px; color: #acbdcb; }
body .bof .bof-table button { background: #1e2e39; color: #dbe6ed; }
body .bof .bof-pagination { margin-top: 20px; }
body .bof-device { background: #111b25; border-color: var(--bof-border); border-radius: 15px; }
body .bof-device p { font-size: 14px; color: #b0bfce; }

@media (hover: hover) {
  body .bof button:not(:disabled):hover { background: #233442; border-color: #637785; }
  body .bof .bof-primary:not(:disabled):hover { background: #e7ff62; border-color: transparent; }
  body .bof .bof-periods button:hover { background: #25323d; color: #f4f7f9; }
  body .bof tbody tr:hover { background: #192630; }
}
@media (min-width: 1280px) {
  body .fi-main { padding-inline: 30px; }
  body .bof > .bof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body .bof > .bof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  body .fi-header-heading { font-size: 25px; }
  body .fi-page { row-gap: 20px; }
  body .fi-sidebar.fi-sidebar-open { box-shadow: 18px 0 50px #0008; }
  body .bof-bottom-nav { background: #101923f5; border-top-color: #34434f; box-shadow: 0 -6px 25px #0003; }
  body .bof-bottom-nav a,
  body .bof-bottom-nav button { min-height: 51px; gap: 5px; color: #afbfcd; font-size: 11px; font-weight: 600; }
  body .bof-bottom-nav [aria-current=page] { background: #ddfc2812; color: var(--bof-lime); box-shadow: inset 0 2px var(--bof-lime); }
  body .bof-network, body .bof-update { bottom: calc(96px + var(--bof-safe-bottom)); }
}
@media (max-width: 540px) {
  body .fi-main { padding-inline: 14px !important; }
  body .bof { gap: 15px; }
  body .bof > .bof-head { gap: 12px; }
  body .bof > .bof-head h1 { font-size: 22px; }
  body .bof .bof-tag { font-size: 10px; padding: 7px 9px; }
  body .bof .bof-panel { padding: 16px; border-radius: 12px; }
  body .bof .bof-filter.bof-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 15px; }
  body .bof .bof-filter.bof-panel > button { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
  body .bof .bof-filter label { flex: 1 1 130px; }
  body .bof .bof-filter:not(.bof-panel) { gap: 12px; }
  body .bof input, body .bof select { font-size: 16px; min-height: 46px; padding-inline: 10px; }
  body .bof .bof-periods { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .bof .bof-periods button { padding: 8px 3px; font-size: 11px; }
  body .bof .bof-alert { padding: 15px; gap: 12px; }
  body .bof .bof-alert strong { font-size: 16px; }
  body .bof .bof-alert > strong { font-size: 22px; }
  body .bof .bof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body .bof .bof-card { padding: 15px 12px; border-radius: 10px; }
  body .bof .bof-card > span { min-height: 30px; font-size: 11px; line-height: 1.4; }
  body .bof .bof-card strong { margin-top: 8px; font-size: clamp(19px, 5.2vw, 23px); letter-spacing: -.7px; }
  body .bof .bof-card em { margin-top: 8px; font-size: 10px; line-height: 1.5; }
  body .bof .bof-note { font-size: 11px; }
  body .bof .bof-two { grid-template-columns: 1fr; gap: 12px; }
  body .bof details.bof-panel { padding: 14px 16px; }
  body .bof .bof-table { margin-top: 14px; }
  body .bof .bof-players-table tr { padding: 13px 10px; border-bottom: 1px solid #2c3946; }
  body .bof .bof-players-table td { padding: 5px; border: 0; }
  body .bof .bof-players-table td:first-child { font-size: 15px; font-weight: 700; }
  body .bof .bof-players-table td:nth-child(2) { font-size: 11px; color: #9fb0c0; }
  body .bof .bof-players-table td:nth-child(3) { font-size: 11px; color: #c3cfd9; }
  body .bof .bof-players-table td:last-child { align-self: center; }
  body .bof .bof-players-table button { font-size: 11px; min-height: 44px; }
  body .bof-device { padding: 20px 16px; }
}
@media (max-width: 359px) {
  body .bof .bof-card { padding: 13px 10px; }
  body .bof .bof-card strong { font-size: 18px; }
  body .bof .bof-tag { max-width: 100%; overflow-wrap: anywhere; }
}