/**
 * The Meerkat — Main Stylesheet
 *
 * All colors flow through --tm-* CSS custom properties on :root.
 * Component classes use .tm-* prefix.
 */

/* ── Theme Variables ─────────────────────────────────────────────── */

:root {
    --tm-bg:#FFFFFF;
    --tm-bg-card: rgba(0,0,0,0.02);
    --tm-bg-hover: rgba(196,138,16,0.04);
    --tm-bg-selected: rgba(196,138,16,0.10);
    --tm-border: rgba(0,0,0,0.07);
    --tm-border-lt: rgba(0,0,0,0.10);
    --tm-text: #1A1814;
    --tm-text-muted: #8A8780;
    --tm-text-bright: #1A1814;
    --tm-text-dim: #A5A29B;

    --tm-accent: #C48A10;
    --tm-accent-hover: #9A6B08;
    --tm-accent-light: rgba(196,138,16,0.08);

    --tm-green: #1e8e3e;
    --tm-green-bg: rgba(30, 142, 62, 0.12);
    --tm-red: #D0401E;
    --tm-red-bg: rgba(208, 64, 30, 0.12);
    --tm-gray: #8A8780;
    --tm-gray-bg: rgba(138, 135, 128, 0.12);

    --tm-yellow: #C48A10;
    --tm-yellow-bg: rgba(196, 138, 16, 0.12);

    --tm-navbar-height: 56px;
    --tm-navbar-bg: rgba(245,242,236,0.88);
    --tm-subnav-bg: rgba(250,248,244,0.92);
    --tm-navbar-border: rgba(0,0,0,0.07);

    --tm-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --tm-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.10);
    --tm-card-radius: 12px;

    --tm-font-display: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tm-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --tm-font-body: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ntelioUI2 pane + panel overrides */
    --nui-pane-bg: var(--tm-bg-card);
    --nui-pane-border-color: var(--tm-border);
    --nui-pane-header-bg: rgba(0,0,0,0.02);
    --nui-pane-header-hover-bg: var(--tm-bg-hover);
    --nui-pane-title-color: var(--tm-text-muted);
    --nui-pane-icon-color: var(--tm-text-muted);
    --nui-pane-handle-active-color: var(--tm-accent);
    --nui-panel-bg: transparent;
    --nui-panel-border-color: var(--tm-border);
    --nui-panel-title-color: var(--tm-text);
    --nui-text-primary: var(--tm-text);
    --nui-border-color: var(--tm-border);

    /* Status colors used by inline styles in widgets */
    --tm-success-bg: rgba(30, 142, 62, 0.08);
    --tm-success-border: rgba(30, 142, 62, 0.2);
    --tm-danger-bg: rgba(208, 64, 30, 0.08);
    --tm-danger-border: rgba(208, 64, 30, 0.2);
    --tm-bg-elevated: var(--tm-bg-card);
}

/* ── Dark Theme ────────────────────────────────────────────────── */

[data-theme="dark"] {
    --tm-bg: #0A0A0A;
    --tm-bg-card: rgba(255,255,255,0.02);
    --tm-bg-hover: rgba(232,168,37,0.04);
    --tm-bg-selected: rgba(232,168,37,0.10);
    --tm-border: rgba(255,255,255,0.04);
    --tm-border-lt: rgba(255,255,255,0.06);
    --tm-text: #F0EDE6;
    --tm-text-muted: #5A5A5A;
    --tm-text-bright: #F0EDE6;
    --tm-text-dim: #4A4A4A;

    --tm-accent: #E8A825;
    --tm-accent-hover: #B8841C;
    --tm-accent-light: rgba(232,168,37,0.08);

    --tm-red: #E84825;
    --tm-red-bg: rgba(232, 72, 37, 0.12);

    --tm-yellow: #E8A825;
    --tm-yellow-bg: rgba(232, 168, 37, 0.12);

    --tm-navbar-bg: rgba(10,10,10,0.85);
    --tm-subnav-bg: rgba(28,28,28,0.90);
    --tm-navbar-border: rgba(255,255,255,0.04);

    --tm-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    --tm-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.3);

    --nui-pane-header-bg: rgba(255,255,255,0.02);

    --tm-success-bg: rgba(30, 142, 62, 0.1);
    --tm-success-border: rgba(30, 142, 62, 0.25);
    --tm-danger-bg: rgba(232, 72, 37, 0.1);
    --tm-danger-border: rgba(232, 72, 37, 0.25);
    --tm-bg-elevated: rgba(255,255,255,0.03);
}

/* ── Global Overrides ────────────────────────────────────────────── */

html, body {
    background-color: var(--tm-bg) !important;
    color: var(--tm-text);
    font-family: var(--tm-font-display);
    transition: background 0.4s ease, color 0.4s ease;
}

/* Override Bootstrap dark defaults */
.form-control:focus { box-shadow: none; }
a { color: var(--tm-accent); text-decoration: none; }
a:hover { color: var(--tm-text); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(196,138,16,0.15); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(232,168,37,0.2); }

.ntelioApp {
    background-color: var(--tm-bg) !important;
}

/* Hide default sidebar layout — Meerkat uses top navbar */
.ntelioApp {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#navbar {
    flex-shrink: 0;
}

#breadcrumbs {
    display: none !important;
}

#content-wrapper {
    flex: 1;
    padding: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

#footer {
    flex-shrink: 0;
    height: auto !important;
}
#footer footer {
    border-top: 1px solid var(--tm-border);
    background: var(--tm-bg);
}
#footer .container {
    max-width: 100%;
    padding: 0;
}
#footer .container p {
    width: 100%;
}
.tm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 24px;
    font-size: 0.65rem;
    color: var(--tm-text-muted);
}
.tm-footer-links {
    display: flex;
    gap: 20px;
}
.tm-footer-links a {
    color: var(--tm-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.tm-footer-links a:hover {
    color: var(--tm-text);
}
.tm-footer-copy {
    white-space: nowrap;
}

/* ── Cookie Banner ─────────────────────────────────────────────── */
.tm-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    background: #d4d4d4;
    border-top: 1px solid var(--tm-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}
.tm-cookie-text {
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.5;
    flex: 1;
}
.tm-cookie-text a {
    color: #8a6300;
    text-decoration: none;
}
.tm-cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.tm-cookie-decline {
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: #555;
    border: 1px solid #999;
}
.tm-cookie-decline:hover {
    color: #1a1a1a;
    border-color: #555;
}
.tm-cookie-accept {
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--tm-accent);
    color: #fff;
    border: none;
}
.tm-cookie-accept:hover {
    background: var(--tm-accent-hover);
}

/* ── Legal pages ───────────────────────────────────────────────── */
.tm-legal-page {
    display: flex;
    justify-content: center;
    padding: 3rem 2rem;
    overflow: auto;
    height: 100%;
}
.tm-legal-content {
    max-width: 780px;
    width: 100%;
    color: var(--tm-text);
    line-height: 1.7;
    font-size: 0.95rem;
    font-weight: 300;
}
.tm-legal-content h1 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--tm-text-bright);
    margin: 0 0 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--tm-border);
    line-height: 1.15;
}
.tm-legal-content h2 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    font-weight: 400;
    color: var(--tm-text-bright);
    margin: 2.5em 0 0.6em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--tm-border);
    line-height: 1.2;
}
.tm-legal-content h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--tm-text-bright);
    margin: 2em 0 0.5em;
}
.tm-legal-content h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--tm-text-bright);
    margin: 1.5em 0 0.4em;
}
.tm-legal-content p {
    margin: 1em 0;
}
.tm-legal-content ul, .tm-legal-content ol {
    margin: 0.8em 0;
    padding-left: 1.6em;
}
.tm-legal-content li {
    margin: 0.4em 0;
}
.tm-legal-content li::marker {
    color: var(--tm-accent);
}
.tm-legal-content strong {
    font-weight: 500;
    color: var(--tm-text-bright);
}
.tm-legal-content a {
    color: var(--tm-accent);
    text-decoration: none;
    transition: color 0.2s;
}
.tm-legal-content a:hover {
    color: var(--tm-accent-hover);
    text-decoration: underline;
}
.tm-legal-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, var(--tm-accent), transparent 60%);
    opacity: 0.2;
    margin: 2.5em 0;
}
.tm-legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9rem;
}
.tm-legal-content th {
    text-align: left;
    font-family: var(--tm-font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tm-border-lt);
}
.tm-legal-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tm-border);
    vertical-align: top;
    font-weight: 300;
}
.tm-legal-content tr:last-child td {
    border-bottom: none;
}
.tm-legal-content tr:hover td {
    background: var(--tm-bg-hover);
}
.tm-legal-content code {
    font-family: var(--tm-font-mono);
    font-size: 0.85em;
    color: var(--tm-accent);
    background: var(--tm-accent-light);
    padding: 0.1em 0.4em;
    border-radius: 3px;
}
.tm-legal-content blockquote {
    border-left: 3px solid var(--tm-accent);
    margin: 1.5em 0;
    padding: 1em 1.25em;
    color: var(--tm-text);
    background: var(--tm-accent-light);
    font-size: 0.92rem;
}
.tm-legal-content blockquote strong {
    color: var(--tm-accent);
}
.tm-legal-content em {
    color: var(--tm-text-muted);
}
.tm-legal-loading {
    text-align: center;
    color: var(--tm-text-muted);
    padding: 3em;
    font-size: 0.9rem;
}
.tm-legal-placeholder {
    color: var(--tm-text-muted);
    font-style: italic;
    margin: 2em 0;
    padding: 2em;
    border: 1px dashed var(--tm-border);
    border-radius: 8px;
    text-align: center;
}
.tm-legal-copy {
    color: var(--tm-text-dim);
    font-family: var(--tm-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4em;
    padding-top: 1.5em;
    border-top: 1px solid var(--tm-border);
}
.tm-legal-copy a {
    color: var(--tm-text-dim);
}
.tm-legal-copy a:hover {
    color: var(--tm-accent);
}
@media (max-width: 700px) {
    .tm-legal-page { padding: 2rem 1.25rem; }
    .tm-legal-content { font-size: 0.9rem; }
}

/* ── GroundSignal Variable Overrides ─────────────────────────────── */
/* Re-map all --gs-* variables to the Meerkat amber color scheme
   so that synthesis widgets, tags, and cards inherit the theme.     */

:root {
    --gs-bg: var(--tm-bg);
    --gs-bg-card: var(--tm-bg-card);
    --gs-bg-hover: var(--tm-bg-hover);
    --gs-bg-selected: var(--tm-bg-selected);
    --gs-border: var(--tm-border);
    --gs-text: var(--tm-text);
    --gs-text-muted: var(--tm-text-muted);
    --gs-text-bright: var(--tm-text-bright);
    --gs-accent: var(--tm-accent);
    --gs-accent-hover: var(--tm-accent-hover);
    --gs-success: #1e8e3e;
    --gs-info: var(--tm-accent);
    --gs-warning: var(--tm-accent);
    --gs-danger: var(--tm-red);

    --gs-footer-bg: var(--tm-bg);
    --gs-navbar-bg: var(--tm-navbar-bg);
    --gs-pane-header-bg: var(--tm-bg-card);
    --gs-pane-header-hover-bg: var(--tm-bg-hover);
    --gs-collapsed-bg: var(--tm-bg);
    --gs-card-header-bg: var(--tm-bg-card);
    --gs-transcript-bg: rgba(0, 0, 0, 0.03);
    --gs-person-bg: rgba(196, 138, 16, 0.06);
    --gs-tag-bg: rgba(196, 138, 16, 0.1);
    --gs-tag-content-bg: rgba(196, 138, 16, 0.10);
    --gs-tag-content-color: var(--tm-accent);
    --gs-tag-people-bg: rgba(196, 138, 16, 0.08);
    --gs-tag-people-color: var(--tm-accent-hover);
    --gs-tag-geo-bg: rgba(30, 142, 62, 0.10);
    --gs-tag-geo-color: #1e8e3e;
    --gs-tag-overflow-bg: rgba(138, 135, 128, 0.08);
    --gs-tag-overflow-color: var(--tm-text-muted);
    --gs-new-item-bg: rgba(196, 138, 16, 0.06);
    --gs-scrollbar-thumb: rgba(196, 138, 16, 0.2);
    --gs-scrollbar-thumb-hover: rgba(196, 138, 16, 0.35);
}

[data-theme="dark"] {
    --gs-transcript-bg: rgba(255, 255, 255, 0.02);
    --gs-person-bg: rgba(232, 168, 37, 0.06);
    --gs-tag-bg: rgba(232, 168, 37, 0.1);
    --gs-tag-content-bg: rgba(232, 168, 37, 0.10);
    --gs-tag-people-bg: rgba(232, 168, 37, 0.08);
    --gs-new-item-bg: rgba(232, 168, 37, 0.06);
    --gs-scrollbar-thumb: rgba(232, 168, 37, 0.2);
    --gs-scrollbar-thumb-hover: rgba(232, 168, 37, 0.35);
}

/* Synthesis card overrides for amber theme */
.gs-synthesis-item {
    border-radius: var(--tm-card-radius);
    transition: box-shadow 0.2s, background-color 0.2s;
}

.gs-synthesis-item.gs-selected {
    box-shadow: 0 0 0 2px rgba(196, 138, 16, 0.18);
}

[data-theme="dark"] .gs-synthesis-item.gs-selected {
    box-shadow: 0 0 0 2px rgba(232, 168, 37, 0.18);
}

@keyframes gs-pulse-new {
    0%   { background-color: rgba(196, 138, 16, 0.15); }
    100% { background-color: transparent; }
}

.gs-topic-tag {
    border-radius: 4px;
}

/* ── Synthesis Detail Panel Overrides ────────────────────────────── */

.gs-synthesis-detail {
    font-family: var(--tm-font-body);
}

.gs-detail-headline {
    font-family: var(--tm-font-display);
}

.gs-detail-summary {
    line-height: 1.6;
}

.gs-detail-tag-label {
    font-family: var(--tm-font-mono);
    letter-spacing: 0.08em;
}

.gs-tag {
    border-radius: 4px;
    font-family: var(--tm-font-mono);
}

/* Source pills */
.gs-source-pill {
    border-radius: 20px;
    border: 1px solid var(--tm-border);
    background: transparent;
    transition: border-color 0.2s, color 0.2s;
}

.gs-source-pill:hover {
    border-color: rgba(196, 138, 16, 0.3);
    color: var(--tm-accent);
}

[data-theme="dark"] .gs-source-pill:hover {
    border-color: rgba(232, 168, 37, 0.3);
}

/* Corroboration bar */
.gs-corr-track {
    background: var(--tm-gray-bg);
    border-radius: 3px;
}

[data-theme="dark"] .gs-corr-track {
    background: rgba(255, 255, 255, 0.06);
}

.gs-corr-unk {
    background: var(--tm-text-dim);
}

.gs-corr-label,
.gs-corr-claims {
    font-family: var(--tm-font-mono);
}

/* Detail meta row */
.gs-detail-meta {
    font-family: var(--tm-font-mono);
    border-top-color: var(--tm-border);
}

/* Bootstrap button overrides for detail panel */
.gs-detail-corroboration .btn-outline-primary {
    color: var(--tm-accent);
    border-color: var(--tm-accent);
    background: transparent;
}

.gs-detail-corroboration .btn-outline-primary:hover {
    background: var(--tm-accent);
    border-color: var(--tm-accent);
    color: var(--tm-bg);
}

.gs-detail-corroboration .btn-outline-warning {
    color: var(--tm-accent);
    border-color: var(--tm-accent);
}

.gs-detail-corroboration .btn-outline-warning:hover {
    background: var(--tm-accent);
    color: var(--tm-bg);
}

/* Updated item animation — amber instead of blue */
@keyframes gs-bubble-up {
    0%   { background-color: rgba(196, 138, 16, 0.18); transform: translateY(6px); }
    30%  { background-color: rgba(196, 138, 16, 0.10); transform: translateY(0); }
    100% { background-color: transparent; transform: translateY(0); }
}

/* Badge overrides */
.gs-badge-updated {
    background-color: var(--tm-accent) !important;
}

.gs-badge-new {
    background-color: var(--tm-green) !important;
}

/* ── Sources Widget Overrides ────────────────────────────────────── */

.gs-detail-source-row {
    border-radius: 8px;
    transition: background 0.2s;
}

.gs-detail-source-row:hover {
    background: var(--tm-bg-hover);
}

/* ── Panel & Title Dark-Mode Fixes ───────────────────────────────── */
/* Override hardcoded colors from groundsignal.css + ntelioUI2       */

.nui-panel-title {
    color: var(--tm-text) !important;
}

.nui-panel[data-side] .nui-panel-title {
    color: var(--tm-text-muted) !important;
}

.nui-pane-title {
    color: var(--tm-text-muted) !important;
}

.nui-panel-header {
    display: none !important;
    border-bottom-color: var(--tm-border) !important;
}
.nui-panel[data-panel-id="detail"] > .nui-panel-header {
    display: flex !important;
}
.gs-graph-fullscreen .nui-panel-main > .nui-panel-header {
    display: flex!important;
    background: var(--tm-bg, #fff) !important;
    border-bottom: 1px solid var(--tm-border) !important;
    padding: 8px 16px !important;
}

/* Hardcoded dark text in groundsignal.css — make theme-aware */
.gs-platform-badge[data-platform="x"] {
    color: var(--tm-text) !important;
}

.gs-item-title {
    color: var(--tm-text-bright) !important;
}

.gs-source-title {
    color: var(--tm-text-bright) !important;
}

.gs-content-title {
    color: var(--tm-text-bright) !important;
}

/* Panel header shadow — softer, theme-aware */
.nui-panel-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .nui-panel-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Collapsed pane background */
.nui-collapsible-pane.collapsed {
    background: var(--tm-bg) !important;
}

/* Pane header */
.nui-pane-header {
    background: transparent !important;
    border-bottom-color: var(--tm-border) !important;
}

/* Detail source section headers */
.gs-right-section-header {
    background: var(--tm-bg-card) !important;
    border-color: var(--tm-border) !important;
    color: var(--tm-text-muted) !important;
}

/* Modal / dialog text */
.modal-content {
    background: var(--tm-bg) !important;
    color: var(--tm-text) !important;
    border-color: var(--tm-border) !important;
}

/* Corroboration timeline & claim strip hardcoded colors */
.gs-corr-timeline-label,
.gs-corr-timeline-item,
.gs-tclaim-text,
.gs-tclaim-detail-signal-title,
.gs-tclaim-detail-siblings-title,
.gs-tstrip-btn,
.gs-tstrip-btn:hover {
    color: var(--tm-text) !important;
}

.gs-tstrip-btn:hover {
    background: var(--tm-bg-hover) !important;
}

/* Expandable sources widget toggle */
.gs-sources-toggle {
    color: var(--tm-accent) !important;
}

/* Bootstrap form inputs in dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: rgba(255,255,255,0.03);
    color: var(--tm-text);
    border-color: var(--tm-border-lt);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--tm-text-dim);
}

/* ── Top Navbar ──────────────────────────────────────────────────── */

.tm-navbar-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.tm-top-navbar {
    display: flex;
    align-items: center;
    height: var(--tm-navbar-height);
    padding: 0 24px;
    background: var(--tm-navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--tm-navbar-border);
    gap: 8px;
    transition: background 0.4s ease, border-color 0.4s ease;
    position: relative;
    z-index: 2;
}

/* ── Sub-navigation (second tier) ───────────────────────────────── */

.tm-subnav {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 0 24px 0 0;
    height: 40px;
    background: var(--tm-subnav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--tm-navbar-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tm-subnav::-webkit-scrollbar { display: none; }

.tm-subnav.show {
    display: flex;
}

.tm-subnav-item {
    padding: 6px 14px;
    border-radius: 8px;
    color: var(--tm-text-muted);
    font-family: var(--tm-font-display);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.tm-subnav-item:hover {
    background: var(--tm-bg-hover);
    color: var(--tm-text);
}

.tm-subnav-item.active {
    background: var(--tm-accent-light);
    color: var(--tm-accent);
    font-weight: 600;
}

.tm-navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tm-text-bright);
    margin-right: 24px;
    cursor: pointer;
}

.tm-navbar-brand:hover { color: var(--tm-text-bright); }

.tm-navbar-brand img {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

/* Dark mode: tint logo via SVG mask */
[data-theme="dark"] .tm-navbar-brand img { display: none; }
[data-theme="dark"] .tm-navbar-brand::before {
    content: "";
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-color: var(--tm-accent);
    -webkit-mask: url('../../../groundsignal/assets/meerkat-head-simpler.svg') center / contain no-repeat;
    mask: url('../../../groundsignal/assets/meerkat-head-simpler.svg') center / contain no-repeat;
}

@keyframes tm-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(196,138,16,0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(196,138,16,0.5)); }
}
[data-theme="dark"] .tm-navbar-brand {
    animation: tm-logo-glow 3s ease-in-out infinite;
}

.tm-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.tm-brand-title {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
}

.tm-brand-sub {
    font-family: var(--tm-font-mono);
    font-size: 10px;
    text-align: center;
    color: var(--tm-text-muted);
    letter-spacing: 0.15em;
    margin-top: 1px;
}

.tm-navbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.tm-nav-item {
    padding: 8px 16px;
    border-radius: 10px;
    color: var(--tm-text-muted);
    font-family: var(--tm-font-display);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.tm-nav-item:hover {
    background: var(--tm-bg-hover);
    color: var(--tm-text);
}

.tm-nav-item.active {
    background: var(--tm-accent-light);
    color: var(--tm-accent);
    font-weight: 600;
}

.tm-nav-item.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.tm-navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ── Profile Dropdown ────────────────────────────────────────────── */

.tm-profile-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--tm-text);
    transition: background 0.15s;
}

.tm-profile-trigger:hover {
    background: var(--tm-bg-hover);
}

.tm-profile-menu {
    position: fixed;
    top: var(--tm-navbar-height);
    right: 24px;
    background: var(--tm-bg);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-card-radius);
    box-shadow: var(--tm-card-shadow-hover);
    min-width: 180px;
    max-height: calc(100vh - var(--tm-navbar-height) - 16px);
    overflow-y: auto;
    padding: 4px 0;
    z-index: 9999;
    display: none;
}

.tm-profile-menu.show {
    display: block;
}

.tm-profile-menu-item {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--tm-text);
    cursor: pointer;
    transition: background 0.1s;
}

.tm-profile-menu-item:hover {
    background: var(--tm-bg-hover);
}

.tm-profile-menu-divider {
    height: 1px;
    background: var(--tm-border);
    margin: 4px 0;
}

/* ── Auth Buttons (logged-out navbar) ────────────────────────────── */

.tm-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    border: none;
    text-decoration: none;
}

.tm-btn-primary {
    background: linear-gradient(135deg, var(--tm-accent) 0%, var(--tm-accent-hover) 100%);
    color: var(--tm-bg);
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(196,138,16,0.2);
}

.tm-btn-primary:hover {
    box-shadow: 0 4px 20px rgba(196,138,16,0.3);
    color: var(--tm-bg);
    transform: translateY(-1px);
}

.tm-btn-outline {
    background: transparent;
    color: var(--tm-text);
    border: 1px solid var(--tm-border-lt, var(--tm-border));
}

.tm-btn-outline:hover {
    background: var(--tm-bg-hover);
    border-color: rgba(196,138,16,0.3);
    color: var(--tm-accent);
}

/* ── Signal Card ─────────────────────────────────────────────────── */

.tm-signal-card {
    background: var(--tm-bg-card);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-card-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.tm-signal-card:hover {
    box-shadow: var(--tm-card-shadow-hover);
    border-color: rgba(196,138,16,0.3);
}

.tm-signal-card.selected {
    border-color: var(--tm-accent);
    background: var(--tm-bg-selected);
}

[data-theme="dark"] .tm-signal-card:hover {
    border-color: rgba(232,168,37,0.3);
}

.tm-signal-card-headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text-bright);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

.tm-signal-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tm-text-muted);
    flex-wrap: wrap;
}

.tm-signal-card-meta .tm-separator {
    color: var(--tm-border);
}

.tm-signal-card-curator {
    color: var(--tm-accent);
    font-weight: 500;
    cursor: pointer;
}

.tm-signal-card-curator:hover {
    text-decoration: underline;
}

.tm-signal-card-time {
    font-size: 12px;
    color: var(--tm-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
    padding-top: 2px;
}

/* ── Story Card ──────────────────────────────────────────────────── */

/* ── Story Card (expandable accordion) ────────────────────────────── */

.tm-story-card {
    background: var(--tm-bg-card);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 16px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.tm-story-card.open {
    border-color: var(--tm-accent);
}
.tm-story-card-header {
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.tm-story-card-header:hover {
    background: var(--tm-bg-hover, #fafbfc);
}
.tm-story-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.tm-story-card-headline {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text);
    line-height: 1.3;
}
.tm-story-card-time {
    font-size: 12px;
    color: var(--tm-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.tm-story-expand {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--tm-text-muted);
    transition: transform 0.2s;
    margin-left: 4px;
}
.tm-story-card.open .tm-story-expand {
    transform: rotate(180deg);
}
.tm-story-card-scope {
    font-size: 11px;
    color: var(--tm-text-muted);
    line-height: 1.4;
    margin-bottom: 4px;
}
.tm-story-card-summary {
    font-size: 13px;
    color: var(--tm-text);
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm-story-card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tm-text-muted);
}
.tm-story-card-badge {
    background: var(--tm-bg);
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.tm-story-card-latest {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    font-size: 11px;
}

/* ── Story Card Body (expanded) ──────────────────────────────────── */

.tm-story-card-body {
    display: none;
    border-top: 1px solid var(--tm-border);
}
.tm-story-card.open .tm-story-card-body {
    display: flex;
}

/* Signal list panel (left side of expanded card) */
.tm-story-signal-list-panel {
    width: 340px;
    flex-shrink: 0;
    border-right: 1px solid var(--tm-border);
    overflow-y: auto;
    max-height: 500px;
}
.tm-story-signal-item {
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--tm-border) 50%, transparent);
    cursor: pointer;
    display: flex;
    gap: 10px;
    transition: background 0.15s;
}
.tm-story-signal-item:hover {
    background: var(--tm-bg-hover, #f8f9fa);
}
.tm-story-signal-item.selected {
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    border-left: 3px solid var(--tm-accent);
    padding-left: 11px;
}
.tm-story-signal-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
}
.tm-story-signal-dot.confirmed { background: var(--tm-green, #28a745); }
.tm-story-signal-dot.developing { background: #fd7e14; }
.tm-story-signal-dot.single { background: var(--tm-text-muted, #6c757d); }
.tm-story-signal-content {
    flex: 1;
    min-width: 0;
}
.tm-story-signal-headline {
    font-size: 13px;
    font-weight: 500;
    color: var(--tm-text);
    margin-bottom: 2px;
}
.tm-story-signal-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 3px;
}
.tm-story-signal-sources .gs-source-pill {
    font-size: 11px;
}
.tm-story-signal-meta {
    font-size: 11px;
    color: var(--tm-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Signal detail panel (right side of expanded card) */
.tm-story-signal-detail-panel {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 500px;
}
.tm-story-signal-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--tm-text-muted);
    font-size: 13px;
}
.tm-story-signal-detail-headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text);
    margin-bottom: 6px;
}
.tm-story-signal-detail-summary {
    font-size: 13px;
    color: var(--tm-text);
    line-height: 1.6;
    margin-bottom: 10px;
}
.tm-story-signal-detail-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Shared badges */
.tm-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.tm-badge-green { background: #d4edda; color: #155724; }
.tm-badge-blue { background: #cce5ff; color: #004085; }
.tm-badge-gray { background: var(--tm-bg, #f0f1f3); color: var(--tm-text-muted); }
.tm-badge-light { background: var(--tm-bg, #f0f1f3); color: var(--tm-text); }
.tm-story-card-loading {
    padding: 20px;
    text-align: center;
    color: var(--tm-text-muted);
    font-size: 13px;
}

/* ── Story Detail Panel (right side of expanded card) ────────────── */

.tm-story-detail-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.tm-story-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--tm-text-muted);
    font-size: 13px;
}

/* Signal header within detail panel */
.tm-story-sig-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--tm-border);
}
.tm-story-sig-headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text);
    margin-bottom: 4px;
}
.tm-story-sig-summary {
    font-size: 13px;
    color: var(--tm-text);
    line-height: 1.55;
    margin-bottom: 8px;
}
.tm-story-sig-badges {
    display: flex;
    gap: 6px;
}

/* ── Claim Strip ─────────────────────────────────────────────────── */

.tm-claim-strip {
    padding: 10px 18px;
    background: var(--tm-bg, #f8f9fa);
    border-bottom: 1px solid var(--tm-border);
}
.tm-claim-strip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tm-text-muted);
    margin-bottom: 8px;
}
.tm-claim-strip-track {
    display: flex;
    align-items: center;
    position: relative;
    height: 36px;
    min-width: 100%;
}
.tm-claim-strip-line {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--tm-border, #dee2e6);
}
.tm-claim-dot-wrap {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    justify-content: center;
}
.tm-claim-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
    border: 2px solid var(--tm-bg-card, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.tm-claim-dot:hover { transform: scale(1.3); }
.tm-claim-dot.selected {
    transform: scale(1.5);
    box-shadow: 0 0 0 3px rgba(74,124,255,0.3);
}

/* ── Claim Detail ────────────────────────────────────────────────── */

.tm-claim-scroll {
    height: 120px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    padding: 0 18px;
    margin-bottom: 12px;
}
.tm-claim-card {
    scroll-snap-align: start;
    min-height: 100%;
    box-sizing: border-box;
    padding: 12px 0;
}
.tm-claim-source-pinned {
    padding: 0 18px 14px;
}
.tm-claim-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 8px;
    color: var(--tm-text);
}
.tm-claim-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 12px;
}
.tm-claim-field-label { color: var(--tm-text-muted); font-weight: 600; }
.tm-claim-field-value { color: var(--tm-text); }
.tm-claim-source {
    background: var(--tm-bg, #f8f9fa);
    border-radius: 6px;
    padding: 10px 12px;
    border-left: 3px solid var(--tm-text-muted, #6c757d);
}
.tm-claim-source-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.tm-claim-source-platform {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
}
.tm-claim-source-platform.plat-x { background: #14171a; }
.tm-claim-source-platform.plat-telegram { background: #0088cc; }
.tm-claim-source-platform.plat-youtube { background: #ff0000; }
.tm-claim-source-platform.plat-reddit { background: #ff4500; }
.tm-claim-source-platform.plat-bluesky { background: #0085ff; }
.tm-claim-source-platform.plat-unknown { background: #6c757d; }
.tm-claim-source-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text);
}
.tm-claim-source-text {
    font-size: 12px;
    color: var(--tm-text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── Story Status Dot ─────────────────────────────────────────────── */

.tm-story-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tm-text-muted);
}
.tm-story-status.active {
    background: var(--tm-green);
}
.tm-story-status.quiet {
    background: #dee2e6;
}
[data-theme="dark"] .tm-story-status.quiet {
    background: #495057;
}

/* ── Story Scope Badge ────────────────────────────────────────────── */

.tm-story-scope {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent);
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.4;
}

/* ── Story Feed ───────────────────────────────────────────────────── */

.tm-story-feed {
    display: flex;
    flex-direction: column;
}

/* ── Story Detail ─────────────────────────────────────────────────── */

.tm-story-detail-header {
    margin-bottom: 0;
}
.tm-story-detail-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tm-text-muted);
}

/* ── Story Chapter Headers ────────────────────────────────────────── */

.tm-story-chapter {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tm-text-muted);
    background: var(--tm-bg);
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--tm-border);
    margin-top: 4px;
}

/* ── Story Signal Mini Cards ──────────────────────────────────────── */

.tm-story-signal-list {
    display: flex;
    flex-direction: column;
}
.tm-story-signal-mini {
    padding: 10px 0;
    border-bottom: 1px solid var(--tm-border);
    cursor: pointer;
    transition: background 0.12s;
}
.tm-story-signal-mini:hover {
    background: var(--tm-bg-card);
}
.tm-story-signal-mini-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tm-story-signal-mini-headline {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-text);
    line-height: 1.3;
}
.tm-story-signal-mini-time {
    font-size: 11px;
    color: var(--tm-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}
.tm-story-signal-mini-summary {
    font-size: 12px;
    color: var(--tm-text-muted);
    line-height: 1.5;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm-story-signal-mini-meta {
    font-size: 11px;
    color: var(--tm-text-muted);
    margin-top: 4px;
}

/* ── Story Breadcrumb (in signal detail) ──────────────────────────── */

.tm-story-breadcrumb {
    display: inline-block;
    font-size: 13px;
    color: var(--tm-accent);
    text-decoration: none;
    margin-bottom: 12px;
    padding: 4px 0;
}
.tm-story-breadcrumb:hover {
    text-decoration: underline;
    color: var(--tm-accent);
}

/* ── Bookmark Button ─────────────────────────────────────────────── */

.tm-bookmark-btn {
    background: none;
    border: none;
    color: var(--tm-text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.tm-bookmark-btn:hover {
    color: var(--tm-accent);
    transform: scale(1.15);
}

.tm-bookmark-btn.bookmarked {
    color: var(--tm-accent);
}

.tm-bookmark-btn-lg {
    font-size: 18px;
    padding: 4px 6px;
}

/* ── Bookmark Label Popover ─────────────────────────────────────── */

.tm-bookmark-popover {
    position: fixed;
    z-index: 9999;
    width: 220px;
    background: var(--tm-card-bg, #fff);
    border: 1px solid var(--tm-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: auto;
}
.tm-bookmark-popover-visible {
    opacity: 1;
    transform: translateY(0);
}
.tm-bookmark-popover-header {
    font-weight: 600;
    font-size: 0.78rem;
    padding: 10px 14px 6px;
    color: var(--tm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tm-bookmark-popover-labels {
    max-height: 200px;
    overflow-y: auto;
}
.tm-bookmark-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--tm-text, #334155);
    transition: background 0.1s;
    margin: 0;
}
.tm-bookmark-popover-row:hover {
    background: var(--tm-hover-bg, #f1f5f9);
}
.tm-bookmark-popover-cb {
    accent-color: var(--tm-accent, #6366f1);
    margin: 0;
    cursor: pointer;
}
.tm-bookmark-popover-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.tm-bookmark-popover-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm-bookmark-popover-create {
    padding: 8px 14px;
    color: var(--tm-accent, #6366f1);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.1s;
}
.tm-bookmark-popover-create:hover {
    background: var(--tm-hover-bg, #f1f5f9);
}
.tm-bookmark-popover-divider {
    border-top: 1px solid var(--tm-border, #e2e8f0);
    margin: 4px 0;
}
.tm-bookmark-popover-action {
    padding: 8px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--tm-text, #334155);
    transition: background 0.1s;
}
.tm-bookmark-popover-action:hover {
    background: var(--tm-hover-bg, #f1f5f9);
}
.tm-bookmark-popover-action.danger {
    color: var(--tm-danger, #ef4444);
}
.tm-bookmark-popover-action:last-child {
    border-radius: 0 0 10px 10px;
}

/* Create label inline form */
.tm-bookmark-popover-create-form {
    padding: 8px 14px;
}
.tm-bookmark-popover-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--tm-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--tm-card-bg, #fff);
    color: var(--tm-text, #334155);
    outline: none;
    margin-bottom: 6px;
}
.tm-bookmark-popover-input:focus {
    border-color: var(--tm-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.tm-bookmark-popover-input-error {
    border-color: var(--tm-danger, #ef4444) !important;
    animation: tm-shake 0.3s;
}
@keyframes tm-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.tm-bookmark-popover-color-picker {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tm-bookmark-popover-color-opt {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.1s, transform 0.1s;
}
.tm-bookmark-popover-color-opt:hover {
    transform: scale(1.2);
}
.tm-bookmark-popover-color-opt.selected {
    border-color: var(--tm-text, #334155);
}

/* ── Label Pills (inline on signal cards) ───────────────────────── */

.tm-label-pills {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tm-label-pill {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
}

/* ── Bookmark Filter Chips (BookmarksPage) ──────────────────────── */

.tm-bookmark-filters {
    padding: 8px 16px;
    border-bottom: 1px solid var(--tm-border, #e2e8f0);
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.tm-bookmark-filter-chip {
    background: var(--tm-card-bg, #fff);
    border: 1px solid var(--tm-border, #e2e8f0);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tm-text, #334155);
    transition: background 0.1s, border-color 0.1s;
}
.tm-bookmark-filter-chip:hover {
    background: var(--tm-hover-bg, #f1f5f9);
}
.tm-bookmark-filter-chip.active {
    background: var(--tm-accent, #6366f1);
    color: #fff;
    border-color: var(--tm-accent, #6366f1);
}
.tm-bookmark-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Share Button ────────────────────────────────────────────────── */

.tm-share-btn {
    background: none;
    border: none;
    color: var(--tm-text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

/* Ensure share/bookmark buttons in synthesis header don't overlap time */
.gs-synthesis-header .tm-share-btn,
.gs-synthesis-header .tm-bookmark-btn {
    margin-left: 4px;
}

.tm-share-btn:hover {
    color: var(--tm-accent);
    transform: scale(1.15);
}

.tm-share-btn-lg {
    font-size: 17px;
    padding: 4px 6px;
}

/* ── Corroboration Bar ───────────────────────────────────────────── */

.tm-corrob-bar {
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    background: var(--tm-gray-bg);
}

.tm-corrob-bar.mini {
    width: 80px;
    height: 4px;
}

.tm-corrob-bar.full {
    width: 100%;
    height: 8px;
    border-radius: 4px;
}

.tm-corrob-segment-green {
    background: var(--tm-green);
}

.tm-corrob-segment-red {
    background: var(--tm-red);
}

.tm-corrob-segment-gray {
    background: var(--tm-gray);
}

.tm-corrob-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-muted);
}

/* ── TagCloud 3D ────────────────────────────────────────────────── */

.tm-tag-cloud-3d {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.tm-tag-cloud-3d canvas {
    display: block;
    margin: 0 auto;
    cursor: grab;
}

.tm-tag-cloud-3d canvas:active {
    cursor: grabbing;
}

.tm-tag-cloud-3d .tm-tc3d-tags {
    display: none;
}

/* ── Topic Chips ─────────────────────────────────────────────────── */

.tm-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 0;
}

.tm-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--tm-border);
    color: var(--tm-text-muted);
    background: transparent;
    transition: all 0.15s;
}

.tm-topic-chip:hover {
    border-color: var(--tm-accent);
    color: var(--tm-accent);
}

.tm-topic-chip.active {
    background: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #ffffff;
}

.tm-topic-chip.active .tm-topic-chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.tm-topic-chip-count {
    font-size: 10px;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--tm-bg-card);
    color: var(--tm-text-muted);
    line-height: 16px;
    min-width: 16px;
    text-align: center;
}

/* Story search bar */
.tm-story-search-bar {
    padding: 6px 16px 8px;
    border-bottom: 1px solid var(--tm-border);
}
.tm-story-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tm-story-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.tm-story-search-icon {
    position: absolute;
    left: 10px;
    font-size: 11px;
    color: var(--tm-text-muted);
    pointer-events: none;
}
.tm-story-search-input {
    width: 100%;
    font-size: 13px;
    padding: 6px 12px 6px 30px;
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    background: var(--tm-bg);
    color: var(--tm-text);
    outline: none;
}
.tm-story-search-input:focus {
    border-color: var(--tm-accent);
}
.tm-search-active-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 14px;
    background: var(--tm-accent);
    color: #fff;
    font-weight: 500;
}
.tm-search-active-pill .tm-search-clear {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 8px;
    font-size: 14px;
    line-height: 1;
    opacity: 0.8;
}
.tm-search-active-pill .tm-search-clear:hover { opacity: 1;
}

/* ── Watchlist Cards ────────────────────────────────────────────── */
.tm-watchlist-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--tm-border);
    cursor: pointer;
    transition: background 0.15s;
}
.tm-watchlist-card:hover { background: var(--tm-bg-hover, #f8f9fa); }
.tm-watchlist-card-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.tm-watchlist-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-text-bright);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm-watchlist-card-count {
    font-size: 11px;
    color: var(--tm-text-muted);
    flex-shrink: 0;
    margin-left: 8px;
}
.tm-watchlist-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.15s;
}
.tm-watchlist-card:hover .tm-watchlist-card-actions { opacity: 1; }
.tm-watchlist-action {
    background: none;
    border: none;
    color: var(--tm-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 4px;
}
.tm-watchlist-action:hover { color: var(--tm-text); background: var(--tm-bg-card); }
.tm-watchlist-action-danger:hover { color: var(--tm-danger, #dc3545); }
.tm-watchlist-card-scope {
    font-size: 12px;
    color: var(--tm-text);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm-watchlist-card-latest {
    font-size: 11px;
    color: var(--tm-text-muted);
}
.tm-watchlist-card.open {
    background: color-mix(in srgb, var(--tm-accent) 5%, transparent);
    border-left: 3px solid var(--tm-accent);
    padding-left: 13px;
}
.tm-watchlist-card-expand {
    padding-top: 4px;
}
.tm-watchlist-signal:hover {
    background: var(--tm-bg-hover, rgba(0,0,0,0.03));
    border-radius: 6px;
    padding-left: 4px !important;
    margin-left: -4px;
}

/* ── Filter Bar ─────────────────────────────────────────────────── */

.tm-filter-bar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--tm-border);
}
.tm-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}
.tm-filter-toggle {
    display: none;  /* hidden on desktop */
}
.tm-stepper-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Source Count Stepper ────────────────────────────────────────── */

.tm-source-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    padding: 2px 4px;
    transition: border-color 0.15s;
}

.tm-source-stepper-active {
    border-color: var(--tm-accent);
}

.tm-source-stepper-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--tm-text-muted);
    padding: 0 4px;
    white-space: nowrap;
}

.tm-source-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tm-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    padding: 0;
}

.tm-source-stepper-btn:hover:not(:disabled) {
    background: var(--tm-bg-hover);
    color: var(--tm-accent);
}

.tm-source-stepper-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.tm-source-stepper-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text);
    min-width: 24px;
    text-align: center;
}

.tm-source-stepper-active .tm-source-stepper-value {
    color: var(--tm-accent);
}

/* ── Feed Tabs (Stories / Signals / Following / …) ───────────────── */

.tm-feed-tabs {
    display: flex;
    border-bottom: 1px solid var(--tm-border);
    flex-shrink: 0;
}

.tm-feed-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.tm-feed-tab:hover {
    color: var(--tm-text);
    background: var(--tm-bg-hover);
}

.tm-feed-tab.active {
    color: var(--tm-accent);
    border-bottom-color: var(--tm-accent);
}

/* ── Curated Synthesis (X-style curator + signal) ───────────────── */

.tm-curated-item .tm-curator-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.4;
}

/* Prevent BookmarkInjector from adding absolute-positioned buttons on curated items */
.tm-curated-item > .tm-bookmark-btn {
    display: none !important;
}

.tm-bookmark-btn-sm {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tm-text-muted);
    font-size: 14px;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.tm-bookmark-btn-sm:hover {
    color: var(--tm-accent);
}

.tm-bookmark-btn-sm.bookmarked {
    color: var(--tm-accent);
}

.tm-curator-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

div.tm-curator-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.tm-curator-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.tm-follow-slot {
    flex-shrink: 0;
}

/* xs variant moved after base .tm-follow-btn — see Follow Button section */

.tm-curator-handle {
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-curator-time {
    font-size: 12px;
    color: var(--tm-text-muted);
    white-space: nowrap;
}

.tm-curated-item .tm-signal-body {
    margin-left: 50px;
}

/* ── Curator Card ────────────────────────────────────────────────── */

.tm-curator-card {
    background: var(--tm-bg-card);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-card-radius);
    padding: 16px;
    transition: box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}

.tm-curator-card:hover {
    box-shadow: var(--tm-card-shadow-hover);
}

.tm-curator-handle {
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-accent);
}

.tm-curator-bio {
    font-size: 13px;
    color: var(--tm-text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.tm-curator-stats {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--tm-text-muted);
}

/* ── Follow Button ───────────────────────────────────────────────── */

.tm-follow-btn {
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid;
}

.tm-follow-btn.not-following {
    background: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #ffffff;
}

.tm-follow-btn.not-following:hover {
    background: var(--tm-accent-hover);
    border-color: var(--tm-accent-hover);
}

.tm-follow-btn.following {
    background: transparent;
    border-color: var(--tm-border);
    color: var(--tm-text-muted);
}

.tm-follow-btn.following:hover {
    border-color: var(--tm-red);
    color: var(--tm-red);
    background: var(--tm-red-bg);
}

.tm-follow-btn.tm-follow-btn-xs {
    font-size: 11px;
    padding: 1px 10px;
    border-radius: 12px;
    border-width: 1px;
    line-height: 18px;
}

/* ── Credibility Score Card ──────────────────────────────────────── */

.tm-score-card {
    text-align: center;
    padding: 12px 16px;
    background: var(--tm-bg);
    border-radius: var(--tm-card-radius);
    min-width: 90px;
}

.tm-score-card-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--tm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tm-score-card-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
}

.tm-score-card-value.green { color: var(--tm-green); }
.tm-score-card-value.yellow { color: var(--tm-yellow); }
.tm-score-card-value.red { color: var(--tm-red); }

/* ── Theme Toggle ───────────────────────────────────────────────── */

.tm-theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--tm-text-muted);
}

.tm-theme-toggle:hover {
    background: var(--tm-bg-hover);
    color: var(--tm-text);
}

.tm-theme-toggle i {
    font-size: 16px;
}

/* ── Skeleton Loader ─────────────────────────────────────────────── */

.tm-skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
    animation: tm-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

[data-theme="dark"] .tm-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
}

/* ── Empty State ─────────────────────────────────────────────────── */

.tm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.tm-empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--tm-text);
    margin-bottom: 8px;
}

.tm-empty-state-message {
    font-size: 14px;
    max-width: 360px;
    line-height: 1.5;
}

/* ── Upgrade Prompt ──────────────────────────────────────────────── */

.tm-upgrade-prompt {
    background: var(--tm-accent-light);
    border: 1px solid rgba(26, 115, 232, 0.2);
    border-radius: var(--tm-card-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tm-upgrade-prompt-text {
    font-size: 13px;
    color: var(--tm-text);
}

/* ── Utility ─────────────────────────────────────────────────────── */

.tm-section-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 0 8px;
}

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

/* ── Page Containers ─────────────────────────────────────────────── */

.tm-page {
    height: 100%;
    overflow-y: auto;
    position: relative;
}

.tm-page-centered {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px;
}

.tm-page-wide {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.tm-page-full {
    height: 100%;
    overflow: hidden;
}

/* ── Loading Overlay ────────────────────────────────────────────── */

.widget-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tm-bg);
    opacity: 0.92;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.widget-loading-pinwheel {
    width: 40px;
    height: 40px;
    border: 4px solid var(--tm-border-lt);
    border-top: 4px solid var(--tm-accent);
    border-radius: 50%;
    animation: widget-spin 1s linear infinite;
}

@keyframes widget-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Graph Page Overrides ───────────────────────────────────────── */

/* Handle button: hidden on desktop, shown on mobile via media query */
.tm-toolbar-handle {
    display: none;
}

/* Fix hardcoded light-mode colors in graph toolbar, search, toggles */

[data-theme="dark"] .gs-graph-toolbar {
    background: rgba(20, 20, 20, 0.92);
    border-color: var(--tm-border-lt);
}

[data-theme="dark"] .gs-graph-search-input {
    background: rgba(20, 20, 20, 0.92);
    border-color: var(--tm-border-lt);
    color: var(--tm-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .gs-graph-search-input::placeholder {
    color: var(--tm-text-dim);
}

[data-theme="dark"] .gs-graph-search-input:focus {
    border-color: rgba(232, 168, 37, 0.4);
    box-shadow: 0 2px 12px rgba(232, 168, 37, 0.1);
}

[data-theme="dark"] .gs-graph-search-dropdown {
    background: rgba(20, 20, 20, 0.97);
    border-color: var(--tm-border-lt);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .gs-search-item {
    color: var(--tm-text);
}

[data-theme="dark"] .gs-search-item:hover,
[data-theme="dark"] .gs-search-item.active {
    background: var(--tm-bg-hover);
}

[data-theme="dark"] .gs-toggle-label,
[data-theme="dark"] .gs-slider-label,
[data-theme="dark"] .gs-slider-value {
    color: #9a9590;
}

[data-theme="dark"] .gs-tb-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #9a9590;
}

[data-theme="dark"] .gs-tb-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--tm-text);
}

[data-theme="dark"] .gs-tb-btn:active {
    background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .gs-tb-btn svg {
    stroke: #eeebe6;
}

[data-theme="dark"] .gs-tb-btn:hover svg {
    stroke: var(--tm-text);
}

[data-theme="dark"] .gs-tb-divider {
    background: var(--tm-border-lt);
}

[data-theme="dark"] .gs-slider-wrapper {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .gs-graph-search-icon svg {
    stroke: var(--tm-text-dim);
}

/* ── Geography Page Overrides ───────────────────────────────────── */

.gs-geography-page .nui-globe-map {
    border: none;
}

[data-theme="dark"] .gs-globe-zoom-btn {
    background: rgba(20, 20, 20, 0.9);
    border-color: var(--tm-border-lt);
    color: var(--tm-text-muted);
}

[data-theme="dark"] .gs-globe-zoom-btn:hover {
    background: rgba(30, 30, 30, 1);
    color: var(--tm-text);
}

[data-theme="dark"] .gs-globe-zoom-btn:active {
    background: rgba(40, 40, 40, 1);
}

[data-theme="dark"] .gs-globe-egg {
    background: rgba(20, 20, 20, 0.85);
    border-color: var(--tm-border-lt);
}

[data-theme="dark"] .gs-globe-egg:hover {
    background: rgba(232, 168, 37, 0.15);
}

/* ── Geography: City POI Markers ────────────────────────────────── */

.tm-city-marker {
    position: relative;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.tm-city-dot {
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 8px rgba(255, 100, 50, 0.5), inset 0 0 4px rgba(255, 200, 100, 0.3);
}

.tm-city-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
    pointer-events: none;
}

.tm-city-count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 200, 150, 0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    pointer-events: none;
}

.tm-city-pulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 120, 60, 0.5);
    animation: tm-city-pulse-ring 2s ease-out infinite;
    pointer-events: none;
}

@keyframes tm-city-pulse-ring {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ── Claims List Page Overrides ─────────────────────────────────── */

.gs-claimlist-card.gs-selected {
    box-shadow: 0 0 0 2px rgba(196, 138, 16, 0.18);
}

[data-theme="dark"] .gs-claimlist-card.gs-selected {
    box-shadow: 0 0 0 2px rgba(232, 168, 37, 0.18);
}

.gs-claimlist-subject {
    color: var(--tm-accent) !important;
    background: var(--tm-accent-light) !important;
}

[data-theme="dark"] .gs-claimlist-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .gs-claimlist-toggle.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--tm-border-lt);
}

[data-theme="dark"] .gs-claimlist-topic {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .gs-claimlist-search:focus {
    border-color: var(--tm-accent);
}

/* ── Claims Timeline Page Overrides ─────────────────────────────── */

[data-theme="dark"] .gs-tstrip {
    background: var(--tm-bg);
}

[data-theme="dark"] .gs-tstrip-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--tm-border-lt);
    color: var(--tm-text-muted);
}

[data-theme="dark"] .gs-tstrip-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tm-text);
}

[data-theme="dark"] .gs-tstrip-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .gs-siblings-subject {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Story Timeline Widget ──────────────────────────────────────── */

.tm-story-timeline {
    display: flex;
    height: 100%;
    min-height: 0;
    background: var(--tm-bg);
}
.tm-stl-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Sidebar */
.tm-stl-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--tm-bg);
    border-right: 1px solid var(--tm-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width 0.2s ease;
}
.tm-stl-sidebar.collapsed {
    width: 40px;
    overflow: hidden;
}
.tm-stl-sidebar.collapsed > *:not(.tm-stl-sidebar-toggle) { display: none; }
.tm-stl-sidebar-toggle {
    padding: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    color: var(--tm-text-muted);
    border-bottom: 1px solid var(--tm-border);
    flex-shrink: 0;
}
.tm-stl-sidebar-toggle:hover { color: var(--tm-text); }
.tm-stl-sidebar-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tm-text-muted);
    padding: 10px 14px 6px;
}
.tm-stl-sidebar-all {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--tm-text);
    border-bottom: 1px solid var(--tm-border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.tm-stl-sidebar-all:hover { background: var(--tm-bg-card); }
.tm-stl-sidebar-all.selected { background: color-mix(in srgb, var(--tm-accent) 8%, transparent); font-weight: 600; }

.tm-stl-sidebar-item {
    padding: 10px 14px;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: background 0.15s;
}
.tm-stl-sidebar-item:hover { background: var(--tm-bg-card); }
.tm-stl-sidebar-item.selected { background: color-mix(in srgb, var(--tm-accent) 8%, transparent); }
.tm-stl-si-header { display: flex; align-items: center; gap: 6px; }
.tm-stl-si-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tm-stl-si-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-stl-sidebar-item.selected .tm-stl-si-name { font-weight: 600; }
.tm-stl-si-activity { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tm-stl-si-sub { font-size: 11px; color: var(--tm-text-muted); margin-top: 2px; padding-left: 15px; }

/* Sparkline */
.tm-stl-sparkline {
    margin: 5px 0 0 15px;
    height: 8px;
    position: relative;
    background: var(--tm-bg-card);
    border-radius: 4px;
    overflow: hidden;
}
.tm-stl-spark-tick {
    position: absolute;
    top: 1px;
    width: 3px;
    height: 6px;
    border-radius: 1px;
    opacity: 0.8;
}

/* Story header (above timeline) */
.tm-stl-story-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--tm-border);
}
.tm-stl-story-header:empty { display: none; }
.tm-stl-story-info {
    padding: 12px 20px;
    margin: 0;
}

/* Timeline area */
.tm-stl-timeline-area {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tm-bg);
}
.tm-stl-legend {
    padding: 6px 16px;
    border-bottom: 1px solid var(--tm-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.tm-stl-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--tm-text-muted); }
.tm-stl-legend-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Canvas bands */
.tm-stl-band {
    position: relative;
    border-bottom: 1px solid var(--tm-border);
    overflow: visible;
    user-select: none;
}
.tm-stl-band-label {
    position: absolute;
    left: 8px;
    top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tm-text-muted);
    z-index: 2;
}
.tm-stl-canvas {
    display: block;
    width: 100%;
    cursor: default;
}
.tm-stl-canvas:active { cursor: grabbing; }
.tm-stl-signal-band { flex: 0 0 auto; height: 80px; }
.tm-stl-claim-band { flex: 0 0 auto; height: 50px; }

/* Detail panel — below timeline, takes remaining space */
.tm-stl-detail {
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--tm-border);
    overflow-y: auto;
    background: var(--tm-bg);
    padding: 12px 20px;
}
.tm-stl-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--tm-text-muted);
    font-size: 13px;
}
.tm-stl-detail-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tm-border);
}
.tm-stl-detail-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tm-text-muted);
    margin-bottom: 5px;
}
.tm-stl-detail-headline {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--tm-text);
}
.tm-stl-detail-summary {
    font-size: 13px;
    color: var(--tm-text-muted);
    line-height: 1.5;
}
.tm-stl-detail-badges {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}
.tm-stl-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 500;
}
.tm-stl-badge-green { background: #d4edda; color: #155724; }
.tm-stl-badge-blue { background: #cce5ff; color: #004085; }
.tm-stl-badge-gray { background: var(--tm-bg-card); color: var(--tm-text-muted); border: 1px solid var(--tm-border); }

[data-theme="dark"] .tm-stl-badge-green { background: rgba(30, 142, 62, 0.2); color: #5cd17e; }
[data-theme="dark"] .tm-stl-badge-blue { background: rgba(0, 64, 133, 0.2); color: #66b2ff; }

.tm-stl-detail-list-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--tm-border);
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.tm-stl-detail-list-item:hover { background: var(--tm-bg-card); }
.tm-stl-detail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.tm-stl-detail-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    font-size: 12px;
    margin-bottom: 8px;
}
.tm-stl-field-label {
    color: var(--tm-text-muted);
    font-weight: 600;
}
.tm-stl-source-box {
    background: var(--tm-bg-card);
    border-radius: 6px;
    padding: 8px 10px;
    border-left: 3px solid var(--tm-text-muted);
}
.tm-stl-source-platform {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    background: #14171a;
}

/* Tooltip */
.tm-stl-tooltip {
    position: fixed;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    padding: 5px 9px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 100;
    max-width: 300px;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none;
}

/* ── Hide breadcrumbs (redundant with nav menu) ────────────────── */
.tm-app .nui-breadcrumbs {
    display: none;
}

/* ── Sources page: match body background ────────────────────────── */
.tm-app .nui-assignment-board {
    --nui-assignment-column-bg: var(--tm-bg);
}

/* ── Knowledge Graph: seamless background ───────────────────────── */
.gs-graph-page .nui-force-graph {
    border: none;
    background: var(--tm-bg);
}

/* ── Geography: Pale Blue Dot override ──────────────────────────── */
.gs-pale-blue-dot .gs-pbd-quote {
    font-size: 1em;
    line-height: 1.3em;
    color: rgba(139, 28, 28, 0.9);
}
.gs-pale-blue-dot .gs-pbd-author {
    color: rgba(139, 28, 28, 0.6);
}

/* ── Doomsday Clock (easter egg overlay) ───────────────────────── */
.tm-doomsday {
    position: absolute;
    top: 10%;
    left: 50%;
    translate: -50% -0%;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    animation: gs-pbd-fadein 2s ease forwards;
}

.tm-clock-housing {
    --amber: #ff9500;
    --amber-dim: #cc7700;
    --amber-glow: #ffb84d;
    --red-hot: #ff2a2a;
    --red-glow: #ff5555;
    --void: #0a0a0c;
    --steel: #1a1a1f;
    --steel-edge: #2a2a32;
    --text-ghost: #555560;

    position: relative;
    width: 280px;
    padding: 24px 20px 20px;
    background: transparent;
    border: none;
    border-radius: 16px;
    font-family: 'Share Tech Mono', monospace;
}

/* Corner screws */
.tm-clock-screw { display: none; }

/* Title strip */
.tm-clock-title {
    text-align: center;
    margin-bottom: 16px;
}
.tm-clock-title h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--amber);
    text-shadow: 0 0 20px rgba(255,149,0,0.5), 0 0 40px rgba(255,149,0,0.2);
    margin: 0;
    opacity: 0;
}
.tm-clock-title .tm-clock-subtitle {
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--text-ghost);
    margin-top: 3px;
    text-transform: uppercase;
    opacity: 0;
}
.tm-clock-title::after {
    content: '';
    display: block;
    margin: 10px auto 0;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--steel-edge), transparent);
}

/* Ring container */
.tm-clock-ring-wrap {
    position: relative;
    width: 185px;
    height: 185px;
    margin: 0 auto 14px;
}

.tm-clock-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tm-clock-track { fill: none; stroke: var(--steel); stroke-width: 6; }

.tm-clock-progress {
    fill: none;
    stroke: url(#tm-amber-gradient);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 534.07;
    stroke-dashoffset: 534.07;
    transition: stroke 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(255,149,0,0.5));
}

.tm-clock-ticks line { stroke: var(--steel-edge); stroke-width: 1; }
.tm-clock-ticks line.major { stroke: #3a3a44; stroke-width: 1.5; }

/* Glow ring */
.tm-clock-glow {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(255,149,0,0.08);
    opacity: 0;
    transition: border-color 0.3s;
}

/* Center display */
.tm-clock-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.tm-clock-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 42px;
    color: var(--amber);
    line-height: 1;
    text-shadow: 0 0 30px rgba(255,149,0,0.6), 0 0 60px rgba(255,149,0,0.2);
    min-width: 100px;
    display: block;
    opacity: 0;
}

.tm-clock-sec-label {
    font-size: 8px;
    letter-spacing: 4px;
    color: var(--text-ghost);
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0;
}

.tm-clock-midnight {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--red-hot);
    text-transform: uppercase;
    margin-top: 6px;
    opacity: 0;
    text-shadow: 0 0 15px rgba(255,42,42,0.5);
}

/* Status bar */
.tm-clock-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 0;
    border-top: 1px solid var(--steel-edge);
}

.tm-clock-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255,149,0,0.6);
    opacity: 0;
    animation: tm-clock-pulse-dot 2s ease-in-out infinite;
}

.tm-clock-status-text {
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--text-ghost);
    text-transform: uppercase;
    opacity: 0;
}

@keyframes tm-clock-pulse-dot {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Critical state (< 30s) */
.tm-clock-housing.critical .tm-clock-progress {
    stroke: url(#tm-red-gradient);
    filter: drop-shadow(0 0 10px rgba(255,42,42,0.6));
}
.tm-clock-housing.critical .tm-clock-value {
    color: var(--red-hot);
    text-shadow: 0 0 30px rgba(255,42,42,0.7), 0 0 60px rgba(255,42,42,0.3);
}
.tm-clock-housing.critical .tm-clock-title h3 {
    color: var(--red-hot);
    text-shadow: 0 0 20px rgba(255,42,42,0.5);
}
.tm-clock-housing.critical .tm-clock-dot {
    background: var(--red-hot);
    box-shadow: 0 0 8px rgba(255,42,42,0.7);
    animation-duration: 0.6s;
}
.tm-clock-housing.critical .tm-clock-glow {
    border-color: rgba(255,42,42,0.12);
}

/* Flicker on number change */
@keyframes tm-clock-flick {
    0%   { opacity: 1; }
    15%  { opacity: 0.4; }
    30%  { opacity: 1; }
    45%  { opacity: 0.6; }
    60%  { opacity: 1; }
}
.tm-clock-flick { animation: tm-clock-flick 0.25s ease; }

/* ── Clickable tags: Timeline → Knowledge Graph ────────────────── */
.tm-app .gs-tag[data-tag-type] {
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.tm-app .gs-tag[data-tag-type]:hover {
    filter: brightness(0.85);
    transform: scale(1.05);
}

/* ── Tag popover (confirmation before graph navigation) ────────── */
.tm-tag-popover {
    position: fixed;
    z-index: 9999;
    background: var(--tm-card-bg, #fff);
    border: 1px solid var(--tm-border, #e2e8f0);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: auto;
}
.tm-tag-popover-visible {
    opacity: 1;
    transform: translateY(0);
}
.tm-tag-popover-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--tm-text, #334155);
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    border-radius: 10px;
    transition: background 0.12s;
}
.tm-tag-popover-link:hover {
    background: var(--tm-hover-bg, #f1f5f9);
    color: var(--tm-text, #334155);
    text-decoration: none;
}
.tm-tag-popover-link strong {
    font-weight: 600;
}
.tm-tag-popover-arrow {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.15s, opacity 0.15s;
}
.tm-tag-popover-link:hover .tm-tag-popover-arrow {
    transform: translateX(2px);
    opacity: 1;
}

/* ── Fullscreen graph branding (in panel header, left of title) ── */
.tm-fs-brand {
    display: none;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tm-text-bright);
    margin-right: 12px;
}

.gs-graph-fullscreen .tm-fs-brand {
    display: flex;
}

.tm-fs-brand-img {
    height: 28px;
    width: 28px;
    object-fit: contain;
}

[data-theme="dark"] .tm-fs-brand-img { display: none; }
[data-theme="dark"] .tm-fs-brand::before {
    content: "";
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background-color: var(--tm-accent);
    -webkit-mask: url('../../../groundsignal/assets/meerkat-head-simpler.svg') center / contain no-repeat;
    mask: url('../../../groundsignal/assets/meerkat-head-simpler.svg') center / contain no-repeat;
}

[data-theme="dark"] .tm-fs-brand {
    animation: tm-logo-glow 3s ease-in-out infinite;
}

.tm-fs-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.tm-fs-brand-title {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--tm-text-bright);
}

.tm-fs-brand-sub {
    font-family: var(--tm-font-mono);
    font-size: 9px;
    text-align: center;
    color: var(--tm-text-muted);
    letter-spacing: 0.15em;
    margin-top: 1px;
}

/* ── Raw Sources Page ───────────────────────────────────────────── */

.tm-raw-source-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tm-border);
    cursor: pointer;
    transition: background 0.15s;
}
.tm-raw-source-item:hover { background: var(--tm-bg-hover); }
.tm-raw-source-item--selected { background: var(--tm-bg-selected); }

.tm-raw-source-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 2px;
}

.tm-raw-source-item-body { flex: 1; min-width: 0; }

.tm-raw-source-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-raw-source-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--tm-text-muted);
}

.tm-raw-source-item-author { font-weight: 500; }

.tm-raw-source-detail-inner { padding: 20px; }

.tm-raw-source-detail-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tm-border);
    margin-bottom: 16px;
}

.tm-raw-source-detail-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.tm-raw-source-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tm-text);
    line-height: 1.3;
    margin-bottom: 8px;
}

.tm-raw-source-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--tm-text-muted);
}
.tm-raw-source-detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tm-raw-source-detail-meta i { font-size: 11px; }

.tm-raw-source-detail-content {
    font-size: 14px;
    line-height: 1.65;
    color: var(--tm-text);
    word-break: break-word;
}
.tm-raw-source-detail-content p { margin-bottom: 0.75em; }

.tm-raw-source-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tm-border);
    font-size: 12px;
}

.tm-raw-source-detail-link {
    color: var(--tm-accent);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tm-raw-source-detail-link:hover { color: var(--tm-accent-hover); }

.tm-raw-source-detail-fetched { color: var(--tm-text-muted); }

/* ── Signal Overlay (curator profile) ─────────────────────────────── */

.tm-signal-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1055;
}
.tm-signal-overlay-panel {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1056;
    background: var(--tm-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--tm-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
}
.tm-signal-overlay-close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tm-accent);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--tm-font-body);
}
@media (min-width: 769px) {
    .tm-signal-overlay-panel {
        top: 0;
        left: 30%;
        border-left: 1px solid var(--tm-border);
    }
}

/* ── Curator Profile Columns ───────────────────────────────────────── */

.tm-profile-columns-header {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 28px;
}
.tm-profile-col-sources-hdr {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tm-profile-col-signals-hdr {
    flex: 1;
    min-width: 0;
}
.tm-profile-col-blog-hdr {
    width: 280px;
    flex-shrink: 0;
}
.tm-profile-columns {
    display: flex;
    gap: 28px;
    margin-top: 12px;
}
.tm-profile-left {
    width: 240px;
    flex-shrink: 0;
}
.tm-profile-right {
    flex: 1;
    min-width: 0;
}
.tm-profile-blog {
    width: 280px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile Responsive
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --tm-bottom-nav-height: 56px;
}

/* ── Bottom Navigation (hidden on desktop) ────────────────────────── */

.tm-bottom-nav {
    display: none;
}

/* ── Profile Bottom Sheet (hidden by default) ─────────────────────── */

.tm-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1059;
}
.tm-sheet-backdrop.show { display: block; }

/* ── More Sheet (mobile menu) ─────────────────────────────────────── */

.tm-more-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--tm-bg);
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--tm-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
    max-height: 80vh;
    overflow-y: auto;
}
.tm-more-sheet-item {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--tm-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.tm-more-sheet-item:hover,
.tm-more-sheet-item:active {
    background: var(--tm-bg-hover);
    color: var(--tm-text);
}
.tm-more-sheet-logout {
    color: var(--tm-red);
}
.tm-more-sheet-divider {
    height: 1px;
    background: var(--tm-border);
    margin: 4px 24px;
}
.tm-more-sheet-copy {
    padding: 8px 24px;
    font-size: 11px;
    color: var(--tm-text-muted);
}

/* ── Help Button (Navbar) ───────────────────────────────────────── */

.tm-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--tm-text-muted);
    transition: color 0.2s, background 0.2s;
    font-size: 16px;
}

.tm-help-btn:hover {
    color: var(--tm-accent);
    background: var(--tm-accent-light);
}

/* ── Help Overlay ───────────────────────────────────────────────── */

.tm-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1070;
}

.tm-help-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tm-help-overlay-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 920px);
    height: min(88vh, 800px);
    background: var(--tm-bg);
    border-radius: var(--tm-card-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.tm-help-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--tm-border);
    flex-shrink: 0;
}

.tm-help-overlay-title {
    font-family: var(--tm-font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--tm-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-help-overlay-title i {
    color: var(--tm-accent);
    font-size: 18px;
}

.tm-help-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--tm-text-muted);
    font-size: 16px;
    transition: color 0.2s, background 0.2s;
}

.tm-help-overlay-close:hover {
    color: var(--tm-text);
    background: var(--tm-bg-hover);
}

.tm-help-overlay-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Reset the inner AboutPage to fit the overlay — remove outer page shell */
.tm-help-overlay-content .tm-page {
    height: 100%;
    overflow-y: auto;
}

/* Ensure video fills edge-to-edge inside the overlay */
.tm-help-overlay-content .tm-guide {
    padding-top: 0;
}

.tm-help-overlay-content .tm-guide__hero-video {
    border-radius: 0;
}

.tm-help-overlay-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-help-overlay-dismiss {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--tm-text-muted);
    cursor: pointer;
    user-select: none;
}

.tm-help-overlay-dismiss input[type="checkbox"] {
    accent-color: var(--tm-accent);
}

/* ── Primary Mobile Breakpoint ────────────────────────────────────── */

@media (max-width: 768px) {

    /* — Layout shell — */
    .ntelioApp {
        padding-bottom: calc(var(--tm-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }
    #content-wrapper {
        max-width: 100%;
        overflow: hidden auto !important;
    }

    /* — Top navbar: hidden on mobile — */
    .tm-navbar-wrapper > .tm-top-navbar {
        display: none !important;
    }
    .tm-navbar-nav {
        display: none !important;
    }
    .tm-navbar-actions .tm-profile-wrapper {
        display: none;
    }
    .tm-navbar-actions .tm-btn {
        display: none;
    }

    /* Help overlay: full-screen on mobile */
    .tm-help-overlay-panel {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    /* — Bottom navigation — */
    .tm-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--tm-bottom-nav-height);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--tm-navbar-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--tm-navbar-border);
        justify-content: space-around;
        align-items: center;
        z-index: 1030;
    }
    .tm-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        color: var(--tm-text-muted);
        text-decoration: none;
        min-width: 48px;
        min-height: 48px;
        border: none;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tm-bottom-nav-item i {
        font-size: 20px;
        line-height: 1;
    }
    .tm-bottom-nav-item.active {
        color: var(--tm-accent);
    }

    /* — Bottom nav meerkat logo — */
    .tm-bottom-nav-logo-img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
    [data-theme="dark"] .tm-bottom-nav-logo-img {
        display: none;
    }
    .tm-bottom-nav-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        line-height: 1;
    }

    [data-theme="dark"] .tm-bottom-nav-logo::before {
        content: "";
        width: 20px;
        height: 20px;
        background-color: var(--tm-accent);
        -webkit-mask: url('../../../groundsignal/assets/meerkat-head-simpler.svg') center / contain no-repeat;
        mask: url('../../../groundsignal/assets/meerkat-head-simpler.svg') center / contain no-repeat;
    }

    /* — Subnav repositioned above bottom nav — */
    .tm-subnav.show {
        position: fixed;
        bottom: var(--tm-bottom-nav-height);
        left: 0;
        right: 0;
        z-index: 1029;
        padding: 0 12px;
        background: var(--tm-subnav-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--tm-navbar-border);
    }

    /* — Footer: hidden on mobile (links moved to More sheet) — */
    #footer {
        display: none;
    }

    /* — Detail/signals panel: full-screen overlay on mobile — */
    .nui-panel[data-side="right"],
    .nui-panel[data-side="right"].nui-panel-closed,
    .nui-panel[data-side="right"].nui-panel-closing,
    .nui-panel[data-side="right"].nui-panel-open {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1050;
        width: 100% !important;
        height: 100% !important;
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border: none !important;
        border-radius: 0;
        background: var(--tm-bg);
        overflow: auto !important;
        pointer-events: auto;
    }
    /* Hidden by default — slide up from bottom */
    .nui-panel[data-side="right"],
    .nui-panel[data-side="right"].nui-panel-closed,
    .nui-panel[data-side="right"].nui-panel-closing {
        transform: translateY(100%);
        opacity: 1 !important;
        transition: transform 0.3s ease !important;
    }
    .nui-panel[data-side="right"].nui-panel-closed .nui-panel-content,
    .nui-panel[data-side="right"].nui-panel-closed .nui-panel-header {
        display: flex !important;
    }
    .nui-panel[data-side="right"].nui-panel-open {
        transform: translateY(0);
        opacity: 1 !important;
        transition: transform 0.3s ease !important;
    }
    .nui-panel[data-side="right"] .nui-panel-resize-handle {
        display: none !important;
    }
    .nui-panel.nui-panel-main {
        min-width: 100%;
    }
    /* Inline back button — no bar, no title */
    .nui-panel[data-panel-id="detail"] > .nui-panel-header {
        background: none;
        border: none;
        padding: 8px 12px 0;
        min-height: 0;
        justify-content: flex-start;
    }
    .nui-panel[data-panel-id="detail"] > .nui-panel-header .nui-panel-title {
        display: none;
    }
    .nui-panel[data-panel-id="detail"] > .nui-panel-header .nui-panel-minimize-btn {
        display: none;
    }
    .nui-panel[data-panel-id="detail"] > .nui-panel-header .nui-panel-close-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 500;
        color: var(--tm-accent);
        background: none;
        border: none;
        border-radius: 0;
    }
    .nui-panel[data-panel-id="detail"] > .nui-panel-header .nui-panel-close-btn i::before {
        content: "\f053";  /* fa-chevron-left */
    }
    .nui-panel[data-panel-id="detail"] > .nui-panel-header .nui-panel-close-btn::after {
        content: "Back";
        font-family: var(--tm-font-body);
    }
    .nui-panel[data-panel-id="detail"] > .nui-panel-content {
        padding-bottom: calc(var(--tm-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* — Graph signals panel: close button styling — */
    .nui-panel[data-panel-id="signals"] > .nui-panel-header {
        background: none;
        border-bottom: 1px solid var(--tm-border-lt);
        padding: 10px 12px;
        min-height: 0;
        justify-content: flex-start;
    }
    .nui-panel[data-panel-id="signals"] > .nui-panel-header .nui-panel-minimize-btn {
        display: none;
    }
    .nui-panel[data-panel-id="signals"] > .nui-panel-header .nui-panel-close-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        font-size: 13px;
        font-weight: 500;
        color: var(--tm-accent);
        background: none;
        border: none;
        border-radius: 0;
    }
    .nui-panel[data-panel-id="signals"] > .nui-panel-header .nui-panel-close-btn i::before {
        content: "\f053";  /* fa-chevron-left */
    }
    .nui-panel[data-panel-id="signals"] > .nui-panel-header .nui-panel-close-btn::after {
        content: "Back";
        font-family: var(--tm-font-body);
    }
    .nui-panel[data-panel-id="signals"] > .nui-panel-content {
        padding-bottom: calc(var(--tm-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* — Topic chips: horizontal scroll — */
    .tm-topic-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tm-topic-chips::-webkit-scrollbar {
        display: none;
    }

    /* — Signal cards: tighter spacing — */
    .tm-signal-card {
        padding: 12px 14px;
    }
    .tm-signal-card-headline {
        font-size: 14px;
    }

    /* — Page layouts — */
    .tm-page-centered {
        padding: 20px 16px;
    }
    .tm-page-wide {
        padding: 16px;
    }

    /* — Auth form — */
    .tm-auth-form {
        max-width: 100% !important;
        padding: 16px 0 !important;
    }

    /* — Score card: compact on mobile — */
    .tm-score-card > div:first-child {
        gap: 12px !important;
    }
    .tm-score-card > div:first-child > div:first-child {
        width: 56px !important;
        height: 56px !important;
        border-width: 3px !important;
    }
    .tm-score-card > div:first-child > div:first-child span {
        font-size: 20px !important;
    }
    .tm-score-card > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .tm-score-card .tm-stat-card {
        flex: none !important;
        padding: 6px 12px !important;
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        border-radius: 16px;
        border: 1px solid var(--tm-border);
        background: var(--tm-bg-card);
        font-size: 12px;
    }
    .tm-score-card .tm-stat-card .tm-stat-card-value {
        font-size: 13px !important;
        font-weight: 700;
        margin: 0;
    }
    .tm-score-card .tm-stat-card .tm-stat-card-label {
        font-size: 11px;
        text-transform: none;
        letter-spacing: 0;
        margin: 0;
    }

    /* — Filter bar: collapsible steppers — */
    .tm-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border: 1px solid var(--tm-border);
        border-radius: 8px;
        background: none;
        color: var(--tm-text-muted);
        font-size: 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tm-filter-toggle.active {
        color: var(--tm-accent);
        border-color: var(--tm-accent);
        background: var(--tm-accent-light);
    }
    .tm-filter-row {
        flex-wrap: wrap;
    }
    .tm-stepper-row {
        display: none;
        width: 100%;
        padding: 6px 0 0;
        border-top: 1px solid var(--tm-border);
        flex-wrap: wrap;
        margin-top: 6px;
        justify-content: center;
        gap: 8px;
    }
    .tm-stepper-row.show {
        display: flex;
    }

    /* — Curator stats row: wrap — */
    .tm-curator-stats {
        flex-wrap: wrap;
        gap: 8px 12px !important;
    }

    /* — Signal detail page: allow scrolling — */
    .tm-signal-detail-widget {
        height: auto !important;
        overflow-y: visible !important;
    }

    /* — Curator profile: stack columns — */
    .tm-profile-columns-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-top: 20px;
    }
    .tm-profile-col-sources-hdr,
    .tm-profile-col-blog-hdr {
        width: 100%;
    }
    .tm-profile-columns {
        flex-direction: column;
        gap: 20px;
    }
    .tm-profile-left,
    .tm-profile-blog {
        width: 100%;
    }

    /* — Cookie banner — */
    .tm-cookie-banner {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    /* — Profile bottom sheet — */
    .tm-profile-menu.tm-profile-sheet-mode {
        position: fixed !important;
        bottom: calc(var(--tm-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-height: calc(100vh - var(--tm-navbar-height) - var(--tm-bottom-nav-height) - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        width: 100%;
        border-radius: 16px 16px 0 0;
        z-index: 1060;
        padding: 8px 0;
        display: block;
        background: var(--tm-bg);
        border: 1px solid var(--tm-border);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }
    .tm-profile-sheet-mode .tm-profile-menu-item {
        padding: 12px 20px;
        font-size: 15px;
    }

    /* — Story card: signal list only, no inline detail — */
    .tm-story-card-body {
        flex-direction: column;
    }
    .tm-story-signal-list-panel {
        width: 100%;
        border-right: none;
        max-height: none;
    }
    .tm-story-detail-panel {
        display: none !important;
    }

    /* — Subnav padding reset on mobile — */
    .tm-subnav.show {
        padding-left: 12px !important;
    }

    /* — Reporter: full-bleed DataControl on mobile — */
    .tm-reporter-grid-container {
        padding: 12px 16px !important;
    }
    .tm-reporter-grid-container .data-control {
        border: none;
        border-radius: 0;
        margin: 0 -16px;
    }

    /* ── Knowledge Graph: slide-in toolbar panel ──────────── */

    .gs-graph-toolbar {
        width: auto;
        top: 50%;
        left: 6px;
        transform: translateY(-50%) translateX(calc(-100% - 14px));
        bottom: auto;
        max-height: calc(100% - 52px - var(--tm-bottom-nav-height, 56px) - 16px);
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 10px;
        padding: 10px 10px;
        gap: 6px;

        /* Single column, left-aligned */
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        /* Collapsed by default — off-screen left */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gs-graph-toolbar.tm-toolbar-open {
        transform: translateY(-50%);
    }

    /* Shared row helper — horizontal pair */
    .tm-tb-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    /* Cell: button with label below, equal width for alignment */
    .tm-tb-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex: 1;
    }

    .tm-tb-cell .gs-slider-label {
        margin: 0;
    }

    /* Nav buttons: horizontal, left-aligned */
    .gs-graph-toolbar .gs-tb-nav-btns {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        justify-content: flex-start;
    }

    /* Dividers: full width */
    .gs-graph-toolbar .gs-tb-divider {
        width: 100%;
        margin: 2px 0;
    }

    /* Buttons: slightly smaller */
    .gs-graph-toolbar .gs-tb-btn {
        width: 26px;
        height: 26px;
    }

    /* Filter toggles: horizontal label+switch */
    .gs-graph-toolbar .gs-filter-toggle {
        flex-direction: row;
        gap: 5px;
    }

    .gs-graph-toolbar .gs-filter-toggle + .gs-filter-toggle {
        margin-top: 0;
    }

    /* Sliders row: side by side */
    .tm-tb-sliders {
        gap: 12px !important;
    }

    .gs-graph-toolbar .gs-slider-section {
        margin-top: 0 !important;
        gap: 3px;
    }

    .gs-graph-toolbar .gs-slider-wrapper {
        height: 70px;
        width: 14px;
    }

    /* Handle tab */
    .tm-toolbar-handle {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 22px;
        height: 40px;
        border: none;
        border-radius: 0 6px 6px 0;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-left: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #999;
        padding: 0;
        z-index: 11;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tm-toolbar-handle svg {
        width: 12px;
        height: 12px;
        transition: transform 0.3s ease;
    }

    [data-theme="dark"] .tm-toolbar-handle {
        background: rgba(20, 20, 20, 0.88);
        border-color: var(--tm-border-lt);
        color: #9a9590;
    }
}

/* ── Small Phone Refinements ──────────────────────────────────────── */

@media (max-width: 480px) {
    .tm-bottom-nav-item span {
        font-size: 9px;
    }
    .tm-signal-card-meta {
        gap: 4px;
        font-size: 11px;
    }
    .tm-subnav-item {
        padding: 4px 10px;
        font-size: 12px;
    }
}