/* Reset and Base Styles */
    .time-converter-container * {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }
    
    .time-converter-container {
      width: 100% !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 2rem !important;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
      border-radius: 12px !important;
      color: #333 !important;
    }
    
    /* Card Styles */
    .converter-card {
      background: rgba(255, 255, 255, 0.9) !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
      padding: 2rem !important;
      margin-bottom: 2rem !important;
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
      transition: all 0.3s ease !important;
    }
    
    .converter-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    }
    
    .card-header {
      text-align: center !important;
      margin-bottom: 1.5rem !important;
      padding-bottom: 1rem !important;
      border-bottom: 2px solid rgba(106, 17, 203, 0.2) !important;
    }
    
    .tool-title {
      font-size: 2rem !important;
      font-weight: 700 !important;
      color: #6a11cb !important;
      margin-bottom: 0.5rem !important;
    }
    
    .tool-subtitle {
      font-size: 1.1rem !important;
      color: #666 !important;
    }
    
    /* Current Time Display */
    .current-time-display {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 2rem !important;
      flex-wrap: wrap !important;
    }
    
    .time-block {
      flex: 1 !important;
      min-width: 200px !important;
      background: linear-gradient(to bottom, #f8f9fa, #e9ecef) !important;
      padding: 1.5rem !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
      text-align: center !important;
      position: relative !important;
      overflow: hidden !important;
      transition: all 0.3s ease !important;
    }
    
    .time-block:hover {
      transform: scale(1.02) !important;
    }
    
    .time-block::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 5px !important;
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
    }
    
    .time-location {
      font-size: 1.2rem !important;
      font-weight: 600 !important;
      color: #444 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .current-time {
      font-size: 2.2rem !important;
      font-weight: 700 !important;
      color: #2575fc !important;
      margin: 0.5rem 0 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    .current-date {
      font-size: 1rem !important;
      color: #666 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .timezone-info {
      font-size: 0.85rem !important;
      color: #888 !important;
      background: rgba(0, 0, 0, 0.05) !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 20px !important;
      display: inline-block !important;
      margin-top: 0.5rem !important;
    }
    
    .time-arrow {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 1rem !important;
      color: #6a11cb !important;
      animation: pulse 2s infinite !important;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1) !important;
        opacity: 1 !important;
      }
      50% {
        transform: scale(1.1) !important;
        opacity: 0.8 !important;
      }
      100% {
        transform: scale(1) !important;
        opacity: 1 !important;
      }
    }
    
    /* Time Difference Display */
    .time-difference-display {
      background: rgba(37, 117, 252, 0.1) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      margin-bottom: 2rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-wrap: wrap !important;
      gap: 0.5rem !important;
    }
    
    .time-diff-label {
      font-weight: 600 !important;
      color: #555 !important;
    }
    
    .time-diff-value {
      font-weight: 700 !important;
      color: #6a11cb !important;
    }
    
    /* Converter Controls */
    .converter-controls {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 12px !important;
      padding: 1.5rem !important;
      margin-bottom: 2rem !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    
    .control-section {
      margin-bottom: 1.5rem !important;
    }
    
    .control-section label {
      display: block !important;
      font-weight: 600 !important;
      color: #444 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .time-input-group {
      display: flex !important;
      gap: 0.5rem !important;
      flex-wrap: wrap !important;
    }
    
    .time-input, .period-select, .timezone-select {
      padding: 0.7rem 1rem !important;
      border: 2px solid rgba(106, 17, 203, 0.3) !important;
      border-radius: 8px !important;
      font-size: 1rem !important;
      outline: none !important;
      transition: all 0.3s ease !important;
    }
    
    .time-input:focus, .period-select:focus, .timezone-select:focus {
      border-color: #6a11cb !important;
      box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2) !important;
    }
    
    .convert-button {
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
      color: white !important;
      border: none !important;
      padding: 0.7rem 1.5rem !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 4px 10px rgba(106, 17, 203, 0.3) !important;
    }
    
    .convert-button:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 15px rgba(106, 17, 203, 0.4) !important;
    }
    
    .convert-button:active {
      transform: translateY(1px) !important;
    }
    
    .result-section {
      display: flex !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 1rem !important;
      background: rgba(37, 117, 252, 0.05) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
    }
    
    .result-label {
      font-weight: 600 !important;
      color: #555 !important;
    }
    
    .result-value {
      font-weight: 700 !important;
      color: #2575fc !important;
      font-size: 1.1rem !important;
    }
    
    .copy-button {
      display: flex !important;
      align-items: center !important;
      gap: 0.3rem !important;
      background: rgba(106, 17, 203, 0.1) !important;
      color: #6a11cb !important;
      border: none !important;
      padding: 0.5rem 1rem !important;
      border-radius: 6px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }
    
    .copy-button:hover {
      background: rgba(106, 17, 203, 0.2) !important;
    }
    
    /* Additional Features */
    .additional-features {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    
    .feature-tabs {
      display: flex !important;
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
      padding: 0.5rem !important;
      border-radius: 8px 8px 0 0 !important;
    }
    
    .tab-btn {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.7) !important;
      border: none !important;
      padding: 0.7rem 1.2rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      border-radius: 6px !important;
      position: relative !important;
    }
    
    .tab-btn.active {
      background: rgba(255, 255, 255, 0.2) !important;
      color: white !important;
    }
    
    .tab-btn:hover {
      color: white !important;
    }
    
    .tab-content {
      padding: 1.5rem !important;
    }
    
    .tab-pane {
      display: none !important;
    }
    
    .tab-pane.active {
      display: block !important;
      animation: fadeIn 0.5s ease !important;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0 !important;
        transform: translateY(10px) !important;
      }
      to {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }
    }
    
    /* Business Hours Tab */
    .business-hours-display {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 1.5rem !important;
    }
    
    .hours-block {
      flex: 1 !important;
      min-width: 250px !important;
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .hours-block h4 {
      color: #6a11cb !important;
      margin-bottom: 1rem !important;
      padding-bottom: 0.5rem !important;
      border-bottom: 1px solid rgba(106, 17, 203, 0.2) !important;
    }
    
    .hours-conversion {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.5rem !important;
    }
    
    .hour-row {
      display: flex !important;
      justify-content: space-between !important;
      padding: 0.5rem !important;
      border-radius: 4px !important;
      transition: all 0.2s ease !important;
    }
    
    .hour-row:nth-child(odd) {
      background: rgba(37, 117, 252, 0.05) !important;
    }
    
    .hour-row:hover {
      background: rgba(37, 117, 252, 0.1) !important;
    }
    
    /* Day/Night Tab */
    .day-night-display {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.5rem !important;
    }
    
    .day-night-info {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 1.5rem !important;
    }
    
    .day-night-block {
      flex: 1 !important;
      min-width: 250px !important;
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .day-night-block h4 {
      color: #6a11cb !important;
      margin-bottom: 1rem !important;
      text-align: center !important;
    }
    
    .sun-info {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.7rem !important;
      margin-bottom: 1rem !important;
    }
    
    .sun-event {
      display: flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      color: #555 !important;
    }
    
    .day-night-status {
      text-align: center !important;
      font-weight: 600 !important;
      color: #2575fc !important;
      padding: 0.5rem !important;
      background: rgba(37, 117, 252, 0.1) !important;
      border-radius: 6px !important;
      margin-top: 1rem !important;
    }
    
    .visual-day-night {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .visual-label {
      font-weight: 600 !important;
      color: #555 !important;
      margin-bottom: 1rem !important;
      text-align: center !important;
    }
    
    .visual-timeline {
      height: 80px !important;
      background: linear-gradient(to right, #2c3e50, #4ca1af, #2c3e50) !important;
      border-radius: 8px !important;
      position: relative !important;
      margin: 2rem 0 !important;
    }
    
    .timeline-marker {
      position: absolute !important;
      transform: translateX(-50%) !important;
    }
    
    .marker-time {
      position: absolute !important;
      bottom: 100% !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background: white !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 4px !important;
      font-weight: 600 !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
      white-space: nowrap !important;
      margin-bottom: 0.5rem !important;
    }
    
    .eastern .marker-time {
      color: #6a11cb !important;
    }
    
    .california .marker-time {
      color: #2575fc !important;
    }
    
    .marker-dot {
      width: 12px !important;
      height: 12px !important;
      border-radius: 50% !important;
      background: white !important;
      border: 2px solid !important;
    }
    
    .eastern .marker-dot {
      border-color: #6a11cb !important;
    }
    
    .california .marker-dot {
      border-color: #2575fc !important;
    }
    
    /* Saved Times Tab */
    .saved-times-display {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.5rem !important;
    }
    
    .saved-times-form {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .saved-times-form h4 {
      color: #6a11cb !important;
      margin-bottom: 1rem !important;
    }
    
    .save-time-inputs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 0.5rem !important;
      align-items: center !important;
    }
    
    .label-input {
      flex-grow: 1 !important;
      padding: 0.7rem 1rem !important;
      border: 2px solid rgba(106, 17, 203, 0.3) !important;
      border-radius: 8px !important;
      font-size: 1rem !important;
      outline: none !important;
    }
    
    .save-button {
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
      color: white !important;
      border: none !important;
      padding: 0.7rem 1.5rem !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }
    
    .saved-times-list {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .saved-times-list h4 {
      color: #6a11cb !important;
      margin-bottom: 1rem !important;
    }
    
    .no-saved-message {
      color: #888 !important;
      font-style: italic !important;
      text-align: center !important;
      padding: 1rem !important;
    }
    
    .times-list {
      list-style: none !important;
    }
    
    .times-list li {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 0.7rem !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
      transition: all 0.2s ease !important;
    }
    
    .times-list li:hover {
      background: rgba(37, 117, 252, 0.05) !important;
    }
    
    .times-list li button {
      background: rgba(220, 53, 69, 0.1) !important;
      color: #dc3545 !important;
      border: none !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }
    
    .times-list li button:hover {
      background: rgba(220, 53, 69, 0.2) !important;
    }
    
    /* Supportive Content Section */
    .supportive-content {
      background: rgba(255, 255, 255, 0.9) !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
      padding: 2rem !important;
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .content-section {
      max-width: 900px !important;
      margin: 0 auto !important;
    }
    
    .content-section h3 {
      color: #6a11cb !important;
      font-size: 1.5rem !important;
      margin: 1.5rem 0 1rem !important;
      position: relative !important;
      padding-bottom: 0.5rem !important;
    }
    
    .content-section h3::after {
      content: '' !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 50px !important;
      height: 3px !important;
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
      border-radius: 3px !important;
    }
    
    .content-section p {
      color: #555 !important;
      line-height: 1.6 !important;
      margin-bottom: 1.5rem !important;
    }
    
    .info-card {
      display: flex !important;
      gap: 1rem !important;
      background: rgba(37, 117, 252, 0.05) !important;
      padding: 1.5rem !important;
      border-radius: 12px !important;
      margin: 1.5rem 0 !important;
      border-left: 4px solid #2575fc !important;
    }
    
    .info-icon {
      color: #2575fc !important;
      flex-shrink: 0 !important;
    }
    
    .info-content h4 {
      color: #2575fc !important;
      margin-bottom: 0.5rem !important;
    }
    
    .info-content p {
      margin-bottom: 0 !important;
    }
    
    .time-zone-table {
      margin: 1.5rem 0 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    
    .table-header {
      display: flex !important;
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
      color: white !important;
      font-weight: 600 !important;
    }
    
    .table-row {
      display: flex !important;
      background: white !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .table-row:last-child {
      border-bottom: none !important;
    }
    
    .table-cell {
      flex: 1 !important;
      padding: 1rem !important;
      text-align: center !important;
    }
    
    .tips-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
      gap: 1.5rem !important;
      margin: 1.5rem 0 !important;
    }
    
    .tip-card {
      background: white !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
      padding: 1.5rem !important;
      display: flex !important;
      gap: 1rem !important;
      transition: all 0.3s ease !important;
    }
    
    .tip-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
    .tip-number {
      width: 40px !important;
      height: 40px !important;
      background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
      color: white !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 700 !important;
      font-size: 1.2rem !important;
      flex-shrink: 0 !important;
    }
    
    .tip-content h4 {
      color: #6a11cb !important;
      margin-bottom: 0.5rem !important;
    }
    
    .tip-content p {
      margin-bottom: 0 !important;
      font-size: 0.95rem !important;
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
      .time-converter-container {
        padding: 1rem !important;
      }
      
      .converter-card, .supportive-content {
        padding: 1.5rem !important;
      }
      
      .current-time-display {
        flex-direction: column !important;
        gap: 1.5rem !important;
      }
      
      .time-arrow {
        transform: rotate(90deg) !important;
        margin: 0.5rem 0 !important;
      }
      
      .time-input-group, .save-time-inputs {
        flex-direction: column !important;
      }
      
      .time-input, .period-select, .timezone-select, .label-input, .convert-button, .save-button {
        width: 100% !important;
      }
      
      .result-section {
        flex-direction: column !important;
        align-items: flex-start !important;
      }
      
      .business-hours-display, .day-night-info {
        flex-direction: column !important;
      }
      
      .feature-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
      }
    }