/* ============================================================
   MuDefender_v2 — theme.css
   Tactical / cyberpunk WHMCS theme
   Synced with troubleshooting.html design language
   ============================================================ */

html { font-size: 17px; }
:root {
  --bg-base: #050608;
  --bg-deep: #02030a;
  --bg-panel: rgba(10, 14, 22, 0.85);
  --bg-panel-solid: #0a0e16;

  --grid-line: rgba(0, 230, 255, 0.04);
  --grid-line-bright: rgba(0, 230, 255, 0.08);

  --accent-red: #ff2d4d;
  --accent-red-glow: #ff003c;
  --accent-amber: #ffaa00;
  --accent-cyan: #00e6ff;
  --accent-cyan-glow: #00b4d8;
  --accent-green: #00ff9d;
  --accent-violet: #b14eff;

  --text-primary: #e8f4ff;
  --text-secondary: #8a9cb0;
  --text-muted: #4a5a6e;
  --text-ghost: #2a3548;

  --border-faint: rgba(0, 230, 255, 0.12);
  --border-strong: rgba(0, 230, 255, 0.35);
  --border-danger: rgba(255, 45, 77, 0.4);

  --font-display: 'Orbitron', sans-serif;
  --font-tactical: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-tactical);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}
a { color: inherit; text-decoration: none; }

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
  animation: gridDrift 40s linear infinite;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 45, 77, 0.08), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 230, 255, 0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
@keyframes gridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 40px 40px, 40px 40px; }
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 230, 255, 0.015) 3px,
    rgba(0, 230, 255, 0.015) 4px
  );
}
.scan-beam {
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow: 0 0 12px var(--accent-cyan-glow);
  pointer-events: none;
  z-index: 99;
  opacity: 0.18;
  animation: scanSweep 16s linear infinite;
}
@keyframes scanSweep {
  0% { top: -10px; }
  100% { top: 100vh; }
}
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 98;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
}

/* ============================================================
   BOOT SEQUENCE
   ============================================================ */
.boot-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.boot-overlay.done { opacity: 0; visibility: hidden; }
html.md-boot-skip .boot-overlay { display: none !important; }
.boot-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--accent-cyan);
  text-shadow: 0 0 20px var(--accent-cyan-glow), 0 0 40px var(--accent-cyan-glow);
  margin-bottom: 2rem;
  animation: bootGlitch 2s ease-out;
}
@keyframes bootGlitch {
  0%, 100% { opacity: 1; transform: translateX(0); }
  35% { opacity: 0.95; transform: translateX(-1px); }
  65% { opacity: 1; transform: translateX(1px); }
}
.boot-lines {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-secondary);
  width: min(600px, 90vw);
}
.boot-line {
  opacity: 0;
  animation: bootTypeIn 0.3s ease-out forwards;
}
.boot-line.ok::after { content: ' [ OK ]'; color: var(--accent-green); }
.boot-line.warn::after { content: ' [ WARN ]'; color: var(--accent-amber); }
.boot-line.fail::after { content: ' [ FAIL ]'; color: var(--accent-red); }
@keyframes bootTypeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.boot-progress {
  margin-top: 1.5rem;
  width: min(600px, 90vw);
  height: 2px;
  background: rgba(0, 230, 255, 0.1);
  overflow: hidden;
}
.boot-progress::before {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: bootProgress 2.4s ease-out forwards;
}
@keyframes bootProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.md-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.status-bar {
  position: relative;
  z-index: 50;
  background: rgba(2, 3, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-faint);
  padding: 0.55rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.status-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.status-group { display: flex; align-items: center; gap: 1.2rem; color: var(--text-secondary); }
.status-item { display: flex; align-items: center; gap: 0.4rem; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  animation: statusPulse 2s ease-in-out infinite;
}
.status-dot.cyan { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.status-label { color: var(--text-muted); }
.status-value { color: var(--text-primary); }
.status-link { color: var(--accent-cyan); transition: text-shadow 0.2s; }
.status-link:hover { text-shadow: 0 0 8px var(--accent-cyan); }

/* ============================================================
   PRIMARY NAV
   ============================================================ */
.md-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(2, 3, 10, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-faint);
}
.md-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.9rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.md-nav-brand { display: flex; align-items: center; }
.md-nav-brand img {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(0, 230, 255, 0.25));
  transition: transform 0.3s ease;
}
.md-nav-brand:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px rgba(0, 230, 255, 0.4));
}
.md-nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}
.md-nav-links a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.md-nav-links a:hover {
  color: var(--accent-cyan);
  border-color: var(--border-faint);
}
.md-nav-links a.cta {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: rgba(0, 230, 255, 0.05);
}
.md-nav-links a.cta:hover {
  background: rgba(0, 230, 255, 0.12);
  box-shadow: 0 0 16px rgba(0, 230, 255, 0.2);
}
.md-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-faint);
  color: var(--accent-cyan);
  width: 40px; height: 40px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 1.1rem;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 4rem 0 2rem;
  position: relative;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 45, 77, 0.08);
  border: 1px solid var(--border-danger);
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
  animation: tagBlink 6s ease-in-out infinite;
}
@keyframes tagBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.hero-tag::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 10px var(--accent-red-glow);
  animation: statusPulse 1s ease-in-out infinite;
}

.hero-tabs {
  display: inline-flex;
  border: 1px solid var(--border-faint);
  background: rgba(2, 3, 10, 0.6);
  margin-bottom: 2rem;
  padding: 4px;
  gap: 4px;
}
.hero-tab {
  background: transparent;
  border: 0;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.hero-tab .tab-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent-cyan);
  margin-right: 0.4rem;
  opacity: 0.7;
}
.hero-tab:hover { color: var(--text-primary); }
.hero-tab.active {
  background: rgba(0, 230, 255, 0.08);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent-cyan);
}
.hero-tab.active .tab-num { color: var(--accent-cyan); opacity: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-pane { display: none; }
.hero-pane.active { display: contents; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-primary) 60%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(0, 230, 255, 0.15);
}
.hero h1 .glitch-word {
  color: var(--accent-red);
  -webkit-text-fill-color: var(--accent-red);
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 12px rgba(255, 0, 60, 0.35),
    1px 0 0 rgba(0, 230, 255, 0.18),
    -1px 0 0 rgba(255, 170, 0, 0.18);
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.7;
  max-width: 560px;
}
.hero-bullets { list-style: none; margin-bottom: 1.8rem; }
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.35rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.hero-bullets li::before {
  content: '▸';
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  flex-shrink: 0;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}
.btn-primary {
  color: var(--bg-deep);
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 230, 255, 0.3);
}
.btn-primary:hover {
  background: var(--accent-green);
  border-color: var(--accent-green);
  box-shadow: 0 0 30px rgba(0, 255, 157, 0.45);
  transform: translateY(-1px);
}
.btn-ghost {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: rgba(0, 230, 255, 0.05);
}

.hero-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--border-faint);
  background: rgba(0, 230, 255, 0.03);
  margin-bottom: 1.5rem;
  width: fit-content;
}
.hero-price-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.hero-price-amount {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--accent-green);
  text-shadow: 0 0 14px rgba(0, 255, 157, 0.35);
}
.hero-price-period {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.hero-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border-faint);
}
.hero-meta strong { color: var(--accent-cyan); font-weight: 600; }

/* PROMO tag — gold accent so the offer pops out from the meta row */
.hero-meta .hero-meta-promo {
  color: #ffd24a;
  text-shadow: 0 0 6px rgba(255, 210, 74, 0.45);
  animation: heroPromoPulse 2.6s ease-in-out infinite;
}
.hero-meta .hero-meta-promo strong {
  color: #ffd24a;
  text-shadow: 0 0 6px rgba(255, 210, 74, 0.45);
}
@keyframes heroPromoPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

.hero-visual {
  position: relative;
  padding: 2rem;
}
.hero-visual img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 20px 50px rgba(0, 230, 255, 0.15));
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 230, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.hero-visual-corner {
  position: absolute;
  width: 30px; height: 30px;
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 230, 255, 0.3);
}
.hero-visual-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hero-visual-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hero-visual-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.hero-visual-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section { padding: 4rem 0; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-faint);
  padding-bottom: 1rem;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-cyan);
  letter-spacing: 0.2em;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.section-sub {
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  margin-top: -1.5rem;
  max-width: 720px;
  font-size: 1.05rem;
}

/* ============================================================
   FEATURE GRID — HUD CARDS
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  backdrop-filter: blur(10px);
  padding: 1.6rem 1.5rem 1.4rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(0, 230, 255, 0.05) 100%);
  pointer-events: none;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan-glow);
  transition: width 0.4s ease;
}
.feature-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0, 230, 255, 0.1);
}
.feature-card:hover::after { width: 100%; }
.feature-card .corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent-cyan);
}
.feature-card .corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.feature-card .corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.feature-card .corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.feature-card .corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.feature-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.9rem;
  gap: 1rem;
}
.feature-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.15em;
}
.feature-cat {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid currentColor;
  color: var(--accent-cyan);
}
.feature-cat.kernel { color: var(--accent-red); }
.feature-cat.runtime { color: var(--accent-amber); }
.feature-cat.intel { color: var(--accent-violet); }
.feature-cat.perf { color: var(--accent-green); }
.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.feature-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================
   SHOWCASE
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.showcase.reverse { direction: rtl; }
.showcase.reverse > * { direction: ltr; }
.showcase-media {
  position: relative;
  border: 1px solid var(--border-faint);
  background: var(--bg-deep);
  padding: 0.6rem;
}
.showcase-media img {
  display: block;
  width: 100%;
  height: auto;
}
.showcase-media-label {
  position: absolute;
  top: -1px; left: 1.5rem;
  background: var(--bg-deep);
  padding: 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent-cyan);
  letter-spacing: 0.2em;
  transform: translateY(-50%);
}
.showcase-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
  line-height: 1.15;
}
.showcase-text > p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.showcase-list { list-style: none; display: grid; gap: 1rem; }
.showcase-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  background: rgba(10, 14, 22, 0.4);
  border-left: 2px solid var(--border-strong);
}
.showcase-list li:hover { border-left-color: var(--accent-cyan); }
.showcase-list .li-icon { font-size: 1.2rem; line-height: 1.4; }
.showcase-list h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}
.showcase-list p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================
   SUPPORT TILES
   ============================================================ */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}
.support-tile {
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  padding: 1.8rem 1.4rem;
  position: relative;
  transition: all 0.3s ease;
}
.support-tile:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 30px rgba(0, 230, 255, 0.08);
}
.support-tile-icon {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  color: var(--accent-cyan);
  font-size: 1.3rem;
  background: rgba(0, 230, 255, 0.05);
}
.support-tile h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.support-tile p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  display: grid;
  gap: 0.8rem;
  max-width: 920px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--border-faint);
  background: var(--bg-panel);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1rem 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  transition: background 0.2s;
}
.faq-q:hover { background: rgba(0, 230, 255, 0.04); }
.faq-q .faq-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.2em;
  margin-right: 0.7rem;
  flex-shrink: 0;
}
.faq-q .faq-toggle {
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item.open .faq-q .faq-toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item.open .faq-a { max-height: 1500px; }
.faq-a-inner {
  padding: 0 1.3rem 1.3rem;
  color: var(--text-secondary);
  border-top: 1px dashed var(--border-faint);
  padding-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
.faq-a-inner p { margin-bottom: 0.7rem; }
.faq-a-inner strong { color: var(--text-primary); }
.faq-a-inner ul { margin: 0.5rem 0 0.7rem 1.2rem; }
.faq-a-inner li { margin-bottom: 0.3rem; }
.faq-a-inner code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(0, 230, 255, 0.08);
  border: 1px solid var(--border-faint);
  padding: 1px 6px;
  color: var(--accent-cyan);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-banner {
  margin-top: 2rem;
  padding: 3rem 2.5rem;
  background:
    linear-gradient(135deg, rgba(255, 45, 77, 0.06), transparent 50%),
    var(--bg-panel-solid);
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 18px,
      rgba(0, 230, 255, 0.02) 18px, rgba(0, 230, 255, 0.02) 19px);
  pointer-events: none;
}
.cta-banner-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.8rem;
  line-height: 1.1;
}
.cta-banner h2 .red { color: var(--accent-red); text-shadow: 0 0 20px rgba(255, 45, 77, 0.4); }
.cta-banner p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
.md-footer {
  margin-top: 4rem;
  padding: 3rem 0 1.5rem;
  border-top: 1px solid var(--border-faint);
  background: rgba(2, 3, 10, 0.6);
  position: relative;
  z-index: 1;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.foot-brand-block .foot-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.foot-brand-block .foot-logo img {
  height: 60px;
  filter: drop-shadow(0 0 12px rgba(0, 230, 255, 0.25));
}
.foot-brand-block p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.foot-col h5 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-cyan);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-faint);
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 0.55rem; }
.foot-col a {
  color: var(--text-secondary);
  font-size: 0.88rem;
  transition: color 0.2s;
}
.foot-col a:hover { color: var(--accent-cyan); }

/* "// UNDER DEVELOPMENT" sub-section header inside the footer Main Services */
.foot-subhead {
  margin: 1rem 0 0.55rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd24a;
  text-shadow: 0 0 6px rgba(255, 210, 74, 0.35);
  opacity: 1;
}
.foot-wip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-wip-list li { margin-bottom: 0.45rem; }
.foot-wip-list a {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-style: italic;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(255, 170, 0, 0.25);
  display: block;
  transition: all 0.2s;
}
.foot-wip-list a:hover {
  color: var(--accent-amber);
  border-left-color: var(--accent-amber);
}

.foot-bottom {
  border-top: 1px solid var(--border-faint);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.foot-bottom a { color: var(--accent-cyan); }

/* ============================================================
   PAGE WRAPPER (non-homepage WHMCS pages)
   ============================================================ */
.md-page {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  min-height: 50vh;
  color: var(--text-primary);
}
.md-page h1, .md-page h2, .md-page h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .showcase { grid-template-columns: 1fr; gap: 1.8rem; }
  .showcase.reverse { direction: ltr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .md-nav-links { display: none; }
  .md-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .md-nav-links.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(2, 3, 10, 0.98);
    border-top: 1px solid var(--border-faint);
    padding: 0.5rem 1rem 1rem;
    gap: 0.25rem;
  }
}
@media (max-width: 640px) {
  .md-container { padding: 0 1rem; }
  .md-nav-inner { padding: 0.7rem 1rem; }
  .hero { padding: 2.5rem 0 1.5rem; }
  .section { padding: 2.5rem 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .status-inner { font-size: 0.65rem; }
  .hero-tabs { width: 100%; overflow-x: auto; }
  .cta-banner { padding: 2rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SAFE MODE — calmer chrome when user is logged in
   ============================================================ */
body.safe-mode .scan-beam { display: none; }
body.safe-mode::before {
  background-image:
    linear-gradient(rgba(0, 255, 157, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 157, 0.025) 1px, transparent 1px);
  animation-duration: 80s;
}
body.safe-mode::after {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0, 255, 157, 0.05), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 230, 255, 0.04), transparent 55%);
}
body.safe-mode .scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 4px,
    rgba(0, 255, 157, 0.008) 4px,
    rgba(0, 255, 157, 0.008) 5px
  );
}
body.safe-mode .vignette {
  background: radial-gradient(ellipse at center, transparent 70%, rgba(0,0,0,0.4) 100%);
}
body.safe-mode .status-dot { animation: statusPulseSafe 4s ease-in-out infinite; }
@keyframes statusPulseSafe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
body.safe-mode .hero-tag { animation: none; }
body.safe-mode .hero-tag::before { animation: statusPulseSafe 4s ease-in-out infinite; }
body.safe-mode .hero h1 .glitch-word {
  color: var(--accent-green);
  -webkit-text-fill-color: var(--accent-green);
  text-shadow:
    0 0 10px rgba(0, 255, 157, 0.4),
    1px 0 0 rgba(0, 230, 255, 0.4),
    -1px 0 0 rgba(0, 230, 255, 0.4);
  animation: none;
}

/* ============================================================
   CLIENT AREA — page components
   ============================================================ */
.ca-main { padding: 2.5rem 0 2rem; }

.ca-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}
.ca-breadcrumb a { color: var(--text-secondary); transition: color 0.2s; text-decoration: none; }
.ca-breadcrumb a:hover { color: var(--accent-cyan); }
.ca-breadcrumb .sep { color: var(--accent-cyan); margin: 0 0.6rem; }
.ca-breadcrumb .current { color: var(--accent-cyan); }

.ca-page-head { margin-bottom: 1.8rem; }
.ca-page-head h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.ca-page-head p { color: var(--text-secondary); font-size: 1rem; }
.ca-page-head .actions { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Welcome banner */
.ca-welcome {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(135deg, rgba(0, 230, 255, 0.05), transparent 60%), var(--bg-panel);
  border: 1px solid var(--border-faint);
  margin-bottom: 1.8rem;
  position: relative;
  overflow: hidden;
}
.ca-welcome::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan-glow);
}
body.safe-mode .ca-welcome::before { background: var(--accent-green); box-shadow: 0 0 14px var(--accent-green); }
.ca-welcome-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
body.safe-mode .ca-welcome-tag { color: var(--accent-green); }
.ca-welcome h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.1;
}
.ca-welcome h1 .handle { color: var(--accent-green); }
.ca-welcome-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.08em; }
.ca-welcome-meta span { color: var(--text-secondary); }
.ca-welcome-clock { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-cyan); text-align: right; line-height: 1.6; }
.ca-welcome-clock .ts {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.15em;
  display: block;
}

/* Stat tiles */
.ca-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.ca-stat-tile {
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  padding: 1.4rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  display: block;
  text-decoration: none;
  color: inherit;
}
.ca-stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan-glow);
  transition: width 0.4s ease;
}
body.safe-mode .ca-stat-tile::before { background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); }
.ca-stat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 30px rgba(0, 230, 255, 0.1);
}
.ca-stat-tile:hover::before { width: 100%; }
.ca-stat-tile .corner { position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent-cyan); }
.ca-stat-tile .corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.ca-stat-tile .corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }

.ca-stat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.ca-stat-icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  color: var(--accent-cyan);
  font-size: 1rem;
  background: rgba(0, 230, 255, 0.05);
}
.ca-stat-id { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent-cyan); letter-spacing: 0.18em; }
.ca-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.ca-stat-num.green { color: var(--accent-green); text-shadow: 0 0 14px rgba(0, 255, 157, 0.3); }
.ca-stat-num.amber { color: var(--accent-amber); }
.ca-stat-num.red { color: var(--accent-red); }
.ca-stat-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.18em; }
.ca-stat-trend { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.ca-stat-trend.up { color: var(--accent-green); }
.ca-stat-trend.down { color: var(--accent-red); }

/* Search bar */
.ca-search { position: relative; margin-bottom: 2rem; }
.ca-search input {
  width: 100%;
  padding: 1rem 1.2rem 1rem 3rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}
.ca-search input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 16px rgba(0, 230, 255, 0.15); }
.ca-search input::placeholder { color: var(--text-muted); letter-spacing: 0.05em; }
.ca-search::before {
  content: '⌕';
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-cyan);
  font-size: 1.4rem;
  pointer-events: none;
}

/* Two-column layout */
.ca-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.ca-panel { background: var(--bg-panel); border: 1px solid var(--border-faint); overflow: hidden; margin-bottom: 1.5rem; }
.ca-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-faint);
  background: rgba(0, 230, 255, 0.03);
}
.ca-panel-head h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ca-panel-head h3 .num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-cyan); letter-spacing: 0.2em; }
.ca-panel-head a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: text-shadow 0.2s;
  text-decoration: none;
}
.ca-panel-head a:hover { text-shadow: 0 0 8px var(--accent-cyan); }
.ca-panel-body { padding: 0.5rem 0; }

/* Service rows */
.ca-svc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px dashed var(--border-faint);
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}
.ca-svc-row:last-child { border-bottom: 0; }
.ca-svc-row:hover { background: rgba(0, 230, 255, 0.04); }
.ca-svc-icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  font-size: 1rem;
  flex-shrink: 0;
}
.ca-svc-info .svc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.ca-svc-info .svc-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.06em; }
.ca-svc-info .svc-meta .green { color: var(--accent-green); }
.ca-svc-info .svc-meta .cyan { color: var(--accent-cyan); }
.ca-svc-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  background: rgba(0, 255, 157, 0.06);
  flex-shrink: 0;
}

/* Activity feed */
.ca-activity { list-style: none; padding: 0.5rem 0; margin: 0; }
.ca-activity li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px dashed var(--border-faint);
  align-items: flex-start;
}
.ca-activity li:last-child { border-bottom: 0; }
.ca-activity .act-icon {
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-faint);
  background: var(--bg-deep);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.ca-activity .act-icon.green { color: var(--accent-green); border-color: rgba(0, 255, 157, 0.3); }
.ca-activity .act-icon.amber { color: var(--accent-amber); border-color: rgba(255, 170, 0, 0.3); }
.ca-activity .act-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.ca-activity .act-text strong { color: var(--text-primary); }
.ca-activity .act-time {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
}

/* Announcements */
.ca-announce-list { list-style: none; margin: 0; padding: 0; }
.ca-announce-list li { padding: 1rem 1.4rem; border-bottom: 1px dashed var(--border-faint); }
.ca-announce-list li:last-child { border-bottom: 0; }
.ca-announce-list h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.ca-announce-list h4 .severity {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 1px 7px;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid currentColor;
  vertical-align: 2px;
}
.ca-announce-list h4 .severity.update { color: var(--accent-cyan); }
.ca-announce-list h4 .severity.maint { color: var(--accent-amber); }
.ca-announce-list h4 .severity.notice { color: var(--accent-green); }
.ca-announce-list .ann-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.ca-announce-list p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }

/* License card */
.ca-license-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  backdrop-filter: blur(10px);
  padding: 2rem 2rem 1.5rem;
  position: relative;
  margin-bottom: 1rem;
  overflow: hidden;
}
.ca-license-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), transparent);
  box-shadow: 0 0 14px var(--accent-cyan-glow);
}
body.safe-mode .ca-license-card::before { background: linear-gradient(90deg, var(--accent-green), transparent); box-shadow: 0 0 14px var(--accent-green); }
.ca-license-card .corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent-cyan); }
body.safe-mode .ca-license-card .corner { border-color: var(--accent-green); }
.ca-license-card .corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.ca-license-card .corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.ca-license-card .corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.ca-license-card .corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.ca-license-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.ca-license-icon {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  font-size: 1.8rem;
  box-shadow: 0 0 24px rgba(0, 255, 157, 0.2);
}
.ca-license-titles .ca-license-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-cyan); letter-spacing: 0.2em; margin-bottom: 0.3rem; }
.ca-license-titles h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.ca-license-titles .ca-license-group { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }

/* Status pill */
.ca-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  background: rgba(0, 255, 157, 0.08);
}
.ca-status-pill::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 10px var(--accent-green);
  animation: statusPulse 2s ease-in-out infinite;
}
body.safe-mode .ca-status-pill::before { animation: statusPulseSafe 4s ease-in-out infinite; }
.ca-status-pill.suspended { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255, 45, 77, 0.08); }
.ca-status-pill.suspended::before { background: var(--accent-red); box-shadow: 0 0 10px var(--accent-red); }
.ca-status-pill.warn { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255, 170, 0, 0.08); }
.ca-status-pill.warn::before { background: var(--accent-amber); box-shadow: 0 0 10px var(--accent-amber); }
.ca-status-pill.cyan { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(0, 230, 255, 0.06); }
.ca-status-pill.cyan::before { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }

/* Meta strip */
.ca-meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; padding: 1.2rem 0; border-top: 1px dashed var(--border-faint); }
.ca-meta-strip .meta-cell { border-left: 2px solid var(--border-strong); padding: 0 0.8rem; }
.ca-meta-strip .meta-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 0.3rem; }
.ca-meta-strip .meta-value { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.ca-meta-strip .meta-value.cyan { color: var(--accent-cyan); }
.ca-meta-strip .meta-value.green { color: var(--accent-green); }

/* Action buttons */
.ca-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.ca-actions .btn { flex: 1; min-width: 160px; justify-content: center; }
.btn-warn { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255, 170, 0, 0.05); }
.btn-warn:hover { background: rgba(255, 170, 0, 0.12); box-shadow: 0 0 16px rgba(255, 170, 0, 0.3); }
.btn-danger { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255, 45, 77, 0.05); }
.btn-danger:hover { background: rgba(255, 45, 77, 0.12); box-shadow: 0 0 16px rgba(255, 45, 77, 0.3); }

/* CA Tabs */
.ca-tabs {
  display: flex;
  border: 1px solid var(--border-faint);
  background: rgba(2, 3, 10, 0.6);
  padding: 4px;
  gap: 4px;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.ca-tab {
  background: transparent;
  border: 0;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  min-width: max-content;
}
.ca-tab .tab-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent-cyan); margin-right: 0.4rem; opacity: 0.7; }
.ca-tab:hover { color: var(--text-primary); }
.ca-tab.active { background: rgba(0, 230, 255, 0.08); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent-cyan); }
.ca-tab.active .tab-num { color: var(--accent-cyan); opacity: 1; }
.ca-pane { display: none; animation: fadeIn 0.3s ease; }
.ca-pane.active { display: block; }

/* Info grid */
.ca-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 2.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1rem;
}
.ca-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--border-faint);
  align-items: baseline;
}
.ca-info-row:last-child { border-bottom: 0; }
.ca-info-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; }
.ca-info-value { font-family: var(--font-tactical); font-size: 1rem; font-weight: 600; color: var(--text-primary); text-align: right; }
.ca-info-value code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(0, 230, 255, 0.08);
  border: 1px solid var(--border-faint);
  padding: 1px 6px;
  color: var(--accent-cyan);
}
.ca-info-value.green { color: var(--accent-green); }
.ca-info-value.amber { color: var(--accent-amber); }

.ca-section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--accent-cyan);
}

/* Downloads list */
.ca-download-list { display: grid; gap: 0.7rem; }
.ca-download-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem 1.2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.ca-download-row:hover {
  border-color: var(--border-strong);
  background: rgba(10, 14, 22, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 230, 255, 0.08);
}
.ca-download-icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  color: var(--accent-cyan);
  font-size: 1.1rem;
  background: rgba(0, 230, 255, 0.05);
  flex-shrink: 0;
}
.ca-download-info { min-width: 0; }
.ca-download-info .dl-name {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-download-info .dl-desc { font-size: 0.85rem; color: var(--text-secondary); }
.ca-download-info .dl-tags { display: inline-flex; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.dl-tag { font-family: var(--font-mono); font-size: 0.6rem; padding: 1px 7px; text-transform: uppercase; letter-spacing: 0.15em; border: 1px solid var(--border-faint); color: var(--accent-cyan); }
.dl-tag.new { color: var(--accent-green); border-color: var(--accent-green); }
.dl-tag.beta { color: var(--accent-amber); border-color: var(--accent-amber); }
.dl-tag.locked { color: var(--text-muted); border-color: var(--text-muted); }
.ca-download-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); text-align: right; line-height: 1.5; min-width: 80px; }
.ca-download-meta .dl-size { color: var(--accent-cyan); display: block; }
.ca-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: var(--accent-cyan);
  color: var(--bg-deep);
  border: 1px solid var(--accent-cyan);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.ca-download-btn:hover { background: var(--accent-green); border-color: var(--accent-green); color: var(--bg-deep); box-shadow: 0 0 16px rgba(0, 255, 157, 0.4); }

/* Info box */
.ca-info-box {
  padding: 1rem 1.2rem;
  background: rgba(0, 230, 255, 0.04);
  border: 1px solid var(--border-faint);
  border-left: 3px solid var(--accent-cyan);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.ca-info-box::before {
  content: '◈ NOTE';
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-cyan);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.4rem;
}

/* Empty pane */
.ca-empty-pane {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--bg-panel);
  border: 1px dashed var(--border-faint);
  color: var(--text-muted);
}
.ca-empty-pane .icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.4; }
.ca-empty-pane h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Tickets list */
.ca-ticket-list { background: var(--bg-panel); border: 1px solid var(--border-faint); }
.ca-ticket-row {
  display: grid;
  grid-template-columns: 80px 1fr 140px 160px;
  gap: 1rem;
  padding: 1rem 1.4rem;
  align-items: center;
  border-bottom: 1px dashed var(--border-faint);
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}
.ca-ticket-row:last-child { border-bottom: 0; }
.ca-ticket-row:hover { background: rgba(0, 230, 255, 0.04); }
.ca-ticket-id { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-cyan); letter-spacing: 0.1em; }
.ca-ticket-subject { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.ca-ticket-subject .ca-ticket-dept {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}
.ca-ticket-time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); text-align: right; }
.ca-ticket-status-cell { text-align: right; }

/* Ticket thread */
.ca-ticket-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.ca-message { background: var(--bg-panel); border: 1px solid var(--border-faint); padding: 1.2rem 1.4rem; position: relative; }
.ca-message.staff { border-left: 3px solid var(--accent-cyan); background: rgba(0, 230, 255, 0.03); }
.ca-message.client { border-left: 3px solid var(--accent-green); }
.ca-message-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border-faint);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ca-message-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ca-message-author .badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 1px 7px;
  letter-spacing: 0.2em;
  border: 1px solid currentColor;
  color: var(--accent-cyan);
  font-weight: 700;
}
.ca-message-author .badge.staff { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.ca-message-author .badge.client { color: var(--accent-green); border-color: var(--accent-green); }
.ca-message-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.08em; }
.ca-message-body { font-size: 0.95rem; line-height: 1.7; color: var(--text-primary); white-space: pre-wrap; }
.ca-message-attachments {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.ca-message-attachments a { color: var(--accent-cyan); text-decoration: none; }
.ca-message-attachments a:hover { text-shadow: 0 0 8px var(--accent-cyan); }

/* Forms */
.ca-form { background: var(--bg-panel); border: 1px solid var(--border-faint); padding: 1.8rem; }
.ca-form-group { margin-bottom: 1.2rem; }
.ca-form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
}
.ca-input, .ca-select, .ca-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-faint);
  color: var(--text-primary);
  font-family: var(--font-tactical);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}
.ca-input:focus, .ca-select:focus, .ca-textarea:focus { border-color: var(--accent-cyan); box-shadow: 0 0 16px rgba(0, 230, 255, 0.15); }
.ca-textarea { font-family: var(--font-mono); resize: vertical; min-height: 140px; }

/* Department selector */
.ca-dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ca-dept-card {
  display: block;
  padding: 1.4rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.ca-dept-card::after {
  content: '▸';
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  color: var(--accent-cyan);
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.ca-dept-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 230, 255, 0.1); }
.ca-dept-card:hover::after { transform: translateX(4px); color: var(--accent-green); }
.ca-dept-card .dept-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.ca-dept-card .dept-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }

/* Article cards (announcements + KB) */
.ca-article-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}
.ca-article-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 20px rgba(0, 230, 255, 0.08); }
.ca-article-card .ca-article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}
.ca-article-card .ca-article-title:hover { color: var(--accent-cyan); }
.ca-article-card .ca-article-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 0.7rem; }
.ca-article-card .ca-article-summary { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; }
.ca-article-card .ca-article-readmore {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-cyan);
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
}
.ca-article-card .ca-article-readmore:hover { text-shadow: 0 0 8px var(--accent-cyan); }

.ca-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ca-category-card {
  display: block;
  padding: 1.2rem 1.4rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.ca-category-card:hover { border-color: var(--border-strong); background: rgba(0, 230, 255, 0.04); }
.ca-category-card .cat-icon { display: inline-block; margin-right: 0.5rem; color: var(--accent-cyan); }
.ca-category-card .cat-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.ca-category-card .cat-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-cyan); margin-left: 0.4rem; letter-spacing: 0.1em; }
.ca-category-card .cat-desc { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* Pagination */
.ca-pagination { display: flex; justify-content: center; gap: 0.4rem; margin: 2rem 0; }
.ca-pagination a, .ca-pagination span {
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid var(--border-faint);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
}
.ca-pagination a:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.ca-pagination .active { color: var(--bg-deep); background: var(--accent-cyan); border-color: var(--accent-cyan); }

/* Services list — additional row variant */
.ca-product-row {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1rem;
}
.ca-product-amount {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
  min-width: 100px;
}
.ca-product-amount strong {
  display: block;
  color: var(--accent-green);
  font-size: 0.95rem;
}
.ca-product-amount span {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ca-product-due {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-cyan);
  text-align: right;
  min-width: 110px;
}
.svc-icon-warn { background: rgba(255,170,0,0.08) !important; border-color: var(--accent-amber) !important; color: var(--accent-amber) !important; }

/* Status pill variants by raw status name */
.ca-svc-status-active { border-color: var(--accent-green); color: var(--accent-green); background: rgba(0,255,157,0.06); }
.ca-svc-status-pending { border-color: var(--accent-amber); color: var(--accent-amber); background: rgba(255,170,0,0.06); }
.ca-svc-status-suspended,
.ca-svc-status-terminated,
.ca-svc-status-cancelled,
.ca-svc-status-fraud { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255,45,77,0.06); }

/* ============================================================
   NAV DROPDOWN (logged-in user menu)
   ============================================================ */
.md-nav-dropdown { position: relative; }
.md-nav-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  background: rgba(2, 3, 10, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-faint);
  list-style: none;
  padding: 0.4rem 0;
  margin: 0.4rem 0 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 70;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.md-nav-dropdown:hover .md-nav-submenu,
.md-nav-dropdown:focus-within .md-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.md-nav-submenu li { padding: 0; }
.md-nav-submenu li a {
  display: block !important;
  padding: 0.55rem 1.1rem !important;
  border: 0 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.1em !important;
  color: var(--text-secondary) !important;
}
.md-nav-submenu li a:hover {
  background: rgba(0, 230, 255, 0.08) !important;
  color: var(--accent-cyan) !important;
  box-shadow: none !important;
}
.md-nav-submenu li.divider {
  height: 1px;
  background: var(--border-faint);
  margin: 0.4rem 0;
  pointer-events: none;
}

/* "// UNDER DEVELOPMENT" sub-section header inside the Store dropdown */
.md-nav-submenu li.md-nav-subhead {
  display: block;
  margin: 0.55rem 0 0.25rem;
  padding: 0.4rem 1.1rem 0.3rem;
  border-top: 1px dashed var(--border-faint);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd24a;
  text-shadow: 0 0 6px rgba(255, 210, 74, 0.35);
  opacity: 1;
  pointer-events: none;
}
.md-nav-submenu li.md-nav-wip-item a {
  color: var(--text-muted) !important;
  font-style: italic !important;
  padding-left: 1.7rem !important;
  position: relative;
}
.md-nav-submenu li.md-nav-wip-item a::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 2px;
  height: 60%;
  transform: translateY(-50%);
  background: rgba(255, 170, 0, 0.25);
  transition: background 0.2s;
}
.md-nav-submenu li.md-nav-wip-item a:hover {
  color: var(--accent-amber) !important;
  background: rgba(255, 170, 0, 0.06) !important;
}
.md-nav-submenu li.md-nav-wip-item a:hover::before {
  background: var(--accent-amber);
}

/* ============================================================
   WHMCS MODULE FORMS (license module, etc.)
   Override Bootstrap defaults to match tactical theme
   ============================================================ */
.module-client-area input[type=text],
.module-client-area input[type=password],
.module-client-area input[type=email],
.module-client-area input[type=number],
.module-client-area textarea,
.module-client-area select,
.ca-main .form-control,
.ca-pane .form-control {
  background: var(--bg-deep) !important;
  border: 1px solid var(--border-faint) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.6rem 0.8rem !important;
  height: auto !important;
  width: 100% !important;
  margin-bottom: 0.5rem;
}
.module-client-area input:focus,
.module-client-area textarea:focus,
.module-client-area select:focus,
.ca-main .form-control:focus,
.ca-pane .form-control:focus {
  border-color: var(--accent-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 16px rgba(0, 230, 255, 0.15) !important;
}
.module-client-area label,
.module-client-area strong {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 700 !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}
.module-client-area input[type=submit],
.module-client-area input[type=button],
.module-client-area button,
.module-client-area .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.7rem 1.4rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  background: var(--accent-cyan) !important;
  color: var(--bg-deep) !important;
  border: 1px solid var(--accent-cyan) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  height: auto !important;
}
.module-client-area input[type=submit]:hover,
.module-client-area button:hover,
.module-client-area .btn:hover {
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.4) !important;
  color: var(--bg-deep) !important;
}
.module-client-area form,
.module-client-area .panel,
.module-client-area .panel-default,
.module-client-area .panel-primary {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-faint) !important;
  padding: 1.2rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
.module-client-area .panel-heading,
.module-client-area .panel-body,
.module-client-area .panel-footer {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.module-client-area .panel-heading {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-primary) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px dashed var(--border-faint) !important;
}

/* ============================================================
   MODAL FALLBACK — hide modalAjax when Bootstrap CSS missing
   ============================================================ */
.modal:not(.in):not(.show) { display: none !important; }
.modal.in, .modal.show { display: block !important; }

/* Style Bootstrap modal to fit tactical theme when shown */
.modal-content {
  background: var(--bg-panel-solid) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 80px rgba(0, 230, 255, 0.1), inset 0 1px 0 rgba(0, 230, 255, 0.1) !important;
  color: var(--text-primary) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-faint) !important;
  background: linear-gradient(180deg, rgba(0, 230, 255, 0.06), transparent) !important;
}
.modal-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-primary) !important;
}
.modal-footer { border-top: 1px solid var(--border-faint) !important; }
.modal-backdrop.in,
.modal-backdrop.show { background: rgba(2, 3, 10, 0.85) !important; }

/* ============================================================
   .md-page WRAPPER — non-redesigned pages get tactical polish
   (login, affiliates, viewinvoice, knowledgebasecat, etc.)
   ============================================================ */
.md-page {
  background: rgba(10, 14, 22, 0.4);
  color: var(--text-primary);
  font-size: 1rem;
}
.md-page h1, .md-page h2, .md-page h3, .md-page h4, .md-page h5 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.md-page h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 1.2rem; }
.md-page h2 { font-size: 1.4rem; margin: 1.5rem 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border-faint); }
.md-page h3 { font-size: 1.1rem; margin: 1.2rem 0 0.6rem; }
.md-page p, .md-page li, .md-page td, .md-page th, .md-page label, .md-page span:not(.label) {
  color: var(--text-primary);
}
.md-page .text-muted, .md-page small { color: var(--text-muted) !important; }
.md-page strong, .md-page b { color: var(--text-primary); }
.md-page a { color: var(--accent-cyan); }
.md-page a:hover { color: var(--accent-green); text-shadow: 0 0 8px var(--accent-cyan); }

/* Form inputs — tactical override */
.md-page input[type=text],
.md-page input[type=email],
.md-page input[type=password],
.md-page input[type=number],
.md-page input[type=tel],
.md-page input[type=url],
.md-page input[type=search],
.md-page input[type=date],
.md-page select,
.md-page textarea,
.md-page .form-control {
  background: var(--bg-deep) !important;
  border: 1px solid var(--border-faint) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.65rem 0.9rem !important;
  height: auto !important;
}
.md-page input:focus,
.md-page select:focus,
.md-page textarea:focus,
.md-page .form-control:focus {
  border-color: var(--accent-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 16px rgba(0, 230, 255, 0.18) !important;
}
.md-page input::placeholder,
.md-page textarea::placeholder { color: var(--text-muted) !important; }
.md-page input[disabled],
.md-page textarea[disabled],
.md-page select[disabled] { opacity: 0.55; cursor: not-allowed; }

.md-page label,
.md-page .control-label {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  margin-bottom: 0.45rem !important;
  display: block !important;
}
.md-page .checkbox label,
.md-page .radio label {
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-tactical) !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
}

/* Form button spacing — fix login + ticket submit step 2 buttons hugging captcha */
.md-page form > div[align="center"],
.md-page form > .text-center,
.md-page form > .form-group:last-child:not(:only-child),
.md-page form > .row.form-group:last-child {
  margin-top: 1.8rem !important;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border-faint);
}
.md-page form > div[align="center"] input[type=submit],
.md-page form > div[align="center"] button,
.md-page form > .text-center input[type=submit],
.md-page form > .text-center button {
  margin: 0.3rem 0.4rem;
}

/* Buttons inside .md-page — apply tactical look */
.md-page .btn,
.md-page input[type=submit],
.md-page button[type=submit],
.md-page button:not(.close):not(.navbar-toggle) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.2rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  border: 1px solid var(--border-strong) !important;
  background: rgba(0, 230, 255, 0.05) !important;
  color: var(--text-primary) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
.md-page .btn:hover,
.md-page input[type=submit]:hover,
.md-page button[type=submit]:hover {
  border-color: var(--accent-cyan) !important;
  background: rgba(0, 230, 255, 0.12) !important;
  color: var(--accent-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 230, 255, 0.25) !important;
}
.md-page .btn-primary,
.md-page input[type=submit].btn-primary,
.md-page button.btn-primary {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-deep) !important;
}
.md-page .btn-primary:hover {
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  color: var(--bg-deep) !important;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.4) !important;
}
.md-page .btn-danger {
  background: rgba(255, 45, 77, 0.06) !important;
  border-color: var(--accent-red) !important;
  color: var(--accent-red) !important;
}
.md-page .btn-danger:hover {
  background: rgba(255, 45, 77, 0.15) !important;
  box-shadow: 0 0 16px rgba(255, 45, 77, 0.3) !important;
}
.md-page .btn.disabled,
.md-page button[disabled],
.md-page input[type=submit][disabled] {
  opacity: 0.4;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Bootstrap panels → tactical cards */
.md-page .panel,
.md-page .panel-default,
.md-page .panel-primary,
.md-page .panel-info,
.md-page .panel-success,
.md-page .panel-warning,
.md-page .panel-danger {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  margin-bottom: 1.2rem;
}
.md-page .panel-heading {
  background: rgba(0, 230, 255, 0.04) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
}
.md-page .panel-info > .panel-heading { border-left: 3px solid var(--accent-cyan) !important; }
.md-page .panel-success > .panel-heading { border-left: 3px solid var(--accent-green) !important; }
.md-page .panel-warning > .panel-heading { border-left: 3px solid var(--accent-amber) !important; }
.md-page .panel-danger > .panel-heading { border-left: 3px solid var(--accent-red) !important; }
.md-page .panel-body { background: transparent !important; color: var(--text-primary) !important; }
.md-page .panel-footer {
  background: rgba(2, 3, 10, 0.5) !important;
  border-top: 1px solid var(--border-faint) !important;
  color: var(--text-secondary) !important;
}

/* Bootstrap alerts → tactical info boxes */
.md-page .alert {
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-faint) !important;
  border-left: 3px solid var(--accent-cyan) !important;
  border-radius: 0 !important;
  padding: 1rem 1.2rem !important;
}
.md-page .alert-info { border-left-color: var(--accent-cyan) !important; }
.md-page .alert-success { border-left-color: var(--accent-green) !important; }
.md-page .alert-warning { border-left-color: var(--accent-amber) !important; }
.md-page .alert-danger,
.md-page .alert-error { border-left-color: var(--accent-red) !important; }

/* Tables → tactical tables */
.md-page .table,
.md-page table.table-list,
.md-page table.table-striped {
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-faint) !important;
}
.md-page .table > thead > tr > th,
.md-page .table-list > thead > tr > th {
  background: rgba(0, 230, 255, 0.05) !important;
  color: var(--accent-cyan) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border-bottom: 1px solid var(--border-faint) !important;
  padding: 0.8rem !important;
}
.md-page .table > tbody > tr > td,
.md-page .table-list > tbody > tr > td {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-top: 1px dashed var(--border-faint) !important;
  padding: 0.8rem !important;
  vertical-align: middle !important;
}
.md-page .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(0, 230, 255, 0.02) !important; }
.md-page .table > tbody > tr:hover > td { background: rgba(0, 230, 255, 0.05) !important; }

/* Bootstrap labels → tactical pills */
.md-page .label,
.md-page span.label {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  padding: 3px 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-weight: 700 !important;
}
.md-page .label-default,
.md-page .label-info { color: var(--accent-cyan) !important; background: rgba(0,230,255,0.06) !important; }
.md-page .label-success,
.md-page .status-active { color: var(--accent-green) !important; background: rgba(0,255,157,0.06) !important; }
.md-page .label-warning,
.md-page .status-pending { color: var(--accent-amber) !important; background: rgba(255,170,0,0.06) !important; }
.md-page .label-danger,
.md-page .status-suspended,
.md-page .status-terminated,
.md-page .status-cancelled,
.md-page .status-fraud { color: var(--accent-red) !important; background: rgba(255,45,77,0.06) !important; }

/* Affiliates page — colored stat boxes */
.md-page .affiliate-stat,
.md-page .affiliate-stat-green {
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
  padding: 1.2rem !important;
  text-align: center;
}
.md-page .affiliate-stat span,
.md-page .affiliate-stat-green span {
  display: block;
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  color: var(--accent-green) !important;
  font-weight: 900 !important;
  margin: 0.3rem 0;
  text-shadow: 0 0 14px rgba(0, 255, 157, 0.3);
}
.md-page .affiliate-stat i,
.md-page .affiliate-stat-green i {
  color: var(--accent-cyan) !important;
  font-size: 1.4rem !important;
}
.md-page .affiliate-referral-link {
  background: var(--bg-panel);
  border: 1px dashed var(--border-faint);
  padding: 1.2rem;
  margin: 1.5rem 0;
}
.md-page .affiliate-referral-link span {
  font-family: var(--font-mono) !important;
  color: var(--accent-cyan) !important;
  font-size: 0.95rem;
  word-break: break-all;
}

/* Tile-based dashboard widgets (legacy clientareahome panels) */
.md-page .tile { background: var(--bg-panel) !important; border: 1px solid var(--border-faint) !important; border-radius: 0 !important; }
.md-page .tile a { color: var(--text-primary) !important; text-decoration: none !important; }
.md-page .tile .stat { color: var(--accent-cyan) !important; font-family: var(--font-display) !important; font-weight: 900 !important; }
.md-page .tile .title { color: var(--text-secondary) !important; font-family: var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; font-size: 0.72rem !important; }

/* List-group items (used in invoices, downloads list, KB) */
.md-page .list-group { background: transparent !important; border: 0 !important; }
.md-page .list-group-item {
  background: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
  margin-bottom: 0.4rem;
  transition: all 0.2s;
}
.md-page .list-group-item:hover {
  border-color: var(--border-strong) !important;
  background: rgba(0, 230, 255, 0.04) !important;
}
.md-page .list-group-item.active,
.md-page .list-group-item.active:focus {
  background: rgba(0, 230, 255, 0.1) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}

/* Breadcrumbs */
.md-page .breadcrumb {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 1rem 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.md-page .breadcrumb a { color: var(--text-secondary) !important; }
.md-page .breadcrumb a:hover { color: var(--accent-cyan) !important; }
.md-page .breadcrumb > .active { color: var(--accent-cyan) !important; }

/* Pagination */
.md-page .pagination > li > a,
.md-page .pagination > li > span {
  background: var(--bg-panel) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-faint) !important;
  font-family: var(--font-mono) !important;
}
.md-page .pagination > .active > a,
.md-page .pagination > .active > span {
  background: var(--accent-cyan) !important;
  color: var(--bg-deep) !important;
  border-color: var(--accent-cyan) !important;
}

/* Dropdown menus (Bootstrap) */
.md-page .dropdown-menu {
  background: rgba(2, 3, 10, 0.98) !important;
  border: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
}
.md-page .dropdown-menu > li > a {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
}
.md-page .dropdown-menu > li > a:hover {
  background: rgba(0, 230, 255, 0.08) !important;
  color: var(--accent-cyan) !important;
}

/* Login page specific */
.md-page .logincontainer { padding: 1rem 0; }
.md-page .logincontainer h1 { text-align: left; }
.md-page .login-form .form-group { margin-bottom: 1.2rem; }

/* DataTables wrapper */
.md-page .dataTables_wrapper { color: var(--text-secondary); }
.md-page .dataTables_wrapper .dataTables_length select,
.md-page .dataTables_wrapper .dataTables_filter input { background: var(--bg-deep) !important; color: var(--text-primary) !important; border: 1px solid var(--border-faint) !important; }
.md-page .dataTables_paginate .paginate_button { color: var(--text-secondary) !important; }
.md-page .dataTables_paginate .paginate_button.current { background: var(--accent-cyan) !important; color: var(--bg-deep) !important; border: 1px solid var(--accent-cyan) !important; }

/* CAPTCHA spacing fix */
.md-page .captcha-image,
.md-page .g-recaptcha {
  margin: 1rem 0;
  display: inline-block;
}

/* ============================================================
   GLOBAL CART OVERRIDES — apply to cart.php?a=confproduct,
   viewcart, checkout, complete (regardless of .md-page wrapper)
   ============================================================ */

/* Order Summary panel (right side of configure product / cart pages) */
body #orderSummary,
body div[id*="orderSummary"],
body div[id*="OrderSummary"],
body .order-summary,
body .order-summary-container,
body .totals-summary,
body .cart-totals,
body .right-column > .panel,
body .col-md-3 > .panel-default,
body .col-md-4 > .panel-default {
  background: var(--bg-panel) !important;
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 24px rgba(0, 230, 255, 0.06) !important;
}
body #orderSummary .panel-heading,
body #orderSummary > .panel-heading,
body .order-summary .panel-heading,
body .order-summary-container .panel-heading {
  background: rgba(0, 230, 255, 0.05) !important;
  background-color: rgba(0, 230, 255, 0.05) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
  padding: 0.9rem 1.2rem !important;
}
body #orderSummary .panel-body,
body #orderSummary > .panel-body,
body .order-summary .panel-body,
body .order-summary-container .panel-body {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
body #orderSummary,
body #orderSummary *,
body .order-summary *,
body .order-summary-container * {
  color: var(--text-primary);
}
body #orderSummary .panel-title,
body #orderSummary h3,
body #orderSummary h4 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
body #orderSummary .text-muted,
body #orderSummary small {
  color: var(--text-muted) !important;
}
body #orderSummary [class*="total"],
body #orderSummary .total,
body #orderSummary strong.total {
  color: var(--accent-green) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(0, 255, 157, 0.25);
}
body #orderSummary hr {
  border-color: var(--border-faint) !important;
}
body #orderSummary .row {
  margin-left: 0;
  margin-right: 0;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border-faint);
}
body #orderSummary .row:last-child { border-bottom: 0; }

/* Continue button (sticky right) */
body #orderSummary .btn,
body #orderSummary input[type=submit],
body .order-summary .btn {
  width: 100%;
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-deep) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  border-radius: 0 !important;
  padding: 0.85rem 1rem !important;
  margin-top: 0.8rem;
}
body #orderSummary .btn:hover {
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.4) !important;
}

/* Bootstrap btn-success (green Add to Cart button) — tactical green */
body .btn-success,
body input.btn-success,
body button.btn-success,
body input[type=submit].btn-success {
  background: var(--accent-green) !important;
  background-color: var(--accent-green) !important;
  border: 1px solid var(--accent-green) !important;
  color: var(--bg-deep) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body .btn-success:hover,
body input.btn-success:hover,
body button.btn-success:hover {
  background: var(--accent-cyan) !important;
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-deep) !important;
  box-shadow: 0 0 16px rgba(0, 230, 255, 0.4) !important;
}

/* Panel footer (the white strip behind Add to Cart button in addon panels) */
body .panel-footer,
body .panel > .panel-footer {
  background: rgba(2, 3, 10, 0.5) !important;
  background-color: rgba(2, 3, 10, 0.5) !important;
  border-top: 1px solid var(--border-faint) !important;
  color: var(--text-secondary) !important;
  border-radius: 0 !important;
}

/* Configure product page panels (form sections) */
body .product-config-blocks,
body .config-blocks,
body #productOptionsForm .panel,
body #frmConfigureProduct .panel,
body .cart .panel,
body .cart-container .panel,
body .cart-checkout-container .panel {
  background: var(--bg-panel) !important;
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
body .product-config-blocks .panel-heading,
body .config-blocks .panel-heading,
body .cart-container .panel-heading {
  background: rgba(0, 230, 255, 0.04) !important;
  background-color: rgba(0, 230, 255, 0.04) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--border-faint) !important;
  border-radius: 0 !important;
}

/* Available Addons section header / dividers */
body .addons-section,
body .available-addons,
body .config-blocks .well,
body hr.section-divider {
  border-color: var(--border-faint) !important;
}

/* "Have questions?" support strip at bottom of configure page */
body .support-questions,
body .order-help,
body .order-summary .alert,
body .panel.panel-default > .panel-body > .alert-warning,
body .alert.alert-warning[class*="contact"] {
  background: rgba(255, 170, 0, 0.04) !important;
  border: 1px solid var(--border-faint) !important;
  border-left: 3px solid var(--accent-amber) !important;
  color: var(--text-primary) !important;
  border-radius: 0 !important;
}

/* Force ALL form-control on cart pages to dark */
body .cart-container .form-control,
body .cart-checkout-container .form-control,
body form#frmConfigureProduct .form-control,
body form#orderForm .form-control,
body .config-blocks .form-control,
body .order-summary-container .form-control,
body .product-config-blocks .form-control,
body .cart-container input[type=text],
body .cart-container input[type=email],
body .cart-container input[type=password],
body .cart-container select,
body .cart-container textarea {
  background: var(--bg-deep) !important;
  background-color: var(--bg-deep) !important;
  border: 1px solid var(--border-faint) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .cart-container .form-control:focus,
body .cart-checkout-container .form-control:focus,
body form#frmConfigureProduct .form-control:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 230, 255, 0.18) !important;
}

/* Tables in cart/checkout */
body .cart-container .table,
body .cart-checkout-container .table,
body .order-summary-container .table,
body .review-table {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
body .cart-container .table thead th,
body .cart-checkout-container .table thead th,
body .review-table thead th {
  background: rgba(0, 230, 255, 0.04) !important;
  color: var(--accent-cyan) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border-bottom: 1px solid var(--border-faint) !important;
}
body .cart-container .table tbody td,
body .cart-checkout-container .table tbody td,
body .review-table tbody td {
  background: transparent !important;
  border-color: var(--border-faint) !important;
  color: var(--text-primary) !important;
}

/* Address book / payment selection on checkout */
body .address-book .panel,
body .payment-method .panel,
body .gateway-selection .panel {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-faint) !important;
}

/* ============================================================
   INVOICE STATUS PILLS (extends ca-svc-status-*)
   ============================================================ */
.ca-svc-status-paid { border-color: var(--accent-green); color: var(--accent-green); background: rgba(0,255,157,0.06); }
.ca-svc-status-unpaid { border-color: var(--accent-amber); color: var(--accent-amber); background: rgba(255,170,0,0.06); }
.ca-svc-status-overdue { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255,45,77,0.06); }
.ca-svc-status-cancelled { border-color: var(--text-muted); color: var(--text-muted); background: rgba(74,90,110,0.1); }
.ca-svc-status-refunded { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,230,255,0.06); }
.ca-svc-status-collections { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255,45,77,0.06); }

/* ============================================================
   THREAT RESOLUTION TERMINAL (knowledgebase.tpl)
   ============================================================ */
.threat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}
.threat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  text-align: left;
  font-family: var(--font-tactical);
  color: var(--text-primary);
}
.threat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(255, 45, 77, 0.05) 100%);
  pointer-events: none;
}
.threat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--accent-red);
  box-shadow: 0 0 10px var(--accent-red-glow);
  transition: width 0.4s ease;
}
.threat-card:hover {
  border-color: var(--border-danger);
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(255, 45, 77, 0.15);
}
.threat-card:hover::after { width: 100%; }
.threat-card.critical { border-color: rgba(255, 45, 77, 0.25); }
.threat-card.critical .threat-id { color: var(--accent-red); }

.threat-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent-cyan);
}
.threat-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.threat-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.threat-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.threat-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.threat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}
.threat-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.15em;
}
.threat-severity {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid currentColor;
}
.threat-severity.critical { color: var(--accent-red); }
.threat-severity.high { color: var(--accent-amber); }
.threat-severity.block { color: var(--accent-violet); }

.threat-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
  color: var(--text-primary);
}
.threat-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.threat-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border-faint);
}
.threat-cta {
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s;
}
.threat-card:hover .threat-cta { color: var(--accent-red); }

/* Threat modal (renamed kb-modal-* to avoid Bootstrap collision) */
.kb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 10, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  padding: 2rem 1rem;
}
.kb-modal-backdrop.active { opacity: 1; visibility: visible; }
.kb-modal {
  max-width: 900px;
  margin: 2rem auto;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 80px rgba(0, 230, 255, 0.1), inset 0 1px 0 rgba(0, 230, 255, 0.1);
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-modal-backdrop.active .kb-modal { transform: translateY(0) scale(1); }
.kb-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(255, 45, 77, 0.06), transparent);
}
.kb-modal-title-wrap { flex: 1; min-width: 0; }
.kb-modal-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.2em;
  margin-bottom: 0.3rem;
}
.kb-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--text-primary);
}
.kb-modal-close {
  background: transparent;
  border: 1px solid var(--border-faint) !important;
  color: var(--text-secondary) !important;
  width: 36px; height: 36px;
  cursor: pointer;
  font-family: var(--font-mono) !important;
  font-size: 1.2rem !important;
  flex-shrink: 0;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  letter-spacing: 0 !important;
}
.kb-modal-close:hover {
  border-color: var(--accent-red) !important;
  color: var(--accent-red) !important;
  box-shadow: 0 0 12px rgba(255, 45, 77, 0.4) !important;
}
.kb-modal-body {
  padding: 2rem;
  max-height: 70vh;
  overflow-y: auto;
}
.kb-modal-body::-webkit-scrollbar { width: 6px; }
.kb-modal-body::-webkit-scrollbar-track { background: transparent; }
.kb-modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); }
.kb-modal-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  margin: 1.8rem 0 0.8rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--accent-cyan);
}
.kb-modal-body h3:first-child { margin-top: 0; }
.kb-modal-body h4 {
  font-family: var(--font-tactical);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin: 1.2rem 0 0.5rem;
  text-transform: none;
  letter-spacing: normal;
}
.kb-modal-body p { margin-bottom: 0.8rem; color: var(--text-secondary); }
.kb-modal-body strong { color: var(--text-primary); font-weight: 600; }
.kb-modal-body em { color: var(--accent-amber); font-style: normal; }
.kb-modal-body ul, .kb-modal-body ol {
  margin: 0.5rem 0 1rem 1.2rem;
  color: var(--text-secondary);
}
.kb-modal-body li { margin-bottom: 0.4rem; }
.kb-modal-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(0, 230, 255, 0.08);
  border: 1px solid var(--border-faint);
  padding: 1px 6px;
  color: var(--accent-cyan);
}
.kb-modal-body pre {
  background: var(--bg-deep);
  border: 1px solid var(--border-faint);
  border-left: 3px solid var(--accent-cyan);
  padding: 0.9rem 1rem;
  margin: 0.8rem 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-green);
}
.kb-modal-body pre code { background: transparent; border: none; padding: 0; color: inherit; }
.kb-modal-body .warning-box {
  background: rgba(255, 45, 77, 0.05);
  border: 1px solid var(--border-danger);
  border-left: 3px solid var(--accent-red);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.kb-modal-body .warning-box::before {
  content: '⚠ WARNING';
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-red);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
.kb-modal-body .info-box {
  background: rgba(0, 230, 255, 0.04);
  border: 1px solid var(--border-faint);
  border-left: 3px solid var(--accent-cyan);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.kb-modal-body .info-box::before {
  content: '◈ TIP';
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-cyan);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
.kb-modal-body kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 1px 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border-faint);
  border-bottom-width: 2px;
  color: var(--text-primary);
}
.kb-modal-body .video-wrap {
  position: relative;
  margin: 1rem 0;
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 30px rgba(0, 230, 255, 0.15);
}
.kb-modal-body .video-wrap iframe {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--bg-deep);
}
.kb-modal-body .video-fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.kb-modal-body .video-fallback span { color: var(--text-muted); }
.kb-modal-body .video-fallback a {
  color: var(--accent-cyan);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Knowledgebase hero crosshair decoration */
.hero-crosshair {
  position: absolute;
  top: 4rem;
  right: 2rem;
  width: 120px;
  height: 120px;
  opacity: 0.4;
  animation: rotateSlow 30s linear infinite;
  pointer-events: none;
}
.hero-crosshair svg { width: 100%; height: 100%; }
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 768px) { .hero-crosshair { display: none; } }

/* ============================================================
   MOBILE NAV — dropdowns expand inline when nav is open
   ============================================================ */
@media (max-width: 960px) {
  .md-nav-links.open .md-nav-dropdown { width: 100%; }
  .md-nav-links.open .md-nav-submenu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .md-nav-links.open .md-nav-submenu li a {
    padding: 0.5rem 1.5rem !important;
    font-size: 0.7rem !important;
  }
}

/* Responsive */
@media (max-width: 960px) {
  .ca-layout { grid-template-columns: 1fr; }
  .ca-license-head { grid-template-columns: 1fr; text-align: left; }
  .ca-actions .btn { min-width: 0; }
  .ca-info-row { grid-template-columns: 1fr; }
  .ca-info-value { text-align: left; }
  .ca-ticket-row { grid-template-columns: 1fr 100px; }
  .ca-ticket-row .ca-ticket-id, .ca-ticket-row .ca-ticket-time { display: none; }
  .ca-product-row { grid-template-columns: auto 1fr auto !important; }
  .ca-product-row .ca-product-amount,
  .ca-product-row .ca-product-due { display: none; }
}
@media (max-width: 640px) {
  .ca-welcome { grid-template-columns: 1fr; }
  .ca-welcome-clock { text-align: left; }
  .ca-download-row { grid-template-columns: auto 1fr; gap: 0.7rem; }
  .ca-download-row .ca-download-meta, .ca-download-row .ca-download-btn { grid-column: 1 / -1; }
  .ca-download-meta { text-align: left; }
}

/* ============================================================
   ACTIVE-TICKET TOAST — top-right tactical notification
   ============================================================ */
.md-toast {
  position: fixed;
  top: 110px;
  right: -420px;
  width: 360px;
  max-width: calc(100vw - 1.5rem);
  background: linear-gradient(135deg, rgba(10, 14, 22, 0.96), rgba(2, 3, 10, 0.98));
  border: 1px solid var(--accent-amber);
  padding: 1rem 2.4rem 1rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  z-index: 9000;
  box-shadow: 0 0 30px rgba(255, 170, 0, 0.35),
              0 12px 40px rgba(0, 0, 0, 0.55),
              inset 0 0 0 1px rgba(255, 210, 74, 0.06);
  font-family: var(--font-tactical);
  color: var(--text-primary);
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
  opacity: 0;
}
.md-toast.show {
  right: 1.5rem;
  opacity: 1;
}
.md-toast.hide {
  right: -420px;
  opacity: 0;
}
.md-toast-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--accent-amber);
  border-style: solid;
  border-width: 0;
}
.md-toast-corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.md-toast-corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.md-toast-corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.md-toast-corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.md-toast-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.6));
  animation: mdToastPing 2.4s ease-in-out infinite;
}
@keyframes mdToastPing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.md-toast-body { flex: 1 1 auto; min-width: 0; }
.md-toast-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--accent-amber);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  text-shadow: 0 0 6px rgba(255, 170, 0, 0.5);
}
.md-toast-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd24a;
  margin-bottom: 0.2rem;
}
.md-toast-msg {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 0.7rem;
  line-height: 1.45;
}
.md-toast-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
  background: rgba(255, 170, 0, 0.06);
  text-decoration: none !important;
  transition: all 0.2s;
}
.md-toast-cta:hover {
  background: var(--accent-amber);
  color: var(--bg-deep);
  box-shadow: 0 0 16px rgba(255, 170, 0, 0.5);
}
.md-toast-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s, transform 0.2s;
}
.md-toast-close:hover { color: var(--accent-red); transform: scale(1.15); }

@media (max-width: 540px) {
  .md-toast { top: 90px; }
}