/* New visual identity overrides - UI only (no JS logic changed) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Cairo:wght@400;600;700&display=swap');

:root{
  --brand-50: #f3fbfb;
  --brand-100: #e6f7e6;
  --brand-200: #91f388;
  --brand-500: #06b623; /* teal */
  --accent: #f59e0b; /* gold */
  --bg: #0b1020; /* dark navy */
  --panel: #0f1724;
  --muted: #9aa4b2;
  --glass: rgba(255,255,255,0.04);
  --card-shadow: 0 8px 28px rgba(2,6,23,0.6);
}

/* Base */
html,body{height:100%;}
body{
  font-family: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--bg) 0%, #071029 100%);
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* favicon handled by HTML pages (do not hide) */

/* Typography */
h1,h2,h3,h4{color: #fff; letter-spacing: -0.01em;}
p,li,span{color:var(--muted);}

/* Buttons & controls */
.btn,button,input[type=button],input[type=submit]{
  background: linear-gradient(90deg, var(--brand-500), color-mix(in srgb, var(--brand-500) 70%, #0ea5a3 30%));
  color: white;
  border: none;
  padding: .6rem 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(6,182,164,0.14);
  transition: transform .18s ease, box-shadow .18s ease, opacity .12s ease;
  cursor: pointer;
}
.btn:hover{transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6,182,164,0.16)}

/* Cards and panels */
.card, .panel{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 14px; padding: 1rem; box-shadow: var(--card-shadow); border: 1px solid rgba(255,255,255,0.03);
}

/* Navigation */
nav, .navbar{background: linear-gradient(180deg, rgba(7,10,20,0.7), rgba(6,8,18,0.6));
  border-bottom: 1px solid rgba(245,158,11,0.06);
}

/* Links and highlights */
a, a:visited{color:var(--accent); text-decoration: none; transition: color .12s ease}
a:hover{color: #ffd78a}

/* Utility animations */
.fade-in{animation: fadeIn .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* subtle glow for important badges */
.glow{box-shadow: 0 6px 30px rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.12)}

/* Responsive adjustments */
@media (max-width: 768px){
  .card{padding:.75rem;border-radius:10px}
  nav .menu{gap:.5rem}
  h1{font-size:1.4rem}
}

@media (min-width: 1024px){
  body{font-size:16px}
}

/* Small helpers to avoid touching JS-driven classes */
.ui-space {gap: .75rem}
.ui-muted{color:var(--muted)}

/* Keep Tailwind-like utility compatibility by targeting common tailwind classes used in markup */
.bg-black\/80{background: linear-gradient(180deg, rgba(11,16,32,0.86), rgba(11,16,32,0.7)) !important}
.border-yellow-500\/20{border-color: rgba(245,158,11,0.2) !important}

/* Enter/exit smoothness for existing dynamic elements */
[role="region"] ol{transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease}

/* Accessibility: focus outlines */
:focus{outline: 3px solid color-mix(in srgb, var(--brand-500) 25%, transparent); outline-offset: 3px}

/* Ensure images scale nicely */
img{max-width:100%;height:auto;display:block}

/* end of theme overrides */