:root {
      --bg-primary: #0a0b14;
      --bg-secondary: #1a1d29;
      --bg-tertiary: #252937;
      --bg-glass: rgba(255, 255, 255, 0.02);
      --text-primary: #f8fafc;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --accent: #06d6a0;
      --accent-hover: #05c794;
      --accent-secondary: #118df0;
      --accent-secondary-hover: #0f7ce0;
      --danger: #ff6b6b;
      --border: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(255, 255, 255, 0.16);
      --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.15);
      --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.25);
      --gradient-primary: linear-gradient(135deg, #06d6a0 0%, #0d9488 100%);
      --gradient-secondary: linear-gradient(135deg, #118df0 0%, #0ea5e9 100%);
      --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    * { 
      box-sizing: border-box; 
      margin: 0;
      padding: 0;
    }

    html, body { height: 100%; }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: 
        radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 226, 0.15) 0%, transparent 50%),
        var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
      animation: fadeIn 0.8s ease-out;
    }

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

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

    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    @keyframes glow {
      0%, 100% { box-shadow: 0 0 20px rgba(6, 214, 160, 0.3); }
      50% { box-shadow: 0 0 30px rgba(6, 214, 160, 0.6); }
    }

    /* Header */
    header {
      padding: 2rem 1.25rem;
      display: flex; 
      align-items: center; 
      justify-content: center;
      position: relative;
      animation: slideUp 0.6s ease-out;
    }

    .brand {
      display: inline-flex; 
      gap: 1rem; 
      align-items: center;
      font-weight: 700; 
      font-size: 1.5rem;
      letter-spacing: -0.025em;
      position: relative;
    }

    .badge {
      background: var(--gradient-primary);
      -webkit-background-clip: text; 
      background-clip: text; 
      color: transparent;
      font-size: 2rem; 
      line-height: 1;
      display: inline-block;
      animation: pulse 2s infinite;
    }

    /* Main Container */
    .container {
      max-width: 1200px; 
      margin: 0 auto; 
      padding: 0 1.25rem 4rem;
      display: grid; 
      grid-template-columns: 1.2fr 0.8fr; 
      gap: 2rem;
      animation: slideUp 0.8s ease-out 0.2s both;
    }

    @media (max-width: 968px) {
      .container { 
        grid-template-columns: 1fr; 
        gap: 1.5rem;
      }
    }

    /* Cards */
    .card {
      background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%),
        var(--bg-secondary);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow-lg);
      padding: 2rem;
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg), 0 0 40px rgba(6, 214, 160, 0.1);
      border-color: var(--border-hover);
    }

    .card:first-child {
      animation: slideInLeft 0.6s ease-out 0.3s both;
    }

    .card:last-child {
      animation: slideInRight 0.6s ease-out 0.4s both;
    }

    /* Typography */
    .title { 
      font-size: 1.75rem; 
      font-weight: 700; 
      margin-bottom: 0.75rem; 
      background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.025em;
    }

    .muted { 
      color: var(--text-secondary); 
      font-size: 0.875rem; 
      margin-bottom: 1.5rem;
    }

    /* Form Elements */
    .row { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 1rem; 
      margin-bottom: 1.5rem; 
    }

    @media (max-width: 640px) { 
      .row { grid-template-columns: 1fr; } 
    }

    .field {
      position: relative;
    }

    label { 
      font-size: 0.875rem; 
      color: var(--text-muted); 
      font-weight: 500;
      margin-bottom: 0.5rem; 
      display: block;
      transition: color 0.2s ease;
    }

    .input, textarea {
      width: 100%; 
      padding: 1rem 1.25rem;
      background: rgba(255, 255, 255, 0.03);
      color: var(--text-primary);
      border: 1px solid var(--border); 
      border-radius: 16px;
      outline: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: inherit;
      font-size: 0.95rem;
      backdrop-filter: blur(10px);
    }

    .input:focus, textarea:focus {
      border-color: var(--accent);
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1);
      transform: translateY(-1px);
    }

    .input:focus + label, textarea:focus + label {
      color: var(--accent);
    }

    textarea { 
      min-height: 100px; 
      resize: vertical;
      font-family: inherit;
    }

    /* Message Field */
    .message-field {
      margin-bottom: 1.5rem;
    }

    /* Buttons */
    .actions { 
      display: flex; 
      gap: 0.75rem; 
      flex-wrap: wrap; 
      margin-bottom: 1.5rem; 
    }

    .btn {
      appearance: none; 
      border: 0; 
      border-radius: 50px; 
      padding: 0.875rem 1.5rem;
      color: white; 
      font-weight: 600; 
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex; 
      align-items: center; 
      gap: 0.5rem; 
      text-decoration: none;
      position: relative;
      overflow: hidden;
      min-width: 140px;
      justify-content: center;
      font-family: inherit;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      transform: translate(-50%, -50%);
    }

    .btn:hover::before {
      width: 300px;
      height: 300px;
    }

    .btn:active { 
      transform: translateY(1px) scale(0.98); 
    }

    .btn-primary { 
      background: var(--gradient-primary);
      box-shadow: 0 4px 20px rgba(6, 214, 160, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(6, 214, 160, 0.4);
      animation: glow 2s infinite;
    }

    .btn-secondary { 
      background: var(--gradient-secondary);
      box-shadow: 0 4px 20px rgba(17, 141, 240, 0.3);
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(17, 141, 240, 0.4);
    }

    .btn-ghost { 
      background: rgba(255, 255, 255, 0.05); 
      border: 1px solid var(--border); 
      color: var(--text-primary);
      backdrop-filter: blur(10px);
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: var(--border-hover);
      transform: translateY(-2px);
    }

    /* Output */
    .out {
      margin-bottom: 1rem; 
      padding: 1.25rem; 
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px dashed var(--border); 
      font-size: 0.9rem; 
      word-break: break-all;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .out:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hover);
    }

    .out a { 
      color: var(--accent-secondary); 
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .out a:hover {
      color: var(--accent-secondary-hover);
      text-decoration: underline;
    }

    /* QR Code */
    .qr-wrap {
      display: grid; 
      place-items: center; 
      padding: 2rem; 
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border); 
      min-height: 350px;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      position: relative;
    }

    .qr-wrap::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      border: 2px solid var(--border);
      border-radius: 16px;
      transform: translate(-50%, -50%);
      opacity: 0.3;
    }

    .qr-wrap canvas, .qr-wrap img {
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      animation: slideUp 0.5s ease-out;
    }

    .qr-actions { 
      display: flex; 
      justify-content: center; 
      gap: 0.75rem; 
      margin-top: 1rem; 
      flex-wrap: wrap;
    }

    /* Error */
    .error { 
      color: var(--danger); 
      font-size: 0.875rem; 
      margin-bottom: 1rem; 
      display: none;
      padding: 0.75rem 1rem;
      background: rgba(255, 107, 107, 0.1);
      border: 1px solid rgba(255, 107, 107, 0.2);
      border-radius: 12px;
      animation: slideUp 0.3s ease-out;
    }

    /* Footer */
    footer {
      text-align: center; 
      color: var(--text-muted); 
      font-size: 0.875rem; 
      padding: 2rem 1.25rem;
      animation: fadeIn 1s ease-out 0.8s both;
    }

    .tip { 
      font-size: 0.8rem; 
      color: var(--text-muted); 
      margin-top: 1rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 12px;
      border-left: 3px solid var(--accent);
    }

    .tip code {
      background: rgba(255, 255, 255, 0.1);
      padding: 0.2rem 0.4rem;
      border-radius: 6px;
      font-size: 0.85rem;
      color: var(--accent);
    }

    /* Country Selector Styles */
.country-selector {
  margin-bottom: 1.5rem;
  position: relative;
  overflow: visible; /* make sure dropdown isn't clipped */
}

.country-dropdown-wrapper { position: relative; }
.country-search { position: relative; }
.country-search::after {
  content: '🔍';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.5;
}

/* SOLID dropdown: no blur, solid bg, high z-index */
.country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1e1e2f !important;            /* solid background */
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 260px;
  overflow: hidden;
  z-index: 9999;

  /* kill transparency/blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.country-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Correct ID: #country-list (not #countryList) */
#country-list.country-list {
  max-height: 248px;
  overflow-y: auto;
  padding: 0.5rem 0;
  background: #1e1e2f !important;            /* solid inside as well */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#country-list.country-list::-webkit-scrollbar { width: 6px; }
#country-list.country-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
#country-list.country-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

/* Items */
.country-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  color: #fff;                                /* readable on dark bg */
}
.country-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}
.country-item.selected {
  background: rgba(6, 214, 160, 0.15);
  color: var(--accent);
}
.country-flag { font-size: 1.25rem; width: 24px; text-align: center; }
.country-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.country-name { font-weight: 500; font-size: 0.9rem; }
.country-code {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
}
.no-results {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}


    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--accent);
      animation: spin 1s linear infinite;
    }

    /* Success Animation */
    .success-animation {
      animation: pulse 0.6s ease-out;
    }

    /* Mobile Responsive */
    @media (max-width: 640px) {
      .container {
        padding: 0 1rem 3rem;
      }
      
      .card {
        padding: 1.5rem;
      }
      
      .title {
        font-size: 1.5rem;
      }
      
      .actions {
        justify-content: center;
      }
      
      .btn {
        min-width: 120px;
        padding: 0.75rem 1.25rem;
      }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Focus styles for better accessibility */
    .btn:focus-visible,
    .input:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    /* Force country dropdown solid background */
#country-dropdown,
.country-dropdown,
#country-list,
.country-list {
  background: #1e1e2f !important;   /* solid dark */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 9999;
}
.country-list div {
  padding: 10px;
  cursor: pointer;
  background: #1e1e2f !important; /* solid item background */
}

.country-list div:hover {
  background: #2a2a40 !important; /* highlight on hover */
}