/* ============================================================
   TSG VAULT — INTRANET THEME CSS
   vault.thesyndicategroup.net
   Version 3.0.0
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --gold:          #C6A664;
  --gold-light:    #E2C47A;
  --gold-dark:     #9A7B2F;
  --gold-dim:      rgba(198,166,100,0.18);
  --midnight:      #0B0B0C;
  --near-black:    #111111;
  --surface:       #181818;
  --surface-2:     #1e1e1e;
  --surface-3:     #252525;
  --border-gold:   rgba(198,166,100,0.22);
  --border-subtle: rgba(255,255,255,0.06);
  --ivory:         #F5F0E8;
  --text-secondary:#B8B0A0;
  --text-muted:    #6A6560;
  --taupe:         #8A7D6B;
  --taupe-light:   #C4B8A8;
  --error:         #c94040;
  --success:       #4a9e6b;
  --warning:       #c9943a;

  /* Typography */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Jost', 'Montserrat', sans-serif;

  /* Layout */
  --nav-h:       64px;
  --rail-w:      4px;
  --radius:      4px;
  --radius-lg:   8px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background:   var(--midnight);
  color:        var(--ivory);
  font-family:  var(--font-sans);
  font-weight:  300;
  line-height:  1.6;
  min-height:   100vh;
  overflow-x:   hidden;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }
img, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-sans); }

/* ── Admin bar fix ──────────────────────────────────────────── */
.admin-bar .vault-nav { top: 32px; }
.admin-bar .vault-body { padding-top: calc(var(--nav-h) + 32px); }

/* ============================================================
   VAULT NAV
   ============================================================ */
.vault-nav {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          500;
  height:           var(--nav-h);
  background:       rgba(11,11,12,0.97);
  backdrop-filter:  blur(14px);
  border-bottom:    1px solid var(--border-gold);
  display:          flex;
  align-items:      center;
  padding:          0 32px;
  gap:              24px;
  overflow:         visible;
}

/* Gold left-edge accent rail */
.vault-nav::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      var(--rail-w);
  height:     100%;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

/* Shield mark */
.nav-shield-wrap {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  height:      calc(var(--nav-h) + 22px);
  margin-top:  -22px;
  overflow:    visible;
  padding-left: 12px;
}
.nav-shield-wrap img {
  height:      88px;
  width:       auto;
  filter:      drop-shadow(0 4px 18px rgba(198,166,100,0.35));
  object-fit:  contain;
}

/* Brand text */
.nav-brand {
  display:        flex;
  flex-direction: column;
  line-height:    1;
  gap:            2px;
  margin-right:   8px;
}
.nav-brand-name {
  font-family:    var(--font-serif);
  font-size:      14px;
  font-weight:    400;
  letter-spacing: 0.18em;
  color:          var(--gold);
  text-transform: uppercase;
  white-space:    nowrap;
}
.nav-brand-rule {
  height:     1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.nav-brand-sub {
  font-family:    var(--font-sans);
  font-size:      9px;
  font-weight:    400;
  letter-spacing: 0.22em;
  color:          var(--taupe-light);
  text-transform: uppercase;
  white-space:    nowrap;
}

/* Vault badge */
.nav-vault-badge {
  background:     rgba(198,166,100,0.12);
  border:         1px solid var(--border-gold);
  border-radius:  2px;
  padding:        3px 10px;
  font-family:    var(--font-sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.32em;
  color:          var(--gold);
  text-transform: uppercase;
  flex-shrink:    0;
}

/* Divider */
.nav-divider {
  width:      1px;
  height:     28px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

/* Nav links */
.vault-nav-links {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex:        1;
}
.vault-nav-links a,
.vault-nav-links .nav-link-btn {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        6px 14px;
  border-radius:  var(--radius);
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--taupe-light);
  text-decoration: none;
  transition:     background 0.2s, color 0.2s;
  border:         none;
  background:     transparent;
  white-space:    nowrap;
}
.vault-nav-links a:hover,
.vault-nav-links .nav-link-btn:hover {
  background: rgba(198,166,100,0.08);
  color:      var(--gold);
}
.vault-nav-links a.active,
.vault-nav-links .nav-link-btn.active {
  background: rgba(198,166,100,0.12);
  color:      var(--gold);
  border:     1px solid var(--border-gold);
}
.nav-icon {
  width:  14px;
  height: 14px;
  opacity: 0.75;
  flex-shrink: 0;
}
.vault-nav-links a.active .nav-icon,
.vault-nav-links a:hover .nav-icon { opacity: 1; }

/* Admin-only nav items */
.nav-admin-only { display: none; }
body.tsg-is-admin .nav-admin-only { display: flex; }

/* Nav right: agent identity */
.nav-agent-area {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-agent-name {
  font-family:    var(--font-sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.1em;
  color:          var(--taupe-light);
  white-space:    nowrap;
}
.nav-agent-role {
  font-size:      9px;
  letter-spacing: 0.2em;
  color:          var(--gold);
  text-transform: uppercase;
  display:        block;
}
.nav-logout-btn {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        6px 14px;
  border:         1px solid var(--border-gold);
  border-radius:  var(--radius);
  background:     transparent;
  color:          var(--taupe);
  font-family:    var(--font-sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition:     all 0.2s;
  white-space:    nowrap;
  cursor:         pointer;
}
.nav-logout-btn:hover {
  background: rgba(201,64,64,0.1);
  border-color: rgba(201,64,64,0.4);
  color: #e07070;
}

/* Mobile nav toggle */
.nav-mobile-toggle {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      transparent;
  border:          none;
  padding:         8px;
  margin-left:     auto;
}
.nav-mobile-toggle span {
  display:    block;
  width:      22px;
  height:     1.5px;
  background: var(--taupe-light);
  transition: transform 0.3s, opacity 0.3s;
}

/* ============================================================
   PAGE BODY WRAPPER
   ============================================================ */
.vault-body {
  padding-top:    var(--nav-h);
  min-height:     100vh;
}

/* ── Section inner container ──────────────────────────────── */
.vault-container {
  max-width: 1360px;
  margin:    0 auto;
  padding:   0 40px;
}

/* ============================================================
   DASHBOARD — FRONT PAGE
   ============================================================ */
.vault-dashboard {
  padding: 48px 0 80px;
}

/* Welcome bar */
.vault-welcome-bar {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             24px;
  margin-bottom:   40px;
  padding-bottom:  32px;
  border-bottom:   1px solid var(--border-gold);
}
.vault-welcome-eyebrow {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  10px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}
.vault-welcome-eyebrow::before {
  content:    '';
  width:      24px;
  height:     1px;
  background: var(--gold);
  flex-shrink: 0;
}
.vault-welcome-heading {
  font-family:  var(--font-serif);
  font-size:    clamp(28px, 4vw, 48px);
  font-weight:  300;
  line-height:  1.1;
  color:        var(--ivory);
}
.vault-welcome-heading em {
  font-style: italic;
  color:      var(--gold-light);
}
.vault-welcome-date {
  font-family:    var(--font-sans);
  font-size:      12px;
  letter-spacing: 0.1em;
  color:          var(--taupe);
  text-align:     right;
  flex-shrink:    0;
}
.vault-welcome-date strong {
  display:      block;
  font-size:    11px;
  font-weight:  500;
  letter-spacing: 0.2em;
  color:        var(--taupe-light);
  text-transform: uppercase;
}

/* KPI strip */
.vault-kpi-strip {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            var(--border-gold);
  border:                1px solid var(--border-gold);
  border-radius:         var(--radius);
  overflow:              hidden;
  margin-bottom:         40px;
}
.vault-kpi {
  background:      var(--surface);
  padding:         24px 28px;
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  transition:      background 0.2s;
}
.vault-kpi:hover { background: var(--surface-2); }
.vault-kpi-label {
  font-family:    var(--font-sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--taupe);
}
.vault-kpi-value {
  font-family:  var(--font-serif);
  font-size:    36px;
  font-weight:  300;
  color:        var(--gold);
  line-height:  1;
}
.vault-kpi-delta {
  font-family:    var(--font-sans);
  font-size:      11px;
  color:          var(--taupe-light);
  letter-spacing: 0.04em;
}
.vault-kpi-delta a {
  color:            var(--gold);
  text-decoration:  none;
  font-size:        10px;
  letter-spacing:   0.1em;
}
.vault-kpi-delta a:hover { text-decoration: underline; }

/* Quick-access tile grid */
.vault-tiles-heading {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color:          var(--taupe);
  margin-bottom:  20px;
  display:        flex;
  align-items:    center;
  gap:            14px;
}
.vault-tiles-heading::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border-subtle);
}

.vault-tiles {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   16px;
  margin-bottom:         48px;
}
.vault-tile {
  background:    var(--surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding:       28px 28px 24px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
  transition:    border-color 0.25s, background 0.25s, transform 0.2s;
  position:      relative;
  overflow:      hidden;
  text-decoration: none;
  color:         inherit;
}
.vault-tile::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      3px;
  height:     100%;
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity:    0;
  transition: opacity 0.25s;
}
.vault-tile:hover {
  border-color: var(--border-gold);
  background:   var(--surface-2);
  transform:    translateY(-2px);
  color:        inherit;
}
.vault-tile:hover::before { opacity: 1; }

.vault-tile-icon {
  width:           42px;
  height:          42px;
  background:      rgba(198,166,100,0.08);
  border:          1px solid var(--border-gold);
  border-radius:   var(--radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.vault-tile-icon svg {
  width:  20px;
  height: 20px;
  stroke: var(--gold);
  fill:   none;
}
.vault-tile-label {
  font-family:    var(--font-sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color:          var(--gold);
}
.vault-tile-title {
  font-family:  var(--font-serif);
  font-size:    20px;
  font-weight:  300;
  color:        var(--ivory);
  line-height:  1.2;
}
.vault-tile-desc {
  font-family: var(--font-sans);
  font-size:   13px;
  font-weight: 300;
  color:       var(--taupe-light);
  line-height: 1.65;
  flex:        1;
}
.vault-tile-action {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--gold);
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.vault-tile-action::after {
  content:    '→';
  transition: transform 0.2s;
}
.vault-tile:hover .vault-tile-action::after {
  transform: translateX(4px);
}

/* Admin-only tiles */
.vault-tile.admin-only { display: none; }
body.tsg-is-admin .vault-tile.admin-only { display: flex; }

/* Two-column layout for dashboard lower half */
.vault-dash-lower {
  display:               grid;
  grid-template-columns: 1fr 360px;
  gap:                   24px;
  align-items:           start;
}

/* Activity feed */
.vault-activity-feed {
  background:    var(--surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.vault-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px;
  border-bottom:   1px solid var(--border-subtle);
}
.vault-panel-title {
  font-family:    var(--font-serif);
  font-size:      18px;
  font-weight:    300;
  color:          var(--ivory);
}
.vault-panel-subtitle {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.2em;
  color:          var(--taupe);
  text-transform: uppercase;
  margin-top:     2px;
}
.vault-panel-action {
  font-family:    var(--font-sans);
  font-size:      10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gold);
  text-decoration: none;
}
.vault-panel-action:hover {
  color: var(--gold-light);
}

.vault-feed-list {
  padding: 0;
}
.vault-feed-item {
  display:      flex;
  align-items:  flex-start;
  gap:          14px;
  padding:      16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  transition:   background 0.2s;
}
.vault-feed-item:last-child { border-bottom: none; }
.vault-feed-item:hover { background: var(--surface-2); }
.vault-feed-dot {
  width:       8px;
  height:      8px;
  border-radius: 50%;
  background:  var(--gold);
  flex-shrink: 0;
  margin-top:  6px;
}
.vault-feed-dot.dot-lead { background: #4a9e6b; }
.vault-feed-dot.dot-guide { background: var(--gold); }
.vault-feed-dot.dot-task { background: #c9943a; }
.vault-feed-dot.dot-note { background: var(--taupe); }
.vault-feed-text {
  flex: 1;
}
.vault-feed-text strong {
  display:     block;
  font-size:   13px;
  font-weight: 400;
  color:       var(--ivory);
  margin-bottom: 2px;
}
.vault-feed-text span {
  font-size: 11px;
  color:     var(--taupe);
}

/* Side panel: guides + resources */
.vault-side-panels {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}
.vault-side-panel {
  background:    var(--surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.vault-guide-list {
  padding: 0;
}
.vault-guide-item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         14px 20px;
  border-bottom:   1px solid var(--border-subtle);
  text-decoration: none;
  transition:      background 0.2s;
}
.vault-guide-item:last-child { border-bottom: none; }
.vault-guide-item:hover { background: var(--surface-2); }
.vault-guide-dot {
  width:       6px;
  height:      6px;
  border-radius: 50%;
  background:  var(--gold);
  flex-shrink: 0;
  opacity:     0.7;
}
.vault-guide-item:hover .vault-guide-dot { opacity: 1; }
.vault-guide-name {
  flex:        1;
  font-family: var(--font-sans);
  font-size:   13px;
  font-weight: 300;
  color:       var(--taupe-light);
}
.vault-guide-item:hover .vault-guide-name { color: var(--ivory); }
.vault-guide-arrow {
  font-size: 12px;
  color:     var(--taupe);
  opacity:   0;
  transition: opacity 0.2s, transform 0.2s;
}
.vault-guide-item:hover .vault-guide-arrow {
  opacity:   1;
  transform: translateX(3px);
}

/* Resource links */
.vault-resource-list {
  padding: 0;
}
.vault-resource-item {
  display:      flex;
  align-items:  center;
  gap:          12px;
  padding:      13px 20px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  transition:   background 0.2s;
}
.vault-resource-item:last-child { border-bottom: none; }
.vault-resource-item:hover { background: var(--surface-2); }
.vault-resource-icon {
  width:           28px;
  height:          28px;
  background:      rgba(198,166,100,0.06);
  border:          1px solid var(--border-gold);
  border-radius:   var(--radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.vault-resource-icon svg {
  width:  14px;
  height: 14px;
  stroke: var(--gold);
  fill:   none;
}
.vault-resource-name {
  flex:        1;
  font-family: var(--font-sans);
  font-size:   12px;
  font-weight: 300;
  color:       var(--taupe-light);
}
.vault-resource-item:hover .vault-resource-name { color: var(--ivory); }

/* ============================================================
   GENERIC PAGE WRAPPER
   ============================================================ */
.vault-page-content {
  padding: 48px 0 80px;
}
.vault-page-header {
  margin-bottom:  40px;
  padding-bottom: 28px;
  border-bottom:  1px solid var(--border-gold);
}
.vault-page-eyebrow {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  12px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}
.vault-page-eyebrow::before {
  content:    '';
  width:      24px;
  height:     1px;
  background: var(--gold);
}
.vault-page-heading {
  font-family: var(--font-serif);
  font-size:   clamp(28px, 4vw, 44px);
  font-weight: 300;
  color:       var(--ivory);
  line-height: 1.1;
}
.vault-page-heading em {
  font-style: italic;
  color:      var(--gold-light);
}

/* ============================================================
   VAULT FOOTER
   ============================================================ */
.vault-footer {
  background:   var(--near-black);
  border-top:   1px solid var(--border-gold);
  padding:      28px 40px;
}
.vault-footer-inner {
  max-width:      1360px;
  margin:         0 auto;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            24px;
  flex-wrap:      wrap;
}
.vault-footer-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.vault-footer-brand img {
  height:  20px;
  width:   auto;
  opacity: 0.55;
}
.vault-footer-brand-text {
  font-family:    var(--font-sans);
  font-size:      11px;
  letter-spacing: 0.1em;
  color:          var(--taupe);
}
.vault-footer-legal {
  font-family:    var(--font-sans);
  font-size:      10px;
  letter-spacing: 0.05em;
  color:          var(--text-muted);
  text-align:     right;
}
.vault-footer-legal a {
  color:  var(--taupe);
  margin: 0 6px;
}
.vault-footer-legal a:hover { color: var(--gold); }

/* ============================================================
   BUTTONS & FORM ELEMENTS
   ============================================================ */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        12px 28px;
  border-radius:  var(--radius);
  font-family:    var(--font-sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor:         pointer;
  transition:     all 0.2s;
  border:         none;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color:      var(--midnight);
}
.btn-gold:hover {
  opacity:   0.9;
  transform: translateY(-1px);
  color:     var(--midnight);
}
.btn-outline {
  background:   transparent;
  border:       1px solid var(--border-gold);
  color:        var(--gold);
}
.btn-outline:hover {
  background: rgba(198,166,100,0.08);
  color:      var(--gold-light);
}
.btn-ghost {
  background: transparent;
  border:     none;
  color:      var(--taupe-light);
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost:hover { color: var(--ivory); }

/* ============================================================
   VAULT PANELS / CARDS (reusable)
   ============================================================ */
.vault-card {
  background:    var(--surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.vault-card-header {
  padding:       20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
}
.vault-card-title {
  font-family:  var(--font-serif);
  font-size:    19px;
  font-weight:  300;
  color:        var(--ivory);
}
.vault-card-body { padding: 24px; }

/* ============================================================
   TABLE STYLES (for CRM lists, reports)
   ============================================================ */
.vault-table-wrap { overflow-x: auto; }
.vault-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-sans);
  font-size:       13px;
}
.vault-table th {
  text-align:     left;
  padding:        10px 16px;
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--taupe);
  border-bottom:  1px solid var(--border-subtle);
  background:     var(--surface-2);
  white-space:    nowrap;
}
.vault-table td {
  padding:        13px 16px;
  border-bottom:  1px solid var(--border-subtle);
  color:          var(--taupe-light);
  vertical-align: middle;
}
.vault-table tbody tr:hover td {
  background: var(--surface-2);
  color:      var(--ivory);
}
.vault-table td:first-child { color: var(--ivory); font-weight: 400; }

/* Status badges */
.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 9px;
  border-radius:  20px;
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space:    nowrap;
}
.badge-gold    { background: rgba(198,166,100,0.15); color: var(--gold); border: 1px solid rgba(198,166,100,0.3); }
.badge-green   { background: rgba(74,158,107,0.15);  color: #6ecf95;     border: 1px solid rgba(74,158,107,0.3);  }
.badge-amber   { background: rgba(201,148,58,0.15);  color: #e8b76e;     border: 1px solid rgba(201,148,58,0.3);  }
.badge-red     { background: rgba(201,64,64,0.15);   color: #e07070;     border: 1px solid rgba(201,64,64,0.3);   }
.badge-neutral { background: rgba(138,125,107,0.12); color: var(--taupe-light); border: 1px solid rgba(138,125,107,0.2); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.gold-rule {
  height:     1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin:     32px 0;
}
.section-label {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  16px;
  display:        flex;
  align-items:    center;
  gap:            12px;
}
.section-label::before {
  content:    '';
  width:      24px;
  height:     1px;
  background: var(--gold);
  flex-shrink: 0;
}
.text-gold    { color: var(--gold); }
.text-ivory   { color: var(--ivory); }
.text-muted   { color: var(--taupe); }
.text-serif   { font-family: var(--font-serif); }
.text-center  { text-align: center; }
.hidden       { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Fade-in animation */
.fade-up {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-up.visible {
  opacity:   1;
  transform: translateY(0);
}

/* ============================================================
   LOGIN PAGE (wp-login.php override)
   ============================================================ */
.login body {
  background: var(--midnight) !important;
  font-family: var(--font-sans) !important;
}
.login #login {
  padding-top: 10vh;
  width:       340px;
}
.login h1 a {
  background-image: none !important;
  background-color: transparent;
  width:       auto;
  height:      auto;
  text-indent: 0;
  overflow:    visible;
  font-family: var(--font-serif);
  font-size:   28px;
  font-weight: 300;
  color:       var(--gold) !important;
  letter-spacing: 0.1em;
  text-shadow: none;
  display:     block;
  text-align:  center;
}
.login .login-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.login #loginform,
.login #lostpasswordform {
  background:    var(--surface) !important;
  border:        1px solid var(--border-gold) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    0 24px 64px rgba(0,0,0,0.6) !important;
  padding:       32px !important;
  margin-top:    0 !important;
}
.login .login-vault-header {
  text-align:  center;
  margin-bottom: 28px;
}
.login .login-vault-title {
  font-family:    var(--font-serif);
  font-size:      24px;
  font-weight:    300;
  color:          var(--ivory);
  margin-bottom:  4px;
}
.login .login-vault-sub {
  font-family:    var(--font-sans);
  font-size:      9px;
  letter-spacing: 0.35em;
  color:          var(--taupe);
  text-transform: uppercase;
}
.login label {
  font-family:    var(--font-sans) !important;
  font-size:      10px !important;
  font-weight:    500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color:          var(--taupe-light) !important;
}
.login input[type=text],
.login input[type=password],
.login input[type=email] {
  background:    var(--surface-2) !important;
  border:        1px solid rgba(138,125,107,0.35) !important;
  border-radius: var(--radius) !important;
  color:         var(--ivory) !important;
  font-family:   var(--font-sans) !important;
  font-size:     14px !important;
  padding:       12px 16px !important;
  box-shadow:    none !important;
}
.login input[type=text]:focus,
.login input[type=password]:focus {
  border-color: rgba(198,166,100,0.6) !important;
  box-shadow:   0 0 0 3px rgba(198,166,100,0.08) !important;
  outline:      none !important;
}
.login .button-primary {
  background:     linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  border:         none !important;
  border-radius:  var(--radius) !important;
  color:          var(--midnight) !important;
  font-family:    var(--font-sans) !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding:        14px 0 !important;
  width:          100% !important;
  box-shadow:     none !important;
  text-shadow:    none !important;
  transition:     opacity 0.2s !important;
}
.login .button-primary:hover {
  opacity: 0.9 !important;
  color:   var(--midnight) !important;
}
.login #nav, .login #backtoblog {
  text-align: center;
}
.login #nav a, .login #backtoblog a {
  color: var(--taupe) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
  color: var(--gold) !important;
}
.login .message,
.login .notice {
  background:    rgba(198,166,100,0.08) !important;
  border-left:   3px solid var(--gold) !important;
  border-radius: var(--radius) !important;
  color:         var(--taupe-light) !important;
  font-family:   var(--font-sans) !important;
  font-size:     13px !important;
  box-shadow:    none !important;
}
.login .shake { animation: shakeAnim 0.4s ease; }
@keyframes shakeAnim {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
/* Login footer branding */
.login #login_error {
  background:    rgba(201,64,64,0.1) !important;
  border-left:   3px solid var(--error) !important;
  border-radius: var(--radius) !important;
  color:         #e07070 !important;
  font-family:   var(--font-sans) !important;
  font-size:     13px !important;
  box-shadow:    none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .vault-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .vault-dash-lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .vault-nav { padding: 0 20px; }
  .vault-container { padding: 0 20px; }
  .vault-nav-links { display: none; }
  .vault-nav-links.open {
    display:          flex;
    flex-direction:   column;
    position:         absolute;
    top:              var(--nav-h);
    left:             0;
    right:            0;
    background:       rgba(11,11,12,0.98);
    border-bottom:    1px solid var(--border-gold);
    padding:          16px;
    gap:              4px;
  }
  .nav-mobile-toggle { display: flex; }
  .nav-agent-area .nav-agent-name { display: none; }
  .vault-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .vault-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .vault-welcome-bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .vault-tiles { grid-template-columns: 1fr; }
  .vault-kpi-strip { grid-template-columns: 1fr 1fr; }
  .vault-footer-inner { flex-direction: column; align-items: flex-start; }
  .vault-footer-legal { text-align: left; }
  .vault-nav-links a, .vault-nav-links .nav-link-btn { padding: 10px 16px; }
  .nav-brand-name { font-size: 12px; }
  .nav-vault-badge { display: none; }
}

/* ============================================================
   WORDPRESS BLOCK EDITOR ALIGNMENT HELPERS
   ============================================================ */
.wp-block-image img { border-radius: var(--radius); }
.wp-block-quote {
  border-left:  3px solid var(--gold);
  padding-left: 20px;
  font-family:  var(--font-serif);
  font-style:   italic;
  color:        var(--taupe-light);
}
.wp-block-separator {
  border: none;
  height: 1px;
  background: var(--border-gold);
}
.entry-content h1, .entry-content h2, .entry-content h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  color:       var(--ivory);
  margin:      1.5em 0 0.6em;
}
.entry-content p {
  color:       var(--taupe-light);
  line-height: 1.85;
  margin-bottom: 1.2em;
}
.entry-content a { color: var(--gold); }
.entry-content a:hover { color: var(--gold-light); text-decoration: underline; }