@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --font-t: 'Syne', sans-serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
  --c-bg: #031510;
  --c-panel: #06221b;
  --c-card: rgba(12, 59, 46, 0.45);
  --c-border: #22c55e;
  --c-accent: #f59e0b;
  --c-text: #cbd5e1;
  --c-muted: #64748b;
  --c-white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-b);
  background-color: var(--c-bg);
  color: var(--c-text);
  display: flex;
  min-height: 100vh;
}

/* Layout Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.w-full { width: 100%; }
.max-w-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* Spacing */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }
.mt-auto { margin-top: auto; }

/* Colors & Borders */
.bg-panel { background-color: var(--c-panel); }
.bg-card { background-color: var(--c-card); }
.border-r { border-right: 1px solid var(--c-border); }
.border-t { border-top: 1px solid rgba(34, 197, 94, 0.3); }
.border-green { border-color: var(--c-border); }
.border-solid { border: 1px solid rgba(34, 197, 94, 0.3); }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }

/* Typography */
.font-t { font-family: var(--font-t); }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-green { color: var(--c-border); }
.text-accent { color: var(--c-accent); }
.text-white { color: var(--c-white); }
.text-muted { color: var(--c-muted); }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.text-center { text-align: center; }

/* Components */
.sidebar { width: 280px; position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; overflow-y: auto; background: var(--c-panel); }
.main-content { margin-left: 280px; flex: 1; padding: 2rem; display: flex; flex-direction: column; min-height: 100vh;}

.nav-item {
  display: block; padding: 0.85rem 1.2rem; border-radius: 0.75rem;
  color: var(--c-text); text-decoration: none; font-family: var(--font-t);
  font-size: 0.95rem; transition: 0.3s; margin-bottom: 0.5rem;
}
.nav-item:hover, .nav-item.active {
  background: rgba(34, 197, 94, 0.15); color: var(--c-border);
}

.glass {
  background: rgba(12, 59, 46, 0.25); backdrop-filter: blur(12px);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.nt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.5rem; font-family: var(--font-t); font-size: 0.85rem;
  text-decoration: none; border-radius: 0.75rem; transition: 0.3s;
  border: 1px solid var(--c-border); color: var(--c-border); cursor: pointer;
  background: transparent;
}
.nt-btn:hover { background: var(--c-border); color: var(--c-bg); }
.nt-btn-primary { background: var(--c-border); color: var(--c-bg); font-weight: bold; }
.nt-btn-primary:hover { background: transparent; color: var(--c-border); }

/* List View Cards */
.nt-list-card {
  display: flex; gap: 1.5rem; padding: 1.5rem; margin-bottom: 1.5rem;
  transition: transform 0.3s; align-items: flex-start;
}
.nt-list-card:hover { transform: translateX(8px); border-color: var(--c-accent); }
.nt-list-card img { width: 240px; height: 140px; object-fit: cover; border-radius: 0.75rem; flex-shrink: 0; }
.nt-list-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }

/* Flip Cards */
.nt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .faq-grid { grid-template-columns: repeat(3, 1fr); } }
.flip-card { perspective: 1000px; height: 180px; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card[data-open="true"] .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.flip-card-front { background: rgba(12, 59, 46, 0.6); color: var(--c-white); font-family: var(--font-t); font-size: 1rem; border: 1px solid rgba(34, 197, 94, 0.3); }
.flip-card-back { background: var(--c-bg); color: var(--c-text); transform: rotateY(180deg); font-size: 0.9rem; border: 1px solid var(--c-accent); }

/* Basic content formatting */
.content-box p { margin-bottom: 1rem; }
.content-box ul { margin-left: 1.5rem; margin-bottom: 1rem; }
.content-box li { margin-bottom: 0.5rem; }

/* Mobile */
@media (max-width: 1024px) {
  body { flex-direction: column; }
  .sidebar { position: relative; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--c-border); padding: 1rem; }
  .main-content { margin-left: 0; padding: 1rem; }
  .nt-list-card { flex-direction: column; }
  .nt-list-card img { width: 100%; height: auto; }
  .nt-grid-3 { grid-template-columns: 1fr; }
}


.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.md\:flex-row { flex-direction: row; }
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:w-80 { width: 20rem; }
}
.flex-1 { flex: 1 1 0%; }
.overflow-hidden { overflow: hidden; }


/* Additional Missing Tailwind Classes */
.block { display: block; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.font-b { font-family: var(--font-b); }
.outline-none { outline: none; }
.outline-none:focus { outline: none; border-color: var(--c-accent); }