/* ============ CORE THEME ============ */
:root{
  --ink:#1C3D5A;
  --ink-2:#334;
  --muted:#667;
  --brand:#66A5AD;
  --brand-2:#168aad;
  --bg:#F9F9F9;
  --card:#ffffff;
  --line:#D3E3EC;
  --thead:#E0F1F1;
  --shadow:0 4px 12px rgba(0,0,0,.07);
}

/* ============ RESET ============ */
*{ box-sizing:border-box; transition:all .25s ease }
html{ scroll-behavior:smooth }
body{
  margin:0; padding:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
  animation:fadeIn .6s ease;
}
@keyframes fadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ============ HEADER & NAV ============ */
.sticky-header{
  background:linear-gradient(90deg,var(--ink),var(--brand));
  color:#fff; text-align:center; padding:28px 16px 18px;
  box-shadow:0 4px 6px rgba(0,0,0,.08);
}
.sticky-header h1{ margin:6px 0 6px; font-size:2rem; letter-spacing:.3px }
.sticky-header p{ margin:0; opacity:.9 }

.market-logo-container{ margin-bottom:10px }
.market-logo{ max-width:135px; height:auto }

.sticky-nav{
  position:sticky; top:0; z-index:50;
  display:flex; gap:28px; justify-content:center;
  padding:14px 16px; background:#EAF6F6; border-bottom:1px solid #e5eef3;
}
.sticky-nav a{
  color:var(--ink); text-decoration:none; font-weight:700;
  position:relative; padding-bottom:2px;
}
.sticky-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:var(--brand); transition:width .25s ease;
}
.sticky-nav a:hover{ color:var(--brand-2) }
.sticky-nav a:hover::after{ width:100% }

/* ============ LAYOUT ============ */
main{ padding:32px 5% }
.section{ margin-bottom:28px }
hr{
  border:0; height:1px; background:linear-gradient(90deg,#fff,#dfeaf0,#fff);
  margin:20px 0;
}

/* ============ TABLES ============ */
table{
  width:100%; border-collapse:collapse; margin-top:10px;
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
th,td{
  padding:14px 12px; text-align:left; border-bottom:1px solid #eef4f7;
}
th{ background:var(--thead); font-weight:700; color:#204561 }
tr:last-child td{ border-bottom:0 }
.hover-table tr:hover td{ background:#f6fbfd }

/* ============ FORMS (inputs & selects) ============ */
label{ display:block; font-weight:700; color:#204561; margin:8px 0 6px }
input[type="text"], input[type="number"], select{
  width:100%; height:48px; line-height:48px;
  padding:0 14px; font-size:16px; font-weight:600;
  color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04) inset;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
input::placeholder{ color:#98a6b3; font-weight:500 }

/* Only our styled dropdowns get a custom chevron */
.styled-dropdown{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231C3D5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
select:focus, input:focus{
  border-color:#D4AF37; outline:none;
  box-shadow:0 0 0 3px rgba(212,175,55,.18);
}

/* ============ CARDS / GRIDS ============ */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }

/* Fields inside cards get extra breathing room */
.field{ margin-bottom:12px }
.field:last-child{ margin-bottom:0 }

/* ============ BUTTONS ============ */
.actions{ margin-top:12px; display:flex; gap:12px; flex-wrap:wrap }
.btn{
  height:44px; padding:0 16px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn.ghost{ background:transparent; color:var(--brand); border-color:var(--brand) }
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

/* ============ RESULT STRIP (freight) ============ */
.result{ margin-top:12px }
.result-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.k{ color:var(--muted); font-size:.85rem }
.v{ font-size:1.15rem; font-weight:800 }

/* ============ META / TOOLTIP / TIMESTAMP ============ */
.timestamp{ color:#7b8b98; font-size:.9rem; margin-top:8px }

/* ============ CHARTS ============ */
.graph-box{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:16px;
  box-shadow:var(--shadow);
}
canvas{
  background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:10px; margin-top:10px;
}
.chartjs-tooltip{
  font-size:.85rem; background:rgba(0,0,0,.75); color:#fff;
  padding:6px 10px; border-radius:6px; pointer-events:none;
}

/* ============ COMMUNITY FEED ============ */
.feed{ display:grid; gap:10px }
.feed-item{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px;
}
.feed-top{ font-weight:800; color:#204561 }
.feed-mid{ color:var(--ink-2); margin-top:2px }
.feed-notes{ color:#4b5a69; font-style:italic; margin-top:4px }
.feed-time{ color:var(--muted); font-size:.85rem; margin-top:6px }

/* ============ CTA ============ */
.cta{
  background:linear-gradient(90deg,var(--ink),var(--brand));
  color:#fff; text-align:center; border-radius:18px; padding:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.cta h3{ margin:0 0 8px }
.cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:8px }

/* ============ FOOTER ============ */
.footer{
  background:linear-gradient(90deg,var(--ink),var(--brand));
  color:#fff; text-align:center; padding:18px; margin-top:28px; font-size:.95rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .grid-2,.grid-3{ grid-template-columns:1fr }
  .result-grid{ grid-template-columns:1fr 1fr }
  .sticky-nav{ gap:18px }
  .sticky-header h1{ font-size:1.7rem }
}
@media (max-width: 480px){
  main{ padding:26px 16px }
  .sticky-nav{ padding:12px 14px }
  input[type="text"], input[type="number"], select{ height:46px; line-height:46px }
}