* { font-family: 'Nunito', sans-serif; }
    
    .puzzle-bg {
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 10%, rgba(239, 68, 68, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 90%, rgba(234, 179, 8, 0.08) 0%, transparent 50%);
    }
    
    .btn-action {
      transition: all 0.3s ease;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }
    
    .btn-action:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .btn-action:focus {
      outline: 4px solid #1e40af;
      outline-offset: 4px;
    }
    
    .speech-bubble {
      position: relative;
      background: white;
      border: 3px solid #1e3a5f;
      border-radius: 24px;
      padding: 20px 28px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }
    
    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 40px;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 24px solid #1e3a5f;
    }
    
    .speech-bubble::before {
      content: '';
      position: absolute;
      bottom: -14px;
      left: 43px;
      width: 0;
      height: 0;
      border-left: 17px solid transparent;
      border-right: 17px solid transparent;
      border-top: 20px solid white;
      z-index: 1;
    }
    
    .float-animation {
      animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .heart-float {
      animation: heartFloat 2.5s ease-in-out infinite;
    }
    
    @keyframes heartFloat {
      0%, 100% { transform: translateY(0) rotate(-10deg); opacity: 1; }
      50% { transform: translateY(-15px) rotate(10deg); opacity: 0.8; }
    }
    
    .nav-link:focus {
      outline: 3px solid #1e40af;
      outline-offset: 4px;
      border-radius: 8px;
    }
    
    .speaker-btn {
      transition: all 0.2s ease;
    }
    
    .speaker-btn:hover {
      transform: scale(1.1);
    }
    
    .speaker-btn:focus {
      outline: 3px solid #1e40af;
      outline-offset: 3px;
    }

    .chat-float-btn {
      animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); }
      50% { box-shadow: 0 4px 35px rgba(59, 130, 246, 0.7); }
    }

    .content-card {
      transition: all 0.3s ease;
      animation: slideUp 0.5s ease-out forwards;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .service-item {
      transition: all 0.3s ease;
    }

    .service-item:hover {
      transform: translateX(8px);
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
    }

    .indicator-box {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #3B82F6, #1e3a5f);
      color: white;
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
    }
  

body { box-sizing: border-box; }


    .map-state {
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .map-state:hover {
      filter: brightness(1.2);
    }
    .map-state.low { fill: #FCA5A5; }
    .map-state.medium { fill: #FBBF24; }
    .map-state.high { fill: #4ADE80; }
    .map-state.no-data { fill: #E5E7EB; }
    
    .result-card {
      transition: all 0.3s ease;
      animation: slideUp 0.5s ease-out forwards;
      opacity: 0;
    }
    
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .score-badge {
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 24px;
      color: white;
    }

    .score-low { background: linear-gradient(135deg, #FCA5A5, #F87171); }
    .score-medium { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
    .score-high { background: linear-gradient(135deg, #4ADE80, #22C55E); }

    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid #E5E7EB;
      border-top: 3px solid #3B82F6;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .typing-indicator {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .typing-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: currentColor;
      animation: typingBounce 1.4s infinite;
    }

    .typing-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes typingBounce {
      0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
      }
      30% {
        transform: translateY(-10px);
        opacity: 1;
      }
    }

    .message-text {
      animation: messageSlideIn 0.3s ease-out;
    }

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



    .avatar { width: 32px; height: 32px; border-radius: 9999px; overflow: hidden; flex: 0 0 auto; }
    .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .fab-avatar { width: 40px; height: 40px; border-radius: 9999px; overflow: hidden; border: 2px solid rgba(255,255,255,.25); background: #fff; }
    .fab-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .bot-bubble { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; border-top-left-radius: 6px; padding: 12px 16px; box-shadow: 0 2px 6px rgba(0,0,0,.05); max-width: 80%; }
    .user-bubble { color: #fff; background: linear-gradient(90deg,#2563eb,#3b82f6); border-radius: 16px; border-top-right-radius: 6px; padding: 12px 16px; box-shadow: 0 4px 10px rgba(37,99,235,.25); max-width: 80%; white-space: pre-wrap; }
    .header-shadow { box-shadow: inset 0 -1px 0 rgba(255,255,255,.15); }
    .quick-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9999px; border:1px solid #cbd5e1; background:#fff; font-size:12px; font-weight:700; color:#334155; }
    .quick-btn:hover { background:#eff6ff; border-color:#93c5fd; }
    .quick-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
    .typing-dots { display:inline-flex; gap:4px; }
    .typing-dots span { width:6px; height:6px; background:#94a3b8; border-radius:9999px; display:inline-block; animation: bounce 1s infinite ease-in-out; }
    .typing-dots span:nth-child(2){ animation-delay: .15s }
    .typing-dots span:nth-child(3){ animation-delay: .3s }
    @keyframes bounce { 0%,80%,100% { transform: translateY(0) } 40% { transform: translateY(-4px) } }
    .prose p{margin:0 0 .5rem 0;line-height:1.5}
    .prose ul{margin:.5rem 0 .5rem 1.25rem;list-style:disc}
    .prose ol{margin:.5rem 0 .5rem 1.25rem;list-style:decimal}
    .prose code{background:#f1f5f9;padding:.1rem .3rem;border-radius:.35rem;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace}
    .prose pre{background:#0f172a;color:#e2e8f0;padding:.75rem;border-radius:.75rem;overflow:auto}
    .prose a{color:#2563eb;text-decoration:underline}
    .prose h1,.prose h2,.prose h3{font-weight:800;margin:.5rem 0}