:root {
    --bg: #0e0e12;
    --panel: #17171d;
    --panel-2: #1e1e26;
    --border: #2a2a34;
    --text: #e8e8ec;
    --text-dim: #9a9aa5;
    --accent: #22c55e;
    --pillar: #4f8dff;
    --anchor: #d8d8de;
    --bridge: #f5a623;
    --collision: #ff5c5c;
    --cluster: #b06cff;
}

/* --- Light mode -- per-account preference, see includes/auth.php's
   current_user_theme() / includes/admin_auth.php's current_admin_theme().
   Every rule in this file is written against the CSS custom properties
   above, so redefining them here re-themes the whole app without touching
   individual rules. A handful of hardcoded (non-variable) colors elsewhere
   in this file are status/semantic accents used as small self-contained
   badges (rgba tint + solid text) -- those read fine on either background
   and are left as-is; only the full-bleed .error-box needed its own
   light-mode override below. */
body.theme-light {
    --bg: #f4f4f7;
    --panel: #ffffff;
    --panel-2: #f0f0f4;
    --border: #dcdce3;
    --text: #1b1b22;
    --text-dim: #6b6b78;
    --accent: #15803d;
    --pillar: #2f6fe0;
    --anchor: #46464f;
    --bridge: #c97f00;
    --collision: #d63c3c;
    --cluster: #8a3fe0;
}
body.theme-light .error-box {
    background: #fdecec;
    border-color: #f3b8b8;
    color: #b42323;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* --- Narrow viewport: sidebar becomes a horizontal top bar --- */
@media (max-width: 720px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-brand { padding: 4px 12px 4px 4px; }
    .sidebar-section { display: flex; align-items: center; gap: 4px; margin-bottom: 0; }
    .sidebar-label { display: none; }
    .sidebar-link { padding: 6px 10px; margin-bottom: 0; white-space: nowrap; }
    #manageWebsBtn { width: auto; }
    .container { padding: 24px 16px 64px; }
    .modal { padding: 20px; }
}

.sidebar-brand {
    font-weight: 700;
    font-size: 18px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 8px 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-logo {
    height: 44px;
    width: auto;
    display: block;
}

.sidebar-section { margin-bottom: 22px; }

.sidebar-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    padding: 0 10px 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    padding: 9px 10px;
    border-radius: 8px;
    margin-bottom: 2px;
}

.sidebar-link:hover { background: var(--panel-2); color: var(--text); }
.sidebar-link.active { background: rgba(34,197,94,0.15); color: var(--accent); font-weight: 600; }
.sidebar-icon { font-size: 14px; width: 16px; text-align: center; }

.sidebar-cta-btn {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    margin-top: 2px;
}
.sidebar-cta-btn:hover { background: var(--accent); color: #fff; opacity: 0.9; }

.main-content { flex: 1; min-width: 0; }

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

h1 { font-size: 26px; margin-bottom: 8px; }
h2 { font-size: 18px; margin-top: 32px; }
p.subtitle { color: var(--text-dim); margin-top: 0; }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-top: 20px;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}

input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, textarea::placeholder {
    color: var(--text-dim);
    opacity: 0.7;
}

/* Chrome/Edge/Safari autofill otherwise forces a white background regardless
   of the rules above -- override it to match the dark theme. */
input[type="email"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="text"]:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--panel-2) inset;
    box-shadow: 0 0 0px 1000px var(--panel-2) inset;
    caret-color: var(--text);
}

label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }

.field { margin-bottom: 16px; }

.radio-row { display: flex; gap: 16px; margin-bottom: 16px; font-size: 14px; }
.radio-row label { display: flex; align-items: center; gap: 6px; color: var(--text); }

/* --- Entity search disambiguation picker (index.php) --- */
#candidatesPanel.hidden { display: none; }
.candidates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.candidate-card {
    text-align: left;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.candidate-card:hover:not(:disabled) { border-color: var(--accent); background: var(--panel); }
.candidate-card:disabled { opacity: 0.6; cursor: default; }
.candidate-card-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.candidate-card-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(34,197,94,0.12);
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.candidate-card-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

button, .btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

button.secondary { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
button.danger { background: rgba(255,92,92,0.15); border: 1px solid var(--collision); color: var(--collision); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.error-box {
    background: #2a1518;
    border: 1px solid #5c2a2a;
    color: #ff9d9d;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 14px;
    display: none;
}

.upgrade-banner {
    background: rgba(34,197,94,0.10);
    border: 1px solid rgba(34,197,94,0.35);
    color: var(--text);
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.upgrade-banner strong { color: var(--accent); }

.node-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.node-row {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.node-row .name { font-weight: 600; }
.node-row .desc { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.tag-pillar { background: rgba(79,141,255,0.15); color: var(--pillar); }
.tag-anchor { background: rgba(216,216,222,0.15); color: var(--anchor); }
.tag-bridge { background: rgba(245,166,35,0.15); color: var(--bridge); }
.tag-collision { background: rgba(255,92,92,0.15); color: var(--collision); }
.tag-cluster { background: rgba(176,108,255,0.15); color: var(--cluster); }

.ghost-invalid { opacity: 0.45; }
.ghost-flag { color: var(--collision); font-size: 12px; margin-left: 8px; }

.untapped-flag {
    color: #4ade80;
    font-size: 12px;
    margin-left: 8px;
    cursor: help;
}

.protocol-flag {
    color: var(--pillar);
    font-size: 12px;
    margin-left: 8px;
    cursor: help;
}

.node-row { cursor: pointer; }
.node-row:hover { border-color: var(--accent); }

/* Nodes already turned into a pillar with a generated protocol -- badged
   for easy identification without having to click into each one. */
.node-row.has-protocol {
    border-color: var(--pillar);
    background: rgba(79,141,255,0.08);
}

/* --- View toggle (List / Web) --- */
.view-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.view-toggle-hint { margin: 0; }
.view-toggle {
    display: inline-flex;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    margin: 0;
}
.view-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
}
.view-toggle-btn.active { background: var(--accent); color: white; }

/* --- Radial "Web" view --- */
.web-canvas {
    position: relative;
    margin: 24px auto 8px;
}
.web-lines { position: absolute; top: 0; left: 0; pointer-events: none; }

.web-center-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--pillar);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    padding: 8px;
    box-shadow: 0 0 30px rgba(79,141,255,0.5);
}

.node-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    background: var(--panel-2);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: grab;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    touch-action: none; /* required so pointer drag isn't hijacked by touch scrolling */
    user-select: none;
}
.node-chip:hover { border-color: var(--text); z-index: 2; }
.node-chip.dragging { cursor: grabbing; z-index: 3; opacity: 0.9; }
.node-chip.tag-pillar { border-color: var(--pillar); }
.node-chip.tag-anchor { border-color: var(--anchor); }
.node-chip.tag-cluster { border-color: var(--cluster); }
.node-chip.tag-collision { border-color: var(--collision); }
.node-chip.tag-bridge { border-color: var(--bridge); }
.node-chip.ghost-invalid { opacity: 0.4; }
.node-chip.has-protocol {
    border-width: 2.5px;
    border-color: var(--pillar);
    background: rgba(79,141,255,0.18);
    box-shadow: 0 0 0 1px rgba(79,141,255,0.35);
}

.web-legend {
    display: none;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
}
.web-legend .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
}

/* --- Protocol tabs --- */
.tabs {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    padding: 10px 4px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
}
.tab-btn .count { font-weight: 400; color: var(--text-dim); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { padding-top: 8px; }

/* --- Node detail modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal-overlay.hidden { display: none; }
.onboarding-terms {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    max-height: 340px;
    overflow-y: auto;
}
.onboarding-term {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-dim);
}
.onboarding-term .tag { flex-shrink: 0; margin-top: 1px; }
.modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    max-width: 460px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}
/* .eyebrow / .section-label / .stat-row / .stat-box are used both inside
   modals and directly on regular pages (Entity Lookup, Channel Audit,
   Keyword Snapshot, the admin dashboard, etc.) -- generic (not
   .modal-scoped) so they're styled consistently everywhere. */
.eyebrow { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.modal h2 { margin: 4px 0 16px; font-size: 22px; font-style: italic; }
.stat-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.stat-box {
    flex: 1;
    min-width: 120px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.stat-box .label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.stat-box .value { font-weight: 700; font-size: 15px; }
.section-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin: 18px 0 8px; letter-spacing: 0.5px; }
.modal .id-row {
    display: flex;
    justify-content: space-between;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 8px;
}
.modal .id-row .mono { color: var(--accent); font-family: monospace; }
.modal .desc-box {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    font-style: italic;
    color: var(--text-dim);
    font-size: 14px;
}
.modal .modal-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.modal .modal-actions button { width: 100%; }
.modal .close-btn {
    float: right;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    padding: 4px 8px;
    cursor: pointer;
}
.modal-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 4px;
}

.video-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    margin-top: 14px;
}

.video-card .phase { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }

.difficulty-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.difficulty-low { background: rgba(74,222,128,0.15); color: #4ade80; }
.difficulty-medium { background: rgba(245,166,35,0.15); color: var(--bridge); }
.difficulty-high { background: rgba(255,92,92,0.15); color: var(--collision); }
.video-card h3 { margin: 6px 0; font-size: 16px; }
.video-card .hook { color: var(--text-dim); font-style: italic; font-size: 14px; }
.video-card .meta { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.video-card .meta span { margin-right: 14px; }

.save-btn {
    margin-top: 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
    padding: 6px 12px;
}
.save-btn.saved { background: rgba(34,197,94,0.15); border-color: var(--accent); color: var(--accent); }

/* Destructive/secondary actions should look muted, not like the primary
   filled accent button -- matches the Discard/icon-btn treatment used
   elsewhere (Sauce, Manage Webs) for visual consistency. */
.unsave-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12px;
    padding: 6px 12px;
}
.unsave-btn:hover { border-color: var(--collision); color: var(--collision); }

.saved-item {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}
.saved-item .context { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.saved-item .context a { color: var(--text-dim); }
.saved-item h3 { margin: 4px 0; font-size: 16px; }
.saved-item .hook { color: var(--text-dim); font-style: italic; font-size: 14px; }
.saved-item .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.history-item a { color: var(--text); text-decoration: none; font-weight: 600; }
.history-item .date { color: var(--text-dim); font-size: 12px; }

.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { color: var(--text-dim); font-size: 14px; margin-top: 16px; }

/* --- Homepage "how it works" walkthrough --- */
.howitworks-details {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 24px;
    margin-top: 16px;
}
.howitworks-details summary {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.howitworks-details[open] summary { margin-bottom: 12px; }
.howitworks-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}
.howitworks-list strong { color: var(--text); }

/* --- Saved card actions --- */
.saved-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.edit-btn {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    padding: 6px 12px;
}
.edit-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Script editor modal --- */
.script-modal { max-width: 900px; width: 94%; }
.proof-modal { max-width: 640px; width: 92%; }
.proof-modal .cert-brand { font-size: 17px; font-weight: 800; letter-spacing: 0.3px; }
.proof-modal .cert-tagline {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-dim);
    margin: 2px 0 20px;
}
.proof-modal .cert-hash {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-family: monospace;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.proof-modal .cert-hash strong { color: var(--accent); }
.proof-modal .admin-table { font-size: 12px; margin-top: 4px; }
.proof-modal .admin-table th, .proof-modal .admin-table td { padding: 8px 10px; }

/* --- Proof of Work certificate export area: fixed, theme-independent
   colors (deliberately NOT var()-based). Two reasons: (1) html2canvas --
   the engine behind the one-click PDF export -- has unreliable support for
   CSS custom properties; when it failed to resolve var(--text)/
   var(--panel-2)/etc, every piece of certificate text rendered invisible,
   leaving only a solid canvas-fill rectangle in the exported PDF. (2) an
   official certificate shouldn't change appearance based on whether the
   issuing user happens to have SAMMY's UI set to dark or light mode -- it
   should look like the same fixed, print-ready document every time. This
   only re-themes the content actually captured by html2canvas
   (#proofOfWorkContent); the modal chrome around it still matches the
   app's own theme. */
#proofOfWorkContent {
    background: #ffffff;
    color: #1a1a1f;
}
#proofOfWorkContent .eyebrow,
#proofOfWorkContent .section-label { color: #6b6b76; }
#proofOfWorkContent .cert-brand { color: #1a1a1f; }
#proofOfWorkContent .cert-tagline { color: #6b6b76; }
#proofOfWorkContent .id-row {
    background: #f4f4f7;
    border: 1px solid #dcdce3;
    color: #1a1a1f;
}
#proofOfWorkContent .id-row .mono { color: #15803d; }
#proofOfWorkContent .desc-box {
    background: #f4f4f7;
    border: 1px solid #dcdce3;
    color: #444450;
}
#proofOfWorkContent .cert-hash {
    border-top: 1px solid #dcdce3;
    color: #6b6b76;
}
#proofOfWorkContent .cert-hash strong { color: #15803d; }
#proofOfWorkContent .admin-table th {
    color: #6b6b76;
    border-bottom: 1px solid #dcdce3;
}
#proofOfWorkContent .admin-table td {
    color: #1a1a1f;
    border-bottom: 1px solid #dcdce3;
}
#proofOfWorkContent .sauce-badge.sauce-pass { background: rgba(26,125,61,0.12); color: #1a7d3d; }
.script-modal .eyebrow { margin-top: 0; }
.script-modal h2 { font-style: normal; font-size: 19px; }
.script-modal-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    margin-top: 8px;
}
@media (max-width: 720px) {
    .script-modal-body { grid-template-columns: 1fr; }
}
.script-modal-left { min-width: 0; }
.script-modal-right { min-width: 0; display: flex; flex-direction: column; }

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

select {
    width: 100%;
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
}

.pipeline-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pipeline-step-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    width: 100%;
}
.pipeline-step-btn .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--border);
    font-size: 10px;
    flex-shrink: 0;
}
.pipeline-step-btn.active { border-color: var(--accent); color: var(--text); }
.pipeline-step-btn.active .step-num { background: var(--accent); border-color: var(--accent); color: white; }
.pipeline-step-btn.done { color: #4ade80; }
.pipeline-step-btn.done .step-num { background: rgba(74,222,128,0.15); border-color: #4ade80; color: #4ade80; }
.pipeline-step-btn.done .step-num::before { content: "✓"; }
.pipeline-step-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pipeline-hint { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; }

.research-details { margin-top: 14px; }
.research-details summary { font-size: 12px; color: var(--accent); cursor: pointer; }
.research-box { margin-top: 8px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; font-style: normal; font-size: 12px; }

.suggestions-panel .sub-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; margin: 14px 0 6px; }
.suggestions-panel .sub-label:first-child { margin-top: 0; }
.mentions-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mention-chip {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--text-dim);
}

.script-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#scriptTextarea { flex: 1; min-height: 360px; resize: vertical; line-height: 1.6; font-family: inherit; }
.script-count { text-align: right; font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* --- Manage Webs modal --- */
#manageWebsBtn {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}
.manage-webs-modal { max-width: 620px; width: 92%; }
.manage-webs-title { margin: 4px 0 2px; font-size: 22px; font-style: normal; }

.active-web-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: rgba(34,197,94,0.1);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
}
.badge-active {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
}

.web-list {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.web-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.web-list-item-main { min-width: 0; }

.web-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 6px;
}
.web-meta-sub { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.web-list-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.web-list-actions .btn { padding: 8px 16px; font-size: 13px; }

.icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 9px;
    font-size: 13px;
    line-height: 1;
}
.icon-btn:hover { border-color: var(--collision); color: var(--collision); }

/* --- Sauce --- */
.sauce-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 760px) {
    .sauce-layout { grid-template-columns: 1fr; }
}
.sauce-input-panel, .sauce-target-panel { margin-top: 0; }
.sauce-input-panel select, .sauce-target-panel select { margin-bottom: 12px; }
.sauce-script-box {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    max-height: 420px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim);
}
.hint { font-size: 12px; color: var(--text-dim); margin: 6px 0 0; }

.sauce-report-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.sauce-report-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
    .sauce-report-row, .sauce-report-row-2 { grid-template-columns: 1fr; }
}

.sauce-card { margin-top: 0; }
.sauce-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.sauce-score { font-size: 30px; font-weight: 700; margin: 6px 0 10px; }
.sauce-scroll { max-height: 180px; overflow-y: auto; font-size: 13px; color: var(--text-dim); line-height: 1.6; }

.sauce-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 999px;
}
.sauce-pass { background: rgba(74,222,128,0.15); color: #4ade80; }
.sauce-fail { background: rgba(255,92,92,0.15); color: var(--collision); }
.sauce-risk { display: inline-block; margin-bottom: 10px; }
.sauce-risk-low { background: rgba(74,222,128,0.15); color: #4ade80; }
.sauce-risk-medium { background: rgba(245,166,35,0.15); color: var(--bridge); }
.sauce-risk-high { background: rgba(255,92,92,0.15); color: var(--collision); }

.sauce-card-danger { border-color: rgba(255,92,92,0.4); }
.missing-entity-item {
    color: var(--collision);
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.missing-entity-item:last-child { border-bottom: none; }
.missing-entity-item strong { color: #ff8080; }

.competitor-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.competitor-item:last-child { border-bottom: none; }
.competitor-item a { color: var(--accent); }

.sauce-recommendations { margin-top: 20px; }
.recommendations-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}
.recommendations-list li { padding-left: 4px; }

/* --- Sidebar user row (bottom of sidebar) --- */
.sidebar-user {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.sidebar-user-email {
    display: block;
    padding: 0 10px 6px;
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tier-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}
.tier-badge-basic { background: rgba(148,163,184,0.15); color: #94a3b8; }
.tier-badge-standard { background: rgba(34,197,94,0.18); color: var(--accent); }
.tier-badge-premium { background: rgba(255,184,77,0.18); color: #ffb84d; }
.sidebar-credits {
    padding: 0 10px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.sidebar-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px 8px;
}
.sidebar-topup-btn {
    display: block;
    margin: 0 10px 10px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(79,141,255,0.12);
    border: 1px solid rgba(79,141,255,0.35);
    color: var(--pillar);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.sidebar-topup-btn:hover { background: rgba(79,141,255,0.2); }
.upgrade-btn {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.upgrade-btn:hover { opacity: 0.9; }
.upgrade-btn-disabled {
    background: var(--panel-2);
    color: var(--text-dim);
    cursor: default;
    pointer-events: none;
}

.key-status {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
}
.key-status-set { color: #4ade80; }
.key-status-unset { color: var(--text-dim); }

/* --- Plans page --- */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
    max-width: 640px;
}
.plan-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    position: relative;
    text-align: center;
}
.plan-card-current { border-color: var(--accent); }
.plan-card-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
}
.plan-card-name { font-size: 15px; color: var(--text-dim); margin-bottom: 6px; }
.plan-card-price { font-size: 32px; font-weight: 800; color: var(--text); }
.plan-card-ngn { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.plan-card-credits { font-size: 14px; color: var(--accent); font-weight: 600; margin: 14px 0 18px; }
.plan-card .plan-buy-btn { width: 100%; }

/* --- 404 / 403 error pages --- */
.error-page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.error-page-code {
    font-size: 72px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
}
@media (max-width: 720px) {
    .sidebar-user { margin-top: 0; padding-top: 0; border-top: none; display: flex; align-items: center; gap: 8px; }
    .sidebar-user-email { display: none; }
    .sidebar-credits { display: none; }
    .sidebar-topup-btn { display: none; }
}

/* --- Login / Register pages --- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    max-width: 380px;
    width: 100%;
}
.auth-switch { font-size: 13px; color: var(--text-dim); text-align: center; margin-top: 18px; margin-bottom: 0; }
.auth-switch a { color: var(--accent); }

/* --- Public landing page (logged-out index.php) --- */
.landing-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 96px;
}
.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
}
.landing-nav .btn { text-decoration: none; padding: 9px 18px; }

.landing-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
    margin-bottom: 10px;
}

.landing-hero { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.landing-hero .landing-eyebrow { display: flex; justify-content: center; }
.landing-hero h1 { font-size: 38px; line-height: 1.2; margin-bottom: 16px; }
.landing-hero .subtitle { font-size: 16px; margin-bottom: 28px; }

.landing-cta-row { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.landing-cta-btn {
    display: inline-block;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 15px;
}
.landing-cta-secondary {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
}
.landing-cta-secondary:hover { color: var(--accent); }

.landing-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 64px;
}
.landing-trust-item strong { color: var(--text); }

.landing-section { margin-bottom: 64px; }
.landing-section-head { text-align: center; max-width: 620px; margin: 0 auto 28px; }
.landing-section-title { font-size: 24px; margin: 0 0 10px; }
.landing-section-head .subtitle { font-size: 14px; }

.landing-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.landing-features-3col { grid-template-columns: repeat(3, 1fr); }
.feature-card { margin-top: 0; text-align: left; }
.feature-icon { font-size: 22px; margin-bottom: 10px; }
.feature-card h3 { margin: 0 0 8px; font-size: 15px; }

.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.landing-cta-banner {
    text-align: center;
    background: rgba(34,197,94,0.08);
    border: 1px solid var(--accent);
    border-radius: 14px;
    padding: 40px 24px;
}

@media (max-width: 900px) {
    .landing-features, .landing-features-3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .landing-steps, .landing-features, .landing-features-3col { grid-template-columns: 1fr; }
    .landing-hero h1 { font-size: 27px; }
}

/* --- Admin area --- */
.admin-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
/* --- Admin dashboard: left sidebar, same visual language as the main
   app's sidebar (see .sidebar above), namespaced separately so the two
   never conflict since they're different page trees with different link
   sets. Inner elements (.sidebar-brand, .sidebar-link, etc.) are reused
   as-is from the main app's sidebar styling. --- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-main { flex: 1; min-width: 0; }
.admin-content { max-width: 960px; margin: 0 auto; padding: 40px 24px 96px; }

@media (max-width: 720px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .admin-sidebar .sidebar-brand { padding: 4px 12px 4px 4px; }
    .admin-sidebar .sidebar-section { display: flex; align-items: center; gap: 4px; margin-bottom: 0; }
    .admin-sidebar .sidebar-label { display: none; }
    .admin-sidebar .sidebar-link { padding: 6px 10px; margin-bottom: 0; white-space: nowrap; }
    .admin-content { padding: 24px 16px 64px; }
}

.mono { font-family: monospace; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.clickable { cursor: pointer; }
.admin-table tr.clickable:hover { background: var(--panel-2); }

.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card-grid-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.stat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.stat-card-accent { border-color: var(--accent); background: linear-gradient(160deg, rgba(34,197,94,0.10), var(--panel) 60%); }
.stat-card-icon { font-size: 18px; margin-bottom: 8px; opacity: 0.9; }
.stat-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 6px; }
.stat-card-value { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-card-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.stat-card-sub a { text-decoration: none; font-weight: 600; }
.stat-card-sub a:hover { text-decoration: underline; }

.admin-panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: 999px;
}
.status-active { background: rgba(74,222,128,0.15); color: #4ade80; }
.status-suspended { background: rgba(255,92,92,0.15); color: var(--collision); }

.credit-positive { color: #4ade80; font-weight: 600; }
.credit-negative { color: var(--collision); font-weight: 600; }

@media (max-width: 1100px) {
    .stat-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .stat-card-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-panel-row { grid-template-columns: 1fr; }
}

/* --- Free-API research tools (Entity Lookup, Keyword Snapshot, Channel
   Audit/Compare, Trending, Competitor Tracking) --- */
.yt-video-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.yt-video-row:last-child { border-bottom: none; }
.yt-video-list-scroll {
    max-height: 400px;
    overflow-y: auto;
}
.yt-thumb {
    width: 96px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--panel-2);
}
.yt-thumb-empty { border: 1px solid var(--border); }
.yt-video-info { min-width: 0; flex: 1; }
.yt-video-title {
    display: block;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yt-video-title:hover { color: var(--accent); }
.yt-video-stats { text-align: right; flex-shrink: 0; }
.yt-stat-value { font-weight: 700; font-size: 15px; }

.yt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.yt-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
}
.yt-card:hover { border-color: var(--accent); }
.yt-card-thumb { width: 100%; height: 140px; object-fit: cover; display: block; }
.yt-card-body { padding: 12px 14px; }
.yt-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.competitors-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 16px;
}
.competitors-toolbar select { width: auto; min-width: 140px; }

@media (max-width: 900px) {
    .yt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .yt-grid { grid-template-columns: 1fr; }
    .yt-thumb { width: 72px; height: 40px; }
}

/* --- Channel Checkup (AI-powered audit on the Channel Audit page) --- */
.checkup-panel { margin-top: 20px; }
.checkup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.checkup-score {
    text-align: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 22px;
    flex-shrink: 0;
}
.checkup-score-value { font-size: 30px; font-weight: 800; line-height: 1; }
.checkup-score-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-top: 4px;
}
.checkup-score.sauce-pass .checkup-score-value { color: #4ade80; }
.checkup-score.sauce-fail .checkup-score-value { color: var(--collision); }

.checkup-finding {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.checkup-finding:last-child { border-bottom: none; }
.checkup-finding-pattern { font-weight: 700; font-size: 14px; }

.checkup-action-list { margin: 0; padding-left: 20px; }
.checkup-action-list li { margin-bottom: 8px; line-height: 1.5; }
.checkup-action-list li:last-child { margin-bottom: 0; }

.checkup-export-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 14px 0 40px;
}

@media (max-width: 600px) {
    .checkup-header { flex-direction: column; align-items: flex-start; }
    .checkup-export-row { justify-content: stretch; }
    .checkup-export-row .btn { flex: 1; }
}

/* Print / Save as PDF (Channel Checkup) — only the report itself should
   print, not the sidebar, buttons, or the rest of the page chrome.
   Proof of Work (saved.php) does NOT use this -- it generates a real .pdf
   client-side via html2pdf.js instead, specifically to avoid the browser's
   own print header/footer (page title + URL + date) showing up on what's
   meant to be a clean certificate. */
@media print {
    body * { visibility: hidden; }
    #checkupPrintArea, #checkupPrintArea * { visibility: visible; }
    #checkupPrintArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .no-print { display: none !important; }
}