/* Timer page styles – extracted from app/templates/timer.html for maintainability.
   This file contains all CSS rules for the timer page, including scramble display, layout,
   modals, and responsive breakpoints. */

body.timer-page-body {
   padding-top: 0;
   overflow: hidden;
}

.timer-page {
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
}

.timer-page input,
.timer-page textarea,
.timer-page select,
.timer-page [contenteditable] {
   -webkit-user-select: text;
   user-select: text;
   -webkit-touch-callout: default;
}

body.timer-page-body #mobile-header-spacer {
   display: none !important;
   height: 0 !important;
   flex: 0 0 0 !important;
}

body.timer-page-body #content-wrapper {
   min-height: 100vh;
   min-height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
   margin-top: 0;
   overflow: hidden;
}

body.timer-page-body.layout-header-hidden {
   padding-top: 0;
}

body.timer-page-body.layout-header-hidden #content-wrapper {
   min-height: 100vh;
   min-height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
}

body.timer-page-body main.timer-page-main {
   width: 100%;
   max-width: none;
   height: 100%;
   min-height: 0;
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   margin: 0 !important;
   padding: 0;
   overflow: hidden;
}

.timer-page {
   --timer-viewport-height: 100dvh;
   --timer-mobile-safe-bottom: 0px;
   --timer-header-offset: var(--header-height);
   --timer-sidebar-width: clamp(16.8rem, 21.6vw, 20.4rem);
   --timer-scramble-text-scale: 1;
   --timer-mobile-stats-height: 4.7rem;
   --timer-mobile-times-height: 5.1rem;
   height: 100%;
   min-height: 0;
   min-width: 0;
   box-sizing: border-box;
   padding-top: var(--timer-header-offset);
   flex: 1 1 auto;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   overflow: hidden;
   background: var(--bg-color);
}

.timer-shell {
   background: var(--card-bg);
   border: 0;
   border-radius: 0;
   box-shadow: none;
}

.timer-topbar {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   justify-items: center;
   align-items: center;
   gap: 0.5rem;
   min-height: 3.4rem;
   padding: 0 0.55rem;
   border-bottom: 1px solid var(--border-color);
}

.timer-toolbar-button,
.timer-inline-icon-button {
   position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid var(--border-color);
   background: var(--bg-secondary);
   color: var(--text-color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timer-toolbar-button:hover,
.timer-toolbar-button:focus-visible,
.timer-inline-icon-button:hover,
.timer-inline-icon-button:focus-visible {
   border-color: var(--primary-color);
   background: var(--bg-tertiary);
   color: var(--text-color);
}

.timer-toolbar-button {
   width: 100%;
   width: 2.45rem;
   height: 2.45rem;
   border-radius: 0.75rem;
}

.timer-topbar-right {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   justify-self: end;
}

.timer-options-label {
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.timer-topbar-left {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   justify-self: start;
}

#timerSettingsBtn {
   width: auto;
   gap: 0.4rem;
   padding: 0 0.65rem;
}

.timer-times-load-btn {
   width: 100%;
   padding: 0.45rem;
   border: 0;
   border-radius: 0.5rem;
   background: transparent;
   color: var(--text-muted);
   font-size: 0.72rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   transition: background-color 0.15s ease, color 0.15s ease;
}

.timer-times-load-btn:hover,
.timer-times-load-btn:focus-visible {
   background: var(--bg-secondary);
   color: var(--primary-color);
}

.timer-toolbar-controls {
   min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.45rem;
   width: 100%;
}

.timer-select-wrap {
   min-width: 0;
   flex: 0 1 clamp(11.5rem, 16vw, 14rem);
   width: min(100%, clamp(11.5rem, 16vw, 14rem));
   display: flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.2rem 0.35rem 0.2rem 0.55rem;
   border: 1px solid var(--border-color);
   border-radius: 0.85rem;
   background: var(--bg-secondary);
}

.timer-select-wrap label {
   margin: 0;
   font-size: 0.68rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   white-space: nowrap;
}

.timer-select-wrap select {
   min-width: 0;
   width: 100%;
   border: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
   color: var(--text-color);
   font-size: 0.9rem;
   font-weight: 600;
   padding: 0.15rem 1.65rem 0.15rem 0.05rem !important;
}

.timer-session-wrap {
   padding-left: 0.35rem;
   padding-right: 0.15rem;
}

.timer-session-wrap label {
   display: none;
}

.timer-session-buttons {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
}

.timer-inline-icon-button {
   width: 1.9rem;
   height: 1.9rem;
   border-radius: 0.6rem;
}

/* Session menu expand (mobile): hidden by default on desktop */
.timer-session-menu-btn {
   display: none;
   width: 1.9rem;
   height: 1.9rem;
   border-radius: 0.6rem;
}
.timer-session-menu-btn .fa-ellipsis-vertical {
   transition: transform 0.25s ease;
}
.timer-session-menu-btn.is-expanded .fa-ellipsis-vertical {
   transform: rotate(90deg);
}
.timer-session-menu-expand {
   display: none;
   align-items: center;
   gap: 0.25rem;
}

.timer-scramble-bar {
   position: relative;
   min-height: 4.75rem;
   display: grid;
   gap: 0.3rem;
   padding: 0.5rem 0.75rem 0.6rem;
   border-bottom: 1px solid var(--border-color);
}

.timer-topbar,
.timer-scramble-bar,
.timer-sidebar,
.timer-balancer,
.timer-mobile-panel,
.timer-focused-stats,
.timer-visual-card,
.timer-fm-tool-card,
.timer-trend-card {
   transition: opacity 0.3s ease;
}

.timer-scramble-label-row {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
}


.timer-scramble-nav-button {
   min-height: 2rem;
   padding: 0.22rem 0.72rem;
   border-radius: 999px;
   border: 1px solid var(--border-color);
   background: var(--bg-secondary);
   color: var(--text-color);
   font-size: 0.78rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timer-scramble-nav-button:hover,
.timer-scramble-nav-button:focus-visible {
   border-color: var(--primary-color);
   background: var(--bg-tertiary);
   color: var(--text-color);
}

.timer-scramble-nav-button:disabled {
   opacity: 0.45;
   cursor: default;
}

.timer-scramble-nav-button:disabled:hover,
.timer-scramble-nav-button:disabled:focus-visible {
   border-color: var(--border-color);
   background: var(--bg-secondary);
   color: var(--text-color);
}

.timer-scramble-options-btn {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

.timer-scramble-title-wrap {
   display: flex;
   align-items: center;
}

.timer-scramble-meta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 0;
   gap: 0.4rem;
}

.timer-scramble-meta.is-feedback .timer-scramble-status {
   display: inline-flex;
}

.timer-scramble-label,
.timer-scramble-status {
   font-size: 0.72rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   margin: 0;
}

.timer-scramble-status {
   display: none;
}

.timer-scramble-text-button {
   width: 100%;
   border: 0;
   background: transparent;
   padding: 0;
   margin: 0;
   text-align: center;
   color: inherit;
   cursor: default;
}

.timer-scramble-text-button.is-copyable,
.timer-scramble-text-button.is-openable {
   cursor: pointer;
}

.timer-scramble-text-button.is-copyable {
   cursor: copy;
}

.timer-scramble-text-button.is-copied .timer-scramble-text {
   color: var(--success-color, #22c55e);
}

.timer-scramble-text {
   margin: 0;
   font-family: 'Roboto Mono', monospace;
   font-size: calc(clamp(0.88rem, 1.15vw, 1.08rem) * var(--timer-scramble-text-scale));
   line-height: 1.35;
   color: var(--text-color);
   text-align: center;
   white-space: pre-wrap;
   word-break: break-word;
}

.timer-scramble-text-button.is-copyable:hover .timer-scramble-text,
.timer-scramble-text-button.is-copyable:focus-visible .timer-scramble-text,
.timer-scramble-text-button.is-openable:hover .timer-scramble-text,
.timer-scramble-text-button.is-openable:focus-visible .timer-scramble-text {
   color: var(--primary-color);
}

.timer-layout {
   min-height: 0;
   min-width: 0;
   position: relative;
   display: grid;
   grid-template-columns: var(--timer-sidebar-width) minmax(0, 1fr) var(--timer-sidebar-width);
   overflow: hidden;
}

.timer-sidebar {
   grid-column: 1;
   width: 100%;
   grid-row: 1;
   min-height: 0;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   border-right: 1px solid var(--border-color);
   justify-self: stretch;
}

.timer-balancer {
   grid-column: 3;
   grid-row: 1;
}

.timer-panel {
   min-height: 0;
   display: flex;
   flex-direction: column;
}

.timer-panel+.timer-panel {
   border-top: 1px solid var(--border-color);
}

.timer-panel-header {
   min-height: 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.45rem;
   padding: 0.25rem 0.55rem;
}

.timer-panel-title,
.timer-panel-subtitle {
   margin: 0;
   font-size: 0.68rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}
#timerStatsDesktopSummary {
   display: none;
}

.timer-stats-table-wrap {
   padding: 0 0.35rem 0.3rem;
   overflow: hidden;
}

.timer-stats-table,
.timer-stats-mobile-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 0.82rem;
   table-layout: fixed;
}

.timer-stats-table thead th,
.timer-stats-mobile-table thead th,
.timer-stats-mobile-table tbody th {
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   font-weight: 700;
}

.timer-stats-table th,
.timer-stats-table td,
.timer-stats-mobile-table th,
.timer-stats-mobile-table td {
   padding: 0.18rem 0.25rem;
   border: 0;
   text-align: left;
   vertical-align: middle;
   background: transparent;
}

.timer-stat-button {
   width: 100%;
   border: 0;
   background: transparent;
   color: var(--text-color);
   padding: 0.12rem 0.18rem;
   border-radius: 0.45rem;
   font: inherit;
   text-align: left;
   transition: background-color 0.15s ease, color 0.15s ease;
}

.timer-stat-button:hover,
.timer-stat-button:focus-visible {
   background: var(--bg-secondary);
   color: var(--primary-color);
}

.timer-stat-button.is-empty {
   color: var(--text-muted);
   cursor: default;
}

.timer-stat-button.is-empty:hover,
.timer-stat-button.is-empty:focus-visible {
   background: transparent;
   color: var(--text-muted);
}

.timer-times-list {
   min-height: 0;
   overflow-y: auto;
   padding: 0 0.3rem 0.35rem;
   scrollbar-width: none;          /* Firefox */
   -ms-overflow-style: none;       /* IE / old Edge */
}
.timer-times-list::-webkit-scrollbar {
   display: none;                  /* Chrome / Safari */
}

.timer-times-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 0.18rem;
   table-layout: fixed;
}

.timer-times-table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
   padding: 0.08rem 0.3rem 0.22rem;
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   font-weight: 700;
   background: var(--card-bg);
   text-align: center;
}

.timer-times-table thead th:first-child {
   width: 3rem;
   text-align: center;
}

.timer-times-table tbody td {
   padding: 0;
   border: 0;
}

/* Virtual-scroll spacer rows — zero visual footprint, height set inline */
.timer-times-spacer {
   height: 0;
   line-height: 0;
}
.timer-times-spacer td {
   padding: 0 !important;
   border: 0 !important;
   line-height: 0;
   font-size: 0;
}

/* Empty state */
.timer-times-empty {
   padding: 1rem 0.55rem;
   text-align: center;
   font-size: 0.82rem;
   color: var(--text-muted);
}

.timer-times-row-cell {
   position: relative;
   padding: 0 0.12rem;
}

.timer-times-cell-text,
.timer-mobile-solve-time,
.timer-mobile-solve-index,
.timer-mobile-solve-stat {
   font-family: 'Roboto Mono', monospace;
}

.timer-times-cell-button {
   width: 100%;
   min-height: 2rem;
   border: 0;
   border-radius: 0.6rem;
   background: transparent;
   color: var(--text-color);
   text-align: center;
   padding: 0.2rem 0.28rem;
   font-family: 'Roboto Mono', monospace;
   transition: background-color 0.15s ease, color 0.15s ease;
}

.timer-times-cell-button:hover,
.timer-times-cell-button:focus-visible {
   background: var(--bg-secondary);
   color: var(--primary-color);
}

.timer-times-cell-button.is-empty {
   color: var(--text-muted);
   cursor: default;
}

.timer-times-cell-button.is-empty:hover,
.timer-times-cell-button.is-empty:focus-visible {
   background: transparent;
   color: var(--text-muted);
}

.timer-times-cell-text {
   display: block;
   min-width: 0;
   font-size: 0.84rem;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
}

/* Dense mode for large sessions: solve number half size, times normal */
.is-dense-solve-list tbody td:first-child .timer-times-cell-button {
   font-size: 0.42rem;
}

.timer-center {
   grid-column: 2;
   grid-row: 1;
   position: relative;
   min-height: 0;
   min-width: 0;
   overflow: hidden;
   cursor: default;
}

.timer-center button,
.timer-center [role="button"] {
   cursor: default !important;
}

.timer-focused-stats button,
.timer-focused-stats [role="button"] {
   cursor: pointer !important;
}

.timer-cancel-button.is-visible {
   cursor: pointer !important;
}

.timer-surface {
   position: absolute;
   inset: 0;
   border: 0;
   outline: none;
   -webkit-tap-highlight-color: transparent;
   background: transparent;
   color: inherit;
   display: block;
   padding: 0;
   cursor: default;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   touch-action: none;
}

.timer-cancel-button {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
   bottom: auto;
   left: auto;
   transform: none;
   min-width: unset;
   width: 2.3rem;
   height: 2.3rem;
   border-radius: 50%;
   border: 1px solid var(--border-color);
   background: var(--bg-secondary);
   color: var(--text-muted);
   z-index: 3;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
   opacity: 0;
   visibility: hidden;
   transition: none;
}

.timer-cancel-button:hover,
.timer-cancel-button:focus-visible {
   border-color: var(--primary-color);
   background: var(--bg-tertiary);
   color: var(--text-color);
}

.timer-cancel-button.is-visible {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.15s ease;
}

.timer-overlay {
   position: relative;
   z-index: 2;
   height: 100%;
   min-width: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
   pointer-events: none;
}

.timer-display-stack {
   position: relative;
   width: 100%;
   display: grid;
   grid-template-rows: auto;
   justify-items: center;
   justify-content: center;
   row-gap: 0.5rem;
}

.timer-display-wrap,
.timer-keyboard-entry {
   grid-row: 1;
   grid-column: 1;
}

.timer-core-stack {
   min-height: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 0.55rem;
   padding-top: 2rem;
   padding-left: 0.55rem;
   padding-right: 0.55rem;
   padding-bottom: calc(2rem + var(--timer-header-offset, 0px) + var(--timer-topbar-height, 3.4rem) + var(--timer-scramble-height, 4.75rem));
}

.timer-display-wrap {
   min-height: 0;
   display: grid;
   place-items: center;
}

.timer-display {
   font-family: 'Roboto Mono', monospace;
   font-size: clamp(4rem, 10.2vw, 8.2rem);
   font-weight: 600;
   line-height: 0.9;
   letter-spacing: -0.05em;
   text-align: center;
}

.timer-display.is-split-display {
   font-size: clamp(2.3rem, 5.6vw, 4.2rem);
   line-height: 1.02;
   letter-spacing: -0.03em;
   white-space: pre-line;
}

.timer-display.is-split-display-many {
   font-size: clamp(1.55rem, 3.9vw, 2.85rem);
}

.timer-focused-stats {
   width: 100%;
   min-height: 3.35rem;
   display: flex;
   justify-content: center;
   gap: 0.32rem;
   flex-wrap: wrap;
   pointer-events: auto;
}

.timer-focus-card {
   min-width: min(10rem, 42vw);
   border: 1px solid var(--border-color);
   border-radius: 0.75rem;
   background: var(--bg-secondary);
   color: var(--text-color);
   padding: 0.32rem 0.55rem;
   display: grid;
   gap: 0.55rem;
   font-family: 'Roboto Mono', monospace;
   text-align: left;
   opacity: 1;
   transition: border-color 0.15s ease;
   position: relative;
}

.timer-focus-main {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.55rem;
}

.timer-focus-card:hover,
.timer-focus-card:focus-visible {
   border-color: var(--primary-color);
}

.timer-focus-card.is-pb-current {
   border-width: 2px;
   border-color: transparent;
   background:
      linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
      linear-gradient(135deg, #ff4d4d, #ffb347, #fff176, #4ade80, #60a5fa, #c084fc) border-box;
}

.timer-focus-card.is-pb-current:hover,
.timer-focus-card.is-pb-current:focus-visible {
   border-color: transparent;
   background:
      linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box,
      linear-gradient(135deg, #ff4d4d, #ffb347, #fff176, #4ade80, #60a5fa, #c084fc) border-box;
}

.timer-focus-card.is-empty:hover,
.timer-focus-card.is-empty:focus-visible {
   border-color: var(--border-color);
}

.timer-focus-label {
   display: block;
   margin-bottom: 0;
   font-size: 0.68rem;
   font-family: 'Roboto Mono', monospace;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   flex: 0 1 auto;
}

.timer-focus-value {
   display: block;
   font-family: 'Roboto Mono', monospace;
   font-size: clamp(0.92rem, 1.4vw, 1rem);
   font-weight: 600;
   line-height: 1.1;
   text-align: right;
   flex: 0 0 auto;
}

.timer-inline-split-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
   gap: 0.18rem 0.35rem;
   width: 100%;
}

.timer-inline-split-stat {
   display: grid;
   gap: 0.05rem;
   min-width: 0;
}

.timer-inline-split-key {
   font-size: 0.54rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-inline-split-value {
   font-size: 0.72rem;
   font-weight: 600;
   color: var(--text-color);
}

.timer-split-popover {
   position: absolute;
   top: 50%;
   left: calc(100% + 0.35rem);
   right: auto;
   transform: translateY(-50%);
   max-width: min(28rem, calc(100vw - 2rem));
   display: flex;
   align-items: center;
   gap: 0.32rem;
   padding: 0.42rem 0.55rem;
   border: 1px solid var(--border-color);
   border-radius: 0.7rem;
   background: color-mix(in srgb, var(--card-bg) 92%, var(--bg-secondary) 8%);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   z-index: 8;
   transition: opacity 0.14s ease;
}

.timer-split-popover.is-floating-split-popover {
   top: 0;
   left: 0;
   transform: translateY(-50%);
   z-index: 12;
}

.timer-split-popover.is-visible {
   opacity: 1;
   visibility: visible;
}

.timer-split-popover-value {
   font-size: 0.74rem;
   font-weight: 600;
   font-family: 'Roboto Mono', monospace;
   color: var(--text-color);
}

.timer-split-popover-separator {
   font-size: 0.72rem;
   color: var(--text-muted);
}

.has-split-popover:hover .timer-split-popover,
.has-split-popover:focus-within .timer-split-popover,
.timer-focus-card:hover .timer-split-popover,
.timer-focus-card:focus-visible .timer-split-popover,
.timer-focus-card:focus-within .timer-split-popover {
   opacity: 1;
   visibility: visible;
}

.timer-visual-card,
.timer-fm-tool-card,
.timer-trend-card,
.timer-alert-card {
   position: absolute;
   bottom: 0.9rem;
   width: auto;
   display: grid;
   justify-items: center;
   gap: 0.25rem;
   pointer-events: auto;
   touch-action: none;
   cursor: grab;
   z-index: 2;
   transition: left 0.22s ease, top 0.22s ease, opacity 0.15s ease;
   will-change: left, top;
}

.timer-visual-card {
   right: 0.9rem;
}

.timer-fm-tool-card--timer {
   right: 0.9rem;
   top: 0.9rem;
}

.timer-fm-tool-card--inverse {
   right: 0.9rem;
   top: 12rem;
}

.timer-trend-card {
   left: 0.9rem;
}

.timer-alert-card {
   right: 0.9rem;
}

.timer-visual-card.is-dragging,
.timer-fm-tool-card.is-dragging,
.timer-trend-card.is-dragging,
.timer-alert-card.is-dragging {
   cursor: grabbing;
   transition: none;
}

.timer-visual-card.is-locked,
.timer-fm-tool-card.is-locked,
.timer-trend-card.is-locked,
.timer-alert-card.is-locked {
   cursor: default;
}

.timer-visual-card[hidden],
.timer-fm-tool-card[hidden],
.timer-trend-card[hidden],
.timer-alert-card[hidden] {
   display: none !important;
}

.timer-fm-tool-frame {
   position: relative;
   display: grid;
   gap: 0.7rem;
   padding: 0.75rem;
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: color-mix(in srgb, var(--bg-secondary) 92%, var(--card-bg) 8%);
   box-shadow: 0 0.45rem 1.35rem rgba(0, 0, 0, 0.12);
}

.timer-fm-tool-frame--timer {
   width: clamp(11.5rem, 16vw, 14rem);
}

.timer-visual-frame {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: clamp(10.8rem, 17.1vw, 14.2rem);
   height: clamp(8.46rem, 13.5vw, 11.34rem);
   padding: 0.45rem;
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: var(--bg-secondary);
   overflow: hidden;
}

/* Ensure visual card labels and overlays use the same UI font (not the
   monospace scramble font) so the Normal and Inverse cards match. */
.timer-visual-label,
.timer-visual-frame .timer-scramble-label,
.timer-visual-frame .timer-visual-overlay {
   font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* Force the same UI font for the visual card labels by ID as a
   higher-specificity override to prevent other selectors (including
   heading or monospace rules) from changing the family. */
#timerVisualCardLabel,
#timerFewestMovesInverseLabel,
.timer-visual-label,
.timer-visual-frame .timer-scramble-label {
   font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
}

/* Ensure visual labels are not transformed or spaced differently than each other. */
#timerVisualCardLabel,
#timerFewestMovesInverseLabel,
.timer-visual-label,
.timer-visual-frame .timer-scramble-label {
   text-transform: none !important;
   letter-spacing: normal !important;
   font-weight: 600 !important;
}

.timer-visual-frame.is-hidden {
   cursor: pointer;
}

.timer-visual-canvas {
   display: block;
   margin: 0 auto;
   /* Constrain canvas display size to the frame while preserving aspect ratio.
      Use max-width/max-height and let the browser scale the drawing surface
      (canvas internal resolution is managed in JS). This avoids the canvas
      overflowing or being clipped when the frame is non-square. */
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: filter 0.15s ease;
}

.timer-visual-frame.is-hidden .timer-visual-canvas {
   filter: blur(9px) brightness(0.18);
}

.timer-visual-overlay {
   position: absolute;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
   color: #ffffff;
   font-size: 0.78rem;
   font-weight: 600;
   text-align: center;
   background: rgba(0, 0, 0, 0.35);
}

.timer-visual-frame.is-hidden .timer-visual-overlay {
   display: flex;
}

.timer-trend-frame {
   position: relative;
   width: clamp(18rem, 30vw, 27rem);
   height: clamp(10rem, 17vw, 14.5rem);
   display: grid;
   grid-template-rows: minmax(0, 1fr);
   padding: 0.7rem 0.8rem;
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
   overflow: hidden;
}

.timer-trend-header {
   display: none;
}

.timer-trend-title,
.timer-trend-summary {
   display: block;
}

.timer-trend-title {
   font-size: 0.7rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-trend-summary {
   margin-top: 0.08rem;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.82rem;
   color: var(--text-color);
}

.timer-trend-body {
   min-height: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   height: 100%;
   overflow: hidden;
}

.timer-trend-body .timer-stat-trend-svg {
   flex: 1 1 auto;
   min-height: 0;
   height: 100%;
   margin-top: 0;
}

.timer-trend-body .timer-stat-trend-legend {
   margin-top: 0.18rem;
   font-size: 0.72rem;
}

.timer-trend-empty {
   margin: 0;
   align-self: center;
   justify-self: center;
   text-align: center;
   font-size: 0.82rem;
   color: var(--text-muted);
}

.timer-alert-frame {
   position: relative;
   width: clamp(9.6rem, 14vw, 12.2rem);
   min-height: clamp(7.6rem, 10.8vw, 9.2rem);
   display: grid;
   justify-items: center;
   align-content: start;
   gap: 0.36rem;
   padding: 0.72rem 0.8rem 0.8rem;
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: color-mix(in srgb, var(--bg-secondary) 90%, var(--card-bg) 10%);
   overflow: hidden;
   box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
}

.timer-alert-frame::before {
   content: '!';
   position: absolute;
   left: 50%;
   top: 54%;
   transform: translate(-50%, -50%);
   font-size: clamp(5.6rem, 11vw, 7.2rem);
   line-height: 1;
   font-weight: 800;
   color: color-mix(in srgb, #0d6efd 75%, var(--bg-secondary) 25%);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.15s ease, text-shadow 0.15s ease;
}

.timer-alert-frame.is-alert {
   border-color: color-mix(in srgb, #0d6efd 62%, var(--border-color) 38%);
   background: color-mix(in srgb, #0d6efd 12%, var(--bg-secondary) 88%);
   box-shadow: 0 0 0.45rem color-mix(in srgb, #0d6efd 24%, transparent),
      0 0 1.25rem color-mix(in srgb, #0d6efd 16%, transparent);
}

.timer-alert-frame.is-alert::before {
   opacity: 0.18;
   text-shadow: 0 0 1rem color-mix(in srgb, #0d6efd 28%, transparent);
}

.timer-alert-status {
   position: relative;
   z-index: 1;
   font-size: 0.7rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
   text-align: center;
}

.timer-alert-summary {
   position: relative;
   z-index: 1;
   min-height: 1rem;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.82rem;
   line-height: 1.28;
   color: var(--text-color);
   text-align: center;
}

.timer-alert-lines {
   position: relative;
   z-index: 1;
   min-height: 0;
   display: grid;
   gap: 0.4rem;
   align-content: start;
   justify-items: center;
}

.timer-alert-line {
   font-size: 0.78rem;
   line-height: 1.32;
   color: var(--text-color);
}

.timer-alert-line.is-muted {
   color: var(--text-muted);
}

.timer-alert-dot-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.34rem;
}

.timer-alert-dot {
   width: 0.92rem;
   height: 0.92rem;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.5);
   box-shadow: 0 0 0.32rem rgba(13, 110, 253, 0.18);
}

/* Tool-box controls (shared across all floating boxes) */
.tool-box-controls {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 20;
   opacity: 0;
   transition: opacity 0.15s ease;
}

.timer-visual-card:not(.is-dragging):hover .tool-box-controls,
.timer-visual-card.is-controls-visible .tool-box-controls,
.timer-trend-card:not(.is-dragging):hover .tool-box-controls,
.timer-trend-card.is-controls-visible .tool-box-controls,
.timer-alert-card:not(.is-dragging):hover .tool-box-controls,
.timer-alert-card.is-controls-visible .tool-box-controls,
.timer-fm-tool-card:not(.is-dragging):hover .tool-box-controls,
.timer-fm-tool-card.is-controls-visible .tool-box-controls {
   opacity: 1;
}



.tool-box-control {
   position: absolute;
   width: 1.55rem;
   height: 1.55rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 0.35rem;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
   color: var(--text-muted);
   pointer-events: auto;
   cursor: default;
   padding: 0;
   font-size: 0.65rem;
   line-height: 1;
   transition: color 0.12s ease, background 0.12s ease;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   touch-action: none;
}

.tool-box-scale-handle {
   top: 0.4rem;
   left: 0.4rem;
   cursor: nwse-resize;
}

.tool-box-lock-btn {
   top: 0.4rem;
   right: 0.4rem;
   cursor: pointer;
}

.tool-box-settings-btn {
   bottom: 0.4rem;
   right: 0.4rem;
   cursor: pointer;
}

.tool-box-control:hover {
   color: var(--text-primary, #212529);
}

.timer-visual-card.is-locked .tool-box-lock-btn,
.timer-fm-tool-card.is-locked .tool-box-lock-btn,
.timer-trend-card.is-locked .tool-box-lock-btn,
.timer-alert-card.is-locked .tool-box-lock-btn {
   color: var(--primary-color, #0d6efd);
}

.timer-mobile-panel {
   display: none;
   width: 100%;
   min-height: 0;
   min-width: 0;
   max-width: 100%;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: var(--timer-mobile-stats-height) calc(var(--timer-mobile-times-height) + max(env(safe-area-inset-bottom, 0px), var(--timer-mobile-safe-bottom)));
   border-top: 1px solid var(--border-color);
   pointer-events: auto;
   justify-self: stretch;
}

.timer-mobile-stats,
.timer-mobile-times-wrap {
   width: 100%;
   min-height: 0;
   min-width: 0;
   overflow: hidden;
}

.timer-mobile-times-wrap {
   grid-row: 2;
}

.timer-stats-mobile-wrap {
   height: 100%;
   min-height: 0;
   padding: 0.12rem 0.25rem 0.2rem;
   overflow-x: auto;
   overflow-y: hidden;
}

.timer-mobile-times {
   width: 100%;
   min-height: 0;
   min-width: 0;
   max-width: 100%;
   height: 100%;
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 7.2rem;
   gap: 0.35rem;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 0.18rem 0.3rem calc(0.35rem + max(env(safe-area-inset-bottom, 0px), var(--timer-mobile-safe-bottom)));
   scroll-snap-type: x proximity;
   justify-content: start;
}

.timer-mobile-solve {
   position: relative;
   min-height: 3.65rem;
   border: 1px solid color-mix(in srgb, var(--border-color) 78%, var(--primary-color) 22%);
   border-radius: 0.65rem;
   background: color-mix(in srgb, var(--bg-secondary) 82%, var(--card-bg) 18%);
   color: var(--text-color);
   padding: 0.3rem 0.42rem 0.24rem;
   text-align: left;
   transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.22s ease;
   scroll-snap-align: start;
   overflow: hidden;
}

.timer-mobile-solve:hover,
.timer-mobile-solve:focus-visible {
   background: color-mix(in srgb, var(--bg-tertiary) 74%, var(--card-bg) 26%);
   border-color: var(--primary-color);
   color: var(--primary-color);
}

.timer-mobile-solve.is-entering {
   animation: timer-mobile-enter 0.28s ease;
}

.timer-mobile-solve.is-empty {
   color: var(--text-muted);
   cursor: default;
}

.timer-mobile-solve.is-empty:hover,
.timer-mobile-solve.is-empty:focus-visible {
   background: transparent;
   color: var(--text-muted);
}

.timer-mobile-solve.is-placeholder {
   opacity: 0.52;
}

.timer-mobile-solve.is-placeholder .timer-mobile-solve-stats {
   visibility: hidden;
}

.timer-mobile-solve-time {
   display: block;
   padding-top: 0.7rem;
   font-size: 0.82rem;
   font-weight: 600;
   line-height: 1.15;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.timer-mobile-solve-index {
   position: absolute;
   top: 0.2rem;
   left: 0.38rem;
   font-size: 0.62rem;
   color: var(--text-muted);
}

.timer-mobile-solve-stats {
   display: grid;
   gap: 0.08rem;
   margin-top: 0.16rem;
}

.timer-mobile-solve-stat {
   display: block;
   font-size: 0.64rem;
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.timer-modal-actions {
   display: grid;
   gap: 0.45rem;
}

.timer-modal-actions--solve {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timer-penalty-split {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0;
   width: 100%;
   min-height: calc(1.5em + 0.75rem + 2px);
   border: 1px solid var(--primary-color);
   border-radius: 0.375rem;
   overflow: hidden;
   background: transparent;
   transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.timer-penalty-split.is-active {
   background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.timer-penalty-segment {
   width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 100%;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: var(--primary-color);
   box-shadow: none;
   font-weight: 400;
   line-height: 1.5;
   padding: 0.375rem 0.75rem;
}

.timer-penalty-segment+.timer-penalty-segment {
   border-left: 1px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
}

.timer-penalty-segment:hover,
.timer-penalty-segment:focus-visible,
.timer-penalty-segment:active {
   background: var(--primary-color);
   color: #ffffff;
   box-shadow: none;
}

.timer-modal-actions--pair {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timer-solve-meta-grid {
   display: grid;
   grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) minmax(5rem, auto);
   align-items: center;
   gap: 0.75rem 1rem;
}

.timer-solve-meta-cell--scramble {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 4rem;
}

.timer-solve-modal-canvas {
   display: block;
   max-width: 100%;
   max-height: 7rem;
   width: auto;
   height: auto;
   border-radius: 0.5rem;
}

.timer-solve-splits {
   display: grid;
   gap: 0.3rem;
   padding: 0.55rem 0.7rem;
   border-radius: 0.8rem;
   border: 1px solid var(--border-color);
   background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
}

.timer-solve-meta-cell--inspection {
   text-align: right;
}

.timer-modal-focused-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.45rem;
}

.timer-modal-focused-stat {
   width: 100%;
   border: 1px solid var(--border-color);
   border-radius: 0.75rem;
   background: var(--bg-secondary);
   color: var(--text-color);
   padding: 0.42rem 0.56rem;
   text-align: left;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timer-modal-focused-stat:hover,
.timer-modal-focused-stat:focus-visible {
   background: var(--bg-tertiary);
   border-color: var(--primary-color);
   color: var(--primary-color);
}

.timer-modal-focused-stat.is-empty,
.timer-modal-focused-stat.is-empty:hover,
.timer-modal-focused-stat.is-empty:focus-visible {
   border-color: var(--border-color);
   background: var(--bg-secondary);
   color: var(--text-muted);
   cursor: default;
}

.timer-modal-focused-label {
   display: block;
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-modal-focused-value {
   display: block;
   margin-top: 0.08rem;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.98rem;
   font-weight: 600;
   line-height: 1.1;
}

.timer-modal-actions--single {
   grid-template-columns: minmax(0, 1fr);
}

.timer-stats-footer {
   padding: 0 0.35rem 0.35rem;
}

.timer-stat-button--mean {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.45rem;
   min-width: 0;
}

.timer-stat-button--mean .timer-mean-title,
.timer-stat-button--mean .timer-mean-value {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.timer-stat-button--mean .timer-mean-title {
   font-size: 0.47rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-stat-button--mean .timer-mean-value {
   font-family: 'Roboto Mono', monospace;
   font-weight: 600;
   flex: 1 1 auto;
   text-align: center;
   font-size: 0.75em;
}

.timer-mobile-solve.is-top-mark {
   border-color: #22c55e;
}

.timer-mobile-solve.is-bottom-mark {
   border-color: #ef4444;
}

.timer-mobile-solve.is-best-ever {
   border-width: 2px;
   border-color: transparent;
   background:
      linear-gradient(color-mix(in srgb, var(--bg-secondary) 82%, var(--card-bg) 18%),
         color-mix(in srgb, var(--bg-secondary) 82%, var(--card-bg) 18%)) padding-box,
      linear-gradient(135deg, #ff4d4d, #ffb347, #fff176, #4ade80, #60a5fa, #c084fc) border-box !important;
}

.timer-mobile-solve.is-best-ever:hover,
.timer-mobile-solve.is-best-ever:focus-visible {
   border-color: transparent !important;
   background:
      linear-gradient(color-mix(in srgb, var(--bg-tertiary) 74%, var(--card-bg) 26%),
         color-mix(in srgb, var(--bg-tertiary) 74%, var(--card-bg) 26%)) padding-box,
      linear-gradient(135deg, #ff4d4d, #ffb347, #fff176, #4ade80, #60a5fa, #c084fc) border-box !important;
}

.timer-times-cell-button.is-top-mark,
.timer-times-cell-text.is-top-mark {
   color: #22c55e;
}

.timer-times-cell-button.is-top-mark:hover,
.timer-times-cell-button.is-top-mark:focus-visible {
   color: var(--primary-color);
}

.timer-times-cell-button.is-bottom-mark,
.timer-times-cell-text.is-bottom-mark {
   color: #ef4444;
}

.timer-times-cell-button.is-bottom-mark:hover,
.timer-times-cell-button.is-bottom-mark:focus-visible {
   color: var(--primary-color);
}

.timer-times-cell-button.is-best-ever {
   border: 2px solid transparent;
   background:
      linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
      linear-gradient(135deg, #ff4d4d, #ffb347, #fff176, #4ade80, #60a5fa, #c084fc) border-box;
}

.timer-stats-mobile-corner {
   width: 6.4rem;
}

.timer-stats-mobile-corner .timer-stat-button--mean {
   padding-inline: 0.08rem;
   gap: 0.18rem;
   flex-direction: column;
   align-items: flex-start;
}

.timer-stats-mobile-corner .timer-mean-title {
   font-size: 0.56rem;
}

.timer-stats-mobile-corner .timer-mean-value {
   width: 100%;
   font-size: 0.7rem;
}

.timer-modal-actions .btn {
   width: 100%;
   justify-content: center;
}

.timer-modal-text {
   margin: 0;
   min-height: 8rem;
   padding: 0.75rem 0.85rem;
   border-radius: 0.9rem;
   border: 1px solid var(--border-color);
   background: var(--bg-secondary);
   font-family: 'Roboto Mono', monospace;
   white-space: pre-wrap;
   word-break: break-word;
}

.timer-stat-summary {
   display: grid;
   gap: 0.85rem;
}

.timer-stat-summary[hidden] {
   display: none !important;
}

.timer-stat-summary-grid,
.timer-stat-breakdown-grid {
   display: grid;
   gap: 0.65rem;
}

.timer-stat-summary-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timer-stat-breakdown-grid {
   grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.timer-stat-summary-card,
.timer-stat-breakdown-card,
.timer-stat-split-card,
.timer-stat-trend-card {
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
   padding: 0.7rem 0.8rem;
}

.timer-stat-trend-card {
   width: 100%;
   max-width: none;
}

.timer-stat-split-card {
   overflow-x: auto;
}

.timer-stat-split-title {
   margin: 0 0 0.45rem;
   font-size: 0.66rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-stat-split-table {
   width: 100%;
   min-width: max-content;
   border-collapse: collapse;
   font-family: 'Roboto Mono', monospace;
}

.timer-stat-split-table th,
.timer-stat-split-table td {
   padding: 0.28rem 0.6rem;
   border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent 18%);
   text-align: right;
   white-space: nowrap;
}

.timer-stat-split-table thead th {
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-stat-split-table th:first-child,
.timer-stat-split-table td:first-child {
   text-align: left;
}

.timer-stat-split-table tbody th,
.timer-stat-split-table tbody td {
   font-size: 0.8rem;
   color: var(--text-color);
}

.timer-stat-split-table tbody tr.is-aggregate th,
.timer-stat-split-table tbody tr.is-aggregate td {
   font-weight: 700;
   color: var(--primary-color);
}

.timer-stat-split-table tbody tr.is-variance th,
.timer-stat-split-table tbody tr.is-variance td {
   color: var(--text-muted);
}

.timer-stat-split-table tbody tr:last-child th,
.timer-stat-split-table tbody tr:last-child td {
   border-bottom: 0;
}

.timer-stat-summary-label,
.timer-stat-breakdown-title {
   display: block;
   margin: 0;
   font-size: 0.66rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-stat-summary-value,
.timer-stat-breakdown-value {
   display: block;
   margin-top: 0.12rem;
   font-family: 'Roboto Mono', monospace;
   font-weight: 600;
   color: var(--text-color);
}

.timer-stat-summary-value {
   font-size: 1rem;
}

.timer-stat-breakdown-rows {
   display: grid;
   gap: 0.22rem;
   margin-top: 0.45rem;
}

.timer-stat-breakdown-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.6rem;
}

.timer-stat-breakdown-key {
   font-size: 0.74rem;
   color: var(--text-muted);
}

.timer-stat-trend-svg {
   display: block;
   width: 100%;
   height: auto;
   margin-top: 0;
}

.timer-stat-trend-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 0.55rem 0.9rem;
   margin-top: 0.35rem;
   font-size: 0.78rem;
   color: var(--text-muted);
}

.timer-stat-trend-legend-item {
   display: inline-flex;
   align-items: center;
   gap: 0.42rem;
}

.timer-stat-trend-dot {
   width: 0.55rem;
   height: 0.55rem;
   border-radius: 999px;
   flex: 0 0 auto;
}

.timer-stat-trend-empty {
   margin-top: 0.55rem;
   font-size: 0.78rem;
   color: var(--text-muted);
}

.timer-settings-grid {
   display: grid;
   gap: 1rem;
}

/* Two-column layout for settings modal */
.timer-settings-split {
   grid-template-columns: 1fr 1fr;
}

.timer-settings-section-header {
   grid-column: 1 / -1;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.10em;
   text-transform: uppercase;
   color: var(--text-muted);
   padding: 0 0 0;
   border-bottom: 1px solid var(--border-color);
   line-height: 1.8;
}

.timer-settings-span2 {
   grid-column: 1 / -1;
}

/* Keep selects at the same height across split columns */
.timer-settings-split .timer-settings-row {
   grid-template-rows: auto 1fr;
}
.timer-settings-split .timer-settings-row select,
.timer-settings-split .timer-settings-row .form-select {
   align-self: end;
}

.timer-settings-row {
   display: grid;
   gap: 0.4rem;
}

.timer-settings-inline-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.55rem;
}

.timer-settings-row label,
.timer-settings-block-title {
   margin: 0;
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-settings-inline-actions {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.55rem;
   align-items: center;
}

.timer-trend-import-list {
   display: grid;
   gap: 0.55rem;
}

.timer-checkbox-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.55rem 1rem;
}

.timer-alert-rule-list,
.timer-alert-detail-list {
   display: grid;
   gap: 0.75rem;
}

.timer-alert-detail-card {
   display: grid;
   gap: 0.75rem;
   padding: 0.9rem;
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
}

.timer-alert-display-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.38rem 0.75rem;
   align-items: center;
}

.timer-alert-display-grid label {
   margin: 0;
   font-size: 0.68rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-alert-preview-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.75rem;
}

.timer-alert-preview-card {
   display: grid;
   gap: 0.45rem;
}

.timer-alert-preview-title {
   margin: 0;
   font-size: 0.68rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-alert-preview-frame {
   width: 100%;
   min-height: 8.4rem;
   box-shadow: none;
}

.timer-alert-rule {
   display: grid;
   gap: 0.45rem;
   padding: 0.7rem;
   border: 1px solid var(--border-color);
   border-radius: 0.9rem;
   background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
}

.timer-alert-rule.is-new {
   border-style: dashed;
}

.timer-alert-rule-top {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.55rem;
   align-items: center;
}

.timer-alert-rule-fields {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 10rem);
   gap: 0.55rem;
   align-items: start;
}

.timer-alert-rule-field {
   display: grid;
   gap: 0.24rem;
}

.timer-alert-rule-field-label {
   margin: 0;
   font-size: 0.64rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-alert-rule-remove {
   min-width: 2rem;
   width: 2rem;
   height: 2rem;
   padding: 0;
}

.timer-alert-color-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 0.38rem;
   align-items: center;
}

.timer-alert-color-chip {
   width: 1.95rem;
   height: 1.95rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent 18%);
   border-radius: 999px;
   background: color-mix(in srgb, var(--bg-secondary) 86%, var(--card-bg) 14%);
   opacity: 0.58;
   transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.timer-alert-color-chip:hover,
.timer-alert-color-chip:focus-visible {
   opacity: 0.82;
   transform: translateY(-1px);
}

.timer-alert-color-chip.is-selected {
   opacity: 1;
   border-color: color-mix(in srgb, var(--primary-color) 65%, var(--border-color) 35%);
   background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary) 90%);
   box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.timer-alert-color-preview {
   width: 0.9rem;
   height: 0.9rem;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.45);
   box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.timer-alert-note {
   margin: 0;
   font-size: 0.82rem;
   color: var(--text-muted);
}

@media (max-width: 575.98px) {
   .timer-alert-preview-grid {
      grid-template-columns: minmax(0, 1fr);
   }
}

.timer-alert-solution-list {
   display: grid;
   gap: 0.45rem;
}

.timer-alert-solution-row {
   display: grid;
   gap: 0.12rem;
   padding: 0.62rem 0.7rem;
   border-radius: 0.78rem;
   background: color-mix(in srgb, var(--bg-tertiary) 75%, var(--card-bg) 25%);
}

.timer-alert-solution-text {
   margin: 0;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.84rem;
   color: var(--text-color);
   white-space: pre-wrap;
   word-break: break-word;
}

.timer-checkbox {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   gap: 0.65rem;
   margin: 0;
   padding: 0.72rem 0.82rem;
   border: 1px solid var(--border-color);
   border-radius: 0.8rem;
   background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timer-checkbox:hover,
.timer-checkbox:focus-within {
   border-color: color-mix(in srgb, var(--primary-color) 60%, var(--border-color) 40%);
   background: color-mix(in srgb, var(--bg-tertiary) 74%, var(--card-bg) 26%);
}

.timer-checkbox:has(.form-check-input:checked) {
   border-color: color-mix(in srgb, var(--primary-color) 72%, var(--border-color) 28%);
   background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary) 90%);
}

.timer-checkbox .form-check-input {
   margin: 0;
   float: none;
   width: 1.05rem;
   height: 1.05rem;
   border-color: color-mix(in srgb, var(--border-color) 75%, var(--primary-color) 25%);
   background-color: var(--card-bg);
   box-shadow: none;
}

.timer-checkbox .form-check-input:checked {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
}

.timer-checkbox .form-check-input:focus {
   box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.timer-checkbox-label {
   min-width: 0;
   font-size: 0.92rem;
   color: var(--text-color);
}

.timer-multi-modal-body {
   display: grid;
   gap: 0.8rem;
}

.timer-multi-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem;
   border-radius: 0.9rem;
   border: 1px solid var(--border-color);
   background: var(--bg-secondary);
}

.timer-multi-item-copy {
   min-width: 0;
   display: grid;
   gap: 0.55rem;
}

.timer-multi-item-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.4rem;
}

.timer-multi-item-title {
   margin: 0;
   font-size: 0.72rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-multi-item-scramble {
   margin: 0;
   font-family: 'Roboto Mono', monospace;
   white-space: pre-wrap;
   word-break: break-word;
}

.timer-multi-visual-frame {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 10rem;
   height: 7.8rem;
   padding: 0.4rem;
   border: 1px solid var(--border-color);
   border-radius: 0.85rem;
   background: var(--card-bg);
   overflow: hidden;
}

.timer-multi-visual-frame canvas {
   display: block;
   margin: 0 auto;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: filter 0.15s ease;
}

.timer-multi-visual-frame.is-hidden {
   cursor: pointer;
}

.timer-multi-visual-frame.is-hidden canvas {
   filter: blur(9px) brightness(0.18);
}

.timer-multi-visual-overlay {
   position: absolute;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   font-size: 0.78rem;
   font-weight: 600;
   background: rgba(0, 0, 0, 0.35);
}

.timer-multi-visual-frame.is-hidden .timer-multi-visual-overlay {
   display: flex;
}

.timer-page.is-panels-hidden {
   --timer-sidebar-width: 0px;
}

.timer-page.is-panels-hidden .timer-sidebar,
.timer-page.is-panels-hidden .timer-balancer {
   display: none;
}

.timer-page.is-stats-hidden {
   --timer-mobile-stats-height: 0px;
}

.timer-page.is-times-hidden {
   --timer-mobile-times-height: 0px;
}

.timer-page.is-attempt-active .timer-sidebar,
.timer-page.is-attempt-active .timer-balancer,
.timer-page.is-attempt-active .timer-mobile-panel,
.timer-page.is-attempt-active .timer-focused-stats,
.timer-page.is-attempt-active .timer-visual-card,
.timer-page.is-attempt-active .timer-fm-tool-card,
.timer-page.is-attempt-active .timer-trend-card,
.timer-page.is-attempt-active .timer-alert-card,
.timer-page.is-attempt-active .timer-topbar,
.timer-page.is-attempt-active .timer-scramble-bar {
   opacity: 0 !important;
   pointer-events: none !important;
}

@keyframes timer-mobile-enter {
   from {
      opacity: 0;
      transform: translateX(-1rem);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@media (max-width: 1199.98px) {
   .timer-layout {
      grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr) minmax(11rem, 13.5rem);
   }

   .timer-display {
      font-size: clamp(3.5rem, 9vw, 6.8rem);
   }
}


/* ---- CsTimer import mapping table ---- */
#timerImportExportMappingView {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#timerImportExportMappingBody {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block !important;
    max-height: 40vh;
    overflow-y: auto;
}

.timer-importexport-cstimer-table-wrap {
    width: 100% !important;
    box-sizing: border-box;
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
}

.timer-importexport-cstimer-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.timer-importexport-cstimer-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.timer-mapping-th {
    background: color-mix(in srgb, var(--bg-tertiary) 90%, var(--card-bg) 10%);
    padding: 0.5rem 0.45rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.timer-mapping-th-src { width: 30%; }
.timer-mapping-th-count { width: 4rem; text-align: right; white-space: nowrap; }
.timer-mapping-th-arrow { width: 2.5rem; }

.timer-mapping-row td {
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    vertical-align: middle;
    background: color-mix(in srgb, var(--bg-secondary) 86%, var(--card-bg) 14%);
}
.timer-mapping-row:last-child td {
    border-bottom: 0;
}

.timer-mapping-td-src {
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.timer-mapping-td-src:hover {
    background: color-mix(in srgb, var(--bg-tertiary) 74%, var(--card-bg) 26%);
}
.timer-mapping-td-count {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: right;
}
.timer-mapping-td-arrow {
    text-align: center;
    color: var(--primary-color);
    font-size: 0.85rem;
    width: 2.5rem;
}
.timer-mapping-td select {
    width: 100%;
}

/* Modal title source logo */
.timer-modal-source-logo {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
    margin-right: 0.3rem;
    border-radius: 0.15rem;
}


@media (max-width: 991.98px) {
   .timer-layout {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
   }

   .timer-options-label {
      display: none;
   }

   #timerSettingsBtn {
      width: 2.45rem;
      padding: 0;
      gap: 0;
   }

   .timer-center {
      grid-column: 1;
   }

   .timer-sidebar {
      display: none;
   }

   .timer-balancer {
      display: none;
   }

   .timer-mobile-panel {
      display: grid;
   }

   .timer-display {
      font-size: clamp(2.7rem, 12vw, 5rem);
   }

   .timer-core-stack {
      padding-top: 0.75rem;
      padding-bottom: 1rem;
   }

   .timer-focus-card {
      min-width: min(8.2rem, 44vw);
      padding: 0.22rem 0.42rem;
   }

   .timer-focus-label {
      font-size: 0.54rem;
   }

   .timer-focus-value {
      font-size: 0.88rem;
   }

   .timer-visual-card {
      bottom: 5.4rem;
      right: 0.55rem;
   }

   .timer-trend-card {
      bottom: 5.4rem;
      left: 0.55rem;
   }

   .timer-alert-card {
      bottom: 12.2rem;
      right: 0.55rem;
   }

   .timer-trend-frame {
      width: min(78vw, 19rem);
      height: min(38vw, 9.8rem);
   }

   /* In keyboard mode with soft keyboard visible: hide the mobile panel
      and constrain to visual viewport height so the input stays visible. */
   .timer-page.is-keyboard-mode.is-soft-keyboard-visible .timer-mobile-panel {
      display: none !important;
   }

   .timer-page.is-keyboard-mode.is-soft-keyboard-visible {
      height: var(--timer-viewport-height);
      margin-top: var(--timer-viewport-offset-top, 0px);
   }

   .timer-page.is-keyboard-mode .timer-core-stack {
      justify-content: flex-start;
      padding-top: 0.75rem;
   }
}

@media (max-width: 767.98px) {
   .timer-page {
      --timer-mobile-stats-height: 4.1rem;
      --timer-mobile-times-height: 4.35rem;
   }

   .timer-topbar {
      grid-template-columns: 1fr auto 1fr;
      padding-inline: 0.3rem;
   }

   .timer-toolbar-button {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 0.6rem;
   }

   .timer-toolbar-controls {
      gap: 0.3rem;
   }

   .timer-select-wrap {
      min-width: 0;
      flex: 1 1 0;
      width: auto;
      padding-left: 0.35rem;
   }

   .timer-select-wrap label {
      display: none;
   }

   .timer-session-buttons {
      gap: 0.18rem;
   }

   .timer-inline-icon-button {
      width: 1.65rem;
      height: 1.65rem;
   }
   /* Mobile: hide desktop buttons, show ellipsis + expand area */
   .timer-session-btn-desktop {
      display: none !important;
   }
   .timer-session-menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.65rem;
      height: 1.65rem;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-color);
   }
   .timer-session-menu-btn.is-expanded {
      border-color: var(--primary-color);
   }
   .timer-session-buttons {
      position: relative;
   }
   .timer-session-menu-expand.is-visible {
      display: flex;
      align-items: center;
      gap: 0.12rem;
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 100;
      padding: 0.35rem 0.4rem;
      border: 1px solid var(--border-color);
      border-radius: 0.75rem;
      background: color-mix(in srgb, var(--card-bg) 94%, var(--bg-secondary) 6%);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
      margin-top: 0.35rem;
   }

   .timer-scramble-bar {
      padding: 0.4rem 0.45rem 0.45rem;
      min-height: 4.2rem;
   }

   .timer-scramble-nav-button {
      padding-inline: 0.55rem;
      font-size: 0.68rem;
   }

   .timer-scramble-text {
      font-size: calc(0.82rem * var(--timer-scramble-text-scale));
      line-height: 1.25;
   }

   .timer-display {
      font-size: clamp(4.6rem, 22vw, 7.6rem);
   }

   .timer-focused-stats {
      min-height: 2.6rem;
      gap: 0.25rem;
   }

   .timer-focus-card {
      min-width: min(6.8rem, 45vw);
      padding: 0.18rem 0.36rem;
   }

   .timer-visual-frame {
      width: 9rem;
      height: 7.05rem;
   }

   .timer-trend-card {
      bottom: 5.1rem;
      left: 0.45rem;
   }

   .timer-alert-card {
      bottom: 11.2rem;
      right: 0.45rem;
   }

   .timer-alert-frame {
      width: 8.6rem;
      min-height: 6.9rem;
      padding: 0.62rem 0.66rem 0.7rem;
   }

   .timer-trend-frame {
      width: min(84vw, 16.8rem);
      height: min(42vw, 8.8rem);
      padding: 0.58rem 0.62rem;
   }

   .timer-trend-summary {
      font-size: 0.74rem;
   }

   .timer-stats-mobile-table {
      font-size: 0.7rem;
      min-width: 100%;
   }

   .timer-stats-mobile-table th,
   .timer-stats-mobile-table td {
      padding: 0.1rem 0.14rem;
   }

   .timer-mobile-times {
      grid-auto-columns: 6.2rem;
      gap: 0.22rem;
      padding-inline: 0.16rem;
   }

   .timer-mobile-solve {
      min-height: 3.6rem;
      padding: 0.26rem 0.32rem 0.22rem;
   }

   .timer-mobile-solve-time {
      font-size: 0.7rem;
      padding-top: 0.48rem;
   }

   .timer-mobile-solve-stat {
      font-size: 0.58rem;
   }

   .timer-modal-actions--solve {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .timer-modal-actions--pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .timer-solve-meta-grid {
      gap: 0.55rem 0.8rem;
   }

   .timer-modal-focused-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .timer-stats-mobile-corner {
      width: 4.85rem;
   }

   .timer-stats-mobile-corner .timer-stat-button--mean {
      justify-content: center;
      padding-inline: 0.04rem;
      gap: 0;
   }

   .timer-stats-mobile-corner .timer-mean-title {
      display: none;
   }

   .timer-stats-mobile-corner .timer-mean-value {
      font-size: 0.56rem;
      text-align: center;
   }

   .timer-multi-item {
      grid-template-columns: minmax(0, 1fr);
   }

   .timer-multi-visual-frame {
      width: 100%;
      max-width: 10rem;
   }

}

.timer-keyboard-entry {
   display: grid;
   gap: 0.4rem;
   justify-items: center;
   width: min(33rem, 90vw);
   padding: 0 0.5rem;
}

.timer-keyboard-inspection-label {
   font-family: 'Roboto Mono', monospace;
   font-size: clamp(1.6rem, 5vw, 2.6rem);
   font-weight: 600;
   letter-spacing: 0.04em;
   color: var(--text-muted);
   min-height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: default;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   transition: color 0.15s ease;
}

.timer-keyboard-inspection-label.is-active {
   color: var(--primary-color);
}

.timer-keyboard-inspection-label.is-overtime {
   color: #dc3545;
}

.timer-keyboard-input {
   font-family: 'Roboto Mono', monospace;
   font-size: clamp(2.6rem, 9vw, 5.2rem);
   font-weight: 600;
   width: 100%;
   text-align: center;
   border: 2px solid var(--border-color);
   border-radius: 1rem;
   background: var(--bg-secondary);
   color: var(--text-color);
   padding: 0.3rem 1rem;
   outline: none;
   box-shadow: none;
   transition: border-color 0.18s ease;
   -webkit-appearance: none;
   appearance: none;
}

.timer-keyboard-input:focus {
   border-color: var(--primary-color);
   box-shadow: none;
}

.timer-keyboard-input::placeholder {
   color: var(--text-muted);
   opacity: 0.5;
}

.timer-keyboard-hint {
   font-size: 0.68rem;
   font-weight: 500;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.09em;
}

.timer-page.is-keyboard-mode .timer-display-wrap {
   display: none;
}

@media (max-width: 767.98px) {
   .timer-keyboard-entry {
      width: min(22rem, 90vw);
   }

   .timer-keyboard-input {
      font-size: clamp(2rem, 14vw, 4rem);
   }
}

/* Fewest moves */
.timer-fewest-moves-container {
   grid-row: 1;
   min-height: 0;
   padding: 0.8rem;
   display: flex;
   align-items: stretch;
   justify-content: center;
   pointer-events: auto;
}

.timer-fewest-moves-container[hidden] {
   display: none !important;
}

.timer-fewest-moves-panel {
   width: min(52rem, 100%);
   min-height: 0;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   gap: 0.75rem;
   padding: 1rem;
   border: 1px solid var(--border-color);
   border-radius: 1rem;
   background: color-mix(in srgb, var(--bg-secondary) 90%, var(--card-bg) 10%);
   box-shadow: 0 0.6rem 1.7rem rgba(0, 0, 0, 0.12);
}

.timer-fewest-moves-title {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.timer-fewest-moves-help {
   font-size: 0.84rem;
   line-height: 1.45;
   color: var(--text-muted);
}

.fm-text-input {
   width: 100%;
   min-height: min(24rem, 54vh);
   height: 100%;
   resize: none;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.95rem;
   line-height: 1.55;
}

.timer-fewest-moves-controls {
   display: grid;
   gap: 0.7rem;
}

.timer-fewest-moves-controls[hidden] {
   display: none !important;
}

.fm-countdown {
   font-family: 'Roboto Mono', monospace;
   font-size: clamp(2rem, 3.2vw, 2.75rem);
   font-weight: 700;
   line-height: 0.95;
   letter-spacing: -0.05em;
   text-align: center;
   color: var(--text-color);
}

.fm-status {
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   text-align: center;
   color: var(--text-muted);
}

.timer-fewest-moves-actions {
   display: grid;
   gap: 0.5rem;
}

.timer-fewest-moves-actions .btn {
   width: 100%;
}

@media (max-width: 991.98px) {
   .timer-fewest-moves-container {
      padding: 0.65rem;
   }

   .timer-fewest-moves-panel {
      padding: 0.85rem;
      grid-template-rows: auto auto minmax(14rem, 1fr);
   }

   .fm-text-input {
      min-height: 16rem;
   }
}
/* Multiblind submit modal */
.timer-multiblind-submit-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.timer-multiblind-submit-field input {
    width: 5rem;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.timer-multiblind-submit-separator {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-muted);
}

.timer-multiblind-submit-total {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 3rem;
    text-align: center;
}

/* Import / Export modal */
#timerImportExportBtn {
    width: auto;
    gap: 0.4rem;
    padding: 0 0.65rem;
}

.timer-importexport-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.timer-importexport-picker-btn {
    display: grid !important;
    gap: 0.6rem;
    justify-items: center;
    align-content: center;
    padding: 2rem 1rem !important;
    min-height: 8rem;
    border-radius: 1rem !important;
}

.timer-importexport-picker-btn span {
    font-size: 1.2rem;
    font-weight: 600;
}

.timer-importexport-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.timer-importexport-toolbar-spacer {
    flex: 1 1 auto;
}

.timer-importexport-toolbar--bottom {
    margin-top: 0.5rem;
    margin-bottom: 0;
    justify-content: flex-end;
}

.timer-importexport-event-list {
    display: grid;
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
}

.timer-importexport-event-section {
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--card-bg) 12%);
    overflow: hidden;
}

.timer-importexport-event-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-tertiary) 72%, var(--card-bg) 28%);
}

.timer-importexport-event-header .form-check-input {
    margin: 0;
}

.timer-importexport-event-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-color);
    flex: 0 0 auto;
}

.timer-importexport-event-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex: 1 1 auto;
}

.timer-importexport-event-actions {
    display: flex;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.btn-xs {
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    border-radius: 0.35rem;
    line-height: 1.4;
}

.timer-importexport-session-list {
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem 0.7rem 0.45rem;
}

.timer-importexport-session-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
    margin: 0;
    cursor: pointer;
    border-radius: 0.45rem;
    transition: background-color 0.12s ease;
}

.timer-importexport-session-row:hover {
    background: color-mix(in srgb, var(--bg-tertiary) 74%, var(--card-bg) 26%);
}

.timer-importexport-session-row .form-check-input {
    margin: 0;
}

.timer-importexport-session-name {
    font-size: 0.84rem;
    color: var(--text-color);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timer-importexport-solve-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex: 0 0 auto;
}

/* Import source selection */
.timer-importexport-source-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.timer-importexport-source-card {
    display: grid !important;
    gap: 0.6rem;
    justify-items: center;
    align-content: center;
    padding: 1.2rem 0.75rem !important;
    min-height: 7rem;
    border-radius: 0.9rem !important;
    text-decoration: none !important;
}

.timer-importexport-source-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.timer-importexport-source-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* File selection */
.timer-importexport-file-wrap {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

/* Mapping view */
.timer-importexport-mapping-body {
    display: grid;
    gap: 0.75rem;
    max-height: 40vh;
    overflow-y: auto;
}

.timer-importexport-mapping-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.55rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--bg-secondary) 86%, var(--card-bg) 14%);
    margin-top: 0.3rem;
}

.timer-importexport-mapping-row.is-cstimer-row {
    grid-template-columns: auto 1fr 1fr auto 1fr;
}

.timer-importexport-include-cb {
    margin: 0 !important;
    flex: 0 0 auto;
}

.timer-importexport-mapping-source,
.timer-importexport-mapping-event,
.timer-importexport-mapping-target {
    min-width: 0;
}

.timer-importexport-mapping-event {
    min-width: 8rem;
}

.timer-importexport-mapping-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1rem;
    flex: 0 0 auto;
}

.timer-importexport-mapping-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.12rem;
}

.timer-importexport-mapping-value {
    display: block;
    font-size: 0.84rem;
    color: var(--text-color);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timer-importexport-mapping-target select {
    width: 100%;
}

/* Responsive: hide labels on small screens */
@media (max-width: 991.98px) {
    #timerImportExportBtn {
        width: 2.45rem;
        padding: 0;
        gap: 0;
    }
}

@media (max-width: 767.98px) {
    #timerImportExportBtn {
        width: 2.1rem;
        height: 2.1rem;
    }

    .timer-importexport-picker-btn {
        min-height: 6rem;
        padding: 1.5rem 0.75rem !important;
    }

    .timer-importexport-picker-btn span {
        font-size: 1rem;
    }

    .timer-importexport-mapping-row,
    .timer-importexport-mapping-row.is-cstimer-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .timer-importexport-mapping-arrow {
        transform: rotate(90deg);
    }
}

/* ---- Comp Sim ---- */
.timer-comp-sim-solves {
    padding: 0.3rem 0.5rem;
    display: grid;
    gap: 0.22rem;
    min-height: 0;
    overflow-y: auto;
}
.timer-comp-sim-solve-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--bg-secondary);
    min-height: 2.2rem;
}
.timer-comp-sim-solve-slot.is-filled {
    background: var(--bg-tertiary);
}
.timer-comp-sim-solve-index {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.timer-comp-sim-solve-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-color);
}
.timer-comp-sim-projected {
    padding: 0.4rem 0.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.timer-comp-sim-projected-label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.timer-comp-sim-projected-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}
.timer-comp-sim-projected-bpa,
.timer-comp-sim-projected-wpa {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.68rem;
    margin-top: 0.1rem;
}
.timer-comp-sim-projected-bpa { color: #22c55e; }
.timer-comp-sim-projected-wpa { color: #ef4444; }

/* Comp Sim mobile */
.timer-comp-sim-mobile-panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.22rem 0.35rem calc(0.35rem + max(env(safe-area-inset-bottom, 0px), var(--timer-mobile-safe-bottom)));
}
.timer-comp-sim-mobile-panel[hidden] {
    display: none !important;
}
.timer-comp-sim-mobile-projected {
    text-align: center;
    min-height: 1.8rem;
}
.timer-comp-sim-mobile-solves {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 6.2rem;
    gap: 0.22rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}
.timer-comp-sim-mobile-card {
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--bg-secondary);
    padding: 0.28rem 0.4rem;
    text-align: left;
    min-height: 3rem;
}
.timer-comp-sim-mobile-card.is-filled {
    background: var(--bg-tertiary);
}
.timer-comp-sim-mobile-index {
    display: block;
    font-size: 0.55rem;
    color: var(--text-muted);
}
.timer-comp-sim-mobile-time {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Comp Sim summary modal */
.timer-comp-sim-cards {
    display: grid;
    gap: 0.35rem;
}
.timer-comp-sim-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: var(--bg-secondary);
    min-height: 2.5rem;
}
.timer-comp-sim-card.is-round-best {
    border-color: #22c55e;
    border-width: 2px;
}
.timer-comp-sim-card.is-round-worst {
    border-color: #ef4444;
    border-width: 2px;
}
.timer-comp-sim-card.is-overall-best {
    border-width: 2px;
    border-color: transparent;
    background:
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        linear-gradient(135deg, #ff4d4d, #ffb347, #fff176, #4ade80, #60a5fa, #c084fc) border-box;
}
.timer-comp-sim-card-index {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.timer-comp-sim-card-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-color);
}
.timer-comp-sim-result {
    text-align: center;
    padding: 0.5rem 0;
}
.timer-comp-sim-result-label {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.timer-comp-sim-result-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 0.1rem;
}
.timer-comp-sim-comparison {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.timer-comp-sim-running {
    display: grid;
    gap: 0.18rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: var(--bg-secondary);
}
.timer-comp-sim-running-label {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.timer-comp-sim-running-row {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-color);
}

/* ---- Dual-range slider ---- */
.timer-dual-range {
    position: relative;
    height: 2rem;
    margin-top: 0.25rem;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.timer-dual-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.2rem;
    background: var(--cs-track-bg, var(--border-color, #444));
    border-radius: 0.1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.timer-dual-range .timer-dual-range-thumb {
    position: absolute;
    top: 50%;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--accent-color, #6366f1);
    border: 2px solid var(--bg-primary, #fff);
    cursor: grab;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-sizing: border-box;
}
.timer-dual-range .timer-dual-range-thumb:active {
    cursor: grabbing;
    z-index: 2;
}