/* ============================================================
   GBPUSD Forex Bot: UI Mockup Theme
   Static demo only. No real data, no real auth, no real trades.
   ============================================================ */

:root {
  --bg: #0a0e17;
  --bg-alt: #0d1320;
  --card: #131b2e;
  --card-2: #0f1626;
  --border: #223052;
  --text: #e7ecf7;
  --text-dim: #8b96ab;
  --text-faint: #5b6680;
  --accent: #2dd4bf;
  --accent-2: #d4af37;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

a { color: inherit; }
a[href^="mailto:"] { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a[href^="mailto:"]:hover { filter: brightness(1.2); }

/* ---------- Demo watermark banner (always present) ---------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 500;
  background: repeating-linear-gradient(135deg, #3a2c00, #3a2c00 12px, #241c00 12px, #241c00 24px);
  color: #ffd873;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 5px 10px;
  border-bottom: 1px solid #6b5300;
  text-transform: uppercase;
}

/* ---------- Landing page ---------- */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(45, 212, 191, 0.12), transparent 60%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

.chart-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

.landing-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  padding: 56px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.brand-flags { display: inline-flex; align-items: center; gap: 4px; }
.brand-flags svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }

.brand-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
  background: linear-gradient(90deg, #f2f6ff, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-tagline {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0 0 8px;
  text-align: center;
}

.verified-row {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

.portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
  max-width: 900px;
}

.portal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.portal-card h2 {
  margin: 0 0 4px;
  font-size: 19px;
}
.portal-card .sub {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 20px;
}

.portal-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.portal-icon.admin { background: rgba(212, 175, 55, 0.15); color: var(--accent-2); }
.portal-icon.guest { background: rgba(45, 212, 191, 0.15); color: var(--accent); }

.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}

.password-field {
  position: relative;
}
.password-field input {
  padding-right: 40px;
}
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  color: var(--text-dim);
  opacity: 0.6;
}
.password-toggle:hover {
  opacity: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn-primary { background: linear-gradient(90deg, var(--accent), #14b8a6); border: none; color: #04211d; }
.btn-gold { background: linear-gradient(90deg, var(--accent-2), #b8912c); border: none; color: #2a2100; }
.btn-danger { background: var(--danger); border: none; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 4px;
}
.tab-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn.active { background: var(--card); color: var(--text); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.hint { font-size: 12px; color: var(--text-faint); margin-top: 10px; }
.hint a { color: var(--accent); text-decoration: none; }

.landing-footer {
  margin-top: 44px;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

/* Public "About This Platform" -- visible without logging in or signing up */
.about-platform-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 900px;
  margin-top: 28px;
}
.about-platform-card h2 {
  margin: 0 0 4px;
  font-size: 19px;
}
.about-platform-card .sub {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 20px;
}
.about-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.about-platform-grid h4 {
  margin: 0 0 6px;
  font-size: 14px;
}
.about-platform-grid p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .about-platform-grid { grid-template-columns: 1fr; }
}
.risk-warning {
  margin-top: 22px;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}
.risk-warning strong {
  color: var(--warning);
}

/* ---------- App shell (admin + user dashboards) ---------- */
.app-shell {
  display: flex;
  min-height: calc(100vh - 26px);
}

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}

.sidebar-brand-flags { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.sidebar-brand-flags svg { border-radius: 1px; vertical-align: middle; }

.sidebar-brand {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
  padding: 0 8px;
}
.sidebar-role {
  font-size: 11px;
  color: var(--accent-2);
  padding: 0 8px;
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sidebar-role.guest-role { color: var(--accent); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13.5px;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-icon { width: 18px; text-align: center; }

.sidebar-spacer { flex: 1; }

.main {
  flex: 1;
  padding: 26px 34px 60px;
  max-width: 1200px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.topbar h1 { font-size: 21px; margin: 0; }
.topbar .sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.section { display: none; }
.section.active { display: block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin: 0 0 14px; font-size: 14px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.stat-tile .stat-value { font-size: 26px; font-weight: 800; }
.stat-tile .stat-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.stat-tile .stat-delta { font-size: 12px; margin-top: 8px; }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
td { padding: 10px 10px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-pill.online { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.status-pill.online .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); animation: pulse 1.8s infinite; }
.status-pill.offline { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.status-pill.offline .dot { background: var(--danger); }
.status-pill.connecting { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.status-pill.connecting .dot { background: var(--warning); animation: pulse 0.9s infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.35); }
  70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.toggle.on { background: var(--success); }
.toggle.on::after { transform: translateX(18px); }
.toggle.danger-on { background: var(--danger); }

.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-gap { display: flex; align-items: center; gap: 10px; }

.mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; }
.masked { letter-spacing: 2px; }

.key-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.key-box .mono { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.divider { height: 1px; background: var(--border); margin: 18px 0; }

.chip {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.progress-track { height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-chart .bar { width: 60%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), #0f766e); }
.bar-chart .bar-label { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.bar-chart .bar-val { font-size: 11px; color: var(--text); margin-bottom: 4px; }

.split-options { display: flex; gap: 10px; margin-bottom: 4px; }
.split-option {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-alt);
}
.split-option.active { border-color: var(--accent); background: var(--accent-soft); }
.split-option .split-main { font-weight: 700; font-size: 15px; }
.split-option .split-sub { font-size: 11px; color: var(--text-dim); }

.pay-methods { display: flex; gap: 12px; flex-wrap: wrap; }
.pay-method {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: var(--bg-alt);
}
.pay-method .remove-x { color: var(--text-faint); cursor: pointer; margin-left: 6px; }

.mode-toggle-row { display: flex; gap: 10px; margin-bottom: 16px; }
.mode-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.mode-btn.active { border-color: var(--accent-2); color: var(--accent-2); background: rgba(212,175,55,0.08); }

.amount-owed {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-2);
}

.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  padding: 14px 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.faq-a { display: none; padding: 0 4px 14px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.15s ease; color: var(--text-faint); }

.steps { counter-reset: step; }
.step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step-num {
  counter-increment: step;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.step-num::before { content: counter(step); }
.step-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.step-body { font-size: 13px; color: var(--text-dim); }

.log-feed {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  max-height: 260px;
  overflow-y: auto;
}
.log-line { padding: 3px 0; color: var(--text-dim); }
.log-line .ts { color: var(--text-faint); margin-right: 8px; }
.log-line.evt-open { color: var(--success); }
.log-line.evt-close { color: var(--accent); }
.log-line.evt-warn { color: var(--warning); }
.log-line.evt-sys { color: var(--text-dim); }

/* Modal / drawer */
.overlay {
  position: fixed; inset: 0;
  background: rgba(4, 8, 16, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.overlay.show { display: flex; }
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  box-shadow: var(--shadow);
}
.modal h3 { margin-top: 0; }

/* API key delivery (approve-key modal + chat bubble) */
.key-delivery-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0;
}
.key-delivery-value {
  flex: 1; font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px;
  color: var(--accent); word-break: break-all; user-select: all;
}
.key-delivery-hint { margin-top: 4px; }

.drawer {
  position: fixed;
  top: 26px; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--card-2);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 30px rgba(0,0,0,0.4);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 250;
  padding: 24px;
  overflow-y: auto;
}
.drawer.show { transform: translateX(0); }

.field-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border-bottom: none; }
.field-row .k { font-size: 12px; color: var(--text-dim); }
.field-row .v { font-size: 13px; font-weight: 600; }

.readonly-note {
  font-size: 11.5px;
  color: var(--text-faint);
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 10px;
}

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 400;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* EA input groups (drawer): mirrors GBPUSD_BridgeEA4.mq4 input groups exactly */
.ea-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--bg-alt);
  overflow: hidden;
}
.ea-group summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 12px;
  color: var(--text);
  list-style: none;
}
.ea-group summary::-webkit-details-marker { display: none; }
.ea-group summary::before { content: "▸ "; color: var(--accent); }
.ea-group[open] summary::before { content: "▾ "; }
.ea-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
}
.ea-field-row .ea-name {
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-dim);
}
.ea-field-row input[type="text"] {
  width: 130px;
  padding: 4px 7px;
  font-size: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  text-align: right;
  font-family: "Cascadia Code", Consolas, monospace;
}
.ea-field-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.ea-field-row select {
  width: 190px;
  padding: 4px 7px;
  font-size: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
}
.ea-field-row.wrap { align-items: flex-start; flex-direction: column; gap: 4px; }
.ea-field-row.wrap .ea-name { display: flex; align-items: center; gap: 6px; }
.ea-field-row.wrap > div:last-child { width: 100%; display: flex; gap: 6px; }
.ea-field-row.wrap select, .ea-field-row.wrap input[type="text"] { width: auto; flex: 1; text-align: left; }
.ea-note {
  font-size: 11px;
  color: var(--text-faint);
  padding: 4px 12px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.ea-subhead {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px 2px;
  border-top: 1px solid var(--border);
}

/* Hover tooltip -- ported from the real dashboard's .tooltip/.tip-text pattern */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  font-size: 11px;
  color: var(--text-faint);
}
.info-tip .tip-text {
  visibility: hidden;
  position: absolute;
  /* Opens DOWNWARD (not upward) on purpose: these render inside .drawer,
     which scrolls (overflow-y: auto). An upward-opening tooltip whose
     trigger sits near the top of the scrolled content gets pushed above
     the drawer's own scrollable origin -- content a user can never reach
     by scrolling (you can scroll further down into new overflow, but never
     "up past zero"). Opening downward keeps long tooltip text inside the
     normal, reachable scroll area regardless of where the trigger is. */
  top: 130%;
  /* Centered under the trigger (not anchored to its left edge) for the
     same reason as the vertical fix above: the drawer is pinned to the
     right edge of the screen, so a trigger icon sitting anywhere in the
     middle-to-right of a field label often has little to no room to its
     right -- anchoring the tooltip to extend only rightward (the previous
     left: 0) ran it straight off the edge of the browser window. Centering
     needs much less clearance on either side for a typical trigger
     position, in either direction. */
  left: 50%;
  transform: translateX(-50%);
  width: min(260px, 70vw);
  max-height: min(320px, 60vh);
  overflow-y: auto;
  padding: 9px 11px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-dim);
  line-height: 1.4;
  box-shadow: var(--shadow);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.info-tip:hover .tip-text { visibility: visible; opacity: 1; }
.info-tip .tip-text b { color: var(--text); }

/* ============================================================
   Round 3 additions: profile CRUD, agreement/e-sign, payment
   negotiation, messaging, IP access, video walkthrough, notifications
   ============================================================ */

/* Nav badge (pending action indicator) */
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.nav-item { position: relative; }

/* Action-required banner */
.action-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.action-banner .msg { font-size: 13.5px; font-weight: 600; }
.action-banner .msg .sub { display: block; font-weight: 400; color: var(--text-dim); font-size: 12px; margin-top: 2px; }

/* Public profile: guest display */
.strategist-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.strategist-photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #04211d;
  flex-shrink: 0;
  overflow: hidden;
}
.strategist-photo img { width: 100%; height: 100%; object-fit: cover; }
.strategist-name { font-size: 19px; font-weight: 800; margin: 0; }
.strategist-title { color: var(--accent-2); font-size: 13px; font-weight: 600; margin: 2px 0 10px; }
.strategist-bio { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.metric-tile { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.metric-tile .mv { font-size: 18px; font-weight: 800; color: var(--accent); }
.metric-tile .ml { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.link-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); font-size: 12.5px; text-decoration: none; color: var(--text); }
.link-chip:hover { border-color: var(--accent); color: var(--accent); }
.profile-section-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-section-block h4 { margin: 0 0 6px; font-size: 13.5px; }
.profile-section-block p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; }

/* Admin profile editor */
.editor-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.editor-row input[type="text"], .editor-row textarea { flex: 1; padding: 8px 10px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
.editor-row textarea { min-height: 60px; resize: vertical; font-family: inherit; }
.editor-add-btn { font-size: 12px; margin-top: 4px; }
.photo-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.photo-upload-row .strategist-photo { width: 64px; height: 64px; font-size: 22px; }

/* Agreement / e-signature */
.agreement-doc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dim);
  max-height: 340px;
  overflow-y: auto;
}
.agreement-doc h4 { color: var(--text); margin: 16px 0 6px; font-size: 13.5px; }
.agreement-doc h4:first-child { margin-top: 0; }
.agreement-doc strong { color: var(--text); }
.sig-pad-wrap { border: 1px solid var(--border); border-radius: 8px; background: #0d1320; }
.sig-pad-wrap canvas { display: block; width: 100%; height: 140px; cursor: crosshair; border-radius: 8px; }
.sig-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.status-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.status-banner.warn { background: rgba(245, 158, 11, 0.1); border: 1px solid var(--warning); color: var(--warning); }
.status-banner.pending { background: rgba(45, 212, 191, 0.08); border: 1px solid var(--accent); color: var(--accent); }
.status-banner.ok { background: rgba(34, 197, 94, 0.1); border: 1px solid var(--success); color: var(--success); }
.status-banner.bad { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); color: var(--danger); }
.sig-preview { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 26px; color: var(--text); padding: 10px 4px; border-bottom: 1px solid var(--border); }

/* Payment split lock / negotiation */
.split-locked-card { display: flex; align-items: center; justify-content: space-between; background: var(--bg-alt); border: 1px solid var(--accent-2); border-radius: 8px; padding: 14px 18px; }
.split-locked-card .big { font-size: 22px; font-weight: 800; color: var(--accent-2); }
.split-locked-card .meta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.proposal-card { background: rgba(45, 212, 191, 0.08); border: 1px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin-top: 14px; }
.request-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* Messaging */
.msg-layout { display: flex; gap: 16px; height: 560px; }
.thread-list { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.thread-item { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.thread-item:hover { background: var(--bg-alt); }
.thread-item.active { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.thread-item .tn { font-weight: 600; font-size: 13px; }
.thread-item .tp { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item .tb { display: inline-block; background: var(--danger); color: #fff; font-size: 10px; border-radius: 999px; padding: 1px 6px; margin-left: 6px; }
.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble-row { display: flex; flex-direction: column; max-width: 70%; }
.chat-bubble-row.me { align-self: flex-end; align-items: flex-end; }
.chat-bubble-row.them { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; position: relative; }
.chat-bubble-row.me .chat-bubble { background: linear-gradient(90deg, var(--accent), #14b8a6); color: #04211d; border-bottom-right-radius: 3px; }
.chat-bubble-row.them .chat-bubble { background: var(--bg-alt); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-quote { font-size: 11px; opacity: 0.75; border-left: 2px solid currentColor; padding-left: 6px; margin-bottom: 4px; }
.chat-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.chat-actions { display: none; gap: 6px; font-size: 11px; }
.chat-bubble-row:hover .chat-actions { display: flex; }
.chat-actions span { cursor: pointer; color: var(--text-faint); }
.chat-actions span:hover { color: var(--accent); }
.chat-actions span.liked { color: var(--danger); }
.chat-attachment-image { display: block; max-width: 240px; max-height: 240px; border-radius: 8px; margin: 2px 0; object-fit: cover; }
.chat-attachment-video { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; margin: 2px 0; }
.chat-attachment-file { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; margin: 2px 0; background: rgba(0,0,0,0.12); border-radius: 8px; font-size: 12.5px; text-decoration: none; color: inherit; }
.chat-attachment-file:hover { filter: brightness(1.1); }
.chat-attach-btn { background: none; border: none; cursor: pointer; font-size: 18px; padding: 6px 8px; color: var(--text-dim); }
.chat-attach-btn:hover { color: var(--accent); }
.chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-input-row input { flex: 1; padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; }
.chat-reply-preview { font-size: 11.5px; color: var(--text-dim); background: var(--bg-alt); border-left: 2px solid var(--accent); padding: 6px 10px; margin: 0 10px; display: none; }
.chat-reply-preview.show { display: flex; justify-content: space-between; }
.chat-empty { color: var(--text-faint); font-size: 13px; text-align: center; margin-top: 40px; }

/* IP access */
.ip-log-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ip-log-row:last-child { border-bottom: none; }
.ip-log-row .allowed { color: var(--success); }

/* Print-to-PDF for signed agreements -- #print-agreement-root is hidden
   during normal use and is the ONLY thing visible when window.print() runs,
   isolating just the document + signatures from the rest of the app chrome
   (nav, sidebar, buttons) so "Save as PDF" produces a clean document. */
.print-only { display: none; }
@media print {
  body * { visibility: hidden; }
  .print-only, .print-only * { visibility: visible; }
  .print-only { display: block; position: absolute; top: 0; left: 0; width: 100%; }
}
.ip-log-row .blocked { color: var(--danger); }