/* Site custom styles for RAID project (2024/2025 modern look) – Black & Green theme */
:root {
  /* Core palette - Dark Mode (Default) */
  --bg: #0b0f0e;
  --card: #121715;
  --text: #e6ffe6;
  --muted: #a6d8b6;
  --accent1: #00c853;
  --accent2: #00e676;
  --accent3: #39ff14;
  --danger: #ff487a;
  --success: #00e676;
  --warning: #ffd166;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --nav-bg: rgba(11,15,14,.7);
  --border-color: rgba(0,230,118,.15);
  --card-glass-bg: linear-gradient(180deg, rgba(18,23,21,.7), rgba(18,23,21,.5));
  --hero-gradient: radial-gradient(1200px 800px at 10% -10%, rgba(0,230,118,.12), transparent 60%),
                   radial-gradient(800px 600px at 110% 10%, rgba(57,255,20,.10), transparent 60%),
                   linear-gradient(180deg, #070a09, #0b0f0e 40%, #070a09 100%);
}

[data-theme="light"] {
  --bg: #f0fdf4;
  --card: #ffffff;
  --text: #1a2e22;
  --muted: #4a6b56;
  --accent1: #00a846;
  --accent2: #00c853;
  --accent3: #00e676;
  --danger: #d32f2f;
  --success: #2e7d32;
  --warning: #f57f17;
  --shadow: 0 10px 30px rgba(0,100,50,.1);
  --nav-bg: rgba(240,253,244,.85);
  --border-color: rgba(0,200,83,.2);
  --card-glass-bg: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  --hero-gradient: radial-gradient(1200px 800px at 10% -10%, rgba(0,200,83,.08), transparent 60%),
                   radial-gradient(800px 600px at 110% 10%, rgba(0,230,118,.08), transparent 60%),
                   linear-gradient(180deg, #e8f5e9, #f0fdf4 40%, #e8f5e9 100%);
}

/* Global resets */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background: var(--hero-gradient);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Sticky top navbar */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(8px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.navbar .nav-link{color:var(--muted)}
.navbar .nav-link.active, .navbar .nav-link:hover{color:var(--accent2)}
.navbar-brand { color: var(--text) !important; }

/* Theme Toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.3s ease;
}
.theme-toggle:hover {
  background: var(--border-color);
  color: var(--accent2);
}

/* Page containers */
.section{
  padding: 72px 0;
}
.section-header{
  margin-bottom: 28px;
}
.card-glass{
  background: var(--card-glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-plain{
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Dark variant for cards — subtle green gradient to match theme */
.card-dark{
  background: linear-gradient(180deg, rgba(6,30,20,0.48), rgba(11,17,14,0.6));
  border: 1px solid var(--border-color);
  color: var(--text);
  border-radius: 12px;
}
[data-theme="light"] .card-dark {
    background: linear-gradient(180deg, rgba(232,245,233,0.6), rgba(255,255,255,0.8));
}

.card-dark .card-body{ background: transparent; padding: 1rem; }
.card-dark h3, .card-dark h4, .card-dark h5, .card-dark h6{ color: var(--text); }
.card-dark ul{ color: var(--muted); }
.card-dark .badge{ background: linear-gradient(135deg, rgba(0,200,83,.12), rgba(0,230,118,.08)); color: var(--text); border: 1px solid rgba(0,230,118,.06) }

/* Buttons */
.btn-gradient{
  border: 0;
  color: #07110a;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent1), var(--accent2), var(--accent3));
  background-size: 200% 200%;
  transition: transform .15s ease, box-shadow .15s ease, background-position .6s ease;
  box-shadow: 0 12px 24px rgba(0,230,118,.25);
}
.btn-gradient:hover{ transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 36px rgba(57,255,20,.30); }
.btn-outline-gradient{
  border: 2px solid transparent;
  color: var(--text);
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, var(--accent1), var(--accent2), var(--accent3)) border-box;
}

/* Hero */
.hero{
  position: relative;
  padding: 120px 0 80px;
}
.hero-title{
  font-size: clamp(28px, 4vw + 14px, 56px);
  font-weight: 900;
  letter-spacing: .3px;
}
.hero-sub{
  font-size: clamp(16px, 1.2vw + 10px, 22px);
  color: var(--muted);
}
.hero-art{
  position: relative;
  min-height: 320px;
}

/* Breadcrumbs */
.breadcrumb{
  --bs-breadcrumb-divider-color: rgba(230,255,230,.25);
  --bs-breadcrumb-divider: '›';
}
[data-theme="light"] .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(0,100,50,.25);
}
.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a{color:var(--muted)}
.breadcrumb .breadcrumb-item.active{color:var(--text)}

/* Sidebar panel (slide-in) */
.sidebar-toggle{
  position: fixed;
  right: 20px;
  top: 76px;
  z-index: 1100;
}
.sidebar-toggle.hidden{ display: none; }
.sidepanel{
  position: fixed;
  top: 0; right: -380px;
  width: 360px;
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px rgba(0,0,0,.35);
  transition: right .35s ease, background 0.3s ease;
  z-index: 1090;
  padding: 24px;
}
.sidepanel.open{ right: 0; }
.sidepanel h5{margin-bottom:16px}
.sidepanel .badge{ background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #000; }
.sidepanel .muted{ color: var(--muted); }
.sidepanel .close-x{ position:absolute; right:16px; top:12px; cursor:pointer; opacity:.8 }

/* Floating AI assistant bubble */
.assistant-bubble{
  position: fixed;
  right: 20px; bottom: 24px;
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #fff 0%, #fff 8%, transparent 9%), linear-gradient(135deg, var(--accent2), var(--accent1));
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer; z-index: 1050;
  animation: floaty 4s ease-in-out infinite;
}
.assistant-panel{
  position: fixed; right: 20px; bottom: 96px; width: min(420px, 90vw);
  background: var(--card); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow);
  overflow: hidden; display: none; z-index:1050;
}
.assistant-panel.open{ display:block }
.assistant-header{ padding:12px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border-color)}
.assistant-body{ max-height: 360px; overflow:auto; padding: 12px 12px 0 }
.assistant-input{ display:flex; gap: 8px; padding: 12px; border-top:1px solid var(--border-color) }
.msg{ padding:10px 12px; margin:8px 0; border-radius:12px; max-width:85% }
.msg.user{ background: rgba(0,230,118,.12); margin-left:auto; border:1px solid rgba(0,230,118,.35); color: var(--text); }
.msg.bot{ background: rgba(0,200,83,.12); border:1px solid rgba(0,200,83,.35); color: var(--text); }

/* SVG and animation helpers */
.svg-board{ width:100%; height: 260px; }
.disk{ fill: var(--card); stroke: var(--border-color); stroke-width:1; }
.disk.active{ fill: url(#gradActive) }
.block{ fill: url(#gradBlock); }
.block.data{ fill: url(#gradBlock); }
.block.parity{ fill: rgba(255,209,102,.9); }
.block.parity2{ fill: rgba(255,159,26,.9); }
.block.mirror{ fill: #26c6da; }
.block.idle{ fill: transparent; stroke: var(--muted); stroke-dasharray:4 3; }
@keyframes floaty{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }
.fade-in{ animation: fadeIn .6s ease both }
.slide-up{ animation: slideUp .5s ease both }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{ transform: translateY(10px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

/* Forms */
.form-control, .form-select{ background: var(--bg); border:1px solid var(--border-color); color:var(--text) }
.form-control:focus, .form-select:focus{ border-color: var(--accent2); box-shadow: 0 0 0 0.25rem rgba(0,230,118,.15); background: var(--bg); color: var(--text); }

/* Utility chips */
.badge-soft{ background: rgba(0,230,118,.10); color:var(--text); border: 1px solid var(--border-color) }
.stat{ display:flex; align-items:center; gap:8px; padding:8px 12px; background: rgba(0,230,118,.07); border: 1px solid var(--border-color); border-radius: 10px }

/* Small helper for hero/notes that should match the site's muted green theme */
.hero-note{ color: var(--muted) !important; }

/* Responsive tweaks */
@media (max-width: 576px){
  .hero{ padding-top: 88px }
  .sidebar-toggle{ top: 66px }
}


/* Accordion dark theme overrides (FAQ) */
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--border-color);
  --bs-accordion-color: var(--text);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--text);
  --bs-accordion-active-bg: rgba(0,230,118,.08);
  --bs-accordion-btn-focus-border-color: rgba(0,230,118,.35);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0,230,118,.15);
  --bs-accordion-icon-color: var(--muted);
  --bs-accordion-icon-active-color: var(--accent2);
}
.accordion-item{ background: transparent; border: 1px solid var(--border-color); border-radius: 12px }
.accordion-button{ background: transparent; color: var(--text) }
.accordion-button:not(.collapsed){ color: var(--text); background: linear-gradient(180deg, rgba(18,23,21,.60), rgba(18,23,21,.35)); border-bottom: 1px solid var(--border-color) }
[data-theme="light"] .accordion-button:not(.collapsed) { background: linear-gradient(180deg, rgba(232,245,233,.60), rgba(232,245,233,.35)); }
.accordion-button:focus{ box-shadow: 0 0 0 0.25rem rgba(0,230,118,.15) }
.accordion-button::after{ filter: invert(1) brightness(1.4); opacity: .85 }
[data-theme="light"] .accordion-button::after { filter: none; opacity: 0.6; }
.accordion-body{ color: var(--muted) }

/* Scroll to Top */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  background: var(--card);
  border: 1px solid var(--border-color);
  color: var(--accent2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1040;
}
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: var(--border-color);
  transform: translateY(-4px);
}

/* Page Transitions */
body.fade-out {
  opacity: 0;
}