body {
   background-color: #f6f7fb;
}

#tt-map {
   height: 420px;
   width: 100%;
   border: 1px solid #d9dde6;
   border-radius: 8px;
   overflow: hidden;
}

#tt-chart-container {
   position: relative;
   height: 420px;
}

.tt-panel {
   background-color: #ffffff;
   border: 1px solid #e2e6ef;
   border-radius: 12px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.tt-panel h2 {
   font-size: 1.15rem;
   margin-bottom: 1rem;
   font-weight: 600;
}

.tt-meta {
   font-size: 0.9rem;
   color: #555b6c;
}

.tt-summary-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 1rem;
}

.tt-summary-card {
   background-color: #f9fafc;
   border-radius: 10px;
   padding: 0.9rem;
   border: 1px solid #e6ebf4;
}

.tt-summary-card.warning {
   background-color: #fff5f5;
   border-color: #f03e3e;
}

.tt-summary-card span {
   display: block;
}

.tt-summary-card .label {
   font-size: 0.78rem;
   color: #626b7f;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.tt-summary-card .value {
   font-size: 1.2rem;
   font-weight: 600;
   color: #1b2736;
}

.tt-summary-card.warning .label,
.tt-summary-card.warning .value {
   color: #c92a2a;
}

.tt-slider-label {
   display: flex;
   justify-content: space-between;
   font-size: 0.85rem;
   margin-bottom: 0.25rem;
}

.tt-eq-row {
   margin-bottom: 1rem;
}

.tt-equation-input {
   width: 100%;
}

.tt-interval-table td,
.tt-interval-table th {
   font-size: 0.85rem;
   vertical-align: middle;
}

.tt-interval-table tbody tr:nth-child(odd) {
   background-color: #fbfcff;
}

.tt-chip {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   background-color: #eef3ff;
   color: #1f3d87;
   padding: 0.25rem 0.6rem;
   border-radius: 999px;
   font-size: 0.75rem;
}

.tt-action-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   align-items: center;
}

.tt-badge-neutral {
   background-color: #f0f4fb;
   color: #3f4a5a;
   border-radius: 999px;
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
}

/* Sticky parameters panel */
.tt-sticky-params {
   transition: all 0.3s ease;
}

.tt-sticky-params.stuck {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1005;
   margin: 0;
   border-radius: 0;
   border-left: none;
   border-right: none;
   border-top: none;
   box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
   animation: slideDown 0.3s ease;
}

/* Compact Menu Bar */
.tt-menu-bar {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.5rem 0;
   flex-wrap: wrap;
}

.tt-menu-icons {
   display: flex;
   gap: 0.5rem;
}

.tt-menu-divider {
   width: 1px;
   height: 30px;
   background: linear-gradient(to bottom, transparent, #dee2e6, transparent);
   flex-shrink: 0;
}

.tt-menu-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
   padding: 0.5rem 0.75rem;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border: 1px solid #dee2e6;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   min-width: 60px;
}

.tt-menu-btn:hover {
   background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
   border-color: #3b82f6;
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.tt-menu-btn.active {
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
   border-color: #2563eb;
   color: white;
}

.tt-menu-btn.active .menu-icon {
   filter: grayscale(0) brightness(1.2);
}

.menu-icon {
   font-size: 1.25rem;
   line-height: 1;
}

.menu-label {
   font-size: 0.7rem;
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
}

.tt-menu-btn.active .menu-label {
   color: white;
}

.tt-menu-summary {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 0.8rem;
   flex-wrap: wrap;
}

.tt-route-info {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 0.85rem;
   flex-wrap: wrap;
   padding: 0.25rem 0;
}

.route-item {
   white-space: nowrap;
   color: #1e293b;
}

.route-item strong {
   color: #0f172a;
   font-weight: 600;
   font-size: 0.9rem;
}

.tt-plan-summary {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-size: 0.8rem;
   flex-wrap: wrap;
   margin-left: auto;
}

.summary-item,
.plan-item {
   white-space: nowrap;
}

.summary-item strong {
   color: #64748b;
   font-weight: 500;
}

.summary-item span {
   color: #3b82f6;
   font-weight: 600;
}

.plan-item {
   color: #1e293b;
   font-weight: 600;
   padding: 0.25rem 0.5rem;
   background: rgba(59, 130, 246, 0.08);
   border-radius: 4px;
   font-variant-numeric: tabular-nums;
}

.plan-item.warning {
   background: rgba(239, 68, 68, 0.1);
   color: #dc2626;
}

/* Toast Notifications */
.tt-toast-container {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 2000;
   display: flex;
   flex-direction: column-reverse; /* new to stack upward */
   gap: 0.5rem;
   max-width: 400px;
   pointer-events: none;
}

.tt-toast {
   background: white;
   border-radius: 8px;
   padding: 0.75rem 1rem;
   box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.05);
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.775rem;
   animation: toastSlideIn 0.3s ease;
   pointer-events: auto;
   position: relative;
   overflow: hidden;
}

.tt-toast::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: currentColor;
   animation: toastProgress 5s linear;
}

.tt-toast.toast-info {
   color: #3b82f6;
   border-left: 3px solid #3b82f6;
}

.tt-toast.toast-success {
   color: #10b981;
   border-left: 3px solid #10b981;
}

.tt-toast.toast-warning {
   color: #f59e0b;
   border-left: 3px solid #f59e0b;
}

.tt-toast.toast-danger {
   color: #ef4444;
   border-left: 3px solid #ef4444;
}

.toast-icon {
   font-size: 1.25rem;
   line-height: 1;
   flex-shrink: 0;
}

.toast-content {
   flex: 1;
   color: #1e293b;
   line-height: 1.4;
}

.toast-close {
   background: none;
   border: none;
   color: #64748b;
   cursor: pointer;
   padding: 0;
   font-size: 1.25rem;
   line-height: 1;
   opacity: 0.5;
   transition: opacity 0.2s;
   flex-shrink: 0;
}

.toast-close:hover {
   opacity: 1;
}

@keyframes toastSlideIn {
   from {
      transform: translateX(100%);
      opacity: 0;
   }
   to {
      transform: translateX(0);
      opacity: 1;
   }
}

@keyframes toastProgress {
   from {
      transform: scaleX(1);
   }
   to {
      transform: scaleX(0);
      transform-origin: left;
   }
}

.tt-toast.removing {
   animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideOut {
   from {
      transform: translateX(0);
      opacity: 1;
   }
   to {
      transform: translateX(100%);
      opacity: 0;
   }
}

/* Dropdown Container */
.tt-dropdown-container {
   position: relative;
}

.tt-dropdown-panel {
   display: none;
   margin-top: 0.75rem;
   animation: dropdownSlide 0.2s ease;
}

.tt-dropdown-panel.active {
   display: block;
}

@keyframes dropdownSlide {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.dropdown-content {
   background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
   border: 1px solid #e2e6ef;
   border-radius: 8px;
   padding: 1rem;
}

.dropdown-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
}

.dropdown-grid .grid-cell {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

@keyframes slideDown {
   from {
      transform: translateY(-100%);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* Placeholder to prevent content jump when panel becomes fixed */
.tt-params-placeholder {
   display: none;
}

.tt-params-placeholder.active {
   display: block;
}

@media (max-width: 991px) {
   #tt-chart-container {
      height: 340px;
   }

   #tt-map {
      height: 340px;
   }
}

/* Gradient Equalizer Styles */
.gradient-equalizer {
   display: flex;
   gap: 0.5rem;
   padding: 0.75rem 0.5rem;
   background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
   border-radius: 8px;
   border: 1px solid #e2e6ef;
   width: 100%;
   max-width: none;
   margin: 0;
   align-items: flex-end;
   justify-content: space-between;
}

/* Two-column sticky layout */
.tt-params-columns {
   display: grid;
   /* Left column will take two parts, right column one part (≈1/3) */
   grid-template-columns: 2fr 1fr;
   gap: 1.25rem;
}

.tt-params-left {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto auto;
   gap: 0.5rem;
   align-items: end;
}

.tt-params-left .grid-cell {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.tt-params-left .grid-cell input.form-range {
   width: 100%;
}

.tt-params-left .grid-cell label {
   margin-bottom: 0;
}

.tt-params-right {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.tt-params-right .gradient-equalizer {
   width: 100%;
   display: flex;
   gap: 0.35rem;
   justify-content: space-between;
   flex: 1;
}

.grid-cell.cell-power { grid-column: 1 / 2; }
.grid-cell.cell-wprime { grid-column: 2 / 3; }
.grid-cell.cell-smoothing { grid-column: 1 / 2; }
.grid-cell.cell-resolution { grid-column: 2 / 3; }

@media (max-width: 991px) {
   .tt-menu-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
   }

   .tt-menu-icons {
      justify-content: space-between;
      width: 100%;
   }

   .tt-menu-btn {
      flex: 1;
      min-width: 0;
      padding: 0.5rem 0.25rem;
   }

   .menu-label {
      font-size: 0.65rem;
   }

   .tt-menu-divider {
      display: none;
   }

   .tt-menu-summary,
   .tt-plan-summary {
      justify-content: space-between;
      width: 100%;
      gap: 0.5rem;
      font-size: 0.75rem;
      margin-left: 0;
   }

   .plan-item {
      font-size: 0.7rem;
      padding: 0.2rem 0.4rem;
   }

   .dropdown-grid {
      grid-template-columns: 1fr;
   }

   .tt-toast-container {
      bottom: 16px;
      right: 10px;
      left: auto; /* ensure not stretched full width */
      max-width: 360px;
      flex-direction: column-reverse;
   }

   .tt-toast {
      font-size: 0.8rem;
      padding: 0.6rem 0.8rem;
   }
}

/* Scrollable interval table for race overlay */
.interval-table-wrapper {
   max-height: 400px;
   overflow-y: auto;
   border-radius: 8px;
}

.interval-table-wrapper::-webkit-scrollbar {
   width: 8px;
}

.interval-table-wrapper::-webkit-scrollbar-track {
   background: rgba(30, 41, 59, 0.5);
   border-radius: 4px;
}

.interval-table-wrapper::-webkit-scrollbar-thumb {
   background: rgba(148, 163, 184, 0.5);
   border-radius: 4px;
}

.interval-table-wrapper::-webkit-scrollbar-thumb:hover {
   background: rgba(148, 163, 184, 0.7);
}

.eq-band {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.35rem;
   flex: 1;
   max-width: 100px;
}

.eq-label-top {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.15rem;
   min-height: 1.75rem;
}

.eq-percent {
   font-size: 0.95rem;
   font-weight: 600;
   color: #1b2736;
}

.eq-watts {
   font-size: 0.75rem;
   color: #626b7f !important;
}

.eq-slider-container {
   height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.eq-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 200px;
   height: 12px;
   background: transparent;
   outline: none;
   transform: rotate(-90deg);
   margin: 0;
}


/* WebKit: use runnable-track and set background-clip so gradient is visible on rotated sliders */
.eq-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg,
     #0d6efd 0%,
     #0dcaf0 20%,
     #20c997 40%,
     #ffc107 60%,
     #fd7e14 80%,
     #dc3545 100%);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  background-clip: padding-box;
}

/* Firefox track */
.eq-slider::-moz-range-track {
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg,
     #0d6efd 0%,
     #0dcaf0 20%,
     #20c997 40%,
     #ffc107 60%,
     #fd7e14 80%,
     #dc3545 100%);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  background-clip: padding-box;
}

/* Slider thumb: place above track */
.eq-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 3px solid #0d6efd;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: all 0.12s ease;
  margin-top: -6px; /* vertically center over track */
  position: relative;
  z-index: 2;
}

.eq-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 3px solid #0d6efd;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: all 0.12s ease;
}

.eq-slider:hover::-webkit-slider-thumb {
   transform: scale(1.1);
   border-color: #0b5ed7;
}

.eq-slider:hover::-moz-range-thumb {
   transform: scale(1.1);
   border-color: #0b5ed7;
}

.eq-slider:active::-webkit-slider-thumb {
   transform: scale(0.95);
   box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.eq-slider:active::-moz-range-thumb {
   transform: scale(0.95);
   box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.eq-label-bottom {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.15rem;
   text-align: center;
}

.eq-name {
   font-size: 0.8rem;
   font-weight: 600;
   color: #1b2736;
   line-height: 1.2;
}

.eq-range {
   font-size: 0.65rem;
   color: #626b7f;
   line-height: 1.2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .gradient-equalizer {
      gap: 0.5rem;
      padding: 1rem 0.5rem;
   }
   
   .eq-band {
      max-width: 70px;
   }
   
   .eq-slider-container {
      height: 150px;
   }
   
   .eq-slider {
      width: 150px;
   }
   
   .eq-name {
      font-size: 0.7rem;
   }
   
   .eq-range {
      font-size: 0.6rem;
   }
}

/* Interval table row highlighting */
#intervals-body tr.table-warning {
   background-color: rgba(255, 193, 7, 0.15) !important;
   border-left: 3px solid #ffc107;
}

#intervals-body tr.table-warning:hover {
   background-color: rgba(255, 193, 7, 0.25) !important;
}

#intervals-body tr.table-success {
   background-color: rgba(25, 135, 84, 0.1) !important;
   border-left: 3px solid #198754;
}

#intervals-body tr.table-success:hover {
   background-color: rgba(25, 135, 84, 0.2) !important;
}

/* Revised interval values styling */
#intervals-body .text-decoration-line-through {
   opacity: 0.6;
}

#intervals-body .text-warning {
   color: #d97706 !important;
}

#intervals-body .text-success {
   color: #059669 !important;
}

/* Laps/Distance mode toggle button */
#tt-laps-mode-toggle {
   border-left: none;
   padding: 0.375rem 0.75rem;
   transition: all 0.2s ease;
   background-color: #f8f9fa;
   border-color: #0d6efd;
   border-width: 2px;
   cursor: pointer;
   position: relative;
}

#tt-laps-mode-toggle::before {
   content: "Toggle Mode";
   position: absolute;
   top: -22px;
   left: 50%;
   transform: translateX(-50%);
   background: #0d6efd;
   color: white;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 0.7rem;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
   font-weight: 600;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#tt-laps-mode-toggle:hover::before {
   opacity: 1;
}

#tt-laps-mode-toggle:hover:not(:disabled) {
   background-color: #0d6efd;
   color: white;
   transform: scale(1.05);
   box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

#tt-laps-mode-toggle:active:not(:disabled) {
   transform: scale(0.98);
}

#tt-laps-mode-toggle:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

#tt-mode-icon {
   font-size: 1.2rem;
   display: inline-block;
   transition: transform 0.3s ease;
}

#tt-laps-mode-toggle:hover #tt-mode-icon {
   transform: rotate(15deg);
}

#tt-distance-unit-label {
   min-width: 50px;
   justify-content: center;
}

/* Plan summary CP info */
.plan-item.info {
   color: #0d6efd;
   font-size: 0.9em;
}

/* Share Plan Modal */
.share-code-container {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 2rem;
   border-radius: 12px;
}

.share-code {
   font-size: 3rem;
   font-weight: 900;
   letter-spacing: 0.3em;
   color: white;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   font-family: 'Courier New', monospace;
   user-select: all;
   -webkit-user-select: all;
   -moz-user-select: all;
}

.qr-code-container {
   display: inline-block;
   padding: 1rem;
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#tt-qr-code {
   display: inline-block;
}

#tt-qr-code img {
   display: block;
   margin: 0 auto;
}

#tt-share-url {
   font-family: 'Courier New', monospace;
   font-size: 0.85rem;
}