:root {
  --bg: #0b0f14;
  --panel: rgba(255, 255, 255, 0.06);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.65);
  --line: rgba(255, 255, 255, 0.12);
  --gold: #d4af37;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  --radius: 18px;
  --max: 1180px;
  --sans:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(
      1200px 800px at 15% 10%,
      rgba(212, 175, 55, 0.2),
      transparent 60%
    ),
    radial-gradient(
      900px 700px at 80% 15%,
      rgba(45, 212, 191, 0.1),
      transparent 55%
    ),
    linear-gradient(180deg, #06080c, var(--bg) 38%, #070a0f);
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: min(var(--max), 100% - 32px);
  margin-inline: auto;
}

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(8, 10, 14, 0.55);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 14px;
}



.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.2px;
}

.brand__text small{
  display:block;
  margin-top:2px;
  font-weight:600;
  font-size:12px;
  color: rgba(255,255,255,.65);
  letter-spacing:0;
}

/* Coin-style circular mark */
.brand__mark{
  width:38px;
  height:38px;
  border-radius:999px;       /* circle holder */
  overflow:hidden;
  position:relative;
  flex:0 0 auto;

  /* nice ring + depth */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 14px 26px rgba(0,0,0,.35),
    0 0 0 3px rgba(212,175,55,.12),
    0 0 24px rgba(212,175,55,.18);

  /* subtle background behind transparent PNGs */
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

/* Logo image fits perfectly */
.brand__mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover; /* your logo is already circle, this keeps it tight */
  transform: scale(1.02);
}

/* glossy highlight on top-left (makes it feel premium) */
.brand__mark::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:80%;
  height:80%;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
  transform: rotate(20deg);
  pointer-events:none;
}

/* outer gold ring */
.brand__mark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.25);
  pointer-events:none;
}

/* optional hover polish */
.brand:hover .brand__mark{
  box-shadow:
    0 16px 30px rgba(0,0,0,.38),
    0 0 0 3px rgba(212,175,55,.16),
    0 0 30px rgba(212,175,55,.24);
  transform: translateY(-0.5px);
}
.brand:hover .brand__mark img{
  filter: saturate(1.08) contrast(1.05);
}



nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.navlink {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid transparent;
  font-size: 14px;
}
.navlink:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
.navlink[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* LIVE styling */
.pill--live{
  color: rgba(255,255,255,.82);
  border-color: rgba(212,175,55,.25);
}

/* pulsing dot */
.liveDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e; /* green */
  position: relative;
  box-shadow: 0 0 10px rgba(34,197,94,.55);
}

.liveDot::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(34,197,94,.55);
  opacity: .7;
  animation: livePulse 1.4s ease-out infinite;
}

@keyframes livePulse{
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* OFF styling (weekends) */
.pill--off{
  color: rgba(255,255,255,.65);
  border-color: rgba(255,255,255,.10);
}

.pill--off .liveDot{
  background: rgba(255,255,255,.35);
  box-shadow: none;
}
.pill--off .liveDot::after{
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .liveDot::after{ animation:none; }
}

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.95),
    rgba(212, 175, 55, 0.72)
  );
  color: #1b1404;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(212, 175, 55, 0.18);
}
.btn:active {
  transform: translateY(1px);
}

/* Mobile nav */
.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.75);
  position: relative;
}
.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
}
.hamburger span::before {
  top: -6px;
}
.hamburger span::after {
  top: 6px;
}

.mobileNav {
  display: none;
  padding: 0 0 14px 0;
}
.mobileNav a {
  display: block;
  padding: 12px 10px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  margin-top: 10px;
}


/* History Div */
/* History Div */
.history{
  width: min(var(--max), calc(100% - 32px));
  margin: 18px auto;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;

  height: 90vh;
  min-height: 90vh;

  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);

  /* important for nested scrolling in flex layouts */
  overflow: hidden;
}

.history strong{ color: var(--text); }

/* Make only the table area scroll */
/* Nice scrollbar (apply to the scrollable container) */
.history .table-wrap{
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.06);
}

/* Chrome/Edge/Safari */
.history .table-wrap::-webkit-scrollbar{
  width: 10px;   /* vertical */
  height: 10px;  /* horizontal */
}

.history .table-wrap::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

.history .table-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.06); /* gives padding look */
}

.history .table-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.32);
}

.history .table-wrap::-webkit-scrollbar-corner{
  background: transparent;
}


/* Filter box */
.filter-box{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px;
}

.filter-box .row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: end;
}

.filter-box label{
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--muted);
}

/* Inputs match the div theme */
.filter-box input[type="date"]{
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);      /* adjust if your theme is light */
  color: var(--text);
  outline: none;
  width: 180px;                      /* optional */
}

.filter-box input[type="date"]:focus{
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

.filter-box .meta{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
/* Redesigned table (works great inside .table-wrap scroll container) */
/* Redesigned table (works great inside .table-wrap scroll container) */
/* Redesigned table (works great inside .table-wrap scroll container) */
/* Redesigned table (works great inside .table-wrap scroll container) */
/* Redesigned table (works great inside .table-wrap scroll container) */
.history table{
  width: 100%;
  border-collapse: separate;   /* allows cleaner separators */
  border-spacing: 0;
  font-size: 14px;
}

/* Sticky header */
.history thead th{
  position: sticky;
  top: 0;
  z-index: 5;

  text-align: left;
  font-weight: 600;
  letter-spacing: .2px;

  color: var(--text);
  background: rgba(0,0,0,.15);              /* header tint */
  backdrop-filter: blur(8px);                /* nice glass effect */
  -webkit-backdrop-filter: blur(8px);

  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Header rounded corners */
.history thead th:first-child{
  border-top-left-radius: 12px;
}
.history thead th:last-child{
  border-top-right-radius: 12px;
}

/* Body cells */
.history tbody td{
  padding: 12px 14px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;                        /* keeps rows tidy */
}

/* Zebra striping */
.history tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.02);
}
.history tbody tr:nth-child(even) td{
  background: rgba(255,255,255,.00);
}

/* Hover highlight */
.history tbody tr:hover td{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* Make first column stand out a bit (Date) */
.history tbody td:first-child{
  color: var(--text);
  font-weight: 500;
}

/* Optional: align numeric columns to the right */
.history td:nth-child(2),
.history td:nth-child(3),
.history td:nth-child(4),
.history td:nth-child(5),
.history td:nth-child(6),
.history td:nth-child(7){
  text-align: right;
  font-variant-numeric: tabular-nums; /* nicer number alignment */
}

/* Optional: soften last row border */
.history tbody tr:last-child td{
  border-bottom: 0;
}





/* Chart card */
.GoldPriceChart{
  width: min(var(--max), calc(100% - 32px));
  margin: 18px auto;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;

  /* KEY: give a real height so children can be 100% */
  height: 90vh;          /* change to whatever you want */
  min-height: 90vh;      /* optional */
  
  display: flex;
  flex-direction: column; /* title above chart */
  gap: 12px;
  color: var(--muted);
}

.GoldPriceChart strong{ color: var(--text); }

/* Title */
.chart-title{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Make the widget wrapper fill remaining space */
.chart-body{
  flex: 1;        /* take remaining height under title */
  min-height: 0;  /* IMPORTANT for flex children */
}

/* TradingView should be fluid & fill */
.tradingview-widget-container,
.tradingview-widget-container__widget{
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

.tradingview-widget-copyright {
  opacity: 0.2;
  font-size: 12px;
}


/* Placeholder */
.placeholder {
  width: min(var(--max, 1100px), calc(100% - 32px));
  margin: 18px auto;
  background: var(--panel, #111);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, none);
  padding: 22px;

  min-height: 70vh;            /* ✅ was 80vh */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;

  align-items: start;           /* ✅ widgets start at top */
  justify-items: stretch;
  text-align: left;
  color: var(--muted, #aaa);
}


/* General Div for T&C */
.GeneralCard{
  width: min(var(--max), calc(100% - 32px));
  margin: 18px auto;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;

  /* Flexible height based on content */
  height: auto;
  min-height: 0; /* optional; helps in some flex/grid layouts */

  display: flex;
  flex-direction: column; /* title above chart */
  gap: 12px;
  color: var(--muted);
}

.GeneralCard strong{ color: var(--text); }

/* Headings inside GeneralCard */
.GeneralCard h1,
.GeneralCard h2,
.GeneralCard h3{
  margin: 0;                 /* avoid default big gaps */
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* Sizes + spacing */
.GeneralCard h1{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  margin-bottom: 6px;
}

.GeneralCard h2{
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 4px;
}

.GeneralCard h3{
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 650;
  margin-top: 6px;
  margin-bottom: 2px;
  color: color-mix(in srgb, var(--text) 90%, var(--muted)); /* subtle hierarchy */
}

/* If a heading is the last thing before a chart/section */
.GeneralCard h1 + *,
.GeneralCard h2 + *,
.GeneralCard h3 + *{
  margin-top: 0;
}




/* keep content from forcing overflow */
.placeholder > * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* widget column: make it fill */
.widget-col {
  min-width: 0;
  width: 100%;
}

/* TradingView containers should be fluid (left widget) */
.tradingview-widget-container,
.tradingview-widget-container__widget {
  width: 100% !important;
  max-width: 100%;
}

/* ✅ Right widget: force the embed area to be 550px tall */
.placeholder > div:last-child .tradingview-widget-container,
.placeholder > div:last-child .tradingview-widget-container__widget {
  height: 550px !important;
}

/* responsive: stack columns on smaller screens */
@media (max-width: 720px) {
  .placeholder {
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* optional: keep right widget full width on mobile */
  .placeholder > div:last-child .tradingview-widget-container,
  .placeholder > div:last-child .tradingview-widget-container__widget {
    width: 100% !important;
  }
}

.placeholder strong {
  color: var(--text, #fff);
}

/* --- BLOCK SELECT + INTERACTION INSIDE --- */
.placeholder {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Disable all clicks/taps inside */
.placeholder * {
  pointer-events: none !important;
}

/* Optional: keep it from overflowing horizontally */
.tradingview-widget-container {
  overflow: hidden;
}

/* Footer */
footer {
  margin-top: 18px;
  padding: 18px 0 30px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 10, 14, 0.35);
}
.foot {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: start;
}
.footBrand strong {
  color: rgba(255, 255, 255, 0.85);
}
.footBrand small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.55);
}

.footNav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  justify-items: start;
}
.footNav a {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  width: 100%;
}
.footNav a:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
}

.fineprint {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

/* Responsive rules */
@media (max-width: 980px) {
  nav {
    display: none;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .foot {
    grid-template-columns: 1fr;
  }
}