@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/quicksand/quicksand-regular.woff2') format('woff2');
}
body {
  font-family: 'Quicksand', "Segoe UI", "SF Pro", "Ubuntu", Arial, sans-serif;
  margin: 0; padding: 0;
  background: #f9f9f9; color: #333;
  display: flex; flex-direction: column; min-height: 100vh;
}
header { background: #0f172a; color: #fff; padding: 15px 20px; display:flex; align-items:center; justify-content:space-between; }
header h1 { margin: 0; font-size: 1.5em; font-weight: 600; }

header h1 a {
  color: inherit;
  text-decoration: none;
}
header h1 a:hover {
  text-decoration: underline;
}

nav a { color: #fff; margin-left: 15px; text-decoration: none; font-weight: 600; }
nav a:hover { text-decoration: underline; }
.gear-btn { background:none; border:none; color:#fff; font-size:1.4em; cursor:pointer; }

.controls { display: none; padding: 10px 20px; flex-wrap: wrap; justify-content: center; gap: 10px 20px; font-size: 1em; }
.controls.open { display:flex; }
.controls label { white-space: nowrap; }
.controls button { margin-left: 20px; }

.charts { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px; gap: 20px; flex: 1; }
.chart-box {
  flex: 1 1 45%; max-width: 600px;
  background: #fff; padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
}
.chart-box h2 { margin: 0 0 10px 0; font-size: 1.2em; font-weight: 600; }
.market-status { min-height: 1.5em; margin-bottom: 0; }
#line1, #line2 { min-height: 1.5em; display: block; }
.chart-box img {
  width: 100%; height: auto; 
  border-radius: 4px;
  /* aspect-ratio: 468/240; */
  max-width: 600px;
  cursor: pointer;
}
.chart-info-strong { font-size: 0.9em; font-weight: 600; margin: 6px 0; }
.chart-info-small { font-size: 0.85em; color: #555; margin: 4px 0 10px; }
.hidden { display: none; }

.chart-info-strong,
.chart-info-small,
.commentary-block { font-size: 0.8em; }

/* Commentary styles */
.commentary-block { margin-top: 15px; text-align: left; line-height: 1.5; }
.commentary-block div { margin-bottom:12px; }
.commentary-block com-header { font-size:1.05em; font-weight:600; margin-right:6px; }
.commentary-block com-date { color:#888; font-size:0.85em; margin-right:6px; }
.commentary-block com-text { }

@media (max-width: 768px) {
  .controls { font-size: 0.8em; }
  .market-status { font-size: 0.75em; line-height: 1.3; }
  .chart-box { flex: 1 1 100%; margin: 0 5px; padding: 8px; }
  .charts { margin: 5px; gap: 10px; }
  .chart-info-strong { font-size: 0.75em; }
}

footer { background: #0f172a; color: #fff; text-align: left; padding: 20px 20px; font-size: 0.9em; margin-top: auto; }
footer p { margin: 5px 0; }

.text-red-600 { color: #dc2626; }
.text-green-600 { color: #16a34a; }
.text-sky-500 { color: #0ea5e9; }
.font-semibold { font-weight: 600; }

#lightbox {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.9);
  display:none; align-items:center; justify-content:center;
  z-index: 99999;
  touch-action: none;
}
#lightbox img { max-width:100%; max-height:100%; border-radius:8px; }

.seo-faq {
  background-color: #f3f4f6;
  color: #111;
  padding: 40px 20px;
  margin-top: 40px;
}
.seo-faq .faq-inner {
  display: flex;
  justify-content: center;
}
.seo-faq .faq-box {
  max-width: 1200px; /* aligns with two charts wide */
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.seo-faq h2 {
  font-size: 1.5em;
  margin-bottom: 15px;
  font-weight: 600;
}
.seo-faq h3 {
  font-size: 1.2em;
  margin-top: 20px;
  font-weight: 600;
}
.seo-faq p {
  margin: 8px 0;
  line-height: 1.6;
  max-width: 700px;
}

/* Explicit theme overrides based on user setting */
.theme-light body {
  background: #f9f9f9;
  color: #333;
}
.theme-light .chart-box {
  background: #fff;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.theme-light .seo-faq {
  background-color: #f3f4f6;
  color: #111;
}

.theme-dark body {
  background: #121212;
  color: #ddd;
}
.theme-dark .chart-box {
  background: #1e1e1e;
  color: #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.theme-dark .seo-faq {
  background-color: #1f2937;
  color: #eee;
}

/* Links by theme */
.theme-light a { color: #0ea5e9; }
.theme-light a:visited { color: #6366f1; }
.theme-light a:hover { text-decoration: underline; }

.theme-dark a { color: #93c5fd; }
.theme-dark a:visited { color: #c4b5fd; }
.theme-dark a:hover { text-decoration: underline; }

/* Sidebar styles for user console */
.sidebar {
  width: 250px;
  background: #1e293b;
  color: #fff;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

/* Sidebar links should not change color on visited */
.sidebar a:visited {
  color: #fff;  /* same as .sidebar a */
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin: 8px 0;
  font-weight: 600;
}
.sidebar a:hover {
  text-decoration: underline;
}

/* Responsive sidebar */
@media (max-width: 768px) {
  .sidebar {
    width: 40%;   /* less than half screen */
    min-width: 150px;
  }
}
@media (max-width: 480px) {
  .sidebar {
    width: 30%;   /* even smaller on very small phones */
    min-width: 120px;
  }
}

.user-console {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.user-console .sidebar {
  flex: 0 0 auto;
}

.user-console .main {
  flex: 1 1 auto;
  padding: 20px;
}

/* Modal base */
.modal-content {
  background: #fff;
  color: #333;
  border-radius: 8px;
  padding: 20px;
}

.modal-content {
  padding: 20px 24px; /* even a little more left/right */
}
.modal-content h3 {
  margin: 0 0 16px 0; /* remove default top margin */
  padding-left: 2px;  /* optical balance with text fields */
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Light theme modal */
.theme-light .modal-content {
  background: #fff;
  color: #333;
}
.theme-light .modal-content input {
  background: #f3f4f6;
  color: #000;
}

/* Dark theme modal */
.theme-dark .modal-content {
  background: #1e293b;
  color: #f1f5f9;
}
.theme-dark .modal-content input {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid #475569;
}
.theme-dark .modal-content button.primary-btn {
  background: #0f172a;
  color: #fff;
}
.theme-dark .modal-content button.secondary-btn {
  background: #475569;
  color: #f1f5f9;
}

/* Table header */
.table-header {
  text-align: left;
}
.table-header th {
  padding: 8px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}
.theme-light .table-header {
  background: #e5e7eb;
  color: #111;
}
.theme-dark .table-header {
  background: #1e293b;
  color: #f1f5f9;
}
.theme-dark .table-header th {
  border-bottom: 1px solid #475569;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 12px 24px;
}

.modal-grid .field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-grid label {
  flex: 0 0 140px;   /* fixed width for labels */
  font-weight: 600;
}
.modal-grid {
  display: grid;
  grid-template-columns: auto 1fr; /* labels size to content, values take rest */
  gap: 12px 20px;
  align-items: start;
}

.modal-grid .field {
  display: contents; /* label/value participate directly in grid */
}

.modal-grid label {
  font-weight: bold;
  padding-right: 8px;
}

.modal-grid .value {
  word-wrap: break-word;
}

.modal-grid .field.full {
  grid-column: 1 / span 4; /* span both columns */
}

.ago-green {
  color: #16a34a; /* Tailwind green-600 */
  font-weight: bold;
}

.ago-red {
  color: #dc2626; /* Tailwind red-600 */
  font-weight: bold;
}