.workspace,
body:has(.workspace) #credential-dialog {
  --ui-primary: #409eff;
  --panel-text: #1c334c;
  --panel-muted: #506479;
  --panel-line: #dce6f0;
  --panel-control-line: #cad9e8;
  --panel-accent: #1965b5;
  --panel-accent-dark: #124b88;
  --panel-highlight: #ecf5ff;
  --panel-subtle: #f5f8fc;
  --panel-radius: 14px;
}

.workspace .workspace-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.workspace .workspace-intro h1 {
  color: var(--panel-text);
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.22;
  text-wrap: balance;
}

.workspace .workspace-intro .eyebrow {
  color: var(--panel-accent);
  margin-bottom: 8px;
}

.workspace .workspace-intro .intro-copy {
  max-width: 55ch;
  margin-top: 8px;
  color: var(--panel-muted);
  font-size: 14px;
  text-wrap: pretty;
}

.workspace .panel {
  min-width: 0;
  padding: clamp(16px, 2.2vw, 24px);
  background: #fff;
  border: 1px solid var(--panel-line);
  border-radius: var(--panel-radius);
}

.workspace .panel h2 {
  color: var(--panel-text);
  font-size: 17px;
  text-wrap: balance;
}

.workspace .panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.workspace .step {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  color: var(--panel-accent);
  background: var(--panel-highlight);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.workspace .flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.workspace .space { margin-top: 16px; }

.workspace .field,
#credential-dialog .field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 15px;
  color: var(--panel-text);
  font-size: 14px;
  font-weight: 600;
}

.workspace .field[hidden] { display: none; }

.workspace .field input,
.workspace .field select,
#credential-dialog .field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--panel-control-line);
  border-radius: 8px;
  background: #fff;
  color: var(--panel-text);
  font: inherit;
  font-weight: 400;
}

.workspace .field select:disabled,
.workspace .field input:disabled {
  color: var(--panel-muted);
  background: var(--panel-subtle);
}

.workspace .field :is(select, input):focus-visible,
#credential-dialog .field input:focus-visible {
  border-color: var(--panel-accent);
  outline: 2px solid var(--panel-accent);
  outline-offset: 1px;
}

.workspace :is(button, a, input, summary):focus-visible,
#credential-dialog :is(button, input):focus-visible {
  outline-color: var(--panel-accent);
}

.workspace .field-label {
  color: var(--panel-text);
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
}

.workspace .form-grid,
#credential-dialog .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 0 16px;
}

.workspace .action-row,
#credential-dialog .action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.workspace .button,
#credential-dialog .button {
  min-height: 44px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  white-space: normal;
}

.workspace .button-primary,
#credential-dialog .button-primary { background: var(--panel-accent); }
.workspace .button-primary:hover:enabled,
#credential-dialog .button-primary:hover:enabled { background: var(--panel-accent-dark); }
.workspace .button-secondary,
#credential-dialog .button-secondary {
  color: var(--panel-accent-dark);
  border-color: var(--panel-control-line);
}
.workspace .button-quiet,
#credential-dialog .button-quiet { color: var(--panel-accent-dark); }
.workspace :is(.button-secondary, .button-quiet):hover:enabled,
#credential-dialog :is(.button-secondary, .button-quiet):hover:enabled {
  background: var(--panel-highlight);
  border-color: var(--panel-control-line);
}
.workspace .button[hidden] { display: none; }

.workspace .muted,
#credential-dialog .muted {
  color: var(--panel-muted);
  font-size: 13px;
  line-height: 1.6;
  text-wrap: pretty;
}

.workspace #source-status,
.workspace #track-info,
#credential-note { margin-top: 8px; }

.workspace .choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.workspace .choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  color: var(--panel-text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.workspace .choice:has(input:checked),
.workspace .record:has(> input:checked) {
  border-color: #a5cfff;
  background: var(--panel-highlight);
}

.workspace .choice input,
.workspace .record input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--panel-accent);
}

.workspace .choice:has(input:disabled) { opacity: .55; }

.workspace .platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
  gap: 14px;
}

.workspace .platform-grid:has(.connection-guide[open]) { align-items: start; }

.workspace .platform-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace .platform-card .action-row {
  margin-top: auto;
  padding-top: 6px;
}

.workspace .connection-guide {
  border-top: 1px solid var(--panel-line);
  color: var(--panel-muted);
  font-size: 14px;
  line-height: 1.55;
}

.workspace .connection-guide ol {
  margin: 0 0 8px;
  padding-inline-start: 1.35em;
}

.workspace .connection-guide li + li { margin-top: 5px; }
.workspace .connection-guide p { margin: 0 0 8px; }
.workspace .coverage-note { display: block; font-size: inherit; }

.workspace .session-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  color: var(--panel-muted);
  background: #eff3f8;
  font-size: 12px;
  font-weight: 600;
}

.workspace .session-status::before {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  content: "";
}

.workspace .session-status.ready {
  background: #eaf5ee;
  color: #105237;
}

.workspace .session-status.pending { color: #755310; background: #fff2d5; }
.workspace .session-status.error { color: #9b3e35; background: #fbece7; }

.workspace .coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  gap: 10px 16px;
  margin-top: 12px;
}

.workspace .coverage p {
  color: var(--panel-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.workspace summary {
  width: fit-content;
  padding: 8px 0;
  color: var(--panel-accent-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.workspace .empty {
  margin-top: 12px;
  padding: 18px 14px;
  border: 1px dashed var(--panel-control-line);
  border-radius: 9px;
  background: var(--panel-subtle);
  color: var(--panel-muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

.workspace .record-list,
.workspace #activities { margin-top: 12px; }
.workspace #activities:empty { margin: 0; }

.workspace .record {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 54px;
  padding: 10px 8px;
  border-top: 1px solid var(--panel-line);
}

.workspace .record-main {
  flex: 1 1 120px;
  min-width: 0;
}

.workspace .record-main strong {
  color: var(--panel-text);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.workspace .record-meta {
  color: var(--panel-muted);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.workspace .record-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.workspace .record .button { padding-inline: 9px; }
.workspace .search-field { max-width: 380px; }

.workspace .upload-label {
  position: relative;
  cursor: pointer;
}

.workspace .upload-label:focus-within {
  outline: 2px solid var(--panel-accent);
  outline-offset: 3px;
}

.workspace .notice,
#credential-dialog .notice {
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.workspace .notice.info {
  border-color: #c6e2ff;
  background: var(--panel-highlight);
  color: var(--panel-accent-dark);
}

.workspace #run-help { margin-top: 12px; overflow-wrap: anywhere; }
.workspace #run-guidance { margin: 0; }

.workspace .run-log {
  max-height: 260px;
  overflow: auto;
  list-style: none;
  padding: 10px 14px;
  margin: 14px 0 0;
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  background: var(--panel-subtle);
  color: var(--panel-text);
  font: 13px/1.75 ui-monospace, Consolas, monospace;
  overflow-wrap: anywhere;
}

.workspace .run-log .log-level { margin-inline-end: .6em; }
.workspace .run-log li[data-level="success"] { color: #166534; }
.workspace .run-log li[data-level="error"] { color: #963c32; }
.workspace .run-log li[data-level="pending"] { color: #825000; }

.workspace #track-table-help { margin: 7px 0 14px; }
.workspace .track-filter { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 10px; }
.workspace .track-filter summary { color: var(--panel-accent-dark); font-weight: 600; cursor: pointer; }
.workspace #track-filter-fields { margin: 10px 0 0; padding: 0; border: 0; min-inline-size: 0; }
.workspace .track-filter-ranges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px 14px; }
.workspace .track-filter-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; }
.workspace .track-filter-range > span { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.workspace .track-filter-range .field { margin: 0; min-width: 0; }
.workspace .track-filter-range input { width: 100%; min-width: 0; padding-inline: 6px; }
.workspace #track-filter-error { color: #963c32; }
.workspace .track-table-scroll { overflow-x: auto; border: 1px solid var(--panel-line); border-radius: 10px; }
.workspace .track-table { width: 100%; min-width: 830px; border-collapse: collapse; font-size: 13px; }
.workspace .track-table th, .workspace .track-table td { padding: 10px 9px; text-align: right; white-space: nowrap; }
.workspace .track-table thead { background: var(--panel-subtle); color: var(--panel-muted); }
.workspace .track-table th:nth-child(-n+3), .workspace .track-table td:nth-child(-n+3) { text-align: left; }
.workspace .track-table tbody tr { border-top: 1px solid var(--panel-line); }
.workspace .track-table tbody tr:has(input:checked) { background: var(--panel-highlight); }
.workspace .track-table td { font-variant-numeric: tabular-nums; }
.workspace .track-table .track-name { min-width: 125px; max-width: 240px; white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
.workspace .track-table .track-missing { color: var(--panel-muted); }
.workspace .track-table button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.workspace .track-table button:hover, .workspace .track-table th[aria-sort] button { color: var(--panel-accent); }
.workspace .track-table th[aria-sort="ascending"] button::after { content: ' ↑'; }
.workspace .track-table th[aria-sort="descending"] button::after { content: ' ↓'; }
.workspace .track-table small { display: block; font-weight: 400; }
.workspace .track-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--panel-accent); }
.workspace .track-table-footer, .workspace .track-table-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.workspace .track-table-footer { justify-content: space-between; margin-top: 8px; }
.workspace #track-preview[hidden] { display: none; }
.workspace #track-canvas {
  display: block;
  width: min(100%, 760px);
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  background: var(--panel-highlight);
}

.workspace .ride-studio {
  display: grid;
  gap: 16px;
  align-items: start;
}

.workspace .ride-studio[hidden],
.workspace #ride-terrain[hidden] { display: none; }

.workspace .full-ride-note { margin-top: 16px; }

.workspace .ride-map-panel { grid-column: 1 / -1; min-width: 0; }
.workspace #ride-map-description { margin-top: 7px; }
.workspace .ride-map-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px 20px; }
.workspace .ride-map-controls[hidden] { display: none; }
.workspace .ride-map-controls .field { min-width: 150px; }
.workspace .ride-map-controls .choice { min-height: 44px; }
.workspace .ride-map-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 0; margin: 9px 0; list-style: none; font-size: 13px; color: var(--panel-muted); }
.workspace .ride-map-legend[hidden] { display: none; }
.workspace .ride-map-legend li { display: inline-flex; align-items: center; gap: 6px; }
.workspace .ride-map-legend .swatch { display: inline-block; width: 16px; height: 5px; border-radius: 3px; }
.workspace :is(#ride-map-status, #ride-exploration-status):not(:empty) { margin: 9px 0; }
.workspace :is(#ride-map-canvas, #exploration-map-canvas, #ride-month-map) { height: clamp(300px, 56vh, 560px); width: 100%; margin-top: 10px; overflow: hidden; border: 1px solid var(--panel-line); border-radius: 10px; background: #edf2f7; }
.workspace #ride-map-canvas[hidden] { display: none; }
.workspace .exploration-new { background: #087762; }
.workspace .exploration-history { background: #315eaa; }
.workspace .month-heat-low { background: #5996e3; }
.workspace .month-heat-mid { background: #2868be; }
.workspace .month-heat-high { background: #16396d; }
.workspace #ride-compare-status { font-weight: 700; margin-top: 8px; }
.workspace .ride-compare-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.workspace .ride-compare-table :is(td, th) { padding: 8px; border-bottom: 1px solid var(--panel-line); text-align: start; overflow-wrap: anywhere; }
.workspace .ride-compare-table th:first-child { width: 25%; }
.workspace .ride-compare-table th span { display: block; font-weight: 400; color: var(--panel-muted); }
.workspace .ride-compare-baseline { color: #8050b5; }
.workspace .ride-compare-current { color: #1768d6; }
.workspace .ride-compare-plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.workspace .ride-compare-plots canvas { display: block; width: 100%; height: auto; border: 1px solid var(--panel-line); border-radius: 9px; background: #f5f8fd; }
.workspace .ride-compare-plots canvas[hidden] { display: none; }
.workspace .ride-month-highlight { margin-top: 20px; }
.workspace .ride-month-highlight p { margin: 6px 0 10px; overflow-wrap: anywhere; }
.workspace #ride-report summary { cursor: pointer; }
.workspace .ride-report-match h4 { margin: 0; }
.workspace .ride-metric .ride-report-delta { display: block; margin: 5px 0 0; }
.workspace .ride-metrics.exploration-metrics { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.workspace #ride-highlights-cards { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.workspace #ride-highlights-cards[hidden] { display: none; }
.workspace #ride-highlights-cards .ride-metric { display: grid; align-content: start; gap: 5px; overflow-wrap: anywhere; }
.workspace #ride-highlights-cards .button { justify-self: start; margin-top: 3px; }
.workspace #ride-highlights-cards .highlight-value { font-size: 24px; font-weight: 700; color: var(--panel-text); }
.workspace #ride-journal-dialog {
  width: min(500px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--panel-line); border-radius: var(--panel-radius); color: var(--panel-text); background: #fff;
}
.workspace #ride-journal-dialog::backdrop { background: #14294570; }
.workspace #ride-journal-dialog textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--panel-control-line); border-radius: 8px;
  background: #fff; color: var(--panel-text); font: inherit; font-weight: 400; resize: vertical;
}
.workspace #ride-journal-dialog textarea:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 1px; }
.workspace .journal-presets { border: 0; padding: 0; margin: 15px 0 0; }
.workspace .journal-presets legend { font-size: 14px; font-weight: 600; }
.workspace .journal-presets > div, .workspace .journal-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.workspace .journal-tags { margin: 5px 0; padding: 0; list-style: none; }
.workspace .journal-tags li { border-radius: 12px; background: var(--panel-subtle); color: var(--panel-accent-dark); font-size: 13px; padding: 2px 8px; }
.workspace .journal-notes { margin: 6px 0 0; }
.workspace .journal-notes dt { font-size: 13px; font-weight: 600; }
.workspace .journal-notes dd { margin: 0 0 5px; white-space: pre-wrap; }
.workspace #ride-journal-status, .workspace #ride-journal-error { margin-top: 8px; }
.workspace #ride-journal-add { margin-top: 10px; }
.workspace #ride-exploration-results > .muted { margin: 10px 0; }

.workspace .ride-analysis > .muted,
.workspace .ride-share > .muted { margin-top: 7px; }

.workspace .ride-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.workspace .ride-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  background: var(--panel-subtle);
}

.workspace .ride-metric dt { color: var(--panel-muted); font-size: 13px; }
.workspace .ride-metric dd { margin: 4px 0 0; font-size: clamp(17px, 2.2vw, 24px); font-weight: 700; font-variant-numeric: tabular-nums; }
.workspace .ride-metric .ride-unit { margin-left: 4px; color: var(--panel-muted); font-size: 12px; font-weight: 500; }
.workspace .ride-terrain-heading { margin-top: 16px; }

.workspace #ride-terrain,
.workspace #ride-card { display: block; width: 100%; height: auto; border-radius: 10px; }
.workspace #ride-terrain { margin-top: 12px; }
.workspace #ride-angle, .workspace #ride-share-angle, .workspace #ride-full-angle { min-height: 28px; padding-inline: 0; accent-color: var(--panel-accent); }
.workspace #ride-angle-value, .workspace #ride-share-angle-value, .workspace #ride-full-angle-value { color: var(--panel-muted); font-variant-numeric: tabular-nums; }
body:has(#ride-terrain-dialog[open]) { overflow: hidden; }
.workspace #ride-terrain-dialog { position: fixed; inset: 0; margin: 0; border: 0; padding: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; overflow: auto; }
.workspace #ride-terrain-viewer { display: grid; grid-template-rows: auto minmax(100px, 1fr) auto; gap: 12px; height: 100%; padding: clamp(14px, 3vw, 32px); background: var(--panel-subtle); color: var(--panel-text); }
.workspace .ride-terrain-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.workspace .ride-terrain-toolbar h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); }
.workspace .ride-terrain-actions { align-items: end; justify-content: start; }
.workspace .ride-terrain-actions .field { flex: 0 1 220px; margin: 0; }
.workspace .ride-terrain-frame { display: grid; place-items: center; min-height: 0; overflow: hidden; background: #0c192d; border-radius: 12px; }
.workspace #ride-terrain-full { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.workspace #ride-terrain-share-status { margin-top: 8px; }

.workspace .ride-share-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.workspace .ride-title-field { grid-column: 1 / -1; }
.workspace .ride-date-choice { align-self: end; min-height: 44px; }
.workspace .ride-preview {
  display: grid;
  justify-items: center;
  margin-top: 14px;
  padding: clamp(10px, 3vw, 20px);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  background: var(--panel-subtle);
}

.workspace #ride-card { max-width: 420px; box-shadow: 0 9px 26px #0b263b22; }
.workspace :is(#exploration-card, #ride-month-card) { display: block; width: min(100%, 420px); height: auto; }

@media (min-width: 960px) {
  .workspace .ride-studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
}

.workspace .recorder-stats {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--panel-line);
  border-radius: 9px;
  background: var(--panel-subtle);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

body:has(.workspace) #credential-dialog {
  width: min(500px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--panel-line);
  border-radius: var(--panel-radius);
  color: var(--panel-text);
}

#credential-dialog::backdrop { background: #14294570; }
#credential-error { margin-top: 12px; }

@media (min-width: 760px) {
  .workspace .flow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.workspace #ride-share-library {
  width: min(1040px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 18px;
  color: inherit;
  border: 1px solid var(--panel-line, #dce4ee);
  border-radius: 16px;
  background: #fff;
}
#ride-share-library::backdrop { background: #10213b9c; }
.share-library-top, .share-library-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.share-library-top { justify-content: space-between; align-items: start; margin-bottom: 14px; }
.share-library-top h2, .share-library-preview h3 { margin: 0; }
.share-library-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 18px; }
.share-library-controls { margin: 12px 0; align-items: center; }
.share-library-controls .field { flex: 1 1 138px; min-width: 0; }
.share-library-controls .choice { flex: 0 0 100%; }
.share-library-controls input { min-width: 0; }
.share-library-themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  max-height: min(67dvh, 660px);
  overflow: auto;
  padding: 4px;
}
.share-library-theme {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 5px;
  color: #17324e;
  font: inherit;
  font-size: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid #cbd8e7;
  border-radius: 7px;
  cursor: pointer;
}
.share-library-theme[aria-pressed="true"] { border-color: #1768d6; box-shadow: inset 0 0 0 1px #1768d6; background: #edf5ff; }
.share-library-theme:focus-visible { outline: 2px solid #1768d6; outline-offset: 1px; }
.share-library-theme img { width: 100%; height: auto; aspect-ratio: 216 / 245; border-radius: 4px; background: #e8eef4; }
.share-library-preview { min-width: 0; }
.share-library-preview .ride-preview { max-width: 460px; }
.share-library-preview canvas { display: block; width: min(100%, 46.76dvh); height: auto; }
.share-library-preview canvas[data-format="douyin"] { width: min(100%, 29.81dvh); }
@media (max-width: 680px) {
  .workspace #ride-share-library { padding: 12px; }
  .share-library-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .share-library-themes { max-height: 180px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}