/* ─────────────────────────────────────────────
   InvestBuffet — Market Pages Design System
   Shared by: equities, crypto, commodities,
   indices, charts, analysis, screener, calendars
   ───────────────────────────────────────────── */

:root {
  --bg:       #0a0a0a;
  --bg2:      #111111;
  --bg3:      #1a1a1a;
  --bg4:      #202020;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  --text:     #f0f0f0;
  --text-2:   #888888;
  --text-3:   #505050;
  --green:    #4ade80;
  --green-dim:rgba(74,222,128,0.10);
  --red:      #f87171;
  --red-dim:  rgba(248,113,113,0.10);
  --blue:     #94adc8;
  --blue-dim: rgba(148,173,200,0.10);
  --yellow:   #fbbf24;
  --radius-sm:10px;
  --radius:   16px;
  --radius-lg:24px;
  --shadow:   0 4px 24px rgba(0,0,0,0.4);
  --font:     "Segoe UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration:none; color:inherit; }

/* ── Background canvas ── */
.bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.bg-canvas::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%,   rgba(255,255,255,0.018) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 10%,  rgba(255,255,255,0.012) 0%, transparent 55%),
    radial-gradient(ellipse 600px 700px at 50% 100%, rgba(255,255,255,0.008) 0%, transparent 60%);
}

/* ── Navbar ── */
.navbar {
  position: relative; z-index: 100;
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(20px);
}
.navbar-inner {
  display: flex; align-items: center; gap: 24px;
  height: 66px;
  width: min(1280px, 100% - 40px);
  margin-inline: auto;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-icon {
  width:36px; height:36px; border-radius:9px;
  background:#1a1a1a; border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:0.95rem; color:#fff;
}
.nav-logo-text { font-size:1.18rem; font-weight:800; letter-spacing:-0.04em; }
.nav-logo-text span { color:#fff; }
.nav-links {
  display:flex; align-items:center; gap:2px;
  margin-left:8px; list-style:none;
}
.nav-links a {
  padding:7px 14px; border-radius:var(--radius-sm);
  font-size:0.88rem; font-weight:600; color:var(--text-2);
  transition:color 0.15s, background 0.15s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--text); background:rgba(255,255,255,0.05); }
.nav-links a.active { color:#fff; }
.nav-spacer { flex:1; }
.nav-cta { display:flex; align-items:center; gap:10px; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 20px; border-radius:var(--radius-sm);
  font-size:0.87rem; font-weight:700; cursor:pointer;
  transition:all 0.18s ease; white-space:nowrap;
  border:none; font-family:var(--font);
}
.btn-ghost {
  color:var(--text-2); background:transparent;
  border:1px solid var(--border);
}
.btn-ghost:hover {
  color:var(--text); border-color:rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
}
.btn-primary {
  background:#ffffff; color:#000000;
  box-shadow:0 2px 12px rgba(255,255,255,0.10);
}
.btn-primary:hover {
  transform:translateY(-1px);
  background:rgba(255,255,255,0.88);
  box-shadow:0 4px 20px rgba(255,255,255,0.16);
}
.btn-sm { padding:6px 14px; font-size:0.80rem; }
.btn-xs { padding:5px 11px; font-size:0.76rem; }

/* ── Page Layout ── */
.page-wrap {
  position:relative; z-index:1;
  flex:1; padding:36px 0 80px;
}
.container {
  width:min(1280px, 100% - 40px);
  margin-inline:auto;
}

/* ── Page Header ── */
.page-header { margin-bottom:28px; }
.page-header-row {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.page-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  font-size:0.73rem; font-weight:700; color:var(--text-2);
  letter-spacing:0.05em; text-transform:uppercase;
  margin-bottom:12px;
}
.page-badge .dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green); animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{ opacity:1; } 50%{ opacity:0.4; }
}
.page-title {
  font-size:1.9rem; font-weight:800;
  letter-spacing:-0.03em; line-height:1.1;
}
.page-title .hl { color:#fff; }
.page-subtitle {
  font-size:0.9rem; color:var(--text-2);
  margin-top:6px; line-height:1.6;
}

/* ── Filter Bar ── */
.filter-bar {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:20px;
}
.filter-tab {
  padding:7px 16px; border-radius:999px;
  font-size:0.83rem; font-weight:600; cursor:pointer;
  border:1px solid var(--border); color:var(--text-2);
  background:transparent; font-family:var(--font);
  transition:all 0.15s;
}
.filter-tab:hover { border-color:var(--border2); color:var(--text); }
.filter-tab.active {
  background:#fff; color:#000;
  border-color:#fff;
}
.filter-search {
  flex:1; max-width:280px;
  padding:7px 14px 7px 36px;
  border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text); font-size:0.85rem; font-family:var(--font);
  outline:none; transition:border-color 0.15s;
  position:relative;
}
.filter-search:focus { border-color:var(--border2); }
.search-wrap { position:relative; }
.search-icon {
  position:absolute; left:12px; top:50%;
  transform:translateY(-50%);
  color:var(--text-3); font-size:0.9rem; pointer-events:none;
}
.filter-spacer { flex:1; }
.filter-sort {
  padding:7px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text-2); font-size:0.83rem; font-family:var(--font);
  outline:none; cursor:pointer;
}

/* ── Data Table ── */
.card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--border);
}
.card-title {
  font-size:1rem; font-weight:700; color:var(--text);
}
.card-sub { font-size:0.82rem; color:var(--text-2); margin-top:2px; }
.card-meta { font-size:0.78rem; color:var(--text-3); }

.data-table {
  width:100%; border-collapse:collapse;
  font-size:0.875rem;
}
.data-table thead { border-bottom:1px solid var(--border); }
.data-table th {
  padding:11px 16px; text-align:left;
  font-size:0.73rem; font-weight:700;
  color:var(--text-3); text-transform:uppercase;
  letter-spacing:0.06em; cursor:pointer;
  white-space:nowrap; user-select:none;
}
.data-table th:hover { color:var(--text-2); }
.data-table th.right,
.data-table td.right { text-align:right; }
.data-table td {
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,0.04);
  white-space:nowrap;
}
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr { transition:background 0.12s; }
.data-table tbody tr:hover { background:rgba(255,255,255,0.025); }

/* ── Market cells ── */
.sym-cell { display:flex; align-items:center; gap:10px; }
.sym-icon {
  width:34px; height:34px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:800; color:var(--text-2);
  flex-shrink:0;
}
.sym-name { font-weight:700; color:var(--text); font-size:0.9rem; }
.sym-full { font-size:0.78rem; color:var(--text-2); margin-top:1px; }

.price-cell { font-weight:700; font-size:0.92rem; }
.change-cell { font-weight:600; }
.change-cell.up   { color:var(--green); }
.change-cell.down { color:var(--red); }
.change-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:5px;
  font-size:0.78rem; font-weight:700;
}
.change-badge.up   { background:var(--green-dim); color:var(--green); }
.change-badge.down { background:var(--red-dim);   color:var(--red); }

.vol-cell { color:var(--text-2); font-size:0.85rem; }
.cap-cell { color:var(--text-2); font-size:0.85rem; }

/* Sparkline placeholder */
.spark {
  width:72px; height:28px;
  display:inline-block; vertical-align:middle;
}

/* ── Stats Row ── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin-bottom:20px;
}
.stat-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  transition:border-color 0.15s;
}
.stat-card:hover { border-color:var(--border2); }
.stat-label { font-size:0.75rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; }
.stat-val { font-size:1.5rem; font-weight:800; margin:6px 0 4px; }
.stat-change { font-size:0.82rem; font-weight:600; }
.stat-change.up   { color:var(--green); }
.stat-change.down { color:var(--red); }

/* ── Calendar ── */
.cal-grid { display:flex; flex-direction:column; gap:2px; }
.cal-row {
  display:grid;
  grid-template-columns:110px 1fr 1fr 1fr 1fr;
  align-items:center; gap:16px;
  padding:13px 20px; border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:all 0.12s;
}
.cal-row:hover { background:rgba(255,255,255,0.025); border-color:var(--border); }
.cal-row.header {
  border-bottom:1px solid var(--border);
  padding-bottom:10px; margin-bottom:4px;
  border-radius:0;
}
.cal-row.header span {
  font-size:0.72rem; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.06em;
}
.cal-date { font-size:0.83rem; color:var(--text-2); }
.cal-date strong { color:var(--text); font-size:0.88rem; display:block; }
.cal-event { font-size:0.88rem; font-weight:600; }
.cal-country {
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.78rem; color:var(--text-2);
}
.cal-impact {
  display:inline-flex; align-items:center; gap:3px;
}
.cal-impact .dot {
  width:6px; height:6px; border-radius:50%;
}
.cal-impact.high .dot   { background:var(--red); box-shadow:0 0 6px var(--red); }
.cal-impact.medium .dot { background:var(--yellow); }
.cal-impact.low .dot    { background:var(--text-3); }
.cal-val { font-size:0.85rem; font-weight:600; }
.cal-prev { font-size:0.82rem; color:var(--text-2); }

/* ── Analysis ── */
.analysis-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:20px;
}
.analysis-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:border-color 0.18s, box-shadow 0.18s;
}
.analysis-card:hover {
  border-color:var(--border2);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.analysis-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:14px;
}
.analysis-sym { font-size:1.1rem; font-weight:800; }
.analysis-co { font-size:0.8rem; color:var(--text-2); margin-top:2px; }
.analysis-rating {
  padding:5px 12px; border-radius:7px;
  font-size:0.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.04em;
}
.rating-buy    { background:var(--green-dim); color:var(--green); }
.rating-sell   { background:var(--red-dim);   color:var(--red); }
.rating-hold   { background:rgba(251,191,36,0.12); color:var(--yellow); }
.analysis-target { font-size:1.4rem; font-weight:800; margin:8px 0 4px; }
.analysis-upside { font-size:0.82rem; }
.analysis-date { font-size:0.78rem; color:var(--text-3); margin-top:8px; }
.analysis-firm { font-size:0.83rem; color:var(--text-2); }

/* ── Screener ── */
.screener-wrap {
  display:grid; grid-template-columns:260px 1fr;
  gap:20px; align-items:start;
}
.screener-sidebar {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  position:sticky; top:24px;
}
.screen-section { margin-bottom:22px; }
.screen-label {
  font-size:0.72rem; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.07em;
  margin-bottom:10px;
}
.screen-input-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; margin-bottom:8px;
}
.screen-input {
  width:100%; padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text); font-size:0.83rem; font-family:var(--font);
  outline:none; transition:border-color 0.15s;
}
.screen-input:focus { border-color:var(--border2); }
.screen-select {
  width:100%; padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text); font-size:0.83rem; font-family:var(--font);
  outline:none; cursor:pointer;
}

/* ── Tabs ── */
.tab-bar {
  display:flex; gap:4px; border-bottom:1px solid var(--border);
  margin-bottom:24px;
}
.tab-btn {
  padding:10px 18px; border-radius:0;
  font-size:0.87rem; font-weight:600; cursor:pointer;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-2); font-family:var(--font);
  transition:all 0.15s; margin-bottom:-1px;
}
.tab-btn:hover  { color:var(--text); }
.tab-btn.active { color:#fff; border-bottom-color:#fff; }

/* ── Chart container ── */
.chart-container {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:520px;
}
.chart-toolbar {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--border);
}
.chart-sym-selector {
  padding:7px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg3);
  color:var(--text); font-size:0.87rem; font-family:var(--font);
  outline:none; cursor:pointer;
}
.chart-tf-group { display:flex; gap:2px; }
.chart-tf {
  padding:5px 10px; border-radius:7px;
  font-size:0.78rem; font-weight:700; cursor:pointer;
  background:none; border:1px solid transparent;
  color:var(--text-2); font-family:var(--font);
  transition:all 0.12s;
}
.chart-tf:hover  { color:var(--text); border-color:var(--border); }
.chart-tf.active { background:rgba(255,255,255,0.10); color:#fff; border-color:var(--border); }
.chart-inner { height:calc(520px - 52px); }

/* ── Footer (minimal — legacy) ── */
.footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:28px 0;
}
.footer-inner {
  width:min(1280px, 100% - 40px);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-copy { font-size:0.8rem; color:var(--text-3); }
.footer-links { display:flex; gap:20px; }
.footer-links a {
  font-size:0.8rem; color:var(--text-3);
  transition:color 0.12s;
}
.footer-links a:hover { color:var(--text-2); }

/* ── Site Footer (full) ── */
.site-footer { border-top:1px solid var(--border); padding:40px 0 24px; margin-top:20px; }
.site-footer .ft-inner { width:min(1280px,100% - 40px); margin:0 auto; }
.site-footer .ft-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
.site-footer .ft-logo { display:flex; align-items:center; gap:9px; font-size:1.05rem; font-weight:800; letter-spacing:-.03em; margin-bottom:10px; }
.site-footer .ft-logo-icon { width:30px; height:30px; border-radius:7px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:900; color:#000; }
.site-footer .ft-tagline { font-size:.82rem; color:var(--text-2); line-height:1.7; max-width:26ch; }
.site-footer .ft-col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2); margin-bottom:12px; }
.site-footer .ft-col ul { list-style:none; }
.site-footer .ft-col ul li { margin-bottom:9px; }
.site-footer .ft-col a { font-size:.84rem; color:var(--text-3); transition:color .15s; }
.site-footer .ft-col a:hover { color:var(--text); }
.site-footer .ft-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.site-footer .ft-copy { font-size:.78rem; color:var(--text-3); line-height:1.6; }
.site-footer .ft-btm-links { display:flex; gap:16px; }
.site-footer .ft-btm-links a { font-size:.78rem; color:var(--text-3); transition:color .15s; }
.site-footer .ft-btm-links a:hover { color:var(--text-2); }
@media(max-width:768px) { .site-footer .ft-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .site-footer .ft-grid { grid-template-columns:1fr; } }

/* ── Responsive ── */
@media (max-width:900px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .analysis-grid { grid-template-columns:1fr; }
  .screener-wrap { grid-template-columns:1fr; }
  .screener-sidebar { position:static; }
  .cal-row { grid-template-columns:100px 1fr 80px 80px; }
  .cal-row > *:nth-child(4) { display:none; }
}
/* ── Nav mobile toggle ── */
.nav-mobile-toggle {
  display:none; margin-left:auto;
  background:none; border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:8px 12px;
  cursor:pointer; font-size:1.1rem; transition:background 0.15s;
  font-family:var(--font);
}
.nav-mobile-toggle[aria-expanded="true"] { background:rgba(255,255,255,0.08); }
.navbar.nav-open .nav-links {
  display:flex; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:rgba(10,10,10,0.97); border-bottom:1px solid var(--border);
  padding:12px 0; gap:0; z-index:999;
}
.navbar.nav-open .nav-links li a { display:block; padding:12px 24px; font-size:1rem; }

@media (max-width:768px) {
  .nav-links, .nav-cta .btn-ghost { display:none; }
  .nav-mobile-toggle { display:flex; }
}
@media (max-width:600px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .page-title { font-size:1.4rem; }
  .data-table th:nth-child(n+5),
  .data-table td:nth-child(n+5) { display:none; }
}