[hidden] { display: none !important; }

.cw-panel li, .cw-cab-card li, dialog.cw-dialog li { max-width: none; }

@media (max-width: 620px) {
  .app-header nav:has(#tab-lichess:not([hidden])) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .app-header nav:has(#tab-lichess:not([hidden])) { gap: 2px; padding-inline: 6px; }
  .app-header nav:has(#tab-lichess:not([hidden])) .tab { font-size: .625rem; letter-spacing: -.01em; padding-inline: 0; }
}
@media (max-width: 340px) {
  .app-header nav:has(#tab-lichess:not([hidden])) #tab-settings .tab-long { display: none; }
}
.tab .cw-knight {
  width: 22px; height: 22px; background-color: currentColor;
  -webkit-mask: url("lichess-logo.svg") center / 22px 22px no-repeat;
          mask: url("lichess-logo.svg") center / 22px 22px no-repeat;
}

.cw-panel { display: flex; flex-direction: column; gap: var(--s4); }
.cw-title { margin: 0; font-size: 1.375rem; }
.cw-lead { margin: 0; color: var(--muted); font-size: .9375rem; }
.cw-nav { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.cw-nav::-webkit-scrollbar { display: none; }
.cw-navbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.cw-navbtn[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cw-navbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cw-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1;
}
.cw-section { display: flex; flex-direction: column; gap: var(--s4); }
.cw-bar-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.cw-say { margin: 0; font-weight: 600; min-height: 1.4em; }
.cw-say:empty { display: none; }
.cw-say[data-kind="err"] { color: var(--danger); }
.cw-say[data-kind="ok"] { color: var(--ok); }
.cw-h { margin: 0; font-size: 1.0625rem; }
.cw-muted { color: var(--muted); }
.cw-small { font-size: .875rem; }
.cw-empty { padding: var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); margin: 0; }
.cw-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.cw-box > * { margin: 0; }
.cw-warnbox { background: var(--warn-soft); border: 1px solid #f0dcaa; border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: 0; }
.cw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.cw-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.cw-link { font-weight: 600; overflow-wrap: anywhere; }

.cw-st {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--muted);
}
.cw-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cw-st.is-done { background: var(--ok-soft); color: var(--ok); }
.cw-st.is-overdue { background: var(--danger-soft); color: var(--danger); }
.cw-st.is-nodata, .cw-st.is-claimed { background: var(--warn-soft); color: var(--warn); }
.cw-st.is-excused { background: var(--surface-2); color: var(--muted); }

.cw-attn { border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.cw-attn-red { background: var(--danger-soft); border: 1px solid #efc4c0; }
.cw-attn-review, .cw-attn-check { background: var(--warn-soft); border: 1px solid #f0dcaa; }
.cw-attn h3 { margin: 0; font-size: 1rem; }
.cw-attn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3); background: var(--surface); border-radius: var(--r-sm); }
.cw-attn-who { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-attn-who b { overflow-wrap: anywhere; }
.cw-acts { display: flex; flex-wrap: wrap; gap: var(--s1); }

.cw-hw { display: flex; flex-direction: column; gap: var(--s2); }
.cw-hw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.cw-hw-title { margin: 0; font-size: 1.0625rem; flex: 1 1 240px; overflow-wrap: anywhere; }
.cw-meta { margin: 0; color: var(--muted); font-size: .875rem; }
.cw-due-soon { color: var(--warn); font-weight: 700; }
.cw-due-past { color: var(--danger); font-weight: 700; }
.cw-stack { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); }
.cw-stack span { display: block; height: 100%; }
.cw-stack .s-done { background: var(--ok); }
.cw-stack .s-overdue { background: var(--danger); }
.cw-stack .s-warn { background: #d9a520; }
.cw-counts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; font-size: .875rem; }
.cw-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cw-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); align-items: center; }
.cw-item:last-child { border-bottom: 0; }
.cw-item-name { min-width: 0; overflow-wrap: anywhere; }
.cw-item-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); font-size: .875rem; color: var(--muted); }
.cw-meter { width: 100%; max-width: 220px; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.cw-meter span { display: block; height: 100%; background: var(--ok); }
.cw-meter.is-overdue span { background: var(--danger); }
details.cw-more > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

dialog.cw-dialog fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
dialog.cw-dialog legend { padding: 0; margin-bottom: var(--s2); font-weight: 600; font-size: .9375rem; }
dialog.cw-dialog {
  width: min(100% - 2 * var(--s4), 620px); max-height: calc(100dvh - 2 * var(--s4));
  border: 0; border-radius: var(--r-lg); padding: 0; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg); overscroll-behavior: contain;
}
dialog.cw-dialog::backdrop { background: rgba(20, 21, 26, .5); }
.cw-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 2 * var(--s4)); }
.cw-dlg-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5) var(--s2); }
.cw-dlg-head h2 { margin: 0; font-size: 1.25rem; flex: 1; }
.cw-dlg-body { position: relative; padding: var(--s2) var(--s5); overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.cw-dlg-foot { display: flex; gap: var(--s3); justify-content: flex-end; flex-wrap: wrap; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.cw-dlg-err { color: var(--danger); font-weight: 600; margin: 0 var(--s5); min-height: 1.2em; }
.cw-dlg-err:empty { display: none; }
.cw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 520px) { .cw-row2 { grid-template-columns: 1fr; } }
.cw-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cw-chip {
  min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.cw-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cw-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cw-picklist { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s1) 0; margin: 0; list-style: none; }
.cw-picklist label { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); cursor: pointer; }
.cw-picklist input { width: 20px; height: 20px; }
.cw-check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-weight: 600; cursor: pointer; }
.cw-check input { width: 20px; height: 20px; flex: 0 0 auto; }

dialog.cw-race { width: min(100% - 2 * var(--s3), 980px); }
.cw-race-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 760px) { .cw-race-grid { grid-template-columns: 1fr; } }
.cw-qr { width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; image-rendering: pixelated; }
.cw-race-url { font-family: var(--font-num); font-size: clamp(1rem, .85rem + .6vw, 1.3rem); font-weight: 700; overflow-wrap: anywhere; margin: 0; }
.cw-race-status { font-size: 1.125rem; font-weight: 700; margin: 0; }
.cw-race-steps { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s1); }
.cw-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cw-player { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface-2); }
.cw-player b { font-variant-numeric: tabular-nums; }
.cw-player-name { min-width: 0; overflow-wrap: anywhere; }
.cw-player .cw-place { font-weight: 800; text-align: center; }
.cw-player.is-first { background: #fbf1d6; }
.cw-player select { grid-column: 2 / -1; }

.cw-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.cw-side { min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.cw-side::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); flex: 0 0 auto; }
.cw-side.is-white::before { background: #fff; }
.cw-side.is-black::before { background: var(--ink); }
.cw-pair .cw-pair-acts { display: flex; gap: 4px; }
@media (max-width: 560px) {
  .cw-pair { grid-template-columns: minmax(0, 1fr) auto; }
  .cw-pair .cw-vs { display: none; }
}

.cw-live { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.cw-live-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.cw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.cw-dot.is-playing { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cw-live-legend { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.cw-live-legend li { display: flex; align-items: center; gap: var(--s2); }
.cw-live-legend .cw-dot { margin-left: 4px; }

.cw-cab-card h2 { margin: 0 0 var(--s3); font-size: 1.25rem; }
.cw-cab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.cw-cab-hw { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.cw-cab-hw.is-overdue { border-color: #efc4c0; background: #fffafa; }
.cw-cab-hw.is-done { background: #fafdfb; }
.cw-cab-hw > * { margin: 0; }
.cw-cab-hw .cw-meter { max-width: none; }
.cw-cab-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cw-cab-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.cw-cab-teaser p { margin: 0; flex: 1 1 220px; }
.cw-outcome-win { color: var(--ok); font-weight: 700; }
.cw-outcome-loss { color: var(--danger); font-weight: 700; }
.cw-outcome-draw { color: var(--muted); font-weight: 700; }
.cw-wins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cw-wins li { display: flex; flex-wrap: wrap; gap: 4px var(--s2); }
.cw-cab-card .mini-title { margin: var(--s4) 0 var(--s2); }
.cw-perfs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.cw-perf { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); display: flex; flex-direction: column; gap: 4px; }
.cw-perf > * { margin: 0; }

.cw-chart { width: 100%; height: auto; display: block; }
.cw-chart .ax { stroke: var(--line); stroke-width: 1; }
.cw-chart .lbl { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.cw-chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cw-chart .pt { stroke: #fff; stroke-width: 1.5; }
.cw-legend { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.cw-legend button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.cw-legend button[aria-pressed="false"] { color: var(--muted); background: var(--surface-2); }
.cw-legend button[aria-pressed="false"] .cw-sw { opacity: .3; }
.cw-sw { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.cw-range { display: flex; gap: var(--s1); flex-wrap: wrap; }
.cw-tip { margin: 0; min-height: 1.4em; font-size: .875rem; font-weight: 600; }
.cw-now { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; }
.cw-now span { white-space: nowrap; }

.c-fsr_standard { stroke: #a81c24; background: #a81c24; fill: #a81c24; }
.c-fsr_rapid { stroke: #d9731a; background: #d9731a; fill: #d9731a; }
.c-fsr_blitz { stroke: #c9a227; background: #c9a227; fill: #c9a227; }
.c-fide_standard { stroke: #1b58c9; background: #1b58c9; fill: #1b58c9; }
.c-fide_rapid { stroke: #4f8be0; background: #4f8be0; fill: #4f8be0; }
.c-fide_blitz { stroke: #7a6ad8; background: #7a6ad8; fill: #7a6ad8; }
.c-li_rapid { stroke: #14663c; background: #14663c; fill: #14663c; }
.c-li_blitz { stroke: #2f9e67; background: #2f9e67; fill: #2f9e67; }
.c-li_classical { stroke: #0f7f7a; background: #0f7f7a; fill: #0f7f7a; }
.c-li_puzzle { stroke: #6b7280; background: #6b7280; fill: #6b7280; }