/* components.css — replaces themes/shared/components.css, section.css, table.css
   and color.css (all four fold into this one file). App-specific pieces only. */

/* --- Song / score cells ------------------------------------------------- */
div.songname { font-weight: 600; color: var(--text-primary); line-height: 1.3; }
div.songartist, div.songgenre, div.songdifficulty, div.songplays { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.35; }
div.songgenre { color: var(--text-muted); }
div.songdifficulties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--font-size-xs); color: var(--text-muted); }
div.songdifficulties .side-group { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
div.songdifficulties .side { font-weight: 600; letter-spacing: 0.04em; margin-right: 2px; }
td.song a { color: inherit; display: block; }
td.song a:hover { text-decoration: none; }
td.song a:hover div.songname { color: var(--text-link); }

/* Difficulty chip: <span class="chart chart-a">SPA 12</span> */
.chart { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.03em; color: var(--text-inverse); background: var(--text-muted); white-space: nowrap; }
.chart .lvl { font-weight: 500; opacity: 0.9; }
.chart-b { background: var(--chart-b); } .chart-n { background: var(--chart-n); } .chart-h { background: var(--chart-h); } .chart-a { background: var(--chart-a); } .chart-l { background: var(--chart-l); }
.chart.outline { background: transparent; color: var(--text-secondary); border: var(--border-width) solid var(--border-color-strong); }
.chart.mini { height: 18px; padding: 0 5px; }
/* jubeat hard mode / GITADORA drum & bass variants: a thin marker on the chip */
.chart.hard::before { content: 'H'; font-size: 9px; opacity: 0.85; padding-right: 3px; border-right: 1px solid rgba(255,255,255,0.4); margin-right: 1px; }
.chart.drum, .chart.bass { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.judge { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Score block inside a cell */
div.score { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
div.score .grade { display: flex; align-items: baseline; gap: 6px; }
div.score .grade strong { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.01em; }
div.score .grade span { font-size: var(--font-size-sm); color: var(--text-secondary); }
div.score .ex { font-size: var(--font-size-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
div.score .ex b { color: var(--text-primary); font-weight: 600; }
.lamp, div.score .lamp { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
div.score .who { font-size: var(--font-size-xs); }
.lamp-failed { color: var(--lamp-failed); } .lamp-assist { color: var(--lamp-assist); } .lamp-easy { color: var(--lamp-easy); } .lamp-clear { color: var(--lamp-clear); }
.lamp-hard { color: var(--lamp-hard); } .lamp-exhard { color: var(--lamp-exhard); } .lamp-fc { color: var(--lamp-fc); }
td .lamp-bar { display: inline-block; width: 3px; height: 100%; }

/* Timestamp */
div.timestamp { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; }
.relative-timestamp { display: inline-block; cursor: help; border-bottom: 1px dotted var(--border-color-strong); }
td .stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* Badges */
.badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.badge-new { background: var(--status-success-bg); color: var(--status-success-text); border: var(--border-width) solid var(--status-success-border); }
.badge-muted { background: var(--surface-bg-sunken); color: var(--text-secondary); }
.badge-error { background: var(--status-error-bg); color: var(--status-error-text); border: var(--border-width) solid var(--status-error-border); }
div.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--pill-bg); border: var(--border-width) solid var(--pill-border); font-size: var(--font-size-xs); }

/* Pagination */
.modern-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-sm) 0 0; margin-top: var(--space-sm); border-top: var(--border-width) solid var(--border-color-light); }
.pagination-controls { display: flex; align-items: center; gap: var(--space-sm); }
.pagination-info { font-size: var(--font-size-sm); color: var(--text-muted); min-width: 7em; text-align: center; font-variant-numeric: tabular-nums; }
.pagination-placeholder { min-width: 60px; }
.pagination-controls button.nav { border-radius: var(--radius); min-width: 60px; }
.table-loading-spinner { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--text-muted); }
.modern-spinner { width: 14px; height: 14px; border: 2px solid var(--border-color); border-top-color: var(--text-secondary); border-radius: 50%; animation: spinner 0.8s linear infinite; }
@keyframes spinner { to { transform: rotate(360deg); } }
.table-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-md); color: var(--text-muted); text-align: center; border: 1px dashed var(--border-color); border-radius: var(--radius); }
.table-empty-state .placeholder { font-style: normal; font-size: var(--font-size-sm); }

/* Stat cards (profile SP/DP boxes) */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: var(--space-md); }
.stat-cards.three { grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); }
.stat-card.accent { border-color: color-mix(in srgb, var(--game-accent) 45%, var(--border-color)); background: color-mix(in srgb, var(--game-accent) 7%, var(--surface-bg)); }
.stat-card.accent .stat-big { color: var(--game-accent); }
.stat-card { border: var(--border-width) solid var(--border-color); border-radius: var(--radius); padding: var(--space-md); background: var(--surface-bg-alt); display: flex; flex-direction: column; gap: 4px; }
.stat-card .stat-title { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); display: flex; justify-content: space-between; }
.stat-card .stat-big { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--text-primary); }
.stat-card .stat-meta { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.stat-card .stat-meta b { color: var(--text-primary); font-weight: 600; }
.identity { display: flex; flex-wrap: wrap; gap: 6px var(--space-lg); font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-md); }
.identity > span b { color: var(--text-primary); font-weight: 600; margin-right: 4px; }

/* Stat grid (skills pages, Tachi toggles) */
div.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 0 var(--space-lg); }
div.statgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 736px) { div.statgrid.three { grid-template-columns: 1fr; } }
div.statgrid > div.stat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 8px 0; border-bottom: var(--border-width) solid var(--border-color-light); min-height: 40px; }
div.statgrid > div.stat > span.statlabel { font-weight: 500; color: var(--text-secondary); font-size: var(--font-size-sm); }
div.statgrid > div.stat > span.statvalue { color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; display: flex; align-items: center; gap: var(--space-sm); }

/* Switch (components/slider.react.js + toggle) */
div.slider { display: inline-flex; align-items: center; position: relative; width: 36px; height: 20px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; }
div.slider.on { background: var(--slider-on-bg); }
div.slider.off { background: var(--slider-off-bg); }
div.slider span.label { position: absolute; left: -9999px; }
div.slider span.ball { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--slider-ball-bg); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s ease; }
div.slider.on span.ball { left: 18px; } div.slider.off span.ball { left: 2px; }
div.slider:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 25%, transparent); }

/* Tooltips */
div.tooltip, .modern-tooltip-wrapper { position: relative; display: inline-block; }
.modern-tooltip-popover { visibility: hidden; opacity: 0; position: absolute; bottom: 100%; left: 0; transform: translateY(4px); background: var(--tooltip-bg); color: var(--tooltip-text); text-align: left; border-radius: var(--radius); padding: 6px 10px; z-index: 50; white-space: normal; width: max-content; max-width: min(20em, 80vw); font-size: var(--font-size-xs); font-weight: 500; line-height: 1.4; transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; }
.modern-tooltip-wrapper:hover .modern-tooltip-popover { visibility: visible; opacity: 1; transform: translateY(-6px); }
.modern-tooltip-arrow { position: absolute; top: 100%; left: 12px; border: 5px solid transparent; border-top-color: var(--tooltip-bg); }
.table-wrapper .modern-tooltip-popover, .table-wrapper .modern-tooltip-arrow, body.is-touch .modern-tooltip-popover { display: none; }
@media (max-width: 736px) { .modern-tooltip-popover, .modern-tooltip-arrow { display: none; } }

/* Cards (e-AMUSEMENT cards) */
div.card { font-family: var(--font-mono); }
div.card .card-number { font-size: var(--font-size-base); font-weight: 600; letter-spacing: 0.04em; }
div.card .card-caption { font-size: var(--font-size-xs); color: var(--text-muted); }
.card-list { display: flex; flex-direction: column; }
div.account-card-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-md); padding: 10px 0; border-bottom: var(--border-width) solid var(--border-color-light); }
div.account-card-entry:last-child { border-bottom: 0; }
.cardentry-nickname { margin-top: 2px; font-size: var(--font-size-sm); }
.card-actions { display: flex; gap: var(--space-sm); }
.cardentry-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.cardentry-edit input[type="text"] { flex: 1 1 12em; width: auto; }
.card-add-form { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.card-add-form input[type="text"] { flex: 1 1 16em; width: auto; font-family: var(--font-mono); letter-spacing: 0.06em; }
.card-converter-form input[type="text"] { font-family: var(--font-mono); }
.card-converter-form .result { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px dashed var(--border-color-strong); border-radius: var(--radius); }

/* Event timeline */
table.list.events { display: block; border: 0; }
table.list.events thead { display: none; }
table.list.events tbody { display: flex; flex-direction: column; gap: var(--space-sm); position: relative; padding-left: 22px; }
table.list.events tbody::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 6px; width: 2px; background: var(--border-color); }
table.list.events tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title time" "details details"; gap: 4px var(--space-md); position: relative; padding: 10px 14px; background: var(--surface-bg); border: var(--border-width) solid var(--border-color); border-radius: var(--radius); }
table.list.events tr:hover td { background: transparent; }
table.list.events td { border: 0; padding: 0; }
table.list.events td:first-child { grid-area: time; color: var(--text-muted); font-size: var(--font-size-sm); }
table.list.events td:nth-child(2) { grid-area: title; font-weight: 600; display: flex; align-items: center; gap: 8px; }
table.list.events td.details { grid-area: details; }
table.list.events div.circle { position: absolute; left: -21px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); border: 2px solid var(--surface-bg); margin: 0; }
table.events td.exception div.circle, table.events td.profilepurge div.circle { background: var(--status-error-main); }
table.events td.unhandled div.circle { background: var(--status-warning-main); }
table.events td.unauthorized div.circle { background: #8a4fd3; }
table.events td.scheduled div.circle { background: var(--status-info-main); }
table.events td.pcbevent div.circle { background: var(--status-success-main); }
table.events td.transaction div.circle { background: var(--game-jubeat); }
/* Details as a key/value grid instead of stacked block+pre pairs */
table.list.events td.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--space-md); font-size: var(--font-size-sm); margin-top: 4px; }
table.list.events td.details > div:not(.full) { display: contents; }
table.list.events td.details div.inline { color: var(--text-muted); display: block; }
table.list.events td.details pre.inline, table.list.events td.details div.inline + div.inline { display: block; margin: 0; padding: 0; border: 0; background: transparent; font-size: var(--font-size-sm); color: var(--text-primary); }
table.list.events td.details pre.inline { font-family: var(--font-mono); }
table.list.events td.details > .full { display: block; grid-column: 1 / -1; min-width: 0; }
.event-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.event-filters span.filter { display: inline-flex; }
.event-filters span.filter input + label { height: 26px; padding: 0 10px 0 28px; border-radius: 999px; border: var(--border-width) solid var(--interactive-border); background: var(--interactive-bg); font-size: var(--font-size-sm); }
.event-filters span.filter input + label::before { left: 7px; width: 14px; height: 14px; }
.event-filters span.filter input:checked + label { border-color: var(--control-fill); }
.event-filters span.filter input:checked + label::after { left: 12px; width: 4px; height: 7px; margin-top: -5px; }

/* Long messages */
.modern-longmessage { border: var(--border-width) solid var(--border-color); border-radius: var(--radius); overflow: hidden; margin: 6px 0; grid-column: 1 / -1; }
.modern-longmessage-content { padding: 8px 10px; background: var(--surface-bg-sunken); font-family: var(--font-mono); font-size: var(--font-size-xs); white-space: pre-wrap; word-break: break-word; max-height: 16em; overflow: auto; }
.modern-longmessage-toggle { width: 100%; height: 28px; border: 0; border-top: var(--border-width) solid var(--border-color); border-radius: 0; background: var(--surface-bg); color: var(--text-link); font-size: var(--font-size-xs); }

/* Chart container */
.chart-container, .chart-placeholder { background: var(--surface-bg-alt); border: var(--border-width) solid var(--border-color); border-radius: var(--radius); padding: var(--space-sm); }
.chart-placeholder { width: 320px; max-width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--font-size-xs); }
div.songheader { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: start; margin-bottom: var(--space-md); }
div.songheader > div.left { order: 0; } div.songheader > div.floating.right { order: 1; float: none; }
div.songheader div.songname { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.01em; }
div.songheader div.songartist { font-size: var(--font-size-base); }
div.songheader .chart-tabs { margin-top: var(--space-md); }
@media (max-width: 736px) { div.songheader { grid-template-columns: 1fr; } }
canvas { max-width: 100%; }

/* Settings — labelled pickers, galleries, QPro */
div.picker-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
div.picker-gallery.banner { grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); }
div.picker-gallery.plain { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--border-width) solid var(--border-color-light); }
div.picker-gallery.square { grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); }
div.picker-gallery + div.picker-gallery { margin-top: var(--space-lg); }
/* SDVX option previews (sdvx/settings.react.js) — same treatment as IIDX theme previews */
div.option-preview { position: relative; margin-top: var(--space-sm); border-radius: var(--radius-sm); background: var(--surface-bg-sunken); border: var(--border-width) solid var(--border-color); overflow: hidden; display: flex; align-items: center; justify-content: center; }
div.option-preview.square { width: 120px; height: 120px; }
div.option-preview.banner { width: 100%; max-width: 360px; aspect-ratio: 3 / 1; }
div.option-preview img { display: block; max-width: 100%; max-height: 100%; }
div.option-preview:empty::after { content: 'preview'; color: var(--text-muted); font-size: var(--font-size-xs); }
.stat-card .stat-big.muted { color: var(--text-muted); }
div.picker-gallery div.picker { min-width: 0; }
div.theme-option div.theme-preview { position: relative; margin-top: var(--space-sm); border-radius: var(--radius-sm); background: var(--surface-bg-sunken); border: var(--border-width) solid var(--border-color); overflow: hidden; }
div.theme-option div.theme-preview.tile { width: 120px; height: 120px; }
div.theme-option div.theme-preview.strip { width: 140px; height: 220px; }
div.theme-option div.theme-preview img { display: block; max-width: 100%; height: auto; }
div.theme-option div.theme-preview span.theme-preview-animated { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
div.qpro-editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-lg); }
div.qpro-preview { flex: 0 0 auto; width: 304px; height: 350px; border-radius: var(--radius); background: var(--surface-bg-sunken); border: var(--border-width) solid var(--border-color); overflow: hidden; }
div.qpro-preview.with-bg { width: 340px; height: 500px; }
div.qpro-stage { position: relative; width: 304px; height: 350px; }
div.qpro-preview.with-bg div.qpro-stage { width: 340px; height: 500px; }
div.qpro-stage > div.qpro-bg, div.qpro-stage > div.qpro { position: absolute; left: 0; top: 0; }
div.qpro-preview.with-bg div.qpro-stage > div.qpro { left: 18px; top: 61px; }
div.qpro-controls { flex: 1 1 320px; min-width: 0; }
div.qpro { position: relative; width: 304px; height: 350px; }
div.qpro div { position: absolute; }
div.qpro div.qpro-head_b { left: 44px; top: 0px; } div.qpro div.qpro-hair_b { left: 43px; top: 0px; } div.qpro div.qpro-body_b { left: 45px; top: 0px; }
div.qpro div.qpro-arm_r_upper, div.qpro div.qpro-arm_r_lower { left: 40px; top: 158px; } div.qpro div.qpro-hand_r { left: 0px; top: 0px; }
div.qpro div.qpro-leg_r_lower, div.qpro div.qpro-leg_r_upper { left: 88px; top: 220px; } div.qpro div.qpro-leg_l_lower, div.qpro div.qpro-leg_l_upper { left: 143px; top: 220px; }
div.qpro div.qpro-body_f { left: 45px; top: 0px; } div.qpro div.qpro-face { left: 99px; top: 36px; } div.qpro div.qpro-hair_f, div.qpro div.qpro-head_f { left: 43px; top: 0px; }
div.qpro div.qpro-arm_l_upper, div.qpro div.qpro-arm_l_lower { left: 163px; top: 158px; } div.qpro div.qpro-hand_l { left: 144px; top: 0px; }
@media (max-width: 480px) {
  div.qpro-preview { width: 213px; height: 245px; } div.qpro-preview.with-bg { width: 238px; height: 350px; }
  div.qpro-preview div.qpro-stage { transform: scale(0.7); transform-origin: top left; }
}
.save-row { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--border-width) solid var(--border-color-light); }
.saved, .save-row .saved { color: var(--status-success-main); font-size: var(--font-size-sm); display: inline-flex; align-items: center; gap: 4px; }

/* Admin game settings */
div.settings-nav { display: flex; flex-wrap: wrap; gap: 6px; }
div.settings-nav + div.settings-nav { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--border-width) solid var(--border-color-light); }
span.seriescount { margin-left: 6px; opacity: 0.6; font-weight: 400; font-variant-numeric: tabular-nums; }
div.settings-panel div.menuoption { padding: 6px 0; border-bottom: var(--border-width) solid var(--border-color-light); }
div.settings-panel div.menuoption:last-of-type { border-bottom: 0; }
div.settings-panel div.menuoption > div.modern-tooltip-wrapper { display: grid; grid-template-columns: minmax(10em, 20em) minmax(0, 1fr); align-items: center; gap: var(--space-md); }
div.settings-panel div.menuoption > div.modern-tooltip-wrapper > label { margin: 0; color: var(--text-primary); font-weight: 500; }
div.settings-panel div.menuoption select, div.settings-panel div.menuoption input[type="text"] { max-width: 28em; }
div.settings-panel div.menuoption.longstr > div.modern-tooltip-wrapper { display: block; }
div.settings-panel div.menuoption.longstr textarea { margin-top: var(--space-xs); }
div.settings-panel ul.actions { margin-top: var(--space-md); }
@media (max-width: 736px) { div.settings-panel div.menuoption > div.modern-tooltip-wrapper { grid-template-columns: 1fr; gap: 4px; } }

/* Misc legacy hooks */
a.rival { font-weight: 600; }
.rival.remote { color: var(--text-muted); font-style: italic; }
ul.ownerlist { display: flex; flex-wrap: wrap; gap: 4px; }
ul.ownerlist li { padding: 0 6px; border-radius: 4px; background: var(--surface-bg-sunken); font-size: var(--font-size-sm); }
span.file { font-family: var(--font-mono); word-break: break-all; }
span.raised { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--status-success-main); }
div.longmessage pre { border: var(--border-width) solid var(--border-color); background: var(--surface-bg-sunken); padding: var(--space-sm); border-radius: var(--radius); overflow-x: auto; }
div.emblem { position: relative; width: 256px; max-width: 100%; height: 256px; }
div.emblem div { position: absolute; top: 0; left: 0; } div.emblem div img { width: 256px; max-width: 100%; height: auto; }
.emblem-editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-lg); }
.emblem-preview { flex: 0 0 auto; border-radius: var(--radius); background: var(--surface-bg-sunken); border: var(--border-width) solid var(--border-color); overflow: hidden; }
.emblem-preview .emblem-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--font-size-xs); }
.emblem-controls { flex: 1 1 320px; min-width: 0; }
.bishi.border { border-color: var(--game-bishi); } .mga.border { border-color: var(--game-mga); } .ddr.border { border-color: var(--game-ddr); } .iidx.border { border-color: var(--game-iidx); }
.jubeat.border { border-color: var(--game-jubeat); } .museca.border { border-color: var(--game-museca); } .pnm.border { border-color: var(--game-popn); } .reflec.border { border-color: var(--game-reflec); } .sdvx.border { border-color: var(--game-sdvx); }

/* Admin: tokens, add-rows, news list */
code.token { font-size: var(--font-size-xs); color: var(--text-secondary); background: var(--surface-bg-sunken); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.02em; }
.add-row { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--border-width) solid var(--border-color-light); }
.news-admin { display: flex; flex-direction: column; }
.news-admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: 10px 0; border-bottom: var(--border-width) solid var(--border-color-light); }
.news-admin-row:last-child { border-bottom: 0; }
.news-admin-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.news-admin-body { color: var(--text-secondary); font-size: var(--font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Recorded video (controllers/iidx/videos.react.js) */
table.playvideos td { white-space: nowrap; vertical-align: top; }
table.playvideos td.song { white-space: normal; min-width: 14em; }
/* The player is its own row under the one it belongs to, so it can be as wide
   as the table instead of as wide as a cell. */
table.playvideos tr.playvideo-player td { padding: 0 10px 10px; border-top: 0; }
table.playvideos tr.playvideo-player video { display: block; width: 100%; max-width: 46em; border-radius: var(--radius); background: var(--surface-bg-sunken); }
/* Phones: the stacked layout turns every row into a card, and the player row
   is a card with nothing to label, so it drops the label grid and fills. */
@media (max-width: 736px) {
  .table-wrapper table.stack-sm tbody tr.playvideo-player { display: block; padding: 8px; }
  .table-wrapper table.stack-sm tr.playvideo-player td { display: block; padding: 0; border-bottom: 0; }
  .table-wrapper table.stack-sm tr.playvideo-player td::before { content: none; }
  table.playvideos td { white-space: normal; }
}

/* Score history (templates/scorecard/history.html) */
table.scorecard-history tbody tr.scorecard-ready { cursor: pointer; }
table.scorecard-history tbody tr.scorecard-ready:focus-visible td { background: var(--surface-bg-alt); box-shadow: inset 0 0 0 2px var(--interactive-focus-ring); }
table.scorecard-history td { white-space: nowrap; }
table.scorecard-history td.song { white-space: normal; min-width: 14em; }
@media (max-width: 1100px) { table.scorecard-history th:nth-child(2), table.scorecard-history td:nth-child(2), table.scorecard-history th:nth-child(6), table.scorecard-history td:nth-child(6) { display: none; } }
/* Phones: the row itself opens the card, so the Open column goes too, and the
   remaining cells wrap instead of pushing the page sideways. */
@media (max-width: 736px) {
  table.scorecard-history th:nth-child(5), table.scorecard-history td:nth-child(5), table.scorecard-history th:nth-child(7), table.scorecard-history td:nth-child(7) { display: none; }
  table.scorecard-history td { white-space: normal; }
  table.scorecard-history td.song { min-width: 0; }
  table.scorecard-history td:first-child { white-space: nowrap; }
  /* With the State column gone, a row that cannot be opened yet says so on its title. */
  table.scorecard-history tr.scorecard-pending td.song .songname::after { content: " · not ready yet"; font-weight: 400; font-size: var(--font-size-xs); color: var(--text-muted); }
}
.scorecard-modal-content { width: 100%; background: #111; }
.scorecard-modal-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #111; }
.scorecard-modal-status { min-height: 1.6em; margin: 8px 0 0; text-align: center; font-size: var(--font-size-sm); color: var(--text-muted); }

/* Security: TOTP + passkeys */
.security-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: 12px 0; border-bottom: var(--border-width) solid var(--border-color-light); }
.security-row:last-child { border-bottom: 0; }
.security-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--surface-bg-sunken); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.security-icon svg { width: 20px; height: 20px; }
.security-icon.on { background: var(--status-success-bg); color: var(--status-success-main); }
.security-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.security-main b { display: inline-flex; align-items: center; gap: 8px; }
.security-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .security-row { grid-template-columns: auto minmax(0, 1fr); } .security-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.totp-setup { display: grid; grid-template-columns: minmax(14em, 18em) minmax(0, 1fr); gap: var(--space-lg); }
@media (max-width: 800px) { .totp-setup { grid-template-columns: 1fr; } }
ol.steps { display: flex; flex-direction: column; gap: 4px; }
ol.steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: var(--radius); color: var(--text-muted); }
ol.steps li div { display: flex; flex-direction: column; gap: 1px; }
ol.steps li b { color: var(--text-secondary); }
ol.steps li.current { background: var(--surface-bg-alt); color: var(--text-primary); } ol.steps li.current b { color: var(--text-primary); }
ol.steps li .step-n { width: 24px; height: 24px; border-radius: 50%; border: var(--border-width) solid var(--border-color-strong); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: 600; }
ol.steps li.current .step-n { background: var(--control-fill); color: var(--control-fill-text); border-color: var(--control-fill); }
ol.steps li.done .step-n { background: var(--status-success-main); color: #fff; border-color: var(--status-success-main); }
.totp-stage { min-width: 0; }
.qr-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-start; }
.qr { width: 168px; height: 168px; flex-shrink: 0; padding: 8px; background: #fff; border: var(--border-width) solid var(--border-color); border-radius: var(--radius); }
.qr-placeholder { width: 100%; height: 100%; background: repeating-conic-gradient(#1b1f26 0 25%, #fff 0 50%) 0 0 / 16px 16px; display: flex; align-items: center; justify-content: center; color: transparent; }
.qr-side { flex: 1 1 260px; min-width: 0; }
.secret-key { display: flex; align-items: center; gap: var(--space-sm); }
.secret-key code { flex: 1; padding: 6px 10px; background: var(--surface-bg-sunken); border-radius: var(--radius); font-size: var(--font-size-sm); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.otp-inputs { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; }
.otp-inputs input[type="text"] { width: 40px; height: 48px; padding: 0; text-align: center; font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.otp-sep { width: 10px; height: 2px; background: var(--border-color-strong); border-radius: 1px; margin: 0 4px; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); gap: 6px; margin: 8px 0 var(--space-md); padding: var(--space-md); background: var(--surface-bg-sunken); border: 1px dashed var(--border-color-strong); border-radius: var(--radius); }
.recovery-codes code { font-size: var(--font-size-base); letter-spacing: 0.06em; background: transparent; padding: 0; }

/* Static dialog previews */
.dialog-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); gap: var(--space-md); }
.dialog-preview { padding: var(--space-lg); background: var(--overlay-bg); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.dlg { width: 100%; max-width: 360px; background: var(--surface-bg-raised); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(16,20,28,0.25); }
.dlg-title { padding: 16px 20px 0; font-size: var(--font-size-lg); font-weight: 600; }
.dlg-body { padding: 8px 20px 20px; color: var(--text-secondary); }
.dlg-buttons { display: flex; flex-direction: row-reverse; gap: 8px; padding: 12px 20px; background: var(--surface-bg-alt); border-top: var(--border-width) solid var(--border-color-light); }

/* News (home) */
.news-list { display: flex; flex-direction: column; gap: var(--space-md); }
.news-item h3 { font-size: var(--font-size-lg); text-transform: none; letter-spacing: 0; color: var(--text-primary); margin-bottom: 2px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.news-item h3 .timestamp { font-weight: 400; }
.news-item .body { color: var(--text-secondary); }

/* Tier table (community difficulty tables, /iidx/players/<id>/tiers) */
.tier-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); }
.tier-head h2 { margin: 0 0 var(--space-sm); font-size: var(--font-size-lg); }
.tier-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); }
.tier-nav .settings-nav + .settings-nav { margin-top: 0; padding-top: 0; border-top: 0; }
.tier-nav .tier-nav-tables { margin-left: auto; }
.tier-note { font-size: var(--font-size-sm); color: var(--text-muted); margin: var(--space-xs) 0 0; }
.tier-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); font-size: var(--font-size-sm); }
.tier-filters .checkbox label { font-size: var(--font-size-sm); }
.tier-filters .tier-quick { color: var(--text-link); cursor: pointer; font-size: var(--font-size-xs); }
.tier-filters input[type="text"] { height: 28px; max-width: 18em; }
.tier-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.tier-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: var(--border-width) solid var(--border-color); background: var(--surface-bg-alt); font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; user-select: none; }
.tier-pill.off { opacity: 0.4; text-decoration: line-through; }
.tier-pill b { font-variant-numeric: tabular-nums; }
.tier-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--surface-bg-sunken); border: 1px solid var(--border-color-strong); }
.tier-group { margin-top: var(--space-md); }
.tier-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: 6px 10px; border-radius: var(--radius); background: var(--surface-bg-sunken); font-weight: 600; }
.tier-group-head.personal { border-left: 4px solid var(--game-accent); }
.tier-group-head small { font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 6px; margin-top: 6px; }
.tier-cell { border-radius: var(--radius-sm); padding: 6px 8px; min-height: 3.4em; display: flex; flex-direction: column; justify-content: space-between; gap: 3px; border: var(--border-width) solid var(--border-color); background: var(--surface-bg-alt); color: var(--text-primary); }
.tier-cell a { color: inherit; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tier-cell .tier-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: var(--font-size-xs); opacity: 0.9; font-variant-numeric: tabular-nums; }
.tier-cell .chart { height: 18px; padding: 0 6px; }
.tier-lamp-failed, .tier-swatch.tier-lamp-failed { background: var(--lamp-failed); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-assist, .tier-swatch.tier-lamp-assist { background: var(--lamp-assist); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-easy, .tier-swatch.tier-lamp-easy { background: var(--lamp-easy); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-clear, .tier-swatch.tier-lamp-clear { background: var(--lamp-clear); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-hard, .tier-swatch.tier-lamp-hard { background: var(--lamp-hard); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-exhard, .tier-swatch.tier-lamp-exhard { background: var(--lamp-exhard); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-fc, .tier-swatch.tier-lamp-fc { background: var(--lamp-fc); color: var(--text-inverse); border-color: transparent; }
.tier-lamp-none { background: var(--surface-bg-alt); }
.tier-cell.tier-lamp-failed a, .tier-cell.tier-lamp-assist a, .tier-cell.tier-lamp-easy a, .tier-cell.tier-lamp-clear a, .tier-cell.tier-lamp-hard a, .tier-cell.tier-lamp-exhard a, .tier-cell.tier-lamp-fc a { color: var(--text-inverse); }
.tier-cell.tier-lamp-failed .chart, .tier-cell.tier-lamp-assist .chart, .tier-cell.tier-lamp-easy .chart, .tier-cell.tier-lamp-clear .chart, .tier-cell.tier-lamp-hard .chart, .tier-cell.tier-lamp-exhard .chart, .tier-cell.tier-lamp-fc .chart { background: rgba(255, 255, 255, 0.22); color: var(--text-inverse); }
.tier-source { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.stat-card .stat-big .stat-of { font-size: 14px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.tier-switch { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--text-secondary); }
.tier-versions { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--border-width) solid var(--border-color-light); }
.tier-versions-quick { margin-top: var(--space-xs); font-size: var(--font-size-xs); color: var(--text-muted); }
.tier-versions-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); font-size: var(--font-size-xs); color: var(--text-muted); }
.tier-disclosure { padding-left: 6px; }
.tier-disclosure .tier-caret { display: inline-block; width: 1em; color: var(--text-muted); }
.tier-disclosure .seriescount { margin-left: 6px; }
.playstyle-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.playstyle-column { display: grid; gap: var(--space-md); align-content: start; }