/* Base Styles with !important */
    .time-warp-container * {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
    }

    .time-warp-container {
      width: 100% !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 20px !important;
      position: relative !important;
      overflow: hidden !important;
      
      /* Custom Properties */
      --primary-color: #6c5ce7 !important;
      --secondary-color: #a29bfe !important;
      --accent-color: #fd79a8 !important;
      --success-color: #00cec9 !important;
      --warning-color: #fdcb6e !important;
      --dark-color: #2d3436 !important;
      --light-color: #dfe6e9 !important;
      --card-bg: rgba(255, 255, 255, 0.1) !important;
      --card-bg-solid: #ffffff !important;
      --card-shadow: 0 8px 32px rgba(31, 38, 135, 0.15) !important;
      --neo-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(255, 255, 255, 0.1) !important;
      --neo-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -4px -4px 8px rgba(255, 255, 255, 0.1) !important;
      --border-radius: 16px !important;
      --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
      
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
      color: #fff !important;
      min-height: 100vh !important;
			border-radius:15px;
    }

    /* Dark Theme Variables */
    .time-warp-container.dark-theme {
      --primary-color: #bd93f9 !important;
      --secondary-color: #6272a4 !important;
      --accent-color: #ff79c6 !important;
      --card-bg: rgba(40, 42, 54, 0.8) !important;
      --card-bg-solid: #282a36 !important;
      --neo-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25), -6px -6px 12px rgba(255, 255, 255, 0.03) !important;
      --neo-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.25), inset -4px -4px 8px rgba(255, 255, 255, 0.03) !important;
      
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
    }

    /* Cosmic Background Animation */
    .cosmic-background {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      z-index: -1 !important;
    }

    .cosmic-glow {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: 150% !important;
      height: 150% !important;
      background: radial-gradient(circle, rgba(108, 92, 231, 0.2) 0%, rgba(16, 16, 28, 0) 70%) !important;
      transform: translate(-50%, -50%) !important;
      opacity: 0.8 !important;
      animation: pulse 15s infinite alternate !important;
    }

    .star {
      position: absolute !important;
      background: white !important;
      border-radius: 50% !important;
      filter: blur(1px) !important;
      opacity: 0 !important;
      animation: twinkle 5s infinite !important;
    }

    .star1 {
      width: 2px !important;
      height: 2px !important;
      top: 15% !important;
      left: 20% !important;
      animation-delay: 0s !important;
    }

    .star2 {
      width: 3px !important;
      height: 3px !important;
      top: 25% !important;
      left: 80% !important;
      animation-delay: 1s !important;
    }

    .star3 {
      width: 2px !important;
      height: 2px !important;
      top: 60% !important;
      left: 40% !important;
      animation-delay: 2s !important;
    }

    .star4 {
      width: 4px !important;
      height: 4px !important;
      top: 75% !important;
      left: 75% !important;
      animation-delay: 3s !important;
    }

    .star5 {
      width: 3px !important;
      height: 3px !important;
      top: 35% !important;
      left: 30% !important;
      animation-delay: 4s !important;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.5); }
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
    }

    /* Floating Header */
    .floating-header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 30px !important;
      padding: 15px 20px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-radius: var(--border-radius) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: var(--card-shadow) !important;
      animation: float 6s ease-in-out infinite !important;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .title-container {
      display: flex !important;
      flex-direction: column !important;
    }

/*     .warp-title {
      font-size: 28px !important;
      font-weight: 700 !important;
      background: linear-gradient(to right, var(--primary-color), var(--accent-color)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-fill-color: transparent !important;
      margin-bottom: 5px !important;
    } */

.warp-title {
    font-size: 23px !important;
    font-weight: 700 !important;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-fill-color: transparent !important;
    margin-bottom: 5px !important;
    text-transform: uppercase;
}

    .subtitle {
      font-size: 14px !important;
      color: rgba(255, 255, 255, 0.7) !important;
      letter-spacing: 1px !important;
    }

    /* Theme Orb */
    .theme-orb-container {
      position: relative !important;
    }

    .theme-orb {
      width: 50px !important;
      height: 50px !important;
      position: relative !important;
    }

    .theme-toggle {
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
    }

    .orb-label {
      position: absolute !important;
      cursor: pointer !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background: linear-gradient(145deg, #3a3a3a, #1a1a1a) !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: hidden !important;
      transition: var(--transition) !important;
      box-shadow: var(--neo-shadow) !important;
    }

    .orb-icon {
      position: absolute !important;
      width: 24px !important;
      height: 24px !important;
      transition: var(--transition) !important;
    }

    .orb-icon.sun {
      background: radial-gradient(circle, #ffeb3b 30%, transparent 70%) !important;
      border-radius: 50% !important;
      opacity: 1 !important;
      transform: scale(1) !important;
    }

    .orb-icon.sun:before {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: radial-gradient(circle, rgba(255, 235, 59, 0.8) 30%, transparent 70%) !important;
      border-radius: 50% !important;
      filter: blur(3px) !important;
      animation: sunPulse 3s infinite alternate !important;
    }

    @keyframes sunPulse {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.2); opacity: 1; }
    }

    .orb-icon.moon {
      background: radial-gradient(circle at 30% 30%, #f8f8f8 30%, #a0a0a0 70%) !important;
      border-radius: 50% !important;
      opacity: 0 !important;
      transform: scale(0) !important;
    }

    .orb-icon.moon:before {
      content: "" !important;
      position: absolute !important;
      top: 15% !important;
      left: 15% !important;
      width: 25% !important;
      height: 25% !important;
      background: rgba(160, 160, 160, 0.8) !important;
      border-radius: 50% !important;
      box-shadow: 
        10px 10px 0 -2px rgba(160, 160, 160, 0.8),
        20px 5px 0 -3px rgba(160, 160, 160, 0.6) !important;
    }

    .theme-toggle:checked + .orb-label .orb-icon.sun {
      opacity: 0 !important;
      transform: scale(0) !important;
    }

    .theme-toggle:checked + .orb-label .orb-icon.moon {
      opacity: 1 !important;
      transform: scale(1) !important;
    }

    .orb-glow {
      position: absolute !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, rgba(255, 235, 59, 0.3) 0%, transparent 70%) !important;
      opacity: 0.5 !important;
      transition: var(--transition) !important;
    }

    .theme-toggle:checked + .orb-label .orb-glow {
      background: radial-gradient(circle, rgba(162, 155, 254, 0.3) 0%, transparent 70%) !important;
    }

    /* Time Dimension Display */
    .time-dimension-display {
      margin-bottom: 30px !important;
      display: flex !important;
      justify-content: center !important;
    }

    .dimension-orb {
      width: 180px !important;
      height: 180px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      border-radius: 50% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
      box-shadow: var(--neo-shadow) !important;
      overflow: hidden !important;
    }

    .dimension-visualization {
      position: absolute !important;
      width: 100% !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .orbit-container {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .orbit {
      position: absolute !important;
      border-radius: 50% !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .orbit-hour {
      width: 80% !important;
      height: 80% !important;
      animation: orbitRotate 43200s linear infinite !important; /* 12 hours */
    }

    .orbit-minute {
      width: 60% !important;
      height: 60% !important;
      animation: orbitRotate 3600s linear infinite !important; /* 60 minutes */
    }

    .orbit-second {
      width: 40% !important;
      height: 40% !important;
      animation: orbitRotate 60s linear infinite !important; /* 60 seconds */
    }

    @keyframes orbitRotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .orbit-marker {
      position: absolute !important;
      width: 8px !important;
      height: 8px !important;
      background: var(--primary-color) !important;
      border-radius: 50% !important;
      top: 0 !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      box-shadow: 0 0 10px var(--primary-color) !important;
    }

    .orbit-hour .orbit-marker {
      background: var(--accent-color) !important;
      box-shadow: 0 0 10px var(--accent-color) !important;
    }

    .orbit-second .orbit-marker {
      background: var(--success-color) !important;
      box-shadow: 0 0 10px var(--success-color) !important;
    }

    .dimension-core {
      width: 20px !important;
      height: 20px !important;
      background: radial-gradient(circle, var(--primary-color), var(--secondary-color)) !important;
      border-radius: 50% !important;
      box-shadow: 0 0 15px var(--primary-color) !important;
      animation: corePulse 3s infinite alternate !important;
    }

    @keyframes corePulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 15px var(--primary-color); }
      50% { transform: scale(1.2); box-shadow: 0 0 25px var(--primary-color); }
    }

    .current-time-display {
      position: relative !important;
      z-index: 2 !important;
      background: rgba(0, 0, 0, 0.5) !important;
      padding: 10px 15px !important;
      border-radius: 20px !important;
      font-size: 20px !important;
      font-weight: 600 !important;
      color: white !important;
      letter-spacing: 1px !important;
      box-shadow: var(--neo-shadow-inset) !important;
    }

    .time-pulse {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 20px !important;
      background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
      opacity: 0.2 !important;
      animation: timePulse 2s infinite !important;
      z-index: -1 !important;
    }

    @keyframes timePulse {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 0.3; }
    }

    /* Time Zone Cards */
    .time-zone-warp {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 30px !important;
      gap: 20px !important;
    }

    .zone-card {
      flex: 1 !important;
      min-width: 280px !important;
      background: var(--card-bg) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-radius: var(--border-radius) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: var(--card-shadow) !important;
      overflow: hidden !important;
      transition: var(--transition) !important;
      transform-style: preserve-3d !important;
      perspective: 1000px !important;
    }

    .zone-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 15px 35px rgba(31, 38, 135, 0.2) !important;
    }

    .zone-card-inner {
      padding: 20px !important;
      position: relative !important;
    }

    .zone-header {
      margin-bottom: 15px !important;
      position: relative !important;
    }

    .zone-title {
      font-size: 20px !important;
      font-weight: 700 !important;
      margin-bottom: 5px !important;
    }

    .pst-zone .zone-title {
      color: var(--primary-color) !important;
    }

    .est-zone .zone-title {
      color: var(--accent-color) !important;
    }

    .zone-subtitle {
      font-size: 14px !important;
      color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Skyline Visualization */
    .zone-skyline {
      height: 80px !important;
      margin-bottom: 20px !important;
      position: relative !important;
      overflow: hidden !important;
      border-radius: 10px !important;
      background: linear-gradient(to bottom, #2c3e50, #0a0a0a) !important;
    }

    .skyline-silhouette {
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 40px !important;
    }

    .pacific-skyline {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cpath d='M0,200 L50,180 L60,190 L80,170 L100,180 L120,160 L140,170 L160,150 L180,160 L200,140 L220,150 L240,130 L260,140 L280,120 L300,130 L320,110 L340,120 L360,100 L380,110 L400,90 L420,100 L440,80 L460,90 L480,70 L500,80 L520,60 L540,70 L560,50 L580,60 L600,40 L620,50 L640,30 L660,40 L680,20 L700,30 L720,10 L740,20 L760,0 L780,10 L800,0 L820,10 L840,0 L860,10 L880,0 L900,10 L920,0 L940,10 L960,0 L980,10 L1000,0 L1000,200 L0,200 Z' fill='%23000000'/%3E%3C/svg%3E") repeat-x bottom !important;
      background-size: contain !important;
    }

    .eastern-skyline {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cpath d='M0,200 L20,180 L40,190 L60,150 L80,160 L100,140 L120,150 L140,120 L160,130 L180,100 L200,110 L220,80 L240,90 L260,60 L280,70 L300,40 L320,50 L340,20 L360,30 L380,0 L400,10 L420,0 L440,20 L460,10 L480,30 L500,20 L520,40 L540,30 L560,50 L580,40 L600,60 L620,50 L640,70 L660,60 L680,80 L700,70 L720,90 L740,80 L760,100 L780,90 L800,110 L820,100 L840,120 L860,110 L880,130 L900,120 L920,140 L940,130 L960,150 L980,140 L1000,160 L1000,200 L0,200 Z' fill='%23000000'/%3E%3C/svg%3E") repeat-x bottom !important;
      background-size: contain !important;
    }

    .sun-moon-indicator {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    .celestial-body {
      position: absolute !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      transition: var(--transition) !important;
    }

    .sun-pst, .sun-est {
      background: radial-gradient(circle, #ffeb3b, #ff9800) !important;
      box-shadow: 0 0 20px rgba(255, 235, 59, 0.8) !important;
    }

    .moon-pst, .moon-est {
      background: radial-gradient(circle at 30% 30%, #f8f8f8, #a0a0a0) !important;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
    }

    /* Time Input Sliders */
    .time-input-container {
      margin-bottom: 20px !important;
    }

    .time-slider-container {
      margin-bottom: 15px !important;
    }

    .slider-label {
      font-size: 14px !important;
      margin-bottom: 8px !important;
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .neo-slider {
      position: relative !important;
      height: 40px !important;
      display: flex !important;
      align-items: center !important;
    }

    .range-slider {
      -webkit-appearance: none !important;
      appearance: none !important;
      width: 100% !important;
      height: 6px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border-radius: 3px !important;
      outline: none !important;
      box-shadow: var(--neo-shadow-inset) !important;
    }

    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none !important;
      appearance: none !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      background: var(--primary-color) !important;
      cursor: pointer !important;
      box-shadow: 0 0 10px var(--primary-color) !important;
      transition: var(--transition) !important;
    }

    .range-slider::-moz-range-thumb {
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      background: var(--primary-color) !important;
      cursor: pointer !important;
      box-shadow: 0 0 10px var(--primary-color) !important;
      transition: var(--transition) !important;
      border: none !important;
    }

    .range-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2) !important;
    }

    .range-slider::-moz-range-thumb:hover {
      transform: scale(1.2) !important;
    }

    .slider-value-display {
      position: absolute !important;
      right: 10px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      background: rgba(0, 0, 0, 0.3) !important;
      padding: 5px 10px !important;
      border-radius: 10px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: white !important;
      min-width: 40px !important;
      text-align: center !important;
    }

    /* AM/PM Toggle */
    .ampm-toggle-container {
      margin-bottom: 15px !important;
    }

    .ampm-label {
      font-size: 14px !important;
      margin-bottom: 8px !important;
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .ampm-toggle {
      position: relative !important;
      width: 100% !important;
      height: 40px !important;
    }

    .ampm-checkbox {
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
    }

    .ampm-switch {
      position: absolute !important;
      cursor: pointer !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background: rgba(0, 0, 0, 0.3) !important;
      border-radius: 20px !important;
      transition: var(--transition) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 5px 15px !important;
      box-shadow: var(--neo-shadow-inset) !important;
    }

    .ampm-switch .am, .ampm-switch .pm {
      z-index: 1 !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      transition: var(--transition) !important;
    }

    .ampm-switch .am {
      color: white !important;
    }

    .ampm-switch .pm {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .toggle-thumb {
      position: absolute !important;
      height: 30px !important;
      width: 80px !important;
      left: 5px !important;
      bottom: 5px !important;
      background: var(--primary-color) !important;
      border-radius: 15px !important;
      transition: var(--transition) !important;
      box-shadow: 0 0 10px rgba(108, 92, 231, 0.5) !important;
    }

    .ampm-checkbox:checked + .ampm-switch .toggle-thumb {
      transform: translateX(calc(100% - 10px)) !important;
      background: var(--accent-color) !important;
      box-shadow: 0 0 10px rgba(253, 121, 168, 0.5) !important;
    }

    .ampm-checkbox:checked + .ampm-switch .am {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .ampm-checkbox:checked + .ampm-switch .pm {
      color: white !important;
    }

    /* Date Picker */
    .date-picker-container {
      margin-bottom: 20px !important;
    }

    .date-label {
      font-size: 14px !important;
      margin-bottom: 8px !important;
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .neo-date-input {
      width: 100% !important;
      height: 40px !important;
      background: rgba(0, 0, 0, 0.3) !important;
      border: none !important;
      border-radius: 10px !important;
      color: white !important;
      padding: 0 15px !important;
      font-size: 14px !important;
      box-shadow: var(--neo-shadow-inset) !important;
    }

    .neo-date-input::-webkit-calendar-picker-indicator {
      filter: invert(1) !important;
      cursor: pointer !important;
    }

    /* Zone Info */
    .zone-info {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
    }

    .info-item {
      display: flex !important;
      align-items: center !important;
      background: rgba(0, 0, 0, 0.2) !important;
      padding: 8px 12px !important;
      border-radius: 8px !important;
      font-size: 12px !important;
    }

    .info-icon {
      width: 16px !important;
      height: 16px !important;
      margin-right: 8px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .day-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    }

    .location-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") !important;
    }

    .info-value {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Warp Animation */
    .warp-animation-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 100px !important;
      position: relative !important;
    }

    .warp-button {
      width: 80px !important;
      height: 80px !important;
      border-radius: 50% !important;
      background: linear-gradient(145deg, #302b63, #24243e) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      position: relative !important;
      z-index: 2 !important;
      box-shadow: var(--neo-shadow) !important;
      transition: var(--transition) !important;
    }

    .warp-button:hover {
      transform: scale(1.1) !important;
    }

    .warp-button:active {
      transform: scale(0.95) !important;
    }

    .warp-button-inner {
      width: 70px !important;
      height: 70px !important;
      border-radius: 50% !important;
      background: linear-gradient(145deg, #6c5ce7, #a29bfe) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3) !important;
    }

    .warp-icon {
      width: 30px !important;
      height: 30px !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'%3E%3C/path%3E%3C/svg%3E") !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      transform: rotate(45deg) !important;
      margin-bottom: 5px !important;
    }

    .warp-text {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: white !important;
      letter-spacing: 1px !important;
    }

    .warp-ripple {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 50% !important;
      background: rgba(108, 92, 231, 0.3) !important;
      transform: scale(0) !important;
      opacity: 1 !important;
      animation: ripple 2s infinite !important;
    }

    @keyframes ripple {
      0% { transform: scale(0.5); opacity: 1; }
      100% { transform: scale(2); opacity: 0; }
    }

    .warp-tunnel {
      position: absolute !important;
      width: 100px !important;
      height: 200px !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 0 !important;
      z-index: 1 !important;
      transition: opacity 0.3s ease !important;
    }

    .warp-tunnel.active {
      opacity: 1 !important;
    }

    .tunnel-segment {
      width: 100% !important;
      height: 20px !important;
      background: linear-gradient(90deg, transparent, var(--primary-color), transparent) !important;
      margin: 5px 0 !important;
      transform: scaleX(0) !important;
      opacity: 0 !important;
    }

    .warp-tunnel.active .tunnel-segment {
      animation: tunnelWarp 1s forwards !important;
    }

    .warp-tunnel.active .tunnel-segment:nth-child(2) {
      animation-delay: 0.1s !important;
    }

    .warp-tunnel.active .tunnel-segment:nth-child(3) {
      animation-delay: 0.2s !important;
    }

    .warp-tunnel.active .tunnel-segment:nth-child(4) {
      animation-delay: 0.3s !important;
    }

    .warp-tunnel.active .tunnel-segment:nth-child(5) {
      animation-delay: 0.4s !important;
    }

    @keyframes tunnelWarp {
      0% { transform: scaleX(0); opacity: 0; }
      50% { transform: scaleX(1); opacity: 1; }
      100% { transform: scaleX(0); opacity: 0; }
    }

    /* Time Result Crystal */
    .time-result-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      margin-bottom: 20px !important;
    }

    .time-crystal {
      width: 150px !important;
      height: 150px !important;
      position: relative !important;
      perspective: 1000px !important;
      margin-bottom: 15px !important;
    }

    .crystal-facet {
      position: absolute !important;
      width: 100% !important;
      height: 100% !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      transform-style: preserve-3d !important;
      animation: crystalRotate 20s linear infinite !important;
    }

    .crystal-facet:nth-child(1) {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
      animation-delay: -5s !important;
    }

    .crystal-facet:nth-child(2) {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
      transform: rotateY(60deg) !important;
      animation-delay: -10s !important;
    }

    .crystal-facet:nth-child(3) {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
      transform: rotateY(120deg) !important;
      animation-delay: -15s !important;
    }

    @keyframes crystalRotate {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }

    .crystal-core {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 80% !important;
      height: 80% !important;
      background: radial-gradient(circle, var(--accent-color) 0%, rgba(253, 121, 168, 0.5) 70%) !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 0 30px var(--accent-color) !important;
      animation: corePulse 3s infinite alternate !important;
    }

    .result-time {
      font-size: 24px !important;
      font-weight: 700 !important;
      color: white !important;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
    }

    .result-details {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
      justify-content: center !important;
    }

    .detail-item {
      display: flex !important;
      align-items: center !important;
      background: rgba(0, 0, 0, 0.2) !important;
      padding: 8px 12px !important;
      border-radius: 8px !important;
      font-size: 12px !important;
    }

    .detail-icon {
      width: 16px !important;
      height: 16px !important;
      margin-right: 8px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .date-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    }

    .time-diff-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
    }

    .detail-value {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Dimension Map */
    .dimension-map-container {
      margin-bottom: 30px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-radius: var(--border-radius) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: var(--card-shadow) !important;
      padding: 20px !important;
    }

    .map-title {
      font-size: 18px !important;
      font-weight: 600 !important;
      margin-bottom: 15px !important;
      text-align: center !important;
    }

    .dimension-map {
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
    }

    .map-globe {
      position: relative !important;
      width: 100% !important;
      height: 150px !important;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cpath d='M0,250 Q250,100 500,250 T1000,250' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M0,250 Q250,400 500,250 T1000,250' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cpath d='M0,150 Q250,0 500,150 T1000,150' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cpath d='M0,350 Q250,500 500,350 T1000,350' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center !important;
      background-size: cover !important;
      border-radius: 10px !important;
      overflow: hidden !important;
    }

    .globe-highlight {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: radial-gradient(circle at center, rgba(108, 92, 231, 0.3) 0%, transparent 70%) !important;
      animation: globePulse 8s infinite alternate !important;
    }

    @keyframes globePulse {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.05); }
    }

    .time-zone-marker {
      position: absolute !important;
      width: 30px !important;
      height: 30px !important;
      transform: translate(-50%, -50%) !important;
    }

    .pst-marker {
      top: 50% !important;
      left: 30% !important;
    }

    .est-marker {
      top: 50% !important;
      left: 70% !important;
    }

    .marker-pulse {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 20px !important;
      height: 20px !important;
      background: var(--primary-color) !important;
      border-radius: 50% !important;
      box-shadow: 0 0 10px var(--primary-color) !important;
    }

    .est-marker .marker-pulse {
      background: var(--accent-color) !important;
      box-shadow: 0 0 10px var(--accent-color) !important;
    }

    .marker-pulse:before {
      content: "" !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 50% !important;
      background: var(--primary-color) !important;
      opacity: 0.5 !important;
      animation: markerPulse 2s infinite !important;
    }

    .est-marker .marker-pulse:before {
      background: var(--accent-color) !important;
    }

    @keyframes markerPulse {
      0% { transform: scale(1); opacity: 0.5; }
      100% { transform: scale(2.5); opacity: 0; }
    }

    .marker-label {
      position: absolute !important;
      top: 100% !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background: rgba(0, 0, 0, 0.5) !important;
      padding: 3px 8px !important;
      border-radius: 10px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      color: white !important;
      margin-top: 5px !important;
      white-space: nowrap !important;
    }

    .time-zone-connection {
      position: absolute !important;
      top: 50% !important;
      left: 30% !important;
      width: 40% !important;
      height: 2px !important;
      background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
    }

    .connection-particle {
      position: absolute !important;
      width: 6px !important;
      height: 6px !important;
      background: white !important;
      border-radius: 50% !important;
      top: -2px !important;
      animation: particleMove 3s linear infinite !important;
    }

    .connection-particle:nth-child(2) {
      animation-delay: -1s !important;
    }

    .connection-particle:nth-child(3) {
      animation-delay: -2s !important;
    }

    @keyframes particleMove {
      0% { left: 0%; opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }

    .dimension-timeline {
      position: relative !important;
      height: 80px !important;
    }

    .timeline-track {
      position: relative !important;
      height: 6px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border-radius: 3px !important;
      margin: 30px 0 !important;
    }

    .timeline-hours {
      display: flex !important;
      justify-content: space-between !important;
      position: absolute !important;
      bottom: -25px !important;
      left: 0 !important;
      width: 100% !important;
      font-size: 12px !important;
      color: rgba(255, 255, 255, 0.6) !important;
    }

    .timeline-marker {
      position: absolute !important;
      top: 0 !important;
      transform: translateX(-50%) !important;
    }

    .pst-time-marker {
      left: 41.67% !important; /* 10/24 * 100% */
    }

    .est-time-marker {
      left: 54.17% !important; /* 13/24 * 100% */
    }

    .marker-head {
      width: 12px !important;
      height: 12px !important;
      border-radius: 50% !important;
      background: var(--primary-color) !important;
      position: absolute !important;
      top: -3px !important;
      left: 0 !important;
      box-shadow: 0 0 10px var(--primary-color) !important;
    }

    .est-time-marker .marker-head {
      background: var(--accent-color) !important;
      box-shadow: 0 0 10px var(--accent-color) !important;
    }

    .marker-label {
      position: absolute !important;
      top: -25px !important;
      left: 0 !important;
      background: rgba(0, 0, 0, 0.5) !important;
      padding: 3px 8px !important;
      border-radius: 10px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      color: white !important;
      white-space: nowrap !important;
    }

    .day-night-indicator {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
    }

    .day-segment {
      position: absolute !important;
      top: 0 !important;
      left: 25% !important; /* 6am */
      width: 50% !important; /* 12 hours */
      height: 100% !important;
      background: linear-gradient(90deg, 
        rgba(255, 235, 59, 0) 0%, 
        rgba(255, 235, 59, 0.2) 20%, 
        rgba(255, 235, 59, 0.2) 80%, 
        rgba(255, 235, 59, 0) 100%) !important;
      border-radius: 3px !important;
    }

    .night-segment {
      position: absolute !important;
      top: 0 !important;
      left: 75% !important; /* 6pm */
      width: 50% !important; /* 12 hours, wraps around */
      height: 100% !important;
      background: linear-gradient(90deg, 
        rgba(108, 92, 231, 0) 0%, 
        rgba(108, 92, 231, 0.2) 20%, 
        rgba(108, 92, 231, 0.2) 80%, 
        rgba(108, 92, 231, 0) 100%) !important;
      border-radius: 3px !important;
    }

    /* Feature Controls */
    .feature-controls {
      margin-bottom: 30px !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
    }

    .control-group {
      flex: 1 !important;
      min-width: 280px !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 15px !important;
    }

    .neo-button {
      flex: 1 !important;
      min-width: 120px !important;
      height: 50px !important;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)) !important;
      border-radius: 10px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      position: relative !important;
      overflow: hidden !important;
      box-shadow: var(--neo-shadow) !important;
      transition: var(--transition) !important;
    }

    .neo-button:hover {
      transform: translateY(-3px) !important;
    }

    .neo-button:active {
      transform: translateY(0) scale(0.98) !important;
      box-shadow: var(--neo-shadow-inset) !important;
    }

    .button-icon {
      width: 20px !important;
      height: 20px !important;
      margin-right: 8px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .time-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
    }

    .now-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .copy-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .button-text {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: white !important;
    }

    .button-glow {
      position: absolute !important;
      top: 0 !important;
      left: -100% !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
      transition: 0.5s !important;
    }

    .neo-button:hover .button-glow {
      left: 100% !important;
    }

    .feature-toggle {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 10px 15px !important;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)) !important;
      border-radius: 10px !important;
      box-shadow: var(--neo-shadow) !important;
    }

    .toggle-label {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: white !important;
    }

    .neo-toggle {
      position: relative !important;
      display: inline-block !important;
      width: 50px !important;
      height: 26px !important;
    }

    .neo-toggle input {
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
    }

    .toggle-slider {
      position: absolute !important;
      cursor: pointer !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
      transition: var(--transition) !important;
      border-radius: 26px !important;
    }

    .toggle-knob {
      position: absolute !important;
      content: "" !important;
      height: 20px !important;
      width: 20px !important;
      left: 3px !important;
      bottom: 3px !important;
      background-color: white !important;
      transition: var(--transition) !important;
      border-radius: 50% !important;
    }

    input:checked + .toggle-slider {
      background-color: var(--primary-color) !important;
    }

    input:checked + .toggle-slider .toggle-knob {
      transform: translateX(24px) !important;
    }

    /* Activity Suggestion */
    .activity-suggestion {
      margin-bottom: 30px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-radius: var(--border-radius) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: var(--card-shadow) !important;
      padding: 20px !important;
    }

    .suggestion-header {
      margin-bottom: 20px !important;
      text-align: center !important;
    }

    .suggestion-title {
      font-size: 18px !important;
      font-weight: 600 !important;
      margin-bottom: 5px !important;
    }

    .suggestion-subtitle {
      font-size: 14px !important;
      color: rgba(255, 255, 255, 0.7) !important;
    }

    .suggestion-cards {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
    }

    .suggestion-card {
      flex: 1 !important;
      min-width: 250px !important;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)) !important;
      border-radius: 10px !important;
      padding: 15px !important;
      position: relative !important;
      box-shadow: var(--neo-shadow) !important;
      transition: var(--transition) !important;
    }

    .suggestion-card:hover {
      transform: translateY(-5px) !important;
    }

    .card-time-badge {
      position: absolute !important;
      top: -10px !important;
      left: 15px !important;
      background: var(--primary-color) !important;
      padding: 5px 10px !important;
      border-radius: 20px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      color: white !important;
      box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3) !important;
    }

    .est-card .card-time-badge {
      background: var(--accent-color) !important;
      box-shadow: 0 5px 15px rgba(253, 121, 168, 0.3) !important;
    }

    .card-content {
      display: flex !important;
      align-items: center !important;
      margin-top: 15px !important;
    }

    .activity-icon {
      width: 40px !important;
      height: 40px !important;
      margin-right: 15px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .morning-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8h1a4 4 0 0 1 0 8h-1'%3E%3C/path%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'%3E%3C/path%3E%3Cline x1='6' y1='1' x2='6' y2='4'%3E%3C/line%3E%3Cline x1='10' y1='1' x2='10' y2='4'%3E%3C/line%3E%3Cline x1='14' y1='1' x2='14' y2='4'%3E%3C/line%3E%3C/svg%3E") !important;
    }

    .lunch-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'%3E%3C/path%3E%3Cpath d='M7 2v20'%3E%3C/path%3E%3Cpath d='M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .activity-text {
      flex: 1 !important;
    }

    .activity-title {
      font-size: 16px !important;
      font-weight: 600 !important;
      margin-bottom: 5px !important;
    }

    .activity-description {
      font-size: 14px !important;
      color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Notification System */
    .notification-portal {
      position: fixed !important;
      bottom: 20px !important;
      right: 20px !important;
      z-index: 1000 !important;
    }

    .notification {
      display: flex !important;
      align-items: center !important;
      background: rgba(0, 0, 0, 0.8) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-radius: 10px !important;
      padding: 15px !important;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
      transform: translateY(100px) !important;
      opacity: 0 !important;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
      position: relative !important;
      overflow: hidden !important;
    }

    .notification.show {
      transform: translateY(0) !important;
      opacity: 1 !important;
    }

    .notification-icon {
      width: 24px !important;
      height: 24px !important;
      margin-right: 10px !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300cec9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .notification-message {
      font-size: 14px !important;
      color: white !important;
    }

    .notification-progress {
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      height: 3px !important;
      background: var(--success-color) !important;
      width: 100% !important;
      animation: progress 3s linear forwards !important;
      transform-origin: left !important;
    }

    @keyframes progress {
      0% { transform: scaleX(1); }
      100% { transform: scaleX(0); }
    }

    /* Supportive Content */
    .supportive-content {
      margin-top: 40px !important;
    }

    .section-title {
      font-size: 24px !important;
      font-weight: 700 !important;
      margin-bottom: 20px !important;
      background: linear-gradient(to right, var(--primary-color), var(--accent-color)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-fill-color: transparent !important;
    }

    .info-card {
      background: rgba(255, 255, 255, 0.05) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-radius: var(--border-radius) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: var(--card-shadow) !important;
      padding: 20px !important;
      margin-bottom: 30px !important;
    }

    .card-header {
      display: flex !important;
      align-items: center !important;
      margin-bottom: 15px !important;
    }

    .card-icon {
      width: 30px !important;
      height: 30px !important;
      margin-right: 15px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .card-header h3 {
      font-size: 20px !important;
      font-weight: 600 !important;
      color: white !important;
    }

    .card-body {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .card-body p {
      margin-bottom: 20px !important;
      line-height: 1.6 !important;
    }

    .dimension-facts {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
      margin-top: 20px !important;
    }

    .fact-card {
      flex: 1 !important;
      min-width: 250px !important;
      display: flex !important;
      background: rgba(0, 0, 0, 0.2) !important;
      border-radius: 10px !important;
      padding: 15px !important;
    }

    .fact-icon {
      width: 40px !important;
      height: 40px !important;
      margin-right: 15px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .pacific-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c5ce7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .eastern-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd79a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .fact-content {
      flex: 1 !important;
    }

/*     .fact-content h4 {
      font-size: 16px !important;
      font-weight: 600 !important;
      margin-bottom: 5px !important;
    } */

.fact-content h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    color: white;
}

    .fact-content p {
      font-size: 14px !important;
      margin-bottom: 5px !important;
      line-height: 1.4 !important;
    }

    .use-cases {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
      gap: 15px !important;
    }

    .use-case {
      display: flex !important;
      align-items: flex-start !important;
      background: rgba(0, 0, 0, 0.2) !important;
      border-radius: 10px !important;
      padding: 15px !important;
    }

    .use-case-icon {
      width: 24px !important;
      height: 24px !important;
      margin-right: 10px !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }

    .business-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .entertainment-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='17 2 12 7 7 2'%3E%3C/polyline%3E%3C/svg%3E") !important;
    }

    .travel-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .social-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E") !important;
    }

    .use-case-text {
      flex: 1 !important;
    }

/*     .use-case-text h4 {
      font-size: 16px !important;
      font-weight: 600 !important;
      margin-bottom: 5px !important;
    } */

.use-case-text h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    color: white;
}

    .use-case-text p {
      font-size: 14px !important;
      margin-bottom: 0 !important;
      line-height: 1.4 !important;
    }

    /* Responsive Styles */
    @media (max-width: 992px) {
      .time-warp-container {
        padding: 15px !important;
      }
      
      .warp-title {
        font-size: 24px !important;
      }
      
      .time-zone-warp {
        flex-direction: column !important;
      }
      
      .warp-animation-container {
        order: -1 !important;
        margin-bottom: 20px !important;
      }
      
      .warp-button {
        transform: rotate(90deg) !important;
      }
      
      .warp-tunnel {
        transform: rotate(90deg) !important;
      }
    }

    @media (max-width: 768px) {
      .floating-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
      }
      
      .theme-orb-container {
        align-self: flex-end !important;
      }
      
      .feature-controls {
        flex-direction: column !important;
      }
      
      .suggestion-cards {
        flex-direction: column !important;
      }
      
      .dimension-facts {
        flex-direction: column !important;
      }
      
      .use-cases {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 600px) {
      .warp-title {
        font-size: 20px !important;
      }
      
      .section-title {
        font-size: 20px !important;
      }
      
      .time-crystal {
        width: 120px !important;
        height: 120px !important;
      }
      
      .result-time {
        font-size: 20px !important;
      }
      
      .dimension-orb {
        width: 150px !important;
        height: 150px !important;
      }
    }

    @media (max-width: 400px) {
      .zone-card-inner {
        padding: 15px !important;
      }
      
      .time-crystal {
        width: 100px !important;
        height: 100px !important;
      }
      
      .dimension-orb {
        width: 120px !important;
        height: 120px !important;
      }
    }