/* ╔══════════════════════════════════════════════════════════════╗
   ║  ANetBBS Graphite Teal Theme                                 ║
   ║  Neutral graphite + a single refined teal accent.            ║
   ║  Built for long reading sessions, not for showing off.       ║
   ╚══════════════════════════════════════════════════════════════╝ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

/* ─────────────────────────────────────────
   ROOT / GLOBAL
───────────────────────────────────────── */
:root {
  --gt-teal:      #2dd4a7;
  --gt-teal-dim:  #21a880;
  --gt-bg:        #161a1f;
  --gt-card:      #1c2127;
  --gt-text:      #e7e9ea;
  --gt-muted:     #9aa0a6;
  --gt-border:    #2b3138;
}

/* ─────────────────────────────────────────
   BODY
───────────────────────────────────────── */
body {
  background: var(--gt-bg) !important;
  color: var(--gt-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

/* ─────────────────────────────────────────
   CUSTOM SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gt-bg); }
::-webkit-scrollbar-thumb {
  background: var(--gt-border);
  border-radius: 6px;
  border: 2px solid var(--gt-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gt-teal-dim); }

/* ─────────────────────────────────────────
   TEXT SELECTION
───────────────────────────────────────── */
::selection { background: rgba(45, 212, 167, 0.28); color: #ffffff; }

/* ─────────────────────────────────────────
   HEADINGS
───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4f6f5;
}
h1 { font-weight: 800; }
.navbar-brand { font-weight: 800; color: var(--gt-teal) !important; }

/* ─────────────────────────────────────────
   NAVBAR
───────────────────────────────────────── */
.navbar {
  background: var(--gt-card) !important;
  border-bottom: 1px solid var(--gt-border) !important;
}
.navbar .nav-link { color: var(--gt-muted) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--gt-teal) !important; }

/* ─────────────────────────────────────────
   LINKS
───────────────────────────────────────── */
a { color: var(--gt-teal); text-decoration: none; }
a:hover { color: #6ee6c8; text-decoration: underline; }

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn-primary, .btn-success {
  background: var(--gt-teal) !important;
  border-color: var(--gt-teal) !important;
  color: #0b1310 !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-success:hover {
  background: #6ee6c8 !important;
  border-color: #6ee6c8 !important;
}
.btn-outline-primary {
  color: var(--gt-teal) !important;
  border-color: var(--gt-teal-dim) !important;
}
.btn-outline-primary:hover {
  background: var(--gt-teal) !important;
  color: #0b1310 !important;
}

/* ─────────────────────────────────────────
   CARDS
───────────────────────────────────────── */
.card {
  background: var(--gt-card) !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.card:hover { border-color: var(--gt-teal-dim) !important; }

/* ─────────────────────────────────────────
   FORM CONTROLS
───────────────────────────────────────── */
.form-control, .form-select {
  background: #101317 !important;
  border: 1px solid var(--gt-border) !important;
  color: var(--gt-text) !important;
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gt-teal) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 167, 0.18) !important;
}

/* ─────────────────────────────────────────
   TABLES
───────────────────────────────────────── */
.table { color: var(--gt-text); }
.table > :not(caption) > * > * {
  border-bottom-color: var(--gt-border);
  background: transparent;
}
.table-hover > tbody > tr:hover > * {
  background: rgba(45, 212, 167, 0.06) !important;
  color: var(--gt-text) !important;
}

/* ─────────────────────────────────────────
   BADGES / PILLS
───────────────────────────────────────── */
.badge.bg-primary, .badge.text-bg-primary {
  background: var(--gt-teal) !important;
  color: #0b1310 !important;
}

/* ─────────────────────────────────────────
   ALERTS
───────────────────────────────────────── */
.alert-success {
  background: rgba(45, 212, 167, 0.1) !important;
  border-color: var(--gt-teal-dim) !important;
  color: #a6f2da !important;
}
.alert-info {
  background: rgba(154, 160, 166, 0.1) !important;
  border-color: var(--gt-border) !important;
  color: var(--gt-text) !important;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer, .footer {
  background: var(--gt-card) !important;
  border-top: 1px solid var(--gt-border) !important;
  color: var(--gt-muted) !important;
}

/* ─────────────────────────────────────────
   CODE
───────────────────────────────────────── */
code, pre {
  background: #101317 !important;
  color: #8fe0c6 !important;
  border: 1px solid var(--gt-border);
  border-radius: 6px;
}