/* === Aspect Lab Patch (dark-mode & misc) === */

/* Ensure segmented/tab labels are visible in Dark mode */
html.dark button, html.dark .tab, html.dark .segmented button,
[data-theme="dark"] button, [data-theme="dark"] .tab, [data-theme="dark"] .segmented button {
  color: #e5e7eb;
}
html.dark .active, [data-theme="dark"] .active { color: #ffffff; }

/* Replace long site text with an icon */
.header .brand-icon, .brand-icon {
  display:inline-block;
  width: 22px; height: 22px;
  background: no-repeat center/contain;
  vertical-align: middle;
  /* Simple globe SVG as data URI */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="%23e5e7eb"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zM4.93 7.05A8 8 0 0117 4.62a17.3 17.3 0 00-3.06 1.55c-.9.54-1.7 1.1-2.4 1.66-.7.57-1.3 1.15-1.81 1.73-.5.58-.9 1.18-1.18 1.8-.3.63-.5 1.26-.62 1.9A8 8 0 014.93 7.05zM12 20a8 8 0 01-7.07-4.17 15.1 15.1 0 004.07-1.15c1.14-.52 2.1-1.1 2.87-1.73.78-.62 1.37-1.28 1.79-1.95.42-.67.66-1.35.73-2.03.07-.69-.02-1.36-.27-2.02a8 8 0 117.89 6.53A7.99 7.99 0 0112 20z"/></g></svg>');
}

/* Modal (login/register) */
.gs-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display:none; align-items: center; justify-content: center; z-index: 9999;
}
.gs-modal {
  background: #0b1220; color: #e5e7eb; border-radius: 16px; padding: 24px; width: 90%; max-width: 420px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.gs-modal h3 { margin: 0 0 12px; font-size: 1.1rem; }
.gs-modal label { display:block; margin: 10px 0 6px; font-size:.9rem; }
.gs-modal input {
  width: 100%; padding: 10px; border-radius:10px; border:1px solid #2b354d; background:#0f1830; color:#e5e7eb;
}
.gs-modal .row { display:flex; gap:10px; }
.gs-modal .row > * { flex:1; }
.gs-modal .actions { margin-top: 14px; display:flex; gap:10px; }
.gs-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px;
  border-radius:12px; border:1px solid #2b354d; background:#16213a; color:#e5e7eb; cursor:pointer;
}
.gs-btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.gs-note { font-size:.85rem; opacity:.85; margin-top:8px; }
.gs-hidden { display:none !important; }

/* Light theme overrides for login/register modals.  Use the same
 * palette as the rest of the app when in light mode so that the
 * dialog does not appear dark on a light background.  Leverage the
 * CSS variables defined in styles.css for background and text colours. */
body.theme-light .gs-modal {
  background: var(--panel);
  color: var(--ink);
}
body.theme-light .gs-modal input {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
}
body.theme-light .gs-btn {
  background: var(--chip);
  color: var(--ink);
  border: 1px solid var(--border);
}
body.theme-light .gs-btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}