/*
 * modern.css - the "modern app" theme (see $site_theme in config.php).
 *
 * A complete standalone skin: it styles the SAME markup every page already
 * produces (cards from .middle-column-box-*, tables from .tvleaders, the
 * left menu list, dialogs from js/site.js) plus the app shell that
 * page_header.php renders in modern mode (.appbar top bar, .tabbar bottom
 * navigation on phones). Switch back to the classic look by setting
 * $site_theme = 'classic' in config.php.
 */

/* ---------- design tokens ---------- */
:root {
  --bg:            #f2f4f7;
  --card:          #ffffff;
  --ink:           #17212b;
  --ink-soft:      #5b6b7b;
  --line:          #e4e9ee;
  --accent:        #2f9e44;   /* keeps the site's green identity */
  --accent-dark:   #237a34;
  --accent-soft:   #e7f5ea;
  --gold:          #f4b942;
  --radius:        14px;
  --shadow:        0 1px 3px rgba(23, 33, 43, 0.08), 0 8px 24px rgba(23, 33, 43, 0.05);
}

/* ---------- base ---------- */
body.theme-modern {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.theme-modern #wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.theme-modern a { color: var(--accent-dark); text-decoration: none; }
.theme-modern a:hover { text-decoration: underline; }

.theme-modern h2 { font-size: 20px; }

/* ---------- app bar ---------- */
.theme-modern .appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 -16px 20px;
  padding: 0 20px;
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.05);
}

.theme-modern .appbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.theme-modern .appbar-brand:hover { text-decoration: none; }

.theme-modern .appbar-logo {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

.theme-modern .appbar-nav { display: flex; gap: 4px; }
.theme-modern .appbar-nav a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 600;
}
.theme-modern .appbar-nav a:hover { background: var(--accent-soft); text-decoration: none; }
.theme-modern .appbar-nav a.selected { background: var(--accent-soft); color: var(--accent-dark); }

.theme-modern .appbar-account { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.theme-modern .appbar-account a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
}
.theme-modern .appbar-account a:hover { background: var(--accent-soft); text-decoration: none; }
.theme-modern .appbar-account a.appbar-cta {
  background: var(--accent);
  color: #fff;
}
.theme-modern .appbar-account a.appbar-cta:hover { background: var(--accent-dark); }

/* ---------- bottom tab bar (phones only) ---------- */
.theme-modern .tabbar { display: none; }

/* ---------- layout: columns become a responsive grid ---------- */
.theme-modern #left-column,
.theme-modern #left-column-first {
  float: none;
  width: auto;
}

.theme-modern #middle-column,
.theme-modern #middle-column-wide {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 20px;
  min-width: 0;
}

.theme-modern #right-column {
  float: none;
  width: auto;
  padding: 0;
}

@media (min-width: 900px) {
  .theme-modern #wrap {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 250px;
    gap: 20px;
    align-items: start;
  }
  .theme-modern .appbar,
  .theme-modern #buffer,
  .theme-modern #footer,
  .theme-modern .tabbar { grid-column: 1 / -1; }
  /* pages without a right column just leave the grid slot empty */
}

/* ---------- left menu -> nav card ---------- */
/* Phone disclosure button + dropdown machinery (injected by js/site.js);
   on desktop the button and scrim are hidden and the wrapper is layout-
   transparent, so the menu stays a plain always-visible sidebar card. */
.theme-modern button.leftmenu-toggle { display: none; }
.theme-modern .leftmenu-wrap { display: contents; }
.theme-modern .leftmenu-scrim { display: none; }

.theme-modern #left-column ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.theme-modern #left-column li { margin: 0; }

.theme-modern #left-column li a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 14px;
}
.theme-modern #left-column li a:hover { background: var(--accent-soft); color: var(--accent-dark); text-decoration: none; }
.theme-modern #left-column li a.selected,
.theme-modern #left-column .selected { background: var(--accent-soft); color: var(--accent-dark); }

.theme-modern #left-column li.left-nav-group { margin-top: 2px; }
.theme-modern #left-column li.left-nav-group a { font-weight: 700; color: var(--ink); }
.theme-modern #left-column li.left-nav-group a.selected { color: var(--accent-dark); }

/* Menu hierarchy: thin dividers between the bold section entries, indented
   sub-items, and a fixed slot for the little entry icons so labels align. */
.theme-modern #left-column li.left-nav-group:not(:first-child) {
  border-top: 1px solid var(--line);
  margin-top: 5px;
  padding-top: 5px;
}
.theme-modern #left-column li:not(.left-nav-group) a { padding-left: 34px; }
.theme-modern #left-column .mico {
  display: inline-block;
  width: 24px;
  font-size: 14px;
  text-align: center;
  margin-right: 2px;
}

/* user stats box */
.theme-modern #statlist { padding: 12px !important; }
.theme-modern #statlist .left-stats-title {
  font-weight: 800;
  font-size: 15px;
  padding: 2px 4px;
  color: var(--ink);
}
.theme-modern #statlist .left-stats {
  padding: 2px 4px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* ---------- content cards ---------- */
.theme-modern .middle-column-box-full-standard,
.theme-modern .middle-column-box-full-playerstats,
.theme-modern .middle-column-box-left-standard,
.theme-modern .middle-column-box-right-standard {
  float: none;
  clear: none;
  width: auto;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 18px 20px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.55;
  color: var(--ink);
  overflow-x: auto;
}

.theme-modern .middle-column-title-standard {
  margin: -2px 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.theme-modern .middle-column-box-full-standard p,
.theme-modern .middle-column-box-left-standard p,
.theme-modern .middle-column-box-right-standard p {
  margin: 8px 0;
}

/* right column cards */
.theme-modern .right-column-box-standard {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.theme-modern .right-column-title-grey {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.theme-modern .right-column-title-grey a { color: var(--ink) !important; }

/* ---------- tables ---------- */
.theme-modern table.tvleaders {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 10px 0 4px;
  font-size: 14px;
}

.theme-modern .tvleadershead td,
.theme-modern .tvleadershead th {
  padding: 8px 10px;
  border: none;
  border-bottom: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
}

.theme-modern .tvleadersrow { border: none; }
.theme-modern .tvleadersrow:hover { background: var(--accent-soft); color: inherit; }

.theme-modern .tvleaderscol,
.theme-modern .tvleaderscol_cen,
.theme-modern .tvleaderscol_left,
.theme-modern td.boxscore {
  padding: 9px 10px;
  border: none;
  border-bottom: 1px solid var(--line);
}
.theme-modern .tvleaderscol_cen { text-align: center; }
.theme-modern .tvleaderscol { text-align: right; }

.theme-modern .cssbold { background: var(--accent-soft); color: var(--ink); }

/* ---------- stats-section tables (match the game tables' look) ----------
   The historical-stats pages emit legacy markup (border="1", bgcolor
   attributes, font tags). Every table carrying the playerstats class (or
   the search results table's id) becomes its own card with the same
   header/row treatment as the game's tvleaders tables. Presentational
   attributes lose to author CSS, so no markup changes are needed. */
.theme-modern table.playerstats,
.theme-modern table#playerstats {
  width: 100%;
  border: none;
  border-collapse: separate;   /* border-radius needs the separate model */
  border-spacing: 0;
  margin: 10px 0 16px;
  font-size: 14px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.theme-modern table.playerstats td,
.theme-modern table.playerstats th,
.theme-modern table#playerstats td,
.theme-modern table#playerstats th {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 9px;
  text-align: center;
  background: transparent;
}
.theme-modern table.playerstats td.leftcol,
.theme-modern table#playerstats td.leftcol { text-align: left; }
.theme-modern table.playerstats thead td,
.theme-modern table.playerstats thead th,
.theme-modern table#playerstats thead td {
  border-bottom: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.theme-modern table.playerstats tbody tr:last-child td,
.theme-modern table#playerstats tbody tr:last-child td { border-bottom: none; }
.theme-modern table.playerstats tbody tr:hover,
.theme-modern table#playerstats tbody tr:hover { background: var(--accent-soft); }

/* Legacy emphasis markup, restyled: tan rows (totals / section heads) go
   accent-tinted, the year page's empty #ccc divider rows become a slim
   band, and the search table's tan header cells read as a header row. */
.theme-modern table.playerstats tr[bgcolor="#BDBA9B"],
.theme-modern table.playerstats tr[bgcolor="#bdba9b"],
.theme-modern table#playerstats tr[bgcolor="#BDBA9B"],
.theme-modern table#playerstats tr[bgcolor="#bdba9b"] { background: var(--accent-soft); font-weight: 600; }
.theme-modern table.playerstats tr[bgcolor="#ccc"] { background: var(--line); }
.theme-modern table.playerstats tr[bgcolor="#ccc"] td { padding: 2px; border-bottom: none; }
.theme-modern table#playerstats td[bgcolor] { background: var(--accent-soft); border-bottom: 2px solid var(--line); }

/* Legacy tan wrapper boxes + white font tags in the stats column (the
   search results table keeps its card look: excluded by id) */
.theme-modern #middle-column-wide table[bgcolor]:not(#playerstats),
.theme-modern #middle-column-wide table[bgcolor]:not(#playerstats) > tbody > tr > td { background: transparent; }
.theme-modern #middle-column-wide font { color: inherit; }

/* ---------- forms + buttons ---------- */
.theme-modern input[type="text"],
.theme-modern input[type="password"],
.theme-modern input[type="email"],
.theme-modern input[type="number"],
.theme-modern select,
.theme-modern textarea {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfd;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.theme-modern input:focus,
.theme-modern select:focus,
.theme-modern textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.theme-modern input[type="submit"],
.theme-modern button:not(.site-dialog-button) {
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.theme-modern input[type="submit"]:hover { background: var(--accent-dark); }

.theme-modern table.register td { padding: 6px 8px; }

/* Registration CAPTCHA (the self-hosted image provider). The Turnstile widget
   brings its own styling, so none of this applies to it.

   NOTE on the refresh button: the rule above, `button:not(.site-dialog-button)`,
   makes every button a green pill and scores (0,2,1). A `.theme-modern
   .captcha-refresh` selector is only (0,2,0) and loses however far down the file
   it sits, so this one names the element too. */
.theme-modern .captcha-block { display: block; }
.theme-modern .captcha-block > * { display: block; }
.theme-modern .captcha-image {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f5f5f0;
  max-width: 100%;
  height: auto;
}
.theme-modern button.captcha-refresh {
  display: inline-block;
  margin: 6px 0 10px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.theme-modern button.captcha-refresh:hover {
  background: var(--line);
  color: var(--accent-dark);
}
.theme-modern .captcha-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.theme-modern input#captcha {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  width: 7em;
}

/* Rollout gate: a form kept visible but locked (e.g. league creation is
   admin-only for now). fieldset[disabled] blocks every input; this makes the
   lock visible. */
fieldset.rollout-locked {
  border: none;
  margin: 0;
  padding: 0;
  opacity: 0.55;
  cursor: not-allowed;
}
fieldset.rollout-locked input[type="submit"] { cursor: not-allowed; }

.theme-modern .green-line,
.theme-modern .green-line-half {
  border: none;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

/* action links styled as buttons (leagues, mode switch) */
.theme-modern a.gamemode-switch {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}
.theme-modern a.gamemode-switch:hover { background: var(--accent-dark); text-decoration: none; }

.theme-modern .gamemode-tile.gamemode-current {
  border-left: 4px solid var(--accent);
}

/* League directory bubbles: one card per league, green-edged like the mode
   tiles; completed leagues fade to grey. */
.theme-modern .league-tile { border-left: 4px solid var(--accent); }
.theme-modern .league-tile-complete { border-left-color: #a7b2bd; }
.theme-modern .league-tile .middle-column-title-standard a { color: var(--ink); }

/* ---------- dialogs (js/site.js shim) ---------- */
.theme-modern dialog.site-dialog {
  border: none;
  border-radius: 16px;
  padding: 22px;
  width: calc(100vw - 48px);
  max-width: 420px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  box-shadow: 0 24px 64px rgba(23, 33, 43, 0.28);
}
.theme-modern dialog.site-dialog::backdrop { background: rgba(23, 33, 43, 0.45); }
.theme-modern .site-dialog-body { margin-bottom: 16px; word-wrap: break-word; }
.theme-modern .site-dialog-buttons { display: flex; gap: 8px; }
.theme-modern .site-dialog-button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.theme-modern .site-dialog-button:hover { background: var(--accent-dark); }
.theme-modern .site-dialog-button.site-dialog-cancel { background: #a7b2bd; }

/* login form inside the dialog */
.theme-modern .login_label { display: inline-block; width: 84px; font-weight: 600; }
.theme-modern .login_error { display: none; color: #d33; font-weight: 600; }
.theme-modern .loginbox_label { margin: 8px 0; }
.theme-modern .signin-or { display: flex; align-items: center; color: var(--ink-soft); font-size: 12px; margin: 4px 0 14px; }
.theme-modern .signin-or::before, .theme-modern .signin-or::after { content: ""; flex: 1; border-bottom: 1px solid var(--line); }
.theme-modern .signin-or span { padding: 0 10px; }
.theme-modern .google-signin { display: flex; justify-content: center; margin-bottom: 8px; }

/* ---------- footer ---------- */
.theme-modern #footer {
  width: auto;
  height: auto;
  margin: 8px 0 0;
  padding: 18px 0;
  background: none;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
}
.theme-modern #footer a { color: var(--ink-soft); }

/* tooltips popup */
.theme-modern .popUp {
  position: absolute;
  display: none;
  width: 340px;
  padding: 12px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* ---------- phones ---------- */
@media (max-width: 899px) {
  .theme-modern #wrap { padding: 0 12px 88px; }  /* room for the tab bar */

  .theme-modern .appbar { margin: 0 -12px 14px; gap: 10px; }
  .theme-modern .appbar-nav { display: none; }   /* the tab bar covers it */

  /* left menu -> dropdown sheet: the button anchors an overlay panel, so
     opening it never pushes the page content down */
  .theme-modern .leftmenu-wrap {
    display: block;
    position: relative;
    margin: 0 0 14px;
  }
  .theme-modern button.leftmenu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    background: var(--card);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
  .theme-modern button.leftmenu-toggle .leftmenu-burger { color: var(--accent-dark); font-size: 17px; line-height: 1; }
  .theme-modern button.leftmenu-toggle .leftmenu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .theme-modern button.leftmenu-toggle .leftmenu-caret { color: var(--ink-soft); transition: transform 0.18s; }
  .theme-modern #left-column.menu-open .leftmenu-caret { transform: rotate(180deg); }
  .theme-modern #left-column ul:not(#statlist) {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 39;              /* over the content, under the sticky app bar */
    margin: 0;
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 14px 44px rgba(23, 33, 43, 0.22);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .theme-modern #left-column.menu-open ul:not(#statlist) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* dim the page behind the open sheet; tapping it closes (js/site.js) */
  .theme-modern .leftmenu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(23, 33, 43, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  body.theme-modern.leftmenu-open .leftmenu-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .theme-modern #statlist { display: flex; align-items: center; gap: 10px; }

  /* wide stat tables scroll inside their card, never the page */
  .theme-modern table.tvleaders,
  .theme-modern table.playerstats,
  .theme-modern table#playerstats { display: block; overflow-x: auto; white-space: nowrap; }

  /* forms stack label-over-field instead of side-scrolling */
  .theme-modern table.register,
  .theme-modern table.register tbody,
  .theme-modern table.register tr,
  .theme-modern table.register td { display: block; width: auto !important; }
  .theme-modern table.register td { padding: 3px 0; }
  .theme-modern table.register tr { margin-bottom: 10px; }
  .theme-modern table.register input[type="text"],
  .theme-modern table.register input[type="password"],
  .theme-modern table.register input[type="email"],
  .theme-modern table.register select { max-width: 100%; box-sizing: border-box; }

  /* bottom tab bar */
  .theme-modern .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(23, 33, 43, 0.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .theme-modern .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
  }
  .theme-modern .tabbar a span { font-size: 20px; line-height: 1; }
  /* The house glyph flipped 180 degrees reads as home plate. */
  .theme-modern .tabbar .tab-homeplate { display: inline-block; transform: rotate(180deg); }
  .theme-modern .tabbar a.selected { color: var(--accent-dark); }
  .theme-modern .tabbar a:hover { text-decoration: none; }

  .theme-modern .middle-column-box-full-standard,
  .theme-modern .middle-column-box-full-playerstats,
  .theme-modern .middle-column-box-left-standard,
  .theme-modern .middle-column-box-right-standard { padding: 14px 14px; }
}

/* Roster role tags: a hitter's usage/durability (Everyday / Bench / Sub),
   replacing the old static A-F "Health" grade. Pitchers keep live "Health". */
.theme-modern .role-badge {
  display: inline-block;
  min-width: 56px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.theme-modern .role-everyday { background: var(--accent-soft); color: var(--accent-dark); }
.theme-modern .role-bench    { background: #eef1f4; color: var(--ink-soft); }
.theme-modern .role-sub      { background: #fde5e3; color: #b3261e; }

/* Player-page league toggle: include/exclude MLB vs Negro Leagues stats.
   All pills lit = the combined default; an unlit pill is excluded. */
.theme-modern .lgtoggle {
  margin: 10px 0 2px;
  font-size: 13px;
  color: var(--ink-soft);
}
.theme-modern .lgtoggle .lgpill {
  display: inline-block;
  padding: 4px 14px;
  margin-left: 6px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
}
.theme-modern .lgtoggle .lgpill.on { background: var(--accent); color: #fff; }
.theme-modern .lgtoggle .lgpill.on:hover { background: var(--accent-dark); }
.theme-modern .lgtoggle .lgpill.off { color: var(--ink-soft); border-color: var(--line); }
.theme-modern .lgtoggle .lgpill.off:hover { color: var(--accent-dark); border-color: var(--accent); }

/* Leaders-page league-type chips: checkbox "pills" that include/exclude MLB
   and Negro Leagues in the filter (the hidden box toggles the look live). */
.theme-modern .lgchip {
  display: inline-block;
  padding: 4px 14px;
  margin-left: 6px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.theme-modern .lgchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-modern .lgchip:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme-modern .lgchip:hover { border-color: var(--accent); }