/* ============================================================
   THE WATCH ROOM — CONSOLIDATED + DEDUPLICATED STYLESHEET
   Source: 36 original patch files, merged in their exact prior
   cascade order. For every selector that was re-declared multiple
   times (across one file or several), properties were merged
   property-by-property in chronological cascade order -- so the
   LAST value written for any given property wins, exactly as the
   browser already resolved it, but properties that were only ever
   set once and never overridden are preserved (not silently
   dropped). See css/_legacy/ for the untouched originals and
   MERGE_REPORT.txt for a full list of every merge performed.

   FOLLOW-UP PASS (2026-07-30): v27.7 through v28.2 re-introduced
   132 duplicate-selector groups by appending new patches to the
   end of this file instead of editing in place -- the same
   mistake this file was originally created to fix. Those were
   re-merged using the same rule (last declaration wins per
   property, !important beats non-!important). See the dated
   entry in MERGE_REPORT.txt for method and verification detail.
   If you're adding a new rule for a selector that already exists
   above, EDIT THAT RULE instead of appending a new one below --
   that's what caused this to need doing twice.

   FOLLOW-UP PASS #2 (2026-07-30, same day): a later v28.7 build
   used the v28.2 FIXED file above as its consolidation base, then
   mechanically reapplied the v28.3-v28.6 patch deltas on top "in
   their original order" -- which reintroduced the exact same
   .hr-image img crop bug a third time, because v28.3's delta
   conflicts with the fix directly above it and nothing checked
   for that. Re-fixed; see the second dated entry in
   MERGE_REPORT.txt. Lesson for next time: replaying old patch
   deltas onto a fixed baseline needs the same per-rule review as
   writing them fresh -- a patch being "later" doesn't mean it's
   compatible with a fix that landed after it in a different branch.
   ============================================================ */

* {
  box-sizing: border-box;
}

button,input,select,textarea {
  font: inherit;
}

button {
  cursor: pointer;
}


.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 0;
}

.text-button:hover {
  color: var(--text);
}

.primary-button,.secondary-button,.danger-button,.upload-button {
  border-radius: 11px;
  padding: 11px 15px;
  font-weight: 800;
}

.danger-button {
  border: 1px solid rgba(184,81,75,.45);
  background: rgba(184,81,75,.08);
  color: #e5aaa5;
}

.upload-button {
  display: inline-block;
  border: 1px solid #4b4037;
  background: #2a241f;
  color: var(--text);
  text-align: center;
}

.upload-button input {
  display: none;
}

input,select,textarea {
  width: 100%;
  border: 1px solid #3a332d;
  background: #100f0e;
  color: var(--text);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}

input:focus,select:focus,textarea:focus {
  border-color: #8f754e;
  box-shadow: 0 0 0 3px rgba(201,170,112,.1);
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.wear-mode {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  background: rgba(13,12,11,.985);
  padding: 28px;
}

.wear-mode.open {
  display: flex;
}

.wear-mode-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto 22px;
}

.wear-mode-head h2 {
  font-size: 34px;
  margin: 0 0 6px;
}

.wear-mode-head p:last-child {
  margin: 0;
  color: var(--muted);
}

.wear-selection-grid {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: auto;
  padding: 4px 4px 120px;
}

.watch-picker-group-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.watch-picker-group-grid {
  display: grid;
  grid-template-columns: repeat(var(--picker-cols,6),150px);
  gap: 14px;
}

.wear-select-card {
  position: relative;
  min-height: 230px;
  border: 1px solid #352f2a;
  background: #181614;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.wear-select-card.selected {
  border-color: #4ca26e;
  box-shadow: 0 0 0 3px rgba(76,162,110,.14);
}

.wear-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #61574d;
  background: #141210;
  display: grid;
  place-items: center;
}

.wear-select-card.selected .wear-check {
  background: #2f8755;
  border-color: #2f8755;
}

.wear-mode-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px;
  background: rgba(18,16,14,.96);
  border-top: 1px solid #342d27;
  backdrop-filter: blur(14px);
}

.wear-mode-actions>div {
  display: flex;
  gap: 10px;
}

h1,h2,h3,strong,b {
  letter-spacing: -.018em;
}

.eyebrow,th,.dashboard-card span,.wear-stats span,.overall-label {
  letter-spacing: .105em;
}

.watch-title,.watch-cell strong,.rank-row b,.compare-card h3 {
  font-weight: 650;
}

.watch-cell span,.rank-row span,.dashboard-panel p,.timeline-panel p,.modal-actions>span {
  font-weight: 350;
}

.topbar,.section-nav,.modal-actions {
  background: rgba(15,13,12,.86);
  backdrop-filter: blur(20px) saturate(112%);
}

button,.compare-chip,.watch-card,.winder-card,.dashboard-card,.dashboard-panel,.timeline-panel,.rank-row,.wear-stats>div,.score-heat,.help-icon,.icon-button {
  transition: transform .15s var(--ease),border-color .15s ease,background-color .15s ease,box-shadow .15s ease,color .15s ease,filter .15s ease,opacity .15s ease;
}

button:active,.compare-chip:active,.icon-button:active {
  transform: translateY(1px) scale(.985);
}

.icon-button,.help-icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid #3d352f;
  background: #201c18;
  color: var(--text);
  font-size: 22px;
  font-weight: 400;
}

thead th {
  background: #1b1815;
  font-weight: 600;
}

tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.009);
}

tbody tr:hover {
  box-shadow: inset 3px 0 0 rgba(191,163,105,.55);
}

td.numeric,.score-heat,.overall-score,.dashboard-card strong,.wear-stats strong {
  font-variant-numeric: tabular-nums lining-nums;
}

#libraryTable th:nth-child(n+4),#libraryTable td:nth-child(n+4) {
  text-align: center;
}


#libraryTable .medal-column-head::before {
  content: 'Medal';
  font-size: 8px;
  letter-spacing: .02em;
}


.dashboard-panel,.timeline-panel {
  border-color: #2e2924;
  background: #161310;
}

.compare-insight,.collection-insight,.dashboard-panel#collectionHealth {
  border-color: #3a3129;
  background: linear-gradient(145deg,rgba(191,163,105,.06),transparent 42%),#151210;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.compare-insight p,.collection-insight p,.dashboard-panel#collectionHealth p {
  max-width: 76ch;
  line-height: 1.72;
  color: #c5bbb0;
}

.compare-insight h2,.collection-insight h2,.dashboard-panel#collectionHealth h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.empty-state,.compare-insight-empty,.notice {
  border-color: #413930;
  background: linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
  color: #a99f94;
}

.empty-state::before {
  content: '—';
  display: block;
  margin-bottom: 10px;
  color: #6f655b;
  font-size: 22px;
}

.section-nav button:hover,.topnav-btn:hover {
  transform: none;
}

.modal.open .modal-card {
  animation: pwModalIn .18s var(--ease) both;
}

@keyframes pwModalIn { from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none} }

@keyframes pwViewIn { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }

.header-label-tooltip,.help-popover {
  z-index: 2147483000!important;
}

.score-gold-high,.score-perfect {
  color: #c9ac6d;
}

.wear-stats>div:hover {
  transform: none;
  border-color: #40372f;
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration: .001ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .001ms!important;
    scroll-behavior: auto!important;
  }
}

.dashboard-card:nth-child(-n+4)>strong {
  display: flex;
  align-items: center;
  min-height: 35px;
  white-space: nowrap;
}

.dashboard-panel>h2,.collection-health>h2 {
  color: #b1a79d;
}

.utility-nav.busy {
  opacity: .55;
  pointer-events: none;
}

.backup-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 140;
  max-width: 390px;
  padding: 13px 16px;
  border: 1px solid #4a4036;
  border-radius: 12px;
  background: rgba(24,21,18,.97);
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease,transform .18s ease;
  pointer-events: none;
}

.backup-toast.show {
  opacity: 1;
  transform: none;
}

.backup-toast.error {
  border-color: rgba(184,81,75,.65);
}

.compare-mode {
  background: radial-gradient(circle at 50% -10%,rgba(49,105,154,.25),transparent 38%),linear-gradient(180deg,#14283b,#09121c 82%);
}

.compare-mode .eyebrow {
  color: #91c9f5;
}

.compare-mode .wear-select-card {
  background: #101c27;
  border-color: #31485c;
}

.compare-mode .wear-select-card:hover {
  border-color: #527da2;
  background: #142434;
}

.compare-mode .wear-select-card.selected {
  border-color: #61aee7;
  box-shadow: 0 0 0 3px rgba(69,155,219,.18),0 0 28px rgba(58,145,210,.16);
}

.compare-mode .wear-select-card.selected .wear-check {
  background: #397fb4;
  border-color: #72bcec;
}

.compare-mode-actions {
  background: rgba(8,19,29,.97);
  border-top-color: #2d4c65;
}

.compare-mode .primary-button {
  background: #65aee0;
  color: #071522;
}

.compare-mode .primary-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.compare-results-grid {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  overflow: auto;
  padding: 4px 4px 120px;
}

.timeline-log-modal.open {
  display: grid;
}

.timeline-log-card {
  max-width: 650px;
}

.timeline-page-head {
  align-items: flex-end;
}

.timeline-delete {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(184,81,75,.42);
  background: rgba(184,81,75,.08);
  color: #e7aaa5;
  font-size: 18px;
  line-height: 1;
}

.timeline-delete:hover {
  background: rgba(184,81,75,.18);
}

.dashboard-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}


.dashboard-panel-heading .eyebrow {
  margin: 0 0 4px;
}

.dashboard-info:after {
  content: attr(data-dashboard-tip);
  position: absolute;
  z-index: 20;
  right: 0;
  top: 36px;
  width: min(340px,75vw);
  padding: 13px 14px;
  border: 1px solid #5b4931;
  border-radius: 11px;
  background: #100e0c;
  color: #d8cec2;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 18px 38px rgba(0,0,0,.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: .16s ease;
  pointer-events: none;
}

.dashboard-info:hover:after,.dashboard-info:focus:after,.dashboard-info.open:after {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hall-of-fame-watch>span {
  color: #d7b466;
  font-size: 11px;
  letter-spacing: .12em;
}

.hall-of-fame-watch b,.hall-of-fame-watch small {
  display: block;
}

.hall-of-fame-watch b {
  font-size: 14px;
}

.hall-of-fame-watch small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.panel-period {
  margin-left: 6px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rotation-status-head strong {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  border: 1px solid #4a3d2d;
  border-radius: 999px;
  color: #ddb96a;
  font-size: 11px;
}

.rotation-status-row p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.health-observations {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.health-observations p {
  display: grid;
  grid-template-columns: minmax(130px,180px) 1fr;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid #342c24;
  max-width: none!important;
}

.health-observations p:first-child {
  border-top: 0;
}

.health-observations em {
  color: #c9b89d;
  font-size: 12px;
}

.health-observations span {
  color: #d6cdc2;
}

.dashboard-card-highest>strong {
  width: 100%;
}

.dashboard-card-medals>strong {
  width: 100%;
}

.medals-combined .medal-item b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.hall-of-fame-panel {
  margin-bottom: 18px;
  background: linear-gradient(145deg,#1d1813,#13110f);
  border-color: #55452f;
  padding-top: 18px;
}

.hall-of-fame-heading {
  align-items: center;
  min-height: 16px;
}

.hall-of-fame-heading .eyebrow {
  margin: 0;
  font-size: 10px;
  line-height: 14px;
}

.hall-of-fame-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.hall-of-fame-watch {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #3a3127;
  border-radius: 12px;
  background: linear-gradient(135deg,#18140f,#12100e);
  min-height: 66px;
  box-sizing: border-box;
}

.dashboard-match-panel>.dashboard-panel-heading h2 {
  margin: 0;
}

.dashboard-match-panel .rank-row {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.rotation-status-row {
  border: 1px solid #302a25;
  border-radius: 11px;
  background: #12100e;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 11px 12px;
  box-sizing: border-box;
}

.rotation-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.rotation-status-head b {
  font-size: 13px;
}

.rotation-counter {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #4a3d2d;
  border-radius: 999px;
  background: #17130f;
  color: #ddb96a;
  font-size: 11px;
  font-weight: 800;
}

.rotation-counter-tooltip {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 9px);
  min-width: 260px;
  max-width: 330px;
  padding: 10px 12px;
  border: 1px solid #5b4931;
  border-radius: 9px;
  background: #100e0c;
  color: #d8cec2;
  font-size: 11px;
  font-weight: 450;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: .14s ease;
  pointer-events: none;
}

.rotation-counter-tooltip em {
  display: block;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #a99d91;
  font-style: normal;
  white-space: nowrap;
}

.rotation-tooltip-watches {
  display: grid;
  gap: 0;
  color: #e2d8cd;
}

.rotation-tooltip-watch {
  display: grid;
  gap: 1px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: normal;
}

.rotation-tooltip-watch:first-child {
  padding-top: 0;
}

.rotation-tooltip-watch:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.rotation-tooltip-watch b {
  color: #eee5da;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.rotation-tooltip-watch small {
  color: #a99d91;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.rotation-tooltip-watch i {
  color: #776d64;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
}

.rotation-tooltip-empty {
  display: block;
  color: #8e8379;
  white-space: nowrap;
}

.rotation-counter:hover .rotation-counter-tooltip,.rotation-counter:focus .rotation-counter-tooltip,.rotation-counter.open .rotation-counter-tooltip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

#collectionHealth>h2 {
  margin-top: 0;
}

#dashboardCards.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  grid-auto-rows: 112px;
  align-items: stretch;
}

#dashboardCards .dashboard-card {
  box-sizing: border-box;
  height: 100%!important;
  min-height: 0!important;
  padding: 18px 20px!important;
}

#dashboardCards .dashboard-card>span {
  min-height: 12px;
  display: flex;
  align-items: center;
}

.dashboard-card-highest {
  grid-column: 1/-1!important;
}

.dashboard-columns.dashboard-aligned-columns {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch!important;
  gap: 12px!important;
  margin-bottom: 18px;
}

.dashboard-columns.dashboard-aligned-columns .watch-of-month-panel {
  grid-column: 1 / span 2;
}

.dashboard-match-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 390px!important;
  min-height: 390px!important;
  padding: 22px!important;
}

.dashboard-match-panel>h2,.dashboard-match-panel>.dashboard-panel-heading {
  display: flex;
  padding: 0;
  height: 34px!important;
  min-height: 34px!important;
  margin: 0 0 14px!important;
  align-items: center!important;
}

.dashboard-match-panel .rank-list,.dashboard-match-panel .rotation-status-list {
  flex: 1;
  height: calc(100% - 48px);
  min-height: 0;
}

.dashboard-match-panel .rank-list {
  display: grid;
  gap: 9px;
  grid-template-rows: repeat(3,minmax(0,1fr))!important;
}

.rotation-status-list {
  display: grid;
  gap: 9px;
  grid-template-rows: repeat(5,minmax(0,1fr))!important;
}

.medals-combined {
  letter-spacing: 0!important;
  display: flex!important;
  align-items: center!important;
  justify-content: flex-start!important;
  gap: 28px!important;
  width: auto!important;
}

.dashboard-info {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border: 1px solid rgba(218,178,94,.58);
  border-radius: 50%;
  background: rgba(218,178,94,.055);
  color: #d9b76a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.34);
}

.dashboard-info > span {
  display: block;
  transform: translateY(-.25px);
  line-height: 1;
}

.dashboard-info:hover,.dashboard-info:focus-visible {
  color: #f0ca73;
  border-color: rgba(240,202,115,.82);
  background: rgba(218,178,94,.11);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 0 0 2px rgba(218,178,94,.06);
}

.hall-of-fame-heading .dashboard-info {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1;
}

.hall-of-fame-heading .dashboard-info:after {
  top: 24px;
}

.dashboard-card,
.dashboard-panel,
.timeline-panel,
.rank-row,
.watch-card,
.winder-card,
.wear-stats > div {
  transform: none;
}

.dashboard-card:hover,
.dashboard-panel:hover,
.timeline-panel:hover {
  transform: none !important;
  border-color: #2e2924 !important;
  box-shadow: none !important;
  filter: none !important;
}

.rank-row:hover {
  transform: none !important;
  border-color: #2d2823 !important;
  background: #12100f !important;
  box-shadow: none !important;
  filter: none !important;
}

.wear-stats > div:hover {
  transform: none !important;
  border-color: #302a25 !important;
  background: #1a1714 !important;
  box-shadow: none !important;
  filter: none !important;
}

.dashboard-card {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  min-height: 112px;
  padding: 20px;
  border-color: #2e2924;
  background: linear-gradient(180deg,#181512,#141210);
  overflow: visible;
}

.dashboard-metric-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  line-height: inherit;
  cursor: default;
}

.dashboard-card-quality>strong {
  width: 100%;
}

.quality-score-trigger {
  width: max-content;
}

.dashboard-metric-popover {
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 12px);
  display: grid;
  width: 310px;
  padding: 14px;
  border: 1px solid #554733;
  border-radius: 12px;
  background: #100e0c;
  color: #e6ded4;
  box-shadow: 0 18px 42px rgba(0,0,0,.48);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .15s ease,transform .15s ease,visibility .15s ease;
  text-align: left;
  pointer-events: none;
  white-space: normal;
}

.dashboard-metric-trigger:hover>.dashboard-metric-popover,.dashboard-metric-trigger:focus>.dashboard-metric-popover,.dashboard-metric-trigger.open>.dashboard-metric-popover {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.dashboard-metric-popover em {
  margin: 0 0 7px;
  color: #d8b86d;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-metric-popover em:not(:first-child) {
  margin-top: 0;
}

.dashboard-popover-divider {
  display: block;
  height: 1px;
  margin: 10px 0 11px;
  background: #352d25;
}

.dashboard-popover-row {
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0!important;
  color: #e4dcd2!important;
  font-size: 12px!important;
  font-weight: 400!important;
  letter-spacing: 0!important;
  text-transform: none!important;
}

.dashboard-popover-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.dashboard-popover-row i {
  flex: none;
  color: #c9bdaF;
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.dashboard-popover-empty {
  color: var(--muted)!important;
  font-size: 12px!important;
  letter-spacing: 0!important;
  text-transform: none!important;
}

.dashboard-metric-popover small {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #352d25;
  color: #9f958b;
  font-size: 10px;
  line-height: 1.45;
}

.medals-combined .medal-item {
  min-width: 0;
  font-size: 16px!important;
  letter-spacing: 0!important;
  text-transform: none!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: flex-start!important;
  gap: 6px!important;
  flex: 0 0 auto!important;
  position: relative;
  border: 0;
  background: transparent;
  padding: 8px 5px;
  margin: -8px -5px;
  color: inherit;
  cursor: default;
}

.medals-combined .medal-item:nth-child(2) .dashboard-metric-popover {
  left: 50%;
  transform: translate(-50%,-5px);
}

.medals-combined .medal-item:nth-child(2):hover .dashboard-metric-popover,.medals-combined .medal-item:nth-child(2):focus .dashboard-metric-popover,.medals-combined .medal-item:nth-child(2).open .dashboard-metric-popover {
  transform: translate(-50%,0);
}

.medals-combined .medal-item:last-child .dashboard-metric-popover {
  left: auto;
  right: 0;
}

.medal-watch-popover {
  width: 270px;
}

.highest-rated-placeholder {
  display: grid!important;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid #3a3128;
  border-radius: 50%;
  background: #161310;
  color: #8f8171!important;
  font-size: 24px!important;
  letter-spacing: 0!important;
}

.dashboard-watch-link {
  cursor: pointer;
}

.dashboard-card.dashboard-watch-link {
  transition: border-color .16s ease,background .16s ease;
}

.dashboard-card.dashboard-watch-link:hover,.dashboard-card.dashboard-watch-link:focus-visible {
  border-color: #6d5738;
  background: #1a1612;
  outline: none;
}

.hall-of-fame-watch.dashboard-watch-link,.rank-row.dashboard-watch-link {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease,background .16s ease,transform .16s ease;
}

.hall-of-fame-watch.dashboard-watch-link:hover,.hall-of-fame-watch.dashboard-watch-link:focus-visible,
.rank-row.dashboard-watch-link:hover,.rank-row.dashboard-watch-link:focus-visible {
  border-color: #6d5738;
  background: #18140f;
  transform: none;
  outline: none;
}

.hall-of-fame-watch-copy,.rank-watch-copy {
  display: block;
  min-width: 0;
}

.hall-of-fame-watch-copy b,.hall-of-fame-watch-copy small,.rank-watch-copy b,.rank-watch-copy span {
  display: block;
}

.highest-rated-name {
  font-size: inherit!important;
  font-weight: inherit!important;
  letter-spacing: inherit!important;
  text-transform: none!important;
  color: inherit!important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal!important;
}

.highest-rated-inline {
  font-size: inherit!important;
  font-weight: inherit!important;
  letter-spacing: inherit!important;
  text-transform: none!important;
  color: inherit!important;
  justify-content: space-between;
  min-width: 0;
  display: grid!important;
  gap: 20px;
  width: 100%;
  grid-template-columns: minmax(0,1fr) 122px auto!important;
  align-items: center!important;
  column-gap: 28px!important;
  min-height: 94px!important;
}

.highest-rated-image {
  letter-spacing: 0!important;
  padding: 4px;
  place-items: center;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  overflow: hidden!important;
  box-sizing: border-box!important;
  align-self: center!important;
  justify-self: center!important;
  width: 122px!important;
  height: 84px!important;
  margin: 0!important;
}

.highest-rated-image img {
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.34));
  display: block!important;
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
  max-height: 100%!important;
  object-fit: contain!important;
  object-position: center center!important;
  margin: auto!important;
  flex: 0 0 auto;
  transform: scale(.97)!important;
  transform-origin: center center!important;
}

.highest-rated-inline .score-heat {
  flex: 0 0 auto;
  min-width: 70px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  margin-left: 0;
  align-self: center!important;
  justify-self: end!important;
  margin: 0!important;
}

#dashboardCards .dashboard-card-highest {
  position: relative!important;
  justify-content: center!important;
}

#dashboardCards .dashboard-card-highest>strong {
  display: flex!important;
  align-items: center!important;
  width: 100%!important;
  height: 100%!important;
  min-height: 0!important;
}

#dashboardCards .dashboard-card-highest .highest-rated-inline {
  align-self: center!important;
  width: 100%!important;
  margin: 0!important;
}

#dashboardCards .dashboard-card-highest>span {
  position: absolute!important;
  left: 20px!important;
  bottom: 15px!important;
  margin: 0!important;
}



.wear-hero:hover {
  box-shadow: 0 0 0 1px rgba(191,163,105,.24),0 0 24px rgba(191,163,105,.22),0 28px 60px rgba(14,66,38,.26),inset 0 1px rgba(255,255,255,.15)!important;
  transform: none;
  filter: none;
}

.wear-hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.16);
  font-size: 27px;
}

.wear-hero strong,.wear-hero small {
  display: block;
}

.wear-hero strong {
  font-size: 24px;
}

.wear-hero small {
  margin-top: 5px;
  color: rgba(255,255,255,.75);
}

.wear-hero-arrow {
  margin-left: auto;
  font-size: 30px;
}

.section-nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 10px;
}

.section-nav button:hover {
  background: #2a241f;
  color: var(--text);
}

.section-heading>div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.section-heading p {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.section-heading>span {
  color: var(--muted);
  font-size: 12px;
}

.watchbox-frame {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid #805b43;
  border-radius: 30px;
  background: linear-gradient(90deg,rgba(255,255,255,.025),transparent 12%,transparent 88%,rgba(0,0,0,.08)),linear-gradient(160deg,#694832,#4b2d20 54%,#342016);
  box-shadow: var(--shadow),inset 0 1px rgba(255,255,255,.08),inset 0 -35px 52px rgba(0,0,0,.28);
}

.watch-placeholder {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 32%,#3a3734,#141313 72%);
  border: 8px solid #514b46;
  color: #777;
  font-size: 32px;
  box-shadow: 0 15px 28px rgba(0,0,0,.4);
}

.drawer-panel {
  padding: 30px;
  border: 1px solid #28282a;
  background: radial-gradient(circle at 15% 0,rgba(255,255,255,.025),transparent 30%),linear-gradient(180deg,#111113,#080809);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.drawer-panel .watch-card,.incoming-grid .watch-card {
  background: radial-gradient(circle at 50% 10%,rgba(255,255,255,.04),transparent 38%),linear-gradient(160deg,#252321,#151413);
}

.drawer-empty-tile {
  pointer-events: auto;
  border-style: dashed!important;
  border-color: rgba(255,255,255,.08)!important;
  background: linear-gradient(160deg,rgba(37,35,33,.42),rgba(21,20,19,.38))!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015)!important;
}

.drawer-empty-tile:hover {
  transform: none;
  filter: none;
}

.winder-card:hover {
  filter: none !important;
  box-shadow: inherit !important;
  transform: none;
}

.winder-card .watch-card {
  width: 100%;
  max-width: 260px;
  margin: auto;
  background: radial-gradient(circle at 50% 20%,#303033,#080808 72%);
  border: 9px solid #171717;
  box-shadow: inset 0 0 28px rgba(255,255,255,.04),0 20px 34px rgba(0,0,0,.38);
}

.winder-card .watch-card-footer {
  background: #171717;
  border-top-color: #292929;
}

.winder-card .watch-title {
  color: #f1e9df;
}

.incoming-grid .watch-card {
  opacity: .93;
}

.incoming-grid .watch-card:before {
  content: "Incoming";
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 11px;
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.empty-state {
  position: relative;
  font-weight: 450;
  grid-column: 1/-1;
  padding: 50px;
  border: 1px dashed #4c433b;
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

@media(max-width:1200px) {
  .watch-grid,.uniform-grid {
    grid-template-columns: repeat(3,1fr);
  }
}

.section-nav .section-nav-actions button {
  height: 42px;
  padding: 0 16px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transform: none!important;
}

.section-nav .section-compare {
  border: 1px solid #496d91;
  background: #294c70;
  color: #eef7ff;
}

.section-nav .section-compare:hover {
  background: #37658f;
  color: #fff;
  transform: none!important;
}

.section-nav .section-add {
  background: var(--gold);
  color: #17110b;
  font-weight: 900;
  margin-left: 0;
}

.compare-ai-analysis[hidden] {
  display: none!important;
}

.compare-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(147,185,219,.18);
}

.compare-ai-head h2 {
  margin: 3px 0 4px;
  font-size: 26px;
  color: #e6edf4;
}

.compare-ai-head span {
  font-size: 12px;
  color: #9db0c1;
}

.compare-ai-head>strong {
  font-size: 28px;
  color: #d6e8f7;
  font-variant-numeric: tabular-nums;
}

.compare-ai-copy strong {
  color: #f0f5f9;
}

.compare-ai-bottom {
  padding-top: 12px;
  border-top: 1px solid rgba(147,185,219,.14);
}


.compare-content-shell>.wear-selection-grid {
  margin: 0 auto;
}

.wear-mode.results-mode .compare-content-shell {
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap: 18px;
  align-items: start;
  overflow: hidden;
  padding: 0 4px 96px;
}

.wear-mode.results-mode .wear-selection-grid {
  display: block;
  overflow: auto;
  padding: 0;
  max-width: none;
  height: 100%;
}

.wear-mode.results-mode .compare-ai-analysis {
  margin: 0;
  max-width: none;
  height: 100%;
  max-height: calc(100vh - 190px);
  overflow: auto;
  position: sticky;
  top: 0;
}

.compare-matrix {
  display: grid;
  grid-template-columns: 118px repeat(var(--compare-count),minmax(128px,1fr));
  min-width: calc(118px + var(--compare-count)*128px);
  border: 1px solid rgba(112,137,160,.32);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10,18,25,.78);
}

.compare-matrix>* {
  min-width: 0;
  border-right: 1px solid rgba(147,185,219,.11);
  border-bottom: 1px solid rgba(147,185,219,.11);
}

.compare-matrix>*:nth-child(calc(var(--compare-count) + 1n)) {
}

.compare-matrix-corner,.compare-matrix-label {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  color: #9db0c1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(10,17,23,.72);
}

.compare-matrix-watch {
  padding: 10px 8px 12px;
  text-align: center;
  background: linear-gradient(180deg,rgba(23,37,49,.95),rgba(13,23,31,.95));
}

.compare-matrix-image {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
}

.compare-matrix-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.4));
}

.compare-matrix-image span {
  font-size: 34px;
}

.compare-matrix-watch>strong {
  display: block;
  color: #eef3f7;
  font-size: 12px;
  line-height: 1.25;
}

.compare-matrix-watch>span {
  display: block;
  margin-top: 4px;
  color: #8fa0ae;
  font-size: 10px;
}

.compare-matrix-value {
  min-height: 42px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(14,23,31,.72);
}

.compare-matrix-value strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #dfe8ef;
}

.compare-matrix-value em {
  font-style: normal;
  font-size: 7px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e2be72;
}

.compare-matrix-value.metric-winner {
  background: linear-gradient(90deg,rgba(177,131,45,.13),rgba(177,131,45,.04));
  box-shadow: inset 0 0 0 1px rgba(218,178,94,.18);
}

.compare-matrix-divider {
  grid-column: 1/-1;
  height: 8px;
  background: #081018;
  border-right: 0;
}

.compare-matrix .wear-label {
  color: #8395a4;
}

.compare-matrix .wear-value strong {
  font-size: 12px;
}

.compare-ai-analysis {
  margin: 22px auto 4px;
  max-width: 1116px;
  border: 1px solid rgba(93,139,183,.48);
  background: linear-gradient(145deg,rgba(20,38,55,.97),rgba(12,23,34,.98));
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  padding: 18px;
}

.compare-ai-analysis>.eyebrow {
  color: #e2be72;
  margin-bottom: 12px;
}

.compare-ai-winner-image>span {
  font-size: 46px;
}

.compare-ai-winner-image b {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(231,197,126,.45);
  border-radius: 999px;
  background: rgba(19,14,8,.86);
  color: #e2be72;
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.compare-ai-winner-meta h2 {
  margin: 0;
  color: #edf3f7;
  font-size: 20px;
  line-height: 1.15;
}

.compare-ai-winner-meta>span {
  display: block;
  margin-top: 4px;
  color: #91a3b2;
  font-size: 11px;
}

.compare-ai-copy {
  display: grid;
  gap: 10px;
}

.compare-method-card {
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid rgba(218,178,94,.22);
  border-radius: 14px;
  background: rgba(218,178,94,.055);
}

.compare-method-card>.eyebrow {
  margin-bottom: 8px;
  color: #e2be72;
}

.compare-method-card>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(218,178,94,.10);
}

.compare-method-card>div:first-of-type {
  border-top: 0;
}

.compare-method-card span {
  color: #d8b66c;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.compare-method-card strong {
  color: #d8e2ea;
  font-size: 11px;
  text-align: right;
  font-weight: 650;
}

.compare-tier-stack {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.compare-tier-block {
  border: 1px solid rgba(147,185,219,.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8,15,21,.36);
}

.compare-tier-block>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
}

.compare-tier-block>header div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.compare-tier-block>header b {
  font-size: 12px;
  color: #eef3f7;
}

.compare-tier-block>header span {
  font-size: 9px;
  color: #8497a7;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.compare-tier-block>header>strong {
  font-size: 16px;
  color: #e2be72;
  font-variant-numeric: tabular-nums;
}

.compare-tier-row {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid rgba(147,185,219,.09);
}

.compare-tier-row>span {
  display: flex;
  flex-direction: column;
  color: #dce5ec;
  font-size: 11px;
  font-weight: 700;
}

.compare-tier-row small {
  margin-top: 2px;
  color: #7f92a2;
  font-size: 8px;
  font-weight: 600;
}

.compare-tier-row>strong {
  font-size: 10px;
  color: #eef3f7;
  white-space: nowrap;
}

.compare-tier-row>em {
  font-style: normal;
  font-size: 9px;
  color: #a9bac7;
  white-space: nowrap;
}

.compare-tier-block>footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid rgba(147,185,219,.09);
  background: rgba(255,255,255,.018);
}

.compare-tier-block>footer span {
  font-size: 9px;
  color: #7f92a2;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.compare-tier-block>footer b {
  font-size: 10px;
  color: #dce5ec;
}

.compare-tier-block.tier-1 {
  border-color: rgba(218,178,94,.32);
  box-shadow: inset 3px 0 0 rgba(218,178,94,.7);
}

.compare-tier-block.tier-2 {
  box-shadow: inset 3px 0 0 rgba(142,169,191,.42);
}

.compare-tier-block.tier-3 {
  opacity: .88;
  box-shadow: inset 3px 0 0 rgba(108,125,140,.26);
}

.compare-tier-stack,.compare-tier-block,.compare-method-card {
  display: none!important;
}

.analysis-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analysis-heading>.eyebrow {
  margin: 0;
}

.info-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(218,178,94,.45);
  background: rgba(218,178,94,.08);
  color: #e2be72;
  font-size: 11px;
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.info-dot:hover {
  background: rgba(218,178,94,.16);
}

.compare-methodology {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
  padding: 9px 11px;
  border-top: 1px solid rgba(218,178,94,.14);
  border-bottom: 1px solid rgba(218,178,94,.14);
}

.compare-methodology>span {
  color: #8798a6;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  margin-right: auto;
}

.method-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #d7e0e7;
  font-size: 10px;
  font-weight: 700;
}

.method-item>.info-dot {
  width: 17px;
  height: 17px;
  font-size: 9px;
}

.method-popover,.driver-popover {
  display: none;
  position: absolute;
  z-index: 80;
  border: 1px solid rgba(218,178,94,.28);
  background: #111920;
  box-shadow: 0 18px 45px rgba(0,0,0,.5);
  border-radius: 12px;
}

.method-popover.open,.driver-popover.open {
  display: block;
}

.method-popover {
  top: 27px;
  right: 0;
  width: 250px;
  padding: 12px;
}

.method-popover>b {
  display: block;
  color: #e5c77e;
  margin-bottom: 8px;
  font-size: 12px;
}

.method-popover>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(147,185,219,.10);
  font-size: 9px;
}

.method-popover>div span {
  color: #dce5ec;
}

.method-popover>div strong {
  color: #91a3b1;
  text-align: right;
  font-weight: 650;
}

.method-popover>p {
  margin: 8px 0 0;
  color: #91a3b1;
  font-size: 9px;
  line-height: 1.45;
}

.driver-info-wrap {
  position: relative;
}

.driver-popover header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.driver-close {
  border: 0;
  background: transparent;
  color: #8fa1af;
  font-size: 18px;
  padding: 0;
}

.driver-row span {
  color: #dce5ec;
}

.driver-row strong {
  color: #e2be72;
}

.driver-row>i:after {
  content: "";
  display: block;
  width: var(--driver-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#a98543,#e2be72);
}

.driver-popover>p,.driver-empty {
  margin: 11px 0 0;
  color: #8194a3;
  font-size: 9px;
  line-height: 1.45;
}

.compare-ai-winner-image>b {
  background: #d9b665;
  color: #17120b;
}

.compare-ai-copy p {
  max-width: 940px;
  color: #ced9e2;
  font-size: 12px;
  line-height: 1.58;
  margin: 0 0 11px;
}

.compare-ai-copy p:last-child {
  margin-bottom: 0;
}

.compare-ai-winner {
  border-bottom: 1px solid rgba(147,185,219,.16);
  display: grid;
  grid-template-columns: minmax(92px,34%) 1fr;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.compare-ai-winner-image {
  position: relative;
  border: 2px solid #c8a45d;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%,rgba(201,164,93,.12),rgba(7,14,20,.78) 62%);
  box-shadow: 0 0 0 1px rgba(232,197,123,.12),0 0 28px rgba(190,145,62,.14),inset 0 0 28px rgba(217,176,91,.06);
  overflow: hidden;
  height: 118px;
  border-width: 2px;
}

.compare-ai-winner-image img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.48));
  max-width: 84%;
  max-height: 84%;
}

.compare-ai-winner-meta {
  position: relative;
  padding-top: 12px;
  padding-right: 72px;
  padding: 0;
}

.compare-ai-winner-meta>strong {
  position: absolute;
  right: 0;
  top: 10px;
  color: #e7c77f;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  display: none;
}

.compare-ai-winner-meta>small {
  display: block;
  font-size: 10px;
  margin-top: 9px;
  color: #b5c2cc;
  letter-spacing: .02em;
}

.driver-info {
  width: 22px;
  height: 22px;
  font-size: 15px;
  line-height: 1;
}

.driver-popover {
  top: 29px;
  right: 0;
  width: min(370px,86vw);
  padding: 15px;
}

.driver-popover header b {
  color: #eef3f7;
  font-size: 13px;
  letter-spacing: .01em;
}

.driver-row {
  display: block;
  width: 100%;
  margin: 11px 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
  transform: none;
  position: relative;
}

.driver-row:hover,.driver-row:focus {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.driver-row>div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  margin-bottom: 5px;
}

.driver-row>div span {
  font-weight: 700;
}

.driver-row>i {
  display: block;
  width: 100%;
  border-radius: 999px;
  background: rgba(147,185,219,.10);
  overflow: hidden;
  position: relative;
  height: 7px;
}

.driver-row>em {
  display: none;
  margin-top: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(218,178,94,.18);
  border-radius: 8px;
  background: rgba(5,10,14,.78);
  color: #b8c5cf;
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
}

.driver-row:hover>em,.driver-row:focus>em,.driver-row.show-question>em {
  display: block;
}

@media(max-width:1050px) {
  .wear-mode.results-mode .compare-content-shell {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .wear-mode.results-mode .compare-ai-analysis {
    position: static;
    max-height: none;
  }
  .wear-mode.results-mode .wear-selection-grid {
    height: auto;
    overflow: visible;
  }
  .compare-ai-winner-meta {
    padding-top: 4px;
  }
  .compare-ai-winner {
    display: grid;
    gap: 14px;
    grid-template-columns: 130px 1fr;
  }
  .compare-ai-winner-image {
    height: 108px;
  }
}

@media(max-width:650px) {
  .wear-mode.results-mode .compare-content-shell {
    padding-bottom: 130px;
  }
  .compare-ai-winner {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 13px;
  }
  .compare-ai-winner-image {
    height: 96px;
  }
  .compare-ai-winner-meta h2 {
    font-size: 17px;
  }
}

.section-nav .room-nav-button,
.section-nav .section-compare,
.section-nav .section-add {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 10px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.section-nav .incoming-nav-button:hover {
  background: linear-gradient(135deg,#917542,#6b522e 50%,#40301b);
  color: #fff9eb;
}

.wear-hero {
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 15% 15%,rgba(255,255,255,.14),transparent 34%),linear-gradient(145deg,var(--green2),#1e5a39);
  color: #fff;
  border-radius: 26px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 28px 60px rgba(14,66,38,.26),inset 0 1px rgba(255,255,255,.15);
  text-align: left;
  transition: .2s;
  width: 100%;
  box-sizing: border-box;
}

.section-nav-actions {
  margin-left: auto;
  align-items: center;
  gap: 10px;
  display: none!important;
}

.hero-action-row .section-compare:hover {
  background: linear-gradient(180deg,#4476a3,#315b84);
  color: #fff;
  filter: none;
}

.hero-action-row .section-add:hover {
  background: linear-gradient(180deg,#e1c77f,#c8a258);
  filter: brightness(1.02);
}


@media(max-width:950px) and (min-width:621px) {

  .wear-primary-row {
    width: 310px!important;
    min-width: 310px!important;
  }
}

@media (min-width:621px) {
  .watch-grid,.uniform-grid {
    grid-template-columns: repeat(6,minmax(0,1fr))!important;
    gap: 12px;
  }
  .watch-card {
    min-width: 0;
  }
  .watch-card-footer {
    padding-left: 8px;
    padding-right: 8px;
  }
  .watch-title {
    font-size: clamp(9px,.88vw,12px);
  }
  .watch-grid>.watch-card,
  .uniform-grid>.watch-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 3/4;
    align-self: start;
    box-sizing: border-box;
  }
  .drawer-empty-tile {
    width: 100%!important;
    min-width: 0!important;
    min-height: 0!important;
    height: auto!important;
    aspect-ratio: 3/4!important;
    align-self: start!important;
  }
}


.watch-grid>.watch-card,.uniform-grid>.watch-card {
  width: 100%!important;
  min-width: 0!important;
  min-height: 0!important;
  height: auto!important;
  aspect-ratio: 3/4!important;
  align-self: start!important;
  box-sizing: border-box!important;
}

.room-empty-slot:hover {
  transform: none!important;
  filter: none!important;
}

.incoming-grid .room-empty-slot:before {
  content: none!important;
  display: none!important;
}

.winders-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  align-items: start;
}

.winder-card {
  border-radius: 25px;
  padding: 16px;
  background: linear-gradient(145deg,#ed8432,#d56b1c 56%,#a94a10);
  box-shadow: var(--shadow),inset 0 1px rgba(255,255,255,.22);
  transition: .2s;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.winder-card>.watch-card {
  aspect-ratio: 3/4!important;
  min-height: 0!important;
  height: auto!important;
}

.winder-empty-slot:hover {
  transform: none!important;
}

.winder-empty-slot>.room-empty-slot {
  width: 100%;
  max-width: 260px;
  margin: auto;
  border-width: 1px!important;
}

@media(max-width:900px) and (min-width:621px) {

  .wear-primary-row {
    grid-column: 2;
    grid-row: 1;
    width: 250px;
  }
  .watchbox-frame,.drawer-panel {
    padding: 12px;
  }
  .watch-card {
    min-height: 230px;
  }
  .watch-image {
    padding: 8px 6px 5px;
  }
  .watch-card-footer {
    flex-basis: 62px;
    padding: 7px 5px;
  }
  .watch-title {
    font-size: 9px;
  }
  .watch-score strong {
    font-size: 15px;
  }
  .watch-grid,.uniform-grid {
    gap: 8px;
    grid-template-columns: repeat(6,minmax(0,1fr))!important;
  }
  .winders-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 12px;
  }
}

.watch-card:hover,
.winder-card:hover {
  transform: none !important;
  filter: none !important;
}

.room-slot>.watch-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


.room-dragging {
  opacity: .32!important;
  filter: saturate(.65)!important;
}

.watchbox-frame .room-empty-slot {
  background: rgba(36,21,15,.22);
  border-color: rgba(255,255,255,.07);
}

.winder-empty-slot {
  pointer-events: none!important;
  opacity: .62;
  min-height: 330px;
  border: 10px solid #2a170e;
  background: linear-gradient(145deg,#ff9d45,#b64d14);
  box-shadow: inset 0 1px rgba(255,255,255,.18),0 18px 35px rgba(0,0,0,.28);
}

.room-drop-active {
  border-color: #d7b466!important;
  background-color: rgba(215,180,102,.08)!important;
  box-shadow: 0 0 0 2px rgba(215,180,102,.22),0 14px 28px rgba(0,0,0,.22)!important;
}

.room-drop-blocked {
  border-color: #9b493f!important;
  background-color: rgba(155,73,63,.08)!important;
}

.room-drag-active .room-slot {
  transition: border-color .14s ease,background .14s ease,box-shadow .14s ease;
}

.room-lock-button:hover {
  transform: none;
  background: rgba(215,180,102,.14);
  border-color: rgba(215,180,102,.55);
}

.room-lock-button.locked {
  background: rgba(215,180,102,.18);
  border-color: rgba(215,180,102,.72);
  box-shadow: inset 0 0 0 1px rgba(215,180,102,.12);
}

.room-locked-card {
  cursor: default!important;
}

.room-drop-swap {
  border-color: #7ca9d4!important;
  background-color: rgba(90,145,196,.1)!important;
  box-shadow: 0 0 0 2px rgba(90,145,196,.28),0 14px 28px rgba(0,0,0,.22)!important;
}

.room-drop-swap:after {
  content: 'Swap';
  position: absolute;
  z-index: 6;
  inset: 10px 10px auto auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #17324a;
  color: #acd2f5;
  border: 1px solid rgba(172,210,245,.35);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.room-location-highlight {
  animation: roomLocationHighlight 1.8s ease;
}

@keyframes roomLocationHighlight { 0%,100%{box-shadow:none}20%,70%{box-shadow:0 0 0 3px rgba(215,180,102,.75),0 0 28px rgba(215,180,102,.3)} }

.room-slot.room-empty-slot[data-room-drop],
.drawer-empty-tile[data-room-drop],
.watchbox-frame .room-slot.room-empty-slot[data-room-drop],
.incoming-grid .room-slot.room-empty-slot[data-room-drop],
.winder-empty-slot[data-room-drop] {
  pointer-events: auto!important;
}

.room-slot.room-empty-slot[data-room-drop] > * {
  pointer-events: none;
}

.watch-reference-nickname {
  margin-top: 4px;
  color: #a8a8a8;
  font-size: 11px;
  font-weight: 500;
}

.watch-dial {
  color: #f3f0ea;
  font-size: 11px;
  font-weight: 500;
}

.watch-size {
  color: #8b8b8b;
  font-size: 11px;
  font-weight: 500;
}

.watch-meta:before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 1px;
  background: rgba(213,183,121,.12);
}

.library-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.library-head h1 {
  font-size: 56px;
  margin: 0;
  letter-spacing: -.05em;
}

.library-head>div>p:last-child {
  color: var(--muted);
}

.library-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.library-tools input {
  min-width: 230px;
}

.library-tools select {
  width: auto;
  min-width: 165px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1220px;
}

th,td {
  border-bottom-color: rgba(255,255,255,.055);
  padding: 13px 14px;
  border-bottom: 1px solid #2c2723;
  text-align: left;
}

#libraryTable th:nth-child(n+3),#libraryTable td:nth-child(n+3) {
  text-align: center;
}

#libraryTable th:nth-child(n+3):nth-child(-n+9) {
  white-space: nowrap;
  min-width: 112px;
}

#libraryTable th:nth-child(6) {
  min-width: 124px;
}

#libraryTable th:nth-child(7) {
  min-width: 142px;
}

#libraryTable th:nth-child(8) {
  min-width: 106px;
}

th {
  position: sticky;
  top: 0;
  background: #1d1916;
  color: #dcd2c6;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 2;
}

th:hover {
  color: var(--gold);
}

td {
  font-size: 13px;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover td {
  background: rgba(255,255,255,.02);
}

td.numeric {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.watch-cell strong,.watch-cell span {
  display: block;
}

.watch-cell span {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.gen-label {
  color: #83bd91;
  font-weight: 900;
}

.help-icon {
  font-family: Inter,Segoe UI,Arial,sans-serif;
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid #746552;
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.help-icon:hover {
  background: var(--gold);
  color: #17110b;
}

.th-sub {
  font-size: 9px;
  color: #9c9185;
  letter-spacing: .02em;
  text-transform: none;
}

.score-heat {
  border-color: #38332f;
  border: 1px solid #3c3834;
  border-radius: 7px;
  padding: 4px 7px;
  display: inline-block;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: #24211f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.18);
}

.score-gold-high {
  color: #d4af37;
  font-weight: 800;
}

.score-silver-high {
  color: #cfcfcf;
  font-weight: 700;
}

.score-silver {
  color: #cfcfcf;
  font-weight: 600;
}

.score-blue {
  color: #2f6fff;
  font-weight: 400;
}

.score-lightblue {
  color: #78c8ff;
  font-weight: 400;
}

.score-red {
  color: #ff3030;
  font-weight: 400;
}

.score-low {
  color: #988d82;
  font-weight: 400;
}

.medal-filter-note {
  color: var(--muted);
}

#libraryTable th[data-sort]:hover::after {
  opacity: .7;
}

#libraryTable th[data-sort].sort-active {
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#libraryTable th[data-sort].sort-active::after {
  opacity: 1;
  color: var(--gold);
}

#libraryTable th[data-sort].sort-desc::after {
  transform: translateY(-50%) rotate(0deg);
  content: '▼';
}

#libraryTable th[data-sort].sort-asc::after {
  transform: translateY(-50%) rotate(0deg);
  content: '▲';
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.dashboard-card,.dashboard-panel,.timeline-panel {
  border: 1px solid #312b26;
  background: #171411;
  border-radius: 18px;
  padding: 18px;
}

.dashboard-card span {
  font-weight: 550;
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.dashboard-card strong {
  margin: 0 0 8px;
  line-height: 1.08;
  font-weight: 700;
  overflow: visible;
  display: block;
  margin-top: 8px;
  font-size: 30px;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dashboard-panel h2 {
  margin-top: 0;
}

.rank-list {
  display: grid;
  gap: 9px;
}

.rank-row {
  border-color: #2d2823;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #302a25;
  border-radius: 10px;
  background: #12100e;
}

.rank-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.compare-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.compare-chip:hover {
  border-color: #786650;
  transform: none;
}

.compare-chip.selected {
  background: var(--gold);
  color: #17110b;
  font-weight: 900;
  border-color: #e2bd6b;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,360px));
  gap: 18px;
  align-items: start;
}

.compare-card {
  border: 1px solid #3a322b;
  background: linear-gradient(160deg,#1b1714,#12100e);
  border-radius: 20px;
  padding: 14px;
  min-width: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}

.compare-card-head {
  padding: 2px 2px 0;
}

.compare-card-head>span {
  color: var(--muted);
  font-size: 12px;
}

.compare-placeholder {
  font-size: 52px;
}

.compare-metrics {
  margin-top: 15px;
  display: grid;
  gap: 0;
}

.compare-metrics>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #2b2622;
  padding: 8px 2px;
}

.compare-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.compare-metrics strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}

.compare-metrics em {
  font-style: normal;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e5bd65;
}

.compare-metric-row.metric-winner {
  background: linear-gradient(90deg,transparent,rgba(213,172,85,.055));
  border-bottom-color: #4a3d2d;
}

.compare-insight {
  margin-top: 22px;
  max-width: 1116px;
  border: 1px solid #4a3d2d;
  background: linear-gradient(145deg,#1d1813,#12100e);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.compare-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #332b24;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.compare-insight-head span {
  color: var(--muted);
  font-size: 12px;
}

.compare-insight p {
  margin: 0;
  color: #ddd3c8;
  font-size: 15px;
  line-height: 1.75;
  max-width: 900px;
}

.compare-insight-empty {
  color: var(--muted);
}

.timeline-entry {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid #2d2824;
}

.timeline-entry:last-child {
  border-bottom: 0;
}

.timeline-entry time {
  color: var(--gold);
  font-weight: 800;
}

.timeline-entry p {
  margin: 0;
  color: #d6cdc2;
}

@media(max-width:950px) {
  #dashboardCards.dashboard-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .hall-of-fame-list {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .wear-primary-row .wear-hero {
    width: 250px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
  .compare-grid {
    grid-template-columns: repeat(2,minmax(220px,1fr));
  }
}

.collection-health {
  margin-top: 18px;
  border: 1px solid #4a3d2d;
  background: linear-gradient(145deg,#1d1813,#12100e);
  border-radius: 18px;
  padding: 20px 22px;
}

.collection-health h2 {
  margin: 2px 0 8px;
}

.collection-health p {
  margin: 0;
  color: #d6cdc2;
  line-height: 1.65;
  max-width: 920px;
}

.medal-count {
  display: flex!important;
  align-items: center;
  gap: 8px;
}

.compare-card h3 {
  margin: 11px 0 3px;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.rank-row b {
  display: flex;
  align-items: center;
}

.dashboard-card .score-heat {
  font-size: 19px;
  min-width: 70px;
}

#libraryTable th:nth-child(n+3):nth-child(-n+9),
#libraryTable td:nth-child(n+3):nth-child(-n+9) {
  width: 76px;
  min-width: 76px;
  white-space: nowrap;
}

.watch-cell>span {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.medal {
  place-items: center;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.16),inset 0 1px 1px rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.38);
}

/* Was previously only in the orphaned, unloaded css/app.css (see MERGE_REPORT.txt) --
   restored here since medalHTML() now always sets a native title tooltip on this element,
   and the help cursor is what signals that a tooltip exists. */
#libraryTable tbody .medal {
  cursor: help;
}

.medal::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.20);
}

.medal::after {
  transform: translateY(-.2px);
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
}

.medal-gold {
  color: #3d2700;
  background: radial-gradient(circle at 34% 28%,#ffe7a0 0 9%,#d4aa40 35%,#9c6817 74%,#5c3708 100%);
  border-color: #efd073;
}

.medal-silver {
  color: #33373b;
  background: radial-gradient(circle at 34% 28%,#fff 0 9%,#d9dade 35%,#92979d 74%,#545a60 100%);
  border-color: #ededed;
}

.medal-bronze {
  color: #321607;
  background: radial-gradient(circle at 34% 28%,#f3bf89 0 9%,#b9703c 35%,#74401f 74%,#42210e 100%);
  border-color: #dfa06b;
}

.medal-inline {
  margin-left: 7px;
  vertical-align: middle;
}

.score-perfect {
  color: #d4af37;
  font-weight: 900;
  border-color: #d4af37!important;
  background: linear-gradient(180deg,#2b2418,#211b11)!important;
  box-shadow: inset 0 0 0 1px rgba(255,224,145,.22),0 0 8px rgba(212,175,55,.76),0 0 17px rgba(212,175,55,.30)!important;
  text-shadow: 0 0 8px rgba(212,175,55,.56);
}

#libraryTable th:nth-child(n+4):nth-child(-n+9),
#libraryTable td:nth-child(n+4):nth-child(-n+9) {
  width: 70px;
  min-width: 70px;
}

#libraryTable th:nth-child(10),#libraryTable td:nth-child(10) {
  width: 72px;
}

#libraryTable th:nth-child(11),#libraryTable td:nth-child(11),
#libraryTable th:nth-child(12),#libraryTable td:nth-child(12),
#libraryTable th:nth-child(13),#libraryTable td:nth-child(13) {
  width: 67px;
}

#libraryTable th:nth-child(14),#libraryTable td:nth-child(14) {
  width: 88px;
}

.watch-cell {
  overflow: hidden;
  width: 205px;
  max-width: 205px;
}

.watch-name-line {
  display: flex!important;
  align-items: center;
  gap: 7px;
  min-width: 0;
  line-height: 1.22;
  white-space: nowrap;
  font-size: 12px;
  overflow: visible;
}

.watch-name-text {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.overall-cell {
  font-variant-numeric: tabular-nums;
}

.overall-value {
  display: inline-block;
  min-width: 34px;
  color: #f7f7f7;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  border: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
}

.overall-gold {
  color: #f7f7f7;
  font-weight: 900;
}

.overall-silver {
  color: #d7d7d7;
  font-weight: 700;
}

.overall-bronze {
  color: #b7b7b7;
  font-weight: 600;
}

.overall-standard {
  color: #979797;
  font-weight: 400;
}

#libraryTable th:nth-child(n+4):nth-child(-n+9) {
  white-space: nowrap;
  overflow: visible;
  font-size: 10px;
  letter-spacing: .035em;
}

#libraryTable th:nth-child(n+4):nth-child(-n+9) .compact-header-label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 17px;
}

#libraryTable th:nth-child(n+4):nth-child(-n+9) .compact-header-label::after {
  content: attr(data-full-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  transform: translate(-50%,4px) scale(.98);
  padding: 6px 9px;
  border: 1px solid #4a4037;
  border-radius: 7px;
  background: #171411;
  color: #eee7df;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease,transform .12s ease;
}

#libraryTable th:nth-child(n+4):nth-child(-n+9) .compact-header-label:hover::after {
  opacity: 1;
  transform: translate(-50%,0) scale(1);
}

#libraryTable th:nth-child(n+4):nth-child(-n+9) .help-icon {
  margin-left: 4px;
  width: 15px;
  height: 15px;
  font-size: 9px;
}

#libraryTable thead th:hover,
#libraryTable thead th:focus-within {
  z-index: 500;
}

#libraryTable .compact-header-label:hover,
#libraryTable .compact-header-label:focus-visible,
#libraryTable .help-icon:hover,
#libraryTable .help-icon:focus-visible {
  position: relative;
  z-index: 502;
}

#libraryTable th:nth-child(10) {
  overflow: visible;
  white-space: nowrap;
}

#libraryTable th:nth-child(10) .compact-header-label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 17px;
}

#libraryTable th:nth-child(10) .compact-header-label::after {
  content: attr(data-full-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 503;
  transform: translate(-50%,4px) scale(.98);
  padding: 6px 9px;
  border: 1px solid #4a4037;
  border-radius: 7px;
  background: #171411;
  color: #eee7df;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease,transform .12s ease;
}

#libraryTable th:nth-child(10) .compact-header-label:hover::after {
  opacity: 1;
  transform: translate(-50%,0) scale(1);
}

#libraryTable th:nth-child(10) .help-icon {
  margin-left: 4px;
  width: 15px;
  height: 15px;
  font-size: 9px;
}

#libraryTable .compact-header-label::after {
  z-index: 503;
  display: none!important;
}

.header-label-tooltip {
  border-color: rgba(191,163,105,.34);
  backdrop-filter: blur(14px);
  position: fixed;
  z-index: 12000;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 7px 10px;
  border: 1px solid #4a4037;
  border-radius: 7px;
  background: #171411;
  color: #eee7df;
  box-shadow: 0 10px 28px rgba(0,0,0,.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(.98);
  transition: opacity .1s ease,transform .1s ease,visibility .1s ease;
}

.header-label-tooltip.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#libraryTable th:nth-child(4),#libraryTable td:nth-child(4) {
  width: 52px;
  min-width: 52px;
}

#libraryTable th:nth-child(n+5):nth-child(-n+10),
#libraryTable td:nth-child(n+5):nth-child(-n+10) {
  max-width: 68px;
  padding-left: 6px;
  padding-right: 6px;
  width: 70px;
  min-width: 70px;
}

#libraryTable th:nth-child(12),#libraryTable td:nth-child(12),
#libraryTable th:nth-child(13),#libraryTable td:nth-child(13),
#libraryTable th:nth-child(14),#libraryTable td:nth-child(14) {
  width: 67px;
}

#libraryTable th:nth-child(15),#libraryTable td:nth-child(15) {
  width: 88px;
}

#libraryTable .medal-column .medal {
  margin: 0;
  vertical-align: middle;
}

#libraryTable .medal-column-head::after {
  display: none;
  right: 2px!important;
}

#libraryTable th:nth-child(3),#libraryTable td:nth-child(3) {
  text-align: center;
  width: 26px!important;
  min-width: 26px!important;
  max-width: 26px!important;
  padding-left: 0!important;
  padding-right: 0!important;
}

#libraryTable .medal-column-head::before,#libraryTable .medal-column-head::after {
  content: none!important;
  display: none!important;
}

#libraryTable th:nth-child(11),#libraryTable td:nth-child(11) {
  width: 80px;
  min-width: 80px;
}

#libraryTable th:nth-child(11) {
  padding-left: 4px;
  padding-right: 4px;
  white-space: nowrap;
}

#libraryTable th:nth-child(11) .compact-header-label,#libraryTable th:nth-child(11) .help-icon {
  display: inline-grid;
  vertical-align: middle;
}

#libraryTable th:nth-child(11) .compact-header-label {
  display: inline-block;
  line-height: 15px;
}

#libraryTable th:nth-child(11) .help-icon {
  margin-left: 4px;
  width: 15px;
  height: 15px;
  font-size: 9px;
}

.compare-chip {
  border: 1px solid #3a332d;
  background: #181512;
  color: #d8cec2;
  border-radius: 999px;
  padding: 9px 12px;
  transition: .16s ease;
  font-weight: 700;
}

.compare-image {
  height: 310px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 42%,#24201c 0,#0b0b0c 70%);
  place-items: center;
  overflow: hidden;
  border: 1px solid #332c26;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px 10px;
}

.compare-image img {
  display: block;
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
  max-height: 100%!important;
  object-fit: contain!important;
  object-position: center center!important;
  margin: auto;
  filter: drop-shadow(0 16px 15px rgba(0,0,0,.4));
}

.compare-insight-head h2 {
  margin: 3px 0 4px;
  font-size: 26px;
  display: flex;
  align-items: center;
  color: #8d8379;
}

.compare-score-help {
  display: inline-flex;
  cursor: help;
  border-radius: 8px;
  outline: none;
}

.compare-score-help:hover .score-heat,.compare-score-help:focus .score-heat {
  border-color: #766343;
  box-shadow: 0 0 0 2px rgba(191,163,105,.12),0 0 14px rgba(191,163,105,.18),inset 0 1px 0 rgba(255,255,255,.055);
}

.timeline-panel {
  gap: 10px;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}

.timeline-panel:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.timeline-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.timeline-section-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
  color: #E4DED4;
}

.timeline-section-head>span {
  color: var(--muted);
  font-size: 12px;
}

.timeline-events {
  display: grid;
  gap: 9px;
}

.timeline-events.compact {
  padding: 4px 16px 16px;
}

.timeline-event {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #302a25;
  border-radius: 12px;
  background: #12100e;
}

.timeline-event time {
  color: var(--gold);
  font-weight: 850;
}

.timeline-event div {
  display: grid;
  gap: 3px;
}

.timeline-event strong {
  font-size: 14px;
  color: #eee7de;
}

.timeline-event span {
  font-size: 11px;
  color: var(--muted);
}

.timeline-archive {
  display: grid;
  gap: 10px;
}

.timeline-period {
  border: 1px solid #342d27;
  border-radius: 13px;
  background: #12100e;
  overflow: hidden;
}

.timeline-period summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.timeline-period summary::-webkit-details-marker {
  display: none;
}

.timeline-period summary div {
  display: grid;
  gap: 4px;
}

.timeline-period summary strong {
  font-size: 17px;
}

.timeline-period summary small {
  color: var(--muted);
}

.timeline-chevron {
  color: var(--gold);
  transition: transform .18s ease;
}

.timeline-period[open]>.timeline-period summary .timeline-chevron,.timeline-period[open]>summary .timeline-chevron {
  transform: rotate(180deg);
}

.timeline-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0 16px 16px;
}

.timeline-summary-grid span {
  padding: 8px 10px;
  border: 1px solid #302a25;
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
  background: #171411;
}

.timeline-summary-grid b {
  color: #eee7de;
  font-size: 13px;
  margin-right: 3px;
}

.timeline-months {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.timeline-period.nested {
  background: #171411;
}

.timeline-period.nested summary {
  padding: 13px 14px;
}

.timeline-period.nested summary strong {
  font-size: 14px;
}

.weight-config-head h2 {
  margin: 2px 0 5px;
}

.weight-config-head p {
  margin: 0;
  color: var(--muted);
}

.weight-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(120px,1fr));
  gap: 12px;
}

.weight-grid label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
}

.weight-grid input {
  width: 100%;
  padding: 11px 28px 11px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.weight-grid label span {
  position: absolute;
  right: 10px;
  bottom: 11px;
  color: var(--muted);
}

.weight-total.invalid {
  color: #d9a36a;
}

.weight-config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.display-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(206,174,103,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  font-size: .78rem;
  letter-spacing: .04em;
  cursor: pointer;
  user-select: none;
}

.display-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #c8a45d;
}

body.hide-fidelity .fidelity-column,body.hide-fidelity .fidelity-ui {
  display: none!important;
}

.display-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fidelity-mode-help {
  margin-left: 0;
  flex: 0 0 auto;
}

#libraryTable .wear-header-label {
  display: inline-block;
  color: #d8c8aa;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

#libraryTable .wear-header-label-spacer {
  display: inline-block;
  visibility: hidden;
  font-size: 9px;
  letter-spacing: .12em;
}

#libraryTable .th-sub {
  display: inline-block;
  margin-top: 2px;
  white-space: nowrap;
}

.weight-editor-toggle {
  border: 1px solid #55462f;
  border-radius: 12px;
  background: #211b16;
  color: #ead8b5;
  padding: 11px 15px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.weight-editor-toggle span {
  display: inline-block;
  margin-left: 8px;
  transition: transform .18s ease;
}

.weight-editor-toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.weight-editor[hidden] {
  display: none;
}

.weight-total {
  margin-top: 14px;
  font-weight: 800;
  color: var(--gold);
  margin: 0;
}

.library-column-sets button {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 11px 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.library-column-sets button:hover {
  color: #f3ede5;
}

.library-column-sets button.active {
  border-color: #6d5730;
  background: linear-gradient(180deg,#3a3024,#27211b);
  color: #f4e6c7;
  box-shadow: inset 0 -2px 0 rgba(211,175,96,.45);
}

.library-view-overall th:nth-child(1),.library-view-overall td:nth-child(1),.library-view-philosophy th:nth-child(1),.library-view-philosophy td:nth-child(1),.library-view-fidelity th:nth-child(1),.library-view-fidelity td:nth-child(1),.library-view-wear th:nth-child(1),.library-view-wear td:nth-child(1) {
  width: 58px!important;
}

.library-view-wear th:nth-child(n+3),.library-view-wear td:nth-child(n+3) {
  width: 12.8%!important;
}

.library-th-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  max-width: 100%;
}

.table-help-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  font-size: 10px;
  line-height: 1;
  padding: 0;
}

.library-view-philosophy {
  min-width: 1120px!important;
}

.library-view-philosophy .watch-cell {
  font-size: .74rem;
}

.library-view-fidelity {
  width: 760px!important;
  max-width: 100%;
  margin-right: auto;
  table-layout: fixed;
}

.library-view-wear {
  min-width: 1180px!important;
}

.library-view-wear th:nth-child(n+3):nth-child(-n+9),.library-view-wear td:nth-child(n+3):nth-child(-n+9) {
  width: 105px!important;
  text-align: center;
}

.library-view-wear th:nth-child(10),.library-view-wear td:nth-child(10) {
  width: 140px!important;
}

.weight-editor[hidden],#weightEditor[hidden] {
  display: none!important;
}

.weight-editor-actions #resetWeights {
  position: static!important;
  inset: auto!important;
  margin: 0!important;
}

.library-column-sets {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
  margin-bottom: 8px;
}

#libraryTable th[data-sort]::after {
  content: '↕';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #665d54;
  opacity: 0;
  transition: opacity .15s ease,color .15s ease,transform .15s ease;
  right: 8px!important;
}

#libraryTable .watch-name-text {
  color: inherit;
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#libraryTable .watch-cell>span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-view-philosophy th {
  font-size: 9.5px;
  letter-spacing: .025em;
}

.library-view-philosophy .score-heat {
  min-width: 52px;
}

.library-view-fidelity .gen-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 5px 9px;
  border: 1px solid #315f3d;
  border-radius: 999px;
  background: #13251a;
  color: #8fd1a3;
  font-weight: 900;
  letter-spacing: .05em;
}

.library-view-wear th:nth-child(n+3):nth-child(-n+8) .library-th-content {
  justify-content: flex-end;
}

.library-view-wear th {
  font-size: 10px;
  letter-spacing: .025em;
}

.library-view-wear td.numeric {
  font-variant-numeric: tabular-nums;
}


.library-view-overall th:nth-child(1),.library-view-overall td:nth-child(1) {
  width: 72px!important;
  text-align: center!important;
}

.library-view-overall th:nth-child(2),.library-view-overall td:nth-child(2) {
  width: auto!important;
  text-align: left!important;
}

.library-view-philosophy th:nth-child(1),.library-view-philosophy td:nth-child(1) {
  width: 64px!important;
  text-align: center!important;
}

.library-view-philosophy th:nth-child(2),.library-view-philosophy td:nth-child(2) {
  width: 300px!important;
  text-align: left!important;
}

.library-view-fidelity th:nth-child(1),.library-view-fidelity td:nth-child(1) {
  padding-left: 20px;
  width: 72px!important;
  text-align: center!important;
}

.library-view-fidelity th:nth-child(2),.library-view-fidelity td:nth-child(2) {
  width: 500px!important;
  text-align: left!important;
}

.library-view-wear th:nth-child(1),.library-view-wear td:nth-child(1) {
  width: 64px!important;
  text-align: center!important;
}

.library-view-wear th:nth-child(2),.library-view-wear td:nth-child(2) {
  width: 300px!important;
  text-align: left!important;
}

.weight-config {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  padding: 20px 22px!important;
  margin-bottom: 20px!important;
}

.weight-config-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px!important;
  align-items: center!important;
}

.weight-config-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px!important;
  margin-top: 0!important;
}

.weight-editor {
  padding-top: 14px!important;
}

.weight-editor-actions {
  position: static!important;
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 12px!important;
  padding-top: 12px!important;
}

#libraryTable th[data-sort]::after,#libraryTable th[data-sort]::before {
  content: none!important;
  display: none!important;
}

#libraryTable th.sort-active .table-sort-arrow {
  color: var(--gold);
}

#libraryTable th.sort-asc .table-sort-arrow {
  transform: rotate(180deg);
}

#libraryTable th.sort-desc .table-sort-arrow {
  transform: rotate(0deg);
}

#libraryTable .watch-name-line,#libraryTable .watch-name-text {
  display: block!important;
  max-width: 100%!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  white-space: nowrap!important;
}

#libraryTable td.numeric {
  text-align: center!important;
  font-variant-numeric: tabular-nums;
}


.library-view-overall td:nth-child(3),.library-view-overall td:nth-child(4) {
  text-align: center!important;
}

.library-view-overall .medal-column-head {
  font-size: inherit!important;
}

.library-view-overall .medal-column-head:before {
  font-size: 10px!important;
  letter-spacing: .08em!important;
  content: none!important;
  display: none!important;
}


.library-view-philosophy th:nth-child(n+3) .library-th-content {
  justify-content: flex-start!important;
}


.library-view-fidelity td:nth-child(3) {
  padding-left: 18px;
  text-align: center!important;
}

.library-view-fidelity th:nth-child(3) .library-th-content {
  justify-content: flex-start!important;
}


.library-view-wear th:nth-child(n+3) .library-th-content {
  justify-content: flex-start!important;
}

#libraryTable th:nth-child(1),
#libraryTable td:nth-child(1) {
  text-align: left !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

#libraryTable th:nth-child(2),
#libraryTable td:nth-child(2) {
  text-align: left !important;
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
}

.library-view-overall th:nth-child(3),
.library-view-overall td:nth-child(3) {
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: left !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
}

.library-view-overall th:nth-child(4),
.library-view-overall td:nth-child(4) {
  text-align: left !important;
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

.library-view-philosophy th:nth-child(n+3),
.library-view-philosophy td:nth-child(n+3) {
  text-align: center !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.library-view-fidelity th:nth-child(3),
.library-view-fidelity td:nth-child(3) {
  text-align: left !important;
  padding-left: 12px !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.library-view-wear th:nth-child(n+3):nth-child(-n+8),
.library-view-wear td:nth-child(n+3):nth-child(-n+8) {
  text-align: center !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.library-view-wear th:nth-child(9),
.library-view-wear td:nth-child(9) {
  text-align: center !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

#libraryTable {
  max-width: none!important;
  border-spacing: 0!important;
  table-layout: fixed!important;
  width: max-content!important;
  min-width: 0!important;
  margin: 0!important;
  border-collapse: collapse!important;
}

#libraryTable col.col-rank {
  width: 58px!important;
}

#libraryTable col.col-watch {
  width: 340px!important;
}

#libraryTable col.col-medal {
  width: 78px!important;
}

#libraryTable col.col-overall {
  width: 102px!important;
}

#libraryTable col.col-score {
  width: 150px!important;
}

#libraryTable col.col-fidelity {
  width: 150px!important;
}

#libraryTable col.col-wear {
  width: 130px!important;
}

#libraryTable col.col-last-worn {
  width: 150px!important;
}

#libraryTable thead th {
  box-sizing: border-box!important;
  height: 50px!important;
  padding: 0 12px!important;
  vertical-align: middle!important;
  text-align: left!important;
  overflow: visible!important;
  white-space: nowrap!important;
  font-size: 10px!important;
  line-height: 1!important;
  font-weight: 800!important;
  letter-spacing: .015em!important;
  text-transform: uppercase!important;
}

#libraryTable tbody td {
  box-sizing: border-box!important;
  height: 62px!important;
  padding: 10px 12px!important;
  vertical-align: middle!important;
  font-size: 11px!important;
  line-height: 1.25!important;
}

#libraryTable tbody td:first-child,
#libraryTable thead th:first-child {
  padding-left: 12px!important;
  padding-right: 8px!important;
  text-align: left!important;
}

#libraryTable tbody td:nth-child(2),
#libraryTable thead th:nth-child(2) {
  text-align: left!important;
}

#libraryTable .watch-cell .watch-name-line {
  font-size: 11px!important;
  line-height: 1.2!important;
}

#libraryTable .watch-cell>span:last-child {
  font-size: 10px!important;
  line-height: 1.2!important;
}

#libraryTable th[data-sort] {
  position: sticky;
  padding-right: 12px!important;
  cursor: pointer!important;
}

#libraryTable th[data-sort]::before,
#libraryTable th[data-sort]::after {
  content: none!important;
  display: none!important;
}

#libraryTable .compact-header-label {
  text-overflow: clip;
  display: inline-block!important;
  flex: 0 0 auto!important;
  min-width: 0!important;
  overflow: visible!important;
  white-space: nowrap!important;
  font: inherit!important;
  line-height: 1!important;
}

.library-view-overall td:nth-child(3),
.library-view-overall td:nth-child(4),
.library-view-philosophy td:nth-child(n+3),
.library-view-fidelity td:nth-child(3),
.library-view-wear td:nth-child(n+3) {
  text-align: center!important;
}

.library-view-overall th:nth-child(n+3) .library-th-content,
.library-view-philosophy th:nth-child(n+3) .library-th-content,
.library-view-fidelity th:nth-child(3) .library-th-content,
.library-view-wear th:nth-child(n+3) .library-th-content {
  justify-content: flex-start!important;
}

#libraryTable.library-view-overall th,
#libraryTable.library-view-philosophy th,
#libraryTable.library-view-fidelity th,
#libraryTable.library-view-wear th {
  font-size: 10px!important;
  letter-spacing: .015em!important;
}

#libraryTable .watch-cell {
  padding-right: 12px;
  overflow: hidden!important;
  font-size: 11px!important;
  text-align: center!important;
}

#libraryTable .medal-column-head {
  letter-spacing: .02em;
  padding-right: 14px!important;
  font-size: 0!important;
  padding: 0!important;
}

#libraryTable .medal-column-head .library-th-content,
#libraryTable .medal-column-head .table-sort-arrow,
#libraryTable .medal-column-head .compact-header-label {
  display: none!important;
}

#libraryTable.library-view-wear .table-help-icon {
  display: none!important;
}

#libraryTable.library-view-overall,
#libraryTable.library-view-philosophy,
#libraryTable.library-view-fidelity,
#libraryTable.library-view-wear {
  table-layout: fixed!important;
  max-width: none!important;
  margin-left: 0!important;
  margin-right: auto!important;
}

#libraryTable.library-view-overall col.col-watch,
#libraryTable.library-view-philosophy col.col-watch,
#libraryTable.library-view-fidelity col.col-watch,
#libraryTable.library-view-wear col.col-watch {
  width: 230px!important;
}

#libraryTable.library-view-overall col.col-medal {
  width: 52px!important;
}

#libraryTable th,
#libraryTable td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

#libraryTable th:first-child,
#libraryTable td:first-child {
  padding-left: 5px!important;
  padding-right: 5px!important;
}

#libraryTable .watch-cell,
#libraryTable .watch-name-line {
  min-width: 0!important;
  max-width: 100%!important;
}

#libraryTable .watch-name-line {
  font-weight: 700;
  color: #d8d1c9;
  display: block;
  line-height: 1.25;
  font-size: 12.5px;
  justify-content: center!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  white-space: nowrap!important;
}

.table-shell::-webkit-scrollbar {
  height: 10px;
}

.table-shell::-webkit-scrollbar-track {
  background: #100e0d;
  border-radius: 999px;
}

.table-shell::-webkit-scrollbar-thumb {
  background: #4a4037;
  border: 2px solid #100e0d;
  border-radius: 999px;
}

.table-shell::-webkit-scrollbar-thumb:hover {
  background: #685845;
}

.table-shell {
  border-color: #2d2824;
  overflow: auto;
  border: 1px solid #312b26;
  background: #151311;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
  display: block!important;
  width: 100%!important;
  max-width: 100%!important;
  overflow-x: auto!important;
  overflow-y: hidden!important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #4a4037 #100e0d;
}

#libraryTable.library-view-overall col.col-rank,
#libraryTable.library-view-philosophy col.col-rank,
#libraryTable.library-view-fidelity col.col-rank,
#libraryTable.library-view-wear col.col-rank {
  width: 64px!important;
}

#libraryTable.library-view-philosophy col.col-score {
  width: 104px!important;
}

#libraryTable.library-view-fidelity col.col-fidelity {
  width: 112px!important;
}

#libraryTable.library-view-wear col.col-wear {
  width: 92px!important;
}

#libraryTable.library-view-wear col.col-last-worn {
  width: 118px!important;
}

#libraryTable.library-view-overall {
  max-width: none!important;
  width: 434px!important;
  min-width: 434px!important;
}

#libraryTable.library-view-philosophy {
  table-layout: fixed;
  max-width: none!important;
  width: 918px!important;
  min-width: 918px!important;
}

#libraryTable.library-view-fidelity {
  table-layout: fixed;
  margin: 0!important;
  max-width: none!important;
  width: 406px!important;
  min-width: 406px!important;
}

#libraryTable.library-view-wear {
  table-layout: fixed;
  max-width: none!important;
  width: 964px!important;
  min-width: 964px!important;
}

#libraryTable th {
  text-overflow: clip;
  overflow: visible!important;
}

#libraryTable .library-th-content {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  white-space: nowrap;
  gap: 4px!important;
  width: max-content!important;
  max-width: none!important;
  min-width: max-content!important;
  margin-inline: auto!important;
  overflow: visible!important;
  flex-wrap: nowrap!important;
}

#libraryTable .compact-header-label,
#libraryTable .table-help-icon,
#libraryTable .table-sort-arrow {
  flex: 0 0 auto!important;
  flex-shrink: 0!important;
}

#libraryTable .compact-header-label::after,
.header-label-tooltip {
  display: none!important;
}

#libraryTable .table-help-icon {
  margin-left: 0;
  position: static!important;
  place-items: center!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  flex: 0 0 auto!important;
  width: auto!important;
  min-width: 14px!important;
  height: 16px!important;
  margin: 0!important;
  padding: 0!important;
  border: 0!important;
  border-radius: 0!important;
  background: transparent!important;
  color: var(--gold)!important;
  font-family: "Segoe UI Symbol","Arial Unicode MS",Arial,sans-serif!important;
  font-size: 14px!important;
  font-weight: 400!important;
  line-height: 1!important;
  text-rendering: geometricPrecision;
}

#libraryTable .table-help-icon:hover,
#libraryTable .table-help-icon:focus-visible {
  background: transparent!important;
  color: #f0cf78!important;
}

#libraryView .table-shell > #libraryTable {
  table-layout: fixed!important;
  max-width: none!important;
  margin: 0!important;
}

#libraryView #libraryTable.library-view-philosophy {
  width: 918px!important;
  min-width: 918px!important;
}

#libraryView #libraryTable.library-view-fidelity {
  width: 406px!important;
  min-width: 406px!important;
}

#libraryView #libraryTable.library-view-wear {
  width: 964px!important;
  min-width: 964px!important;
}

#libraryView .table-shell::-webkit-scrollbar {
  height: 10px;
}

#libraryView .table-shell::-webkit-scrollbar-track {
  background: #100e0d;
  border-radius: 999px;
}

#libraryView .table-shell::-webkit-scrollbar-thumb {
  background: #4a4037;
  border: 2px solid #100e0d;
  border-radius: 999px;
}

#libraryView .table-shell::-webkit-scrollbar-thumb:hover {
  background: #685845;
}

#libraryTable th[data-sort] .library-th-content::after {
  content: "";
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 1px;
}

#libraryTable .table-sort-arrow {
  margin-left: 1px;
  color: #746a5e;
  transform: rotate(0deg);
  transition: transform .14s ease,color .14s ease;
  position: static!important;
  display: inline-block!important;
  flex: 0 0 auto!important;
  width: auto!important;
  margin: 0!important;
  font-size: 9px!important;
  line-height: 1!important;
  margin-right: 0!important;
}

#libraryView .table-shell {
  position: relative!important;
  display: block!important;
  width: 100%!important;
  max-width: 100%!important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: #4a4037 #100e0d;
  overflow-x: auto!important;
  overflow-y: hidden!important;
}

@media(max-width:500px) {
  #libraryView #libraryTable.library-view-overall {
    width: 500px!important;
    min-width: 500px!important;
  }
  #libraryView #libraryTable.library-view-fidelity {
    width: 500px!important;
    min-width: 500px!important;
  }
}

@media(max-width:918px) {
  #libraryView #libraryTable.library-view-philosophy {
    width: 918px!important;
    min-width: 918px!important;
  }
}

@media(max-width:964px) {
  #libraryView #libraryTable.library-view-wear {
    width: 964px!important;
    min-width: 964px!important;
  }
}

#libraryTable.library-view-overall col.col-overall {
  width: 116px!important;
}

#libraryView #libraryTable.library-view-overall {
  width: 462px!important;
  min-width: 462px!important;
}

#libraryTable.library-view-overall th:last-child {
  box-sizing: border-box!important;
  padding-right: 14px!important;
}

#libraryTable.library-view-overall th:last-child .library-th-content {
  box-sizing: border-box!important;
  padding-right: 0!important;
}

#libraryTable.library-view-overall th:last-child .library-th-content::after {
  content: ""!important;
  display: inline-block!important;
  flex: 0 0 12px!important;
  width: 12px!important;
  min-width: 12px!important;
  height: 1px!important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,.76);
}

.modal.open {
  display: flex;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #342d27;
}

.modal-head h2 {
  margin: 0;
  font-size: 28px;
}

.modal-tabs {
  display: flex;
  gap: 7px;
  padding: 12px 20px;
  border-bottom: 1px solid #302923;
  overflow: auto;
}

.modal-tabs button {
  font-weight: 500;
  border: 0;
  background: #24201c;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 9px;
  white-space: nowrap;
}

.modal-tabs button.active {
  background: var(--gold);
  color: #17110b;
  font-weight: 900;
}

.modal-pane {
  display: none;
  padding: 22px;
}

.modal-pane.active {
  display: block;
}

.profile-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 22px;
}

.image-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-image {
  height: 390px;
  border: 1px solid #2d2d2f;
  border-radius: 18px;
  background: #0b0b0c;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.profile-image span {
  font-size: 62px;
  color: #555;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.form-grid,.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid label,.score-grid label,.block-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.form-grid .full,.score-grid .full {
  grid-column: 1/-1;
}

.overall-field input {
  font-size: 32px;
  color: var(--gold);
  font-weight: 900;
}

.block-label {
  margin-top: 18px;
}

.notice {
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #36533e;
  background: #142319;
  color: #a8d4b2;
  border-radius: 12px;
}

.wear-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.wear-stats>div {
  border-color: #302a25;
  padding: 16px;
  border: 1px solid #342d27;
  border-radius: 14px;
  background: #1d1916;
}

.wear-stats span,.wear-stats strong {
  display: block;
}

.wear-stats span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.wear-stats strong {
  font-size: 23px;
  margin-top: 7px;
}

.wear-history-list {
  display: grid;
  gap: 9px;
  max-height: clamp(180px, calc(94vh - 610px), 360px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #a77822 #171411;
}

.wear-history-list::-webkit-scrollbar {
  width: 8px;
}

.wear-history-list::-webkit-scrollbar-track {
  background: #171411;
  border-radius: 999px;
}

.wear-history-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#d8ad4d,#8d641d);
  border: 2px solid #171411;
  border-radius: 999px;
}

.wear-history-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#efc966,#a87925);
}

.wear-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #302a25;
  border-radius: 11px;
  background: #13110f;
}

.wear-history-item button {
  border: 0;
  background: transparent;
  color: #c98680;
}

.large-textarea {
  min-height: 330px;
}

.modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid #302923;
  background: rgba(23,20,17,.96);
  backdrop-filter: blur(14px);
}

.modal-actions>span {
  margin-right: auto;
  color: var(--muted);
  font-size: 11px;
}

.modal-actions>div {
  display: flex;
  gap: 10px;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wear-analytics-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.wear-analytics-title h3 {
  margin: 2px 0 0;
  font-size: 24px;
}

.wear-stats-primary {
  grid-template-columns: repeat(4,1fr);
}

.wear-stats-secondary {
  grid-template-columns: repeat(4,1fr);
}

.timeline-title {
  margin: 24px 0 12px;
}

.rotation-status {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #4a423a;
  background: #24201c;
  color: #c8bdb1;
  font-size: 12px;
  font-weight: 800;
}

.rotation-status.active {
  border-color: #2f7047;
  background: #11261a;
  color: #8fd1a3;
}

.rotation-status.rotation {
  border-color: #365e87;
  background: #122132;
  color: #91bce8;
}

.rotation-status.cooling {
  border-color: #80692f;
  background: #2a2310;
  color: #e3c76c;
}

.rotation-status.dormant {
  border-color: #7f3d38;
  background: #2b1514;
  color: #e49a94;
}

.help-popover {
  filter: drop-shadow(0 24px 52px rgba(0,0,0,.5));
  position: fixed;
  z-index: 10000;
  display: block;
  width: min(430px,calc(100vw - 24px));
  max-height: min(560px,calc(100vh - 24px));
  overflow: auto;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(.985);
  transition: opacity .14s ease,transform .14s ease,visibility .14s;
  background: transparent;
}

.help-popover-card h3 {
  font-weight: 650;
  font-size: 21px;
  margin: 3px 0 6px;
}

.help-question {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  margin: 5px 0 8px;
}

.help-popover-card>p:not(.eyebrow):not(.help-question) {
  color: #c8bdb1;
  line-height: 1.45;
  font-size: 13px;
}

.help-scale {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.modal-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.modal-title-row #profileMedal:empty {
  display: none;
}

.help-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 10000;
}

.help-popover-card {
  border-color: rgba(191,163,105,.31);
  backdrop-filter: blur(16px);
  position: relative;
  width: 100%;
  max-height: inherit;
  overflow: auto;
  padding: 18px;
  border: 1px solid #4b4036;
  border-radius: 14px;
  background: #181512;
  box-shadow: 0 18px 52px rgba(0,0,0,.62);
  isolation: isolate;
}

.help-scale > div > strong {
  box-sizing: border-box;
  width: 104px;
  min-width: 104px;
  justify-self: stretch;
  text-align: center;
}

.help-scale > div > span {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.help-scale[data-help-key="fidelity"] > div {
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 10px;
}

.help-scale[data-help-key="fidelity"] > div > strong {
  width: 72px;
  min-width: 72px;
  padding-inline: 6px;
}

.watch-location-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid #3b332c;
  border-radius: 12px;
  background: #12100e;
}

.watch-location-readonly[hidden] {
  display: none;
}

.watch-location-readonly>div {
  display: grid;
  gap: 4px;
}

.watch-location-readonly span {
  color: var(--muted);
  font-size: 12px;
}

.watch-location-readonly strong {
  font-size: 16px;
  color: #eee5dc;
}

.watch-location-readonly small {
  color: var(--muted);
  font-size: 11px;
}

.watch-location-readonly .secondary-button {
  white-space: nowrap;
}

#watchModal [hidden] {
  display: none!important;
}


#watchModal .upload-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#saveStatus.save-error {
  color: #d98b83;
}

.modal-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

#watchModal .profile-image img {
  display: block!important;
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
  max-height: 100%!important;
  object-fit: contain!important;
  object-position: center center!important;
  margin: auto!important;
  flex: 0 0 auto;
}

.help-popover .help-question {
  position: relative;
  margin-top: 14px!important;
  padding: 13px 14px 13px 38px!important;
  border: 1px solid rgba(206,170,92,.34)!important;
  border-radius: 12px!important;
  background: rgba(206,170,92,.07)!important;
  color: #f1dfb9!important;
  font-weight: 750!important;
  line-height: 1.45!important;
}

.help-popover .help-question::before {
  content: "★";
  position: absolute;
  left: 14px;
  top: 13px;
  color: #d2ad62;
  font-size: 13px;
}

.help-popover .help-question::after {
  content: "KEY TEST";
  display: block;
  margin-top: 5px;
  color: #a89166;
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 800;
}

.help-scale>div.half-score {
  background: rgba(255,255,255,.018)!important;
  border-color: rgba(255,255,255,.055)!important;
}

.help-scale>div.half-score span {
  color: #a99f92!important;
  font-size: 11px!important;
  font-style: italic!important;
}

.help-scale>div {
  border-color: rgba(255,255,255,.065);
  display: grid;
  border: 1px solid #302a25;
  border-radius: 8px;
  background: #12100e;
  column-gap: 10px;
  grid-template-columns: max-content minmax(0,1fr)!important;
  gap: 7px!important;
  align-items: center!important;
  padding: 5px 7px!important;
}

.help-scale strong {
  font-weight: 700;
  place-items: center;
  background: #2c251f;
  color: var(--gold);
  box-sizing: border-box;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  width: auto!important;
  min-width: 0!important;
  height: auto!important;
  min-height: 16px!important;
  padding: 1px 5px!important;
  border-radius: 999px!important;
  white-space: nowrap!important;
  font-size: 9px!important;
  line-height: 1.15!important;
  letter-spacing: .01em!important;
}

.help-scale span {
  color: #ddd4ca;
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: 11px!important;
  line-height: 1.3!important;
}

.help-scale>div.half-score strong {
  color: #bda76f!important;
  font-weight: 750!important;
  font-size: 9px!important;
}

.help-scale > div {
  display: grid;
  align-items: center;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

.help-scale > div > strong,
.help-scale[data-help-key="fidelity"] > div > strong {
  box-sizing: border-box !important;
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding-inline: 4px !important;
  justify-self: stretch !important;
}


#watchModal .profile-image:not(.has-image) .watchbox-crop-guide {
  display: none;
}

@media(max-width:800px) {
  .modal {
    padding: 0;
  }
  .modal-card {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .profile-layout,.form-grid,.score-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full,.score-grid .full {
    grid-column: auto;
  }
  .profile-image {
    height: 300px;
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-actions>span {
    order: 3;
    width: 100%;
  }
  .wear-stats-primary,.wear-stats-secondary {
    grid-template-columns: 1fr 1fr;
  }
  #watchModal .watchbox-crop-guide {
    border-color: rgba(212,175,55,.58);
  }
}


body {
  margin: 0;
  min-height: 100vh;
  font-weight: 400;
  letter-spacing: -.005em;
  background: radial-gradient(circle at 58% -15%,rgba(199,164,95,.055),transparent 30%),#050505;
  color: var(--text);
  font-family: Inter,"Segoe UI",Arial,sans-serif;
}

.topnav-btn:hover,
.topnav-btn.active {
  color: var(--gold-soft);
  background: linear-gradient(90deg,rgba(199,164,95,.16),rgba(199,164,95,.035));
  border-color: rgba(199,164,95,.16);
  transform: none;
}

.topnav-btn[data-view="room"]::before {
  content: "▣";
  margin-right: 9px;
  color: var(--gold);
}

.topnav-btn[data-view="dashboard"]::before {
  content: "◫";
  margin-right: 9px;
}

.topnav-btn[data-view="timeline"]::before {
  content: "◷";
  margin-right: 9px;
}

.nav-divider {
  width: 1px;
  height: 1px;
  background: #1d1b18;
  margin: 6px 4px;
}

.view {
  display: none;
  margin: auto;
  max-width: 1600px;
  padding: 26px 30px 90px;
}

.view.active {
  animation: pwViewIn .2s var(--ease) both;
  display: block;
}





.today-summary {
  grid-column: auto;
  grid-area: summary!important;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px!important;
  border: 1px solid #211f1b!important;
  background: #0a0a0a!important;
  border-radius: 7px!important;
}

.today-summary span {
  text-transform: uppercase;
  font-size: 8px!important;
  color: var(--gold)!important;
  letter-spacing: .08em!important;
}

.today-summary strong {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: #dcd6cc;
}

.today-summary .text-button {
  font-size: 9px;
}

.wear-primary-row {
  justify-content: flex-end;
  align-self: start;
  flex-direction: column;
  max-width: 340px;
  min-width: 310px;
  grid-area: wear!important;
  grid-column: auto!important;
  grid-row: auto!important;
  width: 290px!important;
  margin: 0!important;
  display: grid!important;
  grid-template-columns: 1fr!important;
  gap: 7px!important;
  justify-self: end!important;
}

.wear-primary-row .wear-hero {
  min-width: 0!important;
  max-width: none!important;
  box-sizing: border-box;
  width: 100%!important;
  min-height: 58px!important;
  padding: 10px 12px!important;
  border: 1px solid #27241e!important;
  border-radius: 8px!important;
  background: radial-gradient(circle at 78% 10%,rgba(199,164,95,.08),transparent 42%),#0c0c0c!important;
  box-shadow: none!important;
}

.wear-primary-row .wear-hero-icon {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(7,31,21,.24);
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 22px;
  display: none;
}

.wear-primary-row .wear-hero strong {
  font-size: 9px!important;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wear-primary-row .wear-hero small {
  margin-top: 4px!important;
  color: #e5dfd5!important;
  font-size: 11px!important;
  font-weight: 600;
}

.wear-primary-row .wear-hero-arrow {
  font-size: 14px!important;
  color: var(--gold);
}

.hero-action-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr))!important;
  width: 100%!important;
  gap: 7px!important;
}

.hero-action-row .section-compare,
.hero-action-row .section-add {
  margin: 0;
  box-sizing: border-box;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .18s ease,border-color .18s ease,filter .18s ease;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  height: 31px !important;
  min-height: 31px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

.hero-action-row .section-compare {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(23,53,82,.22);
  background: #090909!important;
  border: 1px solid #292620!important;
  color: #bdb6ab!important;
}

.hero-action-row .section-add {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32),0 8px 18px rgba(78,52,18,.22);
  border: 1px solid #c2a05d!important;
  background: linear-gradient(180deg,#dfc37f,#b28d49)!important;
  color: #16110a!important;
}

.section-nav {
  align-items: center;
  position: sticky;
  top: 0!important;
  z-index: 45;
  display: grid!important;
  grid-template-columns: repeat(4,max-content) 1fr!important;
  gap: 5px!important;
  margin: 0 0 12px!important;
  padding: 5px!important;
  border: 1px solid #211f1b!important;
  border-radius: 7px!important;
  background: rgba(7,7,7,.94)!important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28)!important;
  backdrop-filter: blur(16px)!important;
}

.section-nav .room-nav-button {
  min-height: 29px!important;
  padding: 0 11px!important;
  border: 1px solid #24211d!important;
  border-radius: 5px!important;
  background: #0e0e0e!important;
  color: #918b82!important;
  font-size: 9px!important;
  font-weight: 650!important;
  box-shadow: none!important;
}

.section-nav .room-nav-button:first-child {
  color: var(--gold-soft)!important;
  border-color: rgba(199,164,95,.28)!important;
  background: rgba(199,164,95,.09)!important;
}

.section-nav .incoming-nav-button {
  border-color: rgba(225,196,132,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),0 7px 18px rgba(73,49,17,.2);
  background: #0e0e0e!important;
  color: #918b82!important;
}

.room-stack {
  display: grid;
  gap: 14px!important;
}

.room-section {
  padding: 0!important;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 17px;
  align-items: center!important;
  margin: 0 0 7px!important;
}

.section-heading h2 {
  margin: 0;
  font-family: Inter,"Segoe UI",sans-serif!important;
  font-size: 11px!important;
  font-weight: 700!important;
  letter-spacing: 0!important;
}

.room-section-tools {
  display: flex;
  align-items: center;
  gap: 6px!important;
}

.room-section-tools>span {
  color: var(--gold)!important;
  font-size: 8px!important;
}

.room-lock-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,180,102,.34);
  border-radius: 10px;
  background: rgba(215,180,102,.08);
  color: var(--gold);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background .14s ease,border-color .14s ease,transform .14s ease;
  transform: scale(.78);
}

.watchbox-frame:after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.035);
  pointer-events: none;
  display: none;
}

.watch-grid,
.uniform-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  gap: 6px !important;
}

.room-slot {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}


.watchbox-frame .watch-card {
  box-shadow: inset 0 16px 22px rgba(255,255,255,.035),inset 0 -28px 36px rgba(0,0,0,.35),0 8px 18px rgba(0,0,0,.22);
  background: radial-gradient(circle at 50% 18%,rgba(199,164,95,.05),transparent 44%),linear-gradient(180deg,#171614,#0b0b0b)!important;
}

.watch-card:hover {
  filter: none;
  transform: none!important;
  border-color: #3a342a!important;
  box-shadow: 0 10px 20px rgba(0,0,0,.35)!important;
}

.watch-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1!important;
  min-height: 0!important;
  padding: 6px 5px 1px!important;
}

.watch-image img {
  display: block;
  width: auto!important;
  height: auto!important;
  object-fit: contain!important;
  object-position: center center!important;
  filter: drop-shadow(0 16px 15px rgba(0,0,0,.4));
  margin: auto;
  max-width: 92%!important;
  max-height: 92%!important;
}

.watch-card-footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  flex: 0 0 34px!important;
  padding: 4px 5px!important;
  border-top: 1px solid #211f1c!important;
  background: rgba(3,3,3,.55)!important;
}

.watch-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 850;
  min-height: 31px;
  max-height: 31px;
  font-size: 8px!important;
  line-height: 1.05!important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  position: relative;
  margin-top: 2px!important;
}

.overall-score {
  color: #d5b779;
  font-weight: 900;
  font-size: 9px!important;
}

.overall-label {
  color: #cfc2b1;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 5px!important;
}

.wear-pill {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8,8,8,.62);
  backdrop-filter: blur(8px);
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 9px;
  color: #ddd;
  display: none!important;
}

.room-empty-slot {
  pointer-events: auto!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012)!important;
  opacity: .72!important;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .08em;
  transition: border-color .14s ease,background .14s ease,box-shadow .14s ease;
  aspect-ratio: 1/1.08!important;
  min-height: 0!important;
  border: 1px dashed #2c2924!important;
  border-radius: 6px!important;
  background: #090909!important;
  color: #6f5d3b!important;
  font-size: 8px!important;
}

#incomingSection {
  margin-top: 2px;
}

.dashboard-card,
.dashboard-panel,
.timeline-panel,
.table-shell,
.weight-config {
  border-color: #24211d!important;
  background: #0b0b0b!important;
  border-radius: 8px!important;
  box-shadow: none!important;
}

.library-head h1,
.timeline-page-head h1 {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 500;
}

.primary-button {
  border: 0;
  background: linear-gradient(180deg,#dfc37f,#b28d49);
  color: #17110a;
}

.secondary-button {
  border: 1px solid #443a32;
  color: var(--text);
  background: #0e0e0e;
  border-color: #302c25;
}


.hero-action-row .section-compare,
.hero-action-row .section-add,
.wear-primary-row .wear-hero,
.section-nav .room-nav-button {
  transition: background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
  transform: none!important;
}

.hero-action-row .section-compare:hover,
.hero-action-row .section-add:hover,
.wear-primary-row .wear-hero:hover {
  background: rgba(199,164,95,.14)!important;
  border-color: var(--gold)!important;
  color: var(--gold-soft)!important;
  box-shadow: 0 0 0 1px rgba(199,164,95,.08) inset!important;
  transform: none!important;
}

.section-nav .room-nav-button:hover {
  background: rgba(199,164,95,.09)!important;
  border-color: rgba(199,164,95,.28)!important;
  color: var(--gold-soft)!important;
  transform: none!important;
}

.section-nav .room-nav-button:active,
.section-nav .room-nav-button:focus-visible {
  transform: none!important;
}

.menu-toggle,
.menu-backdrop {
  display: none;
}

.timeline-section {
  border: 1px solid #312b26;
  background: #171411;
  border-radius: 18px;
  margin-bottom: 18px;
  padding: 0!important;
  overflow: hidden;
}

.timeline-period-main {
  border: 0!important;
  background: transparent!important;
}

.timeline-period-main>summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #24211d;
}

.timeline-period-main>summary::-webkit-details-marker {
  display: none;
}

.timeline-period-main>summary .timeline-section-head {
  padding: 0!important;
  border: 0!important;
}

.timeline-period-main .timeline-chevron {
  font-size: 18px;
  color: var(--gold);
  transition: transform .18s ease;
}

.timeline-period-main[open] .timeline-chevron {
  transform: rotate(180deg);
}

.timeline-period-main>.timeline-events {
  padding: 12px 18px 18px;
}

#roomView .today-summary .text-button {
  font-size: 11px!important;
}

#roomView .room-section-tools>span {
  font-size: 10px!important;
}

.topnav-btn::before {
  font-size: 15px!important;
}

.utility-nav {
  padding: 9px 12px;
  color: #6f6b65;
  min-height: 30px;
  font-size: 11px!important;
}

















@media(max-width:1180px) {
  .table-shell {
    overflow-x: auto;
  }
  .library-view-philosophy,.library-view-wear {
    width: 100%;
  }
  #libraryTable.library-view-philosophy {
    min-width: 1080px!important;
  }
  .library-view-philosophy th:nth-child(2),.library-view-philosophy td:nth-child(2) {
    width: 280px!important;
  }
  .library-view-philosophy th:nth-child(n+3),.library-view-philosophy td:nth-child(n+3) {
    width: 121px!important;
    min-width: 121px!important;
  }


  .topnav-btn {
    font-size: 12px!important;
  }

}

@media(max-width:520px) {
  .view {
    padding-left: 7px;
    padding-right: 7px;
  }
  .watch-grid,
.uniform-grid {
    gap: 3px!important;
  }
  .watch-image img {
    max-width: 96%!important;
    max-height: 96%!important;
  }
  .room-empty-slot {
    font-size: 0!important;
  }
  .room-empty-slot span::after {
    content: "+";
    font-size: 9px;
  }
  .section-nav {
    gap: 3px!important;
    padding: 4px!important;
  }





}

.app-shell {
  grid-template-columns: 168px minmax(0,1fr);
  display: block!important;
  min-height: 100vh;
}

main {
  grid-column: 2;
  min-width: 0;
  display: block!important;
  width: 100%!important;
  max-width: none!important;
  padding: 0!important;
}


body.menu-open .topbar {
  transform: translateX(0)!important;
}

.brand-button {
  background: 0;
  border: 0;
  display: flex;
  gap: 10px;
  color: var(--text);
  flex-direction: column!important;
  align-items: center!important;
  justify-content: center!important;
  padding: 0 8px 22px!important;
  border-bottom: 1px solid #1d1b18!important;
  text-align: center!important;
}

.brand-mark {
  display: grid;
  place-items: center;
  font-weight: 900;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--gold);
  font-size: 24px!important;
  line-height: 1!important;
}

.topnav {
  width: 100%;
  position: static!important;
  display: flex!important;
  flex-direction: column!important;
  height: auto!important;
  margin-top: 18px!important;
  padding: 0!important;
  background: transparent!important;
  border: 0!important;
  gap: 4px!important;
}

.topnav-btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #aaa49b;
  background: transparent;
  min-height: 42px!important;
  padding: 0 11px!important;
  text-align: left!important;
  font-size: 13px!important;
}

.topnav .nav-divider,
.topnav .utility-nav {
  display: block!important;
}

.menu-toggle {
  display: flex!important;
  position: fixed!important;
  top: 18px!important;
  left: 18px!important;
  z-index: 110!important;
  width: 46px!important;
  height: 46px!important;
  border: 1px solid #30291f!important;
  border-radius: 8px!important;
  background: rgba(8,8,8,.97)!important;
  align-items: center!important;
  justify-content: center!important;
  flex-direction: column!important;
  gap: 6px!important;
}

.menu-toggle span {
  display: block!important;
  width: 20px!important;
  height: 1.5px!important;
  background: var(--gold-soft)!important;
}

.menu-backdrop {
  position: fixed!important;
  inset: 0!important;
  z-index: 90!important;
  border: 0!important;
  background: rgba(0,0,0,.62)!important;
}

body.menu-open .menu-backdrop {
  display: block!important;
}

#roomView.view {
  max-width: var(--room-max)!important;
  margin: 0 auto!important;
  padding: 12px 16px 48px!important;
}









#roomView .today-summary {
  order: 2!important;
  width: 100%!important;
  min-height: 48px!important;
  box-sizing: border-box!important;
  display: flex!important;
  align-items: center!important;
  gap: 14px!important;
  padding: 10px 16px!important;
  border: 1px solid #29261f!important;
  border-radius: 7px!important;
  background: linear-gradient(90deg,#0b0b0b,#10100f 55%,#0b0b0b)!important;
}

#roomView .today-summary span {
  font-size: 10px!important;
  font-weight: 800!important;
  letter-spacing: .08em!important;
  color: var(--gold)!important;
}

#roomView .today-summary strong {
  line-height: 1.25;
  font-size: 13px!important;
  color: #ece6dd!important;
}

#roomView .hero-action-row .section-compare,
#roomView .hero-action-row .section-add {
  width: 100%!important;
  height: 44px!important;
  border-radius: 7px!important;
  font-size: 13px!important;
  font-weight: 750!important;
}

#roomView .section-nav {
  position: sticky!important;
  top: 0!important;
  z-index: 45!important;
  display: grid!important;
  grid-template-columns: repeat(4,minmax(0,1fr))!important;
  gap: 7px!important;
  margin: 0 0 16px!important;
  padding: 6px!important;
  border: 1px solid #27241f!important;
  border-radius: 8px!important;
  background: rgba(7,7,7,.95)!important;
}

#roomView .section-nav .room-nav-button {
  font-weight: 700!important;
  min-height: 38px!important;
  font-size: 12px!important;
  padding: 0 8px!important;
}

#roomView .room-stack {
  display: flex!important;
  flex-direction: column!important;
  gap: 18px!important;
}

#roomView .room-section {
  margin: 0!important;
}


#roomView .section-heading h2 {
  font-weight: 750!important;
  font-size: 16px!important;
}

#roomView .watch-grid,
#roomView .uniform-grid {
  display: grid!important;
  grid-template-columns: repeat(6,minmax(0,1fr))!important;
  gap: 7px!important;
}

#roomView .watch-card {
  aspect-ratio: auto!important;
  min-height: 0!important;
  height: 100%!important;
  border: 1px solid #29261f!important;
  border-radius: 7px!important;
  background: linear-gradient(180deg,#151514,#090909)!important;
  box-shadow: none!important;
}

#roomView .watch-image {
  width: 100%!important;
  aspect-ratio: 1/1.05!important;
  flex: 0 0 auto!important;
  min-height: 0!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  padding: 8px 7px 4px!important;
  box-sizing: border-box!important;
}

#roomView .watch-image img {
  width: 100%!important;
  height: 100%!important;
  max-width: 100%!important;
  max-height: 100%!important;
  object-fit: contain!important;
  object-position: center!important;
}

#roomView .watch-card-footer {
  display: flex!important;
  flex: 0 0 auto!important;
  min-height: 62px!important;
  padding: 8px 10px 9px!important;
  align-items: flex-start!important;
  justify-content: center!important;
  border-top: 1px solid #24211c!important;
  background: #0a0a0a!important;
  text-align: left!important;
  box-sizing: border-box!important;
}

#roomView .incoming-grid .watch-card-footer {
  display: flex!important;
}





#roomView .section-nav .room-nav-button,
#roomView .section-nav .room-nav-button:first-child,
#roomView .section-nav .incoming-nav-button {
  border: 1px solid #24211d!important;
  background: #0e0e0e!important;
  color: #918b82!important;
  box-shadow: none!important;
  transform: none!important;
}

#roomView .section-nav .room-nav-button:hover,
#roomView .section-nav .room-nav-button:first-child:hover {
  background: rgba(199,164,95,.09)!important;
  border-color: rgba(199,164,95,.28)!important;
  color: var(--gold-soft)!important;
  transform: none!important;
}

#roomView .wear-primary-row .wear-hero:hover {
  background: rgba(199,164,95,.14)!important;
  border-color: var(--gold)!important;
  color: var(--gold-soft)!important;
  box-shadow: 0 0 0 1px rgba(199,164,95,.08) inset!important;
  transform: none!important;
}

#roomView .hero-action-row {
  width: min(560px,100%)!important;
  margin: 0 auto!important;
  display: grid!important;
  grid-template-columns: 1fr 1fr!important;
  gap: 10px!important;
}

#roomView .hero-action-row .section-compare:hover {
  border-color: #76a9d8!important;
  background: linear-gradient(180deg,#447eaf,#2d5f89)!important;
  color: #fff!important;
  box-shadow: 0 0 0 1px rgba(118,169,216,.14) inset,0 7px 20px rgba(35,72,104,.24)!important;
  transform: none!important;
}

#roomView .hero-action-row .section-add:hover {
  border-color: #ead39c!important;
  background: linear-gradient(180deg,#ead08e,#c19a53)!important;
  color: #16110a!important;
  box-shadow: 0 0 0 1px rgba(255,232,176,.12) inset,0 7px 20px rgba(178,141,73,.20)!important;
  transform: none!important;
}

#roomView .wear-primary-row {
  order: 3!important;
  margin: 0!important;
  display: flex!important;
  flex-direction: column!important;
  align-items: center!important;
  justify-content: center!important;
  width: 100%!important;
  gap: 10px!important;
  max-width: 560px!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

#roomView .watch-title,
#roomView .watch-reference-nickname {
  width: 100%!important;
  font-size: 11px!important;
  line-height: 1.18!important;
  text-align: center!important;
  white-space: nowrap!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
}











.secondary-view-divider {
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  margin: 26px auto 30px;
  background: linear-gradient(90deg, transparent, rgba(212,175,91,.72) 14%, rgba(212,175,91,.72) 86%, transparent);
}

#dashboardView > .library-head,
#libraryView > .library-head,
#timelineView > .library-head {
  width: min(920px, calc(100% - 48px));
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}

#dashboardView > .library-head > div,
#libraryView > .library-head > div,
#timelineView > .library-head > div {
  width: 100%;
  text-align: center;
}

#dashboardView > .library-head h1,
#libraryView > .library-head h1,
#timelineView > .library-head h1 {
  margin-left: auto;
  margin-right: auto;
}

#dashboardView > .library-head p,
#libraryView > .library-head p,
#timelineView > .library-head p {
  text-align: center;
}

#libraryView .library-tools {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
}

#libraryView .library-tools input {
  grid-column: 1 / -1;
  width: 100%;
  text-align: left;
}

#libraryView .library-tools select {
  width: 100%;
}

#timelineView .timeline-page-head #addTimelineWear {
  align-self: center;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .secondary-view-divider,
#dashboardView > .library-head,
#libraryView > .library-head,
#timelineView > .library-head {
    width: min(100% - 28px, 920px);
  }
  #libraryView .library-tools {
    grid-template-columns: 1fr;
  }
  #libraryView .library-tools input {
    grid-column: auto;
  }
}

.topnav-btn[data-view]::before {
  display: inline-flex !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 10px 0 0 !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  font-size: 16px !important;
  transform-origin: center !important;
}

.topnav-btn[data-view="library"]::before {
  content: "⌕";
  margin-right: 9px;
  font-size: 18px !important;
  transform: translateY(-0.5px) scale(1.08) !important;
}

.dashboard-watch-link:hover,
.dashboard-watch-link:focus-visible,
.hall-of-fame-watch.dashboard-watch-link:hover,
.hall-of-fame-watch.dashboard-watch-link:focus-visible,
.rank-row.dashboard-watch-link:hover,
.rank-row.dashboard-watch-link:focus-visible {
  border-color: rgba(216,192,138,.55)!important;
  box-shadow: 0 0 0 1px rgba(216,192,138,.07),0 10px 24px rgba(0,0,0,.24)!important;
  outline: none!important;
}

#roomView .wear-primary-row .wear-hero {
  display: flex!important;
  width: min(560px,100%)!important;
  min-height: 58px!important;
  padding: 10px 14px!important;
  margin: 0 auto!important;
  align-items: center!important;
  justify-content: space-between!important;
  border: 1px solid #29261f!important;
  border-radius: 7px!important;
  border-color: #d8c08a!important;
  background: linear-gradient(180deg,rgba(255,255,255,.20) 0,rgba(255,255,255,.035) 19%,rgba(0,0,0,.10) 100%),
    linear-gradient(135deg,#d8c08a 0%,#c7a45f 52%,#b88f45 100%)!important;
  color: #17130d!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(79,52,13,.32),0 7px 18px rgba(0,0,0,.24)!important;
  transform: none!important;
}

#roomView .wear-primary-row .wear-hero-arrow {
  font-size: 17px!important;
  color: #17130d!important;
}

#roomView .wear-primary-row .wear-hero:hover,
#roomView .wear-primary-row .wear-hero:focus-visible {
  border-color: #ead59f!important;
  background: linear-gradient(180deg,rgba(255,255,255,.24) 0,rgba(255,255,255,.05) 19%,rgba(0,0,0,.08) 100%),
    linear-gradient(135deg,#e1ca94 0%,#d0ae68 52%,#bf974e 100%)!important;
  color: #17130d!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(79,52,13,.28),0 8px 20px rgba(0,0,0,.28)!important;
  transform: none!important;
  outline: none!important;
}

#roomView .wear-primary-row .wear-hero:active {
  transform: none!important;
}

#roomView .wear-primary-row .wear-hero strong {
  font-size: 10px!important;
  color: #120f0a!important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18)!important;
}

#roomView .wear-primary-row .wear-hero:hover strong,
#roomView .wear-primary-row .wear-hero:focus-visible strong {
  color: #120f0a!important;
}

#roomView .hero-action-row .section-compare {
  border: 1px solid #c7a45f!important;
  background: linear-gradient(180deg,#171512,#0d0c0a)!important;
  color: #eee7dc!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035)!important;
  transform: none!important;
}

#roomView .hero-action-row .section-compare > span:first-child {
  color: #d8c08a!important;
}

#roomView .hero-action-row .section-compare:hover,
#roomView .hero-action-row .section-compare:focus-visible {
  border-color: #e1ca94!important;
  background: linear-gradient(180deg,#211d17,#12100d)!important;
  color: #fffaf1!important;
  box-shadow: inset 0 0 0 1px rgba(216,192,138,.08),0 7px 18px rgba(0,0,0,.22)!important;
  transform: none!important;
  outline: none!important;
}

#roomView .hero-action-row .section-compare:active {
  transform: none!important;
}

#roomView .wear-primary-row .wear-hero strong,
#roomView .hero-action-row .section-compare,
#roomView .hero-action-row .section-add {
  font-family: inherit!important;
  font-size: 11px!important;
  font-weight: 700!important;
  letter-spacing: 0!important;
  text-transform: none!important;
}

#roomView .wear-primary-row .wear-hero small {
  margin-top: 3px!important;
  font-family: inherit!important;
  font-size: 10px!important;
  line-height: 1.2!important;
  font-weight: 500!important;
  letter-spacing: 0!important;
  text-transform: none!important;
  color: rgba(42,36,26,.58)!important;
}

#roomView .wear-primary-row .wear-hero .wear-hero-icon {
  background: rgba(20,16,10,.12)!important;
  border: 1px solid rgba(62,42,13,.16)!important;
  flex: 0 0 auto!important;
  color: #16120c!important;
  display: grid!important;
  width: 34px!important;
  height: 34px!important;
  border-radius: 9px!important;
}

#roomView .wear-primary-row .wear-hero .wear-hero-icon svg {
  display: block!important;
  fill: currentColor!important;
  width: 19px!important;
  height: 19px!important;
}

#roomView .hero-action-row .section-add {
  border: 1px solid #c7a45f!important;
  background: linear-gradient(180deg,#171512,#0d0c0a)!important;
  color: #eee7dc!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035)!important;
  transform: none!important;
}

#roomView .hero-action-row .section-add .action-icon {
  color: #d8c08a!important;
  font-size: 14px!important;
  line-height: 1!important;
  font-weight: 500!important;
}

#roomView .hero-action-row .section-add:hover,
#roomView .hero-action-row .section-add:focus-visible {
  border-color: #e1ca94!important;
  background: linear-gradient(180deg,#211d17,#12100d)!important;
  color: #fffaf1!important;
  box-shadow: inset 0 0 0 1px rgba(216,192,138,.08),0 7px 18px rgba(0,0,0,.22)!important;
  transform: none!important;
  outline: none!important;
}

#roomView .hero-action-row .section-add:active {
  transform: none!important;
}

#roomView .watch-title {
  width: 100%!important;
  white-space: normal!important;
  overflow: visible!important;
  text-overflow: clip!important;
  text-align: center!important;
  min-height: 0!important;
  max-height: none!important;
  margin: 0 0 5px!important;
  font-size: 12.65px!important;
  line-height: 1.16!important;
  font-weight: 800!important;
  color: #f3f0ea!important;
}

#roomView .watch-reference-nickname,
#roomView .watch-dial,
#roomView .watch-size {
  margin: 0!important;
  font-weight: 400!important;
  color: #9b958c!important;
}

#roomView .watch-meta {
  display: flex!important;
  align-items: baseline!important;
  text-align: center!important;
  justify-content: center!important;
  position: relative!important;
  width: 100%!important;
  margin-top: 6px!important;
  padding-top: 7px!important;
  gap: 5px!important;
}

#roomView .watch-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 1px;
  background: rgba(201,170,112,.14);
}

#roomView .overall-score {
  font-size: 12px!important;
  font-weight: 800!important;
  color: #d5b779!important;
}

#roomView .overall-label {
  font-size: 7px!important;
  letter-spacing: .05em!important;
  color: #9b958c!important;
}

@media(max-width:1100px) and (min-width:621px) {
  #roomView .watch-title,
#roomView .watch-reference-nickname {
    font-size: 9.5px!important;
  }
  #roomView .watch-title {
    font-size: 10.35px!important;
    margin-bottom: 3px!important;
  }
  #roomView .watch-reference-nickname {
    font-size: 8.9px!important;
  }
  #roomView .watch-dial {
    font-size: 8.4px!important;
  }
  #roomView .watch-size {
    font-size: 9.4px!important;
  }
  #roomView .watch-meta {
    margin-top: 4px!important;
    padding-top: 5px!important;
  }
}

#roomView .watch-reference-nickname {
  font-weight: 400!important;
  font-size: 10.5px!important;
  line-height: 1.12!important;
  color: #aaa49b!important;
}

#roomView .watch-dial {
  width: 100%!important;
  margin-top: 1px!important;
  text-align: center!important;
  white-space: nowrap!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  font-size: 9.75px!important;
  line-height: 1.12!important;
  color: #f3f0ea!important;
  font-weight: 500!important;
}

#roomView .watch-size {
  width: 100%!important;
  margin-top: 1px!important;
  font-weight: 500!important;
  text-align: center!important;
  font-size: 11px!important;
  line-height: 1.12!important;
  color: #9b958c!important;
}

.watch-image,
.compare-image,
.compare-ai-winner-image,
.compare-matrix-image,
.highest-rated-image,
.profile-image,
.wear-select-card .watch-image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  isolation: isolate;
}

.watch-image img,
.compare-image img,
.compare-ai-winner-image img,
.compare-matrix-image img,
.highest-rated-image img,
.profile-image img,
.wear-select-card .watch-image img {
  border-radius: 12px !important;
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 0%, #000 76%, rgba(0,0,0,.94) 82%, rgba(0,0,0,.62) 91%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 0%, #000 76%, rgba(0,0,0,.94) 82%, rgba(0,0,0,.62) 91%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

.watch-image::after,
.compare-image::after,
.compare-ai-winner-image::after,
.compare-matrix-image::after,
.highest-rated-image::after,
.profile-image::after,
.wear-select-card .watch-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 28px rgba(5,5,5,.30);
}

#roomView .watch-card .watch-image {
  border-radius: 0 !important;
  overflow: visible !important;
}

#roomView .watch-card .watch-tile-photo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  clip-path: inset(0 round 12px) !important;
  isolation: isolate !important;
  background: #0b0b0b !important;
}

#roomView .watch-card .watch-tile-photo img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  clip-path: inset(0 round 12px) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#roomView .watch-card .watch-tile-photo::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 12px !important;
  background: linear-gradient(to right, rgba(10,10,10,.44), transparent 9%, transparent 91%, rgba(10,10,10,.44)),
    linear-gradient(to bottom, rgba(10,10,10,.34), transparent 8%, transparent 92%, rgba(10,10,10,.34)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 0 24px rgba(5,5,5,.30) !important;
}

#roomView .room-slot-filled .watch-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #0b0c0c !important;
}

#roomView .room-slot-filled .watch-tile-photo {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: inherit !important;
  clip-path: none !important;
  background: #0b0c0c !important;
}

#roomView .room-slot-filled .watch-meta::before {
  display: none !important;
}

#roomView .room-empty-slot > span {
  color: #8f887d!important;
  font-size: 12px!important;
  font-weight: 600!important;
  letter-spacing: .04em!important;
  text-transform: none!important;
  display: none !important;
}

@media (max-width: 620px) {
  #roomView .room-slot-filled .watch-card {
    aspect-ratio: .92 / 1 !important;
  }
}

#roomView .room-slot-filled .watch-card {
  position: relative !important;
  aspect-ratio: 1.13 / 1 !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(214,181,105,.22) !important;
  background: #0b0c0c !important;
  overflow: hidden !important;
  border-color: rgba(214,181,105,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#roomView .room-slot-filled .watch-tile-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: inherit !important;
  clip-path: none !important;
  object-fit: cover !important;
  object-position: center 43% !important;
  transform: scale(.92) !important;
  transform-origin: center 43% !important;
  filter: saturate(.96) contrast(1.01) brightness(.97) !important;
}

#roomView .room-slot-filled .watch-tile-photo::after {
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  background: linear-gradient(180deg,
      rgba(5,6,6,.01) 0%,
      rgba(5,6,6,.01) 52%,
      rgba(7,8,8,.20) 61%,
      rgba(8,9,9,.72) 75%,
      #090a0a 94%),
    radial-gradient(ellipse 96% 92% at 50% 38%, transparent 64%, rgba(7,8,8,.14) 80%, rgba(7,8,8,.54) 100%) !important;
}

#roomView .room-slot-filled .watch-dial {
  color: rgba(239,235,226,.68) !important;
}

#roomView #incomingGrid .room-slot-filled .watch-card-footer {
  min-height: 98px !important;
}

#roomView #incomingGrid .room-slot-filled .watch-title,
#roomView #incomingGrid .room-slot-filled .watch-reference-nickname,
#roomView #incomingGrid .room-slot-filled .watch-dial,
#roomView #incomingGrid .room-slot-filled .watch-size {
  max-width: calc(100% - 58px) !important;
}

@media (max-width: 900px) and (min-width: 621px) {
  #roomView .room-slot-filled .watch-card-footer {
    min-height: 74px !important;
    padding: 27px 8px 8px !important;
  }
  #roomView .room-slot-filled .watch-title {
    font-size: 9px !important;
  }
  #roomView .room-slot-filled .watch-reference-nickname,
#roomView .room-slot-filled .watch-dial,
#roomView .room-slot-filled .watch-size {
    font-size: 7px !important;
  }
  #roomView .room-slot-filled .overall-score {
    font-size: 10px !important;
  }
}

#roomView .room-slot-filled .watch-card::before {
  position: absolute !important;
  z-index: 8 !important;
  color: #e5bf63 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.8) !important;
  top: 8px !important;
  left: 10px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  opacity: .78 !important;
  display: none!important;
  content: none!important;
}

#roomView #watchGrid .room-slot,
#roomView #incomingGrid .room-slot {
  aspect-ratio: .94 / 1!important;
  min-height: 0!important;
}

#roomView #watchGrid .room-slot-filled .watch-card,
#roomView #incomingGrid .room-slot-filled .watch-card {
  aspect-ratio: .94 / 1!important;
  min-height: 0!important;
}

#roomView .room-slot-filled .watch-title {
  color: #f4f0e8 !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 5px !important;
  font-size: 12px!important;
  margin-bottom: 5px!important;
}

#roomView .room-slot-filled .watch-reference-nickname,
#roomView .room-slot-filled .watch-dial,
#roomView .room-slot-filled .watch-size {
  font-weight: 400 !important;
  margin: 0 !important;
  color: rgba(239,235,226,.58) !important;
  display: block!important;
  font-size: 9px!important;
  line-height: 1.28!important;
  max-width: calc(100% - 60px)!important;
}

#roomView .room-slot-filled .watch-reference-nickname::after,
#roomView .room-slot-filled .watch-dial::after {
  content: none!important;
}

#roomView #incomingGrid {
  grid-template-columns: repeat(6,minmax(0,1fr))!important;
  align-items: stretch!important;
}

#roomView #incomingGrid .room-empty-slot,
#roomView #incomingGrid .room-slot-filled,
#roomView #incomingGrid .room-slot-filled .watch-card {
  width: 100%!important;
  height: auto!important;
  aspect-ratio: .94 / 1!important;
  min-height: 0!important;
}

#roomView #incomingGrid .watch-placeholder {
  transform: scale(.82)!important;
  transform-origin: center center!important;
}

#roomView .room-empty-slot {
  aspect-ratio: 1/1.34!important;
  position: relative !important;
  min-height: 122px !important;
  border-radius: 15px !important;
  border: 1px dashed rgba(225,223,216,.15) !important;
  background: linear-gradient(145deg,rgba(18,20,20,.72),rgba(8,9,9,.82)) !important;
  color: rgba(236,232,222,.38) !important;
  opacity: 1 !important;
  font-size: 0 !important;
  letter-spacing: .08em !important;
  cursor: pointer!important;
  appearance: none!important;
  font-family: inherit!important;
  text-align: center!important;
  padding: 0!important;
  transition: border-color .16s ease,background-color .16s ease,color .16s ease!important;
}

#roomView #watchGrid .room-empty-slot,
#roomView #incomingGrid .room-empty-slot {
  aspect-ratio: .94 / 1!important;
  min-height: 0!important;
}

#roomView .room-empty-slot::after {
  content: "EMPTY SLOT" !important;
  display: block !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: rgba(235,232,223,.23)!important;
}

#roomView .room-empty-slot::before {
  content: "+" !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(235,232,223,.16) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  color: rgba(235,232,223,.34)!important;
  border-color: rgba(235,232,223,.12)!important;
}

#roomView .room-empty-slot:hover,
#roomView .room-empty-slot:focus-visible {
  border-color: rgba(214,181,105,.42)!important;
  background: linear-gradient(145deg,rgba(24,22,17,.78),rgba(9,9,9,.88))!important;
  outline: none!important;
  transform: none!important;
}

#roomView .room-empty-slot:hover::before,
#roomView .room-empty-slot:focus-visible::before {
  color: #d9b45e!important;
  border-color: rgba(217,180,94,.42)!important;
}

#roomView .room-empty-slot:hover::after,
#roomView .room-empty-slot:focus-visible::after {
  color: rgba(235,232,223,.48)!important;
}

#roomView #watchGrid .room-slot,
#roomView #watchGrid .room-slot-filled .watch-card,
#roomView #incomingGrid .room-slot,
#roomView #incomingGrid .room-slot-filled .watch-card,
#roomView #incomingGrid .room-empty-slot {
  aspect-ratio: .78 / 1!important;
}

#roomView #watchGrid .room-slot-filled .watch-tile-photo img,
#roomView #incomingGrid .room-slot-filled .watch-tile-photo img {
  transform: scale(.88)!important;
  transform-origin: center 40%!important;
  object-position: center 40%!important;
}

#roomView #watchGrid,
#roomView #incomingGrid {
  row-gap: 16px!important;
}

@media(max-width:560px) {
  .topnav-btn {
    padding: 9px 10px;
  }
  .wear-selection-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .watch-picker-group-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .wear-select-card {
    min-height: 190px;
    padding: 10px;
  }
}

#roomView #incomingGrid .incoming-unrated .watch-meta {
  display: none!important;
  border-top: 0!important;
}

#roomView #incomingGrid .incoming-unrated .watch-card-footer::after {
  content: "UNRATED"!important;
  position: absolute!important;
  right: 12px!important;
  bottom: 10px!important;
  color: rgba(239,235,226,.38)!important;
  font-size: 8px!important;
  font-weight: 600!important;
  letter-spacing: .12em!important;
  text-transform: uppercase!important;
}

#roomView #watchGrid .room-slot {
  position: relative!important;
  border: 1px solid rgba(214,181,105,.18)!important;
  border-radius: 15px!important;
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.24)),
    #090909!important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.035),
    inset 0 -2px 2px rgba(0,0,0,.75),
    0 1px 0 rgba(255,255,255,.015)!important;
  padding: 7px!important;
}

#roomView #watchGrid .room-slot::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 8;
  box-shadow: inset 0 18px 28px rgba(0,0,0,.72),
    inset 0 -12px 24px rgba(0,0,0,.58),
    inset 13px 0 20px rgba(0,0,0,.56),
    inset -13px 0 20px rgba(0,0,0,.56),
    inset 0 0 0 1px rgba(214,181,105,.08);
}

#roomView #watchGrid .room-slot-filled .watch-card {
  border-radius: 11px!important;
  overflow: hidden!important;
  background: radial-gradient(ellipse at 50% 34%, rgba(60,42,27,.10), transparent 58%),
    linear-gradient(180deg,#10100f 0%,#080808 100%)!important;
  border: 1px solid rgba(255,255,255,.025)!important;
  /* Recessed/embedded look: no outer drop shadow (that reads as
     "floating above the surface"). Instead, layered inset shadows --
     strong from the top (the recess lip casting a shadow down),
     softer from the bottom (fully enclosed, not just top-lit), a thin
     dark edge (the recess wall), and a faint bottom highlight (light
     catching the inner lip). */
  box-shadow: inset 0 8px 14px rgba(0,0,0,.6),
    inset 0 -3px 6px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.06)!important;
}

#roomView #watchGrid .room-slot-filled .watch-image {
  border-radius: 10px 10px 7px 7px!important;
  overflow: hidden!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 14px 20px rgba(0,0,0,.30),
    inset 0 -10px 18px rgba(0,0,0,.32)!important;
}

#roomView #incomingGrid button.room-slot.room-empty-slot::before,
#roomView #incomingGrid button.room-slot.room-empty-slot::after,
#roomView #incomingGrid button.room-slot.room-empty-slot > span {
  position: static!important;
  inset: auto!important;
  margin: 0!important;
  transform: none!important;
  flex: 0 0 auto!important;
}

#roomView #incomingGrid button.room-slot.room-empty-slot {
  display: flex!important;
  flex-direction: column!important;
  justify-content: center!important;
  align-items: center!important;
  padding: 0!important;
  text-align: center!important;
  gap: 10px!important;
}

#roomView #incomingGrid button.room-slot.room-empty-slot > span {
  color: rgba(235,232,223,.30)!important;
  font-size: 10px!important;
  line-height: 1!important;
  font-weight: 500!important;
  letter-spacing: .03em!important;
  text-transform: none!important;
  display: none!important;
}

#roomView #incomingGrid button.room-slot.room-empty-slot::after {
  content: "EMPTY SLOT"!important;
  display: block!important;
  position: static!important;
  inset: auto!important;
  margin: 0!important;
  transform: none!important;
  color: rgba(235,232,223,.22)!important;
  font-size: 8px!important;
  line-height: 1!important;
  font-weight: 600!important;
  letter-spacing: .10em!important;
}

@media(max-width:1100px) {
  .topbar {
    height: auto;
    min-height: 76px;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .topnav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .nav-divider {
    display: none;
  }
  #roomView.view {
    padding-left: 10px!important;
    padding-right: 10px!important;
  }


  #roomView .watch-grid,
#roomView .uniform-grid {
    gap: 5px!important;
  }
  #roomView .watch-title {
    font-size: 9.5px!important;
  }
  #roomView .overall-score {
    font-size: 10px!important;
  }
}

@media(max-width:620px) {
  .health-observations p {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .dashboard-info:after {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 18px;
    width: auto;
  }
  #dashboardCards.dashboard-grid {
    grid-template-columns: 1fr;
  }
  #dashboardCards .dashboard-card {
    height: 106px;
    min-height: 106px;
  }
  .dashboard-card-highest {
    grid-column: auto;
  }
  .hall-of-fame-list {
    grid-template-columns: 1fr;
  }
  .rotation-counter-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .watch-card {
    min-height: 250px;
  }
  .watch-image {
    padding: 12px 9px 7px;
  }
  .watch-card-footer {
    flex-basis: 65px;
    padding: 8px;
  }
  .watch-title {
    font-size: 11px;
  }
  .watchbox-frame {
    padding: 12px;
  }
  .section-nav .section-add {
    margin-left: 0;
  }
  .section-heading h2 {
    font-size: 25px;
  }
  .winder-card {
    padding: 10px;
  }
  .winder-card .watch-card {
    border-width: 7px;
  }
  .wear-hero {
    padding: 20px;
  }
  .wear-hero strong {
    font-size: 20px;
  }
  .wear-primary-row .wear-hero strong {
    font-size: 20px;
  }
  .wear-primary-row .wear-hero-icon {
    width: 46px;
    height: 46px;
  }
  .section-nav .room-nav-button {
    width: 100%;
    padding: 0 10px;
  }
  .section-nav-actions {
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .section-nav .section-nav-actions button {
    height: 40px;
    padding: 0 13px;
    width: 100%;
  }
  .wear-primary-row .wear-hero {
    min-height: 78px;
    padding: 15px 16px;
    width: 50%;
    min-width: 250px;
    max-width: 100%;
  }
  .hero-action-row {
    gap: 8px;
  }
  .section-nav {
    gap: 8px;
    padding: 9px;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .watch-grid,.uniform-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
  }

  .wear-primary-row {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%!important;
    min-width: 0!important;
    max-width: none!important;
  }
  .watch-grid,.uniform-grid,.winders-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
  }
  .room-empty-slot {
    min-height: 220px;
  }
  .winder-empty-slot {
    min-height: 260px;
  }
  .room-draggable {
    cursor: pointer;
  }
  .weight-config-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .weight-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .watch-location-readonly {
    align-items: stretch;
    flex-direction: column;
  }
  .watch-location-readonly .secondary-button {
    width: 100%;
  }
  #roomView.view {
    padding: 74px 6px 28px!important;
  }
  .menu-toggle {
    top: 14px!important;
    left: 10px!important;
    width: 42px!important;
    height: 42px!important;
  }




  #roomView .today-summary {
    min-height: 40px!important;
    padding: 8px 10px!important;
  }
  #roomView .today-summary span {
    font-size: 8px!important;
  }
  #roomView .today-summary strong {
    font-size: 10px!important;
  }
  #roomView .hero-action-row .section-compare,
#roomView .hero-action-row .section-add {
    height: 36px!important;
    font-size: 10px!important;
  }
  #roomView .section-nav {
    top: 0!important;
    gap: 3px!important;
    padding: 4px!important;
    margin-bottom: 11px!important;
  }
  #roomView .section-nav .room-nav-button {
    min-height: 31px!important;
    padding: 0 2px!important;
    font-size: 8px!important;
  }
  #roomView .room-stack {
    gap: 14px!important;
  }
  #roomView .section-heading h2 {
    font-size: 11px!important;
  }
  #roomView .watch-grid,
#roomView .uniform-grid {
    gap: 3px!important;
  }
  #roomView .wear-primary-row .wear-hero {
    min-height: 48px!important;
    padding: 9px 11px!important;
  }
  #roomView .hero-action-row {
    gap: 6px!important;
  }
  #roomView .watch-title {
    font-size: 12px!important;
  }
}

@media(max-width:640px) {

}

#roomView #incomingGrid .room-slot-filled .watch-card {
  aspect-ratio: .94 / 1!important;
  min-height: 0!important;
}

#roomView #incomingGrid .room-slot-filled .watch-tile-photo img {
  transform: scale(.88)!important;
  transform-origin: center 40%!important;
  object-position: center 40%!important;
}

#roomView #watchGrid .room-slot-filled .watch-title,
#roomView #watchGrid .room-slot-filled .watch-reference-nickname,
#roomView #watchGrid .room-slot-filled .watch-dial,
#roomView #watchGrid .room-slot-filled .watch-size {
  transform: translateX(5px)!important;
}

#roomView #watchGrid .room-slot-filled .watch-meta {
  transform: translateX(-5px)!important;
}

#roomView #watchGrid,
#roomView #drawerGrid,
#roomView #windersGrid {
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: stretch !important;
}

#roomView #watchGrid > .room-slot,
#roomView #drawerGrid > .room-slot,
#roomView #windersGrid > .room-slot {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#roomView #watchGrid > .room-slot-filled > .watch-card,
#roomView #drawerGrid > .room-slot-filled > .watch-card,
#roomView #windersGrid > .room-slot-filled > .watch-card {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

#roomView button.room-slot.room-empty-slot {
  flex-direction: column!important;
  gap: 11px!important;
  padding: 0!important;
  text-align: center!important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: .94 / 1 !important;
  min-height: 0 !important;
  border: 1px dashed #2c2924 !important;
  border-radius: 7px !important;
  background: #090909 !important;
  color: #8b7448 !important;
  box-shadow: inset 0 0 22px rgba(0,0,0,.72) !important;
  font: 400 18px/1 Arial,sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#roomView button.room-slot.room-empty-slot::before,
#roomView button.room-slot.room-empty-slot::after {
  position: static!important;
  inset: auto!important;
  margin: 0!important;
  flex: 0 0 auto!important;
  content: none !important;
  display: none !important;
}

#roomView button.room-slot.room-empty-slot > span {
  position: static!important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
}

#roomView button.room-slot.room-empty-slot:hover,
#roomView button.room-slot.room-empty-slot:focus-visible {
  color: #d9b45e !important;
  border-color: rgba(217,180,94,.45) !important;
}

@media (max-width:900px) {
  #roomView #watchGrid,
  #roomView #drawerGrid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  #roomView #windersGrid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:560px) {
  #roomView #watchGrid,
  #roomView #drawerGrid,
  #roomView #windersGrid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

/* Removed dead rule: #roomView #windersSection .winders-enclosure-frame
   (originally referenced ../assets/winders-enclosure.png). Every property
   in this rule was unconditionally overridden by the higher-specificity
   'html body #roomView #windersSection .winders-enclosure-frame' rule
   later in cascade (including overflow: hidden -> visible), verified
   before removal. See css/MERGE_REPORT.txt / git log for detail. */

#roomView #windersSection .winders-enclosure-frame::before,
#roomView #windersSection .winders-enclosure-frame::after {
  content: none !important;
  display: none !important;
}

#roomView #windersGrid {
  position: absolute !important;
  left: 4.82% !important;
  top: 16.92% !important;
  width: 90.43% !important;
  height: 60.74% !important;
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 4.40% !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

#roomView #windersGrid > .room-slot-filled > .watch-card,
#roomView #windersGrid > button.room-slot.room-empty-slot {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 2px !important;
}

#roomView #windersGrid .watch-card {
  display: flex !important;
  flex-direction: column !important;
}

#roomView #windersGrid .watch-image {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 5px 6px 0 !important;
}

#roomView #windersGrid .watch-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#roomView #windersGrid .watch-card-footer {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 5px 7px 6px !important;
}

#roomView #watchBoxSection .watchbox-leather-frame {
  background-image: linear-gradient(rgba(72,34,14,.18),rgba(40,18,8,.28)),
    url('../assets/watchbox-leather.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(173,104,49,.78) !important;
}

#roomView #drawerSection .drawer-velvet-frame {
  background-image: linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.42)),
    url('../assets/drawer-velvet.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(88,88,88,.72) !important;
}

#roomView #drawerGrid > button.room-slot.room-empty-slot,
#roomView #drawerGrid > .room-slot.room-empty-slot {
  border: 1px solid rgba(216,183,108,.42) !important;
  outline: 1px solid rgba(255,255,255,.055) !important;
  outline-offset: -5px !important;
  background: rgba(4,4,5,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55) !important;
}

#roomView #windersGrid .room-slot-filled .watch-tile-photo,
#roomView #windersGrid .room-slot-filled .watch-tile-photo img {
  width: 100% !important;
  height: 100% !important;
}

#roomView #windersGrid > .room-slot {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#roomView #windersGrid .room-slot-filled .watch-image {
  top: 0 !important;
  right: 0 !important;
  bottom: 58px !important;
  left: 0 !important;
  box-sizing: border-box !important;
  align-items: flex-start !important;
  justify-content: center !important;
  place-items: center !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #0b0c0c !important;
}

#roomView #windersGrid .room-slot-filled .watch-tile-photo {
  align-items: flex-start !important;
  justify-content: center !important;
  inset: 0 !important;
  transform-origin: 50% 50% !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #0b0c0c !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

#roomView #windersGrid .room-slot-filled .watch-tile-photo img {
  margin-top: 0 !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  transform: none !important;
  border-radius: inherit !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

#roomView #windersGrid .room-slot-filled .watch-tile-photo::after {
  background: linear-gradient(180deg,transparent 72%,rgba(5,6,6,.30) 100%) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  inset: 0 !important;
  border-radius: inherit !important;
}

#roomView #windersGrid .room-slot-filled .watch-card-footer {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 7 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 104px !important;
  padding: 34px 12px 12px !important;
  border: 0 !important;
  background: linear-gradient(180deg,transparent 0%,rgba(8,9,9,.42) 26%,rgba(8,9,9,.93) 62%,#090a0a 100%) !important;
  box-shadow: none !important;
  display: block !important;
  text-align: left !important;
}

#roomView #windersGrid > button.room-slot.room-empty-slot {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: .94 / 1 !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
}

#roomView #watchBoxGrid > .room-slot,
#roomView #drawerGrid > .room-slot {
  position: relative !important;
  border: 1px solid rgba(210,172,96,.28) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,rgba(0,0,0,.42),rgba(12,10,8,.72)) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.95),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 1px 0 rgba(255,255,255,.02) !important;
  overflow: hidden !important;
}

#roomView #watchBoxGrid > .room-slot::before,
#roomView #drawerGrid > .room-slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid rgba(255,255,255,.045) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 8px 16px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(213,177,104,.12) !important;
}

#roomView .room-slot-filled .watch-card-footer {
  z-index: 7 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
  text-align: left !important;
  min-height: 104px!important;
  padding: 34px 12px 12px!important;
  background: linear-gradient(180deg,transparent 0%,rgba(8,9,9,.42) 26%,rgba(8,9,9,.93) 62%,#090a0a 100%)!important;
  position: absolute !important;
}

#roomView .room-slot-filled .watch-meta {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  top: auto !important;
  width: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  text-align: right !important;
  border-top: 1px solid rgba(205,169,99,.34) !important;
}

#roomView .room-slot-filled .overall-score,
#roomView .room-slot-filled .overall-label {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}

#roomView .room-slot-filled .overall-score {
  color: #e7c36f !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#roomView .room-slot-filled .overall-label {
  color: rgba(239,235,226,.42) !important;
  font-size: 6px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#roomView .room-slot-filled .watch-title,
#roomView .room-slot-filled .watch-reference-nickname,
#roomView .room-slot-filled .watch-dial,
#roomView .room-slot-filled .watch-size {
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: calc(100% - 68px) !important;
}

#roomView #watchBoxGrid > button.room-empty-slot,
#roomView #drawerGrid > button.room-empty-slot {
  color: var(--gold-soft) !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.12) !important;
  border: 1px solid rgba(214,175,93,.28) !important;
  box-shadow: inset 0 5px 10px rgba(0,0,0,.66),
    0 0 0 1px rgba(0,0,0,.64) !important;
}

#roomView #watchBoxGrid > .room-slot,
#roomView #watchBoxGrid > .room-slot:hover,
#roomView #watchBoxGrid > .room-slot-filled > .watch-card,
#roomView #watchBoxGrid > .room-slot-filled > .watch-card:hover,
#roomView #watchBoxGrid .watch-card:hover,
#roomView #watchBoxGrid .watch-tile-photo:hover,
#roomView #watchBoxGrid .watch-image:hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

#roomView #watchBoxGrid > .room-slot-filled:hover {
  filter: none !important;
}

#roomView #watchBoxGrid > .room-slot-filled:hover > .watch-card {
  box-shadow: 0 0 0 1px rgba(0,0,0,.82),
    0 4px 8px rgba(0,0,0,.54),
    0 0 0 1px rgba(212,169,84,.14) !important;
}

#roomView .watch-card:hover,
#roomView .room-slot:hover,
#roomView .room-slot:hover > .watch-card,
#roomView .watch-image:hover,
#roomView .watch-tile-photo:hover,
#roomView .watch-tile-photo img:hover,
#roomView .room-empty-slot:hover,
#roomView .section-nav button:hover,
#roomView .topnav-btn:hover,
#roomView .wear-hero:hover,
#roomView .room-lock-button:hover {
  translate: none !important;
  scale: 1 !important;
}

#roomView #watchBoxGrid .watch-card,
#roomView #watchBoxGrid .watch-card:hover,
#roomView #watchBoxGrid .room-slot,
#roomView #watchBoxGrid .room-slot:hover {
  transform: none !important;
}

#roomView #drawerGrid .watch-card,
#roomView #drawerGrid .watch-card:hover,
#roomView #drawerGrid .room-slot,
#roomView #drawerGrid .room-slot:hover {
  transform: none !important;
}

#roomView #windersGrid .watch-card,
#roomView #windersGrid .watch-card:hover {
  transform: none !important;
}

#roomView #windersGrid .room-slot,
#roomView #windersGrid .room-slot:hover,
#roomView #windersGrid .winder-card,
#roomView #windersGrid .winder-card:hover {
  transform: none !important;
}

.dashboard-card:hover,
.dashboard-panel:hover,
.timeline-panel:hover,
.rank-row:hover,
.dashboard-watch-link:hover,
.hall-of-fame-watch:hover,
.compare-chip:hover,
.wear-stats > div:hover,
.section-nav button:hover,
.topnav-btn:hover,
button:hover,
button:active,
.compare-chip:active,
.icon-button:active {
  transform: none !important;
  translate: none !important;
}

.dashboard-watch-link:hover,
.hall-of-fame-watch.dashboard-watch-link:hover,
.rank-row.dashboard-watch-link:hover {
  transform: none !important;
}

.watch-card,
.room-slot,
.winder-card,
.dashboard-card,
.dashboard-panel,
.timeline-panel,
.rank-row,
.dashboard-watch-link,
.compare-chip,
.section-nav button,
.topnav-btn,
button {
  transition-property: color, background-color, border-color, box-shadow, filter, opacity !important;
}

#roomView #watchBoxGrid > .room-slot {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: 10px !important;
  border: 2px solid rgba(40,17,6,.96) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg,rgba(18,6,2,.68),rgba(67,28,10,.22)),
    url('../assets/watchbox-leather.jpg') center/135% auto !important;
  box-shadow: inset 0 14px 18px rgba(0,0,0,.92),
    inset 10px 0 14px rgba(0,0,0,.72),
    inset 0 -3px 2px rgba(255,192,108,.24),
    inset -3px 0 2px rgba(255,163,71,.16),
    0 1px 0 rgba(255,201,125,.16) !important;
}

#roomView #watchBoxGrid > .room-slot::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  inset: 3px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg,rgba(0,0,0,.88) 0 12%,transparent 30%),
    linear-gradient(315deg,rgba(255,183,89,.16),transparent 28%) !important;
  box-shadow: inset 0 0 0 2px rgba(8,3,1,.96),
    inset 0 0 0 5px rgba(146,73,25,.18) !important;
}

#roomView #drawerGrid > .room-slot {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: 10px !important;
  border: 2px solid rgba(18,18,18,.98) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg,rgba(0,0,0,.58),rgba(13,13,13,.28)),
    url('../assets/drawer-velvet.jpg') center/140% auto !important;
  box-shadow: inset 0 15px 20px rgba(0,0,0,.96),
    inset 10px 0 15px rgba(0,0,0,.86),
    inset 0 -3px 2px rgba(255,255,255,.075),
    inset -3px 0 2px rgba(193,160,92,.09),
    0 1px 0 rgba(255,255,255,.025) !important;
}

#roomView #drawerGrid > .room-slot::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  inset: 3px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg,rgba(0,0,0,.94) 0 13%,transparent 31%),
    linear-gradient(315deg,rgba(255,255,255,.055),transparent 27%) !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.98),
    inset 0 0 0 5px rgba(145,119,68,.08) !important;
}

#roomView #watchBoxGrid > .room-slot-filled > .watch-card,
#roomView #drawerGrid > .room-slot-filled > .watch-card {
  background: transparent !important;
  transform: none !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.035) !important;
  border-radius: 9px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.92),
    0 5px 10px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#roomView #watchBoxGrid > button.room-slot.room-empty-slot,
#roomView #drawerGrid > button.room-slot.room-empty-slot {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#roomView #windersGrid > .room-slot-filled > .watch-card {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: .94 / 1 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#111312,#080909) !important;
  position: relative !important;
  z-index: 3 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  transform: none !important;
  box-shadow: 0 16px 26px rgba(0,0,0,.82),
    0 5px 10px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px rgba(202,161,82,.13) !important;
}

html body #menuToggle.menu-toggle {
  display: flex!important;
  visibility: visible!important;
  opacity: 1!important;
  pointer-events: auto!important;
}

html body.menu-open .topbar {
  transform: translateX(0)!important;
  visibility: visible!important;
  pointer-events: auto!important;
}

html body:not(.menu-open) .topbar {
  pointer-events: none!important;
}

html body.menu-open #menuBackdrop {
  display: block!important;
  visibility: visible!important;
  pointer-events: auto!important;
}

.watch-card,
.room-slot,
.watch-image,
.watch-tile-photo,
.watch-tile-photo img,
.winder-card,
.dashboard-card,
.dashboard-panel,
.timeline-panel,
.rank-row,
.dashboard-watch-link,
.hall-of-fame-watch,
.compare-chip,
.wear-stats > div,
.section-nav button,
.topnav-btn,
.room-lock-button,
.icon-button,
button,
a {
  transition-property: color, background-color, border-color, box-shadow, filter, opacity !important;
}

.watch-card,
.watch-card:hover,
.watch-card:focus,
.watch-card:focus-visible,
.watch-card:active,
.room-slot,
.room-slot:hover,
.room-slot:focus,
.room-slot:focus-visible,
.room-slot:active,
.watch-image,
.watch-image:hover,
.watch-tile-photo,
.watch-tile-photo:hover,
.watch-tile-photo img,
.watch-tile-photo img:hover,
.dashboard-card,
.dashboard-card:hover,
.dashboard-panel,
.dashboard-panel:hover,
.timeline-panel,
.timeline-panel:hover,
.rank-row,
.rank-row:hover,
.dashboard-watch-link,
.dashboard-watch-link:hover,
.hall-of-fame-watch,
.hall-of-fame-watch:hover,
.compare-chip,
.compare-chip:hover,
.compare-chip:active,
.wear-stats > div,
.wear-stats > div:hover,
.section-nav button,
.section-nav button:hover,
.section-nav button:active,
.topnav-btn,
.topnav-btn:hover,
.topnav-btn:active,
.room-lock-button,
.room-lock-button:hover,
.room-lock-button:active,
.icon-button,
.icon-button:hover,
.icon-button:active,
button:hover,
button:active,
a:hover,
a:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

html body #roomView #watchBoxGrid .room-slot,
html body #roomView #watchBoxGrid .room-slot:hover,
html body #roomView #watchBoxGrid .room-slot:focus,
html body #roomView #watchBoxGrid .room-slot:active,
html body #roomView #watchBoxGrid .watch-card,
html body #roomView #watchBoxGrid .watch-card:hover,
html body #roomView #watchBoxGrid .watch-card:focus,
html body #roomView #watchBoxGrid .watch-card:active,
html body #roomView #watchBoxGrid .watch-image,
html body #roomView #watchBoxGrid .watch-image:hover,
html body #roomView #watchBoxGrid .watch-tile-photo,
html body #roomView #watchBoxGrid .watch-tile-photo:hover,
html body #roomView #watchBoxGrid .watch-tile-photo img,
html body #roomView #watchBoxGrid .watch-tile-photo img:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

html body #roomView #watchBoxSection .watchbox-isolated-frame {
  padding: 18px !important;
  border-radius: 28px !important;
  background: linear-gradient(rgba(73,29,8,.08),rgba(32,10,2,.15)),
    url('../assets/watchbox-leather.jpg') center/cover !important;
  border: 1px solid rgba(183,104,39,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,218,164,.12),
    inset 0 -10px 24px rgba(49,14,2,.22) !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated {
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot {
  position: relative !important;
  min-width: 0 !important;
  aspect-ratio: .77 / 1 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  border: 2px solid rgba(22,8,2,.98) !important;
  background: linear-gradient(145deg,rgba(10,2,0,.64),rgba(78,31,9,.18)),
    url('../assets/watchbox-leather.jpg') center/180% auto !important;
  box-shadow: inset 0 15px 20px rgba(0,0,0,.92),
    inset 12px 0 17px rgba(0,0,0,.78),
    inset 0 -3px 2px rgba(255,191,99,.20),
    inset -3px 0 2px rgba(255,163,72,.13),
    0 1px 0 rgba(255,207,137,.13) !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg,rgba(0,0,0,.94) 0 7%,transparent 22%),
    linear-gradient(315deg,rgba(255,202,128,.13) 0 5%,transparent 20%) !important;
  box-shadow: inset 0 0 0 3px rgba(8,2,0,.98),
    inset 0 0 0 7px rgba(111,46,13,.36),
    inset 0 0 0 9px rgba(255,173,76,.055) !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 12px !important;
  box-shadow: inset 0 8px 11px rgba(0,0,0,.76),
    inset 8px 0 11px rgba(0,0,0,.61),
    inset 0 -2px 1px rgba(255,184,91,.10),
    inset -2px 0 1px rgba(255,167,73,.07) !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled > .watch-card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: #090909 !important;
  box-shadow: 0 6px 11px rgba(0,0,0,.72),
    0 0 0 1px rgba(0,0,0,.96),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-image,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo img {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > button.room-empty-slot {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 1px solid rgba(196,143,70,.18) !important;
  border-radius: 9px !important;
  background: rgba(0,0,0,.12) !important;
  box-shadow: inset 0 7px 11px rgba(0,0,0,.68),
    0 0 0 1px rgba(0,0,0,.80) !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot:hover,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot:focus,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot:active,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-card,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-card:hover,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-card:focus,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-card:active,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-image,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-image:hover,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo:hover,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo img,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo img:hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  top: auto !important;
  left: auto !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled:hover {
  filter: none !important;
}

html body #roomView #incomingGrid > button.room-slot.room-empty-slot > span,
html body #roomView #incomingGrid > button.room-slot.room-empty-slot::after {
  content: none !important;
  display: none !important;
}

html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot::after {
  content: '' !important;
  position: absolute !important;
  inset: 5px !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: inset 0 9px 13px rgba(0,0,0,.90),
    inset 9px 0 13px rgba(0,0,0,.80),
    inset 0 -2px 1px rgba(255,255,255,.035),
    inset -2px 0 1px rgba(190,157,88,.04),
    inset 0 0 0 2px rgba(0,0,0,.96),
    inset 0 0 0 6px rgba(92,76,45,.12) !important;
}

html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot > span {
  display: none !important;
}

html body #roomView #incomingGrid > button.room-slot.room-empty-slot:hover,
html body #roomView #incomingGrid > button.room-slot.room-empty-slot:active,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot:hover,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot:active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #windersSection {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #roomView #windersSection .winders-enclosure-frame {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1727 / 422 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('../assets/winders-enclosure-clean.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #roomView #windersSection .winders-enclosure-frame::before,
html body #roomView #windersSection .winders-enclosure-frame::after {
  content: none !important;
  display: none !important;
}

html body #roomView #windersSection #windersGrid {
  position: absolute !important;
  left: 4.82% !important;
  top: 13.11% !important;
  width: 90.43% !important;
  height: 67.96% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #roomView #incomingGrid > button.room-slot.room-empty-slot::before {
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  opacity: .9 !important;
  content: '+' !important;
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 1px solid rgba(201,164,93,.22) !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.28) !important;
  color: #c9a45d !important;
  font: 400 20px/1 Arial,sans-serif !important;
  transform: none !important;
  box-shadow: 0 0 0 7px rgba(0,0,0,.14) !important;
}

html body #roomView #incomingGrid > button.room-slot.room-empty-slot::after,
html body #roomView #incomingGrid > button.room-slot.room-empty-slot > span {
  content: none !important;
  display: none !important;
}

html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 2px solid rgba(12,12,12,.98) !important;
  border-radius: 17px !important;
  outline: 0 !important;
  background: linear-gradient(145deg,rgba(0,0,0,.66),rgba(18,18,18,.20)),
    url('../assets/drawer-velvet.jpg') center/160% auto !important;
  box-shadow: inset 0 16px 22px rgba(0,0,0,.97),
    inset 12px 0 17px rgba(0,0,0,.88),
    inset 0 -3px 2px rgba(255,255,255,.055),
    inset -3px 0 2px rgba(190,157,88,.07),
    0 1px 0 rgba(255,255,255,.02) !important;
  color: #c9a45d !important;
  display: grid !important;
  place-items: center !important;
}

html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot::before {
  content: '+' !important;
  z-index: 3 !important;
  display: block !important;
  color: #c9a45d !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  opacity: .9 !important;
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html body #roomView #windersSection *,
html body #roomView #incomingGrid > button.room-slot.room-empty-slot,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot {
  transition-property: color,background-color,border-color,box-shadow,filter,opacity !important;
}

html body #roomView #incomingGrid > button.room-slot.room-empty-slot:hover,
html body #roomView #incomingGrid > button.room-slot.room-empty-slot:focus,
html body #roomView #incomingGrid > button.room-slot.room-empty-slot:active,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot:hover,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot:focus,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot:active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #watchGrid .watch-tile-photo img,
html body #roomView #drawerGrid .watch-tile-photo img,
html body #roomView #windersGrid .watch-tile-photo img {
  -webkit-mask-image: radial-gradient(
    ellipse 78% 80% at 50% 48%,
    #000 0%,
    #000 72%,
    rgba(0,0,0,.78) 84%,
    rgba(0,0,0,.30) 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse 78% 80% at 50% 48%,
    #000 0%,
    #000 72%,
    rgba(0,0,0,.78) 84%,
    rgba(0,0,0,.30) 100%
  ) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

html body #roomView #drawerSection #drawerGrid > .drawer-empty-cell {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

html body #roomView #drawerSection .drawer-empty-plus {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(201,164,93,.20) !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.24) !important;
  color: #c9a45d !important;
  font: 400 18px/1 Arial,sans-serif !important;
  box-shadow: 0 0 0 5px rgba(0,0,0,.14) !important;
}

html body #roomView #incomingGrid .incoming-empty-card .watch-image {
  position: absolute !important;
  inset: 0 0 29% 0 !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #roomView #incomingGrid .incoming-empty-plus {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(201,164,93,.22) !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.28) !important;
  color: #c9a45d !important;
  font: 400 20px/1 Arial,sans-serif !important;
  box-shadow: 0 0 0 7px rgba(0,0,0,.14) !important;
}

html body #roomView #incomingGrid .incoming-empty-card .watch-card-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 29% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg,transparent,rgba(5,5,5,.66) 38%,#080909 100%) !important;
}

html body #roomView #windersSection,
html body #roomView #windersSection .winders-enclosure-frame {
  background-color: transparent !important;
  box-shadow: none !important;
}

html body #roomView #sectionNav *,
html body #roomView #drawerSection #drawerGrid *,
html body #roomView #incomingGrid *,
html body #roomView #windersSection * {
  transition-property: color,background-color,border-color,box-shadow,filter,opacity !important;
}

html body #roomView #sectionNav *:hover,
html body #roomView #sectionNav *:focus,
html body #roomView #sectionNav *:active,
html body #roomView #drawerSection #drawerGrid *:hover,
html body #roomView #drawerSection #drawerGrid *:focus,
html body #roomView #drawerSection #drawerGrid *:active,
html body #roomView #incomingGrid *:hover,
html body #roomView #incomingGrid *:focus,
html body #roomView #incomingGrid *:active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #watchGrid .watch-tile-photo,
html body #roomView #drawerGrid .watch-tile-photo,
html body #roomView #windersGrid .watch-tile-photo {
  background: transparent !important;
}

html body #roomView #watchGrid .watch-tile-photo > img,
html body #roomView #drawerGrid .watch-tile-photo > img,
html body #roomView #windersGrid .watch-tile-photo > img {
  -webkit-mask-image: linear-gradient(
      to right,
      rgba(0,0,0,.35) 0%,
      #000 18%,
      #000 82%,
      rgba(0,0,0,.30) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.35) 0%,
      #000 16%,
      #000 76%,
      rgba(0,0,0,.35) 100%
    ) !important;
  mask-image: linear-gradient(
      to right,
      rgba(0,0,0,.35) 0%,
      #000 18%,
      #000 82%,
      rgba(0,0,0,.30) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.35) 0%,
      #000 16%,
      #000 76%,
      rgba(0,0,0,.35) 100%
    ) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
  -webkit-mask-repeat: no-repeat,no-repeat !important;
  mask-repeat: no-repeat,no-repeat !important;
  -webkit-mask-size: 100% 100%,100% 100% !important;
  mask-size: 100% 100%,100% 100% !important;
  opacity: 1 !important;
  filter: none !important;
}

html body #roomView #watchGrid .watch-tile-photo::after,
html body #roomView #drawerGrid .watch-tile-photo::after,
html body #roomView #windersGrid .watch-tile-photo::after {
  background: linear-gradient(180deg,transparent 48%,rgba(5,5,5,.18) 72%,rgba(5,5,5,.62) 100%) !important;
}

html body #roomView #watchGrid .watch-tile-photo > img,
html body #roomView #drawerGrid .watch-tile-photo > img,
html body #roomView #windersGrid .watch-tile-photo > img,
html body #roomView #watchGrid .watch-tile-photo > img:hover,
html body #roomView #drawerGrid .watch-tile-photo > img:hover,
html body #roomView #windersGrid .watch-tile-photo > img:hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #sectionNav .room-nav-button:active,
html body #roomView #sectionNav .room-nav-button.active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #sectionNav .incoming-nav-button,
html body #roomView #sectionNav [data-scroll="incomingSection"] {
  display: none !important;
}

html body #roomView #sectionNav {
  justify-content: center !important;
  align-items: center !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #roomView #sectionNav .room-nav-button {
  flex: 0 0 auto !important;
  background-image: none !important;
  cursor: pointer !important;
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(205,166,86,.70) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 13%,
      rgba(255,255,255,.010) 32%,
      transparent 48%),
    linear-gradient(135deg,#171717 0%,#080808 48%,#010101 100%) !important;
  color: #ead9ad !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  text-shadow: 0 1px 0 #000 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 0 0 1px rgba(0,0,0,.78) !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transition-property: color,background-color,border-color,box-shadow,filter,opacity !important;
}

html body #roomView #sectionNav .room-nav-button:hover,
html body #roomView #sectionNav .room-nav-button:focus-visible {
  background-image: none !important;
  background: linear-gradient(180deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.06) 13%,
      rgba(255,255,255,.014) 32%,
      transparent 48%),
    linear-gradient(135deg,#1b1b1b 0%,#0a0a0a 48%,#020202 100%) !important;
  color: #f0d58d !important;
  border-color: #d5aa53 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(0,0,0,.82),
    0 0 12px rgba(213,170,83,.12) !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}









html body .topbar .brand-button > .brand-w-emblem {
  display: block !important;
  flex: 0 0 auto !important;
  width: 45px !important;
  height: 35px !important;
  max-width: 45px !important;
  max-height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body .topbar .brand-button,
html body .topbar .brand-button:hover,
html body .topbar .brand-button:focus,
html body .topbar .brand-button:active,
html body .topbar .brand-w-emblem,
html body .topbar .brand-w-emblem:hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

@media (max-width:700px) {
  #roomView #windersSection {
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }
  #roomView #windersSection .winders-enclosure-frame {
    min-width: 760px !important;
  }
  html body #roomView #sectionNav {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  html body .topbar .brand-button > .brand-w-emblem {
    width: 40px !important;
    height: 31px !important;
    max-width: 40px !important;
    max-height: 31px !important;
  }
}

html body #roomView #incomingGrid > .incoming-empty-cell {
  box-sizing: border-box !important;
  width: 100%!important;
  height: auto!important;
  min-height: 0!important;
  aspect-ratio: .94 / 1!important;
  align-self: start!important;
  margin: 0!important;
}

html body #roomView #incomingGrid > .incoming-empty-cell > .incoming-empty-card {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #211f1c !important;
  background: radial-gradient(circle at 50% 10%,rgba(255,255,255,.04),transparent 38%),
    linear-gradient(160deg,#171816,#0a0b0a) !important;
  box-shadow: none !important;
  width: 100%!important;
  height: 100%!important;
  min-height: 0!important;
  aspect-ratio: auto!important;
  margin: 0!important;
}

html body #roomView #incomingGrid > .incoming-empty-cell,
html body #roomView #incomingGrid > .incoming-empty-cell:hover,
html body #roomView #incomingGrid > .incoming-empty-cell:focus,
html body #roomView #incomingGrid > .incoming-empty-cell:active,
html body #roomView #incomingGrid > .incoming-empty-cell > .incoming-empty-card,
html body #roomView #incomingGrid > .incoming-empty-cell > .incoming-empty-card:hover,
html body #roomView #incomingGrid > .incoming-empty-cell > .incoming-empty-card:focus,
html body #roomView #incomingGrid > .incoming-empty-cell > .incoming-empty-card:active {
  transform: none!important;
  translate: none!important;
  scale: 1!important;
}

html body #dashboardView .dashboard-card,
html body #dashboardView .dashboard-card:hover,
html body #dashboardView .dashboard-card:focus,
html body #dashboardView .dashboard-card:focus-visible,
html body #dashboardView .dashboard-card:active {
  border-color: #2e2924 !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
}

html body #dashboardView .hall-of-fame-panel,
html body #dashboardView .hall-of-fame-panel:hover,
html body #dashboardView .hall-of-fame-panel:focus,
html body #dashboardView .hall-of-fame-panel:focus-visible,
html body #dashboardView .hall-of-fame-panel:active {
  border-color: #55452f !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
}

html body #dashboardView .dashboard-match-panel,
html body #dashboardView .dashboard-match-panel:hover,
html body #dashboardView .dashboard-match-panel:focus,
html body #dashboardView .dashboard-match-panel:focus-visible,
html body #dashboardView .dashboard-match-panel:active {
  border-color: #2e2924 !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
}

html body #dashboardView [data-dashboard-library-link="true"],
html body #dashboardView [data-dashboard-library-link="true"] .dashboard-metric-trigger,
html body #dashboardView [data-dashboard-library-link="true"] .medal-item {
  cursor: pointer !important;
}

html body #timelineView .timeline-period-main > summary {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 20px !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head h2 {
  justify-self: start !important;
  margin: 0 !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head > span {
  justify-self: end !important;
  margin: 0 !important;
  text-align: right !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) .eyebrow {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
  text-align: center !important;
}

html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) > span {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
  text-align: right !important;
}

html body #timelineView .timeline-period-main > summary > .timeline-chevron {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #timelineView .timeline-period-main[open] > summary > .timeline-chevron {
  transform: translateY(-50%) !important;
}


html body #libraryTable .watch-name-line,
html body #libraryTable .watch-differentiators,
html body #libraryTable .watch-brand-location {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


html body #libraryTable .watch-brand-location {
  margin-top: 2px !important;
  opacity: .68 !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
}

html body #libraryTable tr,
html body #libraryTable tr:hover,
html body #libraryTable tr:focus,
html body #libraryTable tr:active,
html body #libraryTable .watch-cell,
html body #libraryTable .watch-cell:hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 20px !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head h2 {
  grid-column: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head > span {
  grid-column: 2 !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:has(.eyebrow) {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:has(.eyebrow) .eyebrow {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:has(.eyebrow) h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:has(.eyebrow) > span {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

html body #roomView #todayWrist {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head,
html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:hover,
html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:focus,
html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #dashboardView,
html body #dashboardView #dashboardCards,
html body #dashboardView .dashboard-grid,
html body #dashboardView .dashboard-card,
html body #dashboardView .dashboard-card strong,
html body #dashboardView .dashboard-metric-trigger {
  overflow: visible !important;
}

html body #dashboardView #dashboardCards {
  position: relative !important;
  z-index: 20 !important;
}

html body #dashboardView .dashboard-card {
  position: relative !important;
  z-index: 1 !important;
}

html body #dashboardView .dashboard-card:has(.dashboard-metric-trigger:hover),
html body #dashboardView .dashboard-card:has(.dashboard-metric-trigger:focus),
html body #dashboardView .dashboard-card:has(.dashboard-metric-trigger.open) {
  z-index: 2147482000 !important;
}

html body #dashboardView .dashboard-metric-trigger {
  z-index: 2 !important;
}

html body #dashboardView .dashboard-metric-popover {
  z-index: 2147483000 !important;
  isolation: isolate !important;
}

html body #dashboardView .dashboard-popover-row {
  align-items: flex-start !important;
}

html body #dashboardView .dashboard-popover-watch {
  display: block !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body #dashboardView .dashboard-popover-watch > b {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #dashboardView .dashboard-popover-watch-details {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #bda76f !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
}

html body #dashboardView .dashboard-card,
html body #dashboardView .dashboard-card:hover,
html body #dashboardView .dashboard-metric-trigger,
html body #dashboardView .dashboard-metric-trigger:hover,
html body #dashboardView .dashboard-metric-popover,
html body #dashboardView .dashboard-metric-trigger:hover > .dashboard-metric-popover,
html body #dashboardView .dashboard-metric-trigger:focus > .dashboard-metric-popover,
html body #dashboardView .dashboard-metric-trigger.open > .dashboard-metric-popover {
  translate: none !important;
  scale: 1 !important;
}

#watchModal .watchbox-crop-guide {
  position: absolute;
  left: 24%;
  top: 15%;
  width: 52%;
  height: 70%;
  box-sizing: border-box;
  z-index: 5;
  background: transparent !important;
  border: 1px dashed rgba(212,175,55,.48) !important;
  box-shadow: none !important;
  border-radius: 9px !important;
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  will-change: left,top !important;
}

#watchModal .watchbox-crop-guide:hover {
  border-color: rgba(224,191,105,.68) !important;
}

#watchModal .watchbox-crop-guide.is-dragging {
  cursor: grabbing !important;
  border-color: rgba(235,202,116,.82) !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #090909 !important;
  clip-path: none !important;
  isolation: auto !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo > img,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-tile-photo > img:hover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  border-radius: 9px !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  will-change: auto !important;
}

html body #roomView #drawerSection #drawerGrid > .room-slot {
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: .77 / 1 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  align-self: start !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #drawerSection #drawerGrid > .room-slot-filled > .watch-card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: #090909 !important;
  /* Recessed/embedded look, matching Watch Box: no outer drop shadow,
     layered insets instead -- strong top shadow, softer bottom shadow,
     thin dark edge, faint bottom highlight. */
  box-shadow: inset 0 8px 14px rgba(0,0,0,.6),
    inset 0 -3px 6px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.06) !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #drawerSection #drawerGrid > .drawer-empty-cell,
html body #roomView #drawerSection #drawerGrid > button.room-slot.room-empty-slot {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: .77 / 1 !important;
  box-sizing: border-box !important;
  align-self: start !important;
}

html body #roomView #drawerSection #drawerGrid > .drawer-empty-cell > .drawer-empty-card {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.025) !important;
  background: transparent !important;
  box-shadow: inset 0 8px 13px rgba(0,0,0,.62),
    0 0 0 1px rgba(0,0,0,.82) !important;
  color: #c9a45d !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: 10px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 9px !important;
}

html body #roomView #drawerSection #drawerGrid > .room-slot,
html body #roomView #drawerSection #drawerGrid > .room-slot:hover,
html body #roomView #drawerSection #drawerGrid > .room-slot:focus,
html body #roomView #drawerSection #drawerGrid > .room-slot:active,
html body #roomView #drawerSection #drawerGrid .watch-card,
html body #roomView #drawerSection #drawerGrid .watch-card:hover,
html body #roomView #drawerSection #drawerGrid .watch-card:focus,
html body #roomView #drawerSection #drawerGrid .watch-card:active,
html body #roomView #drawerSection #drawerGrid .watch-image,
html body #roomView #drawerSection #drawerGrid .watch-image:hover,
html body #roomView #drawerSection #drawerGrid .watch-tile-photo,
html body #roomView #drawerSection #drawerGrid .watch-tile-photo:hover,
html body #roomView #drawerSection #drawerGrid .watch-tile-photo img,
html body #roomView #drawerSection #drawerGrid .watch-tile-photo img:hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  top: auto !important;
  left: auto !important;
}

html body #roomView #drawerSection #drawerGrid > .room-slot-filled:hover {
  filter: none !important;
}

html body #roomView #watchGrid > .room-slot,
html body #roomView #drawerGrid > .room-slot,
html body #roomView #incomingGrid > .room-slot {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--pw-storage-tile-ratio) !important;
  box-sizing: border-box !important;
  align-self: start !important;
}

html body #roomView #incomingGrid {
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
}

html body #roomView #incomingGrid > .room-slot {
  position: relative !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 17px !important;
}

html body #roomView #watchGrid > .room-slot-filled > .watch-card,
html body #roomView #drawerGrid > .room-slot-filled > .watch-card,
html body #roomView #incomingGrid > .room-slot-filled > .watch-card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--pw-storage-tile-radius) !important;
  overflow: hidden !important;
  background: #090909 !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #watchGrid .watch-image,
html body #roomView #drawerGrid .watch-image,
html body #roomView #incomingGrid .watch-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #090909 !important;
}

html body #roomView #watchGrid .watch-tile-photo,
html body #roomView #drawerGrid .watch-tile-photo,
html body #roomView #incomingGrid .watch-tile-photo {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: transparent !important;
  clip-path: none !important;
  isolation: isolate !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
}

html body #roomView #watchGrid .watch-tile-photo > img,
html body #roomView #drawerGrid .watch-tile-photo > img,
html body #roomView #incomingGrid .watch-tile-photo > img,
html body #roomView #watchGrid .watch-tile-photo > img:hover,
html body #roomView #drawerGrid .watch-tile-photo > img:hover,
html body #roomView #incomingGrid .watch-tile-photo > img:hover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: fill !important;
  object-position: center center !important;
  border-radius: inherit !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  image-rendering: auto !important;
  -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 0,
      #000 var(--pw-storage-edge-width),
      #000 calc(100% - var(--pw-storage-edge-width)),
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 0,
      #000 var(--pw-storage-edge-width),
      #000 calc(100% - var(--pw-storage-edge-width)),
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 100%) !important;
  mask-image: linear-gradient(to right,
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 0,
      #000 var(--pw-storage-edge-width),
      #000 calc(100% - var(--pw-storage-edge-width)),
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 0,
      #000 var(--pw-storage-edge-width),
      #000 calc(100% - var(--pw-storage-edge-width)),
      rgba(0,0,0,var(--pw-storage-edge-opacity)) 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
  -webkit-mask-repeat: no-repeat,no-repeat !important;
  mask-repeat: no-repeat,no-repeat !important;
  -webkit-mask-size: 100% 100%,100% 100% !important;
  mask-size: 100% 100%,100% 100% !important;
}

html body #roomView #watchGrid .watch-tile-photo::after,
html body #roomView #drawerGrid .watch-tile-photo::after,
html body #roomView #incomingGrid .watch-tile-photo::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

html body #roomView #incomingGrid > button.room-slot.room-empty-slot {
  align-items: center !important;
  justify-content: center !important;
  color: #c9a45d !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(171,143,84,.25) !important;
  border-radius: 14px !important;
  background: #0b0d0c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow: hidden !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--pw-storage-tile-ratio) !important;
  box-sizing: border-box !important;
}

html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-card,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-card:hover,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-image,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

@media (max-width:1100px) {
  html body #roomView #watchBoxSection .watchbox-grid-isolated {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  html body #roomView #incomingGrid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:620px) {
  html body #roomView #watchBoxSection .watchbox-isolated-frame {
    padding: 10px !important;
  }
  html body #roomView #watchBoxSection .watchbox-grid-isolated {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot {
    padding: 7px !important;
  }
  html body #roomView #drawerSection #drawerGrid > .room-slot {
    padding: 7px !important;
  }
  html body #roomView #drawerSection #drawerGrid > .drawer-empty-cell > .drawer-empty-card {
    inset: 7px !important;
  }
  html body #roomView #incomingGrid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  html body #roomView #incomingGrid > .room-slot {
    padding: 7px !important;
  }
}

html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:hover,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:focus,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:active {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 0%,
    #000 var(--pw-radial-full-opacity-stop),
    rgba(0,0,0,var(--pw-radial-edge-alpha)) 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 0%,
    #000 var(--pw-radial-full-opacity-stop),
    rgba(0,0,0,var(--pw-radial-edge-alpha)) 100%
  ) !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}


html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:hover,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:focus,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:focus-visible,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo > img:active {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  box-shadow: inset 0 0 3px rgba(0,0,0,.22) !important;
  -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 0,
      #000 var(--pw-hybrid-edge-width),
      #000 calc(100% - var(--pw-hybrid-edge-width)),
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 0,
      #000 var(--pw-hybrid-edge-width),
      #000 calc(100% - var(--pw-hybrid-edge-width)),
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 100%),
    radial-gradient(ellipse at 50% 50%,
      #000 0,
      #000 var(--pw-hybrid-radial-stop),
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 100%) !important;
  mask-image: linear-gradient(to right,
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 0,
      #000 var(--pw-hybrid-edge-width),
      #000 calc(100% - var(--pw-hybrid-edge-width)),
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 0,
      #000 var(--pw-hybrid-edge-width),
      #000 calc(100% - var(--pw-hybrid-edge-width)),
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 100%),
    radial-gradient(ellipse at 50% 50%,
      #000 0,
      #000 var(--pw-hybrid-radial-stop),
      rgba(0,0,0,var(--pw-hybrid-edge-alpha)) 100%) !important;
  -webkit-mask-composite: source-in,source-in !important;
  mask-composite: intersect,intersect !important;
  -webkit-mask-repeat: no-repeat,no-repeat,no-repeat !important;
  mask-repeat: no-repeat,no-repeat,no-repeat !important;
  -webkit-mask-position: center,center,center !important;
  mask-position: center,center,center !important;
  -webkit-mask-size: 100% 100%,100% 100%,100% 100% !important;
  mask-size: 100% 100%,100% 100%,100% 100% !important;
}

html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo::before,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) .watch-tile-photo::after {
  content: none !important;
  display: none !important;
}

html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) :is(.room-slot,.watch-card,.watch-image,.watch-tile-photo,.watch-tile-photo>img),
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) :is(.room-slot,.watch-card,.watch-image,.watch-tile-photo,.watch-tile-photo>img):hover,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) :is(.room-slot,.watch-card,.watch-image,.watch-tile-photo,.watch-tile-photo>img):focus,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) :is(.room-slot,.watch-card,.watch-image,.watch-tile-photo,.watch-tile-photo>img):focus-visible,
html body #roomView :is(#watchGrid,#drawerGrid,#incomingGrid,#windersGrid) :is(.room-slot,.watch-card,.watch-image,.watch-tile-photo,.watch-tile-photo>img):active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transition-property: color,background-color,border-color,box-shadow,filter,opacity !important;
}

html body #roomView :is(#windersGrid,#incomingGrid) :is(
  .watch-image,
  .watch-tile-photo,
  .watch-tile-photo > img
) {
  pointer-events: none !important;
}

html body #roomView :is(#windersGrid,#incomingGrid) :is(
  .room-slot,
  .room-slot-filled,
  .watch-card,
  .winder-card,
  .watch-image,
  .watch-tile-photo,
  .watch-tile-photo > img
),
html body #roomView :is(#windersGrid,#incomingGrid) :is(
  .room-slot,
  .room-slot-filled,
  .watch-card,
  .winder-card,
  .watch-image,
  .watch-tile-photo,
  .watch-tile-photo > img
):is(:hover,:focus,:focus-visible,:focus-within,:active) {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  animation: none !important;
  transition: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body #roomView :is(#windersGrid,#incomingGrid) .room-slot:is(:hover,:focus,:focus-visible,:focus-within,:active) :is(
  .watch-card,
  .winder-card,
  .watch-image,
  .watch-tile-photo,
  .watch-tile-photo > img
) {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

html body #roomView :is(#windersGrid,#incomingGrid) .watch-card,
html body #roomView :is(#windersGrid,#incomingGrid) .watch-card:is(:hover,:focus,:focus-visible,:focus-within,:active) {
  filter: none !important;
  border-width: 1px !important;
  outline-offset: 0 !important;
}

html body #roomView #incomingGrid .watch-card,
html body #roomView #incomingGrid .room-slot:hover > .watch-card,
html body #roomView #incomingGrid .watch-card:is(:hover,:focus,:focus-visible,:focus-within,:active) {
  box-shadow: none !important;
}

html body #roomView #windersGrid .room-slot-filled > .watch-card,
html body #roomView #windersGrid .room-slot-filled:hover > .watch-card,
html body #roomView #windersGrid .room-slot-filled > .watch-card:is(:hover,:focus,:focus-visible,:focus-within,:active) {
  box-shadow: 0 16px 26px rgba(0,0,0,.82),
    0 5px 10px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px rgba(202,161,82,.13) !important;
  filter: none !important;
}

html body #roomView :is(#windersGrid,#incomingGrid) .watch-tile-photo > img {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body #roomView #windersGrid > .room-slot-filled > .watch-card,
html body #roomView #windersGrid > .room-slot-filled:hover > .watch-card,
html body #roomView #windersGrid > .room-slot-filled:focus-within > .watch-card,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:hover,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:focus,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:focus-visible,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  margin: 0 !important;
  border-width: 1px !important;
  box-shadow: 0 16px 26px rgba(0,0,0,.82),
    0 5px 10px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px rgba(202,161,82,.13) !important;
}

html body #roomView #windersGrid > .room-slot,
html body #roomView #windersGrid > .room-slot:hover,
html body #roomView #windersGrid > .room-slot:focus,
html body #roomView #windersGrid > .room-slot:focus-within,
html body #roomView #windersGrid > .room-slot:active {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

html body #roomView #windersGrid :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img),
html body #roomView #windersGrid :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img):is(:hover,:focus,:focus-visible,:active),
html body #roomView #windersGrid > .room-slot-filled:hover :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img) {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

html body #roomView :is(#watchGrid,#watchBoxGrid) > .room-slot-filled > .watch-card,
html body #roomView :is(#watchGrid,#watchBoxGrid) > .room-slot-filled:hover > .watch-card,
html body #roomView :is(#watchGrid,#watchBoxGrid) > .room-slot-filled:focus-within > .watch-card,
html body #roomView :is(#watchGrid,#watchBoxGrid) .watch-card:is(:hover,:focus,:focus-visible,:active) {
  background: #090909 !important;
  border: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.92),
    0 5px 10px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html body #roomView :is(#watchGrid,#watchBoxGrid) :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img),
html body #roomView :is(#watchGrid,#watchBoxGrid) :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img):is(:hover,:focus,:focus-visible,:active),
html body #roomView :is(#watchGrid,#watchBoxGrid) > .room-slot-filled:hover :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img) {
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

html body #roomView #wearHeroButton,
html body #roomView #wearHeroButton *,
html body #roomView #wearHeroButton:hover,
html body #roomView #wearHeroButton:hover *,
html body #roomView #wearHeroButton:focus,
html body #roomView #wearHeroButton:focus-visible,
html body #roomView #wearHeroButton:active {
  transition: none !important;
  animation: none !important;
  transition-delay: 0s !important;
}

html body #roomView #incomingGrid .room-slot-filled .watch-tile-photo > img,
html body #roomView #incomingGrid .room-slot-filled:hover .watch-tile-photo > img,
html body #roomView #incomingGrid .room-slot-filled:focus-within .watch-tile-photo > img,
html body #roomView #incomingGrid .room-slot-filled .watch-tile-photo > img:hover,
html body #roomView #incomingGrid .room-slot-filled .watch-tile-photo > img:focus,
html body #roomView #incomingGrid .room-slot-filled .watch-tile-photo > img:active {
  transform: scale(.88) !important;
  transform-origin: center 40% !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
}

html body #roomView #windersGrid > .room-slot,
html body #roomView #windersGrid > .room-slot:hover,
html body #roomView #windersGrid > .room-slot:focus,
html body #roomView #windersGrid > .room-slot:focus-within,
html body #roomView #windersGrid > .room-slot:active,
html body #roomView #windersGrid > .room-slot-filled > .watch-card,
html body #roomView #windersGrid > .room-slot-filled:hover > .watch-card,
html body #roomView #windersGrid > .room-slot-filled:focus-within > .watch-card,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:hover,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:focus,
html body #roomView #windersGrid > .room-slot-filled > .watch-card:active,
html body #roomView #windersGrid :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img),
html body #roomView #windersGrid :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img):is(:hover,:focus,:focus-visible,:active),
html body #roomView #windersGrid > .room-slot-filled:hover :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img) {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

html body #roomView #windersGrid :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img) {
  pointer-events: none !important;
}

html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled:hover,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled:focus-within,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled > .watch-card,
html body #roomView #watchBoxSection .watchbox-grid-isolated > .room-slot-filled:hover > .watch-card,
html body #roomView #watchBoxSection .watchbox-grid-isolated .watch-card:hover,
html body #roomView #watchBoxSection .watchbox-grid-isolated :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img),
html body #roomView #watchBoxSection .watchbox-grid-isolated :is(.watch-image,.watch-tile-photo,.watch-tile-photo>img):hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

html body #roomView #wearHeroButton,
html body #roomView #wearHeroButton *,
html body #roomView #wearHeroButton:is(:hover,:focus,:focus-visible,:active),
html body #roomView #wearHeroButton:is(:hover,:focus,:focus-visible,:active) * {
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}


html body #dashboardView .dashboard-card-medals .dashboard-metric-popover em {
  margin: 0 0 7px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: .1em !important;
}

html body #dashboardView .dashboard-card-medals .dashboard-popover-row {
  padding: 4px 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body #dashboardView .dashboard-card-medals .dashboard-popover-watch,
html body #dashboardView .dashboard-card-medals .dashboard-popover-watch > b {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #dashboardView .dashboard-card-medals .dashboard-popover-watch-details {
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #dashboardView .dashboard-card-medals .dashboard-popover-row > i {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body #dashboardView .dashboard-card-medals .dashboard-metric-popover > small {
  font-size: 10px !important;
  line-height: 1.45 !important;
}


html body #dashboardView #dashboardCards .dashboard-card-highest {
  grid-column: 1 / span 2 !important;
}

.metals-breakdown-list {
  display: grid !important;
  gap: 7px !important;
  width: 100% !important;
}

.metal-breakdown-row {
  display: grid !important;
  grid-template-columns: 10px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

.metal-breakdown-row i {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.13),0 1px 4px rgba(0,0,0,.35) !important;
}

.metal-breakdown-row b,
.metal-breakdown-row strong {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.metal-breakdown-row strong {
  text-align: right !important;
}

.metal-yellow i {
  background: #d8ad4f !important;
}

.metal-yellow b,.metal-yellow strong {
  color: #e1bd68 !important;
}

.metal-white i {
  background: #ece9e3 !important;
}

.metal-white b,.metal-white strong {
  color: #e8e4dc !important;
}

.metal-platinum i {
  background: #9da9c2 !important;
}

.metal-platinum b,.metal-platinum strong {
  color: #aeb9cf !important;
}

.metal-steel i {
  background: #a6a7a8 !important;
}

.metal-steel b,.metal-steel strong {
  color: #b6b6b5 !important;
}

html body #dashboardView #dashboardCards .dashboard-card-highest:hover,
html body #dashboardView #dashboardCards .dashboard-card-highest:focus-visible,
html body #dashboardView #dashboardCards .dashboard-card-metals:hover,
html body #dashboardView #dashboardCards .dashboard-card-metals:focus-visible {
  transform: none !important;
  filter: none !important;
}

html body #dashboardView #dashboardCards .dashboard-card-highest,
html body #dashboardView #dashboardCards .dashboard-card-metals {
  min-height: 126px !important;
}

html body #dashboardView #dashboardCards .highest-rated-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: 5px !important;
}

html body #dashboardView #dashboardCards .highest-rated-name {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #dashboardView #dashboardCards .highest-rated-details {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(235,230,220,.50) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .045em !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
  white-space: nowrap !important;
}


html body #dashboardView #dashboardCards .dashboard-card-summary {
  padding: 18px 20px !important;
  overflow: visible !important;
}

html body #dashboardView #dashboardCards .dashboard-card-summary > strong {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.summary-size-layout,
.summary-quality-layout,
.summary-honors-layout {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 1px 92px !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  gap: 18px !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.summary-quality-layout {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.summary-honors-layout {
  grid-template-columns: minmax(0,1fr) 1px 86px !important;
}

.summary-metric-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.summary-size-number,
.summary-quality-number {
  color: #f3efe9 !important;
  font-family: Georgia,'Times New Roman',serif !important;
  font-size: 35px !important;
  font-weight: 400 !important;
  line-height: .95 !important;
  letter-spacing: -.035em !important;
}

.summary-quality-number small {
  margin-left: 5px;
  color: #8f8982 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.summary-metric-copy em {
  margin-top: 8px;
  color: #8e8982 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.dashboard-card-quality .summary-metric-copy em {
  color: #91b84a !important;
}

.summary-divider {
  display: block !important;
  width: 1px !important;
  height: 62px !important;
  background: linear-gradient(180deg,transparent,rgba(216,173,79,.28) 18%,rgba(216,173,79,.18) 82%,transparent) !important;
}

.summary-watch-icon,
.honors-badge {
  display: grid !important;
  place-items: center !important;
  width: 76px !important;
  height: 76px !important;
  margin: auto !important;
  border: 1px solid rgba(216,173,79,.13) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,rgba(216,173,79,.055),rgba(216,173,79,.012) 62%,transparent 63%) !important;
  color: #d8ad4f !important;
  box-shadow: inset 0 0 0 8px rgba(216,173,79,.018),0 8px 26px rgba(0,0,0,.22) !important;
}

.summary-watch-icon svg {
  width: 43px !important;
  height: 43px !important;
}

.honors-badge svg {
  width: 55px !important;
  height: 55px !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) !important;
}

.quality-ring {
  --quality: 0;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 76px !important;
  height: 76px !important;
  margin: auto !important;
  border-radius: 50% !important;
  background: conic-gradient(#d9ad50 calc(var(--quality)*1%),rgba(255,255,255,.07) 0) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.quality-ring::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #11100e;
  box-shadow: inset 0 0 0 1px rgba(216,173,79,.12);
}

.quality-ring span {
  position: relative;
  z-index: 1;
  color: #f4efe7 !important;
  font-family: Georgia,'Times New Roman',serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.dashboard-card-medals .medals-combined {
  justify-content: flex-start !important;
  gap: 20px !important;
}

.dashboard-card-medals .medal-item {
  gap: 5px !important;
}

.dashboard-card-medals .medal-item b {
  font-size: 16px !important;
}

html body #dashboardView #dashboardCards .dashboard-card-summary:hover,
html body #dashboardView #dashboardCards .dashboard-card-summary:focus-within {
  transform: none !important;
  filter: none !important;
}

@media(max-width:900px) {
  .wear-selection-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .watch-picker-group-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .wear-mode {
    padding: 18px 12px;
  }
  .wear-mode-actions {
    padding: 14px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .wear-mode-actions>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .section-nav button {
    white-space: nowrap;
  }
  .winders-grid {
    grid-template-columns: 1fr 1fr;
  }
  .watchbox-frame,.drawer-panel {
    padding: 18px;
  }
  .section-nav-actions {
    grid-column: 1/-1;
    margin-left: 0;
    justify-content: flex-end;
  }
  .winder-empty-slot {
    min-height: 290px;
  }
  .library-head {
    display: block;
  }
  .library-tools {
    margin-top: 18px;
  }
  .library-head h1 {
    font-size: 44px;
  }
  #libraryTable.library-view-fidelity {
    width: 720px!important;
    min-width: 720px!important;
  }
  .library-view-fidelity th:nth-child(2),.library-view-fidelity td:nth-child(2) {
    width: 460px!important;
  }

  .wear-primary-row {
    width: 100%!important;
  }
  .wear-primary-row .wear-hero {
    width: 100%;
    min-height: 72px!important;
  }
  .section-nav {
    display: grid;
    overflow: visible;
    top: 58px!important;
    grid-template-columns: repeat(4,1fr)!important;
  }
  .section-nav .room-nav-button {
    padding: 0 3px!important;
    font-size: 8px!important;
  }
  .watch-grid,
.uniform-grid {
    grid-template-columns: repeat(6,minmax(0,1fr))!important;
    gap: 4px!important;
  }
  .watch-card {
    border-radius: 5px!important;
  }
  .watch-card-footer {
    display: none!important;
  }
  .watch-image {
    padding: 3px!important;
  }
  .room-empty-slot {
    min-height: 240px;
    border-radius: 5px!important;
  }
  .section-heading h2 {
    font-size: 10px!important;
  }
  .today-summary {
    grid-column: auto;
    min-height: 31px!important;
  }
  .today-summary strong {
    font-size: 10px;
  }
  .hero-action-row .section-compare,
.hero-action-row .section-add {
    height: 34px!important;
  }
  .app-shell {
    display: block;
  }
  .brand-button {
    border: 0;
    gap: 9px;
    flex-direction: column;
    padding: 0 8px 20px;
    border-bottom: 1px solid #1d1b18;
  }
  .topnav {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    margin: 0;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #24211d;
    position: static;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    gap: 3px;
  }
  .topnav .nav-divider,
.topnav .utility-nav {
    display: block;
  }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--gold-soft);
    transition: transform .18s ease,opacity .18s ease;
  }
  body.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  body.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    background: rgba(0,0,0,.62);
  }
  body.menu-open .menu-backdrop {
    display: block;
  }
  main {
    grid-column: auto;
    padding-top: 64px;
  }
  .view {
    padding: 14px 10px 42px;
  }
  #roomView .today-summary span {
    font-size: 9px!important;
  }
  #roomView .today-summary strong {
    font-size: 12px!important;
  }
  #roomView .wear-primary-row .wear-hero strong {
    font-size: 10px!important;
  }
  #roomView .wear-primary-row .wear-hero small {
    font-size: 12px!important;
  }
  #roomView .section-nav .room-nav-button {
    font-size: 9.5px!important;
  }
  #roomView .section-heading h2 {
    font-size: 12px!important;
  }
  #roomView .room-section-tools>span {
    font-size: 9px!important;
  }
  .menu-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 110;
    width: 42px;
    height: 42px;
    border: 1px solid #2a2722;
    border-radius: 8px;
    background: rgba(8,8,8,.96);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    display: flex!important;
  }
  .topbar {
    top: 0;
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    height: 100vh;
    padding: 76px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-right: 1px solid #201e1a;
    border-bottom: 0;
    background: #080808;
    transition: transform .2s ease;
    z-index: 100;
    transform: translateX(-100%)!important;
  }
  body.menu-open .topbar {
    transform: translateX(0)!important;
  }
  .topnav-btn {
    border-radius: 5px;
    padding: 0 10px;
    text-align: left;
    font-size: 13px!important;
    min-height: 42px!important;
  }
  .topnav-btn::before {
    margin: 0 auto 2px!important;
    display: inline!important;
    margin-right: 9px!important;
    font-size: 15px!important;
  }
  .brand-mark {
    font-size: 15px!important;
  }
  .summary-size-layout,.summary-quality-layout,.summary-honors-layout {
    grid-template-columns: minmax(0,1fr) 1px 72px !important;
    gap: 12px !important;
  }
  .summary-watch-icon,.honors-badge,.quality-ring {
    width: 62px !important;
    height: 62px !important;
  }
  .summary-watch-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
  .honors-badge svg {
    width: 46px !important;
    height: 46px !important;
  }
  .summary-divider {
    height: 52px !important;
  }
  .summary-size-number,.summary-quality-number {
    font-size: 31px !important;
  }
}

@media(max-width:760px) {
  .dashboard-columns.dashboard-aligned-columns {
    grid-template-columns: 1fr;
  }
  .hall-of-fame-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .dashboard-match-panel {
    height: auto!important;
    min-height: 360px!important;
  }

  .wear-primary-row {
    margin: 0;
    justify-content: flex-end;
  }
  .weight-config-actions {
    justify-content: flex-start;
  }
  .library-column-sets {
    grid-template-columns: repeat(2,1fr);
  }
  .weight-config-summary {
    align-items: stretch;
    flex-direction: column;
  }
  .weight-editor-toggle {
    width: 100%;
  }
  .library-view-philosophy {
    min-width: 760px!important;
  }
  .table-shell {
    overflow-x: auto;
  }
  #libraryTable th:nth-child(2),#libraryTable td:nth-child(2) {
    width: 280px!important;
    min-width: 280px!important;
    max-width: 280px!important;
  }
  #libraryTable.library-view-overall {
    width: 508px!important;
    min-width: 508px!important;
  }
  #libraryTable.library-view-philosophy {
    width: 1226px!important;
    min-width: 1226px!important;
  }
  #libraryTable.library-view-fidelity {
    width: 486px!important;
    min-width: 486px!important;
  }
  #libraryTable.library-view-wear {
    width: 1268px!important;
    min-width: 1268px!important;
  }
  #roomView #watchGrid .room-slot,
#roomView #incomingGrid .room-slot,
#roomView #watchGrid .room-slot-filled .watch-card,
#roomView #incomingGrid .room-slot-filled .watch-card {
    aspect-ratio: .88 / 1!important;
  }
  #roomView .room-slot-filled .watch-card-footer {
    min-height: 74px!important;
    padding: 24px 7px 8px!important;
  }
  html body #dashboardView #dashboardCards.dashboard-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 106px !important;
  }
  html body #dashboardView #dashboardCards .dashboard-card-highest,
  html body #dashboardView #dashboardCards .dashboard-card-metals {
    grid-column: auto !important;
    min-height: 118px !important;
  }
  html body #dashboardView #dashboardCards .highest-rated-name {
    font-size: 23px !important;
  }
  html body #dashboardView #dashboardCards .highest-rated-details {
    font-size: 10px !important;
  }
  .summary-size-layout,.summary-quality-layout,.summary-honors-layout {
    grid-template-columns: minmax(0,1fr) 1px 78px !important;
  }
}

html body #dashboardView #dashboardCards .dashboard-card-size .summary-metric-copy em,
html body #dashboardView #dashboardCards .dashboard-card-quality .summary-metric-copy em {
  order: 0 !important;
  margin: 0 0 1px 0 !important;
  line-height: .9 !important;
}

html body #dashboardView #dashboardCards .dashboard-card-size .summary-size-number,
html body #dashboardView #dashboardCards .dashboard-card-quality .summary-quality-number {
  order: 1 !important;
  margin: 0 !important;
}

html body #dashboardView #dashboardCards .highest-rated-image {
  overflow: hidden !important;
}

html body #dashboardView #dashboardCards .highest-rated-image img,
html body #dashboardView #dashboardCards .highest-rated-image:hover img,
html body #dashboardView #dashboardCards .dashboard-card-highest:hover .highest-rated-image img,
html body #dashboardView #dashboardCards .dashboard-card-highest:focus-visible .highest-rated-image img,
html body #dashboardView #dashboardCards .dashboard-card-highest:active .highest-rated-image img {
  transform: scale(1.2) !important;
  transform-origin: center center !important;
  transition: none !important;
}

html body #dashboardView,
html body #dashboardView .dashboard-columns,
html body #dashboardView .dashboard-aligned-columns,
html body #dashboardView .dashboard-panel,
html body #dashboardView .dashboard-match-panel,
html body #dashboardView .rotation-status-list,
html body #dashboardView .rotation-status-row,
html body #dashboardView .rotation-status-head,
html body #dashboardView .rotation-counter {
  overflow: visible !important;
}

html body #dashboardView .dashboard-columns,
html body #dashboardView .dashboard-panel,
html body #dashboardView .rotation-status-list,
html body #dashboardView .rotation-status-row,
html body #dashboardView .rotation-status-head {
  position: relative !important;
}

html body #dashboardView .dashboard-panel {
  z-index: 1 !important;
}

html body #dashboardView .dashboard-panel:has(.rotation-counter:hover),
html body #dashboardView .dashboard-panel:has(.rotation-counter:focus),
html body #dashboardView .dashboard-panel:has(.rotation-counter.open) {
  z-index: 2147483000 !important;
}

html body #dashboardView .rotation-status-row:has(.rotation-counter:hover),
html body #dashboardView .rotation-status-row:has(.rotation-counter:focus),
html body #dashboardView .rotation-status-row:has(.rotation-counter.open) {
  z-index: 2147483200 !important;
}

html body #dashboardView .rotation-counter {
  z-index: 2 !important;
}

html body #dashboardView .rotation-counter-tooltip {
  z-index: 2147483640 !important;
  max-height: min(420px, calc(100vh - 40px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: #8f6f38 #17130f;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body #dashboardView .rotation-counter-tooltip::-webkit-scrollbar {
  width: 7px;
}

html body #dashboardView .rotation-counter-tooltip::-webkit-scrollbar-track {
  background: #17130f;
  border-radius: 999px;
}

html body #dashboardView .rotation-counter-tooltip::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b8924f, #6f542c);
  border: 1px solid #17130f;
  border-radius: 999px;
}

html body #dashboardView .rotation-counter-tooltip::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c7a35e, #816338);
}

html body #dashboardView .rotation-counter-tooltip,
html body #dashboardView .rotation-counter:hover .rotation-counter-tooltip,
html body #dashboardView .rotation-counter:focus .rotation-counter-tooltip,
html body #dashboardView .rotation-counter.open .rotation-counter-tooltip {
  translate: none !important;
  scale: 1 !important;
}

html body #timelineView #collectionTimeline {
  width: 100%;
}

html body #timelineView #collectionTimeline .timeline-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}


html body #timelineView #collectionTimeline .timeline-tile-events {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}

html body #timelineView #collectionTimeline .timeline-tile.is-scrollable .timeline-tile-events {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #5a4937 transparent;
}

html body #timelineView #collectionTimeline .timeline-tile.is-scrollable .timeline-tile-events::-webkit-scrollbar {
  width: 6px;
}

html body #timelineView #collectionTimeline .timeline-tile.is-scrollable .timeline-tile-events::-webkit-scrollbar-thumb {
  background: #5a4937;
  border-radius: 999px;
}


html body #timelineView #collectionTimeline .timeline-event div {
  min-width: 0;
  gap: 2px;
}


html body #timelineView #collectionTimeline .timeline-delete {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
}


@media(max-width:1000px) {
  .weight-grid {
    grid-template-columns: repeat(3,1fr);
  }
  html body #timelineView #collectionTimeline .timeline-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px) {
  .utility-nav {
    font-size: 0;
  }
  .utility-nav#downloadBackup::after {
    content: 'Backup';
    font-size: 12px;
  }
  .utility-nav#restoreBackup::after {
    content: 'Restore';
    font-size: 12px;
  }
  .backup-toast {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
  .timeline-page-head {
    align-items: flex-start;
  }
  .dashboard-metric-popover {
    position: fixed;
    left: 14px!important;
    right: 14px!important;
    top: auto;
    bottom: 16px;
    width: auto;
    transform: translateY(8px)!important;
  }
  .dashboard-metric-trigger:hover>.dashboard-metric-popover,.dashboard-metric-trigger:focus>.dashboard-metric-popover,.dashboard-metric-trigger.open>.dashboard-metric-popover {
    transform: none!important;
  }
  .highest-rated-inline {
    gap: 10px;
    grid-template-columns: minmax(0,1fr) 78px auto!important;
    column-gap: 14px!important;
    min-height: 76px!important;
  }
  .highest-rated-image {
    padding: 3px;
    width: 78px!important;
    height: 62px!important;
  }
  .compare-ai-head {
    align-items: flex-start;
  }
  .compare-ai-head>strong {
    font-size: 22px;
  }
  .compare-ai-analysis {
    padding: 18px;
  }
  .compare-tier-row {
    grid-template-columns: 1fr auto;
  }
  .compare-tier-row>em {
    grid-column: 1/-1;
  }
  .compare-method-card>div {
    align-items: flex-start;
  }
  .compare-method-card strong {
    font-size: 10px;
  }
  .compare-methodology {
    align-items: flex-start;
  }
  .compare-methodology>span {
    width: 100%;
    margin-bottom: 2px;
  }
  .method-popover {
    left: 0;
    right: auto;
  }
  .method-item:last-child .method-popover {
    left: auto;
    right: 0;
  }
  .timeline-section-head {
    align-items: start;
    flex-direction: column;
  }
  .timeline-event {
    grid-template-columns: 70px 1fr;
  }
  .timeline-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  html body #timelineView .timeline-period-main > summary {
    padding: 13px 14px !important;
  }
  html body #timelineView .timeline-period-main > summary .timeline-section-head,
  html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) {
    grid-template-columns: minmax(0,1fr) auto !important;
    row-gap: 3px !important;
  }
  html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) .eyebrow {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) h2 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    text-align: left !important;
  }
  html body #timelineView .timeline-period-main > summary .timeline-section-head:has(.eyebrow) > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head,
  html body #timelineView #collectionTimeline > .timeline-section > .timeline-section-head:has(.eyebrow) {
    padding: 10px 14px !important;
  }
  html body #timelineView #collectionTimeline .timeline-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  html body #timelineView #collectionTimeline .timeline-tile {
    height: 332px;
  }
  html body #timelineView #collectionTimeline .timeline-event {
    grid-template-columns: 50px minmax(0,1fr) 28px!important;
  }
}

html body #timelineView #collectionTimeline .timeline-month-list {
  display: block;
}


html body #timelineView #collectionTimeline .timeline-month-group:last-child {
  margin-bottom: 0;
}


html body #timelineView #collectionTimeline .timeline-month-group summary::-webkit-details-marker {
  display: none;
}

html body #timelineView #collectionTimeline .timeline-month-group summary span:before {
  content: '›';
  display: inline-block;
  margin-right: 8px;
  color: #c5a15b;
  transform: rotate(0deg);
  transition: transform .15s ease;
}

html body #timelineView #collectionTimeline .timeline-month-group[open] summary span:before {
  transform: rotate(90deg);
}


#wearMode,
#compareMode,
#compareResultsMode {
  z-index: 1000 !important;
  background: #0d0c0b !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}

#wearMode .wear-mode-head,
#compareMode .wear-mode-head,
#compareResultsMode .wear-mode-head,
#wearMode .wear-selection-grid,
#compareMode .wear-selection-grid,
#compareResultsMode .compare-content-shell,
#wearMode .wear-mode-actions,
#compareMode .wear-mode-actions,
#compareResultsMode .wear-mode-actions {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  filter: none !important;
}

body.menu-open #wearMode.open,
body.menu-open #compareMode.open,
body.menu-open #compareResultsMode.open {
  z-index: 1000 !important;
}

/* ===== v12: Main Menu Wear section, Dashboard Recent Wear + Watch of the Month, Wear-log modals ===== */

.nav-section-label {
  align-self: center;
  padding: 0 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Dashboard: Watch of the Month --- */
.watch-of-month-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  flex: 1;
  min-height: 0;
}


.wotm-winner-label {
  display: block;
  color: var(--gold);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.wotm-winner-image,.wotm-runner-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0c0c;
  border: 1px solid #342c24;
}


.wotm-placeholder {
  font-size: 30px;
  opacity: .5;
}

.wotm-winner-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wotm-winner-copy strong {
  font-size: 18px;
  color: var(--text);
}

.wotm-winner-copy small {
  color: var(--muted);
  font-size: 11.5px;
}

.wotm-winner-copy span {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .04em;
}

.wotm-co-winners {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 10px;
}


.wotm-runner-label {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.wotm-runner-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wotm-runner-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.wotm-runner-copy span {
  color: var(--muted);
  font-size: 10.5px;
}

.wotm-runner-copy em {
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
  opacity: .8;
}

/* --- Dashboard: Recent Wear --- */


.recent-wear-block {
  margin-top: 14px;
}

.recent-wear-block h3 {
  margin: 0 0 8px;
  color: #b39b76;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.recent-wear-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 8px;
}

.recent-wear-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #342c24;
  border-radius: 10px;
  background: #12100e;
}

.recent-wear-open {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.recent-wear-delete {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-right: 2px;
  border-radius: 7px;
  border: 1px solid rgba(184,81,75,.42);
  background: rgba(184,81,75,.08);
  color: #e7aaa5;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.recent-wear-delete:hover {
  background: rgba(184,81,75,.18);
}

.recent-wear-image {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #0c0c0c;
}

.recent-wear-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recent-wear-copy strong {
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-wear-copy small {
  color: var(--muted);
  font-size: 10.5px;
}

.recent-wear-copy span {
  color: var(--gold);
  font-size: 10px;
}

.recent-wear-accordion {
  margin-top: 14px;
  border-top: 1px solid #342c24;
  padding-top: 12px;
}

.recent-wear-accordion summary {
  cursor: pointer;
  color: #b39b76;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  list-style: none;
}

.recent-wear-accordion summary::-webkit-details-marker {
  display: none;
}

.recent-wear-accordion summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
}

.recent-wear-accordion[open] summary::before {
  transform: rotate(90deg);
}

.recent-wear-count {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.recent-wear-accordion-body {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 4px;
}

.recent-wear-date-group {
  margin-bottom: 12px;
}

.recent-wear-date-group h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.recent-wear-date-items {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 8px;
}

.recent-wear-library-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--gold);
  font-size: 12.5px;
  text-decoration: none;
}

.recent-wear-library-link:hover {
  text-decoration: underline;
}

/* --- Wear-log modals (Main Menu -> Wear) --- */
.wear-picker-card {
  max-width: 760px;
}

.watch-picker-card .wear-check {
  display: none;
}

.missed-wear-date-card {
  max-width: 480px;
}

.missed-wear-watch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #342c24;
  border-radius: 12px;
  background: #12100e;
}

.missed-wear-thumb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c0c;
  flex: none;
}

.missed-wear-watch-row strong {
  font-size: 14px;
  color: var(--text);
}

/* Fill custom fixed-size thumbnail containers (these aren't inside #roomView or .wear-select-card,
   so they don't inherit those scoped sizing rules) */
.wotm-winner-image .watch-tile-photo,
.wotm-runner-image .watch-tile-photo,
.recent-wear-image .watch-tile-photo,
.missed-wear-thumb .watch-tile-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wotm-winner-image .watch-tile-photo img,
.wotm-runner-image .watch-tile-photo img,
.recent-wear-image .watch-tile-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

/* .missed-wear-thumb is a small fixed-size badge and is intentionally
   cropped, unlike the primary-photo panels above. */
.missed-wear-thumb .watch-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Main Menu Wear cards: scaled-down version of the gold hero-card style --- */
.topnav .utility-nav.wear-menu-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 5px 9px !important;
  text-align: left !important;
  border-radius: 8px !important;
  transition: .2s;
}

.wear-menu-card .wear-menu-icon-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wear-menu-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 6px;
}

.wear-menu-icon svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.wear-menu-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wear-menu-copy strong {
  display: block;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.wear-menu-copy small {
  display: block;
  margin-top: 1px;
  font-size: 8.5px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}

.wear-menu-arrow {
  flex: 0 0 auto;
  font-size: 12px;
}

/* Current Wear: bright gold, primary action (same treatment as the Room hero button) */
.wear-menu-card-primary {
  border: 1px solid #d8c08a !important;
  background: linear-gradient(180deg,rgba(255,255,255,.20) 0,rgba(255,255,255,.035) 19%,rgba(0,0,0,.10) 100%),
    linear-gradient(135deg,#d8c08a 0%,#c7a45f 52%,#b88f45 100%) !important;
  color: #17130d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(79,52,13,.32),0 5px 14px rgba(0,0,0,.22) !important;
}

.wear-menu-card-primary:hover {
  border-color: #ead59f !important;
  background: linear-gradient(180deg,rgba(255,255,255,.24) 0,rgba(255,255,255,.05) 19%,rgba(0,0,0,.08) 100%),
    linear-gradient(135deg,#e1ca94 0%,#d0ae68 52%,#bf974e 100%) !important;
}

.wear-menu-card-primary .wear-menu-icon {
  background: rgba(20,16,10,.12);
  border: 1px solid rgba(62,42,13,.16);
  color: #16120c;
}

.wear-menu-card-primary .wear-menu-copy strong { color: #120f0a; }
.wear-menu-card-primary .wear-menu-copy small { color: rgba(42,36,26,.62); }
.wear-menu-card-primary .wear-menu-arrow { color: #17130d; }

/* Missed Wear: identical structure/proportions, ~2 tonal steps darker (still gold/bronze family) */
.wear-menu-card-secondary {
  border: 1px solid #7a6538 !important;
  background: linear-gradient(180deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.02) 19%,rgba(0,0,0,.14) 100%),
    linear-gradient(135deg,#8a713f 0%,#75592c 52%,#5e461e 100%) !important;
  color: #17130d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(30,20,5,.35),0 5px 14px rgba(0,0,0,.22) !important;
}

.wear-menu-card-secondary:hover {
  border-color: #9c8352 !important;
  background: linear-gradient(180deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.03) 19%,rgba(0,0,0,.10) 100%),
    linear-gradient(135deg,#998046 0%,#836635 52%,#6a501f 100%) !important;
}

.wear-menu-card-secondary .wear-menu-icon {
  background: rgba(10,8,4,.18);
  border: 1px solid rgba(40,28,8,.22);
  color: #1a1509;
}

.wear-menu-card-secondary .wear-menu-copy strong { color: #0d0a05; }
.wear-menu-card-secondary .wear-menu-copy small { color: rgba(18,13,6,.85); }
.wear-menu-card-secondary .wear-menu-arrow { color: #17130d; }

/* Missed Wear date field: no label, larger input since it's the only field in this modal */
.missed-wear-date-field {
  display: block;
}

.missed-wear-date-field input {
  font-size: 22px;
  padding: 16px 14px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Watch of the Month / Rotation Status / Wear Last 7 Days titles: two shades
   darker than the default bright heading color, using explicit panel-class
   selectors rather than positional ones (:last-child bit us once already
   on this exact row -- see v15 notes). */
.watch-of-month-panel .dashboard-panel-heading h2,
.rotation-status-panel .dashboard-panel-heading h2,
.recent-wear-panel .dashboard-panel-heading h2 {
  color: var(--gold);
}

/* =====================================================================
   v22 — Global nav redesign: folder tabs, left-menu reorder, dashboard
   restructure (Watch of Month + Highest Rated row, 4-tile metrics row,
   Recent Wear + Rotation Status row), Recent Wear rebuild.
   All rules below are additive/overriding on purpose -- appended last so
   they win ties against the legacy layer without touching it directly.
   ===================================================================== */


/* --- Left menu: Compare / Add Watch neutral card treatment (matches the
   former Watch Room hero button identity: dark charcoal, gold border/icon) --- */
.wear-menu-card-neutral {
  border: 1px solid #c7a45f !important;
  background: linear-gradient(180deg,#171512,#0d0c0a) !important;
  color: #eee7dc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.wear-menu-card-neutral:hover {
  border-color: #e1ca94 !important;
  background: linear-gradient(180deg,#211d17,#12100d) !important;
}

.wear-menu-card-neutral .wear-menu-icon {
  background: rgba(199,164,95,.10);
  border: 1px solid rgba(199,164,95,.22);
  color: #d8c08a;
}

.wear-menu-card-neutral .wear-menu-copy strong { color: #eee7dc; }
.wear-menu-card-neutral .wear-menu-copy small { color: rgba(220,214,204,.56); }
.wear-menu-card-neutral .wear-menu-arrow { color: #d8c08a; }

/* Download Backup / Restore Backup are plain (non-card) menu buttons sitting
   below the icon cards; match their text's left edge to the card labels'
   text (card padding 10px + icon 26px + gap 9px = 45px), not just the
   button's own small padding. */
.topnav .utility-nav#downloadBackup,
.topnav .utility-nav#restoreBackup {
  padding-left: 38px !important;
  min-height: 36px !important;
}

/* --- Dashboard top row: Watch of the Month + Highest Rated, equal width --- */
.dashboard-columns.dashboard-top-row {
  margin-bottom: 18px;
  gap: 12px;
}

.highest-rated-panel .highest-rated-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.hr-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid #302a25;
  border-radius: 14px;
  background: #12100e;
  cursor: pointer;
}

.hr-copy {
  flex: 0 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hr-name {
  display: block;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--gold-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-details {
  display: block;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.hr-image-placeholder {
  font-size: 26px;
  opacity: .5;
}

.hr-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.hr-score-number {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-soft);
}

.hr-score-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.highest-rated-panel .dashboard-panel-heading h2 {
  color: var(--gold);
}

@media (max-width: 480px) {
  .hr-feature {
    flex-wrap: wrap;
  }
  .hr-copy {
    order: 1;
    flex-basis: 100%;
  }
  .hr-image {
    order: 2;
  }
  .hr-score {
    order: 3;
  }
}

/* --- Dashboard metrics row: Collection Size / Quality / Honors / Metals,
   four equal tiles now that Highest Rated has moved to the top row --- */
html body #dashboardView #dashboardCards.dashboard-grid {
  gap: 12px !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows: 172px !important;
}


/* All four metric-tile labels ("Collection Size", "Collection Quality
   Score", etc.) must sit at the same Y position regardless of how tall
   each card's own value content is. justify-content:center was centering
   the [value, label] pair as a group per-card, so a card with taller value
   content (e.g. Quality Score's ring) pushed its label lower than a card
   with shorter content -- this is why the titles didn't line up. */
/* Metric tile labels ("Collection Size" etc.) belong at the TOP of each
   card, matching the reference eyebrow-label pattern -- the original
   column-reverse layout put them at the bottom, which never matched the
   spec. Switching to normal column order + flex-start keeps every card's
   label pinned to the same top position regardless of value-content
   height (the actual fix for the earlier "titles don't line up" report),
   without the dead space justify-content:space-between could leave. */
html body #dashboardView #dashboardCards .dashboard-card {
  flex-direction: column !important;
  justify-content: flex-start !important;
  container-type: inline-size;
}

html body #dashboardView #dashboardCards .dashboard-card > span {
  margin: 0 0 10px !important;
  color: var(--gold) !important;
}

html body #dashboardView #dashboardCards .dashboard-card > strong {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html body #dashboardView #dashboardCards .dashboard-card-metals > strong {
  min-height: 0 !important;
  font-size: inherit !important;
  line-height: normal !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html body #dashboardView #dashboardCards .dashboard-card-metals > span {
  min-height: 12px !important;
  font-size: 9.5px !important;
  font-weight: 550 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  color: var(--gold) !important;
  margin: 0 0 10px !important;
}

html body #dashboardView #dashboardCards .dashboard-card-metals {
  position: relative !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
  grid-column: auto !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* The metric labels ("Collection Quality Score", etc.) are one word longer
   than the narrower 4-column tiles comfortably fit on one line; let them
   wrap cleanly instead of relying on the old single-line-width assumption. */
html body #dashboardView #dashboardCards .dashboard-card-summary > span,
html body #dashboardView #dashboardCards .dashboard-card-metals > span {
  white-space: normal !important;
  font-size: 9.5px !important;
  line-height: 1.3 !important;
  letter-spacing: .08em !important;
}

/* --- Dashboard bottom row: Recent Wear (wide) + Rotation Status (narrow) --- */
.dashboard-columns.dashboard-aligned-columns .recent-wear-panel {
  grid-column: 1 / span 2;
}

.recent-wear-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.recent-wear-heading {
  flex: 0 0 auto;
  align-items: center;
}

.recent-wear-heading h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}


.recent-wear-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 14px;
  padding-right: 4px;
}

.recent-wear-scroll .recent-wear-date-group {
  margin-bottom: 14px;
}

.recent-wear-scroll .recent-wear-date-group:last-child {
  margin-bottom: 4px;
}

.recent-wear-scroll .recent-wear-date-group h4 {
  margin: 0 0 6px;
  color: #b39b76;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.recent-wear-empty {
  margin: 0;
  padding: 2px 0 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.recent-wear-panel .recent-wear-library-link {
  flex: 0 0 auto;
  display: block;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #2e2924;
}

@media (max-width: 760px) {
  .recent-wear-panel {
    height: auto;
  }
  .recent-wear-scroll {
    max-height: 260px;
  }
}

/* --- Watch Room header: match the smaller logo/title scale already used on
   Dashboard, Library, and Activity, now that all four pages share the same
   folder-tab bar directly beneath the header. Values mirror the Secondary
   view's emblem (92px / 72px) and h1 (42px / 36px / 26px) sizing exactly. --- */




@media (max-width: 1180px) {

}

@media (max-width: 700px) {

}

@media (max-width: 520px) {

}

/* --- Metals Breakdown: horizontal distribution bar + two-column legend,
   per the original spec's "preferred enhancement" (previously unimplemented
   -- the card only ever rendered the stacked legend, never the bar). Order
   matches the spec's explicit category order: Yellow Gold, Steel, White
   Gold, Platinum. --- */
.metals-breakdown-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.metals-bar {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: #201c18;
  flex: 0 0 auto;
}

.metals-bar-segment {
  position: absolute;
  top: 0;
  height: 100%;
}

.metals-bar-segment.metal-yellow { background: #d8ad4f !important; }
.metals-bar-segment.metal-white { background: #ece9e3 !important; }
.metals-bar-segment.metal-platinum { background: #9da9c2 !important; }
.metals-bar-segment.metal-steel { background: #a6a7a8 !important; }


/* Only switch to 2 columns once the card itself (not the viewport) is
   verified wide enough for "White Gold"/"Platinum" + percentage to sit
   side by side without colliding. Queries the actual container, so this
   can't be fooled by viewport-width vs. rendered-card-width mismatches
   the way the old media-query approach repeatedly was. */
@container (min-width: 260px) {
  html body #dashboardView #dashboardCards .metals-breakdown-list {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

html body #dashboardView #dashboardCards .metal-breakdown-row {
  grid-template-columns: 8px minmax(0,1fr) auto !important;
  gap: 6px !important;
}


html body #dashboardView #dashboardCards .metal-breakdown-row strong {
  font-size: 10px !important;
}

/* Collection Honors: the fixed 86px badge column + 20px medal gaps were
   tuned for the old wider 3-column card; tighten both for the narrower
   4-tile row so the gold/silver/bronze counts don't crowd the badge. */
html body #dashboardView #dashboardCards .summary-honors-layout {
  grid-template-columns: minmax(0,1fr) 1px 56px !important;
  gap: 12px !important;
}

html body #dashboardView #dashboardCards .dashboard-card-medals .medals-combined {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
}

html body #dashboardView #dashboardCards .dashboard-card-medals .medal-item b {
  font-size: 14px !important;
}

html body #dashboardView #dashboardCards .summary-divider {
  height: 46px !important;
}

html body #dashboardView #dashboardCards .honors-badge {
  width: 52px !important;
  height: 52px !important;
}

html body #dashboardView #dashboardCards .honors-badge svg {
  width: 36px !important;
  height: 36px !important;
}

/* Recent Wear: shrink the count badge slightly so it sits cleanly inside
   the same 34px heading row Watch of the Month and Rotation Status use. */


/* Rotation Status: colored status dots (previously the row markup had no
   dot element at all -- label and counter only). */
.rotation-status-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.rotation-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}

.rotation-dot-active { background: #4fae6e; }
.rotation-dot-inrotation { background: #5b8fc9; }
.rotation-dot-coolingoff { background: #8fa9c2; }
.rotation-dot-dormant { background: #c97a3d; }
.rotation-dot-nodata { background: #6b6660; }

/* Panel headings (Watch of the Month, Highest Rated, Recent Wear, Rotation
   Status) had no font-size/letter-spacing/caps override at all -- they
   were rendering as large default-browser h2 text. The reference shows
   these as small, gold, all-caps eyebrow labels. Appended (not edited in
   place) so it wins the cascade tie against the original unscoped rule
   without touching it directly. */
.dashboard-panel-heading h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
}

.recent-wear-heading h2 small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Left menu drawer was 270px -- noticeably wider than its content needs,
   leaving dead horizontal space on both sides of every button. Narrowed
   so the cards/buttons hug closer to actual content width. */


/* =====================================================================
   v23.1 — Header consistency across all four pages. Previously Room,
   Dashboard/Library (shared rules), and Activity could end up at
   different logo/title sizes depending on which breakpoints each page's
   content length happened to cross (a page needing a scrollbar has a
   few px less effective viewport width than one that doesn't, which can
   flip a max-width breakpoint one page crosses and another doesn't).
   This rule fixes ALL FOUR pages to the exact same values, unconditionally,
   at normal desktop widths, removing that entire class of discrepancy.
   ===================================================================== */


/* Watch Room: even out the gap around Wearing Today so it sits centered
   between the tabs above and the Watch Box heading below (was 24px above,
   ~0px below -- scoped to Room only so it doesn't change tab spacing on
   the other three pages). */


/* =====================================================================
   v23.2 — ROOT CAUSE FOUND: Room's page container uses max-width:1440px
   (var(--room-max), tuned for the Watch Box grid), while Dashboard,
   Library, and Activity were using the unscoped base .view rule's
   max-width:1600px -- a real, confirmed 160px difference. This is why
   Room's content (including the header) always looked more "zoomed in"
   than the other three, and why top padding differed (28px vs 26px,
   compounding the effect). Not a logo-size bug -- the logo was always
   92px everywhere; the CONTAINER around it was different. Fixing the
   container width directly instead of the previous (ineffective) patch
   to the logo's own size.
   ===================================================================== */


html body #dashboardView.view,
html body #libraryView.view,
html body #timelineView.view {
  max-width: 1440px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 48px !important;
}

/* v23.8 — GENUINE root cause of the Activity-specific discrepancy: not a
   CSS rule difference at all (verified: none exists after a full,
   corrected selector audit) but a browser rendering effect. Short pages
   (Activity, often just 2-3 events) may not need a vertical scrollbar,
   while long pages (Dashboard, Library) do -- and a scrollbar's ~15-17px
   eats into the available content width, shifting everything centered
   within it. scrollbar-gutter:stable reserves that space on every page
   unconditionally, whether a scrollbar is actually needed or not, so the
   available width -- and therefore the centered header/content -- is
   identical regardless of how much content a given page happens to have. */
html {
  scroll-behavior: smooth;
  background: #050505;
  scrollbar-gutter: stable;
}

/* v23.9 — Title-to-kicker spacing was never actually unified: Room used
   its hero-copy's flex gap:5px PLUS the kicker's own margin-top:4px
   (9px combined), while the three secondary pages used gap:0 plus
   margin-top:3px (3px combined) -- a real, confirmed 6px difference,
   via two entirely different mechanisms. Also re-asserting kicker
   font-size once more at max specificity in case any earlier rule was
   still winning. Single unified value for all four pages, one mechanism
   (margin only, gap zeroed everywhere) so there's nothing left to add up
   differently between pages. */


/* =====================================================================
   v24 — Floating horizontal scrollbar for the wear-picker grids (Current
   Wear, Missed Wear). The native scrollbar for the horizontally-scrolling
   grid sits at the grid's own bottom edge, which scrolls out of view once
   you scroll down past the Box row to see Drawer/Winder. This bar is a
   sibling of the scrolling grid (not a child), absolutely positioned
   within the modal card, so it stays visible regardless of vertical
   scroll position. JS keeps it in sync with the real scrollLeft in both
   directions (dragging the bar scrolls the grid; scrolling the grid
   moves the bar).
   ===================================================================== */
.modal-card {
  backdrop-filter: blur(18px);
  width: min(1120px,97vw);
  max-height: 94vh;
  overflow: auto;
  border: 1px solid #40372f;
  border-radius: 24px;
  box-shadow: 0 36px 100px rgba(0,0,0,.66);
  border-color: #2a2722 !important;
  background: #0a0a0a !important;
  position: relative;
}

.compare-content-shell {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  min-height: 0;
  display: flex;
  flex: 1;
  position: relative;
}

.floating-hscroll {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  z-index: 5;
  height: 10px;
  padding: 0 4px;
  box-sizing: border-box;
  pointer-events: none;
}

.floating-hscroll[hidden] {
  display: none;
}

.floating-hscroll-thumb {
  position: absolute;
  top: 0;
  left: 4px;
  height: 10px;
  min-width: 40px;
  border-radius: 6px;
  background: linear-gradient(180deg,#d8c08a,#b88f45);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: grab;
  pointer-events: auto;
  opacity: .85;
  transition: opacity .15s ease;
}

.floating-hscroll-thumb:hover,
.floating-hscroll-thumb.dragging {
  opacity: 1;
}

.floating-hscroll-thumb.dragging {
  cursor: grabbing;
}

.floating-hscroll-track-bg {
  position: absolute;
  inset: 0 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
}

/* v24.1 — Watch of the Month: Winner and Runner-up cards were sized to
   content only, leaving a large empty gap below them (justify-content:
   center just repositioned the pair, it didn't grow them). Giving both
   cards flex-grow so they actually expand to fill the panel -- Winner
   gets more of the space, Runner-up's bottom now lines up with the
   bottom of the Highest Rated card next to it, since both panels share
   the same 390px height. Images enlarged to match the taller cards. */
.wotm-winner {
  display: grid;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #302a25;
  border-radius: 14px;
  background: #12100e;
  text-align: left;
  cursor: pointer;
  flex: 1.35 1 0;
  min-height: 0;
  grid-template-columns: 140px 1fr;
}

.wotm-runner-up {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border: 1px solid #342c24;
  border-radius: 12px;
  background: #12100e;
  text-align: left;
  cursor: pointer;
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: 90px 1fr;
}

.wotm-winner-image {
  width: 140px !important;
  height: 140px !important;
}

.wotm-runner-image {
  border-radius: 10px;
  width: 90px !important;
  height: 90px !important;
}

/* Highest Rated: show the full watch image (uncropped), matching the
   same tile treatment used in the Watch Box grid (object-fit:contain,
   near-square aspect ratio) instead of the tightly cropped/zoomed
   object-fit:cover version. */
.hr-image {
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c0c;
  border: 1px solid #342c24;
  display: grid;
  place-items: center;
  width: 160px;
  height: auto;
  aspect-ratio: 1 / 1.08;
}

/* Collection Size now links to Watch Room instead of Library -- mirror
   the cursor:pointer treatment the library-link cards already have. */
html body #dashboardView [data-dashboard-room-link="true"] {
  cursor: pointer !important;
}

html body #roomView .secondary-view-divider,
html body #dashboardView .secondary-view-divider,
html body #libraryView .secondary-view-divider,
html body #timelineView .secondary-view-divider {
  width: calc(100% - 32px) !important;
  max-width: 1180px !important;
  height: 1px !important;
  margin: 0 auto 10px !important;
}


/* v24.7.1 — Mobile page-shell parity. The old Room-only 74px top padding
   sat on top of main's 64px mobile offset, while the other views used 14px.
   That was the large vertical shift visible at identical narrow widths. */
@media (max-width: 620px) {
  html body #roomView.view,
  html body #dashboardView.view,
  html body #libraryView.view,
  html body #timelineView.view {
    padding: 14px 10px 48px !important;
  }
}

/* =====================================================================
   v24.8 — Wear picker viewport + responsive six-column fit
   - The modal card is a fixed-height flex shell; only the picker grid
     scrolls vertically.
   - The custom horizontal bar is overlaid at the bottom of that visible
     picker viewport, so it never drops below the displayed window.
   - At normal tablet/desktop widths, Box and Drawer fit all six watches.
     Horizontal scrolling is retained only below 640px.
   ===================================================================== */
.wear-picker-modal .wear-picker-card {
  width: min(1180px, 97vw) !important;
  max-width: 1180px !important;
  height: min(94vh, 1500px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.wear-picker-modal .modal-head,
.wear-picker-modal .modal-actions,
.wear-picker-modal > .wear-picker-card > .notice {
  flex: 0 0 auto;
}

.wear-picker-modal .compare-content-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.wear-picker-modal .wear-selection-grid {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 8px 8px 26px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.wear-picker-modal .watch-picker-group-grid {
  width: 100%;
  grid-template-columns: repeat(var(--picker-cols, 6), minmax(0, 1fr));
  gap: 12px;
}

.wear-picker-modal .wear-select-card {
  min-width: 0;
  min-height: 220px;
  padding: 10px;
  border-radius: 16px;
}

.wear-picker-modal .wear-select-card .watch-image {
  width: 100%;
  max-width: 126px;
  margin-inline: auto;
}

.wear-picker-modal .floating-hscroll {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  z-index: 20;
}

/* On genuinely narrow screens, preserve usable card dimensions and let the
   floating bar provide horizontal access. */
@media (max-width: 639px) {
  .wear-picker-modal .watch-picker-group-grid {
    width: max-content;
    grid-template-columns: repeat(var(--picker-cols, 6), 132px);
    gap: 10px;
  }

  .wear-picker-modal .wear-select-card {
    min-height: 205px;
  }
}

/* v24.9 — Watch Room architectural section headers */
#roomView .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 28px;
  margin: 0 0 8px !important;
}

#roomView .section-title {
  display: grid;
  grid-template-columns: 24px auto minmax(24px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#roomView .section-title h2 {
  margin: 0 !important;
  color: #d7c39a !important;
  font-family: "Avenir Next", Avenir, Inter, "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 1.35px !important;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(203, 164, 79, .08);
}

#roomView .section-title-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(202, 163, 77, .58);
  border-radius: 6px;
  box-sizing: border-box;
  background:
    linear-gradient(145deg, rgba(217, 181, 97, .14), rgba(50, 34, 13, .05) 48%, rgba(0, 0, 0, .28)),
    #0a0907;
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 173, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .9),
    0 1px 5px rgba(0, 0, 0, .55);
}

#roomView .section-title-icon > span,
#roomView .section-title-icon::before,
#roomView .section-title-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

/* Watch box: compartment grid */
#roomView .section-heading--box .section-title-icon > span {
  width: 11px;
  height: 9px;
  border: 1px solid #c8a24f;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
#roomView .section-heading--box .section-title-icon::before {
  width: 1px;
  height: 9px;
  background: rgba(200, 162, 79, .8);
}
#roomView .section-heading--box .section-title-icon::after {
  width: 11px;
  height: 1px;
  background: rgba(200, 162, 79, .8);
}

/* Drawer: inset drawer face and pull */
#roomView .section-heading--drawer .section-title-icon > span {
  width: 12px;
  height: 8px;
  border: 1px solid #c8a24f;
  border-radius: 2px;
}
#roomView .section-heading--drawer .section-title-icon::before {
  left: 8px;
  top: 10px;
  width: 6px;
  height: 1px;
  background: #c8a24f;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}

/* Winders: paired winding drums */
#roomView .section-heading--winders .section-title-icon > span {
  left: 4px;
  width: 7px;
  height: 7px;
  border: 1px solid #c8a24f;
  border-radius: 50%;
}
#roomView .section-heading--winders .section-title-icon::before {
  right: 4px;
  width: 7px;
  height: 7px;
  border: 1px solid #c8a24f;
  border-radius: 50%;
}
#roomView .section-heading--winders .section-title-icon::after {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e1bc66;
  box-shadow: -5px 0 0 #e1bc66, 5px 0 0 #e1bc66;
}

/* Incoming: staging target */
#roomView .section-heading--incoming .section-title-icon > span {
  width: 10px;
  height: 10px;
  border: 1px solid #c8a24f;
  border-radius: 50%;
}
#roomView .section-heading--incoming .section-title-icon::before {
  width: 4px;
  height: 1px;
  background: #e1bc66;
}
#roomView .section-heading--incoming .section-title-icon::after {
  width: 1px;
  height: 4px;
  background: #e1bc66;
}

#roomView .section-title-rule {
  height: 1px;
  min-width: 24px;
  background: linear-gradient(90deg,
    rgba(198, 158, 69, .62) 0%,
    rgba(198, 158, 69, .24) 44%,
    rgba(198, 158, 69, .04) 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .75);
}

#roomView .room-section-tools {
  gap: 5px !important;
  min-width: max-content;
}

#roomView .room-section-tools > span {
  color: #b89a59 !important;
  font-family: "Avenir Next", Avenir, Inter, "Segoe UI", sans-serif !important;
  font-size: 8px !important;
  font-weight: 500;
  letter-spacing: .15px;
  white-space: nowrap;
}

#roomView .room-lock-button {
  width: 26px;
  height: 26px;
  transform: none !important;
  border-radius: 7px;
  border-color: rgba(202, 163, 77, .34);
  background: linear-gradient(145deg, rgba(207, 170, 84, .08), rgba(0, 0, 0, .2));
  font-size: 12px;
}

@media (max-width: 639px) {
  #roomView .section-heading {
    gap: 7px !important;
  }
  #roomView .section-title {
    grid-template-columns: 22px auto minmax(8px, 1fr);
    gap: 6px;
  }
  #roomView .section-title h2 {
    font-size: 10px !important;
    letter-spacing: .9px !important;
  }
  #roomView .room-section-tools > span {
    font-size: 7px !important;
  }
}

/* ======================================================================
   v24.10 — Dashboard metric tiles + metals legibility + narrow viewport
   ====================================================================== */

/* Keep the dashboard within the visible page. Several earlier rules use
   fixed-width internals; these guards prevent them from establishing a
   document-wide minimum width. */
html body #dashboardView,
html body #dashboardView > *,
html body #dashboardView #dashboardCards,
html body #dashboardView #dashboardCards > *,
html body #dashboardView .dashboard-columns,
html body #dashboardView .dashboard-columns > *,
html body #dashboardView .dashboard-card,
html body #dashboardView .dashboard-card > strong,
html body #dashboardView .dashboard-card-summary,
html body #dashboardView .dashboard-card-metals,
html body #dashboardView .metals-breakdown-body,
html body #dashboardView .metals-breakdown-list,
html body #dashboardView .metal-breakdown-row,
html body #dashboardView .summary-metric-copy {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body #dashboardView {
  width: 100% !important;
  overflow-x: clip !important;
}

/* More readable metal composition bar. */


html body #dashboardView #dashboardCards .metals-bar-segment {
  height: 100% !important;
}

html body #dashboardView #dashboardCards .metals-breakdown-list {
  grid-template-columns: 1fr !important;
  gap: 6px 16px !important;
  margin-top: 12px !important;
}

html body #dashboardView #dashboardCards .metal-breakdown-row b {
  font-size: 10px !important;
  font-weight: 600 !important;
  overflow-wrap: anywhere !important;
}

/* Four tiles at normal desktop width, two tiles per row when compact. */
@media (max-width: 900px) {
  html body #dashboardView #dashboardCards.dashboard-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows: 154px !important;
  }

  html body #dashboardView #dashboardCards .summary-size-layout,
  html body #dashboardView #dashboardCards .summary-quality-layout,
  html body #dashboardView #dashboardCards .summary-honors-layout {
    grid-template-columns: minmax(0,1fr) 1px 58px !important;
    gap: 10px !important;
  }

  html body #dashboardView #dashboardCards .summary-watch-icon,
  html body #dashboardView #dashboardCards .quality-ring,
  html body #dashboardView #dashboardCards .honors-badge {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  html body #dashboardView #dashboardCards .summary-watch-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  html body #dashboardView #dashboardCards .honors-badge svg {
    width: 38px !important;
    height: 38px !important;
  }

  html body #dashboardView #dashboardCards .quality-ring span {
    font-size: 19px !important;
  }

  html body #dashboardView #dashboardCards .summary-divider {
    height: 42px !important;
  }
}

/* Truly phone-sized layouts stack; do not crush the card internals. */
@media (max-width: 430px) {
  html body #dashboardView #dashboardCards.dashboard-grid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-auto-rows: 146px !important;
  }
}

/* ======================================================================
   v24.11 — Highest Rated showcase + integrated scrollbar + metals bar
   ====================================================================== */

/* Recent Wear scrollbar: dark architectural track with restrained gold thumb. */
html body #dashboardView .recent-wear-scroll {
  scrollbar-width: thin;
  scrollbar-color: #9d793d #15110e;
  scrollbar-gutter: stable;
}

html body #dashboardView .recent-wear-scroll::-webkit-scrollbar {
  width: 10px;
}

html body #dashboardView .recent-wear-scroll::-webkit-scrollbar-track {
  background: #15110e;
  border-left: 1px solid rgba(207,165,74,.12);
  border-radius: 999px;
  box-shadow: inset 0 0 5px rgba(0,0,0,.72);
}

html body #dashboardView .recent-wear-scroll::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid #15110e;
  border-radius: 999px;
  background: linear-gradient(90deg,#5d4524 0%,#b18a46 48%,#6f522a 100%);
  box-shadow: inset 0 1px 0 rgba(255,235,178,.24), 0 0 4px rgba(0,0,0,.48);
}

html body #dashboardView .recent-wear-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg,#75572c 0%,#d0a652 48%,#856332 100%);
}

/* Increase the composition bar from 12px to 14px. */
html body #dashboardView #dashboardCards .metals-bar {
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(210,168,74,.22) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.10),
    inset 0 -1px 2px rgba(0,0,0,.55) !important;
  height: 14px !important;
}

/* Highest Rated is a centered showcase rather than a three-column metric row. */


html body #dashboardView .highest-rated-panel .hr-score {
  order: 3 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 2px !important;
  margin-top: 2px !important;
  text-align: center !important;
}

html body #dashboardView .highest-rated-panel .hr-score-number {
  font-size: 31px !important;
  line-height: .95 !important;
}

html body #dashboardView .highest-rated-panel .hr-score-label {
  font-size: 8px !important;
  letter-spacing: .13em !important;
}


/* Alpha v24.13 — Wearing Today gold watch separator */
html body #roomView #todayWrist .wearing-today-separator {
  display: inline-block;
  color: #cfa54a !important;
  margin: 0 7px;
  font-weight: 600;
  opacity: 0.95;
  text-shadow: 0 0 6px rgba(207, 165, 74, 0.18);
}

html body #roomView #todayWrist .wearing-today-entry {
  color: inherit;
}

/* Alpha v24.19 — separate Wearing Today watch-name emphasis */
html body #roomView #todayWrist .wearing-today-name {
  color: #d7ad55 !important;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-shadow: 0 0 6px rgba(207, 165, 74, 0.12);
}

html body #roomView #todayWrist .wearing-today-details {
  color: #ddd8ce !important;
  font-weight: 600;
}

/* Alpha v24.14 — integrated Activity tile scrolling + Lifetime history */


html body #timelineView #collectionTimeline .timeline-tile .timeline-tile-events::-webkit-scrollbar {
  width: 9px;
}

html body #timelineView #collectionTimeline .timeline-tile .timeline-tile-events::-webkit-scrollbar-track {
  background: #17130f;
  border-left: 1px solid rgba(207, 165, 74, 0.10);
  border-radius: 999px;
}

html body #timelineView #collectionTimeline .timeline-tile .timeline-tile-events::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid #17130f;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f4827 0%, #b28a48 50%, #6e542d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

html body #timelineView #collectionTimeline .timeline-tile .timeline-tile-events::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #73572e 0%, #c9a25d 50%, #806137 100%);
}


/* Alpha v24.15 — visible-score medal thresholds + Highest Rated luxury showcase */


html body #dashboardView .highest-rated-panel .hr-score-plaque .hr-score-label {
  margin-top: 3px;
  color: rgba(229,215,182,.67) !important;
  font-size: 7.5px !important;
  font-weight: 600;
  letter-spacing: .17em !important;
  text-transform: uppercase;
}


@media (max-width: 430px) {
  html body #dashboardView .highest-rated-panel .hr-image {
  width: 166px !important;
  height: 166px !important;
}
  html body #dashboardView .highest-rated-panel .hr-name {
  font-size: 20px !important;
}
}

/* v24.17 — Recent Wear logged-wears tooltip.
   Appended to <body> and positioned fixed so it always renders above cards,
   panels, internal scrollers, and overflow-clipped dashboard regions. */
.recent-wear-badge {
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: rgba(199,164,95,.07);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--gold-soft);
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
  cursor: help;
}

.recent-wear-badge-tooltip {
  position: fixed;
  z-index: 2147483647;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(207, 165, 74, 0.48);
  border-radius: 9px;
  background: rgba(14, 12, 10, 0.98);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: #eee7da;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  text-align: left;
}

.recent-wear-badge-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.recent-wear-badge-tooltip strong {
  display: block;
  margin: 0 0 3px;
  color: #d8b15b;
  font: 600 12px/1.25 "Avenir Next", Avenir, Arial, sans-serif;
  letter-spacing: 0.15px;
}

.recent-wear-badge-tooltip span {
  display: block;
  color: #aaa39a;
  font: 500 10.5px/1.35 "Avenir Next", Avenir, Arial, sans-serif;
}

/* =====================================================================
   v24.18 — Dashboard watch presentation upgrade
   - Highest Rated: editorial left-copy / right-hero showcase
   - Dashboard watch artwork: tiered recessed display wells
   ===================================================================== */

/* Shared recessed display-well language for dashboard watch artwork. */
html body #dashboardView .wotm-winner-image,
html body #dashboardView .wotm-runner-image,
html body #dashboardView .recent-wear-image,
html body #dashboardView .hr-image {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(205,159,72,.10) 0%, rgba(205,159,72,.025) 38%, transparent 69%),
    linear-gradient(180deg,#090806 0%,#12100d 100%);
  border: 1px solid rgba(199,156,72,.34);
  box-shadow:
    inset 0 7px 14px rgba(0,0,0,.76),
    inset 4px 0 9px rgba(0,0,0,.43),
    inset -4px 0 9px rgba(0,0,0,.43),
    inset 0 -1px 0 rgba(235,196,112,.18),
    0 1px 0 rgba(255,255,255,.025);
}

html body #dashboardView .wotm-winner-image::after,
html body #dashboardView .wotm-runner-image::after,
html body #dashboardView .recent-wear-image::after,
html body #dashboardView .hr-image::after {
  content:"";
  position:absolute;
  inset:5px;
  z-index:2;
  border:1px solid rgba(255,222,153,.055);
  border-radius:inherit;
  pointer-events:none;
}

html body #dashboardView .wotm-winner-image .watch-tile-photo,
html body #dashboardView .wotm-runner-image .watch-tile-photo,
html body #dashboardView .recent-wear-image .watch-tile-photo,
html body #dashboardView .hr-image img {
  position:relative;
  z-index:1;
}

/* Winner: medium-depth cabinet recess. */


/* Runner-up: deliberately shallower than the winner. */


/* Recent Wear: restrained micro-recess; enough depth without visual noise. */
html body #dashboardView .recent-wear-image {
  border-radius:8px;
  border-color:rgba(199,156,72,.24);
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.68),
    inset 2px 0 4px rgba(0,0,0,.32),
    inset -2px 0 4px rgba(0,0,0,.32),
    inset 0 -1px 0 rgba(235,196,112,.12);
}
html body #dashboardView .recent-wear-image::after { inset:3px; }
html body #dashboardView .recent-wear-image .watch-tile-photo img {
  width:88% !important;
  height:88% !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:5px;
}

/* Highest Rated: use the wide tile as an editorial showcase instead of a stack. */
html body #dashboardView .highest-rated-panel .highest-rated-body {
  align-items: stretch;
  min-height: 0;
}

html body #dashboardView .hr-feature {
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(190px,.82fr) minmax(250px,1.18fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "rank image"
    "copy image"
    "score image";
  align-items:center;
  justify-items:start;
  column-gap:22px;
  row-gap:7px;
  width:100%;
  height:100%;
  min-height:0;
  padding:18px 20px 18px 24px !important;
  overflow:hidden;
  border:1px solid rgba(207,165,74,.28) !important;
  border-radius:14px;
  background:
    radial-gradient(circle at 74% 48%,rgba(205,159,72,.13) 0%,rgba(205,159,72,.045) 29%,transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.09)),
    #100e0c !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -22px 46px rgba(0,0,0,.20);
}

html body #dashboardView .hr-feature::after {
  content:"";
  position:absolute;
  top:15%;
  bottom:15%;
  left:40.8%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(207,165,74,.20),transparent);
  pointer-events:none;
}

html body #dashboardView .hr-rank {
  grid-area:rank;
  align-self:end;
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:4px 9px;
  border:1px solid rgba(210,169,82,.42);
  border-radius:999px;
  background:rgba(207,165,74,.075);
  color:#d8b768;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
}

html body #dashboardView .hr-copy {
  grid-area:copy;
  align-self:center;
  width:100%;
  min-width:0;
  gap:5px;
  text-align:left;
}

html body #dashboardView .hr-name {
  font-size:clamp(20px,2vw,25px) !important;
  line-height:1.05;
  white-space:normal !important;
  color:#ead392;
  text-shadow:0 1px 8px rgba(0,0,0,.50);
}

html body #dashboardView .hr-details {
  font-size:11px !important;
  line-height:1.35;
  white-space:normal !important;
  color:rgba(226,217,202,.60);
}

html body #dashboardView .hr-score-plaque {
  grid-area:score;
  align-self:start;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  width:112px;
  min-height:62px;
  padding:8px 13px 7px;
  border:1px solid rgba(213,170,77,.50);
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(205,159,72,.12),rgba(205,159,72,.035)),
    #15110c;
  box-shadow:
    inset 0 1px 0 rgba(255,236,190,.08),
    inset 0 -8px 16px rgba(0,0,0,.20),
    0 5px 15px rgba(0,0,0,.22);
}

html body #dashboardView .hr-score-number {
  font-size:34px !important;
  line-height:.92;
  color:#eed58e;
}

html body #dashboardView .hr-score-label {
  margin-top:5px;
  font-size:8px;
  letter-spacing:.13em;
  color:rgba(231,220,201,.55);
}

html body #dashboardView .hr-image {
  grid-area:image;
  justify-self:stretch;
  align-self:stretch;
  width:100% !important;
  height:auto !important;
  min-height:210px;
  max-height:252px;
  border-radius:12px;
  border-color:rgba(210,169,82,.42);
  box-shadow:
    inset 0 10px 20px rgba(0,0,0,.82),
    inset 7px 0 12px rgba(0,0,0,.50),
    inset -7px 0 12px rgba(0,0,0,.50),
    inset 0 -1px 0 rgba(242,205,126,.23),
    0 0 0 1px rgba(0,0,0,.62),
    0 8px 22px rgba(0,0,0,.26);
}

html body #dashboardView .hr-image::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(circle at 50% 44%,rgba(226,181,91,.13),transparent 58%);
  pointer-events:none;
}

@media (max-width: 760px) {
  html body #dashboardView .hr-feature {
    grid-template-columns:minmax(150px,.9fr) minmax(180px,1.1fr);
    column-gap:14px;
    padding:15px !important;
  }
  html body #dashboardView .hr-feature::after { left:42%; }
  html body #dashboardView .hr-image { min-height:180px; max-height:220px; }
  html body #dashboardView .hr-score-plaque { width:100px; min-height:56px; }
  html body #dashboardView .hr-score-number { font-size:30px !important; }
}

@media (max-width: 520px) {
  html body #dashboardView .hr-feature {
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(150px,180px) auto auto;
    grid-template-areas:
      "rank"
      "image"
      "copy"
      "score";
    justify-items:center;
    row-gap:7px;
    padding:13px !important;
  }
  html body #dashboardView .hr-feature::after { display:none; }
  html body #dashboardView .hr-copy { text-align:center; }
  html body #dashboardView .hr-score-plaque { align-items:center; }
  html body #dashboardView .hr-image {
    justify-self:stretch;
    min-height:150px;
    max-height:180px;
  }
}

/* =====================================================================
   v24.20 — Corrected Highest Rated split showcase + stronger WOTM wells
   ===================================================================== */

/* Match the specificity of the earlier centered showcase rules so the
   editorial split cannot be overridden by legacy !important declarations. */


html body #dashboardView .highest-rated-panel .hr-name {
  overflow: visible !important;
  text-overflow: clip !important;
  font-family: Georgia,"Times New Roman",serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  width: 100% !important;
  color: #ead392 !important;
  font-size: clamp(20px,2vw,24px) !important;
  line-height: 1.05 !important;
  text-align: left !important;
  white-space: normal !important;
}

html body #dashboardView .highest-rated-panel .hr-details {
  overflow: visible !important;
  text-overflow: clip !important;
  color: rgba(226,217,199,.62) !important;
  letter-spacing: .02em;
  width: 100% !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
}


html body #dashboardView .highest-rated-panel .hr-score-plaque .hr-score-number {
  color: #f0d484 !important;
  font-family: Georgia,"Times New Roman",serif !important;
  text-shadow: 0 1px 8px rgba(212,160,54,.13);
  font-size: 32px !important;
  line-height: .92 !important;
}


/* Winner and runner-up wells: more visible dark surround and stronger recess. */


html body #dashboardView .wotm-winner-image .watch-tile-photo,
html body #dashboardView .wotm-winner-image .watch-tile-photo img {
  width: 100% !important;
  height: 100% !important;
}


html body #dashboardView .wotm-runner-image .watch-tile-photo,
html body #dashboardView .wotm-runner-image .watch-tile-photo img {
  width: 100% !important;
  height: 100% !important;
}


@media (max-width: 760px) {
  html body #dashboardView .highest-rated-panel .hr-feature {
  grid-template-columns: minmax(155px,.88fr) minmax(195px,1.12fr) !important;
  column-gap: 15px !important;
  padding: 14px 14px 14px 17px !important;
}
  html body #dashboardView .highest-rated-panel .hr-feature::after { left: 42% !important; }
  
}

@media (max-width: 520px) {
  html body #dashboardView .highest-rated-panel .hr-feature {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(150px,178px) auto auto !important;
    grid-template-areas:
      "rank"
      "image"
      "copy"
      "score" !important;
    justify-items: center !important;
    row-gap: 7px !important;
    padding: 13px !important;
    text-align: center !important;
  }
  html body #dashboardView .highest-rated-panel .hr-feature::after { display: none !important; }
  html body #dashboardView .highest-rated-panel .hr-rank,
  html body #dashboardView .highest-rated-panel .hr-score-plaque { justify-self: center !important; }
  html body #dashboardView .highest-rated-panel .hr-copy {
    align-items: center !important;
    text-align: center !important;
  }
  html body #dashboardView .highest-rated-panel .hr-name,
  html body #dashboardView .highest-rated-panel .hr-details { text-align: center !important; }
  html body #dashboardView .highest-rated-panel .hr-score-plaque { align-items: center !important; }
  
}

/* v24.22 — Dashboard image proportion refinement.
   Preserve the new editorial showcase/recess concept while restoring full-image visibility
   and reducing the overbuilt frame treatment on Watch of the Month imagery. */

/* Highest Rated: show the complete square watch artwork inside the right chamber. */


/* Watch of the Month: lighter single-rim recess with larger artwork. */
html body #dashboardView .wotm-winner-image {
  border-radius: 13px;
  border: 1px solid rgba(214,171,82,.44) !important;
  background: radial-gradient(circle at 50% 43%,rgba(210,164,73,.105),transparent 61%),
    linear-gradient(180deg,#080705,#15110d) !important;
  padding: 3px !important;
  border-color: rgba(214,171,82,.34) !important;
  box-shadow: inset 0 7px 13px rgba(0,0,0,.78),
    inset 4px 0 8px rgba(0,0,0,.42),
    inset -4px 0 8px rgba(0,0,0,.42),
    inset 0 -1px 0 rgba(244,204,119,.18),
    0 1px 0 rgba(255,255,255,.025) !important;
}

html body #dashboardView .wotm-winner-image::after,
html body #dashboardView .wotm-runner-image::after {
  display: none !important;
}

html body #dashboardView .wotm-runner-image {
  border-radius: 10px;
  border: 1px solid rgba(204,159,71,.32) !important;
  background: radial-gradient(circle at 50% 43%,rgba(202,155,67,.07),transparent 63%),
    linear-gradient(180deg,#090806,#13100d) !important;
  padding: 2px !important;
  border-color: rgba(204,159,71,.25) !important;
  box-shadow: inset 0 5px 10px rgba(0,0,0,.68),
    inset 3px 0 6px rgba(0,0,0,.34),
    inset -3px 0 6px rgba(0,0,0,.34),
    inset 0 -1px 0 rgba(237,198,113,.13) !important;
}

@media (max-width: 760px) {
  html body #dashboardView .highest-rated-panel .hr-image {
  width: 190px !important;
  height: 190px !important;
  min-height: 178px !important;
  max-height: 215px !important;
  padding: 13px 15px !important;
}
  html body #dashboardView .highest-rated-panel .hr-image img {
    max-width: min(100%, 195px) !important;
    max-height: min(100%, 195px) !important;
  }
}

@media (max-width: 520px) {
  html body #dashboardView .highest-rated-panel .hr-image {
  justify-self: stretch !important;
  min-height: 150px !important;
  max-height: 178px !important;
  padding: 10px 12px !important;
}
  
}

/* Alpha v24.27 — Keep the original v24.22 in-card medal popover and only
   elevate its existing stacking context. No portal, cloning, or fixed positioning. */
html body #dashboardView #dashboardCards:has(.dashboard-card-medals .medal-item:hover),
html body #dashboardView #dashboardCards:has(.dashboard-card-medals .medal-item:focus) {
  z-index: 2147483000 !important;
}
html body #dashboardView .dashboard-card-medals:has(.medal-item:hover),
html body #dashboardView .dashboard-card-medals:has(.medal-item:focus) {
  z-index: 2147483001 !important;
  overflow: visible !important;
}
html body #dashboardView .dashboard-card-medals .medal-item:hover,
html body #dashboardView .dashboard-card-medals .medal-item:focus {
  z-index: 2147483002 !important;
}
html body #dashboardView .dashboard-card-medals .dashboard-metric-popover {
  width: 310px !important;
  padding: 14px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  z-index: 2147483003 !important;
}

/* Alpha v24.26 — Complete dashboard image rims and rounded showcase artwork. */


html body #dashboardView .wotm-runner-image .watch-tile-photo {
  border-radius: 8px !important;
  border-color: rgba(204,159,71,.28) !important;
}


/* Alpha v24.28 — Preserve dashboard image fidelity and finish showcase corners.
   Do not resample the Watch of the Month artwork with CSS transforms. */
html body #dashboardView .wotm-winner-image .watch-tile-photo,
html body #dashboardView .wotm-runner-image .watch-tile-photo {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  border: 1px solid rgba(213,171,84,.36) !important;
  box-shadow: inset 0 0 0 1px rgba(255,224,151,.045),
    0 0 0 1px rgba(0,0,0,.62) !important;
  transform: none !important;
  backface-visibility: hidden !important;
}

html body #dashboardView .wotm-winner-image .watch-tile-photo img,
html body #dashboardView .wotm-runner-image .watch-tile-photo img {
  border-radius: inherit !important;
  box-shadow: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
}

/* Round the actual Pikachu artwork—not only the surrounding chamber.
   Root cause: the v24.22 rule above forces `aspect-ratio:1/1` on this
   img combined with `object-fit:contain`. For any uploaded photo that
   isn't already square, that letterboxes the image inside its own
   square box -- e.g. a 1537x1023 photo renders ~35px inset from the
   box's top/bottom edges. border-radius still rounds the *box*
   correctly, but the box's rounded corners fall entirely within that
   letterboxed empty margin, so the visible photo rectangle's own
   (unrounded, straight-cut) edges are what the person actually sees.
   Fixing the border-radius/filter/clip-path alone (as earlier patches
   in this file tried) can't fix that -- the box needs to match the
   photo's real rendered shape, so `aspect-ratio` is reset to auto here
   and the img is left to size to its own (clamped) intrinsic ratio. */


@media (max-width: 520px) {
  html body #dashboardView .highest-rated-panel .hr-image img {
  max-width: min(100%, 158px) !important;
  max-height: min(100%, 158px) !important;
  clip-path: inset(0 round 11px) !important;
  border-radius: 12px !important;
}
}


/* Alpha v24.29 — Compact Library rows.
   Brand and Watch Room location are intentionally omitted from every Library view. */
html body #libraryTable tbody td {
  height: 52px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

html body #libraryTable .watch-cell {
  vertical-align: middle !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

html body #libraryTable .watch-differentiators {
  color: var(--gold, #d8b65a) !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

/* ======================================================================
   v24.31 — Setup Watch Room
   ====================================================================== */
.watch-room-setup-card{width:min(1120px,calc(100vw - 32px));max-height:min(900px,calc(100vh - 32px));overflow:hidden}
.setup-room-intro{margin:6px 0 0;color:#9e978f;font-size:13px}
.setup-room-body{padding:22px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#090909}
.setup-layout-card{min-width:0;padding:18px;border:1px solid rgba(190,151,75,.24);border-radius:14px;background:linear-gradient(180deg,#141210,#0e0d0c);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.setup-layout-card p{margin:8px 0 16px;color:#958f88;font-size:12px;line-height:1.45}
.setup-layout-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.setup-layout-copy h3{margin:3px 0 0;font-size:20px;color:#f4efe6}
.setup-layout-copy>strong{white-space:nowrap;color:#d9b45d;font-size:12px;letter-spacing:.04em}
.setup-room-kicker{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b38b3d}
.setup-dimension-grid{--setup-columns:8;display:grid;grid-template-columns:repeat(var(--setup-columns),minmax(0,1fr));gap:5px;max-width:100%}
.setup-dimension-cell{aspect-ratio:1;border:1px solid rgba(197,157,74,.22);border-radius:4px;background:#080807;box-shadow:inset 0 2px 4px rgba(0,0,0,.65);cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}
.setup-dimension-cell.active,.setup-dimension-cell.preview{border-color:#c79a3d;background:linear-gradient(145deg,#d7b465,#8b6121);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 1px rgba(196,148,49,.12)}
.setup-dimension-cell:focus-visible{outline:2px solid #e0ba62;outline-offset:2px}
.setup-dimension-grid-3{max-width:210px}
.setup-incoming-card{grid-column:1/-1;padding:16px 18px}
.setup-check-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0b0a09;cursor:pointer}
.setup-check-row span{display:flex;flex-direction:column;gap:4px}.setup-check-row strong{color:#f2ede5}.setup-check-row small{color:#918b84}
.setup-check-row input{width:20px;height:20px;accent-color:#cda54c}
.setup-room-warning{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid rgba(205,81,72,.45);border-radius:10px;background:rgba(91,24,20,.22);color:#e8aaa5;font-size:12px}
.setup-room-warning[hidden]{display:none!important}
.setup-room-actions{flex:0 0 auto}
#incomingSection[hidden]{display:none!important}
@media(max-width:900px){.setup-room-body{grid-template-columns:1fr 1fr}.setup-layout-card[data-setup-section="Winder"],.setup-incoming-card{grid-column:1/-1}}
@media(max-width:620px){.setup-room-body{grid-template-columns:1fr;padding:14px}.setup-layout-card[data-setup-section="Winder"],.setup-incoming-card{grid-column:auto}.setup-room-actions{align-items:stretch;gap:10px}.setup-room-actions>div{display:flex;gap:8px}.setup-room-actions>div>*{flex:1}}


/* ======================================================================
   v24.32 — Setup Watch Room scrolling + full-row winder selection
   ====================================================================== */
html body .watch-room-setup-card{
  display:flex !important;
  flex-direction:column !important;
  max-height:calc(100dvh - 32px) !important;
  overflow:hidden !important;
}
html body .watch-room-setup-card>.modal-head,
html body .watch-room-setup-card>.setup-room-actions{
  flex:0 0 auto !important;
}
html body .watch-room-setup-card>.setup-room-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
  scrollbar-color:#9a7537 #15110e;
}
html body .watch-room-setup-card>.setup-room-body::-webkit-scrollbar{width:10px}
html body .watch-room-setup-card>.setup-room-body::-webkit-scrollbar-track{
  background:#15110e;
  border-left:1px solid rgba(207,165,74,.12);
}
html body .watch-room-setup-card>.setup-room-body::-webkit-scrollbar-thumb{
  min-height:44px;
  border:2px solid #15110e;
  border-radius:999px;
  background:linear-gradient(90deg,#5d4524 0%,#b18a46 48%,#6f522a 100%);
}
html body .watch-room-setup-card>.setup-room-body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#75572c 0%,#d0a652 48%,#856332 100%);
}
html body .setup-winder-row-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  max-width:210px !important;
}
html body .setup-winder-row-grid .setup-dimension-cell{
  cursor:pointer;
}
html body .setup-winder-row-grid .setup-dimension-cell:is(.active,.preview){
  border-color:#c79a3d;
  background:linear-gradient(145deg,#d7b465,#8b6121);
}

/* ======================================================================
   v24.33 — Setup Watch Room guaranteed vertical scrolling
   ====================================================================== */


html body #watchRoomSetupModal .setup-room-body::-webkit-scrollbar {
  width: 10px;
}

html body #watchRoomSetupModal .setup-room-body::-webkit-scrollbar-track {
  background: #15110e;
  border-left: 1px solid rgba(207, 165, 74, .12);
}

html body #watchRoomSetupModal .setup-room-body::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid #15110e;
  border-radius: 999px;
  background: linear-gradient(90deg, #5d4524 0%, #b18a46 48%, #6f522a 100%);
}

html body #watchRoomSetupModal .setup-room-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #75572c 0%, #d0a652 48%, #856332 100%);
}

@media (max-height: 700px) {
  html body #watchRoomSetupModal .watch-room-setup-card {
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}

/* ======================================================================
   v24.34 — Compact winder setup + overflow only when needed
   ====================================================================== */


/* Match the winder selector cells to the visual scale of the 8 × 8 grids. */
html body #watchRoomSetupModal .setup-winder-row-grid {
  width: 112px !important;
  max-width: 112px !important;
  gap: 5px !important;
}

html body #watchRoomSetupModal .setup-winder-row-grid .setup-dimension-cell {
  width: 34px !important;
  height: 34px !important;
  aspect-ratio: 1 !important;
}

/* Use the third column efficiently: winders above Incoming. This removes the
   unnecessary full-width dead zone while preserving a scrollable modal when
   viewport height is reduced or more settings are added later. */
@media (min-width: 901px) {
  html body #watchRoomSetupModal .setup-room-body {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
  }

  html body #watchRoomSetupModal .setup-layout-card[data-setup-section="Box"] {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  html body #watchRoomSetupModal .setup-layout-card[data-setup-section="Drawer"] {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  html body #watchRoomSetupModal .setup-layout-card[data-setup-section="Winder"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  html body #watchRoomSetupModal .setup-incoming-card {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

  html body #watchRoomSetupModal .setup-room-warning {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* v25.0 — Watch Record interface imported from Fixed Record Size build */
/* v24.32 — Luxury Watch Record dossier */
#watchModal { padding: 10px; }

#watchModal .watch-record-hero {
  padding: 24px 28px 20px;
  background: linear-gradient(100deg, rgba(9,10,10,.98), rgba(13,14,14,.98));
  border-bottom-color: rgba(176,132,50,.28);
}
#watchModal .record-title-block { min-width: 0; }


#watchModal .modal-title-row { align-items: baseline; gap: 12px; }
#watchModal .modal-title-row h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(31px,3vw,48px); font-weight: 500; letter-spacing: .015em; }
#watchModal #recordReference { color: #eee8df; font-family: Georgia,serif; font-size: clamp(22px,2vw,34px); }
#watchModal .record-subtitle { margin: 7px 0 0; color: #d3a64c; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
#watchModal .record-hero-side { display:flex; align-items:flex-start; gap:20px; }
#watchModal .record-chips { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding-top:14px; }
#watchModal .record-chip { padding:10px 16px; border:1px solid rgba(185,139,50,.36); border-radius:10px; background:linear-gradient(180deg,#191713,#10100f); color:#e4bf73; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; box-shadow:inset 0 1px rgba(255,255,255,.035); }

#watchModal .record-tabs { gap:0; padding:0 28px; background:#0d0e0e; overflow-x:auto; }
#watchModal .record-tabs button { min-height:64px; flex:1 0 auto; border-radius:0; border:1px solid #292721; border-width:0 1px 1px 0; background:linear-gradient(180deg,#181817,#121313); color:#a9a39a; padding:0 25px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
#watchModal .record-tabs button:first-child { border-left:1px solid #292721; }
#watchModal .record-tabs button span { color:#b89550; margin-right:10px; font-size:16px; }
#watchModal .record-tabs button.active { color:#f7f1e6; background:radial-gradient(circle at 50% 100%,rgba(207,159,61,.2),transparent 65%),linear-gradient(180deg,#211e17,#15140f); box-shadow:inset 0 -2px #d0a34d, inset 0 0 28px rgba(193,145,48,.08); }

#watchModal .profile-layout { grid-template-columns:minmax(330px, 38%) 1fr; gap:22px; align-items:start; }
#watchModal .image-editor { padding:8px; border:1px solid rgba(180,132,42,.48); border-radius:20px; background:linear-gradient(145deg,#11110f,#080909); box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 0 24px rgba(187,132,34,.035); }
#watchModal .profile-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px;
  box-sizing: border-box;
  position: relative !important;
  height: min(590px,60vh);
  min-height: 430px;
  border-color: rgba(205,155,55,.55);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 45%,rgba(195,139,40,.15),transparent 48%),#080909;
  box-shadow: inset 0 0 55px rgba(0,0,0,.72);
}
#watchModal .upload-button {
  cursor: pointer;
  margin: 4px 8px 0;
  border-color: rgba(184,139,56,.42);
  background: linear-gradient(180deg,#211d17,#151411);
  color: #ead6aa;
}
#watchModal #removeImage { margin:0 8px 6px; }
#watchModal .record-details-stack { display:grid; gap:12px; }
#watchModal .record-field-card { border:1px solid #292924; border-radius:14px; background:linear-gradient(180deg,#111212,#0c0d0d); box-shadow:inset 0 1px rgba(255,255,255,.025); overflow:hidden; }
#watchModal .record-field-card h3 { margin:0; padding:14px 18px 11px; border-bottom:1px solid #25251f; color:#d5aa55; font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
#watchModal .record-field-card h3 span { margin-right:10px; }
#watchModal .record-field-card .form-grid { padding:14px 18px 16px; gap:12px 28px; }
#watchModal .record-field-card label { font-size:10px; letter-spacing:.04em; text-transform:none; }
#watchModal .record-field-card input,#watchModal .record-field-card select,#watchModal .record-field-card textarea { border-width:0 0 1px; border-radius:0; padding:8px 2px 9px; background:transparent; border-color:#332e25; box-shadow:none; }
#watchModal .record-field-card input:focus,#watchModal .record-field-card select:focus,#watchModal .record-field-card textarea:focus { border-color:#c99a42; }
#watchModal .record-field-card textarea { min-height:58px; }
#watchModal .watch-location-readonly { border:0; border-radius:9px; padding:8px 0 4px; background:transparent; }
#watchModal .watch-location-readonly strong { font-size:20px; }
#watchModal .watch-location-readonly .secondary-button { border-color:rgba(191,143,51,.55); color:#f0d18e; background:#11110f; }

#watchModal .primary-button { min-width:150px; background:linear-gradient(180deg,#e2bd69,#b8842e); color:#151008; border-color:#e5c77e; box-shadow:inset 0 1px rgba(255,255,255,.45),0 6px 16px rgba(0,0,0,.28); }
#watchModal .secondary-button { background:#111212; }
#watchModal .danger-button { background:#1e100e; border-color:#7a342d; color:#efa39d; }
@media(max-width:900px){
 #watchModal .watch-record-hero{align-items:flex-start}.record-hero-side{flex-direction:column-reverse;align-items:flex-end}.record-chips{display:none!important}
 #watchModal .profile-layout{grid-template-columns:1fr}.profile-image{height:420px!important;min-height:320px!important}
 #watchModal .record-tabs button{padding:0 16px;min-height:54px}.record-tabs button span{display:none}
}


/* v24.33 — Fixed-size Watch Record shell + simplified status */
#watchModal > .modal-card {
  width: min(1500px, calc(100vw - 20px));
  max-width: 1500px;
  max-height: calc(100vh - 20px);
  border: 1px solid rgba(195,151,63,.55);
  border-radius: 24px;
  background: radial-gradient(circle at 18% 18%, rgba(183,129,36,.07), transparent 26%), #090a0a;
  box-shadow: 0 30px 90px rgba(0,0,0,.82), inset 0 0 0 1px rgba(255,220,145,.035);
  height: calc(100vh - 20px);
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#watchModal .watch-record-hero,
#watchModal .record-tabs,
#watchModal .modal-actions {
  flex: 0 0 auto;
}
#watchModal #watchForm {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#watchModal .modal-pane {
  padding: 20px 28px 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
#watchModal .modal-pane.active {
  display: block;
}
#watchModal .modal-actions {
  padding: 16px 28px;
  border-top-color: rgba(174,129,48,.28);
  background: rgba(13,13,12,.97);
  position: static;
  margin-top: 0;
}
#watchModal .record-chip.genuine {
  border-color: rgba(118,151,67,.55);
  color: #c9dd8d;
  background: #10170d;
  display: none !important;
}
@media (max-width: 900px) {
  #watchModal > .modal-card { height: calc(100vh - 20px); }
}


/* ======================================================================
   v25.2 — Left menu section separators
   ====================================================================== */
html body .topbar .topnav > .nav-divider {
  display: block !important;
  width: calc(100% - 16px) !important;
  height: 1px !important;
  flex: 0 0 1px !important;
  margin: 8px 8px !important;
  border: 0 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(199,164,95,.14) 10%,
    rgba(199,164,95,.28) 50%,
    rgba(199,164,95,.14) 90%,
    transparent 100%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.42) !important;
}

html body .topbar .topnav > .nav-divider-final {
  margin-top: 9px !important;
  margin-bottom: 2px !important;
}

/* ======================================================================
   Alpha v25.4 — Locked Library + Activity interface polish
   Scope intentionally excludes Watch Room.
   ====================================================================== */

/* LIBRARY — preserve the compact sortable table; refine only controls. */
html body #libraryView .library-head-tools-only {
  margin-bottom: 16px !important;
}

html body #libraryView .library-tools {
  gap: 9px !important;
}

html body #libraryView .library-tools input,
html body #libraryView .library-tools select {
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(173,137,76,.32) !important;
  border-radius: 10px !important;
  background-color: #15120f !important;
  color: #e5ded5 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.45) !important;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

html body #libraryView .library-tools input::placeholder {
  color: #867d73 !important;
}

html body #libraryView .library-tools input:hover,
html body #libraryView .library-tools select:hover {
  border-color: rgba(207,165,74,.58) !important;
  background-color: #191510 !important;
}

html body #libraryView .library-tools input:focus,
html body #libraryView .library-tools select:focus {
  outline: none !important;
  border-color: #cda452 !important;
  background-color: #1a1611 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 2px rgba(205,164,82,.10) !important;
}

html body #libraryView .library-column-sets {
  margin-top: 14px !important;
  margin-bottom: 10px !important;
  gap: 8px !important;
}

html body #libraryView .library-column-sets button {
  min-height: 39px;
  padding: 9px 14px !important;
  border: 1px solid rgba(126,104,70,.24) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg,#181512,#12100e) !important;
  color: #a89d8f !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    inset 0 -1px 0 rgba(0,0,0,.55) !important;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}

html body #libraryView .library-column-sets button:hover {
  color: #d8cbb8 !important;
  border-color: rgba(163,129,70,.44) !important;
  background: linear-gradient(180deg,#1d1915,#15120f) !important;
}

html body #libraryView .library-column-sets button.active {
  border-color: rgba(211,171,88,.72) !important;
  background: linear-gradient(180deg,#292118,#1b1712) !important;
  color: #e4bd6d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,195,.055),
    inset 0 -2px 0 rgba(211,171,88,.50) !important;
}

/* ACTIVITY — luxury logbook polish with completely static rows. */
html body #timelineView #collectionTimeline .timeline-tile {
  min-width: 0;
  height: 344px;
  display: grid;
  grid-template-rows: 58px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid #312b26;
  border-radius: 14px;
  border-color: rgba(113,89,55,.52) !important;
  background: linear-gradient(180deg,#171411 0%,#12100e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html body #timelineView #collectionTimeline .timeline-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #302a25;
  position: relative;
  min-height: 58px;
  border-bottom-color: rgba(126,98,57,.38) !important;
  background: linear-gradient(180deg,#1d1915,#181411) !important;
}

html body #timelineView #collectionTimeline .timeline-tile-head::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,rgba(205,164,82,.55),rgba(205,164,82,.08) 46%,transparent 82%);
  pointer-events: none;
}

html body #timelineView #collectionTimeline .timeline-tile-head h2 {
  margin: 0;
  line-height: 1;
  color: #ece4da !important;
  font-size: 18px !important;
  letter-spacing: -.015em !important;
}

html body #timelineView #collectionTimeline .timeline-tile-head span {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #b6a892 !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .035em;
}

html body #timelineView #collectionTimeline .timeline-month-group {
  border: 1px solid #302a25;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  border-color: rgba(83,68,49,.68) !important;
  background: #14120f !important;
  transition: border-color .14s ease, background-color .14s ease;
}

html body #timelineView #collectionTimeline .timeline-month-group[open] {
  border-color: rgba(193,151,73,.54) !important;
  background: #17130f !important;
  box-shadow: inset 0 1px 0 rgba(255,235,185,.025) !important;
}

html body #timelineView #collectionTimeline .timeline-month-group summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  min-height: 40px !important;
  padding: 8px 11px !important;
  color: #ddd5cb !important;
  background: transparent !important;
}

html body #timelineView #collectionTimeline .timeline-month-group[open] summary {
  color: #e4bd6d !important;
  background: rgba(194,148,66,.035) !important;
  border-bottom: 1px solid rgba(160,123,63,.22);
}

html body #timelineView #collectionTimeline .timeline-month-group summary > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: 11px;
  letter-spacing: .015em;
}

html body #timelineView #collectionTimeline .timeline-month-group summary em {
  font-style: normal;
  font-weight: 500;
  min-width: 24px;
  text-align: right;
  color: #9f9384 !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums;
}

html body #timelineView #collectionTimeline .timeline-month-group[open] summary em {
  color: #c7a866 !important;
}


html body #timelineView #collectionTimeline .timeline-event:hover,
html body #timelineView #collectionTimeline .timeline-event:focus-within {
  background: #191510 !important;
  border-color: rgba(142,110,61,.54) !important;
  box-shadow: none !important;
  transform: none !important;
  scale: 1 !important;
}

html body #timelineView #collectionTimeline .timeline-event time {
  line-height: 1.1;
  color: #a99a86 !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .025em;
}

html body #timelineView #collectionTimeline .timeline-event strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d9b367 !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.25 !important;
}

html body #timelineView #collectionTimeline .timeline-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8f857a !important;
  font-size: 9px !important;
  line-height: 1.25;
}

html body #timelineView #collectionTimeline .timeline-month-events {
  display: grid;
  border-top: 1px solid #28231f;
  gap: 6px !important;
  padding: 0 7px 7px !important;
}

html body #timelineView #collectionTimeline .timeline-month-events .timeline-event:first-child {
  margin-top: 7px !important;
}

html body #timelineView #collectionTimeline .timeline-empty {
  height: 100%;
  display: grid;
  place-items: center;
  min-height: 230px !important;
  align-content: center;
  justify-items: center;
  gap: 7px;
  color: #81786f !important;
  font-size: 11px !important;
  letter-spacing: .02em;
  text-align: center;
}

html body #timelineView #collectionTimeline .timeline-empty::before {
  content: '◷';
  display: block;
  color: #8f7242;
  font-size: 22px;
  line-height: 1;
  opacity: .72;
}

/* Scrollbars remain integrated but appear only when overflow actually exists. */
html body #timelineView #collectionTimeline .timeline-tile .timeline-tile-events {
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #9b783f #17130f;
  overflow-y: auto !important;
  scrollbar-gutter: auto !important;
}


/* ================================================================
   v25.5 — responsive watch-card simplification
   All storage watches use the shared card renderer. As the viewport
   narrows, secondary identification text is removed in stages while
   the score remains visible. The redundant “Overall” label is omitted
   by the renderer at every width.
   ================================================================ */

/* Medium desktop: retain the model and score; remove secondary details. */
@media (max-width: 1450px) {
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer :is(.watch-reference-nickname,.watch-dial,.watch-size) {
    display: none !important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer {
    min-height: 48px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* Compact desktop/tablet: image and score only across every watch location. */
@media (max-width: 1150px) {
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer :is(.watch-title,.watch-reference-nickname,.watch-dial,.watch-size) {
    display: none !important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-meta {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    justify-content: flex-end !important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-meta::before {
    display: none !important;
  }
}

/* ================================================================
   v25.8 — continuous responsive winder scaling
   The prior <=700px fallback imposed a 760px minimum enclosure width,
   which deliberately stopped scaling and introduced horizontal overflow.
   Keep the enclosure fluid instead, and preserve its three physical bays.
   ================================================================ */
@media (max-width: 700px) {
  html body #roomView #windersSection {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  html body #roomView #windersSection .winders-enclosure-frame {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  html body #roomView #windersGrid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}


/* v25.9 — unified storage and display settings */
html body #watchRoomSetupModal .setup-preferences-card{grid-column:1/-1;padding:18px}
html body #watchRoomSetupModal .setup-preference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
html body #watchRoomSetupModal .setup-check-row{margin-top:0;min-height:72px}
html body #watchRoomSetupModal .setup-fidelity-row{grid-column:1/-1}
html body #watchRoomSetupModal .setup-check-actions{display:flex;flex-direction:row;align-items:center;gap:10px}
html body #watchRoomSetupModal .setup-check-actions .help-icon{flex:0 0 auto}
html body #watchRoomSetupModal .setup-check-actions input{flex:0 0 auto}
@media(max-width:700px){html body #watchRoomSetupModal .setup-preference-grid{grid-template-columns:1fr}html body #watchRoomSetupModal .setup-fidelity-row{grid-column:auto}}

/* ======================================================================
   v25.10 — Setup Watch Room internal vertical scrolling
   ====================================================================== */
html body #watchRoomSetupModal {
  padding: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body #watchRoomSetupModal .watch-room-setup-card {
  flex-direction: column !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: min(1120px, calc(100vw - 16px)) !important;
  height: calc(100dvh - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body #watchRoomSetupModal .watch-room-setup-card > .modal-head,
html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-actions {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-body {
  flex: 1 1 0 !important;
  align-items: start !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  padding-right: 16px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto !important;
  scrollbar-color: #b18a46 #17130f !important;
}

html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-body::-webkit-scrollbar {
  width: 12px !important;
}

html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-body::-webkit-scrollbar-track {
  background: #17130f !important;
  border-left: 1px solid rgba(207,165,74,.18) !important;
}

html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-body::-webkit-scrollbar-thumb {
  min-height: 56px !important;
  border: 3px solid #17130f !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#6e5129 0%,#c39a4a 50%,#74562c 100%) !important;
}

html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg,#876432 0%,#ddb45d 50%,#8d6935 100%) !important;
}

/* v25.11 — Library control-panel consolidation */
html body #libraryView .library-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 14px 0 16px;
  align-items: stretch;
}

html body #libraryView .library-control-card {
  min-width: 0;
  min-height: 132px;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid #2b2722 !important;
  border-radius: 8px !important;
  background: #0b0b0b !important;
  box-shadow: none !important;
}

html body #libraryView .weight-config-head,
html body #libraryView .library-filter-head {
  display: block;
  margin: 0 0 10px !important;
}

html body #libraryView .weight-config-head h2,
html body #libraryView .library-filter-head h2 {
  margin: 2px 0 4px;
  color: #e4ded4;
  font-size: 18px;
  line-height: 1.15;
}

html body #libraryView .weight-config-head p,
html body #libraryView .library-filter-head p {
  margin: 0;
  color: #8f8982;
  font-size: 11px;
  line-height: 1.35;
}

html body #libraryView .weight-config-head .eyebrow,
html body #libraryView .library-filter-head .eyebrow {
  margin-bottom: 4px;
  color: #b99b54;
  font-size: 8px;
  letter-spacing: .13em;
}


html body #libraryView .weight-editor-toggle {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1;
}

html body #libraryView .weight-total {
  margin: 0;
  font-size: 10px;
  white-space: nowrap;
}

html body #libraryView .library-filter-card {
  display: flex;
  flex-direction: column;
}

html body #libraryView .library-filter-card .library-tools {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 7px !important;
  width: 100%;
  margin: auto 0 0 !important;
}

html body #libraryView .library-filter-card .library-tools input,
html body #libraryView .library-filter-card .library-tools select {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

html body #libraryView .library-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}


@media (max-width: 900px) {
  html body #libraryView .library-control-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  html body #libraryView .library-filter-row {
    grid-template-columns: 1fr;
  }

  

  html body #libraryView .weight-total {
    white-space: normal;
  }
}


/* ======================================================================
   v25.12 — Library controls: search first, 3 × 2 weight grid, compact reset
   ====================================================================== */


@media (max-width: 1100px) {
  html body #libraryView .weight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ======================================================================
   v25.13 — Always-visible weights with explicit edit mode
   ====================================================================== */


html body #libraryView .weight-editor {
  padding-top: 12px;
  display: block !important;
  overflow: hidden !important;
}


html body #libraryView .weight-grid input[readonly] {
  cursor: default !important;
  color: #d7d0c5 !important;
  border-color: #2b2925 !important;
  background: #0c0c0c !important;
  box-shadow: none !important;
  opacity: .92 !important;
}

html body #libraryView .weight-editor.is-editing .weight-grid input {
  cursor: text !important;
  color: #fff !important;
  border-color: rgba(201,157,65,.58) !important;
  background: #11100e !important;
  box-shadow: inset 0 0 0 1px rgba(201,157,65,.08) !important;
}

html body #libraryView .weight-editor-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 30px !important;
  margin-top: 8px !important;
}


/* ======================================================================
   v25.14 — Collapsed category weights, 3 × 2 editor, aligned percent
   ====================================================================== */
html body #libraryView .weight-config-summary {
  margin: 8px 0 0 !important;
  padding: 9px 0 0 !important;
  border-top: 1px solid #211f1c;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body #libraryView .weight-summary-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body #libraryView .weight-editor[hidden] {
  display: none !important;
}

html body #libraryView .weight-editor:not([hidden]) {
  display: block !important;
  margin-top: 10px !important;
}

html body #libraryView .weight-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  width: 100% !important;
}

html body #libraryView .weight-grid label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 38px !important;
  min-width: 0 !important;
  width: 100% !important;
  position: relative !important;
}

html body #libraryView .weight-grid label > input {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  box-sizing: border-box !important;
  padding-right: 30px !important;
}

html body #libraryView .weight-grid label > span {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: end !important;
  position: absolute !important;
  right: 10px !important;
  bottom: 0 !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

html body #libraryView #resetWeights {
  min-width: 0 !important;
  min-height: 30px !important;
  width: auto !important;
  padding: 7px 11px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #libraryView #resetWeights[hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  html body #libraryView .weight-config-summary {
  align-items: flex-start !important;
  flex-direction: column !important;
}
  html body #libraryView .weight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 420px) {
  html body #libraryView .weight-grid {
  grid-template-columns: 1fr !important;
}
}


/* v25.15 — scoring methodology summary + dedicated weight editor modal */
html body #libraryView .scoring-method-card{overflow:hidden}
html body #libraryView .scoring-method-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;padding-top:14px;border-top:1px solid rgba(211,168,74,.16)}
html body #libraryView .scoring-method-summary>div{display:grid;gap:4px}
html body #libraryView .scoring-method-summary strong{font-size:13px;color:#eee7dc}
html body #libraryView .scoring-method-summary span{font-size:10px;color:#c9a64e;font-weight:700;letter-spacing:.02em}
html body #libraryView .scoring-method-summary span.invalid{color:#d88a7f}
html body #libraryView .scoring-method-summary .weight-editor-toggle{flex:0 0 auto;padding:9px 13px;font-size:10px;font-weight:700}
.weight-editor-modal-card{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden;background:#0e0d0c;border:1px solid rgba(211,168,74,.3);border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.72)}
.weight-editor-modal-card .modal-head p:last-child{margin:5px 0 0;color:var(--muted);font-size:12px}
.weight-modal-body{padding:22px;overflow-y:auto}
.weight-editor-modal-card .weight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
.weight-editor-modal-card .weight-grid label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:600}
.weight-input-wrap{position:relative}
.weight-input-wrap input{width:100%;height:44px;padding:0 34px 0 13px;border:1px solid #3a332c;border-radius:10px;background:#090909;color:#f3eee7;font-size:14px;font-weight:700}
.weight-input-wrap span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#9c958b;font-size:12px;line-height:1;pointer-events:none}
.weight-modal-total{margin-top:20px;padding:12px 14px;border:1px solid rgba(211,168,74,.22);border-radius:10px;background:#13110f;color:#d5b35c;font-size:12px;font-weight:700;text-align:right}
.weight-modal-total.invalid{color:#d88a7f;border-color:rgba(216,138,127,.35)}
.weight-editor-modal-card .modal-actions{justify-content:space-between}
.weight-editor-modal-card .modal-actions>div{margin-left:auto}
@media(max-width:700px){.weight-editor-modal-card .weight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.weight-editor-modal-card .weight-grid{grid-template-columns:1fr}.weight-editor-modal-card .modal-actions{align-items:stretch;flex-wrap:wrap}.weight-editor-modal-card .modal-actions>div{width:100%;margin-left:0}.weight-editor-modal-card .modal-actions button{flex:1}}


/* v25.16 — scoring methodology impact clarification */
html body #libraryView .scoring-method-summary .weight-impact-note{
  margin:2px 0 0;
  max-width:420px;
  color:var(--muted);
  font-size:10px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
}


/* =====================================================================
   v25.17 — Premium segmented primary navigation.
   Replaces the legacy folder-tab component in every primary view.
   ===================================================================== */
.watch-nav {
  --nav-gold: #c79b38;
  --nav-gold-light: #f0cf76;
  --nav-text-muted: #c6a95f;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1050px, calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto 20px;
  padding: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%),
    linear-gradient(180deg, #101010 0%, #050505 100%);
  border: 1px solid rgba(199,155,56,.42);
  border-radius: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.95),
    0 0 0 4px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.55);
  overflow: hidden;
}
.watch-nav__item {
  position: relative;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 60px;
  padding: 0 18px;
  color: var(--nav-text-muted);
  background: transparent;
  border: 0;
  border-radius: 11px;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.watch-nav__item + .watch-nav__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(199,155,56,.48), transparent);
  box-shadow: 1px 0 rgba(0,0,0,.9);
}
.watch-nav__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  overflow: hidden;
}
.watch-nav__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.watch-nav__label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-nav__item:not(.active) {
  text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255,215,120,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015), inset 0 -2px 4px rgba(0,0,0,.5);
}
.watch-nav__item:not(.active):hover {
  color: var(--nav-gold-light);
  background: rgba(199,155,56,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 -2px 4px rgba(0,0,0,.45), 0 0 14px rgba(199,155,56,.08);
}
.watch-nav__item.active {
  z-index: 2;
  color: #1f1607;
  font-weight: 600;
  text-shadow: 0 1px rgba(255,244,197,.45);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, rgba(0,0,0,.02) 1px, rgba(0,0,0,.02) 3px),
    linear-gradient(180deg, #f1d180 0%, #c99b3d 48%, #aa7621 100%);
  border: 1px solid #d9b45e;
  box-shadow:
    inset 0 1px 0 rgba(255,248,207,.9),
    inset 0 -2px 0 rgba(92,55,7,.45),
    0 0 0 1px rgba(70,42,5,.8),
    0 4px 12px rgba(0,0,0,.5),
    0 0 18px rgba(199,155,56,.14);
}
.watch-nav__item.active::before,
.watch-nav__item.active + .watch-nav__item::before { opacity: 0; }
.watch-nav__item:focus-visible { outline: 2px solid var(--nav-gold-light); outline-offset: -3px; }
@media (max-width: 780px) {
  .watch-nav { width: calc(100% - 24px); min-height: 64px; padding: 5px; }
  .watch-nav__item { min-height: 52px; padding: 0 8px; gap: 7px; font-size: 11px; letter-spacing: .04em; }
  .watch-nav__icon { width: 19px; height: 19px; min-width: 19px; flex-basis: 19px; }
}
@media (max-width: 520px) {
  .watch-nav__item { flex-direction: column; gap: 3px; padding: 5px 2px; font-size: 9px; }
  .watch-nav__item + .watch-nav__item::before { top: 9px; bottom: 9px; }
}


/* Project Watch Alpha v26.0 — interactive Wearing Today stack */
html body #roomView .today-summary{
  margin-bottom: 16px !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 8px 18px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  min-height: 118px !important;
  border: 1px solid rgba(207,165,74,.48) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%),linear-gradient(180deg,#11110f,#080808) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 #000 !important;
}

.today-summary-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(207,165,74,.55);border-radius:8px;background:rgba(207,165,74,.05)}
.today-summary-icon svg,.wear-drag-handle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.today-current-drop{grid-column:1/2;min-width:0;border-bottom:1px solid rgba(207,165,74,.18);padding:2px 0 12px}
.today-current-content{display:block!important;min-width:0!important}
.today-current-card{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:grab}
.today-current-copy{display:flex;flex-direction:column;min-width:0}
.today-current-name{color:#f0ece2!important;font-family:Georgia,'Times New Roman',serif;font-size:21px!important;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-current-meta{margin-top:4px;color:#a9a196!important;font-size:12px!important;font-weight:500!important}
.today-on-wrist{padding:7px 11px;border:1px solid rgba(207,165,74,.55);border-radius:999px;color:#e5be54;background:rgba(207,165,74,.06);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}


.today-wear-pill>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.today-pill-grip{color:#cfa54a;letter-spacing:-3px;margin-right:2px}
.today-empty span{color:#8c867c!important;font-size:12px!important;text-transform:none!important;letter-spacing:0!important}
html body #roomView .today-summary>.text-button{grid-column:2;grid-row:2;align-self:center!important;visibility:hidden}
.today-drop-active{border-color:#d5aa4e!important;background:rgba(207,165,74,.09)!important;box-shadow:inset 0 0 0 1px rgba(207,165,74,.2)}.today-pill-target{border-color:#f0cf76!important}.today-wear-dragging{opacity:.4}.wear-source-dragging{opacity:.55}
.room-slot-filled{position:relative}.watch-card{
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: .2s;
  aspect-ratio: 1/1.08 !important;
  min-height: 0 !important;
  border: 1px solid #211f1c !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg,#151515,#0b0b0b) !important;
  box-shadow: none !important;
  position: relative;
}.room-slot-filled:hover>.wear-drag-handle,.wear-drag-handle:focus{opacity:1}.wear-drag-handle:hover{background:#17130d}
@media(max-width:700px){html body #roomView .today-summary{grid-template-columns:1fr!important}.today-current-drop,.today-earlier-wrap{grid-column:1!important}.today-summary>.text-button{grid-column:1!important;grid-row:auto!important;justify-self:end}.today-current-name{font-size:18px!important}.wear-drag-handle{opacity:1;width:28px;height:28px}}

/* v26.0.1 — deterministic drag previews and robust Wearing Today drop targets */

.pw-drag-ghost-card{width:220px;max-height:320px;overflow:hidden;border:1px solid rgba(224,185,92,.75);border-radius:16px;background:#0b0b0b;box-shadow:0 14px 34px rgba(0,0,0,.58)}
.pw-drag-ghost-card>.watch-card{width:220px!important;min-height:0!important;transform:scale(.96);transform-origin:top left;pointer-events:none!important}
.pw-drag-ghost-wear{display:flex;align-items:center;gap:10px;max-width:280px;padding:9px 12px;border:1px solid rgba(224,185,92,.78);border-radius:12px;background:rgba(10,10,10,.94);color:#eee6d7;box-shadow:0 12px 28px rgba(0,0,0,.55);font:600 12px/1.2 "Avenir Next",Avenir,"Segoe UI",sans-serif}
.pw-drag-ghost-wear img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(0,0,0,.5))}

.wear-drag-active #todayCurrentDrop:after{content:'Drop to set On Wrist';display:block;margin-top:7px;color:#d9b45e;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.wear-drag-active #todayEarlierDrop:after{content:'Drop to add Earlier Today';align-self:center;color:#d9b45e;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* v26.0.2 — center drag hotspot and isolate wear-handle drag source */
.pw-drag-ghost{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  opacity: .72;
  box-sizing: border-box;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.wear-drag-active #todayWearPanel{overflow:visible!important}
.wear-drag-active #todayCurrentDrop,.wear-drag-active #todayEarlierDrop{
  min-height: 44px;
  border: 1px dashed rgba(224,185,92,.82) !important;
  background: rgba(207,165,74,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(207,165,74,.16);
  pointer-events: auto !important;
  position: relative !important;
  z-index: 30 !important;
}


/* v26.0.3 — reliable wear drag initiation */
.room-slot-filled>.wear-drag-handle{
  z-index: 20;
  width: 44px !important;
  height: 44px !important;
  top: 2px !important;
  right: 2px !important;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.room-slot-filled>.wear-drag-handle::before{
  content:'';position:absolute;inset:7px;border:1px solid rgba(207,165,74,.62);
  border-radius:8px;background:rgba(9,9,9,.82);z-index:-1;
}
.room-slot-filled>.wear-drag-handle svg,
.room-slot-filled>.wear-drag-handle svg *{
  pointer-events:none!important;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.room-slot-filled>.wear-drag-handle.wear-handle-armed{opacity:1!important;cursor:grabbing!important}
body.wear-drag-active #todayWearPanel{position:relative;z-index:50}
body.wear-drag-active #todayCurrentDrop,
body.wear-drag-active #todayEarlierDrop{pointer-events:auto!important}


/* v26.0.4 — whole-tile wear logging; dedicated wear handles removed */
.wear-drag-handle{
  position: absolute;
  z-index: 8;
  top: 9px;
  right: 9px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(207,165,74,.62);
  border-radius: 8px;
  color: #e2bd60;
  background: rgba(9,9,9,.78);
  opacity: 0;
  cursor: grab;
  transition: opacity .15s ease,background .15s ease;
  display: none !important;
}
.room-draggable{
  user-select: none;
  -webkit-user-drag: element;
  touch-action: pan-y;
  cursor: grab;
}
.room-draggable:active{
  cursor: grabbing;
}
.room-drag-active #todayWearPanel{position:relative;z-index:50;overflow:visible!important}
.room-drag-active #todayCurrentDrop,
.room-drag-active #todayEarlierDrop{pointer-events:auto!important;position:relative!important;z-index:30!important}


.room-drag-active #todayCurrentDrop:after,
.wear-drag-active #todayCurrentDrop:after{
  content:'Set as current wear'!important;
  color:#c3a35d!important;
  font-size:9px!important;
  font-weight:600!important;
  letter-spacing:.05em!important;
  text-transform:none!important;
}


/* v26.0.5 — differentiated wear names, compact thumbnails, split master-log clears */
.today-summary-heading{
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e1bd62;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  justify-content: flex-start;
}
.today-summary-heading>.today-clear-action{margin-left:auto}
.today-clear-action{
  appearance:none;border:0;background:transparent;padding:4px 0;color:#8f887d;
  font:600 10px/1 "Avenir Next",Avenir,"Segoe UI",sans-serif;letter-spacing:.075em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap
}
.today-clear-action:hover{color:#d8b65e}
.today-clear-action:focus-visible{outline:1px solid #d8b65e;outline-offset:4px;border-radius:3px}
.today-earlier-wrap>.today-clear-action{flex:0 0 auto;margin-left:auto}
.today-wear-pill{
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  border: 1px solid rgba(207,165,74,.38);
  border-radius: 999px;
  background: rgba(207,165,74,.055);
  color: #ddd6ca;
  font-size: 12px;
  cursor: grab;
  padding: 4px 9px 4px 6px;
  gap: 6px;
  min-height: 30px;
}
.today-pill-thumb{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;overflow:hidden;background:#14120f;color:#8e8065;font-size:11px}
.today-pill-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.today-pill-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The earlier drop prompt should remain visible but subordinate during dragging. */
.room-drag-active #todayEarlierDrop:after,.wear-drag-active #todayEarlierDrop:after{
  opacity: .76;
  content: 'Add as earlier wear' !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .045em !important;
  text-transform: none !important;
  color: rgba(217,180,94,.62) !important;
}
@media(max-width:700px){
  .today-earlier-wrap{align-items:flex-start;flex-wrap:wrap}
  .today-earlier-drop{order:3;flex-basis:100%}
  .today-earlier-wrap>.today-clear-action{margin-left:auto}
}


/* v26.0.6 — calmer empty-state hierarchy and clearer drop instructions */
.today-empty{
  display: flex;
  flex-direction: column;
  gap: 5px !important;
}
.today-empty strong{
  color: #e5e0d7 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}


/* v26.0.7 — vertically align Earlier Today helper copy */
.today-earlier-wrap{
  grid-column: 1/2;
  display: flex;
  gap: 10px;
  min-width: 0;
  align-items: center !important;
}
.today-earlier-label{
  flex: 0 0 auto;
  color: #90887c !important;
  font-size: 10px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex !important;
  align-items: center !important;
  min-height: 30px !important;
  line-height: 1 !important;
}
.today-earlier-drop{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 30px;
  flex: 1;
  padding: 3px;
  border: 1px dashed transparent;
  border-radius: 8px;
  align-items: center !important;
}
.today-earlier-empty{
  color: #68635b !important;
  font-size: 10px !important;
  font-style: normal !important;
  letter-spacing: .015em !important;
  opacity: .72;
  white-space: normal !important;
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* v26.0.8 — helper copy standardized to 400 weight */


/* =========================================================
   WEAR HELPER TEXT POLISH — v26.0.11
   Keeps empty-state instructions readable while reducing CTA-like prominence.
   ========================================================= */
.today-empty span,
.today-earlier-empty{
  color: #8f887b !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: .74 !important;
}

/* =========================================================
   v26.0.12 — sticky primary navigation + quieter wear helpers
   ========================================================= */

/* Preserve the v26.0.11 helper styling; only reduce weight to 300. */
html body #roomView .today-empty span,
html body #roomView .today-earlier-empty {
  font-weight: 300 !important;
}

/* Primary navigation follows the page until it reaches the viewport edge. */
html body .watch-nav {
  position: sticky;
  top: 10px;
  z-index: 72;
  transform: translateZ(0);
  /* Keep floating-state transitions visual only. Geometry changes here can
     feed back into the sticky-state measurement and cause rapid oscillation. */
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    backdrop-filter .18s ease;
}

/* Floating state: visual treatment only; dimensions remain identical. */
html body .watch-nav.is-floating {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
    linear-gradient(180deg, rgba(15,15,15,.93) 0%, rgba(4,4,4,.91) 100%);
  border-color: rgba(199,155,56,.34);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.95),
    0 0 0 3px rgba(0,0,0,.48),
    0 10px 26px rgba(0,0,0,.62);
}

@media (max-width: 780px) {
  html body .watch-nav { top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .watch-nav { transition: none; }
}


/* =========================================================
   THE WATCHROOM — CANONICAL MASTHEAD SYSTEM — v0.29.2
   One masthead component, one markup structure, one shared
   rule set. Every view (#roomView, #dashboardView, #libraryView,
   #timelineView) renders identically because every view's
   masthead now carries the same .canonical-page-masthead class
   and the same inner markup -- there is no per-view branch here.
   ========================================================= */
html body .view > .hero-shell.canonical-page-masthead {
  width: 100% !important;
  min-height: 142px !important;
  height: 142px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-copy {
  width: 100% !important;
  height: 142px !important;
  min-height: 142px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-w-emblem {
  flex: 0 0 60px !important;
  width: 77px !important;
  height: 60px !important;
  min-width: 77px !important;
  min-height: 60px !important;
  max-width: 77px !important;
  max-height: 60px !important;
  margin: 0 auto 3px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  filter: none !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-eyebrow-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-eyebrow-rule {
  display: block !important;
  width: 22px !important;
  height: 1px !important;
  background: var(--gold-muted,#b8a174) !important;
  opacity: .55 !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-eyebrow-text {
  display: block !important;
  font-family: "EB Garamond",Georgia,serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  color: var(--gold-muted,#b8a174) !important;
  line-height: 1 !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-title-row {
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: .82 !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-title-row h1 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "EB Garamond",Georgia,serif !important;
  font-size: clamp(27px,2.25vw,36px) !important;
  font-weight: 500 !important;
  line-height: .82 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
html body .view > .hero-shell.canonical-page-masthead .hero-kicker {
  width: 100% !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  font-family: "EB Garamond",Georgia,serif !important;
  font-size: clamp(11px,.9vw,13px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  color: var(--gold-muted,#b8a174) !important;
  text-align: center !important;
}
@media (max-width:760px) {
  html body .view > .hero-shell.canonical-page-masthead .hero-w-emblem {
    flex-basis: 51px !important;
    width: 66px !important;
    height: 51px !important;
    min-width: 66px !important;
    min-height: 51px !important;
    max-width: 66px !important;
    max-height: 51px !important;
    margin-bottom: 3px !important;
  }
  html body .view > .hero-shell.canonical-page-masthead .hero-title-row h1 {
    font-size: 27px !important;
  }
}
@media (max-width:620px) {
  html body .view > .hero-shell.canonical-page-masthead,
  html body .view > .hero-shell.canonical-page-masthead .hero-copy {
    min-height: 132px !important;
    height: 132px !important;
  }
}
html body .topbar .brand-button{
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html body .topbar .brand-mark{width:45px!important;height:35px!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;filter:none!important;flex:0 0 45px!important;}
html body .topbar .brand-wordmark{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;gap:0!important;text-align:center!important;}
html body .topbar .brand-wordmark strong{display:block!important;font-family:"EB Garamond",Georgia,serif!important;font-size:20px!important;font-weight:500!important;line-height:.86!important;letter-spacing:.045em!important;text-transform:uppercase!important;white-space:nowrap!important;}
html body .topbar .brand-wordmark small{display:block!important;margin:0!important;font-family:"EB Garamond",Georgia,serif!important;font-size:9px!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;color:var(--gold-muted,#a99468)!important;white-space:nowrap!important;text-align:center!important;}

/* =========================================================
   v26.0.16 — iPad landscape full-experience baseline
   Acceptance target: 1024 × 768 CSS px at 100% zoom.
   No feature removal; no page-level horizontal overflow.
   Data tables may scroll within their own containers.
   ========================================================= */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Dynamic viewport sizing prevents Safari chrome from trapping modal actions. */
html,
body,
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  top: 0;
  border: 0;
  backdrop-filter: none;
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  border-right: 1px solid #201e1a !important;
  border-bottom: 0 !important;
  background: #080808 !important;
  transform: translateX(-100%) !important;
  transition: transform .2s ease !important;
  z-index: 100 !important;
  width: 224px !important;
  padding: 78px 12px 22px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Keep data-heavy surfaces intentionally scrollable without widening the page. */
.table-wrap,
.library-table-wrap,
.library-table-shell,
.compare-table-wrap,
.compare-table-scroll,
.timeline-table-wrap,
[class*="table-scroll"],
[class*="table-wrap"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Touch devices must never depend on hover to expose an action. */
@media (hover: none), (pointer: coarse) {
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .watch-nav__item,
  .room-nav-button,
  .topnav-btn,
  .menu-toggle,
  .today-clear-action,
  .room-lock-button {
    -webkit-tap-highlight-color: rgba(199,164,95,.16);
    touch-action: manipulation;
  }

  .room-draggable {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .watch-card:hover,
  .watch-nav__item:hover,
  .room-nav-button:hover,
  .topnav-btn:hover {
    transform: none !important;
  }
}

/* Compact desktop / iPad landscape tier. */
@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --ipad-page-gutter: 12px;
    --ipad-section-gap: 14px;
    --ipad-grid-gap: 6px;
  }

  body {
    min-width: 0 !important;
  }

  main,
  .view,
  #roomView.view,
  #dashboardView.view,
  #libraryView.view,
  #timelineView.view {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #roomView.view,
  #dashboardView.view,
  #libraryView.view,
  #timelineView.view,
  .view {
    padding-left: var(--ipad-page-gutter) !important;
    padding-right: var(--ipad-page-gutter) !important;
  }

  .menu-toggle {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    width: 44px !important;
    height: 44px !important;
  }

  .topbar {
    width: min(270px, calc(100vw - 44px)) !important;
    padding-top: max(70px, calc(env(safe-area-inset-top) + 58px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: 14px !important;
  }

  html body .view > .hero-shell.canonical-page-masthead,
  html body .view > .hero-shell.canonical-page-masthead .hero-copy {
    min-height: 126px !important;
    height: 126px !important;
  }

  html body .view > .hero-shell.canonical-page-masthead .hero-w-emblem {
    flex-basis: 53px !important;
    width: 68px !important;
    height: 53px !important;
    min-width: 68px !important;
    min-height: 53px !important;
    max-width: 68px !important;
    max-height: 53px !important;
    margin-bottom: 2px !important;
  }

  html body .view > .hero-shell.canonical-page-masthead .hero-title-row h1 {
    font-size: 29px !important;
  }

  .secondary-view-divider {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }

  html body .watch-nav {
    top: max(8px, env(safe-area-inset-top)) !important;
    gap: 4px !important;
    padding: 5px !important;
    margin-bottom: 12px !important;
  }

  html body .watch-nav .watch-nav__item {
    min-width: 0 !important;
    min-height: 52px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  html body .watch-nav .watch-nav__label {
    font-size: 10px !important;
    letter-spacing: .025em !important;
    white-space: nowrap !important;
  }

  #roomView .today-summary {
    gap: 10px !important;
    padding: 9px 12px !important;
    margin-bottom: 12px !important;
  }

  #roomView .room-stack {
    gap: var(--ipad-section-gap) !important;
  }

  #roomView .section-heading {
    margin-bottom: 6px !important;
  }

  #roomView .watch-grid,
  #roomView .uniform-grid,
  #roomView .storage-grid-six,
  #roomView .incoming-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--ipad-grid-gap) !important;
    min-width: 0 !important;
  }

  #roomView .storage-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #roomView .watchbox-frame,
  #roomView .watch-card,
  #roomView .watch-image,
  #roomView .watch-card-footer {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #roomView .watch-image {
    padding: 6px 5px 3px !important;
  }

  #roomView .watch-card-footer {
    min-height: 58px !important;
    padding: 7px 7px 8px !important;
  }

  #roomView .watch-card-footer strong,
  #roomView .watch-card-footer .watch-name,
  #roomView .watch-card-footer [class*="name"] {
    overflow-wrap: anywhere;
  }

  #roomView .section-nav {
    gap: 5px !important;
    padding: 5px !important;
    margin-bottom: 12px !important;
  }

  #roomView .section-nav .room-nav-button {
    min-height: 44px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  /* Dense configuration cards reflow to two columns at iPad width. */
  .setup-grid,
  .settings-grid,
  .score-grid,
  .weights-grid,
  [class*="setup-grid"],
  [class*="settings-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Every overlay keeps its controls reachable in 768 px landscape. */
  .modal,
  .modal-card,
  .modal-panel,
  .overlay-card,
  .dialog-card,
  [role="dialog"] {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    box-sizing: border-box !important;
  }

  .modal-body,
  .modal-content,
  .overlay-body,
  .dialog-body,
  [role="dialog"] > :not(header):not(footer) {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header,
  .modal-footer,
  .dialog-header,
  .dialog-footer {
    flex: 0 0 auto;
  }

  /* iPad-safe control size for primary navigation and modal actions. */
  .menu-toggle,
  .topnav-btn,
  .watch-nav__item,
  .room-nav-button,
  .hero-action-row button,
  .modal-footer button,
  .dialog-footer button,
  [role="dialog"] button {
    min-height: 44px;
  }

  .today-clear-action,
  .room-lock-button {
    min-height: 36px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* At or below the formal baseline, never allow a single component to widen the page. */
@media (max-width: 1024px) {
  img,
  svg,
  canvas,
  video {
    max-width: 100%;
  }

  .view,
  .hero-shell,
  .room-stack,
  .room-section,
  .watchbox-frame,
  .today-summary,
  .watch-nav {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* The Watchroom v27.0 — native QC Tool view */
.qc-tool-view{
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding:16px 16px 0 !important;
  overflow:hidden;
  background:#090a0b;
  min-height:calc(100dvh - var(--topbar-height,72px));
  box-sizing:border-box;
}
.qc-tool-view.active{display:block;}
.qc-tool-frame{
  display:block;
  width:100%;
  max-width:none;
  height:calc(100dvh - 88px);
  min-height:696px;
  margin:0;
  border:1px solid rgba(201,167,95,.22);
  border-radius:14px;
  background:#090a0b;
  box-sizing:border-box;
}
@media (max-width:780px){
  .qc-tool-view{padding:8px 8px 0!important}
  .qc-tool-frame{width:100%;height:calc(100dvh - 66px);min-height:650px;border-radius:10px;}
}
#qcToolButton .wear-menu-icon{overflow:hidden;}
#qcToolButton .wear-menu-icon svg{width:13px;height:13px;}


/* v27.1 — clearer Watch Record hierarchy and explicit storage slot badge */
#watchModal .record-title-block .eyebrow {
  color: rgba(230,230,230,.58);
  margin-bottom: 12px;
  letter-spacing: .20em;
  font-weight: 700;
}
#watchModal .record-title-block .eyebrow::after {
  content: "";
  display: block;
  width: 132px;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, rgba(212,170,84,.72), rgba(212,170,84,.12));
}
#watchModal .record-brand-line {
  margin-top: 0;
  margin-bottom: 6px;
  color: #d7a845;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .20em;
}


/* The Watchroom v27.7 — Fidelity navigation visibility must override menu divider rules. */
html body.hide-fidelity .topbar .topnav > #qcToolButton {
  display: none !important;
}

/* =========================================================
   The Watchroom Alpha v28.0 — canonical 1076px content shell
   Typography, icons, and touch targets remain unchanged.
   ========================================================= */
:root{
  --sans: Inter,"Segoe UI",Arial,sans-serif;
  --serif: Georgia,serif;
  --green: #245f3e;
  --green2: #2b744b;
  --danger: #9f4d48;
  --blue: #416f96;
  --orange: #b9652d;
  --ease: cubic-bezier(.2,.75,.25,1);
  --bg: #050505;
  --panel: #0c0c0c;
  --panel2: #111111;
  --text: #f2eee7;
  --muted: #85817a;
  --line: #22201d;
  --gold: #c7a45f;
  --gold-soft: #ead39c;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --room-gap: 8px;
  --pw-static-transform: none;
  --pw-storage-tile-ratio: .77 / 1;
  --pw-storage-tile-radius: 9px;
  --pw-storage-edge-width: 12px;
  --pw-storage-edge-opacity: .50;
  --pw-room-photo-edge-width: 10px;
  --pw-room-photo-edge-alpha: .35;
  --pw-radial-edge-alpha: .35;
  --pw-radial-full-opacity-stop: 84%;
  --pw-hybrid-edge-width: 10px;
  --pw-hybrid-edge-alpha: .35;
  --pw-hybrid-radial-stop: 78%;
  --watchroom-content-shell: 1076px;
  --room-max: 1076px;
}

/* Every primary application view shares one centered shell. */
html body main > .view,
html body #roomView.view,
html body #dashboardView.view,
html body #libraryView.view,
html body #timelineView.view,
html body #qcView.view{
  width:min(100%,var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:16px!important;
  padding-right:16px!important;
  box-sizing:border-box!important;
}

/* Keep the Watch Room six-up without reducing any type sizes. */
html body #roomView .watch-grid,
html body #roomView .uniform-grid,
html body #roomView #watchGrid,
html body #roomView #incomingGrid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  column-gap:6px!important;
}
html body #roomView .watch-card-footer{
  padding-left:8px!important;
  padding-right:8px!important;
}
html body #roomView .watch-image{
  padding-left:5px!important;
  padding-right:5px!important;
}

/* Secondary page furniture aligns to the same shell rather than a legacy wider cap. */
html body .secondary-view-divider,
html body #dashboardView > .library-head,
html body #libraryView > .library-head,
html body #timelineView > .library-head,
html body .compare-content-shell{
  max-width:100%!important;
}

/* Wide data remains available through its existing internal scrolling container. */
html body #libraryView .table-shell{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
}

/* QC occupies the same shell and inner 1044px working width as Watch Room. */
html body .qc-tool-view{
  width:min(100%,var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
html body .qc-tool-frame{
  width:100%!important;
  max-width:none!important;
}

@media(max-width:1076px){
  html body main > .view,
  html body #roomView.view,
  html body #dashboardView.view,
  html body #libraryView.view,
  html body #timelineView.view,
  html body #qcView.view{
    width:100%!important;
  }
}

/* =========================================================
   The Watchroom Alpha v28.1 — 1076px shell refinement pass
   Preserves all existing type sizes.
   ========================================================= */

/* Activity: reclaim horizontal space between date and log copy. */


/* Highest Rated: rebalance the editorial split for the narrower shell. */


html body #dashboardView .highest-rated-panel .hr-rank{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217,171,77,.36);
  border-radius: 999px;
  background: linear-gradient(180deg,rgba(67,48,19,.40),rgba(24,19,12,.36));
  color: #d9ae56;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,229,161,.08);
  grid-area: rank !important;
  order: initial !important;
  align-self: end !important;
  justify-self: start !important;
  width: max-content !important;
  min-height: 21px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 8.5px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Watch cards: use the available footer width before truncating metadata. */
@media (min-width:1024px){
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer{
    display:block!important;
    min-height:104px!important;
    height:auto!important;
    padding:34px 8px 10px!important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer :is(.watch-title,.watch-reference-nickname,.watch-dial,.watch-size){
    display:block!important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer :is(.watch-title,.watch-reference-nickname,.watch-dial){
    width:100%!important;
    max-width:100%!important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer .watch-size{
    width:calc(100% - 40px)!important;
    max-width:calc(100% - 40px)!important;
  }

  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-meta{
    right:7px!important;
    bottom:8px!important;
    width:30px!important;
    min-width:30px!important;
  }
}

/* =========================================================
   The Watchroom Alpha v28.2 — Activity copy + Highest Rated restoration
   Uses the pre-v28 editorial treatment, adapted only for the 1076px shell.
   ========================================================= */

/* Activity rows: model first, reference (or dial fallback) second; action below. */
html body #timelineView #collectionTimeline .timeline-event{
  box-sizing: border-box;
  gap: 9px !important;
  align-items: center;
  border-radius: 10px;
  min-height: 66px !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(64,54,46,.72) !important;
  background: #15120f !important;
  box-shadow: none !important;
  transform: none !important;
  scale: 1 !important;
  transition: background-color .12s ease, border-color .12s ease !important;
  grid-template-columns: 42px minmax(0,1fr) 28px !important;
  column-gap: 5px !important;
}

/* Highest Rated: restore the original rounded editorial chamber and visual balance. */
html body #dashboardView .highest-rated-panel .hr-feature{
  isolation: isolate;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  position: relative !important;
  display: grid !important;
  align-items: center !important;
  justify-items: start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
  border: 1px solid rgba(207,165,74,.30) !important;
  background: radial-gradient(circle at 73% 48%,rgba(214,169,78,.14) 0%,rgba(184,131,42,.045) 31%,transparent 61%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.09)),
    #100e0c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -22px 46px rgba(0,0,0,.20) !important;
  grid-template-columns: minmax(178px,.88fr) minmax(218px,1.12fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas: "rank image"
    "copy image"
    "score image" !important;
  column-gap: 16px !important;
  row-gap: 7px !important;
  padding: 16px 16px 16px 20px !important;
  border-radius: 14px !important;
}
html body #dashboardView .highest-rated-panel .hr-feature::before{
  z-index: -1;
  content: "" !important;
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  left: 7px !important;
  top: 7px !important;
  transform: none !important;
  border: 1px solid rgba(232,193,112,.065) !important;
  background: none !important;
  pointer-events: none !important;
  inset: 7px !important;
  border-radius: 10px !important;
}
html body #dashboardView .highest-rated-panel .hr-feature::after{
  inset: 7px;
  border: 1px solid rgba(210,163,70,.09);
  border-radius: 10px;
  content: "" !important;
  position: absolute !important;
  top: 15% !important;
  bottom: 15% !important;
  width: 1px !important;
  background: linear-gradient(180deg,transparent,rgba(207,165,74,.20),transparent) !important;
  pointer-events: none !important;
  left: 42% !important;
}
html body #dashboardView .highest-rated-panel .hr-copy{
  flex: 0 0 auto !important;
  margin-top: -1px;
  grid-area: copy !important;
  order: initial !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
html body #dashboardView .highest-rated-panel .hr-name,
html body #dashboardView .highest-rated-panel .hr-details{
  text-align:left!important;
}
html body #dashboardView .highest-rated-panel .hr-score-plaque{
  position: relative;
  z-index: 2;
  justify-items: center;
  margin-top: 4px;
  border: 1px solid rgba(218,172,76,.42);
  border-radius: 9px;
  background: linear-gradient(180deg,rgba(89,61,20,.34),rgba(23,18,11,.58));
  box-shadow: inset 0 1px 0 rgba(255,230,167,.11),
    0 7px 15px rgba(0,0,0,.24);
  grid-area: score !important;
  order: initial !important;
  align-self: start !important;
  justify-self: start !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
  width: 100px !important;
  min-width: 100px !important;
  min-height: 58px !important;
  padding: 7px 10px 6px !important;
  align-items: center !important;
  text-align: center !important;
}
html body #dashboardView .highest-rated-panel .hr-score-plaque .hr-score-number,
html body #dashboardView .highest-rated-panel .hr-score-plaque .hr-score-label{
  width:100%!important;
  text-align:center!important;
}

html body #dashboardView .highest-rated-panel .hr-image img{
  clip-path: none !important;
  overflow: hidden !important;
  image-rendering: auto !important;
  filter: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 8px !important;
  transform: none !important;
}

/* =========================================================
   The Watchroom Alpha v28.3 — Highest Rated image fill refinement
   NOTE (2026-07-30): the `.hr-image img` half of this block originally
   reset object-fit to `cover` with forced 100% width/height, which
   silently undoes the non-crop fix documented further up this file
   (search "aspect-ratio: auto" / v24.22) for the third time in this
   project's history -- see MERGE_REPORT.txt. Removed; the box sizing
   tweak below is unrelated and kept.
   ========================================================= */
html body #dashboardView .highest-rated-panel .hr-image{
  flex: 0 0 auto !important;
  grid-area: image !important;
  order: initial !important;
  justify-self: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid rgba(210,169,82,.43) !important;
  background: radial-gradient(circle at 50% 43%,rgba(226,181,91,.14),transparent 58%),
    linear-gradient(180deg,#090806,#12100d) !important;
  box-shadow: inset 0 11px 22px rgba(0,0,0,.84),
    inset 8px 0 13px rgba(0,0,0,.52),
    inset -8px 0 13px rgba(0,0,0,.52),
    inset 0 -1px 0 rgba(242,205,126,.24),
    0 0 0 1px rgba(0,0,0,.62),
    0 8px 22px rgba(0,0,0,.26) !important;
  display: grid !important;
  place-items: center !important;
  padding: 6px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

/* =========================================================
   The Watchroom Alpha v28.4 — unified utility interface shell
   Align Log a Wear, Compare, and Watch Record to 1076px.
   ========================================================= */

/* Watch Record uses the same canonical working width as the app. */
html body #watchModal > .modal-card{
  width:min(calc(100vw - 32px),var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
}

/* Log a Wear and Missed Wear picker cards use the full working shell. */
html body .wear-picker-modal > .wear-picker-card,
html body #logTodayWearModal > .wear-picker-card,
html body #logMissedWearPickModal > .wear-picker-card{
  width:min(calc(100vw - 32px),var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
}
html body .wear-picker-modal .compare-content-shell,
html body .wear-picker-modal .wear-selection-grid{
  width:100%!important;
  max-width:100%!important;
}

/* Compare header, working area, and action bar share one aligned shell. */
html body #compareMode .wear-mode-head,
html body #compareResultsMode .wear-mode-head,
html body #compareMode .compare-content-shell,
html body #compareResultsMode .compare-content-shell,
html body #compareMode .wear-selection-grid,
html body #compareResultsMode .wear-selection-grid,
html body #compareResultsMode .compare-results-grid{
  width:min(100%,var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
html body #compareMode .wear-mode-actions,
html body #compareResultsMode .wear-mode-actions{
  left:50%!important;
  right:auto!important;
  width:min(calc(100vw - 32px),var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  border-left:1px solid #342d27!important;
  border-right:1px solid #342d27!important;
  border-radius:14px 14px 0 0!important;
}

@media(max-width:1076px){
  html body #watchModal > .modal-card,
  html body .wear-picker-modal > .wear-picker-card,
  html body #compareMode .wear-mode-actions,
  html body #compareResultsMode .wear-mode-actions{
    width:calc(100vw - 20px)!important;
  }
}

/* =========================================================
   The Watchroom Alpha v28.5 — live Compare shell correction
   Compare is rendered through #wearMode by the shared selector
   controller, so constrain that active interface directly.
   ========================================================= */
html body #wearMode.compare-mode .wear-mode-head,
html body #wearMode.compare-mode .compare-content-shell,
html body #wearMode.compare-mode .wear-selection-grid,
html body #wearMode.results-mode .wear-mode-head,
html body #wearMode.results-mode .compare-content-shell,
html body #wearMode.results-mode .wear-selection-grid,
html body #wearMode.results-mode .compare-results-grid{
  width:min(100%,var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

html body #wearMode.compare-mode .compare-content-shell,
html body #wearMode.results-mode .compare-content-shell{
  flex:1 1 auto!important;
  min-width:0!important;
}

html body #wearMode.compare-mode .wear-mode-actions,
html body #wearMode.results-mode .wear-mode-actions{
  left:50%!important;
  right:auto!important;
  width:min(calc(100vw - 32px),var(--watchroom-content-shell))!important;
  max-width:var(--watchroom-content-shell)!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  border-left:1px solid #342d27!important;
  border-right:1px solid #342d27!important;
  border-radius:14px 14px 0 0!important;
}

@media(max-width:1076px){
  html body #wearMode.compare-mode .wear-mode-actions,
  html body #wearMode.results-mode .wear-mode-actions{
    width:calc(100vw - 20px)!important;
  }
}

/* Alpha v28.6 — expanded Activity panels: ten full log rows before scrolling */
@media (min-width:1001px){
  html body #timelineView #collectionTimeline .timeline-tile{
    height:934px;
  }
}


/* ======================================================================
   v28.9 — Compact modal geometry + The Watchroom form controls
   ====================================================================== */

/* Watch record: size to the active form instead of forcing a viewport-height shell. */
html body #watchModal > .modal-card{
  height:auto !important;
  max-height:calc(100dvh - 20px) !important;
}
html body #watchModal #watchForm{
  flex:0 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}
html body #watchModal .modal-pane{
  flex:0 1 auto !important;
  max-height:calc(100dvh - 250px) !important;
  overflow-y:auto !important;
}
html body #watchModal .modal-actions{
  margin-top:0 !important;
}

/* Setup Watch Room: content-driven height and normal section flow. */
html body #watchRoomSetupModal{
  overflow:auto !important;
}
html body #watchRoomSetupModal .watch-room-setup-card{
  display:flex !important;
  height:auto !important;
  max-height:calc(100dvh - 16px) !important;
}
html body #watchRoomSetupModal .watch-room-setup-card > .setup-room-body{
  flex:0 1 auto !important;
  overflow-y:auto !important;
  align-content:start !important;
}
@media (min-width:901px){
  html body #watchRoomSetupModal .setup-room-body{
    grid-template-rows:auto auto !important;
  }
  html body #watchRoomSetupModal .setup-layout-card[data-setup-section="Box"],
  html body #watchRoomSetupModal .setup-layout-card[data-setup-section="Drawer"],
  html body #watchRoomSetupModal .setup-layout-card[data-setup-section="Winder"]{
    grid-row:1 !important;
    align-self:start !important;
  }
  html body #watchRoomSetupModal .setup-preferences-card{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    align-self:start !important;
  }
  html body #watchRoomSetupModal .setup-room-warning{
    grid-row:3 !important;
  }
}

/* Missed-wear date: one deliberate full-width control. */
html body #logMissedWearDateModal .missed-wear-date-card{
  width:min(440px,calc(100vw - 24px)) !important;
}
html body #logMissedWearDateModal .form-grid{
  grid-template-columns:1fr !important;
}
html body #logMissedWearDateModal .missed-wear-date-field,
html body #logMissedWearDateModal .missed-wear-date-field input{
  width:100% !important;
  box-sizing:border-box !important;
}
html body #logMissedWearDateModal .modal-actions{
  align-items:center !important;
}

/* The Watchroom custom select. Native select remains in the DOM as the data source. */
html body #watchModal .wf-select{
  position:relative;
  width:100%;
}
html body #watchModal .wf-select > select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html body #watchModal .wf-select-trigger{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 2px 9px;
  border:0;
  border-bottom:1px solid #332e25;
  border-radius:0;
  background:transparent;
  color:#eee8df;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
html body #watchModal .wf-select-trigger:hover,
html body #watchModal .wf-select.open .wf-select-trigger{
  border-bottom-color:#c99a42;
}
html body #watchModal .wf-select-chevron{
  flex:0 0 auto;
  color:#d5aa55;
  font-size:12px;
  transition:transform .16s ease;
}
html body #watchModal .wf-select.open .wf-select-chevron{
  transform:rotate(180deg);
}
html body #watchModal .wf-select-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 7px);
  left:0;
  right:0;
  display:none;
  max-height:240px;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(195,151,63,.55);
  border-radius:11px;
  background:linear-gradient(180deg,#181613,#0d0d0c);
  box-shadow:0 18px 44px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.035);
}
html body #watchModal .wf-select.open .wf-select-menu{display:block}
html body #watchModal .wf-select-option{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#ddd6cc;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
html body #watchModal .wf-select-option:hover,
html body #watchModal .wf-select-option:focus-visible{
  outline:none;
  border-color:rgba(205,164,82,.28);
  background:#211d16;
  color:#fff8ec;
}
html body #watchModal .wf-select-option[aria-selected="true"]{
  background:linear-gradient(90deg,rgba(205,164,82,.20),rgba(205,164,82,.06));
  color:#e4bd67;
}
html body #watchModal .wf-select-check{
  color:#e4bd67;
  opacity:0;
}
html body #watchModal .wf-select-option[aria-selected="true"] .wf-select-check{opacity:1}

/* ======================================================================
   v28.10 — fixed Watch Record shell + aligned overview image column
   ====================================================================== */
@media (min-width:801px){
  html body #watchModal > .modal-card{
    position:relative!important;
    height:min(820px,calc(100dvh - 24px))!important;
    min-height:min(760px,calc(100dvh - 24px))!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  html body #watchModal .watch-record-hero{
    position:relative!important;
    flex:0 0 auto!important;
    padding-right:76px!important;
  }
  html body #watchModal #closeModal{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:12!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
  }
  html body #watchModal .record-hero-side{
    padding-right:0!important;
  }
  html body #watchModal #watchForm{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  html body #watchModal .modal-pane{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
  html body #watchModal .modal-actions{
    flex:0 0 auto!important;
  }
  html body #watchModal .modal-pane[data-pane="overview"] .profile-layout{
    align-items:stretch!important;
  }
  html body #watchModal .modal-pane[data-pane="overview"] .image-editor{
    height:100%!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;
    align-self:stretch!important;
  }
  html body #watchModal .modal-pane[data-pane="overview"] .profile-image{
    height:auto!important;
    min-height:0!important;
  }
}

/* ======================================================================
   v28.10.2 — Watch Record overview-governed shell height
   The Overview interface establishes the desktop minimum. Every tab shares
   the same shell, while genuinely oversized panes scroll internally.
   ====================================================================== */
@media (min-width:801px){
  html body #watchModal > .modal-card{
    height:min(1040px,calc(100dvh - 24px))!important;
    min-height:min(900px,calc(100dvh - 24px))!important;
    max-height:calc(100dvh - 24px)!important;
  }
  html body #watchModal #watchForm,
  html body #watchModal .modal-pane{
    min-height:0!important;
  }
  html body #watchModal .modal-pane[data-pane="overview"] .profile-layout{
    min-height:620px!important;
  }
  html body #watchModal .modal-pane[data-pane="overview"] .image-editor,
  html body #watchModal .modal-pane[data-pane="overview"] .record-details-stack{
    min-height:620px!important;
  }
}


/* v28.10.5 — selectable Watch Box leather */
:root{--watchbox-leather-image:url('../assets/watchbox-leather-cognac.png')}
html body #roomView #watchBoxSection .watchbox-leather-frame,
html body #roomView #watchBoxSection .watchbox-isolated-frame{background-image:linear-gradient(rgba(73,29,8,.08),rgba(32,10,2,.15)),var(--watchbox-leather-image)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
html body #roomView #watchBoxGrid>.room-slot,
html body #roomView #watchBoxSection .watchbox-grid-isolated>.room-slot{background-image:linear-gradient(145deg,rgba(10,2,0,.64),rgba(78,31,9,.18)),var(--watchbox-leather-image)!important;background-position:center!important;background-repeat:no-repeat!important;background-size:180% auto!important}
html body #watchRoomSetupModal .setup-leather-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,280px);align-items:center;gap:18px;min-height:82px;padding:14px 16px;border:1px solid #2b2722;border-radius:8px;background:#0b0b0b}
html body #watchRoomSetupModal .setup-leather-row>span:first-child{display:flex;flex-direction:column;gap:5px}
html body #watchRoomSetupModal .setup-leather-row strong{color:#f2ede4;font-size:14px;font-weight:600}
html body #watchRoomSetupModal .setup-leather-row small{color:#8f887e;font-size:12px;line-height:1.35}
html body #watchRoomSetupModal .watchroom-select-shell{position:relative;display:block;min-width:0}
html body #watchRoomSetupModal #setupWatchBoxLeather{width:100%;height:44px;appearance:none;-webkit-appearance:none;padding:0 42px 0 14px;border:1px solid rgba(193,151,73,.42);border-radius:7px;background:linear-gradient(180deg,#171512 0%,#0e0d0b 100%);color:#eee6d8;font:500 13px/1 inherit;letter-spacing:.02em;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 0 0 1px rgba(0,0,0,.45)}
html body #watchRoomSetupModal #setupWatchBoxLeather:hover{border-color:rgba(211,169,88,.68);background:linear-gradient(180deg,#1b1814 0%,#100e0c 100%)}
html body #watchRoomSetupModal #setupWatchBoxLeather:focus{border-color:#c59a4d;box-shadow:0 0 0 3px rgba(197,154,77,.14),inset 0 1px 0 rgba(255,255,255,.03)}
html body #watchRoomSetupModal #setupWatchBoxLeather option{background:#12100e;color:#eee6d8}
html body #watchRoomSetupModal .watchroom-select-chevron{position:absolute;right:14px;top:50%;transform:translateY(-55%);pointer-events:none;color:#c9a15a;font-size:18px;line-height:1}
@media(max-width:700px){html body #watchRoomSetupModal .setup-leather-row{grid-template-columns:1fr;gap:10px}}

/* ======================================================================
   v28.10.5 — Watch Type dropdown visibility fix
   The record card used overflow:hidden, clipping the custom option menu.
   ====================================================================== */
html body #watchModal .record-field-card:has(.wf-select.open){
  overflow:visible !important;
  position:relative !important;
  z-index:120 !important;
}
html body #watchModal .record-field-card:has(.wf-select.open) .form-grid{
  position:relative !important;
  z-index:121 !important;
}
html body #watchModal .wf-select.open{
  z-index:130 !important;
}
html body #watchModal .wf-select-menu{
  z-index:140 !important;
}

/* Alpha v28.10.12 — AI Bridge exports */
.scoring-method-card{position:relative}
.ai-export-icon{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid rgba(193,160,98,.55);border-radius:9px;background:rgba(18,23,22,.7);color:#d9bd7a;font:700 11px/1 system-ui,sans-serif;letter-spacing:.06em;display:grid;place-items:center;cursor:pointer;transition:.18s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.ai-export-icon:hover{transform:translateY(-1px);border-color:#d9bd7a;background:rgba(40,44,39,.9)}
.ai-export-icon:focus-visible{outline:2px solid #d9bd7a;outline-offset:2px}
.compare-ai-export-wrap{margin-top:22px;padding-top:18px;border-top:1px solid rgba(193,160,98,.22)}
.compare-ai-export-button{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px}
.compare-ai-export-button .ai-mark{font-size:11px;letter-spacing:.08em;border:1px solid currentColor;border-radius:6px;padding:4px 5px}
.ai-export-modal-card{width:min(920px,calc(100vw - 28px));max-height:min(86vh,900px);display:flex;flex-direction:column}
.ai-export-summary{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.ai-export-summary span{border:1px solid rgba(193,160,98,.22);background:rgba(255,255,255,.025);border-radius:999px;padding:7px 10px;font-size:12px;color:var(--muted,#a7aaa5)}
.ai-export-textarea{width:100%;min-height:360px;resize:vertical;border:1px solid rgba(193,160,98,.25);border-radius:12px;background:#0d1110;color:#e7e3d8;padding:16px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow:auto}
.ai-export-textarea:focus{outline:none;border-color:rgba(217,189,122,.75);box-shadow:0 0 0 3px rgba(217,189,122,.08)}
.ai-export-status{min-height:20px;margin:9px 0 0;color:#c9ad6b;font-size:12px}
.ai-export-modal-card .modal-actions{gap:12px;flex-wrap:wrap}
.ai-export-modal-card .modal-actions>div{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:640px){.ai-export-modal-card .modal-actions,.ai-export-modal-card .modal-actions>div{width:100%}.ai-export-modal-card .modal-actions button{flex:1}.ai-export-textarea{min-height:300px}.scoring-method-card .weight-config-head>div{padding-right:44px}}

/* Alpha v28.10.13 — AI Bridge modal must sit above Compare/Wear fullscreen modes */
html body #aiExportModal{
  z-index:2147483647 !important;
  isolation:isolate;
}
html body #aiExportModal.open{
  display:flex !important;
}
html body #aiExportModal > .ai-export-modal-card{
  position:relative;
  z-index:2;
}
.collection-ai-modal-card{width:min(760px,calc(100vw - 32px));max-height:min(88vh,860px);display:flex;flex-direction:column;overflow:hidden}.collection-ai-body{padding:4px 24px 18px;overflow:auto;min-height:320px}.ai-category{border:1px solid var(--line);border-radius:14px;margin:10px 0;background:var(--panel)}.ai-category>summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700}.ai-category>summary::-webkit-details-marker{display:none}.ai-category>summary:after{content:'›';font-size:24px;line-height:1;transition:transform .18s;color:var(--muted)}.ai-category[open]>summary:after{transform:rotate(90deg)}.ai-category-title{display:flex;flex-direction:column;gap:3px}.ai-category-title small{font-weight:500;color:var(--muted)}.ai-question-list{border-top:1px solid var(--line);padding:8px}.ai-question-row{display:flex;align-items:flex-start;gap:11px;width:100%;border:1px solid transparent;border-radius:11px;background:transparent;color:inherit;text-align:left;padding:11px 12px;cursor:pointer}.ai-question-row:hover{background:var(--hover)}.ai-question-row.selected{border-color:var(--accent);background:rgba(181,145,60,.10)}.ai-question-radio{width:17px;height:17px;border:1.5px solid var(--muted);border-radius:50%;margin-top:2px;flex:0 0 auto;display:grid;place-items:center}.ai-question-row.selected .ai-question-radio{border-color:var(--accent)}.ai-question-row.selected .ai-question-radio:after{content:'';width:9px;height:9px;border-radius:50%;background:var(--accent)}.ai-question-copy{display:flex;flex-direction:column;gap:5px}.ai-question-copy strong{font-size:14px;line-height:1.35}.ai-question-copy span{font-size:12px;color:var(--muted);line-height:1.4}.ai-inline-option{display:flex;align-items:center;gap:8px;margin-top:7px}.ai-inline-option select{min-width:92px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;padding:6px 8px}.collection-ai-ready{text-align:center;padding:42px 28px 34px}.ai-ready-mark{width:52px;height:52px;border-radius:15px;margin:auto;display:grid;place-items:center;background:var(--accent);color:#111;font-weight:900}.collection-ai-ready .ai-export-summary{justify-content:center;flex-wrap:wrap}.ai-copy-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#171717;color:#fff;padding:11px 16px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.2s;z-index:9999;font-size:13px}.ai-copy-toast.show{opacity:1;transform:translate(-50%,0)}

.compare-ai-export-help{margin:10px auto 0;max-width:620px;text-align:center;color:var(--muted);font-size:12px;line-height:1.45;}

/* v28.10.17 — keep the comparison recommendation explainer contained inside the AI panel */
.analysis-heading {
  position: relative;
}

.analysis-heading .driver-info-wrap {
  position: static;
}

.analysis-heading .driver-popover {
  top: 30px;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  max-height: min(420px, 62vh);
  overflow-y: auto;
  overflow-x: hidden;
}

.analysis-heading .driver-popover header {
  position: sticky;
  top: -15px;
  z-index: 2;
  margin: -15px -15px 12px;
  padding: 15px;
  background: #111920;
  border-bottom: 1px solid rgba(147,185,219,.10);
  border-radius: 12px 12px 0 0;
}

.analysis-heading .driver-popover header b {
  min-width: 0;
  white-space: normal;
}

.analysis-heading .driver-close {
  flex: 0 0 auto;
}


/* ======================================================================
   Alpha v28.10.20 — AI Analysis moved into the left action menu
   ====================================================================== */
html body .topbar .topnav #collectionAIExport .wear-menu-ai-mark {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .035em;
}


/* ======================================================================
   Alpha v28.10.22 — Left menu functional grouping
   Capture: Log/Missed Wear | Manage: Add Watch | Analyze: Compare/AI/QC
   Configure: Settings | Maintenance: Backup/Restore
   ====================================================================== */

/* ======================================================================
   Alpha v28.10.23 — Gilt Plaque left-menu treatment
   Preserve icon-left / stacked copy / arrow-right anatomy while adding a
   restrained hardware-inspired luxury surface.
   ====================================================================== */
html body .topbar .topnav .utility-nav.wear-menu-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 43px !important;
  padding: 6px 8px 6px 9px !important;
  border-radius: 9px !important;
  gap: 9px !important;
  transform: translateY(0);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .14s ease !important;
}

html body .topbar .topnav .utility-nav.wear-menu-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg,#e2c46f 0%,#b18a39 48%,#77561b 100%);
  box-shadow: 1px 0 0 rgba(255,233,169,.10);
  pointer-events: none;
}

html body .topbar .topnav .utility-nav.wear-menu-card:hover {
  transform: translateY(-1px);
}

html body .topbar .topnav .utility-nav.wear-menu-card:active {
  transform: translateY(0);
}

html body .topbar .topnav .wear-menu-icon-copy {
  gap: 9px !important;
}

html body .topbar .topnav .wear-menu-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(45,27,4,.35),
    0 2px 5px rgba(0,0,0,.26) !important;
}

html body .topbar .topnav .wear-menu-icon svg {
  width: 13px !important;
  height: 13px !important;
}

html body .topbar .topnav .wear-menu-copy strong {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

html body .topbar .topnav .wear-menu-copy small {
  margin-top: 2px !important;
  font-size: 8.5px !important;
  line-height: 1.12 !important;
}

html body .topbar .topnav .wear-menu-arrow {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  border: 1px solid rgba(199,164,95,.32) !important;
  background: linear-gradient(180deg,rgba(199,164,95,.09),rgba(199,164,95,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Bright wear action: gilt plaque on champagne metal. */
html body .topbar .topnav .wear-menu-card-primary {
  border-color: #dfc478 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.035) 22%,rgba(64,38,5,.12) 100%),
    linear-gradient(135deg,#d9b75f 0%,#bb8e37 56%,#8f6520 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(72,44,7,.38),
    0 5px 13px rgba(0,0,0,.22) !important;
}

html body .topbar .topnav .wear-menu-card-primary::before {
  background: linear-gradient(180deg,#2f210b,#171006);
  box-shadow: 1px 0 0 rgba(255,235,175,.13);
}

html body .topbar .topnav .wear-menu-card-primary .wear-menu-icon {
  background: linear-gradient(180deg,#32230d,#1c1307) !important;
  border: 1px solid rgba(63,39,7,.76) !important;
  color: #e0bd62 !important;
}

html body .topbar .topnav .wear-menu-card-primary .wear-menu-arrow {
  color: #2a1b06 !important;
  border-color: rgba(55,34,5,.34) !important;
  background: rgba(255,255,255,.13) !important;
}

/* Dark bronze wear action. */
html body .topbar .topnav .wear-menu-card-secondary {
  border-color: #a1813f !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.022) 23%,rgba(0,0,0,.13)),
    linear-gradient(135deg,#8d7138 0%,#6e5220 58%,#4a3512 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(22,13,3,.5),
    0 5px 13px rgba(0,0,0,.22) !important;
}

html body .topbar .topnav .wear-menu-card-secondary .wear-menu-icon {
  background: linear-gradient(180deg,#2b1d08,#130d04) !important;
  border: 1px solid rgba(189,145,52,.52) !important;
  color: #cda64e !important;
}

html body .topbar .topnav .wear-menu-card-secondary .wear-menu-arrow {
  color: #e1bd61 !important;
  border-color: rgba(218,177,78,.30) !important;
  background: rgba(22,14,4,.24) !important;
}

/* Standard actions: black enamel field with an inset gilt icon plaque. */
html body .topbar .topnav .wear-menu-card-neutral {
  border-color: rgba(190,147,52,.70) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.005) 28%,rgba(0,0,0,.18)),
    linear-gradient(180deg,#13110d 0%,#080806 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 4px 11px rgba(0,0,0,.20) !important;
}

html body .topbar .topnav .wear-menu-card-neutral:hover {
  border-color: rgba(224,185,91,.90) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.008) 28%,rgba(0,0,0,.16)),
    linear-gradient(180deg,#1b1710 0%,#0b0906 100%) !important;
}

html body .topbar .topnav .wear-menu-card-neutral .wear-menu-icon {
  background: linear-gradient(180deg,#c19a45 0%,#8a6423 100%) !important;
  border: 1px solid #d4b15f !important;
  color: #100b03 !important;
}

html body .topbar .topnav .wear-menu-card-neutral .wear-menu-arrow {
  color: #d8b35c !important;
}

html body .topbar .topnav #collectionAIExport .wear-menu-ai-mark {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

/* =====================================================================
   v28.10.24 — Restore wear-action hover states and improve left-menu
   icon centering/legibility. Keep the gilt-plaque architecture intact.
   ===================================================================== */

/* Match the specificity of the v28.10.23 gilt base rules so hover wins. */
html body .topbar .topnav .wear-menu-card-primary:hover {
  border-color: #f0d58d !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.055) 22%,rgba(64,38,5,.08) 100%),
    linear-gradient(135deg,#e5c873 0%,#c99d45 56%,#9e7429 100%) !important;
}

html body .topbar .topnav .wear-menu-card-secondary:hover {
  border-color: #c2a35c !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 23%,rgba(0,0,0,.09)),
    linear-gradient(135deg,#9c7e43 0%,#7d5f28 58%,#584019 100%) !important;
}

/* True geometric centering plus larger, human-readable glyphs. */
html body .topbar .topnav .wear-menu-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body .topbar .topnav .wear-menu-icon svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  overflow: visible !important;
}

html body .topbar .topnav #collectionAIExport .wear-menu-ai-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* The inspection glyph uses a slightly larger canvas for immediate clarity. */
html body .topbar .topnav #qcToolButton .wear-menu-icon svg.qc-inspect-icon {
  width: 16px !important;
  height: 16px !important;
}


/* v0.29.0 — discreet application version label in the left menu. */
html body .topbar .topnav .app-version-label {
  width: 100%;
  margin: 12px 0 2px;
  color: rgba(190, 181, 163, .62);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  user-select: none;
}


/* v0.30.0 — Major Feature: Rotation Intelligence */
.rotation-intelligence-panel{margin:18px 0;padding:22px 24px 24px;background:linear-gradient(145deg,rgba(34,28,22,.96),rgba(18,16,14,.98));border:1px solid rgba(198,159,91,.28);box-shadow:0 16px 38px rgba(0,0,0,.2)}
.rotation-intelligence-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}
.rotation-intelligence-heading>div{display:flex;align-items:center;gap:10px}.rotation-intelligence-heading small{color:rgba(238,229,213,.56);font-size:11px;letter-spacing:.04em}
.major-feature-badge{border:1px solid rgba(198,159,91,.42);border-radius:999px;padding:3px 8px;color:#d7b575;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rotation-intelligence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rotation-intelligence-card{min-height:146px;padding:15px 16px 14px;border:1px solid rgba(198,159,91,.16);border-radius:12px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;justify-content:space-between;overflow:visible}
.rotation-intelligence-label{display:flex;align-items:center;gap:7px;color:rgba(239,229,211,.7);font-size:10px;font-weight:750;letter-spacing:.105em;text-transform:uppercase;white-space:nowrap}.signal-icon{font-size:14px;color:#d1ad68;line-height:1}.rotation-intelligence-cool .signal-icon{color:#a9c6d8}.rotation-intelligence-heat .signal-icon{filter:saturate(.72)}
.signal-info{width:17px!important;height:17px!important;min-width:17px!important;margin-left:1px;font-size:9px!important}
.rotation-intelligence-watchrow{width:100%;border:0;background:none;color:inherit;padding:10px 0 0;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;text-align:left;cursor:pointer}
.rotation-intelligence-thumb{width:48px;height:48px;border-radius:10px;overflow:hidden;border:1px solid rgba(198,159,91,.22);background:rgba(0,0,0,.22);display:grid;place-items:center}.rotation-intelligence-thumb img{width:100%;height:100%;object-fit:cover}.rotation-intelligence-thumb span{opacity:.55}
.rotation-intelligence-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.rotation-intelligence-copy strong{font-family:var(--serif,Georgia,serif);font-size:16px;font-weight:500;color:#f1e7d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rotation-intelligence-copy small{font-size:10px;color:rgba(238,229,213,.54);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rotation-intelligence-watchrow em{font-style:normal;font-size:19px;font-weight:700;color:#d8b46f;letter-spacing:-.02em}
.rotation-intelligence-empty{display:grid;place-items:center;flex:1;color:rgba(238,229,213,.38);font-size:11px}
.stability-visual{--p:calc(var(--stability)*1%);width:58px;height:58px;margin:10px auto 4px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#d2ad68 var(--p),rgba(255,255,255,.08) 0);position:relative}.stability-visual:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#1a1714}.stability-visual span{position:relative;z-index:1;font-size:13px;font-weight:700;color:#f1e7d6}.rotation-intelligence-stability>.rotation-intelligence-watch{display:block;text-align:center;font-family:var(--serif,Georgia,serif);font-size:15px;color:#f1e7d6}.rotation-intelligence-stability>small{text-align:center;color:rgba(238,229,213,.5);font-size:10px}
@media(max-width:900px){.rotation-intelligence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rotation-intelligence-heading{align-items:flex-start;flex-direction:column}.rotation-intelligence-heading small{margin-top:-9px}}
@media(max-width:560px){.rotation-intelligence-panel{padding:18px 14px}.rotation-intelligence-grid{grid-template-columns:1fr}.rotation-intelligence-card{min-height:128px}.rotation-intelligence-label{white-space:normal}}

/* v0.30.2 — Rotation Intelligence tooltip layering + text containment fix */
.rotation-intelligence-panel,
.rotation-intelligence-grid,
.rotation-intelligence-card,
.rotation-intelligence-label {
  overflow: visible;
}
.rotation-intelligence-card {
  position: relative;
  z-index: 1;
}
.rotation-intelligence-card:hover,
.rotation-intelligence-card:focus-within {
  z-index: 10000;
}
.rotation-intelligence-card .signal-info {
  position: relative;
  z-index: 10001;
}
.rotation-intelligence-card .signal-info::after {
  z-index: 10002;
  width: min(320px, calc(100vw - 32px));
  min-width: 220px;
  max-width: calc(100vw - 32px);
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  line-height: 1.55;
}


/* v0.30.6 — Body-level dashboard tooltip portal. */
.dashboard-info[data-dashboard-tip]::after {
  content: none !important;
  display: none !important;
}
.dashboard-info-portal-tooltip {
  position: fixed;
  z-index: 2147483647;
  width: max-content;
  min-width: 220px;
  max-width: min(360px, calc(100vw - 24px));
  height: auto;
  min-height: 0;
  padding: 13px 14px;
  box-sizing: border-box;
  border: 1px solid #5b4931;
  border-radius: 11px;
  background: #100e0c;
  color: #d8cec2;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  box-shadow: 0 18px 38px rgba(0,0,0,.52);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  pointer-events: none;
}
.dashboard-info-portal-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}


/* v0.31.0 — Awards System + editorial dashboard */
.history-shell{max-width:1500px;margin:0 auto}.history-tabs{display:flex;gap:8px;margin:0 0 16px;padding:5px;border:1px solid rgba(198,159,91,.18);border-radius:12px;background:rgba(255,255,255,.025);width:max-content}.history-tab{border:0;border-radius:8px;padding:9px 18px;background:transparent;color:rgba(239,229,211,.58);font:700 11px/1 var(--sans,Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.history-tab.active{background:rgba(198,159,91,.14);color:#ead7ae}.history-pane{display:none}.history-pane.active{display:block}
.awards-page{border:1px solid rgba(198,159,91,.2);border-radius:16px;background:linear-gradient(145deg,rgba(34,28,22,.96),rgba(18,16,14,.98));padding:26px}.awards-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid rgba(198,159,91,.16)}.awards-page-heading h2{margin:3px 0 0;font-family:var(--sans,Arial,sans-serif);font-size:30px;font-weight:700;color:#f1e7d6}.awards-page-heading p{margin:0;color:rgba(238,229,213,.52);font:400 12px/1.45 var(--sans,Arial,sans-serif)}.awards-kicker{font:700 9px/1 var(--sans,Arial,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#c9a86a}.awards-section{margin-top:24px}.awards-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.awards-section-heading h3{margin:0;font-family:var(--sans,Arial,sans-serif);font-size:20px;font-weight:700;color:#f1e7d6}.awards-section-heading span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,229,213,.46)}
.annual-awards-grid,.monthly-awards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.annual-award-card,.monthly-award-card{position:relative;border:1px solid rgba(198,159,91,.18);border-radius:14px;background:rgba(255,255,255,.025);padding:16px;overflow:hidden}.annual-award-card{min-height:260px;border-color:rgba(198,159,91,.3);background:linear-gradient(145deg,rgba(198,159,91,.08),rgba(255,255,255,.018))}.annual-award-crown{position:absolute;right:14px;top:7px;font-size:54px;color:rgba(198,159,91,.08)}.award-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}.award-card-head span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#c9a765}.award-card-head strong{font-family:var(--sans,Arial,sans-serif);font-size:16px;font-weight:700;color:#f1e7d6}.award-watch{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;border:0;border-top:1px solid rgba(198,159,91,.1);background:none;color:inherit;padding:12px 0;text-align:left;cursor:pointer}.award-watch:first-of-type{border-top:0}.award-watch-image{width:56px;height:56px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.24);border:1px solid rgba(198,159,91,.2);display:grid;place-items:center}.award-watch-image img{width:100%;height:100%;object-fit:cover}.award-watch-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.award-watch-copy small{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#c9a765}.award-watch-copy strong{font-family:var(--sans,Arial,sans-serif);font-size:17px;font-weight:700;color:#f1e7d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.award-watch-copy em{font-style:normal;font-size:10px;color:rgba(238,229,213,.48)}.award-watch-large{grid-template-columns:78px minmax(0,1fr)}.award-watch-large .award-watch-image{width:78px;height:78px}.award-watch-large .award-watch-copy strong{font-size:22px}.awards-empty{padding:26px 12px;color:rgba(238,229,213,.42);font-size:12px;text-align:center}
#dashboardView .wotm-winner-copy>span:last-child,#dashboardView .wotm-runner-copy>span{color:rgba(238,229,213,.46)}#dashboardView .rotation-intelligence-watchrow{grid-template-columns:48px minmax(0,1fr)}#dashboardView .rotation-intelligence-watchrow em,#dashboardView .rotation-intelligence-copy small{display:none}.stability-editorial{display:grid;place-items:center;flex:1;padding-top:12px}.stability-symbol{font-size:40px;color:#d2ad68;line-height:1}.rotation-intelligence-stability>small{text-align:center}
@media(max-width:800px){.annual-awards-grid,.monthly-awards-grid{grid-template-columns:1fr}.awards-page-heading{align-items:flex-start;flex-direction:column}.history-tabs{width:100%}.history-tab{flex:1}.awards-page{padding:18px 14px}}

/* v0.31.2 — History architecture */
.history-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 16px;padding:0 2px}.history-page-heading h2{margin:3px 0 0;color:#f1e6d3;font:600 24px/1.1 var(--serif,Georgia,serif);letter-spacing:.03em}.history-page-heading p{margin:0;max-width:520px;color:rgba(239,229,211,.52);font:400 13px/1.55 var(--sans,Arial,sans-serif);text-align:right}.history-kicker{color:#c9a86a;font:700 10px/1 var(--sans,Arial,sans-serif);letter-spacing:.16em;text-transform:uppercase}
html body #timelineView #wearTimeline .timeline-tile{position:relative;overflow:visible;border:1px solid rgba(198,159,91,.16);border-radius:14px;background:rgba(255,255,255,.025)}
html body #timelineView #wearTimeline .timeline-tile-head{display:flex;align-items:center;justify-content:space-between}
html body #timelineView #wearTimeline .timeline-tile-events{overflow-y:auto;overflow-x:hidden}
html body #timelineView #wearTimeline .timeline-event{display:grid;grid-template-columns:58px 42px minmax(0,1fr);align-items:center;gap:12px}
html body #timelineView #wearTimeline .timeline-event time{grid-column:1}
html body #timelineView #wearTimeline .timeline-event>div{grid-column:3;min-width:0}
.wear-timeline-thumb{grid-column:2;width:38px;height:38px;border-radius:9px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(198,159,91,.2);background:rgba(255,255,255,.035);color:rgba(239,229,211,.45);font-size:16px}.wear-timeline-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:800px){.history-page-heading{align-items:flex-start;flex-direction:column;gap:7px}.history-page-heading p{text-align:left}.history-tabs{display:grid;grid-template-columns:1fr;width:100%}.history-tab{width:100%}html body #timelineView #wearTimeline .timeline-event{grid-template-columns:48px 36px minmax(0,1fr);gap:9px}.wear-timeline-thumb{width:34px;height:34px}}


/* v0.31.3 — Wear History polish */
html body #timelineView #wearTimeline{width:100%}
html body #timelineView #wearTimeline .timeline-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
html body #timelineView #wearTimeline .timeline-tile{
  min-width:0;
  height:344px;
  display:grid;
  grid-template-rows:58px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(113,89,55,.52)!important;
  border-radius:16px;
  background:linear-gradient(180deg,#171411 0%,#13110f 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
html body #timelineView #wearTimeline .timeline-tile-head{
  position:relative;
  min-height:58px;
  padding:0 16px;
  border-bottom:1px solid rgba(126,98,57,.38)!important;
  background:linear-gradient(180deg,#1d1915,#181411)!important;
}
html body #timelineView #wearTimeline .timeline-tile-head::after{
  content:'';
  position:absolute;
  left:16px;right:16px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(205,164,82,.55),rgba(205,164,82,.08) 46%,transparent 82%);
  pointer-events:none;
}
html body #timelineView #wearTimeline .timeline-tile-head h2{
  margin:0;
  color:#ece4da!important;
  font:700 18px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:-.015em!important;
}
html body #timelineView #wearTimeline .timeline-tile-head span{
  color:#b6a892!important;
  font:600 10px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:.035em;
  white-space:nowrap;
}
html body #timelineView #wearTimeline .timeline-tile-events{
  min-height:0;
  display:grid;
  align-content:start;
  gap:8px;
  padding:12px;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#9b783f #17130f;
}
html body #timelineView #wearTimeline .timeline-tile-events::-webkit-scrollbar{width:6px}
html body #timelineView #wearTimeline .timeline-tile-events::-webkit-scrollbar-track{background:#17130f}
html body #timelineView #wearTimeline .timeline-tile-events::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c89b43,#795924);border-radius:999px}
html body #timelineView #wearTimeline .timeline-event{
  display:grid;
  grid-template-columns:42px 48px minmax(0,1fr)!important;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:8px 10px!important;
  border:1px solid rgba(83,68,49,.68)!important;
  border-radius:11px!important;
  background:#14120f!important;
  transition:border-color .14s ease,background-color .14s ease;
}
html body #timelineView #wearTimeline .timeline-event:hover,
html body #timelineView #wearTimeline .timeline-event:focus-within{
  background:#191510!important;
  border-color:rgba(142,110,61,.54)!important;
  transform:none!important;
  box-shadow:none!important;
}
html body #timelineView #wearTimeline .timeline-event time{
  grid-column:1!important;
  width:40px;
  height:46px;
  display:grid;
  place-content:center;
  gap:1px;
  text-align:center;
  border-right:1px solid rgba(198,159,91,.16);
  font-variant-numeric:tabular-nums;
}
html body #timelineView #wearTimeline .timeline-event time span{
  color:#c9a765!important;
  font:700 8px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:.11em;
}
html body #timelineView #wearTimeline .timeline-event time strong{
  color:#f0e7d8!important;
  font:700 18px/1 var(--sans,Arial,sans-serif)!important;
}
.wear-timeline-thumb{
  grid-column:2!important;
  width:46px;height:46px;
  border-radius:10px;
  border:1px solid rgba(198,159,91,.28);
  background:linear-gradient(145deg,rgba(198,159,91,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
html body #timelineView #wearTimeline .timeline-event>div.wear-timeline-copy{
  grid-column:3!important;
  min-width:0;
  display:grid;
  gap:3px;
}
html body #timelineView #wearTimeline .wear-timeline-copy strong{
  color:#eee4d3!important;
  font:700 12px/1.2 var(--sans,Arial,sans-serif)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body #timelineView #wearTimeline .wear-timeline-copy span{
  color:#a89c8e!important;
  font:500 9px/1.2 var(--sans,Arial,sans-serif)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body #timelineView #wearTimeline .wear-timeline-copy em{
  color:#c49b55;
  font:700 8px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-style:normal;
}
html body #timelineView #wearTimeline .timeline-month-list{display:block}
html body #timelineView #wearTimeline .timeline-month-group{
  overflow:hidden;
  margin-bottom:8px;
  border:1px solid rgba(83,68,49,.68)!important;
  border-radius:10px;
  background:#14120f!important;
}
html body #timelineView #wearTimeline .timeline-month-group:last-child{margin-bottom:0}
html body #timelineView #wearTimeline .timeline-month-group[open]{border-color:rgba(193,151,73,.54)!important;background:#17130f!important}
html body #timelineView #wearTimeline .timeline-month-group summary{
  min-height:42px!important;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px!important;
  list-style:none;cursor:pointer;
  color:#ddd5cb!important;
}
html body #timelineView #wearTimeline .timeline-month-group summary::-webkit-details-marker{display:none}
html body #timelineView #wearTimeline .timeline-month-group summary>span{display:inline-flex;align-items:center;font:700 11px/1 var(--sans,Arial,sans-serif)}
html body #timelineView #wearTimeline .timeline-month-group summary>span::before{content:'›';margin-right:8px;color:#c5a15b;transition:transform .15s ease}
html body #timelineView #wearTimeline .timeline-month-group[open] summary>span::before{transform:rotate(90deg)}
html body #timelineView #wearTimeline .timeline-month-group summary em{font-style:normal;color:#9f9384!important;font:500 10px/1 var(--sans,Arial,sans-serif);font-variant-numeric:tabular-nums}
html body #timelineView #wearTimeline .timeline-month-group[open] summary{color:#e4bd6d!important;background:rgba(194,148,66,.035)!important;border-bottom:1px solid rgba(160,123,63,.22)}
html body #timelineView #wearTimeline .timeline-month-events{display:grid;gap:6px;padding:7px!important;border-top:0!important}
html body #timelineView #wearTimeline .timeline-empty{
  min-height:230px!important;
  display:grid;place-items:center;align-content:center;gap:7px;
  color:#81786f!important;
  font:500 11px/1.4 var(--sans,Arial,sans-serif)!important;
  text-align:center;
}
html body #timelineView #wearTimeline .timeline-empty::before{content:'⌚';display:block;color:#8f7242;font-size:22px;opacity:.72}
@media(max-width:1100px){html body #timelineView #wearTimeline .timeline-grid{grid-template-columns:1fr}.history-shell{max-width:920px}.timeline-tile{height:332px!important}}
@media(max-width:800px){html body #timelineView #wearTimeline .timeline-event{grid-template-columns:38px 42px minmax(0,1fr)!important;gap:9px;padding:7px 8px!important}.wear-timeline-thumb{width:40px;height:40px}.history-tabs{grid-template-columns:repeat(3,1fr)!important}.history-tab{padding:10px 6px;font-size:9px}}

/* v0.31.4 — Unified History architecture and awards composition */
html body #timelineView .history-shell{
  width:min(1500px,calc(100% - 48px));
  max-width:1500px;
  margin:0 auto;
  padding:0 0 40px;
  box-sizing:border-box;
}
html body #timelineView .history-page-heading{
  min-height:54px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:0 0 16px;
  padding:0;
}
html body #timelineView .history-page-heading>div{display:grid;gap:5px;min-width:0}
html body #timelineView .history-kicker{
  display:block;
  margin:0;
  color:#c9a86a;
  font:700 10px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.16em;
  text-transform:uppercase;
}
html body #timelineView .history-page-heading h2{
  margin:0;
  color:#f1e6d3;
  font:600 28px/1.05 var(--serif,Georgia,serif);
  letter-spacing:.01em;
}
html body #timelineView .history-page-heading p{
  margin:0 0 3px;
  max-width:520px;
  color:rgba(239,229,211,.52);
  font:400 13px/1.45 var(--sans,Arial,sans-serif);
  text-align:right;
}
html body #timelineView .history-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(620px,100%);
  gap:6px;
  margin:0 0 22px;
  padding:5px;
  box-sizing:border-box;
}
html body #timelineView .history-tab{min-height:38px;padding:10px 16px}
html body #timelineView .history-pane,
html body #timelineView .history-pane>.timeline-panel,
html body #timelineView .history-pane>.awards-page{width:100%;box-sizing:border-box}
html body #timelineView .history-pane>.timeline-panel{margin:0;padding:0}

/* Keep all History views on the same vertical and horizontal grid. */
html body #timelineView #collectionTimeline,
html body #timelineView #wearTimeline,
html body #timelineView #awardsHistoryPane{margin:0!important}

/* Wear History: app-native density and hierarchy. */
html body #timelineView #wearTimeline .timeline-grid{gap:16px}
html body #timelineView #wearTimeline .timeline-tile{
  height:336px;
  border-radius:14px;
  background:linear-gradient(180deg,#171411 0%,#12100e 100%)!important;
}
html body #timelineView #wearTimeline .timeline-tile-head{
  min-height:54px;
  padding:0 16px;
  background:#181512!important;
}
html body #timelineView #wearTimeline .timeline-tile-head h2{
  font-size:17px!important;
  letter-spacing:0!important;
}
html body #timelineView #wearTimeline .timeline-tile-head span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:24px;
  padding:0 9px;
  border:1px solid rgba(198,159,91,.18);
  border-radius:999px;
  background:rgba(198,159,91,.055);
  color:#c9b58d!important;
  font-size:9px!important;
  letter-spacing:.04em;
}
html body #timelineView #wearTimeline .timeline-tile-events{padding:12px;gap:7px}

/* Awards: one coherent Hall of Fame page, not a nested page inside a page. */
html body #timelineView .awards-page{
  padding:24px 26px 28px;
  border-radius:14px;
  background:linear-gradient(180deg,#191612 0%,#13110f 100%);
}
html body #timelineView .awards-page-heading{
  align-items:flex-end;
  min-height:58px;
  padding-bottom:18px;
}
html body #timelineView .awards-page-heading>div{display:grid;gap:5px}
html body #timelineView .awards-page-heading h2{
  margin:0;
  font-size:26px;
  line-height:1.05;
}
html body #timelineView .awards-page-heading p{margin:0 0 2px;text-align:right}
html body #timelineView .awards-section{margin-top:22px}
html body #timelineView .awards-section-heading{margin-bottom:12px}
html body #timelineView .awards-section-heading h3{font-size:19px}
html body #timelineView .awards-section-heading>span{display:none!important}
html body #timelineView .annual-awards-grid{grid-template-columns:1fr;gap:14px}
html body #timelineView .monthly-awards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html body #timelineView .annual-award-card{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  column-gap:28px;
  align-items:center;
  padding:20px 24px;
  overflow:hidden;
}
html body #timelineView .annual-award-card .award-card-head{
  grid-column:1/-1;
  margin:0 0 8px;
  padding:0 74px 12px 0;
  border-bottom:1px solid rgba(198,159,91,.13);
}
html body #timelineView .annual-award-card .award-card-head span{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:23px;
  padding:0 9px;
  border:1px solid rgba(198,159,91,.24);
  border-radius:999px;
  background:rgba(198,159,91,.07);
}
html body #timelineView .annual-award-card .award-card-head strong{font-size:19px}
html body #timelineView .annual-award-card .award-watch-large{
  grid-column:1;
  grid-template-columns:86px minmax(0,1fr);
  min-height:112px;
  padding:14px 0 10px;
}
html body #timelineView .annual-award-card .award-watch-large .award-watch-image{width:86px;height:86px}
html body #timelineView .annual-award-card .award-watch-large .award-watch-copy strong{font-size:24px}
html body #timelineView .annual-award-card .award-watch:not(.award-watch-large){
  grid-column:2;
  align-self:center;
  border:1px solid rgba(198,159,91,.13);
  border-radius:12px;
  padding:13px;
  background:rgba(255,255,255,.018);
}
html body #timelineView .annual-award-crown{
  right:22px;
  top:10px;
  font-size:58px;
  color:rgba(198,159,91,.11);
}
html body #timelineView .monthly-award-card{padding:17px 18px}
html body #timelineView .monthly-award-card .award-card-head{padding-bottom:10px;border-bottom:1px solid rgba(198,159,91,.11)}

@media(max-width:1100px){
  html body #timelineView .history-shell{width:min(920px,calc(100% - 36px))}
  html body #timelineView .annual-award-card{grid-template-columns:1fr}
  html body #timelineView .annual-award-card .award-watch-large,
  html body #timelineView .annual-award-card .award-watch:not(.award-watch-large){grid-column:1}
  html body #timelineView .annual-award-card .award-watch:not(.award-watch-large){margin-top:8px}
}
@media(max-width:800px){
  html body #timelineView .history-shell{width:calc(100% - 24px)}
  html body #timelineView .history-page-heading{align-items:flex-start;flex-direction:column;gap:8px}
  html body #timelineView .history-page-heading p{text-align:left;margin:0}
  html body #timelineView .history-tabs{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body #timelineView .history-tab{padding:9px 6px;font-size:9px}
  html body #timelineView .awards-page{padding:18px 14px 22px}
  html body #timelineView .awards-page-heading{align-items:flex-start;flex-direction:column;gap:8px}
  html body #timelineView .awards-page-heading p{text-align:left}
  html body #timelineView .monthly-awards-grid{grid-template-columns:1fr}
  html body #timelineView .annual-award-card{padding:16px}
}

/* v0.31.5 — Collection Activity title typography parity */
html body #timelineView #collectionTimeline .timeline-tile-head h2{
  margin:0;
  color:#ece4da!important;
  font:700 17px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:0!important;
}


/* v0.31.8 — Scalable year-based Awards Archive */
html body #timelineView .awards-archive{display:grid;gap:12px;margin-top:22px}
html body #timelineView .awards-year{border:1px solid rgba(198,159,91,.18);border-radius:14px;background:rgba(255,255,255,.018);overflow:hidden}
html body #timelineView .awards-year[open]{border-color:rgba(198,159,91,.30);background:linear-gradient(180deg,rgba(198,159,91,.045),rgba(255,255,255,.012))}
html body #timelineView .awards-year-summary{list-style:none;min-height:62px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:0 20px;cursor:pointer;user-select:none}
html body #timelineView .awards-year-summary::-webkit-details-marker{display:none}
html body #timelineView .awards-year-summary::marker{content:""}
html body #timelineView .awards-year-summary:hover{background:rgba(198,159,91,.035)}
html body #timelineView .awards-year-title{font:700 24px/1 var(--sans,Arial,sans-serif);color:#f1e7d6}
html body #timelineView .awards-year-meta{font:600 9px/1 var(--sans,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,229,213,.46)}
html body #timelineView .awards-year-chevron{font-size:20px;line-height:1;color:#c9a765;transition:transform .18s ease}
html body #timelineView .awards-year[open] .awards-year-chevron{transform:rotate(180deg)}
html body #timelineView .awards-year-body{display:grid;gap:24px;padding:4px 20px 22px;border-top:1px solid rgba(198,159,91,.11)}
html body #timelineView .awards-year-section{margin-top:18px}
html body #timelineView .awards-year-section .awards-section-heading{margin-bottom:12px}
html body #timelineView .awards-year-empty{grid-column:1/-1;border:1px dashed rgba(198,159,91,.14);border-radius:12px}
@media(max-width:800px){
  html body #timelineView .awards-year-summary{min-height:56px;padding:0 14px;gap:10px}
  html body #timelineView .awards-year-title{font-size:21px}
  html body #timelineView .awards-year-meta{font-size:8px;letter-spacing:.09em}
  html body #timelineView .awards-year-body{padding:2px 12px 16px;gap:18px}
}


/* v0.32.0 — Lifetime year → month hierarchy; both levels closed by default */
html body #timelineView #collectionTimeline .timeline-year-month-list,
html body #timelineView #wearTimeline .timeline-year-month-list{
  display:grid;
  gap:7px;
  padding:8px;
  border-top:1px solid rgba(160,123,63,.18)
}
html body #timelineView #collectionTimeline .timeline-year-group>.timeline-year-month-list>.timeline-nested-month-group,
html body #timelineView #wearTimeline .timeline-year-group>.timeline-year-month-list>.timeline-nested-month-group{
  margin:0;
  background:rgba(255,255,255,.012)
}
html body #timelineView #collectionTimeline .timeline-year-group>.timeline-year-month-list>.timeline-nested-month-group summary,
html body #timelineView #wearTimeline .timeline-year-group>.timeline-year-month-list>.timeline-nested-month-group summary{
  padding-left:14px
}


/* v0.32.1 — Collection Guidance */
html body #dashboardView .collection-guidance-panel{margin-top:16px;padding:22px;border-color:rgba(198,159,91,.25);background:linear-gradient(180deg,rgba(198,159,91,.025),rgba(255,255,255,.012))}
html body #dashboardView .collection-guidance-heading{margin-bottom:16px}
html body #dashboardView .collection-guidance-heading small{color:rgba(238,229,213,.55)}
html body #dashboardView .collection-guidance-body{display:grid;gap:12px}
html body #dashboardView .guidance-learning{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(420px,1.35fr);gap:24px;align-items:center;padding:18px 20px;border:1px solid rgba(198,159,91,.17);border-radius:13px;background:rgba(0,0,0,.18)}
html body #dashboardView .guidance-learning-copy,html body #dashboardView .guidance-clear{display:flex;align-items:flex-start;gap:13px}
html body #dashboardView .guidance-status-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;background:#caa95e;box-shadow:0 0 0 5px rgba(202,169,94,.08)}
html body #dashboardView .guidance-status-ready{background:#63bd88;box-shadow:0 0 0 5px rgba(99,189,136,.08)}
html body #dashboardView .guidance-learning h3,html body #dashboardView .guidance-clear h3{margin:0 0 5px;font:600 18px/1.2 var(--serif,Georgia,serif);color:#f1e7d6}
html body #dashboardView .guidance-learning p,html body #dashboardView .guidance-clear p{margin:0;color:rgba(238,229,213,.58);font-size:12px;line-height:1.55}
html body #dashboardView .guidance-progress-grid{display:grid;gap:10px}
html body #dashboardView .guidance-progress>div{display:flex;justify-content:space-between;gap:14px;margin-bottom:6px;font-size:10px;color:rgba(238,229,213,.62)}
html body #dashboardView .guidance-progress b{color:#d9bd7a;font-weight:600}
html body #dashboardView .guidance-progress i{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
html body #dashboardView .guidance-progress i span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9c762e,#e0bc62)}
html body #dashboardView .guidance-feature{display:grid}
html body #dashboardView .guidance-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body #dashboardView .guidance-card{position:relative;padding:18px 20px;border:1px solid rgba(198,159,91,.18);border-radius:13px;background:rgba(0,0,0,.20);cursor:default}
html body #dashboardView .guidance-card[data-guidance-watch-id]{cursor:pointer}
html body #dashboardView .guidance-card[data-guidance-watch-id]:hover{border-color:rgba(220,185,107,.4);background:rgba(198,159,91,.035)}
html body #dashboardView .guidance-card-meta{display:flex;align-items:center;gap:9px;margin-bottom:10px;font:600 8px/1 var(--sans,Arial,sans-serif);letter-spacing:.11em;text-transform:uppercase}
html body #dashboardView .guidance-card-meta span{color:#d6b45f}
html body #dashboardView .guidance-card-meta b{padding:5px 7px;border:1px solid rgba(198,159,91,.2);border-radius:99px;color:rgba(238,229,213,.68)}
html body #dashboardView .guidance-card-meta em{margin-left:auto;color:rgba(238,229,213,.42);font-style:normal}
html body #dashboardView .guidance-card h3{margin:0 0 7px;font:600 21px/1.18 var(--serif,Georgia,serif);color:#f3e9d8}
html body #dashboardView .guidance-secondary .guidance-card h3{font-size:17px}
html body #dashboardView .guidance-card p{margin:0;color:rgba(238,229,213,.60);font-size:12px;line-height:1.55}
html body #dashboardView .guidance-reasoning{margin-top:14px;padding-top:12px;border-top:1px solid rgba(198,159,91,.12)}
html body #dashboardView .guidance-reasoning summary{cursor:pointer;color:#d7b661;font:600 10px/1.2 var(--sans,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase}
html body #dashboardView .guidance-reasoning ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
html body #dashboardView .guidance-reasoning li{color:rgba(238,229,213,.58);font-size:11px}
html body #dashboardView .guidance-reasoning li:before{content:'✓';margin-right:8px;color:#c8a95d}
html body #dashboardView .guidance-workspace{margin-top:2px;border-top:1px solid rgba(198,159,91,.13);padding-top:12px}
html body #dashboardView .guidance-workspace>summary{cursor:pointer;display:flex;align-items:center;gap:8px;color:#d8b75f;font:600 10px/1 var(--sans,Arial,sans-serif);letter-spacing:.09em;text-transform:uppercase;list-style:none}
html body #dashboardView .guidance-workspace>summary::-webkit-details-marker{display:none}
html body #dashboardView .guidance-workspace>summary::marker{content:''}
html body #dashboardView .guidance-workspace>summary span{display:grid;place-items:center;min-width:21px;height:21px;border:1px solid rgba(198,159,91,.25);border-radius:50%;font-size:9px}
html body #dashboardView .guidance-workspace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
html body #dashboardView .guidance-clear{padding:20px;border:1px solid rgba(99,189,136,.18);border-radius:13px;background:rgba(99,189,136,.025)}
@media(max-width:800px){html body #dashboardView .collection-guidance-panel{padding:16px}html body #dashboardView .guidance-learning{grid-template-columns:1fr;padding:16px;gap:18px}html body #dashboardView .guidance-secondary,html body #dashboardView .guidance-workspace-grid{grid-template-columns:1fr}html body #dashboardView .guidance-card{padding:16px}html body #dashboardView .guidance-card h3{font-size:18px}}


/* v0.32.2 — Seven-entry History parity + Recommendation History archive */
@media (min-width:801px){
  html body #timelineView #collectionTimeline .timeline-tile,
  html body #timelineView #wearTimeline .timeline-tile{
    height:650px!important;
  }
}
html body #timelineView .history-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:min(820px,100%);
}
html body #timelineView .recommendations-history-page{
  width:100%;
  box-sizing:border-box;
  padding:24px 26px 28px;
  border:1px solid rgba(198,159,91,.20);
  border-radius:14px;
  background:linear-gradient(180deg,#191612 0%,#13110f 100%);
}
html body #timelineView .recommendations-history-heading{
  min-height:58px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(198,159,91,.16);
}
html body #timelineView .recommendations-history-heading>div{display:grid;gap:5px}
html body #timelineView .recommendations-history-kicker{
  color:#c9a86a;
  font:700 9px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.18em;
  text-transform:uppercase;
}
html body #timelineView .recommendations-history-heading h2{
  margin:0;
  color:#f1e7d6;
  font:700 26px/1.05 var(--sans,Arial,sans-serif);
}
html body #timelineView .recommendations-history-heading p{
  margin:0 0 2px;
  color:rgba(238,229,213,.52);
  font:400 12px/1.45 var(--sans,Arial,sans-serif);
  text-align:right;
}
html body #timelineView .recommendations-history-list{display:grid;gap:18px;margin-top:20px}
html body #timelineView .recommendations-history-empty{
  min-height:300px;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  padding:28px;
  border:1px dashed rgba(198,159,91,.18);
  border-radius:13px;
  background:rgba(255,255,255,.015);
  text-align:center;
}
html body #timelineView .recommendations-history-emblem{font-size:34px;line-height:1;color:#c9a765}
html body #timelineView .recommendations-history-empty h3{margin:4px 0 0;color:#f1e7d6;font:700 20px/1.1 var(--sans,Arial,sans-serif)}
html body #timelineView .recommendations-history-empty p{max-width:580px;margin:0;color:rgba(238,229,213,.48);font:400 12px/1.6 var(--sans,Arial,sans-serif)}
html body #timelineView .recommendations-history-year{display:grid;gap:10px}
html body #timelineView .recommendations-history-year-head{display:flex;align-items:center;justify-content:space-between}
html body #timelineView .recommendations-history-year-head h3{margin:0;color:#f1e7d6;font:700 19px/1 var(--sans,Arial,sans-serif)}
html body #timelineView .recommendations-history-year-head span{color:rgba(238,229,213,.45);font:700 9px/1 var(--sans,Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase}
html body #timelineView .recommendations-history-year-list{display:grid;gap:9px}
html body #timelineView .recommendations-history-card{display:grid;grid-template-columns:68px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 15px;border:1px solid rgba(198,159,91,.16);border-radius:12px;background:rgba(255,255,255,.018)}
html body #timelineView .recommendations-history-card time{color:#c9a765;font:700 10px/1 var(--sans,Arial,sans-serif);letter-spacing:.05em;text-transform:uppercase}
html body #timelineView .recommendations-history-card small{color:#c9a765;font:700 8px/1 var(--sans,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase}
html body #timelineView .recommendations-history-card h4{margin:4px 0 3px;color:#f1e7d6;font:700 16px/1.15 var(--sans,Arial,sans-serif)}
html body #timelineView .recommendations-history-card p{margin:0;color:rgba(238,229,213,.48);font:400 11px/1.45 var(--sans,Arial,sans-serif)}
html body #timelineView .recommendations-history-status{min-width:72px;padding:7px 9px;border:1px solid rgba(198,159,91,.18);border-radius:999px;color:#d9bf8a;font:700 8px/1 var(--sans,Arial,sans-serif);letter-spacing:.08em;text-align:center;text-transform:uppercase}
@media(max-width:800px){
  html body #timelineView .history-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body #timelineView .recommendations-history-page{padding:18px 14px 22px}
  html body #timelineView .recommendations-history-heading{align-items:flex-start;flex-direction:column;gap:8px}
  html body #timelineView .recommendations-history-heading p{text-align:left}
  html body #timelineView .recommendations-history-card{grid-template-columns:52px minmax(0,1fr)}
  html body #timelineView .recommendations-history-status{grid-column:2;width:max-content}
}


/* v0.32.3 — Temporary intelligence data-readiness blurbs */
html body #dashboardView .intelligence-readiness-blurb[hidden]{display:none!important}
html body #dashboardView .intelligence-readiness-blurb{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:-4px 0 15px;
  padding:12px 14px;
  border:1px solid rgba(198,159,91,.14);
  border-radius:11px;
  background:rgba(198,159,91,.025)
}
html body #dashboardView .intelligence-readiness-blurb>div{display:flex;align-items:baseline;gap:8px;min-width:0}
html body #dashboardView .intelligence-readiness-blurb strong{flex:none;color:#d7b763;font:700 9px/1.3 var(--sans,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase}
html body #dashboardView .intelligence-readiness-blurb span{color:rgba(238,229,213,.54);font:400 11px/1.45 var(--sans,Arial,sans-serif)}
html body #dashboardView .intelligence-readiness-blurb small{flex:none;color:rgba(238,229,213,.40);font:600 9px/1.3 var(--sans,Arial,sans-serif);letter-spacing:.03em;white-space:nowrap}
html body #timelineView .recommendations-history-learning small{
  margin-top:7px;
  color:#c9a765;
  font:600 9px/1.4 var(--sans,Arial,sans-serif);
  letter-spacing:.04em
}
@media(max-width:800px){
  html body #dashboardView .intelligence-readiness-blurb{display:grid;gap:8px;margin-bottom:12px}
  html body #dashboardView .intelligence-readiness-blurb>div{display:grid;gap:5px}
  html body #dashboardView .intelligence-readiness-blurb small{white-space:normal}
}


/* v0.32.3.2 — Collection Activity / Wear History visual parity
   Keeps the intentional content differences while unifying typography,
   header counters, row rhythm, scroll treatment, and seven-row capacity. */
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-head{
  min-height:54px!important;
  padding:0 16px!important;
  background:linear-gradient(180deg,#1d1915,#181411)!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-head h2{
  margin:0!important;
  color:#ece4da!important;
  font:700 17px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:0!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-head>span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:58px!important;
  min-height:24px!important;
  box-sizing:border-box!important;
  padding:0 9px!important;
  border:1px solid rgba(198,159,91,.18)!important;
  border-radius:999px!important;
  background:rgba(198,159,91,.055)!important;
  color:#c9b58d!important;
  font:600 9px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events{
  box-sizing:border-box!important;
  padding:12px!important;
  gap:7px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#9b783f #17130f;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events::-webkit-scrollbar{width:6px}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events::-webkit-scrollbar-track{background:#17130f}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c89b43,#795924);border-radius:999px}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Both Last 30 Days columns now fit seven complete rows, never eight. */
@media(min-width:801px){
  html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile{
    height:650px!important;
    grid-template-rows:54px minmax(0,1fr)!important;
  }
  html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events>.timeline-event{
    box-sizing:border-box!important;
    min-height:75px!important;
    height:75px!important;
    margin:0!important;
  }
}

/* Entry hierarchy: same title and supporting-copy typography in both tabs. */
html body #timelineView #collectionTimeline .timeline-event strong,
html body #timelineView #wearTimeline .wear-timeline-copy strong{
  color:#eee4d3!important;
  font:700 12px/1.2 var(--sans,Arial,sans-serif)!important;
  letter-spacing:0!important;
}
html body #timelineView #collectionTimeline .timeline-event span,
html body #timelineView #wearTimeline .wear-timeline-copy span{
  color:#9f9487!important;
  font:500 9px/1.2 var(--sans,Arial,sans-serif)!important;
  letter-spacing:0!important;
}
html body #timelineView #collectionTimeline .timeline-event time{
  color:#b0a18c!important;
  font:600 10px/1.15 var(--sans,Arial,sans-serif)!important;
  letter-spacing:.02em!important;
}
html body #timelineView #wearTimeline .timeline-event time span{
  font:700 8px/1 var(--sans,Arial,sans-serif)!important;
}
html body #timelineView #wearTimeline .timeline-event time strong{
  font:700 17px/1 var(--sans,Arial,sans-serif)!important;
}

/* Accordion rows share the same label, count and vertical rhythm. */
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-month-group{
  margin-bottom:7px!important;
  border-radius:10px!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-month-group summary{
  min-height:42px!important;
  box-sizing:border-box!important;
  padding:9px 11px!important;
  font:700 11px/1 var(--sans,Arial,sans-serif)!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-month-group summary>span{
  font:700 11px/1 var(--sans,Arial,sans-serif)!important;
  letter-spacing:.015em!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-month-group summary em{
  min-width:24px!important;
  color:#9f9384!important;
  font:500 10px/1 var(--sans,Arial,sans-serif)!important;
  font-variant-numeric:tabular-nums;
  text-align:right!important;
}


/* v0.32.3.3 — History integrated scrollbar gutter
   Reserve a permanent right-side lane so cards never collide with the
   integrated scrollbar when either Collection Activity or Wear History
   becomes scrollable. Applied to both panes for parity — a fix for one
   scrollable timeline pane is a fix for the shared component. */
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events{
  padding-right:20px!important;
  scrollbar-gutter:stable!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events>.timeline-event{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events::-webkit-scrollbar{
  width:6px!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events::-webkit-scrollbar-track{
  margin-block:2px;
  border-radius:999px;
}
@media(max-width:800px){
  html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-tile-events{
    padding-right:16px!important;
  }
}


/* v0.32.3.4 — History three-column spacing parity
   Collection Activity is the spacing reference. Keep scrollbar space inside
   the first tile rather than widening the grid gap between History columns. */
html body #timelineView :is(#collectionTimeline,#wearTimeline){
  width:100%!important;
  box-sizing:border-box!important;
  padding-inline:0!important;
}
html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-grid{
  width:100%!important;
  box-sizing:border-box!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:14px!important;
  row-gap:14px!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
@media(max-width:1100px){
  html body #timelineView :is(#collectionTimeline,#wearTimeline) .timeline-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
}