/*
  The Ledger — Gothic PoE Visual System v3
  "What the official site would look like if GGG hired a luxury design team."

  Design DNA:
  - PoE-authentic colors (#886437 bronze, #AF6025 unique, #c8c8c8 text)
  - Cinzel serif for display, Inter for body, JetBrains Mono for data
  - Bronze frame everything — the single most recognizable PoE pattern
  - Elevation through surface color, not shadows
  - Noise texture + radial glow for atmosphere
  - Data density over whitespace
*/

/* ═══════════════════════════════════════════════════════
   1. DESIGN TOKENS — PoE-Authentic Palette
═══════════════════════════════════════════════════════ */
:root {
  /* Surfaces — near-black with warm undertone, not pure black */
  --bg:       #080608;
  --s1:       #0e0c0a;
  --s2:       #151210;
  --s3:       #1e1a16;
  --s4:       #28221c;

  /* Borders — the signature PoE bronze */
  --br:       rgba(136,100,55,0.18);
  --br2:      rgba(136,100,55,0.30);
  --br-solid: #886437;

  /* Text — PoE canonical gray hierarchy, NOT white */
  --tx:       #c8c8c8;
  --tx2:      #8a8070;
  --tx3:      #5a5040;

  /* Gold — two-tier system: bright for interactive, muted for passive */
  --gold:     #AF6025;
  --gold-bright: #e9cf9f;
  --gold-bg:  rgba(175,96,37,0.08);
  --gold-b:   rgba(175,96,37,0.25);

  /* Semantic */
  --green:    #26a69a;
  --green-bg: rgba(38,166,154,0.10);
  --green-b:  rgba(38,166,154,0.25);
  --teal:     #1BA29B;
  --up:       #26a69a;
  --dn:       #D14E4E;
  --red:      #D14E4E;
  --red-bg:   rgba(209,78,78,0.08);
  --blue:     #366492;
  --blue-bg:  rgba(54,100,146,0.08);

  /* PoE Rarity Colors — sacred, do not change */
  --rarity-normal:   #c8c8c8;
  --rarity-magic:    #8888FF;
  --rarity-rare:     #FFFF77;
  --rarity-unique:   #AF6025;
  --rarity-currency: #AA9E82;
  --rarity-gem:      #1BA29B;
  --rarity-div:      #0EBAFF;
  --rarity-corrupt:  #D20000;

  /* Typography */
  --display: 'Cinzel', Georgia, serif;
  --sans:    'Inter', -apple-system, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --serif:   'Cinzel', Georgia, serif;
}

/* ═══════════════════════════════════════════════════════
   2. BASE — Body, Scrollbars, Selection
═══════════════════════════════════════════════════════ */
html, body {
  background: var(--bg) !important;
  color: var(--tx) !important;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth !important; }

/* Noise texture — subtle parchment grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none !important;
  z-index: 99;
  mix-blend-mode: overlay;
}

/* Atmospheric top glow — candlelight on parchment */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 400px;
  background: radial-gradient(ellipse at 50% -100px, rgba(175,96,37,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Selection */
::selection {
  background: rgba(175,96,37,0.30) !important;
  color: #fff !important;
}

/* Scrollbar — bronze-tinted */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(136,100,55,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(136,100,55,0.40); }

/* Focus states — bronze */
input:focus, select:focus, button:focus-visible {
  outline: 2px solid rgba(175,96,37,0.4) !important;
  outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════
   3. NAVIGATION — Gothic header
═══════════════════════════════════════════════════════ */
.nav {
  height: 60px !important;
  background: rgba(8,6,8,0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(136,100,55,0.25) !important;
  box-shadow: 0 1px 0 rgba(175,96,37,0.08), 0 8px 32px rgba(0,0,0,0.6) !important;
}

/* Brand — Cinzel serif, gradient gold text */
.brand {
  position: relative;
  overflow: visible;
}
.nav-sub {
  font-size: 10px;
  color: var(--tx3);
  font-style: italic;
}

/* League button — bronze border */
.league-btn {
  background: var(--s2) !important;
  border: 1px solid rgba(136,100,55,0.25) !important;
  border-radius: 3px !important;
  color: var(--tx2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}
.league-btn:hover {
  border-color: var(--br-solid) !important;
  color: var(--gold-bright) !important;
}

/* Nav tabs — angular PoE style, not rounded pills */
.nt {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  border-radius: 2px !important;
  color: var(--tx3) !important;
  transition: all 0.15s ease !important;
  border: 1px solid transparent !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}
.nt:hover:not(.on) {
  color: var(--tx) !important;
  background: rgba(136,100,55,0.06) !important;
}
.nt.on {
  background: rgba(175,96,37,0.10) !important;
  color: var(--gold-bright) !important;
  border-color: rgba(136,100,55,0.30) !important;
  box-shadow: none !important;
}

/* API status */
.api-status { border-radius: 2px !important; }
.api-status.live    { background: rgba(38,166,154,0.10) !important; color: var(--green) !important; }
.api-status.loading { background: rgba(255,255,255,0.03) !important; color: var(--tx3) !important; }
.api-status.stale   { background: rgba(175,96,37,0.10) !important; color: var(--gold) !important; }

.live-dot { background: var(--green) !important; }
.clk { color: var(--tx3) !important; font-size: 11px !important; }

/* ═══════════════════════════════════════════════════════
   4. HERO CARD — Atmospheric with corner accents
═══════════════════════════════════════════════════════ */
.hero-card {
  background: linear-gradient(135deg, #120e0a 0%, #0a0806 100%) !important;
  border: 1px solid rgba(136,100,55,0.30) !important;
  border-radius: 3px !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(233,207,159,0.04) !important;
  position: relative !important;
}
/* Top edge glow — bronze/gold gradient line */
.hero-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 10%; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(175,96,37,0.5), rgba(233,207,159,0.2), rgba(175,96,37,0.5), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Subtle radial glow — warm amber atmospheric light */
.hero-card::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(175,96,37,0.05) 0%, transparent 70%) !important;
}

.hero-label { color: var(--gold) !important; letter-spacing: 0.08em !important; }
.hero-pair  {
  font-family: var(--display) !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: var(--gold-bright) !important;
}
.hero-sub { color: var(--tx3) !important; }
.hero-divider { background: rgba(136,100,55,0.20) !important; }
.hero-stat-val-big.gold { color: var(--gold-bright) !important; }
.hero-stat-lbl { color: var(--tx3) !important; letter-spacing: 0.07em !important; }

/* ═══════════════════════════════════════════════════════
   5. LEAGUE LIFECYCLE BANNER
═══════════════════════════════════════════════════════ */
.league-lifecycle { border-radius: 3px !important; }
.llc-phase-day { font-family: var(--display) !important; font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════
   6. TOOLBAR — Angular PoE pills
═══════════════════════════════════════════════════════ */
.tbtn {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(136,100,55,0.18) !important;
  color: var(--tx3) !important;
  background: transparent !important;
  transition: all 0.12s ease !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
.tbtn:hover:not(.on) {
  color: var(--tx) !important;
  background: rgba(136,100,55,0.06) !important;
  border-color: rgba(136,100,55,0.25) !important;
}
.tbtn.on {
  background: rgba(175,96,37,0.12) !important;
  color: var(--gold-bright) !important;
  border-color: rgba(136,100,55,0.35) !important;
}

.utog  { border-radius: 3px !important; background: var(--s2) !important; border-color: rgba(136,100,55,0.18) !important; }
.ub    { border-radius: 3px !important; }
.ub.on { background: var(--s3) !important; border-radius: 3px !important; color: var(--gold-bright) !important; }

.cap-inp {
  border-radius: 3px !important;
  background: var(--s2) !important;
  border: 1px solid rgba(136,100,55,0.20) !important;
}
.cap-inp:focus { border-color: var(--br-solid) !important; }

/* ═══════════════════════════════════════════════════════
   7. STAT CARDS — Bronze accented
═══════════════════════════════════════════════════════ */
.sc {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.18) !important;
  background: var(--s1) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Top-edge gold accent line */
.sc::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--gold), rgba(175,96,37,0.3)) !important;
  pointer-events: none !important;
}

.slbl {
  font-family: var(--display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  color: var(--tx3) !important;
}
.sval { font-family: var(--mono) !important; }
.sval.gold  { color: var(--gold-bright) !important; }
.sval.green { color: var(--green) !important; }

/* ═══════════════════════════════════════════════════════
   8. FLIP TABLE — The main data panel
═══════════════════════════════════════════════════════ */
.tbl-title {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.flip-table {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.22) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
}
.th {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(136,100,55,0.18) !important;
}
.th span.sort-active { color: var(--gold-bright) !important; }

.tr {
  border-bottom: 1px solid rgba(136,100,55,0.10) !important;
  transition: background 0.1s ease !important;
}
/* Alternating row tint — barely visible rhythm */
.tr:nth-child(even) {
  background: rgba(136,100,55,0.015) !important;
}
/* Hover — warm bronze tint */
.tr:hover {
  background: rgba(175,96,37,0.05) !important;
}
.tr.sel {
  background: rgba(175,96,37,0.08) !important;
  border-left: 2px solid var(--gold) !important;
}
.tr.fav-row:not(.sel) { border-left: 2px solid var(--green) !important; }

/* ═══════════════════════════════════════════════════════
   9. ROW CELLS — Badges, spreads, profit
═══════════════════════════════════════════════════════ */
.fstar.on { color: var(--gold-bright) !important; }
.bell.on  { color: var(--gold-bright) !important; }

/* Rank badges */
.rank-badge { border-radius: 3px !important; }
.rank-1 { background: rgba(175,96,37,0.18) !important; color: var(--gold-bright) !important; border: 1px solid rgba(175,96,37,0.35) !important; }
.rank-2 { background: rgba(170,158,130,0.10) !important; color: var(--rarity-currency) !important; }
.rank-3 { background: rgba(136,100,55,0.10) !important; color: var(--br-solid) !important; }
.rank-n { background: rgba(200,200,200,0.03) !important; }

/* Spread */
.spr.hi { color: var(--green) !important; }
.spr.md { color: var(--gold-bright) !important; }

/* Profit */
.prf.has { color: var(--green) !important; }
.dvv     { color: var(--gold-bright) !important; }

/* Data quality badges — angular PoE style */
.cbadge   { border-radius: 2px !important; }
.c-hi { background: rgba(38,166,154,0.10) !important; color: var(--green) !important; border: 1px solid rgba(38,166,154,0.25) !important; }
.c-me { background: rgba(175,96,37,0.08) !important; color: var(--gold) !important;  border: 1px solid rgba(175,96,37,0.22) !important; }
.c-lo { background: rgba(200,200,200,0.03) !important; color: var(--tx3) !important; border: 1px solid rgba(200,200,200,0.06) !important; }

/* Fill speed */
.fill-fast { background: rgba(38,166,154,0.10) !important; color: var(--green) !important; border-radius: 2px !important; }
.fill-med  { background: rgba(175,96,37,0.10) !important; color: var(--gold) !important; border-radius: 2px !important; }
.fill-slow { background: rgba(209,78,78,0.10) !important; color: var(--red) !important;  border-radius: 2px !important; }

/* Spark change */
.sc-up { color: var(--green) !important; }
.sc-dn { color: var(--red) !important; }

/* ═══════════════════════════════════════════════════════
   10. DETAIL PANEL — Bronze-framed
═══════════════════════════════════════════════════════ */
.dp {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.25) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.50) !important;
  overflow: hidden !important;
  position: relative;
}
/* Top edge glow */
.dp::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175,96,37,0.40), transparent);
  pointer-events: none;
  z-index: 1;
}

.dp-bar  { background: var(--s2) !important; border-bottom: 1px solid rgba(136,100,55,0.15) !important; }
.dp-hide { border-radius: 2px !important; border: 1px solid rgba(136,100,55,0.20) !important; }

.dp-bico { border-radius: 4px !important; background: var(--s3) !important; }
.dp-htitle {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: var(--gold-bright) !important;
}

/* Metric cards */
.mc { border-radius: 3px !important; border-color: rgba(136,100,55,0.18) !important; }
.mv.green { color: var(--green) !important; }
.mv.gold  { color: var(--gold-bright) !important; }

/* Ratio box */
.ratio {
  background: rgba(175,96,37,0.05) !important;
  border: 1px solid rgba(136,100,55,0.25) !important;
  border-radius: 3px !important;
}
.ri .rv { color: var(--gold-bright) !important; }

/* Copy button — gold CTA */
.copy-btn {
  background: var(--gold) !important;
  color: #0A0800 !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}
.copy-btn:hover { background: #c87030 !important; }
.copy-btn.ok    { background: var(--green) !important; color: #001a10 !important; }

/* Exec steps */
.exec-steps { border-radius: 3px !important; border-color: rgba(136,100,55,0.18) !important; }
.exec-num   { border-radius: 3px !important; background: var(--gold) !important; color: #0A0800 !important; }

/* Plain english toggle */
.plain-toggle { border-radius: 3px !important; }

/* Feedback buttons */
.fb-btn { border-radius: 3px !important; }
.fb-btn.yes     { color: var(--green) !important; border-color: rgba(38,166,154,0.25) !important; }
.fb-btn.partial { color: var(--gold-bright) !important; border-color: rgba(175,96,37,0.25) !important; }
.fb-btn.no      { color: var(--red) !important;  border-color: rgba(209,78,78,0.25) !important; }
.fb-stat  { border-radius: 3px !important; }

/* ═══════════════════════════════════════════════════════
   11. LEDGER / BRIEFING
═══════════════════════════════════════════════════════ */
.ledger-wrap { border-radius: 3px !important; }
.ledger-share { border-radius: 3px !important; background: var(--gold) !important; color: #0A0800 !important; }
.ledger-stat-val { color: var(--gold-bright) !important; }
.ledger-trade-result.yes     { color: var(--green) !important; }
.ledger-trade-result.partial { color: var(--gold-bright) !important; }
.ledger-trade-result.no      { color: var(--red) !important; }
.briefing-bar {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.18) !important;
}

/* ═══════════════════════════════════════════════════════
   12. ONBOARDING MODAL
═══════════════════════════════════════════════════════ */
.onboard-box {
  border-radius: 4px !important;
  border: 1px solid rgba(136,100,55,0.30) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.75) !important;
}
.onboard-title {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--gold-bright) !important;
}
.onboard-num      { border-radius: 3px !important; background: var(--gold) !important; color: #0A0800 !important; }
.onboard-win      { border-radius: 3px !important; }
.onboard-win-label { color: var(--green) !important; }
.onboard-win-stat strong { color: var(--gold-bright) !important; }
.onboard-dismiss  { border-radius: 3px !important; background: var(--gold) !important; color: #0A0800 !important; font-weight: 700 !important; }
.onboard-dismiss:hover { background: #c87030 !important; }

/* ═══════════════════════════════════════════════════════
   13. META SECTION — Market intelligence
═══════════════════════════════════════════════════════ */
.meta-card, .meta-farming {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.18) !important;
  border-top: 2px solid var(--gold) !important;
}
.meta-hero {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.20) !important;
  border-left: 3px solid var(--gold) !important;
}
.meta-hero-val { color: var(--gold-bright) !important; }

/* Section titles — decorative line treatment */
.meta-section-title {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--tx2) !important;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════════
   14. ALERTS / INTEL (Oracle)
═══════════════════════════════════════════════════════ */
.al-row  { border-radius: 3px !important; }
.alb     { border-radius: 3px !important; }
.add-al  { border-radius: 3px !important; }

.intel-signal {
  border-radius: 3px !important;
  border: 1px solid rgba(136,100,55,0.18) !important;
}
.intel-signal.sig-hot  { border-left: 3px solid var(--green) !important; }
.intel-signal.sig-warm { border-left: 3px solid var(--gold) !important; }
.intel-sig-ico { border-radius: 4px !important; }
.intel-sig-action { border-radius: 3px !important; color: var(--green) !important; }

/* ═══════════════════════════════════════════════════════
   15. DISCLOSURE BAR
═══════════════════════════════════════════════════════ */
.disclosure-bar {
  border-radius: 3px !important;
  background: rgba(54,100,146,0.06) !important;
  border: 1px solid rgba(54,100,146,0.15) !important;
}

/* ═══════════════════════════════════════════════════════
   16. HISTORICAL / LEDGER TAB
═══════════════════════════════════════════════════════ */
#hist-chart {
  border-radius: 3px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.30) !important;
  border: 1px solid rgba(136,100,55,0.18) !important;
}

/* ═══════════════════════════════════════════════════════
   17. CANDLE CHART COLORS
═══════════════════════════════════════════════════════ */
.candle-up .candle-wick { stroke: var(--green) !important; }
.candle-up .candle-body { fill: var(--green) !important; }
.candle-dn .candle-wick { stroke: var(--red) !important; }
.candle-dn .candle-body { fill: var(--red) !important; }

/* ═══════════════════════════════════════════════════════
   18. MISC ELEMENTS
═══════════════════════════════════════════════════════ */
.toast   { border-radius: 3px !important; border: 1px solid rgba(136,100,55,0.25) !important; }
.aform   { border-radius: 3px !important; border-color: rgba(136,100,55,0.25) !important; }
.nw-search { border-radius: 3px !important; }
.nw-search:focus { border-color: var(--br-solid) !important; }
.nw-inp:focus    { border-color: var(--br-solid) !important; }

/* Session bar */
#session-bar {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(136,100,55,0.15) !important;
}

/* Heat map tile hover */
#heatmap-container > div > div:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

/* ═══════════════════════════════════════════════════════
   19. ANIMATIONS — Blur-reveal & entrance
═══════════════════════════════════════════════════════ */

/* Hero entrance — fade + slight rise */
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
}
.hero-card.visible {
  animation: heroSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Table row entrance — staggered fade */
@keyframes rowFade {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tr {
  animation: rowFade 0.2s ease forwards !important;
}

/* Stat card entrance — blur reveal */
@keyframes blurReveal {
  from { opacity: 0; transform: translateY(6px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
}
.sc {
  animation: blurReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.sc:nth-child(1) { animation-delay: 0s !important; }
.sc:nth-child(2) { animation-delay: 0.05s !important; }
.sc:nth-child(3) { animation-delay: 0.10s !important; }
.sc:nth-child(4) { animation-delay: 0.15s !important; }

/* Detail panel entrance — blur reveal */
.dp {
  animation: heroSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Meta card entrance */
.meta-card, .meta-farming {
  animation: blurReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Smooth transitions for all interactive elements */
.tbtn, .ub, .nt {
  transition: all 0.15s ease !important;
}

/* ═══════════════════════════════════════════════════════
   20. ITEM TOOLTIP — PoE authentic frame
═══════════════════════════════════════════════════════ */
#item-tooltip {
  background: #0e0c0a !important;
  border: 1px solid var(--br-solid) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.9) !important;
}

/* ═══════════════════════════════════════════════════════
   21. STASH VALUE TAB — PoE game-authentic
   Keep the in-game aesthetic but align border colors
═══════════════════════════════════════════════════════ */
.stash-wrap {
  border-color: rgba(136,100,55,0.40) !important;
}
.stash-tabs {
  border-bottom-color: rgba(136,100,55,0.40) !important;
}
.stash-tab.active {
  color: var(--gold-bright) !important;
  border-bottom-color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════
   22. FOOTER — Subtle, with Cinzel title treatment
═══════════════════════════════════════════════════════ */
#site-footer {
  border-top: 1px solid rgba(136,100,55,0.12) !important;
}