/* Modern Financial AI Website Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');


:root {
  --bg: #0a0e1a;
  --panel: #1a1f2e;
  --muted: #8b9bb4;
  --accent: #6366f1;
  --accent-2: #06b6d4;
  --text: #f1f5f9;
  --card: #1e293b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #0ea5e9;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: 
    linear-gradient(135deg, rgba(10, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.7) 50%, rgba(10, 23, 42, 0.8) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='bgGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%230f172a;stop-opacity:1'/%3E%3Cstop offset='50%25' style='stop-color:%231e293b;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%230f172a;stop-opacity:1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23bgGradient)'/%3E%3C!-- World Map --%3E%3Cg opacity='0.3'%3E%3C!-- North America --%3E%3Cpath d='M 150 300 Q 180 280 200 290 Q 220 300 240 310 Q 260 320 280 330 L 300 340 Q 320 350 340 360 L 360 370 Q 380 380 400 390 L 420 400 Q 440 410 460 420 L 480 430 Q 500 440 520 450 L 540 460 Q 560 470 580 480 L 600 490 Q 620 500 640 510 L 660 520 Q 680 530 700 540 L 720 550 Q 740 560 760 570 L 780 580 Q 800 590 820 600 L 840 610 Q 860 620 880 630 L 900 640 Q 920 650 940 660 L 960 670 Q 980 680 1000 690 L 1020 700 Q 1040 710 1060 720 L 1080 730 Q 1100 740 1120 750 L 1140 760 Q 1160 770 1180 780 L 1200 790' stroke='%23ff6b35' stroke-width='2' fill='none'/%3E%3C!-- Europe --%3E%3Cpath d='M 400 200 Q 420 190 440 200 Q 460 210 480 220 Q 500 230 520 240 Q 540 250 560 260 Q 580 270 600 280 Q 620 290 640 300 Q 660 310 680 320 Q 700 330 720 340 Q 740 350 760 360 Q 780 370 800 380 Q 820 390 840 400 Q 860 410 880 420 Q 900 430 920 440 Q 940 450 960 460 Q 980 470 1000 480 Q 1020 490 1040 500 Q 1060 510 1080 520 Q 1100 530 1120 540 Q 1140 550 1160 560 Q 1180 570 1200 580' stroke='%23ff6b35' stroke-width='2' fill='none'/%3E%3C!-- Asia --%3E%3Cpath d='M 800 150 Q 820 140 840 150 Q 860 160 880 170 Q 900 180 920 190 Q 940 200 960 210 Q 980 220 1000 230 Q 1020 240 1040 250 Q 1060 260 1080 270 Q 1100 280 1120 290 Q 1140 300 1160 310 Q 1180 320 1200 330' stroke='%23ff6b35' stroke-width='2' fill='none'/%3E%3C/g%3E%3C!-- Stock Chart Bars --%3E%3Cg opacity='0.4'%3E%3C!-- Bar Chart 1 --%3E%3Crect x='200' y='400' width='12' height='80' fill='%23ff6b35'/%3E%3Crect x='220' y='380' width='12' height='100' fill='%23ff6b35'/%3E%3Crect x='240' y='420' width='12' height='60' fill='%23ff6b35'/%3E%3Crect x='260' y='350' width='12' height='130' fill='%23ff6b35'/%3E%3Crect x='280' y='450' width='12' height='30' fill='%23ff6b35'/%3E%3Crect x='300' y='320' width='12' height='160' fill='%23ff6b35'/%3E%3Crect x='320' y='480' width='12' height='0' fill='%23ff6b35'/%3E%3Crect x='340' y='290' width='12' height='190' fill='%23ff6b35'/%3E%3Crect x='360' y='510' width='12' height='-30' fill='%23ff6b35'/%3E%3Crect x='380' y='260' width='12' height='220' fill='%23ff6b35'/%3E%3C!-- Bar Chart 2 --%3E%3Crect x='600' y='350' width='12' height='130' fill='%23ff8c42'/%3E%3Crect x='620' y='370' width='12' height='110' fill='%23ff8c42'/%3E%3Crect x='640' y='330' width='12' height='150' fill='%23ff8c42'/%3E%3Crect x='660' y='390' width='12' height='90' fill='%23ff8c42'/%3E%3Crect x='680' y='310' width='12' height='170' fill='%23ff8c42'/%3E%3Crect x='700' y='410' width='12' height='70' fill='%23ff8c42'/%3E%3Crect x='720' y='290' width='12' height='190' fill='%23ff8c42'/%3E%3Crect x='740' y='430' width='12' height='50' fill='%23ff8c42'/%3E%3Crect x='760' y='270' width='12' height='210' fill='%23ff8c42'/%3E%3Crect x='780' y='450' width='12' height='30' fill='%23ff8c42'/%3E%3C!-- Bar Chart 3 --%3E%3Crect x='900' y='300' width='12' height='180' fill='%23ffa559'/%3E%3Crect x='920' y='320' width='12' height='160' fill='%23ffa559'/%3E%3Crect x='940' y='280' width='12' height='200' fill='%23ffa559'/%3E%3Crect x='960' y='340' width='12' height='140' fill='%23ffa559'/%3E%3Crect x='980' y='260' width='12' height='220' fill='%23ffa559'/%3E%3Crect x='1000' y='360' width='12' height='120' fill='%23ffa559'/%3E%3Crect x='1020' y='240' width='12' height='240' fill='%23ffa559'/%3E%3Crect x='1040' y='380' width='12' height='100' fill='%23ffa559'/%3E%3Crect x='1060' y='220' width='12' height='260' fill='%23ffa559'/%3E%3Crect x='1080' y='400' width='12' height='80' fill='%23ffa559'/%3E%3C/g%3E%3C!-- Connecting Lines --%3E%3Cg opacity='0.3'%3E%3Cpolyline points='50,400 100,380 150,420 200,350 250,450 300,320 350,480 400,280 450,520 500,250 550,580 600,200 650,650 700,150 750,720 800,100 850,780 900,80 950,820 1000,60 1050,850 1100,40 1150,880' stroke='%2306b6d4' stroke-width='2' fill='none'/%3E%3Cpolyline points='50,500 100,520 150,480 200,550 250,450 300,580 350,420 400,620 450,380 500,680 550,320 600,720 650,280 700,780 750,240 800,820 850,200 900,860 950,160 1000,900 1050,120 1100,940 1150,100' stroke='%236366f1' stroke-width='2' fill='none'/%3E%3Cpolyline points='50,300 100,320 150,280 200,350 250,250 300,380 350,220 400,420 450,180 500,480 550,140 600,520 650,100 700,580 750,60 800,640 850,40 900,700 950,20 1000,760 1050,0 1100,800 1150,-20' stroke='%2310b981' stroke-width='2' fill='none'/%3E%3C/g%3E%3C!-- Data Points --%3E%3Cg opacity='0.6'%3E%3Ccircle cx='100' cy='380' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='200' cy='350' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='300' cy='320' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='400' cy='280' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='500' cy='250' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='600' cy='200' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='700' cy='150' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='800' cy='100' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='900' cy='80' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='1000' cy='60' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='1100' cy='40' r='4' fill='%2306b6d4'/%3E%3Ccircle cx='1200' cy='20' r='4' fill='%2306b6d4'/%3E%3C/g%3E%3C!-- Binary Code Overlay --%3E%3Cg opacity='0.1' font-family='monospace' font-size='12' fill='%236366f1'%3E%3Ctext x='50' y='50'%3E10101010%3C/text%3E%3Ctext x='200' y='100'%3E11001100%3C/text%3E%3Ctext x='350' y='150'%3E10110011%3C/text%3E%3Ctext x='500' y='200'%3E11010101%3C/text%3E%3Ctext x='650' y='250'%3E10100110%3C/text%3E%3Ctext x='800' y='300'%3E11011000%3C/text%3E%3Ctext x='950' y='350'%3E10101101%3C/text%3E%3Ctext x='1100' y='400'%3E11000111%3C/text%3E%3Ctext x='50' y='450'%3E10111010%3C/text%3E%3Ctext x='200' y='500'%3E11010001%3C/text%3E%3Ctext x='350' y='550'%3E10100100%3C/text%3E%3Ctext x='500' y='600'%3E11001111%3C/text%3E%3Ctext x='650' y='650'%3E10110110%3C/text%3E%3Ctext x='800' y='700'%3E11001001%3C/text%3E%3Ctext x='950' y='750'%3E10111100%3C/text%3E%3C/g%3E%3C!-- Grid Lines --%3E%3Cg stroke='%236366f1' stroke-width='1' opacity='0.05'%3E%3Cline x1='0' y1='100' x2='1200' y2='100'/%3E%3Cline x1='0' y1='200' x2='1200' y2='200'/%3E%3Cline x1='0' y1='300' x2='1200' y2='300'/%3E%3Cline x1='0' y1='400' x2='1200' y2='400'/%3E%3Cline x1='0' y1='500' x2='1200' y2='500'/%3E%3Cline x1='0' y1='600' x2='1200' y2='600'/%3E%3Cline x1='0' y1='700' x2='1200' y2='700'/%3E%3Cline x1='100' y1='0' x2='100' y2='800'/%3E%3Cline x1='200' y1='0' x2='200' y2='800'/%3E%3Cline x1='300' y1='0' x2='300' y2='800'/%3E%3Cline x1='400' y1='0' x2='400' y2='800'/%3E%3Cline x1='500' y1='0' x2='500' y2='800'/%3E%3Cline x1='600' y1='0' x2='600' y2='800'/%3E%3Cline x1='700' y1='0' x2='700' y2='800'/%3E%3Cline x1='800' y1='0' x2='800' y2='800'/%3E%3Cline x1='900' y1='0' x2='900' y2='800'/%3E%3Cline x1='1000' y1='0' x2='1000' y2='800'/%3E%3Cline x1='1100' y1='0' x2='1100' y2='800'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated Background Particles */
.background-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(99, 102, 241, 0.4);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.3);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; background: rgba(16, 185, 129, 0.4); box-shadow: 0 0 6px rgba(16, 185, 129, 0.3); }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; background: rgba(239, 68, 68, 0.4); box-shadow: 0 0 6px rgba(239, 68, 68, 0.3); }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; background: rgba(6, 182, 212, 0.4); box-shadow: 0 0 6px rgba(6, 182, 212, 0.3); }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; background: rgba(245, 158, 11, 0.4); box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; background: rgba(99, 102, 241, 0.4); box-shadow: 0 0 6px rgba(99, 102, 241, 0.3); }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; background: rgba(16, 185, 129, 0.4); box-shadow: 0 0 6px rgba(16, 185, 129, 0.3); }
.particle:nth-child(7) { left: 70%; animation-delay: 0.5s; background: rgba(239, 68, 68, 0.4); box-shadow: 0 0 6px rgba(239, 68, 68, 0.3); }
.particle:nth-child(8) { left: 80%; animation-delay: 1.5s; background: rgba(6, 182, 212, 0.4); box-shadow: 0 0 6px rgba(6, 182, 212, 0.3); }
.particle:nth-child(9) { left: 90%; animation-delay: 2.5s; background: rgba(245, 158, 11, 0.4); box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); }

@keyframes float {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.4; }
  50% { transform: translateY(-30px) scale(1.3); opacity: 0.9; }
}

/* Container and Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Navigation */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  backdrop-filter: blur(10px);
  background: rgba(26, 31, 46, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  animation: slideDown 0.6s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.topbar .brand a {
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  font-size: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.topbar .brand a:hover {
  transform: scale(1.05);
}

.navlinks {
  display: flex;
  gap: 20px;
  align-items: center;
}

.navlinks a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.navlinks a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.navlinks a:hover::before {
  left: 100%;
}

.navlinks a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.navlinks .btn-ghost {
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  font-weight: 500;
}

.navlinks .btn-ghost:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Hero Section */
.hero {
  padding: 80px 40px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.05));
  border-radius: 20px;
  margin: 40px 0;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(99, 102, 241, 0.05) 50%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

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

.hero h1 {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
  to { text-shadow: 0 0 30px rgba(99, 102, 241, 0.8); }
}

.lead {
  color: var(--muted);
  margin: 0 0 32px 0;
  font-size: 18px;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.cta {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 12px 24px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.btn-outline {
  background: transparent;
  border: 2px solid rgba(99, 102, 241, 0.3);
  color: var(--accent);
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

/* Feature Cards */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.card {
  background: rgba(30, 41, 59, 0.8);
  padding: 32px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out;
}

.card:nth-child(1) { animation-delay: 0.6s; }
.card:nth-child(2) { animation-delay: 0.8s; }
.card:nth-child(3) { animation-delay: 1s; }

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(99, 102, 241, 0.3);
}

.card h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.card h3::before {
  content: '';
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 6px;
  display: inline-block;
}

.card p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Login Center Button */
.login-center {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.btn-login-center {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 16px 32px;
  border-radius: 16px;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-login-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-login-center:hover::before {
  left: 100%;
}

.btn-login-center:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
}

/* Enhanced Login Container */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

/* Enhanced Register Container */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

/* Auth Cards */
.auth-card {
  max-width: 480px;
  width: 100%;
  padding: 48px;
  background: rgba(30, 41, 59, 0.95);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.auth-header {
  text-align: center;
  margin-bottom: 40px;
}

.auth-card h2 {
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.auth-subtitle {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

.login-form {
  margin-bottom: 32px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}

.form-group label i {
  color: var(--accent);
  font-size: 12px;
}

.form-input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background: rgba(15, 23, 42, 0.8);
}

.form-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.form-actions {
  margin-top: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.form-row .form-group {
  margin-bottom: 0;
}

.btn-login {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-register {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-login:hover::before {
  left: 100%;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
}

.btn-register::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-register:hover::before {
  left: 100%;
}

.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
}

.auth-footer {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}

.social-login {
  margin-bottom: 24px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.divider span {
  background: rgba(30, 41, 59, 0.95);
  padding: 0 16px;
  color: var(--muted);
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-social::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: left 0.5s ease;
}

.btn-social:hover::before {
  left: 100%;
}

.btn-social:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-google {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.btn-google:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}


.oauth-note {
  margin-top: 16px;
  text-align: center;
  padding: 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
}

.oauth-note small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #f59e0b;
}

.btn-social i {
  font-size: 16px;
}

.btn-google i {
  color: #ffffff;
}


.auth-actions {
  margin-bottom: 24px;
}

.btn-get-started {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 16px 32px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.btn-get-started::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-get-started:hover::before {
  left: 100%;
}

.btn-get-started:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
}

.auth-links {
  margin-top: 16px;
}

.auth-footer p {
  margin: 8px 0;
  font-size: 14px;
}

.auth-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.auth-link:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 24px;
  margin-top: 20px;
  height: calc(100vh - 200px);
  overflow: hidden;
}

.dashboard-grid .left {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

.dashboard-grid .right {
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 8px;
}

/* Custom scrollbar for left and right sections */
.dashboard-grid .left::-webkit-scrollbar,
.dashboard-grid .right::-webkit-scrollbar {
  width: 6px;
}

.dashboard-grid .left::-webkit-scrollbar-track,
.dashboard-grid .right::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dashboard-grid .left::-webkit-scrollbar-thumb,
.dashboard-grid .right::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.dashboard-grid .left::-webkit-scrollbar-thumb:hover,
.dashboard-grid .right::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

.panel {
  background: rgba(30, 41, 59, 0.8);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric {
  padding: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.05));
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.metric .number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.metric .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.news-row {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: block;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 8px;
}

.news-row:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(8px);
}

.news-row .title {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

.news-row .meta {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-row .sent {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-row.positive {
  border-left: 4px solid var(--success);
  background: rgba(16, 185, 129, 0.05);
}

.news-row.negative {
  border-left: 4px solid var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.news-row.neutral {
  border-left: 4px solid var(--warning);
  background: rgba(245, 158, 11, 0.05);
}

/* Flash Messages */
.flash-area {
  position: fixed;
  right: 20px;
  top: 100px;
  z-index: 1000;
  animation: slideInRight 0.5s ease-out;
}

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

.flash {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 12px;
  color: white;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.5s ease-out;
}

.flash.success { background: linear-gradient(135deg, var(--success), #059669); }
.flash.warning { background: linear-gradient(135deg, var(--warning), #d97706); }
.flash.danger { background: linear-gradient(135deg, var(--danger), #dc2626); }
.flash.info { background: linear-gradient(135deg, var(--info), #0284c7); }

/* Footer */
.footer {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  background: rgba(26, 31, 46, 0.5);
}

/* Utility Classes */
.muted { color: var(--muted); }

.advice {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.05));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    padding: 40px 20px;
    margin: 20px 0;
  }
  
  .hero h1 {
    font-size: 36px;
  }
  
  .cta {
    flex-direction: column;
    gap: 12px;
  }
  
  .login-center {
    margin-top: 30px;
  }
  
  .btn-login-center {
    padding: 14px 28px;
    font-size: 16px;
  }
  
  .login-container {
    min-height: 70vh;
    padding: 10px;
  }
  
  .auth-card {
    padding: 32px 24px;
    margin: 20px;
  }
  
  .auth-card h2 {
    font-size: 28px;
  }
  
  .auth-subtitle {
    font-size: 14px;
  }
  
  .form-input {
    padding: 14px 16px;
    font-size: 14px;
  }
  
  .btn-login {
    padding: 14px 20px;
    font-size: 14px;
  }
  
  .btn-social {
    padding: 12px 16px;
    font-size: 13px;
  }
  
  .btn-social i {
    font-size: 14px;
  }
  
  .btn-get-started {
    padding: 14px 24px;
    font-size: 14px;
    max-width: 250px;
  }
  
  .register-container {
    min-height: 70vh;
    padding: 10px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .btn-register {
    padding: 14px 20px;
    font-size: 14px;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .topbar {
    padding: 16px 0;
  }
  
  .navlinks {
    gap: 12px;
  }
  
  .navlinks a {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* Loading Animation */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 1s ease-in-out infinite;
}

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

/* Scroll Animations */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Content */
.hero-content {
  text-align: center;
  margin-bottom: 40px;
}

.hero h1 i {
  margin-right: 12px;
  color: var(--accent);
}

.highlight {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* Card Features */
.card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.feature-tag {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Stats Section */
.stats-section {
  margin-top: 60px;
  padding: 40px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out 1.2s both;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.stat-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.stat-content p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* Footer Enhancements */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-subtitle {
  font-size: 14px;
  opacity: 0.7;
  margin: 0;
}

/* Enhanced Card Icons */
.card h3 i {
  margin-right: 8px;
  color: var(--accent);
  font-size: 18px;
}

/* Button Icons */
.btn i, .btn-outline i {
  margin-right: 8px;
}

/* Flash Message Icons */
.flash i {
  margin-right: 8px;
}

/* Navigation Icons */
.navlinks a i {
  margin-right: 6px;
}

/* Dashboard Enhancements */
.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
}

.dashboard-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-header h1 i {
  margin-right: 12px;
  color: var(--accent);
}

.dashboard-subtitle {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}

/* Enhanced Metrics */
.metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.metric.positive {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.metric.negative {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.metric.neutral {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.metric-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.metric.positive .metric-icon {
  background: linear-gradient(135deg, var(--success), #059669);
}

.metric.negative .metric-icon {
  background: linear-gradient(135deg, var(--danger), #dc2626);
}

.metric.neutral .metric-icon {
  background: linear-gradient(135deg, var(--warning), #d97706);
}

.metric-content {
  flex: 1;
}

.metric .number {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}

.metric .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Form Enhancements */
.fetch-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.form-group label i {
  color: var(--accent);
}

.form-group input {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.form-actions {
  margin-top: 8px;
}

/* Panel Header */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.count-badge {
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Enhanced News Rows */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  background: rgba(15, 23, 42, 0.3);
}

.news-row:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(8px);
  border-color: rgba(99, 102, 241, 0.2);
}

.news-content {
  flex: 1;
}

.news-row .title {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
  font-size: 14px;
}

.news-row .title:hover {
  color: var(--accent);
}

.news-row .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}

.news-row .meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.news-row .meta i {
  font-size: 10px;
}

.news-row .sent {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.sentiment-positive {
  color: var(--success);
}

.sentiment-negative {
  color: var(--danger);
}

.sentiment-neutral {
  color: var(--warning);
}

.news-actions {
  display: flex;
  gap: 8px;
}

.btn-small {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-small:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.empty-icon {
  font-size: 48px;
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h4 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 18px;
}

.empty-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive Stats */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .stat-item {
    padding: 16px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .news-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .news-actions {
    align-self: flex-end;
  }
  
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Fetch Section Enhancements */
.fetch-section {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fetch-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fetch-section h4 i {
  color: var(--accent);
}

.api-info {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

.api-info.warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.api-info.warning small {
  color: #ef4444;
}

.api-info small {
  color: #f59e0b;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.radio-option:hover {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(99, 102, 241, 0.3);
}

.radio-option input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
}

.radio-option span {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.btn-international {
  background: linear-gradient(135deg, #10b981, #059669);
}

.btn-global {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* AI Advisor Styles */
.ai-advisor-header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
}

.ai-advisor-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.advisor-subtitle {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}

.advisor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.advisor-panel {
  background: rgba(30, 41, 59, 0.8);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out;
}

.advisor-panel.full-width {
  grid-column: 1 / -1;
}

.advisor-panel h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.advisor-panel h3 i {
  color: var(--accent);
}

/* Sentiment Analysis */
.sentiment-analysis {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sentiment-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.sentiment-card.bullish {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.sentiment-card.bearish {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.sentiment-card.neutral {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.sentiment-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.sentiment-card.bullish .sentiment-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.sentiment-card.bearish .sentiment-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.sentiment-card.neutral .sentiment-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.sentiment-content h4 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.sentiment-content p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.sentiment-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sentiment-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  width: 80px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
}

.bar-container {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.bar-fill.positive {
  background: linear-gradient(90deg, #10b981, #059669);
}

.bar-fill.neutral {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.bar-fill.negative {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.bar-value {
  width: 50px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* Risk Profile Selector */
.risk-profile-selector {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.risk-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-option {
  cursor: pointer;
  transition: all 0.3s ease;
}

.risk-option input[type="radio"] {
  display: none;
}

.risk-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.3);
  transition: all 0.3s ease;
}

.risk-option:hover .risk-content {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(15, 23, 42, 0.5);
}

.risk-option.active .risk-content {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}

.risk-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.risk-text h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.risk-text p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.risk-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Investment Suggestions */
.suggestion-overview {
  margin-bottom: 24px;
}

.overview-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.05));
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.overview-card h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.overview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.suggestion-section {
  background: rgba(15, 23, 42, 0.4);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.suggestion-section.warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.suggestion-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggestion-section h4 i {
  color: var(--accent);
}

.suggestion-section.warning h4 i {
  color: #f59e0b;
}

.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggestion-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.suggestion-list li i {
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.sectors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sector-tag {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Market Insights */
.insights-summary {
  background: rgba(15, 23, 42, 0.4);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.insights-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 16px;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.insight-section {
  background: rgba(15, 23, 42, 0.4);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.insight-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-section h4 i {
  color: var(--accent);
}

.insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.insight-list li i {
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.insights-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.insights-stats .stat-item {
  background: rgba(15, 23, 42, 0.4);
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.insights-stats .stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.insights-stats .stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stock Recommendations */
.stock-recommendations {
  margin-bottom: 24px;
}

.recommendation-summary {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.05));
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
}

.recommendation-summary h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.recommendation-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stock-card {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
}

.stock-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.stock-header {
  margin-bottom: 16px;
}

.stock-symbol {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.stock-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.stock-sector {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stock-content {
  margin-bottom: 16px;
}

.stock-description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.stock-reasoning {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}

.stock-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.risk-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.risk-badge.conservative {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.risk-badge.moderate {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.risk-badge.aggressive {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.priority-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.stock-charts h5 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.chart-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

.chart-link:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
}

.sector-breakdown {
  margin-bottom: 32px;
}

.sector-breakdown h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.sector-card {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
}

.sector-card h5 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.sector-sentiment {
  font-size: 12px;
  margin-bottom: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.sector-sentiment.positive {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.sector-sentiment.neutral {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.sector-sentiment.negative {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.sector-stocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stock-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.risk-adjusted-picks {
  margin-bottom: 24px;
}

.risk-adjusted-picks h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.risk-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.risk-category {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
}

.risk-category h5 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-stock-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mini-stock-card .stock-symbol {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

.mini-stock-card .stock-name {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Quick Actions */
.quick-actions {
  margin-top: 40px;
}

.quick-actions h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-actions h3 i {
  color: var(--accent);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.action-card {
  background: rgba(30, 41, 59, 0.8);
  padding: 20px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.action-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.action-card i {
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 12px;
}

.action-card h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.action-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Financial Guidance Styles */
.guidance-header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
}

.guidance-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.guidance-subtitle {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}

.guidance-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.guidance-panel {
  background: rgba(30, 41, 59, 0.8);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out;
}

.guidance-panel h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.guidance-panel h3 i {
  color: var(--accent);
}

.guidance-form textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.3s ease;
}

.guidance-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.sample-questions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-category h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.question-category h4 i {
  color: var(--accent);
}

.question-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.question-list li {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.question-list li:hover {
  color: var(--accent);
}

/* Guidance Response */
.guidance-response {
  background: rgba(30, 41, 59, 0.8);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
}

.response-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.response-header h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.response-header h3 i {
  color: var(--accent);
}

.question-display {
  font-size: 14px;
  color: var(--muted);
}

.response-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.response-section {
  background: rgba(15, 23, 42, 0.4);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.response-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.response-section h4 i {
  color: var(--accent);
}

.answer-text {
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.key-points-list,
.recommendations-list,
.resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.key-points-list li,
.recommendations-list li,
.resources-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.key-points-list li i {
  color: var(--success);
  margin-top: 2px;
  flex-shrink: 0;
}

.recommendations-list li i {
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.resources-list li i {
  color: var(--warning);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Tips Section */
.tips-section {
  margin-bottom: 40px;
}

.tips-section h3 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tips-section h3 i {
  color: var(--accent);
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tip-card {
  background: rgba(30, 41, 59, 0.8);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.tip-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.tip-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  margin: 0 auto 16px;
}

.tip-card h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.tip-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Disclaimer */
.disclaimer {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 20px;
}

.disclaimer-content h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.disclaimer-content p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Responsive Design for New Features */
@media (max-width: 768px) {
  .advisor-grid,
  .guidance-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .suggestions-grid,
  .insights-grid,
  .response-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .actions-grid,
  .tips-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .risk-options {
    gap: 8px;
  }
  
  .risk-content {
    padding: 12px;
  }
  
  .sentiment-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}