/* ==========================================================================
   LogicFlux — shared UI refinements
   Loaded after style.css / admin.css, before mobile.css.
   ========================================================================== */

/* ---------- Icon-only buttons ----------
   Used by the compact "Client Area" control in the topbar. The accessible
   name comes from aria-label/title, since there is no visible text. */
.btn-icon-only {
    padding: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 auto;
    gap: 0;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm, 8px);
}
.btn-icon-only > svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ---------- Keyboard focus ----------
   The sheets set `outline: none` in six places with nothing in its place, so
   keyboard users had no visible focus at all. :focus-visible keeps mouse
   clicks clean while restoring a ring for keyboard and assistive tech. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent, #3b82f6);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 8px);
}

/* Inputs already draw their own focus ring; keep the outline off them but
   guarantee the ring is visible against the card background. */
.form-input:focus-visible,
.table-filter-select:focus-visible {
    outline: 2px solid var(--color-accent, #3b82f6);
    outline-offset: 1px;
}

/* Skip past the fixed header to the main content. Visible only on focus. */
.skip-to-content {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 500;
    padding: 10px 16px;
    background: var(--color-accent, #3b82f6);
    color: #04121a;
    font-weight: 700;
    font-size: 13px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.18s ease;
}
.skip-to-content:focus {
    top: 0;
}

/* ---------- Anchored sections ----------
   .topnav is position:fixed, so an in-page anchor (#pricing, #live-feed,
   #faq) scrolled its heading underneath the bar. Offset the scroll stop by
   the nav height. */
:target,
[id="hero"], [id="live-feed"], [id="pricing"], [id="faq"],
section[id], main [id] {
    scroll-margin-top: calc(var(--nav-height, 64px) + 16px);
}

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------- Brand link ----------
   The public header wrapped the logo in an <a href="/">, the two dashboard
   headers did not, so the logo was clickable on some pages and inert on
   others. Both are anchors now; this keeps them looking identical and gives
   the same affordance. */
.topnav-brand,
.admin-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity 0.18s ease;
}
.topnav-brand:hover,
.admin-mobile-brand:hover {
    opacity: 0.82;
}
.topnav-brand:focus-visible,
.admin-mobile-brand:focus-visible {
    outline: 2px solid var(--color-accent, #3b82f6);
    outline-offset: 3px;
}

/* A hidden control must not leave a gap in the flex row. */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   Header control cluster
   The three controls had three different geometries sitting side by side:
   a ~70px pill (zoom, widened by its "1x" badge), a 38px rounded square
   (theme), and a filled 38px block (Client Area). Normalise them to one
   38px square control, with the zoom level as a corner badge rather than
   extra width, so the cluster reads as a set.
   ========================================================================== */
.topnav-actions,
.admin-mobile-header > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topnav-actions .zoom-toggle-btn,
.topnav-actions .theme-toggle-btn,
.topnav-actions .btn-icon-only,
.admin-mobile-header .zoom-toggle-btn,
.admin-mobile-header .theme-toggle-btn,
.admin-mobile-header .btn-icon-only,
.header-back-link {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    gap: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Hamburgers share the box but keep their own column layout: the three bars
   are spaced by gap, so the shared `gap: 0` above collapsed them into what
   looked like a single dash — no menu affordance at all. `display` is left
   alone here so the 900px breakpoint still controls when it appears. */
.topnav-actions .topnav-hamburger,
.admin-mobile-header .admin-hamburger {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 10px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Ghost treatment for the secondary controls, one accent for the primary. */
.topnav-actions .zoom-toggle-btn,
.topnav-actions .theme-toggle-btn,
.topnav-actions .topnav-hamburger,
.admin-mobile-header .zoom-toggle-btn,
.admin-mobile-header .theme-toggle-btn,
.admin-mobile-header .admin-hamburger {
    color: var(--text-muted, #94a3b8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted, #94a3b8);
}
.topnav-actions .zoom-toggle-btn:hover,
.topnav-actions .theme-toggle-btn:hover,
.topnav-actions .topnav-hamburger:hover,
.admin-mobile-header .zoom-toggle-btn:hover,
.admin-mobile-header .theme-toggle-btn:hover,
.admin-mobile-header .admin-hamburger:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--text-main, #e2e8f0);
}

/* Icons inside the cluster all render at the same optical size. */
.topnav-actions button > svg,
.admin-mobile-header button > svg,
.topnav-actions .zoom-icon,
.admin-mobile-header .zoom-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    display: block;
}

/* The zoom level rides in the corner instead of stretching the button. */
.zoom-toggle-btn .zoom-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    padding: 1px 2px;
    border-radius: 4px;
    background: transparent;
    color: var(--color-accent, #3b82f6);
    pointer-events: none;
}

/* The hamburger's three bars need explicit sizing once the button is fixed. */
.topnav-hamburger span,
.admin-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: background 0.18s ease;
}

@media (pointer: coarse) {
    .topnav-actions .zoom-toggle-btn,
    .topnav-actions .theme-toggle-btn,
    .topnav-actions .btn-icon-only,
    .topnav-actions .topnav-hamburger,
    .admin-mobile-header .zoom-toggle-btn,
    .admin-mobile-header .theme-toggle-btn,
    .admin-mobile-header .admin-hamburger,
    .admin-mobile-header .btn-icon-only,
    .header-back-link {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }
}

/* Back-to-site control in the dashboard headers. The hamburger is hidden
   until sign-in, so without this the logged-out dashboards had no navigation
   in the bar at all. */
.header-back-link {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.header-back-link:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--text-main, #e2e8f0);
}
.header-back-link > svg {
    width: 18px;
    height: 18px;
    display: block;
}


/* The Client Area control was a fully saturated cyan block sitting next to
   two faint ghost buttons, so it read as a mismatched blob rather than part
   of the set. Keep it the accent of the group, but tinted rather than solid
   so all the controls share one visual weight. */
.topnav-actions .btn-icon-only.btn-primary,
.admin-mobile-header .btn-icon-only.btn-primary {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.42);
    color: var(--color-accent, #3b82f6);
    box-shadow: none;
}
.topnav-actions .btn-icon-only.btn-primary:hover,
.admin-mobile-header .btn-icon-only.btn-primary:hover {
    background: rgba(59, 130, 246, 0.24);
    border-color: var(--color-accent, #3b82f6);
    color: #ffffff;
    transform: none;
}
.topnav-actions .btn-icon-only.btn-primary > svg,
.admin-mobile-header .btn-icon-only.btn-primary > svg {
    stroke: currentColor;
}

/* mobile.css sets a blanket 44px min-height on buttons for touch targets.
   The header cluster manages its own 42px square, so exempt it — otherwise
   the buttons render 42x44 while the back-link renders 42x42 and the row
   looks ragged. 42px still clears the touch-target guidance. */
@media (pointer: coarse) {
    .topnav-actions .zoom-toggle-btn,
    .topnav-actions .theme-toggle-btn,
    .topnav-actions .btn-icon-only,
    .topnav-actions .topnav-hamburger,
    .admin-mobile-header .zoom-toggle-btn,
    .admin-mobile-header .theme-toggle-btn,
    .admin-mobile-header .admin-hamburger,
    .admin-mobile-header .btn-icon-only {
        min-height: 42px;
        max-height: 42px;
    }
}

/* ==========================================================================
   Login gate clearance
   .admin-mobile-header is position:fixed at 60px tall, but the login gate is
   centred against the full viewport with only 20px of padding. On mobile the
   card's logo rendered at y=55, tucked under the bar. Reserve the header
   height and keep the card centred in what is left.
   ========================================================================== */
@media (max-width: 900px) {
    .admin-login-gate,
    .client-login-gate {
        min-height: calc(100vh - var(--mobile-nav-height, 60px));
        padding-top: calc(var(--mobile-nav-height, 60px) + 20px);
        padding-bottom: 28px;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Hero CTAs on small screens
   The three buttons are sized by their label, so stacked on a phone they
   rendered 256 / 176 / 155px wide — a ragged left-aligned staircase. Below
   640px they become one full-width column of equal blocks.
   ========================================================================== */
@media (max-width: 640px) {
    .hero-cta-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }
    .hero-cta-row > .btn-hero-primary,
    .hero-cta-row > .btn-hero-secondary,
    .hero-cta-row > .btn-hero-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 13px 18px;
        font-size: 14px;
    }
}

/* Hero CTA icons. Previously these labels led with emoji (lightning, chart,
   padlock), which render in their own colours and at their own weight — out
   of step with the stroked SVG icons used everywhere else. */
.btn-hero-icon,
.btn-hero-arrow {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    display: block;
    stroke-width: 2;
}
.btn-hero-arrow {
    margin-left: 2px;
}
.btn-hero-primary,
.btn-hero-secondary,
.btn-hero-outline {
    gap: 9px;
}

/* The primary CTA declares `border: none` while the other two carry a 1px
   border, so stacked it sat 2px shorter than its neighbours. A transparent
   border of the same width squares them up. */
.btn-hero-primary {
    border: 1px solid transparent;
}

/* The three CTAs use different font sizes (14.5px vs 13.5px), so their line
   boxes — and therefore their heights — disagreed by a couple of pixels in a
   row. Pinning the line box makes the row square without flattening the type
   hierarchy. */
.btn-hero-primary,
.btn-hero-secondary,
.btn-hero-outline {
    line-height: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ==========================================================================
   Hero type scale on mobile
   The headline was dropping to 26px at 640px while the body copy sat at
   15px with 25.5px leading (a 1.7 ratio), so the two were nearly the same
   weight on screen and the paragraph ran 214px tall. Push the headline up
   and pull the body copy down and tighter.
   ========================================================================== */
@media (max-width: 640px) {
    .hero-headline {
        font-size: 34px;
        line-height: 1.12;
        letter-spacing: -1px;
        margin-bottom: 14px;
    }
    .hero-subtext {
        font-size: 13.5px;
        line-height: 1.45;
        margin-bottom: 22px;
    }
}

@media (max-width: 380px) {
    .hero-headline {
        font-size: 30px;
    }
    .hero-subtext {
        font-size: 13px;
    }
}

/* ================ SHARED CHECKOUT (templates/_checkout_modal.html) ================ */
.checkout-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 6px; }
.checkout-coupon-row { display: flex; gap: 8px; }
.checkout-coupon-input { text-transform: uppercase; font-family: var(--font-mono); font-weight: 600; }
.checkout-coupon-status { font-size: 12px; margin-top: 6px; font-weight: 600; }
.checkout-gw-group { margin-top: 16px; }
.checkout-gw-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.checkout-gw-btn {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-glass); border-radius: var(--radius-sm);
    color: var(--text-muted); font: 600 12.5px/1.25 var(--font-main); text-align: left; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.checkout-gw-btn:hover { color: var(--text-main); border-color: rgba(59, 130, 246, 0.45); }
.checkout-gw-btn.active { color: var(--text-main); border-color: var(--color-accent); background: rgba(59, 130, 246, 0.08); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); }
.checkout-gw-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.checkout-gw-icon { font-size: 16px; flex-shrink: 0; }
/* Each payment provider shows its initials as a small badge in its brand colour */
.checkout-gw-btn .checkout-gw-icon { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px;
    border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: #fff; background: #64748b; }
.checkout-gw-btn[data-gw="stripe"] .checkout-gw-icon { background: #635bff; }
.checkout-gw-btn[data-gw="paypal"] .checkout-gw-icon { background: #003087; }
.checkout-gw-btn[data-gw="paddle"] .checkout-gw-icon { background: #1a1a2e; }
.checkout-gw-btn[data-gw="flutterwave"] .checkout-gw-icon { background: #f5a623; }
.checkout-gw-btn[data-gw="paystack"] .checkout-gw-icon { background: #0ba4db; }
.checkout-gw-btn[data-gw="lemonsqueezy"] .checkout-gw-icon { background: #7047eb; }
.checkout-gw-btn[data-gw="crypto"] .checkout-gw-icon { background: #26a17b; font-size: 9px; }
html[data-theme="dark"] .checkout-gw-btn[data-gw="paddle"] .checkout-gw-icon { background: #334155; }
.checkout-gw-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; padding: 10px 12px; border: 1px dashed var(--border-glass); border-radius: var(--radius-sm); }
.checkout-gw-note a { color: var(--brand-cyan); }
.checkout-sandbox-box { margin-top: 10px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #f59e0b; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius-sm); }
.checkout-secure-note { margin: 10px 0 0; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.checkout-total { color: var(--color-accent); font-family: var(--font-mono); font-size: 20px; }
.checkout-pay-status { font-size: 13px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); }
.checkout-proceed { margin-top: 18px; padding: 12px; }
.checkout-proceed:disabled { opacity: 0.55; cursor: not-allowed; }
.checkout-legal { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: 10px; line-height: 1.45; }
.checkout-legal a { color: var(--brand-cyan); }
.checkout-success { text-align: center; padding: 20px 0 8px; }
.checkout-success-icon { font-size: 48px; margin-bottom: 10px; }
.checkout-success h3 { color: var(--color-success); font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.checkout-success p { color: var(--text-muted); font-size: 13.5px; margin-bottom: 14px; }
.checkout-license { margin: 0 auto; max-width: 340px; padding: 12px 16px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 10px; }
.checkout-license-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.checkout-license code { color: var(--color-success); font-weight: 700; font-size: 13px; word-break: break-all; }
.checkout-success-meta { margin-top: 14px; font-size: 12px; color: var(--text-dim); }
html[data-theme="light"] .checkout-gw-btn { background: #fff; border-color: rgba(15, 23, 42, 0.12); color: #334155; }
html[data-theme="light"] .checkout-gw-btn.active { background: rgba(14, 165, 164, 0.08); color: #0f172a; }
html[data-theme="light"] .checkout-pay-status { background: rgba(15, 23, 42, 0.04); }


/* ================ EA DOWNLOAD WARNING (client.html) ================ */
.ea-ack-card { max-width: 560px !important; }
.ea-ack-body { font-size: 13px; line-height: 1.55; color: var(--text-muted); max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.ea-ack-body p { margin: 0 0 10px; }
.ea-ack-body strong { color: var(--text-main); }
.ea-ack-body a { color: var(--brand-cyan); }
.ea-ack-check-row { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; padding: 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-main); border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.06); border-radius: var(--radius-sm); cursor: pointer; }
.ea-ack-check-row input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-accent); }
.ea-ack-status { font-size: 12.5px; font-weight: 600; color: var(--color-danger); margin-top: 8px; }
.ea-ack-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ea-ack-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 480px) { .ea-ack-actions { flex-direction: column-reverse; } .ea-ack-actions .btn { width: 100%; } }

/* ================ FIRST-VISIT THEME PICKER (js/theme.js) ================ */
.theme-picker-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 15, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: themePickerFade 0.2s ease-out; }
@keyframes themePickerFade { from { opacity: 0; } to { opacity: 1; } }
.theme-picker-card { position: relative; width: 100%; max-width: 440px; padding: 28px 26px 22px; background: var(--bg-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); text-align: left; }
.theme-picker-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-glass); background: transparent; color: var(--text-dim); font-size: 15px; cursor: pointer; }
.theme-picker-close:hover { color: var(--text-main); }
.theme-picker-title { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: var(--text-main); }
.theme-picker-sub { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0 0 18px; }
.theme-picker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.theme-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: var(--radius-md); border: 2px solid var(--border-glass); background: transparent; color: var(--text-main); font-family: var(--font-main); text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.theme-option:hover { border-color: rgba(59, 130, 246, 0.5); }
.theme-option.selected { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.theme-option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-option-name { font-size: 14px; font-weight: 700; margin-top: 6px; }
.theme-option-desc { font-size: 11.5px; color: var(--text-muted); }
.theme-swatch { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 74px; padding: 10px; border-radius: 8px; box-sizing: border-box; }
.theme-swatch span { display: block; height: 8px; border-radius: 4px; }
.theme-swatch span:nth-child(1) { width: 60%; }
.theme-swatch span:nth-child(2) { width: 85%; }
.theme-swatch span:nth-child(3) { width: 40%; height: 14px; margin-top: auto; }
.theme-swatch-dark { background: #0b1220; border: 1px solid rgba(255, 255, 255, 0.08); }
.theme-swatch-dark span { background: rgba(255, 255, 255, 0.22); }
.theme-swatch-dark span:nth-child(3) { background: #3b82f6; }
.theme-swatch-light { background: #f5f8fc; border: 1px solid rgba(15, 23, 42, 0.12); }
.theme-swatch-light span { background: rgba(15, 23, 42, 0.18); }
.theme-swatch-light span:nth-child(3) { background: #2563eb; }
html[data-theme="light"] .theme-picker-overlay { background: rgba(15, 23, 42, 0.35); }
html[data-theme="light"] .theme-picker-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25); }
html[data-theme="light"] .theme-option { border-color: rgba(15, 23, 42, 0.12); }
@media (prefers-reduced-motion: reduce) { .theme-picker-overlay { animation: none; } }


/* ================ CHART TIME ZONE PICKER (strategies.html) ================ */
.candle-tz-picker { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; font-size: 12px; border: 1px solid var(--border-glass); border-radius: 999px; background: var(--bg-card, transparent); color: var(--text-muted); cursor: pointer; }
.candle-tz-picker:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(59, 130, 246, 0.15)); }
.candle-tz-picker select { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: var(--text-main); font: 500 12px/1.2 var(--font-main); padding: 4px 22px 4px 2px; max-width: 260px; cursor: pointer; outline: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 11px) 52%, calc(100% - 7px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.candle-tz-picker select option, .candle-tz-picker select optgroup { color: #0b0f19; background: #ffffff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .candle-tz-picker select { max-width: 190px; } }


/* ================ EXECUTION FAILURE REASONS (client portal) ================ */
.exec-why-btn { margin-left: 6px; padding: 1px 7px; border: 1px solid var(--border-glass); border-radius: 999px; background: transparent; color: var(--brand-cyan); font: 600 11px/1.4 var(--font-main); cursor: pointer; }
.exec-why-btn[aria-expanded="true"] { background: var(--accent-soft, rgba(59, 130, 246, 0.12)); border-color: var(--brand-cyan); }
.exec-why-btn:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
.exec-why-row td { padding: 10px 14px 12px !important; font-size: 12px; line-height: 1.5; color: var(--text-main); background: var(--bg-alt, rgba(255, 255, 255, 0.03)); border-left: 3px solid var(--color-danger); white-space: normal; }
.exec-why-row .exec-reason-fix { color: var(--text-muted); margin-left: 6px; }
.exec-why-row code { display: block; margin-top: 6px; font-size: 11px; padding: 4px 8px; border-radius: 6px; background: rgba(239, 68, 68, 0.08); color: var(--color-danger); word-break: break-word; }

/* Chart time zone picker: the light theme's global select rule (border, padding,
   white fill) drew a second box inside the pill. The pill is the only frame. */
html[data-theme] .candle-tz-picker select,
html[data-theme] .candle-tz-picker select:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    padding: 4px 24px 4px 2px !important;
    background-position: right 6px center !important;
    min-height: 0 !important;
}

/* Strategy data source: a labelled pill, no pulsing */
.source-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--bg-card, transparent);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.source-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.source-pill[data-mode="live"] .source-pill-dot { background: #16a34a; }
.source-pill[data-mode="demo"] .source-pill-dot { background: #2563eb; }
.source-pill[data-mode="simulated"] .source-pill-dot { background: #d97706; }
.source-pill[data-mode="inactive"] .source-pill-dot { background: #94a3b8; }

/* ---------- Strategy detail: alert icons, icon tabs, stats table ---------- */
.dispatch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.dispatch-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 2px;
}
.dispatch-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--bg-card, transparent);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: default;
}
.dispatch-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.dispatch-chip[data-on="1"] {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    background: var(--accent-soft, rgba(59, 130, 246, 0.12));
}
.dispatch-chip[data-on="0"] { opacity: 0.55; }
.dispatch-chip[data-on="0"] .dispatch-name { text-decoration: line-through; }
@media (max-width: 480px) {
    /* Icons only on small phones; the full state is in the title / aria-label */
    .dispatch-chip { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .dispatch-chip .dispatch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .dispatch-chip[data-on="0"]::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 2px;
        background: currentColor;
        transform: rotate(-45deg);
    }
}

.detail-tabs .detail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    min-height: 44px;
}
.detail-tabs .detail-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 640px) {
    .detail-tabs .detail-tab { flex: 1 1 0; padding: 10px 6px; font-size: 12.5px; }
}

#d-perf-grid.performance-grid { display: block; margin-bottom: 24px; }
.perf-table {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card, transparent);
}
.perf-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-glass);
    min-width: 0;
}
.perf-row dt { margin: 0; font-size: 13px; color: var(--text-muted); }
.perf-row dd { margin: 0; font-size: 14px; font-weight: 700; font-family: var(--font-mono); text-align: right; overflow-wrap: anywhere; }
.perf-table .perf-row:last-child { border-bottom: 0; }
@media (min-width: 641px) {
    .perf-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perf-table .perf-row:nth-child(odd) { border-right: 1px solid var(--border-glass); }
    .perf-table .perf-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Signed-in account button in the public nav: initials in the round button */
.nav-avatar { font: 700 12.5px/1 var(--font-main); letter-spacing: 0.02em; }

/* =====================================================================
   Legal pop-up (Terms / Privacy / Risk): centred card, bottom sheet on phones
   ===================================================================== */
.lgm-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.18s ease;
}
.lgm-overlay[hidden] { display: none; }
.lgm-overlay.open { opacity: 1; }
body.lgm-open { overflow: hidden; }
.lgm-card {
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    display: flex; flex-direction: column;
    background: var(--bg-card, #fff);
    color: var(--text-main, #0b0f19);
    border: 1px solid var(--border-glass, #e6e8ec);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35);
    overflow: hidden;
    transform: translateY(8px) scale(0.99); transition: transform 0.18s ease;
}
.lgm-overlay.open .lgm-card { transform: none; }
.lgm-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid var(--border-glass, #e6e8ec);
}
.lgm-kicker { font: 700 11.5px var(--font-main, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #2563eb); }
.lgm-title { margin: 4px 0 2px; font: 800 22px/1.2 var(--font-display, var(--font-main, sans-serif)); letter-spacing: -0.02em; color: var(--text-main, #0b0f19); }
.lgm-meta { margin: 0; font-size: 12.5px; color: var(--text-muted, #4b5563); }
.lgm-meta:empty { display: none; }
.lgm-close {
    width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid var(--border-glass, #e6e8ec);
    background: var(--bg-alt, #f6f7f9); color: var(--text-main, #0b0f19); cursor: pointer;
}
.lgm-close svg { width: 18px; height: 18px; }
.lgm-close:hover { border-color: var(--color-accent, #2563eb); }
.lgm-toc {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 10px 24px; border-bottom: 1px solid var(--border-glass, #e6e8ec);
}
.lgm-toc[hidden] { display: none; }
.lgm-toc::-webkit-scrollbar { display: none; }
.lgm-chip {
    flex: 0 0 auto; min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-glass, #e6e8ec); background: var(--bg-alt, #f6f7f9);
    color: var(--text-muted, #4b5563); font: 600 12.5px var(--font-main, sans-serif); white-space: nowrap;
}
.lgm-chip:hover { color: var(--color-accent, #2563eb); border-color: var(--color-accent, #2563eb); }
.lgm-body {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 24px 20px; font-size: 15px; line-height: 1.7;
}
.lgm-section { padding: 16px 0; border-bottom: 1px solid var(--border-glass, #e6e8ec); }
.lgm-section:last-child { border-bottom: 0; }
.lgm-section h2 {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 10px; font: 700 17px/1.3 var(--font-display, var(--font-main, sans-serif)); letter-spacing: -0.01em; color: var(--text-main, #0b0f19);
}
.lgm-section h2 .sec-num {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px;
    border-radius: 6px; background: var(--accent-soft, rgba(37, 99, 235, 0.08)); color: var(--color-accent, #2563eb);
    font: 700 11.5px var(--font-mono, monospace);
}
.lgm-section p, .lgm-section li { color: var(--text-muted, #4b5563); }
.lgm-section p { margin: 0 0 10px; }
.lgm-section ul { margin: 0 0 10px; padding-left: 20px; }
.lgm-section li { margin-bottom: 6px; }
.lgm-section strong { color: var(--text-main, #0b0f19); }
.lgm-section a { color: var(--color-accent, #2563eb); font-weight: 600; }
.lgm-section .risk-callout-box, .lgm-section .info-callout-box { border-radius: 12px; padding: 14px 16px; margin: 12px 0; font-size: 14px; line-height: 1.6; }
html[data-theme="light"] .lgm-section .risk-callout-box { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
html[data-theme="light"] .lgm-section .info-callout-box { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
html[data-theme="dark"] .lgm-section .risk-callout-box { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fecaca; }
html[data-theme="dark"] .lgm-section .info-callout-box { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #bfdbfe; }
.lgm-section .risk-callout-box strong, .lgm-section .info-callout-box strong { color: inherit; }
.lgm-loading { text-align: center; padding: 48px 0; color: var(--text-muted, #4b5563); }
.lgm-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border-glass, #e6e8ec); background: var(--bg-card, #fff);
}
.lgm-foot .btn { min-height: 44px; justify-content: center; text-decoration: none; }

@media (max-width: 640px) {
    .lgm-overlay { align-items: flex-end; padding: 0; }
    .lgm-card {
        width: 100%; max-height: 92vh;
        border-radius: 22px 22px 0 0; border-bottom: 0;
        transform: translateY(24px);
    }
    .lgm-card::before {
        content: ""; align-self: center; width: 40px; height: 4px; border-radius: 4px;
        background: var(--border-strong, #d5d9e0); margin: 8px 0 0;
    }
    .lgm-head { padding: 12px 18px 12px; }
    .lgm-title { font-size: 19px; }
    .lgm-toc { padding: 10px 18px; }
    .lgm-body { padding: 4px 18px 16px; font-size: 14.5px; }
    .lgm-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .lgm-foot .btn { flex: 1 1 0; }
}
.lgm-head, .lgm-toc, .lgm-foot { flex-shrink: 0; }
.lgm-body { min-height: 0; }

/* ---------- Logo: blue X on light, white X on dark ----------
   Each logo is two <img data-logo> tags; only the one for the active theme shows. */
html[data-theme="dark"] img[data-logo="light"],
html:not([data-theme="dark"]) img[data-logo="dark"] {
    display: none !important;
}

/* Social sign-in buttons (social-login.js) */
.lf-social { margin: 4px 0 14px; }
.lf-social-buttons { display: grid; gap: 8px; }
.lf-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 42px; padding: 9px 14px; border-radius: 10px;
    border: 1px solid var(--border-glass, rgba(148, 163, 184, 0.28));
    background: rgba(255, 255, 255, 0.04); color: var(--text-bright, #e2e8f0);
    font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s;
}
.lf-social-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(148, 163, 184, 0.5); }
.lf-social-btn:focus-visible { outline: 2px solid var(--brand-cyan, #22d3ee); outline-offset: 2px; }
.lf-social-btn.is-busy { opacity: .6; pointer-events: none; }
.lf-social-icon { display: inline-flex; width: 18px; height: 18px; }
.lf-social-icon svg { width: 18px; height: 18px; }
.lf-social-divider {
    display: flex; align-items: center; gap: 10px; margin: 14px 0 2px;
    font-size: 11.5px; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .06em;
}
.lf-social-divider::before, .lf-social-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-glass, rgba(148, 163, 184, 0.28)); }
html[data-theme="light"] .lf-social-btn { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
html[data-theme="light"] .lf-social-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Faint background icon on stat cards (kpi-icons.js) */
.has-kpi-icon { position: relative; overflow: hidden; isolation: isolate; }
.kpi-bg-icon {
    position: absolute; right: 14px; top: 50%; z-index: -1;
    width: 64px; height: 64px; transform: translateY(-40%) rotate(-8deg);
    color: var(--kpi-tone, #22d3ee); opacity: .13; pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.kpi-bg-icon svg { width: 100%; height: 100%; display: block; }
.kpi-mini-card .kpi-bg-icon { width: 50px; height: 50px; right: 10px; }
.has-kpi-icon:hover .kpi-bg-icon { opacity: .19; transform: translateY(-40%) rotate(-4deg) scale(1.04); }
.kpi-bg-icon[data-tone="money"]  { --kpi-tone: #22c55e; }
.kpi-bg-icon[data-tone="risk"]   { --kpi-tone: #f43f5e; }
.kpi-bg-icon[data-tone="people"] { --kpi-tone: #8b5cf6; }
.kpi-bg-icon[data-tone="tech"]   { --kpi-tone: #0ea5e9; }
.kpi-bg-icon[data-tone="signal"] { --kpi-tone: #f59e0b; }
.kpi-bg-icon[data-tone="perf"]   { --kpi-tone: #06b6d4; }
.kpi-bg-icon[data-tone="plan"]   { --kpi-tone: #6366f1; }
html[data-theme="light"] .kpi-bg-icon { opacity: .12; }
html[data-theme="light"] .has-kpi-icon:hover .kpi-bg-icon { opacity: .18; }
@media (max-width: 640px) {
    .kpi-bg-icon { width: 52px; height: 52px; right: 10px; }
    .kpi-mini-card .kpi-bg-icon { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .kpi-bg-icon { transition: none; } }

/* Faint centred icon behind "nothing here yet" messages (kpi-icons.js) */
.has-empty-icon { position: relative; overflow: hidden; isolation: isolate; }
.empty-bg-icon {
    position: absolute; left: 50%; top: 50%; z-index: -1;
    width: 84px; height: 84px; transform: translate(-50%, -50%);
    color: var(--kpi-tone, #6366f1); opacity: .10; pointer-events: none;
}
.empty-bg-icon svg { width: 100%; height: 100%; display: block; }
.ov-empty .empty-bg-icon, .pf-empty .empty-bg-icon, .candle-chart-empty .empty-bg-icon,
.settings-empty-state .empty-bg-icon { width: 120px; height: 120px; }
.ov-list-empty .empty-bg-icon, .lic-empty .empty-bg-icon, .notif-empty .empty-bg-icon,
.cm-empty .empty-bg-icon, .sig-empty .empty-bg-icon, .hof-empty .empty-bg-icon,
.pf-chart-empty .empty-bg-icon { width: 60px; height: 60px; }
.empty-bg-icon[data-tone="money"]  { --kpi-tone: #22c55e; }
.empty-bg-icon[data-tone="risk"]   { --kpi-tone: #f43f5e; }
.empty-bg-icon[data-tone="people"] { --kpi-tone: #8b5cf6; }
.empty-bg-icon[data-tone="tech"]   { --kpi-tone: #0ea5e9; }
.empty-bg-icon[data-tone="signal"] { --kpi-tone: #f59e0b; }
.empty-bg-icon[data-tone="perf"]   { --kpi-tone: #06b6d4; }
.empty-bg-icon[data-tone="plan"]   { --kpi-tone: #6366f1; }
html[data-theme="light"] .empty-bg-icon { opacity: .11; }

/* ---------- Install the app (pwa.js) ---------- */
.pwa-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .10)); border: 1px solid rgba(37, 99, 235, .28); }
.pwa-banner[hidden] { display: none; }
.pwa-banner img { flex: none; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.pwa-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-banner-text strong { font-size: 15px; color: var(--text-main); }
.pwa-banner-text span { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.pwa-banner .btn { flex: none; }
.pwa-banner-close { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.pwa-banner-close:hover { background: rgba(148, 163, 184, .15); color: var(--text-main); }
@media (max-width: 560px) {
    .pwa-banner { flex-wrap: wrap; position: relative; padding-right: 44px; }
    .pwa-banner-text { flex-basis: calc(100% - 60px); }
    .pwa-banner .btn { width: 100%; }
    .pwa-banner-close { position: absolute; top: 8px; right: 8px; }
}
.lf-pwa-sheet { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; padding: 16px;
    background: rgba(2, 6, 23, .55); backdrop-filter: blur(3px); }
.lf-pwa-sheet-card { width: min(420px, 100%); padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px; text-align: center;
    background: var(--bg-card, #fff); color: var(--text-main); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
html[data-theme="light"] .lf-pwa-sheet-card { background: #fff; }
html[data-theme="dark"] .lf-pwa-sheet-card { background: #111827; }
.lf-pwa-sheet-card img { border-radius: 14px; margin-bottom: 8px; }
.lf-pwa-sheet-card h3 { margin: 0 0 10px; font-size: 18px; }
.lf-pwa-sheet-card ol { margin: 0 0 16px; padding-left: 20px; text-align: left; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.lf-pwa-sheet-card .btn { width: 100%; }