/* Right Pick Advisors - Shared Styles */
:root{
  --bg:#061422; --text:#eaf0f7; --muted:#a9b6c9; --line:rgba(255,255,255,.08);
  --card:#0b1f34cc; --radius:18px; --container:1200px;
}

/* Reset and Base Styles */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none} 
img{max-width:100%;display:block}

/* Typography */
h1{font-family:'Roboto Slab',serif;font-size:clamp(36px,6.3vw,84px);font-weight:800;line-height:1.06;color:#fff;margin-bottom:10px;text-shadow:0 3px 10px rgba(0,0,0,.35)}
h2{font-family:'Allura',cursive;font-size:42px;text-align:center;margin-bottom:8px}
h3{font-size:28px;margin-bottom:10px;font-weight:700}
.script{font-family:'Allura',cursive;font-size:clamp(28px,4.6vw,46px);color:#cfe2ff}

/* Navigation */
.topbar{position:fixed;inset:0 0 auto 0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav{max-width:var(--container);margin:0 auto;padding:14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:#eaf0f7}
.brand-badge{width:36px;height:36px;border-radius:10px;border:1px solid #2a3d57;color:#cbd8ea;display:grid;place-items:center;background:#0a1c31}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:#d7e6ff;opacity:.95;font-weight:600;position:relative;padding-bottom:4px;transition:all .2s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#89b6ff;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover{opacity:1;color:#fff} 
.nav-links a:hover::after{transform:scaleX(1)}

/* Mobile Navigation */
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px;z-index:1001}
.nav-toggle span{width:24px;height:2px;background:#d7e6ff;transition:all .3s ease;display:block}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}

/* Mobile Menu */
@media (max-width:768px){
  .nav-toggle{display:flex !important}
  .nav-links{position:fixed;top:0;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;padding:20px;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;z-index:1000;max-height:100vh;overflow-y:auto;padding-top:80px}
  .nav-links.active{transform:translateY(0) !important;opacity:1 !important;visibility:visible !important}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:center;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-links a:last-child{border-bottom:none}
}

/* Content text wrapping and overflow fixes */
.content article div {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.content article p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Prevent long text from overflowing */
.content article * {
  max-width: 100%;
  overflow-wrap: break-word;
}
.alert { padding: 16px; border-radius: 8px; margin-bottom: 16px; border-left: 4px solid; }
.alert-error { background: rgba(239, 68, 68, 0.1); border-left-color: #ef4444; color: #ef4444; }
.alert-success { background: rgba(16, 185, 129, 0.1); border-left-color: #10b981; color: #10b981; }
.alert-info { background: rgba(127, 182, 255, 0.1); border-left-color: #7fb6ff; color: #7fb6ff; }

/* Table styles for admin */
.table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { background: var(--card); font-weight: 600; color: #fff; }
.table td { color: var(--muted); }
.table tr:hover { background: rgba(255, 255, 255, 0.02); }

/* Status badges */
.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.status-published { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.status-draft { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.status-archived { background: rgba(107, 114, 128, 0.2); color: #6b7280; }

/* Category badges */
.category-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(127, 182, 255, 0.2); color: #7fb6ff; }

/* Admin form styles */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #fff; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: 14px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #7fb6ff; box-shadow: 0 0 0 3px rgba(127, 182, 255, 0.1); }

/* Admin action buttons */
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-danger { background: #ef4444; color: #fff; border: 1px solid #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-warning { background: #f59e0b; color: #fff; border: 1px solid #f59e0b; }
.btn-warning:hover { background: #d97706; border-color: #d97706; }

.form-group input[type="number"],
.form-group input[type="range"] {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input[type="number"]:focus,
.form-group input[type="range"]:focus {
  outline: none;
  border-color: #7fb6ff;
  box-shadow: 0 0 0 3px rgba(127, 182, 255, 0.1);
}

.form-group input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
}

.form-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #7fb6ff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-group input[type="range"]::-webkit-slider-thumb:hover {
  background: #5a9bff;
  transform: scale(1.1);
}

.form-group input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #7fb6ff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

.form-group input[type="range"]::-moz-range-thumb:hover {
  background: #5a9bff;
  transform: scale(1.1);
}

/* Calculator Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

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

@media (max-width: 768px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Calculator Cards */
.calculator-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.3s ease;
}

.calculator-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Chart Container */
.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
  margin-top: 16px;
}

/* Results Display */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.result-item {
  background: rgba(127, 182, 255, 0.1);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(127, 182, 255, 0.2);
}

.result-item h4 {
  margin: 0 0 8px 0;
  color: #7fb6ff;
  font-size: 14px;
  font-weight: 600;
}

.result-item p {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

/* Responsive Calculator Layout */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .calculator-card {
    padding: 16px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .result-item {
    padding: 12px;
  }
  
  .result-item p {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .grid-3,
  .grid-4 {
    gap: 12px;
  }
  
  .calculator-card {
    padding: 12px;
  }
  
  .form-group input[type="number"] {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Smooth scrolling for calculator auto-scroll */
html {
  scroll-behavior: smooth;
}

/* Enhanced mobile responsiveness for calculators */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
.card { 
    padding: 16px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .form-group input[type="number"] {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .form-group input[type="range"] {
    height: 8px;
  }
  
  .form-group input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  
  .form-group input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}

/* Auto-scroll animation */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calculator-card {
  animation: slideInFromTop 0.5s ease-out;
}

/* Enhanced chart responsiveness */
.chart-container {
  position: relative;
  height: 350px;
  width: 100%;
  margin-top: 16px;
  padding: 10px;
}

.chart-container canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 768px) {
  .chart-container {
    height: 300px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .chart-container {
    height: 250px;
    padding: 5px;
  }
}

/* Real-time input feedback */
.form-group input:focus {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

.form-group input[type="range"]:active {
  transform: scale(1.05);
  transition: transform 0.1s ease;
}

/* Hero Section */
.hero-wrap{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;text-align:center;padding-top:70px;overflow:hidden;background:var(--bg)}
.hero-glow{position:absolute;inset:auto 0 0 0;top:22%;width:80%;height:56%;margin-inline:auto;z-index:-1;background:radial-gradient(40% 60% at 50% 40%, rgba(127,182,255,.06), transparent 60%);filter:blur(8px)}
#candles,#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;will-change:transform}
.hero{z-index:1;max-width:min(var(--container),92vw);padding:90px 12px 72px;margin:0 auto;word-wrap:break-word;overflow-wrap:break-word}
.hero h1{word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;line-height:1.1}
.hero-sub{margin-top:18px;font-size:17px;color:var(--muted)}
.typewriter{border-right:2px solid #cfe2ff;padding-right:2px;white-space:nowrap;overflow:hidden;display:inline-block;min-height:1em}
.hero-ctas{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:12px;font-weight:600;border:1px solid var(--line);background:transparent;color:#eaf0f7;transition:transform .2s ease,box-shadow .2s ease}
.btn-primary{background:#ffffff;color:#061422} 
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.38)}

.btn-outline-gradient{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;color:#eaf0f7;font-weight:700;background:transparent}
.btn-outline-gradient::before{content:"";position:absolute;inset:0;border-radius:12px;padding:1px;background:linear-gradient(90deg,#7fb6ff,#b07fff);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.btn-outline-gradient:hover{transform:translateY(-2px)}

/* Sections */
.section{padding:78px 16px;background:var(--bg)} 
.container{max-width:var(--container);margin:0 auto}
.section .muted-center{color:var(--muted);text-align:center;margin-bottom:34px}

/* Content Layout */
.content{padding:100px 16px 78px;background:var(--bg)}
.content .container{max-width:var(--container);margin:0 auto}
.content h1{font-size:clamp(32px,5vw,56px);margin-bottom:20px}
.content h2{font-size:clamp(24px,3.5vw,36px);margin-bottom:16px;text-align:left}
.content p{color:var(--muted);line-height:1.7;margin-bottom:20px}
.content ul, .content ol{color:var(--muted);line-height:1.7;margin-bottom:20px;padding-left:20px}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);padding:32px;border:1px solid var(--line);margin-bottom:24px}
.card h3{color:#fff;margin-bottom:16px}
.card p{color:var(--muted);margin-bottom:16px}

/* Forms */
.form-group{margin-bottom:24px}
.form-group label{display:block;color:#eaf0f7;font-weight:600;margin-bottom:8px}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);font-size:16px;
  transition:border-color .2s ease, background .2s ease
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;border-color:#7fb6ff;background:rgba(255,255,255,.08)
}
.form-group textarea{min-height:120px;resize:vertical}

/* Services Layout */
.feature{
  display:flex;align-items:center;gap:24px;
  margin:36px 0;
}
.feature.reverse{flex-direction:row-reverse}

.feature-media{
  flex:1.1; display:flex; align-items:center; justify-content:center;
}
.feature-media .frame{
  width:min(520px, 90%);
  border-radius:20px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-media .frame::before{content:none}

.feature-media img{
  width:100%; height:auto; display:block;
  object-fit:contain;
  aspect-ratio:auto;
  transform:translateZ(0);
  filter:saturate(1.12) contrast(1.02);
}
.feature-media:hover .frame{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(0,0,0,.45);
}

.feature-body{flex:1;min-width:280px}
.feature-body h3{font-size:28px;margin-bottom:10px;font-weight:700}
.feature-body p{color:var(--muted);margin-bottom:18px}

/* Grid Layouts */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}
.grid-4{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}

/* Tables */
.table{width:100%;border-collapse:collapse;margin:24px 0}
.table th, .table td{padding:16px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:rgba(255,255,255,.05);color:#eaf0f7;font-weight:600}
.table td{color:var(--muted)}

/* Footer */
footer{background:linear-gradient(135deg, rgba(127,182,255,.10), rgba(127,182,255,0) 40%),linear-gradient(315deg, rgba(180,127,255,.10), rgba(180,127,255,0) 45%),var(--bg);padding:64px 16px 36px;margin-top:8px}
.footer-wrap{max-width:var(--container);margin:0 auto}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;column-gap:40px;row-gap:28px;align-items:start}
.f-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.f-mission{font-size:clamp(20px,2.6vw,28px);font-weight:600;line-height:1.35;color:#eaf3ff;margin-bottom:18px}
.f-contact{display:grid;gap:12px;margin-top:10px}
.f-row{display:flex;gap:10px;align-items:flex-start;color:var(--muted)} 
.f-ico{width:22px;height:22px;flex:0 0 22px;opacity:.9}
.f-head{font-weight:800;color:#eaf0f7;font-size:20px;margin-bottom:16px}
.f-links{display:grid;gap:10px} 
.f-links a{color:#b8c6da} 
.f-links a:hover{color:#fff}
.f-divider{height:1px;background:var(--line);margin:34px 0}
.f-bottom{display:grid;gap:20px;justify-items:center;color:#8ea2bd;font-size:14px}
.disclaimer{max-width:1100px;text-align:center;line-height:1.7}
.socials{display:flex;gap:12px}
.socials a{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.02)}
.socials a:hover{background:#0e2136}

/* Admin Styles */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);padding:16px 0}
.nav-container{max-width:var(--container);margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.brand-text{font-weight:700;color:#eaf0f7;font-size:20px}
.site-main{padding-top:80px}

/* Auth Pages */
.hero-full{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 16px 40px;background:var(--bg)}
.auth-title{font-size:clamp(28px,4vw,36px);margin-bottom:8px;color:#fff}
.auth-sub{color:var(--muted);margin-bottom:24px}
.auth-card{background:var(--card);border-radius:var(--radius);padding:32px;border:1px solid var(--line);max-width:500px;width:100%}
.auth-steps{display:flex;gap:8px;justify-content:center;margin-bottom:24px}
.auth-step{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s ease}
.auth-step.active{background:#7fb6ff}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:24px}
.btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--line);padding:12px 24px;border-radius:8px;cursor:pointer;transition:all .2s ease}
.btn-secondary:hover{background:rgba(255,255,255,.05);color:#fff}

/* Enhanced Responsive Design */
@media (max-width:1200px){
  .container{max-width:960px}
  .grid-4{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}
}
@media (max-width:1100px){
  .feature-media .frame{width:min(460px, 92%)}
  .grid-3{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}
}
@media (max-width:980px){
  .feature,.feature.reverse{flex-direction:column;text-align:center}
  .feature-media .frame{width:min(520px, 94%)}
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}
  .hero{padding:60px 12px 40px}
}
@media (max-width:768px){
  .nav{padding:12px 16px}
  .brand{font-size:16px}
  .brand-badge{width:32px;height:32px;font-size:14px}
  .hero{padding:40px 12px 30px;min-height:calc(100vh - 80px)}
  .hero h1{font-size:clamp(24px,8vw,48px);line-height:1.2;word-break:break-word}
  .content{padding:80px 12px 60px}
  .section{padding:60px 12px}
  .grid{grid-template-columns:1fr !important}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .card{padding:20px}
  .auth-card{padding:24px}
}
@media (max-width:680px){
  .f-top{grid-template-columns:1fr 1fr}
  .nav-links{gap:16px}
  .hero-ctas{flex-direction:column;align-items:center}
  .btn{width:100%;max-width:280px}
  .form-actions{flex-direction:column}
  .btn-secondary,.btn-primary{width:100%}
}
@media (max-width:520px){
  .feature-media .frame{width:88%; border-radius:16px}
  .content{padding:70px 8px 50px}
  
/* Responsive improvements for content pages */
@media (max-width: 768px) {
  .content {
    padding: 80px 12px 60px;
  }
  
  .content .container {
    max-width: 100%;
  }
  
  /* Individual content pages */
  .content article {
    padding: 20px;
  }
  
  .content article h1 {
    font-size: 24px;
    line-height: 1.3;
  }
  
  .content article header {
    margin-bottom: 1.5rem;
  }
  
  .content article header > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  /* Back button */
  .content .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Related content grid */
  .content .grid-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Content footer buttons */
  .content footer > div {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
/* Profile page specific styles */
.profile-avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #7fb6ff, #b07fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  font-weight: bold;
}

.profile-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.profile-stat {
  text-align: center;
}

.profile-stat h3 {
  margin-bottom: 0.5rem;
}

.profile-stat p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 768px) {
  .profile-stats {
    gap: 1rem;
  }
  
/* AMS page specific styles */
.ams-step {
  background: rgba(127, 182, 255, 0.1);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #7fb6ff;
  margin-bottom: 1rem;
}

.ams-step h3 {
  margin-bottom: 1rem;
  color: #7fb6ff;
}

.ams-step p {
  margin: 0;
  line-height: 1.6;
}

/* Responsive AMS grid */
@media (max-width: 768px) {
  .ams-process-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .ams-step {
    padding: 1rem;
  }
  
.brand {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}

.brand img {
  height: 40px;
  width: auto;
  margin-right: 12px;
  transition: transform 0.2s ease;
}

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

/* Responsive brand logo */
@media (max-width: 768px) {
  .brand {
    font-size: 16px;
  }
  
  .brand img {
    height: 32px;
    margin-right: 8px;
  }
}

@media (max-width: 520px) {
  .brand {
    font-size: 14px;
  }
  
/* Footer logo styling */
.f-brand img {
  height: 32px;
  width: auto;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}

.f-brand img:hover {
  transform: scale(1.05);
}

/* Footer contact styling */
.f-contact .f-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.f-contact .f-row:last-child {
  margin-bottom: 0;
}

.f-ico {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
}

.f-contact span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

/* Responsive footer logo */
@media (max-width: 768px) {
  .f-brand img {
    height: 28px;
    margin-bottom: 8px;
  }
}

@media (max-width: 520px) {
  .f-brand img {
    height: 24px;
    margin-bottom: 6px;
  }
  
  .f-contact span {
    font-size: 13px;
  }
}

/* Mutual Funds page specific styles */
.fund-card {
  text-align: center;
  transition: transform 0.2s ease;
}

.fund-card:hover {
  transform: translateY(-2px);
}

.fund-price {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.fund-change {
  font-weight: bold;
  font-size: 16px;
}

.fund-change-positive {
  color: #10b981;
}

.fund-change-negative {
  color: #ef4444;
}

.fund-details {
  font-size: 12px;
  color: var(--muted);
}

.fund-details div {
  margin-bottom: 0.25rem;
}

/* Chart container */
.chart-container {
  position: relative;
  height: 400px;
  margin: 1rem 0;
}

/* Fund table responsive */
.fund-table-container {
  overflow-x: auto;
  margin: 1rem 0;
}

/* Responsive mutual funds page */
@media (max-width: 768px) {
  .fund-price {
    font-size: 24px;
  }
  
  .fund-change {
    font-size: 14px;
  }
  
  .chart-container {
    height: 300px;
  }
  
  .fund-table-container {
    font-size: 14px;
  }
  
  .fund-table-container th,
  .fund-table-container td {
    padding: 8px 4px;
  }
}

@media (max-width: 520px) {
  .fund-price {
    font-size: 20px;
  }
  
  .chart-container {
    height: 250px;
  }
  
/* Search form styles */
.search-form {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.search-input input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.search-input input:focus {
  outline: none;
  border-color: #7fb6ff;
  box-shadow: 0 0 0 3px rgba(127, 182, 255, 0.1);
}

.search-results {
  margin-bottom: 2rem;
}

.search-fund-details {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.search-fund-info {
  flex: 1;
  min-width: 200px;
}

.search-fund-stats {
  flex: 1;
  min-width: 200px;
}

.search-fund-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.search-fund-chart {
  position: relative;
  height: 400px;
}

/* Resources page specific styles */
.resources-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.resource-count {
  background: linear-gradient(135deg, #7fb6ff, #66e0d6);
  color: #061422;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.resource-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: all 0.2s ease;
}

.resource-item:last-child {
  border-bottom: none;
}

.resource-item:hover {
  background: rgba(127, 182, 255, 0.05);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

.resource-item a {
  color: #7fb6ff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.resource-item a:hover {
  color: #66e0d6;
}

.resource-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.additional-resource {
  text-align: center;
  padding: 30px;
  transition: transform 0.2s ease;
}

.additional-resource:hover {
  transform: translateY(-2px);
}

.resource-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.contact-cta {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 40px;
  text-align: center;
  margin-top: 60px;
}

.contact-cta h2 {
  margin-bottom: 16px;
}

.contact-cta p {
  color: var(--muted);
  margin: 16px 0 24px;
}

.contact-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive search */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .resources-card {
    margin-bottom: 20px;
  }
  
  .contact-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-buttons .btn {
    width: 100%;
    max-width: 280px;
  }
}
  
  .search-input {
    min-width: 100%;
  }
  
  .search-fund-details {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .search-fund-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .search-fund-chart {
    height: 300px;
  }
}

@media (max-width: 520px) {
  .search-fund-chart {
    height: 250px;
  }
}
  .section{padding:50px 8px}
  .card{padding:16px}
  .auth-card{padding:20px}
  .nav{padding:10px 12px}
  .brand{font-size:14px}
  .brand-badge{width:28px;height:28px;font-size:12px}
  .f-top{grid-template-columns:1fr}
  .f-head{font-size:18px}
  .f-links{gap:8px}
}

/* Utility Classes */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}

/* Admin Contact Modal Styles */
#messageModal {
  backdrop-filter: blur(10px);
}

#messageModal .modal-content {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

#messageModal .modal-header {
  border-bottom: 1px solid var(--line) !important;
}

#messageModal .modal-title {
  color: var(--text) !important;
}

#messageModal .close {
  color: var(--muted) !important;
  transition: color 0.3s ease;
}

#messageModal .close:hover {
  color: var(--text) !important;
}

/* Message box styling */
.message-box {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
}

.message-box p {
  color: var(--text) !important;
  margin: 0 !important;
  white-space: pre-wrap !important;
  line-height: 1.7 !important;
}