/* VeloValue - Main Styles */
      
      /* Reset and Base Styles */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
        background: #ffffff;
        min-height: 100vh;
        color: #000000;
        line-height: 1.6;
      }
      
      /* Container */
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 20px;
      }
      
      /* Receipt Container */
      .receipt {
        background: #ffffff;
        border: 2px solid #000000;
        padding: 60px;
        position: relative;
        margin-bottom: 40px;
      }
      
      .receipt::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: #000000;
      }
      
      .receipt::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: #000000;
      }
      
      /* Header */
      .header {
        text-align: center;
        margin-bottom: 40px;
        padding-bottom: 20px;
      }
      
      .company-name {
        font-size: 64px;
        font-weight: bold;
        margin-bottom: 15px;
        letter-spacing: 4px;
        text-transform: uppercase;
      }
      
      .tagline {
        font-size: 20px;
        opacity: 0.7;
        text-transform: uppercase;
        letter-spacing: 2px;
        line-height: 1.6;
        margin-bottom: 40px;
      }
      
      /* Strava Button */
      .strava-button {
        display: inline-block;
        text-decoration: none;
        transition: all 0.3s ease;
      }
      
      .strava-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      
      .strava-button svg {
        display: block;
        border-radius: 6px;
      }
      
      /* Timestamp */
      .timestamp {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 12px;
        opacity: 0.5;
      }
      
      /* Footer */
      .footer {
        margin-top: 60px;
        padding: 30px 0;
        border-top: 2px solid #000000;
        background: #ffffff;
      }
      
      .footer-content {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
      }
      
      .footer p {
        margin: 0;
        font-size: 14px;
        opacity: 0.7;
      }
      
      .privacy-link {
        color: #000000;
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 14px;
        border-bottom: 1px solid #000000;
        transition: all 0.3s ease;
      }
      
      .privacy-link:hover {
        opacity: 0.7;
        border-bottom-color: transparent;
      }
      
      /* Bike Page Specific Styles */
      .bike-details {
        text-align: center;
        margin-bottom: 40px;
      }
      
      .bike-name {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      
      .brand-model {
        font-size: 18px;
        opacity: 0.7;
        font-style: italic;
      }
      
      .price-section {
        text-align: center;
        margin: 40px 0;
        padding: 30px;
        border: 3px solid #000000;
      }
      
      .price-per-km {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .price-label {
        font-size: 18px;
        opacity: 0.7;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      .user-info {
        text-align: center;
        font-size: 16px;
        opacity: 0.8;
        margin: 20px 0;
      }
      
      .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        margin: 40px 0;
      }
      
      .stat {
        text-align: center;
        padding: 20px;
        border: 1px solid #000000;
        background: #ffffff;
      }
      
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
        }
      
      .stat-label {
        font-size: 14px;
        opacity: 0.7;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      .share-info {
        text-align: center;
        margin: 40px 0;
        padding: 20px;
        background: #f0f0f0;
        border: 1px solid #000000;
      }
      
      .share-info h3 {
        font-size: 20px;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      .share-info p {
        font-size: 16px;
        opacity: 0.8;
      }
      
      /* Action Buttons */
      .action-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-top: 40px;
        flex-wrap: wrap;
      }
      
      .btn {
        display: inline-block;
        padding: 15px 30px;
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
        border: 2px solid #000000;
        min-width: 200px;
        text-align: center;
      }
      
      .btn-primary {
        background: #000000;
        color: #ffffff;
      }
      
      .btn-primary:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      
      .btn-secondary {
        background: #ffffff;
        color: #000000;
      }
      
      .btn-secondary:hover {
        background: #000000;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      
      /* Set Price Page Styles */
      .message {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      
      .submessage {
        font-size: 24px;
        opacity: 0.7;
        margin-bottom: 30px;
      }
      
      .bike-name-set-price {
        font-size: 28px;
        margin-bottom: 20px;
        font-style: italic;
      }
      
      .set-price-button {
        display: inline-block;
        background: #000000;
        color: #ffffff;
        padding: 20px 40px;
        border: 2px solid #000000;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
        margin-top: 20px;
      }
      
      .set-price-button:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      
      /* User Page Styles */
      .bike-list {
        list-style: none;
        margin: 30px 0;
      }
      
      .bike-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border: 1px solid #000000;
        margin-bottom: 15px;
        background: #ffffff;
      }
      
      .bike-name-user {
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      .bike-price-user {
        font-size: 24px;
        font-weight: bold;
      }
      
      .bike-actions {
        display: flex;
        gap: 15px;
      }
      
      .action-button {
        display: inline-block;
        background: #000000;
        color: #ffffff;
        padding: 10px 20px;
        border: 2px solid #000000;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
      }
      
      .action-button:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      
      /* Mobile Responsiveness */
      @media (max-width: 768px) {
        .container {
          padding: 20px 15px;
        }
        
        .receipt {
          padding: 30px 20px;
        }
        
        .bike-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
          padding: 15px;
        }
        
        .bike-actions {
          flex-direction: column;
          width: 100%;
          gap: 10px;
        }
        
        .action-button {
          width: 100%;
          text-align: center;
          padding: 12px 20px;
          font-size: 16px;
        }
        
        .company-name {
          font-size: 48px;
        }
        
        .header {
          margin-bottom: 30px;
        }
        
        .footer-content {
          flex-direction: column;
          text-align: center;
          gap: 15px;
        }
        
        .price-section {
          padding: 20px !important;
          margin-bottom: 30px !important;
        }
        
        .price-section .price-per-km {
          font-size: 36px !important;
        }
        
        .price-label {
          font-size: 16px !important;
        }
        
        .share-info input[type="text"] {
          width: 100% !important;
          max-width: none !important;
          font-size: 16px !important;
          min-width: auto !important;
        }
        
        .share-info button {
          width: 100% !important;
          margin-top: 10px !important;
        }
        
        .bike-name {
          font-size: 28px !important;
        }
        
        .brand-model {
          font-size: 18px !important;
        }
        
        .stats {
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
          gap: 15px !important;
        }
        
        .stat {
          padding: 15px !important;
        }
        
        .stat-value {
          font-size: 20px !important;
        }
        
        .stat-label {
          font-size: 12px !important;
        }
      }
      
      @media (max-width: 480px) {
        .container {
          padding: 15px 10px;
        }
        
        .receipt {
          padding: 20px 15px;
        }
        
        .bike-item {
          padding: 12px;
        }
        
        .action-button {
          padding: 10px 15px;
          font-size: 14px;
        }
        
        .company-name {
          font-size: 36px;
        }
        
        .strava-button svg {
          width: 200px;
          height: 60px;
        }
        
        .price-section {
          padding: 15px !important;
          margin-bottom: 20px !important;
        }
        
        .price-section .price-per-km {
          font-size: 28px !important;
        }
        
        .price-label {
          font-size: 14px !important;
        }
        
        .share-info input[type="text"] {
          width: 100% !important;
          max-width: none !important;
          min-width: auto !important;
          font-size: 14px !important;
          padding: 8px 12px !important;
        }
        
        .share-info button {
          width: 100% !important;
          margin-top: 10px !important;
          padding: 10px 15px !important;
          font-size: 14px !important;
        }
        
        .bike-name {
          font-size: 24px !important;
        }
        
        .brand-model {
          font-size: 16px !important;
        }
        
        .stats {
          grid-template-columns: 1fr !important;
          gap: 15px !important;
        }
        
        .stat {
          padding: 15px !important;
        }
        
        .stat-value {
          font-size: 20px !important;
        }
        
        .stat-label {
          font-size: 12px !important;
        }
      }
      
      /* Modal Mobile Responsiveness */
      @media (max-width: 768px) {
        .modal-content {
          width: 95% !important;
          max-width: none !important;
          padding: 20px !important;
          margin: 10px !important;
        }
        
        .modal-content h2 {
          font-size: 20px !important;
        }
        
        .modal-content input,
        .modal-content select {
          font-size: 16px !important;
          padding: 12px !important;
        }
        
        .modal-content button {
          padding: 12px 20px !important;
          font-size: 14px !important;
          min-width: 120px !important;
        }
        
        .header {
          padding-bottom: 60px !important;
        }
        
        .logout-button {
          position: absolute !important;
          top: 0 !important;
          right: 0 !important;
          font-size: 14px !important;
          padding: 6px 12px !important;
        }
      }
      
      /* Additional Mobile Price Overrides */
      @media (max-width: 768px) {
        .price-section .price-per-km {
          font-size: 36px !important;
        }
      }
      
      @media (max-width: 480px) {
        .price-section .price-per-km {
          font-size: 28px !important;
        }
      }
      
      /* Force mobile price sizing with higher specificity */
      @media (max-width: 768px) {
        div.price-section div.price-per-km {
          font-size: 36px !important;
        }
      }
      
      @media (max-width: 480px) {
        div.price-section div.price-per-km {
          font-size: 28px !important;
        }
      }
      
      /* Maximum specificity override for mobile */
      @media (max-width: 768px) {
        body div.container div.receipt div.price-section div.price-per-km {
          font-size: 36px !important;
        }
      }
      
      @media (max-width: 480px) {
        body div.container div.receipt div.price-section div.price-per-km {
          font-size: 28px !important;
        }
      }
      
      .success-message {
        background: #f0f0f0;
        border: 1px solid #000000;
        padding: 15px;
        margin-top: 20px;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      .logout-button {
        display: inline-block;
        background: #dc3545;
        color: #ffffff;
        padding: 8px 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: 2px solid #dc3545;
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
      }
      
      .logout-button:hover {
        background: #ffffff;
        color: #dc3545;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
      
      /* Privacy Page Styles */
      .back-link {
        display: inline-block;
        margin-bottom: 30px;
        color: #000000;
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid #000000;
        transition: all 0.3s ease;
      }
      
      .back-link:hover {
        opacity: 0.7;
        border-bottom-color: transparent;
      }
      
      .privacy-content {
        text-align: left;
      }
      
      .privacy-content h2 {
        font-size: 24px;
        margin: 30px 0 15px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid #000000;
        padding-bottom: 5px;
      }
      
      .privacy-content h3 {
        font-size: 20px;
        margin: 25px 0 10px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      .privacy-content p {
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 1.8;
      }
      
      .privacy-content ul {
        margin: 15px 0 15px 20px;
      }
      
      .privacy-content li {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 1.6;
      }