/*
Theme Name:     obscyber-vlog
Theme URI:      https://obscyber.mooc-science.eu
Description:    ObsCyber — Plateforme CyberLex. Observatoire Franco-Europeen de la Cybercriminalite. Droit, Technique, Criminologie. Theme enfant Vlog par Azais Khalsi / CAJI.
Author:         Azais Khalsi — CAJI / CRC
Author URI:     https://caji-international.mooc-science.eu
Template:       vlog
Version:        1.0.0
Text Domain:    obscyber-vlog
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ================================================================
   OBSCYBER-VLOG CHILD THEME
   ObsCyber — Plateforme CyberLex
   Observatoire Franco-Europeen de la Cybercriminalite
   ================================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  Base Overrides
   3.  Header & Navigation
   4.  Footer
   5.  Hero Section
   6.  Modules Grid
   7.  Dashboard Components
   8.  Panels & Cards
   9.  Incidents & Timeline
   10. Veille Juridique
   11. Criminologie
   12. Formation
   13. Buttons & Forms
   14. Badges & Tags
   15. Tables
   16. Responsive
   17. Fix Menu Mobile
   ================================================================ */

/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
  /* Backgrounds — vert tres sombre */
  --oc-bg-base:         #06120a;
  --oc-bg-surface:      #081508;
  --oc-bg-card:         #0a1a0c;
  --oc-bg-elevated:     #0e2012;
  --oc-border:          #1a3a20;
  --oc-border-light:    rgba(26,58,32,0.5);

  /* Accent principal — vert vif ObsCyber */
  --oc-green:           #2ecc71;
  --oc-green-dim:       rgba(46,204,113,0.15);
  --oc-green-glow:      rgba(46,204,113,0.08);

  /* Accent secondaire — or CyberLex */
  --oc-gold:            #e8b84b;
  --oc-gold-dim:        rgba(232,184,75,0.15);

  /* Status */
  --oc-danger:          #e74c3c;
  --oc-danger-dim:      rgba(231,76,60,0.18);
  --oc-warning:         #f39c12;
  --oc-warning-dim:     rgba(243,156,18,0.15);
  --oc-purple:          #9b59b6;
  --oc-purple-dim:      rgba(155,89,182,0.18);
  --oc-blue:            #3498db;
  --oc-blue-dim:        rgba(52,152,219,0.18);

  /* Texte */
  --oc-text-primary:    #c0e8d0;
  --oc-text-secondary:  #4a8a5a;
  --oc-text-muted:      #2a5a3a;
  --oc-text-bright:     #e0f8e8;

  /* Typographie */
  --oc-font-ui:         'Share Tech Mono', 'Courier New', monospace;
  --oc-font-body:       'Exo 2', 'Segoe UI', sans-serif;
  --oc-font-display:    'Orbitron', 'Share Tech Mono', monospace;

  /* Spacing */
  --oc-radius-sm:       4px;
  --oc-radius:          8px;
  --oc-radius-lg:       12px;
  --oc-trans:           0.2s ease;
}

/* ----------------------------------------------------------------
   2. BASE OVERRIDES
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;500;600&display=swap');

html { scroll-behavior: smooth; }

body {
  background-color: var(--oc-bg-base) !important;
  color: var(--oc-text-primary) !important;
  font-family: var(--oc-font-body) !important;
  font-size: 1.5rem !important;
  line-height: 1.7 !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.02) 2px,
    rgba(0,0,0,0.02) 4px
  );
}

a { color: var(--oc-green); transition: color var(--oc-trans); }
a:hover { color: #5ddd8a; }

h1, h2, h3, h4, h5, h6 {
  color: var(--oc-text-bright) !important;
  font-family: var(--oc-font-display) !important;
}

::selection { background: var(--oc-green-dim); color: var(--oc-green); }

.vlog-site-content { background: var(--oc-bg-base) !important; }
.vlog-body-box     { background: var(--oc-bg-base); }

/* Scrollbar */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--oc-bg-base); }
::-webkit-scrollbar-thumb      { background: var(--oc-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--oc-green-dim); }

/* ----------------------------------------------------------------
   3. HEADER & NAVIGATION
   ---------------------------------------------------------------- */
.vlog-site-header,
#header {
  background: var(--oc-bg-card) !important;
  border-bottom: 1px solid var(--oc-border) !important;
  box-shadow: none !important;
}

.vlog-header-wrapper { padding: 0 !important; }

/* Logo */
.vlog-logo img { filter: brightness(1.2) saturate(0.8); }
.vlog-logo a   { color: var(--oc-green) !important; font-family: var(--oc-font-display) !important; }

/* Navigation */
.vlog-main-nav > li > a,
.vlog-main-nav > li > span {
  color: var(--oc-text-muted) !important;
  font-family: var(--oc-font-ui) !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: color var(--oc-trans) !important;
}

.vlog-main-nav > li > a:hover,
.vlog-main-nav > li.current-menu-item > a {
  color: var(--oc-green) !important;
}

.vlog-main-nav > li.current-menu-item > a {
  border-bottom: 2px solid var(--oc-green);
}

/* Dropdown */
.vlog-main-nav .sub-menu {
  background: var(--oc-bg-card) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: var(--oc-radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.vlog-main-nav .sub-menu li a {
  color: var(--oc-text-secondary) !important;
  font-family: var(--oc-font-ui) !important;
  font-size: 1.1rem !important;
}

.vlog-main-nav .sub-menu li a:hover {
  color: var(--oc-green) !important;
  background: var(--oc-bg-elevated) !important;
}

/* Sticky header */
.vlog-sticky-header,
.vlog-site-header.sticky {
  background: rgba(6,18,10,0.96) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom-color: var(--oc-border) !important;
}

/* ----------------------------------------------------------------
   4. FOOTER
   ---------------------------------------------------------------- */
.vlog-footer,
#footer {
  background: var(--oc-bg-card) !important;
  border-top: 1px solid var(--oc-border) !important;
  color: var(--oc-text-muted) !important;
}

.vlog-footer a         { color: var(--oc-green) !important; }
.vlog-footer a:hover   { color: var(--oc-gold) !important; }
.vlog-footer-bottom    { background: var(--oc-bg-base) !important; border-top: 1px solid var(--oc-border) !important; }
.vlog-copyright        { color: var(--oc-text-muted) !important; font-family: var(--oc-font-ui) !important; font-size: 1.1rem !important; }

/* ----------------------------------------------------------------
   5. HERO SECTION
   ---------------------------------------------------------------- */
.oc-hero {
  position: relative;
  background: var(--oc-bg-base);
  padding: 80px 20px 60px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--oc-border);
}

.oc-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--oc-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--oc-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.2;
  pointer-events: none;
}

.oc-hero-eyebrow {
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  color: var(--oc-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.oc-hero-title {
  font-family: var(--oc-font-display) !important;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--oc-text-bright) !important;
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.oc-hero-title .obs  { color: var(--oc-green); }
.oc-hero-title .lex  { color: var(--oc-gold); }

.oc-hero-subtitle-line {
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  color: var(--oc-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.oc-hero-desc {
  font-size: 1.6rem;
  color: var(--oc-text-secondary);
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 32px;
}

.oc-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   6. MODULES GRID
   ---------------------------------------------------------------- */
.oc-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.oc-module-card {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-lg);
  padding: 20px;
  transition: border-color var(--oc-trans), background var(--oc-trans);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.oc-module-card:hover {
  border-color: var(--oc-green);
  background: var(--oc-bg-elevated);
  text-decoration: none;
}

.oc-module-icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.oc-module-name {
  font-family: var(--oc-font-display);
  font-size: 1.4rem;
  color: var(--oc-text-bright);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.oc-module-desc {
  font-size: 1.2rem;
  color: var(--oc-text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 12px;
}

.oc-module-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

.oc-tag {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--oc-green-dim);
  color: var(--oc-green);
  border: 1px solid rgba(46,204,113,0.25);
}

.oc-tag.gold {
  background: var(--oc-gold-dim);
  color: var(--oc-gold);
  border-color: rgba(232,184,75,0.25);
}

.oc-tag.purple {
  background: var(--oc-purple-dim);
  color: var(--oc-purple);
  border-color: rgba(155,89,182,0.25);
}

/* ----------------------------------------------------------------
   7. DASHBOARD COMPONENTS
   ---------------------------------------------------------------- */
.oc-dashboard { padding: 0; }

.oc-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.oc-section { margin-bottom: 32px; }

.oc-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--oc-border);
}

.oc-section-title {
  font-family: var(--oc-font-display) !important;
  font-size: 1.8rem !important;
  color: var(--oc-text-bright) !important;
  margin: 0 !important;
  letter-spacing: 0.06em;
}

.oc-section-title span { color: var(--oc-green); }
.oc-section-title .gold { color: var(--oc-gold); }

.oc-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--oc-border), transparent);
}

/* Stats bar */
.oc-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.oc-stat {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  padding: 14px 16px;
}

.oc-stat-label {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.oc-stat-value {
  font-family: var(--oc-font-display);
  font-size: 2.4rem;
  line-height: 1.1;
  margin-bottom: 4px;
}

.oc-stat-value.green  { color: var(--oc-green); }
.oc-stat-value.gold   { color: var(--oc-gold); }
.oc-stat-value.danger { color: var(--oc-danger); }
.oc-stat-value.purple { color: var(--oc-purple); }
.oc-stat-value.blue   { color: var(--oc-blue); }

.oc-stat-delta {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-text-muted);
}

/* Grid layouts */
.oc-row { display: grid; gap: 16px; }
.oc-row-2   { grid-template-columns: 1fr 1fr; }
.oc-row-3   { grid-template-columns: 1fr 1fr 1fr; }
.oc-row-2-1 { grid-template-columns: 2fr 1fr; }
.oc-row-1-2 { grid-template-columns: 1fr 2fr; }

/* ----------------------------------------------------------------
   8. PANELS & CARDS
   ---------------------------------------------------------------- */
.oc-panel {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  overflow: hidden;
  margin-bottom: 16px;
}

.oc-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--oc-border);
  background: var(--oc-bg-elevated);
}

.oc-panel-title {
  font-family: var(--oc-font-display);
  font-size: 1.3rem;
  color: var(--oc-text-bright);
  letter-spacing: 0.04em;
  flex: 1;
}

/* Tabs */
.oc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--oc-border);
  overflow-x: auto;
}

.oc-tab {
  font-family: var(--oc-font-ui);
  font-size: 1.1rem;
  color: var(--oc-text-muted);
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--oc-trans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.oc-tab:hover { color: var(--oc-green); }
.oc-tab.active {
  color: var(--oc-green);
  border-bottom-color: var(--oc-green);
  background: var(--oc-green-glow);
}

/* ----------------------------------------------------------------
   9. INCIDENTS & TIMELINE
   ---------------------------------------------------------------- */
.oc-incident-card {
  background: var(--oc-bg-elevated);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color var(--oc-trans);
  cursor: pointer;
}

.oc-incident-card:hover { border-color: var(--oc-green); }

.oc-incident-card.critique { border-left: 3px solid var(--oc-danger); }
.oc-incident-card.eleve    { border-left: 3px solid var(--oc-warning); }
.oc-incident-card.moyen    { border-left: 3px solid var(--oc-gold); }
.oc-incident-card.faible   { border-left: 3px solid var(--oc-blue); }

.oc-incident-title {
  font-family: var(--oc-font-ui);
  font-size: 1.3rem;
  color: var(--oc-text-bright);
  margin-bottom: 4px;
}

.oc-incident-meta {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-text-muted);
  margin-bottom: 8px;
}

.oc-incident-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Timeline */
.oc-timeline-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--oc-border-light);
  align-items: flex-start;
}

.oc-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.oc-timeline-time {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-text-muted);
  min-width: 80px;
  flex-shrink: 0;
  margin-top: 2px;
}

.oc-timeline-content { flex: 1; }

.oc-timeline-text {
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  color: var(--oc-text-primary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.oc-timeline-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}

/* ----------------------------------------------------------------
   10. VEILLE JURIDIQUE
   ---------------------------------------------------------------- */
.oc-veille-card {
  background: var(--oc-bg-elevated);
  border: 1px solid var(--oc-border);
  border-left: 3px solid var(--oc-purple);
  border-radius: var(--oc-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color var(--oc-trans);
}

.oc-veille-card:hover { border-color: var(--oc-purple); }

.oc-veille-source {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-purple);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.oc-veille-title {
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  color: var(--oc-text-bright);
  margin-bottom: 4px;
}

.oc-veille-date {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-text-muted);
}

/* ----------------------------------------------------------------
   11. CRIMINOLOGIE
   ---------------------------------------------------------------- */
.oc-crimino-card {
  background: var(--oc-bg-elevated);
  border: 1px solid var(--oc-border);
  border-left: 3px solid var(--oc-green);
  border-radius: var(--oc-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.oc-crimino-wp {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  color: var(--oc-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.oc-progress-bar {
  height: 4px;
  background: var(--oc-border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.oc-progress-fill {
  height: 100%;
  background: var(--oc-green);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ----------------------------------------------------------------
   12. FORMATION
   ---------------------------------------------------------------- */
.oc-formation-card {
  background: var(--oc-bg-card);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-lg);
  padding: 20px;
  transition: border-color var(--oc-trans), background var(--oc-trans);
}

.oc-formation-card:hover {
  border-color: var(--oc-gold);
  background: var(--oc-bg-elevated);
}

.oc-formation-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.oc-formation-title {
  font-family: var(--oc-font-display);
  font-size: 1.4rem;
  color: var(--oc-gold);
  margin-bottom: 8px;
}

/* ----------------------------------------------------------------
   13. BUTTONS & FORMS
   ---------------------------------------------------------------- */
.oc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--oc-green);
  color: var(--oc-bg-base);
  font-family: var(--oc-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--oc-radius);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: all var(--oc-trans);
  border: none;
  cursor: pointer;
}

.oc-btn-primary:hover {
  background: #5ddd8a;
  color: var(--oc-bg-base);
  text-decoration: none;
  transform: translateY(-1px);
}

.oc-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: transparent;
  color: var(--oc-gold);
  border: 1px solid var(--oc-gold-dim);
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  border-radius: var(--oc-radius);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: all var(--oc-trans);
  cursor: pointer;
}

.oc-btn-secondary:hover {
  background: var(--oc-gold-dim);
  color: var(--oc-gold);
  text-decoration: none;
}

.oc-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  color: var(--oc-blue);
  border: 1px solid rgba(52,152,219,0.3);
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  border-radius: var(--oc-radius);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: all var(--oc-trans);
  cursor: pointer;
}

.oc-btn-tertiary:hover {
  background: var(--oc-blue-dim);
  color: var(--oc-blue);
  text-decoration: none;
}

/* Inputs */
.oc-input {
  width: 100%;
  background: var(--oc-bg-base);
  border: 1px solid var(--oc-border);
  color: var(--oc-text-primary);
  border-radius: var(--oc-radius-sm);
  padding: 10px 14px;
  font-family: var(--oc-font-ui);
  font-size: 1.2rem;
  outline: none;
  transition: border-color var(--oc-trans);
}

.oc-input:focus { border-color: var(--oc-green); }
.oc-input::placeholder { color: var(--oc-text-muted); }

/* ----------------------------------------------------------------
   14. BADGES & TAGS
   ---------------------------------------------------------------- */
.oc-badge {
  font-family: var(--oc-font-ui);
  font-size: 1.0rem;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.oc-badge-live    { background: var(--oc-danger-dim);  color: var(--oc-danger);  border: 1px solid rgba(231,76,60,0.3); animation: oc-blink 1.2s ease-in-out infinite; }
.oc-badge-green   { background: var(--oc-green-dim);   color: var(--oc-green);   border: 1px solid rgba(46,204,113,0.3); }
.oc-badge-gold    { background: var(--oc-gold-dim);    color: var(--oc-gold);    border: 1px solid rgba(232,184,75,0.3); }
.oc-badge-purple  { background: var(--oc-purple-dim);  color: var(--oc-purple);  border: 1px solid rgba(155,89,182,0.3); }
.oc-badge-danger  { background: var(--oc-danger-dim);  color: var(--oc-danger);  border: 1px solid rgba(231,76,60,0.3); }
.oc-badge-warning { background: var(--oc-warning-dim); color: var(--oc-warning); border: 1px solid rgba(243,156,18,0.3); }
.oc-badge-blue    { background: var(--oc-blue-dim);    color: var(--oc-blue);    border: 1px solid rgba(52,152,219,0.3); }

@keyframes oc-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* Severity badges */
.oc-sev { font-family: var(--oc-font-ui); font-size: 0.95rem; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 0.06em; }
.oc-sev-critique { background: #2a0808; color: var(--oc-danger); }
.oc-sev-eleve    { background: #2a1800; color: var(--oc-warning); }
.oc-sev-moyen    { background: #1a1208; color: var(--oc-gold); }
.oc-sev-faible   { background: #082028; color: var(--oc-blue); }

/* Pillar badges */
.oc-pill-tech   { background: rgba(52,152,219,0.15); color: #5ab4e8; border: 1px solid rgba(52,152,219,0.3); border-radius: 3px; font-family: var(--oc-font-ui); font-size: 0.9rem; padding: 1px 6px; }
.oc-pill-droit  { background: var(--oc-purple-dim); color: var(--oc-purple); border: 1px solid rgba(155,89,182,0.3); border-radius: 3px; font-family: var(--oc-font-ui); font-size: 0.9rem; padding: 1px 6px; }
.oc-pill-crimino{ background: var(--oc-green-dim); color: var(--oc-green); border: 1px solid rgba(46,204,113,0.3); border-radius: 3px; font-family: var(--oc-font-ui); font-size: 0.9rem; padding: 1px 6px; }

/* ----------------------------------------------------------------
   15. TABLES
   ---------------------------------------------------------------- */
.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--oc-font-ui);
  font-size: 1.1rem;
}

.oc-table th {
  background: var(--oc-bg-elevated);
  color: var(--oc-text-muted);
  font-size: 1.0rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--oc-border);
  text-align: left;
}

.oc-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--oc-border-light);
  color: var(--oc-text-primary);
  vertical-align: middle;
}

.oc-table tr:hover td { background: var(--oc-bg-elevated); }

/* ----------------------------------------------------------------
   16. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .oc-row-2-1, .oc-row-1-2 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .oc-row-2, .oc-row-3 { grid-template-columns: 1fr; }
  .oc-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .oc-hero { padding: 48px 16px 40px; }
}

@media (max-width: 600px) {
  .oc-stats-bar { grid-template-columns: 1fr 1fr; }
  .oc-modules-grid { grid-template-columns: 1fr; }
  .oc-hero-cta { flex-direction: column; align-items: center; }
}

/* ----------------------------------------------------------------
   17. FIX MENU MOBILE
   ---------------------------------------------------------------- */
#vlog-responsive-header {
  background: var(--oc-bg-card) !important;
  border-bottom: 1px solid var(--oc-border) !important;
  z-index: 9999 !important;
}

.dl-trigger {
  background: var(--oc-bg-elevated) !important;
  border: 1px solid var(--oc-border) !important;
  color: var(--oc-green) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}

.dl-trigger i { color: var(--oc-green) !important; }

.dl-menu:not(.dl-menuopen) { display: none !important; }

.dl-menu.dl-menuopen {
  background: var(--oc-bg-card) !important;
  border: 1px solid var(--oc-border) !important;
  z-index: 9998 !important;
  width: 100% !important;
  padding: 8px 0 !important;
}

.dl-menu li { border-bottom: 1px solid var(--oc-border-light) !important; }
.dl-menu li a { color: var(--oc-text-primary) !important; font-family: var(--oc-font-ui) !important; font-size: 1.2rem !important; padding: 12px 20px !important; display: block !important; text-decoration: none !important; }
.dl-menu li a:hover { background: var(--oc-bg-elevated) !important; color: var(--oc-green) !important; }
.dl-menu li.current-menu-item > a { color: var(--oc-green) !important; border-left: 3px solid var(--oc-green) !important; }

#content, .vlog-site-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}