/* 练习页两种界面风格。在 practice-v2.css 之后加载，只在 html[data-ui-style] 上生效（由 practice-ui-style.js 设置）。
     dashboard（默认）数据仪表盘（2026-11-01 从效果图选定）：模式列表保持原样；右侧顶部一张卡放模式 + 一排设置 + 开始，
                      下面「近期表现」标题、五个大数字（个人最佳 + 四项）、大图表 + 最近记录。
     classic          经典旧版（2026-11-02，用户反馈有人想用老界面；还原 D:\备份 的 10/25 版）：居中两栏，
                      左边模式卡片网格 + 一行一行的设置 + 大开始按钮，右边今日挑战 + 近期表现。
   （2026-11-01 的「复古像素」已按用户要求删除，存过它的人自动回到仪表盘。）
   两种都用 display:contents 把练习卡片拆开，让各块直接成为网格格子；.pv-best / .pv-runs 由 practice-ui-style.js 补进卡片。 */

/* =====================================================================
   9 · 数据仪表盘（默认）
   ===================================================================== */
html[data-ui-style="dashboard"] .dashboard .site-notice{width:min(1760px,calc(100% - var(--pv2-gutter) * 2))!important}
html[data-ui-style="dashboard"] #practicePage .dash-grid{grid-template-columns:var(--pv2-queue-w) minmax(0,1fr)!important;justify-content:stretch!important}
html[data-ui-style="dashboard"] #practicePage .practice-card{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto auto auto minmax(0,1fr);column-gap:14px;row-gap:0;height:auto;min-height:var(--pv2-panel-h)!important;overflow:visible;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html[data-ui-style="dashboard"] #practicePage .practice-card:hover{box-shadow:none!important}
/* The top card is drawn by the grid's own ::before so the hero, the start
   button and the settings row (three separate elements) read as one card. */
html[data-ui-style="dashboard"] #practicePage .practice-card:before{content:"";grid-column:1/-1;grid-row:1/4;border:1px solid #e5e9ec;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(24,34,48,.035)}
html[data-ui-style="dashboard"] #practicePage :is(.practice-body,.practice-setup,.practice-stats),html[data-ui-style="dashboard"] #practicePage .practice-stats :is(.recent-performance-card,.performance-stat-row){display:contents!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel-head,html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-personal-best{display:none!important}

/* Top card, row 1: the selected mode + start. */
html[data-ui-style="dashboard"] #practicePage .practice-card .selected-drill-card{grid-column:1/5;grid-row:1;z-index:1;flex-wrap:nowrap;gap:18px;margin:0!important;padding:16px 0 14px 20px;border:0;border-radius:0;background:transparent;box-shadow:none}
html[data-ui-style="dashboard"] #practicePage .practice-card .selected-drill-card:before,html[data-ui-style="dashboard"] #practicePage .practice-card .selected-drill-card:after{content:none}
html[data-ui-style="dashboard"] #practicePage .selected-drill-copy{flex:1 1 auto;gap:14px}
html[data-ui-style="dashboard"] #practicePage .selected-drill-copy .practice-symbol{width:50px;height:50px;border-radius:13px}
html[data-ui-style="dashboard"] #practicePage .practice-symbol.from-cover svg{width:26px;height:26px}
html[data-ui-style="dashboard"] #practicePage .mode-kicker{height:auto;margin:0 0 2px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--pv2-muted);font-size:11px;letter-spacing:.3px}
html[data-ui-style="dashboard"] #practicePage .selected-drill-copy h3{margin:0 0 2px;font-size:20px}
html[data-ui-style="dashboard"] #practicePage .selected-drill-copy p{max-width:520px;font-size:12px;-webkit-line-clamp:1}
html[data-ui-style="dashboard"] #practicePage .selected-drill-metrics{flex:0 0 auto;gap:6px}
html[data-ui-style="dashboard"] #practicePage .selected-drill-metrics>div{min-width:0;padding:6px 12px!important;border-radius:10px;background:#f4f6f9;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-ui-style="dashboard"] #practicePage .selected-drill-metrics>div:nth-child(2){display:none}
html[data-ui-style="dashboard"] #practicePage .selected-drill-metrics span{font-size:10.5px}
html[data-ui-style="dashboard"] #practicePage .selected-drill-metrics strong{font-size:15px}
html[data-ui-style="dashboard"] #practicePage .practice-card #startButton{grid-column:5;grid-row:1;z-index:1;align-self:center;display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:48px!important;margin:16px 20px 14px 0!important;border-radius:12px!important;font-size:15px!important;box-shadow:0 10px 22px -14px rgba(19,184,207,.95)}
html[data-ui-style="dashboard"] #practicePage .practice-card #startButton svg{width:20px;height:20px}
html[data-ui-style="dashboard"] #practicePage .practice-card #startButton kbd{padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.2);font-size:10px}

/* Top card, row 2: every setting as one compact pill on a single line. */
html[data-ui-style="dashboard"] #practicePage .setup-panel{grid-column:1/-1;grid-row:2;z-index:1;display:flex!important;flex-wrap:wrap;gap:8px;margin:0 20px 16px;padding:14px 0 0;border:0;border-top:1px solid #eef2f4;border-radius:0;background:transparent}
html[data-ui-style="dashboard"] #practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow):not(.hidden){flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:8px!important;min-height:46px;padding:6px 6px 6px 10px!important;border-radius:12px!important;background:#f4f6f9!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow):hover{background:#eef2f5!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel .control-label label,html[data-ui-style="dashboard"] #practicePage .setup-panel #movingDirectionRow>label,html[data-ui-style="dashboard"] #practicePage .setup-panel>#trailToggleRow .trail-setting-copy label{color:#6b7782!important;font-size:12px!important;font-weight:600!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel .control-row>:not(.control-label):not(small){flex:0 0 auto}
html[data-ui-style="dashboard"] #practicePage .setup-panel :is(.game-sensitivity-hint,.target-size-hint){display:none!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel .game-preset-dropdown{width:112px}
html[data-ui-style="dashboard"] #practicePage .setup-panel .game-preset-trigger{height:34px;border-radius:9px}
html[data-ui-style="dashboard"] #practicePage .setup-panel .sensitivity-pair{width:auto}
/* Room for values like 0.314 / 12.50; the spin arrows ate the last digit, so they are hidden (typing and ↑/↓ still work). */
#practicePage .setup-panel .sensitivity-input{-moz-appearance:textfield;appearance:textfield}
#practicePage .setup-panel .sensitivity-input::-webkit-inner-spin-button,#practicePage .setup-panel .sensitivity-input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
html[data-ui-style="dashboard"] #practicePage .setup-panel .sensitivity-input{padding:0 10px!important;text-align:center;width:84px!important;height:34px!important;border-radius:9px!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel .segmented.light{width:auto!important;height:34px!important;grid-auto-columns:minmax(36px,auto);border-radius:9px!important;background:#e6ebef!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel .segmented.light button{height:28px!important;padding:0 7px!important;font-size:12px!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel>#targetSizeControl .segmented.light{flex:0 0 auto}
html[data-ui-style="dashboard"] #practicePage .setup-panel>#targetSizeControl .segmented.light button{padding:0 5px!important}
html[data-ui-style="dashboard"] #practicePage .setup-panel>#trailToggleRow .trail-duration-field input{width:44px;height:30px;padding:0 4px}
html[data-ui-style="dashboard"] #practicePage .practice-card #advancedModeControls{grid-column:1/-1;grid-row:3;z-index:1;margin:-4px 20px 16px!important}
html[data-ui-style="dashboard"] #practicePage .practice-card #controllerConnectionStatus{grid-column:1/-1;grid-row:3;z-index:1;align-self:end;margin:0 20px 8px}

/* Section heading for the numbers below (with the 30/60 s and range filters). */
html[data-ui-style="dashboard"] #practicePage .practice-stats .recent-performance-card>header{grid-column:1/-1;grid-row:4;margin:22px 4px 12px}
html[data-ui-style="dashboard"] #practicePage .practice-stats .recent-performance-card>header strong{font-size:16px!important}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-duration-toggle,html[data-ui-style="dashboard"] #practicePage .practice-stats .recent-performance-card>header select{background-color:#fff;box-shadow:inset 0 0 0 1px #e3e9ed}

/* Five big numbers: personal best + the four stats, all plain white cards. */
html[data-ui-style="dashboard"] #practicePage .pv-best,html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div{grid-row:5;display:grid;align-content:start;gap:6px!important;min-width:0;min-height:0!important;padding:18px 20px!important;border:0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 1px 2px rgba(20,34,50,.05),inset 0 0 0 1px #edf1f4!important;transform:none!important}
html[data-ui-style="dashboard"] #practicePage .pv-best{grid-column:1}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(1){grid-column:2}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(2){grid-column:3}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(3){grid-column:4}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(4){grid-column:5}
html[data-ui-style="dashboard"] #practicePage :is(.pv-best,.practice-stats .performance-stat-row>div) span{overflow:hidden;color:var(--pv2-muted);font-size:12.5px!important;text-overflow:ellipsis;white-space:nowrap}
html[data-ui-style="dashboard"] #practicePage :is(.pv-best,.practice-stats .performance-stat-row>div) strong{color:var(--pv2-ink);font-size:32px!important;font-weight:800;line-height:1.1;letter-spacing:-1px;white-space:nowrap}
html[data-ui-style="dashboard"] #practicePage :is(.pv-best,.practice-stats .performance-stat-row>div) small{overflow:hidden;color:#9aa4ad!important;font-size:12px!important;text-overflow:ellipsis;white-space:nowrap}

/* Trend (wide) + recent runs. */
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-chart{grid-column:1/4;grid-row:6;min-height:260px;margin-top:14px;padding:18px 20px 14px!important;border:0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 1px 2px rgba(20,34,50,.05),inset 0 0 0 1px #edf1f4}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-chart>header strong{font-size:15px}
html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-chart>header small{font-size:12px}
html[data-ui-style="dashboard"] #practicePage .pv-runs{grid-column:4/6;grid-row:6;display:flex;flex-direction:column;min-width:0;margin-top:14px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(20,34,50,.05),inset 0 0 0 1px #edf1f4}
.pv-runs header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.pv-runs header strong{color:var(--pv2-ink,#1b2128);font-size:15px}
.pv-runs header small{overflow:hidden;color:#9aa4ad;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.pv-runs-list{margin:0;padding:0;list-style:none}
.pv-runs-list li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid #eef2f4;font-size:13px}
.pv-runs-list li:first-child{border-top:0}
.pv-runs-list span{overflow:hidden;color:#4f5a66;text-overflow:ellipsis;white-space:nowrap}
.pv-runs-list em{color:#9aa4ad;font-style:normal;font-size:12px}
.pv-runs-list b{text-align:right;font-variant-numeric:tabular-nums}
.pv-runs-list .pv-runs-empty{display:block;padding:18px 2px;color:#9aa4ad;font-size:12.5px;line-height:1.6}
/* ---------- Score trend (assets/score-trend.js draws at real pixel size) ---------- */
#practicePage .chart-plot.trend{--trend-line:#13b8cf;--trend-area:rgba(19,184,207,.16);--trend-grid:#eef2f4;--trend-base:#dfe5e9;--trend-text:#a3adb5;--trend-ink:#1b2128;position:relative;flex:1 1 auto;min-height:150px;margin:10px 0 0!important;border:0!important;background:none!important}
#practicePage .chart-plot.trend .trend-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.trend-grid line{stroke:var(--trend-grid);stroke-width:1}
.trend-grid line.is-base{stroke:var(--trend-base)}
.trend-ytext,.trend-xtext text{fill:var(--trend-text);font-size:11px;font-variant-numeric:tabular-nums}
.trend-stop-top{stop-color:var(--trend-line);stop-opacity:.18}
.trend-stop-bottom{stop-color:var(--trend-line);stop-opacity:0}
.trend-line{fill:none;stroke:var(--trend-line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.trend-avg{stroke:var(--trend-text);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.trend-avg-text{fill:var(--trend-text);font-size:10.5px}
.trend-dots circle{fill:#fff;stroke:var(--trend-line);stroke-width:2}
.trend-dots circle.is-last{fill:var(--trend-line);stroke:#fff;stroke-width:2.5}
.trend-last{fill:var(--trend-ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.trend-guide{stroke:var(--trend-line);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s ease}
.trend-focus{fill:var(--trend-line);stroke:#fff;stroke-width:3;opacity:0;transition:opacity .15s ease;pointer-events:none}
.trend-guide.show,.trend-focus.show{opacity:1}
.trend-empty{position:absolute;inset:0 0 28px 46px;display:grid;place-items:center;color:var(--trend-text);font-size:12px;pointer-events:none}
.trend-empty[hidden]{display:none}
.trend-tip{position:absolute;left:0;top:0;z-index:3;padding:7px 11px;border-radius:10px;background:var(--trend-ink);color:#fff;text-align:center;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(20,34,50,.45);opacity:0;pointer-events:none;transition:opacity .15s ease}
.trend-tip.show{opacity:1}
.trend-tip strong{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.trend-tip small{display:block;margin-top:1px;color:rgba(255,255,255,.7);font-size:10.5px}

/* Without a style (script failed) the two extra blocks stay out of the old layout. */
html:not([data-ui-style]) .pv-best,html:not([data-ui-style]) .pv-runs{display:none}

@media(max-width:1180px){
  html[data-ui-style="dashboard"] #practicePage .practice-card{grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-ui-style="dashboard"] #practicePage .practice-card .selected-drill-card{grid-column:1/4}
  html[data-ui-style="dashboard"] #practicePage .practice-card #startButton{grid-column:4}
  html[data-ui-style="dashboard"] #practicePage .selected-drill-metrics{display:none}
  html[data-ui-style="dashboard"] #practicePage .pv-best{grid-column:1/-1;grid-row:5;margin-bottom:12px}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div{grid-row:6}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(1){grid-column:1}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(2){grid-column:2}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(3){grid-column:3}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(4){grid-column:4}
  html[data-ui-style="dashboard"] #practicePage .practice-card{grid-template-rows:auto auto auto auto auto auto minmax(0,1fr) auto}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-chart{grid-column:1/-1;grid-row:7}
  html[data-ui-style="dashboard"] #practicePage .pv-runs{grid-column:1/-1;grid-row:8}
}
@media(max-width:900px){
  html[data-ui-style="dashboard"] #practicePage .practice-card{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0!important}
  html[data-ui-style="dashboard"] #practicePage .practice-card:before{grid-row:1/5}
  html[data-ui-style="dashboard"] #practicePage .practice-card .selected-drill-card{grid-column:1/-1;padding-right:16px}
  html[data-ui-style="dashboard"] #practicePage .practice-card #startButton{grid-column:1/-1;grid-row:4;margin:0 16px 16px!important}
  html[data-ui-style="dashboard"] #practicePage .setup-panel{margin:0 16px 14px}
  html[data-ui-style="dashboard"] #practicePage .practice-card #advancedModeControls{margin:-4px 16px 14px!important}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .recent-performance-card>header{grid-row:5}
  html[data-ui-style="dashboard"] #practicePage .pv-best{grid-row:6}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(odd){grid-column:1}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(even){grid-column:2}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(-n+2){grid-row:7}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-stat-row>div:nth-child(n+3){grid-row:8;margin-top:12px}
  html[data-ui-style="dashboard"] #practicePage .practice-card{grid-template-rows:repeat(10,auto)}
  html[data-ui-style="dashboard"] #practicePage .practice-stats .performance-chart{grid-row:9}
  html[data-ui-style="dashboard"] #practicePage .pv-runs{grid-row:10}
  html[data-ui-style="dashboard"] #practicePage :is(.pv-best,.practice-stats .performance-stat-row>div) strong{font-size:24px!important}
}

/* =====================================================================
   经典旧版 — the 10/25 layout: two centred columns.
     left : 「训练模式」cards in a 3-column grid, then the settings card (rows) with the big start button
     right: 今日挑战, then 近期表现 (four boxed numbers, trend, my-best strip)
   Rows interleave (left 1-2 / right 1, left 3 / right 2-3) so neither column leaves a hole.
   ===================================================================== */
html[data-ui-style="classic"] .dashboard .site-notice{width:min(1180px,calc(100% - var(--pv2-gutter) * 2))!important}
html[data-ui-style="classic"] #practicePage .dash-grid{grid-template-columns:minmax(0,560px) minmax(0,600px)!important;grid-template-rows:auto auto minmax(0,1fr);justify-content:center!important;align-items:start!important;gap:18px 20px!important}
html[data-ui-style="classic"] #practicePage :is(.practice-card,.practice-body){display:contents!important}
html[data-ui-style="classic"] #practicePage .practice-card .selected-drill-card,html[data-ui-style="classic"] #practicePage :is(.pv-best,.pv-runs),html[data-ui-style="classic"] #practicePage .legacy-dashboard-data{display:none!important}
html[data-ui-style="classic"] #practicePage :is(.mode-queue,.practice-setup,.practice-stats,.daily-challenge){border:1px solid #e5e7ea!important;border-radius:18px!important;background:#fff!important;box-shadow:0 2px 12px rgba(24,34,48,.035)!important}

/* Left top: the modes as cards. */
html[data-ui-style="classic"] #practicePage .dash-grid>.mode-queue{grid-column:1;grid-row:1/3;position:static;height:auto;max-height:none;padding:20px!important;gap:12px}
html[data-ui-style="classic"] #practicePage .mode-queue :is(.mode-queue-tabs,.mode-queue-search,.mode-queue-tip){display:none}
html[data-ui-style="classic"] #practicePage .mode-queue #modeMount{display:block;flex:none}
html[data-ui-style="classic"] #practicePage .mode-queue .mode-queue-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px;padding:0!important;overflow:visible}
html[data-ui-style="classic"] #practicePage .mode-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px 8px;border:1px solid #e4e8eb;border-radius:12px;background:#fff;text-align:center}
html[data-ui-style="classic"] #practicePage .mode-row:hover{border-color:#bfe3ea;background:#fbfeff}
html[data-ui-style="classic"] #practicePage .mode-row.active{border-color:#13b8cf;background:#f5fdfe;box-shadow:inset 0 0 0 1px #13b8cf}
html[data-ui-style="classic"] #practicePage .mode-row.active:before,html[data-ui-style="classic"] #practicePage .mode-row.is-pinned+.mode-row:not(.is-pinned):after{content:none}
html[data-ui-style="classic"] #practicePage .mode-row.is-pinned+.mode-row:not(.is-pinned){margin-top:0}
html[data-ui-style="classic"] #practicePage .mode-row-cover{width:36px;height:36px;border-radius:10px;box-shadow:none}
html[data-ui-style="classic"] #practicePage .mode-row-icon{width:19px;height:19px}
html[data-ui-style="classic"] #practicePage .mode-row-copy{justify-items:center}
html[data-ui-style="classic"] #practicePage .mode-row-copy strong{font-size:12.5px;white-space:normal}
html[data-ui-style="classic"] #practicePage .mode-row.active .mode-row-copy strong{color:#0a8fa3}
html[data-ui-style="classic"] #practicePage :is(.mode-row-copy small,.mode-row-meta){display:none}
html[data-ui-style="classic"] #practicePage .mode-row-fav{position:absolute;top:6px;right:6px}

/* Left bottom: the settings card, one bordered row per setting, then the big start button. */
html[data-ui-style="classic"] #practicePage .practice-setup{grid-column:1;grid-row:3;display:flex;flex-direction:column;gap:10px;padding:20px}
html[data-ui-style="classic"] #practicePage .setup-panel{grid-template-columns:minmax(0,1fr)!important;gap:8px}
html[data-ui-style="classic"] #practicePage .setup-panel>#targetSizeControl{grid-column:auto}
html[data-ui-style="classic"] #practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow):not(.hidden){min-height:52px;padding:8px 10px 8px 14px!important;border:1px solid #e6ebef!important;border-radius:10px!important;background:#fff!important}
html[data-ui-style="classic"] #practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow):hover{background:#fbfcfd!important}
html[data-ui-style="classic"] #practicePage .setup-panel .control-label label{color:#4f5a66!important;font-weight:600!important}
html[data-ui-style="classic"] #practicePage .setup-panel .segmented.light{gap:6px!important;padding:0!important;background:transparent!important;--motion-pill-bg:#13b8cf;--motion-pill-shadow:0 2px 6px rgba(19,184,207,.25)}
html[data-ui-style="classic"] #practicePage .setup-panel .segmented.light button{border:1px solid #e1e7eb!important;background:#fff!important}
html[data-ui-style="classic"] #practicePage .practice-card .setup-panel .segmented.light button.active,html[data-ui-style="classic"] #practicePage .practice-card .setup-panel .motion-pill.is-ready>button.active{color:#fff!important}
/* 经典旧版的按钮各自带白底和边框，会盖住滑动的青色色块（白字落在白底上看不见），所以这里不用滑块，直接给选中的按钮上色。 */
html[data-ui-style="classic"] #practicePage .practice-card .setup-panel .segmented.light>.motion-pill-indicator{display:none!important}
html[data-ui-style="classic"] #practicePage .practice-card .setup-panel .segmented.light>button.active{border-color:#13b8cf!important;background:#13b8cf!important;color:#fff!important}
html[data-ui-style="classic"] #practicePage .practice-setup>#startButton{height:58px!important;margin-top:6px!important;border-radius:12px!important;font-size:17px!important}

/* Right: daily challenge, then recent performance. */
html[data-ui-style="classic"] #practicePage .dash-grid>.summary-column{grid-column:2;grid-row:1;display:block!important;min-width:0}
html[data-ui-style="classic"] #practicePage :is(#dailyMount,.daily-challenge){display:block!important}
html[data-ui-style="classic"] #practicePage .daily-challenge{margin:0!important;padding:20px!important}
html[data-ui-style="classic"] #practicePage .practice-stats{grid-column:2;grid-row:2/4;align-self:stretch;min-height:0;padding:20px}
html[data-ui-style="classic"] #practicePage .practice-stats .performance-stat-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:14px 0}
html[data-ui-style="classic"] #practicePage .practice-stats .performance-stat-row>div,html[data-ui-style="classic"] #practicePage .practice-stats .performance-stat-row>div:first-child{padding:12px!important;border:1px solid #e7edf1!important;border-radius:10px!important}
html[data-ui-style="classic"] #practicePage .practice-stats .performance-stat-row small{color:#1ba76b!important}
html[data-ui-style="classic"] #practicePage .practice-stats .performance-chart{min-height:220px;padding:14px!important;border:1px solid #e7edf1!important;border-radius:10px!important;background:#fff!important;box-shadow:none}
html[data-ui-style="classic"] #practicePage .practice-stats .performance-personal-best{display:flex!important;margin-top:12px}

@media(max-width:1100px){
  html[data-ui-style="classic"] #practicePage .dash-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none}
  html[data-ui-style="classic"] #practicePage .dash-grid>:is(.mode-queue,.summary-column),html[data-ui-style="classic"] #practicePage :is(.practice-setup,.practice-stats){grid-column:1!important;grid-row:auto!important}
}
@media(max-width:560px){html[data-ui-style="classic"] #practicePage .mode-queue .mode-queue-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---------- 更多设置（assets/practice-quick-settings.js）：设置区底部一条入口，点击弹出浮窗，两种风格共用 ---------- */
#practicePage .setup-panel>.quick-settings{order:9;grid-column:1/-1;flex:1 0 100%;min-width:0;padding-top:6px;border-top:1px dashed #e3e9ed}
.quick-settings-toggle{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#4f5a66;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.quick-settings-toggle:hover{background:#f4f6f9}
.quick-settings-toggle svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.quick-settings-toggle small{flex:1;min-width:0;overflow:hidden;color:#9aa4ad;font-size:11.5px;font-weight:400;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.quick-settings-toggle i{width:7px;height:7px;flex:0 0 auto;margin:0 6px 0 2px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg)}

/* 浮窗 */
html.quick-modal-open{overflow:hidden}
.quick-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px}
.quick-modal[hidden]{display:none}
.quick-modal-backdrop{position:absolute;inset:0;background:rgba(18,26,32,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:quick-fade .18s ease-out}
.quick-modal-card{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(720px,100%);max-height:min(680px,calc(100dvh - 32px));overflow:hidden;border:1px solid #dfe6ea;border-radius:16px;background:#fff;color:#1b2128;box-shadow:0 28px 80px rgba(20,40,52,.28);animation:quick-rise .22s cubic-bezier(.2,.8,.2,1)}
@keyframes quick-fade{from{opacity:0}}
@keyframes quick-rise{from{opacity:0;transform:translateY(10px) scale(.985)}}
.quick-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 12px}
.quick-modal-head h2{margin:0;font-size:19px}
.quick-modal-close{width:32px;height:32px;border:0;border-radius:8px;background:#f2f5f6;color:#6d7a84;font-size:20px;line-height:1;cursor:pointer}
.quick-modal-close:hover{background:#e8eef0}
.quick-modal-tabs{display:flex;gap:4px;margin:0 22px;padding:4px;border-radius:11px;background:#f1f4f6}
.quick-modal-tabs button{flex:1;height:34px;border:0;border-radius:8px;background:transparent;color:#6b7782;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.quick-modal-tabs button[aria-selected="true"]{background:#fff;color:#0f8fa3;box-shadow:0 1px 4px rgba(20,40,50,.12)}
.quick-modal-body{min-height:300px;overflow-y:auto;padding:16px 22px 18px;overscroll-behavior:contain}
.quick-modal-body>section[hidden]{display:none}
.quick-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid #edf1f3}
.quick-modal-done{height:36px;margin-left:auto;padding:0 26px;border:0;border-radius:9px;background:#13a7b9;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.quick-modal-done:hover{background:#0f97a8}
.quick-modal :is(button,select,input):focus-visible{outline:2px solid #74cbd4;outline-offset:2px}

.quick-family-tabs{display:inline-flex;gap:2px;margin:0 0 12px;padding:3px;border-radius:9px;background:#f1f4f6}
.quick-family-tabs button{min-width:84px;height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:#6b7782;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.quick-family-tabs button[aria-selected="true"]{background:#fff;color:#0f8fa3;box-shadow:0 1px 4px rgba(20,40,50,.12)}
.quick-settings-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.quick-settings-list button{display:grid;gap:6px;min-width:0;padding:6px;border:1px solid #e3e9ed;border-radius:12px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.quick-settings-list button:hover{border-color:#bfe3ea}
.quick-settings-list button[aria-checked="true"]{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.16)}
.quick-settings-list button:disabled{opacity:.6;cursor:progress}
.quick-thumb{display:grid;place-items:center;height:68px;overflow:hidden;border-radius:8px;background:linear-gradient(150deg,var(--swatch,#344b58),#161b21)}
.quick-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.quick-thumb-none{background:#f1f4f6;color:#8a959e}
.quick-thumb-none svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.quick-thumb-scene{background-position:center;background-size:cover}
.quick-thumb-effect{background:radial-gradient(circle at 50% 45%,#3a4f63,#1b2632)}
.quick-thumb-effect canvas{display:block;width:100%;height:100%}
.quick-name{overflow:hidden;color:#1b2128;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.quick-settings-empty{grid-column:1/-1;margin:4px 0 0;color:#9aa4ad;font-size:12px}
.quick-settings-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:14px;padding:11px 12px;border:1px solid #e3e9ed;border-radius:12px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer}
.quick-settings-switch:hover{border-color:#bfe3ea}
.quick-settings-switch span{display:grid;gap:2px;min-width:0}
.quick-settings-switch strong{color:#1b2128;font-size:13px}
.quick-settings-switch small{color:#9aa4ad;font-size:11.5px}
.quick-settings-switch i{position:relative;flex:0 0 auto;width:36px;height:21px;border-radius:999px;background:#d5dce1;transition:background .18s ease}
.quick-settings-switch i:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s ease}
.quick-settings-switch[aria-checked="true"] i{background:#13b8cf}
.quick-settings-switch[aria-checked="true"] i:after{transform:translateX(15px)}
.quick-sound-muted{margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#fff7e8;color:#9a6a17;font-size:12px}
.quick-sound-muted[hidden]{display:none}
.quick-sound-group{margin-bottom:14px;padding:12px 14px;border:1px solid #e3e9ed;border-radius:12px}
.quick-sound-group>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.quick-sound-group>header strong{font-size:13.5px}
.quick-sound-group .quick-settings-switch{margin-top:6px;padding:8px 0;border:0;border-radius:0}
.quick-preview{height:28px;padding:0 12px;border:1px solid #dfe7ea;border-radius:7px;background:#fff;color:#4f6572;font:inherit;font-size:12px;cursor:pointer}
.quick-preview:hover{border-color:#bfe3ea;color:#0f8fa3}
.quick-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;color:#4f5a66;font-size:13px}
.quick-row select{grid-column:2/4;height:36px;padding:0 10px;border:1px solid #e0e7ea;border-radius:8px;background:#fafcfd;color:#26404e;font:inherit;font-size:13px}
.quick-row input[type=range]{width:100%;accent-color:#13b8cf}
.quick-row input[type=range]:disabled{opacity:.4}
.quick-row output{min-width:42px;color:#14889a;font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.quick-settings-status{margin:0;color:#7d8893;font-size:12px}
@media(max-width:560px){
  .quick-modal{padding:0;place-items:end stretch}
  .quick-modal-card{width:100%;max-height:92dvh;border-radius:16px 16px 0 0}
  .quick-modal-head{padding:16px 16px 10px}.quick-modal-tabs{margin:0 16px}.quick-modal-body{padding:14px 16px}.quick-modal-foot{padding:10px 16px}
  .quick-settings-list{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
@media(prefers-reduced-motion:reduce){.quick-modal-backdrop,.quick-modal-card{animation:none}}