/* Practice page, second layout (2026-10-31).
   Loaded after styles.css and motion.css, so it only overrides. Three columns:
   a playlist-style mode queue on the left (category tabs, search, scrolling
   list - room for many more modes), the selected mode with its settings in the
   middle, and the daily challenge + recent performance on the right.
   Selectors start at .dashboard / #practicePage to outrank styles.css. */

:root{--pv2-ease:cubic-bezier(.22,.68,.16,1);--pv2-ease-out:cubic-bezier(.16,1,.3,1);--pv2-line:#e6ebef;--pv2-soft:#f4f7f9;--pv2-ink:#1b2128;--pv2-muted:#7d8893;--pv2-accent:#13b8cf;--pv2-sticky-top:92px;--pv2-gutter:clamp(24px,4vw,64px);--pv2-panel-h:max(640px,calc(100vh - 190px));--pv2-queue-w:320px;--pv2-card-w:820px;--pv2-grid-gap:22px}
@media(max-width:1240px){:root{--pv2-gutter:22px}}
@media(max-width:900px){:root{--pv2-gutter:16px}}

/* ---------- Page width + columns ----------
   The side margins equal the header's own padding, so the content lines up
   with the logo on the left and the account chip on the right. */
.dashboard .dash-content,.dashboard .dash-footer,.dashboard .site-notice{width:min(1760px,calc(100% - var(--pv2-gutter) * 2))!important;max-width:none!important}
/* 2026-11-01: the practice area no longer stretches edge to edge. The mode
   list and a fixed-width practice card sit together in the middle of the
   page; the feedback notice above takes the same width so the edges line up. */
#practicePage .dash-grid{grid-template-columns:var(--pv2-queue-w) minmax(0,var(--pv2-card-w))!important;justify-content:center!important;gap:var(--pv2-grid-gap)!important;height:auto!important;align-items:start!important}
.dashboard .site-notice{width:min(calc(var(--pv2-queue-w) + var(--pv2-grid-gap) + var(--pv2-card-w)),calc(100% - var(--pv2-gutter) * 2))!important}
#practicePage .dash-grid>.mode-queue{grid-column:1;grid-row:1}
#practicePage .dash-grid>.practice-card{grid-column:2;grid-row:1}
#practicePage .dash-grid>.summary-column,#practicePage .daily-challenge,#dailyMount{display:none!important}
@media(max-width:900px){
  #practicePage .dash-grid{grid-template-columns:minmax(0,1fr)!important}
  #practicePage .dash-grid>.mode-queue,#practicePage .dash-grid>.practice-card{grid-column:1;grid-row:auto}
}

/* ---------- Feedback notice ---------- */
.dashboard .site-notice{display:flex!important;align-items:center;gap:12px;min-height:0!important;margin:18px auto 0!important;padding:8px 8px 8px 10px!important;border:1px solid #e6ebef!important;border-radius:14px!important;background:#fff!important;color:#4c5862!important;box-shadow:0 1px 2px rgba(20,34,50,.03);animation:pv2-fade-down .4s var(--pv2-ease-out) both!important;transition:opacity .2s ease,transform .2s ease}
.dashboard .site-notice[hidden]{display:none!important}
.dashboard .site-notice.is-leaving{opacity:0;transform:translateY(-4px)}
@keyframes pv2-fade-down{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.site-notice-icon{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:#e9f8fb;color:#0b9db2}
.site-notice-icon svg{width:17px;height:17px}
.dashboard .site-notice .site-notice-copy{flex:1;min-width:0;display:flex!important;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.dashboard .site-notice .site-notice-copy strong{color:#1b2128!important;font-size:13px!important}
.dashboard .site-notice .site-notice-copy span{color:#6b7782!important;font-size:12.5px!important}
.dashboard .site-notice .site-notice-copy b{color:#1b2128;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.site-notice-action{height:30px;flex:0 0 auto;padding:0 12px;border:1px solid #e1e7eb;border-radius:9px;background:#fff;color:#0b8fa3;font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}
.site-notice-action:hover{border-color:#bfe6ed;background:#f2fbfc}
.site-notice-close{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:transparent;color:#9aa4ad;font-size:18px;line-height:1;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.site-notice-close:hover{background:#f2f5f7;color:#4c5862}
@media(max-width:620px){.site-notice-action{display:none}}

/* ---------- Mode queue (the "playlist" panel) ---------- */
.mode-queue{position:sticky;top:var(--pv2-sticky-top);display:flex;flex-direction:column;gap:12px;min-width:0;height:var(--pv2-panel-h);padding:18px 14px 12px!important;border-radius:18px!important}
@media(max-width:900px){.mode-queue{position:relative;top:auto;height:auto;max-height:520px}}
.mode-queue-head,.mode-queue-tabs,.mode-queue-search,.mode-queue-tip{flex-shrink:0}
.mode-queue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 4px}
.mode-queue-head h2{margin:0;color:var(--pv2-ink);font-size:18px;letter-spacing:-.3px}
.mode-queue-head p{display:flex;align-items:center;gap:6px;margin:4px 0 0;color:var(--pv2-muted);font-size:11px}
.mode-queue-overline{font-weight:750;letter-spacing:1.2px}
.mode-queue-overline:after{content:"·";margin-left:6px;font-weight:400}
.mode-queue-icon-btn{height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 11px;border:1px solid var(--pv2-line);border-radius:10px;background:#fff;color:#4b5661;font:inherit;font-size:12px;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.mode-queue-icon-btn svg{width:15px;height:15px}
.mode-queue-icon-btn:hover{border-color:#c9d6dd;color:#0b8fa3}
.mode-queue-icon-btn:active svg{transform:rotate(-12deg)}
.mode-queue-tabs{display:flex;gap:6px;padding:0 2px;overflow-x:auto;scrollbar-width:none}
.mode-queue-tabs button{flex:0 0 auto;height:30px;padding:0 13px;border:1px solid var(--pv2-line);border-radius:999px;background:#fff;color:#5d6976;font:inherit;font-size:12px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.mode-queue-tabs button:hover{border-color:#cfd9df;color:var(--pv2-ink)}
.mode-queue-tabs button.active{border-color:var(--pv2-ink);background:var(--pv2-ink);color:#fff}
.mode-queue-search{display:flex;align-items:center;gap:8px;height:36px;margin:0 2px;padding:0 11px;border:1px solid var(--pv2-line);border-radius:10px;background:var(--pv2-soft);color:#94a0aa;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.mode-queue-search svg{width:15px;height:15px;flex:0 0 auto}
.mode-queue-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--pv2-ink);font:inherit;font-size:12.5px}
.mode-queue-search:focus-within{border-color:var(--pv2-accent);background:#fff;box-shadow:0 0 0 3px rgba(19,184,207,.12)}
.mode-queue #modeMount{flex:1;min-height:0;display:flex;margin:0!important}
.mode-queue .mode-queue-list{flex:1;display:flex!important;flex-direction:column;gap:6px;min-height:0;margin:0!important;padding:2px!important;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d9e0e5 transparent;grid-template-columns:none!important}
.mode-queue-tip{margin:0;padding:6px 4px 0;border-top:1px solid #eef2f4;color:#9aa4ad;font-size:10.5px;text-align:center}
.mode-queue-empty{margin:18px 8px;color:var(--pv2-muted);font-size:12px;line-height:1.6;text-align:center}

.mode-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto 22px;align-items:center;gap:11px;min-height:64px;padding:8px 8px 8px 8px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--pv2-ink);cursor:pointer;outline:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease}
.mode-queue-list.is-intro .mode-row{animation:pv2-row-in .34s var(--pv2-ease-out) both;animation-delay:calc(var(--i,0) * 22ms)}
.mode-row:hover{background:var(--pv2-soft)}
.mode-row:focus-visible{border-color:var(--pv2-accent);box-shadow:0 0 0 3px rgba(19,184,207,.12)}
.mode-row.active{border-color:color-mix(in srgb,var(--cover-a) 45%,#fff);background:color-mix(in srgb,var(--cover-a) 9%,#fff);box-shadow:0 6px 16px -12px var(--cover-b)}
.mode-row.active:before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--cover-a)}
@keyframes pv2-row-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.mode-row-cover{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:linear-gradient(150deg,var(--cover-a),var(--cover-b));color:#fff;box-shadow:0 4px 10px -6px var(--cover-b)}
.mode-row-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.32) 0 18%,transparent 19%),radial-gradient(circle at 0% 115%,rgba(255,255,255,.16) 0 46%,transparent 47%)}
.mode-row-icon{position:relative;width:24px;height:24px;stroke:currentColor;stroke-width:1.8}
.mode-row-icon.is-solid,.mode-cover-icon.is-solid{fill:currentColor;stroke:none}
.mode-row-copy{display:grid;gap:3px;min-width:0}
.mode-row-copy strong{overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.mode-row-copy small{overflow:hidden;color:var(--pv2-muted);font-size:11px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.mode-row.active .mode-row-copy strong{color:color-mix(in srgb,var(--cover-b) 85%,#000)}
.mode-row-meta{display:grid;justify-items:end;gap:5px}
.mode-row-best{color:#8a96a0;font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mode-row .mode-playing{position:static;height:12px;display:none;align-items:flex-end;gap:2px;opacity:1}
.mode-row .mode-playing i{width:3px;height:100%;border-radius:2px;background:var(--cover-a);transform-origin:bottom;transform:scaleY(.35)}
.mode-row.active .mode-playing{display:flex}
.mode-row.active .mode-playing i{animation:pv2-eq 1s ease-in-out infinite}
.mode-row.active .mode-playing i:nth-child(2){animation-delay:-.35s;animation-duration:.8s}
.mode-row.active .mode-playing i:nth-child(3){animation-delay:-.6s;animation-duration:1.15s}
@keyframes pv2-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.mode-row-fav{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:#c3ccd3;opacity:0;transition:opacity .18s ease,color .18s ease,transform .2s var(--pv2-ease-out)}
.mode-row-fav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.mode-row:hover .mode-row-fav,.mode-row:focus-within .mode-row-fav,.mode-row-fav.is-on{opacity:1}
.mode-row-fav:hover{color:#f0a92e;transform:scale(1.12)}
.mode-row-fav.is-on{color:#f0a92e}
.mode-row-fav.is-on svg{fill:currentColor}
@media(hover:none){.mode-row-fav{opacity:1}}

/* Pinned rows, inline rename. */
.mode-row-copy small{display:flex;align-items:center;gap:4px}
.mode-row-pin{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:var(--cover-a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-row.is-pinned+.mode-row:not(.is-pinned){margin-top:9px}
.mode-row.is-pinned+.mode-row:not(.is-pinned):after{content:"";position:absolute;left:10px;right:10px;top:-8px;height:1px;background:#edf1f4;pointer-events:none}
.mode-row-rename{width:100%;min-width:0;height:24px;margin:-2px 0 -1px -6px;padding:0 6px;border:1px solid var(--pv2-accent);border-radius:7px;outline:0;background:#fff;color:var(--pv2-ink);font:inherit;font-size:13.5px;font-weight:700;box-shadow:0 0 0 3px rgba(19,184,207,.14)}
.mode-row.is-renaming{cursor:default}

/* Long-press drag to reorder. */
.mode-row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mode-queue-list.is-reflow .mode-row{transition:transform .34s cubic-bezier(.2,.9,.25,1),background-color .18s ease,border-color .18s ease,box-shadow .25s ease}
.mode-queue-list.is-sorting .mode-row:not(.is-dragging):hover{background:transparent}
.mode-queue-list.is-sorting .mode-row:not(.is-dragging){opacity:.88}
/* While the finger/mouse is held, the row sinks a little: a hint that it is about to lift. */
.mode-row.is-pressing{transition:transform .35s cubic-bezier(.3,.7,.4,1),background-color .18s ease;transform:scale(.975);background:var(--pv2-soft)}
.mode-row.is-dragging{z-index:5;opacity:1!important;border-color:color-mix(in srgb,var(--cover-a) 35%,#e3e9ed);background:#fff!important;box-shadow:0 18px 36px -14px rgba(20,34,50,.38),0 0 0 4px color-mix(in srgb,var(--cover-a) 12%,transparent);cursor:grabbing;transition:box-shadow .25s ease,border-color .2s ease!important;will-change:transform}
.mode-row.is-dragging .mode-row-cover{box-shadow:0 8px 16px -8px var(--cover-b)}
/* Release: glide into the gap with a soft overshoot, then flash a ring once it lands. */
.mode-row.is-settling{z-index:5;background:#fff;transition:transform .32s cubic-bezier(.34,1.4,.5,1),box-shadow .32s ease!important;box-shadow:0 4px 12px -8px rgba(20,34,50,.25)}
.mode-row.is-dropped{animation:pv2-drop .6s ease-out}
@keyframes pv2-drop{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--cover-a) 28%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.mode-queue-list.is-sorting{cursor:grabbing}

/* Right-click menu (also: long-press on touch, the context-menu key, Shift+F10). */
.mode-menu{position:fixed;z-index:1000;min-width:184px;padding:6px;border:1px solid #e3e9ed;border-radius:12px;background:#fff;box-shadow:0 18px 40px -14px rgba(20,34,50,.32),0 2px 6px rgba(20,34,50,.06);animation:pv2-menu-in .14s var(--pv2-ease-out) both;transform-origin:top left}
.mode-menu-title{overflow:hidden;max-width:220px;padding:6px 10px 7px;color:var(--pv2-muted);font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.mode-menu button{width:100%;height:34px;display:flex;align-items:center;gap:10px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--pv2-ink);font:inherit;font-size:13px;text-align:left;cursor:pointer;outline:0}
.mode-menu button svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#7d8893;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-menu button:is(:hover,:focus-visible):not([disabled]){background:var(--pv2-soft)}
.mode-menu button:is(:hover,:focus-visible):not([disabled]) svg{stroke:var(--pv2-accent)}
.mode-menu button[disabled]{color:#b9c1c8;cursor:default}
.mode-menu button[disabled] svg{stroke:#d0d6db}
.mode-menu-sep{height:1px;margin:5px 6px;background:#eef2f4}
@keyframes pv2-menu-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- Practice card (seventh pass, 2026-11-01) ----------
   A narrow column (--pv2-card-w, 820px) as tall as the mode list, read top
   to bottom like a player's "now playing" panel:
     hero        selected mode, three numbers as chips
     settings    compact tiles, label and control on one line, two per row
     start       one wide button
     recent      four numbers on one line, the trend filling what is left
   Nothing is boxed inside anything else: hairlines and a change of tint
   mark the sections. A custom drill's parameters can push the content past
   the card's height; then the body scrolls and the start button stays put. */
#practicePage .practice-card{display:flex!important;flex-direction:column;height:var(--pv2-panel-h);min-height:0!important;margin:0;padding:0!important;overflow:hidden;border:1px solid #e5e9ec!important;border-radius:18px!important;background:#fff!important;box-shadow:0 2px 12px rgba(24,34,48,.035)!important;container-type:inline-size}
#practicePage .practice-card:hover{box-shadow:0 2px 12px rgba(24,34,48,.035)!important}
#practicePage .practice-card .practice-heading{display:none!important}
#practicePage .practice-card[data-humanoid-drill="true"] .setup-panel>#targetSizeControl{display:none!important}
#practicePage .practice-body{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dfe5e9 transparent}
#practicePage .practice-setup{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 20px 16px}
#practicePage .practice-stats{flex:1 0 auto;display:flex;flex-direction:column;min-width:0;min-height:190px;padding:16px 20px 18px;border-top:1px solid #eef2f4;background:#fbfcfd}
@media(max-width:900px){
  #practicePage .practice-card{height:auto}
  #practicePage .practice-body{overflow:visible}
}
@container (max-width:520px){#practicePage :is(.practice-setup,.practice-stats){padding-left:14px;padding-right:14px}}

/* Section headings. */
#practicePage .setup-panel-head{display:flex;align-items:baseline;gap:10px;margin:0;padding:0}
#practicePage .setup-panel-head strong{color:var(--pv2-ink);font-size:14px;letter-spacing:-.1px}
#practicePage .setup-panel-head small{overflow:hidden;color:var(--pv2-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Hero ---------- */
#practicePage .practice-card .selected-drill-card{position:relative;flex:0 0 auto;overflow:hidden;isolation:isolate;display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;min-height:0;margin:0!important;padding:18px 20px;border:0;border-bottom:1px solid #eef2f4;border-radius:0;background:linear-gradient(110deg,color-mix(in srgb,var(--hero-a,#16c2d6) 16%,#fff) 0%,color-mix(in srgb,var(--hero-a,#16c2d6) 6%,#fff) 50%,#fff 85%);box-shadow:none}
#practicePage .practice-card .selected-drill-card:before,#practicePage .practice-card .selected-drill-card:after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
#practicePage .practice-card .selected-drill-card:before{left:-80px;top:-130px;width:280px;height:280px;border:26px solid color-mix(in srgb,var(--hero-a,#16c2d6) 7%,transparent)}
#practicePage .practice-card .selected-drill-card:after{right:-40px;bottom:-140px;width:240px;height:240px;background:radial-gradient(circle,color-mix(in srgb,var(--hero-a,#16c2d6) 11%,transparent),transparent 68%)}
#practicePage .selected-drill-copy{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 300px}
#practicePage .selected-drill-copy .practice-symbol{width:52px;height:52px;flex:0 0 auto;margin:0;border-radius:15px}
#practicePage .practice-symbol.from-cover{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,var(--cover-a),var(--cover-b))!important;color:#fff!important;box-shadow:0 10px 22px -12px var(--cover-b),inset 0 0 0 1px rgba(255,255,255,.18)}
#practicePage .practice-symbol.from-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.32) 0 18%,transparent 19%),radial-gradient(circle at 0% 115%,rgba(255,255,255,.16) 0 46%,transparent 47%)}
#practicePage .practice-symbol.from-cover svg{position:relative;width:26px;height:26px;stroke:currentColor;stroke-width:1.7}
/* styles.css still carries the old hand-drawn symbols keyed by mode (.symbol-six turns the box into a
   3×6px grid, .symbol-moving / -tracking / -micro_adjust draw an extra blue line or frame with :after).
   The cover icon replaces all of that, so switch those leftovers off whatever the mode. */
#practicePage .practice-symbol.from-cover{display:grid!important;grid-template-columns:none!important;grid-template-rows:none!important;place-items:center!important;place-content:center!important;gap:0!important}
#practicePage .practice-symbol.from-cover:after{content:none!important;display:none!important}
#practicePage .practice-symbol.from-cover>i{display:none!important}
#practicePage .mode-kicker{display:inline-flex;align-items:center;height:18px;margin:0 0 4px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.75);color:color-mix(in srgb,var(--hero-a,#16c2d6) 72%,#16202a);font-size:10px;font-weight:700;letter-spacing:.5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-a,#16c2d6) 20%,transparent)}
#practicePage .selected-drill-copy h3{margin:0 0 2px;color:var(--pv2-ink);font-size:20px;letter-spacing:-.3px}
#practicePage .selected-drill-copy p{display:-webkit-box;overflow:hidden;margin:0;color:#66727d;font-size:12px;line-height:1.5;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#practicePage .selected-drill-metrics{display:flex;gap:6px;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
#practicePage .selected-drill-metrics>div{display:grid;gap:2px;min-width:84px;padding:8px 12px!important;border:0!important;border-radius:12px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(20,34,50,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#practicePage .selected-drill-metrics>div:nth-child(2){background:linear-gradient(150deg,var(--hero-a,#16c2d6),color-mix(in srgb,var(--hero-a,#16c2d6) 70%,#0b3b46));box-shadow:0 8px 18px -12px var(--hero-a,#16c2d6)}
#practicePage .selected-drill-metrics span{color:var(--pv2-muted);font-size:10px;white-space:nowrap}
#practicePage .selected-drill-metrics strong{color:var(--pv2-ink);font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums}
#practicePage .selected-drill-metrics>div:nth-child(2) span{color:rgba(255,255,255,.82)}
#practicePage .selected-drill-metrics>div:nth-child(2) strong{color:#fff}
#practicePage .selected-drill-card.is-switching .selected-drill-copy,#practicePage .selected-drill-card.is-switching .selected-drill-metrics{animation:pv2-swap .36s var(--pv2-ease-out)}
@keyframes pv2-swap{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@container (max-width:520px){
  #practicePage .practice-card .selected-drill-card{padding:16px 14px}
  #practicePage .selected-drill-copy{flex-basis:100%}
  #practicePage .selected-drill-metrics{width:100%}
  #practicePage .selected-drill-metrics>div{flex:1;min-width:0;padding:7px 10px!important}
  #practicePage .selected-drill-metrics strong{font-size:15px}
}

/* ---------- Mode parameters (custom drills only) ---------- */
/* One tinted strip: the "mode parameters" title on the left, the drill's own
   controls in a row beside it, each label inline with its control. */
#practicePage .practice-setup>#advancedModeControls{flex:0 0 auto;display:flex!important;align-items:center;gap:14px;margin:0!important;padding:10px 14px!important;border:0!important;border-radius:12px!important;background:color-mix(in srgb,var(--hero-a,#16c2d6) 7%,#f7f9fa)}
#practicePage .practice-setup>#advancedModeControls.hidden{display:none!important}
#practicePage .practice-setup>#advancedModeControls:before{content:attr(aria-label);flex:0 0 auto;margin:0;color:color-mix(in srgb,var(--hero-a,#16c2d6) 65%,#16202a);font-size:12px;font-weight:700;white-space:nowrap}
#practicePage .practice-setup>#advancedModeControls>div.hidden{display:none!important}
#practicePage .practice-setup>#advancedModeControls>div:not(.hidden){flex:1;min-width:0;animation:pv2-swap .32s var(--pv2-ease-out)}
#practicePage .practice-setup>#advancedModeControls>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:center;gap:8px 14px!important}
#practicePage .practice-setup>#advancedModeControls label:not(.drill-slider){display:flex!important;align-items:center;gap:8px!important;min-width:0;color:#5d6976!important;font-size:11.5px!important;white-space:nowrap}
#practicePage .practice-setup>#advancedModeControls label:not(.drill-slider) :is(select,input){flex:1;min-width:0}
#practicePage .practice-setup>#advancedModeControls label:not(.drill-slider) :is(select,input){width:100%!important;max-width:none!important;height:34px!important;border-radius:9px!important;border-color:#e3e9ed!important;background-color:#fff!important}
#practicePage .practice-setup>#advancedModeControls .drill-slider{color:#5d6976;font-size:11.5px}
#practicePage .practice-setup>#advancedModeControls :is(.return-hold-label,.sniper-drill-note){grid-column:1/-1;align-self:start;color:#98a2ab;font-size:11px}
@container (max-width:640px){
  #practicePage .practice-setup>#advancedModeControls{flex-direction:column;align-items:stretch;gap:8px}
  #practicePage .practice-setup>#advancedModeControls>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- Settings: compact tiles, label and control on one line ---------- */
#practicePage .setup-panel{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:8px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
#practicePage .setup-panel>.aim-parameter-row{display:contents!important}
#practicePage .setup-panel>.sound-row:not(#trailToggleRow):not(#movingDirectionRow),#practicePage .setup-panel>.sound-row.hidden{display:none!important}
#practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow).hidden{display:none!important}
#practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow):not(.hidden){order:0!important;display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px!important;min-width:0;min-height:56px;height:auto!important;margin:0!important;padding:9px 10px 9px 14px!important;border:0!important;border-radius:12px!important;background:#f5f7f9!important;box-shadow:none!important;overflow:visible!important;transition:background-color .2s ease}
#practicePage .setup-panel :is(.control-row,#trailToggleRow,#movingDirectionRow):hover{background:#f0f3f5!important}
#practicePage .setup-panel>#targetSizeControl{grid-column:1/-1}
#practicePage .setup-panel .control-label{display:block!important;flex:0 0 auto;margin:0!important}
#practicePage .setup-panel .control-label label,#practicePage .setup-panel #movingDirectionRow>label{color:var(--pv2-ink)!important;font-size:12.5px!important;font-weight:650!important;white-space:nowrap}
#practicePage .setup-panel .control-label>span,#practicePage .setup-panel .control-label>output{display:none!important}
#practicePage .setup-panel .control-row>:not(.control-label):not(small){flex:1 1 0;min-width:0;max-width:100%}
#practicePage .setup-panel :is(.game-sensitivity-hint,.target-size-hint){display:block!important;flex:1 0 100%;margin:-1px 0 0!important;color:#9aa4ad!important;font-size:10.5px!important;line-height:1.4;text-align:right;white-space:normal!important}

/* Segmented controls: one track, equal segments, white pill. */
#practicePage .setup-panel .segmented.light{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none!important;gap:2px!important;width:100%!important;max-width:none;height:36px!important;padding:3px!important;border:0!important;border-radius:10px!important;background:#e7ecef!important;--motion-pill-bg:#fff;--motion-pill-shadow:0 1px 4px rgba(20,28,40,.12);--motion-pill-radius:7px}
#practicePage .setup-panel .segmented.light button{height:30px!important;min-width:0!important;padding:0 4px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#6b7782!important;font-size:12px!important;font-weight:600;white-space:nowrap;box-shadow:none!important;transition:color .2s ease}
#practicePage .setup-panel .segmented.light button:hover{color:var(--pv2-ink)!important}
#practicePage .practice-card .setup-panel .segmented.light button.active,#practicePage .practice-card .setup-panel .motion-pill.is-ready>button.active{color:var(--pv2-ink)!important}
#practicePage .setup-panel .segmented.light:not(.motion-pill) button.active{background:#fff!important;box-shadow:0 1px 4px rgba(20,28,40,.12)!important}
#practicePage .setup-panel>#targetSizeControl .segmented.light{flex:0 1 420px}

#practicePage .setup-panel .game-preset-dropdown{width:100%}
#practicePage .setup-panel .game-preset-trigger{width:100%;height:36px;border-color:#e3e9ed;border-radius:10px;background:#fff}
#practicePage .setup-panel .sensitivity-pair{display:flex!important;gap:6px;width:100%}
#practicePage .setup-panel .sensitivity-cell{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
#practicePage .setup-panel .sensitivity-cell.hidden{display:none}
#practicePage .setup-panel .sensitivity-input{width:100%!important;min-width:0;height:36px!important;border-color:#e3e9ed!important;border-radius:10px!important;background:#fff!important;font-size:13px!important}
/* Trail: label, the duration (when on), then the switch - all on one line. */
#practicePage .setup-panel>#trailToggleRow .trail-setting-control{display:contents!important}
#practicePage .setup-panel>#trailToggleRow .trail-setting-copy{order:0;flex:1 1 auto;display:block;min-width:0}
#practicePage .setup-panel>#trailToggleRow .trail-setting-copy label{color:var(--pv2-ink);font-size:12.5px;font-weight:650;white-space:nowrap}
#practicePage .setup-panel>#trailToggleRow .trail-setting-copy small{display:none}
#practicePage .setup-panel>#trailToggleRow .trail-duration-field{order:1;display:flex;align-items:center;gap:6px;margin:0!important;color:#7d8893;font-size:11.5px}
#practicePage .setup-panel>#trailToggleRow .trail-duration-field>span:first-child{display:none}
#practicePage .setup-panel>#trailToggleRow .trail-duration-field[hidden]{display:none!important}
#practicePage .setup-panel>#trailToggleRow .trail-duration-field input{width:54px;height:30px;border:1px solid #e3e9ed;border-radius:8px;background:#fff;text-align:center}
#practicePage .setup-panel>#trailToggleRow .switch{order:2;flex:0 0 auto}
@container (max-width:560px){
  #practicePage .setup-panel{grid-template-columns:minmax(0,1fr)}
  #practicePage .setup-panel>#targetSizeControl .segmented.light{flex-basis:100%}
}

/* ---------- Start ---------- */
#practicePage .practice-setup>#startButton{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;height:50px!important;margin:2px 0 0!important;border-radius:13px!important;font-size:15.5px!important;letter-spacing:.5px;box-shadow:0 10px 22px -14px rgba(19,184,207,.95);transition:transform .18s ease,box-shadow .25s ease,filter .2s ease}
#practicePage .practice-setup>#startButton svg{width:22px;height:22px}
#practicePage .practice-setup>#startButton kbd{margin-left:2px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.2);font-size:10.5px;font-weight:600}
#practicePage .practice-setup>#startButton:hover{filter:brightness(1.04);box-shadow:0 14px 26px -14px rgba(19,184,207,.9)}
#practicePage .practice-setup>#startButton:active{transform:translateY(1px) scale(.995)}
#practicePage .practice-setup #controllerConnectionStatus:not(.hidden){margin-top:-4px;text-align:center}

/* ---------- Recent performance ---------- */
#practicePage .practice-stats .recent-performance-card{flex:1;display:flex!important;flex-direction:column;gap:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;animation:none!important}
#practicePage .practice-stats .recent-performance-card:hover{box-shadow:none!important}
#practicePage .practice-stats .recent-performance-card>header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0}
#practicePage .practice-stats .recent-performance-card>header>div:first-child{gap:7px}
#practicePage .practice-stats .recent-performance-card>header .section-icon{width:17px;height:17px;color:var(--pv2-accent)}
#practicePage .practice-stats .recent-performance-card>header strong{font-size:14px!important;letter-spacing:-.1px}
#practicePage .practice-stats .performance-heading-actions{gap:6px}
#practicePage .practice-stats .performance-duration-toggle{padding:3px;border:0;border-radius:9px;background:#edf1f3;--motion-pill-bg:#fff;--motion-pill-shadow:0 1px 4px rgba(20,28,40,.12)}
#practicePage .practice-stats .performance-duration-toggle button{height:24px;min-width:44px;padding:0 8px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#6b7782;font-size:11px;font-weight:600}
#practicePage .practice-stats .performance-duration-toggle button.active{background:#fff;color:var(--pv2-ink);box-shadow:0 1px 4px rgba(20,28,40,.12)}
#practicePage .practice-stats .performance-duration-toggle.motion-pill.is-ready button.active{background:transparent;box-shadow:none;color:var(--pv2-ink)!important}
#practicePage .practice-stats .recent-performance-card>header select{height:30px;padding:0 8px;border:0;border-radius:9px;background-color:#edf1f3;color:#4f5a66;font-size:11.5px}

/* Four numbers on one line, hairlines between them. */
#practicePage .practice-stats .performance-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:14px 0 12px}
#practicePage .practice-stats .performance-stat-row>div{display:grid;align-content:start;gap:2px!important;min-width:0;min-height:0!important;padding:0 12px!important;border:0!important;border-left:1px solid #e9eef1!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
#practicePage .practice-stats .performance-stat-row>div:first-child{padding-left:0!important;border-left:0!important}
#practicePage .practice-stats .performance-stat-row span{overflow:hidden;color:var(--pv2-muted);font-size:11px!important;text-overflow:ellipsis;white-space:nowrap}
#practicePage .practice-stats .performance-stat-row strong{color:var(--pv2-ink);font-size:19px!important;line-height:1.2;white-space:nowrap}
#practicePage .practice-stats .performance-stat-row small{overflow:hidden;color:#a0aab2!important;font-size:10.5px!important;text-overflow:ellipsis;white-space:nowrap}
@container (max-width:520px){
  #practicePage .practice-stats .performance-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:12px!important}
  #practicePage .practice-stats .performance-stat-row>div:nth-child(odd){padding-left:0!important;border-left:0!important}
}

/* Trend fills the rest. Grid lines and y labels sit on the chart's own value
   rows (12 / 58 / 104 / 150 of 176), so they line up at any height. */
#practicePage .practice-stats .performance-chart{flex:1;display:flex;flex-direction:column;min-height:96px;padding:12px 14px 10px!important;border:0!important;border-radius:12px!important;background:#fff!important;box-shadow:inset 0 0 0 1px #edf1f4}
#practicePage .practice-stats .performance-chart>header strong{color:var(--pv2-ink);font-size:12.5px}
#practicePage .practice-stats .performance-chart>header small{color:#9aa4ad;font-size:10.5px}
#practicePage .practice-stats .chart-plot{--plot:calc(100% - 20px);flex:1;height:auto;min-height:64px;margin:10px 0 0 30px;border:0;background:linear-gradient(#eef2f4,#eef2f4) 0 calc(var(--plot) * .0682)/100% 1px no-repeat,linear-gradient(#eef2f4,#eef2f4) 0 calc(var(--plot) * .3295)/100% 1px no-repeat,linear-gradient(#eef2f4,#eef2f4) 0 calc(var(--plot) * .5909)/100% 1px no-repeat,linear-gradient(#dde3e7,#dde3e7) 0 calc(var(--plot) * .8523)/100% 1px no-repeat}
#practicePage .practice-stats .chart-plot svg{height:calc(100% - 20px)}
#practicePage .practice-stats .chart-y{left:-30px;width:24px;color:#a3adb5;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
#practicePage .practice-stats .chart-y.y1{top:calc((100% - 20px) * .0682 - 7px)}
#practicePage .practice-stats .chart-y.y2{top:calc((100% - 20px) * .3295 - 7px)}
#practicePage .practice-stats .chart-y.y3{top:calc((100% - 20px) * .5909 - 7px)}
#practicePage .practice-stats .chart-y.y4{top:calc((100% - 20px) * .8523 - 7px)}
#practicePage .practice-stats .chart-dates{top:auto;bottom:1px;color:#a3adb5;font-size:10px}
#practicePage .practice-stats .chart-empty{inset:0 0 20px;color:#a3adb5;font-size:11px}
/* The hero shows the personal best, so the strip under the chart is not drawn. */
#practicePage .practice-stats .performance-personal-best{display:none!important}

@media(prefers-reduced-motion:reduce){
  .mode-row,.mode-row-fav,.dashboard .site-notice{transition:none!important;animation:none!important}
  .mode-row.active .mode-playing i,#practicePage .selected-drill-card.is-switching .selected-drill-copy,#practicePage .practice-setup>#advancedModeControls>div:not(.hidden){animation:none!important}
}

/* 小球微调训练只能用「极小」：其他大小按钮锁住（2026-11-02）。 */
#practicePage .setup-panel .segmented.light button.is-locked{opacity:.32;cursor:not-allowed;pointer-events:none}

/* 2026-11-02 用户要求：训练项目下面不再显示说明文字（如三目标速点的「在限定时间内尽可能多地命中目标…」），两种界面风格都不显示。 */
#practicePage #previewDescription{display:none!important}

/* 2026-11-07 创意工坊模式各占一行：自定义图片铺满封面（两种界面风格都适用）；列表最后一行「想要更多模式？」是去创意工坊的链接。 */
.mode-row-cover.has-image:before{display:none}
html #practicePage .mode-row-cover>img.is-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#practicePage a.mode-row.is-more{color:inherit;text-decoration:none}
#practicePage .mode-row.is-more .mode-row-cover{background:transparent;color:#b4610f;box-shadow:none;border:1.5px dashed #e2b85c}
#practicePage .mode-row.is-more .mode-row-cover:before{display:none}
#practicePage .mode-row.is-more:hover .mode-row-cover{background:linear-gradient(150deg,var(--cover-a),var(--cover-b));color:#fff;border-color:transparent}
.mode-row-go{display:grid;place-items:center;color:#b9c2c9}
.mode-row-go svg{width:16px;height:16px}
.mode-row.is-more:hover .mode-row-go{color:#b4610f}