/* =========================================================
   Techoral – Neural Dark  |  java/qa/css/qa-styles.css
   ========================================================= */

:root {
  --bg:      #030712;
  --bg2:     #060d1a;
  --surface: #0d1424;
  --border:  rgba(99,102,241,.18);
  --border-s:rgba(255,255,255,.06);
  --purple:  #6366f1;
  --cyan:    #22d3ee;
  --grad:    linear-gradient(135deg,#6366f1,#22d3ee);
  --text:    #e2e8f0;
  --text2:   #cbd5e1;
  --muted:   #64748b;
}

body { background: var(--bg); color: var(--text); font-family: 'Segoe UI',system-ui,sans-serif; line-height: 1.8; }
h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 700; }
p { color: var(--text2); line-height: 1.85; margin-bottom: 1.2rem; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--purple); }
ul,ol { color: var(--text2); }
strong { color: var(--text); }
section { margin-bottom: 2rem; }

/* ── Article header ── */
.article-header {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--purple);
}
.article-header h1 { color: var(--text); font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; }
.article-header h2 { color: var(--cyan); font-size: 1.7rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.article-header h3 { color: var(--cyan); font-size: 1.35rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: .9rem; }
.article-header h4 { color: var(--text); font-size: 1.1rem; font-weight: 600; margin-top: 1.2rem; margin-bottom: .7rem; }

.section-header { background: var(--surface); padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: 1.5rem; border: 1px solid var(--border); }
.section-header h2 { color: var(--cyan); margin: 0; }

/* ── Navbar ── */
.navbar { background: rgba(3,7,18,.92) !important; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border) !important; box-shadow: none !important; padding: 1rem 0; }
.navbar-brand { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; }
.navbar-nav .nav-link { color: rgba(226,232,240,.85) !important; font-weight: 500; }
.navbar-nav .nav-link:hover { color: var(--cyan) !important; }
.navbar-nav .nav-item.active .nav-link { color: var(--cyan) !important; }
.navbar-toggler { border-color: rgba(99,102,241,.4); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226,232,240,.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* ── Code ── */
.code-block, pre {
  background: #080e1c !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--cyan) !important;
  border-radius: 10px !important;
  padding: 1.2rem 1.4rem !important;
  overflow-x: auto; margin: 1.3rem 0;
  font-size: .875rem; line-height: 1.7; color: var(--text2);
}
code { font-family: 'Fira Code','Consolas',monospace; color: var(--cyan) !important; background: rgba(34,211,238,.07) !important; padding: 2px 7px; border-radius: 5px; font-size: .875em; }
pre code { background: transparent !important; color: var(--text2) !important; padding: 0 !important; }

/* ── Info boxes ── */
.tip-box { background: rgba(99,102,241,.08) !important; border-left: 4px solid var(--purple) !important; border-radius: 0 10px 10px 0 !important; padding: 15px; margin: 20px 0; color: var(--text2); }
.note-box { background: rgba(251,191,36,.07) !important; border-left: 4px solid #fbbf24 !important; border-radius: 0 10px 10px 0 !important; padding: 15px; margin: 20px 0; color: var(--text2); }
.tip-box p, .note-box p { color: var(--text2) !important; margin-bottom: 0; }

/* ── Misc components ── */
.tag { display: inline-block; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25); color: var(--cyan); padding: 4px 12px; border-radius: 100px; margin-right: 8px; margin-bottom: 8px; font-size: .82rem; font-weight: 600; }
.toc { background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px; margin-bottom: 28px; }
.toc ul { list-style-type: none; padding-left: 18px; }
.toc li { margin-bottom: 8px; }
.toc a { color: var(--muted); font-size: .9rem; }
.toc a:hover { color: var(--cyan); }
.related-posts { background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 12px; margin-top: 28px; }
.related-posts a { color: var(--cyan); }
.article-image img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 1.5rem; border: 1px solid var(--border); }

/* ── Footer ── */
footer { background: var(--bg2) !important; border-top: 1px solid var(--border); color: var(--muted); padding: 2rem 0; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--cyan); }
.social-links a { font-size: 1.4rem; margin-right: 1rem; color: var(--muted); }
.social-links a:hover { color: var(--cyan); }

/* ── Utilities ── */
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--cyan) !important; }
.bg-light { background: var(--bg2) !important; }
.card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.card-title { color: var(--text) !important; }
.card-text { color: var(--muted) !important; }
.badge.bg-primary { background: rgba(99,102,241,.15) !important; color: var(--cyan) !important; border: 1px solid rgba(99,102,241,.3); border-radius: 100px; font-weight: 700; }

/* ── Popup overrides ── */
.custom-modal { background: rgba(0,0,0,.78) !important; backdrop-filter: blur(6px) !important; }
.custom-modal-content { background: #0d1424 !important; border: 1px solid rgba(99,102,241,.35) !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.7) !important; }
.custom-modal-content::before { content: '' !important; display: block !important; height: 3px !important; background: linear-gradient(90deg,#6366f1,#22d3ee) !important; }
.custom-modal-header { border-bottom: 1px solid rgba(99,102,241,.15) !important; padding: 20px 24px 16px !important; }
.custom-modal-title { background: linear-gradient(135deg,#22d3ee,#6366f1) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 700 !important; }
.custom-close-button { background: rgba(99,102,241,.1) !important; border: 1px solid rgba(99,102,241,.25) !important; border-radius: 50% !important; color: #94a3b8 !important; opacity: 1 !important; width: 32px !important; height: 32px !important; }
.custom-modal-body p { color: #94a3b8 !important; }
#subscriptionModal .form-control, .custom-modal .form-control { background: #111827 !important; border: 1px solid rgba(99,102,241,.3) !important; color: #e2e8f0 !important; border-radius: 12px !important; }
#subscriptionModal .form-control::placeholder, .custom-modal .form-control::placeholder { color: #475569 !important; }
.submit-button { background: linear-gradient(135deg,#6366f1,#22d3ee) !important; border: none !important; color: #fff !important; border-radius: 12px !important; font-weight: 700 !important; width: 100% !important; padding: .85rem 1rem !important; }
.submit-button:disabled { opacity: .55 !important; }
.subscription-status.success { background: rgba(16,185,129,.12) !important; color: #10b981 !important; border: 1px solid rgba(16,185,129,.3) !important; border-radius: 10px !important; }
.subscription-status.error { background: rgba(239,68,68,.1) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,.25) !important; border-radius: 10px !important; }

@media (max-width: 768px) {
  .article-header h1 { font-size: 1.8rem; }
  .article-header h2 { font-size: 1.45rem; }
  .article-header h3 { font-size: 1.2rem; }
}